/* ===== Insight Hub — ADMIN · Glassmorphism · DARK (tone black) ===== */
:root{
  --a-accent:#ff7a1a; --a-accent2:#e8590c;
  --a-fill:linear-gradient(135deg,#ff7a1a,#e8590c);
  --a-ink:#f4f1ed; --a-muted:#9a948c;
  --a-card:rgba(255,255,255,.045);
  --a-glass-line:rgba(255,255,255,.10);
  --a-shadow:0 16px 44px rgba(0,0,0,.55);
  --a-shadow-sm:0 6px 18px rgba(0,0,0,.45);
  --a-line:rgba(255,255,255,.10);
  --a-radius:16px; --a-radius-sm:10px; --a-radius-pill:30px;
  --a-ok:#4ade80; --a-warn:#fbbf24; --a-bad:#f87171; --a-blue:#6db3f2; --a-pink:#f0a3c4;
}
*{box-sizing:border-box;margin:0;padding:0}
body.admin{
  font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--a-ink);line-height:1.5;min-height:100vh;
  background:#0c0a09;
}
/* Lớp nền cố định — thay attachment:fixed (iOS Safari không hỗ trợ) */
body.admin::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 760px at 50% -12%, rgba(255,110,20,.20) 0%, rgba(255,110,20,0) 55%),
    radial-gradient(900px 680px at -5% 108%, rgba(180,60,10,.18) 0%, rgba(180,60,10,0) 55%),
    linear-gradient(160deg,#0d0a08 0%,#0a0807 100%);
}
a{color:var(--a-accent2);text-decoration:none}
a:hover{color:var(--a-accent)}

/* ---- shell ---- */
.shell{display:flex;min-height:100vh}
.sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;
  background:rgba(14,16,22,.66);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-right:1px solid var(--a-glass-line);box-shadow:6px 0 30px rgba(0,0,0,.4)}
.sb-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid var(--a-line);color:var(--a-ink);font-weight:800;font-size:16px}
.sb-brand .logo{width:32px;height:32px;border-radius:var(--a-radius-sm);background:var(--a-fill);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;box-shadow:var(--a-shadow-sm)}
.sb-brand small{display:block;font-size:10px;font-weight:700;color:var(--a-muted);letter-spacing:1px}
.sb-nav{flex:1;padding:14px 12px;overflow-y:auto}
.sb-nav .grp{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#7e849a;padding:14px 12px 6px;font-weight:800}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--a-radius-sm);color:#b8bdcf;font-size:13.5px;font-weight:600;margin-bottom:3px;transition:.16s}
.sb-nav a:hover{background:rgba(255,255,255,.07);color:var(--a-accent);box-shadow:var(--a-shadow-sm)}
.sb-nav a.on{background:var(--a-fill);color:#fff;box-shadow:var(--a-shadow-sm)}
.sb-nav a .ic{width:18px;text-align:center}
.sb-user{padding:16px;border-top:1px solid var(--a-line);font-size:12px}
.sb-user .nm{color:var(--a-ink);font-weight:800}
.sb-user .rl{color:var(--a-muted);text-transform:capitalize}
.sb-user a{display:inline-block;margin-top:8px;color:var(--a-muted);font-size:12px}
.sb-user a:hover{color:var(--a-accent)}

/* ---- main ---- */
.main{flex:1;margin-left:240px;min-width:0}
.topbar{background:rgba(14,16,22,.6);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--a-glass-line);padding:15px 28px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:18px;font-weight:800;color:var(--a-ink);letter-spacing:-.2px}
.topbar .sp{flex:1}
.topbar .ext{font-size:12.5px;color:var(--a-muted);border:1px solid var(--a-glass-line);background:rgba(255,255,255,.05);padding:7px 14px;border-radius:var(--a-radius-pill)}
.topbar .ext:hover{color:var(--a-accent);background:rgba(255,255,255,.1)}
.content{padding:26px 28px;max-width:1200px}
.crumb{font-size:12px;color:var(--a-muted);margin-bottom:14px}
.crumb a{color:var(--a-muted)} .crumb a:hover{color:var(--a-accent)}

/* ---- components (dark glass) ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:20px}
.stat{background:var(--a-card);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--a-glass-line);border-radius:var(--a-radius);padding:18px;box-shadow:var(--a-shadow-sm)}
.stat .n{font-size:26px;font-weight:800;color:var(--a-accent);letter-spacing:-.5px} .stat .l{font-size:12px;color:var(--a-muted);margin-top:4px}
.stat.hl{background:var(--a-fill);border:1px solid var(--a-glass-line);box-shadow:var(--a-shadow)}.stat.hl .n,.stat.hl .l{color:#fff}

.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.panel{background:var(--a-card);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--a-glass-line);border-radius:var(--a-radius);padding:20px;box-shadow:var(--a-shadow-sm)}
.panel h2{font-size:15px;color:var(--a-ink);margin-bottom:13px;font-weight:800}

label{font-size:13px;color:var(--a-muted);display:block}
input,select{width:100%;padding:10px 12px;margin:5px 0 12px;border:1px solid var(--a-glass-line);border-radius:var(--a-radius-sm);font-size:14px;background:rgba(255,255,255,.06);color:var(--a-ink)}
input:focus,select:focus{outline:none;border-color:var(--a-accent2);box-shadow:0 0 0 3px rgba(255,255,255,.10);background:rgba(255,255,255,.10)}
.btn{padding:10px 20px;background:var(--a-fill);color:#fff;border:1px solid var(--a-glass-line);border-radius:var(--a-radius-pill);font-weight:700;cursor:pointer;font-size:13.5px;box-shadow:var(--a-shadow-sm)}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--a-accent);border:1px solid var(--a-glass-line);box-shadow:none}
.btn.green{background:linear-gradient(135deg,#34d399,#16a34a);border-color:transparent} .btn.sm{padding:6px 13px;font-size:12px}
.link-danger{color:var(--a-bad);background:none;border:none;cursor:pointer;font-size:12px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--a-line)}
th{color:var(--a-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.chip{display:inline-block;padding:2px 9px;border-radius:var(--a-radius-pill);font-size:11px;font-weight:700}
.cA{background:rgba(240,163,196,.18);color:#f0a3c4}.cB{background:rgba(109,179,242,.18);color:#9cc9f7}.cC{background:rgba(255,255,255,.10);color:#a8aec2}
.chip.ok{background:rgba(74,222,128,.18);color:#4ade80}.chip.warn{background:rgba(251,191,36,.18);color:#fbbf24}

.callout{background:rgba(109,179,242,.12);border:1px solid rgba(109,179,242,.30);border-radius:var(--a-radius);padding:13px 16px;font-size:13px;margin-bottom:18px;color:#bcd4f2;backdrop-filter:blur(8px)}
.callout.ok{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.30);color:#bdeccb}
.callout.bad{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.30);color:#f3bcbc}

pre{background:rgba(0,0,0,.45);color:#e2e8f0;padding:13px;border-radius:var(--a-radius-sm);font-size:11.5px;overflow:auto;border:1px solid var(--a-glass-line)}
code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:6px;font-size:12px}
details summary{cursor:pointer;color:var(--a-accent);font-weight:700;font-size:12.5px}

/* ---- login (standalone, dark glass) ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:
    radial-gradient(900px 620px at 50% -10%, rgba(255,110,20,.22) 0%, rgba(255,110,20,0) 55%),
    radial-gradient(800px 560px at 100% 100%, rgba(180,60,10,.18) 0%, rgba(180,60,10,0) 55%),
    linear-gradient(160deg,#0d0a08 0%,#0a0807 100%)}
.login-card{background:rgba(255,255,255,.055);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--a-glass-line);border-radius:var(--a-radius);padding:34px;width:100%;max-width:390px;box-shadow:var(--a-shadow)}
.login-card .lg{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--a-ink);margin-bottom:6px}
.login-card .lg .logo{width:36px;height:36px;border-radius:var(--a-radius-sm);background:var(--a-fill);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;box-shadow:var(--a-shadow-sm)}
.login-card p.sub{color:var(--a-muted);font-size:13px;margin-bottom:20px}
.login-card .btn{width:100%;padding:12px;margin-top:6px}

@media(max-width:760px){
  .sidebar{position:static;width:100%;height:auto;flex-direction:row;flex-wrap:wrap;border-right:none}
  .sb-nav{display:flex;flex-wrap:wrap;flex:1 1 100%}
  .sb-user{flex:1 1 100%}
  .main{margin-left:0}
  .g2,.g3{grid-template-columns:1fr}
}

/* ===== Motion layer — cảm giác iOS (đồng bộ với front) ===== */
:root{--ease-ios:cubic-bezier(.16,1,.3,1);--ease-ios-soft:cubic-bezier(.22,1,.36,1)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s var(--ease-ios-soft) both}
::view-transition-new(root){animation:vt-in .38s var(--ease-ios) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

body.admin a,body.admin button,body.admin .btn,body.admin .stat,body.admin .panel,body.admin .sb-nav a{
  transition:transform .5s var(--ease-ios),box-shadow .5s var(--ease-ios),
    background-color .28s var(--ease-ios-soft),color .28s var(--ease-ios-soft),
    border-color .28s var(--ease-ios-soft),filter .28s var(--ease-ios-soft)}
body.admin .btn:active,body.admin .sb-nav a:active,body.admin .topbar .ext:active{
  transform:scale(.96);transition-duration:.08s}
body.admin .sb-nav a:hover{transform:translateX(2px)}
a,button{-webkit-tap-highlight-color:transparent}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.content>*{animation:rise .5s var(--ease-ios) backwards}
.content>*:nth-child(1){animation-delay:.03s}
.content>*:nth-child(2){animation-delay:.08s}
.content>*:nth-child(3){animation-delay:.13s}
.content>*:nth-child(4){animation-delay:.18s}
.login-card{animation:rise .55s var(--ease-ios) backwards}
.bar>i{transition:width .7s var(--ease-ios)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}