:root {
  --primary-color: #1469a8;
  --primary-hover: #0f5d96;
  --secondary-color: #64748b;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --border-color: #e2e8f0;
  --bg-light: #f8fafc;
  --bg-white: #ffffff;
  --surface-page: var(--bg-light);
  --surface-header: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 10%, white),
    color-mix(in srgb, var(--primary-color) 4%, white)
  );
  --surface-titlebar: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 88%, #0b1220),
    color-mix(in srgb, var(--primary-color) 72%, #0b1220)
  );
  --titlebar-text: #ffffff;
  --titlebar-muted: rgba(255, 255, 255, 0.86);
  --titlebar-link-bg: rgba(255, 255, 255, 0.12);
  --titlebar-link-border: rgba(255, 255, 255, 0.18);
  --titlebar-link-hover-bg: rgba(255, 255, 255, 0.18);
  --surface-card: var(--bg-white);
  --surface-inset: color-mix(in srgb, var(--primary-color) 3%, var(--bg-light));
  --surface-input: color-mix(in srgb, var(--primary-color) 4%, white);
  --surface-display: color-mix(in srgb, var(--text-secondary) 6%, white);
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 18px -10px rgba(15, 23, 42, 0.28), 0 4px 10px -6px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 18px 40px -18px rgba(15, 23, 42, 0.40), 0 10px 22px -12px rgba(15, 23, 42, 0.24);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --focus-ring: 0 0 0 3px rgba(20, 105, 168, 0.18);

  --table-header-bg: var(--bg-light);
  --table-header-hover-bg: #e5e7eb;
  --table-header-sorted-bg: color-mix(in srgb, var(--primary-color) 14%, white);
  --table-row-hover-bg: #f1f5f9;
  --table-row-selected-bg: color-mix(in srgb, var(--primary-color) 14%, white);

  --motion-fast: 0.2s;
  --button-hover-translate-y: -1px;
  --button-active-translate-y: 0;
  --button-hover-shadow: var(--shadow-md);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --control-height: 36px;
  --control-padding-x: 12px;
  --control-padding-y: 8px;
  --control-font-size: 14px;
  --control-radius: var(--radius-sm);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--surface-page);
  color: var(--text-primary);
  line-height: 1.6;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

a {
  color: inherit;
  text-decoration: none;
}

:where(a:hover, a:focus-visible) {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

input,
select,
textarea,
button {
  font: inherit;
}

:where(button:focus-visible, .primary-button:focus-visible, .secondary-button:focus-visible, .footer-button:focus-visible) {
  box-shadow: var(--shadow-sm), var(--focus-ring);
}

:where(button:hover:focus-visible, .primary-button:hover:focus-visible, .secondary-button:hover:focus-visible, .footer-button:hover:focus-visible) {
  box-shadow: var(--button-hover-shadow, var(--shadow-md)), var(--focus-ring);
}

:where(input, select, textarea) {
  color: inherit;
  font-size: var(--control-font-size);
}

:where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  background: var(--surface-input);
}

:where(input, select, textarea)::placeholder {
  color: color-mix(in srgb, var(--text-secondary) 75%, white);
}

:where(input, select, textarea):focus {
  outline: none;
  border-color: var(--primary-color);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  cursor: not-allowed;
}

:where(input:disabled, select:disabled, textarea:disabled) {
  opacity: 0.85;
  background: var(--surface-display);
  color: var(--text-secondary);
}

:where(input[readonly], textarea[readonly]) {
  background: var(--surface-display);
}

:where(.section) {
  margin-bottom: var(--space-5);
}

:where(.section-header) {
  margin-bottom: var(--space-4);
}

:where(.section-header h2) {
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.header-user {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--surface-input, var(--bg-light));
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

:where(.section-header p) {
  margin-top: var(--space-1);
  line-height: 1.5;
}

:where(.input-group) {
  gap: var(--space-1);
}

:where(.input-hint, .hint) {
  line-height: 1.45;
}

:where(textarea) {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  line-height: 1.5;
  resize: vertical;
}

:where(input[type='checkbox']) {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
  vertical-align: middle;
}

:where(label) {
  cursor: pointer;
}

:where(label input[type='checkbox']) {
  cursor: pointer;
}

:where(small.input-hint, small.hint) {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 12px;
}

input[type='search'] {
  appearance: none;
  -webkit-appearance: none;
}