/* HappyGram V57 — дизайн по предоставленным референсам.
   Базовый режим: светлый, мягкий lavender/purple. */
:root{
  --v57-bg:#f5f6fb;
  --v57-surface:#ffffff;
  --v57-surface-2:#fbfbfe;
  --v57-stroke:#e8e8f0;
  --v57-text:#292936;
  --v57-muted:#8d8d9e;
  --v57-purple:#6f55df;
  --v57-purple-2:#927af1;
  --v57-lav:#eeeafe;
  --v57-lav-2:#f5f2ff;
  --v57-green:#35b88c;
  --v57-red:#e76a73;
  --v57-shadow:0 12px 30px rgba(67,52,124,.07);
  --v57-shadow-lg:0 24px 70px rgba(67,52,124,.12);
  --v57-radius:22px;
  --v57-sidebar:298px;
}
*{box-sizing:border-box}
html,body{min-height:100%;width:100%;overflow-x:hidden}
body{
  margin:0;
  color:var(--v57-text);
  background:
    radial-gradient(900px 600px at 5% -10%,rgba(155,133,235,.17),transparent 58%),
    radial-gradient(800px 500px at 92% 4%,rgba(229,192,235,.16),transparent 58%),
    var(--v57-bg)!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif!important;
  letter-spacing:-.01em;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 30%);z-index:-1}
button,input,textarea,select{font:inherit}

/* ---------- public / landing ---------- */
#screen-landing{padding:24px 28px 38px!important}
.landing-topbar{max-width:1360px!important;margin:0 auto 22px!important;padding:0 4px!important}
.landing-brand{gap:11px!important;font-size:18px!important;letter-spacing:-.03em!important}
.landing-brand img{width:34px!important;height:34px!important;border-radius:10px!important;box-shadow:0 8px 22px rgba(111,85,223,.18)!important}
.landing-brand b{color:var(--v57-purple)!important}
.landing-lang{height:40px!important;border-radius:12px!important;border:1px solid var(--v57-stroke)!important;background:#fff!important;color:#555565!important;box-shadow:0 6px 16px rgba(67,52,124,.05)!important;padding:0 13px!important}
.landing-hero{
  max-width:1360px!important;min-height:560px!important;margin:0 auto!important;padding:58px 64px!important;border-radius:28px!important;
  background:linear-gradient(135deg,#f1efff 0%,#f8f5ff 44%,#f7fbff 100%)!important;
  border:1px solid #e7e4f5!important;box-shadow:var(--v57-shadow-lg)!important;overflow:hidden!important;
}
.landing-hero:before{background:radial-gradient(circle at 72% 48%,rgba(132,106,227,.16),transparent 35%)!important}
.landing-copy{max-width:650px!important;position:relative;z-index:2}
.landing-kicker{font-size:12px!important;color:#7f72af!important;font-weight:800!important;letter-spacing:.18em!important}
.landing-copy h1{margin:14px 0 18px!important;font-size:clamp(52px,5.8vw,82px)!important;line-height:1.03!important;letter-spacing:-.065em!important;color:#2f2d3b!important}
.landing-copy h1 span{color:var(--v57-purple)!important;background:none!important}
.landing-copy p{max-width:600px!important;font-size:17px!important;line-height:1.75!important;color:#747486!important}
.landing-actions{gap:10px!important;margin-top:30px!important}
.landing-main-btn,.landing-apk-btn{min-height:50px!important;padding:0 20px!important;border-radius:14px!important;font-weight:800!important}
.landing-main-btn{background:var(--v57-purple)!important;box-shadow:0 14px 26px rgba(111,85,223,.24)!important}
.landing-apk-btn{background:#fff!important;border:1px solid var(--v57-stroke)!important;color:#555565!important}
.landing-ios{margin-top:14px!important;color:#878793!important}
.landing-orbit{min-width:430px!important}
.landing-logo-glow{width:280px!important;height:280px!important;border-radius:50%!important;background:radial-gradient(circle,#fff 10%,#efebff 58%,#ded5fc 100%)!important;border:1px solid #ded8ef!important;box-shadow:0 32px 80px rgba(103,78,192,.18)!important;transform:none!important}
.landing-logo-glow img{width:132px!important;height:132px!important;border-radius:30px!important;box-shadow:0 18px 36px rgba(111,85,223,.20)!important}
.orbit-pill{background:#fff!important;border:1px solid #e6e3ef!important;color:#666675!important;box-shadow:0 10px 20px rgba(67,52,124,.07)!important;border-radius:14px!important;padding:10px 13px!important}
.landing-labs{max-width:1360px!important;margin:25px auto 0!important}
.landing-section-head{padding:0 4px 14px!important}
.landing-section-head span{color:#8878c6!important;font-weight:800!important}
.landing-section-head h2{font-size:30px!important;color:#2f2d3b!important}
.landing-section-head p{color:#8a8895!important}
.landing-feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.landing-feature-grid article{min-height:166px!important;background:#fff!important;border:1px solid var(--v57-stroke)!important;border-radius:19px!important;box-shadow:var(--v57-shadow)!important}
.landing-feature-grid article b{width:42px!important;height:42px!important;border-radius:12px!important;background:var(--v57-lav)!important;color:var(--v57-purple)!important;box-shadow:none!important}
.landing-feature-grid article strong{color:#3a3948!important;font-size:14px!important}
.landing-feature-grid article span{color:#858493!important;line-height:1.55!important}
.landing-premium-card{background:linear-gradient(145deg,#f0edff,#f9f1ff)!important;border-color:#ddd6f5!important}
.landing-footer{max-width:1360px!important;margin:18px auto 0!important;color:#96939f!important}

/* ---------- auth / onboarding ---------- */
#screen-auth{padding:0!important;display:grid!important;place-items:stretch!important;background:#fff!important}
#screen-auth:before{
  content:"HAPPYGRAM\A\AОбщайся свободно.\AТвои разговоры останутся на месте.";
  white-space:pre-wrap;display:flex;align-items:flex-end;padding:48px clamp(34px,6vw,84px);color:#fff;font-weight:700;font-size:clamp(18px,2vw,28px);line-height:1.3;
  background:linear-gradient(150deg,#5f46bf 0%,#7962da 46%,#9885e7 100%);position:absolute;inset:0 57% 0 0;
}
#screen-auth:after{content:"";position:absolute;inset:0 57% 0 0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 35%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.12),transparent 40%);pointer-events:none}
#screen-auth .card-auth{position:relative;z-index:2;margin-left:57%;width:min(620px,43vw)!important;max-width:none!important;min-height:100%!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;padding:80px clamp(36px,5vw,82px)!important}
#screen-auth .brand{margin-bottom:42px!important}.brand-icon-img{box-shadow:0 10px 24px rgba(111,85,223,.12)!important}
#screen-auth .tabs{background:#f5f4f9!important;border:1px solid #ecebf2!important;border-radius:13px!important}
#screen-auth .tab{border-radius:10px!important;color:#8c8995!important}.tabs .tab.is-active{background:#fff!important;color:var(--v57-purple)!important;box-shadow:0 5px 14px rgba(67,52,124,.08)!important}
#screen-auth .field>span{font-size:12px!important;color:#6e6c79!important}
#screen-auth .field input{height:50px!important;background:#fff!important;border:1px solid #dedde7!important;border-radius:13px!important;box-shadow:none!important}
#screen-auth .field input:focus{border-color:#a08de8!important;box-shadow:0 0 0 4px rgba(111,85,223,.08)!important}
#screen-auth #auth-submit{height:52px!important;border-radius:13px!important;background:var(--v57-purple)!important;box-shadow:0 12px 24px rgba(111,85,223,.22)!important}
#screen-auth .cloud-password-step{background:#fbfaff!important;border:1px solid #ece8f7!important}
#screen-username,#screen-avatar{background:linear-gradient(160deg,#f3f0fc,#f8f8fb)!important}
#screen-username .card-step,#screen-avatar .card-step{background:#fff!important;border:1px solid var(--v57-stroke)!important;border-radius:22px!important;box-shadow:var(--v57-shadow-lg)!important}

/* ---------- application shell ---------- */
#screen-app{padding:20px!important;min-height:100dvh!important;display:grid!important;place-items:center!important}
#screen-app>.app-shell{
  width:min(1420px,calc(100vw - 40px))!important;height:min(860px,calc(100dvh - 40px))!important;min-height:640px!important;
  display:grid!important;grid-template-columns:72px var(--v57-sidebar) minmax(0,1fr)!important;
  background:#fff!important;border:1px solid #e6e5ed!important;border-radius:26px!important;box-shadow:0 28px 90px rgba(66,56,112,.13)!important;overflow:hidden!important;
}
#screen-app .rail{width:auto!important;padding:16px 10px!important;background:#faf9fd!important;border-right:1px solid #ecebf2!important;gap:7px!important}
#screen-app .rail-brand{width:40px!important;height:40px!important;border-radius:11px!important;margin:0 auto 17px!important}
#screen-app .rail-btn{width:46px!important;height:46px!important;border-radius:13px!important;color:#9a97a7!important;background:transparent!important;justify-content:center!important;padding:0!important}
#screen-app .rail-btn.is-active{color:var(--v57-purple)!important;background:#eeeafd!important;box-shadow:none!important}
#screen-app .rail-btn:hover{background:#f0eef8!important;color:var(--v57-purple)!important}
#screen-app .sidebar{min-width:0!important;background:#fbfbfd!important;border-right:1px solid #ecebf2!important}
#screen-app .sidebar-top{padding:16px 14px 10px!important}
#screen-app .me{background:#fff!important;border:1px solid #ecebf1!important;border-radius:15px!important;box-shadow:0 6px 16px rgba(66,56,112,.04)!important}
#screen-app .me-nickname{color:#373642!important}.me-username{color:#9895a4!important}
#screen-app .search-new{margin:5px 14px 12px!important}
#screen-app .search-new input{height:42px!important;border-radius:12px!important;background:#f4f3f8!important;border:1px solid transparent!important;color:#4a4854!important}
#screen-app .search-new input:focus{background:#fff!important;border-color:#ddd8ef!important;box-shadow:0 0 0 4px rgba(111,85,223,.06)!important}
#screen-app .chat-list{padding:2px 8px 14px!important}
#screen-app .chat-item{padding:10px 9px!important;margin:2px 0!important;border-radius:13px!important}
#screen-app .chat-item.is-active,#screen-app .chat-item.active{background:#eeeafd!important;border:1px solid #e1dbf8!important;box-shadow:none!important}
#screen-app .chat-item .chat-name{color:#383743!important}.chat-item .chat-preview,.chat-item .chat-time{color:#9a97a5!important}
#screen-app .story-strip{padding:3px 14px 11px!important}
#screen-app .story-add-only{background:#fff!important;border:1px solid #ebe9f1!important;border-radius:14px!important}
#screen-app .conversation{background:#fff!important;min-width:0!important}
#screen-app .conversation-empty{max-width:520px!important;color:#9693a0!important}
#screen-app .conversation-empty .brand-mark.big{width:74px!important;height:74px!important;border-radius:20px!important;box-shadow:0 18px 40px rgba(111,85,223,.13)!important}
#screen-app .conv-header{height:70px!important;min-height:70px!important;background:#fff!important;border-bottom:1px solid #ecebf2!important}
#screen-app .conv-header .peer-nickname{color:#373642!important}.peer-meta,.peer-status{color:#9996a3!important}
#screen-app .conv-header-actions .icon-btn{background:#f4f2fa!important;color:#777181!important;border:1px solid #ece8f1!important;box-shadow:none!important}
#screen-app .conv-header-actions .icon-btn:hover{background:#eeeafd!important;color:var(--v57-purple)!important}
#screen-app .messages{background:linear-gradient(180deg,#fff 0%,#fcfcfe 100%)!important;padding:18px 30px 112px!important}
#screen-app .msg{border:1px solid #eceaf1!important;box-shadow:0 5px 14px rgba(66,56,112,.045)!important;border-radius:17px!important}
#screen-app .msg.incoming{background:#f4f3f8!important;color:#4d4a57!important}
#screen-app .msg.outgoing,#screen-app .msg.mine{background:linear-gradient(135deg,#7057dc,#846de5)!important;color:#fff!important;border-color:#735fe0!important;box-shadow:0 9px 20px rgba(111,85,223,.18)!important}
#screen-app .composer{left:20px!important;right:20px!important;bottom:17px!important;min-height:58px!important;padding:6px!important;border-radius:17px!important;background:#fff!important;border:1px solid #e5e3eb!important;box-shadow:0 14px 28px rgba(66,56,112,.10)!important}
#screen-app .composer input{height:44px!important;color:#474550!important;background:transparent!important}
#screen-app .composer .icon-btn{width:43px!important;height:43px!important;background:transparent!important;color:#8c8997!important;border-radius:12px!important}
#screen-app .composer .icon-btn:hover{background:#f1eff9!important;color:var(--v57-purple)!important}
#screen-app .btn-send{width:43px!important;height:43px!important;border-radius:12px!important;background:var(--v57-purple)!important;box-shadow:0 10px 20px rgba(111,85,223,.18)!important}

/* avatar discipline */
.hg-avatar,.chat-avatar,.profile-avatar,.msg-avatar,.avatar,.avatar.big{overflow:hidden!important;border-radius:50%!important;aspect-ratio:1/1!important;flex:0 0 auto!important}
.hg-avatar img,.chat-avatar img,.profile-avatar img,.msg-avatar img,.avatar img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block!important;object-fit:cover!important;object-position:center!important;margin:0!important}

/* ---------- settings ---------- */
.panel-overlay,.qr-overlay{background:rgba(45,38,65,.16)!important;backdrop-filter:blur(9px)!important;-webkit-backdrop-filter:blur(9px)!important}
.panel-card,.panel,.qr-card{background:#fbfbfd!important;border:1px solid #e4e3eb!important;border-radius:24px!important;box-shadow:0 26px 80px rgba(66,56,112,.16)!important;color:var(--v57-text)!important}
.panel-header{padding-bottom:15px!important;border-bottom:1px solid #ecebf2!important}
.panel-kicker{color:#8a7bc9!important;font-weight:800!important;letter-spacing:.1em!important}
.panel-header h2{color:#34333f!important}.panel-header p{color:#92909b!important}
.settings-layout{grid-template-columns:230px minmax(0,1fr)!important;gap:16px!important;padding:16px!important}
.settings-nav{padding:6px!important;background:#f5f4f9!important;border:1px solid #ecebf2!important;border-radius:17px!important}
.settings-nav-item{border-radius:11px!important;color:#7f7c89!important;text-align:left!important;padding:10px 12px!important}
.settings-nav-item.is-active{background:#eeeafd!important;color:var(--v57-purple)!important}
.settings-content{min-width:0!important}.settings-section{background:#fff!important;border:1px solid #e8e7ee!important;border-radius:18px!important;box-shadow:0 7px 18px rgba(66,56,112,.04)!important}
.settings-section-title{color:#363540!important;font-size:20px!important}.setting-row{border-bottom:1px solid #eeeeF3!important;padding:14px 0!important}.setting-row strong{color:#40404d!important}.setting-row span{color:#92909c!important}
.switch{width:44px!important;height:26px!important;background:#dedde6!important;border:0!important}.switch span{width:22px!important;height:22px!important}.switch.is-on{background:var(--v57-purple)!important}
.choice-card{background:#fff!important;border:1px solid #e7e5ee!important;border-radius:13px!important}.choice-card:has(input:checked){background:#f0edfe!important;border-color:#ddd4fb!important}

/* ---------- profile / QR / calls / dialogs ---------- */
.qr-card,.public-profile-card,.qr-profile-card{color:#3b3944!important}
.qr-profile-actions .btn,.public-profile-info .btn{border-radius:12px!important}
.call-overlay{background:#11101a!important}
.call-card{width:min(1120px,94vw)!important;height:min(720px,88dvh)!important;max-width:none!important;border-radius:24px!important;background:#171621!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 40px 110px rgba(0,0,0,.42)!important}
.call-card .call-name{color:#fff!important}.call-card .call-status{color:#a9a6b6!important}
.call-round{width:48px!important;height:48px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.10)!important;background:#242230!important;color:#fff!important}
.call-round.decline{background:#e76a73!important;border:0!important}.call-round.accept{background:#41ba8e!important;border:0!important}

/* убираем грубые текстовые emoji с кнопок звонка/подарков */
#btn-gift,#btn-call-mute,#btn-call-cam,#btn-call-share,#btn-call-output,#btn-call-group,#btn-call-diagnostics,#btn-call-decline,#btn-call-accept,#btn-call-hangup{font-size:0!important}

/* ---------- icon labels ---------- */
.hg-label-with-icon{display:inline-flex!important;align-items:center!important;gap:9px!important}
.hg-ui-icon{display:inline-grid!important;place-items:center!important;width:18px!important;height:18px!important;flex:0 0 18px!important;color:currentColor!important}
.hg-ui-icon svg{width:18px!important;height:18px!important}
.field>.hg-label-with-icon{margin-bottom:6px!important;color:#6e6c79!important;font-size:12px!important;font-weight:750!important}

/* ---------- custom controls ---------- */
input[type="file"]{font-size:0!important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d9d6e2;border:2px solid transparent;background-clip:padding-box;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#c7c3d4;border:2px solid transparent;background-clip:padding-box}
::selection{background:rgba(111,85,223,.18);color:#353240}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  :root{--v57-sidebar:270px}
  #screen-app>.app-shell{grid-template-columns:64px var(--v57-sidebar) minmax(0,1fr)!important}
  .landing-copy h1{font-size:clamp(46px,6vw,70px)!important}
  .landing-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:820px){
  #screen-landing{padding:14px!important}
  .landing-topbar{margin-bottom:12px!important}
  .landing-hero{min-height:unset!important;padding:30px 22px 24px!important;display:block!important}
  .landing-copy h1{font-size:48px!important}
  .landing-orbit{display:none!important}
  .landing-feature-grid{grid-template-columns:1fr!important}
  #screen-auth:before,#screen-auth:after{inset:0 0 72% 0!important}
  #screen-auth:before{padding:22px 24px!important;font-size:18px!important;align-items:flex-end!important}
  #screen-auth .card-auth{margin-left:0!important;width:100%!important;min-height:auto!important;padding:210px 22px 34px!important;border-radius:0!important}
  #screen-app{padding:0!important;place-items:stretch!important}
  #screen-app>.app-shell{width:100%!important;height:100dvh!important;min-height:0!important;border-radius:0!important;grid-template-columns:1fr!important;display:block!important}
  #screen-app .rail{display:none!important}
  #screen-app .sidebar{height:100dvh!important;border:0!important}
  #screen-app .conversation{position:fixed!important;inset:0!important;z-index:40!important;display:none!important;height:100dvh!important}
  #screen-app .conversation:has(.conversation-active:not([hidden])){display:block!important}
  #screen-app .messages{padding:14px 12px 115px!important}
  #screen-app .composer{left:10px!important;right:10px!important;bottom:72px!important}
  .settings-layout{grid-template-columns:1fr!important}
  .settings-nav{display:flex!important;gap:5px!important;overflow:auto!important}
  .settings-nav-item{white-space:nowrap!important}
  .panel-card{width:calc(100vw - 18px)!important;max-height:calc(100dvh - 18px)!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.hg57-language{position:relative}.hg57-lang-btn{height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--v57-stroke);background:#fff;color:#565460;display:flex;align-items:center;gap:10px;cursor:pointer}.hg57-lang-menu{position:absolute;right:0;top:46px;min-width:160px;padding:5px;border:1px solid #e6e4ed;border-radius:13px;background:#fff;box-shadow:0 18px 35px rgba(67,52,124,.13);display:none;z-index:30}.hg57-language.open .hg57-lang-menu{display:grid}.hg57-lang-menu button{border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:9px;color:#565460;cursor:pointer}.hg57-lang-menu button:hover{background:#f0edfc;color:var(--v57-purple)}