:root{
  --blush:#fff5f8; --petal:#ffe3ed; --rose:#ffb3cd; --pink:#ff4f8b; --pink-deep:#e0245e;
  --ink:#2b1620; --ink-soft:#7a5a68; --line:#f5cfdd; --white:#fff;
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; min-height:100dvh; color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5;
  background:
    radial-gradient(900px 520px at 85% -10%, #ffd3e3 0%, transparent 60%),
    radial-gradient(700px 480px at -10% 105%, #ffe0ec 0%, transparent 60%),
    var(--blush);
  background-attachment:fixed;
}
[hidden]{display:none !important}
button{font:inherit; cursor:pointer}
a{color:var(--pink-deep)}
:focus-visible{outline:3px solid var(--pink); outline-offset:2px; border-radius:10px}

/* layout */
.shell{width:100%; max-width:460px; margin:0 auto; padding:calc(36px + var(--safe-top)) 20px calc(32px + var(--safe-bottom)); display:flex; flex-direction:column; min-height:100vh; min-height:100dvh}
.brand{text-align:center; margin-bottom:26px}
.wordmark{
  margin:0; font-family:var(--display); font-style:italic; font-weight:900; letter-spacing:-.02em; line-height:1;
  font-size:clamp(3.4rem, 17vw, 5.2rem);
  background:linear-gradient(100deg,#ff7fae 0%, var(--pink) 45%, var(--pink-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  padding:.04em .08em .1em;
}
.tagline{margin:10px 0 0; font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--ink-soft)}

.card{background:var(--white); border:1px solid var(--line); border-radius:28px; padding:28px 24px 26px; box-shadow:0 24px 60px -28px rgba(224,36,94,.35)}
.view.active{animation:swap .32s ease both}
@keyframes swap{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

h2{margin:0 0 10px; font-family:var(--display); font-style:italic; font-weight:800; font-size:1.6rem; line-height:1.2; letter-spacing:-.01em}
.lead{margin:0 0 22px; color:var(--ink-soft)}
.hint{margin:-10px 0 18px; font-size:.88rem; color:var(--ink-soft)}
.stack{display:flex; flex-direction:column; gap:12px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:0 22px; border-radius:999px; border:1.5px solid transparent; font-weight:700; font-size:1rem; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn-primary{color:#fff; background:linear-gradient(135deg,#ff6b9d,var(--pink-deep)); box-shadow:0 10px 24px -10px rgba(224,36,94,.7)}
.btn-primary:hover:not([disabled]){box-shadow:0 14px 28px -10px rgba(224,36,94,.8)}
.btn-ghost{background:var(--petal); color:var(--pink-deep)}
.btn-ghost:hover:not([disabled]){background:#ffd3e3}
.btn-google{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-google:hover:not([disabled]){background:var(--blush)}
.btn-sm{width:auto; min-height:40px; padding:0 18px; font-size:.92rem}
.or{display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--ink-soft); font-size:.85rem}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.back,.link{background:none; border:0; padding:0; color:var(--pink-deep); font-weight:700}
.back{margin:-4px 0 14px; font-size:.92rem}
.link:hover,.back:hover{text-decoration:underline}
.switch{margin:18px 0 0; text-align:center; color:var(--ink-soft); font-size:.95rem}
.forgot{margin:-4px 0 16px; text-align:right; font-size:.9rem}

/* form */
.field{display:block; margin-bottom:16px}
.field span{display:block; margin-bottom:6px; font-size:.86rem; font-weight:700}
.field input{width:100%; height:52px; padding:0 16px; border-radius:16px; border:1.5px solid var(--line); background:var(--blush); color:var(--ink); font:inherit; font-size:1rem; transition:border-color .2s, box-shadow .2s, background .2s}
.field input::placeholder{color:#c9a5b4}
.field input:focus{outline:none; border-color:var(--pink); background:#fff; box-shadow:0 0 0 4px rgba(255,79,139,.16)}
.field input.invalid{border-color:#d92b52; background:#fff6f8}

.msg{margin:0 0 16px; padding:12px 14px; border-radius:14px; font-size:.92rem; background:#ffe9ee; color:#a5153f; border:1px solid #ffc7d3}
.msg.ok{background:#eaf8ef; color:#1d6b3b; border-color:#bfe8cd}
.view[data-view="welcome"] .msg{margin:16px 0 0}

/* verify + soon */
.badge{width:64px; height:64px; margin:0 0 16px; display:grid; place-items:center; border-radius:20px; background:var(--petal); color:var(--pink-deep); font-size:1.9rem}
.foot{margin-top:auto; padding-top:28px; text-align:center; font-size:.85rem; color:var(--ink-soft)}
.foot p{margin:0}

/* PWA banner */
#pwa-banner{position:fixed; left:12px; right:12px; bottom:calc(12px + var(--safe-bottom)); z-index:40; max-width:520px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 50px -12px rgba(224,36,94,.45); animation:rise .4s ease both}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
#pwa-banner img{border-radius:12px; flex:none}
.pwa-text{flex:1; min-width:0; font-size:.9rem; line-height:1.35}
.pwa-text strong{display:block; font-size:.95rem}
.pwa-text p{margin:2px 0 0; color:var(--ink-soft); font-size:.84rem}
.pwa-actions{display:flex; align-items:center; gap:4px; flex:none}
.pwa-close{width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--ink-soft)}
.pwa-close:hover{background:var(--petal)}
.pwa-share{display:inline-block; vertical-align:-3px; width:16px; height:16px}

@media (min-width:600px){ .shell{padding-top:64px} .card{padding:34px 32px 30px} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ===== loader (launch + between pages) ===== */
#loader{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--blush); background-image:radial-gradient(600px 400px at 50% 40%, #ffe3ed, transparent 70%); transition:opacity .22s ease, visibility .22s}
#loader.gone{opacity:0; visibility:hidden; pointer-events:none}
.loader-bow{width:112px; height:auto; overflow:visible; filter:drop-shadow(0 12px 18px rgba(224,36,94,.28))}
.loader-bow .wing{transform-box:view-box; transform-origin:60px 50px; animation:flutter 1.1s ease-in-out infinite}
.loader-bow .wr{animation-delay:.02s}
.loader-bow .tails{transform-box:view-box; transform-origin:60px 54px; animation:sway 1.1s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:scale(1)}50%{transform:scale(1.08,.94)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.loader-word{font-family:var(--display); font-style:italic; font-weight:900; font-size:1.3rem; letter-spacing:-.01em; color:var(--pink-deep)}

/* ===== bow + brand ===== */
.bow{width:34px; height:28px; flex:none}
.bow-lg{width:88px; height:73px; display:block; margin:0 auto 6px; filter:drop-shadow(0 10px 14px rgba(224,36,94,.25))}
.wordmark-sm{font-size:1.7rem !important; padding:0 .06em .08em}
body[data-view="feed"] .brand, body[data-view="feed"] .card{display:none}
body[data-view="feed"] .shell{max-width:640px; padding-top:calc(18px + var(--safe-top))}
.has-banner .shell{padding-bottom:calc(150px + var(--safe-bottom))}
.fine{margin:14px 0 0; text-align:center; font-size:.8rem; color:var(--ink-soft)}
.field-hint{display:block; min-height:1.1em; margin-top:6px; font-size:.82rem; color:var(--ink-soft)}
.field-hint.ok{color:#1d6b3b}.field-hint.bad{color:#a5153f}
.foot a{color:var(--ink-soft)}
.foot p+p{margin-top:2px}

/* ===== feed ===== */
.feed-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.feed-logo{display:flex; align-items:center; gap:8px}
.feed-logo .bow{width:38px; height:32px}
.feed-actions{display:flex; gap:8px}
.chip-btn{min-height:36px; padding:0 14px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--pink-deep); font-weight:700; font-size:.86rem}
.chip-btn:hover{background:var(--petal)}
.lvl-high{--lvl:#2e9e5b; --lvl-bg:#e8f7ee}
.lvl-medium{--lvl:#e29a0c; --lvl-bg:#fff6e0}
.lvl-low{--lvl:#d92b52; --lvl-bg:#ffe9ee}

.reliab{background:#fff; border:1px solid var(--line); border-radius:22px; padding:16px 18px; margin-bottom:16px; box-shadow:0 16px 40px -26px rgba(224,36,94,.45)}
.reliab-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.reliab-top strong{font-size:.98rem}
.pill{display:inline-block; padding:2px 10px; border-radius:999px; background:var(--lvl-bg); color:var(--lvl); font-weight:700; font-size:.78rem; white-space:nowrap}
.meter{height:8px; border-radius:99px; background:#f6e3ea; overflow:hidden; margin:10px 0}
.meter i{display:block; height:100%; border-radius:99px; background:var(--lvl); transition:width .6s ease}
.reliab p{margin:0; font-size:.85rem; color:var(--ink-soft)}
.reliab .warn{margin-top:8px; color:var(--ink)}
.src-status{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none}
.src-status li{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px; background:var(--blush); border:1px solid var(--line); font-size:.78rem}
.src-status li::before{content:""; width:7px; height:7px; border-radius:50%; background:#2e9e5b}
.src-status li.off{color:var(--ink-soft)}
.src-status li.off::before{background:#c9b3bd}
.reliab details{margin-top:10px; font-size:.84rem; color:var(--ink-soft)}
.reliab summary{cursor:pointer; font-weight:700; color:var(--pink-deep)}
.reliab details ul{margin:8px 0 0; padding-left:18px}

.story{background:#fff; border:1px solid var(--line); border-radius:24px; padding:18px 18px 14px; margin-bottom:14px; box-shadow:0 16px 40px -28px rgba(224,36,94,.4)}
.story-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:.8rem; color:var(--ink-soft)}
.cat{padding:2px 10px; border-radius:99px; background:var(--petal); color:var(--pink-deep); font-weight:700}
.story h3{margin:0 0 6px; font-family:var(--display); font-style:italic; font-weight:800; font-size:1.25rem; line-height:1.25}
.story p.sum{margin:0 0 10px}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.tags span{font-size:.8rem; font-weight:700; color:var(--ink-soft)}
.conf{padding:10px 12px; border-radius:16px; background:var(--lvl-bg); margin-bottom:12px}
.conf-top{display:flex; justify-content:space-between; gap:8px; font-size:.82rem; font-weight:700; color:var(--lvl)}
.conf .meter{margin:6px 0; background:rgba(255,255,255,.7)}
.conf small{display:block; font-size:.78rem; color:var(--ink-soft)}
.src-line{font-size:.82rem; color:var(--ink-soft); margin-bottom:12px}
.src-line a{display:inline-block; margin:2px 4px 2px 0; padding:2px 10px; border-radius:99px; border:1px solid var(--line); text-decoration:none; font-weight:700; color:var(--pink-deep); background:#fff}
.src-line a:hover{background:var(--petal)}
.src-line a.official{border-color:#9ad8b3; background:#f0fbf4; color:#1d6b3b}
.react{display:flex; gap:10px; border-top:1px solid #fbe3ec; padding-top:12px}
.react button{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border-radius:99px; border:1.5px solid var(--line); background:#fff; font-weight:700; color:var(--ink); transition:transform .15s, background .2s, border-color .2s}
.react button .ico{font-size:1.15rem; filter:grayscale(.9) opacity(.8); transition:filter .2s, transform .2s}
.react button:active .ico{transform:scale(1.3)}
.react button[aria-pressed="true"]{background:var(--petal); border-color:var(--pink)}
.react button[aria-pressed="true"] .ico{filter:none}
.empty{text-align:center; padding:28px 12px; color:var(--ink-soft)}
.skeleton{height:190px; border-radius:24px; margin-bottom:14px; background:linear-gradient(100deg,#fff 30%,#ffeef4 50%,#fff 70%); background-size:200% 100%; border:1px solid var(--line); animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* privacy page */
.doc{background:#fff; border:1px solid var(--line); border-radius:28px; padding:28px 24px; box-shadow:0 24px 60px -28px rgba(224,36,94,.35)}
.doc h1{font-family:var(--display); font-style:italic; font-weight:800; font-size:2rem; margin:0 0 4px}
.doc h2{font-size:1.15rem; margin:26px 0 6px; font-family:var(--body); font-style:normal; font-weight:700}
.doc p,.doc li{color:#4a3340}
.doc ul{padding-left:20px}
.doc .meta{color:var(--ink-soft); font-size:.9rem; margin:0 0 16px}
.shell.wide{max-width:720px}

/* ===== v3: spots, announcement, comments, dialog ===== */
.spots{margin:16px 0 0; text-align:center; font-size:.88rem; font-weight:700; color:var(--pink-deep)}
.announce{padding:12px 16px; margin-bottom:14px; border-radius:18px; background:linear-gradient(135deg,#ffe3ed,#fff); border:1px solid var(--line); font-size:.92rem}
a.chip-btn{display:inline-flex; align-items:center; text-decoration:none}
.react{flex-wrap:wrap}
.react .cbtn{margin-left:auto}
.react .flag{background:transparent; border-color:transparent; color:var(--ink-soft); font-weight:500; font-size:.82rem; padding:0 8px}
.react .flag:hover{color:var(--pink-deep); background:transparent}
.comments{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line)}
.comment{padding:10px 0; border-bottom:1px solid #fbe3ec}
.comment:last-of-type{border-bottom:0}
.c-head{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink-soft)}
.c-head b{color:var(--ink)}
.c-head .sp{flex:1}
.c-head button{background:none; border:0; padding:0; color:var(--ink-soft); font-size:.78rem}
.c-head button:hover{color:var(--pink-deep); text-decoration:underline}
.comment p{margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere}
.c-form{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.c-form textarea, #report-dialog textarea{width:100%; padding:12px 14px; border-radius:16px; border:1.5px solid var(--line); background:var(--blush); font:inherit; resize:vertical; color:var(--ink)}
.c-form textarea:focus, #report-dialog textarea:focus{outline:none; border-color:var(--pink); background:#fff; box-shadow:0 0 0 4px rgba(255,79,139,.16)}
.c-form .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.c-form small{color:var(--ink-soft)}
.c-form .btn{width:auto; min-height:40px; font-size:.92rem}
.c-note{margin:8px 0 0; font-size:.85rem; color:var(--ink-soft)}
#report-dialog{border:0; border-radius:24px; padding:22px; width:min(92vw,420px); box-shadow:0 30px 80px -20px rgba(43,22,32,.45); color:var(--ink); font-family:var(--body)}
#report-dialog::backdrop{background:rgba(43,22,32,.4)}
#report-dialog h3{margin:0 0 4px; font-family:var(--display); font-style:italic; font-size:1.3rem}
.fine-left{margin:0 0 12px; color:var(--ink-soft); font-size:.86rem; overflow-wrap:anywhere}
.radio{display:flex; gap:10px; align-items:center; padding:6px 0; font-size:.95rem}
.radio input{accent-color:var(--pink); width:18px; height:18px}
#report-dialog textarea{margin:10px 0}
#report-dialog .row{display:flex; gap:10px}
#report-dialog .row .btn{min-height:46px}
#feed-more{margin:6px 0 10px}
.toast{position:fixed; left:50%; bottom:calc(24px + var(--safe-bottom)); transform:translateX(-50%); z-index:70; max-width:min(90vw,420px); padding:12px 18px; border-radius:999px; background:var(--ink); color:#fff; font-size:.92rem; box-shadow:0 14px 40px -10px rgba(43,22,32,.6); animation:rise .3s ease both}
.react{gap:8px}
.react button{padding:0 13px}
.react .cbtn{margin-left:0}
.react .flag{margin-left:auto}