/* Base workspace layout - canonical shared styles. */
:root {
  --nav-w: 232px;
  --nav-mobile-h: 64px;
  --series-bg: #f1f3f6;
  --series-surface: #ffffff;
  --series-surface-soft: rgba(247, 249, 252, .94);
  --series-border: rgba(17, 24, 39, .1);
  --series-text: #161922;
  --series-muted: rgba(22, 25, 34, .62);
  --series-accent: #5561f2;
  --series-accent-soft: rgba(85, 97, 242, .1);
  --series-accent-line: linear-gradient(90deg, rgba(85,97,242,0), #7d89ff 24%, #c9d1ff 54%, #8c99ff 78%, rgba(85,97,242,0));
  --series-line-listing: linear-gradient(90deg, rgba(87,95,255,0), #6675ff 22%, #d9ddff 55%, #8d98ff 82%, rgba(87,95,255,0));
  --series-line-profit: linear-gradient(90deg, rgba(12,154,108,0), #0f9f7a 22%, #baf2db 55%, #35c89b 82%, rgba(12,154,108,0));
  --series-line-image: linear-gradient(90deg, rgba(18,147,194,0), #32b7e8 20%, #d7f3ff 55%, #8b7cff 82%, rgba(18,147,194,0));
  --series-line-api: linear-gradient(90deg, rgba(136,95,255,0), #8d72ff 20%, #eadcff 55%, #bd7cff 82%, rgba(136,95,255,0));
  --series-line-sales: linear-gradient(90deg, rgba(214,152,38,0), #d59b2c 20%, #fff1b8 55%, #74c69d 84%, rgba(214,152,38,0));
  --series-line-package: linear-gradient(90deg, rgba(92,106,121,0), #6f7c8f 20%, #edf2f7 55%, #a8b2c3 84%, rgba(92,106,121,0));
  --series-line-connect: linear-gradient(90deg, rgba(15,150,136,0), #17a398 20%, #c8f7ef 55%, #5bb6ff 84%, rgba(15,150,136,0));
  --series-line-feedback: linear-gradient(90deg, rgba(218,94,142,0), #e17aa6 20%, #ffe2f0 55%, #9a8cff 84%, rgba(218,94,142,0));
  --series-radius: 18px;
  --series-good: #087f5b;
  --series-warn: #a16207;
  --series-dashboard-bg: linear-gradient(135deg, #f7f8fa 0%, #edf0f4 52%, #dfe4ea 100%);
  --series-dashboard-main: linear-gradient(180deg, rgba(255,255,255,.78), rgba(236,239,244,.92));
  --series-glass: rgba(246, 248, 251, .62);
  --series-glass-strong: rgba(255, 255, 255, .78);
  --series-chrome: rgba(251, 252, 254, .82);
  --series-control: rgba(255, 255, 255, .72);
  --series-primary: linear-gradient(135deg, #171a22, #5f6876);
  --series-primary-text: #fff;
  --series-placeholder: rgba(22, 25, 34, .42);
  --series-loader-bg: linear-gradient(135deg, rgba(247,248,250,.92), rgba(218,222,230,.9));
  --series-loader-card: rgba(255,255,255,.5);
  --series-loader-core: rgba(246,247,249,.86);
  --series-item: rgba(242,245,249,.94);
  --series-thumb: #eef1f5;
  --series-thumb-mark: rgba(22,25,34,.36);
  --series-score: rgba(88,95,106,.14);
  --series-table-head: linear-gradient(180deg, #ffffff, #f0f3f7);
  --series-table-head-text: rgba(28, 33, 42, .76);
  --series-table-row: rgba(255,255,255,.62);
  --series-featured: linear-gradient(180deg, #ffffff, #eef1f7);
  --series-nav-key: rgba(255,255,255,.74);
  --series-nav-key-active: rgba(85,97,242,.12);
  --series-shadow: 0 14px 34px rgba(31, 38, 50, .11), inset 0 1px 0 rgba(255,255,255,.74);
  --bg: var(--series-bg);
  --surface: var(--series-surface);
  --surface-soft: var(--series-surface-soft);
  --border: var(--series-border);
  --text: var(--series-text);
  --muted: var(--series-muted);
  --accent: var(--series-accent);
  --accent-soft: var(--series-accent-soft);
  --radius: var(--series-radius);
  --page-x: clamp(20px, 2.3vw, 36px);
  --page-y: 22px;
}

:root[data-listing-theme="dark"],
:root[data-tone-theme="dark"] {
  --series-bg: #121418;
  --series-surface: #20242b;
  --series-surface-soft: rgba(38, 43, 51, .94);
  --series-border: rgba(235, 240, 247, .13);
  --series-text: #f5f7fb;
  --series-muted: rgba(245, 247, 251, .7);
  --series-accent: #b8c3ff;
  --series-accent-soft: rgba(184, 195, 255, .13);
  --series-accent-line: linear-gradient(90deg, rgba(184,195,255,0), #9fadff 22%, #f1f4ff 54%, #8a96ff 80%, rgba(184,195,255,0));
  --series-good: #7dd3b0;
  --series-warn: #f3c46b;
  --series-dashboard-bg: linear-gradient(135deg, #121418 0%, #1b1f25 52%, #2b3038 100%);
  --series-dashboard-main: linear-gradient(180deg, rgba(25,29,35,.9), rgba(31,35,42,.96));
  --series-glass: rgba(35, 39, 47, .62);
  --series-glass-strong: rgba(47, 52, 61, .76);
  --series-chrome: rgba(27, 31, 37, .8);
  --series-control: rgba(36, 41, 49, .72);
  --series-primary: linear-gradient(135deg, #e6ebff, #9fadff);
  --series-primary-text: #111318;
  --series-placeholder: rgba(245, 247, 251, .42);
  --series-loader-bg: linear-gradient(135deg, rgba(16,18,22,.94), rgba(42,47,56,.9));
  --series-loader-card: rgba(23,26,32,.56);
  --series-loader-core: rgba(23,26,32,.88);
  --series-item: rgba(42,47,56,.88);
  --series-thumb: rgba(48,54,64,.86);
  --series-thumb-mark: rgba(245,247,251,.34);
  --series-score: rgba(245,247,251,.12);
  --series-table-head: linear-gradient(180deg, rgba(44,49,58,.96), rgba(30,34,42,.94));
  --series-table-head-text: rgba(245, 247, 251, .86);
  --series-table-row: rgba(24,27,33,.48);
  --series-featured: linear-gradient(180deg, rgba(51,57,68,.92), rgba(37,42,50,.88));
  --series-nav-key: rgba(48,54,64,.84);
  --series-nav-key-active: rgba(182,194,255,.18);
  --series-shadow: 0 16px 38px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.06);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
body { line-height: 1.58; letter-spacing: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
img, svg, canvas, video { max-width: 100%; }
a { color: inherit; }

#app, .app-shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  width: 100%;
  min-height: 100dvh;
  min-width: 0;
  background: var(--bg);
}

aside.side-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: var(--nav-w);
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  box-shadow: 12px 0 30px rgba(15, 23, 42, .045);
}

.workspace-switcher,
aside.side-nav .workspace-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 16px;
  overflow: hidden;
}
.brand-icon, .brand-mark, .workspace-switcher img, .workspace-switcher svg {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.brand-name, .brand-title, .brand-copy, .workspace-name, [data-brand-text] {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

aside.side-nav nav,
aside.side-nav .nav-list,
aside.side-nav .nav-menu,
aside.side-nav .side-nav-list,
aside.side-nav .primary-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

aside.side-nav a,
aside.side-nav button,
aside.side-nav [role="button"] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}
aside.side-nav a.active,
aside.side-nav button.active,
aside.side-nav a[aria-current="page"],
aside.side-nav [data-active="true"] {
  color: var(--text);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(85, 97, 242, .18);
}
.ui-icon,
.rail-tab-icon,
.nav-icon,
svg.ui-icon,
aside.side-nav svg,
aside.side-nav [class*="icon"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.top-search .ui-icon,
.top-search-submit .ui-icon,
.decision-button .ui-icon,
.quick-link .ui-icon,
.site-link .ui-icon {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
}
.nav-label, aside.side-nav a span, aside.side-nav button span {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-main, .main-content, main {
  min-width: 0;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--bg);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px var(--page-x);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(18px);
}

.breadcrumb,
.top-search,
.top-actions {
  min-width: 0;
}

.top-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.top-search input {
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
}

.top-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}