/**
 * FaraLabs Aria — fullscreen auth + customer panel + admin cabin.
 *
 * Design tokens follow fl-site.css: #070b15 base, #4c8dff/#22d3ee/#8b7cf6
 * brand trio, glass cards, 12–24px radii, Vazirmatn (inherited).
 * RTL everywhere.
 */

/* ================================================================== */
/* Header button / avatar                                              */
/* ================================================================== */

.fl-login-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 38px;
        padding: 0 16px;
        border-radius: 11px;
        border: 1px solid rgba(255, 255, 255, .14);
        background: linear-gradient(135deg, rgba(76, 141, 255, .18), rgba(139, 124, 246, .14));
        color: #eaf1ff;
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        transition: .18s ease;
        white-space: nowrap;
}

.fl-login-btn svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
}

.fl-login-btn:hover {
        border-color: rgba(76, 141, 255, .55);
        background: linear-gradient(135deg, rgba(76, 141, 255, .3), rgba(34, 211, 238, .18));
        box-shadow: 0 4px 18px rgba(76, 141, 255, .25);
}

.fl-userchip {
        position: relative;
        display: inline-flex;
        align-items: center;
}

/* v3.12.0 — the chip is now a plain <a> to the panel (dropdown removed;
   personal links moved into the main menu). */
.fl-userchip--link {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        height: 40px;
        padding: 0 10px 0 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .04);
        color: #eaf1ff;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        flex-shrink: 0;
        transition: .18s ease;
}
.fl-userchip--link:hover {
        border-color: rgba(76, 141, 255, .5);
        background: rgba(76, 141, 255, .12);
        color: #fff;
}
.fl-userchip--link img,
.fl-userchip--link .flc-avatar-letter {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
}

.fl-userchip__btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        height: 40px;
        padding: 0 10px 0 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .04);
        color: #eaf1ff;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: .18s ease;
}

.fl-userchip__btn:hover,
.fl-userchip.open .fl-userchip__btn {
        border-color: rgba(76, 141, 255, .5);
        background: rgba(76, 141, 255, .12);
}

.fl-userchip__btn img,
.fl-userchip__btn .flc-avatar-letter {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
}

.flc-avatar-letter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(135deg, #4c8dff, #8b7cf6);
        color: #fff;
        font-weight: 800;
}

.fl-userchip__caret {
        width: 0;
        height: 0;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        border-top: 5px solid rgba(234, 241, 255, .7);
        transition: transform .18s ease;
}

.fl-userchip.open .fl-userchip__caret {
        transform: rotate(180deg);
}

.fl-userchip__menu {
        position: absolute;
        top: calc(100% + 10px);
        inset-inline-start: 0;
        min-width: 216px;
        padding: 8px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, .1);
        background: rgba(10, 15, 30, .96);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: .18s ease;
        z-index: 1200;
}

.fl-userchip.open .fl-userchip__menu {
        opacity: 1;
        visibility: visible;
        transform: none;
}

.fl-userchip__menu header {
        padding: 10px 12px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        margin-bottom: 6px;
}

.fl-userchip__menu header strong {
        display: block;
        font-size: 13.5px;
}

.fl-userchip__menu header small {
        color: rgba(234, 241, 255, .55);
        font-size: 11.5px;
        direction: ltr;
        display: block;
        margin-top: 3px;
}

.fl-userchip__menu a,
.fl-userchip__menu button {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 9px 12px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: rgba(234, 241, 255, .85);
        font: inherit;
        font-size: 13px;
        text-decoration: none;
        cursor: pointer;
        text-align: start;
        transition: .15s ease;
}

.fl-userchip__menu a:hover,
.fl-userchip__menu button:hover {
        background: rgba(76, 141, 255, .14);
        color: #fff;
}

.fl-userchip__menu .flc-logout:hover {
        background: rgba(255, 90, 120, .16);
        color: #ff9db0; /* v3.16.0 one rose */
}

/* ================================================================== */
/* Fullscreen auth overlay                                             */
/* ================================================================== */

.flc-auth {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
        overflow: auto;
}

.flc-auth[hidden] {
        display: none;
}

.flc-auth__bg {
        position: absolute;
        inset: 0;
        background:
                radial-gradient(900px 500px at 85% -10%, rgba(76, 141, 255, .16), transparent 60%),
                radial-gradient(700px 500px at 10% 110%, rgba(139, 124, 246, .14), transparent 60%),
                rgba(5, 8, 18, .82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
}

.flc-auth__art {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
}

.flc-auth__art .glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        opacity: .35;
}

.flc-auth__art .g1 {
        width: 420px;
        height: 420px;
        top: -140px;
        inset-inline-end: -80px;
        background: #4c8dff;
}

.flc-auth__art .g2 {
        width: 360px;
        height: 360px;
        bottom: -120px;
        inset-inline-start: -60px;
        background: #8b7cf6;
}

.flc-auth__art .grid {
        position: absolute;
        inset: 0;
        background-image:
                linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: radial-gradient(700px 500px at 50% 40%, #000 30%, transparent 75%);
        -webkit-mask-image: radial-gradient(700px 500px at 50% 40%, #000 30%, transparent 75%);
}

/* v3.17.0 — unified bare-X standard: EVERY popup close button is a bare
   glyph (no box, no border, no fill), physically LEFT-aligned, bigger
   hit area and a soft glow hover. */
.flc-auth__close {
        position: absolute;
        top: 8px;
        inset-inline-end: 8px; /* inside the ورود/ثبت‌نام card, physical top-LEFT corner in this RTL site */
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(234, 241, 255, .78);
        font-size: 30px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        transition: .18s ease;
        z-index: 3;
}

.flc-auth__close:hover {
        color: #fff;
        text-shadow: 0 0 14px rgba(124, 178, 255, .85), 0 0 30px rgba(76, 141, 255, .45);
        transform: scale(1.06);
}

.flc-auth__close:active { transform: scale(.92); }

.flc-auth__card {
        position: relative;
        width: min(460px, 100%);
        max-height: calc(100vh - 44px);
        overflow: auto;
        padding: 34px 30px 30px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, .1);
        background: linear-gradient(160deg, rgba(17, 24, 46, .92), rgba(9, 13, 27, .96));
        box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
        animation: flcUp .35s ease both;
}

@keyframes flcUp {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: none; }
}

.flc-auth__brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 26px;
}

.flc-auth__logo {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-size: 22px;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, #4c8dff, #22d3ee 55%, #8b7cf6);
        box-shadow: 0 8px 24px rgba(76, 141, 255, .35);
}

.flc-auth__brand strong {
        display: block;
        font-size: 16.5px;
}

.flc-auth__brand small {
        color: rgba(234, 241, 255, .5);
        font-size: 11.5px;
        letter-spacing: .06em;
}

.flc-auth__title {
        font-size: 21px;
        font-weight: 800;
        margin: 0 0 6px;
}

.flc-auth__lead {
        color: rgba(234, 241, 255, .6);
        font-size: 13.5px;
        margin: 0 0 18px;
        line-height: 1.9;
}

.flc-step {
        animation: flcUp .25s ease both;
}

.flc-field {
        margin-bottom: 14px;
}

.flc-field label {
        display: block;
        font-size: 12.5px;
        color: rgba(234, 241, 255, .65);
        margin-bottom: 7px;
}

.flc-field input {
        width: 100%;
        height: 47px;
        padding: 0 15px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .045);
        color: #eaf1ff; /* v3.16.0 one bright-white */
        font: inherit;
        font-size: 14.5px;
        transition: .15s ease;
}

.flc-field input:focus {
        outline: 0;
        border-color: rgba(76, 141, 255, .65);
        background: rgba(76, 141, 255, .08);
        box-shadow: 0 0 0 3px rgba(76, 141, 255, .14);
}

.flc-field input::placeholder {
        color: rgba(234, 241, 255, .3);
}

/* v3.45.0 — login-type inputs are LTR and CENTERED everywhere (user
   request): the identifier field (phone/email), the login password,
   the register email + password, the «رمز عبور جدید» step, the
   profile change-phone field and the tracking-page phone. Names and
   other Persian fields stay RTL — only these selectors match. */
#flc-idf, #flc-reg-email, #flc-cp-phone, #flc-trk-phone,
#flc-pass, #flc-reg-pass, #flc-newpass,
.flc-field input[type="password"],
.flc-field input[type="tel"],
.flc-field input[type="email"] {
        direction: ltr;
        text-align: center;
}

/* v3.33.0 — panel textareas/selects follow the input theme. They used to
   fall back to the browser default (WHITE box in the dark panel — part of
   the «تم خوبی نداره» report on the tickets page). */
.flc-field textarea,
.flc-field select {
        width: 100%;
        padding: 11px 15px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .045);
        color: #eaf1ff;
        font: inherit;
        font-size: 14.5px;
        line-height: 1.9;
        transition: .15s ease;
}

.flc-field textarea:focus,
.flc-field select:focus {
        outline: 0;
        border-color: rgba(76, 141, 255, .65);
        background: rgba(76, 141, 255, .08);
        box-shadow: 0 0 0 3px rgba(76, 141, 255, .14);
}

.flc-field textarea::placeholder {
        color: rgba(234, 241, 255, .3);
}

.flc-field select option {
        background-color: #111a30;
        color: #eaf1ff;
}

.flc-field--pass {
        position: relative;
}

.flc-eye {
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        height: 47px;
        width: 44px;
        display: grid;
        place-items: center;
        background: none;
        border: 0;
        font-size: 15px;
        opacity: .45;
        cursor: pointer;
}

.flc-eye:hover {
        opacity: .9;
}

.flc-grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
}

.flc-grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
}

.flc-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 47px;
        padding: 0 20px;
        border-radius: 12px;
        border: 0;
        font: inherit;
        font-size: 14.5px;
        font-weight: 700;
        cursor: pointer;
        transition: .18s ease;
}

.flc-btn--primary {
        color: #fff;
        background: var(--fl-btn-grad); /* v3.16.0 — the same brand tri-tone as the site */
        box-shadow: 0 8px 26px rgba(76, 141, 255, .3);
}

.flc-btn--primary:hover {
        filter: brightness(1.08);
        box-shadow: 0 10px 32px rgba(76, 141, 255, .42);
}

.flc-btn--primary:disabled {
        opacity: .55;
        cursor: wait;
        filter: saturate(.6);
}

.flc-btn--ghost {
        color: #eaf1ff;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .13);
        margin-bottom: 10px;
}

.flc-btn--ghost:hover {
        border-color: rgba(76, 141, 255, .5);
        background: rgba(76, 141, 255, .1);
}

.flc-auth__err {
        min-height: 20px;
        margin-top: 10px;
        font-size: 12.5px;
        color: #ff9db0;
}

.flc-auth__err:empty {
        margin: 0;
}

.flc-auth__links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 14px;
}

.flc-link {
        background: none;
        border: 0;
        padding: 0;
        color: var(--fl-accent-soft); /* v3.16.0 harmonized */
        font: inherit;
        font-size: 12.5px;
        cursor: pointer;
}

/* v3.39.0 — belt & suspenders for the countdown: during «فاصلهٔ ارسال مجدد»
   NEITHER the resend NOR the voice link may ever show. */
.flc-link[hidden],
.flc-trk-link[hidden] {
        display: none !important;
}

.flc-link:hover {
        color: var(--fl-accent-hover); /* v3.16.0 harmonized (one hover step lighter) */
        text-decoration: underline;
}

.flc-back {
        margin-top: 18px;
        color: rgba(234, 241, 255, .5);
}

/* v3.13.0 — uniform footer strip inside the fullscreen auth popup
   (every fullscreen popup shares this header/footer shape). */
.flc-auth__foot {
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .07);
        text-align: center;
        font-size: 11.5px;
        letter-spacing: .03em;
        color: rgba(234, 241, 255, .42);
}

.flc-timer {
        font-size: 12px;
        color: rgba(234, 241, 255, .55);
}

/* OTP cells */

.flc-otp {
        position: relative; /* v3.41.0 — old hidden autofill sink removed; cells sit in flow */
        display: flex;
        gap: 10px;
        direction: ltr;
        justify-content: center;
        margin: 6px 0 18px;
}

/* v3.41.0 — the v3.40 hidden autofill sink is REMOVED: iOS QuickType /
   Gboard / Samsung only offer the SMS-code suggestion for a VISIBLE
   focused input. The first cell itself carries autocomplete=
   one-time-code now (see buildOtpCells / buildTrkCells). */

.flc-otp input {
        width: 54px;
        height: 60px;
        text-align: center;
        font-size: 24px;
        font-weight: 800;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .14);
        background: rgba(255, 255, 255, .05);
        color: #fff;
        transition: .15s ease;
}

.flc-otp input:focus {
        outline: 0;
        border-color: #4c8dff;
        box-shadow: 0 0 0 3px rgba(76, 141, 255, .2);
        background: rgba(76, 141, 255, .1);
}

.flc-otp input.filled {
        border-color: rgba(34, 211, 238, .5);
        background: rgba(34, 211, 238, .08);
}

/* Success step */

.flc-step--ok {
        text-align: center;
        padding: 12px 0 4px;
}

.flc-ok__mark {
        width: 68px;
        height: 68px;
        margin: 4px auto 16px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 30px;
        font-weight: 800;
        color: #0a1a2f;
        background: linear-gradient(135deg, #22d3ee, #4c8dff);
        box-shadow: 0 12px 34px rgba(34, 211, 238, .35);
}

/* Demo code toast */

.flc-demo {
        margin-top: 12px;
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px dashed rgba(34, 211, 238, .45);
        background: rgba(34, 211, 238, .07);
        color: #9fe8f7;
        font-size: 13px;
        text-align: center;
        direction: ltr;
}

/* ================================================================== */
/* Customer panel + admin cabin                                        */
/* ================================================================== */

.flc-container {
        width: min(1600px, calc(100% - 48px)); /* v3.15.0 — same canvas as the site pages (was 1180) */
        margin-inline: auto;
}

.flc-panel {
        padding: 44px 0 70px;
        min-height: 60vh;
}

.flc-panel__wrap {
        display: grid;
        grid-template-columns: 264px 1fr;
        gap: 26px;
        align-items: start;
}

.flc-panel__side {
        position: sticky;
        top: 96px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0; /* v3.12.0 — grid item must be shrinkable or nowrap tabs blow up the mobile layout viewport */
        max-width: 100%;
}

/* v3.12.0 — identity card: horizontal avatar + name/phone with a
   gradient edge; far tighter than the old centered stack. */
.flc-panel__me {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 16px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, .09);
        background:
                linear-gradient(180deg, rgba(76, 141, 255, .14), transparent 62%),
                linear-gradient(160deg, rgba(20, 28, 52, .85), rgba(10, 15, 30, .92));
        position: relative;
        overflow: hidden;
}
.flc-panel__me::before {
        content: '';
        position: absolute;
        inset-inline: 0;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(76, 141, 255, .65), rgba(139, 124, 246, .55), transparent);
}

.flc-panel__ava {
        flex: 0 0 auto;
        width: 56px;
        height: 56px;
        margin: 0;
        border-radius: 50%;
        overflow: hidden;
        display: grid;
        place-items: center;
        border: 2px solid rgba(76, 141, 255, .45);
        box-shadow: 0 6px 20px rgba(76, 141, 255, .28);
        background: rgba(255, 255, 255, .04);
}

.flc-panel__ava img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.flc-panel__me-txt {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
}

.flc-panel__me-txt strong {
        font-size: 14.5px;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.flc-panel__me-txt small {
        color: rgba(234, 241, 255, .55);
        font-size: 12px;
        direction: ltr;
        text-align: end;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
}

.flc-panel__tabs {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, .08);
        background: rgba(12, 18, 36, .8);
}

.flc-panel__tabs button,
.flc-panel__adminlink {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 14px;
        border: 0;
        border-radius: 12px;
        background: none;
        color: rgba(234, 241, 255, .72);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        text-align: start;
        cursor: pointer;
        text-decoration: none;
        transition: .15s ease;
}

.flc-panel__tabs button:hover {
        background: rgba(76, 141, 255, .1);
        color: #fff;
}

.flc-panel__tabs button.is-on {
        background: linear-gradient(135deg, rgba(76, 141, 255, .22), rgba(139, 124, 246, .16));
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(76, 141, 255, .35);
}

.flc-panel__adminlink {
        margin-top: 6px;
        color: var(--fl-accent-soft); /* v3.16.0 harmonized */
        border-top: 1px solid rgba(255, 255, 255, .07);
        padding-top: 13px;
}

.flc-panel__main {
        min-width: 0;
}

/* v3.14.0 — «خروج از حساب» in the panel sidebars (customer + admin);
   rides along inside the mobile menu sheet via the sheet cloner. */
.flc-panel__out {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-top: 6px;
        padding: 11px 14px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 12px;
        background: rgba(255, 255, 255, .04);
        color: rgba(234, 241, 255, .82);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        text-align: start;
        text-decoration: none;
        cursor: pointer;
        transition: .18s ease;
}
.flc-panel__out svg { width: 15px; height: 15px; flex: 0 0 auto; }
.flc-panel__out:hover {
        color: #fff;
        background: rgba(255, 255, 255, .09);
        border-color: rgba(255, 255, 255, .32);
}

.flc-tab {
        padding: 26px 26px 30px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, .08);
        background: linear-gradient(165deg, rgba(16, 23, 44, .8), rgba(9, 13, 27, .92));
        animation: flcUp .25s ease both;
}

.flc-tab[hidden] {
        display: none;
}

.flc-tab h3 {
        margin: 0 0 20px;
        font-size: 17px;
        font-weight: 800;
}

.flc-tab h4 {
        margin: 22px 0 12px;
        font-size: 14px;
        font-weight: 700;
        color: rgba(234, 241, 255, .8);
}

.flc-inputbtn {
        display: flex;
        gap: 10px;
}

.flc-inputbtn input {
        flex: 1;
        min-width: 0; /* v3.12.0 — inputs must be shrinkable on phones */
}

.flc-inputbtn .flc-btn {
        width: auto;
        height: 47px;
        white-space: nowrap;
}

.flc-panel__msg {
        display: inline-block;
        margin-top: 12px;
        margin-inline-start: 12px;
        font-size: 12.5px;
        color: #7ce8bd;
}

.flc-panel__msg.flc-err {
        color: #ff9db0;
}

/* Modal (change phone) */

.flc-modal {
        position: fixed;
        inset: 0;
        z-index: 120000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
        background: rgba(4, 7, 16, .78);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
}

.flc-modal[hidden] {
        display: none;
}

.flc-modal__box {
        position: relative;
        width: min(430px, 100%);
        padding: 26px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, .1);
        background: linear-gradient(160deg, rgba(19, 26, 50, .97), rgba(10, 15, 30, .98));
        box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
        animation: flcUp .25s ease both;
}

/* v3.17.0 — bare X: no box, physically LEFT, larger */
.flc-modal__x {
        position: absolute;
        top: 8px;
        inset-inline-end: 8px; /* X on the physical LEFT in RTL */
        left: 8px;
        right: auto;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(234, 241, 255, .78);
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        transition: .18s ease;
}

.flc-modal__x:hover {
        color: #fff;
        text-shadow: 0 0 14px rgba(124, 178, 255, .85), 0 0 30px rgba(76, 141, 255, .45);
        transform: scale(1.06);
}

.flc-modal__x:active { transform: scale(.92); }

.flc-modal__box h4 {
        margin: 0 0 14px;
        font-size: 15.5px;
}

/* v3.13.0 — when a modal goes FULLSCREEN on phones it follows the shared
   popup standard: header bar with the title, X on the RIGHT side
   (physical), scrollable body. Desktop keeps the small dialog with the
   X on the left (v3.10.0 request). */
@media (max-width: 640px) {
        .flc-modal { padding: 0; align-items: stretch; background: rgba(4, 7, 16, .96); }
        .flc-modal__box {
                width: 100%;
                height: 100dvh;
                max-height: none;
                border-radius: 0;
                border: 0;
                display: flex;
                flex-direction: column;
                padding: 0;
        }
        .flc-modal .flc-modal__box h4 {
                margin: 0;
                padding: 16px 56px;
                text-align: center;
                font-size: 15px;
                border-bottom: 1px solid rgba(255, 255, 255, .08);
                background: rgba(10, 15, 30, 1);
                flex: 0 0 auto;
        }
        .flc-modal__x {
                top: 50%;
                transform: translateY(-50%);
                inset-inline-end: 6px; /* v3.17.0 — physical LEFT in RTL, same as every popup */
                inset-inline-start: auto;
                width: 44px;
                height: 44px;
                font-size: 28px;
        }
        .flc-modal__x:hover { transform: translateY(-50%) scale(1.06); }
        .flc-modal__x:active { transform: translateY(-50%) scale(.92); }
        .flc-modal__body {
                flex: 1 1 auto;
                overflow-y: auto;
                overscroll-behavior: contain;
                padding: 20px 18px;
        }
        .flc-modal__box .flc-auth__err {
                flex: 0 0 auto;
                margin: 0;
                padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
                border-top: 1px solid rgba(255, 255, 255, .06);
                background: rgba(10, 15, 30, 1);
        }
}

.flc-hint {
        color: rgba(234, 241, 255, .55);
        font-size: 12.5px;
        line-height: 1.9;
}

/* Avatar tab */

.flc-ava-grid {
        display: grid;
        grid-template-columns: 1fr 220px;
        gap: 24px;
        align-items: start;
}

.flc-ava-stage {
        position: relative;
        height: 340px;
        border-radius: 18px;
        border: 1px dashed rgba(255, 255, 255, .16);
        background:
                repeating-conic-gradient(rgba(255, 255, 255, .025) 0 25%, transparent 0 50%) 0 0 / 26px 26px,
                rgba(255, 255, 255, .02);
        overflow: hidden;
        display: grid;
        place-items: center;
}

.flc-ava-stage img {
        max-width: 92%;
        max-height: 92%;
        display: none;
}

.flc-ava-stage.is-cropping img {
        display: block;
}

.flc-ava-stage.is-cropping .flc-hint {
        display: none;
}

.flc-ava-actions {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.flc-ava-actions label.flc-btn {
        width: auto;
        align-self: flex-start;
        cursor: pointer;
}

.flc-ava-zoom {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 11.5px;
        color: rgba(234, 241, 255, .55);
}

.flc-ava-zoom input {
        flex: 1;
        accent-color: #4c8dff;
}

.flc-ava-btns {
        display: flex;
        gap: 10px;
}

.flc-ava-btns .flc-btn {
        width: auto;
        padding: 0 18px;
        height: 44px;
        font-size: 13.5px;
}

.flc-ava-preview {
        text-align: center;
}

.flc-ava-preview > span {
        font-size: 12px;
        color: rgba(234, 241, 255, .55);
}

.flc-ava-round {
        width: 132px;
        height: 132px;
        margin: 12px auto 0;
        border-radius: 50%;
        overflow: hidden;
        display: grid;
        place-items: center;
        font-size: 44px;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, #4c8dff, #8b7cf6);
        border: 3px solid rgba(255, 255, 255, .12);
}

.flc-ava-round img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

/* Licenses */

.flc-license {
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .09);
        background: rgba(255, 255, 255, .03);
        margin-bottom: 10px;
}

.flc-license__key {
        font-family: monospace;
        font-size: 14px;
        color: #9fe8f7;
        margin-bottom: 8px;
        user-select: all;
}

.flc-license__meta {
        display: flex;
        gap: 14px;
        font-size: 12px;
        color: rgba(234, 241, 255, .55);
}

.st {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
}

.st-active, .st-completed, .st-success {
        background: rgba(60, 220, 150, .14);
        color: var(--fl-ok-soft); /* v3.16.0 harmonized */
}

.st-processing {
        background: rgba(76, 141, 255, .16);
        color: var(--fl-accent-soft); /* v3.16.0 harmonized */
}

.st-pending, .st-on-hold {
        background: rgba(255, 190, 80, .13);
        color: #ffd79a;
}

.st-error, .st-cancelled, .st-disabled {
        background: rgba(255, 90, 120, .13);
        color: #ff9db0;
}

/* Guest prompt */

.flc-panel-guest {
        padding: 70px 0 90px;
        display: grid;
        place-items: center;
}

.flc-panel-guest__card {
        text-align: center;
        padding: 44px 40px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, .09);
        background: linear-gradient(165deg, rgba(16, 23, 44, .85), rgba(9, 13, 27, .95));
        max-width: 430px;
}

.flc-panel-guest__card h2 {
        margin: 0 0 10px;
}

.flc-panel-guest__card p {
        color: rgba(234, 241, 255, .6);
        font-size: 13.5px;
        line-height: 2;
        margin: 0 0 22px;
}

/* Stats */

.flc-stats__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-bottom: 14px;
}

.flc-stat {
        padding: 20px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, .09);
        background: linear-gradient(150deg, rgba(76, 141, 255, .09), rgba(139, 124, 246, .05) 60%, transparent);
}

.flc-stat__n {
        display: block;
        font-size: 25px;
        font-weight: 800;
        background: linear-gradient(135deg, var(--fl-accent-soft), var(--fl-accent-2)); /* v3.16.0 harmonized */
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 4px;
}

.flc-stat__l {
        font-size: 12px;
        color: rgba(234, 241, 255, .55);
}

.flc-feed {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.flc-feed__item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        font-size: 12.5px;
}

.flc-feed__item .flc-feed__ic {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 800;
}

.flc-feed__item.kind-success .flc-feed__ic {
        background: rgba(60, 220, 150, .15);
        color: var(--fl-ok-soft); /* v3.16.0 harmonized */
}

.flc-feed__item.kind-error .flc-feed__ic {
        background: rgba(255, 90, 120, .15);
        color: #ff9db0;
}

.flc-feed__item time {
        margin-inline-start: auto;
        color: rgba(234, 241, 255, .4);
        font-size: 11px;
        white-space: nowrap;
}

/* Tables */

.flc-tools {
        display: flex;
        gap: 10px;
        margin-bottom: 16px;
        flex-wrap: wrap;
}

.flc-tools input,
.flc-tools select {
        height: 44px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .045);
        color: #eaf1ff; /* v3.16.0 one bright-white */
        font: inherit;
        font-size: 13.5px;
}

.flc-tools input[type="search"] {
        flex: 1;
        min-width: 200px;
}

.flc-tools .flc-btn {
        width: auto;
        height: 44px;
        padding: 0 18px;
        font-size: 13px;
}

.flc-tablewrap {
        overflow-x: auto;
}

.flc-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
}

.flc-table th {
        text-align: start;
        padding: 10px 12px;
        color: rgba(234, 241, 255, .5);
        font-weight: 600;
        font-size: 11.5px;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        white-space: nowrap;
}

.flc-table td {
        padding: 11px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        vertical-align: middle;
}

.flc-cell-user {
        display: flex;
        align-items: center;
        gap: 10px;
}

.flc-cell-user small {
        display: block;
        color: rgba(234, 241, 255, .42);
        font-size: 10.5px;
        direction: ltr;
        text-align: start;
}

.flc-row-actions {
        white-space: nowrap;
}

.flc-mini {
        padding: 5px 12px;
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, .13);
        background: rgba(255, 255, 255, .04);
        color: rgba(234, 241, 255, .8);
        font: inherit;
        font-size: 11.5px;
        cursor: pointer;
        margin-inline-start: 5px;
        transition: .15s ease;
}

.flc-mini:hover {
        border-color: rgba(76, 141, 255, .5);
        color: #fff;
}

.flc-mini.is-on {
        border-color: rgba(255, 190, 80, .5);
        color: #ffd79a;
}

.flc-mini--danger:hover {
        border-color: rgba(255, 90, 120, .55);
        color: #ff9db0;
        background: rgba(255, 90, 120, .08);
}

.flc-table select {
        height: 36px;
        padding: 0 10px;
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(20, 28, 52, .9);
        color: #eaf1ff; /* v3.16.0 one bright-white */
        font: inherit;
        font-size: 12px;
        cursor: pointer;
}

/* Admin forms */

.flc-form {
        max-width: 640px;
}

.flc-form__row {
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin-bottom: 14px;
}

.flc-form__row label {
        font-size: 12.5px;
        color: rgba(234, 241, 255, .65);
}

.flc-form__row--check {
        flex-direction: row;
        align-items: center;
        gap: 10px;
}

.flc-form__row--check label {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        color: rgba(234, 241, 255, .85);
        cursor: pointer;
}

.flc-form__row input[type="text"],
.flc-form__row input[type="password"],
.flc-form__row input[type="url"],
.flc-form__row input[type="number"],
.flc-form__row select {
        height: 44px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .045);
        color: #eaf1ff; /* v3.16.0 one bright-white */
        font: inherit;
        font-size: 13.5px;
        direction: ltr;
        text-align: end;
}

.flc-form__row input[type="checkbox"] {
        width: 17px;
        height: 17px;
        accent-color: #4c8dff;
}

.flc-form .flc-btn {
        width: auto;
        padding: 0 22px;
        height: 46px;
        margin-top: 4px;
}

.flc-tester {
        margin-top: 24px;
        padding: 18px;
        border-radius: 16px;
        border: 1px dashed rgba(255, 255, 255, .14);
        background: rgba(255, 255, 255, .02);
}

.flc-tester h4 {
        margin-top: 0;
}

.flc-logbox {
        margin-top: 24px;
}

.flc-table--log td {
        font-size: 12px;
}

/* ================================================================== */
/* Responsive                                                          */
/* ================================================================== */

@media (max-width: 900px) {
        .flc-panel__wrap {
                grid-template-columns: 1fr;
        }

        /* v3.12.0 — THE mobile blow-up fix: grid items default to
           min-width:auto, so the nowrap tab bar (min-content ≈ 900px on
           the admin panel) stretched the whole layout viewport to that
           width and the site zoomed out. Shrinkable items make the tab
           rows scroll internally instead. */
        .flc-panel__wrap > * {
                min-width: 0;
                max-width: 100%;
        }

        .flc-panel__side {
                position: static;
        }

        /* Identity card stays a comfortable row on phones. */
        .flc-panel__me {
                padding: 14px;
                gap: 12px;
        }

        .flc-panel__tabs {
                flex-direction: row;
                overflow-x: auto;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
                max-width: 100%;
        }

        .flc-panel__tabs::-webkit-scrollbar {
                display: none;
        }

        .flc-panel__tabs button,
        .flc-panel__adminlink {
                white-space: nowrap;
                width: auto;
                padding: 9px 14px;
        }

        .flc-stats__grid {
                grid-template-columns: repeat(2, 1fr);
        }

        .flc-ava-grid {
                grid-template-columns: 1fr;
        }

        .flc-grid2,
        .flc-grid3 {
                grid-template-columns: 1fr;
        }

        /* v3.12.0 — phone row (input + «تغییر با کد تأیید») wraps instead
           of forcing a 500px min-content width. */
        .flc-inputbtn {
                flex-wrap: wrap;
        }

        .flc-inputbtn .flc-btn {
                flex: 1 1 auto;
        }

        .flc-tab {
                padding: 20px 16px 24px;
        }
}

@media (max-width: 480px) {
        .flc-auth__card {
                padding: 26px 20px 22px;
                border-radius: 20px;
        }

        .flc-otp input {
                width: 44px;
                height: 52px;
                font-size: 20px;
        }

        .fl-login-btn span {
                display: none;
        }

        .fl-login-btn {
                padding: 0 11px;
        }
}


/* ============================ v3.10.0 fixes + tickets ============================ */

/* Native select dropdowns: dark options (white-on-white fix) */
.flc-panel select,
.flc-admin select {
        color-scheme: dark;
}
.flc-panel select option,
.flc-panel select optgroup,
.flc-admin select option,
.flc-admin select optgroup {
        background-color: #111a30; /* v3.16.0 — one navy (matches the sheet gradient) */
        color: #eaf1ff;
}

/* ---- Tickets ---- */
.flc-tk-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 18px;
}
.flc-tk-table .flc-tk-subject strong {
        display: block;
}
.flc-tk-table .flc-tk-subject small {
        display: block;
        color: rgba(234, 241, 255, .55);
        font-size: 11.5px;
        margin-top: 3px;
}
.flc-tk-card {
        margin: 18px 0;
        padding: 22px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, .09);
        background: linear-gradient(160deg, rgba(19, 26, 50, .85), rgba(10, 15, 30, .92));
}
.flc-tk-card h4 {
        margin: 0 0 16px;
}
.flc-tk-card .flc-btn {
        margin-inline-end: 10px;
}
.flc-tk-back {
        margin-bottom: 16px;
}
.flc-tk-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 20px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, .09);
        background: rgba(15, 21, 41, .75);
        margin-bottom: 16px;
}
.flc-tk-head h4 {
        margin: 0 0 6px;
        font-size: 15.5px;
}
.flc-tk-head .flc-hint {
        margin: 0;
}
.flc-tk-adminctl {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12.5px;
        color: rgba(234, 241, 255, .65);
        white-space: nowrap;
}
.flc-tk-msgs {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 460px;
        overflow-y: auto;
        padding: 4px;
        margin-bottom: 16px;
}
.flc-tmsg {
        max-width: 78%;
        align-self: flex-start;
        padding: 14px 16px;
        border-radius: 16px 16px 16px 4px;
        border: 1px solid rgba(255, 255, 255, .09);
        background: rgba(17, 24, 46, .9);
}
.flc-tmsg header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 8px;
}
.flc-tmsg header strong {
        font-size: 12.5px;
        color: var(--fl-accent, #4c8dff);
}
.flc-tmsg time {
        font-size: 11px;
        color: rgba(234, 241, 255, .45);
}
.flc-tmsg p {
        margin: 0;
        font-size: 13.5px;
        line-height: 2;
        color: rgba(234, 241, 255, .88);
        white-space: pre-line;
        overflow-wrap: anywhere;
}
.flc-tmsg--admin {
        align-self: flex-end;
        border-radius: 16px 16px 4px 16px;
        background: linear-gradient(160deg, rgba(40, 58, 110, .55), rgba(24, 34, 66, .9));
        border-color: rgba(76, 141, 255, .35);
}
.flc-tmsg--admin header strong {
        color: var(--fl-ok-soft); /* v3.16.0 harmonized */
}
.flc-chip {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11.5px;
        border: 1px solid rgba(255, 255, 255, .12);
}
.pr-low { color: var(--fl-accent-soft); border-color: rgba(120, 190, 255, .35); } /* v3.16.0 harmonized */
.pr-normal { color: #ffd79a; border-color: rgba(255, 210, 120, .35); } /* v3.16.0 one amber */
.pr-high { color: #ff9db0; border-color: rgba(255, 120, 120, .4); } /* v3.16.0 one rose */
.st-open { color: #ffd79a; }
.st-answered { color: var(--fl-ok-soft); /* v3.16.0 harmonized */ }
.st-closed { color: rgba(234, 241, 255, .5); }
.flc-tk-reply .flc-field { margin-bottom: 14px; }

/* v3.38.0 — the composer's action buttons («ارسال پاسخ» + the SMS notify /
   close button) stack full-width on phones with a guaranteed gap. The old
   side-by-side row is exactly where the two buttons glued together on
   mobile. Margin-based spacing (not flex gap) so it holds on older
   WebViews too. */
@media (max-width: 640px) {
        .flc-tk-reply .flc-tools { flex-direction: column; align-items: stretch; gap: 0; }
        .flc-tk-reply .flc-tools .flc-btn { width: 100%; margin-bottom: 10px; }
        .flc-tk-reply .flc-tools .flc-btn:last-child { margin-bottom: 0; }
}
textarea#flc-tk-body,
textarea#flc-tk-reply,
textarea#flc-atk-reply {
        width: 100%;
        resize: vertical;
}

@media (max-width: 760px) {
        .flc-tmsg { max-width: 92%; }
        .flc-tk-head { flex-direction: column; }
        .flc-tk-toolbar .flc-tools { width: 100%; }
}

/* ==================== v3.11.0 — badge / bell / leads / notifs ==================== */

/* Unread-tickets counter badge on the admin tab + stat chips. */
.flc-badge {
        display: inline-block;
        min-width: 19px;
        padding: 1px 6px;
        margin-inline-start: 6px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ff5a78, #e0344f);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        vertical-align: 1px;
        box-shadow: 0 2px 8px rgba(224, 52, 79, .45);
}

/* Unread ticket rows in the admin list.
   v3.46.0 — seen vs unseen must be unmistakable: the unseen row gets a
   clearly blue wash + an accent edge on the inline-start (RTL: right)
   + a bigger glowing dot; seen rows stay plain. */
tr.flc-tk-row.is-unread { background: rgba(76, 141, 255, .13); }
tr.flc-tk-row.is-unread td:first-child { position: relative; box-shadow: inset -3px 0 0 rgba(76, 141, 255, .75); }
tr.flc-tk-row.is-unread td:first-child::before {
        content: '';
        position: absolute;
        inset-inline-start: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff5a78;
        box-shadow: 0 0 10px rgba(255, 90, 120, .9);
}

/* v3.46.0 — closed tickets read as archived in BOTH lists: faded gray
   ink, quieter chips, neutral hover (no blue glow). Paint wins over
   is-unread because row_html never emits both classes together. */
tr.flc-tk-row.is-closed td { color: rgba(234, 241, 255, .55); }
tr.flc-tk-row.is-closed td strong { color: rgba(234, 241, 255, .55); }
tr.flc-tk-row.is-closed td small { color: rgba(234, 241, 255, .38); }
tr.flc-tk-row.is-closed .flc-chip { color: rgba(234, 241, 255, .5); border-color: rgba(255, 255, 255, .09); }
tr.flc-tk-row.is-closed .st { color: rgba(234, 241, 255, .5); }
tr.flc-tk-row.is-closed .flc-mini { color: rgba(234, 241, 255, .55); }

/* v3.45.0 — ANY cell of a ticket row opens the ticket (both the admin
   cabin list and the customer panel list). The pointer + hover tint
   make the whole row read as one button; the unread tint deepens on
   hover instead of being replaced. v3.46.0 — closed rows hover gray. */
tr.flc-tk-row { cursor: pointer; }
tr.flc-tk-row:hover td { background: rgba(76, 141, 255, .06); }
tr.flc-tk-row.is-unread:hover td { background: rgba(76, 141, 255, .19); }
tr.flc-tk-row.is-closed:hover td { background: rgba(255, 255, 255, .035); }

/* v3.46.0 — unseen-tickets counter chip: the admin section title
   («تیکت‌های پشتیبانی N تیکت مشاهده‌نشده») and the customer toolbar
   («N پاسخ جدید»). Same rose family as the tab badge. NOTE: the
   explicit [hidden] rule matters — display:inline-block would
   otherwise defeat the hidden attribute. */
.flc-unread-chip {
        display: inline-block;
        margin-inline-start: 10px;
        padding: 3px 12px;
        border-radius: 999px;
        background: rgba(255, 90, 120, .12);
        border: 1px solid rgba(255, 90, 120, .35);
        color: #ff9db0;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.7;
        vertical-align: 2px;
        white-space: nowrap;
}
.flc-unread-chip[hidden] { display: none; }

/* v3.46.0 — themed confirm popup (replaces window.confirm for «این تیکت
   بسته شود؟» and the SMS notify question): same dark-glass language as
   .flc-modal — blurred backdrop, gradient card, accent yes + ghost no.
   Stays a small centered dialog on phones (a fullscreen takeover for a
   yes/no question reads hostile). */
.flc-cmodal {
        position: fixed;
        inset: 0;
        z-index: 190000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
        background: rgba(4, 7, 16, .78);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
}
.flc-cmodal__box {
        position: relative;
        width: min(400px, 100%);
        padding: 26px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, .1);
        background: linear-gradient(160deg, rgba(19, 26, 50, .97), rgba(10, 15, 30, .98));
        box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
        animation: flcUp .25s ease both;
}
.flc-cmodal__box h4 { margin: 0 0 8px; padding-inline-end: 30px; font-size: 15.5px; }
.flc-cmodal__box p { margin: 0 0 18px; font-size: 13.5px; line-height: 2; color: rgba(234, 241, 255, .8); }
.flc-cmodal__x {
        position: absolute;
        top: 8px;
        inset-inline-end: 8px; /* physical LEFT in RTL, same as every popup */
        left: 8px;
        right: auto;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(234, 241, 255, .78);
        font-size: 26px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        transition: .18s ease;
}
.flc-cmodal__x:hover {
        color: #fff;
        text-shadow: 0 0 14px rgba(124, 178, 255, .85), 0 0 30px rgba(76, 141, 255, .45);
        transform: scale(1.06);
}
.flc-cmodal__x:active { transform: scale(.92); }
.flc-cmodal__acts { display: flex; gap: 10px; }
.flc-cmodal__acts .flc-btn { flex: 1 1 auto; margin: 0; }
@media (max-width: 640px) {
        .flc-cmodal__acts { flex-direction: column-reverse; }
        .flc-cmodal__acts .flc-btn { width: 100%; }
}

/* Guest contact card inside the thread view. */
.flc-tk-guest {
        margin: 12px 0;
        padding: 10px 14px;
        border: 1px dashed rgba(76, 141, 255, .4);
        border-radius: 12px;
        background: rgba(76, 141, 255, .06);
        font-size: 13px;
}
.flc-tk-guest strong { color: var(--fl-accent-soft); } /* v3.16.0 harmonized */
.flc-chip--src {
        display: inline-block;
        margin-inline-start: 8px;
        padding: 1px 8px;
        border-radius: 999px;
        font-size: 10.5px;
        border: 1px solid rgba(140, 255, 200, .35);
        color: var(--fl-ok-soft); /* v3.16.0 harmonized */
        vertical-align: 1px;
}

/* Tick-selection column + select-all labels. */
.flc-table td.flc-check, .flc-table th.flc-check { width: 34px; text-align: center; }
.flc-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4c8dff; cursor: pointer; }
.flc-checkall {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: rgba(234, 241, 255, .75);
        cursor: pointer;
        white-space: nowrap;
}
.flc-lead-msg { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: rgba(234, 241, 255, .72); }

/* Notifications matrix (event → bell / Bale). */
.flc-notif-matrix td:nth-child(2),
.flc-notif-matrix td:nth-child(3),
.flc-notif-matrix th:nth-child(2),
.flc-notif-matrix th:nth-child(3) { text-align: center; width: 120px; }

/* Floating admin-only bell — v3.13.0: the circle around the glyph is
   GONE (user request) and the button is smaller: a bare bell glyph with
   a soft drop-shadow. Badge stays on the top-left. The feed keeps the
   desktop dropdown, and goes FULLSCREEN on phones with the uniform
   popup standard (X on the right + header + footer). */
.flc-bell { position: fixed; top: 14px; inset-inline-end: 14px; z-index: 90000; }
/* v3.15.0 — the bell is docked INSIDE the header row (template renders it
   between the avatar chip and the burger) and is position:relative so the
   notifications panel ANCHORS TO THE BELL ITSELF (left corner under the
   bell in RTL) instead of the far page edge. The body-level fallback bell
   (pages without the FaraLabs template) stays fixed. */
.fl-header .flc-bell {
        position: relative;
        top: auto;
        transform: none;
        inset-inline-end: auto;
        z-index: 1;
}
.flc-bell__btn {
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: rgba(234, 241, 255, .92);
        background: transparent;
        box-shadow: none;
        transition: color .2s ease, transform .2s ease;
}
.flc-bell__btn:hover { color: #fff; transform: translateY(-1px); }
.flc-bell__btn svg {
        display: block; /* block level = no baseline drift → dead-centered */
        width: 19px;
        height: 19px;
        margin: 0;
        filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .65)); /* stays readable over bright art */
}
.flc-bell__btn.open { color: var(--fl-accent-soft); }
.flc-bell__badge {
        position: absolute;
        top: -6px;
        left: -7px; /* physical left = top-left corner in this RTL site */
        min-width: 16px;
        padding: 1px 5px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ff5a78, #e0344f);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
        box-shadow: 0 3px 10px rgba(224, 52, 79, .55);
}
.flc-bell__panel {
        position: absolute;
        top: calc(100% + 10px); /* v3.15.0 — always just below the bell glyph (was 42px) */
        inset-inline-end: 0; /* RTL → left:0 = the panel's LEFT corner under the bell */
        width: min(360px, calc(100vw - 40px));
        max-height: 70vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        border: 1px solid rgba(76, 141, 255, .35);
        /* v3.13.0 — fully opaque (the .98 alpha let the page bleed through). */
        background: linear-gradient(160deg, rgb(22, 33, 62), rgb(12, 18, 38));
        box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
/* display:flex above beats the UA [hidden] rule — this restores it.
   v3.38.0 — .flc-btn sets display:inline-flex, which beats the UA [hidden]
   rule the same way: the only hidden-toggled .flc-btn («اطلاع پیامک»)
   stayed VISIBLE on every thread. Restored here too. */
.flc-bell__panel[hidden] { display: none; }
.flc-btn[hidden] { display: none; }
/* Uniform popup standard: X sits at the RIGHT side (physical) of the
   header — same as every fullscreen sheet. Hidden in the desktop
   dropdown (click-outside closes it), shown in the mobile fullscreen. */
.flc-bell__head {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 13px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        background: rgba(16, 24, 46, .96);
        flex: 0 0 auto;
}
.flc-bell__head strong { font-size: 14px; }
/* v3.17.0 — bare X on the physical LEFT (inset-inline-end) */
.flc-bell__close {
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        inset-inline-end: 6px; /* physical LEFT in RTL */
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(234, 241, 255, .78);
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: .18s ease;
}

.flc-bell__close:hover {
        color: #fff;
        text-shadow: 0 0 14px rgba(124, 178, 255, .85), 0 0 30px rgba(76, 141, 255, .45);
}
.flc-bell__list {
        overflow-y: auto;
        overscroll-behavior: contain;
        flex: 1 1 auto;
}
.flc-bell__foot {
        flex: 0 0 auto;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, .07);
        background: rgba(12, 18, 38, 1);
}
.flc-bell__foot .flc-btn { width: 100%; height: 40px; }
.flc-bell__item {
        display: block;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        cursor: pointer;
        position: relative;
        color: inherit;
        text-decoration: none;
}
a.flc-bell__item:hover { background: rgba(76, 141, 255, .1); }
.flc-bell__item:hover { background: rgba(76, 141, 255, .06); }
.flc-bell__item strong { display: block; font-size: 13px; margin-bottom: 3px; }
.flc-bell__item p { margin: 0 0 4px; font-size: 12px; color: rgba(234, 241, 255, .68); line-height: 1.7; }
.flc-bell__item time { font-size: 11px; color: rgba(234, 241, 255, .45); }
.flc-bell__item.is-unread { background: rgba(76, 141, 255, .07); }
.flc-bell__item.is-unread::after {
        content: '';
        position: absolute;
        top: 16px;
        inset-inline-end: 12px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff5a78;
        box-shadow: 0 0 8px rgba(255, 90, 120, .8);
}
.flc-bell__item.is-unread strong { padding-inline-end: 14px; }
/* v3.12.0: linked items get a subtle «open» affordance */
.flc-bell__item--link strong {
        background-image: linear-gradient(rgba(156, 195, 255, .55), rgba(156, 195, 255, .55));
        background-repeat: no-repeat;
        background-size: 11px 11px;
        background-position: left center;
        padding-left: 16px;
}
@media (max-width: 480px) {
        body > .flc-bell { inset-inline-end: 10px; } /* v3.14.0 — body-level fallback bell only */
}
/* v3.12.1 — keep the body-level bell clear of the WP admin bar. The
   in-header bell doesn't need this (the header already sits below it). */
body.admin-bar > .flc-bell { top: 46px; }
@media (max-width: 782px) {
        body.admin-bar > .flc-bell { top: 106px; }
}
/* v3.13.0 — notifications menu is FULLSCREEN on phones (user request),
   with the shared popup shape: header (X right + title), scroll list,
   footer action. */
@media (max-width: 760px) {
        /* v3.14.0 — in-header bell row child sizing: لوگو [(آواتار)] [زنگوله] [برگر] */
        .fl-header .flc-bell__btn { width: 38px; height: 38px; }
        .fl-header .flc-bell__btn svg { width: 20px; height: 20px; }
        /* body-level fallback bell keeps its old floating spot */
        .flc-bell { top: 60px; z-index: 120000; }
        .flc-bell__panel {
                position: fixed;
                top: 0;
                inset-inline-end: 0;
                width: 100vw;
                height: 100dvh;
                max-height: none;
                border-radius: 0;
                border: 0;
                z-index: 110000;
        }
        body.admin-bar .flc-bell__panel { top: 0; }
        .flc-bell__close { display: flex; }
        .flc-bell__item { padding: 14px 18px; }
        /* v3.14.0 — while the fullscreen feed is open the header (which
           hosts the bell) must outrank the WP admin bar (99999). */
        body.flc-bell-open .fl-header { z-index: 130000 !important; }
}

/* ================================================================== */
/* v3.13.0 — uniform FULLSCREEN sheet (the shared popup standard)       */
/* Header: X on the physical RIGHT + centered title · scroll body ·     */
/* footer strip. Used by the mobile panel/admin menu; the bell feed     */
/* and the auth overlay follow the same shape with their own classes.   */
/* ================================================================== */

.flc-sheet {
        position: fixed;
        inset: 0;
        z-index: 115000;
        display: flex;
        flex-direction: column;
        background: linear-gradient(165deg, #111a30 0%, #0a0f20 58%, #070b15 100%);
        animation: flcUp .28s ease both;
}

.flc-sheet__head {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 56px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        background: rgba(9, 13, 27, 1);
        flex: 0 0 auto;
}

.flc-sheet__head strong { font-size: 15.5px; }

/* v3.17.0 — bare X on the physical LEFT (inset-inline-end) */
.flc-sheet__x {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        inset-inline-end: 8px; /* physical LEFT in RTL — unified with every popup */
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(234, 241, 255, .78);
        font-size: 30px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: .18s ease;
}

.flc-sheet__x:hover {
        color: #fff;
        text-shadow: 0 0 14px rgba(124, 178, 255, .85), 0 0 30px rgba(76, 141, 255, .45);
}

.flc-sheet__x:active { transform: translateY(-50%) scale(.92); }

.flc-sheet__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 18px 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;
}

/* The identity card rides along at the top of the menu sheet. */
.flc-sheet__body .flc-panel__me { margin-bottom: 12px; }

.flc-sheet__body > button,
.flc-sheet__body > a {
        flex: 0 0 auto;
}

.flc-sheet__foot {
        flex: 0 0 auto;
        padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, .07);
        background: rgba(9, 13, 27, .94);
        text-align: center;
        font-size: 11.5px;
        letter-spacing: .04em;
        color: rgba(234, 241, 255, .42);
}

/* Scroll lock while any fullscreen surface is open. */
html.flc-sheet-open, html.flc-sheet-open body { overflow: hidden; }

/* ---- «منوی پنل کاربری / منوی پنل مدیریت» trigger (mobile only) ---- */

.flc-panel__menubtn {
        display: none;
        align-items: center;
        gap: 11px;
        width: 100%;
        padding: 12px 16px;
        border-radius: 14px;
        border: 1px solid rgba(120, 170, 255, .35);
        background: linear-gradient(135deg, rgba(76, 141, 255, .16), rgba(139, 124, 246, .12));
        color: #eaf1ff;
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        text-align: start;
        cursor: pointer;
        transition: .18s ease;
}

.flc-panel__menubtn svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        display: block;
}

.flc-panel__menubtn:hover { border-color: rgba(120, 170, 255, .65); }

@media (max-width: 900px) {
        /* The linear tab bar is replaced by the menu button + fullscreen sheet. */
        .flc-panel__tabs { display: none; }
        .flc-panel__menubtn { display: flex; }
}

/* ================================================================== */
/* v3.13.0 — department manager (admin tickets tab)                     */
/* ================================================================== */

.flc-depts { margin-top: 22px; }
.flc-depts h4 { margin: 0 0 6px; }

.flc-dept-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 12px;
}

.flc-dept {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 9px 8px 12px;
        border-radius: 11px;
        border: 1px solid rgba(120, 170, 255, .3);
        background: rgba(76, 141, 255, .1);
        font-size: 13px;
}

.flc-dept strong { font-weight: 600; }

.flc-dept__del {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        border: 1px solid rgba(255, 255, 255, .14);
        background: rgba(255, 255, 255, .05);
        color: #eaf1ff; /* v3.14.0 — faint white stroke + white glyph (was red-tinted) */
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: .15s ease;
}

.flc-dept__del:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
.flc-dept__del:disabled { opacity: .45; cursor: wait; }

/* v3.33.0 — desktop/tablet shows the long bell caption; the short one
   only appears inside the ≤760px block below (later rule wins there). */
.flc-nm-short { display: none; }

/* ================================================================== */
/* v3.14.0 → v3.33.0 — mobile tables become labelled CARDS              */
/* On phones every panel/admin table becomes a card list: the header    */
/* row hides, each row (<tr>) becomes a glass card, tds drop under      */
/* each other with their column label (data-l, filled by fl-aria.js).   */
/* v3.33.0 redesign (user report: «در حالت موبایل تم خوبی نداره»):      */
/*   - rows are real cards (bg, border, radius) instead of bare lines   */
/*   - meta cells flow inline as «label: value» pairs → shorter cards   */
/*   - LTR values (phone/email/IP) keep the RTL label position          */
/*   - action buttons become a full-width segmented row                 */
/*   - the notification matrix STAYS a real table (no more stacked      */
/*     floating checkboxes — «قاطی پاتی») with compact columns          */
/* Text wraps at spaces only — never broken mid-word.                   */
/* ================================================================== */
@media (max-width: 760px) {
        .flc-tablewrap { overflow: visible; }

        /* ---- generic stack (fallback for any table) ---- */
        .flc-table {
                display: block;
                width: 100%;
                border: 0;
        }

        .flc-table thead { display: none; }

        .flc-table tbody,
        .flc-table tr {
                display: block;
                width: 100%;
        }

        /* v3.33.0 — the row IS the card */
        .flc-table tr {
                padding: 13px 14px 14px;
                margin: 0 0 10px;
                border: 1px solid rgba(255, 255, 255, .08);
                border-radius: 16px;
                background: linear-gradient(165deg, rgba(19, 26, 50, .72), rgba(11, 16, 32, .9));
                overflow: hidden;
        }

        .flc-table td {
                display: block;
                width: 100%;
                padding: 6px 2px;
                border: 0;
                text-align: start;
                word-break: normal;        /* هیچ شکستن وسط کلمه */
                overflow-wrap: break-word; /* مگر یک توکن طولانی‌تر از خط */
                white-space: normal;
        }

        /* column label sits on its own line ABOVE the value.
           :where() keeps the specificity at zero so the per-table
           «inline pair» overrides below always win. */
        :where(.flc-table td[data-l]:not([data-l=""]))::before {
                content: attr(data-l);
                display: block;
                margin: 0 0 3px;
                font-size: 11.5px;
                font-weight: 600;
                color: rgba(234, 241, 255, .5);
        }

        /* v3.33.0 — LTR values (شماره/ایمیل/IP) keep the RTL label at the
           right edge; the latin/digit runs themselves stay LTR via bidi */
        .flc-table td[dir="ltr"] { direction: rtl; }

        /* inline «label: value» meta pairs (v3.33.0) — selectors listed in
           META_CELLS below; :where() above keeps the block label from
           winning, so these always render as one compact line */
        :is(.flc-tk-table td:nth-child(3), .flc-tk-table td:nth-child(4),
                .flc-tk-table td:nth-child(5), .flc-tk-table td:nth-child(6),
                #flc-users td:nth-child(6),
                #flc-leads td:nth-child(5), #flc-leads td:nth-child(7), #flc-leads td:nth-child(8),
                #flc-otp-log td:nth-child(2), #flc-otp-log td:nth-child(5), #flc-otp-log td:nth-child(6),
                #flc-orders td:nth-child(3), #flc-orders td:nth-child(4)) {
                display: inline-block;
                width: auto;
                max-width: 100%;
                margin: 6px 0 0;
                padding-inline-end: 12px;
        }
        :is(.flc-tk-table td:nth-child(3), .flc-tk-table td:nth-child(4),
                .flc-tk-table td:nth-child(5), .flc-tk-table td:nth-child(6),
                #flc-users td:nth-child(6),
                #flc-leads td:nth-child(5), #flc-leads td:nth-child(7), #flc-leads td:nth-child(8),
                #flc-otp-log td:nth-child(2), #flc-otp-log td:nth-child(5), #flc-otp-log td:nth-child(6),
                #flc-orders td:nth-child(3), #flc-orders td:nth-child(4))::before {
                content: attr(data-l) ": ";
                display: inline;
                margin: 0;
                font-weight: 500;
                font-size: 12px;
                color: rgba(234, 241, 255, .5);
        }

        /* the row checkbox rides the card's first line (users/leads) */
        .flc-table td.flc-check {
                display: inline-flex;
                width: 32px;
                padding: 0;
                vertical-align: middle;
        }

        /* action buttons = segmented full-width row */
        .flc-table td.flc-row-actions {
                display: flex;
                gap: 8px;
                margin-top: 10px;
                padding: 10px 0 0;
                border-top: 1px dashed rgba(255, 255, 255, .08);
        }
        .flc-row-actions .flc-mini {
                flex: 1;
                margin-inline-start: 0;
                padding: 9px 6px;
                text-align: center;
                white-space: nowrap;
                font-size: 12px;
        }

        .flc-table td > *,
        .flc-table select,
        .flc-table .flc-btn { max-width: 100%; }

        /* ---- tickets list (user + admin) — subject title, meta pairs ---- */
        .flc-tk-table td:nth-child(1) { display: inline-block; width: auto; color: rgba(234, 241, 255, .6); font-size: 12px; }
        .flc-tk-table td:nth-child(1)::before { display: none; }
        .flc-tk-table td:nth-child(2) { padding-top: 2px; }
        .flc-tk-table td:nth-child(2) strong { font-size: 14.5px; line-height: 1.8; }
        .flc-tk-table td:nth-child(3), .flc-tk-table td:nth-child(4),
        .flc-tk-table td:nth-child(5), .flc-tk-table td:nth-child(6) { font-size: 12px; color: rgba(234, 241, 255, .72); }

        /* ---- users list — avatar+name beside the checkbox ---- */
        #flc-users td:nth-child(2) {
                display: inline-flex;
                width: calc(100% - 40px);
                vertical-align: middle;
        }
        #flc-users td:nth-child(6) { font-size: 12px; color: rgba(234, 241, 255, .72); }
        #flc-users td:nth-child(3), #flc-users td:nth-child(4) { padding: 7px 2px; }

        /* ---- leads (مشاوره‌ها) — name beside checkbox, message as body ---- */
        #flc-leads td:nth-child(2) {
                display: inline-flex;
                width: calc(100% - 40px);
                vertical-align: middle;
        }
        #flc-leads td.flc-lead-msg { color: rgba(234, 241, 255, .78); line-height: 1.9; }
        #flc-leads td.flc-lead-msg::before { display: none; }
        #flc-leads td:nth-child(7), #flc-leads td:nth-child(8) { font-size: 12px; color: rgba(234, 241, 255, .72); }

        /* ---- OTP log — status chip + channel on line 1, message body ---- */
        #flc-otp-log td:nth-child(1) { display: inline-block; width: auto; }
        #flc-otp-log td:nth-child(1)::before { display: none; }
        #flc-otp-log td:nth-child(2) { font-size: 12px; color: rgba(234, 241, 255, .72); }
        #flc-otp-log td:nth-child(4) { color: rgba(234, 241, 255, .82); line-height: 1.9; overflow-wrap: anywhere; }
        #flc-otp-log td:nth-child(4)::before { display: none; }
        #flc-otp-log td:nth-child(5), #flc-otp-log td:nth-child(6) { font-size: 12px; color: rgba(234, 241, 255, .72); }

        /* ---- orders — amount/date pairs, status select full width ---- */
        #flc-orders td:nth-child(1) { display: inline-block; width: auto; color: rgba(234, 241, 255, .6); }
        #flc-orders td:nth-child(1)::before { display: none; }
        #flc-orders td select { width: 100%; }

        /* ---- notification matrix — STAYS a real table on phones ---- */
        /* (v3.32.0 stacking turned it into two bare checkboxes per row —
           the «قاطی پاتی» report; side-by-side columns fix it.) */
        .flc-notif-matrix {
                display: table;
                width: 100%;
                font-size: 12.5px;
                border: 1px solid rgba(255, 255, 255, .08);
                border-radius: 14px;
                overflow: hidden;
                background: rgba(13, 19, 38, .6);
        }
        .flc-notif-matrix thead { display: table-header-group; }
        .flc-notif-matrix tbody { display: table-row-group; }
        .flc-notif-matrix tr {
                display: table-row;
                width: auto;
                margin: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
        }
        .flc-notif-matrix { border-collapse: separate; border-spacing: 0; }
        .flc-notif-matrix th {
                padding: 9px 6px;
                font-size: 11px;
                text-align: center;
                white-space: nowrap;
                color: rgba(234, 241, 255, .6);
        }
        .flc-notif-matrix th:first-child { text-align: start; padding-inline-start: 12px; }
        .flc-notif-matrix td {
                display: table-cell;
                width: auto;
                padding: 11px 6px;
                text-align: center;
                border-bottom: 1px solid rgba(255, 255, 255, .05);
        }
        .flc-notif-matrix tbody tr:last-child td { border-bottom: 0; }
        .flc-notif-matrix td:first-child { text-align: start; padding-inline-start: 12px; }
        .flc-notif-matrix td.flc-check { width: 25%; display: table-cell; padding: 0; }
        .flc-notif-matrix input[type="checkbox"] { width: 18px; height: 18px; }

        /* short column captions on phones (🔔 زنگوله / ربات بله) */
        .flc-nm-long { display: none; }
        .flc-nm-short { display: inline; }
}

/* ================================================================== */
/* v3.33.0 — ticket thread + reply card on phones                       */
/* ================================================================== */
@media (max-width: 760px) {
        .flc-tmsg { max-width: 92%; }
        .flc-tk-head { flex-direction: column; gap: 10px; padding: 15px 16px; }
        .flc-tk-toolbar .flc-tools { width: 100%; }
        .flc-tk-card { padding: 16px; }
        .flc-tmsg { padding: 12px 14px; }
        .flc-tmsg p { line-height: 1.95; }
        .flc-tk-msgs { max-height: 430px; }
        .flc-tk-adminctl { white-space: normal; flex-wrap: wrap; }
        .flc-tk-adminctl label { width: 100%; }
        .flc-tk-adminctl select { flex: 1; min-width: 150px; }
}

/* ================================================================== */
/* v3.34.0 — guest request-tracking page ([flc_guest_track])            */
/* v3.35.0 — hero banner slot + fixed-header clearance + inline fix     */
/* ================================================================== */

.flc-track {
        /* v3.35.0 — the site header is position:fixed (~75px): the old
           34px padding slid the title UNDER it. Clear it properly. */
        padding: 122px 0 64px;
        min-height: 60vh;
}

/* v3.35.0 — hero banner slot: a real banner (orbs + badge), not a bare heading */
/* v3.37.0 — the track hero now speaks the SAME theme language as the
   site hero (پشتیبانی page): full-bleed section, drifting accent/violet
   orbs, an aurora sweep line and the luminous ink-gradient title. All
   colors ride the site CSS variables (with fallbacks) so it follows the
   active palette automatically. */
.flc-trk-hero {
        position: relative;
        overflow: hidden;
        padding: 38px 0 42px;
        margin-bottom: 34px;
        text-align: center;
        background:
                radial-gradient(110% 170% at 88% -30%, rgba(var(--fl-accent-rgb, 76, 141, 255), .16), transparent 58%),
                radial-gradient(85% 130% at 6% 120%, rgba(var(--fl-violet-rgb, 139, 124, 246), .14), transparent 55%),
                linear-gradient(180deg, rgba(var(--fl-accent-rgb, 76, 141, 255), .05), transparent 55%);
}

/* bottom fade into the page background — same trick as .fl-hero__bg::after */
.flc-trk-hero::after {
        content: '';
        position: absolute;
        inset: auto 0 0 0;
        height: 64px;
        background: linear-gradient(180deg, transparent, var(--fl-bg, #070b15));
        pointer-events: none;
}

.flc-trk-hero__bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
}

.flc-trk-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(6px);
}

.flc-trk-orb--1 {
        width: 340px;
        height: 340px;
        top: -170px;
        inset-inline-start: 8%;
        background: radial-gradient(circle, rgba(var(--fl-accent-rgb, 76, 141, 255), .26), transparent 68%);
        animation: flc-drift-1 26s ease-in-out infinite alternate;
}

.flc-trk-orb--2 {
        width: 280px;
        height: 280px;
        bottom: -150px;
        inset-inline-end: 6%;
        background: radial-gradient(circle, rgba(var(--fl-violet-rgb, 139, 124, 246), .22), transparent 68%);
        animation: flc-drift-2 32s ease-in-out infinite alternate;
}

/* the living aurora line — mirrors the header sweep on the site pages */
.flc-trk-aurora {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2px;
        z-index: 1;
        background: linear-gradient(90deg,
                transparent,
                rgba(var(--fl-accent-soft-rgb, 127, 178, 255), 0.85) 24%,
                rgba(var(--fl-accent2-rgb, 34, 211, 238), 0.65) 50%,
                rgba(var(--fl-violet-rgb, 139, 124, 246), 0.75) 76%,
                transparent);
        background-size: 240% 100%;
        animation: flc-aurora 15s ease-in-out infinite alternate;
        opacity: .55;
}

@keyframes flc-drift-1 {
        from { transform: translate(0, 0) scale(1); }
        to   { transform: translate(-46px, 26px) scale(1.08); }
}

@keyframes flc-drift-2 {
        from { transform: translate(0, 0) scale(1); }
        to   { transform: translate(40px, -30px) scale(1.1); }
}

@keyframes flc-aurora {
        from { background-position: 100% 0; opacity: .35; }
        to   { background-position: 0% 0; opacity: .8; }
}

.flc-trk-hero__inner {
        position: relative;
        z-index: 2;
}

.flc-trk-title {
        margin: 0 0 12px;
        font-size: clamp(30px, 4.4vw, 46px);
        font-weight: 800;
        line-height: 1.65;
        background: linear-gradient(105deg,
                var(--fl-text, #e8edf8) 30%,
                rgba(var(--fl-accent-soft-rgb, 127, 178, 255), 0.95) 46%,
                rgba(var(--fl-accent2-rgb, 34, 211, 238), 0.85) 54%,
                var(--fl-text, #e8edf8) 70%);
        background-size: 240% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: flc-ink 11s ease-in-out infinite alternate;
}

@keyframes flc-ink {
        from { background-position: 0% 0; }
        to   { background-position: 100% 0; }
}

.flc-trk-lead {
        max-width: 640px;
        margin: 0 auto;
        color: var(--fl-muted, rgba(232, 237, 248, .72));
        font-size: 15.5px;
        line-height: 2.15;
}

.flc-trk-card {
        max-width: 560px;
        margin: 0 auto 16px;
        padding: 22px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, .09);
        background: linear-gradient(160deg, rgba(20, 30, 56, .6), rgba(12, 18, 38, .7));
        box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
}

.flc-trk-card .flc-hint {
        margin: 10px 0 0;
        color: #8d9cbd;
        font-size: 12.5px;
        line-height: 1.9;
}

.flc-trk-label {
        display: block;
        margin: 0 0 8px;
        color: #c6d2ea;
        font-size: 13px;
        font-weight: 600;
}

.flc-trk-inline {
        display: flex;
        gap: 10px;
        align-items: stretch;
}

.flc-trk-inline input {
        flex: 1;
        min-width: 0;
        height: 47px;
        padding: 0 15px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .045);
        color: #eaf1ff;
        font: inherit;
        font-size: 14.5px;
        letter-spacing: .4px;
        transition: .15s ease;
}

/* v3.39.0 — the phone field now mirrors the MAIN login input exactly
   (same height, same fill, same focus ring) per the user's request. */
.flc-trk-inline input:focus {
        outline: none;
        border-color: rgba(76, 141, 255, .65);
        background: rgba(76, 141, 255, .08);
        box-shadow: 0 0 0 3px rgba(76, 141, 255, .14);
}

.flc-trk-inline .flc-btn {
        height: 44px;
        white-space: nowrap;
        /* v3.35.0 — .flc-btn is width:100% globally (panel forms); inside
           the side-by-side row that squeezed the input to 30px. */
        width: auto;
        flex: 0 0 auto;
}

.flc-trk-card textarea {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(8, 12, 26, .65);
        color: #eaf1ff;
        font: inherit;
        font-size: 14px;
        line-height: 1.9;
        padding: 12px 14px;
        resize: vertical;
}

.flc-trk-card textarea:focus {
        outline: none;
        border-color: rgba(76, 141, 255, .6);
}

.flc-trk-card .flc-btn--primary { margin-top: 12px; }

.flc-trk-top {
        max-width: 560px;
        margin: 0 auto 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start; /* v3.37.0 — only the خروج button remains */
        gap: 12px;
        color: #eaf1ff;
        font-size: 15px;
}

.flc-trk-link {
        background: none;
        border: 0;
        padding: 0;
        margin-inline-start: 8px;
        color: #6ea3ff;
        font: inherit;
        font-size: 12.5px;
        cursor: pointer;
}

.flc-trk-link:hover { text-decoration: underline; }

.flc-trk-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
}

.flc-trk-row strong { color: #eaf1ff; font-size: 14.5px; }

.flc-trk-reply textarea { margin-bottom: 2px; }

/* phones — inline rows stack, cards breathe */
@media (max-width: 760px) {
        .flc-track { padding: 98px 0 46px; }
        .flc-trk-hero { margin-bottom: 22px; padding: 26px 0 30px; }
        .flc-trk-title { font-size: 24px; }
        .flc-trk-lead { font-size: 13.5px; padding: 0 18px; }
        .flc-trk-card { padding: 16px; max-width: 100%; }
        .flc-trk-inline { flex-direction: column; }
        .flc-trk-inline .flc-btn { width: 100%; margin-top: 0; }
        /* v3.39.0 — in the column layout flex:1 collapses the input's height
           (flex-basis 0% beats height:47px); the field must keep the login
           height when stacked. */
        .flc-trk-inline input { flex: none; width: 100%; }
        .flc-trk-top { max-width: 100%; }
        .flc-trk-card .flc-btn--primary { width: 100%; }
}

/* v3.38.0 — the tracking page's code pane: split cells reuse .flc-otp;
   the verify button sits centered under the cells (full-width on phones
   via the existing .flc-trk-card .flc-btn--primary rule). */
.flc-trk-verify {
        width: auto;
        min-width: 220px;
        display: block;
        margin: 0 auto 8px;
}
.flc-trk-otp { margin-bottom: 14px; }

/* v3.39.0 — resend/voice controls of the code pane (same language as
   the login's .flc-auth__links): countdown text + the two actions that
   only appear after «فاصلهٔ ارسال مجدد» ends. */
.flc-trk-otpctl {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        margin: 4px 0 10px;
        min-height: 18px;
}
.flc-trk-otpctl .flc-trk-link {
        margin-inline-start: 0;
        font-size: 13px;
}

/* v3.36.0 — SMS template editor (ParsGreen card): themed textarea +
   live-preview bubble styled like a real SMS. The textarea used to fall
   outside .flc-field, so without this it rendered as a white browser box
   inside the dark panel. */
.flc-pg textarea {
        width: 100%;
        margin-top: 2px;
        padding: 11px 15px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .045);
        color: #eaf1ff;
        font: inherit;
        font-size: 14.5px;
        line-height: 1.9;
        resize: vertical;
        transition: .15s ease;
}

.flc-pg textarea:focus {
        outline: 0;
        border-color: rgba(76, 141, 255, .65);
        background: rgba(76, 141, 255, .08);
        box-shadow: 0 0 0 3px rgba(76, 141, 255, .14);
}

.flc-pg-preview {
        white-space: pre-line;
        background: rgba(76, 141, 255, .07);
        border: 1px dashed rgba(76, 141, 255, .35);
        border-radius: 10px;
        padding: 9px 12px;
        margin: 6px 0 10px;
        color: #cfe0ff;
        font-size: 13.5px;
        line-height: 1.9;
        overflow-wrap: anywhere;
}

.flc-pg-preview:empty { display: none; }

/* ================================================================== */
/* v3.47.0 — themed scrollbars: the bar that appears while messages    */
/* are exchanged (ticket threads — user panel, admin panel and the     */
/* guest tracking page all share .flc-tk-msgs) — plus the popup bodies */
/* that live on the same pages (auth modal, mobile sheets, bell feed)  */
/* — now wears the SITE template theme, exactly like the body          */
/* scrollbar in fl-site.css (same --fl-scroll tokens, rounded inset    */
/* pill, transparent track). Firefox: scrollbar-color/width.           */
/* .flc-panel__tabs keeps its deliberately hidden bar (older rule).    */
/* ================================================================== */
.flc-tk-msgs,
.flc-modal__body,
.flc-sheet__body,
.flc-bell__list {
        scrollbar-width: thin;
        scrollbar-color: var(--fl-scroll, #1c2a47) transparent;
}
.flc-tk-msgs::-webkit-scrollbar,
.flc-modal__body::-webkit-scrollbar,
.flc-sheet__body::-webkit-scrollbar,
.flc-bell__list::-webkit-scrollbar { width: 10px; height: 10px; }
.flc-tk-msgs::-webkit-scrollbar-track,
.flc-modal__body::-webkit-scrollbar-track,
.flc-sheet__body::-webkit-scrollbar-track,
.flc-bell__list::-webkit-scrollbar-track { background: transparent; }
.flc-tk-msgs::-webkit-scrollbar-thumb,
.flc-modal__body::-webkit-scrollbar-thumb,
.flc-sheet__body::-webkit-scrollbar-thumb,
.flc-bell__list::-webkit-scrollbar-thumb {
        background: var(--fl-scroll, #1c2a47);
        border-radius: 8px;
        border: 2px solid transparent; /* inset pill — same recipe as body */
        background-clip: padding-box;
}
.flc-tk-msgs::-webkit-scrollbar-thumb:hover,
.flc-modal__body::-webkit-scrollbar-thumb:hover,
.flc-sheet__body::-webkit-scrollbar-thumb:hover,
.flc-bell__list::-webkit-scrollbar-thumb:hover { background-color: var(--fl-scroll-h, #2a3d63); }

/* v3.54.0 — support-window expired banner (tickets page) */

.flc-support-expired-card {
        margin: 0 0 18px;
        padding: 26px 28px;
        border-radius: 18px;
        border: 1px solid rgba(220, 38, 38, .35);
        background: linear-gradient(160deg, rgba(220, 38, 38, .12), rgba(220, 38, 38, .04) 70%, transparent);
        text-align: center;
}

.flc-support-expired-card h4 {
        margin: 0 0 8px;
        font-size: 17px;
        color: #fca5a5;
}

.flc-support-expired-card p {
        color: rgba(234, 241, 255, .65);
        font-size: 13.5px;
        line-height: 2;
        margin: 0 0 16px;
}

/* ================================================================
   v3.68.0 — FaraSync Complete Guide (customer panel tab)
   ================================================================ */

/* Tab badge "جدید" in the panel sidebar */
.flc-panel__tabs .flc-tab-badge {
        display: inline-block;
        margin-right: 4px;
        padding: 1px 6px;
        border-radius: 8px;
        background: var(--flc-accent, #22d3ee);
        color: #04121a;
        font-size: 9px;
        font-weight: 700;
        vertical-align: middle;
}

/* Guide action button in admin users table */
.flc-mini.flc-mini--guide {
        color: var(--flc-text-muted, #8993b0);
        border-color: var(--flc-border, #1e2a4a);
}
.flc-mini.flc-mini--guide:hover {
        color: var(--flc-accent, #22d3ee);
        border-color: var(--flc-accent, #22d3ee);
}
.flc-mini.flc-mini--guide.is-on {
        background: rgba(34, 211, 238, .12);
        color: var(--flc-accent, #22d3ee);
        border-color: rgba(34, 211, 238, .35);
}

/* Guide container */
.flc-guide {
        --g-accent: #22d3ee;
        --g-accent-2: #8b7cf6;
        --g-glow: rgba(34, 211, 238, .18);
        --g-success: #34d399;
        --g-warn: #fbbf24;
        --g-danger: #f87171;
        --g-bg: #111a30;
        --g-bg-elev: #172241;
        --g-bg-hover: #1d2b50;
        --g-border: #1e2a4a;
        --g-border-soft: #16213c;
        --g-text: #e8edf7;
        --g-text-muted: #8993b0;
        --g-text-dim: #5a6483;
        color: var(--g-text);
        font-size: 14.5px;
        line-height: 1.75;
}

/* Header */
.flc-guide__head {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 16px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--g-border-soft);
}
.flc-guide__logo {
        width: 50px; height: 50px;
        border-radius: 13px;
        background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2));
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 20px; color: #04121a;
        flex: 0 0 50px;
        box-shadow: 0 6px 20px -6px var(--g-glow);
}
.flc-guide__head h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.flc-guide__head p { color: var(--g-text-muted); font-size: 12.5px; margin: 0; }
.flc-guide__badge {
        margin-right: auto;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 10px; border-radius: 18px;
        background: rgba(52, 211, 153, .08);
        border: 1px solid rgba(52, 211, 153, .25);
        color: var(--g-success);
        font-size: 11px; font-weight: 600; flex: 0 0 auto;
}
.flc-guide__badge::before {
        content: ''; width: 7px; height: 7px; border-radius: 50%;
        background: var(--g-success); box-shadow: 0 0 6px var(--g-success);
}

/* Search */
.flc-guide__search { position: relative; margin-bottom: 20px; }
.flc-guide__search-box {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px;
        background: var(--g-bg);
        border: 1px solid var(--g-border);
        border-radius: 12px;
        transition: all .2s;
}
.flc-guide__search-box:focus-within {
        border-color: var(--g-accent);
        box-shadow: 0 0 0 4px var(--g-glow);
}
.flc-guide__search-box svg { width: 18px; height: 18px; color: var(--g-text-muted); flex: 0 0 18px; }
.flc-guide__search-box input {
        flex: 1; min-width: 0;
        background: transparent; border: none; outline: none;
        color: var(--g-text);
        font-family: inherit; font-size: 14.5px;
}
.flc-guide__search-box input::placeholder { color: var(--g-text-dim); }
.flc-guide__kbd {
        font-size: 10.5px; color: var(--g-text-muted);
        padding: 2px 7px; border-radius: 5px;
        background: var(--g-bg-elev); border: 1px solid var(--g-border-soft);
}

.flc-guide__results {
        position: absolute; top: calc(100% + 6px); left: 0; right: 0;
        background: var(--g-bg);
        border: 1px solid var(--g-border);
        border-radius: 12px;
        box-shadow: 0 18px 50px -25px rgba(0, 0, 0, .7);
        max-height: 480px; overflow-y: auto;
        z-index: 50;
}
.flc-guide__results-meta {
        padding: 8px 14px; font-size: 11px; color: var(--g-text-dim);
        background: var(--g-bg-elev); border-bottom: 1px solid var(--g-border-soft);
        font-weight: 600;
}
.flc-guide__results-meta b { color: var(--g-accent); }
.flc-guide__results-empty { padding: 14px 16px; color: var(--g-text-muted); font-size: 13px; }
.flc-guide__results-empty b { color: var(--g-text); }
.flc-guide__results-empty small { color: var(--g-text-dim); display: block; margin-top: 4px; }
.flc-guide__results-group { padding: 6px 0; }
.flc-guide__results-group + .flc-guide__results-group { border-top: 1px solid var(--g-border-soft); }
.flc-guide__results-title {
        padding: 6px 14px; font-size: 10px; color: var(--g-text-dim);
        font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
        display: flex; justify-content: space-between;
}
.flc-guide__results-title span {
        background: var(--g-bg-elev); padding: 1px 6px; border-radius: 8px;
        color: var(--g-text-muted);
}
.flc-guide__result {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 14px; cursor: pointer;
        border-right: 3px solid transparent; transition: all .15s;
}
.flc-guide__result:hover {
        background: var(--g-bg-hover);
        border-right-color: var(--g-accent);
}
.flc-guide__result-num {
        width: 26px; height: 26px; border-radius: 7px;
        background: var(--g-bg-elev); color: var(--g-accent);
        font-weight: 700; font-size: 11px; flex: 0 0 26px;
        display: flex; align-items: center; justify-content: center;
}
.flc-guide__result-txt { flex: 1; min-width: 0; }
.flc-guide__result-title { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.flc-guide__result-snip {
        font-size: 11px; color: var(--g-text-muted);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; line-height: 1.5;
}
.flc-guide__result mark,
.flc-guide__sec-body mark,
.flc-callout__body mark {
        background: rgba(34, 211, 238, .22); color: var(--g-accent);
        padding: 0 2px; border-radius: 3px;
}

/* Chapter */
.flc-guide__chapter { display: none; animation: flcFadeUp .3s ease; }
.flc-guide__chapter.is-active { display: block; }
@keyframes flcFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.flc-guide__ch-head {
        margin-bottom: 20px; padding-bottom: 14px;
        border-bottom: 1px solid var(--g-border-soft);
}
.flc-guide__breadcrumb {
        display: flex; align-items: center; gap: 6px;
        font-size: 11px; color: var(--g-text-dim); margin-bottom: 8px;
}
.flc-guide__breadcrumb .sep { color: var(--g-text-dim); }
.flc-guide__breadcrumb span { color: var(--g-text-muted); }
.flc-guide__ch-num {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border-radius: 9px;
        background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2));
        color: #04121a; font-weight: 800; font-size: 13px; margin-bottom: 8px;
}
.flc-guide__ch-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.flc-guide__ch-summary { color: var(--g-text-muted); font-size: 13.5px; margin: 0; }
.flc-guide__ch-tags {
        display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}

/* Section card */
.flc-guide__section {
        background: var(--g-bg);
        border: 1px solid var(--g-border-soft);
        border-radius: 12px; padding: 18px 20px; margin-bottom: 14px;
}
.flc-guide__sec-title {
        display: flex; align-items: center; gap: 8px;
        font-size: 15px; font-weight: 700; margin-bottom: 12px;
}
.flc-guide__sec-title::before {
        content: ''; width: 3px; height: 16px; border-radius: 2px;
        background: linear-gradient(180deg, var(--g-accent), var(--g-accent-2));
}
.flc-guide__sec-body { margin-bottom: 10px; }
.flc-guide__sec-body p { margin: 0 0 10px; }
.flc-guide__sec-body p:last-child { margin-bottom: 0; }
.flc-guide__sec-body strong { color: #fff; }
.flc-guide__sec-body code {
        background: var(--g-bg-elev); padding: 1px 6px; border-radius: 4px;
        direction: ltr; display: inline-block; font-size: 12px; color: var(--g-accent);
}
.flc-guide__section ul,
.flc-guide__section ol { margin: 0 0 10px; padding-right: 22px; }
.flc-guide__section li { margin-bottom: 5px; }
.flc-guide__section li:last-child { margin-bottom: 0; }

/* Table */
.flc-guide__table {
        width: 100%; border-collapse: separate; border-spacing: 0;
        margin: 12px 0; font-size: 12.5px;
        border: 1px solid var(--g-border-soft); border-radius: 9px; overflow: hidden;
}
.flc-guide__table th,
.flc-guide__table td {
        padding: 9px 12px; text-align: right;
        border-bottom: 1px solid var(--g-border-soft);
}
.flc-guide__table th {
        background: var(--g-bg-elev); font-weight: 700; font-size: 11px;
        color: var(--g-text-muted); text-transform: uppercase; letter-spacing: .4px;
}
.flc-guide__table tr:last-child td { border-bottom: none; }
.flc-guide__table tr:hover td { background: var(--g-bg-hover); }

/* Figure */
.flc-guide__fig {
        margin: 14px 0; border: 1px solid var(--g-border-soft);
        border-radius: 11px; overflow: hidden; background: var(--g-bg-elev);
}
.flc-guide__fig-head {
        display: flex; align-items: center; gap: 7px;
        padding: 7px 11px; background: var(--g-bg-elev);
        border-bottom: 1px solid var(--g-border-soft);
        font-size: 11px; color: var(--g-text-muted);
}
.flc-guide__fig-head::before {
        content: ''; width: 7px; height: 7px; border-radius: 50%;
        background: var(--g-accent);
}
.flc-guide__fig-cap { margin-right: auto; }
.flc-guide__fig-zoom {
        font-size: 10px; color: var(--g-accent); cursor: pointer;
        padding: 2px 6px; border-radius: 5px;
        background: var(--g-glow); border: 1px solid rgba(34, 211, 238, .3);
        font-family: inherit;
}
.flc-guide__fig-img {
        display: block; width: 100%; height: auto; cursor: zoom-in;
}
.flc-guide__fig.is-zoomed {
        position: fixed; inset: 0; z-index: 99999;
        background: rgba(0, 0, 0, .92); border: none; border-radius: 0;
        display: flex; align-items: center; justify-content: center; padding: 30px;
}
.flc-guide__fig.is-zoomed .flc-guide__fig-head { display: none; }
.flc-guide__fig.is-zoomed .flc-guide__fig-img {
        max-width: 95vw; max-height: 90vh; width: auto; height: auto;
        border-radius: 8px; cursor: zoom-out;
}

/* Callout */
.flc-callout {
        display: flex; gap: 10px;
        padding: 12px 14px; border-radius: 9px;
        margin: 12px 0; border: 1px solid;
}
.flc-callout__ico {
        width: 22px; height: 22px; flex: 0 0 22px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 5px; font-weight: 700; font-size: 13px;
}
.flc-callout--cross { background: rgba(34, 211, 238, .06); border-color: rgba(34, 211, 238, .25); }
.flc-callout--cross .flc-callout__ico { background: var(--g-accent); color: #04121a; }
.flc-callout--cross strong { color: var(--g-accent); }
.flc-callout--tip { background: rgba(52, 211, 153, .06); border-color: rgba(52, 211, 153, .25); }
.flc-callout--tip .flc-callout__ico { background: var(--g-success); color: #04121a; }
.flc-callout--tip strong { color: var(--g-success); }
.flc-callout--warn { background: rgba(251, 191, 36, .06); border-color: rgba(251, 191, 36, .25); }
.flc-callout--warn .flc-callout__ico { background: var(--g-warn); color: #04121a; }
.flc-callout--warn strong { color: var(--g-warn); }
.flc-callout__body strong { display: block; margin-bottom: 2px; }
.flc-callout__body p { margin: 0; }

/* Chips (tags) */
.flc-chip {
        display: inline-block;
        font-size: 10.5px; padding: 3px 9px; border-radius: 18px;
        background: var(--g-bg-elev); color: var(--g-text-muted);
        border: 1px solid var(--g-border-soft);
}
.flc-chip--on { background: rgba(34, 211, 238, .12); color: var(--g-accent); border-color: rgba(34, 211, 238, .35); }
.flc-chip--auto { background: rgba(139, 124, 246, .12); color: var(--g-accent-2); border-color: rgba(139, 124, 246, .35); }
.flc-chip--admin { background: rgba(251, 191, 36, .12); color: var(--g-warn); border-color: rgba(251, 191, 36, .35); }
.flc-chip--off { color: var(--g-text-dim); }

/* Navigation */
.flc-guide__nav {
        display: flex; justify-content: space-between; align-items: center;
        margin-top: 20px; padding-top: 14px;
        border-top: 1px solid var(--g-border-soft); gap: 10px;
}
.flc-guide__nav-btn {
        display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
        padding: 9px 14px; border-radius: 9px;
        background: var(--g-bg); border: 1px solid var(--g-border);
        color: var(--g-text); font-family: inherit; font-size: 12.5px;
        transition: all .15s; cursor: pointer; text-align: right;
}
.flc-guide__nav-btn:hover {
        background: var(--g-bg-hover); border-color: var(--g-accent);
}
.flc-guide__nav-btn small { color: var(--g-text-dim); font-size: 10px; }
.flc-guide__nav-btn--next { margin-right: auto; align-items: flex-end; text-align: left; }

/* Locked state */
.flc-guide--locked {
        display: flex; align-items: center; justify-content: center;
        padding: 60px 20px;
}
.flc-guide__locked-card {
        max-width: 460px; text-align: center;
        background: var(--g-bg); border: 1px solid var(--g-border-soft);
        border-radius: 16px; padding: 32px 24px;
}
.flc-guide__locked-ico { font-size: 36px; margin-bottom: 12px; }
.flc-guide__locked-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.flc-guide__locked-card p { color: var(--g-text-muted); font-size: 13.5px; margin-bottom: 16px; line-height: 1.8; }

/* Scrollbar inside guide */
.flc-guide__results::-webkit-scrollbar,
.flc-guide__chapters::-webkit-scrollbar { width: 7px; height: 7px; }
.flc-guide__results::-webkit-scrollbar-track,
.flc-guide__chapters::-webkit-scrollbar-track { background: transparent; }
.flc-guide__results::-webkit-scrollbar-thumb,
.flc-guide__chapters::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 4px; }

/* Mobile */
@media (max-width: 768px) {
        .flc-guide__sec-body code { font-size: 11px; }
        .flc-guide__ch-title { font-size: 18px; }
        .flc-guide__sec-title { font-size: 14px; }
        .flc-guide__section { padding: 14px 16px; }
        .flc-guide__head h2 { font-size: 17px; }
}

/* ================================================================
   v3.68.5 — FaraSync guide sub-chapter list (nested under the tab)
   ================================================================ */
.flc-panel__subnav {
        margin: 4px 0 8px 0;
        padding-right: 14px;  /* v3.69.0 — was 28px; too much indent for 15 items */
        border-right: 2px solid rgba(34, 211, 238, .18);
        display: flex;
        flex-direction: column;
        gap: 1px;
}
.flc-panel__subnav[hidden] { display: none; }

.flc-panel__subnav a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 7px;
        font-size: 12px;
        color: var(--flc-text-muted, #8993b0);
        text-decoration: none;
        transition: all .15s;
        border-right: 2px solid transparent;
        line-height: 1.4;
}
.flc-panel__subnav a:hover {
        background: rgba(255, 255, 255, .04);
        color: var(--flc-text, #e8edf7);
}
.flc-panel__subnav a.is-active {
        color: var(--flc-accent, #22d3ee);
        background: linear-gradient(90deg, rgba(34, 211, 238, .12), transparent);
        border-right-color: var(--flc-accent, #22d3ee);
        font-weight: 600;
}

.flc-panel__subnav-num {
        width: 18px;
        height: 18px;
        border-radius: 5px;
        background: var(--flc-bg-elev, #172241);
        color: var(--flc-text-muted, #8993b0);
        font-size: 9px;
        font-weight: 700;
        flex: 0 0 18px;
        display: flex;
        align-items: center;
        justify-content: center;
}
.flc-panel__subnav a.is-active .flc-panel__subnav-num {
        background: var(--flc-accent, #22d3ee);
        color: #04121a;
}
.flc-panel__subnav-txt {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

/* Hide subnav on mobile (the mobile menu sheet already groups everything flat) */
@media (max-width: 980px) {
        .flc-panel__subnav {
                padding-right: 10px;  /* v3.69.0 — was 16px */
        }
}