/* closet-ai — blush, polka dots, and a hard black line around everything */

:root{
  --blush:#F7D7DC;
  --blush-deep:#EEB6C2;
  --cream:#FFF9F5;
  --ink:#000;
  --pink:#F3C6CE;          /* greeting bubble */
  --red:#D0021B;           /* lipstick — the one accent */
  --gold:#C9A24B;          /* tiny doses only: match-badge ring, BUY hover */
  --dot: rgba(20,17,18,.85);
  --shadow: 4px 4px 0 var(--ink);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:var(--blush);
  /* classic polka fabric: every other row shifted half a spacing. 36px tiles put
     neighbouring dots ~25.5px apart, the same density as the old 26px straight grid. */
  background-image:
    radial-gradient(var(--ink) 1.6px, transparent 1.6px),
    radial-gradient(var(--ink) 1.6px, transparent 1.6px);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
  color:var(--ink);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;margin:0}
.serif-it{font-family:'Playfair Display',Georgia,serif;font-style:italic}

/* ---------- header ---------- */
header{background:var(--cream);border-bottom:3px solid var(--ink);position:relative;padding:22px 20px 16px}
header .inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
/* the lipstick-script wordmark with its xoxo sign-off, as on the brand board */
.brand{text-decoration:none;display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;line-height:1}
.brand .wordmark{font-family:'Monsieur La Doulaise',cursive;font-size:54px;line-height:.85;color:var(--ink);
  font-weight:400;padding:4px 2px 0}
.brand .xoxo{font-family:'La Belle Aurore',cursive;font-size:20px;color:var(--red);
  transform:rotate(-7deg) translateY(-6px)}
nav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
nav a{
  text-decoration:none;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 18px;border:2px solid var(--ink);border-radius:999px;background:transparent;
  transition:background .15s, color .15s, transform .15s;
}
nav a:hover{transform:translateY(-2px)}
nav a.on{background:var(--ink);color:var(--cream)}
.scallop{height:15px;background-image:radial-gradient(circle at 50% 0,var(--cream) 8px,transparent 8.5px);
  background-size:26px 15px;background-repeat:repeat-x;margin-bottom:26px}

main{max-width:1180px;margin:0 auto;padding:0 20px 70px}

/* ---------- shared bits ---------- */
.page-head{margin:6px 0 14px}
.page-head h1{font-size:44px;font-style:italic;line-height:1.03}
.rule{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:2.5px solid var(--ink);padding-top:9px;margin:0 0 26px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.rule .r{opacity:.62}
.card{background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow)}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{
  text-decoration:none;font-size:13px;letter-spacing:.05em;padding:6px 14px;border:2px solid var(--ink);
  border-radius:999px;background:var(--cream);display:inline-flex;align-items:center;gap:7px;
}
.chip:hover{background:var(--blush-deep)}
.chip.on{background:var(--ink);color:var(--cream)}
.chip .n{opacity:.6;font-size:11px}
.chip .sw{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);display:inline-block}
.empty{padding:44px;text-align:center}
.empty code{background:var(--ink);color:var(--cream);padding:3px 9px;border-radius:6px;font-size:13px}

/* ---------- closet grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:20px}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .16s}
.tile:hover{transform:translateY(-4px) rotate(-.6deg)}
.tile .swatch{aspect-ratio:3/4;border-bottom:2.5px solid var(--ink);position:relative;display:grid;place-items:center}
.tile .swatch.multi{background:conic-gradient(#E58BA0,#E3C567,#5E7A5E,#5B7FA8,#7E6398,#E58BA0)}
.tile .swatch::after{ /* dot veil so pale swatches still read as patterned */
  content:"";position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(#000 1.4px,transparent 1.5px),radial-gradient(#000 1.4px,transparent 1.5px);
  background-size:20px 20px;background-position:0 0,10px 10px;
}
.tile .swatch.dark svg *{stroke:var(--cream)!important;fill:none}
.tile .swatch.dark svg circle[fill]{fill:var(--cream)!important;stroke:none}
.tile .swatch.dark::after{background-image:radial-gradient(#fff 1.4px,transparent 1.5px),radial-gradient(#fff 1.4px,transparent 1.5px);opacity:.16}
.tile .icon{width:56px;height:56px;position:relative;z-index:1}
.tile .icon svg{width:100%;height:100%;display:block}
.tile .body{padding:13px 14px 15px;flex:1;display:flex;flex-direction:column;gap:5px}
.tile .name{font-family:'Playfair Display',serif;font-size:16.5px;line-height:1.22}
.tile .brand{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.62}
.tile .meta{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:9px}
.tile .price{font-family:'Playfair Display',serif;font-size:19px}
.tile .size{font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px}
.tile .tags{font-size:11px;letter-spacing:.04em;opacity:.66;text-transform:lowercase}
.stamp{
  position:absolute;top:14px;right:-34px;transform:rotate(34deg);background:var(--ink);color:var(--cream);
  font-size:10.5px;letter-spacing:.18em;padding:5px 40px;z-index:2;
}
.tile.gone .swatch{filter:grayscale(.75) opacity(.62)}

/* ---------- profile ---------- */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;margin-bottom:24px}
.stat{padding:22px 20px;text-align:center;position:relative}
.stat .k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.62}
.stat .v{font-family:'Playfair Display',serif;font-size:44px;line-height:1.05;margin:6px 0 2px}
.stat .v.sm{font-size:29px}
.stat .sub{font-size:12.5px;opacity:.68}
.stat.filled{background:var(--ink);color:var(--cream)}
.stat.filled .k,.stat.filled .sub{opacity:.75}

.summary{padding:26px 30px;margin-bottom:24px;position:relative}
.summary::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(20,17,18,.3);border-radius:12px;pointer-events:none}
.summary h2{font-size:22px;font-style:italic;margin-bottom:12px}
.summary p{margin:0 0 12px;font-size:15.2px;line-height:1.65}
.summary p:last-child{margin-bottom:0}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(325px,100%),1fr));gap:20px}
.panel{padding:20px 22px 22px}
.panel h3{font-size:15px;letter-spacing:.13em;text-transform:uppercase;font-family:'Jost',sans-serif;
  font-weight:500;margin-bottom:16px;padding-bottom:9px;border-bottom:2px dotted var(--ink)}
.row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.row .lbl{width:108px;font-size:13.5px;text-transform:lowercase;flex-shrink:0}
.row .lbl .sw{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);display:inline-block;margin-right:5px}
.meter{display:flex;gap:4.5px;flex:1}
.meter i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);display:block}
.meter i.f{background:var(--ink)}
.row .pct{font-size:12px;width:38px;text-align:right;opacity:.66;flex-shrink:0}
.notecard{margin-top:22px;padding:15px 18px;border:2px dashed var(--ink);border-radius:14px;font-size:13.4px;background:rgba(255,255,255,.45)}
.notecard b{letter-spacing:.06em}

/* ---------- shop ---------- */
.deck{position:relative;max-width:520px;margin:0 auto;touch-action:pan-y}
.sc{display:none;overflow:hidden}
.sc.live{display:block;animation:in .3s ease}
@keyframes in{from{opacity:0;transform:translateY(14px) rotate(.8deg)}to{opacity:1;transform:none}}
/* the dotted ground shows through when a retailer's image won't load */
/* Product photos come in five shapes across the supported retailers (Shopbop ~9:16,
   Alo 2:3, Reformation 3:4, Everlane 4:5, Pleaser 1:1). A 3:4 frame with contain is the
   only combination that keeps the whole garment for all of them; cover would crop the
   hems off every Shopbop photo. Letterbox bars fill with plain blush. */
.sc .shot{aspect-ratio:3/4;width:100%;border-bottom:2.5px solid var(--ink);background:var(--blush-deep);
  position:relative;display:grid;place-items:center;overflow:hidden;
  background-image:radial-gradient(rgba(20,17,18,.5) 2px,transparent 2.1px),radial-gradient(rgba(20,17,18,.5) 2px,transparent 2.1px);
  background-size:42px 42px;background-position:0 0,21px 21px}
.sc .shot:has(img){background:var(--blush);background-image:none}
/* Absolutely positioned so the img box IS the frame. As a grid item, height:100% is
   cyclic against an auto row, so the row grows to the photo's intrinsic height and
   overflow:hidden crops it — contain never gets a chance to letterbox. */
.sc .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.rosette{
  position:absolute;top:14px;left:14px;width:66px;height:66px;border-radius:50%;background:var(--cream);
  border:2.5px solid var(--ink);display:grid;place-items:center;text-align:center;z-index:2;box-shadow:2px 2px 0 var(--ink);
}
.rosette b{font-family:'Playfair Display',serif;font-size:21px;line-height:1;display:block}
.rosette span{font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.7}
.sc .body{padding:20px 22px 22px}
.sc h2{font-size:26px;font-style:italic;line-height:1.15;margin-bottom:5px}
.sc .who{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.65;margin-bottom:12px}
.sc .tagline{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.sc .tagline span{font-size:11.5px;border:1.5px solid var(--ink);border-radius:999px;padding:2px 10px}
.sc .why{font-size:14.6px;line-height:1.62;padding:14px 16px;border-radius:12px;background:var(--blush);
  border:1.5px solid var(--ink);position:relative;margin-bottom:16px}
.sc .why::before{content:"why";position:absolute;top:-9px;left:14px;background:var(--ink);color:var(--cream);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:2px 9px;border-radius:999px}
.sc .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sc .tag-price{font-family:'Playfair Display',serif;font-size:29px}
.sc .tag-price s{font-size:15px;opacity:.5;margin-left:7px}
.look{text-decoration:none;background:var(--ink);color:var(--cream);border-radius:999px;padding:11px 24px;
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;display:inline-block}
.look:hover{background:var(--gold);color:var(--ink)}
.warn{font-size:12.5px;margin-top:12px;padding:8px 12px;border:1.5px dashed var(--ink);border-radius:10px}
.deck-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.arrow{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);background:var(--cream);
  cursor:pointer;font-size:19px;line-height:1;box-shadow:2px 2px 0 var(--ink)}
.arrow:hover{background:var(--blush-deep)}
.arrow:disabled{opacity:.32;cursor:default;box-shadow:none}
.pips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:230px}
.pips i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);cursor:pointer}
.pips i.on{background:var(--ink);transform:scale(1.25)}
.hint{text-align:center;font-size:12px;letter-spacing:.09em;text-transform:uppercase;opacity:.55;margin-top:14px}
.deck-meta{text-align:center;font-size:12.5px;opacity:.62;margin-bottom:18px}

@media (max-width:640px){
  .page-head h1{font-size:31px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  header .inner{gap:12px}
  nav{margin-left:0;width:100%}
}

/* ---------- swipe deck ---------- */
.deck{position:relative;max-width:460px;margin:0 auto;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  /* photo column width, derived from viewport height so photo + buttons fit on screen */
  --shot-w:clamp(290px, calc((100svh - 395px) * .75), 420px)}
#stack .sc .shot{max-height:64svh}
#stack{position:relative}
#stack .sc{display:block;position:relative;overflow:hidden;cursor:grab}
@media (min-width:860px){
  .deck{max-width:calc(var(--shot-w) + 400px);min-height:calc(var(--shot-w) * 4 / 3)}
  #stack .sc{display:grid;grid-template-columns:var(--shot-w) minmax(0,1fr)}
  #stack .sc .shot{max-height:none;border-bottom:0;border-right:2.5px solid var(--ink)}
  #stack .sc .body{display:flex;flex-direction:column;padding:26px 26px 24px}
  #stack .sc .foot{margin-top:auto}
}
#stack .sc:active{cursor:grabbing}
#stack .sc.behind{position:absolute;inset:0;transform:rotate(-2.2deg) scale(.975);opacity:.55;
  pointer-events:none;filter:saturate(.7)}
#stack .sc.fly-right{transition:transform .22s ease-in,opacity .22s;transform:translateX(120%) rotate(18deg);opacity:0}
#stack .sc.fly-left{transition:transform .22s ease-in,opacity .22s;transform:translateX(-120%) rotate(-18deg);opacity:0}
.sc .sizes{margin-top:11px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.verdict{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:20;
  font-family:'Playfair Display',serif;font-style:italic;font-size:30px;padding:12px 30px;border-radius:999px;
  border:2.5px solid var(--ink);background:var(--cream);opacity:0;pointer-events:none;transition:.18s;
  box-shadow:var(--shadow)}
.verdict.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.verdict.like{background:#DFF3E6}
.verdict.skip{background:#F6E2E6}
.arrow.yes,.arrow.no{width:60px;height:60px;font-size:23px}
.arrow.yes{background:#DFF3E6}
.arrow.no{background:#F6E2E6}
.arrow.tiny{width:38px;height:38px;font-size:15px}
.arrow.yes:hover{background:#BEE6CE}
.arrow.no:hover{background:#F2C8D1}

/* ---------- wishlist ---------- */
.grid.wish{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.shot-sm{aspect-ratio:3/4;width:100%;position:relative;border-bottom:2.5px solid var(--ink);
  background:var(--blush-deep);
  background-image:radial-gradient(rgba(20,17,18,.45) 2px,transparent 2.1px),radial-gradient(rgba(20,17,18,.45) 2px,transparent 2.1px);
  background-size:40px 40px;background-position:0 0,20px 20px;
  display:grid;place-items:center;overflow:hidden}
.shot-sm:has(img){background:var(--blush);background-image:none}
.shot-sm img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.rosette.sm{width:50px;height:50px;top:10px;left:10px;box-shadow:1.5px 1.5px 0 var(--ink)}
.rosette.sm b{font-size:16px}
.rosette.sm span span{font-size:7px}
.sale-flag{position:absolute;top:12px;right:12px;background:var(--red);color:var(--cream);
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding:3px 10px;border-radius:999px;
  border:1.5px solid var(--ink)}
.look.sm{padding:7px 16px;font-size:11px}
.tile .price s{font-size:12.5px;opacity:.5;margin-left:6px;font-family:'Jost',sans-serif}
.learned{margin-top:30px}
.learned .lede{font-size:13.6px;opacity:.78;margin:-6px 0 18px;max-width:640px}
.learned .n{font-size:10.5px;opacity:.5;letter-spacing:.1em;text-transform:uppercase}
.meter i.x{background:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 4px)}

[hidden]{display:none!important}

/* ---------- closet photos ---------- */
.tile[data-id]{cursor:pointer}
.tile[data-id]:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* same frame as the swatch so photo and no-photo tiles line up in the grid */
.tile .media{aspect-ratio:3/4;position:relative;border-bottom:2.5px solid var(--ink);
  background:var(--blush);overflow:hidden}
.tile .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.tile.gone .media img{filter:grayscale(.6) opacity(.7)}
.dot-sw{position:absolute;bottom:9px;left:9px;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--cream);box-shadow:0 0 0 1.5px var(--ink);z-index:1}
.dot-sw.multi{background:conic-gradient(#E58BA0,#E3C567,#5E7A5E,#5B7FA8,#7E6398,#E58BA0)}
.ph-badge{position:absolute;bottom:9px;right:9px;z-index:1;background:var(--cream);border:1.5px solid var(--ink);
  border-radius:999px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px}

/* ---------- fix-a-photo panel ---------- */
.fixer{border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--cream);
  color:var(--ink);padding:0;width:min(880px,94vw);max-height:92vh;overflow:auto}
.fixer::backdrop{background:rgba(20,17,18,.45);
  background-image:radial-gradient(rgba(247,215,220,.5) 1.6px,transparent 1.7px),radial-gradient(rgba(247,215,220,.5) 1.6px,transparent 1.7px);
  background-size:36px 36px;background-position:0 0,18px 18px}
.fx-x{position:absolute;top:10px;right:12px;margin:0}
.fx-x button{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);background:var(--cream);cursor:pointer;font-size:15px}
.fx-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
.fx-now{border-right:2.5px solid var(--ink);background:var(--blush);display:flex;flex-direction:column}
.fx-photo{aspect-ratio:3/4;position:relative;display:grid;place-items:center}
.fx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fx-none{font-family:'Playfair Display',serif;font-style:italic;padding:30px;text-align:center}
.fx-src{padding:9px 14px;font-size:12px;border-top:1.5px solid var(--ink);background:var(--cream);min-height:34px}
.fx-side{padding:22px 24px 20px}
.fx-brand{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.fx-side h2{font-size:25px;font-style:italic;line-height:1.15;margin:4px 40px 8px 0}
.fx-note{font-size:13px;line-height:1.5;opacity:.8;margin:0 0 6px}
.fx-side h3{font-family:'Jost',sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;margin:18px 0 8px;padding-bottom:5px;border-bottom:1.5px dotted var(--ink)}
.fx-alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.fx-alt{border:1.5px solid var(--ink);border-radius:10px;background:var(--blush);padding:0;cursor:pointer;
  overflow:hidden;display:flex;flex-direction:column;text-align:left}
.fx-alt:hover{box-shadow:2px 2px 0 var(--ink);transform:translateY(-1px)}
.fx-alt img{width:100%;aspect-ratio:3/4;object-fit:contain;display:block;background:var(--blush)}
.fx-alt span{font-size:9.5px;padding:3px 5px;background:var(--cream);border-top:1px solid var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-empty{font-size:12.5px;opacity:.6;grid-column:1/-1}
.fx-row{display:flex;gap:8px;align-items:center}
.fx-row input[type=url],.fx-row input[type=text]{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:8px 12px;
  border:1.5px solid var(--ink);border-radius:999px;background:#fff}
.fx-row input[type=file]{font:inherit;font-size:12.5px}
.fx-row .look{border:0;cursor:pointer;font-family:'Jost',sans-serif}
.fx-cost{font-size:11px;opacity:.55;margin:5px 0 0 4px}
.fx-linkish{margin-top:18px;background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  text-decoration:underline;cursor:pointer;color:var(--ink);opacity:.75}
.fx-status{font-size:13px;min-height:18px;margin:12px 0 0;color:var(--red)}
@media (max-width:700px){
  .fx-grid{grid-template-columns:1fr}
  .fx-now{border-right:0;border-bottom:2.5px solid var(--ink)}
  .fx-photo{aspect-ratio:auto;height:48vh}
}


/* ============ The Damage: voice, stamps, gold ============ */
/* lipstick script is for headline moments only: wordmark, empty states, sign-off */
.script-line{font-family:'Monsieur La Doulaise',cursive;font-weight:400;font-style:normal;line-height:1}
.xoxo-sig{font-family:'La Belle Aurore',cursive;color:var(--red);font-size:1.15rem}
.serif-it.big{font-size:1.5rem;margin:0 0 10px}

.greeting{max-width:620px;margin:0 0 30px}
.bubble{background:var(--pink);border:2.5px solid var(--ink);border-radius:18px;border-bottom-left-radius:4px;
  padding:16px 22px;box-shadow:5px 5px 0 var(--ink);font-size:1.05rem;line-height:1.5}
.bubble b{font-family:'Playfair Display',serif;font-style:italic}
.bubble .xoxo-sig{display:block;margin-top:6px;font-size:1.1rem}

/* gold, dose one: a thin ring inside every match badge */
.rosette::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid var(--gold);
  pointer-events:none}
.rosette.sm::after{inset:3px;border-width:1.2px}

.kiss-stamp{display:block;height:auto}
.empty .kiss-stamp{margin:0 auto 12px}
.empty .script-line{font-size:3.6rem;margin-bottom:4px}

.panel h3.voice-h{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;text-transform:none;
  letter-spacing:0;font-size:19px}
.rule .damage{opacity:1;font-weight:500}

/* Spotted: the day's #1, framed like a gossip-column item */
#stack .sc.spotted{box-shadow:6px 6px 0 var(--red)}
.sc .kicker{font-size:12.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--red);
  margin-bottom:8px}
.sc .kicker span{color:var(--ink);font-weight:400;letter-spacing:.12em;margin-left:10px;opacity:.6;font-size:11px}
.sc .gossip{font-family:'Playfair Display',serif;font-style:italic;font-size:16.5px;line-height:1.45;margin:-2px 0 15px}
/* the photo rule (.sc .shot img{inset:0}) also matches the stamp — reset the other two
   edges, or its left:0 wins and the kiss lands on top of the match badge */
.sc .shot .kiss-on{position:absolute;top:14px;right:14px;left:auto;bottom:auto;width:62px;height:auto;
  z-index:2;transform:rotate(-12deg);pointer-events:none}

.warn.hot{border-color:var(--red);color:var(--red);font-weight:500}

/* toasts: "Noted. Your secret's safe with us." / "Never happened." */
.verdict{font-size:19px;padding:11px 24px;white-space:nowrap;display:flex;align-items:center;gap:10px}
.verdict img{height:22px;width:auto}
.verdict.like{background:var(--pink)}
.verdict.skip{background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--red)}
@media (max-width:640px){ .verdict{white-space:normal;max-width:88vw;text-align:center;font-size:17px} }

/* every page signs off */
.signoff{max-width:1180px;margin:0 auto;padding:6px 20px 46px;text-align:center}
.signoff .kiss-stamp{margin:0 auto 2px}
.signoff .note{font-family:'La Belle Aurore',cursive;font-size:1.35rem;margin:0}
.signoff .note span{color:var(--red)}
.signoff .fx-linkish{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* the farewell after signing off */
/* the farewell page keeps the header; the card sits centred below it */
.bye main{display:grid;place-items:center;min-height:calc(100vh - 170px)}
.farewell{background:var(--cream);border:2.5px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--ink);
  padding:40px 50px 34px;text-align:center;max-width:520px;margin:20px}
.farewell img{display:block;margin:0 auto 8px;height:auto}
.farewell .script-line{font-size:4.4rem}
.farewell-sub{font-family:'Playfair Display',serif;font-style:italic;font-size:1.35rem;margin:8px 0 6px}
.farewell .xoxo-sig{font-size:1.35rem}
.farewell-hint{font-size:12.5px;opacity:.6;margin-top:24px}
.farewell-hint code{background:var(--ink);color:var(--cream);padding:2px 7px;border-radius:6px}


/* ============ accounts: sign-in, flashes, settings ============ */
.inline{display:inline}
.flashes{max-width:1180px;margin:14px auto 0;padding:0 20px;display:grid;gap:8px}
.flash{margin:0;background:var(--cream);border:2px solid var(--ink);border-left:8px solid var(--red);
  border-radius:12px;padding:10px 14px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
.btn{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  background:var(--ink);color:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:10px 20px;
  text-decoration:none;display:inline-block}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn.ghost{background:var(--cream);color:var(--ink)}
.btn.ghost:hover{background:var(--blush-deep)}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.red:hover{background:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.stack{display:grid;gap:8px;margin:0 0 16px}
.stack label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.stack input[type=email],.stack input[type=password],.stack input[type=text]{font:inherit;font-size:15px;
  padding:10px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;min-width:0}
.stack input:focus{outline:3px solid var(--red);outline-offset:1px}
.fine{font-size:12.5px;opacity:.72;line-height:1.55}
.fine code{font-size:11.5px}

.auth{max-width:430px;margin:40px auto 60px;padding:30px 30px 22px}
.auth.center{text-align:center}
.auth .kiss-stamp{margin:0 auto 8px}
.auth-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 4px;color:var(--red)}
.auth-h{font-family:'Playfair Display',serif;font-style:italic;font-size:32px;line-height:1.1;margin:0 0 22px}
.auth-script{font-size:3.6rem;margin:0 0 10px}
.auth .btn{width:100%}
.pw{margin:4px 0 8px}
.pw summary{cursor:pointer;font-size:13px;text-decoration:underline;margin-bottom:12px}

.settings .panel p{margin:0 0 12px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.btnrow form{margin:0}
.status-line{display:flex;align-items:center;gap:8px;font-size:15px}
.dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);display:inline-block;flex:none;background:var(--cream)}
.dot.ok,.dot.done{background:var(--ink)}
.dot.running,.dot.queued{background:var(--gold);animation:pulse 1.2s ease-in-out infinite}
.dot.failed{background:var(--red);border-color:var(--red)}
@keyframes pulse{50%{opacity:.35}}
.jobs{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px}
.job{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;font-size:13.5px;
  padding-top:8px;border-top:1.5px dotted var(--ink)}
.job .when{grid-column:2;font-size:11.5px;opacity:.6}
.job .msg{grid-column:2;font-size:12px;opacity:.8;word-break:break-word}
.job.failed .msg{color:var(--red);opacity:1}
.danger{border-color:var(--red)}
.danger h3{color:var(--red);border-bottom-color:var(--red)}
.empty .btn{margin-top:14px}
.settings .fx-row{flex-wrap:wrap}
.settings .fx-row input{flex:1 1 170px}