:root {
    --bg: #0f172a; --bg2: #111c33; --card: rgba(255,255,255,.06); --line: rgba(255,255,255,.16);
    --ink: #f1f5f9; --muted: #a5b4c8; --accent: #2dd4bf; --accent-ink: #04201c; --field: rgba(255,255,255,.08);
    --warn: #fbbf24; --box: rgba(255,255,255,.04); color-scheme: dark;
}
@media (prefers-color-scheme: light) {
    :root { --bg: #f4f6fb; --bg2: #e9eef8; --card: #fff; --line: #d0d8ea; --ink: #14213d; --muted: #55637d;
            --accent: #0f766e; --accent-ink: #fff; --field: #f3f6fc; --warn: #b45309; --box: #f8fafd; color-scheme: light; }
}
:root[data-theme="light"] { --bg: #f4f6fb; --bg2: #e9eef8; --card: #fff; --line: #d0d8ea; --ink: #14213d; --muted: #55637d;
            --accent: #0f766e; --accent-ink: #fff; --field: #f3f6fc; --warn: #b45309; --box: #f8fafd; color-scheme: light; }
:root[data-theme="dark"] { --bg: #0f172a; --bg2: #111c33; --card: rgba(255,255,255,.06); --line: rgba(255,255,255,.16);
    --ink: #f1f5f9; --muted: #a5b4c8; --accent: #2dd4bf; --accent-ink: #04201c; --field: rgba(255,255,255,.08);
    --warn: #fbbf24; --box: rgba(255,255,255,.04); color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: clamp(1rem,4vw,2.5rem) 1rem 4rem; display: flex; justify-content: center;
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink);
       background: linear-gradient(180deg, var(--bg), var(--bg2)) fixed; touch-action: manipulation; }
.app { width: min(520px, 100%); min-width: 0; }
header { text-align: center; margin-bottom: 1.1rem; }
h1 { margin: 0; font-size: 1.9rem; letter-spacing: -.02em; }
.sub { margin: .3rem 0 0; color: var(--muted); font-size: 1rem; font-weight: 400; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem; margin-bottom: .9rem; min-width: 0; }
label, .big-label { display: block; margin: .9rem 0 .35rem; font-size: .9rem; font-weight: 600; color: var(--muted); }
.card > label:first-child { margin-top: 0; }
input[type=text], input[type=date], input[type=time], select { width: 100%; min-width: 0; min-height: 48px; padding: .6rem .7rem; font: inherit; font-size: 1.05rem; color: var(--ink);
       background: var(--field); border: 1px solid var(--line); border-radius: 12px; }
input:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hint { margin: .5rem 0 .6rem; color: var(--muted); font-size: .9rem; }
.range { margin: .4rem 0 .7rem; font-weight: 600; }
.weeknav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
.ghost { min-width: 0; min-height: 44px; padding: 0 .3rem; border-radius: 12px; border: 1px dashed var(--line); background: transparent; color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.weeknav .ghost { font-size: .82rem; }
.days { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .7rem; }
.day { border: 2px solid var(--line); border-radius: 14px; padding: .8rem; background: var(--box); min-width: 0; }
.day.off { opacity: .85; }
.dayhead { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.dayname { font-weight: 700; }
.dayres { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.dayres.dim { color: var(--muted); font-weight: 500; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.dgrid > div { min-width: 0; }
.dgrid .brk { grid-column: 1 / -1; }
.day label { margin: 0 0 .25rem; font-size: .8rem; }
.day input[type=text] { margin-top: .4rem; }
.daynote { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }
.daynote.warn { color: var(--warn); font-weight: 600; }
.clearday { margin-top: .3rem; }
.addmail { justify-self: start; min-height: 36px; padding: 0 .2rem; border: 0; background: none; color: var(--accent); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-align: left; }
.fill { border-top: 1px solid var(--line); padding-top: .6rem; }
.fillgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.fillgrid > div { min-width: 0; }
.fillgrid label { margin: 0 0 .25rem; font-size: .8rem; }
.fillbtns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .7rem; }
#opt input[type=text] { margin-top: .4rem; }
#opt label:first-child { margin-top: .5rem; }
.big { font-size: clamp(2.4rem, 12vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.big-label { margin: 0; }
.meta { margin: .2rem 0 0; color: var(--muted); }
.sum { margin: 1rem 0 0; display: grid; gap: .25rem; }
.sum div { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.sum dt { color: var(--muted); } .sum dd { margin: 0; font-weight: 600; }
.sum .total { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .3rem; } .sum .total dt { color: var(--ink); font-weight: 700; }
h3 { margin: 1.1rem 0 .4rem; font-size: 1rem; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lines li { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem .7rem; background: var(--field); border-radius: 10px; font-variant-numeric: tabular-nums; font-size: .93rem; }
.lines li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.lines li span:last-child { font-weight: 700; white-space: nowrap; }
.lines li.off { color: var(--muted); }
.note { margin: .7rem 0 0; padding: .6rem .8rem; border-radius: 12px; border-left: 4px solid var(--warn); background: var(--field); font-size: .9rem; }
.acts { display: grid; gap: .5rem; margin-top: 1rem; }
.primary { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; }
a.primary { display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; padding: .5rem; }
.primary.alt { background: transparent; color: var(--ink); border: 1px solid var(--accent); }
.msg { min-height: 1.4em; margin: .3rem 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
.newbill { margin: .3rem 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
.newbill .addmail { display: inline; }
.faq h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
details { border-top: 1px solid var(--line); padding: .6rem 0; }
summary { cursor: pointer; font-weight: 600; min-height: 32px; }
details p { margin: .4rem 0 0; color: var(--muted); }
footer { text-align: center; margin-top: 1.5rem; font-size: .9rem; } footer a { color: var(--muted); }
[hidden] { display: none !important; }

.back { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin: 0 0 .5rem; padding: 0 1rem 0 .8rem; border: 1px solid var(--line, rgba(127,127,127,.4)); border-radius: 999px; color: var(--muted, var(--mut, inherit)); font-size: .92rem; font-weight: 600; text-decoration: none; background: transparent; }
.back:hover { color: var(--ink, inherit); border-color: currentColor; }
.back:focus-visible { outline: 3px solid var(--accent, var(--acc, #fff)); outline-offset: 2px; }
@media (max-width: 360px) { .fillgrid { grid-template-columns: 1fr 1fr; } .fillgrid > div:last-child { grid-column: 1 / -1; } .weeknav .ghost { font-size: .75rem; } }

@media print {
    body { background: #fff; color: #000; display: block; padding: 0; }
    .back, .topbar, .inputs, .acts, .faq, footer, .hint, .newbill, .msg, header .sub { display: none !important; }
    .app { width: 100%; display: block; }
    .card { border: 0; background: none; }
    .big, .sum dd { color: #000; } .lines li { background: none; border-bottom: 1px solid #ccc; border-radius: 0; }
}

/* laptops and desktops: inputs on the left, the total on the right */
@media (min-width: 900px) {
    .app { width: min(1040px, 100%); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
    .app > * { grid-column: 1 / -1; }
    .app > .inputs { grid-column: 1; }
    .app > .result { grid-column: 2; grid-row: 3; margin-top: 0; }
    .app > .faq, .app > footer { width: min(760px, 100%); justify-self: center; }
    header h1 { font-size: 2.3rem; }
    .dgrid { grid-template-columns: 1fr 1fr 1.2fr; }
    .dgrid .brk { grid-column: auto; }
    .dgrid .brk input { margin-top: .4rem; }
}

.sub.eg { margin-top: .5rem; font-size: .95rem; color: var(--accent); }
.demo { margin: .6rem 0 0; width: 100%; }
.fill { border-top: 0; padding-top: 0; margin-bottom: 1rem; }