/* =========================================================
   Agusan Del Norte Tourism Council — app styles
   Layout follows LaDolce One (sticky app-bar, 480px shell, tile grid,
   fixed bottom nav). Colours come from the four logo quadrants.
   Everything uses tokens, so dark mode is the one override block below.
   ========================================================= */

:root {
    /* Logo quadrants */
    --brand-sun:    #f3be69;
    --brand-coral:  #ec6a5c;
    --brand-green:  #94d46c;
    --brand-blue:   #4a9bd0;

    /* Accent: a deeper water blue so white text on it passes contrast */
    --c-accent:        #2b78b8;
    --c-accent-strong: #1f5f94;
    --c-accent-wash:   #eef6fc;
    --c-on-accent:     #ffffff;

    --c-ink:        #14202b;
    --c-ink-soft:   #2a3744;
    --c-muted:      #637383;
    --c-muted-soft: #97a5b2;

    --c-surface:      #ffffff;
    --c-surface-sunk: #f1f5f8;
    --c-page:         #eef2f5;
    --c-border:       #e1e7ec;

    --c-danger:  #c2410c;
    --c-success: #15803d;
    --c-warn-bg: #fff7e6;
    --c-warn-ink:#8a5a00;

    /* Tile tints (icon chip backgrounds + glyph colour) */
    --tint-sun-bg:   #fdf1dc; --tint-sun:   #a96b06;
    --tint-coral-bg: #fde6e3; --tint-coral: #b53a2c;
    --tint-green-bg: #e9f7df; --tint-green: #3f7d1c;
    --tint-blue-bg:  #e3f0f9; --tint-blue:  #1f669f;

    --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px;
    --sh-1: 0 4px 12px rgba(20, 32, 43, .06);
    --sh-2: 0 10px 24px rgba(20, 32, 43, .08);
    --motion: .12s ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-accent:        #5aa9e0;
        --c-accent-strong: #7dbde9;
        --c-accent-wash:   #10222f;
        --c-on-accent:     #08141d;
        --c-ink:        #eef2f5;
        --c-ink-soft:   #d5dde4;
        --c-muted:      #9aa8b4;
        --c-muted-soft: #6d7b87;
        --c-surface:      #161c22;
        --c-surface-sunk: #1e262e;
        --c-page:         #0d1216;
        --c-border:       #29333c;
        --c-danger:  #f08a6e;
        --c-warn-bg: #2b2210; --c-warn-ink: #f3c56b;
        --tint-sun-bg:   #33270f; --tint-sun:   #f3be69;
        --tint-coral-bg: #3a1c18; --tint-coral: #f2897d;
        --tint-green-bg: #1d2e14; --tint-green: #a9de87;
        --tint-blue-bg:  #12283a; --tint-blue:  #7dbde9;
        --sh-1: 0 4px 12px rgba(0, 0, 0, .4);
        --sh-2: 0 10px 24px rgba(0, 0, 0, .5);
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--c-page);
    color: var(--c-ink-soft);
    font-size: 15px;
    line-height: 1.45;
}
body { overscroll-behavior: none; }
a { color: var(--c-accent); }
img { max-width: 100%; }

/* ---------- Shell ---------- */

.app-shell {
    min-height: 100vh;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: var(--c-surface);
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
}
.app-shell::before {   /* faint four-colour wash behind the top of every page */
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 260px;
    background:
        radial-gradient(120px 120px at 8% 0%,   color-mix(in srgb, var(--brand-sun) 22%, transparent), transparent),
        radial-gradient(140px 140px at 38% 0%,  color-mix(in srgb, var(--brand-coral) 14%, transparent), transparent),
        radial-gradient(140px 140px at 68% 0%,  color-mix(in srgb, var(--brand-green) 16%, transparent), transparent),
        radial-gradient(140px 140px at 96% 0%,  color-mix(in srgb, var(--brand-blue) 18%, transparent), transparent);
    pointer-events: none;
}
.app-content {
    position: relative;
    min-height: 100vh;
    padding: 16px 16px calc(96px + env(safe-area-inset-bottom));
}

/* ---------- App bar ---------- */

.app-bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: color-mix(in srgb, var(--c-surface) 86%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--c-border);
}
.app-bar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.app-bar-logo {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    background: #fff; box-shadow: var(--sh-1); border: 1px solid var(--c-border);
}
.app-bar-greeting { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.app-bar-hello { font-size: 11px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
.app-bar-greeting strong { font-size: 17px; font-weight: 800; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar-actions { display: flex; align-items: center; gap: 10px; }
.app-bar-bell {
    position: relative; width: 42px; height: 42px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-ink-soft);
}
.app-bar-bell-dot, .bottom-nav-dot {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: var(--brand-coral); border: 2px solid var(--c-surface);
}
.app-bar-bell-dot { top: 8px; right: 9px; }

/* ---------- Bottom nav ---------- */

.bottom-nav {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 50;
    width: 100%; max-width: 480px;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--c-surface) 92%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--c-border);
}
.bottom-nav a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 0 5px; border-radius: 14px;
    color: var(--c-muted); text-decoration: none; font-size: 11px; font-weight: 600;
}
.bottom-nav a.active { color: var(--c-accent); background: var(--c-accent-wash); }
.bottom-nav-dot { top: 5px; left: calc(50% + 6px); }

/* ---------- Type ---------- */

.page-title { font-size: 22px; font-weight: 800; color: var(--c-ink); margin: 4px 0 4px; letter-spacing: -.3px; line-height: 1.2; }
.page-subtitle { color: var(--c-muted); margin: 0 0 16px; font-size: 14px; }
.section-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); margin: 22px 2px 10px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; }
.section-head .section-label { margin-bottom: 10px; }
.section-link { font-size: 13px; font-weight: 600; text-decoration: none; }
.card-title { margin: 0 0 12px; font-size: 16px; color: var(--c-ink); display: flex; align-items: center; gap: 8px; }
.hint { color: var(--c-muted); font-size: 13px; margin: 10px 0 0; }
.muted { color: var(--c-muted-soft); }
.back-link { display: inline-block; margin: 0 0 10px; font-weight: 600; font-size: 14px; text-decoration: none; }
.meta-line { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 14px; margin-top: 6px; }

/* ---------- Cards, lists ---------- */

.card {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: 16px; margin-bottom: 12px; box-shadow: var(--sh-1);
}
.list { display: flex; flex-direction: column; gap: 8px; }
.list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 16px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    text-decoration: none; color: inherit;
    transition: transform var(--motion);
}
a.list-row:active { transform: scale(.985); }
.list-row.is-unread { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); background: var(--c-accent-wash); }
.list-row.is-muted { opacity: .55; }
.list-main { flex: 1; min-width: 0; }
.list-title { font-weight: 700; color: var(--c-ink); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.list-sub { color: var(--c-muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.list-meta { color: var(--c-muted-soft); font-size: 12px; white-space: nowrap; align-self: flex-start; }
.list-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.empty { text-align: center; color: var(--c-muted); padding: 26px 12px; border: 1px dashed var(--c-border); border-radius: var(--r-md); }

/* ---------- Tiles ---------- */

.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile {
    position: relative;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px; border-radius: var(--r-md);
    background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--sh-1);
    text-decoration: none; color: var(--c-ink);
    transition: transform var(--motion);
}
.tile:active { transform: scale(.97); }
.tile-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 8px; }
.tile-name { font-weight: 700; font-size: 15px; }
.tile-sub { font-size: 12px; color: var(--c-muted); }
.tile-badge {
    position: absolute; top: 10px; right: 10px; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: var(--r-pill); background: var(--brand-coral); color: #fff;
    font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.tile-sun   .tile-icon, .list-icon.tile-sun   { background: var(--tint-sun-bg);   color: var(--tint-sun); }
.tile-coral .tile-icon, .list-icon.tile-coral { background: var(--tint-coral-bg); color: var(--tint-coral); }
.tile-green .tile-icon, .list-icon.tile-green { background: var(--tint-green-bg); color: var(--tint-green); }
.tile-blue  .tile-icon, .list-icon.tile-blue  { background: var(--tint-blue-bg);  color: var(--tint-blue); }

/* ---------- Pinned announcement ---------- */

.pinned-card {
    display: block; text-decoration: none; color: inherit;
    padding: 16px; border-radius: var(--r-md); margin-bottom: 6px;
    background: linear-gradient(135deg, var(--tint-sun-bg), var(--tint-blue-bg));
    border: 1px solid var(--c-border);
}
.pinned-flag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tint-coral);
    margin-bottom: 6px;
}
.pinned-title { font-weight: 800; font-size: 17px; color: var(--c-ink); }
.pinned-body { color: var(--c-ink-soft); font-size: 14px; margin-top: 4px; }

.post-title { font-size: 18px; margin: 0; color: var(--c-ink); }
.post-meta { color: var(--c-muted); font-size: 12px; margin: 4px 0 10px; }
.post-body { color: var(--c-ink-soft); margin-top: 12px; overflow-wrap: anywhere; }
.post-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- Events ---------- */

.date-chip {
    width: 48px; flex: none; border-radius: 12px; text-align: center; padding: 5px 0;
    background: var(--tint-blue-bg); color: var(--tint-blue);
}
.date-chip.date-event    { background: var(--tint-coral-bg); color: var(--tint-coral); }
.date-chip.date-activity { background: var(--tint-green-bg); color: var(--tint-green); }
.date-chip-mon { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.date-chip-day { display: block; font-size: 20px; font-weight: 800; line-height: 1.05; }

.rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rsvp-btn {
    padding: 12px 6px; border-radius: 14px; font: inherit; font-weight: 700; cursor: pointer;
    background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-ink-soft);
}
.rsvp-btn small { display: block; font-weight: 600; color: var(--c-muted); }
.rsvp-btn.active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.rsvp-btn.active small { color: inherit; opacity: .8; }

/* ---------- Pills ---------- */

.pill {
    display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; white-space: nowrap;
    background: var(--c-surface-sunk); color: var(--c-muted);
}
.pill-going, .pill-status-open { background: var(--tint-green-bg); color: var(--tint-green); }
.pill-maybe, .pill-status-draft { background: var(--tint-sun-bg); color: var(--tint-sun); }
.pill-no { background: var(--tint-coral-bg); color: var(--tint-coral); }
.pill-kind { background: var(--tint-blue-bg); color: var(--tint-blue); }

/* ---------- Segmented ---------- */

.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--c-surface-sunk); margin-bottom: 14px; }
.segmented a, .segmented button {
    flex: 1; text-align: center; padding: 8px; border-radius: 10px; border: 0;
    font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--c-muted);
    background: transparent; cursor: pointer;
}
.segmented .active { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-1); }
.segmented-buttons { margin-bottom: 0; }

/* ---------- Forms ---------- */

.form label { display: block; font-size: 13px; font-weight: 700; color: var(--c-ink-soft); margin-bottom: 12px; }
.form input:not([type=checkbox]):not([type=range]), .form select, .form textarea,
.inline-form input, .inline-form select, .search input {
    display: block; width: 100%; margin-top: 6px;
    padding: 11px 12px; border-radius: 12px;
    border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
    font: inherit; font-size: 16px;   /* 16px stops iOS zooming on focus */
}
.form input:focus, .form select:focus, .form textarea:focus, .inline-form input:focus, .inline-form select:focus, .search input:focus {
    outline: 2px solid color-mix(in srgb, var(--c-accent) 40%, transparent); border-color: var(--c-accent);
}
.form .check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.inline-form input, .inline-form select { margin-top: 0; min-width: 0; flex: 1; }
.inline-form .w-num { flex: 0 0 76px; }

.compose summary {
    cursor: pointer; font-weight: 700; color: var(--c-accent); list-style: none;
    display: flex; align-items: center; gap: 8px;
}
.compose summary::-webkit-details-marker { display: none; }
.compose[open] summary { margin-bottom: 14px; }

.search { position: relative; margin-bottom: 14px; }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-muted); }
.search input { padding-left: 38px; margin-top: 0; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 18px; border-radius: 14px; border: 1px solid transparent;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform var(--motion), opacity var(--motion);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn-ghost { background: var(--c-surface); border-color: var(--c-border); color: var(--c-ink-soft); }
.btn-danger-ghost { background: transparent; border-color: color-mix(in srgb, var(--c-danger) 35%, transparent); color: var(--c-danger); }
.btn-small { padding: 7px 12px; font-size: 13px; border-radius: 11px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }
.icon-btn {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--c-accent-wash); color: var(--c-accent);
}
.x-btn {
    border: 0; background: transparent; color: var(--c-muted-soft); font-size: 22px; line-height: 1;
    cursor: pointer; padding: 0 4px;
}
.x-btn:hover { color: var(--c-danger); }
.danger-zone { margin-top: 24px; text-align: center; }

/* ---------- Flash ---------- */

.flash { padding: 12px 14px; border-radius: 14px; margin-bottom: 14px; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.flash-ok    { background: var(--tint-green-bg); color: var(--tint-green); }
.flash-error { background: var(--tint-coral-bg); color: var(--tint-coral); }
.flash-warn  { background: var(--c-warn-bg); color: var(--c-warn-ink); }

/* ---------- Welcome ---------- */

.welcome-screen {
    position: relative;
    min-height: 100vh; padding: 40px 22px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.welcome-logo { width: 220px; height: 220px; border-radius: 50%; background: #fff; box-shadow: var(--sh-2); }
.welcome-tag { color: var(--c-muted); margin: 18px 0 22px; font-weight: 600; }
.welcome-form { width: 100%; text-align: left; }
.welcome-help { color: var(--c-muted); font-size: 13px; }

/* ---------- Profile / directory ---------- */

.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head strong { color: var(--c-ink); font-size: 17px; }
.profile-head .pill { margin-top: 6px; }
.avatar {
    width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-weight: 800; font-size: 22px; color: #fff;
    background: conic-gradient(var(--brand-sun) 0 25%, var(--brand-coral) 0 50%, var(--brand-blue) 0 75%, var(--brand-green) 0);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.avatar-sm { width: 40px; height: 40px; font-size: 16px; }
.person-actions { display: flex; gap: 6px; }
.row-actions { display: flex; flex-direction: column; gap: 6px; }
.member-row { align-items: flex-start; }

/* ---------- Judging ---------- */

.criteria-list { padding: 6px 16px; }
.criteria-item {
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--c-border); margin: 0;
}
.criteria-item:last-of-type { border-bottom: 0; }
.criteria-item > span { flex: 1; min-width: 0; }
.criteria-total { font-weight: 800; color: var(--c-ink); }
.entry-no {
    display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
    border-radius: 10px; background: var(--tint-blue-bg); color: var(--tint-blue); font-weight: 800; font-size: 14px;
}
.entry-no-lg { min-width: 54px; height: 54px; font-size: 22px; border-radius: 16px; }
.score-chip { font-weight: 800; color: var(--tint-green); font-size: 17px; }
.score-chip small { color: var(--c-muted); font-weight: 600; font-size: 12px; }

.sheet-head { display: flex; align-items: center; gap: 14px; }
.score-row { padding: 14px; margin-bottom: 10px; }
.score-label { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; color: var(--c-ink); }
.score-label small { color: var(--c-muted); font-weight: 600; white-space: nowrap; }
.score-input { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.score-input input[type=range] { flex: 1; accent-color: var(--c-accent); height: 28px; }
.score-form .score-input input[type=number] { width: 84px; flex: none; margin-top: 0; text-align: center; font-weight: 800; }
.score-total-bar {
    position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 5;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-radius: var(--r-md);
    background: var(--c-ink); color: var(--c-surface); font-weight: 700;
}
.score-total-bar strong { font-size: 24px; }
.score-total-bar small { font-size: 14px; opacity: .7; }
.pager { display: flex; justify-content: space-between; margin-top: 18px; font-weight: 600; font-size: 14px; }
.pager a { text-decoration: none; }

.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
table.results { width: 100%; border-collapse: collapse; font-size: 14px; }
.results th, .results td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.results th { font-size: 12px; color: var(--c-muted); background: var(--c-surface-sunk); }
.results .left { text-align: left; white-space: normal; min-width: 140px; }
.results .rank { font-weight: 800; font-size: 16px; }
.results .avg { font-weight: 800; color: var(--c-ink); }
.results tr:last-child td { border-bottom: 0; }
.results tr.top-1 td { background: color-mix(in srgb, var(--brand-sun) 22%, transparent); }
.results tr.top-2 td { background: color-mix(in srgb, var(--brand-blue) 12%, transparent); }
.results tr.top-3 td { background: color-mix(in srgb, var(--brand-green) 14%, transparent); }
.legend { color: var(--c-muted); font-size: 13px; padding-left: 22px; }
.legend-plain { list-style: none; padding-left: 2px; }
.legend li::marker { font-weight: 700; }
.print-head { margin-bottom: 14px; }
.print-logo, .print-only { display: none; }

@media print {
    body, .app-shell { background: #fff; box-shadow: none; max-width: none; color: #000; }
    .app-shell::before, .app-bar, .bottom-nav, .no-print, .flash { display: none !important; }
    .app-content { padding: 0; min-height: 0; }
    .print-head { text-align: center; }
    .print-logo { display: block; width: 90px; margin: 0 auto 6px; }
    .print-only { display: flex; }
    .table-wrap { overflow: visible; border-color: #999; }
    .results th, .results td { border-color: #bbb; }
    .signatures { flex-wrap: wrap; gap: 30px 40px; margin-top: 50px; }
    .sig { flex: 1 1 180px; text-align: center; font-size: 13px; }
    .sig span { display: block; border-top: 1px solid #000; margin-bottom: 4px; }
}

/* ---------- Scanning paper sheets ---------- */

.scan-drop {
    position: relative;
    display: flex !important; flex-direction: column; align-items: center; gap: 6px;
    padding: 26px 14px; margin-bottom: 14px !important; border-radius: var(--r-md);
    border: 2px dashed color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
    background: var(--c-accent-wash); color: var(--c-accent); text-align: center; cursor: pointer;
}
.scan-drop strong { color: var(--c-ink); font-size: 16px; }
.scan-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tips { padding-left: 18px; }
.tips li { margin-bottom: 4px; }
.scan-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex: none; background: var(--c-surface-sunk); }

.scan-photo { position: relative; display: block; margin-bottom: 12px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-border); }
.scan-photo img { display: block; width: 100%; max-height: 340px; object-fit: contain; background: var(--c-surface-sunk); }
.scan-photo span {
    position: absolute; right: 8px; bottom: 8px; padding: 4px 9px; border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700;
}

.reading { display: flex; align-items: center; gap: 14px; }
.spinner {
    width: 30px; height: 30px; flex: none; border-radius: 50%;
    border: 3px solid var(--c-border); border-top-color: var(--c-accent);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.review-row { padding: 14px; }
.review-row.is-skipped { opacity: .5; }
.review-head { display: flex; gap: 8px; align-items: center; }
.review-head .check { margin: 0; flex: none; font-size: 13px; }
.review-head input:not([type=checkbox]) { margin-top: 0 !important; }
.review-head .w-num { flex: 0 0 72px; }
.review-flag { font-size: 13px; font-weight: 600; padding: 7px 10px; border-radius: 10px; margin-top: 8px; }
.flag-info { background: var(--tint-blue-bg); color: var(--tint-blue); }
.flag-warn { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.review-grid label { margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; display: flex !important; flex-direction: column; justify-content: space-between; }
.review-grid label span { line-height: 1.25; }
.review-grid label small { color: var(--c-muted); }
.review-grid input { text-align: center; font-weight: 800; padding: 9px !important; }
.review-grid .cell-unclear input { border-color: var(--brand-sun) !important; background: var(--c-warn-bg) !important; }
.review-grid .cell-bad input { border-color: var(--c-danger) !important; background: var(--tint-coral-bg) !important; }
.review-total { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 12px; font-size: 14px; }
.review-total strong { font-size: 20px; color: var(--c-ink); }
.review-mismatch { color: var(--c-warn-ink); background: var(--c-warn-bg); padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; }
.review-remarks { margin: 10px 0 0 !important; }
.review-bar {
    position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 5;
    padding: 10px 0; background: linear-gradient(transparent, var(--c-surface) 30%);
}

/* ---------- Public sign-up (/join) ---------- */

.join-screen { justify-content: flex-start; padding-top: 28px; }
.join-logo { width: 120px; height: 120px; margin-bottom: 14px; }
.join-screen .welcome-tag { margin: 4px 0 16px; }
.join-hint { margin: -4px 0 14px; }
.join-done { text-align: left; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.share-row { display: flex; gap: 8px; margin-top: 8px; }
.share-row input { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--c-border); background: var(--c-surface-sunk); color: var(--c-ink); font: inherit; font-size: 14px; }

/* ---------- User groups ---------- */
.pill-role-super_admin { background: var(--tint-coral-bg); color: var(--tint-coral); }
.pill-role-officer     { background: var(--tint-blue-bg);  color: var(--tint-blue); }
.pill-role-member      { background: var(--tint-green-bg); color: var(--tint-green); }
.group-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.role-select {
    padding: 6px 8px; border-radius: 10px; border: 1px solid var(--c-border);
    background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 13px; font-weight: 600;
}