/* =========================================================
   MelkYab (ملک‌یاب) — design tokens + components
   Every color, size, space, radius and motion value lives
   in :root / [data-theme="dark"]. Components read tokens only.
   ========================================================= */

@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light;
  /* neutrals — cool, slightly teal-tinted */
  --bg: #F3F6F6;
  --surface: #FFFFFF;
  --surface-2: #EBF1F1;
  --surface-3: #DFE8E8;
  --line: #D6E0E0;
  --line-strong: #B9C8C8;
  --text: #102120;
  --text-2: #43585A;   /* 7.0:1 on white */
  --text-3: #5E7274;   /* 5.0:1 on white */
  /* brand — deep teal */
  --primary: #0E5C61;          /* 7.6:1 on white */
  --primary-hover: #0A4A4E;
  --primary-soft: #E0EFEF;
  --primary-soft-2: #C6E2E2;
  --on-primary: #FFFFFF;
  --focus: #1A8C93;
  /* AI accent — warm amber, used only on AI surfaces */
  --ai: #9C5306;               /* text/icon on light: 5.6:1 */
  --ai-fill: #E58C1F;          /* decorative fill, sparkle */
  --ai-soft: #FDF2E2;
  --ai-line: #F1CB92;
  --on-ai: #2B1700;
  /* status */
  --success: #1A6E40; --success-soft: #E1F2E8;
  --warning: #8A5A00; --warning-soft: #FBEFD6;
  --danger: #B3261E;  --danger-soft: #FCE9E7;
  --info: #2A55A8;    --info-soft: #E6EDFA;
  --neutral-badge: #5A6B6D; --neutral-badge-soft: #E9EEEE;
  /* map */
  --map-land: #E8EFEE; --map-block: #DAE4E3; --map-park: #CFE6D6; --map-mtn: #D9DED8;
  --map-road: #FFFFFF; --map-highway: #F4D8A6; --map-metro: #C2410C;
  /* type scale (1.2 minor third, 16 base) */
  --font: "Vazirmatn", Tahoma, sans-serif;
  --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-38: 2.375rem;
  --lh-body: 1.7; --lh-tight: 1.35;
  /* spacing — 4/8 grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  /* elevation */
  --sh-1: 0 1px 2px rgba(16, 33, 32, .06), 0 1px 1px rgba(16, 33, 32, .04);
  --sh-2: 0 4px 16px rgba(16, 33, 32, .08), 0 1px 3px rgba(16, 33, 32, .06);
  --sh-3: 0 16px 48px rgba(16, 33, 32, .16);
  /* motion */
  --dur-1: 160ms; --dur-2: 240ms; --dur-3: 360ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
  /* layout */
  --sidebar-w: 272px; --tabbar-h: 68px; --topbar-h: 64px; --page-max: 1240px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1415;
  --surface: #121F21;
  --surface-2: #192A2C;
  --surface-3: #223638;
  --line: #273B3D;
  --line-strong: #3A5355;
  --text: #E6EFEE;      /* 14:1 on surface */
  --text-2: #AFC2C1;    /* 8.4:1 */
  --text-3: #8DA2A1;    /* 5.8:1 */
  --primary: #5CC2BC;   /* 8.1:1 on surface */
  --primary-hover: #7AD3CE;
  --primary-soft: #133536;
  --primary-soft-2: #1C4849;
  --on-primary: #04211F;
  --focus: #7AD3CE;
  --ai: #F3B263;        /* 8.9:1 on surface */
  --ai-fill: #F0A040;
  --ai-soft: #2D2111;
  --ai-line: #5E4220;
  --on-ai: #2B1700;
  --success: #6FCF97; --success-soft: #133222;
  --warning: #EBB65A; --warning-soft: #33280F;
  --danger: #F28B82;  --danger-soft: #3A1B19;
  --info: #8DB0F2;    --info-soft: #172640;
  --neutral-badge: #A9B9B8; --neutral-badge-soft: #22302F;
  --map-land: #15242A; --map-block: #1B2D33; --map-park: #183528; --map-mtn: #1C2724;
  --map-road: #24383E; --map-highway: #5A4523; --map-metro: #F08A54;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 6px 20px rgba(0, 0, 0, .45);
  --sh-3: 0 20px 56px rgba(0, 0, 0, .6);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-16); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01";
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; text-wrap: balance; }
a { color: var(--primary); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.num { font-feature-settings: "tnum"; }

/* type roles */
.t-display { font-size: clamp(1.75rem, 1.2rem + 2.2vw, var(--fs-38)); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.t-h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, var(--fs-30)); font-weight: 800; }
.t-h2 { font-size: var(--fs-20); font-weight: 700; }
.t-h3 { font-size: var(--fs-18); font-weight: 700; }
.t-body { font-size: var(--fs-16); }
.t-small { font-size: var(--fs-14); line-height: 1.6; }
.t-caption { font-size: var(--fs-12); line-height: 1.5; }
.t-label { font-size: var(--fs-14); font-weight: 600; }

/* ---------- icons ---------- */
.od-icon { stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }
.od-icon.is-fill { fill: currentColor; stroke: none; }
.ico-20 { --od-icon-size: 20px; }
.ico-24 { --od-icon-size: 24px; }
.ico-16 { --od-icon-size: 16px; }
.ico-32 { --od-icon-size: 32px; }
.ico-48 { --od-icon-size: 48px; }
.flip-rtl { transform: scaleX(-1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; color: var(--text);
  font-weight: 600; font-size: var(--fs-16); line-height: 1; cursor: pointer; text-decoration: none;
  white-space: nowrap; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn-ghost { color: var(--primary); }
.btn-ai { background: var(--ai-soft); border-color: var(--ai-line); color: var(--ai); }
.btn-ai .od-icon { color: var(--ai-fill); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-ghost { color: var(--danger); }
.btn-sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-14); border-radius: var(--r-sm); }
.btn-lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-18); }
.btn-block { width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 36px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--primary-hover); }
  .btn-secondary:hover { border-color: var(--primary); background: var(--primary-soft); }
  .btn-ghost:hover { background: var(--primary-soft); }
  .btn-ai:hover { border-color: var(--ai-fill); }
  .btn-danger-ghost:hover { background: var(--danger-soft); }
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .spinner { display: inline-block; }
.spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- form ---------- */
.field { display: grid; gap: var(--s-1); }
.field-label { font-size: var(--fs-14); font-weight: 600; color: var(--text); }
.field-label .req { color: var(--danger); margin-inline-start: 2px; }
.field-help { font-size: var(--fs-12); color: var(--text-3); line-height: 1.5; }
.field-error { font-size: var(--fs-14); color: var(--danger); line-height: 1.5; }
.field-error:empty { display: none; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 var(--s-4);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font-size: var(--fs-16); transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.textarea { padding: var(--s-3) var(--s-4); min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: 20px 21px, 14px 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-start: var(--s-10); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-2); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.input-group { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-2); }
.input-group .input { border: 0; box-shadow: none; background: transparent; }
.input-group .addon { flex: none; display: flex; align-items: center; padding: 0 var(--s-4); color: var(--text-2); font-size: var(--fs-14); white-space: nowrap; }
.field.has-error .input-group { border-color: var(--danger); }
/* AI-filled highlight */
.field.is-ai .input, .field.is-ai .select, .field.is-ai .textarea, .field.is-ai .input-group, .field.is-ai .seg { border-color: var(--ai-fill); background-color: var(--ai-soft); }
.ai-confirm { display: none; justify-self: start; }
.field.is-ai .ai-confirm { display: inline-flex; }

.switch { position: relative; flex: none; width: 48px; height: 28px; appearance: none; margin: 0; border-radius: var(--r-pill); background: var(--line-strong); cursor: pointer; transition: background var(--dur-1); }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform var(--dur-2) var(--ease-out); }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(-20px); }
[dir="ltr"] .switch:checked::after { transform: translateX(20px); }

/* segmented control */
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; }
.seg button { min-height: 40px; min-width: 44px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-weight: 600; font-size: var(--fs-14); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--sh-1); }

/* option cards (radio as card) */
.opt-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; display: grid; gap: 2px; padding: var(--s-4); min-height: 72px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; text-align: start; }
.opt-title { font-weight: 700; }
.opt-desc { font-size: var(--fs-12); color: var(--text-3); line-height: 1.5; }
.opt[aria-checked="true"], .opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* toggle chips (amenities) */
.tchip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 500; cursor: pointer; white-space: nowrap; }
.tchip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.tchip .chk { display: none; }
.tchip[aria-pressed="true"] .chk { display: inline-block; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-14); font-weight: 500; white-space: nowrap; color: var(--text); }
.chip-ai { border-color: var(--ai-line); background: var(--ai-soft); color: var(--text); }
.chip-ai .chip-key { color: var(--ai); font-weight: 600; }
.chip-btn { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 36px; border: 0; padding: 0 var(--s-1); background: transparent; cursor: pointer; font-weight: 500; }
.chip-x { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-inline-end: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
@media (hover: hover) { .chip-x:hover { background: var(--ai-line); color: var(--text); } }
.chip-add { border-style: dashed; color: var(--primary); cursor: pointer; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; background: var(--neutral-badge-soft); color: var(--neutral-badge); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.no-dot::before { display: none; }
.badge-active { background: var(--success-soft); color: var(--success); }
.badge-reserved { background: var(--warning-soft); color: var(--warning); }
.badge-sold { background: var(--info-soft); color: var(--info); }
.badge-expired { background: var(--neutral-badge-soft); color: var(--neutral-badge); }
.badge-pending { background: var(--ai-soft); color: var(--ai); }
.badge-archived { background: var(--neutral-badge-soft); color: var(--neutral-badge); }
.badge-private, .badge-shared { background: var(--surface-2); color: var(--text-2); }
.badge-private::before, .badge-shared::before { display: none; }
.badge-match { background: var(--surface); color: var(--ai); border: 1px solid var(--ai-line); box-shadow: var(--sh-1); font-size: var(--fs-12); min-height: 28px; }
.badge-match::before { display: none; }
.badge-match .od-icon { color: var(--ai-fill); }
.badge-role { background: var(--primary-soft); color: var(--primary); }
.badge-role::before { display: none; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card-pad { padding: var(--s-5); }
@media (min-width: 768px) { .card-pad { padding: var(--s-6); } }
.section { display: grid; gap: var(--s-4); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.section-head h2 { font-size: var(--fs-18); font-weight: 700; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* listing card (tile) */
.lcard { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--text); text-decoration: none; transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
@media (hover: hover) { .lcard:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); } }
.lcard-media { position: relative; background: var(--surface-2); }
.lcard-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.lcard-media .badge-match { position: absolute; top: var(--s-3); inset-inline-start: var(--s-3); }
.lcard-media .lcard-vis { position: absolute; top: var(--s-3); inset-inline-end: var(--s-3); background: rgba(10, 20, 20, .66); color: #fff; }
.lcard-body { display: grid; gap: var(--s-2); padding: var(--s-4); align-content: start; }
.lcard-price { font-size: var(--fs-18); font-weight: 800; white-space: nowrap; }
.lcard-price small { font-size: var(--fs-14); font-weight: 500; color: var(--text-2); }
.lcard-place { font-size: var(--fs-14); color: var(--text-2); }
.specs { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-14); color: var(--text-2); }
.specs span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.why { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--ai-soft); font-size: var(--fs-14); line-height: 1.6; color: var(--text); }
.why .od-icon { color: var(--ai-fill); margin-top: 3px; }
.why b { color: var(--ai); font-weight: 600; }
.why-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* listing row */
.lrow { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lrow-thumb { flex: none; width: 112px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.lrow-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.lrow-main { flex: 1 1 0; min-width: 0; display: grid; gap: var(--s-1); }
.lrow-title { font-weight: 700; color: var(--text); text-decoration: none; }
.lrow-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }
@media (min-width: 768px) { .lrow-thumb { width: 168px; } .lrow { padding: var(--s-4); } }

/* stat tile */
.stat { display: grid; gap: var(--s-1); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.stat-label { font-size: var(--fs-14); color: var(--text-2); }
.stat-value { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1.2; white-space: nowrap; }
.stat-note { font-size: var(--fs-12); color: var(--text-3); }

/* bar chart (computed: width = --v / --max) */
.chart { display: grid; gap: var(--s-3); }
.bar-row { display: grid; grid-template-columns: minmax(84px, 7.5rem) minmax(0, 1fr) 3rem; align-items: center; gap: var(--s-3); }
.bar-label { font-size: var(--fs-14); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 14px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.bar { height: 100%; width: calc(var(--v) / var(--max) * 100%); border-radius: var(--r-pill); background: var(--primary); }
.bar-value { font-size: var(--fs-14); font-weight: 700; text-align: end; white-space: nowrap; }
.bar.c-active { background: var(--success); }
.bar.c-reserved { background: var(--warning); }
.bar.c-sold { background: var(--info); }
.bar.c-expired { background: var(--neutral-badge); }
.stack { display: flex; height: 16px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); gap: 2px; }
.stack > span { display: block; width: calc(var(--v) / var(--max) * 100%); }

/* avatar */
.avatar { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: var(--fs-16); }
.avatar-sm { width: 36px; height: 36px; font-size: var(--fs-14); }
.avatar-lg { width: 64px; height: 64px; font-size: var(--fs-24); }

/* tabs */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-4); border: 0; background: transparent; color: var(--text-2); font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.tab .count { min-width: 24px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-12); line-height: 22px; text-align: center; }
.tab[aria-selected="true"] .count { background: var(--primary-soft); }

/* skeleton */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmer 1.4s infinite; }
[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes shimmer { to { transform: translateX(-100%); } }
.skel-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.skel-card .skel-img { aspect-ratio: 3 / 2; border-radius: 0; }
.skel-card .skel-lines { display: grid; gap: var(--s-2); padding: var(--s-4); }
.skel-line { height: 14px; }

/* empty state */
.empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-10) var(--s-5); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.empty-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.empty h3 { font-size: var(--fs-18); }
.empty p { max-width: 44ch; color: var(--text-2); }
.empty-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }

/* notices */
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--info-soft); color: var(--text); font-size: var(--fs-14); }
.notice > .od-icon { margin-top: 4px; color: var(--info); }
.notice-ai { background: var(--ai-soft); border: 1px solid var(--ai-line); }
.notice-ai > .od-icon { color: var(--ai-fill); }
.notice-danger { background: var(--danger-soft); }
.notice-danger > .od-icon { color: var(--danger); }

/* sparkle mark for AI */
.ai-mark { color: var(--ai-fill); }

/* dialog / sheet */
dialog.sheet { width: min(100%, 560px); max-height: min(88dvh, 760px); margin: auto auto 0; padding: 0; border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); color: var(--text); box-shadow: var(--sh-3); }
dialog.sheet::backdrop { background: rgba(6, 16, 16, .5); }
dialog.sheet[open] { animation: sheet-in var(--dur-3) var(--ease-out); }
@keyframes sheet-in { from { transform: translateY(32px); opacity: 0; } }
@media (min-width: 768px) { dialog.sheet { margin: auto; border-radius: var(--r-xl); } }
.sheet-inner { display: grid; gap: var(--s-5); padding: var(--s-6); padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sheet-head h2 { font-size: var(--fs-20); }
.sheet-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.sheet-actions .btn { flex: 1 1 140px; }

/* toast */
.toast-wrap { position: fixed; inset-inline: 0; bottom: calc(var(--tabbar-h) + var(--s-4) + env(safe-area-inset-bottom)); display: grid; justify-items: center; pointer-events: none; z-index: 60; padding: 0 var(--s-4); }
@media (min-width: 1024px) { .toast-wrap { bottom: var(--s-8); } }
.toast { display: flex; align-items: center; gap: var(--s-3); max-width: 480px; padding: var(--s-3) var(--s-5); border-radius: var(--r-md); background: var(--text); color: var(--bg); box-shadow: var(--sh-3); font-weight: 500; pointer-events: auto; animation: toast-in var(--dur-2) var(--ease-out); }
.toast.out { animation: toast-out var(--dur-1) var(--ease-in) forwards; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(8px); opacity: 0; } }

/* map */
.map { position: relative; width: 100%; aspect-ratio: 400 / 260; border-radius: var(--r-lg); overflow: hidden; background: var(--map-land); border: 1px solid var(--line); }
.map > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-label { position: absolute; transform: translate(-50%, -50%); font-size: var(--fs-12); font-weight: 600; color: var(--text-3); white-space: nowrap; pointer-events: none; }
.map-pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); border: 2px solid var(--surface); background: var(--primary); color: var(--on-primary); font-size: var(--fs-12); font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: var(--sh-2); }
.map-pin::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--primary); border-bottom: 0; }
.map-pin[aria-pressed="true"] { background: var(--ai-fill); color: var(--on-ai); z-index: 2; }
.map-pin[aria-pressed="true"]::after { border-top-color: var(--ai-fill); }
.map-pin.dot { min-height: 0; width: 22px; height: 22px; padding: 0; border-radius: 50% 50% 50% 0; transform: translate(-50%, -100%) rotate(-45deg); }
.map-pin.dot::after { display: none; }
.map-hint { position: absolute; bottom: var(--s-3); inset-inline-start: var(--s-3); padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font-size: var(--fs-12); box-shadow: var(--sh-1); }

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