/* services.css — phone gate, Trading Experts/Contracts UI, CRM settings, polish layer.
Load order matters: aura.css -> theme-light.css -> services.css. */
/* ═══ ITEM #13 — trading experts & contracts ═════════════════════════════ */
/* CRM: assignment picker inside client profile */
.cp-picker{display:flex;flex-direction:column;min-width:240px;max-width:320px;position:relative}
.cp-pick-current{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--stroke);border-radius:10px;padding:8px 10px;margin-bottom:6px}
.cp-pick-list{position:absolute;top:100%;left:0;right:0;z-index:50;margin-top:4px;background:var(--bg2);border:1px solid var(--stroke2);border-radius:10px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.35);max-height:240px;overflow-y:auto}
.cp-pick-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:8px 12px;cursor:pointer;font:inherit}
.cp-pick-item:hover{background:var(--glass2)}
.cp-conn-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:100px;background:var(--up-dim);color:var(--up)}
/* ── client: shared service visuals ── */
.svc-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:34px;color:var(--text3);font-size:13px}
.svc-spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--stroke2);border-top-color:var(--green);animation:svcspin .7s linear infinite}
@keyframes svcspin{to{transform:rotate(360deg)}}
.svc-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:38px 24px;text-align:center;color:var(--text2)}
.svc-empty-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass2);color:var(--text3);margin-bottom:6px}
.svc-empty-title{font-family:var(--fd);font-weight:700;font-size:16px;color:var(--text)}
.svc-empty-sub{font-size:13px;line-height:1.5;max-width:320px}
.svc-hint{font-size:11.5px;color:var(--text3);margin-top:10px;text-align:center}
.svc-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;background:linear-gradient(135deg,var(--green),var(--blue));color:#0b0d12;flex:0 0 auto}
.svc-avatar-xl{width:84px;height:84px;font-size:28px;margin:0 auto 18px;box-shadow:0 0 0 6px var(--glass),0 18px 44px rgba(78,225,192,.25)}
.svc-asset-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.svc-asset-icon-xl{margin:0 auto 18px;transform:scale(1.6);transform-origin:center}
.svc-preview{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--glass);border:1px solid var(--stroke);border-radius:16px;padding:16px;cursor:pointer;color:var(--text);font:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.svc-preview:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.svc-preview-main{flex:1;min-width:0}
.svc-preview-name{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.svc-preview-sub{font-size:12px;color:var(--text3);margin-top:2px}
.svc-stars{color:var(--gold);font-size:13px;margin-top:5px;letter-spacing:1px}
.svc-stars-lg{font-size:17px;justify-content:center;display:flex;gap:8px;align-items:center}
.svc-star-dim{opacity:.22}
.svc-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 9px;border-radius:100px}
.svc-badge.on{background:var(--up-dim);color:var(--up)}
/* fullscreen (shared by expert & contract) */
.contract-full{position:fixed;inset:0;z-index:1500;background:var(--bg);display:flex;overflow-y:auto;
background-image:radial-gradient(circle at 18% 12%, rgba(123,92,255,.14), transparent 42%),
radial-gradient(circle at 84% 86%, rgba(78,225,192,.10), transparent 42%)}
.contract-full-inner{position:relative;width:min(780px,94vw);padding:56px 24px 64px;margin:auto;animation:svcin .35s cubic-bezier(.2,.9,.3,1)}
@keyframes svcin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.contract-full-close{position:fixed;top:18px;right:18px;z-index:2}
.svc-hero{text-align:center;margin-bottom:34px}
.svc-hero .eyebrow{justify-content:center;display:flex;margin-bottom:8px}
.svc-full-title{font-family:var(--fd);font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.5px;margin:0 0 14px;color:var(--text)}
.svc-title-sym{font-size:.42em;color:var(--text3);vertical-align:middle;font-weight:500}
.svc-amount{font-size:clamp(26px,4vw,36px);font-weight:700;color:var(--green);margin-top:6px}
.svc-amount-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-top:4px}
.svc-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.svc-detail{display:flex;flex-direction:column;gap:7px;background:var(--glass);border:1px solid var(--stroke);border-radius:16px;padding:18px;transition:border-color .2s}
.svc-detail:hover{border-color:var(--stroke2)}
.svc-detail>span{color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.svc-detail>strong{font-size:15px;color:var(--text);line-height:1.45}
.svc-detail-wide{grid-column:1/-1}
/* connect CTA */
.svc-cta{margin-top:32px;text-align:center}
.svc-cta-btn{width:min(420px,100%);padding:16px 26px;font-size:15px;border-radius:16px}
.svc-cta-note{font-size:11.5px;color:var(--text3);margin-top:12px}
.svc-connected-line{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:700;font-size:16px;color:var(--up);background:var(--up-dim);border:1px solid rgba(78,225,192,.3);border-radius:14px;padding:13px 26px;margin-bottom:14px}
.svc-cta-secondary{display:block;margin:0 auto;font-size:12.5px;padding:9px 20px;opacity:.8}
.svc-cta-secondary:hover{opacity:1}
/* ═══ CRM settings section ═══ */
.as-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;margin-top:18px}
.as-profile-row{display:flex;align-items:center;gap:14px}
.as-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;background:linear-gradient(135deg,var(--blue),var(--green));color:#0b0d12;flex:0 0 auto}
.as-name{font-weight:700;font-size:15px;color:var(--text)}
.as-divider{height:1px;background:var(--stroke);margin:18px 0}
.as-kv{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--stroke);font-size:13px}
.as-kv:first-of-type{border-top:0}
.as-kv>span{color:var(--text3)}
/* ═══ POLISH LAYER — micro-details ══════════════════════════════════════ */
/* Unified focus rings: keyboard users get a clear, on-brand outline */
.order-input:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:2px solid rgba(78,225,192,.55);outline-offset:1px;border-color:var(--green)!important}
button:focus-visible,.btn:focus-visible,.hdr-btn:focus-visible,.nav-item:focus-visible{
outline:2px solid rgba(78,225,192,.55);outline-offset:2px}
/* Tactile press feedback everywhere */
.btn:active,.hdr-btn:active,.tbl-btn:active,.svc-preview:active,.mg-btn:active{transform:scale(.97)}
/* Brand text selection */
::selection{background:rgba(78,225,192,.28);color:inherit}
/* Modal entrance: subtle rise + fade every time it opens */
.modal-overlay{animation:ovlIn .18s ease}
.modal-overlay .modal-card{animation:cardIn .26s cubic-bezier(.2,.9,.3,1)}
@keyframes ovlIn{from{opacity:0}to{opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
/* Numbers align like an instrument panel */
.mono,.data-table td{font-variant-numeric:tabular-nums}
/* Theme switch shouldn't flash */
body{transition:background-color .25s ease,color .25s ease}
/* Disabled controls read as disabled */
button:disabled,.btn[disabled],.hdr-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
/* Inputs invite interaction on hover */
.order-input:hover:not(:focus){border-color:var(--stroke2)}
/* Respect users who turn animations off */
@media (prefers-reduced-motion: reduce){
.modal-overlay,.modal-overlay .modal-card,.contract-full-inner{animation:none}
}
/* ═══ PWA ═══ */
/* Installed app (standalone display-mode): the phone gate steps aside and the
full platform runs — that IS the "mobile version" the gate advertises. */
html.pwa-app .mobile-gate{display:none!important}
html.pwa-app #appShell,
html.pwa-app #authScreen,
html.pwa-app .menu-btn{display:revert!important}
html.pwa-app body{overflow:auto}
.pwa-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.5}
.pwa-steps li::marker{color:var(--green);font-weight:700}
.pwa-ico{display:inline-block;transform:translateY(1px);color:var(--blue)}
.pwa-note{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--glass);border:1px solid var(--stroke);font-size:12px;color:var(--text3);line-height:1.5}
/* Phone / installed-app: the decorative aurora & noise layers are wider than
the viewport by design (parallax glows); on a 390px phone they were the sole
source of page-wide horizontal scroll. Clip the body horizontally on small
screens — content layouts are already fluid (verified 0px overflow after). */
@media (max-width: 940px){
html, body { overflow-x: clip; }
}
/* ═══ Оформление платформы (CRM → Настройки) ═══════════════════════════════ */
/* Brand marks: the wordmark block is rebuilt from the brand record, so the logo
may be an ![]()
or the built-in orb — both have to sit on the same baseline. */
.brand-logo-img{ height:26px; width:auto; max-width:150px; object-fit:contain; display:block; }
.mg-logo .brand-logo-img{ height:24px; }
.auth-wordmark .brand-logo-img{ height:24px; }
.logo .brand-logo-img{ height:28px; max-width:170px; }
/* Long names must wrap at the space instead of running off the panel.
break-word (not anywhere) so "Aurora Capital" breaks between the words and a
single unbroken word is only chopped when it genuinely cannot fit. */
.brand-name{ min-width:0; overflow-wrap:break-word; line-height:1.12; }
.brand-name em{ font-style:normal; background:var(--grad);
-webkit-background-clip:text; background-clip:text; color:transparent; }
/* Wordmark containers are flex rows; without min-width:0 a flex item refuses to
shrink below its content and pushes the text out of the sidebar. */
[data-brand-mark]{ min-width:0; }
/* shrink-only by default so a centred wordmark stays centred; in the sidebar the
name takes the free space and keeps the close button pinned right */
[data-brand-mark] .brand-name{ flex:0 1 auto; }
.logo[data-brand-mark] .brand-name{ flex:1 1 auto; }
.logo[data-brand-mark]{ align-items:flex-start; }
.logo[data-brand-mark] .logo-orb,
.logo[data-brand-mark] .brand-logo-img{ margin-top:3px; flex:0 0 auto; }
.auth-wordmark[data-brand-mark]{ max-width:100%; }
/* A 20-character name at 24px would eat three lines of the sidebar, so the mark
steps down through a few sizes as the name grows. Set by brand.js from the
name length — CSS alone cannot measure it. */
[data-brand-mark].brand-len-m .brand-name{ font-size:.82em; letter-spacing:.5px; }
[data-brand-mark].brand-len-l .brand-name{ font-size:.68em; letter-spacing:.3px; }
[data-brand-mark].brand-len-xl .brand-name{ font-size:.56em; letter-spacing:0; }
.brand-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.brand-hint{ font-size:11.5px; color:var(--text3); margin-top:6px; line-height:1.45; }
.brand-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
/* Upload wells. Checkerboard reveals transparency, which is the thing owners
most often get wrong when exporting a logo. */
.brand-drop{
margin-top:8px; height:96px; border-radius:14px; cursor:pointer;
border:1px dashed var(--stroke2); display:grid; place-items:center; overflow:hidden;
background-color:var(--glass);
background-image:linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.04) 75%),
linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.04) 75%);
background-size:16px 16px; background-position:0 0,8px 8px;
transition:border-color .2s, background-color .2s;
}
.brand-drop:hover{ border-color:var(--cyan); }
.brand-drop.small{ height:64px; }
.brand-drop-img{ max-height:76px; max-width:88%; object-fit:contain; }
.brand-drop.small .brand-drop-img{ max-height:44px; }
.brand-drop-empty{ font-size:12px; color:var(--text3); font-family:var(--fm);
letter-spacing:1px; text-transform:uppercase; }
/* Miniature of the real product so the owner judges the mark in context
rather than as a floating file. */
.brand-preview{ border:1px solid var(--stroke); border-radius:16px; overflow:hidden; background:var(--bg2); }
.bp-shot{ display:flex; flex-direction:column; }
.bp-tab{ display:flex; align-items:center; gap:7px; padding:9px 12px;
background:rgba(255,255,255,.05); border-bottom:1px solid var(--stroke);
font-size:11.5px; color:var(--text2); }
.bp-tab-ico{ width:14px; height:14px; object-fit:contain; border-radius:3px; }
.bp-body{ display:flex; min-height:170px; }
.bp-side{ width:38%; padding:14px 12px; border-right:1px solid var(--stroke);
display:flex; flex-direction:column; gap:9px; background:rgba(255,255,255,.02); }
.bp-main{ flex:1; padding:20px 16px; display:flex; flex-direction:column; gap:11px; }
.bp-mark{ display:flex; align-items:flex-start; gap:8px; font-family:var(--fd);
font-weight:800; font-size:15px; letter-spacing:.4px; margin-bottom:5px;
min-width:0; max-width:100%; line-height:1.15; }
.bp-mark b{ min-width:0; overflow-wrap:break-word; font-weight:800; }
.bp-mark.big{ font-size:21px; justify-content:center; text-align:center;
flex-direction:column; align-items:center; gap:6px; margin-bottom:12px; }
/* preview mirrors the same length steps as the real mark */
.bp-mark.brand-len-m b{ font-size:.82em; }
.bp-mark.brand-len-l b{ font-size:.68em; }
.bp-mark.brand-len-xl b{ font-size:.56em; }
#bpTabName{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.bp-mark img{ height:20px; max-width:110px; object-fit:contain; }
.bp-mark.big img{ height:30px; max-width:160px; }
.bp-mark .logo-orb{ width:10px; height:10px; }
.bp-mark.big .logo-orb{ width:13px; height:13px; }
.bp-line{ height:8px; border-radius:4px; background:var(--glass2); display:block; }
.bp-line.short{ width:55%; } .bp-line.w60{ width:60%; } .bp-line.w40{ width:40%; }
@media(max-width:940px){
.brand-grid{ grid-template-columns:1fr; gap:22px; }
.brand-row .hdr-btn{ flex:1 1 100%; justify-content:center; }
}
/* An open assignment picker must float above the rows that follow it. The row is
lifted (not just the list) because the list is positioned inside it. */
.cp-action-row.picker-open{ z-index:80; }
.cp-pick-list{ z-index:81; }
/* ═══ #13 — тикер перекрывал логотип ══════════════════════════════════════
.ticker is sticky at top:0 with z-index 80; the sidebar is sticky at top:0
too but paints below it, so as soon as the page scrolled the running asset
line covered the logo. Park the sidebar under the ticker instead. */
@media(min-width:941px){
.sidebar{ top:36px; height:calc(100vh - 36px); }
}
/* ═══ #3 — экран входа ════════════════════════════════════════════════════
.auth-main was capped at 520px inside a stretch-aligned column flex parent,
which pinned the whole form to one edge instead of centring it. On wide
screens the empty half now carries a brand panel — the layout was clearly
designed as a split and the right side was simply never built. */
.login-bg{ flex-direction:row !important; align-items:stretch; }
.auth-main{
flex:1 1 520px; max-width:560px; margin-inline:auto;
align-self:stretch; min-width:0;
}
.auth-aside{
display:none; flex:1 1 0; min-width:0; position:relative; z-index:2;
padding:48px 52px; flex-direction:column; justify-content:center; gap:26px;
border-left:1px solid var(--stroke);
background:linear-gradient(160deg,rgba(123,92,255,.10),rgba(78,225,192,.05) 60%,transparent);
}
.auth-aside-title{
font-family:var(--fd); font-weight:800; font-size:clamp(26px,2.4vw,38px);
line-height:1.12; letter-spacing:-.6px; max-width:15ch;
}
.auth-aside-title em{ font-style:normal; background:var(--grad);
-webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-aside-sub{ font-size:14px; color:var(--text2); max-width:44ch; line-height:1.6; }
.auth-feats{ display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.auth-feat{ display:flex; align-items:flex-start; gap:12px; font-size:13.5px; color:var(--text2); }
.auth-feat svg{ width:18px; height:18px; flex:0 0 18px; margin-top:1px; color:var(--cyan); }
.auth-feat b{ display:block; color:var(--text); font-size:13.5px; margin-bottom:2px; }
.auth-stats{ display:flex; gap:30px; margin-top:8px; flex-wrap:wrap; }
.auth-stat b{ display:block; font-family:var(--fd); font-weight:800; font-size:24px;
background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-stat span{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
color:var(--text3); font-family:var(--fm); }
@media(min-width:1080px){
.auth-aside{ display:flex; }
.auth-main{ margin-inline:0 0; }
}
@media(max-width:1079px){
/* single column: keep the form dead centre */
.auth-main{ margin-inline:auto; }
}
/* ═══ #8 — тикет подтверждения ордера ═════════════════════════════════════ */
.oc-card{ width:min(440px,calc(100vw - 32px)); }
.oc-head{ display:flex; align-items:center; gap:12px; padding-bottom:14px;
border-bottom:1px solid var(--stroke); }
.oc-coin{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
font-family:var(--fd); font-weight:800; font-size:15px; color:#06060c;
background:var(--grad); flex:0 0 38px; }
.oc-asset{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.oc-asset b{ font-family:var(--fd); font-size:15px; }
.oc-asset span{ font-size:11.5px; color:var(--text3); }
.oc-side{ margin-left:auto; font-family:var(--fm); font-size:11px; font-weight:700;
letter-spacing:1.4px; padding:6px 12px; border-radius:100px; }
.oc-side.long{ background:var(--up-dim); color:var(--up); }
.oc-side.short{ background:var(--down-dim); color:var(--down); }
.oc-price{ display:flex; justify-content:space-between; align-items:baseline;
padding:16px 0 14px; border-bottom:1px solid var(--stroke); }
.oc-price span{ font-size:12px; color:var(--text3); letter-spacing:.4px; }
.oc-price b{ font-size:24px; font-weight:700; letter-spacing:-.4px; }
.oc-rows{ display:flex; flex-direction:column; padding:6px 0; }
.oc-row{ display:flex; justify-content:space-between; align-items:center;
padding:9px 0; font-size:13px; color:var(--text2); }
.oc-row + .oc-row{ border-top:1px solid rgba(255,255,255,.04); }
.oc-row b{ color:var(--text); font-size:13.5px; }
.oc-row b.up{ color:var(--up); } .oc-row b.down{ color:var(--down); }
.oc-note{ font-size:11.5px; line-height:1.5; color:var(--text3);
background:var(--glass); border:1px solid var(--stroke); border-radius:12px;
padding:11px 13px; margin-top:12px; }
#orderConfirmModal .modal-footer{ display:flex; gap:10px; }
#orderConfirmModal .modal-footer .btn{ flex:1; padding:13px; font-size:14px; border-radius:14px; }
/* ═══ #7 — переключатель языка на входе ═══════════════════════════════════ */
.auth-lang{
display:inline-flex; gap:2px; padding:3px;
border:1px solid var(--stroke); border-radius:100px;
background:var(--glass); align-items:center;
}
.auth-lang-btn{
appearance:none; border:0; background:none; cursor:pointer;
font-family:var(--fm); font-size:12px; font-weight:700; letter-spacing:.8px;
color:var(--text3); padding:7px 15px; border-radius:100px;
min-height:34px; transition:background .18s, color .18s;
}
.auth-lang-btn:hover{ color:var(--text2); }
.auth-lang-btn.active{ background:var(--glass2); color:var(--text); }
.auth-lang-btn:active{ transform:scale(.96); }
@media(max-width:940px){
.auth-topbar{ padding:16px 18px; }
.auth-lang-btn{ min-height:40px; padding:9px 17px; font-size:12.5px; }
}
/* ═══ #5 — индикатор живого обновления CRM ════════════════════════════════ */
.crm-live{
display:flex; align-items:center; gap:8px; margin-bottom:14px;
font-size:11.5px; color:var(--text3); font-family:var(--fm); letter-spacing:.3px;
}
.crm-live-dot{
width:7px; height:7px; border-radius:50%; background:var(--up);
box-shadow:0 0 0 0 rgba(78,225,192,.55); animation:crmPulse 2.4s ease-out infinite;
}
.crm-live #crmLiveStamp{ margin-left:auto; color:var(--text2); }
@keyframes crmPulse{
0%{ box-shadow:0 0 0 0 rgba(78,225,192,.5) }
70%{ box-shadow:0 0 0 7px rgba(78,225,192,0) }
100%{ box-shadow:0 0 0 0 rgba(78,225,192,0) }
}
@media(max-width:940px){ .crm-live{ font-size:10.5px; } }
/* ═══ Модалка «Открыть сделку для клиента» ════════════════════════════════
setApDir() toggles .active on the direction buttons, but nothing styled that
class — the state changed and the UI looked frozen. */
#apLongBtn, #apShortBtn{
justify-content:center; font-weight:700; letter-spacing:.4px;
border:1px solid var(--stroke2); background:var(--glass); color:var(--text2);
transition:background .16s, color .16s, border-color .16s;
}
#apLongBtn.active{
background:linear-gradient(135deg,#00b574,#00936b); border-color:transparent; color:#04231a;
}
#apShortBtn.active{
background:linear-gradient(135deg,#f0334d,#d11f38); border-color:transparent; color:#fff;
}
#apLongBtn:not(.active):hover{ border-color:var(--up); color:var(--up); }
#apShortBtn:not(.active):hover{ border-color:var(--down); color:var(--down); }
/* The instrument list is absolutely positioned inside .modal-body, which
scrolls — keep it in flow so it can never be clipped away. */
.ap-market-list{ position:relative; z-index:5; border-color:var(--stroke2) !important; }
.ap-market-item:hover, .ap-market-item.selected{ background:var(--glass2) !important; }
/* ═══ Предпросмотр иконки приложения ══════════════════════════════════════ */
.bp-icons{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.bp-ic{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.bp-ic > span{ font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
color:var(--text3); font-family:var(--fm); }
.bp-ic-shape{ width:60px; height:60px; overflow:hidden; background:#07070D;
border:1px solid var(--stroke); display:grid; place-items:center; }
/* iOS squircle vs Android circle — the two crops that actually ship */
.bp-ic-shape.ios{ border-radius:14px; }
.bp-ic-shape.android{ border-radius:50%; }
.bp-ic-shape img{ width:100%; height:100%; object-fit:cover; display:block; }
.bp-ic-label{ height:60px; display:grid; place-items:center; padding:0 10px;
border:1px dashed var(--stroke2); border-radius:12px; max-width:110px; }
.bp-ic-label span{ font-size:11px; color:var(--text2); text-align:center;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:90px; display:block; }
/* ═══ Форма верификации (KYC) ═════════════════════════════════════════════ */
.kyc-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
/* Native selects inherit the app's input surface; the ID-level rule in aura.css
used to paint them with the text colour, which made the options unreadable. */
select.select-input{ width:100%; }
select.select-input option{ background:#14131f; color:var(--text); }
/* Document type — three cards instead of another dropdown: the choice changes
which photos are asked for below, so it deserves to be visible at a glance. */
.kyc-doctypes{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.kyc-doctype{
display:flex; flex-direction:column; align-items:center; gap:7px;
padding:14px 8px; border-radius:14px; cursor:pointer;
background:var(--glass); border:1px solid var(--stroke);
color:var(--text3); font-size:11.5px; font-weight:600; text-align:center;
transition:border-color .16s, color .16s, background .16s;
}
.kyc-doctype svg{ width:22px; height:22px; }
.kyc-doctype:hover{ color:var(--text2); border-color:var(--stroke2); }
.kyc-doctype.active{
color:var(--text); border-color:var(--cyan);
background:linear-gradient(180deg,rgba(78,225,192,.12),rgba(78,225,192,.03));
}
/* Upload slots. The bare was the browser's own widget —
grey box, system font, "Файл не выбран" — dropped into a dark trading UI. */
.kyc-slots{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.kyc-slot{
display:flex; align-items:center; gap:12px; padding:10px 12px;
border:1px dashed var(--stroke2); border-radius:14px; background:var(--glass);
transition:border-color .16s, background .16s;
}
.kyc-slot.filled{ border-style:solid; border-color:var(--up); background:var(--up-dim); }
.kyc-slot-preview{
width:52px; height:38px; flex:0 0 52px; border-radius:9px; overflow:hidden;
background:rgba(255,255,255,.05); display:grid; place-items:center; color:var(--text3);
}
.kyc-slot-preview svg{ width:20px; height:20px; }
.kyc-slot-preview img{ width:100%; height:100%; object-fit:cover; }
.kyc-slot-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.kyc-slot-text b{ font-size:13px; font-weight:600; color:var(--text); }
.kyc-slot-text span{ font-size:11px; color:var(--text3); }
.kyc-opt{ color:var(--text3); font-weight:400; font-size:11px; }
.kyc-slot-btn{
flex:0 0 auto; padding:8px 14px; border-radius:10px; cursor:pointer;
background:var(--glass2); border:1px solid var(--stroke2); color:var(--text2);
font-size:12px; font-weight:600; transition:.16s;
}
.kyc-slot-btn:hover{ color:var(--text); border-color:var(--cyan); }
.kyc-slot-btn:active{ transform:scale(.96); }
.kyc-note{
margin-top:14px; padding:11px 13px; border-radius:12px;
background:var(--glass); border:1px solid var(--stroke);
font-size:11.5px; line-height:1.5; color:var(--text3);
}
@media(max-width:520px){
.kyc-row{ grid-template-columns:1fr; }
.kyc-doctypes{ grid-template-columns:1fr; }
.kyc-doctype{ flex-direction:row; justify-content:flex-start; gap:11px; padding:12px 14px; }
}
/* Подсказка с рыночной ценой под полем закрытия в редакторе позиции */
.pe-hint{ margin-top:5px; font-size:11px; color:var(--text3); }
.pe-hint .mono{ color:var(--text2); }
/* ═══ Бегущая строка: убрать дёрганье ═════════════════════════════════════
The strip is one long flex row duplicated for a seamless loop. Any change in
an item's width shifts everything after it — and every price update changed
the width, because digits are not all the same size and the percentage span
grew from "·" to "+1.23%". Fixed columns plus tabular figures keep the
geometry constant, so only the digits change, never the layout. */
.ticker-track{ font-variant-numeric:tabular-nums; }
/* Respect the OS "reduce motion" setting — a permanent marquee is a common
trigger for motion sensitivity. */
@media (prefers-reduced-motion: reduce){
.ticker-track{ animation:none !important; transform:none !important; }
.ticker{ overflow-x:auto; }
}
/* ═══ #7 — кнопки быстрых сумм ════════════════════════════════════════════
background: rgba(255,255,255,.7) painted them near-white on a dark sheet,
with grey text on top — they read as disabled. */
.dep-presets button{
background:var(--glass) !important;
border:1px solid var(--stroke2) !important;
color:var(--text2) !important;
}
.dep-presets button:hover{
background:var(--glass2) !important;
border-color:var(--cyan) !important;
color:var(--text) !important;
}
.dep-presets button:active{ transform:scale(.96); }
.dep-presets button.active{
border-color:var(--cyan) !important; color:var(--text) !important;
background:linear-gradient(180deg,rgba(78,225,192,.16),rgba(78,225,192,.04)) !important;
}
.pf-note{ margin-top:14px; padding:11px 13px; border-radius:12px;
background:var(--glass); border:1px solid var(--stroke);
font-size:11.5px; line-height:1.5; color:var(--text3); }
/* ═══ Карточка коллекции ══════════════════════════════════════════════════ */
.coll-desc{ font-size:13.5px; line-height:1.6; color:var(--text2); margin:0 0 14px; }
.coll-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.coll-stats > div{ background:var(--glass); border:1px solid var(--stroke);
border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.coll-stats span{ font-size:10px; letter-spacing:1px; text-transform:uppercase;
color:var(--text3); font-family:var(--fm); }
.coll-stats b{ font-size:15px; font-weight:700; }
.coll-note{ margin-top:14px; padding:11px 13px; border-radius:12px;
background:var(--glass); border:1px solid var(--stroke);
font-size:11.5px; line-height:1.5; color:var(--text3); }
@media(max-width:560px){ .coll-stats{ grid-template-columns:1fr; } }
/* ═══ База знаний ═════════════════════════════════════════════════════════ */
.kb-card{ max-width:640px; width:min(640px,calc(100vw - 32px)); }
#kbModal .modal-body{ max-height:min(72vh,620px); }
#kbSearch{ width:100%; }
.kb-cats{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 14px; }
.kb-cat{
padding:6px 13px; border-radius:100px; cursor:pointer; font-size:12px; font-weight:600;
background:var(--glass); border:1px solid var(--stroke); color:var(--text3);
transition:color .15s, border-color .15s, background .15s;
}
.kb-cat:hover{ color:var(--text2); border-color:var(--stroke2); }
.kb-cat.active{ color:var(--text); border-color:var(--cyan);
background:linear-gradient(180deg,rgba(78,225,192,.14),rgba(78,225,192,.03)); }
.kb-list{ display:flex; flex-direction:column; gap:8px; }
.kb-item{
display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer;
padding:13px 15px; border-radius:14px;
background:var(--glass); border:1px solid var(--stroke);
transition:border-color .15s, background .15s;
}
.kb-item:hover{ border-color:var(--cyan); background:var(--glass2); }
.kb-item-cat{ font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase;
color:var(--cyan); font-family:var(--fm); }
.kb-item b{ font-size:14px; font-weight:600; color:var(--text); line-height:1.35; }
.kb-item-sn{ font-size:12px; color:var(--text3); line-height:1.45; }
.kb-empty{ text-align:center; color:var(--text3); font-size:13px; padding:26px 0; }
.kb-back{
display:inline-flex; align-items:center; gap:6px; cursor:pointer;
background:none; border:0; color:var(--text3); font-size:12.5px;
padding:0 0 12px; transition:color .15s;
}
.kb-back:hover{ color:var(--text); }
.kb-art-title{ font-family:var(--fd); font-size:20px; font-weight:700;
line-height:1.25; margin:0 0 14px; letter-spacing:-.3px; }
.kb-art-body p{ font-size:13.5px; line-height:1.7; color:var(--text2); margin:0 0 13px; }
.kb-art-body p:last-child{ margin-bottom:0; }
@media(max-width:560px){
.kb-art-title{ font-size:18px; }
.kb-item b{ font-size:13.5px; }
}
/* Настоящая разметка тикера — .ticker-chip, не .tk. Те же фиксированные
колонки: без них каждое обновление цены меняло ширину и толкало ленту. */
.ticker-chip{ margin-right:30px; }
.ticker-chip .ticker-sym{ min-width:46px; display:inline-block; }
.ticker-chip .ticker-price{ min-width:84px; text-align:right; display:inline-block;
transition:color .45s ease; }
.ticker-chip .ticker-chg{ min-width:58px; text-align:right; display:inline-block; }
.ticker-chip .ticker-price.tk-up{ color:var(--up); }
.ticker-chip .ticker-price.tk-down{ color:var(--down); }
/* ═══ CRM → адреса для пополнения ═════════════════════════════════════════ */
.add-wallet-form .form-row-2{ margin-bottom:0; }
.add-wallet-form .field-lbl{ display:block; margin-bottom:5px; }
.add-wallet-form select.order-input,
.add-wallet-form input.order-input{ width:100%; min-width:0; }
/* The button row is a flex child of a column parent, so it would stretch to the
full width and drag the buttons with it. */
.add-wallet-form .awf-actions{
display:flex; gap:8px; margin-top:14px; justify-content:flex-end; flex-wrap:wrap;
}
.add-wallet-form .awf-actions .hdr-btn{ flex:0 0 auto; }
@media(max-width:560px){
.add-wallet-form .form-row-2{ grid-template-columns:1fr; }
.add-wallet-form .awf-actions .hdr-btn{ flex:1 1 auto; }
}
/* ═══ CRM: ленты котировок нет ════════════════════════════════════════════
The ticker is market data; the admin console never shows a market screen,
so the strip is pure clutter there. Hide it and reclaim the row it held. */
body.is-admin .ticker{ display:none !important; }
body.is-admin .app{ grid-template-rows:1fr !important; }
body.is-admin .sidebar{ top:0 !important; height:100vh !important; }
/* ═══ CRM → Поддержка: единый тёмный стиль ════════════════════════════════
The panel was styled for a light theme that no longer exists: bg1 surfaces,
shadows in rgba(20,30,50,…), and an active filter that painted green text on
a green fill. On the dark console it looked like a foreign widget. This
brings it in line with every other CRM surface. */
.support-layout{ gap:16px !important; padding:0 24px 22px !important; }
.support-sidebar{
background:var(--glass) !important;
border:1px solid var(--stroke) !important;
box-shadow:none !important;
border-radius:16px;
width:300px; flex:0 0 300px;
display:flex; flex-direction:column;
}
.support-sidebar-hdr{
padding:15px 18px !important; font-weight:600; font-size:14px;
border-bottom:1px solid var(--stroke) !important;
}
.supp-filter-row{ padding:10px 12px !important; gap:6px !important; }
.supp-filter{
padding:6px 13px; border-radius:100px; cursor:pointer; font-size:12px; font-weight:600;
background:var(--glass2); border:1px solid var(--stroke); color:var(--text3);
transition:color .15s, border-color .15s, background .15s;
}
.supp-filter:hover{ color:var(--text2) !important; border-color:var(--stroke2) !important;
background:var(--glass2) !important; }
.supp-filter.active{
color:var(--text) !important; border-color:var(--cyan) !important;
background:linear-gradient(180deg,rgba(78,225,192,.14),rgba(78,225,192,.03)) !important;
}
.ticket-item{ padding:13px 16px !important; border-bottom:1px solid var(--stroke) !important; }
.ticket-item:hover{ background:var(--glass2) !important; }
.ticket-item.active{
background:linear-gradient(90deg,rgba(78,225,192,.10),transparent) !important;
border-left:2px solid var(--cyan) !important;
}
.support-main{
background:var(--glass) !important;
border:1px solid var(--stroke); border-radius:16px;
display:flex; flex-direction:column; overflow:hidden;
}
.support-empty{
flex:1; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:12px; color:var(--text3);
}
.support-empty-icon{ opacity:.35 !important; }
.chat-header{
display:flex; align-items:center; justify-content:space-between;
padding:15px 18px; border-bottom:1px solid var(--stroke); flex-shrink:0;
}
.chat-subject{ font-size:14px; font-weight:600; color:var(--text); }
.chat-status-line{ font-size:11.5px; color:var(--text3); margin-top:2px; }
.chat-messages{ flex:1; overflow-y:auto; padding:18px; display:flex;
flex-direction:column; gap:10px; }
.chat-input-row{
display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--stroke);
flex-shrink:0;
}
@media(max-width:940px){
.support-layout{ flex-direction:column; padding:0 14px 16px !important;
height:auto !important; }
.support-sidebar{ width:100%; flex:none; max-height:38vh; }
}
/* ═══ Окно приглашения к верификации ══════════════════════════════════════ */
.vp-icon{
width:64px; height:64px; margin:0 auto 16px; border-radius:20px;
display:grid; place-items:center; color:var(--cyan);
background:linear-gradient(180deg,rgba(78,225,192,.16),rgba(78,225,192,.03));
border:1px solid rgba(78,225,192,.3);
}
.vp-icon svg{ width:30px; height:30px; }
.vp-title{ font-family:var(--fd); font-size:20px; font-weight:700; margin:0 0 10px;
letter-spacing:-.3px; }
.vp-text{ font-size:13.5px; line-height:1.6; color:var(--text2); margin:0 auto;
max-width:340px; }
/* ═══ Кредит ══════════════════════════════════════════════════════════════ */
.acc-credit-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.cr-badge{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
padding:4px 10px; border-radius:100px; font-family:var(--fm); }
.cr-badge.ok{ color:var(--cyan); background:rgba(78,225,192,.12); border:1px solid rgba(78,225,192,.32); }
.cr-badge.over{ color:var(--down); background:rgba(255,92,122,.12); border:1px solid rgba(255,92,122,.34); }
.cr-lead{ font-size:13px; line-height:1.6; color:var(--text2); margin:0; }
.cr-active-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cr-active-grid > div{ background:var(--glass); border:1px solid var(--stroke); border-radius:12px;
padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.cr-active-grid span{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
color:var(--text3); font-family:var(--fm); }
.cr-active-grid b{ font-size:16px; font-weight:700; }
.cr-timer-wrap{ margin-top:14px; padding:13px 15px; border-radius:14px;
background:var(--glass); border:1px solid var(--stroke); }
.cr-timer-lbl{ display:flex; justify-content:space-between; align-items:center;
font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--text3);
font-family:var(--fm); margin-bottom:6px; }
.cr-timer{ font-family:var(--fm); font-size:26px; font-weight:700; letter-spacing:-.5px;
font-variant-numeric:tabular-nums; color:var(--text); }
.cr-timer.soon{ color:var(--warn,#ffb47a); }
.cr-timer.over{ color:var(--down); font-size:20px; }
.cr-progress{ height:4px; border-radius:100px; background:var(--stroke); margin-top:10px; overflow:hidden; }
.cr-progress-fill{ height:100%; width:0; border-radius:100px;
background:linear-gradient(90deg,var(--cyan),var(--violet,#7b5cff)); transition:width .6s ease; }
.cr-pos-note{ margin-top:12px; padding:10px 13px; border-radius:12px; font-size:12px;
color:var(--text2); background:var(--glass); border:1px solid var(--stroke); }
/* Окно заявки */
.cr-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.cr-facts > div{ background:var(--glass); border:1px solid var(--stroke); border-radius:12px;
padding:11px 12px; display:flex; flex-direction:column; gap:3px; }
.cr-facts span{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
color:var(--text3); font-family:var(--fm); }
.cr-facts b{ font-size:13.5px; font-weight:700; line-height:1.3; }
.cr-terms-box, .cr-recap{ display:flex; flex-direction:column; gap:9px; }
.cr-term{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.55; color:var(--text2); }
.cr-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); margin-top:7px; flex:0 0 6px; }
.cr-personal{ margin-top:14px; padding:12px 14px; border-radius:12px; font-size:12.5px; line-height:1.6;
color:var(--text2); white-space:pre-wrap;
background:linear-gradient(180deg,rgba(78,225,192,.10),rgba(78,225,192,.02));
border:1px solid rgba(78,225,192,.28); }
.cr-unavailable{ margin-top:14px; padding:12px 14px; border-radius:12px; font-size:12.5px;
line-height:1.6; color:var(--text3); background:var(--glass); border:1px solid var(--stroke); }
.cr-hint{ margin-top:6px; font-size:11.5px; color:var(--text3); line-height:1.5; }
.cr-switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
margin-top:18px; padding:13px 15px; border-radius:14px;
background:var(--glass); border:1px solid var(--stroke); }
.cr-switch-title{ font-size:13px; font-weight:600; color:var(--text); line-height:1.35; }
.cr-switch-sub{ font-size:11.5px; color:var(--text3); margin-top:3px; line-height:1.45; }
.cr-switch{ position:relative; width:46px; height:26px; flex:0 0 46px; cursor:pointer; }
.cr-switch input{ opacity:0; width:0; height:0; position:absolute; }
.cr-slider{ position:absolute; inset:0; border-radius:100px; background:var(--glass2);
border:1px solid var(--stroke2); transition:background .2s, border-color .2s; }
.cr-slider::before{ content:''; position:absolute; width:18px; height:18px; border-radius:50%;
left:3px; top:3px; background:var(--text3); transition:transform .2s, background .2s; }
.cr-switch input:checked + .cr-slider{ background:linear-gradient(180deg,rgba(78,225,192,.30),rgba(78,225,192,.12));
border-color:var(--cyan); }
.cr-switch input:checked + .cr-slider::before{ transform:translateX(20px); background:var(--cyan); }
#crContractWrap{ margin-top:14px; }
.cr-offer-sum{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cr-offer-sum > div{ background:var(--glass); border:1px solid var(--stroke); border-radius:12px;
padding:11px 13px; display:flex; flex-direction:column; gap:3px; }
.cr-offer-sum span{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
color:var(--text3); font-family:var(--fm); }
.cr-offer-sum b{ font-size:15px; font-weight:700; }
.cr-offer-contract{ margin-top:12px; padding:10px 13px; border-radius:12px; font-size:12.5px;
color:var(--text2); background:var(--glass); border:1px solid var(--stroke); }
.cr-recap{ margin-top:16px; }
.cr-agree{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; cursor:pointer;
font-size:12.5px; line-height:1.55; color:var(--text2); }
.cr-agree input{ margin-top:2px; width:16px; height:16px; accent-color:var(--cyan); flex:0 0 16px; cursor:pointer; }
.cr-2fa-icon{ width:60px; height:60px; margin:6px auto 16px; border-radius:18px; display:grid;
place-items:center; color:var(--cyan);
background:linear-gradient(180deg,rgba(78,225,192,.16),rgba(78,225,192,.03));
border:1px solid rgba(78,225,192,.3); }
.cr-2fa-icon.warn{ color:var(--warn,#ffb47a);
background:linear-gradient(180deg,rgba(255,180,122,.16),rgba(255,180,122,.03));
border-color:rgba(255,180,122,.32); }
.cr-2fa-icon svg{ width:28px; height:28px; }
.cr-2fa-text{ font-size:13px; line-height:1.6; color:var(--text2); text-align:center;
margin:0 auto 16px; max-width:340px; }
.cr-code{ text-align:center; font-family:var(--fm); font-size:24px; letter-spacing:8px;
font-weight:700; padding:14px 12px; }
.cr-repay-presets{ display:flex; gap:8px; margin-top:10px; }
.cr-repay-presets .btn{ flex:1; padding:8px 12px; font-size:12px; }
@media(max-width:560px){
.cr-active-grid, .cr-facts{ grid-template-columns:1fr; }
.cr-offer-sum{ grid-template-columns:1fr; }
.cr-timer{ font-size:22px; }
.cr-switch-row{ flex-direction:row; }
}
/* Кредит в карточке клиента (CRM) */
.cp-loan{ background:var(--glass); border:1px solid var(--stroke); border-radius:14px;
padding:14px 16px; margin-bottom:10px; }
.cp-loan-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cp-loan-amt{ font-size:17px; font-weight:700; }
.cp-loan-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }
.cp-empty{ color:var(--text3); font-size:12.5px; padding:12px 0; }
/* ═══ График: масштаб и прокрутка ═════════════════════════════════════════
The canvas used to carry its own height and the JS wrote that height back on
every redraw, so the chart stayed at whatever it measured on the first paint —
usually while the terminal screen was still hidden, i.e. far too small. Now
the box is a flex column, the canvas fills what is left, and the JS only
resizes its backing store. The header keeps its own stacking context so the
canvas can never end up on top of the timeframe buttons. */
.chart-box{ display:flex; flex-direction:column; min-height:520px; }
.chart-head{ position:relative; z-index:2; flex:0 0 auto; }
.chart-wrap{ position:relative; flex:1 1 auto; min-height:280px; z-index:1; }
.chart-wrap #candleChart{
position:absolute; inset:0; width:100%; height:100%; display:block;
}
@media(max-width:900px){
.chart-box{ min-height:400px; }
.chart-wrap{ min-height:240px; }
}
.chart-tools{
position:absolute; top:10px; right:12px; display:flex; gap:6px; z-index:2;
opacity:0; transition:opacity .18s;
}
.chart-wrap:hover .chart-tools, .chart-tools:focus-within{ opacity:1; }
.chart-tools button{
width:28px; height:28px; border-radius:9px; cursor:pointer;
display:grid; place-items:center; font-size:15px; font-weight:600; line-height:1;
color:var(--text2); background:rgba(12,10,22,.82); border:1px solid var(--stroke2);
backdrop-filter:blur(6px); transition:color .15s, border-color .15s, background .15s;
}
.chart-tools button:hover{ color:var(--text); border-color:var(--cyan); background:rgba(12,10,22,.95); }
.chart-tools button:active{ transform:scale(.94); }
.chart-tools svg{ width:14px; height:14px; }
/* На сенсорных экранах наведения нет — кнопки видны постоянно. */
@media (hover:none){ .chart-tools{ opacity:1; } }
/* ═══ Экран входа: центровка на широких экранах ═══════════════════════════
The two columns used to fill the whole viewport: the form was pinned to a
560px column on the far left, and the aside stretched across everything left
over. Since the aside's own text is capped at ~44ch, a 1920px screen left a
third of the page empty on the right and pushed the whole composition into
the left corner. Cap the pair and centre it instead. */
@media(min-width:1080px){
#authScreen.login-bg{ align-items:center; }
.auth-shell{
display:flex; align-items:stretch; justify-content:center;
width:100%; max-width:1180px; margin-inline:auto;
min-height:min(760px,100vh);
}
.auth-main{
flex:0 0 46%; max-width:none; margin-inline:0;
padding:38px 48px;
}
.auth-aside{
flex:1 1 auto; padding:48px 52px;
justify-content:center;
}
/* Keep the aside's own copy centred in its column rather than hugging the
left edge of a very wide panel. */
.auth-aside > *{ width:100%; max-width:460px; }
.auth-aside-title{ max-width:100%; }
.auth-aside-sub{ max-width:100%; }
}
@media(min-width:1600px){
.auth-shell{ max-width:1280px; }
}
/* Логотип на входе — заметнее */
.auth-wordmark{ font-size:28px; letter-spacing:1.2px; gap:12px; }
.auth-wordmark .logo-orb{ width:15px; height:15px; }
.auth-wordmark .brand-logo-img{ height:38px; }
@media(max-width:560px){
.auth-wordmark{ font-size:23px; }
.auth-wordmark .brand-logo-img{ height:30px; }
}
/* ═══ Рынки: действия в строке ════════════════════════════════════════════
The CFD / Buy buttons used to carry their sizing inline, which left no way
for a stylesheet to re-stack them on a phone. Same look as before, now in
CSS so the mobile layout below can take over. */
.mkt-act{ text-align:right; white-space:nowrap; }
.mkt-cta{ padding:8px 16px; font-size:12px; }
.mkt-cta + .mkt-cta{ margin-left:8px; }