/* Presentation shell for the mobile prototype (not part of the shipped app UI) */
body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; }
.stage-top { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--hero); color: var(--on-dark); box-shadow: var(--sh-2); }
.stage-top .brand { display: flex; align-items: center; gap: 12px; }
.stage-top .brand img { height: 40px; width: 40px; object-fit: contain; filter: brightness(1.1); }
.stage-top .brand b { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.stage-top .brand span { display: block; font-size: 11.5px; color: var(--on-dark-2); }
.stage-top nav.links { display: flex; gap: 4px; margin-inline-start: 16px; }
.stage-top nav.links a { padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--on-dark-2); }
.stage-top nav.links a.on, .stage-top nav.links a:hover { background: rgba(250, 243, 233, .14); color: var(--cream-100); }
.stage-top .tools { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.pill-seg { display: flex; padding: 3px; background: rgba(250, 243, 233, .12); border-radius: 99px; }
.pill-seg button { padding: 6px 13px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--on-dark-2); }
.pill-seg button.on { background: var(--cream-100); color: var(--burgundy-700); }
.tbtn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(250, 243, 233, .12); color: var(--on-dark); }

.layout { display: grid; grid-template-columns: 270px minmax(420px, 1fr) 340px; gap: 28px; padding: 28px 28px 60px; max-width: 1560px; margin: 0 auto; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 16px; box-shadow: var(--sh-1); position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; }
.panel h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.grp { margin-top: 14px; }
.grp > .eyebrow { margin: 0 0 6px 4px; display: flex; align-items: center; gap: 8px; }
.sitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--text-2); transition: background var(--t-fast); }
.sitem:hover { background: var(--surface-2); }
.sitem.on { background: var(--burgundy-700); color: var(--cream-100); font-weight: 700; }
[data-theme="dark"] .sitem.on { background: var(--gold-500); color: var(--burgundy-900); }
.sitem .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); flex: none; }
.sitem small { margin-inline-start: auto; font-size: 10px; opacity: .6; }

.center-col { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.phone-wrap { position: relative; }
.phone-wrap::before { content: ""; position: absolute; inset: -40px -60px; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold-500) 22%, transparent), transparent); z-index: -1; }
.flowbar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 520px; }
.flowbar button { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); }
.flowbar button.on { background: var(--gold-500); border-color: var(--gold-500); color: var(--burgundy-900); }
.flowbar .num { opacity: .6; }
.flow-title { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .06em; }

.insp .id { font: 700 11px ui-monospace, Menlo, monospace; color: var(--text-3); direction: ltr; text-align: start; }
.insp h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 4px 0 10px; }
.insp .note { font-size: 13.5px; color: var(--text-2); background: var(--surface-2); padding: 12px 14px; border-radius: 16px; border-inline-start: 3px solid var(--gold-500); }
.api { display: block; font: 600 11.5px ui-monospace, Menlo, monospace; padding: 6px 9px; border-radius: 8px; background: var(--surface-2); margin-top: 6px; direction: ltr; text-align: start; color: var(--burgundy-600); }
[data-theme="dark"] .api { color: var(--gold-300); }
.kv { display: flex; justify-content: space-between; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }

/* Gallery */
.gallery { padding: 28px; max-width: 1760px; margin: 0 auto; }
.gal-group { margin-bottom: 44px; }
.gal-group > h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin-bottom: 4px; }
.gal-group > p { color: var(--text-2); margin-bottom: 20px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px 24px; justify-items: center; }
.gal-item { width: 100%; max-width: 300px; }
.gal-frame { width: 288px; height: 622px; position: relative; margin: 0 auto; cursor: pointer; transition: transform var(--t-base) var(--ease); }
.gal-frame:hover { transform: translateY(-6px); }
.gal-frame .phone { transform: scale(.7385); transform-origin: top left; position: absolute; inset-inline-start: 0; top: 0; }
[dir="rtl"] .gal-frame .phone { transform-origin: top right; }
.gal-frame .screen * { pointer-events: none; }
.gal-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 700; }
.gal-cap small { font-weight: 500; color: var(--text-3); direction: ltr; }
.hide { display: none !important; }

@media (max-width: 1200px) { .layout { grid-template-columns: 240px 1fr; } .insp-panel { display: none; } }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } .panel.list-panel { position: static; max-height: none; } .stage-top nav.links { display: none; } }