:root{--p:#7c4dff;--a:#ff5fa2;--t:#1d1533;--m:#6f6787;--bg:#f6f3ff;--card:#fff;--line:#e8e2f7;--ok:#12b5a6;--danger:#ef476f;--r:18px}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--t);background:var(--bg);-webkit-text-size-adjust:100%}
a{color:var(--p);text-decoration:none}
h1,h2,h3{margin:.2em 0 .4em}
.muted{color:var(--m)}
.grow{flex:1;min-width:0}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.shell{min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;min-height:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--t);font-weight:600}
.brand b{background:linear-gradient(135deg,var(--p),var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo{font-size:1.5rem}
.topnav{display:flex;align-items:center;gap:.8rem;font-size:.9rem}
.topnav form{margin:0}
.staff .topbar{background:#1d1533}.staff .brand,.staff .link{color:#fff}
button,input,select{font:inherit}
button{cursor:pointer}
.link{background:none;border:0;color:var(--m);padding:0}
.link.tiny{font-size:.7rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line);background:#fff;color:var(--t);padding:.65rem 1.1rem;border-radius:999px;font-weight:700}
.btn.primary{background:linear-gradient(135deg,var(--p),var(--a));color:#fff;border:0;box-shadow:0 6px 16px rgba(124,77,255,.3)}
.btn.ghost{background:transparent}.btn.danger{background:var(--danger);color:#fff;border:0}
.btn.sm{padding:.4rem .8rem;font-size:.85rem}.btn.lg{padding:.9rem 1.6rem;font-size:1.05rem}.btn.block{width:100%}
.btn:disabled{opacity:.5}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border:0;border-radius:50%;background:#f0ebff;font-size:.95rem;font-weight:700;cursor:pointer}
.icon-btn.rec{background:var(--danger);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
input:not([type=checkbox]){width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:#fff;outline:none}
input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,77,255,.15)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;box-shadow:0 8px 24px rgba(60,30,120,.06)}
.page{padding:1.5rem 1rem;max-width:1000px;margin:0 auto;width:100%}.page.narrow{max-width:420px}.page.wide{max-width:1200px}.page.center{text-align:center}
.form label{display:block;margin:.8rem 0;font-weight:600;font-size:.9rem}.form input{margin-top:.3rem}
.alert{background:#ffe9ef;color:#a3173f;padding:.6rem .9rem;border-radius:12px;margin:.6rem 0}.alert.ok{background:#e0f8f4;color:#0b7a70}.alert.sm{font-size:.85rem}
.pill{display:inline-block;background:#efe8ff;color:var(--p);padding:.3rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;max-width:1100px;margin:0 auto;padding:3rem 1rem}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1}
.grad{background:linear-gradient(135deg,var(--p),var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}
.phone{background:#fff;border:8px solid #1d1533;border-radius:36px;padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;max-width:300px;justify-self:center;box-shadow:0 20px 50px rgba(124,77,255,.25)}
.phone .bubble{padding:.6rem .9rem;border-radius:16px;max-width:85%;font-size:.9rem}
.phone .in{background:#f0ebff;align-self:flex-start}.phone .out{background:linear-gradient(135deg,var(--p),var(--a));color:#fff;align-self:flex-end}
.phone .gif{background:linear-gradient(135deg,#ffd166,#ef476f);color:#fff;font-weight:800;height:70px;display:flex;align-items:center;justify-content:center}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;max-width:1100px;margin:0 auto;padding:0 1rem 2rem}
.ico{font-size:1.8rem}
.notice{max-width:900px;margin:0 auto 3rem;background:#fff7e0;border:1px solid #ffe3a0;border-radius:var(--r);padding:1rem 1.4rem}.notice.sm{margin:0 0 1rem;padding:.8rem 1rem;font-size:.88rem}
.notice p{margin:.3rem 0}
/* app */
.app{flex:1;display:grid;grid-template-columns:340px 1fr;min-height:0;height:calc(100dvh - 58px)}
.side{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:auto}
.main{display:flex;flex-direction:column;min-height:0;min-width:0}
.tabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.tabs button{flex:1;border:0;background:none;padding:.8rem .3rem;font-weight:700;font-size:.82rem;color:var(--m);border-bottom:3px solid transparent}
.tabs button.on{color:var(--p);border-color:var(--p)}.tabs.inline{margin:1rem 0;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.list{display:flex;flex-direction:column}.panel{padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.item{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;color:var(--t);border:0;background:none;text-align:left;width:100%;border-bottom:1px solid #f3effc}
.item.on,.item:hover{background:#f6f2ff}
.item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{position:relative;width:44px;height:44px;border-radius:50%;flex:none;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden}
.avatar.sm{width:30px;height:30px;font-size:.75rem}.avatar img{width:100%;height:100%;object-fit:cover}
.dot{position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#2ecc71;border:2px solid #fff}
.badge{background:var(--a);color:#fff;border-radius:999px;font-size:.72rem;padding:.15rem .5rem;font-weight:700}
.tag{font-size:.65rem;background:#efe8ff;color:var(--p);padding:.1rem .45rem;border-radius:999px;margin-left:.3rem}.tag.sup{background:#dcf7f3;color:#0b7a70}.tag.ban{background:#ffe0e8;color:var(--danger)}
.picks{max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:.4rem}.pick{display:flex;gap:.5rem;align-items:center;padding:.3rem}
.empty{padding:2rem 1rem;text-align:center;color:var(--m)}.empty.big{margin:auto}
.thread{display:flex;flex-direction:column;flex:1;min-height:0;background:linear-gradient(#faf8ff,#f4f0ff)}
.thread-head{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;background:#fff;border-bottom:1px solid var(--line)}
.thread-head small{display:block}.back{display:none}
.messages{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.msg{display:flex;gap:.5rem;align-items:flex-end;max-width:85%}.msg.out{align-self:flex-end;flex-direction:row-reverse}
.msg .bubble{background:#fff;border:1px solid var(--line);padding:.55rem .8rem;border-radius:18px 18px 18px 4px;word-break:break-word}
.msg.out .bubble{background:linear-gradient(135deg,var(--p),var(--a));color:#fff;border:0;border-radius:18px 18px 4px 18px}
.msg.out a{color:#fff}.who{font-size:.72rem;font-weight:700;color:var(--p);margin-bottom:.1rem}
.bubble time{display:block;font-size:.65rem;opacity:.65;text-align:right;margin-top:.15rem}
.media{max-width:260px;width:100%;border-radius:12px;display:block}audio{max-width:240px;height:36px}
.calllink{font-weight:700}
.composer{display:flex;gap:.4rem;align-items:center;padding:.6rem;background:#fff;border-top:1px solid var(--line);padding-bottom:calc(.6rem + env(safe-area-inset-bottom))}
.composer .btn{flex:none}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem}
.stats .card{text-align:center}.stats b{display:block;font-size:1.8rem;color:var(--p)}
.table{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}
.trow{display:flex;gap:.6rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.6rem .8rem;flex-wrap:wrap}
.inspect{margin-top:1rem}.viewer{height:420px;display:flex;margin-top:1rem;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.viewer .thread{width:100%}
@media(max-width:800px){
  .hero{grid-template-columns:1fr;padding:1.5rem 1rem}
  .app{grid-template-columns:1fr;height:calc(100dvh - 58px)}
  .app .main{display:none}.app.open .side{display:none}.app.open .main{display:flex}
  .back{display:inline-flex}
  .msg{max-width:92%}
  .topnav .link{font-size:.8rem}
}