/* Layout: one phone-width column. Sticky jeweller header, one job per screen, floating glass tab bar with four labelled tabs,
   bottom sheets for every action. The jeweller's brand only: serif for headlines and prices, one accent, Outwerk in the footer. */
/* Palette pairs: each palette sets a light (-l) and dark (-d) value per token; the theme blocks only choose which side to read.
   Default palette: Plum (aubergine with champagne gold). Alternatives: Garnet (oxblood), Lavender (dusk lilac). */
:root{
  --p-ground-l:#F6F2F4; --p-bg-l:#FCFAFB; --p-surface-l:#FFFFFF; --p-surface2-l:#F5EEF2; --p-line-l:#EADFE6;
  --p-accent-l:#5B2C4F; --p-accent2-l:#45203C; --p-tint-l:#F2E6EE; --p-tint2-l:#E5D2DF; --p-onaccent-l:#FFFFFF; --p-shadow-l:rgba(91,44,79,.35);
  --p-ground-d:#130F13; --p-bg-d:#181319; --p-surface-d:#211B23; --p-surface2-d:#2A232D; --p-line-d:#392F3C;
  --p-accent-d:#D2A6C7; --p-accent2-d:#E3C3DA; --p-tint-d:#2F2232; --p-tint2-d:#3E2C42; --p-onaccent-d:#15101A; --p-shadow-d:rgba(0,0,0,.55);
  --p-gold-l:#8A6D3B; --p-gold-d:#D9BC80;

  --ground:var(--p-ground-l); --bg:var(--p-bg-l); --surface:var(--p-surface-l); --surface-2:var(--p-surface2-l); --line:var(--p-line-l);
  --fg:#1D181B; --muted:#6B6168; --faint:#A3989E;
  --accent:var(--p-accent-l); --accent-2:var(--p-accent2-l); --accent-tint:var(--p-tint-l); --accent-tint2:var(--p-tint2-l); --on-accent:var(--p-onaccent-l); --accent-shadow:var(--p-shadow-l);
  --gold:#A8894F; --gold-2:#E3CFA2; --gold-text:var(--p-gold-l);
  --good:#3F7A5A; --warn:#9A6B1E; --crit:#A8463F; --good-bg:#E4F0E8; --warn-bg:#F7ECD6; --crit-bg:#F7E3E0;
  --hl:rgba(255,255,255,.9); --shadow:rgba(60,40,55,.16); --shadow-2:rgba(60,40,55,.07);
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-ui:'Manrope','Helvetica Neue',Arial,sans-serif;
}
:root[data-palette="garnet"]{
  --p-ground-l:#F7F1F0; --p-bg-l:#FCF9F8; --p-surface2-l:#F6EDEC; --p-line-l:#ECDCDB;
  --p-accent-l:#7A1F2E; --p-accent2-l:#5C1622; --p-tint-l:#F7E6E8; --p-tint2-l:#EDD1D5; --p-shadow-l:rgba(122,31,46,.35);
  --p-ground-d:#140F10; --p-bg-d:#191314; --p-surface-d:#231B1C; --p-surface2-d:#2C2224; --p-line-d:#3C2F31;
  --p-accent-d:#E29AA6; --p-accent2-d:#EDB7C0; --p-tint-d:#33211F; --p-tint2-d:#432B2C; --p-onaccent-d:#1A1012;
}
:root[data-palette="lavender"]{
  --p-ground-l:#F3F1F7; --p-bg-l:#FAF9FC; --p-surface2-l:#F1EEF6; --p-line-l:#E3DEEC;
  --p-accent-l:#5E4E8C; --p-accent2-l:#493B70; --p-tint-l:#ECE8F5; --p-tint2-l:#DCD5EC; --p-shadow-l:rgba(94,78,140,.35);
  --p-ground-d:#100F16; --p-bg-d:#15131C; --p-surface-d:#1D1A26; --p-surface2-d:#25212F; --p-line-d:#332E40;
  --p-accent-d:#B9ABE6; --p-accent2-d:#CCC2EE; --p-tint-d:#26223A; --p-tint2-d:#352E4D; --p-onaccent-d:#120F1A;
}
/* Brand palettes (07-11-2026): Infinity Solitaires in ivory and ink with verdigris; The Carat Source strictly monochrome. */
:root[data-palette="infinity"]{
--p-ground-l:#F3EFE7; --p-bg-l:#FBF9F4; --p-surface-l:#FFFFFF; --p-surface2-l:#F6F2EA; --p-line-l:#DDD6C8;
--p-accent-l:#2F5D50; --p-accent2-l:#244A40; --p-tint-l:#E2EBE6; --p-tint2-l:#CFDCD5; --p-onaccent-l:#F6F3EC; --p-shadow-l:rgba(47,93,80,.35);
--p-ground-d:#161512; --p-bg-d:#1E1D19; --p-surface-d:#24221D; --p-surface2-d:#2A2824; --p-line-d:#33302A;
--p-accent-d:#7FB3A2; --p-accent2-d:#9CC6B8; --p-tint-d:#1F2F2A; --p-tint2-d:#2A3D36; --p-onaccent-d:#10201B; --p-shadow-d:rgba(0,0,0,.55);
--p-gold-l:#9A7B3F; --p-gold-d:#C9A86A;
}
:root[data-palette="carat"]{
--p-ground-l:#F7F7F7; --p-bg-l:#FFFFFF; --p-surface-l:#FFFFFF; --p-surface2-l:#F7F7F7; --p-line-l:#E5E5E5;
--p-accent-l:#171717; --p-accent2-l:#000000; --p-tint-l:#F0F0F0; --p-tint2-l:#E5E5E5; --p-onaccent-l:#FFFFFF; --p-shadow-l:rgba(0,0,0,.28);
--p-ground-d:#0F0F0F; --p-bg-d:#171717; --p-surface-d:#1F1F1F; --p-surface2-d:#262626; --p-line-d:#333333;
--p-accent-d:#FFFFFF; --p-accent2-d:#E5E5E5; --p-tint-d:#262626; --p-tint2-d:#333333; --p-onaccent-d:#171717; --p-shadow-d:rgba(0,0,0,.6);
--p-gold-l:#666666; --p-gold-d:#A8A8A8;
--font-display:Arial,'Helvetica Neue',Helvetica,sans-serif; --font-ui:Arial,'Helvetica Neue',Helvetica,sans-serif;
}
:root[data-palette="carat"] .greet h1, :root[data-palette="carat"] .brand .name, :root[data-palette="carat"] .disp, :root[data-palette="carat"] .price, :root[data-palette="carat"] .splash .mark{letter-spacing:-.02em;font-weight:400}
:root[data-palette="carat"] .card, :root[data-palette="carat"] .btn, :root[data-palette="carat"] .sheet, :root[data-palette="carat"] .iconbtn, :root[data-palette="carat"] .avatar, :root[data-palette="carat"] .tile-card, :root[data-palette="carat"] .tile-img{border-radius:4px}
:root[data-palette="carat"] .pill{border-radius:2px;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
:root[data-palette="carat"] .brand .wm{height:20px;width:auto;display:block}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-fc-theme="light"]){
    --ground:var(--p-ground-d); --bg:var(--p-bg-d); --surface:var(--p-surface-d); --surface-2:var(--p-surface2-d); --line:var(--p-line-d);
    --fg:#F3EEF1; --muted:#B3A8AE; --faint:#7E7479;
    --accent:var(--p-accent-d); --accent-2:var(--p-accent2-d); --accent-tint:var(--p-tint-d); --accent-tint2:var(--p-tint2-d); --on-accent:var(--p-onaccent-d); --accent-shadow:var(--p-shadow-d);
    --gold:#CDB078; --gold-2:#7A6436; --gold-text:var(--p-gold-d);
    --good:#86C09E; --warn:#D7B06A; --crit:#E08C84; --good-bg:#1F2E25; --warn-bg:#32291A; --crit-bg:#372220;
    --hl:rgba(255,255,255,.06); --shadow:rgba(0,0,0,.6); --shadow-2:rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]:not([data-fc-theme="light"]), :root[data-fc-theme="dark"]{
  --ground:var(--p-ground-d); --bg:var(--p-bg-d); --surface:var(--p-surface-d); --surface-2:var(--p-surface2-d); --line:var(--p-line-d);
  --fg:#F3EEF1; --muted:#B3A8AE; --faint:#7E7479;
  --accent:var(--p-accent-d); --accent-2:var(--p-accent2-d); --accent-tint:var(--p-tint-d); --accent-tint2:var(--p-tint2-d); --on-accent:var(--p-onaccent-d); --accent-shadow:var(--p-shadow-d);
  --gold:#CDB078; --gold-2:#7A6436; --gold-text:var(--p-gold-d);
  --good:#86C09E; --warn:#D7B06A; --crit:#E08C84; --good-bg:#1F2E25; --warn-bg:#32291A; --crit-bg:#372220;
  --hl:rgba(255,255,255,.06); --shadow:rgba(0,0,0,.6); --shadow-2:rgba(0,0,0,.4);
  color-scheme:dark;
}
:root[data-fc-theme="light"]{
  --ground:var(--p-ground-l); --bg:var(--p-bg-l); --surface:var(--p-surface-l); --surface-2:var(--p-surface2-l); --line:var(--p-line-l);
  --fg:#1D181B; --muted:#6B6168; --faint:#A3989E;
  --accent:var(--p-accent-l); --accent-2:var(--p-accent2-l); --accent-tint:var(--p-tint-l); --accent-tint2:var(--p-tint2-l); --on-accent:var(--p-onaccent-l); --accent-shadow:var(--p-shadow-l);
  --gold:#A8894F; --gold-2:#E3CFA2; --gold-text:var(--p-gold-l);
  --good:#3F7A5A; --warn:#9A6B1E; --crit:#A8463F; --good-bg:#E4F0E8; --warn-bg:#F7ECD6; --crit-bg:#F7E3E0;
  --hl:rgba(255,255,255,.9); --shadow:rgba(60,40,55,.16); --shadow-2:rgba(60,40,55,.07);
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--fg);font-family:var(--font-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
a{color:var(--accent);text-decoration:none}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

.app{max-width:430px;margin:0 auto;background:var(--bg);min-height:100%;position:relative;padding-bottom:124px;box-shadow:0 0 0 1px var(--line)}
@media (max-width:480px){body{background:var(--bg)}.app{box-shadow:none}}

/* splash */
.splash{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:opacity .5s ease,visibility .5s}
.splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.splash .mark{font-family:var(--font-display);font-size:34px;letter-spacing:.02em;opacity:0;animation:rise .7s ease .15s forwards}
.splash .sub{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:8px;opacity:0;animation:rise .7s ease .4s forwards}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.app.enter{animation:appIn .5s ease both}
@keyframes appIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transform:translateZ(0);background:var(--bg);box-shadow:0 1px 0 var(--line),0 10px 24px -18px var(--shadow);display:flex;align-items:center;justify-content:space-between;padding:12px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.view{padding-top:12px}
.brand{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand .name{font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:.01em;line-height:1.1;color:var(--fg)}
.brand .sub{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:600}
.top-actions{display:flex;align-items:center;gap:8px}
.iconbtn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 1px 0 var(--hl),0 6px 14px -8px var(--shadow),0 1px 2px var(--shadow-2);color:var(--muted);position:relative}
.iconbtn svg{width:19px;height:19px}
.iconbtn .badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px var(--bg)}
.avatar{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--on-accent);background:linear-gradient(150deg,var(--accent-2),var(--accent) 65%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 16px -8px var(--accent-shadow)}

/* views */
.view{display:none;padding:6px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));isolation:isolate;position:relative;z-index:0}
.view.active{display:block;animation:viewIn .25s ease;animation-fill-mode:none}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stack{display:flex;flex-direction:column;gap:14px}
.greet{padding:6px 0 4px}
.greet h1{font-family:var(--font-display);font-weight:500;font-size:34px;line-height:1.08}
.greet p{color:var(--muted);font-size:14px;margin-top:4px}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
.eyebrow.accent{color:var(--accent)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 -4px}
.sec-h button,.sec-h a{font-size:14px;color:var(--accent);font-weight:600;min-height:32px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:14px;min-height:44px;margin-top:-6px}
.back svg{width:18px;height:18px}

.card{background:var(--surface);border-radius:22px;padding:18px;box-shadow:inset 0 1px 0 var(--hl),0 14px 32px -16px var(--shadow),0 2px 6px -2px var(--shadow-2);position:relative}
.card.soft{background:var(--surface-2);box-shadow:inset 0 1px 0 var(--hl)}
.card.tint{background:linear-gradient(135deg,var(--accent-tint),var(--surface) 75%)}
.card h3{font-size:17px;font-weight:700;line-height:1.3}
.card h3.disp{font-family:var(--font-display);font-size:26px;font-weight:500}
.row{display:flex;align-items:center;gap:12px}
.row.between{justify-content:space-between}
.row.top{align-items:flex-start}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.tiny{font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.disp{font-family:var(--font-display);font-weight:500;line-height:1}
.price{font-family:var(--font-display);font-size:40px;font-weight:500;line-height:1}
.price small{font-family:var(--font-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:6px}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 10px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.crit{background:var(--crit-bg);color:var(--crit)}
.pill.brand{background:var(--accent-tint);color:var(--accent)}
.pill.plain{background:var(--surface-2);color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:15px;font-weight:700;font-size:15px;letter-spacing:.005em;transition:transform .15s,filter .15s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{color:var(--on-accent);background:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.12),0 10px 20px -10px var(--accent-shadow)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--accent-tint);color:var(--fg);box-shadow:inset 0 1px 0 var(--hl)}
.btn.quiet{background:var(--surface-2);color:var(--fg)}
.btn.block{width:100%}
.btn.sm{min-height:44px;padding:10px 14px;font-size:14px;border-radius:13px}
.btn svg{width:18px;height:18px}
.btn:disabled{opacity:.5;cursor:default}
.acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.acts .btn{flex:1}
.acts .btn.primary{flex:1.7}
.acts .btn{white-space:nowrap}

/* render (drawn placeholder for the CAD render or stone video) */
.render{position:relative;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,var(--surface),var(--surface-2) 70%);aspect-ratio:4/3;max-width:100%;box-shadow:inset 0 0 0 1px var(--line)}
.render.tall{aspect-ratio:3/4}
.render svg{position:absolute;inset:0;width:100%;height:100%}
.render .lab{position:absolute;left:10px;bottom:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:color-mix(in srgb,var(--fg) 70%,transparent);color:var(--bg);padding:4px 8px;border-radius:7px;font-weight:600}
.render .lab.r{left:auto;right:10px}
.thumb{width:76px;height:76px;border-radius:16px;overflow:hidden;flex:none;background:radial-gradient(120% 90% at 30% 20%,var(--surface),var(--surface-2) 70%);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.thumb svg{position:absolute;inset:0;width:100%;height:100%}

/* stage bar */
.stages{display:flex;align-items:center;margin-top:14px}
.stage{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;text-align:center;position:relative}
.stage i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:12px;font-style:normal;font-weight:700;color:var(--muted);box-shadow:inset 0 1px 0 var(--hl),0 1px 2px var(--shadow-2)}
.stage.done i{background:var(--accent);color:var(--on-accent)}
.stage.now i{background:var(--surface);color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 4px 10px -4px var(--accent-shadow)}
.stage b{font-size:12px;font-weight:700}
.stage.future b,.stage.future span{color:var(--faint)}
.stage span{font-size:11px;color:var(--muted);line-height:1.2}
.stage::after{content:"";position:absolute;top:13px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;background:var(--line)}
.stage.done::after{background:var(--accent)}
.stage:last-child::after{display:none}

/* timeline */
.tl{position:relative;padding-left:24px;margin-top:8px}
.tl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.tl li{position:relative;padding:10px 0 12px}
.tl li::before{content:"";position:absolute;left:-22px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--surface)}
.tl li.future::before{background:var(--surface);border:2px solid var(--line);width:8px;height:8px}
.tl .t{font-weight:700;font-size:15px}
.tl .d{font-size:13px;color:var(--muted);margin-top:1px}
.tl .n{font-size:14px;margin-top:6px;padding:10px 12px;background:var(--surface-2);border-radius:12px;line-height:1.45}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.fact{background:var(--surface-2);border-radius:14px;padding:12px;box-shadow:inset 0 1px 0 var(--hl)}
.fact span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.fact b{display:block;font-size:16px;font-weight:600;margin-top:3px}
.docs li{display:flex;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--line)}
.docs li:first-child{border-top:0}
.docs .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);flex:none}
.docs .ic svg{width:18px;height:18px}
.docs b{display:block;font-weight:600;font-size:15px}
.docs span{font-size:13px;color:var(--muted)}
.docs .go{margin-left:auto;color:var(--faint)}
.docs .go svg{width:18px;height:18px}

.incl li{display:flex;gap:10px;padding:8px 0;font-size:15px;border-top:1px solid var(--line)}
.incl li:first-child{border-top:0}
.incl li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:9px;flex:none}
.breakdown{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.breakdown li{display:flex;justify-content:space-between;font-size:14.5px;padding:6px 0;color:var(--muted)}
.breakdown li b{color:var(--fg);font-weight:600}
details summary{list-style:none;cursor:pointer;font-weight:600;color:var(--accent);font-size:14px;min-height:40px;display:flex;align-items:center}
details summary::-webkit-details-marker{display:none}

/* swipe stones */
.deck{position:relative;height:446px;margin-top:8px}
.stone{position:absolute;inset:0;background:var(--surface);border-radius:24px;padding:16px;box-shadow:inset 0 1px 0 var(--hl),0 20px 40px -20px var(--shadow),0 2px 6px -2px var(--shadow-2);transition:transform .35s ease,opacity .35s ease;display:flex;flex-direction:column;gap:12px;touch-action:pan-y}
.stone.under{transform:scale(.95) translateY(12px);opacity:.6}
.stone.under2{transform:scale(.9) translateY(24px);opacity:.3}
.stone.left{transform:translateX(-120%) rotate(-10deg);opacity:0}
.stone.right{transform:translateX(120%) rotate(10deg);opacity:0}
.stone .gal{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px;touch-action:pan-x;flex:none}
.stone .gal::-webkit-scrollbar{display:none}
.stone .gal .render{min-width:100%;scroll-snap-align:start;aspect-ratio:4/3;flex:none}
.stone .gal .render.paper{background:radial-gradient(120% 90% at 30% 20%,#FFFFFF,#EDE8E0 70%)}
.stone .gal .render.paper svg{inset:0}
.stone .dots{display:flex;justify-content:center;gap:6px;margin-top:-4px}
.stone .dots i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block}
.stone .dots i.on{background:var(--accent)}
.stone .dots span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-left:8px}
.stone{overflow:hidden}
.stone h3{font-family:var(--font-display);font-size:26px;font-weight:500}
.stone .specs{display:flex;flex-wrap:wrap;gap:6px}
.stone .specs span{font-size:12.5px;font-weight:600;background:var(--surface-2);padding:5px 9px;border-radius:8px}
.stone .fit{font-size:14px;color:var(--muted);margin-top:auto}
.swipe-acts{display:flex;gap:10px;margin-top:14px}
.swipe-acts .btn{flex:1}
.ranked li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ranked li:first-child{border-top:0}
.ranked .rk{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:18px;font-weight:600;background:var(--accent-tint);color:var(--accent);flex:none}
.ranked b{display:block;font-weight:600;font-size:15px}
.ranked span{font-size:13px;color:var(--muted)}

/* messages */
.chat{display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:12px 14px;border-radius:18px;font-size:15px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 16px -10px var(--accent-shadow)}
.msg.them{align-self:flex-start;background:var(--surface);border-bottom-left-radius:6px;box-shadow:inset 0 1px 0 var(--hl),0 8px 20px -14px var(--shadow),0 1px 2px var(--shadow-2)}
.msg .who{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:4px}
.msg .ai{display:block;font-size:11px;color:var(--faint);margin-top:6px}
.msg.typing{display:flex;gap:5px;align-items:center;padding:14px 16px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block;animation:dot 1.2s infinite ease-in-out}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
.brief{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.brief div{background:var(--surface);border-radius:12px;padding:9px 11px}
.brief span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.brief b{display:block;font-size:14px;font-weight:600;margin-top:2px}
.livepill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--accent);background:var(--accent-tint);padding:4px 9px;border-radius:999px;margin-top:6px}
.livepill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
.msg.me .who{display:none}
.msg .when{display:block;font-size:11.5px;opacity:.65;margin-top:6px}
.msg.voice{display:flex;align-items:center;gap:10px;white-space:normal}
.msg.voice .play{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.msg.voice .play svg{width:16px;height:16px}
.msg.voice .wave{display:flex;align-items:center;gap:2px;height:20px}
.msg.voice .wave i{width:3px;border-radius:2px;background:currentColor;opacity:.8}
.msg.card{align-self:stretch;max-width:100%;background:var(--surface-2);border-radius:18px;padding:14px;box-shadow:inset 0 1px 0 var(--hl)}
.msg.card b{display:block;font-weight:700;font-size:15px}
.msg.card .btn{margin-top:10px}
.composer{position:sticky;bottom:108px;margin-top:14px;background:var(--surface);border-radius:20px;padding:10px;box-shadow:inset 0 1px 0 var(--hl),0 14px 32px -16px var(--shadow),0 2px 6px -2px var(--shadow-2)}
.composer textarea{width:100%;resize:none;border:0;background:transparent;padding:8px 8px 4px;font-size:15px;min-height:44px;max-height:120px;outline:none}
.composer textarea::placeholder{color:var(--faint)}
.composer .bar{display:flex;align-items:center;gap:6px}
.composer .tool{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--muted);background:var(--surface-2)}
.composer .tool svg{width:19px;height:19px}
.composer .tool.rec{background:var(--crit-bg);color:var(--crit);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--crit-bg)}50%{box-shadow:0 0 0 6px var(--crit-bg)}}
.composer .send{margin-left:auto;width:48px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--on-accent);background:var(--accent)}
.composer .send svg{width:18px;height:18px}
.composer .send:disabled{opacity:.45}
.rectime{font-size:13px;color:var(--crit);font-weight:700;font-variant-numeric:tabular-nums}

/* visits */
.visit .date{display:flex;gap:14px;align-items:flex-end}
.visit .day{font-family:var(--font-display);font-size:64px;font-weight:500;line-height:.9;color:var(--accent)}
.visit .dm b{display:block;font-weight:700;font-size:16px}
.visit .meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:14px;margin-top:10px}
.visit .meta span{display:inline-flex;align-items:center;gap:6px}
.visit .meta svg{width:15px;height:15px;opacity:.75}
.past li{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.past li:first-child{border-top:0}
.past .d{width:48px;text-align:center;flex:none}
.past .d b{display:block;font-family:var(--font-display);font-size:24px;font-weight:500;line-height:1}
.past .d span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.past .w b{display:block;font-weight:600;font-size:15px}
.past .w span{font-size:13px;color:var(--muted)}

/* vault */
.care li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.care li:first-child{border-top:0}
.care .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);flex:none}
.care .ic svg{width:18px;height:18px}
.care b{display:block;font-weight:600;font-size:15px}
.care span{font-size:13px;color:var(--muted)}
.care .pill{margin-left:auto}

/* chips and forms */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:14px;font-weight:600;min-height:40px;padding:8px 14px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--fg);box-shadow:inset 0 1px 0 var(--hl)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.field input,.field textarea{width:100%;border:0;border-radius:14px;padding:13px 14px;background:var(--surface-2);font-size:16px;box-shadow:inset 0 1px 0 var(--hl);outline:none}
.field textarea{resize:none;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.seg{display:flex;background:var(--surface-2);border-radius:14px;padding:3px;box-shadow:inset 0 1px 2px var(--shadow-2)}
.seg button{flex:1;min-height:42px;border-radius:11px;font-size:14px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 2px 6px -2px var(--shadow),inset 0 1px 0 var(--hl)}
.recbox{display:flex;align-items:center;gap:12px;background:var(--accent-tint);border-radius:16px;padding:12px 14px;margin-top:14px}
.recbox .big{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none;box-shadow:0 10px 20px -10px var(--accent-shadow)}
.recbox .big svg{width:24px;height:24px}
.recbox .big.on{background:var(--crit);animation:pulse 1.2s infinite}
.recbox b{display:block;font-size:15px;font-weight:700}
.recbox span{font-size:13px;color:var(--muted)}
.photos{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.photos .ph{width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--surface-2);position:relative;flex:none}
.photos .ph img{width:100%;height:100%;object-fit:cover;display:block}
.photos .add{width:72px;height:72px;border-radius:14px;border:1.5px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-size:12px;text-align:center;line-height:1.2;cursor:pointer}
.photos .add svg{width:20px;height:20px}
.check{display:flex;align-items:flex-start;gap:12px;padding:11px 0;cursor:pointer}
.check input{appearance:none;width:24px;height:24px;border-radius:8px;background:var(--surface-2);box-shadow:inset 0 1px 2px var(--shadow-2);flex:none;margin-top:1px;position:relative;cursor:pointer}
.check input:checked{background:var(--accent)}
.check input:checked::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check span{font-size:15px}

/* tab bar + fab */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));pointer-events:none}
.tabbar-in{max-width:402px;margin:0 auto;display:flex;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:28px;padding:6px;box-shadow:inset 0 1px 0 var(--hl),0 22px 44px -18px var(--shadow),0 2px 8px -2px var(--shadow-2);pointer-events:auto}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:60px;padding:6px 2px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--muted);border-radius:22px;position:relative}
.tab .ico{width:50px;height:34px;border-radius:14px;display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.9,.2,1.2),background .25s}
.tab .ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-selected="true"]{color:var(--accent);font-weight:700}
.tab[aria-selected="true"] .ico{background:linear-gradient(180deg,var(--accent-tint),var(--accent-tint2));box-shadow:inset 0 1px 0 var(--hl),0 8px 16px -8px var(--accent-shadow);transform:translateY(-5px)}
.tab .dot{position:absolute;top:8px;right:calc(50% - 22px);width:9px;height:9px;border-radius:50%;background:var(--crit);box-shadow:0 0 0 2px var(--surface)}
.fab{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:31;display:none;align-items:center;gap:8px;min-height:52px;padding:12px 18px 12px 14px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:700;font-size:15px;box-shadow:0 16px 30px -12px var(--shadow)}
.fab.show{display:inline-flex}
.fab svg{width:20px;height:20px}
@media (min-width:480px){.fab{right:calc(50% - 215px + 18px)}}

/* sheets, toast */
.backdrop{position:fixed;inset:0;background:rgba(12,10,12,.72);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
.backdrop.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:430px;margin:0 auto;background:var(--bg);border-radius:26px 26px 0 0;padding:14px max(18px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 50px -20px var(--shadow);max-height:94vh;overflow:auto;overscroll-behavior:contain}
.sheet.open{transform:none}
body.sheet-open .top,body.sheet-open .tabbar,body.sheet-open .fab{visibility:hidden}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
.sheet h2{font-family:var(--font-display);font-size:28px;font-weight:500;line-height:1.1}
.sheet .lead{color:var(--muted);font-size:14.5px;margin-top:4px}
.toast{position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);background:var(--fg);color:var(--bg);padding:11px 16px;border-radius:999px;font-size:14px;font-weight:600;z-index:70;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translateX(-50%)}
.foot{text-align:center;padding:16px 0 4px;color:var(--faint);font-size:12px}
#v-home .foot{padding-bottom:64px}
.foot b{font-weight:700;color:var(--muted)}
.notif li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.notif li:first-child{border-top:0}
.notif .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}
.notif b{display:block;font-weight:700;font-size:15px}
.notif span{font-size:13px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);font-size:14.5px;padding:18px 8px}
.eyebrow.gold{color:var(--gold-text)}
.brand .sub{color:var(--gold-text)}

/* image slots: a tag names the image that goes here until the real one is dropped in */
.slot{position:absolute;top:10px;left:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-text);background:color-mix(in srgb,var(--bg) 82%,transparent);padding:3px 7px;border-radius:6px;pointer-events:none}
.render img,.thumb img,.reel img,.tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb img{transform:scale(1.25)}
.tile-img:has(img){background:#0B0A0C}
.strip .tile-img img{transform:scale(1.35)}

/* shop */
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
.chips.scroll::-webkit-scrollbar{display:none}
.reels{display:flex;flex-direction:column;gap:14px}
.reel{position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,var(--surface),var(--surface-2) 70%);aspect-ratio:4/5;max-width:100%;box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -22px var(--shadow);scroll-snap-align:start}
.reel>svg{position:absolute;inset:14%;width:72%;height:72%}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
.reel .over{position:absolute;left:0;right:0;bottom:0;padding:64px 16px 16px;background:linear-gradient(180deg,transparent,color-mix(in srgb,#0B0A0C 86%,transparent) 45%);color:#F4EFF2}
.reel .over h3{font-family:var(--font-display);font-size:28px;font-weight:500;line-height:1.05;color:#FFFFFF}
.reel .over p{font-size:13.5px;opacity:.85;margin-top:3px}
.reel .over .from{font-size:14px;font-weight:700;margin-top:8px}
.reel .side{position:absolute;right:12px;top:14px;display:flex;flex-direction:column;gap:8px;z-index:2}
.reel .over{z-index:2}
.reel .side button{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px);color:var(--fg);box-shadow:0 6px 14px -8px var(--shadow)}
.reel .side button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.reel .side button[aria-pressed="true"]{color:var(--crit)}
.reel .side button[aria-pressed="true"] svg{fill:currentColor}
.reel .play{position:absolute;left:12px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--bg);background:color-mix(in srgb,var(--fg) 55%,transparent);padding:6px 10px;border-radius:999px}
.reel .play svg{width:12px;height:12px;fill:currentColor}
.reel .over .acts{margin-top:12px}
.reel .over .btn.ghost{background:rgba(255,255,255,.16);color:#FFFFFF}
.reel .over .btn.primary{background:#F4EFF2;color:#1D181B;box-shadow:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile-card{background:var(--surface);border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 0 var(--hl),0 12px 28px -16px var(--shadow),0 2px 6px -2px var(--shadow-2);display:block;width:100%}
.tile-img{position:relative;overflow:hidden;aspect-ratio:4/5;max-width:100%;background:radial-gradient(120% 90% at 30% 20%,var(--surface),var(--surface-2) 70%)}
.tile-img>svg{position:absolute;inset:16%;width:68%;height:68%}
.tile-img .heart{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--muted)}
.tile-img .heart svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.tile-img .heart[aria-pressed="true"]{color:var(--crit)}.tile-img .heart[aria-pressed="true"] svg{fill:currentColor}
.tile-card .tx{padding:10px 12px 12px}
.tile-card .tx b{display:-webkit-box;font-family:var(--font-display);font-size:19px;font-weight:500;line-height:1.1;min-height:2.2em;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.strip .tile-card .tx b{display:block;min-height:0;font-size:17px;white-space:nowrap;text-overflow:ellipsis}
.tile-card .tx span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.tile-card .tx i{display:block;font-style:normal;font-size:13px;font-weight:700;margin-top:6px}
.strip{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:4px 16px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .tile-card{min-width:150px;max-width:150px;scroll-snap-align:start}
.strip .tile-img{aspect-ratio:1/1}
.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:12px -18px 0;padding:0 18px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery .render{min-width:86%;scroll-snap-align:start;aspect-ratio:4/5}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.opts .chip{min-height:38px;font-size:13.5px}
.sw{display:flex;gap:10px;margin-top:8px}
.swatch{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border-radius:16px;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--muted);box-shadow:inset 0 1px 0 var(--hl)}
.swatch i{width:36px;height:36px;border-radius:50%;display:block;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.swatch[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 0 0 2px var(--accent),0 8px 16px -10px var(--shadow)}
.kv{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-top:1px solid var(--line);font-size:15px}
.kv:first-child{border-top:0}
.kv span{color:var(--muted)}

/* port additions */
.who-form .field{margin-top:10px}
.msg .body{white-space:pre-wrap}
.empty-note{padding:18px;color:var(--muted);font-size:14px}
.brand .wm{height:20px;width:auto;display:block}
.sheet .kv b{text-align:right;max-width:60%}