/* ============================================================
   Pack-a-Punch — Design System v3
   Brand Palette: Lime #57ff1a · Purple #8b2be2 · Near-black #090b09
   "HACK. UPGRADE. DOMINATE."
   ============================================================ */

/* ── Tokens ── */
:root {
    --bg:            #090b09;
    --bg-2:          #0d100d;
    --surface:       #111511;
    --surface-2:     #161d16;
    --surface-3:     #1c261c;
    --border:        #1f2e1f;
    --border-light:  #2e462e;

    /* Brand — Lime */
    --lime:          #57ff1a;
    --lime-dim:      rgba(87,255,26,.10);
    --lime-glow:     rgba(87,255,26,.28);

    /* Brand — Purple */
    --purple:        #8b2be2;
    --purple-dim:    rgba(139,43,226,.12);
    --purple-glow:   rgba(139,43,226,.28);
    --purple-light:  #a855f7;

    /* Accent aliases */
    --accent:        var(--lime);
    --accent-dim:    var(--lime-dim);
    --accent-2:      var(--purple);
    --accent-2-dim:  var(--purple-dim);

    /* Semantics */
    --danger:        #f43f5e;
    --danger-dim:    rgba(244,63,94,.14);
    --warn:          #f59e0b;
    --warn-dim:      rgba(245,158,11,.14);
    --success:       var(--lime);
    --success-dim:   var(--lime-dim);
    --gold:          #fbbf24;
    --gold-dim:      rgba(251,191,36,.14);

    /* Text */
    --text:          #d6f5c6;
    --text-2:        #6b9e5e;
    --text-3:        #3a5c30;

    /* Layout */
    --radius:        10px;
    --radius-sm:     6px;
    --radius-lg:     16px;
    --sidebar-w:     234px;
    --topbar-h:      56px;
    --shadow:        0 8px 32px rgba(0,0,0,.6);
    --shadow-sm:     0 2px 8px rgba(0,0,0,.4);
    --transition:    0.18s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
    font-family:'Inter', system-ui, sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.6;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    background-image:
        radial-gradient(ellipse 70% 50% at 10% 20%, rgba(87,255,26,.03) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(139,43,226,.04) 0%, transparent 60%);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--lime); }

/* ── App Shell ── */
.app-shell { display:flex; min-height:100vh; }
.main-wrap { flex:1; display:flex; flex-direction:column; min-width:0; margin-left:var(--sidebar-w); transition:margin-left var(--transition); }
.main-wrap.sidebar-collapsed { margin-left:0; }

/* ── Sidebar ── */
.sidebar {
    position:fixed; top:0; left:0; bottom:0;
    width:var(--sidebar-w);
    background:var(--bg-2);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    z-index:200;
    transition:transform var(--transition);
    overflow-y:auto; overflow-x:hidden;
}
.sidebar.collapsed { transform:translateX(-100%); }
.sidebar::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:300px;
    background:linear-gradient(180deg, rgba(87,255,26,.04) 0%, transparent 100%);
    pointer-events:none;
}

/* Sidebar logo — use actual logo image */
.sidebar-logo {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
}
.sidebar-logo-img {
    width:36px; height:36px; border-radius:8px;
    object-fit:cover;
    box-shadow:0 0 14px var(--lime-glow);
    flex-shrink:0;
}
.sidebar-logo-text {
    font-size:13.5px; font-weight:800;
    letter-spacing:-.3px;
    color:var(--lime);
    text-shadow:0 0 12px var(--lime-glow);
}
.sidebar-logo-sub { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-3); }

.sidebar-user {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px;
    margin:8px;
    border-radius:var(--radius-sm);
    background:var(--surface);
    border:1px solid var(--border);
    transition:border-color var(--transition), background var(--transition);
    text-decoration:none;
}
.sidebar-user:hover { border-color:var(--lime); background:var(--surface-2); }

.sidebar-avatar {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg, var(--lime-dim), var(--purple-dim));
    border:1.5px solid var(--lime);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:var(--lime);
    flex-shrink:0; overflow:hidden;
}
.sidebar-avatar img { width:100%; height:100%; object-fit:cover; }
.sidebar-username { font-size:12.5px; font-weight:600; color:var(--text); line-height:1.2; }

.sidebar-role-badge {
    display:inline-flex; align-items:center;
    font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    padding:2px 7px; border-radius:3px; margin-top:2px;
}
.badge-owner { background:linear-gradient(90deg,var(--lime),#22c55e); color:#000; box-shadow:0 0 10px var(--lime-glow); }
.badge-admin { background:var(--purple-dim); color:var(--purple-light); border:1px solid var(--purple); }

.sidebar-section-label {
    display:block;
    font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--text-3);
    padding:4px 18px;
}
.sidebar-nav { display:flex; flex-direction:column; gap:2px; padding:8px; flex:1; }
.sidebar-nav a {
    display:flex; align-items:center; gap:9px;
    padding:8px 10px; border-radius:var(--radius-sm);
    color:var(--text-2); font-size:13px; font-weight:500;
    text-decoration:none;
    transition:all var(--transition);
    position:relative;
}
.sidebar-nav a svg { width:16px; height:16px; flex-shrink:0; opacity:.7; transition:opacity var(--transition); }
.sidebar-nav a:hover { color:var(--text); background:var(--surface-2); }
.sidebar-nav a:hover svg { opacity:1; }
.sidebar-nav a.active {
    color:var(--lime);
    background:var(--lime-dim);
    border:1px solid rgba(87,255,26,.2);
}
.sidebar-nav a.active svg { opacity:1; color:var(--lime); }
.sidebar-nav a.active::before {
    content:''; position:absolute; left:0; top:4px; bottom:4px;
    width:2px; border-radius:99px; background:var(--lime);
    box-shadow:0 0 8px var(--lime-glow);
}
.sidebar-nav a.paid-link { color:var(--gold); }
.sidebar-nav a.paid-link:hover { background:var(--gold-dim); }
.sidebar-nav a.paid-link.active { color:var(--gold); background:var(--gold-dim); border-color:rgba(251,191,36,.2); }
.sidebar-nav a.paid-link.active::before { background:var(--gold); }

.sidebar-submit { padding:10px 10px 8px; }
.btn-submit-sidebar {
    display:flex; align-items:center; justify-content:center; gap:7px;
    width:100%; padding:9px 12px; border-radius:var(--radius-sm);
    background:var(--lime-dim); border:1px solid rgba(87,255,26,.3);
    color:var(--lime); font-size:12.5px; font-weight:700;
    text-decoration:none; transition:all var(--transition);
    letter-spacing:.3px;
}
.btn-submit-sidebar:hover { background:var(--lime); color:#000; box-shadow:0 0 20px var(--lime-glow); }

.sidebar-footer {
    display:flex; gap:12px; padding:12px 18px;
    border-top:1px solid var(--border);
}
.sidebar-footer a { font-size:11.5px; color:var(--text-3); text-decoration:none; }
.sidebar-footer a:hover { color:var(--text-2); }
.sidebar-overlay { display:none; }

/* ── Topbar ── */
.topbar {
    position:sticky; top:0; z-index:100;
    height:var(--topbar-h);
    display:flex; align-items:center; gap:12px;
    padding:0 20px;
    background:rgba(9,11,9,.88);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    box-shadow:0 1px 0 rgba(87,255,26,.07);
}
.mobile-menu-btn { display:none; }

.topbar-search {
    flex:1; max-width:420px;
    position:relative;
    display:flex; align-items:center;
}
.topbar-search-icon {
    position:absolute; left:12px;
    color:var(--text-3); pointer-events:none;
}
.topbar-search input {
    width:100%; height:34px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:0 12px 0 34px;
    font-size:13px; color:var(--text);
    font-family:inherit;
    transition:border-color var(--transition), box-shadow var(--transition);
    outline:none;
}
.topbar-search input::placeholder { color:var(--text-3); }
.topbar-search input:focus {
    border-color:var(--lime);
    box-shadow:0 0 0 3px var(--lime-dim);
}
.topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; }

.topbar-icon-btn {
    width:34px; height:34px; border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid transparent;
    color:var(--text-2); cursor:pointer;
    transition:all var(--transition);
    position:relative; text-decoration:none;
}
.topbar-icon-btn svg { width:16px; height:16px; }
.topbar-icon-btn:hover { background:var(--surface-2); border-color:var(--border); color:var(--text); }

.topbar-avatar {
    width:32px; height:32px; border-radius:50%;
    background:var(--lime-dim); border:1.5px solid var(--lime);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:var(--lime);
    text-decoration:none; overflow:hidden;
    transition:box-shadow var(--transition);
}
.topbar-avatar:hover { box-shadow:0 0 12px var(--lime-glow); }
.topbar-avatar img { width:100%; height:100%; object-fit:cover; }

/* Notification badge */
.notif-badge {
    position:absolute; top:-2px; right:-2px;
    min-width:16px; height:16px; border-radius:99px;
    background:var(--danger); color:#fff;
    font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    padding:0 4px; border:2px solid var(--bg);
}
/* Basket badge */
.basket-badge {
    position:absolute; top:-2px; right:-2px;
    min-width:16px; height:16px; border-radius:99px;
    background:var(--lime); color:#000;
    font-size:9px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    padding:0 4px; border:2px solid var(--bg);
}

/* ── Notification / Basket Dropdown ── */
.notif-dropdown, .basket-dropdown {
    position:absolute; top:calc(100% + 8px); right:0;
    width:340px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    display:none; flex-direction:column;
    overflow:hidden; z-index:500;
}
.notif-dropdown.open, .basket-dropdown.open { display:flex; }
.notif-dropdown-header, .basket-dropdown-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--text-2);
}
.notif-dropdown-header button, .basket-dropdown-header button {
    font-size:11px; color:var(--lime); background:none; border:none; cursor:pointer; font-family:inherit;
}
.notif-dropdown-header button:hover, .basket-dropdown-header button:hover { color:var(--text); }
#notifList { max-height:320px; overflow-y:auto; }
.notif-item {
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 16px; cursor:pointer;
    border-bottom:1px solid var(--border);
    transition:background var(--transition);
}
.notif-item:hover { background:var(--surface-2); }
.notif-item.unread { background:var(--lime-dim); }
.notif-icon { width:28px; height:28px; border-radius:50%; background:var(--surface-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--lime); }
.notif-icon svg { width:12px; height:12px; }
.notif-text { font-size:12.5px; color:var(--text); line-height:1.4; }
.notif-time { font-size:11px; color:var(--text-3); margin-top:2px; }
.notif-dropdown-footer, .basket-dropdown-footer {
    padding:10px 16px; text-align:center;
    border-top:1px solid var(--border);
}
.notif-dropdown-footer a, .basket-dropdown-footer a { font-size:12px; color:var(--lime); text-decoration:none; }
.basket-empty { padding:28px 16px; text-align:center; color:var(--text-3); font-size:13px; }
.basket-section-label { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); padding:8px 16px 4px; }
.basket-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 16px; border-bottom:1px solid var(--border);
    font-size:12.5px;
}
.basket-item-thumb { width:36px; height:24px; border-radius:4px; object-fit:cover; background:var(--surface-3); flex-shrink:0; }
.basket-item-title { flex:1; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.basket-item-price { font-size:12px; font-weight:700; color:var(--lime); flex-shrink:0; }
.basket-item-remove { width:20px; height:20px; border-radius:4px; background:none; border:none; cursor:pointer; color:var(--text-3); display:flex; align-items:center; justify-content:center; transition:color var(--transition); flex-shrink:0; }
.basket-item-remove:hover { color:var(--danger); }
.basket-item-remove svg { width:12px; height:12px; }
.basket-actions { display:flex; flex-direction:column; gap:8px; padding:12px 16px; border-top:1px solid var(--border); }

/* ── Page Content ── */
.page-content { padding:28px 32px; }

/* ── Buttons ── */
.btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 16px; border-radius:var(--radius-sm);
    font-size:13px; font-weight:600; font-family:inherit;
    cursor:pointer; transition:all var(--transition);
    border:1px solid transparent; text-decoration:none;
    white-space:nowrap; line-height:1;
}
.btn-primary { background:var(--lime); color:#000; border-color:var(--lime); }
.btn-primary:hover { background:#6fff2e; box-shadow:0 0 22px var(--lime-glow); }
.btn-secondary { background:var(--purple); color:#fff; border-color:var(--purple); }
.btn-secondary:hover { background:var(--purple-light); box-shadow:0 0 20px var(--purple-glow); }
.btn-ghost { background:var(--surface-2); border-color:var(--border); color:var(--text-2); }
.btn-ghost:hover { border-color:var(--border-light); color:var(--text); background:var(--surface-3); }
.btn-danger { background:var(--danger-dim); border-color:var(--danger); color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:#fff; }
.btn-gold { background:var(--gold-dim); border-color:var(--gold); color:var(--gold); }
.btn-gold:hover { background:var(--gold); color:#000; box-shadow:0 0 18px rgba(251,191,36,.3); }
.btn-purple { background:var(--purple-dim); border-color:var(--purple); color:var(--purple-light); }
.btn-purple:hover { background:var(--purple); color:#fff; box-shadow:0 0 18px var(--purple-glow); }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-lg { padding:11px 22px; font-size:14px; }
.btn-xl { padding:14px 28px; font-size:15px; font-weight:700; }
.btn-block { width:100%; justify-content:center; }
.btn-like.active { color:var(--danger); border-color:var(--danger); background:var(--danger-dim); }
.btn-fav.active { color:var(--gold); border-color:var(--gold); background:var(--gold-dim); }

/* ── Forms ── */
.form-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; max-width:560px; }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:12.5px; font-weight:600; color:var(--text-2); margin-bottom:7px; letter-spacing:.2px; }
.form-required { color:var(--danger); }
.optional { font-weight:400; color:var(--text-3); font-size:11.5px; }
.form-input {
    width:100%; padding:9px 12px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text); font-size:13.5px; font-family:inherit;
    outline:none; transition:border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus { border-color:var(--lime); box-shadow:0 0 0 3px var(--lime-dim); }
.form-input::placeholder { color:var(--text-3); }
.form-textarea { resize:vertical; min-height:100px; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b9e5e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; }
.form-hint { font-size:11.5px; color:var(--text-3); margin-top:5px; }

/* ── Script Grid ── */
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-title { font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.2px; }
.section-title-premium { color:var(--gold); }
.section-link { font-size:12px; color:var(--lime); text-decoration:none; font-weight:600; transition:opacity var(--transition); }
.section-link:hover { opacity:.75; }
.script-section { margin-bottom:40px; }
.script-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
    gap:14px;
}
.script-grid-wide { grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); }

/* ── Script Card ── */
.script-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    text-decoration:none;
    display:block;
    transition:all var(--transition);
    position:relative;
    cursor:pointer;
}
.script-card:hover {
    border-color:var(--lime);
    transform:translateY(-2px);
    box-shadow:0 0 24px var(--lime-glow), 0 8px 24px rgba(0,0,0,.4);
}
.script-card.paid-card:hover { border-color:var(--gold); box-shadow:0 0 24px rgba(251,191,36,.22), 0 8px 24px rgba(0,0,0,.4); }
.script-card::after {
    content:''; position:absolute; top:0; left:0;
    width:100%; height:2px;
    background:linear-gradient(90deg, var(--lime), var(--purple));
    opacity:0; transition:opacity var(--transition);
}
.script-card:hover::after { opacity:1; }
.script-card.paid-card::after { background:linear-gradient(90deg, var(--gold), #f97316); }
.script-card-thumb { width:100%; aspect-ratio:16/9; background:var(--surface-3); overflow:hidden; position:relative; }
.script-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.script-card:hover .script-card-thumb img { transform:scale(1.04); }
.script-card-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--border-light); }
.script-card-thumb-placeholder svg { width:32px; height:32px; }
.script-card-badges { position:absolute; top:7px; left:7px; display:flex; gap:4px; flex-wrap:wrap; }
.card-badge { font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:2px 6px; border-radius:3px; }
.card-badge-paid { background:var(--gold); color:#000; }
.card-badge-key { background:var(--purple-dim); color:var(--purple-light); border:1px solid rgba(139,43,226,.3); }
.card-badge-mobile { background:rgba(20,184,166,.1); color:#14b8a6; border:1px solid rgba(20,184,166,.3); }
.card-badge-open { background:var(--lime-dim); color:var(--lime); border:1px solid rgba(87,255,26,.25); }
.card-badge-free { background:var(--lime-dim); color:var(--lime); border:1px solid rgba(87,255,26,.25); }
.script-card-body { padding:11px 13px 13px; }
.script-card-tag { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--lime); margin-bottom:4px; }
.script-card-tag-gold { color:var(--gold); }
.script-card-title { font-size:13.5px; font-weight:700; color:var(--text); line-height:1.3; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.script-card-author { font-size:11.5px; color:var(--text-3); margin-bottom:8px; }
.script-card-author span { color:var(--text-2); }
.script-card-price { font-size:15px; font-weight:800; color:var(--gold); margin-bottom:4px; }
.script-card-stats { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text-3); }
.stat-item { display:flex; align-items:center; gap:3px; }
.stat-item svg { width:11px; height:11px; }

/* ── Page Header ── */
.page-header { margin-bottom:28px; }
.page-title { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.4px; margin-bottom:4px; }
.page-subtitle { font-size:13.5px; color:var(--text-2); }
.greeting { font-size:20px; font-weight:700; color:var(--text-2); margin-bottom:28px; }
.greeting span { color:var(--lime); }

/* ── Hero Banner ── */
.hero-banner {
    width:100%; border-radius:var(--radius-lg);
    overflow:hidden; position:relative;
    margin-bottom:32px;
    border:1px solid var(--border);
    background:var(--surface);
}
.hero-banner img { width:100%; height:200px; object-fit:cover; object-position:center; display:block; }
.hero-banner-overlay {
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(9,11,9,.85) 0%, rgba(9,11,9,.3) 50%, transparent 100%);
    display:flex; flex-direction:column; justify-content:center;
    padding:28px 32px; gap:10px;
}
.hero-title { font-size:26px; font-weight:900; color:var(--lime); letter-spacing:-.5px; text-shadow:0 0 20px var(--lime-glow); line-height:1.1; }
.hero-sub { font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--text-2); }
.hero-actions { display:flex; gap:10px; margin-top:4px; }

/* ── Scripts Toolbar ── */
.scripts-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.scripts-search-bar { position:relative; flex:1; min-width:200px; display:flex; align-items:center; }
.scripts-search-icon { position:absolute; left:10px; color:var(--text-3); pointer-events:none; }
.scripts-search-bar input { width:100%; height:36px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 12px 0 32px; font-size:13px; color:var(--text); font-family:inherit; outline:none; transition:border-color var(--transition); }
.scripts-search-bar input:focus { border-color:var(--lime); }
.sort-select { height:36px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 10px; color:var(--text); font-size:13px; font-family:inherit; cursor:pointer; outline:none; appearance:none; padding-right:28px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b9e5e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
.sort-select:focus { border-color:var(--lime); }
.results-count { font-size:12px; color:var(--text-3); white-space:nowrap; }

/* ── Empty State ── */
.empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 24px; }
.empty-state-icon { width:60px; height:60px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--border-light); }
.empty-state-icon svg { width:26px; height:26px; }
.empty-state-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.empty-state-text { font-size:13px; color:var(--text-2); max-width:320px; line-height:1.6; margin-bottom:18px; }

/* ── Detail Page ── */
.detail-wrap { display:grid; grid-template-columns:1fr 260px; gap:24px; align-items:start; }
@media (max-width:860px) { .detail-wrap { grid-template-columns:1fr; } }
.detail-thumb { width:100%; border-radius:var(--radius); overflow:hidden; background:var(--bg-2); margin-bottom:20px; border:1px solid var(--border); position:relative; display:flex; align-items:center; justify-content:center; max-height:480px; }
.detail-thumb img { max-width:100%; max-height:480px; width:auto; height:auto; object-fit:contain; }
.detail-thumb-placeholder { width:100%; height:200px; display:flex; align-items:center; justify-content:center; color:var(--border-light); }
.detail-thumb-placeholder svg { width:48px; height:48px; }
.detail-title { font-size:22px; font-weight:800; color:var(--text); margin-bottom:10px; letter-spacing:-.3px; }
.detail-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; font-size:13px; color:var(--text-2); }
.detail-meta-author { color:var(--lime); font-weight:600; text-decoration:none; }
.detail-meta-author:hover { text-decoration:underline; }
.detail-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.detail-stat-bar { display:flex; gap:20px; flex-wrap:wrap; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:22px; }
.stat-bar-item { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-2); }
.stat-bar-item svg { width:13px; height:13px; color:var(--lime); }
.stat-bar-item strong { color:var(--text); }
.detail-section-title { font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.detail-description { font-size:13.5px; color:var(--text-2); line-height:1.75; margin-bottom:24px; white-space:pre-wrap; }

/* Basket controls */
.qty-control { display:flex; align-items:center; gap:4px; }
.qty-btn { width:28px; height:28px; border-radius:4px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; transition:all var(--transition); }
.qty-btn:hover { border-color:var(--lime); color:var(--lime); }
.qty-input { width:44px; height:28px; text-align:center; background:var(--surface-2); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:13px; font-family:inherit; outline:none; }

/* Paid Script Detail Box CSS */
.detail-paid-box {
    background: var(--surface);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.detail-paid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.detail-paid-actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.detail-paid-qty-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.detail-paid-qty-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
}

/* ── Code Block ── */
.code-block { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); margin-bottom:28px; background:var(--bg-2); position:relative; }
.code-block-header { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.code-block-lang { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--lime); }
.code-block-lang span { font-weight:400; color:var(--text-3); text-transform:none; letter-spacing:0; }
.code-block-actions { display:flex; gap:6px; }
.code-block-pre { padding:18px; overflow-x:auto; font-size:12.5px; line-height:1.7; color:var(--text-2); }
.lua-kw  { color:var(--purple-light); font-weight:600; }
.lua-str  { color:#a3e635; }
.lua-cmt  { color:var(--text-3); font-style:italic; }
.lua-num  { color:#fb923c; }
.lua-fn   { color:var(--lime); }
.lua-bool { color:var(--gold); font-weight:600; }
.lua-nil  { color:var(--gold); font-weight:600; }

/* Code editor */
.code-editor-wrap { border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); }
.code-editor-header { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.code-editor-footer { display:flex; align-items:center; justify-content:flex-end; padding:6px 12px; background:var(--surface-2); border-top:1px solid var(--border); }
.code-line-count { font-size:11px; color:var(--text-3); }
.code-editor-lang { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--lime); }
.code-editor { width:100%; min-height:220px; padding:14px; background:var(--bg-2); border:none; color:var(--text); font-family:'Courier New',monospace; font-size:13px; line-height:1.7; resize:vertical; outline:none; }

/* ── Comments ── */
.comments-section { margin-top:28px; }
.comment-form { display:flex; gap:12px; margin-bottom:20px; }
.comment-list { display:flex; flex-direction:column; gap:14px; }
.comment { display:flex; gap:10px; }
.comment-avatar { width:34px; height:34px; border-radius:50%; background:var(--surface-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--lime); flex-shrink:0; overflow:hidden; text-decoration:none; }
.comment-avatar img { width:100%; height:100%; object-fit:cover; }
.comment-body { flex:1; }
.comment-header { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.comment-author { font-size:13px; font-weight:700; color:var(--text); text-decoration:none; }
.comment-author:hover { color:var(--lime); }
.comment-time { font-size:11px; color:var(--text-3); }
.comment-content { font-size:13.5px; color:var(--text-2); line-height:1.65; }
.comment-actions { margin-top:6px; }

/* ── Detail Sidebar ── */
.detail-sidebar { display:flex; flex-direction:column; gap:14px; }
.detail-author-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.detail-author-avatar { width:52px; height:52px; border-radius:50%; background:var(--lime-dim); border:2px solid var(--lime); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:var(--lime); overflow:hidden; }
.detail-author-avatar img { width:100%; height:100%; object-fit:cover; }
.detail-author-name a { font-size:14px; font-weight:700; color:var(--text); text-decoration:none; }
.detail-author-name a:hover { color:var(--lime); }
.detail-script-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag-pill { background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); font-size:11.5px; padding:3px 8px; border-radius:99px; text-decoration:none; transition:all var(--transition); }
.tag-pill:hover { border-color:var(--lime); color:var(--lime); }

/* ── Admin ── */
.admin-stats-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:6px; transition:border-color var(--transition); }
.stat-card:hover { border-color:var(--lime); }
.stat-card-icon { width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.stat-card-icon svg { width:18px; height:18px; }
.stat-card-value { font-size:24px; font-weight:800; color:var(--text); line-height:1.1; }
.stat-card-label { font-size:12px; color:var(--text-3); }
.admin-table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:20px; }
.admin-table-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); }
.admin-table-title { font-size:13px; font-weight:700; color:var(--text); }
.admin-search input { height:32px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 10px; color:var(--text); font-size:13px; font-family:inherit; outline:none; min-width:200px; }
table { width:100%; border-collapse:collapse; }
th { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text-3); padding:10px 16px; border-bottom:1px solid var(--border); text-align:left; }
td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-2); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.02); }
.status-badge { font-size:10.5px; font-weight:700; letter-spacing:.3px; padding:3px 8px; border-radius:3px; text-transform:capitalize; }
.status-approved { background:var(--lime-dim); color:var(--lime); }
.status-pending  { background:var(--warn-dim); color:var(--warn); }
.status-rejected { background:var(--danger-dim); color:var(--danger); }
.status-open     { background:var(--danger-dim); color:var(--danger); }
.status-resolved { background:var(--lime-dim); color:var(--lime); }
.status-dismissed { background:var(--surface-3); color:var(--text-3); }

/* ── Approval Cards ── */
.approval-card { display:flex; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:14px; transition:border-color var(--transition); }
.approval-card:hover { border-color:var(--border-light); }
.approval-thumb { width:120px; height:80px; border-radius:var(--radius-sm); object-fit:cover; background:var(--surface-3); flex-shrink:0; overflow:hidden; }
.approval-thumb img { width:100%; height:100%; object-fit:cover; }
.approval-body { flex:1; }
.approval-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; }
.approval-author { font-size:12px; color:var(--text-3); margin-bottom:8px; }
.approval-desc { font-size:13px; color:var(--text-2); margin-bottom:10px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.approval-actions { display:flex; gap:8px; }

/* ── Alerts ── */
.alert { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; }
.alert svg { width:15px; height:15px; flex-shrink:0; }
.alert-success { background:var(--lime-dim); border:1px solid rgba(87,255,26,.3); color:var(--lime); }
.alert-error   { background:var(--danger-dim); border:1px solid rgba(244,63,94,.3); color:var(--danger); }
.alert-warn    { background:var(--warn-dim); border:1px solid rgba(245,158,11,.3); color:var(--warn); }
.alert-info    { background:var(--purple-dim); border:1px solid rgba(139,43,226,.3); color:var(--purple-light); }

/* ── Modals ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(4px); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; width:100%; max-width:420px; box-shadow:var(--shadow); }
.modal-title { font-size:16px; font-weight:800; color:var(--text); margin-bottom:12px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* ── Profile ── */
.profile-header { display:flex; align-items:flex-start; gap:20px; margin-bottom:32px; flex-wrap:wrap; }
.profile-avatar { width:80px; height:80px; border-radius:50%; background:var(--lime-dim); border:2.5px solid var(--lime); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; color:var(--lime); overflow:hidden; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-info { flex:1; }
.profile-name { font-size:20px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.profile-stats-row { display:flex; gap:16px; margin-bottom:8px; font-size:13px; color:var(--text-2); }
.profile-stats-row strong { color:var(--text); }
.profile-bio { font-size:13.5px; color:var(--text-2); line-height:1.65; margin-bottom:6px; }
.profile-join { font-size:12px; color:var(--text-3); }

/* ── Settings ── */
.settings-tabs { display:flex; gap:4px; margin-bottom:22px; flex-wrap:wrap; }
.settings-tab { padding:7px 16px; border-radius:var(--radius-sm); background:transparent; border:1px solid transparent; color:var(--text-2); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:all var(--transition); }
.settings-tab:hover { background:var(--surface-2); color:var(--text); }
.settings-tab.active { background:var(--lime-dim); border-color:rgba(87,255,26,.25); color:var(--lime); }
.settings-panel { display:none; }
.settings-panel.active { display:block; }
.settings-form-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.settings-form-title { font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.avatar-edit-wrap { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.avatar-edit-preview { width:60px; height:60px; border-radius:50%; background:var(--lime-dim); border:2px solid var(--lime); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:var(--lime); overflow:hidden; }
.avatar-edit-preview img { width:100%; height:100%; object-fit:cover; }

/* ── Notifications Page ── */
.notif-page-list { display:flex; flex-direction:column; gap:8px; }
.notif-page-item { display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; transition:border-color var(--transition); }
.notif-page-item:hover { border-color:var(--border-light); }
.notif-page-item.unread { border-color:rgba(87,255,26,.25); background:var(--lime-dim); }
.notif-page-icon { width:36px; height:36px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--lime); flex-shrink:0; }
.notif-page-icon svg { width:15px; height:15px; }
.notif-page-content { flex:1; }
.notif-page-msg { font-size:13.5px; color:var(--text); margin-bottom:4px; }
.notif-page-msg a { color:var(--lime); text-decoration:none; }
.notif-page-time { font-size:11.5px; color:var(--text-3); }

/* ── Upload Zone ── */
.upload-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:28px 20px; text-align:center; cursor:pointer; transition:all var(--transition); position:relative; overflow:hidden; }
.upload-zone:hover, .upload-zone.dragging { border-color:var(--lime); background:var(--lime-dim); }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-zone-icon { width:36px; height:36px; color:var(--text-3); margin:0 auto 8px; display:block; }
.upload-zone-text { font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:4px; }
.upload-zone-hint { font-size:11.5px; color:var(--text-3); }

/* ── Props toggles ── */
.props-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.prop-toggle { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); cursor:pointer; transition:all var(--transition); }
.prop-toggle:hover { border-color:var(--border-light); }
.prop-toggle.checked { background:var(--lime-dim); border-color:rgba(87,255,26,.3); }
.prop-toggle input { display:none; }
.prop-toggle-label { font-size:12.5px; font-weight:600; color:var(--text-2); }
.prop-toggle.checked .prop-toggle-label { color:var(--lime); }

/* ── Tags Input ── */
.tags-wrap { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 8px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); min-height:38px; cursor:text; }
.tags-wrap:focus-within { border-color:var(--lime); }
.tags-wrap input { border:none; outline:none; background:transparent; font-size:13px; color:var(--text); font-family:inherit; flex:1; min-width:120px; }
.tag-chip { display:flex; align-items:center; gap:5px; background:var(--lime-dim); border:1px solid rgba(87,255,26,.3); color:var(--lime); font-size:12px; font-weight:600; padding:2px 8px 2px 10px; border-radius:99px; }
.tag-chip button { background:none; border:none; cursor:pointer; color:var(--lime); font-size:14px; line-height:1; padding:0; display:flex; align-items:center; }

/* ── Auth Pages ── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); position:relative; overflow:hidden; }
.auth-wrap::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(ellipse 60% 40% at 20% 30%, rgba(87,255,26,.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 80% 70%, rgba(139,43,226,.07) 0%, transparent 70%);
}
.auth-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; position:relative; z-index:1; box-shadow:var(--shadow); }
.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:24px; justify-content:center; }
.auth-logo-img { width:40px; height:40px; border-radius:10px; object-fit:cover; box-shadow:0 0 20px var(--lime-glow); }
.auth-logo-text { font-size:16px; font-weight:900; color:var(--lime); text-shadow:0 0 12px var(--lime-glow); }
.auth-title { font-size:20px; font-weight:800; color:var(--text); text-align:center; margin-bottom:6px; }
.auth-subtitle { font-size:13px; color:var(--text-2); text-align:center; margin-bottom:24px; }
.auth-footer { font-size:13px; color:var(--text-3); text-align:center; margin-top:20px; }
.auth-footer a { color:var(--lime); text-decoration:none; }
.auth-footer a:hover { text-decoration:underline; }

/* ── DevTools Protect Overlay ── */
#protect-overlay {
    display:none; position:fixed; inset:0; z-index:99999;
    background:var(--bg); align-items:center; justify-content:center; flex-direction:column; gap:12px;
}
#protect-overlay.show { display:flex; }
.protect-msg { color:var(--danger); font-size:16px; font-weight:700; }
.protect-sub { color:var(--text-3); font-size:13px; }

/* ── Home Stats Strip ── */
.home-stats-strip {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.home-stats-item {
    flex: 1;
    padding: 14px 20px;
    border-right: 1px solid var(--border);
    text-align: center;
}
.home-stats-item:last-child {
    border-right: none;
}
.home-stats-number {
    font-size: 20px;
    font-weight: 800;
}
.font-free { color: var(--lime); }
.font-premium { color: var(--gold); }
.font-infinity { color: var(--purple-light); }
.home-stats-label {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}

/* ── Responsive Helpers ── */
.show-on-mobile { display: none !important; }

/* ── Responsive ── */
@media (max-width:768px) {
    .main-wrap { margin-left:0; }
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .sidebar-overlay { display:block; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:199; opacity:0; pointer-events:none; transition:opacity var(--transition); }
    .sidebar-overlay.open { opacity:1; pointer-events:auto; }
    .mobile-menu-btn { display:flex; }
    .page-content { padding:20px 16px; }
    .script-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
    .notif-dropdown, .basket-dropdown { width:300px; right:-60px; }
    .detail-wrap { grid-template-columns:1fr; }
    .profile-header { flex-direction:column; }
    .hero-banner img { height:140px; }
    .hero-title { font-size:20px; }
    
    /* Responsive Helpers */
    .hide-on-mobile { display: none !important; }
    .show-on-mobile { display: flex !important; }
    
    /* Stats strip mobile layout */
    .home-stats-strip { flex-direction: column; }
    .home-stats-item { border-right: none; border-bottom: 1px solid var(--border); }
    .home-stats-item:last-child { border-bottom: none; }
    
    /* Sidebar logout button */
    .sidebar-logout-btn { color: var(--danger) !important; }
    .sidebar-logout-btn:hover { background: var(--danger-dim) !important; }
    
    /* Topbar search mobile constraint */
    .topbar-search { max-width: 180px; }
    
    /* Admin tables scrolling */
    .admin-table-wrap { overflow-x: auto; }
}

@media (max-width: 580px) {
    .detail-paid-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .detail-paid-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .detail-paid-qty-wrap {
        width: 100%;
    }
    .qty-control {
        width: 100%;
        justify-content: space-between;
    }
    .qty-input {
        flex: 1;
    }
    .qty-btn {
        flex-shrink: 0;
    }
    .btn-add-paid {
        justify-content: center;
        width: 100% !important;
        margin-top: 0 !important;
    }
}

@media (max-width:480px) {
    /* Narrow mobile constraints */
    .topbar-search { max-width: 130px; }
    .topbar-search input { font-size: 11.5px; padding-left: 28px; }
    .topbar-search-icon { left: 8px; }
    
    /* Drawer style dropdowns for narrow viewports */
    .notif-dropdown, .basket-dropdown {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto !important;
        top: 60px;
        z-index: 99999;
        box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    }
    
    /* Hero banner buttons wrap */
    .hero-banner-overlay { padding: 16px 20px; gap: 6px; }
    .hero-actions { flex-wrap: wrap; gap: 8px; }
    .hero-actions .btn { padding: 6px 12px; font-size: 11px; }
}