/* BorderLog — app.css
   Brand: NovaNode (accent #1ebbd7, band #1292ab), dark neutral surface.
   Follows MIKENETWORKS-WEB-STYLE.md: one accent, flat colour, 4/6/8 px radii,
   no shadows, no tinted pill badges, transitions ≤150 ms on colour only.
   Country colours: LU = accent, BE = light neutral, mixed = both.
*/

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* ---------- tokens ---------- */
:root {
    --accent: #1ebbd7;
    --band: #1292ab;
    --band-hover: #0f7f95;
    --band-text: #e6f6f9;

    --bg-dark: #0c0f12;
    --bg-elevated: #0f1316;
    --bg-card: #12161a;
    --bg-card-hover: #171c21;
    --text-primary: #f1f4f6;
    --text-secondary: #aab3ba;
    --text-muted: #75808a;
    --border: #20272d;
    --border-light: #2d363e;

    --green: #22c55e;
    --amber: #fbbf24;
    --red: #ef4444;

    --lu: #1ebbd7;
    --be: #d4dbe0;
    --other: #75808a;

    --r-btn: 4px;
    --r-card: 6px;
    --r-table: 8px;
    --container: 1120px;
    --gutter: 24px;
    --nav-h: 64px;
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

/* ---------- text helpers ---------- */
.page-title { font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 20px; }
.h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 4px; }
.small { font-size: 13px; color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.tabular, .num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.link-sm { font-size: 13px; }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.92em; }
.c-lu { color: var(--lu); }
.c-be { color: var(--be); }
.c-mixed { color: var(--text-primary); }
.c-other, .c-off { color: var(--text-muted); }
.c-green { color: var(--green); }
.c-amber { color: var(--amber); }
.c-red { color: var(--red); }

/* ---------- top bar + nav ---------- */
.topbar { border-bottom: 1px solid var(--border); background: var(--bg-dark); position: sticky; top: 0; z-index: 50; }
.topbar-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 60px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--text-primary); margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand-icon { width: 26px; height: 26px; color: var(--accent); }
.nav { display: flex; gap: 2px; }
.nav a {
    display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; height: 40px;
    color: var(--text-secondary); font-size: 14px; font-weight: 500; white-space: nowrap;
    border-radius: var(--r-btn); transition: color .12s, background-color .12s;
}
.nav a:hover { color: var(--text-primary); background: var(--bg-elevated); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); }
.nav svg { width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 760px) {
    .topbar-inner { height: 52px; padding: 0 16px; }
    .nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        height: calc(var(--nav-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--bg-elevated); border-top: 1px solid var(--border);
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    }
    .nav a { flex-direction: column; justify-content: center; gap: 3px; height: var(--nav-h); padding: 0; font-size: 11px; border-radius: 0; }
    .nav a:hover { background: none; }
    .nav svg { width: 21px; height: 21px; }
    .page { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px) !important; }
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-top: 28px; padding-bottom: 56px; }
@media (max-width: 760px) { .container { padding: 0 16px; } .page { padding-top: 18px; } }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head .page-title { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 18px; border-radius: var(--r-btn);
    background: var(--band); border: 1px solid var(--band); color: #fff;
    font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.btn:hover { background: var(--band-hover); border-color: var(--band-hover); text-decoration: none; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-light); }
.btn-outline:hover { background: var(--bg-elevated); border-color: var(--accent); }
.btn-danger { background: transparent; color: var(--red); border-color: var(--border-light); }
.btn-danger:hover { background: transparent; border-color: var(--red); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.btn-row form { display: contents; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 1px solid var(--border-light); border-radius: var(--r-btn); color: var(--text-secondary);
    transition: border-color .12s, color .12s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--text-primary); text-decoration: none; }
.icon-btn-danger:hover { border-color: var(--red); color: var(--red); }

/* ---------- status ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-green { color: var(--green); }
.status-amber { color: var(--amber); }
.status-red { color: var(--red); }

/* ---------- notice ---------- */
.notice { border-left: 3px solid var(--accent); background: var(--bg-elevated); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.notice-green { border-left-color: var(--green); }
.notice-amber { border-left-color: var(--amber); }
.notice-red { border-left-color: var(--red); }
.notice-title { font-weight: 600; margin-bottom: 2px; }
.notice-text { color: var(--text-secondary); }
.notice .kv { margin-top: 10px; }

/* ---------- forms ---------- */
.field { display: grid; gap: 5px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
    width: 100%; min-height: 42px; padding: 8px 12px;
    background: var(--bg-dark); border: 1px solid var(--border-light); border-radius: var(--r-btn);
    font-size: 15px; color: var(--text-primary);
}
input[type="date"] { color-scheme: dark; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input.is-invalid { border-color: var(--red); }
input::placeholder { color: var(--text-muted); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--band); width: 16px; height: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-full { grid-column: 1 / -1; }
.actions { display: flex; gap: 8px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.inline-form .grow { flex: 1 1 220px; }
.time-input { width: 84px !important; text-align: center; }
.stack { display: grid; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* segmented toggle */
.seg { display: inline-flex; border: 1px solid var(--border-light); border-radius: var(--r-btn); overflow: hidden; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--text-secondary); transition: background-color .12s, color .12s; }
.seg label + label span { border-left: 1px solid var(--border-light); }
.seg input:checked + span { background: var(--band); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

details.more { margin-top: 12px; }
details.more summary { cursor: pointer; color: var(--accent); font-size: 14px; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: '+ '; }
details.more[open] summary::before { content: '− '; }

/* ---------- cards, tables ---------- */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px; min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card.empty { text-align: left; display: grid; gap: 14px; justify-items: start; }
.section { padding: 28px 0; border-top: 1px solid var(--border); }
.section:first-of-type { border-top: 0; padding-top: 0; }
.section > .h3 { margin-bottom: 8px; }
.section > .small { margin-bottom: 14px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-table); margin: 16px 0 10px; }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
.table thead th { background: var(--bg-elevated); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-card-hover); }
.table .num { text-align: right; }
.table tr.is-current td { color: var(--text-primary); font-weight: 600; }
.table-compact th, .table-compact td { padding: 7px 10px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.token { word-break: break-all; }

.rows li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; flex-wrap: wrap; }
.rows li:last-child { border-bottom: 0; }
.rows-time { color: var(--text-muted); min-width: 120px; font-variant-numeric: tabular-nums; }
.rows-boxed { border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: 12px; }
.rows-boxed li { padding: 12px 16px; justify-content: space-between; }
.rows-boxed li > div:first-child { display: grid; gap: 2px; min-width: 0; }
.row-actions { display: flex; gap: 8px; }

/* tabs */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; }
.tab { padding: 8px 16px; border: 1px solid var(--border-light); border-radius: var(--r-card); color: var(--text-secondary); font-size: 14px; font-weight: 500; white-space: nowrap; }
.tab:hover { color: var(--text-primary); text-decoration: none; }
.tab[aria-current="page"] { background: var(--band); border-color: var(--band); color: #fff; }

.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; font-size: 14px; }

/* ---------- dashboard ---------- */
.dash { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.card-wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .dash { grid-template-columns: 1fr; } }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.trio > div { display: grid; gap: 2px; }
.trio .val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trio .lbl { font-size: 12px; color: var(--text-muted); }

.big-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px 0 20px; }
.big { display: grid; gap: 2px; }
.big-num { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.big-lbl { font-size: 13px; color: var(--text-secondary); }
@media (max-width: 600px) { .big-row { grid-template-columns: 1fr; gap: 12px; } }

.meter { position: relative; height: 8px; background: var(--border); border-radius: 4px; margin: 0 0 30px; }
.meter-thin { height: 6px; margin-bottom: 12px; }
.meter-fill { height: 100%; border-radius: 4px; }
.meter-green { background: var(--green); }
.meter-amber { background: var(--amber); }
.meter-red { background: var(--red); }
.meter-mark { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--text-primary); }
.meter-mark span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.meter-mark-end { background: var(--text-muted); }
.meter-mark-end span { left: auto; right: 0; transform: none; }

.split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); margin-bottom: 10px; gap: 2px; }
.split-lu { background: var(--lu); }
.split-be { background: var(--be); }

.issues { display: grid; gap: 0; }
.issue { padding: 10px 0 10px 12px; border-left: 3px solid var(--border-light); display: grid; gap: 2px; font-size: 14px; }
.issue + .issue { margin-top: 8px; }
.issue-warn { border-left-color: var(--amber); }
.issue a { color: var(--text-primary); }
.issue span { color: var(--text-secondary); }
.issue-action { margin-top: 6px; }

/* ---------- calendar ---------- */
.cal-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; min-width: 170px; text-align: center; }
.cal-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; }
.cal-stats > div { display: flex; gap: 6px; }
.cal-stats dt { color: var(--text-muted); }
.cal-stats dt.c-lu { color: var(--lu); }
.cal-stats dt.c-be { color: var(--be); }
.cal-stats dd { font-weight: 600; font-variant-numeric: tabular-nums; }

.budget { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; margin-bottom: 14px;
    border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 0 var(--r-card) var(--r-card) 0; background: var(--bg-elevated); font-size: 13px; }
.budget.is-amber { border-left-color: var(--amber); }
.budget.is-red { border-left-color: var(--red); }
.budget-label { font-weight: 600; }
.budget-cells { display: inline-flex; gap: 3px; }
.budget-cells span { width: 14px; height: 14px; border: 1px solid var(--border-light); border-radius: 2px; }
.budget-cells span.on { background: var(--be); border-color: var(--be); }
.budget-cells span.over { background: var(--red); border-color: var(--red); }
.budget-text { color: var(--text-secondary); }

.pattern { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; font-size: 12px; }
.pattern-item { display: grid; justify-items: center; gap: 1px; }
.pattern-dow { color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.pattern-val { font-weight: 700; }
.pattern-conf { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-table); overflow: hidden; }
.cal-dow { padding: 8px 4px; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
.cal-cell {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    min-height: 104px; padding: 6px 7px 7px; text-align: left; min-width: 0;
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    border-top: 3px solid transparent;
    background: var(--bg-dark); transition: background-color .12s;
}
.cal-grid > :nth-child(7n) { border-right: 0; }
.cal-cell:hover { background: var(--bg-card-hover); }
.cal-cell-empty { background: var(--bg-elevated); cursor: default; }
.cal-cell-empty:hover { background: var(--bg-elevated); }
.cal-cell.is-weekend { background: var(--bg-elevated); }
.cal-cell.is-weekend:hover { background: var(--bg-card-hover); }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.is-selected { background: var(--bg-card-hover); }
.cal-cell.c-stripe-lu { border-top-color: var(--lu); }
.cal-cell.c-stripe-be { border-top-color: var(--be); }
.cal-cell.c-stripe-mixed { border-image: linear-gradient(90deg, var(--lu) 50%, var(--be) 50%) 1; border-image-slice: 3 0 0 0; }
.cal-cell.c-stripe-other { border-top-color: var(--other); }
.cal-cell.is-planned { border-top: 3px dashed var(--border-light); }
.cal-cell.is-marked { background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,255,255,.035) 7px 8px); }

.cal-day-num { font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cal-cell.is-today .cal-day-num { color: var(--accent); }
.cal-cell.is-holiday .cal-day-num { color: var(--amber); }
.cal-holiday, .cal-mark, .cal-planned, .cal-crossings, .cal-country { font-size: 11px; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-holiday { color: var(--amber); }
.cal-holiday small { color: var(--text-muted); font-size: 10px; }
.cal-mark { color: var(--text-secondary); }
.cal-hours { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: auto; }
.cal-country { color: var(--text-secondary); font-weight: 600; }
.cal-planned { color: var(--text-muted); margin-top: auto; }
.cal-crossings { color: var(--text-muted); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 16px; height: 3px; }
.sw-lu { background: var(--lu); }
.sw-be { background: var(--be); }
.sw-mixed { background: linear-gradient(90deg, var(--lu) 50%, var(--be) 50%); }
.sw-planned { border-top: 3px dashed var(--border-light); height: 0; }

@media (max-width: 760px) {
    .cal-header { gap: 10px; }
    .cal-title { font-size: 18px; min-width: 0; }
    .cal-cell { min-height: 62px; padding: 4px 4px 5px; }
    .cal-holiday, .cal-mark, .cal-crossings, .cal-planned { display: none; }
    .cal-country { font-size: 10px; }
    .cal-hours { font-size: 12px; }
    .cal-cell.is-planned .cal-day-num::after { content: ' ·'; color: var(--text-muted); }
    .pattern { display: none; }
}

.panel { margin-top: 24px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-elevated); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.check { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--border-light); border-radius: var(--r-btn); font-size: 13px; cursor: pointer; }
.check:hover { border-color: var(--accent); }

/* ---------- day sheet ---------- */
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; display: none; }
.sheet-overlay.is-open { display: block; }
.sheet {
    position: fixed; z-index: 100; background: var(--bg-card); overflow-y: auto; overscroll-behavior: contain;
    top: 0; right: 0; bottom: 0; width: min(460px, 100vw); border-left: 1px solid var(--border);
    transform: translateX(100%); transition: transform .15s ease-out; visibility: hidden;
}
.sheet.is-open { transform: none; visibility: visible; }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.sheet-body { padding: 4px 18px 28px; }
.sheet-facts { padding: 12px 0 0; font-size: 14px; color: var(--text-secondary); }
.sheet-sec { padding: 16px 0; border-bottom: 1px solid var(--border); }
.sheet-sec:last-child { border-bottom: 0; }
.sheet-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 10px; }
@media (max-width: 760px) {
    .sheet { top: auto; left: 0; width: 100%; max-height: 90vh; border-left: 0; border-top: 1px solid var(--border); border-radius: var(--r-table) var(--r-table) 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
}

.marks { display: flex; flex-wrap: wrap; gap: 6px; }
.mark-btn { min-height: 40px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--r-btn); font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: border-color .12s, color .12s; }
.mark-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.mark-btn.is-on { background: var(--band); border-color: var(--band); color: #fff; }
.mark-clear { border-style: dashed; }

.entries { display: grid; gap: 8px; margin-bottom: 12px; }
.entries.is-planned .entry { border-style: dashed; }
.entry { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-card); }
.entry-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; min-width: 0; }
.entry-country { font-weight: 700; }
.entry-src { font-size: 12px; color: var(--text-muted); }
.entry-notes { flex-basis: 100%; font-size: 13px; color: var(--text-secondary); }
.entry-actions { display: flex; gap: 6px; }
.entry-edit { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px; }

.add { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border-light); border-radius: var(--r-card); background: var(--bg-dark); }
.add-title { font-weight: 600; font-size: 14px; }
.add .seg { justify-self: start; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.preset { min-height: 36px; padding: 0 11px; border: 1px solid var(--border-light); border-radius: var(--r-btn); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.preset:hover { border-color: var(--accent); color: var(--text-primary); }
.time-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.time-row input[type="text"] { width: 96px; text-align: center; font-variant-numeric: tabular-nums; }
.time-row select { width: auto; }
.other-country { max-width: 140px; }

/* ---------- history ---------- */
.hist { border-top: 1px solid var(--border); }
.hist-item { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.hist-date { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hist-kind { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.hist-info { font-size: 15px; }
.hist-notes { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.hist-actions { display: flex; gap: 6px; align-items: flex-start; }
.edit { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-elevated); }
@media (max-width: 640px) {
    .hist-item { grid-template-columns: minmax(0, 1fr) auto; }
    .hist-when { grid-column: 1 / -1; }
}

/* ---------- settings ---------- */
.pair { padding: 18px; margin-bottom: 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--bg-elevated); }
.pair-code { font-size: 44px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.logout { margin-top: 16px; }

/* ---------- audit ---------- */
.audit { border-top: 1px solid var(--border); }
.audit-item { padding: 12px 0; border-bottom: 1px solid var(--border); display: grid; gap: 4px; }
.audit-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.diff { max-width: 640px; }
.diff th { font-weight: 500; color: var(--text-muted); width: 130px; }
.diff .was { color: var(--text-muted); text-decoration: line-through; }

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; display: grid; gap: 16px; }
.login-icon { color: var(--accent); }
.login-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.login-card .notice { margin: 0; }

.flash { margin-bottom: 18px; }

/* ---------- one-tap today bar ---------- */
.today { display: grid; gap: 10px; margin-bottom: 20px; }
.quick-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 8px 16px; padding: 12px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-card); }
.quick-when { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-actions form { display: contents; }
.quick-btn {
    display: grid; justify-items: start; gap: 1px; min-height: 52px; padding: 7px 14px; text-align: left;
    border: 1px solid var(--border-light); border-left-width: 3px; border-radius: var(--r-btn); background: var(--bg-dark);
    transition: border-color .12s, background-color .12s;
}
.quick-btn strong { font-size: 14px; font-weight: 600; }
.quick-btn span { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.quick-btn:hover { background: var(--bg-card-hover); border-color: var(--accent); }
.quick-lu { border-left-color: var(--lu); }
.quick-be { border-left-color: var(--be); }
.quick-more { border-style: dashed; border-left-style: solid; }
.today-done { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; font-variant-numeric: tabular-nums; }
.link-btn { color: var(--accent); font-size: 14px; }
.link-btn:hover { text-decoration: underline; }
@media (max-width: 760px) {
    .quick-row { grid-template-columns: 1fr; padding: 12px; }
    .quick-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .quick-btn { width: 100%; }
}

/* ---------- settings: declaration editor, system checks ---------- */
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.plan-table input[type="number"] { width: 64px; min-height: 34px; padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.plan-table td.num { text-align: right; }
.plan-table tr.is-off td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.plan-table tfoot th, .plan-table tfoot td { font-weight: 700; border-top: 1px solid var(--border-light); padding: 9px 12px; }
details.more-section > summary { cursor: pointer; list-style: none; margin-bottom: 8px; }
details.more-section > summary::-webkit-details-marker { display: none; }
details.more-section > summary::after { content: ' +'; color: var(--accent); }
details.more-section[open] > summary::after { content: ' −'; }
.checks-list { border: 1px solid var(--border); border-radius: var(--r-card); }
.chk { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 9px 14px 9px 12px; border-bottom: 1px solid var(--border); border-left: 3px solid var(--green); font-size: 14px; }
.chk:last-child { border-bottom: 0; }
.chk-warn { border-left-color: var(--amber); }
.chk-bad { border-left-color: var(--red); }
.chk-label { color: var(--text-secondary); }
.chk-detail { overflow-wrap: anywhere; }
@media (max-width: 560px) { .chk { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- small screens: dashboard ---------- */
.card-head { flex-wrap: wrap; }
.card-head .label { overflow-wrap: anywhere; }
.table td:first-child, .table th:first-child { white-space: nowrap; }
@media (max-width: 560px) {
    .hide-sm { display: none; }
    .card { padding: 16px; }
}