:root {
  /* Light theme (default) */
  --app: #F4F6F9; --card: #FFFFFF; --surf: #EEF2F7; --line: #E2E8F0; --line2: #EDF1F6; --line3: #CBD5E1;
  --ink: #0F172A; --muted: #5B677A; --soft: #334155;
  --accent: #1D4ED8; --accent-dk: #1E40AF; --accent-text: #1D4ED8; --on-accent: #FFFFFF; --accent-soft: rgba(29,78,216,0.18); --accent-line: #BFD0F5;
  --chip-bg: #E8EEFC; --chip: #1E3A8A; --chip-line: #C7D5F7;
  --good: #047857; --bad: #B45309; --warn-bg: #FFF7E6; --warn: #8A4B0A; --ok-bg: #E8F6EF; --ok: #065F46;
  --ai-bg: #EEF3FE; --ai: #1E3A8A; --heart: #E11D48;
  --disabled-bg: #CBD5E1; --disabled: #64748B; --placeholder: #94A3B8;
  --toast-bg: #0F172A; --toast: #FFFFFF; --overlay: rgba(15,23,42,0.62);
  --t0: #DCE4EE; --t1: #E4E1EE; --t2: #DCEAE8; --t3: #E9E5DC;
  --shadow: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.04);
  color-scheme: light;
}
html[data-theme="dark"] {
  --app: #0F1621; --card: #17212B; --surf: #1F2B38; --line: #263445; --line2: #202C39; --line3: #33445A;
  --ink: #E8EDF3; --muted: #8D9CAE; --soft: #C3CDD8;
  --accent: #2563EB; --accent-dk: #1D4ED8; --accent-text: #7AA7FF; --on-accent: #FFFFFF; --accent-soft: rgba(122,167,255,0.25); --accent-line: #2C4A7A;
  --chip-bg: #1E3355; --chip: #DCE7FF; --chip-line: #2C4A7A;
  --good: #5BD49A; --bad: #F5A35C; --warn-bg: #3A2E1A; --warn: #F3D199; --ok-bg: #163828; --ok: #CFF3E0;
  --ai-bg: #172A47; --ai: #CFE0FF; --heart: #F47195;
  --disabled-bg: #2A3646; --disabled: #6E7D8F; --placeholder: #6E7D8F;
  --toast-bg: #E8EDF3; --toast: #0F1621; --overlay: rgba(10,14,20,0.66);
  --t0: #22303F; --t1: #2A2D40; --t2: #213436; --t3: #302D27;
  --shadow: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--app); color: var(--ink); }
body { font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
a { color: var(--accent-text); }
#root { min-height: 100vh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }

.hdr { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line2); background: var(--app); }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.logo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.brand b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.brand small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-r { display: flex; align-items: center; gap: 6px; }
.lang { display: flex; padding: 3px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.lb { min-width: 38px; height: 34px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.lb.on { background: var(--accent); color: var(--on-accent); }
.pill { height: 42px; padding: 0 10px; border: 1px solid var(--line3); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

main { flex: 1; padding: 16px 16px 96px; display: flex; flex-direction: column; gap: 14px; }
main.flush { padding: 0 0 96px; }
h1 { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
p.lead { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.cap { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.btn { white-space: nowrap; height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn:active { background: var(--accent-dk); }
.btn:disabled { background: var(--disabled-bg); color: var(--disabled); cursor: not-allowed; }
.btn2 { min-height: 44px; padding: 0 14px; border: 1px solid var(--line3); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn2:active { background: var(--surf); }
.btn2.danger { color: var(--bad); }
.link { border: 0; background: transparent; color: var(--accent-text); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 0; }
.icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 22px; }

.searchbox { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1.5px solid var(--accent); border-radius: 16px; background: var(--card); }
.searchbox label { font-size: 12px; font-weight: 700; color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.06em; }
textarea, input[type=text], input[type=number], select {
  width: 100%; border: 1px solid var(--line3); border-radius: 12px; background: var(--card); color: var(--ink);
  font-size: 15px; line-height: 1.45; padding: 11px 13px; outline: none;
}
textarea { resize: none; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); }
.searchbox textarea { border: 0; padding: 0; background: transparent; }
::placeholder { color: var(--placeholder); }

.ex { width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; border-radius: 18px; background: var(--chip-bg); color: var(--chip); font-size: 13px; font-weight: 600; border: 1px solid var(--chip-line); cursor: pointer; }
.chip.soft { background: var(--card); border: 1px dashed var(--line3); color: var(--soft); }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--surf); color: var(--soft); font-size: 12px; font-weight: 600; }

.note { padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.ai { background: var(--ai-bg); color: var(--ai); }
.note.ok { background: var(--ok-bg); color: var(--ok); }
.empty { padding: 20px; border: 1px dashed var(--line3); border-radius: 14px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }

.card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.card .open { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; }
.ph { position: relative; height: 150px; display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 12px; background-size: cover; background-position: center; }
.ph .badge { position: relative; font-size: 11px; font-weight: 700; color: #fff; background: var(--overlay); padding: 4px 8px; border-radius: 8px; }
.t0 { background-color: var(--t0); } .t1 { background-color: var(--t1); } .t2 { background-color: var(--t2); } .t3 { background-color: var(--t3); }
.cbody { padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 4px; }
.ctitle { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.csub { font-size: 13px; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.price b { font-size: 18px; font-weight: 800; }
.price span { font-size: 12.5px; color: var(--muted); }
.good { color: var(--good) !important; font-weight: 600; } .bad { color: var(--bad) !important; font-weight: 600; }
.cfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px 14px; }
.why { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ai); font-weight: 600; }
.heart { width: 44px; height: 44px; border: 0; border-radius: 22px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.heart.on { color: var(--heart); } .heart.on svg { fill: var(--heart); }

.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 260px; background: var(--surf); scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.gallery::-webkit-scrollbar { display: none; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 20px; background: var(--overlay); color: #fff; display: grid; place-items: center; cursor: pointer; }
.gal-nav.prev { left: 10px; } .gal-nav.next { right: 10px; } .gal-nav.next svg { transform: rotate(180deg); }
#galCount { font-size: 12px; font-weight: 600; background: var(--overlay); padding: 6px 10px; border-radius: 8px; position: absolute; bottom: 12px; right: 12px; }
.gallery img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.gallery .ph { flex: 0 0 100%; height: 100%; }
.detail-top { position: relative; }
.detail-top .back { position: absolute; top: 12px; left: 12px; background: var(--overlay); border: 0; }
.detail-top .count { position: absolute; bottom: 12px; right: 12px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.facts div { background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.facts span { font-size: 11.5px; color: var(--muted); }
.facts b { font-size: 14px; font-weight: 600; }
.facts div:last-child:nth-child(odd) { grid-column: span 2; }
.broker { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 20px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; }

.form { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.frow { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line2); }
.frow:last-child { border-bottom: 0; }
.frow > span { font-size: 13px; color: var(--muted); }
.frow.miss { background: var(--warn-bg); }
.frow.miss > span { color: var(--warn); font-weight: 600; }
.frow input, .frow select { padding: 9px 11px; font-size: 14px; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; }
.thumb { position: relative; width: 76px; height: 76px; flex-shrink: 0; border-radius: 10px; background-size: cover; background-position: center; }
.thumb button { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: 13px; border: 0; background: var(--overlay); color: #fff; cursor: pointer; }
.upload { width: 76px; height: 76px; flex-shrink: 0; border-radius: 10px; border: 1px dashed var(--line3); display: grid; place-items: center; color: var(--muted); cursor: pointer; }

.plan { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--ai-bg); border: 1px solid var(--accent-line); }
.plan .cap { color: var(--accent-text); }
.plan b.big { font-size: 20px; font-weight: 800; }
.tier { padding: 14px; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; background: var(--card); cursor: pointer; text-align: left; color: var(--ink); }
.tier.on { border: 1.5px solid var(--accent); }
.tier .cap { color: var(--muted); } .tier.on .cap { color: var(--accent-text); }
.tier b { font-size: 18px; font-weight: 800; }
.tier span { font-size: 12.5px; color: var(--muted); }

.cmp-wrap { border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
.cmp { display: grid; font-size: 13px; }
.cmp div { padding: 10px; border-bottom: 1px solid var(--line2); }
.cmp .h { font-weight: 700; background: var(--surf); }
.cmp .k { color: var(--muted); }
.cmp .v { font-weight: 600; }

.botmsg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surf); border: 0; text-align: left; color: var(--ink); width: 100%; cursor: pointer; }
.botmsg .dot { width: 32px; height: 32px; flex-shrink: 0; border-radius: 16px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.req { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 78px; width: calc(100% - 32px); max-width: 528px; padding: 12px 14px; border-radius: 12px; background: var(--toast-bg); color: var(--toast); font-size: 13.5px; line-height: 1.4; font-weight: 500; z-index: 20; }
nav.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; border-top: 1px solid var(--line); background: var(--card); padding-bottom: env(safe-area-inset-bottom); }
nav.tabs .in { display: flex; width: 100%; max-width: 560px; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.tab.on { color: var(--accent-text); }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loading { display: flex; justify-content: center; padding: 30px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.seg button { height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.hscroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll .chip { flex-shrink: 0; white-space: nowrap; }
.panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.panel select, .panel input, .panel textarea { background: var(--app); }
.flabel { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; color: var(--ink); font: inherit; }
button.tile { cursor: pointer; border-color: var(--line3); }
.tile b { font-size: 20px; font-weight: 800; }
.tile span { font-size: 12px; color: var(--muted); }