:root{
  --bg:#FFFFFF; --bg-2:#F4F7F8; --bg-3:#EBF1F2;
  --surface:#FFFFFF; --surface-2:#F7FAFB;
  --nav-bg:rgba(255,255,255,.88);
  --ink:#11252E; --ink-2:#516169; --ink-3:#86949C;
  --teal:#0E9488; --teal-d:#0A7167; --teal-l:#E3F4F2;
  --navy:#11303F;
  --green:#15A34A; --green-d:#0E7A38; --green-l:#E6F6EC;
  --amber:#B97910; --amber-l:#FAF0DA; --red:#C0392B; --red-d:#B4275C; --red-l:#FBE9E4;
  --line:#DCE4E7; --line-2:#C5D1D5;
  --r:14px; --r-sm:10px; --r-lg:20px; --pill:999px;
  --sh-sm:0 4px 14px -8px rgba(17,37,46,.22);
  --sh:0 16px 36px -20px rgba(17,37,46,.3);
  --mono:"Inter", system-ui, sans-serif;
  --maxw:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:600; line-height:1.1; margin:0; letter-spacing:-.02em}
p{margin:0}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal)}
.muted{color:var(--ink-2)}
.mono{font-family:var(--mono)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:11px 20px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap; color:#fff}
.btn-primary{background:var(--teal); box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--teal-d)}
.btn-outline{background:var(--bg); color:var(--ink); border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--teal); color:var(--teal-d)}
.btn-navy{background:var(--navy)}
.btn-navy:hover{background:#0B2532}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:16px; height:66px}
.logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:21px; letter-spacing:-.03em; cursor:pointer}
.logo .mk{width:32px; height:32px; display:grid; place-items:center; background:var(--teal); color:#fff; border-radius:9px}
.nav-links{display:flex; gap:2px; margin-left:8px}
.nav-links a{font-weight:500; font-size:15px; color:var(--ink-2); padding:8px 13px; border-radius:var(--r-sm); cursor:pointer; transition:.15s; white-space:nowrap}
.nav-links a:hover{color:var(--ink); background:var(--bg-2)}
.nav-links a.on{color:var(--teal-d); background:var(--teal-l)}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center}
.search{display:flex; gap:8px; align-items:center; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 14px; font-size:14px; color:var(--ink-3); font-weight:500}
.menu-btn{display:none; margin-left:auto; width:42px; height:42px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); font-size:18px; cursor:pointer}

/* page index */
.pageindex{position:sticky; top:66px; z-index:40; background:rgba(244,247,248,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:8px 0}
.pageindex .wrap{display:flex; gap:6px; align-items:center; overflow-x:auto}
.pageindex .lbl{font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; margin-right:4px}
.pi{font-size:13.5px; font-weight:500; padding:5px 12px; border-radius:var(--pill); background:var(--bg); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; cursor:pointer; transition:.15s}
.pi:hover{background:var(--teal); color:#fff; border-color:var(--teal)}

/* verified badge + status */
.vbadge{display:inline-block; vertical-align:middle; flex:none}
.status{display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:13px; padding:4px 10px; border-radius:var(--pill)}
.status svg{width:12px; height:12px}
.status.ok{background:var(--green-l); color:var(--green-d)}
.status.verify{background:var(--teal-l); color:var(--teal-d)}
.status.due{background:var(--amber-l); color:var(--amber)}

/* pages */
.page{display:none}
.page.active{display:block; animation:rise .4s ease}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
section{padding:68px 0; position:relative}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:28px; flex-wrap:wrap}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
.section-head p{color:var(--ink-2); margin-top:5px; font-size:15.5px}
.section-head .link{font-weight:600; color:var(--teal-d); font-size:15px}

/* card */
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); }

/* photo placeholders */
.ph{display:grid; place-items:center; overflow:hidden; background:var(--bg-3)}
.ph.teal{background:var(--teal-l)} .ph.green{background:var(--green-l)} .ph.cool{background:#EEF3F4}
.dogsvg{width:60px; height:60px; color:rgba(17,37,46,.3)}

/* hero */
.hero{padding:56px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4rem); letter-spacing:-.035em; line-height:1.04}
.hero .lede{font-size:18px; color:var(--ink-2); max-width:38ch; margin:20px 0 26px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-trust{margin-top:24px; display:flex; gap:20px; flex-wrap:wrap; align-items:center}
.hero-trust .it{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); font-weight:500}
/* record-style hero card */
.record-card{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh)}
.record-head{display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--bg-2); border-bottom:1px solid var(--line)}
.record-head .av{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--line); flex:0 0 auto}
.record-head .av .dogsvg{width:32px; height:32px}
.record-head .nm{font-weight:700; font-size:18px; display:flex; align-items:center; gap:7px}
.record-head .sb{font-size:14px; color:var(--ink-2)}
.record-head .lvl{margin-left:auto; font-family:var(--mono); font-size:13px; font-weight:600; background:var(--navy); color:#fff; padding:4px 10px; border-radius:var(--pill)}
.rec-row{display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--line); font-size:15px}
.rec-row:last-child{border-bottom:0}
.rec-row .k{color:var(--ink-2)}
.rec-row .v{font-weight:600; display:flex; align-items:center; gap:8px}
.rec-row .v .mono{font-weight:500}

/* chips */
.chip{display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:13.5px; padding:5px 12px; border-radius:var(--pill); background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2)}
.chip.t{background:var(--teal-l); border-color:transparent; color:var(--teal-d)}
.lvl{font-family:var(--mono); font-weight:600; font-size:12px; color:#fff; background:var(--navy); padding:3px 9px; border-radius:var(--pill)}

/* grids */
.grid{display:grid; gap:18px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:1.5fr 1fr}

/* dog card */
.dogcard{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:pointer; background:var(--bg); transition:transform .2s, box-shadow .25s, border-color .2s}
.dogcard:hover{transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--line-2)}
.dogcard .photo{height:160px; display:grid; place-items:center}
.dogcard .meta{padding:14px 16px}
.dogcard .row{display:flex; align-items:center; justify-content:space-between}
.dogcard .name{font-weight:700; font-size:17px; display:flex; align-items:center; gap:6px}
.dogcard .sub{font-size:13.5px; color:var(--ink-2)}

/* dual identity */
.idrow{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.iav{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:15.5px; color:#fff; flex:0 0 auto}
.iname{font-weight:700; font-size:16px; cursor:pointer; display:flex; align-items:center; gap:6px}
.iname:hover{color:var(--teal-d)}
.iown{font-size:14px; color:var(--ink-2)}
.iown .dog{color:var(--teal-d); font-weight:600; cursor:pointer}
.iown .dog:hover{text-decoration:underline}

/* feature */
.feature{display:grid; grid-template-columns:1fr 1.05fr; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg)}
.feature .fimg{min-height:340px; display:grid; place-items:center; border-right:1px solid var(--line)}
.feature .fimg .dogsvg{width:110px; height:110px}
.feature .fbody{padding:40px}
.feature h2{font-size:clamp(1.9rem,3.8vw,2.7rem); margin:12px 0}
.feature .stats{display:flex; gap:30px; margin:22px 0 26px}
.feature .stats b{font-weight:700; font-size:26px; display:block}
.feature .stats small{font-size:13px; color:var(--ink-2)}

/* feed */
.feed-wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start}
.post{border:1px solid var(--line); border-radius:var(--r); background:var(--bg); padding:20px 22px; margin-bottom:16px}
.post-img{height:240px; border-radius:var(--r-sm); display:grid; place-items:center; margin:4px 0 14px}
.post-actions{display:flex; gap:20px; font-weight:600; font-size:14px; color:var(--ink-2)}
.side-card{border:1px solid var(--line); border-radius:var(--r); background:var(--bg); padding:18px 20px; margin-bottom:16px}
.side-card h4{font-weight:600; font-size:15px; margin:0 0 12px; letter-spacing:.01em}
.online{display:flex; align-items:center; gap:10px; font-size:15px; padding:6px 0}
.dotlive{width:8px; height:8px; border-radius:50%; background:var(--green); flex:0 0 auto}
.rank{font-family:var(--mono); font-weight:600; color:var(--teal-d); width:18px}

/* activity */
.activity{border:1px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden}
.act-row{display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line)}
.act-row:last-child{border-bottom:0}
.act-ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; background:var(--bg-2); font-size:16px}
.act-row .t{font-size:15px}
.act-row .t b{font-weight:700}
.act-row .when{margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--ink-3); white-space:nowrap}

/* breeds */
.breed{border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; gap:14px; align-items:center; cursor:pointer; background:var(--bg); transition:transform .2s, box-shadow .25s, border-color .2s}
.breed:hover{transform:translateY(-3px); box-shadow:var(--sh); border-color:var(--line-2)}
.breed .ic{width:50px; height:50px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto}
.breed .ic .dogsvg{width:30px; height:30px}
.breed b{font-weight:700; font-size:16px}
.breed small{display:block; color:var(--ink-2); font-size:13px}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 26px}
.filter{font-weight:600; font-size:14px; padding:7px 15px; border-radius:var(--pill); background:var(--bg); border:1px solid var(--line); color:var(--ink-2); cursor:pointer; font-family:inherit}
.filter.on{background:var(--navy); color:#fff; border-color:var(--navy)}

/* counters */
.counters{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.counters .c{padding:28px 22px; text-align:center; border-right:1px solid var(--line)}
.counters .c:last-child{border-right:0}
.counters .n{font-weight:700; font-size:clamp(1.8rem,3.4vw,2.4rem); letter-spacing:-.03em}
.counters .l{font-size:14px; color:var(--ink-2); margin-top:5px}

/* cta */
.cta-band{border-radius:var(--r-lg); padding:50px 40px; text-align:center; background:var(--navy); color:#fff; position:relative; overflow:hidden}
.cta-band h2{font-size:clamp(1.9rem,3.8vw,2.8rem); max-width:20ch; margin:0 auto 12px}
.cta-band p{color:rgba(255,255,255,.72); margin-bottom:24px}

/* pro / trust strip */
.pros{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.pro{border:1px solid var(--line); border-radius:var(--r); padding:20px; text-align:center}
.pro .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin:0 auto 10px; background:var(--teal-l); color:var(--teal-d)}
.pro .ic svg{width:24px; height:24px}
.pro b{font-weight:700; display:block; font-size:15.5px}
.pro small{color:var(--ink-2); font-size:13.5px}

/* community */
.cover{height:200px; border-radius:var(--r-lg); display:grid; place-items:center; border:1px solid var(--line); overflow:hidden}
.cover .dogsvg{width:84px; height:84px; color:rgba(17,37,46,.22)}
.comm-bar{display:flex; align-items:flex-end; gap:20px; margin-top:-40px; padding:0 24px; position:relative; flex-wrap:wrap}
.comm-bar .cbadge{width:84px; height:84px; border-radius:18px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--line); box-shadow:var(--sh-sm); flex:0 0 auto}
.comm-bar .cbadge .dogsvg{width:48px; height:48px}
.comm-bar h1{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.comm-stats{display:flex; gap:24px; margin-left:auto; padding-bottom:6px}
.comm-stats b{font-weight:700; font-size:21px; display:block}
.comm-stats small{font-size:12.5px; color:var(--ink-2)}
.thread{border:1px solid var(--line); border-radius:var(--r); background:var(--bg); padding:18px; display:flex; gap:16px; margin-bottom:12px; cursor:pointer; transition:transform .2s, box-shadow .25s, border-color .2s}
.thread:hover{transform:translateY(-2px); box-shadow:var(--sh); border-color:var(--line-2)}
.vote{font-family:var(--mono); font-weight:600; text-align:center; flex:0 0 auto; width:46px; color:var(--teal-d)}
.vote small{display:block; font-size:12px; color:var(--ink-3); font-weight:500}
.thread .ttl{font-weight:700; font-size:17px; margin-bottom:3px}
.thread .meta{font-size:14px; color:var(--ink-2)}

/* thread + comments */
.comment{display:flex; gap:13px; padding:18px 0; border-bottom:1px solid var(--line)}
.comment .av{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto}
.comment .av .dogsvg{width:25px; height:25px}
.comment .cname{font-weight:700; display:inline-flex; align-items:center; gap:6px}
.comment .cmeta{font-size:13px; color:var(--ink-3)}
.replybox{display:flex; gap:12px; margin-top:18px; align-items:center}
.replybox input{flex:1; font-family:inherit; font-size:15.5px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-2); color:var(--ink)}

/* story (dog profile w/ health record) */
.story-cover{height:230px; border-radius:var(--r-lg); display:grid; place-items:center; border:1px solid var(--line); overflow:hidden}
.story-cover .dogsvg{width:96px; height:96px; color:rgba(17,37,46,.2)}
.story-bar{display:flex; align-items:flex-end; gap:20px; margin-top:-50px; padding:0 26px; position:relative; flex-wrap:wrap}
.story-bar .avatar{width:112px; height:112px; border-radius:24px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--line); box-shadow:var(--sh-sm); flex:0 0 auto}
.story-bar .avatar .dogsvg{width:60px; height:60px}
.story-bar h1{font-size:clamp(1.9rem,3.8vw,2.7rem); display:flex; align-items:center; gap:9px}
.story-actions{margin-left:auto; display:flex; gap:10px; padding-bottom:6px}
.story-line{font-size:17px; color:var(--ink-2); max-width:66ch; margin:22px 0 0}
.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 0}
.story-stats{display:flex; gap:12px; margin:24px 0; flex-wrap:wrap}
.story-stats .s{flex:1 1 120px; border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.story-stats b{font-weight:700; font-size:24px; display:block}
.story-stats small{font-size:13px; color:var(--ink-2)}
.subtle-head{font-weight:600; font-size:20px; margin:0 0 16px; letter-spacing:-.01em}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.gallery .g{height:130px; border-radius:var(--r-sm); display:grid; place-items:center}
.timeline{position:relative; padding-left:26px}
.timeline::before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--line-2)}
.tl{position:relative; padding:0 0 18px}
.tl::before{content:""; position:absolute; left:-25px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--teal); border:2px solid var(--bg)}
.tl b{font-weight:700}
.tl .when{font-family:var(--mono); font-size:13px; color:var(--ink-3)}
.friends{display:flex; gap:14px; flex-wrap:wrap}
.friend{text-align:center; width:84px}
.friend .av{height:84px; border-radius:18px; display:grid; place-items:center; margin-bottom:7px; border:1px solid var(--line)}
.friend .av .dogsvg{width:40px; height:40px}
.friend small{font-weight:600; font-size:13.5px}
.owner-card{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.owner-card .oa{width:50px; height:50px; border-radius:13px; display:grid; place-items:center; font-weight:700; color:#fff; background:var(--navy); flex:0 0 auto}
.spark{width:100%; height:46px}

/* profile (owner) */
.profile-cover{height:160px; border-radius:var(--r-lg); display:grid; place-items:center; border:1px solid var(--line); overflow:hidden}
.profile-bar{display:flex; align-items:flex-end; gap:20px; margin-top:-44px; padding:0 26px; position:relative; flex-wrap:wrap}
.profile-bar .pa{width:98px; height:98px; border-radius:22px; display:grid; place-items:center; font-weight:700; font-size:32px; color:#fff; background:var(--navy); box-shadow:var(--sh-sm); flex:0 0 auto}
.profile-bar h1{font-size:1.9rem; display:flex; align-items:center; gap:8px}
.profile-stats{display:flex; gap:24px; margin-left:auto; padding-bottom:6px}
.profile-stats b{font-weight:700; font-size:23px; display:block}
.profile-stats small{font-size:13px; color:var(--ink-2)}

/* map */
.map-grid{display:grid; grid-template-columns:1fr .82fr; gap:22px; align-items:start}
.mapbox{height:440px; border-radius:var(--r-lg); position:relative; overflow:hidden; background:#EAF1F2; border:1px solid var(--line)}
.mapbox::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(14,148,136,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(14,148,136,.07) 1px,transparent 1px); background-size:40px 40px}
.pin{position:absolute; width:32px; height:32px; border-radius:50% 50% 50% 3px; transform:rotate(45deg); display:grid; place-items:center; box-shadow:var(--sh-sm)}
.pin svg{transform:rotate(-45deg)}
.place{display:flex; gap:13px; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); padding:14px 16px; margin-bottom:12px}
.place .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; background:var(--bg-2); font-size:18px}
.place b{font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:6px}
.place small{display:block; color:var(--ink-2); font-size:13.5px}

/* passport (clinical record) */
.passport{max-width:660px; margin:0 auto; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh)}
.pp-top{padding:24px 28px; display:flex; align-items:center; gap:18px; background:var(--navy); color:#fff}
.pp-top .pphoto{width:80px; height:80px; border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.12); flex:0 0 auto}
.pp-top .pphoto .dogsvg{width:48px; height:48px; color:#fff}
.pp-top h2{font-size:26px; display:flex; align-items:center; gap:8px}
.pp-id{font-family:var(--mono); letter-spacing:.06em; font-size:13px; color:var(--teal)}
.pp-body{padding:26px 28px; display:grid; grid-template-columns:1fr 128px; gap:26px}
.ppr{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px}
.ppr:last-child{border-bottom:0}
.ppr .k{color:var(--ink-2)}
.ppr b{font-weight:600; display:flex; align-items:center; gap:7px}
.qr{width:128px; height:128px; border:1px solid var(--line); border-radius:12px; overflow:hidden}

/* dashboard + pack */
.dash-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:start}
.pack-hero{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg); padding:26px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.pack-members{display:flex; align-items:center}
.pack-members .pm{width:54px; height:54px; border-radius:15px; border:2px solid var(--bg); margin-left:-12px; display:grid; place-items:center; box-shadow:var(--sh-sm)}
.pack-members .pm:first-child{margin-left:0}
.pack-members .pm.human{background:var(--navy); color:#fff; font-weight:700; font-size:17px}

/* join */
.join-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; padding-top:34px}
.steps{display:flex; flex-direction:column; gap:18px; margin-top:24px}
.step{display:flex; gap:14px; align-items:flex-start}
.step .num{width:36px; height:36px; border-radius:10px; background:var(--teal-l); color:var(--teal-d); display:grid; place-items:center; font-weight:700; flex:0 0 auto}
.step b{font-weight:700}
.form-card{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg); box-shadow:var(--sh); padding:32px}
.form-card h3{font-weight:700; font-size:22px; margin-bottom:4px}
.field{margin-top:15px}
.field label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.field input,.field select{width:100%; font-family:inherit; font-size:15.5px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-2); color:var(--ink)}
.field input:focus,.field select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-l); background:var(--bg)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* footer */
footer{background:var(--bg-2); border-top:1px solid var(--line); padding:50px 0 34px; margin-top:30px}
footer .cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px}
footer h4{font-weight:600; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin:0 0 13px}
footer a{display:block; color:var(--ink-2); font-size:15px; padding:5px 0}
footer a:hover{color:var(--teal-d)}
footer .logo{margin-bottom:12px}
.fbar{border-top:1px solid var(--line); margin-top:30px; padding-top:18px; font-size:13.5px; color:var(--ink-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* home page */
.home-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg)}
.home-bar .home-bar-title{font-weight:700; font-size:19px}
.home-bar .home-bar-stats{font-family:var(--mono); font-size:14px; color:var(--ink-2); margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.home-bar .home-bar-actions{display:flex; gap:10px; align-items:center}
.boardlist{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg)}
.board{display:grid; grid-template-columns:46px 1fr auto; gap:16px; align-items:center; padding:16px 18px; border-top:1px solid var(--line); cursor:pointer; transition:background .15s}
.board:first-child{border-top:0}
.board:hover{background:var(--bg-2)}
.board .b-ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; background:var(--teal-l); color:var(--teal-d)}
.board .b-ic.alt{background:var(--bg-3); color:var(--ink-2)}
.board .b-ic svg{width:24px; height:24px}
.board .b-name{font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.board .b-desc{font-size:14px; color:var(--ink-2); margin-top:2px}
.board .b-last{font-size:13.5px; color:var(--ink-3); margin-top:8px; display:flex; align-items:center; gap:7px}
.board .b-last .la{width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; font-size:12px; font-weight:600; color:#fff; flex:0 0 auto}
.board .b-last .dog{color:var(--teal-d); font-weight:600}
.board .b-counts{text-align:right; font-family:var(--mono); font-size:13.5px; color:var(--ink-2); white-space:nowrap; line-height:1.55}
.btag{font-family:var(--mono); font-size:12px; padding:2px 8px; border-radius:var(--pill); font-weight:500}
.btag.core{background:var(--teal-l); color:var(--teal-d)}
.btag.extra{background:var(--bg-3); color:var(--ink-3)}
.toplist{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg)}
.toprow{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:14px 18px; border-top:1px solid var(--line); cursor:pointer; transition:background .15s}
.toprow:first-child{border-top:0}
.toprow:hover{background:var(--bg-2)}
.toprow .tv{text-align:center; min-width:38px}
.toprow .tv b{font-family:var(--mono); font-weight:600; font-size:16px; display:block}
.toprow .tv small{font-size:12px; color:var(--ink-3)}
.toprow .tt{font-weight:700; font-size:15.5px}
.toprow .tm{font-size:13.5px; color:var(--ink-2); margin-top:2px}
.toprow .tr{text-align:right; font-size:13.5px; color:var(--ink-3); white-space:nowrap; line-height:1.55}
.toprow .tr .mono{font-family:var(--mono)}
.home-side h4{font-weight:600; font-size:15px; margin:0 0 12px}
@media (max-width:680px){ .board{grid-template-columns:46px 1fr} .board .b-counts{display:none} }
:focus-visible{outline:2px solid var(--teal); outline-offset:3px}

@media (max-width:920px){
  .hero-grid,.feature,.story-bar,.profile-bar,.comm-bar,.join-grid,.map-grid,.dash-grid,.feed-wrap{grid-template-columns:1fr}
  .g4,.g3,.pros{grid-template-columns:repeat(2,1fr)} .g2{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:repeat(2,1fr)}
  .counters .c:nth-child(2){border-right:0}
  .feature .fimg{border-right:0; border-bottom:1px solid var(--line); min-height:220px}
  .nav-links,.search{display:none} .menu-btn{display:block}
  .nav-links.open{display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:2px; background:var(--bg); border-bottom:1px solid var(--line); padding:14px 24px; max-height:calc(100dvh - 66px); overflow-y:auto}
  .nav-cta .btn{display:none}
  .nav-links.open .nav-mob{display:flex;flex-direction:column;gap:2px}
  .profile-stats,.comm-stats,.story-actions{margin-left:0}
}
@media (max-width:560px){ section{padding:48px 0} .pp-body{grid-template-columns:1fr} .pp-body .qr{margin:0 auto} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important; scroll-behavior:auto} }

/* ---- scaffold additions (empty states, auth, forms) ---- */
.empty{border:1px dashed var(--line-2); border-radius:var(--r); padding:34px 24px; text-align:center; color:var(--ink-2); background:var(--bg)}
.empty .ei{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin:0 auto 12px; background:var(--bg-2); color:var(--ink-3)}
.empty .ei svg{width:26px; height:26px}
.empty b{display:block; font-weight:700; color:var(--ink); margin-bottom:4px; font-size:16px}
.empty p{font-size:15px; margin:0 auto 14px; max-width:42ch}
.auth-wrap{max-width:420px; margin:0 auto; padding:40px 0}
.auth-card{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg); box-shadow:var(--sh); padding:32px}
.auth-card h1{font-size:1.6rem; margin-bottom:4px}
.auth-foot{text-align:center; font-size:15px; color:var(--ink-2); margin-top:18px}
.flash{border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:var(--r-sm); padding:12px 16px; font-size:15px; margin-bottom:18px; background:var(--teal-l); color:var(--teal-d)}

/* ---- front-page blocks: news, dog of the week, contributors ---- */
.dow{display:grid; grid-template-columns:.95fr 1.05fr; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg)}
.dow .dow-img{min-height:280px; display:grid; place-items:center; border-right:1px solid var(--line); position:relative}
.dow .dow-img .dogsvg{width:110px; height:110px}
.dow .dow-body{padding:36px}
.dow h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin:12px 0 8px}
.dow .dow-meta{color:var(--ink-2); margin-bottom:16px}
.dow .dow-meta .dog{color:var(--teal-d); font-weight:600}
.newsgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.newscard{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg); cursor:pointer; transition:transform .2s, box-shadow .25s, border-color .2s; display:block}
.newscard:hover{transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--line-2)}
.newscard .nc-img{height:130px; display:grid; place-items:center; background:var(--bg-3)}
.newscard .nc-img .dogsvg{width:46px; height:46px}
.newscard .nc-body{padding:16px}
.newscard .nc-date{font-family:var(--mono); font-size:13px; color:var(--teal-d)}
.newscard .nc-title{font-weight:700; font-size:16px; margin:5px 0 4px; line-height:1.25}
.newscard .nc-ex{font-size:14px; color:var(--ink-2); line-height:1.45}
.crow{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:15px}
.crow .rk{font-family:var(--mono); font-weight:600; color:var(--teal-d); width:18px; text-align:center}
.crow .pts{margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--ink-3)}
@media (max-width:920px){ .dow{grid-template-columns:1fr} .dow .dow-img{border-right:0; border-bottom:1px solid var(--line); min-height:200px} .newsgrid{grid-template-columns:1fr} }

/* ====== v2: auth forms, profile, dashboard ====== */
.formwrap{max-width:520px;margin:0 auto;padding:36px 0}
.formcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--sh);padding:30px}
.formcard h1{font-size:1.5rem;margin:0 0 4px}
.formcard .sub{color:var(--ink-2);font-size:15px;margin:0 0 8px}
.prog{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.prog .st{flex:1;height:5px;border-radius:var(--pill);background:var(--bg-3)}
.prog .st.on{background:var(--teal)}
.prog .lbl{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.req-flag{color:var(--teal-d);font-weight:600;font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;float:right}
.opt-flag{color:var(--ink-3);font-weight:500;font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;float:right}
.fieldhint{font-size:13px;color:var(--ink-3);margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.errs{border:1px solid #f0c9c2;background:var(--amber-l);border-left:3px solid var(--red,#c0392b);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:16px}
.errs li{font-size:14px;color:#8a2c20;margin-left:2px;list-style:none}
.okmsg{border:1px solid #bfe6cd;background:var(--green-l);border-left:3px solid var(--green);border-radius:var(--r-sm);padding:11px 14px;margin-bottom:16px;font-size:14px;color:var(--green-d);font-weight:600}
/* selectable chips (roles, precision, sex, breed picks) */
.chipsel{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.chipsel label{cursor:pointer}
.chipsel input{position:absolute;opacity:0;pointer-events:none}
.chipsel .c{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13.5px;padding:7px 13px;border-radius:var(--pill);background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}
.chipsel input:checked + .c{background:var(--teal-l);border-color:transparent;color:var(--teal-d);font-weight:600}
.chipsel input:focus-visible + .c{outline:2px solid var(--teal);outline-offset:2px}
/* password meter */
.pwd-meter{height:5px;border-radius:var(--pill);margin-top:9px;display:flex;gap:3px}
.pwd-meter span{flex:1;border-radius:var(--pill);background:var(--bg-3)}
.pwd-meter span.on{background:var(--green)}
.req-list{margin-top:10px;display:grid;gap:5px}
.req-list .r{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3)}
.req-list .r .tk{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--bg-3);color:var(--ink-3);flex:0 0 auto}
.req-list .r.on{color:var(--ink-2)} .req-list .r.on .tk{background:var(--green-l);color:var(--green-d)}
.req-list .r .tk svg{width:9px;height:9px}
/* birthday lock */
.bdlock{margin-top:8px;border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--amber-l);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;color:#7a5410}
.bdlock b{color:#5e3f0c}
.allow{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);background:var(--bg-3);padding:4px 9px;border-radius:var(--pill);margin-top:8px}
/* dashboard tiles */
.dtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.dtile{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--bg);text-decoration:none;color:inherit;display:block;transition:.18s}
.dtile:hover{border-color:var(--line-2);box-shadow:var(--sh-sm)}
.dtile .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--teal-l);color:var(--teal-d);margin-bottom:10px}
.dtile .ic svg{width:22px;height:22px}
.dtile b{display:block;font-size:15.5px}
.dtile small{color:var(--ink-3);font-size:13.5px}
/* public profile */
.pcover{height:150px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(120deg,var(--teal) 0%,var(--navy) 100%);background-size:cover;background-position:center}
.phead{display:flex;align-items:flex-end;gap:18px;margin-top:-44px;padding:0 6px}
.pav{width:100px;height:100px;border-radius:22px;border:4px solid var(--bg);background:var(--teal-l) center/cover no-repeat;display:grid;place-items:center;color:var(--teal-d);font-weight:700;font-size:30px;flex:0 0 auto;box-shadow:var(--sh-sm)}
.pname{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.pmeta{color:var(--ink-2);font-size:14px;margin-top:2px}
.prole{font-family:var(--mono);font-size:12px;padding:4px 11px;border-radius:var(--pill);background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);display:inline-flex;align-items:center;gap:5px}
.prole.owner{background:var(--teal-l);border-color:transparent;color:var(--teal-d)}
.prole.vet{background:var(--green-l);border-color:transparent;color:var(--green-d)}
.prole.trainer{background:var(--amber-l);border-color:transparent;color:var(--amber)}
.prole.breeder{background:#ECE9FB;border-color:transparent;color:#6D5BD0}
.prole.rescue{background:var(--teal-l);border-color:transparent;color:var(--teal-d)}
.ppanel{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:16px;background:var(--bg)}
.ppanel h3{margin:0 0 12px;font-size:15px}

/* ====== v3: flash, threads, posts, votes, admin ====== */
.flashmsg{border:1px solid var(--line);border-left:3px solid var(--teal);background:var(--teal-l);color:var(--teal-d);border-radius:var(--r-sm);padding:11px 15px;font-size:14px}
.flashmsg.warn{border-left-color:var(--amber);background:var(--amber-l);color:var(--amber)}
.flashmsg a{color:inherit;text-decoration:underline;word-break:break-all}

/* thread detail */
.threadhead{display:flex;gap:16px;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:var(--bg);box-shadow:var(--sh-sm)}
.votebox{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;width:46px}
.votebtn{border:1px solid var(--line);background:var(--bg);width:38px;height:34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);padding:0}
.votebtn:hover{border-color:var(--line-2)}
.votebtn.on{background:var(--teal);border-color:transparent;color:#fff}
.votebtn.on.down{background:var(--amber)}
.votebtn svg{width:18px;height:18px}
.votescore{font-family:var(--mono);font-weight:700;font-size:15.5px}
.tbody{font-size:15.5px;line-height:1.65;color:var(--ink);white-space:pre-wrap;word-wrap:break-word}
.tbyline{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);margin-top:14px;flex-wrap:wrap}
.tbyline .iav{width:26px;height:26px;border-radius:7px;background:var(--teal);font-size:12px}
.post{display:flex;gap:14px;padding:18px 4px;border-bottom:1px solid var(--line)}
.post:last-child{border-bottom:0}
.post .pmeta{font-size:13.5px;color:var(--ink-3);margin-bottom:6px}
.post .pmeta b{color:var(--ink);font-weight:600}
.answer-badge{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--green-d);background:var(--green-l);padding:2px 7px;border-radius:var(--pill)}
.replybox{display:block;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:18px;background:var(--bg-2)}
.replybox textarea,.formcard textarea,.field textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 13px;font:inherit;resize:vertical;min-height:90px;background:var(--bg)}
.lockbar{border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--amber-l);color:#7a5410;border-radius:var(--r-sm);padding:11px 14px;font-size:14px}
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid #ecd9a8;border-left:3px solid var(--amber);background:var(--amber-l);border-radius:var(--r);padding:13px 16px;margin-bottom:20px}
.banner .bt{font-size:14px;color:#5e3f0c}
.likebtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--bg);border-radius:var(--pill);padding:8px 16px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink)}
.likebtn.on{background:var(--red-l);border-color:var(--red);color:var(--red-d)}
.likebtn svg{width:16px;height:16px}
/* admin */
.adminnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.adminnav a{font-family:var(--mono);font-size:13.5px;padding:7px 13px;border-radius:var(--pill);background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);text-decoration:none}
.adminnav a:hover{border-color:var(--line-2)}
.qcard{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;background:var(--bg)}
.qcard .qh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qcard .qrole{font-family:var(--mono);font-size:12px;padding:3px 9px;border-radius:var(--pill);background:var(--teal-l);color:var(--teal-d)}
.qactions{display:flex;gap:8px;margin-top:12px}
.btn-approve{background:var(--green);color:#fff;border:0;border-radius:var(--r-sm);padding:8px 16px;font-weight:600;cursor:pointer;font-size:14px}
.btn-reject{background:var(--bg);color:var(--red-d);border:1px solid var(--red);border-radius:var(--r-sm);padding:8px 16px;font-weight:600;cursor:pointer;font-size:14px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px}
.statbox{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--bg)}
.statbox .n{font-family:var(--mono);font-weight:700;font-size:1.6rem;color:var(--teal-d)}
.statbox .l{font-size:13.5px;color:var(--ink-3)}
.pickrow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:8px;background:var(--bg)}

/* ====== v4: site banner, admin shell, notifications ====== */
.sitebanner{background:var(--navy);color:#fff;font-size:14px}
.sitebanner .wrap{padding:9px 0}
.sitebanner.warning{background:var(--amber)}
/* admin shell */
.admin-grid{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start;padding:26px 0}
.admin-side{position:sticky;top:84px}
.admin-side .role{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-d);background:var(--teal-l);padding:5px 11px;border-radius:var(--pill);display:inline-block;font-weight:700;margin:2px 0 14px 4px}
.admin-side .grp{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;margin:15px 0 6px;padding-left:12px}
.admin-side a{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:16px;font-weight:600}
.admin-side a .lbl{flex:1}
.admin-side a .iw{width:30px;height:30px;border-radius:8px;background:var(--teal-l);color:var(--teal-d);display:flex;align-items:center;justify-content:center;flex:none}
.admin-side a .i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.admin-side a:hover{background:var(--bg-2)}
.admin-side a.on{background:var(--teal);color:#fff}
.admin-side a.on .iw{background:rgba(255,255,255,.22);color:#fff}
.admin-side a .pill{font-family:var(--mono);font-size:11px;font-weight:700;background:var(--amber);color:#fff;border-radius:var(--pill);padding:1px 8px}
.admin-side a.on .pill{background:rgba(255,255,255,.25)}
.admin-side .backlink{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-top:10px;border-top:1px solid var(--line);color:var(--ink-3);text-decoration:none;font-size:14.5px;font-weight:600}
.admin-side .backlink .i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.admin-side .backlink:hover{color:var(--ink-2)}
.admin-main h1{font-size:1.7rem;margin:0 0 4px}
.admin-main .sub{color:var(--ink-3);font-size:14px;margin:0 0 20px}
.attn{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:22px}
.attncard{display:block;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r);padding:15px 17px;background:var(--bg);text-decoration:none;color:inherit}
.attncard.warn{border-left-color:var(--amber);background:var(--amber-l)}
.attncard .n{font-family:var(--mono);font-weight:700;font-size:1.5rem}
.attncard .l{font-size:13.5px;color:var(--ink-2)}
.auditrow{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.auditrow:last-child{border-bottom:0}
.auditrow .who{font-weight:600}
.auditrow .act{font-family:var(--mono);font-size:12.5px;color:var(--teal-d);background:var(--teal-l);padding:2px 7px;border-radius:var(--pill)}
.auditrow .when{margin-left:auto;color:var(--ink-3);font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.modreason{margin-top:10px}
.modreason input{width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 11px;font:inherit}
/* notifications */
.notif{display:flex;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line)}
.notif:last-child{border-bottom:0}
.notif.unread{background:var(--teal-l)}
.notif .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:6px;flex:0 0 auto}
.notif.read .dot{background:var(--line-2)}
.notif .nt{font-weight:600;font-size:15px}
.notif .nb{font-size:14px;color:var(--ink-2)}
.notif .nw{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:3px}
@media(max-width:720px){.admin-grid{grid-template-columns:1fr}.admin-burger{display:inline-flex}.admin-side{position:fixed;top:0;left:0;height:100dvh;width:min(84vw,290px);transform:translateX(-100%);transition:transform .26s ease;z-index:1200;background:var(--surface);border-right:1px solid var(--line);padding:18px 16px;overflow-y:auto;box-shadow:0 22px 60px -20px rgba(0,0,0,.6)}body.admin-nav-open .admin-side{transform:translateX(0)}.admin-backdrop{display:block;position:fixed;inset:0;background:rgba(4,8,11,.55);z-index:1100;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}body.admin-nav-open .admin-backdrop{opacity:1;visibility:visible}body.admin-nav-open{overflow:hidden}}

/* ---- member management (admin) ---- */
.memtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 22px}
.memtools input[type=text]{flex:1;min-width:220px;font:inherit;font-size:15px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink)}
.memtools select{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);cursor:pointer}

.utable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.utable{width:100%;border-collapse:collapse;font-size:15px;background:var(--bg)}
.utable th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-family:var(--mono);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.utable td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.utable tbody tr:last-child td{border-bottom:0}
.utable tbody tr{cursor:pointer;transition:.12s}
.utable tbody tr:hover{background:var(--bg-2)}
.utable .num{text-align:right;font-family:var(--mono);font-size:14px}
.umember{display:flex;align-items:center;gap:10px;color:inherit}
.uav{width:34px;height:34px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);font-weight:700;font-size:14px;display:grid;place-items:center;flex:0 0 auto}
.uinfo{display:flex;flex-direction:column;line-height:1.25}
.un{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:4px}
.uu{font-size:13px;color:var(--ink-3);font-family:var(--mono)}
.umail{color:var(--ink-2);font-size:14px}
.uwhen{color:var(--ink-3);font-size:13.5px;white-space:nowrap}
.vtick{color:var(--teal)}
.ubadge{display:inline-block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:#fff;background:var(--navy);padding:2px 7px;border-radius:var(--pill);vertical-align:middle}
.ubadge.soft{background:var(--bg-3);color:var(--ink-2)}

.status.sus{background:var(--amber-l);color:var(--amber)}
.status.ban{background:#FBE6E6;color:#B42318}
.status.del{background:var(--bg-3);color:var(--ink-3)}
.status.mut{background:var(--bg-3);color:var(--ink-3)}

.pager{display:flex;align-items:center;gap:14px;margin-top:18px}
.pager .pageno{color:var(--ink-3);font-size:14px;font-family:var(--mono)}

.mhead{display:flex;gap:16px;align-items:flex-start;margin:14px 0 8px}
.mav{width:56px;height:56px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);font-weight:700;font-size:20px;display:grid;place-items:center;flex:0 0 auto}
.mh-main h1{font-size:1.5rem;margin:0 0 3px}
.mh-sub{color:var(--ink-2);font-size:14px;margin-bottom:8px}
.mh-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.mstate{font-size:14px;padding:8px 12px;border-radius:var(--r-sm);margin:4px 0 8px}
.mstate.sus{background:var(--amber-l);color:var(--amber)}
.mstate.ban{background:#FBE6E6;color:#B42318}
.mstate.del{background:var(--bg-3);color:var(--ink-2)}
.mnote-inline{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;font-size:14px;color:var(--ink-2);margin:10px 0}

.mpanels{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.mspan{grid-column:1 / -1}
.mpanel{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.mpanel h3{margin:0 0 12px;font-size:1rem}
.mpanel label.ml,.brow-edit label.ml{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.mpanel textarea,.mpanel input[type=text],.brow-edit input[type=text]{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);resize:vertical}
.mpanel select,.brow-edit select{font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);cursor:pointer}
.mrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.mcheck{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);margin:12px 0}
.mcheck input{margin-top:2px}
.danger{background:#B42318;color:#fff}
.danger:hover{background:#921B12}
.danger-panel{border-color:#F0C9C4}
.mnotes{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.mnote{padding:10px 0;border-bottom:1px solid var(--line)}
.mnote:last-child{border-bottom:0}
.mnb{font-size:14px;color:var(--ink)}
.mnm{font-size:12px;color:var(--ink-3);font-family:var(--mono);margin-top:4px}

@media(max-width:720px){.mpanels{grid-template-columns:1fr}.mhead{flex-direction:column}}

/* ---- reporting + moderation (installment 3) ---- */
.reportbox{margin-top:10px}
.reportbox>summary{cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--ink-3);padding:4px 10px;border:1px solid var(--line);border-radius:var(--pill);width:max-content;display:block}
.reportbox>summary .rsum{display:inline-flex;align-items:center;gap:5px}
.reportbox>summary::-webkit-details-marker{display:none}
.reportbox>summary:hover{color:var(--ink-2);border-color:var(--line-2)}
.reportbox>summary svg{opacity:.55}
.reportbox[open]>summary{color:var(--ink-2)}
.reportbox form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
.reportbox select,.reportbox input[type=text]{font:inherit;font-size:14px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink)}
.reportbox input[type=text]{flex:1;min-width:160px}
.reportbox .btn{padding:8px 14px;font-size:14px}

.modbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--navy);border-radius:var(--r);padding:12px 14px;margin-top:16px}
.modbar-h{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9FC6CC}
.modgrp{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0}
.modgrp .btn{padding:7px 13px;font-size:14px}
.modreason-in{font:inherit;font-size:14px;padding:7px 11px;border:1px solid transparent;border-radius:var(--r-sm);background:rgba(255,255,255,.12);color:#fff;min-width:170px}
.modreason-in::placeholder{color:#9FC6CC}
.modgrp select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid transparent;border-radius:var(--r-sm);background:rgba(255,255,255,.12);color:#fff}
.modgrp select option{color:var(--ink)}

.repreason{display:inline-block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--amber);background:var(--amber-l);padding:2px 8px;border-radius:var(--pill);margin-left:6px}

/* ---- boards admin + post policy (installment 4) ---- */
.policytag{display:inline-block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;color:var(--teal-d);background:var(--teal-l);padding:2px 8px;border-radius:var(--pill);vertical-align:middle}
.badm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.badm{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.badm.off{background:var(--bg-2);opacity:.9}
.badm-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.badm-ic{width:38px;height:38px;border-radius:10px;background:var(--teal-l);color:var(--teal-d);display:grid;place-items:center;flex:0 0 auto}
.badm-ic svg{width:20px;height:20px}
.badm-reorder{display:flex;gap:6px}
.badm-reorder .btn{padding:6px 11px;font-size:15px;line-height:1}
.badm-reorder .btn[disabled]{opacity:.4;cursor:not-allowed}
.badm label.ml{display:block;font-weight:600;font-size:13.5px;color:var(--ink-2)}
.badm label.ml input[type=text],.badm label.ml select{display:block;width:100%;font:inherit;font-size:15px;padding:9px 11px;margin-top:5px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink)}
@media(max-width:720px){.badm-grid{grid-template-columns:1fr}}

/* ---- editorial (installment 5) ---- */
.linkbtn{background:none;border:0;padding:0;margin:0;font:inherit;font-size:14px;cursor:pointer;color:var(--teal-d);font-weight:600}
.linkbtn:hover{text-decoration:underline}
.danger-link{color:#B42318}
.visrow{display:flex;align-items:center;gap:8px;font-weight:500;font-size:15px;margin:6px 0;color:var(--ink-2)}
.visrow input[type=datetime-local]{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink)}
.pagebody{font-size:16px;line-height:1.7;color:var(--ink-2)}

/* ---- analytics charts (installment 7) ---- */
.chartbars{display:flex;align-items:flex-end;gap:6px;height:150px;padding:10px 0 0;border-bottom:1px solid var(--line)}
.cbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.cbar-fill{width:72%;max-width:26px;background:var(--teal);border-radius:5px 5px 0 0;min-height:3px}
.cbar-fill.amber{background:var(--amber)}
.cbar-n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* ============ Profile photo editor (settings + dog edit) ============ */
.flabel{display:block;font-weight:600;font-size:14px;color:var(--ink);margin:0 0 8px}
.photoedit{position:relative;margin-bottom:6px}
.photoedit .cover{height:132px;border-radius:14px;background:var(--bg-3) center/cover no-repeat;border:1px solid var(--line);position:relative}
.photoedit .avwrap{display:flex;align-items:flex-end;gap:12px;margin-top:-32px;padding-left:16px;position:relative}
.photoedit .avatar{width:84px;height:84px;border-radius:50%;background:var(--teal) center/cover no-repeat;border:4px solid #fff;display:grid;place-items:center;color:#fff;font-weight:700;font-size:24px;box-shadow:var(--sh-sm);flex:none}
.photoedit .avatar span{display:grid;place-items:center}
.ph-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer;box-shadow:var(--sh-sm);transition:.15s}
.ph-btn:hover{border-color:var(--teal);color:var(--teal-d)}
.ph-btn svg{fill:currentColor}
.ph-cover{position:absolute;top:10px;right:10px}

/* ============ Premium dashboard ============ */
.dash{display:flex;flex-direction:column;gap:18px}
.dhero{background:var(--teal);border-radius:20px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;flex-wrap:wrap}
.dhero .id{display:flex;align-items:center;gap:14px}
.dhero .av{width:56px;height:56px;border-radius:50%;background:var(--surface) center/cover no-repeat;color:var(--teal-d);display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.dhero h1{font-size:20px;margin:0;color:#fff;line-height:1.2}
.dhero .sub{font-size:14px;color:#cdeae5;margin-top:3px}
.dprogress{display:flex;flex-direction:column;align-items:center}
.dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.dstat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.dstat .top{display:flex;align-items:center;justify-content:space-between}
.dstat .lbl{font-size:13px;color:var(--ink-3)}
.dstat .num{font-size:26px;font-weight:700;margin-top:6px;color:var(--ink);line-height:1}
.dstat .meta{font-size:13px;color:var(--ink-3);margin-top:4px}
.dgrid2{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
@media(max-width:760px){.dgrid2{grid-template-columns:1fr}}
.dpanel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.dpanel h3{margin:0 0 12px;font-size:15px}
.feed{display:flex;flex-direction:column;gap:12px}
.feed .it{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45}
.feed .fic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--teal-l);color:var(--teal-d);flex:none}
.feed .fic svg{width:18px;height:18px}
.feed .tm{color:var(--ink-3);font-size:13px;margin-top:2px}
.dverify{background:var(--navy);border-radius:16px;padding:16px 18px;color:#fff}
.dverify h3{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:8px}
.dverify .vp{font-size:13.5px;color:#bcd3d0;margin:0 0 12px;line-height:1.55}
.dogcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.dogcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:.18s;display:block}
.dogcard:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.dogcard .cv{height:74px;background:var(--navy) center/cover no-repeat;position:relative}
.dogcard .cav{position:absolute;left:14px;bottom:-18px;width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:var(--teal) center/cover no-repeat;display:grid;place-items:center;color:#fff}
.dogcard .bd{padding:24px 14px 14px}
.dogcard .bd b{display:block;font-size:15.5px}
.dogcard .bd small{color:var(--ink-3);font-size:13.5px}
.dogadd{border:1.5px dashed var(--line-2);border-radius:16px;display:grid;place-items:center;text-align:center;color:var(--ink-2);text-decoration:none;min-height:150px;transition:.15s}
.dogadd:hover{border-color:var(--teal);color:var(--teal-d)}
.qrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.qaction{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:inherit;font-weight:600;font-size:14px;transition:.15s}
.qaction:hover{border-color:var(--line-2);box-shadow:var(--sh-sm)}
.qaction .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--teal-l);color:var(--teal-d);flex:none}
.qaction .ic svg{width:18px;height:18px}

/* ============ Nav notification bell + badge ============ */
.navbell{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--ink-2);text-decoration:none}
.navbell:hover{background:var(--bg-2);color:var(--teal-d)}
.navbell svg{fill:currentColor}
.nbadge{background:#E24B4A;color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:1px 6px;line-height:1.5;min-width:17px;text-align:center}
.navbell .nbadge{position:absolute;top:3px;right:3px}

/* ============ Danger zone (remove dog) ============ */
.dangerzone{margin-top:22px;border:1px solid #F0C9C9;background:#FDF4F4;border-radius:14px;padding:16px 18px}
.dangerzone h3{margin:0 0 6px;font-size:15px;color:#A12B2B}
.dangerzone p{margin:0 0 12px;font-size:14px;color:var(--ink-2);line-height:1.55}
.btn-danger{background:var(--surface);border:1px solid #D98A8A;color:#A12B2B;font-weight:600}
.btn-danger:hover{background:#A12B2B;border-color:#A12B2B;color:#fff}

/* ===== markdown editor (discussion board) ===== */
.mdeditor{border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--bg)}
.mdeditor:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)}
.mdtb{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:6px 8px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.mdb{width:30px;height:30px;display:grid;place-items:center;border:none;background:none;border-radius:7px;color:var(--ink-2);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1}
.mdb:hover{background:var(--teal-l);color:var(--teal-d)}
.mdb b{font-weight:800}
.mdb i{font-style:italic;font-family:Georgia,serif}
.mdsep{width:1px;height:18px;background:var(--line-2);margin:0 4px}
.mdtabs{margin-left:auto;display:flex;background:var(--bg-3);border-radius:7px;padding:2px}
.mdtab{border:none;background:none;font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border-radius:6px;color:var(--ink-2);cursor:pointer}
.mdtab.on{background:var(--bg);color:var(--teal-d);box-shadow:0 1px 2px rgba(17,37,46,.12)}
.mdsrc{display:block;width:100%;border:none;outline:none;background:var(--bg);color:var(--ink);font:inherit;font-size:15.5px;line-height:1.6;padding:13px 14px;resize:vertical;min-height:140px;box-sizing:border-box}
.mdprev{padding:13px 14px;min-height:140px}
.mdempty{color:var(--ink-3);font-style:italic}
.mdhint{font-size:12.5px;color:var(--ink-3);padding:8px 12px;border-top:1px solid var(--line);background:var(--bg-2)}
.mdhint code{background:var(--bg-3);border-radius:4px;padding:1px 5px;font-size:12px;color:var(--ink-2)}

/* ===== rendered markdown body ===== */
.mdbody{font-size:15.5px;line-height:1.65;color:var(--ink);white-space:normal;word-wrap:break-word}
.mdbody>:first-child{margin-top:0}
.mdbody>:last-child{margin-bottom:0}
.mdbody p{margin:0 0 12px}
.mdbody h3{font-size:1.18rem;font-weight:700;margin:18px 0 8px;letter-spacing:-.01em}
.mdbody h4{font-size:1.02rem;font-weight:700;margin:16px 0 6px}
.mdbody ul,.mdbody ol{margin:0 0 12px;padding-left:22px}
.mdbody li{margin:3px 0}
.mdbody blockquote{margin:0 0 12px;padding:6px 14px;border-left:3px solid var(--teal);background:var(--bg-2);color:var(--ink-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.mdbody blockquote p{margin:0}
.mdbody code{background:var(--bg-3);border-radius:4px;padding:1.5px 5px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mdbody pre.mdpre{background:var(--navy);color:#E7EEF0;border-radius:var(--r-sm);padding:13px 15px;overflow:auto;margin:0 0 12px}
.mdbody pre.mdpre code{background:none;color:inherit;padding:0;font-size:13.5px}
.mdbody strong{font-weight:700}
.mdbody em{font-style:italic}
.mdbody a{color:var(--teal-d);text-decoration:underline;text-underline-offset:2px}

/* ===== follow buttons (dogs + members) ===== */
.followbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);background:var(--bg);border-radius:var(--pill);padding:8px 18px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink);text-decoration:none;transition:.18s}
.followbtn:hover{border-color:var(--teal);color:var(--teal-d)}
.followbtn.on{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)}
.dfollowwrap{display:flex;flex-direction:column}
.dfollowwrap .dtile{flex:1}
.followbtn.mini{width:100%;padding:7px 12px;font-size:13px;margin-top:8px;border-radius:var(--r-sm)}

/* ===== following list (dashboard) + dog follower count ===== */
.followgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.followcard{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--bg);text-decoration:none;color:inherit;transition:.18s;min-width:0}
.followcard:hover{border-color:var(--line-2);box-shadow:var(--sh-sm)}
.followcard .fav,.followcard .dfav{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;overflow:hidden}
.followcard .fav{color:#fff;font-weight:700;font-size:14px}
.followcard .dfav{background:var(--teal-l);color:var(--teal-d)}
.followcard div{min-width:0}
.followcard b{display:block;font-size:14.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.followcard small{color:var(--ink-3);font-size:12.5px}
.dfollowers{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:13.5px}
.dfollowers svg{width:15px;height:15px}

/* ---- Moments + reactions (feed system — bundle 1) ---- */
.field textarea{width:100%;font-family:inherit;font-size:15.5px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);resize:vertical;min-height:84px;line-height:1.5}
.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l);background:var(--bg)}

.momenthdr{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.momentgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

.mcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.mcard:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.mcphoto{position:relative;display:block;width:100%;aspect-ratio:1/1;background:var(--bg-3);overflow:hidden}
.mcphoto-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mcbody{display:flex;flex-direction:column;gap:8px;padding:12px 13px}
.mchead{display:flex;align-items:center;gap:9px}
.mcav{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:0 0 auto}
.mcwho{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mcwho b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcwho small{color:var(--ink-3);font-size:12px}
.mccap{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.mcstats{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);font-size:13px;font-weight:500}
.mcstats svg{width:15px;height:15px}

.momentcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);overflow:hidden}
.mhead{display:flex;align-items:center;gap:11px;padding:14px 16px}
.mav{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;flex:0 0 auto}
.mwho{display:flex;flex-direction:column;line-height:1.3}
.mauthor{font-weight:700;font-size:15.5px;color:var(--ink);text-decoration:none}
.mauthor:hover{color:var(--teal-d)}
.mtime{color:var(--ink-3);font-size:13px}
.mtime .link{color:var(--ink-3)}
.mtime .link:hover{color:var(--teal-d)}
.mphoto{background:var(--bg-3);line-height:0}
.mphoto img{width:100%;max-height:78vh;object-fit:contain;display:block;margin:0 auto;cursor:zoom-in}
.mcap{padding:14px 16px 4px;font-size:15.5px;line-height:1.55;color:var(--ink)}

.rbar{display:flex;gap:8px;padding:12px 16px 16px;flex-wrap:wrap}
.rbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line);border-radius:var(--pill);background:var(--bg-2);color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,color .12s}
.rbtn:hover{background:var(--teal-l);border-color:transparent;color:var(--teal-d)}
.rbtn svg{width:18px;height:18px}
.rbtn.on{background:var(--teal);border-color:transparent;color:#fff}
.rbtn.on:hover{background:var(--teal-d);color:#fff}
.rn{font-variant-numeric:tabular-nums}

.mremove{background:none;border:none;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:#b4275c;padding:0}
.mremove:hover{text-decoration:underline}

@media(max-width:560px){.momentgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}}

/* ---- Followers / following lists (Instagram-style) ---- */
a.dfollowers{text-decoration:none}
a.dfollowers:hover{color:var(--teal-d)}
a.dfollowers b{color:var(--ink);font-weight:700}
a.dfollowers:hover b{color:var(--teal-d)}

.ftabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ftab{padding:9px 14px;font-weight:600;font-size:14.5px;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.ftab:hover{color:var(--ink)}
.ftab.on{color:var(--teal-d);border-bottom-color:var(--teal)}

.fsec{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin:18px 0 6px;font-weight:700}
.followlist{display:flex;flex-direction:column}
.frow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.fmain{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit}
.fav{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;color:#fff;flex:0 0 auto}
.fav.fdog{border-radius:14px}
.fmeta{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.fname{font-weight:700;font-size:15.5px;color:var(--ink);display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmain:hover .fname{color:var(--teal-d)}
.fhandle{color:var(--ink-3);font-size:13.5px}
.followsyou{font-weight:600;font-size:11px;color:var(--ink-2);background:var(--bg-3);border-radius:var(--pill);padding:2px 8px;flex:0 0 auto;white-space:nowrap}

/* ---- Share + watermark (share sheet, buttons, toast) ---- */
.sharebtn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--pill);background:var(--bg);color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.sharebtn:hover{background:var(--teal-l);border-color:transparent;color:var(--teal-d)}
.sharebtn svg{width:17px;height:17px}

.mactions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 16px;border-top:1px solid var(--line)}

.dwsheet-ov{position:fixed;inset:0;background:rgba(15,30,28,0.5);display:flex;align-items:flex-end;justify-content:center;z-index:1000}
.dwsheet-ov[hidden]{display:none}
.dwsheet{background:var(--bg);width:100%;max-width:420px;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh)}
@media(min-width:560px){.dwsheet-ov{align-items:center}.dwsheet{border-radius:var(--r-lg)}}
.dwsheet-h{font-weight:700;font-size:15px;padding:10px 12px 6px;color:var(--ink)}
.dwsheet button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;border-radius:var(--r-sm);padding:14px 12px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer}
.dwsheet button:hover{background:var(--bg-2)}
.dwsheet button svg{width:20px;height:20px;color:var(--ink-2);flex:0 0 auto}
.dwsheet .dwsheet-x{justify-content:center;color:var(--ink-2);font-weight:600;margin-top:4px;border-top:1px solid var(--line);border-radius:0}

.dwtoast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:var(--navy);color:#fff;padding:11px 20px;border-radius:var(--pill);font-size:14px;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;z-index:1100;pointer-events:none;box-shadow:var(--sh)}
.dwtoast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* share sheet — preview, shape picker, social row */
.dwsheet-prev{padding:6px 12px 10px;text-align:center}
.dwsheet-prev img{max-height:208px;max-width:100%;border-radius:var(--r-sm);box-shadow:var(--sh-sm);background:var(--bg-2)}
.dwsheet-lbl{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;padding:4px 12px 2px}
.dwsheet-shapes{display:flex;gap:8px;padding:2px 8px 6px}
.dwsheet-shapes button{flex:1;justify-content:center;width:auto;text-align:center;padding:11px 8px;font-size:14px;font-weight:600;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2)}
.dwsheet-shapes button:hover{background:var(--teal-l);border-color:transparent;color:var(--teal-d)}
.dwsheet-hint{font-size:12px;color:var(--ink-3);padding:0 12px 8px;line-height:1.4}
.dwsheet-social{display:flex;gap:8px;padding:2px 8px 4px}
.dwsheet-social button{flex:1;justify-content:center;width:auto;text-align:center;padding:11px 8px;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2)}
.dwsheet-social button:hover{background:var(--bg-2)}

/* ---- moment composer thumbnails (Stage 2) ---- */
.cthumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cthumb{position:relative;width:94px;height:94px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--bg-3)}
.cthumb-img{position:absolute;inset:0;background-size:cover;background-position:center}
.cthumb-cover{position:absolute;left:4px;bottom:4px;background:var(--teal);color:#fff;font-size:10px;font-weight:600;letter-spacing:.2px;padding:1px 6px;border-radius:5px}
.cthumb-x{position:absolute;top:3px;right:3px;width:21px;height:21px;border:none;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cthumb-x:hover{background:rgba(0,0,0,.82)}

/* ---- moment photo carousel (Stage 2) ---- */
.mcarousel{position:relative;border-radius:var(--r);overflow:hidden;background:#0c0f0e;line-height:0;aspect-ratio:4/5;max-height:78vh;margin:0 auto}
.mcar-slide{position:absolute;inset:0;display:none}
.mcar-slide.on{display:flex;align-items:center;justify-content:center}
.mcar-slide img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.mcar-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;border:none;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s}
.mcar-nav:hover{background:rgba(0,0,0,.7)}
.mcar-nav.prev{left:8px}
.mcar-nav.next{right:8px}
.mcar-count{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;padding:2px 9px;border-radius:var(--pill);line-height:1.5}
.mcar-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;line-height:0}
.mcar-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .15s;cursor:pointer}
.mcar-dots i.on{background:#fff}

/* ---- feed card: multi-photo dots (Stage 2) ---- */
.mc-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.mc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.32)}
.mc-dots i.on{background:#fff}

/* ---- composer thumb reorder arrows (Stage 2) ---- */
.cthumb-nav{position:absolute;right:3px;bottom:3px;display:flex;gap:3px}
.cthumb-arrow{width:18px;height:18px;border:none;border-radius:5px;background:rgba(0,0,0,.6);color:#fff;font-size:8px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cthumb-arrow:hover:not(:disabled){background:rgba(0,0,0,.82)}
.cthumb-arrow:disabled{opacity:.3;cursor:default}

/* ---- full-screen image viewer / lightbox (Stage 2) ---- */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(8,12,11,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lb-img{max-width:94vw;max-height:92vh;object-fit:contain;border-radius:4px;box-shadow:0 14px 50px rgba(0,0,0,.55)}
.lb-close{position:absolute;top:14px;right:16px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close:hover{background:rgba(255,255,255,.24)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:none;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;pointer-events:none}
@media (max-width:640px){.lb-nav{width:40px;height:40px;font-size:26px}.lb-close{top:10px;right:10px}}

/* ===== Admin: Moments moderation (Bundle 2) ===== */
.btn-sm{padding:6px 11px;font-size:13px}
.btn-warn{background:var(--amber);border-color:var(--amber);color:#fff}
.btn-warn:hover{filter:brightness(.96)}
.btn-ok{background:var(--green);border-color:var(--green);color:#fff}
.btn-ok:hover{filter:brightness(.96)}
.crumb{margin:0 0 14px;font-size:14px}
.kvrow{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.kvrow:last-child{border-bottom:0}
.kvrow span{color:var(--ink-3)}
.flabel{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.pageinfo{font-size:13.5px;color:var(--ink-3)}

.amom-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.amom-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--bg)}
.amom-card:hover{border-color:var(--teal-l)}
.amom-thumb{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;flex:none;background:var(--bg-3);display:block}
.amom-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.amom-badge{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--pill)}
.amom-body{flex:1;min-width:0}
.amom-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.amom-author{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-width:0}
.amom-av{width:32px;height:32px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);font-weight:700;font-size:13px;display:grid;place-items:center;flex:none}
.amom-av.lg{width:46px;height:46px;font-size:17px}
.amom-at{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.amom-at b{color:var(--ink);font-size:14.5px}
.amom-at small{color:var(--ink-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amom-cap{margin:7px 0 6px;color:var(--ink-2);font-size:14px;line-height:1.45}
.amom-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--ink-3);font-size:13px;font-family:var(--mono)}
.amom-acts{display:flex;flex-direction:column;gap:7px;flex:none}
.amom-inline{margin:0}

.amom-detail{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.amom-gallery{display:flex;flex-direction:column;gap:12px}
.amom-gallery picture{display:block}
.amom-gallery img{width:100%;border-radius:var(--r);display:block;border:1px solid var(--line)}
.amom-side{display:flex;flex-direction:column;gap:16px}
.amom-dhead{display:flex;align-items:center;gap:12px}
.amom-dwho{flex:1;min-width:0;line-height:1.3}
.amom-dwho b{display:block;color:var(--ink)}
.amom-tagged{margin:0;font-size:14px;color:var(--ink-2)}
.amom-sec{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.amom-sec h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-family:var(--mono)}
.amom-capfull{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.amom-side textarea{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);resize:vertical}
.amom-modbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.amom-modnote{margin:10px 0 0;font-size:12.5px}
@media(max-width:820px){.amom-detail{grid-template-columns:1fr}}
@media(max-width:640px){.amom-card{flex-wrap:wrap}.amom-acts{flex-direction:row;width:100%}}

/* ===== Admin: Dashboard "Command Center" (Bundle 3) ===== */
.dash-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.dash-hello h1{margin:0 0 3px}
.dash-hello .meta{margin:0;color:var(--ink-2);font-size:14px}
.dot-live{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(61,163,93,.18);vertical-align:middle;margin:0 9px 0 3px}
.attncard.bad{border-left-color:var(--red);background:var(--red-l)}
.attncard.bad .n{color:var(--red-d)}

.dkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:22px}
.dkpi{border:1px solid var(--line);border-radius:var(--r);padding:15px;background:var(--bg);display:flex;flex-direction:column;gap:12px}
.dkpi .top{display:flex;align-items:flex-start;justify-content:space-between}
.dkpi .ic{width:34px;height:34px;border-radius:10px;background:var(--teal-l);color:var(--teal-d);display:flex;align-items:center;justify-content:center}
.dkpi .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dkpi .v{font-family:var(--mono);font-weight:700;font-size:1.7rem;color:var(--teal-d);line-height:1}
.dkpi .l{font-size:13px;color:var(--ink-3);margin-top:3px}
.dkpi .d{font-size:12px;font-weight:700;color:var(--ink-3);font-family:var(--mono)}
.dkpi .d.up{color:var(--green)}

.dcols{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start;margin-bottom:6px}
.dpanel{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--bg);margin-bottom:16px}
.dpanel:last-child{margin-bottom:0}
.dpanel h3{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-family:var(--mono)}
.dq{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.dq:last-child{border-bottom:0}
.dq:hover .t b{color:var(--teal-d)}
.dq .av{width:34px;height:34px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);font-weight:700;font-size:13px;display:grid;place-items:center;flex:none}
.dq .av.rep{background:var(--red-l);color:var(--red-d)}
.dq .t{flex:1;min-width:0;font-size:14px;line-height:1.4}
.dq .t small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:1px}
.dq .tag{font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:var(--pill);flex:none}
.dq .tag.ver{background:var(--teal-l);color:var(--teal-d)}
.dq .tag.rep{background:var(--red-l);color:var(--red-d)}
.dq-empty{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:14px;padding:6px 0}
.dquick{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
@media(max-width:820px){.dcols{grid-template-columns:1fr}}

/* ===== Admin: generic row-card list (Members + reused by Staff/Dogs/Boards) ===== */
.rlist{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.rcard{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--bg)}
.rcard:hover{border-color:var(--teal-l)}
.rav{width:42px;height:42px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);font-weight:700;font-size:15px;display:grid;place-items:center;flex:none;text-decoration:none}
.rmain{flex:1;min-width:0}
.rname{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:15px;color:var(--ink);text-decoration:none}
.rname:hover{color:var(--teal-d)}
.rmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.rsub{color:var(--ink-3);font-size:12.5px}
.racts{display:flex;gap:8px;flex:none}
.rinline{margin:0}
@media(max-width:620px){.rcard{flex-wrap:wrap}.racts{width:100%}}

/* ===== Admin: member detail — stacked sections (Bundle 4) ===== */
.msec{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--bg);margin-bottom:16px}
.msec h3{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-family:var(--mono)}
.mprofile{display:flex;align-items:flex-start;gap:16px}
.mav.lg{width:64px;height:64px;font-size:22px}
.mp-id{flex:1;min-width:0}
.mp-id h1{margin:0 0 3px;font-size:1.4rem;display:flex;align-items:center;gap:7px}
.mp-sub{color:var(--ink-2);font-size:14px;word-break:break-word}
.mp-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.mp-acts{flex:none}
.mtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.mtile{border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;background:var(--bg-2)}
.mtile .v{font-family:var(--mono);font-weight:700;font-size:1.4rem;color:var(--teal-d);line-height:1}
.mtile .l{font-size:12px;color:var(--ink-3);margin-top:4px}
.msec textarea,.msec input[type=text]{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);resize:vertical}
.msec .mrow select,.msec select{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink)}
.msec.danger-panel{border-color:#e7b9ac;background:#fdf3f0}
@media(max-width:600px){.mprofile{flex-wrap:wrap}.mp-acts{width:100%}}

/* ===== Admin: master–detail review queues (Bundle 5) ===== */
.md{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;margin-top:6px}
.md-list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.md-li{display:flex;gap:11px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.md-li:last-child{border-bottom:0}
.md-li:hover{background:var(--bg-2)}
.md-li.on{background:var(--teal-l)}
.md-t{min-width:0;line-height:1.3}
.md-t b{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-t small{color:var(--ink-3);font-size:12px}
.rav.lg{width:54px;height:54px;font-size:18px}
.rav.rep{background:var(--red-l);color:var(--red-d)}
.md-detail{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--bg)}
.md-dhead{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.md-dwho{flex:1;min-width:0;line-height:1.35}
.md-dwho b{display:block;font-size:1.05rem;color:var(--ink)}
.md-sec{margin-top:16px}
.md-sec h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-family:var(--mono)}
.md-note{margin:0;font-size:14px;line-height:1.55;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.md-docs{display:flex;flex-wrap:wrap;gap:8px}
.md-reason{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);margin-bottom:10px}
.md-btns{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:820px){.md{grid-template-columns:1fr}}

/* verification document previews (Bundle 5.1) */
.md-doc{margin-bottom:14px}
.md-doc:last-child{margin-bottom:0}
.md-doc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.md-doc-k{font-size:13px;font-weight:600;color:var(--ink-2)}
.md-docprev{max-width:100%;max-height:440px;border:1px solid var(--line);border-radius:var(--r-sm);display:block;background:var(--bg-2)}
.md-docframe{width:100%;height:480px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2)}

/* ===== Admin: Editorial — list + side editor (Bundle 6) ===== */
.led{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start;margin-top:8px}
.led-list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.led-none{padding:14px;color:var(--ink-3);font-size:13px}
.led-new{display:block;padding:11px 14px;text-align:center;font-weight:600;font-size:13.5px;color:var(--teal-d);background:var(--teal-l);text-decoration:none;border-bottom:1px solid var(--line)}
.led-new.on,.led-new:hover{background:var(--teal);color:#fff}
.led-li{display:block;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.led-li:last-child{border-bottom:0}
.led-li:hover{background:var(--bg-2)}
.led-li.on{background:var(--teal-l)}
.led-li b{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.led-li small{color:var(--ink-3);font-size:12px;display:flex;align-items:center;gap:7px;margin-top:4px;flex-wrap:wrap}
.led-editor{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--bg)}
.led-editor .field{margin-bottom:14px}
.led-editor>form .field:last-child{margin-bottom:0}
.led-editor label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.led-editor input[type=text],.led-editor textarea,.led-editor select,.led-editor input[type=datetime-local]{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);resize:vertical}
.led-editor .visrow{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;margin-bottom:5px}
.led-editor .visrow input[type=radio]{width:auto;flex:none;margin:0}
.led-editor .visrow input[type=datetime-local]{width:auto;flex:none}
.led-editor .opt-flag{font-weight:400;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.led-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.led-foot .spacer{flex:1}
@media(max-width:820px){.led{grid-template-columns:1fr}}

/* ===== Admin: Lists — row-card extras (Bundle 7) ===== */
.rav svg{width:20px;height:20px;fill:currentColor}
.auditact{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
.bcard{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--bg);margin-bottom:12px}
.bcard.off{background:var(--bg-2)}
.bcard.off .rname{color:var(--ink-2)}
.bcard-head{border:0;padding:0;background:none}
.bcard-head:hover{border:0}
.bcard-edit{margin-top:12px;padding-top:14px;border-top:1px dashed var(--line)}

/* ===== Admin: Settings — section nav (Bundle 8) ===== */
.setnav{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start;margin-top:8px}
.setnav>.nav{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.setnav>.nav a{display:block;padding:11px 14px;font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line);text-decoration:none}
.setnav>.nav a:last-child{border-bottom:0}
.setnav>.nav a:hover{background:var(--bg-2)}
.setnav>.nav a.on{background:var(--teal-l);color:var(--teal-d);font-weight:600}
.csec{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--bg);margin-bottom:14px}
.csec h4{margin:0;font-size:14.5px}
.csec .field:first-of-type{margin-top:12px}
@media(max-width:820px){.setnav{grid-template-columns:1fr}}

/* ===== Admin: Audit table (compact) ===== */
.auditlog td{vertical-align:middle}
.auditlog .auditact{display:inline-block}
.audtarget{font-size:12.5px;color:var(--ink-2)}
.audtarget .mono{color:var(--ink)}

/* ===== Admin: Analytics — cards grid (Option A · GA) ===== */
.an-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.an-head h1{margin:0}
.an-head .sub{margin:2px 0 0}
.an-chip{font-size:12px;font-weight:700;color:var(--teal-d);background:var(--teal-l);border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:7px}
.an-gdot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(61,163,93,.18)}
.an-scards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.an-scard{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);box-shadow:var(--sh-sm);padding:15px}
.an-scard .l{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);text-transform:uppercase}
.an-scard .v{font-family:var(--mono);font-weight:700;font-size:1.7rem;color:var(--ink);line-height:1.1;margin-top:5px}
.an-scard .v.teal{color:var(--teal-d)}
.an-cmp{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700}
.an-cmp.up{color:var(--green-d)} .an-cmp.down{color:#c1492f} .an-cmp.flat{color:var(--ink-3)}
.an-modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.an-mod{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);box-shadow:var(--sh-sm);padding:15px}
.an-mod.span2{grid-column:span 2}
.an-mod .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.an-mod .mh h4{margin:0;font-size:13px}
.an-mod .big{font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--ink)}
.an-mod .cap{font-size:11.5px;color:var(--ink-3)}
.an-chart{display:block;width:100%;height:auto;margin-top:10px}
.an-donut{display:flex;align-items:center;gap:16px;padding-top:8px}
.an-legend{font-size:12.5px}
.an-legend div{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.an-sq{width:10px;height:10px;border-radius:3px;flex:none}
.an-brow{display:flex;align-items:center;gap:10px;font-size:12.5px;margin:8px 0}
.an-brow .nm{flex:none;width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.an-brow .tr{flex:1;height:8px;background:var(--bg-2);border-radius:999px;overflow:hidden}
.an-brow .fl{height:100%;background:linear-gradient(90deg,var(--teal),#37b3a6);border-radius:999px}
.an-brow .vv{flex:none;width:46px;text-align:right;color:var(--ink-3)}
.an-kv{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line)}
.an-kv:first-of-type{border-top:0}
.an-kv b{color:var(--ink);font-family:var(--mono)}
@media(max-width:860px){.an-scards,.an-modgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.an-scards,.an-modgrid{grid-template-columns:1fr}.an-mod.span2{grid-column:auto}}

/* ===== Post-launch round 3 ===== */
/* #6 announcement banner: centered, links allowed */
.sitebanner .wrap{text-align:center}
.sitebanner a{color:inherit;text-decoration:underline;font-weight:600}
/* #8 static pages (About/Privacy/Terms/Help): left-aligned readable column */
.pagedoc{max-width:760px;margin:36px 0 8px}
.pagedoc .pagebody{color:var(--ink-2);font-size:16px;line-height:1.7}

/* ============================================================================
   News — Option B "Feature" layout (public) + admin Markdown editor.
   Additive: the legacy .newscard/.nc-* teaser grid (home/lobby) is unchanged.
   ============================================================================ */
.nf-top{display:grid; grid-template-columns:1.6fr 1fr; gap:22px}
.nf-cover{background-size:cover; background-position:center; background-color:var(--bg-3)}
.nf-ph{display:grid; place-items:center; background:linear-gradient(135deg,var(--teal) 0%,var(--teal-d) 55%,var(--navy) 100%); color:rgba(255,255,255,.55)}
.nf-paw{width:46px; height:46px}
.nf-hero{position:relative; border-radius:var(--r); overflow:hidden; min-height:380px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff}
.nf-hero .nf-cover{position:absolute; inset:0}
.nf-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,25,32,0) 30%,rgba(8,25,32,.86))}
.nf-htxt{position:relative; padding:26px}
.nf-pill{display:inline-block; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:30px; margin-bottom:12px}
.nf-htitle{font-size:clamp(1.45rem,2.6vw,2rem); line-height:1.14; margin:0 0 9px; font-weight:700; letter-spacing:-.01em; color:#fff}
.nf-hex{color:#e2eaec; font-size:15px; line-height:1.5; margin:0 0 14px; max-width:54ch}
.nf-hero:hover .nf-htitle{text-decoration:underline; text-underline-offset:3px}

.nf-meta{display:flex; align-items:center; gap:8px; color:var(--ink-3); font-size:13px; flex-wrap:wrap}
.nf-meta.light{color:#d6e2e4}
.nf-av{width:22px; height:22px; border-radius:50%; background:var(--teal-l); color:var(--teal-d); display:grid; place-items:center; font-size:11px; font-weight:700; flex:none}
.nf-meta.light .nf-av{background:rgba(255,255,255,.22); color:#fff}
.nf-by{font-weight:600; color:inherit}
.nf-dot{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; display:inline-block}
.nf-views{font-family:var(--mono); font-size:12px}

.nf-rail{display:flex; flex-direction:column; gap:14px}
.nf-rcard{display:grid; grid-template-columns:98px 1fr; gap:13px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:10px; transition:transform .15s, box-shadow .2s, border-color .15s}
.nf-rcard:hover{border-color:var(--teal); box-shadow:var(--sh-sm); transform:translateY(-1px)}
.nf-rcard .rcover{width:98px; height:78px; border-radius:9px}
.nf-rcard .nf-ph .nf-paw{width:30px; height:30px}
.nf-rtitle{font-size:.97rem; line-height:1.24; margin:0 0 6px; font-weight:600; color:var(--ink)}
.nf-rmeta{display:flex; align-items:center; gap:7px; color:var(--ink-3); font-size:12px}

.nf-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line)}
.nf-scard{display:block; border-radius:var(--r); transition:transform .18s, box-shadow .22s}
.nf-scard:hover{transform:translateY(-3px)}
.nf-scard .scover{aspect-ratio:16/10; border-radius:var(--r); margin-bottom:11px}
.nf-stitle{font-size:1.08rem; line-height:1.2; margin:0 0 8px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.nf-scard:hover .nf-stitle{color:var(--teal-d)}
.nf-sex{color:var(--ink-2); font-size:13.5px; line-height:1.5; margin:0 0 10px}

/* article page cover */
.nf-showcover{aspect-ratio:16/9; background-size:cover; background-position:center; border-radius:var(--r); margin:4px 0 20px}
/* inline images inside an article body */
.mdbody .mdimg,.mdbody img{max-width:100%; height:auto; border-radius:10px; margin:6px 0}
.mdbody .mdfig{text-align:center; margin:18px 0}

@media (max-width:780px){
  .nf-top{grid-template-columns:1fr}
  .nf-strip{grid-template-columns:1fr}
  .nf-hero{min-height:300px}
}

/* ---- admin: Markdown editor ---- */
.md-toolbar{display:flex; align-items:center; gap:5px; flex-wrap:wrap; border:1px solid var(--line-2); border-bottom:0; border-radius:var(--r-sm) var(--r-sm) 0 0; background:var(--bg-2); padding:7px 8px}
.md-btn{font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:5px 9px; cursor:pointer; line-height:1.2}
.md-btn:hover{border-color:var(--teal); color:var(--teal-d)}
.md-btn.on{background:var(--teal-l); border-color:var(--teal); color:var(--teal-d)}
.md-btn i{font-style:italic} .md-btn b{font-weight:800}
.md-sep{width:1px; align-self:stretch; background:var(--line); margin:2px 3px}
.md-right{margin-left:auto}
.md-area{border-radius:0 0 var(--r-sm) var(--r-sm); min-height:230px; line-height:1.6}
.md-preview{border:1px solid var(--line-2); border-top:0; border-radius:0 0 var(--r-sm) var(--r-sm); padding:16px 18px; min-height:230px; background:var(--bg); color:var(--ink); font-size:15.5px; line-height:1.7}
.md-preview h3{font-size:1.25rem; margin:.4em 0 .3em} .md-preview h4{font-size:1.05rem; margin:.4em 0 .3em}
.md-preview p{margin:0 0 .7em} .md-preview ul{margin:0 0 .7em 1.1em}
.md-preview img{max-width:100%; border-radius:8px} .md-preview a{color:var(--teal-d)}
.md-preview blockquote{border-left:3px solid var(--line-2); margin:.5em 0; padding:.1em 0 .1em 12px; color:var(--ink-2)}

.cover-prev{margin:0 0 10px}
.cover-prev img{max-width:100%; border-radius:var(--r-sm); border:1px solid var(--line)}
.cover-remove{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); margin-top:7px; font-weight:500}
.filein{width:100%; font-size:14px; padding:9px; border:1px dashed var(--line-2); border-radius:var(--r-sm); background:var(--bg-2); cursor:pointer}
.field .hint{font-size:12.5px; color:var(--ink-3); margin-top:6px; line-height:1.45}

/* ============================================================================
   Admin dashboard — Shares panel (real 30-day + all-time counts + live feed).
   ============================================================================ */
.sharesback{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:18px}
.shares-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:6px}
.shares-head h3{margin:0;font-size:15px;font-weight:700}
.shares-sub{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.shares-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.share-stat{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;background:var(--bg)}
.share-stat.total{background:var(--teal-l);border-color:#bfe6e1}
.share-stat .sl{font-size:12.5px;color:var(--ink-2);margin-bottom:7px;min-height:20px}
.share-stat .sv{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.share-stat .sd{font-family:var(--mono);font-size:11px;color:var(--teal-d);margin-top:5px}
.spill{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:20px}
.spill.profile{background:#E3F4F2;color:#0A7167}
.spill.moment{background:#eef0fb;color:#4b53b8}
.spill.discussion{background:#fdeede;color:#b06a12}
.shares-recent{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.shares-recent .sr-h{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-bottom:6px}
.sr-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sr-row:last-child{border-bottom:0}
.sr-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.sr-w{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);flex:none}
@media (max-width:720px){ .shares-grid{grid-template-columns:repeat(2,1fr)} }

/* Latest shares — 5 rows then a collapsible "view more" disclosure */
.sr-extra{margin:0}
.sr-extra > summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--teal-d);padding:9px 0 2px;display:flex;align-items:center;gap:6px;user-select:none}
.sr-extra > summary::-webkit-details-marker{display:none}
.sr-extra > summary::after{content:"\203A";font-size:17px;line-height:1;transform:rotate(90deg);transition:transform .15s ease}
.sr-extra[open] > summary::after{transform:rotate(-90deg)}
.sr-extra > summary .sr-close{display:none}
.sr-extra[open] > summary .sr-open{display:none}
.sr-extra[open] > summary .sr-close{display:inline}

/* ============================================================================
   News article reading page — "Editorial" (Variant A): centred, drop-cap.
   ============================================================================ */
.artA{max-width:760px;margin:0 auto}
.artA-head{text-align:center;margin-bottom:8px}
.artA-eyebrow{display:block;margin-bottom:10px;color:var(--teal-d)}
.artA-title{font-size:clamp(2rem,4vw,2.8rem);line-height:1.15;margin:0 0 16px;color:var(--ink)}
.artA-byline{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;color:var(--ink-2);font-size:13.5px;margin-bottom:24px}
.artA-byline .artA-by{font-weight:600;color:var(--ink)}
.artA-byline .artA-dot{color:var(--ink-3)}
.nf-av.lg{width:48px;height:48px;font-size:17px}
.artA-cover{border-radius:16px;overflow:hidden;margin:0 0 28px;background:linear-gradient(135deg,var(--teal),var(--teal-d));aspect-ratio:16/9}
.artA-cover picture,.artA-cover-img{display:block;width:100%;height:100%;object-fit:cover}
.artA-lead{font-size:19px;line-height:1.6;color:var(--ink-2);font-weight:500;margin:0 0 22px}
.artA-body{color:var(--ink);font-size:17.5px;line-height:1.82}
.artA-body > p:first-of-type::first-letter{font-size:3.4em;line-height:.82;float:left;font-weight:700;color:var(--teal-d);margin:6px 12px 0 0}
.artA-body h2{font-size:24px;margin:34px 0 10px;color:var(--ink)}
.artA-body h3{font-size:20px;margin:28px 0 8px;color:var(--ink)}
.artA-body img{border-radius:12px;margin:20px 0;max-width:100%}
.artA-body blockquote{border-left:4px solid var(--teal);background:var(--teal-l);padding:16px 20px;border-radius:0 10px 10px 0;margin:24px 0;color:var(--ink);font-size:19px}
.artA-share{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.artA-sharelbl{font-weight:600;color:var(--ink)}
.artA-author{display:flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:34px}
.artA-an{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.artA-ar{font-size:13px;color:var(--ink-3);margin-top:2px}
.artA-moreh{font-size:18px;color:var(--ink);margin:0 0 14px}
.artA-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:10px}
.artA-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);text-decoration:none;display:block;transition:transform .18s,box-shadow .2s,border-color .18s}
.artA-card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--line-2)}
.artA-card-cover{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--bg-3)}
.artA-card-cover.ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--teal-d))}
.artA-card-cover.ph .nf-paw{width:34px;height:34px;color:#fff;opacity:.85}
.artA-card-b{padding:12px 14px}
.artA-card-t{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================================
   SITE THEMES — super-admin sets one site-wide theme (Setting: site_theme).
   Light is the :root default. Each dark palette only redefines colour tokens,
   so the entire UI re-themes from these variables. Logo swaps via .logo-dark.
   ============================================================================ */
html[data-theme="midnight"]{
  --bg:#0A1115; --bg-2:#0E171C; --bg-3:#16242B; --surface:#111C22; --surface-2:#16242B; --nav-bg:rgba(10,17,21,.85);
  --ink:#E8EFF1; --ink-2:#9DB0B8; --ink-3:#6E848C;
  --line:#1F2F37; --line-2:#2A3D46;
  --teal:#1CBBA9; --teal-d:#23C7B4; --teal-l:#0F2E2B;
  --green:#3FBE74; --green-d:#6FD49B; --green-l:#11291B;
  --amber:#D79A3A; --amber-l:#2B2410; --red:#E0687A; --red-d:#F0899A; --red-l:#2A1519;
  --sh-sm:0 4px 14px -8px rgba(0,0,0,.6); --sh:0 16px 40px -18px rgba(0,0,0,.7);
}
html[data-theme="dim"]{
  --bg:#15202B; --bg-2:#17242F; --bg-3:#22323E; --surface:#1B2832; --surface-2:#22323E; --nav-bg:rgba(21,32,43,.85);
  --ink:#E7EEF2; --ink-2:#8FA3AE; --ink-3:#63767F;
  --line:#26384A; --line-2:#324456;
  --teal:#2BC3B1; --teal-d:#33CFBD; --teal-l:#12302D;
  --green:#43C078; --green-d:#74D6A0; --green-l:#122A1C;
  --amber:#DA9E3E; --amber-l:#2C2511; --red:#E0687A; --red-d:#F0899A; --red-l:#2A1519;
  --sh-sm:0 4px 14px -8px rgba(0,0,0,.55); --sh:0 16px 40px -18px rgba(0,0,0,.65);
}
html[data-theme="slate"]{
  --bg:#0E1A22; --bg-2:#11212B; --bg-3:#1B303B; --surface:#14242E; --surface-2:#1B303B; --nav-bg:rgba(14,26,34,.85);
  --ink:#E3EDF1; --ink-2:#93A7B1; --ink-3:#64787F;
  --line:#203440; --line-2:#2B4350;
  --teal:#19B7A6; --teal-d:#21C4B2; --teal-l:#0F2E2B;
  --green:#3FBE74; --green-d:#6FD49B; --green-l:#11291B;
  --amber:#D79A3A; --amber-l:#2B2410; --red:#E0687A; --red-d:#F0899A; --red-l:#2A1519;
  --sh-sm:0 4px 14px -8px rgba(0,0,0,.6); --sh:0 16px 40px -18px rgba(0,0,0,.7);
}
html[data-theme="charcoal"]{
  --bg:#161819; --bg-2:#1A1D1E; --bg-3:#25292B; --surface:#1E2123; --surface-2:#25292B; --nav-bg:rgba(22,24,25,.85);
  --ink:#ECEAE6; --ink-2:#A8A39B; --ink-3:#7A736B;
  --line:#2C3033; --line-2:#3A3F42;
  --teal:#23B8A6; --teal-d:#2BC4B2; --teal-l:#12302C;
  --green:#43C078; --green-d:#74D6A0; --green-l:#13291C;
  --amber:#DA9E3E; --amber-l:#2C2511; --red:#E0687A; --red-d:#F0899A; --red-l:#2A1519;
  --sh-sm:0 4px 14px -8px rgba(0,0,0,.6); --sh:0 16px 40px -18px rgba(0,0,0,.75);
}
/* logo swap: colour logo on light, white logo on dark */
.logo img{display:block;height:40px;width:auto}
footer .logo img{height:36px}
.logo .logo-dark{display:none}
html:not([data-theme="light"]) .logo .logo-light{display:none}
html:not([data-theme="light"]) .logo .logo-dark{display:block}

/* admin: site-theme picker */
.themepick{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.themeopt{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:11px;padding:8px 13px 8px 9px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--surface)}
.themeopt:hover{border-color:var(--line-2)}
.themeopt.on{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-l)}
.themeopt input{position:absolute;opacity:0;pointer-events:none}
.tsw{width:26px;height:26px;border-radius:7px;border:1px solid rgba(127,127,127,.35);display:inline-block;flex:none;background:#fff}
.tsw-light{background:linear-gradient(135deg,#FFFFFF 50%,#EBF1F2 50%)}
.tsw-midnight{background:linear-gradient(135deg,#0A1115 50%,#1CBBA9 50%)}
.tsw-dim{background:linear-gradient(135deg,#15202B 50%,#2BC3B1 50%)}
.tsw-slate{background:linear-gradient(135deg,#0E1A22 50%,#19B7A6 50%)}
.tsw-charcoal{background:linear-gradient(135deg,#161819 50%,#23B8A6 50%)}

/* ============================================================================
   BOARDS — homepage grouped grid + admin compact rows + paste-in icon control.
   ============================================================================ */
/* custom (uploaded/pasted) icons render as <img>; built-ins as sprite <svg> */
.b-ic img,.brow-ic img,.bgic img,.ic-prev img,.ic-bi img{width:100%;height:100%;object-fit:contain}

/* homepage grouped grid */
.bg-group{font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:22px 0 11px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.bgcard{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:15px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s,border-color .15s}
.bgcard:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--line-2)}
.bgic{width:44px;height:44px;border-radius:12px;background:var(--teal-l);color:var(--teal-d);display:grid;place-items:center;flex:none;overflow:hidden}
.bgic svg{width:22px;height:22px}
.bgic img{padding:7px}
.bgcard .alt{background:var(--bg-3)}
.bgbody{min-width:0}
.bgname{font-weight:700;font-size:15.5px;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bgdesc{font-size:13px;color:var(--ink-2);margin:3px 0 7px;line-height:1.45}
.bgstats{font-size:12px;color:var(--ink-3)}

/* admin compact rows */
.newboard .iconfield{font-weight:600;font-size:13px}
.brows{margin-top:18px;border-top:1px solid var(--line)}
.brow-wrap{border-bottom:1px solid var(--line)}
.brow-wrap.off{opacity:.62}
.brow{display:grid;grid-template-columns:auto auto 1fr auto auto auto;gap:14px;align-items:center;padding:12px 2px}
.brow:hover{background:var(--bg-2)}
.brow-reorder{display:flex;flex-direction:column;gap:2px}
.ic-arrow{width:24px;height:20px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:6px;cursor:pointer;font-size:12px;line-height:1;padding:0}
.ic-arrow:disabled{opacity:.35;cursor:default}
.brow-ic{width:40px;height:40px;border-radius:10px;background:var(--teal-l);color:var(--teal-d);display:grid;place-items:center;flex:none;overflow:hidden}
.brow-ic svg{width:20px;height:20px}.brow-ic img{padding:6px}
.brow-main{min-width:0}
.brow-name{font-weight:600;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brow-sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.brow-counts{text-align:center;font-size:12px;color:var(--ink-3)}.brow-counts b{display:block;font-size:16px;color:var(--ink)}
.brow-toggleform{margin:0}
.bswitch{width:42px;height:24px;border:none;border-radius:20px;background:var(--teal);position:relative;cursor:pointer;padding:0;transition:background .15s}
.bswitch::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:2px;right:2px;transition:.15s}
.bswitch.off{background:var(--line-2)}.bswitch.off::after{right:auto;left:2px}
.brow-edit{padding:6px 2px 20px}
.brow-save{display:flex;justify-content:flex-end;margin-top:14px}

/* icon control (built-in grid + paste url + upload/drop) */
.iconctl{margin-top:8px}
.ic-head{display:flex;align-items:center;gap:11px}
.ic-prev{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--teal-l);color:var(--teal-d);display:grid;place-items:center;flex:none;overflow:hidden}
.ic-prev svg{width:22px;height:22px}.ic-prev img{padding:7px}
.ic-panel{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--bg-2);max-width:380px}
.ic-builtins{display:flex;gap:8px;flex-wrap:wrap}
.ic-bi{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;overflow:hidden}
.ic-bi svg{width:20px;height:20px}
.ic-bi:hover{border-color:var(--line-2)}
.ic-bi.on{border-color:var(--teal);background:var(--teal-l);color:var(--teal-d);box-shadow:0 0 0 2px var(--teal-l)}
.ic-or{font-size:12px;color:var(--ink-3);margin:13px 0 8px}
.ic-url{width:100%;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--ink)}
.ic-drop{display:block;margin-top:8px;border:1.5px dashed var(--line-2);border-radius:10px;padding:14px;text-align:center;font-size:12.5px;color:var(--ink-3);cursor:pointer}
.ic-drop.over{border-color:var(--teal);background:var(--teal-l);color:var(--teal-d)}
@media (max-width:740px){
  .bgrid{grid-template-columns:1fr}
  .brow{grid-template-columns:auto auto 1fr auto auto}
  .brow-counts{display:none}
}

/* Inter swap: keep numeric columns aligned now that the mono font is gone */
.mono,.b-counts,.home-bar-stats,.statbox .n,.attncard .n,.votescore,.vote,.crow .pts,.toprow .tv b,.rank,.counters .n{font-variant-numeric:tabular-nums}

/* Nav switches to the mobile menu a touch earlier (1024px) so the logged-in bar
   — Search + bell + Dashboard + Add your dog — has room and never wraps/overflows.
   Nav-only; the broader 920px layout rules are unchanged. */
@media (max-width:1024px){
  .nav-links,.search{display:none}
  .menu-btn{display:block}
  .nav-links.open{display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:2px; background:var(--bg); border-bottom:1px solid var(--line); padding:14px 24px; z-index:50}
}

/* ── Breed directory + breed pages ─────────────────────────────── */
.breed-title{font-size:clamp(1.9rem,4vw,2.8rem); letter-spacing:-.02em; margin:8px 0 6px}
.breed-toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.breed-search{flex:1; min-width:220px; display:flex; align-items:center; gap:9px; background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:11px 14px}
.breed-search svg{width:18px; height:18px; flex:none; stroke:var(--ink-3); fill:none; stroke-width:2; stroke-linecap:round}
.breed-search input{flex:1; border:0; background:transparent; color:var(--ink); font:inherit; font-size:14.5px; outline:none}
.breed-count{font-size:13px; color:var(--ink-2); font-weight:500; white-space:nowrap}
.breed-sort{background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--ink-2); padding:11px 14px; font:inherit; font-size:14px; font-weight:500; cursor:pointer}
.az-filter{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px}
.az-filter a{font-size:13px; font-weight:600; color:var(--ink-2); padding:6px 10px; border-radius:8px; text-decoration:none; border:1px solid transparent}
.az-filter a:hover{color:var(--teal-d)}
.az-filter a.on{background:var(--teal-l); color:var(--teal-d); border-color:var(--teal)}
.breed small{display:block; color:var(--ink-3); font-size:12.5px; margin-top:2px}
/* pagination */
.pagination{display:flex; justify-content:center; align-items:center; gap:7px; margin-top:24px; flex-wrap:wrap}
.pagination a,.pagination span{min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:9px; font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; padding:0 12px}
.pagination a:hover{border-color:var(--teal); color:var(--teal-d)}
.pagination .cur{background:var(--teal); border-color:var(--teal); color:#04221F}
.pagination .dis{opacity:.4}
.pagination .dots{border:0; min-width:18px}
/* breed detail hero + tabs */
.crumbs{font-size:13px; margin-bottom:14px}
.crumbs a{color:var(--teal-d); text-decoration:none}
.breed-hero{display:flex; align-items:center; gap:18px; margin-bottom:4px; flex-wrap:wrap}
.breed-hero-ic{width:66px; height:66px; border-radius:16px; flex:none; display:grid; place-items:center}
.breed-hero-ic .dogsvg{width:34px; height:34px}
.breed-hero-body h1{font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:800; letter-spacing:-.02em; margin:0}
.breed-hero-meta{color:var(--ink-2); font-size:14px; margin-top:4px; display:flex; gap:14px; flex-wrap:wrap}
.breed-hero-meta b{color:var(--ink)}
.breed-hero-cta{margin-left:auto; display:flex; gap:9px}
.breed-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:18px 0}
.breed-tabs span,.breed-tabs a{padding:9px 14px; font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; border-bottom:2px solid transparent}
.breed-tabs .on{color:var(--teal-d); border-bottom-color:var(--teal)}
.breed-tabs a:hover{color:var(--teal-d)}
/* breeds feature card on Categories */
.breed-feature-card{display:flex; align-items:center; gap:18px; background:linear-gradient(120deg,var(--teal-l),var(--surface)); border:1px solid var(--teal); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:26px; text-decoration:none; color:var(--ink); transition:transform .2s,border-color .2s}
.breed-feature-card:hover{transform:translateY(-1px)}
.bfc-ic{width:54px; height:54px; border-radius:14px; flex:none; display:grid; place-items:center}
.bfc-ic .dogsvg{width:28px; height:28px}
.bfc-body{display:flex; flex-direction:column}
.bfc-body b{font-size:1.1rem; font-weight:800}
.bfc-body small{font-size:13px; color:var(--ink-2); margin-top:2px}
.bfc-go{margin-left:auto; color:var(--teal-d); font-weight:700; font-size:14px; white-space:nowrap}
@media(max-width:620px){ .bfc-go{display:none} .breed-hero-cta{margin-left:0; width:100%} }
/* breed/feature card photo thumbnails (real dog photos) */
.breed .ic.has-photo,.bfc-ic.has-photo{background-size:cover;background-position:center;background-color:var(--bg-3)}
/* breed page: own dog grid (~3 per row, 4:3 photos) — independent of .dogcards */
.breed-dogs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.breed-dogs .dogcard .photo{height:auto;aspect-ratio:4/3}
/* profile photo gallery (dogs + users) — strip on profile, manager on edit */
.photo-strip{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.photo-strip .ps-item{width:120px;height:90px;border-radius:10px;background-size:cover;background-position:center;border:1px solid var(--line);background-color:var(--bg-3);transition:.15s}
.photo-strip .ps-item:hover{border-color:var(--teal);transform:translateY(-2px)}
.pm-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.pm-slot{position:relative;width:104px;height:104px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background-size:cover;background-position:center;cursor:pointer;display:grid;place-items:center}
.pm-slot .pm-x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:13px;border:1px solid rgba(255,255,255,.25)}
.pm-slot .pm-rm{position:absolute;inset:0;display:none;place-items:center;background:rgba(150,30,45,.62);color:#fff;font-weight:700;font-size:13px}
.pm-slot:has(input:checked) .pm-rm{display:grid}
.pm-slot:has(input:checked){border-color:#E5687A}
.pm-add{border:1.5px dashed var(--line-2);background:var(--bg-3);color:var(--ink-3);flex-direction:column;gap:2px}
.pm-add .pm-add-ic{font-size:24px;line-height:1}
.pm-add small{font-size:11px}
/* photo-strip lightbox (Instagram-style click-to-view) */
.photo-strip .ps-item{cursor:pointer}
.ps-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(6,10,12,.92);display:flex;align-items:center;justify-content:center}
.ps-lightbox[hidden]{display:none}
.ps-lb-img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.5);background:var(--bg-3)}
.ps-lb-btn{position:absolute;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.22);cursor:pointer;display:grid;place-items:center;border-radius:50%}
.ps-lb-close{top:18px;right:18px;width:42px;height:42px;font-size:24px;line-height:1}
.ps-lb-prev,.ps-lb-next{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px;line-height:1}
.ps-lb-prev{left:18px}.ps-lb-next{right:18px}
.ps-lb-btn:hover{background:rgba(0,0,0,.75);border-color:var(--teal)}
@media(max-width:620px){.ps-lb-prev,.ps-lb-next{width:40px;height:40px;font-size:24px}.ps-lb-prev{left:8px}.ps-lb-next{right:8px}}
/* photo-manager: "picked & ready" preview on the add tiles */
.pm-add{position:relative}
.pm-add .pm-ready{display:none}
.pm-add.picked{border-style:solid;border-color:var(--teal);color:var(--ink);background-size:cover;background-position:center}
.pm-add.picked .pm-add-ic{display:none}
.pm-add.picked .pm-ready{display:grid;position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#04221F;place-items:center;font-size:13px;font-weight:800;z-index:2}
.pm-add.picked .pm-add-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================================
   GUEST READ-GATE (soft fade) + JOIN BAR  [dogwagg-guest-gate-2026-06-28]
   Guests only. Built entirely from theme tokens, so it re-themes with
   site_theme across light + every dark palette. JS adds .dw-walled when a
   guest is over their free-read limit; the server always renders full content
   (soft fade = no truncation = SEO intact).
   ============================================================================ */
/* faded tail of replies — only visible once JS marks the page walled */
body.dw-walled .readtail{
  max-height:152px; overflow:hidden; pointer-events:none; user-select:none;
  filter:blur(3px); opacity:.55;
  -webkit-mask-image:linear-gradient(#000 0, #000 26%, transparent 100%);
          mask-image:linear-gradient(#000 0, #000 26%, transparent 100%);
}
/* hide the duplicate guest reply CTA when the gate card is showing */
body.dw-walled .replybox{display:none}

/* the gate card */
.readgate{margin-top:18px}
body.dw-walled.dw-hastail .readgate{margin-top:-46px; position:relative; z-index:3}
.readgate-card{
  position:relative; overflow:hidden; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:30px 26px 26px;
}
.readgate-wm{position:absolute; right:-22px; bottom:-28px; width:154px; height:154px; color:var(--teal); opacity:.07; transform:rotate(-12deg); pointer-events:none}
.readgate-wm svg{width:100%; height:100%}
.readgate-pill{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--teal-d); background:var(--teal-l); padding:7px 12px; border-radius:var(--pill);
}
.readgate-pill svg{width:14px; height:14px}
.readgate-card h3{font-size:23px; letter-spacing:-.02em; margin-bottom:9px; color:var(--ink)}
.readgate-card p{color:var(--ink-2); font-size:15px; max-width:430px; margin:0 auto 20px; line-height:1.55}
.readgate-card p .hi{color:var(--ink); font-weight:600}
.readgate-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* sticky join bar */
body.dw-guest{padding-bottom:74px}
body.dw-guest.dw-bar-closed{padding-bottom:0}
.joinbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--nav-bg); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); box-shadow:0 -8px 30px -16px rgba(0,0,0,.4);
}
.dw-bar-closed .joinbar{display:none}
.joinbar-in{display:flex; align-items:center; gap:16px; max-width:var(--maxw); margin:0 auto; padding:12px 24px}
.joinbar-text{font-weight:600; font-size:14px; color:var(--ink)}
.joinbar-text span{display:block; font-weight:500; font-size:12.5px; color:var(--ink-2)}
.joinbar-actions{margin-left:auto; display:flex; align-items:center; gap:9px}
.joinbar .btn{padding:9px 16px; font-size:14px}
.joinbar-x{border:0; background:transparent; color:var(--ink-3); width:34px; height:34px; border-radius:9px; font-size:21px; line-height:1; cursor:pointer}
.joinbar-x:hover{background:var(--bg-2); color:var(--ink)}
@media (max-width:600px){
  .joinbar-in{flex-wrap:wrap; padding:10px 16px; gap:10px}
  .joinbar-text{flex-basis:100%}
  .joinbar-actions{width:100%}
  .joinbar-actions .btn{flex:1; justify-content:center}
  body.dw-guest{padding-bottom:120px}
}

/* dashboard sidebar: logout item */
.dw-navcol .dw-navsep{height:1px;background:var(--line);margin:9px 10px 6px}
.dw-navcol a.dw-navout:hover{color:#e0687a}
.dw-navcol a.dw-navout:hover .i{color:#e0687a}

/* admin mobile sidebar drawer trigger (hidden on desktop) */
.admin-burger{display:none;align-items:center;gap:9px;padding:9px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 14px/1 inherit;cursor:pointer;margin-bottom:14px;width:max-content}
.admin-burger .i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.admin-backdrop{display:none}

/* mobile ☰ menu: user links (hidden on desktop) */
.nav-mob{display:none}
.nav-mob-sep{height:1px;background:var(--line);margin:9px 0 5px}
.nav-links .nav-mob .nav-mob-cta{color:var(--teal-d);font-weight:600}
.nav-links .nav-mob .nav-mob-admin{color:var(--teal-d);font-weight:600}
.nav-links .nav-mob .nav-mob-out{color:#e0687a}

/* dog profile: keep action buttons intact + responsive */
.likebtn,.followbtn,.dfollowers{white-space:nowrap}
@media(max-width:560px){
.pcover{height:112px}
.phead{gap:12px;margin-top:-38px}
.pav{width:78px;height:78px;border-radius:18px;font-size:24px;border-width:3px}
.pname{font-size:1.3rem}
.pactions{gap:9px}
.pactions .likebtn,.pactions .followbtn{padding:8px 14px}
}