:root {
  color-scheme: light;
  --bg: #f7fcf8;
  --panel: #fff;
  --text: #0f2033;
  --muted: #5c7165;
  --green: #017741;
  --line: rgba(15,32,51,.12);
  font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
}

#accountForm input { display:block; width:100%; min-height:44px; margin:6px 0 14px; padding:10px 12px; border:1px solid var(--line,#ceddd4); border-radius:8px; font:inherit; box-sizing:border-box; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--green); text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #35d073; outline-offset: 3px; }
.site-header { min-height: 76px; padding: 12px max(24px, calc((100vw - 1000px)/2)); display: flex; gap: 20px; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--text); }
.brand img { object-fit: contain; }
.back-link { font-size: .9rem; font-weight: 600; padding: 10px 0; }
.admin-shell { max-width: 800px; margin: 42px auto 72px; padding: 0 24px; }
.page-heading { margin-bottom: 26px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.9rem, 4vw, 2.3rem); line-height: 1.35; letter-spacing: -.025em; }
h2 { font-size: 1.08rem; font-weight: 600; }
.page-heading p { color: var(--muted); margin-top: 8px; }
.current-provider, .settings-panel, .test-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-top: 18px; }
.current-provider { border-top: 3px solid #01a040; }
.current-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.text-button { border: 0; color: var(--green); background: transparent; padding: 8px 0 8px 10px; font-size: .875rem; font-weight: 600; min-height: 44px; }
.provider-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.provider-line strong { font-size: 1.3rem; }
.status { border-radius: 999px; padding: 3px 10px; background: #f0f3f1; color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.status[data-state="ready"] { background: #e5f6eb; color: #087f44; }
.status[data-state="error"] { background: #fff0ed; color: #ad3b25; }
.status[data-state="pending"] { background: #fff5d9; color: #80620d; }
.model-name { margin-top: 4px; font-size: .94rem; color: var(--muted); overflow-wrap: anywhere; }
.small-note { margin-top: 10px; color: var(--muted); font-size: .83rem; }
label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: 8px; }
input, select { min-height: 48px; width: 100%; color: var(--text); background: #fff; border: 1px solid #cbd9d0; border-radius: 9px; padding: 11px 13px; min-width: 0; }
input::placeholder { color: #819187; }
select { padding-right: 32px; }
.access-row { display: flex; gap: 10px; align-items: stretch; }
.access-row .button { flex: 0 0 auto; }
.button { border: 1px solid transparent; border-radius: 9px; min-height: 48px; padding: 11px 18px; font-weight: 600; }
.button.primary { background: var(--green); color: #fff; }
.button.primary:hover:not(:disabled) { background: #006335; }
.button.secondary { border-color: #c9ddd0; background: #f7fcf8; color: var(--green); }
.button.secondary:hover:not(:disabled) { background: #eaf7ee; }
.selection-note { margin-top: 9px; color: var(--muted); font-size: .85rem; }
.selection-note[data-dirty="true"] { color: #816110; }
.provider-detail { margin-top: 18px; padding: 14px 16px; border-radius: 9px; background: #f7fcf8; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.provider-detail:empty { display: none; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.feedback { margin-top: 18px; padding: 12px 14px; background: #eaf7ee; color: #086938; border-radius: 9px; font-size: .9rem; overflow-wrap: anywhere; }
.feedback[data-kind="error"] { background: #fff0ed; color: #9e3421; }
.feedback[data-kind="pending"] { background: #f2f6f3; color: var(--muted); }
.test-output { margin-top: 16px; padding: 16px; border-left: 3px solid #bce3ca; background: #f7fcf8; border-radius: 0 8px 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .site-header { padding: 10px 16px; min-height: 68px; gap: 12px; }
  .brand { gap: 8px; }
  .brand img { width: 94px; height: 34px; }
  .brand span { font-size: .86rem; }
  .back-link { font-size: .79rem; }
  .admin-shell { padding: 0 16px; margin-top: 28px; }
  .current-provider, .settings-panel, .test-panel { padding: 18px; border-radius: 13px; }
  .access-row, .form-actions { flex-direction: column; }
  .form-actions .primary { order: -1; }
  .form-actions .button { width: 100%; }
  .current-heading, .panel-heading { align-items: flex-start; }
}

.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.admin-nav a{flex:1;text-align:center;padding:10px 12px;border:1px solid #d4e2da;border-radius:12px;background:#fff;color:#35644f;text-decoration:none;font-weight:650}.admin-nav a[aria-current=page]{background:#e1f4e9;border-color:#008650;color:#006a3c}