/* ---------- tokens ---------- */
  :root{
    --cream:#FAF7F2;        /* app ground */
    --paper:#FFFFFF;        /* cards */
    --ink:#2B2620;          /* warm near-black text */
    --ink-soft:#7A7166;     /* secondary text */
    --line:#E8E1D5;         /* hairlines */
    --clay:#B85C38;         /* terracotta accent (actions) */
    --clay-soft:#F3E3DA;
    --olive:#6B7245;        /* secondary accent */
    --olive-soft:#EBEDDF;
    --sky:#5E7E9B;          /* weather / info */
    --sky-soft:#E4EBF1;
    --surround:#E9E2D6;     /* page behind the phone */
    --surround-ink:#8A8071;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --r-card:18px;
    --shadow:0 1px 2px rgba(74,60,42,.06),0 6px 24px rgba(74,60,42,.07);
  }
  /* The app itself is deliberately light (per brief); only the surround adapts. */
  @media (prefers-color-scheme: dark){
    :root{ --surround:#211E19; --surround-ink:#7d7466; }
  }
  :root[data-theme="dark"]{ --surround:#211E19; --surround-ink:#7d7466; }
  :root[data-theme="light"]{ --surround:#E9E2D6; --surround-ink:#8A8071; }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0; background:var(--surround); font-family:var(--sans); color:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:100dvh; gap:14px; padding:24px 0;
  }
  .stage-note{
    color:var(--surround-ink); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  }
  .stage-note b{ font-weight:600; letter-spacing:.14em; }

  /* ---------- phone frame ---------- */
  .phone{
    position:relative; width:390px; height:min(820px, calc(100dvh - 90px));
    min-height:560px;
    background:var(--cream); border-radius:44px; overflow:hidden;
    box-shadow:0 2px 6px rgba(40,30,15,.18), 0 30px 70px rgba(40,30,15,.30);
    display:flex; flex-direction:column;
  }
  @media (max-width:460px){
    body{ padding:0; }
    .stage-note{ display:none; }
    .phone{ width:100%; height:100dvh; min-height:0; border-radius:0; box-shadow:none; }
  }

  .statusbar{
    flex:none; display:flex; justify-content:space-between; align-items:center;
    padding:14px 26px 4px; font-size:13px; font-weight:600; color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .statusbar svg{ display:block; }

  /* ---------- screens ---------- */
  .screens{ flex:1; position:relative; min-height:0; }
  .screen{
    position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
    padding:10px 20px 96px; display:none; scrollbar-width:none;
  }
  .screen::-webkit-scrollbar{ display:none; }
  .screen.active{ display:block; animation:screenIn .28s ease; }
  @keyframes screenIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
  @media (prefers-reduced-motion: reduce){
    .screen.active{ animation:none; }
    *{ transition:none !important; }
  }

  .eyebrow{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
    font-weight:600;
  }
  h1{
    font-family:var(--serif); font-weight:500; font-size:27px; line-height:1.16;
    margin:6px 0 0; text-wrap:balance; letter-spacing:-.01em;
  }
  .screen-head{ padding:8px 2px 16px; }
  .screen-head .sub{ margin:8px 0 0; color:var(--ink-soft); font-size:13.5px; line-height:1.45; }

  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
    box-shadow:var(--shadow); padding:16px; margin-bottom:14px;
  }
  .card h2{
    font-family:var(--serif); font-size:17px; font-weight:600; margin:0 0 2px;
  }

  /* ---------- today: weather ---------- */
  .wx-top{ display:flex; align-items:flex-start; gap:14px; }
  .wx-temp{ font-family:var(--serif); font-size:44px; line-height:1; font-weight:500; }
  .wx-temp sup{ font-size:22px; }
  .wx-meta{ padding-top:4px; }
  .wx-meta .cond{ font-weight:600; font-size:14px; }
  .wx-meta .hilo{ color:var(--ink-soft); font-size:13px; margin-top:2px; font-variant-numeric:tabular-nums; }
  .wx-hours{
    display:flex; gap:6px; margin-top:14px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;
  }
  .wx-hours::-webkit-scrollbar{ display:none; }
  .wx-hour{
    flex:none; width:52px; text-align:center; padding:8px 0 7px; border-radius:12px;
    background:var(--cream); border:1px solid var(--line);
    font-variant-numeric:tabular-nums;
  }
  .wx-hour .h{ font-size:10.5px; color:var(--ink-soft); }
  .wx-hour .t{ font-size:13px; font-weight:600; margin-top:3px; }
  .wx-hour svg{ margin:4px auto 0; display:block; }
  .wx-note{
    margin-top:12px; display:flex; gap:8px; align-items:flex-start;
    background:var(--sky-soft); color:#3E5A73; border-radius:12px; padding:9px 11px;
    font-size:12.5px; line-height:1.4;
  }
  .wx-note svg{ flex:none; margin-top:1px; }

  /* ---------- today: mode toggle ---------- */
  .mode{
    display:flex; background:#EFE9DE; border:1px solid var(--line); border-radius:999px;
    padding:3px; margin:2px 0 14px;
  }
  .mode button{
    flex:1; border:0; background:transparent; border-radius:999px; padding:9px 0;
    font:600 13px var(--sans); color:var(--ink-soft); cursor:pointer; transition:all .18s ease;
  }
  .mode button.on{ background:var(--ink); color:var(--cream); }

  /* ---------- today: outfit ---------- */
  .fit-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
  .fit-head .count{ font-size:12px; color:var(--ink-soft); }
  .layer-row{
    display:flex; align-items:center; gap:12px; padding:9px 0;
    border-top:1px solid var(--line);
  }
  .layer-row:first-of-type{ border-top:0; }
  .layer-art{
    flex:none; width:52px; height:52px; border-radius:13px; border:1px solid var(--line);
    display:grid; place-items:center;
  }
  .layer-art svg{ width:38px; height:38px; }
  .layer-info{ flex:1; min-width:0; }
  .layer-info .role{
    font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--clay);
    font-weight:700;
  }
  .layer-info .name{ font-size:14px; font-weight:600; margin-top:1px; }
  .layer-info .note{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
  .fit-why{
    font-family:var(--serif); font-size:14.5px; line-height:1.5; font-style:italic;
    color:#4A4238; margin:12px 0 0; padding:12px 2px 0; border-top:1px solid var(--line);
  }
  .palette{ display:flex; align-items:center; gap:10px; margin-top:12px; }
  .palette .dots{ display:flex; }
  .palette .dot{
    width:26px; height:26px; border-radius:50%; border:2px solid var(--paper);
    box-shadow:0 0 0 1px var(--line); margin-left:-7px;
  }
  .palette .dot:first-child{ margin-left:0; }
  .palette .why{ font-size:12px; color:var(--ink-soft); line-height:1.35; }
  .fit-actions{ display:flex; gap:10px; margin-top:14px; }
  .btn{
    border-radius:999px; padding:11px 16px; font:600 13.5px var(--sans); cursor:pointer;
    border:1px solid var(--line); background:var(--paper); color:var(--ink);
    transition:transform .12s ease;
  }
  .btn:active{ transform:scale(.97); }
  .btn.primary{ background:var(--clay); border-color:var(--clay); color:#FFF6F0; flex:1; }
  .btn.ghost{ flex:none; }

  .streak{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    background:var(--olive-soft); color:#4C5330; border-radius:999px; padding:5px 11px;
    font-size:12px; font-weight:600;
  }

  /* ---------- nudge ---------- */
  .nudge{ display:flex; gap:12px; align-items:center; background:#FBF3EC; border-color:#EED9CB; }
  .nudge .layer-art{ background:var(--paper); }
  .nudge p{ margin:2px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
  .nudge .tag{
    font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--clay);
  }

  /* ---------- wardrobe ---------- */
  .stats{ display:flex; gap:16px; align-items:center; }
  .ring{ position:relative; flex:none; width:84px; height:84px; }
  .ring svg{ transform:rotate(-90deg); }
  .ring .pct{
    position:absolute; inset:0; display:grid; place-items:center;
    font-family:var(--serif); font-size:19px; font-weight:600;
  }
  .stats p{ margin:4px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
  .chips{ display:flex; gap:7px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{
    flex:none; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
    border-radius:999px; padding:7px 13px; font:600 12.5px var(--sans); cursor:pointer;
  }
  .chip.on{ background:var(--olive); border-color:var(--olive); color:#F4F5EC; }
  .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .item{
    background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow); cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit;
  }
  .item .art{ position:relative; height:96px; display:grid; place-items:center; }
  .item .art svg{ width:64px; height:64px; }
  .item .art .wash{
    position:absolute; inset:0; background:rgba(250,247,242,.72); display:grid; place-items:center;
    font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);
  }
  .item .body{ padding:9px 11px 11px; border-top:1px solid var(--line); }
  .item .name{ font-size:13px; font-weight:600; line-height:1.25; }
  .item .meta{ font-size:11px; color:var(--ink-soft); margin-top:3px; }
  .item .mat{
    display:inline-block; margin-top:6px; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    font-weight:700; color:var(--olive); background:var(--olive-soft); border-radius:999px; padding:2px 8px;
  }
  .shelf-title{ display:flex; justify-content:space-between; align-items:baseline; margin:18px 2px 10px; }
  .shelf-title h2{ font-family:var(--serif); font-size:17px; margin:0; }
  .shelf-title span{ font-size:11.5px; color:var(--ink-soft); }
  .shelf{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
  .shelf::-webkit-scrollbar{ display:none; }
  .shelf .item{ flex:none; width:132px; }
  .shelf .item .art{ height:78px; }
  .shelf .item .art svg{ width:50px; height:50px; }
  .fab{
    position:absolute; right:18px; bottom:92px; width:54px; height:54px; border-radius:50%;
    background:var(--clay); color:#FFF6F0; border:0; font-size:26px; line-height:1; cursor:pointer;
    box-shadow:0 8px 20px rgba(150,70,35,.35); z-index:5; display:grid; place-items:center;
  }

  /* ---------- travel ---------- */
  .trip-form label{
    display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:700; margin:10px 0 5px;
  }
  .trip-form label:first-child{ margin-top:0; }
  .field{
    display:flex; align-items:center; gap:9px; background:var(--cream);
    border:1px solid var(--line); border-radius:12px; padding:11px 12px; font-size:14px;
  }
  .field input{ border:0; background:transparent; font:inherit; color:inherit; width:100%; outline:none; }
  .trip-dates{ display:flex; gap:10px; }
  .trip-dates .field{ flex:1; font-variant-numeric:tabular-nums; }
  .trip-form .btn.primary{ width:100%; margin-top:14px; }
  .trip-wx{ display:flex; gap:6px; margin-top:4px; }
  .trip-wx .wx-hour{ flex:1; width:auto; }
  .pack-group{ margin-top:2px; }
  .pack-group h3{
    font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
    margin:14px 2px 6px; font-weight:700;
  }
  .pack-row{
    display:flex; align-items:center; gap:11px; padding:8px 2px; border-top:1px solid var(--line);
    cursor:pointer;
  }
  .pack-row input{ display:none; }
  .pack-row .box{
    flex:none; width:20px; height:20px; border-radius:7px; border:1.5px solid #CBC2B2;
    display:grid; place-items:center; color:transparent; transition:all .15s ease; background:var(--paper);
  }
  .pack-row input:checked + .box{ background:var(--olive); border-color:var(--olive); color:#F4F5EC; }
  .pack-row input:checked ~ .pack-name{ color:var(--ink-soft); text-decoration:line-through; }
  .pack-name{ font-size:13.5px; font-weight:600; flex:1; }
  .pack-qty{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .gap-card{ background:#FBF3EC; border-color:#EED9CB; }
  .gap-card p{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin:4px 0 10px; }

  /* ---------- shops ---------- */
  .shop{ padding:15px 16px; }
  .shop-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .shop h2{ margin:0; }
  .shop .dist{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
  .badge{
    flex:none; background:var(--clay-soft); color:#96502E; border-radius:999px; padding:4px 10px;
    font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  }
  .shop p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:8px 0 0; }
  .shop .fills{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--olive);
  }

  /* ---------- tab bar ---------- */
  .tabbar{
    position:absolute; left:0; right:0; bottom:0; z-index:6;
    display:flex; padding:8px 10px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--cream) 86%, #fff);
    backdrop-filter:blur(10px); border-top:1px solid var(--line);
  }
  .tab{
    flex:1; border:0; background:transparent; cursor:pointer; color:var(--ink-soft);
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0 3px;
    font:600 10.5px var(--sans);
  }
  .tab svg{ display:block; }
  .tab.on{ color:var(--clay); }

  /* ---------- sheets / toast ---------- */
  .scrim{
    position:absolute; inset:0; background:rgba(43,38,32,.35); z-index:10;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .scrim.open{ opacity:1; pointer-events:auto; }
  .sheet{
    position:absolute; left:0; right:0; bottom:0; z-index:11;
    background:var(--paper); border-radius:26px 26px 0 0; padding:10px 22px 26px;
    transform:translateY(105%); transition:transform .26s cubic-bezier(.3,.9,.3,1);
    max-height:82%; overflow-y:auto;
  }
  .sheet.open{ transform:none; }
  .sheet .grab{ width:40px; height:4px; border-radius:2px; background:var(--line); margin:4px auto 14px; }
  .sheet h2{ font-family:var(--serif); font-size:20px; margin:0 0 2px; }
  .sheet .sub{ font-size:12.5px; color:var(--ink-soft); margin:0 0 14px; }
  .photo-drop{
    border:1.5px dashed #CFC5B2; border-radius:16px; background:var(--cream);
    display:grid; place-items:center; gap:2px; padding:22px 0 20px; text-align:center; margin-bottom:14px;
  }
  .photo-drop .big{ font-size:13px; font-weight:600; margin-top:8px; }
  .photo-drop .small{ font-size:11.5px; color:var(--ink-soft); }
  .opt-label{
    font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
    font-weight:700; margin:12px 0 7px;
  }
  .opt-row{ display:flex; flex-wrap:wrap; gap:7px; }
  .opt{
    border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:7px 13px;
    font:600 12.5px var(--sans); color:var(--ink-soft); cursor:pointer;
  }
  .opt.on{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
  .warmth{ display:flex; gap:6px; align-items:center; }
  .warmth .w{
    width:22px; height:22px; border-radius:50%; border:1.5px solid #CFC5B2; cursor:pointer; background:var(--paper);
  }
  .warmth .w.on{ background:var(--clay); border-color:var(--clay); }
  .warmth span{ font-size:12px; color:var(--ink-soft); margin-left:4px; }
  .sheet .btn.primary{ width:100%; margin-top:18px; }
  .detail-hero{ display:flex; gap:14px; align-items:center; margin-bottom:6px; }
  .detail-hero .layer-art{ width:74px; height:74px; border-radius:18px; }
  .detail-hero .layer-art svg{ width:54px; height:54px; }
  .detail-stats{ display:flex; border-top:1px solid var(--line); margin-top:12px; }
  .detail-stats div{ flex:1; padding:12px 4px 2px; }
  .detail-stats div + div{ border-left:1px solid var(--line); padding-left:14px; }
  .detail-stats .n{ font-family:var(--serif); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; }
  .detail-stats .l{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-top:2px; }
  .pairs{ margin-top:14px; }
  .pairs .dots{ display:flex; margin-top:6px; }

  .toast{
    position:absolute; left:50%; bottom:104px; transform:translate(-50%, 16px); z-index:50;
    background:var(--ink); color:var(--cream); border-radius:999px; padding:10px 18px;
    font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease;
    white-space:nowrap;
  }
  .toast.show{ opacity:1; transform:translate(-50%,0); }

  .footnote{
    text-align:center; font-size:11px; color:var(--ink-soft); padding:6px 0 2px; line-height:1.5;
  }
  .linklike{
    border:0; background:none; color:var(--clay); font:600 11px var(--sans);
    cursor:pointer; padding:0; text-decoration:underline;
  }

  /* ---------- occasions ---------- */
  .occasions{
    display:flex; gap:7px; overflow-x:auto; margin:-6px 0 14px; padding:2px;
    scrollbar-width:none;
  }
  .occasions::-webkit-scrollbar{ display:none; }
  .occ{
    flex:none; border:1px dashed #CFC5B2; background:transparent; color:var(--ink-soft);
    border-radius:999px; padding:6px 13px; font:600 12px var(--sans); cursor:pointer;
  }
  .occ.on{ border-style:solid; background:var(--ink); border-color:var(--ink); color:var(--cream); }

  /* ---------- palette detail ---------- */
  .palette{ cursor:pointer; }
  .pal-detail{ display:none; margin-top:10px; border-top:1px dashed var(--line); padding-top:10px; }
  .pal-detail.open{ display:block; }
  .pal-line{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-soft); padding:3px 0; }
  .pal-line .dot{ width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 1px var(--line); flex:none; }
  .pal-line b{ color:var(--ink); font-weight:600; }

  /* ---------- laundry ---------- */
  .laundry{ display:flex; gap:12px; align-items:flex-start; background:var(--sky-soft); border-color:#D3DEE8; }
  .laundry .ic{
    flex:none; width:38px; height:38px; border-radius:11px; background:var(--paper);
    display:grid; place-items:center; color:#3E5A73;
  }
  .laundry .tag{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:#3E5A73; }
  .laundry p{ margin:2px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }

  /* ---------- journal ---------- */
  .checkin-btns{ display:flex; gap:8px; margin-top:12px; }
  .checkin-btns .btn{ flex:1; padding:10px 4px; font-size:12.5px; }
  .checkin-done{ display:none; }
  .checkin-done.show{ display:block; }
  .checkin-done .big{ font-size:13.5px; font-weight:600; margin-top:10px; }
  .checkin-done p{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 0; line-height:1.45; }
  .cal-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
  .cal-head h2{ margin:0; }
  .cal-head span{ font-size:11.5px; color:var(--ink-soft); }
  .cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
  .cal .dow{
    text-align:center; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:700; padding-bottom:2px;
  }
  .cal-day{
    aspect-ratio:1; border:1px solid var(--line); border-radius:10px; background:var(--paper);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    cursor:pointer; font:600 11px var(--sans); color:var(--ink); padding:0;
    font-variant-numeric:tabular-nums;
  }
  .cal-day:disabled{ opacity:.35; cursor:default; }
  .cal-day.empty{ background:transparent; border-style:dashed; color:var(--ink-soft); }
  .cal-day.today{ border-color:var(--clay); border-width:1.5px; }
  .cal-day.sel{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
  .cal-day .dots{ display:flex; gap:2px; }
  .cal-day .dots i{ width:5px; height:5px; border-radius:50%; }
  .cal-detail{ margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
  .cal-detail .d-head{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
  .cal-detail .d-fit{ font-size:13.5px; font-weight:600; line-height:1.45; }
  .cal-detail .d-feel{
    display:inline-flex; margin-top:8px; background:var(--olive-soft); color:#4C5330;
    border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:600;
  }
  .j-stats{ display:flex; gap:10px; }
  .j-stat{
    flex:1; background:var(--paper); border:1px solid var(--line); border-radius:14px;
    padding:11px 12px; box-shadow:var(--shadow);
  }
  .j-stat .n{ font-family:var(--serif); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; }
  .j-stat .l{
    font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
    font-weight:700; margin-top:2px; line-height:1.35;
  }

  /* ---------- archive ---------- */
  .arch-items{ display:none; margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }
  .arch-items.open{ display:block; }
  .arch-row{ display:flex; align-items:center; gap:11px; padding:6px 0; font-size:13px; color:var(--ink-soft); }
  .arch-row .layer-art{ width:40px; height:40px; border-radius:10px; filter:saturate(.55); }
  .arch-row .layer-art svg{ width:28px; height:28px; }
  .arch-row b{ color:var(--ink); font-weight:600; display:block; font-size:13px; }
  .arch-row small{ font-size:11px; }

  /* ---------- cost per wear ---------- */
  .cpw{
    margin-top:12px; background:var(--olive-soft); border-radius:12px; padding:10px 12px;
    font-size:12.5px; color:#4C5330; line-height:1.45;
  }
  .cpw b{ font-variant-numeric:tabular-nums; }

  /* ---------- share card ---------- */
  .share-card{ background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:18px; margin:6px 0 4px; }
  .share-card .sc-top{ display:flex; justify-content:space-between; align-items:baseline; }
  .share-card .sc-date{ font-family:var(--serif); font-size:16px; font-weight:600; }
  .share-card .sc-wx{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .share-card .sc-row{ display:flex; gap:8px; margin:14px 0 12px; }
  .share-card .sc-row .layer-art{ width:56px; height:56px; }
  .share-card .sc-row .layer-art svg{ width:40px; height:40px; }
  .share-card .sc-names{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
  .share-card .sc-bottom{
    display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--line); padding-top:10px; margin-top:12px;
  }
  .share-card .sc-mark{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--clay); }
  .btn.icon{ flex:none; width:44px; display:grid; place-items:center; padding:0; }

  /* ---------- plan ahead ---------- */
  .plan{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
  .plan::-webkit-scrollbar{ display:none; }
  .plan-card{
    flex:none; width:158px; background:var(--paper); border:1px solid var(--line);
    border-radius:16px; box-shadow:var(--shadow); padding:12px;
  }
  .plan-card.tent{ border-style:dashed; box-shadow:none; background:transparent; }
  .plan-card .pc-day{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; font-weight:700; }
  .plan-card .pc-wx{ font-size:11px; color:var(--ink-soft); font-weight:600; font-variant-numeric:tabular-nums; }
  .plan-card .pc-mode{
    font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
    font-weight:700; margin-top:2px;
  }
  .plan-card .pc-arts{ display:flex; gap:5px; margin:10px 0; }
  .plan-card .pc-arts .layer-art{ width:34px; height:34px; border-radius:9px; }
  .plan-card .pc-arts .layer-art svg{ width:24px; height:24px; }
  .plan-card .pc-note{ font-size:10.5px; color:var(--ink-soft); line-height:1.4; min-height:29px; }
  .plan-lock{
    width:100%; margin-top:8px; border:1px solid var(--line); background:var(--paper);
    border-radius:999px; padding:7px 0; font:600 11.5px var(--sans); cursor:pointer;
    color:var(--ink); display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .plan-lock.locked{ background:var(--olive); border-color:var(--olive); color:#F4F5EC; }

  /* ---------- lock screen preview ---------- */
  .lock{
    margin-top:6px; border-radius:20px; padding:18px 12px 12px;
    background:linear-gradient(165deg,#4A5A6E,#2B3442); color:#F4F1EA;
  }
  .lock .lk-time{ font-family:var(--serif); font-size:34px; text-align:center; font-weight:500; }
  .lock .lk-date{ text-align:center; font-size:11px; opacity:.75; margin-top:2px; }
  .lock .lk-note{ background:rgba(250,247,242,.16); border-radius:14px; padding:10px 12px; margin-top:12px; }
  .lock .lk-note .t{ display:flex; justify-content:space-between; font-size:10px; opacity:.8; margin-bottom:3px; }
  .lock .lk-note .b{ font-size:12px; line-height:1.4; }

  /* ---------- onboarding ---------- */
  .ob{
    position:absolute; inset:42px 0 0; z-index:40; background:var(--cream);
    display:flex; flex-direction:column;
  }
  .ob.done{ display:none; }
  .ob-top{
    flex:none; display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px 0; min-height:40px;
  }
  .ob-back, .ob-skip{
    border:0; background:transparent; color:var(--ink-soft); font:600 13px var(--sans);
    cursor:pointer; padding:6px 4px;
  }
  .ob-back{ visibility:hidden; }
  .ob-back.show{ visibility:visible; }
  .ob-dots{ display:flex; gap:6px; }
  .ob-dots span{ width:6px; height:6px; border-radius:3px; background:#DCD3C3; transition:all .25s ease; }
  .ob-dots span.on{ width:18px; background:var(--clay); }
  .ob-step{
    display:none; flex:1; min-height:0; overflow-y:auto; padding:14px 26px 20px;
    flex-direction:column; scrollbar-width:none;
  }
  .ob-step::-webkit-scrollbar{ display:none; }
  .ob-step.active{ display:flex; animation:screenIn .3s ease; }
  .ob-step h1{ font-size:29px; margin:8px 0 0; }
  .ob-step .lede{ color:var(--ink-soft); font-size:14px; line-height:1.55; margin:10px 0 8px; }
  .ob-hint{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin:14px 2px 0; }
  .ob-val{
    padding:12px 0; border-top:1px solid var(--line);
    font-size:12.5px; color:var(--ink-soft); line-height:1.5;
  }
  .ob-val b{ display:block; color:var(--ink); font-size:13.5px; margin-bottom:1px; }
  .ob-cta{ flex:none; padding:10px 26px calc(16px + env(safe-area-inset-bottom)); }
  .ob-cta .btn.primary{ width:100%; padding:14px; font-size:14.5px; }
  .ob-cta .under{ text-align:center; font-size:11.5px; color:var(--ink-soft); margin-top:9px; line-height:1.4; }
  .pal{ display:inline-flex; align-items:center; }
  .pal .pds{ display:inline-flex; margin-right:8px; }
  .pal .pd{
    width:11px; height:11px; border-radius:50%; margin-left:-4px;
    border:1.5px solid var(--paper); box-shadow:0 0 0 .5px rgba(0,0,0,.08);
  }
  .pal .pd:first-child{ margin-left:0; }
  .slot{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    background:var(--paper); border:1.5px dashed #CFC5B2; border-radius:16px;
    padding:10px 12px; margin-bottom:9px; cursor:pointer; font:inherit; color:inherit;
  }
  .slot .ph{
    flex:none; width:46px; height:46px; border-radius:12px; background:var(--cream);
    display:grid; place-items:center; color:var(--ink-soft);
  }
  .slot .t{ flex:1; min-width:0; }
  .slot .t b{ font-size:13.5px; display:block; }
  .slot .t small{ color:var(--ink-soft); font-size:11.5px; }
  .slot .check{ visibility:hidden; color:var(--olive); font-weight:700; font-size:15px; }
  .slot.added{ border-style:solid; border-color:var(--line); box-shadow:var(--shadow); }
  .slot.added .check{ visibility:visible; }