:root{
        
        --bg: #000000; --panel: #0B0C0C; --panel-2: #141515; --border: #2A2B2B;
        --text: #ffffff; --muted: #A6A7A2; --accent: #00ACAC; --accent-strong:#007F7F;
        --accent-gold: #DFDEDC;
        --grad1:#00A3A3; --grad2:#2CCBCB; --grad3:#007F7F; --grad4:#DFDEDC;
    }
    
    body {
        background:
            radial-gradient(60% 45% at 85% -8%, rgba(0,163,163,.08), transparent 60%),
            radial-gradient(55% 40% at -10% 15%, rgba(0,163,163,.04), transparent 60%),
            radial-gradient(40% 35% at 50% 105%, rgba(0,163,163,.03), transparent 60%),
            var(--bg) !important;
        background-attachment: fixed;
    }
    body, #sidebar, .input-field, .avatar-upload, .signedin-avatar,
    .app-toast, .modal-backdrop { color-scheme: dark; }
    #sidebar { background: rgba(0,0,0,.92) !important; backdrop-filter: blur(14px); border-inline-start: 1px solid var(--border); }
    .input-field, .avatar-upload, .signedin-avatar { background: #141515 !important; }
    .nav-item.active {
        background: linear-gradient(135deg, rgba(44,203,203,.22), rgba(0,127,127,.14)) !important;
        color: #ffffff !important;
        box-shadow: inset 0 0 0 1px rgba(44,203,203,.45) !important;
    }
    .modal-backdrop { background: rgba(3,8,6,.84) !important; backdrop-filter: blur(3px); }
    .app-toast { background: #141515 !important; border-color: rgba(44,203,203,.25) !important; }
    .profile-cover { background: linear-gradient(120deg,#0d1212,#000000 60%,#07100f) !important; }
    .profile-avatar-lg { background: #1a1a1a !important; }
    .text-slate-100 { color: #ffffff !important; }
    .text-slate-200 { color: #f5f5f5 !important; }
    .text-slate-300 { color: #e8e8e8 !important; }
    .text-slate-400 { color: #cfcfcf !important; }
    .text-slate-500 { color: #ababab !important; }
    .text-slate-600 { color: #8a8a8a !important; }
    .bg-\[\#2a2f36\], .bg-\[\#20252c\], .bg-\[\#262b32\] { background-color: #1a1a1a !important; }

    
    @keyframes revealInUp { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .reveal-in { animation: revealInUp .38s cubic-bezier(.22,.9,.32,1) both; }
    @keyframes softGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(44,203,203,.0); } 50% { box-shadow: 0 0 22px 2px rgba(44,203,203,.18); } }

    
    html.light-mode {
        --bg: #f4f5f7; --panel: #ffffff; --panel-2: #edeff2; --border: #dde1e7;
        --text: #14161a; --muted: #5a6170; --accent: #2f6fed; --accent-strong:#1a56d6;
    }
    html.light-mode body, html.light-mode #sidebar, html.light-mode .input-field,
    html.light-mode .avatar-upload, html.light-mode .signedin-avatar,
    html.light-mode .app-toast, html.light-mode .modal-backdrop { color-scheme: light; }
    html.light-mode #sidebar { background: #ffffff !important; }
    html.light-mode .input-field, html.light-mode .avatar-upload, html.light-mode .signedin-avatar,
    html.light-mode .sidebar-search-input, html.light-mode .admin-mini-input { background: #eef0f3 !important; }
    html.light-mode .nav-item.active { background: #e6ebf3 !important; color: #10131a !important; box-shadow: inset 0 0 0 1px #c7cfdc !important; }
    html.light-mode .modal-backdrop { background: rgba(20,24,32,.45) !important; }
    html.light-mode .app-toast { background: #ffffff !important; color: #14161a; box-shadow: 0 8px 24px -6px rgba(16,24,40,.18); }
    html.light-mode .profile-cover { background: linear-gradient(120deg,#e8ecf2,#ffffff 60%,#eef1f6) !important; }
    html.light-mode .profile-avatar-lg, html.light-mode .profile-avatar-xl { background: #edeff2 !important; }
    html.light-mode .profile-hero { background: radial-gradient(120% 140% at 15% 0%, #eef2f8 0%, #f8f9fb 55%, #ffffff 100%) !important; }
    html.light-mode .membership-card { background: linear-gradient(135deg,#eef1f6 0%,#f7f8fa 55%,#ffffff 100%) !important; border-color: rgba(15,23,42,.12) !important; }
    html.light-mode .membership-card-id { color: rgba(30,41,59,.6) !important; }
    html.light-mode .text-slate-100 { color: #14161a !important; }
    html.light-mode .text-slate-200 { color: #1e232e !important; }
    html.light-mode .text-slate-300 { color: #333a48 !important; }
    html.light-mode .text-slate-400 { color: #4a5263 !important; }
    html.light-mode .text-slate-500 { color: #6b7280 !important; }
    html.light-mode .text-slate-600 { color: #838a99 !important; }
    html.light-mode .bg-\[\#2a2f36\], html.light-mode .bg-\[\#20252c\], html.light-mode .bg-\[\#262b32\] { background-color: #edeff2 !important; }
    html.light-mode ::-webkit-scrollbar-thumb { background: #c7cfdc; }
    html.light-mode * { scrollbar-color: #c7cfdc transparent; }
    
    .blob-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    
    .blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .28; will-change: transform; }
    .blob-a { width: 340px; height: 340px; background: radial-gradient(circle at 30% 30%, var(--grad1), transparent 70%); top: -80px; right: -60px; animation: floatBlob 14s ease-in-out infinite; }
    .blob-b { width: 290px; height: 290px; background: radial-gradient(circle at 30% 30%, var(--grad3), transparent 70%); bottom: -60px; left: -40px; animation: floatBlob 17s ease-in-out infinite reverse; }
    .blob-c { width: 250px; height: 250px; background: radial-gradient(circle at 30% 30%, var(--grad2), transparent 70%); top: 40%; left: 50%; animation: floatBlob 20s ease-in-out infinite; }
    .blob-d { width: 210px; height: 210px; background: radial-gradient(circle at 30% 30%, var(--grad4), transparent 70%); bottom: 10%; right: 15%; animation: floatBlob 22s ease-in-out infinite reverse; }
    @keyframes floatBlob {
        0%,100% { transform: translate(0,0) scale(1); }
        25% { transform: translate(35px,-50px) scale(1.12); }
        50% { transform: translate(-20px,30px) scale(0.92); }
        75% { transform: translate(-40px,-20px) scale(1.06); }
    }
    @media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } }
    
    #app-root { isolation: isolate; }
    
    #video-mock-preview { transform: none !important; }
    .gradient-text { background: linear-gradient(90deg, var(--grad1), var(--grad2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
   * { scrollbar-width: thin; scrollbar-color: #3a4048 transparent; }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { overflow-x: hidden; max-width: 100%; }
    
    @media (max-width: 420px) {
        #google-signin-area, #google-signedin-area { flex-wrap: wrap; }
    }
    body { font-family: 'Cairo', sans-serif; background: var(--bg); color: var(--text); }
    img, video, canvas, svg { max-width: 100%; height: auto; }
    
    input, textarea, select, button { max-width: 100%; }
    table { width: 100%; }
    p, h1, h2, h3, h4, span, td, th, label, li, a { overflow-wrap: break-word; word-break: break-word; }
    #app-root { max-width: 100vw; }
    .modal-pop, .panel { max-width: 100%; }
    
    @media (min-width: 1600px) {
        #app-root > main, #app-root .flex-1 { max-width: 1400px; margin: 0 auto; }
    }
    
    @media (max-width: 480px) {
        .membership-card-id { font-size: .72rem; letter-spacing: .12em; }
        #admin-users-tbody td, #admin-log-tbody td { padding: .4rem .35rem; font-size: .68rem; }
        .chip, .quick-pill, .admin-mini-btn { font-size: .6rem; }
    }
    .font-tajawal { font-family: 'Tajawal', sans-serif; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-thumb { background: #3a4048; border-radius: 8px; }

    .panel { background: var(--panel); border: 1px solid var(--border); }
    .panel-2 { background: var(--panel-2); border: 1px solid var(--border); }
    .input-field { background: #14171b; border: 1px solid var(--border); color: var(--text); transition: all .15s ease; }
    .input-field:focus { border-color: #6b7280; outline: none; box-shadow: 0 0 0 3px rgba(107,114,128,0.15); }
    .btn-primary { background: linear-gradient(135deg,var(--grad1),#007F7F); color:#fff; box-shadow: 0 4px 18px -4px rgba(0,163,163,.55); transition: all .18s ease; }
    .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .apk-promo-card { background: linear-gradient(135deg,rgba(34,197,94,.14),rgba(14,165,233,.14)); border: 1px solid rgba(14,165,233,.3); color: var(--text); }
    .apk-promo-icon { background: linear-gradient(135deg,#34d399,#0ea5e9); color:#04140f; }
    .apk-promo-close { color: var(--muted); }
    .apk-promo-close:hover { color: var(--text); }
    .apk-promo-btn { background: linear-gradient(135deg,#34d399,#0ea5e9); color:#04140f; transition: all .18s ease; }
    .apk-promo-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
    .btn-ghost:hover { background: var(--panel-2); color: var(--text); }

    
    #sidebar {
        width: 264px; background: #14171b; border-left: 1px solid var(--border);
        transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1);
        transform: translateX(0);
    }
    #sidebar.collapsed { transform: translateX(100%); }
    @media (min-width: 1024px) {
        #sidebar.collapsed { transform: translateX(0); width: 76px; }
        #sidebar.collapsed .sidebar-label { display: none; }
        #sidebar.collapsed .sidebar-section-title { display: none; }
        #sidebar.collapsed .sidebar-search-wrap { display: none; }
    }
    .sidebar-overlay { transition: opacity .3s ease; }

    
    .sidebar-search-wrap { padding: 0 .25rem .9rem; }
    .sidebar-search-box { position: relative; display: flex; align-items: center; }
    .sidebar-search-icon { position: absolute; right: .7rem; font-size: 11px; color: var(--muted); pointer-events: none; }
    .sidebar-search-input {
        width: 100%; background: #0e1013; border: 1px solid var(--border); color: var(--text);
        border-radius: .7rem; padding: .5rem 2rem .5rem .5rem; font-size: .74rem; transition: all .15s ease;
    }
    .sidebar-search-input:focus { border-color: #6b7280; outline: none; box-shadow: 0 0 0 3px rgba(107,114,128,0.15); }
    .sidebar-search-clear {
        position: absolute; left: .45rem; background: transparent; border: none; color: var(--muted);
        font-size: 10px; cursor: pointer; padding: .25rem; border-radius: .4rem; transition: color .15s ease, background .15s ease;
    }
    .sidebar-search-clear:hover { color: var(--text); background: rgba(255,255,255,.06); }
    .sidebar-search-empty { font-size: 10.5px; color: var(--muted); text-align: center; padding: .4rem 0 0; }

    .nav-item { display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem; border-radius:.7rem; color: var(--muted); font-size:.8rem; font-weight:600; transition: all .15s ease; cursor:pointer; white-space:nowrap; }
    .nav-item:hover { background: var(--panel-2); color: var(--text); }
    .nav-item.active { background: #2a2f36; color: #eef0f2; box-shadow: inset 0 0 0 1px #3a4048; }
    .nav-item i { width: 18px; text-align:center; flex-shrink:0; }

    .view { display:none; animation: fadeIn .25s ease; }
    .view.active { display:block; }
    @keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} }

    .recording-pulse { animation: pulse-red 1.2s infinite; }
    @keyframes pulse-red { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);} 70%{box-shadow:0 0 0 9px rgba(239,68,68,0);} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0);} }
    .pulse-voice { animation: pulse-ring 1.5s cubic-bezier(.215,.61,.355,1) infinite; }
    .voice-gender-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); transition: all .15s ease; }
    .voice-gender-btn.active { background: rgba(138,180,248,.14); border-color: var(--accent); color: var(--accent-strong); }
    .stop-speaking-btn { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #f87171; }
    .stop-speaking-btn:hover { background: rgba(239,68,68,.2); }
    @keyframes pulse-ring { 0%{transform:scale(.95); box-shadow:0 0 0 0 rgba(156,163,175,.5);} 70%{transform:scale(1); box-shadow:0 0 0 8px rgba(156,163,175,0);} 100%{transform:scale(.95); box-shadow:0 0 0 0 rgba(156,163,175,0);} }

    .modal-backdrop { background: rgba(10,11,13,.75); backdrop-filter: blur(10px); }
    .modal-pop { animation: pop .22s ease; }
    @keyframes pop { from{opacity:0; transform: scale(.96) translateY(8px);} to {opacity:1; transform: scale(1) translateY(0);} }

    .chip { font-size:.65rem; padding:.2rem .55rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); transition: all .15s ease; cursor:pointer; }
    .chip:hover { transform: translateY(-1px); }
    .chip:active { transform: translateY(0) scale(.96); }
    .avatar-upload { width:88px; height:88px; border-radius:999px; border:2px dashed #3a4048; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; background:#14171b; flex-shrink:0; }

    
    button, .nav-item, .chip, .btn-primary, .btn-ghost { will-change: transform; }
    .btn-primary, .btn-accent { transition: filter .15s ease, transform .1s ease; }
    .btn-primary:active, .btn-accent:active { transform: scale(.985); }
    .nav-item:active { transform: scale(.98); }
    .panel, .panel-2 { transition: border-color .2s ease; }
    .lift-hover { transition: transform .18s ease, box-shadow .18s ease; }
    .lift-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); }
    .copied-flash { animation: copiedFlash .5s ease; }
    @keyframes copiedFlash { 0%{ background: rgba(148,163,184,.25); } 100%{ background: transparent; } }

    
    .btn-accent { color:#0b0d10; font-weight:800; }
    .btn-accent:hover { filter: brightness(1.08); }
    .acc-interview  { background: linear-gradient(135deg,#9FE3E3,#007F7F); color:#0b1220; }
    .acc-faq        { background: linear-gradient(135deg,#DFDEDC,#007F7F); color:#fff; }
    .acc-career     { background: linear-gradient(135deg,#6ee7b7,#059669); color:#052e21; }
    .acc-cv         { background: linear-gradient(135deg,#fcd34d,#d97706); color:#3a2400; }
    .acc-portfolio  { background: linear-gradient(135deg,#f9a8d4,#db2777); color:#3a0620; }
    .acc-writing    { background: linear-gradient(135deg,#67e8f9,#0891b2); color:#042e33; }
    .acc-summarizer { background: linear-gradient(135deg,#a5b4fc,#4f46e5); color:#fff; }
    .acc-transcribe { background: linear-gradient(135deg,#5eead4,#0d9488); color:#042e28; }
    .acc-pitch      { background: linear-gradient(135deg,#fbbf24,#f97316); color:#3a1c00; }
    .acc-profile    { background: linear-gradient(135deg,#9FE3E3,#6366f1); color:#fff; }
    .acc-donations  { background: linear-gradient(135deg,#fde68a,#f59e0b); color:#3a2400; }
    .acc-subs       { background: linear-gradient(135deg,#DFDEDC,#00A3A3); color:#fff; }
    .acc-support    { background: linear-gradient(135deg,#86efac,#16a34a); color:#052e16; }
    .acc-about      { background: linear-gradient(135deg,#fbbf24,#fb7185); color:#3a0a12; }
    .acc-match      { background: linear-gradient(135deg,#fdba74,#ea580c); color:#3a1600; }
    .acc-cover      { background: linear-gradient(135deg,#7dd3fc,#0284c7); color:#042031; }
    .acc-video      { background: linear-gradient(135deg,#f0abfc,#a21caf); color:#fff; }
    .acc-salary     { background: linear-gradient(135deg,#86efac,#16a34a); color:#052e16; }
    .acc-progress   { background: linear-gradient(135deg,#fda4af,#e11d48); color:#3a0410; }

    
    .profile-cover { height: 110px; border-radius: 1rem 1rem 0 0; background: linear-gradient(120deg,#334155,#0f172a 60%,#1e293b); position: relative; overflow:hidden; }
    .profile-cover::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 60%); }
    .profile-avatar-lg { width:96px; height:96px; border-radius:999px; border:4px solid var(--panel); background:#20252c; overflow:hidden; display:flex; align-items:center;justify-content:center; margin-top:14px; margin-inline-start:1.25rem; box-shadow:0 4px 18px rgba(0,0,0,.4); }

    
    .profile-hero { position:relative; background: radial-gradient(120% 140% at 15% 0%, #161c26 0%, #0b0d12 55%, #08090b 100%); border:1px solid var(--border); }
    .profile-hero::before { content:''; position:absolute; inset:0; background:
        radial-gradient(circle at 12% 15%, rgba(94,163,255,.18), transparent 42%),
        radial-gradient(circle at 92% 10%, rgba(94,234,212,.14), transparent 40%),
        radial-gradient(circle at 55% 100%, rgba(148,163,184,.10), transparent 48%);
        filter: blur(4px); pointer-events:none; }
    .profile-avatar-xl { position:relative; width:104px; height:104px; border-radius:26px; background:#14171b; border:3px solid rgba(148,163,184,.16); overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.6); flex-shrink:0; }
    .profile-avatar-xl:hover .avatar-edit-hint { opacity:1; }
    .avatar-edit-hint { position:absolute; inset:0; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; opacity:0; transition:opacity .18s ease; }
    .plan-pill { display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; font-weight:800; padding:.3rem .7rem; border-radius:999px; background:linear-gradient(135deg,rgba(138,180,248,.16),rgba(94,234,212,.12)); border:1px solid rgba(138,180,248,.3); color:var(--accent-strong); }
    .quick-pill { display:flex; align-items:center; gap:.45rem; white-space:nowrap; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); font-size:.72rem; font-weight:700; padding:.55rem .9rem; border-radius:999px; transition: all .18s ease; }
    .quick-pill:hover { color:var(--text); border-color:rgba(138,180,248,.4); background:rgba(138,180,248,.08); transform: translateY(-1px); }
    
    .stat-card-v2 { position:relative; background:var(--panel); border:1px solid var(--border); border-radius:1rem; padding:.9rem .75rem; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; }
    .stat-card-v2 .stat-icon { width:34px; height:34px; border-radius:.7rem; display:flex; align-items:center; justify-content:center; font-size:.8rem; margin-bottom:.5rem; flex-shrink:0; }
    .stat-card-v2 p { width:100%; }

    
    .membership-card {
        position:relative; border-radius:1.1rem; padding:1.15rem 1.25rem; overflow:hidden;
        min-height:168px; display:flex; flex-direction:column; justify-content:space-between;
        background: linear-gradient(135deg,#1a212c 0%,#121820 55%,#0a0e13 100%);
        border:1px solid rgba(148,163,184,.16);
        box-shadow:0 14px 32px -14px rgba(0,0,0,.6);
    }
    .membership-card::before {
        content:''; position:absolute; inset:0; pointer-events:none;
        background:
            radial-gradient(circle at 88% -10%, rgba(94,163,255,.14), transparent 55%),
            radial-gradient(circle at -10% 110%, rgba(94,234,212,.10), transparent 50%);
    }
    .membership-card::after {
        
        content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
        background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 10px);
    }
    .membership-card-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
    .membership-chip {
        width:34px; height:26px; border-radius:6px; flex-shrink:0;
        background:linear-gradient(135deg,#e6c78a,#b98f4d);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
        position:relative; overflow:hidden;
    }
    .membership-chip::before, .membership-chip::after {
        content:''; position:absolute; left:0; right:0; height:1px; background:rgba(80,55,10,.4);
    }
    .membership-chip::before { top:33%; }
    .membership-chip::after { top:66%; }
    .membership-card-id {
        position:relative; font-family:'Cairo',sans-serif; direction:ltr; text-align:right;
        font-size:.82rem; letter-spacing:.2em; font-weight:700; color:rgba(226,232,240,.55);
        margin:.6rem 0 .1rem;
    }
    .membership-card-bottom { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem; }
    .purchase-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; background:var(--panel-2); border:1px solid var(--border); border-radius:.85rem; padding:.6rem .8rem; font-size:.72rem; }
    .section-eyebrow { font-size:.68rem; font-weight:800; letter-spacing:.02em; color:var(--muted); display:flex; align-items:center; gap:.4rem; margin-bottom:.6rem; }
    .points-badge { background: linear-gradient(135deg,#fbe9c6,#d8a94f); color:#3a2a05; font-weight:800; }
    .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }

    
    
    #admin-dashboard, #admin-gate-modal, #admin-user-modal, #admin-confirm-modal { line-height: 1.6; }
    #admin-dashboard p, #admin-gate-modal p, #admin-user-modal p, #admin-confirm-modal p,
    #admin-dashboard h1, #admin-dashboard h3, #admin-gate-modal h3, #admin-user-modal h3 { margin: 0; line-height: 1.5; }
    #admin-users-tbody tr, #admin-log-tbody tr { border-bottom: 1px solid var(--border); }
    #admin-users-tbody tr:hover, #admin-log-tbody tr:hover { background: var(--panel-2); }
    #admin-users-tbody td, #admin-log-tbody td { padding: .6rem .5rem; vertical-align: middle; line-height: 1.6; }
    
    #admin-users-tbody th, #admin-users-tbody td,
    #admin-log-tbody th, #admin-log-tbody td,
    #admin-dashboard table thead th {
        white-space: nowrap; word-break: normal; overflow-wrap: normal;
    }
    #admin-dashboard table { min-width: 640px; }
    #admin-users-tbody td > button { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; line-height: 1.5; white-space: normal; }
    #admin-users-tbody td > button p { white-space: normal; }
    
    .admin-mini-btn, #admin-dashboard .chip { display: inline-flex; align-items: center; gap: .4rem; line-height: 1.4; }
    .admin-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.62rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; line-height: 1.4; }
    .admin-badge-online { color:#34d399; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); }
    .admin-badge-offline { color:#8a8a8a; background:rgba(138,138,138,.1); border:1px solid rgba(138,138,138,.25); }
    .admin-badge-suspended { color:#f87171; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); }
    .admin-badge .dot { width:6px; height:6px; border-radius:999px; background: currentColor; flex-shrink: 0; }
    .admin-mini-btn { font-size:.62rem; font-weight:700; padding:.3rem .55rem; border-radius:.5rem; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
    .admin-mini-btn:hover { color:var(--text); border-color:#6b7280; }
    .admin-mini-input { width:64px; background:#14171b; border:1px solid var(--border); color:var(--text); border-radius:.5rem; padding:.25rem .4rem; font-size:.68rem; text-align:center; line-height: 1.4; }
    .admin-plan-chip { background:var(--panel-2); border:1px solid var(--border); border-radius:.8rem; padding:.6rem .7rem; text-align:center; line-height: 1.5; }

    .g-signin-btn { background:#fff; color:#3c4043; border:1px solid #dadce0; border-radius:999px; font-weight:600; padding:.65rem 1.25rem; font-size:.85rem; letter-spacing:.1px; box-shadow:0 1px 3px rgba(0,0,0,.15); transition: box-shadow .18s ease, transform .18s ease, background .18s ease; }
    .g-signin-btn:hover { box-shadow:0 3px 10px rgba(0,0,0,.28); transform: translateY(-1px); background:#f8f9fa; }
    .g-signin-btn:active { box-shadow:0 1px 2px rgba(0,0,0,.2); transform: translateY(0); }
    .g-signin-btn svg { width:18px; height:18px; flex-shrink:0; }
    .auth-gate-tab { color: var(--muted); background: transparent; transition: all .15s ease; }
    .auth-gate-tab.auth-tab-active { background: var(--panel); color: var(--text); }

    
    .signedin-avatar { width:44px; height:44px; border-radius:999px; overflow:hidden; flex-shrink:0; background:#14171b; display:flex; align-items:center; justify-content:center; border:2px solid rgba(52,211,153,.55); box-shadow:0 0 0 3px rgba(52,211,153,.12); }
    .signedin-avatar img { width:100%; height:100%; object-fit:cover; }
    .signedin-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.62rem; font-weight:700; color:#34d399; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); padding:.15rem .55rem; border-radius:999px; }
    .signedin-badge .dot { width:6px; height:6px; border-radius:999px; background:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,.25); animation: dotPulse 2s ease-in-out infinite; }
    @keyframes dotPulse { 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
    .g-logout-btn { background:rgba(248,113,113,.08); color:#f87171; border:1px solid rgba(248,113,113,.3); border-radius:999px; font-weight:700; padding:.55rem 1.1rem; font-size:.78rem; letter-spacing:.1px; transition: background .18s ease, border-color .18s ease, transform .18s ease; white-space:nowrap; }
    .g-logout-btn:hover { background:rgba(248,113,113,.16); border-color:rgba(248,113,113,.5); transform: translateY(-1px); }
    .g-logout-btn:active { transform: translateY(0) scale(.97); }

    
    #toast-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
    .app-toast { pointer-events: auto; width: 100%; background: #1c2027; border: 1px solid var(--border, #333); color: #e5e7eb; font-size: 12.5px; line-height: 1.5; border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 24px -6px rgba(0,0,0,.5); display: flex; align-items: flex-start; gap: 8px; opacity: 0; transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease; }
    .app-toast.show { opacity: 1; transform: translateY(0); }
    .app-toast.hide { opacity: 0; transform: translateY(-10px); }
    .app-toast i { margin-top: 1px; }
    .app-toast.toast-error { border-color: rgba(248,113,113,.4); }
    .app-toast.toast-error i { color: #f87171; }
    .app-toast.toast-success { border-color: rgba(52,211,153,.4); }
    .app-toast.toast-success i { color: #34d399; }
    .app-toast.toast-info i { color: #94a3b8; }
    .app-toast.toast-warning { border-color: rgba(251,191,36,.45); }
    .app-toast.toast-warning i { color: #fbbf24; }

    
    #trial-chip { transition: border-color .25s ease; }
    .trial-progress-track { margin-top: 6px; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
    .trial-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(135deg,var(--grad1),var(--grad3)); transition: width .35s ease, background .25s ease; }
    #trial-chip.trial-warning .trial-progress-fill, .header-trial-badge.trial-warning { background: #fbbf24; }
    #trial-chip.trial-danger .trial-progress-fill, .header-trial-badge.trial-danger { background: #f87171; }
    #trial-chip.trial-warning #trial-left { color: #fbbf24; }
    #trial-chip.trial-danger #trial-left { color: #f87171; }
    #trial-chip.trial-warning { border-color: rgba(251,191,36,.45); }
    #trial-chip.trial-danger { border-color: rgba(248,113,113,.5); }
    .header-trial-badge { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); transition: all .18s ease; }
    .header-trial-badge.trial-ok { color: var(--accent); }
    .header-trial-badge.trial-ok i { color: var(--accent); }
    .header-trial-badge.trial-warning { color: #1a1206; border-color: transparent; }
    .header-trial-badge.trial-warning i { color: #1a1206; }
    .header-trial-badge.trial-danger { color: #1a0606; border-color: transparent; }
    .header-trial-badge.trial-danger i { color: #1a0606; }
    .header-trial-badge:hover { filter: brightness(1.08); }

    
    
    #support-chat-fab { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 9998; width: 52px; height: 52px; border-radius: 999px; background: var(--accent-strong); color: #08131f; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 8px 24px -6px rgba(0,0,0,.6); cursor: pointer; transition: transform .15s ease; }
    #support-chat-fab:not(.hidden) { display: flex; }
    #support-chat-fab:hover { transform: translateY(-2px) scale(1.04); }
    #support-chat-fab:active { transform: translateY(0) scale(.96); }
    #support-chat-unread-badge { position: absolute; top: -4px; inset-inline-start: -4px; background: #f87171; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bg); }
    #support-chat-panel { position: fixed; bottom: 84px; inset-inline-end: 20px; z-index: 9998; width: min(92vw, 320px); max-height: 60vh; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 32px -8px rgba(0,0,0,.65); flex-direction: column; overflow: hidden; }
    #support-chat-panel:not(.hidden) { display: flex; }
    #support-chat-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--panel-2); font-size: 12.5px; font-weight: 700; color: var(--text); }
    #support-chat-panel-header button { color: var(--muted); background: transparent; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 8px; cursor: pointer; }
    #support-chat-panel-header button:hover, #support-chat-panel-header button:active { color: var(--text); background: rgba(255,255,255,.06); }
    #support-chat-log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; min-height: 120px; }
    #support-chat-log .sc-msg { max-width: 82%; padding: 6px 10px; border-radius: 10px; line-height: 1.5; }
    #support-chat-log .sc-msg.sc-from-admin { align-self: flex-start; background: var(--panel-2); color: var(--text); }
    #support-chat-log .sc-msg.sc-from-user { align-self: flex-end; background: var(--accent-strong); color: #08131f; }
    #support-chat-log .sc-msg .sc-time { display: block; font-size: 9px; opacity: .65; margin-top: 3px; }
    #support-chat-log .sc-empty { text-align: center; color: var(--muted); font-size: 11px; padding: 20px 0; }
    #support-chat-input-row { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }
    #support-chat-input-row input { flex: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; font-size: 12px; color: var(--text); }
    #support-chat-input-row button { width: 34px; height: 34px; border-radius: 999px; background: var(--accent-strong); color: #08131f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    @media (max-width: 480px) {
        #support-chat-fab { bottom: 14px; inset-inline-end: 14px; width: 48px; height: 48px; font-size: 18px; }
        #support-chat-panel { bottom: 72px; inset-inline-end: 10px; width: calc(100vw - 20px); }
    }



.pw-field-wrap { position: relative; direction: ltr; }
.pw-field-wrap input { padding-right: 2.35rem !important; box-sizing: border-box; }
.pw-eye-toggle {
    position: absolute; top: 50%; right: 4px; left: auto; transform: translateY(-50%);
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--muted); font-size: 13px; cursor: pointer;
    border-radius: 8px; transition: color .15s ease, background .15s ease; z-index: 2;
}
.pw-eye-toggle:hover, .pw-eye-toggle:active { color: var(--text); background: rgba(255,255,255,.06); }



.subs-btn-active {
    background: #10b981 !important;
    color: #052e1f !important;
    cursor: default !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
.subs-btn-active:hover { background: #10b981 !important; }


.grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; }


#global-loading-bar {
    position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 3px; z-index: 200; overflow: hidden;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}
#global-loading-bar.hidden { display: none; }
#global-loading-bar::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(90deg, transparent, var(--accent-strong, #00A3A3), transparent);
    animation: global-loading-sweep 1.1s ease-in-out infinite;
}
@keyframes global-loading-sweep {
    0%   { inset-inline-start: -40%; }
    100% { inset-inline-start: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    #global-loading-bar::after { animation: none; inset-inline-start: 0; width: 100%; opacity: .5; }
}


.skeleton {
    position: relative; overflow: hidden; color: transparent !important;
    background: var(--panel-2, #1c1f26); border-radius: 8px; pointer-events: none;
}
.skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; }
}


@media (max-width: 768px) {
    #theme-toggle-btn,
    button[onclick^="switchViewByName('support')"] {
        min-width: 40px; min-height: 40px;
    }
}


.assistant-chat-wrap {
    display: flex; flex-direction: column; height: min(72vh, 640px);
    background: linear-gradient(180deg, rgba(44,203,203,.05), rgba(0,0,0,0) 18%), var(--panel);
    border: 1px solid var(--border); border-radius: 1.1rem; overflow: hidden;
    box-shadow: 0 10px 40px -18px rgba(0,163,163,.35);
}
.assistant-chat-header {
    display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(0,163,163,.14), rgba(0,127,127,.08));
}
.assistant-chat-avatar {
    width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--grad1), var(--grad3));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: .85rem;
    box-shadow: 0 0 0 3px rgba(44,203,203,.15);
}
.assistant-chat-log {
    flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem;
}
.assistant-msg { max-width: 84%; padding: .6rem .9rem; border-radius: 1rem; font-size: .82rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.assistant-msg.from-user {
    align-self: flex-end; color: #0b0b12; font-weight: 600;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border-bottom-right-radius: .3rem;
}
.assistant-msg.from-bot {
    align-self: flex-start; color: var(--text); background: var(--panel-2);
    border: 1px solid var(--border); border-bottom-left-radius: .3rem;
}
.assistant-msg.from-bot.is-error { border-color: rgba(248,113,113,.4); color: #fca5a5; }
.assistant-typing { align-self: flex-start; display: flex; gap: 4px; padding: .7rem .9rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 1rem; border-bottom-left-radius: .3rem; }
.assistant-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); animation: typingBounce 1.1s infinite ease-in-out; }
.assistant-typing span:nth-child(2) { animation-delay: .15s; }
.assistant-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.assistant-chat-inputbar { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border); background: var(--panel); }
.assistant-chat-inputbar textarea {
    flex: 1; resize: none; max-height: 110px; background: #141515; border: 1px solid var(--border);
    color: var(--text); border-radius: .85rem; padding: .65rem .85rem; font-size: .82rem; line-height: 1.5;
    font-family: inherit;
}
.assistant-chat-inputbar textarea:focus { outline: none; border-color: var(--accent); }
.assistant-chat-send {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: .85rem; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--grad1), var(--grad3)); color: #fff; font-size: 1rem;
    transition: transform .12s ease, opacity .12s ease;
}
.assistant-chat-send:active { transform: scale(.92); }
.assistant-chat-send:disabled { opacity: .5; }
.assistant-provider-hint { font-size: 10px; color: var(--muted); text-align: center; padding: .3rem 0 0; }


.assistant-icon-btn {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: .8rem; display: flex; align-items: center; justify-content: center;
    background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-size: .95rem;
    transition: all .15s ease;
}
.assistant-icon-btn:hover { color: var(--text); border-color: var(--accent); }
#assistant-voice-toggle-btn.voice-off { color: var(--muted); opacity: .6; }
#assistant-voice-toggle-btn.voice-on { color: var(--accent-strong); border-color: rgba(0,127,127,.35); }

.assistant-image-preview-wrap { padding: .6rem 1rem 0; display: flex; gap: .5rem; }
.assistant-image-preview-item { position: relative; width: 64px; height: 64px; border-radius: .7rem; overflow: hidden; border: 1px solid var(--border); }
.assistant-image-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.assistant-image-remove-btn {
    position: absolute; top: 2px; inset-inline-end: 2px; width: 18px; height: 18px; border-radius: 999px;
    background: rgba(0,0,0,.65); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.assistant-msg img.assistant-msg-img { max-width: 220px; border-radius: .7rem; display: block; margin-bottom: .4rem; }




.panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(44,203,203,.06), rgba(0,127,127,.03) 40%, transparent 75%),
        var(--panel) !important;
    border: 1px solid rgba(44,203,203,.16) !important;
    border-radius: 1.25rem !important;
    box-shadow:
        0 1px 0 0 rgba(255,255,255,.04) inset,
        0 18px 45px -22px rgba(0,0,0,.55),
        0 0 0 1px rgba(0,0,0,.15);
    backdrop-filter: blur(6px);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.panel::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--grad1), var(--grad3), var(--grad2), transparent);
    opacity: .75; pointer-events: none;
}
.panel:hover {
    border-color: rgba(44,203,203,.32) !important;
    box-shadow:
        0 1px 0 0 rgba(255,255,255,.05) inset,
        0 22px 55px -20px rgba(0,163,163,.28),
        0 0 0 1px rgba(0,0,0,.15);
}
html.light-mode .panel {
    background: linear-gradient(180deg, rgba(47,111,237,.05), rgba(255,255,255,0) 45%), #ffffff !important;
    border-color: rgba(47,111,237,.14) !important;
    box-shadow: 0 18px 40px -24px rgba(15,23,42,.18);
}
html.light-mode .panel:hover { border-color: rgba(47,111,237,.28) !important; }


.panel-2 {
    border-radius: .95rem !important;
    border: 1px solid var(--border) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.025), transparent) , var(--panel-2) !important;
    transition: border-color .2s ease, background .2s ease;
}
.panel-2:hover { border-color: rgba(44,203,203,.28) !important; }


.input-field, select.input-field, textarea.input-field {
    border-radius: .9rem !important;
    padding: .7rem 1rem !important;
    font-size: .88rem !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
    transition: all .2s cubic-bezier(.22,.9,.32,1);
}
.input-field:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(44,203,203,.18), inset 0 1px 2px rgba(0,0,0,.15) !important;
    transform: translateY(-1px);
}
.input-field::placeholder { color: var(--muted); opacity: .7; }
html.light-mode .input-field:focus { box-shadow: 0 0 0 4px rgba(47,111,237,.14) !important; }


.panel label, .panel-2 label { letter-spacing: .01em; }


.btn-primary, .btn-accent {
    position: relative; overflow: hidden;
    border-radius: .9rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
}
.btn-primary { background: linear-gradient(135deg, var(--grad1), var(--grad3) 65%, var(--grad2)) !important; background-size: 200% 200% !important; }
.btn-primary:hover { background-position: 100% 50% !important; box-shadow: 0 10px 30px -8px rgba(0,163,163,.55) !important; }
.btn-primary::after, .btn-accent::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .55s ease;
}
.btn-primary:hover::after, .btn-accent:hover::after { transform: translateX(120%); }
.btn-accent { box-shadow: 0 6px 20px -6px rgba(0,0,0,.35); }
.btn-accent:hover { transform: translateY(-1px); }


.chip { background: var(--panel-2); font-weight: 600; }
.chip:hover { border-color: var(--accent); color: var(--text); background: rgba(44,203,203,.1); }


.assistant-chat-wrap {
    border-radius: 1.4rem !important;
    border: 1px solid rgba(44,203,203,.22) !important;
    background:
        radial-gradient(120% 60% at 15% -10%, rgba(0,163,163,.14), transparent 55%),
        radial-gradient(90% 50% at 100% 0%, rgba(0,163,163,.04), transparent 55%),
        var(--panel) !important;
    box-shadow: 0 25px 70px -30px rgba(0,163,163,.45), 0 0 0 1px rgba(0,0,0,.2);
}
.assistant-chat-header {
    background: linear-gradient(90deg, rgba(0,163,163,.22), rgba(0,127,127,.14), rgba(44,203,203,.10)) !important;
    background-size: 200% 100%;
    animation: assistantHeaderShift 8s ease-in-out infinite;
    border-bottom: 1px solid rgba(44,203,203,.18) !important;
}
@keyframes assistantHeaderShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.assistant-chat-avatar {
    background: linear-gradient(135deg, var(--grad1), var(--grad3), var(--grad2)) !important;
    background-size: 200% 200%;
    animation: assistantAvatarGlow 5s ease-in-out infinite;
    box-shadow: 0 0 0 4px rgba(44,203,203,.18), 0 0 18px rgba(0,163,163,.5) !important;
}
@keyframes assistantAvatarGlow {
    0%,100% { background-position: 0% 50%; box-shadow: 0 0 0 4px rgba(44,203,203,.18), 0 0 18px rgba(0,163,163,.5); }
    50% { background-position: 100% 50%; box-shadow: 0 0 0 4px rgba(0,127,127,.18), 0 0 22px rgba(0,127,127,.55); }
}
.assistant-msg {
    box-shadow: 0 6px 18px -10px rgba(0,0,0,.45);
    border-radius: 1.1rem;
}
.assistant-msg.from-user {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    border-bottom-right-radius: .35rem;
    box-shadow: 0 8px 22px -8px rgba(44,203,203,.55);
}
.assistant-msg.from-bot {
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--panel-2) !important;
    border: 1px solid rgba(44,203,203,.14) !important;
}
.assistant-chat-inputbar {
    background: linear-gradient(180deg, transparent, rgba(0,163,163,.04)) !important;
    border-top: 1px solid rgba(44,203,203,.16) !important;
}
.assistant-chat-inputbar textarea {
    border-radius: 1rem !important;
    background: #14141c !important;
}
.assistant-chat-inputbar textarea:focus {
    box-shadow: 0 0 0 4px rgba(44,203,203,.16);
}
.assistant-chat-send {
    background: linear-gradient(135deg, var(--grad1), var(--grad3)) !important;
    background-size: 200% 200%;
    animation: assistantAvatarGlow 5s ease-in-out infinite;
    border-radius: 1rem !important;
}
.assistant-chat-send:hover { transform: scale(1.06) translateY(-1px); }
.assistant-typing span { background: linear-gradient(135deg, var(--grad1), var(--grad3)) !important; }


#support-chat-fab {
    background: linear-gradient(135deg, var(--grad1), var(--grad3)) !important;
    box-shadow: 0 10px 30px -10px rgba(0,163,163,.6) !important;
    animation: fabBreath 3.2s ease-in-out infinite;
}
@keyframes fabBreath {
    0%,100% { box-shadow: 0 10px 30px -10px rgba(0,163,163,.6); }
    50% { box-shadow: 0 10px 34px -8px rgba(0,127,127,.55); }
}

html.light-mode .assistant-chat-wrap { box-shadow: 0 25px 60px -30px rgba(47,111,237,.35); }
html.light-mode .assistant-msg.from-bot { border-color: rgba(47,111,237,.15) !important; }

@media (prefers-reduced-motion: reduce) {
    .assistant-chat-header, .assistant-chat-avatar, .assistant-chat-send, #support-chat-fab { animation: none !important; }
}

/* ===== INKED: header inset + profile redesign ===== */
body header.sticky{margin:10px 12px 0!important;top:10px!important;border-radius:20px!important;border:1px solid #2A2B2B!important;background:rgba(11,12,12,.9)!important;backdrop-filter:blur(14px)}
#view-title{white-space:nowrap;font-size:15px}
#view-profile .profile-hero{background:radial-gradient(420px 240px at 50% 0%,rgba(0,172,172,.16),transparent 70%),#0B0C0C!important;border:1px solid #2A2B2B!important;border-radius:28px!important}
#view-profile .profile-hero>div>div:first-child{flex-direction:column!important;align-items:center!important;text-align:center;gap:18px}
#view-profile .profile-hero .flex-1{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
#view-profile .profile-hero .flex-1>div{justify-content:center}
#view-profile .profile-avatar-xl{width:116px!important;height:116px!important;border-radius:50%!important;background:#000!important;border:2px solid #00ACAC!important;color:#5FD0D0!important;box-shadow:0 0 0 7px rgba(0,172,172,.1),0 20px 44px -14px rgba(0,172,172,.55)!important;display:grid;place-items:center;overflow:hidden}
#view-profile .profile-hero .input-field{width:100%!important;max-width:380px!important;height:50px;text-align:center;background:#000!important;border:1px solid #2A2B2B!important;border-radius:14px!important;color:#F2F1EF!important}
#view-profile .profile-hero .input-field:focus{border-color:#00ACAC!important;box-shadow:0 0 0 3px rgba(0,172,172,.18)!important;outline:0}
#view-profile .points-badge{background:#141515!important;color:#DFDEDC!important;border:1px solid #2A2B2B!important}#view-profile .points-badge i{color:#00ACAC}
#view-profile .plan-pill{background:rgba(0,172,172,.1)!important;border:1px solid rgba(0,172,172,.45)!important;color:#5FD0D0!important}
#view-profile .acc-profile{width:100%;max-width:380px;justify-content:center;align-self:center!important;height:50px;border-radius:14px!important;background:linear-gradient(135deg,#00A3A3,#007F7F)!important;color:#fff!important;box-shadow:0 14px 30px -12px rgba(0,172,172,.65)!important;border:0!important}
#view-profile .quick-pill{background:#141515!important;border:1px solid #2A2B2B!important;color:#DFDEDC!important}#view-profile .quick-pill i{color:#00ACAC}
#view-profile .profile-hero .overflow-x-auto{justify-content:flex-start;border-color:#2A2B2B!important}
#view-profile .stat-card-v2{background:#0B0C0C!important;border:1px solid #2A2B2B!important;border-radius:20px!important;text-align:center;padding:18px 8px!important}
#view-profile .stat-icon{background:rgba(0,172,172,.12)!important;color:#00ACAC!important;border-radius:14px!important;margin-inline:auto}

/* ===== header: long titles + language picker fix ===== */
body header.sticky{gap:8px!important;padding-inline:12px!important}
body header.sticky #view-title{flex:1 1 0;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:1.5}
body header.sticky>.mr-auto{flex:0 0 auto;margin-inline-start:0!important;gap:6px!important}
body header.sticky #lang-picker{width:auto!important;min-width:0!important;max-width:96px;height:32px!important;padding:0 8px!important;font-size:12px!important;border-radius:10px!important;flex:0 0 auto}
body header.sticky .header-trial-badge{padding:4px 8px!important}
@media(max-width:400px){body header.sticky [data-x-onclick="h78"]{display:none!important}body header.sticky #lang-picker{max-width:84px}}

/* هيدر الموبايل: صف واحد، والعنوان الطويل يتقص بنقط (...) والأزرار تفضل ظاهرة جنبه */
@media (max-width:639px){
  header.sticky.top-0{flex-wrap:nowrap;gap:8px;padding-inline:12px}
  header.sticky.top-0 #view-title{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header.sticky.top-0 > div.mr-auto{flex:0 0 auto;margin:0!important;gap:6px}
  header.sticky.top-0 > div.mr-auto > button{flex-shrink:0}
  header.sticky.top-0 #lang-picker{flex-shrink:0;width:78px;max-width:78px;font-size:11px;padding-inline:6px;text-overflow:ellipsis}
}

.pack-step{width:30px;height:30px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:#e5e7eb;font-size:16px;font-weight:800;line-height:1;cursor:pointer;transition:.15s}
.pack-step:hover{border-color:#00A3A3;color:#fff}

.admin-badge-pack{color:#5FD0D0;background:rgba(0,163,163,.14);border:1px solid rgba(0,163,163,.35)}

/* ===== طلبات الدفع: صفحة الأدمن (كروت منظمة) ===== */
.rq-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rq-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:14px;border:1px solid var(--border);background:var(--panel-2);color:var(--text-muted,#94a3b8);cursor:pointer;transition:.15s}
.rq-tab:hover{filter:brightness(1.15)}
.rq-tab.active{border-color:currentColor;box-shadow:0 0 0 1px currentColor inset;color:#e2e8f0}
.rq-tab-n{font-size:1.25rem;font-weight:800;line-height:1.1}
.rq-tab-l{font-size:.65rem;font-weight:700}
.rq-tab-x{font-size:.6rem;opacity:.8}
.rq-tab-wait .rq-tab-n{color:#fbbf24}.rq-tab-ok .rq-tab-n{color:#34d399}.rq-tab-no .rq-tab-n{color:#f87171}
.rq-list{display:grid;gap:12px;margin-top:10px}
@media(min-width:900px){.rq-list{grid-template-columns:repeat(2,1fr)}}
.rq-card{background:var(--panel-2);border:1px solid var(--border);border-inline-start:4px solid #fbbf24;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.rq-card.rq-approved{border-inline-start-color:#34d399}.rq-card.rq-rejected{border-inline-start-color:#f87171}
.rq-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rq-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.rq-who b{font-size:.85rem;color:#f1f5f9}.rq-who span{font-size:.65rem;color:#94a3b8;overflow-wrap:anywhere}
.rq-pill{font-size:.65rem;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
.rq-pill-pending{background:rgba(251,191,36,.15);color:#fbbf24}.rq-pill-approved{background:rgba(52,211,153,.15);color:#34d399}.rq-pill-rejected{background:rgba(248,113,113,.15);color:#f87171}
.rq-amount{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rq-price{font-size:1.5rem;font-weight:800;color:#fff}.rq-price small{font-size:.7rem;font-weight:600;color:#94a3b8}
.rq-plan{font-size:.75rem;color:#cbd5e1}.rq-plan em{font-style:normal;color:#64748b}
.rq-detail{font-size:.7rem;color:#cbd5e1;background:rgba(148,163,184,.08);border-radius:10px;padding:7px 10px;line-height:1.6}
.rq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:600px){.rq-grid{grid-template-columns:1fr 1fr}.rq-grid .rq-cell:last-child{grid-column:1/-1}}
.rq-cell{background:rgba(148,163,184,.07);border-radius:10px;padding:7px 9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.rq-k{font-size:.58rem;color:#64748b;font-weight:700}.rq-v{font-size:.75rem;color:#e2e8f0;font-weight:700;overflow-wrap:anywhere}
.rq-proof{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;border:1px dashed var(--border);background:rgba(148,163,184,.05);cursor:pointer;text-align:start;color:inherit}
.rq-proof:hover{border-color:#5FD0D0}
.rq-thumb{width:64px;height:64px;border-radius:10px;background:#0b1220 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#64748b;flex-shrink:0}
.rq-proof-txt{display:flex;flex-direction:column;gap:2px}.rq-proof-txt b{font-size:.75rem;color:#e2e8f0}.rq-proof-txt small{font-size:.62rem;color:#5FD0D0}
.rq-noproof{font-size:.68rem;color:#64748b;padding:8px 10px;border-radius:10px;border:1px dashed var(--border)}
.rq-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rq-btn{padding:10px;border-radius:12px;font-weight:800;font-size:.8rem;border:1px solid transparent;cursor:pointer}
.rq-btn-ok{background:rgba(52,211,153,.15);color:#34d399;border-color:rgba(52,211,153,.4)}.rq-btn-no{background:rgba(248,113,113,.12);color:#f87171;border-color:rgba(248,113,113,.4)}
.rq-btn:hover{filter:brightness(1.2)}
.rq-reviewed{font-size:.72rem;color:#94a3b8}.rq-reason{margin-top:4px;color:#fca5a5}
.rq-lightbox{position:fixed;inset:0;z-index:300;background:rgba(2,6,12,.92);display:flex;flex-direction:column}
.rq-lb-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;color:#fff;font-size:.8rem}
.rq-lb-tools{display:flex;gap:8px}
.rq-lb-btn{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:10px;padding:7px 12px;font-size:.75rem;cursor:pointer;text-decoration:none}
.rq-lb-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:10px}
.rq-lb-img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;border-radius:8px}
.rq-lb-stage.zoomed{align-items:flex-start;justify-content:flex-start}
.rq-lb-stage.zoomed .rq-lb-img{max-width:none;max-height:none;width:auto;cursor:zoom-out}
.rq-lb-hint{text-align:center;color:#94a3b8;font-size:.65rem;padding:6px}

/* ===== حالة طلبات المستخدم ===== */
.myreq{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--panel-2);border:1px solid var(--border);border-inline-start:4px solid #fbbf24}
.myreq-ok{border-inline-start-color:#34d399}.myreq-no{border-inline-start-color:#f87171}
.myreq-ico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;background:rgba(251,191,36,.15);color:#fbbf24}
.myreq-ok .myreq-ico{background:rgba(52,211,153,.15);color:#34d399}.myreq-no .myreq-ico{background:rgba(248,113,113,.15);color:#f87171}
.myreq-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.myreq-top{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;color:#f1f5f9}
.myreq-price{font-weight:800}.myreq-name{font-size:.72rem;color:#cbd5e1}
.myreq-sub{font-size:.72rem;color:#94a3b8;line-height:1.6}.myreq-date{font-size:.6rem;color:#64748b}
.myreq-fresh{box-shadow:0 0 0 2px rgba(95,208,208,.55);animation:myreqPulse 1.6s ease-in-out 3}
@keyframes myreqPulse{50%{box-shadow:0 0 0 5px rgba(95,208,208,.15)}}
.req-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:90;width:min(94vw,520px);display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#0f1a1a;border:1px solid #fbbf24;color:#e2e8f0;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.req-banner-ok{border-color:#34d399}.req-banner-no{border-color:#f87171}
.req-banner-ico{font-size:1.5rem;color:#fbbf24}.req-banner-ok .req-banner-ico{color:#34d399}.req-banner-no .req-banner-ico{color:#f87171}
.req-banner-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.72rem;line-height:1.5}.req-banner-txt b{font-size:.85rem}
.req-banner-btn{background:#5FD0D0;color:#04201f;border:0;border-radius:10px;padding:7px 14px;font-weight:800;font-size:.75rem;cursor:pointer}
.req-banner-x{background:transparent;border:0;color:#94a3b8;cursor:pointer;padding:4px}

/* ---- رصيدك الحالي (الباقة الشهرية + رصيد الحزم) ---- */
.bal-row{background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.bal-muted{opacity:.9}
.bal-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bal-title{font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:6px;min-width:0}
.bal-val{font-size:1rem;font-weight:800;white-space:nowrap}
.bal-val small,.bal-total small{font-size:.62rem;font-weight:500;opacity:.7}
.bal-sub{font-size:.7rem;line-height:1.7}
.bal-bar{height:6px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden}
.bal-fill{display:block;height:100%;border-radius:999px;background:#34d399;transition:width .3s}
.bal-fill.bal-warn{background:#fbbf24}
.bal-fill.bal-danger{background:#f87171}
.bal-eq-wrap{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.bal-eq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:640px){.bal-eq{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bal-eq-i{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:10px 6px;border-radius:12px;background:var(--panel);border:1px solid var(--border);font-size:.7rem}
.bal-eq-i b{font-size:1.05rem;font-weight:800}
.bal-eq-note{font-size:.58rem}
.bal-total{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px dashed var(--border);font-size:.78rem}
.bal-total b{font-size:1rem;font-weight:800}
.bal-buy{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--border);font-size:.74rem}
.bal-buy>div:first-child{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.bal-buy-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.bal-pending{font-size:.7rem;color:#fbbf24;display:flex;align-items:center;gap:6px;line-height:1.7}
/* ---- رصيدك: شرايح صغيرة بتتضغط عشان تحدد يتخصم من إيه ---- */
.wal-card{background:var(--panel-2);border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px}
.wal-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.wal-title{font-size:.78rem;font-weight:800;display:flex;align-items:center;gap:6px}
.wal-tip{font-size:.62rem;opacity:.65}
.wal-chips{display:flex;flex-wrap:wrap;gap:6px}
.wal-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:inherit;font-size:.7rem;line-height:1.2;cursor:pointer;transition:border-color .15s,background .15s}
.wal-chip i{font-size:.68rem;opacity:.75}
.wal-chip .wal-n{font-size:.84rem;font-weight:800}
.wal-chip .wal-s{font-size:.58rem;opacity:.6}
.wal-chip:hover{border-color:#00A3A3}
.wal-chip.wal-on{border-color:#5FD0D0;background:rgba(95,208,208,.12);box-shadow:inset 0 0 0 1px rgba(95,208,208,.35)}
.wal-chip.wal-low .wal-n{color:#f87171}
.wal-chip[disabled]{cursor:default}
.wal-chip[disabled]:hover{border-color:var(--border)}
.wal-hint{font-size:.68rem;line-height:1.7}

    /* ---------- نافذة الدفع ---------- */
    .pay-hero { background: linear-gradient(135deg, rgba(0,172,172,.16), rgba(0,172,172,.04)); border: 1px solid rgba(0,172,172,.35); }
    .pay-price { font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1; }
    .pay-step { display:flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; color: var(--text); }
    .pay-step-num { width:1.35rem; height:1.35rem; border-radius:999px; background: var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:800; flex-shrink:0; }
    .pay-method { background: var(--panel-2); border: 1px solid var(--border); border-radius: .9rem; padding: .7rem; transition: border-color .15s ease; }
    .pay-method:hover { border-color: rgba(0,172,172,.55); }
    .pay-method-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; font-size:.75rem; font-weight:700; color: var(--text); }
    .pay-badge { width:1.9rem; height:1.9rem; border-radius:.55rem; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; color:#fff; flex-shrink:0; }
    .pay-badge-orange { background: linear-gradient(135deg,#ff7a00,#ff9a3c); }
    .pay-badge-insta { background: linear-gradient(135deg,#6d28d9,#a855f7); }
    .pay-num-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; background: var(--panel); border:1px solid var(--border); border-radius:.65rem; padding:.5rem .75rem; }
    .pay-num-row + .pay-num-row { margin-top:.4rem; }
    .pay-num { font-weight:800; letter-spacing:.06em; font-size:.92rem; color: var(--text); }
    .pay-tag { font-size:.6rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; background: rgba(0,172,172,.15); color: var(--accent); }
    .pay-note { font-size:.64rem; color: var(--muted); line-height:1.6; }