:root {
  --bg-primary: var(--ui-bg);
  --bg-secondary: var(--ui-bg-raised);
  --bg-card: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  --bg-card-hover: var(--ui-surface-hover);
  --bg-input: var(--ui-bg-raised);
  --border: var(--ui-border);
  --border-hover: var(--ui-border-strong);
  --text-primary: var(--ui-text);
  --text-secondary: var(--ui-text-muted);
  --text-muted: var(--ui-text-subtle);
  --accent: var(--ui-primary);
  --accent-light: var(--ui-primary);
  --accent-glow: color-mix(in srgb, var(--ui-primary) 22%, transparent);
  --success: var(--ui-success);
  --warning: var(--ui-warning);
  --danger: var(--ui-danger);
  --cyan: var(--ui-primary);
  --shadow-sm: var(--ui-shadow-sm);
  --shadow-md: var(--ui-shadow-sm);
  --shadow-lg: var(--ui-shadow-lg);
  --radius: var(--ui-radius);
  --radius-sm: var(--ui-radius-sm);
  --radius-lg: var(--ui-radius-lg);
  --transition: var(--ui-duration) ease;
}
body { background: transparent; }
.app-container { max-width: 1480px; padding: 0 clamp(14px, 3vw, 32px) 40px; }
.app-header {
  position: sticky; top: 0; z-index: 40; margin: 0 calc(clamp(14px, 3vw, 32px) * -1);
  padding: 12px clamp(14px, 3vw, 32px); min-height: 72px;
  background: color-mix(in srgb, var(--ui-bg-raised) 90%, transparent); border-bottom-color: var(--ui-border); backdrop-filter: blur(16px);
}
.app-title { display: flex; align-items: center; gap: 12px; }
.app-title > span:last-child { display: grid; font-size: 1.18rem; }
.app-title small { margin-top: 2px; color: var(--ui-text-muted); font-size: .72rem; font-weight: 500; }
.viewer-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg, var(--ui-primary), var(--ui-primary-strong)); color: var(--ui-on-primary); }
.header-meta { align-items: center; }
.tab-nav {
  position: sticky; top: 84px; z-index: 30; gap: 4px; margin: 18px 0 24px; padding: 6px;
  border: 1px solid var(--ui-border); border-radius: 14px; background: color-mix(in srgb, var(--ui-surface) 92%, transparent); box-shadow: var(--ui-shadow-sm); backdrop-filter: blur(12px);
}
.tab-btn { min-height: 44px; min-width: 0; border-radius: 10px; color: var(--ui-text-muted); font-weight: 650; }
.tab-btn:hover { color: var(--ui-text); background: var(--ui-surface-hover); }
.tab-btn.active { color: var(--ui-on-primary); background: var(--ui-primary); box-shadow: none; }
.tab-content { animation-duration: var(--ui-duration); }
.card, .stat-card, .chart-card { border-color: var(--ui-border); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.card:hover, .stat-card:hover { transform: none; }
.search-input, .form-select { min-height: 44px; color: var(--ui-text); background: var(--ui-bg-raised); border-color: var(--ui-border-strong); }
.search-input:focus, select:focus { border-color: var(--ui-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 18%, transparent); }
.btn { min-height: 44px; border-radius: 10px; }
.btn-primary { color: var(--ui-on-primary); background: var(--ui-primary); box-shadow: none; }
.btn-primary:hover { background: var(--ui-primary-strong); box-shadow: none; transform: none; }
.table-wrapper { border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); }
thead { background: var(--ui-surface-2); }
tbody tr.clickable:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: -3px; }
.modal-overlay { width: 100%; max-width: none; height: 100%; max-height: none; padding: 20px; border: 0; background: transparent; }
.modal-overlay::backdrop { background: var(--ui-scrim); backdrop-filter: blur(4px); }
.modal-overlay[open] { display: grid; place-items: center; }
.modal { position: relative; width: min(800px, 100%); max-height: calc(100dvh - 40px); margin: 0; background: var(--ui-surface); border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-lg); }
.toast { z-index: 120; border: 1px solid var(--ui-border-strong); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); }
.empty-state .icon { color: var(--ui-primary); }
.empty-state .icon svg { width: 44px; height: 44px; }
@media (max-width: 900px) {
  .tab-nav { top: 76px; }
}
@media (max-width: 640px) {
  .app-header { min-height: 64px; }
  .header-meta > span:first-child { display: none; }
  .tab-nav { top: 70px; justify-content: flex-start; overflow-x: auto; }
  .tab-btn { min-width: max-content; padding-inline: 14px; }
  .search-bar { align-items: stretch; }
}