:root {
    color-scheme: light dark;
    --bg: #f4f6f9; --surface: #ffffff; --border: #e2e7ee; --border-input: #7b8794;
    --text: #111827; --text-muted: #4b5563;
    --accent: #0b6bcb; --on-accent: #ffffff;
    --within: #15803d; --transport: #6d28d9; --outspec: #c2410c; --skip: #475569; --on-verdict: #ffffff;
    --brand-a: #0fb5a6; --brand-b: #1d63e0;
    --shadow-card: 0 18px 40px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
    --shadow-btn: 0 6px 16px rgba(15, 23, 42, .14);
    --radius: 22px; --ease: cubic-bezier(.2, .8, .2, 1);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0f17; --surface: #161c27; --border: #2a3342; --border-input: #8a96a6;
        --text: #f3f4f6; --text-muted: #a8b1bf;
        --accent: #3b8ff0; --on-accent: #06121f;
        --within: #22c55e; --transport: #a78bfa; --outspec: #fb7a4a; --skip: #94a3b8; --on-verdict: #0b0f17;
        --shadow-card: 0 18px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
        --shadow-btn: 0 6px 16px rgba(0, 0, 0, .45);
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
body { overscroll-behavior: none; }
#app { height: 100dvh; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen[hidden] { display: none; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px;
    border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 650; font-size: 16px; cursor: pointer; }
.btn-primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); box-shadow: var(--shadow-btn); }
.btn-block { width: 100%; }
.btn:active { transform: scale(.98); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.icon-btn-space { width: 44px; }
.hint { margin: 10px 4px 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); text-align: center; }

.brandbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px 8px; }
.brand-icon { width: 34px; height: 34px; }
.brand-name { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.packs { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 12px; }
.pack { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; }
.pack-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pack-name { font-weight: 700; font-size: 16px; }
.pack-meta { font-size: 13px; color: var(--text-muted); }
.pack-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.pack-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-a), var(--brand-b)); }
.pack-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.pack-buttons .btn { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
.empty { margin: auto; text-align: center; color: var(--text-muted); padding: 40px 20px; }
.empty-art { width: 120px; height: 150px; margin: 0 auto 16px; position: relative; }
.empty-art i { position: absolute; inset: 0; border-radius: 16px; border: 2px dashed var(--border-input); }
.empty-art i:nth-child(2) { transform: rotate(-8deg) translate(-10px, 4px); opacity: .5; }
.empty-art i:nth-child(3) { transform: rotate(7deg) translate(10px, 6px); opacity: .3; }
.home-actions { padding: 12px 16px 18px; }

.deckbar { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; }
.deck-progress { flex: 1; text-align: center; }
.deck-count { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.deck-meter { height: 4px; margin: 6px auto 0; max-width: 200px; border-radius: 2px; background: var(--border); overflow: hidden; }
.deck-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-a), var(--brand-b)); transition: width 300ms var(--ease); }
.stack { position: relative; flex: 1; margin: 6px 14px 4px; min-height: 0; }

.card { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; background: #0d1117; box-shadow: var(--shadow-card);
    touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.card.behind { transform: scale(.95) translateY(10px); filter: brightness(.92); transition: transform 260ms var(--ease); }
.card.flying { transition: transform 320ms var(--ease), opacity 320ms var(--ease); }
.card.returning { transition: transform 260ms cubic-bezier(.3, 1.4, .5, 1); }
.photo-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) brightness(.55); }
.photo-frame { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.photo-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; }
.photo-frame .box { fill: none; stroke: #ffd400; stroke-width: 6; vector-effect: non-scaling-stroke; stroke-dasharray: none; filter: drop-shadow(0 0 2px rgba(0,0,0,.8)); }
.no-photo { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa4b2; font-size: 15px; }
.segments { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 2; }
.segments i { flex: 1; height: 3.5px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.segments i.on { background: #fff; }
.tap-zone { position: absolute; top: 0; bottom: 38%; width: 35%; z-index: 2; }
.tap-zone.prev { left: 0; } .tap-zone.next { right: 0; }

.card-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 70px 16px 14px; color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%); }
.card-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.card-title h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.info-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .18); cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); }
.chip.ai { background: rgba(255, 255, 255, .92); color: #111827; }
.chip.ai b { font-weight: 800; }
.card-sub { margin-top: 8px; font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-past { margin-top: 4px; font-size: 12.5px; opacity: .8; }

.stamp { position: absolute; z-index: 4; padding: 6px 14px; border: 4px solid currentColor; border-radius: 12px; font-size: 30px; font-weight: 900;
    letter-spacing: .02em; opacity: 0; pointer-events: none; background: rgba(0, 0, 0, .12); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.stamp { color: var(--c, #fff); }
.stamp.right { top: 40px; left: 18px; transform: rotate(-14deg); }
.stamp.left { top: 40px; right: 18px; transform: rotate(14deg); }
.stamp.up { bottom: 42%; left: 50%; transform: translateX(-50%) rotate(-6deg); }
.stamp.down { top: 40px; left: 50%; transform: translateX(-50%); font-size: 24px; }
.stamp::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; background: rgba(255, 255, 255, .78); z-index: -1; }

.actions { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 10px 14px; }
.act { position: relative; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--surface); box-shadow: var(--shadow-btn);
    cursor: pointer; transition: transform 120ms var(--ease); }
.act:active { transform: scale(.9); }
.act span { position: absolute; bottom: -18px; font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.act { color: var(--c, var(--text-muted)); }
.act-undo, .act-down { width: 48px; height: 48px; }
.act-undo { color: var(--skip); }
.act-left, .act-right { width: 66px; height: 66px; }
.act-left svg, .act-right svg { width: 30px; height: 30px; stroke-width: 2.6; }
.act-up { width: 56px; height: 56px; }
.act:disabled { opacity: .4; }
.act.pulse { animation: pulse 300ms var(--ease); }
@keyframes pulse { 50% { transform: scale(1.14); } }

.finished { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px; }
.finished h2 { margin: 0; font-size: 24px; }
.finished p { margin: 0; color: var(--text-muted); }

.review-title { flex: 1; margin: 0; text-align: center; font-size: 17px; }
.review-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 16px 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--on-verdict); }
.pill { background: var(--c, var(--skip)); }
.review-list { flex: 1; overflow-y: auto; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.grp { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.grp-head { padding: 10px 14px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
.grp-head small { font-weight: 500; color: var(--text-muted); }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--border); min-height: 56px; }
.row:first-of-type { border-top: 0; }
.row-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--border); flex: none; }
.row-text { flex: 1; min-width: 0; font-size: 14px; }
.row-text small { display: block; color: var(--text-muted); font-size: 12.5px; }
.row select { min-height: 40px; border-radius: 10px; border: 1px solid var(--border-input); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; padding: 0 8px; }
.review-actions { padding: 12px 16px 16px; }

.sheet { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-panel { width: 100%; max-width: 520px; max-height: 82dvh; overflow-y: auto; background: var(--surface); border-radius: 22px 22px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
    animation: up 240ms var(--ease); }
@keyframes up { from { transform: translateY(40px); opacity: .6; } }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 12px; }
.sheet h2 { margin: 0 0 10px; font-size: 20px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 14.5px; margin-bottom: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }
.note-text { white-space: pre-wrap; background: var(--bg); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.sheet h3 { margin: 6px 0 8px; font-size: 14px; color: var(--text-muted); font-weight: 650; }

.celebrate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5, 10, 20, .55); }
.celebrate[hidden] { display: none; }
.celebrate-card { text-align: center; color: #fff; animation: pop 420ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.celebrate-ring { width: 104px; height: 104px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); box-shadow: 0 0 0 10px rgba(255, 255, 255, .12); }
.celebrate-ring svg { width: 56px; height: 56px; stroke-width: 3; color: #fff; }
.celebrate-title { font-size: 26px; font-weight: 850; }
.celebrate-sub { margin-top: 6px; font-size: 15px; opacity: .9; }

.toast { position: fixed; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px);
    padding: 12px 16px; border-radius: 14px; background: #111827; color: #fff; font-size: 14px; box-shadow: var(--shadow-btn); }
.toast[hidden] { display: none; }

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

.viewer { position: fixed; inset: 0; z-index: 30; background: #000; color: #fff; touch-action: none; overscroll-behavior: contain; }
.viewer[hidden] { display: none; }
.viewer-stage { position: absolute; inset: 0; overflow: hidden; }
.viewer-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.viewer-layer img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.viewer-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viewer-layer .box { fill: none; stroke: #ff2d55; stroke-width: 3; vector-effect: non-scaling-stroke; }
.viewer-layer .m-ref { stroke: #00e5ff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.viewer-layer .m-len { stroke: #2ee86b; stroke-width: 3; vector-effect: non-scaling-stroke; }
.viewer-layer .m-dot { fill: #fff; stroke: #000; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.viewer-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px;
    padding: calc(6px + env(safe-area-inset-top)) 10px 6px; background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,0)); }
.viewer-btn { color: #fff; }
.viewer-count { flex: 1; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.viewer-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px;
    border: 1.5px solid rgba(255,255,255,.55); background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.viewer-pill svg { width: 20px; height: 20px; }
.viewer-pill[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.viewer-pill.ghost { border-color: transparent; background: transparent; text-decoration: underline; }
.viewer-measure { position: absolute; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 12px 14px;
    border-radius: 16px; background: rgba(20,24,32,.92); font-size: 15px; line-height: 1.45; }
.viewer-measure[hidden] { display: none; }
.viewer-measure p { margin: 0 0 6px; }
.viewer-measure b { font-size: 20px; }
.viewer-measure-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.viewer-measure-row[hidden] { display: none; }
.viewer-measure-row input { width: 84px; min-height: 44px; border-radius: 10px; border: 1.5px solid #8a96a6; background: #0b0f17; color: #fff; font: inherit; font-size: 17px; padding: 0 10px; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 12px;
    background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; cursor: pointer; }
.viewer-nav.prev { left: 6px; } .viewer-nav.next { right: 6px; }
.viewer-nav[hidden] { display: none; }

.attach-list { display: flex; gap: 10px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 4px; }
.attach { flex: none; width: 120px; border: 1px solid var(--border); border-radius: 12px; padding: 0; background: var(--bg); color: var(--text);
    font: inherit; font-size: 13px; cursor: pointer; overflow: hidden; text-align: left; }
.attach img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; background: #fff; }
.attach span { display: block; padding: 6px 8px; }
.note-text.long { max-height: 40dvh; overflow-y: auto; }

.card-btns { display: flex; gap: 8px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ai-thread { display: flex; flex-direction: column; gap: 8px; max-height: 46dvh; overflow-y: auto; margin-bottom: 10px; }
.ai-q { align-self: flex-end; max-width: 85%; background: var(--accent); color: var(--on-accent); border-radius: 16px 16px 4px 16px; padding: 8px 12px; font-size: 14.5px; white-space: pre-wrap; }
.ai-a { align-self: flex-start; max-width: 95%; background: var(--bg); border-radius: 16px 16px 16px 4px; padding: 10px 12px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }
.ai-a.error { border: 1.5px solid var(--outspec); }
.ai-a.pending { color: var(--text-muted); }
.ai-cost { align-self: flex-start; font-size: 12px; color: var(--text-muted); margin-top: -4px; }
.ai-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ai-preset { border-color: var(--border-input); background: transparent; color: var(--text); }
.ai-form { display: flex; gap: 8px; align-items: stretch; }
.ai-form textarea, .ai-form input { flex: 1; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--border-input); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; padding: 10px 12px; resize: none; }

.sheet.sheet-top { z-index: 35; }
.viewer-bar .viewer-pill { padding: 0 12px; }
.viewer-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.move-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 10px 14px; border-radius: 14px;
    border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; font-weight: 650; text-align: left; cursor: pointer; }
.move-opt small { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.move-opt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip.moved { background: rgba(255, 214, 10, .92); color: #111827; }

.chip.check { background: rgba(255, 214, 10, .92); color: #111827; }
.field-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 8px; background: var(--bg); }
.field-row.checked { border-color: var(--within); }
.field-pic { flex: none; width: 96px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in; }
.field-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.field-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.field-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.field-label { font-size: 13.5px; font-weight: 650; color: var(--text-muted); }
.field-status { flex: none; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--border); color: var(--text); }
.field-status.check { background: #fde68a; color: #713f12; }
.field-status.ok { background: #dbeafe; color: #1e3a8a; }
.field-status.done, .field-status.checked { background: #dcfce7; color: #14532d; }
.field-line { display: flex; gap: 8px; }
.field-input { flex: 1; min-width: 0; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; padding: 0 10px; }
.field-ok { border-color: var(--border-input); background: transparent; color: var(--text); }
.field-note { color: var(--text-muted); font-size: 12.5px; }

.grp-head { align-items: center; }
.grp-title { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.grp-title span, .grp-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-flag { flex: none; max-width: 45%; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #fde68a; color: #713f12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { padding: 8px 10px; gap: 10px; }
.row-text { display: flex; flex-direction: column; gap: 2px; }
.row-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; overflow-wrap: anywhere; }
.row-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verdict-btn { flex: none; max-width: 7.5rem; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--c, var(--skip)); color: var(--on-verdict);
    font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.verdict-btn.open { background: transparent; color: var(--text-muted); border: 1.5px dashed var(--border-input); }
.changes { border-top: 1px solid var(--border); padding: 4px 14px 6px; font-size: 13.5px; }
.changes summary { cursor: pointer; color: var(--text-muted); font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.change { display: flex; align-items: center; gap: 6px; }
.change-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.change-x { width: 40px; height: 40px; }
.change-x svg { width: 18px; height: 18px; }
.opt-dot { display: inline-flex; align-items: center; gap: 8px; }
.opt-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.item-values { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.item-value { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.item-value.checked { border-color: var(--within); }

.review-list > .grp { flex: none; }
.verdict-btn { max-width: 7rem; padding: 0 10px; font-size: 13px; }
.chip.block, .grp-flag.block { background: #fecaca; color: #7f1d1d; }
.pack-old { margin-top: 6px; font-size: 13px; font-weight: 600; color: #713f12; background: #fde68a; border-radius: 10px; padding: 6px 10px; }

.viewer-caption { position: absolute; left: 10px; right: 10px; top: calc(60px + env(safe-area-inset-top)); padding: 6px 10px; border-radius: 10px;
    background: rgba(0,0,0,.55); color: #fff; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; pointer-events: none; }
.viewer-edit { position: absolute; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 16px; background: rgba(20,24,32,.94); }
.viewer-edit .viewer-edit-label { width: 100%; font-size: 13.5px; font-weight: 650; color: #cbd5e1; }
.viewer-edit .field-input { flex: 1; min-width: 0; background: #0b0f17; color: #fff; border-color: #8a96a6; }
.field-pick { text-align: left; cursor: pointer; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-search { width: 100%; margin-bottom: 8px; }
.list-pick { display: flex; flex-direction: column; gap: 6px; max-height: 55dvh; overflow-y: auto; margin-bottom: 10px; }
.list-pick .move-opt { min-height: 48px; }
.hint-box { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(11,107,203,.08); border: 1px solid rgba(11,107,203,.35); }
.hint-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.hint-text small { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.hint-use { flex: none; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.fields-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fields-head .field-ok { flex: none; }
.link-btn { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; min-height: 32px; }
.item-value .field-head { min-height: 24px; }
.item-value .field-pick, .field-line .field-pick { flex: 1; }