:root { color-scheme: light; --ink:#17202a; --muted:#627082; --line:#d6dde5; --bg:#f7f8fa; --panel:#fff; --accent:#0f766e; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
main { max-width:1080px; margin:0 auto; padding:28px 22px 48px; }
main.narrow { max-width:460px; padding-top:12vh; }
h1 { font-size:26px; line-height:1.2; margin:0 0 18px; font-weight:650; }
h2 { font-size:17px; margin:24px 0 10px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--panel); }
.brand { font-weight:700; color:var(--ink); }
.account { display:flex; gap:12px; align-items:center; color:var(--muted); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; }
.page-instructions { margin:0 0 26px; color:var(--muted); }
.page-instructions p { margin:0; }
.summary { margin-bottom:24px; }
.summary p { color:var(--muted); margin:0; }
.summary .read-only-note { margin-top:14px; }
label { display:block; font-weight:600; margin-bottom:6px; }
input, select, textarea { width:100%; min-height:40px; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font:inherit; background:#fff; }
textarea { min-height:220px; resize:vertical; }
.short-textarea { min-height:96px; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 14px; margin-bottom:14px; }
.input-action-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; align-items:center; }
.input-action-row button { margin:0; background:#edf2f4; color:var(--ink); }
.checkline { display:flex; align-items:center; gap:8px; margin-top:12px; }
.checkline input { width:auto; min-height:0; }
button { min-height:38px; border:0; border-radius:6px; padding:8px 13px; background:var(--accent); color:#fff; font:inherit; font-weight:650; cursor:pointer; }
button:disabled { opacity:.65; cursor:progress; }
.button-link { display:inline-flex; align-items:center; min-height:38px; border-radius:6px; padding:8px 13px; background:#edf2f4; color:var(--ink); font-weight:650; }
.actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.actions form button { margin:0; }
.compact-action { margin:12px 0; }
.compact-action button { margin:0; background:#edf2f4; color:var(--ink); }
.muted { color:var(--muted); }
form button { margin-top:12px; }
.topbar form button { margin:0; background:#edf2f4; color:var(--ink); }
.inline-form { display:grid; grid-template-columns:minmax(160px,1fr) auto; gap:8px; align-items:center; }
.inline-form button { margin:0; }
.error { color:#b42318; margin:10px 0 0; }
table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); }
th, td { text-align:left; border-bottom:1px solid var(--line); padding:10px 12px; vertical-align:top; }
th { color:var(--muted); font-size:13px; font-weight:650; }
tr:last-child td { border-bottom:0; }
.metadata { display:grid; grid-template-columns:minmax(120px, 180px) minmax(0, 1fr); gap:8px 14px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; }
dt { color:var(--muted); font-weight:650; }
dd { margin:0; overflow-wrap:anywhere; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; }
.email-html-body { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; overflow-wrap:anywhere; }
.email-html-body p:first-child { margin-top:0; }
.email-html-body p:last-child, .email-html-body ul:last-child, .email-html-body ol:last-child { margin-bottom:0; }
@media (max-width:720px) {
  .topbar, .account { align-items:flex-start; flex-direction:column; }
  table, thead, tbody, tr, th, td { display:block; }
  thead { display:none; }
  tr { border-bottom:1px solid var(--line); }
  td { border:0; padding:8px 12px; }
  .metadata { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .actions { align-items:flex-start; flex-direction:column; }
}