/* BrideHub SA — the brand, as CSS. Same palette and faces as the prototype. */
:root{
  color-scheme:light;
  --paper:#FBF4F2; --surface:#FFFFFF; --surface-2:#F6EAE7;
  --ink:#1B2A4A; --ink-2:#5D6A87; --ink-3:#8C97AD;
  --line:#EBDCD8; --line-2:#DFCEC9;
  --rose:#C4737F; --rose-soft:#FAEAEC;
  --gold:#B08A38;
  --good:#2F7A5B; --good-soft:#E2F1EA;
  --stop:#A94236; --stop-soft:#FAE7E4;
  --display:"Cormorant Garamond",Georgia,serif;
  --ui:"Karla","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --paper:#141A2B; --surface:#1C2338; --surface-2:#252E48;
  --ink:#F3E9E8; --ink-2:#AEB8CF; --ink-3:#7E89A4;
  --line:#2E3853; --line-2:#3B4665;
  --rose:#E9A3AD; --rose-soft:#33222A;
  --gold:#D8B45F;
  --good:#6DC5A0; --good-soft:#1B3129;
  --stop:#E4897C; --stop-soft:#33211E;
}}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh}

/* ---------- chrome ---------- */
.top{display:flex;align-items:center;gap:16px;padding:0 20px;height:60px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-size:25px;font-weight:600;color:var(--ink)}
.brand em{font-style:normal;color:var(--rose)}
.brand span{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  color:var(--gold);vertical-align:6px;margin-left:5px}
.sp{flex:1}

.wrap{flex:1;width:100%;max-width:640px;margin:0 auto;padding:34px 20px 60px}
h1{font-family:var(--display);font-size:clamp(30px,6vw,40px);font-weight:600;
  line-height:1.1;margin:0 0 8px;text-wrap:balance}
h2{font-family:var(--display);font-size:22px;font-weight:600;margin:0 0 6px}
.stand{color:var(--ink-2);margin:0 0 24px;max-width:52ch}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px;margin-bottom:18px}
.card.proof{background:none;border-style:dashed}
.card.proof p{font-size:14px;color:var(--ink-2);margin:0 0 8px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:10px;
  padding:4px;margin-bottom:20px}
.tabs button{flex:1;border:0;background:none;color:var(--ink-2);font:inherit;
  font-size:14px;font-weight:600;padding:8px 10px;border-radius:7px;cursor:pointer}
.tabs button.on{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- forms ---------- */
.fld{margin-bottom:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.frow{grid-template-columns:1fr;gap:0}}
.fl{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:6px}
input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:9px;padding:10px 12px}
input[type=date]{max-width:220px}
input:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose)}
.note{font-size:12.5px;color:var(--ink-3);margin:6px 0 0}

.btn{background:var(--rose);color:#fff;border:0;border-radius:9px;
  padding:11px 20px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.btn:hover:not(:disabled){filter:brightness(1.05)}
.btn:disabled{opacity:.6;cursor:default}
.ghost{background:none;border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:8px;padding:7px 13px;font:inherit;font-size:13px;cursor:pointer}
.ghost:hover{border-color:var(--rose);color:var(--rose)}
/* A button that reads as a link. Deliberately quiet — it is only wanted on
   the day something has gone wrong. */
.linky{display:block;margin:14px auto 0;background:none;border:0;padding:4px;
  font:inherit;font-size:13.5px;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.linky:hover{color:var(--rose)}
.linky[hidden]{display:none}

/* ---------- messages ---------- */
.msg{font-size:14px;border-radius:9px;padding:10px 13px;margin:0 0 16px}
.msg.good{background:var(--good-soft);color:var(--good)}
.msg.bad{background:var(--stop-soft);color:var(--stop)}
.banner{padding:12px 20px;font-size:14px;text-align:center}
.banner.bad{background:var(--stop-soft);color:var(--stop);
  border-bottom:1px solid var(--stop)}

.foot{padding:20px;text-align:center;font-size:12.5px;color:var(--ink-3);
  border-top:1px solid var(--line)}
.foot .dot{margin:0 6px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   The app shell — added when the bare test form became BrideHub
   ============================================================ */

/* The logo's ring is drawn in rose; its other two groups pick up --ink and
   --gold, so the mark re-colours itself in dark mode along with everything
   else rather than needing a second copy. */
:root{ --logo-ring:var(--rose) }

.mark{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center}
.mark .logo{width:100%;height:100%;display:block}
.top{gap:10px}
.brand{white-space:nowrap}

/* ---------- the couple, in the top bar ---------- */
.whoami{display:flex;align-items:center;gap:9px;margin-left:8px;padding:4px 10px 4px 4px;
  background:none;border:1px solid transparent;border-radius:999px;font:inherit;
  color:inherit;cursor:pointer;text-align:left;max-width:min(46vw,320px)}
.whoami:hover{border-color:var(--line-2);background:var(--surface-2)}
.whoami .wpic{width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  background:var(--surface-2);border:1.5px solid var(--rose);
  background-size:cover;background-position:50% 50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--rose);letter-spacing:.02em}
.whoami .wtxt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.whoami .wtxt b{font-size:13.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.whoami .wtxt small{font-size:11px;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- shell ---------- */
.shell{flex:1;display:flex;gap:26px;width:100%;max-width:1180px;
  margin:0 auto;padding:24px 20px 60px;align-items:flex-start}
#nav{flex:0 0 204px;position:sticky;top:18px}
#navlinks{display:flex;flex-direction:column;gap:2px}
#navlinks button{display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:0;border-radius:9px;padding:9px 12px;font:inherit;
  font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;text-align:left}
#navlinks button:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
#navlinks button.on{background:var(--surface);color:var(--ink);font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.07)}
#navlinks button.soon{color:var(--ink-3);cursor:default}
#navlinks .pip{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
#navlinks button.on .pip{color:var(--rose)}

.view{flex:1;min-width:0}

/* ---------- dashboard ---------- */
.count{text-align:center;padding:30px 22px}
.count .big{font-family:var(--display);font-size:clamp(46px,13vw,76px);
  font-weight:600;line-height:1;color:var(--rose);display:block}
.count .cap{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-top:10px;display:block}
.count .when{font-size:15px;color:var(--ink-2);margin-top:14px}

/* The 1px gap IS the dividing line: the grid's own background shows through
   between cells. Drawing borders instead means guessing how many columns
   fitted, and the guess is wrong at every width but one. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border-radius:13px;overflow:hidden}
.facts div{padding:13px 16px;background:var(--surface)}
.facts dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.facts dd{margin:3px 0 0;font-size:15.5px}
.facts dd.none{color:var(--ink-3);font-style:italic}

.soonlist{margin:0;padding-left:20px;color:var(--ink-2);font-size:14.5px}
.soonlist li{margin:3px 0}

/* ---------- phone ---------- */
@media(max-width:760px){
  .shell{flex-direction:column;gap:16px;padding:16px 16px 48px}
  #nav{flex:none;position:static;width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  #navlinks{flex-direction:row;gap:6px;padding-bottom:4px}
  #navlinks button{width:auto;white-space:nowrap;padding:8px 13px;font-size:13.5px}
  #navlinks .pip{margin-left:4px;font-size:8.5px;letter-spacing:.04em}
  .whoami .wtxt{display:none}
  .whoami{max-width:none;padding:4px}
}
@media(max-width:430px){
  .top{padding:0 13px;gap:7px}
  .brand{font-size:21px}
  .brand span{font-size:8.5px;margin-left:3px}
  .mark{width:28px;height:28px;flex:0 0 28px}
}

/* Dropdowns are drawn by the browser; giving them the same skin as the text
   boxes keeps the profile from looking half-finished. The arrow is ours so it
   matches in dark mode too. */
select{width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:9px;
  padding:10px 34px 10px 12px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat}
select:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose)}

/* ---------- checklist ---------- */
.prog{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:2px 0 9px}
.prog span{display:block;height:100%;background:var(--rose);border-radius:99px;
  transition:width .25s ease}
@media (prefers-reduced-motion:reduce){.prog span{transition:none}}
.progtext{margin:0 0 14px;font-size:14px;color:var(--ink-2)}
.lateN{color:var(--stop);font-weight:700}

.stage{margin:0 0 20px}
.stage h3{font-family:var(--display);font-size:19px;font-weight:600;margin:0 0 8px;
  padding-left:2px}
.tasks{list-style:none;margin:0;padding:0;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.task{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  border-top:1px solid var(--line)}
.task:first-child{border-top:0}

/* 26px is not decoration: it is about the smallest target a thumb hits
   reliably, and this is a list people tick on a phone. */
.tick{flex:0 0 auto;width:26px;height:26px;margin-top:1px;border-radius:8px;
  border:1.5px solid var(--line-2);background:var(--surface);color:#fff;
  font-size:15px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.tick:hover{border-color:var(--rose)}
.task.done .tick{background:var(--rose);border-color:var(--rose)}

.tbody{flex:1;min-width:0;display:flex;flex-direction:column}
.ttitle{font-size:15px;line-height:1.4}
.tmeta{font-size:12px;color:var(--ink-3);margin-top:2px}
.task.done .ttitle{color:var(--ink-3);text-decoration:line-through}
.task.late .tmeta{color:var(--stop)}

.tact{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.x{width:26px;height:26px;border:0;background:none;color:var(--ink-3);
  font-size:19px;line-height:1;border-radius:7px;cursor:pointer}
.x:hover{background:var(--stop-soft);color:var(--stop)}
.sure{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  white-space:nowrap}
.sure[hidden]{display:none}
.sure button{border:1px solid var(--line-2);background:var(--surface);font:inherit;
  font-size:12px;padding:4px 9px;border-radius:7px;cursor:pointer;color:var(--ink-2)}
.sure .yes{border-color:var(--stop);color:var(--stop)}

.soonlist.late li{color:var(--stop)}
.none{color:var(--ink-3);font-style:italic;padding:4px 2px 18px}
.card .ghost{margin-top:4px}

@media(max-width:430px){
  .sure{flex-direction:column;align-items:flex-end;gap:3px}
  .task{gap:9px;padding:11px 11px}
}

/* ---------- guest list ---------- */
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:1px;
  background:var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
.tally div{background:var(--surface);padding:11px 13px}
.tally dt{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.tally dd{margin:2px 0 0;font-family:var(--display);font-size:27px;font-weight:600;
  line-height:1.05}
.tally dd.good{color:var(--good)}

.stage h3 .hcount{font-family:var(--ui);font-size:11px;font-weight:700;color:var(--ink-3);
  background:var(--surface-2);border-radius:99px;padding:1px 8px;margin-left:7px;
  vertical-align:3px}

.guest{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-top:1px solid var(--line)}
.guest:first-child{border-top:0}
.guest.editing{display:block;padding:16px 14px;background:var(--surface-2)}
.gname{flex:1;min-width:0;display:flex;flex-direction:column;font-size:15px}
.gmeta{font-size:12px;color:var(--ink-3);margin-top:1px}

/* Three states, one tap each — faster than a dropdown when a couple is
   working through a stack of replies. */
.rsvpset{display:flex;gap:4px;flex:0 0 auto}
.rs{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line-2);
  background:var(--surface);color:var(--ink-3);font-size:14px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.rs:hover{border-color:var(--rose)}
.rs.on.yes{background:var(--good);border-color:var(--good);color:#fff}
.rs.on.no{background:var(--stop);border-color:var(--stop);color:#fff}
.rs.on.pending{background:var(--gold);border-color:var(--gold);color:#fff}

.pencil{font-size:14px}
.gedit .fld{margin-bottom:12px}
.gbtns{display:flex;gap:8px;align-items:center}

@media(max-width:560px){
  .guest{flex-wrap:wrap;gap:8px}
  .gname{flex:1 1 100%}
  .rsvpset{margin-right:auto}
  .tally dd{font-size:23px}
}

/* ---------- budget ---------- */
.frow.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.frow.three{grid-template-columns:1fr;gap:0}}

.tally dd.bad{color:var(--stop)}
.prog.over span{background:var(--stop)}

.bitem{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-top:1px solid var(--line)}
.bitem:first-child{border-top:0}
.bitem.editing{display:block;padding:16px 14px;background:var(--surface-2)}
.bmain{flex:1;min-width:0;display:flex;flex-direction:column}
.bname{font-size:15px}
.bmeta{font-size:12px;color:var(--ink-3);margin-top:1px}

/* Three figures, always in the same order and always aligned, so a column of
   them can be read down rather than hunted through. */
.bnums{display:flex;gap:16px;flex:0 0 auto;text-align:right}
.bn{display:flex;flex-direction:column;font-size:14px;font-variant-numeric:tabular-nums;
  min-width:74px}
.bn em{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.bn.owe{color:var(--ink)}

.stage h3 .hcount{font-variant-numeric:tabular-nums}

@media(max-width:620px){
  .bitem{flex-wrap:wrap;gap:8px}
  .bmain{flex:1 1 100%}
  .bnums{gap:14px;margin-right:auto;text-align:left}
  .bn{min-width:0}
}

/* ---------- seating chart ---------- */
.sech{font-family:var(--display);font-size:20px;font-weight:600;margin:22px 0 8px}
.sech .hcount{font-family:var(--ui);font-size:11px;font-weight:700;color:var(--ink-3);
  background:var(--surface-2);border-radius:99px;padding:1px 8px;margin-left:6px;
  vertical-align:3px}

.pool .hh{border-top:1px solid var(--line);padding:12px 0 4px}
.pool .hh:first-child{border-top:0;padding-top:0}
.hhead{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.hhead b{font-size:13.5px}
.hhead .ghost{padding:4px 10px;font-size:12px}
.hhead .ghost.on{border-color:var(--rose);color:var(--rose);background:var(--rose-soft)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  font:inherit;font-size:13px;padding:5px 11px;border-radius:99px;cursor:pointer}
.chip:hover{border-color:var(--rose)}
.chip.on{background:var(--rose);border-color:var(--rose);color:#fff}
.chip em{font-style:normal;color:var(--gold);font-weight:700;margin-left:5px}
.chip.on em{color:#fff}
.chip.seated{background:var(--surface-2)}
.chip.seated:hover{border-color:var(--stop);color:var(--stop)}

.tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;
  margin-bottom:18px}
.tbl{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.tbl.ready{border-color:var(--rose);border-style:dashed}
.tbl.over{border-color:var(--stop)}
.thead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.thead b{font-family:var(--display);font-size:18px;font-weight:600}
.tcount{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tcount.bad{color:var(--stop);font-weight:700}
.tfoot{margin-top:11px;min-height:30px;display:flex;align-items:center}
.btn.small{padding:6px 12px;font-size:13px}
.none.small{font-size:12.5px;padding:0}

.tfix{display:flex;gap:6px;align-items:center;margin-top:11px}
.tfix[hidden]{display:none}
.tfix .tname{flex:1;min-width:0;padding:7px 9px;font-size:13.5px}
.tfix .tseats{width:66px;flex:0 0 66px;padding:7px 9px;font-size:13.5px}
.tfoot[hidden]{display:none}

/* ---------- day-of timeline ---------- */
.tl .tlrow{display:flex;align-items:flex-start;gap:14px;padding:11px 14px;
  border-top:1px solid var(--line)}
.tl .tlrow:first-child{border-top:0}
.tl .tlrow.editing{display:block;padding:16px 14px;background:var(--surface-2)}
/* Fixed width and lining figures so the times form a straight column the eye
   can run down — the whole point of a running order. */
.tltime{flex:0 0 68px;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:14px;color:var(--rose);padding-top:1px}
.tlbody{flex:1;min-width:0;display:flex;flex-direction:column}
.tltitle{font-size:15px;line-height:1.4}

/* ---------- suppliers ---------- */
.stat{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-3);white-space:nowrap}
.stat.contacted{color:var(--ink-2)}
.stat.quoted{background:rgba(176,138,56,.14);color:var(--gold)}
.stat.booked{background:var(--good-soft);color:var(--good)}
.stat.passed{opacity:.6;text-decoration:line-through}

@media(max-width:560px){
  .tltime{flex:0 0 56px;font-size:13px}
  .tl .tlrow{gap:10px;padding:10px 11px}
}

/* ---------- the wedding website, couple's side ---------- */
textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;resize:vertical;
  line-height:1.55}
textarea:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose)}

.slugrow{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);
  border-radius:9px;background:var(--surface);overflow:hidden}
.slugrow span{padding:10px 0 10px 12px;font-size:13.5px;color:var(--ink-3);white-space:nowrap}
.slugrow input{border:0;border-radius:0;padding-left:2px;background:none}
.slugrow input:focus{outline:2px solid var(--rose);outline-offset:-2px}

.pubrow{display:flex;align-items:center;gap:16px;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:16px}
.urlrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.urlrow input{flex:1;min-width:180px;font-size:13.5px;color:var(--ink-2)}
.urlrow .ghost{text-decoration:none;display:inline-flex;align-items:center}

.check{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:14.5px}
.check input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--rose)}

/* ============================================================
   The guest's page — a different room from the app
   ============================================================ */
.guestpage{background:var(--paper)}
.gwrap{width:100%;max-width:660px;margin:0 auto;padding:26px 20px 50px}
.loading{text-align:center;color:var(--ink-3);padding:60px 20px}

.gtabs{display:flex;justify-content:center;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.gtabs button{background:none;border:0;border-bottom:2px solid transparent;font:inherit;
  font-size:14px;font-weight:600;color:var(--ink-3);padding:6px 10px;cursor:pointer}
.gtabs button:hover{color:var(--ink-2)}
.gtabs button.on{color:var(--rose);border-bottom-color:var(--rose)}

.ghero{text-align:center;padding:34px 10px 30px}
.gover{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin:0 0 12px}
.ghero h1{font-size:clamp(38px,10vw,62px);margin:0 0 14px}
.gdate{font-family:var(--display);font-size:21px;color:var(--ink-2);margin:0}
.gwhere{font-size:15px;color:var(--ink-3);margin:4px 0 0}
.gcount{display:inline-block;margin:20px 0 0;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rose);
  background:var(--rose-soft);border-radius:99px;padding:6px 16px}

.gstory p{margin:0 0 12px;line-height:1.75}
.gstory p:last-child{margin-bottom:0}

/* ---------- gifts ---------- */
.gifts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.gift{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.gift.claimed{border-color:var(--rose);background:var(--rose-soft)}
.gtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gift .gname{font-family:var(--display);font-size:19px;font-weight:600}
.gprice{font-size:13px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.gnote{font-size:13.5px;color:var(--ink-2);margin:6px 0 0}
.gnote a{color:var(--rose)}
.gift .btn.small{margin-top:12px}
.gmine{font-size:13.5px;color:var(--rose);margin:12px 0 0;font-weight:600}