/* ==========================================================================
   Totaly console shell - SuperViz layout port.
   Every selector is scoped under .sv-page so nothing leaks into the rest of
   the app. Custom properties use the --svc- prefix and are declared on
   .sv-page (never :root) for the same reason.
   Brand: Totaly blue #2196F3. Surfaces #191A1A / #1F2121 / #262727 / #2C2E2E.
   ========================================================================== */

/* ================================ tokens ================================ */

.sv-page {
  color-scheme: dark;

  /* surfaces */
  --svc-bg: #191A1A;
  --svc-surface: #1F2121;
  --svc-surface-2: #262727;
  --svc-surface-3: #2C2E2E;
  --svc-hover: rgba(255, 255, 255, 0.06);
  --svc-border: #2C2E2E;
  --svc-border-hover: #3D4040;
  --svc-border-soft: #262727;

  /* type */
  --svc-text: #E3E1DD;
  --svc-text-2: #B5B7BE;
  --svc-text-3: #777E90;
  --svc-muted: #777E90;
  --svc-text-strong: #FFFFFF;

  /* brand - Totaly blue accent */
  --svc-primary: #2196F3;
  --svc-primary-hover: #1976D2;
  --svc-primary-bg: #14304A;
  --svc-primary-bg-hover: #1B4066;
  --svc-link: #2196F3;

  /* status */
  --svc-gold: #EDA515;
  --svc-danger: #E04355;
  --svc-success: #5AC189;
  --svc-info: #1FA8C9;

  /* geometry - same scale as tokens.css */
  --svc-r-sm: var(--radius-sm, 4px);
  --svc-radius: var(--radius-md, 8px);
  --svc-r-lg: var(--radius-card, 10px);
  --svc-nav-h: 49px;
  --svc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --svc-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --svc-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  --svc-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);

  background: var(--svc-bg);
  color: var(--svc-text);
  font: 400 14px/1.45 var(--svc-font);
  -webkit-font-smoothing: antialiased;
}

/* optional light theme host, same scoping rules */
html[data-theme="light"] .sv-page,
html[data-app-theme="light"] .sv-page,
html[data-app-theme="og"] .sv-page {
  color-scheme: light;
  --svc-bg: #f7f7f7;
  --svc-surface: #fff;
  --svc-surface-2: #f2f2f2;
  --svc-surface-3: #e9e9e9;
  --svc-hover: rgba(0, 0, 0, 0.045);
  --svc-border: #d7d7d7;
  --svc-border-hover: #c4c4c4;
  --svc-border-soft: #e4e4e4;
  --svc-text: #333;
  --svc-text-2: #626262;
  --svc-text-3: #818181;
  --svc-muted: #818181;
  --svc-text-strong: #111;
  --svc-primary: #1976D2;
  --svc-primary-hover: #1565C0;
  --svc-primary-bg: #E3F2FD;
  --svc-primary-bg-hover: #D2E6FA;
  --svc-link: #1565C0;
  --svc-gold: #a96a00;
  --svc-danger: #c32b40;
  --svc-success: #28804c;
  --svc-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

/* ============================= base elements ============================ */

.sv-page * { box-sizing: border-box; }

.sv-page a { color: var(--svc-link); text-decoration: none; }
.sv-page a:hover { color: var(--svc-primary-hover); }

.sv-page button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sv-page input, .sv-page select, .sv-page textarea { font: inherit; }
.sv-page button:disabled { cursor: not-allowed; }
.sv-page button:focus-visible,
.sv-page a:focus-visible,
.sv-page summary:focus-visible,
.sv-page input:focus-visible,
.sv-page select:focus-visible { outline: 2px solid var(--svc-link); outline-offset: 2px; }

.sv-page ::-webkit-scrollbar { width: 10px; height: 10px; }
.sv-page ::-webkit-scrollbar-track { background: transparent; }
.sv-page ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 6px; border: 2px solid var(--svc-bg); }
.sv-page ::-webkit-scrollbar-thumb:hover { background: #4d4d4d; }

/* ============================== page frame ============================== */

.sv-page .page { min-height: calc(100vh - var(--svc-nav-h)); }

.sv-page .page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 18px;
  border-bottom: 1px solid var(--svc-border);
  background: var(--svc-surface);
}
.sv-page .page-title { font-size: 20px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.sv-page .page-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sv-page .page-body { padding: 16px; }

/* ================================ buttons =============================== */

.sv-page .btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px;
  border-radius: var(--svc-radius);
  font-size: 13px; font-weight: 500;
  background: var(--svc-surface-2);
  color: var(--svc-text);
  border: 1px solid var(--svc-border);
  transition: background var(--svc-transition), color var(--svc-transition), border-color var(--svc-transition);
  white-space: nowrap;
}
.sv-page .btn:hover { background: var(--svc-surface-3); border-color: var(--svc-border-hover); }
.sv-page .btn-primary { background: var(--svc-primary); color: #FFFFFF; border-color: var(--svc-primary); }
.sv-page .btn-primary:hover { background: var(--svc-primary-hover); border-color: var(--svc-primary-hover); }
.sv-page .btn-tertiary { background: var(--svc-primary-bg); color: var(--svc-primary-hover); border-color: transparent; }
.sv-page .btn-tertiary:hover { background: var(--svc-primary-bg-hover); border-color: transparent; }
.sv-page .btn-ghost { background: transparent; border-color: transparent; color: var(--svc-text-2); }
.sv-page .btn-ghost:hover { background: var(--svc-hover); color: var(--svc-text); }
.sv-page .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.sv-page .btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ============================ generic surfaces ========================== */

.sv-page .card {
  background: var(--svc-surface);
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-r-lg);
}

.sv-page .panel-title { font-size: 15px; font-weight: 500; margin: 0 0 12px; }

.sv-page .tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 11px;
  font-size: 12px;
  background: var(--svc-surface-2);
  border: 1px solid var(--svc-border);
  color: var(--svc-text-2);
}
.sv-page .tag-published { color: var(--svc-success); border-color: rgba(90, 193, 137, 0.35); }
.sv-page .tag-draft { color: var(--svc-text-2); }
.sv-page .tag-viz { color: var(--svc-link); border-color: rgba(33, 150, 243, 0.3); background: rgba(33, 150, 243, 0.16); }
.sv-page .tag-featured { color: var(--svc-gold); border-color: rgba(237, 165, 21, 0.35); background: rgba(237, 165, 21, 0.08); }
.sv-page .tag-physical { color: var(--svc-text-2); }
.sv-page .tag-virtual { color: var(--svc-info); border-color: rgba(31, 168, 201, 0.35); }

.sv-page .star { color: var(--svc-text-3); transition: color var(--svc-transition), transform var(--svc-transition); }
.sv-page .star:hover { transform: scale(1.14); color: var(--svc-gold); }
.sv-page .star.on { color: var(--svc-gold); }

.sv-page .muted { color: var(--svc-text-2); }
.sv-page .mono { font-family: var(--svc-mono); font-size: 12.5px; }

/* =============================== filter bar ============================= */

.sv-page .toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--svc-border);
}

.sv-page .view-toggle { display: inline-flex; border: 1px solid var(--svc-border); border-radius: var(--svc-radius); overflow: hidden; }
.sv-page .view-toggle button { width: 34px; height: 32px; display: grid; place-items: center; color: var(--svc-text-2); }
.sv-page .view-toggle button.active { background: var(--svc-surface-2); color: var(--svc-link); }

.sv-page .search {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px; min-width: 200px;
  background: var(--svc-surface); border: 1px solid var(--svc-border); border-radius: var(--svc-radius);
}
.sv-page .search input { background: none; border: 0; outline: none; color: var(--svc-text); width: 100%; }
.sv-page .search input::placeholder { color: var(--svc-text-3); }

.sv-page .select {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  background: var(--svc-surface); border: 1px solid var(--svc-border); border-radius: var(--svc-radius);
  color: var(--svc-text-2); font-size: 13px;
}
.sv-page .select:hover { border-color: var(--svc-border-hover); color: var(--svc-text); }
.sv-page .select select { background: none; border: 0; outline: none; color: inherit; font-size: 13px; }

/* ================================= table ================================ */

.sv-page .table-wrap { border: 1px solid var(--svc-border); border-radius: var(--svc-r-lg); overflow: hidden; background: var(--svc-surface); }
.sv-page table.tbl { width: 100%; border-collapse: collapse; }
.sv-page table.tbl th {
  background: var(--svc-surface-2);
  font-size: 13px; font-weight: 600; text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--svc-border);
  white-space: nowrap;
  color: var(--svc-text);
}
.sv-page table.tbl th .sorter { color: var(--svc-text-3); margin-left: 6px; font-size: 10px; }
.sv-page table.tbl td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--svc-border-soft);
  font-size: 13.5px;
  vertical-align: middle;
}
.sv-page table.tbl tbody tr { transition: background var(--svc-transition); }
.sv-page table.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
.sv-page table.tbl tbody tr:last-child td { border-bottom: 0; }
.sv-page .row-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--svc-transition); }
.sv-page table.tbl tbody tr:hover .row-actions { opacity: 1; }
.sv-page .icon-btn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--svc-r-sm); color: var(--svc-text-2); }
.sv-page .icon-btn:hover { background: var(--svc-hover); color: var(--svc-link); }

.sv-page .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  background: #6b3a3a; color: #ffdada;
}

.sv-page .pagination { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 4px; }
.sv-page .pagination .pages { display: flex; gap: 6px; align-items: center; }
.sv-page .pagination .pages button { min-width: 30px; height: 30px; border: 1px solid var(--svc-border); border-radius: var(--svc-r-sm); color: var(--svc-text-2); }
.sv-page .pagination .pages button.active { border-color: var(--svc-link); color: var(--svc-link); }

.sv-page .empty { padding: 60px 20px; text-align: center; color: var(--svc-text-2); }
.sv-page .empty svg { opacity: 0.35; margin-bottom: 12px; }

/* ============================== card grid =============================== */

.sv-page .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }

.sv-page .asset-card {
  background: var(--svc-surface); border: 1px solid var(--svc-border); border-radius: var(--svc-r-lg);
  overflow: hidden; transition: border-color var(--svc-transition), transform var(--svc-transition);
}
.sv-page .asset-card:hover { border-color: var(--svc-border-hover); transform: translateY(-2px); }
.sv-page .asset-thumb { height: 136px; background: var(--svc-surface-2); border-bottom: 1px solid var(--svc-border); position: relative; overflow: hidden; }
.sv-page .asset-thumb .mini { position: absolute; inset: 0; }
.sv-page .cc-thumb .mini, .sv-page .viz-tile .thumb .mini { position: absolute; inset: 0; }
.sv-page .asset-meta { padding: 12px 14px 14px; }
.sv-page .asset-kind { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--svc-text-2); display: flex; align-items: center; gap: 6px; }
.sv-page .asset-name { font-size: 15px; font-weight: 500; margin: 7px 0 4px; display: flex; align-items: center; gap: 8px; }
.sv-page .asset-name a { color: var(--svc-text); }
.sv-page .asset-name a:hover { color: var(--svc-link); }
.sv-page .asset-sub { font-size: 12px; color: var(--svc-text-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ================================= tabs ================================= */

.sv-page .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--svc-border); }
.sv-page .tab {
  padding: 10px 16px; font-size: 14px; color: var(--svc-text-2);
  border-bottom: 2px solid transparent; transition: color var(--svc-transition), border-color var(--svc-transition);
}
.sv-page .tab:hover { color: var(--svc-text); }
.sv-page .tab.active { color: var(--svc-link); border-bottom-color: var(--svc-link); }

.sv-page .segmented { display: inline-flex; background: var(--svc-surface-2); border: 1px solid var(--svc-border); border-radius: var(--svc-radius); padding: 2px; }
.sv-page .segmented button { padding: 5px 16px; border-radius: 6px; font-size: 13px; color: var(--svc-text-2); }
.sv-page .segmented button.active { background: var(--svc-surface-3); color: var(--svc-text); }

/* =============================== home page ============================== */

.sv-page .welcome-title { font-size: 18px; font-weight: 500; padding: 18px 16px 0; }
.sv-page .home-section { margin: 16px; padding: 16px; }
.sv-page .home-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.sv-page .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 16px 0; }
.sv-page .kpi { background: var(--svc-surface); border: 1px solid var(--svc-border); border-radius: var(--svc-r-lg); padding: 14px 16px; }
.sv-page .kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--svc-text-2); }
.sv-page .kpi-value { font-size: 26px; font-weight: var(--num-weight-kpi, 600); margin-top: 6px; font-variant-numeric: var(--num-variant, tabular-nums lining-nums); font-feature-settings: var(--num-features, "tnum" 1, "lnum" 1); letter-spacing: var(--num-tracking, -0.02em); color: var(--num-color, var(--svc-text)); }
.sv-page .kpi-delta { font-size: 12px; margin-top: 4px; }
.sv-page .kpi-delta.up { color: var(--svc-success); }
.sv-page .kpi-delta.down { color: var(--svc-danger); }

/* ========================= chart gallery (chart/add) ==================== */

.sv-page .add-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
.sv-page .add-step { display: flex; gap: 14px; margin-bottom: 18px; }
.sv-page .step-num {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--svc-primary-bg); color: var(--svc-primary-hover);
}
.sv-page .step-label { font-size: 15px; font-weight: 500; margin-bottom: 10px; }

.sv-page .gallery { display: grid; grid-template-columns: 208px 1fr; gap: 0; border: 1px solid var(--svc-border); border-radius: var(--svc-r-lg); overflow: hidden; background: var(--svc-surface); }
.sv-page .gallery-side { border-right: 1px solid var(--svc-border); padding: 10px 0; background: var(--svc-surface); max-height: 560px; overflow: auto; }
.sv-page .gallery-side .grp { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--svc-text-3); padding: 12px 16px 6px; }
.sv-page .cat {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px; font-size: 13.5px; color: var(--svc-text-2);
  border-left: 2px solid transparent; transition: background var(--svc-transition), color var(--svc-transition);
  width: 100%; text-align: left;
}
.sv-page .cat:hover { background: var(--svc-hover); color: var(--svc-text); }
.sv-page .cat.active { background: rgba(33, 150, 243, 0.18); color: var(--svc-link); border-left-color: var(--svc-link); }
.sv-page .cat .n { margin-left: auto; font-size: 11px; color: var(--svc-text-3); }

.sv-page .gallery-main { padding: 14px 16px 18px; max-height: 560px; overflow: auto; }
.sv-page .viz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.sv-page .viz-tile {
  border: 1px solid var(--svc-border); border-radius: var(--svc-radius); background: var(--svc-surface-2);
  padding: 10px; text-align: left; transition: border-color var(--svc-transition), background var(--svc-transition), transform var(--svc-transition);
  position: relative; overflow: hidden;
}
.sv-page .viz-tile:hover { border-color: var(--svc-link); transform: translateY(-2px); }
.sv-page .viz-tile.selected { border-color: var(--svc-link); background: rgba(33, 150, 243, 0.15); box-shadow: 0 0 0 1px var(--svc-link) inset; }
.sv-page .viz-tile .thumb { height: 74px; position: relative; border-radius: var(--svc-r-sm); background: var(--svc-surface); border: 1px solid var(--svc-border-soft); margin-bottom: 9px; overflow: hidden; }
.sv-page .viz-tile .nm { font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.sv-page .viz-tile .ft {
  position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 8.5px; line-height: 1;
  letter-spacing: 0.08em; color: var(--svc-gold); padding: 3px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.72); border: 1px solid rgba(237, 165, 21, 0.35);
}

.sv-page .viz-detail { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--svc-border); border-radius: var(--svc-r-lg); background: var(--svc-surface); }
.sv-page .viz-detail h4 { margin: 0 0 6px; font-size: 14px; }
.sv-page .viz-detail p { margin: 0; color: var(--svc-text-2); font-size: 13px; max-width: 78ch; }
.sv-page .viz-detail .example { margin-top: 12px; height: 190px; border: 1px solid var(--svc-border-soft); border-radius: var(--svc-radius); background: var(--svc-surface-2); }

/* ============================== explore view ============================ */

.sv-page .explore {
  display: grid;
  grid-template-columns: 268px 320px minmax(0, 1fr);
  height: calc(100vh - var(--svc-nav-h) - 61px);
  border-top: 1px solid var(--svc-border);
}
.sv-page .explore-col { border-right: 1px solid var(--svc-border); overflow: auto; background: var(--svc-surface); }
.sv-page .explore-col:last-child { border-right: 0; background: var(--svc-bg); }
.sv-page .explore-head { padding: 12px 14px; border-bottom: 1px solid var(--svc-border); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.sv-page .dataset-chip { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--svc-border); font-size: 13px; }

.sv-page .field-group { padding: 10px 14px 14px; border-bottom: 1px solid var(--svc-border-soft); }
.sv-page .field-group h5 { margin: 0 0 4px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.sv-page .field-count { font-size: 11.5px; color: var(--svc-text-3); margin-bottom: 8px; }
.sv-page .field {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--svc-r-sm);
  font-size: 12.5px; cursor: grab; transition: background var(--svc-transition);
}
.sv-page .field:hover { background: var(--svc-hover); }
.sv-page .field .type { font-family: var(--svc-mono); font-size: 11px; color: var(--svc-info); width: 14px; text-align: center; }
.sv-page .field .type.str { color: var(--svc-gold); }
.sv-page .field .type.tmp { color: var(--svc-success); }
.sv-page .field .grip { margin-left: auto; color: var(--svc-text-3); }
.sv-page .field.dragging { opacity: 0.4; }

.sv-page .ctrl-section { border-bottom: 1px solid var(--svc-border-soft); padding: 12px 14px; }
.sv-page .ctrl-section > h5 { margin: 0 0 10px; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.sv-page .ctrl-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--svc-text-2); margin: 12px 0 6px; }
.sv-page .ctrl-label:first-child { margin-top: 0; }

.sv-page .dropzone {
  min-height: 34px; border: 1px dashed var(--svc-border-hover); border-radius: var(--svc-r-sm);
  padding: 5px; display: flex; flex-direction: column; gap: 5px;
  background: var(--svc-surface-2); transition: border-color var(--svc-transition), background var(--svc-transition);
}
.sv-page .dropzone.over { border-color: var(--svc-link); background: rgba(33, 150, 243, 0.16); }
.sv-page .dropzone .hint { font-size: 12px; color: var(--svc-text-3); padding: 5px 6px; display: flex; align-items: center; gap: 6px; }
.sv-page .pill {
  display: flex; align-items: center; gap: 7px;
  background: var(--svc-surface-3); border: 1px solid var(--svc-border); border-radius: var(--svc-r-sm);
  padding: 5px 8px; font-size: 12.5px;
}
.sv-page .pill .fx { color: var(--svc-link); font-family: var(--svc-mono); font-size: 11px; }
.sv-page .pill .x { margin-left: auto; color: var(--svc-text-3); }
.sv-page .pill .x:hover { color: var(--svc-danger); }

.sv-page .chart-stage { display: flex; flex-direction: column; height: 100%; }
.sv-page .chart-stage-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--svc-border); }
.sv-page .chart-canvas { flex: 1; min-height: 0; padding: 14px; }
.sv-page .chart-canvas > div { height: 100%; }
.sv-page .results-pane { height: 236px; border-top: 1px solid var(--svc-border); background: var(--svc-surface); display: flex; flex-direction: column; }
.sv-page .results-body { overflow: auto; }

/* ========================== dashboard (view/edit) ====================== */

.sv-page .dash-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--svc-border); background: var(--svc-surface); }
.sv-page .dash-title { font-size: 19px; font-weight: 500; }
.sv-page .dash-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--svc-text-2); border: 1px solid var(--svc-border); border-radius: 16px; padding: 4px 12px; }
.sv-page .dash-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.sv-page .dash-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-page .dash-shell.editing { grid-template-columns: minmax(0, 1fr) 376px; }

.sv-page .dash-canvas { padding: 16px; min-height: 420px; }
.sv-page .dash-row {
  display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px;
  border-radius: var(--svc-radius); position: relative;
}
.sv-page .editing .dash-row { padding: 8px; border: 1px dashed transparent; }
.sv-page .editing .dash-row:hover { border-color: var(--svc-border-hover); }
.sv-page .dash-row.drop-target { border-color: var(--svc-link); background: rgba(33, 150, 243, 0.1); }

.sv-page .tile {
  background: var(--svc-surface); border: 1px solid var(--svc-border); border-radius: var(--svc-radius);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  transition: border-color var(--svc-transition), box-shadow var(--svc-transition);
}
.sv-page .tile:hover { border-color: var(--svc-border-hover); }
.sv-page .tile-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px 6px; }
.sv-page .tile-title { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-page .tile-head .sp { margin-left: auto; display: flex; gap: 2px; }
.sv-page .tile-body { flex: 1; min-height: 0; padding: 4px 10px 10px; }
.sv-page .tile-body > .ec { width: 100%; height: 100%; min-height: 150px; }

.sv-page .tile.markdown .tile-body { padding: 14px; font-size: 13.5px; color: var(--svc-text-2); }
.sv-page .tile.header-el { background: transparent; border-color: transparent; }
.sv-page .tile.header-el .tile-body { font-size: 20px; font-weight: 500; color: var(--svc-text); padding: 6px 2px; }
.sv-page .tile.divider-el { background: transparent; border: 0; padding: 10px 0; }
.sv-page .tile.divider-el hr { border: 0; border-top: 1px solid var(--svc-border); margin: 0; }

.sv-page .editing .tile { cursor: grab; }
.sv-page .tile.drag-src { opacity: 0.35; }
.sv-page .tile-del { display: none; }
.sv-page .editing .tile:hover .tile-del { display: grid; }

.sv-page .dash-builder { border-left: 1px solid var(--svc-border); background: var(--svc-surface); display: flex; flex-direction: column; max-height: calc(100vh - var(--svc-nav-h) - 62px); position: sticky; top: calc(var(--svc-nav-h) + 0px); }
.sv-page .builder-body { overflow: auto; padding: 14px; }
.sv-page .card-list { display: flex; flex-direction: column; gap: 10px; }
.sv-page .chart-card {
  display: grid; grid-template-columns: 116px 1fr; gap: 12px;
  border: 1px solid var(--svc-border); border-radius: var(--svc-radius); padding: 10px;
  background: var(--svc-surface-2); cursor: grab; transition: border-color var(--svc-transition), transform var(--svc-transition);
}
.sv-page .chart-card:hover { border-color: var(--svc-link); }
.sv-page .chart-card.dragging { opacity: 0.45; }
.sv-page .chart-card .cc-thumb { height: 84px; position: relative; border-radius: var(--svc-r-sm); overflow: hidden; background: var(--svc-surface); border: 1px solid var(--svc-border-soft); }
.sv-page .chart-card .cc-name { font-size: 13px; font-weight: 500; margin-bottom: 6px; line-height: 1.25; }
.sv-page .chart-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 11.5px; }
.sv-page .chart-card dt { color: var(--svc-text-3); }
.sv-page .chart-card dd { margin: 0; color: var(--svc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-page .added-badge { display: inline-block; margin-top: 6px; font-size: 10px; border: 1px solid var(--svc-border); border-radius: 3px; padding: 1px 5px; color: var(--svc-text-3); }

.sv-page .layout-el {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 14px; border-bottom: 1px solid var(--svc-border-soft);
  cursor: grab; font-size: 14px; transition: background var(--svc-transition);
}
.sv-page .layout-el:hover { background: var(--svc-hover); }
.sv-page .layout-el.dragging { opacity: 0.4; }
.sv-page .layout-el .ic { color: var(--svc-text-2); display: grid; place-items: center; width: 22px; }

.sv-page .row-drop {
  height: 12px; border-radius: 6px; margin: -6px 8px 6px; transition: background var(--svc-transition), height var(--svc-transition);
}
.sv-page .row-drop.over { height: 44px; background: rgba(33, 150, 243, 0.18); border: 1px dashed var(--svc-link); }

/* =============================== big number ============================= */

.sv-page .bignum { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 4px 6px; }
.sv-page .bignum .v { font-size: clamp(30px, 6.4vw, 62px); font-weight: var(--num-weight-kpi, 600); line-height: 1; letter-spacing: var(--num-tracking, -0.02em); font-variant-numeric: var(--num-variant, tabular-nums lining-nums); }
.sv-page .bignum .sub { margin-top: 8px; font-size: 12.5px; color: var(--svc-text-2); }
.sv-page .bignum .sub .up { color: var(--svc-success); }
.sv-page .bignum .sub .down { color: var(--svc-danger); }
.sv-page .bignum .spark { height: 62px; margin-top: 10px; }

/* ============================ pivot / data table ======================== */

.sv-page .data-table-wrap { overflow: auto; max-height: 100%; }
.sv-page table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sv-page table.data th, .sv-page table.data td { border: 1px solid var(--svc-border-soft); padding: 6px 9px; text-align: right; white-space: nowrap; }
.sv-page table.data th { background: var(--svc-surface-2); position: sticky; top: 0; font-weight: 600; z-index: 1; }
.sv-page table.data td:first-child, .sv-page table.data th:first-child { text-align: left; }
.sv-page table.data tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }
.sv-page table.data td.num { font-variant-numeric: var(--num-variant, tabular-nums lining-nums); font-feature-settings: var(--num-features, "tnum" 1, "lnum" 1); font-family: var(--svc-mono); font-weight: var(--num-weight-table, 500); }
.sv-page table.data tr.total td { background: var(--svc-surface-2); font-weight: 600; }
.sv-page table.data td .bar { display: block; height: 4px; border-radius: 2px; background: var(--svc-info); margin-top: 3px; opacity: 0.7; }
.sv-page .pivot-group { cursor: pointer; }
.sv-page .pivot-group .caret { display: inline-block; width: 12px; color: var(--svc-text-3); }

/* ================================ toast ================================= */

.sv-page #toast-host { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.sv-page .toast {
  background: var(--svc-surface-2); border: 1px solid var(--svc-border); border-left: 3px solid var(--svc-link);
  border-radius: var(--svc-radius); padding: 10px 14px; font-size: 13px; box-shadow: var(--svc-shadow);
  animation: svcToastIn 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes svcToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================== skeletons =============================== */

.sv-page .skel { background: linear-gradient(90deg, #1b1b1b 25%, #242424 37%, #1b1b1b 63%); background-size: 400% 100%; animation: svcShimmer 1.4s ease infinite; border-radius: var(--svc-r-sm); }
@keyframes svcShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ======================= shell overrides: chrome ======================== */

.sv-page .sh-demo { margin-left: auto; font-size: 12px; color: var(--svc-text-2); white-space: nowrap; padding-left: 12px; }
.sv-page .sh-demo span { color: var(--svc-text-3); }
.sv-page .sh-settings { width: auto; padding: 0 6px 0 10px; font-size: 13px; }
.sv-page .sh-menu { position: relative; }
.sv-page .sh-menu summary { list-style: none; cursor: pointer; }
.sv-page .sh-menu summary::-webkit-details-marker, .sv-page .sh-filter summary::-webkit-details-marker { display: none; }
.sv-page .sh-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 252px; padding: 6px; background: var(--svc-surface-2); border: 1px solid var(--svc-border); border-radius: 6px; box-shadow: var(--svc-shadow); z-index: 150; }
.sv-page .sh-menu-panel button, .sv-page .sh-menu-panel a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px; color: var(--svc-text); font-size: 13px; border-radius: 3px; }
.sv-page .sh-menu-panel button:hover:not(:disabled), .sv-page .sh-menu-panel a:hover { background: var(--svc-hover); }
.sv-page .sh-menu-panel button:disabled { opacity: 0.45; }
.sv-page .sh-menu-panel hr { border: 0; border-top: 1px solid var(--svc-border); margin: 6px 0; }
.sv-page .sh-menu-label { color: var(--svc-text-2); padding: 8px 10px; font-size: 12px; }

/* ==================== shell overrides: catalog / gallery ================ */

.sv-page .sh-catalog .page-head, .sv-page .sh-gallery .page-head { height: 52px; padding: 10px 16px; border-bottom: 0; }
.sv-page .sh-catalog .page-title, .sv-page .sh-gallery .page-title { font-size: 18px; font-weight: 500; letter-spacing: 0; }
.sv-page .sh-gallery .page-head > .btn { margin-left: auto; }
.sv-page .sh-catalog .page-body { padding: 0 16px 24px; }
.sv-page .sh-catalog .page-head-actions { gap: 8px; }
.sv-page .sh-catalog .btn-primary, .sv-page .sh-gallery .btn-primary, .sv-page .sh-dialog .btn-primary { color: #fff; }
.sv-page .sh-toolbar { gap: 8px; padding: 24px 16px 16px; border: 0; min-height: 72px; align-items: center; }
.sv-page .sh-toolbar .search { min-width: 176px; width: 176px; flex: 0 0 176px; }
.sv-page .sh-toolbar .search input { min-width: 0; font-size: 13px; }
.sv-page .sh-toolbar .view-toggle { border: 0; border-radius: 0; overflow: visible; gap: 8px; margin-right: 8px; }
.sv-page .sh-toolbar .view-toggle button { width: 28px; height: 28px; color: var(--svc-text); border-radius: 8px; }
.sv-page .sh-toolbar .view-toggle button svg { width: 22px; height: 22px; }
.sv-page .sh-toolbar .view-toggle button.active { background: var(--svc-text); color: var(--svc-surface); }
.sv-page .sh-toolbar .btn-ghost { padding: 0 4px; }
.sv-page .sh-toolbar .btn-ghost:disabled { opacity: 0.5; }

/* ========================= shell overrides: filters ===================== */

.sv-page .sh-filter { position: relative; flex-shrink: 0; }
.sv-page .sh-filter summary { cursor: pointer; list-style: none; color: var(--svc-text); user-select: none; }
.sv-page .sh-filter summary svg { color: var(--svc-text-2); }
.sv-page .sh-filter[open] summary, .sv-page .sh-filter .sh-filter-active { border-color: var(--svc-link); }
.sv-page .sh-filter-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--svc-link); }
.sv-page .sh-filter-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 100; min-width: 192px; max-width: min(360px, 80vw); max-height: 320px; overflow: auto; border: 1px solid var(--svc-border); border-radius: 6px; background: var(--svc-surface-2); box-shadow: var(--svc-shadow); padding: 10px; }
.sv-page .sh-filter-panel strong { display: block; padding: 4px 4px 8px; font-size: 13px; font-weight: 500; }
.sv-page .sh-filter-panel label { display: flex; gap: 8px; padding: 8px 4px; font-size: 13px; align-items: center; cursor: pointer; overflow-wrap: anywhere; }
.sv-page .sh-filter-panel label:hover { background: var(--svc-hover); }
.sv-page .sh-filter-panel input,
.sv-page .sh-dialog input[type="checkbox"],
.sv-page .sh-table input,
.sv-page .sh-card-check input { accent-color: var(--svc-primary); width: 14px; height: 14px; flex-shrink: 0; }
.sv-page .sh-disabled-filter { color: var(--svc-text-2); opacity: 0.55; }

/* ========================== shell overrides: tables ===================== */

.sv-page .sh-table-wrap { border: 0; border-radius: 10px 10px 0 0; overflow: auto; }
.sv-page table.sh-table { width: 100%; table-layout: auto; }
.sv-page table.sh-table th { height: 44px; padding: 10px 10px; font-size: 13px; font-weight: 500; position: relative; }
.sv-page table.sh-table th + th:not(.sh-star-cell)::before { content: ""; position: absolute; left: 0; top: 10px; height: 24px; border-left: 1px solid var(--svc-border); }
.sv-page table.sh-table td { height: 48px; padding: 8px 10px; font-size: 14px; border-bottom: 1px solid var(--svc-border); }
.sv-page table.sh-table td.sh-star-cell, .sv-page table.sh-table th.sh-star-cell { width: 38px; padding: 8px 10px; }
.sv-page .sh-star-cell .star { display: grid; place-items: center; padding: 2px; }
.sv-page .sh-star-cell .star svg { width: 18px; height: 18px; }
.sv-page .sh-sort { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; font-size: inherit; font-weight: inherit; text-align: left; }
.sv-page .sh-sorter { display: block; font-size: 12px; line-height: 7px; color: var(--svc-text-3); }
.sv-page .sh-sorter.active { color: var(--svc-link); }
.sv-page .sh-name-cell { min-width: 190px; max-width: 320px; }
.sv-page .sh-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sv-page .sh-table-charts .sh-name-cell { width: 32%; max-width: 340px; }
.sv-page .sh-table-charts td:nth-child(3) { min-width: 140px; }
.sv-page .sh-table-charts td:nth-child(4) { max-width: 205px; }
.sv-page .sh-table-datasets .sh-name-cell { width: 30%; }
.sv-page .sh-table-dashboards .sh-name-cell { width: 23%; }
.sv-page .sh-table .avatar { width: 24px; height: 24px; color: #fff; background: #e5a0ad; font-weight: 500; font-size: 10px; }
.sv-page .sh-table .tag { border-radius: 6px; padding: 0 10px; gap: 5px; }
.sv-page .sh-table .tag-draft, .sv-page .sh-table .tag-physical { color: #BBD9F5; background: #14304A; border-color: transparent; }
.sv-page .sh-table .tag-published { color: #d0e4c1; background: #11230b; border-color: #2a4021; }
html[data-theme="light"] .sv-page .sh-table .tag-draft,
html[data-theme="light"] .sv-page .sh-table .tag-physical,
html[data-app-theme="light"] .sv-page .sh-table .tag-draft,
html[data-app-theme="light"] .sv-page .sh-table .tag-physical,
html[data-app-theme="og"] .sv-page .sh-table .tag-draft,
html[data-app-theme="og"] .sv-page .sh-table .tag-physical { color: #1565C0; background: #DEEAF7; }
html[data-theme="light"] .sv-page .sh-table .tag-published,
html[data-app-theme="light"] .sv-page .sh-table .tag-published,
html[data-app-theme="og"] .sv-page .sh-table .tag-published { color: #377235; background: #e7f1df; border-color: #c4d7b7; }
.sv-page .sh-actions-cell { width: 98px; min-width: 92px; }
.sv-page .sh-row-actions { gap: 2px; }
.sv-page .sh-row-actions .icon-btn { width: 24px; height: 26px; }
.sv-page .sh-row-actions .icon-btn:disabled { opacity: 0.3; }
.sv-page tr:focus-within .sh-row-actions,
.sv-page .sh-asset-card:focus-within .sh-row-actions,
.sv-page .sh-asset-card:hover .sh-row-actions { opacity: 1; }
.sv-page .sh-dashboard-link { display: block; font-size: 13px; line-height: 1.3; margin-bottom: 2px; }
.sv-page .sh-inline-preview { display: block; font-size: 11px; color: var(--svc-text-2); line-height: 1.2; margin-top: 3px; }
.sv-page .sh-check-cell { width: 32px; }
.sv-page .sh-bulkbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; border: 1px solid var(--svc-border); background: var(--svc-surface-2); margin-bottom: 12px; border-radius: 6px; }
.sv-page .sh-bulkbar strong { font-size: 13px; margin-right: auto; font-weight: 500; }
.sv-page .sh-danger { color: var(--svc-danger); }
.sv-page .sh-pagination { padding: 16px 0 4px; gap: 18px; }
.sv-page .sh-pagination .pages { gap: 8px; }
.sv-page .sh-pagination .pages button { border-color: transparent; width: 32px; height: 32px; border-radius: 8px; }
.sv-page .sh-pagination .pages button.active { background: var(--svc-surface); border-color: var(--svc-link); color: var(--svc-link); }
.sv-page .sh-pagination .pages button:disabled { opacity: 0.35; }
.sv-page .sh-page-meta { display: flex; gap: 20px; align-items: center; font-size: 13px; }
.sv-page .sh-page-meta label { display: flex; align-items: center; gap: 5px; color: var(--svc-text-2); font-size: 12px; }
.sv-page .sh-page-meta select { border: 1px solid var(--svc-border); background: var(--svc-surface); color: var(--svc-text); border-radius: 4px; padding: 2px 4px; }

/* ========================== shell overrides: home ======================= */

.sv-page .sh-home .welcome-title { font-size: 14px; font-weight: 500; padding: 16px 16px 0; margin: 0; height: 50px; }
.sv-page .sh-home .home-section { margin: 0 16px 24px; padding: 24px 24px 30px; border-radius: 3px; background: var(--svc-bg); }
.sv-page .sh-home .home-section-head { height: 45px; margin: 0 0 8px; border-bottom: 1px solid var(--svc-border); gap: 12px; }
.sv-page .sh-home .home-section-head .tabs { border: 0; height: 45px; min-width: 0; }
.sv-page .sh-home .home-section-head .tab { padding: 10px 8px 16px; margin-right: 12px; font-size: 14px; white-space: nowrap; }
.sv-page .sh-home .home-section-head > .btn { margin-left: auto; align-self: flex-start; height: 32px; padding: 0 18px; }
.sv-page .sh-favorite-rail { display: flex; gap: 14px; overflow-x: auto; padding: 0 0 0; scroll-snap-type: x proximity; scrollbar-width: thin; }
.sv-page .sh-favorite-rail .sh-asset-card { flex: 0 0 300px; height: 270px; scroll-snap-align: start; }
.sv-page .sh-asset-card { position: relative; transition: border-color 120ms; }
.sv-page .sh-asset-card:hover { transform: none; }
.sv-page .sh-asset-card .asset-thumb { display: block; height: 170px; background: var(--svc-surface); border: 0; padding: 0; }
.sv-page .sh-asset-card .asset-thumb .mini { inset: 12px; }
.sv-page .sh-asset-card .asset-meta { padding: 10px 16px 14px; }
.sv-page .sh-asset-card .asset-kind { font-size: 12px; letter-spacing: 0; line-height: 17px; color: var(--svc-text); gap: 8px; }
.sv-page .sh-asset-card .asset-kind svg { color: var(--svc-text-3); }
.sv-page .sh-asset-card .asset-name { font-size: 16px; font-weight: 500; margin: 7px 0 8px; gap: 8px; }
.sv-page .sh-asset-card .asset-name > a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-page .sh-asset-card .asset-name .star { margin-left: auto; flex-shrink: 0; display: flex; padding: 0; }
.sv-page .sh-asset-card .asset-name .star svg { width: 18px; height: 18px; }
.sv-page .sh-asset-card .asset-sub { font-size: 14px; }
.sv-page .sh-asset-card .asset-sub .row-actions { margin: -4px -5px -4px 0; }
.sv-page .sh-card-check { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 5px; background: var(--svc-surface); border-radius: 4px; }
.sv-page .sh-dash-schematic { display: grid; position: absolute; inset: 26px 18px 28px; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(8, 1fr); gap: 8px; }
.sv-page .sh-dash-schematic i { display: block; background: #7d7d7d; }
.sv-page .sh-dash-schematic i:nth-child(1) { grid-area: 1/1/4/4; }
.sv-page .sh-dash-schematic i:nth-child(2) { grid-area: 1/4/5/6; }
.sv-page .sh-dash-schematic i:nth-child(3) { grid-area: 1/6/5/8; background: #d5edf3; }
.sv-page .sh-dash-schematic i:nth-child(4) { grid-area: 1/8/5/11; }
.sv-page .sh-dash-schematic i:nth-child(5) { grid-area: 4/1/9/4; background: #d5edf3; }
.sv-page .sh-dash-schematic i:nth-child(6) { grid-area: 5/4/9/7; }
.sv-page .sh-dash-schematic i:nth-child(7) { grid-area: 5/7/9/11; }
.sv-page .sh-home .sh-home-catalog { padding: 16px 32px 18px; }
.sv-page .sh-segment-row { display: flex; justify-content: flex-end; height: 32px; }
.sv-page .sh-segment-row .segmented { height: 32px; }
.sv-page .sh-segment-row .segmented button { font-size: 14px; padding: 0 14px; }
.sv-page .sh-segment-row .segmented button:disabled { color: var(--svc-text-3); }
.sv-page .sh-home-catalog .sh-toolbar { padding: 0; margin: -16px 0 16px; min-height: 32px; max-width: calc(100% - 280px); }
.sv-page table.sh-home-table { table-layout: fixed; }
.sv-page table.sh-home-table th.sh-star-cell, .sv-page table.sh-home-table td.sh-star-cell { width: 44px; }
.sv-page .sh-home-table .sh-name-cell { width: auto; }
.sv-page .sh-home-table th:nth-last-child(2), .sv-page .sh-home-table td:nth-last-child(2) { background: var(--svc-surface-2); }
.sv-page .sh-home-table .sh-actions-cell { width: 19%; }

/* ====================== shell overrides: empty states =================== */

.sv-page .sh-collection-empty { flex: 1; min-height: 270px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--svc-text-2); }
.sv-page .sh-collection-empty h3 { color: var(--svc-text); margin: 12px 0 4px; font-size: 16px; font-weight: 500; }
.sv-page .sh-collection-empty p { margin: 0 0 14px; }
.sv-page .sh-empty { padding: 60px 24px; text-align: center; color: var(--svc-text-2); }
.sv-page .sh-empty h1 { font-size: 20px; font-weight: 500; color: var(--svc-text); }
.sv-page .sh-empty h3 { font-size: 16px; font-weight: 500; color: var(--svc-text); margin: 14px 0 8px; }
.sv-page .sh-empty p { max-width: 600px; margin: 10px auto 20px; }
.sv-page .sh-loading { padding: 60px 24px; text-align: center; color: var(--svc-text-2); }

/* ======================= shell overrides: gallery ======================= */

.sv-page .sh-gallery .add-wrap { max-width: 1320px; padding-top: 24px; }
.sv-page .sh-step-content { flex: 1; min-width: 0; }
.sv-page .sh-step-content > .step-label { display: block; margin: 0 0 12px; }
.sv-page .sh-dataset-choice { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sv-page .sh-dataset-choice select { height: 36px; min-width: 360px; max-width: 100%; padding: 0 12px; border: 1px solid var(--svc-border); border-radius: 6px; background: var(--svc-surface); color: var(--svc-text); }
.sv-page .sh-hint { color: var(--svc-text-2); font-size: 13px; line-height: 1.5; margin: 10px 0; }
.sv-page .sh-gallery .gallery { grid-template-columns: 190px 1fr; border-radius: 6px; }
.sv-page .sh-gallery .gallery-side, .sv-page .sh-gallery .gallery-main { max-height: 540px; }
.sv-page .sh-gallery .gallery-side .cat { font-size: 13px; padding: 9px 14px; }
.sv-page .sh-gallery .gallery-main { padding: 16px; }
.sv-page .sh-gallery .viz-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 12px; }
.sv-page .sh-gallery-search { max-width: 280px; margin-bottom: 16px; }
.sv-page .sh-gallery .viz-tile { border-radius: 5px; background: var(--svc-surface); transition: border-color 120ms; padding: 10px; }
.sv-page .sh-gallery .viz-tile:hover { transform: none; }
.sv-page .sh-gallery .viz-tile.selected { border-color: var(--svc-link); background: var(--svc-primary-bg); box-shadow: 0 0 0 1px var(--svc-link) inset; }
.sv-page .sh-gallery .viz-tile .thumb { height: 82px; border: 0; border-radius: 0; margin-bottom: 8px; }
.sv-page .sh-gallery .viz-tile .nm { font-size: 13px; }
.sv-page .sh-viz-support { font-size: 11px; color: var(--svc-text-2); margin-top: 6px; }
.sv-page .sh-viz-support.supported { color: var(--svc-link); }
.sv-page .sh-gallery-detail { display: flex; gap: 24px; align-items: center; margin-top: 18px; padding: 16px; border: 1px solid var(--svc-border); border-radius: 6px; background: var(--svc-surface); }
.sv-page .sh-gallery-detail > div { flex: 1; }
.sv-page .sh-gallery-detail h3 { margin: 0 0 6px; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.sv-page .sh-gallery-detail p { color: var(--svc-text-2); font-size: 13px; line-height: 1.5; margin: 0; max-width: 780px; }
.sv-page .sh-preview-badge { display: inline-flex; font-size: 11px; border: 1px solid var(--svc-border); padding: 2px 7px; border-radius: 4px; color: var(--svc-text-2); background: var(--svc-surface); white-space: nowrap; font-weight: 400; }
.sv-page .asset-thumb > .sh-preview-badge { position: absolute; right: 8px; bottom: 6px; }
.sv-page .sh-thumb-error { display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--svc-text-2); }
.sv-page .sh-legacy-preview { min-height: 400px; height: 520px; padding: 16px; background: var(--svc-surface); border: 1px solid var(--svc-border); }

/* ======================== shell overrides: dialogs ====================== */

.sv-page .sh-dialog { width: 520px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--svc-border); border-radius: 8px; color: var(--svc-text); background: var(--svc-surface); box-shadow: var(--svc-shadow); }
.sv-page .sh-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }
.sv-page .sh-dialog > header { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--svc-border); }
.sv-page .sh-dialog h2 { margin: 0; font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.sv-page .sh-dialog > header .icon-btn { margin-left: auto; flex-shrink: 0; }
.sv-page .sh-dialog-body { padding: 20px; }
.sv-page .sh-dialog-body > p:first-child { margin-top: 0; }
.sv-page .sh-dialog > footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--svc-border); flex-wrap: wrap; position: sticky; bottom: 0; background: var(--svc-surface); }
.sv-page .sh-dialog .sh-btn-danger { background: #bc3447; border-color: #bc3447; color: #fff; }
.sv-page .sh-form-label { display: block; font-size: 13px; margin-bottom: 8px; }
.sv-page .sh-dialog input[type="text"], .sv-page .sh-dialog input[name="name"] { width: 100%; height: 36px; padding: 8px 12px; border: 1px solid var(--svc-border); border-radius: 4px; background: var(--svc-surface-2); color: var(--svc-text); }
.sv-page .sh-form-error { color: var(--svc-danger); font-size: 13px; }
.sv-page .sh-form-error:empty { display: none; }
.sv-page .sh-tab-choice { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.sv-page .sh-dataset-dialog { width: 960px; }
.sv-page .sh-dataset-dialog .sh-dialog-body { padding: 16px 20px 20px; }
.sv-page .sh-dataset-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--svc-text-2); }
.sv-page .sh-dataset-dialog .tabs { margin: 16px -20px 0; padding: 0 12px; }
.sv-page .sh-dataset-dialog .tab { font-size: 13px; }
.sv-page .sh-dataset-table { overflow: auto; max-height: 380px; }
.sv-page .sh-dataset-table table { min-width: 100%; }
.sv-page .sh-dataset-table th { position: sticky; top: 0; z-index: 1; font-size: 12px; }
.sv-page .sh-dataset-table td { white-space: nowrap; font-size: 13px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; }
.sv-page .sh-field-type { display: inline-flex; width: 30px; font-family: var(--svc-mono); font-size: 11px; color: var(--svc-info); }
.sv-page .sh-field-type.str { color: var(--svc-gold); }
.sv-page .sh-field-type.tmp { color: var(--svc-success); }
.sv-page .sh-sample-search { margin: 16px 0; max-width: 320px; }
.sv-page .sh-sample-pager { display: flex; justify-content: center; gap: 16px; align-items: center; margin-top: 16px; font-size: 12px; color: var(--svc-text-2); }

/* Persistence failures remain visible without covering editing controls. */
.sv-page .sh-demo[data-offline="true"] { color: #c99663; }

/* =============================== responsive ============================= */

@media (max-width: 1450px) {
  .sv-page .sh-home .sh-favorite-rail .sh-asset-card { flex-basis: 300px; }
}

@media (hover: none) {
  .sv-page .sh-row-actions { opacity: 1; }
}

@media (max-width: 1180px) {
  .sv-page .explore { grid-template-columns: 232px 292px minmax(0, 1fr); }
  .sv-page .dash-shell.editing { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1150px) {
  .sv-page .sh-demo span { display: none; }
  .sv-page .sh-table-charts .sh-name-cell { min-width: 220px; max-width: 320px; }
  .sv-page .sh-table-charts { min-width: 1060px; }
}

@media (max-width: 980px) {
  .sv-page .sh-home-catalog .sh-toolbar { max-width: none; margin: 16px 0; }
  .sv-page .sh-segment-row { margin-bottom: 0; }
}

@media (max-width: 820px) {
  .sv-page .explore { grid-template-columns: minmax(0, 1fr); height: auto; }
  .sv-page .explore-col { border-right: 0; border-bottom: 1px solid var(--svc-border); max-height: 340px; }
  .sv-page .explore-col:last-child { max-height: none; }
  .sv-page .chart-canvas { height: 340px; }
  .sv-page .dash-shell.editing { grid-template-columns: minmax(0, 1fr); }
  .sv-page .dash-row { flex-direction: column; }
  .sv-page .dash-builder { position: static; max-height: 520px; }
  .sv-page .gallery { grid-template-columns: minmax(0, 1fr); }
  .sv-page .gallery-side { border-right: 0; border-bottom: 1px solid var(--svc-border); display: flex; overflow-x: auto; max-height: none; }
  .sv-page .gallery-side .grp { display: none; }
  .sv-page .cat { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .sv-page .cat.active { border-left: 0; border-bottom-color: var(--svc-link); }
  .sv-page .cat .n { display: none; }
}

@media (max-width: 820px) {
  /* Stacked rows switch the flex axis, so the inline flex:1 1 0 sizing that
     shares row width would collapse tile height to zero. */
  .sv-page .dash-row > .tile { flex: 0 0 auto !important; width: 100%; }
  .sv-page .tile-body > .ec { min-height: 260px; }
  .sv-page .tile .bignum { padding: 6px 4px 14px; }
}

@media (max-width: 820px) {
  .sv-page { --svc-nav-h: 88px; }
  .sv-page .sh-demo span { display: inline; }
  .sv-page .sh-demo { font-size: 11px; padding-left: 0; }
  .sv-page .sh-catalog .page-head, .sv-page .sh-gallery .page-head { min-height: 56px; height: auto; gap: 8px; flex-wrap: wrap; padding: 10px 12px; }
  .sv-page .sh-catalog .page-title { font-size: 16px; }
  .sv-page .sh-catalog .page-head-actions { gap: 6px; }
  .sv-page .sh-catalog .page-head-actions .btn { padding: 0 10px; font-size: 12px; }
  .sv-page .sh-toolbar { padding: 16px 12px; gap: 8px; }
  .sv-page .sh-toolbar .search { width: 200px; flex-basis: 200px; }
  .sv-page .sh-catalog .page-body { padding: 0 12px 24px; }
  .sv-page .sh-table-dashboards, .sv-page .sh-home-table { min-width: 710px; }
  .sv-page .sh-table-datasets { min-width: 850px; }
  .sv-page .sh-filter-panel { position: fixed; left: 12px; right: 12px; top: auto; max-width: calc(100vw - 24px); min-width: 0; margin-top: 6px; }
  .sv-page .sh-home .welcome-title { padding-left: 12px; height: 48px; }
  .sv-page .sh-home .home-section { margin: 0 12px 20px; padding: 12px 12px 20px; }
  .sv-page .sh-home .home-section-head { height: auto; flex-wrap: wrap; padding-bottom: 8px; }
  .sv-page .sh-home .home-section-head .tabs { overflow: auto; width: 100%; height: 40px; }
  .sv-page .sh-home .home-section-head .tab { font-size: 12px; margin-right: 4px; padding: 10px 6px; }
  .sv-page .sh-home .home-section-head > .btn { margin: 0 0 0 auto; height: 28px; }
  .sv-page .sh-favorite-rail .sh-asset-card { flex-basis: 280px; }
  .sv-page .sh-home .sh-home-catalog { padding: 12px; }
  .sv-page .sh-home-catalog .sh-toolbar { margin: 16px 0; padding: 0; }
  .sv-page .sh-home-catalog .sh-toolbar .search { width: 100%; flex: 1 0 100%; }
  .sv-page .sh-home-catalog .sh-toolbar .select { font-size: 12px; }
  .sv-page .sh-segment-row .segmented button { font-size: 13px; padding: 0 12px; }
  .sv-page .sh-gallery .add-wrap { padding: 20px 12px; }
  .sv-page .sh-gallery .add-step { gap: 8px; }
  .sv-page .sh-gallery .gallery { grid-template-columns: 1fr; }
  .sv-page .sh-gallery .gallery-side { display: flex; overflow-x: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--svc-border); padding: 0; }
  .sv-page .sh-gallery .gallery-side .cat { width: auto; white-space: nowrap; padding: 10px; border-left: 0; border-bottom: 2px solid transparent; }
  .sv-page .sh-gallery .gallery-side .cat.active { border-bottom-color: var(--svc-link); }
  .sv-page .sh-gallery .gallery-side .cat svg, .sv-page .sh-gallery .gallery-side .cat .n { display: none; }
  .sv-page .sh-gallery .gallery-main { padding: 12px; max-height: 540px; }
  .sv-page .sh-gallery .viz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sv-page .sh-gallery .viz-tile .thumb { height: 72px; }
  .sv-page .sh-gallery .viz-tile .nm { font-size: 12px; }
  .sv-page .sh-dataset-choice select { min-width: 0; width: 100%; font-size: 12px; }
  .sv-page .sh-dataset-choice .btn { font-size: 12px; white-space: normal; height: auto; padding: 4px 0; text-align: left; }
  .sv-page .sh-gallery-detail { flex-direction: column; align-items: stretch; padding: 12px; gap: 12px; }
  .sv-page .sh-gallery-detail .btn { justify-content: center; }
  .sv-page .sh-dialog { max-width: calc(100vw - 20px); max-height: calc(100dvh - 28px); }
  .sv-page .sh-dialog > header, .sv-page .sh-dialog-body { padding: 16px; }
  .sv-page .sh-dialog > footer { padding: 12px; }
  .sv-page .sh-dataset-dialog .sh-dialog-body { padding: 12px; }
  .sv-page .sh-dataset-dialog .tabs { margin-left: -12px; margin-right: -12px; padding: 0 4px; }
  .sv-page .sh-dataset-dialog .tabs .tab { font-size: 12px; padding: 10px 8px; }
  .sv-page .sh-dataset-meta { gap: 8px; font-size: 12px; }
  .sv-page .sh-sample-pager { gap: 8px; flex-wrap: wrap; }
  .sv-page .page-head { flex-wrap: wrap; }
  .sv-page .dash-head { flex-wrap: wrap; row-gap: 8px; }
  .sv-page .kpi-strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sv-page .page-body { padding: 12px; }
  .sv-page table.tbl th:nth-child(n + 5), .sv-page table.tbl td:nth-child(n + 5) { display: none; }
}


/* Preset chrome parity: create wizard + settings + table link buttons */
.sv-page .sh-create-wizard { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.sv-page .sh-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--svc-primary, #2e7d32); color: #fff; font-size: 12px; font-weight: 600;
}
.sv-page .sh-create-select { display: block; width: 100%; }
.sv-page .sh-create-select select { width: 100%; min-height: 36px; }
.sv-page .sh-settings-dl { margin: 12px 0; display: grid; gap: 10px; }
.sv-page .sh-settings-dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 8px; }
.sv-page .sh-settings-dl dt { color: var(--svc-muted, #9EA1A8); font-size: 12px; }
.sv-page .sh-settings-dl dd { margin: 0; font-size: 13px; }
.sv-page .sh-link-btn {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  color: var(--svc-primary, #5b9bd5); font: inherit; cursor: pointer; text-align: left;
}
.sv-page .sh-link-btn:hover { text-decoration: underline; }
.sv-page .tag-ok {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgba(46, 125, 50, 0.55); color: #81c784;
  border-radius: 999px; padding: 2px 8px; font-size: 11px;
}