/* ============================================================
   TS License Manager — styles
   ============================================================ */
:root{
    --bg:            #0b0e14;
    --bg-elev:       #12161f;
    --bg-hover:      #182030;
    --border:        #232a37;
    --border-strong: #2f394b;
    --text:          #e6e9ef;
    --text-dim:      #9aa4b6;
    --text-mute:     #6b7688;
    --accent:        #5b9dff;
    --accent-strong: #3d7be5;
    --ok:            #10b981;
    --warn:          #f59e0b;
    --err:           #ef4444;
    --radius:        10px;
    --radius-sm:     6px;
    --shadow:        0 4px 18px rgba(0,0,0,.35);
    --font:          ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono:          ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:var(--font);font-size:14px;line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong)}
h1,h2,h3{margin:0 0 .6rem;font-weight:600;letter-spacing:-.01em}
h1{font-size:1.4rem}
h2{font-size:1.1rem}
h3{font-size:1rem}
hr{border:0;border-top:1px solid var(--border);margin:1.2rem 0}
code{font-family:var(--mono);background:#1c2230;color:#a5f3a5;padding:2px 6px;border-radius:4px;font-size:.85em}
.muted{color:var(--text-dim)}
.small{font-size:.82rem}

/* ---------- Auth page ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
    background:radial-gradient(1200px 800px at 20% 10%, #16203200, #0b0e1400), var(--bg);padding:2rem}
.auth-card{width:100%;max-width:400px;background:var(--bg-elev);border:1px solid var(--border);
    border-radius:14px;padding:2.2rem 2rem;box-shadow:var(--shadow)}
.auth-card h1{margin-top:1.2rem}
.auth-card form{display:flex;flex-direction:column;gap:.9rem;margin-top:1.2rem}
.auth-card label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--text-dim)}

/* ---------- Brand ---------- */
.brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.brand-mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#5b9dff,#8b5cf6);
    display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;letter-spacing:.5px}
.brand-name{font-weight:700;letter-spacing:.02em}
.brand-sub{font-size:.78rem;color:var(--text-mute)}

/* ---------- Layout ---------- */
.app-body{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:var(--bg-elev);border-right:1px solid var(--border);
    padding:1.4rem 1rem;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar nav{display:flex;flex-direction:column;gap:.15rem;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:var(--radius-sm);
    color:var(--text-dim);font-weight:500;transition:.15s}
.sidebar nav a:hover{background:var(--bg-hover);color:var(--text)}
.sidebar nav a.active{background:linear-gradient(90deg,#5b9dff22,#5b9dff10);color:#cfe2ff;
    border-left:3px solid var(--accent);padding-left:calc(.75rem - 3px)}
.sidebar nav a .ico{width:18px;text-align:center;color:var(--text-mute);font-size:1rem}
.sidebar nav a.active .ico{color:var(--accent)}
.sidebar-foot{margin-top:1rem;border-top:1px solid var(--border);padding-top:1rem}
.user-chip{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.user-avatar{width:34px;height:34px;border-radius:50%;background:#243047;color:#cfe2ff;
    display:flex;align-items:center;justify-content:center;font-weight:700}
.user-meta .user-name{font-size:.85rem;font-weight:600}
.user-meta .user-role{font-size:.72rem;color:var(--text-mute)}
.logout-btn{display:block;text-align:center;background:transparent;border:1px solid var(--border-strong);
    padding:.45rem;border-radius:var(--radius-sm);color:var(--text-dim);font-size:.82rem}
.logout-btn:hover{border-color:#ef444455;color:#ffbdbd;background:#2a1515}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;
    padding:1rem 1.6rem;border-bottom:1px solid var(--border);background:var(--bg-elev)}
.content{padding:1.6rem;max-width:1400px;width:100%}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:var(--radius-sm);
    border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--text);
    font-family:inherit;font-size:.86rem;font-weight:500;cursor:pointer;transition:.15s;text-decoration:none}
.btn:hover{background:var(--bg-hover);border-color:#39435a}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-danger{border-color:#7a2626;color:#ff9c9c;background:#2a1414}
.btn-danger:hover{background:#3b1a1a;border-color:#a03333}
.btn-warn{border-color:#7a5b26;color:#ffd48a;background:#2a2114}
.btn-warn:hover{background:#3b2c15;border-color:#a07a33}
.btn-ok{border-color:#1f6e4b;color:#8ff3c1;background:#112a1f}
.btn-ok:hover{background:#163a29;border-color:#2a9d6c}
.btn-sm{padding:.3rem .6rem;font-size:.78rem}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim)}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text)}

/* ---------- Forms ---------- */
input,select,textarea{
    font-family:inherit;font-size:.9rem;color:var(--text);
    background:#0f131b;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
    padding:.55rem .7rem;outline:none;transition:.15s;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #5b9dff22}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--text-dim);font-weight:500}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.form-grid .full{grid-column:1/-1}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}

/* ---------- Cards ---------- */
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
    padding:1.3rem 1.4rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.card h2{margin-bottom:1rem}
.card-narrow{max-width:760px}

/* ---------- Stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.4rem}
.stat{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem}
.stat .stat-label{font-size:.75rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.05em}
.stat .stat-value{font-size:1.6rem;font-weight:700;margin-top:.3rem;letter-spacing:-.02em}
.stat .stat-sub{font-size:.78rem;color:var(--text-mute);margin-top:.2rem}
.stat.accent{border-color:#5b9dff44}
.stat.accent .stat-value{color:#cfe2ff}
.stat.ok .stat-value{color:#8ff3c1}
.stat.warn .stat-value{color:#ffd48a}
.stat.err .stat-value{color:#ff9c9c}

/* ---------- Table ---------- */
.table-wrap{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem}
thead th{text-align:left;padding:.7rem .9rem;background:#0f131b;
    border-bottom:1px solid var(--border);color:var(--text-dim);font-weight:600;font-size:.75rem;
    text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tbody td{padding:.7rem .9rem;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-hover)}
td.actions{text-align:right;white-space:nowrap}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;
    font-weight:600;letter-spacing:.02em}

/* ---------- Alerts ---------- */
.alert{padding:.7rem .95rem;border-radius:var(--radius-sm);margin-bottom:1rem;
    border:1px solid var(--border-strong);font-size:.88rem}
.alert-success{background:#0f2a1e;border-color:#1f6e4b;color:#a8f3c8}
.alert-error  {background:#2a1414;border-color:#7a2626;color:#ffbdbd}
.alert-info   {background:#131e33;border-color:#2a4270;color:#cfe2ff}

/* ---------- Key display ---------- */
.key-box{display:inline-flex;align-items:center;gap:.5rem;background:#0f131b;border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:.45rem .7rem;font-family:var(--mono);font-size:.85rem}
.key-box .copy{cursor:pointer;color:var(--text-mute);background:none;border:0;font-size:.85rem;padding:0}
.key-box .copy:hover{color:var(--accent)}

/* ---------- Misc ---------- */
.empty{text-align:center;padding:3rem 1rem;color:var(--text-mute)}
.empty .icon{font-size:2.5rem;opacity:.4;margin-bottom:.6rem}
.row-flex{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pill-row{display:flex;gap:.4rem;flex-wrap:wrap}
.mono{font-family:var(--mono);font-size:.85em}
.trunc{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Mobile ---------- */
@media(max-width:900px){
    .app-body{grid-template-columns:1fr}
    .sidebar{position:static;height:auto;flex-direction:column}
    .sidebar nav{flex-direction:row;overflow-x:auto;padding-bottom:.5rem}
    .sidebar nav a{flex-shrink:0}
    .topbar{padding:1rem}
    .content{padding:1rem}
}