/* ──────────────────────────────────────────────────────────────────────
   BlackBox LMS — design system v3
   Mobile-first · 4 breakpoints · WCAG AA · prefers-reduced-motion
   Touch-optimized · Modal padding refined · iOS-safe scroll
   ────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');

:root{
  --bg:#05080f; --bg2:#0a0f1a; --panel:#0f1623; --panel2:#141d2e;
  --b1:#1a2535; --b2:#22304a;
  --t1:#e6edf7; --t2:#a6b4c8; --t3:#7e8ca8; --t4:#445268; /* --t3 bumped for AA on panel */
  --brand:#3b9eff; --brand-2:#7b5bff; --brand-dim:#1f4f80;
  --green:#28d17c; --red:#ff5468; --amber:#ffb547; --cyan:#3bd5ff; --purple:#9b6bff; --gold:#ffcd55;
  --r:14px; --rs:10px; --rl:18px;
  --shadow: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --tap: 44px;
  --sb-w: 240px;
  --header-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Extra small screens optimization */
@media (max-width:380px){
  :root{
    --tap: 48px;
    --r: 12px;
    --rl: 16px;
  }
  .mhead .mhead-brand span:last-child{display:none}
  .sidebar .brand .sub{display:none}
  .brand .name{font-size:14px}
  .hero h1{font-size:20px}
  .tile .tval{font-size:20px}
  .tile{padding:14px}
  .card{padding:14px}
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow-x:hidden;overscroll-behavior-y:none}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:radial-gradient(ellipse at top,#0a1424 0%,var(--bg) 60%);
  color:var(--t1);font-weight:400;line-height:1.5;min-height:100dvh;
  font-size:15px;
}
/* Body scroll lock when modal open */
body.modal-open{overflow:hidden;position:fixed;width:100%;touch-action:none}

code,.mono{font-family:'Fira Code',ui-monospace,monospace;font-size:.92em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;
}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;color:inherit}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Skip link */
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:8px;top:8px;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px;z-index:1000}

/* ─── Layout ───────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:100dvh}
.main{padding:24px clamp(16px,3vw,36px);overflow-x:hidden;min-width:0}

.mhead{
  display:none;position:sticky;top:0;z-index:50;
  height:var(--header-h);padding:0 16px;
  background:rgba(5,8,15,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--b1);
  align-items:center;justify-content:space-between;gap:12px;
}
.mhead .ham{
  width:44px;height:44px;border-radius:10px;border:1px solid var(--b1);
  background:var(--panel);color:var(--t1);display:grid;place-items:center;cursor:pointer;
  font-size:18px;
}
.mhead .ham:active{transform:scale(.95)}
.mhead .mhead-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.mhead .logo-sm{
  /* v9.8.6 — BlackBox logo as background image, hides any inner "Q" text */
  width:32px;height:32px;border-radius:8px;
  background:url('/assets/blackbox-logo.png') center/contain no-repeat,
             linear-gradient(135deg,var(--brand),var(--brand-2));
  display:grid;place-items:center;
  font-size:0;color:transparent; /* hide the inner "Q" letter */
  flex-shrink:0;
}

.sidebar{
  background:linear-gradient(180deg,#0a0f1a,#05080f);
  border-right:1px solid var(--b1);padding:22px 14px;
  display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100dvh;width:var(--sb-w);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}

/* Mobile sidebar optimization */
@media (max-width:840px){
  .sidebar{
    padding:16px 12px;
    gap:4px;
  }
  .sidebar .brand{
    padding:6px 8px 14px;
    margin-bottom:10px;
  }
  .sidebar .brand .logo{
    width:36px;
    height:36px;
  }
  .sidebar .brand .name{
    font-size:14px;
  }
  .sidebar .brand .sub{
    font-size:9px;
  }
}

.brand{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px 18px;border-bottom:1px solid var(--b1);margin-bottom:14px;
}
.brand .logo{
  /* v9.8.6 — BlackBox logo as background, hides inner "Q" text */
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:url('/assets/blackbox-logo.png') center/contain no-repeat;
  display:grid;place-items:center;
  font-size:0;color:transparent;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.brand .name{font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.2}
.brand .sub{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}

.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--rs);
  color:var(--t2);cursor:pointer;font-size:14px;font-weight:500;
  transition:background .15s,color .15s,border-color .15s;
  min-height:var(--tap);user-select:none;
  border:1px solid transparent;
  text-align:left;width:100%;background:none;
}
.nav-item:hover{background:var(--panel);color:var(--t1)}
.nav-item.active{
  background:linear-gradient(90deg,rgba(59,158,255,.18),rgba(59,158,255,.05));
  color:var(--t1);border-color:rgba(59,158,255,.3);
}
.nav-item .ic{font-size:18px;width:22px;text-align:center;flex-shrink:0}

.spacer{flex:1;min-height:14px}
.user-chip{
  padding:12px;border:1px solid var(--b1);border-radius:var(--rs);
  background:var(--panel);font-size:13px;
}
.user-chip .uname{color:var(--t1);font-weight:600;word-break:break-word}
.user-chip .urole{color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.user-chip button{
  margin-top:10px;width:100%;min-height:var(--tap);
  padding:8px;border-radius:8px;border:1px solid var(--b2);
  background:transparent;color:var(--t2);cursor:pointer;font-size:13px;
}
.user-chip button:hover{background:var(--panel2);color:var(--t1)}

.drawer-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.drawer-bg.open{display:block}

/* ─── Page hero ─────────────────────────────────────── */
.hero{margin-bottom:24px}
.hero .eyebrow{
  color:var(--brand);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px;
}
.hero h1{
  margin:0;font-size:clamp(22px,4.5vw,32px);
  font-weight:700;letter-spacing:-.02em;line-height:1.15;
}
.hero .sub{color:var(--t3);margin-top:8px;font-size:14px;line-height:1.5}
.hero .pills{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:999px;
  background:var(--panel);border:1px solid var(--b1);
  font-size:12px;color:var(--t2);font-weight:500;
}
.pill .dot{width:6px;height:6px;border-radius:999px;background:var(--green);box-shadow:0 0 0 3px rgba(40,209,124,.18)}
.pill.amber .dot{background:var(--amber);box-shadow:0 0 0 3px rgba(255,181,71,.18)}
.pill.red .dot{background:var(--red);box-shadow:0 0 0 3px rgba(255,84,104,.18)}

/* Mobile hero optimization */
@media (max-width:560px){
  .hero{
    margin-bottom:18px;
  }
  .hero .eyebrow{
    font-size:10px;
  }
  .hero h1{
    font-size:clamp(20px,5vw,28px);
  }
  .hero .sub{
    font-size:13px;
    line-height:1.5;
  }
  .hero .pills{
    gap:6px;
    margin-top:12px;
    flex-wrap:wrap;
  }
  .pill{
    padding:5px 10px;
    font-size:11px;
  }
}

/* ─── Tile grid (refined breakpoints) ─────────────────── */
.tiles{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:24px}
@media (min-width:480px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:720px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}

/* Mobile tile optimization */
@media (max-width:560px){
  .tiles{
    gap:10px;
    margin-bottom:18px;
  }
  .tile{
    padding:16px;
    border-radius:12px;
  }
  .tile .tval{
    font-size:24px;
  }
  .tile .tsub{
    font-size:11px;
  }
}

.tile{
  background:var(--panel);border:1px solid var(--b1);
  border-radius:var(--r);padding:18px;
  transition:transform .15s,border-color .15s,background .15s;
  position:relative;overflow:hidden;
  text-align:left;width:100%;color:inherit;
  font:inherit;border-left-width:1px;
}
button.tile, a.tile, .tile.click{cursor:pointer;display:block;text-decoration:none}
button.tile:hover, a.tile:hover, .tile.click:hover{transform:translateY(-2px);border-color:var(--brand-dim);background:var(--panel2)}
button.tile:active, a.tile:active, .tile.click:active{transform:translateY(0)}
.tile::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--brand)}
.tile.green::before{background:var(--green)}
.tile.red::before{background:var(--red)}
.tile.amber::before{background:var(--amber)}
.tile.purple::before{background:var(--purple)}
.tile.cyan::before{background:var(--cyan)}
.tile .tlabel{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;font-weight:600}
.tile .tval{font-size:clamp(22px,3.5vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tile .tsub{font-size:12px;color:var(--t3);margin-top:4px;line-height:1.4}

/* ─── Card ─────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--b1);border-radius:var(--r);padding:20px;margin-bottom:18px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{margin:0;font-size:16px;font-weight:600;flex:1 1 auto}
.card-h .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card-h .actions .btn{
  flex:0 0 auto;
}
.card .desc{color:var(--t3);font-size:13px;margin:0 0 14px}

/* Mobile card optimization */
@media (max-width:560px){
  .card{
    padding:16px;
    margin-bottom:14px;
    border-radius:12px;
  }
  .card-h{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
  }
  .card-h h2{
    width:100%;
  }
  .card-h .actions{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }
  .card-h .actions .btn{
    flex:1 1 auto;
    min-height:44px;
    justify-content:center;
  }
  .card .desc{
    font-size:12px;
  }
}

/* ─── Tables (responsive) ─────────────────────────────────────── */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  margin:0 -20px;padding:0 20px;
  background:linear-gradient(to right, transparent calc(100% - 24px), rgba(15,22,35,.6));
  background-attachment:local;
  background-repeat:no-repeat;
  background-size:24px 100%;
  background-position:right 0;
  position:relative;
}
.table-wrap::after{
  content:'';
  position:absolute;
  right:0;top:0;bottom:0;
  width:20px;
  background:linear-gradient(to left,rgba(5,8,15,.6),transparent);
  pointer-events:none;
}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}
th{
  text-align:left;padding:10px 12px;
  color:var(--t3);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--b1);white-space:nowrap;
}
td{padding:12px;border-bottom:1px solid var(--b1);color:var(--t2);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.02);color:var(--t1)}
tr.clickable{cursor:pointer}
tr.clickable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
td.tight{white-space:nowrap}
td .row-actions{display:flex;gap:6px;flex-wrap:wrap}

/* Mobile table optimization */
@media (max-width:560px){
  .table-wrap{
    margin:0 -12px;
    padding:0 12px;
    font-size:12px;
  }
  .table-wrap::after{
    width:16px;
  }
  table{
    min-width:360px;
    font-size:12px;
  }
  th{
    padding:8px 10px;
    font-size:10px;
  }
  td{
    padding:10px 8px;
    font-size:11px;
    line-height:1.4;
  }
  /* Compact row actions */
  td .row-actions{
    gap:4px;
    flex-wrap:nowrap;
  }
  td .row-actions .btn{
    padding:5px 8px;
    font-size:11px;
    min-height:30px;
    border-radius:6px;
  }
  /* Mono key smaller on mobile */
  .mono-key{
    font-size:10px;
    word-break:break-all;
  }
}

/* ─── Buttons ─────────────────────────────────────── */
.btn{
  padding:11px 16px;border-radius:10px;border:1px solid var(--b2);
  background:var(--panel2);color:var(--t1);
  font-weight:500;font-size:13px;cursor:pointer;
  transition:transform .1s,background .15s,border-color .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--tap);text-decoration:none;white-space:nowrap;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
.btn:hover{background:var(--panel);border-color:var(--brand-dim)}
.btn:active{transform:scale(0.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-pri{background:linear-gradient(135deg,var(--brand) 0%,#2a82ec 100%);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(59,158,255,.25)}
.btn-pri:hover{filter:brightness(1.1)}
.btn-pri:active{transform:scale(0.97)}
.btn-danger{background:transparent;border-color:rgba(255,84,104,.3);color:var(--red)}
.btn-danger:hover{background:rgba(255,84,104,.1);border-color:var(--red)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--t2)}
.btn-ghost:hover{background:var(--panel);color:var(--t1)}
.btn-warning{
  background:linear-gradient(135deg,var(--amber) 0%,#e09a30 100%);
  border-color:transparent;color:#000;font-weight:600;
}
.btn-warning:hover{filter:brightness(1.1)}
.btn-sm{padding:7px 12px;font-size:12px;min-height:34px;border-radius:8px}
.btn-block{width:100%}

/* Mobile button optimization */
@media (max-width:560px){
  .btn{
    padding:12px 16px;
    min-height:48px;
    font-size:14px;
    border-radius:12px;
  }
  .btn-sm{
    padding:8px 12px;
    min-height:40px;
  }
  .btn-pri{
    box-shadow:0 4px 16px rgba(59,158,255,.35);
  }
  .btn-danger{
    border-width:1px;
  }
}

/* ─── Forms ─────────────────────────────────────── */
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.field label,.field>span:first-child{
  display:block;font-size:12px;color:var(--t3);
  margin-bottom:6px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
}
.field input,.field select,.field textarea{
  width:100%;padding:11px 12px;border-radius:10px;
  border:1px solid var(--b2);background:var(--bg2);
  color:var(--t1);font-size:15px;
  transition:border-color .15s,box-shadow .15s;
  min-height:var(--tap);
}
@media (max-width:720px){
  .field input,.field select,.field textarea{font-size:16px}
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,158,255,.15);
}
.field textarea{min-height:80px;resize:vertical;font-family:inherit}
.field .hint{font-size:11px;color:var(--t3);margin-top:6px}
.field .err{font-size:11px;color:var(--red);margin-top:6px}

/* Mobile form optimization */
@media (max-width:560px){
  .field{
    margin-bottom:14px;
  }
  .field-row{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .field input,.field select,.field textarea{
    padding:12px;
    border-radius:10px;
    font-size:16px;
    min-height:48px;
  }
  .field textarea{
    min-height:80px;
  }
  .field label{
    font-size:11px;
  }
  .field .hint,.field .err{
    font-size:10px;
  }
}

/* Password input + reveal */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:48px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;background:transparent;border:0;color:var(--t3);
  cursor:pointer;border-radius:8px;display:grid;place-items:center;font-size:16px;
}
.pw-toggle:hover{background:var(--panel2);color:var(--t1)}

/* Strength meter */
.pw-meter{display:flex;gap:4px;margin-top:10px;height:4px}
.pw-meter span{flex:1;background:var(--b1);border-radius:2px;transition:background .2s}
.pw-meter[data-s="1"] span:nth-child(-n+1){background:var(--red)}
.pw-meter[data-s="2"] span:nth-child(-n+2){background:var(--amber)}
.pw-meter[data-s="3"] span:nth-child(-n+3){background:var(--cyan)}
.pw-meter[data-s="4"] span{background:var(--green)}
.pw-strength-label{font-size:11px;color:var(--t3);margin-top:8px;min-height:14px}
/* Extra space below pw-meter so next field doesn't crowd */
.field:has(.pw-meter){margin-bottom:24px}

/* Search */
.search-wrap{position:relative;flex:1 1 200px;max-width:360px}
.search-wrap input{padding-left:40px}
.search-wrap::before{content:'🔍';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.5;pointer-events:none}

/* ─── Status badges ─────────────────────────────────────── */
.badge{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
}
.badge.active{background:rgba(40,209,124,.12);color:var(--green);border:1px solid rgba(40,209,124,.3)}
.badge.inactive{background:rgba(102,124,149,.12);color:var(--t3);border:1px solid var(--b2)}
.badge.expired,.badge.revoked{background:rgba(255,84,104,.12);color:var(--red);border:1px solid rgba(255,84,104,.3)}
.badge.suspended{background:rgba(255,181,71,.12);color:var(--amber);border:1px solid rgba(255,181,71,.3)}
.badge.user{background:rgba(102,124,149,.12);color:var(--t2);border:1px solid var(--b2)}
.badge.admin{background:rgba(155,107,255,.12);color:var(--purple);border:1px solid rgba(155,107,255,.3)}
.badge.pro,.badge.enterprise,.badge.cyan{background:rgba(59,213,255,.12);color:var(--cyan);border:1px solid rgba(59,213,255,.3)}
.badge.standard,.badge.trial{background:rgba(102,124,149,.12);color:var(--t2);border:1px solid var(--b2)}
.badge.stable{background:rgba(40,209,124,.12);color:var(--green);border:1px solid rgba(40,209,124,.3)}
.badge.beta{background:rgba(155,107,255,.12);color:var(--purple);border:1px solid rgba(155,107,255,.3)}

/* ─── Login screen ─────────────────────────────────────── */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:20px}
.login-card{
  width:min(440px,100%);
  background:var(--panel);border:1px solid var(--b1);border-radius:var(--rl);
  padding:clamp(24px,5vw,40px);box-shadow:var(--shadow);
}
.login-card .logo-big{
  width:96px;height:96px;border-radius:18px;
  background:url('/assets/blackbox-login.png') center/contain no-repeat;
  display:grid;place-items:center;
  font-size:0;color:transparent;
  margin-bottom:24px;box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.login-card h1{margin:0 0 6px;font-size:clamp(22px,4.5vw,26px);font-weight:700;letter-spacing:-.02em}
.login-card .lhint{color:var(--t3);margin-bottom:24px;font-size:14px}
.login-card .footnote{margin-top:20px;font-size:12px;color:var(--t3);text-align:center}
.remember-row{display:flex;align-items:center;gap:8px;margin:8px 0 16px;font-size:13px;color:var(--t2);cursor:pointer}
.remember-row input{width:auto;margin:0;min-height:auto;width:18px;height:18px;accent-color:var(--brand)}

/* Mobile login optimization */
@media (max-width:560px){
  .login-wrap{
    padding:16px;
    min-height:100dvh;
    align-items:flex-start;
    padding-top:40px;
  }
  .login-card{
    padding:24px 20px;
    border-radius:16px;
  }
  .login-card .logo-big{
    width:72px;
    height:72px;
    border-radius:14px;
    margin-bottom:20px;
  }
  .login-card h1{
    font-size:22px;
  }
  .login-card .lhint{
    font-size:13px;
    margin-bottom:20px;
  }
  .login-card .footnote{
    font-size:11px;
  }
  .remember-row{
    font-size:12px;
    margin:6px 0 14px;
  }
}

/* ─── Modal — refined padding & touch handle ─────────────────── */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:grid;place-items:center;z-index:100;padding:20px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.modal{
  width:min(560px,100%);
  background:var(--panel);border:1px solid var(--b1);border-radius:var(--rl);
  padding:28px 32px;
  box-shadow:var(--shadow);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  position:relative;
}
.modal h3{margin:0 0 6px;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.modal .mhint{color:var(--t3);margin-bottom:24px;font-size:13px;line-height:1.5}
.modal .field{margin-bottom:18px}
.modal .field-row{gap:16px}
.modal-actions{
  display:flex;gap:10px;justify-content:flex-end;
  margin-top:28px;padding-top:20px;
  border-top:1px solid var(--b1);
  flex-wrap:wrap;
}
.modal-actions .btn{flex:0 0 auto;min-width:96px}

/* Phone bottom-sheet treatment */
@media (max-width:560px){
  .modal-bg{align-items:flex-end;padding:0;background:rgba(0,0,0,.7)}
  .modal{
    border-radius:var(--rl) var(--rl) 0 0;
    width:100%;
    max-height:90dvh;
    padding:24px 16px calc(24px + var(--safe-bottom));
    padding-top:36px;
  }
  .modal::before{
    content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:var(--b2);
  }
  .modal h3{font-size:18px}
  .modal .mhint{margin-bottom:16px;font-size:12px}
  .modal .field{margin-bottom:14px}
  .modal .field-row{grid-template-columns:1fr}
  .modal-actions{
    flex-direction:column;
    gap:8px;
    margin-top:20px;
    padding-top:16px;
  }
  .modal-actions .btn{
    flex:1 1 100%;
    min-height:var(--tap);
    justify-content:center;
  }
  .modal-actions .btn.btn-pri{
    order:-1;
  }
}

/* ─── Toast ─────────────────────────────────────── */
.toast-stack{
  position:fixed;top:max(20px,env(safe-area-inset-top));right:20px;
  display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none;
  max-width:calc(100vw - 40px);
}
.toast{
  padding:12px 16px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--b2);
  box-shadow:var(--shadow);font-size:13px;color:var(--t1);
  min-width:240px;max-width:380px;pointer-events:auto;
  animation:toast-in .25s ease-out;
}
.toast.ok{border-left:3px solid var(--green)}
.toast.err{border-left:3px solid var(--red)}
.toast.warn{border-left:3px solid var(--amber)}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@media (max-width:480px){.toast-stack{left:20px;right:20px}.toast{max-width:100%;min-width:0}}

/* ─── Detail page ─────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:960px){.detail-grid{grid-template-columns:1fr 320px}}
.kv{display:grid;grid-template-columns:1fr;gap:14px}
.kv-row .k{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:4px}
.kv-row .v{font-size:14px;color:var(--t1);word-break:break-word}
@media (min-width:560px){.kv{grid-template-columns:repeat(2,1fr)}}

/* Mobile detail page optimization */
@media (max-width:560px){
  .detail-grid{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  .kv{
    grid-template-columns:1fr !important;
    gap:12px;
  }
  .kv-row .k{
    font-size:10px;
  }
  .kv-row .v{
    font-size:13px;
  }
  /* Sidebar aside on detail pages */
  aside{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  aside .card{
    margin-bottom:0;
  }
  /* Copy row fits mobile */
  .copy-row{
    flex-wrap:wrap;
    gap:6px;
  }
  .copy-row .mono-key{
    width:100%;
    flex:auto;
  }
}

/* ─── Misc ─────────────────────────────────────── */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--t3)}
.mono-key{
  font-family:'Fira Code',monospace;background:var(--bg2);
  padding:3px 8px;border-radius:6px;border:1px solid var(--b1);
  font-size:12px;word-break:break-all;display:inline-block;
}
.empty{padding:48px 20px;text-align:center;color:var(--t3)}
.empty .ic{font-size:36px;opacity:.4;margin-bottom:10px}
.copy-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t3);margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--t3)}.crumbs a:hover{color:var(--t1)}
.crumbs .sep{color:var(--t4)}
.divider{height:1px;background:var(--b1);margin:18px 0}

/* Mobile misc optimization */
@media (max-width:560px){
  .row{
    gap:8px;
  }
  .empty{
    padding:32px 16px;
    font-size:13px;
  }
  .empty .ic{
    font-size:28px;
  }
  .copy-row{
    flex-wrap:wrap;
    gap:6px;
  }
  .copy-row .btn{
    flex-shrink:0;
  }
  .crumbs{
    font-size:12px;
    margin-bottom:10px;
  }
  .divider{
    margin:14px 0;
  }
}

/* ─── Breakpoints ─────────────────────────────────────── */
@media (max-width:1024px){
  :root{--sb-w:200px}
}
@media (max-width:840px){
  .app{grid-template-columns:1fr}
  .mhead{display:flex}
  .sidebar{
    position:fixed;left:0;top:0;height:100dvh;width:280px;z-index:70;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow)}
  .main{padding:18px}
  .table-wrap{margin:0 -18px;padding:0 18px}
}
@media (max-width:560px){
  .main{padding:12px}
  .card{padding:14px}
  .table-wrap{margin:0 -12px;padding:0 12px}
  .card-h{flex-direction:column;align-items:stretch;gap:10px}
  .card-h .actions{width:100%;justify-content:flex-start}
  .card-h .actions .btn{flex:1 1 auto;min-height:var(--tap)}
  .hero{margin-bottom:14px}
  .tiles{gap:10px}
  /* Search input full width on mobile */
  .search-wrap{max-width:100%;flex:1 1 100%}
  /* Modal actions stack on mobile */
  .modal-actions{
    flex-direction:column;
    gap:8px;
  }
  .modal-actions .btn{
    flex:1 1 100%;
    min-height:var(--tap);
    justify-content:center;
  }
  /* Buttons full width on mobile for primary actions */
  .btn-block{width:100%;min-height:var(--tap)}
  /* Nav items larger touch target on mobile */
  .nav-item{
    min-height:48px;
    padding:12px 14px;
  }
  /* User chip buttons */
  .user-chip button{
    min-height:44px;
  }
  /* Detail grid single column on mobile */
  .detail-grid{grid-template-columns:1fr !important}
  /* Tile grid single column on mobile */
  .tiles{grid-template-columns:1fr !important}
  /* Key-value grid compact on mobile */
  .kv{grid-template-columns:1fr !important}
  /* Table cells compact on mobile */
  td{padding:10px 8px;font-size:12px}
  th{padding:8px;font-size:10px}
  /* Copy row wraps on mobile */
  .copy-row{gap:6px}
  .copy-row .btn{flex-shrink:0}
  /* Mono key wraps */
  .mono-key{
    word-break:break-all;
    font-size:11px;
    max-width:100%;
    display:block;
  }
  /* Action buttons in tables */
  .row-actions{
    flex-wrap:nowrap;
    gap:4px;
  }
  .row-actions .btn{
    padding:6px 8px;
    font-size:11px;
    min-height:32px;
  }
  /* Form fields full width */
  .field-row{grid-template-columns:1fr !important}
  /* Toast full width on small screens */
  .toast-stack{left:10px;right:10px}
  .toast{min-width:0;width:100%}
  /* Pills wrap nicely */
  .hero .pills{gap:6px}
  .pill{
    padding:5px 9px;
    font-size:11px;
  }
  /* Table horizontal scroll affordance */
  .table-wrap{
    position:relative;
  }
  .table-wrap::after{
    content:'';
    position:absolute;
    right:0;top:0;bottom:0;
    width:20px;
    background:linear-gradient(to left,rgba(5,8,15,.8),transparent);
    pointer-events:none;
  }
}

/* Extra small screens */
@media (max-width:380px){
  .mhead .mhead-brand span:last-child{display:none}
  .sidebar .brand .sub{display:none}
  .brand .name{font-size:14px}
  .hero h1{font-size:20px}
  .tile .tval{font-size:20px}
}

@media (prefers-contrast:more){
  :root{--t2:#d6dbe5;--t3:#9aa5b8;--b1:#3a4a64;--b2:#5a6a84}
}

/* ───────────────────────────────────────────────────────────────────────
   v3.1 — Polish pass: animations, skeletons, native form theming,
   stagger entry, success feedback, offline banner, search SVG icon
   ─────────────────────────────────────────────────────────────────────── */

/* ─── Page / panel transitions ─── */
.main{animation:page-in .3s cubic-bezier(.2,.8,.2,1)}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─── List / row entry stagger ─── */
@keyframes row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
tbody tr,.tile,.card{animation:row-in .35s cubic-bezier(.2,.8,.2,1) both}

/* ─── Modal entry/exit ─── */
.modal-bg{animation:fade-in .2s ease-out}
.modal{animation:modal-in .3s cubic-bezier(.2,.8,.2,1)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.modal-bg.closing{animation:fade-out .2s ease-in forwards}
.modal-bg.closing .modal{animation:modal-out .2s ease-in forwards}
@keyframes fade-out{to{opacity:0}}
@keyframes modal-out{to{opacity:0;transform:translateY(20px) scale(.97)}}

@media (max-width:560px){
  @keyframes modal-in{from{transform:translateY(100%)}to{transform:none}}
  @keyframes modal-out{to{transform:translateY(100%)}}
}

/* ─── Toast exit ─── */
.toast.leaving{animation:toast-out .25s ease-in forwards}
@keyframes toast-out{to{opacity:0;transform:translateX(20px);max-height:0;margin:0;padding:0;border:0}}

/* ─── Status pill pulse ─── */
.pill .dot{animation:pill-pulse 2.4s infinite}
@keyframes pill-pulse{0%,100%{box-shadow:0 0 0 3px rgba(40,209,124,.18)}50%{box-shadow:0 0 0 7px rgba(40,209,124,.04)}}
.pill.amber .dot{animation-name:pill-pulse-amber}
@keyframes pill-pulse-amber{0%,100%{box-shadow:0 0 0 3px rgba(255,181,71,.18)}50%{box-shadow:0 0 0 7px rgba(255,181,71,.04)}}
.pill.red .dot{animation-name:pill-pulse-red}
@keyframes pill-pulse-red{0%,100%{box-shadow:0 0 0 3px rgba(255,84,104,.18)}50%{box-shadow:0 0 0 7px rgba(255,84,104,.04)}}

/* ─── Skeleton loaders ─── */
.skel{
  background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:8px;
  height:14px; margin:6px 0;
}
.skel.skel-tile{height:96px;border-radius:var(--r);margin:0}
.skel.skel-row{height:42px;border-radius:8px}
.skel.skel-card{height:140px;border-radius:var(--r);margin-bottom:14px}
.skel.skel-line-sm{height:10px;width:40%}
.skel.skel-line-lg{height:18px;width:60%;margin-bottom:10px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── Inline button spinner ─── */
.btn.btn-loading{position:relative;color:transparent!important}
.btn.btn-loading::after{
  content:'';position:absolute;top:50%;left:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:btn-spin .7s linear infinite;
  color:#fff;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* Success pop on save */
.btn.btn-success-flash{background:linear-gradient(135deg,var(--green),#22c04a)!important;border-color:transparent!important;color:#000!important;animation:btn-pop .35s ease-out}
@keyframes btn-pop{0%,100%{transform:none}50%{transform:scale(1.04)}}

/* ─── Click feedback / tile press ─── */
button.tile:active,.tile.click:active{transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--brand-dim)}

/* Subcard inside detail pages (replace ad-hoc inline) */
.subcard{padding:14px;border:1px solid var(--b1);border-radius:10px;margin-bottom:10px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.subcard:hover{transform:translateX(2px);border-color:var(--brand-dim);background:var(--panel2)}
.subcard:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Tile focus ring (clipped by overflow:hidden — use inset border instead) */
.tile:focus-visible{outline:none;border-color:var(--brand)}
.tile:focus-visible::after{content:'';position:absolute;inset:0;border:2px solid var(--brand);border-radius:inherit;pointer-events:none}

/* ─── Native form widgets — dark theme on Safari/Firefox ─── */
.field input,.field select,.field textarea,
.inp,select{
  color-scheme: dark;
}
.field input[type=date],.field input[type=time],.field input[type=datetime-local]{
  font-family:inherit;
}
.field input[type=date]::-webkit-calendar-picker-indicator,
.field input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(.7);cursor:pointer;
}
.field select,select.inp{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e8ca8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  padding-right:36px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
}

/* ─── Validation hints (live) ─── */
.field input:invalid:not(:placeholder-shown):not(:focus){
  border-color:rgba(255,84,104,.4);
  box-shadow:0 0 0 3px rgba(255,84,104,.08);
}
.field input:valid:not(:placeholder-shown):not(:focus){
  border-color:rgba(40,209,124,.3);
}

/* ─── Search input — SVG icon (replaces emoji) ─── */
.search-wrap::before{
  content:'';
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e8ca8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat center/contain;
  pointer-events:none;
}

/* ─── Offline banner ─── */
body.offline::before{
  content:'⚠ Offline — changes may not save';
  position:fixed;top:0;left:0;right:0;
  background:var(--amber);color:#000;text-align:center;
  padding:8px 14px;z-index:300;font-size:13px;font-weight:600;
  animation:offline-in .25s ease-out;
}
body.offline{padding-top:34px}
@keyframes offline-in{from{transform:translateY(-100%)}to{transform:none}}

/* ─── Long text wrap protection ─── */
td b{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.mono-key{min-width:0;flex:1 1 auto;max-width:100%}

/* ─── Empty-state polish ─── */
.empty .ic{animation:empty-bob 3s ease-in-out infinite}
@keyframes empty-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ─── Reduced motion respect ─── */
@media (prefers-reduced-motion:reduce){
  .main,tbody tr,.tile,.card,.modal-bg,.modal,.toast,
  .pill .dot,.skel,.btn.btn-loading::after,.btn.btn-success-flash,
  .subcard,.empty .ic{
    animation:none!important;transition:none!important;
  }
}

/* ─── High-contrast mode tweaks ─── */
@media (prefers-contrast:more){
  :root{--brand:#5cb0ff;--green:#3eea8c;--red:#ff7080;--amber:#ffd060}
}

/* ─── Language picker ─── */
.lms-lang-picker select{
  background:rgba(255,255,255,.04);
  color:var(--t2);
  border:1px solid var(--b1);
  border-radius:6px;
  padding:3px 6px;
  font-size:12px;
  cursor:pointer;
}