:root {
  color-scheme: light;
  --surface: #F8FAFC;
  --card: #FFFFFF;
  --text: #0F172A;
  --muted: #475569;
  --border: #E2E8F0;
  --link: #164E86;
  --teal: #00D2D3;
  --blue: #2E86DE;
  --action: #164E86;
  --action-text: #F8FAFC;
  --success: #10B981;
  --error: #EF4444;
  --warning: #F59E0B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0F172A;
    --card: #1E293B;
    --text: #F8FAFC;
    --muted: #CBD5E1;
    --border: #334155;
    --link: #7DD3FC;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0F172A;
  --card: #1E293B;
  --text: #F8FAFC;
  --muted: #CBD5E1;
  --border: #334155;
  --link: #7DD3FC;
}

* { box-sizing: border-box; }
body { font-family: "Segoe UI", Arial, sans-serif; background: var(--surface); color: var(--text); margin: 0; line-height: 1.6; }
main { width: min(100% - 32px, 760px); margin: 32px auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { flex: 0 0 64px; border-radius: 8px; }
h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; }
a { color: var(--link); text-underline-offset: 3px; }
.brand p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.card { background: var(--card); padding: 24px; border: 1px solid var(--border); border-radius: 8px; }
label { display: block; margin: 16px 0 6px; font-weight: 600; }
.card > label:first-child { margin-top: 0; }
input, select, button { font: inherit; }
input, select { max-width: 100%; color: var(--text); }
input[type="text"], select { width: 100%; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
input[type="file"] { width: 100%; padding: 12px; border: 1px dashed var(--link); border-radius: 6px; background: var(--surface); }
input::placeholder { color: var(--muted); opacity: 1; }
button, input::file-selector-button { cursor: pointer; border: 1px solid var(--link); border-radius: 6px; padding: 9px 16px; background: var(--card); color: var(--text); font-weight: 600; }
input::file-selector-button { margin-right: 12px; }
.primary { background: var(--action); color: var(--action-text); border-color: var(--blue); padding: 11px 22px; margin-top: 24px; }
button:hover:not(:disabled), input::file-selector-button:hover { box-shadow: inset 0 0 0 1px var(--link); }
button:disabled, input:disabled, select:disabled { cursor: wait; }
button:disabled { background: var(--surface); color: var(--muted); border-color: var(--border); }
#theme[aria-pressed="true"] { background: var(--teal); color: #0F172A; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled { opacity: 1; }
details { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
summary { cursor: pointer; font-weight: 600; }
small { color: var(--muted); }
#msg { display: none; margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
#msg:not(:empty) { display: block; }
#msg::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--teal); }
#msg.ok::before { background: var(--success); }
#msg.err::before { background: var(--error); }
#msg.warn::before { background: var(--warning); }
@media (max-width: 480px) {
  main { margin: 16px auto; }
  .card { padding: 16px; }
  .topbar { flex-wrap: wrap; }
  .primary { width: 100%; }
}
@media (forced-colors: active) {
  #msg::before { forced-color-adjust: none; }
}