/* Society360 prototype styles. Tokens first; dark theme is a selected set, not an automatic invert. */
:root{color-scheme:light;
--bg:#F3F6F5;--card:#FFFFFF;--card2:#F8FAF9;--ink:#0F1F1C;--ink2:#3D4F4B;--mute:#64748B;--line:#DFE7E4;--line2:#EDF2F0;
--pri:#0F766E;--pri2:#0D9488;--pril:#E0F2EF;--pritx:#0B5F58;--acc:#4F46E5;
--ok:#15803D;--okbg:#E6F6EC;--warn:#A16207;--warnbg:#FEF5D8;--err:#C02637;--errbg:#FDE8EA;--info:#1D4ED8;--infobg:#E6EEFE;--vio:#6D28D9;--viobg:#F0E9FE;--grey:#64748B;--greybg:#EEF2F4;
--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--grid:#e1e0d9;--axis:#c3c2b7;
--side:#0B1F1D;--sidetx:#A9C2BD;--r:14px;--f:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;--sh:0 1px 2px #0f1f1c0a,0 4px 16px #0f1f1c0d;--sh2:0 12px 40px #0f1f1c26;
--ground:#E4EEE9;--road:#CBD8D3;--lawn:#BFE3C9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
--bg:#0A1413;--card:#111E1C;--card2:#0E1917;--ink:#E7F0EE;--ink2:#BFD0CC;--mute:#8FA39F;--line:#21332F;--line2:#182825;
--pri:#2DD4BF;--pri2:#14B8A6;--pril:#123A35;--pritx:#5EEAD4;--acc:#818CF8;
--ok:#4ADE80;--okbg:#0F2E1C;--warn:#FACC15;--warnbg:#332A0B;--err:#FB7185;--errbg:#3A1219;--info:#93C5FD;--infobg:#132544;--vio:#C4B5FD;--viobg:#251A45;--grey:#94A3B8;--greybg:#1C2A28;
--s1:#3987e5;--s2:#d95926;--s3:#199e70;--grid:#2c2c2a;--axis:#383835;
--side:#060E0D;--sidetx:#8FA9A4;--sh:0 1px 2px #0006,0 4px 16px #0005;--sh2:0 12px 40px #000a;--ground:#13231F;--road:#1E302C;--lawn:#173B26}}
:root[data-theme="dark"]{color-scheme:dark;
--bg:#0A1413;--card:#111E1C;--card2:#0E1917;--ink:#E7F0EE;--ink2:#BFD0CC;--mute:#8FA39F;--line:#21332F;--line2:#182825;
--pri:#2DD4BF;--pri2:#14B8A6;--pril:#123A35;--pritx:#5EEAD4;--acc:#818CF8;
--ok:#4ADE80;--okbg:#0F2E1C;--warn:#FACC15;--warnbg:#332A0B;--err:#FB7185;--errbg:#3A1219;--info:#93C5FD;--infobg:#132544;--vio:#C4B5FD;--viobg:#251A45;--grey:#94A3B8;--greybg:#1C2A28;
--s1:#3987e5;--s2:#d95926;--s3:#199e70;--grid:#2c2c2a;--axis:#383835;
--side:#060E0D;--sidetx:#8FA9A4;--sh:0 1px 2px #0006,0 4px 16px #0005;--sh2:0 12px 40px #000a;--ground:#13231F;--road:#1E302C;--lawn:#173B26}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--f);-webkit-font-smoothing:antialiased}
a{color:var(--pritx);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pri2);outline-offset:2px}
svg.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mute{color:var(--mute)}.small{font-size:13px}.tnum{font-variant-numeric:tabular-nums}.nowrap{white-space:nowrap}.right{text-align:right}
h1,h2,h3,h4{line-height:1.25;margin:0}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#14B8A6,#0F766E 60%,#134E4A);display:inline-block;position:relative;flex:none;box-shadow:0 4px 14px #0f766e55}
.logo::after{content:"";position:absolute;inset:8px 8px 7px;background:#fff;clip-path:polygon(50% 0,100% 35%,100% 100%,64% 100%,64% 62%,36% 62%,36% 100%,0 100%,0 35%)}

/* ---------- login ---------- */
.login{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.lhero{background:radial-gradient(800px 500px at 0% 0%,#14b8a644,transparent),linear-gradient(160deg,#0B1F1D,#0F3B36 60%,#115E59);color:#E6F4F1;padding:44px 48px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.lbrand{display:flex;align-items:center;gap:12px;font-size:20px}.lhero h1{font-size:clamp(26px,3.2vw,40px);font-weight:800;max-width:560px;margin-top:28px;color:#fff}
.lhero p{max-width:540px;color:#B5D3CD;margin:0}.lscene{flex:1;min-height:260px;display:grid;place-items:center}.lscene svg{width:100%;max-width:620px;height:auto}
.lpanel{display:grid;place-items:center;padding:36px 20px;background:var(--card)}
.lbox{width:100%;max-width:520px}.lbox h2{font-size:24px;margin-bottom:6px}
.rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.rolecard{display:flex;gap:12px;align-items:center;text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:12px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.rolecard:hover{border-color:var(--pri2);transform:translateY(-1px);box-shadow:var(--sh)}.rolecard b{display:block;font-size:14px}.rolecard small{color:var(--mute);font-size:12px;line-height:1.3;display:block}
.mobapp{border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-top:18px;background:linear-gradient(135deg,var(--pril),transparent 70%)}
.mobhead{display:flex;gap:12px;align-items:center}.mobhead b{display:block;font-size:15px}.mobhead small{display:block;color:var(--mute);font-size:12.5px;line-height:1.35}
.mobicon{width:40px;height:40px;border-radius:12px;background:var(--pri);color:#fff;display:grid;place-items:center;flex:none}.mobicon svg.i{width:20px;height:20px}
.mobsteps{margin:10px 0 12px;padding-left:20px;font-size:13.5px;color:var(--ink2)}.mobsteps li{margin:3px 0}
.simnote{font-size:12.5px;color:var(--mute);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin-top:16px}
@media(max-width:900px){.login{grid-template-columns:1fr}.lhero{padding:28px 20px}.lscene{display:none}.rolegrid{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.fld{margin-bottom:14px;min-width:0}label,.lbl{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--ink2)}label i,.lbl i{color:var(--err);font-style:normal}
input,select,textarea{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;outline:0;min-height:42px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--pri)}
input:focus,select:focus,textarea:focus{border-color:var(--pri2);box-shadow:0 0 0 3px #14b8a62e}
textarea{min-height:96px;resize:vertical}.help{font-size:12.5px;color:var(--mute);margin-top:4px}
.err{color:var(--err);font-size:13px;margin-top:4px}.bad{border-color:var(--err)!important}
.formerr{background:var(--errbg);color:var(--err);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-weight:600;font-size:14px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}
.full{grid-column:1/-1}.chk{display:flex;gap:10px;align-items:flex-start;font-weight:500}.chk input{margin-top:4px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>select,.row>input{flex:1;min-width:160px}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- buttons & badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--pri);background:var(--pri);color:#fff;border-radius:10px;padding:9px 16px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:40px;font-size:14px;text-decoration:none!important}
:root[data-theme="dark"] .btn:not(.o):not(.ghost),.dkbtn{color:#04201D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:not(.o):not(.ghost){color:#04201D}}
.btn:hover{filter:brightness(1.07)}.btn.o{background:var(--card);color:var(--ink);border-color:var(--line)}.btn.o:hover{border-color:var(--pri2);color:var(--pritx)}
.btn.s{padding:5px 11px;font-size:13px;min-height:32px;border-radius:8px}.btn.ok{background:var(--ok);border-color:var(--ok)}.btn.no{background:var(--err);border-color:var(--err)}
.btn.ghost{border-color:transparent;background:none;color:var(--mute)}.btn.ghost:hover{color:var(--pritx);background:var(--pril)}
.btn.xl{min-height:58px;font-size:17px;border-radius:14px;padding:12px 22px}.btn.w{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.ibtn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--ink2);position:relative}
.ibtn:hover{border-color:var(--pri2);color:var(--pritx)}.ibtn .dot{position:absolute;top:5px;right:5px;min-width:17px;height:17px;border-radius:9px;background:var(--err);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--card)}
.bd{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1.6}
.bd svg.i{width:12px;height:12px;stroke-width:2.6}
.bd.ok{background:var(--okbg);color:var(--ok)}.bd.warn{background:var(--warnbg);color:var(--warn)}.bd.err{background:var(--errbg);color:var(--err)}.bd.info{background:var(--infobg);color:var(--info)}.bd.vio{background:var(--viobg);color:var(--vio)}.bd.grey{background:var(--greybg);color:var(--grey)}.bd.pri{background:var(--pril);color:var(--pritx)}
.bd.xl{font-size:15px;padding:6px 14px}
.vis{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:6px;padding:1px 8px;border:1px solid var(--line);color:var(--mute);background:var(--card2);white-space:nowrap}
.vis.members{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}.vis.committee,.vis.staff{color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent)}.vis.owner{color:var(--vio);border-color:color-mix(in srgb,var(--vio) 35%,transparent)}.vis.admin,.vis.restricted{color:var(--err);border-color:color-mix(in srgb,var(--err) 35%,transparent)}
.av{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:700;font-size:13px;flex:none;letter-spacing:.02em}
.av.l{width:64px;height:64px;font-size:22px}.av.s{width:28px;height:28px;font-size:11px}
.who{display:flex;align-items:center;gap:10px;min-width:0}.who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.who small{display:block;color:var(--mute);font-size:12.5px;line-height:1.3}
.masked{display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-size:13px;font-style:italic}
.masked button{font-style:normal}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:262px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--sidetx);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;z-index:40}
.sbrand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;border-bottom:1px solid #ffffff10}.sbrand b{color:#fff;font-size:17px;display:block}.sbrand small{font-size:11.5px;color:#7E9C96;display:block;line-height:1.25}
.side nav{padding:10px 10px 20px;display:grid;gap:1px}
.side nav small{padding:14px 12px 5px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#5F7C76;font-weight:700}
.side nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--sidetx);font-weight:500;font-size:14px;text-decoration:none}
.side nav a:hover{background:#ffffff0b;color:#fff}.side nav a.on{background:linear-gradient(90deg,#0F766E,#0D9488);color:#fff;box-shadow:0 6px 18px #0d948840}
.side nav a .cnt{margin-left:auto;background:#E11D48;color:#fff;border-radius:99px;font-size:11px;padding:0 7px;font-weight:700;line-height:18px}
.sfoot{margin-top:auto;padding:14px 18px;font-size:11.5px;color:#5F7C76;border-top:1px solid #ffffff10}
.scrim{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 24px;min-height:66px}
.top .menu{display:none}.ttl{min-width:0;max-width:40vw}.crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttl h1{font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumb{font-size:12px;color:var(--mute)}.crumb a{color:var(--mute)}
.sp{flex:1}.wrap{position:relative}
.srch{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--card2);border-radius:10px;padding:0 12px;width:min(360px,34vw);color:var(--mute);margin:0}
.srch input{border:0;background:none;padding:9px 0;min-height:38px;box-shadow:none!important}
.me{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:4px 12px 4px 4px;cursor:pointer;text-align:left}
.me .t b{display:block;font-size:13.5px;line-height:1.2;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me .t small{display:block;font-size:11.5px;color:var(--mute);line-height:1.2}
.pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);z-index:60;min-width:240px;overflow:hidden}
.pop a,.pop button.it{display:flex;gap:10px;align-items:center;width:100%;padding:10px 14px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);text-decoration:none;font-size:14px}
.pop a:hover,.pop button.it:hover{background:var(--pril)}
.npop{width:min(400px,92vw)}.npop .nh{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.npop .list{max-height:420px;overflow:auto}.npop .n{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2);cursor:pointer;font-size:13.5px}.npop .n:hover{background:var(--card2)}.npop .n.un{background:color-mix(in srgb,var(--pril) 60%,transparent)}.npop .n small{display:block;color:var(--mute);font-size:12px}
.spop{left:0;right:auto;width:min(520px,92vw);max-height:70vh;overflow:auto}.spop h5{margin:0;padding:10px 14px 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.spop a small{color:var(--mute);margin-left:auto;font-size:12px}
.banner{background:var(--warnbg);color:var(--warn);padding:8px 24px;font-size:13.5px;font-weight:600;border-bottom:1px solid var(--line)}
.view{padding:22px 24px 60px;outline:0;max-width:1500px;width:100%;margin:0 auto;animation:vin .25s ease}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;bottom:0;width:270px;transform:translateX(-100%);transition:transform .25s}.side.open{transform:none}
.scrim.on{display:block;position:fixed;inset:0;background:#0008;z-index:35}.top .menu{display:inline-grid}.srchw{display:none}.top{padding:10px 16px}.view{padding:16px 16px 60px}.me .t{display:none}.me{padding:4px}}
@media(max-width:1000px){.srchw.show{display:block;position:absolute;left:12px;right:12px;top:64px}.srchw.show .srch{width:100%;background:var(--card)}}

/* ---------- layout ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px;min-width:0}
.card>h3,.ch h3{font-size:16px;font-weight:700}.ch{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}.ch .sp{flex:1}.ch p{margin:0}
.grid{display:grid;gap:16px}.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c21{grid-template-columns:2fr 1fr}.c12{grid-template-columns:1fr 2fr}
@media(max-width:1100px){.c3{grid-template-columns:1fr 1fr}.c21,.c12{grid-template-columns:1fr}}
@media(max-width:760px){.c2,.c3{grid-template-columns:1fr}}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;text-decoration:none!important;color:inherit}
.kpi .k{font-size:12.5px;color:var(--mute);font-weight:600;display:flex;align-items:center;gap:7px}.kpi .k .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--pril);color:var(--pritx)}
.kpi .v{font-size:25px;font-weight:800;letter-spacing:-.01em;line-height:1.2}.kpi .s{font-size:12.5px;color:var(--mute)}
a.kpi:hover{border-color:var(--pri2)}
@media(max-width:640px){.kpis{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:12px}.kpi .v{font-size:20px}.kpi .k .ic{display:none}}
.kpi.warn .k .ic{background:var(--warnbg);color:var(--warn)}.kpi.err .k .ic{background:var(--errbg);color:var(--err)}.kpi.ok .k .ic{background:var(--okbg);color:var(--ok)}.kpi.info .k .ic{background:var(--infobg);color:var(--info)}.kpi.vio .k .ic{background:var(--viobg);color:var(--vio)}
.meter{height:8px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:6px}.meter i{display:block;height:100%;background:var(--pri2);border-radius:99px}
.hello{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}.hello h2{font-size:22px;font-weight:800}.hello p{margin:2px 0 0;color:var(--mute)}
.qa{display:flex;gap:8px;flex-wrap:wrap}
.sec{margin-top:18px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:thin}
.tabs button,.tabs a{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--mute);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;font-size:14px;text-decoration:none}
.tabs .on{color:var(--pritx);border-bottom-color:var(--pri2)}.tabs .n{background:var(--greybg);border-radius:99px;font-size:11px;padding:0 7px;margin-left:6px}
.empty{padding:34px 16px;text-align:center;color:var(--mute)}.empty svg.i{width:34px;height:34px;opacity:.5;display:block;margin:0 auto 8px}
.feed{display:grid}.feed .fi{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:13.5px}.feed .fi:last-child{border:0}.feed .fi small{display:block;color:var(--mute);font-size:12px}
.feed .dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--pril);color:var(--pritx);flex:none}
.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:7px 16px;font-size:14px}.kv dt{color:var(--mute)}.kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.note{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--ink2)}
.note.info{background:var(--infobg);border-color:transparent;color:var(--info)}.note.warn{background:var(--warnbg);border-color:transparent;color:var(--warn)}.note.ok{background:var(--okbg);border-color:transparent;color:var(--ok)}.note.err{background:var(--errbg);border-color:transparent;color:var(--err)}
.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:12.5px;background:var(--card);color:var(--ink2)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1.5px solid var(--line);background:var(--card);border-radius:99px;padding:5px 12px;font-size:13px;cursor:pointer;font-weight:600;color:var(--ink2)}.chip.on{background:var(--pril);border-color:var(--pri2);color:var(--pritx)}

/* ---------- tables ---------- */
.tbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.tbar .srch{width:auto;flex:1;min-width:200px;max-width:340px;background:var(--card)}
.tbar select{width:auto;min-width:130px;min-height:40px;padding:8px 10px}.tbar .sp{flex:1}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--card2);white-space:nowrap;position:sticky;top:0}
.t th.sort{cursor:pointer;user-select:none}.t th.sort:hover{color:var(--pritx)}.t th .ar{opacity:.5;margin-left:4px}
.t td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}.t tr:last-child td{border-bottom:0}
.t tbody tr:hover{background:var(--card2)}.t tr.click{cursor:pointer}.t td.num,.t th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.tfoot{display:flex;align-items:center;gap:10px;padding:10px 4px 0;font-size:13px;color:var(--mute);flex-wrap:wrap}.tfoot .sp{flex:1}
.t.compact td,.t.compact th{padding:7px 10px}

/* ---------- modal & toast ---------- */
dialog{border:0;border-radius:18px;padding:0;width:min(680px,94vw);max-height:92vh;background:var(--card);color:var(--ink);box-shadow:var(--sh2);display:flex;flex-direction:column}
dialog:not([open]){display:none}
dialog.wide{width:min(980px,96vw)}dialog::backdrop{background:#03100ecc;backdrop-filter:blur(2px)}
.mhead{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}.mhead h3{flex:1;font-size:18px}
.mbody{padding:18px 20px;overflow:auto}.mfoot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);flex-wrap:wrap}.mfoot:empty{display:none}
.toasts{position:fixed;bottom:20px;right:20px;display:grid;gap:8px;z-index:100;max-width:min(420px,92vw)}
.toasts div{background:#0B1F1D;color:#fff;border-radius:12px;padding:12px 16px;display:flex;gap:10px;align-items:center;box-shadow:var(--sh2);font-size:14px;animation:vin .2s}
.toasts div.e{background:#9F1239}

/* ---------- charts ---------- */
.chart{position:relative}.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh2);border-radius:10px;padding:8px 10px;font-size:12.5px;white-space:nowrap;z-index:5;transform:translate(-50%,-110%)}
.chart .tip b{display:block;font-size:12px;color:var(--mute);font-weight:600}.chart .tip .sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-bottom:8px}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.bars .row{display:grid;grid-template-columns:minmax(110px,190px) 1fr 90px;gap:10px;align-items:center;font-size:13px;padding:5px 0}.bars .bar{height:12px;background:var(--line2);border-radius:4px;overflow:hidden}.bars .bar i{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0}

/* ---------- society visualization ---------- */
.viz{position:relative;background:radial-gradient(1200px 500px at 50% 0%,color-mix(in srgb,var(--pril) 70%,transparent),transparent),var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);overflow:hidden}
.vizbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:color-mix(in srgb,var(--card) 80%,transparent)}
.vizcrumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-weight:600;font-size:14px}.vizcrumb button{border:0;background:none;color:var(--pritx);cursor:pointer;font-weight:700;padding:4px 6px;border-radius:6px}.vizcrumb button:hover{background:var(--pril)}.vizcrumb span{color:var(--mute)}
.stage{position:relative;min-height:520px;display:grid;grid-template-columns:1fr 320px}
.stage svg.iso{width:100%;height:100%;min-height:500px;display:block}
.stage .side2{border-left:1px solid var(--line);padding:16px;background:color-mix(in srgb,var(--card) 88%,transparent);overflow:auto;max-height:640px}
@media(max-width:1280px){.stage{grid-template-columns:1fr}.stage .side2{border-left:0;border-top:1px solid var(--line);max-height:none}.stage svg.iso{min-height:360px}}
.iso .bldg{cursor:pointer;transition:transform .25s ease,filter .2s}.iso .bldg:hover,.iso .bldg.hl{transform:translateY(-10px);filter:drop-shadow(0 14px 14px #0003)}
.iso .floor{cursor:pointer;transition:transform .2s}.iso .floor:hover,.iso .floor.hl{transform:translateX(-14px)}
.iso .unit{cursor:pointer;transition:transform .2s}.iso .unit:hover,.iso .unit.hl{transform:translateY(-8px)}
.iso .unit.dim{opacity:.25}
.iso text{font-family:var(--f);pointer-events:none}.iso .lbl{font-weight:800;fill:var(--ink)}.iso .sub{fill:var(--mute);font-weight:600}
.iso .tag rect{fill:var(--card);stroke:var(--line)}
.zoomin{animation:zin .45s cubic-bezier(.2,.8,.2,1)}@keyframes zin{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.vtip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);padding:10px 12px;font-size:13px;z-index:5;min-width:170px}
.vtip b{display:block;font-size:14px}
.vlegend{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2)}.vlegend span{display:inline-flex;gap:6px;align-items:center}.vlegend i{width:12px;height:12px;border-radius:4px;display:inline-block;border:1px solid #0002}
.blist{display:grid;gap:8px}.bitem{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;background:var(--card);text-align:left;width:100%}.bitem:hover,.bitem.hl{border-color:var(--pri2);background:var(--pril)}
.bitem .sw{width:12px;height:38px;border-radius:5px;flex:none}.bitem b{display:block;font-size:14px}.bitem small{color:var(--mute);font-size:12px;display:block}.bitem .r{margin-left:auto;text-align:right;font-size:12px;color:var(--mute)}
.stackbar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line2);gap:2px;margin-top:6px}.stackbar i{display:block;height:100%}

/* ---------- unit profile ---------- */
.uhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.uhead .ubadge{width:74px;height:74px;border-radius:18px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;flex:none;box-shadow:inset 0 -6px 0 #0002}
.uhead h2{font-size:24px;font-weight:800}.uhead .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}.person{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:flex-start;background:var(--card2)}
.timeline{position:relative;padding-left:22px}.timeline::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--line)}
.timeline .tl{position:relative;padding:0 0 14px}.timeline .tl::before{content:"";position:absolute;left:-20px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--card);border:3px solid var(--pri2)}
.timeline .tl small{color:var(--mute);display:block;font-size:12px}

/* ---------- gate (security) ---------- */
.gate{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gbtn{border:0;border-radius:16px;padding:18px 14px;min-height:112px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;color:#fff;font-weight:700;font-size:16px;cursor:pointer;text-align:left;box-shadow:var(--sh)}
.gbtn svg.i{width:30px;height:30px}.gbtn small{font-weight:500;opacity:.85;font-size:12.5px}
.gbtn:hover{filter:brightness(1.08)}
@media(max-width:900px){.gate{grid-template-columns:1fr 1fr}}
.vcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card);flex-wrap:wrap}
.vcard>div:last-child{margin-left:auto}.vcard .info{min-width:180px}
@media(max-width:1280px){.grid.c2.gc{grid-template-columns:1fr}}
.vcard .ph{width:52px;height:52px;border-radius:12px;overflow:hidden;flex:none;background:var(--line2);display:grid;place-items:center}.vcard .ph img,.vcard .ph svg{width:100%;height:100%;object-fit:cover}
.vcard .info{flex:1;min-width:0}.vcard .info>b{display:block}.vcard .info small{display:block;color:var(--mute);font-size:12.5px}
.vlist{display:grid;gap:10px}
.camera{border:1.5px dashed var(--line);border-radius:14px;padding:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.camera video,.camera img,.camera .ph{width:120px;height:120px;border-radius:12px;object-fit:cover;background:var(--line2)}
.pending-pulse{animation:pp 1.6s infinite}@keyframes pp{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
.bigstatus{border-radius:16px;padding:18px;text-align:center;font-size:20px;font-weight:800}

/* ---------- misc modules ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal .dh{font-size:11.5px;color:var(--mute);text-align:center;font-weight:700;text-transform:uppercase}
.cal .d{min-height:82px;border:1px solid var(--line);border-radius:10px;padding:6px;font-size:12px;background:var(--card);cursor:pointer;display:flex;flex-direction:column;gap:3px;text-align:left}
.cal .d.o{opacity:.45}.cal .d.today{border-color:var(--pri2);box-shadow:inset 0 0 0 1px var(--pri2)}.cal .d b{font-size:12.5px}.cal .d .ev{border-radius:5px;padding:1px 5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--pril);color:var(--pritx);font-weight:600}
.cal .d .ev.req{background:var(--warnbg);color:var(--warn)}
@media(max-width:700px){.cal .d{min-height:54px}.cal .d .ev{font-size:0;height:6px;padding:0}}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}.slot{border:1px solid var(--line);border-radius:8px;padding:6px;text-align:center;font-size:12px;font-weight:700;background:var(--okbg);color:var(--ok)}.slot.busy{background:var(--errbg);color:var(--err)}.slot.closed{background:var(--greybg);color:var(--grey)}
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.fcard{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card);display:flex;flex-direction:column;gap:6px}.fcard h4{font-size:15px}
.notice{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card);display:grid;gap:8px}.notice h4{font-size:16px}.notice .body{color:var(--ink2);white-space:pre-line;font-size:14.5px}
.notice.unread{border-left:4px solid var(--pri2)}
.poll{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card);display:grid;gap:10px}
.opt{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;font-size:14px}.opt .bar{grid-column:1/-1;height:10px;background:var(--line2);border-radius:4px;overflow:hidden}.opt .bar i{display:block;height:100%;background:var(--s1)}
.votebtn{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:var(--card);font-weight:600;width:100%;text-align:left}.votebtn:hover{border-color:var(--pri2)}.votebtn.on{border-color:var(--pri2);background:var(--pril)}
.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix input{width:18px;height:18px}
.lvl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.lvl button{border:1.5px solid var(--line);background:var(--card);border-radius:8px;padding:6px 4px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--mute);line-height:1.2}
.lvl button.on{color:#fff}.lvl button.on.members{background:var(--ok);border-color:var(--ok)}.lvl button.on.committee,.lvl button.on.staff{background:var(--info);border-color:var(--info)}.lvl button.on.owner{background:var(--vio);border-color:var(--vio)}.lvl button.on.admin,.lvl button.on.restricted{background:var(--err);border-color:var(--err)}
:root[data-theme="dark"] .lvl button.on{color:#06120f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lvl button.on{color:#06120f}}
.trow{display:grid;grid-template-columns:minmax(220px,1fr) minmax(420px,1.4fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line2)}.trow:last-child{border:0}.trow b{display:block;font-size:14px}.trow small{color:var(--mute);font-size:12.5px}
@media(max-width:860px){.trow{grid-template-columns:1fr}.lvl{grid-template-columns:repeat(3,1fr)}}
.doc{display:flex;gap:12px;align-items:center}.doc .fi{width:38px;height:46px;border-radius:6px;background:var(--errbg);color:var(--err);display:grid;place-items:center;font-size:10px;font-weight:800;flex:none}
.invoice{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff;color:#1b2523;font-size:13.5px}.invoice h4{font-size:18px}.invoice table{width:100%;border-collapse:collapse;margin:12px 0}.invoice td,.invoice th{padding:6px 8px;border-bottom:1px solid #e3e8e6;text-align:left}.invoice .num{text-align:right}
.invoice .stampbox{display:inline-block;border:2px solid #15803d;color:#15803d;font-weight:800;border-radius:8px;padding:4px 10px;transform:rotate(-6deg)}
.hash{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--mute)}
.diff{font-family:ui-monospace,Consolas,monospace;font-size:12px;display:grid;gap:2px}.diff .b{color:var(--err)}.diff .a{color:var(--ok)}
.kanban{display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}.kcol{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:120px}.kcol h5{margin:0 0 8px;font-size:12.5px;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;cursor:pointer;font-size:13px;display:grid;gap:4px}.kcard:hover{border-color:var(--pri2)}
/* ---------- mobile app shell (phones & installed app) ---------- */
.tabbar{display:none}
@media(max-width:760px){
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:32;background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;border:0;background:none;color:var(--mute);font-size:11px;font-weight:600;text-decoration:none!important;position:relative;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tabbar svg.i{width:23px;height:23px}.tabbar .on{color:var(--pritx);background:var(--pril)}
.tabbar .cnt{position:absolute;top:4px;left:calc(50% + 6px);background:#E11D48;color:#fff;border-radius:99px;font-size:10px;padding:0 5px;line-height:16px;min-width:16px;text-align:center}
.view{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.toasts{bottom:calc(76px + env(safe-area-inset-bottom));left:12px;right:12px;max-width:none}
.top{padding-top:calc(10px + env(safe-area-inset-top));min-height:calc(60px + env(safe-area-inset-top))}
.ttl h1{font-size:17px}.ttl{max-width:none;flex:1}.top .sp{display:none}
.side{padding-top:env(safe-area-inset-top)}
.banner{padding:10px 16px}.banner .row{gap:8px}
dialog{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:20px 20px 0 0}
.mfoot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}.mfoot .btn{flex:1}
.btn{min-height:44px}.btn.s{min-height:38px}.ibtn{width:44px;height:44px}
input,select,textarea{font-size:16px}
.hello{gap:12px}.hello .av.l{width:48px;height:48px;font-size:17px}.hello h2{font-size:19px}.hello .qa{width:100%}.hello .qa .btn{flex:1}
.tabs{margin-left:-16px;margin-right:-16px;padding:0 12px}
.stage svg.iso{min-height:300px}.vizbar .btn{flex:1}
.lbox{padding-bottom:env(safe-area-inset-bottom)}
}
.standalone .sfoot{display:none}
/* mobile view: phone frame shown over the desktop page */
#phoneView{position:fixed;inset:0;z-index:90;background:radial-gradient(900px 600px at 50% 30%,#14b8a633,transparent),#06100ef2;display:flex;flex-direction:column;align-items:center;overflow:auto}
.pvbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;padding:12px 20px;background:#0B1F1D;color:#E6F4F1;border-bottom:1px solid #ffffff14}
.pvbar b{display:flex;align-items:center;gap:8px;font-size:15px}.pvbar select{width:auto;min-height:36px;padding:6px 10px;background:#11302C;color:#fff;border-color:#ffffff24}.pvbar .btn.o{background:transparent;color:#E6F4F1;border-color:#ffffff30}.pvbar .sp{flex:1}
.pvstage{padding:20px 20px 4px;display:flex;justify-content:center}
.pvphone{position:relative;border:12px solid #111;border-radius:46px;background:#000;box-shadow:0 0 0 2px #333,0 30px 80px #000a;overflow:hidden;transform-origin:top center}
.pvphone iframe{display:block;border:0;background:var(--bg)}
.pvnotch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#111;border-radius:0 0 16px 16px;z-index:2;pointer-events:none}
.pvphone.land .pvnotch{display:none}
.pvnote{color:#9FBDB7;font-size:13px;margin:6px 0 20px;text-align:center}
body.phone-open{overflow:hidden}
.embed .pvbtn,.embed #pvMenu{display:none!important}
@media(max-width:760px){.pvbtn{display:none}}
@media print{body *{visibility:hidden}.printable,.printable *{visibility:visible}.printable{position:absolute;left:0;top:0;width:100%}dialog{box-shadow:none}}