/* Gareeb Seva Services — design system (ported from the Claude design) */
:root{
  --bg:#f5f5f7;--card:#ffffff;--text:#1d1d1f;--sub:#86868b;
  --line:rgba(0,0,0,.08);--glass:rgba(250,250,252,.78);
  --ph1:#ececf0;--ph2:#e2e2e8;--inp:#ffffff;--shadow:0 8px 30px rgba(0,0,0,.08);
  --gold:linear-gradient(135deg,#E7C873,#B8860B);
  --silver:linear-gradient(135deg,#D9DCE1,#9BA0A8);
  --blue:#0a84ff;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000;--card:#1c1c1e;--text:#f5f5f7;--sub:#98989d;
  --line:rgba(255,255,255,.12);--glass:rgba(22,22,24,.72);
  --ph1:#232326;--ph2:#2b2b2f;--inp:#2c2c2e;--shadow:0 8px 30px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --bg:#000;--card:#1c1c1e;--text:#f5f5f7;--sub:#98989d;
  --line:rgba(255,255,255,.12);--glass:rgba(22,22,24,.72);
  --ph1:#232326;--ph2:#2b2b2f;--inp:#2c2c2e;--shadow:0 8px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg)}
body{
  color:var(--text);min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:#b08d2f;text-decoration:none}a:hover{color:#8a6d20}
button{font-family:inherit}
input{font-family:inherit}
::placeholder{color:var(--sub)}
[hidden]{display:none!important}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@keyframes tipFloat{0%{opacity:0;transform:translateY(0) scale(.7)}15%{opacity:1}100%{opacity:0;transform:translateY(-220px) scale(1.15)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.fade-in{animation:fadeIn .35s ease both}
.fade-up{animation:fadeUp .4s ease both}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(201,162,39,.10),transparent 60%),var(--bg)}
.login-card-outer{width:100%;max-width:420px;animation:fadeUp .5s ease both}
.brand-lg{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:28px}
.brand-badge{width:72px;height:72px;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.brand-badge img{width:100%;height:100%;display:block}
.brand-badge span{font-size:30px;font-weight:800;color:#3a2b00;letter-spacing:-1px}
.brand-title{font-size:26px;font-weight:700;letter-spacing:-.5px;text-align:center}
.brand-tag{font-size:14px;color:var(--sub);margin-top:6px;text-align:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:18px}
.seg button{border:none;border-radius:9px;padding:8px 0;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s;background:transparent;color:var(--sub)}
.seg button.on{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.field{width:100%;border:1px solid var(--line);background:var(--inp);color:var(--text);border-radius:12px;padding:13px 14px;font-size:15px;outline:none;transition:border-color .2s}
.field:focus{border-color:var(--blue)}
.col{display:flex;flex-direction:column;gap:12px}
.rolelabel{font-size:12px;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.6px;margin:6px 0 10px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-btn{text-align:left;cursor:pointer;border-radius:16px;padding:14px;transition:all .25s;border:2px solid transparent}
.role-btn.gareeb{background:linear-gradient(135deg,rgba(155,160,168,.14),rgba(155,160,168,.05))}
.role-btn.ameer{background:linear-gradient(135deg,rgba(201,162,39,.14),rgba(201,162,39,.04))}
.role-btn.gareeb.on{border-color:#9BA0A8}
.role-btn.ameer.on{border-color:#C9A227}
.role-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-bottom:8px}
.role-ico.g{background:var(--silver);color:#2c2e33}
.role-ico.a{background:var(--gold);color:#3a2b00}
.role-name{font-weight:700;font-size:15px;color:var(--text)}
.role-desc{font-size:12px;color:var(--sub);margin-top:3px;line-height:1.4}
.btn-primary{border:none;cursor:pointer;border-radius:14px;padding:14px;font-size:16px;font-weight:700;color:#fff;background:var(--blue);transition:all .25s;margin-top:4px}
.btn-primary:hover{filter:brightness(1.06)}
.legal{text-align:center;font-size:12px;color:var(--sub)}
.err{color:#ff453a;font-size:13px;font-weight:600;text-align:center;min-height:16px}

/* ---------- app shell ---------- */
.topnav{position:fixed;top:0;left:0;right:0;height:54px;z-index:50;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  background:var(--glass);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-badge{width:28px;height:28px;border-radius:9px;overflow:hidden;flex-shrink:0}
.nav-badge img{width:100%;height:100%;display:block}
.nav-brand b{font-weight:700;font-size:15px;letter-spacing:-.3px}
.nav-tabs{display:flex;gap:6px;background:color-mix(in srgb,var(--text) 6%,transparent);padding:4px;border-radius:12px}
.nav-tabs button{border:none;cursor:pointer;border-radius:9px;padding:7px 16px;font-size:13px;font-weight:600;transition:all .25s;background:transparent;color:var(--sub)}
.nav-tabs button.on{background:var(--card);color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px}
.badge-pill{font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px}
.avatar{border-radius:50%;padding:2px;display:flex}
.avatar>div{width:100%;height:100%;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text)}
.nav-avatar{width:32px;height:32px;cursor:pointer}
.nav-avatar>div{font-size:12px}

.content{min-height:100vh}
.tab{animation:fadeIn .35s ease both}

/* ---------- video chat ---------- */
.chat-layout{display:flex}
.video-col{flex:1;position:relative;display:flex;flex-direction:column}
/* split layout: two equal video panes (partner / you), stacked on mobile */
.video-stage{flex:1;position:relative;min-height:0;display:grid;gap:12px}
.pane{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#2b2b33,#141419);display:flex;align-items:center;justify-content:center;min-height:0;animation:popIn .4s ease both}
#localPane{background:linear-gradient(160deg,#20242c,#101216)}
.pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#localVideo{transform:scaleX(-1)}
.pane-empty{display:flex;flex-direction:column;align-items:center;gap:12px;z-index:1}
.pane-empty .lbl{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:rgba(255,255,255,.45)}
.big-avatar{width:84px;height:84px;border-radius:50%;padding:3px}
.big-avatar>div{width:100%;height:100%;border-radius:50%;background:#3a3a42;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff}
.partner-tag{position:absolute;top:12px;left:12px;z-index:3;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);border-radius:999px;padding:5px 12px 5px 6px}
.partner-tag .r{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px}
.partner-tag .u{font-size:12px;font-weight:600;color:#fff}
.you-tag{position:absolute;top:12px;left:12px;z-index:3;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;color:#fff}
.searching{position:absolute;inset:0;z-index:5;border-radius:20px;background:rgba(10,10,14,.72);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease both}
.searching .inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.spinner{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:#E7C873;animation:spin .8s linear infinite}
.searching .t{color:#fff;font-weight:600;font-size:15px}
.controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0 2px;flex-wrap:wrap}
.round-btn{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);cursor:pointer;transition:all .25s;
  background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center}
.round-btn.off{background:#ff453a;color:#fff;border-color:#ff453a}
.round-btn .slash{position:absolute;width:32px;height:2.5px;border-radius:2px;background:currentColor;transform:rotate(-45deg)}
.pill-btn{height:48px;border:none;border-radius:999px;padding:0 22px;cursor:pointer;font-size:14px;font-weight:700;transition:all .25s;display:inline-flex;align-items:center;gap:9px}
.pill-btn.gold{background:var(--gold);color:#3a2b00;box-shadow:0 4px 14px rgba(184,134,11,.35);padding:0 20px;gap:7px}
.pill-btn.blue{color:#fff;background:var(--blue)}
.pill-btn.ghost{border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:600;padding:0 18px}
.pill-btn:hover{filter:brightness(1.06)}
/* hunt split-button + menu (Omegle-style target selector) */
.hunt-control{position:relative;display:inline-flex}
.hunt-main{border-radius:999px 0 0 999px;padding:0 12px 0 18px;gap:7px}
.hunt-main svg{opacity:.9}
.hunt-caret{border-radius:0 999px 999px 0;padding:0 12px;margin-left:1px}
.hunt-caret svg{transition:transform .2s}
.hunt-control.open .hunt-caret svg{transform:rotate(180deg)}
.hunt-control.hunting .hunt-main,.hunt-control.hunting .hunt-caret{animation:huntPulse 1.3s ease-in-out infinite}
@keyframes huntPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}50%{box-shadow:0 0 0 6px rgba(201,162,39,.22)}}
.hunt-menu{position:absolute;bottom:calc(100% + 12px);right:0;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px;z-index:20;animation:fadeUp .2s ease both}
.hunt-menu::after{content:"";position:absolute;bottom:-7px;right:26px;width:12px;height:12px;background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.hunt-menu-title{font-size:11px;font-weight:600;color:var(--sub);padding:8px 10px 8px;text-transform:uppercase;letter-spacing:.5px}
.hunt-opt{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;cursor:pointer;border-radius:11px;padding:11px 12px;font-size:14px;font-weight:600;color:var(--text);text-align:left;transition:background .15s}
.hunt-opt:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.hunt-opt .dot{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.hunt-opt .dot.gold{background:var(--gold)}
.hunt-opt .dot.silver{background:var(--silver)}
.hunt-opt.active{position:relative}
.hunt-opt.active::after{content:"✓";position:absolute;right:14px;color:var(--blue);font-weight:800}
.round-btn.end{background:#ff453a;color:#fff;border-color:#ff453a}
.round-btn.end:hover{filter:brightness(1.06)}

.chat-panel{display:flex;flex-direction:column;background:var(--card)}
.chat-head{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.chat-head .avatar{width:38px;height:38px;flex-shrink:0}
.chat-head .avatar>div{font-size:12px;font-weight:800;background:var(--bg)}
.chat-head .meta{flex:1;min-width:0}
.chat-head .meta b{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.chat-head .status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--sub);margin-top:1px}
.dot-online{width:7px;height:7px;border-radius:50%;background:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.18)}
.chat-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--text) 3%,transparent),transparent 120px)}
.sys-divider{align-self:center;font-size:11px;font-weight:600;color:var(--sub);background:color-mix(in srgb,var(--text) 6%,transparent);border-radius:999px;padding:4px 12px;margin-bottom:2px}
.msg{max-width:80%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.45;animation:fadeUp .3s ease both;box-shadow:0 1px 2px rgba(0,0,0,.06);word-wrap:break-word}
.msg.them{align-self:flex-start;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,#0a84ff,#0064e0);color:#fff;border-bottom-right-radius:5px}
.chat-input-row{padding:12px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center}
.chat-input-row input{flex:1;border:1px solid var(--line);background:var(--inp);color:var(--text);border-radius:999px;padding:11px 16px;font-size:14px;outline:none;transition:border-color .2s}
.chat-input-row input:focus{border-color:var(--blue)}
.send-btn{border:none;border-radius:50%;width:42px;height:42px;flex-shrink:0;cursor:pointer;background:linear-gradient(135deg,#0a84ff,#0064e0);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 3px 10px rgba(10,132,255,.35)}
.send-btn:hover{filter:brightness(1.08)}

/* ---------- explore ---------- */
.wrap{max-width:1060px;margin:0 auto}
.explore-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.search{flex:1;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:11px 15px;font-size:14px;outline:none}
.grid{display:grid;gap:10px}
/* Instagram-style explore: uniform square tiles, content only */
.post-card{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.post-media{position:absolute;inset:0;background:repeating-linear-gradient(45deg,var(--ph1) 0 12px,var(--ph2) 12px 24px);display:flex;align-items:center;justify-content:center}
.post-media img,.post-media video{width:100%;height:100%;object-fit:cover;display:block}
.post-reel-badge{position:absolute;top:8px;right:8px;z-index:2;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.chip{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--sub);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 11px}

/* ---------- profile ---------- */
.profile-hero{padding:34px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.profile-avatar{width:104px;height:104px}
.profile-avatar>div{font-size:32px}
.profile-name{display:flex;align-items:center;justify-content:center;gap:8px}
.profile-name b{font-size:22px;font-weight:700;letter-spacing:-.4px}
.profile-user{font-size:14px;color:var(--sub);margin-top:4px}
.stats{display:flex;gap:34px}
.stats .n{font-size:18px;font-weight:700}
.stats .l{font-size:12px;color:var(--sub)}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn-ghost{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-ghost:hover{border-color:var(--sub)}
.btn-role{border:none;border-radius:12px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:all .25s}
.upi-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.upi-card img{width:110px;height:110px;border-radius:14px;background:#fff;border:1px solid var(--line);flex-shrink:0}
.upi-card .body{flex:1;min-width:200px}
.mini-label{font-size:11px;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.5px}
.upi-row{display:flex;align-items:center;gap:8px}
.upi-input{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:var(--text);outline:none}
.upi-input:focus{border-color:var(--blue)}
.copy-btn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:9px;padding:9px 13px;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0}
.ameer-card{border-radius:18px;padding:18px;background:linear-gradient(135deg,rgba(201,162,39,.16),rgba(201,162,39,.05));border:1px solid rgba(201,162,39,.35);display:flex;align-items:center;gap:14px}
.ameer-card .star{width:44px;height:44px;border-radius:12px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:#3a2b00;flex-shrink:0}
.ameer-card .t{font-weight:700;font-size:15px;background:linear-gradient(90deg,#B8860B,#E7C873,#B8860B);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 3s linear infinite}
.section-label{font-size:12px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.7px;margin:22px 0 12px}
.mygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mygrid .cell{position:relative;overflow:hidden;aspect-ratio:1;border-radius:12px;background:repeating-linear-gradient(45deg,var(--ph1) 0 12px,var(--ph2) 12px 24px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .25s;border:1px solid var(--line)}
.mygrid .cell:hover{opacity:.85}

/* ---------- bottom nav (mobile) ---------- */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:50;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  background:var(--glass);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);
  padding:8px 6px calc(10px + env(safe-area-inset-bottom))}
.bottomnav button{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;color:var(--sub);transition:color .2s}
.bottomnav button.on{color:var(--blue)}
.bottomnav span{font-size:10px;font-weight:600}

/* ---------- reels ---------- */
.reels{position:fixed;inset:0;z-index:90;background:#000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease both}
.reel-back{position:absolute;top:18px;left:18px;z-index:5;border:none;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;backdrop-filter:blur(10px)}
.reel-stage{height:min(92vh,760px);aspect-ratio:9/16;max-width:94vw;position:relative;border-radius:22px;overflow:hidden;
  background:repeating-linear-gradient(45deg,#1a1a1f 0 14px,#232329 14px 28px);display:flex;align-items:center;justify-content:center}
.reel-stage video,.reel-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-meta{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.reel-user{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.reel-user b{color:#fff;font-weight:700;font-size:14px}
.reel-user .r{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px}
.reel-cap{color:rgba(255,255,255,.9);font-size:13px;line-height:1.5}
.reel-actions{position:absolute;right:12px;bottom:96px;display:flex;flex-direction:column;gap:16px;align-items:center}
.reel-act{border:none;cursor:pointer;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);border-radius:50%;width:46px;height:46px;color:#fff;transition:all .2s;display:flex;align-items:center;justify-content:center}
.reel-act:hover{background:rgba(255,255,255,.26)}
.reel-act.seva{background:var(--gold);color:#3a2b00;font-size:18px;font-weight:800;box-shadow:0 4px 14px rgba(184,134,11,.45)}
.reel-act.liked{color:#ff453a}
.reel-likes{color:#fff;font-size:11px;font-weight:700;margin-top:-10px}
.reel-nav{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.reel-nav button{border:none;cursor:pointer;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;transition:all .2s}
.reel-nav button:hover{background:rgba(255,255,255,.28)}
.reel-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.45);font-size:11px;font-weight:600}

/* ---------- sheets / modals ---------- */
.sheet-scrim{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .25s ease both}
.sheet{width:100%;max-width:440px;background:var(--card);border-radius:26px 26px 0 0;padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  animation:fadeUp .35s cubic-bezier(.2,.9,.3,1) both;box-shadow:var(--shadow)}
.grabber{width:38px;height:5px;border-radius:99px;background:var(--line);margin:0 auto 18px}
.sheet-title{text-align:center;font-size:18px;font-weight:700}
.sheet-sub{text-align:center;font-size:13px;color:var(--sub);margin-top:4px}
.qr-box{width:170px;height:170px;border-radius:16px;background:#fff;border:1px solid var(--line);padding:10px;margin:16px auto}
.qr-box img{width:100%;height:100%;display:block}
.upi-text{text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--sub);margin-bottom:18px}
.amts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.amts button{border-radius:11px;padding:10px 0;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;border:1px solid var(--line);background:var(--card);color:var(--text)}
.amts button.on{border:2px solid #B8860B;background:rgba(201,162,39,.14)}
.btn-send{width:100%;border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;background:var(--gold);color:#3a2b00;box-shadow:0 4px 16px rgba(184,134,11,.35);transition:all .25s}
.btn-send:hover{filter:brightness(1.05)}
.btn-close{width:100%;border:none;background:none;color:var(--sub);font-size:13px;font-weight:600;cursor:pointer;padding:12px 0 0}
.btn-logout{width:100%;border:none;background:none;color:#ff453a;font-size:13px;font-weight:700;cursor:pointer;padding:10px 0 0}
.edit-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:9px;margin:0 0 22px}
.edit-avatar{width:90px;height:90px}
.edit-avatar>div{font-size:28px}
.edit-field-label{font-size:12px;font-weight:600;color:var(--sub);margin-bottom:6px}
.at-wrap{display:flex;align-items:center;border:1px solid var(--line);background:var(--inp);border-radius:12px;padding:0 14px}
.at-wrap span{color:var(--sub);font-size:15px}
.at-wrap input{flex:1;border:none;background:none;color:var(--text);padding:12px 6px;font-size:15px;outline:none}

/* ---------- sidebar (Instagram-style, desktop) ---------- */
.sidenav{position:fixed;top:0;left:0;bottom:0;width:244px;z-index:50;background:var(--card);border-right:1px solid var(--line);flex-direction:column;padding:22px 14px 16px}
.side-brand{display:flex;align-items:center;gap:11px;padding:6px 10px 24px}
.side-brand .nav-badge{width:30px;height:30px}
.side-brand b{font-weight:700;font-size:19px;letter-spacing:-.4px}
.side-items{display:flex;flex-direction:column;gap:4px;flex:1}
.side-item{display:flex;align-items:center;gap:15px;border:none;background:none;cursor:pointer;border-radius:12px;padding:12px;font-size:15px;font-weight:600;color:var(--text);transition:background .18s}
.side-item svg{width:24px;height:24px;flex-shrink:0}
.side-item:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.side-item.on{font-weight:800}
.side-item.on svg{stroke-width:2.7}
.side-foot{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;cursor:pointer;text-align:left;padding:12px 10px;border-top:1px solid var(--line);transition:background .18s;color:var(--text)}
.side-foot:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.side-foot .nav-avatar{width:38px;height:38px;flex-shrink:0}
.side-foot-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.side-foot-meta b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.side-foot .badge-pill{font-size:9px;padding:3px 7px}
.side-foot-chevron{color:var(--sub);flex-shrink:0}

/* ---------- profile two-column ---------- */
.profile-top{display:flex;gap:30px;align-items:center;max-width:980px;margin:0 auto;padding:36px 24px 28px}
.profile-left{flex:0 0 300px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.profile-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}

/* ---------- create / publish ---------- */
.create-wrap{max-width:640px;margin:0 auto}
.create-head{margin-bottom:18px}
.create-title{font-size:24px;font-weight:800;letter-spacing:-.5px}
.create-subtitle{font-size:14px;color:var(--sub);margin-top:5px}
.create-seg{max-width:360px;margin-bottom:18px}
.create-seg button{display:flex;align-items:center;justify-content:center;gap:8px}
.create-seg button svg{width:18px;height:18px}
.drop-icon{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--text) 6%,transparent);display:flex;align-items:center;justify-content:center;color:var(--sub)}
/* ---------- empty state ---------- */
.empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:52px 0;color:var(--sub)}
.empty-state svg{opacity:.5}
.empty-state .t{font-size:15px;font-weight:600;color:var(--text)}
.dropzone{display:flex;align-items:center;justify-content:center;position:relative;width:100%;aspect-ratio:1;max-height:460px;border:2px dashed var(--line);border-radius:20px;background:var(--card);cursor:pointer;overflow:hidden;transition:border-color .2s}
.dropzone:hover{border-color:var(--sub)}
.drop-prompt{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--sub);text-align:center;padding:20px}
.drop-main{font-size:15px;font-weight:600;color:var(--text)}
.drop-sub{font-size:12px}
.create-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.caption-box{width:100%;margin:16px 0;border:1px solid var(--line);background:var(--inp);color:var(--text);border-radius:14px;padding:13px 14px;font-size:15px;outline:none;resize:vertical;min-height:72px;font-family:inherit}
.caption-box:focus{border-color:var(--blue)}

/* ---------- edit avatar upload ---------- */
.edit-avatar-btn{position:relative;border:none;background:none;cursor:pointer;padding:0}
.edit-cam{position:absolute;bottom:-1px;right:-1px;width:30px;height:30px;border-radius:50%;background:var(--blue);border:3px solid var(--card);display:flex;align-items:center;justify-content:center;color:#fff}
.link-btn{border:none;background:none;color:var(--blue);font-size:13px;font-weight:600;cursor:pointer}
.reel-media{z-index:0}

/* ---------- responsive layout (driven by body.is-mobile / body.is-desktop) ---------- */
.sidenav{display:none}
.bottomnav{display:none}
/* Desktop: left sidebar + content offset by its width */
body.is-desktop .sidenav{display:flex}
body.is-desktop .content{padding:0 0 0 244px}
body.is-desktop .chat-layout{height:100vh}
body.is-desktop .video-col{padding:16px}
body.is-desktop .video-stage{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
body.is-desktop .chat-panel{width:340px;border-left:1px solid var(--line)}
body.is-desktop .explore-wrap{padding:26px 22px 40px}
body.is-desktop .profile-wrap{padding:0 22px 40px}
body.is-desktop .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
body.is-desktop .create-wrap{padding:34px 22px 40px}
body.is-desktop .mobile-only{display:none!important}

body.is-mobile .bottomnav{display:grid}
body.is-mobile .content{padding:0 0 78px}
body.is-mobile .chat-layout{height:calc(100vh - 78px);flex-direction:column}
body.is-mobile .video-col{padding:10px}
body.is-mobile .video-stage{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
body.is-mobile .chat-panel{width:100%;flex:1;min-height:0;border-top:1px solid var(--line)}
body.is-mobile .explore-wrap{padding:16px 14px 20px}
body.is-mobile .profile-wrap{padding:0 16px 24px}
body.is-mobile .grid{grid-template-columns:repeat(3,1fr)}
body.is-mobile .profile-top{flex-direction:column;padding:26px 16px 20px;align-items:stretch}
body.is-mobile .profile-left{flex:none;width:100%}
body.is-mobile .create-wrap{padding:16px 14px 30px}
body.is-mobile .desktop-only{display:none!important}
body.is-mobile .reel-stage{border-radius:0}
body.is-mobile .reel-nav{display:none}
body.is-mobile .sheet{max-width:420px}

/* ---------- explore search ---------- */
.explore-top{position:relative}
.search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--sub);pointer-events:none}
.search{padding-left:40px}
.search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--sub);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
.search-results{display:flex;flex-direction:column;gap:2px}
.sr-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background .15s}
.sr-row:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.sr-row .avatar{width:46px;height:46px;flex-shrink:0}
.sr-row .avatar>div{font-size:14px;font-weight:800;background:var(--bg)}
.sr-meta{flex:1;min-width:0}
.sr-meta .u{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px}
.sr-meta .n{font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-empty{padding:36px 0;text-align:center;color:var(--sub);font-size:14px}

/* ---------- post detail modal ---------- */
.post-modal{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s ease both}
.pm-card{display:flex;background:var(--card);border-radius:18px;overflow:hidden;max-width:920px;width:100%;max-height:86vh;box-shadow:var(--shadow)}
.pm-media{flex:1.4;min-width:0;background:#000;display:flex;align-items:center;justify-content:center}
.pm-media img,.pm-media video{width:100%;max-height:86vh;object-fit:contain}
.pm-side{flex:1;min-width:280px;max-width:340px;display:flex;flex-direction:column}
.pm-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.pm-head .avatar{width:40px;height:40px;flex-shrink:0}
.pm-head .avatar>div{font-size:13px;font-weight:800;background:var(--bg)}
.pm-head .meta{flex:1;min-width:0}
.pm-head .meta b{font-size:14px;font-weight:700}
.pm-head .meta .role{font-size:12px;color:var(--sub)}
.pm-body{flex:1;overflow-y:auto;padding:16px;min-height:60px}
.pm-cap{font-size:14px;line-height:1.55}
.pm-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px}
.pm-like{border:none;background:none;cursor:pointer;color:var(--text);display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.pm-like.liked{color:#ff453a}
.pm-close{position:absolute;top:18px;right:22px;border:none;background:rgba(255,255,255,.16);color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:17px;backdrop-filter:blur(10px)}
body.is-mobile .pm-card{flex-direction:column;max-height:92vh}
body.is-mobile .pm-media{max-height:46vh}
body.is-mobile .pm-media img,body.is-mobile .pm-media video{max-height:46vh}
body.is-mobile .pm-side{max-width:none;min-width:0}

/* ---------- coming soon ---------- */
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:70px 20px;min-height:48vh}
.cs-badge{width:84px;height:84px;border-radius:24px;background:var(--gold);color:#3a2b00;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.cs-badge.dark{background:rgba(255,255,255,.1);color:#E7C873}
.cs-title{font-size:24px;font-weight:800;letter-spacing:-.5px}
.cs-sub{font-size:15px;color:var(--sub);max-width:380px;line-height:1.5}
.reels-soon{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}

/* ---------- explore post lightbox ---------- */
.post-viewer{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;animation:fadeIn .2s ease both}
.post-viewer img,.post-viewer video{max-width:94vw;max-height:90vh;border-radius:14px;object-fit:contain;background:#000}

/* ---------- tips + toast ---------- */
.tips{position:fixed;inset:0;z-index:120;pointer-events:none}
.tip{position:absolute;bottom:120px;font-size:22px;font-weight:800;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;animation:tipFloat 1.6s ease-out both}
.toast{position:fixed;left:50%;transform:translateX(-50%);z-index:130;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;font-size:13px;font-weight:600;box-shadow:var(--shadow);animation:fadeUp .3s ease both;white-space:nowrap}