:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --ink: #1f2430;
    --ink-soft: #5b6472;
    --line: #e2e5ea;
    --brand: #2b6cb0;
    --brand-ink: #ffffff;
    --danger: #c53030;
    --danger-bg: #fdeaea;
    --ok: #276749;
    --ok-bg: #e7f5ec;
    --info: #2b4c7e;
    --info-bg: #e8eefb;
    --radius: 10px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; }
a { color: var(--brand); }
h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
small { color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ---- buttons / forms ---- */
.btn {
    display: inline-block; border: 1px solid transparent; border-radius: var(--radius);
    padding: .6rem 1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn-sm { padding: .35rem .6rem; font-size: .85rem; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-secondary { background: #edf2f7; color: var(--ink); border-color: var(--line); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-primary:hover { filter: brightness(1.05); }

.stack { display: flex; flex-direction: column; gap: .9rem; }
.stack label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; }
.stack input, .stack select, .stack textarea {
    font: inherit; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink);
}
.stack input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.code-input { letter-spacing: .35em; font-size: 1.2rem; text-align: center; }

/* ---- flash ---- */
.flash { border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; font-size: .9rem; }
.flash ul { margin: 0; padding-left: 1.1rem; }
.flash-error { background: var(--danger-bg); color: var(--danger); }
.flash-success { background: var(--ok-bg); color: var(--ok); }
.flash-info { background: var(--info-bg); color: var(--info); }

/* ---- auth card ---- */
.auth-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 2rem; width: 100%; max-width: 26rem; box-shadow: 0 6px 30px rgba(20,30,50,.06);
}
.auth-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: 1.2rem; }
.auth-logo { font-size: 1.4rem; }
.auth-title { margin-top: 0; }
.auth-sub { color: var(--ink-soft); font-size: .92rem; margin-top: 0; }
.auth-alt { margin-top: 1.2rem; font-size: .9rem; }
.auth-alt summary { cursor: pointer; color: var(--brand); }
.auth-alt .stack { margin-top: .8rem; }
.auth-cancel { margin-top: 1rem; text-align: center; }

.qr-wrap { background: #fff; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; width: max-content; margin: 1rem auto; }
.qr-wrap svg { display: block; width: 220px; height: 220px; }
.secret-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; background: #f0f2f5; padding: .5rem .7rem; border-radius: 8px; word-break: break-all; }

.recovery-grid { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.recovery-grid li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f0f2f5; padding: .5rem; border-radius: 6px; text-align: center; letter-spacing: .05em; }

/* ---- app shell ---- */
.topbar { display: flex; align-items: center; gap: 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line); padding: .6rem 1.2rem; flex-wrap: wrap; }
.topbar-brand { font-weight: 700; text-decoration: none; color: var(--ink); }
.topnav { display: flex; gap: .3rem; flex: 1; flex-wrap: wrap; }
.topnav a { text-decoration: none; color: var(--ink-soft); padding: .35rem .65rem; border-radius: 8px; font-size: .9rem; font-weight: 600; }
.topnav a:hover { background: #eef1f5; }
.topnav a.active { background: var(--brand); color: #fff; }
.topbar-logout { display: flex; align-items: center; gap: .6rem; }
.topbar-user { font-size: .85rem; color: var(--ink-soft); }
.app-main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1.2rem; }
.page-head { margin-bottom: 1.2rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.2rem; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; text-align: center; }
.stat-num { display: block; font-size: 1.8rem; font-weight: 700; }
.stat-label { color: var(--ink-soft); font-size: .85rem; }

/* ---- clients module ---- */
.row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.head-actions, .form-actions { display: flex; gap: .5rem; align-items: center; }
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filter-bar input[type=search], .filter-bar select { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.filter-bar input[type=search] { min-width: 14rem; flex: 1; }
.chk { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .9rem; }

.card.no-pad { padding: 0; overflow: hidden; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: #fafbfc; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; }
table.data .empty { text-align: center; color: var(--ink-soft); padding: 1.4rem; }
.small { font-size: .82rem; }

.pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: #eef1f5; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.pill-active { background: var(--ok-bg); color: var(--ok); }
.pill-prospect { background: var(--info-bg); color: var(--info); }
.pill-inactive, .pill-archived { background: #ececec; color: #777; }

.cols { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 52rem) { .cols { grid-template-columns: 2fr 1fr; } }

.facts { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: 0; }
.facts > div { display: grid; grid-template-columns: 9rem 1fr; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-soft); font-size: .85rem; margin: 0; }
.facts dd { margin: 0; }
.summary-note { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.tfn-mask { font-family: ui-monospace, Menlo, monospace; letter-spacing: .1em; }

.form-grid fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: 0 0 1rem; }
.form-grid legend { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 0 .4rem; }
.form-grid label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .88rem; margin-bottom: .8rem; }
.form-grid input, .form-grid select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-grid .three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .8rem; }
@media (max-width: 40rem) { .form-grid .two, .form-grid .three { grid-template-columns: 1fr; } }
.opt { font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.field-err { color: var(--danger); font-size: .8rem; font-weight: 500; }
.tfn-edit { background: #fafbfc; border: 1px dashed var(--line); border-radius: 8px; padding: .7rem; margin-bottom: .8rem; }
.tfn-state { font-size: .82rem; color: var(--ink-soft); }

.minilist, .notelist { list-style: none; padding: 0; margin: 0; }
.minilist li { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.minilist li:last-child { border-bottom: 0; }
.notelist li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.notelist li.pinned { background: #fffdf3; }
.note-body { white-space: pre-wrap; }
.note-meta { font-size: .78rem; color: var(--ink-soft); margin-top: .3rem; display: flex; gap: .4rem; align-items: center; }
.note-add textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; width: 100%; background: var(--surface); color: var(--ink); }
.add-more { margin-top: .8rem; font-size: .88rem; }
.add-more summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.add-more .stack { margin-top: .6rem; }
.inline { display: inline; }
.stack.narrow { max-width: 22rem; }
.linkbtn { background: none; border: 0; color: var(--danger); cursor: pointer; font: inherit; font-size: .78rem; padding: 0; text-decoration: underline; }

/* ---- jobs + settings ---- */
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--brand); }
.stat-num.bad { color: var(--danger); }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #cbd2dc; margin-right: .4rem; vertical-align: middle; }
.due-over { color: var(--danger); font-weight: 600; }

.joblist, .checklist, .timeline { list-style: none; padding: 0; margin: 0; }
.joblist li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.joblist li:last-child { border-bottom: 0; }
.joblist li a { font-weight: 600; }

.status-line { display: flex; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.status-line select { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }

.checklist li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist li.done .ci-label { text-decoration: line-through; color: var(--ink-soft); }
.ci-label { flex: 1; }
.checkbtn { background: none; border: 0; cursor: pointer; font-size: 1.1rem; padding: 0; line-height: 1; color: var(--brand); }
.row-add { display: flex; gap: .5rem; margin-top: .7rem; }
.row-add input { flex: 1; font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }

.timeline li { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.timeline li:last-child { border-bottom: 0; }

.setting-links { list-style: none; padding: 0; margin: 0; }
.setting-links li { border-bottom: 1px solid var(--line); }
.setting-links li:last-child { border-bottom: 0; }
.setting-links a { display: flex; flex-direction: column; gap: .1rem; padding: .8rem 0; text-decoration: none; color: var(--ink); }
.setting-links a:hover strong { color: var(--brand); }
.setting-links .muted { font-size: .85rem; }

.cfg-head, .cfg-row { display: grid; gap: .5rem; align-items: center; }
.cfg-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: .4rem 0; border-bottom: 1px solid var(--line); }
.cfg-row { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.cfg-jt { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr .7fr .6fr auto; }
.cfg-js { grid-template-columns: 2fr .7fr .8fr .9fr .8fr 1fr auto; }
.cfg-row input, .cfg-row select { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.cfg-row .chk { justify-content: center; }
.cfg-actions { white-space: nowrap; }
.cfg-del { padding: .1rem 0 .6rem; border-bottom: 1px solid var(--line); }
.cfg-new { border-bottom: 0; padding-top: .8rem; }
@media (max-width: 60rem) {
    .cfg-head { display: none; }
    .cfg-row { grid-template-columns: 1fr 1fr; }
    .cfg-actions { grid-column: 1 / -1; }
}
.form-grid.tight fieldset { margin-bottom: .6rem; }
.form-grid.tight label { margin-bottom: .5rem; }
.chk.end { align-self: end; }

/* ---- time + invoicing ---- */
.stat-num.warn { color: #b7791f; }
table.data.compact th, table.data.compact td { padding: .4rem .6rem; font-size: .88rem; }
.timer-running { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-left: 3px solid var(--brand); flex-wrap: wrap; }
.timer-start { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.timer-start select, .timer-start input { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.timer-start input[type=text] { flex: 1; min-width: 12rem; }
.line-add, .pay-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.line-add select, .line-add input, .pay-add input { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); }
.line-add input[type=text]:not(.w-qty):not(.w-amt) { flex: 1; min-width: 10rem; }
.w-qty { width: 4rem; } .w-amt { width: 6rem; }
.pay-add input { min-width: 6rem; }
.cfg-rate { grid-template-columns: 2fr 1fr .8rem 4rem auto; }
@media (max-width: 60rem) { .cfg-rate { grid-template-columns: 1fr 1fr; } }
.linkbtn.edit { text-decoration: underline; margin-right: .4rem; }

.pill-draft { background: #ececec; color: #666; }
.pill-issued { background: var(--info-bg); color: var(--info); }
.pill-part_paid { background: #fdf0d5; color: #9a6b00; }
.pill-paid { background: var(--ok-bg); color: var(--ok); }
.pill-void { background: #f3d9d9; color: #a33; text-decoration: line-through; }

@media (prefers-color-scheme: dark) {
    table.data thead th { background: #20242c; }
    .tfn-edit, .notelist li.pinned { background: #191c22; }
    :root {
        --bg: #14171c; --surface: #1c2027; --ink: #e7e9ee; --ink-soft: #9aa3b2;
        --line: #2c313b; --brand: #63a4e0; --brand-ink: #0b1220;
        --danger-bg: #3a1f1f; --ok-bg: #17301f; --info-bg: #1b2740;
    }
    .stack input, .stack select, .stack textarea { background: #12151a; color: var(--ink); }
    .secret-key, .recovery-grid li { background: #12151a; }
    .topnav a:hover { background: #262b34; }
}

.doc-bad { color: var(--ink-soft); text-decoration: line-through; }

/* ---- calendar ---- */
.cal-month { margin: 0 0 .6rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 1.4rem; }
.cal-dow { background: var(--surface); padding: .4rem .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 700; text-align: center; }
.cal-cell { background: var(--surface); min-height: 6.5rem; padding: .3rem; display: flex; flex-direction: column; gap: .15rem; }
.cal-cell.cal-out { background: #f7f8fa; }
.cal-cell.cal-today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-dnum { font-size: .8rem; color: var(--ink-soft); font-weight: 700; }
.cal-out .cal-dnum { opacity: .5; }
.cal-item { display: block; font-size: .72rem; line-height: 1.25; padding: .1rem .3rem; border-radius: 4px; text-decoration: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-job   { background: var(--info-bg); color: var(--info); }
.cal-ato   { background: #fdecec; color: #b4232b; font-weight: 700; }
.cal-event { background: #eef7ee; color: #2f6f3f; }
.cal-done  { opacity: .5; text-decoration: line-through; }
.cal-evacts { display: inline; }
.cal-evacts .linkbtn { text-decoration: none; padding: 0 .1rem; }
.cal-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-soft); margin: 0; align-items: center; }
.cal-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: middle; margin-right: .25rem; }
@media (max-width: 46rem) {
    .cal-cell { min-height: 4.5rem; }
    .cal-item { font-size: .65rem; }
}
@media (prefers-color-scheme: dark) {
    .cal-cell.cal-out { background: #16191f; }
    .cal-ato { background: #3a1f1f; color: #f0a0a0; }
    .cal-event { background: #17301f; color: #9bd3a8; }
}