:root { color-scheme: light dark; --accent: #0b6bcb; }
* { box-sizing: border-box; }
body { font: 16px/1.4 system-ui, sans-serif; margin: 0; padding: 1rem; }
main { max-width: 40rem; margin: 0 auto; }
h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.muted { opacity: .7; margin-top: 0; }
label { display: block; margin: .5rem 0; }
label.inline { display: inline-flex; gap: .4rem; align-items: center; margin-right: 1rem; }
input[type=text], input[type=password], input[type=number], select, textarea {
  display: block; width: 100%; padding: .45rem; font: inherit; margin-top: .2rem;
  border: 1px solid #8889; border-radius: 6px; background: transparent; color: inherit;
}
fieldset { border: 1px solid #8885; border-radius: 8px; display: grid; gap: .5rem;
  grid-template-columns: 2fr 1fr 1fr; }
fieldset label { margin: 0; }
.tabs { display: flex; gap: .25rem; margin: 1rem 0 0; }
.tab { border-radius: 6px 6px 0 0; }
.tab.active { background: var(--accent); color: #fff; }
.panel { border: 1px solid #8885; border-radius: 0 8px 8px 8px; padding: .5rem 1rem; }
button { font: inherit; padding: .5rem 1rem; border: 1px solid #8889; border-radius: 6px;
  background: transparent; color: inherit; cursor: pointer; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.link { border: 0; text-decoration: underline; opacity: .7; }
button:disabled { opacity: .5; cursor: wait; }
.actions { display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; }
#msg.error { color: #d33; }
#img { max-width: 100%; border: 1px solid #8885; background: #fff; }