/* Sipriz — site styles. Colors are defined once here, at the top. */
:root{
  --bg:#FBF7F5; --surface:#FFFFFF; --ink:#141A3A; --muted:#5E5566; --line:#EADDE0;
  --accent:#B5174B; --accent-ink:#FFFFFF; --sun:#F2AE12; --sea:#1A6BB3; --soft:#F5EAED;
  --gold:#8A6A25; --gold-line:#C9A55A;
  --ok:#2E7D4F; --warn:#B26B00; --bad:#C0392B;
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:14px;
}
/* Dark palette: set by the page (night hours 18:00-6:00, or the visitor's own choice) */
:root[data-theme="dark"]{
  --bg:#140F17; --surface:#1F1822; --ink:#F3ECEF; --muted:#B7A8B2; --line:#372A35;
  --accent:#F0709A; --accent-ink:#140A12; --sun:#FFC23A; --sea:#5DA8EF; --soft:#2A1F2A;
  --gold:#E2C27C; --gold-line:#B8954F;
  --ok:#5CC98A; --warn:#F2B04A; --bad:#FF7A6B; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12;text-wrap:balance;margin:0}
h2{font-size:clamp(1.7rem,4vw,2.4rem)}
p{margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Thin brand line under the header: framboise with a gold thread */
.stripe{height:4px;background:linear-gradient(to bottom,var(--accent) 0 3px,var(--gold-line) 3px 4px)}

/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;gap:12px;padding-block:10px}
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0;flex:none}
.logo img{display:block;height:36px;width:auto}
.nav{display:flex;gap:18px;margin-left:24px}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--ink)}
.spacer{flex:1}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--bg)}
.lang button{border:0;background:none;color:var(--muted);font-weight:700;font-size:.78rem;letter-spacing:.06em;padding:6px 10px;border-radius:999px}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font-weight:700;background:var(--accent);color:var(--accent-ink);text-decoration:none;transition:transform .15s,opacity .15s;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.small{padding:9px 16px;font-size:.9rem}
.btn.wa{background:#1FA855;color:#fff}
@media (max-width:760px){.nav{display:none}.bar>.btn{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:48px 56px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:700;color:var(--gold)}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);margin:12px 0 18px}
.hero h1 em{font-style:italic;color:var(--accent);text-decoration:underline;text-decoration-color:var(--gold-line);text-decoration-thickness:.045em;text-underline-offset:.16em}
.lead{font-size:1.12rem;color:var(--muted);max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 18px}
.trust{font-size:.88rem;color:var(--muted)}
.trust2{font-size:.82rem;color:var(--muted);margin-top:6px}
.demo-col{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tabs button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px 6px 6px;font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:6px}
.tabs button .sw{width:18px;height:18px;border-radius:50%;background:var(--g-hero)}
.tabs button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.scroll-hint{font-size:.82rem;color:var(--muted);text-align:center}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-block:32px 44px}}

/* phone frame */
.phone{width:min(300px,100%);aspect-ratio:9/18.5;max-width:100%;border-radius:40px;background:#141A3A;padding:10px;box-shadow:0 30px 60px -25px rgba(20,26,58,.45)}
.screen{height:100%;border-radius:31px;overflow:hidden;position:relative}

/* sections */
section.block{padding-block:56px}
.sec-head{max-width:640px;margin-bottom:28px}
.sec-head p{color:var(--muted);margin-top:10px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{border-top:3px solid var(--ink);padding-top:14px}
.step::before{counter-increment:s;content:counter(s);font-family:var(--display);font-size:2rem;color:var(--accent);display:block;line-height:1}
.step h3{font-size:1.2rem;margin:8px 0 6px}
.step p{color:var(--muted);font-size:.95rem}
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.offer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;position:relative}
.offer.main{border:2px solid var(--accent)}
.offer .art{height:96px;border-radius:10px;margin-bottom:4px;position:relative;overflow:hidden}
.art-gift{background:linear-gradient(160deg,#D9B25E,#A87A2C)}
.art-gift::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:44px;transform:translate(-50%,-50%);background:#fff;border-radius:6px}
.art-gift::before{content:"";position:absolute;left:50%;top:50%;width:64px;height:26px;transform:translate(-50%,-90%);background:#FBE7C2;clip-path:polygon(0 0,100% 0,50% 100%);z-index:1}
.art-cal{background:linear-gradient(160deg,#2C2550,#141A3A);display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:14px}
.art-cal i{background:rgba(255,255,255,.85);border-radius:4px}
.art-cal i:nth-child(5){background:#D9B25E}
.art-grp{background:linear-gradient(160deg,#B5174B,#7A0E33);display:flex;align-items:center;justify-content:center}
.art-grp i{width:40px;height:40px;border-radius:50%;border:3px solid #8E1240;margin-left:-12px;background:#FAD3DE}
.art-grp i:nth-child(2){background:#F3DFB4}.art-grp i:nth-child(3){background:#FFFFFF}.art-grp i:nth-child(4){background:#E8C9D2}
.badge{position:absolute;top:-12px;left:18px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;z-index:1}
.badge.soon{background:var(--ink);color:var(--bg)}
.offer h3{font-size:1.3rem}
.offer p{color:var(--muted);font-size:.95rem;flex:1}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.price b{font-size:1.6rem;font-weight:700}
.price span{color:var(--muted);font-size:.85rem}
@media (max-width:820px){.steps,.offers{grid-template-columns:1fr}}
.guar{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.guar div{padding-top:12px;border-top:1px solid var(--line)}
.guar b{display:block;margin-bottom:4px}
.guar p{color:var(--muted);font-size:.92rem}
@media (max-width:820px){.guar{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.guar{grid-template-columns:1fr}}
.paybox{background:var(--ink);color:var(--bg);border-radius:20px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.paybox h2{color:var(--bg)}
.paybox p{opacity:.8;margin-top:10px}
.methods{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:color-mix(in srgb,var(--bg) 12%,transparent);border:1px solid color-mix(in srgb,var(--bg) 25%,transparent);padding:10px 16px;border-radius:999px;font-weight:700;font-size:.92rem}
.chip small{font-weight:500;opacity:.75;margin-left:6px}
.chip.off{opacity:.55;font-weight:500}
@media (max-width:760px){.paybox{grid-template-columns:1fr;padding:24px}}
.help{display:grid;grid-template-columns:1fr 1fr;gap:28px}
details{border-bottom:1px solid var(--line);padding-block:14px}
summary{font-weight:600;cursor:pointer}
details p{color:var(--muted);margin-top:8px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px;align-self:start}
.num{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;user-select:all}
@media (max-width:760px){.help{grid-template-columns:1fr}}
.band{background:var(--accent);color:var(--accent-ink);border-radius:20px;padding:40px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.band h2{color:var(--accent-ink)}
.band .btn{background:var(--accent-ink);color:var(--accent)}
footer.foot{border-top:1px solid var(--line);padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:.9rem;margin-top:56px}
footer.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.foot .links{display:flex;gap:16px;flex-wrap:wrap}
footer.foot a{text-decoration:none}
footer.foot a:hover{text-decoration:underline}

/* editor */
.editor{display:grid;grid-template-columns:1fr 330px;gap:36px;padding-block:28px 60px}
.editor-form{display:flex;flex-direction:column;gap:18px;min-width:0}
.ed-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ed-head h1{font-size:clamp(1.6rem,4vw,2.2rem)}
.pill{display:inline-block;background:var(--soft);color:var(--ink);border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:600}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:14px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-h h2{font-family:var(--body);font-weight:700;font-size:1rem}
.switch{position:relative;width:44px;height:26px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s;pointer-events:none}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);transition:transform .2s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.card.off .body{display:none}
.card .body{display:flex;flex-direction:column;gap:12px}
.field label,.lbl{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px}
input[type=text],input[type=tel],input[type=date],input[type=datetime-local],input[type=password],input[type=url],textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px}
textarea{min-height:160px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media (max-width:520px){.row2,.row3{grid-template-columns:1fr}}
.upl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs div{width:56px;height:56px;border-radius:8px;background-size:cover;background-position:center;position:relative;background-color:var(--soft)}
.thumbs div.loading::after{content:"";position:absolute;inset:16px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.thumbs button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:.7rem;line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.hint{font-size:.85rem;color:var(--muted)}
.err{color:var(--bad);font-size:.85rem;font-weight:600}
.rec{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rec .dot{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.rec audio{max-width:100%;height:36px}
.preview-col{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:12px;align-items:center}
.preview-col .lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--muted);margin:0}
.ed-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px;align-items:center}
.note{font-size:.85rem;color:var(--muted);background:var(--soft);border-radius:10px;padding:10px 12px}
/* special gift editor (admin) */
.ed-body{display:flex;flex-direction:column;gap:18px}
.sp-list{display:flex;flex-direction:column;gap:10px}
.sp-item{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.sp-item-h{display:flex;align-items:center;gap:6px}
.sp-item-h b{font-size:.92rem}
.sp-row{display:flex;align-items:center;gap:8px}
.sp-row input{flex:1;min-width:0}
.sp-n{width:24px;flex:none;text-align:center;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sp-ic{width:34px;height:34px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;line-height:1;cursor:pointer}
.sp-ic:disabled{opacity:.35;cursor:default}
@media (max-width:860px){.editor{grid-template-columns:1fr}.preview-col{position:static;order:-1}.preview-col .phone{width:250px}}

/* full-screen gift */
.overlay{position:fixed;inset:0;z-index:50;overflow:hidden;background:var(--bg)}
.overlay>.stage{height:100%}
.close-x{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);z-index:5;border:0;border-radius:999px;padding:8px 14px;font-weight:700;background:rgba(0,0,0,.55);color:#fff}
.overlay .g-progress,.fullgift .g-progress{padding-top:calc(1em + env(safe-area-inset-top,0px))}
.overlay .g-progress{padding-right:calc(6.5em + env(safe-area-inset-right,0px))}
.overlay .g-slide,.fullgift .g-slide{padding-top:calc(3.6em + env(safe-area-inset-top,0px));padding-bottom:calc(6em + env(safe-area-inset-bottom,0px))}
.overlay .g-nav,.fullgift .g-nav{padding-bottom:calc(1.1em + env(safe-area-inset-bottom,0px));padding-left:max(1.1em,env(safe-area-inset-left,0px));padding-right:max(1.1em,env(safe-area-inset-right,0px))}

/* order page */
.narrow{max-width:560px;margin:0 auto;padding-block:32px 60px;display:flex;flex-direction:column;gap:18px}
.steps-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:o}
.steps-list li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}
.steps-list li::before{counter-increment:o;content:counter(o);width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:700}
.big{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;user-select:all;letter-spacing:.02em}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;background:var(--soft);padding:2px 8px;border-radius:6px;user-select:all}
.status{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:12px;background:var(--soft)}
.status .ic{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;color:var(--bg)}
.status.pending .ic{background:var(--warn)}
.status.paid .ic{background:var(--ok)}
.status.rejected .ic{background:var(--bad)}
.status h2{font-family:var(--body);font-weight:700;font-size:1.1rem;margin-bottom:4px}
.status p{color:var(--muted);font-size:.95rem}
.qr{background:#fff;padding:12px;border-radius:12px;align-self:center;line-height:0}
.linkbox{font-weight:700;background:var(--soft);border-radius:10px;padding:10px 14px;word-break:break-all;user-select:all}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.btn-row .btn{flex:1 1 180px}

/* center messages (gift unavailable, secret word, 404) */
.center{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px max(16px,env(safe-area-inset-left,0px))}
.center h1{font-size:clamp(1.8rem,6vw,2.6rem)}
.center p{color:var(--muted);max-width:30em}
.center form{display:flex;flex-direction:column;gap:10px;width:min(320px,100%)}
.mini-lang{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px);z-index:6}
.mini-lang.lang{background:rgba(255,255,255,.85)}
.mini-lang.lang button{color:#141A3A}
.mini-lang.lang button[aria-pressed="true"]{background:#141A3A;color:#fff}

/* legal pages */
.legal{max-width:720px;margin:0 auto;padding-block:36px 40px}
.legal h1{font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:8px}
.legal h2{font-family:var(--body);font-weight:700;font-size:1.15rem;margin:28px 0 8px}
.legal p,.legal li{color:var(--muted);line-height:1.7}
.legal p+p{margin-top:10px}
.legal .upd{font-size:.88rem}

/* admin */
.admin{padding-block:24px 60px}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tabs-a{display:flex;gap:6px;flex-wrap:wrap}
.tabs-a button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:600}
.tabs-a button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.orders{display:flex;flex-direction:column;gap:10px}
.order{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.order .meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.92rem;min-width:0}
.order .meta span{color:var(--muted)}
.order .meta b{color:var(--ink)}
.order .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tag{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700;color:var(--bg)}
.tag.pending{background:var(--warn)}.tag.paid{background:var(--ok)}.tag.rejected{background:var(--bad)}.tag.draft{background:var(--muted)}
@media (max-width:640px){.order{grid-template-columns:1fr}.order .acts{justify-content:flex-start}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:600;z-index:90;max-width:calc(100% - 32px);text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.narrow h1{font-size:clamp(1.8rem,5vw,2.4rem)}
.radio{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.radio input{width:20px;height:20px;accent-color:var(--accent);margin:0}

/* calendar editor */
.days{display:flex;flex-direction:column;gap:8px}
.day{border:1.5px solid var(--line);border-radius:12px;padding:0;background:var(--bg)}
.day summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.day summary::-webkit-details-marker{display:none}
.day summary span{color:var(--muted);font-size:.9rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day summary i{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);flex:none}
.day.done summary i{background:var(--ok);border-color:var(--ok)}
.day[open] summary{border-bottom:1px solid var(--line)}
.day-body{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px}
.day-body textarea{min-height:90px;background:var(--surface)}
.day-body input[type=url]{background:var(--surface)}
input.bad{border-color:var(--bad)}
#presets button{padding:7px 12px}
.price s{color:var(--muted);font-size:.95rem}
.offer p.promo-note{color:var(--accent);font-weight:700;font-size:.88rem;flex:none}
.replies h2{font-family:var(--body);font-weight:700;font-size:1.1rem}
.reply-item{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.reply-item p{white-space:pre-wrap;overflow-wrap:anywhere}
.reply-item audio{max-width:100%}

/* Group card: contributor page */
.ctb-hero{background:var(--g-hero);color:var(--g-hero-ink);border-radius:20px;padding:26px 22px;display:flex;flex-direction:column;gap:8px;text-align:center}
.ctb-hero h1{font-size:clamp(1.7rem,6vw,2.3rem);color:inherit}
.ctb-hero p{opacity:.92}
.ctb-k{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.ctb-count{display:flex;flex-direction:column;gap:2px;font-size:.95rem}
.ctb-names{font-size:.85rem;opacity:.85}
.ctb-photo{width:100%;border-radius:12px;max-height:340px;object-fit:cover}
.ctb-msg{white-space:pre-wrap;overflow-wrap:anywhere}
.ctb-mine audio,.grp-item audio{max-width:100%}
/* Group card: organizer's order page */
.grp{display:flex;flex-direction:column;gap:18px}
.grp-box h2,.grp-list h2,.grp-pay{font-family:var(--body);font-weight:700;font-size:1.1rem}
.grp-item{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.grp-item .who{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.grp-item p{white-space:pre-wrap;overflow-wrap:anywhere}
.grp-item img{width:120px;height:120px;object-fit:cover;border-radius:10px}
.grp-ask{align-items:center}
.grp-ask .btn{flex:0 0 auto}

/* Day / night switch (added to the header by common.js) */
.theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:grid;place-items:center;flex:none;padding:0}
.theme-btn svg{width:18px;height:18px}
.logo .logo-d{display:none}
:root[data-theme="dark"] .logo .logo-l{display:none}
:root[data-theme="dark"] .logo .logo-d{display:block}