@font-face{font-family:"Manrope";src:url("/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{
  --accent:#38bdf8;
  --c1:var(--accent);--c2:#818cf8;--c3:#22d3ee;
  --bg:#0b1220;--text:#f1f5f9;--muted:#9aa7bd;
  --card:rgba(17,25,40,.55);--card-brd:rgba(255,255,255,.14);
  --btn:rgba(255,255,255,.055);--btn-h:rgba(255,255,255,.12);--btn-brd:rgba(255,255,255,.12);
  --shadow:0 40px 80px -30px rgba(0,0,0,.75);--tile:#fff;
}
:root[data-theme="light"]{
  --bg:#e8eeff;--text:#0f172a;--muted:#475569;
  --card:rgba(255,255,255,.72);--card-brd:rgba(15,23,42,.1);
  --btn:rgba(15,23,42,.035);--btn-h:rgba(15,23,42,.08);--btn-brd:rgba(15,23,42,.1);
  --shadow:0 40px 80px -34px rgba(30,41,90,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--bg);min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
  overflow-x:hidden;-webkit-tap-highlight-color:transparent;
}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block}
#bgFallback{position:fixed;inset:-25%;z-index:-2;display:none;filter:blur(70px) saturate(1.35);
  background:radial-gradient(38% 38% at 20% 28%,var(--c1),transparent 62%),radial-gradient(34% 34% at 82% 22%,var(--c2),transparent 62%),radial-gradient(44% 44% at 62% 82%,var(--c3),transparent 62%),var(--bg);
  animation:drift 20s ease-in-out infinite alternate}
body.no-webgl #bg{display:none}
body.no-webgl #bgFallback{display:block}
@keyframes drift{0%{transform:translate3d(-3%,-2%,0) scale(1.05)}100%{transform:translate3d(4%,3%,0) scale(1.15) rotate(8deg)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.theme{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:10;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--text);background:var(--card);border:1px solid var(--card-brd);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .15s,background .2s}
.theme:hover{background:var(--btn-h)}.theme:active{transform:scale(.92)}.theme svg{width:20px;height:20px}
:root[data-theme="light"] .moon{display:none}:root[data-theme="dark"] .sun{display:none}

.scene{perspective:1200px;width:100%;max-width:420px}
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .1s ease-out}
.flip{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1);position:relative}
.flip.flipped{transform:rotateY(180deg)}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);border:1px solid var(--card-brd);border-radius:26px;box-shadow:var(--shadow);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);padding:30px 22px 20px;overflow:hidden;position:relative}
.face::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1px;pointer-events:none;background:linear-gradient(140deg,rgba(255,255,255,.35),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}

.avatar-wrap{width:118px;height:118px;margin:0 auto 16px;position:relative}
.avatar-ring{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c1));animation:spin 7s linear infinite;filter:drop-shadow(0 0 18px rgba(56,189,248,.45))}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:42px;font-weight:800;letter-spacing:-1px;color:#0b1220;background:linear-gradient(135deg,var(--c1),var(--c2));border:4px solid var(--bg)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.name{text-align:center;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;display:flex;gap:7px;align-items:center;justify-content:center}
.badge{width:20px;height:20px;color:var(--c1);flex:0 0 auto;display:inline-flex}.badge svg{width:100%;height:100%}
.title{text-align:center;font-weight:700;margin-top:3px;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bio{text-align:center;color:var(--muted);font-size:.92rem;line-height:1.55;margin:11px 6px 0}

.save{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:20px 0 4px;padding:15px;border:0;border-radius:15px;cursor:pointer;font:inherit;font-size:1rem;font-weight:800;color:#06121f;background:linear-gradient(135deg,var(--c1),var(--c2));text-decoration:none;box-shadow:0 12px 28px -10px rgba(56,189,248,.7);transition:transform .12s,filter .2s}
.save svg{width:20px;height:20px}.save:hover{filter:brightness(1.06)}.save:active{transform:scale(.98)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:12px}
.btn{display:flex;align-items:center;gap:11px;min-width:0;padding:11px 13px;border-radius:14px;text-decoration:none;background:var(--btn);border:1px solid var(--btn-brd);color:var(--text);transition:background .15s,transform .12s,border-color .15s;opacity:0;animation:rise .5s ease forwards}
.btn:hover{background:var(--btn-h);border-color:var(--c1)}.btn:active{transform:scale(.97)}
.btn svg{flex:0 0 auto;width:21px;height:21px;color:var(--c1)}
.btn .txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.btn .txt b{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn .txt small{font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:9px;margin-top:12px}
.act{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:11px 6px;border-radius:13px;cursor:pointer;background:var(--btn);border:1px solid var(--btn-brd);color:var(--text);font:inherit;font-size:.68rem;font-weight:700;transition:background .15s,transform .12s}
.act:hover{background:var(--btn-h)}.act:active{transform:scale(.95)}.act svg{width:21px;height:21px;color:var(--c1)}

.footer{text-align:center;color:var(--muted);font-size:.74rem;margin-top:18px;line-height:1.9}
.footer .langs a{color:var(--muted);text-decoration:none;font-weight:700}
.footer .langs a.on{color:var(--c1)}

.qr-tile{width:210px;height:210px;background:var(--tile);border-radius:18px;padding:12px;box-shadow:0 16px 40px -16px rgba(0,0,0,.6)}
#qrcode,#qrcode svg,#qrcode img{width:100%;height:100%;display:block}
.back h3{font-size:1.1rem;font-weight:800}.back p{color:var(--muted);font-size:.85rem;margin-top:-6px}
.ghost{padding:11px 20px;border-radius:12px;cursor:pointer;font:inherit;font-weight:700;color:var(--text);background:var(--btn);border:1px solid var(--btn-brd)}.ghost:hover{background:var(--btn-h)}

.modal{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,18,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal.open{display:flex}
.modal-card{position:relative;width:100%;max-width:380px;background:var(--card);border:1px solid var(--card-brd);border-radius:20px;padding:24px 20px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow)}
.modal-card h3{font-size:1.15rem;font-weight:800;margin-bottom:14px}
.modal-x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;font-size:20px;line-height:1;color:var(--text);background:var(--btn)}
#leadForm{display:flex;flex-direction:column;gap:10px}
#leadForm input,#leadForm textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--btn-brd);background:var(--btn);color:var(--text);font:inherit;font-size:.95rem;resize:vertical}
#leadForm input:focus,#leadForm textarea:focus{outline:none;border-color:var(--c1)}
#leadForm .save{margin-top:6px}

#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:40;opacity:0;pointer-events:none;background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.16);padding:11px 18px;border-radius:12px;font-size:.85rem;font-weight:700;transition:opacity .25s,transform .25s;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:340px){.face{padding:24px 14px 16px}.avatar-wrap{width:94px;height:94px}.name{font-size:1.32rem}.grid{grid-template-columns:1fr}.save{font-size:.95rem;padding:14px}}
@media (max-height:820px){body{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}#bgFallback{animation:none}.avatar-ring{animation:none}.tilt{transition:none}}

/* ---------- Chat ---------- */
.back-btn{color:var(--c1);text-decoration:none}
.chatpage{align-items:stretch;padding:0;overflow:hidden}
.chat-wrap{display:flex;flex-direction:column;width:100%;max-width:560px;margin:0 auto;height:100dvh}
.chat-top{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--card);border-bottom:1px solid var(--card-brd);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:2}
.chat-top .back-btn{font-size:1.5rem;line-height:1}
.chat-top .peer{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0}
.chat-top .peer .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#06121f;background:linear-gradient(135deg,var(--c1),var(--c2));overflow:hidden;flex:0 0 auto}
.chat-top .peer .av img{width:100%;height:100%;object-fit:cover}
.chat-top .peer b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:80%;padding:9px 14px 17px;border-radius:16px;position:relative;font-size:.94rem;line-height:1.35;word-break:break-word;white-space:pre-wrap}
.msg .t{position:absolute;right:11px;bottom:4px;font-size:.6rem;opacity:.65}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--c1),var(--c2));color:#06121f;border-bottom-right-radius:5px}
.msg.them{align-self:flex-start;background:var(--card);border:1px solid var(--card-brd);color:var(--text);border-bottom-left-radius:5px}
.chat-input{display:flex;gap:8px;padding:12px;background:var(--card);border-top:1px solid var(--card-brd);padding-bottom:max(12px,env(safe-area-inset-bottom))}
.chat-input input{flex:1;min-width:0;padding:13px 16px;border-radius:22px;border:1px solid var(--btn-brd);background:var(--btn);color:var(--text);font:inherit;font-size:16px}
.chat-input input:focus{outline:none;border-color:var(--c1)}
.chat-input button{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;color:#06121f;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center}
.chat-input button svg{width:20px;height:20px}
.chat-list .item{align-items:center}
.chat-list .snippet{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-list .unread{width:9px;height:9px;border-radius:50%;background:var(--c1);flex:0 0 auto}
.chat-btn{background:linear-gradient(135deg,#22c55e,#16a34a)!important;color:#04140a!important;box-shadow:0 12px 28px -10px rgba(34,197,94,.7)!important}

/* ---------- Channels ---------- */
.post{align-self:stretch;background:var(--card);border:1px solid var(--card-brd);border-radius:14px;padding:12px 14px 20px;position:relative;white-space:pre-wrap;word-break:break-word;font-size:.95rem;line-height:1.4}
.post .t{position:absolute;right:12px;bottom:5px;font-size:.62rem;color:var(--muted)}
.ch-meta{font-size:.72rem;color:var(--muted)}
.subbtn{flex:0 0 auto;padding:8px 14px;border-radius:10px;border:1px solid var(--btn-brd);background:var(--btn);color:var(--text);font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.subbtn.on{background:linear-gradient(135deg,var(--c1),var(--c2));color:#06121f;border:0}
.msg .sndr{display:block;font-size:.7rem;font-weight:700;color:var(--c1);margin-bottom:2px}

/* ---------- Feature nav (bosh sahifa) ---------- */
.featrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 8px}
.feature{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border-radius:16px;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--card-brd);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .12s,border-color .15s}
.feature:hover{transform:translateY(-2px);border-color:var(--c1)}
.feature .fi{font-size:1.7rem;line-height:1}
.feature b{font-size:.92rem}
.feature small{color:var(--muted);font-size:.7rem;text-align:center}
@media(max-width:430px){.feature small{display:none}.feature{padding:14px 6px}}

/* ---------- Inbox (Telegramsimon birlashgan suhbatlar) ---------- */
.inbox .newrow{display:flex;gap:8px;margin:14px 0}
.inbox .newrow a{flex:1;text-align:center;padding:12px 6px;border-radius:12px;text-decoration:none;background:var(--card);border:1px solid var(--card-brd);color:var(--text);font-weight:700;font-size:.84rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.inbox .newrow a:hover{border-color:var(--c1)}
.inbox .item{align-items:center;gap:12px}
.inbox .right{margin-left:auto;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.inbox .time{font-size:.66rem;color:var(--muted)}
.inbox .badge-un{min-width:20px;height:20px;padding:0 6px;border-radius:11px;background:var(--c1);color:#06121f;font-size:.72rem;font-weight:800;display:grid;place-items:center}
.kindbadge{font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:6px;background:var(--btn);color:var(--muted);margin-left:6px;vertical-align:middle}

/* ---------- Sayqal ---------- */
.av{box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.item{transition:transform .14s ease,border-color .15s ease,background .15s ease}
.newrow a{transition:transform .12s ease,border-color .15s ease}
.newrow a:active{transform:scale(.97)}
.msg{box-shadow:0 6px 16px -10px rgba(0,0,0,.5)}
.feature{box-shadow:0 12px 34px -18px rgba(0,0,0,.55)}
.face{box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.04) inset}

/* ---------- Katalog / ro'yxat / forma (global) ---------- */
.dir{width:100%;max-width:680px;margin:0 auto}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.bar .brand{font-weight:800;font-size:1.5rem;letter-spacing:-.02em;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bar .auth{margin-left:auto;font-size:.85rem}
.bar .auth a{color:var(--c1);text-decoration:none;font-weight:700}
.bar .auth .muted{color:var(--muted)}
.search{display:flex;gap:10px;margin-bottom:8px}
.search input,.search textarea{flex:1;min-width:0;padding:14px 16px;border-radius:14px;border:1px solid var(--card-brd);background:var(--card);color:var(--text);font:inherit;font-size:1rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.search input::placeholder{color:var(--muted)}
.search input:focus,.search textarea:focus{outline:none;border-color:var(--c1)}
.search button{padding:0 18px;border:0;border-radius:14px;cursor:pointer;font:inherit;font-weight:800;color:#06121f;background:linear-gradient(135deg,var(--c1),var(--c2))}
.hint{color:var(--muted);font-size:.8rem;margin:0 2px 16px}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.inbox .list{grid-template-columns:1fr}
.item{display:flex;align-items:center;gap:13px;padding:13px;border-radius:16px;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--card-brd);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .12s,border-color .15s,background .15s}
.item:hover{transform:translateY(-2px);border-color:var(--c1)}
.item .av{width:50px;height:50px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:800;color:#06121f;overflow:hidden;background:linear-gradient(135deg,var(--c1),var(--c2))}
.item .av img{width:100%;height:100%;object-fit:cover}
.it-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-title{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-id{color:var(--c1);font-size:.72rem;font-weight:700}
.empty{text-align:center;color:var(--muted);padding:30px;grid-column:1/-1}