:root {
  --teal: #078894;
  --teal-hover: #04747e;
  --teal-soft: #e7f7f8;
  --text: #0c2938;
  --text-soft: #607985;
  --line: #d8e7ea;
  --surface: #f5fafb;
  --danger: #aa3e3e;
  --danger-soft: #fff1f1;
  --success: #24745d;
  --success-soft: #edf8f3;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.admin-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 5px 20px rgba(18,61,73,.035);
}
.admin-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); font-size: 17px; font-weight: 750; text-decoration: none; }
.admin-brand img { width: 38px; height: 38px; object-fit: contain; }
.admin-actions { display: flex; align-items: center; gap: 9px; }
.admin-username { color: var(--text-soft); font-size: 12px; }
.admin-actions form { margin: 0; }

.admin-page { background: radial-gradient(55% 26% at 88% 100%,rgba(120,205,216,.09),transparent 74%),#fff; }
.settings-shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 58px 0 76px; }
.settings-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.settings-heading h1 { margin: 0 0 9px; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -.035em; }
.settings-heading p { max-width: 680px; margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.75; }
.mode-indicator { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(18,61,73,.05); font-size: 12px; }
.mode-indicator span { width: 8px; height: 8px; border-radius: 50%; background: #d19539; box-shadow: 0 0 0 4px #fff5df; }
.mode-indicator.live span { background: var(--success); box-shadow: 0 0 0 4px #e6f5ee; }
.mode-indicator.setup span { background: #d19539; box-shadow: 0 0 0 4px #fff5df; }

.settings-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.6fr); gap: 24px; align-items: start; }
.security-panel, .settings-card { border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.96); }
.security-panel { padding: 27px; box-shadow: 0 14px 42px rgba(18,61,73,.055); }
.security-icon, .lock-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--teal-soft); color: var(--teal); }
.security-icon svg, .lock-mark svg { width: 24px; height: 24px; }
.security-panel h2 { margin: 19px 0 9px; font-size: 16px; }
.security-panel > p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.75; }
.security-panel dl { margin: 24px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.security-panel dl div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.security-panel dl div:last-child { border-bottom: 0; }
.security-panel dt { color: var(--text-soft); }
.security-panel dd { margin: 0; font-weight: 650; text-align: right; }

.settings-card { padding: 32px; box-shadow: 0 20px 58px rgba(18,61,73,.075); }
.card-heading { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.card-heading h2 { margin: 0 0 7px; font-size: 20px; }
.card-heading p { margin: 0; color: var(--text-soft); font-size: 13px; }
.field-group { display: grid; gap: 9px; margin-bottom: 24px; }
.model-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.image-enable-row { margin-top: 10px; }
.field-group > label:first-child, .login-form label { font-size: 13px; font-weight: 700; }
.field-group > input, .secret-field input, .login-form input[type="text"], .login-form input[type="password"], .login-form input[type="number"] {
  width: 100%;
  height: 50px;
  padding: 0 13px;
  border: 1px solid #cbdadd;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.field-group > input:focus, .secret-field input:focus, .login-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,127,140,.11); }
.field-group input::placeholder, .login-form input::placeholder { color: #9aaab1; }
.field-group small { color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.field-group code { color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.secret-field { position: relative; }
.secret-field input { padding-right: 48px; }
.secret-field button { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 37px; height: 37px; border: 0; border-radius: 8px; background: transparent; color: var(--text-soft); cursor: pointer; }
.secret-field button:hover { background: var(--surface); color: var(--text); }
.secret-field button svg { width: 19px; height: 19px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; width: fit-content; color: var(--text-soft); font-size: 12px; line-height: 1.5; cursor: pointer; }
.check-row input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--teal); }
.connection-result { display: none; min-height: 43px; margin: 2px 0 20px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; line-height: 1.55; }
.connection-result.show { display: block; }
.connection-result.success { border-color: #bfe2d4; background: var(--success-soft); color: var(--success); }
.connection-result.error { border-color: #efc8c8; background: var(--danger-soft); color: var(--danger); }
.connection-result.loading { display: block; background: var(--surface); color: var(--text-soft); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 5px; }

.primary-button, .secondary-button, .quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 0 17px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.primary-button { border: 1px solid var(--teal); background: linear-gradient(135deg,#07929e,#087f8c); box-shadow: 0 8px 18px rgba(8,127,140,.16); color: #fff; }
.primary-button:hover { border-color: var(--teal-hover); background: var(--teal-hover); }
.secondary-button { border: 1px solid var(--line); background: #fff; color: var(--text); }
.secondary-button:hover { border-color: #bad0d4; background: var(--surface); }
.secondary-button svg { width: 18px; height: 18px; }
.secondary-button.compact { min-height: 38px; padding: 0 12px; font-size: 12px; }
.quiet-button { min-height: 38px; padding: 0 11px; border: 0; background: transparent; color: var(--text-soft); font-size: 12px; }
.quiet-button:hover { background: var(--surface); color: var(--text); }
button:disabled { opacity: .55; cursor: wait; }

.login-page { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: radial-gradient(60% 44% at 10% 100%,rgba(104,195,208,.14),transparent 70%),radial-gradient(48% 40% at 96% 0%,rgba(127,210,220,.10),transparent 72%),#f7fbfc; }
.login-page::before { content: ""; position: fixed; left: -12vw; right: -12vw; bottom: -18vh; height: 42vh; opacity: .8; background: radial-gradient(58% 62% at 20% 100%,rgba(118,207,218,.15) 0 42%,transparent 43%),radial-gradient(55% 58% at 78% 100%,rgba(117,200,213,.10) 0 38%,transparent 39%); pointer-events: none; }
.login-shell { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(440px, calc(100% - 32px)); min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 32px 0; }
.login-shell > .admin-brand { margin-bottom: 22px; }
.login-card { width: 100%; padding: 34px; border: 1px solid #d3e5e8; border-radius: 21px; background: rgba(255,255,255,.96); box-shadow: 0 26px 80px rgba(18,61,73,.13),0 4px 14px rgba(8,127,140,.04); backdrop-filter: blur(14px); }
.login-card .lock-mark { margin-bottom: 22px; }
.login-card h1 { margin: 0 0 9px; font-size: 27px; letter-spacing: -.035em; }
.login-card > p { margin: 0 0 24px; color: var(--text-soft); font-size: 13px; line-height: 1.7; }
.login-form { display: grid; gap: 10px; }
.login-form label { margin-top: 4px; }
.login-form .primary-button { width: 100%; margin-top: 5px; }
.login-card .auth-switch { display: flex; gap: 4px; margin: -4px 0 22px; padding: 4px; border-radius: 10px; background: var(--surface); }
.auth-switch a { flex: 1; padding: 8px; border-radius: 7px; color: var(--text-soft); font-size: 12px; font-weight: 650; text-align: center; text-decoration: none; }
.auth-switch a.active { background: #fff; color: var(--teal-hover); box-shadow: 0 2px 9px rgba(21,58,70,.08); }
.auth-field-note { margin: -3px 0 3px; color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.password-field { position: relative; }
.password-field input { padding-right: 74px; }
.password-field button { position: absolute; top: 5px; right: 5px; height: 37px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-soft); font-size: 11px; cursor: pointer; }
.password-field button:hover { background: var(--surface); color: var(--text); }
.welcome-credit { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 11px 13px; border: 1px solid #c9e8ea; border-radius: 11px; background: linear-gradient(180deg,#f5fdfd,var(--teal-soft)); color: var(--teal-hover); font-size: 12px; }
.welcome-credit strong { font-size: 14px; }
.form-alert { margin-bottom: 18px; padding: 10px 12px; border-radius: 9px; font-size: 12px; line-height: 1.55; }
.form-alert.error { border: 1px solid #efc8c8; background: var(--danger-soft); color: var(--danger); }
.text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--text-soft); font-size: 12px; text-decoration: none; }
.text-link:hover { color: var(--teal); }
.text-link svg { width: 16px; height: 16px; }
.security-caption { margin: 17px 0 0; color: var(--text-soft); font-size: 11px; }

@media (max-width: 760px) {
  .admin-header { min-height: 62px; padding: 0 14px; }
  .admin-brand { font-size: 15px; }
  .admin-brand img { width: 34px; height: 34px; }
  .secondary-button.compact { width: 38px; padding: 0; }
  .secondary-button.compact span { display: none; }
  .admin-username { display: none; }
  .settings-shell { width: calc(100% - 28px); padding: 32px 0 48px; }
  .settings-heading { align-items: flex-start; margin-bottom: 22px; }
  .settings-heading h1 { font-size: 28px; }
  .settings-heading p { font-size: 13px; }
  .mode-indicator { margin-top: 1px; }
  .settings-layout { grid-template-columns: 1fr; gap: 14px; }
  .security-panel { order: 2; padding: 20px; }
  .settings-card { order: 1; padding: 22px 18px; border-radius: 15px; box-shadow: none; }
  .model-fields { grid-template-columns: 1fr; gap: 0; }
  .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .settings-heading { display: grid; gap: 16px; }
  .mode-indicator { width: fit-content; }
  .admin-actions { gap: 3px; }
  .login-card { padding: 26px 22px; }
  .form-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}