/* HR Paper Mill — Google Blog design system (see DESIGN.md)
   Mobile-first. Breakpoints: 768px (tablet / iPad, side rail) · 1100px (laptop / desktop, full sidebar + 2 columns) */

:root, .pdf-stage {
    /* Google Blog look: white canvas, Material 3 surfaces, brand blue (.pdf-stage stays light in dark mode) */
    --ground: #FFFFFF;
    --surface: #FFFFFF;
    --field: #F8FAFD;
    --line: #DDE3EA;
    --line-soft: #E9EEF6;
    --ink: #1F1F1F;
    --ink-2: #3C4043;
    --muted: #5F6368;
    --accent: #0850D1;
    --accent-hover: #0640AA;
    --accent-soft: #D8E6FC;
    --ok: #146C2E;   --ok-soft: #C4EED0;
    --warn: #7A5900; --warn-soft: #FFEFC2;
    --bad: #B3261E;  --bad-soft: #F9DEDC;
    --bad-line: #F2B8B5;
    --rail: #E9EEF6;
    --not-ready: #DDE3EA;
    --dash: #A8C7FA;
    --scrim: rgba(31, 31, 31, .45);
    --veil: rgba(255, 255, 255, .85);
    --container: #F0F4F9;
    --outline: #ABB0B6;
    --hover: #F2F6FC;
    --topbar: rgba(255, 255, 255, .92);
    --glass: rgba(255, 255, 255, .72);
    --on-accent: #FFFFFF; --on-accent-soft: #041E49;
    --on-ok: #FFFFFF; --on-warn: #FFFFFF; --on-bad: #FFFFFF;
    color-scheme: light;

    --font: 'Google Sans', 'Noto Sans Thai', system-ui, sans-serif;
    --mono: 'Google Sans Code', 'Google Sans', ui-monospace, monospace;

    --r-sm: 12px; --r-seg: 999px; --r-box: 14px; --r-md: 16px; --r-submit: 999px; --r-lg: 24px; --r-alert: 28px; --r-xl: 28px;
    --tap: 44px;
    --gutter: 20px;
    --content: 480px;
    --nav-h: 64px;
    --side-w: 0px;
}

/* โหมดมืด: เลือกเองในหน้า "ตั้งค่า" หรือ "ตามระบบ" (ค่าเริ่มต้น) */
:root[data-theme="dark"] {
    --ground: #131314; --surface: #1B1C1D; --field: #1F2022; --container: #2A2B2E;
    --line: #44474A; --line-soft: #303134; --outline: #80868B; --hover: #2D2F31;
    --ink: #F1F3F4; --ink-2: #DADCE0; --muted: #BDC1C6;
    --accent: #AECBFA; --accent-hover: #D3E3FD; --accent-soft: #1A4A9E; --on-accent: #062E6F; --on-accent-soft: #FFFFFF;
    --ok: #6DD58C; --ok-soft: #0F3D1E; --on-ok: #0A3818;
    --warn: #F5C451; --warn-soft: #3D2E00; --on-warn: #3D2E00;
    --bad: #F2B8B5; --bad-soft: #5C1B17; --bad-line: #8C1D18; --on-bad: #601410;
    --rail: #2A2B2E; --not-ready: #3C4043; --dash: #5E7FB8;
    --scrim: rgba(0, 0, 0, .6); --veil: rgba(19, 19, 20, .85); --topbar: rgba(19, 19, 20, .9); --glass: rgba(27, 28, 29, .7);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --ground: #131314; --surface: #1B1C1D; --field: #1F2022; --container: #2A2B2E;
        --line: #44474A; --line-soft: #303134; --outline: #80868B; --hover: #2D2F31;
        --ink: #F1F3F4; --ink-2: #DADCE0; --muted: #BDC1C6;
        --accent: #AECBFA; --accent-hover: #D3E3FD; --accent-soft: #1A4A9E; --on-accent: #062E6F; --on-accent-soft: #FFFFFF;
        --ok: #6DD58C; --ok-soft: #0F3D1E; --on-ok: #0A3818;
        --warn: #F5C451; --warn-soft: #3D2E00; --on-warn: #3D2E00;
        --bad: #F2B8B5; --bad-soft: #5C1B17; --bad-line: #8C1D18; --on-bad: #601410;
        --rail: #2A2B2E; --not-ready: #3C4043; --dash: #5E7FB8;
        --scrim: rgba(0, 0, 0, .6); --veil: rgba(19, 19, 20, .85); --topbar: rgba(19, 19, 20, .9); --glass: rgba(27, 28, 29, .7);
        color-scheme: dark;
}
}

/* --- Base --- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 600; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }
b { font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

[hidden] { display: none !important; }

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.count { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.muted-text { color: var(--muted); font-size: 13px; }
.label { font-size: 14px; font-weight: 500; }
.stack { display: flex; flex-direction: column; gap: 16px; }

.ic {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic-16 { width: 16px; height: 16px; }
.ic-22 { width: 22px; height: 22px; }
.ic-30 { width: 30px; height: 30px; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; padding: 0 20px;
    border: 1px solid transparent; border-radius: var(--r-md);
    font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn:disabled { cursor: not-allowed; }

.btn-primary { min-height: 52px; background: var(--accent); color: #fff; border: 0; }
.btn-primary:disabled { background: var(--not-ready); color: var(--ink-2); }

.btn-submit { min-height: 56px; border-radius: var(--r-submit); border: 0; background: var(--not-ready); color: var(--ink-2); }
.btn-submit.is-ready { background: var(--accent); color: #fff; }

.btn-outline { min-height: var(--tap); background: var(--surface); border-color: var(--line); color: var(--ink); font-size: 15px; font-weight: 500; }

.btn-danger { background: var(--surface); border-color: var(--bad-line); color: var(--bad); font-size: 15px; font-weight: 500; }

.btn-text {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--tap); padding: 0 4px;
    background: none; border: 0; color: var(--accent); font-weight: 500; cursor: pointer;
}
.btn-text-bad { color: var(--bad); }

.btn-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 0 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.btn-chip:disabled { color: var(--muted); cursor: not-allowed; }
.btn-chip-bad { color: var(--bad); border-color: var(--bad-line); }

.icon-btn {
    display: grid; place-items: center; flex: none;
    width: var(--tap); height: var(--tap); margin: -8px -10px 0 0;
    background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer;
}

@media (hover: hover) {
    .btn-primary:not(:disabled):hover, .btn-submit.is-ready:hover { background: var(--accent-hover); }
    .btn-outline:hover, .btn-chip:not(:disabled):hover { background: var(--field); border-color: var(--dash); }
    .btn-danger:hover { background: var(--bad-soft); }
    .btn-text:hover span, .btn-text:hover { text-decoration: underline; text-underline-offset: 3px; }
    .icon-btn:hover { background: var(--ground); color: var(--ink); }
}

/* --- Inputs --- */
.input {
    width: 100%; height: 56px; padding: 0 16px;
    background: var(--field); border: 1.5px solid var(--line); border-radius: var(--r-md);
    font-size: 16px;
}
.input:focus { outline: none; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.input-code {
    font-family: var(--mono); font-weight: 500; font-size: 24px;
    letter-spacing: 8px; text-transform: uppercase; text-align: center;
    padding-left: 24px;
}
.input-code::placeholder { color: var(--dash); }

.hint { margin-top: 8px; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; }
.hint.is-error { color: var(--bad); font-weight: 500; }

.select {
    height: 40px; padding: 0 32px 0 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B616B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 14px; font-weight: 500; appearance: none; cursor: pointer;
}

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }

/* --- Cards, tiles, chips, banners --- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.card-title { font-size: 16px; margin-bottom: 12px; }

.tiles { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }

.tile {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.tile span { font-size: 12px; color: var(--muted); }
.tile b { font-size: 15px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--line-soft); color: var(--ink-2);
    font-size: 12px; font-weight: 500; white-space: nowrap;
}
.chip .ic { width: 14px; height: 14px; }
.chip.is-ok { background: var(--ok-soft); color: var(--ok); }
.chip.is-warn { background: var(--warn-soft); color: var(--warn); }
.chip.is-info { background: var(--accent-soft); color: var(--on-accent-soft); }
.chip-self { background: var(--accent-soft); color: var(--accent); }
.chip-agent { background: var(--warn-soft); color: var(--warn); }

.banner { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; }
.banner b { display: block; }
.banner-warn { background: var(--warn-soft); color: var(--warn); }
.banner-bad { background: var(--bad-soft); color: var(--bad); }
.banner-ok { background: var(--ok-soft); color: var(--ok); }

.agent-meter { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.agent-meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.agent-meter-top b { color: var(--accent); }
.agent-meter small { font-size: 11px; color: var(--muted); }
.meter { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.meter-bar { width: 0; height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s; }
.agent-meter[data-level="warn"] .meter-bar { background: var(--warn); }
.agent-meter[data-level="warn"] .agent-meter-top b { color: var(--warn); }
.agent-meter[data-level="bad"] .meter-bar { background: var(--bad); }
.agent-meter[data-level="bad"] .agent-meter-top b { color: var(--bad); }

.icon-box {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: var(--r-box);
    background: var(--ground); color: var(--muted);
}

.avatar {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-xl { width: 88px; height: 88px; font-size: 32px; }

.contacts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.contact {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 8px 12px 8px 8px;
    background: var(--field); border: 1px solid var(--line); border-radius: var(--r-box);
    color: var(--ink); text-decoration: none; font-weight: 500;
}
.contact .icon-box { background: var(--accent-soft); color: var(--accent); }
.contact small { display: block; color: var(--accent); font-size: 14px; }
@media (hover: hover) { .contact:hover { border-color: var(--accent); } }

/* --- Login --- */
.login {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; gap: 24px;
    max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto;
    padding: max(32px, env(safe-area-inset-top)) var(--gutter) 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.logo {
    display: grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: var(--r-box);
    background: var(--accent); color: #fff; font-weight: 600; font-size: 18px;
}
.eyebrow { margin-top: 24px; font-size: 13px; font-weight: 500; color: var(--accent); }
.login-intro h1 { margin-top: 6px; font-size: 30px; line-height: 1.25; }
.intro-steps { display: none; list-style: none; padding: 0; }
.login-main { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.login-card { padding: 20px; }
.login-card h2 { font-size: 22px; }
.login-card .label { display: block; margin: 20px 0 8px; }
.login-card .btn { margin-top: 20px; }
.login-links { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; }
.login-footer { margin-top: auto; font-size: 11px; color: var(--muted); }
.login-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; }
.login-footer .btn-text { font-size: 13px; padding: 0; }

/* --- App shell (mobile) --- */
.app {
    min-height: 100vh; min-height: 100dvh;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: env(safe-area-inset-top) var(--gutter) 0;
    background: var(--ground); border-bottom: 1px solid var(--line);
}
.sidenav { display: none; }

.bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 4px 8px env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line);
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; background: none; border: 0; border-radius: var(--r-md);
    color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-item[aria-current="page"] { color: var(--accent); font-weight: 600; }

.view { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 0; }
.view-head { margin-bottom: 16px; }
.view-head h2 { font-size: 22px; line-height: 1.35; }
.view-head p { font-size: 13px; color: var(--muted); }
.view-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.view-head-row > div:first-child { flex: 1 1 12em; }

/* --- Submit form --- */
.form-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "side"; }
.area-top { grid-area: top; }
.area-main { grid-area: main; }
.area-side { grid-area: side; }

.profile { display: flex; align-items: center; gap: 14px; }
.profile-text { display: flex; flex-direction: column; min-width: 0; }
.profile-text b { font-size: 16px; }
.profile-text .mono { font-size: 13px; color: var(--ink-2); }

.step { transition: border-color .2s; }
.step.is-error { border-color: var(--bad); }
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.step-head h3 { font-size: 16px; }
.step-num {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--line-soft); color: var(--ink-2); font-size: 13px;
}
/* ขั้นตอนที่เสร็จแล้ว: คงตัวเลขไว้ เปลี่ยนพื้นเป็นสีเขียว (ขาวบน ok = 7.0:1) */
.step.is-done .step-num { background: var(--ok); color: var(--on-ok); }

.status-box { display: flex; align-items: center; gap: 12px; }
.status-box b { display: block; font-size: 14px; font-weight: 500; }
.status-box small { display: block; font-size: 12px; color: var(--muted); }
.status-box.is-pending .icon-box { background: var(--warn-soft); color: var(--warn); }
.status-box.is-ok .icon-box { background: var(--ok-soft); color: var(--ok); }
.status-box.is-ok small { font-family: var(--mono); font-weight: 500; }
.status-box.is-error .icon-box { background: var(--bad-soft); color: var(--bad); }
.status-box.is-error b { color: var(--bad); }
.status-box.is-pending .ic { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    min-height: 76px; padding: 12px;
    border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .ic { color: var(--muted); margin-top: 2px; }
.choice b { display: block; font-size: 15px; line-height: 1.35; }
.choice small { display: block; font-size: 12px; color: var(--muted); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:checked) .ic { color: var(--accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.upload {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 148px; padding: 16px;
    background: var(--field); border: 1.5px dashed var(--dash); border-radius: var(--r-md);
    color: var(--ink); text-align: center; cursor: pointer;
}
.upload .ic { color: var(--accent); }
.upload b { font-size: 15px; }
.upload small { font-size: 12px; color: var(--muted); }
.step:has(#evidenceImg:focus-visible) .upload { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .upload:hover { border-color: var(--accent); } }

.photo { display: grid; gap: 12px; }
.photo img {
    width: 100%; max-height: 280px; object-fit: contain;
    background: var(--field); border: 1px solid var(--line); border-radius: var(--r-md);
}
.photo-meta small { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.photo-meta .row-actions { margin-top: 8px; }

.submit-card h3 { font-size: 16px; margin-bottom: 10px; }
.checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.checklist li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.checklist li .ic { width: 18px; height: 18px; color: var(--dash); }
.checklist li.is-ok .ic { color: var(--ok); }
.submit-card .btn-text { margin-top: 6px; }

/* --- History --- */
.hist-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

.segmented {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    padding: 4px; background: var(--rail); border-radius: var(--r-md);
}
.segmented button {
    min-height: 40px; border: 0; border-radius: var(--r-seg);
    background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer;
}
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }

.summary { display: flex; flex-direction: column; gap: 12px; }
.summary-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.summary-top .label { color: var(--muted); }
.summary-pickers { display: flex; gap: 8px; }
.summary-value { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.summary-value .big { font-size: 44px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.summary-value .unit { font-size: 15px; font-weight: 500; color: var(--muted); }
.summary-sub { font-size: 13px; color: var(--muted); text-align: right; }
.summary-sub .mono { color: var(--ink); font-size: 15px; }
.summary-split { display: flex; flex-wrap: wrap; gap: 8px; }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.bars span { flex: 1; min-height: 4px; border-radius: 3px 3px 0 0; background: var(--line-soft); }
.bars span.is-on { background: var(--accent); }
.bars-axis { display: flex; justify-content: space-between; margin-top: -6px; font-size: 11px; color: var(--muted); }

.hist-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.hist-row + .hist-row { border-top: 1px solid var(--line-soft); }
.hist-head {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 60px; padding: 10px 16px;
    background: none; border: 0; text-align: left; cursor: pointer;
}
.hist-when { flex: 1; min-width: 0; line-height: 1.35; }
.hist-when b { display: block; font-size: 14px; font-weight: 500; }
.hist-when .mono { font-size: 12px; color: var(--muted); }
.hist-head > .ic { color: var(--muted); transition: transform .2s; }
.hist-head[aria-expanded="true"] > .ic { transform: rotate(180deg); }
.hist-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.2, 0, 0, 1); }
.hist-panel.is-open { grid-template-rows: 1fr; }
.hist-body { min-height: 0; overflow: hidden; }
.hist-inner { padding: 0 16px 14px; opacity: 0; transition: opacity .2s; }
.hist-panel.is-open .hist-inner { opacity: 1; }
.hist-body img {
    width: 100%; max-height: 360px; object-fit: contain;
    background: var(--field); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.hist-body p { margin-top: 8px; font-size: 12px; color: var(--muted); }
@media (hover: hover) { .hist-head:hover { background: var(--field); } }

.empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.empty .ic { display: block; margin: 0 auto 8px; width: 30px; height: 30px; color: var(--dash); }
/* --- Account --- */
.acc-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.form-grid > *, .hist-grid > *, .acc-grid > *, .stack > * { min-width: 0; }
.profile-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 20px 20px; }
.profile-name { font-size: 19px; }
.kv { width: 100%; margin-top: 6px; border-top: 1px solid var(--line-soft); }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kv div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 500; text-align: right; }

.menu { list-style: none; padding: 0; overflow: hidden; }
.menu li + li { border-top: 1px solid var(--line-soft); }
.menu button {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 56px; padding: 0 16px;
    background: none; border: 0; text-align: left; cursor: pointer;
}
.menu button > .ic:first-child { color: var(--accent); }
.menu button span { flex: 1; }
.menu button > .ic:last-child { color: var(--muted); }
@media (hover: hover) { .menu button:hover { background: var(--field); } }
.footnote { font-size: 11px; color: var(--muted); text-align: center; }

/* --- Sheets (bottom sheet on mobile) --- */
dialog { padding: 0; border: 0; color: var(--ink); background: var(--surface); }
dialog::backdrop { background: var(--scrim); }

.sheet {
    position: fixed; inset: auto 0 0 0;
    width: 100%; max-width: 100%; max-height: 90dvh; margin: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-up .22s ease-out; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; border-bottom: 1px solid var(--line-soft); }
.sheet-head h2 { font-size: 19px; line-height: 1.35; }
.sheet-head p { font-size: 13px; color: var(--muted); }
.sheet-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--warn); margin-bottom: 4px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 20px; overscroll-behavior: contain; }
.sheet-body:focus-visible { outline-offset: -2px; }
.sheet-body > p + p { margin-top: 8px; }
.sheet-foot { display: flex; flex-direction: column; gap: 14px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }

.rules { max-width: 68ch; line-height: 1.65; }
.rules h3 { font-size: 15px; margin-bottom: 10px; }
.rules ol { padding-left: 22px; font-size: 14px; }
.rules ol > li { margin-bottom: 12px; padding-left: 4px; }
.rules ol > li::marker { font-family: var(--mono); font-weight: 500; color: var(--accent); }
.rules ul { list-style: none; padding: 6px 0 0; color: var(--ink-2); }
.rules strong { display: block; margin-top: 4px; color: var(--bad); font-weight: 600; }

.steps-list { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.steps-list li::marker { font-family: var(--mono); font-weight: 500; color: var(--accent); }
.steps-list b { display: block; }
.bullet-list { padding-left: 20px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }

/* --- Alert dialog --- */
.alert {
    width: calc(100% - 2 * var(--gutter)); max-width: 360px;
    padding: 24px 20px 20px; border-radius: var(--r-alert); text-align: center;
}
.alert[open] { animation: pop .18s ease-out; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.alert-icon {
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.alert-icon .ic { width: 26px; height: 26px; }
.alert-icon.is-ok { background: var(--ok-soft); color: var(--ok); }
.alert-icon.is-warn { background: var(--warn-soft); color: var(--warn); }
.alert-icon.is-bad { background: var(--bad-soft); color: var(--bad); }
.alert h2 { font-size: 18px; line-height: 1.4; }
.alert p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.alert-actions { display: flex; gap: 10px; margin-top: 20px; }
.alert-actions .btn { min-height: 48px; }
.alert-actions .btn-bad { background: var(--bad); color: var(--on-bad); border: 0; }

/* --- Loading --- */
.loading {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--veil); color: var(--accent); font-weight: 500;
}
.spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid var(--accent-soft); border-top-color: var(--accent);
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================
   Tablet / iPad (≥ 768px): side rail, wider single column
   ===================================================== */
@media (min-width: 768px) {
    :root { --gutter: 32px; --content: 640px; --side-w: 88px; }

    .topbar, .bottomnav { display: none; }
    .app { padding-bottom: 48px; padding-left: var(--side-w); }

    .sidenav {
        position: fixed; inset: 0 auto 0 0; z-index: 30;
        display: flex; flex-direction: column; align-items: center; gap: 20px;
        width: var(--side-w); padding: max(20px, env(safe-area-inset-top)) 8px 20px;
        background: var(--surface); border-right: 1px solid var(--line);
    }
    .sidenav .brand-text, .nav-user .chip, .nav-user-text { display: none; }
    .nav-items { display: flex; flex-direction: column; gap: 6px; width: 100%; }
    .sidenav .nav-item { min-height: 64px; }
    .sidenav .nav-item[aria-current="page"] { background: var(--accent-soft); }
    .nav-user { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .nav-user .btn-text { flex-direction: column; font-size: 12px; gap: 2px; }
    @media (hover: hover) { .sidenav .nav-item:not([aria-current]):hover { background: var(--field); color: var(--ink); } }

    .view { padding-top: 32px; }
    .view-head h2 { font-size: 26px; }

    .card { padding: 20px; }

    .acc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .choice { flex-direction: row; gap: 10px; }

    /* Long-content sheets become centered dialogs */
    .sheet {
        inset: 0; margin: auto;
        width: calc(100% - 64px); max-width: 640px; max-height: min(86dvh, 820px);
        border-radius: var(--r-xl);
    }
    .sheet[open] { animation: pop .18s ease-out; }
    .sheet-head { padding: 24px 28px 16px; }
    .sheet-body { padding: 20px 28px; }
    .sheet-foot { padding: 16px 28px 24px; }
    #rulesFoot { flex-direction: row; align-items: center; justify-content: space-between; }
    #rulesFoot .btn { width: auto; flex: none; }
    .sheet-foot > .btn-outline { width: auto; align-self: flex-end; min-width: 140px; }

    /* Login: centered card with intro above */
    .login { justify-content: center; max-width: 560px; }
    .login-card { padding: 28px; }
}

/* =====================================================
   Laptop / Desktop (≥ 1100px): full sidebar, two columns
   ===================================================== */
/* =====================================================
   iPad landscape / small laptop (≥ 1024px): two columns
   (side rail stays until 1100px, then the full sidebar)
   ===================================================== */
@media (min-width: 1024px) {
    :root { --gutter: 32px; --content: 1080px; --aside: 320px; }

    .view { padding-top: 40px; }

    /* Submit: steps left, profile + summary sticky right */
    .form-grid {
        grid-template-columns: minmax(0, 1fr) var(--aside);
        grid-template-rows: auto 1fr;
        grid-template-areas: "main top" "main side";
        gap: 20px 24px; align-items: start;
    }
    .area-side { position: sticky; top: 24px; }
    .choices { gap: 12px; }
    .choice { flex-direction: row; gap: 10px; }

    /* History: summary sticky left, list right */
    .hist-grid { grid-template-columns: var(--aside) minmax(0, 1fr); gap: 24px; align-items: start; }
    .hist-side { position: sticky; top: 24px; }

    .acc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }

    /* Login: split screen */
    .login {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        max-width: none; padding: 0; gap: 0;
    }
    .login-intro {
        display: flex; flex-direction: column; justify-content: center;
        padding: 64px clamp(40px, 6vw, 96px);
        background: var(--surface); border-right: 1px solid var(--line);
    }
    .login-intro h1 { font-size: 36px; }
    .intro-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
    .intro-steps li { display: flex; gap: 14px; align-items: flex-start; }
    .intro-steps .mono {
        display: grid; place-items: center; flex: none; width: 32px; height: 32px;
        border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 14px;
    }
    .intro-steps b { display: block; }
    .intro-steps small { font-size: 13px; color: var(--muted); }
    .login-main { justify-content: center; padding: 64px clamp(40px, 6vw, 96px) 32px; }
    .login-card { width: 100%; max-width: 440px; margin: auto auto 0; }
    .login-footer { width: 100%; max-width: 440px; margin: auto auto 0; }
}

/* =====================================================
   Laptop / Desktop (≥ 1100px): full sidebar
   ===================================================== */
@media (min-width: 1100px) {
    :root { --gutter: 40px; --side-w: 248px; }

    .sidenav { align-items: stretch; padding: 24px 16px; gap: 28px; }
    .sidenav .brand { padding: 0 8px; }
    .sidenav .brand-text { display: inline; }
    .sidenav .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 14px; font-size: 15px; }
    .nav-user { align-items: stretch; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
    .nav-user .chip { display: inline-flex; align-self: flex-start; }
    .nav-user-row { display: flex; align-items: center; gap: 10px; }
    .nav-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
    .nav-user-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-user-text small { font-size: 12px; color: var(--muted); }
    .nav-user .btn-text { flex-direction: row; font-size: 14px; gap: 6px; justify-content: flex-start; }
}

/* Wide screens (≥ 1280px): wider side column, photo beside its details */
@media (min-width: 1280px) {
    :root { --aside: 360px; }
    .photo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
    .photo img { max-height: 320px; }
}

/* Short screens (phones in landscape, split view): keep the side menu and sheets usable */
@media (min-width: 768px) and (max-height: 560px) {
    .sidenav { overflow-y: auto; gap: 12px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
    .sidenav .nav-item { min-height: 52px; }
    .nav-user .avatar { display: none; }
    .view { padding-top: 20px; }
}
@media (max-height: 560px) {
    .sheet-head { padding-top: 14px; padding-bottom: 10px; }
    .sheet-head p { display: none; }
    .viewer-foot .loc-link { display: none; } /* ปุ่ม "เปิดแผนที่" ยังอยู่ ให้รูปได้พื้นที่มากขึ้น */
    .sheet-foot { padding-top: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================
   History detail: photo viewer, location, PDF export
   ===================================================== */
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.photo-btn {
    position: relative; display: block; width: 100%; padding: 0;
    background: var(--field); border: 1px solid var(--line); border-radius: var(--r-sm);
    overflow: hidden; cursor: zoom-in;
}
.photo-btn img { width: 100%; max-height: 360px; object-fit: contain; border: 0; border-radius: 0; }
.photo-zoom {
    position: absolute; right: 8px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: 999px; background: rgba(22, 25, 29, .72); color: #fff; font-size: 12px; font-weight: 500;
}
.hist-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hist-meta p { margin: 0; font-size: 12px; color: var(--muted); }

.loc-link {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-box);
    background: var(--field); color: var(--ink); text-decoration: none; min-width: 0;
}
.loc-link .ic { margin-top: 2px; color: var(--accent); }
.loc-link span { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.loc-link b { font-size: 13px; }
.loc-link small { font-size: 12px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
span.loc-link .ic { color: var(--muted); }
@media (hover: hover) { a.loc-link:hover { border-color: var(--accent); } }

.viewer-body { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 12px; background: var(--ground); }
.viewer-body img { max-width: 100%; max-height: 70dvh; object-fit: contain; border-radius: var(--r-sm); }
.viewer-foot { gap: 12px; }
.viewer-actions { display: flex; gap: 10px; }
.viewer-actions .btn { flex: 1; }

.export-body { display: flex; flex-direction: column; gap: 16px; }
.export-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.export-pickers label { display: flex; flex-direction: column; gap: 6px; }
.export-pickers .select { width: 100%; height: 44px; }
.banner-info { background: var(--accent-soft); color: var(--accent); }

@media (min-width: 768px) {
    .viewer { max-width: 920px; }
    .viewer-foot { flex-direction: row; align-items: center; justify-content: space-between; }
    .viewer-foot .loc-link { flex: 1; }
    .viewer-actions .btn { width: auto; flex: none; padding: 0 20px; }
}

/* --- PDF pages (rendered off-screen, A4 = 794×1123 px) --- */
.pdf-stage { position: absolute; left: -12000px; top: 0; width: 794px; }
.pdf-page {
    position: relative; width: 794px; height: 1123px; padding: 44px 48px 40px;
    display: flex; flex-direction: column; gap: 20px;
    background: #fff; color: var(--ink); font-size: 13px; line-height: 1.5;
}
.pdf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.pdf-brand { display: flex; align-items: center; gap: 10px; }
.pdf-brand span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.pdf-brand b { font-size: 15px; }
.pdf-brand small { font-size: 11px; color: var(--muted); }
.pdf-title { font-size: 17px; font-weight: 600; text-align: right; }
.pdf-body { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.pdf-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }

.pdf-summary { display: flex; flex-direction: column; gap: 14px; }
.pdf-user { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; padding: 12px 14px; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-md); }
.pdf-user div { display: flex; flex-direction: column; }
.pdf-user small { font-size: 11px; color: var(--muted); }
.pdf-user b { font-size: 14px; }
.pdf-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pdf-tile { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.pdf-tile small { font-size: 11px; color: var(--muted); }
.pdf-tile b { font-size: 26px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pdf-tile span { font-size: 11px; color: var(--muted); }
.pdf-tile.is-warn b { color: var(--warn); }
.pdf-tile.is-bad b { color: var(--bad); }
.pdf-note { margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok); font-size: 12px; }
.pdf-note.is-warn { background: var(--warn-soft); color: var(--warn); }

.pdf-h3 { margin: 0 0 8px; font-size: 14px; }
.pdf-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pdf-table th { padding: 7px 8px; text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--field); border-bottom: 1px solid var(--line); }
.pdf-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.pdf-table td:first-child, .pdf-table th:first-child { width: 36px; color: var(--muted); }
.pdf-table a { color: var(--accent); text-decoration: none; }
.pdf-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 500; }
.pdf-chip.is-agent { background: var(--warn-soft); color: var(--warn); }
.pdf-muted, .pdf-empty { color: var(--muted); }

.pdf-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 14px; flex: 1; min-height: 0; }
.pdf-photo { margin: 0; display: flex; flex-direction: column; gap: 6px; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; }
.pdf-photo img, .pdf-photo-missing { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: var(--field); border-radius: var(--r-sm); }
.pdf-photo-missing { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.pdf-photo figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.pdf-photo figcaption span { color: var(--muted); }
/* html2canvas จัดกึ่งกลางด้วย grid/baseline ไม่ตรง: ใช้ line-height คงที่ในหน้า PDF */
.pdf-brand .logo { display: block; text-align: center; line-height: 36px; }
.pdf-chip { height: 20px; line-height: 20px; padding: 0 8px; vertical-align: middle; }
.pdf-tile b { margin: 2px 0 4px; }
.pdf-lift { position: relative; top: -3px; }
.pdf-chip { position: relative; top: 3px; }

/* =====================================================
   Skeleton loader — โครงเนื้อหาระหว่างรอข้อมูลจริง
   ใช้สี line-soft / field ของธีม, ไม่มีสีเน้น
   ===================================================== */
@keyframes skel-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel,
.is-booting [data-user]:not([data-user="avatar"]),
.is-booting [data-user="avatar"],
.is-syncing [data-today],
.is-syncing [data-agent-used],
.is-syncing .summary .big,
.is-syncing .summary .unit,
.is-syncing .summary-sub,
.is-syncing .summary-split .chip,
.is-syncing .agent-meter-top b,
.is-syncing .summary .meter,
.is-syncing #sumLabel,
.photo-btn.is-loading,
.viewer-body.is-loading {
    background: linear-gradient(90deg, var(--line-soft) 0%, var(--field) 50%, var(--line-soft) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel { display: block; border-radius: 6px; }
.skel-text { height: 12px; margin: 4px 0; }
.skel-sm { height: 10px; }
.skel-chip { width: 64px; height: 24px; border-radius: 999px; flex: none; }
.skel-icon { width: 16px; height: 16px; border-radius: 4px; flex: none; }

/* ข้อความที่ยังไม่มีข้อมูล: ซ่อนตัวอักษร เหลือแท่งโครง */
.is-booting [data-user]:not([data-user="avatar"]),
.is-syncing [data-today],
.is-syncing [data-agent-used],
.is-syncing .summary .big,
.is-syncing .summary .unit,
.is-syncing .summary-sub,
.is-syncing .summary-split .chip,
.is-syncing .agent-meter-top b,
.is-syncing #sumLabel,
.is-syncing .summary-sub *,
.is-syncing .agent-meter-top b * {
    color: transparent !important; border-radius: 6px; user-select: none;
}
.is-syncing .summary-sub * { background: none; }
.is-booting [data-user]:not([data-user="avatar"]) { display: inline-block; min-width: 9em; line-height: 1.2; margin: 2px 0; }
.is-booting [data-user="id"] { min-width: 5.5em; }
.is-booting [data-user="status"] { min-width: 11em; }
.is-booting dd[data-user] { min-width: 6em; }
.is-booting [data-user="avatar"] { color: transparent; }
.is-syncing [data-today] { min-width: 104px; min-height: 24px; }
.is-syncing [data-today] > * { visibility: hidden; }
.is-syncing [data-agent-used] { display: inline-block; min-width: 1.4em; }
.is-syncing .summary .big { display: inline-block; min-width: 1.6em; }
.is-syncing .summary .meter { background-color: transparent; }
.is-syncing .summary .meter-bar { visibility: hidden; }
.is-syncing .summary-split .chip > * { visibility: hidden; }
.is-syncing #exportOpen { visibility: hidden; }
.bars .skel { flex: 1; border-radius: 3px 3px 0 0; }

.hist-skel { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; }
.hist-skel .hist-when { display: flex; flex-direction: column; }

.photo-btn.is-loading { min-height: 220px; border-color: var(--line-soft); }
.photo-btn.is-loading img, .photo-btn.is-loading .photo-zoom { visibility: hidden; }
.photo-btn.is-failed { min-height: 0; }
.viewer-body.is-loading { min-height: min(50dvh, 420px); }
.viewer-body.is-loading img { visibility: hidden; }

/* ปุ่มกำลังทำงาน (เช่น เข้าสู่ระบบ): spinner เล็กในปุ่ม แทนการบังทั้งหน้าจอ */
.btn.is-busy { cursor: progress; }
.btn.is-busy .ic { display: none; }
.btn.is-busy::before {
    content: ""; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .skel, .is-booting [data-user], .is-syncing [data-today], .is-syncing [data-agent-used],
    .is-syncing .summary .big, .is-syncing .summary .unit, .is-syncing .summary-sub,
    .is-syncing .summary-split .chip, .is-syncing .agent-meter-top b, .is-syncing .summary .meter,
    .is-syncing #sumLabel, .photo-btn.is-loading, .viewer-body.is-loading { animation: none; background: var(--line-soft); }
}

/* =====================================================
   Google Blog layer — pill buttons, tinted cards, Google Sans
   ===================================================== */
body { font-size: 15px; letter-spacing: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.01em; }
.btn, .btn-chip, .btn-outline, .btn-danger { border-radius: 999px; font-weight: 500; }
/* ปุ่มหลักไล่สีน้ำเงินตามโลโก้ Double A (#126EE4 → #0850D1) */
.btn-primary, .btn-submit.is-ready { background: linear-gradient(135deg, #126EE4, #0850D1); }
.btn-outline { border-color: var(--outline); color: var(--accent); }
.btn-chip { border-color: var(--outline); }
.btn-text { font-weight: 500; }
@media (hover: hover) {
    .btn-primary:not(:disabled):hover, .btn-submit.is-ready:hover { box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15); }
    .btn-outline:hover, .btn-chip:not(:disabled):hover { background: var(--hover); border-color: var(--outline); }
}

.card, .tile, .hist-list { background: var(--field); border-color: transparent; }
.card .card, .card .tile { background: var(--surface); }
.input { background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--r-sm); }
.input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.select { border-color: var(--outline); border-radius: 999px; padding-left: 16px; }
.contact, .loc-link { background: var(--surface); border-color: var(--line); }
.upload { background: var(--surface); border-color: var(--dash); border-radius: var(--r-lg); }
.choice { border-width: 1px; border-color: var(--outline); background: var(--surface); border-radius: var(--r-lg); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.icon-box { background: var(--container); }
.step-num { background: var(--container); }
.segmented { background: var(--container); border-radius: 999px; }
.segmented button[aria-selected="true"] { background: var(--accent-soft); color: var(--on-accent-soft); }
.chip { background: var(--container); }
.bars span { background: var(--accent-soft); }
.photo img, .hist-body img, .photo-btn { background: var(--container); border-color: transparent; }
.menu button > .ic:first-child { color: var(--accent); }

/* Header: white bar with the Double A Paper Mill mark */
.logo { width: 36px; height: 36px; border-radius: 50%; background: none; object-fit: contain; }
.brand { font-weight: 500; font-size: 18px; letter-spacing: -.01em; color: var(--ink-2); }
a.brand { text-decoration: none; border-radius: 12px; -webkit-tap-highlight-color: transparent; transition: opacity .15s; }
a.brand:active { opacity: .6; }
a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
a.credit { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
a.credit:hover { color: var(--accent); }
.topbar { background: var(--topbar); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom-color: var(--line-soft); }
.bottomnav { border-top-color: var(--line-soft); }
.nav-item[aria-current="page"] { color: var(--on-accent-soft); }
.nav-item[aria-current="page"] .ic { background: var(--accent-soft); border-radius: 999px; padding: 4px 18px; box-sizing: content-box; }
.bottomnav .nav-item { gap: 4px; }

.eyebrow { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.view-head h2 { font-weight: 400; letter-spacing: -.02em; }
.sheet-head, .sheet-foot { border-color: var(--line-soft); }
.alert-actions .btn { border-radius: 999px; }

@media (min-width: 768px) {
    .sidenav { background: var(--surface); border-right-color: var(--line-soft); }
    .sidenav .nav-item[aria-current="page"] { background: var(--accent-soft); }
    .sidenav .nav-item[aria-current="page"] .ic { background: none; padding: 0; }
    .sidenav .nav-item { border-radius: 999px; }
    .view-head h2 { font-size: 32px; line-height: 1.25; }
}
@media (min-width: 1024px) {
    .login-intro { background: var(--field); border-right: 0; }
    .login-intro h1 { font-size: 48px; font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
    .login-intro h1 { font-size: clamp(32px, 3.3vw, 48px); text-wrap: balance; }
    .intro-steps .mono { background: linear-gradient(135deg, #126EE4, #0850D1); color: #fff; font-weight: 600; }
    .login-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(60, 64, 67, .08), 0 4px 16px rgba(60, 64, 67, .08); }
}
@media (min-width: 1100px) {
    .sidenav .nav-item { min-height: 52px; padding: 0 18px; }
    .view-head h2 { font-size: 36px; }
}
@media (max-width: 767px) {
    .login-intro h1 { font-size: 32px; font-weight: 400; letter-spacing: -.02em; }
}

.pdf-brand .logo { width: 36px; height: 36px; }

/* ปุ่มหลักตอนชี้: เข้มขึ้นแต่ยังเป็นสีโลโก้ (ตัวอักษรขาวอ่านได้ทั้งโหมดสว่างและมืด) */
@media (hover: hover) {
    .btn-primary:not(:disabled):hover, .btn-submit.is-ready:hover { background: linear-gradient(135deg, #0F63D0, #0640AA); }
}

/* =====================================================
   การตั้งค่า (Settings) — ขนาดตัวอักษร · ลดภาพเคลื่อนไหว · หน้าตั้งค่า
   ===================================================== */
/* ขยายเฉพาะเนื้อหา (แถบเมนูคงขนาดเดิม) — zoom คำนวณความกว้างใหม่ ไม่ทำให้ล้นจอ */
:root[data-text="l"] :is(.view, .login, .sheet-body, .sheet-head, .sheet-foot, .alert, .pending-page) { zoom: 1.12; }
:root[data-text="xl"] :is(.view, .login, .sheet-body, .sheet-head, .sheet-foot, .alert, .pending-page) { zoom: 1.25; }
:root[data-text="l"] .pdf-stage *, :root[data-text="xl"] .pdf-stage * { zoom: 1; }

:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}

.set-groups { display: flex; flex-direction: column; gap: 22px; }
.set-title { margin: 0 4px 8px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.set-list { list-style: none; padding: 0; margin: 0; background: var(--field); border-radius: var(--r-lg); overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; flex-wrap: wrap; }
.set-row + .set-row { border-top: 1px solid var(--line-soft); }
.set-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #fff; }
.set-icon .ic { width: 22px; height: 22px; }
.tone-blue { background: #1A73E8; } .tone-purple { background: #8E44D9; } .tone-teal { background: #12A4A4; }
.tone-green { background: #1E8E3E; } .tone-red { background: #E8453C; } .tone-amber { background: #E37400; }
.tone-gray { background: #5F6368; } .tone-indigo { background: #3F51B5; }
.set-text { flex: 1 1 10em; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.set-text b { font-size: 15px; font-weight: 500; }
.set-text small { font-size: 13px; color: var(--muted); }
.set-text small b { font-size: 13px; color: var(--ink-2); }
.set-ctrl { flex: none; display: flex; align-items: center; }
.set-info { flex: 1 1 100%; padding-left: 54px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.set-info .row-actions { margin-top: 0; }
/* ตัวเลือกแบบแคปซูล: บนมือถือลงบรรทัดใหม่ใต้ชื่อ */
.set-row.is-wide .set-ctrl { flex: 1 1 100%; }
.set-row.is-wide .set-seg { display: flex; width: 100%; flex-wrap: nowrap; }
.set-row.is-wide .set-seg button { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: nowrap; }
.set-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--container); max-width: 100%; }
.set-seg button {
    min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
    color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer;
}
.set-seg button[aria-checked="true"] { background: var(--accent-soft); color: var(--on-accent-soft); }
.set-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.set-select { width: auto; min-width: 140px; height: 40px; }
.set-switch { position: relative; display: inline-flex; cursor: pointer; }
.set-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.set-switch span {
    width: 52px; height: 32px; border-radius: 999px; background: var(--container); border: 2px solid var(--muted);
    position: relative; transition: background-color .15s, border-color .15s;
}
.set-switch span::after {
    content: ""; position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--muted); transition: transform .15s, width .15s, height .15s, top .15s, left .15s;
}
.set-switch input:checked + span { background: var(--accent-fill, #0850D1); border-color: var(--accent-fill, #0850D1); }
.set-switch input:checked + span::after { top: 2px; left: 2px; width: 24px; height: 24px; background: #fff; transform: translateX(20px); }
.set-switch input:disabled + span { opacity: .45; }
.set-switch input:disabled { cursor: not-allowed; }
.set-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-note { font-size: 12px; color: var(--muted); text-align: center; }
.set-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.set-status.is-ok { color: var(--ok); } .set-status.is-warn { color: var(--warn); } .set-status.is-bad { color: var(--bad); }

@media (min-width: 768px) {
    .set-row.is-wide .set-ctrl { flex: none; }
    .set-row.is-wide .set-seg { display: inline-flex; width: auto; }
    .set-row.is-wide .set-seg button { flex: none; padding: 0 14px; }
    .set-row.is-wide { flex-wrap: nowrap; }
}
.set-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }
.set-info b { color: var(--ink); font-weight: 500; }

/* --- ช่องรหัส 6 ช่อง (OTP) --- */
.otp { position: relative; }
.otp-input {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    opacity: 0; border: 0; font-size: 16px; /* 16px: iOS ไม่ซูมหน้าเมื่อแตะ */
    color: transparent; caret-color: transparent; background: transparent; cursor: text;
}
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp-boxes span {
    position: relative; display: grid; place-items: center; height: 58px;
    border: 1.5px solid var(--outline); border-radius: 14px; background: var(--surface);
    font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.otp-boxes span.is-filled { border-color: var(--ink-2); }
.otp-boxes span.is-active { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.otp-boxes span.is-active:not(.is-filled)::after {
    content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--accent);
    animation: otp-caret 1s steps(1) infinite;
}
@keyframes otp-caret { 50% { opacity: 0; } }
.otp.is-error .otp-boxes span { border-color: var(--bad); }
.otp.is-error .otp-boxes { animation: otp-shake .3s; }
@keyframes otp-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 359px) { .otp-boxes { gap: 5px; } .otp-boxes span { height: 50px; font-size: 20px; border-radius: 12px; } }

/* --- แถบขั้นตอน (Stepper) + เลื่อนแบบ snap นุ่มนวลระหว่างขั้นตอน --- */
.stepper {
    position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 10;
    margin: -4px calc(-1 * var(--gutter)) 16px; padding: 10px var(--gutter) 8px;
    background: var(--topbar); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.stepper ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stepper button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%;
    padding: 8px 0 0; border: 0; border-top: 3px solid var(--line); background: none; text-align: left; cursor: pointer;
    transition: border-color .25s;
}
.st-dot { display: none; }
.st-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.st-text small { font-size: 11px; color: var(--muted); }
.st-text b { font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper li.is-done button { border-top-color: var(--ok); }
.stepper li.is-done .st-text small { color: var(--ok); }
.stepper li.is-current button { border-top-color: var(--accent); }
.stepper li.is-current .st-text small, .stepper li.is-current .st-text b { color: var(--accent); }
.stepper-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.stepper-note .ic { flex: none; }
.stepper-note[hidden] { display: none; }
.stepper-note.is-done, .stepper-note.is-queued {
    padding: 10px 14px; border-radius: var(--r-box); font-weight: 500; font-size: 14px; width: fit-content; max-width: 100%;
}
.stepper-note.is-done { background: var(--ok-soft); color: var(--ok); }
.stepper-note.is-queued { background: var(--accent-soft); color: var(--on-accent-soft); }
/* --- เลื่อนทีละส่วน ---
   การเลื่อนเข้าที่ทำด้วย JS (SoftSnap ใน settings.js) ให้ลื่นกว่า CSS scroll-snap บน iPhone
   --snap-top = ตำแหน่งที่หัวข้อของแต่ละส่วนหยุด (ใต้แถบด้านบน / แถบขั้นตอน) */
:root { --snap-top: calc(56px + env(safe-area-inset-top) + 12px); }
#formView { --snap-top: calc(56px + 92px + env(safe-area-inset-top)); }
.view > .view-head, .view section.card, .view .card.step, .view .submit-card, .view .kpis, .view .table-card, .view > .toolbar, .view .banner {
    scroll-margin-top: var(--snap-top);
}

@media (min-width: 768px) {
    .stepper { top: 0; margin: 0 0 20px; padding: 12px 16px 10px; border-radius: var(--r-lg); background: var(--field); backdrop-filter: none; }
    .stepper button { flex-direction: row; align-items: center; gap: 10px; border-top: 0; padding: 0; }
    .st-dot {
        display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
        border: 1.5px solid var(--outline); background: var(--surface); color: var(--ink-2); font-size: 14px;
        transition: background-color .25s, border-color .25s, color .25s;
    }
    .stepper li.is-done .st-dot { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
    .stepper li.is-current .st-dot { background: linear-gradient(135deg, #126EE4, #0850D1); border-color: transparent; color: #fff; }
    :root, #formView { --snap-top: 24px; }
}
@media (min-width: 1024px) { .stepper { position: static; } }

/* --- แถบบน/เมนูล่างแบบกระจก: เลื่อนหน้าแล้วโปร่งแสงขึ้น --- */
.topbar, .bottomnav {
    background: var(--topbar);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    transition: background-color .25s, box-shadow .25s, border-color .25s;
}
.is-scrolled .topbar, .is-scrolled .bottomnav, .is-scrolled .stepper { background: var(--glass); }
.is-scrolled .topbar { box-shadow: 0 1px 0 var(--line-soft), 0 6px 16px rgba(0, 0, 0, .06); border-bottom-color: transparent; }
.nav-item .ic { transition: background-color .2s, padding .2s, transform .2s; }
.nav-item:active .ic { transform: scale(.9); }

/* --- Responsive: ช่องวันที่/เวลาบน iPhone ไม่ล้นขอบ, ตัวเลขย่อยใน KPI, ข้อความช่วยเหลือในหน้าตั้งค่า --- */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; display: block;
}
input[type="date"].input, input[type="time"].input, input[type="datetime-local"].input { width: 100%; line-height: 1.2; }
input::-webkit-date-and-time-value { text-align: left; margin: 0; }
input::-webkit-datetime-edit { padding: 0; }
.kpi span b, .kpi small b { font-size: inherit; line-height: inherit; }
@media (max-width: 479px) {
    .set-info { padding-left: 0; }
    .set-row { gap: 12px; padding: 12px 14px; }
}

/* =====================================================
   กราฟ (js/charts.js)
   ===================================================== */
.chart { position: relative; width: 100%; outline: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.chart svg { display: block; overflow: visible; }
.chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.chart-grid line { stroke: var(--line-soft); stroke-width: 1; }
.chart-grid text, .chart-axis text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart-bar .seg { opacity: .32; transition: opacity .2s; }
.chart-bar .empty { fill: var(--line); }
.chart.has-active .chart-bar.is-active .seg { opacity: 1; }
.chart:not(.has-active) .chart-bar .seg { opacity: .55; }
.chart-bars.is-enter .chart-bar { transform-box: fill-box; transform-origin: bottom; animation: bar-grow .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.chart-guide { stroke: var(--outline); stroke-width: 1.2; stroke-dasharray: 3 4; pointer-events: none; }
.chart-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; pointer-events: none; transition: cx .12s, cy .12s; }
.chart-line.is-draw { transition: stroke-dashoffset 1.1s cubic-bezier(.3, .7, .2, 1); }
.chart-fill.is-enter { animation: fade-in .9s ease .25s both; }
@keyframes fade-in { from { opacity: 0; } }
.chart-tip {
    position: absolute; z-index: 2; pointer-events: none; min-width: 64px;
    padding: 6px 10px; border-radius: 10px; background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 6px 18px rgba(0, 0, 0, .12); border: 1px solid var(--line-soft);
    font-size: 12px; line-height: 1.35; white-space: nowrap; transition: left .12s, top .12s;
}
.chart-tip small { display: block; color: var(--muted); font-size: 11px; }
.chart-tip b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; }
.chart-tip .sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gauge-track { stroke: var(--container); stroke-linecap: butt; }
.gauge-fill { stroke-linecap: butt; }
.gauge-fill.is-enter { stroke-dasharray: 400; stroke-dashoffset: 400; animation: gauge-draw .9s cubic-bezier(.3, .7, .2, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes gauge-draw { to { stroke-dashoffset: 0; } }
.gauge-label { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; line-height: 1.2; }
.gauge-label b { font-size: 34px; font-weight: 500; font-variant-numeric: tabular-nums; }
.gauge-label b small { font-size: 16px; color: var(--muted); }
.gauge-label span { display: block; font-size: 12px; color: var(--muted); }
:root[data-motion="reduce"] .chart * { animation: none !important; transition: none !important; }

/* =====================================================
   กล้องในแอป + ตัวเลือกถ่ายภาพ
   ===================================================== */
.upload-choices { display: grid; gap: 10px; }
.upload-choices .upload { width: 100%; font: inherit; }
.upload-choices.has-camera #photoPick { min-height: 0; flex-direction: row; gap: 8px; padding: 12px; border-style: solid; border-width: 1px; }
.upload-choices.has-camera #photoPick .ic { width: 20px; height: 20px; }
.upload-choices.has-camera #photoPick small { display: none; }
.upload-choices.has-camera #photoPick b { font-size: 14px; font-weight: 500; color: var(--accent); }
.upload-choices.has-camera #cameraOpen { border-style: solid; border-color: transparent; background: linear-gradient(135deg, #126EE4, #0850D1); color: #fff; }
.upload-choices.has-camera #cameraOpen .ic { color: #fff; }
.upload-choices.has-camera #cameraOpen small { color: rgba(255, 255, 255, .85); }

dialog.camera {
    position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0;
    background: #000; color: #fff; border-radius: 0;
}
dialog.camera::backdrop { background: #000; }
.cam-stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
#camVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#camVideo.is-mirror { transform: scaleX(-1); }
.camera.is-flash .cam-stage::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .7; pointer-events: none; }
.cam-guide { position: absolute; inset: 0; pointer-events: none; }
.g-corner { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .9); }
.g-corner.tl { top: var(--guide-top, 16%); left: 7%; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.g-corner.tr { top: var(--guide-top, 16%); right: 7%; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.g-corner.bl { bottom: var(--guide-bottom, 24%); left: 7%; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.g-corner.br { bottom: var(--guide-bottom, 24%); right: 7%; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.cam-btn-space { width: 48px; height: 48px; }
.cam-top { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 24px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.cam-profile { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
/* คำแนะนำ: บรรทัดของตัวเองใต้แถบโปรไฟล์ (จอแนวนอนกว้างพอ = อยู่ขวามือในแถวเดียวกัน) */
.cam-hint { flex: 1 1 100%; margin: 0; padding: 7px 14px; border-radius: 14px; background: rgba(0, 0, 0, .5); font-size: 13px; line-height: 1.45; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (orientation: landscape) and (min-width: 700px) {
    .cam-top { flex-wrap: nowrap; }
    .cam-hint { flex: 0 1 auto; max-width: 46%; }
}
.cam-profile small { display: block; font-size: 11px; opacity: .8; }
.cam-profile b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: #0850D1; font-weight: 600; }
.cam-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.cam-stamp { margin: 0 0 14px; font-size: 12px; text-align: center; opacity: .9; font-variant-numeric: tabular-nums; }
.cam-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.cam-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cam-shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 4px; cursor: pointer; }
.cam-shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .12s; }
.cam-shutter:active span { transform: scale(.88); }
.cam-review { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; }
.cam-review img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.cam-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
.cam-review-actions .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }

/* --- รายงานรอส่ง (ออฟไลน์) + toast ของหน้าผู้ใช้สิทธิ์ --- */
.outbox-banner { align-items: center; margin-bottom: 14px; }
.outbox-banner > div { flex: 1; min-width: 0; }
.outbox-banner span { display: block; font-size: 13px; }
.outbox-banner .btn-chip { flex: none; }
#userToast {
    position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 120;
    transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--r-md);
    background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 500;
    transition: opacity .2s, transform .2s;
}
#userToast.is-show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 768px) { #userToast { bottom: 24px; } }

/* --- ปฏิทินของฉัน + ตัวนับโควตาตัวแทน --- */
.quota-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.quota-dots span {
    display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; min-width: 0;
    border: 1.5px solid var(--outline); background: var(--surface); color: var(--muted); font-size: 11px; font-family: var(--mono);
}
.quota-dots span.is-used { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.agent-meter[data-level="bad"] .quota-dots span.is-used { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.agent-meter .meter { display: none; }
.cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-nav b { min-width: 8.5em; text-align: center; font-size: 14px; font-weight: 500; }
.cal-nav .icon-btn { margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.cal-cell {
    display: grid; place-items: center; aspect-ratio: 1; max-height: 46px; width: 100%; padding: 0;
    border: 0; border-radius: 12px; background: var(--surface); color: var(--ink-2);
    font: 500 13px var(--mono); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.cal-cell.is-pad { background: none; }
.cal-cell.is-self { background: var(--accent); color: var(--on-accent); }
.cal-cell.is-agent { background: var(--warn); color: var(--on-warn); }
.cal-cell.is-missed { background: var(--bad-soft); color: var(--bad); }
.cal-cell.is-future { background: none; color: var(--muted); opacity: .5; cursor: default; }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-cell.is-picked { transform: scale(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.cal-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.cal-stats span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lg-self { background: var(--accent); } .lg-agent { background: var(--warn); } .lg-missed { background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
.cal-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); font-size: 13px; }
.cal-info b { flex: 1 1 100%; font-size: 14px; font-weight: 500; }
.cal-info span { color: var(--muted); }

/* --- แนะนำการใช้งานครั้งแรก: 3 หน้าจอ เลื่อนแนวนอนแบบ snap --- */
dialog.onboard {
    width: calc(100% - 2 * var(--gutter)); max-width: 420px; padding: 0; border-radius: var(--r-xl); overflow: hidden;
    display: flex; flex-direction: column;
}
dialog.onboard:not([open]) { display: none; }
dialog.onboard[open] { animation: pop .2s ease-out; }
.ob-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide { scroll-snap-align: center; scroll-snap-stop: always; padding: 24px 24px 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ob-art { width: 100%; height: auto; max-height: 34dvh; margin-bottom: 8px; }
.ob-step { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.ob-slide h2 { font-size: 21px; font-weight: 500; line-height: 1.35; }
.ob-slide p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.ob-slide p b { color: var(--ink); font-weight: 600; }
.ob-foot { display: flex; flex-direction: column; gap: 14px; padding: 12px 24px 22px; }
.ob-dots { display: flex; justify-content: center; gap: 6px; }
.ob-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width .25s, background-color .25s; }
.ob-dots span.is-on { width: 22px; background: var(--accent); }
.ob-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.ob-actions .btn { min-height: 48px; }