:root { color-scheme: light; --ink:#172033; --muted:#65708a; --bg:#f3f6fb; --card:#fff; --line:#dce3ee; --brand:#0c7595; --danger:#a62929; }
* { box-sizing:border-box; } body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand); } .shell { max-width:1120px; margin:auto; padding:24px; } header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; } .brand { color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.04em; font-size:1.4rem; } nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 8px 26px rgba(19,34,60,.05); } .narrow { max-width:440px; margin:8vh auto; } h1,h2,h3 { line-height:1.2; } h1 { margin-top:0; } .muted { color:var(--muted); } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; } .app-section + .app-section { margin-top:30px; } .section-heading { margin:0 0 12px; font-size:1.2rem; } .app-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:14px; } .app { display:flex; flex-direction:column; gap:10px; } .app h2 { margin:0; font-size:1.05rem; } .app-link { aspect-ratio:1; padding:16px; color:var(--ink); text-decoration:none; cursor:pointer; transition:transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; } .app-link:hover { transform:scale(1.025); background:#eef9fb; border-color:#9fd2df; box-shadow:0 14px 32px rgba(12,117,149,.14); } .app-link:focus-visible { outline:3px solid #2f9fbb; outline-offset:3px; } .tag { display:inline-block; width:max-content; font-size:.8rem; font-weight:700; padding:3px 8px; border-radius:99px; background:#e7f4f7; color:#075d75; }
label { display:block; font-weight:650; margin:14px 0 5px; } input,select,textarea,button { font:inherit; } input,select,textarea { width:100%; padding:10px 12px; border:1px solid #bfc9d8; border-radius:9px; background:#fff; } textarea { min-height:88px; resize:vertical; } button,.button { display:inline-block; border:0; border-radius:9px; padding:10px 14px; background:var(--brand); color:#fff; cursor:pointer; text-decoration:none; font-weight:700; } .secondary { background:#e8edf5; color:var(--ink); } .danger { background:var(--danger); } .inline { display:inline; } .notice { padding:11px 13px; border-radius:9px; background:#fff4d6; color:#704e00; margin:14px 0; } .error { background:#fde8e8; color:#8e2020; }
table { width:100%; border-collapse:collapse; } th,td { border-bottom:1px solid var(--line); padding:11px 8px; text-align:left; vertical-align:top; } th { color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; } .actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .split { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .check { display:flex; gap:9px; align-items:center; font-weight:500; margin:10px 0; } .check input { width:auto; }
@media (prefers-reduced-motion:reduce) { .app-link { transition:none; } .app-link:hover { transform:none; } }
@media (max-width:700px) { .shell { padding:16px; } header { align-items:flex-start; flex-direction:column; } .split { grid-template-columns:1fr; } table { display:block; overflow-x:auto; } }