:root {
  --ink: #111; --muted: #6b6b70; --line: rgba(0,0,0,.10);
  --card: rgba(255,255,255,.85); --field: rgba(118,118,128,.10);
  --page: #f2f1ee; --accent: #0091DA; --red: #c91c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f2; --muted: #a1a1a6; --line: rgba(255,255,255,.12);
    --card: rgba(30,30,32,.78); --field: rgba(118,118,128,.22);
    --page: #0e0e10; --accent: #4db8ec; --red: #ff6b6b;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--page);
}
.screen {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: 24px;
}
.card {
  width: 100%; max-width: 420px; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12); padding: 36px 28px; text-align: center;
}
.card.wide { max-width: 640px; }
.kicker {
  font-family: Georgia, 'Times New Roman', Times, serif; font-size: 40px; font-weight: 700;
  letter-spacing: 0.2px; color: var(--accent); line-height: 1.1;
}
.title { font-size: 15px; font-weight: 600; color: var(--muted); margin: 8px 0 24px; }
.intro { font-size: 13px; color: var(--muted); line-height: 1.6; text-align: left; margin: 0 0 24px; }
.intro strong { color: var(--ink); }
form { margin: 0; text-align: left; }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
input, select, textarea {
  display: block; width: 100%; height: 46px; padding: 0 16px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--field); border: 1px solid transparent; border-radius: 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { height: auto; padding: 12px 16px; resize: vertical; font-family: inherit; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tag {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: var(--field); font-size: 14px; cursor: pointer; user-select: none;
}
.tag input { width: auto; height: auto; display: inline; }
.categories { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.category {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--field);
}
.category summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.category .subs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.category .subs .tag { background: var(--card); }
.category .sub-label { font-size: 12px; color: var(--muted); margin-top: 16px; }
.network-inputs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.network-inputs input { height: 42px; font-size: 14px; background: var(--card); }
.category input.note {
  height: 40px; margin-top: 14px; font-size: 14px; background: var(--card);
}
select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px; background-repeat: no-repeat;
}
button {
  display: block; width: 100%; height: 46px; margin-top: 20px; font: inherit; font-size: 15px;
  font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 12px; cursor: pointer;
}
.link-row { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
.link-row a { color: var(--accent); text-decoration: none; }
.error { color: var(--red); font-size: 13px; margin: -8px 0 14px; text-align: center; }
.dashboard { max-width: 720px; margin: 0 auto; padding: 48px 24px; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--field); font-size: 13px; margin: 0 6px 6px 0; }
.logout { font-size: 13px; color: var(--muted); margin-top: 32px; }

.tabs input { display: none; }
.tabbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tabbar label {
  padding: 9px 18px; border-radius: 999px; background: var(--field);
  font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
}
.panels .panel { display: none; }
.panel h2 { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 24px; margin: 0 0 12px; }
.empty-note { color: var(--muted); font-style: italic; margin-top: 18px; font-size: 14px; }