@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --brand:        #000000;
    --brand-light:  #ffffff;
    --brand-dim:    rgba(255,255,255,1);
    --brand-glow:   rgba(255,255,255,0.08);
    --brand-border: rgba(255,255,255,0.12);
    --accent:       #ffffff;
    --sidebar-w:  240px;
    --topbar-h:   62px;
    --radius:     8px;
    --radius-lg:  14px;
    --font-head:  'Bricolage Grotesque', sans-serif;
    --font-body:  'Poppins', sans-serif;
    --transition: all 0.18s ease;
}
[data-theme="dark"],:root{
    --bg-base:#0a0a0a;--bg-surface:#111111;--bg-card:#161616;--bg-elevated:#1e1e1e;--bg-hover:#242424;
    --border:#2a2a2a;--border-bright:#3a3a3a;
    --text-primary:#f0f0f0;--text-secondary:#999999;--text-muted:#4a4a4a;
    --shadow:0 4px 30px rgba(0,0,0,0.8);
    --danger:#ff5555;--danger-dim:rgba(255,85,85,0.12);
    --warning:#ffaa33;--warning-dim:rgba(255,170,51,0.12);
    --success:#44bb77;--success-dim:rgba(68,187,119,0.12);
    --info:#55aaff;--info-dim:rgba(85,170,255,0.12);
}
[data-theme="light"]{
    --bg-base:#f2f2f2;--bg-surface:#ffffff;--bg-card:#ffffff;--bg-elevated:#eeeeee;--bg-hover:#e6e6e6;
    --border:#dddddd;--border-bright:#cccccc;
    --text-primary:#111111;--text-secondary:#555555;--text-muted:#999999;
    --shadow:0 2px 20px rgba(0,0,0,0.08);
    --danger:#cc3333;--danger-dim:rgba(204,51,51,0.10);
    --warning:#cc8800;--warning-dim:rgba(204,136,0,0.10);
    --success:#226644;--success-dim:rgba(34,102,68,0.10);
    --info:#2255bb;--info-dim:rgba(34,85,187,0.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);font-size:13.5px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--font-body)}
input,select,textarea{font-family:var(--font-body)}
.app-shell{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:16px;border-bottom:1px solid var(--border)}
/* CIRCLE brand icon */
.brand-icon{width:38px;height:38px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border-bright);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.brand-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.brand-icon-letter{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--text-primary)}
.brand-name{font-family:var(--font-head);font-size:14px;font-weight:800;color:var(--text-primary);display:block;line-height:1.1}
.brand-sub{font-size:10px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;display:block}
.sidebar-nav{padding:10px 8px;flex:1;display:flex;flex-direction:column;gap:1px}
.nav-section-label{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:12px 8px 5px;display:block}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);color:var(--text-secondary);font-size:13px;font-weight:500;transition:var(--transition)}
.nav-item svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;opacity:.6}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.active{background:var(--bg-elevated);color:var(--text-primary);font-weight:600;border:1px solid var(--border-bright)}
.nav-item.active svg{opacity:1}
.sidebar-footer{padding:10px 8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:3px}
.sidebar-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);transition:var(--transition);cursor:pointer;text-decoration:none;color:inherit}
.sidebar-user:hover{background:var(--bg-hover)}
/* CIRCLE user avatar */
.user-av{width:32px;height:32px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border-bright);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--text-primary);flex-shrink:0;overflow:hidden}
.user-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.user-av-name{font-size:13px;font-weight:600;color:var(--text-primary);display:block;line-height:1.2}
.user-av-role{font-size:10px;color:var(--text-muted);text-transform:capitalize;display:block}
.sidebar-logout{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);color:var(--text-muted);font-size:13px;font-weight:500;transition:var(--transition);text-decoration:none}
.sidebar-logout svg{width:16px;height:16px;fill:currentColor}
.sidebar-logout:hover{background:var(--danger-dim);color:var(--danger)}

/* ── Main ────────────────────────────────────────────────── */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.top-bar{height:var(--topbar-h);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;gap:16px}
.page-title{font-family:var(--font-head);font-size:19px;font-weight:800;color:var(--text-primary)}
.top-bar-right{display:flex;align-items:center;gap:10px}
.theme-toggle{width:34px;height:34px;border-radius:var(--radius);background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);color:var(--text-secondary)}
.theme-toggle:hover{border-color:var(--border-bright);color:var(--text-primary)}
.theme-toggle svg{width:16px;height:16px;fill:currentColor}
.content-body{flex:1;overflow-y:auto;padding:22px}

/* ── Flash ───────────────────────────────────────────────── */
.flash{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:13px;font-weight:500;border-left:3px solid;margin:0 24px 0;border-radius:0 var(--radius) var(--radius) 0}
.flash button{background:none;border:none;color:inherit;font-size:16px;opacity:.5;cursor:pointer}
.flash button:hover{opacity:1}
.flash-success{background:var(--success-dim);border-color:var(--success);color:var(--success)}
.flash-error{background:var(--danger-dim);border-color:var(--danger);color:var(--danger)}
.flash-info{background:var(--info-dim);border-color:var(--info);color:var(--info)}

/* ── Cards ───────────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:var(--transition)}
.card-title{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}

/* ── Stat Cards ──────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;position:relative;overflow:hidden;transition:var(--transition)}
.stat-card:hover{border-color:var(--border-bright);transform:translateY(-1px);box-shadow:var(--shadow)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--sc,var(--border-bright));border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.stat-card.danger{--sc:var(--danger)}.stat-card.warning{--sc:var(--warning)}.stat-card.info{--sc:var(--info)}.stat-card.success{--sc:var(--success)}
.stat-icon{width:34px;height:34px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.stat-icon svg{width:17px;height:17px;fill:var(--text-secondary)}
.stat-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.stat-value{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--text-primary);line-height:1;margin-bottom:2px}
.stat-sub{font-size:12px;color:var(--text-secondary)}

/* ── Table ───────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--bg-elevated);padding:10px 14px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--bg-hover)}
tbody td{padding:11px 14px;font-size:13px;color:var(--text-secondary);vertical-align:middle}
tbody td:first-child{color:var(--text-primary);font-weight:500}

/* ── License Key ─────────────────────────────────────────── */
.license-key{font-family:'Courier New',monospace;font-size:12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:5px;padding:3px 8px;color:var(--text-primary);letter-spacing:.05em;cursor:pointer;transition:var(--transition);display:inline-block}
.license-key:hover{border-color:var(--border-bright)}

/* ── Badges ──────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.badge-active{background:var(--success-dim);color:var(--success);border:1px solid rgba(68,187,119,.25)}
.badge-inactive{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border)}
.badge-expired{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(255,85,85,.25)}
.badge-suspended{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(255,170,51,.25)}
.badge-hold{background:var(--info-dim);color:var(--info);border:1px solid rgba(85,170,255,.25)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:var(--radius);font-size:13px;font-weight:600;border:1px solid transparent;transition:var(--transition);white-space:nowrap;font-family:var(--font-body)}
.btn svg{width:14px;height:14px;fill:currentColor}
.btn-primary{background:var(--text-primary);color:var(--bg-base);border-color:var(--text-primary)}
.btn-primary:hover{background:var(--text-secondary);border-color:var(--text-secondary)}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-bright)}
.btn-danger{background:var(--danger-dim);color:var(--danger);border-color:rgba(255,85,85,.25)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-success{background:var(--success-dim);color:var(--success);border-color:rgba(68,187,119,.25)}
.btn-success:hover{background:var(--success);color:#fff}
.btn-sm{padding:5px 11px;font-size:12px}.btn-xs{padding:3px 8px;font-size:11px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Forms ───────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid.single{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.span-2{grid-column:span 2}
label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="url"],select,textarea{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;color:var(--text-primary);font-size:13px;outline:none;transition:var(--transition);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--border-bright);box-shadow:0 0 0 2px rgba(255,255,255,.05)}
select option{background:var(--bg-card)}
textarea{resize:vertical;min-height:80px}
.form-hint{font-size:11px;color:var(--text-muted);margin-top:3px}

/* ── Page Header ─────────────────────────────────────────── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.page-header h2{font-family:var(--font-head);font-size:20px;font-weight:800}
.page-header p{font-size:12px;color:var(--text-muted);margin-top:2px}

/* ── Empty State ─────────────────────────────────────────── */
.empty-state{text-align:center;padding:50px 20px;color:var(--text-muted)}
.empty-state svg{width:40px;height:40px;fill:currentColor;opacity:.2;margin:0 auto 12px;display:block}
.empty-state h3{font-size:15px;font-weight:700;margin-bottom:5px;color:var(--text-secondary);font-family:var(--font-head)}
.empty-state p{font-size:13px}

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-backdrop.open{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);animation:slideUp .2s ease}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-title{font-family:var(--font-head);font-size:16px;font-weight:800;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* ── Token ───────────────────────────────────────────────── */
.token-display{font-family:'Courier New',monospace;font-size:12px;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;color:var(--text-primary);word-break:break-all;letter-spacing:.04em;cursor:pointer;transition:var(--transition)}
.token-display:hover{border-color:var(--border-bright)}

/* ── Chart ───────────────────────────────────────────────── */
.chart-wrap{display:flex;align-items:flex-end;gap:4px;height:100px;margin-top:12px}
.chart-bar{flex:1;border-radius:3px 3px 0 0;min-height:3px;transition:background .2s;background:var(--bg-elevated);border-top:2px solid var(--border-bright)}
.chart-bar:hover{background:var(--bg-hover)}
.chart-labels{display:flex;gap:4px;margin-top:5px}
.chart-labels span{flex:1;font-size:9px;color:var(--text-muted);text-align:center}

/* ── Progress ────────────────────────────────────────────── */
.progress-bar{background:var(--bg-elevated);border-radius:4px;height:5px;overflow:hidden}
.progress-fill{height:100%;border-radius:4px;background:var(--text-secondary);transition:width .5s ease}

/* ── Section Title ───────────────────────────────────────── */
.section-title{font-family:var(--font-head);font-size:14px;font-weight:700;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--border)}

/* ── Note Box ────────────────────────────────────────────── */
.note-box{background:var(--warning-dim);border:1px solid rgba(255,170,51,.25);border-radius:var(--radius);padding:11px 13px;font-size:12px;color:var(--warning)}

/* ── Discount Tag ────────────────────────────────────────── */
.discount-tag{display:inline-block;background:var(--success-dim);color:var(--success);border:1px solid rgba(68,187,119,.25);border-radius:4px;font-size:10px;font-weight:600;padding:2px 6px}

/* ── Suspend reason ──────────────────────────────────────── */
.suspend-reason{font-size:11px;color:var(--warning);margin-top:3px;display:block}

/* ── CIRCLE Avatar / Icon Upload ────────────────────────── */
.avatar-preview{width:80px;height:80px;border-radius:50%;border:2px solid var(--border-bright);overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);transition:var(--transition);position:relative}
.avatar-preview:hover{border-color:var(--text-muted)}
.avatar-preview img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.av-letter{font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--text-secondary)}
.av-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;border-radius:50%}
.avatar-preview:hover .av-overlay{display:flex}

/* CIRCLE plugin icon in tables */
.plugin-icon{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);flex-shrink:0}
.plugin-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.plugin-icon-letter{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text-secondary)}

/* ── Login Page ──────────────────────────────────────────── */
.clean-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-base);padding:20px}
.clean-login-box{width:100%;max-width:380px;background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;padding:38px 34px;box-shadow:var(--shadow)}
.clean-brand{display:flex;align-items:center;gap:12px;margin-bottom:34px;justify-content:center}
/* CIRCLE login brand icon */
.clean-brand-icon{width:46px;height:46px;border-radius:50%;overflow:hidden;border:1px solid var(--border-bright);flex-shrink:0;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center}
.clean-brand-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.clean-brand-name{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--text-primary)}
.clean-form-group{margin-bottom:13px}
.clean-form-group label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:5px}
.clean-form-group input{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:10px 13px;color:var(--text-primary);font-size:13px;outline:none;transition:var(--transition)}
.clean-form-group input:focus{border-color:var(--border-bright);box-shadow:0 0 0 2px rgba(255,255,255,.04)}
.clean-submit{width:100%;padding:12px;background:var(--text-primary);color:var(--bg-base);border:none;border-radius:var(--radius);font-family:var(--font-head);font-size:15px;font-weight:700;cursor:pointer;margin-top:8px;transition:var(--transition)}
.clean-submit:hover{background:var(--text-secondary)}
.clean-error{background:var(--danger-dim);border:1px solid rgba(255,85,85,.3);border-radius:var(--radius);padding:9px 13px;color:var(--danger);font-size:13px;margin-bottom:14px;text-align:center}

/* ── Terminal Gate ───────────────────────────────────────── */
.terminal-page{min-height:100vh;background:#000;display:flex;align-items:center;justify-content:center;padding:20px;font-family:'Courier New',monospace}
.terminal-box{width:100%;max-width:600px;background:#050505;border:1px solid #1a1a1a;border-radius:4px;overflow:hidden;box-shadow:0 0 50px rgba(255,255,255,.04)}
.terminal-titlebar{background:#111;padding:8px 14px;display:flex;align-items:center;gap:8px}
.terminal-dot{width:12px;height:12px;border-radius:50%}
.terminal-body{padding:20px;min-height:300px}
.t-line{color:#cccccc;font-size:13px;line-height:1.8;margin-bottom:2px}
.t-dim{color:#2a2a2a}.t-info{color:#888888}.t-warn{color:#ff5555}
.t-prompt{display:flex;align-items:center;gap:8px;margin-top:16px}
.t-prompt-label{color:#aaaaaa;font-size:13px;white-space:nowrap}
.t-input{background:transparent;border:none;outline:none;color:#ffffff;font-family:'Courier New',monospace;font-size:13px;flex:1;caret-color:#fff}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── Utilities ───────────────────────────────────────────── */
.flex{display:flex}.flex-center{display:flex;align-items:center}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-4{margin-bottom:16px}
.text-muted{color:var(--text-muted);font-size:12px}
.text-brand{color:var(--text-primary)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}
.mono{font-family:'Courier New',monospace}
.actions{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.w-full{width:100%}.text-right{text-align:right}.text-center{text-align:center}
.font-head{font-family:var(--font-head)}.bold{font-weight:700}