:root {
  --ui-scale: 0.9;
  --base-font-size: calc(16px * var(--ui-scale));
  --font-size-2xs: 0.72rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8rem;
  --font-size-sm-plus: 0.83rem;
  --font-size-sm-lg: 0.85rem;
  --font-size-md: 0.9rem;
  --font-size-md-plus: 0.92rem;
  --font-size-lg: 0.95rem;
  --font-size-xl: 1rem;
  --font-size-2xl: 1.05rem;
  --font-size-3xl: 1.1rem;
  --font-size-4xl: 1.25rem;
  --font-size-5xl: 1.6rem;
  --font-size-6xl: 1.75rem;
  --font-size-7xl: 2rem;
  --background: #f5f5f5;
  --surface: #ffffff;
  --border: #dcdfe3;
  --text: #0f0f0f;
  --muted: #6b7280;
  --accent: #ff7a00;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, #ffffff);
  --accent-strong: color-mix(in srgb, var(--accent) 85%, #000000);
  --order-row-height: calc(40px * var(--ui-scale));
  --content-padding-vertical: calc(1.25rem * var(--ui-scale));
  --content-padding-horizontal: calc(2.5rem * var(--ui-scale));
  --card-padding: calc(1.75rem * var(--ui-scale));
  --sidebar-padding-vertical: calc(2rem * var(--ui-scale));
  --sidebar-padding-horizontal: calc(1.5rem * var(--ui-scale));
  --sidebar-gap: calc(2rem * var(--ui-scale));
  --button-height: calc(40px * var(--ui-scale));
  --button-padding-y: calc(0.7rem * var(--ui-scale));
  --button-padding-x: calc(0.95rem * var(--ui-scale));
  --button-gap: calc(0.5rem * var(--ui-scale));
  --button-radius: calc(0.6rem * var(--ui-scale));
  --icon-button-size: calc(32px * var(--ui-scale));
  --icon-button-padding: calc(0.2rem * var(--ui-scale));
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  font-size: var(--base-font-size);
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--text);
}

button {
  font-size: var(--font-size-2xl);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.layout {
  display: grid;
  grid-template-columns: calc(240px * var(--ui-scale)) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #0b0b0b;
  color: #f5f5f5;
  padding: var(--sidebar-padding-vertical) var(--sidebar-padding-horizontal);
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-gap);
}

.brand {
  font-weight: 700;
  font-size: var(--font-size-4xl);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.1;
}

.brand-name {
  font-size: var(--font-size-4xl);
  font-weight: 700;
}

.brand-version {
  font-size: var(--font-size-md);
  color: rgba(226, 232, 240, 0.85);
  font-weight: 400;
}

.brand-icon,
.brand-icon svg {
  width: calc(40px * var(--ui-scale));
  height: calc(40px * var(--ui-scale));
  stroke: currentColor;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-separator {
  border-top: 2px solid #1f1f1f;
  margin: 1rem 0 0.75rem;
  padding-top: 0.25rem;
  list-style: none;
}

.sidebar nav a {
  color: #ededed;
  text-decoration: none;
  padding: calc(0.6rem * var(--ui-scale)) calc(0.9rem * var(--ui-scale));
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: calc(0.75rem * var(--ui-scale));
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sidebar nav a:hover,
.sidebar nav a:focus,
.sidebar nav a.active {
  background: color-mix(in srgb, var(--accent) 12%, #0b0b0b);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.nav-icon,
.nav-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.footer-link-icon,
.footer-link-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6px;
}

.content {
  padding: var(--content-padding-vertical) var(--content-padding-horizontal);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100vh;
}

#orders.content {
  height: 100vh;
  min-height: 0;
  overflow: auto;
}