:root { color-scheme: light; --ink:#162238; --muted:#50617a; --blue:#1d4ed8; --line:#c8d3e4; --bg:#f5f8fc; }
* { box-sizing:border-box; }
html { font-family:system-ui,-apple-system,Segoe UI,sans-serif; line-height:1.5; }
body { margin:0; color:var(--ink); background:var(--bg); }
.wrap { width:min(100% - 2rem, 72rem); margin-inline:auto; }
.skip { position:absolute; left:-10000px; top:0; padding:.5rem 1rem; background:white; z-index:10; }
.skip:focus { left:1rem; }
.top { background:white; border-bottom:1px solid var(--line); }
.top-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4rem; }
.brand { font-weight:800; letter-spacing:.03em; text-decoration:none; color:var(--ink); }
a { color:var(--blue); }
a:focus-visible,button:focus-visible,textarea:focus-visible { outline:3px solid #d97706; outline-offset:3px; }
.hero { padding:2.5rem 0 1rem; max-width:54rem; }
.eyebrow { text-transform:uppercase; color:var(--muted); font-size:.82rem; font-weight:700; letter-spacing:.08em; }
h1 { font-size:clamp(2.3rem,7vw,4rem); line-height:1.05; margin:.2rem 0 1rem; }
h2 { font-size:1.5rem; margin-top:0; }
.notice { border-left:4px solid var(--blue); background:#e8efff; padding:1rem; }
section { background:white; border:1px solid var(--line); border-radius:.6rem; padding:1.3rem; margin:1.5rem 0; }
label { display:block; font-weight:700; margin-bottom:.4rem; }
textarea { width:100%; min-height:7rem; border:1px solid #899bb3; border-radius:.35rem; padding:.7rem; font:inherit; resize:vertical; }
button { background:var(--blue); color:white; border:0; border-radius:.35rem; padding:.65rem 1rem; font:inherit; font-weight:700; cursor:pointer; }
button:hover { background:#153ea9; }
button:disabled { opacity:.55; cursor:not-allowed; }
button.secondary { background:white; color:var(--blue); border:1px solid var(--blue); }
.hint { color:var(--muted); font-size:.9rem; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cards { display:grid; gap:1rem; }
.card { border:1px solid var(--line); border-radius:.5rem; padding:1rem; overflow-wrap:anywhere; }
.card h3 { margin:.1rem 0 .4rem; }
.meta { color:var(--muted); font-size:.9rem; }
.status { display:inline-block; border-radius:1rem; background:#e8efff; color:#163b92; padding:.1rem .55rem; font-weight:700; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.reply { white-space:pre-wrap; background:var(--bg); padding:.75rem; }
.footer { color:var(--muted); padding:2rem 0; }
@media (max-width:38rem) { .top-row { align-items:flex-start; flex-direction:column; padding:.8rem 0; } section { padding:1rem; } button { width:100%; } .section-head button { width:auto; } }