:root{
  --bg:#fbf6f1; --card:#ffffff; --ink:#2a1f1b; --muted:#8a7b73; --line:#eadfd6;
  --accent:#e4572e; --accent2:#f2a65a; --star:#f5a524; --shadow:0 1px 2px rgba(60,30,10,.06),0 8px 24px rgba(60,30,10,.08);
}
@media (prefers-color-scheme: dark){
  :root{--bg:#161110; --card:#211a18; --ink:#f4ebe5; --muted:#a39088; --line:#33292580; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35)}
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,.logo{font-family:Fraunces,Georgia,serif;letter-spacing:-.02em}

/* nav */
.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.nav-in{max-width:1200px;margin:0 auto;padding:.8rem 1.25rem;display:flex;align-items:center;gap:1rem}
.logo{font-size:1.6rem;font-weight:700;text-decoration:none}
.logo em{font-style:normal;color:var(--accent)}
.search{flex:1;display:flex;align-items:center;gap:.5rem;max-width:420px;margin-left:auto;padding:.5rem .9rem;background:var(--card);border:1px solid var(--line);border-radius:6px;color:var(--muted)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.search input{flex:1;border:0;outline:0;background:none;font:inherit;color:var(--ink);min-width:0}

/* buttons */
.btn{display:inline-block;border:0;cursor:pointer;font:600 .95rem Inter,sans-serif;text-decoration:none;color:#fff;padding:.6rem 1.1rem;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 14px rgba(228,87,46,.3);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(228,87,46,.38)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:#b4232a;box-shadow:none}
.btn.sm{padding:.35rem .8rem;font-size:.85rem}
.btn.wide{width:100%;padding:.8rem}

main{max-width:1200px;margin:0 auto;padding:1.5rem 1.25rem 3rem}

/* hero */
.section{font-size:1.5rem;margin:1.5rem 0}
.hero{text-align:center;max-width:680px;margin:0 auto;padding:3rem 1rem 2.5rem}
.hero h1{font-size:clamp(2.2rem,6vw,3.6rem);margin:0 0 .65rem}
.hero p{margin:0 auto 1.5rem;max-width:520px}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.1rem}
.grid.big{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{position:relative;display:block;border-radius:10px;overflow:hidden;text-decoration:none;background:var(--card);box-shadow:var(--shadow);transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s}
.card:hover img{transform:scale(1.04)}
.card-meta{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:2.5rem .9rem .8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.name{font-weight:600}
.pill{display:inline-block;font-size:.8rem;font-weight:600;padding:.15rem .6rem;border-radius:6px;background:color-mix(in srgb,var(--star) 22%,transparent);color:#b36f00}
.card .pill{background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px)}
.pill.warn{background:#fde2e0;color:#a4262c}

/* profile */
.back{color:var(--muted);text-decoration:none;font-size:.9rem}
.back:hover{color:var(--accent)}
.profile-head{display:flex;align-items:baseline;gap:1rem;justify-content:space-between;margin:.5rem 0 1.5rem}
.profile-head h1{font-size:clamp(2rem,5vw,3rem);margin:0}
.profile-sub{display:flex;align-items:center;gap:.75rem}
.muted{color:var(--muted);font-size:.9rem}
.photo{margin:0;background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.photo img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.photo figcaption{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.score{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.row{display:flex;gap:.5rem}

/* star rating: DOM is 5..1 reversed visually, so hovering a star lights it and all lower ones */
.stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.stars button{background:none;border:0;padding:0 2px;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--muted);opacity:.55;transition:color .1s,transform .1s}
.stars button:hover,.stars button:hover~button{color:var(--star);opacity:1}
.stars button:hover{transform:scale(1.15)}
button.link{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
button.link:hover{color:#b4232a}

/* forms */
.panel{max-width:460px;margin:2rem auto;background:var(--card);padding:2rem;border-radius:10px;box-shadow:var(--shadow)}
.panel h1{margin:0 0 .25rem;font-size:2rem}
.stack{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.25rem}
.stack label{display:flex;flex-direction:column;gap:.35rem;font-weight:500;font-size:.95rem}
.stack input:not([type=checkbox]){font:inherit;padding:.7rem .9rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.stack input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.stack .check{flex-direction:row;align-items:flex-start;gap:.65rem;font-weight:400;font-size:.88rem;color:var(--muted)}
.stack .check input{margin-top:.25rem;accent-color:var(--accent)}
.note{padding:.7rem 1rem;border-radius:8px;margin-top:1rem;font-size:.92rem}
.note.ok{background:#dcf5e4;color:#14612f}
.note.err{background:#fde2e0;color:#a4262c}

.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.center{text-align:center;margin-top:2rem}
footer{text-align:center;color:var(--muted);font-size:.82rem;padding:2rem 1rem 3rem;border-top:1px solid var(--line)}
@media(max-width:560px){.nav-in{flex-wrap:wrap}.search{order:3;max-width:none;flex-basis:100%}.logo{margin-right:auto}}

/* search dropdown */
.search{position:relative}
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:.35rem;z-index:20}
.suggest[hidden]{display:none}
.suggest a{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .8rem;border-radius:6px;text-decoration:none;color:var(--ink)}
.suggest a:hover,.suggest a.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.suggest a:hover .muted,.suggest a.on .muted{color:#ffffffcc}
.s-empty{padding:.7rem .8rem;color:var(--muted);font-size:.92rem}
.s-empty a{display:inline;padding:0;color:var(--accent);text-decoration:underline}

/* photo tiles: whole photo visible, uncropped */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{position:relative;display:block;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#8a8480;cursor:zoom-in;transition:transform .15s}
.tile:hover{transform:scale(1.02)}
.tile img{width:100%;height:100%;object-fit:contain;display:block}
.badge{display:inline-block;font:600 .78rem Inter,sans-serif;color:#fff;background:rgba(0,0,0,.6);padding:.15rem .55rem;border-radius:4px}
.tile .badge{position:absolute;top:0;left:0;border-radius:0 0 8px 0}
.tile-score{position:absolute;right:8px;bottom:8px;font:600 .8rem Inter,sans-serif;color:#fff;background:rgba(0,0,0,.6);padding:.15rem .5rem;border-radius:6px}
.tile-img{display:block;width:100%;height:100%}
.tile-top{position:absolute;top:8px;right:8px;font:700 .68rem Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));padding:.15rem .5rem;border-radius:6px}
.tile-rate{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;flex-direction:row-reverse;justify-content:center;gap:2px;padding:1.6rem .5rem .4rem;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .15s;cursor:default;pointer-events:none}
.tile:hover .tile-rate,.tile:focus-within .tile-rate{opacity:1;pointer-events:auto}
.tile-rate button{background:none;border:0;padding:0 1px;font-size:1.25rem;line-height:1;cursor:pointer;color:#fff;opacity:.6;transition:color .1s,transform .1s,opacity .1s}
.tile-rate button:hover,.tile-rate button.on{color:var(--star);opacity:1}
.tile-rate button:hover{transform:scale(1.15)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,8,7,.94);display:flex;align-items:center;justify-content:center;padding:1rem 4rem 4.5rem}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lb-x,.lb-nav{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;border-radius:6px;width:44px;height:44px;font-size:1.8rem;line-height:1}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-x{top:14px;right:14px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-nav.prev{left:12px}.lb-nav.next{right:12px}
.lb-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:.8rem 1rem;color:#fff}
.lb-bar .muted,.lb-bar .link{color:#ffffffb0}
.lb-bar .stars button{font-size:1.9rem;color:#fff}
.lb-bar a.link{font-size:.8rem;text-decoration:underline}
.mlb{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(10,8,7,.94)}
.mlb[hidden]{display:none}
.mlb img{max-width:90%;max-height:90%;object-fit:contain;display:block}
.mlb-x{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;border-radius:6px;width:44px;height:44px;font-size:1.8rem;line-height:1}
.mlb-x:hover{background:rgba(255,255,255,.22)}
@media(max-width:560px){.lb{padding:1rem .5rem 6rem}.lb-nav{display:none}}

/* submit-form name picker reuses the dropdown */
.pick{position:relative}
.pick .suggest{top:calc(100% + 4px)}

/* lightbox zoom */
.lb img{cursor:zoom-in;touch-action:none;user-select:none;transition:transform .15s ease-out}
.lb img.drag{transition:none;cursor:grabbing}
.lb-hint{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-size:.8rem;color:#ffffff90;pointer-events:none}
.lb{overflow:hidden}
.lb-x,.lb-nav,.lb-bar,.lb-hint{z-index:2}
.lb-bar{background:linear-gradient(transparent,rgba(0,0,0,.75))}

/* home dashboard: Day / Week + Recent uploads */

/* mosaics: every tile is cropped to fill, so no grey letterbox bars */
/* feed cards: fixed square so every card is the same size */
/* Day / Week: up to 8 photos, 4 per row */
.section:empty{display:none}

/* bulk uploader */
.wide-panel{max-width:760px}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;padding:2.25rem 1rem;border:2px dashed var(--line);border-radius:10px;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s}
.drop strong{font-size:1.1rem}
.drop:hover,.drop:focus,.drop.over{outline:0;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.drop input{display:none}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.thumbs:empty{display:none}
.thumb{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#8a8480;outline:2px solid transparent}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .x{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;line-height:1}
.thumb .st{position:absolute;inset:auto 4px 4px auto;font-weight:700;color:#fff;border-radius:50%;min-width:22px;text-align:center}
.thumb.done{outline-color:#22a45d}.thumb.done .st{background:#22a45d}
.thumb.error{outline-color:#d33}.thumb.error .st{background:#d33}
.progress{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s}

/* accounts + comments */
.acct{display:flex;align-items:center;gap:.9rem;font-size:.9rem}
.acct a{text-decoration:none;color:var(--muted)}.acct a:hover{color:var(--accent)}
.acct form{margin:0}
.comments{max-width:720px;margin:2.5rem auto 0}
.comments h2{font-size:1.5rem;margin:0 0 1rem}
.cform{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;margin-bottom:1.25rem}
.cform textarea{width:100%;font:inherit;padding:.75rem .9rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);resize:vertical}
.cform textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.comment{background:var(--card);border-radius:8px;padding:.8rem 1rem;margin-bottom:.6rem;box-shadow:var(--shadow)}
.comment p{margin:.25rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.c-head{display:flex;gap:.6rem;align-items:baseline}
.c-head form{margin-left:auto}
@media(max-width:700px){.acct{order:4}}

/* ---- photo wall ---- */
.band{margin:0 0 2rem}
.band-h{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .7rem;font-family:Fraunces,Georgia,serif;font-size:1.5rem;letter-spacing:-.02em;font-weight:700}
.band-h a{font:600 1.05rem Inter,sans-serif;color:var(--accent);text-decoration:none}
.band-h a:hover{text-decoration:underline}
.jrow{--h:190px;display:flex;flex-wrap:wrap;gap:6px}
.jrow a{position:relative;display:block;height:var(--h);min-width:0;overflow:hidden;border-radius:5px;background:var(--line);flex:calc(var(--ar) * 100) 1 calc(var(--ar) * var(--h))}
.jrow img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.jrow a:hover img{transform:scale(1.04)}
.jrow::after{content:"";flex-grow:1000}   /* keeps a short last row from stretching */
.pager{display:flex;justify-content:center;gap:1rem;margin:0 0 2.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.35rem .85rem;border-radius:6px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-size:.9rem}
.chip:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:700px){.jrow{--h:120px;gap:4px}.jrow.big{--h:160px}.band-h{font-size:1.25rem}}

/* ---- home: Day/Week strip + recent uploads grouped by woman ---- */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.75rem}
.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:1.5rem}
.g-h{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;margin-bottom:.45rem}
.g-name{font-weight:600;font-size:1.05rem;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-name:hover{color:var(--accent)}
.g-h .muted{white-space:nowrap}
.tag{font:700 .72rem Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.g-more{display:inline-block;margin-top:.4rem;font-size:.85rem;color:var(--muted);text-decoration:none}
.g-more:hover{color:var(--accent)}
.twin .jrow,.groups .jrow{--h:150px;flex-wrap:nowrap}  /* one even row per block; photos shrink a touch to fit */
main>.band-h{margin-top:0}
@media(max-width:760px){.twin{grid-template-columns:1fr}.groups{grid-template-columns:1fr}.twin .jrow,.groups .jrow{--h:120px}}

/* per-photo comments */
.tile-cmt{position:absolute;left:8px;bottom:8px;font:600 .8rem Inter,sans-serif;color:#fff;background:rgba(0,0,0,.6);padding:.15rem .5rem;border-radius:6px}
.lb.with-panel{padding-right:360px}
.lb.with-panel .lb-bar{right:340px}
.lb.with-panel .lb-nav.next,.lb.with-panel .lb-x{right:352px}
.lb-panel{position:absolute;top:0;right:0;bottom:0;width:340px;z-index:3;display:flex;flex-direction:column;background:var(--card);color:var(--ink);border-left:1px solid var(--line)}
.lb-panel[hidden]{display:none}
.lbp-h{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.lb-pclose{background:none;border:0;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer}
.lbp-list{flex:1;overflow:auto;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.8rem}
.lbp-ch{display:flex;gap:.5rem;align-items:baseline;font-size:.85rem}
.lbp-ch .link{margin-left:auto}
.lbp-c p{margin:.15rem 0 0;font-size:.92rem;white-space:pre-wrap;overflow-wrap:anywhere}
.lbp-form{display:flex;gap:.5rem;align-items:flex-end;padding:.75rem 1rem;border-top:1px solid var(--line)}
.lbp-form[hidden]{display:none}
.lbp-form textarea{flex:1;resize:none;font:inherit;padding:.5rem .7rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.lbp-form textarea:focus{outline:0;border-color:var(--accent)}
.lbp-login{margin:0;padding:.75rem 1rem;border-top:1px solid var(--line)}
.lbp-login[hidden]{display:none}
.lbp-err{margin:0;padding:0 1rem;color:#d33;font-size:.85rem}
@media(max-width:700px){
  .lb.with-panel{padding:1rem .5rem calc(55vh + 1rem)}
  .lb.with-panel .lb-bar{right:0;bottom:55vh}
  .lb.with-panel .lb-x{right:14px}
  .lb-panel{top:auto;left:0;width:auto;height:55vh;border-left:0;border-top:1px solid var(--line)}
}
.lb.with-panel .lb-hint{display:none}

/* category tabs */
.cats{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.25rem}
.cat{padding:.3rem .85rem;border-radius:6px;border:1px solid var(--line);background:var(--card);text-decoration:none;font-size:.88rem}
.cat:hover{border-color:var(--accent)}
.cat.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
select{font:inherit;padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}

/* moderation */
.stats{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0 0 .5rem}
.stats span{color:var(--muted)}.stats b{color:var(--ink);font-size:1.3rem;margin-right:.2rem}
.approve-all{margin:.5rem 0 1rem}
.mbar{position:sticky;top:57px;z-index:6;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.6rem 0;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:1rem}
.spacer{flex:1}
.mgroup{margin:0 0 1.75rem}
.mg-h{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem}
.mg-h b{font-size:1.05rem}
.mg-h select{padding:.25rem .5rem;font-size:.85rem}
.cat-select.saved{border-color:#22a45d;box-shadow:0 0 0 3px #22a45d33}
.mtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
.mtile{position:relative;aspect-ratio:1;border-radius:5px;overflow:hidden;cursor:pointer;outline:3px solid transparent;outline-offset:-3px;background:var(--line)}
.mtile input{position:absolute;opacity:0;pointer-events:none}
.mtile img{width:100%;height:100%;object-fit:cover;display:block}
.mtile:has(input:checked){outline-color:var(--accent)}
.mtile:has(input:checked)::after{content:"✓";position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;text-align:center;line-height:22px}
.mtile .zoom{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;text-decoration:none;text-align:center;line-height:24px;opacity:0;transition:opacity .15s}
.mtile:hover .zoom{opacity:1}
.mtile .rep{position:absolute;left:6px;bottom:6px;background:#b4232a;color:#fff;font:600 .72rem Inter,sans-serif;padding:.1rem .45rem;border-radius:6px}
.mcomment{background:var(--card);border-radius:8px;padding:.6rem .9rem;margin-bottom:.5rem}
.mcomment p{margin:.2rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
.mcomment form{margin:0}

/* name box inside the autocomplete wrapper must fill the row */
.stack .pick input{width:100%}

/* nav links, top page, sort bar */
.nav-links{display:flex;gap:.9rem;font-weight:600;font-size:.95rem}
.nav-links a{text-decoration:none;color:var(--ink)}
.nav-links a:hover{color:var(--accent)}
@media(max-width:700px){.nav-in{flex-wrap:wrap}.nav-links{order:2}}
.hero.slim{padding:1.5rem 1rem 1.25rem}
.hero.slim h1{font-size:clamp(1.8rem,5vw,2.6rem)}
.cats .sep{width:1px;background:var(--line);margin:0 .3rem}
.sortbar{display:flex;gap:.4rem;margin:0 0 1rem}
.rank{position:absolute;top:10px;left:10px;font:700 .85rem Inter,sans-serif;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:.15rem .55rem;border-radius:6px}

/* favorites + NEW badge on tiles */
.tile-fav{position:absolute;right:8px;top:36px;z-index:1;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,transform .1s}
.tile:hover .tile-fav,.tile:focus-within .tile-fav,.tile-fav.on{opacity:1}
.tile-fav.on{color:#ff5c7a}
.tile-fav:hover{transform:scale(1.12)}
.tile-new{position:absolute;top:8px;left:44px;font:700 .65rem Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#22a45d;padding:.15rem .5rem;border-radius:6px}

/* rate mode */
.rm{max-width:760px;margin:0 auto;text-align:center}
.rm-stage{min-height:50vh;display:flex;align-items:center;justify-content:center;margin:.5rem 0}
.rm-stage img{max-width:100%;max-height:68vh;border-radius:8px;box-shadow:var(--shadow);object-fit:contain;background:#8a8480}
.rm-who{font-weight:600;display:flex;gap:.7rem;justify-content:center;align-items:center;min-height:2rem}
.rm-who a{text-decoration:none}
.rm-stars{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.5rem 0 1rem}
.rm-stars button{min-width:4.2rem;padding:.7rem 0;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:700 1.15rem Inter,sans-serif;cursor:pointer;transition:transform .1s,border-color .1s,background .1s}
.rm-stars button:hover{border-color:var(--star);background:color-mix(in srgb,var(--star) 18%,var(--card));transform:translateY(-2px)}
.rm-who .pill[hidden]{display:none}

/* admin: tabs, tables, photo browser */
.admin-nav{margin-bottom:1.25rem}
.tbl-wrap{overflow-x:auto;margin:0 0 1.5rem}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;padding:.4rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.45rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl select{padding:.2rem .4rem;font-size:.85rem}
.tbl .acts{white-space:nowrap}
.tbl .acts details{display:inline-block;margin-left:.6rem;vertical-align:top}
.tbl .acts summary{cursor:pointer;display:inline}
.tbl .acts details[open]{display:block;margin:.5rem 0 0}
form.inline{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.3rem 0}
.rep-pill{display:inline-block;background:#b4232a;color:#fff;font:600 .7rem Inter,sans-serif;padding:.05rem .45rem;border-radius:6px}
.link-a{font-size:.8rem;margin-left:.3rem}
.mtiles.big{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.mtiles.big .mtile{aspect-ratio:3/4}
.mtile .meta{position:absolute;left:0;right:0;bottom:0;padding:.35rem .45rem;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;font-size:.7rem;line-height:1.35}
a.mtile{display:block;color:inherit;text-decoration:none}

/* browse */
.browse-head{display:flex;align-items:baseline;gap:1rem;margin:.5rem 0 1rem}
.browse-head h1{font-size:clamp(1.8rem,4vw,2.4rem);margin:0}
.mason{column-count:4;column-gap:10px}
@media(max-width:900px){.mason{column-count:3}}
@media(max-width:600px){.mason{column-count:2;column-gap:8px}}
.mt{display:block;position:relative;break-inside:avoid;margin:0 0 10px;border-radius:8px;overflow:hidden;background:var(--line)}
.mt img{display:block;width:100%;height:100%;object-fit:cover}
.mt-n{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;gap:.5rem;padding:1.6rem .7rem .55rem;font-size:.85rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .15s}
.mt-n i{font-style:normal;font-weight:500}
.mt:hover .mt-n,.mt:focus-visible .mt-n{opacity:1}
@media(hover:none){.mt-n{opacity:1}}
.grid+.pager,.mason+.pager{margin-top:1.75rem}
.card .pill{white-space:nowrap;flex:none}

/* admin shell: left menu + content, no public chrome */
main.wide{max-width:1500px}
.adm{display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.5rem;align-items:start}
.adm-side{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.25rem;padding:.9rem .6rem;background:var(--card);border:1px solid var(--line);border-radius:8px;min-height:calc(100vh - 3rem)}
.adm-brand{font:700 1.25rem Fraunces,Georgia,serif;text-decoration:none;padding:.1rem .6rem .8rem}
.adm-brand em{font-style:normal;color:var(--accent)}.adm-brand span{font:500 .7rem Inter,sans-serif;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-left:.2rem}
.adm-side nav{display:flex;flex-direction:column;gap:2px}
.adm-side nav a{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:5px;text-decoration:none;color:var(--muted);font-size:.93rem}
.adm-side nav a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.adm-side nav a.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink);font-weight:600}
.adm-side nav a.sub{padding:.25rem .7rem .25rem 1.6rem;font-size:.85rem}
.adm-badge{margin-left:auto;background:var(--accent);color:#fff;border-radius:6px;padding:0 .5rem;font-size:.72rem;font-weight:600;line-height:1.5}
.adm-foot{margin-top:auto;display:flex;flex-direction:column;gap:.3rem;padding:.6rem .7rem 0;font-size:.85rem;border-top:1px solid var(--line)}
.adm-foot a{color:var(--muted);text-decoration:none}.adm-foot a:hover{color:var(--ink)}
.adm-main{min-width:0}
.adm-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem}
.adm-h h1{margin:0;font-size:1.7rem}
.acards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin:0 0 .6rem}
.acard{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit}
.acard span{font-size:.8rem;color:var(--muted)}.acard b{font-size:1.6rem;font-weight:600;line-height:1.2}
.acard.link b{font-size:1rem}
.acard.link:hover{border-color:var(--accent)}
.acard.warn{border-color:color-mix(in srgb,#b4232a 55%,var(--line));background:color-mix(in srgb,#b4232a 7%,var(--card))}
.adm-line{margin:0 0 1.25rem}
.adm-two{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:1.25rem;align-items:start}
.adm-col{min-width:0}
.adm-rail{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.6rem}
.adm-rail h2{font:600 .8rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 .1rem}
.adm .mbar{top:0;padding:.55rem .7rem;border:1px solid var(--line);border-radius:6px}
@media(max-width:1000px){.adm-two{grid-template-columns:1fr}.adm-rail{position:static;flex-direction:row;flex-wrap:wrap}.adm-rail h2{width:100%}.adm-rail .acard{flex:1 1 180px}}
@media(max-width:800px){
  .adm{grid-template-columns:1fr}
  .adm-side{position:static;min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.5rem}
  .adm-side nav{flex-direction:row;overflow-x:auto;flex:1 1 100%;order:3}
  .adm-side nav a.sub{display:none}.adm-side nav a{white-space:nowrap}
  .adm-foot{margin:0 0 0 auto;border:0;padding:0;flex-direction:row;gap:.8rem}
}

/* recovery key */
.keybox{font:600 1.55rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;text-align:center;padding:1rem .5rem;border:2px dashed var(--accent);border-radius:8px;background:var(--card);user-select:all;word-break:break-all}
.check{display:flex;align-items:center;gap:.5rem;font-size:.95rem;cursor:pointer}
.btn.disabled{opacity:.4;pointer-events:none}
@media print{body *{visibility:hidden}.keybox,.keybox *{visibility:visible}.keybox{position:absolute;left:0;top:0;width:100%}}

/* compact account settings */
.panel.tight{padding:1.25rem 1.4rem;gap:.8rem}
.panel.tight h1{font-size:1.6rem;margin:0}
.panel.tight .stack{gap:.55rem;margin-top:0}
.panel.tight details{border-top:1px solid var(--line);padding-top:.7rem}
.panel.tight summary{cursor:pointer;font-weight:600;font-size:.95rem}
.panel.tight details[open] summary{margin-bottom:.6rem}
.panel.tight .danger-text{color:#b4232a}

/* admin tiles: obvious click-to-select */
.mtile{user-select:none;-webkit-user-select:none}
.mtile::before{content:"";position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);opacity:0;transition:opacity .12s;z-index:1}
.mtile:hover::before{opacity:1}
.mtile:has(input:checked)::before{display:none}
.mtile:has(input:checked) img{opacity:.8}
@media(hover:none){.mtile .zoom{opacity:1}.mtile::before{opacity:1}}

/* boards, save menu, my ratings */
.tile-save{position:absolute;right:8px;top:70px;z-index:1;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,transform .1s}
.tile:hover .tile-save,.tile:focus-within .tile-save{opacity:1}
.tile-save:hover{transform:scale(1.12)}
@media(hover:none){.tile-save{opacity:1}}
.savemenu{position:fixed;z-index:1000;width:240px;max-height:min(70vh,380px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:.35rem;display:flex;flex-direction:column;gap:2px}
.sm-row{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;border:0;background:none;color:inherit;font:inherit;font-size:.92rem;padding:.45rem .55rem;border-radius:6px;cursor:pointer}
.sm-row:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.sm-ck{width:16px;height:16px;border:1.5px solid var(--muted);border-radius:4px;flex:none;display:inline-grid;place-items:center}
.sm-row.on .sm-ck{background:var(--accent);border-color:var(--accent)}
.sm-row.on .sm-ck::after{content:"✓";color:#fff;font-size:.75rem;font-weight:700;line-height:1}
.sm-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-new{display:flex;gap:.35rem;padding:.4rem .35rem .2rem;border-top:1px solid var(--line);margin-top:.2rem}
.sm-new input{flex:1;min-width:0;padding:.35rem .5rem;font-size:.88rem}
.sm-err{margin:0;padding:0 .55rem .3rem;color:#b4232a;font-size:.8rem}.sm-err:empty{display:none}
.card-empty{aspect-ratio:3/4;background:var(--line)}
.newboard{display:flex;gap:.5rem;margin:1.25rem 0 .5rem;max-width:420px}.newboard input{flex:1;min-width:0}
.board-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem 1.4rem;margin:0 0 1.25rem}
.board-tools summary{cursor:pointer;font-size:.9rem;color:var(--muted)}
.board-tools details[open] summary{color:var(--ink)}
.board-tools .stack{margin-top:.5rem;gap:.5rem}
.inline-form{display:flex;gap:.4rem;margin:.5rem 0;align-items:center}.inline-form input{min-width:0;padding:.35rem .5rem}
.danger-text{color:#b4232a}
.mt a{display:block;height:100%}
.mt-n{pointer-events:none}
.mt-rm{position:absolute;top:6px;right:6px;margin:0;opacity:0;transition:opacity .12s}
.mt:hover .mt-rm,.mt-rm:focus-within{opacity:1}
.mt-rm button{width:26px;height:26px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
@media(hover:none){.mt-rm{opacity:1}}

/* inputs in the board menu and board forms match the rest of the site */
.sm-new input,.newboard input,.inline-form input{font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:.5rem .7rem}
.sm-new input{padding:.4rem .6rem;font-size:.9rem}
.sm-new input::placeholder,.newboard input::placeholder{color:var(--muted)}
.sm-new input:focus,.newboard input:focus,.inline-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.sm-new .btn.sm{padding:.4rem .8rem}

/* following */
.grid.news{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:1.5rem}
.follow-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.follow-row{display:flex;align-items:center;gap:.8rem;padding:.55rem .9rem;border-top:1px solid var(--line)}
.follow-row:first-child{border-top:0}
.follow-row a{flex:1;text-decoration:none;font-weight:500}
.nav-links .adm-badge,.acct .adm-badge{margin-left:.35rem}