/* =====================================================================
   LinkPoll — app.css   (the social network for polls)
   Identity: warm off-white canvas · near-black ink · lime accent.
   Display serif = Fraunces · UI sans = Hanken Grotesk.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,600;1,9..144,900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f3f1ea; --panel:#ffffff; --ink:#15140f; --muted:#76715f; --soft:#9a9484;
  --line:#e7e2d6; --line-2:#efeada;
  --lime:#c2f23a; --lime-d:#a7d825; --dark:#131419; --dark-2:#1c1d24;
  --red:#ef4444; --amber:#f59e0b; --heart:#f43f6b; --green:#16a34a;
  --chip:#f1ede2; --card:#ffffff;
  --invert:#15140f; --invert-fg:#ffffff;   /* dark surface w/ light text — flips in dark mode */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --radius:18px; --shadow:0 1px 2px rgba(21,20,15,.04),0 8px 30px rgba(21,20,15,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;color:inherit}
::placeholder{color:var(--soft)}
.serif{font-family:var(--serif)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#d9d3c4;border-radius:99px;border:3px solid var(--bg)}

/* ---------------- shared bits ---------------- */
.btn{cursor:pointer;border:none;border-radius:99px;font-weight:700;font-size:14px;
  padding:11px 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s,filter .15s,background .15s}
.btn:active{transform:scale(.97)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{filter:brightness(1.04)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark .i-lime{color:var(--lime)}
.btn-dark:hover{filter:brightness(1.15)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-block{width:100%}
.pill{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);
  border-radius:99px;padding:3px 11px;font-size:12px;font-weight:600;color:var(--muted)}

.av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-family:var(--serif);font-weight:900;overflow:hidden;user-select:none;background:var(--ink)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.s48{width:48px;height:48px;font-size:18px}
.av.s40{width:44px;height:44px;font-size:16px}
.av.s34{width:34px;height:34px;font-size:13px}
.av.s30{width:30px;height:30px;font-size:12px}
.av.s64{width:64px;height:64px;font-size:24px}

.badge{background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:99px;
  min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center}

/* =====================================================================
   APP LAYOUT — three columns
   ===================================================================== */
.app{display:grid;grid-template-columns:264px minmax(0,1fr) 344px;gap:26px;
  max-width:1340px;margin:0 auto;padding:0 22px;align-items:start}

/* ----- left sidebar ----- */
.side{position:sticky;top:0;height:100vh;padding:22px 8px 18px 4px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:6px 12px;margin-bottom:22px}
.brand .logo{width:42px;height:42px;border-radius:13px;background:var(--ink);display:grid;place-items:center;
  font-family:var(--serif);font-weight:900;font-size:18px;color:var(--lime);letter-spacing:-.04em}
.brand b{font-family:var(--serif);font-weight:900;font-size:25px;letter-spacing:-.03em}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:13px;
  font-weight:600;font-size:15.5px;color:var(--ink);position:relative;transition:background .12s}
.nav a .ico{width:22px;text-align:center;font-size:18px;flex:none}
.nav a:hover{background:#ebe7da}
.nav a.active{background:var(--ink);color:#fff}
.nav a .nbadge{margin-left:auto}
.nav .divide{height:1px;background:var(--line);margin:12px 14px}
.side .grow{flex:1}
.side .cta{margin:6px 10px 14px}
.userchip{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:14px;cursor:pointer;margin:0 6px}
.userchip:hover{background:#ebe7da}
.userchip .who{line-height:1.15;min-width:0}
.userchip .who b{font-weight:700;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userchip .who span{font-size:12.5px;color:var(--muted)}
.userchip .dots{margin-left:auto;color:var(--soft);font-weight:800}

/* ----- center column ----- */
.main{padding:18px 0 60px;min-height:100vh}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);padding:0 4px;margin-bottom:4px}
.tabs button{background:none;border:none;cursor:pointer;font-family:var(--serif);font-weight:700;font-size:16px;
  color:var(--soft);padding:14px 0 16px;position:relative}
.tabs button.active{color:var(--ink)}
.tabs button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--lime);border-radius:99px}

.stats{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin:16px 0;overflow:hidden}
.stats .stat{padding:16px;text-align:center;border-right:1px solid var(--line)}
.stats .stat:last-child{border-right:none}
.stats .stat b{font-family:var(--serif);font-weight:900;font-size:24px;letter-spacing:-.02em;display:block}
.stats .stat span{font-size:12.5px;color:var(--muted)}

/* ----- poll card ----- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px 14px;margin-bottom:16px;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phead{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.phead .who b{font-family:var(--sans);font-weight:700;font-size:15px}
.phead .who .h{color:var(--muted);font-weight:500;font-size:13px}
.phead .who .sub{font-size:12.5px;color:var(--soft);margin-top:1px}
.phead .cat{margin-left:auto}
.q{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-.01em;margin-bottom:14px;cursor:default}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{position:relative;cursor:pointer;border:1.6px solid var(--line);border-radius:13px;
  padding:13px 16px;font-weight:600;font-size:14.5px;background:var(--panel);overflow:hidden;
  transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--ink)}
.opt .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--lime);opacity:.32;z-index:0;
  transition:width .9s cubic-bezier(.2,.8,.2,1)}
.opt.mine .fill{background:var(--lime);opacity:.55}
.opt .lbl{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px;align-items:center}
.opt .pct{font-family:var(--serif);font-weight:900}
.opt.voted{cursor:default}
.opt.voted:hover{border-color:var(--line)}
.opt.mine{border-color:var(--ink)}
.opt .tick{display:none}
.opt.mine .tick{display:inline}

.pmeta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin:13px 2px 0}
.pmeta .clock{color:var(--amber);font-weight:700}
.pmeta .live{color:var(--red);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.pmeta .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px rgba(239,68,68,.18);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
.pmeta .dot{color:var(--line)}

.pacts{display:flex;align-items:center;gap:6px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2)}
.act{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--muted);font-weight:600;font-size:13.5px;padding:7px 10px;border-radius:99px;transition:background .12s,color .12s}
.act:hover{background:#f3efe3;color:var(--ink)}
.act.on-heart{color:var(--heart)}
.act.on-save{color:var(--ink)}
.act .ico{font-size:16px}
.pacts .spacer{flex:1}
.act.count{color:var(--soft);cursor:default}
.act.count:hover{background:none;color:var(--soft)}

/* inline comments */
.comments{margin-top:12px;border-top:1px solid var(--line-2);padding-top:12px;display:none}
.comments.open{display:block}
.cbox{display:flex;gap:9px;margin-bottom:12px}
.cbox textarea{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;font-size:14px;resize:none;min-height:40px}
.cbox textarea:focus{outline:none;border-color:var(--lime-d)}
.citem{display:flex;gap:9px;padding:8px 0}
.citem .cb b{font-size:13.5px}.citem .cb .ct{font-size:11.5px;color:var(--soft);margin-left:6px}
.citem .cb p{font-size:14px;margin-top:2px;white-space:pre-wrap}

/* ----- right rail ----- */
.rail{position:sticky;top:0;height:100vh;overflow-y:auto;padding:18px 0 40px;display:flex;flex-direction:column;gap:18px}
.search{position:relative}
.search input{width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:99px;
  padding:11px 16px 11px 40px;font-size:14px}
.search input:focus{outline:none;border-color:var(--lime-d)}
.search .mag{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--soft)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 4px}
.box h4{font-family:var(--serif);font-weight:900;font-size:17px;padding:12px 14px 8px}
.trend{display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:12px;cursor:pointer}
.trend:hover{background:#f3efe3}
.trend .rank{font-family:var(--serif);font-weight:900;color:var(--soft);width:14px}
.trend .t b{font-weight:800;font-size:14.5px;display:block}
.trend .t span{font-size:12px;color:var(--muted)}
.trend .arr{margin-left:auto;font-weight:800}
.arr.up{color:var(--green)}.arr.down{color:var(--soft)}

.lp-head{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:900;font-size:17px;padding:4px 4px 10px}
.lp-head .d{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.livecard{background:var(--chip);border-radius:14px;padding:12px 14px;margin-bottom:9px;cursor:pointer}
.livecard:hover{background:#eae5d6}
.livecard b{font-weight:700;font-size:14px;display:flex;gap:7px;align-items:flex-start}
.livecard b .d{width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:6px;flex:none}
.livecard span{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;margin-top:5px}

.sug{display:flex;align-items:center;gap:11px;padding:9px 8px}
.sug .who b{font-weight:700;font-size:14px;display:block}
.sug .who span{font-size:12px;color:var(--muted)}
.sug .btn{margin-left:auto}

/* =====================================================================
   AUTH (split screen)
   ===================================================================== */
.auth{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1fr;z-index:100;background:var(--panel)}
.auth-left{background:var(--dark);color:#fff;padding:42px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-left::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,242,58,.16),transparent 65%);right:-160px;top:-120px}
.auth-left .wm{font-family:var(--serif);font-weight:900;font-size:26px}
.auth-left .wm em{color:var(--lime);font-style:normal}
.auth-hero{margin-top:auto}
.auth-hero h1{font-family:var(--serif);font-weight:900;font-size:54px;line-height:1.02;letter-spacing:-.03em}
.auth-hero h1 em{color:var(--lime);font-style:italic}
.auth-hero p{color:#b9b7c2;font-size:15px;margin-top:16px;max-width:360px}
.auth-stats{display:flex;gap:34px;margin-top:30px}
.auth-stats b{font-family:var(--serif);font-weight:900;font-size:26px;color:var(--lime);display:block}
.auth-stats span{font-size:12.5px;color:#9b99a6}
.auth-right{display:flex;align-items:center;justify-content:center;padding:30px}
.auth-form{width:100%;max-width:380px}
.auth-form h2{font-family:var(--serif);font-weight:900;font-size:32px;letter-spacing:-.02em}
.auth-form .lead{color:var(--muted);font-size:14.5px;margin:6px 0 22px}
.seg{display:flex;background:var(--chip);border-radius:12px;padding:5px;margin-bottom:18px}
.seg button{flex:1;border:none;background:none;cursor:pointer;border-radius:9px;padding:9px 0;font-weight:700;font-size:14px;color:var(--muted)}
.seg button.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.lab{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin:14px 0 6px;display:block}
.inp{width:100%;background:#eef1fb;border:1.5px solid transparent;border-radius:12px;padding:13px 15px;font-size:15px}
.inp:focus{outline:none;border-color:var(--lime-d);background:#fff}
.pw{position:relative}
.pw .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--soft);font-size:16px}
.forgot{display:block;text-align:right;color:#3b6fd6;font-size:13px;font-weight:600;margin:9px 2px 0;cursor:pointer}
.ordiv{display:flex;align-items:center;gap:12px;color:var(--soft);font-size:12px;margin:18px 0}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line)}
.social{width:100%;background:var(--chip);border:1.5px solid var(--line);border-radius:12px;padding:12px;font-weight:700;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:10px}
.social:hover{background:#eae5d6}
.demo{text-align:center;font-size:12.5px;color:var(--muted);margin-top:14px}
.demo code{background:var(--chip);padding:2px 7px;border-radius:6px;font-size:12px}

/* =====================================================================
   MODAL (create poll)
   ===================================================================== */
.scrim{position:fixed;inset:0;background:rgba(21,20,15,.5);backdrop-filter:blur(2px);z-index:120;
  display:grid;place-items:center;padding:20px;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--panel);border-radius:22px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.modal .mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal .mhead h3{font-family:var(--serif);font-weight:900;font-size:24px}
.modal .close{background:var(--chip);border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px;color:var(--muted)}
.modal .close:hover{background:#e6e0d0}
.f-lab{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--muted);text-transform:uppercase;margin:14px 0 7px;display:block}
.field{width:100%;background:var(--chip);border:1.5px solid transparent;border-radius:12px;padding:12px 14px;font-size:15px}
.field:focus{outline:none;border-color:var(--lime-d);background:#fff}
textarea.field{resize:vertical;min-height:60px}
.opt-edit{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.opt-edit .grip{color:var(--soft);cursor:grab;font-size:16px}
.opt-edit .field{flex:1}
.opt-edit .rm{background:none;border:none;cursor:pointer;color:var(--soft);font-size:16px;padding:4px}
.opt-edit .rm:hover{color:var(--red)}
.add-opt{width:100%;background:none;border:1.6px dashed var(--line);border-radius:12px;padding:11px;cursor:pointer;
  font-weight:700;font-size:14px;color:var(--muted)}
.add-opt:hover{border-color:var(--ink);color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2376715f' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.set-row{display:flex;align-items:center;gap:10px;padding:11px 2px}
.set-row .ico{width:20px;text-align:center;color:var(--muted)}
.set-row .t{font-weight:600;font-size:14.5px;flex:1}
.toggle{width:44px;height:25px;border-radius:99px;background:#d8d2c4;border:none;cursor:pointer;position:relative;flex:none;transition:background .15s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .15s}
.toggle.on{background:var(--ink)}
.toggle.on::after{left:22px}
.mfoot{display:flex;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.mfoot .btn{flex:1;padding:13px}

/* =====================================================================
   SETTINGS
   ===================================================================== */
.settings-grid{display:grid;grid-template-columns:200px 1fr;gap:26px}
.acct{position:sticky;top:18px}
.acct h3{font-family:var(--serif);font-weight:900;font-size:20px;padding:6px 12px 14px}
.acct a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;font-weight:600;font-size:14.5px;cursor:pointer}
.acct a:hover{background:#ebe7da}
.acct a.active{background:var(--ink);color:#fff}
.acct a.danger{color:var(--red)}
.acct .ico{width:18px;text-align:center}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:18px}
.panel h2{font-family:var(--serif);font-weight:900;font-size:22px}
.panel .desc{color:var(--muted);font-size:14px;margin:4px 0 20px}
.avrow{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:20px}
.avrow .meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f label{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.f{margin-bottom:16px}
.swatches{display:flex;gap:12px}
.sw{width:42px;height:42px;border-radius:50%;cursor:pointer;border:3px solid transparent}
.sw.sel{border-color:var(--lime)}

.page-title{font-family:var(--serif);font-weight:900;font-size:26px;padding:10px 4px 18px}
.empty{text-align:center;color:var(--muted);padding:60px 20px}
.empty .big{font-size:40px}.empty p{margin-top:10px}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);
  background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:12px 20px;border-radius:99px;
  opacity:0;pointer-events:none;transition:all .25s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* popover menu */
.menu{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:6px;z-index:150;min-width:170px}
.menu button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:10px 13px;
  border-radius:9px;font-size:14px;font-weight:600}
.menu button:hover{background:var(--chip)}
.menu button.danger{color:var(--red)}

/* ---------------- responsive ---------------- */
.tabbar{display:none}
@media(max-width:1100px){
  .app{grid-template-columns:240px minmax(0,1fr)}
  .rail{display:none}
}
@media(max-width:820px){
  .app{grid-template-columns:1fr;padding:0 12px}
  .side{display:none}
  .main{padding:14px 0 84px}
  .settings-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);border-top:1px solid var(--line);justify-content:space-around;
    padding:9px 0 calc(9px + env(safe-area-inset-bottom))}
  .tabbar a{font-size:22px;color:var(--muted);padding:4px 16px;border-radius:12px}
  .tabbar a.active{color:var(--ink)}
  .tabbar .mk{background:var(--lime);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-top:-22px;box-shadow:var(--shadow)}
  .auth{grid-template-columns:1fr}
  .auth-left{display:none}
}
@media(max-width:520px){
  .auth-form{max-width:100%}
  .q{font-size:19px}
}

/* =====================================================================
   ADDITIONS for the live (backend) version: profiles, poll detail
   ===================================================================== */
.back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:none;
  border-radius:99px;padding:9px 16px 9px 13px;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer;margin:6px 4px 16px;transition:background .15s,transform .1s}
.back-btn:hover{background:var(--line)}
.back-btn:active{transform:scale(.97)}

.profile-head{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;margin-bottom:18px}
.profile-top{display:flex;gap:18px;align-items:flex-start}
.profile-top .info{flex:1;min-width:0}
.profile-top h1{font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.05}
.profile-top .handle{color:var(--muted);font-size:14.5px}
.profile-bio{margin-top:12px;font-size:15px}
.profile-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;color:var(--muted);font-size:13.5px}
.profile-meta a{color:#3b6fd6;font-weight:600}
.profile-stats{display:flex;gap:22px;margin-top:16px;font-size:14.5px}
.profile-stats b{font-family:var(--serif);font-weight:900}
.poll-detail .card{border-width:1px}
.detail-comments{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.detail-comments h3{font-family:var(--serif);font-weight:900;font-size:18px;margin-bottom:14px}
.skeleton{height:140px;border-radius:var(--radius);background:linear-gradient(90deg,#ece7da,#f3efe4,#ece7da);
  background-size:200% 100%;animation:sk 1.2s infinite;margin-bottom:14px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.phead .who b{cursor:pointer}.phead .who b:hover{text-decoration:underline}
.av-link{cursor:pointer}

/* =====================================================================
   RESPONSIVE OVERHAUL + UX POLISH  (mobile hamburger drawer, etc.)
   This block is appended last so it takes precedence.
   ===================================================================== */
html{scroll-behavior:auto}
:focus-visible{outline:2px solid var(--lime-d);outline-offset:2px}
body.locked{position:fixed;left:0;right:0;width:100%;height:auto;min-height:100%;overflow-y:visible}

/* device-friendly: only apply lift/hover on real hover devices */
@media (hover:none){
  .link:hover,.opt:hover,.btn:hover,.act:hover,.trend:hover,.livecard:hover{transform:none}
}

/* hidden until mobile */
.topbar{display:none}
.burger{display:none}
.nav-scrim{display:none}
.auth-mobile-brand{display:none}

/* ---- TABLET: keep sidebar, drop right rail ---- */
@media (max-width:1100px){
  .app{grid-template-columns:236px minmax(0,1fr);gap:22px}
  .rail{display:none}
}

/* ---- MOBILE: hamburger drawer + top bar ---- */
@media (max-width:820px){
  .app{grid-template-columns:1fr;gap:0;padding:0;max-width:100%}
  .main{padding:14px 14px 64px}

  /* top bar */
  .topbar{
    display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:95;
    background:rgba(243,241,234,.9);backdrop-filter:saturate(1.4) blur(12px);
    border-bottom:1px solid var(--line);
    padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top));
  }
  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;border:none;background:none;cursor:pointer;border-radius:12px;flex:none}
  .burger:active{background:#e9e4d6}
  .burger span{display:block;width:21px;height:2.5px;background:var(--ink);border-radius:3px;margin:0 auto;
    transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .2s}
  .burger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.on span:nth-child(2){opacity:0}
  .burger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .tb-brand{flex:1;display:flex;align-items:center;gap:9px;text-decoration:none;
    font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:-.03em;color:var(--ink)}
  .tb-brand .logo{width:34px;height:34px;border-radius:10px;background:var(--ink);display:grid;place-items:center;
    font-family:var(--serif);font-weight:900;font-size:15px;color:var(--lime);letter-spacing:-.04em}
  .tb-right .btn{padding:9px 15px}

  /* sidebar becomes an off-canvas drawer */
  .side{
    display:flex !important;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;height:100dvh;width:286px;max-width:84vw;
    background:var(--panel);border-right:1px solid var(--line);
    box-shadow:10px 0 50px rgba(21,20,15,.22);
    z-index:130;transform:translateX(-104%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    padding:16px 12px calc(16px + env(safe-area-inset-bottom));overflow-y:auto;
  }
  .side.open{transform:none}
  .side .brand{margin-bottom:14px}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(21,20,15,.5);
    z-index:120;opacity:0;pointer-events:none;transition:opacity .3s}
  .nav-scrim.show{opacity:1;pointer-events:auto}
  .nav a{padding:13px 14px;font-size:16px}     /* bigger touch targets */
  .tabbar{display:none !important}

  /* feed + headings scale down a touch */
  .tabs{gap:18px;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{font-size:15px;white-space:nowrap}
  .stats .stat{padding:13px 8px}
  .stats .stat b{font-size:21px}
}

/* ---- SMALL PHONES ---- */
@media (max-width:560px){
  .main{padding:12px 11px 60px}
  .card{padding:15px 15px 12px;border-radius:16px}
  .q{font-size:18px}
  .page-title{font-size:22px;padding:8px 2px 14px}
  .phead .who b{font-size:14.5px}
  .pacts{gap:0}
  .act{padding:9px 9px;font-size:13px;gap:5px}
  .act.count{padding-right:4px}
  .opt{padding:13px 14px}
  .profile-top{gap:14px}
  .profile-top h1{font-size:21px}
  .profile-head{padding:18px}
  .settings-grid{gap:18px}
  .swatches{gap:10px}.sw{width:38px;height:38px}

  /* create modal -> bottom sheet */
  .scrim{align-items:flex-end;padding:0}
  .modal{max-width:100%;width:100%;border-radius:22px 22px 0 0;max-height:92dvh;padding:20px 18px calc(20px + env(safe-area-inset-bottom));animation:sheetUp .3s cubic-bezier(.4,0,.2,1)}
  .mfoot{position:sticky;bottom:0;background:var(--panel);padding-bottom:4px}

  /* auth -> single screen */
  .auth{grid-template-columns:1fr}
  .auth-left{display:none}
  .auth-right{padding:26px 22px;align-items:flex-start;overflow-y:auto;height:100dvh}
  .auth-form{margin:auto 0}
  .auth-mobile-brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:900;font-size:22px;margin-bottom:20px}
  .auth-mobile-brand .logo{width:36px;height:36px;border-radius:11px;background:var(--ink);display:grid;place-items:center;font-size:16px;color:var(--lime)}
  .auth-form h2{font-size:28px}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

/* nicer skeleton + entrance already defined; add gentle card hover (desktop) */
@media (hover:hover) and (min-width:821px){
  .card{transition:box-shadow .15s,border-color .15s}
  .card:hover{box-shadow:0 2px 4px rgba(21,20,15,.05),0 14px 40px rgba(21,20,15,.07)}
}

/* =====================================================================
   NEW FEATURES: notifications, share/owner menus, badges, dark mode
   ===================================================================== */
.nbadge{margin-left:auto}
.pmenu-btn{margin-left:6px;font-size:18px;line-height:1}
.phead .cat{margin-left:auto}
.phead .pmenu-btn{margin-left:6px}

/* notifications list */
.notif{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:13px 16px;margin-bottom:10px;text-decoration:none;color:inherit;transition:border-color .12s}
.notif:hover{border-color:var(--ink)}
.notif.unread{background:linear-gradient(0deg,var(--panel),var(--panel)) padding-box;border-color:var(--lime-d);box-shadow:0 0 0 1px var(--lime-d) inset, var(--shadow)}
.notif .nbody{flex:1;min-width:0}
.notif .nbody b{font-weight:700}
.notif .nq{color:var(--muted)}
.notif .nt{font-size:12px;color:var(--soft);margin-top:2px}

/* counter on create */
.cqcount{font-variant-numeric:tabular-nums}

/* =====================================================================
   DARK MODE
   ===================================================================== */
:root[data-theme="dark"]{
  --bg:#0f0f12; --panel:#181820; --ink:#f3f1ea; --muted:#a7a294; --soft:#7e7a6e;
  --line:#2a2a33; --line-2:#23232b; --chip:#23232c; --card:#181820;
  --invert:#23232e; --invert-fg:#f3f1ea;
  --green-l:#1d3a2a; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.35);
}
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] .nav a.active,:root[data-theme="dark"] .acct a.active{background:var(--lime);color:#15140f}
:root[data-theme="dark"] .btn-dark{background:#2a2a33}
:root[data-theme="dark"] .btn-dark .i-lime,:root[data-theme="dark"] .btn-dark span{color:var(--lime)!important}
:root[data-theme="dark"] .opt.mine{border-color:var(--lime)}
:root[data-theme="dark"] .res .bar,:root[data-theme="dark"] .opt .fill{opacity:.28}
:root[data-theme="dark"] .pill{border-color:var(--line)}
:root[data-theme="dark"] .nav-scrim{background:rgba(0,0,0,.6)}
:root[data-theme="dark"] .topbar{background:rgba(15,15,18,.85)}
:root[data-theme="dark"] .inp{background:#22222b;color:var(--ink)}
:root[data-theme="dark"] .auth-right{background:var(--panel)}
:root[data-theme="dark"] .seg{background:#22222b}
:root[data-theme="dark"] .seg button.active{background:#33333f;color:var(--ink)}
:root[data-theme="dark"] .panel[style*="f3c9c9"]{border-color:#5a2b2b!important}
:root[data-theme="dark"] .stats,:root[data-theme="dark"] .feed-tabs{background:var(--panel)}

/* =====================================================================
   COMMENT ACTIONS: likes, replies, edit
   ===================================================================== */
.cactions{display:flex;align-items:center;gap:4px;margin-top:6px;flex-wrap:wrap}
.cact{display:inline-flex;align-items:center;gap:5px;border:none;background:none;cursor:pointer;
  color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:5px 9px;border-radius:8px;line-height:1}
.cact .ico{width:14px;height:14px}
@media (hover:hover){ .cact:hover{background:var(--chip);color:var(--ink)} }
.cact:active{background:var(--chip)}
.cact.on{color:var(--red)}
.cact.on .ico{fill:var(--red);stroke:var(--red)}
.cact.danger:hover{color:var(--red)}
.cact .cl{font-variant-numeric:tabular-nums}

.creplies{margin-top:10px;padding-left:14px;border-left:2px solid var(--line-2);display:flex;flex-direction:column;gap:14px}
.citem.reply{gap:9px}
.citem.reply .av{width:26px!important;height:26px!important;font-size:11px!important}

.reply-slot:not(:empty){margin-top:10px}
.reply-box{margin:0}
.cedit-box{margin-top:6px}
.cedit-box .field{width:100%}
.cedit-row{display:flex;gap:8px;margin-top:8px}

:root[data-theme="dark"] .creplies{border-left-color:var(--line)}
:root[data-theme="dark"] .cact.on .ico{fill:var(--red);stroke:var(--red)}

/* =====================================================================
   FOLLOW BUTTON ON CARD + SKELETON LOADERS + LIVE
   ===================================================================== */
.follow-btn{margin-left:auto;flex:none;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  font:inherit;font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px;cursor:pointer;line-height:1;transition:.14s}
.follow-btn:active{transform:scale(.95)}
.follow-btn.on{background:transparent;color:var(--ink)}
@media (hover:hover){ .follow-btn:hover{opacity:.88} .follow-btn.on:hover{background:#fde8e8;border-color:var(--red);color:var(--red)} }
.phead .cat{margin-left:8px}          /* sits after the follow button now */
.follow-btn + .cat{margin-left:8px}
.opt .fill{transition:width .8s cubic-bezier(.22,1,.36,1)}   /* smooth live movement */

/* skeletons */
.sk-wrap{display:flex;flex-direction:column;gap:16px}
.sk-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.sk-card.srow{display:flex;align-items:center;gap:12px;padding:15px 16px}
.sk-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sk{display:block;border-radius:8px;background:linear-gradient(100deg,var(--chip) 30%,rgba(0,0,0,.04) 50%,var(--chip) 70%);
  background-size:200% 100%;animation:sk 1.3s ease-in-out infinite}
.sk-av{width:40px;height:40px;border-radius:50%;flex:none}
.sk-av.lg{width:62px;height:62px}
.sk-line{height:13px}
.sk-line.lg{height:20px;margin:4px 0 16px}
.sk-opt{height:46px;border-radius:12px;margin-bottom:10px}
.sk-pill{height:26px;width:64px;border-radius:999px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
:root[data-theme="dark"] .sk{background:linear-gradient(100deg,#23232c 30%,#2e2e38 50%,#23232c 70%);background-size:200% 100%}

@media (max-width:560px){
  .follow-btn{padding:5px 11px;font-size:12px}
  .phead .h{display:none}    /* hide @handle on tiny screens to make room */
}

/* =====================================================================
   POLL EDIT (time-limited)
   ===================================================================== */
.edit-note{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--muted);
  background:var(--chip);border-radius:10px;padding:9px 11px;margin:2px 0 14px;line-height:1.45}
.edit-note .ico{flex:none;margin-top:1px}
.edit-note b{color:var(--ink)}
.edit-note.warn{background:#fdf3e2;color:#8a6d3b}
.edited-tag{font-style:italic;opacity:.8}
:root[data-theme="dark"] .edit-note.warn{background:#3a3320;color:#d8c79a}

/* =====================================================================
   v2 REDESIGN — social-media feel: cards, actions, bottom nav, polish
   (appended last so it takes precedence)
   ===================================================================== */
.av.s26{width:26px;height:26px;font-size:11px}

/* ---- CARD ---- */
.card{border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(21,20,15,.04);
  padding:16px 18px 8px;transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
@media (hover:hover) and (min-width:821px){
  .card:hover{box-shadow:0 6px 22px rgba(21,20,15,.08);border-color:#e2ddcf}
}
.phead{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.phead .who{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.phead .who b{font-weight:700;font-size:14.5px;cursor:pointer}
.phead .who b:hover{text-decoration:underline}
.phead .who .h{font-weight:500;color:var(--muted);font-size:13px}
.phead .who .sub{color:var(--soft);font-size:12.5px;margin-top:1px}
.phead .cat{margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 11px;
  background:var(--green-l);color:#5c7a13;border:none;border-radius:999px;white-space:nowrap}
.pmenu-btn{margin-left:4px;color:var(--soft);width:30px;height:30px;border-radius:50%;font-size:17px}
@media (hover:hover){ .pmenu-btn:hover{background:var(--chip);color:var(--ink)} }
.q{font-size:19px;line-height:1.36;font-weight:650;letter-spacing:-.01em;margin:2px 0 14px}

/* ---- OPTIONS (vote) ---- */
.opts{display:flex;flex-direction:column;gap:9px}
.opt{position:relative;border:1.6px solid var(--line);border-radius:14px;padding:13px 16px;cursor:pointer;
  font-weight:600;font-size:14.5px;overflow:hidden;background:var(--panel);transition:border-color .14s,background .14s,transform .08s}
.opt .lbl{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px}
@media (hover:hover){ .opt:not(.voted):hover{border-color:var(--ink);background:#faf8f1} }
.opt:not(.voted):active{transform:scale(.99)}

/* ---- OPTIONS (results) ---- */
.opt.voted{cursor:default;border-color:var(--line);background:var(--chip)}
.opt.voted .fill{position:absolute;inset:0;z-index:1;width:0;background:#e9e4d3;border-radius:12px;
  transition:width .8s cubic-bezier(.22,1,.36,1)}
.opt.voted.lead .fill{background:var(--green-l)}
.opt.voted.mine{border-color:var(--lime-d)}
.opt.voted.mine .fill{background:var(--green-l)}
.opt.voted .pct{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.opt.voted.lead .pct{color:#5c7a13}
.opt .tick{color:#5c7a13;font-weight:900}

/* ---- META ---- */
.pmeta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:13px 2px 0;color:var(--soft);font-size:12.5px;font-weight:500}
.pmeta .dot{color:var(--line)}
.pmeta .live{display:inline-flex;align-items:center;gap:6px;color:#1f9d55;font-weight:700}
.pmeta .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fc46b;box-shadow:0 0 0 0 rgba(47,196,107,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,196,107,.55)}70%{box-shadow:0 0 0 7px rgba(47,196,107,0)}100%{box-shadow:0 0 0 0 rgba(47,196,107,0)}}
.tag-closed{color:var(--muted);font-weight:700}
.edited-tag{font-style:italic;opacity:.75}

/* ---- ACTION BAR ---- */
.pacts{display:flex;align-items:center;gap:2px;margin-top:10px;padding:6px 0 4px;border-top:1px solid var(--line-2)}
.act{display:inline-flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer;color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;padding:8px 11px;border-radius:999px;line-height:1;transition:background .14s,color .14s}
.act .n{font-variant-numeric:tabular-nums}
@media (hover:hover){
  .act:hover{background:var(--chip);color:var(--ink)}
  .act[data-like]:hover{background:#fdeaea;color:var(--red)}
  .act.cmt:hover{background:#e8f0fd;color:#2d6cdf}
  .act[data-share]:hover{background:#eafdf0;color:#1f9d55}
  .act[data-save]:hover{background:var(--green-l);color:#5c7a13}
}
.act:active{transform:scale(.92)}
.act.on-heart{color:var(--red)} .act.on-heart .ico{fill:var(--red);stroke:var(--red)}
.act.on-save{color:#5c7a13} .act.on-save .ico{fill:#5c7a13;stroke:#5c7a13}
.act.count{margin-left:auto;color:var(--soft);pointer-events:none}
.pacts .spacer{flex:1}

/* ---- FOLLOW BTN ---- */
.follow-btn{margin-left:auto;flex:none;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;cursor:pointer;transition:.14s}
.follow-btn.on{background:transparent;color:var(--ink)}
.follow-btn + .cat{margin-left:8px}

/* ---- FEED TABS (sticky, pill underline) ---- */
.tabs{position:sticky;top:0;z-index:40;display:flex;gap:6px;background:rgba(243,241,234,.86);
  backdrop-filter:saturate(1.3) blur(10px);padding:6px 2px;margin:-4px -2px 14px;border-bottom:1px solid var(--line)}
.tabs button{border:none;background:none;cursor:pointer;font:inherit;font-weight:700;font-size:14.5px;color:var(--muted);
  padding:9px 14px;border-radius:999px;transition:.14s}
.tabs button.active{color:var(--ink);background:var(--chip)}
@media (hover:hover){ .tabs button:hover{color:var(--ink)} }

/* =====================================================================
   MOBILE BOTTOM NAVIGATION BAR
   ===================================================================== */
.tabbar{display:none}
.tb-icon{border:none;background:none;cursor:pointer;color:var(--ink);width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.tb-icon:active{background:var(--chip)}

@media (max-width:820px){
  .tabbar{display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:80;
    align-items:center;justify-content:space-around;
    background:var(--panel);border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 20px rgba(21,20,15,.06)}
  .tb-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;
    color:var(--soft);font-size:10.5px;font-weight:600;padding:5px 0;position:relative;border-radius:12px}
  .tb-item .ico{width:24px;height:24px}
  .tb-item.active{color:var(--ink)}
  .tb-item.active .ico{stroke:var(--ink)}
  .tb-item .av{width:25px;height:25px;font-size:10px}
  .tb-item.prof.active .av{box-shadow:0 0 0 2px var(--lime-d)}
  .tb-create{flex:none;width:52px;height:52px;margin-top:-18px;border:none;border-radius:50%;
    background:var(--lime);color:var(--ink);display:grid;place-items:center;cursor:pointer;
    box-shadow:0 6px 18px rgba(194,242,58,.5);transition:transform .12s}
  .tb-create:active{transform:scale(.92)}
  .tb-create .ico{stroke:var(--ink);stroke-width:2.6}
  .tb-badge{position:absolute;top:1px;left:calc(50% + 6px);background:var(--red);color:#fff;font-size:9.5px;font-weight:800;
    min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--panel)}
  /* leave room for the bar */
  .main{padding-bottom:84px !important}
  .tabs{top:0}
}

/* slightly smaller question + tighter card on phones */
@media (max-width:560px){
  .card{padding:15px 16px 6px;border-radius:18px}
  .q{font-size:17.5px;margin-bottom:12px}
  .phead .h{display:none}
  .act{padding:8px 9px;font-size:12.5px;gap:5px}
  .follow-btn{padding:5px 12px;font-size:12px}
}

/* dark theme tweaks for new bits */
:root[data-theme="dark"] .tabs{background:rgba(15,15,18,.86)}
:root[data-theme="dark"] .opt:not(.voted){background:#1c1c24;border-color:#2a2a33}
:root[data-theme="dark"] .opt:not(.voted):hover{background:#22222c}
:root[data-theme="dark"] .opt.voted{background:#1c1c24}
:root[data-theme="dark"] .opt.voted .fill{background:#2c2c38}
:root[data-theme="dark"] .opt.voted.lead .fill,:root[data-theme="dark"] .opt.voted.mine .fill{background:#26361a}
:root[data-theme="dark"] .act[data-like]:hover{background:#3a2326}
:root[data-theme="dark"] .act.cmt:hover{background:#1f2b40}
:root[data-theme="dark"] .act[data-share]:hover{background:#1f3527}
:root[data-theme="dark"] .phead .cat{background:#26361a;color:#9fd03a}
:root[data-theme="dark"] .tb-create{box-shadow:0 6px 18px rgba(194,242,58,.25)}

/* override legacy `.tabbar a` (higher specificity) so the new bottom bar wins */
@media (max-width:820px){
  .tabbar a.tb-item{font-size:10.5px;color:var(--soft);padding:5px 0;flex-direction:column;display:flex}
  .tabbar a.tb-item.active{color:var(--ink);background:none}
  .tabbar a.tb-item span{font-size:10.5px;font-weight:600}
  .tabbar a.tb-item .ico{width:24px;height:24px}
}

/* =====================================================================
   FIXES + NEW UI (settings overlap, avatar controls, user lists, mentions)
   ===================================================================== */
/* avatar controls in settings */
.avrow{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.avrow .av-tap{flex:0 0 auto}
.avctl{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.avctl .meta{flex-basis:100%;margin-top:4px;color:var(--soft);font-size:12.5px;line-height:1.4}

/* followers / following modal list */
.ulist{max-height:60vh;overflow:auto;margin-top:6px}
.urow{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--line-2)}
.urow:last-child{border-bottom:none}
.urow .uwho{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;cursor:pointer}
.urow .uwho b{font-size:14.5px}
.urow .uwho span{color:var(--muted);font-size:13px}
.urow .btn{flex:none}

/* @mention link */
.mention{color:#2d6cdf;font-weight:600;cursor:pointer;text-decoration:none}
.mention:hover{text-decoration:underline}
:root[data-theme="dark"] .mention{color:#8ab4ff}

/* @mention autocomplete popup */
.mention-pop{position:absolute;left:46px;right:0;top:100%;z-index:90;margin-top:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(21,20,15,.16);
  overflow:hidden;max-height:240px;overflow-y:auto}
.mention-pop .mrow{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;cursor:pointer;
  padding:8px 11px;text-align:left;font:inherit}
.mention-pop .mrow span{font-size:13.5px}
.mention-pop .mrow i{color:var(--muted);font-style:normal}
.mention-pop .mrow.on,.mention-pop .mrow:hover{background:var(--chip)}

.rail-empty{color:var(--soft);font-size:13px;padding:8px 8px 4px}

/* clickable profile stats */
.pstat{cursor:pointer}
.pstat:hover{text-decoration:underline}

/* ---- SETTINGS: stop the nav from overlapping the form on mobile ---- */
@media (max-width:820px){
  .acct{position:static !important;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding:4px 2px 8px;margin-bottom:6px;
    border-bottom:1px solid var(--line);scrollbar-width:none}
  .acct::-webkit-scrollbar{display:none}
  .acct h3{display:none}
  .acct a{flex:0 0 auto;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 14px}
  .acct a .ico{width:16px}
  .mention-pop{left:0}
}

/* =====================================================================
   v3: verified badge, card header reflow, poll images
   ===================================================================== */
/* verified badge */
.vbadge{display:inline-block;vertical-align:-2px;margin-left:4px;color:var(--lime-d,#5c7a13)}
.profile-head h1 .vbadge{width:20px;height:20px;vertical-align:-3px}
.who b .vbadge{color:#1f9d55}

/* card header: name only + tidy right cluster */
.phead{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.phead .who{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.2}
.phead .who b{font-weight:700;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phead .who .sub{color:var(--soft);font-size:12.5px;margin-top:1px}
.phead-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.phead-right .follow-btn{margin-left:0}
.phead-right .cat{margin-left:0}
.phead-right .pmenu-btn{margin-left:0}
@media (max-width:560px){
  .phead-right{gap:6px}
  .phead-right .cat{display:none}            /* keep header clean on small phones */
}

/* poll cover image */
.pimg{margin:2px 0 12px;border-radius:14px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:var(--chip)}
.pimg img{display:block;width:100%;max-height:420px;object-fit:cover}

/* image picker in create/edit modals */
.img-row{display:flex;gap:12px;align-items:center;margin:2px 0 8px}
.img-prev{width:76px;height:76px;flex:none;border-radius:12px;border:1px dashed var(--line);
  display:grid;place-items:center;overflow:hidden;background:var(--chip);color:var(--soft);font-size:11px;text-align:center}
.img-prev.has{border-style:solid}
.img-prev img{width:100%;height:100%;object-fit:cover}
.img-ctl{display:flex;flex-wrap:wrap;gap:6px}

:root[data-theme="dark"] .who b .vbadge{color:#3fcf7a}

/* =====================================================================
   MODERATION / REPORTS
   ===================================================================== */
.rsn{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.rsn-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:14px}
.rsn-row:hover{background:var(--chip)}
.rsn-row input{accent-color:var(--ink)}

.mr-card{border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:12px;background:var(--panel)}
.mr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.mr-type{font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.03em;padding:3px 9px;border-radius:999px}
.mr-type.poll{background:var(--green-l);color:#5c7a13}
.mr-type.comment{background:#e8f0fd;color:#2d6cdf}
.mr-count{font-weight:700;color:var(--red)}
.mr-who b:hover{text-decoration:underline}
.mr-body{margin:10px 0;font-size:15px;line-height:1.4;color:var(--ink)}
.mr-body.gone{color:var(--soft);font-style:italic}
.mr-reasons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rchip{background:var(--chip);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--muted)}
.mr-acts{display:flex;flex-wrap:wrap;gap:8px}
:root[data-theme="dark"] .mr-type.comment{background:#1f2b40;color:#8ab4ff}

/* embed modal */
.embed-prev{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--chip);margin-top:6px}
.field.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.45;white-space:pre-wrap;word-break:break-all}

/* =====================================================================
   OPTION IMAGES · HASHTAGS · ADMIN PANEL  (v3)
   ===================================================================== */
/* image-based options */
.opt.has-img .lbl{align-items:center}
.opt-img{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:0 0 auto;margin-right:2px;background:var(--chip)}
.opt.has-img{padding-top:9px;padding-bottom:9px}
.opt .lbl{display:flex;align-items:center;gap:10px}
.opt .otext{flex:1 1 auto}
.opt.voted .lbl .pct{margin-left:auto}

/* per-option image button in create/edit */
.opt-img-btn{flex:0 0 auto;width:34px;height:34px;border:1.4px dashed var(--line-2);border-radius:9px;background:var(--card);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);padding:0;overflow:hidden}
.opt-img-btn:hover{border-color:var(--ink);color:var(--ink)}
.opt-img-btn.has{border-style:solid;border-color:#a9cf4a}
.opt-img-btn img{width:100%;height:100%;object-fit:cover}

/* hashtags */
.tag{color:#3f7a17;font-weight:650;text-decoration:none;cursor:pointer}
:root[data-theme="dark"] .tag{color:#9fd14a}
.tag:hover{text-decoration:underline}
.ptags{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 10px}
.ptags .tag{background:var(--green-l);padding:3px 10px;border-radius:999px;font-size:12.5px}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tag.big{background:var(--chip);padding:8px 14px;border-radius:999px;font-size:13.5px}
.tag.big:hover{background:var(--green-l);text-decoration:none}
.tcount{color:var(--soft);font-weight:700;font-size:12px}

/* admin panel */
.atabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.atab{padding:10px 14px;background:none;border:none;border-bottom:2.5px solid transparent;color:var(--muted);
  font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap}
.atab.on{color:var(--ink);border-bottom-color:var(--ink)}
.asearch{margin-bottom:14px}
.urow,.prow,.crow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:var(--panel)}
.uinfo,.pinfo{flex:1 1 auto;min-width:0}
.uinfo .un{display:flex;align-items:center;gap:6px;font-weight:700}
.us{color:var(--muted);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinfo b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbody2{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.uacts{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.abadge{background:var(--ink);color:var(--lime);font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:999px}
@media(max-width:640px){ .urow,.prow,.crow{flex-wrap:wrap} .uacts{width:100%;justify-content:flex-start} }

/* =====================================================================
   DIRECT MESSAGES
   ===================================================================== */
.tb-msg{position:relative}
.tb-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}

/* inbox */
.thread{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;text-decoration:none;color:inherit;border:1px solid transparent}
.thread:hover{background:var(--panel);border-color:var(--line)}
.thread.unread{background:var(--green-l)}
:root[data-theme="dark"] .thread.unread{background:#23280f}
.th-main{flex:1 1 auto;min-width:0}
.th-top{display:flex;align-items:center;gap:8px}
.th-top b{font-weight:700}
.th-time{margin-left:auto;color:var(--soft);font-size:12px;flex:0 0 auto}
.th-last{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.thread.unread .th-last{color:var(--ink);font-weight:600}
.th-you{color:var(--soft)}
.th-dot{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--lime);
  font-size:11px;font-weight:800;display:grid;place-items:center}

/* chat */
.chat-wrap{display:flex;flex-direction:column;height:calc(100dvh - var(--topbar-h, 56px) - 20px);min-height:420px}
.chat-head{display:flex;align-items:center;gap:8px;padding:4px 2px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2}
.chat-peer .cp-name{display:flex;flex-direction:column;line-height:1.15}
.chat-peer .cp-handle{color:var(--soft);font-size:12px;font-weight:500}
.cback{font-size:20px}
.chat-body{flex:1 1 auto;overflow-y:auto;padding:16px 4px;display:flex;flex-direction:column;gap:8px}
.chat-empty{margin:auto;color:var(--soft);font-size:14px}
.msg{display:flex;flex-direction:column;max-width:78%}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.them{align-self:flex-start;align-items:flex-start}
.bub{padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap}
.msg.me .bub{background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.msg.them .bub{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:5px}
:root[data-theme="dark"] .msg.me .bub{background:var(--lime);color:#15140f}
.msg-time{font-size:10.5px;color:var(--soft);margin:3px 4px 0}
.bub .mention,.bub .tag{color:inherit;text-decoration:underline}
.chat-input{display:flex;align-items:flex-end;gap:8px;padding:10px 2px 4px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--bg)}
.chat-input textarea{flex:1 1 auto;resize:none;border:1.5px solid var(--line);border-radius:20px;padding:10px 15px;
  font:inherit;font-size:14.5px;background:var(--card);color:var(--ink);max-height:130px;line-height:1.4}
.chat-input textarea:focus{outline:none;border-color:var(--ink)}
.chat-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:none;background:var(--ink);color:var(--lime);
  display:grid;place-items:center;cursor:pointer}
.chat-send:hover{opacity:.9}
@media(max-width:820px){ .chat-wrap{height:calc(100dvh - 132px)} }

/* =====================================================================
   v3 ADDITIONS — reactions, onboarding, password reset, poll-in-DM, blocks
   ===================================================================== */

/* ---- reactions ---- */
.act.react{gap:5px}
.act.react .rico{display:inline-flex;align-items:center;font-size:16px;line-height:1}
.act.react .rsum{font-size:13px;letter-spacing:-2px}
.act.react.reacted{color:var(--ink);font-weight:700}
.act.react.reacted.r-like{color:#2d6cdf}
.act.react.reacted.r-love{color:#e0245e}
.act.react.reacted.r-haha,.act.react.reacted.r-wow{color:#d99e00}
.act.react.reacted.r-sad{color:#3a86c8}
.act.react.reacted.r-angry{color:#e0531e}
.react-pop{position:fixed;z-index:300;display:flex;gap:3px;background:var(--card,#fff);border:1px solid var(--line);
  border-radius:999px;padding:6px 8px;box-shadow:0 12px 34px rgba(0,0,0,.18);animation:rpop .14s ease}
:root[data-theme="dark"] .react-pop{background:#1c1b16}
@keyframes rpop{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
.rbtn{border:none;background:none;font-size:26px;line-height:1;padding:3px;border-radius:50%;cursor:pointer;
  transition:transform .12s ease;transform-origin:bottom center}
.rbtn:hover{transform:scale(1.35) translateY(-3px)}
.rbtn.on{background:var(--chip)}

/* ---- select fields ---- */
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a958a' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}

/* ---- chat: attach poll, request banner, poll card ---- */
.chat-attach-btn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card,#fff);
  color:var(--muted);display:grid;place-items:center;cursor:pointer}
.chat-attach-btn:hover{background:var(--chip);color:var(--ink)}
.chat-req{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--green-l,#eaf5cf);color:#4a5d12;
  border-radius:12px;padding:10px 13px;margin:0 12px 8px;font-size:13.5px}
.chat-req .btn{margin-left:auto}
.attach-chip{display:flex;align-items:center;gap:8px;background:var(--chip);border:1px solid var(--line);border-radius:12px;
  padding:8px 11px;margin:0 12px 8px;font-size:13px;color:var(--muted)}
.attach-chip span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-chip button{border:none;background:none;cursor:pointer;color:var(--soft);font-size:14px;padding:2px 4px}
.pp-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card,#fff);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;font-size:14.5px;font-weight:600;color:inherit;font-family:inherit}
.pp-item:hover{border-color:var(--ink);background:var(--chip)}
.pp-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cp-card{margin-top:7px;border:1px solid var(--line);border-radius:14px;padding:11px 12px;background:var(--card,#fff);min-width:230px;max-width:340px}
.msg.me .cp-card{background:#fff}
.cp-q{font-weight:650;font-size:14px;line-height:1.3;margin-bottom:9px;display:flex;gap:6px;align-items:flex-start;color:var(--ink)}
.cp-opts{display:flex;flex-direction:column;gap:6px}
.cp-opt{position:relative;border:1.4px solid var(--line);border-radius:10px;padding:9px 11px;overflow:hidden;font-size:13.5px;
  font-weight:600;color:inherit;background:none;width:100%;text-align:left;cursor:default;font-family:inherit}
.cp-opt.votable{cursor:pointer}
.cp-opt.votable:hover{border-color:var(--ink);background:var(--chip)}
.cp-opt.mine{border-color:#a9cf4a}
.cp-fill{position:absolute;inset:0;z-index:1;width:0;background:#ece8d8;border-radius:8px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.cp-opt.lead .cp-fill{background:var(--green-l,#eaf5cf)}
.cp-lab{position:relative;z-index:2;display:flex;justify-content:space-between;gap:8px;align-items:center}
.cp-pct{font-weight:800;font-variant-numeric:tabular-nums}
.cp-opt.lead .cp-pct{color:#5c7a13}
.cp-lab .tick{color:#5c7a13;font-weight:900;margin-right:3px}
.cp-foot{margin-top:8px;font-size:11.5px;color:var(--soft)}
.cp-foot a{color:var(--muted);font-weight:700;text-decoration:none}
.cp-foot a:hover{text-decoration:underline}

/* ---- inbox request badge ---- */
.th-req{background:var(--green-l,#eaf5cf);color:#5c7a13;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;padding:2px 7px;border-radius:999px;margin-left:2px}
:root[data-theme="dark"] .th-req{background:#2b3416;color:#bfe06a}

/* ---- profile extra meta wrap ---- */
.profile-meta{flex-wrap:wrap}

/* ---- responsiveness polish ---- */
@media (max-width:560px){
  .react-pop{padding:5px 6px}
  .rbtn{font-size:23px}
  .cp-card{max-width:78vw}
  .chat-req{font-size:12.5px}
}

/* ---- send poll to person modal ---- */
.sp-results{margin-top:10px;max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.sp-hint{color:var(--soft);font-size:13px;padding:14px 4px;text-align:center}
.sp-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:1px solid transparent;
  border-radius:12px;padding:9px 11px;cursor:pointer;font-family:inherit;color:inherit}
.sp-row:hover{background:var(--chip);border-color:var(--line)}
.sp-meta{display:flex;flex-direction:column;line-height:1.25;flex:1}
.sp-meta b{font-size:14.5px}
.sp-meta span{font-size:12.5px;color:var(--soft)}
.sp-send{font-size:12.5px;font-weight:800;color:var(--lime-ink,#5c7a13);background:var(--green-l,#eaf5cf);padding:5px 11px;border-radius:999px}

/* ---- complete-profile nudge ---- */
.nudge{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--green-l,#eaf5cf),transparent);
  border:1px solid var(--line);border-radius:16px;padding:13px 15px;margin:4px 0 14px;position:relative}
.nudge-ic{font-size:22px;flex:0 0 auto}
.nudge-txt{flex:1;display:flex;flex-direction:column;line-height:1.3}
.nudge-txt b{font-size:14.5px}
.nudge-txt span{font-size:12.5px;color:var(--muted)}
.nudge-x{position:absolute;top:8px;right:10px;border:none;background:none;cursor:pointer;color:var(--soft);font-size:13px}
:root[data-theme="dark"] .nudge{background:linear-gradient(180deg,#222a14,transparent)}
@media (max-width:560px){ .nudge-txt span{display:none} }

/* =====================================================================
   v4 — IG-style send sheet, pro profile + activity, messages polish, responsive
   ===================================================================== */

/* ---- bottom sheet (send poll) ---- */
.sheet-scrim{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;padding:0}
@media (min-width:821px){ .sheet-scrim{align-items:center;justify-content:center;padding:20px} }
.sheet{background:var(--card,#fff);width:100%;max-width:100%;border-radius:22px 22px 0 0;padding:8px 16px 16px;
  display:flex;flex-direction:column;max-height:86vh;overflow-y:auto;box-shadow:0 -10px 40px rgba(0,0,0,.18);animation:sheetUp .26s cubic-bezier(.22,1,.36,1)}
.sheet>*{flex-shrink:0}
@media (min-width:821px){ .sheet{border-radius:20px;max-width:520px;max-height:80vh;animation:rpop .18s ease} }
:root[data-theme="dark"] .sheet{background:#1b1a15}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:4px auto 8px}
@media (min-width:821px){ .sheet-grab{display:none} }
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet-head h3{margin:0;font-size:18px}
.sheet-poll{display:flex;gap:8px;align-items:center;background:var(--chip);border-radius:12px;padding:10px 12px;font-size:13.5px;
  font-weight:600;color:var(--muted);margin-bottom:12px}
.sheet-poll span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-search{display:flex;align-items:center;gap:9px;background:var(--chip);border-radius:12px;padding:0 12px;margin-bottom:12px}
.sheet-search .ss-ic{color:var(--soft);display:flex}
.sheet-search input{flex:1;border:none;background:none;outline:none;padding:11px 0;font-size:15px;color:inherit;font-family:inherit}
.sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;overflow:auto;padding:2px;flex:1}
@media (max-width:520px){ .sp-grid{grid-template-columns:repeat(3,1fr)} }
.sp-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:none;background:none;
  border-radius:14px;cursor:pointer;font-family:inherit;color:inherit;transition:background .12s}
.sp-card:hover{background:var(--chip)}
.sp-name{font-size:12.5px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:3px}
.sp-handle{font-size:11px;color:var(--soft);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-btn{margin-top:3px;font-size:12px;font-weight:800;color:var(--ink);background:var(--green-l,#eaf5cf);
  padding:5px 14px;border-radius:999px}
.sp-card.sent .sp-btn{background:var(--ink);color:var(--lime)}
.sp-card.sending{opacity:.55;pointer-events:none}
.sp-hint{grid-column:1/-1;color:var(--soft);font-size:13px;padding:24px 4px;text-align:center}
.sheet-foot{display:flex;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2,var(--line))}
.sheet-foot .field{flex:1;margin:0}
.sheet-foot .btn{flex:0 0 auto}

/* ---- professional profile ---- */
.profile-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card,#fff);margin-bottom:14px}
.profile-banner{height:110px}
.profile-body{padding:0 18px 18px;position:relative}
.profile-avwrap{margin-top:-38px;margin-bottom:8px}
.profile-avwrap .av{width:84px;height:84px;font-size:30px;border:4px solid var(--card,#fff);box-shadow:0 4px 14px rgba(0,0,0,.12)}
:root[data-theme="dark"] .profile-avwrap .av{border-color:#1b1a15}
.profile-actions{position:absolute;top:14px;right:16px;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.profile-name{font-size:23px;margin:0;display:flex;align-items:center;gap:6px;line-height:1.2}
.profile-card .handle{color:var(--soft);font-size:14px;margin-top:1px}
.profile-bio{margin-top:11px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.profile-meta{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:12px;color:var(--muted);font-size:13.5px}
.profile-meta span{display:inline-flex;align-items:center;gap:5px}
.profile-meta a{color:var(--accent,#2d6cdf);text-decoration:none}
.profile-stats{display:flex;gap:20px;margin-top:14px;font-size:14px;color:var(--muted)}
.profile-stats b{color:var(--ink);font-weight:800}
.pstat{cursor:pointer}.pstat:hover{color:var(--ink)}
.prof-tabs{position:sticky;top:0;z-index:5}

/* ---- activity feed ---- */
.activity{display:flex;flex-direction:column;gap:2px}
.ac-item{display:flex;gap:12px;align-items:flex-start;padding:13px 12px;border-radius:14px;text-decoration:none;color:inherit;border:1px solid transparent}
.ac-item:hover{background:var(--panel);border-color:var(--line)}
.ac-ic{font-size:19px;flex:0 0 auto;width:24px;text-align:center}
.ac-body{flex:1;min-width:0}
.ac-line{font-size:14px;line-height:1.4}
.ac-verb{color:var(--muted)}
.ac-line b{font-weight:650}
.ac-time{color:var(--soft);font-size:12px;margin-left:6px;white-space:nowrap}
.ac-snip{color:var(--muted);font-size:13px;margin-top:3px;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- messages inbox polish ---- */
.thread{gap:13px;padding:12px 12px}
.thread .av{width:54px;height:54px;font-size:20px}
.th-top b{font-size:15px}
.th-time{color:var(--soft);font-size:12px;margin-left:auto;white-space:nowrap;font-weight:500}
.th-you{color:var(--soft)}

/* ---- chat polish ---- */
.chat-head{position:sticky;top:0;z-index:6;background:var(--bg);backdrop-filter:saturate(1.2) blur(6px);
  display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--line)}
.cp-name b{font-size:15px}.cp-handle{font-size:12px;color:var(--soft);display:block}
.msg{max-width:78%;display:flex;flex-direction:column;margin:3px 0}
.msg.me{margin-left:auto;align-items:flex-end}
.bub{padding:9px 13px;border-radius:18px;font-size:14.5px;line-height:1.4;word-break:break-word}
.msg.them .bub{background:var(--chip);border-bottom-left-radius:6px}
.msg.me .bub{background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.msg-time{font-size:10.5px;color:var(--soft);margin:2px 6px}
.chat-input{position:sticky;bottom:0;background:var(--bg);padding:10px 8px;border-top:1px solid var(--line);gap:8px}

/* =====================================================================
   RESPONSIVE — phones, tablets, desktop
   ===================================================================== */
@media (max-width:560px){
  .profile-banner{height:88px}
  .profile-avwrap .av{width:72px;height:72px;font-size:26px}
  .profile-name{font-size:20px}
  .profile-actions{position:static;margin-top:10px;justify-content:flex-start}
  .profile-body{padding:0 14px 16px}
  .profile-avwrap{margin-top:-34px}
  .thread .av{width:48px;height:48px}
  .th-top b{font-size:14.5px}
  .msg{max-width:86%}
  .sheet-foot{flex-wrap:wrap}
}
@media (max-width:420px){
  .sp-grid{grid-template-columns:repeat(3,1fr);gap:4px}
  .profile-meta{gap:6px 12px;font-size:13px}
  .profile-stats{gap:16px}
}

/* =====================================================================
   v4 LAYOUT REFRESH — cleaner, more "pro social app" feel (override layer)
   ===================================================================== */
.app{gap:30px;max-width:1380px;margin-inline:auto;padding:0 24px}
.main{padding:14px 2px 80px}

/* cards: softer border, subtle hover lift */
.card{box-shadow:0 1px 2px rgba(21,20,15,.03);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.card:hover{box-shadow:0 4px 22px rgba(21,20,15,.07);border-color:var(--line-2)}

/* sticky tabs bar with frosted backdrop */
.tabs{position:sticky;top:0;z-index:8;background:color-mix(in srgb,var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.3) blur(8px);padding-top:8px;margin:0 0 12px;gap:22px}
.tabs button{font-size:15.5px;padding-bottom:12px}
.tabs button.active{position:relative}
.tabs button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--ink)}

/* stat strip → cards */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px 15px;text-align:left}
.stat b{font-family:var(--serif);font-weight:900;font-size:21px;display:block;line-height:1.1}
.stat span{font-size:12px;color:var(--muted)}

/* nav active uses lime accent bar for a more app-like feel */
.nav a{font-size:15px;padding:11px 14px}
.nav a.active{background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(21,20,15,.16)}
.nav a:not(.active):hover{background:var(--chip)}

/* right rail boxes */
.box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(21,20,15,.03)}
.box h4{font-family:var(--serif);font-weight:900;font-size:16px;margin-bottom:10px}
.trend{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:11px;cursor:pointer;transition:background .12s}
.trend:hover{background:var(--chip)}
.trend .rank{font-family:var(--serif);font-weight:900;font-size:18px;color:var(--soft);width:18px;text-align:center}
.sug{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:12px}
.sug:hover{background:var(--chip)}
.sug .who{flex:1;min-width:0;line-height:1.2}
.sug .who b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug .who span{font-size:12px;color:var(--soft)}

/* search input in rail */
.search{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:0 14px;box-shadow:0 1px 2px rgba(21,20,15,.03)}
.search input{flex:1;border:none;outline:none;background:none;padding:12px 0;font-size:14.5px}

/* buttons a touch crisper */
.btn-dark:hover{filter:none;background:#000}
.btn-ghost{border-width:1px}

/* poll option bars: smoother */
.opt{transition:border-color .14s ease,background .14s ease}
.fill{transition:width .75s cubic-bezier(.22,1,.36,1)}

/* --- responsive refinements --- */
@media (max-width:1080px){ .app{gap:22px;max-width:760px} }
@media (max-width:820px){
  .app{max-width:620px;padding:0 14px}
  .stats{gap:8px}
  .stat b{font-size:19px}
}
@media (max-width:560px){
  .app{padding:0 10px}
  .main{padding:10px 0 88px}
  .tabs{gap:16px}
  .tabs button{font-size:14.5px}
  .stats{grid-template-columns:repeat(3,1fr);gap:6px}
  .stat{padding:10px;border-radius:13px}
  .stat b{font-size:17px}
  .stat span{font-size:10.5px}
  .card{border-radius:16px}
}
@media (max-width:380px){
  .stat span{font-size:10px}
  .btn-sm{padding:6px 11px;font-size:12.5px}
}

/* ---- admin overview + suspend ---- */
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
@media (max-width:620px){ .ogrid{grid-template-columns:repeat(2,1fr)} }
.ostat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 16px}
.ostat b{font-family:var(--serif);font-weight:900;font-size:25px;display:block;line-height:1.05}
.ostat span{font-size:12.5px;color:var(--muted)}
.ostat.good b{color:var(--green)} .ostat.warn b{color:var(--amber)} .ostat.bad b{color:var(--red)}
.oquick{display:flex;gap:8px;flex-wrap:wrap}
.abadge.bad{background:#fde8e8;color:var(--red)}
.urow.banned{opacity:.72;background:repeating-linear-gradient(135deg,transparent,transparent 8px,rgba(239,68,68,.04) 8px,rgba(239,68,68,.04) 16px)}
.urow.banned .av{filter:grayscale(.6)}

/* =====================================================================
   STORIES + AUDIENCE INSIGHTS
   ===================================================================== */
.av.s56{width:56px;height:56px;font-size:21px}

/* ---- story tray ---- */
.story-tray{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;margin-bottom:6px;scrollbar-width:none}
.story-tray::-webkit-scrollbar{display:none}
.story-tray:empty{display:none}
.story-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:none;cursor:pointer;width:72px;font-family:inherit;color:inherit;position:relative}
.story-ring{display:block;width:64px;height:64px;border-radius:50%;box-sizing:border-box;
  background:conic-gradient(from 210deg,#a9cf4a,#15c08a,#2d9cdb,#a9cf4a);padding:3px}
.story-item.seen .story-ring{background:var(--line)}
.story-ring.dashed{background:none;border:2px dashed var(--line)}
.story-av{display:block;width:100%;height:100%;aspect-ratio:1;border-radius:50%;background:var(--bg);padding:2px;position:relative;box-sizing:border-box;overflow:hidden}
.story-av .av{width:100%;height:100%;aspect-ratio:1;border-radius:50%}
.story-av .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.story-plus{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.55);border-radius:50%}
:root[data-theme="dark"] .story-plus{background:rgba(0,0,0,.4);color:#fff}
.story-add-badge{position:absolute;bottom:24px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:14px;font-weight:800;border:2px solid var(--bg)}
.story-name{font-size:11.5px;color:var(--muted);max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- story preview (composer) ---- */
.story-prev{border-radius:14px;overflow:hidden;background:#000;max-height:48vh;display:grid;place-items:center}
.story-prev img{max-width:100%;max-height:48vh;object-fit:contain}

/* ---- story viewer ---- */
.story-screen{position:fixed;inset:0;z-index:400;background:#000;display:flex;flex-direction:column;
  max-width:480px;margin:0 auto;animation:rpop .18s ease}
.story-progress{display:flex;gap:4px;padding:10px 12px 4px}
.sp{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.sp-fill{display:block;height:100%;width:0;background:#fff}
.story-top{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;color:#fff}
.story-who{display:flex;align-items:center;gap:9px;font-size:14px}
.story-who .av{width:34px;height:34px}
.story-ago{color:rgba(255,255,255,.7);font-size:12px}
.story-top-r{display:flex;align-items:center;gap:6px}
.story-x,.story-del{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:6px;border-radius:50%;line-height:1}
.story-x:hover,.story-del:hover{background:rgba(255,255,255,.18)}
.story-img{flex:1;position:relative;display:grid;place-items:center;overflow:hidden}
.story-img>img{max-width:100%;max-height:100%;object-fit:contain}
.story-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 24px;color:#fff;font-size:15px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));text-align:center}
.story-nav{position:absolute;top:0;bottom:0;width:33%;background:none;border:none;cursor:pointer;outline:none}
.story-nav.left{left:0}.story-nav.right{right:0}

/* ---- audience insights ---- */
.insights-btn{margin:12px auto 0;display:block}
.ins-top{font-weight:800;font-size:15px;margin-bottom:6px}
.ins-sec{margin-top:16px}
.ins-sec h4{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);margin-bottom:9px}
.ins-bars{display:flex;flex-direction:column;gap:7px}
.ins-bar{display:flex;align-items:center;gap:10px;font-size:13.5px}
.ins-lab{width:84px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.ins-track{flex:1;height:18px;border-radius:6px;background:var(--chip);overflow:hidden}
.ins-fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#a9cf4a,#15c08a);transition:width .6s cubic-bezier(.22,1,.36,1)}
.ins-val{width:34px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.ins-opt{padding:9px 0;border-bottom:1px solid var(--line)}
.ins-opt b{display:block;font-size:14px}
.ins-opt span{font-size:12.5px;color:var(--muted)}
.ins-note{margin-top:14px;font-size:12px;color:var(--soft)}
.ins-empty{text-align:center;padding:20px 10px}
@media (max-width:560px){ .story-screen{max-width:100%} }

/* =====================================================================
   v5 — share sheet (insta/tiktok), mobile header, story tray, responsive
   ===================================================================== */

/* ---- Instagram/TikTok-style share sheet ---- */
.share-sheet{padding-bottom:24px}
.share-people-wrap{margin-bottom:6px}
.share-people{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:none}
.share-people::-webkit-scrollbar{display:none}
.sp-person{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;width:68px;
  background:none;border:none;cursor:pointer;font-family:inherit;color:inherit}
.sp-pav{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;overflow:hidden}
.sp-pav .av{width:60px;height:60px}
.sp-pav.search{background:var(--chip);color:var(--muted)}
.sp-pname{font-size:11.5px;color:var(--muted);max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-person.sent .sp-pav{outline:2px solid var(--ink);outline-offset:2px}
.sp-person.sent .sp-pname{color:var(--ink);font-weight:700}
.sp-person.sending{opacity:.5;pointer-events:none}
.sp-skel{display:flex;gap:14px;padding:6px 2px}
.sp-skel span{width:60px;height:60px;border-radius:50%;background:var(--chip);flex:0 0 auto;
  animation:pulse 1.2s ease-in-out infinite}

.share-apps{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 4px;border-top:1px solid var(--line);scrollbar-width:none}
.share-apps::-webkit-scrollbar{display:none}
.share-app{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;width:68px;
  background:none;border:none;cursor:pointer;font-family:inherit;color:inherit}
.sa-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--chip);
  color:var(--ink);font-size:18px;transition:transform .12s}
.share-app:active .sa-ic{transform:scale(.92)}
.sa-ic .aemoji{font-size:24px;line-height:1}
.sa-ic.a-wa{background:#e6f8ed} .sa-ic.a-x{background:#000;color:#fff} .sa-ic.a-fb{background:#e7f0ff}
.sa-ic.a-copy,.sa-ic.a-embed,.sa-ic.a-native{background:var(--chip)}
.sa-lab{font-size:11.5px;color:var(--muted)}

/* ---- mobile header: Instagram/FB feel ---- */
@media (max-width:900px){
  .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
    padding:10px 14px;background:color-mix(in srgb,var(--bg) 90%,transparent);
    backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
  .tb-brand{font-family:var(--serif);font-weight:900;font-size:21px;display:flex;align-items:center;gap:9px;
    text-decoration:none;color:var(--ink);margin-right:auto}
  .tb-brand .logo{width:30px;height:30px;border-radius:9px;font-size:14px}
  .burger{order:-1}
  .tb-right{display:flex;align-items:center;gap:4px}
  .tb-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:none;border:none;
    color:var(--ink);cursor:pointer;position:relative}
  .tb-icon:active{background:var(--chip)}
  .tb-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
    background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
}

/* ---- story tray: cleaner Instagram rings ---- */
.story-item{width:74px}
.story-name{max-width:74px;font-size:12px}
.story-ring{width:66px;height:66px}
.story-item.add .story-ring.dashed{background:none;border:2px dashed var(--line);padding:3px}
.story-item.add .story-av{background:var(--chip)}
.story-add-badge{bottom:22px;right:9px}
/* clearer "your story" plus tile */
.story-item.add .story-plus{background:rgba(0,0,0,.32);color:#fff;font-size:26px}

@media (max-width:560px){
  .story-tray{gap:12px;padding:2px 0 14px}
  .story-item{width:70px}.story-name{max-width:70px}
  .share-people,.share-apps{gap:12px}
}

/* hide the right rail on Explore (the page is itself the search/discovery hub) — kills the duplicate search bar */
body[data-route="explore"] .rail{display:none}
@media (min-width:901px){
  body[data-route="explore"] .app{grid-template-columns:264px minmax(0,1fr)}
}

/* profile avatar story ring */
.profile-avwrap.has-story{position:relative;cursor:pointer;border-radius:50%;padding:4px;width:max-content;
  background:conic-gradient(from 210deg,#a9cf4a,#15c08a,#2d9cdb,#a9cf4a)}
.profile-avwrap.has-story .av{border:3px solid var(--card,#fff)}
:root[data-theme="dark"] .profile-avwrap.has-story .av{border-color:#1b1a15}

/* ---- story ring on any avatar ---- */
.av.has-story{cursor:pointer;box-shadow:0 0 0 2px var(--bg), 0 0 0 4px #a9cf4a;position:relative}
.profile-avwrap .av.has-story{box-shadow:0 0 0 3px var(--card,#fff), 0 0 0 6px #a9cf4a}
.profile-avwrap[data-photo]{cursor:zoom-in}

/* ---- full-size photo viewer ---- */
.photo-scrim{background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:420}
.photo-full{max-width:94vw;max-height:88vh;border-radius:12px;object-fit:contain}
.photo-x{position:fixed;top:16px;right:18px;background:rgba(255,255,255,.15);color:#fff;border:none;
  width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer}

/* ---- story viewer footer: reactions + viewers ---- */
.story-foot{padding:12px 14px 16px;display:flex;justify-content:center}
.story-reacts{display:flex;gap:6px;background:rgba(255,255,255,.12);border-radius:999px;padding:7px 12px}
.story-react{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;transition:transform .12s;padding:2px}
.story-react:hover{transform:scale(1.3) translateY(-3px)}
.story-react.reacted{transform:scale(1.25)}
.story-viewers{background:rgba(255,255,255,.14);color:#fff;border:none;border-radius:999px;padding:10px 18px;
  font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px}
.story-viewers:hover{background:rgba(255,255,255,.24)}

/* ---- viewers sheet ---- */
.viewers-list{overflow:auto;max-height:60vh}
.viewers-count{font-size:13px;color:var(--soft);font-weight:700;padding:4px 4px 10px}
.viewer-row{display:flex;align-items:center;gap:11px;padding:9px 4px}
.vr-info{flex:1;min-width:0;line-height:1.25}
.vr-info b{font-size:14.5px;display:block} .vr-info span{font-size:12.5px;color:var(--soft)}
.vr-emoji{font-size:20px}

/* ---- insights page ---- */
.ins-hero{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;
  font-size:15.5px;line-height:1.5}
.ostat small{display:block;color:var(--soft);font-size:11px;margin-top:2px}
.ins-top-poll{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit}
.ins-top-poll:hover{background:var(--chip)}
.ins-top-poll b{font-size:14.5px} .ins-top-poll span{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap}

/* location detect row */
.loc-row{display:flex;gap:8px;align-items:center}
.loc-row .field{flex:1}
.loc-btn{flex:0 0 auto;white-space:nowrap}
/* share sheet story icon */
.sa-ic.a-story{background:var(--ink);color:var(--lime)}
/* story poll card in viewer */
.story-pollwrap{width:100%;max-width:360px;padding:0 18px}
.story-pollwrap .cp-card{background:rgba(255,255,255,.97);max-width:100%}
.story-img.haspoll{align-items:center}
.story-img.haspoll .story-nav{width:12%}

/* ---- reactors sheet tabs ---- */
.react-tabs{display:flex;gap:7px;flex-wrap:wrap;padding:4px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.rt{background:var(--chip);border:1px solid transparent;border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:700;
  cursor:pointer;font-family:inherit;color:var(--muted)}
.rt.on{background:var(--ink);color:#fff}

/* ---- story viewer: instagram polish ---- */
.story-screen{background:#000}
.story-img{background:#000}
.story-img>img{max-width:100%;max-height:100%;object-fit:contain}
.story-img::before{content:"";position:absolute;top:0;left:0;right:0;height:90px;z-index:1;
  background:linear-gradient(rgba(0,0,0,.5),transparent);pointer-events:none}
.story-top,.story-progress{position:relative;z-index:3}
.story-foot{position:relative;z-index:3;flex-direction:column;gap:10px;align-items:stretch}
.story-reacts{justify-content:center}
.story-reply{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:6px 8px 6px 16px}
.story-reply input{flex:1;background:none;border:none;outline:none;color:#fff;font-size:14.5px;font-family:inherit}
.story-reply input::placeholder{color:rgba(255,255,255,.7)}
.story-reply-send{background:none;border:none;color:var(--lime);cursor:pointer;display:grid;place-items:center;padding:6px}

/* ---- insights layout ---- */
.instat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:560px){ .instat-grid{grid-template-columns:repeat(3,1fr)} }
.instat{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}
.instat-ic{font-size:22px;width:42px;height:42px;border-radius:12px;background:var(--card,#fff);display:grid;place-items:center;flex:0 0 auto}
:root[data-theme="dark"] .instat-ic{background:#15140f}
.instat-main{min-width:0}
.instat-main b{font-family:var(--serif);font-weight:900;font-size:22px;display:block;line-height:1.05}
.instat-main span{font-size:12.5px;color:var(--muted)}
.instat-main small{display:block;color:var(--soft);font-size:11px}

/* ===================== COMMUNITIES ===================== */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-h{font-family:var(--serif);font-size:17px;font-weight:800;margin:18px 2px 10px}
.comm-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){ .comm-grid{grid-template-columns:1fr 1fr} }
.comm-card{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;transition:border-color .15s,transform .1s}
.comm-card:hover{border-color:var(--ink)}
.comm-cover{width:74px;flex:0 0 auto;background-size:cover;background-position:center}
.comm-body{padding:12px 12px 12px 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.comm-body b{font-size:15px}
.cbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);background:var(--chip);
  border-radius:999px;padding:2px 8px;width:max-content}
.comm-meta{font-size:12px;color:var(--soft)}
.comm-desc{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* community hero */
.comm-hero{background:var(--card,#fff);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:14px}
.comm-hero-cover{height:120px;background-size:cover;background-position:center}
.comm-hero-body{padding:14px 16px}
.comm-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.comm-hero-top h1{font-family:var(--serif);font-size:23px;font-weight:900;margin:0;line-height:1.1}
.comm-hero-meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-top:6px;flex-wrap:wrap}
.comm-hero-desc{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.comm-actions{flex:0 0 auto}

/* community chip on cards */
.comm-chip{display:inline-flex;align-items:center;gap:3px;color:var(--muted);text-decoration:none;font-weight:600}
.comm-chip:hover{color:var(--ink);text-decoration:underline}
.comm-chip .ico{width:11px;height:11px}

/* create-community modal bits */
.seg{display:flex;gap:8px}
.seg-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;color:var(--muted)}
.seg-b.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.swatch.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.crow-act{display:flex;gap:6px}.crow-role{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.btn-xs{padding:5px 11px;font-size:12.5px}

/* improved activity */
.activity-feed{display:flex;flex-direction:column;gap:8px}
.ac-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;text-decoration:none;color:inherit;transition:border-color .15s}
.ac-row:hover{border-color:var(--ink)}
.ac-badge{width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-size:19px;background:var(--chip)}
.ac-badge.ac-poll{background:#eef7cf}.ac-badge.ac-comment{background:#e7f0ff}
.ac-badge.ac-reaction{background:#ffe7ec}.ac-badge.ac-vote{background:#efe7ff}
.ac-body{flex:1;min-width:0}
.ac-line{font-size:14px;line-height:1.35}.ac-line b{font-weight:800}
.ac-verb{color:var(--muted)}
.ac-snip{font-size:12.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-foot{margin-top:3px}.ac-time{font-size:11.5px;color:var(--soft)}
.ac-chev{color:var(--soft);font-size:22px;flex:0 0 auto}

/* ---- points / gamification ---- */
.pstat-pts{text-decoration:none;color:inherit}
.pstat-pts b{color:var(--ink)}
.pts-hero{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 18px;margin-bottom:8px}
.pts-badge{font-size:46px;line-height:1}
.pts-big{font-family:var(--serif);font-weight:900;font-size:40px;margin-top:6px}
.pts-big span{font-size:18px;color:var(--muted)}
.pts-lvl{color:var(--muted);font-weight:700;font-size:13.5px;margin-top:2px}
.pts-bar{height:10px;border-radius:999px;background:var(--chip);margin:14px auto 6px;max-width:320px;overflow:hidden}
.pts-bar span{display:block;height:100%;background:linear-gradient(90deg,#a9cf4a,#15c08a);border-radius:999px}
.pts-next{font-size:12.5px;color:var(--soft)}
.pts-break{display:flex;flex-direction:column;gap:2px}
.pts-brow{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:6px}
.pts-blab{flex:1;font-weight:600;font-size:14px}
.pts-bcount{color:var(--soft);font-size:12.5px}
.pts-btot{font-weight:800;color:#5c7a13;min-width:48px;text-align:right}
.pts-ways{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pts-way{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;font-size:13px}
.pts-way span{font-size:18px} .pts-way b{flex:1;font-weight:600} .pts-way em{font-style:normal;font-weight:800;color:#5c7a13}
/* leaderboard */
.lb-mine{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:12px;font-size:14px}
.lb-list{display:flex;flex-direction:column;gap:6px}
.lb-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit}
.lb-row.me{border-color:var(--ink);background:var(--panel)}
.lb-row:hover{background:var(--chip)}
.lb-rank{width:30px;text-align:center;font-size:20px;font-weight:800}
.lb-num{font-size:14px;color:var(--muted)}
.lb-info{flex:1;min-width:0;line-height:1.25}
.lb-info b{font-size:14.5px;display:block} .lb-info span{font-size:12px;color:var(--soft)}
.lb-pts{font-family:var(--serif);font-weight:900;font-size:18px}

/* ---- perks / flair ---- */
.flair{margin-left:3px}
.card.has-bg .opt{background:rgba(255,255,255,.55)}
.perk-tag{background:linear-gradient(90deg,#a9cf4a,#15c08a);color:#0a0a0a;font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px;vertical-align:middle;margin-left:4px}
.bg-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.bg-sw{width:34px;height:34px;border-radius:9px;border:2px solid transparent;cursor:pointer}
.bg-sw.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--card,#fff) inset}
.perk-lock{background:var(--chip);border:1px dashed var(--line);border-radius:12px;padding:11px 14px;font-size:13px;color:var(--muted);margin-bottom:6px}
.perk-lock a{color:var(--ink);font-weight:700}
/* perks list (points page) */
.pts-perks{display:flex;flex-direction:column;gap:8px}
.perk-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;opacity:.62}
.perk-row.on{opacity:1;border-color:#a9cf4a;background:var(--panel)}
.perk-ic{font-size:22px;flex:0 0 auto}
.perk-info{flex:1;min-width:0} .perk-info b{font-size:14.5px;display:block} .perk-info span{font-size:12.5px;color:var(--soft)}
.perk-state{font-size:12.5px;font-weight:800;white-space:nowrap}
.perk-row.on .perk-state{color:#5c7a13}
/* admin perk editor */
.perk-edit-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.perk-en{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.perk-thr{display:flex;align-items:center;gap:6px} .perk-thr .field{width:90px;padding:8px}

/* ---- network page ---- */
.net-tabs{margin-bottom:6px}
.net-list{display:flex;flex-direction:column;gap:8px}
.net-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px}
.net-row:hover{background:var(--panel)}
.net-who{flex:1;min-width:0;line-height:1.3;cursor:pointer}
.net-who b{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.net-who span{font-size:12.5px;color:var(--soft);display:block}
.net-who em{font-style:normal;font-size:12px;color:var(--muted);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.net-you{font-size:12px;color:var(--soft);font-weight:700}
.net-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.net-empty .ne-ic{font-size:44px}
.net-empty h3{font-family:var(--serif);margin:10px 0 4px;color:var(--ink)}
.net-empty p{font-size:13.5px;max-width:320px;margin:0 auto 14px}

/* ---- messenger: tabs, groups, requests ---- */
.inbox-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.msg-tabs{margin-bottom:6px}
.mt-badge{background:#ef4444;color:#fff;font-size:11px;font-weight:800;border-radius:9px;padding:0 6px;margin-left:4px}
.th-grouptag{font-size:11px;color:var(--soft);font-weight:700;margin-left:6px}
.grp-av{display:grid;place-items:center;background:var(--ink);color:var(--lime);overflow:hidden}
.grp-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.req-thread{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid var(--line)}
.req-thread .th-main{flex:1;min-width:0;text-decoration:none;color:inherit}
.req-actions{display:flex;gap:6px;flex:0 0 auto}
.gm-name{font-size:11.5px;color:var(--muted);font-weight:700;margin:0 0 2px 4px}
.msg.them.first{margin-top:8px}
/* group create/add picker */
.g-people{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.g-pick{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:none;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.g-pick span:nth-child(2){flex:1;font-weight:600;font-size:14px}
.g-pick .g-check{opacity:0;color:#5c7a13;font-weight:800}
.g-pick.on{border-color:#a9cf4a;background:var(--panel)} .g-pick.on .g-check{opacity:1}
/* community about */
.about-card{border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.about-desc{font-size:14.5px;line-height:1.55;margin:0 0 14px}
.about-rows{display:flex;flex-direction:column;gap:10px}
.about-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.about-row b{font-size:14px} .about-row em{font-style:normal;color:var(--soft);font-size:12.5px;flex-basis:100%;margin-left:25px}
.about-actions{margin-top:16px}

/* ---- poll option layouts: grid + photo tiles ---- */
.layout-pick{display:flex;gap:8px}
.lay-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border:1.6px solid var(--line);
  border-radius:12px;background:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13.5px;color:var(--muted)}
.lay-opt.sel{border-color:var(--ink);color:var(--ink);background:var(--panel)}
.lay-hint{font-size:12px;color:var(--soft);margin-top:6px}

.opts.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.gopt{position:relative;overflow:hidden;border:1.6px solid var(--line);border-radius:14px;cursor:pointer;
  display:flex;flex-direction:column;min-height:52px;transition:border-color .15s, transform .05s}
.gopt:active{transform:scale(.99)}
.gopt:hover{border-color:var(--ink)}
.gopt-img{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--chip)}
.gopt-img img{width:100%;height:100%;object-fit:cover;display:block}
.gopt-body{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:11px 13px;position:relative;z-index:2;flex:1}
.gopt-lbl{font-weight:650;font-size:14px}
.gopt-pct{font-weight:800;font-size:13px;display:none}
.gopt-fill{position:absolute;left:0;bottom:0;top:auto;height:100%;width:0;background:var(--chip);z-index:1;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.gopt.has-img .gopt-fill{height:auto;top:auto;bottom:0;/* fill only over the body area */}
.gopt.voted{cursor:default}
.gopt.voted:hover{border-color:var(--line)}
.gopt.voted .gopt-pct{display:inline}
.gopt.mine{border-color:var(--ink)}
.gopt.mine .gopt-fill{background:var(--lime);opacity:.5}
.gopt.lead .gopt-fill{background:var(--lime);opacity:.32}
.gopt .tick{color:var(--ink)}
/* on image tiles, results bar sits under the image in the body row */
.gopt.has-img .gopt-body{background:var(--card,#fff)}
:root[data-theme="dark"] .gopt.has-img .gopt-body{background:#15140f}

/* infinite scroll sentinel */
.feed-more{min-height:8px;padding:6px 0}
.feed-end{color:var(--soft);font-size:13px;padding:18px 0 8px;text-align:center}

/* community story card */
.story-commcard{display:flex;flex-direction:column;gap:8px;padding:26px 22px;border-radius:20px;color:#fff;text-decoration:none;min-height:220px;justify-content:center;text-align:center;align-items:center}
.scc-badge{font-size:12px;font-weight:800;background:rgba(255,255,255,.2);padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.scc-name{font-family:var(--serif);font-size:26px;font-weight:900;line-height:1.15}
.scc-desc{font-size:13.5px;opacity:.9;max-width:260px}
.scc-meta{font-size:12.5px;opacity:.85;font-weight:700}
.scc-cta{margin-top:6px;background:#fff;color:#111;font-weight:800;font-size:13px;padding:9px 18px;border-radius:999px}
/* shared poll card community chip */
.cp-comm{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--muted);
  background:var(--chip);padding:3px 9px;border-radius:999px;text-decoration:none;margin:2px 0 8px}
/* network grid + view toggle */
.net-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.view-toggle{display:flex;gap:2px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vt{background:none;border:none;padding:7px 11px;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.vt.on{background:var(--ink);color:#fff}
.net-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.net-tile{border:1px solid var(--line);border-radius:16px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.net-tile:hover{background:var(--panel)}
.net-tile-av{cursor:pointer;margin-bottom:6px}
.net-tile b{font-size:14px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.net-tile span{font-size:12px;color:var(--soft)}
.net-tile em{font-style:normal;font-size:11.5px;color:var(--muted)}

/* ============================================================
   FULL RESPONSIVE PASS — phones → tablets → desktop, landscape,
   safe-area insets, overflow guards for newer components
   ============================================================ */

/* global overflow + sizing guards */
*{min-width:0}
html{-webkit-text-size-adjust:100%}
img,video,canvas,svg{max-width:100%}
.card,.modal,.sheet,.panel,.about-card,.pts-hero,.ins-hero,.comm-hero{overflow-wrap:anywhere;word-break:break-word}
.th-last,.net-who b,.net-who span,.net-who em,.lb-info b,.vr-info b,.cp-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
pre,code{white-space:pre-wrap;word-break:break-word}
input,textarea,select{max-width:100%}
/* iOS: inputs ≥16px avoid auto-zoom on focus */
@media (max-width:820px){ input,textarea,select{font-size:16px} }

/* safe-area insets (notches / home indicator) */
.tabbar{padding-bottom:env(safe-area-inset-bottom)}
.side{padding-top:calc(22px + env(safe-area-inset-top))}
@media (max-width:820px){ .topbar{padding-top:calc(10px + env(safe-area-inset-top))} }

/* tablets: keep two-column, roomy */
@media (min-width:821px) and (max-width:1100px){
  .app{grid-template-columns:220px minmax(0,1fr);gap:20px;padding:0 18px}
}

/* small phones */
@media (max-width:480px){
  .page-title{font-size:20px}
  .inbox-head,.net-head{flex-wrap:wrap;gap:8px}
  .comm-hero-top{flex-direction:column;align-items:flex-start;gap:8px}
  .comm-actions{flex-wrap:wrap}
  .instat-grid{grid-template-columns:1fr 1fr}
  .pts-ways{grid-template-columns:1fr}
  .net-grid{grid-template-columns:repeat(2,1fr)}
  .comm-grid{grid-template-columns:1fr}
  .about-row em{margin-left:0}
  .req-thread{flex-wrap:wrap}
  .req-actions{width:100%;justify-content:flex-end}
  .msg-tabs,.net-tabs,.prof-tabs,.react-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .msg-tabs::-webkit-scrollbar,.net-tabs::-webkit-scrollbar,.prof-tabs::-webkit-scrollbar{display:none}
  .msg-tabs button,.net-tabs button,.prof-tabs button{white-space:nowrap}
  .share-people,.share-apps{gap:10px}
  .sp-person,.share-app{width:62px}
}

/* very small phones (≤360px) */
@media (max-width:360px){
  .opts.grid,.net-grid,.instat-grid{grid-template-columns:1fr 1fr}
  .lay-opt{padding:9px;font-size:12.5px}
  .btn.btn-sm{padding:7px 11px;font-size:12.5px}
  .pts-big{font-size:34px}
  .scc-name{font-size:22px}
}

/* landscape phones: shrink tall hero elements so content fits */
@media (max-height:480px) and (orientation:landscape){
  .side{overflow-y:auto}
  .story-commcard{min-height:150px;padding:16px}
  .pts-hero{padding:14px}
  .auth-hero{display:none}
}

/* chat + story fill the viewport correctly on mobile browsers (dvh) */
.chat-wrap{height:calc(100dvh - 64px)}
@media (max-width:820px){ .chat-wrap{height:calc(100dvh - 120px)} }
.story-screen{height:100dvh}

/* grid poll options: never overflow, tighten on narrow */
.opts.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.gopt-lbl{overflow-wrap:anywhere}

/* horizontal scroll safety for tab/chip rows on all sizes */
.atabs{overflow-x:auto;scrollbar-width:none}
.atabs::-webkit-scrollbar{display:none}

/* group chat bubbles + community cards wrap */
.bub,.gm-name,.cp-q,.scc-desc{overflow-wrap:anywhere}

/* wide desktop: cap line length so feed stays readable */
@media (min-width:1500px){ .app{max-width:1440px} }

/* prevent the fixed drawer from being scroll-locked short on small heights */
@media (max-width:820px){ .side{overflow-y:auto;-webkit-overflow-scrolling:touch} }

/* tap targets ≥44px on touch */
@media (hover:none){
  .iconbtn,.tb-icon,.vt,.chat-attach-btn,.chat-send,.story-x,.story-del,.close{min-width:44px;min-height:44px}
  .tabbar a{min-height:52px}
}

/* ============ scroll-hide header + bottom nav (mobile) ============ */
@media (max-width:820px){
  .topbar{transition:transform .28s cubic-bezier(.4,0,.2,1)}
  .tabbar{transition:transform .28s cubic-bezier(.4,0,.2,1)}
  body.nav-hidden .topbar{transform:translateY(-100%)}
  body.nav-hidden .tabbar{transform:translateY(120%)}

  /* full-screen messenger: hide global chrome on the messages route */
  /* full-screen messenger + profile: hide global chrome on mobile (in-page back button provided) */
  body[data-route="messages"] .topbar,
  body[data-route="profile"] .topbar{display:none !important}
  body[data-route="messages"] .tabbar,
  body[data-route="profile"] .tabbar{display:none !important}
  body[data-route="messages"] .main,
  body[data-route="profile"] .main{padding-top:0;padding-bottom:0}
}
/* inbox mobile back button (hidden on desktop) */
.msg-back{display:none}
@media (max-width:820px){ .msg-back{display:inline-flex;margin-right:2px} }

/* group create/details icon picker */
.g-iconrow{display:flex;gap:12px;align-items:flex-start;margin-bottom:4px}
.g-iconpick{position:relative;width:60px;height:60px;flex:0 0 auto;border-radius:50%;background:var(--chip);
  border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;overflow:hidden;color:var(--muted)}
.g-iconprev{width:100%;height:100%;display:grid;place-items:center}
.g-iconprev img{width:100%;height:100%;object-fit:cover}
.g-iconedit{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:800;border:2px solid var(--panel)}

/* group details sheet */
.gd-head{text-align:center;padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.gd-icon{width:88px;height:88px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;margin:0 auto 10px;overflow:hidden}
.gd-icon img{width:100%;height:100%;object-fit:cover}
.gd-name{font-family:var(--serif);font-size:23px;margin:0 0 2px}
.gd-count{font-size:13px;color:var(--soft)}
.gd-desc{font-size:14px;color:var(--muted);margin:10px auto 12px;max-width:340px;line-height:1.5}
.gd-desc.gd-muted{color:var(--soft);font-style:italic}
.gd-mtitle{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);margin:4px 0 8px}
.gd-admin{font-size:11.5px;color:var(--soft);font-weight:800}
.gd-addbtn{margin-top:12px;width:100%}
.gd-editform{padding:6px 0}

/* ---- auth: google button + divider + verify code ---- */
.auth-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--soft);font-size:12.5px}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--line)}
.btn-google{background:#fff;color:#3c4043;border:1.5px solid #dadce0;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px}
.btn-google:hover{background:#f7f8f8;border-color:#d2d5d9}
:root[data-theme="dark"] .btn-google{background:#1a1a17;color:#e8e6df;border-color:#3a3a34}
:root[data-theme="dark"] .btn-google:hover{background:#212019}
.g-logo{font-family:'Product Sans',Arial,sans-serif;font-weight:800;font-size:17px;
  background:conic-gradient(from -45deg,#ea4335 110deg,#4285f4 90deg 180deg,#34a853 180deg 270deg,#fbbc05 270deg) 73% 55%/150% 150% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.code-inp{font-size:30px;text-align:center;letter-spacing:14px;font-weight:800;padding:14px;font-family:var(--serif)}
.vc-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:13px;color:var(--soft)}

/* ---- brand logo image (replaces the old text badge) ---- */
img.logo{object-fit:cover;background:transparent!important;display:inline-block;vertical-align:middle}
.brand img.logo{width:42px;height:42px;border-radius:13px}
.tb-brand img.logo{width:34px;height:34px;border-radius:10px}
.auth-mobile-brand img.logo{width:36px;height:36px;border-radius:11px}
@media (max-width:820px){ .tb-brand img.logo{width:30px;height:30px;border-radius:9px} }

/* ============ quiz polls ============ */
.quiz-toggle{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:13.5px;margin-bottom:4px}
.quiz-toggle input{width:17px;height:17px;accent-color:var(--ink);flex:0 0 auto}
.quiz-hint{font-size:12px;color:var(--soft);margin:2px 2px 8px}
.opt-correct{display:none;flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:none;cursor:pointer;font-weight:800;color:var(--soft);font-size:13px}
.quiz-on .opt-correct{display:inline-flex;align-items:center;justify-content:center}
.opt-edit.is-correct .opt-correct{background:#dff5c8;border-color:#8fce3f;color:#3d6b12}
.quiz-chip{display:inline-block;background:var(--ink);color:var(--lime);font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;vertical-align:middle}
.quiz-result{margin-top:10px;padding:10px 13px;border-radius:12px;font-weight:700;font-size:13.5px}
.quiz-result.ok{background:#e7f7d8;color:#3d6b12}
.quiz-result.no{background:#fdecec;color:var(--red)}
.opt.correct,.gopt.correct{border-color:#8fce3f!important}
.opt.correct .fill,.gopt.correct .gopt-fill{background:#cdefa0!important;opacity:.6}
.opt.wrong,.gopt.wrong{border-color:#e79a9a!important}
.opt.wrong .fill,.gopt.wrong .gopt-fill{background:#f6d4d4!important;opacity:.6}
.cross{color:var(--red);font-weight:800}

/* ============ streaks + badges (points page) ============ */
.streak-row{display:flex;gap:10px;margin:14px 0 4px;flex-wrap:wrap}
.streak-card{flex:1;min-width:96px;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;background:var(--panel)}
.streak-ic{font-size:22px;display:block}
.streak-card b{font-size:20px;font-family:var(--serif);display:block;margin-top:2px}
.streak-card em{font-style:normal;font-size:11.5px;color:var(--soft)}
.pstat-streak{color:#c2610a}
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.badge{position:relative;border:1px solid var(--line);border-radius:16px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.badge.earned{background:var(--panel);border-color:#cbe79a}
.badge.locked{opacity:.5;filter:grayscale(.7)}
.badge-ic{font-size:30px}
.badge b{font-size:13.5px}
.badge-desc{font-size:11px;color:var(--soft);line-height:1.35}
.badge-tick{position:absolute;top:8px;right:9px;color:#5c9c1a;font-weight:800}
.badge-lock{position:absolute;top:8px;right:9px;font-size:12px}
@media (max-width:480px){ .badges-grid{grid-template-columns:repeat(2,1fr)} }

/* mobile full-screen routes (profile/messages): keep the in-page back button reachable */
@media (max-width:820px){
  body[data-route="profile"] .back-btn{
    position:sticky; top:0; z-index:30; margin:0 0 10px;
    padding-top:calc(10px + env(safe-area-inset-top));
    background:var(--bg,var(--panel)); backdrop-filter:saturate(180%) blur(8px);
    border:none; border-bottom:1px solid var(--line); border-radius:0;
    width:calc(100% + 32px); margin-left:-16px; padding-left:16px; padding-right:16px;
  }
  body[data-route="messages"] .inbox-head{
    position:sticky; top:0; z-index:30;
    padding-top:calc(8px + env(safe-area-inset-top));
    background:var(--bg,var(--panel)); backdrop-filter:saturate(180%) blur(8px);
  }
}

/* floating "+" create button — mobile profile page only (bottom-right) */
.fab-create{display:none}
@media (max-width:820px){
  body[data-route="profile"] .fab-create{
    display:grid; place-items:center; position:fixed;
    right:18px; bottom:calc(18px + env(safe-area-inset-bottom));
    width:56px; height:56px; border-radius:50%; z-index:90;
    background:var(--lime); color:var(--ink); border:none;
    box-shadow:0 6px 20px rgba(0,0,0,.28); cursor:pointer;
  }
  body[data-route="profile"] .fab-create:active{transform:scale(.94)}
  body[data-route="profile"] .fab-create .ico{width:26px;height:26px}
}

/* ============ mobile touch UX ============ */
@media (max-width:820px){
  /* prevent the browser's horizontal back/forward swipe from fighting our tab swipe */
  html,body{overscroll-behavior-x:contain}
  /* slide-in animation when switching tabs by swipe */
  #main.swipe-in-right{animation:swipeInR .3s cubic-bezier(.22,.61,.36,1)}
  #main.swipe-in-left{animation:swipeInL .3s cubic-bezier(.22,.61,.36,1)}
  /* tactile press feedback on interactive elements */
  .btn:active,.tb-item:active,.tb-create:active,.opt:active,.gopt:active,
  .card .act:active,.fab-create:active,.pill:active,.chip:active{transform:scale(.96)}
}
@keyframes swipeInR{from{opacity:.35;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}
@keyframes swipeInL{from{opacity:.35;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}}

/* ============ bottom action sheet (card ⋮ / profile menus on mobile) ============ */
.action-sheet{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.as-title{font-size:12.5px;color:var(--soft);font-weight:700;text-align:center;padding:2px 0 12px;
  border-bottom:1px solid var(--line);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-list{display:flex;flex-direction:column;gap:2px}
.as-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;
  padding:15px 12px;font-size:15.5px;color:var(--ink);cursor:pointer;border-radius:12px;font-family:inherit}
.as-item:active{background:var(--chip)}
.as-item .as-ic{display:inline-flex;width:22px;justify-content:center;color:var(--muted)}
.as-item.danger{color:var(--red)}
.as-item.danger .as-ic{color:var(--red)}
.as-cancel{justify-content:center;margin-top:12px;background:var(--chip);font-weight:800;font-size:15.5px;
  border-radius:14px;padding:16px 12px;color:var(--ink)}
.as-cancel:active{background:var(--line);transform:scale(.99)}

/* ============ full-screen comments (poll detail) on mobile ============ */
@media (max-width:820px){
  body[data-route="poll"] .tabbar{display:none !important}
  body[data-route="poll"] .detail-comments{padding-bottom:84px}
  /* pin the comment composer to the bottom like a chat bar */
  body[data-route="poll"] .cbox{
    position:fixed; left:0; right:0; bottom:0; z-index:70; margin:0;
    background:var(--panel); border-top:1px solid var(--line);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    display:flex; align-items:flex-end; gap:8px;
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
  }
  body[data-route="poll"] .cbox .field{min-height:42px;max-height:120px}
}

/* ============================ QUIZ MODE ============================ */
.quiz-wrap{max-width:640px;margin:0 auto}
.quiz-top{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 16px;gap:12px}
.quiz-title{font-family:var(--serif);font-size:24px;margin:0;display:flex;align-items:center;gap:9px}
.quiz-title .ico{width:24px;height:24px;color:var(--ink)}
.quiz-score{font-size:14px;color:var(--muted);white-space:nowrap}
.quiz-score b{color:var(--ink);font-size:16px}
.qs-hint{color:var(--soft);font-size:12.5px}
.quiz-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.qc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.qc-author{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;font-weight:600}
.qc-remain{font-size:12px;color:var(--soft);background:var(--chip);padding:3px 10px;border-radius:999px}
.qc-q h2{font-family:var(--serif);font-size:22px;line-height:1.3;margin:0 0 4px}
.qc-img{border-radius:14px;overflow:hidden;margin-bottom:12px;max-height:260px}
.qc-img img{width:100%;height:100%;object-fit:cover;display:block}
.qc-opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.qc-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--line);
  border-radius:14px;padding:15px 16px;font-size:15.5px;font-family:inherit;color:var(--ink);cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.qc-opt:not(:disabled):active{transform:scale(.98)}
.qc-opt:not(:disabled):hover{border-color:var(--ink)}
.qc-mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line)}
.qc-opt.picked .qc-mark{border-color:var(--ink)}
.qc-opt.correct{border-color:#8fce3f;background:#eef8dd}
.qc-opt.correct .qc-mark{border-color:#5c9c1a;background:#5c9c1a}
.qc-opt.correct .qc-mark::after{content:'✓';color:#fff;font-size:13px;display:grid;place-items:center;height:100%;font-weight:800}
.qc-opt.wrong{border-color:#e79a9a;background:#fdecec}
.qc-opt.wrong .qc-mark{border-color:var(--red);background:var(--red)}
.qc-opt.wrong .qc-mark::after{content:'✕';color:#fff;font-size:12px;display:grid;place-items:center;height:100%;font-weight:800}
:root[data-theme="dark"] .qc-opt.correct{background:#22300f}
:root[data-theme="dark"] .qc-opt.wrong{background:#331616}
.qc-foot{margin-top:16px}
.qc-verdict{font-weight:800;font-size:17px;margin-bottom:8px}
.qc-verdict.ok{color:#5c9c1a}
.qc-verdict.no{color:var(--red)}
.qc-explain{background:var(--chip);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;color:var(--muted);margin-bottom:14px}
.qc-next{padding:14px}
.quiz-done{text-align:center;padding:40px 20px;background:var(--panel);border:1px solid var(--line);border-radius:20px}
.qd-emoji{font-size:52px}
.quiz-done h2{font-family:var(--serif);margin:8px 0 6px}
.quiz-done p{color:var(--muted);margin:0 auto 16px;max-width:340px}
.qd-stats{font-size:15px;margin-bottom:16px}.qd-stats b{font-size:20px}
.qd-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* feed quiz banner extras */
.quiz-result{display:flex;flex-direction:column;gap:6px}
.qr-explain{font-weight:400;color:var(--muted);font-size:13px;line-height:1.5}
.qr-more{font-weight:700;font-size:13px;color:var(--ink);text-decoration:none;align-self:flex-start}

/* ============ full-screen messenger: composer pinned to bottom (mobile) ============ */
@media (max-width:820px){
  body[data-route="messages"] .chat-wrap{height:100dvh;height:100svh;min-height:0}
  body[data-route="messages"] .chat-head{
    padding-top:calc(10px + env(safe-area-inset-top));
    background:var(--bg);backdrop-filter:saturate(1.2) blur(6px)}
  body[data-route="messages"] .chat-body{padding-bottom:76px}
  body[data-route="messages"] .chat-input{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--line);
    box-shadow:0 -3px 14px rgba(0,0,0,.06)}
}

/* bottom sheets grabbable feel */
.sheet-grab{cursor:grab}

/* ============ pull-to-refresh ============ */
html,body{overscroll-behavior-y:contain}
.ptr{position:fixed;top:-46px;left:50%;transform:translateX(-50%);z-index:60;
  width:38px;height:38px;border-radius:50%;background:var(--panel);box-shadow:0 4px 14px rgba(0,0,0,.15);
  display:grid;place-items:center;pointer-events:none;transition:transform .2s ease}
.ptr-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--ink);transition:transform .1s}
.ptr.ready .ptr-spin{border-top-color:var(--lime);transform:rotate(180deg)}
.ptr.spinning .ptr-spin{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
@media (min-width:821px){ .ptr{display:none} }

/* ============ chat message swipe affordance ============ */
@media (max-width:820px){
  .msg[data-mid]{will-change:transform}
  .chat-body .msg{touch-action:pan-y}
}

/* ============ AI summary button + sheet ============ */
.act-ai .ai-lbl{font-size:11.5px;font-weight:800;letter-spacing:.02em;margin-left:3px}
.act-ai{color:#7b4dd8}
.act-ai .ico{color:#7b4dd8}
.ai-sheet{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.ai-head{display:flex;align-items:center;gap:9px;padding:2px 0 12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.ai-head h3{margin:0;flex:1;font-family:var(--serif);font-size:19px}
.ai-head .ico{color:#7b4dd8}
.ai-q{font-family:var(--serif);font-size:17px;line-height:1.35;margin-bottom:12px;color:var(--ink)}
.ai-para{font-size:15px;line-height:1.65;color:var(--muted)}
.ai-insights{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ai-chip{background:var(--chip);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;color:var(--ink)}
.ai-foot{font-size:12px;color:var(--soft);margin-top:16px;text-align:center}
.ai-loading{text-align:center;padding:30px 0}
.ai-loading p{color:var(--soft);font-size:13.5px;margin-top:14px}
.ai-dot{display:inline-block;width:9px;height:9px;margin:0 3px;border-radius:50%;background:#7b4dd8;animation:aidot 1s infinite ease-in-out}
.ai-dot:nth-child(2){animation-delay:.15s}.ai-dot:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}

/* ============ multi-question survey (series) ============ */
.series-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.series-steps{display:flex;gap:4px;flex:1}
.series-step{height:4px;flex:1;border-radius:2px;background:var(--line)}
.series-step.on{background:var(--ink)}
.series-label{font-size:11.5px;color:var(--soft);font-weight:700;white-space:nowrap}
.series-chip{display:inline-block;background:#e9e4fb;color:#5b3fb0;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;vertical-align:middle}
:root[data-theme="dark"] .series-chip{background:#2a2350;color:#c9bdf5}
.series-in{animation:seriesIn .34s cubic-bezier(.22,.61,.36,1)}
@keyframes seriesIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.series-advancing{opacity:.55;transition:opacity .3s}

/* create modal — advanced survey section */
.adv-wrap{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.adv-toggle{width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 0}
.adv-caret{margin-left:auto;transition:transform .2s}
.adv-toggle.open .adv-caret{transform:rotate(180deg)}
.adv-hint{font-size:12.5px;color:var(--soft);line-height:1.5;margin:4px 0 12px}
.sq-block{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;background:var(--bg)}
.sq-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sq-head b{font-size:13px}
.sq-del{background:none;border:none;color:var(--soft);cursor:pointer;font-size:15px}
.sq-q{margin-bottom:8px}
.sq-opts{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.sq-addopt{background:none;border:1px dashed var(--line);border-radius:10px;padding:8px;width:100%;font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit}

/* survey per-question quiz markers (create) */
.sq-optrow{display:flex;align-items:center;gap:8px}
.sq-optrow .sq-opt{flex:1}
.sq-block .opt-correct{display:none}
.sq-block.sq-quizon .opt-correct{display:inline-flex;align-items:center;justify-content:center}
.sq-optrow.is-correct .opt-correct{background:#dff5c8;border-color:#8fce3f;color:#3d6b12}
.sq-quiz{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:8px;cursor:pointer}
.sq-quiz input{width:16px;height:16px;accent-color:var(--ink)}

/* survey skip + owner results */
.series-skip{margin-top:10px;background:none;border:1px dashed var(--line);border-radius:12px;padding:9px;width:100%;font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit}
.series-skip:active{transform:scale(.98)}
.series-results-btn{background:none;border:none;cursor:pointer;font-size:15px;padding:2px 4px;line-height:1}

/* survey results sheet */
.sr-title{font-family:var(--serif);font-size:18px;margin-bottom:14px}
.sr-q{border-top:1px solid var(--line);padding:14px 0}
.sr-qhead{font-weight:700;font-size:15px;line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sr-num{background:var(--ink);color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px}
.sr-total{font-size:12px;color:var(--soft);margin:3px 0 10px}
.sr-opt{margin-bottom:9px}
.sr-oprow{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:4px}
.sr-opt.correct .sr-olbl{color:#5c9c1a;font-weight:700}
.sr-opct{color:var(--muted)}
.sr-bar{height:7px;background:var(--chip);border-radius:4px;overflow:hidden}
.sr-bar span{display:block;height:100%;background:var(--ink);border-radius:4px}
.sr-opt.correct .sr-bar span{background:#7bc043}

/* ============ simplified create modal + drafts ============ */
.mhead-actions{display:flex;align-items:center;gap:8px}
.more-wrap{margin-top:16px;border-top:1px solid var(--line);padding-top:6px}
.more-toggle{width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:6px;padding:10px 0}
.more-caret{margin-left:auto;transition:transform .2s}
.more-toggle.open .more-caret{transform:rotate(180deg)}
.more-body{padding-top:4px}
/* drafts list sheet */
.draft-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.draft-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:14px;cursor:pointer}
.draft-item:active{background:var(--chip)}
.draft-info{flex:1;min-width:0}
.draft-q{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.draft-meta{font-size:12px;color:var(--soft);margin-top:2px}
.draft-del{background:none;border:none;cursor:pointer;font-size:15px;padding:6px;opacity:.7}
.draft-del:active{opacity:1}

/* ============ create: poll-type picker ============ */
.type-picker .tp-sub{color:var(--muted);font-size:13.5px;margin:2px 0 16px}
.type-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){ .type-grid{grid-template-columns:1fr 1fr} }
.type-card{display:flex;align-items:center;gap:13px;text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:14px 15px;cursor:pointer;font-family:inherit;transition:border-color .12s,transform .1s,background .12s}
.type-card:hover{border-color:var(--ink)}
.type-card:active{transform:scale(.98);background:var(--chip)}
.tc-ico{font-size:24px;flex:none;width:38px;height:38px;display:grid;place-items:center;background:var(--chip);border-radius:11px}
.tc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tc-txt b{font-size:15px}
.tc-txt small{color:var(--soft);font-size:12px;line-height:1.35}
.mhead-back{background:none;border:none;font-size:20px;line-height:1;color:var(--ink);cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;margin-right:4px;transition:background .15s}
.mhead-back:hover{background:var(--chip)}
.mhead-back:active{background:var(--line)}
.tc-tip{background:var(--chip);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--muted);margin-bottom:12px}

/* ============ QR + share sheet ============ */
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0 10px}
.qr-svg{border-radius:12px;border:1px solid var(--line);background:#fff;padding:8px;max-width:100%;height:auto}
.qr-sub{font-size:12.5px;color:var(--soft)}
.qr-err{font-size:13px;color:var(--soft);padding:20px}
.qr-link{font-size:12.5px;color:var(--muted);background:var(--chip);border-radius:10px;padding:10px 12px;
  text-align:center;word-break:break-all;cursor:pointer;margin-bottom:12px}
.qr-link:active{background:var(--line)}
.sa-lbl{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.2}
.aemoji{font-size:20px;line-height:1}

/* ============ explore page ============ */
.ex-top{margin:6px 0 16px}
.ex-body{padding-bottom:6px}
.ex-hero{padding:2px 4px 16px}
.ex-h1{font-size:26px;margin:0;letter-spacing:-.02em}
.ex-sub{color:var(--muted);font-size:13.5px;margin:5px 0 0}
.ex-sec{margin-bottom:24px}
.ex-sec-h{font-weight:800;font-size:15px;padding:0 4px 11px}
.ex-sec-h-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ex-seg{display:inline-flex;background:var(--chip);border-radius:99px;padding:3px}
.ex-seg button{border:none;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:6px 15px;border-radius:99px;cursor:pointer;transition:color .15s}
.ex-seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10)}
.ex-people{display:flex;gap:12px;overflow-x:auto;padding:2px 4px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.ex-people::-webkit-scrollbar{display:none}
.ex-person{flex:none;width:132px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 12px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;scroll-snap-align:start}
.ex-person b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
.ex-person>span{font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ex-person .ex-follow{margin-top:9px;width:100%}
.ex-person .av{margin-bottom:4px}
.tagcloud .pill.sk{border-radius:99px;display:inline-block}
/* fixed bottom search bar (mobile) */
.ex-searchbar{display:none}
@media (max-width:820px){
  .ex-top{display:none}
  body[data-route="explore"] #main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  .ex-searchbar{display:flex;align-items:center;gap:8px;position:fixed;left:0;right:0;z-index:70;
    bottom:calc(58px + env(safe-area-inset-bottom));padding:9px 12px;
    background:var(--panel);border-top:1px solid var(--line);
    transition:bottom .28s cubic-bezier(.4,0,.2,1)}
  body.nav-hidden .ex-searchbar{bottom:calc(8px + env(safe-area-inset-bottom))}
  .ex-searchbar .search{flex:1}
  .ex-clear{flex:none;width:36px;height:36px;border-radius:50%;border:none;background:var(--chip);
    cursor:pointer;font-size:14px;color:var(--muted);display:grid;place-items:center}
}

/* ============ share sheet: QR-on-tap panel ============ */
.qr-panel{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;animation:fade .2s ease}
.qr-panel[hidden]{display:none}
.qr-save{width:100%;margin-top:4px;justify-content:center}

/* ============ explore: raise search to top when active (mobile) ============ */
@media (max-width:820px){
  .ex-searchbar{transition:top .28s cubic-bezier(.4,0,.2,1),bottom .28s cubic-bezier(.4,0,.2,1)}
  body.ex-searching .topbar{transform:translateY(-100%)}
  body.ex-searching .ex-searchbar{top:0;bottom:auto;padding-top:calc(9px + env(safe-area-inset-top));border-top:none;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.05)}
  body.ex-searching[data-route="explore"] #main{padding-top:60px;padding-bottom:24px}
}

/* ============ action sheet: author header (Instagram-like) ============ */
.as-head{margin:2px 0 6px;padding:0 4px 12px;border-bottom:1px solid var(--line)}
.as-person{display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;padding:4px 6px;border-radius:12px}
.as-person:active{background:var(--chip)}
.as-pwho{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.as-pwho b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-pwho span{font-size:12.5px;color:var(--soft)}
.as-pgo{color:var(--soft);font-size:22px;font-weight:600;line-height:1}

/* ============ small-mobile responsiveness (cards, profile, sheets) ============ */
/* never let a long word or link push the layout wider than the screen */
.q, .card .q, .comment-body, .cbody, .profile-bio, .sheet-poll span, .qr-link{ overflow-wrap:anywhere; word-break:break-word; }
html,body{ max-width:100%; overflow-x:clip; }

@media (max-width:400px){
  .card{ padding:14px 14px 6px; border-radius:16px; }
  .q{ font-size:18px; }
  .phead{ gap:9px; margin-bottom:11px; }
  .phead .av,.phead .av.s40{ width:38px; height:38px; }
  .pacts{ gap:0; }
  .act{ padding:8px 8px; font-size:12.5px; gap:5px; }
  .opt,.gopt{ font-size:14px; }
  /* profile card */
  .profile-banner{ height:88px; }
  .profile-avwrap{ margin-top:-32px; }
  .profile-avwrap .av{ width:72px; height:72px; font-size:26px; }
  .profile-name{ font-size:20px; }
  .profile-body{ padding:0 14px 16px; }
  .profile-actions{ position:static; margin-top:12px; width:100%; flex-wrap:wrap; gap:8px; justify-content:flex-start; }
  .profile-actions .btn{ flex:1 1 auto; justify-content:center; }
  .profile-meta{ gap:6px 12px; font-size:13px; }
  /* share sheet on tiny screens */
  .share-people,.share-apps{ gap:10px; }
  .sp-person,.share-app{ width:60px; }
  .sp-pav,.sp-pav .av{ width:52px; height:52px; }
  .sa-ic{ width:48px; height:48px; }
  .qr-svg{ width:180px !important; height:180px !important; }
  .sheet{ padding:8px 12px 14px; }
}
@media (max-width:340px){
  .q{ font-size:17px; }
  .act .n{ display:none; }          /* drop counts if truly cramped */
  .act[data-like] .n,.act.cmt .n{ display:inline; }
}

/* create: tappable poll-type selector in composer header */
.comp-type{display:inline-flex;align-items:center;gap:7px;background:var(--chip);border:none;border-radius:99px;
  padding:8px 14px;font-family:inherit;font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;transition:background .14s,transform .1s}
.comp-type:hover{background:var(--line)}
.comp-type:active{transform:scale(.97)}
.ct-caret{font-size:11px;color:var(--soft);font-weight:600}

/* ============ hide scrollbars everywhere (keep scrolling) ============ */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}

/* ============ profile card — refreshed look ============ */
.profile-card{border:1px solid var(--line);border-radius:22px;box-shadow:0 2px 18px rgba(0,0,0,.045);margin-bottom:16px}
.profile-banner{height:124px;background-size:cover;background-position:center}
.profile-body{padding:0 20px 20px}
.profile-avwrap{margin-top:-40px;margin-bottom:10px}
.profile-avwrap .av{width:90px;height:90px;font-size:33px;border:4px solid var(--card,#fff);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.profile-name{font-size:24px;letter-spacing:-.02em}
.profile-card .handle{color:var(--soft);font-size:14px;margin-top:2px}
.profile-bio{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.profile-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.profile-meta span{display:inline-flex;align-items:center;gap:5px;background:var(--chip);border-radius:99px;padding:5px 12px;font-size:12.5px;color:var(--muted)}
.profile-meta span a{color:var(--accent,#2d6cdf);text-decoration:none;font-weight:600}
/* stats: clean bordered row with dividers */
.profile-stats{display:flex;gap:0;margin-top:18px;padding-top:15px;border-top:1px solid var(--line);justify-content:space-between}
.profile-stats>*{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;font-size:11.5px;color:var(--soft);cursor:pointer;text-decoration:none}
.profile-stats>*+*{border-left:1px solid var(--line)}
.profile-stats b{font-size:17px;font-weight:800;color:var(--ink);font-family:var(--sans)}
.profile-stats .pstat-pts b{color:var(--accent,#2d6cdf)}
.profile-stats>*:hover b{opacity:.75}
/* settings quick-links separator */
.acct-sep{height:1px;background:var(--line);margin:9px 6px}

@media (max-width:400px){
  .profile-banner{height:96px}
  .profile-avwrap{margin-top:-34px}
  .profile-avwrap .av{width:74px;height:74px;font-size:27px}
  .profile-name{font-size:21px}
  .profile-body{padding:0 15px 16px}
  .profile-stats b{font-size:15px}
}

/* ============ icon buttons: no circle/border/outline (bare icon) ============ */
.iconbtn,.pmenu-btn{border:none !important;background:none;outline:none !important;box-shadow:none !important;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.pmenu-btn{width:auto;height:auto;padding:5px;border-radius:10px;color:var(--soft);line-height:0}
.pmenu-btn:focus,.pmenu-btn:focus-visible,.iconbtn:focus,.iconbtn:focus-visible{outline:none !important;box-shadow:none !important}
@media (hover:hover){ .pmenu-btn:hover{background:var(--chip);color:var(--ink)} }

/* ============ Instagram-style settings ============ */
.ig-set{max-width:640px;margin:0 auto;padding:2px 0 40px}
.ig-top{padding:6px 4px 10px}
.ig-top h1{font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:-.02em}
.ig-profile{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;font-family:inherit;color:inherit;
  margin:4px 0 18px;transition:background .12s}
.ig-profile:active{background:var(--chip)}
.ig-pw{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ig-pw b{font-size:16px;font-weight:800}
.ig-pw span{font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-sec{font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--soft);text-transform:none;
  padding:16px 6px 8px}
.ig-group{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ig-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;
  padding:15px 16px;font-family:inherit;font-size:15.5px;color:var(--ink);cursor:pointer;text-decoration:none;
  border-bottom:1px solid var(--line-2);transition:background .12s}
.ig-group .ig-row:last-child{border-bottom:none}
.ig-row:active{background:var(--chip)}
@media (hover:hover){ .ig-row:hover{background:var(--chip)} }
.ig-ic{flex:none;width:26px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink)}
.ig-lab{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-weight:600}
.ig-lab small{font-size:12px;color:var(--soft);font-weight:500}
.ig-chev{flex:none;color:var(--soft);font-size:22px;line-height:1;font-weight:400}
.ig-row.danger{color:var(--red)} .ig-row.danger .ig-ic{color:var(--red)}
.ig-ver{text-align:center;color:var(--soft);font-size:12px;padding:26px 0 6px}
/* settings sub-page header */
.ig-subhead{display:flex;align-items:center;gap:6px;padding:4px 2px 14px;position:sticky;top:0;z-index:6;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.3) blur(8px)}
.ig-back{border:none;background:none;font-size:30px;line-height:1;color:var(--ink);cursor:pointer;
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;padding:0;margin-top:-2px}
.ig-back:active{background:var(--chip)}
.ig-subhead h1{font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:-.02em}
:root[data-theme="dark"] .ig-group,:root[data-theme="dark"] .ig-profile{background:var(--panel)}

/* ============ create composer — UI/UX polish ============ */
.modal{max-width:544px}
.modal .mhead{margin-bottom:16px}
.comp-type{box-shadow:0 1px 2px rgba(21,20,15,.04)}
/* question: bigger, auto-growing, friendly */
#cq{min-height:66px;font-size:16.5px;line-height:1.45;resize:none;overflow:hidden;border-radius:14px;
  padding:14px 15px;font-family:var(--serif);font-weight:600}
#cq:focus{background:#fff}
#cqcount{font-variant-numeric:tabular-nums}
.f-lab{margin-top:20px;margin-bottom:9px;font-size:11px}
/* options: cleaner rows with a number chip, subtle remove */
#copts{display:flex;flex-direction:column;gap:9px}
.opt-edit{gap:9px;margin-bottom:0;align-items:center}
.opt-edit .grip{display:none}
.opt-edit .field{flex:1;border-radius:12px;padding:12px 14px;font-size:15px}
.opt-edit .rm{opacity:0;transition:opacity .14s,color .12s;font-size:15px;color:var(--soft);flex:none;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.opt-edit:hover .rm,.opt-edit:focus-within .rm{opacity:1}
.opt-edit .rm:hover{background:#fdeaea;color:var(--red)}
.opt-img-btn{width:38px;height:38px;border-radius:11px}
.add-opt{margin-top:10px;border-radius:12px;padding:12px;font-size:14px;transition:border-color .12s,color .12s,background .12s}
.add-opt:hover{background:var(--chip)}
/* more-options + survey toggles as clean cards */
.more-wrap{margin-top:20px}
.more-toggle,.adv-toggle{font-size:14.5px;font-weight:700;padding:12px 4px}
.more-body{padding-top:2px}
.quiz-toggle{border-radius:12px}
/* validation hint + sticky footer */
.comp-hint{font-size:12.5px;color:var(--soft);text-align:center;padding:12px 0 2px;font-weight:600}
.comp-hint:empty{display:none;padding:0}
.mfoot{margin-top:14px;gap:10px}
.mfoot #save-draft{flex:0 0 auto}
.mfoot #post{flex:1}
#post.is-disabled,#post:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
#post:not(:disabled){box-shadow:0 6px 18px rgba(21,20,15,.18)}
/* mobile: comfy sheet, sticky footer above the fold */
@media (max-width:560px){
  #cq{font-size:16px}
  .modal .mfoot{position:sticky;bottom:0;background:var(--panel);padding-top:12px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(21,20,15,.05);z-index:2}
  .comp-hint{padding:10px 0 0}
}

/* ============ Points page — polish ============ */
.pts-hero{background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--lime) 8%,var(--panel)));
  border:1px solid var(--line);border-radius:22px;box-shadow:0 2px 18px rgba(21,20,15,.05)}
.pts-badge{filter:drop-shadow(0 4px 10px rgba(21,20,15,.12))}
.pts-big{letter-spacing:-.02em}
.pts-bar{height:12px;background:var(--chip);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.pts-bar span{background:linear-gradient(90deg,var(--lime-d),#15c08a);transition:width .8s cubic-bezier(.22,1,.36,1)}
.sec-h{font-family:var(--serif);font-size:18px;font-weight:900;margin:22px 2px 12px}
.pts-brow{background:var(--panel);transition:border-color .12s}
.pts-brow:hover{border-color:var(--line-2)}
.perk-row{background:var(--panel);transition:transform .12s,border-color .12s}
.perk-row.on:hover{transform:translateY(-1px)}
.pts-way{background:var(--panel);transition:border-color .12s,transform .1s}
.pts-way:hover{border-color:var(--ink);transform:translateY(-1px)}
.streak-card{box-shadow:0 1px 2px rgba(21,20,15,.03)}

/* ============ Cover banner manager (settings) ============ */
.cover-mgr{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cov-tile{position:relative;width:150px;height:84px;border-radius:12px;border:1px solid var(--line);
  background-size:cover;background-position:center;flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cov-x{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;display:grid;place-items:center;line-height:1}
.cov-x:hover{background:rgba(0,0,0,.75)}
.cov-add{width:150px;height:84px;border-radius:12px;border:1.6px dashed var(--line);background:var(--chip);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-weight:700;font-size:13px;font-family:inherit}
.cov-add:hover{border-color:var(--ink);color:var(--ink)}

/* ============ Admin email — templates, selectors, responsive ============ */
.ae-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){ .ae-grid{grid-template-columns:320px 1fr;align-items:start} }
.ae-test{position:sticky;top:14px}
.ae-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ae-aud{background:var(--chip);border-radius:10px;padding:9px 13px;font-size:13px;color:var(--muted);margin:2px 0 14px}
.ae-aud b{color:var(--ink);font-family:var(--sans)}
.ae-selcount{font-size:12.5px;color:var(--soft);margin-top:6px;font-weight:700}
.btn-block{width:100%}
.panel .desc code{background:var(--chip);padding:1px 6px;border-radius:5px;font-size:12.5px}
@media (max-width:560px){ .ae-row{grid-template-columns:1fr} .ae-test{position:static} }

/* ============ Admin panel — full responsive ============ */
.atabs{overflow-x:auto;scrollbar-width:none;gap:4px}
.atabs::-webkit-scrollbar{display:none}
@media (max-width:760px){
  .admin-wrap,.admin-body{max-width:100%}
  .ogrid{grid-template-columns:repeat(2,1fr)}
  .panel{padding:18px}
  .urow,.prow,.crow{flex-wrap:wrap}
  .uacts{width:100%;justify-content:flex-start;margin-top:4px}
  .perk-edit-row{flex-wrap:wrap;gap:8px}
  .perk-thr .field{width:80px}
}
@media (max-width:420px){
  .ogrid{grid-template-columns:1fr 1fr}
  .ostat b{font-size:21px}
  .atab{padding:9px 12px;font-size:13.5px}
}

/* ============ photo viewer + tappable photo affordances ============ */
.photo-full{box-shadow:0 20px 60px rgba(0,0,0,.5);animation:pvIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes pvIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.photo-x{top:calc(16px + env(safe-area-inset-top));backdrop-filter:blur(6px)}
.profile-banner.tappable{cursor:pointer}
.profile-avwrap[role="button"]{cursor:pointer}
.profile-avwrap[role="button"]:active{transform:scale(.97)}
.av-tap{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit;border-radius:50%;line-height:0}
.av-tap:active{transform:scale(.96)}
.cov-tile{cursor:pointer}

/* ============ Results sheet ============ */
.res-q{font-family:var(--serif);font-size:17px;font-weight:800;line-height:1.35;margin:2px 0 6px}
.res-top{font-size:12.5px;color:var(--soft);font-weight:700;margin-bottom:14px}
.res-list{display:flex;flex-direction:column;gap:14px}
.res-row .res-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.res-lab{font-size:14.5px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.res-pct{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;flex:none}
.res-track{height:10px;border-radius:99px;background:var(--chip);overflow:hidden}
.res-fill{display:block;height:100%;border-radius:99px;background:var(--ink);
  transition:width .7s cubic-bezier(.22,1,.36,1)}
.res-row.lead .res-fill{background:linear-gradient(90deg,var(--lime-d),#15c08a)}
.res-row.lead .res-pct{color:var(--lime-d)}
.res-n{font-size:12px;color:var(--soft);margin-top:5px;font-variant-numeric:tabular-nums}

/* ============ Voter list sheet ============ */
.vt-group{margin-bottom:18px}
.vt-opt{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;
  letter-spacing:.02em;color:var(--soft);padding:0 2px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.vt-opt span{background:var(--chip);border-radius:99px;padding:2px 9px;color:var(--ink);font-variant-numeric:tabular-nums}
.vt-row{display:flex;align-items:center;gap:11px;padding:9px 4px;border-radius:12px;text-decoration:none;color:inherit}
.vt-row:hover{background:var(--chip)}
.vt-who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.vt-who b{font-size:14.5px;font-weight:750}
.vt-who span{font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ Profile cover carousel ============ */
.profile-banner.has-carousel{position:relative;overflow:hidden;padding:0}
.cc-track{display:flex;height:100%;width:100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cc-slide{flex:0 0 100%;height:100%;background-size:cover;background-position:center}
.cc-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:6px;z-index:2}
.cc-dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:width .25s,background .2s}
.cc-dot.on{width:20px;border-radius:99px;background:#fff}

/* ============ Community card — refreshed ============ */
.comm-card{display:block;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;text-decoration:none;color:inherit;transition:transform .14s,box-shadow .14s,border-color .14s}
.comm-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(21,20,15,.09);border-color:var(--line-2)}
.comm-cover{display:block;width:100%;height:82px;background-size:cover;background-position:center;position:relative}
.comm-joined{position:absolute;top:9px;right:10px;background:rgba(255,255,255,.94);color:#15140f;
  font-size:11px;font-weight:800;border-radius:99px;padding:3px 9px;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.comm-ava{position:absolute;top:56px;left:15px;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:16px;border:3px solid var(--panel);overflow:hidden;z-index:2;
  box-shadow:0 3px 10px rgba(21,20,15,.16)}
.comm-ava img{width:100%;height:100%;object-fit:cover;display:block}
.comm-body{display:flex;flex-direction:column;gap:5px;padding:14px 15px 15px;min-width:0}
.comm-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.comm-title b{font-size:16px;font-weight:850;letter-spacing:-.01em}
.cbadge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--muted);
  background:var(--chip);border-radius:99px;padding:3px 8px}
.cbadge.private{background:#fdf0e3;color:#95611c}
.comm-desc{font-size:13px;color:var(--muted);line-height:1.45;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.comm-meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--soft);margin-top:3px}
.cm-stat b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.cm-dot{opacity:.5}
.comm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
@media (max-width:400px){ .comm-cover{height:70px} .comm-ava{top:46px;width:42px;height:42px;font-size:14px} }

/* ============ results actions + recent searches ============ */
.res-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.res-acts .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
.rs-list{display:flex;flex-wrap:wrap;gap:8px}
.rs-item{display:inline-flex;align-items:center;gap:7px;background:var(--chip);border:none;border-radius:99px;
  padding:8px 14px;font-family:inherit;font-size:13.5px;font-weight:650;color:var(--ink);cursor:pointer;
  max-width:100%;transition:background .12s}
.rs-item:hover{background:var(--line)}
.rs-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-clear{background:none;border:none;color:var(--soft);font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;padding:2px 4px}
.rs-clear:hover{color:var(--ink)}

/* ============ Comments bottom sheet (LinkedIn-style) ============ */
.comments-sheet{max-height:88vh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.comments-sheet .sheet-head{flex:0 0 auto;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cs-poll{flex:0 0 auto;display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--chip);
  border:none;border-radius:12px;padding:10px 13px;margin:12px 0 4px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:650;color:var(--muted)}
.cs-poll:hover{background:var(--line)}
.cs-poll span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:10px 0 8px;scrollbar-width:none}
.cs-list::-webkit-scrollbar{display:none}
.cs-empty{text-align:center;padding:38px 16px;color:var(--soft)}
.cs-empty{font-size:34px;line-height:1}
.cs-empty p{font-size:15px;font-weight:700;color:var(--ink);margin:10px 0 3px}
.cs-empty span{font-size:13px}
/* composer pinned to the bottom of the sheet */
.cs-bar{flex:0 0 auto;display:flex;align-items:flex-end;gap:9px;padding:11px 0 calc(11px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--panel);position:sticky;bottom:0}
.cs-bar.signin{display:block;padding-top:13px}
.cs-av{flex:0 0 auto;line-height:0}
#cs-input{flex:1;min-height:40px;max-height:120px;resize:none;overflow-y:auto;border-radius:20px;
  padding:10px 15px;font-size:15px;line-height:1.35}
.cs-send{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--ink);color:var(--lime);display:grid;place-items:center;transition:transform .1s,opacity .12s}
.cs-send:hover{transform:scale(1.05)}
.cs-send:active{transform:scale(.94)}
.cs-send:disabled{opacity:.45;cursor:not-allowed}
.cs-list .comment{padding:11px 2px}
@media (max-width:560px){
  .comments-sheet{max-height:90vh}
  #cs-input{font-size:16px}   /* stops iOS zooming in on focus */
}

/* ============ Desktop: comments expand inline under the poll card ============ */
.card.ic-open{box-shadow:0 6px 26px rgba(21,20,15,.08)}
.ic-panel{margin:4px -2px 2px;padding:14px 0 4px;border-top:1px solid var(--line);animation:icIn .2s ease}
@keyframes icIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ic-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ic-head .ic-title{font-size:14px;font-weight:800;letter-spacing:-.01em}
.ic-close{border:none;background:none;cursor:pointer;color:var(--soft);font-size:14px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;line-height:1}
.ic-close:hover{background:var(--chip);color:var(--ink)}
.ic-list{max-height:420px;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;padding-right:2px}
.ic-list::-webkit-scrollbar{display:none}
.ic-list .comment{padding:10px 2px}
.ic-bar{display:flex;align-items:flex-end;gap:9px;padding-top:11px;margin-top:4px;border-top:1px solid var(--line)}
.ic-bar.signin{display:block}
.ic-input{flex:1;min-height:40px;max-height:120px;resize:none;overflow-y:auto;border-radius:20px;
  padding:10px 15px;font-size:14.5px;line-height:1.35}

/* =====================================================================
   DESKTOP REDESIGN — top bar, sidebar, tabs, right rail
   ===================================================================== */
.dtop{display:none}
@media (min-width:821px){
  .dtop{display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:60;
    height:66px;padding:0 24px;background:rgba(247,246,241,.86);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)}
  .dtop .dt-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:0 0 auto;width:236px}
  .dtop .dt-brand .logo{width:38px;height:38px;border-radius:12px}
  .dtop .dt-brand b{font-family:var(--serif);font-weight:900;font-size:23px;letter-spacing:-.03em}
  .dt-search{flex:1;max-width:620px;margin:0 auto;position:relative;display:flex;align-items:center}
  .dt-search .dt-mag{position:absolute;left:15px;color:var(--soft);display:grid;place-items:center;pointer-events:none}
  .dt-search input{width:100%;border:1px solid var(--line);background:var(--panel);border-radius:26px;
    padding:11px 16px 11px 44px;font-size:14.5px;font-family:inherit;color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s}
  .dt-search input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,20,15,.06)}
  .dt-kbd{position:absolute;right:14px;font-size:11.5px;color:var(--soft);font-weight:700;pointer-events:none}
  .dt-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
  .dt-ic{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
    color:var(--ink);text-decoration:none;transition:background .12s}
  .dt-ic:hover{background:var(--chip)}
  .dt-ic.on{background:var(--chip)}
  .dt-badge{position:absolute;top:5px;right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    background:var(--red,#e5484d);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
  .dt-create{padding:10px 18px;border-radius:22px;font-size:14px;white-space:nowrap}
  .dt-ava{border:none;background:none;padding:2px;cursor:pointer;border-radius:50%;line-height:0}
  .dt-ava:hover{box-shadow:0 0 0 3px var(--chip)}
  /* sticky columns tuck under the bar */
  .side{top:66px;height:calc(100vh - 66px);padding-top:16px}
  .rail{top:66px;height:calc(100vh - 66px);padding-top:16px}
  .side .brand{display:none}   /* logo lives in the top bar now */
  .main{padding-top:6px}
}

/* sidebar nav — soft pill for active, roomy rows */
@media (min-width:821px){
  .nav a{gap:15px;padding:11px 15px;border-radius:14px;font-weight:650;color:#3a382f}
  .nav a .ico{color:#6a6858}
  .nav a:hover{background:var(--chip)}
  .nav a.active{background:color-mix(in srgb,var(--lime) 34%,var(--panel));color:var(--ink)}
  .nav a.active .ico{color:var(--ink)}
  .nav a .nbadge{margin-left:auto;background:var(--lime-d,#9bcb1a);color:#1c1c14;font-weight:800;
    font-size:11.5px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
}
/* dark promo card */
.side-promo{background:var(--invert);color:var(--invert-fg);border-radius:18px;padding:16px 15px;margin:8px 8px 14px}
.side-promo b{font-family:var(--serif);font-weight:900;font-size:19px;line-height:1.15;display:block}
.side-promo .sp-hi{color:var(--lime)}
.side-promo p{font-size:12.5px;color:color-mix(in srgb,var(--invert-fg) 68%,transparent);margin:8px 0 13px;line-height:1.45}
.side-promo .btn-lime{padding:10px}

/* tabs — underline style like the mockup */
@media (min-width:821px){
  .tabs{position:static;background:none;backdrop-filter:none;gap:26px;border-bottom:1px solid var(--line);
    padding:0 4px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{background:none;border-radius:0;padding:14px 2px 15px;font-family:var(--serif);
    font-weight:800;font-size:16px;color:var(--soft);white-space:nowrap}
  .tabs button.active{background:none;color:var(--ink)}
  .tabs button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
    background:var(--lime);border-radius:99px}
  .tabs button:hover{color:var(--ink)}
}

/* right-rail cards */
.rail-card{padding:16px 16px 14px}
.rail-card .rc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.rail-card h4{font-family:var(--serif);font-weight:900;font-size:17px;margin:0;display:flex;align-items:center;gap:7px}
.rc-link{font-size:12.5px;font-weight:700;color:var(--lime-d,#7a9e14);text-decoration:none}
.rc-link:hover{text-decoration:underline}
.rc-body{display:flex;flex-direction:column}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red,#e5484d);display:inline-block;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red,#e5484d) 22%,transparent)}
/* trending rows */
.rail-card .trend{padding:9px 8px;border-radius:12px}
.rail-card .trend .rank{font-family:var(--serif);font-weight:900;font-size:17px;color:var(--soft);width:18px;text-align:center}
.rail-card .trend .t b{font-size:14.5px}
/* live poll items */
.live-item{display:flex;align-items:flex-start;gap:11px;padding:9px 8px;border-radius:12px;text-decoration:none;color:inherit}
.live-item:hover{background:var(--chip)}
.live-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--red,#e5484d) 12%,var(--panel));color:var(--red,#e5484d)}
.li-t{min-width:0;line-height:1.3}
.li-t b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.li-t span{font-size:12px;color:var(--muted)}
/* invite card */
.invite-card{display:flex;align-items:center;gap:12px}
.invite-card .ic-txt{min-width:0}
.invite-card .ic-txt b{font-family:var(--serif);font-weight:900;font-size:15.5px;display:block;line-height:1.2}
.invite-card .ic-txt p{font-size:12.5px;color:var(--muted);margin:6px 0 11px;line-height:1.45}
.invite-card .ic-gift{font-size:44px;flex:0 0 auto;filter:drop-shadow(0 6px 10px rgba(21,20,15,.12))}
/* points card */
.points-card .pc-row{display:flex;align-items:center;gap:12px}
.pc-fire{font-size:26px;flex:0 0 auto}
.pc-n{flex:0 0 auto}
.pc-n b{display:block;font-family:var(--serif);font-weight:900;font-size:24px;line-height:1}
.pc-n span{font-size:11.5px;color:var(--soft);font-weight:700}
.pc-prog{flex:1;min-width:0}
.pc-next{font-size:11.5px;color:var(--muted);text-align:right;margin-bottom:6px}
.pc-next b{color:var(--ink)}
.pc-bar{height:8px;border-radius:99px;background:var(--chip);overflow:hidden}
.pc-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lime-d,#9bcb1a),var(--lime))}

/* =====================================================================
   AI ASSISTANT — launcher button + chat panel
   ===================================================================== */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;gap:8px;
  border:none;cursor:pointer;background:var(--ink);color:var(--lime);font-family:inherit;font-weight:800;
  font-size:14px;padding:13px 18px;border-radius:26px;box-shadow:0 8px 24px rgba(21,20,15,.28);
  transition:transform .12s,box-shadow .12s}
.ai-fab:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(21,20,15,.34)}
.ai-fab:active{transform:scale(.96)}
.ai-fab .ico{color:var(--lime)}
@media (max-width:820px){
  .ai-fab{right:16px;bottom:calc(74px + env(safe-area-inset-bottom));padding:12px;border-radius:50%}
  .ai-fab .ai-fab-lbl{display:none}
}
/* chat panel */
@media (min-width:821px){
  .ai-scrim{align-items:flex-end;justify-content:flex-end;padding:0 22px 22px}
  .ai-sheet{width:400px;max-width:calc(100vw - 44px);max-height:min(660px,82vh);border-radius:22px;
    animation:aiIn .22s cubic-bezier(.22,1,.36,1)}
  .ai-sheet .sheet-grab{display:none}
}
@keyframes aiIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ai-sheet{display:flex;flex-direction:column;overflow:hidden;padding:0}
.ai-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.ai-head-l{display:flex;align-items:center;gap:11px;min-width:0}
.ai-badge{width:38px;height:38px;border-radius:12px;background:var(--ink);color:var(--lime);
  display:grid;place-items:center;flex:0 0 auto}
.ai-head-l b{font-family:var(--serif);font-weight:900;font-size:16px;display:block;line-height:1.1}
.ai-sub{font-size:11.5px;color:var(--soft);font-weight:600}
.ai-head .close{position:static}
.ai-head-r{display:flex;align-items:center;gap:4px}
.ai-reset{border:none;background:none;cursor:pointer;color:var(--soft);width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;transition:background .12s,color .12s}
.ai-reset:hover{background:var(--chip);color:var(--ink)}
.ai-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:none;background:var(--bg)}
.ai-list::-webkit-scrollbar{display:none}
.ai-welcome{text-align:center;padding:28px 18px;margin:auto 0}
.ai-welcome .ai-ava{width:56px;height:56px;border-radius:18px;background:var(--ink);color:var(--lime);
  display:grid;place-items:center;margin:0 auto 12px}
.ai-welcome b{font-family:var(--serif);font-weight:900;font-size:19px;display:block}
.ai-welcome p{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.5;max-width:280px;margin-inline:auto}
.ai-msg{display:flex;flex-direction:column;gap:6px;max-width:88%}
.ai-msg.user{align-self:flex-end;align-items:flex-end}
.ai-msg.bot,.ai-msg.typing{align-self:flex-start;align-items:flex-start}
.ai-bubble{padding:11px 15px;border-radius:18px;font-size:14.5px;line-height:1.45;white-space:normal;word-break:break-word}
.ai-msg.user .ai-bubble{background:var(--invert);color:var(--invert-fg);border-bottom-right-radius:6px}
.ai-msg.bot .ai-bubble{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:6px}
.ai-bubble.typing{display:inline-flex;gap:5px;padding:14px 16px}
.ai-bubble.typing span{width:7px;height:7px;border-radius:50%;background:var(--soft);animation:aiDot 1.2s infinite}
.ai-bubble.typing span:nth-child(2){animation-delay:.2s}
.ai-bubble.typing span:nth-child(3){animation-delay:.4s}
@keyframes aiDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ai-polls{display:flex;flex-direction:column;gap:8px;width:100%}
.ai-poll{display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:11px 13px;text-decoration:none;color:inherit;transition:border-color .12s,transform .1s}
.ai-poll:hover{border-color:var(--ink);transform:translateY(-1px)}
.ai-poll-q{font-weight:700;font-size:14px;line-height:1.3}
.ai-poll-v{font-size:12px;color:var(--soft);display:inline-flex;align-items:center;gap:5px}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ai-chip{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:8px 14px;
  font-family:inherit;font-size:13px;font-weight:650;color:var(--ink);cursor:pointer;transition:background .12s,border-color .12s}
.ai-chip:hover{background:var(--chip);border-color:var(--line-2)}
.ai-bar{flex:0 0 auto;display:flex;align-items:flex-end;gap:9px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--panel)}
#ai-input{flex:1;min-height:42px;max-height:110px;resize:none;overflow-y:auto;border-radius:22px;
  padding:11px 16px;font-size:15px;line-height:1.35}
.ai-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:var(--ink);color:var(--lime);display:grid;place-items:center;transition:transform .1s}
.ai-send:hover{transform:scale(1.06)}
.ai-send:active{transform:scale(.92)}
@media (max-width:560px){ #ai-input{font-size:16px} .ai-sheet{max-height:90vh} }

/* =====================================================================
   DARK MODE — polish for the newer components
   ===================================================================== */
:root[data-theme="dark"] .dtop{background:rgba(18,18,24,.82);border-bottom-color:var(--line)}
:root[data-theme="dark"] .dt-search input{background:#20202a;border-color:#33333f}
:root[data-theme="dark"] .dt-search input:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(194,242,58,.12)}
:root[data-theme="dark"] .dt-ic:hover,:root[data-theme="dark"] .dt-ic.on{background:#26262f}
:root[data-theme="dark"] .dt-ava:hover{box-shadow:0 0 0 3px #26262f}
:root[data-theme="dark"] .nav a{color:#d7d3c6}
:root[data-theme="dark"] .nav a .ico{color:#9a9484}
:root[data-theme="dark"] .nav a:hover{background:#22222c}
:root[data-theme="dark"] .nav a.active{background:color-mix(in srgb,var(--lime) 22%,#181820);color:var(--ink)}
:root[data-theme="dark"] .nav a.active .ico{color:var(--lime)}
/* right-rail widgets */
:root[data-theme="dark"] .rc-link{color:#9fd14a}
:root[data-theme="dark"] .live-item:hover,:root[data-theme="dark"] .rail-card .trend:hover{background:#22222c}
:root[data-theme="dark"] .pc-bar{background:#26262f}
/* AI assistant */
:root[data-theme="dark"] .ai-fab{background:var(--lime);color:#15140f}
:root[data-theme="dark"] .ai-fab .ico{color:#15140f}
:root[data-theme="dark"] .ai-badge,:root[data-theme="dark"] .ai-welcome .ai-ava{background:var(--lime);color:#15140f}
:root[data-theme="dark"] .ai-send,:root[data-theme="dark"] .cs-send{background:var(--lime);color:#15140f}
:root[data-theme="dark"] .ai-msg.bot .ai-bubble{background:#20202a;border-color:#2e2e38}
:root[data-theme="dark"] .ai-poll{background:#20202a;border-color:#2e2e38}
:root[data-theme="dark"] .ai-poll:hover{border-color:var(--lime)}
:root[data-theme="dark"] .ai-chip{background:#20202a;border-color:#2e2e38;color:var(--ink)}
:root[data-theme="dark"] .ai-chip:hover{background:#26262f}
:root[data-theme="dark"] .ai-reset:hover{background:#26262f}
:root[data-theme="dark"] #ai-input,:root[data-theme="dark"] #cs-input,:root[data-theme="dark"] .ic-input{background:#20202a;border-color:#33333f;color:var(--ink)}
/* comments surfaces */
:root[data-theme="dark"] .cs-poll{background:#20202a}
:root[data-theme="dark"] .cs-poll:hover{background:#26262f}
/* editable photo affordance ring reads on dark */
:root[data-theme="dark"] .photo-edit-badge{background:var(--lime);color:#15140f;border-color:#181820}

/* ============ Editable profile photo + cover affordances ============ */
.profile-banner{position:relative}
.profile-banner.tappable{cursor:pointer}
.cover-edit{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(21,20,15,.62);color:#fff;font-size:12px;font-weight:700;padding:7px 12px;border-radius:99px;
  backdrop-filter:blur(4px);pointer-events:none;transition:background .15s}
.profile-banner:hover .cover-edit{background:rgba(21,20,15,.8)}
.cover-edit .ico{width:15px;height:15px}
.profile-avwrap{position:relative;display:inline-block}
.profile-avwrap.editable{cursor:pointer}
.photo-edit-badge{position:absolute;right:2px;bottom:6px;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:var(--lime);display:grid;place-items:center;border:3px solid var(--card,#fff);
  box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .12s}
.profile-avwrap.editable:hover .photo-edit-badge{transform:scale(1.08)}
.photo-edit-badge .ico{width:13px;height:13px}
@media (max-width:560px){ .cover-edit span{display:inline} .photo-edit-badge{width:26px;height:26px} }

/* =====================================================================
   CLOSE / BACK BUTTONS — unified, polished styling + micro-interactions
   ===================================================================== */
/* every ✕ close button (sheets, modals, viewers) — was unstyled outside .modal */
.close{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:none;
  border-radius:50%;background:var(--chip);color:var(--muted);font-size:17px;line-height:1;cursor:pointer;
  flex:0 0 auto;transition:background .16s ease,color .16s ease,transform .16s ease}
.close:hover{background:var(--line);color:var(--ink);transform:rotate(90deg)}
.close:active{transform:scale(.88)}
.modal .close{background:var(--chip)}                /* keep specificity harmless */
:root[data-theme="dark"] .close{background:#26262f;color:var(--muted)}
:root[data-theme="dark"] .close:hover{background:#33333f;color:var(--ink)}

/* sheet header close sits flush-right and vertically centered */
.sheet-head .close,.ai-head .close,.mhead .close{align-self:center}

/* photo viewer ✕ — softer, blurred pill with hover */
.photo-x{display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  transition:background .16s ease,transform .16s ease}
.photo-x:hover{background:rgba(255,255,255,.28);transform:rotate(90deg)}
.photo-x:active{transform:scale(.9)}

/* back button nudges left on hover */
.back-btn{transition:background .15s ease,transform .16s ease}
.back-btn:hover{background:var(--line);transform:translateX(-2px)}
:root[data-theme="dark"] .back-btn{background:#22222c}
:root[data-theme="dark"] .back-btn:hover{background:#2b2b36}

/* settings back chevron */
.ig-back{transition:background .16s ease,transform .16s ease}
.ig-back:hover{background:var(--chip)}
.ig-back:hover{transform:translateX(-2px)}
.ig-back:active{transform:scale(.9)}
:root[data-theme="dark"] .ig-back:hover{background:#26262f}

/* cancel row in action sheets */
.as-cancel{transition:background .16s ease,transform .12s ease}

/* =====================================================================
   MOTION — smoother, springier overlays + press feedback
   ===================================================================== */
/* springy sheet slide-up */
.sheet{animation:sheetUp .34s cubic-bezier(.16,1,.3,1) both}
@media (min-width:821px){ .sheet{animation:popIn .22s cubic-bezier(.16,1,.3,1) both} }
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* scrim fades a touch slower so the sheet reads as sliding onto it */
.scrim,.sheet-scrim{animation:fade .24s ease both}
/* generic pressable feedback for the main interactive controls */
@media (hover:hover){
  .btn:active,.act:active,.iconbtn:active,.pmenu-btn:active,.ai-chip:active,
  .as-item:active,.menu button:active,.opt:not(.voted):active{transform:scale(.97)}
}
/* respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  .sheet,.scrim,.sheet-scrim,.modal,.card,.close,.photo-x{animation:none!important;transition:none!important}
  .close:hover,.photo-x:hover{transform:none}
}

/* =====================================================================
   MOCK PAPERS — dashboard, builder, take view, results
   ===================================================================== */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 2px 4px}
.page-title{font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:-.02em}
.page-sub{color:var(--muted);font-size:14px;margin:0 2px 16px}
/* dashboard cards */
.paper-card{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:15px 16px;margin-bottom:12px}
.paper-card-main{flex:1;min-width:0}
.paper-title{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px}
.paper-closed{background:var(--chip);color:var(--muted);font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px}
.paper-meta{color:var(--muted);font-size:13px;margin-top:4px}
.paper-card-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
@media (max-width:560px){ .paper-card{flex-wrap:wrap} .paper-card-acts{width:100%;justify-content:flex-start} }
/* builder */
.pb-wrap{max-width:640px}
.pb-label{display:block;font-weight:700;font-size:13.5px;margin:14px 2px 6px}
.pb-opt{color:var(--soft);font-weight:500}
.pb-input{width:100%}
.pb-dur{max-width:180px}
.pb-qhead{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}
.pb-qhead h3{font-family:var(--serif);font-weight:900;font-size:19px}
#pb-count{color:var(--soft);font-size:13px;font-weight:600}
.pb-q{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
.pb-q-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.pb-q-n{font-weight:900;font-family:var(--serif);color:var(--lime-d)}
.pb-q-del{border:none;background:none;cursor:pointer;color:var(--soft);padding:4px;border-radius:8px}
.pb-q-del:hover{background:var(--chip);color:var(--red)}
.pb-q-text{width:100%;resize:none;font-weight:600;margin-bottom:8px}
.pb-opts{display:flex;flex-direction:column;gap:7px}
.pb-opt-row{display:flex;align-items:center;gap:8px}
.pb-correct{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:none;
  cursor:pointer;color:#fff;font-weight:900;font-size:14px;display:grid;place-items:center;transition:all .12s}
.pb-opt-row.correct .pb-correct{background:var(--green,#16a34a);border-color:var(--green,#16a34a)}
.pb-opt-in{flex:1}
.pb-opt-row.correct .pb-opt-in{border-color:var(--green,#16a34a)}
.pb-opt-x{flex:0 0 auto;border:none;background:none;cursor:pointer;color:var(--soft);font-size:15px;padding:4px}
.pb-opt-x:hover{color:var(--red)}
.pb-addopt{border:none;background:none;cursor:pointer;color:var(--lime-d,#7a9e14);font-weight:700;font-size:13px;
  display:inline-flex;align-items:center;gap:5px;padding:6px 2px;margin-top:2px}
.pb-explain{width:100%;margin-top:9px;font-size:13.5px}
.pb-addq{width:100%;border:1.5px dashed var(--line);background:none;cursor:pointer;color:var(--ink);font-weight:700;
  font-size:14.5px;padding:13px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .12s,border-color .12s}
.pb-addq:hover{background:var(--chip);border-color:var(--soft)}
.pb-foot{margin-top:18px}
.pb-hint{text-align:center;color:var(--red);font-size:13px;margin-top:9px;min-height:16px}
/* take view */
.paper-hero{text-align:center;padding:20px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.paper-badge{display:inline-block;background:color-mix(in srgb,var(--lime) 30%,var(--panel));color:#5c7a13;
  font-size:12px;font-weight:800;padding:5px 12px;border-radius:99px;margin-bottom:12px}
.paper-hero h1{font-family:var(--serif);font-weight:900;font-size:25px;letter-spacing:-.02em;line-height:1.2}
.paper-by{color:var(--muted);font-size:13.5px;margin-top:6px}
.paper-desc{color:var(--ink);font-size:14.5px;margin-top:10px;line-height:1.5}
.paper-info{color:var(--soft);font-size:13px;font-weight:600;margin-top:10px}
.paper-name{margin-bottom:18px}
.paper-name label{display:block;font-weight:700;font-size:13.5px;margin:0 2px 6px}
.pt-questions{display:flex;flex-direction:column;gap:16px}
.pt-q{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.pt-q-title{font-weight:700;font-size:15.5px;line-height:1.4;display:flex;gap:10px;margin-bottom:12px}
.pt-q-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--lime);
  display:grid;place-items:center;font-size:13px;font-weight:800}
.pt-opts{display:flex;flex-direction:column;gap:8px}
.pt-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--panel);
  border:1.6px solid var(--line);border-radius:12px;padding:12px 15px;cursor:pointer;font:inherit;font-size:14.5px;
  font-weight:600;color:var(--ink);transition:border-color .12s,background .12s}
.pt-opt:hover{border-color:var(--soft)}
.pt-radio{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);transition:all .12s}
.pt-opt.sel{border-color:var(--lime-d);background:color-mix(in srgb,var(--lime) 12%,var(--panel))}
.pt-opt.sel .pt-radio{border-color:var(--lime-d);background:var(--lime-d);box-shadow:inset 0 0 0 3px var(--panel)}
.pt-foot{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--bg) 30%);padding:16px 0 calc(16px + env(safe-area-inset-bottom));margin-top:18px}
.pt-progress{text-align:center;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:10px}
/* take result */
.pt-result{text-align:center;padding:26px 12px;border-radius:20px;margin-bottom:20px;background:var(--panel);border:1px solid var(--line)}
.pt-result.good{background:color-mix(in srgb,var(--green,#16a34a) 10%,var(--panel));border-color:color-mix(in srgb,var(--green,#16a34a) 30%,var(--line))}
.pt-result.low{background:color-mix(in srgb,var(--red) 8%,var(--panel))}
.pt-score-ring{width:96px;height:96px;border-radius:50%;border:5px solid var(--lime);display:grid;place-items:center;
  margin:0 auto 14px;line-height:1}
.pt-score-ring b{font-family:var(--serif);font-weight:900;font-size:34px}
.pt-score-ring span{font-size:13px;color:var(--muted)}
.pt-result h2{font-family:var(--serif);font-weight:900;font-size:22px}
.pt-pct{font-size:16px;font-weight:800;color:var(--muted);margin-top:4px}
.pt-review h3{font-family:var(--serif);font-weight:900;font-size:19px;margin-bottom:12px}
.pt-rev-q{border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:11px}
.pt-rev-q.right{border-color:color-mix(in srgb,var(--green,#16a34a) 35%,var(--line))}
.pt-rev-q.wrong{border-color:color-mix(in srgb,var(--red) 30%,var(--line))}
.pt-rev-title{font-weight:700;font-size:14.5px;display:flex;gap:8px;margin-bottom:9px;line-height:1.4}
.pt-rev-ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff}
.pt-rev-q.right .pt-rev-ic{background:var(--green,#16a34a)}
.pt-rev-q.wrong .pt-rev-ic{background:var(--red)}
.pt-rev-opts{display:flex;flex-direction:column;gap:5px}
.pt-rev-opt{font-size:13.5px;padding:7px 11px;border-radius:9px;background:var(--chip);color:var(--muted)}
.pt-rev-opt.ans{background:color-mix(in srgb,var(--green,#16a34a) 16%,var(--panel));color:var(--ink);font-weight:700}
.pt-rev-opt.yours{background:color-mix(in srgb,var(--red) 14%,var(--panel));color:var(--ink)}
.pt-rev-explain{font-size:13px;color:var(--muted);margin-top:8px;padding:8px 11px;background:var(--chip);border-radius:9px;line-height:1.5}
/* results dashboard */
.pr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pr-actions{display:flex;gap:8px;flex:0 0 auto}
.pr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.pr-stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.pr-stat b{display:block;font-family:var(--serif);font-weight:900;font-size:24px;line-height:1}
.pr-stat span{font-size:12px;color:var(--soft);font-weight:600}
.pr-sec{font-family:var(--serif);font-weight:900;font-size:18px;margin:8px 2px 12px}
.pr-table{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:24px}
.pr-row{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.pr-row:last-child{border-bottom:none}
.pr-th{background:var(--chip);font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.pr-rank{font-family:var(--serif);font-weight:900;color:var(--soft);text-align:center}
.pr-name{font-weight:700;font-size:14px;min-width:0;display:flex;flex-direction:column}
.pr-verified{color:var(--lime-d)}
.pr-time{font-weight:500;font-size:11.5px;color:var(--soft)}
.pr-score{font-weight:700;font-variant-numeric:tabular-nums}
.pr-pct{font-weight:800;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:99px;font-size:13px}
.pr-pct.good{background:color-mix(in srgb,var(--green,#16a34a) 16%,var(--panel));color:#12813f}
.pr-pct.ok{background:color-mix(in srgb,var(--amber) 18%,var(--panel));color:#9a6a00}
.pr-pct.low{background:color-mix(in srgb,var(--red) 14%,var(--panel));color:#b4322f}
.pr-qstats{display:flex;flex-direction:column;gap:12px}
.pr-qstat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pr-qs-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;margin-bottom:8px}
.pr-qs-pct{font-weight:800;flex:0 0 auto}
.pr-qs-bar{height:8px;border-radius:99px;background:var(--chip);overflow:hidden}
.pr-qs-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lime-d,#9bcb1a),var(--lime))}
.pr-qs-sub{font-size:12px;color:var(--soft);margin-top:6px}
:root[data-theme="dark"] .pb-correct{color:#0f0f12}
:root[data-theme="dark"] .pt-q-n{background:var(--lime);color:#15140f}

/* =====================================================================
   RESPONSIVE POLISH — comfortable content widths on desktop, clean stacking on mobile
   ===================================================================== */
/* keep long-form / form pages readable instead of stretching full width */
.pb-wrap{max-width:640px;margin:0 auto}
.pr-head,.pr-stats,.pr-table,.pr-qstats,#paper-results>.back-btn,.paper-hero,.paper-name,.pt-questions,.pt-foot,.pt-result,.pt-review{max-width:680px;margin-left:auto;margin-right:auto}
#papers-list,.page-head,.page-sub{max-width:680px;margin-left:auto;margin-right:auto}
.page-head{margin-top:4px}
/* the take-page needs the sticky footer to align with the constrained content */
#paper-take{max-width:680px;margin:0 auto}

/* avatar controls: stack neatly on small screens so buttons never overlap the photo */
@media (max-width:560px){
  .avrow{flex-direction:column;align-items:stretch;text-align:center}
  .avrow .av-tap{align-self:center}
  .avctl{justify-content:center}
  .avctl .btn{flex:1 1 auto;min-width:120px}
  .avctl .meta{text-align:center}
}

/* forms: single column on narrow, two on wide (already handled) — ensure inputs never overflow */
.field,.pb-input,.pb-q-text,.pb-opt-in,.pb-explain{max-width:100%;box-sizing:border-box}
.frow{min-width:0}
.f{min-width:0}

/* results table stays legible on phones: drop the rank column weight, keep columns tight */
@media (max-width:480px){
  .pr-row{grid-template-columns:26px 1fr auto auto;gap:8px;padding:10px 12px}
  .pr-name{font-size:13px}
  .pr-stats{gap:8px}
  .pr-stat b{font-size:20px}
  .pb-q{padding:12px}
  .page-title{font-size:22px}
}

/* very wide desktops: don't let the builder inputs get uncomfortably long */
@media (min-width:1100px){
  .ig-set,.pb-wrap{max-width:640px}
}

/* =====================================================================
   CHAT LINK CARDS — paper / community / poll / profile links render as
   tappable cards instead of plain-text URLs
   ===================================================================== */
.cl-card{display:flex;align-items:center;gap:11px;margin-top:7px;text-decoration:none;
  border:1px solid var(--line);border-radius:14px;padding:11px 12px;background:var(--card,#fff);
  min-width:220px;max-width:320px;color:var(--ink);transition:border-color .14s,transform .1s,box-shadow .14s}
.cl-card:hover{border-color:var(--soft);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.cl-card:active{transform:scale(.985)}
.cl-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--lime) 26%,var(--panel));color:#5c7a13}
.cl-ic .ico{width:20px;height:20px}
.cl-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cl-type{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cl-title{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-open{flex:0 0 auto;color:var(--soft);display:grid;place-items:center}
.cl-open .ico{width:16px;height:16px}
.cl-card:hover .cl-open{color:var(--ink)}
/* on my own (dark/green) bubbles keep the card readable */
.msg.me .cl-card{background:var(--card,#fff);max-width:78vw}
/* plain clickable links inside message text */
.msg-link{color:#2d6cdf;text-decoration:underline;word-break:break-all}
.msg.me .msg-link{color:#1b4fa8}
:root[data-theme="dark"] .cl-card{background:#20202a;border-color:#2e2e38}
:root[data-theme="dark"] .cl-card:hover{border-color:var(--soft)}
:root[data-theme="dark"] .cl-ic{background:color-mix(in srgb,var(--lime) 22%,#181820);color:var(--lime)}
:root[data-theme="dark"] .msg-link{color:#8ab4ff}
@media (max-width:560px){ .cl-card{max-width:78vw} }

/* =====================================================================
   CELEBRATE — shareable achievement image sheet
   ===================================================================== */
.celebrate-sheet{max-width:460px}
.celeb-preview{padding:4px 4px 14px;display:flex;justify-content:center}
.celeb-img{width:100%;max-width:380px;border-radius:18px;box-shadow:0 10px 34px rgba(0,0,0,.22);display:block}
.celeb-actions{padding:0 2px 4px}
.celeb-row{display:flex;gap:8px;margin-top:10px}
.celeb-row .btn{flex:1;min-width:0}
/* tappable earned badges */
.badge[data-celeb-badge]{cursor:pointer;transition:transform .12s,box-shadow .14s}
.badge[data-celeb-badge]:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.badge[data-celeb-badge]:active{transform:scale(.97)}
.badge[data-celeb-badge]::after{content:"🎉 Share";position:absolute;top:8px;right:8px;font-size:10px;font-weight:800;
  color:var(--lime-d,#7a9e14);opacity:0;transition:opacity .14s}
.badge{position:relative}
.badge[data-celeb-badge]:hover::after{opacity:1}
@media (max-width:560px){ .celeb-img{max-width:320px} .celeb-row{flex-wrap:wrap} }

/* =====================================================================
   EMPTY / NOT-FOUND STATES — friendlier, more polished
   ===================================================================== */
.empty{text-align:center;color:var(--muted);padding:52px 22px;max-width:420px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center}
.empty .big{font-size:56px;line-height:1;margin-bottom:6px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.08));animation:emptyPop .4s cubic-bezier(.2,1,.3,1) both}
@keyframes emptyPop{from{opacity:0;transform:scale(.7) translateY(6px)}to{opacity:1;transform:none}}
.empty-title{font-family:var(--serif);font-weight:900;font-size:21px;color:var(--ink);letter-spacing:-.01em;margin-top:8px;line-height:1.25}
.empty-sub{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:340px}
.empty-acts{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:20px}
.empty-acts .btn{min-width:130px}
/* full not-found page: give it breathing room and a soft framed look */
.notfound-wrap{display:flex;align-items:center;justify-content:center;min-height:52vh}
.notfound-wrap .empty{padding:40px 22px}
.notfound-wrap .empty .big{font-size:66px}
@media (max-width:560px){
  .empty{padding:44px 18px}
  .empty .big{font-size:50px}
  .empty-acts{width:100%}
  .empty-acts .btn{flex:1 1 auto}
}

/* =====================================================================
   AI SUMMARY MODAL — redesigned (decoupled from the AI chatbot)
   ===================================================================== */
.ais-modal{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
@media (min-width:821px){ .ais-modal{max-width:480px} }
.ais-head{display:flex;align-items:center;gap:12px;padding:2px 0 14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.ais-badge{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d3ff0);box-shadow:0 6px 16px rgba(124,77,216,.32)}
.ais-badge .ico{width:22px;height:22px}
.ais-htxt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ais-htxt h3{font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:-.01em}
.ais-htxt span{font-size:12.5px;color:var(--soft);font-weight:600}
.ais-head .close{align-self:flex-start}
.ais-q{font-family:var(--serif);font-weight:800;font-size:19px;line-height:1.3;color:var(--ink);margin-bottom:14px}
.ais-para{font-size:15px;line-height:1.7;color:var(--ink);
  background:color-mix(in srgb,var(--lime) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--lime) 22%,var(--line));
  border-radius:14px;padding:14px 16px}
.ais-stats{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.ais-stat{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:9px 13px;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.ais-foot{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--soft);
  margin-top:18px;text-align:center}
.ais-foot .ico{width:13px;height:13px;color:#8b5cf6}
.ais-loading{text-align:center;padding:36px 0;color:var(--muted)}
.ais-loading p{margin-top:14px;font-size:14px}
.ais-dot{display:inline-block;width:9px;height:9px;margin:0 3px;border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#6d3ff0);animation:aisdot 1s infinite ease-in-out}
.ais-dot:nth-child(2){animation-delay:.15s}.ais-dot:nth-child(3){animation-delay:.3s}
@keyframes aisdot{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
:root[data-theme="dark"] .ais-stat{background:#20202a;border-color:#2e2e38}
:root[data-theme="dark"] .ais-para{background:color-mix(in srgb,var(--lime) 10%,#181820);border-color:#33402088}

/* =====================================================================
   RESPONSIVE — sidebar scrolling + tidy scrollbars, tablet polish
   ===================================================================== */
/* sidebar scrolls independently on short screens, no ugly scrollbar */
.side{scrollbar-width:none}
.side::-webkit-scrollbar{width:0;height:0;display:none}
/* give the nav a touch more room and let it flex-scroll if tall */
.side .nav{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.side .nav::-webkit-scrollbar{display:none}
/* tablet / small-laptop range: slightly tighter sidebar + comfortable main */
@media (min-width:821px) and (max-width:1100px){
  .app{grid-template-columns:212px minmax(0,1fr);gap:20px}
  .nav a{padding:10px 12px;font-size:15px}
  .nav a .ico{width:20px;height:20px}
}
@media (min-width:821px) and (max-width:970px){
  .app{grid-template-columns:66px minmax(0,1fr);gap:16px}
  .nav a > span:not(.nbadge),.side .brand b,.side-promo{display:none}
  .nav a{justify-content:center;padding:12px 0;position:relative}
  .nav a .nbadge{position:absolute;top:5px;right:9px}
  .side .brand{justify-content:center}
  .side{padding-left:8px;padding-right:8px}
}

/* =====================================================================
   NARROW-SCREEN FIXES — feed tabs scroll cleanly; poll action row fits
   ===================================================================== */
/* Feed tabs: never wrap or clip — scroll horizontally, keep gaps, hide scrollbar */
.tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;white-space:nowrap}
@media (max-width:560px){
  .tabs{gap:16px;padding-left:2px;padding-right:18px;margin-bottom:12px}
  .tabs button{font-size:14px;padding-left:0;padding-right:0}
}

/* Poll action row: shrink gracefully so 5 actions + the count always fit */
.pacts{flex-wrap:nowrap}
.act .rsum{max-width:120px;overflow:hidden;white-space:nowrap}
@media (max-width:480px){
  .pacts{gap:1px}
  .act{padding:8px 7px;font-size:12.5px;gap:4px}
  .act .ico{font-size:15px}
  .act-ai .ai-lbl{display:none}          /* sparkle icon only, drop the "AI" text */
  .act .rsum{max-width:34px}
  .act .n:empty{display:none;margin:0}
  .act.count{padding-right:2px}
}
@media (max-width:360px){
  .act{padding:7px 5px}
  .act .rsum{display:none}               /* keep the heart + count only */
}

/* =====================================================================
   GLOBAL RESPONSIVE FOUNDATION — stop stray overflow on every page
   (using overflow-x:clip, which — unlike overflow-x:hidden — does NOT
   break the sticky sidebar/tabs)
   ===================================================================== */
.main{overflow-x:visible}
/* media never overflows its container */
.card img,.card video,.profile-banner img,.ais-modal img,.celeb-img,.msg img,img.photo-full,.cl-card img{max-width:100%;height:auto}
svg,canvas{max-width:100%}
/* long words / URLs wrap instead of pushing the layout wide */
.q,.empty-sub,.empty-title,.ais-q,.ais-para,.bub,.cbody,.cbody2,.paper-desc,.paper-hero h1,
.pt-q-title,.pr-qs-q,.comm-desc,.bio,.profile-bio,.sub,.cl-title,.gm-name,.paper-title,
.q h2,.ais-htxt h3,.pr-name,.lb-name,.notif-txt{overflow-wrap:break-word}
/* flex/grid text children must be allowed to shrink, not overflow */
.who,.pinfo,.uwho,.th-main,.cl-body,.ais-htxt,.pr-name,.paper-card-main,.comm-card-body,
.lb-row .lb-who,.notif-row,.thread .th-body{min-width:0}

/* collapse remaining multi-column grids gracefully on phones */
@media (max-width:560px){
  .instat-grid{grid-template-columns:1fr 1fr}
  .settings-grid{grid-template-columns:1fr}
}
@media (max-width:400px){
  .opts.grid{grid-template-columns:1fr}
  .instat-grid{grid-template-columns:1fr}
  .pr-stats,.stats{gap:6px}
}
/* image-poll option thumbnails stay contained */
.opt img,.opt-img,.optimg{max-width:100%;object-fit:cover}

/* =====================================================================
   CELEBRATE PICKER — choose an achievement to turn into a card
   ===================================================================== */
.celeb-picker{max-width:440px}
.cpick-head{display:flex;align-items:center;gap:12px;padding:2px 0 14px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.cpick-emoji{font-size:30px;line-height:1}
.cpick-head h3{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:-.01em}
.cpick-head > div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cpick-head > div span{font-size:12.5px;color:var(--soft);font-weight:600}
.cpick-head .close{align-self:flex-start}
#cpick-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
#cpick-list::-webkit-scrollbar{display:none}
.cpick-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;font:inherit;
  transition:border-color .14s,transform .1s,background .14s}
.cpick-item:hover{border-color:var(--soft);background:var(--chip)}
.cpick-item:active{transform:scale(.99)}
.cpick-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:24px;
  background:color-mix(in srgb,var(--lime) 24%,var(--panel))}
.cpick-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cpick-eyebrow{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cpick-title{font-size:15px;font-weight:800;color:var(--ink);overflow-wrap:break-word}
.cpick-stat{font-size:12.5px;color:var(--soft);font-weight:600;margin-top:1px}
.cpick-go{flex:0 0 auto;color:var(--soft)}
.cpick-item:hover .cpick-go{color:var(--ink)}
.cpick-empty{padding:8px 0}
:root[data-theme="dark"] .cpick-item{background:#20202a;border-color:#2e2e38}
:root[data-theme="dark"] .cpick-item:hover{background:#26262f}
:root[data-theme="dark"] .cpick-ic{background:color-mix(in srgb,var(--lime) 20%,#181820)}

/* celebrate: PNG/JPG download row + hint */
.celeb-dl-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.celeb-dl-lbl{flex:1;min-width:0;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--muted)}
.celeb-dl-lbl .ico{width:15px;height:15px}
.celeb-dl-row .btn-sm{min-width:58px}
.celeb-hint{font-size:11.5px;color:var(--soft);line-height:1.5;margin-top:12px;text-align:center}
@media (max-width:560px){ .celeb-dl-row{flex-wrap:wrap} .celeb-dl-lbl{flex-basis:100%;margin-bottom:2px} }

/* celebrate: platform share grid */
.celeb-plats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.cplat{display:inline-flex;align-items:center;gap:8px;justify-content:center;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:10px 8px;font:inherit;font-size:13px;font-weight:700;
  color:var(--ink);cursor:pointer;transition:border-color .14s,transform .1s,background .14s}
.cplat:hover{border-color:var(--soft);background:var(--chip)}
.cplat:active{transform:scale(.97)}
.cplat-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:14px;font-weight:900;color:#fff;line-height:1}
.cplat-ic.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.cplat-ic.wa{background:#25d366}
.cplat-ic.fb{background:#1877f2;font-family:Georgia,serif}
.cplat-ic.xx{background:#15140f}
.cplat-ic.li{background:#0a66c2;font-size:11px}
.cplat-ic.rd{background:#ff4500;font-size:12px}
:root[data-theme="dark"] .cplat{background:#20202a;border-color:#2e2e38}
:root[data-theme="dark"] .cplat:hover{background:#26262f}
@media (max-width:420px){ .celeb-plats{grid-template-columns:1fr 1fr} }

/* celebrate: post caption + invite link */
.celeb-caption{margin-top:14px}
.cap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.cap-head span{font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.cap-copy{display:inline-flex;align-items:center;gap:5px;background:var(--chip);border:none;border-radius:999px;
  padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;transition:background .14s}
.cap-copy:hover{background:var(--line)}
.cap-copy .ico{width:13px;height:13px}
.cap-text{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font:inherit;font-size:13.5px;line-height:1.55;color:var(--ink);resize:none;
  white-space:pre-wrap;overflow-wrap:break-word}
.celeb-invite{display:flex;align-items:center;gap:10px;margin-top:10px;background:color-mix(in srgb,var(--lime) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--lime) 28%,var(--line));border-radius:12px;padding:10px 12px}
.inv-lbl{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--ink)}
.inv-url{flex:1;min-width:0;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace}
.inv-copy{flex:0 0 auto;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:6px 14px;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:opacity .14s}
.inv-copy:hover{opacity:.88}
:root[data-theme="dark"] .cap-text{background:#20202a;border-color:#2e2e38}
:root[data-theme="dark"] .celeb-invite{background:color-mix(in srgb,var(--lime) 10%,#181820);border-color:#33402088}
@media (max-width:420px){ .celeb-invite{flex-wrap:wrap} .inv-url{flex-basis:100%;order:3;white-space:normal} }

/* =====================================================================
   ONBOARDING — welcome tour for new users
   ===================================================================== */
.onboard{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  max-width:520px;margin:0 auto}
.onb-top{display:flex;justify-content:flex-end;min-height:34px}
.onb-skip{background:none;border:none;font:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;padding:6px 8px;border-radius:10px}
.onb-skip:hover{color:var(--ink);background:var(--chip)}
.onb-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.onb-icon{width:132px;height:132px;border-radius:36px;display:grid;place-items:center;font-size:66px;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--lime) 34%,var(--panel)), color-mix(in srgb,var(--lime) 12%,var(--panel)));
  box-shadow:0 18px 44px rgba(124,140,20,.18);margin-bottom:14px;animation:onbPop .4s cubic-bezier(.2,1,.3,1) both}
@keyframes onbPop{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}
.onb-title{font-family:var(--serif);font-weight:900;font-size:28px;letter-spacing:-.02em;color:var(--ink);margin-top:6px;
  animation:onbFade .35s ease .05s both}
.onb-text{font-size:16px;line-height:1.6;color:var(--muted);max-width:380px;animation:onbFade .35s ease .1s both}
@keyframes onbFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.onb-foot{display:flex;flex-direction:column;gap:18px}
.onb-dots{display:flex;gap:8px;justify-content:center}
.onb-dot{width:8px;height:8px;border-radius:99px;background:var(--line);cursor:pointer;transition:width .25s,background .25s}
.onb-dot.on{width:26px;background:var(--lime)}
.onb-nav{display:flex;gap:12px}
.onb-nav .btn{flex:1;padding:15px;font-size:15.5px;border-radius:14px}
.onb-nav .onb-next{flex:1.4}
.onb-hide{visibility:hidden}
:root[data-theme="dark"] .onboard{background:var(--bg)}

/* vote-count acts as a "see results" button */
.act.count{margin-left:auto;color:var(--soft);cursor:pointer;pointer-events:auto}
@media (hover:hover){ .act.count:hover{background:var(--chip);color:var(--ink)} }
.act.count:active{transform:scale(.92)}

/* =====================================================================
   MOBILE: full-width (edge-to-edge) poll cards in the feed
   Desktop keeps the rounded, bordered, spaced cards.
   ===================================================================== */
@media (max-width:820px){
  #feed .card{
    width:auto;
    margin-left:calc(50% - 50vw);                     /* full viewport width, balanced (no overflow) */
    margin-right:calc(50% - 50vw);
    border:0; border-radius:0;                         /* edge-to-edge, no side space */
    box-shadow:none;
    margin-top:0; margin-bottom:8px;                  /* little gap between cards */
    animation:none;
    padding-left:16px; padding-right:16px;
  }
  #feed{padding:0 0 6px}
  /* subtle definition so white cards read against the light page gap */
  :root:not([data-theme="dark"]) #feed .card{box-shadow:0 1px 0 rgba(21,20,15,.05)}
}

/* feed tab swipe: slide-in of the new tab + edge bounce when there's no next/prev */
@keyframes feedInR{from{opacity:.35;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes feedInL{from{opacity:.35;transform:translateX(-34px)}to{opacity:1;transform:none}}
#feed.feed-in-r{animation:feedInR .28s cubic-bezier(.2,.8,.3,1)}
#feed.feed-in-l{animation:feedInL .28s cubic-bezier(.2,.8,.3,1)}
@keyframes feedBounceR{0%{transform:none}40%{transform:translateX(-16px)}100%{transform:none}}
@keyframes feedBounceL{0%{transform:none}40%{transform:translateX(16px)}100%{transform:none}}
#feed.feed-bounce-r{animation:feedBounceR .3s ease}
#feed.feed-bounce-l{animation:feedBounceL .3s ease}
@media (prefers-reduced-motion:reduce){
  #feed.feed-in-r,#feed.feed-in-l,#feed.feed-bounce-r,#feed.feed-bounce-l{animation:none}
}


/* =====================================================================
   INFO PAGES (Help, About, Policies, Updates) + Feedback + footer links
   ===================================================================== */
.info-page{max-width:720px;margin:0 auto;padding-bottom:40px}
.info-head{text-align:center;padding:12px 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.info-emoji{font-size:52px;line-height:1;margin-bottom:8px}
.info-head h1{font-family:var(--serif);font-weight:900;font-size:30px;letter-spacing:-.02em;color:var(--ink)}
.info-sub{color:var(--muted);font-size:15px;margin-top:6px;line-height:1.5}
.info-sec{margin-bottom:26px}
.info-sec h2{font-family:var(--serif);font-weight:800;font-size:20px;color:var(--ink);margin-bottom:10px}
.info-sec p{color:var(--ink);line-height:1.7;font-size:15px;margin-bottom:10px}
.info-sec ul{margin:6px 0 6px 2px;padding:0;list-style:none}
.info-sec ul li{position:relative;padding-left:22px;margin-bottom:9px;line-height:1.6;color:var(--ink);font-size:15px}
.info-sec ul li::before{content:'';position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--lime)}
.info-sec a{color:#2f7d0f;font-weight:600;text-decoration:none}
.info-sec a:hover{text-decoration:underline}
:root[data-theme="dark"] .info-sec a{color:#a7d825}
.info-faq{border:1px solid var(--line);border-radius:12px;margin-bottom:9px;overflow:hidden;background:var(--panel)}
.info-faq summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:15px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center}
.info-faq summary::-webkit-details-marker{display:none}
.info-faq summary::after{content:'+';font-size:20px;color:var(--soft);font-weight:400}
.info-faq[open] summary::after{content:'−'}
.info-faq[open] summary{border-bottom:1px solid var(--line)}
.info-faq-a{padding:13px 16px;color:var(--muted);line-height:1.65;font-size:14.5px}
.info-faq-a a{color:#2f7d0f;font-weight:600}
.chlog-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.chlog-v{background:var(--ink);color:var(--panel);font-weight:800;font-size:13px;padding:3px 10px;border-radius:999px}
.chlog-date{color:var(--soft);font-size:13px;font-weight:600}
.info-foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.info-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:12px}
.info-links a{color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:none}
.info-links a:hover{color:var(--ink)}
.info-copy{color:var(--soft);font-size:12.5px}
/* feedback form */
.fb-form{max-width:520px;margin:0 auto}
.fb-label{display:block;font-weight:700;font-size:14px;color:var(--ink);margin:14px 0 8px}
.fb-opt{font-weight:400;color:var(--soft);font-size:12.5px}
.fb-types{display:flex;gap:8px;flex-wrap:wrap}
.fb-type{flex:1;min-width:70px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;transition:.14s}
.fb-type.on{background:var(--lime);border-color:var(--lime);color:#15140f}
.fb-input{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);resize:vertical}
.fb-input:focus{outline:none;border-color:var(--lime)}
/* sidebar footer links */
.side-foot{display:flex;flex-wrap:wrap;gap:4px 12px;padding:12px 12px 4px;margin-top:10px;border-top:1px solid var(--line)}
.side-foot a{color:var(--soft);font-size:12px;font-weight:600;text-decoration:none}
.side-foot a:hover{color:var(--ink)}
.side-foot-copy{flex-basis:100%;color:var(--soft);font-size:11px;margin-top:6px}
/* admin feedback */
.afb-head{font-weight:700;color:var(--muted);font-size:13px;margin-bottom:12px}
.afb-item{border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:10px;background:var(--panel)}
.afb-item.is-new{border-left:3px solid var(--lime)}
.afb-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;margin-bottom:7px}
.afb-cat{background:var(--chip);border-radius:999px;padding:2px 10px;font-weight:800;color:var(--ink)}
.afb-who{color:var(--muted)}.afb-time{color:var(--soft);margin-left:auto}
.afb-msg{color:var(--ink);line-height:1.6;font-size:14.5px;white-space:pre-wrap;overflow-wrap:break-word}
.afb-page{color:var(--soft);font-size:12px;margin-top:6px}
.afb-acts{display:flex;gap:8px;margin-top:10px}