/* ============ Litmaps app — fresh coherent system (IG-grade dark) ============ */
:root{
  --bg:#000000;
  --line:#262626;
  --line-soft:#1c1c1c;
  --raised:#161616;
  --hover:#1a1a1a;
  --elev:#262626;
  --text:#f5f5f5;
  --text2:#a8a8a8;
  --text3:#737373;
  --flame:#ff6b35;
  --flame-deep:#e9411f;
  --flame-gold:#fcbc5c;
  --good:#3fb984;
  --rail:76px;
  --rail-open:252px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; line-height:1.5; font-size:14px;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#2e2e2e; border-radius:8px;}

/* ============ RAIL ============ */
.rail{position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:50; background:var(--bg);
  border-right:1px solid var(--line); display:flex; flex-direction:column; padding:14px 12px 18px;
  transition:width .22s cubic-bezier(.2,.8,.25,1); overflow:hidden; white-space:nowrap;}
.rail:hover{width:var(--rail-open); box-shadow:18px 0 50px -22px rgba(0,0,0,.85);}
.rail-logo{display:flex; align-items:center; gap:13px; padding:10px 12px 26px; min-height:62px;}
.rail-logo img{width:25px; height:31px; flex-shrink:0;}
.rail-logo .wm{font-family:'Bangers',cursive; font-size:24px; letter-spacing:.05em; transform:skewX(-7deg); padding-top:3px; opacity:0; transition:opacity .18s .04s;}
.rail:hover .rail-logo .wm{opacity:1;}
.rail-nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.ri{position:relative; display:flex; align-items:center; gap:15px; padding:13px; border-radius:10px; color:var(--text); font-size:15px;}
.ri svg{width:24px; height:24px; flex-shrink:0; color:var(--text);}
.ri:hover{background:var(--hover);}
.ri:hover svg{transform:scale(1.06);}
.ri svg{transition:transform .12s;}
.ri span{opacity:0; transition:opacity .18s .04s;}
.rail:hover .ri span{opacity:1;}
.ri.on{font-weight:700;}
.ri.on svg{stroke-width:2.6;}
.ri .ri-badge{position:absolute; left:31px; top:9px; background:var(--flame-deep); color:#fff; font-size:10px; font-weight:700;
  min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bg);}
.ri .ri-av{width:26px; height:26px; border-radius:50%; flex-shrink:0; margin-left:-1px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px;}
.ri.on .ri-av{outline:2px solid var(--text);}
.rail-foot{margin-top:auto;}

/* ============ CONTENT ============ */
.view{margin-left:var(--rail); min-height:100vh;}
.center{max-width:632px; margin:0 auto; padding:28px 16px 90px;}
.wide{max-width:960px; margin:0 auto; padding:32px 20px 90px;}
.full{height:100vh; overflow:hidden;}

/* section label */
.sec-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); margin:0 0 14px;}

/* ============ HOME: knock stories ============ */
.stories{display:flex; gap:18px; overflow-x:auto; padding:4px 2px 18px; scrollbar-width:none;}
.stories::-webkit-scrollbar{display:none;}
.story{display:flex; flex-direction:column; align-items:center; gap:7px; flex-shrink:0; background:none; border:none; color:var(--text); padding:0; width:74px;}
.story .ring{position:relative; width:66px; height:66px; border-radius:50%; padding:3px; display:block;
  background:linear-gradient(208deg,var(--flame-gold) 0%, var(--flame) 55%, var(--flame-deep) 100%);}
.story.quiet .ring{background:var(--line);}
.story .ring::after{content:''; position:absolute; inset:3px; border-radius:50%; border:3px solid var(--bg);}
.story .s-av{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:24px;}
.story .s-name{font-size:12px; color:var(--text); max-width:74px; overflow:hidden; text-overflow:ellipsis;}
.story .s-time{font-size:10.5px; color:var(--text3); margin-top:-4px;}
.story .ripple{position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--flame); opacity:0; pointer-events:none;}
.story .ripple.go{animation:srip .8s ease-out;}
@keyframes srip{0%{opacity:.7; transform:scale(1);}100%{opacity:0; transform:scale(1.7);}}
.story .s-av.knocking{animation:swob .55s ease;}
@keyframes swob{0%,100%{transform:rotate(0);}20%{transform:rotate(-7deg) scale(1.05);}45%{transform:rotate(7deg) scale(1.05);}70%{transform:rotate(-4deg);}}

/* invites */
.invites{border-top:1px solid var(--line-soft); margin-bottom:6px;}
.invite{display:flex; align-items:center; gap:13px; padding:13px 2px; border-bottom:1px solid var(--line-soft);}
.invite .iv-em{width:44px; height:44px; border-radius:12px; background:var(--raised); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0;}
.invite .iv-tx{flex:1; min-width:0;}
.invite .iv-t{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.invite .iv-s{font-size:12.5px; color:var(--text2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.invite .iv-a{display:flex; gap:6px; flex-shrink:0;}
.invite .iv-a button{border:none; border-radius:8px; font-weight:600; font-size:13px; padding:8px 14px;}
.iv-yes{background:var(--text); color:#000;}
.iv-yes:hover{background:#fff;}
.iv-dim{background:var(--raised); color:var(--text); border:1px solid var(--line) !important;}
.iv-dim:hover{background:var(--hover);}
.iv-no{background:none !important; color:var(--text2);}
.iv-no:hover{color:var(--text);}

/* ============ HOME: memory posts ============ */
.post{border-bottom:1px solid var(--line-soft); padding:16px 0 14px;}
.post-head{display:flex; align-items:center; gap:11px; padding-bottom:11px;}
.post-head .p-av{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0;}
.post-head .p-id{flex:1; min-width:0; font-size:13.5px;}
.post-head .p-id b{font-weight:600;}
.post-head .p-id .dot{color:var(--text3);}
.post-head .p-more{background:none; border:none; color:var(--text2); padding:6px; border-radius:8px;}
.post-head .p-more:hover{color:var(--text); background:var(--hover);}
.post-media{display:grid; grid-template-columns:2fr 1fr; grid-auto-rows:152px; gap:3px; border-radius:8px; overflow:hidden;}
.post-media .pm{background-size:cover; background-position:center;}
.post-media .pm:first-child{grid-row:span 2;}
.post-acts{display:flex; align-items:center; gap:4px; padding:8px 0 2px; margin-left:-8px;}
.post-acts button{background:none; border:none; color:var(--text); padding:8px; border-radius:8px; display:flex; align-items:center;}
.post-acts button svg{width:23px; height:23px;}
.post-acts button:hover{color:var(--text2);}
.post-acts .spacer{flex:1;}
.post-acts .lit{color:var(--flame);}
.post-acts .lit svg{fill:var(--flame);}
.post-cap{font-size:13.5px; line-height:1.45;}
.post-cap b{font-weight:600;}
.post-cap .with{color:var(--text2);}
.post-link{display:inline-block; font-size:13px; color:var(--text3); margin-top:5px;}
.post-link:hover{color:var(--text2);}
.lit-line{font-size:13px; font-weight:600; padding:4px 0 3px;}

/* ============ PLANS: messenger ============ */
.msgr{display:grid; grid-template-columns:368px minmax(0,1fr); height:100vh;}
.mlist{border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0;}
.mlist-head{display:flex; align-items:center; justify-content:space-between; padding:26px 22px 14px;}
.mlist-head h1{font-size:20px; font-weight:800; margin:0;}
.mlist-new{background:none; border:none; color:var(--text); padding:8px; border-radius:10px; display:flex;}
.mlist-new svg{width:24px; height:24px;}
.mlist-new:hover{background:var(--hover);}
.mlist-search{padding:0 22px 12px;}
.mlist-search input{width:100%; background:var(--raised); border:none; border-radius:10px; padding:10px 14px; color:var(--text); font-family:inherit; font-size:14px; outline:none;}
.mlist-search input::placeholder{color:var(--text3);}
.mlist-scroll{flex:1; overflow-y:auto; min-height:0; padding-bottom:14px;}
.msec{padding-top:14px;}
.msec-t{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); padding:0 22px 8px;}
.mrow{display:flex; align-items:center; gap:13px; padding:9px 22px; position:relative;}
.mrow:hover{background:var(--raised);}
.mrow.active{background:var(--raised);}
.mrow .m-em{width:52px; height:52px; border-radius:14px; background:var(--raised); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:25px; flex-shrink:0;}
.mrow.active .m-em, .mrow:hover .m-em{background:var(--hover);}
.mrow .m-av{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:21px; flex-shrink:0;}
.mrow .m-tx{flex:1; min-width:0;}
.mrow .m-t{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mrow .m-s{font-size:12.5px; color:var(--text2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mrow .m-s.unread{color:var(--text); font-weight:600;}
.mrow .m-meta{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0;}
.mrow .m-time{font-size:11.5px; color:var(--text3);}
.mrow .m-dot{width:8px; height:8px; border-radius:50%; background:var(--flame-deep);}

.thread{display:flex; flex-direction:column; min-height:0; min-width:0;}
.t-head{display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--line); flex-shrink:0;}
.t-head .t-back{display:none; color:var(--text); padding:4px; margin-left:-6px;}
.t-head .t-back svg{width:22px; height:22px;}
.t-head .t-em{width:44px; height:44px; border-radius:12px; background:var(--raised); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0;}
.t-head .t-av{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:18px; flex-shrink:0;}
.t-head .t-id{flex:1; min-width:0;}
.t-head .t-t{font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.t-head .t-s{font-size:12.5px; color:var(--text2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.t-head .t-act{display:flex; align-items:center; gap:4px; flex-shrink:0;}
.t-head .t-act a, .t-head .t-act button{background:none; border:none; color:var(--text); padding:8px; border-radius:10px; display:flex;}
.t-head .t-act svg{width:22px; height:22px;}
.t-head .t-act a:hover, .t-head .t-act button:hover{background:var(--hover);}
.t-roster{display:flex; flex-shrink:0; margin-right:4px;}
.t-roster .r-av{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:11px; border:2px solid var(--bg); margin-left:-9px;}

.t-scroll{flex:1; overflow-y:auto; min-height:0; padding:0 22px;}
.plan-card{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; background:var(--raised); border:1px solid var(--line-soft); border-radius:14px; padding:13px 16px; margin-top:16px;}
.plan-card .pc-row{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; white-space:nowrap;}
.plan-card .pc-row svg{width:15px; height:15px; color:var(--text2); flex-shrink:0;}
.plan-card a.pc-row:hover{color:var(--flame);}
.plan-card .pc-note{flex-basis:100%; font-size:13px; color:var(--text2); line-height:1.5; font-style:italic; border-top:1px solid var(--line-soft); padding-top:10px;}
.plan-card .pc-note i{font-style:normal; color:var(--text3); display:block; margin-top:3px; font-size:12px;}
.rsvp-chip{font-size:12px; font-weight:700; border-radius:999px; padding:5px 12px; background:rgba(63,185,132,.14); color:var(--good); white-space:nowrap;}
.rsvp-chip.maybe{background:var(--hover); color:var(--text2);}
.rsvp-btns{display:inline-flex; gap:6px;}
.rsvp-btns button{border:none; border-radius:8px; font-weight:600; font-size:12.5px; padding:7px 12px;}

.day-div{display:flex; align-items:center; gap:14px; margin:18px 0 4px;}
.day-div::before,.day-div::after{content:''; flex:1; height:1px; background:var(--line-soft);}
.day-div span{font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.08em;}
.msgs{display:flex; flex-direction:column; gap:12px; padding:14px 0 18px;}
.mgrp{display:flex; flex-direction:column; gap:2px;}
.mgrp.me{align-items:flex-end;}
.mgrp .m-name{font-size:11.5px; color:var(--text3); font-weight:600; margin:0 0 3px 46px;}
.mline{display:flex; align-items:flex-end; gap:9px; max-width:72%;}
.mgrp.me .mline{align-self:flex-end;}
.mline .b-av{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; flex-shrink:0;}
.mline .b-av.ghost{visibility:hidden;}
.bub{position:relative; background:var(--elev); border-radius:20px; padding:9px 14px; font-size:14px; line-height:1.45; color:var(--text);}
.mgrp:not(.me) .bub:not(.first){border-top-left-radius:6px;}
.mgrp:not(.me) .bub:not(.last){border-bottom-left-radius:6px;}
.mgrp.me .bub{background:linear-gradient(160deg,#e2571f 0%,#c43a17 100%); color:#fff;}
.mgrp.me .bub:not(.first){border-top-right-radius:6px;}
.mgrp.me .bub:not(.last){border-bottom-right-radius:6px;}
.bub.has-react{margin-bottom:13px;}
.bub .react{position:absolute; bottom:-13px; right:8px; background:var(--raised); border:1px solid var(--line); border-radius:999px; padding:1px 6px; font-size:11px; line-height:1.5;}
.mgrp.me .bub .react{right:auto; left:8px;}
.bub.typing{display:inline-flex; gap:4px; align-items:center; padding:14px 16px;}
.bub.typing span{width:6px; height:6px; border-radius:50%; background:var(--text3); animation:tdot 1.2s infinite;}
.bub.typing span:nth-child(2){animation-delay:.15s;}
.bub.typing span:nth-child(3){animation-delay:.3s;}
@keyframes tdot{0%,60%,100%{opacity:.35; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}
.seen{display:flex; justify-content:flex-end; align-items:center; gap:5px; font-size:11.5px; color:var(--text3); margin-top:2px;}
.seen .sv{width:15px; height:15px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:8.5px; font-weight:700;}
.dm-intro{display:flex; flex-direction:column; align-items:center; gap:3px; padding:34px 0 8px; text-align:center;}
.dm-intro .di-av{width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:31px; margin-bottom:8px;}
.dm-intro .di-n{font-size:16px; font-weight:700;}
.dm-intro .di-s{font-size:12.5px; color:var(--text2);}
.dm-intro .di-b{margin-top:10px; background:var(--raised); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:8px 15px; font-size:13px; font-weight:600;}
.dm-intro .di-b:hover{background:var(--hover);}

.composer{display:flex; align-items:center; gap:8px; margin:10px 22px 18px; border:1px solid var(--line); border-radius:999px; padding:5px 7px 5px 14px; flex-shrink:0;}
.composer .c-ic{background:none; border:none; color:var(--text); padding:7px; border-radius:50%; display:flex;}
.composer .c-ic svg{width:21px; height:21px;}
.composer .c-ic:hover{color:var(--text2);}
.composer input{flex:1; background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:14px; padding:8px 2px;}
.composer input::placeholder{color:var(--text3);}
.composer .c-send{background:none; border:none; color:var(--flame); font-weight:700; font-size:14px; padding:8px 12px; border-radius:999px;}
.composer .c-send:hover{color:#fff;}

/* ============ PROFILE ============ */
.prof{max-width:935px; margin:0 auto; padding:42px 20px 80px;}
.prof-head{display:flex; gap:48px; align-items:flex-start; padding:0 12px 38px;}
.prof-av{width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:56px; flex-shrink:0;}
.prof-main{flex:1; min-width:0; padding-top:6px;}
.prof-row1{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.prof-row1 h1{font-size:20px; font-weight:400; margin:0; letter-spacing:.01em;}
.prof-row1 .pbtn{background:var(--raised); border:1px solid transparent; color:var(--text); border-radius:9px; padding:8px 16px; font-size:13.5px; font-weight:600; white-space:nowrap;}
.prof-row1 .pbtn:hover{background:var(--hover);}
.prof-row1 .pbtn.lit{background:var(--text); color:#000;}
.prof-row1 .pbtn.lit:hover{background:#fff;}
.prof-stats{display:flex; gap:34px; padding:18px 0 14px; font-size:15px;}
.prof-stats span, .prof-stats a{white-space:nowrap;}
.prof-stats b{font-weight:700;}
.prof-stats span{color:var(--text2);}
.prof-name{font-size:14px; font-weight:700;}
.prof-bio{font-size:14px; line-height:1.5; margin-top:2px; max-width:430px;}
.prof-loc{font-size:13px; color:var(--text2); margin-top:2px; display:flex; align-items:center; gap:5px;}
.prof-loc svg{width:13px; height:13px;}
.prof-streak{display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:var(--raised); border:1px solid var(--line-soft); border-radius:999px; padding:7px 14px; font-size:13px; white-space:nowrap;}
.prof-streak b{font-weight:800;}

.hilites{display:flex; gap:26px; overflow-x:auto; padding:6px 12px 30px; scrollbar-width:none;}
.hilites::-webkit-scrollbar{display:none;}
.hilite{display:flex; flex-direction:column; align-items:center; gap:9px; flex-shrink:0; width:90px; background:none; border:none; color:var(--text); padding:0;}
.hilite .h-ring{width:80px; height:80px; border-radius:50%; padding:3px; background:var(--line); position:relative; display:block;}
.hilite .h-ring::after{content:''; position:absolute; inset:3px; border-radius:50%; border:3px solid var(--bg);}
.hilite .h-img{display:block; width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center;}
.hilite .h-t{font-size:12px; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hilite:hover .h-ring{background:linear-gradient(208deg,var(--flame-gold),var(--flame-deep));}

.prof-tabs{display:flex; justify-content:center; gap:50px; border-top:1px solid var(--line);}
.ptab{display:flex; align-items:center; gap:7px; padding:16px 2px; margin-top:-1px; border:none; background:none; color:var(--text3);
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-top:1px solid transparent;}
.ptab svg{width:13px; height:13px;}
.ptab.on{color:var(--text); border-top-color:var(--text);}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding-top:4px;}
.pgrid .pg{position:relative; aspect-ratio:1; background-size:cover; background-position:center; cursor:pointer; overflow:hidden;}
.pgrid .pg .pg-ov{position:absolute; inset:0; background:rgba(0,0,0,.42); opacity:0; transition:opacity .12s; display:flex; align-items:center; justify-content:center; gap:18px; font-weight:700; font-size:14.5px; color:#fff;}
.pgrid .pg:hover .pg-ov{opacity:1;}
.pgrid .pg .pg-ov svg{width:18px; height:18px; margin-right:6px; vertical-align:-3px;}
.pgrid .pg .pg-multi{position:absolute; top:10px; right:10px; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.pgrid .pg .pg-multi svg{width:18px; height:18px;}
.prof-empty{text-align:center; padding:60px 20px; color:var(--text2);}
.prof-empty .pe-t{font-size:22px; font-weight:800; color:var(--text); margin-bottom:6px;}
.prof-empty .pe-s{font-size:13.5px;}

/* friend list */
.flist{display:flex; flex-direction:column;}
.frow{display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:12px;}
.frow:hover{background:var(--raised);}
.frow .f-av{width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:20px; flex-shrink:0;}
.frow .f-tx{flex:1; min-width:0;}
.frow .f-n{font-size:14.5px; font-weight:600;}
.frow .f-s{font-size:12.5px; color:var(--text2); margin-top:1px;}
.frow .f-go{color:var(--text3);}
.frow .f-go svg{width:18px; height:18px;}

/* ============ DISCOVER ============ */
.disc-head{padding:6px 0 18px;}
.disc-head h1{font-size:24px; font-weight:800; margin:0 0 4px; letter-spacing:-.01em;}
.disc-head p{margin:0; color:var(--text2); font-size:13.5px;}
.searchbar{position:relative; margin:18px 0 6px;}
.searchbar svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text3); pointer-events:none;}
.searchbar input{width:100%; background:var(--raised); border:none; border-radius:12px; padding:13px 16px 13px 44px; color:var(--text); font-family:inherit; font-size:14.5px; outline:none;}
.searchbar input::placeholder{color:var(--text3);}
.chips{display:flex; gap:8px; overflow-x:auto; padding:14px 0 6px; scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0; background:var(--raised); border:1px solid transparent; color:var(--text); border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:600; white-space:nowrap;}
.chip:hover{background:var(--hover);}
.chip.on{background:var(--text); color:#000;}
.shelf{margin-top:30px;}
.shelf-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:13px;}
.shelf-head h2{font-size:17px; font-weight:700; margin:0;}
.shelf-head p{margin:2px 0 0; font-size:13px; color:var(--text3);}
.shelf-head a{font-size:13px; font-weight:600; color:var(--text2); white-space:nowrap;}
.shelf-head a:hover{color:var(--text);}
.railx{display:flex; gap:14px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none;}
.railx::-webkit-scrollbar{display:none;}
.railx .pcard{flex:0 0 224px;}
.cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; padding-top:6px;}
.pcard{display:block;}
.pcard .pc-img{position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; border:1px solid var(--line-soft);}
.pcard .pc-emoji{position:absolute; right:-12px; bottom:-16px; font-size:92px; line-height:1; opacity:.15; transform:rotate(-8deg); pointer-events:none;}
.pcard .pc-sheen{position:absolute; inset:0; background:linear-gradient(155deg,rgba(255,255,255,.06) 0%,transparent 40%), radial-gradient(120% 80% at 80% 115%, rgba(0,0,0,.4), transparent 60%); pointer-events:none;}
.pcard .pc-save{position:absolute; top:9px; right:9px; width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s;}
.pcard:hover .pc-save{opacity:1;}
.pcard .pc-save svg{width:15px; height:15px;}
.pcard .pc-save:hover{background:rgba(255,255,255,.25);}
.pcard .pc-save.on{opacity:1; background:var(--text); color:#000;}
.pcard .pc-save.on svg{fill:#000;}
.pcard .pc-n{font-size:14px; font-weight:600; margin-top:9px;}
.pcard .pc-m{font-size:12.5px; color:var(--text2); margin-top:1px;}
.pcard .pc-b{font-size:12.5px; color:var(--text3); margin-top:5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* ============ PLACE DETAIL ============ */
.place-top{display:flex; gap:40px; align-items:flex-start; padding-bottom:30px;}
.place-info{flex:1; min-width:0;}
.place-info h1{font-size:30px; font-weight:800; letter-spacing:-.02em; margin:6px 0 6px; line-height:1.1;}
.place-meta{font-size:14px; color:var(--text2);}
.place-desc{font-size:15px; line-height:1.65; margin:16px 0 0; max-width:560px;}
.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px;}
.tag{background:var(--raised); border-radius:999px; padding:6px 13px; font-size:12.5px; color:var(--text2); white-space:nowrap;}
.tag:hover{color:var(--text); background:var(--hover);}
.place-acts{display:flex; gap:9px; margin-top:24px;}
.place-acts .pbtn{background:var(--raised); border:none; color:var(--text); border-radius:10px; padding:11px 18px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.place-acts .pbtn svg{width:16px; height:16px;}
.place-acts .pbtn:hover{background:var(--hover);}
.place-acts .pbtn.lit{background:var(--text); color:#000;}
.place-acts .pbtn.lit:hover{background:#fff;}
.place-acts .pbtn.lit.on{background:var(--raised); color:var(--text);}
.sources{margin-top:22px;}
.sources a{display:block; font-size:12.5px; color:var(--text3); margin-top:3px; text-decoration:underline; text-underline-offset:2px; text-decoration-color:#333;}
.sources a:hover{color:var(--text2);}
.back{display:inline-flex; align-items:center; gap:8px; color:var(--text2); font-size:13.5px; font-weight:600; margin-bottom:14px;}
.back svg{width:16px; height:16px;}
.back:hover{color:var(--text);}
.page-h1{font-size:24px; font-weight:800; letter-spacing:-.01em; margin:0 0 18px;}

/* notif card */
.notif{position:fixed; left:50%; bottom:28px; transform:translate(-50%,140px); z-index:95; width:min(380px,92vw);
  background:rgba(22,22,22,.92); backdrop-filter:blur(20px); border:1px solid var(--line); border-radius:16px; padding:12px 14px;
  display:flex; gap:12px; align-items:center; box-shadow:0 24px 60px -16px rgba(0,0,0,.9); opacity:0; pointer-events:none;
  transition:transform .4s cubic-bezier(.18,.9,.3,1.2), opacity .3s;}
.notif.show{transform:translate(-50%,0); opacity:1;}
.notif .n-ic{width:40px; height:40px; border-radius:11px; background:linear-gradient(208deg,var(--flame-gold),var(--flame-deep)); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.notif .n-ic img{width:18px; height:22px;}
.notif .n-tx{flex:1; min-width:0;}
.notif .n-top{display:flex; align-items:baseline; gap:8px;}
.notif .n-top b{font-size:13.5px; font-weight:700;}
.notif .n-top small{font-size:11.5px; color:var(--text3);}
.notif .n-bd{font-size:13.5px; color:var(--text2); margin-top:1px;}
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,120px); z-index:90; background:rgba(26,26,26,.95); border:1px solid var(--line); border-radius:12px; padding:11px 17px; font-size:13.5px; font-weight:600; opacity:0; transition:transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .3s;}
.toast.show{transform:translate(-50%,0); opacity:1;}

/* sign-in */
.gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.gate-card{width:min(380px,92vw); text-align:center; border:1px solid var(--line); border-radius:20px; padding:40px 30px 30px; background:var(--bg);}
.gate-card img{width:34px; margin-bottom:14px;}
.gate-card h2{font-size:21px; font-weight:800; margin:0 0 6px;}
.gate-card p{font-size:13.5px; color:var(--text2); margin:0 0 22px; line-height:1.55;}
.gate-card .ab{display:block; width:100%; border:none; border-radius:11px; padding:13px; font-size:14px; font-weight:700; margin-bottom:9px;}
.gate-card .ab.main{background:var(--text); color:#000;}
.gate-card .ab.alt{background:var(--raised); color:var(--text); border:1px solid var(--line);}
.gate-card .fine{font-size:11.5px; color:var(--text3); margin-top:12px;}

/* ============ MAP (Google-Maps-style: panel + bare emoji pins) ============ */
.mapview{position:relative; height:100vh; overflow:hidden; display:grid; grid-template-columns:372px minmax(0,1fr);}
.mpanel{border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--bg); z-index:2;}
.mp-head{padding:22px 20px 12px;}
.mp-head h1{font-size:20px; font-weight:800; margin:0 0 12px;}
.mp-search{display:flex; align-items:center; gap:10px; background:var(--raised); border-radius:11px; padding:11px 15px;}
.mp-search svg{width:15px; height:15px; color:var(--text3); flex-shrink:0;}
.mp-search input{flex:1; background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:14px;}
.mp-search input::placeholder{color:var(--text3);}
.mp-count{font-size:12px; color:var(--text3); font-weight:600; padding:12px 22px 6px;}
.mp-scroll{flex:1; overflow-y:auto; min-height:0; padding:0 10px 16px;}
.mp-row{display:flex; align-items:center; gap:13px; padding:10px 12px; border-radius:12px; width:100%; background:none; border:none; color:var(--text); text-align:left; font-family:inherit; cursor:pointer;}
.mp-row:hover{background:var(--raised);}
.mp-row.sel{background:var(--raised);}
.mp-row .r-art{position:relative; width:52px; height:52px; border-radius:12px; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.mp-row .r-art i{font-style:normal; font-size:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.mp-row .r-tx{flex:1; min-width:0;}
.mp-row .r-n{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mp-row .r-m{font-size:12px; color:var(--text2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mp-row .r-b{font-size:12px; color:var(--text3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* detail mode */
.mp-detail{flex:1; overflow-y:auto; min-height:0;}
.mp-back{display:flex; align-items:center; gap:9px; padding:16px 20px 2px; color:var(--text2); font-size:13px; font-weight:600; background:none; border:none; font-family:inherit; cursor:pointer;}
.mp-back svg{width:16px; height:16px;}
.mp-back:hover{color:var(--text);}
.mp-hero{position:relative; height:170px; margin:12px 16px 0; border-radius:14px; overflow:hidden;}
.mp-hero .ph-em{position:absolute; right:-14px; bottom:-20px; font-size:110px; line-height:1; opacity:.2; transform:rotate(-8deg);}
.mp-hero .ph-sheen{position:absolute; inset:0; background:linear-gradient(155deg,rgba(255,255,255,.07),transparent 40%), radial-gradient(120% 80% at 80% 115%, rgba(0,0,0,.45), transparent 60%);}
.mp-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:5px 16px 0;}
.mp-gallery .g{position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.mp-gallery .g i{font-style:normal; font-size:26px; opacity:.3; transform:rotate(-8deg);}
.mp-body{padding:16px 20px 26px;}
.mp-kicker{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3);}
.mp-name{font-size:21px; font-weight:800; letter-spacing:-.01em; margin-top:3px; line-height:1.15;}
.mp-meta{font-size:13px; color:var(--text2); margin-top:3px;}
.mp-actions{display:flex; gap:8px; margin-top:15px; flex-wrap:wrap;}
.mp-actions .pbtn{background:var(--raised); border:none; color:var(--text); border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-family:inherit; cursor:pointer;}
.mp-actions .pbtn svg{width:15px; height:15px;}
.mp-actions .pbtn:hover{background:var(--hover);}
.mp-actions .pbtn.lit{background:var(--text); color:#000;}
.mp-actions .pbtn.lit:hover{background:#fff;}
.mp-actions .pbtn.lit.on{background:var(--raised); color:var(--text);}
.mp-blurb{font-size:14px; line-height:1.6; margin-top:16px;}
.mp-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;}
.mp-srcs{margin-top:18px;}
.mp-srcs a{display:block; font-size:12px; color:var(--text3); margin-top:3px; text-decoration:underline; text-underline-offset:2px; text-decoration-color:#333;}
.mp-srcs a:hover{color:var(--text2);}
.mp-full{display:inline-block; margin-top:18px; font-size:13px; font-weight:700; color:var(--text2);}
.mp-full:hover{color:var(--text);}

/* map area */
.mstage{position:relative; min-width:0;}
#lmap{position:absolute; inset:0; background:#0a0d11;}
.leaflet-container{font-family:var(--font); background:#0a0d11;}
.map-chips{position:absolute; top:14px; left:14px; right:14px; z-index:800; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; pointer-events:auto;}
.map-chips::-webkit-scrollbar{display:none;}
.mchip{flex-shrink:0; display:inline-flex; align-items:center; gap:7px; background:rgba(10,10,10,.85); backdrop-filter:blur(14px); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; font-family:inherit;}
.mchip:hover{background:rgba(26,26,26,.92);}
.mchip.on{background:var(--text); border-color:var(--text); color:#000;}
.mchip .n{font-size:11px; color:var(--text3); font-weight:700;}
.mchip.on .n{color:#555;}

/* bare emoji pins with labels (google-style) */
.lm-wrap{background:none; border:none;}
.leaflet-marker-icon:hover{z-index:9999 !important;}
.lm-pin{position:relative; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:transform .12s; transform-origin:14px center;}
.lm-pin i{font-style:normal; font-size:21px; line-height:1; filter:drop-shadow(0 2px 5px rgba(0,0,0,.85));}
.lm-pin b{font-size:11px; font-weight:600; color:#e8e8e8; letter-spacing:.01em; display:none;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,1);}
.lm-labels .lm-pin b{display:block;}
.lm-wrap:hover .lm-pin b{display:block;}
.lm-wrap.sel .lm-pin b{display:block;}
.lm-wrap:hover .lm-pin{transform:scale(1.18);}
.lm-wrap.dim{pointer-events:none;}
.lm-wrap.dim .lm-pin{opacity:.13; filter:grayscale(.8);}
.lm-wrap.sel .lm-pin{transform:scale(1.3);}
.lm-wrap.sel .lm-pin i{filter:drop-shadow(0 2px 6px rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(255,107,53,.55));}
.lm-wrap.sel .lm-pin b{color:var(--flame-gold);}

/* leaflet chrome */
.leaflet-bar{border:none !important; box-shadow:0 8px 24px -8px rgba(0,0,0,.8) !important;}
.leaflet-bar a{background:#141414 !important; color:#e8e8e8 !important; border-bottom:1px solid #262626 !important; width:34px !important; height:34px !important; line-height:34px !important;}
.leaflet-bar a:first-child{border-radius:10px 10px 0 0 !important;}
.leaflet-bar a:last-child{border-radius:0 0 10px 10px !important; border-bottom:none !important;}
.leaflet-bar a:hover{background:#1f1f1f !important;}
.leaflet-control-attribution{background:rgba(0,0,0,.55) !important; color:#5a5a5a !important; font-size:9.5px !important;}
.leaflet-control-attribution a{color:#787878 !important;}

@media(max-width:900px){
  .mapview{grid-template-columns:1fr;}
  .mpanel{position:absolute; left:0; top:0; bottom:0; width:min(372px, 88vw); transform:translateX(-104%); transition:transform .22s; box-shadow:24px 0 60px -20px rgba(0,0,0,.9);}
  .mapview.mp-open .mpanel{transform:none;}
  .mp-toggle{position:absolute; left:14px; bottom:16px; z-index:850; display:inline-flex; align-items:center; gap:8px; background:rgba(10,10,10,.9); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:10px 16px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer;}
}
@media(min-width:901px){ .mp-toggle{display:none;} }

/* responsive */
@media(max-width:900px){
  .prof-head{gap:26px;}
  .prof-av{width:96px; height:96px; font-size:38px;}
  .msgr{grid-template-columns:1fr;}
  .msgr.sel .mlist{display:none;}
  .msgr:not(.sel) .thread{display:none;}
  .t-head .t-back{display:flex;}
  .map-search{width:100%;}
}
@media(max-width:700px){
  :root{--rail:0px;}
  .rail{display:none;}
  .center,.wide{padding-top:18px;}
}

/* ============ production additions (real photos + real auth) ============ */
/* real-photo place cards: photo replaces the gradient, emoji badge moves subtle */
.pc-img.photo{background-size:cover; background-position:center;}
.pc-img.photo .pc-emoji{display:none;}
.pc-img.photo .pc-sheen{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);}
.mp-hero.photo{background-size:cover; background-position:center;}
.mp-hero.photo .ph-em{display:none;}
.mp-gallery .g.photo{background-size:cover; background-position:center;}
.mp-gallery .g.photo i{display:none;}
.r-art.photo{background-size:cover; background-position:center;}
.r-art.photo i{display:none;}

/* gate: real sign-in (Google + phone OTP) */
.gate-card .ab:disabled{opacity:.55; cursor:default;}
.otp{display:none; margin-top:4px;}
.otp.open{display:block;}
.otp input{width:100%; background:var(--raised); border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--text);
  font-family:inherit; font-size:14px; outline:none; margin-bottom:9px; text-align:center; letter-spacing:.03em;}
.otp input::placeholder{color:var(--text3); letter-spacing:0;}
.gate-err{font-size:12.5px; color:#e5677e; margin:2px 0 8px; min-height:16px;}

/* logged-out rail: minimal (logo + public nav + log in) */
.rail.guest .ri-badge{display:none;}