/* Layout: app bar + four views (Home, My Card, Kiosk, Committee) in the ID-card identity: navy ground, gold accent, Archivo display over Plus Jakarta Sans */
:root{
  --bg:#F3F5FA; --surface:#FFFFFF; --surface-2:#EAEFF8; --ink:#0B1E4A; --ink-2:#3A4A6E; --muted:#5F6E8F; --line:#D6DDEB;
  --navy:#12307A; --navy-deep:#0B1E4A; --on-navy:#FFFFFF; --on-navy-2:#C9D6F7; --gold:#F5B921; --on-gold:#0B1E4A;
  --accent:#1F4FBF; --ok:#167A4B; --ok-bg:#E3F4EB; --warn:#9A5B00; --warn-bg:#FDF0D6; --bad:#B42630; --bad-bg:#FBE4E5; --info:#1F4FBF; --info-bg:#E4ECFC;
  --room-used:#DDF0E4; --room-used-ink:#14593A; --room-me:#F5B921; --room-me-ink:#0B1E4A; --room-off:#EEF1F7; --room-off-ink:#6A7799;
  --f-display:'Archivo', 'Arial Narrow', Arial, sans-serif; --f-body:'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --r:10px; --shadow:0 1px 2px rgba(11,30,74,.06), 0 4px 16px rgba(11,30,74,.06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A132C; --surface:#111D3D; --surface-2:#18264B; --ink:#E7ECF8; --ink-2:#BCC7E2; --muted:#8E9CC0; --line:#26375F;
  --navy:#142B66; --navy-deep:#0B1840; --on-navy:#FFFFFF; --on-navy-2:#C9D6F7; --gold:#F5B921; --on-gold:#0B1E4A;
  --accent:#8EAEFF; --ok:#5FD39A; --ok-bg:#123A2A; --warn:#F2C062; --warn-bg:#3A2C10; --bad:#FF8A8F; --bad-bg:#3E1A20; --info:#8EAEFF; --info-bg:#1B2C5A;
  --room-used:#163E2C; --room-used-ink:#9BE3BE; --room-me:#F5B921; --room-me-ink:#0B1E4A; --room-off:#16223F; --room-off-ink:#7F8DB2;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0A132C; --surface:#111D3D; --surface-2:#18264B; --ink:#E7ECF8; --ink-2:#BCC7E2; --muted:#8E9CC0; --line:#26375F;
  --navy:#142B66; --navy-deep:#0B1840; --on-navy:#FFFFFF; --on-navy-2:#C9D6F7; --gold:#F5B921; --on-gold:#0B1E4A;
  --accent:#8EAEFF; --ok:#5FD39A; --ok-bg:#123A2A; --warn:#F2C062; --warn-bg:#3A2C10; --bad:#FF8A8F; --bad-bg:#3E1A20; --info:#8EAEFF; --info-bg:#1B2C5A;
  --room-used:#163E2C; --room-used-ink:#9BE3BE; --room-me:#F5B921; --room-me-ink:#0B1E4A; --room-off:#16223F; --room-off-ink:#7F8DB2;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.5}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; line-height:1.15}
h2{font-size:26px; font-weight:800}
h3{font-size:18px; font-weight:800}
p{margin:0}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.code{font-family:var(--f-display); font-weight:700; letter-spacing:.12em}
.label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.wrap{max-width:1160px; margin:0 auto; padding-inline:16px}

.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--navy-deep); color:var(--on-navy)}
.bar .wrap{display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap; padding-block:6px}
.brand{display:flex; align-items:baseline; gap:8px; font-family:var(--f-display); font-weight:900; font-size:22px; letter-spacing:-.3px; white-space:nowrap}
.brand span{color:var(--gold)}
.brand small{font-family:var(--f-body); font-weight:600; font-size:12px; color:var(--on-navy-2); letter-spacing:.02em}
nav.tabs{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
nav.tabs button{background:transparent; border:0; color:var(--on-navy-2); padding:10px 14px; border-radius:8px; font-weight:700; cursor:pointer; min-height:44px}
nav.tabs button:hover{color:var(--on-navy); background:rgba(255,255,255,.08)}
nav.tabs button[aria-current="page"]{color:var(--on-gold); background:var(--gold)}
.demo-strip{background:var(--gold); color:var(--on-gold); font-size:13px; font-weight:600}
.demo-strip .wrap{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-block:6px}
.demo-strip button{background:transparent; border:1.5px solid var(--on-gold); color:var(--on-gold); border-radius:999px; padding:2px 10px; font-weight:700; cursor:pointer; font-size:12px}

main{padding-block:24px 48px}
.section{display:flex; flex-direction:column; gap:14px; padding-block:20px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow)}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:16px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); font-weight:700; cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}
.btn.small{min-height:36px; padding:0 12px; font-size:13px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; font-weight:700; color:var(--ink-2)}
.input,select.input{min-height:44px; border:1.5px solid var(--line); border-radius:8px; background:var(--surface); padding:0 12px; width:100%}
.input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--info-bg)}
.seg{display:inline-flex; background:var(--surface-2); border-radius:10px; padding:4px; gap:4px; flex-wrap:wrap}
.seg button{border:0; background:transparent; padding:8px 14px; border-radius:7px; font-weight:700; cursor:pointer; color:var(--ink-2); min-height:40px}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap}
.pill.ok{background:var(--ok-bg); color:var(--ok)} .pill.warn{background:var(--warn-bg); color:var(--warn)} .pill.bad{background:var(--bad-bg); color:var(--bad)} .pill.info{background:var(--info-bg); color:var(--info)} .pill.muted{background:var(--surface-2); color:var(--muted)}
.empty{color:var(--muted); font-size:14px; padding:12px 0}
.note{font-size:13px; color:var(--muted)}

/* slider */
.slider{position:relative; border-radius:16px; overflow:hidden; background:var(--navy-deep); color:#FFFFFF; min-height:360px; isolation:isolate}
.slide{position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; align-items:center; padding:40px 56px 64px; opacity:0; visibility:hidden; transform:translateX(18px); transition:opacity .25s ease, transform .25s ease, visibility 0s .25s}
.slide.on{position:relative; opacity:1; visibility:visible; transform:none; transition:opacity .55s ease .25s, transform .55s ease .25s}
.slide::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 85% 40%, rgba(31,79,191,.55), transparent 60%)}
.slide .deco{position:absolute; right:-60px; top:-40px; width:340px; opacity:.28; z-index:-1; pointer-events:none}
.eyebrow{display:inline-flex; gap:10px; align-items:center; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#F5B921}
.eyebrow::before{content:""; width:28px; height:2px; background:#F5B921}
.slide h2{font-size:clamp(30px,4.6vw,52px); font-weight:900; letter-spacing:-.6px; line-height:1.05; margin-top:14px; color:#FFFFFF}
.slide h2 em{font-style:normal; color:#F5B921}
.slide .alt{font-family:var(--f-display); font-weight:600; font-size:18px; color:#C9D6F7; margin-top:10px; max-width:34ch}
.speaker{margin-top:22px; display:flex; flex-direction:column; gap:2px; border-left:2px solid rgba(255,255,255,.25); padding-left:14px}
.speaker b{font-family:var(--f-display); font-size:19px; font-weight:800}
.speaker span{font-size:14px; color:#C9D6F7}
.portraits{display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap}
.portrait{width:220px; height:220px; border-radius:50%; padding:6px; background:conic-gradient(#F5B921 0 70%, rgba(245,185,33,.25) 70% 100%); flex:none; position:relative}
.portrait img,.portrait .mono{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:4px solid #0B1E4A; background:#12307A}
.portrait .mono{display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:900; font-size:64px; letter-spacing:-1px; color:#F5B921}
.portrait.sm{width:168px; height:168px}
.portrait.sm .mono{font-size:46px}
.pcap{text-align:center; font-size:13px; color:#C9D6F7; margin-top:8px; max-width:180px}
.pcap b{display:block; color:#FFFFFF; font-family:var(--f-display); font-size:15px}
.bigmark{font-family:var(--f-display); font-weight:900; font-size:120px; line-height:1; color:#F5B921; text-align:center; letter-spacing:-4px}
.sl-ctrl{position:absolute; left:56px; right:56px; bottom:18px; display:flex; align-items:center; gap:12px; z-index:2}
.dots{display:flex; gap:8px; flex:1}
.dots button{width:28px; height:28px; border:0; background:transparent; padding:0; cursor:pointer; display:flex; align-items:center}
.dots button::after{content:""; width:100%; height:3px; border-radius:2px; background:rgba(255,255,255,.3)}
.dots button[aria-current="true"]::after{background:#F5B921}
.sl-btn{width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:transparent; color:#FFFFFF; cursor:pointer; display:flex; align-items:center; justify-content:center}
.sl-btn:hover{border-color:#F5B921; color:#F5B921}
.statstrip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px}
.statstrip div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; display:flex; gap:10px; align-items:baseline}
.statstrip b{font-family:var(--f-display); font-size:26px; color:var(--navy)}
:root[data-theme="dark"] .statstrip b{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .statstrip b{color:var(--gold)}}

/* home */
.sched-day{display:flex; flex-direction:column}
.sched-item{display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap:12px; padding:12px 0; border-top:1px solid var(--line); align-items:start}
.sched-item:first-child{border-top:0}
.sched-item .t{font-weight:700; color:var(--ink-2)}
.sched-item .title{font-weight:700}
.sched-item .who{color:var(--muted); font-size:13px}
.sched-item.minor .title{font-weight:500; color:var(--ink-2)}
.results{display:flex; flex-direction:column}
.result{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px 0; border-top:1px solid var(--line); align-items:center}
.result:first-child{border-top:0}
.result .n{font-weight:700}
.result .s{font-size:13px; color:var(--muted)}
.where{font-family:var(--f-display); font-weight:800; text-align:right}
.buildings{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px}
.bld{border:1px solid var(--line); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--surface)}
.bld .who{font-size:13px; color:var(--muted)}
.rooms{display:flex; flex-wrap:wrap; gap:6px}
.room{font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px; background:var(--surface-2); color:var(--ink-2)}
.contact{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.contact:first-child{border-top:0}

/* my card */
.login{max-width:440px; margin:24px auto}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; font-weight:600; cursor:pointer; min-height:36px}
.chip:hover{border-color:var(--accent)}
.idcard{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); max-width:380px; width:100%}
.idcard .top{background:var(--navy); color:var(--on-navy); padding:16px 18px}
.idcard .top .brand{font-size:24px}
.idcard .band{background:var(--gold); color:var(--on-gold); padding:6px 18px; display:flex; justify-content:space-between; font-weight:800; font-family:var(--f-display); letter-spacing:.12em; font-size:14px}
.idcard .band.teacher{background:#B5470D; color:#FFFFFF} .idcard .band.intl{background:#0E7C74; color:#FFFFFF} .idcard .band.committee{background:#A3132D; color:#FFFFFF}
.idcard .body{padding:16px 18px; display:flex; flex-direction:column; gap:12px}
.idcard .name{font-family:var(--f-display); font-weight:800; font-size:22px; line-height:1.15}
.kv{display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:8px}
.kv div{background:var(--surface-2); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column}
.kv b{font-family:var(--f-display); font-size:16px}
.qrbox{display:flex; gap:14px; align-items:center}
.qr{width:120px; height:120px; padding:8px; background:#FFFFFF; border:1.5px solid #0B1E4A; border-radius:10px; flex:none; color:#0B1E4A; font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center}
.qr img,.qr canvas{width:100%!important; height:100%!important; display:block}
.cardwrap{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:20px; align-items:start}
.progress{display:flex; flex-direction:column; gap:10px}
.progress .dotsrow{display:flex; gap:6px; flex-wrap:wrap}
.progress .pt{flex:1 1 90px; border-radius:8px; padding:8px 10px; background:var(--surface-2); font-size:12px; font-weight:600; color:var(--muted); border-top:3px solid var(--line)}
.progress .pt.done{border-top-color:var(--ok); color:var(--ink)}
.progress .pt b{display:block; font-family:var(--f-display); font-size:13px; color:var(--ink)}
.att{display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:12px; padding:11px 0; border-top:1px solid var(--line); align-items:center}
.att.minor span:nth-child(2){color:var(--ink-2)}
.daylabel{font-family:var(--f-display); font-weight:800; font-size:15px; padding-top:16px; padding-bottom:4px}

/* venue map */
.mapbox{overflow-x:auto; padding-bottom:4px}
.bmap{display:grid; gap:6px; min-width:560px}
.bmap .c{border-radius:6px; padding:8px 4px; text-align:center; font-size:12px; font-weight:700; background:var(--room-off); color:var(--room-off-ink); min-height:46px; display:flex; align-items:center; justify-content:center; line-height:1.2}
.bmap .c.used{background:var(--room-used); color:var(--room-used-ink)}
.bmap .c.me{background:var(--room-me); color:var(--room-me-ink); box-shadow:0 0 0 3px var(--ink); font-weight:800}
.bmap .c.stairs{background:transparent; border:1.5px dashed var(--line); color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg)}
.bmap .c.hall{background:transparent; border:1.5px dashed var(--line); color:var(--muted)}
.bmap .c.vvip{background:var(--info-bg); color:var(--info); border:1.5px solid var(--info)}
.bmap .c.floor{background:transparent; min-height:auto; padding:6px 2px 0; justify-content:flex-start; font-family:var(--f-display); font-size:13px; color:var(--ink-2); letter-spacing:.04em}
.bmap .roof{grid-column:1 / -1; height:16px; background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 7px); clip-path:polygon(4% 100%, 14% 0, 86% 0, 96% 100%)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-2)}
.legend i{display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px; margin-right:6px}

/* kiosk */
.kiosk{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; align-items:start}
.scanpanel{background:var(--navy-deep); color:var(--on-navy); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:16px}
.scanpanel .label{color:var(--on-navy-2)}
.scanpanel select,.scanpanel .input{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:var(--on-navy)}
.scanpanel select option{color:#0B1E4A; background:#FFFFFF}
.ktabs{display:grid; grid-template-columns:1fr 1fr; background:rgba(255,255,255,.08); border-radius:10px; padding:4px; gap:4px}
.ktabs button{border:0; background:transparent; color:var(--on-navy-2); font-weight:800; font-family:var(--f-display); letter-spacing:.06em; padding:10px; border-radius:7px; cursor:pointer; min-height:44px}
.ktabs button[aria-selected="true"]{background:var(--gold); color:var(--on-gold)}
.scanin{font-family:var(--f-display); font-size:28px; letter-spacing:.14em; min-height:64px; text-align:center; text-transform:uppercase}
.feedback{border-radius:12px; padding:22px; min-height:170px; display:flex; flex-direction:column; justify-content:center; gap:6px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); transition:background .2s}
.feedback .big{font-family:var(--f-display); font-weight:900; font-size:30px; line-height:1.1}
.feedback .small{font-size:15px; color:var(--on-navy-2)}
.feedback.ok{background:#167A4B; border-color:#5FD39A} .feedback.dup{background:#1F4FBF; border-color:#8EAEFF} .feedback.bad{background:#9E1F28; border-color:#FF8A8F} .feedback.wrong{background:#6B4A00; border-color:#F2C062}
.feedback.ok .small,.feedback.dup .small,.feedback.bad .small,.feedback.wrong .small{color:#FFFFFF}
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.kpi{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r); padding:12px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; min-height:76px}
.kpi:hover{border-color:var(--accent)}
.kpi b{font-family:var(--f-display); font-size:30px; line-height:1.1}
.kpi.k-ok b{color:var(--ok)} .kpi.k-bad b{color:var(--bad)}
.kpi[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 -4px 0 var(--gold)}
.klist{display:flex; flex-direction:column; max-height:420px; overflow:auto}
.klist div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:9px 0; border-top:1px solid var(--line); font-size:14px; align-items:center}
.klist div:first-child{border-top:0}
.klist .sub{font-size:12px; color:var(--muted)}
.switch{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; cursor:pointer}

/* committee */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.tile b{display:block; font-family:var(--f-display); font-size:32px; line-height:1.1}
.tile.ok b{color:var(--ok)} .tile.bad b{color:var(--bad)}
.bars{display:flex; flex-direction:column; gap:10px}
.barrow{display:grid; grid-template-columns:190px minmax(0,1fr) 72px; gap:10px; align-items:center; font-size:14px}
.track{height:12px; border-radius:6px; background:var(--surface-2); overflow:hidden; display:flex}
.track i{display:block; height:100%; background:var(--ok)}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--surface-2); position:sticky; top:0}
.filters{display:grid; grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); gap:10px}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--navy-deep); color:var(--on-navy); padding:10px 16px; border-radius:10px; font-weight:600; box-shadow:var(--shadow); z-index:50}

@media (max-width:860px){
  .kiosk,.cardwrap{grid-template-columns:minmax(0,1fr)}
  .tiles,.statstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{grid-template-columns:minmax(0,1fr)}
  nav.tabs{margin-left:0; width:100%}
  nav.tabs button{flex:1; padding:10px 8px}
  .brand small{display:none}
  .slide{grid-template-columns:minmax(0,1fr); padding:28px 22px 72px; gap:18px; align-content:start}
  .slide .vis{order:-1}
  .portrait{width:132px; height:132px} .portrait.sm{width:104px; height:104px}
  .portrait .mono{font-size:40px} .portrait.sm .mono{font-size:30px}
  .portraits{justify-content:flex-start}
  .pcap{max-width:130px; text-align:left}
  .bigmark{font-size:72px; text-align:left}
  .sl-ctrl{left:22px; right:22px; gap:8px}
  .dots{gap:4px}
  .dots button{width:18px}
  #slPrev,#slNext{display:none}
}
@media (max-width:520px){
  .sched-item,.att{grid-template-columns:minmax(0,1fr) auto}
  .sched-item .t,.att .t{grid-column:1 / -1}
  .barrow{grid-template-columns:minmax(0,1fr) 64px}
  .barrow .track{grid-column:1 / -1; grid-row:2}
  .scanin{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* v3 additions */
.logos{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; align-items:center}
.logo{width:112px; height:112px; border-radius:50%; background:#FFFFFF; display:flex; align-items:center; justify-content:center; padding:14px; box-shadow:0 0 0 4px rgba(245,185,33,.55)}
.logo img{max-width:100%; max-height:100%; display:block}
.portrait.white img{background:#FFFFFF; object-fit:contain; padding:18px}
.portrait.xs{width:132px; height:132px}
.portrait.xs .mono{font-size:38px}
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start}
.trio .pcap,.duo .pcap{max-width:none}
.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.person{display:flex; flex-direction:column; align-items:center}
.textarea{min-height:96px; padding:10px 12px; resize:vertical; line-height:1.45}
.fbitem{border-top:1px solid var(--line); padding:12px 0; display:flex; flex-direction:column; gap:6px}
.fbitem:first-child{border-top:0}
.fbitem dl{display:grid; grid-template-columns:110px minmax(0,1fr); gap:4px 10px; margin:0; font-size:14px}
.fbitem dt{color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding-top:2px}
.fbitem dd{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px}
.warnbox{border-radius:8px; padding:10px 12px; font-size:14px; display:flex; flex-direction:column; gap:4px}
.warnbox.warn{background:var(--warn-bg); color:var(--warn)} .warnbox.bad{background:var(--bad-bg); color:var(--bad)} .warnbox.ok{background:var(--ok-bg); color:var(--ok)}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn.danger{border-color:var(--bad); color:var(--bad)}
.btn.danger.solid{background:var(--bad); color:#FFFFFF}
tr.confirm td{background:var(--bad-bg)}
.bmap .c{cursor:default}
.editor .bmap .c{cursor:pointer}
.editor .bmap .c.sel{outline:3px solid var(--accent); outline-offset:1px}
.bmap .c .occ{display:block; font-weight:600; font-size:11px; opacity:.85}
.bmap .c.floor{grid-column:1 / -1}
.edwrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start}
.code-cols{font-family:var(--f-display); font-size:13px; background:var(--surface-2); border-radius:8px; padding:10px 12px; overflow-x:auto; white-space:nowrap}
@media (max-width:860px){ .edwrap{grid-template-columns:minmax(0,1fr)} .trio{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} .portrait.xs{width:84px; height:84px} .portrait.xs .mono{font-size:26px} .logo{width:72px; height:72px; padding:9px} .trio .pcap{font-size:11px} .trio .pcap b{font-size:12px} }
/* v3 fixes */
.logos{flex-wrap:nowrap; gap:14px}
.logo{width:100px; height:100px; flex:0 0 auto; padding:12px}
.bmap .c{flex-direction:column; gap:2px}
.bmap .c.floor{flex-direction:row}
@media (max-width:860px){ .logos{gap:8px} .logo{width:64px; height:64px; padding:7px; box-shadow:0 0 0 3px rgba(245,185,33,.55)} }
/* v4: institution adverts */
.ads{display:flex; flex-direction:column; gap:16px}
.ad{position:relative; overflow:hidden; isolation:isolate; border-radius:16px; color:#FFFFFF}
.ad .deco{position:absolute; right:-50px; top:-40px; width:260px; opacity:.22; z-index:-1; pointer-events:none}
.ad h3{font-family:var(--f-display); font-weight:900; letter-spacing:-.4px; line-height:1.08; margin:0; color:#FFFFFF}
.ad p{margin:0; color:rgba(255,255,255,.82); line-height:1.5}
.ad-main{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; padding:36px 44px; min-height:260px;
  background:radial-gradient(120% 140% at 85% 20%, #1F7A46 0%, #0E4D2B 55%, #0A3520 100%)}
.ad-main h3{font-size:clamp(26px,3.4vw,40px)}
.ad-body{display:flex; flex-direction:column; gap:14px; align-items:flex-start; min-width:0; max-width:620px}
.ad-logo{width:176px; height:176px; border-radius:50%; background:#FFFFFF; padding:18px; box-shadow:0 0 0 5px rgba(245,185,33,.7), 0 18px 40px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center}
.ad-logo img{max-width:100%; max-height:100%; display:block}
.ad-lead{display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18)}
.ad-lead img{width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #F5B921}
.ad-lead span{display:flex; flex-direction:column; font-size:12px; color:rgba(255,255,255,.78); line-height:1.3}
.ad-lead b{font-size:14px; color:#FFFFFF}
.adcta{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 18px; border-radius:999px; background:#F5B921; color:#0B1E4A; font-weight:800; font-size:14px; text-decoration:none}
.adcta:hover{background:#FFD25A}
.adcta.off{background:transparent; color:rgba(255,255,255,.75); border:1px dashed rgba(255,255,255,.45); font-weight:600}
.ad-units{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.ad-unit{min-height:420px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:24px 20px; background:linear-gradient(165deg,#173C8F 0%,#0B1E4A 70%)}
.ad-unit::after{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--tone)}
.ad-unit.gold{--tone:#F5B921} .ad-unit.green{--tone:#2FA866} .ad-unit.sky{--tone:#5B9BF0} .ad-unit.coral{--tone:#F0805B}
.ad-mark{font-family:var(--f-display); font-weight:900; font-size:clamp(36px,4.6vw,62px); letter-spacing:-1px; line-height:1; color:var(--tone); white-space:nowrap}
.ad-unit-body{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.ad-unit h3{font-size:22px}
.ad-unit .sub{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.wa{color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap}
.wa:hover{text-decoration:underline}
@media (max-width:860px){
  .ad-main{grid-template-columns:minmax(0,1fr); padding:26px 22px; gap:18px}
  .ad-logo{width:104px; height:104px; padding:11px; order:-1}
  .ad-units{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:6px; scrollbar-width:thin}
  .ad-unit{flex:0 0 72%; scroll-snap-align:start; padding:22px 20px}
  nav.tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:0}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{padding:10px 6px; font-size:14px; white-space:nowrap; flex:1 0 auto}
}

.ad.has-img{background-size:cover; background-position:center}
.ad-main.has-img{background-image:linear-gradient(90deg,rgba(10,53,32,.94) 0%,rgba(10,53,32,.78) 55%,rgba(10,53,32,.35) 100%),var(--img)}
.ad-unit.has-img{background-image:linear-gradient(180deg,rgba(11,30,74,.25) 0%,rgba(11,30,74,.92) 62%),var(--img)}

.ad-head{display:flex; flex-direction:column; gap:4px}
.ad-head .note{font-size:15px}
.sbtns{display:flex; flex-wrap:wrap; gap:8px; width:100%}
.sbtn{display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:6px 16px 6px 12px; border-radius:12px; text-decoration:none; color:#FFFFFF; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.06); transition:background .15s ease, transform .15s ease}
.sbtn:hover{background:rgba(255,255,255,.14); transform:translateY(-1px)}
.sbtn.main{background:#F5B921; color:#0B1E4A; border-color:#F5B921}
.sbtn.main:hover{background:#FFD25A}
.sbtn svg{flex:none}
.sbtn span{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.sbtn b{font-size:14px; font-weight:800}
.sbtn small{font-size:12px; opacity:.8; overflow-wrap:anywhere}
.ad-unit .sbtns{flex-direction:column}
.ad-unit .sbtn{width:100%}
.ad-more{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.ad-mini{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; background:linear-gradient(120deg,#12307A,#0B1E4A)}
.ad-mini h3{font-size:19px}
.ad-mini p{font-size:14px; margin-top:4px}
.ad-mini .sbtns{width:auto; flex:none}
@media (max-width:1080px){ .ad-units{grid-template-columns:repeat(2,minmax(0,1fr))} .ad-unit{min-height:360px} }
@media (max-width:860px){
  .ad-units{display:flex}
  .ad-unit{flex:0 0 78%; min-height:380px}
  .ad-more{grid-template-columns:minmax(0,1fr)}
  .ad-mini{flex-direction:column; align-items:flex-start}
  .ad-mini .sbtns{width:100%}
}

.ad-mark.long{font-size:clamp(30px,3.3vw,46px)}

.ad-top{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.ad-unit .ad-qr{flex-direction:row; align-items:center; gap:12px}
.ad-unit .ad-qr figcaption{max-width:70px; line-height:1.4}
.ad-qr{margin:0; display:flex; flex-direction:column; align-items:center; gap:6px; flex:none}
.ad-qr .q{background:#FFFFFF; padding:10px; border-radius:6px; line-height:0}
.ad-qr .q img,.ad-qr .q canvas{width:96px; height:96px; display:block; image-rendering:pixelated}
.ad-qr figcaption{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.ad-side{display:flex; flex-direction:column; align-items:center; gap:18px}

.ad-tags{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.ad-tags li{font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; color:var(--tone); background:rgba(255,255,255,.07); border:1px solid color-mix(in srgb, var(--tone) 45%, transparent)}
@media (max-width:860px){ .ad-qr{display:none} .ad-side{gap:0} }

.ad-unit .ad-mark{height:clamp(40px,4.8vw,64px); display:flex; align-items:flex-end}
.ad-unit .ad-tags{margin-bottom:4px}

/* v8: social media article-style grid */
.sm-head{display:flex; align-items:center; gap:18px}
.sm-pill{display:inline-flex; align-items:center; gap:10px; margin:0; padding:10px 18px; border-radius:8px; background:var(--navy); color:#FFFFFF; font-size:22px; white-space:nowrap}
.sm-line{flex:1; height:1px; background:var(--line)}
.sm-tip{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.sm-sub{margin:-2px 0 4px}
.sm-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:30px 26px}
.sm-card{grid-column:span 2; display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:var(--ink); text-decoration:none; min-width:0}
.sm-card.feat{grid-column:span 3}
.sm-card:focus-visible{outline:3px solid var(--accent); outline-offset:6px; border-radius:12px}
.sm-thumb{position:relative; width:100%; aspect-ratio:1.91 / 1; border-radius:12px; overflow:hidden; display:grid; grid-template-columns:58% 42%; background:#22367A; box-shadow:0 1px 2px rgba(11,30,74,.08), 0 8px 22px rgba(11,30,74,.12); container-type:inline-size; isolation:isolate; transition:transform .2s ease, box-shadow .2s ease}
.sm-card:hover .sm-thumb{transform:translateY(-3px); box-shadow:0 2px 4px rgba(11,30,74,.1), 0 16px 34px rgba(11,30,74,.2)}
.sm-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sm-circuit{position:absolute; left:0; top:0; width:58%; height:100%; color:rgba(255,255,255,.18); z-index:-1}
.sm-left{display:flex; flex-direction:column; justify-content:space-between; padding:5.5cqw 5cqw 4.5cqw; color:#FFFFFF; min-width:0}
.sm-brand{display:flex; align-items:center; gap:1.6cqw; font-family:var(--f-display); font-weight:900; font-size:2.9cqw; letter-spacing:.06em}
.sm-brand img{width:5.4cqw; height:5.4cqw; border-radius:50%; background:#FFFFFF; padding:.4cqw}
.sm-hl{font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:5.6cqw; line-height:1.18; letter-spacing:.04em}
.sm-hl em{font-style:normal; color:var(--tone); display:block}
.sm-foot{display:flex; align-items:center; gap:2cqw; font-size:2.3cqw; font-weight:800; letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-transform:uppercase; color:rgba(255,255,255,.8)}
.sm-foot i{width:1px; height:3.2cqw; background:rgba(255,255,255,.5)}
.sm-right{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqw; padding:4cqw 3cqw; background:radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--tone) 38%, #12307A) 0%, #0E1F52 100%); border-left:1px solid rgba(255,255,255,.12)}
.sm-right.tt{background:radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--tone) 30%, #141428) 0%, #08080F 100%)}
.sm-mark{font-family:var(--f-display); font-weight:900; font-size:11cqw; letter-spacing:-.04em; line-height:1; color:var(--tone); white-space:nowrap; text-shadow:0 4px 18px rgba(0,0,0,.35)}
.sm-mark.long{font-size:7cqw; letter-spacing:-.02em}
.sm-logo{width:21cqw; height:21cqw; border-radius:50%; background:#FFFFFF; padding:2cqw; box-shadow:0 0 0 .9cqw var(--tone)}
.sm-logo img{width:100%; height:100%; object-fit:contain; display:block}
.sm-badge{display:flex; align-items:center; gap:1.4cqw; max-width:100%; padding:1.4cqw 3cqw; border-radius:999px; background:var(--tone); color:#0B1E4A; font-size:2.8cqw; font-weight:800}
.sm-badge svg{width:3.2cqw; height:3.2cqw; flex:none}
.sm-badge span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sm-chip{display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:4px 10px; border-radius:6px; background:var(--navy); color:#FFFFFF; font-size:13px; font-weight:700}
.sm-chip svg{width:14px; height:14px}
.sm-chip.tt{background:#14142A}
.sm-card h3{margin:0; font-size:19px; line-height:1.45; font-weight:800; color:var(--ink)}
.sm-card:hover h3{color:var(--accent)}
.sm-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; font-size:13.5px; color:var(--muted)}
.sm-meta > *{white-space:nowrap}
.sm-meta b{color:var(--navy); font-weight:800}
.sm-meta > *+*::before{content:"•"; margin:0 8px; color:var(--muted)}
.sm-meta .go{color:var(--accent); font-weight:800}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sm-meta b{color:var(--ink)} :root:not([data-theme="light"]) .sm-pill{background:#12307A} }
:root[data-theme="dark"] .sm-meta b{color:var(--ink)}
@media (max-width:960px){ .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px} .sm-card,.sm-card.feat{grid-column:span 1} }
@media (max-width:600px){ .sm-grid{grid-template-columns:minmax(0,1fr)} .sm-head{gap:12px} .sm-pill{font-size:18px; padding:8px 14px} .sm-tip{display:none} .sm-card h3{font-size:18px} }
.sm-tags{display:flex; align-items:center; gap:10px; margin-top:6px; min-width:0}
.sm-tags .sm-chip{margin-top:0}
.sm-inst{font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.sm-all{flex:none; min-height:40px; padding:0 22px; border:0; border-radius:6px; background:var(--navy); color:#FFFFFF; font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer}
.sm-all:hover{background:#1B44A8}
.sm-all:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
@media (max-width:600px){ .sm-all{padding:0 14px; font-size:12px} }
/* v6 */
.logos{flex-wrap:wrap; max-width:328px; justify-content:center; row-gap:12px}
.logo .lt{font-family:var(--f-display); font-weight:900; color:#12307A; font-size:18px; letter-spacing:.02em}
@media (max-width:860px){ .logos{max-width:216px; row-gap:8px} .logo .lt{font-size:12px} }
.clink{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-weight:800; font-size:14px; color:var(--accent); text-decoration:none}
.clink:hover{text-decoration:underline}
.routes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px}
.rstep{position:relative; display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:14px; background:var(--surface); border:1px solid var(--line)}
.rstep img{width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:10px}
.rnum{flex:none; width:34px; height:34px; border-radius:50%; background:var(--navy); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:900}
.rbody h3{margin:0 0 4px; font-size:17px}
.rbody p{margin:0; color:var(--ink-2); line-height:1.55}
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:18px}
.mcard{margin:0; border-radius:14px; overflow:hidden; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column}
.mcard img,.mph{width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block}
.mph{display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; background:linear-gradient(160deg,#173C8F,#0B1E4A); color:#F5B921; font-weight:700; font-size:14px}
.mph svg{width:34px; height:34px}
.mcard figcaption{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px}
.mcard figcaption span{color:var(--ink-2); line-height:1.5}
.news{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line)}
.news:first-child{border-top:0; padding-top:0}
.news img{width:120px; height:90px; object-fit:cover; border-radius:10px; flex:none}
.news h3{margin:6px 0 4px; font-size:17px}
.news p{margin:0; color:var(--ink-2); line-height:1.55; white-space:pre-wrap}
.road{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.road li{display:flex; gap:14px; position:relative; padding-bottom:20px}
.road li:not(:last-child)::before{content:""; position:absolute; left:16px; top:36px; bottom:0; width:2px; background:var(--line)}
.road .rbody img{display:block; width:100%; max-width:420px; margin-top:8px; border-radius:10px}
.grp{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.mlist{list-style:none; margin:0; padding:0}
.mlist li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.mlist li.me{background:var(--surface-2); border-radius:8px; padding-inline:8px}
.mright{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none}
.gwrap{display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start}
.gitems{display:flex; flex-direction:column; gap:6px}
.gitem{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink); font:inherit}
.gitem[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset}
.input.small{min-height:34px; padding:4px 8px; font-size:14px}
.ceitems{list-style:none; margin:0; padding:0}
.ceitem{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line)}
.ceitem.confirm{background:var(--bad-bg); border-radius:8px; padding-inline:8px}
.ceitem img,.cethumb{width:72px; height:54px; border-radius:8px; object-fit:cover; flex:none}
.cethumb{display:flex; align-items:center; justify-content:center; background:var(--surface-2); font-family:var(--f-display); font-weight:900; color:var(--muted)}
.ceitem > div:nth-child(2){flex:1; display:flex; flex-direction:column; gap:2px}
.cetext{color:var(--ink-2); font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cebtns{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; flex:none; max-width:260px}
#cePrev{display:flex; align-items:center; gap:10px}
#cePrev img{width:120px; height:80px; object-fit:cover; border-radius:8px}
.idprev{position:fixed; inset:0; z-index:60; background:rgba(11,30,74,.6); display:flex; align-items:center; justify-content:center; padding:16px}
.idprev .box{background:var(--surface); color:var(--ink); border-radius:16px; padding:18px; max-width:420px; width:100%; max-height:94vh; overflow:auto; display:flex; flex-direction:column; gap:12px}
.idprev img{width:100%; height:auto; border-radius:10px; border:1px solid var(--line)}
@media (max-width:860px){ .gwrap{grid-template-columns:minmax(0,1fr)} .news img{width:84px; height:64px} .ceitem{flex-wrap:wrap} .cebtns{max-width:none; justify-content:flex-start} }
@media (max-width:600px){ nav.tabs button{padding:10px 4px; font-size:13px} }
/* v7 */
.hctl{display:flex; gap:6px; align-items:center; order:3}
.hbtn{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 10px; border-radius:8px; border:1px solid rgba(255,255,255,.28); background:transparent; color:var(--on-navy); font-weight:800; font-size:13px; cursor:pointer}
.hbtn:hover{background:rgba(255,255,255,.1)}
.hbtn svg{flex:none}
@media (max-width:860px){ .hctl{order:2; margin-left:auto} nav.tabs{order:3} }
.who.loc,.note.loc{display:inline-flex; align-items:center; gap:4px}
.who.loc svg,.note.loc svg{width:13px; height:13px; flex:none; color:var(--accent)}
.asbtn{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-weight:800; font-size:14px}
.embedbox{margin-top:10px}
.embedbox iframe{width:100%; aspect-ratio:4 / 3; border:0; border-radius:10px; display:block; background:var(--surface-2)}
.mcard.main{grid-column:1 / -1}
.mcard.main img{aspect-ratio:16 / 8}
.mcard .gimg{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in}
.gal{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:8px; padding-bottom:4px}
.gal .gimg{flex:0 0 auto; width:min(260px,72%); scroll-snap-align:start; display:flex; flex-direction:column; gap:4px; padding:0; border:0; background:none; cursor:zoom-in; text-align:left; color:var(--ink-2); font:inherit; font-size:13px}
.gal.one .gimg{width:100%; max-width:440px}
.gal img{width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:10px; display:block}
.rstep .gal img{aspect-ratio:16 / 10}
.lb{position:fixed; inset:0; z-index:70; background:rgba(5,10,25,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px}
.lb img{max-width:100%; max-height:76vh; border-radius:10px; object-fit:contain}
.lb .lbcap{color:#FFFFFF; font-weight:600; text-align:center; max-width:720px}
.lb .lbbar{display:flex; gap:10px; align-items:center; color:#C9D6F7}
.lb .btn{background:rgba(255,255,255,.12); color:#FFFFFF; border-color:rgba(255,255,255,.3)}
.cepic{display:flex; flex-direction:column; gap:6px; width:150px}
.cepic img{width:150px; height:100px; object-fit:cover; border-radius:8px}
#cePrev{flex-wrap:wrap; align-items:flex-start; gap:12px}
.stime{flex:none; width:58px; font-weight:800; color:var(--ink-2)}
.ktabs.kmode button{font-size:14px}
.cambox{display:flex; flex-direction:column; gap:8px; align-items:stretch}
.camview{position:relative; width:100%; aspect-ratio:4 / 3; border-radius:12px; overflow:hidden; background:#000}
.camview video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.camframe{position:absolute; inset:18% 22%; border:3px solid #F5B921; border-radius:14px; box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.cambox .small{color:var(--on-navy-2); font-size:13px}
#gImp table td{white-space:normal}
/* v8 */
#kTabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.ksplit{display:flex; flex-wrap:wrap; gap:8px 18px; padding:10px 14px; border-radius:10px; background:var(--surface,#fff); border:1px solid var(--line,rgba(0,0,0,.1)); font-size:14px; color:var(--ink-2)}
.ksplit b{color:var(--ink); margin-left:4px}
.ksplit[hidden]{display:none}
.dc b{font-weight:700}
#homeNewsWrap .sm-head{flex-wrap:nowrap}
div.who.loc{display:flex; width:fit-content; max-width:100%}
.dc svg{color:var(--gold-ink,var(--accent))}
@media (max-width:600px){ #kTabs button{font-size:13px; letter-spacing:.02em; padding:10px 4px} }
/* v9 */
.tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile.warn b{color:var(--warn,#B7791F)}
.kmenu{margin-bottom:16px; width:fit-content; max-width:100%}
.kmenu button{font-weight:700}
#gDir button[data-gd="out"][aria-selected="true"]{background:#F2994A; color:#1B1200}
#gDir button[data-gd="in"][aria-selected="true"]{background:#5FD39A; color:#06301B}
#gKetWrap .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
#gKetWrap .chip{background:rgba(255,255,255,.08); color:var(--on-navy-2,#C9D3F0); border:1px solid rgba(255,255,255,.18)}
.glist>div{align-items:center}
.gright{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.glong{background:color-mix(in srgb, var(--bad,#C0392B) 9%, transparent)}
tr.glong td{background:color-mix(in srgb, var(--bad,#C0392B) 8%, transparent)}
.gform{display:flex; flex-direction:column; gap:8px; padding:12px; margin:6px 0 10px; border-radius:10px; background:var(--surface-2,rgba(0,0,0,.03)); border:1px solid var(--line,rgba(0,0,0,.1))}
.gform .chips{display:flex; flex-wrap:wrap; gap:6px}
.cnote{margin-top:8px; padding:10px 12px; border-radius:10px; border-left:4px solid var(--warn,#D69E2E); background:color-mix(in srgb, var(--warn,#D69E2E) 12%, transparent); font-size:14px}
.cnote p{margin:4px 0 0}
.cnote.small{margin:0 0 4px; padding:6px 8px; font-size:13px}
.glrec{padding:10px 0; border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.glrec:last-child{border-bottom:0}
.tdot{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--bad,#C0392B); color:#fff; font-size:11px; font-weight:800; margin-left:4px}
.linkbtn{border:0; background:none; color:var(--muted); cursor:pointer; font-size:15px; padding:0 4px}
.rules{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; color:var(--ink-2); font-size:14px}
.socav{width:52px; height:52px; border-radius:50%; object-fit:contain; background:#fff; padding:4px; border:1px solid var(--line,rgba(0,0,0,.1))}
.socav.own{object-fit:cover; padding:0}
.sm-logo.own{padding:0; overflow:hidden}
.sm-logo.own img{object-fit:cover; border-radius:50%}
@media (max-width:600px){ .kmenu{width:100%} .kmenu button{flex:1} }
.sm-logo{overflow:hidden}
#gDir{grid-template-columns:repeat(3,minmax(0,1fr))} #gDir button[data-gd="auto"][aria-selected="true"]{background:var(--gold); color:var(--on-gold)}

/* live */
.live-strip .wrap{gap:12px}
.live-strip #ssText{font-weight:700}
body:not(.role-admin) .adminonly{display:none!important}