:root {
  color-scheme: light;
  --s2-primary-50: #f0fdfa;
  --s2-primary-100: #ccfbf1;
  --s2-primary-200: #99f6e4;
  --s2-primary-300: #5eead4;
  --s2-primary-400: #2dd4bf;
  --s2-primary-500: #14b8a6;
  --s2-primary-600: #0d9488;
  --s2-primary-700: #0f766e;
  --s2-primary-800: #115e59;
  --s2-primary-900: #134e4a;
  --s2-primary-950: #042f2e;
  --s2-gray-50: #f9fafb;
  --s2-gray-100: #f3f4f6;
  --s2-gray-200: #e5e7eb;
  --s2-gray-300: #d1d5db;
  --s2-gray-400: #9ca3af;
  --s2-gray-500: #6b7280;
  --s2-gray-600: #4b5563;
  --s2-gray-700: #374151;
  --s2-gray-800: #1f2937;
  --s2-gray-900: #111827;
  --s2-dark-400: #94a3b8;
  --s2-dark-300: #cbd5e1;
  --s2-dark-500: #64748b;
  --s2-dark-600: #475569;
  --s2-dark-700: #334155;
  --s2-dark-800: #1e293b;
  --s2-dark-900: #0f172a;
  --s2-dark-950: #020617;
  --s2-page: var(--s2-gray-50);
  --s2-surface: #ffffff;
  --s2-surface-muted: var(--s2-gray-100);
  --s2-text: var(--s2-gray-900);
  --s2-text-secondary: var(--s2-gray-600);
  --s2-text-label: var(--s2-gray-700);
  --s2-border: var(--s2-gray-200);
  --s2-card-border: var(--s2-gray-100);
  --s2-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --s2-card-hover-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  --s2-primary-shadow: 0 4px 6px -1px rgba(20, 184, 166, 0.25), 0 2px 4px -2px rgba(20, 184, 166, 0.25);
  --s2-primary-hover-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.3), 0 4px 6px -4px rgba(20, 184, 166, 0.3);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --s2-page: var(--s2-dark-950);
  --s2-surface: var(--s2-dark-800);
  --s2-surface-muted: var(--s2-dark-900);
  --s2-text: var(--s2-gray-100);
  --s2-text-secondary: var(--s2-dark-300);
  --s2-text-label: var(--s2-gray-300);
  --s2-border: var(--s2-dark-600);
  --s2-card-border: rgba(51, 65, 85, 0.5);
  --s2-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.28);
}

html {
  background: var(--s2-page);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--s2-page);
  color: var(--s2-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

::selection {
  background: rgba(20, 184, 166, 0.2);
  color: var(--s2-primary-900);
}

:root[data-theme="dark"] ::selection { color: var(--s2-primary-100); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: transparent;
  transition: background-color 200ms ease;
}
*:hover::-webkit-scrollbar-thumb { background: rgba(209, 213, 219, 0.5); }
:root[data-theme="dark"] *:hover::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.5); }

button,
a,
input,
select,
summary {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}

button:active,
.primary-action:active,
.secondary-action:active,
.login-button:active,
.entry-card:active { transform: scale(0.98); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(20, 184, 166, 0.5);
  outline-offset: 2px;
}

.site-header,
.topbar {
  min-height: 73px;
  padding-block: 16px;
  background: var(--s2-page);
  border-color: var(--s2-gray-200);
}

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .topbar { border-color: var(--s2-dark-800); }

.brand { gap: 12px; }
.brand img { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; }
.brand > strong, .brand > span[translate="no"] { font-size: 18px; font-weight: 600; line-height: 28px; }

.login-button {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--s2-gray-900);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.login-button:hover { background: var(--s2-gray-800); }
:root[data-theme="dark"] .login-button { background: #ffffff; color: var(--s2-gray-900); }
:root[data-theme="dark"] .login-button:hover { background: var(--s2-gray-200); color: var(--s2-gray-900); }

.primary-action {
  min-height: 40px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--s2-primary-600);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

.primary-action:hover { background: var(--s2-primary-700); }

.primary {
  min-height: 40px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--s2-primary-600);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

.primary:hover { background: var(--s2-primary-700); box-shadow: none; }

.top-primary {
  min-height: 40px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(to right, var(--s2-primary-500), var(--s2-primary-600));
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--s2-primary-shadow);
}

.top-primary:hover {
  background: linear-gradient(to right, var(--s2-primary-600), var(--s2-primary-700));
  box-shadow: var(--s2-primary-hover-shadow);
}

.primary:disabled,
.top-primary:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }

.primary svg { width: 18px; height: 18px; }
.top-primary svg { width: 16px; height: 16px; }

.secondary-action,
.top-link,
.model-fetch,
.command-header button {
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid var(--s2-border);
  border-radius: 8px;
  background: var(--s2-surface);
  color: var(--s2-text-label);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.secondary-action:hover,
.top-link:hover,
.model-fetch:not(:disabled):hover,
.command-header button:not(:disabled):hover {
  border-color: var(--s2-gray-300);
  background: var(--s2-gray-50);
}

:root[data-theme="dark"] .secondary-action:hover,
:root[data-theme="dark"] .top-link:hover,
:root[data-theme="dark"] .model-fetch:not(:disabled):hover,
:root[data-theme="dark"] .command-header button:not(:disabled):hover {
  border-color: var(--s2-dark-500);
  background: var(--s2-dark-700);
}

.entry-card,
.panel {
  border: 1px solid var(--s2-card-border);
  border-radius: 16px;
  background: var(--s2-surface);
  box-shadow: var(--s2-card-shadow);
}

:root[data-theme="dark"] .entry-card,
:root[data-theme="dark"] .panel { background: rgba(30, 41, 59, 0.5); }

.entry-card:hover {
  border-color: var(--s2-gray-200);
  box-shadow: var(--s2-card-hover-shadow);
  transform: translateY(-2px);
}

:root[data-theme="dark"] .entry-card:hover { border-color: var(--s2-dark-600); }

.field-label {
  margin-bottom: 6px;
  color: var(--s2-text-label);
  font-size: 14px;
  font-weight: 500;
}

.key-input-wrap input,
.model-select-wrap select {
  height: 42px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--s2-border);
  border-radius: 8px;
  background-color: var(--s2-surface);
  color: var(--s2-text);
  font-size: 14px;
}

.key-input-wrap input { padding-right: 48px; }

.key-input-wrap:focus-within,
.model-select-wrap select:focus-visible {
  border-color: var(--s2-primary-500);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3);
}

.key-input-wrap input:focus-visible {
  border-color: var(--s2-primary-500);
  outline: 0;
  box-shadow: none;
}

.key-input-wrap input:disabled,
.model-select-wrap select:disabled {
  cursor: not-allowed;
  background: var(--s2-gray-100);
}

:root[data-theme="dark"] .key-input-wrap input:disabled,
:root[data-theme="dark"] .model-select-wrap select:disabled { background: var(--s2-dark-900); }

.field-help,
.field-error { margin-top: 4px; font-size: 12px; }

.platform-switch,
.summary,
.backup-details,
.address-row,
footer { border-color: var(--s2-border); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}