:root {
  color-scheme: light;

  --brand-primary: #75bd25;
  --brand-secondary: #263241;
  --brand-accent: var(--brand-primary);
  --brand-accent-contrast: #ffffff;
  --brand-accent-soft: color-mix(in srgb, var(--brand-accent) 12%, #edf1f5);

  --semantic-success: var(--brand-accent);
  --semantic-info: #4f6f8a;
  --semantic-teal: #2f7f78;
  --semantic-warning: #d97706;
  --semantic-danger: #b85a58;

  --icon-green: var(--brand-accent);
  --icon-teal: var(--semantic-teal);
  --icon-bluegrey: #536b80;
  --icon-amber: #bd7a16;
  --icon-red: var(--semantic-danger);
  --icon-graphite: #344052;
  --icon-bg-green: color-mix(in srgb, var(--icon-green) 13%, var(--surface-soft));
  --icon-bg-teal: color-mix(in srgb, var(--icon-teal) 12%, var(--surface-soft));
  --icon-bg-bluegrey: color-mix(in srgb, var(--icon-bluegrey) 12%, var(--surface-soft));
  --icon-bg-amber: color-mix(in srgb, var(--icon-amber) 13%, var(--surface-soft));
  --icon-bg-red: color-mix(in srgb, var(--icon-red) 11%, var(--surface-soft));
  --icon-bg-graphite: color-mix(in srgb, var(--icon-graphite) 8%, var(--surface-soft));
  --icon-filter-green: invert(61%) sepia(67%) saturate(562%) hue-rotate(49deg) brightness(92%) contrast(91%);
  --icon-filter-teal: invert(43%) sepia(19%) saturate(1124%) hue-rotate(127deg) brightness(90%) contrast(90%);
  --icon-filter-bluegrey: invert(41%) sepia(18%) saturate(637%) hue-rotate(165deg) brightness(89%) contrast(86%);
  --icon-filter-amber: invert(51%) sepia(75%) saturate(712%) hue-rotate(358deg) brightness(88%) contrast(88%);
  --icon-filter-red: invert(42%) sepia(21%) saturate(1114%) hue-rotate(314deg) brightness(88%) contrast(89%);
  --icon-filter-graphite: invert(20%) sepia(18%) saturate(1027%) hue-rotate(173deg) brightness(88%) contrast(88%);

  --bg-app: #e7ebf0;
  --bg-app-top: #f4f6f8;
  --bg-app-bottom: #d9dee6;
  --surface: #e5e9ef;
  --surface-soft: #eef1f5;
  --surface-raised: #f4f6f8;
  --surface-inset: #d6dbe3;
  --surface-pressed: #cfd5df;
  --surface-gradient: linear-gradient(145deg, var(--surface-raised) 0%, var(--surface) 100%);
  --surface-inset-gradient: linear-gradient(145deg, var(--surface-inset) 0%, var(--surface-soft) 100%);
  --surface-active: color-mix(in srgb, var(--brand-accent) 10%, var(--surface-soft));

  --text-main: #344052;
  --text-strong: #17202c;
  --text-muted: #657286;
  --text-soft: #8792a1;

  --status-success-bg: color-mix(in srgb, var(--semantic-success) 12%, var(--surface-soft));
  --status-success-border: color-mix(in srgb, var(--semantic-success) 34%, transparent);
  --status-success-text: #3f7f13;
  --status-warning-bg: color-mix(in srgb, var(--semantic-warning) 12%, var(--surface-soft));
  --status-warning-border: color-mix(in srgb, var(--semantic-warning) 30%, transparent);
  --status-warning-text: #8a4b08;
  --status-danger-bg: color-mix(in srgb, var(--semantic-danger) 11%, var(--surface-soft));
  --status-danger-border: color-mix(in srgb, var(--semantic-danger) 28%, transparent);
  --status-danger-text: #914442;
  --status-info-bg: color-mix(in srgb, var(--semantic-info) 11%, var(--surface-soft));
  --status-info-border: color-mix(in srgb, var(--semantic-info) 26%, transparent);
  --status-info-text: #435f78;

  --border-soft: rgba(52, 64, 82, 0.12);
  --border-medium: rgba(52, 64, 82, 0.20);
  --border-strong: rgba(52, 64, 82, 0.28);
  --border-highlight: rgba(255, 255, 255, 0.64);
  --border-accent: color-mix(in srgb, var(--brand-accent) 42%, transparent);

  --shadow-raised: 8px 8px 18px rgba(67, 77, 92, 0.15), -8px -8px 18px rgba(255, 255, 255, 0.75);
  --shadow-raised-sm: 5px 5px 13px rgba(67, 77, 92, 0.13), -5px -5px 13px rgba(255, 255, 255, 0.72);
  --shadow-soft: 0 10px 24px rgba(31, 41, 55, 0.10);
  --shadow-inset: inset 3px 3px 7px rgba(65, 73, 88, 0.17), inset -3px -3px 7px rgba(255, 255, 255, 0.74);
  --shadow-inset-sm: inset 2px 2px 5px rgba(65, 73, 88, 0.16), inset -2px -2px 5px rgba(255, 255, 255, 0.70);
  --focus-ring: 0 0 0 3px rgba(52, 64, 82, 0.24);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 22px;
  --space-2xl: 28px;
  --card-padding: 20px;

  --container-max: 1440px;
  --sidebar-width-compact: 84px;
  --sidebar-width-expanded: 244px;
  --sidebar-current-width: var(--sidebar-width-compact);
  --sidebar-item-height: 58px;
  --sidebar-item-radius: var(--radius-md);
  --sidebar-icon-size: 26px;
  --sidebar-icon-holder: 46px;
  --sidebar-icon-holder-half: 23px;
  --sidebar-padding: 12px;
  --sidebar-item-padding: 6px;
  --sidebar-item-gap: 12px;
  --sidebar-hover-bg: var(--surface-soft);
  --sidebar-active-bg: var(--surface-active);
  --sidebar-transition: 240ms ease;
  --control-height: 46px;
  --control-height-lg: 52px;
  --nav-item-height: var(--sidebar-item-height);
  --icon-sm: 22px;
  --icon-md: 26px;
  --icon-lg: 32px;
  --icon-xl: 54px;
  --icon-holder-sm: 42px;
  --icon-holder-md: 48px;
  --icon-holder-lg: 56px;
  --icon-holder-xl: 96px;
  --icon-size: var(--icon-md);
  --icon-size-sm: var(--icon-sm);
  --icon-size-lg: var(--icon-lg);
  --icon-holder: var(--icon-holder-md);
  --icon-holder-half: 24px;
  --switch-width: 70px;
  --switch-height: 38px;

  --font-main: "Quicksand", system-ui, sans-serif;
  --font-weight-regular: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-strong: 800;

  --transition-fast: 160ms ease;
  --transition-normal: 240ms ease;
}

body:has(.theme-system),
body:has(.smart-tablet-ui) {
  min-height: 100vh;
  margin: 0;
  color: var(--text-main);
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.72), transparent 23rem),
    radial-gradient(circle at 86% 10%, rgba(255, 255, 255, 0.36), transparent 21rem),
    linear-gradient(145deg, var(--bg-app-top) 0%, var(--bg-app) 55%, var(--bg-app-bottom) 100%);
  font-family: var(--font-main);
}

:where(.theme-system, .smart-tablet-ui) {
  min-height: 100%;
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

:where(.theme-system, .smart-tablet-ui) *,
:where(.theme-system, .smart-tablet-ui) *::before,
:where(.theme-system, .smart-tablet-ui) *::after {
  box-sizing: border-box;
}

:where(.theme-system, .smart-tablet-ui) button,
:where(.theme-system, .smart-tablet-ui) input,
:where(.theme-system, .smart-tablet-ui) textarea,
:where(.theme-system, .smart-tablet-ui) select {
  font: inherit;
}

:where(.theme-system, .smart-tablet-ui) :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

:where(.theme-system, .smart-tablet-ui) h1,
:where(.theme-system, .smart-tablet-ui) h2,
:where(.theme-system, .smart-tablet-ui) h3,
:where(.theme-system, .smart-tablet-ui) p {
  margin: 0;
}

:where(.theme-system, .smart-tablet-ui) h1 {
  color: var(--text-strong);
  font-size: clamp(1.32rem, 1.65vw, 1.62rem);
  font-weight: var(--font-weight-strong);
  line-height: 1.12;
}

:where(.theme-system, .smart-tablet-ui) h2 {
  color: var(--text-strong);
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  font-weight: var(--font-weight-strong);
  line-height: 1.16;
}

:where(.theme-system, .smart-tablet-ui) h3 {
  color: var(--text-strong);
  font-size: 0.98rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
}

:where(.theme-system, .smart-tablet-ui) p {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

:where(.theme-system, .smart-tablet-ui) .app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-current-width) minmax(0, 1fr);
  gap: var(--space-xl);
  width: min(100%, var(--container-max));
  min-height: 100vh;
  margin-inline: auto;
  padding: clamp(var(--space-lg), 1.8vw, var(--space-2xl));
  transition: grid-template-columns var(--sidebar-transition);
}

:where(.theme-system, .smart-tablet-ui) .app-shell:has(.sidebar-state-input:checked),
:where(.theme-system, .smart-tablet-ui) .app-shell:has(.sidebar--expanded) {
  --sidebar-current-width: var(--sidebar-width-expanded);
}

:where(.theme-system, .smart-tablet-ui) .app-sidebar,
:where(.theme-system, .smart-tablet-ui) .app-header,
:where(.theme-system, .smart-tablet-ui) .app-card,
:where(.theme-system, .smart-tablet-ui) .app-panel,
:where(.theme-system, .smart-tablet-ui) .soft-card,
:where(.theme-system, .smart-tablet-ui) .soft-cell,
:where(.theme-system, .smart-tablet-ui) .list-card,
:where(.theme-system, .smart-tablet-ui) .quick-action {
  border: 1px solid var(--border-highlight);
  background: var(--surface-gradient);
  box-shadow: var(--shadow-raised);
  color: var(--text-main);
}

:where(.theme-system, .smart-tablet-ui) .app-sidebar {
  position: sticky;
  top: clamp(var(--space-lg), 1.8vw, var(--space-2xl));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: var(--sidebar-current-width);
  min-height: calc(100vh - 2 * clamp(var(--space-lg), 1.8vw, var(--space-2xl)));
  overflow: hidden;
  padding: var(--sidebar-padding);
  border-radius: var(--radius-xl);
  transition:
    width var(--sidebar-transition),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

:where(.theme-system, .smart-tablet-ui) .app-content,
:where(.theme-system, .smart-tablet-ui) .theme-dashboard-main,
:where(.theme-system, .smart-tablet-ui) .theme-dashboard-side,
:where(.theme-system, .smart-tablet-ui) .theme-list-stack {
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
}

:where(.theme-system, .smart-tablet-ui) .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: 78px;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
}

:where(.theme-system, .smart-tablet-ui) .app-card,
:where(.theme-system, .smart-tablet-ui) .soft-card {
  border-radius: var(--radius-xl);
  padding: var(--card-padding);
}

:where(.theme-system, .smart-tablet-ui) .app-panel {
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
}

:where(.theme-system, .smart-tablet-ui) .soft-cell {
  min-height: 86px;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

:where(.theme-system, .smart-tablet-ui) .app-card.is-active,
:where(.theme-system, .smart-tablet-ui) .app-panel.is-active,
:where(.theme-system, .smart-tablet-ui) .soft-card.is-active,
:where(.theme-system, .smart-tablet-ui) .soft-cell.is-active {
  border-color: var(--border-accent);
  background: var(--surface-active);
  box-shadow: var(--shadow-raised-sm);
}

:where(.theme-system, .smart-tablet-ui) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--control-height);
  min-width: var(--control-height);
  padding: 0 var(--space-lg);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-md);
  background: var(--surface-gradient);
  box-shadow: var(--shadow-raised-sm);
  color: var(--text-strong);
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast);
}

:where(.theme-system, .smart-tablet-ui) .btn:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-raised);
}

:where(.theme-system, .smart-tablet-ui) .btn:active {
  box-shadow: var(--shadow-inset-sm);
}

:where(.theme-system, .smart-tablet-ui) .btn:disabled,
:where(.theme-system, .smart-tablet-ui) .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

:where(.theme-system, .smart-tablet-ui) .btn-primary,
:where(.theme-system, .smart-tablet-ui) .btn-success {
  border-color: var(--border-accent);
  background: var(--brand-accent);
  box-shadow: var(--shadow-raised-sm);
  color: var(--brand-accent-contrast);
}

:where(.theme-system, .smart-tablet-ui) .btn-primary:hover,
:where(.theme-system, .smart-tablet-ui) .btn-success:hover {
  background: color-mix(in srgb, var(--brand-accent) 92%, #000000);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-raised);
}

:where(.theme-system, .smart-tablet-ui) .btn-secondary {
  background: var(--surface-gradient);
  color: var(--text-strong);
}

:where(.theme-system, .smart-tablet-ui) .btn-danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
}

:where(.theme-system, .smart-tablet-ui) .btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
}

:where(.theme-system, .smart-tablet-ui) .btn-icon {
  width: var(--control-height);
  padding: 0;
}

:where(.theme-system, .smart-tablet-ui) .sidebar-state-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

:where(.theme-system, .smart-tablet-ui) .sidebar-header {
  display: grid;
  place-items: center;
  min-height: var(--sidebar-item-height);
}

:where(.theme-system, .smart-tablet-ui) .sidebar-brand {
  display: none;
  align-items: center;
  gap: var(--sidebar-item-gap);
  min-width: 0;
}

:where(.theme-system, .smart-tablet-ui) .sidebar-brand-mark,
:where(.theme-system, .smart-tablet-ui) .sidebar-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--sidebar-icon-holder);
  height: var(--sidebar-icon-holder);
  border: 1px solid var(--border-highlight);
  border-radius: var(--sidebar-item-radius);
  background: var(--surface-soft);
  box-shadow: var(--shadow-inset-sm);
  color: var(--text-strong);
}

:where(.theme-system, .smart-tablet-ui) .sidebar-brand-text,
:where(.theme-system, .smart-tablet-ui) .sidebar-toggle-label {
  color: var(--text-strong);
  font-size: 0.92rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.1;
  white-space: nowrap;
}

:where(.theme-system, .smart-tablet-ui) .sidebar-toggle {
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

:where(.theme-system, .smart-tablet-ui) .sidebar-toggle:hover {
  border-color: var(--border-medium);
  background: var(--sidebar-hover-bg);
  box-shadow: var(--shadow-raised-sm);
}

:where(.theme-system, .smart-tablet-ui) .sidebar-state-input:focus-visible + .sidebar-header .sidebar-toggle {
  box-shadow: var(--focus-ring), var(--shadow-inset-sm);
}

:where(.theme-system, .smart-tablet-ui) .sidebar-nav {
  display: grid;
  gap: var(--space-sm);
}

:where(.theme-system, .smart-tablet-ui) .nav-item {
  display: grid;
  grid-template-columns: var(--sidebar-icon-holder);
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: var(--nav-item-height);
  padding: var(--sidebar-item-padding);
  border: 1px solid transparent;
  border-radius: var(--sidebar-item-radius);
  color: var(--text-muted);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

:where(.theme-system, .smart-tablet-ui) .nav-item:hover {
  border-color: var(--border-highlight);
  background: var(--sidebar-hover-bg);
  color: var(--text-main);
  box-shadow: var(--shadow-raised-sm);
}

:where(.theme-system, .smart-tablet-ui) .nav-item:focus-visible {
  border-color: var(--border-accent);
  box-shadow: var(--focus-ring), var(--shadow-raised-sm);
}

:where(.theme-system, .smart-tablet-ui) .nav-item-active,
:where(.theme-system, .smart-tablet-ui) .nav-item[aria-current="page"] {
  border-color: var(--border-accent);
  background: var(--sidebar-active-bg);
  box-shadow: var(--shadow-inset-sm);
  color: var(--brand-accent);
}

:where(.theme-system, .smart-tablet-ui) .nav-item-active .nav-icon,
:where(.theme-system, .smart-tablet-ui) .nav-item[aria-current="page"] .nav-icon,
:where(.theme-system, .smart-tablet-ui) .theme-metric-card.is-active .theme-metric-icon {
  border-color: var(--border-accent);
  background: var(--icon-bg-green);
  color: var(--icon-green);
  box-shadow: var(--shadow-inset-sm);
  --icon-filter: var(--icon-filter-green);
}

:where(.theme-system, .smart-tablet-ui) .nav-item[aria-disabled="true"],
:where(.theme-system, .smart-tablet-ui) .nav-item-disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

:where(.theme-system, .smart-tablet-ui) .nav-icon,
:where(.theme-system, .smart-tablet-ui) .list-index,
:where(.theme-system, .smart-tablet-ui) .quick-icon,
:where(.theme-system, .smart-tablet-ui) .theme-dial-node,
:where(.theme-system, .smart-tablet-ui) .theme-map-node {
  --icon-color: var(--icon-graphite);
  --icon-bg: var(--icon-bg-graphite);
  --icon-border: color-mix(in srgb, var(--icon-color) 24%, transparent);
  --icon-filter: var(--icon-filter-graphite);
  display: inline-grid;
  place-items: center;
  width: var(--sidebar-icon-holder);
  height: var(--sidebar-icon-holder);
  border: 1px solid var(--icon-border);
  border-radius: var(--sidebar-item-radius);
  background: var(--icon-bg);
  box-shadow: var(--shadow-inset-sm);
  color: var(--icon-color);
}

:where(.theme-system, .smart-tablet-ui) .list-index {
  width: var(--icon-holder-md);
  height: var(--icon-holder-md);
}

:where(.theme-system, .smart-tablet-ui) .quick-icon {
  width: var(--icon-holder-lg);
  height: var(--icon-holder-lg);
}

:where(.theme-system, .smart-tablet-ui) .theme-map-node {
  width: var(--icon-holder-md);
  height: var(--icon-holder-md);
}

:where(.theme-system, .smart-tablet-ui) .icon-tone-green {
  --icon-color: var(--icon-green);
  --icon-bg: var(--icon-bg-green);
  --icon-border: color-mix(in srgb, var(--icon-green) 34%, transparent);
  --icon-filter: var(--icon-filter-green);
}

:where(.theme-system, .smart-tablet-ui) .icon-tone-teal {
  --icon-color: var(--icon-teal);
  --icon-bg: var(--icon-bg-teal);
  --icon-border: color-mix(in srgb, var(--icon-teal) 30%, transparent);
  --icon-filter: var(--icon-filter-teal);
}

:where(.theme-system, .smart-tablet-ui) .icon-tone-bluegrey {
  --icon-color: var(--icon-bluegrey);
  --icon-bg: var(--icon-bg-bluegrey);
  --icon-border: color-mix(in srgb, var(--icon-bluegrey) 28%, transparent);
  --icon-filter: var(--icon-filter-bluegrey);
}

:where(.theme-system, .smart-tablet-ui) .icon-tone-amber {
  --icon-color: var(--icon-amber);
  --icon-bg: var(--icon-bg-amber);
  --icon-border: color-mix(in srgb, var(--icon-amber) 34%, transparent);
  --icon-filter: var(--icon-filter-amber);
}

:where(.theme-system, .smart-tablet-ui) .icon-tone-red {
  --icon-color: var(--icon-red);
  --icon-bg: var(--icon-bg-red);
  --icon-border: color-mix(in srgb, var(--icon-red) 30%, transparent);
  --icon-filter: var(--icon-filter-red);
}

:where(.theme-system, .smart-tablet-ui) .icon-tone-graphite {
  --icon-color: var(--icon-graphite);
  --icon-bg: var(--icon-bg-graphite);
  --icon-border: color-mix(in srgb, var(--icon-graphite) 22%, transparent);
  --icon-filter: var(--icon-filter-graphite);
}

:where(.theme-system, .smart-tablet-ui) .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  color: currentColor;
  font-size: 0.88rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--sidebar-transition);
}

:where(.theme-system, .smart-tablet-ui) .sidebar-brand-text,
:where(.theme-system, .smart-tablet-ui) .sidebar-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
}

:where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .sidebar-header,
:where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sidebar-item-gap);
}

:where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .sidebar-brand,
:where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .sidebar-brand {
  display: flex;
}

:where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .nav-item,
:where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .nav-item {
  grid-template-columns: var(--sidebar-icon-holder) minmax(0, 1fr);
  justify-content: stretch;
  gap: var(--sidebar-item-gap);
  padding-inline: var(--space-sm) var(--space-md);
  text-align: left;
}

:where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .nav-label,
:where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .nav-label,
:where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .sidebar-brand-text,
:where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .sidebar-brand-text,
:where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .sidebar-toggle-label,
:where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .sidebar-toggle-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  opacity: 1;
}

:where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .sidebar-toggle,
:where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .sidebar-toggle {
  display: inline-flex;
  justify-content: center;
  width: auto;
  padding-inline: var(--space-md);
  gap: var(--space-sm);
}

:where(.theme-system, .smart-tablet-ui) .theme-icon,
:where(.theme-system, .smart-tablet-ui) .theme-icon-img {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

:where(.theme-system, .smart-tablet-ui) .theme-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(.theme-system, .smart-tablet-ui) .theme-icon-img {
  object-fit: contain;
  filter: var(--icon-filter, var(--icon-filter-graphite));
}

:where(.theme-system, .smart-tablet-ui) .sidebar-brand-mark .theme-icon-img,
:where(.theme-system, .smart-tablet-ui) .sidebar-toggle .theme-icon-img,
:where(.theme-system, .smart-tablet-ui) .nav-icon .theme-icon-img {
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
}

:where(.theme-system, .smart-tablet-ui) .theme-metric-icon .theme-icon-img,
:where(.theme-system, .smart-tablet-ui) .quick-icon .theme-icon-img,
:where(.theme-system, .smart-tablet-ui) .theme-dial-node .theme-icon-img {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

:where(.theme-system, .smart-tablet-ui) .list-index .theme-icon-img,
:where(.theme-system, .smart-tablet-ui) .theme-map-node .theme-icon-img {
  width: var(--icon-md);
  height: var(--icon-md);
}

:where(.theme-system, .smart-tablet-ui) .theme-large-icon {
  --icon-color: var(--icon-bluegrey);
  --icon-bg: var(--icon-bg-bluegrey);
  --icon-border: color-mix(in srgb, var(--icon-bluegrey) 28%, transparent);
  --icon-filter: var(--icon-filter-bluegrey);
  display: grid;
  place-items: center;
  width: clamp(78px, 8vw, var(--icon-holder-xl));
  height: clamp(78px, 8vw, var(--icon-holder-xl));
  border: 1px solid var(--icon-border);
  border-radius: 50%;
  background: var(--icon-bg);
  box-shadow: var(--shadow-raised-sm);
  color: var(--icon-color);
}

:where(.theme-system, .smart-tablet-ui) .theme-large-icon .theme-icon-img,
:where(.theme-system, .smart-tablet-ui) .theme-large-icon .theme-icon {
  width: clamp(44px, 4.8vw, var(--icon-xl));
  height: clamp(44px, 4.8vw, var(--icon-xl));
}

:where(.theme-system, .smart-tablet-ui) .status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;
}

:where(.theme-system, .smart-tablet-ui) .status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

:where(.theme-system, .smart-tablet-ui) .status-online {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

:where(.theme-system, .smart-tablet-ui) .status-offline {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
}

:where(.theme-system, .smart-tablet-ui) .status-warning {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

:where(.theme-system, .smart-tablet-ui) .status-gps {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

:where(.theme-system, .smart-tablet-ui) .field-label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  text-transform: uppercase;
}

:where(.theme-system, .smart-tablet-ui) .input,
:where(.theme-system, .smart-tablet-ui) .textarea,
:where(.theme-system, .smart-tablet-ui) .select {
  width: 100%;
  min-height: var(--control-height-lg);
  padding: 0 var(--space-lg);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-md);
  background: var(--surface-inset-gradient);
  box-shadow: var(--shadow-inset-sm);
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

:where(.theme-system, .smart-tablet-ui) .textarea {
  min-height: 92px;
  padding-block: var(--space-md);
  line-height: 1.45;
  resize: vertical;
}

:where(.theme-system, .smart-tablet-ui) .input:focus,
:where(.theme-system, .smart-tablet-ui) .textarea:focus,
:where(.theme-system, .smart-tablet-ui) .select:focus {
  border-color: var(--border-accent);
  box-shadow: var(--focus-ring), var(--shadow-inset-sm);
}

:where(.theme-system, .smart-tablet-ui) .theme-preview-toolbar,
:where(.theme-system, .smart-tablet-ui) .theme-button-row,
:where(.theme-system, .smart-tablet-ui) .theme-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

:where(.theme-system, .smart-tablet-ui) .theme-card-head {
  margin-bottom: var(--space-lg);
}

:where(.theme-system, .smart-tablet-ui) .theme-card-head h2 {
  margin-top: var(--space-xs);
}

:where(.theme-system, .smart-tablet-ui) .theme-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(296px, 0.5fr);
  gap: var(--space-lg);
  align-items: start;
}

:where(.theme-system, .smart-tablet-ui) .theme-control-grid {
  display: grid;
  grid-template-columns: minmax(216px, 0.58fr) minmax(0, 1.42fr);
  gap: var(--space-xl);
  align-items: center;
}

:where(.theme-system, .smart-tablet-ui) .theme-control-panel,
:where(.theme-system, .smart-tablet-ui) .theme-switch-board,
:where(.theme-system, .smart-tablet-ui) .theme-toggle-stack {
  display: grid;
  gap: var(--space-lg);
}

:where(.theme-system, .smart-tablet-ui) .theme-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

:where(.theme-system, .smart-tablet-ui) .theme-metric-card {
  display: grid;
  grid-template-columns: var(--icon-holder-lg) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
}

:where(.theme-system, .smart-tablet-ui) .theme-metric-icon {
  --icon-color: var(--icon-graphite);
  --icon-bg: var(--icon-bg-graphite);
  --icon-border: color-mix(in srgb, var(--icon-color) 24%, transparent);
  --icon-filter: var(--icon-filter-graphite);
  display: inline-grid;
  place-items: center;
  width: var(--icon-holder-lg);
  height: var(--icon-holder-lg);
  border: 1px solid var(--icon-border);
  border-radius: var(--sidebar-item-radius);
  background: var(--icon-bg);
  box-shadow: var(--shadow-inset-sm);
  color: var(--icon-color);
}

:where(.theme-system, .smart-tablet-ui) .theme-metric-copy {
  min-width: 0;
}

:where(.theme-system, .smart-tablet-ui) .theme-metric-value {
  display: block;
  color: var(--text-strong);
  font-size: clamp(1.24rem, 2vw, 1.62rem);
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

:where(.theme-system, .smart-tablet-ui) .theme-metric-label {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.28;
}

:where(.theme-system, .smart-tablet-ui) .theme-metric-note {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.24;
}

:where(.theme-system, .smart-tablet-ui) .theme-vehicle-dial,
:where(.theme-system, .smart-tablet-ui) .theme-vehicle-core,
:where(.theme-system, .smart-tablet-ui) .theme-dial-ring,
:where(.theme-system, .smart-tablet-ui) .theme-dial-node {
  border-radius: 50%;
}

:where(.theme-system, .smart-tablet-ui) .theme-vehicle-dial {
  position: relative;
  width: min(100%, 15rem);
  aspect-ratio: 1;
  margin-inline: auto;
  background: var(--surface-gradient);
  box-shadow: var(--shadow-raised);
}

:where(.theme-system, .smart-tablet-ui) .theme-dial-ring,
:where(.theme-system, .smart-tablet-ui) .theme-vehicle-core,
:where(.theme-system, .smart-tablet-ui) .theme-dial-node {
  position: absolute;
}

:where(.theme-system, .smart-tablet-ui) .theme-dial-ring {
  inset: 13%;
  background: radial-gradient(100% 100% at 50% 100%, rgba(255, 255, 255, 0.74), rgba(96, 108, 128, 0.16) 58%, rgba(226, 229, 236, 0.88));
  opacity: 0.62;
}

:where(.theme-system, .smart-tablet-ui) .theme-dial-ring-b {
  inset: 24%;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  opacity: 1;
}

:where(.theme-system, .smart-tablet-ui) .theme-vehicle-core {
  inset: 28%;
  display: grid;
  place-items: center;
  background: var(--surface-gradient);
  box-shadow: var(--shadow-raised-sm), var(--shadow-inset-sm);
  color: var(--text-strong);
  text-align: center;
}

:where(.theme-system, .smart-tablet-ui) .theme-vehicle-core small {
  display: block;
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  text-transform: uppercase;
}

:where(.theme-system, .smart-tablet-ui) .theme-dial-node {
  width: var(--icon-holder-lg);
  height: var(--icon-holder-lg);
}

:where(.theme-system, .smart-tablet-ui) .theme-dial-node-a {
  top: 8%;
  left: calc(50% - 28px);
}

:where(.theme-system, .smart-tablet-ui) .theme-dial-node-b {
  right: 8%;
  bottom: 23%;
}

:where(.theme-system, .smart-tablet-ui) .theme-dial-node-c {
  left: 9%;
  bottom: 22%;
}

:where(.theme-system, .smart-tablet-ui) .theme-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  min-height: 70px;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-md);
  background: var(--surface-inset-gradient);
  box-shadow: var(--shadow-inset-sm);
  color: var(--text-main);
}

:where(.theme-system, .smart-tablet-ui) .theme-toggle-row-compact {
  min-height: 66px;
}

:where(.theme-system, .smart-tablet-ui) .theme-toggle-row strong,
:where(.theme-system, .smart-tablet-ui) .theme-toggle-row small {
  display: block;
}

:where(.theme-system, .smart-tablet-ui) .theme-toggle-row strong {
  color: var(--text-strong);
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
}

:where(.theme-system, .smart-tablet-ui) .theme-toggle-row small {
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.28;
}

:where(.theme-system, .smart-tablet-ui) .theme-switch-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

:where(.theme-system, .smart-tablet-ui) .theme-switch {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--switch-width);
  height: var(--switch-height);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-pill);
  background: var(--surface-inset-gradient);
  box-shadow: var(--shadow-inset-sm), var(--shadow-raised-sm);
  cursor: pointer;
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

:where(.theme-system, .smart-tablet-ui) .theme-switch::before,
:where(.theme-system, .smart-tablet-ui) .theme-switch::after {
  content: "";
  position: absolute;
}

:where(.theme-system, .smart-tablet-ui) .theme-switch::before {
  inset: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-pressed);
  box-shadow: var(--shadow-inset-sm);
  transition: background var(--transition-normal);
}

:where(.theme-system, .smart-tablet-ui) .theme-switch::after {
  top: 5px;
  left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised-sm);
  transition: left var(--transition-normal), box-shadow var(--transition-normal);
}

:where(.theme-system, .smart-tablet-ui) .theme-switch-input:checked + .theme-switch::before {
  background: var(--brand-accent);
}

:where(.theme-system, .smart-tablet-ui) .theme-switch-input:checked + .theme-switch::after {
  left: 36px;
}

:where(.theme-system, .smart-tablet-ui) .theme-switch-input:focus-visible + .theme-switch {
  box-shadow: var(--focus-ring), var(--shadow-inset-sm), var(--shadow-raised-sm);
}

:where(.theme-system, .smart-tablet-ui) .theme-map-surface {
  position: relative;
  min-height: 248px;
  margin-top: var(--space-lg);
  overflow: hidden;
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 24% 60%, rgba(255, 255, 255, 0.48) 0 9%, transparent 10%),
    radial-gradient(circle at 74% 34%, rgba(111, 124, 138, 0.14) 0 10%, transparent 11%),
    linear-gradient(135deg, var(--surface-raised) 0%, var(--surface-inset) 100%);
  box-shadow: var(--shadow-inset-sm);
}

:where(.theme-system, .smart-tablet-ui) .theme-map-surface::before,
:where(.theme-system, .smart-tablet-ui) .theme-map-surface::after {
  content: "";
  position: absolute;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  opacity: 0.55;
}

:where(.theme-system, .smart-tablet-ui) .theme-map-surface::before {
  inset: 38px 18% 68px 12%;
  transform: rotate(-10deg);
}

:where(.theme-system, .smart-tablet-ui) .theme-map-surface::after {
  inset: 90px 10% 42px 34%;
  transform: rotate(14deg);
}

:where(.theme-system, .smart-tablet-ui) .theme-map-route {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 52%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  transform: rotate(-8deg);
}

:where(.theme-system, .smart-tablet-ui) .theme-map-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  margin-left: calc(-1 * var(--icon-holder-half));
  margin-top: calc(-1 * var(--icon-holder-half));
}

:where(.theme-system, .smart-tablet-ui) .theme-map-node-main {
  border-color: var(--border-accent);
  background: var(--icon-bg-green);
  color: var(--icon-green);
  --icon-filter: var(--icon-filter-green);
}

:where(.theme-system, .smart-tablet-ui) .theme-map-node-warning {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

:where(.theme-system, .smart-tablet-ui) .list-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
  min-height: 78px;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

:where(.theme-system, .smart-tablet-ui) .list-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-raised);
}

:where(.theme-system, .smart-tablet-ui) .list-card-active,
:where(.theme-system, .smart-tablet-ui) .list-card[aria-current="true"] {
  border-color: var(--border-accent);
  background: var(--surface-active);
  box-shadow: var(--shadow-raised-sm);
}

:where(.theme-system, .smart-tablet-ui) .list-card-active .list-index,
:where(.theme-system, .smart-tablet-ui) .list-card[aria-current="true"] .list-index {
  border-color: var(--border-accent);
  background: var(--icon-bg-green);
  color: var(--icon-green);
  --icon-filter: var(--icon-filter-green);
}

:where(.theme-system, .smart-tablet-ui) .list-title {
  display: block;
  color: var(--text-strong);
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
}

:where(.theme-system, .smart-tablet-ui) .list-meta {
  display: block;
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.32;
}

:where(.theme-system, .smart-tablet-ui) .quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

:where(.theme-system, .smart-tablet-ui) .quick-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  min-height: 90px;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: left;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

:where(.theme-system, .smart-tablet-ui) .quick-action:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-raised);
}

:where(.theme-system, .smart-tablet-ui) .quick-action:active {
  box-shadow: var(--shadow-inset-sm);
}

:where(.theme-system, .smart-tablet-ui) .quick-action-success {
  border-color: var(--status-success-border);
  background: color-mix(in srgb, var(--icon-green) 5%, var(--surface-raised));
}

:where(.theme-system, .smart-tablet-ui) .quick-action-warning {
  border-color: var(--status-warning-border);
  background: color-mix(in srgb, var(--icon-amber) 5%, var(--surface-raised));
}

:where(.theme-system, .smart-tablet-ui) .quick-action-danger {
  border-color: var(--status-danger-border);
  background: color-mix(in srgb, var(--icon-red) 5%, var(--surface-raised));
}

:where(.theme-system, .smart-tablet-ui) .quick-action-info {
  border-color: var(--status-info-border);
  background: color-mix(in srgb, var(--icon-graphite) 5%, var(--surface-raised));
}

:where(.theme-system, .smart-tablet-ui) .quick-action strong {
  display: block;
  color: var(--text-strong);
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
}

:where(.theme-system, .smart-tablet-ui) .quick-action small {
  display: block;
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

@media (max-width: 1120px) {
  :where(.theme-system, .smart-tablet-ui) .theme-dashboard-grid {
    grid-template-columns: 1fr;
  }

  :where(.theme-system, .smart-tablet-ui) .theme-dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :where(.theme-system, .smart-tablet-ui) .app-shell {
    --sidebar-current-width: var(--sidebar-width-compact);
    grid-template-columns: var(--sidebar-width-compact) minmax(0, 1fr);
    padding: var(--space-lg);
  }

  :where(.theme-system, .smart-tablet-ui) .app-sidebar {
    width: var(--sidebar-width-compact);
  }

  :where(.theme-system, .smart-tablet-ui) .app-sidebar .sidebar-header {
    display: none;
  }

  :where(.theme-system, .smart-tablet-ui) .app-sidebar .nav-item {
    grid-template-columns: var(--sidebar-icon-holder);
    justify-content: center;
    gap: 0;
    padding: var(--sidebar-item-padding);
    text-align: center;
  }

  :where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .nav-item,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .nav-item {
    grid-template-columns: var(--sidebar-icon-holder);
    justify-content: center;
    gap: 0;
    padding: var(--sidebar-item-padding);
    text-align: center;
  }

  :where(.theme-system, .smart-tablet-ui) .app-sidebar .nav-label,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar .sidebar-brand-text,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar .sidebar-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    opacity: 0;
  }

  :where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .nav-label,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .sidebar-brand-text,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .sidebar-toggle-label,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .nav-label,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .sidebar-brand-text,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .sidebar-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    opacity: 0;
  }

  :where(.theme-system, .smart-tablet-ui) .theme-control-grid,
  :where(.theme-system, .smart-tablet-ui) .theme-dashboard-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :where(.theme-system, .smart-tablet-ui) {
    font-size: 14px;
  }

  :where(.theme-system, .smart-tablet-ui) .app-shell {
    display: block;
    width: 100%;
    min-height: 100vh;
    padding: var(--space-lg) var(--space-lg) calc(var(--sidebar-item-height) + 42px);
  }

  :where(.theme-system, .smart-tablet-ui) .app-sidebar {
    position: fixed;
    inset: auto var(--space-md) var(--space-md);
    z-index: 20;
    width: auto;
    min-height: auto;
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
  }

  :where(.theme-system, .smart-tablet-ui) .sidebar-header {
    display: none;
  }

  :where(.theme-system, .smart-tablet-ui) .sidebar-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(52px, 1fr);
    gap: var(--space-xs);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  :where(.theme-system, .smart-tablet-ui) .nav-item {
    min-height: 52px;
    min-width: 52px;
    padding: var(--space-xs);
  }

  :where(.theme-system, .smart-tablet-ui) .app-sidebar:has(.sidebar-state-input:checked) .nav-item,
  :where(.theme-system, .smart-tablet-ui) .app-sidebar.sidebar--expanded .nav-item {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--space-xs);
  }

  :where(.theme-system, .smart-tablet-ui) .nav-icon {
    width: 38px;
    height: 38px;
  }

  :where(.theme-system, .smart-tablet-ui) .nav-icon .theme-icon-img {
    width: 20px;
    height: 20px;
  }

  :where(.theme-system, .smart-tablet-ui) .app-header,
  :where(.theme-system, .smart-tablet-ui) .theme-preview-toolbar,
  :where(.theme-system, .smart-tablet-ui) .theme-button-row,
  :where(.theme-system, .smart-tablet-ui) .theme-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  :where(.theme-system, .smart-tablet-ui) .theme-metric-grid,
  :where(.theme-system, .smart-tablet-ui) .quick-actions {
    grid-template-columns: 1fr;
  }

  :where(.theme-system, .smart-tablet-ui) .theme-map-surface {
    min-height: 250px;
  }

  :where(.theme-system, .smart-tablet-ui) .btn {
    width: 100%;
  }

  :where(.theme-system, .smart-tablet-ui) .btn-icon {
    width: var(--control-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.theme-system, .smart-tablet-ui) *,
  :where(.theme-system, .smart-tablet-ui) *::before,
  :where(.theme-system, .smart-tablet-ui) *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}