:root { color-scheme: light; --ink:#16201a; --muted:#657069; --paper:#f4f1e8; --surface:#fffdf7; --accent:#2f6849; --accent-dark:#204d35; --line:#d8d7ce; --warn:#9b3c2e; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); min-height:100vh; padding-bottom:5rem; }
button,input { font:inherit; }
select { font:inherit; border:1px solid var(--line); border-radius:.55rem; padding:.65rem; background:var(--surface); }
a { color:inherit; }
.site-header { padding:1rem max(1rem, calc((100% - 64rem)/2)); background:var(--ink); color:white; }
.brand { display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; font-size:.78rem; font-weight:750; letter-spacing:.05em; text-transform:uppercase; line-height:1.2; }
.brand-mark { display:grid; place-items:center; width:2.6rem; height:2.6rem; border:1px solid #9bb5a5; border-radius:50%; font-size:.72rem; }
main { width:min(100% - 2rem,64rem); margin:0 auto; padding:2rem 0; }
.hero { margin-bottom:1.5rem; }
.hero-with-logo { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.hero-copy,.card-heading-copy { min-width:0; }
.eyebrow { color:var(--accent); text-transform:uppercase; font-weight:800; letter-spacing:.12em; font-size:.75rem; }
h1 { font-size:clamp(2rem,7vw,4rem); line-height:.95; max-width:13ch; margin:.45rem 0 .8rem; letter-spacing:-.045em; }
h2,h3 { line-height:1.15; }
.muted { color:var(--muted); }
.toolbar { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.25rem 0; }
input[type="search"] { flex:1; min-width:13rem; border:1px solid var(--line); border-radius:.6rem; padding:.8rem 1rem; background:var(--surface); }
.button { border:0; border-radius:.6rem; padding:.75rem 1rem; background:var(--accent); color:white; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; }
.button:hover { background:var(--accent-dark); }
.button.secondary { background:transparent; color:var(--ink); border:1px solid var(--line); }
.button.danger { background:var(--warn); }
.button:disabled { opacity:.45; cursor:not-allowed; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:.8rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:.8rem; padding:1rem; box-shadow:0 2px 12px #17231d0b; }
.card h2,.card h3 { margin:.25rem 0 .5rem; }
.card-heading { min-width:0; }
.card-heading-with-logo { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.entity-image { width:100%; max-height:28rem; object-fit:contain; background:#ece9df; border-radius:.7rem; margin:.75rem 0; }
.entity-logo { flex:none; width:5rem; height:5rem; object-fit:cover; border:1px solid var(--line); border-radius:.75rem; background:#ece9df; }
.card-link { display:block; text-decoration:none; transition:transform .15s,border-color .15s; }
.card-link:hover { transform:translateY(-2px); border-color:#8ba493; }
.tag { display:inline-block; font-size:.72rem; font-weight:800; color:var(--accent); letter-spacing:.06em; }
.detail { max-width:46rem; }
.detail section { margin:2rem 0; }
.prescription { border-left:4px solid var(--accent); padding-left:1rem; }
.guided { max-width:50rem; margin:auto; }
.timer { font-variant-numeric:tabular-nums; font-size:clamp(2.8rem,12vw,5rem); font-weight:800; letter-spacing:-.05em; margin:.5rem 0; }
.detail li { margin:.6rem 0; line-height:1.55; }
.session-item { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; }
.session-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.status { font-size:.78rem; font-weight:800; padding:.3rem .55rem; border-radius:1rem; background:#e5e8e4; }
.status.completed { background:#d8eadf; color:#205338; }
.status.skipped { background:#eee2df; color:#793327; }
.empty,.error { border:1px dashed var(--line); border-radius:.8rem; padding:2rem; text-align:center; color:var(--muted); }
.error { border-color:#c98c82; color:#712c22; }
.bottom-nav { position:fixed; inset:auto 0 0; display:grid; grid-template-columns:repeat(6,1fr); background:#fffdf7f5; border-top:1px solid var(--line); backdrop-filter:blur(12px); z-index:3; }
.type-filters { display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0; }
.type-filter { display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .7rem; border:1px solid var(--line); border-radius:2rem; background:var(--surface); cursor:pointer; }
.type-filter:has(input:checked) { color:white; background:var(--accent); border-color:var(--accent); }
.type-filter input { accent-color:var(--accent); }
.favorite-active{background:#b66b2f}.result-type{text-transform:uppercase;font-size:.7rem;letter-spacing:.08em;color:var(--muted)}
.choices { display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem;margin:1rem 0}.choice{display:flex;gap:.5rem;align-items:flex-start;padding:.7rem;border:1px solid var(--line);border-radius:.6rem;background:var(--surface)}.notice{border-left:4px solid #b26a29;background:#fff3df;padding:1rem;border-radius:.4rem}.compat-incompatible{color:#8a3b2d}.compat-compatible{color:var(--accent)}
.bottom-nav a { padding:1rem .5rem; text-align:center; text-decoration:none; font-size:.8rem; font-weight:750; }
.bottom-nav a.active { color:var(--accent); box-shadow:inset 0 3px var(--accent); }
.toast { position:fixed; left:50%; bottom:5rem; transform:translate(-50%,1rem); background:var(--ink); color:white; border-radius:.5rem; padding:.7rem 1rem; opacity:0; pointer-events:none; transition:.2s; z-index:4; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.update-notice { position:fixed; right:1rem; bottom:5.5rem; display:flex; align-items:center; gap:.75rem; padding:.7rem .8rem; border:1px solid #8ba493; border-radius:.65rem; background:var(--surface); box-shadow:0 5px 18px #17231d24; z-index:4; }
.update-notice[hidden] { display:none; }
.update-notice button { border:0; border-radius:.45rem; padding:.5rem .7rem; background:var(--accent); color:white; font-weight:700; cursor:pointer; }
@media (min-width:48rem) { .update-notice{bottom:2rem} }
@media (min-width:48rem) { body{padding-bottom:0}.bottom-nav{position:static;display:flex;justify-content:center}.bottom-nav a{min-width:9rem}.toast{bottom:2rem} }