:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #f9fafb;
  --text: #18202a;
  --muted: #667085;
  --border: #d9dee7;
  --accent: #f5c542;
  --accent-strong: #111827;
  --danger: #b42318;
  --ok: #067647;
  --warn: #b54708;
  --shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, #fff7d6 0, transparent 32rem), var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
body.auth-page { display: grid; place-items: center; padding: 1rem; }
h1, h2, h3, p { margin: 0; }
code { border: 1px solid var(--border); border-radius: .4rem; background: #fff; padding: .08rem .28rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
h1 { font-size: clamp(1.75rem, 4vw, 3rem); letter-spacing: -0.04em; line-height: 1.05; }
h2 { font-size: 1.05rem; letter-spacing: -0.01em; }
h3 { font-size: 0.96rem; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 2rem clamp(1rem, 4vw, 3rem) 1rem; }
.subhead { margin-top: .65rem; max-width: 52rem; color: var(--muted); font-size: 1rem; }
.eyebrow { color: #8a6a00; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.status-stack { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
.userbar { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0 clamp(1rem, 4vw, 3rem) 3rem; }
.status-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.status-card { background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: 1rem; padding: .85rem; display: grid; gap: .2rem; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06); }
.status-card strong { font-size: 1rem; }
.status-card small { color: var(--muted); }
.status-card.ok { border-color: #abefc6; background: #f4fef7; }
.status-card.warn { border-color: #fedf89; background: #fffbeb; }
.status-card.error { border-color: #f4b8b1; background: #fff7f6; }
.status-label { color: #8a6a00; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.panel { background: rgba(255,255,255,.92); border: 1px solid rgba(217,222,231,.9); border-radius: 1.25rem; box-shadow: var(--shadow); padding: 1rem; backdrop-filter: blur(14px); }
.pinned { position: sticky; top: .75rem; z-index: 5; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.section-head.compact { margin-bottom: .65rem; }
.grid { display: grid; gap: .75rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: .35rem; color: var(--muted); font-size: .82rem; font-weight: 600; }
.check-row { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .86rem; font-weight: 700; }
.check-row input { width: auto; }
input, textarea, select { width: 100%; border: 1px solid var(--border); border-radius: .75rem; padding: .72rem .8rem; background: #fff; color: var(--text); font: inherit; outline: none; }
.check-row input { width: 1rem; height: 1rem; padding: 0; }
textarea { resize: vertical; min-height: 6.5rem; }
input:focus, textarea:focus, select:focus { border-color: #c79a00; box-shadow: 0 0 0 3px rgba(245,197,66,.25); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.actions.inline { margin-top: 0; }
button, .button-link { border: 0; border-radius: .75rem; padding: .72rem 1rem; cursor: pointer; background: var(--accent-strong); color: #fff; font-weight: 700; font: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button:hover, .button-link:hover { transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
button.secondary, .button-link.secondary { background: #fff6d8; color: #5f4500; border: 1px solid #ead07b; }
button.ghost { background: var(--surface-soft); color: var(--text); border: 1px solid var(--border); }
button.danger { background: #fff1f0; color: var(--danger); border: 1px solid #f4b8b1; }
.pill { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: .45rem .75rem; color: var(--muted); white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: #abefc6; background: #ecfdf3; }
.pill.warn { color: var(--warn); border-color: #fedf89; background: #fffaeb; }
.pill.muted { color: var(--muted); }
.hint { color: var(--muted); margin-bottom: .85rem; }
.hint.strong { color: #8a5300; }
.result, .list { margin-top: .75rem; }
.result { border: 1px solid var(--border); border-radius: .9rem; background: var(--surface-soft); padding: .85rem; overflow: auto; }
.empty { color: var(--muted); }
.error { color: var(--danger); background: #fff1f0; border-color: #f4b8b1; }
.state-card { border: 1px solid var(--border); border-radius: .9rem; background: var(--surface-soft); padding: .85rem; color: var(--muted); }
.state-card.ok { color: var(--ok); background: #ecfdf3; border-color: #abefc6; }
.state-card.warn { color: var(--warn); background: #fffaeb; border-color: #fedf89; }
.login-card { width: min(100%, 28rem); }
.login-card h1 { margin-top: .25rem; }
.login-form { display: grid; gap: .85rem; margin-top: 1.25rem; }
.login-form .state-card:empty { display: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; background: var(--surface-soft); }
td code { white-space: nowrap; }
.toast { border-radius: .8rem; padding: .7rem .85rem; margin: .35rem 0 .75rem; font-weight: 700; }
.toast.hidden { display: none; }
.toast.info { color: #344054; background: #f2f4f7; border: 1px solid #eaecf0; }
.toast.ok { color: var(--ok); background: #ecfdf3; border: 1px solid #abefc6; }
.toast.warn { color: var(--warn); background: #fffaeb; border: 1px solid #fedf89; }
.toast.error { color: var(--danger); background: #fff1f0; border: 1px solid #f4b8b1; }
.item { border: 1px solid var(--border); border-radius: .9rem; padding: .85rem; background: #fff; margin-top: .65rem; display: grid; gap: .5rem; }
.item-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.meta { color: var(--muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .18rem .5rem; font-size: .75rem; font-weight: 700; background: #eef4ff; color: #3538cd; }
.badge.ok { background: #ecfdf3; color: var(--ok); }
.badge.warn { background: #fffaeb; color: var(--warn); }
.card-password-result { border: 1px solid var(--border); border-radius: .85rem; padding: .8rem; background: var(--surface-soft); color: var(--muted); }
.card-password-result[hidden] { display: none; }
.card-password-result.success { border-color: #abefc6; background: #f4fef7; color: var(--text); }
.card-password-result.warn, .card-password-result.loading { border-color: #fedf89; background: #fffbeb; color: var(--warn); }
.card-password-head { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .65rem; }
.card-password-head strong { color: var(--ok); }
.card-password-head span { color: var(--muted); font-size: .82rem; }
.card-password-list { display: grid; gap: .55rem; }
.secret-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .55rem; align-items: end; padding: .65rem; border: 1px solid #d0e8d8; border-radius: .75rem; background: #fff; }
.secret-row code { display: block; margin-top: .2rem; overflow-wrap: anywhere; }
.secret-label { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.empty-state { border: 1px dashed var(--border); border-radius: 1rem; padding: 2rem 1rem; text-align: center; color: var(--muted); background: #fff; }
.empty-state h3 { color: var(--text); margin-bottom: .25rem; }
.success-result { background: #ecfdf3; border-color: #abefc6; }
.success-head { display: flex; flex-direction: column; gap: .15rem; color: var(--ok); margin-bottom: .65rem; }
.success-head span { color: var(--muted); font-size: .85rem; }
.qr-wrap { display: grid; justify-items: center; gap: .4rem; margin: .75rem 0; padding: .85rem; border: 1px solid #abefc6; border-radius: .9rem; background: #fff; }
.h5-qr { width: min(220px, 70vw); height: auto; display: block; }
.qr-caption { color: var(--muted); font-size: .85rem; font-weight: 700; }
.final-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; }
.final-url-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.advanced { margin-top: 1rem; }
details.advanced, details.modes { border-style: solid; }
summary { cursor: pointer; font-weight: 800; color: var(--text); }
.advanced-body { margin-top: 1rem; display: grid; gap: 1rem; }
.advanced-body.split { grid-template-columns: 1fr 1fr; }
.sensitive-grid input, .sensitive-grid textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-size: .82rem; }
@media (max-width: 900px) {
  .topbar { flex-direction: column; }
  .status-stack { align-items: flex-start; }
  .status-panel { grid-template-columns: 1fr; }
  .grid.two, .advanced-body.split { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .final-url-row { grid-template-columns: 1fr; }
  .secret-row { grid-template-columns: 1fr; }
  .pinned { position: static; }
}

details:not([open]) > .advanced-body { display: none !important; }