/* ============================================================
   MARLI AND MOE — CARE OPERATING SYSTEM
   app.css — CRM shell (app.html) + participant portal (portal.html)
   Light "office/daylight" theme built on tokens from style.css
   ============================================================ */

body.app-body{
  background:var(--bg); color:var(--text);
  font-size:.95rem;
}
body.app-body::after{ opacity:.04; } /* subtler grain on light theme */
.app-body .cursor-ring{ border-color:rgba(27,26,23,.45); }
.app-body .cursor-ring.is-active{ border-color:var(--accent); }
.app-body .cursor-ring.has-label{ background:var(--accent); border-color:var(--accent); }

/* ---------- App shell ---------- */
.shell{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }

/* rail */
.rail{
  border-right:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; height:100svh;
}
.rail__brand{
  display:flex; align-items:center; gap:.6rem; padding:1.3rem 1.3rem 1.1rem;
  border-bottom:1px solid var(--line); font-weight:600; letter-spacing:-.01em;
}
.rail__brand i{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.rail__brand small{ display:block; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em; color:var(--text-2); text-transform:uppercase; font-weight:400; }
.rail__nav{ padding:1rem .8rem; display:flex; flex-direction:column; gap:.15rem; flex:1; overflow-y:auto; }
.rail__nav button{
  display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  padding:.62rem .8rem; border-radius:10px; color:var(--text-2);
  font-size:.88rem; font-weight:500;
  transition:background-color .18s,color .18s;
}
.rail__nav button svg{ width:16px; height:16px; flex:none; }
.rail__nav button:hover{ background:#f2efe7; color:var(--text); }
.rail__nav button.is-on{ background:var(--accent-soft); color:var(--accent-deep); }
.rail__nav button .count{
  margin-left:auto; font-family:var(--font-mono); font-size:.62rem;
  background:#efece3; border-radius:99px; padding:.1rem .45rem; color:var(--text-2);
}
.rail__nav button.is-on .count{ background:rgba(255,94,43,.18); color:var(--accent-deep); }
.rail__foot{ padding:1rem 1.3rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; color:var(--text-2); text-transform:uppercase; line-height:1.9; }
.rail__foot a{ color:var(--accent-deep); }

/* main column */
.main{ display:flex; flex-direction:column; min-width:0; }

/* topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem 1.6rem; background:rgba(250,249,245,.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar h1{ font-size:1.05rem; font-weight:600; letter-spacing:-.015em; }
.topbar .live-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ok); border:1px solid rgba(47,158,110,.35); border-radius:99px; padding:.3rem .7rem;
}
.topbar .live-badge i{ width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 1.6s ease-in-out infinite; }
.topbar__spacer{ flex:1; }
.topbar .btn{ border-color:var(--line); color:var(--text); background:var(--surface); }
.topbar .btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.topbar .btn--primary:hover{ background:var(--accent-deep); }
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  transition:border-color .2s;
}
.icon-btn:hover{ border-color:var(--text-2); }
.icon-btn svg{ width:16px; height:16px; }
.icon-btn .badge{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; border-radius:99px;
  background:var(--crit); color:#fff; font-family:var(--font-mono); font-size:.58rem;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* views */
.view{ display:none; padding:1.6rem; animation:viewIn .45s var(--ease-out); }
.view.is-on{ display:block; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* ---------- Overview ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.4rem; }
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.kpi:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -18px rgba(27,26,23,.25); border-color:#d8d4c8; }
.kpi b{ font-size:2rem; font-weight:600; letter-spacing:-.035em; line-height:1; font-feature-settings:"tnum"; }
.kpi b small{ font-size:.45em; color:var(--text-2); font-weight:500; letter-spacing:0; }
.kpi span{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); }
.kpi .delta{ font-family:var(--font-mono); font-size:.62rem; }
.kpi .delta.up{ color:var(--ok); } .kpi .delta.down{ color:var(--crit); }

.ov-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:1rem; align-items:start; }
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.3rem; border-bottom:1px solid var(--line);
}
.panel__head h3{ font-size:.95rem; font-weight:600; letter-spacing:-.01em; }
.panel__head .hint{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); }
.panel__body{ padding:1.1rem 1.3rem; }

/* utilisation bars */
.util-row{ display:grid; grid-template-columns:150px 1fr 92px; gap:1rem; align-items:center; padding:.55rem 0; }
.util-row + .util-row{ border-top:1px dashed var(--line); }
.util-row .who{ font-size:.85rem; font-weight:550; }
.util-row .who small{ display:block; font-family:var(--font-mono); font-size:.58rem; color:var(--text-2); letter-spacing:.06em; }
.bar{ height:8px; border-radius:99px; background:#efece3; overflow:hidden; }
.bar i{ display:block; height:100%; width:0%; border-radius:99px; background:var(--ok); transition:width 1.1s var(--ease-out); }
.bar i.warn{ background:var(--warn); } .bar i.crit{ background:var(--crit); }
.util-row .pct{ font-family:var(--font-mono); font-size:.72rem; text-align:right; font-feature-settings:"tnum"; }

/* alerts feed */
.alert{
  display:flex; gap:.8rem; padding:.85rem 1.3rem; border-left:3px solid var(--warn);
  border-bottom:1px solid var(--line); background:var(--surface);
}
.alert:last-child{ border-bottom:0; }
.alert--crit{ border-left-color:var(--crit); }
.alert--ok{ border-left-color:var(--ok); }
.alert--info{ border-left-color:var(--info); }
.alert i{ width:8px; height:8px; border-radius:50%; margin-top:.4rem; flex:none; background:var(--warn); }
.alert--crit i{ background:var(--crit); animation:pulse 1.4s ease-in-out infinite; }
.alert--ok i{ background:var(--ok); } .alert--info i{ background:var(--info); }
.alert__txt{ flex:1; font-size:.84rem; }
.alert__txt b{ font-weight:600; }
.alert__txt time{ display:block; font-family:var(--font-mono); font-size:.58rem; color:var(--text-2); letter-spacing:.08em; margin-top:.25rem; text-transform:uppercase; }
.alert button{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); align-self:center; padding:.35rem .6rem; border:1px solid var(--line); border-radius:8px; white-space:nowrap; }
.alert button:hover{ border-color:var(--text-2); color:var(--text); }

/* ticker */
.ticker{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  overflow:hidden; margin-bottom:1.4rem;
}
.ticker__track{ display:flex; gap:3rem; width:max-content; padding:.7rem 0; animation:marq 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__track span{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; color:var(--text-2); white-space:nowrap; display:flex; align-items:center; gap:3rem; }
.ticker__track span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.ticker__track b{ color:var(--text); font-weight:500; }

/* ---------- Intake kanban ---------- */
.kanban{ display:grid; grid-template-columns:repeat(5,minmax(240px,1fr)); gap:.9rem; overflow-x:auto; padding-bottom:.6rem; }
.kcol{ background:#f3f0e9; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:420px; }
.kcol__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2);
}
.kcol__head b{ color:var(--text); font-weight:600; }
.kcol__head .n{ background:#e7e3d8; border-radius:99px; padding:.08rem .5rem; font-size:.6rem; }
.kcol__body{ padding:.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.kcol.is-over{ outline:2px dashed var(--accent); outline-offset:-4px; }
.kcard{
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:.8rem .9rem;
  cursor:grab; transition:transform .16s,box-shadow .16s,border-color .16s;
}
.kcard:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -16px rgba(27,26,23,.3); border-color:#d8d4c8; }
.kcard.is-drag{ opacity:.45; cursor:grabbing; }
.kcard b{ font-size:.88rem; font-weight:600; display:block; letter-spacing:-.01em; }
.kcard .svc{ display:inline-block; margin:.35rem 0 .45rem; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; padding:.22rem .55rem; border-radius:99px; background:var(--accent-soft); color:var(--accent-deep); }
.kcard .svc.psych{ background:rgba(62,124,177,.12); color:var(--info); }
.kcard .svc.spec{ background:rgba(217,138,31,.14); color:var(--warn); }
.kcard__meta{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.58rem; color:var(--text-2); letter-spacing:.05em; }
.kcard__src{ margin-top:.45rem; padding-top:.45rem; border-top:1px dashed var(--line); font-family:var(--font-mono); font-size:.56rem; color:var(--text-2); letter-spacing:.06em; text-transform:uppercase; }
.kempty{ border:1.5px dashed var(--line); border-radius:11px; padding:1.2rem; text-align:center; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; color:var(--text-2); text-transform:uppercase; }

/* ---------- Participants table ---------- */
.tbl-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:.87rem; }
.tbl th{
  text-align:left; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); font-weight:500; padding:.8rem 1.3rem; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{ padding:.9rem 1.3rem; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
.tbl tbody tr{ cursor:pointer; transition:background-color .15s; }
.tbl tbody tr:hover{ background:#f6f3ec; }
.tbl .p-name{ font-weight:600; }
.tbl .p-name small{ display:block; font-family:var(--font-mono); font-size:.58rem; color:var(--text-2); letter-spacing:.06em; font-weight:400; }
.tbl .mono{ font-family:var(--font-mono); font-size:.74rem; font-feature-settings:"tnum"; }
.tag{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .65rem; border-radius:99px; border:1px solid var(--line); color:var(--text-2); }
.tag i{ width:6px; height:6px; border-radius:50%; background:var(--ok); }
.tag.warn{ color:var(--warn); border-color:rgba(217,138,31,.4); } .tag.warn i{ background:var(--warn); }
.tag.crit{ color:var(--crit); border-color:rgba(214,69,61,.4); } .tag.crit i{ background:var(--crit); }
.tag.ok{ color:var(--ok); border-color:rgba(47,158,110,.4); }
.mini-bar{ width:110px; height:6px; border-radius:99px; background:#efece3; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:.6rem; }
.mini-bar i{ display:block; height:100%; background:var(--ok); border-radius:99px; }
.mini-bar i.warn{ background:var(--warn); } .mini-bar i.crit{ background:var(--crit); }

/* ---------- Participant 360 ---------- */
.p360{ display:grid; grid-template-columns:1.7fr 1fr; gap:1rem; align-items:start; }
.p360__head{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.5rem; margin-bottom:1rem;
}
.avatar{
  width:54px; height:54px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:1.05rem; color:#fff; background:var(--info);
}
.p360__head h2{ font-size:1.4rem; letter-spacing:-.025em; font-weight:600; }
.p360__head .sub{ font-family:var(--font-mono); font-size:.62rem; color:var(--text-2); letter-spacing:.08em; text-transform:uppercase; margin-top:.25rem; }
.p360__head .actions{ margin-left:auto; display:flex; gap:.6rem; }
.budget-row{ padding:1rem 0; }
.budget-row + .budget-row{ border-top:1px solid var(--line); }
.budget-row .lbl{ display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.55rem; }
.budget-row .lbl b{ font-weight:600; }
.budget-row .lbl .mono{ font-family:var(--font-mono); font-size:.7rem; color:var(--text-2); font-feature-settings:"tnum"; }
.budget-row .bar{ height:10px; }
.budget-row .sub{ font-family:var(--font-mono); font-size:.58rem; color:var(--text-2); letter-spacing:.06em; margin-top:.45rem; display:flex; justify-content:space-between; }
.budget-row .sub .alert-txt{ color:var(--warn); } .budget-row .sub .alert-txt.crit{ color:var(--crit); }

/* notes timeline */
.note{ display:flex; gap:1rem; padding:1rem 0; }
.note + .note{ border-top:1px dashed var(--line); }
.note__rail{ display:flex; flex-direction:column; align-items:center; flex:none; }
.note__rail i{ width:9px; height:9px; border-radius:50%; background:var(--info); margin-top:.3rem; }
.note__rail::after{ content:""; flex:1; width:1px; background:var(--line); margin-top:.4rem; }
.note:last-child .note__rail::after{ display:none; }
.note__body{ flex:1; }
.note__body .n-head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.3rem; }
.note__body .n-head b{ font-size:.86rem; font-weight:600; }
.note__body .n-head time{ font-family:var(--font-mono); font-size:.58rem; color:var(--text-2); letter-spacing:.08em; text-transform:uppercase; }
.note__body p{ font-size:.86rem; color:var(--text-2); line-height:1.65; }
.note__type{ font-family:var(--font-mono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; padding:.2rem .5rem; border-radius:99px; background:rgba(62,124,177,.12); color:var(--info); }
.note__type.progress{ background:rgba(47,158,110,.12); color:var(--ok); }
.note__type.incident{ background:rgba(214,69,61,.1); color:var(--crit); }

/* composer */
.composer{ display:flex; flex-direction:column; gap:.7rem; }
.composer textarea{
  width:100%; min-height:110px; resize:vertical; border:1px solid var(--line); border-radius:12px;
  padding:.9rem 1rem; font:inherit; font-size:.88rem; background:var(--surface); color:var(--text);
}
.composer textarea:focus{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); border-color:var(--accent); }
.composer__row{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
.composer select,.composer input{
  font:inherit; font-size:.84rem; padding:.55rem .8rem; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); color:var(--text);
}
.chip-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.chip{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.42rem .85rem; border-radius:99px; border:1px solid var(--line); color:var(--text-2);
  transition:all .18s;
}
.chip:hover{ border-color:var(--text-2); color:var(--text); }
.chip.is-on{ background:var(--text); color:var(--bg); border-color:var(--text); }

/* ---------- Coordinators ---------- */
.coord-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.coord{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem;
  display:flex; flex-direction:column; gap:1rem; transition:transform .16s,box-shadow .16s,border-color .16s;
}
.coord:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -18px rgba(27,26,23,.25); border-color:#d8d4c8; }
.coord__top{ display:flex; gap:1rem; align-items:center; }
.coord__top b{ font-size:1rem; font-weight:600; display:block; }
.coord__top small{ font-family:var(--font-mono); font-size:.58rem; color:var(--text-2); letter-spacing:.08em; text-transform:uppercase; }
.coord .cap-lbl{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.6rem; color:var(--text-2); letter-spacing:.08em; margin-bottom:.4rem; text-transform:uppercase; }
.coord__locs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.coord__locs span{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.08em; padding:.25rem .55rem; border-radius:99px; background:#f3f0e9; color:var(--text-2); text-transform:uppercase; }

/* ---------- Drawer & modal ---------- */
.overlay{
  position:fixed; inset:0; z-index:200; background:rgba(20,20,18,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.overlay.is-on{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:210; width:min(480px,94vw);
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(102%); transition:transform .5s var(--ease-io);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.is-on{ transform:none; }
.drawer__head{ padding:1.3rem 1.5rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:1rem; }
.drawer__head h3{ font-size:1.1rem; font-weight:600; letter-spacing:-.015em; flex:1; }
.drawer__body{ padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:1.1rem; }
.field label{ display:block; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); margin-bottom:.45rem; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.88rem; padding:.65rem .85rem;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); border-color:var(--accent); }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }

.modal{
  position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:1.2rem;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal.is-on{ opacity:1; pointer-events:auto; }
.modal__card{
  width:min(560px,100%); max-height:88vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.6rem;
  transform:translateY(18px) scale(.98); transition:transform .4s var(--ease-out);
}
.modal.is-on .modal__card{ transform:none; }
.modal__card h3{ font-size:1.25rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.3rem; }
.modal__card .sub{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); margin-bottom:1.3rem; }

/* ---------- Toasts ---------- */
.toasts{ position:fixed; bottom:1.2rem; right:1.2rem; z-index:300; display:flex; flex-direction:column; gap:.6rem; }
.toast{
  display:flex; gap:.7rem; align-items:flex-start; width:min(360px,92vw);
  background:var(--ink); color:var(--paper); border-radius:12px; padding:.9rem 1.1rem;
  box-shadow:0 20px 50px -20px rgba(20,20,18,.5);
  animation:toastIn .45s var(--ease-out);
}
.toast.out{ animation:toastOut .4s var(--ease-io) forwards; }
.toast i{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:.4rem; flex:none; }
.toast.warn i{ background:var(--warn);} .toast.crit i{ background:var(--crit);} .toast.ok i{ background:var(--ok);}
.toast b{ font-size:.84rem; font-weight:600; display:block; }
.toast span{ font-size:.76rem; color:var(--paper-dim); }
@keyframes toastIn{ from{ opacity:0; transform:translateX(30px);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateX(30px);} }

/* ---------- Portal ---------- */
.portal-wrap{ max-width:920px; margin:0 auto; padding:1.6rem clamp(1rem,4vw,2rem) 4rem; }
.portal-hero{
  background:var(--ink); color:var(--paper); border-radius:22px; padding:clamp(1.6rem,4vw,3rem);
  margin-bottom:1.2rem; position:relative; overflow:hidden;
}
.portal-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 90% at 85% 10%, rgba(255,94,43,.25), transparent 60%);
}
.portal-hero__in{ position:relative; }
.portal-hero h1{ font-size:clamp(1.7rem,4vw,2.6rem); letter-spacing:-.03em; font-weight:600; margin-bottom:.4rem; }
.portal-hero p{ color:var(--paper-dim); font-size:.95rem; max-width:52ch; }
.portal-hero .plan-dates{ margin-top:1.4rem; display:inline-flex; gap:1.6rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); flex-wrap:wrap; }
.portal-hero .plan-dates b{ color:var(--paper); font-weight:500; }
.portal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.portal-grid .panel--full{ grid-column:1/-1; }
.ring-wrap{ display:flex; align-items:center; gap:1.6rem; padding:1.4rem 1.3rem; flex-wrap:wrap; }
.ring{ position:relative; width:150px; height:150px; flex:none; }
.ring svg{ transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:11; }
.ring .track{ stroke:#efece3; }
.ring .val{ stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1.4s var(--ease-out); }
.ring__label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring__label b{ font-size:1.5rem; letter-spacing:-.03em; font-feature-settings:"tnum"; }
.ring__label span{ font-family:var(--font-mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); }
.coord-card{ display:flex; gap:1.1rem; align-items:center; padding:1.4rem 1.3rem; }
.coord-card .det b{ font-size:1.05rem; font-weight:600; display:block; }
.coord-card .det span{ font-size:.82rem; color:var(--text-2); display:block; margin-top:.15rem; }
.coord-card .contact{ margin-left:auto; display:flex; gap:.5rem; }
.portal-note{ padding:1rem 1.3rem; border-bottom:1px solid var(--line); }
.portal-note:last-child{ border-bottom:0; }
.portal-note .n-head{ display:flex; justify-content:space-between; gap:1rem; margin-bottom:.3rem; }
.portal-note b{ font-size:.9rem; font-weight:600; }
.portal-note time{ font-family:var(--font-mono); font-size:.58rem; color:var(--text-2); letter-spacing:.08em; text-transform:uppercase; }
.portal-note p{ font-size:.86rem; color:var(--text-2); line-height:1.65; }
.portal-switcher{ display:flex; gap:.5rem; align-items:center; }
.portal-switcher select{ font:inherit; font-size:.84rem; padding:.55rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); }

/* portal header */
.portal-head{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1rem;
  padding:.9rem clamp(1rem,4vw,2rem); background:rgba(250,249,245,.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.portal-head .brand{ color:var(--text); }
.portal-head .brand small{ color:var(--text-2); }
.portal-head__right{ margin-left:auto; display:flex; gap:.6rem; align-items:center; }

/* ---------- Responsive app ---------- */
@media (max-width:1200px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } .ov-grid,.p360{ grid-template-columns:1fr; } }
@media (max-width:900px){
  .shell{ grid-template-columns:1fr; }
  .rail{ position:fixed; z-index:150; left:0; top:0; bottom:0; width:260px; transform:translateX(-102%); transition:transform .45s var(--ease-io); }
  .rail.is-open{ transform:none; box-shadow:30px 0 80px -30px rgba(20,20,18,.4); }
  .portal-grid{ grid-template-columns:1fr; }
}
.menu-btn{ display:none; }
@media (max-width:900px){ .menu-btn{ display:inline-flex; } }
@media (max-width:640px){
  #portal-link{ display:none; }
  .topbar{ padding:.7rem .9rem; gap:.6rem; }
  .topbar h1{ font-size:.95rem; }
  .topbar .live-badge{ display:none; }
  .view{ padding:1rem .9rem; }
}