:root { color-scheme: dark; --bg:#10131b; --panel:#232733; --green:#4df18e; --text:#f7f8fb; --muted:#a8adb8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 50% -10%,rgba(92,110,145,.22),transparent 31rem),#080a10; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,a { font:inherit; } button { color:inherit; }
.phone-shell { position:relative; display:flex; flex-direction:column; width:min(100%,650px); min-height:100vh; margin:auto; overflow:hidden; background:var(--bg); box-shadow:0 0 90px rgba(0,0,0,.75); }
.topbar { height:84px; padding:max(14px,env(safe-area-inset-top)) 22px 12px; display:flex; align-items:center; gap:13px; background:var(--panel); z-index:2; }
.icon-button { width:31px; height:42px; border:0; background:transparent; position:relative; cursor:pointer; }
.back::before { content:""; position:absolute; width:11px; height:11px; border-left:3px solid white; border-bottom:3px solid white; transform:rotate(45deg); left:8px; top:14px; }
.close::before,.close::after { content:""; position:absolute; width:22px; height:3px; background:white; border-radius:3px; left:5px; top:20px; }
.close::before { transform:rotate(45deg); } .close::after { transform:rotate(-45deg); }
.agent-avatar { position:relative; width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 65% 25%,#ab43ff,#361178 40%,#080915 74%); border:2px solid rgba(255,255,255,.18); font-weight:900; transform:rotate(-8deg); }
.agent-avatar::after { content:""; position:absolute; width:11px; height:11px; right:-1px; bottom:0; border-radius:50%; background:var(--green); border:2px solid var(--panel); }
.agent-copy { flex:1; min-width:0; } .agent-copy h1 { margin:0; font-size:clamp(20px,4.2vw,25px); letter-spacing:-.4px; }
.agent-copy p { margin:2px 0 0; color:var(--green); font-weight:800; font-size:12px; letter-spacing:.25px; }
.agent-copy i { display:inline-block; width:7px; height:7px; margin-right:4px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.welcome { position:relative; min-height:290px; padding:105px 20px 30px; text-align:center; }
.glow { position:absolute; width:270px; height:170px; left:50%; top:78px; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(51,239,132,.18),transparent 67%); filter:blur(18px); }
.welcome h2 { position:relative; margin:0; color:var(--green); font-size:clamp(30px,7vw,43px); letter-spacing:-.7px; }
.welcome p { position:relative; margin:5px 0 0; font-size:clamp(19px,4.5vw,25px); }
.wave { display:inline-block; animation:wave 2s ease-in-out infinite; transform-origin:75% 80%; }
@keyframes wave { 0%,55%,100%{transform:rotate(0)} 65%{transform:rotate(17deg)} 75%{transform:rotate(-9deg)} 85%{transform:rotate(13deg)} }
.service-grid { margin-top:auto; padding:0 25px 29px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.service-card { min-height:126px; padding:20px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; border:1px solid rgba(58,224,126,.32); border-radius:20px; background:linear-gradient(135deg,#252a35,#191f27); box-shadow:inset 0 0 30px rgba(57,239,133,.025); cursor:pointer; transition:.18s ease; }
.service-card:hover { transform:translateY(-2px); border-color:rgba(77,241,142,.7); background:linear-gradient(135deg,#29313b,#18241f); } .service-card:active { transform:scale(.98); }
.card-copy strong { display:block; margin-bottom:5px; font-size:clamp(19px,4.3vw,25px); line-height:1; }
.card-copy small { display:block; color:var(--muted); font-size:clamp(12px,2.8vw,15px); line-height:1.22; font-weight:600; }
.reward { display:inline-block; margin-top:5px; padding:2px 8px; border-radius:10px; background:linear-gradient(#ff982e,#e95017); font-size:11px; }
.service-icon { flex:0 0 54px; width:54px; height:54px; display:grid; place-items:center; border-radius:50%; font-weight:900; font-size:25px; filter:drop-shadow(0 7px 10px rgba(0,0,0,.3)); }
.chat-icon { color:#21406e; letter-spacing:-3px; background:linear-gradient(145deg,#ffe644,#54f08e 55%,#39bdf7); }
.telegram-icon { color:white; background:linear-gradient(145deg,#189edb,#1168a0); transform:rotate(-16deg); }
.messenger-icon { font-size:38px; background:linear-gradient(145deg,#f4a5ff,#8d43ff 40%,#ff3e6f 75%,#ffb157); }
.bulb-icon { font-size:39px; background:transparent; } .complaint-icon { color:white; background:linear-gradient(145deg,#4dbdff,#225add); transform:rotate(-8deg); }
.bottom-nav { height:92px; padding-bottom:env(safe-area-inset-bottom); display:grid; grid-template-columns:1fr 1fr; background:var(--panel); border-radius:18px 18px 0 0; }
.nav-item { border:0; background:transparent; color:#8e929c; display:flex; flex-direction:column; gap:5px; justify-content:center; align-items:center; cursor:pointer; } .nav-item.active { color:var(--text); }
.home-glyph { width:29px; height:25px; border:3px solid var(--green); border-radius:9px; position:relative; }
.home-glyph::before { content:""; position:absolute; width:18px; height:18px; border-left:3px solid var(--green); border-top:3px solid var(--green); transform:rotate(45deg); left:2px; top:-11px; background:var(--panel); }
.bubble-glyph { width:31px; height:24px; border:3px solid currentColor; border-radius:50%; position:relative; }
.bubble-glyph::after { content:""; position:absolute; width:8px; height:8px; border-right:3px solid currentColor; border-bottom:3px solid currentColor; right:0; bottom:-5px; transform:rotate(25deg); }
dialog { width:min(calc(100% - 40px),420px); padding:34px 28px 28px; color:var(--text); border:1px solid rgba(77,241,142,.4); border-radius:22px; background:#202530; text-align:center; box-shadow:0 20px 80px #000; }
dialog::backdrop { background:rgba(3,5,9,.78); backdrop-filter:blur(5px); } dialog h3 { margin:8px 0; font-size:22px; } dialog p { color:var(--muted); line-height:1.55; }
dialog a { display:block; padding:13px; color:#07130c; background:var(--green); border-radius:12px; font-weight:800; text-decoration:none; }
.dialog-icon { font-size:42px; } .dialog-close { position:absolute; right:13px; top:10px; border:0; background:transparent; font-size:28px; cursor:pointer; }
@media(max-width:390px) { .topbar{padding-left:10px;padding-right:10px}.welcome{min-height:235px;padding-top:75px}.service-grid{padding-left:12px;padding-right:12px;gap:9px}.service-card{min-height:115px;padding:16px 10px;border-radius:16px}.service-icon{flex-basis:43px;width:43px;height:43px;font-size:20px} }
@media(min-width:651px) { body{padding:24px 0}.phone-shell{min-height:calc(100vh - 48px);border-radius:22px} }