/* =====================================================================
   Concierge AI — design system v2.1  ("Coastline")
   Mobile-first. Pretty + ownable, without trading away legibility.

   Signature moves:
   • A sunset gradient (coral→amber→gold) — the Mallorca golden hour —
     used on hero washes and primary CTAs. One ownable idea, repeated.
   • A frosted-glass sticky action bar that floats above content.
   • One tasteful sun-glow in the mast (contained, not full-screen grain).
   • Soft layered card depth; teal = trust, coral = act.
   Instrument Serif (italic) for editorial moments · Inter for all UI.

   Django port: drop into static/css/concierge2.css near-verbatim.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Tokens                                                          *
 * ------------------------------------------------------------------ */
:root{
  --bg:#F6F2EB; --surface:#FFFFFF; --surface-2:#FAF6EF; --surface-3:#F2EDE3;
  --line:#E8E2D6; --line-2:#F0EBE0;
  --ink:#1B2230; --soft:#5C6472; --faint:#9BA1AE;
  --coral:#E0552B; --coral-deep:#BC3D17; --coral-soft:#FBE7DE;
  --teal:#14706E; --teal-deep:#0E5450; --teal-soft:#DDEDEB;
  --amber:#E89B3C; --gold:#C2852B;            /* stars + sunset stops */
  --track:#EBE5D8;
  /* signature gradient */
  --sunset:linear-gradient(135deg,#E0552B 0%,#E8743A 48%,#E89B3C 100%);
  --sunset-soft:linear-gradient(160deg,#FDE7D8 0%,#FAF1E2 60%,transparent 100%);
  --teal-grad:linear-gradient(135deg,#1B8480,#0E5450);
  /* shape */
  --r-xl:22px; --r-lg:16px; --r:14px; --r-sm:11px; --pill:999px;
  /* depth — two soft layers, never harsh */
  --shadow:0 1px 2px rgba(27,34,48,.05), 0 10px 26px -18px rgba(27,34,48,.18);
  --shadow-md:0 2px 6px rgba(27,34,48,.06), 0 18px 40px -20px rgba(27,34,48,.22);
  --shadow-lg:0 4px 10px rgba(27,34,48,.05), 0 30px 70px -34px rgba(27,34,48,.30);
  --ring-teal:0 0 0 4px rgba(20,112,110,.16);
  --t:.2s; --ease:cubic-bezier(.16,.84,.3,1);
  /* type */
  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv05","ss01"; letter-spacing:-.002em;
  min-height:100%; display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(0px,4vw,40px);
}

/* ------------------------------------------------------------------ *
 * 2. Shell                                                            *
 * ------------------------------------------------------------------ */
.shell{
  position:relative; width:min(440px,100%); background:var(--surface);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  border:1px solid var(--line); overflow-y:auto; overflow-x:hidden;
  max-height:calc(100dvh - clamp(0px,8vw,80px));
}
.shell--wide{ width:min(760px,100%); }
.shell--xwide{ width:min(1080px,100%); }

/* ------------------------------------------------------------------ *
 * 3. Flow rail — persistent orientation                               *
 * ------------------------------------------------------------------ */
.flow{display:flex; align-items:center; gap:4px; padding:15px 20px 0; font-size:11px; color:var(--faint)}
.flow .seg{display:flex; align-items:center; gap:7px; white-space:nowrap; z-index:1; background:var(--surface); padding-right:2px}
.flow .seg .n{width:19px;height:19px;border-radius:50%; background:var(--track); color:var(--soft);
  display:grid; place-items:center; font-size:10px; font-weight:700; transition:all var(--t)}
.flow .seg .l{font-weight:500; letter-spacing:.005em}
.flow .seg.done .n{ background:var(--teal); color:#fff}
.flow .seg.now .n{ background:var(--sunset); color:#fff; box-shadow:0 4px 10px -3px rgba(224,85,43,.6)}
.flow .seg.now .l{ color:var(--ink); font-weight:600}
.flow .seg.upcoming .l{ color:var(--faint)}
.flow .bar{flex:1 1 auto; height:2px; background:var(--line); min-width:10px; border-radius:2px; margin:0 -2px}
.flow .bar.done{ background:var(--teal-soft)}

/* ------------------------------------------------------------------ *
 * 4. Masthead — warm sunset wash + a single contained sun              *
 * ------------------------------------------------------------------ */
.mast{position:relative; padding:28px 24px 22px; overflow:hidden;
  background:var(--sunset-soft)}
.mast::before{ /* the low sun, contained to the mast */
  content:""; position:absolute; top:-60px; right:-50px; width:220px; height:220px;
  border-radius:50%; pointer-events:none; opacity:.55;
  background:radial-gradient(circle at 50% 50%, rgba(255,221,150,.85), rgba(255,205,120,.25) 45%, transparent 70%);
}
.eyebrow{position:relative; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--coral-deep); font-weight:700; display:flex; gap:8px; align-items:center}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--coral)}
.eyebrow--sea{color:var(--teal-deep)} .eyebrow--sea::before{background:var(--teal)}
.mast h1{
  position:relative; font-family:var(--display); font-weight:400; font-size:42px; line-height:1.02;
  letter-spacing:-.015em; margin-top:11px;
}
.mast h1 em{font-style:italic; color:var(--coral)}
.host{position:relative; margin-top:14px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--soft)}
.crest{width:32px;height:32px;border-radius:10px;flex:0 0 auto; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-size:16px; box-shadow:var(--shadow)}
.host b{font-weight:600; color:var(--ink)}

/* ------------------------------------------------------------------ *
 * 5. Request strip / chips / section titles                           *
 * ------------------------------------------------------------------ */
.request{padding:14px 24px; display:flex; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:var(--surface-2)}
.chip{font-size:12.5px; color:var(--soft); display:flex; align-items:center; gap:6px}
.chip b{color:var(--ink); font-weight:600}
.chip .ic{opacity:.55}

.section-title{padding:22px 24px 4px; display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.section-title h2{font-weight:600; font-size:15px; letter-spacing:-.005em}
.section-title .aside{font-size:12px; color:var(--faint)}
.prose{padding:6px 24px 8px; font-size:14px; color:var(--soft); line-height:1.55}
.prose b{color:var(--ink); font-weight:600}

/* ------------------------------------------------------------------ *
 * 6. Tide / live progress — a calm hero panel                         *
 * ------------------------------------------------------------------ */
.tide-wrap{padding:20px 24px 8px}
.tide-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.tide-top .label{font-size:13px; color:var(--soft)}
.tide-top .label b{color:var(--ink); font-weight:600}
.tide-top .count{font-size:13px; color:var(--teal-deep); font-weight:700; font-feature-settings:"tnum";
  background:var(--teal-soft); padding:4px 10px; border-radius:var(--pill)}
.tide{position:relative; height:8px; border-radius:var(--pill); overflow:hidden; background:var(--track)}
.tide__water{position:absolute; inset:0; transform-origin:left; background:var(--teal-grad);
  border-radius:var(--pill); transition:transform .9s linear}
.note{padding:10px 24px 16px; font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:7px}
.note .dot{width:7px;height:7px;border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 0 rgba(20,112,110,.5); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(20,112,110,.45)}70%{box-shadow:0 0 0 9px rgba(20,112,110,0)}100%{box-shadow:0 0 0 0 rgba(20,112,110,0)}}

/* ------------------------------------------------------------------ *
 * 7. Cards — soft layered depth                                       *
 * ------------------------------------------------------------------ */
.card{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); transition:box-shadow var(--t), transform var(--t)}
.card--rail{border-color:var(--coral)}
.card--rail-teal{border-color:var(--teal)}
.card--rail::before, .card--rail-teal::before{content:none}
.rise{ animation:rise .6s var(--ease) both }
@keyframes rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.released{opacity:.42; filter:grayscale(.45); transition:opacity .5s, filter .5s}
.chosen{box-shadow:0 0 0 2px var(--teal), var(--shadow-md); transform:translateY(-2px); border-color:var(--teal)}

/* offer / provider head */
.o-head{display:flex; gap:13px; align-items:flex-start; padding:16px 16px 0}
.avatar{width:46px;height:46px;border-radius:13px;flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--a,var(--ink)),var(--b,var(--ink))); color:#fff;
  font-family:var(--display); font-size:17px; box-shadow:var(--shadow)}
.who{flex:1 1 auto; min-width:0}
.who h3{font-weight:600; font-size:16.5px; line-height:1.2; letter-spacing:-.005em}
.who .trade{font-size:12.5px; color:var(--soft); margin-top:2px}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.badge{font-size:10.5px; font-weight:600; letter-spacing:.01em; padding:3px 8px; border-radius:var(--pill);
  display:inline-flex; align-items:center; gap:4px}
.badge--verified{background:var(--teal-soft); color:var(--teal-deep)}
.badge--fast{background:var(--coral-soft); color:var(--coral-deep)}
.badge--top{background:var(--coral-soft); color:var(--coral-deep)}
.badge--new{background:#EEF0F2; color:var(--soft)}
.badge--good{background:var(--teal-soft); color:var(--teal-deep)}

.rating{text-align:right; flex:0 0 auto}
.rating .stars{font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:2px; justify-content:flex-end}
.rating .stars .s{color:var(--gold)}
.rating .count{font-size:11px; color:var(--faint)}
.rating .since{display:block; font-size:10.5px; color:var(--faint); margin-top:2px}

.o-activity{font-size:14px; color:var(--ink); margin:14px 16px 11px; line-height:1.5}
.extras{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 16px 14px}
.extras li{font-size:11.5px; color:var(--teal-deep); background:var(--teal-soft);
  padding:4px 9px; border-radius:8px; display:flex; gap:5px; align-items:center}
.extras li::before{content:"✓"; font-size:10px; font-weight:700}

/* the foot: price (left, tabular) + meta (right), scarcity full-width, CTA row */
.o-foot{border-top:1px solid var(--line-2); padding:14px 16px 15px; display:grid;
  grid-template-columns:1fr auto; align-items:center; gap:8px 12px}
.price{display:flex; align-items:baseline; gap:8px; font-feature-settings:"tnum"}
.price .was{font-size:13px; color:var(--faint); text-decoration:line-through}
.price .now{font-family:var(--display); font-size:28px; font-weight:400; color:var(--ink); line-height:1}
.price .off{font-size:10.5px; font-weight:700; color:#fff; background:var(--sunset); padding:3px 8px; border-radius:7px}
.o-meta{font-size:11.5px; color:var(--soft); text-align:right; line-height:1.5}
.o-meta .when{color:var(--ink); font-weight:600}
.o-meta a{color:var(--teal-deep); text-decoration:none}
.o-meta a:hover{ text-decoration:underline}
.scarcity{grid-column:1/-1; font-size:11.5px; color:var(--coral-deep); font-weight:600; display:flex; align-items:center; gap:6px}
.scarcity::before{content:"⌛"; font-size:11px}
.hold{font-size:11px; color:var(--faint); font-feature-settings:"tnum"}
.hold b{color:var(--soft); font-weight:600}
.o-cta{grid-column:1/-1; display:flex; align-items:center; gap:12px; margin-top:2px}
.o-cta .hold{flex:1 1 auto}

.ghost{height:108px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:
  linear-gradient(100deg, var(--surface-2) 30%, #fff 50%, var(--surface-2) 70%);
  background-size:200% 100%; animation:sweep 1.8s linear infinite; box-shadow:var(--shadow)}
@keyframes sweep{from{background-position:120% 0}to{background-position:-40% 0}}

/* ------------------------------------------------------------------ *
 * 8. Buttons — sunset primary, flat secondary                         *
 * ------------------------------------------------------------------ */
.btn{font-family:var(--body); font-weight:600; font-size:14px; border:none;
  height:48px; padding:0 20px; border-radius:var(--r-sm); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform var(--t), box-shadow var(--t), filter var(--t), border-color var(--t), background var(--t);
  white-space:nowrap; letter-spacing:-.003em}
.btn:active{transform:translateY(1px)}
.btn--primary{color:#fff; background:var(--sunset); box-shadow:0 8px 18px -8px rgba(224,85,43,.6)}
.btn--primary:hover{filter:brightness(1.05); box-shadow:0 12px 24px -8px rgba(224,85,43,.75)}
.btn--sea{color:#fff; background:var(--teal-grad); box-shadow:0 8px 18px -8px rgba(14,84,80,.5)}
.btn--sea:hover{ filter:brightness(1.05)}
.btn--ghost{color:var(--ink); background:var(--surface); border:1px solid var(--line)}
.btn--ghost:hover{background:var(--surface-2); border-color:var(--faint)}
.btn--full{width:100%}
.btn--lg{height:54px; font-size:15px; border-radius:13px}
.btn[disabled]{opacity:.4; pointer-events:none; box-shadow:none}
.choose{font-family:var(--body); font-weight:600; font-size:14px; color:#fff; background:var(--sunset);
  border:none; height:48px; padding:0 20px; border-radius:var(--r-sm); cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(224,85,43,.6); transition:transform var(--t), filter var(--t); white-space:nowrap}
.choose:hover{ filter:brightness(1.05)}

/* ------------------------------------------------------------------ *
 * 9. Forms                                                            *
 * ------------------------------------------------------------------ */
.field{padding:6px 24px 8px}
.field > label{display:block; font-size:12px; color:var(--soft); margin-bottom:9px; font-weight:600}
.choice-row{display:flex; gap:8px; flex-wrap:wrap}
.choice{font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--soft);
  background:var(--surface); border:1px solid var(--line); min-height:46px; padding:10px 15px;
  border-radius:var(--r-sm); cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; gap:7px}
.choice:hover{border-color:var(--faint)}
.choice.on, .choice[aria-pressed="true"]{background:var(--teal-soft); border-color:var(--teal); color:var(--teal-deep); font-weight:600; box-shadow:var(--ring-teal)}
.choice .tick{opacity:0; transition:opacity var(--t)} .choice.on .tick{opacity:1}

.stepper{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; background:var(--surface)}
.stepper button{width:46px; height:46px; border:none; background:transparent; cursor:pointer;
  font-size:20px; color:var(--coral); font-weight:500; line-height:1; transition:background var(--t)}
.stepper button:hover{background:var(--coral-soft)}
.stepper .val{min-width:48px; text-align:center; font-size:19px; font-weight:600; color:var(--ink); font-feature-settings:"tnum"}
.stepper-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line-2)}
.stepper-row:last-child{border-bottom:none}
.stepper-row .lbl{font-size:14px; color:var(--ink); font-weight:500}
.stepper-row .sub{font-size:11.5px; color:var(--faint); margin-top:2px}

/* Bare <input>/<select> controls — styled to the system (qualify capture, provider submit).
   The design uses custom steppers/pills elsewhere; these cover plain form fields consistently. */
.field > span{display:block; font-size:12px; color:var(--soft); margin-bottom:9px; font-weight:600}
.field input:not([type=radio]):not([type=checkbox]), .field select, .ages input, select.control, input.control{
  width:100%; font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 13px; outline:none; transition:border-color var(--t), box-shadow var(--t);
  -webkit-appearance:none; appearance:none}
.field select, select.control{padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235C6472' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center}
.field input:focus, .field select:focus, .ages input:focus, .control:focus{border-color:var(--teal); box-shadow:var(--ring-teal)}
.field input::placeholder, .ages input::placeholder{color:var(--faint)}
.ages{display:flex; gap:8px}
.ages input{text-align:center}
.qualify{display:flex; flex-direction:column; gap:2px; padding-bottom:12px}
.qualify .field{padding:8px 24px}

/* ------------------------------------------------------------------ *
 * 10. Star input                                                      *
 * ------------------------------------------------------------------ */
.stars-input{display:flex; gap:8px; justify-content:center; padding:8px 0}
.stars-input button{background:none; border:none; cursor:pointer; font-size:42px; line-height:1;
  color:var(--line); transition:transform .12s, color .12s}
.stars-input button:hover{transform:scale(1.12)}
.stars-input button.lit{color:var(--gold)}

/* ------------------------------------------------------------------ *
 * 11. Stat tiles + ledger                                             *
 * ------------------------------------------------------------------ */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:16px 24px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow)}
.stat .k{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600}
.stat .v{font-family:var(--display); font-size:30px; color:var(--ink); line-height:1.1; margin-top:6px; font-feature-settings:"tnum"}
.stat .v.sea{color:var(--teal-deep)} .stat .v.terra{color:var(--coral-deep)}
.stat .d{font-size:11.5px; color:var(--soft); margin-top:5px}
.stat--hero{grid-column:1/-1; background:var(--sunset-soft)}
.stat--hero .v{font-size:46px}

.ledger{padding:6px 16px 18px; display:flex; flex-direction:column}
.lrow{display:flex; align-items:center; gap:13px; padding:13px 8px; border-bottom:1px solid var(--line-2)}
.lrow:last-child{border-bottom:none}
.lrow .lr-main{flex:1 1 auto; min-width:0}
.lrow .lr-title{font-size:14px; color:var(--ink); font-weight:600}
.lrow .lr-sub{font-size:11.5px; color:var(--soft); margin-top:2px}
.lrow .lr-amt{font-size:17px; font-weight:600; color:var(--ink); font-feature-settings:"tnum"; text-align:right; white-space:nowrap}
.lrow .lr-amt.sea{color:var(--teal-deep)} .lrow .lr-amt.faint{color:var(--faint)}
.pill{font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:var(--pill); white-space:nowrap}
.pill--ok{background:var(--teal-soft); color:var(--teal-deep)}
.pill--wait{background:var(--coral-soft); color:var(--coral-deep)}
.pill--off{background:#EEF0F2; color:var(--soft)}

/* ------------------------------------------------------------------ *
 * 12. Frosted-glass sticky action bar                                 *
 * ------------------------------------------------------------------ */
.actionbar{
  position:sticky; bottom:0; z-index:6; padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.72); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid var(--line-2); display:flex; align-items:center; gap:12px}
.actionbar--plain{ background:transparent; backdrop-filter:none; border-top:none}
.actionbar .hint{font-size:12.5px; color:var(--soft); flex:1 1 auto; line-height:1.4}
.actionbar .hint b{color:var(--ink); font-weight:600}
.iconbtn{width:42px;height:42px;border-radius:var(--r-sm); border:1px solid var(--line);
  background:rgba(255,255,255,.6); cursor:pointer; font-size:16px; display:grid; place-items:center; transition:all var(--t); flex:0 0 auto}
.iconbtn:hover{background:var(--surface); border-color:var(--faint)}

/* ------------------------------------------------------------------ *
 * 13. Sheet (bottom sheet / booking ticket)                           *
 * ------------------------------------------------------------------ */
.sheet-scrim{position:fixed; inset:0; z-index:50; background:rgba(20,28,40,.5);
  backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .4s}
.sheet-scrim.on{opacity:1; pointer-events:auto}
.sheet{position:absolute; left:0; right:0; bottom:0; background:var(--surface);
  border-radius:24px 24px 0 0; padding:10px 24px calc(30px + env(safe-area-inset-bottom));
  transform:translateY(102%); transition:transform .5s var(--ease);
  box-shadow:0 -20px 60px -20px rgba(20,28,40,.4); max-height:92vh; overflow-y:auto}
.sheet.on{transform:none}
.sheet .grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 16px}
.sheet .seal{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--teal-deep); font-weight:700; text-align:center}
.sheet h2{font-family:var(--display); font-weight:400; font-size:28px; text-align:center; margin-top:6px; line-height:1.15}
.sheet h2 em{font-style:italic; color:var(--coral)}
.ticket{margin:18px 0 16px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex; gap:16px; padding:16px; align-items:center; position:relative}
.ticket::before,.ticket::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--bg);top:50%;transform:translateY(-50%);border:1px solid var(--line)}
.ticket::before{left:-10px}.ticket::after{right:-10px}
.qr{width:82px;height:82px;flex:0 0 auto;border-radius:11px;padding:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.qr svg{display:block;width:100%;height:100%}
.tk-info{flex:1 1 auto}
.tk-info .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:600}
.tk-info .code{font-family:var(--display);font-size:31px;letter-spacing:.1em;color:var(--ink);line-height:1.1}
.tk-info .meta{font-size:12px;color:var(--soft);margin-top:4px;line-height:1.5}
.tk-info .meta b{color:var(--ink)}
.commit{width:100%; font-weight:600; font-size:15px; color:#fff; background:var(--teal-grad);
  border:none; height:54px; border-radius:13px; cursor:pointer; transition:transform var(--t), filter var(--t);
  display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 8px 18px -8px rgba(14,84,80,.5)}
.commit:hover{ filter:brightness(1.05)}
.commit.done{background:linear-gradient(135deg,#2E8C5C,#1F6B40); pointer-events:none}
.reminder{font-size:11.5px;color:var(--faint);text-align:center;margin-top:12px;line-height:1.5}

/* ------------------------------------------------------------------ *
 * 14. Misc                                                            *
 * ------------------------------------------------------------------ */
.divider{height:1px; background:var(--line); margin:8px 24px}
.gift{margin:0 24px 12px; padding:16px; border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--line); position:relative; overflow:hidden}
.gift::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sunset)}
.gift.gift--sea::before{ background:var(--teal-grad)}
.gift.gift--ink::before{ background:var(--faint)}
.gift .gift-k{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-deep); font-weight:700}
.gift.gift--sea .gift-k{color:var(--teal-deep)}
.gift.gift--ink .gift-k{color:var(--soft)}
.gift .gift-t{font-size:16px; color:var(--ink); margin-top:6px; line-height:1.3; font-weight:500; letter-spacing:-.005em}
.gift .gift-d{font-size:12.5px; color:var(--soft); margin-top:6px; line-height:1.55}
.gift .gift-d b{color:var(--ink); font-weight:600}

@media(max-width:480px){
  body{padding:0}
  .shell{width:100%;border-radius:0;height:100dvh;max-height:100dvh; box-shadow:none; border:none}
  .sheet,.sheet-scrim{position:fixed}
}