/* HappyGram V59 — точная визуальная стилизация по предоставленным референсам.
   Фокус: чистый lavender UI, белые поверхности, аккуратная типографика,
   тонкие разделители, мягкие тени и одинаковая система иконок. */
:root{
  --r59-bg:#f4f5fa;
  --r59-surface:#ffffff;
  --r59-soft:#f8f8fc;
  --r59-soft-2:#f1effd;
  --r59-line:#e7e8ef;
  --r59-text:#252536;
  --r59-muted:#8a8ca2;
  --r59-muted-2:#a4a6b7;
  --r59-purple:#6757e8;
  --r59-purple-2:#7868ef;
  --r59-green:#2eb990;
  --r59-red:#e95f69;
  --r59-shadow:0 10px 30px rgba(45,39,91,.055);
  --r59-shadow-lg:0 24px 80px rgba(45,39,91,.085);
  --r59-radius:18px;
  --r59-sidebar:365px;
  --r59-rail:88px;
}
html,body{background:var(--r59-bg)!important;color:var(--r59-text)!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif!important}
body:before,.aurora,.grain{display:none!important}
button,input,textarea,select{font-family:inherit!important}

/* ===== Landing ===== */
#screen-landing{padding:24px!important;background:#f1f2f7!important}
#screen-landing .landing-topbar{width:min(1392px,100%)!important;margin:0 auto 16px!important}
#screen-landing .landing-brand{color:#252536!important;font-size:18px!important}
#screen-landing .landing-brand img{width:38px!important;height:38px!important;border-radius:11px!important;box-shadow:0 10px 24px rgba(103,87,232,.17)!important}
#screen-landing .landing-brand b{color:var(--r59-purple)!important}
#screen-landing .landing-lang{appearance:none!important;background:#fff!important;border:1px solid var(--r59-line)!important;color:#5b5c70!important;border-radius:12px!important;box-shadow:var(--r59-shadow)!important}
#screen-landing .landing-hero{width:min(1392px,100%)!important;min-height:620px!important;padding:0!important;border-radius:0!important;border:0!important;background:#fff!important;box-shadow:var(--r59-shadow-lg)!important;display:grid!important;grid-template-columns:42% 58%!important;overflow:hidden!important}
#screen-landing .landing-copy{padding:72px 64px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;max-width:none!important}
#screen-landing .landing-kicker{font-size:11px!important;color:#7868ef!important;letter-spacing:.12em!important}
#screen-landing .landing-copy h1{font-size:clamp(52px,5vw,82px)!important;line-height:1.03!important;letter-spacing:-.06em!important;color:#29293a!important;max-width:670px!important}
#screen-landing .landing-copy h1 span{color:var(--r59-purple)!important}
#screen-landing .landing-copy p{color:#7f8298!important;font-size:17px!important;max-width:620px!important;line-height:1.7!important}
#screen-landing .landing-main-btn{background:var(--r59-purple)!important;border-radius:13px!important;box-shadow:0 12px 24px rgba(103,87,232,.19)!important}
#screen-landing .landing-apk-btn{background:#fff!important;border:1px solid var(--r59-line)!important;color:#5c5e71!important;border-radius:13px!important}
#screen-landing .landing-orbit{min-height:620px!important;background:linear-gradient(145deg,#282351 0%,#4e43a5 55%,#725ce7 100%)!important;position:relative!important;overflow:hidden!important}
#screen-landing .landing-orbit:before,#screen-landing .landing-orbit:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(.2px)}
#screen-landing .landing-orbit:before{width:430px;height:430px;right:-120px;top:-90px}
#screen-landing .landing-orbit:after{width:360px;height:360px;left:-160px;bottom:-150px}
#screen-landing .landing-logo-glow{width:300px!important;height:300px!important;background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 26px 80px rgba(15,10,58,.20)!important;z-index:2}
#screen-landing .landing-logo-glow img{width:138px!important;height:138px!important;border-radius:32px!important}
#screen-landing .orbit-pill{color:#fff!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.17)!important;backdrop-filter:blur(16px)!important;box-shadow:none!important;border-radius:14px!important}
#screen-landing .landing-labs{width:min(1392px,100%)!important;margin:18px auto 0!important}
#screen-landing .landing-section-head h2{color:#29293a!important}
#screen-landing .landing-section-head p{color:#8b8da1!important}
#screen-landing .landing-feature-grid article{background:#fff!important;border:1px solid var(--r59-line)!important;box-shadow:var(--r59-shadow)!important;border-radius:18px!important}
#screen-landing .landing-feature-grid article b{background:var(--r59-soft-2)!important;color:var(--r59-purple)!important}
#screen-landing .landing-feature-grid article strong{color:#333447!important}
#screen-landing .landing-feature-grid article span{color:#8b8da1!important}

/* ===== Auth / verification / recovery style ===== */
#screen-auth{background:#f1f2f7!important}
#screen-auth:before{background:linear-gradient(155deg,#272246 0%,#5145ab 56%,#735de6 100%)!important;inset:0 64% 0 0!important;padding:54px 46px!important}
#screen-auth:after{inset:0 64% 0 0!important;background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.12),transparent 35%),radial-gradient(circle at 18% 82%,rgba(255,255,255,.08),transparent 40%)!important}
#screen-auth .card-auth{margin-left:64%!important;width:36vw!important;background:#fff!important;padding:80px 7vw 60px 6vw!important}
#screen-auth .brand-name{color:#2c2c3d!important;font-family:Inter,sans-serif!important;font-weight:800!important}
#screen-auth .tabs{background:#f7f7fb!important}
#screen-auth .tab.is-active{color:var(--r59-purple)!important;background:#fff!important}
#screen-auth .field input{height:54px!important;border:1px solid #e0e1e9!important;border-radius:13px!important;background:#fff!important;color:#2f3040!important}
#screen-auth .field input::placeholder{color:#b0b2c1!important}
#screen-auth #auth-submit{height:52px!important;background:var(--r59-purple)!important;border-radius:13px!important}
#screen-auth .cloud-password-step{background:#fbfaff!important;border:1px solid #eceafa!important;border-radius:18px!important}

/* ===== Main application: screenshot-faithful 3-column layout ===== */
#screen-app{padding:0!important;min-height:100dvh!important;background:var(--r59-bg)!important;display:grid!important;place-items:stretch!important}
#screen-app>.app-shell{
  width:100%!important;height:100dvh!important;min-height:0!important;border-radius:0!important;border:0!important;box-shadow:none!important;background:#fff!important;
  grid-template-columns:var(--r59-rail) var(--r59-sidebar) minmax(0,1fr)!important;display:grid!important;overflow:hidden!important;
}
#screen-app .rail{background:#fff!important;border-right:1px solid var(--r59-line)!important;padding:18px 12px!important;gap:8px!important}
#screen-app .rail-brand{width:40px!important;height:40px!important;border-radius:11px!important;margin:2px auto 17px!important}
#screen-app .rail-btn{width:44px!important;height:44px!important;border-radius:14px!important;color:#8d8fa3!important;background:transparent!important;display:flex!important;align-items:center!important;justify-content:center!important}
#screen-app .rail-btn.is-active{background:#eeeafd!important;color:var(--r59-purple)!important;box-shadow:none!important}
#screen-app .rail-btn:hover{background:#f4f2fb!important;color:var(--r59-purple)!important}
#screen-app .sidebar{background:#fff!important;border-right:1px solid var(--r59-line)!important}
#screen-app .sidebar-top{padding:22px 20px 11px!important;position:relative!important}
#screen-app .me{background:#fff!important;border:0!important;box-shadow:none!important;padding:6px 8px!important;border-radius:14px!important}
#screen-app .me:hover{background:#faf9fd!important}
#screen-app .me-nickname{font-weight:800!important;color:#2e2f40!important}
#screen-app .me-username{color:#989aad!important}
#screen-app .sidebar-top > #btn-qr,#screen-app .sidebar-top > #btn-logout{background:#f7f7fb!important;color:#7d7f92!important;border:1px solid #eeedf3!important;box-shadow:none!important}
#screen-app .sidebar-top > #btn-qr{position:absolute!important;top:22px!important;right:62px!important}
#screen-app .sidebar-top > #btn-logout{position:absolute!important;top:22px!important;right:16px!important}
#screen-app .search-new{padding:0 20px 12px!important}
#screen-app .search-new input{height:42px!important;border-radius:12px!important;background:#f7f7fb!important;border:1px solid transparent!important;color:#444658!important}
#screen-app .search-results{border:1px solid var(--r59-line)!important;box-shadow:0 18px 50px rgba(56,48,103,.12)!important}
#screen-app .story-strip{margin:0 18px 10px!important;padding:3px!important;border:0!important;background:transparent!important}
#screen-app .story-add-only{background:#f8f8fc!important;border:1px solid #ececf2!important;border-radius:14px!important}
#screen-app .chat-list{padding:3px 12px 18px!important}
#screen-app .chat-item{padding:10px 10px!important;margin:3px 0!important;border-radius:16px!important;border:0!important}
#screen-app .chat-item.is-active{background:#eeeafd!important;box-shadow:none!important}
#screen-app .chat-item:hover{background:#f8f8fb!important}
#screen-app .chat-item .chat-name{color:#313243!important;font-weight:650!important}
#screen-app .chat-item .chat-preview{color:#8c8ea1!important}
#screen-app .chat-item .chat-time{color:#a0a2b0!important}
#screen-app .conversation{background:#f6f7fb!important;min-width:0!important}
#screen-app .conversation-empty{max-width:500px!important;color:#85879a!important}
#screen-app .conversation-empty .brand-mark.big{width:88px!important;height:88px!important;border-radius:25px!important;background:#eeeafd!important;box-shadow:none!important}
#screen-app .conv-header{height:77px!important;min-height:77px!important;padding:0 24px!important;background:#fff!important;border-bottom:1px solid var(--r59-line)!important}
#screen-app .conv-header .avatar{box-shadow:none!important}
#screen-app .peer-nickname{color:#262738!important;font-weight:800!important}
#screen-app .peer-username,#screen-app .peer-status{color:#9b9daf!important}
#screen-app .peer-presence{color:var(--r59-green)!important}
#screen-app .conv-header-actions .icon-btn{background:#f8f8fc!important;border:0!important;color:#85879b!important;box-shadow:none!important;border-radius:13px!important}
#screen-app .conv-header-actions .icon-btn:hover{background:#eeeafd!important;color:var(--r59-purple)!important}
#screen-app .messages{background:#f6f7fb!important;padding:18px 42px 115px!important}
#screen-app .msg{border:0!important;border-radius:18px!important;box-shadow:0 7px 22px rgba(48,41,90,.055)!important}
#screen-app .msg.incoming{background:#fff!important;color:#3c3d4c!important}
#screen-app .msg.outgoing,#screen-app .msg.mine{background:var(--r59-purple)!important;color:#fff!important;border:0!important;box-shadow:0 7px 18px rgba(103,87,232,.15)!important}
#screen-app .composer{left:20px!important;right:20px!important;bottom:18px!important;min-height:58px!important;padding:6px!important;border-radius:18px!important;background:#fff!important;border:1px solid #e9e9f0!important;box-shadow:0 12px 28px rgba(44,39,84,.09)!important}
#screen-app .composer .icon-btn{width:44px!important;height:44px!important;border-radius:13px!important;background:#f7f7fb!important;color:#888a9c!important}
#screen-app .composer input{height:44px!important;color:#434555!important;background:transparent!important}
#screen-app .composer input::placeholder{color:#b0b2c1!important}
#screen-app .btn-send{width:44px!important;height:44px!important;border-radius:13px!important;background:var(--r59-purple)!important;box-shadow:none!important}

/* Strict avatars */
.hg-avatar,.chat-avatar,.profile-avatar,.msg-avatar,.avatar,.avatar.big{overflow:hidden!important;border-radius:50%!important;aspect-ratio:1/1!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;object-fit:cover!important;object-position:center!important;border-radius:50%!important;margin:0!important}
.online-dot{box-shadow:0 0 0 2px #fff!important}

/* ===== Settings: full screen like screenshots ===== */
#settings-overlay{position:fixed!important;inset:0!important;z-index:10000!important;background:#f1f2f7!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;padding:0!important}
#settings-overlay[hidden]{display:none!important}
#settings-overlay .settings-panel{width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;background:#f1f2f7!important;border:0!important;box-shadow:none!important;color:var(--r59-text)!important;padding:0!important}
#settings-overlay .panel-header{height:78px!important;min-height:78px!important;padding:18px 28px!important;background:#fff!important;border-bottom:1px solid var(--r59-line)!important}
#settings-overlay .panel-header h2{font-size:27px!important;margin:0!important;color:#262738!important}
#settings-overlay .panel-header p{color:#8c8ea1!important}
#settings-overlay .panel-close{background:#f7f7fb!important;color:#7e8094!important;border:0!important;border-radius:12px!important}
#settings-overlay .panel-kicker{color:var(--r59-purple)!important}
#settings-overlay .settings-layout{height:calc(100dvh - 78px)!important;display:grid!important;grid-template-columns:240px minmax(0,1fr)!important;gap:24px!important;padding:22px 28px!important}
#settings-overlay .settings-nav{background:#fff!important;border:1px solid var(--r59-line)!important;border-radius:18px!important;padding:8px!important;box-shadow:none!important}
#settings-overlay .settings-nav-item{padding:11px 12px!important;border-radius:12px!important;color:#777a8e!important;background:transparent!important}
#settings-overlay .settings-nav-item.is-active{background:#eeeafd!important;color:var(--r59-purple)!important}
#settings-overlay .settings-content{overflow:auto!important;padding:0 8px 30px 0!important}
#settings-overlay .settings-section{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
#settings-overlay .settings-section-title{font-size:30px!important;color:#292a3b!important;margin-bottom:6px!important}
#settings-overlay .setting-row{padding:15px 0!important;border-bottom:1px solid #ececf2!important}
#settings-overlay .setting-row strong{color:#3a3b4c!important}
#settings-overlay .setting-row span{color:#9294a7!important}
#settings-overlay .choice-card{background:#fff!important;border:1px solid var(--r59-line)!important;border-radius:14px!important;box-shadow:none!important}
#settings-overlay .choice-card:has(input:checked){background:#f0edff!important;border-color:#d7cffd!important}
#settings-overlay .settings-note{color:#8f91a3!important}
#settings-overlay .status-chip{background:#e9f8f3!important;color:#37a784!important;border-radius:999px!important}
#settings-overlay .btn{border-radius:12px!important}
#settings-overlay .feature-grid{gap:12px!important}
#settings-overlay .feature-grid .field input,#settings-overlay .feature-grid .field select,#settings-overlay .feature-textarea,#settings-overlay .translation-grid input,#settings-overlay .field input,#settings-overlay .field select{background:#fff!important;border:1px solid var(--r59-line)!important;color:#414253!important;border-radius:13px!important}
#settings-overlay .switch.is-on{background:var(--r59-purple)!important}
#settings-overlay .switch{background:#dcdee8!important}
#settings-overlay .cloud-password-manager{background:#fff!important;border:1px solid var(--r59-line)!important;border-radius:16px!important;padding:16px!important}
#settings-overlay .android-feature-grid button{background:#fff!important;border:1px solid var(--r59-line)!important;color:#4c4d5d!important;border-radius:13px!important}

/* ===== Call screens ===== */
#call-overlay{background:#10111d!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#call-overlay .call-card{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0!important;border:0!important;background:#10111d!important;box-shadow:none!important;color:#fff!important;position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:30px!important;overflow:hidden!important}
#call-overlay .call-card .call-name{color:#fff!important;font-size:38px!important;font-weight:800!important}
#call-overlay .call-card .call-status{color:#a8aabd!important;font-size:14px!important}
#call-overlay .call-card > .avatar.big{width:150px!important;height:150px!important;border:3px solid rgba(255,255,255,.22)!important;box-shadow:0 0 0 8px rgba(103,87,232,.13)!important}
#call-overlay .call-actions{position:absolute!important;left:50%!important;bottom:56px!important;transform:translateX(-50%)!important;display:flex!important;gap:18px!important;margin:0!important;z-index:5!important}
#call-overlay .call-round{width:58px!important;height:58px!important;border-radius:50%!important;background:#2b2d3b!important;color:#fff!important;border:0!important;display:grid!important;place-items:center!important}
#call-overlay .call-round.decline{background:var(--r59-red)!important}
#call-overlay .call-round.accept{background:#2db992!important}
#call-overlay .call-video{position:absolute!important;inset:30px!important;width:calc(100% - 60px)!important;height:calc(100% - 180px)!important;max-height:none!important;border-radius:24px!important;object-fit:cover!important;background:#161824!important}
#call-overlay .call-local-video{position:absolute!important;right:34px!important;top:34px!important;width:220px!important;height:138px!important;max-width:none!important;max-height:none!important;border-radius:18px!important;object-fit:cover!important;border:2px solid rgba(255,255,255,.16)!important;box-shadow:0 16px 40px rgba(0,0,0,.24)!important}

/* ===== Search / QR / generic panels ===== */
.panel-overlay,.qr-overlay{background:rgba(48,45,62,.24)!important;backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important}
.panel-card,.qr-card{background:#fff!important;color:#313244!important;border:1px solid #e7e7ee!important;border-radius:20px!important;box-shadow:0 25px 80px rgba(46,40,88,.16)!important}

/* ===== Icon labels ===== */
.hg-ui-icon{color:currentColor!important;width:18px!important;height:18px!important;display:inline-grid!important;place-items:center!important;flex:0 0 18px!important}
.hg-ui-icon svg{width:18px!important;height:18px!important}
.hg59-has-icon{display:inline-flex!important;align-items:center!important;gap:9px!important}
.settings-nav-item .hg-ui-icon{width:17px!important;height:17px!important;flex-basis:17px!important}
.settings-nav-item .hg-ui-icon svg{width:17px!important;height:17px!important}

/* No default browser controls */
select{appearance:none!important;-webkit-appearance:none!important;background-image:linear-gradient(45deg,transparent 50%,#8b8da1 50%),linear-gradient(135deg,#8b8da1 50%,transparent 50%)!important;background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important;padding-right:34px!important}
input[type=file]{font-size:0!important}
::-webkit-scrollbar{width:8px!important;height:8px!important}
::-webkit-scrollbar-thumb{background:#dcdde6!important;border-radius:999px!important;border:2px solid transparent!important;background-clip:padding-box!important}
::-webkit-scrollbar-track{background:transparent!important}

/* ===== Responsive ===== */
@media(max-width:1180px){
  :root{--r59-sidebar:310px}
  #screen-app>.app-shell{grid-template-columns:72px var(--r59-sidebar) minmax(0,1fr)!important}
}
@media(max-width:820px){
  #screen-app>.app-shell{display:block!important;width:100%!important;height:100dvh!important}
  #screen-app .rail{display:none!important}
  #screen-app .sidebar{width:100%!important;height:100dvh!important;border:0!important}
  #screen-app .conversation{position:fixed!important;inset:0!important;z-index:50!important;height:100dvh!important;display:none!important}
  #screen-app .conversation:has(.conversation-active:not([hidden])){display:block!important}
  #screen-app .messages{padding:14px 12px 114px!important}
  #screen-app .composer{left:10px!important;right:10px!important;bottom:12px!important}
  #screen-app .chat-list{padding-bottom:90px!important}
  #settings-overlay .settings-layout{display:block!important;height:calc(100dvh - 78px)!important;padding:14px!important}
  #settings-overlay .settings-nav{display:flex!important;gap:6px!important;overflow:auto!important;margin-bottom:14px!important}
  #settings-overlay .settings-nav-item{white-space:nowrap!important;flex:0 0 auto!important}
  #settings-overlay .settings-content{padding:0 0 26px!important}
  #call-overlay .call-card{padding:18px!important}
  #call-overlay .call-card .call-name{font-size:28px!important}
  #call-overlay .call-video{inset:12px!important;width:calc(100% - 24px)!important;height:calc(100% - 130px)!important;border-radius:18px!important}
  #call-overlay .call-local-video{width:112px!important;height:82px!important;right:22px!important;top:22px!important;border-radius:13px!important}
  #screen-auth:before{inset:0 0 68% 0!important}
  #screen-auth:after{inset:0 0 68% 0!important}
  #screen-auth .card-auth{margin:0!important;width:100%!important;padding:190px 22px 28px!important;min-height:100dvh!important}
}
@media(max-width:560px){
  #screen-landing{padding:12px!important}
  #screen-landing .landing-hero{grid-template-columns:1fr!important}
  #screen-landing .landing-copy{padding:38px 22px!important}
  #screen-landing .landing-orbit{min-height:360px!important}
  #screen-landing .landing-orbit .orbit-pill{display:none!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}