:root { --ink:#17304a; --blue:#235d80; --cream:#f7f4eb; --line:#c9d5dc; --muted:#52636b; font-family:Arial, sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; } body { margin:0; line-height:1.5; } a { color:#174f74; text-underline-offset:3px; } button, input { font:inherit; } button { cursor:pointer; padding:.65rem 1rem; border:1px solid var(--ink); border-radius:3px; background:var(--ink); color:white; font-weight:bold; } button:hover { background:var(--blue); } button.secondary { color:var(--ink); background:white; } button.secondary:hover { background:#e9f1f4; }
header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem max(1.25rem, calc((100% - 1050px)/2)); border-bottom:1px solid var(--line); } .brand { font-weight:bold; color:var(--ink); text-decoration:none; } nav { display:flex; flex-wrap:wrap; gap:1rem; font-size:.9rem; } main, footer { max-width:1050px; margin:auto; padding-left:1.25rem; padding-right:1.25rem; } .intro { max-width:720px; padding:4rem 0 2.5rem; } .eyebrow { margin:0; color:var(--blue); font-size:.75rem; font-weight:bold; letter-spacing:.12em; } h1 { margin:.3rem 0 .8rem; max-width:650px; font-family:Georgia, serif; font-size:clamp(2.4rem, 6vw, 4.5rem); line-height:1; letter-spacing:-.04em; } h2 { font-family:Georgia, serif; font-size:1.7rem; line-height:1.1; } h3 { margin:.2rem 0 .8rem; } .planner, .limits { padding:1.7rem 0; border-top:2px solid var(--ink); } form { display:grid; grid-template-columns:repeat(3, minmax(130px, 1fr)) auto; align-items:end; gap:1rem; } label { font-weight:bold; } input { display:block; width:100%; margin-top:.35rem; padding:.5rem; border:1px solid #8498a2; border-radius:3px; color:var(--ink); } input:focus, button:focus, a:focus { outline:3px solid #e2b75d; outline-offset:2px; } .hint, .card-note { color:var(--muted); font-size:.92rem; } .text-button { padding:0; color:#174f74; border:0; border-bottom:1px solid currentColor; border-radius:0; background:none; font-weight:normal; } .text-button:hover { background:none; color:var(--ink); } .status { margin:1rem 0; padding:.8rem 1rem; background:#e9f1f4; border-left:4px solid var(--blue); } .actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.7rem; padding:1rem 0; border-bottom:1px solid var(--line); } .result-summary { padding:1.8rem 0 .7rem; max-width:720px; } .schedule { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; } .round { padding:1rem; border:1px solid var(--line); background:#fafcfc; } .tables { display:grid; gap:.7rem; grid-template-columns:repeat(2, minmax(0, 1fr)); } .tables article { padding:.6rem; background:white; border-top:3px solid #83aac0; } .tables h4 { margin:0 0 .45rem; font-size:.9rem; } .tables p { display:flex; flex-wrap:wrap; gap:.3rem; margin:0; } .number { display:inline-flex; justify-content:center; align-items:center; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--ink); color:white; font-weight:bold; font-size:.85rem; } .cards { margin:2.2rem 0; padding-top:1.4rem; border-top:2px solid var(--ink); } .card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); gap:.75rem; } .card { min-height:130px; padding:.9rem; border:1px dashed #6d858f; break-inside:avoid; } .card h3 { font-family:Arial, sans-serif; font-size:1rem; } .card p { margin:.3rem 0; } .limits { max-width:720px; border-top:1px solid var(--line); } .notice { padding:1rem; background:#f9eadb; } footer { padding-top:1.5rem; padding-bottom:2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
@media (max-width:700px) { header { align-items:flex-start; flex-direction:column; } .intro { padding-top:2.5rem; } form { grid-template-columns:1fr; } }
@media print { @page { size:A4 portrait; margin:12mm; } header, .intro, .planner, .status, .actions, .limits, footer { display:none !important; } body { font-size:10pt; } main { max-width:none; padding:0; } .result-summary { padding:0 0 5mm; } .schedule { display:block; } .round { margin-bottom:5mm; break-inside:avoid; } .tables { grid-template-columns:repeat(3, 1fr); } .cards { margin-top:7mm; } .card-grid { grid-template-columns:repeat(3, 1fr); } .card { min-height:0; padding:5mm; } }