/* 若者向けの今っぽいアプリ。淡い色のにじみ背景の上に、影と光で浮き上がるカードを重ねる。
   主役は青、ウハウハだけ金色。1カラム・スマホ前提。 */
:root {
  --bg: #EEF0F7;
  --surface: #FFFFFF;
  --surface-2: #F8F9FD;
  --sunken: #ECEEF6;
  --ink: #0E1220;
  --muted: #61667D;
  --line: #E1E4EF;
  --brand: #2B59FF;
  --brand-grad: linear-gradient(135deg, #2450FF 0%, #5B83FF 100%);
  --brand-soft: #E3EAFF;
  --on-brand: #FFFFFF;
  --gold: #F5B83D;
  --gold-bg: #FFF1CF;
  --good: #0E9A68;
  --good-bg: #DCF5E9;
  --mid: #A86A06;
  --mid-bg: #FFF0CC;
  --bad: #D93C42;
  --bad-bg: #FDE2E3;
  --blob1: rgba(43, 89, 255, .16);
  --blob2: rgba(24, 200, 160, .13);
  --blob3: rgba(255, 140, 90, .12);
  --hl: rgba(255, 255, 255, .95);
  --raise: 0 1px 1px rgba(14,18,32,.04), 0 2px 4px rgba(14,18,32,.04), 0 10px 20px -8px rgba(14,18,32,.12), 0 26px 44px -22px rgba(14,18,32,.22), inset 0 1px 0 var(--hl);
  --raise-sm: 0 1px 2px rgba(14,18,32,.06), 0 4px 10px -4px rgba(14,18,32,.14), inset 0 1px 0 var(--hl);
  --well: inset 0 2px 5px rgba(14,18,32,.07), inset 0 0 0 1px rgba(14,18,32,.04);
  --glow-brand: 0 16px 30px -10px rgba(43,89,255,.65);
  --frame: linear-gradient(150deg, #FFFFFF 0%, rgba(43,89,255,.38) 38%, rgba(24,200,160,.3) 72%, #FFFFFF 100%);
  --edge: #D3D8E8;
  --edge-line: rgba(14,18,32,.06);
  --pine: var(--brand);
  --sun: var(--gold);
  --font: "Bricolage Grotesque", "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090B12; --surface: #161A29; --surface-2: #121522; --sunken: #0C0F19; --ink: #EDEFF8; --muted: #9096AE; --line: #262B45;
    --brand: #7090FF; --brand-grad: linear-gradient(135deg, #3A5EFF 0%, #7090FF 100%); --brand-soft: #1B2350; --on-brand: #FFFFFF;
    --gold: #F5C15A; --gold-bg: #3A2D0E;
    --good: #4BD4A0; --good-bg: #0F2C21; --mid: #F0B93B; --mid-bg: #33280C; --bad: #FF7B80; --bad-bg: #3A1618;
    --blob1: rgba(70, 100, 255, .22); --blob2: rgba(20, 180, 150, .12); --blob3: rgba(255, 120, 80, .08);
    --hl: rgba(255, 255, 255, .07);
    --raise: 0 0 0 1px rgba(255,255,255,.05), 0 10px 22px -10px rgba(0,0,0,.7), 0 28px 48px -24px rgba(0,0,0,.9), inset 0 1px 0 var(--hl);
    --raise-sm: 0 0 0 1px rgba(255,255,255,.05), 0 6px 14px -6px rgba(0,0,0,.7), inset 0 1px 0 var(--hl);
    --well: inset 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
    --glow-brand: 0 16px 32px -10px rgba(70,100,255,.7);
    --frame: linear-gradient(150deg, rgba(120,145,255,.55) 0%, rgba(255,255,255,.06) 45%, rgba(24,200,160,.35) 100%); --edge: #04050A; --edge-line: rgba(255,255,255,.04);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #090B12; --surface: #161A29; --surface-2: #121522; --sunken: #0C0F19; --ink: #EDEFF8; --muted: #9096AE; --line: #262B45;
  --brand: #7090FF; --brand-grad: linear-gradient(135deg, #3A5EFF 0%, #7090FF 100%); --brand-soft: #1B2350; --on-brand: #FFFFFF;
  --gold: #F5C15A; --gold-bg: #3A2D0E;
  --good: #4BD4A0; --good-bg: #0F2C21; --mid: #F0B93B; --mid-bg: #33280C; --bad: #FF7B80; --bad-bg: #3A1618;
  --blob1: rgba(70, 100, 255, .22); --blob2: rgba(20, 180, 150, .12); --blob3: rgba(255, 120, 80, .08);
  --hl: rgba(255, 255, 255, .07);
  --raise: 0 0 0 1px rgba(255,255,255,.05), 0 10px 22px -10px rgba(0,0,0,.7), 0 28px 48px -24px rgba(0,0,0,.9), inset 0 1px 0 var(--hl);
  --raise-sm: 0 0 0 1px rgba(255,255,255,.05), 0 6px 14px -6px rgba(0,0,0,.7), inset 0 1px 0 var(--hl);
  --well: inset 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  --glow-brand: 0 16px 32px -10px rgba(70,100,255,.7);
    --frame: linear-gradient(150deg, rgba(120,145,255,.55) 0%, rgba(255,255,255,.06) 45%, rgba(24,200,160,.35) 100%); --edge: #04050A; --edge-line: rgba(255,255,255,.04);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { background: var(--bg); }
body {
  background:
    radial-gradient(70% 45% at 0% 0%, var(--blob1), transparent 70%),
    radial-gradient(60% 40% at 100% 18%, var(--blob2), transparent 70%),
    radial-gradient(70% 45% at 40% 100%, var(--blob3), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-appearance: none; appearance: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input { min-width: 0; }

/* ── ヘッダー ── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent), 0 8px 24px -18px rgba(14,18,32,.35);
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
}
.top-in { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; }
.logo { flex: 1; min-width: 0; }
.word { display: grid; min-width: 0; line-height: 1.1; }
.word b { font-weight: 900; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.word em, .lock .sub em { font-style: normal; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.word small { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--muted); white-space: nowrap; margin-bottom: 2px; }
.rate { flex-shrink: 0; display: flex; align-items: center; gap: 3px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--muted); box-shadow: var(--raise-sm); }
.rate input { width: 44px; background: transparent; border: 0; text-align: right; font-weight: 800; font-size: 17px; color: var(--ink); padding: 1px 0; }
.rate input:focus { outline: none; }
.rate:focus-within { box-shadow: var(--raise-sm), 0 0 0 2px var(--brand); }
#result { scroll-margin-top: calc(80px + env(safe-area-inset-top, 0px)); }

/* ── カード ── */
main { max-width: 560px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.card {
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) padding-box, var(--frame) border-box;
  border-radius: 26px; padding: 20px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0;
  box-shadow: 0 7px 0 -1px var(--edge), 0 7px 0 0 var(--edge-line), var(--raise);
  margin-bottom: 6px;
}
.label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.005em; line-height: 1.5; }
.label.step { gap: 10px; font-size: 17px; letter-spacing: -.015em; }
.label.step > i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 10px; background: var(--brand-grad); color: var(--on-brand); font-style: normal; font-size: 14px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 6px 12px -5px rgba(43,89,255,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ── ⓘ と吹き出し ── */
.info { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; display: inline-grid; place-items: center; background: var(--sunken); color: var(--muted); box-shadow: var(--raise-sm); }
.info svg { width: 14px; height: 14px; }
.info[aria-expanded="true"] { background: var(--ink); color: var(--surface); }
.info.sm { width: 18px; height: 18px; box-shadow: none; background: color-mix(in srgb, var(--muted) 16%, transparent); }
.info.sm svg { width: 12px; height: 12px; }
.info.help { width: 36px; height: 36px; font-size: 17px; font-weight: 800; color: var(--on-brand); background: var(--brand-grad); box-shadow: 0 8px 16px -8px rgba(43,89,255,.8), inset 0 1px 0 rgba(255,255,255,.35); }
.cost small, .disc small, .stat small, .rung span, .cons b, .product b { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.verdict .info { margin-top: 6px; background: rgba(255,255,255,.22); color: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.verdict .info[aria-expanded="true"] { background: #fff; color: #0E1220; }
.price-main .info { margin-left: auto; }
.tip { position: fixed; z-index: 60; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 600; line-height: 1.65; padding: 12px 14px; border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); animation: pop .16s ease-out; }
.tip::before { content: ""; position: absolute; top: -6px; left: calc(var(--ax, 50%) - 6px); width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.tip.up::before { top: auto; bottom: -6px; }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── 撮影 ── */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shot { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--sunken); max-width: 100%; box-shadow: var(--raise-sm); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(14,18,32,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 14px; line-height: 24px; padding: 0; }
.cam {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 136px; border: 0; border-radius: 22px; width: 100%;
  background: radial-gradient(120% 120% at 0% 0%, var(--brand-soft), var(--sunken) 70%);
  box-shadow: var(--well);
  font-weight: 800; color: var(--brand); font-size: 19px; letter-spacing: -.015em;
}
.cam svg { flex-shrink: 0; width: 62px; height: 62px; padding: 17px; border-radius: 22px; background: var(--brand-grad); color: var(--on-brand); box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.12); }
.cam:active { transform: scale(.985); }
.cam.small { min-height: 0; aspect-ratio: 1; font-size: 11px; flex-direction: column; gap: 4px; border-radius: 18px; }
.cam.small svg { width: 32px; height: 32px; padding: 8px; border-radius: 11px; box-shadow: 0 6px 12px -6px rgba(43,89,255,.7); }
.sub-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ghost { border: 0; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-radius: 16px; padding: 13px 14px; font-size: 13px; font-weight: 700; color: var(--ink); text-align: left; box-shadow: var(--raise-sm); }
.ghost:active { box-shadow: var(--well); }
select.ghost { width: 100%; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%), linear-gradient(180deg, var(--surface), var(--surface-2)); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%, 0 0; background-size: 5px 5px, 5px 5px, 100% 100%; background-repeat: no-repeat; padding-right: 32px; text-overflow: ellipsis; }
.ai-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; }
.ai-name { font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ai-switch { position: relative; display: block; cursor: pointer; flex-shrink: 0; }
.ai-row .info { margin-left: auto; }
.ai-row .ai-switch { order: 2; }
.ai-row .info { order: 3; }
.ai-row .ai-switch .knob { width: 44px; height: 26px; }
.ai-row .ai-switch .knob::after { width: 20px; height: 20px; }
.ai-row .ai-switch input:checked + .knob::after { transform: translateX(18px); }
select.wide { width: 100%; }

/* ── 計算の流れ（$60 → 40%OFF → $36 …） ── */
.flow { display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--brand-soft); border: 1px dashed color-mix(in srgb, var(--brand) 40%, transparent); }
.flow-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.flow .fv { font-weight: 800; color: var(--ink); background: var(--surface); padding: 3px 9px; border-radius: 999px; box-shadow: var(--raise-sm); white-space: nowrap; }
.flow .fv.strong { background: var(--brand-grad); color: var(--on-brand); }
.flow .fo { font-style: normal; font-weight: 800; font-size: 12px; color: var(--bad); white-space: nowrap; }
.flow .fa { color: var(--muted); font-weight: 800; }
.flow-empty { font-size: 12px; color: var(--muted); font-weight: 600; }
.ai-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ai-switch .knob { flex-shrink: 0; width: 50px; height: 30px; border-radius: 15px; background: color-mix(in srgb, var(--muted) 30%, var(--line)); position: relative; transition: background .18s; box-shadow: inset 0 2px 4px rgba(0,0,0,.15); }
.ai-switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #fff, #EEF0F6); transition: transform .2s cubic-bezier(.3,1.4,.5,1); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.ai-switch input:checked + .knob { background: var(--brand-grad); }
.ai-switch input:checked + .knob::after { transform: translateX(20px); }
.ai-switch input:focus-visible + .knob { outline: 2px solid var(--brand); outline-offset: 2px; }
.ai-switch .knob { display: block; }

.kw-top { display: flex; align-items: center; gap: 8px; background: var(--sunken); box-shadow: var(--well); border-radius: 16px; padding: 0 14px 0 4px; }
.kw-top:focus-within { box-shadow: var(--well), 0 0 0 2px var(--brand); }
.kw-top input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 10px; font-size: 15px; font-weight: 600; -webkit-appearance: none; appearance: none; }
.kw-top input:focus { outline: none; }
.brand-other { border: 0; background: var(--sunken); box-shadow: var(--well); border-radius: 16px; padding: 13px 15px; font-size: 15px; font-weight: 600; width: 100%; }
.brand-other:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--brand); }

/* ── 画面の中のカメラ ── */
.camview { position: fixed; inset: 0; z-index: 70; background: #000; color: #fff; display: grid; }
.camview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.on { animation: flash .28s ease-out; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
.cam-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(rgba(0,0,0,.5), transparent); }
.cam-pill { border: 0; border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 800; color: #fff; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.cam-pill:disabled { opacity: .4; }
.go-pill { background: var(--brand-grad); box-shadow: 0 10px 20px -8px rgba(43,89,255,.8), inset 0 1px 0 rgba(255,255,255,.35); }
.cam-hint { position: absolute; left: 50%; top: calc(72px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); max-width: calc(100% - 32px); text-align: center; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 14px;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.cam-strip { display: flex; gap: 8px; justify-content: center; min-height: 54px; }
.cam-strip img { width: 54px; height: 54px; object-fit: cover; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.cam-ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.cam-ctrl .cam-pill:first-child { justify-self: start; }
.cam-ctrl .cam-pill:last-child { justify-self: end; }
.shutter { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 4px; }
.shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .1s; }
.shutter:active span { transform: scale(.88); }
.shutter:disabled { opacity: .35; }

/* ── 最終仕入れ価格・仕入れ額：いちばん大事なので目立たせる ── */
.cost { gap: 0 !important; border-radius: 22px; overflow: hidden; background: var(--brand-grad); box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.3); position: relative; isolation: isolate; }
.cost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(100% 120% at 100% 0%, rgba(255,255,255,.28), transparent 55%); }
.cost > div { background: none !important; box-shadow: none !important; color: #fff; padding: 14px 16px !important; }
.cost > div + div { border-left: 1px solid rgba(255,255,255,.25); }
.cost small { color: rgba(255,255,255,.85) !important; }
.cost strong { font-size: 30px !important; letter-spacing: -.03em; text-shadow: 0 2px 8px rgba(0,0,0,.15); }
.cost .info.sm { background: rgba(255,255,255,.22); color: #fff; }

/* タグ価格のカードは詰めて表示 */
.card.tight { gap: 10px; padding-block: 18px 16px; }
.card.tight .price-main { padding: 6px 16px; border-radius: 18px; }
.card.tight .price-main span { font-size: 24px; }
.card.tight .price-main input { font-size: 32px; }
.card.tight .discounts, .card.tight .cost { gap: 8px; }
.card.tight .disc { padding: 6px 10px; border-radius: 16px; }
.card.tight .disc input { font-size: 20px; }
.card.tight .cost > div { padding: 9px 12px; border-radius: 16px; }
.card.tight .cost strong { font-size: 21px; }
.card.tight .ladder { gap: 6px; }
.card.tight .rung { padding: 9px 14px; border-radius: 16px; }
.card.tight .rung strong { font-size: 19px; }

/* ── 価格入力 ── */
.price-main { display: flex; align-items: center; gap: 6px; border-radius: 20px; padding: 10px 18px; background: var(--sunken); box-shadow: var(--well); }
.price-main:focus-within { box-shadow: var(--well), 0 0 0 2px var(--brand); }
.price-main span { font-size: 30px; font-weight: 800; color: var(--muted); }
.price-main input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 40px; font-weight: 800; letter-spacing: -.03em; padding: 2px 0; }
.price-main input::placeholder { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--muted); opacity: .8; }
.price-main input:focus { outline: none; }
.discounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.disc { border-radius: 18px; padding: 9px 12px; background: var(--sunken); box-shadow: var(--well); min-width: 0; }
.disc:focus-within { box-shadow: var(--well), 0 0 0 2px var(--brand); }
.disc small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.disc div { display: flex; align-items: baseline; gap: 2px; }
.disc input { width: 100%; min-width: 0; border: 0; background: transparent; font-size: 24px; font-weight: 800; padding: 0; }
.disc input::placeholder { color: var(--muted); opacity: .5; }
.disc input:focus { outline: none; }
.disc em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cost > div { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-radius: 18px; padding: 12px 14px; box-shadow: var(--raise-sm); }
.cost small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.cost strong { font-size: 25px; font-weight: 800; letter-spacing: -.025em; }

.ladder { display: grid; gap: 8px; }
.rung { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 18px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: var(--raise-sm); }
.rung i { width: 10px; height: 10px; border-radius: 50%; }
.rung span { font-size: 13px; font-weight: 700; }
.rung strong { font-size: 23px; font-weight: 800; letter-spacing: -.025em; }
.rung.be i { background: var(--mid); }
.rung.p30 i { background: var(--good); }
.rung.p50 i { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); }
.rung.p50 { background: linear-gradient(120deg, var(--gold-bg), color-mix(in srgb, var(--gold-bg) 35%, var(--surface))); box-shadow: var(--raise-sm), 0 10px 22px -14px rgba(245,184,61,.9); }

/* ── 下の浮かぶボタン ── */
.go-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 94%, transparent) 35%, transparent);
  padding: 26px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.go { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto; border: 0; border-radius: 999px; background: var(--brand-grad); color: var(--on-brand); font-size: 18px; font-weight: 800; padding: 19px; letter-spacing: .02em; box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.14); transition: transform .12s; }
.go svg { width: 22px; height: 22px; }
.go:active { transform: translateY(2px) scale(.99); }
.go:disabled { opacity: .6; }

/* ── 判定 ── */
.verdict { position: relative; overflow: hidden; border-radius: 30px; padding: 24px 22px 22px; display: grid; gap: 8px; color: #fff; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 14px -6px rgba(0,0,0,.18), 0 24px 40px -18px var(--vglow, rgba(0,0,0,.4)); }
.verdict::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 90% at 100% 0%, rgba(255,255,255,.34), transparent 52%), radial-gradient(80% 70% at 0% 110%, rgba(0,0,0,.14), transparent 60%); }
.verdict.good { background: linear-gradient(135deg, #067A55 0%, #16B984 100%); --vglow: rgba(10,150,100,.65); }
.verdict.mid { background: linear-gradient(135deg, #F29A16 0%, #FFCB57 100%); color: #2B1A00; --vglow: rgba(240,160,30,.6); }
.verdict.bad { background: linear-gradient(135deg, #C42F38 0%, #F5666A 100%); --vglow: rgba(210,50,60,.6); }
.verdict.none { background: linear-gradient(135deg, #252B44 0%, #444E74 100%); --vglow: rgba(30,40,80,.55); }
.verdict h2 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; text-shadow: 0 2px 10px rgba(0,0,0,.12); }
.verdict p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.6; color: inherit; opacity: .95; }

.product { display: grid; gap: 4px; }
.product b { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.product small { color: var(--muted); font-size: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 0; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 700; box-shadow: var(--raise-sm); }
.chip:active { box-shadow: var(--well); }
.chip.on { background: linear-gradient(180deg, #232843, var(--ink)); color: #fff; box-shadow: 0 8px 16px -8px rgba(14,18,32,.6), inset 0 1px 0 rgba(255,255,255,.15); }
:root[data-theme="dark"] .chip.on { background: linear-gradient(180deg, #fff, #E4E7F2); color: #0E1220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.on { background: linear-gradient(180deg, #fff, #E4E7F2); color: #0E1220; } }
.chips:has(.lv) { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
.chip.lv { border-radius: 18px; text-align: left; padding: 11px 13px; display: grid; gap: 2px; min-width: 0; }
.chip.lv b { font-size: 14px; font-weight: 800; }
.chip.lv small { font-size: 10px; font-weight: 500; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cons { border-radius: 18px; padding: 13px 15px; display: grid; gap: 3px; font-size: 12px; box-shadow: inset 0 1px 0 var(--hl); }
.cons b { font-size: 15px; font-weight: 800; }
.cons.good { background: var(--good-bg); color: var(--good); }
.cons.mid { background: var(--mid-bg); color: var(--mid); }
.cons.bad { background: var(--bad-bg); color: var(--bad); }
.cons span { color: var(--ink); }

.links { display: grid; gap: 8px; }
.link { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-radius: 18px; padding: 14px 16px; font-size: 14px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; box-shadow: var(--raise-sm); }
.link:active { box-shadow: var(--well); }
.link small { color: var(--brand); font-size: 11px; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.link small::after { content: " ↗"; }
.kw { display: flex; gap: 8px; }
.kw input { flex: 1; min-width: 0; border: 0; background: var(--sunken); box-shadow: var(--well); border-radius: 16px; padding: 13px 15px; font-size: 15px; }
.kw input:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--brand); }
.kw button { border: 0; background: var(--brand-grad); color: var(--on-brand); border-radius: 16px; padding: 0 16px; font-weight: 800; font-size: 13px; box-shadow: 0 10px 18px -10px rgba(43,89,255,.8), inset 0 1px 0 rgba(255,255,255,.3); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.stat small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.4; }
.stat strong { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.stat.big { grid-column: span 2; }
.stat.big strong { font-size: 34px; letter-spacing: -.035em; }
.bars { display: grid; gap: 9px; }
.bar { display: grid; grid-template-columns: 92px 1fr 54px; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; }
.bar .track { height: 12px; border-radius: 6px; background: var(--sunken); box-shadow: var(--well); overflow: hidden; }
.bar .fill { height: 100%; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.bar em { font-style: normal; text-align: right; color: var(--muted); }

/* ── 売れた商品の一覧 ── */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 520px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.item { display: block; text-decoration: none; color: inherit; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--surface-2)); min-width: 0; box-shadow: var(--raise); transition: transform .14s; }
.item:active { transform: translateY(1px) scale(.985); }
.item .img { position: relative; aspect-ratio: 1; background: var(--sunken); }
.item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item .tag { position: absolute; left: 8px; bottom: 8px; background: rgba(10,12,20,.6); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.01em; padding: 4px 11px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18); }
.item .rank { position: absolute; left: 8px; top: 8px; min-width: 24px; text-align: center; background: linear-gradient(180deg, #FFD36E, var(--gold)); color: #3A2600; font-weight: 800; font-size: 11px; padding: 3px 8px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(180,120,0,.7), inset 0 1px 0 rgba(255,255,255,.6); }
.item .zone { position: absolute; right: 8px; top: 8px; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.item .meta { padding: 9px 11px 12px; }
.item .meta p { margin: 0 0 3px; font-size: 12px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item .meta small { color: var(--muted); font-size: 10px; }
.item .meta small b { color: var(--ink); font-weight: 800; }

/* ── 読み込み・エラー ── */
.loading { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--muted); padding: 6px 0; }
.spin { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--sunken); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.err { background: var(--bad-bg); color: var(--bad); font-weight: 700; border-radius: 20px; padding: 15px 17px; box-shadow: var(--raise-sm); }

/* ── 結果が出るときの動き ── */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#result > div > * { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
#result > div > *:nth-child(2) { animation-delay: .05s; }
#result > div > *:nth-child(3) { animation-delay: .1s; }
#result > div > *:nth-child(4) { animation-delay: .15s; }
#result > div > *:nth-child(5) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  #result > div > *, .tip { animation: none; }
  .go, .item, .cam, .ai-switch .knob, .ai-switch .knob::after { transition: none; }
  .spin { animation-duration: 3s; }
}

/* ── パスコード画面 ── */
.lock { position: fixed; inset: 0; z-index: 50; background: inherit; background-color: var(--bg); display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.lock form { width: 100%; max-width: 340px; display: grid; gap: 14px; text-align: center; }
.lock h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.lock p.sub { margin: 0 0 -8px; font-size: 13px; color: var(--muted); font-weight: 800; letter-spacing: .1em; }
.lock h1 { margin-bottom: 10px; }
.lock input { border: 0; background: var(--sunken); border-radius: 20px; padding: 17px; font-size: 18px; text-align: center; box-shadow: var(--well); }
.lock input:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--brand); }
.lock button { border: 0; background: var(--brand-grad); color: var(--on-brand); border-radius: 999px; padding: 17px; font-size: 16px; font-weight: 800; box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.14); }
.lock #lockErr { margin: 0; min-height: 1.5em; color: var(--bad); font-weight: 700; }

/* ── 厚みと枠：カード以外の大事な部品にも ── */
.verdict { border: 1.5px solid rgba(255,255,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 14px -6px rgba(0,0,0,.18), 0 7px 0 -1px rgba(0,0,0,.22), 0 26px 40px -18px var(--vglow, rgba(0,0,0,.4)); margin-bottom: 6px; }
.cost { border: 1.5px solid rgba(255,255,255,.4); box-shadow: 0 6px 0 -1px #1C3BC4, var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.3) !important; margin-bottom: 4px; }
.item { border: 1.5px solid transparent; background: linear-gradient(180deg, var(--surface), var(--surface-2)) padding-box, var(--frame) border-box; box-shadow: 0 5px 0 -1px var(--edge), var(--raise); margin-bottom: 4px; }
.go { box-shadow: 0 6px 0 -1px #1C3BC4, var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.35); }
.go:active { transform: translateY(4px); box-shadow: 0 2px 0 -1px #1C3BC4, var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.35); }

/* ── 今日のドル円は？ ── */
.rate-wrap { flex-shrink: 0; display: grid; justify-items: center; gap: 3px; }
.rate-q { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }

/* ── タグの価格 → 割引 → 仕入れ額 の流れ（上から下へ矢印） ── */
.down { display: grid; place-items: center; color: var(--brand); height: 26px; margin: -4px 0; }
.down svg { width: 26px; height: 26px; filter: drop-shadow(0 3px 4px rgba(43,89,255,.35)); animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.disc-box { display: grid; gap: 8px; padding: 10px; border-radius: 22px; border: 1.5px solid transparent;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) padding-box, var(--frame) border-box;
  box-shadow: 0 4px 0 -1px var(--edge), var(--raise-sm); }
.disc-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; padding: 0 4px; }
@media (prefers-reduced-motion: reduce) { .down svg { animation: none; } }

/* ── ボタンの角と縁に光の反射 ── */
:root { --gloss: rgba(255,255,255,.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gloss: rgba(255,255,255,.12); } }
:root[data-theme="dark"] { --gloss: rgba(255,255,255,.12); }
.go, .kw button, .go-pill, .lock button, .info.help, .label.step > i, .cam svg, .ai-switch input:checked + .knob {
  background-image:
    radial-gradient(60% 130% at 8% -10%, rgba(255,255,255,.6), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 52%),
    var(--brand-grad);
}
.go { box-shadow: 0 6px 0 -1px #1C3BC4, var(--glow-brand), inset 1.5px 1.5px 0 rgba(255,255,255,.55), inset -1px -2px 0 rgba(0,0,0,.14); }
.go:active { box-shadow: 0 2px 0 -1px #1C3BC4, var(--glow-brand), inset 1.5px 1.5px 0 rgba(255,255,255,.55), inset -1px -2px 0 rgba(0,0,0,.14); }
.kw button, .lock button, .go-pill, .info.help { box-shadow: 0 4px 0 -1px #1C3BC4, 0 10px 18px -10px rgba(43,89,255,.8), inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(0,0,0,.12); }
.label.step > i { box-shadow: 0 3px 0 -1px #1C3BC4, 0 6px 12px -5px rgba(43,89,255,.7), inset 1px 1px 0 rgba(255,255,255,.55); }
.cam svg { box-shadow: 0 5px 0 -1px #1C3BC4, var(--glow-brand), inset 1.5px 1.5px 0 rgba(255,255,255,.55), inset -1px -2px 0 rgba(0,0,0,.14); }
button.ghost, .ai-row.ghost, .chip:not(.on), .link, .rate {
  background:
    radial-gradient(70% 120% at 0% 0%, var(--gloss), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 3px 0 -1px var(--edge), var(--raise-sm), inset 1px 1px 0 var(--gloss);
}
.chip.lv:not(.on) { background: radial-gradient(70% 120% at 0% 0%, var(--gloss), transparent 55%), var(--sunken); }
.chip.on { box-shadow: 0 3px 0 -1px #000, 0 8px 16px -8px rgba(14,18,32,.6), inset 1px 1px 0 rgba(255,255,255,.22); }
button.ghost:active, .chip:active, .link:active { transform: translateY(2px); box-shadow: 0 1px 0 -1px var(--edge), var(--raise-sm); }

/* ── 丸い角のボタン＋縁に沿った光の反射（リムライト） ── */
:root { --rim: rgba(255,255,255,.95); --rim-soft: rgba(255,255,255,.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rim: rgba(255,255,255,.4); --rim-soft: rgba(255,255,255,.08); } }
:root[data-theme="dark"] { --rim: rgba(255,255,255,.4); --rim-soft: rgba(255,255,255,.08); }

button.ghost, .ai-row.ghost { border-radius: 24px; }
.link { border-radius: 22px; }
.kw button { border-radius: 999px; padding: 0 18px; }
.label.step > i { border-radius: 50%; }
.cam { border-radius: 30px; }
.cam svg { border-radius: 50%; box-shadow: 0 5px 0 -1px #1C3BC4, var(--glow-brand), inset 2.5px 2.5px 2px rgba(255,255,255,.65), inset -2px -3px 3px rgba(0,0,0,.18); }
.cam.small svg { border-radius: 50%; }
.lock button, .go-pill, .cam-pill { border-radius: 999px; }

.go, button.ghost, .ai-row.ghost, .chip, .kw button, .info.help, .link, .rate, .cam-pill, .label.step > i, .lock button { position: relative; }
.go::after, button.ghost::after, .ai-row.ghost::after, .chip::after, .kw button::after, .info.help::after, .link::after, .rate::after, .cam-pill::after, .label.step > i::after, .lock button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, var(--rim) 0%, var(--rim-soft) 16%, transparent 38%, transparent 72%, var(--rim-soft) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.go::after, .kw button::after, .info.help::after, .label.step > i::after, .lock button::after { padding: 2px; background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 18%, transparent 42%, transparent 75%, rgba(255,255,255,.22) 100%); }

/* ── ボタンに一本線の縁 ── */
:root { --btn-line: rgba(14,18,32,.16); --btn-line-blue: #1A38C0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --btn-line: rgba(255,255,255,.18); --btn-line-blue: #9DB2FF; } }
:root[data-theme="dark"] { --btn-line: rgba(255,255,255,.18); --btn-line-blue: #9DB2FF; }
button.ghost, select.ghost, .ai-row.ghost, .chip:not(.on), .link, .rate, .info { border: 1px solid var(--btn-line); }
.go, .kw button, .info.help, .lock button, .go-pill, .label.step > i { border: 1px solid var(--btn-line-blue); }
.cam svg { border: 1.5px solid var(--btn-line-blue); }
.chip.on { border: 1px solid #000; }
.cam-pill { border: 1px solid rgba(255,255,255,.45); }

/* ── 1枚目の画面に「割引」まで収める（ボタンが浮いていても重ならないように） ── */
.top { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
.word b { font-size: 19px; }
main { padding-top: 12px; gap: 12px; }
.card { padding: 14px 14px 14px; gap: 10px; border-radius: 24px; margin-bottom: 5px; }
.label.step { font-size: 15px; gap: 8px; }
.label.step > i { width: 24px; height: 24px; font-size: 12px; }
.cam { min-height: 78px; gap: 12px; font-size: 17px; border-radius: 24px; }
.cam svg { width: 50px; height: 50px; padding: 13px; }
.sub-btns { gap: 8px; }
button.ghost { padding: 10px 14px; }
.ai-row { padding: 6px 8px 6px 14px; }
.kw-top input { padding: 10px 8px; }
.card.tight { padding-block: 14px; gap: 8px; }
.card.tight .price-main { padding: 4px 14px; }
.card.tight .price-main input { font-size: 28px; }
.card.tight .price-main span { font-size: 22px; }
.down { height: 18px; margin: -3px 0; }
.down svg { width: 20px; height: 20px; }
.disc-box { padding: 8px; gap: 6px; border-radius: 20px; }
.disc-title { font-size: 12px; }
.card.tight .disc { padding: 5px 10px; }
.card.tight .disc small { font-size: 10px; }
.card.tight .disc input { font-size: 19px; }
.go-bar { padding-top: 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.go { padding: 15px; font-size: 17px; }
body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }