:root {
  --font-main: var(--font-family-body);
  --font-display: var(--font-family-display);
  --bg: var(--color-page-bg);
  --paper: var(--color-surface);
  --paper-soft: var(--color-surface-glass);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --teal: var(--color-accent);
  --teal-deep: var(--color-accent-active);
  --mint: var(--color-accent-secondary);
  --blue: var(--color-blue);
  --green: var(--color-success);
  --yellow: var(--color-warning);
  --brown: #b47a48;
  --red: var(--color-danger);
  --line: var(--color-border);
  --shadow: var(--shadow-modal);
  --shadow-soft: var(--shadow-card);
  --radius-xl: var(--radius-xlarge);
  --radius-lg: var(--radius-large);
  --radius-md: var(--radius-medium);
  --shell-padding: 18px;
  --shell-gap: 18px;
  --splitter-width: 8px;
  --left-pane: clamp(300px, 13vw, 330px);
  --right-pane: clamp(390px, 17vw, 450px);
  --workspace-min: 600px;
  --panel-padding: 20px;
  --topbar-padding: 18px 22px;
  --topbar-height: 76px;
  --topbar-gap: 18px;
  --modal-shell-padding: 18px;
  --modal-header-padding: 20px 24px;
  --modal-body-padding: 24px;
  --tool-gap: 18px;
  --tool-panel-padding: 16px;
  --body-font-size: 15px;
  --page-title-size: 22px;
  --density-select-width: 255px;
  --tool-left-column: 270px;
  --tool-wide-column: 360px;
  --tool-control-min: 340px;
  --tool-map-min: 520px;
  --tool-main-min: 520px;
  --tool-right-min: 420px;
  --forecast-center-min: 560px;
  --forecast-right-min: 430px;
  --pressure-main-min: 650px;
}

:root[data-layout-density="compact"],
:root[data-layout-density="auto"] {
  --shell-padding: 12px;
  --shell-gap: 10px;
  --splitter-width: 6px;
  --left-pane: clamp(245px, 14vw, 270px);
  --right-pane: clamp(330px, 19vw, 370px);
  --workspace-min: 460px;
  --panel-padding: 14px;
  --topbar-padding: 12px 16px;
  --topbar-height: 62px;
  --topbar-gap: 10px;
  --modal-shell-padding: 10px;
  --modal-header-padding: 14px 18px;
  --modal-body-padding: 14px;
  --tool-gap: 12px;
  --tool-panel-padding: 13px;
  --body-font-size: 14px;
  --page-title-size: 20px;
  --density-select-width: 205px;
  --tool-left-column: 245px;
  --tool-wide-column: 320px;
  --tool-control-min: 300px;
  --tool-map-min: 440px;
  --tool-main-min: 460px;
  --tool-right-min: 360px;
  --forecast-center-min: 460px;
  --forecast-right-min: 360px;
  --pressure-main-min: 540px;
}

:root[data-layout-density="spacious"] {
  --shell-padding: 18px;
  --shell-gap: 18px;
  --splitter-width: 8px;
  --left-pane: clamp(300px, 13vw, 330px);
  --right-pane: clamp(390px, 17vw, 450px);
  --workspace-min: 600px;
  --panel-padding: 20px;
  --topbar-padding: 18px 22px;
  --topbar-height: 76px;
  --topbar-gap: 18px;
  --modal-shell-padding: 18px;
  --modal-header-padding: 20px 24px;
  --modal-body-padding: 24px;
  --tool-gap: 18px;
  --tool-panel-padding: 16px;
  --body-font-size: 15px;
  --page-title-size: 22px;
  --density-select-width: 255px;
  --tool-left-column: 270px;
  --tool-wide-column: 360px;
  --tool-control-min: 340px;
  --tool-map-min: 520px;
  --tool-main-min: 520px;
  --tool-right-min: 420px;
  --forecast-center-min: 560px;
  --forecast-right-min: 430px;
  --pressure-main-min: 650px;
}

@media (min-width: 2000px) and (min-height: 1100px) {
  :root[data-layout-density="auto"] {
    --shell-padding: 18px;
    --shell-gap: 18px;
    --splitter-width: 8px;
    --left-pane: clamp(300px, 13vw, 330px);
    --right-pane: clamp(390px, 17vw, 450px);
    --workspace-min: 600px;
    --panel-padding: 20px;
    --topbar-padding: 18px 22px;
    --topbar-height: 76px;
    --topbar-gap: 18px;
    --modal-shell-padding: 18px;
    --modal-header-padding: 20px 24px;
    --modal-body-padding: 24px;
    --tool-gap: 18px;
    --tool-panel-padding: 16px;
    --body-font-size: 15px;
    --page-title-size: 22px;
    --density-select-width: 255px;
    --tool-left-column: 270px;
    --tool-wide-column: 360px;
    --tool-control-min: 340px;
    --tool-map-min: 520px;
    --tool-main-min: 520px;
    --tool-right-min: 420px;
    --forecast-center-min: 560px;
    --forecast-right-min: 430px;
    --pressure-main-min: 650px;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(38, 215, 187, .18), transparent 32%),
    radial-gradient(circle at 85% 22%, rgba(47, 116, 255, .12), transparent 28%),
    linear-gradient(135deg, #f7fbfc 0%, var(--bg) 48%, #e6f0f2 100%);
  overflow: hidden;
  font-size: var(--body-font-size);
  line-height: 1.45;
  letter-spacing: -0.006em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

button, input, select, textarea {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--left-pane) var(--splitter-width) minmax(var(--workspace-min), 1fr) var(--splitter-width) var(--right-pane);
  gap: var(--shell-gap);
  padding: var(--shell-padding);
  height: 100vh;
}

.glass {
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.sidebar, .details-panel, .topbar {
  border-radius: var(--radius-xl);
}

.sidebar {
  padding: var(--panel-padding);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 22px;
}
.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--teal), var(--mint));
  color: var(--color-text-inverse);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0,168,181,.25);
}
.brand-title { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: -.01em; }
.brand-subtitle { color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 2px; }

.soft-label {
  color: var(--teal-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-title {
  margin: 26px 0 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
}
.sidebar-account {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: auto;
  padding: 18px 0 2px;
  background: linear-gradient(
    to bottom,
    rgba(247, 251, 252, 0),
    rgba(247, 251, 252, .96) 24%
  );
}
.sidebar-account-card {
  padding: 10px;
  border: 1px solid rgba(36,67,84,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(33,80,104,.07);
}
.sidebar-account-profile {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 10px;
}
.sidebar-account-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  box-shadow: 0 9px 18px rgba(0,168,181,.18);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
}
.sidebar-account-copy { min-width: 0; }
.sidebar-account-kicker {
  color: var(--teal-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sidebar-account-name {
  margin-top: 2px;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-account-meta {
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-session-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(38,215,187,.12);
}
.sidebar-account-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin-top: 10px;
}
.sidebar-account-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--teal-deep);
  background: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.sidebar-account-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.sidebar-account-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0,168,181,.24);
  background: rgba(226,250,250,.82);
  box-shadow: 0 8px 18px rgba(0,168,181,.08);
}
.sidebar-admin-link {
  color: var(--teal-deep);
  border-color: rgba(0,168,181,.18);
  background: linear-gradient(135deg, rgba(0,168,181,.10), rgba(38,215,187,.10));
}
.sidebar-logout-btn {
  color: #925151;
  border-color: rgba(243,107,107,.16);
}
.sidebar-logout-btn:hover {
  color: #a83e3e;
  border-color: rgba(243,107,107,.28);
  background: rgba(243,107,107,.08);
  box-shadow: 0 8px 18px rgba(243,107,107,.08);
}
.upload-panel { margin-top: 10px; }
.sidebar-case-btn {
  width: 100%;
  margin-top: 9px;
}
.create-case-modal {
  position: relative;
  z-index: 2;
  width: min(460px, calc(100vw - 28px));
  margin: auto;
  padding: 24px;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.create-case-modal h2 { margin: 6px 0 8px; }
.create-case-modal p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.create-case-modal label { display: grid; gap: 6px; }
.create-case-modal label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.create-case-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}
.model-library-modal {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
  margin: auto;
  padding: 24px;
  overflow: auto;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.model-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.model-library-head h2 { margin: 5px 0 5px; }
.model-library-head p,
.model-library-item p,
.model-library-item small { color: var(--muted); }
.model-library-head p { margin: 0; font-size: 12px; }
.model-library-upload {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.4fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--color-surface-soft);
}
.model-library-upload label { display: grid; gap: 5px; min-width: 0; }
.model-library-upload label span { color: var(--muted); font-size: 10px; font-weight: 800; }
.model-library-list { display: grid; gap: 10px; }
.model-library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--color-surface);
}
.model-library-item h3 { margin: 0 0 5px; }
.model-library-item p { margin: 0 0 7px; line-height: 1.45; }
.model-library-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.model-library-empty {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 820px) {
  .model-library-upload { grid-template-columns: 1fr; }
  .model-library-item { align-items: stretch; flex-direction: column; }
}
.upload-drop {
  margin: 10px 0 12px;
  min-height: 132px;
  border: 1px dashed rgba(0,168,181,.38);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(0,168,181,.11), rgba(255,255,255,.55));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.upload-drop:hover, .upload-drop.dragover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 16px 34px rgba(0,168,181,.16);
}
.upload-icon { font-size: 30px; margin-bottom: 6px; }
.upload-title { font-family: var(--font-display); font-weight: 900; }
.upload-note { color: var(--muted); font-size: 12px; margin-top: 4px; }
.select, input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  padding: 11px 12px;
  color: var(--ink);
  font-weight: 600;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.select:focus, input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,168,181,.12); }

.card-library { display: grid; gap: 10px; }
.library-card {
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 22px;
  padding: 13px;
  background: rgba(255,255,255,.82);
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  align-items: center;
  cursor: grab;
  box-shadow: 0 10px 22px rgba(33, 80, 104, .08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.library-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(33, 80, 104, .13); }
.library-card.selected {
  border-color: rgba(0,168,181,.42);
  box-shadow: 0 0 0 3px rgba(0,168,181,.10), 0 16px 32px rgba(33,80,104,.13);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(231,250,248,.90));
}
.library-card:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,168,181,.13);
}
.library-card:active { cursor: grabbing; }
.library-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(0,168,181,.15), rgba(38,215,187,.18));
  font-size: 20px;
}
.library-title { font-family: var(--font-display); font-weight: 900; font-size: 14px; }
.library-sub { color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 2px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.status-ready { background: rgba(71,199,154,.15); color: #168765; }
.status-warning { background: rgba(243,189,79,.18); color: #9b6811; }
.status-blocked { background: rgba(243,107,107,.13); color: #a83e3e; }

.workspace-wrap { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.topbar {
  min-height: var(--topbar-height);
  padding: var(--topbar-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--topbar-gap);
}
.page-title { font-family: var(--font-display); font-size: var(--page-title-size); font-weight: 900; letter-spacing: -.015em; }
.page-subtitle { color: var(--muted); font-size: 13px; margin-top: 4px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.density-control {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.density-control select {
  width: min(var(--density-select-width), 22vw);
  height: 38px;
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 30px 0 10px;
  color: var(--ink);
  background: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.mobile-nav-btn,
.library-add-btn,
.mobile-panel-backdrop {
  display: none;
}
.btn {
  border: 0;
  border-radius: 15px;
  padding: 11px 15px;
  font-weight: 800;
  letter-spacing: -.005em;
  cursor: pointer;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  box-shadow: 0 12px 24px rgba(0,168,181,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(0,168,181,.25); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  color: var(--teal-deep);
  background: rgba(255,255,255,.78);
  box-shadow: none;
  border: 1px solid var(--line);
}
.btn.small { padding: 8px 11px; border-radius: 12px; font-size: 12px; }
.btn.warn { background: linear-gradient(135deg, var(--yellow), #ffdd83); color: #5a3a08; }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.icon-btn {
  border: 0;
  background: rgba(255,255,255,.9);
  width: 36px;
  height: 36px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 22px;
  color: var(--muted);
}

.workspace {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background:
    linear-gradient(rgba(24,54,74,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,54,74,.045) 1px, transparent 1px),
    rgba(255,255,255,.48);
  background-size: 44px 44px;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow);
}
.link-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.link-line {
  stroke: rgba(0,168,181,.55);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 9;
  filter: drop-shadow(0 6px 10px rgba(0,168,181,.18));
}
.node {
  position: absolute;
  user-select: none;
  z-index: 2;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.node.selected { box-shadow: 0 0 0 5px rgba(0,168,181,.14), var(--shadow); }
.pool-node {
  left: 50%; top: 50%;
  width: 245px; min-height: 205px;
  transform: translate(-50%, -50%);
  border-radius: 34px;
  padding: 26px;
  color: var(--color-text-inverse);
  overflow: hidden;
  background: linear-gradient(145deg, #008fa4 0%, #20d1b1 100%);
  box-shadow: 0 24px 70px rgba(0,143,164,.28);
  cursor: pointer;
}
.pool-bg-orb {
  position: absolute;
  right: -42px; top: -42px;
  width: 130px; height: 130px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.pool-kicker { font-size: 11px; font-weight: 900; letter-spacing: .16em; opacity: .75; position: relative; }
.pool-title { font-family: var(--font-display); font-size: 27px; line-height: 1.08; font-weight: 900; letter-spacing: -.01em; margin-top: 12px; position: relative; }
.pool-subtitle { font-size: 13px; line-height: 1.42; opacity: .92; margin-top: 12px; position: relative; }
.badge-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; position: relative; }
.badge {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,.19);
  color: inherit;
}
.badge.dark { color: var(--ink); background: rgba(24,54,74,.08); }

.desk-card {
  width: 230px;
  min-height: 138px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 26px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 42px rgba(29, 65, 84, .12);
  padding: 16px;
  cursor: grab;
  animation: popIn .22s ease both;
}
.desk-card:active { cursor: grabbing; }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.desk-card .top { display: flex; justify-content: space-between; gap: 12px; }
.desk-card .emoji { font-size: 24px; }
.desk-title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.01em; margin-top: 9px; }
.desk-sub { font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 4px; }
.card-actions { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.handle-btn {
  border: 0;
  background: rgba(0,168,181,.10);
  color: var(--teal-deep);
  border-radius: 12px;
  padding: 7px 9px;
  cursor: pointer;
  font-weight: 800;
}
.empty-hint {
  position: absolute;
  left: 28px; bottom: 24px;
  color: rgba(24,54,74,.42);
  font-weight: 700;
  font-size: 14px;
  max-width: 420px;
}

.details-panel {
  padding: var(--panel-padding);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.details-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.details-header h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: 24px; font-weight: 900; letter-spacing: -.015em; }
.details-body { overflow: auto; padding-top: 16px; padding-right: 4px; }
.info-card {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  padding: 15px;
  margin-bottom: 12px;
}
.info-title { font-family: var(--font-display); font-weight: 900; margin-bottom: 9px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 13px; margin: 5px 0; }
.kv span:nth-child(odd) { color: var(--muted); }
.table-wrap { overflow: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--color-surface); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.35; }
th, td { padding: 10px 11px; border-bottom: 1px solid rgba(24,54,74,.08); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
.source-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.src-original { background: var(--green); }
.src-welltest { background: var(--yellow); }
.src-manual { background: var(--brown); }
.src-uploaded { background: #63cbe3; }
.src-unknown { background: #cbd7df; }
.form-grid { display: grid; gap: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.helper { color: var(--muted); font-size: 12px; line-height: 1.42; }
.warning-list, .missing-list { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.missing-list { color: #9a3d3d; }
.workspace-context-readiness {
  border-color: rgba(214, 158, 50, .34);
  background: rgba(255, 248, 225, .84);
}
.workspace-context-readiness.blocked {
  border-color: rgba(196, 76, 76, .34);
  background: rgba(255, 237, 237, .86);
}
.card-description { font-size: 13px; }
.contract-card { padding: 0; overflow: hidden; }
.contract-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 15px;
  text-align: left;
  cursor: pointer;
}
.contract-toggle:hover { background: rgba(0,168,181,.055); }
.contract-toggle small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; font-weight: 700; }
.contract-question {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(0,168,181,.12);
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
}
.contract-chevron { color: var(--muted); font-size: 18px; transition: transform .18s ease; }
.contract-card.expanded .contract-chevron { transform: rotate(180deg); }
.card-contract-content { border-top: 1px solid var(--line); padding: 13px; background: rgba(246,252,252,.68); }
.contract-section-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--teal-deep);
  margin: 3px 2px 8px;
}
.contract-section-title:not(:first-child) { margin-top: 15px; }
.contract-list { display: grid; gap: 7px; }
.contract-row {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(24,54,74,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.76);
}
.contract-status {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  background: rgba(24,54,74,.07);
  color: var(--muted);
}
.contract-status.ready { background: rgba(71,199,154,.17); color: #168765; }
.contract-status.warning { background: rgba(243,189,79,.19); color: #9b6811; }
.contract-status.blocked { background: rgba(243,107,107,.14); color: #a83e3e; }
.contract-status.output { background: rgba(47,116,255,.12); color: #2f74ff; }
.contract-main { min-width: 0; }
.contract-main b { display: block; font-size: 12.5px; line-height: 1.25; }
.contract-main code {
  display: inline-block;
  max-width: 100%;
  margin-top: 3px;
  color: #557181;
  font-size: 10.5px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.contract-note { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.35; margin-top: 4px; }
.contract-meta { display: grid; justify-items: end; gap: 3px; color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.contract-availability { font-weight: 900; }
.contract-availability.ready { color: #168765; }
.contract-availability.warning { color: #9b6811; }
.contract-availability.blocked { color: #a83e3e; }
.contract-footnote { color: var(--muted); font-size: 10.5px; line-height: 1.4; margin: 12px 2px 2px; }
.curve-box {
  height: 190px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,168,181,.08), rgba(255,255,255,.9));
  border: 1px solid var(--line);
  overflow: hidden;
}
.curve-svg { width: 100%; height: 100%; }
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(24,54,74,.94);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: 420px;
  animation: slideUp .22s ease both;
}
.hidden { display: none !important; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1240px) {
  .app-shell { grid-template-columns: 280px minmax(460px, 1fr) 360px; gap: 12px; padding: 12px; }
}

/* --- Workspace pool fullscreen / data layers iteration --- */
.app-shell {
  grid-template-columns: var(--left-pane) var(--splitter-width) minmax(var(--workspace-min), 1fr) var(--splitter-width) var(--right-pane);
}
.splitter {
  align-self: stretch;
  border-radius: 999px;
  cursor: col-resize;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.45);
  transition: background .18s ease, transform .18s ease;
}
.splitter:hover, body.resizing .splitter { background: rgba(0,168,181,.18); transform: scaleX(1.25); }
body.resizing { cursor: col-resize; user-select: none; }
.preview-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 17px;
  margin-bottom: 12px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0,168,181,.13), rgba(38,215,187,.09) 55%, rgba(255,255,255,.8));
  border: 1px solid rgba(255,255,255,.9);
}
.preview-kicker { color: var(--teal-deep); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 900; }
.preview-title { font-family: var(--font-display); font-weight: 900; font-size: 21px; line-height: 1.12; margin-top: 5px; }
.preview-sub { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 7px; max-width: 330px; }
.mini-dashboard, .dashboard-row, .metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.metric-card {
  padding: 13px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 18px rgba(33,80,104,.06);
}
.metric-value { font-family: var(--font-display); font-size: 23px; font-weight: 900; letter-spacing: -.02em; }
.metric-label { color: var(--muted); font-size: 11px; margin-top: 2px; font-weight: 800; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.problem-chip {
  margin: 8px 0;
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(243,189,79,.13);
  border: 1px solid rgba(243,189,79,.22);
  display: grid;
  gap: 3px;
}
.problem-chip b { font-size: 12.5px; }
.problem-chip span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.problem-chip.blocked { background: rgba(243,107,107,.12); border-color: rgba(243,107,107,.22); }
.problem-chip.info { background: rgba(47,116,255,.09); border-color: rgba(47,116,255,.16); }
.layer-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  margin: 7px 0;
  box-shadow: none;
  color: var(--ink);
  text-align: left;
  font-size: 12px;
}
.layer-badge b { flex:1; min-width:0; overflow:hidden; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.layer-badge em {
  flex:0 0 auto;
  color:var(--muted);
  background:transparent;
  font-style:normal;
  font-size:10px;
  font-weight:800;
}
.layer-badge-icon {
  flex:0 0 auto;
  width:18px;
  text-align:center;
  font-size:12px;
  line-height:1;
}
.layer-badge.original { border-color: rgba(71,199,154,.28); background: rgba(71,199,154,.08); }
.layer-badge.uploaded { border-color: rgba(73,181,213,.30); background: rgba(99,203,227,.11); }
.layer-badge.manual { border-color: rgba(180,122,72,.32); background: rgba(180,122,72,.10); }
.layer-badge.calculated { border-color: rgba(112,80,184,.30); background: rgba(112,80,184,.10); }
.layer-badge.data-state-layer-link { cursor:pointer; transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.layer-badge.data-state-layer-link:hover {
  transform:translateY(-1px);
  border-color:rgba(0,142,153,.32);
  box-shadow:0 2px 6px rgba(33,80,104,.05);
}
.card-surface {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(33,80,104,.07);
  margin-bottom: 14px;
}
.two-col-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:14px; }
.overview-grid { display:grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr); gap:16px; }
.overview-main h3 { font-family: var(--font-display); font-size: 30px; margin: 4px 0 4px; letter-spacing: -.02em; }
.overview-caption { color: var(--teal-deep); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.overview-status { color: var(--muted); font-weight: 800; margin-bottom: 12px; }
.overview-map-wrap { position: relative; }
.overview-side { display:grid; gap:14px; align-content:start; }
.balance-list { display:grid; gap:9px; margin: 8px 0 10px; }
.balance-list div { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px; }
.balance-list b { color:var(--ink); font-size:15px; }
.view-toggle {
  display:inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(24,54,74,.07);
  gap:3px;
}
.view-toggle button {
  border:0; border-radius:999px; padding:7px 11px; background:transparent; color:var(--muted); cursor:pointer; font-weight:900; font-size:12px;
}
.view-toggle button.active { background:white; color:var(--teal-deep); box-shadow: 0 6px 12px rgba(33,80,104,.08); }
.donut-wrap { display:grid; grid-template-columns: 150px 1fr; gap:8px; align-items:center; }
.donut-svg { width:150px; height:150px; }
.donut-legend { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:800; }
.donut-legend div { display:flex; align-items:center; gap:7px; }
.donut-legend span { width:10px; height:10px; border-radius:999px; display:inline-block; }
.mini-bars { width:100%; height:96px; display:block; }
.problems-inline { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.layer-stack.big { display:grid; gap:10px; }
.layer-card {
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
}
.layer-title { font-family:var(--font-display); font-weight:900; display:flex; gap:8px; align-items:center; }
.layer-meta { text-align:right; color:var(--muted); font-size:12px; display:grid; gap:4px; }
.layer-meta b { color:var(--ink); }
.timeline { display:grid; gap:10px; }
.timeline-item { display:grid; grid-template-columns: 135px 1fr; gap:8px 14px; padding:12px; border-radius:16px; background:rgba(255,255,255,.68); border:1px solid var(--line); }
.timeline-item span { color:var(--muted); font-size:11px; font-weight:800; }
.timeline-item b { font-size:13px; }
.timeline-item em { grid-column:2; color:var(--muted); font-style:normal; font-size:12px; }
.pool-journal-grid {
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:16px;
  align-items:start;
}
.pool-journal-column { min-width:0; margin-bottom:0; }
.journal-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.journal-heading .info-title { margin-top:3px; }
.journal-counter {
  min-width:36px;
  height:36px;
  padding:0 10px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(0,174,184,.09);
  color:var(--teal-deep);
  font-weight:900;
}
.journal-timeline { margin-top:14px; max-height:480px; overflow:auto; padding-right:4px; }
.journal-empty {
  margin-top:14px;
  padding:22px;
  border:1px dashed var(--line);
  border-radius:18px;
  color:var(--muted);
  text-align:center;
}
.journal-layers-details { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.journal-layers-details summary {
  cursor:pointer;
  color:var(--ink);
  font-weight:900;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.journal-layers-details summary::-webkit-details-marker { display:none; }
.journal-layers-details summary span { color:var(--teal-deep); }
.journal-layers-details .layer-stack { margin-top:12px; }
@media (max-width: 1100px) {
  .pool-journal-grid { grid-template-columns:1fr; }
}
.floating-island-placeholder { height:180px; position:relative; display:grid; place-items:center; overflow:hidden; }
.island-top { width:260px; height:110px; border-radius:48% 52% 46% 54%; background:linear-gradient(135deg,#d8fbf1,#b6e6f2); transform: rotateX(58deg) rotateZ(-10deg); box-shadow:0 28px 45px rgba(0,168,181,.18); border:1px solid rgba(255,255,255,.9); }
.island-shadow { position:absolute; width:230px; height:35px; border-radius:50%; background:rgba(24,54,74,.10); filter:blur(10px); bottom:28px; }
.modal-shell {
  position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:22px;
}
.modal-backdrop { position:absolute; inset:0; background:rgba(12,34,48,.32); backdrop-filter: blur(8px); }
.pool-modal {
  position:relative; width:min(1500px,96vw); height:min(900px,94vh); border-radius:34px; display:grid; grid-template-rows:auto 1fr; overflow:hidden;
}
.pool-modal-header { padding:20px 24px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-bottom:1px solid var(--line); }
.pool-modal-header h2 { font-family:var(--font-display); margin:5px 0 0; font-size:28px; font-weight:900; letter-spacing:-.02em; }
.modal-subtitle { color:var(--muted); font-size:13px; margin-top:5px; }
.modal-actions { display:flex; align-items:center; gap:10px; }
.pool-modal-layout { display:grid; grid-template-columns: 178px 1fr; min-height:0; }
.pool-modal-tabs { padding:18px; border-right:1px solid var(--line); overflow:auto; display:grid; align-content:start; gap:8px; }
.pool-modal-tab { border:0; text-align:left; border-radius:16px; padding:11px 12px; background:transparent; color:var(--muted); font-weight:900; cursor:pointer; }
.pool-modal-tab:hover { background:rgba(0,168,181,.08); color:var(--teal-deep); }
.pool-modal-tab.active { background:linear-gradient(135deg, rgba(0,168,181,.15), rgba(38,215,187,.12)); color:var(--teal-deep); }
.pool-modal-body { overflow:auto; padding:20px; min-width:0; }
.problems-drawer { position:fixed; right:24px; top:24px; bottom:24px; width:min(430px, calc(100vw - 48px)); z-index:1250; border-radius:30px; padding:18px; display:flex; flex-direction:column; }
.drawer-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--line); }
.drawer-header h3 { margin:5px 0 0; font-family:var(--font-display); font-size:22px; }
.drawer-body { overflow:auto; padding-top:14px; }
.problem-card { padding:14px; border-radius:20px; margin-bottom:10px; background:rgba(243,189,79,.12); border:1px solid rgba(243,189,79,.24); }
.problem-card.blocked { background:rgba(243,107,107,.12); border-color:rgba(243,107,107,.24); }
.problem-card.info { background:rgba(47,116,255,.08); border-color:rgba(47,116,255,.16); }
.problem-top { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
.problem-top span { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.modal-open .workspace, .modal-open .sidebar, .modal-open .details-panel { filter: saturate(.9); }
@media (max-width: 1240px) {
  .app-shell { grid-template-columns: 280px 6px minmax(420px, 1fr) 6px 360px; gap:10px; padding:12px; }
  .overview-grid, .two-col-grid { grid-template-columns: 1fr; }
  .pool-modal-layout { grid-template-columns: 1fr; }
  .pool-modal-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); border-right:0; border-bottom:1px solid var(--line); }
}
.src-calculated { background: #7050b8; }

/* --- Workspace mechanics + fullscreen polish iteration --- */
.link-line {
  stroke: rgba(0,168,181,.46);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: none;
  filter: drop-shadow(0 5px 8px rgba(0,168,181,.16));
}
.node {
  transition: left .18s cubic-bezier(.2,.8,.2,1), top .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.node.dragging {
  transition: box-shadow .12s ease, transform .12s ease;
  transform: translateY(-2px) scale(1.015);
  z-index: 8;
}
.pool-node { cursor: grab; }
.pool-node:active { cursor: grabbing; }
.pool-node.dragging { transform: translateY(-2px) scale(1.012) !important; }
.desk-card.dragging { cursor: grabbing; }

.chart-svg, .curve-svg {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.chart-with-axes text, .curve-svg text {
  font-family: var(--font-main);
  paint-order: stroke;
  stroke: rgba(255,255,255,.65);
  stroke-width: 2px;
  stroke-linejoin: round;
}
.result-callout {
  margin: 12px 0;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(71,199,154,.12);
  border: 1px solid rgba(71,199,154,.20);
  color: #168765;
  font-weight: 800;
  font-size: 12px;
}
.result-callout.muted {
  background: rgba(24,54,74,.055);
  border-color: rgba(24,54,74,.09);
  color: var(--muted);
}

.modal-shell {
  inset: 0;
  z-index: 45;
  display: block;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 12%, rgba(38, 215, 187, .16), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(47, 116, 255, .10), transparent 30%),
    linear-gradient(135deg, #f7fbfc 0%, var(--bg) 52%, #e7f1f4 100%);
  animation: workspaceOpen .22s ease both;
}
.modal-backdrop { display: none; }
.pool-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 34px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 34px 90px rgba(27, 63, 82, .24);
  backdrop-filter: blur(18px);
}
.pool-modal-header {
  min-height: 88px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(232,250,247,.86));
}
.pool-modal-header h2 { font-size: 31px; }
.pool-modal-body { padding: 24px; }
.pool-modal-tabs { background: rgba(255,255,255,.38); }
body.modal-open .app-shell {
  opacity: .08;
  transform: scale(.985);
  transition: opacity .18s ease, transform .18s ease;
}
@keyframes workspaceOpen {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- History graph selector + clean map layout iteration --- */
.history-workbench { overflow: hidden; }
.history-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, .42fr) minmax(420px, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}
.history-single-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
}
.history-multi-controls {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.4fr);
  gap: 12px;
  margin-top: 14px;
}
.mini-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 0 6px 2px;
}
.check-panel {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.56);
  border-radius: 18px;
  padding: 12px;
  min-width: 0;
}
.check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
  padding-right: 2px;
}
.check-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  user-select: none;
}
.check-pill input { width: auto; margin: 0; accent-color: var(--teal); }
.history-charts { margin-top: 16px; }
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.chart-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  padding: 10px;
  overflow: hidden;
}
.chart-card.wide { padding: 12px; }
.chart-wrap { min-width: 0; }
.chart-card.wide .chart-wrap {
  height: clamp(280px, 42vh, 390px);
}
.chart-card:not(.wide) .chart-wrap {
  height: 250px;
}
.chart-card.wide {
  max-height: calc(42vh + 118px);
}
.history-charts {
  max-width: 100%;
  overflow: hidden;
}
.history-charts .chart-card {
  box-sizing: border-box;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin: 8px 8px 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.chart-legend div { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend span { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }

.chart-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,168,181,.08);
  border: 1px solid rgba(0,168,181,.14);
  color: #2b6574;
  font-size: 12px;
  font-weight: 850;
}
.chart-legend em {
  margin-left: 5px;
  color: #8aa0ad;
  font-style: normal;
  font-size: 11px;
}
.maps-workbench { overflow: hidden; }
.map-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 420px) auto auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}
.map-view { margin-top: 12px; }
.map-view .svg-box {
  height: min(56vh, 560px) !important;
  max-height: 560px;
  overflow: hidden;
  border-radius: 22px;
}
.reservoir-svg { width: 100%; height: 100%; display: block; }
.floating-island-placeholder.big { height: min(56vh, 560px); min-height: 360px; }
@media (max-width: 1240px) {
  .history-toolbar, .history-multi-controls { grid-template-columns: 1fr; }
  .history-single-controls, .chart-grid { grid-template-columns: 1fr; }
  .map-toolbar { grid-template-columns: 1fr; align-items: stretch; }
}


/* --- History graph scale compact pass --- */
.history-workbench { padding-bottom: 10px; }
.chart-card.wide { padding: 10px 12px; }
.chart-card.wide .chart-legend { max-height: 78px; overflow: auto; }
.chart-legend { line-height: 1.25; }
@media (max-height: 820px) {
  .chart-card.wide .chart-wrap { height: 300px; }
  .chart-card:not(.wide) .chart-wrap { height: 220px; }
}

/* --- 2D map fit + pseudo 3D island pass --- */
.overview-map-wrap .svg-box {
  border-radius: 22px;
  overflow: hidden;
}
.overview-map-view.hidden { display: none; }
.overview-view-toggle {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 24px rgba(33,80,104,.10);
}
.reservoir-map-box,
.island-svg-box {
  background: linear-gradient(145deg, rgba(255,255,255,.60), rgba(233,251,247,.45));
}
.island-svg .island-well text {
  paint-order: stroke;
  stroke: rgba(255,255,255,.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.map-view .island-svg-box {
  height: min(56vh, 560px) !important;
  max-height: 560px;
  min-height: 360px;
  overflow: hidden;
  border-radius: 22px;
}
.map-view.hidden { display: none; }
.map-view.active.hidden { display: none; }
.map-view.active { display: block; }
.map-view .reservoir-map-box svg,
.map-view .island-svg-box svg,
.overview-map-wrap .reservoir-map-box svg,
.overview-map-wrap .island-svg-box svg {
  max-width: 100%;
}

/* --- Map zoom/pan + more premium pseudo-3D island --- */
.panzoom-map {
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.panzoom-map.dragging { cursor: grabbing; }
.panzoom-map svg { display: block; width: 100%; height: 100%; }
.zoom-layer { transform-box: fill-box; transform-origin: 0 0; transition: transform .08s linear; }
.panzoom-map.dragging .zoom-layer { transition: none; }
.map-zoom-hint {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 6;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(24,54,74,.08);
  color: #6e8494;
  font-size: 11px;
  font-weight: 750;
  opacity: .0;
  transform: translateY(-3px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.panzoom-map:hover .map-zoom-hint,
.panzoom-map.is-zoomed .map-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}
.map-reset {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 7;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(24,54,74,.09);
  color: #0a8f9d;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.panzoom-map.is-zoomed .map-reset,
.panzoom-map:hover .map-reset {
  opacity: 1;
  transform: translateY(0);
}
.map-reset:hover { background: var(--color-surface); }
.island-svg-box {
  background:
    radial-gradient(circle at 28% 22%, rgba(133,232,221,.18), transparent 28%),
    radial-gradient(circle at 72% 28%, rgba(57,190,207,.13), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.66), rgba(231,250,247,.46));
}
.island-svg .island-layer path {
  shape-rendering: geometricPrecision;
}
.island-svg .island-well text {
  paint-order: stroke;
  stroke: rgba(255,255,255,.94);
  stroke-width: 3.4px;
  stroke-linejoin: round;
  letter-spacing: -.02em;
}
.overview-map-wrap .island-svg-box {
  height: 360px !important;
}
.overview-map-wrap .map-zoom-hint,
.overview-map-wrap .map-reset {
  display: none;
}

/* --- True interactive 3D reservoir plate --- */
.reservoir-3d-viewer {
  position: relative;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.98), rgba(255,255,255,.55) 32%, transparent 60%),
    radial-gradient(circle at 72% 20%, rgba(83, 214, 211, .16), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(221, 248, 246, .60));
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 18px 42px rgba(29, 83, 101, .08);
}
.reservoir-3d-viewer.compact { min-height: 210px; }
.reservoir-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.reservoir-3d-viewer.dragging .reservoir-3d-canvas { cursor: grabbing; }
.reservoir-3d-viewer .three-reset {
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.reservoir-3d-viewer:hover .three-reset,
.reservoir-3d-viewer:hover .three-hint { opacity: 1; }
.reservoir-3d-viewer .three-hint {
  opacity: .0;
  transition: opacity .16s ease;
}
.three-badge {
  position: absolute;
  left: 16px;
  top: 14px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.9);
  color: var(--teal-deep);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(19, 74, 92, .08);
}
.overview-map-wrap .reservoir-3d-viewer {
  height: 340px;
  min-height: 300px;
}
.map-view .reservoir-3d-viewer {
  height: min(56vh, 560px);
  min-height: 390px;
}
.overview-map-wrap .reservoir-3d-viewer .three-reset,
.overview-map-wrap .reservoir-3d-viewer .three-hint {
  display: none;
}

/* --- Overview 3D composition: square hero card + calmer layout --- */
.pool-modal-body:has(.overview-grid) {
  padding-top: 18px;
}
.overview-grid {
  grid-template-columns: minmax(440px, 760px) minmax(300px, 420px);
  justify-content: center;
  align-items: start;
  gap: 18px;
  max-width: 1220px;
  margin: 0 auto 14px;
}
.overview-main.card-surface {
  min-height: unset;
  padding: 20px;
}
.overview-map-wrap {
  position: relative;
  width: min(100%, 520px);
  height: clamp(340px, min(42vw, 48vh), 520px);
  max-height: 520px;
  margin: 18px auto 8px;
  overflow: hidden;
  border-radius: 28px;
  display: block;
}
.overview-map-wrap .overview-map-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.overview-map-wrap .reservoir-3d-viewer,
.overview-map-wrap .reservoir-map-box,
.overview-map-wrap .island-svg-box,
.overview-map-wrap .svg-box {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
.overview-map-wrap .reservoir-3d-viewer {
  border-radius: 28px;
}
.overview-side .card-surface {
  margin-bottom: 0;
}
.dashboard-row {
  max-width: 1220px;
  margin: 0 auto 12px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.pool-modal-body > .card-surface {
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1180px) {
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
  }
  .overview-map-wrap {
    width: min(100%, 500px);
    height: clamp(330px, 58vw, 500px);
  }
  .dashboard-row {
    max-width: 820px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 820px) and (min-width: 1181px) {
  .overview-map-wrap {
    width: min(100%, 450px);
    height: min(450px, 44vh);
  }
  .overview-main h3 {
    font-size: 26px;
  }
}

.card-mode-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 168, 181, .12);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(235, 255, 253, .92), rgba(255, 255, 255, .78));
  box-shadow: 0 12px 32px rgba(24, 54, 74, .06);
}
.mode-pill {
  font-weight: 850;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7c92a0;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(24, 54, 74, .08);
}
.mode-pill.active {
  color: #008fa1;
  background: rgba(207, 249, 246, .88);
  border-color: rgba(0, 168, 181, .18);
}
.mode-line { flex: 1; height: 1px; background: rgba(0, 168, 181, .14); }
.card-mode-strip .btn { margin-left: auto; }

.tool-card-panel { overflow: visible; }
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.tool-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 850;
  color: #6c8291;
  letter-spacing: .02em;
}
.tool-grid input,
.tool-grid select {
  border: 1px solid rgba(24,54,74,.11);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  background: rgba(255,255,255,.9);
  color: #18364a;
  font-weight: 750;
  min-width: 0;
}
.tool-grid input:focus,
.tool-grid select:focus {
  border-color: rgba(0, 168, 181, .55);
  box-shadow: 0 0 0 4px rgba(0, 168, 181, .10);
}
.tool-result-box {
  min-height: 270px;
  overflow: hidden;
}
.tool-result-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.tool-result-top span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(233, 250, 248, .9);
  color: #5e7585;
  font-size: 11px;
  font-weight: 750;
}
@media (max-width: 900px) {
  .tool-grid { grid-template-columns: 1fr; }
  .card-mode-strip { flex-wrap: wrap; }
  .card-mode-strip .btn { margin-left: 0; }
}

/* --- Card fullscreen / expert-like cards iteration --- */
.compact-actions .handle-btn {
  width: 34px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 14px;
}
.card-preview-hero h3 {
  margin: 4px 0 5px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.full-width { width: 100%; }
.summary-grid.mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.metric-mini {
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(24,54,74,.07);
  padding: 11px 12px;
  min-width: 0;
}
.metric-mini b {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.05;
  margin-bottom: 4px;
}
.metric-mini span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.card-modal .pool-modal-header {
  min-height: 92px;
}
.card-modal-body {
  overflow: auto;
  min-height: 0;
  padding: 20px;
}
.card-tool-fullscreen {
  height: 100%;
  min-height: 0;
  display: grid;
  gap: 18px;
}
.welltest-fullscreen {
  grid-template-columns: 270px minmax(340px, 460px) minmax(520px, 1fr);
}
.two-panel-tool {
  grid-template-columns: 360px minmax(520px, 1fr);
  align-items: start;
}
.property-tool {
  grid-template-columns: 270px minmax(360px, 460px) minmax(520px, 1fr);
}
.tool-left-panel,
.tool-center-panel,
.tool-right-panel {
  min-width: 0;
  min-height: 0;
}
.tool-left-panel {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 18px 42px rgba(29,65,84,.08);
  overflow: auto;
}
.tool-section-title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 10px;
}
.tool-well-list {
  display: grid;
  gap: 9px;
}
.well-pick {
  text-align: left;
  border: 1px solid rgba(24,54,74,.08);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 12px 13px;
  cursor: pointer;
  display: grid;
  gap: 3px;
  color: var(--ink);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.well-pick:hover { transform: translateY(-1px); border-color: rgba(0,168,181,.24); }
.well-pick.active {
  background: linear-gradient(135deg, rgba(0,168,181,.15), rgba(38,215,187,.13));
  border-color: rgba(0,168,181,.28);
}
.well-pick b { font-family: var(--font-display); font-size: 17px; }
.well-pick span { color: var(--muted); font-size: 11px; font-weight: 800; }
.empty-tool-box {
  padding: 14px;
  border-radius: 18px;
  border: 1px dashed rgba(0,168,181,.24);
  background: rgba(235,255,253,.58);
  color: var(--muted);
  font-weight: 750;
  font-size: 12px;
  line-height: 1.45;
}
.tool-kpi-list {
  display: grid;
  gap: 8px;
}
.tool-kpi-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(24,54,74,.07);
}
.tool-kpi-list span { color: var(--muted); font-size: 12px; font-weight: 850; }
.tool-kpi-list b { font-family: var(--font-display); }
.tool-control-card { margin-bottom: 0; }
.expert-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.slider-stack {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.slider-stack label {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.slider-stack input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}
.tool-actions-row { margin-top: 12px; }
.plot-card {
  height: 100%;
  min-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr;
}
.expert-plot {
  height: auto;
  min-height: 460px;
  background: linear-gradient(180deg, rgba(0,168,181,.055), rgba(255,255,255,.96));
}
.table-wrap.compact { max-height: 70vh; }
.card-modal-shell .modal-backdrop { display: none; }
.card-modal-shell {
  background:
    radial-gradient(circle at 10% 14%, rgba(38, 215, 187, .13), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(47, 116, 255, .08), transparent 28%),
    linear-gradient(135deg, #f8fcfd 0%, #eef8f8 100%);
}
.card-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 34px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 34px 90px rgba(27, 63, 82, .22);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
@media (max-width: 1300px) {
  .welltest-fullscreen, .property-tool { grid-template-columns: 250px 1fr; }
  .welltest-fullscreen .tool-right-panel,
  .property-tool .tool-right-panel { grid-column: 1 / -1; }
  .plot-card { min-height: 420px; }
}
@media (max-width: 900px) {
  .welltest-fullscreen, .two-panel-tool, .property-tool { grid-template-columns: 1fr; }
  .summary-grid.mini { grid-template-columns: 1fr; }
}

/* WellTest expert-like parameter panel */
.expert-welltest-tool{
  grid-template-columns: 270px minmax(520px, 1fr) minmax(420px, 0.9fr);
  align-items: start;
}

/* Desktop-tool prototypes: platform-native shells without backend wiring. */
.prototype-tool {
  grid-template-columns: 270px minmax(430px, .9fr) minmax(500px, 1.1fr);
  align-items: stretch;
}
.prototype-tool .tool-left-panel,
.prototype-tool .card-surface {
  height: 100%;
}
.prototype-source-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prototype-badge,
.prototype-stage {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  color: #695124;
  background: rgba(248, 196, 82, .18);
  border: 1px solid rgba(215, 156, 34, .22);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.prototype-stage {
  color: #087f8a;
  background: rgba(0, 168, 181, .1);
  border-color: rgba(0, 168, 181, .16);
  letter-spacing: 0;
}
.prototype-badge.ready {
  color: #08786f;
  background: rgba(31, 193, 161, .12);
  border-color: rgba(31, 193, 161, .24);
}
.prototype-section-gap { margin-top: 4px; }
.prototype-selectors {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}
.prototype-note { margin-top: auto; }
.prototype-settings-card,
.prototype-result-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 560px;
}
.prototype-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.prototype-tabs {
  flex-wrap: wrap;
}
.prototype-tabs .bf-tab {
  min-width: 0;
}
.prototype-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}
.prototype-field {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(246, 251, 252, .84);
  border: 1px solid rgba(24, 54, 74, .08);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}
.prototype-field span {
  min-height: 18px;
}
.prototype-field em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}
.prototype-field input,
.prototype-field select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(0, 168, 181, .15);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font: inherit;
}
.prototype-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(246, 251, 252, .84);
  border: 1px solid rgba(24, 54, 74, .08);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}
.prototype-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}
.prototype-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(24, 54, 74, .08);
}
.prototype-actions span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.prototype-map,
.prototype-chart,
.prototype-matrix,
.prototype-table {
  min-height: 330px;
  border-radius: 22px;
  border: 1px solid rgba(0, 168, 181, .14);
  background: linear-gradient(145deg, rgba(235, 250, 249, .88), rgba(248, 251, 253, .96));
  overflow: hidden;
}
.prototype-map {
  position: relative;
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(rgba(27, 96, 111, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 96, 111, .045) 1px, transparent 1px),
    linear-gradient(145deg, rgba(235, 250, 249, .88), rgba(248, 251, 253, .96));
  background-size: 28px 28px, 28px 28px, auto;
}
.prototype-map-contour {
  width: 58%;
  height: 68%;
  border: 3px solid rgba(0, 168, 181, .78);
  border-radius: 45% 55% 58% 42% / 51% 41% 59% 49%;
  background:
    radial-gradient(circle at 48% 58%, rgba(45, 116, 255, .28), transparent 18%),
    radial-gradient(circle at 54% 45%, rgba(45, 204, 166, .25), transparent 33%),
    rgba(31, 193, 185, .08);
}
.prototype-map > span {
  position: absolute;
  left: 18px;
  bottom: 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.prototype-map .well {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid #117c91;
  box-shadow: 0 0 0 4px rgba(17, 124, 145, .12);
}
.prototype-map .w1 { left: 44%; top: 38%; }
.prototype-map .w2 { left: 55%; top: 53%; }
.prototype-map .w3 { left: 39%; top: 62%; }
.prototype-map .w4 { left: 59%; top: 32%; }
.prototype-chart {
  display: grid;
  place-items: center;
  padding: 20px;
}
.prototype-chart svg { width: 100%; height: 100%; min-height: 270px; }
.prototype-chart .area { fill: url(#prototypeArea); }
.prototype-chart .line {
  fill: none;
  stroke: #00a8b5;
  stroke-width: 5;
  stroke-linecap: round;
}
.integrated-chart-title {
  width: 100%;
  color: var(--ink);
  font-weight: 850;
  font-size: 12px;
}
.prototype-matrix {
  display: grid;
  grid-template-columns: repeat(6, minmax(22px, 1fr));
  gap: 5px;
  padding: 30px;
}
.prototype-matrix i {
  border-radius: 7px;
  background: #00a8b5;
}
.prototype-table {
  display: grid;
  align-content: start;
  padding: 18px;
}
.prototype-table > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 10px;
  border-bottom: 1px solid rgba(24, 54, 74, .08);
}
.integrated-result-table {
  overflow: auto;
  min-height: 330px;
}
.integrated-result-table > div {
  grid-template-columns: repeat(var(--integrated-columns, 2), minmax(120px, 1fr));
  min-width: max-content;
}
.integrated-result-table > div > * {
  min-width: 120px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prototype-result-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.prototype-result-kpis > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(24,54,74,.07);
}
.prototype-result-kpis span { color: var(--muted); font-size: 10px; font-weight: 800; }
.prototype-result-kpis b { color: var(--ink); font-family: var(--font-display); font-size: 19px; }
@media (max-width: 1450px) {
  .prototype-tool { grid-template-columns: 250px minmax(0, 1fr); }
  .prototype-tool .tool-right-panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .prototype-tool { grid-template-columns: 1fr; }
  .prototype-tool .tool-right-panel { grid-column: auto; }
  .prototype-field-grid,
  .prototype-result-kpis { grid-template-columns: 1fr; }
}
.source-status-card{
  border-radius: 18px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 30px rgba(10,60,80,.06);
}
.source-status-card b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}
.source-status-card span{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.source-status-card.ok{border-color:rgba(71,199,154,.34);background:rgba(232,252,244,.82)}
.source-status-card.missing{border-color:rgba(243,107,107,.24);background:rgba(255,247,247,.82)}
.standalone-load-box{margin-top:16px}
.file-mini-drop{display:block;border:1px dashed rgba(0,168,181,.35);border-radius:18px;padding:15px;background:rgba(245,253,253,.8);cursor:pointer;text-align:center}
.file-mini-drop input{display:none}
.file-mini-drop span{display:block;color:var(--ink);font-weight:900;font-size:12px}
.file-mini-drop em{display:block;color:var(--muted);font-style:normal;font-size:11px;margin-top:4px}
.wt-completeness{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wt-completeness div{border-radius:16px;background:rgba(255,255,255,.8);border:1px solid var(--line);padding:10px 12px}
.wt-completeness b{display:block;color:var(--ink);font-size:18px;line-height:1.1}
.wt-completeness span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:900;margin-top:4px}
.wt-params-panel .tool-control-card{padding:18px}
.wt-main-well-select{display:grid;gap:7px;margin:12px 0 16px;color:var(--ink);font-weight:900;font-size:12px}
.wt-param-group{border-top:1px solid rgba(197,218,225,.55);padding-top:14px;margin-top:14px}
.wt-param-grid{display:grid;grid-template-columns:repeat(2, minmax(210px, 1fr));gap:10px}
.wt-param-field{position:relative;display:grid;gap:6px;border:1px solid var(--line);border-radius:16px;padding:10px;background:rgba(255,255,255,.74);transition:.15s ease}
.wt-param-field > span{color:var(--ink);font-size:12px;font-weight:900;padding-right:92px;line-height:1.25}
.wt-param-field > span em{font-style:normal;color:var(--muted);font-size:10px;font-weight:800;margin-left:4px}
.wt-param-field.ok{border-color:rgba(71,199,154,.34);background:rgba(245,255,251,.92)}
.wt-param-field.missing{border-color:rgba(243,107,107,.28);background:rgba(255,249,249,.92)}
.wt-param-field.manual{border-color:rgba(243,189,79,.48);background:rgba(255,252,242,.96)}
.param-source{position:absolute;right:9px;top:8px;border-radius:999px;padding:4px 8px;font-size:9.5px;font-weight:1000;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.param-source.ok{color:#159269;background:rgba(71,199,154,.16)}
.param-source.missing{color:#c85353;background:rgba(243,107,107,.12)}
.param-source.manual{color:#9a6b20;background:rgba(243,189,79,.18)}
.wt-param-field input,.wt-param-field select,.wt-comment-row input{height:36px;border-radius:12px;border:1px solid rgba(197,218,225,.85);padding:0 10px;font-weight:850;color:var(--ink);background:white;outline:none}
.wt-param-field input:focus,.wt-param-field select:focus,.wt-comment-row input:focus{border-color:rgba(0,168,181,.55);box-shadow:0 0 0 4px rgba(0,168,181,.1)}
.expert-sliders{margin-top:16px}
.wt-comment-row{display:grid;gap:7px;margin-top:14px;color:var(--ink);font-weight:900;font-size:12px}
@media (max-width: 1450px){
  .expert-welltest-tool{grid-template-columns:250px minmax(450px,1fr);}
  .expert-welltest-tool .tool-right-panel{grid-column:1 / -1;}
  .wt-param-grid{grid-template-columns:repeat(2,minmax(180px,1fr));}
}
@media (max-width: 1050px){
  .expert-welltest-tool{grid-template-columns:1fr;}
  .wt-param-grid{grid-template-columns:1fr;}
}

/* WellTest parameter tabs */
.wt-param-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px;
  margin:14px 0 12px;
  border:1px solid rgba(197,218,225,.6);
  border-radius:22px;
  background:rgba(248,253,253,.78);
}
.wt-param-tab{
  border:1px solid rgba(197,218,225,.8);
  background:white;
  border-radius:999px;
  padding:9px 11px;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.16s ease;
}
.wt-param-tab:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(38,94,111,.08)}
.wt-param-tab.active{background:linear-gradient(135deg, rgba(214,251,248,.98), rgba(223,255,248,.98));border-color:rgba(0,168,181,.34);color:#067c8c;box-shadow:0 10px 24px rgba(0,168,181,.10)}
.wt-param-tab em{font-style:normal;border-radius:999px;padding:3px 7px;font-size:10px;background:rgba(142,164,179,.12);color:var(--muted)}
.wt-param-tab em.ok{background:rgba(71,199,154,.16);color:#15986f}
.wt-param-tab em.warn{background:rgba(243,107,107,.12);color:#c95050}
.wt-param-group.active-group{border-top:0;margin-top:0;padding-top:0}
.wt-param-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:4px 0 12px}
.helper.compact{font-size:12px;margin-top:4px;line-height:1.35}
.wt-param-legend{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:220px}
.wt-param-legend span{border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900;white-space:nowrap}
.wt-param-legend .ok{background:rgba(71,199,154,.14);color:#15986f}
.wt-param-legend .missing{background:rgba(243,107,107,.10);color:#c95050}
.wt-param-legend .manual{background:rgba(243,189,79,.15);color:#aa7a14}
.wt-param-field{min-height:86px}
@media(max-width:1100px){.wt-param-group-head{display:block}.wt-param-legend{justify-content:flex-start;min-width:0;margin-top:8px}.wt-param-tab{font-size:11px;padding:8px 9px}}

/* WellTest design/analysis split */
.wt-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
  padding:5px;
  border-radius:18px;
  background:rgba(221,246,240,.72);
  border:1px solid rgba(39,150,137,.16);
}
.wt-mode-tab{
  border:0;
  border-radius:14px;
  padding:10px 12px;
  font-weight:850;
  color:#547069;
  background:transparent;
  cursor:pointer;
  transition:.16s ease;
}
.wt-mode-tab:hover{background:rgba(255,255,255,.55); color:#174b48;}
.wt-mode-tab.active{
  background:linear-gradient(135deg,#ffffff,#e7fbf5);
  color:#0e6b65;
  box-shadow:0 10px 24px rgba(30,118,104,.12);
}
.wt-no-curve-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.58);
  border:1px dashed rgba(91,126,120,.22);
}
.mini-kpis{margin-top:8px;}
.wt-param-field.ok .param-source.ok[title*="КВД"],
.wt-param-field.ok .param-source.ok[title*="фактической"]{
  background:#e8fff6;
  color:#11725f;
}


/* WellTest fit sliders: sliders are global controls for K/Skin and work on any parameter tab. */
.wt-fit-sliders{
  margin-top:18px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,255,253,.88));
  border:1px solid rgba(0,168,181,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.wt-fit-sliders label{
  grid-template-columns: minmax(96px, 140px) 1fr;
  gap:14px;
}
.wt-fit-sliders .slider-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--ink);
}
.wt-fit-sliders .slider-head em{
  font-style:normal;
  color:var(--muted);
  font-weight:950;
}
.wt-fit-sliders .slider-head b{
  display:inline-flex;
  align-items:center;
  min-width:68px;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  color:#008a95;
  background:rgba(0,168,181,.11);
  border:1px solid rgba(0,168,181,.15);
  font-family:var(--font-display);
  font-size:12px;
}
.wt-fit-sliders input[type="range"]{
  height:24px;
}
@media (max-width: 1050px){
  .wt-fit-sliders label{grid-template-columns:1fr;gap:6px;}
  .wt-fit-sliders .slider-head{justify-content:flex-start;}
}

/* --- Card deletion + contribution-aware links --- */
.link-line.passive-link {
  stroke: rgba(120, 145, 158, .42);
  stroke-width: 2.1;
  filter: none;
}
.link-line.active-link {
  stroke: rgba(0,168,181,.76);
  stroke-width: 4.2;
  filter: drop-shadow(0 6px 10px rgba(0,168,181,.20));
}
.desk-card { position: absolute; }
.card-trash-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(243,107,107,.10);
  color: #c94d4d;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
  cursor: pointer;
  z-index: 4;
}
.desk-card:hover .card-trash-btn,
.desk-card.selected .card-trash-btn {
  opacity: 1;
  transform: translateY(0);
}
.card-trash-btn:hover { background: rgba(243,107,107,.20); }
.btn.danger {
  background: rgba(243,107,107,.12);
  color: #bd4545;
  border-color: rgba(243,107,107,.25);
}
.btn.danger:hover { background: rgba(243,107,107,.18); }
.delete-card-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.delete-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(560px, calc(100vw - 36px));
  transform: translate(-50%, -50%);
  border-radius: 30px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 30px 90px rgba(29,65,84,.22);
}
.delete-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.delete-dialog-head h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.1;
}
.delete-dialog-body { padding: 16px 0 8px; }
.delete-warning {
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid rgba(243,107,107,.22);
  background: rgba(243,107,107,.08);
  padding: 14px 16px;
}
.delete-warning ul { margin: 10px 0 0; padding-left: 18px; }
.delete-warning li { margin: 5px 0; color: var(--ink); }
.delete-note {
  margin-top: 12px;
  border-radius: 18px;
  background: rgba(120,145,158,.09);
  border: 1px solid rgba(120,145,158,.16);
  padding: 13px 15px;
  color: var(--muted);
  font-weight: 800;
}
.delete-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
}

/* Pool preview open action hotfix */
.preview-hero {
  grid-template-columns: 1fr;
}
.preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.preview-actions .btn {
  width: 100%;
  justify-content: center;
}
.compact-map-card .row-between {
  align-items: center;
  gap: 10px;
}
.compact-map-card .row-between .btn {
  flex: 0 0 auto;
}


/* Property maps: cleaner two-panel layout and larger controls */
.property-tool-clean {
  grid-template-columns: minmax(360px, 430px) minmax(760px, 1fr);
  align-items: start;
}
.property-settings-panel {
  overflow: auto;
}
.property-settings-card {
  padding: 22px;
}
.property-settings-card .helper {
  font-size: 13px;
  line-height: 1.45;
}
.pm-settings-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(24,54,74,.08);
}
.pm-settings-block:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
.pm-settings-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 950;
  color: #18364a;
  margin-bottom: 10px;
}
.pm-tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.pm-tool-grid label {
  font-size: 12.5px;
  gap: 7px;
}
.pm-tool-grid input,
.pm-tool-grid select {
  padding: 12px 13px;
  border-radius: 15px;
  font-size: 13px;
}
.property-run-btn {
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  font-size: 14px;
}
.property-map-panel {
  min-height: 0;
}
.property-map-card {
  height: auto;
  min-height: 0;
  display: block;
  padding: 18px 18px 16px;
}
.property-map-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 8px;
}
.pm-map-select {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c8291;
  font-size: 12px;
  font-weight: 900;
}
.pm-map-select select {
  border: 1px solid rgba(24,54,74,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: #18364a;
  font-weight: 800;
  padding: 8px 10px;
}
.property-map-card .svg-box {
  margin-top: 0;
}


/* Property maps: Russian UI, dynamic parameters, tooltips */
.property-map-header {
  justify-content: flex-start;
  margin-bottom: 6px;
}
.pm-map-select {
  justify-content: flex-start;
  font-size: 13px;
}
.pm-map-select select {
  min-width: 240px;
}
.pm-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-help {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(0,168,181,.10);
  border: 1px solid rgba(0,168,181,.22);
  color: #008fa1;
  font-size: 10px;
  font-weight: 950;
  cursor: help;
}
.pm-help::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-18%);
  width: 260px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(24,54,74,.96);
  color: var(--color-text-inverse);
  box-shadow: 0 16px 42px rgba(24,54,74,.22);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}
.pm-help::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(24,54,74,.96);
  opacity: 0;
  pointer-events: none;
  z-index: 21;
}
.pm-help:hover::after,
.pm-help:hover::before {
  opacity: 1;
}
.pm-tool-grid.single {
  grid-template-columns: minmax(0, 1fr);
}
.pm-tool-grid label.hidden {
  display: none;
}
.property-settings-card .info-title,
.property-map-card .info-title {
  font-size: 17px;
}


/* Property maps: label tooltips without question icons */
.property-tool-clean,
.property-settings-panel,
.property-settings-card,
.pm-settings-block,
.pm-tool-grid,
.pm-tool-grid label {
  overflow: visible;
}
.property-settings-panel {
  position: relative;
  z-index: 30;
}
.property-map-panel {
  position: relative;
  z-index: 1;
}
.pm-label-row.pm-tip-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  cursor: help;
  border-bottom: 1px dashed rgba(0,168,181,.38);
}
.pm-label-row.pm-tip-label::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 300px;
  max-width: min(300px, 70vw);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(24,54,74,.97);
  color: var(--color-text-inverse);
  box-shadow: 0 18px 48px rgba(24,54,74,.28);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
}
.pm-label-row.pm-tip-label::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(24,54,74,.97);
  opacity: 0;
  pointer-events: none;
  z-index: 1000000;
}
.pm-label-row.pm-tip-label:hover::after,
.pm-label-row.pm-tip-label:hover::before {
  opacity: 1;
}
.pm-help { display: none; }


/* Pool maps viewer */
.pool-maps-workbench {
  padding: 18px;
}
.pool-map-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.pool-map-select {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6c8291;
  font-size: 13px;
  font-weight: 900;
}
.pool-map-select select {
  min-width: 260px;
}
.pool-map-view .reservoir-map-box {
  margin-top: 0;
}
.pool-map-view .source-legend {
  margin-top: 12px;
}


/* Property maps 3D viewer */
.property-map-3d-viewer {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 18%, rgba(38, 215, 187, .12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(229,245,248,.58));
  border: 1px solid rgba(255,255,255,.85);
  min-height: 360px;
  cursor: grab;
}
.property-map-3d-viewer.dragging {
  cursor: grabbing;
}
.property-map-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.property-map-3d-viewer .three-reset,
.property-map-3d-viewer .three-hint {
  z-index: 3;
}


/* WellTest parameter label tooltips */
.welltest-fullscreen,
.expert-welltest-tool,
.wt-params-panel,
.wt-params-panel .tool-control-card,
.wt-param-group,
.wt-param-grid,
.wt-param-field,
.wt-fit-sliders,
.wt-fit-sliders label,
.wt-fit-sliders .slider-head {
  overflow: visible;
}
.wt-params-panel {
  position: relative;
  z-index: 40;
}
.welltest-fullscreen .tool-right-panel {
  position: relative;
  z-index: 1;
}
.wt-tip-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  cursor: help;
  border-bottom: 1px dashed rgba(0,168,181,.38);
}
.wt-tip-label::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 320px;
  max-width: min(320px, 72vw);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(24,54,74,.97);
  color: var(--color-text-inverse);
  box-shadow: 0 18px 48px rgba(24,54,74,.28);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
}
.wt-tip-label::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(24,54,74,.97);
  opacity: 0;
  pointer-events: none;
  z-index: 1000000;
}
.wt-tip-label:hover::after,
.wt-tip-label:hover::before {
  opacity: 1;
}
.wt-fit-sliders .slider-head .wt-tip-label {
  color: var(--muted);
}


/* Pool map scale and readout */
.pool-map-scale-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -2px 0 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(197,218,225,.62);
}
.pool-map-scale-controls label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6c8291;
  font-size: 12px;
  font-weight: 900;
}
.pool-map-scale-controls input {
  width: 98px;
  height: 32px;
  border-radius: 11px;
  border: 1px solid rgba(197,218,225,.9);
  padding: 0 9px;
  font-weight: 850;
  color: #18364a;
  background: rgba(255,255,255,.95);
}
.pool-map-scale-controls span {
  color: #7b8f9c;
  font-size: 12px;
  font-weight: 800;
}
.property-map-2d-viewer {
  position: relative;
}
.pm-map-readout {
  position: absolute;
  z-index: 99999;
  min-width: 190px;
  max-width: 240px;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(24,54,74,.96);
  color: var(--color-text-inverse);
  box-shadow: 0 18px 48px rgba(24,54,74,.28);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.32;
}
.pm-map-readout b,
.pm-map-readout span {
  display: block;
}
.pm-map-readout b {
  font-size: 12px;
  margin-bottom: 3px;
}
.pm-map-readout span {
  opacity: .92;
  font-weight: 750;
}
.pm-map-readout.hidden {
  display: none;
}


/* Inline scale settings near map legend */
.map-scale-inline {
  position: absolute;
  right: 22px;
  top: 46px;
  z-index: 100000;
}
.property-map-3d-viewer .map-scale-inline {
  right: 12px;
  top: 12px;
}
.map-scale-gear {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(24,54,74,.15);
  border-radius: 11px;
  background: rgba(255,255,255,.88);
  color: #18364a;
  box-shadow: 0 10px 28px rgba(24,54,74,.12);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.map-scale-gear:hover {
  background: var(--color-surface);
  transform: translateY(-1px);
}
.map-scale-popover {
  position: absolute;
  right: calc(100% + 10px);
  top: -2px;
  width: 214px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(197,218,225,.82);
  box-shadow: 0 18px 48px rgba(24,54,74,.22);
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.map-scale-inline.open .map-scale-popover {
  display: grid;
}
.map-scale-popover label {
  display: grid;
  gap: 5px;
  color: #6c8291;
  font-size: 11px;
  font-weight: 950;
}
.map-scale-popover input {
  width: 100%;
  height: 32px;
  border-radius: 11px;
  border: 1px solid rgba(197,218,225,.9);
  padding: 0 8px;
  font-weight: 850;
  color: #18364a;
  background: rgba(255,255,255,.98);
}
.map-scale-popover .map-scale-auto {
  grid-column: 1 / 2;
  width: 100%;
}
.map-scale-popover span {
  grid-column: 1 / -1;
  color: #7b8f9c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.pool-map-scale-controls { display: none; }


/* BEM forecast card */
.bem-forecast-fullscreen {
  grid-template-columns: 270px minmax(560px, 1fr) minmax(430px, .95fr);
}
.bf-tabs {
  display: grid;
  gap: 8px;
}
.bf-tab {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
  font-weight: 950;
  cursor: pointer;
}
.bf-tab.active {
  border-color: rgba(0,168,181,.30);
  background: rgba(226,250,250,.92);
  color: #008a95;
}
.bf-side-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bf-side-kpis div,
.bf-kpi-grid div,
.bf-period-note div {
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  padding: 10px 12px;
  min-width: 0;
}
.bf-side-kpis span,
.bf-kpi-grid span,
.bf-period-note span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 950;
  margin-bottom: 4px;
}
.bf-side-kpis b,
.bf-kpi-grid b,
.bf-period-note b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.bf-settings-card {
  padding: 20px;
}
.bf-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.bf-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}
.bf-form-grid label.wide {
  grid-column: 1 / -1;
}
.bf-form-grid input,
.bf-form-grid select,
.bf-control-table input {
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(197,218,225,.88);
  padding: 0 10px;
  font-weight: 850;
  color: var(--ink);
  background: rgba(255,255,255,.94);
}
.bf-period-note {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.bf-controls-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.bf-controls-summary span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 999px;
  background: rgba(0,168,181,.09);
  color: #476574;
  padding: 7px 10px;
  font-weight: 850;
  font-size: 12px;
}
.bf-control-table {
  max-height: 520px;
  overflow: auto;
}
.bf-control-table table {
  min-width: 760px;
}
.bf-control-table input {
  width: 120px;
}
.bf-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}
.bf-status.ok {
  color: #159269;
  background: rgba(71,199,154,.16);
}
.bf-status.warn {
  color: #9a6b20;
  background: rgba(243,189,79,.18);
}
.bf-status.manual {
  color: #008a95;
  background: rgba(0,168,181,.13);
}
.bf-status.missing {
  color: #c85353;
  background: rgba(243,107,107,.12);
}
.bf-control-table tr.manual input {
  border-color: rgba(0,168,181,.45);
  background: rgba(240,253,253,.96);
}
.bf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 1200px) {
  .bem-forecast-fullscreen { grid-template-columns: 250px 1fr; }
  .bem-forecast-fullscreen .tool-right-panel { grid-column: 1 / -1; }
  .bf-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .bem-forecast-fullscreen, .bf-form-grid, .bf-period-note { grid-template-columns: 1fr; }
}


/* BEM forecast refinements */
.bf-center-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}
.bf-top-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.bf-top-tabs .bf-tab {
  width: auto;
  min-width: 150px;
  text-align: center;
}
.bf-form-grid label.hidden {
  display: none;
}
.bf-form-grid {
  align-items: end;
}


/* BEM forecast result chart fixes */
.bf-result-card {
  min-height: 0;
  height: auto;
  display: block;
  overflow: visible;
}
.bf-result-card .tool-result-top {
  margin-bottom: 8px;
}
.bf-chart-wrap {
  min-width: 0;
  width: 100%;
}
.bf-chart-svg {
  display: block;
  width: 100%;
  height: 430px;
  overflow: visible;
}
.bf-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 8px 4px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.bf-chart-legend div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bf-chart-legend span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.bf-chart-legend em {
  color: #8aa0ad;
  font-style: normal;
  font-size: 11px;
}
.bf-line-note {
  margin-left: auto;
}
.bf-line-note i {
  width: 24px;
  height: 0;
  border-top: 2px dashed #8aa0ad;
  display: inline-block;
}
.bf-result-table {
  margin-top: 12px;
  max-height: 250px;
  overflow: auto;
}
.bf-result-table table {
  min-width: 680px;
}


/* Graphs tab and forecast result controls */
.bf-result-controls,
.forecast-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 8px;
}
.bf-result-controls label,
.forecast-toolbar label:not(.check-pill) {
  display: grid;
  gap: 5px;
  min-width: 210px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.bf-result-table-title {
  margin: 12px 4px 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.graphs-workbench {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
}
.graphs-side {
  padding: 14px;
  align-self: start;
}
.graph-section-btn {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.76);
  color: var(--ink);
  border-radius: 15px;
  padding: 11px 12px;
  text-align: left;
  font-weight: 950;
  cursor: pointer;
  margin-top: 8px;
}
.graph-section-btn.active {
  border-color: rgba(0,168,181,.32);
  background: rgba(226,250,250,.92);
  color: #008a95;
}
.graphs-main {
  min-width: 0;
}
.forecast-history-check {
  height: 38px;
  align-self: end;
}
@media (max-width: 950px) {
  .graphs-workbench { grid-template-columns: 1fr; }
  .graphs-side { display: flex; gap: 8px; }
  .graph-section-btn { margin-top: 0; width: auto; }
}

/* BEM forecast result history toggle */
.bf-result-controls .forecast-history-check {
  height: 38px;
  align-self: end;
  margin-bottom: 0;
}

.forecast-after-history-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}


/* BEM pressure card */
.bem-pressure-fullscreen {
  grid-template-columns: 270px minmax(650px, 1fr);
}
.bp-center-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}
.bp-settings-card,
.bp-result-card {
  padding: 20px;
}
.bp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  align-items: end;
}
.bp-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}
.bp-form-grid label.hidden {
  display: none;
}
.bp-form-grid input,
.bp-form-grid select {
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(197,218,225,.88);
  padding: 0 10px;
  font-weight: 850;
  color: var(--ink);
  background: rgba(255,255,255,.94);
}
.bp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.bp-kpi-grid div {
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.bp-kpi-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 950;
  margin-bottom: 4px;
}
.bp-kpi-grid b {
  display: block;
  color: var(--ink);
  font-size: 15px;
}
@media (max-width: 950px) {
  .bem-pressure-fullscreen,
  .bp-form-grid {
    grid-template-columns: 1fr;
  }
  .bp-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  body {
    font-size: 14px;
  }
  .app-shell {
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 6px;
  }
  .workspace-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .topbar {
    min-height: 56px;
    margin-bottom: 6px;
    padding: 8px 10px;
    border-radius: 18px;
    gap: 8px;
  }
  .topbar > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }
  .page-title {
    max-width: 150px;
    font-size: 16px;
    line-height: 1.08;
  }
  .page-subtitle,
  .density-control,
  #resetDeskBtn {
    display: none;
  }
  .top-actions {
    flex: 0 0 auto;
    gap: 5px;
  }
  .top-actions .btn,
  .mobile-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 9px;
    border-radius: 12px;
    font-size: 11px;
    white-space: nowrap;
  }
  .top-actions .desktop-account-link {
    display: none;
  }
  .top-actions .mobile-nav-btn {
    position: relative;
    width: 40px;
    overflow: hidden;
    color: transparent;
  }
  .mobile-nav-btn::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--teal-deep);
    font-size: 20px;
  }
  #mobileToolsBtn::after {
    content: "☰";
  }
  #mobileDetailsBtn::after {
    content: "ⓘ";
  }
  #refreshBtn {
    width: 40px;
    overflow: hidden;
    color: transparent;
    position: relative;
  }
  #refreshBtn::after {
    content: "↻";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--teal-deep);
    font-size: 20px;
  }
  .splitter {
    display: none;
  }
  .workspace {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 22px;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .link-layer {
    display: none;
  }
  .pool-node,
  .desk-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    min-height: 0;
    flex: 0 0 auto;
    touch-action: pan-y;
  }
  .pool-node {
    order: 0;
    padding: 18px;
  }
  .desk-card {
    order: 1;
    padding: 14px;
  }
  .empty-hint {
    position: static;
    order: 2;
    max-width: none;
    padding: 14px 4px;
    font-size: 12px;
  }
  .sidebar,
  .details-panel {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(88vw, 360px);
    height: 100dvh;
    z-index: 80;
    padding: 16px;
    border-radius: 0;
    overflow: auto;
    transition: transform .2s ease;
    box-shadow: 0 20px 70px rgba(15,47,65,.30);
  }
  .sidebar {
    left: 0;
    flex-direction: column;
    transform: translateX(-105%);
    border-radius: 0 24px 24px 0;
  }
  .details-panel {
    right: 0;
    transform: translateX(105%);
    border-radius: 24px 0 0 24px;
  }
  body.mobile-tools-open .sidebar {
    transform: translateX(0);
  }
  body.mobile-details-open .details-panel {
    transform: translateX(0);
  }
  .mobile-panel-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 79;
    width: auto;
    height: 100%;
    border: 0;
    background: rgba(12,34,48,.34);
    backdrop-filter: blur(3px);
  }
  body.mobile-tools-open .mobile-panel-backdrop {
    left: min(88vw, 360px);
  }
  body.mobile-details-open .mobile-panel-backdrop {
    right: min(88vw, 360px);
  }
  .library-card {
    cursor: default;
  }
  .library-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border: 1px solid rgba(0,168,181,.18);
    border-radius: 13px;
    background: rgba(226,250,250,.86);
    color: var(--teal-deep);
    font-weight: 900;
  }
  button,
  .btn,
  .icon-btn {
    min-height: 40px;
  }
  input,
  select,
  textarea,
  .select {
    max-width: 100%;
    font-size: 16px;
  }
  .modal-shell {
    width: 100%;
    height: 100dvh;
    padding: 0;
  }
  .pool-modal,
  .card-modal {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }
  .pool-modal-header {
    min-height: 0;
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .pool-modal-header h2 {
    font-size: 20px;
    line-height: 1.12;
  }
  .modal-subtitle {
    font-size: 11px;
  }
  .modal-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
    gap: 6px;
  }
  .modal-actions .btn {
    min-width: 0;
    min-height: 40px;
    padding: 7px 8px;
    border-radius: 12px;
    font-size: 11px;
  }
  .modal-actions .icon-btn {
    width: 42px;
    height: 40px;
  }
  .pool-modal-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .pool-modal-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .pool-modal-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 10px;
  }
  .pool-modal-body,
  .card-modal-body {
    min-width: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .card-tool-fullscreen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    height: auto;
  }
  .tool-left-panel {
    max-height: none;
    padding: 12px;
    overflow: visible;
  }
  .bf-top-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }
  .bf-top-tabs .bf-tab,
  .oilv-tab {
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
  }
  .form-row,
  .bp-form-grid,
  .bf-form-grid,
  .two-col-grid,
  .overview-grid,
  .history-toolbar,
  .history-single-controls,
  .history-multi-controls {
    grid-template-columns: 1fr;
  }
  .bf-kpi-grid,
  .bp-kpi-grid,
  .metric-grid,
  .summary-grid.mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .property-map-3d-viewer,
  .reservoir-3d-viewer,
  .reservoir-map-box,
  .chart-wrap {
    min-height: 260px;
    max-height: 60dvh;
  }
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
  .toast {
    right: 10px;
    bottom: 10px;
    left: 10px;
    max-width: none;
  }
}


/* Responsive density: one fluid layout with automatic and manual density modes. */
.modal-shell {
  padding: var(--modal-shell-padding);
}
.pool-modal-header {
  padding: var(--modal-header-padding);
  min-height: var(--topbar-height);
}
.pool-modal-body,
.card-modal-body {
  padding: var(--modal-body-padding);
}
.card-tool-fullscreen {
  gap: var(--tool-gap);
}
.tool-left-panel {
  padding: var(--tool-panel-padding);
}
.pool-maps-workbench,
.bp-settings-card,
.bp-result-card {
  padding: var(--modal-body-padding);
}
.welltest-fullscreen {
  grid-template-columns:
    var(--tool-left-column)
    minmax(var(--tool-control-min), 460px)
    minmax(var(--tool-map-min), 1fr);
}
.two-panel-tool {
  grid-template-columns: var(--tool-wide-column) minmax(var(--tool-main-min), 1fr);
}
.property-tool {
  grid-template-columns:
    var(--tool-left-column)
    minmax(var(--tool-control-min), 460px)
    minmax(var(--tool-map-min), 1fr);
}
.expert-welltest-tool {
  grid-template-columns:
    var(--tool-left-column)
    minmax(var(--tool-main-min), 1fr)
    minmax(var(--tool-right-min), .9fr);
}
.bem-forecast-fullscreen {
  grid-template-columns:
    var(--tool-left-column)
    minmax(var(--forecast-center-min), 1fr)
    minmax(var(--forecast-right-min), .95fr);
}
.bem-pressure-fullscreen {
  grid-template-columns: var(--tool-left-column) minmax(var(--pressure-main-min), 1fr);
}

@media (max-width: 1650px) {
  .density-control {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .density-control > span {
    display: none;
  }
  .page-subtitle {
    max-width: 440px;
  }
}

@media (max-width: 1400px) {
  .top-actions {
    gap: 6px;
  }
  .top-actions .btn {
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 12px;
  }
  .density-control select {
    width: min(185px, 20vw);
    min-width: 140px;
    height: 36px;
  }
  .page-subtitle {
    display: none;
  }
}

@media (max-width: 1300px) {
  .welltest-fullscreen,
  .property-tool {
    grid-template-columns: var(--tool-left-column) minmax(0, 1fr);
  }
  .welltest-fullscreen .tool-right-panel,
  .property-tool .tool-right-panel {
    grid-column: 1 / -1;
  }
  .expert-welltest-tool {
    grid-template-columns: var(--tool-left-column) minmax(0, 1fr);
  }
  .expert-welltest-tool .tool-right-panel {
    grid-column: 1 / -1;
  }
  .plot-card {
    min-height: 420px;
  }
}

@media (max-width: 1240px) {
  .app-shell {
    grid-template-columns: 240px 5px minmax(360px, 1fr) 5px 320px;
    gap: 8px;
    padding: 8px;
  }
  .bem-forecast-fullscreen {
    grid-template-columns: var(--tool-left-column) minmax(0, 1fr);
  }
  .bem-forecast-fullscreen .tool-right-panel {
    grid-column: 1 / -1;
  }
  .bf-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }
  .app-shell {
    width: 100%;
    min-height: 100vh;
    height: auto;
    grid-template-columns: minmax(230px, .36fr) minmax(0, 1fr);
  }
  .splitter,
  .details-panel {
    display: none;
  }
  .workspace-wrap {
    min-height: calc(100vh - 16px);
  }
  .welltest-fullscreen,
  .two-panel-tool,
  .property-tool,
  .expert-welltest-tool,
  .bem-forecast-fullscreen,
  .bem-pressure-fullscreen,
  .bp-form-grid {
    grid-template-columns: 1fr;
  }
  .welltest-fullscreen .tool-right-panel,
  .property-tool .tool-right-panel,
  .expert-welltest-tool .tool-right-panel,
  .bem-forecast-fullscreen .tool-right-panel {
    grid-column: auto;
  }
  .summary-grid.mini {
    grid-template-columns: 1fr;
  }
}

/* Administrative access page */
body.admin-page {
  min-width: 0;
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 15% 10%, rgba(38, 215, 187, .18), transparent 32%),
    radial-gradient(circle at 85% 22%, rgba(47, 116, 255, .12), transparent 28%),
    linear-gradient(135deg, #f7fbfc 0%, var(--bg) 48%, #e6f0f2 100%);
}
.admin-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}
.admin-topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-radius: var(--radius-xl);
}
.admin-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.admin-brand-logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 16px;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  box-shadow: 0 11px 22px rgba(0,168,181,.22);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
}
.admin-brand strong,
.admin-brand small {
  display: block;
}
.admin-brand strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.admin-brand small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-nav-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 13px;
  text-decoration: none;
  font-size: 11px;
  white-space: nowrap;
}
.admin-nav-btn svg,
.admin-save-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.admin-logout-link {
  color: #925151 !important;
  border-color: rgba(243,107,107,.17) !important;
}
.admin-logout-link:hover {
  color: #a83e3e !important;
  border-color: rgba(243,107,107,.28) !important;
  background: rgba(243,107,107,.08) !important;
}
.admin-main {
  padding: 42px 8px 54px;
}
.admin-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 0 10px;
}
.admin-hero h1 {
  margin: 9px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.03em;
}
.admin-hero p {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.admin-role-chip {
  display: inline-grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 13px 9px 9px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  box-shadow: var(--shadow-soft);
}
.admin-role-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
}
.admin-role-chip small,
.admin-role-chip strong {
  display: block;
}
.admin-role-chip small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-role-chip strong {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
}
.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.admin-summary-card {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: 20px;
}
.admin-summary-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #168765;
  background: rgba(71,199,154,.15);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
}
.admin-summary-icon-muted {
  color: #8a671e;
  background: rgba(243,189,79,.17);
}
.admin-summary-icon-change {
  color: var(--teal-deep);
  background: rgba(0,168,181,.12);
}
.admin-summary-card small,
.admin-summary-card strong {
  display: block;
}
.admin-summary-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}
.admin-summary-card strong {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
}
.admin-access-panel {
  margin-top: 14px;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.admin-panel-header h2 {
  margin: 5px 0 4px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.018em;
}
.admin-panel-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.admin-save-btn {
  min-width: 205px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 15px;
  border-radius: 14px;
  font-size: 11px;
}
.admin-save-btn.is-saving svg {
  animation: admin-spin .85s linear infinite;
}
.admin-loading {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.admin-loader {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0,168,181,.18);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: admin-spin .8s linear infinite;
}
@keyframes admin-spin { to { transform: rotate(360deg); } }
.admin-feature-groups {
  display: grid;
}
.admin-feature-group + .admin-feature-group {
  border-top: 1px solid var(--line);
}
.admin-feature-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 11px;
}
.admin-feature-group-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
}
.admin-feature-group-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.admin-feature-group-header > span {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--teal-deep);
  background: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 900;
}
.admin-feature-list {
  padding: 0 12px 14px;
}
.admin-feature-row {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 12px;
  border-radius: 15px;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.admin-feature-row:hover {
  background: rgba(226,250,250,.42);
}
.admin-feature-row:focus-within {
  background: rgba(226,250,250,.56);
  box-shadow: inset 0 0 0 1px rgba(0,168,181,.14);
}
.admin-feature-copy {
  min-width: 0;
}
.admin-feature-copy strong,
.admin-feature-copy code {
  display: block;
}
.admin-feature-copy strong {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-feature-copy code {
  margin-top: 4px;
  overflow: hidden;
  color: #738a98;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-feature-control {
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}
.admin-access-state {
  min-width: 64px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-align: right;
}
.admin-switch {
  position: relative;
  width: 48px;
  height: 28px;
  display: inline-block;
  flex: 0 0 auto;
}
.admin-switch input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.admin-switch-track {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(36,67,84,.13);
  border-radius: 999px;
  background: rgba(108,130,145,.17);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.admin-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 3px 8px rgba(27,63,82,.18);
  transition: transform .2s ease;
}
.admin-switch input:checked + .admin-switch-track {
  border-color: rgba(0,168,181,.28);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  box-shadow: 0 7px 15px rgba(0,168,181,.16);
}
.admin-switch input:checked + .admin-switch-track .admin-switch-thumb {
  transform: translateX(20px);
}
.admin-switch input:focus-visible + .admin-switch-track {
  box-shadow: 0 0 0 4px rgba(0,168,181,.13);
}
.admin-message {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 120;
  max-width: min(420px, calc(100vw - 32px));
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.admin-message.success,
.admin-message.error {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid rgba(71,199,154,.20);
  color: #176f55;
  background: rgba(244,253,249,.96);
  box-shadow: 0 14px 34px rgba(27,63,82,.15);
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
  font-size: 11px;
  font-weight: 800;
}
.admin-message.error {
  border-color: rgba(243,107,107,.22);
  color: #a33d3d;
  background: rgba(255,248,248,.97);
}
.admin-has-changes .admin-summary-card-wide {
  border-color: rgba(0,168,181,.20);
  background: rgba(239,252,252,.82);
}

@media (max-width: 760px) {
  html,
  body.admin-page {
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.admin-page { padding: 7px; }
  .admin-topbar {
    min-height: 62px;
    padding: 8px 9px;
    border-radius: 19px;
  }
  .admin-brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 19px;
  }
  .admin-brand strong { font-size: 15px; }
  .admin-brand small { display: none; }
  .admin-topbar-actions { gap: 5px; }
  .admin-nav-btn {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
  }
  .admin-nav-btn span { display: none; }
  .admin-nav-btn svg { width: 18px; height: 18px; }
  .admin-main { padding: 28px 3px 42px; }
  .admin-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding: 0 7px;
  }
  .admin-hero h1 { font-size: 30px; }
  .admin-role-chip { display: none; }
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 20px;
  }
  .admin-summary-card {
    min-height: 78px;
    gap: 9px;
    padding: 12px;
    border-radius: 17px;
  }
  .admin-summary-card-wide { grid-column: 1 / -1; }
  .admin-summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .admin-summary-card small { font-size: 8px; }
  .admin-summary-card strong { font-size: 17px; }
  .admin-access-panel {
    margin-top: 8px;
    border-radius: 20px;
  }
  .admin-panel-header {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 17px;
  }
  .admin-panel-header h2 { font-size: 21px; }
  .admin-save-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }
  .admin-feature-group-header { padding: 17px 14px 8px; }
  .admin-feature-list { padding: 0 6px 10px; }
  .admin-feature-row {
    min-height: 70px;
    gap: 10px;
    padding: 10px 8px;
  }
  .admin-feature-copy strong {
    max-width: 58vw;
    font-size: 12px;
  }
  .admin-feature-copy code {
    max-width: 58vw;
    font-size: 8px;
  }
  .admin-feature-control {
    min-width: 49px;
    gap: 0;
  }
  .admin-access-state { display: none; }
  .admin-message {
    right: 10px;
    bottom: 10px;
    left: 10px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-loader,
  .admin-save-btn.is-saving svg { animation-duration: .01ms !important; }
}


/* Shared account dropdown */
.brand-link {
  color: inherit;
  text-decoration: none;
}
.session-menu {
  position: relative;
  flex: 0 0 auto;
}
.session-menu-trigger {
  min-height: 54px;
  min-width: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 14px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.session-menu:hover .session-menu-trigger,
.session-menu:focus-within .session-menu-trigger {
  transform: translateY(-1px);
  border-color: rgba(0,168,181,.22);
  background: rgba(247,254,254,.95);
  box-shadow: 0 14px 28px rgba(33,80,104,.10);
}
.session-menu-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.session-menu-kicker {
  color: var(--teal-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.session-menu-copy strong {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-menu-copy span:last-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-menu-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  box-shadow: 0 10px 20px rgba(0,168,181,.18);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
}
.session-menu-chevron {
  width: 14px;
  height: 14px;
  color: #7b95a3;
  transition: transform .18s ease;
}
.session-menu.open .session-menu-chevron {
  transform: rotate(180deg);
}
.session-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 320px;
  padding: 12px;
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.session-menu.open .session-menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.session-menu-section + .session-menu-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(36,67,84,.08);
}
.session-menu-section-label {
  margin-bottom: 8px;
  color: var(--teal-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.session-density {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.session-density select {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  padding: 0 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.session-menu-link {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--teal-deep);
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.session-menu-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.session-menu-link:hover {
  background: rgba(226,250,250,.75);
  transform: translateX(2px);
}
.session-menu-link.logout {
  color: #955151;
}
.session-menu-link.logout:hover {
  background: rgba(243,107,107,.08);
  color: #a43f3f;
}

/* Workspace header refinements */
.topbar {
  gap: 20px;
}
.topbar > :first-child {
  min-width: 0;
}
.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

/* Portal home page */
body.portal-page {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 16% 10%, rgba(38,215,187,.18), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(47,116,255,.10), transparent 24%),
    linear-gradient(135deg, #f7fbfc 0%, var(--bg) 46%, #e8f1f3 100%);
}
.portal-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
}
.portal-topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-radius: var(--radius-xl);
}
.portal-main {
  padding: 24px 2px 40px;
}
.portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
}
.portal-hero-copy h1 {
  margin: 10px 0 10px;
  max-width: 700px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 54px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.04em;
}
.portal-hero-copy p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.portal-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.portal-hero-tags span {
  padding: 8px 12px;
  border: 1px solid rgba(0,168,181,.16);
  border-radius: 999px;
  color: var(--teal-deep);
  background: rgba(238,252,252,.82);
  font-size: 11px;
  font-weight: 850;
}
.portal-hero-visual {
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
}
.portal-hero-orb {
  position: absolute;
  inset: 18px 28px auto auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38,215,187,.22), rgba(38,215,187,0));
  filter: blur(2px);
}
.portal-layer-card {
  position: relative;
  width: min(320px, 100%);
  height: 240px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,251,252,.84));
  box-shadow: 0 24px 46px rgba(33,80,104,.12);
  overflow: hidden;
}
.portal-layer-top,
.portal-layer-mid,
.portal-layer-bot {
  position: absolute;
  left: -8%;
  right: -8%;
  border-radius: 999px;
}
.portal-layer-top {
  top: 54px;
  height: 52px;
  background: linear-gradient(135deg, rgba(65,177,171,.26), rgba(104,199,192,.20));
  transform: rotate(-8deg);
}
.portal-layer-mid {
  top: 110px;
  height: 64px;
  background: linear-gradient(135deg, rgba(206,183,117,.30), rgba(198,159,103,.24));
  transform: rotate(6deg);
}
.portal-layer-bot {
  top: 162px;
  height: 82px;
  background: linear-gradient(135deg, rgba(88,108,125,.20), rgba(123,139,153,.16));
  transform: rotate(-5deg);
}
.portal-well-line {
  position: absolute;
  top: 22px;
  left: 54%;
  width: 10px;
  height: 188px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--teal-deep), rgba(37,79,98,.65));
  box-shadow: 0 0 0 8px rgba(0,168,181,.08);
}
.portal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.portal-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 20px;
  border-radius: 24px;
}
.portal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.portal-card-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0,168,181,.16), rgba(38,215,187,.18));
  font-size: 24px;
}
.portal-card-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portal-card-badge.ready {
  color: #168765;
  background: rgba(71,199,154,.14);
}
.portal-card-badge.soon {
  color: #8a671e;
  background: rgba(243,189,79,.18);
}
.portal-card-badge.admin {
  color: var(--teal-deep);
  background: rgba(0,168,181,.12);
}
.portal-card h2 {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.portal-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.portal-card-meta {
  margin-top: auto;
  padding-top: 16px;
  color: var(--teal-deep);
  font-size: 11px;
  font-weight: 850;
}
.portal-card-actions {
  margin-top: 16px;
}
.portal-card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}
.portal-card.is-disabled {
  opacity: .68;
}
.portal-card.is-disabled .portal-card-badge.ready {
  color: #8a671e;
  background: rgba(243,189,79,.18);
}
.disabled-link {
  pointer-events: none;
  opacity: .58;
}

/* Admin page header with session menu */
.session-menu-admin .session-menu-trigger {
  min-width: 250px;
}
.admin-topbar-actions {
  gap: 10px;
}
.admin-nav-btn {
  min-height: 52px;
  padding: 0 14px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .portal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar {
    align-items: stretch;
  }
  .top-actions {
    justify-content: flex-start;
  }
  .session-menu {
    width: 100%;
  }
  .session-menu-trigger {
    width: 100%;
    min-width: 0;
  }
  .session-menu-dropdown {
    left: 0;
    right: 0;
    width: auto;
  }
  body.portal-page {
    padding: 8px;
  }
  .portal-topbar {
    align-items: stretch;
    flex-direction: column;
    padding: 10px;
    border-radius: 22px;
  }
  .portal-main {
    padding: 12px 0 30px;
  }
  .portal-hero {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 24px;
  }
  .portal-hero-copy h1 {
    font-size: 32px;
  }
  .portal-hero-copy p {
    font-size: 13px;
  }
  .portal-hero-visual {
    min-height: 180px;
  }
  .portal-layer-card {
    height: 180px;
  }
  .portal-layer-top { top: 36px; height: 40px; }
  .portal-layer-mid { top: 82px; height: 44px; }
  .portal-layer-bot { top: 120px; height: 66px; }
  .portal-well-line { height: 136px; }
  .portal-card {
    min-height: 240px;
    padding: 16px;
    border-radius: 20px;
  }
  .portal-card h2 {
    font-size: 21px;
  }
  .session-menu-admin {
    width: auto;
  }
}


/* Minimal landing refresh */
.portal-page-minimal {
  background:
    radial-gradient(circle at 10% 8%, rgba(38,215,187,.14), transparent 28%),
    linear-gradient(135deg, #f5fafb 0%, #eef4f6 100%);
}
.portal-shell-minimal {
  width: min(1180px, 100%);
}
.portal-topbar-minimal {
  position: relative;
  z-index: 40;
  align-items: flex-start;
  padding: 20px 22px;
}
.portal-title-block {
  min-width: 0;
}
.portal-page-title {
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -.03em;
}
.portal-page-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.portal-main-minimal {
  padding: 18px 2px 32px;
}
.portal-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.portal-tile {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 22px;
  border-radius: 24px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.portal-tile::before {
  content: '';
  position: absolute;
  inset: auto -15% -35% auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,168,181,.12), rgba(0,168,181,0) 70%);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease;
}
.portal-tile:hover,
.portal-tile:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(0,168,181,.24);
  box-shadow: 0 22px 38px rgba(33,80,104,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(236,251,251,.88));
}
.portal-tile:hover::before,
.portal-tile:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}
.portal-tile-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0,168,181,.16), rgba(38,215,187,.18));
  font-size: 26px;
}
.portal-tile-title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.02em;
}
.portal-tile-state {
  margin-top: auto;
  align-self: flex-start;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--teal-deep);
  background: rgba(0,168,181,.10);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portal-tile-overlay {
  position: absolute;
  inset: auto 16px 16px 16px;
  padding: 14px 14px 15px;
  border: 1px solid rgba(0,168,181,.14);
  border-radius: 18px;
  background: rgba(239,252,252,.95);
  box-shadow: 0 16px 28px rgba(33,80,104,.10);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.portal-tile:hover .portal-tile-overlay,
.portal-tile:focus-visible .portal-tile-overlay {
  opacity: 1;
  transform: translateY(0);
}
.portal-tile-overlay-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
}
.portal-tile-overlay p {
  margin: 6px 0 0;
  color: #5b7382;
  font-size: 12px;
  line-height: 1.55;
}
.portal-tile-soon {
  cursor: default;
}
.portal-tile-soon .portal-tile-state {
  color: #8a671e;
  background: rgba(243,189,79,.18);
}
.portal-tile-link {
  cursor: pointer;
}
.portal-tile-link:hover .portal-tile-state,
.portal-tile-link:focus-visible .portal-tile-state {
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
}
.portal-session-menu .session-menu-dropdown {
  z-index: 220;
}
@media (max-width: 760px) {
  .portal-topbar-minimal {
    flex-direction: column;
    gap: 14px;
  }
  .portal-page-title {
    font-size: 30px;
  }
  .portal-tiles {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .portal-tile {
    min-height: 190px;
    padding: 18px;
    border-radius: 20px;
  }
  .portal-tile-title {
    font-size: 22px;
  }
  .portal-tile-overlay {
    position: static;
    margin-top: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .portal-tile-overlay-title {
    display: none;
  }
}


/* Landing refinement: brand header and compact centered tiles */
.portal-shell-minimal {
  width: 100%;
}
.portal-topbar-minimal {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 18px;
}
.portal-brand {
  margin: 0;
  flex: 0 0 auto;
}
.portal-session-menu {
  margin-left: auto;
  flex: 0 0 auto;
}
.portal-main-minimal {
  display: flex;
  justify-content: center;
  padding: 16px 0 28px;
}
.portal-tiles {
  width: min(760px, 100%);
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.portal-tile {
  aspect-ratio: 1 / 0.92;
  min-height: 0;
  justify-content: flex-start;
  padding: 22px;
}
.portal-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  font-size: 24px;
}
.portal-tile-title {
  margin-top: 14px;
  font-size: 22px;
}
.portal-tile-description {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.58;
}
.portal-tile-state,
.portal-tile-overlay { display: none !important; }
.portal-tile:hover,
.portal-tile:focus-visible {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(230,250,250,.92));
  border-color: rgba(0,168,181,.32);
  box-shadow: 0 24px 42px rgba(0,168,181,.16);
}
@media (max-width: 760px) {
  .portal-topbar-minimal {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .portal-brand { margin-bottom: 2px; }
  .portal-session-menu { margin-left: 0; }
  .portal-main-minimal { padding: 12px 0 24px; }
  .portal-tiles {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .portal-tile {
    aspect-ratio: auto;
    min-height: 210px;
    padding: 18px;
  }
}


/* 2026-07-29: corner headers and compact landing cards */
.portal-page-minimal { padding: 12px 16px 20px; }
.portal-shell-minimal { width: 100%; max-width: none; }
.portal-topbar-minimal {
  position: relative; z-index: 100; width: 100%; min-height: 82px;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0; background: transparent; border: 0; box-shadow: none;
}
.portal-brand {
  margin: 0; padding: 12px 16px; border-radius: 22px;
  background: rgba(255,255,255,.78); box-shadow: var(--shadow-soft);
}
.portal-session-menu { margin: 0 0 0 auto; }
.portal-session-menu .session-menu-trigger { min-width: 286px; }
.portal-main-minimal { display:flex; justify-content:center; padding: 14px 0 28px; }
.portal-tiles {
  width: min(680px, calc(100vw - 32px)); margin: 0 auto;
  grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.portal-tile {
  aspect-ratio: 1 / 1; min-height: 0; padding: 20px; border-radius: 22px;
}
.portal-tile-icon { width: 48px; height: 48px; border-radius: 16px; font-size: 23px; }
.portal-tile-title { margin-top: 12px; font-size: 21px; }
.portal-tile-description { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.portal-tile:hover, .portal-tile:focus-visible { transform: translateY(-3px); }

/* Workspace account control sits above the right data panel */
.workspace-session-menu {
  position: fixed;
  top: var(--shell-padding);
  right: var(--shell-padding);
  z-index: 1000;
}
.workspace-session-menu .session-menu-trigger {
  box-sizing: border-box;
  width: var(--right-pane);
  min-width: 0;
  min-height: 74px;
  grid-template-columns: minmax(0, 1fr) 48px 14px;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-radius: 22px;
  border-color: rgba(0,168,181,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 34px rgba(33,80,104,.12);
}
.workspace-session-menu .session-menu-kicker {
  font-size: 10px;
  letter-spacing: .12em;
}
.workspace-session-menu .session-menu-copy strong {
  font-size: 15px;
  line-height: 1.1;
}
.workspace-session-menu .session-menu-copy span:last-child {
  font-size: 11px;
  line-height: 1.25;
}
.workspace-session-menu .session-menu-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 17px;
}
.workspace-session-menu .session-menu-dropdown {
  right: 0;
  width: var(--right-pane);
  z-index: 1100;
}
.workspace-wrap .topbar { padding-right: 18px; }
.workspace-wrap .top-actions { padding-right: 0; }
.details-panel {
  margin-top: calc(74px + var(--topbar-gap));
  min-height: 0;
  padding-top: var(--panel-padding);
}

@media (max-width: 1100px) {
  .workspace-session-menu {
    position: absolute;
    top: var(--shell-padding);
    right: var(--shell-padding);
  }
  .workspace-session-menu .session-menu-trigger,
  .workspace-session-menu .session-menu-dropdown {
    width: var(--right-pane);
    min-width: 0;
  }
}
@media (max-width: 760px) {
  .portal-page-minimal { padding: 8px; }
  .portal-topbar-minimal { flex-direction: column; gap: 10px; }
  .portal-brand, .portal-session-menu, .portal-session-menu .session-menu-trigger { width: 100%; }
  .portal-tiles { width: 100%; grid-template-columns: 1fr; }
  .portal-tile { aspect-ratio: auto; min-height: 190px; }
  .workspace-session-menu { position: static; margin: 8px; }
  .workspace-session-menu .session-menu-trigger,
  .workspace-session-menu .session-menu-dropdown { width: 100%; min-width: 0; }
  .details-panel { margin-top: 0; padding-top: var(--panel-padding); }
}

/* Data pool: normalized input assets */
.data-assets-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0,168,181,.12), rgba(255,255,255,.82));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(33,80,104,.07);
}
.data-assets-summary h3 {
  margin: 5px 0 6px;
  font-family: var(--font-display);
  font-size: 26px;
}
.data-assets-summary p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.data-assets-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.data-assets-summary-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}
.data-assets-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.data-assets-metrics span {
  display: grid;
  min-width: 88px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.data-assets-metrics b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
}
.data-assets-section { margin: 0 0 18px; }
.data-assets-section > .info-title { padding-left: 4px; color: var(--color-text-primary, var(--ink)); }
.data-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 340px));
  gap: 12px;
  align-items: start;
  justify-content: start;
}
.data-asset-card {
  min-width: 0;
  padding: 15px;
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  border: 2px solid rgba(30,132,143,.24);
  box-shadow: 0 3px 8px rgba(33,80,104,.055);
}
.data-asset-version-stack {
  position: relative;
  align-self: start;
  min-width: 0;
  height: fit-content;
  padding: 12px 14px 0 0;
}
.data-asset-version-stack::before,
.data-asset-version-stack::after {
  content: "";
  position: absolute;
  z-index: 0;
  border: 2px solid rgba(30,132,143,.24);
  border-radius: 20px;
  background: rgba(242,251,251,.96);
  box-shadow: 0 3px 7px rgba(33,80,104,.055);
  pointer-events: none;
}
.data-asset-version-stack::before {
  inset: 6px 7px 5px 6px;
}
.data-asset-version-stack::after {
  inset: 0 0 10px 12px;
  opacity: .82;
}
.data-asset-version-current {
  position: relative;
  z-index: 2;
  cursor: pointer;
  border-radius: 20px;
  transition: transform .16s ease, filter .16s ease;
}
.data-asset-version-current:hover { transform: translate(-1px, 1px); filter: drop-shadow(0 3px 6px rgba(0,112,123,.07)); }
.data-asset-version-current:focus-visible { outline: 3px solid rgba(0,168,181,.25); outline-offset: 3px; }
.data-asset-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.data-asset-title {
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
}
.data-asset-card code {
  color: var(--muted);
  font-size: 10px;
  word-break: break-all;
}
.data-asset-type {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,168,181,.1);
  color: var(--teal-deep);
  font-size: 10px;
  font-weight: 900;
}
.data-asset-card-badges {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 5px;
}
.data-asset-version-count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  border: 2px solid rgba(0,128,139,.24);
  border-radius: 999px;
  color: #087b86;
  background: #e4f8f7;
  box-shadow: 0 5px 12px rgba(0,112,123,.12);
  font-size: 11px;
  font-weight: 950;
}
.data-asset-meta {
  display: flex;
  gap: 7px;
  margin: 12px 0 8px;
}
.data-asset-meta span,
.data-asset-source span {
  padding: 4px 7px;
  border-radius: 9px;
  background: rgba(24,54,74,.05);
  color: var(--muted);
  font-size: 10px;
}
.data-asset-source {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 10px;
}
.data-asset-values {
  display: grid;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.data-asset-values div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  color: var(--muted);
  font-size: 11px;
}
.data-asset-values b { color: var(--ink); text-align: right; }
.data-asset-values small { color: var(--muted); font-weight: 500; }
.data-asset-preview {
  max-height: 180px;
  border-radius: 12px;
}
.data-asset-preview table { font-size: 10px; }
.data-asset-preview th,
.data-asset-preview td { max-width: 150px; padding: 7px 8px; overflow: hidden; text-overflow: ellipsis; }
.data-asset-empty {
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
}
.data-asset-source span.calculated {
  color: #5d409e;
  background: rgba(112,80,184,.11);
}
.data-asset-source span.overlay {
  color: #885729;
  background: rgba(180,122,72,.12);
}
.data-asset-source span.uploaded {
  color: #237f9a;
  background: rgba(99,203,227,.13);
}
.data-asset-source span.excel {
  color: #168765;
  background: rgba(71,199,154,.12);
}
.data-asset-source span.manual {
  color: #885729;
  background: rgba(180,122,72,.12);
}
.data-asset-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.data-asset-footer > span {
  color: var(--muted);
  font-size: 10px;
}
.data-asset-footer .btn { flex: 0 0 auto; }
.data-state-card {
  margin-bottom: 18px;
}
.data-state-legend {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:7px 0 13px;
}
.data-state-legend .legend-item {
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.data-state-columns {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.data-state-column { min-width:0; }
.data-state-column-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
  padding:0 2px;
  color:var(--muted);
  font-size:10px;
}
.data-state-column-head b { color:var(--ink); font-size:11px; }
.data-state-column-head span {
  min-width:23px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(24,54,74,.06);
  text-align:center;
  font-weight:900;
}
.data-state-layer-list { display:grid; gap:6px; }
.data-state-layer-list .layer-badge { margin:0; }
.data-state-empty {
  padding:11px;
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--muted);
  font-size:10px;
  text-align:center;
}
.data-asset-card-focus {
  animation:data-asset-focus-pulse 1.6s ease;
}
@keyframes data-asset-focus-pulse {
  0%, 100% { box-shadow:0 3px 8px rgba(33,80,104,.055); }
  35% { border-color:rgba(0,168,181,.72); box-shadow:0 0 0 4px rgba(0,168,181,.11), 0 5px 11px rgba(0,112,123,.09); }
}

.data-asset-modal-shell {
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 44px);
  background: transparent;
}
.data-asset-modal-shell > .modal-backdrop {
  display: block;
  background: rgba(12,34,48,.48);
  backdrop-filter: blur(9px);
}
.data-asset-modal {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1500px, 96vw);
  height: min(860px, 90vh);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 28px;
  background: rgba(248,252,253,.98);
  box-shadow: 0 35px 90px rgba(12,34,48,.3);
}
.data-asset-modal-body {
  min-width: 0;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
}
.data-asset-versions-shell {
  z-index: 96;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 58px);
  background: transparent;
}
.data-asset-versions-shell > .modal-backdrop {
  display: block;
  background: rgba(12,34,48,.54);
  backdrop-filter: blur(10px);
}
.data-asset-versions-modal {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, 94vw);
  max-height: min(820px, 90vh);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 28px;
  background: rgba(248,252,253,.99);
  box-shadow: 0 35px 90px rgba(12,34,48,.34);
}
.data-asset-versions-body {
  min-width: 0;
  min-height: 0;
  padding: 20px;
  overflow: auto;
}
.data-asset-versions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}
.data-asset-versions-grid .data-asset-card { height: 100%; }
.data-asset-full-table {
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--color-surface);
}
.data-asset-full-table table {
  width: max-content;
  min-width: 100%;
  font-size: 11px;
}
.data-asset-full-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f1f8f9;
  box-shadow: 0 1px 0 var(--line);
}
.data-asset-full-table th,
.data-asset-full-table td {
  max-width: 360px;
  padding: 9px 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-import-modal-shell {
  z-index: 95;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 38px);
  background: transparent;
}
.data-import-modal-shell > .modal-backdrop {
  display: block;
  background: rgba(12,34,48,.5);
  backdrop-filter: blur(10px);
}
.data-import-modal {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1180px, 96vw);
  height: min(860px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 28px;
  background: rgba(248,252,253,.99);
  box-shadow: 0 35px 90px rgba(12,34,48,.32);
}
.data-import-tabs {
  display: flex;
  gap: 7px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.6);
}
.data-import-tabs button {
  padding: 8px 13px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}
.data-import-tabs button.active {
  color: var(--teal-deep);
  background: rgba(0,168,181,.12);
}
.data-import-body {
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 24px;
}
.data-import-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  border: 2px dashed rgba(0,168,181,.3);
  border-radius: 20px;
  background: rgba(0,168,181,.045);
  text-align: center;
  transition: .16s ease;
}
.data-import-drop.dragover {
  border-color: var(--teal);
  background: rgba(0,168,181,.11);
  transform: translateY(-1px);
}
.data-import-drop-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(0,168,181,.12);
  color: var(--teal-deep);
  font-size: 24px;
  font-weight: 900;
}
.data-import-drop b { font-size: 14px; }
.data-import-drop span { color: var(--muted); font-size: 11px; }
.data-import-drop .btn { margin-top: 5px; }
.data-import-progress {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  color: var(--teal-deep);
  background: rgba(0,168,181,.09);
  font-size: 12px;
  font-weight: 800;
}
.data-import-result-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 18px 0 10px;
}
.data-import-result-head > div { display: grid; gap: 3px; }
.data-import-result-head span { color: var(--muted); font-size: 11px; }
.data-upload-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 10px;
}
.data-upload-item {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--color-surface);
}
.data-upload-item-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.data-upload-item-actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.data-upload-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(243,107,107,.18);
  border-radius: 9px;
  color: #a34a4a;
  background: rgba(243,107,107,.08);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.data-upload-remove:hover {
  border-color: rgba(243,107,107,.38);
  background: rgba(243,107,107,.15);
}
.data-upload-item-head > div { min-width: 0; display: grid; gap: 3px; }
.data-upload-item-head b,
.data-upload-item-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-upload-item-head b { font-size: 12px; }
.data-upload-item-head span { color: var(--muted); font-size: 9px; }
.data-upload-item-head em {
  flex: 0 0 auto;
  align-self: start;
  padding: 5px 7px;
  border-radius: 9px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.data-upload-item-head em.high { color: #168765; background: rgba(71,199,154,.13); }
.data-upload-item-head em.medium { color: #9a6b10; background: rgba(243,189,79,.16); }
.data-upload-item-head em.low { color: #a34a4a; background: rgba(243,107,107,.12); }
.data-upload-reason {
  min-height: 30px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 10px;
}
.data-upload-item label,
.data-manual-form label,
.data-template-picker label {
  display: grid;
  gap: 5px;
}
.data-upload-item label > span,
.data-manual-form label > span,
.data-template-picker label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.data-upload-preview {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.data-upload-preview code {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-asset-card.is-active-version {
  border-color: rgba(33,174,139,.48);
  box-shadow: 0 4px 10px rgba(30,139,118,.07);
}
.data-asset-card.is-inactive-version {
  border-color: rgba(70,104,121,.25);
  opacity: .88;
}
.data-asset-status {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}
.data-asset-status.active {
  color: #168765;
  background: rgba(71,199,154,.14);
}
.data-asset-status.partial {
  color: #9a6b10;
  background: rgba(243,189,79,.16);
}
.data-asset-status.inactive {
  color: var(--muted);
  background: rgba(108,130,145,.10);
}
.data-asset-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.btn.danger {
  color: #a34a4a;
  border-color: rgba(243,107,107,.22);
}
.data-import-explanation {
  display: grid;
  gap: 5px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,168,181,.07);
}
.data-import-explanation b { font-size: 13px; }
.data-import-explanation span { color: var(--muted); font-size: 11px; }
.data-manual-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
}
.data-manual-form .wide { grid-column: 1 / -1; }
.data-manual-actions { display: flex !important; justify-content: flex-end; }
.data-template-picker {
  display: grid;
  grid-template-columns: minmax(280px, 620px) auto;
  gap: 12px;
  align-items: end;
}
.sheet-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.sheet-status-item {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(24,54,74,.04);
  border: 1px solid var(--line);
}
.sheet-status-item b { font-size: 12px; }
.sheet-status-item span,
.sheet-status-item small { color: var(--muted); font-size: 10px; }
.sheet-status-item.loaded { border-color: rgba(71,199,154,.32); background: rgba(71,199,154,.08); }
.sheet-status-item.empty { border-color: rgba(243,189,79,.34); background: rgba(243,189,79,.08); }
.sheet-status-item.unmapped { border-color: rgba(243,107,107,.3); background: rgba(243,107,107,.07); }
.sheet-status-item.documentation,
.sheet-status-item.ignored { opacity: .72; }

@media (max-width: 760px) {
  .data-assets-summary { grid-template-columns: 1fr; padding: 16px; }
  .data-assets-summary-side { justify-items: stretch; }
  .data-assets-actions { justify-content: flex-start; }
  .data-assets-metrics { justify-content: flex-start; }
  .data-assets-grid { grid-template-columns: 1fr; }
  .data-state-columns { grid-template-columns: 1fr; }
  .data-asset-modal-shell { padding: 8px; }
  .data-asset-modal { width: 100%; height: 100%; border-radius: 20px; }
  .data-asset-versions-shell { padding: 8px; }
  .data-asset-versions-modal { width: 100%; max-height: 96vh; border-radius: 20px; }
  .data-asset-versions-grid { grid-template-columns: 1fr; }
  .data-import-modal-shell { padding: 6px; }
  .data-import-modal { width: 100%; height: 100%; border-radius: 18px; }
  .data-import-result-head { align-items: stretch; flex-direction: column; }
  .data-upload-items,
  .data-manual-form,
  .data-template-picker { grid-template-columns: 1fr; }
}


/* 2026-07-30 · unified top chrome and learning typography */
.brand-title,
.page-title,
.portal-tile-title,
.admin-hero h1,
.learning-hero h2,
.learning-task-card h3,
.learning-section-head h2,
.exercise-sidebar h1,
.exercise-panel h2,
.builder-top h1,
.builder-list h2,
.builder-panel-head h2 {
  font-weight: 800;
  letter-spacing: -0.018em;
}
.brand-title { font-size: 19px; }
.session-menu-kicker { font-size: 10px; letter-spacing: .12em; }
.session-menu-copy strong { font-size: 14px; font-weight: 800; }
.session-menu-copy span:last-child { font-size: 11px; }
.btn { font-weight: 700; }

.page-shell {
  min-height: 100vh;
  padding: 12px 16px 20px;
}
.page-shell-wide { padding-bottom: 16px; }
.page-content-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}
.page-content-shell-wide { width: min(1500px, 100%); }
.page-topbar {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 14px;
}
.topbar-brand {
  margin: 0;
  padding: 12px 16px;
  border-radius: 22px;
}
.page-topbar .session-menu {
  margin: 0 0 0 auto;
}
.page-topbar .session-menu-trigger {
  min-width: 286px;
  min-height: 74px;
  grid-template-columns: minmax(0, 1fr) 48px 14px;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-radius: 22px;
  border-color: rgba(0,168,181,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 34px rgba(33,80,104,.12);
}
.page-topbar .session-menu-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 17px;
}
.page-topbar .session-menu-dropdown {
  right: 0;
  width: min(320px, calc(100vw - 32px));
  z-index: 120;
}
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 28px;
  margin-bottom: 16px;
}
.page-toolbar h1 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.06;
  font-weight: 800;
}
.page-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.page-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-page,
.learning-page,
.workspace-page {
  background: radial-gradient(circle at 10% 5%,rgba(38,215,187,.13),transparent 28%),linear-gradient(135deg,#f6fafb,#eaf2f4);
}

.learning-shell {
  width: min(1180px, 100%);
  padding: 0 0 36px;
}
.learning-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow-soft);
  margin-bottom: 18px;
}
.learning-hero h2 {
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-size: 30px;
}
.learning-hero p,
.muted { color: var(--muted); }
.learning-hero-stat strong {
  font: 800 42px/1 var(--font-display);
  color: var(--teal-deep);
}
.learning-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.learning-task-card { min-height: 220px; }
.learning-task-card h3 { font-size: 20px; margin: 18px 0 8px; }
.learning-chip { font-weight: 700; }
.learning-score { min-width: 130px; }
.learning-score strong { font: 800 22px var(--font-display); }

.exercise-shell { grid-template-columns: 280px minmax(500px,1fr) 300px; margin: 0 auto 24px; }
.exercise-sidebar, .exercise-panel, .builder-list, .builder-main, .admin-access-panel { background: rgba(255,255,255,.78); }
.exercise-sidebar { top: 16px; }
.exercise-right .sticky { top: 16px; }
.exercise-sidebar h1 { font: 800 25px/1.14 var(--font-display); }
.exercise-panel h2 { font: 800 23px var(--font-display); }
.exercise-subtitle { font: 800 15px var(--font-display); }
.answer-table-head, .exercise-meta span, .hint-card strong { font-weight: 700; }

.builder-shell { margin: 0 auto 24px; }
.builder-list, .builder-main { min-height: calc(100vh - 190px); }
.builder-list-top { display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 14px; }
.builder-list h2 { font: 800 21px var(--font-display); margin: 4px 0 0; }
.builder-top h1 { font: 800 28px var(--font-display); }
.builder-panel-head h2 { font: 800 21px var(--font-display); }
.builder-task-item span,
.builder-tabs button,
.field span { font-weight: 700; }

.admin-shell { width: min(1180px, 100%); }
.admin-main { display: grid; gap: 16px; }
.admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 26px;
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow-soft);
}
.admin-hero h1 { margin: 6px 0 8px; font-size: 30px; }
.admin-hero p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.admin-role-chip { padding: 14px 16px; border-radius: 20px; }
.admin-summary-grid { gap: 14px; }
.admin-summary-card strong { font-weight: 800; }
.admin-panel-header h2 { font-weight: 800; }

.workspace-page { padding: 12px 16px 18px; }
.workspace-page-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.workspace-page .app-shell {
  flex: 1;
  min-height: 0;
  height: auto;
  padding: 0;
}
.workspace-page .sidebar { padding-top: 18px; }
.workspace-page .topbar { margin-top: 0; }
.workspace-page .details-panel { margin-top: 0; }
.workspace-page .workspace-wrap { min-width: 0; }
.workspace-page .page-topbar { margin-bottom: 0; }
.workspace-page .page-topbar .session-menu-dropdown { width: var(--right-pane); }
.workspace-page .details-panel { align-self: stretch; }

/* neutralize old floating workspace account widget */
.workspace-wrap .topbar { padding-right: 16px; }

@media (max-width: 1100px) {
  .learning-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exercise-shell { grid-template-columns: 250px 1fr; }
  .exercise-right { grid-column: 2; }
  .exercise-right .sticky { position: static; }
  .builder-shell { grid-template-columns: 240px 1fr; }
}
@media (max-width: 760px) {
  .page-shell,
  .workspace-page { padding: 8px; }
  .page-topbar { flex-direction: column; gap: 12px; }
  .topbar-brand,
  .page-topbar .session-menu,
  .page-topbar .session-menu-trigger,
  .page-topbar .session-menu-dropdown { width: 100%; min-width: 0; }
  .page-toolbar { align-items: flex-start; flex-direction: column; padding: 18px; }
  .page-toolbar-actions { width: 100%; justify-content: flex-start; }
  .learning-task-grid { grid-template-columns: 1fr; }
  .exercise-shell, .builder-shell { display: block; width: 100%; }
  .exercise-sidebar, .exercise-right .sticky { position: static; margin-bottom: 10px; }
  .exercise-main { margin-bottom: 10px; }
  .dataset-list { grid-template-columns: 1fr; }
  .builder-list { min-height: auto; margin-bottom: 10px; }
  .builder-main { min-height: 600px; }
  .form-grid, .builder-card-grid, .builder-readiness { grid-template-columns: 1fr; }
  .editor-row, .answer-editor-row, .hint-editor-row { grid-template-columns: 1fr; }
  .builder-tabs { overflow: auto; }
  .builder-tabs button { white-space: nowrap; }
  .workspace-page-shell { height: auto; min-height: 100vh; }
  .workspace-page .app-shell { flex: initial; }
}


/* 2026-07-30 · admin cabinet navigation */
.page-toolbar:not(:has(.page-toolbar-actions)) { justify-content: flex-start; }
.admin-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.admin-nav {
  position: sticky;
  top: 14px;
  padding: 16px;
  border-radius: 24px;
}
.admin-nav-label {
  padding: 4px 8px 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.admin-nav nav { display: grid; gap: 6px; }
.admin-nav-item {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 15px;
  color: var(--ink);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.admin-nav-item:hover { transform: translateX(2px); background: rgba(0,168,181,.07); }
.admin-nav-item.active { color: var(--teal-deep); background: rgba(0,168,181,.11); }
.admin-nav-item > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(0,168,181,.08);
  font-weight: 800;
}
.admin-nav-item strong,
.admin-nav-item small { display:block; }
.admin-nav-item strong { font-size: 13px; font-weight: 700; }
.admin-nav-item small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.admin-content-column { min-width: 0; }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: grid; gap: 16px; }
.admin-overview-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.admin-tab-panel[data-admin-panel="access"] .admin-hero { margin-top: 0; }
.admin-tab-panel[data-admin-panel="access"] .admin-main { display: contents; }
.admin-tab-panel[data-admin-panel="access"] > .admin-hero,
.admin-tab-panel[data-admin-panel="access"] > .admin-summary-grid,
.admin-tab-panel[data-admin-panel="access"] > .admin-access-panel,
.admin-tab-panel[data-admin-panel="access"] > .admin-message { margin: 0; }

.builder-page .builder-shell {
  width: 100%;
  margin: 0;
}
.builder-page .builder-list,
.builder-page .builder-main { min-height: calc(100vh - 210px); }
.builder-page .admin-nav-item[data-admin-tab="tasks"] { color: var(--teal-deep); background: rgba(0,168,181,.11); }

/* quieter page headers: navigation lives in logo and session menu */
.learning-page .page-toolbar-actions .btn,
.admin-page .page-toolbar-actions .btn,
.builder-page .page-toolbar-actions .btn { display: none; }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav { position: static; }
  .admin-nav nav { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .admin-nav-item { grid-template-columns: 30px minmax(0,1fr); padding: 9px; }
  .admin-nav-item > span { width: 30px; height: 30px; }
}
@media (max-width: 620px) {
  .admin-nav nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-overview-grid { grid-template-columns: 1fr; }
}

/* 2026-07-30 · task builder layout correction */
.builder-page .admin-content-column {
  min-width: 0;
  overflow: visible;
}
.builder-page .builder-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  margin: 0;
  align-items: stretch;
}
.builder-page .builder-list,
.builder-page .builder-main {
  box-sizing: border-box;
  min-width: 0;
  min-height: calc(100vh - 210px);
  padding: 20px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-soft);
}
.builder-page .builder-list-top {
  min-height: 52px;
  margin: 0 0 16px;
  align-items: center;
}
.builder-page .builder-list-top .soft-label {
  display: block;
  margin: 0 0 5px;
  line-height: 1.3;
}
.builder-page .builder-list h2 {
  margin: 0;
  line-height: 1.2;
}
.builder-page #taskList {
  display: grid;
  gap: 6px;
}
.builder-page .learning-empty.compact {
  margin-top: 8px;
  padding: 18px 14px;
}
.builder-page .builder-main {
  padding: 24px;
}
.builder-page .builder-empty {
  min-height: 420px;
}
@media (max-width: 1100px) {
  .builder-page .builder-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .builder-page .builder-shell {
    display: block;
  }
  .builder-page .builder-list {
    min-height: auto;
    margin-bottom: 12px;
  }
}


/* 2026-07-30 · admin tasks visual unification + hide workspace chrome on fullscreen modals */
.builder-page .page-shell { padding-bottom: 18px; }
.builder-page .admin-shell {
  width: min(1180px, 100%);
}
.builder-page .admin-hero {
  margin-bottom: 16px;
}
.builder-page .admin-layout {
  align-items: start;
}
.builder-page .builder-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  margin: 0;
}
.builder-page .builder-list,
.builder-page .builder-main {
  min-height: 620px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-soft);
}
.builder-page .builder-list {
  padding: 18px;
}
.builder-page .builder-main {
  padding: 22px;
}
.builder-page .builder-list-top h2 {
  font-size: 20px;
  line-height: 1.15;
}
.builder-page .builder-empty {
  min-height: 460px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(245,250,252,.72), rgba(255,255,255,.9));
}
.builder-page .builder-task-item {
  border-radius: 16px;
}
.builder-page .builder-task-item.active {
  box-shadow: inset 0 0 0 1px rgba(0,168,181,.22);
}
.builder-page .builder-tabs {
  gap: 8px;
}
.builder-page .builder-tab {
  padding-top: 4px;
}
.builder-page .builder-panel-head,
.builder-page .builder-top {
  align-items: start;
}
.builder-page .builder-actions .btn,
.builder-page .builder-list-top .btn.small {
  min-height: 44px;
}

.workspace-page.modal-open .workspace-global-topbar {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  height: 0;
  margin: 0;
  overflow: hidden;
}
.workspace-page.modal-open .workspace-page-shell {
  gap: 0;
}
.workspace-page.modal-open .app-shell {
  height: 100vh;
}

@media (max-width: 1100px) {
  .builder-page .builder-shell {
    grid-template-columns: 270px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .builder-page .builder-shell {
    display: block;
  }
  .builder-page .builder-list {
    min-height: auto;
    margin-bottom: 12px;
  }
  .builder-page .builder-main {
    min-height: 540px;
  }
}


/* 2026-07-30 · consistent session menu and workspace sidebar actions */
.page-topbar .session-menu-dropdown { width: 320px; }
.page-topbar .session-density { display: grid; gap: 7px; }
.page-topbar .session-density > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.page-topbar .session-density select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  font-size: 11px;
}
.sidebar .sidebar-case-btn { width: 100%; justify-content: center; }
.sidebar #addCaseDataBtn { order: 0; }
.sidebar #createCaseBtn { order: 1; }


/* Platform-wide interface density.
   The legacy storage key is intentionally retained so existing user choices
   continue to work on every page. */
:root {
  --platform-page-pad-y: 12px;
  --platform-page-pad-x: 16px;
  --platform-page-pad-bottom: 20px;
  --platform-content-width: 1360px;
  --platform-wide-content-width: 1500px;
  --platform-section-gap: 16px;
  --platform-panel-padding: 24px;
  --platform-panel-radius: 24px;
  --platform-topbar-min: 82px;
  --platform-brand-pad-y: 12px;
  --platform-brand-pad-x: 16px;
  --platform-session-width: 286px;
  --platform-session-height: 74px;
  --platform-session-avatar: 48px;
  --platform-toolbar-padding-y: 22px;
  --platform-toolbar-padding-x: 24px;
  --platform-title-size: 30px;
  --platform-portal-width: 680px;
  --platform-portal-card-padding: 20px;
  --platform-portal-card-title: 21px;
  --platform-learning-card-min: 220px;
  --platform-admin-nav-width: 230px;
  --platform-builder-list-width: 300px;
  --platform-builder-min-height: 620px;
  --platform-exercise-left: 280px;
  --platform-exercise-main-min: 500px;
  --platform-exercise-right: 300px;
}

:root[data-layout-density="compact"],
:root[data-layout-density="auto"] {
  --platform-page-pad-y: 8px;
  --platform-page-pad-x: 12px;
  --platform-page-pad-bottom: 14px;
  --platform-content-width: 1180px;
  --platform-wide-content-width: 1320px;
  --platform-section-gap: 10px;
  --platform-panel-padding: 16px;
  --platform-panel-radius: 20px;
  --platform-topbar-min: 66px;
  --platform-brand-pad-y: 9px;
  --platform-brand-pad-x: 13px;
  --platform-session-width: 250px;
  --platform-session-height: 62px;
  --platform-session-avatar: 42px;
  --platform-toolbar-padding-y: 16px;
  --platform-toolbar-padding-x: 18px;
  --platform-title-size: 26px;
  --platform-portal-width: 610px;
  --platform-portal-card-padding: 16px;
  --platform-portal-card-title: 19px;
  --platform-learning-card-min: 185px;
  --platform-admin-nav-width: 205px;
  --platform-builder-list-width: 250px;
  --platform-builder-min-height: 520px;
  --platform-exercise-left: 235px;
  --platform-exercise-main-min: 430px;
  --platform-exercise-right: 250px;
}

:root[data-layout-density="spacious"] {
  --platform-page-pad-y: 12px;
  --platform-page-pad-x: 16px;
  --platform-page-pad-bottom: 20px;
  --platform-content-width: 1360px;
  --platform-wide-content-width: 1500px;
  --platform-section-gap: 16px;
  --platform-panel-padding: 24px;
  --platform-panel-radius: 24px;
  --platform-topbar-min: 82px;
  --platform-brand-pad-y: 12px;
  --platform-brand-pad-x: 16px;
  --platform-session-width: 286px;
  --platform-session-height: 74px;
  --platform-session-avatar: 48px;
  --platform-toolbar-padding-y: 22px;
  --platform-toolbar-padding-x: 24px;
  --platform-title-size: 30px;
  --platform-portal-width: 680px;
  --platform-portal-card-padding: 20px;
  --platform-portal-card-title: 21px;
  --platform-learning-card-min: 220px;
  --platform-admin-nav-width: 230px;
  --platform-builder-list-width: 300px;
  --platform-builder-min-height: 620px;
  --platform-exercise-left: 280px;
  --platform-exercise-main-min: 500px;
  --platform-exercise-right: 300px;
}

@media (min-width: 2000px) and (min-height: 1100px) {
  :root[data-layout-density="auto"] {
    --platform-page-pad-y: 12px;
    --platform-page-pad-x: 16px;
    --platform-page-pad-bottom: 20px;
    --platform-content-width: 1360px;
    --platform-wide-content-width: 1500px;
    --platform-section-gap: 16px;
    --platform-panel-padding: 24px;
    --platform-panel-radius: 24px;
    --platform-topbar-min: 82px;
    --platform-brand-pad-y: 12px;
    --platform-brand-pad-x: 16px;
    --platform-session-width: 286px;
    --platform-session-height: 74px;
    --platform-session-avatar: 48px;
    --platform-toolbar-padding-y: 22px;
    --platform-toolbar-padding-x: 24px;
    --platform-title-size: 30px;
    --platform-portal-width: 680px;
    --platform-portal-card-padding: 20px;
    --platform-portal-card-title: 21px;
    --platform-learning-card-min: 220px;
    --platform-admin-nav-width: 230px;
    --platform-builder-list-width: 300px;
    --platform-builder-min-height: 620px;
    --platform-exercise-left: 280px;
    --platform-exercise-main-min: 500px;
    --platform-exercise-right: 300px;
  }
}

.portal-page-minimal,
.page-shell,
.workspace-page {
  padding: var(--platform-page-pad-y) var(--platform-page-pad-x) var(--platform-page-pad-bottom);
}
.page-content-shell:not(.page-content-shell-wide),
.admin-shell,
.learning-shell {
  width: min(var(--platform-content-width), 100%);
  max-width: none;
}
.page-content-shell-wide {
  width: min(var(--platform-wide-content-width), 100%);
  max-width: none;
}
.builder-page .admin-shell {
  width: min(var(--platform-content-width), 100%);
  max-width: none;
}
.portal-topbar-minimal { min-height: var(--platform-topbar-min); }
.portal-brand,
.topbar-brand {
  padding: var(--platform-brand-pad-y) var(--platform-brand-pad-x);
  border-radius: var(--platform-panel-radius);
}
.portal-session-menu .session-menu-trigger,
.page-topbar .session-menu-trigger {
  min-width: var(--platform-session-width);
  min-height: var(--platform-session-height);
  grid-template-columns: minmax(0, 1fr) var(--platform-session-avatar) 14px;
  padding: var(--platform-brand-pad-y) 14px var(--platform-brand-pad-y) var(--platform-brand-pad-x);
  border-radius: var(--platform-panel-radius);
}
.portal-session-menu .session-menu-avatar,
.page-topbar .session-menu-avatar {
  width: var(--platform-session-avatar);
  height: var(--platform-session-avatar);
}
.page-topbar,
.page-toolbar,
.learning-hero,
.admin-main,
.admin-tab-panel.active {
  gap: var(--platform-section-gap);
}
.page-topbar { margin-bottom: var(--platform-section-gap); }
.page-toolbar {
  padding: var(--platform-toolbar-padding-y) var(--platform-toolbar-padding-x);
  border-radius: calc(var(--platform-panel-radius) + 4px);
  margin-bottom: var(--platform-section-gap);
}
.page-toolbar h1 { font-size: clamp(var(--platform-title-size), 3vw, 38px); }

.portal-main-minimal { padding: var(--platform-section-gap) 0 calc(var(--platform-section-gap) * 2); }
.portal-tiles {
  width: min(var(--platform-portal-width), calc(100vw - 32px));
  gap: var(--platform-section-gap);
}
.portal-tile {
  padding: var(--platform-portal-card-padding);
  border-radius: var(--platform-panel-radius);
}
.portal-tile-title { font-size: var(--platform-portal-card-title); }

.learning-shell { padding-bottom: calc(var(--platform-section-gap) * 2); }
.learning-hero,
.admin-hero {
  gap: var(--platform-section-gap);
  padding: var(--platform-panel-padding);
  border-radius: calc(var(--platform-panel-radius) + 4px);
  margin-bottom: var(--platform-section-gap);
}
.learning-hero h2,
.admin-hero h1 { font-size: var(--platform-title-size); }
.learning-task-grid { gap: var(--platform-section-gap); }
.learning-task-card { min-height: var(--platform-learning-card-min); }

.admin-layout {
  grid-template-columns: var(--platform-admin-nav-width) minmax(0, 1fr);
  gap: var(--platform-section-gap);
}
.admin-nav {
  padding: var(--platform-panel-padding);
  border-radius: var(--platform-panel-radius);
}

.exercise-shell {
  grid-template-columns:
    var(--platform-exercise-left)
    minmax(var(--platform-exercise-main-min), 1fr)
    var(--platform-exercise-right);
  gap: var(--platform-section-gap);
  margin-bottom: calc(var(--platform-section-gap) * 1.5);
}
.exercise-sidebar,
.exercise-panel {
  padding: var(--platform-panel-padding);
  border-radius: var(--platform-panel-radius);
}

.builder-page .builder-shell {
  grid-template-columns: var(--platform-builder-list-width) minmax(0, 1fr);
  gap: var(--platform-section-gap);
}
.builder-page .builder-list,
.builder-page .builder-main {
  min-height: var(--platform-builder-min-height);
  border-radius: var(--platform-panel-radius);
}
.builder-page .builder-list { padding: var(--platform-panel-padding); }
.builder-page .builder-main { padding: var(--platform-panel-padding); }

@media (max-width: 1100px) {
  .exercise-shell {
    grid-template-columns: var(--platform-exercise-left) minmax(0, 1fr);
  }
  .builder-page .builder-shell {
    grid-template-columns: min(240px, var(--platform-builder-list-width)) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .portal-page-minimal,
  .page-shell,
  .workspace-page { padding: 8px; }
  .portal-tiles { width: 100%; }
  .admin-layout { grid-template-columns: 1fr; }
  .exercise-shell,
  .builder-page .builder-shell { display: block; }
}


/* Learning flow MVP */
.builder-page,
.learning-task-page {
  overflow: auto;
}

.builder-page .admin-shell {
  width: min(var(--platform-content-width), 100%);
}

.learning-builder-toolbar {
  background:
    radial-gradient(circle at 88% 20%, rgba(38, 215, 187, .16), transparent 28%),
    rgba(255, 255, 255, .82);
}

.builder-shell-v2 {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--platform-section-gap);
  align-items: stretch;
}

.builder-shell-v2 .builder-list,
.builder-shell-v2 .builder-main {
  min-height: 680px;
  border: 1px solid rgba(255, 255, 255, .94);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(27, 63, 82, .075);
}

.builder-shell-v2 .builder-list {
  padding: 16px;
}

.builder-shell-v2 .builder-main {
  padding: clamp(18px, 2vw, 26px);
}

.builder-save-state {
  margin-top: 5px;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.builder-save-state.dirty {
  color: var(--yellow);
}

.builder-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0;
  padding: 5px;
  border: 1px solid rgba(36, 67, 84, .08);
  border-radius: 18px;
  background: rgba(235, 244, 246, .72);
}

.builder-steps button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 9px 12px;
  border: 0;
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.builder-steps button b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .1);
  font-size: 11px;
}

.builder-steps button.active {
  color: var(--ink);
  background: var(--color-surface);
  box-shadow: 0 5px 14px rgba(27, 63, 82, .08);
}

.builder-steps button.active b {
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
}

.builder-page .builder-tab {
  display: none;
  padding-top: 4px;
}

.builder-page .builder-tab.active {
  display: block;
}

.builder-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(36, 67, 84, .09);
}

.builder-section-heading h2 {
  margin: 5px 0 0;
  font: 800 23px/1.15 var(--font-display);
}

.builder-section-heading > p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.builder-meta-grid {
  max-width: 880px;
}

.builder-page .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.builder-page .field {
  display: grid;
  gap: 6px;
}

.builder-page .field.full {
  grid-column: 1 / -1;
}

.builder-page .field > span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.builder-page .field input,
.builder-page .field select,
.builder-page .field textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  outline: none;
}

.builder-page .field input:focus,
.builder-page .field select:focus,
.builder-page .field textarea:focus {
  border-color: rgba(0, 168, 181, .42);
  box-shadow: 0 0 0 3px rgba(0, 168, 181, .08);
}

.builder-tab-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(36, 67, 84, .08);
}

.scenario-studio {
  display: grid;
  grid-template-columns: 220px minmax(360px, 1fr) 220px;
  gap: 12px;
  align-items: start;
}

.scenario-data-library,
.scenario-chain-panel,
.scenario-pool-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(0, 168, 181, .11);
  border-radius: 20px;
  background: rgba(247, 251, 252, .9);
}

.scenario-chain-panel {
  background:
    linear-gradient(rgba(0, 168, 181, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 168, 181, .035) 1px, transparent 1px),
    rgba(247, 251, 252, .92);
  background-size: 24px 24px;
}

.scenario-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.scenario-panel-head span,
.scenario-selected-head {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.scenario-panel-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.scenario-panel-head > b {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 9px;
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .09);
  font-size: 9px;
}

.scenario-data-library .input {
  width: 100%;
  margin-bottom: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--color-surface);
}

.scenario-asset-catalog {
  max-height: 280px;
  display: grid;
  gap: 6px;
  padding-right: 3px;
  overflow: auto;
}

.scenario-asset-option {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(36, 67, 84, .08);
  border-radius: 12px;
  color: var(--ink);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
}

.scenario-asset-option:hover {
  border-color: rgba(0, 168, 181, .3);
  transform: translateY(-1px);
}

.scenario-asset-option strong,
.scenario-selected-asset strong,
.scenario-pool-row strong,
.learning-pool-row strong {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-asset-option small,
.scenario-selected-asset small,
.scenario-pool-row small,
.learning-pool-row small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-asset-option > b {
  color: var(--teal);
  font-size: 17px;
}

.data-type-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .09);
  font-size: 10px;
  font-weight: 800;
}

.scenario-selected-head {
  margin: 14px 0 8px;
}

.scenario-selected-assets {
  display: grid;
  gap: 6px;
}

.scenario-selected-asset,
.scenario-pool-row,
.learning-pool-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(0, 168, 181, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
}

.scenario-selected-asset > button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  color: var(--red);
  background: rgba(243, 107, 107, .1);
  cursor: pointer;
}

.scenario-flow {
  min-height: 240px;
}

.scenario-flow-node {
  position: relative;
  border: 1px solid rgba(0, 168, 181, .17);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 7px 18px rgba(27, 63, 82, .065);
}

.scenario-flow-node.pool {
  max-width: 320px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  margin: 0 auto;
  border-color: rgba(38, 215, 187, .35);
  background: linear-gradient(135deg, rgba(0, 168, 181, .11), rgba(38, 215, 187, .07)), white;
}

.scenario-flow-node.pool small,
.scenario-flow-node.pool strong,
.scenario-flow-node.pool span {
  display: block;
}

.scenario-flow-node.pool small {
  color: var(--teal-deep);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.scenario-flow-node.pool strong {
  margin-top: 2px;
  font-size: 13px;
}

.scenario-flow-node.pool span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.scenario-node-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0, 168, 181, .1);
  font-size: 18px;
}

.scenario-flow-arrow {
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--teal);
}

.scenario-flow-arrow span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 4px 10px rgba(27, 63, 82, .08);
}

.scenario-flow-node.card {
  padding: 12px;
}

.scenario-flow-node.card.blocked {
  border-color: rgba(243, 107, 107, .24);
  background: rgba(255, 247, 247, .96);
}

.scenario-node-top {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.scenario-node-top small,
.scenario-node-top strong,
.scenario-node-top span {
  display: block;
}

.scenario-node-top small {
  color: var(--teal-deep);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.scenario-node-top strong {
  margin-top: 2px;
  font-size: 12px;
}

.scenario-node-top > div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.scenario-node-actions {
  display: flex;
  gap: 3px;
}

.scenario-node-actions button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--color-surface);
  cursor: pointer;
}

.scenario-node-actions button:last-child {
  color: var(--red);
}

.scenario-node-actions button:disabled {
  opacity: .35;
  cursor: default;
}

.scenario-node-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(36, 67, 84, .08);
}

.scenario-node-io > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.scenario-node-io b {
  width: 100%;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.scenario-node-io span,
.learning-flow-assets span,
.learning-flow-io span {
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .08);
  font-size: 8px;
}

.scenario-node-io span.missing,
.learning-flow-io span.missing {
  color: #a84f4f;
  background: rgba(243, 107, 107, .11);
}

.scenario-node-io span.optional {
  color: var(--muted);
  background: rgba(108, 130, 145, .08);
}

.learning-flow-io span.optional {
  color: var(--muted);
  background: rgba(108, 130, 145, .08);
}

.scenario-node-io span.new {
  color: #14805f;
  background: rgba(71, 199, 154, .12);
}

.scenario-card-picker {
  margin-top: 16px;
  padding-top: 4px;
}

.scenario-card-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.scenario-card-option {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(36, 67, 84, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
}

.scenario-card-option.blocked {
  opacity: .63;
}

.scenario-card-option-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.scenario-card-option-head > span {
  font-size: 20px;
}

.scenario-card-option strong,
.scenario-card-option small {
  display: block;
}

.scenario-card-option strong {
  font-size: 10px;
}

.scenario-card-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.scenario-card-option p {
  flex: 1;
  margin: 8px 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.scenario-card-option button {
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.scenario-card-option button:disabled {
  color: var(--muted);
  background: rgba(108, 130, 145, .11);
  cursor: default;
}

.scenario-pool-preview {
  display: grid;
  gap: 14px;
}

.scenario-pool-preview section {
  display: grid;
  gap: 6px;
}

.scenario-pool-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.scenario-pool-group-title b {
  min-width: 24px;
  padding: 3px 6px;
  border-radius: 8px;
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .09);
  text-align: center;
}

.scenario-pool-group-title.calculated b {
  color: #14805f;
  background: rgba(71, 199, 154, .12);
}

.answer-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.answer-mode-card {
  position: relative;
  cursor: pointer;
}

.answer-mode-card input {
  position: absolute;
  opacity: 0;
}

.answer-mode-card > div {
  height: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(36, 67, 84, .1);
  border-radius: 16px;
  background: rgba(247, 251, 252, .84);
}

.answer-mode-card input:checked + div {
  border-color: rgba(0, 168, 181, .38);
  background: rgba(0, 168, 181, .07);
  box-shadow: inset 0 0 0 1px rgba(0, 168, 181, .1);
}

.answer-mode-card b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  border-radius: 12px;
  color: var(--teal-deep);
  background: var(--color-surface);
}

.answer-mode-card strong,
.answer-mode-card span {
  display: block;
}

.answer-mode-card strong {
  font-size: 12px;
}

.answer-mode-card span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.answer-builder-card,
.builder-optional,
.publish-panel,
.author-run-notice {
  padding: 16px;
  border: 1px solid rgba(36, 67, 84, .09);
  border-radius: 18px;
  background: rgba(247, 251, 252, .82);
}

.answer-definition-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 32px;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.answer-definition-row.number {
  grid-template-columns: 1fr 1fr;
}

.answer-definition-row label,
.hint-definition-row label {
  display: grid;
  gap: 4px;
}

.answer-definition-row label span,
.hint-definition-row label span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.answer-definition-row input,
.hint-definition-row input,
.hint-definition-row textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--color-surface);
}

.answer-definition-row > button,
.hint-definition-row > button {
  width: 32px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: var(--red);
  background: rgba(243, 107, 107, .1);
}

.author-run-notice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  border-color: rgba(47, 116, 255, .16);
  background: rgba(47, 116, 255, .055);
}

.author-run-notice > div:first-child {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--blue);
  background: var(--color-surface);
}

.author-run-notice strong {
  font-size: 11px;
}

.author-run-notice p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.builder-optional {
  margin-top: 12px;
}

.builder-optional summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.hint-definition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 32px;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.publish-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.publish-panel strong,
.publish-panel span {
  display: block;
}

.publish-panel strong {
  font-size: 11px;
}

.publish-panel span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.publish-panel select {
  min-width: 170px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--color-surface);
}

/* Student / author task run */
.learning-run-shell {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr) 270px;
  gap: var(--platform-section-gap);
  align-items: start;
  padding-bottom: 24px;
}

.learning-run-sidebar,
.learning-run-help .exercise-panel,
.learning-run-main .exercise-panel {
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: var(--platform-panel-radius);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(27, 63, 82, .075);
}

.learning-run-sidebar {
  position: sticky;
  top: 12px;
  padding: var(--platform-panel-padding);
}

.learning-run-sidebar h1 {
  margin: 10px 0 8px;
  font: 800 22px/1.16 var(--font-display);
}

.learning-run-sidebar > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.learning-run-main {
  min-width: 0;
  display: grid;
  gap: var(--platform-section-gap);
}

.learning-run-main .exercise-panel,
.learning-run-help .exercise-panel {
  padding: var(--platform-panel-padding);
}

.learning-run-help .sticky {
  position: sticky;
  top: 12px;
}

.learning-task-switcher {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(36, 67, 84, .09);
}

.learning-task-switcher > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
}

.learning-task-switcher #taskSwitchList {
  display: grid;
  gap: 5px;
}

.learning-task-switcher a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  color: var(--ink);
  background: rgba(0, 168, 181, .055);
  font-size: 9px;
  text-decoration: none;
}

.learning-task-switcher a small {
  color: var(--muted);
}

.learning-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 14px;
  align-items: start;
  margin-top: 16px;
}

.learning-fixed-flow {
  min-width: 0;
  display: grid;
}

.learning-flow-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}

.learning-flow-step-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--teal), var(--mint));
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(0, 168, 181, .18);
}

.learning-flow-step.blocked .learning-flow-step-number {
  background: linear-gradient(135deg, #d87676, #f3a2a2);
}

.learning-flow-step-body {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(0, 168, 181, .13);
  border-radius: 16px;
  background: rgba(247, 251, 252, .88);
}

.learning-flow-step.blocked .learning-flow-step-body {
  border-color: rgba(243, 107, 107, .2);
  background: rgba(255, 248, 248, .9);
}

.learning-flow-step-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.learning-flow-step-head > span {
  font-size: 22px;
  text-align: center;
}

.learning-flow-step-head small,
.learning-flow-step-head strong {
  display: block;
}

.learning-flow-step-head small {
  color: var(--teal-deep);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.learning-flow-step-head strong {
  margin-top: 2px;
  font-size: 12px;
}

.learning-flow-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 9px;
}

.learning-flow-connector {
  width: 34px;
  height: 28px;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--teal);
}

.learning-flow-connector i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 168, 181, .22);
}

.learning-flow-connector span {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  font-size: 10px;
}

.learning-flow-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(36, 67, 84, .08);
}

.learning-flow-io b {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.learning-flow-io > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.learning-flow-warning,
.learning-flow-note {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  color: #a84f4f;
  background: rgba(243, 107, 107, .09);
  font-size: 8px;
}

.learning-flow-note {
  color: #8b6929;
  background: rgba(243, 189, 79, .11);
}

.learning-pool-inspector {
  position: sticky;
  top: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 168, 181, .13);
  border-radius: 17px;
  background: rgba(247, 251, 252, .94);
}

.learning-pool-head,
.learning-pool-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.learning-pool-head span {
  font-size: 11px;
  font-weight: 800;
}

.learning-pool-head b {
  padding: 4px 7px;
  border-radius: 8px;
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .09);
  font-size: 9px;
}

.learning-pool-tabs {
  margin: 10px 0 8px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(108, 130, 145, .08);
}

.learning-pool-tabs button {
  flex: 1;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 8px;
  font-weight: 700;
}

.learning-pool-tabs button.active {
  color: var(--teal-deep);
  background: var(--color-surface);
}

.learning-pool-list {
  max-height: 420px;
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  overflow: auto;
}

.learning-pool-row > b {
  padding: 3px 5px;
  border-radius: 7px;
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .08);
  font-size: 7px;
}

.learning-pool-row > b.calculated {
  color: #14805f;
  background: rgba(71, 199, 154, .12);
}

.learning-workspace-mode .workspace-wrap .topbar {
  border-color: rgba(0, 168, 181, .22);
  background:
    radial-gradient(circle at 58% 0, rgba(38, 215, 187, .14), transparent 34%),
    rgba(255, 255, 255, .82);
}

.learning-workspace-mode .learning-back-btn {
  color: var(--color-text-inverse);
  text-decoration: none;
}

.learning-workspace-mode .library-card.learning-fixed {
  cursor: default;
}

.learning-workspace-mode .library-card.learning-fixed .library-add-btn {
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .08);
  cursor: default;
}

.learning-workspace-mode .desk-card {
  cursor: pointer;
  border-color: rgba(0, 168, 181, .24);
}

.learning-workspace-mode .pool-node,
.learning-workspace-mode .desk-card {
  transition: none;
}

.learning-card-step {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 6px 0 1px;
  padding: 4px 7px;
  border-radius: 8px;
  color: var(--teal-deep);
  background: rgba(0, 168, 181, .09);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.learning-workspace-mode .link-line {
  stroke-width: 3;
  stroke-dasharray: 7 5;
}

.learning-workspace-mode .card-delete,
.learning-workspace-mode .card-attach {
  display: none !important;
}

.learning-workspace-mode .sidebar .upload-panel {
  display: none;
}

.learning-workspace-mode #addCaseDataBtn,
.learning-workspace-mode .data-import-open,
.learning-workspace-mode .data-asset-delete,
.learning-workspace-mode .data-asset-activate {
  display: none !important;
}

.task-data-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 16px 10px;
  border: 1.5px dashed rgba(0, 168, 181, .35);
  border-radius: 14px;
  color: var(--ink-soft);
  background: rgba(237, 253, 252, .7);
  text-align: center;
}

.task-data-drop.dragover {
  border-color: var(--teal);
  background: rgba(29, 201, 183, .12);
}

.task-data-drop > b {
  color: var(--ink);
  font-size: 10px;
}

.task-data-drop > span {
  font-size: 8px;
}

.task-data-inspection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 7px;
}

.task-data-inspection-head > b {
  font-size: 9px;
}

@media (max-width: 1400px) {
  .scenario-studio {
    grid-template-columns: 210px minmax(320px, 1fr);
  }
  .scenario-pool-panel {
    grid-column: 1 / -1;
  }
  .scenario-pool-preview {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1180px) {
  .learning-run-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .learning-run-help {
    grid-column: 2;
  }
  .learning-run-help .sticky {
    position: static;
  }
  .learning-workbench {
    grid-template-columns: 1fr;
  }
  .learning-pool-inspector {
    position: static;
  }
}

@media (max-width: 900px) {
  .builder-shell-v2 {
    grid-template-columns: 1fr;
  }
  .builder-shell-v2 .builder-list {
    min-height: 0;
  }
  .scenario-studio {
    grid-template-columns: 1fr;
  }
  .scenario-pool-panel {
    grid-column: auto;
  }
  .scenario-pool-preview {
    grid-template-columns: 1fr 1fr;
  }
  .learning-run-shell {
    grid-template-columns: 1fr;
  }
  .learning-run-sidebar,
  .learning-run-help {
    position: static;
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .builder-top,
  .builder-section-heading,
  .publish-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .builder-actions {
    width: 100%;
  }
  .builder-actions .btn {
    flex: 1;
  }
  .builder-steps button span {
    display: none;
  }
  .builder-section-heading > p {
    text-align: left;
  }
  .scenario-card-catalog,
  .scenario-pool-preview,
  .answer-mode-grid,
  .scenario-node-io,
  .learning-flow-io {
    grid-template-columns: 1fr;
  }
  .answer-definition-row,
  .answer-definition-row.number,
  .hint-definition-row,
  .builder-page .form-grid {
    grid-template-columns: 1fr;
  }
  .builder-page .field.full {
    grid-column: auto;
  }
  .answer-definition-row > button,
  .hint-definition-row > button {
    width: 100%;
  }
  .learning-flow-step-head {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .learning-flow-step-head .btn {
    grid-column: 1 / -1;
  }
}

/* 2026-07-31 · visual convergence for calculation cards
   Shared presentation only. Calculation logic, ids and event bindings remain unchanged. */
.unified-tool-template {
  --tool-surface: rgba(255,255,255,.82);
  --tool-surface-strong: rgba(255,255,255,.94);
  --tool-border: rgba(24,54,74,.085);
  --tool-radius: 24px;
  align-items: stretch;
}

.unified-tool-template > .tool-left-panel,
.unified-tool-template > .tool-center-panel,
.unified-tool-template > .tool-right-panel {
  min-height: 0;
}

.unified-tool-template .tool-left-panel,
.unified-tool-template .card-surface {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  background: var(--tool-surface);
  box-shadow: 0 16px 42px rgba(29,65,84,.075);
  backdrop-filter: blur(14px);
}

.unified-tool-template .card-surface {
  padding: 20px;
}

.unified-tool-template .tool-left-panel {
  padding: 18px;
}

.unified-tool-template .tool-center-panel,
.unified-tool-template .tool-right-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.unified-tool-template .info-title,
.unified-tool-template .tool-section-title {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -.015em;
}

.unified-tool-template .info-title {
  font-size: 20px;
  line-height: 1.16;
  font-weight: 800;
  margin-bottom: 6px;
}

.unified-tool-template .tool-section-title {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

.unified-tool-template .helper {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 650;
}

.unified-tool-template .source-status-card {
  border-radius: 17px;
  padding: 12px 13px;
  background: rgba(245,250,251,.9);
  border: 1px solid var(--tool-border);
}
.unified-tool-template .source-status-card.ok {
  background: linear-gradient(135deg, rgba(225,250,247,.92), rgba(244,253,252,.94));
  border-color: rgba(0,168,181,.16);
}

.unified-tool-template .tool-kpi-list,
.unified-tool-template .bf-side-kpis,
.unified-tool-template .bf-kpi-grid,
.unified-tool-template .bp-kpi-grid,
.unified-tool-template .summary-grid.mini {
  gap: 9px;
}

.unified-tool-template .tool-kpi-list > div,
.unified-tool-template .bf-side-kpis > div,
.unified-tool-template .bf-kpi-grid > div,
.unified-tool-template .bp-kpi-grid > div,
.unified-tool-template .metric-mini {
  min-height: 58px;
  border-radius: 16px;
  border: 1px solid var(--tool-border);
  background: rgba(255,255,255,.78);
  box-shadow: none;
}

.unified-tool-template .bf-top-tabs,
.unified-tool-template .builder-tabs {
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 17px;
  background: rgba(231,241,244,.72);
  border: 1px solid rgba(24,54,74,.06);
  overflow-x: auto;
}

.unified-tool-template .bf-tab,
.unified-tool-template .bp-tab,
.unified-tool-template .prototype-tab {
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  padding: 9px 14px;
  white-space: nowrap;
}

.unified-tool-template .bf-tab.active,
.unified-tool-template .bp-tab.active,
.unified-tool-template .prototype-tab.active {
  color: var(--teal-deep);
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 18px rgba(29,65,84,.09);
}

.unified-tool-template input:not([type="checkbox"]):not([type="range"]),
.unified-tool-template select,
.unified-tool-template textarea {
  min-height: 40px;
  border-radius: 13px;
  border-color: rgba(197,218,225,.9);
  background: rgba(255,255,255,.96);
}

.unified-tool-template .btn {
  min-height: 40px;
  border-radius: 13px;
}

.unified-tool-template .well-pick {
  border-radius: 15px;
  padding: 11px 12px;
}

.unified-tool-template .well-pick.active {
  background: linear-gradient(135deg, rgba(0,168,181,.12), rgba(38,215,187,.10));
  box-shadow: inset 0 0 0 1px rgba(0,168,181,.12);
}

.unified-tool-template .plot-card,
.unified-tool-template .prototype-result-card,
.unified-tool-template .property-map-card,
.unified-tool-template .bf-result-card,
.unified-tool-template .bp-result-card {
  overflow: hidden;
  background: var(--tool-surface-strong);
}

.unified-tool-template .chart-wrap,
.unified-tool-template .property-map-2d-viewer,
.unified-tool-template .property-map-3d-viewer {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(244,250,251,.72), rgba(255,255,255,.94));
  border: 1px solid rgba(24,54,74,.06);
}

.unified-tool-template .chart-svg,
.unified-tool-template .bf-chart-svg {
  width: 100%;
  min-height: 330px;
}

.unified-result-chart .chart-wrap {
  padding: 8px 8px 2px;
}

.unified-result-table {
  border-radius: 17px;
  border: 1px solid var(--tool-border);
  background: rgba(255,255,255,.9);
}

.unified-result-table table {
  min-width: 100%;
}

.unified-result-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f2f8f9;
}

/* The recovery card now follows the same three-column rhythm as the other tools. */
.recovery-tool.unified-tool-template {
  grid-template-columns: var(--tool-left-column, 270px) minmax(390px, .88fr) minmax(520px, 1.12fr);
}

/* Property maps intentionally use the pool renderer and a two-column settings/result layout. */
.property-tool-clean.unified-tool-template {
  grid-template-columns: minmax(420px, .82fr) minmax(580px, 1.18fr);
}

/* Keep result visualization dominant and aligned across legacy and new cards. */
.prototype-tool.unified-tool-template,
.bem-forecast-fullscreen.unified-tool-template,
.welltest-fullscreen.unified-tool-template {
  grid-auto-rows: minmax(0, 1fr);
}

@media (max-width: 1300px) {
  .recovery-tool.unified-tool-template,
  .property-tool-clean.unified-tool-template {
    grid-template-columns: var(--tool-left-column, 250px) minmax(0, 1fr);
  }
  .recovery-tool.unified-tool-template .tool-right-panel,
  .property-tool-clean.unified-tool-template .tool-right-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .recovery-tool.unified-tool-template,
  .property-tool-clean.unified-tool-template {
    grid-template-columns: 1fr;
  }
  .recovery-tool.unified-tool-template .tool-right-panel,
  .property-tool-clean.unified-tool-template .tool-right-panel {
    grid-column: auto;
  }
}

/* 2026-07-31 · system health diagnostics */
.admin-system-hero {
  align-items: center;
}
.admin-system-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.admin-system-run {
  flex: 0 0 auto;
  min-width: 220px;
}
@media (max-width: 900px) {
  .admin-system-actions {
    width: 100%;
    justify-content: stretch;
  }
  .admin-system-actions .btn {
    flex: 1 1 180px;
  }
}
.admin-system-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-system-panel {
  overflow: hidden;
}
.system-health-groups {
  display: grid;
  gap: 16px;
  padding: 18px;
}
.system-health-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.54);
}
.system-health-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(236,247,248,.58);
}
.system-health-group > header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.system-health-group > header span {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--teal-deep);
  background: rgba(0,168,181,.1);
  font-size: 11px;
  font-weight: 800;
}
.system-health-row {
  display: grid;
  grid-template-columns: 12px minmax(0,1fr);
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(36,67,84,.07);
}
.system-health-row:last-child { border-bottom: 0; }
.system-health-state {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #f0b84d;
  box-shadow: 0 0 0 5px rgba(240,184,77,.12);
}
.system-health-row.ok .system-health-state {
  background: #36bd8b;
  box-shadow: 0 0 0 5px rgba(54,189,139,.12);
}
.system-health-row.error .system-health-state {
  background: #e56c70;
  box-shadow: 0 0 0 5px rgba(229,108,112,.12);
}
.system-health-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.system-health-title strong {
  font-size: 13px;
  font-weight: 800;
}
.system-health-title span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.system-health-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.system-health-copy details {
  margin-top: 8px;
}
.system-health-copy summary {
  color: var(--teal-deep);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.system-health-copy pre {
  max-height: 220px;
  margin: 8px 0 0;
  padding: 12px;
  overflow: auto;
  border-radius: 14px;
  color: #e9f5f5;
  background: #18364a;
  font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

/* 2026-08-05 · block-based knowledge base */
.knowledge-page {
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--ink);
  background: var(--page-bg, #eef8f8);
  overscroll-behavior-y: auto;
}
.knowledge-page .page-shell {
  min-height: 100vh;
  height: auto;
  overflow: visible;
}
.knowledge-topbar { position: sticky; top: 0; z-index: 80; }
.knowledge-main-nav { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid rgba(12,117,131,.12); border-radius: 16px; background: rgba(255,255,255,.7); }
.knowledge-main-nav a { padding: 10px 14px; border-radius: 12px; color: var(--muted); font-weight: 800; text-decoration: none; }
.knowledge-main-nav a.active { color: var(--teal-deep); background: rgba(23,190,186,.12); }
.knowledge-shell { width: min(1500px, calc(100% - 40px)); margin: 22px auto 60px; }
.knowledge-loading,.knowledge-empty { padding: 34px; text-align: center; border-radius: 28px; }
.knowledge-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(24px,3vw,42px); border-radius: 30px; }
.knowledge-hero h1 { max-width: 900px; margin: 8px 0 10px; font-family: "Nunito Sans",sans-serif; font-size: clamp(30px,4vw,54px); line-height: 1.04; }
.knowledge-hero p { max-width: 850px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.knowledge-search { display: flex; min-width: min(430px,100%); gap: 10px; }
.knowledge-search input { min-width: 0; flex: 1; padding: 14px 16px; border: 1px solid rgba(11,113,126,.18); border-radius: 15px; outline: none; background: rgba(255,255,255,.86); font: inherit; }
.knowledge-search input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,184,179,.12); }
.knowledge-continue { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 18px 0; padding: 18px 22px; border-radius: 20px; color: inherit; text-decoration: none; }
.knowledge-continue span,.knowledge-continue em { color: var(--muted); font-style: normal; font-weight: 700; }
.knowledge-course-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); gap: 20px; margin-top: 22px; }
.knowledge-course-card { display: block; padding: 26px; border-radius: 26px; color: inherit; text-decoration: none; }
.knowledge-course-card h2 { margin: 16px 0 9px; font-family: "Nunito Sans",sans-serif; font-size: 25px; }
.knowledge-course-card p { color: var(--muted); line-height: 1.6; }
.knowledge-course-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.knowledge-course-head small { display: block; margin-top: 8px; color: var(--muted); }
.knowledge-book-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; color: var(--color-text-inverse); background: linear-gradient(145deg,var(--teal-deep),#31d1bf); font-size: 24px; }
.knowledge-progress-ring { --progress:0; display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--progress)*1%),rgba(20,160,170,.12) 0); }
.knowledge-progress-ring::before { content:""; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: var(--color-surface); }
.knowledge-progress-ring strong { position: relative; z-index: 1; font-size: 12px; }
.knowledge-chapter-links { display: grid; gap: 8px; margin-top: 18px; }
.knowledge-chapter-links a { display: flex; justify-content: space-between; padding: 13px 15px; border-radius: 14px; color: var(--teal-deep); background: rgba(25,185,180,.08); font-weight: 800; text-decoration: none; }
.knowledge-breadcrumb { display: inline-block; margin-bottom: 8px; color: var(--teal-deep); font-weight: 800; text-decoration: none; }
.knowledge-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.knowledge-meta span { padding: 7px 11px; border-radius: 999px; color: var(--teal-deep); background: rgba(18,172,174,.1); font-size: 13px; font-weight: 800; }
.knowledge-section-list { display: grid; gap: 12px; margin-top: 20px; }
.knowledge-section-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 21px; color: inherit; text-decoration: none; }
.knowledge-section-row h2 { margin: 0 0 5px; font-size: 19px; }
.knowledge-section-row p { max-width: 950px; margin: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.knowledge-section-index { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: rgba(20,177,177,.1); color: var(--teal-deep); font-weight: 900; }
.knowledge-section-row.completed .knowledge-section-index { color: var(--color-text-inverse); background: #31bb8c; }
.knowledge-reader { display: grid; grid-template-columns: minmax(230px,290px) minmax(0,920px); justify-content: center; align-items: start; gap: 22px; }
.knowledge-toc { position: sticky; top: 104px; max-height: calc(100vh - 130px); overflow: auto; padding: 20px; border-radius: 24px; }
.knowledge-toc nav { display: grid; gap: 7px; margin-top: 12px; }
.knowledge-toc nav a { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 750; text-decoration: none; }
.knowledge-toc nav a span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: rgba(20,160,170,.08); }
.knowledge-toc nav a.active { color: var(--teal-deep); background: rgba(20,177,177,.12); }
.knowledge-toc nav a.completed span { color: var(--color-text-inverse); background: #31bb8c; }
.knowledge-subsection-toc a.level-4,.knowledge-subsection-toc a.level-5,.knowledge-subsection-toc a.level-6 { margin-left: 18px; font-size: 12px; }
.knowledge-toc-group { display: grid; gap: 4px; }
.knowledge-toc-tasks { margin: -1px 5px 5px 47px; }
.knowledge-toc-tasks summary { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 9px; color: var(--teal-deep); background: rgba(20,160,170,.055); font-size: 11px; font-weight: 850; cursor: pointer; list-style: none; }
.knowledge-toc-tasks summary::-webkit-details-marker { display: none; }
.knowledge-toc-tasks summary b { display: grid; min-width: 19px; height: 19px; place-items: center; border-radius: 7px; background: rgba(20,160,170,.1); font-size: 10px; }
.knowledge-toc-tasks summary > span { margin-left: auto; transition: transform .18s ease; }
.knowledge-toc-tasks[open] summary > span { transform: rotate(180deg); }
.knowledge-toc-tasks > div { display: grid; gap: 3px; padding: 5px 0 0; }
.knowledge-toc nav .knowledge-toc-tasks a { grid-template-columns: 16px 1fr; margin: 0; padding: 7px 8px; font-size: 11px; line-height: 1.35; }
.knowledge-toc nav .knowledge-toc-tasks a span { width: 16px; height: 16px; border-radius: 6px; background: transparent; color: var(--teal); font-size: 8px; }
.knowledge-reader-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.knowledge-reader-crumbs a { color: inherit; text-decoration: none; }
.knowledge-reader-crumbs a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.knowledge-article { padding: clamp(24px,4vw,52px); border-radius: 30px; }
.knowledge-article > header { padding-bottom: 25px; border-bottom: 1px solid rgba(17,92,105,.1); }
.knowledge-article h1 { margin: 8px 0 10px; font-family: "Nunito Sans",sans-serif; font-size: clamp(30px,4vw,48px); line-height: 1.08; }
.knowledge-article-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.knowledge-reading-mode { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid rgba(17,92,105,.11); border-radius: 12px; background: rgba(234,246,247,.75); }
.knowledge-reading-mode button { padding: 7px 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font: 750 11px/1.2 inherit; cursor: pointer; }
.knowledge-reading-mode button.active { color: var(--teal-deep); background: var(--color-surface); box-shadow: 0 3px 10px rgba(24,72,83,.08); }
.knowledge-content { padding-top: 24px; color: #203c49; font-size: 16px; line-height: 1.78; }
.knowledge-content.reading-paged .knowledge-subpage { display: none; }
.knowledge-content.reading-paged .knowledge-subpage.active { display: block; animation: knowledge-page-in .22s ease-out; }
.knowledge-content.reading-full .knowledge-subpage { display: block; }
@keyframes knowledge-page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.knowledge-content h2,.knowledge-content h3,.knowledge-content h4 { margin: 34px 0 12px; color: var(--ink); scroll-margin-top: 105px; }
.knowledge-article,.knowledge-practice { scroll-margin-top: 105px; }
.knowledge-paragraph { margin: 0 0 18px; }
.knowledge-inline-formula { display: inline-flex; align-items: baseline; margin: 0 .14em; color: #14586a; font-family: Cambria Math,"Times New Roman",serif; font-size: 1.03em; white-space: nowrap; }
.knowledge-inline-formula math { display: inline-block; font-size: 1em; }
.knowledge-content ol,.knowledge-content ul { display: grid; gap: 8px; padding-left: 27px; }
.knowledge-content figure { margin: 28px 0; }
.knowledge-content figure img { display: block; width: auto; max-width: min(88%,840px); max-height: 590px; margin: auto; border-radius: 16px; box-shadow: 0 8px 24px rgba(20,74,84,.09); }
.knowledge-content figcaption { margin-top: 10px; color: var(--muted); text-align: center; font-size: 13px; }
.knowledge-table-wrap { overflow-x: auto; border: 1px solid rgba(11,110,123,.14); border-radius: 18px; }
.knowledge-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.knowledge-table-wrap th,.knowledge-table-wrap td { min-width: 130px; padding: 12px 14px; border-bottom: 1px solid rgba(11,110,123,.1); vertical-align: top; text-align: left; }
.knowledge-table-wrap th { color: var(--teal-deep); background: rgba(24,182,177,.09); }
.knowledge-formula { display: grid; grid-template-columns: minmax(0,1fr) minmax(58px,auto); align-items: center; gap: 14px; overflow-x: auto; padding: 18px 20px; border-radius: 17px; background: #f2fbfb; }
.knowledge-formula-expression { min-width: max-content; color: #124f5e; font-family: Cambria Math,"Times New Roman",serif; font-size: 19px; text-align: center; }
.knowledge-formula-expression math { margin: 0 auto; font-size: 1em; }
.knowledge-formula code { font: inherit; white-space: pre-wrap; }
.knowledge-formula figcaption { margin: 0; color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.knowledge-formula:not(:has(figcaption)) { grid-template-columns: minmax(0,1fr); }
.knowledge-task { margin: 28px 0; padding: 20px; border: 1px solid rgba(15,152,163,.18); border-radius: 19px; background: linear-gradient(145deg,rgba(239,251,251,.9),rgba(255,255,255,.96)); scroll-margin-top: 105px; }
.knowledge-task > header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 15px; }
.knowledge-task > header span { flex: 0 0 auto; padding: 5px 8px; border-radius: 9px; color: var(--color-text-inverse); background: linear-gradient(135deg,var(--teal-deep),var(--teal)); font-size: 11px; font-weight: 900; }
.knowledge-task > header h3 { margin: 0; font-size: 17px; }
.knowledge-task-condition,.knowledge-task-solution { padding: 15px 16px; border-radius: 14px; background: rgba(255,255,255,.82); }
.knowledge-task-solution { margin-top: 10px; border-left: 3px solid var(--teal); }
.knowledge-task-label { margin-bottom: 10px; color: var(--teal-deep); font-size: 11px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.knowledge-task-condition > :last-child,.knowledge-task-solution > :last-child { margin-bottom: 0; }
.knowledge-task-solution-toggle { margin-top: 11px; }
.knowledge-callout { margin: 24px 0; padding: 18px 20px; border-left: 4px solid var(--teal); border-radius: 0 16px 16px 0; background: rgba(23,184,180,.09); }
.knowledge-practice { margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(17,92,105,.12); }
.knowledge-exercise { margin-top: 16px; padding: 20px; border: 1px solid rgba(17,108,121,.13); border-radius: 18px; background: rgba(248,253,253,.8); }
.knowledge-exercise h3 { margin: 7px 0 14px; font-size: 17px; }
.knowledge-options { display: grid; gap: 8px; margin-bottom: 14px; }
.knowledge-options label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-surface); cursor: pointer; }
.knowledge-exercise textarea { width: 100%; margin-bottom: 12px; padding: 12px; border: 1px solid rgba(11,110,123,.16); border-radius: 12px; resize: vertical; font: inherit; }
.knowledge-answer-result { display: none; margin-top: 12px; padding: 12px; border-radius: 12px; }
.knowledge-answer-result.visible { display: block; }
.knowledge-answer-result.correct { color: #176347; background: #e5f8ef; }
.knowledge-answer-result.wrong { color: #92464c; background: #fff0f1; }
.knowledge-reader-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(17,92,105,.1); }
.knowledge-reader-footer > :last-child { justify-self: end; }
.knowledge-toc-toggle { display: none; }
.knowledge-search-results { margin: 18px 0; padding: 24px; border-radius: 22px; }
.knowledge-search-results a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(17,92,105,.09); color: inherit; text-decoration: none; }
.knowledge-search-results a span { display: block; color: var(--teal-deep); font-size: 12px; font-weight: 800; }
.knowledge-search-results a p { margin: 5px 0 0; color: var(--muted); }
@media(max-width:980px){.knowledge-main-nav{display:none}.knowledge-hero{align-items:flex-start;flex-direction:column}.knowledge-search{min-width:100%}.knowledge-reader{grid-template-columns:1fr}.knowledge-toc-toggle{display:inline-flex;position:sticky;top:88px;z-index:45;width:max-content}.knowledge-toc{display:none;position:fixed;inset:85px 12px 12px;z-index:60;max-height:none}.knowledge-toc.open{display:block}.knowledge-reader-footer{grid-template-columns:1fr}.knowledge-reader-footer>*{justify-self:stretch!important;text-align:center}}
@media(max-width:640px){.knowledge-shell{width:min(100% - 20px,1500px);margin-top:12px}.knowledge-hero,.knowledge-article{padding:22px;border-radius:22px}.knowledge-course-grid{grid-template-columns:1fr}.knowledge-section-row{grid-template-columns:42px 1fr;padding:16px}.knowledge-section-row>span:last-child{display:none}.knowledge-search{flex-direction:column}.knowledge-topbar .topbar-brand .brand-subtitle{display:none}.knowledge-article-tools{align-items:flex-start;flex-direction:column}.knowledge-reading-mode{width:100%}.knowledge-reading-mode button{flex:1}.knowledge-task{padding:14px}.knowledge-content figure img{max-width:100%;max-height:460px}.knowledge-formula{grid-template-columns:minmax(0,1fr) auto;padding:15px 13px}.knowledge-formula-expression{font-size:17px}.knowledge-formula figcaption{font-size:10px}}
.knowledge-subsection-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; padding: 12px; border-radius: 14px; background: rgba(0,168,181,.06); }
.knowledge-subsection-nav strong { width: 100%; font-size: 12px; }
.knowledge-subsection-nav a { padding: 6px 9px; border-radius: 9px; color: var(--teal-deep); background: var(--color-surface); font-size: 12px; font-weight: 700; text-decoration: none; }
.knowledge-admin-form { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(260px,1.4fr) minmax(220px,1fr) auto; align-items: end; gap: 12px; padding: 18px; }
.knowledge-admin-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.knowledge-admin-list { display: grid; gap: 16px; padding: 18px; }
.knowledge-admin-course { overflow: hidden; border: 1px solid rgba(11,110,123,.14); border-radius: 20px; background: rgba(255,255,255,.55); }
.knowledge-admin-course > header,.knowledge-admin-chapter-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; }
.knowledge-admin-course h3 { display: inline-block; margin: 0 8px; }
.knowledge-admin-course small,.knowledge-admin-chapter small { color: var(--muted); }
.knowledge-admin-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.knowledge-admin-actions .btn { min-height: 34px; padding: 7px 10px; font-size: 12px; }
.knowledge-admin-actions .danger { color: #a84c55; }
.knowledge-admin-chapters { display: grid; gap: 1px; background: rgba(11,110,123,.08); }
.knowledge-admin-chapter { background: rgba(250,254,254,.96); }
.knowledge-admin-chapter-head strong { margin: 0 8px; }
.knowledge-admin-sections { display: grid; gap: 7px; padding: 0 18px 18px; }
.knowledge-admin-section { overflow: hidden; border: 1px solid rgba(11,110,123,.12); border-radius: 14px; background: var(--color-surface); }
.knowledge-admin-section > summary { display: grid; grid-template-columns: 28px minmax(180px,1fr) auto auto auto; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; }
.knowledge-admin-section > summary::-webkit-details-marker { display: none; }
.knowledge-section-number { color: var(--teal-deep); text-align: center; font-weight: 900; }
.knowledge-section-controls { display: flex; gap: 6px; }
.knowledge-visible-badge { display: inline-flex; width: max-content; padding: 5px 8px; border-radius: 999px; color: #76535b; background: #fff0f1; font-size: 10px; font-weight: 900; }
.knowledge-visible-badge.visible { color: #176347; background: #e5f8ef; }
.knowledge-subsection-list { display: grid; gap: 7px; padding: 12px 14px 14px 51px; border-top: 1px solid rgba(11,110,123,.09); }
.knowledge-subsection-list > div { display: flex; align-items: center; gap: 9px; }
.knowledge-subsection-list p { margin: 0; color: var(--muted); }
.knowledge-admin-exercise { padding: 9px 10px; border-radius: 11px; background: rgba(0,168,181,.055); }
.knowledge-admin-exercise strong { flex: 1; font-size: 12px; }
.knowledge-inspect-result { display: grid; gap: 7px; margin: 0 18px 18px; padding: 15px; border: 1px solid rgba(0,168,181,.18); border-radius: 14px; background: rgba(0,168,181,.055); }
.knowledge-inspect-result ol { columns: 2; margin: 5px 0 0; padding-left: 22px; }
.knowledge-exercise-dialog { width: min(620px,calc(100% - 32px)); padding: 0; border: 0; border-radius: 22px; box-shadow: 0 28px 80px rgba(18,55,72,.28); }
.knowledge-exercise-dialog::backdrop { background: rgba(18,48,62,.28); backdrop-filter: blur(3px); }
.knowledge-exercise-dialog form { display: grid; gap: 13px; padding: 22px; }
.knowledge-exercise-dialog header { display: flex; justify-content: space-between; align-items: flex-start; }
.knowledge-exercise-dialog h2 { margin: 4px 0 0; }
.knowledge-exercise-dialog label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.knowledge-exercise-dialog textarea { resize: vertical; }
.knowledge-source-list { display: grid; gap: 8px; padding: 18px; }
.knowledge-source-row { border: 1px solid rgba(11,110,123,.12); border-radius: 15px; background: rgba(255,255,255,.6); }
.knowledge-source-row summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px; cursor: pointer; }
.knowledge-source-row summary span { color: var(--muted); }
.knowledge-source-row pre { max-height: 360px; overflow: auto; margin: 0; padding: 16px; border-top: 1px solid rgba(11,110,123,.1); white-space: pre-wrap; }
@media(max-width:1100px){.knowledge-admin-form{grid-template-columns:1fr 1fr}.knowledge-admin-section>summary{grid-template-columns:28px 1fr auto}.knowledge-admin-section>summary small{display:none}.knowledge-section-controls{grid-column:2/-1}.knowledge-inspect-result ol{columns:1}}
@media(max-width:700px){.knowledge-admin-form{grid-template-columns:1fr}.knowledge-admin-course>header,.knowledge-admin-chapter-head{align-items:flex-start;flex-direction:column}.knowledge-admin-section>summary{grid-template-columns:28px 1fr}.knowledge-visible-badge{grid-column:2}.knowledge-section-controls{grid-column:1/-1}.knowledge-subsection-list{padding-left:14px}}
@media (max-width: 760px) {
  .admin-system-hero { align-items: stretch; }
  .admin-system-run { width: 100%; min-width: 0; }
  .admin-system-summary { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .admin-nav nav { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* 2026-07-31 · readiness shadow launcher in administrator cabinet */
.admin-readiness-panel {
  overflow: visible;
}
.admin-readiness-header {
  align-items: flex-end;
}
.admin-readiness-actions {
  min-width: min(430px, 48%);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  flex: 0 0 auto;
}
.admin-readiness-select-wrap {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.admin-readiness-select-wrap > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.admin-readiness-select-wrap select {
  width: 100%;
  min-height: 42px;
  border-radius: 13px;
  background-color: rgba(255,255,255,.78);
}
.admin-readiness-open {
  min-width: 150px;
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 13px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .admin-readiness-header {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-readiness-actions {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (max-width: 560px) {
  .admin-readiness-actions {
    grid-template-columns: 1fr;
  }
  .admin-readiness-open {
    width: 100%;
  }
}

/* Stage 3.0: storage lifecycle controls in the administrator cabinet. */
.admin-storage-panel {
  display: grid;
  gap: 18px;
}
.admin-storage-header {
  align-items: flex-start;
}
.admin-storage-refresh,
.admin-storage-actions .btn {
  min-width: 210px;
}
.admin-storage-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.admin-storage-metrics article {
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid rgba(64, 91, 111, 0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.58);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.admin-storage-metrics small,
.admin-storage-case-metric span {
  color: var(--text-muted, #6c7880);
  font-size: 12px;
}
.admin-storage-metrics strong {
  font-size: 24px;
  line-height: 1;
}
.admin-storage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-storage-secondary {
  background: rgba(255,255,255,0.72);
  color: var(--text-main, #21313a);
  border: 1px solid rgba(64, 91, 111, 0.16);
}
.admin-storage-notice {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(231, 239, 236, 0.66);
  color: var(--text-muted, #5e6a71);
  font-size: 13px;
}
.admin-storage-notice strong {
  color: var(--text-main, #26343c);
}
.admin-storage-notice span {
  display: block;
}
.admin-storage-cases {
  display: grid;
  gap: 10px;
}
.admin-storage-case {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) repeat(4, minmax(100px, .7fr));
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(64, 91, 111, 0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.52);
}
.admin-storage-case-main,
.admin-storage-case-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-storage-case-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted, #6c7880);
}
.admin-storage-case-metric strong {
  font-size: 15px;
}
.admin-storage-case-metric.warning strong {
  color: #9b5d26;
}
.admin-storage-case details {
  grid-column: 1 / -1;
  padding-top: 6px;
}
.admin-storage-case details summary {
  cursor: pointer;
  color: var(--text-muted, #66747c);
  font-size: 12px;
}
.admin-storage-case pre {
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(31, 45, 54, 0.06);
  font-size: 11px;
}
@media (max-width: 1120px) {
  .admin-storage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-storage-case { grid-template-columns: minmax(200px, 1.6fr) repeat(2, minmax(110px, .8fr)); }
}
@media (max-width: 720px) {
  .admin-storage-metrics { grid-template-columns: 1fr; }
  .admin-storage-case { grid-template-columns: 1fr 1fr; }
  .admin-storage-case-main { grid-column: 1 / -1; }
  .admin-storage-refresh,
  .admin-storage-actions .btn { width: 100%; min-width: 0; }
}

.admin-data-storage-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-data-storage-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(24, 74, 96, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  cursor: pointer;
}
.admin-data-storage-option:has(input:checked) {
  border-color: rgba(0, 178, 174, 0.52);
  box-shadow: 0 0 0 3px rgba(0, 178, 174, 0.08);
}
.admin-data-storage-option.disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.admin-data-storage-copy {display: grid; gap: 4px;}
.admin-data-storage-copy small {color: var(--muted, #6b7f8d); line-height: 1.45;}
.admin-data-storage-state {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 178, 174, 0.10);
  color: #087f7c;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .admin-data-storage-options {grid-template-columns: 1fr;}
}

/* Stage 4.3: PostgreSQL overview */
.admin-database-session-info { align-self:center; color:var(--muted,#718590); font-size:13px; }
.admin-database-users { display:grid; gap:10px; margin-top:16px; }
.admin-database-user { display:grid; grid-template-columns:minmax(190px,1.4fr) repeat(4,minmax(92px,.55fr)); gap:12px; align-items:center; padding:14px 16px; border:1px solid rgba(35,66,82,.1); border-radius:16px; background:rgba(248,252,253,.82); }
.admin-database-user > div { display:grid; gap:3px; }
.admin-database-user > div small { color:var(--muted,#718590); }
.admin-database-user > span { display:grid; gap:3px; }
.admin-database-user > span small { color:var(--muted,#718590); font-size:11px; }
.admin-database-user > span b { font-size:14px; }
@media (max-width:900px) { .admin-database-user { grid-template-columns:1fr 1fr; } .admin-database-user > div { grid-column:1/-1; } }

/* Stage 4.4 · administrator user-context mode */
.impersonation-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 10050;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(191, 112, 31, .36);
  border-radius: 18px;
  background: rgba(255, 250, 240, .96);
  box-shadow: 0 18px 52px rgba(56, 39, 17, .22);
  backdrop-filter: blur(18px);
}
.impersonation-banner-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.impersonation-banner-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 12px; background: rgba(215, 132, 47, .14); color: #a45f18; font-weight: 900;
}
.impersonation-banner-copy div { min-width: 0; }
.impersonation-banner-copy small { display: block; color: #8c6a45; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.impersonation-banner-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4d371f; font-size: 14px; }
.impersonation-banner-copy strong span { color: #98724c; font-weight: 700; }
.impersonation-banner-stop {
  flex: 0 0 auto; border: 0; border-radius: 12px; padding: 10px 13px; cursor: pointer;
  background: #5c4024; color: var(--color-text-inverse); font: inherit; font-size: 12px; font-weight: 800;
}
.impersonation-banner-stop:disabled { opacity: .65; cursor: wait; }

.admin-users-list { display: grid; gap: 12px; }
.admin-user-card {
  display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(360px, 1.7fr) minmax(190px, .8fr);
  align-items: center; gap: 18px; padding: 16px; border: 1px solid rgba(91, 111, 105, .14);
  border-radius: 18px; background: rgba(255,255,255,.58);
}
.admin-user-card.is-effective { border-color: rgba(201, 125, 40, .42); background: rgba(255, 249, 237, .78); }
.admin-user-card.is-disabled { opacity: .62; }
.admin-user-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-user-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; background: rgba(61, 119, 105, .10); font-size: 22px; }
.admin-user-identity div { min-width: 0; }
.admin-user-identity strong, .admin-user-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-identity small { margin-top: 3px; color: var(--muted, #70807b); font-size: 11px; }
.admin-user-data-grid { display: grid; grid-template-columns: repeat(5, minmax(58px, 1fr)); gap: 8px; }
.admin-user-data-grid span { padding: 9px 8px; border-radius: 12px; background: rgba(51, 89, 80, .055); text-align: center; }
.admin-user-data-grid small, .admin-user-data-grid b { display: block; }
.admin-user-data-grid small { color: var(--muted, #70807b); font-size: 10px; }
.admin-user-data-grid b { margin-top: 3px; font-size: 13px; }
.admin-user-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.admin-user-actions small { color: var(--muted, #70807b); font-size: 10px; text-align: right; }
.admin-user-open { min-width: 170px; }
.admin-audit-list { display: grid; gap: 8px; }
.admin-audit-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(50, 83, 75, .05); }
.admin-audit-row > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(74, 121, 109, .10); }
.admin-audit-row p { margin: 2px 0 0; color: var(--muted, #70807b); font-size: 12px; }
.admin-audit-row time { color: var(--muted, #70807b); font-size: 11px; white-space: nowrap; }

@media (max-width: 1180px) {
  .admin-user-card { grid-template-columns: 1fr; }
  .admin-user-actions { align-items: flex-start; }
  .admin-user-actions small { text-align: left; }
}
@media (max-width: 680px) {
  .impersonation-banner { align-items: stretch; flex-direction: column; gap: 10px; }
  .impersonation-banner-stop { width: 100%; }
  .admin-user-data-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-audit-row { grid-template-columns: 30px 1fr; }
  .admin-audit-row time { grid-column: 2; }
}

/* Stage 4.8-4.9: strict storage modes and destructive data controls */
.admin-danger-btn {
  background: rgba(179, 62, 62, 0.08) !important;
  border-color: rgba(179, 62, 62, 0.22) !important;
  color: #9f3434 !important;
}
.admin-danger-btn:hover:not(:disabled) {
  background: rgba(179, 62, 62, 0.14) !important;
}
.admin-data-tree {
  display: grid;
  gap: 12px;
}
.admin-data-user,
.admin-data-case {
  border: 1px solid rgba(78, 112, 126, 0.15);
  border-radius: 18px;
  background: rgba(255,255,255,0.52);
  overflow: hidden;
}
.admin-data-user > summary,
.admin-data-case > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
}
.admin-data-user > summary::-webkit-details-marker,
.admin-data-case > summary::-webkit-details-marker { display: none; }
.admin-data-user > summary::after,
.admin-data-case > summary::after {
  content: '⌄';
  font-weight: 800;
  color: #5c7d87;
  transition: transform .18s ease;
}
.admin-data-user[open] > summary::after,
.admin-data-case[open] > summary::after { transform: rotate(180deg); }
.admin-data-user > summary div:first-child,
.admin-data-case > summary div:first-child {
  display: grid;
  gap: 3px;
}
.admin-data-user > summary small,
.admin-data-case > summary small,
.admin-data-results article small { color: #718991; }
.admin-data-user-actions,
.admin-data-case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 18px 16px;
}
.admin-data-case-list {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}
.admin-data-case { background: rgba(246, 251, 251, 0.78); }
.admin-data-case-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.admin-data-case-summary span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(28, 153, 157, 0.08);
  color: #46666f;
  font-size: 12px;
  font-weight: 700;
}
.admin-data-case-body {
  border-top: 1px solid rgba(78, 112, 126, 0.12);
  padding: 14px;
}
.admin-data-case-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.admin-data-case-metrics span {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.admin-data-case-metrics small { color: #738b93; }
.admin-data-results { display: grid; gap: 8px; }
.admin-data-results article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.68);
}
.admin-data-results article > div { display: grid; gap: 3px; }
.admin-empty-state.compact { padding: 12px; }
@media (max-width: 900px) {
  .admin-data-case-metrics { grid-template-columns: 1fr; }
  .admin-data-user > summary,
  .admin-data-case > summary,
  .admin-data-results article { align-items: flex-start; flex-direction: column; }
  .admin-data-case-summary { margin-left: 0; }
}

/* --- Calculation lineage: Pool -> parent card -> child card --- */
.lineage-summary-card { display:grid; gap:9px; }
.lineage-summary-row { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.lineage-summary-row > b { color:var(--ink); }

/* Direct linking on the workspace. */
.link-line,
.link-line.passive-link {
  stroke:rgba(132,151,163,.62);
  stroke-width:2.2;
  stroke-dasharray:none;
  filter:none;
}
.link-line.active-link {
  stroke:var(--teal);
  stroke-width:3.2;
  stroke-dasharray:none;
  filter:drop-shadow(0 2px 5px color-mix(in srgb, var(--teal) 34%, transparent));
}
.workspace.linking-mode { cursor:crosshair; }
.workspace.linking-mode::before {
  content:"Выберите карточку или Пул данных, к которым нужно привязаться";
  position:absolute;
  top:18px;
  left:50%;
  z-index:20;
  max-width:calc(100% - 40px);
  transform:translateX(-50%);
  padding:11px 18px;
  border:2px solid color-mix(in srgb, var(--teal) 74%, white);
  border-radius:999px;
  background:color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow:0 8px 28px color-mix(in srgb, var(--teal) 30%, transparent);
  color:var(--color-text);
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  text-align:center;
  pointer-events:none;
  backdrop-filter:blur(10px);
}
.workspace.linking-mode .desk-card,
.workspace.linking-mode .pool-node { transition:opacity .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.workspace.linking-mode .link-unavailable { opacity:.24; filter:saturate(.35); }
.workspace.linking-mode .linking-source {
  z-index:11;
  opacity:1;
  border:3px solid rgba(243,189,79,.92);
  box-shadow:0 0 0 7px rgba(243,189,79,.18), 0 16px 38px rgba(243,189,79,.18);
}
.workspace.linking-mode .link-target {
  z-index:12;
  opacity:1;
  border:3px solid var(--teal);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--teal) 28%, transparent), 0 0 34px color-mix(in srgb, var(--teal) 42%, transparent);
  cursor:pointer;
  animation:linkTargetPulse .9s ease-in-out infinite alternate;
}
.workspace.linking-mode .desk-card.link-target::after,
.workspace.linking-mode .pool-node.link-target::after {
  content:"Привязать сюда";
  position:absolute;
  z-index:9;
  padding:7px 11px;
  border:1px solid color-mix(in srgb, var(--teal) 72%, white);
  border-radius:999px;
  background:var(--teal);
  box-shadow:0 7px 18px color-mix(in srgb, var(--teal) 34%, transparent);
  color:var(--color-text-inverse);
  font-size:11px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
.workspace.linking-mode .desk-card.link-target::after {
  top:-14px;
  left:50%;
  transform:translateX(-50%);
}
.workspace.linking-mode .pool-node.link-target::after {
  right:14px;
  bottom:14px;
}
@keyframes linkTargetPulse {
  from { outline:2px solid color-mix(in srgb, var(--teal) 28%, transparent); }
  to { outline:9px solid color-mix(in srgb, var(--teal) 8%, transparent); }
}
@media (prefers-reduced-motion:reduce) {
  .workspace.linking-mode .link-target { animation:none; }
}


/* 2026-08-11 · Card Shell v1 pilot
   One shell, two presentation modes: three-panel desktop and tabbed compact view. */
.card-shell-v1 {
  --card-shell-context: clamp(230px, 18vw, 285px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: 100%;
}
.card-shell-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
}
.card-shell-source-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  color: var(--muted);
}
.card-shell-source-line span { font-weight: 850; font-size: 13px; }
.card-shell-source-line b {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-shell-source-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.card-shell-layout-toggle,
.card-shell-pane-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(24,54,74,.08);
  background: rgba(231,241,244,.72);
}
.card-shell-mode-btn,
.card-shell-pane-btn {
  border: 0;
  min-height: 34px;
  border-radius: 10px;
  padding: 7px 11px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.card-shell-mode-btn.active,
.card-shell-pane-btn.active {
  color: var(--teal-deep);
  background: var(--surface-raised, rgba(255,255,255,.96));
  box-shadow: 0 6px 16px rgba(29,65,84,.08);
}
.card-shell-pane-tabs { display: none; width: fit-content; max-width: 100%; overflow-x: auto; }
.card-shell-grid {
  display: grid;
  grid-template-columns: var(--card-shell-context) minmax(380px, .92fr) minmax(480px, 1.08fr);
  gap: 14px;
  min-height: 0;
  align-items: stretch;
}
.card-shell-zone {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--tool-border, rgba(24,54,74,.085));
  border-radius: var(--tool-radius, 24px);
  background: var(--tool-surface, rgba(255,255,255,.82));
  box-shadow: 0 16px 42px rgba(29,65,84,.065);
}
.card-shell-zone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(24,54,74,.07);
}
.card-shell-zone-index {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 11px;
  background: rgba(0,168,181,.09);
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
}
.card-shell-zone-head div { display: grid; gap: 1px; }
.card-shell-zone-head small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: .08em;
  font-weight: 900;
}
.card-shell-zone-head b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.15;
}
.card-shell-zone-content { display: grid; gap: 14px; min-width: 0; }
.card-shell-zone-content > .card-surface {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.card-shell-zone-content .plot-card { min-height: 0; height: auto; }
.card-shell-zone-content .expert-plot { min-height: 410px; }
.card-shell-readiness,
.card-shell-ready-line {
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(24,54,74,.08);
  background: rgba(255,255,255,.62);
}
.card-shell-readiness > b { display:block; margin-bottom:6px; font-size:12px; color:var(--ink); }
.card-shell-readiness.blocked { border-color: rgba(208,82,72,.18); background: rgba(208,82,72,.055); }
.card-shell-readiness.warning { border-color: rgba(212,157,45,.20); background: rgba(244,193,80,.065); }
.card-shell-ready-line { display:flex; gap:9px; align-items:flex-start; }
.card-shell-ready-line > span { color:var(--teal-deep); font-weight:950; }
.card-shell-ready-line div { display:grid; gap:2px; }
.card-shell-ready-line b { color:var(--ink); font-size:12px; }
.card-shell-ready-line small { color:var(--muted); font-size:10px; line-height:1.35; }
.card-shell-context-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.card-shell-context-metrics > div {
  min-width:0;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(24,54,74,.07);
  background:rgba(255,255,255,.7);
}
.card-shell-context-metrics span { display:block; color:var(--muted); font-size:9px; font-weight:850; margin-bottom:4px; }
.card-shell-context-metrics b { color:var(--ink); font-family:var(--font-display); font-size:15px; }
.card-shell-result-heading { margin-bottom: 8px; }
.card-shell-sticky-action {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  margin-top: 8px;
  background: linear-gradient(180deg, transparent, var(--surface, #fff) 36%);
}
.card-shell-sticky-action .btn { min-width: 190px; }
.card-shell-v1.mode-tabs .card-shell-pane-tabs { display: inline-flex; }
.card-shell-v1.mode-tabs .card-shell-grid { grid-template-columns: minmax(0, 1fr); }
.card-shell-v1.mode-tabs .card-shell-zone { display: none; overflow: visible; }
.card-shell-v1.mode-tabs .card-shell-zone.is-active { display: block; }
.card-shell-v1.mode-tabs .card-shell-zone-content .expert-plot { min-height: 480px; }

/* Shell owns the pilot panel surfaces; neutralize older per-card grid rules inside it. */
.card-shell-v1 .tool-left-panel,
.card-shell-v1 .tool-center-panel,
.card-shell-v1 .tool-right-panel {
  grid-column: auto !important;
  width: auto;
}

@media (max-width: 1450px) {
  .card-shell-v1.mode-columns .card-shell-grid {
    grid-template-columns: 240px minmax(340px, .9fr) minmax(420px, 1.1fr);
  }
}
@media (max-width: 1180px) {
  .card-shell-toolbar { align-items: flex-start; }
  .card-shell-v1.mode-columns .card-shell-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .card-shell-v1.mode-columns .card-shell-zone.tool-right-panel { grid-column: 1 / -1 !important; }
}
@media (max-width: 820px) {
  .card-shell-toolbar { flex-direction: column; }
  .card-shell-source-wrap { width: 100%; justify-content: space-between; }
  .card-shell-source-line { width: auto; flex: 1 1 auto; }
  .card-shell-layout-toggle { width: 100%; }
  .card-shell-mode-btn { flex: 1; }
  .card-shell-v1.mode-columns .card-shell-grid { grid-template-columns: 1fr; }
  .card-shell-v1.mode-columns .card-shell-zone.tool-right-panel { grid-column: auto !important; }
  .card-shell-context-metrics { grid-template-columns: 1fr; }
}


/* 2026-08-11 · Card Shell v1.1
   Theme-safe pilot shell, quieter data-origin markers and responsive two-mode layout. */
.card-shell-v1 {
  --card-shell-surface: var(--tool-surface, var(--color-surface));
  --card-shell-surface-raised: var(--tool-surface-strong, var(--color-surface-raised));
  --card-shell-surface-soft: var(--color-surface-secondary);
  --card-shell-border: var(--tool-border, var(--color-border));
  --card-shell-divider: var(--color-divider);
  --card-shell-text: var(--color-text-primary);
  --card-shell-muted: var(--color-text-secondary);
  --card-shell-control-text: var(--color-text-primary);
  color: var(--card-shell-text);
}
html[data-theme="anthracite"] .card-shell-v1,
html[data-theme="bitumen"] .card-shell-v1 {
  --card-shell-control-text: var(--color-contrast-text);
}
.card-shell-v1 .card-shell-toolbar,
.card-shell-v1 .card-shell-zone,
.card-shell-v1 .card-shell-zone-content,
.card-shell-v1 .card-shell-zone-content > * { color: var(--card-shell-text); }
.card-shell-v1 .card-shell-source-line { color: var(--card-shell-muted); }
.card-shell-v1 .card-shell-source-line b { color: var(--card-shell-text); }
.card-shell-v1 .card-shell-layout-toggle,
.card-shell-v1 .card-shell-pane-tabs {
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-soft);
}
.card-shell-v1 .card-shell-mode-btn,
.card-shell-v1 .card-shell-pane-btn { color: var(--card-shell-muted); }
.card-shell-v1 .card-shell-mode-btn.active,
.card-shell-v1 .card-shell-pane-btn.active {
  color: var(--color-accent-active);
  background: var(--card-shell-surface-raised);
  box-shadow: var(--shadow-small);
}
.card-shell-v1 .card-shell-zone {
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface);
  box-shadow: var(--shadow-small);
}
.card-shell-v1 .card-shell-zone-head { border-color: var(--card-shell-divider); }
.card-shell-v1 .card-shell-zone-index {
  color: var(--color-accent-active);
  background: var(--color-accent-soft);
}
.card-shell-v1 .card-shell-zone-head small { color: var(--card-shell-muted); }
.card-shell-v1 .card-shell-zone-head b,
.card-shell-v1 .tool-section-title,
.card-shell-v1 .info-title { color: var(--card-shell-text); }
.card-shell-v1 .helper,
.card-shell-v1 .helper.compact { color: var(--card-shell-muted); }
.card-shell-v1 .card-shell-readiness {
  color: var(--card-shell-text);
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-raised);
}
.card-shell-v1 .card-shell-readiness > b { color: var(--card-shell-text); }
.card-shell-v1 .card-shell-readiness.blocked {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.card-shell-v1 .card-shell-readiness.warning {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}
.card-shell-v1 .card-shell-context-metrics > div,
.card-shell-v1 .bf-side-kpis > div,
.card-shell-v1 .bf-kpi-grid > div,
.card-shell-v1 .tool-kpi-list > div,
.card-shell-v1 .metric-mini {
  color: var(--card-shell-text);
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-raised);
}
.card-shell-v1 .card-shell-context-metrics span,
.card-shell-v1 .bf-side-kpis span,
.card-shell-v1 .bf-kpi-grid span,
.card-shell-v1 .tool-kpi-list span,
.card-shell-v1 .metric-mini span { color: var(--card-shell-muted); }
.card-shell-v1 .card-shell-context-metrics b,
.card-shell-v1 .bf-side-kpis b,
.card-shell-v1 .bf-kpi-grid b,
.card-shell-v1 .tool-kpi-list b,
.card-shell-v1 .metric-mini b { color: var(--card-shell-text); }
.card-shell-neutral-note {
  padding: 10px 12px;
  border: 1px solid var(--card-shell-border);
  border-radius: 13px;
  background: var(--card-shell-surface-soft);
  color: var(--card-shell-muted);
  font-size: 11px;
  line-height: 1.4;
}
.card-shell-neutral-note b { color: var(--card-shell-text); }

/* Inputs inherit each theme's control surface. Anthracite uses a dark control surface with inverse text. */
.card-shell-v1 :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea),
.card-shell-v1 .wt-param-field input,
.card-shell-v1 .wt-param-field select,
.card-shell-v1 .wt-comment-row input {
  color: var(--card-shell-control-text) !important;
  background: var(--color-control-bg) !important;
  border-color: var(--color-border-strong) !important;
}
.card-shell-v1 :where(input, select, textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }
.card-shell-v1 :where(input, select, textarea):focus {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* WellTest: no red/green field state noise. Only values sourced from project data get a quiet teal marker. */
.card-shell-v1 .wt-param-field,
.card-shell-v1 .wt-param-field.ok,
.card-shell-v1 .wt-param-field.missing,
.card-shell-v1 .wt-param-field.manual,
.card-shell-v1 .wt-param-field.has-data {
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-raised);
  box-shadow: none;
}
.card-shell-v1 .wt-param-field > span { color: var(--card-shell-text); }
.card-shell-v1 .wt-param-field > span em { color: var(--card-shell-muted); }
.card-shell-v1 .param-source,
.card-shell-v1 .param-source.ok,
.card-shell-v1 .param-source.missing,
.card-shell-v1 .param-source.manual,
.card-shell-v1 .param-source.data {
  color: var(--color-accent-active);
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  text-transform: none;
  letter-spacing: 0;
}
.card-shell-v1 .wt-param-tabs {
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-soft);
}
.card-shell-v1 .wt-param-tab {
  color: var(--card-shell-muted);
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-raised);
  box-shadow: none;
}
.card-shell-v1 .wt-param-tab.active {
  color: var(--color-accent-active);
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: none;
}
.card-shell-v1 .wt-param-group { border-color: var(--card-shell-divider); }
.card-shell-v1 .wt-param-group-head { margin-bottom: 10px; }
.card-shell-v1 .wt-param-legend,
.card-shell-v1 .wt-completeness { display: none; }
.card-shell-v1 .wt-curve-summary {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--card-shell-border);
  border-radius: 15px;
  background: var(--card-shell-surface-raised);
}
.card-shell-v1 .wt-curve-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.card-shell-v1 .wt-curve-summary-head span {
  color: var(--card-shell-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.card-shell-v1 .wt-curve-summary-head b { color: var(--card-shell-text); font-size: 13px; }
.card-shell-v1 .wt-curve-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.card-shell-v1 .wt-curve-chips span {
  padding: 5px 8px;
  border: 1px solid var(--card-shell-border);
  border-radius: 999px;
  color: var(--card-shell-text);
  background: var(--card-shell-surface-soft);
  font-size: 10px;
  font-weight: 850;
}
.card-shell-v1 .file-mini-drop {
  color: var(--card-shell-text);
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.card-shell-v1 .file-mini-drop span { color: var(--card-shell-text); }
.card-shell-v1 .file-mini-drop em { color: var(--card-shell-muted); }

/* Theme-safe card controls used by Property Maps and BEM. */
.card-shell-v1 .bf-top-tabs,
.card-shell-v1 .builder-tabs {
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-soft);
}
.card-shell-v1 .bf-tab {
  color: var(--card-shell-muted);
  border-color: transparent;
  background: transparent;
}
.card-shell-v1 .bf-tab.active {
  color: var(--color-accent-active);
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-raised);
}
.card-shell-v1 .pm-settings-block { border-color: var(--card-shell-divider); }
.card-shell-v1 .pm-settings-title { color: var(--card-shell-text); }
.card-shell-v1 .pm-editor-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: 10px;
  border: 1px solid var(--card-shell-border);
  border-radius: 16px;
  background: var(--card-shell-surface-soft);
}
.card-shell-v1 .pm-editor-tab {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--card-shell-muted);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.card-shell-v1 .pm-editor-tab.active {
  background: var(--card-shell-surface-raised);
  color: var(--color-accent-active);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.card-shell-v1 .pm-map-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.card-shell-v1 .pm-map-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--card-shell-border);
  border-radius: 13px;
  background: var(--card-shell-surface-soft);
  color: var(--card-shell-text);
  cursor: pointer;
}
.card-shell-v1 .pm-map-choice.selected {
  border-color: color-mix(in srgb, var(--color-accent) 58%, var(--card-shell-border));
  background: var(--color-accent-soft);
}
.card-shell-v1 .pm-map-choice input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}
.card-shell-v1 .pm-map-choice b { font-size: 12px; }
.card-shell-v1 .pm-porosity-field { position: relative; }
.card-shell-v1 .pm-porosity-field > .param-source {
  position: absolute;
  top: 0;
  right: 0;
}
.card-shell-v1 .pm-values-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 12px;
}
.card-shell-v1 .pm-values-scroll {
  max-height: min(54vh, 560px);
  overflow: auto;
  border: 1px solid var(--card-shell-border);
  border-radius: 14px;
  background: var(--card-shell-surface-soft);
}
.card-shell-v1 .pm-values-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--card-shell-text);
}
.card-shell-v1 .pm-values-table th,
.card-shell-v1 .pm-values-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--card-shell-divider);
  text-align: left;
  vertical-align: middle;
}
.card-shell-v1 .pm-values-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-shell-surface-raised);
  color: var(--card-shell-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.card-shell-v1 .pm-values-table tr:last-child td { border-bottom: 0; }
.card-shell-v1 .pm-value-cell { min-width: 160px; }
.card-shell-v1 .pm-value-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--card-shell-muted);
  font-size: 10px;
  font-weight: 800;
}
.card-shell-v1 .pm-well-value {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .card-shell-v1 .pm-map-choice-grid { grid-template-columns: 1fr; }
  .card-shell-v1 .pm-values-toolbar { flex-direction: column; }
}

/* In tab mode textual panes stay readable on ultrawide screens while visual results may use more width. */
.card-shell-v1.mode-tabs .card-shell-grid { width: 100%; max-width: 1540px; margin-inline: auto; }
.card-shell-v1.mode-tabs .card-shell-zone.tool-left-panel { width: min(100%, 1040px); margin-inline: auto; }
.card-shell-v1.mode-tabs .card-shell-zone.tool-center-panel { width: min(100%, 1240px); margin-inline: auto; }
.card-shell-v1.mode-tabs .card-shell-zone.tool-right-panel { width: min(100%, 1540px); margin-inline: auto; }

/* Large desktop: keep all three columns useful; medium desktop: compact context, preserve result space. */
@media (min-width: 1520px) {
  .card-shell-v1.mode-columns .card-shell-grid {
    grid-template-columns: clamp(225px, 14vw, 270px) minmax(390px, .92fr) minmax(520px, 1.18fr);
  }
}
@media (min-width: 1181px) and (max-width: 1519px) {
  .card-shell-v1.mode-columns .card-shell-grid {
    grid-template-columns: 220px minmax(340px, .9fr) minmax(430px, 1.1fr);
  }
}
@media (max-width: 1180px) {
  .card-shell-v1.mode-tabs .card-shell-grid,
  .card-shell-v1.mode-tabs .card-shell-zone { max-width: 100%; width: 100%; }
  .card-shell-v1.mode-columns .card-shell-grid { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }
  .card-shell-v1.mode-columns .card-shell-zone.tool-right-panel { grid-column: 1 / -1 !important; }
  .card-shell-v1 .wt-param-grid { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
}
@media (max-width: 820px) {
  .card-shell-v1 .card-shell-toolbar { flex-direction: column; }
  .card-shell-v1 .card-shell-layout-toggle { width: 100%; }
  .card-shell-v1 .card-shell-mode-btn { flex: 1; }
  .card-shell-v1.mode-columns .card-shell-grid { grid-template-columns: 1fr; }
  .card-shell-v1.mode-columns .card-shell-zone.tool-right-panel { grid-column: auto !important; }
  .card-shell-v1 .card-shell-context-metrics,
  .card-shell-v1 .bf-side-kpis,
  .card-shell-v1 .wt-param-grid { grid-template-columns: 1fr; }
}


/* 2026-08-11 · Card Shell v1.2
   Small visual corrections after cross-theme review. No layout breakpoints changed. */
.card-shell-v1 .bf-period-note > div {
  color: var(--card-shell-text);
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-raised);
}
.card-shell-v1 .bf-period-note span { color: var(--card-shell-muted); }
.card-shell-v1 .bf-period-note b { color: var(--card-shell-text); }
.card-shell-v1 .result-callout {
  border-color: color-mix(in srgb, var(--color-success) 38%, var(--card-shell-border));
  background: var(--color-success-soft);
  color: var(--color-success);
}
.card-shell-v1 .result-callout.muted {
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-soft);
  color: var(--card-shell-muted);
}

/* 2026-08-11 · Card Shell v1.3 visual polish.
   Keep sticky actions visually fused with the shell surface and make scientific
   charts read as one clean framed object instead of nested rounded cards. */
.card-shell-v1 .card-shell-sticky-action {
  padding: 12px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--card-shell-divider);
  background: var(--card-shell-surface);
  box-shadow: none;
}
.card-shell-v1 .card-shell-sticky-action .btn {
  margin: 0;
}

/* Result plots: the shell owns the outer card. Remove the legacy curve-card
   surface, then use a single chart frame with a distinct plot area. */
.card-shell-v1 .curve-box.tool-result-box,
.card-shell-v1 .curve-box.tool-result-box.expert-plot {
  height: auto;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.card-shell-v1 .chart-wrap,
.card-shell-v1 .bf-chart-wrap {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 18px;
  background: var(--chart-canvas-bg);
  box-shadow: var(--shadow-small);
}
.card-shell-v1 .chart-wrap {
  padding: 0;
}
.card-shell-v1 .chart-svg,
.card-shell-v1 .bf-chart-svg {
  display: block;
  width: 100%;
  border-radius: 0;
  background: transparent;
}
/* SVG renderers still emit a background rect inline. In the card shell that
   rectangle is the actual plotting surface, while the wrapper is the frame. */
.card-shell-v1 .chart-svg > rect:first-child,
.card-shell-v1 .bf-chart-svg > rect:first-child {
  fill: var(--chart-plot-bg);
}
.card-shell-v1 .chart-legend,
.card-shell-v1 .bf-chart-legend {
  margin: 0;
  padding: 9px 12px 10px;
  border-top: 1px solid var(--color-border);
  color: var(--chart-text-muted);
  background: var(--chart-canvas-bg);
}
.card-shell-v1 .tool-result-top {
  margin-bottom: 10px;
}

/* Shale and Anthracite need a little more separation between the light work
   card and the chart frame; Condensate and Bitumen already have enough contrast. */
html[data-theme="shale"] .card-shell-v1 .chart-wrap,
html[data-theme="shale"] .card-shell-v1 .bf-chart-wrap,
html[data-theme="anthracite"] .card-shell-v1 .chart-wrap,
html[data-theme="anthracite"] .card-shell-v1 .bf-chart-wrap {
  border-color: var(--color-border-strong);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

/* 2026-08-11 · Card Shell v1.4 batch 1
   Theme-safe shared controls for Recovery, BEM Pressure and OilV. */
.card-shell-v1 .well-pick {
  color: var(--card-shell-text);
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-raised);
  box-shadow: none;
}
.card-shell-v1 .well-pick span { color: var(--card-shell-muted); }
.card-shell-v1 .well-pick.active {
  color: var(--card-shell-text);
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: none;
}
.card-shell-v1 .bp-form-grid label,
.card-shell-v1 .check-pill,
.card-shell-v1 details,
.card-shell-v1 summary { color: var(--card-shell-text); }
.card-shell-v1 .empty-tool-box {
  color: var(--card-shell-muted);
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--card-shell-border));
  background: var(--card-shell-surface-soft);
}
.card-shell-v1 .recovery-shell-wells {
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}
.card-shell-v1 .recovery-selected-summary { margin-top: 12px; }
.card-shell-v1 .oilv-control-tabs { margin-bottom: 14px; }

@media (max-width: 1180px) {
  .card-shell-v1 .recovery-shell-wells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }
}
@media (max-width: 700px) {
  .card-shell-v1 .recovery-shell-wells { grid-template-columns: 1fr; }
}


/* 2026-08-11 · Card Shell v1.5
   All calculation cards use the shared shell. Autonomous mode is neutral, not an error. */
.card-shell-v1 .card-shell-readiness.standalone {
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--card-shell-border));
  background: color-mix(in srgb, var(--color-accent-soft) 68%, var(--card-shell-surface-raised));
}
.card-shell-v1 .card-shell-readiness.standalone > b { color: var(--color-accent-active); }
.card-shell-context-copy {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--card-shell-border);
  border-radius: 14px;
  background: var(--card-shell-surface-raised);
}
.card-shell-context-copy > span {
  color: var(--card-shell-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.card-shell-context-copy > b {
  color: var(--card-shell-text);
  font-size: 12px;
  line-height: 1.35;
}
.card-shell-v1 .prototype-shell-controls,
.card-shell-v1 .prototype-shell-result {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.card-shell-v1 .prototype-shell-selectors {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}
.card-shell-v1 .prototype-field,
.card-shell-v1 .prototype-check,
.card-shell-v1 .prototype-result-kpis > div {
  color: var(--card-shell-text);
  border-color: var(--card-shell-border);
  background: var(--card-shell-surface-raised);
  box-shadow: none;
}
.card-shell-v1 .prototype-field span,
.card-shell-v1 .prototype-check span,
.card-shell-v1 .prototype-result-kpis b { color: var(--card-shell-text); }
.card-shell-v1 .prototype-field em,
.card-shell-v1 .prototype-result-kpis span { color: var(--card-shell-muted); }
.card-shell-v1 .prototype-panel-head { align-items: center; }
.card-shell-v1 .prototype-shell-action {
  align-items: center;
  gap: 12px;
}
.card-shell-v1 .prototype-shell-action-copy {
  margin-right: auto;
  color: var(--card-shell-muted);
  font-size: 10px;
  font-weight: 750;
}
.card-shell-v1 .prototype-shell-result > .empty-tool-box,
.card-shell-v1 .prototype-shell-result > .prototype-map,
.card-shell-v1 .prototype-shell-result > .prototype-chart,
.card-shell-v1 .prototype-shell-result > .prototype-matrix,
.card-shell-v1 .prototype-shell-result > .prototype-table,
.card-shell-v1 .prototype-shell-result > .unified-result-chart,
.card-shell-v1 .prototype-shell-result > .table-wrap {
  width: 100%;
  min-width: 0;
}
@media (max-width: 1180px) {
  .card-shell-v1 .prototype-shell-selectors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .card-shell-v1 .prototype-shell-selectors,
  .card-shell-v1 .prototype-field-grid,
  .card-shell-v1 .prototype-result-kpis { grid-template-columns: 1fr; }
  .card-shell-v1 .prototype-shell-action { align-items: stretch; flex-direction: column; }
  .card-shell-v1 .prototype-shell-action-copy { margin-right: 0; }
  .card-shell-v1 .prototype-shell-action .btn { width: 100%; min-width: 0; }
}


/* 2026-08-12 · WellTest v2: compact optional fit panel inside the common Card Shell. */
.card-shell-v1 .wt-fit-control {
  margin-top: 14px;
}
.card-shell-v1 .wt-fit-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
}
.card-shell-v1 .wt-fit-chevron {
  font-size: 13px;
  opacity: .72;
}
.card-shell-v1 .wt-fit-panel {
  margin-top: 8px;
  background: var(--card-shell-surface-raised, var(--color-surface-raised));
  border-color: var(--card-shell-border, var(--color-border));
  box-shadow: none;
}
.card-shell-v1 .wt-analysis-source-note {
  margin-top: 12px;
}
@media (max-width: 820px) {
  .card-shell-v1 .wt-fit-panel { padding: 10px 11px; }
  .card-shell-v1 .wt-fit-sliders label { grid-template-columns: 1fr; }
}


/* Property Maps: method explanation + shared map result controls */
.pm-method-explainer-wrap {
  grid-column: 1 / -1;
}
.pm-method-explainer {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.pm-method-explainer b {
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 900;
}
.property-map-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.property-map-view-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pm-contour-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.pm-contour-toggle input {
  accent-color: var(--color-accent);
}
.property-map-isolines path {
  fill: none;
  stroke: rgba(0,0,0,.62);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.property-map-isoline-labels text {
  fill: #111;
  stroke: rgba(255,255,255,.94);
  stroke-width: 3px;
  paint-order: stroke fill;
  stroke-linejoin: round;
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}