/* ============================================================
   CoreRoom — application UI (first pass)
   Clean white · glassmorphism · topo motif · pitch-deck system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #EEEBE4;
  --surface: #FFFFFF;
  --surface-warm: #FBFAF8;
  --ink: #18160F;
  --muted: #6E675C;
  --faint: #A39B8D;
  --hairline: #E7E2D8;
  --hairline-soft: #F0ECE3;
  --accent: #B45309;
  --accent-soft: #F6E8DA;
  --accent-ink: #8A3F07;
  --ok: #3F6212;

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-brd: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 10px 34px rgba(24, 22, 15, 0.13);
  --glass-blur: blur(18px) saturate(130%);

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 14px;
  --r-sm: 9px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- app shell ---------- */
.app {
  display: grid;
  --nav-w: 72px;
  --agent-w: 392px;
  grid-template-columns: var(--nav-w) 1fr var(--agent-w);
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.1, 1);
}
.app.nav-pinned { --nav-w: 248px; }
.app.agent-min { --agent-w: 0px !important; } /* beat the inline --agent-w the drag-resize sets on .app */
.main { grid-column: 2; }
.agent { grid-column: 3; }

/* ================= SIDEBAR (rail by default, hover-expand pushes layout) ================= */
.sidebar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  z-index: 1200;
  overflow: hidden;
  transition: width 0.26s cubic-bezier(0.4, 0, 0.1, 1), box-shadow 0.26s;
}
/* hover grows the grid column itself, so the map + panels slide over instead of being overlapped */
.app:not(.nav-pinned):has(.sidebar:hover) { --nav-w: 252px; }
.app:not(.nav-pinned) .sidebar:hover {
  box-shadow: 10px 0 34px rgba(24, 22, 15, 0.16);
}
.sidebar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 60%;
  background: url('assets/topo-light.svg') center bottom / cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
}
.sidebar > * { position: relative; z-index: 1; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 19px 16px 17px 22px;
  border-bottom: 1px solid var(--hairline-soft);
  white-space: nowrap;
}
.brand-l { display: flex; align-items: center; gap: 12px; }
.brand img { height: 30px; width: auto; flex: none; }
.brand .wm {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--ink);
}
.np-btn {
  margin-left: auto; width: 28px; height: 28px; flex: none;
  border-radius: 7px; border: 1px solid var(--hairline); background: #fff;
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.np-btn svg { width: 15px; height: 15px; }
.np-btn:hover { border-color: var(--accent); color: var(--accent-ink); }

.nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.nav-scroll::-webkit-scrollbar { width: 0; }

/* collapsible text — hidden in rail, shown when pinned or hovered */
.brand .wm, .nav-label, .proj-item .txt, .sidebar-foot .who, .np-btn {
  opacity: 0; transition: opacity 0.16s; white-space: nowrap;
}
.app.nav-pinned .brand .wm, .app.nav-pinned .nav-label, .app.nav-pinned .proj-item .txt,
.app.nav-pinned .sidebar-foot .who, .app.nav-pinned .np-btn,
.sidebar:hover .brand .wm, .sidebar:hover .nav-label, .sidebar:hover .proj-item .txt,
.sidebar:hover .sidebar-foot .who, .sidebar:hover .np-btn {
  opacity: 1;
}

.nav-label { padding: 16px 22px 8px; }

.proj-list { display: flex; flex-direction: column; padding: 8px 10px; gap: 2px; }
.proj-item {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 11px; border-radius: var(--r-sm);
  border: none; background: transparent; cursor: pointer; width: 100%; text-align: left;
  font-family: var(--sans); color: var(--muted);
}
.proj-item:hover { background: var(--surface-warm); }
.proj-item.live { background: var(--accent-soft); }
.proj-item .txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.proj-item .pn { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-item .ps { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-item.live .pn { color: var(--accent-ink); }

.sidebar-foot {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--hairline-soft);
  display: flex; align-items: center; gap: 11px;
  white-space: nowrap;
  width: 100%; background: transparent; border-left: none; border-right: none; border-bottom: none;
  font-family: var(--sans); text-align: left; cursor: pointer; transition: background 0.14s;
}
.sidebar-foot:hover { background: rgba(120,110,95,0.06); }
.sidebar-foot .who { flex: 1; min-width: 0; }
.sf-cog { width: 17px; height: 17px; color: var(--faint); flex: none; opacity: 0; transition: opacity 0.16s; }
.app.nav-pinned .sf-cog, .sidebar:hover .sf-cog { opacity: 1; }
.sidebar-foot:hover .sf-cog { color: var(--accent); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
}
.sidebar-foot .who { font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.sidebar-foot .who span { display: block; font-size: 11.5px; color: var(--faint); font-weight: 400; }

/* ================= MAIN / MAP ================= */
.main { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

.topbar {
  height: 60px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  z-index: 3;
}
.tabs { display: flex; gap: 4px; }
.tab {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--muted);
  cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
}
.tab svg { width: 16px; height: 16px; }
.tab:hover { background: var(--surface-warm); color: var(--ink); }
.tab.active { background: var(--accent-soft); color: var(--accent-ink); border-color: rgba(180, 83, 9, 0.18); }

.sync { display: flex; align-items: center; gap: 9px; }
.sync .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.sync .txt { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }

.view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* hidden by default — the tab logic reveals it only on the Map tab, so a project switch/reload never
   flashes the map before routing to Overview */
#map { position: absolute; inset: 0; background: #DCE6EA; visibility: hidden; }

/* floating glass cards */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r);
}
body.no-frost .glass,
body.no-frost .leaflet-popup-content-wrapper {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.float { position: absolute; z-index: 600; }
.f-search { top: 18px; left: 18px; width: 340px; transition: width 0.3s cubic-bezier(0.4, 0, 0.1, 1); }
.f-search.min { width: 52px; }
.f-search.min input, .f-search.min kbd { display: none; }
.search-ico { border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; color: var(--muted); display: flex; flex: none; }
.search-ico:hover { color: var(--accent-ink); }
.search-ico svg { width: 17px; height: 17px; }
.search-row { display: flex; align-items: center; gap: 11px; padding: 13px 16px; }
.search-row svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.search-row input {
  border: none; background: transparent; outline: none;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink); width: 100%;
}
.search-row input::placeholder { color: var(--faint); }
.search-row kbd {
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  border: 1px solid var(--hairline); border-radius: 5px; padding: 2px 6px; flex: none;
}

.f-layers { top: 0; right: 0; bottom: 0; width: 372px; padding: 0; border-radius: 0; border: none; border-left: 1px solid var(--hairline);
  background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: column;
  box-shadow: -14px 0 44px rgba(24,22,15,0.16);
  transform: translateX(100%); opacity: 1; pointer-events: none;
  transition: transform 0.36s cubic-bezier(0.4,0,0.1,1); }
.f-layers.open { transform: none; pointer-events: auto; }
.f-layers .label { margin-bottom: 0; }

/* layers slide-out toggle button */
.f-layers-btn { top: 18px; right: 18px; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid var(--hairline); cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); transition: opacity 0.2s, transform 0.2s; }
.f-layers-btn svg { width: 17px; height: 17px; color: var(--accent); }
.f-layers-btn:hover { color: var(--accent-ink); }
.f-layers-btn.hide { opacity: 0; transform: scale(0.9); pointer-events: none; }
.seg { display: flex; gap: 4px; background: rgba(120,110,95,0.1); border-radius: 8px; padding: 3px; margin-bottom: 15px; }
.seg button {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 7px 4px; border-radius: 6px;
}
.seg button.on { background: #fff; color: var(--accent-ink); box-shadow: 0 1px 4px rgba(24,22,15,0.1); }
.lyr { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.lyr + .lyr { border-top: 1px solid var(--hairline-soft); }
.lyr .box {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--faint);
  flex: none; display: flex; align-items: center; justify-content: center;
}
.lyr.on .box { background: var(--accent); border-color: var(--accent); }
.lyr .box svg { display: none; width: 11px; height: 11px; color: #fff; }
.lyr.on .box svg { display: block; }
.lyr .nm { font-size: 13.5px; color: var(--ink); }
.lyr .ct { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* Agent pins section in the map Layers panel — each agent-placed pin with Save / Delete / Hide */
.sub-label-row { display: flex; align-items: center; gap: 8px; }
.ap-count { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.ap-eye { margin-left: auto; width: 26px; height: 26px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.ap-eye svg { width: 15px; height: 15px; }
.ap-eye:hover { background: rgba(120,110,95,0.1); color: var(--ink); }
.ap-eye.off { color: var(--faint); }
.ap-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.ap-row + .ap-row { border-top: 1px solid var(--hairline-soft); }
.ap-sw { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--hairline); flex: none; }
.ap-sw.ap-sw-area { border-radius: 2px; border: 1.6px solid; box-shadow: none; }
.ap-sw.ap-sw-line { height: 4px; border-radius: 1px; border: none; box-shadow: none; }
.ap-nm { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; cursor: pointer; user-select: none; }
.ap-row:hover .ap-nm { color: var(--accent); }
.ap-nm.off { color: var(--faint); text-decoration: line-through; }
.ap-act { width: 26px; height: 26px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex: none; transition: background .12s, color .12s; }
.ap-act svg { width: 14px; height: 14px; }
.ap-act:hover { background: rgba(120,110,95,0.12); color: var(--ink); }
.ap-act.ap-del:hover { background: rgba(192,57,43,0.12); color: #c0392b; }
.ap-act.ok { color: #3F8F4F; }
.ap-act.err { color: #c0392b; }
.ap-act.ap-save.saved, .ap-act.ap-save.saved:hover { color: #3F8F4F; }
.ap-act:disabled { opacity: 0.5; cursor: default; }

/* Agent-pins rows in the Data Room — whole row (and name) navigate to the pin on the map */
.dr-pinrow { cursor: pointer; }
.dr-pinrow .fn { cursor: pointer; }
.dr-pinrow:hover { background: rgba(120,110,95,0.05); }
.dr-pinrow:hover .fn { color: var(--accent); }

/* lightweight confirm dialog (map reload warning, etc.) */
.cr-confirm-ov { position: fixed; inset: 0; z-index: 4000; background: rgba(24,22,15,0.32); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cr-confirm { width: 380px; max-width: 100%; background: var(--surface, #fff); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 18px 50px rgba(24,22,15,0.25); padding: 18px 20px 16px; }
.cr-confirm .cc-title { font-family: var(--sans); font-size: 15px; font-weight: 650; color: var(--ink); margin-bottom: 8px; }
.cr-confirm .cc-body { font-size: 13px; line-height: 1.55; color: var(--muted); }
.cr-confirm .cc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cr-confirm .cc-actions button { font-family: var(--sans); font-size: 13px; font-weight: 550; padding: 8px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--hairline); background: transparent; color: var(--ink); }
.cr-confirm .cc-cancel:hover { background: rgba(120,110,95,0.08); }
.cr-confirm .cc-ok { background: var(--accent); border-color: var(--accent); color: #fff; }
.cr-confirm .cc-ok.danger { background: #c0392b; border-color: #c0392b; }
.cr-confirm .cc-ok:hover { filter: brightness(1.05); }

.f-detail { left: 18px; bottom: 18px; width: 286px; padding: 0; overflow: hidden; }
.detail-top { padding: 17px 19px 15px; border-bottom: 1px solid var(--hairline-soft); }
.detail-top .dt-tag { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.detail-top .dt-tag .pin-mini { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); }
.detail-top h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.detail-top .sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.detail-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.dstat { padding: 14px 19px; border-right: 1px solid var(--hairline-soft); }
.dstat:last-child { border-right: none; }
.dstat .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.dstat .v { font-size: 17px; font-weight: 500; margin-top: 4px; }
.dstat .v.accent { color: var(--accent); }
.detail-foot { display: flex; padding: 12px 19px; gap: 10px; background: var(--surface-warm); }
.detail-foot button {
  flex: 1; border: 1px solid var(--hairline); background: #fff; cursor: pointer;
  border-radius: var(--r-sm); padding: 9px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink);
}
.detail-foot button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

.f-coords { right: 18px; bottom: 18px; padding: 9px 14px; }
.f-coords .label { font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }

/* leaflet overrides */
.leaflet-control-zoom { top: 78px; left: 18px; border: none !important; }
.leaflet-bar { box-shadow: var(--glass-shadow) !important; border-radius: var(--r) !important; overflow: hidden; }
.leaflet-bar a {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ink) !important; border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.5) !important;
  width: 40px !important; height: 40px !important; line-height: 40px !important;
  font-size: 19px !important;
}
.leaflet-bar a:hover { background: var(--glass-bg-strong) !important; color: var(--accent-ink) !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,0.7) !important;
  font-family: var(--mono); font-size: 9.5px !important; color: var(--faint) !important;
  padding: 2px 7px !important; border-radius: 6px 0 0 0;
}
.leaflet-control-attribution a { color: var(--muted) !important; }

/* map toolbar — frosted glass (matches zoom bar), centered under it, collapsible */
.f-tools { left: 28px; top: 196px; padding: 3px; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: var(--r);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow); }
.mtools-body { display: flex; flex-direction: column; align-items: center; gap: 3px; max-height: 460px; overflow: hidden; transition: max-height 0.32s cubic-bezier(0.4,0,0.1,1), opacity 0.22s, margin 0.32s; }
.f-tools.collapsed .mtools-body { max-height: 0; opacity: 0; margin-top: -3px; }
.mtool { width: 32px; height: 32px; border: none; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.13s, color 0.13s; }
.mtool svg { width: 16px; height: 16px; }
.mtool:hover { background: rgba(255,255,255,0.7); color: var(--accent-ink); }
.mtool.on { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(180,83,9,0.32); }
.mtool-toggle { color: var(--muted); }
.mtool-toggle:hover { background: rgba(255,255,255,0.7); }
.mtool-sep { width: 20px; height: 1px; background: rgba(24,22,15,0.1); margin: 1px 0; }

/* ask bubble */
.ask-bubble { position: absolute; z-index: 500; width: 264px; padding: 13px; border-radius: 14px; }
.ab-ctx { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.04em; margin-bottom: 9px; }
.ab-row { display: flex; gap: 7px; }
.ab-input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 13px; border: 1px solid var(--hairline); border-radius: 9px; padding: 8px 11px; background: #fff; outline: none; }
.ab-input:focus { border-color: var(--accent); }
.ab-send { width: 34px; flex: none; border: none; border-radius: 9px; background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ab-send svg { width: 16px; height: 16px; }
.ab-send:hover { background: var(--accent-ink); }
.ab-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ab-quick button { font-family: var(--sans); font-size: 11px; color: var(--muted); border: 1px solid var(--hairline); background: rgba(255,255,255,0.6); border-radius: 100px; padding: 4px 10px; cursor: pointer; }
.ab-quick button:hover { border-color: var(--accent); color: var(--accent-ink); }
.pin-form { display: flex; flex-direction: column; gap: 8px; }
.pin-dotmini { display: inline-block; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); margin-right: 5px; vertical-align: middle; }
.pf-note { resize: vertical; line-height: 1.4; font-family: var(--sans); }
.pf-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.pf-cancel, .pf-save { font-family: var(--sans); font-size: 12.5px; font-weight: 500; border-radius: 8px; padding: 7px 13px; cursor: pointer; border: 1px solid var(--hairline); }
.pf-cancel { background: rgba(255,255,255,0.6); color: var(--muted); }
.pf-cancel:hover { color: var(--ink); }
.pf-save { background: var(--accent); color: #fff; border-color: var(--accent); }
.pf-save:hover { background: var(--accent-ink); }
.pop-note { font-size: 12px; color: var(--ink); margin: 6px 0 0; line-height: 1.45; max-width: 200px; }
.pf-icons { display: flex; flex-wrap: wrap; gap: 5px; }
.pf-ico { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 11px; color: var(--muted); border: 1px solid var(--hairline); background: rgba(255,255,255,0.6); border-radius: 100px; padding: 4px 9px; cursor: pointer; }
.pf-ico-dot { width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ic); }
.pf-ico:hover { border-color: var(--ic); }
.pf-ico.on { border-color: var(--ic); background: color-mix(in oklab, var(--ic) 14%, white); color: var(--ink); font-weight: 500; }

/* measure tooltip */
.measure-tip { background: var(--accent) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 8px rgba(24,22,15,0.3) !important; font-family: var(--mono); font-size: 11px !important; font-weight: 600; padding: 3px 8px !important; border-radius: 6px !important; }
.measure-tip::before { border-top-color: var(--accent) !important; }
.mtool-tip { position: fixed; z-index: 7000; display: none; max-width: 230px; padding: 8px 11px; border-radius: 9px; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 11.5px; line-height: 1.4; box-shadow: 0 6px 20px rgba(24,22,15,0.3); pointer-events: none; }
.drop-pin { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(24,22,15,0.4); }
.laser-dot { position: absolute; left: 0; top: 0; z-index: 482; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #ff2d2d 0%, #ff2d2d 28%, rgba(255,45,45,0.35) 55%, transparent 72%); box-shadow: 0 0 14px 5px rgba(255,45,45,0.55); transition: opacity 0.2s; will-change: transform; }
.laser-seg { position: absolute; left: 0; top: 0; z-index: 481; height: 5px; margin-top: -2.5px; transform-origin: 0 50%; border-radius: 3px; pointer-events: none; background: linear-gradient(90deg, rgba(255,45,45,0.95), rgba(255,45,45,0.85)); box-shadow: 0 0 9px 2px rgba(255,45,45,0.6); opacity: 1; transition: opacity 2.4s ease-out; will-change: opacity; }
.laser-seg.fade { opacity: 0; }
#map.laser-on { cursor: none; }
.leaflet-control-scale { margin: 0 0 26px 28px !important; }
.leaflet-control-scale-line {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd) !important;
  color: var(--ink) !important; font-family: var(--mono); font-size: 10px !important;
  padding: 3px 9px !important; line-height: 1.3 !important; box-shadow: var(--glass-shadow);
  text-align: center !important; border-radius: 8px !important; min-width: 56px;
}
.leaflet-control-scale-line:not(:first-child) { border-top: 1px solid var(--glass-brd) !important; margin-top: 4px; }
.pin { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 7px rgba(24,22,15,0.4); cursor: pointer; transition: transform 0.15s; }
.pin:hover { transform: scale(1.18); }
.pin.active { width: 20px; height: 20px; box-shadow: 0 0 0 7px rgba(180,83,9,0.18), 0 2px 9px rgba(24,22,15,0.4); }
.pin.active::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--accent); animation: ping 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
.leaflet-popup-content-wrapper {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow) !important;
  border-radius: 12px !important; color: var(--ink) !important;
}
.leaflet-popup-content { margin: 14px 16px !important; font-family: var(--sans); line-height: 1.4; }
.leaflet-popup-tip { background: var(--glass-bg) !important; }
.pop-name { font-size: 15px; font-weight: 600; margin: 0 0 3px; }
.pop-type { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.04em; }
.rc-pt { width: 12px; height: 12px; transform: rotate(45deg); border: 1.4px solid #fff; box-shadow: 0 1px 3px rgba(24,22,15,0.4); cursor: pointer; }

/* placeholder tabs */
.placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 700; }
.placeholder[hidden] { display: none; }
[data-mapfloat][hidden] { display: none; }
.ph-card { text-align: center; max-width: 440px; padding: 0 30px; }
.ph-icon { width: 62px; height: 62px; margin: 0 auto 24px; color: var(--accent); }
.ph-card h2 { font-size: 27px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 14px; }
.ph-card p { font-size: 15.5px; color: var(--muted); line-height: 1.55; margin: 0 0 22px; text-wrap: pretty; }
.ph-soon { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(180,83,9,0.3); border-radius: 30px; padding: 8px 16px; }

/* ================= AGENT PANEL ================= */
.agent { display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--hairline); min-width: 0; }
.agent-head { padding: 16px 16px 16px 18px; border-bottom: 1px solid var(--hairline-soft); display: flex; align-items: center; gap: 12px; }
.agent-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); border: 1px solid rgba(180,83,9,0.2); display: flex; align-items: center; justify-content: center; flex: none; }
.agent-mark span { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(180,83,9,0.18); }
.agent-head .ah-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-head .ah-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.agent-ctx { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--accent); border: 1px solid rgba(180,83,9,0.25); border-radius: 20px; padding: 4px 10px; white-space: nowrap; }

.thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 20px; display: flex; flex-direction: column; gap: 20px; }
.thread::-webkit-scrollbar { width: 8px; }
.thread::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
.msg { display: flex; flex-direction: column; gap: 7px; max-width: 100%; }
.msg .from { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.bubble { font-size: 14px; line-height: 1.5; border-radius: 13px; padding: 13px 16px; }
.msg.user { align-items: flex-end; }
.msg.user .bubble { background: var(--ink); color: #F5F2EC; border-bottom-right-radius: 4px; max-width: 88%; }
.msg.agent .bubble { background: var(--surface-warm); border: 1px solid var(--hairline-soft); border-bottom-left-radius: 4px; }
.bubble strong { font-weight: 600; }

.result { margin-top: 11px; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: #fff; }
.result-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 9px 13px; font-family: var(--mono); font-size: 11.5px; align-items: center; }
.result-row + .result-row { border-top: 1px solid var(--hairline-soft); }
.result-row .hole { color: var(--ink); font-weight: 500; }
.result-row .grade { color: var(--accent); white-space: nowrap; }
.result-row .dist { color: var(--faint); white-space: nowrap; }
.result-head { background: var(--surface-warm); color: var(--faint) !important; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px !important; }

.cites { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cite { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: #fff; border: 1px solid var(--hairline); border-radius: 20px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.cite::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.cite:hover { border-color: var(--accent); color: var(--accent-ink); }

.suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.chip-s { font-size: 12.5px; color: var(--muted); background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: 20px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.chip-s:hover { border-color: var(--accent); color: var(--accent-ink); background: #fff; }

.composer { flex: none; padding: 14px 16px 18px; border-top: 1px solid var(--hairline-soft); background: var(--surface); }

/* ---- agent setup / config bar ---- */
.agent-config { border-top: 1px solid var(--hairline-soft); flex: none; }
.ac-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: transparent; border: none; cursor: pointer; }
.ac-head:hover { background: var(--surface-warm); }
.ac-ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.ac-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.ac-summary { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 168px; }
.ac-chev { width: 15px; height: 15px; color: var(--faint); flex: none; transition: transform 0.25s; }
.agent-config.open .ac-chev { transform: rotate(180deg); }
.ac-body { max-height: 0; overflow: hidden; opacity: 0; padding: 0 16px; transition: max-height 0.34s cubic-bezier(0.4,0,0.1,1), opacity 0.22s, padding 0.34s; }
.agent-config.open .ac-body { max-height: 460px; opacity: 1; padding: 2px 16px 14px; overflow-y: auto; }
.ac-body::-webkit-scrollbar { width: 7px; }
.ac-body::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
.ac-field { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hairline-soft); }
.ac-field:first-child { border-top: none; }
.ac-field.col { flex-direction: column; align-items: stretch; gap: 9px; }
.ac-field > label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); width: 74px; flex: none; }
.ac-field.col > label { width: auto; }
.ac-select { flex: 1; font-family: var(--sans); font-size: 13px; color: var(--ink); border: 1px solid var(--hairline); border-radius: 7px; padding: 7px 10px; background: #fff; cursor: pointer; }
.ac-seg { flex: 1; display: flex; gap: 3px; background: rgba(120,110,95,0.1); border-radius: 8px; padding: 3px; }
.ac-seg button { flex: 1; border: none; background: transparent; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 6px 2px; border-radius: 6px; }
.ac-seg button.on { background: #fff; color: var(--accent-ink); box-shadow: 0 1px 3px rgba(24,22,15,0.1); }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chip { font-family: var(--sans); font-size: 12px; color: var(--muted); background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: 20px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ac-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); flex: none; }
.ac-chip.on { color: var(--accent-ink); border-color: rgba(180,83,9,0.32); background: var(--accent-soft); }
.ac-chip.on::before { background: var(--accent); }
.ac-note { font-family: var(--mono); font-size: 10px; color: var(--faint); margin: 1px 0 0; }
.ac-subgroup { display: flex; flex-direction: column; gap: 7px; }
.ac-subgroup + .ac-subgroup { margin-top: 5px; }
.ac-sublabel { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.composer-box { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-warm); padding: 8px 8px 8px 16px; }
.composer-box:focus-within { border-color: var(--accent); background: #fff; }
.composer-box textarea {
  flex: 1; border: none; background: transparent; outline: none; resize: none;
  font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--ink);
  max-height: 120px; padding: 5px 0;
}
.composer-box textarea::placeholder { color: var(--faint); }
.send { width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--accent); color: #fff; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; }
.send:hover { background: var(--accent-ink); }
.send svg { width: 17px; height: 17px; }
.composer-foot { display: flex; justify-content: space-between; margin-top: 9px; padding: 0 4px; font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.06em; }

/* ============================================================
   Collapsibles + layer engine UI (added)
   ============================================================ */
.icon-btn {
  width: 32px; height: 32px; border-radius: 8px; flex: none; padding: 0;
  border: 1px solid var(--hairline); background: #fff; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--surface-warm); color: var(--accent-ink); border-color: var(--hairline); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.sm { width: 27px; height: 27px; border-radius: 7px; }
.icon-btn.sm svg { width: 14px; height: 14px; }
.icon-btn.ghost { border-color: transparent; background: transparent; }
.icon-btn.ghost:hover { background: rgba(120,110,95,0.1); }

/* agent toggle — labeled button in the topbar */
.agent-toggle-btn {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 11px;
  border-radius: 8px; border: 1px solid var(--hairline); background: #fff; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.agent-toggle-btn svg { width: 16px; height: 16px; color: var(--accent); }
.agent-toggle-btn:hover { background: var(--surface-warm); color: var(--accent-ink); }
.app:not(.agent-min) .agent-toggle-btn { background: var(--accent-soft); border-color: rgba(180,83,9,0.2); color: var(--accent-ink); }

.tb-left, .tb-right { display: flex; align-items: center; gap: 16px; }

/* sidebar glyphs + collapsed rail */
/* sidebar glyphs */
.glyph {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--surface-warm); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted);
  letter-spacing: 0.02em;
}
.proj-item:hover .glyph { border-color: var(--faint); }
.proj-item.live .glyph { background: var(--accent-soft); border-color: rgba(180,83,9,0.3); color: var(--accent-ink); }

/* agent collapse */
.agent { overflow: hidden; }
.app.agent-min .agent { border-left-color: var(--hairline); }
.ah-meta { min-width: 0; flex: 1; }

/* layers panel head/body */
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px 14px; flex: none; border-bottom: 1px solid var(--hairline-soft); }
.panel-head .label { white-space: nowrap; font-size: 12px; letter-spacing: 0.16em; color: var(--ink); }
.panel-body {
  padding: 4px 18px 18px; overflow-y: auto; min-height: 0; flex: 1;
}
.panel-body::-webkit-scrollbar { width: 7px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }

/* legend — hover-expand corner card with integrated coordinates */
.f-legend { right: 18px; bottom: 18px; width: 248px; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.lgc-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; width: 100%; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: left; }
.lgc-bar:hover { background: var(--surface-warm); }
.lgc-ico { width: 15px; height: 15px; color: var(--accent); flex: none; }
.lgc-chev { width: 14px; height: 14px; color: var(--faint); flex: none; transition: transform 0.28s; }
.lgc-coords { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.03em; white-space: nowrap; }
.lgc-hint { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.f-legend.pinned .lgc-hint { color: var(--accent); }
.lgc-body { max-height: 0; opacity: 0; overflow-y: auto; padding: 0 14px; transition: max-height 0.3s cubic-bezier(0.4,0,0.1,1), opacity 0.22s, padding 0.3s; }
.lgc-body::-webkit-scrollbar { width: 6px; }
.lgc-body::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
.f-legend:hover .lgc-body, .f-legend.pinned .lgc-body { max-height: 56vh; opacity: 1; padding: 14px 14px 8px; border-bottom: 1px solid var(--hairline-soft); }
.f-legend.pinned .lgc-chev { transform: rotate(180deg); }
/* when pinned, the bar sits below the body; flip so chevron points down to collapse */

/* clickable geology unit rows */
#map.identify { cursor: crosshair; }
.geo-identify-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0 10px;
  padding: 9px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface-warm);
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink); text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.geo-identify-btn svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.geo-identify-btn:hover { border-color: var(--accent); }
.geo-identify-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.geo-identify-btn.on svg { color: #fff; }
.lg-sw.wide.geo-click { width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 5px 6px; border-radius: 7px; display: flex; align-items: flex-start; gap: 7px; }
.lg-sw.wide.geo-click:hover { background: var(--surface-warm); }
.lg-go { width: 13px; height: 13px; color: var(--faint); margin-left: auto; flex: none; align-self: center; opacity: 0; transition: opacity 0.12s; }
.lg-sw.wide.geo-click:hover .lg-go { opacity: 1; }
.lg-tip { font-size: 9.5px; color: var(--faint); font-style: italic; margin-top: 7px; }
.lg-struct { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--hairline-soft); }
.lg-struct-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.lg-struct-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 5px; }
.lg-line { flex: none; width: 22px; height: 0; }
.lg-line.fault { border-top: 2px solid #c0392b; }
.lg-line.contact { border-top: 1px solid #6b6357; }
.lg-line.fold { border-top: 2px dashed #7a5aa8; }

/* geology unit breakdown modal */
.geo-modal-ov { position: fixed; inset: 0; z-index: 6300; background: rgba(24,22,15,0.34); display: flex; align-items: center; justify-content: center; padding: 30px; }
.geo-modal { width: 470px; max-width: 100%; max-height: 84vh; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(24,22,15,0.34); display: flex; flex-direction: column; overflow: hidden; }
.geo-modal-head { display: flex; align-items: center; gap: 13px; padding: 17px 20px; border-left: 4px solid #ccc; border-bottom: 1px solid var(--hairline-soft); }
.geo-swatch { width: 26px; height: 26px; border-radius: 7px; flex: none; border: 1px solid rgba(24,22,15,0.12); }
.geo-modal-meta { min-width: 0; margin-right: auto; }
.geo-modal-name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.geo-modal-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--faint); margin-top: 3px; }
.geo-x { width: 30px; height: 30px; border-radius: 8px; border: none; background: var(--surface-warm); color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; flex: none; }
.geo-x:hover { background: var(--hairline); color: var(--ink); }
.geo-modal-body { padding: 6px 20px 16px; overflow-y: auto; }
.geo-row { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hairline-soft); }
.geo-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); width: 124px; flex: none; }
.geo-v { font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.geo-desc { padding: 12px 0 2px; }
.geo-desc p { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 6px 0 0; text-wrap: pretty; }
.geo-blurb { font-size: 12.5px; line-height: 1.55; color: var(--muted); padding: 12px 0 0; text-wrap: pretty; }
.geo-modal-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 10px; color: var(--faint); }
.lg-entry { padding: 9px 0; border-top: 1px solid var(--hairline-soft); }
.lg-entry:first-of-type { border-top: none; padding-top: 0; }
.lg-title { font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.lg-ramp { height: 9px; border-radius: 3px; border: 1px solid rgba(24,22,15,0.08); }
.lg-scale { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
.lg-scale .lg-unit { color: var(--muted); }
.lg-swatches { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.lg-swatches.col { flex-direction: column; flex-wrap: nowrap; gap: 7px; }
.lg-sw { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.lg-sw i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(24,22,15,0.1); flex: none; }
.lg-sw.wide { align-items: flex-start; gap: 7px; }
.lg-sw.wide i { width: 12px; height: 12px; margin-top: 2px; }
.lg-swl { display: flex; flex-direction: column; line-height: 1.25; color: var(--ink); font-size: 11.5px; }
.lg-swl em { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--faint); margin-top: 1px; }
.lg-src { font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: 0.04em; color: var(--faint); }
.lg-note { font-size: 10px; color: var(--faint); padding: 3px 0 1px; font-style: italic; }
.lg-pin { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); flex: none; }

.sub-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); margin: 16px 0 9px;
}
.sub-label:first-child { margin-top: 2px; }

.base-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.base-opt {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-warm); border: 1px solid var(--hairline);
  border-radius: 7px; padding: 9px 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.base-opt:hover { color: var(--ink); border-color: var(--faint); }
.base-opt.on { background: var(--accent-soft); border-color: rgba(180,83,9,0.32); color: var(--accent-ink); }

/* overlay rows with opacity */
.ov + .ov { border-top: 1px solid var(--hairline-soft); }
.ov-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; cursor: pointer; }
.ov-row .box {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--faint);
  flex: none; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s;
}
.ov-row .box svg { width: 11px; height: 11px; color: #fff; opacity: 0; transition: opacity 0.12s; }
.ov.on .ov-row .box { background: var(--accent); border-color: var(--accent); }
.ov.on .ov-row .box svg { opacity: 1; }
.ov-row .nm { font-size: 13.5px; color: var(--ink); }
.ov-row .src { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.ov-op {
  display: flex; align-items: center; gap: 11px; padding-left: 28px;
  height: 0; opacity: 0; overflow: hidden; transition: height 0.26s, opacity 0.2s, margin 0.26s;
}
.ov.on .ov-op { height: 24px; opacity: 1; margin-bottom: 10px; }
.op-val { font-family: var(--mono); font-size: 10.5px; color: var(--muted); width: 36px; text-align: right; flex: none; }

input[type="range"].op {
  -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 3px;
  background: var(--hairline); outline: none; cursor: pointer; margin: 0;
}
input[type="range"].op::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(24,22,15,0.3); cursor: pointer;
}
input[type="range"].op::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(24,22,15,0.3); cursor: pointer;
}

/* ---- compact project task card ---- */
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 15px; }
.dh-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dh-left .pin-mini { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); flex: none; }
.dh-name { font-size: 15px; font-weight: 600; line-height: 1.1; }
.dh-type { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 3px; }
[data-collapse-detail] svg { transition: transform 0.3s; }
.f-detail.min [data-collapse-detail] svg { transform: rotate(180deg); }
.detail-body {
  padding: 2px 14px 13px; max-height: 318px; overflow-y: auto;
  transition: max-height 0.34s cubic-bezier(0.4,0,0.1,1), opacity 0.22s, padding 0.34s;
}
.detail-body::-webkit-scrollbar { width: 7px; }
.detail-body::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
.f-detail.min .detail-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.f-detail.min .detail-head { border-bottom: none; }
.detail-head { border-bottom: 1px solid var(--hairline-soft); }
.f-detail.min .detail-head { border-bottom: 1px solid transparent; }

.todo-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; }
.todo-head .sub-label { margin: 0; }
.todo-count { font-family: var(--mono); font-size: 10.5px; color: var(--accent); }
.todo-list { display: flex; flex-direction: column; }
.todo { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline-soft); }
.todo:first-child { border-top: none; }
.tcheck {
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--faint); flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background 0.15s, border-color 0.15s;
}
.tcheck svg { width: 10px; height: 10px; color: #fff; opacity: 0; transition: opacity 0.12s; }
.todo.done .tcheck { background: var(--accent); border-color: var(--accent); }
.todo.done .tcheck svg { opacity: 1; }
.ttext { flex: 1; font-size: 13px; line-height: 1.35; color: var(--ink); outline: none; min-width: 0; cursor: text; border-radius: 3px; }
.ttext:focus { box-shadow: 0 1px 0 var(--accent); }
.todo.done .ttext { color: var(--faint); text-decoration: line-through; }
.tdel { flex: none; border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity 0.15s, color 0.15s; }
.todo:hover .tdel { opacity: 1; }
.tdel:hover { color: var(--accent); }
.todo-add {
  margin-top: 11px; width: 100%; border: 1px dashed var(--hairline); background: transparent; color: var(--muted);
  border-radius: 8px; padding: 9px; font-family: var(--sans); font-size: 12.5px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.todo-add:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---- expandable overlay groups + info tooltips ---- */
.ov-group { border-top: 1px solid var(--hairline-soft); }
.ov-group:first-child { border-top: none; }
.ov-group-head {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px 0;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: left;
}
.ov-group-head .chev { width: 13px; height: 13px; color: var(--faint); transition: transform 0.25s; flex: none; }
.ov-group.open .ov-group-head .chev { transform: rotate(90deg); }
.ov-group-head .ov-group-count { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--accent); }
.ov-group-body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.32s cubic-bezier(0.4,0,0.1,1), opacity 0.22s;
  padding-left: 5px;
}
.ov-group.open .ov-group-body { max-height: 760px; opacity: 1; }

.info {
  width: 15px; height: 15px; flex: none; margin-left: 7px; padding: 0;
  border-radius: 50%; border: 1px solid var(--faint); background: transparent; color: var(--faint);
  font-family: var(--mono); font-size: 9.5px; font-style: italic; line-height: 1; cursor: help;
  display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s;
}
.info:hover { border-color: var(--accent); color: var(--accent); }

.layer-tip {
  position: fixed; z-index: 4000; display: none; max-width: 232px;
  background: var(--ink); color: #F3EFE7; font-family: var(--sans); font-size: 11.5px; line-height: 1.45;
  padding: 10px 13px; border-radius: 10px; box-shadow: 0 10px 30px rgba(24,22,15,0.32);
  pointer-events: none;
}

/* ============================================================
   DATA ROOM
   ============================================================ */
.dataroom { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 700; }
.dataroom[hidden] { display: none; }

/* top bar: room switch + actions */
.dr-top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; background: var(--surface); border-bottom: 1px solid var(--hairline);
}
.dr-rooms { display: flex; gap: 6px; background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: 11px; padding: 4px; }
.dr-room {
  display: flex; align-items: center; gap: 10px; padding: 9px 15px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer; font-family: var(--sans);
  font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background 0.15s, color 0.15s;
}
.dr-room svg { width: 17px; height: 17px; }
.dr-room:hover { color: var(--ink); }
.dr-room.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(24,22,15,0.1); }
.dr-room .rcount { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.dr-room.on .rcount { color: var(--accent); }

.dr-actions { display: flex; align-items: center; gap: 11px; }
.dr-search { display: flex; align-items: center; gap: 9px; width: 270px; border: 1px solid var(--hairline); border-radius: 9px; background: var(--surface-warm); padding: 9px 13px; }
.dr-search:focus-within { border-color: var(--accent); background: #fff; }
.dr-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.dr-search input { border: none; background: transparent; outline: none; font-family: var(--sans); font-size: 13.5px; color: var(--ink); width: 100%; }
.dr-search input::placeholder { color: var(--faint); }
.dr-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 9px;
  font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; border: 1px solid var(--hairline);
}
.dr-btn svg { width: 15px; height: 15px; }
.dr-btn.ghost { background: #fff; color: var(--ink); }
.dr-btn.ghost:hover { background: var(--surface-warm); }
.dr-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.dr-btn.primary:hover { background: var(--accent-ink); }

/* context strip */
.dr-strip { flex: none; display: flex; align-items: center; gap: 30px; padding: 13px 24px; background: var(--surface-warm); border-bottom: 1px solid var(--hairline-soft); }
.dr-strip[hidden] { display: none; }
.dr-metric { display: flex; flex-direction: column; gap: 3px; }
.dr-metric .m-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.dr-metric .m-v { font-size: 16px; font-weight: 500; color: var(--ink); }
.dr-metric .m-v.accent { color: var(--accent); }
.dr-strip .m-spacer { margin-left: auto; }
.ctx-bar { width: 200px; }
.ctx-track { height: 7px; border-radius: 4px; background: rgba(120,110,95,0.16); overflow: hidden; margin-top: 4px; }
.ctx-fill { height: 100%; border-radius: 4px; background: var(--accent); }
.dr-strip .lineage-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.dr-strip .lineage-note svg { width: 15px; height: 15px; color: var(--accent); }

/* body layout */
.dr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 224px 1fr; position: relative; }

/* tree sidebar */
.dr-side { border-right: 1px solid var(--hairline); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.dr-tree { padding: 16px 12px; overflow-y: auto; flex: 1; }
.dr-tree[hidden] { display: none; }
.dr-tree-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding: 0 10px 10px; }
.dr-cat {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
  font-size: 13.5px; color: var(--muted); cursor: pointer; transition: background 0.12s, color 0.12s;
}
.dr-cat + .dr-cat { margin-top: 1px; }
.dr-cat:hover { background: var(--surface-warm); color: var(--ink); }
.dr-cat.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.dr-cat .cat-ico { width: 17px; height: 17px; flex: none; }
.dr-cat .cat-ct {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  background: var(--surface-warm); border: 1px solid var(--hairline-soft); border-radius: 20px;
  min-width: 20px; text-align: center; padding: 1px 7px; line-height: 1.5; flex: none;
}
.dr-cat.on .cat-ct { color: var(--accent-ink); background: #fff; border-color: rgba(180,83,9,0.22); }
.dr-cat .dr-fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* folder rows: reveal the ⋯ menu on hover; it tucks in beside the count chip */
.dr-folder { position: relative; }
.dr-folder .dr-fmenu {
  flex: none; width: 22px; height: 22px; margin-left: 4px; border-radius: 6px;
  border: none; background: transparent; color: var(--faint); cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0;
}
.dr-folder .dr-fmenu svg { width: 15px; height: 15px; }
.dr-folder:hover .dr-fmenu { display: flex; }
.dr-folder:hover .dr-fmenu:hover { background: #fff; color: var(--accent-ink); }
/* when the menu shows on hover, hide the count chip so the row doesn't jump */
.dr-folder:hover .cat-ct { display: none; }

/* drag-to-move: highlight the folder under the cursor */
.dr-cat.drag-over {
  background: var(--accent-soft); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(180,83,9,0.4);
}
.dr-cat.drag-over .cat-ct { color: var(--accent-ink); }

/* + New folder affordance */
.dr-newfolder {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 6px;
  padding: 8px 11px; border-radius: 8px; border: 1px dashed var(--hairline);
  background: transparent; color: var(--muted); font-family: var(--sans); font-size: 12.5px;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dr-newfolder svg { width: 16px; height: 16px; flex: none; }
.dr-newfolder:hover { background: var(--surface-warm); color: var(--accent-ink); border-color: var(--accent); }

.dr-secure { flex: none; border-top: 1px solid var(--hairline-soft); padding: 14px 18px; display: flex; align-items: flex-start; gap: 11px; }
.dr-secure svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 1px; }
.dr-secure .s-txt { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.dr-secure .s-txt strong { display: block; color: var(--ink); font-weight: 600; font-size: 12px; margin-bottom: 1px; }

/* file area */
.dr-files { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dr-crumb { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px; }
.dr-crumb .crumb-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.dr-crumb .crumb-ct { font-family: var(--mono); font-size: 12px; color: var(--faint); white-space: nowrap; }
.dr-crumb .crumb-sp { margin-left: auto; }
.dr-bulk { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.dr-bulk button { font-family: var(--sans); font-size: 12.5px; color: var(--accent-ink); background: none; border: none; cursor: pointer; padding: 0; }
.dr-bulk button:hover { text-decoration: underline; }

.dr-table { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dr-thead, .dr-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.7fr) 72px 100px 104px 72px;
  align-items: center; gap: 10px; padding: 0 18px;
}
.dr-thead { flex: none; height: 38px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface-warm); }
.dr-thead span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.dr-thead span.r, .dr-row .r { text-align: right; justify-self: end; }
.dr-thead span.c, .dr-row .c { justify-self: center; }
.dr-rows { flex: 1; overflow-y: auto; }
.dr-rows::-webkit-scrollbar { width: 9px; }
.dr-rows::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }

.dr-row { height: 56px; border-bottom: 1px solid var(--hairline-soft); cursor: pointer; transition: background 0.1s; }
.dr-row:hover { background: var(--surface-warm); }
.dr-row.sel { background: var(--accent-soft); }
.dr-row.excluded { opacity: 0.5; }

.f-name { display: flex; align-items: center; gap: 13px; min-width: 0; }
.f-badge {
  width: 38px; height: 30px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.03em;
  border: 1px solid; 
}
.f-badge.pdf  { color: #B91C1C; border-color: rgba(185,28,28,0.28); background: rgba(185,28,28,0.07); }
.f-badge.xlsx, .f-badge.csv { color: #15803D; border-color: rgba(21,128,61,0.28); background: rgba(21,128,61,0.07); }
.f-badge.docx { color: #1D4ED8; border-color: rgba(29,78,216,0.26); background: rgba(29,78,216,0.07); }
.f-badge.pptx { color: #C2410C; border-color: rgba(194,65,12,0.28); background: rgba(194,65,12,0.07); }
.f-badge.las  { color: #B45309; border-color: rgba(180,83,9,0.3); background: rgba(180,83,9,0.07); }
.f-badge.gis  { color: #0F766E; border-color: rgba(15,118,110,0.28); background: rgba(15,118,110,0.07); }
.f-badge.data { color: #6D28D9; border-color: rgba(109,40,217,0.26); background: rgba(109,40,217,0.07); }
.f-badge.sys  { color: var(--muted); border-color: var(--hairline); background: var(--surface-warm); }
.f-meta { min-width: 0; }
.f-meta .fn { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-meta .fsub { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-row .cat { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-row .size { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.dr-row .mod { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
/* Type column: small understated chip (was unstyled → rendered as large default text) */
.dr-row .f-type {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--faint); background: var(--surface-warm); border: 1px solid var(--hairline);
  border-radius: 5px; padding: 2px 6px; line-height: 1.4;
}
/* file row being dragged to a folder */
.dr-row[draggable="true"] { cursor: pointer; }
.dr-row.dragging { opacity: 0.45; }

.idx-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 20px; border: 1px solid; white-space: nowrap; }
.idx-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.idx-pill.indexed { color: var(--ok); border-color: rgba(63,98,18,0.3); }
.idx-pill.indexed::before { background: var(--ok); }
.idx-pill.queued { color: #B45309; border-color: rgba(180,83,9,0.3); }
.idx-pill.queued::before { background: #B45309; animation: ping 1.6s ease-in-out infinite; }
.idx-pill.excluded { color: var(--faint); border-color: var(--hairline); }
.idx-pill.excluded::before { background: var(--faint); }

.f-eye { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--hairline); background: #fff; color: var(--faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.f-eye svg { width: 16px; height: 16px; }
.f-eye.on { color: var(--accent); border-color: rgba(180,83,9,0.3); background: var(--accent-soft); }
.f-eye:hover { border-color: var(--accent); }

.f-acts { display: flex; align-items: center; gap: 5px; justify-self: end; }
.f-act { width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.f-act svg { width: 16px; height: 16px; }
.f-act:hover { background: #fff; border-color: var(--hairline); color: var(--accent-ink); }

/* detail / permissions drawer (overlay, slides over the table's right edge) */
.dr-detail { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; z-index: 6; border-left: 1px solid var(--hairline); background: var(--surface); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; box-shadow: -10px 0 30px rgba(24,22,15,0.10); }
.dr-detail[hidden] { display: none; }
.dd-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--hairline-soft); }
.dd-top { display: flex; align-items: flex-start; gap: 13px; }
.dd-x { margin-left: auto; width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; flex: none; }
.dd-x:hover { background: var(--surface-warm); color: var(--ink); }
.dd-head .dd-fn { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 13px 0 4px; word-break: break-word; }
.dd-head .dd-sub { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.dd-sect { padding: 16px 20px; border-bottom: 1px solid var(--hairline-soft); }
.dd-sect .dd-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.dd-toggle { display: flex; align-items: center; gap: 12px; }
.dd-toggle .ddt-txt { font-size: 13px; color: var(--ink); }
.dd-toggle .ddt-txt span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.switch { margin-left: auto; width: 40px; height: 23px; border-radius: 20px; background: var(--hairline); border: none; cursor: pointer; position: relative; flex: none; transition: background 0.18s; }
.switch::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.18s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(17px); }

.dd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.dd-row .dr-k { color: var(--muted); }
.dd-row .dr-val { color: var(--ink); font-family: var(--mono); font-size: 12px; }
.dd-access { display: flex; gap: 5px; }
.dd-access button { flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: 7px; padding: 8px 4px; cursor: pointer; }
.dd-access button.on { background: var(--accent-soft); border-color: rgba(180,83,9,0.3); color: var(--accent-ink); }
.dd-lineage { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); padding: 7px 0; }
.dd-lineage svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.dd-lineage b { color: var(--ink); font-weight: 500; }
.dd-foot { margin-top: auto; padding: 16px 20px; display: flex; gap: 10px; }
.dd-foot .dr-btn { flex: 1; justify-content: center; }

/* upload toast */
.dr-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #F3EFE7; font-size: 13px; padding: 12px 20px; border-radius: 11px;
  box-shadow: 0 12px 32px rgba(24,22,15,0.3); opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 5000; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
}
.dr-toast svg { width: 16px; height: 16px; color: #8FD18F; }
.dr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* agent room theming — retint scoped to the data room when viewing agent data */
.dataroom.room-agent {
  --accent: #4338CA;
  --accent-soft: #E6E5F7;
  --accent-ink: #312E81;
}
.dataroom.room-agent .dr-secure svg { color: var(--accent); }
.dr-room[data-room="agent"].on { color: #312E81; }

/* ============================================================
   File management: context menu, dialogs, viewer
   ============================================================ */
.dr-btn.danger { background: #B91C1C; color: #fff; border-color: #B91C1C; }
.dr-btn.danger:hover { background: #991B1B; }

/* 3-dot context menu */
.cr-menu {
  position: fixed; z-index: 6000; width: 226px; padding: 6px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(24,22,15,0.22);
}
.cr-mi {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: none; background: transparent; cursor: pointer; border-radius: 8px;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink); text-align: left;
}
.cr-mi svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.cr-mi:hover { background: var(--surface-warm); }
.cr-mi.danger { color: #B91C1C; }
.cr-mi.danger svg { color: #B91C1C; }
.cr-mi.danger:hover { background: rgba(185,28,28,0.08); }
.cr-msep { height: 1px; background: var(--hairline-soft); margin: 5px 8px; }

/* modal dialogs (rename/delete) */
.cr-modal-ov { position: fixed; inset: 0; z-index: 6200; background: rgba(24,22,15,0.32); display: flex; align-items: center; justify-content: center; }
.cr-modal { width: 420px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 24px 60px rgba(24,22,15,0.3); overflow: hidden; }
.cr-modal-title { font-size: 16px; font-weight: 600; padding: 18px 20px 0; }
.cr-modal-body { padding: 14px 20px 4px; display: flex; align-items: center; gap: 4px; }
.cr-modal-msg { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.cr-modal-msg b { color: var(--ink); font-weight: 600; }
.cr-input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 14px; color: var(--ink); border: 1px solid var(--hairline); border-radius: 9px; padding: 10px 12px; background: var(--surface-warm); outline: none; }
.cr-input:focus { border-color: var(--accent); background: #fff; }
.cr-input-ext { font-family: var(--mono); font-size: 13px; color: var(--faint); flex: none; }
.cr-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px 18px; }

/* ---- trust badge (drill-data review state) on file rows ---- */
.dr-trust { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.6; cursor: pointer; vertical-align: middle; border: 1px solid transparent; white-space: nowrap; }
.dr-trust.ok   { color: #15803D; background: rgba(21,128,61,0.09);  border-color: rgba(21,128,61,0.26); }
.dr-trust.warn { color: #B45309; background: rgba(180,83,9,0.10);   border-color: rgba(180,83,9,0.28); }
.dr-trust.err  { color: #B91C1C; background: rgba(185,28,28,0.09);  border-color: rgba(185,28,28,0.28); }
.dr-trust:hover { filter: brightness(0.96); }

/* ---- review & confirm panel ---- */
.cr-review-modal { width: 620px; }
.cr-review-modal .cr-modal-body { display: block; align-items: stretch; padding: 14px 20px 6px; max-height: min(64vh, 560px); overflow: auto; }
.cr-rv-fname { font-weight: 600; }
.cr-rv-loading { padding: 30px 4px; text-align: center; color: var(--faint); font-size: 13.5px; }
.cr-rv-counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cr-rv-stat { flex: 1; min-width: 78px; background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 11px; }
.cr-rv-stat b { display: block; font-size: 16px; font-weight: 650; color: var(--ink); }
.cr-rv-stat span { font-size: 11px; color: var(--faint); }
.cr-rv-sec { margin: 0 0 14px; }
.cr-rv-h { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.cr-rv-h .cr-rv-ct { font-size: 11px; font-weight: 600; color: var(--faint); background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: 999px; padding: 0 7px; text-transform: none; letter-spacing: 0; }
.cr-rv-warnh { color: #B45309; text-transform: none; letter-spacing: 0; font-size: 13px; }
.cr-rv-confirm { background: rgba(180,83,9,0.05); border: 1px solid rgba(180,83,9,0.20); border-radius: 12px; padding: 12px 14px; }
.cr-rv-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.cr-rv-note b { color: var(--ink); font-weight: 600; }
.cr-rv-confirm .cr-input { width: 100%; }
.cr-rv-tablewrap { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.cr-rv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cr-rv-table th { text-align: left; font-weight: 600; color: var(--faint); background: var(--surface-warm); padding: 6px 10px; border-bottom: 1px solid var(--hairline); }
.cr-rv-table td { padding: 5px 10px; border-bottom: 1px solid var(--hairline); color: var(--ink); font-family: var(--mono); font-size: 11.5px; }
.cr-rv-table tr:last-child td { border-bottom: none; }
.cr-rv-table td i { color: var(--faint); font-style: italic; }
.cr-rv-more { font-size: 11.5px; color: var(--faint); padding: 6px 2px 0; }
.cr-rv-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-rv-issues li { font-size: 12.5px; color: var(--ink); line-height: 1.45; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.cr-rv-sev { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 5px; }
.cr-rv-sev.err { color: #B91C1C; background: rgba(185,28,28,0.10); }
.cr-rv-sev.warn { color: #B45309; background: rgba(180,83,9,0.10); }
.cr-rv-sev.info { color: var(--muted); background: var(--surface-warm); }
.cr-rv-code { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.cr-rv-sug { font-size: 11.5px; color: #15803D; flex-basis: 100%; padding-left: 4px; }
.cr-rv-clean { font-size: 12.5px; color: #15803D; }
.cr-rv-seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 9px; overflow: hidden; }
.cr-rv-segb { font-family: var(--sans); font-size: 12.5px; color: var(--muted); background: var(--surface); border: none; border-right: 1px solid var(--hairline); padding: 7px 14px; cursor: pointer; }
.cr-rv-segb:last-child { border-right: none; }
.cr-rv-segb.active { background: var(--accent); color: #fff; }

/* viewer overlay */
/* File viewer — a centered WINDOWED reader by default; a header button toggles fullscreen. */
.cr-viewer-ov { position: fixed; inset: 0; z-index: 6100; background: rgba(24,22,15,0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 26px; animation: crViewerFade 0.18s ease; }
.cr-viewer-ov.fullscreen { padding: 0; }
.cr-viewer { width: 96vw; max-width: 1400px; height: 92vh; background: var(--surface); border-radius: 16px; box-shadow: 0 30px 80px rgba(24,22,15,0.4); display: grid; grid-template-columns: 1fr 320px; overflow: hidden; transition: grid-template-columns 0.2s ease; }
.cr-viewer-ov.fullscreen .cr-viewer { width: 100vw; max-width: none; height: 100vh; border-radius: 0; box-shadow: none; }
.cr-viewer.info-collapsed { grid-template-columns: 1fr 0; }
.cr-viewer.info-collapsed .cr-viewer-side { opacity: 0; pointer-events: none; }
@keyframes crViewerFade { from { opacity: 0; } to { opacity: 1; } }
.cr-viewer-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cr-viewer-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
.cr-viewer-meta { min-width: 0; margin-right: auto; }
.cv-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-sub { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 2px; }
.cr-viewer-x { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--surface-warm); color: var(--muted); font-size: 21px; line-height: 1; cursor: pointer; flex: none; }
.cr-viewer-x:hover { background: var(--hairline); color: var(--ink); }
.cr-viewer-body { position: relative; flex: 1; min-height: 0; overflow: auto; background: var(--surface-warm); padding: 44px 32px 72px; }
/* Each preview sits on a centered white "page" with a soft shadow — like a real document reader. */
.cr-viewer-body .cr-page { margin: 0 auto; box-shadow: 0 1px 2px rgba(24,22,15,0.05), 0 12px 38px rgba(24,22,15,0.08); border-radius: 12px; animation: crPageIn 0.2s ease; }
.cr-viewer-body .vw-doc { max-width: 800px; padding: 56px 64px; line-height: 1.66; }
.cr-viewer-body .vw-doc h1 { font-size: 23px; font-weight: 600; margin: 28px 0 10px; letter-spacing: -0.01em; }
.cr-viewer-body .vw-doc h1:first-child { margin-top: 0; }
.cr-viewer-body .vw-doc h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--ink); }
.cr-viewer-body .vw-doc ul { margin: 0 0 15px; padding-left: 22px; }
.cr-viewer-body .vw-doc li { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 5px; }
.cr-viewer-body .vw-doc code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-warm); border: 1px solid var(--hairline-soft); border-radius: 4px; padding: 1px 5px; }
.cr-viewer-body .vw-tablewrap { max-width: 1080px; }
.cr-page-loading { background: #fff; max-width: 800px; padding: 52px 60px; }
.cr-shimmer { height: 13px; border-radius: 6px; margin: 0 0 18px; background: linear-gradient(90deg, var(--hairline-soft) 25%, var(--hairline) 37%, var(--hairline-soft) 63%); background-size: 400% 100%; animation: crShimmer 1.25s ease infinite; }
.cr-shimmer:first-child { height: 20px; margin-bottom: 26px; }
.cr-viewer-info svg { margin-right: 6px; }
@keyframes crPageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes crShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Raw-file previews — the ACTUAL file rendered from its signed URL. */
/* PDF/image fill the viewer body exactly (ignoring the reader padding) so the file's own
   viewer/scroll handles paging — no clipping, no double scrollbars. */
.cr-viewer-body .cr-rawwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; }
.cr-rawframe { width: 100%; height: 100%; max-width: 1100px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(24,22,15,0.05), 0 12px 38px rgba(24,22,15,0.08); }
/* Canvas-based PDF viewer (PDF.js) — scrollable stack of rendered pages */
.cr-pdfwrap { position: absolute; inset: 0; overflow: auto; background: #3a3936; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cr-pdf-page { background: #fff; max-width: 100%; height: auto; border-radius: 2px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.cr-pdf-msg { color: rgba(255,255,255,0.82); font-family: var(--sans); font-size: 12.5px; text-align: center; padding: 20px 14px; }
.cr-pdf-msg a { color: #fff; text-decoration: underline; }
/* lazy-render placeholder: holds page-ish height until PDF.js paints the canvas into it.
   flex: none is load-bearing — as flex children of the fixed-height scroll column, slots would
   otherwise shrink to fit and stack every page on top of the previous one. */
.cr-pdf-slot { min-height: 420px; width: 100%; display: flex; flex-direction: column; align-items: center; flex: none; }
/* Faithful spreadsheet viewer — the file AS-IS: column letters, row numbers, gridlines, sheet tabs */
.cr-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.cr-sheet-scroll { flex: 1; overflow: auto; }
.cr-sheet-grid { border-collapse: collapse; font: 12.5px var(--sans); color: #202124; table-layout: auto; }
.cr-sheet-grid th, .cr-sheet-grid td { border: 1px solid #E2E3E3; padding: 3px 8px; white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.cr-sheet-grid thead th { position: sticky; top: 0; z-index: 2; background: #F8F9FA; color: #5F6368; font-weight: 500; font-size: 11px; text-align: center; min-width: 46px; }
.cr-sheet-grid td.rn, .cr-sheet-grid th.rn { position: sticky; left: 0; z-index: 1; background: #F8F9FA; color: #5F6368; font-size: 11px; text-align: center; min-width: 40px; max-width: 60px; }
.cr-sheet-grid thead th.corner { z-index: 3; }
.cr-sheet-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cr-sheet-note { font: 11.5px var(--sans); color: #5F6368; background: #F8F9FA; border-top: 1px solid #E2E3E3; padding: 6px 12px; }
.cr-sheet-tabs { display: flex; gap: 2px; background: #F1F3F4; border-top: 1px solid #E2E3E3; padding: 4px 8px 0; overflow-x: auto; }
.cr-sheet-tabs button { border: 1px solid #E2E3E3; border-bottom: none; border-radius: 6px 6px 0 0; background: #E8EAED; color: #3C4043; font: 12px var(--sans); padding: 5px 14px; cursor: pointer; white-space: nowrap; }
.cr-sheet-tabs button.on { background: #fff; font-weight: 600; }
/* Data Room list controls — type / date / sort */
.dr-listctl { display: flex; gap: 8px; align-items: center; }
.dr-sel {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface);
  color: var(--muted); font: 12px var(--sans); padding: 6px 26px 6px 10px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23A39B8D' stroke-width='1.6' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.dr-sel:hover { color: var(--ink); border-color: var(--faint); }
.cr-rawimg { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(24,22,15,0.05), 0 12px 38px rgba(24,22,15,0.08); }
.cr-viewer-body .cr-pre { font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--ink); margin: 0; }
.cr-dlcard { max-width: 460px; background: #fff; padding: 44px 38px; text-align: center; }
.cr-dlcard-badge { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--accent); border-radius: 9px; padding: 11px 15px; }
.cr-dlcard-name { font-size: 16px; font-weight: 600; color: var(--ink); margin: 18px 0 4px; word-break: break-word; }
.cr-dlcard-sub { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.cr-dlcard-msg { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 16px 0 22px; }
.cr-dlcard-btn { font-family: var(--sans); font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 9px; padding: 10px 18px; cursor: pointer; }
.cr-dlcard-btn:hover { filter: brightness(1.06); }

/* viewer side panel (details / permissions / actions) */
.cr-viewer-side { border-left: 1px solid var(--hairline); background: var(--surface); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.cvs-sect { padding: 16px 20px; border-bottom: 1px solid var(--hairline-soft); }
.cvs-sect .dd-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.cvs-foot { margin-top: auto; padding: 16px 20px; display: flex; gap: 10px; }
.cvs-foot .dr-btn { flex: 1; justify-content: center; }

/* viewer — table */
.vw-tablewrap { background: #fff; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; max-width: 860px; margin: 0 auto; }
.vw-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vw-table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 11px 14px; background: var(--surface-warm); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.vw-table td { padding: 9px 14px; border-bottom: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.vw-table td.k { font-family: var(--sans); font-weight: 500; }
.vw-table tr:last-child td { border-bottom: none; }
.vw-table.compact td, .vw-table.compact th { padding: 7px 12px; }
.vw-tablefoot { padding: 11px 14px; font-family: var(--mono); font-size: 11px; color: var(--faint); background: var(--surface-warm); border-top: 1px solid var(--hairline); }
/* DR3 — real file-type previews. Sticky header for parsed CSV/TSV tables (sticks to the scrolling
   viewer body). The wrapper drops overflow:hidden so sticky isn't clipped; corners stay rounded. */
.cr-viewer-body .vw-tablewrap { overflow: visible; }
.cr-viewer-body .vw-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--hairline); }
.cr-viewer-body .vw-table thead th:first-child { border-top-left-radius: 12px; }
.cr-viewer-body .vw-table thead th:last-child { border-top-right-radius: 12px; }
/* LAS well logs → mono, scrollable light text block inside the document page. */
.cr-viewer-body pre.vw-log {
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--ink);
  white-space: pre; overflow-x: auto; margin: 0;
  background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 14px 16px; word-break: normal;
}
/* Standalone code block (e.g. notebook code cells carry .nbv-code .vw-code) — dark, mono, scrollable. */
.cr-viewer-body pre.vw-code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre; overflow-x: auto; margin: 0;
}
/* Inline Jupyter notebook cells inside a viewer .vw-doc (reuses the shared .nbv look from coreroom-ml.css;
   these scoped tweaks keep cells flowing full-width and figures contained inside the document page). */
.cr-viewer-body .vw-doc .nbv { max-width: 100%; margin: 6px 0 0; gap: 16px; }
.cr-viewer-body .vw-doc .nbv-md { font-size: 14px; line-height: 1.66; color: var(--ink); }
.cr-viewer-body .vw-doc .nbv-img { max-width: 100%; border: 1px solid var(--hairline); border-radius: 8px; background: #fff; }
.cr-viewer-body .vw-doc .nbv-code, .cr-viewer-body .vw-doc .nbv-stream, .cr-viewer-body .vw-doc .nbv-text { white-space: pre; overflow-x: auto; }

/* viewer — report / doc */
.vw-report { display: flex; justify-content: center; }
.vw-page { width: 600px; max-width: 100%; background: #fff; border: 1px solid var(--hairline); border-radius: 8px; box-shadow: 0 8px 30px rgba(24,22,15,0.1); padding: 52px 56px; min-height: 600px; }
.vw-page-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
.vw-page h1 { font-size: 27px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 24px; }
.vw-page-qp { font-size: 13.5px; color: var(--ink); }
.vw-page-date { font-size: 13px; color: var(--muted); margin-top: 3px; }
.vw-toc-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 44px 0 14px; border-top: 1px solid var(--hairline); padding-top: 22px; }
.vw-toc { list-style: none; margin: 0; padding: 0; }
.vw-toc li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 13.5px; color: var(--ink); }
.vw-toc li span:first-child { flex: 1; }
.vw-toc .vw-pg { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.vw-page-foot { margin-top: 40px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); text-align: center; }
.vw-doc { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 40px 46px; }
.vw-doc-head { margin-bottom: 20px; }
.vw-doc-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.vw-doc h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.vw-doc-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.vw-doc p { font-size: 14px; line-height: 1.65; color: var(--ink); margin: 0 0 15px; text-wrap: pretty; }

/* viewer — figures / placeholders */
.vw-figure { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vw-figure-art { width: 100%; height: 420px; border-radius: 12px; border: 1px solid var(--hairline); }
.vw-figure-art.sections { background: repeating-linear-gradient(115deg, #EDE8DE 0 22px, #E3DCCD 22px 44px, #D8CEBA 44px 60px); position: relative; }
.vw-figure-art.sections::after { content: ""; position: absolute; left: 28%; top: 30%; width: 44%; height: 44%; border-radius: 50%; background: radial-gradient(circle, rgba(180,83,9,0.55), rgba(180,83,9,0.12) 70%, transparent); }
.vw-figure-art.map { background: var(--surface-warm) url('assets/topo-light.svg') center / cover; position: relative; }
.vw-figure-art.map::after { content: ""; position: absolute; left: 30%; top: 28%; width: 40%; height: 46%; border: 2px dashed var(--accent); border-radius: 6px; background: rgba(180,83,9,0.08); }
.vw-figure-art.model { background: radial-gradient(circle at 50% 40%, #2A2620, #18160F); position: relative; overflow: hidden; }
.vw-figure-art.model::after { content: ""; position: absolute; left: 50%; top: 45%; width: 200px; height: 200px; transform: translate(-50%,-50%) rotateX(60deg) rotate(20deg); background: linear-gradient(var(--accent), transparent); border: 1px solid rgba(180,83,9,0.5); border-radius: 50%; box-shadow: 0 0 60px rgba(180,83,9,0.4); }
.vw-figure-cap { font-size: 12.5px; color: var(--muted); text-align: center; max-width: 560px; line-height: 1.5; }
.vw-graph { width: 100%; max-width: 460px; height: auto; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 12px; }

/* viewer — core trays */
.vw-core { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.vw-tray { background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 14px; }
.vw-tray-lbl { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 9px; }
.vw-tray-rows { display: flex; flex-direction: column; gap: 6px; }
.vw-corerow { height: 16px; border-radius: 4px; background: linear-gradient(90deg, #B79C86, #9A8268 18%, #C9B89B 36%, #8A7256 54%, #B79C86 72%, #A8957C 100%); }

/* viewer — slides */
.vw-slides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; }
.vw-slide { aspect-ratio: 16/10; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(24,22,15,0.06); }
.vw-slide-n { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.vw-slide-t { font-size: 14px; font-weight: 500; margin-top: auto; line-height: 1.3; }

/* viewer — log */
.vw-logwrap { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vw-log { width: 100%; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 8px; }
.vw-loglegend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.vw-loglegend span { display: inline-flex; align-items: center; gap: 7px; }
.vw-loglegend i { width: 13px; height: 13px; border-radius: 3px; }

/* viewer — datacard */
.vw-datacard { max-width: 440px; margin: 40px auto 0; background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 32px; text-align: center; }
.vw-dc-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
.vw-dc-icon svg { width: 26px; height: 26px; color: var(--accent); }
.vw-datacard h2 { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
.vw-dc-rows { display: flex; flex-direction: column; gap: 1px; text-align: left; margin-bottom: 18px; }
.vw-dc-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--hairline-soft); font-size: 13.5px; }
.vw-dc-row span { color: var(--muted); }
.vw-dc-row b { font-weight: 500; }

/* Workbook (xlsx) inline preview — one styled table per sheet, stacked */
.vw-wb { display: flex; flex-direction: column; gap: 24px; }
.vw-wb-sheet { display: flex; flex-direction: column; gap: 8px; }
.vw-wb-name { max-width: 860px; margin: 0 auto; width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.cr-viewer-body .vw-wb-name { max-width: 1080px; }
.vw-wb .vw-tablewrap { overflow-x: auto; }