/* ============================ TOKENS — bright, single light theme ============================ */
:root{
  --bg:#EEF3F9; --surface:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#EDF1F7;
  --border:#E3E9F2; --border-strong:#CBD5E3;
  --text:#0F1B33; --text-2:#4B5874; --text-3:#7D8AA3;
  --navy:#0B2A4A; --teal:#0E8F8B; --teal-hi:#0B7572; --teal-soft:#E0F5F3; --teal-line:#9FDCD8;
  --orange:#F26B1D; --orange-hi:#D95A12; --orange-soft:#FFE9DB; --orange-line:#FFC8A6;
  --violet:#6D3BEF; --violet-soft:#EDE7FF; --violet-line:#C9B8FF;
  --sky:#1C8BE0; --sky-soft:#E3F1FC; --sky-line:#A9D3F5;
  --green:#1F9D55; --green-soft:#E1F6EA; --green-line:#A8E4C2;
  --rose:#E0344E; --rose-soft:#FDE4E8; --rose-line:#F6B3BD;
  --amber:#C77C05; --amber-soft:#FFF3D9; --amber-line:#F9D98F;
  --accent:var(--teal); --accent-hi:var(--teal-hi); --accent-soft:var(--teal-soft); --accent-line:var(--teal-line); --on-accent:#fff;
  --ok:var(--green); --ok-soft:var(--green-soft); --ok-line:var(--green-line);
  --warn:var(--amber); --warn-soft:var(--amber-soft); --warn-line:var(--amber-line);
  --bad:var(--rose); --bad-soft:var(--rose-soft); --bad-line:var(--rose-line);
  --info:var(--sky); --info-soft:var(--sky-soft); --info-line:var(--sky-line);
  --idle:#7D8AA3; --idle-soft:#EDF1F7; --idle-line:#D5DDE8;
  --rainbow:linear-gradient(90deg,#0E8F8B 0%,#1C8BE0 30%,#6D3BEF 55%,#F26B1D 80%,#FFB020 100%);
  --rail-bg:linear-gradient(180deg,#0B2A4A 0%,#0C4F66 60%,#0E7C86 100%);
  --shadow:0 1px 2px rgba(15,27,51,.04), 0 12px 30px -18px rgba(15,27,51,.28);
  --shadow-pop:0 24px 60px -18px rgba(11,42,74,.4), 0 2px 8px rgba(15,27,51,.08);
  --rail:248px; --topbar:60px; --r:16px; --r-sm:10px;
  --f-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mn:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--sky);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
svg.ic{width:18px;height:18px;flex:0 0 18px}
.mono{font-family:var(--f-mn);font-variant-numeric:tabular-nums;font-size:.95em}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.muted{color:var(--text-2)} .dim{color:var(--text-3)} .hide{display:none !important}
.right{text-align:right} .nowrap{white-space:nowrap}
/* ============================ FRAME ============================ */
#app{display:flex;min-height:100vh}
#rail{width:var(--rail);flex:0 0 var(--rail);background:var(--rail-bg);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.brand{display:flex;gap:11px;align-items:center;padding:16px 16px 15px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand-mark{width:38px;height:38px;border-radius:12px;flex:0 0 38px;display:grid;place-items:center;background:linear-gradient(135deg,#F26B1D,#FFB020);color:#fff;font-weight:800;font-size:13px;letter-spacing:-.02em;box-shadow:0 10px 22px -10px rgba(0,0,0,.7)}
.brand-txt{min-width:0}
.brand-txt strong{display:block;font-weight:700;font-size:14px;line-height:1.2;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-txt span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700;margin-top:2px}
nav#nav{flex:1;overflow-y:auto;padding:12px 12px 20px;scrollbar-width:thin}
.nav-grp{margin-top:14px} .nav-grp:first-child{margin-top:2px}
.nav-grp>.eyebrow{padding:6px 12px 6px;display:block;color:rgba(255,255,255,.45)}
.nav-i{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 12px;border:0;background:transparent;border-radius:11px;color:rgba(255,255,255,.8);cursor:pointer;font-weight:600;font-size:13.5px;transition:background .12s}
.nav-i svg.ic{opacity:.85}
.nav-i:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-i.on{background:#fff;color:var(--navy);box-shadow:0 10px 20px -12px rgba(0,0,0,.6)}
.nav-i.on svg.ic{color:var(--orange);opacity:1}
.rail-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.7)}
.live{display:inline-flex;align-items:center;gap:7px;font-weight:600} .live i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)} .live.on i{background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
#main{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{height:var(--topbar);display:flex;align-items:center;gap:12px;padding:0 22px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
#topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--rainbow)}
.tb-title{font-weight:800;font-size:17px;letter-spacing:-.02em} .tb-spacer{flex:1}
.icon-btn{display:none;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);width:34px;height:34px;place-items:center;cursor:pointer}
.vsel{display:flex;align-items:center;gap:6px;border:1px solid var(--teal-line);background:var(--teal-soft);color:var(--teal-hi);border-radius:99px;padding:0 6px 0 12px}
.vsel select{border:0;background:transparent;color:inherit;padding:7px 4px;font-weight:700;max-width:230px;cursor:pointer}
.userchip{display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--surface);border-radius:99px;padding:3px 12px 3px 3px;cursor:pointer;font-weight:700}
.av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--sky));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}
.avt{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:11.5px;font-weight:800;flex:0 0 32px;letter-spacing:.02em}
.avt.a0{background:linear-gradient(135deg,#0E8F8B,#13A3B8)} .avt.a1{background:linear-gradient(135deg,#1C8BE0,#3FB0FF)} .avt.a2{background:linear-gradient(135deg,#6D3BEF,#9B6BFF)} .avt.a3{background:linear-gradient(135deg,#F26B1D,#FFB020)} .avt.a4{background:linear-gradient(135deg,#E0344E,#FF7A8A)} .avt.a5{background:linear-gradient(135deg,#1F9D55,#35C46E)}
.who{display:flex;align-items:center;gap:10px;min-width:0} .who>div{min-width:0} .who strong{display:block;line-height:1.25} .who .dim{font-size:12px}
#content{flex:1;padding:22px}
.wrap{max-width:1280px;margin:0 auto}
@media (max-width:900px){
  #rail{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-pop)}
  body.nav-open #rail{transform:none}
  .icon-btn{display:grid}
  #content{padding:12px}
  .vsel select{max-width:140px}
  #userName{display:none}
}
/* ============================ PARTS ============================ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-h h3{font-size:14.5px;font-weight:800} .card-h .sp{flex:1}
.card-b{padding:16px 18px}
.page-h{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.page-h h2{font-size:24px;font-weight:800} .page-h .sp{flex:1}
.page-h p{margin:3px 0 0;color:var(--text-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);font-weight:700;cursor:pointer;white-space:nowrap;line-height:1.3;transition:background .12s,transform .05s}
.btn:hover{background:var(--surface-3)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.55;cursor:not-allowed}
.btn.pri{background:linear-gradient(135deg,var(--orange),#FF9A3C);border-color:transparent;color:#fff;box-shadow:0 10px 20px -12px rgba(242,107,29,.9)} .btn.pri:hover{background:var(--orange-hi)}
.btn.ok{background:linear-gradient(135deg,var(--green),#35C46E);border-color:transparent;color:#fff}
.btn.bad{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}
.btn.gh{border-color:transparent;background:transparent;color:var(--sky);box-shadow:none}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.in{width:100%;padding:9px 12px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);min-height:38px;transition:border-color .12s,box-shadow .12s}
.in:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
textarea.in{min-height:72px;resize:vertical}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:12px;font-weight:700;color:var(--text-2)}
.fld .hint{font-size:11.5px;color:var(--text-3)}
.req{color:var(--rose)}
.grid{display:grid;gap:12px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:1fr 1fr 1fr} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.chk{display:flex;align-items:center;gap:8px;font-weight:500;cursor:pointer} .chk input{width:16px;height:16px;accent-color:var(--teal)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:99px;font-size:11.5px;font-weight:700;border:1px solid}
.tag.ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green)} .tag.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.tag.warn{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.tag.bad{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}
.tag.info{background:var(--sky-soft);border-color:var(--sky-line);color:var(--sky)}
.tag.idle{background:var(--idle-soft);border-color:var(--idle-line);color:var(--idle)}
.tag.acc{background:var(--violet-soft);border-color:var(--violet-line);color:var(--violet)}
/* KPI tiles — each its own colour */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media (max-width:900px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{padding:18px 20px;border:0;color:#fff;position:relative;overflow:hidden;min-height:112px;display:flex;flex-direction:column;justify-content:flex-end}
.kpi::after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14)}
.kpi .ki{position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.22);display:grid;place-items:center;z-index:1} .kpi .ki svg{width:20px;height:20px}
.kpi .v{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px;opacity:.92;margin-top:5px;font-weight:600}
.kpi.c1{background:linear-gradient(135deg,#1F9D55,#35C46E)}
.kpi.c2{background:linear-gradient(135deg,#1C8BE0,#3FB0FF)}
.kpi.c3{background:linear-gradient(135deg,#6D3BEF,#9B6BFF)}
.kpi.c4{background:linear-gradient(135deg,#F26B1D,#FFB020)}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.row:hover td{background:var(--teal-soft);cursor:pointer}
.tbl .num,.tbl .right{text-align:right}
.t-empty{padding:40px 16px;text-align:center;color:var(--text-3)}
.t-empty svg{width:40px;height:40px;color:var(--border-strong);display:block;margin:0 auto 8px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .fld{min-width:140px} .filters .fld.wide{flex:1;min-width:200px}
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:130px 1fr 44px;gap:10px;align-items:center;font-size:12.5px}
.bar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-weight:600}
.bar .trk{height:12px;background:var(--surface-3);border-radius:99px;overflow:hidden} .bar .trk i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--sky));border-radius:99px}
.bars.o .bar .trk i{background:linear-gradient(90deg,var(--orange),#FFB020)}
.bars.v .bar .trk i{background:linear-gradient(90deg,var(--violet),#9B6BFF)}
.bars.g .bar .trk i{background:linear-gradient(90deg,var(--green),#35C46E)}
.bar .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:900px){.two{grid-template-columns:1fr}}
.stack{display:grid;gap:16px}
.venue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.venue-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.venue-top{display:flex;gap:14px;align-items:center;padding:16px 18px;background:linear-gradient(135deg,#0B2A4A,#0E7C86);color:#fff}
.venue-card:nth-child(4n+2) .venue-top{background:linear-gradient(135deg,#1C8BE0,#6D3BEF)} .venue-card:nth-child(4n+3) .venue-top{background:linear-gradient(135deg,#6D3BEF,#E0344E)} .venue-card:nth-child(4n) .venue-top{background:linear-gradient(135deg,#F26B1D,#FFB020)}
.venue-top h3{font-size:16px;color:#fff;font-weight:800} .venue-top .meta{color:rgba(255,255,255,.82);font-size:12.5px}
.venue-top .vqr{width:64px;height:64px;background:#fff;border-radius:10px;padding:4px;flex:0 0 64px}
.venue-code{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:99px;background:rgba(255,255,255,.2);font-family:var(--f-mn);font-size:11px;font-weight:700}
.venue-body{padding:12px 18px 14px;display:flex;flex-direction:column;gap:10px}
.venue-body .meta{color:var(--text-2);font-size:12.5px}
.qr-box{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start} @media (max-width:640px){.qr-box{grid-template-columns:1fr}}
.qr-box img{width:100%;border:3px solid var(--teal);border-radius:var(--r);background:#fff;padding:10px}
.link-box{font-family:var(--f-mn);font-size:12.5px;word-break:break-all;padding:9px 11px;background:var(--sky-soft);color:#0B4F86;border-radius:var(--r-sm)}
dl.kv{display:grid;grid-template-columns:140px 1fr;gap:7px 12px;margin:0;font-size:13.5px}
dl.kv dt{color:var(--text-3);font-weight:600} dl.kv dd{margin:0;font-weight:600;word-break:break-word}
/* modals / toasts */
.modal-bg{position:fixed;inset:0;background:rgba(11,42,74,.5);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:40px 14px;z-index:60;overflow-y:auto}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-pop);width:100%;max-width:640px;animation:pop .15s ease-out;overflow:hidden}
.modal.wide{max-width:900px}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface-2);position:relative}
.modal-h::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--rainbow)}
.modal-h h3{font-size:15.5px;flex:1;font-weight:800}
.modal-b{padding:18px 20px}
.modal-f{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--border);flex-wrap:wrap}
.x{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--text-3);padding:2px 6px}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:70;pointer-events:none}
.toast{background:#0F1B33;color:#fff;padding:11px 15px;border-radius:12px;font-weight:700;font-size:13px;box-shadow:var(--shadow-pop);max-width:360px;animation:pop .15s ease-out}
.toast.ok{background:var(--green)} .toast.bad{background:var(--rose)} .toast.info{background:linear-gradient(135deg,var(--sky),var(--violet))}
/* sign-in */
body.pub-mode #rail,body.pub-mode #topbar{display:none}
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:radial-gradient(900px 500px at 0% 0%,#DDF4F2 0%,transparent 60%),radial-gradient(800px 500px at 100% 100%,#FFE9DB 0%,transparent 60%),var(--bg)}
.login-card{width:100%;max-width:880px;padding:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:22px}
@media (max-width:760px){.login-card{grid-template-columns:1fr}}
.login-side{background:linear-gradient(150deg,#0B2A4A 0%,#0E7C86 55%,#1C8BE0 100%);color:#fff;padding:34px 32px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.login-side::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.login-side::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#FFB020,#F26B1D,#E0344E,#6D3BEF)}
.login-side h1{font-size:26px;font-weight:800;line-height:1.2;color:#fff}
.login-side p{margin:0;color:rgba(255,255,255,.85)}
.login-side ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.login-side li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.92)}
.login-side li svg{width:18px;height:18px;flex:0 0 18px;color:#FFB020;margin-top:2px}
.login-form{padding:34px 32px}
.login-brand{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.login-t{font-weight:800;font-size:16px}
.login-h{font-size:22px;margin:16px 0 6px;font-weight:800}
.login-p{margin:0 0 18px}
.big-in{min-height:46px;font-size:15px}
.pub-foot{margin-top:16px;color:var(--text-3);font-size:12px}
.menu{position:absolute;right:22px;top:calc(var(--topbar) - 6px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-pop);min-width:240px;padding:6px;z-index:50}
.menu .mi{display:block;width:100%;text-align:left;padding:9px 11px;border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer;font-weight:600}
.menu .mi:hover{background:var(--surface-3)}
.menu .mh{padding:9px 11px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.q-list{display:grid;gap:8px}
.q-item{display:grid;grid-template-columns:1fr 120px 1fr auto auto;gap:8px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2)}
@media (max-width:700px){.q-item{grid-template-columns:1fr 1fr}}
.field-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border)}
.field-row:last-child{border-bottom:0}
/* everything that opens something looks like it */
.kpi.link{cursor:pointer;transition:transform .12s,box-shadow .12s}
.kpi.link:hover,.kpi.link:focus-visible{transform:translateY(-2px);box-shadow:0 18px 32px -16px rgba(11,42,74,.55)}
.kgo{position:absolute;left:20px;top:16px;font-size:11px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.22);padding:2px 9px;border-radius:99px;z-index:1}
.card-h h3.link{cursor:pointer;color:var(--navy)} .card-h h3.link:hover{color:var(--teal-hi);text-decoration:underline;text-underline-offset:3px}
.bar.link{cursor:pointer;border-radius:8px;padding:2px 4px;margin:0 -4px}
.bar.link:hover{background:var(--surface-2)} .bar.link:hover .lbl{color:var(--teal-hi)} .bar.link:hover .trk i{filter:brightness(1.12)}
.venue-top.link{cursor:pointer} .venue-top.link:hover .vqr{box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.pw{position:relative} .pw .in{padding-right:44px;width:100%}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;color:var(--text-3);width:34px;height:34px;display:grid;place-items:center;border-radius:8px}
.pw-eye:hover{color:var(--teal-hi);background:var(--surface-3)} .pw-eye svg{width:18px;height:18px}
.act-list{max-height:460px;overflow-y:auto;padding:6px 18px 12px}
.act-day{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:12px 0 6px;position:sticky;top:0;background:var(--surface)}
.act{display:grid;grid-template-columns:74px 14px 1fr;gap:10px;align-items:start;padding:7px 6px;border-radius:10px;font-size:13.5px}
.act.link{cursor:pointer} .act.link:hover{background:var(--surface-2)}
.act-t{color:var(--text-3);font-size:12.5px;font-weight:600;padding-top:1px;white-space:nowrap}
.act-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--idle);box-shadow:0 0 0 3px var(--idle-soft)}
.act.in .act-dot{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)} .act.out .act-dot{background:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.act.bad .act-dot{background:var(--rose);box-shadow:0 0 0 3px var(--rose-soft)} .act.cfg .act-dot{background:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)} .act.auth .act-dot{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.act-by{font-weight:800;color:var(--navy)}
.att-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.att-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--surface-2);transition:box-shadow .12s,transform .05s}
.att-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.att-thumb{width:100%;height:88px;object-fit:cover;display:block;background:var(--surface-3)}
.att-thumb.vid{display:grid;place-items:center;background:linear-gradient(135deg,#0B2A4A,#1C8BE0);color:#fff}
.att-thumb.vid svg{width:30px;height:30px}
.att-meta{display:flex;align-items:center;gap:6px;padding:5px 8px;font-size:11px;color:var(--text-3);font-weight:600}
.att-meta span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-del{border:0;background:transparent;color:var(--rose);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.att-view{text-align:center;background:#0F1B33;margin:-18px -20px;padding:10px}
.att-view img,.att-view video{max-width:100%;max-height:70vh;border-radius:8px;display:block;margin:0 auto}
.att-pill{display:inline-flex;align-items:center;gap:3px;padding:0 7px;border-radius:99px;background:var(--violet-soft);color:var(--violet);font-size:11px;font-weight:800;vertical-align:middle}
.att-pill svg{width:11px;height:11px}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.pick{grid-template-columns:1fr}}
.pick-o{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface-2);display:flex;flex-direction:column}
.pick-o.bad{border-color:var(--rose-line);background:var(--rose-soft)}
.pick-o strong{font-size:14px} .pick-o p{margin:6px 0 12px;font-size:13px;color:var(--text-2);flex:1}
.lockbox{border:1px solid var(--violet-line);background:var(--violet-soft);border-radius:12px;padding:12px 14px}
.lockbox .chk strong{color:var(--violet)}