/* static/style.css
   Minimal add-ons that DO NOT duplicate base.html inline CSS
   - Keep only components & utilities not styled in base.html
   - Works with single-brand system defined in base.html
*/

/* Inter */
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');*/

/* --- Extra tokens not present in base.html (safe additions) --- */
:root{
  --radius:14px;
  --radius-lg:20px;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semi:600;

  --tr-fast:.12s ease;
  --tr-med:.2s ease;

  /* Optional palette tokens used below (base supplies the rest) */
  --grey-3:#424242;
  --grey-4:#212121;
  --heat-1:#BF360C;
  --heat-2:#FFE082;
  --cool-1:#0D47A1;
  --cool-2:#B2EBF2;
  --eco-1:#81C784;
  --eco-2:#1B5E20;

  /* Consistent red for toasts/badges */
  --danger:#f87171;
}

/* ---- Base resets & ergonomics (non-conflicting) ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.ui{
  font:15px/1.55 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}
a{color:inherit}
a:hover{opacity:.9}

/* Scrollbars (subtle, no clash with base) */
*{scrollbar-width:thin; scrollbar-color:#d1d5db transparent}
*::-webkit-scrollbar{height:8px;width:8px}
*::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}
:root.dark *::-webkit-scrollbar-thumb{background:#2a2a2a}

/* =============================
   Banner
============================= */
.chm-banner{
  margin:12px 16px 0; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-elev);
}
.chm-banner .dot{width:10px;height:10px;border-radius:50%; background:#9ca3af}
.chm-banner.ok .dot{background:var(--eco-2)}
.chm-banner.on .dot{background:var(--brand)}
.chm-banner.off .dot{background:#9ca3af}
.chm-banner.fault .dot{background:var(--danger)}
.muted{color:var(--muted)} .small{font-size:.85rem}

/* =============================
   Header / Filters (no topbar/tab styles)
============================= */
.page-header{
  padding:16px 16px 8px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.page-header.sticky{position:sticky; top:64px; z-index:50;}
.page-header h1{margin:4px 0 12px; font-size:26px; font-weight:var(--fw-semi)}

.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.toolbar.row1{margin-bottom:6px}

.search-wrap{position:relative; min-width:220px; flex:1 1 320px; max-width:560px}
.search-wrap .ico{
  width:18px;height:18px; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  stroke:#9ca3af; stroke-width:2; fill:none; stroke-linecap:round;
}
#roomFilter{
  width:100%; padding:.72rem .9rem .72rem 40px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg-elev); outline:none; font-weight:var(--fw-medium);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--tr-med), box-shadow var(--tr-med);
}
#roomFilter:focus{border-color:#cbd5e1; box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent)}
:root.dark #roomFilter::placeholder{ color:rgba(229,231,235,.55); }

.sr-only{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.hotel-wrap{display:flex; align-items:center; gap:.45rem; padding:.38rem .6rem; border:1px solid var(--line); background:var(--bg-elev); border-radius:12px; box-shadow:var(--shadow-sm)}
.hotel-wrap select{border:none; outline:none; background:transparent; font-weight:var(--fw-medium); color:var(--ink)}

/* Buttons (base defines .icon-btn; we only add .btn helpers) */
.btn{padding:.5rem .8rem; border-radius:12px; border:1px solid var(--line); background:var(--bg-elev); font-weight:var(--fw-medium); box-shadow:var(--shadow-sm); cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--bg-elev)}
.btn.mur{border-color:color-mix(in oklab, var(--eco-2) 35%, transparent); color:var(--eco-2)}
.btn.small{height:30px; padding:.2rem .6rem; font-size:.92rem}

/* Chips – only container & counters; base owns .chip styling */
.chips{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
.chip .count{
  background:#f1f5f9; padding:.12rem .4rem; border-radius:999px; font-size:.78rem; font-weight:var(--fw-medium);
  border:1px solid var(--line);
}
:root.dark .chip .count{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:var(--ink);
}

/* Segmented toggle */
.segmented{display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); background:var(--bg-elev)}
.segmented button{border:none; padding:.38rem .7rem; background:transparent; cursor:pointer; font-weight:500}
.segmented button.on{
  background:color-mix(in oklab, var(--brand) 12%, transparent);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
}

/* =============================
   KPIs
============================= */
.kpis{
  padding:10px 16px 14px;
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.kpi{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:4px;
}
.kpi.clickable{cursor:pointer}
.kpi-num{font-size:22px; font-weight:var(--fw-semi)}
.kpi-label{color:var(--muted); letter-spacing:.1px}
.kpi.warn{border-color: var(--heat-2);}
.kpi.info{
  border-color: color-mix(in oklab, var(--brand) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
              0 0 0 1px color-mix(in oklab, var(--brand) 16%, transparent);
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--brand) 18%, transparent),
              color-mix(in oklab, var(--brand) 7%, transparent));
}
.kpi.danger{border-color:#fecaca}

/* =============================
   Panels
============================= */
.panel{margin:0 16px 12px; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md)}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line)}
.panel-head h3{font-weight:var(--fw-semi); margin:0}
.panel .timeline, .panel .role-list{padding:12px 14px}

/* Role panels */
.role-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; padding:12px 14px}
.role-card{background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); padding:12px}
.role-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.role-title{display:flex; align-items:center; gap:8px; font-weight:600}
.role-title .emoji{filter:saturate(110%)}
.role-metrics{display:flex; gap:12px}
.metric{display:flex; flex-direction:column; align-items:flex-end}
.metric span{font-weight:600; font-size:18px}
.metric label{color:var(--muted); font-size:12px}
.role-list{list-style:none; margin:0; padding:0}
.role-list li{display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line)}
.role-list li:last-child{border-bottom:none}
.dual{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.selectable li input{margin-right:6px}

/* Ops header pills */
.pill-btn{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--bg-elev);
  border-radius:999px; padding:.28rem .6rem; font-size:12px; font-weight:700; cursor:pointer;
}
.pill-btn .count{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; border:1px solid var(--line); font-size:11px;
}
.role-search{display:flex}
.role-search input{
  min-width:240px; max-width:320px; width:100%;
  padding:.45rem .55rem; border-radius:10px; border:1px solid var(--line); background:transparent
}

/* =============================
   Floors & Cards
============================= */
.floors{padding:12px 16px 40px}
.floor-section{margin-top:8px}
.floor-header{display:flex; align-items:center; justify-content:space-between; margin:10px 0 6px}
.floor-left{display:flex; align-items:center; gap:10px}
.floor-pill{
  display:inline-flex; align-items:center; gap:8px; padding:.38rem .6rem;
  border:1px solid color-mix(in oklab, var(--brand) 35%, transparent);
  border-radius:10px;
  background: color-mix(in oklab, var(--brand) 10%, #ffffff 90%);
  color: var(--brand);
  font-weight:var(--fw-medium); box-shadow:var(--shadow-sm)
}
:root.dark .floor-pill{
  background: color-mix(in oklab, var(--brand) 16%, #0b1220 84%);
  color:#e9fffb;
  border-color: color-mix(in oklab, var(--brand) 32%, transparent);
}
.floor-summary{display:flex; gap:6px}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:.28rem .5rem;
  border-radius:999px; border:1px solid var(--line); background:var(--bg-elev);
  font-weight:var(--fw-medium); box-shadow:var(--shadow-sm)
}
.pill.warn{background:#fff7ed; color:var(--heat-1); border-color:var(--heat-2)}
.pill.danger{background:#fff1f2; color:#be123c; border-color:#fecdd3}
.pill.cool{
  background: color-mix(in oklab, var(--brand) 10%, #ffffff 90%);
  color: var(--brand);
  border-color: color-mix(in oklab, var(--brand) 35%, transparent);
}
.pill.eco{ background:#ecfdf5; color:var(--eco-2); border-color:#a7f3d0 }
.progress{width:110px; height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden; border:1px solid #e5e7eb}
.progress > span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,
              color-mix(in oklab, var(--brand) 70%, #0a1e33),
              color-mix(in oklab, var(--brand) 30%, #81C784));
}
:root.dark .progress{background:#1b1b1b; border-color:#1b1b1b}

/* Grid */
.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }

/* Room cards */
.card{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); overflow:hidden; cursor:pointer;
  transition:transform .08s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 24px 60px rgba(0,0,0,.14)}
.room-header{
  position:relative; padding:10px 12px; display:flex; justify-content:space-between; align-items:center
}
.header-red{
  background:linear-gradient(135deg, var(--heat-1), var(--heat-2));
  color:#fff!important;
}
.header-green{
  background:linear-gradient(135deg, var(--brand) 0%, color-mix(in oklab, var(--brand) 75%, #fff 25%) 100%);
  color:#fff!important;
}
.header-eco{
  background:linear-gradient(135deg, var(--eco-2), var(--eco-1));
  color:#fff!important;
}

.temp-pill{
  padding:4px 10px; border-radius:999px; font-weight:var(--fw-medium);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-sm);
  color:#0a1e33;
}
:root.dark .temp-pill{
  background:rgba(0,0,0,.40);
  border:1px solid rgba(255,255,255,.22);
  color:#e6f0ff;
}

/* Status area */
.status-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 16px; padding:12px 14px; background:var(--bg-elev); }
.status-row{ display:flex; justify-content:space-between; align-items:center; }
.status-label{ color:var(--muted); flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.status-green{color:var(--eco-2); font-weight:500}
.status-red{color:var(--heat-1); font-weight:500}

/* Notification dot for room cards */
.notification-dot{
  position:absolute; top:10px; left:10px; width:10px; height:10px; border-radius:50%;
  background:var(--danger); box-shadow:0 0 0 3px rgba(248,113,113,.18);
}

/* =============================
   Timeline & Lists
============================= */
.timeline{list-style:none; margin:0; padding:0}
.timeline li{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px dashed var(--line);
}
.timeline li:last-child{border-bottom:none}
.timeline .badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; padding:.22rem .5rem; border-radius:999px; font-size:.78rem; font-weight:600;
  background:#f3f4f6; color:#334155;
}
:root.dark .timeline .badge{background:#1a1a1a; color:#e5e7eb}

ul.list{list-style:none; margin:0; padding:0}
ul.list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 2px; border-bottom:1px dashed var(--line);
}
ul.list li:last-child{border-bottom:none}

/* =============================
   Modal (no overlap with base)
============================= */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.30); z-index:100}
.modal-content{
  background:var(--bg-elev); border-radius:22px; width:min(820px,94vw);
  border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:18px;
  max-height:92vh; overflow:auto;
  animation:pop .15s ease-out;
}
.modal-close{
  position:sticky; float:right; top:0; margin-left:auto;
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:12px; cursor:pointer;
}
.modal-close::before{content:"×"; font-size:20px; line-height:1; color:var(--ink)}
@keyframes pop{from{transform:translateY(6px) scale(.98); opacity:.0} to{transform:translateY(0) scale(1); opacity:1}}

.modal-head.modern{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px;
}
.modal-head-left{display:flex; align-items:center; gap:10px}
.modal-title{margin:0; font-weight:var(--fw-semi); font-size:22px}
.subtle{color:var(--muted); font-size:.9rem}
.dot.offline,.dot.online{width:10px;height:10px;border-radius:50%}
.dot.offline{background:var(--danger)}
.dot.online{background:var(--eco-2)}

/* Popup filter bar */
.modal-filters{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:8px; margin-bottom:8px; background:var(--bg-elev)
}
.modal-filters .group{display:flex; align-items:center; gap:6px}
.modal-filters .label{font-size:12px; color:var(--muted); font-weight:700}
.modal-filters select, .modal-filters input[type="search"]{
  min-height:32px; padding:.4rem .55rem; border:1px solid var(--line); border-radius:10px; background:transparent
}

.chips-row{display:flex; gap:8px; flex-wrap:wrap}
.chips-row.compact{gap:6px; justify-content:flex-end}
.chips-row.compact .chip{padding:.32rem .55rem; border-radius:999px}
.chips-row.compact .chip.red{background:rgba(248,113,113,.12); color:var(--danger); border-color:transparent}
.chips-row.compact .chip.amber{background:rgba(191,54,12,.12); color:var(--heat-1)}
.chips-row.compact .chip.green{background:rgba(27,94,32,.12); color:var(--eco-2)}

.modal-tabs{display:flex; gap:8px; flex-wrap:wrap}
.modal-tabs .chip{
  cursor:pointer;
  padding:.36rem .66rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg-elev);
  box-shadow:var(--shadow-sm);
}
.modal-tabs .chip:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.modal-tabs .chip:focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 45%, transparent); outline-offset:2px}
.modal-tabs .chip.active{
  color:var(--tab-active-ink);
  background:linear-gradient(135deg,var(--brand), color-mix(in oklab, var(--brand) 75%, #fff 25%));
  border-color:transparent;
}

.modal-section{display:none}
.modal-section.active{display:block}

.tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.tile{
  border:1px solid var(--line); border-radius:16px; background:var(--bg-elev);
  padding:14px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:6px;
}
.tile .k{color:var(--muted); font-size:.9rem}
.tile .v{font-size:1.05rem; font-weight:600}
.tile .sub{color:var(--muted); font-size:.82rem}
.tile.section{
  grid-column:1/-1; background:transparent; border-style:dashed; box-shadow:none;
  padding:6px 4px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem
}

/* Legacy row layout */
.modal-body{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px}
.modal-body .row{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:.55rem .7rem; background:#f8f9fb;
}
:root.dark .modal-body .row{background:#151515}

/* Footer */
.modal-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
}
.last-seen{color:var(--muted); font-size:.9rem}

/* =============================
   Operations page: stacked cards
============================= */
.panel.ops { margin: 0 16px 14px; }
.ops .role-grid{ display:flex; flex-direction:column; gap:12px; padding:12px 0; }
.role-card.stack{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:14px; border-radius:14px; background:var(--bg-elev);
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  transition:transform var(--tr-fast), box-shadow var(--tr-med);
}
.role-card.stack:hover{ box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.role-card .role-main{ flex:1 1 auto; min-width:0; }
.role-card .role-side{
  flex:0 0 160px; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; align-content:flex-start; text-align:right;
}
.role-card .metric{
  display:flex; flex-direction:column; align-items:flex-end; padding:8px;
  border:1px solid var(--line); border-radius:12px; background:var(--bg); box-shadow:var(--shadow-sm);
}
.role-card .metric span{ font-weight:600; font-size:18px; line-height:1; }
.role-card .metric label{ color:var(--muted); font-size:12px; }
@media (max-width:860px){
  .role-card.stack{ flex-direction:column; }
  .role-card .role-side{ width:100%; grid-template-columns:repeat(4,1fr); text-align:center; }
  .role-card .metric{ align-items:center; }
  .dual{ grid-template-columns:1fr; }
}

/* =============================
   Complaints layout
============================= */
.complaints-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:12px}
@media (max-width:900px){ .complaints-grid{grid-template-columns:1fr} }
textarea#compNote{min-height:170px; width:100%}

/* =============================
   Responsive tweaks (no topbar/tab)
============================= */
@media (max-width:980px){
  .brand-sub{ display:none; }
  .primary-tabs{ max-width:unset; margin-left:8px; } /* container exists in base */
  .topbar-right{ gap:8px; }
}
@media (max-width:720px){
  .modal{align-items:flex-end}
  .modal-content{ width:100vw; height:96vh; max-height:96vh; border-radius:16px 16px 0 0; padding:14px; }
  .status-grid{ grid-template-columns: 1fr; }
  .tile-grid{ grid-template-columns: 1fr; }
}

/* =============================
   AI Control Center additions
============================= */

/* Field wrappers */
.field { display: grid; gap: 6px; }
.field .small { font-size: .82rem; color: var(--muted); }

/* Inputs that borrow chip visuals (base owns .chip itself) */
select.chip, input.chip {
  appearance: none;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .50rem .65rem;
  box-shadow: var(--shadow-sm);
  font-weight: var(--fw-medium);
  min-height: 36px;
}
input.chip::placeholder { color: color-mix(in oklab, var(--muted) 65%, transparent); }
:root.dark select.chip, :root.dark input.chip { background: var(--bg-elev); }

/* Checkbox inside chips (feature toggles) */
.chip input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--brand);
  border-radius: 4px;
}

/* Dense cards */
.card.dense { padding: 10px 12px !important; border-radius: 12px; }

/* Toast lines */
.toast, #sp_toast, #hotel_sp_toast, #room_sp_toast {
  min-height: 1.2em;
  color: var(--muted);
}
.toast.ok { color: var(--eco-2); }
.toast.err { color: var(--danger); }

/* Action rows */
.action-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.action-row .chip { min-height: 34px; }

/* Chart containers */
.chart-pair { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:920px){ .chart-pair { grid-template-columns: 1fr; } }

/* KPI band */
.kpi-band { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width:720px){ .kpi-band { grid-template-columns: 1fr; } }

/* AI hero */
.ai-hero {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px; border-radius: var(--radius);
}
.ai-hero .title { margin:0; font-weight: var(--fw-semi); font-size: 22px; }
.ai-hero .sub   { color: var(--muted); }

/* Recommendation tiles */
.sp-card .value { font-size: 28px; font-weight: 800; }
.sp-card .reason { color: var(--muted); font-size: .9rem; }

/* Per-room control */
.room-control { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.room-control select.chip { min-width: 140px; }

/* Inline filters */
.inline-filter { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Subtle hover for controls inside cards */
.card:hover .chip:not(:disabled) { border-color: color-mix(in oklab, var(--brand) 25%, var(--line)); }

/* Canvas sizing in cards */
.card canvas { width: 100% !important; height: auto !important; }

/* Tight grids */
.grid-tight { display:grid; gap:12px; }
.grid-2    { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.grid-3    { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.grid-4    { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
@media (max-width:920px){
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width:600px){
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Divider */
.rule { border: none; border-top: 1px solid var(--line); margin: 12px 0; }

/* Emphasize active model chips */
.chip input[type="checkbox"]:checked + .label,
.chip:has(input[type="checkbox"]:checked) {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 55%, #fff);
}

/* Improve contrast on dark for input-like chips */
:root.dark select.chip, :root.dark input.chip { border-color: rgba(255,255,255,.16); }

/* IG-like card & controls */
.card.ig { border-radius:16px; border:1px solid var(--line); background:var(--bg-elev); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ig-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 8px; position:sticky; top:0; background:linear-gradient(to bottom, color-mix(in oklab, var(--bg) 85%, transparent), var(--bg-elev)); z-index:1; }
.ig-title { font-weight:800; font-size:1.05rem; letter-spacing:.1px; }

.ig-controls { display:flex; gap:8px; align-items:center; }
.ig-search { appearance:none; border:1px solid var(--line); background:var(--bg); padding:.45rem .7rem; border-radius:999px; font-size:.9rem; min-width:220px; outline:none; }
.ig-pill { border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:.4rem .75rem; font-weight:700; font-size:.85rem; cursor:pointer; }
.ig-pill:hover { background:color-mix(in oklab, var(--bg) 70%, var(--accent) 30% / 8%); }

.ig-body { display:flex; flex-direction:column; gap:10px; }
.floor-card { border:1px dashed color-mix(in oklab, var(--line) 80%, transparent); border-radius:14px; padding:10px; background:color-mix(in oklab, var(--bg-elev) 92%, #fff 8%); }
:root.dark .floor-card { background:color-mix(in oklab, var(--bg-elev) 92%, #000 8%); }

.floor-hdr { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.floor-left { display:flex; align-items:center; gap:10px; }
.floor-name { font-weight:800; }
.floor-meta { font-size:.9rem; color:var(--muted); }

.micro-progress { height:8px; width:140px; border-radius:999px; background:rgba(148,163,184,.25); border:1px solid var(--line); overflow:hidden; }
.micro-progress > span { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .35s ease; }

.room-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.room-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:.38rem .65rem; font-size:.9rem; }
.room-chip .dot { width:8px; height:8px; border-radius:999px; background:var(--danger); box-shadow:0 0 0 2px color-mix(in oklab, var(--danger) 25%, transparent); }
.room-chip .sub { color:var(--muted); font-size:.85rem; }

.helper-note { margin-top:6px; font-size:.85rem; color:var(--muted); }