/* ====================================================================
   AZADRAH — Main Stylesheet
   Version 4.0 — Complete UI System + Fixed Header & Mobile Menu
   RTL-first · Fully responsive · Modern design tokens
   ==================================================================== */

/* ---------- Font ---------- */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

/* ====================================================================
   1. DESIGN TOKENS
   ==================================================================== */
:root {
    /* Surfaces */
    --bg:              #f4f7fb;
    --bg-alt:          #eef2f7;
    --surface:         #ffffff;
    --surface-2:       #f8fafc;
    --surface-3:       #f1f5f9;
    --surface-dark:    #0f172a;

    /* Text */
    --text:            #0f172a;
    --text-2:          #334155;
    --muted:           #64748b;
    --muted-2:         #94a3b8;

    /* Borders */
    --border:          #e2e8f0;
    --border-2:        #cbd5e1;
    --border-soft:     #f1f5f9;

    /* Brand */
    --primary:         #10b981;
    --primary-2:       #06b6d4;
    --primary-dark:    #047857;
    --primary-darker:  #064e3b;
    --primary-soft:    #ecfdf5;
    --primary-border:  #a7f3d0;

    /* Semantic */
    --success:         #10b981;
    --success-soft:    #dcfce7;
    --success-text:    #166534;

    --warning:         #f59e0b;
    --warning-soft:    #fef3c7;
    --warning-text:    #92400e;

    --danger:          #ef4444;
    --danger-soft:     #fee2e2;
    --danger-text:     #991b1b;

    --info:            #3b82f6;
    --info-soft:       #dbeafe;
    --info-text:       #1e40af;

    --accent:          #8b5cf6;
    --accent-soft:     #ede9fe;
    --accent-text:     #6d28d9;

    /* Gradients */
    --grad-primary:    linear-gradient(135deg, #6366f1, #8b5cf6);
    --grad-success:    linear-gradient(135deg, #10b981, #059669);
    --grad-warning:    linear-gradient(135deg, #f59e0b, #ea580c);
    --grad-danger:     linear-gradient(135deg, #ef4444, #dc2626);
    --grad-info:       linear-gradient(135deg, #0ea5e9, #0284c7);
    --grad-accent:     linear-gradient(135deg, #8b5cf6, #d946ef);
    --grad-hero:       linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
    --grad-dark:       linear-gradient(160deg, #0f172a 0%, #1e293b 100%);

    /* Shadows */
    --shadow-xs:       0 1px 2px rgba(15,23,42,.04);
    --shadow-sm:       0 2px 10px rgba(15,23,42,.05);
    --shadow:          0 14px 45px rgba(15,23,42,.08);
    --shadow-md:       0 10px 28px -12px rgba(15,23,42,.25);
    --shadow-lg:       0 28px 80px rgba(15,23,42,.12);
    --shadow-xl:       0 30px 80px -30px rgba(15,23,42,.35);

    /* Radius */
    --radius-xs:       8px;
    --radius-sm:       12px;
    --radius:          18px;
    --radius-lg:       22px;
    --radius-xl:       26px;
    --radius-full:     999px;

    /* Spacing / Layout */
    --header-h:        74px;
    --sidebar:         260px;
    --container:       1180px;

    /* Motion */
    --t-fast:          .15s cubic-bezier(.2,.9,.3,1.05);
    --t:               .22s cubic-bezier(.2,.9,.3,1.05);
    --t-slow:          .35s cubic-bezier(.2,.9,.3,1.4);

    /* Type */
    --font:            'Vazirmatn', 'IRANSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Tahoma, sans-serif;
    --font-mono:       ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}

/* ====================================================================
   2. RESET & BASE
   ==================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    font-size: 14px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

img,
svg {
    max-width: 100%;
    display: block;
    height: auto;
}

ul, ol {
    list-style: none;
}

::selection {
    background: var(--primary);
    color: #fff;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ====================================================================
   3. LAYOUT UTILITIES
   ==================================================================== */
.container {
    width: min(var(--container), calc(100% - 32px));
    margin-inline: auto;
}

.section        { padding: 58px 0; }
.section-space  { padding: 40px 0 70px; }
.page           { padding: 34px 0 70px; }

.flex           { display: flex; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1; min-width: 0; }
.flex-col       { flex-direction: column; }
.gap-4          { gap: 4px; }
.gap-6          { gap: 6px; }
.gap-8          { gap: 8px; }
.gap-10         { gap: 10px; }
.gap-12         { gap: 12px; }
.gap-14         { gap: 14px; }
.gap-16         { gap: 16px; }
.gap-18         { gap: 18px; }
.gap-20         { gap: 20px; }
.gap-24         { gap: 24px; }

.grid           { display: grid; }
.grid-2         { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.grid-3         { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.grid-4         { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.grid-5         { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }

.muted          { color: var(--muted); }
.text-xs        { font-size: 11px; }
.text-sm        { font-size: 12.5px; }
.text-base      { font-size: 14px; }
.text-lg        { font-size: 16px; }
.text-xl        { font-size: 20px; }
.text-2xl       { font-size: 24px; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-left      { text-align: left; }
.font-bold      { font-weight: 700; }
.font-black     { font-weight: 900; }
.text-mono      { font-family: var(--font-mono); }
.text-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hide            { display: none !important; }
.hide-mobile     { display: initial; }

.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* ====================================================================
   4. BUTTONS
   ==================================================================== */
.btn {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 11px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: 13px;
    font-family: inherit;
    transition: all var(--t);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    user-select: none;
    min-height: 42px;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary {
    color: #fff;
    background: var(--grad-success);
    box-shadow: 0 10px 25px -10px rgba(16,185,129,.7);
}
.btn-primary:hover:not(:disabled) {
    box-shadow: 0 14px 30px -10px rgba(16,185,129,.85);
}

.btn-secondary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-2);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-2);
    color: var(--text);
}

.btn-danger {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-color: #fecaca;
}
.btn-danger:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; }

.btn-warning {
    background: var(--warning-soft);
    color: var(--warning-text);
    border-color: #fde68a;
}
.btn-warning:hover:not(:disabled) { background: #fef3c7; border-color: #fcd34d; }

.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
}

.btn-sm {
    padding: 8px 12px;
    font-size: 11.5px;
    border-radius: 10px;
    min-height: 36px;
}
.btn-lg {
    padding: 14px 24px;
    font-size: 14px;
    border-radius: 13px;
    min-height: 50px;
}
.btn-block { width: 100%; }

.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    display: inline-grid;
    place-items: center;
    font-size: 12px;
    transition: all var(--t);
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}
.btn-icon:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    color: var(--text);
    transform: translateY(-1px);
}
.btn-icon.edit:hover    { background: var(--info-soft);    color: var(--info-text);    border-color: #bfdbfe; }
.btn-icon.dl:hover,
.btn-icon.view:hover    { background: var(--success-soft); color: var(--success-text); border-color: var(--primary-border); }
.btn-icon.copy:hover    { background: var(--success-soft); color: var(--success-text); border-color: var(--primary-border); }
.btn-icon.toggle:hover  { background: var(--warning-soft); color: var(--warning-text); border-color: #fde68a; }
.btn-icon.del:hover     { background: var(--danger-soft);  color: var(--danger-text);  border-color: #fecaca; }
.btn-icon.star:hover    { background: var(--warning-soft); color: #d97706;             border-color: #fcd34d; }
.btn-icon.star.active   { background: var(--grad-warning); color: #fff;                border-color: #d97706; }
.btn-icon.dup:hover     { background: var(--warning-soft); color: #b45309;             border-color: #fcd34d; }

/* ====================================================================
   5. FORM CONTROLS
   ==================================================================== */
.input-group { display: grid; gap: 7px; }
.input-group label {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-2);
}

.input,
.select,
.textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    outline: none;
    transition: all var(--t);
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    box-sizing: border-box;
    min-height: 44px;
}
.input::placeholder,
.textarea::placeholder { color: var(--muted-2); }

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    background: var(--surface-3);
    color: var(--muted);
    cursor: not-allowed;
}

.textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.8;
}

.input[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

.select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 14px;
    padding-left: 36px;
    cursor: pointer;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}
.form-wide { grid-column: 1 / -1; }

.switch-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-2);
    cursor: pointer;
    font-weight: 700;
    user-select: none;
    position: relative;
}
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }

.switch-ui {
    width: 42px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--border-2);
    position: relative;
    transition: background var(--t);
    display: inline-block;
    flex-shrink: 0;
}
.switch-ui::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--t);
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.switch-row input:checked + .switch-ui {
    background: var(--grad-success);
}
.switch-row input:checked + .switch-ui::after {
    transform: translateX(-18px);
}

.switch-row.orange input:checked + .switch-ui { background: var(--grad-warning); }
.switch-row.purple input:checked + .switch-ui { background: var(--grad-accent); }
.switch-row.danger input:checked + .switch-ui { background: var(--grad-danger); }

/* ====================================================================
   6. CARDS
   ==================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.card-pad { padding: 20px; }

.glass-card {
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.card-head h2,
.card-head h3 { font-size: 16px; font-weight: 800; }
.card-head span,
.card-head p { color: var(--muted); font-size: 11.5px; }

/* ====================================================================
   7. BADGES / STATUS
   ==================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: var(--radius-full);
    font-size: 10.5px;
    font-weight: 800;
    background: var(--surface-3);
    color: var(--text-2);
    white-space: nowrap;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.status,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.status::before,
.status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-success,
.status-pill.ok,
.status-pill.s-verified,
.status-pill.s-answered  { background: var(--success-soft); color: var(--success-text); }

.status-warning,
.status-pill.s-pending,
.status-pill.warning,
.status-pill.soon        { background: var(--warning-soft); color: var(--warning-text); }

.status-info,
.status-pill.s-paid,
.status-pill.info        { background: var(--info-soft);    color: var(--info-text); }

.status-danger,
.status-pill.s-failed,
.status-pill.error       { background: var(--danger-soft);  color: var(--danger-text); }

.status-muted,
.status-pill.off,
.status-pill.s-cancelled,
.status-pill.s-closed,
.status-pill.muted       { background: var(--surface-3);    color: var(--muted); }

.status-pill.expired     { background: var(--danger-soft);  color: var(--danger-text); }
.status-pill.reserved    { background: var(--warning-soft); color: var(--warning-text); }
.status-pill.used        { background: var(--info-soft);    color: var(--info-text); }

/* ====================================================================
   8. ALERTS
   ==================================================================== */
.alert {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.8;
    animation: slideDown .3s cubic-bezier(.2,.9,.3,1.05);
    border: 1px solid transparent;
}
.alert i { font-size: 15px; margin-top: 2px; flex-shrink: 0; }

.alert-success { background: var(--success-soft); color: var(--success-text); border-color: var(--primary-border); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger-text);  border-color: #fecaca; }
.alert-warning { background: var(--warning-soft); color: var(--warning-text); border-color: #fde68a; }
.alert-info    { background: var(--info-soft);    color: var(--info-text);    border-color: #bfdbfe; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ====================================================================
   9. PUBLIC HEADER (FIXED & RESPONSIVE)
   ==================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(244,247,251,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(226,232,240,.8);
    transition: box-shadow var(--t), background var(--t);
}
.site-header.scrolled {
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 20px -8px rgba(15,23,42,.1);
}

.navbar {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -.4px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--text);
    transition: opacity var(--t);
}
.brand:hover { opacity: .85; }
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #06b6d4);
    box-shadow: 0 12px 28px -10px rgba(6,182,212,.6);
    font-size: 18px;
    flex-shrink: 0;
}

/* Desktop Nav Links */
.nav-links {
    display: flex;
    gap: 6px;
    align-items: center;
}
.nav-links a {
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--text-2);
    transition: all var(--t);
    font-size: 13px;
    font-weight: 700;
}
.nav-links a:hover {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.cart-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 700;
    transition: all var(--t);
    text-decoration: none;
    color: var(--text-2);
}
.cart-pill:hover { background: var(--surface-2); border-color: var(--border-2); }

.cart-count {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    display: inline-grid;
    place-items: center;
    background: var(--grad-success);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
}

/* Auth Buttons (Login/Register) */
.auth-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}
.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text-2);
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 800;
    transition: all var(--t);
    text-decoration: none;
    white-space: nowrap;
}
.btn-login:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    color: var(--text);
}
.btn-register {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--grad-success);
    color: #fff;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 800;
    transition: all var(--t);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(16,185,129,.7);
}
.btn-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(16,185,129,.9);
}

/* Mobile Menu Toggle Button */
.mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all var(--t);
    flex-shrink: 0;
}
.mobile-menu-btn:hover,
.mobile-menu-btn.active {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary-dark);
}

/* Mobile Menu Drawer */
.mobile-menu-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    pointer-events: none;
}
.mobile-menu-drawer.open {
    pointer-events: auto;
}
.mobile-menu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--t);
}
.mobile-menu-drawer.open .mobile-menu-overlay {
    opacity: 1;
}
.mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100%;
    background: var(--surface);
    box-shadow: -20px 0 60px -20px rgba(15,23,42,.4);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.2,.9,.3,1.05);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-menu-drawer.open .mobile-menu-panel {
    transform: translateX(0);
}

.mobile-menu-head {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mobile-menu-close {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    display: grid;
    place-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--t);
}
.mobile-menu-close:hover {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-color: #fecaca;
}

.mobile-menu-body {
    padding: 18px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.mobile-menu-body a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 13px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    transition: all var(--t);
    text-decoration: none;
}
.mobile-menu-body a:hover {
    background: var(--surface-2);
    color: var(--text);
}
.mobile-menu-body a i {
    width: 22px;
    text-align: center;
    font-size: 15px;
    color: var(--primary);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
    border-radius: 1px;
}

.mobile-menu-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 8px 15px 4px;
}

.mobile-auth-buttons {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}
.mobile-auth-buttons .btn-login,
.mobile-auth-buttons .btn-register {
    justify-content: center;
    padding: 13px 18px;
    font-size: 13.5px;
    width: 100%;
}

.mobile-menu-footer {
    padding: 18px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.mobile-menu-footer .muted {
    font-size: 11px;
    text-align: center;
    line-height: 1.8;
}

/* ====================================================================
   10. PUBLIC HERO
   ==================================================================== */
.hero { padding: 72px 0 40px; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 44px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 18px;
}

.hero h1 {
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.18;
    letter-spacing: -1.6px;
    margin-bottom: 18px;
    font-weight: 900;
    color: var(--text);
}
.hero h1 span {
    background: linear-gradient(90deg, #059669, #0891b2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero p {
    font-size: 16.5px;
    color: var(--muted);
    max-width: 690px;
    margin-bottom: 26px;
    line-height: 1.95;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
}
.hero-points .point {
    padding: 14px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.hero-points .point b {
    display: block;
    margin-bottom: 3px;
    font-size: 13.5px;
}
.hero-points .point small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}

.hero-card {
    position: relative;
    padding: 24px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(160deg, #0f172a 0%, #0f766e 65%, #0e7490 100%);
    color: #fff;
    box-shadow: var(--shadow-lg);
    min-height: 420px;
}
.hero-card::before {
    content: "";
    position: absolute;
    width: 260px; height: 260px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    left: -100px; bottom: -130px;
}
.hero-card::after {
    content: "";
    position: absolute;
    width: 190px; height: 190px;
    background: rgba(16,185,129,.16);
    filter: blur(8px);
    border-radius: 50%;
    right: -70px; top: -80px;
}

.server-preview {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}
.server-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex-wrap: wrap;
    gap: 10px;
}
.server-status {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    background: rgba(255,255,255,.12);
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.server-status i { color: #6ee7b7; font-size: 8px; }

.server-box {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 16px;
}
.server-box .k { color: #a7f3d0; font-size: 10.5px; font-weight: 700; }
.server-box .v { font-weight: 800; font-size: 17px; margin-top: 3px; }

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

/* ====================================================================
   11. SECTIONS & FEATURES
   ==================================================================== */
.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}
.section-head h2 {
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -.7px;
    margin-bottom: 6px;
    font-weight: 900;
}
.section-head p {
    color: var(--muted);
    max-width: 610px;
    font-size: 13px;
    line-height: 1.9;
}

.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-xs);
    transition: all var(--t);
}
.feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}
.feature .icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 18px;
    margin-bottom: 14px;
}
.feature h3 {
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: 900;
}
.feature p {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.85;
}

/* ====================================================================
   12. PLANS (Public)
   ==================================================================== */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* Empty plans (fallback) */
.empty-plans {
    padding: 70px 24px;
    text-align: center;
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: 22px;
}
.empty-plans i {
    font-size: 52px;
    color: var(--primary);
    display: block;
    margin-bottom: 16px;
}
.empty-plans h3 {
    font-size: 18px;
    color: var(--text);
    margin: 0 0 8px;
    font-weight: 900;
}
.empty-plans p {
    font-size: 13px;
    color: var(--muted);
    margin: 0 auto;
    max-width: 380px;
    line-height: 1.9;
}

.plan-stock {
    margin: 10px 0;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 7px;
}
.plan-stock.in-stock  { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.plan-stock.out-stock { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.plan .btn[disabled]  { opacity: .58; cursor: not-allowed; box-shadow: none; }

.plan {
    position: relative;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-xs);
    transition: all var(--t);
    display: flex;
    flex-direction: column;
    min-height: 320px;
    overflow: hidden;
}
.plan::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 4px;
    background: var(--grad-primary);
    opacity: 0;
    transition: opacity var(--t);
}
.plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}
.plan:hover::before { opacity: 1; }

.plan.featured {
    border-color: #5eead4;
    box-shadow: 0 18px 55px -20px rgba(20,184,166,.25);
}
.plan.featured::before { background: var(--grad-warning); opacity: 1; }

.plan-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border: 1px solid var(--primary-border);
    padding: 5px 10px;
    font-size: 10.5px;
    font-weight: 800;
    border-radius: var(--radius-full);
    z-index: 2;
}
.plan.featured .plan-badge {
    background: var(--grad-warning);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px -4px rgba(245,158,11,.6);
}

.popular-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-full);
    background: var(--grad-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    z-index: 2;
    box-shadow: 0 4px 12px -4px rgba(239,68,68,.5);
}

.plan h3 {
    font-size: 17px;
    margin-bottom: 8px;
    padding-left: 80px;
    font-weight: 900;
    line-height: 1.4;
}
.plan p {
    color: var(--muted);
    font-size: 12.5px;
    min-height: 46px;
    line-height: 1.85;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 18px 0;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border);
    flex-wrap: wrap;
}
.plan-price strong {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.5px;
}
.plan-price span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.plan-price del {
    font-size: 12px;
    color: var(--muted-2);
    font-weight: 700;
}

.plan-features {
    display: grid;
    gap: 9px;
    margin-bottom: 18px;
    flex: 1;
}
.plan-features li {
    display: flex;
    gap: 9px;
    align-items: center;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
}
.plan-features i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success-text);
    display: grid;
    place-items: center;
    font-size: 9px;
    flex-shrink: 0;
}
.plan .btn { margin-top: auto; width: 100%; }

/* ====================================================================
   13. FAQ
   ==================================================================== */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.faq {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    transition: all var(--t);
}
.faq:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-sm);
}
.faq h3 {
    font-size: 14px;
    margin-bottom: 7px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
}
.faq h3 i { color: var(--primary); font-size: 13px; }
.faq p {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.9;
}

.faq-accordion {
    display: grid;
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all var(--t);
}
.faq-item[open] {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-sm);
}
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    list-style: none;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    color: var(--muted-2);
    transition: transform var(--t);
    flex-shrink: 0;
}
.faq-item[open] summary::after {
    transform: rotate(180deg);
    color: var(--primary);
}
.faq-item[open] summary { color: var(--primary-dark); }
.faq-content {
    padding: 0 20px 18px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 2;
}

/* ====================================================================
   14. CTA
   ==================================================================== */
.cta {
    background: linear-gradient(135deg, #062a27, #0f766e 60%, #0e7490);
    color: #fff;
    border-radius: 28px;
    padding: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: var(--shadow-lg);
    flex-wrap: wrap;
}
.cta h2 {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 900;
    margin-bottom: 8px;
}
.cta p {
    color: #ccfbf1;
    font-size: 13px;
    line-height: 1.9;
    max-width: 520px;
}
.cta .btn {
    background: #fff;
    color: var(--primary-dark);
    box-shadow: 0 12px 24px -10px rgba(0,0,0,.4);
}

/* ====================================================================
   15. PUBLIC FOOTER
   ==================================================================== */
.site-footer {
    padding: 50px 0 30px;
    color: var(--muted);
    background: linear-gradient(180deg, transparent, var(--surface-2));
    margin-top: 40px;
    position: relative;
}
.footer-top { padding-bottom: 30px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
}
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 14px;
}
.footer-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, #0f766e, #06b6d4);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 22px -10px rgba(6,182,212,.6);
}
.footer-brand-desc {
    font-size: 12.5px;
    line-height: 2;
    color: var(--muted);
    margin-bottom: 18px;
    max-width: 340px;
}
.footer-socials {
    display: flex;
    gap: 8px;
}
.footer-social {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 15px;
    text-decoration: none;
    transition: all var(--t);
}
.footer-social:hover {
    background: var(--grad-primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -8px rgba(99,102,241,.6);
}

.footer-col-title {
    font-size: 13.5px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 16px;
    padding-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 2px;
    background: var(--grad-success);
    border-radius: 2px;
}
.footer-col-title i { color: var(--primary); font-size: 12px; }

.footer-links {
    display: grid;
    gap: 9px;
    list-style: none;
    padding: 0;
}
.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12.5px;
    transition: all var(--t);
}
.footer-links a:hover {
    color: var(--primary-dark);
    transform: translateX(-4px);
}
.footer-links a i { font-size: 9px; color: var(--primary); }

.footer-contact {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 11px;
}
.footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--muted);
}
.footer-contact li > i {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--surface-3);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
}
.footer-contact a {
    color: var(--muted);
    transition: color var(--t);
}
.footer-contact a:hover { color: var(--text); }

.footer-ref-code {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 7px;
    background: var(--info-soft);
    color: var(--info-text);
    border: 1px solid #bfdbfe;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--t);
    letter-spacing: .5px;
}
.footer-ref-code:hover {
    background: var(--info);
    color: #fff;
    transform: translateY(-1px);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
}
.footer-copy-link {
    color: var(--primary-dark);
    font-weight: 800;
}
.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.footer-bottom-links a {
    color: var(--muted);
    transition: color var(--t);
}
.footer-bottom-links a:hover { color: var(--text); }
.footer-sep { color: var(--border-2); }

/* Scroll to Top */
.scroll-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    background: var(--grad-primary);
    color: #fff;
    font-size: 16px;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px -8px rgba(99,102,241,.7);
    transition: all var(--t-slow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(.85);
    z-index: 900;
}
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.scroll-top-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px -8px rgba(99,102,241,.9);
}

/* ====================================================================
   16. AUTH PAGES
   ==================================================================== */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
}
.auth-side {
    background: linear-gradient(150deg, #062a27, #0f766e 60%, #0e7490);
    color: #fff;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-side::before,
.auth-side::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.auth-side::before { width: 420px; height: 420px; right: -170px; top: -120px; }
.auth-side::after  { width: 300px; height: 300px; left: -120px; bottom: -110px; }

.auth-side-inner { max-width: 540px; position: relative; z-index: 1; }
.auth-side h1 { font-size: 42px; line-height: 1.2; margin: 18px 0 12px; font-weight: 900; }
.auth-side p  { color: #ccfbf1; font-size: 14px; line-height: 1.9; }

.auth-benefits {
    display: grid;
    gap: 10px;
    margin-top: 25px;
}
.auth-benefits div {
    display: flex;
    gap: 11px;
    align-items: center;
    font-size: 13px;
}
.auth-benefits i {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    font-size: 12px;
    flex-shrink: 0;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px;
}
.auth-form { width: min(460px, 100%); }
.auth-form h2 { font-size: 26px; margin-bottom: 6px; font-weight: 900; }
.auth-form > p {
    color: var(--muted);
    margin-bottom: 22px;
    font-size: 13px;
    line-height: 1.9;
}
.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    font-size: 12.5px;
    flex-wrap: wrap;
}
.auth-links a {
    color: var(--primary-dark);
    font-weight: 800;
    transition: color var(--t);
}
.auth-links a:hover { color: var(--primary); }

/* ====================================================================
   17. CART / CHECKOUT
   ==================================================================== */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.page-head h1 {
    font-size: 28px;
    letter-spacing: -.7px;
    font-weight: 900;
}
.page-head p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.shop-layout {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 16px;
    align-items: start;
}

.cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: 0; }
.cart-title { font-weight: 900; font-size: 14px; }
.cart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: var(--surface);
}
.qty button {
    width: 36px;
    height: 36px;
    border: 0;
    background: var(--surface-2);
    color: var(--text-2);
    font-weight: 900;
    font-size: 14px;
    transition: background var(--t);
}
.qty button:hover { background: var(--surface-3); color: var(--text); }
.qty input {
    width: 46px;
    text-align: center;
    border: 0;
    outline: 0;
    font-weight: 800;
    font-family: var(--font-mono);
}

.summary {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    padding: 20px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    color: var(--muted);
    font-size: 13px;
}
.summary-row.total {
    border-top: 2px solid var(--border);
    margin-top: 8px;
    padding-top: 15px;
    color: var(--text);
    font-weight: 900;
    font-size: 16px;
}
.summary-row.discount { color: var(--success-text); }

.coupon-row { display: flex; gap: 8px; }

/* ====================================================================
   18. PANEL LAYOUT
   ==================================================================== */
.panel-shell {
    min-height: 100vh;
    display: flex;
    background: var(--bg);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 18px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: transform var(--t);
    overflow-y: auto;
}
.panel-rtl .sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--border);
}

.side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 20px;
    font-weight: 900;
    font-size: 15px;
}

.side-nav {
    display: grid;
    gap: 3px;
}
.side-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    transition: all var(--t);
}
.side-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
}
.side-nav a.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 900;
}
.side-nav i {
    width: 20px;
    text-align: center;
    font-size: 14px;
}

.side-spacer { margin-top: auto; }
.side-user {
    border-top: 1px solid var(--border);
    padding-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.side-user .avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--grad-success);
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    flex-shrink: 0;
}
.side-user strong { font-size: 13px; display: block; }
.side-user small { display: block; color: var(--muted); font-size: 11px; }

.panel-main {
    width: 100%;
    padding-left: var(--sidebar);
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.panel-rtl .panel-main {
    padding-left: 0;
    padding-right: var(--sidebar);
}

.panel-top {
    position: sticky;
    top: 0;
    z-index: 70;
    background: rgba(244,247,251,.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(226,232,240,.85);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.panel-top-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.panel-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mobile-menu {
    display: none;
    border: 1px solid var(--border);
    background: var(--surface);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--text-2);
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.panel-title h1 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.4px;
}
.panel-title p {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

/* ====================================================================
   19. PANEL STAT CARDS (KPI)
   ==================================================================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat {
    padding: 20px;
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: all var(--t);
}
.stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.stat .icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--grad-success);
    color: #fff;
    font-size: 18px;
    margin-bottom: 14px;
    box-shadow: 0 10px 22px -10px rgba(16,185,129,.6);
}
.stat:nth-child(2) .icon { background: var(--grad-info);    box-shadow: 0 10px 22px -10px rgba(59,130,246,.6); }
.stat:nth-child(3) .icon { background: var(--grad-warning); box-shadow: 0 10px 22px -10px rgba(245,158,11,.6); }
.stat:nth-child(4) .icon { background: var(--grad-accent);  box-shadow: 0 10px 22px -10px rgba(139,92,246,.6); }

.stat .value {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--text);
}
.stat .label {
    color: var(--muted);
    font-size: 11.5px;
    margin-top: 3px;
    font-weight: 700;
}
.stat .trend {
    position: absolute;
    left: 14px;
    top: 16px;
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 800;
}

/* ====================================================================
   20. MINI STATS
   ==================================================================== */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}
.mini {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    transition: all var(--t);
}
.mini:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-xs);
}
.mini small {
    color: var(--muted);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    margin-bottom: 4px;
}
.mini b {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
}

/* ====================================================================
   21. TABLES
   ==================================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}
.table th,
.table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    font-size: 12.5px;
    white-space: nowrap;
    vertical-align: middle;
}
.table th {
    color: var(--muted);
    font-weight: 800;
    background: var(--surface-2);
    font-size: 11.5px;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr {
    transition: background var(--t);
}
.table tbody tr:hover { background: var(--surface-2); }

/* ====================================================================
   22. TOOLBAR / FILTERS
   ==================================================================== */
.toolbar {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.toolbar strong { font-weight: 900; }

.search {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 240px;
}
.search .input { max-width: 340px; }

.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-bar {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.filter-bar form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; }

.chip-tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 800;
    transition: all var(--t);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.chip:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-2);
}
.chip.active {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary-dark);
}
.chip .cnt {
    background: rgba(0,0,0,.06);
    padding: 0 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    min-width: 18px;
    text-align: center;
}
.chip.active .cnt {
    background: var(--primary);
    color: #fff;
}

/* ====================================================================
   23. PAGINATION
   ==================================================================== */
.pagination {
    display: flex;
    gap: 5px;
    justify-content: center;
    padding: 16px;
    flex-wrap: wrap;
}
.pagination a {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    transition: all var(--t);
    text-decoration: none;
}
.pagination a:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
}
.pagination a.active {
    background: var(--primary-dark);
    color: #fff;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px -4px rgba(16,185,129,.5);
}

/* ====================================================================
   24. TICKETS
   ==================================================================== */
.ticket-list { display: grid; gap: 10px; }

.ticket {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    transition: all var(--t);
}
.ticket:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-xs);
}
.ticket h3 {
    font-size: 13.5px;
    margin-bottom: 4px;
    font-weight: 900;
}
.ticket p { color: var(--muted); font-size: 11.5px; }
.ticket-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.conversation { display: grid; gap: 12px; }
.bubble {
    max-width: 78%;
    padding: 12px 15px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.9;
    position: relative;
    word-break: break-word;
}
.bubble.admin {
    margin-right: auto;
    background: #ecfeff;
    border-color: #a5f3fc;
}
.bubble .meta {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 6px;
    font-weight: 700;
}

.msg {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    max-width: 92%;
}
.msg.admin { grid-template-columns: 1fr 40px; }
.msg.admin .msg-avatar { order: 2; }
.msg.admin .msg-bubble { order: 1; }

.msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    background: var(--grad-primary);
    align-self: flex-start;
    flex-shrink: 0;
}
.msg.admin .msg-avatar { background: var(--grad-success); }

.msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
}
.msg.admin .msg-bubble {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: var(--primary-border);
}
.msg-bubble .mb-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.msg-bubble .mb-name { font-size: 12px; font-weight: 800; color: var(--text); }
.msg-bubble .mb-role {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--info-soft);
    color: var(--info-text);
    margin-left: 6px;
}
.msg.admin .mb-role { background: var(--success-soft); color: var(--success-text); }
.msg-bubble .mb-time { font-size: 10.5px; color: var(--muted-2); }
.msg-bubble .mb-text {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ====================================================================
   25. CONFIG CARDS
   ==================================================================== */
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.config-card {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--t);
    position: relative;
    overflow: hidden;
}
.config-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}
.config-card.status-active  { border-right: 3px solid var(--success); }
.config-card.status-soon    { border-right: 3px solid var(--warning); }
.config-card.status-expired { border-right: 3px solid var(--danger); opacity: .85; }
.config-card.status-revoked { border-right: 3px solid var(--muted-2); opacity: .7; }

.config-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.config-name {
    font-weight: 900;
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.config-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0;
}
.config-meta > div {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 9px 11px;
}
.config-meta small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 3px;
}
.config-meta b {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.config-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.qr-box {
    min-height: 180px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: 16px;
    padding: 15px;
    margin: 13px 0;
}
.qr-box canvas,
.qr-box img {
    max-width: 180px;
    border-radius: 8px;
    display: block;
}

/* ====================================================================
   26. MODALS
   ==================================================================== */
.modal,
.modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 250;
    padding: 16px;
    overflow-y: auto;
}
.modal.open,
.modal-bg.open { display: flex; }

.modal-box {
    width: min(650px, 100%);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalIn .25s cubic-bezier(.2,.9,.3,1.15);
    margin: auto;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--surface-2), #eef2ff);
    gap: 12px;
    flex-wrap: wrap;
}
.modal-head strong,
.modal-head h3 {
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
}
.modal-head .muted {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.close,
.modal-head .close-btn,
.modal-head .close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--t);
    flex-shrink: 0;
}
.close:hover,
.modal-head .close-btn:hover {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-color: #fecaca;
}

/* ====================================================================
   27. TOAST
   ==================================================================== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(60px);
    z-index: 400;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #fff;
    box-shadow: var(--shadow-lg);
    font-size: 12.5px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: all var(--t-slow);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 90vw;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast i { color: #4ade80; }

/* ====================================================================
   28. PANEL FOOTER
   ==================================================================== */
.panel-footer {
    margin-top: auto;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    color: var(--muted);
}
.pf-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pf-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.pf-copy .pf-sep { color: var(--border-2); }
.pf-copy .pf-role { color: var(--muted-2); }

.pf-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.pf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-2);
    text-decoration: none;
    font-weight: 700;
    font-size: 11.5px;
    border: 1px solid var(--border);
    transition: all var(--t);
}
.pf-link:hover {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border-2);
    transform: translateY(-1px);
}
.pf-link-danger {
    color: var(--danger-text);
    border-color: #fecaca;
    background: var(--danger-soft);
}
.pf-link-danger:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.pf-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--success-soft);
    color: var(--success-text);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
}
.pf-status .pf-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16,185,129,.2);
    animation: pfPulse 2s infinite;
}
.pf-status.offline {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-color: #fecaca;
}
.pf-status.offline .pf-dot { background: var(--danger); animation: none; }

@keyframes pfPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

/* ====================================================================
   29. EMPTY STATES
   ==================================================================== */
.empty {
    padding: 50px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.empty-state {
    text-align: center;
    padding: 48px 20px;
}
.empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 24px;
}
.empty-state h2,
.empty-state h3 {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 6px;
    color: var(--text);
}
.empty-state p {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.9;
    max-width: 380px;
    margin: 0 auto;
}

/* ====================================================================
   30. RESULT / CALLBACK PAGE
   ==================================================================== */
.result-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc, #eef7f5);
    display: grid;
    place-items: center;
    padding: 20px;
}
.result-wrap { width: min(540px, 100%); }
.result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 34px 30px;
    text-align: center;
}
.result-card.success .result-icon { color: var(--success-text); }
.result-card.error   .result-icon { color: var(--danger-text); }

.result-icon { font-size: 56px; line-height: 1; }
.result-card h1 { font-size: 22px; margin: 14px 0 8px; font-weight: 900; }
.result-card p  { color: var(--muted); font-size: 13px; line-height: 2; }

.result-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}
.result-meta span { color: var(--muted); }
.result-meta strong { font-weight: 800; color: var(--text); }

.result-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* ====================================================================
   31. CHECKOUT TOOLS
   ==================================================================== */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 16px;
    align-items: start;
}
.checkout-card { padding: 20px; }
.checkout-items {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}
.checkout-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface-2);
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all var(--t);
}
.checkout-item:hover {
    border-color: var(--primary-border);
    background: var(--surface);
}
.checkout-item strong { white-space: nowrap; font-weight: 900; }

.checkout-tools { display: grid; gap: 12px; margin-top: 18px; }

.coupon-box,
.balance-box {
    padding: 13px;
    border-radius: 14px;
    border: 1px solid var(--border);
}
.balance-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-color: #dbeafe;
    background: var(--info-soft);
}
.balance-box strong { font-size: 12.5px; display: block; }
.balance-box small {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    display: block;
}
.coupon-applied {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: 12px;
    color: var(--primary-dark);
    font-size: 11.5px;
}
.coupon-applied form { margin-right: auto; }
.coupon-applied button {
    border: 0;
    background: transparent;
    color: var(--danger-text);
    font-weight: 800;
    cursor: pointer;
    font-size: 11px;
}

.checkout-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 13px;
    padding: 11px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}
.checkout-note i { color: var(--info); margin-top: 2px; }

.secure-line {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--text-2);
    font-size: 12px;
    margin-top: 15px;
    padding: 11px 13px;
    background: var(--info-soft);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
}
.secure-line i { color: var(--info); font-size: 15px; }

.discount-text { color: var(--success-text) !important; font-weight: 800; }

/* ====================================================================
   32. LOG DETAILS
   ==================================================================== */
.log-details {
    max-width: 360px;
    white-space: normal !important;
    line-height: 1.8;
    font-size: 11.5px;
    color: var(--text-2);
}

/* ====================================================================
   33. TEXT HELPERS
   ==================================================================== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 900;
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    padding: 5px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.page-heading h1 {
    font-size: 26px;
    letter-spacing: -.7px;
    margin-top: 4px;
    font-weight: 900;
}
.page-heading p {
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 4px;
    line-height: 1.9;
}

/* ====================================================================
   34. PANEL GRID LAYOUTS
   ==================================================================== */
.panel-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 16px;
}

.two-col-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 15px;
    align-items: start;
}

.ticket-panel { padding: 18px; min-height: 540px; }

.ticket-thread {
    display: grid;
    gap: 9px;
    max-height: 410px;
    overflow-y: auto;
    padding: 3px 0 12px;
}
.ticket-message {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 11px 14px;
}
.ticket-message.admin {
    background: #ecfeff;
    border-color: #a5f3fc;
}
.ticket-message b { font-size: 11.5px; font-weight: 800; }
.ticket-message span {
    float: left;
    color: var(--muted);
    font-size: 10px;
}
.ticket-message p {
    clear: both;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.95;
    white-space: pre-wrap;
    word-break: break-word;
}

.stack-form textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 13px;
    padding: 12px 14px;
    resize: vertical;
    font: inherit;
    outline: none;
    min-height: 100px;
    transition: all var(--t);
    line-height: 1.8;
}
.stack-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}

.status-actions { margin-top: 10px; }
.status-actions select { min-width: 170px; }

/* ====================================================================
   35. SETTINGS
   ==================================================================== */
.settings-grid { display: grid; gap: 15px; }

.form-card { padding: 20px; }
.form-card .card-head { margin-bottom: 14px; }

/* ====================================================================
   36. FORM HINTS
   ==================================================================== */
.form-hint,
.existing-file {
    display: block;
    font-size: 10.5px;
    color: var(--muted-2);
    margin-top: 5px;
    line-height: 1.7;
}
.existing-file { color: var(--primary-dark); font-weight: 700; }

/* ====================================================================
   37. ANIMATIONS
   ==================================================================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.fa-spin { animation: spin 1s linear infinite; }

/* ====================================================================
   38. RESPONSIVE
   ==================================================================== */

/* --- Large Tablet / Small Desktop --- */
@media (max-width: 1100px) {
    .features      { grid-template-columns: repeat(2, 1fr); }
    .plan-grid     { grid-template-columns: repeat(2, 1fr); }
    .config-grid   { grid-template-columns: repeat(2, 1fr); }
    .stat-grid     { grid-template-columns: repeat(2, 1fr); }
    .panel-grid    { grid-template-columns: 1fr; }
    .footer-grid   { grid-template-columns: 1fr 1fr; }
}

/* --- Tablet / Mobile Landscape --- */
@media (max-width: 900px) {
    :root { --header-h: 68px; }

    .hero-grid,
    .shop-layout,
    .checkout-grid,
    .auth-shell,
    .two-col-layout      { grid-template-columns: 1fr; }

    .hero-card           { min-height: 340px; }
    .auth-side           { display: none; }
    .footer-grid         { grid-template-columns: 1fr 1fr; }

    /* Hide desktop nav */
    .nav-links           { display: none !important; }

    /* Show mobile menu button */
    .mobile-menu-btn     { display: inline-flex; }

    /* Hide desktop auth buttons on mobile, show in drawer */
    .auth-buttons        { display: none; }

    /* Keep cart pill visible but compact */
    .cart-pill span      { display: none; }
    .cart-pill           { padding: 9px 11px; }

    /* Sidebar drawer */
    .sidebar {
        transform: translateX(-105%);
        box-shadow: var(--shadow-lg);
    }
    .panel-rtl .sidebar  { transform: translateX(105%); }
    .sidebar.open        { transform: none; }

    .panel-main,
    .panel-rtl .panel-main { padding: 0; }

    .mobile-menu         { display: inline-grid; place-items: center; }

    .hero                { padding-top: 44px; }
    .hero-points         { grid-template-columns: 1fr; }

    .config-grid         { grid-template-columns: 1fr; }
    .form-grid-3         { grid-template-columns: 1fr 1fr; }
    .page-heading        { align-items: flex-start; flex-direction: column; }
    .ticket-panel        { min-height: 0; }

    .search .input       { max-width: 100%; }
    .mini-grid           { grid-template-columns: 1fr 1fr; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
    :root {
        --header-h: 62px;
        --sidebar: 260px;
    }

    .container          { width: min(100% - 20px, 1180px); }
    .section            { padding: 42px 0; }
    .section-head       { display: block; }
    .section-head h2    { font-size: 24px; margin-bottom: 5px; }
    .hero h1            { font-size: 34px; letter-spacing: -1px; }
    .hero p             { font-size: 14.5px; }

    .features,
    .plan-grid,
    .faq-grid,
    .config-grid        { grid-template-columns: 1fr; }

    .cta                { display: block; padding: 25px; }
    .cta .btn           { margin-top: 16px; width: 100%; }

    .form-grid,
    .form-grid-3        { grid-template-columns: 1fr; }

    .page               { padding-top: 20px; }
    .panel-page         { padding: 17px; }
    .panel-top          { padding: 10px 13px; }
    .panel-title h1     { font-size: 18px; }
    .panel-title p      { display: none; }

    .stat-grid          { grid-template-columns: 1fr 1fr; }
    .stat               { padding: 14px; }
    .stat .value        { font-size: 20px; }
    .stat .icon         { width: 40px; height: 40px; font-size: 16px; }

    .shop-layout,
    .checkout-grid      { gap: 12px; }
    .cart-item          { grid-template-columns: 1fr; gap: 12px; }
    .summary            { position: static; }
    .cart-item .qty     { justify-content: center; width: max-content; }

    .auth-main          { padding: 22px; }
    .auth-form h2       { font-size: 22px; }

    .panel-top-actions .hide-mobile { display: none; }
    .ticket             { display: block; }
    .ticket-actions     { margin-top: 10px; }
    .bubble             { max-width: 92%; }

    .mini-grid          { grid-template-columns: 1fr; }
    .footer-grid        { grid-template-columns: 1fr; gap: 26px; }
    .footer-bottom-inner{ flex-direction: column; text-align: center; }

    .pagination a       { min-width: 32px; height: 32px; }

    .modal-box          { border-radius: 18px; }
    .modal-head         { padding: 14px 16px; }
    .modal-body         { padding: 16px; }

    .result-card        { padding: 26px 20px; }
    .result-icon        { font-size: 46px; }

    /* Header adjustments */
    .navbar             { gap: 10px; }
    .brand              { font-size: 15px; gap: 9px; }
    .brand-mark         { width: 38px; height: 38px; font-size: 16px; }
    .brand span:last-child { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .header-actions     { gap: 6px; }
    .mobile-menu-btn    { width: 40px; height: 40px; font-size: 15px; }

    /* Mobile menu drawer */
    .mobile-menu-panel  { width: min(300px, 88vw); }

    /* Hero adjustments */
    .hero-actions .btn  { width: 100%; justify-content: center; }

    /* Footer */
    .footer-socials     { justify-content: center; }
    .footer-brand-desc  { text-align: center; margin-inline: auto; }
    .footer-col-title   { justify-content: center; }
    .footer-col-title::after { right: 50%; transform: translateX(50%); }
    .footer-links       { justify-items: center; }
    .footer-contact li  { justify-content: center; }
}

/* --- Very Small Mobile --- */
@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr; }
    .mini-grid { grid-template-columns: 1fr; }
    .hero h1   { font-size: 28px; }
    .btn       { padding: 10px 14px; font-size: 12.5px; }
    .brand span:last-child { max-width: 80px; }
}

/* ====================================================================
   39. PRINT
   ==================================================================== */
@media print {
    .site-header,
    .sidebar,
    .panel-top,
    .panel-footer,
    .btn,
    .scroll-top-btn,
    .mobile-nav-btn,
    .mobile-menu-btn,
    .mobile-menu-drawer { display: none !important; }

    body { background: #fff; }

    .panel-main,
    .panel-rtl .panel-main { padding: 0 !important; }

    .modal-box { box-shadow: none; border: 1px solid #ddd; }
}

/* ====================================================================
   40. REDUCED MOTION
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ====================================================================
   41. PANEL — PAGE-LEVEL LAYOUTS & COMPONENTS (v4 additions)
   ==================================================================== */

/* ---------- Wrap برای همه‌ی صفحات پنل ---------- */
.ud-wrap, .uc-wrap, .uo-wrap, .up-wrap, .un-wrap, .ur-wrap, .ut-wrap,
.cfg-wrap, .cpn-wrap, .pl-wrap, .us-wrap, .ord-wrap, .tk-wrap,
.logs-wrap, .set-wrap, .apps-wrap, .dash {
    display: grid;
    gap: 18px;
}

/* ====================================================================
   41.1 — KPI / STAT GRIDS (پنل‌ها)
   ==================================================================== */
.stats-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.stats-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.stats-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* ---------- Stat Box (پنل ادمین) ---------- */
.stat-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -18px rgba(15,23,42,.25);
    transition: transform .25s, box-shadow .25s;
    text-decoration: none;
    color: inherit;
}
.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -10px rgba(15,23,42,.35);
}
.stat-box .si {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
}
.stat-box .si.s1 { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.stat-box .si.s2 { background: linear-gradient(135deg,#10b981,#059669); }
.stat-box .si.s3 { background: linear-gradient(135deg,#f59e0b,#ea580c); }
.stat-box .si.s4 { background: linear-gradient(135deg,#8b5cf6,#d946ef); }
.stat-box .si.s5 { background: linear-gradient(135deg,#0ea5e9,#0284c7); }
.stat-box .sv { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1; }
.stat-box .sv small { font-size: 10.5px; color: var(--muted-2); font-weight: 700; }
.stat-box .sl { font-size: 10.5px; color: var(--muted); margin-top: 3px; }

/* ====================================================================
   41.2 — PANEL CARDS (کارت‌های سفید استاندارد)
   ==================================================================== */
.panel-card,
.card-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow: hidden;
}

.panel-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--surface-2), #eef2ff);
}
.panel-head h3 {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-head .muted {
    font-size: 11px;
    color: var(--muted);
    margin: 2px 0 0;
}

.panel-body { padding: 18px 20px; }

/* ====================================================================
   41.3 — TABLE CARD (جدول‌های پنل)
   ==================================================================== */
.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.tc-head {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
    gap: 10px;
}
.tc-head h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}
.tc-head .muted {
    font-size: 11px;
    color: var(--muted);
}

/* ====================================================================
   41.4 — FILTER BAR & CHIP TABS
   ==================================================================== */
.filter-bar {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}
.filter-bar form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-bar .input,
.filter-bar .select { min-height: 38px; }

.chip-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.chip-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text-2);
    text-decoration: none;
    transition: all var(--t);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}
.chip-tab:hover {
    background: var(--border);
    color: var(--text);
}
.chip-tab.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px -6px rgba(99,102,241,.6);
}
.chip-tab .cnt,
.chip-tab .chip-count {
    background: rgba(255,255,255,.25);
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    min-width: 18px;
    text-align: center;
}
.chip-tab:not(.active) .cnt,
.chip-tab:not(.active) .chip-count {
    background: var(--border);
    color: var(--muted);
}

/* ====================================================================
   41.5 — BUTTONS (mini, actions)
   ==================================================================== */
.btn-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--t);
    white-space: nowrap;
}
.btn-mini:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    color: var(--text);
}
.btn-mini.primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 14px -6px rgba(99,102,241,.6);
}
.btn-mini.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(99,102,241,.85);
    color: #fff;
}
.btn-mini.ghost  { background: var(--surface-2); }
.btn-mini.danger {
    background: linear-gradient(135deg,#ef4444,#dc2626);
    color: #fff;
    border-color: transparent;
}
.btn-mini.danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(239,68,68,.7);
    color: #fff;
}

/* ---------- Icon Button ---------- */
.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: inline-grid;
    place-items: center;
    color: var(--text-2);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--t);
    font-size: 12px;
    padding: 0;
}
.btn-icon:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    transform: translateY(-1px);
}
.btn-icon.edit:hover   { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.btn-icon.copy:hover,
.btn-icon.dl:hover,
.btn-icon.view:hover   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.btn-icon.star:hover   { background: #fef3c7; color: #d97706; border-color: #fcd34d; }
.btn-icon.star.active  { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; border-color: #d97706; }
.btn-icon.toggle:hover { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.btn-icon.dup:hover    { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.btn-icon.del:hover    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ---------- Row Actions ---------- */
.row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* ====================================================================
   41.6 — STATUS PILLS (پنل‌ها)
   ==================================================================== */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status-pill.ok        { background: var(--success-soft); color: var(--success-text); }
.status-pill.soon      { background: var(--warning-soft); color: var(--warning-text); }
.status-pill.expired   { background: var(--danger-soft);  color: var(--danger-text); }
.status-pill.off       { background: var(--surface-3);    color: var(--muted); }
.status-pill.reserved  { background: var(--warning-soft); color: var(--warning-text); }
.status-pill.used      { background: var(--info-soft);    color: var(--info-text); }
.status-pill.s-pending   { background: var(--warning-soft); color: var(--warning-text); }
.status-pill.s-paid      { background: var(--info-soft);    color: var(--info-text); }
.status-pill.s-verified  { background: var(--success-soft); color: var(--success-text); }
.status-pill.s-failed    { background: var(--danger-soft);  color: var(--danger-text); }
.status-pill.s-cancelled { background: var(--surface-3);    color: var(--muted); }

/* ====================================================================
   41.7 — PRIORITY & MINI BADGES (تیکت‌ها)
   ==================================================================== */
.prio-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid;
    white-space: nowrap;
}
.mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.mini-badge.open        { background: var(--warning-soft); color: var(--warning-text); }
.mini-badge.in_progress { background: var(--info-soft);    color: var(--info-text); }
.mini-badge.answered    { background: var(--success-soft); color: var(--success-text); }
.mini-badge.closed      { background: var(--surface-3);    color: var(--muted); }

/* ====================================================================
   41.8 — USER CHIP & AVATAR
   ==================================================================== */
.user-chip,
.user-chip-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.user-avatar-sm,
.user-avatar-cell {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
}
.user-avatar-sm.a2, .user-avatar-cell.a2 { background: linear-gradient(135deg,#10b981,#059669); }
.user-avatar-sm.a3, .user-avatar-cell.a3 { background: linear-gradient(135deg,#f59e0b,#ea580c); }
.user-avatar-sm.a4, .user-avatar-cell.a4 { background: linear-gradient(135deg,#0ea5e9,#0284c7); }
.user-avatar-sm.a5, .user-avatar-cell.a5 { background: linear-gradient(135deg,#ec4899,#be185d); }
.user-avatar-sm.a6, .user-avatar-cell.a6 { background: linear-gradient(135deg,#8b5cf6,#7c3aed); }

.user-name-cell,
.user-chip .uc-name { font-size: 12.5px; font-weight: 800; color: var(--text); line-height: 1.3; }
.user-sub-cell,
.user-chip .uc-sub  { font-size: 10.5px; color: var(--muted-2); }

/* ====================================================================
   41.9 — ROLE BADGES
   ==================================================================== */
.role-badge,
.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text-2);
}
.role-badge.admin,
.role-pill.role-admin   { background: var(--danger-soft); color: var(--danger-text); }
.role-badge.support,
.role-pill.role-support { background: var(--info-soft); color: var(--info-text); }
.role-pill.role-user    { background: var(--surface-3); color: var(--muted); }

/* ====================================================================
   41.10 — TABLE (data-table پنل)
   ==================================================================== */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
    background: var(--surface-2);
    font-size: 11px;
    color: var(--muted);
    font-weight: 700;
    text-align: right;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12.5px;
    color: var(--text);
    vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ====================================================================
   41.11 — THREAD & MESSAGES (تیکت)
   ==================================================================== */
.thread-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(135deg, var(--surface-2), #eef2ff);
}
.thread-head .th-subject {
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.thread-head .th-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--muted);
}
.thread-head .th-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 11px;
}
.thread-body {
    padding: 20px 22px;
    overflow-y: auto;
    display: grid;
    gap: 14px;
    background: var(--surface-2);
}

.reply-form {
    padding: 16px 22px;
    border-top: 1px solid var(--border-soft);
    background: #fff;
}
.reply-form textarea {
    width: 100%;
    border-radius: 13px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    min-height: 100px;
    resize: vertical;
    line-height: 1.8;
    box-sizing: border-box;
    transition: all var(--t);
    outline: none;
}
.reply-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}
.reply-form .rf-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.reply-form .rf-hint {
    font-size: 10.5px;
    color: var(--muted-2);
    margin-right: auto;
}

.btn-send {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 11px;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all var(--t);
    box-shadow: 0 8px 18px -8px rgba(99,102,241,.7);
}
.btn-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(99,102,241,.85);
}

.thread-actions {
    padding: 12px 22px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
}
.status-select-wrap { display: inline-flex; gap: 6px; align-items: center; }
.status-select {
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--t);
    outline: none;
}
.status-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }

/* ====================================================================
   41.12 — ORDER DETAIL (mini grid, item card, cfg card)
   ==================================================================== */
.mini-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.mini-info,
.mini-card-info {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
}
.mini-info small,
.mini-card-info small {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.mini-info b,
.mini-card-info b {
    font-size: 13px;
    color: var(--text);
    font-weight: 800;
    word-break: break-word;
}
.mini-info b.small,
.mini-card-info b.small {
    font-size: 11.5px;
    direction: ltr;
    text-align: right;
    display: block;
}

.section-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}
.section-title:first-of-type { margin-top: 0; }

.item-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.item-card .it-icon,
.item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff, #c7d2fe);
    color: #4338ca;
    display: grid;
    place-items: center;
    font-size: 18px;
}
.item-card .it-title,
.item-title { font-size: 13px; font-weight: 800; color: var(--text); }
.item-card .it-meta,
.item-meta  { font-size: 11px; color: var(--muted); margin-top: 3px; }
.item-card .it-price,
.item-price {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}
.item-card .it-price small,
.item-price small { font-size: 10px; color: var(--muted-2); font-weight: 600; }

.cfg-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #a7f3d0;
    border-radius: 13px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.cfg-card.expired {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #fecaca;
}
.cfg-card .cf-name { font-size: 13px; font-weight: 800; color: var(--text); }
.cfg-card .cf-meta { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.cfg-card .cf-actions { display: flex; gap: 6px; }

/* ====================================================================
   41.13 — ORDER & CONFIG TABLE CELLS
   ==================================================================== */
.order-code,
.order-id,
.order-id-cell,
.order-code-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-weight: 800;
    color: #4338ca;
    font-size: 12px;
    text-decoration: none;
    transition: all var(--t);
}
.order-code:hover,
.order-id:hover { text-decoration: underline; }
.order-id-cell .oid-copy {
    font-size: 10px;
    color: #6366f1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.order-id-cell:hover .oid-copy { opacity: 1; }

.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
}
.badge-platform {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border);
}
.chip-version {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 800;
    font-size: 11.5px;
    border: 1px solid #c7d2fe;
}
.chip-version.featured {
    background: linear-gradient(135deg,#fef3c7,#fde68a);
    color: #92400e;
    border-color: #fcd34d;
}
.src-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.src-badge.internal { background: #ecfeff; color: #0e7490; }
.src-badge.external { background: #fef3c7; color: #92400e; }

/* ====================================================================
   41.14 — PROGRESS BARS
   ==================================================================== */
.assign-cell { min-width: 130px; }
.assign-top {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    margin-bottom: 4px;
    color: var(--muted);
    font-weight: 700;
}
.assign-bar {
    height: 6px;
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
}
.assign-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,#10b981,#059669);
    transition: width .4s;
}
.assign-fill.partial { background: linear-gradient(90deg,#f59e0b,#ea580c); }
.assign-fill.empty   { background: linear-gradient(90deg,#ef4444,#dc2626); }

.inv-progress { display: grid; gap: 14px; }
.inv-row { display: grid; gap: 6px; }
.inv-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.inv-top .name { font-weight: 700; color: var(--text-2); }
.inv-top .val  { font-weight: 800; color: var(--text); }
.inv-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.inv-fill { height: 100%; border-radius: 999px; transition: width .5s; }
.inv-fill.green  { background: linear-gradient(90deg,#10b981,#059669); }
.inv-fill.blue   { background: linear-gradient(90deg,#3b82f6,#6366f1); }
.inv-fill.orange { background: linear-gradient(90deg,#f59e0b,#ea580c); }
.inv-fill.gray   { background: linear-gradient(90deg,#94a3b8,#64748b); }

/* ====================================================================
   41.15 — ADMIN DASHBOARD (welcome, kpi, mini-row)
   ==================================================================== */
.welcome {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #312e81 100%);
    border-radius: 20px;
    padding: 22px 24px;
    color: #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}
.welcome::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.35), transparent 70%);
    pointer-events: none;
}
.welcome::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.3), transparent 70%);
    pointer-events: none;
}
.welcome .wc-hi { font-size: 19px; font-weight: 900; color: #fff; margin: 0; position: relative; }
.welcome .wc-sub { font-size: 12px; color: #cbd5e1; margin: 4px 0 0; position: relative; }
.welcome .wc-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.welcome .wc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    transition: all var(--t);
}
.welcome .wc-btn:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); color: #fff; }
.welcome .wc-btn.primary { background: linear-gradient(135deg,#6366f1,#8b5cf6); border-color: transparent; }

.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.kpi {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 30px -22px rgba(15,23,42,.35);
    transition: transform .25s, box-shadow .25s;
}
.kpi:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -18px rgba(15,23,42,.4); }
.kpi::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--kpi-tint, rgba(99,102,241,.15)), transparent 70%);
    pointer-events: none;
}
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.kpi .kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
}
.kpi .kpi-icon.grad-1 { background: linear-gradient(135deg,#10b981,#059669); }
.kpi .kpi-icon.grad-2 { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.kpi .kpi-icon.grad-3 { background: linear-gradient(135deg,#f59e0b,#ea580c); }
.kpi .kpi-icon.grad-4 { background: linear-gradient(135deg,#8b5cf6,#d946ef); }
.kpi .kpi-growth {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
}
.kpi .kpi-growth.up   { background: #dcfce7; color: #166534; }
.kpi .kpi-growth.down { background: #fef2f2; color: #991b1b; }
.kpi .kpi-growth.flat { background: var(--surface-3); color: var(--muted); }
.kpi .kpi-value { font-size: 22px; font-weight: 900; color: var(--text); line-height: 1.15; letter-spacing: -.3px; position: relative; }
.kpi .kpi-value small { font-size: 11px; font-weight: 700; color: var(--muted-2); margin-right: 4px; }
.kpi .kpi-label { font-size: 11.5px; color: var(--muted); font-weight: 600; position: relative; }
.kpi .kpi-sub   { font-size: 10.5px; color: var(--muted-2); margin-top: -4px; position: relative; }

.mini-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.mini-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: all var(--t);
}
.mini-card:hover { border-color: #c7d2fe; background: #fafaff; }
.mini-card .mi-left { display: flex; align-items: center; gap: 10px; }
.mini-card .mi-dot {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 14px;
}
.mini-card .mi-dot.d1 { background: #eef2ff; color: #6366f1; }
.mini-card .mi-dot.d2 { background: #ecfdf5; color: #059669; }
.mini-card .mi-dot.d3 { background: #fff7ed; color: #ea580c; }
.mini-card .mi-dot.d4 { background: #fdf4ff; color: #a21caf; }
.mini-card .mi-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.mini-card .mi-val   { font-size: 15px; font-weight: 800; color: var(--text); }

/* Chart */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 200px;
    padding: 20px 6px 0;
}
.chart .bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
    position: relative;
    transition: transform .2s;
}
.chart .bar-wrap:hover { transform: translateY(-3px); }
.chart .bar {
    width: 100%;
    max-width: 46px;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 14px -6px rgba(99,102,241,.6);
    position: relative;
    transition: all .3s;
    min-height: 4px;
}
.chart .bar-wrap.current .bar {
    background: linear-gradient(180deg, #10b981, #059669);
    box-shadow: 0 4px 14px -6px rgba(16,185,129,.6);
}
.chart .bar .bar-value {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s;
}
.chart .bar-wrap:hover .bar-value { opacity: 1; }
.chart .bar-label { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.app-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.app-chip i { font-size: 11px; }

.ticket-highlight {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ticket-highlight .ti {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background: linear-gradient(135deg,#f59e0b,#ea580c);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
}
.ticket-highlight .tv { font-size: 20px; font-weight: 900; color: #78350f; }
.ticket-highlight .tl { font-size: 11px; color: #92400e; font-weight: 600; }

.empty-mini {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted-2);
    font-size: 12px;
}
.empty-mini i {
    font-size: 26px;
    color: var(--border-2);
    display: block;
    margin-bottom: 8px;
}
.empty-mini a { color: #4338ca; font-weight: 800; text-decoration: none; }
.empty-mini a:hover { text-decoration: underline; }

/* ====================================================================
   41.16 — CONFIG CARD (user/configs.php)
   ==================================================================== */
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.config-card.status-active  { border-right: 3px solid var(--success); }
.config-card.status-soon    { border-right: 3px solid var(--warning); }
.config-card.status-expired { border-right: 3px solid var(--danger); opacity: .82; }
.config-card.status-revoked { border-right: 3px solid var(--muted-2); opacity: .7; }

.cc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.cc-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cc-order {
    font-size: 10.5px;
    color: var(--muted-2);
    margin-top: 3px;
    font-family: var(--font-mono);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cc-order a { color: #4338ca; text-decoration: none; font-weight: 700; }
.cc-order a:hover { text-decoration: underline; }

.cc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
}
.cc-badge.type    { border: 1px solid; }
.cc-badge.meta    { background: var(--surface-3); color: var(--text-2); }
.cc-badge.country { background: #eef2ff; color: #4338ca; }

.cc-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: var(--surface-2);
    border-radius: 12px;
    padding: 10px;
}
.cc-meta > div { text-align: center; }
.cc-meta small {
    display: block;
    font-size: 10px;
    color: var(--muted-2);
    font-weight: 700;
    margin-bottom: 3px;
}
.cc-meta b {
    font-size: 12px;
    color: var(--text);
    font-weight: 800;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-expiry { display: grid; gap: 5px; }
.cc-expiry .exp-top {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 700;
}
.cc-expiry .exp-top b { color: var(--text); }
.cc-expiry-bar {
    height: 5px;
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
}
.cc-expiry-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,#10b981,#059669);
    transition: width .4s;
}
.cc-expiry-fill.warn   { background: linear-gradient(90deg,#f59e0b,#ea580c); }
.cc-expiry-fill.danger { background: linear-gradient(90deg,#ef4444,#b91c1c); }
.cc-expiry-fill.gray   { background: var(--border-2); }

.cc-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--border-soft);
}
.cc-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--t);
    border: 1px solid transparent;
    white-space: nowrap;
    min-height: 40px;
}
.cc-btn-primary {
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(99,102,241,.6);
}
.cc-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(99,102,241,.85);
    color: #fff;
}
.cc-btn-secondary {
    background: #fff;
    color: var(--text-2);
    border-color: var(--border);
}
.cc-btn-secondary:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-2);
}
.cc-btn:disabled,
.cc-btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}
.cc-btn.disabled:hover { transform: none; }

/* ====================================================================
   41.17 — WELCOME USER (user/index.php)
   ==================================================================== */
.welcome-user {
    background:
        radial-gradient(circle at 85% 15%, rgba(139,92,246,.4), transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(59,130,246,.35), transparent 55%),
        linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    border-radius: 22px;
    padding: 24px 26px;
    color: #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.welcome-user::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.25), transparent 70%);
    pointer-events: none;
}
.welcome-user .wu-left {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    min-width: 0;
}
.welcome-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 14px 30px -12px rgba(99,102,241,.9);
    flex-shrink: 0;
}
.welcome-user .wu-name { font-size: 20px; font-weight: 900; color: #fff; margin: 0; line-height: 1.3; }
.welcome-user .wu-sub { font-size: 12.5px; color: #cbd5e1; margin: 5px 0 0; }
.welcome-user .wu-sub b { color: #fff; }
.welcome-user .wu-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
}
.wu-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    transition: all var(--t);
}
.wu-btn:hover {
    background: rgba(255,255,255,.2);
    transform: translateY(-1px);
    color: #fff;
}
.wu-btn.primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    box-shadow: 0 8px 20px -8px rgba(99,102,241,.8);
}

/* Alert - highlighted */
.ud-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
    animation: slideDown .4s cubic-bezier(.2,.9,.3,1.05);
}
.ud-alert .ua-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 17px;
}
.ud-alert .ua-text { flex: 1; min-width: 0; }
.ud-alert .ua-text b { color: #78350f; }
.ud-alert .ua-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fff;
    color: #92400e;
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid #fde68a;
    transition: all var(--t);
    white-space: nowrap;
}
.ud-alert .ua-action:hover { background: #fffbeb; }

/* ====================================================================
   41.18 — NOTIFICATIONS (user)
   ==================================================================== */
.notif-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow: hidden;
}
.notif-list { display: grid; }
.notif-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    transition: background .15s;
    position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread {
    background: linear-gradient(90deg, #f0fdfa 0%, #ecfeff 50%, #f0fdfa 100%);
    border-right: 3px solid var(--primary);
}
.notif-item.unread::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(16,185,129,.15);
}
.notif-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 17px;
    flex-shrink: 0;
    align-self: flex-start;
}
.notif-body { min-width: 0; }
.notif-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.notif-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    line-height: 1.5;
}
.notif-item.unread .notif-title { color: #065f46; }
.notif-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--muted-2);
    font-weight: 700;
    white-space: nowrap;
}
.notif-message {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.9;
    margin: 0;
    word-break: break-word;
}
.notif-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 800;
    color: #4338ca;
    margin-top: 8px;
    text-decoration: none;
    transition: color .18s;
}
.notif-link:hover { color: #6366f1; text-decoration: underline; }
.notif-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 6px;
    vertical-align: middle;
}
.notif-tag.global  { background: #eef2ff; color: #4338ca; }
.notif-tag.personal{ background: var(--surface-3); color: var(--muted); }
.notif-tag.unread  { background: var(--success-soft); color: var(--success-text); }
.notif-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    align-self: flex-start;
    flex-wrap: wrap;
}
.notif-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    color: var(--text-2);
    display: grid;
    place-items: center;
    font-size: 12px;
    transition: all var(--t);
    font-family: inherit;
    flex-shrink: 0;
    padding: 0;
}
.notif-btn:hover { background: var(--surface-2); border-color: var(--border-2); transform: translateY(-1px); }
.notif-btn.read:hover   { background: var(--success-soft); color: var(--success-text); border-color: var(--primary-border); }
.notif-btn.delete:hover { background: var(--danger-soft);  color: var(--danger-text);  border-color: #fecaca; }

/* ====================================================================
   41.19 — REFERRAL (user/referral.php)
   ==================================================================== */
.referral-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 15%, rgba(139,92,246,.5), transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(16,185,129,.35), transparent 55%),
        linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    border-radius: 24px;
    padding: 28px;
    color: #e2e8f0;
}
.referral-hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.3), transparent 70%);
    pointer-events: none;
}
.referral-hero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,.2), transparent 70%);
    pointer-events: none;
}
.rh-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
    gap: 28px;
    align-items: center;
    position: relative;
}
.rh-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    box-shadow: 0 8px 20px -8px rgba(16,185,129,.8);
    margin-bottom: 16px;
}
.rh-title {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    line-height: 1.4;
    margin: 0 0 10px;
}
.rh-title b {
    background: linear-gradient(135deg, #a5b4fc, #d946ef);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rh-desc {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 2;
    margin: 0 0 20px;
    max-width: 480px;
}
.rh-code-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.08);
    border: 1.5px dashed rgba(165,180,252,.5);
    border-radius: 14px;
    padding: 14px 16px;
    backdrop-filter: blur(8px);
    margin-bottom: 12px;
}
.rh-code-label {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}
.rh-code-value {
    font-family: var(--font-mono);
    font-weight: 900;
    font-size: 20px;
    color: #fff;
    letter-spacing: 2px;
    direction: ltr;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rh-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all .18s;
    box-shadow: 0 6px 14px -6px rgba(99,102,241,.9);
    flex-shrink: 0;
    white-space: nowrap;
}
.rh-copy-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(99,102,241,1); }
.rh-link-box { display: flex; gap: 8px; align-items: stretch; }
.rh-link-box input {
    flex: 1;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: #e2e8f0;
    padding: 0 14px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    direction: ltr;
    text-align: left;
    backdrop-filter: blur(8px);
    box-sizing: border-box;
}
.rh-link-box input:focus { outline: none; border-color: #a5b4fc; }

.rh-qr-card {
    background: #fff;
    border-radius: 20px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
}
.rh-qr-card h4 {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 800;
    margin: 0 0 4px;
}
.rh-qr-card p { font-size: 10.5px; color: var(--muted-2); margin: 0 0 12px; }
.rh-qr-box {
    width: 100%;
    aspect-ratio: 1;
    max-width: 220px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    display: grid;
    place-items: center;
    padding: 12px;
    border: 1.5px dashed var(--border);
}
.rh-qr-box canvas,
.rh-qr-box img { display: block; width: 100%; height: auto; }
.rh-qr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--muted-2);
    font-size: 11.5px;
}
.rh-qr-loading i { font-size: 24px; color: #6366f1; }
.rh-share-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}
.rh-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s;
    border: none;
    white-space: nowrap;
}
.rh-share-btn.telegram { background: linear-gradient(135deg,#0ea5e9,#0284c7); color: #fff; }
.rh-share-btn.whatsapp { background: linear-gradient(135deg,#10b981,#059669); color: #fff; }
.rh-share-btn.copy     { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; }
.rh-share-btn:hover { transform: translateY(-2px); }
.rh-share-btn i { font-size: 12px; }

.how-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}
.how-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 16px;
    text-align: center;
    position: relative;
    transition: all .18s;
}
.how-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -20px rgba(15,23,42,.3);
    border-color: #c7d2fe;
}
.how-num {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    box-shadow: 0 8px 18px -8px rgba(99,102,241,.8);
}
.how-card:nth-child(2) .how-num { background: linear-gradient(135deg, #0ea5e9, #0284c7); box-shadow: 0 8px 18px -8px rgba(14,165,233,.8); }
.how-card:nth-child(3) .how-num { background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 8px 18px -8px rgba(245,158,11,.8); }
.how-card:nth-child(4) .how-num { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 18px -8px rgba(16,185,129,.8); }
.how-card h4 { font-size: 13px; font-weight: 800; color: var(--text); margin: 0 0 5px; }
.how-card p { font-size: 11.5px; color: var(--muted); line-height: 1.8; margin: 0; }

/* ====================================================================
   41.20 — PROFILE (user/profile.php)
   ==================================================================== */
.up-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 18px;
    align-items: start;
}
.profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.profile-cover {
    height: 100px;
    background:
        radial-gradient(circle at 30% 30%, rgba(139,92,246,.5), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(59,130,246,.4), transparent 55%),
        linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    position: relative;
}
.profile-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: .4;
}
.profile-avatar-wrap {
    position: relative;
    padding: 0 20px;
    margin-top: -40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}
.profile-avatar {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    box-shadow: 0 14px 30px -10px rgba(99,102,241,.9), 0 0 0 4px #fff;
    border: 1px solid #eef2ff;
}
.profile-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: var(--surface-3);
    color: var(--muted);
    margin-bottom: 4px;
}
.profile-info { padding: 0 20px 20px; }
.profile-name { font-size: 17px; font-weight: 900; color: var(--text); margin: 0 0 3px; line-height: 1.3; }
.profile-username { font-size: 12px; color: var(--muted-2); margin: 0 0 14px; font-family: var(--font-mono); }
.profile-progress {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 14px;
}
.profile-progress .pp-top {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 7px;
}
.profile-progress .pp-top b { color: var(--text); }
.profile-progress .pp-bar {
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.profile-progress .pp-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width .4s;
}
.profile-progress .pp-fill.warn   { background: linear-gradient(90deg, #f59e0b, #ea580c); }
.profile-progress .pp-fill.danger { background: linear-gradient(90deg, #ef4444, #dc2626); }
.profile-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.profile-stat {
    background: var(--surface-2);
    border-radius: 11px;
    padding: 10px 11px;
    text-align: center;
}
.profile-stat small {
    display: block;
    font-size: 10px;
    color: var(--muted-2);
    font-weight: 700;
    margin-bottom: 3px;
}
.profile-stat b { font-size: 14px; color: var(--text); font-weight: 900; }
.profile-stat b small {
    display: inline;
    font-size: 9.5px;
    color: var(--muted-2);
    margin: 0 2px 0 0;
    font-weight: 600;
}

/* Password strength */
.pw-strength { margin-top: 4px; display: grid; gap: 5px; }
.pw-strength-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.pw-strength-bar span {
    height: 5px;
    border-radius: 999px;
    background: var(--border);
    transition: background .25s;
}
.pw-strength-bar span.active-weak   { background: #ef4444; }
.pw-strength-bar span.active-fair   { background: #f59e0b; }
.pw-strength-bar span.active-good   { background: #3b82f6; }
.pw-strength-bar span.active-strong { background: #10b981; }
.pw-strength-text {
    font-size: 10.5px;
    color: var(--muted-2);
    font-weight: 700;
    text-align: right;
}
.pw-strength-text.weak   { color: #dc2626; }
.pw-strength-text.fair   { color: #d97706; }
.pw-strength-text.good   { color: #2563eb; }
.pw-strength-text.strong { color: #059669; }

.pw-wrap { position: relative; }
.pw-wrap .input { padding-left: 44px; }
.pw-toggle {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    transition: all .18s;
}
.pw-toggle:hover { background: var(--surface-3); color: var(--text-2); }

/* Security list */
.security-list { display: grid; gap: 10px; }
.security-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: var(--surface-2);
    border-radius: 12px;
    font-size: 12px;
}
.security-item .si-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: #eef2ff;
    color: #4338ca;
}
.security-item .si-info { flex: 1; min-width: 0; }
.security-item .si-info small {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 2px;
}
.security-item .si-info b {
    display: block;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 800;
    direction: ltr;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.logout-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 11px;
    background: #fff;
    color: var(--danger-text);
    border: 1px solid #fecaca;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all .18s;
    width: 100%;
    justify-content: center;
}
.logout-all-btn:hover {
    background: var(--danger-soft);
    border-color: #fca5a5;
    transform: translateY(-1px);
}

/* ====================================================================
   41.21 — COUPON (admin/coupons.php)
   ==================================================================== */
.code-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(135deg, var(--surface-2), #eef2ff);
    border: 1.5px dashed #c7d2fe;
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 14px;
}
.code-preview .cp-label { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .3px; }
.code-preview .cp-code  {
    font-family: var(--font-mono);
    font-weight: 800;
    color: #4338ca;
    font-size: 15px;
    letter-spacing: 1px;
}
.code-preview .cp-hint { font-size: 10.5px; color: var(--muted-2); }

.plans-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: var(--surface-2);
}
.plans-picker label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 9px;
    background: #fff;
    border: 1.5px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    transition: all .18s;
    user-select: none;
}
.plans-picker label:has(input:checked) {
    background: linear-gradient(135deg,#eef2ff,#f5f3ff);
    border-color: #c7d2fe;
    color: #4338ca;
}

/* Coupon ticket (used in coupons.php) */
.ticket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    transition: all .2s;
    overflow: hidden;
}
.ticket:hover { box-shadow: 0 10px 24px -14px rgba(15,23,42,.25); border-color: #c7d2fe; }
.ticket::before, .ticket::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    top: 50%;
}
.ticket::before { left: -9px; transform: translateY(-50%); }
.ticket::after  { right: -9px; transform: translateY(-50%); }
.ticket.used    { border-right: 3px solid #6366f1; }
.ticket.expired { border-right: 3px solid var(--muted-2); opacity: .85; }
.ticket.inactive{ border-right: 3px solid #f59e0b; }
.ticket .tk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ticket .tk-code {
    font-family: var(--font-mono);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 1.5px;
    color: var(--text);
    background: linear-gradient(135deg,#eef2ff,#f5f3ff);
    padding: 5px 11px;
    border-radius: 9px;
    border: 1px dashed #c7d2fe;
}
.ticket .tk-title { font-size: 12px; color: var(--muted); font-weight: 600; }
.ticket .tk-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ticket .tk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--text-2);
}
.ticket .tk-badge.pct  { background: #fef3c7; color: #92400e; }
.ticket .tk-badge.fix  { background: #dcfce7; color: #166534; }
.ticket .tk-badge.first{ background: #fce7f3; color: #9d174d; }
.ticket .tk-badge.plans{ background: #e0e7ff; color: #4338ca; }
.ticket .tk-progress { margin-top: 10px; }
.ticket .tk-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.ticket .tk-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,#6366f1,#8b5cf6);
    transition: width .4s;
}
.ticket .tk-progress-text {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
}
.coupon-list { padding: 16px 18px; display: grid; gap: 12px; }

.coupon-form { display: flex; gap: 8px; align-items: stretch; }
.coupon-form input {
    flex: 1;
    height: 42px;
    border-radius: 11px;
    border: 1.5px solid var(--border);
    padding: 0 14px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text);
    background: var(--surface);
    text-transform: uppercase;
    direction: ltr;
    text-align: left;
    transition: all var(--t);
}
.coupon-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}

/* ====================================================================
   41.22 — DROP ZONE (admin/apps.php)
   ==================================================================== */
.drop-zone {
    position: relative;
    border: 2px dashed var(--border-2);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    background: var(--surface-2);
    transition: all .2s;
    cursor: pointer;
}
.drop-zone:hover,
.drop-zone.drag {
    border-color: #6366f1;
    background: #eef2ff;
}
.drop-zone input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.drop-zone .dz-icon { font-size: 22px; color: #6366f1; margin-bottom: 6px; }
.drop-zone .dz-text { font-size: 12.5px; color: var(--text-2); font-weight: 700; }
.drop-zone .dz-sub  { font-size: 10.5px; color: var(--muted-2); margin-top: 3px; }
.drop-zone .dz-file {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--success-text);
    font-weight: 700;
    display: none;
}

.platform-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-picker input { display: none; }
.platform-picker label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    transition: all .18s;
    user-select: none;
}
.platform-picker label:hover { border-color: #c7d2fe; background: #f5f3ff; }
.platform-picker input:checked + label {
    border-color: #6366f1;
    background: linear-gradient(135deg,#eef2ff,#f5f3ff);
    color: #4338ca;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

/* ====================================================================
   41.23 — SETTINGS (admin/settings.php)
   ==================================================================== */
.set-layout {
    display: grid;
    grid-template-columns: 240px minmax(0,1fr);
    gap: 18px;
    align-items: start;
}
.set-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    position: sticky;
    top: 20px;
}
.set-sidebar .ss-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 8px 10px 6px;
}
.set-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    text-decoration: none;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    border: 1px solid transparent;
    margin-bottom: 2px;
}
.set-nav-item:hover { background: var(--surface-2); color: var(--text); }
.set-nav-item.active {
    background: linear-gradient(135deg,#eef2ff,#f5f3ff);
    color: #4338ca;
    border-color: #c7d2fe;
}
.set-nav-item i { font-size: 13px; width: 18px; text-align: center; }
.set-nav-item .ni-count {
    margin-right: auto;
    font-size: 10.5px;
    font-weight: 800;
    background: var(--surface-3);
    color: var(--muted);
    padding: 1px 7px;
    border-radius: 999px;
}
.set-nav-item.active .ni-count {
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color: #fff;
}
.set-content { display: grid; gap: 16px; }
.set-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow: hidden;
    display: none;
}
.set-panel.active { display: block; animation: fadeIn .25s; }
.set-panel-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--surface-2), #eef2ff);
    gap: 12px;
    flex-wrap: wrap;
}
.set-panel-head h2 {
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.set-panel-head h2 i { font-size: 15px; }
.set-panel-head p { font-size: 11px; color: var(--muted); margin: 3px 0 0; }
.set-panel-body { padding: 20px 22px; }
.set-field {
    display: grid;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--border-soft);
}
.set-field:last-child { border-bottom: none; }
.set-field:first-child { padding-top: 0; }
.set-field .sf-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.set-field .sf-label { font-size: 13px; font-weight: 800; color: var(--text); }
.set-field .sf-key {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted-2);
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 5px;
    margin-right: 6px;
}
.set-field .sf-hint { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.7; }
.set-field .sf-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.set-field .sf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}
.set-field .sf-badge.public   { background: #dcfce7; color: #166534; }
.set-field .sf-badge.private  { background: var(--surface-3); color: var(--muted); }
.set-field .sf-badge.locked   { background: #fef3c7; color: #92400e; }

.set-input,
.set-textarea,
.set-select {
    width: 100%;
    height: 44px;
    border-radius: 11px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    padding: 0 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    transition: all var(--t);
    box-sizing: border-box;
    outline: none;
}
.set-textarea { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; line-height: 1.8; }
.set-input:focus, .set-textarea:focus, .set-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}
.set-input[dir="ltr"] { direction: ltr; text-align: left; }
.set-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 22px;
    border-top: 1px solid var(--border-soft);
    background: var(--surface-2);
    flex-wrap: wrap;
}
.set-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 8px 18px -8px rgba(99,102,241,.7);
}
.set-save-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(99,102,241,.85); }

.changes-list { display: grid; gap: 8px; padding: 16px 22px; }
.change-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 11px;
    font-size: 11.5px;
}
.change-item .ci-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #eef2ff;
    color: #4338ca;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex: 0 0 30px;
}
.change-item .ci-title { font-weight: 800; color: var(--text); }
.change-item .ci-meta  { font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
.change-item .ci-time  { margin-right: auto; font-size: 10.5px; color: var(--muted-2); }

/* ====================================================================
   41.24 — LOGS (admin/logs.php)
   ==================================================================== */
.kind-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    width: fit-content;
}
.kind-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    color: var(--muted);
    transition: all .2s;
    white-space: nowrap;
}
.kind-tab:hover { background: #fff; color: var(--text); }
.kind-tab.active {
    background: #fff;
    color: #4338ca;
    box-shadow: 0 4px 12px -6px rgba(99,102,241,.4);
}
.kind-tab i { font-size: 13px; }
.kind-tab .kind-count {
    background: #eef2ff;
    color: #4338ca;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}
.kind-tab.active .kind-count {
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color: #fff;
}

.log-table { width: 100%; border-collapse: collapse; }
.log-table thead th {
    background: var(--surface-2);
    font-size: 11px;
    color: var(--muted);
    font-weight: 700;
    text-align: right;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.log-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--text);
    vertical-align: middle;
}
.log-table tbody tr:hover { background: var(--surface-2); }
.log-table tbody tr:last-child td { border-bottom: none; }

.action-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.action-badge i { font-size: 10.5px; }
.action-badge.success { background: var(--success-soft); color: var(--success-text); }
.action-badge.info    { background: var(--info-soft);    color: var(--info-text); }
.action-badge.warning { background: var(--warning-soft); color: var(--warning-text); }
.action-badge.danger  { background: var(--danger-soft);  color: var(--danger-text); }
.action-badge.muted   { background: var(--surface-3);    color: var(--muted); }
.action-badge.default { background: #eef2ff;             color: #4338ca; }

.user-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}
.user-cell .user-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
}
.user-cell .user-avatar.a2 { background: linear-gradient(135deg,#10b981,#059669); }
.user-cell .user-avatar.a3 { background: linear-gradient(135deg,#f59e0b,#ea580c); }
.user-cell .user-avatar.a4 { background: linear-gradient(135deg,#0ea5e9,#0284c7); }
.user-cell .user-avatar.a5 { background: linear-gradient(135deg,#ec4899,#be185d); }
.user-cell .user-avatar.a6 { background: linear-gradient(135deg,#8b5cf6,#7c3aed); }
.user-cell .user-name { font-weight: 800; color: var(--text); font-size: 12px; line-height: 1.3; }
.user-cell .user-meta { font-size: 10.5px; color: var(--muted-2); }

.ip-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 7px;
    direction: ltr;
    transition: all var(--t);
    cursor: pointer;
}
.ip-badge:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

.details-cell {
    max-width: 280px;
    font-size: 11.5px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s;
}
.details-cell:hover { color: #4338ca; }
.details-cell.empty { color: var(--border-2); cursor: default; }

.modal-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border-soft);
    font-size: 12px;
}
.modal-row:last-child { border-bottom: none; }
.modal-row .mr-label { color: var(--muted); font-weight: 700; }
.modal-row .mr-value { color: var(--text); word-break: break-word; }

/* ====================================================================
   41.25 — PLANS ADMIN (admin/plans.php)
   ==================================================================== */
.form-section {
    border-top: 1px dashed var(--border);
    margin-top: 16px;
    padding-top: 14px;
}
.form-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.form-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #4338ca;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.form-section-title i { font-size: 12px; }

.preview-card {
    background: linear-gradient(135deg, var(--surface-2), #eef2ff);
    border: 1.5px dashed #c7d2fe;
    border-radius: 14px;
    padding: 14px;
    margin-top: 16px;
}
.preview-card .pc-label {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.preview-card .pc-title { font-size: 15px; font-weight: 800; color: var(--text); }
.preview-card .pc-meta  { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.preview-card .pc-price { font-size: 17px; font-weight: 900; color: #4338ca; margin-top: 6px; }

.plans-list {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    max-height: 900px;
    overflow-y: auto;
}
.plan-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    transition: all .2s;
    overflow: hidden;
}
.plan-card:hover { box-shadow: 0 10px 24px -14px rgba(15,23,42,.25); border-color: #c7d2fe; }
.plan-card.featured { border-right: 3px solid #f59e0b; }
.plan-card.inactive { opacity: .65; }
.plan-card .pc-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.plan-card .pc-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-card .pc-name { font-size: 15px; font-weight: 900; color: var(--text); }
.plan-card .pc-key {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    background: var(--surface-3);
    padding: 2px 7px;
    border-radius: 6px;
}
.plan-card .pc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
}
.pc-badge.success { background: var(--success-soft); color: var(--success-text); }
.pc-badge.primary { background: var(--info-soft);    color: var(--info-text); }
.pc-badge.warning { background: var(--warning-soft); color: var(--warning-text); }
.pc-badge.danger  { background: var(--danger-soft);  color: var(--danger-text); }
.pc-badge.info    { background: #cffafe;             color: #155e75; }
.pc-badge.purple  { background: #f3e8ff;             color: #6b21a8; }
.pc-badge.type    { background: #eef2ff;             color: #4338ca; }
.pc-badge.neutral { background: var(--surface-3);    color: var(--muted); }
.plan-card .pc-desc {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.8;
    margin: 6px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.plan-card .pc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    background: var(--surface-2);
    border-radius: 11px;
    padding: 10px 12px;
    margin: 10px 0;
}
.plan-card .pc-stat { display: flex; flex-direction: column; gap: 2px; }
.plan-card .pc-stat small { font-size: 10px; color: var(--muted-2); font-weight: 700; }
.plan-card .pc-stat b { font-size: 13px; color: var(--text); font-weight: 800; }
.plan-card .pc-stat b small { font-size: 10px; color: var(--muted-2); font-weight: 600; }
.plan-card .pc-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-card .pc-price-main { font-size: 17px; font-weight: 900; color: var(--text); }
.plan-card .pc-price-old  { font-size: 12.5px; color: var(--muted-2); text-decoration: line-through; }
.plan-card .pc-price-disc {
    font-size: 11px;
    color: var(--success-text);
    font-weight: 800;
    background: var(--success-soft);
    padding: 2px 7px;
    border-radius: 6px;
}
.plan-card .pc-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-soft);
}

/* ====================================================================
   41.26 — CONFIRM MODAL
   ==================================================================== */
.confirm-modal { max-width: 420px; text-align: center; padding: 22px; }
.confirm-modal h3 { font-size: 15px; margin: 0 0 6px; color: var(--text); }
.confirm-modal p  { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.8; }
.confirm-actions { display: flex; gap: 8px; justify-content: center; }
.confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: var(--warning-soft);
    color: #d97706;
    display: grid;
    place-items: center;
    font-size: 22px;
}
.modal-box .mi {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: var(--danger-soft);
    color: var(--danger-text);
    display: grid;
    place-items: center;
    font-size: 22px;
}
.modal-box .ma { display: flex; gap: 8px; justify-content: center; }
.modal-box h3 { font-size: 15px; margin: 0 0 6px; color: var(--text); }
.modal-box p  { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }

/* ====================================================================
   41.27 — NOTIFICATION SETTINGS AUDIT
   ==================================================================== */
.info-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}
.info-card small {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 700;
    display: block;
    margin-bottom: 3px;
}
.info-card b {
    font-size: 13px;
    color: var(--text);
    font-weight: 800;
    word-break: break-word;
}

/* ====================================================================
   41.28 — PANEL EMPTY STATES (mini)
   ==================================================================== */
.empty-mini-note {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted-2);
    font-size: 12px;
    line-height: 1.9;
}
.empty-mini-note i {
    font-size: 26px;
    color: var(--border-2);
    display: block;
    margin-bottom: 8px;
}

/* ====================================================================
   41.29 — SCROLL TOP (already in 15 but ensure)
   ==================================================================== */
.scroll-top-btn.visible { opacity: 1; visibility: visible; }

/* ====================================================================
   41.30 — MOBILE FULL RESPONSIVE ADDITIONS
   ==================================================================== */
@media (max-width: 900px) {
    .up-layout,
    .set-layout { grid-template-columns: 1fr; }
    .set-sidebar { position: static; }

    .mini-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .how-grid     { grid-template-columns: repeat(2, 1fr); }
    .kpi-row      { grid-template-columns: repeat(2, 1fr); }
    .mini-row     { grid-template-columns: repeat(2, 1fr); }

    .stats-5 { grid-template-columns: repeat(3, 1fr); }
    .stats-4 { grid-template-columns: repeat(2, 1fr); }

    .rh-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .ud-wrap, .uc-wrap, .uo-wrap, .up-wrap, .un-wrap, .ur-wrap, .ut-wrap,
    .cfg-wrap, .cpn-wrap, .pl-wrap, .us-wrap, .ord-wrap, .tk-wrap,
    .logs-wrap, .set-wrap, .apps-wrap, .dash { gap: 14px; }

    .stats-5, .stats-4, .stats-3,
    .mini-grid-4, .mini-grid,
    .how-grid, .kpi-row, .mini-row {
        grid-template-columns: 1fr;
    }
    .stats-5 { grid-template-columns: repeat(2, 1fr); }
    .stats-4 { grid-template-columns: repeat(2, 1fr); }

    .rh-grid { gap: 20px; }
    .rh-title { font-size: 22px; }
    .rh-qr-box { max-width: 180px; }
    .rh-share-row { grid-template-columns: 1fr; }

    .welcome,
    .welcome-user,
    .referral-hero {
        padding: 18px;
        border-radius: 18px;
    }
    .welcome .wc-actions,
    .welcome-user .wu-actions { width: 100%; }
    .wu-btn,
    .wc-btn { flex: 1 1 auto; justify-content: center; }

    .notif-item { grid-template-columns: 38px 1fr; }
    .notif-item .notif-actions { grid-column: 2; margin-top: 8px; }

    .thread-body { padding: 14px; }
    .reply-form { padding: 14px; }
    .thread-head { padding: 14px 16px; }
    .thread-actions { padding: 12px 14px; }

    .item-card { grid-template-columns: 40px 1fr; }
    .item-card .it-price { grid-column: 2; text-align: right; }

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

    .chart { height: 160px; }
    .chart .bar-label { font-size: 9.5px; }
}

@media (max-width: 420px) {
    .stats-5, .stats-4 { grid-template-columns: 1fr; }
    .rh-title { font-size: 20px; }
    .profile-avatar { width: 72px; height: 72px; font-size: 28px; }
    .welcome-avatar { width: 56px; height: 56px; font-size: 22px; }
    .kind-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .kind-tab { flex: 0 0 auto; }
}

/* ====================================================================
   41.31 — PANEL RESPONSIVE (<=900px)
   ==================================================================== */
@media (max-width: 900px) {
    .ut-layout,
    .uo-layout,
    .un-layout,
    .tk-layout {
        grid-template-columns: 1fr;
    }
    .panel-card { max-height: none; }
}

/* ====================================================================
   41.32 — MISC (extra helpers)
   ==================================================================== */
.counter-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--primary-border);
}

.percent-cell {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 7px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.amount-cell {
    font-weight: 800;
    color: var(--text);
    font-size: 12.5px;
}
.amount-cell.positive { color: #059669; }
.amount-cell.zero     { color: var(--border-2); }
.amount-cell small { font-size: 10px; color: var(--muted-2); font-weight: 600; }

.discount-cell { font-weight: 700; color: var(--success-text); font-size: 12px; }
.discount-cell.zero { color: var(--border-2); }

.price-cell { font-weight: 800; color: var(--text); }
.price-cell small { font-size: 10.5px; color: var(--muted-2); font-weight: 600; }

.date-cell { font-size: 11px; color: var(--muted); line-height: 1.4; }
.date-cell b { color: var(--text); font-weight: 700; }

.track-cell {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    direction: ltr;
    text-align: right;
}

.balance-cell { font-weight: 800; color: var(--text); }
.balance-cell small { font-size: 10px; color: var(--muted-2); font-weight: 600; }
.balance-cell.zero { color: var(--border-2); }