/* ----- reset & base ----- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --bg: #061015;
    --surface: #0b1820;
    --surface2: #0f222c;
    --border: #1c3541;
    --border-light: #284a58;
    --text: #ecfeff;
    --muted: #8aaab7;
    --muted2: #5f7f8d;
    --purple: #22d3ee;
    --purple2: #06b6d4;
    --purple-glow: rgba(34, 211, 238, .18);
    --green: #2dd4bf;
    --yellow: #fbbf24;
    --red: #fb7185;
    --radius: 20px;
    --radius-sm: 12px;
    --shadow: 0 25px 60px -10px rgba(0, 0, 0, .8);
    --accent: #22d3ee;
    --accent-strong: #0891b2;
    --accent-soft: rgba(34,211,238,.14);
    --card-glow: 0 18px 50px rgba(0,0,0,.28);
    --focus-ring: 0 0 0 3px rgba(34,211,238,.22);
    --transition: all .25s cubic-bezier(.2, .9, .3, 1);
}
html {
    background: var(--bg);
    scroll-behavior: smooth;
}
body {
    background: radial-gradient(900px 420px at 85% -5%, rgba(34, 211, 238, .10), transparent 65%),
                radial-gradient(800px 480px at -10% 85%, rgba(6, 182, 212, .08), transparent 65%),
                var(--bg);
    color: var(--text);
    font: 15px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -.015em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}
button,
input,
select {
    font: inherit;
    outline: none;
}
button {
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}
a {
    color: var(--purple);
    text-decoration: none;
}
.hidden {
    display: none !important;
}

/* ----- scrollbar ----- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--surface);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--purple);
}

/* ----- login ----- */
.login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 30% 20%, rgba(8, 145, 178, .12), transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(34, 211, 238, .08), transparent 50%),
                var(--bg);
}
.login-card {
    width: min(440px, 100%);
    padding: 38px 36px;
    border: 1px solid rgba(73, 126, 146, .35);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(14, 34, 44, .94), rgba(7, 20, 27, .96));
    box-shadow: 0 22px 70px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .02);
    backdrop-filter: blur(18px);
    animation: fadeSlide .55s ease;
}
@keyframes fadeSlide {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
}
.logo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--purple), var(--purple2));
    font-weight: 900;
    font-size: 22px;
    box-shadow: 0 6px 24px var(--purple-glow);
    color: #fff;
}
.brand-text b {
    display: block;
    font-size: 18px;
    font-weight: 800;
}
.brand-text small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: .02em;
}
.login h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
    margin-bottom: 6px;
}
.login p.sub {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 26px;
    font-weight: 400;
}
.field {
    margin: 14px 0;
}
.field label {
    display: block;
    color: var(--muted2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.field input,
.field select {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    color: #fff;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font-weight: 450;
}
.field input:focus,
.field select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple-glow);
}
.field input::placeholder {
    color: var(--muted2);
    font-weight: 400;
}
.primary {
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--purple2), var(--purple));
    color: #fff;
    padding: 14px 20px;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 4px 20px var(--purple-glow);
    width: 100%;
    border: none;
    font-size: 14px;
    letter-spacing: .02em;
}
.primary:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 32px rgba(34, 211, 238, .4);
}
.primary:active {
    transform: scale(.97);
}
.primary:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.check-field {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0;
    font-size: 12px;
    color: var(--muted2);
    cursor: pointer;
    line-height: 1.5;
}
.check-field input[type="checkbox"] {
    margin-top: 2px;
    width: 15px;
    height: 15px;
    accent-color: var(--purple);
    flex-shrink: 0;
    cursor: pointer;
}
.error {
    color: var(--red);
    font-size: 12px;
    margin-top: 10px;
    font-weight: 500;
}
.hint {
    margin-top: 18px;
    color: var(--muted2);
    font-size: 11px;
    text-align: center;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}
.hint code {
    background: var(--surface2);
    padding: 2px 10px;
    border-radius: 30px;
    font-size: 10px;
    color: var(--purple);
    border: 1px solid var(--border);
}

/* ----- app shell ----- */
#app {
    display: none;
    min-height: 100vh;
}

/* ----- sidebar ----- */
.sidebar {
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(.2, .9, .3, 1);
    overflow-y: auto;
}
.sidebrand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 28px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}
.sidebrand .logo {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 14px;
}
.sidebrand b {
    font-size: 15px;
    font-weight: 800;
}
.sidebrand small {
    display: block;
    color: var(--muted2);
    font-size: 9px;
    font-weight: 500;
    margin-top: 1px;
}
.nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
.nav-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nav-section[hidden] { display: none !important; }
.nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    transition: var(--transition);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}
.nav button .icon {
    font-size: 18px;
    width: 24px;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.nav button:hover {
    background: var(--surface2);
    color: #fff;
}
.nav button.active {
    background: rgba(34, 211, 238, .12);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--purple);
}
.nav button.active .icon {
    color: var(--purple);
}
.logout-btn {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    color: var(--muted2) !important;
}
.logout-btn:hover {
    color: var(--red) !important;
    background: rgba(248, 113, 128, .08) !important;
}



/* ===== SIDEBAR / MENU REFRESH ===== */
.sidebar {
    width: 276px;
    padding: 20px 14px 14px;
    background:
      radial-gradient(circle at 0% 0%, rgba(34,211,238,.08), transparent 32%),
      linear-gradient(180deg, rgba(18,18,26,.98), rgba(8,8,12,.99));
    overflow: hidden;
}
.sidebrand {
    padding: 2px 9px 18px;
    margin-bottom: 12px;
}
.sidebrand .brand-link { flex-shrink: 0; }
.sidebrand .logo { box-shadow: 0 8px 30px var(--purple-glow); }
.menu-tools {
    display:flex;
    align-items:center;
    gap:7px;
    margin: 0 2px 12px;
}
.menu-search {
    flex:1;
    height:36px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 9px;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(5,5,8,.62);
    color:var(--muted2);
}
.menu-search:focus-within {
    border-color:rgba(34,211,238,.65);
    box-shadow:0 0 0 3px var(--purple-glow);
}
.menu-search span { font-size:17px; }
.menu-search input {
    min-width:0;
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font-size:11px;
}
.menu-search input::placeholder { color:var(--muted2); }
.menu-search kbd {
    border:1px solid var(--border);
    border-radius:5px;
    padding:1px 5px;
    font-size:9px;
    color:var(--muted2);
}
.menu-collapse {
    width:36px;
    height:36px;
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--muted);
    background:var(--surface2);
    font-size:22px;
    transition:var(--transition);
}
.menu-collapse:hover { color:#fff; border-color:var(--purple); }
.nav {
    gap: 10px;
    padding-right:2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.nav-section {
    gap:2px;
    padding: 5px 0;
}
.nav-label {
    min-height:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 11px 3px;
    color:var(--muted2);
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:800;
}
.nav-count {
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:20px;
    font-size:8px;
    letter-spacing:0;
    color:var(--muted2);
}
.nav button {
    min-height:42px;
    padding:9px 11px;
    border:1px solid transparent;
    border-radius:11px;
    gap:10px;
}
.nav button .icon {
    width:22px;
    min-width:22px;
    height:22px;
    display:grid;
    place-items:center;
    font-size:16px;
    border-radius:7px;
    background:rgba(255,255,255,.025);
}
.nav button:hover {
    background:rgba(255,255,255,.045);
    border-color:var(--border);
    transform:translateX(2px);
}
.nav button.active {
    background:linear-gradient(90deg, rgba(34,211,238,.17), rgba(34,211,238,.06));
    border-color:rgba(34,211,238,.20);
    box-shadow:inset 3px 0 0 var(--purple), 0 6px 20px rgba(0,0,0,.12), 0 0 16px -6px rgba(34,211,238,.55);
}
.nav button.active .icon {
    background:rgba(34,211,238,.16);
    color:var(--purple);
}
.nav-arrow {
    margin-left:auto;
    color:var(--muted2);
    opacity:.55;
    transition:transform .2s ease;
}
.nav button.active .nav-arrow { transform:translateX(2px); color:var(--purple); opacity:1; }
.nav-badge {
    margin-left:auto;
    padding:3px 6px;
    border-radius:6px;
    background:rgba(45,212,160,.10);
    border:1px solid rgba(45,212,160,.18);
    color:var(--green);
    font-size:8px;
    letter-spacing:.05em;
}
.sidebar-footer {
    flex: 0 0 auto;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.055);
    background: linear-gradient(180deg, rgba(8,8,12,0), rgba(8,8,12,.96) 22%);
}
.side-status {
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 2px 6px;
    padding:10px 11px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.02);
}
.status-dot {
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 12px rgba(45,212,160,.65);
}
.side-status b { display:block; font-size:10px; }
.side-status small { display:block; color:var(--muted2); font-size:8px; margin-top:1px; }
.sidebar-footer .logout-btn {
    margin:0;
    min-height:42px;
    border-top:0 !important;
    padding:9px 11px !important;
    border-radius:11px !important;
    color:var(--muted2) !important;
}
.sidebar-footer .logout-btn:hover {
    color:var(--red) !important;
    background:rgba(248,113,128,.08) !important;
    border-color:rgba(248,113,128,.18) !important;
}
.sidebar.compact { width:82px; }
.sidebar.compact .sidebrand > div,
.sidebar.compact .menu-search,
.sidebar.compact .nav-label,
.sidebar.compact .nav button > span:not(.icon),
.sidebar.compact .nav-badge,
.sidebar.compact .nav-arrow,
.sidebar.compact .side-status,
.sidebar.compact .logout-btn > span:not(.icon) { display:none; }
.sidebar.compact .sidebrand { justify-content:center; padding-left:0; padding-right:0; }
.sidebar.compact .menu-tools { justify-content:center; }
.sidebar.compact .menu-collapse { transform:rotate(180deg); }
.sidebar.compact .nav button { justify-content:center; padding:9px; }
.sidebar.compact .nav button .icon { width:32px; height:32px; }
.sidebar.compact .sidebar-footer .logout-btn { justify-content:center; padding:9px !important; }
.sidebar.compact + .mobilebar { }
.sidebar.compact ~ .main { margin-left:82px; }

@media (max-width: 900px) {
    .sidebar { width:276px; }
    .sidebar.compact { width:276px; transform:translateX(-100%); }
    .sidebar.compact ~ .main { margin-left:0; }
}

/* ----- mobile top bar ----- */
.mobilebar {
    display: none;
    height: 64px;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(5, 5, 8, .82);
    backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--border);
}
.hamb {
    font-size: 28px;
    color: var(--purple);
    padding: 4px 8px;
    border-radius: 10px;
    transition: var(--transition);
}
.hamb:hover {
    background: var(--surface2);
}
.mobilebar .brand-mid {
    font-weight: 800;
    color: var(--purple);
    font-size: 17px;
    letter-spacing: -.02em;
}
.more-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--muted);
    transition: var(--transition);
}
.more-btn:hover {
    border-color: var(--purple);
    color: #fff;
}

/* ----- main content ----- */
.main {
    margin-left: 260px;
    min-height: 100vh;
}
.wrap {
    max-width: 1340px;
    padding: 32px 38px;
    margin: 0 auto;
}

/* ----- top header ----- */
.top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}
.title h1 {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: 1.05;
    background: linear-gradient(135deg, #fff 40%, var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.title h1 span {
    -webkit-text-fill-color: var(--purple);
}
.title p {
    color: var(--muted);
    font-size: 14px;
    margin-top: 6px;
    font-weight: 400;
    -webkit-text-fill-color: var(--muted);
}
.user-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: 60px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--purple), #0ea5e9);
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

/* ----- pages ----- */
.page {
    display: none;
    animation: fadeSlide .45s ease;
}
.page.active {
    display: block;
}
/* Role-lock beats .active — a page the current role isn't allowed to see
   must stay hidden even if it was left marked .active from a previous role
   (e.g. right after re-login as a different account). */
.page.role-locked {
    display: none !important;
}

/* ----- stats cards ----- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.stat {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stat:hover {
    border-color: var(--purple);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .6);
}
.stat .bg-glow {
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    opacity: .05;
    pointer-events: none;
}
.stat.green .bg-glow {
    background: var(--green);
}
.stat.yellow .bg-glow {
    background: var(--yellow);
}
.stat.purple .bg-glow {
    background: var(--purple);
}
.stat.blue .bg-glow {
    background: #38bdf8;
}
.stat label {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted2);
    font-weight: 700;
    position: relative;
    z-index: 2;
}
.stat .num {
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}
.stat .num.green {
    color: var(--green);
}
.stat .num.yellow {
    color: var(--yellow);
}
.stat .num.purple {
    color: var(--purple);
}
.stat .num.blue {
    color: #38bdf8;
}
.stat .sub-label {
    color: var(--muted2);
    font-size: 11px;
    margin-top: 4px;
    font-weight: 400;
    position: relative;
    z-index: 2;
}
.stat .icon-big {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    opacity: .06;
    pointer-events: none;
    color: var(--purple);
}

/* ----- panels ----- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 20px;
    overflow: hidden;
    transition: var(--transition);
}
.panel:hover {
    border-color: var(--border-light);
}
.panel-head {
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}
.panel-head h2 {
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-head h2 .emoji {
    color: var(--purple);
}
.panel-body {
    padding: 20px 24px;
}

.btn-ghost {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--muted);
    padding: 8px 16px;
    border-radius: 40px;
    font-size: 11px;
    font-weight: 700;
    transition: var(--transition);
}
.btn-ghost:hover {
    border-color: var(--purple);
    color: #fff;
    background: rgba(34, 211, 238, .08);
}

/* ----- activity rows ----- */
.activity-list {
    background: var(--surface2);
    border-radius: var(--radius-sm);
    padding: 2px 16px;
    border: 1px solid var(--border);
}
.arow {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.arow:last-child {
    border-bottom: 0;
}
.arow .label {
    display: block;
    color: var(--muted2);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 3px;
}
.arow .value {
    font-weight: 600;
    font-size: 13px;
}
.arow .value small {
    font-weight: 400;
    color: var(--muted);
    font-size: 11px;
}
.empty-state {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted2);
    font-size: 13px;
}

/* ----- ranking ----- */
.rank-list {
    padding: 0 4px;
}
.rank-row {
    display: grid;
    grid-template-columns: 50px 1fr 90px;
    align-items: center;
    padding: 14px 8px;
    border-bottom: 1px solid var(--border);
}
.rank-row:last-child {
    border-bottom: 0;
}
.rank-no {
    font-size: 20px;
    font-weight: 900;
    color: var(--purple);
}
.rank-name b {
    font-size: 14px;
    font-weight: 700;
}
.rank-name small {
    display: block;
    color: var(--muted2);
    font-size: 10px;
    font-weight: 400;
    margin-top: 1px;
}
.rank-count {
    text-align: right;
    font-weight: 700;
    font-size: 13px;
    color: var(--muted);
}

/* ----- table / keys ----- */
.toolbar {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
}
.toolbar input {
    flex: 1;
    min-width: 180px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: #fff;
    transition: var(--transition);
}
.toolbar input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple-glow);
}
.toolbar input::placeholder {
    color: var(--muted2);
}
.btn-tool {
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-tool:hover {
    border-color: var(--purple);
    color: #fff;
    background: rgba(34, 211, 238, .06);
}

.table-wrap {
    overflow-x: auto;
    padding: 0 4px 4px 4px;
}
.table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    font-size: 12px;
}
.table th {
    text-align: left;
    padding: 14px 16px;
    color: var(--muted2);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--border);
}
.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tr:last-child td {
    border-bottom: 0;
}
.table .key-highlight {
    color: var(--purple);
    font-weight: 700;
    font-family: 'SF Mono', monospace;
    font-size: 12px;
}
.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--panel2, rgba(255,255,255,.04));
    color: var(--muted);
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s, color .15s;
}
.btn-copy:hover {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
}
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.badge.active {
    background: rgba(45, 212, 160, .15);
    color: var(--green);
}
.badge.paused {
    background: rgba(251, 191, 36, .15);
    color: var(--yellow);
}
.badge.ban {
    background: rgba(248, 113, 128, .15);
    color: var(--red);
}
.actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.btn-act {
    padding: 5px 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    color: var(--muted);
    transition: var(--transition);
}
.btn-act:hover {
    border-color: var(--purple);
    color: #fff;
}
.btn-act.danger {
    color: var(--red);
}
.btn-act.danger:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(248, 113, 128, .06);
}
.btn-act.schedule {
    color: #f5c451;
}
.btn-act.schedule:hover {
    border-color: #f5c451;
    color: #f5c451;
    background: rgba(245, 196, 81, .08);
}
.btn-act:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.btn-act:disabled:hover {
    border-color: var(--border);
    color: var(--muted);
    background: var(--surface2);
}

/* ----- dev management (device list) ----- */
.dev-caret {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: transform .15s, color .15s, border-color .15s;
}
.dev-caret:hover {
    color: var(--purple);
    border-color: var(--purple);
}
.dev-caret.open {
    transform: rotate(90deg);
    color: var(--purple);
    border-color: var(--purple);
}
tr.dev-panel-row > td {
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--border);
}
.dev-panel {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 0 16px;
    padding: 6px 14px;
}
.dev-row {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr .7fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 12px;
}
.dev-row:last-child {
    border-bottom: none;
}
.dev-id {
    font-family: 'SF Mono', monospace;
    font-weight: 700;
    color: var(--text);
    word-break: break-all;
}
.dev-connected {
    color: var(--muted2);
    font-size: 11px;
}
@media (max-width: 700px) {
    .dev-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}
.pw-mask {
    font-family: 'SF Mono', monospace;
    letter-spacing: 1px;
}

/* ----- forms ----- */
.form-panel {
    padding: 28px 30px;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}
.form-grid .full {
    grid-column: 1 / -1;
}
.mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.mode-toggle button {
    padding: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 12px;
    color: var(--muted);
    transition: var(--transition);
}
.mode-toggle button.sel {
    border-color: var(--purple);
    background: rgba(34, 211, 238, .1);
    color: #fff;
    box-shadow: 0 0 20px var(--purple-glow);
}
.mode-toggle button:hover {
    border-color: var(--purple);
}
.cost-hint {
    color: var(--muted2);
    font-size: 11px;
    margin-top: 6px;
    font-weight: 400;
}
.result-box {
    margin-top: 22px;
    padding: 18px 22px;
    border: 1.5px dashed var(--purple);
    background: rgba(34, 211, 238, .04);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.result-box code {
    font-size: 18px;
    font-weight: 800;
    color: #a5f3fc;
    font-family: 'SF Mono', monospace;
    word-break: break-all;
}
.btn-copy {
    padding: 6px 16px;
    background: rgba(34, 211, 238, .15);
    border-radius: 40px;
    font-size: 11px;
    font-weight: 700;
    color: var(--purple);
    transition: var(--transition);
    border: 1px solid transparent;
}
.btn-copy:hover {
    background: rgba(34, 211, 238, .25);
    border-color: var(--purple);
}

/* ----- credit ----- */
.credit-section {
    max-width: 660px;
    padding: 32px 36px;
}
.credit-number {
    font-size: 70px;
    font-weight: 900;
    color: #67e8f9;
    letter-spacing: -.04em;
    margin: 8px 0 16px;
}
.notice-box {
    margin-top: 20px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}
.notice-box strong {
    color: var(--text);
}

/* ----- footer ----- */
.footer {
    text-align: center;
    color: var(--muted2);
    font-size: 11px;
    padding: 40px 0 12px;
    border-top: 1px solid var(--border);
    margin-top: 28px;
}

/* ----- responsive ----- */
@media (max-width: 1024px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat .num {
        font-size: 40px;
    }
    .stat {
        min-height: 130px;
        padding: 20px 24px;
    }
}

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        display: none;
    }
    .sidebar.open {
        transform: translateX(0);
        display: flex;
    }
    .mobilebar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .main {
        margin-left: 0;
    }
    .wrap {
        padding: 24px 22px;
    }
    .user-badge {
        display: flex !important;
        font-size: 10px;
        padding: 4px 8px 4px 4px;
        gap: 6px;
    }
    .user-badge .avatar {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }
    .user-badge #headerCredit {
        font-size: 10px !important;
        margin-left: 4px !important;
        padding-left: 6px !important;
        border-left: 1px solid var(--border) !important;
    }
    #mobileCredit {
        display: inline-block !important;
        font-size: 13px !important;
        color: #2dd4a0 !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 640px) {
    .wrap {
        padding: 16px 12px;
    }
    .title h1 {
        font-size: 24px;
    }
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat {
        min-height: 100px;
        padding: 14px 16px;
    }
    .stat .num {
        font-size: 28px;
        margin-top: 4px;
    }
    .stat .icon-big {
        font-size: 30px;
        right: 10px;
    }
    .stat label {
        font-size: 8px;
    }
    .stat .sub-label {
        font-size: 8px;
        margin-top: 2px;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-grid .full {
        grid-column: auto;
    }
    .panel-head {
        padding: 12px 14px;
    }
    .panel-body {
        padding: 12px 14px;
    }
    .arow {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }
    .rank-row {
        grid-template-columns: 30px 1fr 60px;
        padding: 8px 4px;
    }
    .rank-no {
        font-size: 16px;
    }
    .rank-name b {
        font-size: 12px;
    }
    .rank-count {
        font-size: 11px;
    }
    .credit-number {
        font-size: 40px;
    }
    .credit-section {
        padding: 18px 14px;
    }
    .toolbar {
        padding: 10px 12px;
        gap: 6px;
    }
    .toolbar input {
        min-width: 120px;
        padding: 8px 10px;
        font-size: 11px;
    }
    .btn-tool {
        padding: 8px 10px;
        font-size: 9px;
    }
    .result-box code {
        font-size: 13px;
    }
    .table {
        min-width: 600px;
        font-size: 10px;
    }
    .table th, .table td {
        padding: 8px 10px;
    }
    .table .key-highlight {
        font-size: 10px;
    }
}

@media (max-width: 400px) {
    .stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .stat {
        min-height: 80px;
        padding: 10px 12px;
    }
    .stat .num {
        font-size: 22px;
    }
    .stat .icon-big {
        font-size: 24px;
        right: 8px;
    }
    .stat label {
        font-size: 7px;
    }
    .stat .sub-label {
        font-size: 7px;
    }
    .login-card {
        padding: 20px 16px;
    }
    .user-badge {
        font-size: 8px;
        padding: 2px 6px 2px 2px;
        gap: 4px;
    }
    .user-badge .avatar {
        width: 18px;
        height: 18px;
        font-size: 7px;
    }
    .user-badge #headerCredit {
        font-size: 8px !important;
        margin-left: 2px !important;
        padding-left: 4px !important;
    }
    #mobileCredit {
        font-size: 10px !important;
    }
    .mobilebar {
        height: 50px;
        padding: 0 12px;
    }
    .mobilebar .brand-mid {
        font-size: 13px;
    }
    .hamb, .more-btn {
        font-size: 20px;
    }
}

/* ===== v8 polish ===== */
.login-card {
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute;
    inset: -120px -80px auto auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(34, 211, 238, .08);
    filter: blur(20px);
    pointer-events: none;
}
.login-card .primary {
    min-height: 48px;
}
.error {
    min-height: 18px;
}
.btn-act.danger {
    border-color: rgba(248,113,128,.25);
}
.btn-act.danger:hover {
    background: rgba(248,113,128,.10);
    border-color: var(--red);
}
@media (max-width: 600px) {
    .login {
        padding: 14px;
    }
    .login-card {
        padding: 30px 22px;
        border-radius: 18px;
    }
}

/* ============================================
   CONTACT (WhatsApp / Telegram / TikTok)
   ============================================ */
.login-contact {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.login-contact span {
    display: block;
    font-size: 12px;
    color: var(--muted2);
    margin-bottom: 10px;
}
.contact-row {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.contact-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel2, #161b22);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease;
}
.contact-btn:hover {
    transform: translateY(-2px);
    border-color: var(--green);
}
.contact-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-panel .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius, 14px);
    border: 1px solid var(--border);
    background: var(--panel2, #161b22);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease;
}
.contact-card:hover {
    transform: translateY(-2px);
    border-color: var(--green);
}
.contact-card img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.contact-card b {
    display: block;
    font-size: 14px;
}
.contact-card small {
    color: var(--muted2);
    font-size: 12px;
}

/* Login button loading state */
.primary.loading {
    opacity: .85;
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.primary.loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Admin-tree visibility helper (matches owner-only pattern)
   NOTE: intentionally no default "display: none" here. These elements
   live inside #app, which is itself hidden until login, so there is no
   pre-JS flash to guard against. A default-hide rule here previously
   fought with element-specific display values (e.g. .stat{display:flex})
   at equal CSS specificity, and — since this rule came later in the
   stylesheet — it silently won and kept "(All)" stat cards hidden even
   for Owner/Admin, despite applyRoleVisibility() correctly allowing them.
   Visibility for non-page elements is now fully owned by JS (inline
   style); .page elements are governed by .page/.page.active/.page.role-locked. */
.no-admin { }

/* ============================================
   v9.1 — LOGO / BRAND LINK
   ============================================ */
.logo img.brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
a.brand-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: var(--transition);
}
a.brand-link:hover {
    opacity: .85;
}
.mobilebar .brand-mid.brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
}
.brand-logo-mini {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 14px var(--purple-glow);
}
.contact-btn.web img.brand-logo-img,
.contact-card.web img.brand-logo-img {
    object-fit: cover;
    background: linear-gradient(135deg, var(--purple), var(--purple2));
}

/* ----- sidebar section labels ----- */
.nav-label {
    padding: 4px 14px 6px 14px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted2);
}
.nav-label:first-child {
    padding-top: 0;
}
.nav button > span:not(.icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-badge {
    margin-left: auto;
    padding: 3px 6px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: 8px;
    letter-spacing: .08em;
    color: var(--muted2);
    background: var(--surface2);
}

/* ----- expired / extend related badges ----- */
.badge.expired {
    background: rgba(248, 113, 128, .15);
    color: var(--red);
}
.badge.nonaktif {
    background: rgba(137, 132, 160, .18);
    color: var(--muted);
}
.expiry-soon {
    color: var(--yellow) !important;
    font-weight: 700;
}
.expiry-expired {
    color: var(--red) !important;
    font-weight: 700;
}
.btn-act.extend {
    color: var(--green);
    border-color: rgba(45, 212, 160, .3);
}
.btn-act.extend:hover {
    border-color: var(--green);
    background: rgba(45, 212, 160, .1);
    color: var(--green);
}

/* ============================================
   MODAL (Perpanjang / Extend)
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(3, 3, 6, .72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeSlide .2s ease;
}
.modal-box {
    width: min(460px, 100%);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 26px 28px;
    animation: fadeSlide .25s ease;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.modal-head h3 {
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-close {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    transition: var(--transition);
}
.modal-close:hover {
    color: #fff;
    border-color: var(--red);
}
.modal-sub {
    color: var(--muted);
    font-size: 12.5px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.modal-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--muted);
}
.modal-current b {
    color: var(--purple);
    font-size: 13px;
}
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}
.modal-actions .btn-ghost {
    padding: 12px 20px;
}
.modal-actions .primary {
    width: auto;
    padding: 12px 22px;
}
.extend-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}
.extend-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--purple);
}

@media (max-width: 480px) {
    .modal-box {
        padding: 20px 18px 22px;
    }
    .modal-actions {
        flex-direction: column-reverse;
    }
    .modal-actions .btn-ghost,
    .modal-actions .primary {
        width: 100%;
    }
}

/* ============================================
   v10 — DETAILED ELITE RANKING
   ============================================ */
.rank-row.rank-detailed {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 10px;
    border-bottom: 1px solid var(--border);
    align-items: start;
}
.rank-detailed .rank-no {
    padding-top: 4px;
}
.rank-main { min-width: 0; }
.rank-detailed .rank-name {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.rank-detailed .rank-name b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rank-detailed .rank-name small {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.rank-role {
    color: var(--purple);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}
.rank-detailed .badge {
    padding: 3px 8px;
    font-size: 8px;
}
.rank-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.rank-metrics span {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: 9px;
    color: var(--muted2);
    font-size: 9px;
    line-height: 1.35;
}
.rank-metrics i {
    font-style: normal;
    margin-right: 4px;
}
.rank-metrics b {
    display: block;
    color: var(--text);
    font-size: 13px;
    margin-top: 2px;
}
@media (max-width: 700px) {
    .rank-row.rank-detailed {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
        padding: 13px 4px;
    }
    .rank-detailed .rank-name {
        display: block;
    }
    .rank-detailed .rank-name small {
        margin-top: 5px;
    }
    .rank-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .rank-metrics span {
        padding: 7px 8px;
        font-size: 8px;
    }
    .rank-metrics b {
        font-size: 12px;
    }
}


/* Recovery compatibility */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px}
.modal{width:min(560px,100%);max-height:90vh;overflow:auto;margin:0}
.expired{background:rgba(248,113,128,.15);color:var(--red)}
.expiry-expired{color:var(--red)!important}
.extend{color:#f5c451!important}
.role-locked{display:none!important}
@media(max-width:900px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.mobilebar{display:flex}.main{margin-left:0}.wrap{padding:24px 18px}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stats{grid-template-columns:1fr}.login-card{padding:28px 22px}.title h1{font-size:32px}}

/* ===== MaMarzz Dev public landing ===== */
.landing{min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 15%,rgba(8,145,178,.16),transparent 36%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),var(--bg);background-size:auto,92px 92px,92px 92px,auto;padding-bottom:30px}
.landing-nav{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,64px);border-bottom:1px solid rgba(255,255,255,.05);background:rgba(5,5,8,.72);backdrop-filter:blur(16px);position:sticky;top:0;z-index:40}
.landing-brand{display:flex;align-items:center;gap:12px;color:#fff}.landing-brand .logo{width:44px;height:44px;border-radius:14px}.landing-brand span{display:flex;flex-direction:column}.landing-brand b{font-size:18px}.landing-brand small{font-size:8px;color:var(--muted);letter-spacing:.1em}.landing-nav nav{display:flex;align-items:center;gap:34px}.landing-nav nav a{font-weight:800;color:#e0fbff;font-size:13px;letter-spacing:.08em}.landing-login{padding:12px 24px;border:1px solid rgba(34,211,238,.45);border-radius:16px;background:rgba(8,145,178,.12);color:#a5f3fc;font-weight:900;font-size:14px}.hero{max-width:900px;margin:70px auto 0;padding:0 24px;text-align:center}.hero-logo-wrap{display:inline-grid;place-items:center;width:120px;height:120px;border-radius:28px;background:#000;box-shadow:0 0 70px rgba(8,145,178,.28);margin-bottom:28px}.hero-logo{width:92px;height:92px;border-radius:25px}.hero-badge{display:inline-block;padding:12px 25px;border:1px solid rgba(34,211,238,.45);border-radius:30px;background:rgba(8,145,178,.12);color:#a5f3fc;font-size:12px;font-weight:900;letter-spacing:.12em}.hero h1{font-size:clamp(44px,7vw,76px);line-height:.98;letter-spacing:-.06em;margin:36px 0 24px;font-weight:950}.hero h1 span{background:linear-gradient(135deg,#a5f3fc,var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero>p{max-width:760px;margin:auto;color:#9895a9;font-size:clamp(16px,2vw,21px);line-height:1.65}.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}.hero-primary,.hero-secondary{min-width:210px;padding:17px 25px;border-radius:18px;font-weight:900;font-size:15px}.hero-primary{background:linear-gradient(135deg,var(--purple2),#67e8f9);color:#fff;box-shadow:0 10px 40px rgba(34,211,238,.28)}.hero-secondary{border:1px solid var(--border-light);background:rgba(12,12,17,.75);color:#eee;display:inline-flex;align-items:center;justify-content:center}.landing-stats{max-width:1050px;margin:72px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.landing-stats div{padding:25px 15px;border:1px solid var(--border);border-radius:24px;background:rgba(16,18,31,.85);text-align:center}.landing-stats b{display:block;color:#22d3ee;font-size:31px;font-weight:950}.landing-stats span{display:block;color:#858397;font-size:11px;font-weight:900;letter-spacing:.08em;margin-top:4px}.feature-wrap{max-width:1050px;margin:74px auto 0;padding:0 24px}.section-title{display:flex;align-items:center;justify-content:center;gap:16px;color:#8f8a9e;letter-spacing:.16em;font-size:12px;margin-bottom:32px}.section-title span{width:54px;height:1px;background:var(--border)}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.feature-card{display:flex;gap:22px;padding:30px;border:1px solid var(--border);border-radius:26px;background:rgba(15,18,31,.9);box-shadow:0 15px 45px rgba(0,0,0,.15);transition:transform .2s,border-color .2s}.feature-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.45)}.feature-icon{flex:0 0 60px;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:rgba(8,145,178,.12);border:1px solid rgba(34,211,238,.25);font-size:27px}.feature-card h3{font-size:20px;margin-bottom:6px}.feature-card p{color:#8e8c9d;font-size:14px;line-height:1.7}.landing-cta{max-width:1050px;margin:70px auto 0;padding:58px 24px;text-align:center;border:1px solid rgba(34,211,238,.22);border-radius:30px;background:radial-gradient(circle at 50% 0,rgba(8,145,178,.14),transparent 60%),rgba(13,12,24,.8)}.landing-cta h2{font-size:38px;letter-spacing:-.04em}.landing-cta p{color:#8e8c9d;max-width:650px;margin:12px auto 26px}.landing-cta .hero-primary{min-width:230px}.landing-contact{display:flex;justify-content:center;gap:22px;margin-top:22px}.landing-contact a{color:#67e8f9;font-weight:800;cursor:pointer}.landing footer{text-align:center;color:#777487;margin:46px 20px 0;font-size:13px}.landing footer:first-letter{color:#67e8f9}.activity-summary{padding:12px 24px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--border)}
@media(max-width:760px){.landing-nav{height:72px}.landing-nav nav{gap:10px}.landing-nav nav>a:first-child{display:none}.hero{margin-top:46px}.hero-logo-wrap{width:105px;height:105px}.hero-logo{width:80px;height:80px}.hero-badge{font-size:9px;padding:10px 15px}.hero h1{font-size:44px;margin-top:27px}.hero>p{font-size:15px}.hero-actions{display:grid;grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}.hero-primary,.hero-secondary{width:100%;min-width:0}.landing-stats{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:48px}.landing-stats div{padding:18px 8px}.landing-stats b{font-size:25px}.feature-grid{grid-template-columns:1fr}.feature-card{padding:24px}.feature-card h3{font-size:18px}.landing-cta{margin-left:18px;margin-right:18px}.landing-cta h2{font-size:30px}.landing-nav .landing-brand b{font-size:16px}.activity-summary{padding:12px 16px}}

/* ===== PREMIUM DASHBOARD ===== */
.dash-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:190px;padding:30px 34px;margin-bottom:18px;border:1px solid var(--border);border-radius:24px;background:radial-gradient(circle at 78% 35%,rgba(34,211,238,.18),transparent 32%),radial-gradient(circle at 18% 110%,rgba(59,130,246,.10),transparent 38%),linear-gradient(135deg,#11111a,#0b0b11);box-shadow:0 20px 55px rgba(0,0,0,.25)}
.dash-hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to right,black,transparent 75%);pointer-events:none}
.dash-hero-copy{position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:8px;color:#aaa4c2;font-size:10px;font-weight:800;letter-spacing:.15em}.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(45,212,160,.08),0 0 14px rgba(45,212,160,.5);animation:pulse 2s infinite}.live-chip{font-size:8px;letter-spacing:.1em;padding:4px 7px;border-radius:999px;color:var(--green);background:rgba(45,212,160,.08);border:1px solid rgba(45,212,160,.18)}
@keyframes pulse{50%{opacity:.45;transform:scale(.85)}}.dash-hero h2{margin:12px 0 5px;font-size:28px;letter-spacing:-.04em}.dash-hero h2 span{background:linear-gradient(90deg,#fff,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}.dash-hero p{color:var(--muted);font-size:13px}.hero-meta{display:flex;gap:18px;margin-top:18px;color:#7f7997;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.hero-meta span:first-child{color:var(--green)}
.dash-hero-orb{position:absolute;right:7%;width:150px;height:150px;display:grid;place-items:center;z-index:1}.orb-ring{position:absolute;width:145px;height:145px;border-radius:50%;border:1px solid rgba(34,211,238,.22);box-shadow:0 0 70px rgba(8,145,178,.18),inset 0 0 40px rgba(34,211,238,.08);animation:spin 18s linear infinite}.orb-ring:before,.orb-ring:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)}.orb-ring:before{inset:15px}.orb-ring:after{inset:32px}.orb-core{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:27px;color:#fff;background:linear-gradient(145deg,#22d3ee,#0e4a5c);box-shadow:0 0 45px rgba(34,211,238,.35)}@keyframes spin{to{transform:rotate(360deg)}}
.dash-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}.dash-actions button{display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;text-align:left;padding:12px 14px;border:1px solid var(--border);border-radius:15px;background:var(--surface);transition:var(--transition)}.dash-actions button:hover{border-color:var(--border-light);background:var(--surface2);transform:translateY(-2px)}.dash-actions button>span{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(34,211,238,.1);color:#67e8f9;font-size:17px}.dash-actions b{font-size:12px}.dash-actions small{color:var(--muted2);font-size:9px}.dash-stats{margin-bottom:18px}.stat-top{display:flex;align-items:center;justify-content:space-between}.stat-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.04);font-size:14px}.stat-progress{height:3px;margin-top:14px;background:rgba(255,255,255,.05);border-radius:5px;overflow:hidden}.stat-progress i{display:block;height:100%;width:0;border-radius:5px;background:currentColor;transition:width .6s ease}.credit-line{display:flex;justify-content:space-between;align-items:center;margin-top:13px;color:var(--muted2);font-size:9px}.credit-line span:last-child{color:var(--green);font-size:7px}
.dash-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}.dash-grid.lower{grid-template-columns:1.15fr .85fr}.dash-panel{min-width:0}.panel-caption{display:block;color:var(--muted2);font-size:9px;margin-top:2px}.online-badge{font-size:8px;color:var(--green);font-weight:800;letter-spacing:.08em}.health-content{display:flex;align-items:center;gap:28px;padding:24px}.health-ring{width:126px;height:126px;flex:0 0 126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--purple) var(--health,0%),rgba(255,255,255,.05) 0);position:relative}.health-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}.health-ring>div{position:relative;text-align:center}.health-ring b{display:block;font-size:24px;letter-spacing:-.04em}.health-ring small{font-size:9px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}.health-bars{flex:1}.health-row{display:grid;grid-template-columns:88px 28px 1fr;align-items:center;gap:9px;margin:12px 0;font-size:10px}.health-row>span{color:var(--muted)}.health-row>b{text-align:right}.health-row>div{height:5px;border-radius:5px;background:rgba(255,255,255,.05);overflow:hidden}.health-row>div>i{display:block;width:0;height:100%;background:var(--purple);border-radius:5px;transition:width .6s ease}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px}.dot.active{background:var(--green)}.dot.warn{background:var(--yellow)}.dot.expired{background:var(--red)}
.mini-list{padding:8px 18px 16px}.mini-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.045)}.mini-row:last-child{border-bottom:0}.mini-key{min-width:0;flex:1}.mini-key b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-key small{color:var(--muted2);font-size:9px}.mini-days{font-size:10px;font-weight:800;color:var(--yellow);white-space:nowrap}.mini-empty{padding:30px 10px;text-align:center;color:var(--muted2);font-size:11px}.dash-panel .panel-head{padding:18px 20px}.dash-panel .panel-body{padding:4px 20px 18px}
@media(max-width:900px){.dash-grid,.dash-grid.lower{grid-template-columns:1fr}.dash-actions{grid-template-columns:repeat(2,1fr)}.dash-hero-orb{right:-20px;opacity:.55}.dash-hero{padding:24px}.hero-meta{gap:10px;flex-wrap:wrap}}
@media(max-width:600px){.dash-hero{min-height:210px}.dash-hero h2{font-size:23px}.dash-hero-orb{right:-45px;top:35px}.dash-actions{grid-template-columns:1fr 1fr}.health-content{gap:16px;padding:18px}.health-ring{width:100px;height:100px;flex-basis:100px}.health-row{grid-template-columns:72px 24px 1fr}}

/* ===== v9 UI POLISH — logout moved to header, sidebar stays navigation-only ===== */
.top-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-shrink:0;
}
.header-logout {
    min-height:42px;
    padding:9px 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid rgba(34,211,238,.28);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(8,145,178,.20),rgba(34,211,238,.08));
    color:#a5f3fc;
    font-size:12px;
    font-weight:800;
    transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease;
}
.header-logout:hover {
    transform:translateY(-1px);
    border-color:rgba(34,211,238,.65);
    background:linear-gradient(135deg,rgba(8,145,178,.34),rgba(34,211,238,.14));
    color:#fff;
    box-shadow:0 8px 24px rgba(8,145,178,.20);
}
.header-logout:active { transform:translateY(0); }
.logout-symbol { font-size:18px; line-height:1; }
.sidebar-footer { margin-top:auto; }
.sidebar-footer .side-status { margin-bottom:0; }

@media (max-width:900px) {
    .top {
        align-items:center;
        margin-bottom:20px;
    }
    .top-actions {
        width:100%;
        justify-content:flex-end;
    }
    .header-logout {
        min-height:38px;
        padding:8px 12px;
    }
}

@media (max-width:560px) {
    .top-actions { gap:7px; }
    .user-badge { max-width:calc(100% - 92px); overflow:hidden; }
    .user-badge #who { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .header-logout { padding:8px 10px; font-size:11px; }
    .header-logout .logout-symbol { font-size:16px; }
}

/* =========================================================
   V10 — PREMIUM DEPTH POLISH
   Additive only: no CSS variable overrides, so it can never
   clash with the base theme like the old white patch did.
   ========================================================= */
.panel {
    box-shadow: 0 18px 40px -30px rgba(0,0,0,.65);
}
.panel:hover {
    box-shadow: 0 22px 48px -26px rgba(8,145,178,.18);
    transform: translateY(-1px);
}
.feature-card, .stat, .dash-panel {
    transition: var(--transition);
}
.stat:hover, .dash-panel:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}
.btn-tool {
    transition: var(--transition);
}
.btn-tool:hover {
    border-color: var(--purple);
    color: #fff;
}
:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}
.table tbody tr {
    transition: background .18s ease;
}
.table tbody tr:hover {
    background: rgba(34,211,238,.05);
}
::selection {
    background: var(--purple-glow);
    color: #fff;
}

/* =========================================================
   V11 — OWNER TOOLS: broadcast / kill switch / export
   ========================================================= */
.field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font: inherit;
    font-weight: 450;
    resize: vertical;
    min-height: 90px;
}
.field textarea:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple-glow);
}
.field textarea::placeholder {
    color: var(--muted2);
    font-weight: 400;
}

.broadcast-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(34, 211, 238, .35);
    background: linear-gradient(135deg, rgba(8, 145, 178, .18), rgba(34, 211, 238, .06));
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    animation: fadeSlide .4s ease;
}
.broadcast-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.broadcast-banner[data-type="warning"] {
    border-color: rgba(251, 191, 36, .4);
    background: linear-gradient(135deg, rgba(251, 191, 36, .16), rgba(251, 191, 36, .05));
}
.broadcast-banner[data-type="error"] {
    border-color: rgba(251, 113, 133, .4);
    background: linear-gradient(135deg, rgba(251, 113, 133, .16), rgba(251, 113, 133, .05));
}
.broadcast-banner[data-type="success"] {
    border-color: rgba(45, 212, 191, .4);
    background: linear-gradient(135deg, rgba(45, 212, 191, .16), rgba(45, 212, 191, .05));
}

.killswitch-box {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.danger-btn {
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #dc2626, var(--red));
    color: #fff;
    padding: 14px 22px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    border: none;
    box-shadow: 0 4px 20px rgba(248, 113, 128, .3);
    transition: var(--transition);
}
.danger-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 28px rgba(248, 113, 128, .45);
}
.danger-btn:active {
    transform: scale(.97);
}

/* =========================================================
   V12 — PROFILE & TEAM CHAT
   ========================================================= */
.profile-id {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.profile-avatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
}
.profile-id b {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.chat-panel {
    display: flex;
    flex-direction: column;
    height: min(640px, 72vh);
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chat-msg {
    max-width: 78%;
    display: flex;
    gap: 8px;
    align-self: flex-start;
    animation: chatMsgIn .18s ease-out;
}
.chat-msg.mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}
@keyframes chatMsgIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-msg-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    background: rgba(34, 211, 238, .18);
    color: var(--purple);
    margin-top: 2px;
}
.chat-msg-avatar.role-admin { background: rgba(45, 212, 160, .15); color: var(--green); }
.chat-msg-avatar.role-reseller { background: rgba(251, 191, 36, .15); color: var(--yellow); }
.chat-msg-body {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    border: 1px solid var(--border);
    min-width: 0;
}
.chat-msg.mine .chat-msg-body {
    background: linear-gradient(135deg, rgba(8, 145, 178, .22), rgba(34, 211, 238, .10));
    border-color: rgba(34, 211, 238, .35);
}
.chat-msg.pinned .chat-msg-body {
    border-color: var(--yellow);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .25);
}
.chat-msg.pending .chat-msg-body {
    opacity: .6;
}
.chat-sending-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple);
    animation: chatPulse 1s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes chatPulse {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
}
.chat-msg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.chat-msg-name {
    font-size: 12px;
    font-weight: 800;
}
.chat-msg-role {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(34, 211, 238, .12);
    color: var(--purple);
}
.chat-msg-role.role-owner { background: rgba(34, 211, 238, .18); color: var(--purple); }
.chat-msg-role.role-admin { background: rgba(45, 212, 160, .15); color: var(--green); }
.chat-msg-role.role-reseller { background: rgba(251, 191, 36, .15); color: var(--yellow); }
.chat-pin-badge {
    font-size: 9px;
    color: var(--yellow);
    font-weight: 800;
}
.chat-msg-text {
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-msg-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.chat-msg-time {
    font-size: 9px;
    color: var(--muted2);
}
.chat-msg-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.chat-msg-actions button {
    font-size: 9px;
    font-weight: 700;
    color: var(--muted);
    transition: var(--transition);
}
.chat-msg-actions button:hover {
    color: var(--red);
}
.chat-msg-actions button.pin-btn:hover {
    color: var(--yellow);
}
.chat-empty {
    margin: auto;
    color: var(--muted2);
    font-size: 12px;
    text-align: center;
}
.chat-composer-wrap {
    border-top: 1px solid var(--border);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-composer-wrap > input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    border-radius: var(--radius-sm);
    font: inherit;
    box-sizing: border-box;
}
.chat-composer-wrap > input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple-glow);
}
.chat-composer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-composer-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}
.chat-counter {
    text-align: right;
    font-size: 9px;
    color: var(--muted2);
    margin-top: 2px;
}
.chat-counter.over {
    color: var(--red);
    font-weight: 700;
}
.chat-send-btn {
    flex: 1;
    min-width: 80px;
    padding: 12px 16px;
    width: auto;
}
.chat-send-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.chat-owner-btn {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0 !important;
}
/* Reply preview bar above the composer */
.chat-reply-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
}
.chat-reply-bar.hidden { display: none; }
.chat-reply-bar-line {
    width: 3px;
    align-self: stretch;
    background: var(--purple);
    border-radius: 2px;
}
.chat-reply-bar-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 11px;
}
.chat-reply-bar-body b { color: var(--purple); }
.chat-reply-bar-body span {
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-reply-cancel {
    flex: none;
    color: var(--muted);
    font-size: 14px;
    padding: 4px 8px;
}
.chat-reply-cancel:hover { color: var(--red); }

/* Reply quote rendered inside a sent message */
.chat-reply-quote {
    border-left: 3px solid var(--purple);
    background: rgba(34, 211, 238, .08);
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 6px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.chat-reply-quote b { color: var(--purple); font-size: 10px; }
.chat-reply-quote span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-msg.flash .chat-msg-body { animation: chatFlash 1.2s ease; }
@keyframes chatFlash {
    0%, 100% { box-shadow: none; }
    30% { box-shadow: 0 0 0 3px var(--purple-glow); }
}

/* Voice recording bar */
.chat-record-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: rgba(239, 68, 68, .08);
    border-top: 1px solid var(--border);
    font-size: 12px;
}
.chat-record-bar.hidden { display: none; }
.chat-record-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red);
    animation: chatPulse 1s ease-in-out infinite;
}
.chat-record-cancel, .chat-record-send {
    margin-left: auto;
    font-size: 11px;
    padding: 6px 10px;
    width: auto;
}
.chat-record-send { margin-left: 6px; }

@media (max-width:600px) {
}

@media (max-width:600px) {
    .chat-panel { height: min(560px, 78vh); }
    .chat-msg { max-width: 90%; }
}

/* ===== OWNER CONTROL PANEL ===== */
.chat-owner-btn {
    padding: 10px 14px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    color: #000;
    transition: all 0.2s ease;
}
.chat-owner-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.owner-control-panel {
    background: var(--surface2);
    border: 2px solid #FFD700;
    border-radius: var(--radius);
    margin: 12px 0;
    overflow: hidden;
    animation: slideDown 0.3s ease;
}
.owner-control-panel.hidden {
    display: none;
}

.owner-panel-header {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}
.owner-panel-header h3 {
    margin: 0;
    font-size: 14px;
}
.owner-panel-header .close-btn {
    background: rgba(0, 0, 0, 0.2);
    border: none;
    color: #000;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}
.owner-panel-header .close-btn:hover {
    background: rgba(0, 0, 0, 0.4);
}

.owner-panel-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding: 12px;
}

.owner-btn {
    padding: 12px 14px;
    background: var(--surface1);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: center;
}
.owner-btn:hover {
    border-color: #FFD700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}
.owner-btn.danger {
    border-color: #FF4444;
    color: #FF4444;
}
.owner-btn.danger:hover {
    background: rgba(255, 68, 68, 0.1);
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.2);
}

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

@media (max-width: 600px) {
    .owner-panel-content {
        grid-template-columns: repeat(2, 1fr);
    }
    .chat-composer-wrap {
        padding: 10px 12px;
        gap: 6px;
    }
    .chat-composer-wrap > input {
        padding: 10px 12px;
        font-size: 14px;
    }
    .chat-composer-buttons {
        gap: 6px;
        width: 100%;
    }
    .chat-send-btn {
        min-width: 70px;
        padding: 10px 12px;
        font-size: 13px;
        flex: 1;
    }
}

/* ===== MAINTENANCE MODE ===== */
.maintenance-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.maintenance-modal-content {
    background: var(--surface1);
    border: 2px solid #FFD700;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.maintenance-modal-content h2 {
    color: #FFD700;
    margin-bottom: 15px;
    font-size: 18px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    color: #ccc;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 13px;
}

.form-group textarea,
.form-group input {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface2);
    border: 1.5px solid #444;
    border-radius: 6px;
    color: #ccc;
    font: inherit;
    box-sizing: border-box;
}

.form-group textarea:focus,
.form-group input:focus {
    outline: none;
    border-color: #FFD700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.maintenance-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.maintenance-buttons button {
    padding: 12px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.btn-danger {
    background: #FF4444;
    color: white;
}

.btn-danger:hover {
    background: #FF5555;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
}

.maintenance-modal-content button:last-child {
    background: #444;
    color: #ccc;
}

.maintenance-modal-content button:last-child:hover {
    background: #555;
}

/* Maintenance Page (when enabled for non-owners) */
/* ========== PREMIUM MAINTENANCE / BANNED PAGE ========== */
.maintenance-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0b0d12;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    overflow: auto;
    padding: 24px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.maintenance-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 211, 238, 0.18), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(239, 68, 68, 0.08), transparent);
    pointer-events: none;
}

.maintenance-container {
    position: relative;
    text-align: center;
    background: rgba(17, 20, 28, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 460px;
    width: 100%;
    box-shadow: 
        0 0 0 1px rgba(255,255,255,0.03),
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(34, 211, 238, 0.08);
    animation: maint-fade-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes maint-fade-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.maintenance-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 50%;
    animation: none;
}

.maintenance-page.banned .maintenance-icon {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
}

.maintenance-page.maintenance .maintenance-icon {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.maintenance-container h1 {
    color: #f8fafc;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    line-height: 1.3;
}

.maintenance-container > p {
    color: #94a3b8;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 24px;
}

.maintenance-info {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 28px;
    text-align: left;
}

.maintenance-info p {
    margin: 0 0 8px;
    color: #94a3b8;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.maintenance-info p:last-child {
    margin-bottom: 0;
}

.maintenance-info b,
.maintenance-info strong {
    color: #e2e8f0;
    font-weight: 600;
}

.maintenance-info .reason-box {
    margin-top: 10px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.maintenance-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.maintenance-container button,
.maintenance-container .btn-maint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.maintenance-container .btn-maint-primary {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    color: #fff;
    box-shadow: 0 4px 14px rgba(34, 211, 238, 0.35);
}

.maintenance-container .btn-maint-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.45);
}

.maintenance-container .btn-maint-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.maintenance-container .btn-maint-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #f1f5f9;
}

.maintenance-pin-group {
    text-align: left;
    margin-bottom: 16px;
}

.maintenance-pin-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.maintenance-pin-group input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f1f5f9;
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.2s;
}

.maintenance-pin-group input:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
}

.maintenance-pin-err {
    min-height: 1.2em;
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: #f87171;
}

.maintenance-brand {
    margin-top: 28px;
    font-size: 0.75rem;
    color: #475569;
    letter-spacing: 0.03em;
}

@media (max-width: 520px) {
    .maintenance-container {
        padding: 36px 24px;
    }
    .maintenance-container h1 {
        font-size: 1.25rem;
    }
    .maintenance-icon {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
}



/* ===== MAMAR FIXES COMPLETE: role-safe page visibility ===== */
.page.role-lock {
    display: none !important;
}

/* Keep merged management cards consistent with existing theme. */
.card {
    background: var(--card2, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}


/* ===== OWNER CONTROL CENTER ===== */
.owner-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 30px;margin-bottom:18px;border:1px solid rgba(34,211,238,.22);border-radius:26px;background:radial-gradient(circle at 88% 18%,rgba(34,211,238,.16),transparent 32%),linear-gradient(135deg,rgba(16,22,30,.98),rgba(7,10,15,.96));box-shadow:0 18px 50px rgba(0,0,0,.22)}
.owner-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;border:1px solid rgba(34,211,238,.26);background:rgba(34,211,238,.08);color:#a5f3fc;font-size:10px;font-weight:900;letter-spacing:.12em}
.owner-hero h2{margin:12px 0 5px;font-size:clamp(24px,4vw,34px);letter-spacing:-.03em}
.owner-hero p{margin:0;color:var(--muted);max-width:720px;line-height:1.65}
.owner-hero-badge{flex:0 0 auto;padding:12px 15px;border-radius:16px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.24);color:#a5f3fc;font-size:11px;font-weight:900;letter-spacing:.08em}
.owner-hero-badge span{color:#34d399;margin-right:7px}
.owner-panel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.owner-panel-grid .owner-btn{min-height:108px;text-align:left;padding:18px;border-radius:20px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(18,22,30,.94),rgba(10,13,18,.96));color:var(--text);box-shadow:0 10px 28px rgba(0,0,0,.14);transition:transform .18s,border-color .18s,box-shadow .18s}
.owner-panel-grid .owner-btn:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.38);box-shadow:0 16px 36px rgba(8,145,178,.12)}
.owner-panel-grid .owner-btn.danger{border-color:rgba(248,113,113,.2)}
.owner-result-card{margin-top:16px;padding:14px 16px;border:1px dashed var(--border-light);border-radius:18px;background:rgba(255,255,255,.02);color:var(--muted);font-size:13px}
@media(max-width:1050px){.owner-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.owner-hero{align-items:flex-start;flex-direction:column;padding:22px}.owner-hero-badge{width:100%;text-align:center}.owner-panel-grid{grid-template-columns:1fr}}

/* ===== Owner Analytics Dashboard (ownerShowAnalytics) ===== */
.analytics-dash{display:flex;flex-direction:column;gap:16px;text-align:left}
.analytics-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.analytics-head h3{margin:0;font-size:16px;color:var(--text)}
.analytics-refresh{font-size:11px;color:var(--muted2)}
.analytics-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.analytics-stat{background:var(--card2,var(--surface2));border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center}
.analytics-stat-value{font-size:20px;font-weight:800;line-height:1.2}
.analytics-stat-label{font-size:11px;color:var(--muted2);margin-top:4px}
.analytics-health{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.analytics-health-label{font-size:12px;color:var(--muted);flex:1 1 100%}
.analytics-health .analytics-bar-track{flex:1}
.analytics-health-pct{font-size:13px;font-weight:700;min-width:42px;text-align:right}
.analytics-section-title{font-size:13px;font-weight:700;color:var(--text);margin-top:4px}
.analytics-bars{display:flex;flex-direction:column;gap:8px}
.analytics-bar-row{display:flex;align-items:center;gap:10px}
.analytics-bar-label{font-size:12px;color:var(--muted);width:150px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.analytics-bar-track{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.analytics-bar-fill{height:100%;border-radius:6px;transition:width .3s ease}
.analytics-bar-value{font-size:12px;font-weight:700;width:32px;text-align:right;flex:none}
@media(max-width:640px){.analytics-bar-label{width:96px}}

/* Role separation: no page may appear active for a forbidden role. */
.page.owner-only.role-locked,.page.owner-admin-only.role-locked{display:none!important}
#side .nav button.role-hidden{display:none!important}


/* Script API key manager */
.api-secret-box {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 220, 255, .08), rgba(124, 58, 237, .06));
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}
.api-secret-box code {
  color: #00d9ff;
  font-weight: 700;
}
@media (max-width: 700px) {
  .api-secret-box { font-size: 12px; }
}


/* ============================================================
   MAMARZ DEV — 2026 PREMIUM UI REFRESH
   Remaining visual accents not yet folded into their base rules
   above. (Color tokens + body background were consolidated into
   the single :root/body block at the top of this file.)
   ============================================================ */
.logo,.primary,.btn-primary{background:linear-gradient(135deg,#0891b2,#22d3ee)!important;box-shadow:0 8px 28px rgba(34,211,238,.22)!important}
.primary:hover,.btn-primary:hover{box-shadow:0 10px 36px rgba(34,211,238,.30)!important}
.sidebar{background:linear-gradient(180deg,rgba(5,17,23,.98),rgba(4,13,18,.98));border-right:1px solid rgba(73,126,146,.22);}
.sidebrand,.topbar{background:rgba(6,16,21,.82);backdrop-filter:blur(14px);}
.topbar{position:sticky;top:0;z-index:24;border-bottom:1px solid rgba(73,126,146,.18);}
.header-badge,.role-badge,.badge{border-radius:999px!important}
.panel,.stat-card{border-radius:18px!important}
.panel-head{border-bottom:1px solid rgba(73,126,146,.16);}
.field input,.field select,.search-box input,.form-control{background:#0a1b23!important;border-color:#234451!important;color:#eaffff!important;}
.field input:focus,.field select:focus,.search-box input:focus,.form-control:focus{border-color:#22d3ee!important;box-shadow:0 0 0 3px rgba(34,211,238,.11)!important}
.table-wrap table{border-collapse:separate;border-spacing:0 7px!important}
.table-wrap tbody tr{background:rgba(11,28,36,.78)!important;}
.table-wrap tbody td:first-child{border-radius:12px 0 0 12px}.table-wrap tbody td:last-child{border-radius:0 12px 12px 0}
.btn-act{border:1px solid rgba(87,145,164,.24)!important;background:rgba(17,43,54,.82)!important;border-radius:10px!important;transition:.16s ease}
.btn-act:hover{border-color:#22d3ee!important;color:#d8fbff!important;transform:translateY(-1px)}
.btn-act.danger{border-color:rgba(251,113,133,.28)!important}
.footer{color:#638290!important;}
.mobile-bottom,.mobile-bar{background:rgba(5,16,21,.92)!important;backdrop-filter:blur(16px);border-top:1px solid rgba(73,126,146,.2)!important}
@media(max-width:800px){
 .topbar{padding:10px 12px!important}.panel{border-radius:15px!important}
 .actions{flex-wrap:wrap;gap:6px}.btn-act{min-height:34px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================================================
   ANIMATION ENHANCEMENTS 2026-09-18c
   Entrance animations, page-transition polish, staggered card
   reveals, number count-up support, button press feedback, and
   Command Palette open/close motion.
   ============================================================ */

/* ---- Smoother page transition (replaces base fadeSlide easing) ---- */
.page {
    animation: pageIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes pageIn {
    0%   { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(2px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ---- Thin top progress bar, pulsed on every go() navigation ---- */
#navProgress {
    position: fixed; top: 0; left: 0; height: 2.5px; width: 0%;
    background: linear-gradient(90deg, var(--purple2), var(--purple), #67e8f9);
    z-index: 10000; opacity: 0;
    box-shadow: 0 0 10px rgba(34,211,238,.7);
    transition: width .28s ease, opacity .2s ease;
    pointer-events: none;
}
#navProgress.running { opacity: 1; width: 78%; }
#navProgress.done { opacity: 0; width: 100%; transition: width .18s ease, opacity .35s ease .1s; }

/* ---- Staggered entrance for repeating card/button grids ---- */
.dash-actions button,
.stats.dash-stats > .stat,
.owner-panel-grid .owner-btn,
.feature-grid .feature-card,
.landing-stats > div {
    animation: cardRise .5s cubic-bezier(.16,1,.3,1) both;
}
.dash-actions button:nth-child(1), .stats.dash-stats > .stat:nth-child(1), .owner-panel-grid .owner-btn:nth-child(1), .feature-grid .feature-card:nth-child(1), .landing-stats > div:nth-child(1) { animation-delay: .03s; }
.dash-actions button:nth-child(2), .stats.dash-stats > .stat:nth-child(2), .owner-panel-grid .owner-btn:nth-child(2), .feature-grid .feature-card:nth-child(2), .landing-stats > div:nth-child(2) { animation-delay: .08s; }
.dash-actions button:nth-child(3), .stats.dash-stats > .stat:nth-child(3), .owner-panel-grid .owner-btn:nth-child(3), .feature-grid .feature-card:nth-child(3), .landing-stats > div:nth-child(3) { animation-delay: .13s; }
.dash-actions button:nth-child(4), .stats.dash-stats > .stat:nth-child(4), .owner-panel-grid .owner-btn:nth-child(4), .feature-grid .feature-card:nth-child(4), .landing-stats > div:nth-child(4) { animation-delay: .18s; }
.owner-panel-grid .owner-btn:nth-child(n+5) { animation-delay: .22s; }
@keyframes cardRise {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- Sidebar nav: animated active pill + icon pop ---- */
.nav button[data-page] { transition: background .2s ease, color .2s ease, transform .15s ease; }
.nav button[data-page].active { animation: navPop .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes navPop { 0% { transform: scale(.96); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* ---- Universal press feedback (feels tactile on click/tap) ---- */
button:not(:disabled):active,
.btn-act:active, .btn-tool:active, .owner-btn:active,
.chat-send-btn:active,
.cmd-palette-trigger:active, .cmd-palette-item:active {
    transform: scale(.96);
    transition: transform .1s ease;
}

/* ---- Number count-up target (used by animateNumber() in app.js) ---- */
.num, .analytics-stat-value, #healthPercent { transition: color .3s ease; }
.num.counting { color: var(--purple); }

/* ---- Command Palette open/close motion ---- */
.cmd-palette-overlay {
    animation: cmdOverlayIn .18s ease;
}
.cmd-palette-overlay.closing { animation: cmdOverlayOut .16s ease forwards; }
.cmd-palette-box {
    animation: cmdBoxIn .22s cubic-bezier(.16,1,.3,1);
}
.cmd-palette-overlay.closing .cmd-palette-box { animation: cmdBoxOut .16s ease forwards; }
@keyframes cmdOverlayIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cmdOverlayOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cmdBoxIn { 0% { opacity: 0; transform: translateY(-14px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cmdBoxOut { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(.97); } }
.cmd-palette-item { transition: background .15s ease, transform .1s ease; }

/* ---- Analytics dashboard bars: animate width in from 0 ---- */
.analytics-bar-fill { animation: barGrow .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes barGrow { 0% { width: 0 !important; } }
.analytics-stat { animation: cardRise .45s cubic-bezier(.16,1,.3,1) both; }

/* ---- Logo / brand subtle idle glow pulse on landing ---- */
.hero-logo-wrap { animation: logoGlow 3.4s ease-in-out infinite; }
@keyframes logoGlow {
    0%, 100% { box-shadow: 0 0 70px rgba(8,145,178,.28); }
    50%      { box-shadow: 0 0 95px rgba(34,211,238,.42); }
}

/* ---- Alert boxes (Kill Switch warning, etc.) — theme-aware, not hardcoded
   light colors. Previously ".alert.alert-danger" had no rule at all (fell
   back to plain .card), and the "reasons" box below it used a hardcoded
   light-mode #fff3cd background that rendered near-white text on a
   near-white box in this dark theme. Fixed to use the theme's own red/
   yellow variables so contrast always matches the rest of the UI. ---- */
.alert {
    border: 1px solid var(--border);
    animation: cardRise .4s cubic-bezier(.16,1,.3,1) both;
}
.alert-danger {
    background: linear-gradient(135deg, rgba(251,113,133,.14), rgba(251,113,133,.05));
    border: 1px solid rgba(251,113,133,.35);
}
.alert-danger h3 { color: var(--red); }
.killswitch-reason-box {
    margin-top: 20px;
    padding: 16px;
    background: rgba(251,191,36,.10);
    border: 1px solid rgba(251,191,36,.3);
    border-left: 4px solid var(--yellow);
    border-radius: 8px;
    color: var(--text);
    animation: cardRise .45s cubic-bezier(.16,1,.3,1) both;
    animation-delay: .05s;
}
.killswitch-reason-box strong { color: var(--yellow); }
.killswitch-reason-box li { color: var(--muted); }

/* ---- Broadcast / Kill Switch / Manage pages: smooth staggered panel entrance ---- */
#broadcast.page.active .panel,
#killswitch.page.active .panel,
#resellers.page.active .panel,
#admins.page.active .panel,
#createReseller.page.active .panel,
#createAdmin.page.active .panel {
    animation: cardRise .5s cubic-bezier(.16,1,.3,1) both;
}
#broadcast.page.active .panel:nth-of-type(2),
#killswitch.page.active .panel:nth-of-type(2) { animation-delay: .06s; }
#killswitch.page.active .panel:nth-of-type(3) { animation-delay: .12s; }
.panel.alert-danger {
    background: linear-gradient(135deg, rgba(251,113,133,.14), rgba(251,113,133,.05));
    border: 1px solid rgba(251,113,133,.35);
}

/* ---- Script API one-time secret reveal: row layout + copy button + a
   gentle "just appeared" pulse so the reveal itself feels intentional
   instead of a plain alert() dump. ---- */
.api-secret-reveal { display: flex; flex-direction: column; gap: 8px; }
.api-secret-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.api-secret-row code { flex: 1 1 auto; min-width: 0; }
.api-secret-pulse { animation: apiSecretPulse .6s cubic-bezier(.16,1,.3,1); }
@keyframes apiSecretPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,217,255,.45); transform: scale(.98); }
    60%  { box-shadow: 0 0 0 10px rgba(0,217,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,217,255,0); transform: scale(1); }
}


/* ============================================================
   LIVE MOTION PACK 2026-09-18f
   Soft ambient motion, table row stagger, badge pulse, hover
   lift, shimmer buttons, sidebar glow — all respect
   prefers-reduced-motion (disabled by the global rule above).
   ============================================================ */

/* ---- Ambient floating orbs behind the whole app shell ---- */
#app {
    position: relative;
    isolation: isolate;
}
#app::before,
#app::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .22;
    animation: orbFloat 14s ease-in-out infinite;
}
#app::before {
    width: 420px; height: 420px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, rgba(34,211,238,.55), transparent 70%);
}
#app::after {
    width: 380px; height: 380px;
    bottom: -100px; right: -40px;
    background: radial-gradient(circle, rgba(167,139,250,.5), transparent 70%);
    animation-delay: -7s;
    animation-duration: 18s;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, 20px) scale(1.08); }
    66%      { transform: translate(-20px, 35px) scale(.94); }
}
.main { position: relative; z-index: 1; }
.sidebar { z-index: 30; }

/* ---- Soft breathing glow on the active sidebar item ---- */
.nav button[data-page].active {
    box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 0 18px rgba(34,211,238,.12);
    animation: navPop .28s cubic-bezier(.34,1.56,.64,1), navGlow 2.8s ease-in-out infinite;
}
@keyframes navGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(34,211,238,.22), 0 0 14px rgba(34,211,238,.10); }
    50%      { box-shadow: 0 0 0 1px rgba(34,211,238,.38), 0 0 22px rgba(34,211,238,.22); }
}

/* ---- Nav icons subtle idle bob (only when not active) ---- */
.nav button[data-page]:not(.active) .icon {
    display: inline-block;
    transition: transform .25s ease;
}
.nav button[data-page]:not(.active):hover .icon {
    transform: translateY(-2px) scale(1.08);
    animation: iconBob .9s ease-in-out infinite;
}
@keyframes iconBob {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(-5px); }
}

/* ---- Panel / card hover lift with soft glow ---- */
.panel, .dash-panel, .stat-card, .stat {
    transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.panel:hover, .dash-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(34,211,238,.12);
}
.stat:hover, .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.25), 0 0 20px rgba(34,211,238,.08);
}

/* ---- Primary buttons: subtle shimmer sweep on hover ---- */
.primary, button.primary, .btn-primary {
    position: relative;
    overflow: hidden;
}
.primary::after, button.primary::after, .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events: none;
}
.primary:hover::after, button.primary:hover::after, .btn-primary:hover::after {
    transform: translateX(120%);
}

/* ---- Status badges: soft live pulse for "active" ---- */
.badge.active, span.badge.active, .dot.active {
    animation: badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.45); }
    50%      { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}
.dot.active {
    box-shadow: 0 0 0 0 rgba(52,211,153,.5);
}

/* ---- Table rows: staggered fade-in when page opens / data loads ---- */
.table tbody tr {
    animation: rowIn .4s cubic-bezier(.16,1,.3,1) both;
}
.table tbody tr:nth-child(1)  { animation-delay: .02s; }
.table tbody tr:nth-child(2)  { animation-delay: .05s; }
.table tbody tr:nth-child(3)  { animation-delay: .08s; }
.table tbody tr:nth-child(4)  { animation-delay: .11s; }
.table tbody tr:nth-child(5)  { animation-delay: .14s; }
.table tbody tr:nth-child(6)  { animation-delay: .17s; }
.table tbody tr:nth-child(7)  { animation-delay: .20s; }
.table tbody tr:nth-child(8)  { animation-delay: .23s; }
.table tbody tr:nth-child(9)  { animation-delay: .26s; }
.table tbody tr:nth-child(10) { animation-delay: .29s; }
.table tbody tr:nth-child(n+11) { animation-delay: .32s; }
@keyframes rowIn {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.table tbody tr {
    transition: background .18s ease, transform .18s ease;
}
.table tbody tr:hover {
    transform: translateX(3px);
}

/* ---- Form fields: soft focus glow ---- */
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 0 16px rgba(34,211,238,.08);
    border-color: rgba(34,211,238,.55);
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* ---- Result / success box pop-in ---- */
#result, .result-box, .api-secret-box {
    animation: successPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes successPop {
    0%   { opacity: 0; transform: scale(.92) translateY(6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Online / live indicator breathing ---- */
.online-badge, .live-dot {
    animation: liveBreath 1.8s ease-in-out infinite;
}
@keyframes liveBreath {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* ---- Sidebar logo soft rotate-glow idle ---- */
.sidebar .logo, #side .logo, .brand-logo {
    animation: logoIdle 5s ease-in-out infinite;
}
@keyframes logoIdle {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(34,211,238,.25)); transform: rotate(0deg); }
    50%      { filter: drop-shadow(0 0 14px rgba(34,211,238,.45)); transform: rotate(-2deg); }
}

/* ---- Toolbar buttons slight slide on hover ---- */
.btn-tool, .btn-act {
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-tool:hover, .btn-act:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* ---- Broadcast banner slide + soft pulse border ---- */
.broadcast-banner:not(.hidden) {
    animation: bannerSlide .4s cubic-bezier(.16,1,.3,1), bannerPulse 3s ease-in-out infinite .4s;
}
@keyframes bannerSlide {
    0%   { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes bannerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(34,211,238,0); }
}

/* ---- Health ring slow spin accent (decorative ring only) ---- */
.health-ring {
    animation: ringSpin 12s linear infinite;
}
@keyframes ringSpin {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(25deg); }
}

/* ---- Empty state gentle float ---- */
.empty-state {
    animation: emptyFloat 3.5s ease-in-out infinite;
}
@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); opacity: .75; }
    50%      { transform: translateY(-4px); opacity: 1; }
}

/* ---- Modal open spring ---- */
.modal-overlay .modal, .modal-overlay .panel {
    animation: modalSpring .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalSpring {
    0%   { opacity: 0; transform: scale(.9) translateY(12px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Skeleton shimmer utility (if used) ---- */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 8px;
}


/* ============================================================
   MaMarzz Dev 2026 UI refresh — contrast-first + responsive polish
   ============================================================ */
:root { --purple: var(--accent); --purple2: var(--accent-strong); --purple-glow: var(--accent-soft); color-scheme: dark; }
:root[data-theme="light"] {
    /* Light theme: soft gray-blue, not pure white, readable contrast */
    --bg:#dfe8ec;
    --surface:#f0f5f7;
    --surface2:#e4eef1;
    --border:#b7c9d0;
    --border-light:#9bb0b9;
    --text:#0f1e24;
    --muted:#4a6069;
    --muted2:#6a8089;
    --accent:#0e7490;
    --accent-strong:#0f766e;
    --accent-soft:rgba(14,116,144,.14);
    --purple:var(--accent);
    --purple2:var(--accent-strong);
    --purple-glow:var(--accent-soft);
    --green:#0d9488;
    --yellow:#b45309;
    --red:#be123c;
    color-scheme:light;
    --card-glow:0 10px 28px rgba(15,30,36,.08);
}
:root[data-theme="light"] .dash-hero {
    background: linear-gradient(135deg, #e8f4f7, #d5e8ee) !important;
    border-color: var(--border) !important;
}
:root[data-theme="light"] .dash-hero h2,
:root[data-theme="light"] .dash-hero h2 span {
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    background: none !important;
}
:root[data-theme="light"] .title h1,
:root[data-theme="light"] .title h1 span {
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    background: none !important;
}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .owner-btn {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
:root[data-theme="light"] .table th {
    background: var(--surface2) !important;
    color: var(--text) !important;
}
:root[data-theme="light"] .table td {
    color: var(--text) !important;
}
body { transition: background .25s ease, color .25s ease; }
button, .btn-tool, .btn-act, .owner-btn, .primary, .btn-primary, .btn-danger { min-height:38px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:var(--focus-ring); }
.panel, .owner-hero, .feature-card, .login-card { box-shadow:var(--card-glow); }
.panel-head { gap:16px; }
.panel-caption, .sub-label, .maintenance-hint { color:var(--muted); }
.table-wrap { border-radius:14px; overflow:auto; border:1px solid var(--border); }
.table th { position:sticky; top:0; z-index:1; backdrop-filter:blur(12px); }
.primary, .btn-primary { background:linear-gradient(135deg,var(--accent-strong),var(--accent)); }
.btn-tool:hover, .btn-act:hover, .owner-btn:hover { border-color:color-mix(in srgb, var(--accent) 48%, var(--border)); }

/* Prevent the old dark landing/login surfaces from becoming unreadable in light mode. */
:root[data-theme="light"] .login,
:root[data-theme="light"] .landing { background:radial-gradient(900px 500px at 85% -5%, rgba(8,145,178,.12), transparent 62%), var(--bg); color:var(--text); }
:root[data-theme="light"] .login-card,
:root[data-theme="light"] .hero-card,
:root[data-theme="light"] .feature-card { background:rgba(255,255,255,.96); border-color:var(--border); color:var(--text); }
:root[data-theme="light"] .login-card h1,
:root[data-theme="light"] .login-card p,
:root[data-theme="light"] .landing h1,
:root[data-theme="light"] .landing h2,
:root[data-theme="light"] .landing h3,
:root[data-theme="light"] .landing p { color:var(--text); }
:root[data-theme="light"] .sidebar, :root[data-theme="light"] #side { background:rgba(255,255,255,.96); border-color:var(--border); }
:root[data-theme="light"] .sidebar .nav button, :root[data-theme="light"] #side .nav button { color:var(--muted); }
:root[data-theme="light"] .sidebar .nav button:hover, :root[data-theme="light"] #side .nav button:hover { color:var(--text); background:var(--accent-soft); }
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background:#fff; color:var(--text); border-color:var(--border); }
:root[data-theme="light"] code { background:#eaf4f6; color:#0e6478; }

.maintenance-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; background:rgba(2,14,18,.72); backdrop-filter:blur(10px); }
.maintenance-modal-content { width:min(540px,100%); padding:24px; border:1px solid var(--border-light); border-radius:20px; background:linear-gradient(155deg,var(--surface2),var(--surface)); box-shadow:0 28px 80px rgba(0,0,0,.45); }
.maintenance-modal-content .form-group { margin:15px 0; }
.maintenance-modal-content textarea, .maintenance-modal-content input { width:100%; }
.maintenance-status-line { color:var(--muted); margin-bottom:15px; }
.maintenance-hint { display:block; margin-top:6px; font-size:11px; }

@media (max-width: 760px) {
    body { font-size:14px; }
    .panel-head { align-items:flex-start; flex-wrap:wrap; }
    .toolbar { flex-wrap:wrap; }
    .toolbar input, .toolbar select { min-width:0; flex:1 1 180px; }
    .actions { flex-wrap:wrap; }
    .table { min-width:760px; }
    .login { padding:14px; }
    .login-card { padding:26px 20px; border-radius:18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

/* ============================================================
   UI polish 2026-09-19 — forms, contact, motion
   ============================================================ */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 16px;
}
@media (max-width: 700px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}
.mode-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-toggle .btn-tool.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  font-size: 13px;
  color: var(--muted);
}
.cost-chip b { color: var(--accent); font-size: 14px; }
.btn-glow {
  box-shadow: 0 8px 28px rgba(8, 145, 178, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(34, 211, 238, .4);
}
.btn-glow:active { transform: translateY(0); }
.bulk-result-box {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: rgba(0,0,0,.12);
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  max-height: 280px;
  overflow: auto;
}
.result-pop { animation: resultPop .45s cubic-bezier(.16,1,.3,1); }
@keyframes resultPop {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* Contact cards */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 800px) {
  .contact-cards { grid-template-columns: 1fr; }
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}
.contact-card b { display: block; font-size: 15px; }
.contact-card small { color: var(--muted2); font-size: 11px; }
.contact-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contact-arrow {
  margin-left: auto;
  opacity: .5;
  font-size: 18px;
  transition: transform .2s ease, opacity .2s;
}
.contact-card:hover .contact-arrow { transform: translateX(4px); opacity: 1; }
.contact-card.wa:hover { border-color: #25d366; }
.contact-card.tg:hover { border-color: #2aabee; }
.contact-card.tt:hover { border-color: #fe2c55; }
.wa-icon { background: rgba(37, 211, 102, .15); color: #25d366; }
.tg-icon { background: rgba(42, 171, 238, .15); color: #2aabee; }
.tt-icon { background: rgba(254, 44, 85, .12); color: #fe2c55; }

.contact-marquee {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  margin-bottom: 4px;
}
.contact-marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marqueeX 22s linear infinite;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--accent);
  text-transform: uppercase;
}
.contact-marquee-track span { padding-right: 2rem; white-space: nowrap; }
@keyframes marqueeX {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Motion: rise / float / shimmer text */
.anim-rise {
  animation: animRise .55s cubic-bezier(.16,1,.3,1);
}
@keyframes animRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.dash-hero h2 span,
.key-highlight {
  background-size: 200% auto;
  animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.stat, .owner-btn, .dash-actions button {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat:hover, .owner-btn:hover, .dash-actions button:hover {
  transform: translateY(-3px);
}
.live-chip, .nav-badge, .online-badge {
  animation: badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.status-dot {
  animation: statusBlink 1.8s ease-in-out infinite;
}
@keyframes statusBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 160, .5); }
  50% { box-shadow: 0 0 0 6px rgba(45, 212, 160, 0); }
}
.orb-core {
  animation: orbBob 3.5s ease-in-out infinite;
}
@keyframes orbBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Floating particles layer (subtle) */
.main .wrap::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 12% 28%, rgba(34,211,238,.45), transparent),
    radial-gradient(2px 2px at 78% 18%, rgba(103,232,249,.35), transparent),
    radial-gradient(1.5px 1.5px at 42% 72%, rgba(34,211,238,.3), transparent),
    radial-gradient(2px 2px at 88% 64%, rgba(167,139,250,.25), transparent);
  animation: particleDrift 18s linear infinite;
  opacity: .55;
}
@keyframes particleDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}
.main .wrap > * { position: relative; z-index: 1; }

:root[data-theme="light"] .bulk-result-box { background: rgba(255,255,255,.6); }
:root[data-theme="light"] .contact-card { background: #fff; }
.login-contact-row { margin-top: 16px; text-align: center; }
.login-contact-btns {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.login-soc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--border); font-size: 12px; font-weight: 700;
  text-decoration: none; color: var(--text);
  transition: transform .18s ease, border-color .18s;
}
.login-soc:hover { transform: translateY(-2px); }
.login-soc.wa { color: #25d366; border-color: rgba(37,211,102,.35); }
.login-soc.tg { color: #2aabee; border-color: rgba(42,171,238,.35); }
.login-soc.tt { color: #fe2c55; border-color: rgba(254,44,85,.3); }

/* ============================================================
   Owner exclusive Command Center UI
   ============================================================ */
.owner-hero-pro {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px 30px;
  margin-bottom: 18px;
  border: 1px solid rgba(34,211,238,.28);
  background:
    radial-gradient(circle at 90% 20%, rgba(34,211,238,.2), transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(167,139,250,.12), transparent 45%),
    linear-gradient(135deg, #0c1820, #0a1218);
}
.owner-pulse-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 1100px) {
  .owner-pulse-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .owner-pulse-grid { grid-template-columns: repeat(2, 1fr); }
}
.owner-pulse-card {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface2);
  transition: transform .2s ease, border-color .2s;
}
.owner-pulse-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.owner-pulse-card .op-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}
.owner-pulse-card b {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text);
}
.owner-pulse-card .op-bar {
  height: 3px;
  margin-top: 10px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.owner-pulse-card .op-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--accent);
  transition: width .6s ease;
}
.owner-pulse-card.green .op-bar i { background: var(--green); }
.owner-pulse-card.yellow .op-bar i { background: var(--yellow); }
.owner-pulse-card.blue .op-bar i { background: #3b82f6; }
.owner-pulse-card.purple .op-bar i { background: #a78bfa; }
.owner-pulse-card.cyan .op-bar i { background: #22d3ee; }

.owner-section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 12px;
}

.owner-exclusive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .owner-exclusive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .owner-exclusive-grid { grid-template-columns: 1fr; }
}
.owner-x-card {
  text-align: left;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(34,211,238,.06), transparent 50%), var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
  min-height: 110px;
}
.owner-x-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 14px 36px rgba(0,0,0,.2);
}
.owner-x-card .ox-icon {
  display: block;
  font-size: 22px;
  margin-bottom: 8px;
}
.owner-x-card b {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.owner-x-card small {
  color: var(--muted2);
  font-size: 11px;
  line-height: 1.4;
}

.ox-report h3 { margin: 0 0 10px; font-size: 16px; }
.ox-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}
.ox-stats div {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  text-align: center;
}
.ox-stats b { display: block; font-size: 20px; color: var(--accent); }
.ox-stats span { font-size: 10px; color: var(--muted2); font-weight: 700; }
.ox-factory-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ox-pre {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.2);
  font-size: 12px;
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  color: var(--text);
}
#ownerVaultText {
  width: 100%;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  padding: 12px;
  font: inherit;
  resize: vertical;
}
:root[data-theme="light"] .owner-hero-pro {
  background: linear-gradient(135deg, #e6f3f7, #d5e8ef);
  border-color: var(--border);
}
:root[data-theme="light"] .ox-pre { background: #fff; }

/* ===== SUPER GACOR OWNER ENHANCEMENTS 2026-09-19 ===== */

.owner-x-card.gacor {
  border-color: rgba(251, 191, 36, 0.45) !important;
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.12), rgba(14, 34, 44, 0.92)) !important;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}
.owner-x-card.gacor:hover {
  border-color: rgba(251, 191, 36, 0.7) !important;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 36px rgba(251, 191, 36, 0.22);
}
.owner-x-card.gacor .ox-icon {
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}
.owner-x-card.gacor b {
  color: #fbbf24;
}

body.gacor-mode {
  --accent: #fbbf24;
  --purple: #fbbf24;
  --purple2: #f59e0b;
  --purple-glow: rgba(251, 191, 36, 0.2);
}
body.gacor-mode .sidebar {
  border-right-color: rgba(251, 191, 36, 0.25);
}
body.gacor-mode .status-dot {
  background: #fbbf24 !important;
  box-shadow: 0 0 10px #fbbf24;
}

.gacor-glow {
  animation: gacorPulse 2.2s ease-in-out infinite;
}
@keyframes gacorPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.25); }
  50% { box-shadow: 0 0 20px 4px rgba(251, 191, 36, 0.35); }
}

/* Better exclusive grid */
.owner-exclusive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.owner-x-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(18, 28, 36, 0.95), rgba(8, 16, 22, 0.98));
  text-align: left;
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1), border-color 0.22s, box-shadow 0.22s;
  min-height: 120px;
}
.owner-x-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 14px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(34,211,238,0.1);
}
.owner-x-card .ox-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
}
.owner-x-card b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.owner-x-card small {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Premium result card */
.owner-result-card {
  margin-top: 8px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  background: linear-gradient(145deg, rgba(12, 24, 32, 0.9), rgba(6, 14, 20, 0.95));
  min-height: 60px;
  font-size: 13.5px;
  line-height: 1.55;
}

/* Global polish upgrades */
.panel {
  border-radius: 22px;
  border: 1px solid rgba(34, 211, 238, 0.12);
  background: linear-gradient(165deg, rgba(14, 26, 34, 0.92), rgba(7, 14, 20, 0.96));
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
}
.panel-head h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.btn-tool, .btn-act, .primary, .btn-primary {
  border-radius: 12px;
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.btn-tool:hover, .btn-act:hover {
  transform: translateY(-1px);
}
.primary, .btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--purple2));
  box-shadow: 0 6px 20px var(--purple-glow);
}
.primary:hover, .btn-primary:hover {
  box-shadow: 0 8px 28px var(--purple-glow);
  filter: brightness(1.08);
}

/* Table polish */
table {
  border-collapse: separate;
  border-spacing: 0;
}
table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted2);
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(28, 53, 65, 0.5);
  font-size: 13.5px;
}
table tr:hover td {
  background: rgba(34, 211, 238, 0.04);
}

/* Badge upgrade */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge.active {
  background: rgba(45, 212, 191, 0.15);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.3);
}
.badge.ban, .badge.banned {
  background: rgba(251, 113, 133, 0.15);
  color: #fb7185;
  border: 1px solid rgba(251, 113, 133, 0.3);
}

/* Sidebar active glow stronger */
.nav button.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.14), transparent);
  border-left: 3px solid var(--accent);
  color: var(--accent);
}

/* Mobile friendly exclusive grid */
@media (max-width: 640px) {
  .owner-exclusive-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .owner-x-card {
    min-height: 110px;
    padding: 14px 12px;
  }
}

/* Hierarchy feature cards */
.owner-x-card.hierarchy {
  border-color: rgba(34, 211, 238, 0.35) !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.08), rgba(14, 34, 44, 0.92)) !important;
}
.owner-x-card.hierarchy:hover {
  border-color: rgba(34, 211, 238, 0.6) !important;
  box-shadow: 0 12px 32px rgba(34, 211, 238, 0.15);
}
.owner-x-card.hierarchy b {
  color: #67e8f9;
}

/* Final polish 2026-09-19 */
.owner-section-title {
  margin: 22px 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.owner-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.owner-result-card {
  animation: fadeSlide 0.35s ease;
}
.owner-exclusive-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
@media (max-width: 900px) {
  .owner-exclusive-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
/* Smoother page transitions */
.page {
  animation: pageIn 0.3s ease;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}