/* staging.css */
:root { --bg:#050914; --surface:#0a1124; --surface-2:#0e1830; --line:#1d2942; --text:#eff3ff; --muted:#99a8c8; --gold:#ffb11a; --gold-soft:#e59b0d; --blue:#2d6df6; --green:#3ddc84; --orange:#ff8d3c; --red:#ff616d; --radius:18px; font-family:Inter,Arial,sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 72% 8%,#112654 0,transparent 27rem),var(--bg); }
button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { border-right:1px solid var(--line); background:rgba(5,9,20,.88); padding:25px 16px 18px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:21px; }
.brand { display:flex; align-items:center; gap:10px; padding:2px 10px; letter-spacing:.14em; font-weight:800; font-size:17px; } .brand img { width:32px;height:32px;object-fit:contain;border-radius:8px; } .brand em { font-style:normal;font-size:8px;letter-spacing:.08em;color:var(--gold);border:1px solid rgba(255,177,26,.4);border-radius:99px;padding:4px 5px; }
.new-check,.primary-action { border:0; background:var(--gold); color:#071020; font-weight:800; border-radius:10px; min-height:44px; padding:10px 14px; transition:.2s transform,.2s background; } .new-check:hover,.primary-action:hover { background:#ffc44d; transform:translateY(-1px); }
.new-check { display:flex; gap:9px; align-items:center; justify-content:center; } .new-check span { font-size:22px;line-height:1; }
.primary-nav { display:grid; gap:4px; }.nav-item { width:100%; background:transparent; border:0; color:var(--muted); display:flex; gap:11px; align-items:center; text-align:left; padding:11px 12px; border-radius:9px; font-size:14px; }.nav-item span { width:18px; color:#b9c7e7; font-size:17px; }.nav-item:hover { color:var(--text);background:rgba(255,255,255,.035); }.nav-item.active { background:#0b1d49;color:var(--text); box-shadow:inset 0 0 0 1px #1d438e; }.nav-item.active span { color:var(--gold); }
.session-list { min-height:0; overflow:auto; }.nav-label,.context-label,.eyebrow,.kicker { color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:800; }.recent-checks { display:grid; gap:5px; }.recent-item { width:100%; border:0;background:transparent;color:var(--muted);border-radius:9px;padding:9px;text-align:left;display:flex;align-items:center;gap:8px; }.recent-item:hover{background:rgba(255,255,255,.035);color:var(--text)}.recent-item strong{display:block;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.recent-item small{font-size:10px}.risk-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}.risk-dot.critical{background:var(--red);box-shadow:0 0 12px rgba(255,97,109,.65)}.risk-dot.medium{background:var(--orange)}.risk-dot.safe{background:var(--green)}
.sidebar-bottom{margin-top:auto;display:grid;gap:4px}.account{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;color:var(--text);display:grid;grid-template-columns:31px minmax(0,1fr) 12px;gap:9px;align-items:center;text-align:left}.account:hover{border-color:#43537a}.account strong,.account small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account strong{font-size:11px}.account small{font-size:10px;color:var(--muted);margin-top:2px}.account>b{color:var(--muted);font-size:20px}.avatar{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#173064;color:#e9f1ff;font-size:13px;font-weight:800;border:1px solid #34579d}
.workspace{padding:29px clamp(21px,4vw,68px) 56px;min-width:0;max-width:1650px;width:100%;margin:auto}.workspace-header{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:31px}.workspace-header .kicker{margin:0 0 5px}.workspace-header h1{margin:0;font-size:26px;letter-spacing:0}.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.language-switcher,.setting-language-switcher{display:flex;border:1px solid var(--line);padding:3px;border-radius:99px;background:#080e1e}.language-switcher button,.setting-language-switcher button{border:0;background:transparent;color:var(--muted);font-weight:800;font-size:11px;padding:8px 9px;border-radius:99px}.language-switcher button.active,.setting-language-switcher button.active{background:var(--gold);color:#081020}.live-pill{font-size:11px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:9px 11px;color:#bcc8de;display:flex;gap:7px;align-items:center}.live-pill i{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green)}.profile-link{border:1px solid #31415f;background:transparent;border-radius:9px;color:var(--text);font-weight:700;padding:9px 13px}
.screen{display:none}.screen.active{display:block}.check-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.security-session,.context-card,.history-list,.pro-status-panel,.pro-value-panel,.api-card,.settings-card{border:1px solid var(--line);background:rgba(8,15,32,.8);border-radius:var(--radius)}.security-session{padding:clamp(21px,3vw,43px);min-height:648px}.scan-hero{max-width:760px;text-align:center;margin:0 auto 29px}.shield-logo{height:62px;display:grid;place-items:center;margin-bottom:15px}.shield-logo img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 7px 23px rgba(255,177,26,.2))}.eyebrow{margin:0 0 10px;color:var(--gold)}.scan-hero h2,.page-intro h2{font-size:clamp(27px,3.5vw,46px);line-height:1.09;max-width:730px;margin:0 auto 15px;letter-spacing:0}.scan-hero p,.page-intro>p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}.scan-composer{display:grid;grid-template-columns:1fr 52px;gap:9px;border:1px solid #263554;background:#0b1428;border-radius:16px;padding:8px;margin:0 auto;max-width:830px}.scan-composer input{min-width:0;background:transparent;border:0;outline:0;color:var(--text);padding:11px 12px}.scan-composer input::placeholder{color:#7e8dad}.submit-scan{border:0;border-radius:12px;background:var(--blue);font-size:27px;color:white;line-height:1;box-shadow:0 0 19px rgba(45,109,246,.35)}.examples{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:13px auto 0}.examples button,.secondary-action{border:1px solid #2b3957;background:#0c152a;color:#c6d2ec;border-radius:9px;padding:9px 11px;font-size:12px;font-weight:700}.examples button:hover,.secondary-action:hover{border-color:#5c77ae;color:#fff}.analysis-status{margin:34px auto 0;max-width:830px;border-top:1px solid var(--line);padding-top:22px}.status-heading{display:grid;grid-template-columns:13px 1fr auto;gap:8px;align-items:center;font-size:13px}.status-heading small{color:var(--muted);font-size:11px}.pulse{width:9px;height:9px;border:2px solid var(--gold);border-radius:50%;box-shadow:0 0 12px var(--gold)}.analysis-line{height:4px;border-radius:9px;background:#1a2540;margin:17px 0}.analysis-line span{display:block;width:58%;height:100%;border-radius:inherit;background:var(--blue);animation:load 1.4s infinite alternate}.analysis-status ol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;margin:0;padding:0;color:var(--muted);font-size:11px}.analysis-status li{padding-left:17px;position:relative}.analysis-status li:before{content:'○';position:absolute;left:0}.analysis-status li.is-running:before{content:'◉';color:var(--gold)}.analysis-status li.is-done:before{content:'✓';color:var(--green)}@keyframes load{to{width:92%}}
.verdict-message{max-width:830px;margin:34px auto 0;overflow:hidden;border:1px solid #34405a;border-radius:15px;background:#080f21}.verdict-banner{display:flex;justify-content:space-between;align-items:center;padding:16px 19px;border-bottom:1px solid #293853;text-transform:capitalize}.verdict-banner strong{font-size:22px}.verdict-banner.critical{background:rgba(255,97,109,.12);color:#ff8e96}.verdict-banner.high{background:rgba(255,141,60,.11);color:#ffb374}.verdict-banner.medium{background:rgba(255,177,26,.1);color:#ffd06a}.verdict-banner.safe,.verdict-banner.low{background:rgba(61,220,132,.09);color:#82edaf}.verdict-content{padding:19px}.verdict-topline{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.08em}.verdict-content p{font-size:16px;line-height:1.65;margin:15px 0}.verdict-details{display:flex;flex-wrap:wrap;gap:7px}.verdict-details span{font-size:11px;color:#c6d3f1;padding:7px 9px;border-radius:7px;background:#101c35;border:1px solid #273654}.verdict-actions{display:flex;gap:9px;margin-top:19px;flex-wrap:wrap}.context-column{display:grid;gap:15px;align-content:start}.context-card{padding:19px}.context-card p{color:var(--muted);line-height:1.55;font-size:13px;margin:0}.context-card .context-label{color:#dfe7f7;margin-bottom:11px}.plan-status{display:flex;align-items:center;gap:8px;margin:2px 0 10px}.plan-status span{width:8px;height:8px;border-radius:50%;background:#7785a3}.plan-status span.pro{background:var(--green);box-shadow:0 0 10px var(--green)}.plan-status strong{font-size:18px}.link-button{border:0;background:transparent;color:var(--gold);font-weight:800;padding:0;margin-top:13px;font-size:12px}.compact-list,.value-list{padding:0;margin:0;list-style:none;display:grid;gap:10px}.compact-list li,.value-list li{font-size:12px;line-height:1.4;color:#c7d2e8;padding-left:17px;position:relative}.compact-list li:before,.value-list li:before{content:'✓';color:var(--gold);position:absolute;left:0}.muted-card{background:#09132a}
.page-intro{max-width:800px;margin:0 0 25px}.page-intro h2{margin:0 0 12px;text-align:left}.pro-intro{max-width:860px}.history-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:13px}.history-list{overflow:hidden}.history-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:13px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.history-row:last-child{border-bottom:0}.history-row strong{display:block;font-size:14px;max-width:540px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-row small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.history-row .history-score{font-weight:800}.history-row button{border:0;background:transparent;color:var(--gold);font-size:12px;font-weight:800}.empty-list{color:var(--muted);text-align:center;padding:55px 20px}.pro-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:20px}.pro-status-panel,.pro-value-panel{padding:27px}.pro-status-heading{display:flex;gap:13px;align-items:center}.status-orb{width:35px;height:35px;border-radius:50%;border:2px solid #7081a5;box-shadow:inset 0 0 0 7px #172341}.status-orb.pro{border-color:var(--green);box-shadow:0 0 22px rgba(61,220,132,.3),inset 0 0 0 7px #173f35}.pro-status-heading p{margin:0;color:var(--muted);font-size:12px}.pro-status-heading h3,.pro-value-panel h3{margin:3px 0 0;font-size:25px}.pro-status-panel>p{font-size:15px;color:var(--muted);line-height:1.6;margin:23px 0}.plan-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 20px}.plan-meta div{border:1px solid var(--line);padding:12px;border-radius:10px}.plan-meta dt{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.plan-meta dd{margin:5px 0 0;font-size:13px;font-weight:700}.pro-actions{display:flex;gap:10px;flex-wrap:wrap}.pro-value-panel{background:#0d1b3a;border-color:#27426f}.value-list{margin:20px 0}.value-list li{font-size:14px}.disclaimer,.api-note{font-size:12px;color:var(--muted);line-height:1.55}.api-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.api-card{padding:24px;display:flex;flex-direction:column;min-height:265px}.api-card.featured{border-color:rgba(255,177,26,.65);box-shadow:0 0 0 1px rgba(255,177,26,.1)}.api-card>span{font-size:10px;letter-spacing:.1em;color:var(--gold);font-weight:800}.api-card h3{font-size:36px;margin:18px 0 9px}.api-card h3 small{font-size:12px;color:var(--muted)}.api-card p{color:var(--muted);font-size:13px;line-height:1.55;flex:1;margin:0}.button-link{display:inline-flex;align-items:center;justify-content:center;margin-top:20px}.api-note{margin:14px 0 0}.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.settings-card{padding:23px;min-height:184px}.settings-card h3{margin:0 0 10px}.settings-card p{color:var(--muted);line-height:1.6;font-size:13px;margin:0 0 18px}.setting-language-switcher{width:max-content;border-radius:10px}.setting-language-switcher button{border-radius:7px;padding:8px 9px}
.modal-backdrop{position:fixed;z-index:30;inset:0;background:rgba(1,4,12,.75);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none!important}.auth-modal{position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#0a1329;border:1px solid #324563;border-radius:19px;padding:31px;box-shadow:0 27px 85px rgba(0,0,0,.55)}.modal-close{position:absolute;right:14px;top:12px;background:transparent;border:0;color:var(--muted);font-size:28px}.auth-modal h2{font-size:28px;margin:0 0 7px}.auth-modal>p:not(.eyebrow):not(.auth-status):not(.auth-footnote){margin:0 0 19px;color:var(--muted);line-height:1.5;font-size:13px}.auth-tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:17px}.auth-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;padding:10px 5px;color:var(--muted);font-size:12px;font-weight:700}.auth-tabs button.active{color:var(--gold);border-color:var(--gold)}#authForm{display:grid;gap:15px}.auth-modal label{display:grid;gap:7px;color:#d8e0f2;font-size:12px;font-weight:700}.auth-modal label>span{display:block}.auth-modal input{box-sizing:border-box;width:100%;min-height:48px;border:1px solid #2a3958;background:#101c35;color:var(--text);border-radius:9px;padding:12px;outline:none}.auth-modal input::placeholder{color:#8190ae;opacity:1}.auth-modal input:focus{border-color:#5482dc;box-shadow:0 0 0 3px rgba(84,130,220,.15)}.auth-nick-field,.auth-code-field{display:none!important}.auth-modal.register .auth-nick-field,.auth-modal.reset-confirm .auth-code-field{display:grid!important}.auth-modal.reset .auth-password-field{display:none!important}.auth-modal.reset-confirm .auth-password-field{display:grid!important}.auth-divider{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:11px;text-transform:uppercase;margin:19px 0}.auth-divider:before,.auth-divider:after{content:'';height:1px;background:var(--line);flex:1}.google-button{width:100%;border:1px solid #8494ad;background:#f5f7fb;color:#1a2234;border-radius:9px;min-height:44px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:11px}.google-g{font-size:21px;font-weight:800;color:#4285f4}.auth-status{min-height:20px;color:#ffb5ba;font-size:12px;line-height:1.45;margin:12px 0 0}.auth-status.success{color:#86efb2}.auth-footnote{font-size:11px;color:var(--muted);line-height:1.5;margin:14px 0 0}.toast-region{position:fixed;z-index:40;right:18px;bottom:18px;display:grid;gap:10px}.toast{background:#112041;color:var(--text);border:1px solid #415a89;border-radius:10px;padding:12px 15px;max-width:360px;font-size:13px;box-shadow:0 12px 31px rgba(0,0,0,.28)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Object-specific scan facts: values come from the verified backend result. */
.object-inspection{margin-top:18px;padding:15px;border:1px solid #253b62;border-radius:13px;background:rgba(10,25,51,.74)}.object-inspection-title{display:block;color:#e8efff;font-size:12px;letter-spacing:.03em;margin-bottom:11px}.object-inspection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.object-inspection-grid div{min-width:0;padding:10px;border-radius:9px;background:#0a152b;border:1px solid #1c3156}.object-inspection-grid dt{color:#8ea0c3;font-size:10px;line-height:1.35}.object-inspection-grid dd{margin:5px 0 0;color:#eef4ff;font-size:12px;font-weight:750;line-height:1.35;overflow-wrap:anywhere}.object-inspection-limit{margin:11px 0 0;color:#aebcda;font-size:11px;line-height:1.45}

/* Live scan stages and bounded AI follow-up are part of the staging security workspace. */
.analysis-status ol{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.analysis-status li{padding:10px 10px 10px 22px;border:1px solid transparent;border-radius:8px;min-height:56px;transition:border-color .2s ease,background .2s ease}.analysis-status li:before{left:9px;top:11px}.analysis-status li strong,.analysis-status li small{display:block}.analysis-status li strong{font-size:11px;line-height:1.25;color:#b8c4db}.analysis-status li small{font-size:10px;line-height:1.3;color:#8391ae;margin-top:4px;animation:statusDetail 1.5s ease-in-out infinite}.analysis-status li.is-running{background:#0f1a34;border-color:#2e63cc}.analysis-status li.is-running strong{color:#e4edff}.analysis-status li.is-done{background:#0c1c27;border-color:#1e664f}.analysis-status li.is-done strong{color:#cdeedc}.analysis-status li.is-skipped{opacity:.68}.analysis-status li.is-skipped:before{content:'–';color:#92a0b9}@keyframes statusDetail{0%,100%{opacity:.45}50%{opacity:1}}
.scan-followup{max-width:830px;margin:22px auto 0;padding:21px;border:1px solid #2a3d62;border-radius:15px;background:linear-gradient(145deg,rgba(12,26,55,.9),rgba(8,15,32,.92))}.scan-followup-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.scan-followup-heading .kicker{margin:0 0 6px;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.12em}.scan-followup h3{margin:0;font-size:19px;letter-spacing:0}.scan-followup-text{color:var(--muted);margin:11px 0 0;line-height:1.55;font-size:13px;max-width:670px}.followup-limit{flex:0 0 auto;color:#b7c6e3;background:#101d38;border:1px solid #2e426a;border-radius:99px;padding:7px 10px;font-size:10px;font-weight:800;line-height:1.2;text-align:center}.followup-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.followup-suggestions button{border:1px solid #344b76;background:#101d38;color:#cbd7ed;padding:8px 10px;border-radius:8px;font-size:11px;text-align:left}.followup-suggestions button:hover{border-color:#5a82d5;color:#fff}.chat-log{display:grid;gap:9px;max-height:330px;overflow:auto;margin:12px 0}.chat-turn{max-width:90%;padding:11px 13px;border-radius:9px;border:1px solid #263958}.chat-turn small{display:block;color:#90a4ca;font-size:10px;font-weight:800;margin-bottom:5px}.chat-turn p{margin:0;color:#dce5f8;font-size:13px;line-height:1.55;white-space:pre-wrap}.chat-turn.user{justify-self:end;background:#153065;border-color:#2f62b6}.chat-turn.assistant{justify-self:start;background:#0c172d}.chat-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;border-top:1px solid #263655;padding-top:14px}.chat-composer input{width:100%;min-width:0;color:var(--text);background:#081225;border:1px solid #2c4067;border-radius:8px;padding:11px 12px;outline:0}.chat-composer input:focus{border-color:#4d7be0;box-shadow:0 0 0 3px rgba(45,109,246,.14)}.chat-composer .primary-action{margin:0;min-width:84px}
@media (max-width:1040px){.check-grid{grid-template-columns:1fr}.context-column{grid-template-columns:repeat(3,1fr)}.api-grid,.settings-grid{grid-template-columns:1fr 1fr}.pro-layout{grid-template-columns:1fr}.sidebar{width:220px}.app-shell{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:760px){.app-shell{display:block}.sidebar{position:static;height:auto;width:auto;padding:13px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.brand{padding:0;font-size:14px}.brand em,.sidebar .new-check,.session-list,.sidebar-bottom>.nav-item{display:none}.sidebar-bottom{margin:0;display:block}.account{padding:6px;border:0;background:transparent;grid-template-columns:30px}.account span:not(.avatar),.account>b{display:none}.primary-nav{display:flex;gap:1px;justify-content:center;overflow:auto}.nav-item{width:auto;padding:8px 9px;font-size:11px;white-space:nowrap}.nav-item span{display:none}.workspace{padding:21px 15px 35px}.workspace-header{margin-bottom:21px;display:block}.workspace-header h1{font-size:23px}.header-actions{justify-content:flex-start;margin-top:13px}.live-pill{display:none}.check-grid{gap:15px}.security-session{padding:22px 15px;min-height:auto}.scan-hero h2,.page-intro h2{font-size:30px}.scan-hero p{font-size:14px}.context-column{grid-template-columns:1fr}.analysis-status ol{grid-template-columns:1fr}.status-heading{grid-template-columns:13px 1fr}.status-heading small{grid-column:2}.history-row{grid-template-columns:9px minmax(0,1fr) auto}.history-row button{grid-column:2}.api-grid,.settings-grid{grid-template-columns:1fr}.pro-status-panel,.pro-value-panel{padding:20px}.plan-meta{grid-template-columns:1fr}.auth-modal{padding:25px 19px}.language-switcher{order:-1}.toast-region{left:15px;right:15px;bottom:15px}.toast{max-width:none}.examples{justify-content:flex-start}.history-toolbar{align-items:flex-start;flex-direction:column}.scan-followup{padding:17px}.scan-followup-heading{display:block}.followup-limit{display:inline-block;margin-top:10px}.chat-composer{grid-template-columns:1fr}.chat-composer .primary-action{width:100%}.object-inspection-grid{grid-template-columns:1fr}}

/* Staging intelligence workspace */
.intelligence-intro{max-width:900px}.intelligence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.intel-panel,.product-access{border:1px solid var(--line);background:rgba(8,15,32,.8);border-radius:var(--radius)}.intel-panel{padding:20px;min-height:360px}.intel-panel-featured{border-color:rgba(255,177,26,.48);background:linear-gradient(145deg,rgba(255,177,26,.07),rgba(8,15,32,.9) 48%)}.panel-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.panel-heading .context-label{font-size:16px;font-weight:800;margin:0 0 8px;color:#eef3ff}.panel-heading p:not(.context-label){margin:0;color:var(--muted);line-height:1.5;font-size:12px}.icon-action{width:34px;height:34px;display:grid;place-items:center;border:1px solid #304260;border-radius:9px;background:#0d1830;color:var(--gold);font-size:20px;flex:0 0 auto}.icon-action:hover{border-color:var(--gold);background:#152341}.feed-list{display:grid;gap:9px;margin-top:18px}.feed-row{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid #263655;background:rgba(13,25,49,.73);border-radius:10px}.feed-row>div:first-child{min-width:0}.feed-row strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.feed-row p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.4}.feed-row>div:last-child{display:grid;justify-items:end;gap:6px;align-content:start;flex:0 0 auto}.feed-row small{color:#8290ac;font-size:10px;max-width:92px;text-align:right;line-height:1.25}.feed-badge{font-size:10px;font-weight:800;padding:5px 7px;border:1px solid #53607a;border-radius:99px;color:#cad5eb}.feed-badge.critical{color:#ff9ca3;border-color:rgba(255,97,109,.58);background:rgba(255,97,109,.08)}.feed-badge.high{color:#ffc080;border-color:rgba(255,141,60,.58);background:rgba(255,141,60,.08)}.feed-badge.medium{color:#ffd16e;border-color:rgba(255,177,26,.58);background:rgba(255,177,26,.08)}.feed-badge.safe{color:#85f0b1;border-color:rgba(61,220,132,.58);background:rgba(61,220,132,.08)}.feed-state{margin:18px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.product-access{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);gap:30px;align-items:center;padding:28px;margin-top:16px;background:linear-gradient(110deg,rgba(10,22,48,.96),rgba(8,15,32,.8))}.product-access h3{margin:0 0 10px;font-size:24px}.product-access p{margin:0;color:var(--muted);line-height:1.6;max-width:660px}.product-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-links a{display:flex;align-items:center;min-height:46px;padding:11px 13px;border:1px solid #2b3b5d;background:#0c172e;border-radius:9px;color:#dbe5f9;font-size:12px;font-weight:800;text-decoration:none}.product-links a:first-child{border-color:rgba(255,177,26,.66);background:linear-gradient(110deg,#be7915,#ffad1b);color:#10192d}.product-links a:hover{border-color:#6991db;transform:translateY(-1px)}
@media(max-width:1040px){.intelligence-grid{grid-template-columns:1fr 1fr}.intel-panel:last-child{grid-column:1/-1;min-height:290px}.product-access{grid-template-columns:1fr}}@media(max-width:760px){.intelligence-grid{grid-template-columns:1fr}.intel-panel,.intel-panel:last-child{min-height:auto;grid-column:auto}.product-access{padding:20px;gap:20px}.product-links{grid-template-columns:1fr}.feed-row{padding:11px}.feed-row p{white-space:normal}.feed-row>div:last-child{max-width:96px}}


/* workspace.css */
/* Clean staging workspace additions. Kept separate from the legacy prototype styles. */
.primary-nav { display: none; }
.workspace-nav { display: grid; gap: 4px; margin: 24px 0 18px; }
.workspace-nav .nav-item { text-align: left; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.screen[data-screen-panel="tracking"],
.screen[data-screen-panel="analytics"],
.screen[data-screen-panel="billing"],
.screen[data-screen-panel="extension"],
.screen[data-screen-panel="telegram"],
.screen[data-screen-panel="mobile"] { max-width: 1200px; }
.page-intro { max-width: 760px; margin: 0 0 28px; }
.page-intro .eyebrow { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.page-intro h2 { margin: 8px 0 10px; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.page-intro p { max-width: 690px; color: var(--muted); font-size: 16px; line-height: 1.6; }

.watch-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.watch-summary { color: var(--muted); font-size: 14px; }
.watch-list { display: grid; gap: 10px; }
.watch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid #263b61; border-radius: 12px; background: rgba(10, 22, 46, .84); }
.watch-row.changed { border-color: rgba(255, 117, 96, .72); }
.watch-row strong { display: block; color: #f3f6ff; overflow-wrap: anywhere; }
.watch-row small { display: block; margin-top: 6px; color: #aab8d3; }
.watch-row .status { color: #90e9b2; font-size: 12px; font-weight: 800; white-space: nowrap; }
.watch-row.changed .status { color: #ffae85; }
.watch-actions { display: flex; gap: 8px; }
.watch-actions button, .watch-toolbar button { border: 1px solid #39517c; border-radius: 8px; background: #111f3d; color: #e9effd; padding: 9px 12px; font-weight: 800; cursor: pointer; }
.watch-actions button:hover, .watch-toolbar button:hover { border-color: var(--gold); color: #fff; }

.analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.analytics-card { min-height: 145px; padding: 20px; border: 1px solid #263b61; border-radius: 12px; background: linear-gradient(145deg, rgba(16, 33, 67, .96), rgba(8, 17, 37, .96)); }
.analytics-card small { display: block; color: #9fafd0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.analytics-card strong { display: block; margin-top: 18px; color: #fff; font-size: 36px; line-height: 1; }
.analytics-card p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.analytics-note, .api-explainer, .billing-panel, .product-showcase, .telegram-panel { margin-top: 20px; padding: 23px; border: 1px solid #2a416a; border-radius: 14px; background: rgba(9, 19, 40, .9); }
.analytics-note h3, .api-explainer h3, .billing-panel h3, .product-showcase h3, .telegram-panel h3 { margin: 0 0 9px; font-size: 21px; }
.analytics-note p, .api-explainer p, .billing-panel p, .product-showcase p, .telegram-panel p { margin: 0; color: var(--muted); line-height: 1.6; }

.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.billing-panel .primary-action, .product-showcase .primary-action, .telegram-panel .primary-action { display: inline-flex; margin-top: 18px; text-decoration: none; }
.product-showcase { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 24px; align-items: center; border-color: rgba(255, 177, 26, .5); }
.product-showcase-art { position: relative; isolation: isolate; min-height: 220px; display: grid; align-content: center; justify-items: start; gap: 12px; overflow: hidden; padding: 32px; border: 1px solid rgba(255, 181, 37, .42); border-radius: 16px; background: linear-gradient(135deg, #061128 0%, #102864 58%, #07122d 100%); color: var(--gold); }
.product-showcase-art::before { content: ''; position: absolute; inset: 0; z-index: -2; opacity: .48; background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(110, 147, 255, .16) 27px 28px), repeating-linear-gradient(0deg, transparent 0 26px, rgba(255, 181, 37, .08) 27px 28px); }
.product-showcase-art::after { content: ''; position: absolute; z-index: -1; width: 360px; height: 120px; left: -150px; top: 20px; transform: rotate(-22deg); background: linear-gradient(90deg, transparent, rgba(255, 181, 37, .26), transparent); animation: workspaceScan 7s ease-in-out infinite; }
.product-showcase-art span, .product-showcase-art strong { position: relative; z-index: 1; }
.product-showcase-art span { color: #ffb525; font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.product-showcase-art strong { max-width: 250px; color: #f7f9ff; font-size: 34px; line-height: 1.06; }
@keyframes workspaceScan { 0%, 100% { transform: translateX(-30px) rotate(-22deg); opacity: .25; } 50% { transform: translateX(360px) rotate(-22deg); opacity: 1; } }
.social-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.social-links a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid #324b7a; border-radius: 8px; color: #dce8ff; font-size: 13px; font-weight: 800; text-decoration: none; }
.social-links a:hover { border-color: var(--gold); color: #fff; }

/* Account settings: preferences are persisted by the workspace API for signed-in users. */
.settings-v2 { max-width: 1320px; margin: 0 auto; padding: 8px 0 104px; }
.settings-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 6px 0 22px; }
.settings-page-header h2 { margin: 4px 0 7px; color: #f5f7ff; font-size: clamp(34px, 4vw, 54px); letter-spacing: 0; line-height: 1.03; }
.settings-page-header p:not(.eyebrow) { margin: 0; color: #aab8d2; font-size: 16px; }
.settings-page-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; min-width: max-content; }
.settings-header-select select { min-height: 46px; min-width: 84px; appearance: none; border: 1px solid #314767; border-radius: 10px; background: #0d1a32; color: #f1f5ff; padding: 0 32px 0 15px; font-weight: 800; text-align: center; }
.settings-header-select { position: relative; }
.settings-header-select::after { content: '\25BE'; position: absolute; top: 11px; right: 12px; color: #c9d7f3; pointer-events: none; font-size: 18px; }
.engine-status { display: inline-flex; align-items: center; min-height: 46px; gap: 9px; padding: 0 14px; border: 1px solid #263c60; border-radius: 10px; background: rgba(8, 21, 46, .76); color: #dce7fa; font-size: 13px; font-weight: 800; }
.engine-status i { width: 9px; height: 9px; border-radius: 999px; background: #43d879; box-shadow: 0 0 15px rgba(67,216,121,.9); }
.settings-workspace { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-section-nav { position: sticky; top: 20px; display: grid; gap: 4px; padding: 10px; border: 1px solid #263b5e; border-radius: 12px; background: linear-gradient(145deg, rgba(13,30,59,.95), rgba(8,17,38,.95)); }
.settings-section-nav button { display: flex; align-items: center; gap: 13px; min-height: 48px; border: 0; border-radius: 8px; background: transparent; color: #d4deef; padding: 0 14px; font: inherit; font-weight: 750; text-align: left; cursor: pointer; }
.settings-section-nav button > span:first-child { width: 20px; color: #d2deff; font-size: 18px; text-align: center; }
.settings-section-nav button:hover, .settings-section-nav button.active { color: #ffca3d; background: linear-gradient(90deg, rgba(255,184,31,.17), rgba(255,184,31,.05)); }
.settings-section-nav button.active { box-shadow: inset 2px 0 0 var(--gold); }
.settings-main { display: grid; gap: 12px; }
.settings-panel { scroll-margin-top: 18px; border: 1px solid #2b4164; border-radius: 11px; background: linear-gradient(135deg, rgba(13,30,59,.96), rgba(8,19,42,.92)); padding: 22px 24px; }
.settings-panel h3 { margin: 0 0 18px; color: #f2f5ff; font-size: 21px; letter-spacing: 0; }
.settings-fields { display: grid; gap: 16px; }
.settings-fields-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-fields label, .settings-select-block, .settings-retention { display: grid; gap: 8px; color: #e9effb; font-size: 14px; font-weight: 700; }
.settings-fields select, .settings-select-block select, .settings-retention select { min-height: 47px; width: 100%; border: 1px solid #3b506e; border-radius: 8px; background: #0d1a31; color: #f4f7ff; padding: 0 13px; font: inherit; }
.settings-hint, .settings-select-block small { margin: 10px 0 0; color: #a9b7ce; font-size: 13px; line-height: 1.45; }
.appearance-controls { display: grid; grid-template-columns: 1fr 1fr minmax(180px, .72fr); gap: 26px; align-items: end; }
.settings-control-label { display: block; margin-bottom: 9px; color: #e8eefb; font-size: 14px; font-weight: 700; }
.segmented { display: inline-flex; border: 1px solid #3a4e6b; border-radius: 8px; overflow: hidden; background: #0d1a31; }
.segmented button { min-width: 102px; height: 42px; border: 0; border-right: 1px solid #3a4e6b; background: transparent; color: #d7e0f0; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.segmented button:last-child { border-right: 0; }
.segmented button:hover, .segmented button.active { color: #fff5d1; background: linear-gradient(135deg, rgba(255,188,27,.34), rgba(255,188,27,.12)); box-shadow: inset 0 0 0 1px #f1c41e; }
.toggle-setting { display: inline-flex; align-items: center; justify-content: space-between; gap: 17px; min-height: 38px; color: #e9effb; font-size: 14px; font-weight: 650; }
.toggle-setting input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-setting i { position: relative; flex: 0 0 43px; width: 43px; height: 26px; border: 1px solid #425572; border-radius: 999px; background: #15233d; transition: background .18s ease, border-color .18s ease; }
.toggle-setting i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #f6f8ff; box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: transform .18s ease; }
.toggle-setting input:checked + i { border-color: #3ad66c; background: #32c864; }
.toggle-setting input:checked + i::after { transform: translateX(17px); }
.settings-scan-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: start; }
.switch-list { display: grid; gap: 10px; }
.settings-select-block { align-content: start; }
.settings-data-panel { display: grid; grid-template-columns: 1fr minmax(340px, .9fr); gap: 28px; }
.settings-data-controls { display: grid; gap: 12px; align-content: start; }
.settings-data-controls h3 { margin-bottom: 6px; }
.settings-retention { grid-template-columns: minmax(160px, 1fr) 160px; align-items: center; margin-top: 5px; }
.settings-sync-state { align-self: stretch; display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-content: center; padding: 22px; border: 1px solid #3a506f; border-radius: 10px; background: rgba(6,17,37,.54); }
.sync-check { display: grid; place-items: center; width: 45px; height: 45px; border: 2px solid #45dc79; border-radius: 50%; color: #45dc79; font-size: 25px; font-weight: 900; }
.settings-sync-state strong { display: block; color: #f2f6ff; font-size: 17px; }
.settings-sync-state p { margin: 5px 0 0; color: #a8b7cf; font-size: 13px; }
.sync-platforms { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #324965; color: #dbe5f6; font-weight: 750; }
.sync-platforms i { width: 1px; height: 22px; background: #425776; }
.settings-privacy-panel p { max-width: 860px; margin: 0; color: #b1bfd7; line-height: 1.6; }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 18px 0 0; border-top: 1px solid #2b405f; }
.settings-footer p { margin: 0; color: #b7c3d7; font-size: 14px; }
.settings-footer > div { display: flex; gap: 12px; }
.settings-footer .secondary-action, .settings-footer .primary-action { min-height: 48px; padding: 0 22px; }
.settings-footer .primary-action.is-dirty { box-shadow: 0 0 0 3px rgba(255,187,22,.18), 0 10px 26px rgba(255,174,24,.22); }
html[data-theme='light'] .settings-panel, html[data-theme='light'] .settings-section-nav { background: linear-gradient(145deg, #edf3ff, #dce8fa); border-color: #aebed6; }
html[data-theme='light'] .settings-page-header h2, html[data-theme='light'] .settings-panel h3, html[data-theme='light'] .settings-fields label, html[data-theme='light'] .toggle-setting, html[data-theme='light'] .settings-control-label { color: #102443; }
html[data-theme='light'] .settings-fields select, html[data-theme='light'] .settings-select-block select, html[data-theme='light'] .settings-retention select, html[data-theme='light'] .segmented { background: #fff; color: #182b4c; border-color: #9eafc6; }
html[data-theme='light'] .segmented button { color: #182b4c; border-color: #b6c4d7; }
html[data-density='comfortable'] .settings-main { gap: 18px; }
html[data-density='comfortable'] .settings-panel { padding-top: 28px; padding-bottom: 28px; }
html[data-motion='reduced'] *, html[data-motion='reduced'] *::before, html[data-motion='reduced'] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }

.intelligence-grid > *, .feed-row, .feed-row > div { min-width: 0; }
.feed-row { overflow: hidden; }
.feed-row strong, .feed-row p { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.feed-row > div:last-child { max-width: 88px; }

@media (max-width: 1040px) {
  .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-workspace { grid-template-columns: 1fr; }
  .settings-section-nav { position: static; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .settings-section-nav button { justify-content: center; padding: 0 8px; }
  .settings-section-nav button > span:first-child { display: none; }
}
@media (max-width: 760px) {
  .workspace-nav { display: flex; order: 0; margin: 0; gap: 1px; overflow-x: auto; }
  .workspace-nav .nav-item { flex: 0 0 auto; width: auto; padding: 8px 9px; font-size: 11px; white-space: nowrap; }
  .workspace-nav .nav-item span { display: none; }
  .watch-toolbar { align-items: flex-start; flex-direction: column; }
  .watch-row { grid-template-columns: 1fr; gap: 10px; }
  .watch-actions { width: 100%; }
  .watch-actions button { flex: 1; }
  .analytics-grid, .billing-grid, .product-showcase { grid-template-columns: 1fr; }
  .analytics-card { min-height: 128px; }
  .settings-v2 { padding-bottom: 74px; }
  .settings-page-header, .settings-footer { align-items: stretch; flex-direction: column; }
  .settings-page-tools { justify-content: flex-start; min-width: 0; }
  .engine-status { flex: 1; }
  .settings-section-nav { grid-template-columns: 1fr 1fr; }
  .settings-section-nav button { justify-content: flex-start; }
  .settings-section-nav button > span:first-child { display: inline-block; }
  .settings-panel { padding: 18px; }
  .settings-fields-three, .appearance-controls, .settings-scan-grid, .settings-data-panel { grid-template-columns: 1fr; gap: 16px; }
  .appearance-controls { align-items: stretch; }
  .segmented { width: 100%; }
  .segmented button { min-width: 0; flex: 1; }
  .settings-data-panel { display: grid; }
  .settings-retention { grid-template-columns: 1fr; }
  .settings-footer > div { display: grid; grid-template-columns: 1fr; }
}

/* Account-scoped billing workspace. */
.billing-app { max-width: 1420px; margin: 0 auto; padding: 18px 22px 42px; }
.billing-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0 0 14px; }
.billing-eyebrow { margin: 0 0 8px; color: #fbb52b; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.billing-page-header h2 { margin: 0; color: #f5f7ff; font-size: clamp(30px, 3vw, 48px); line-height: 1.05; }
.billing-page-header p { max-width: 700px; margin: 11px 0 0; color: #a9b8d7; font-size: 16px; line-height: 1.55; }
.billing-account { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border: 1px solid #29426e; border-radius: 10px; color: #dce6ff; background: rgba(8, 17, 39, .82); font-size: 13px; white-space: nowrap; }
.billing-tabs { display: flex; gap: 24px; border-bottom: 1px solid #203452; margin-bottom: 20px; }
.billing-tabs button { appearance: none; min-height: 42px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #a8b7d3; font: inherit; font-weight: 700; cursor: pointer; }
.billing-tabs button.active, .billing-tabs button:hover { color: #ffd144; border-bottom-color: #ffd144; }
.billing-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .9fr); gap: 16px; align-items: start; }
.billing-primary-stack, .billing-side-stack { display: grid; gap: 16px; }
.billing-surface { padding: 20px; border: 1px solid #294267; border-radius: 12px; background: linear-gradient(145deg, rgba(13, 29, 57, .96), rgba(6, 16, 36, .98)); box-shadow: 0 16px 35px rgba(0, 0, 0, .16); }
.billing-surface h3 { margin: 0 0 16px; color: #f6f8ff; font-size: 19px; }
.billing-plan-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.billing-plan-card { position: relative; min-height: 332px; padding: 22px; border: 1px solid #344a6d; border-radius: 10px; background: rgba(9, 20, 44, .72); }
.billing-plan-card.pro { border-color: #e7ae1c; background: linear-gradient(145deg, rgba(27, 41, 66, .95), rgba(13, 23, 47, .98)); box-shadow: inset 0 0 0 1px rgba(255, 204, 54, .12); }
.billing-plan-card h4 { display: inline-block; margin: 0 0 7px 11px; color: #f8f9ff; font-size: 28px; vertical-align: middle; }
.billing-plan-icon { display: inline-flex; align-items: center; justify-content: center; width: 49px; height: 49px; color: #aab9d3; font-size: 45px; line-height: 1; vertical-align: middle; }
.billing-plan-card.pro .billing-plan-icon { color: #ffd12a; }
.billing-price { margin: 8px 0 18px; color: #eff4ff; font-size: 22px; font-weight: 800; }
.billing-price-note { color: #51dc7a; }
.billing-plan-card ul { display: grid; gap: 12px; padding: 16px 0; margin: 0; border-top: 1px solid #2d4160; list-style: none; color: #d1d9ea; font-size: 14px; line-height: 1.4; }
.billing-plan-card li::before { content: '✓'; margin-right: 10px; color: #5de184; font-weight: 900; }
.billing-plan-current { position: absolute; right: 22px; bottom: 22px; left: 22px; display: inline-flex; align-items: center; justify-content: center; min-height: 43px; border: 1px solid #435a78; border-radius: 7px; color: #d9e4f9; font-weight: 750; }
.billing-plan-current.pro-current { border-color: #208b57; color: #63e88d; background: rgba(24, 108, 68, .17); }
.billing-plan-card .primary-action { position: absolute; right: 22px; bottom: 22px; left: 22px; display: flex; justify-content: center; text-decoration: none; }
.billing-method-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid #304867; border-radius: 9px; background: rgba(7, 17, 37, .5); }
.billing-method-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 9px; background: #163c8b; color: #fff; font-size: 23px; }
.billing-method-card strong { color: #f0f4ff; font-size: 15px; }
.billing-method-card p, .billing-verified-note { margin: 4px 0 0; color: #9fb0cf; font-size: 13px; line-height: 1.45; }
.billing-verified-note { padding-top: 13px; }
.billing-api-prompt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border: 1px solid #31528c; border-radius: 10px; background: linear-gradient(90deg, rgba(17, 49, 105, .54), rgba(8, 21, 46, .85)); }
.billing-api-prompt strong, .billing-api-prompt span { display: block; }
.billing-api-prompt strong { color: #f5f7ff; margin-bottom: 4px; }
.billing-api-prompt span { color: #a9b9d4; font-size: 13px; }
.billing-everywhere p { color: #b4c0d6; line-height: 1.55; }
.billing-platforms { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 22px; text-align: center; }
.billing-platforms div { display: grid; justify-items: center; gap: 8px; color: #d9e2f2; font-size: 12px; }
.billing-platforms i { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid #6e84a6; border-radius: 7px; color: #eef4ff; font-size: 26px; font-style: normal; }
.billing-platforms b { color: #d9e3f6; font-size: 22px; }
.billing-current { display: grid; gap: 10px; }
.billing-account-card { min-height: 242px; }
.billing-account-name { margin-bottom: 11px; color: #aebbd4; font-size: 13px; overflow-wrap: anywhere; }
.billing-current-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #f5f7ff; }
.billing-current-row strong { font-size: 21px; }
.billing-detail-list { display: grid; gap: 9px; margin: 4px 0 0; }
.billing-detail-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.billing-detail-list dt { color: #96a7c4; font-size: 13px; }
.billing-detail-list dd { margin: 0; color: #e5ecfa; font-size: 13px; text-align: right; }
.billing-empty-copy { color: #aebbd1; line-height: 1.55; }
.billing-account-card .primary-action { margin-top: 16px; }
.billing-manage { display: flex; justify-content: center; margin-top: 6px; text-decoration: none; }
.billing-current-name { display: flex; align-items: center; gap: 10px; color: #f6f8ff; font-size: 20px; font-weight: 800; }
.billing-current-name::before { content: '✦'; color: #ffcb25; font-size: 30px; }
.billing-status { display: inline-flex; width: fit-content; padding: 4px 8px; border: 1px solid #267c51; border-radius: 5px; color: #65df91; background: rgba(26, 119, 71, .13); font-size: 12px; font-weight: 800; }
.billing-current p { margin: 0; color: #aab8d1; line-height: 1.45; }
.billing-history { margin-top: 16px; padding-bottom: 10px; }
.billing-history-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.billing-history-head span { color: #9dafca; font-size: 13px; overflow-wrap: anywhere; }
.billing-history-table { overflow-x: auto; border: 1px solid #294260; border-radius: 8px; }
.billing-history-labels, .billing-history-row { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1.4fr 1fr; min-width: 680px; }
.billing-history-labels { color: #9eadc4; background: rgba(17, 36, 67, .7); font-size: 12px; font-weight: 750; }
.billing-history-labels span, .billing-history-row span { padding: 13px 12px; border-bottom: 1px solid rgba(55, 78, 111, .55); }
.billing-history-row { color: #e3eaff; font-size: 13px; }
.billing-history-status { color: #66e291; }
.billing-history-row:last-child span { border-bottom: 0; }
.billing-history-empty { padding: 25px; color: #aab7cf; text-align: center; }
.billing-loading, .billing-error { display: grid; place-items: center; min-height: 260px; padding: 22px; border: 1px dashed #34517d; border-radius: 12px; color: #b8c7df; text-align: center; }
.billing-error { border-color: #7e4c4e; color: #ffb4b5; }

@media (max-width: 1040px) {
  .billing-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .billing-app { padding: 14px 13px 88px; }
  .billing-page-header, .billing-api-prompt { align-items: stretch; flex-direction: column; }
  .billing-account { width: fit-content; }
  .billing-plan-grid { grid-template-columns: 1fr; }
  .billing-plan-card { min-height: 304px; }
  .billing-method-card { grid-template-columns: auto minmax(0, 1fr); }
  .billing-method-card .secondary-action { grid-column: 1 / -1; justify-content: center; }
  .billing-platforms { gap: 4px; }
}


/* === NOYTRIX CHECK V2 === */

html,
body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at 76% 4%, rgba(18, 47, 103, .38), transparent 34%),
    radial-gradient(circle at 55% 65%, rgba(8, 32, 72, .18), transparent 38%),
    #030916;
}


/* ===== SHELL ===== */

.app-shell {
  grid-template-columns: 246px minmax(0, 1fr);
}

.sidebar {
  width: 246px;
  padding: 29px 18px 20px;
  background: #040a17;
  border-right: 1px solid #1b2943;
}

.brand {
  padding: 0 20px;
  min-height: 42px;
  gap: 11px;
  color: #f4f7ff;
  font-size: 21px;
  letter-spacing: .13em;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 0;
}

.brand em {
  display: none;
}

.new-check {
  width: 100%;
  min-height: 57px;
  margin-top: 32px;
  border-radius: 10px;
  font-size: 16px;
  background: linear-gradient(135deg, #ffc33a, #ffad12);
  color: #07101f;
  box-shadow: 0 8px 28px rgba(255, 177, 26, .10);
}

.new-check span {
  font-size: 25px;
  font-weight: 700;
}

.workspace-nav {
  margin: 28px 0 18px;
  gap: 5px;
}

.workspace-nav .nav-item,
.sidebar-bottom .nav-item {
  min-height: 48px;
  padding: 0 11px;
  border-radius: 9px;
  gap: 13px;
  font-size: 15px;
  color: #a7b4ce;
}

.workspace-nav .nav-item:hover,
.sidebar-bottom .nav-item:hover {
  color: #eaf0ff;
  background: rgba(255,255,255,.025);
}

.workspace-nav .nav-item.active {
  color: #f0f5ff;
  background: linear-gradient(90deg, #0d214e, #0a1a3f);
  box-shadow:
    inset 0 0 0 1px #28539d,
    0 10px 30px rgba(0, 41, 107, .12);
}

.nav-icon {
  width: 22px !important;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  color: #b6c5e4 !important;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-nav .nav-item.active .nav-icon {
  color: #ffb51f !important;
}

.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid #17243b;
  padding-top: 16px;
}

.settings-nav-item {
  width: 100% !important;
}

.v2-hidden-required {
  display: none !important;
}


/* ===== MAIN ===== */

.workspace {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 29px 37px 55px 42px;
}

.workspace-header {
  min-height: 45px;
  margin-bottom: 37px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 23px;
}

.language-switcher {
  display: flex;
  padding: 3px;
  border-radius: 12px;
  background: rgba(4, 11, 25, .86);
  border: 1px solid #263653;
}

.language-switcher button {
  min-width: 48px;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
}

.language-switcher button.active {
  background: linear-gradient(135deg, #ffc941, #ffad14);
  color: #07101f;
}

.live-pill {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(7, 16, 34, .78);
  border: 1px solid #273651;
  color: #d1d9e8;
  font-size: 13px;
}

.live-pill i {
  width: 8px;
  height: 8px;
  background: #27df82;
  box-shadow: 0 0 13px rgba(39, 223, 130, .9);
}

.profile-link {
  min-width: 106px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  color: #f4f6fb;
  border: 1px solid #8a94a8;
  font-size: 14px;
  background: rgba(4, 9, 19, .42);
}


/* ===== CHECK PAGE ===== */

.check-screen-v2 {
  max-width: none !important;
}

.check-v2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 385px;
  gap: 41px;
  max-width: 1324px;
  align-items: start;
}

.check-v2-main {
  min-width: 0;
}

.check-v2-hero {
  max-width: 895px;
  margin: 7px 0 23px;
}

.check-v2-hero .eyebrow {
  margin: 0 0 11px;
  color: #ffb31c;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .055em;
}

.check-v2-hero h2 {
  max-width: 820px;
  margin: 0;
  color: #f5f7fb;
  font-size: clamp(42px, 3.25vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
}

.check-v2-hero > p:last-child {
  max-width: 830px;
  margin: 21px 0 0;
  color: #aab5ca;
  font-size: 17px;
  line-height: 1.65;
}


/* ===== SCAN BOX ===== */

.scan-box-v2 {
  max-width: 895px;
  margin-top: 20px;
  padding: 23px 18px 16px;
  border: 1px solid #2b5da4;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(8, 26, 57, .90), rgba(5, 15, 34, .94));
  box-shadow: 0 16px 50px rgba(0, 28, 80, .10);
}

#screen-check .scan-composer {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.scan-input-row {
  min-height: 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 165px 151px;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 0;
  border: 1px solid #20324f;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(9, 19, 39, .95), rgba(7, 17, 35, .98));
}

#screen-check .scan-composer input {
  width: 100%;
  min-width: 0;
  height: 78px;
  padding: 0 20px;
  border: 0;
  outline: 0;
  color: #eef3ff;
  background: transparent;
  font-size: 16px;
}

#screen-check .scan-composer input::placeholder {
  color: #8c98ad;
  opacity: 1;
}

.auto-detect-pill {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid #34425a;
  border-radius: 8px;
  background: linear-gradient(145deg, #151c2d, #101728);
  color: #aeb7c8;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.auto-detect-icon {
  color: #e4e9f4;
  font-size: 22px;
  line-height: 1;
}

#screen-check .submit-scan {
  min-height: 54px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffc43a, #ffad12);
  color: #0b1320;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(255, 177, 26, .11);
}

#screen-check .submit-scan:hover {
  background: linear-gradient(135deg, #ffd05c, #ffb51d);
  transform: translateY(-1px);
}

#screen-check .examples {
  min-height: 34px;
  margin: 13px 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.examples-label {
  color: #d5dbea;
  font-size: 13px;
  font-weight: 600;
  margin-right: 4px;
}

#screen-check .examples button {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 7px;
  border: 1px solid #2d405f;
  background: #0c172d;
  color: #c7d1e5;
  font-size: 12px;
  font-weight: 600;
}

#screen-check .examples button:hover {
  border-color: #496d9f;
  color: #fff;
}


/* ===== TRUST STRIP ===== */

.trust-strip {
  max-width: 895px;
  min-height: 88px;
  margin-top: 27px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #243957;
  border-radius: 13px;
  background: rgba(7, 18, 39, .76);
}

.trust-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 18px 15px;
  border-right: 1px solid #263853;
}

.trust-item:last-child {
  border-right: 0;
}

.trust-icon {
  color: #e9eefb;
  font-size: 31px;
  line-height: 1;
}

.trust-item strong {
  display: block;
  color: #d6ddeb;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}


/* ===== WHAT YOU GET ===== */

.what-you-get-v2 {
  max-width: 895px;
  margin-top: 31px;
}

.what-you-get-v2 > h3 {
  margin: 0 0 17px;
  color: #f2f5fb;
  font-size: 20px;
  letter-spacing: -.01em;
}

.benefits-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.benefit-card-v2 {
  min-height: 118px;
  display: grid;
  grid-template-columns: 61px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  padding: 19px 17px;
  border: 1px solid #263a59;
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(7, 20, 43, .87), rgba(6, 16, 34, .87));
}

.benefit-icon-v2 {
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  border: 1px solid #2f4668;
  border-radius: 50%;
  color: #ffb41b;
  font-size: 31px;
  line-height: 1;
}

.benefit-card-v2 strong {
  display: block;
  margin-bottom: 7px;
  color: #f1f4fa;
  font-size: 16px;
}

.benefit-card-v2 p {
  margin: 0;
  color: #aeb8cd;
  font-size: 13px;
  line-height: 1.45;
}

.check-disclaimer-v2 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 27px 0 0;
  color: #77849d;
  font-size: 12px;
  line-height: 1.5;
}


/* ===== STATIC EXAMPLE RESULT ===== */

.example-result-v2 {
  min-height: 558px;
  padding: 29px 32px 24px;
  border: 1px solid #293a57;
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(10, 22, 46, .92), rgba(6, 15, 32, .96));
  box-shadow: 0 20px 70px rgba(0, 15, 45, .18);
}

.example-result-label {
  margin: 0 0 22px;
  color: #aeb8ce;
  font-size: 18px;
  font-weight: 700;
}

.example-domain-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.example-domain-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid #a42135;
  border-radius: 12px;
  color: #dce4f3;
  font-size: 35px;
  background: rgba(19, 25, 39, .65);
}

.example-domain-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f1f3f7;
  font-size: 17px;
  white-space: nowrap;
}

.high-risk-pill {
  width: max-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 0 11px;
  border: 1px solid #b52636;
  border-radius: 99px;
  background: rgba(116, 18, 35, .24);
  color: #ff5662;
  font-size: 12px;
  font-weight: 700;
}

.example-score {
  margin-top: 27px;
}

.example-score > span {
  color: #acb7cc;
  font-size: 17px;
}

.example-score > div {
  margin-top: 5px;
}

.example-score strong {
  color: #ff4953;
  font-size: 42px;
  line-height: 1;
}

.example-score small {
  margin-left: 5px;
  color: #7f8ba3;
  font-size: 21px;
}

.example-divider {
  height: 1px;
  margin: 22px 0 20px;
  background: #263753;
}

.detected-title {
  margin: 0 0 15px;
  color: #b1bbcd;
  font-size: 16px;
}

.detected-list {
  display: grid;
  gap: 14px;
}

.detected-list > div {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 13px;
  align-items: center;
  color: #c6cede;
  font-size: 13px;
}

.detected-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #7b2331;
  border-radius: 50%;
  background: rgba(105, 18, 31, .22);
  color: #ff515d;
  font-size: 18px;
}

.example-view-button {
  width: 100%;
  min-height: 47px;
  margin-top: 24px;
  border: 1px solid #d89212;
  border-radius: 7px;
  background: transparent;
  color: #ffb619;
  font-size: 14px;
  font-weight: 700;
}

.example-view-button:hover {
  background: rgba(255, 177, 26, .07);
}


/* ===== REAL SCAN RESULT ===== */

#screen-check .analysis-status,
#screen-check .verdict-message,
#screen-check .scan-followup {
  max-width: 895px;
}

#screen-check .analysis-status {
  margin-top: 25px;
}


/* Existing plan JS needs these nodes */
.check-v2-required {
  display: none !important;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 1250px) {

  .check-v2-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
  }

  .scan-input-row {
    grid-template-columns: minmax(0,1fr) 145px 135px;
  }

  .benefits-grid-v2 {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 1050px) {

  .check-v2-layout {
    grid-template-columns: 1fr;
  }

  .example-result-v2 {
    max-width: 895px;
    min-height: 0;
  }

  .trust-strip {
    grid-template-columns: repeat(2,1fr);
  }

  .trust-item:nth-child(2) {
    border-right: 0;
  }

  .trust-item:nth-child(-n+2) {
    border-bottom: 1px solid #263853;
  }

}


@media (max-width: 760px) {

  .app-shell {
    display: block;
  }

  .sidebar {
    width: 100%;
  }

  .workspace {
    padding: 20px 15px 40px;
  }

  .workspace-header {
    display: flex;
  }

  .header-left {
    gap: 10px;
  }

  .live-pill {
    display: none;
  }

  .check-v2-hero h2 {
    font-size: 39px;
  }

  .scan-input-row {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  #screen-check .scan-composer input {
    height: 55px;
    padding: 0 10px;
  }

  .auto-detect-pill {
    display: none;
  }

  #screen-check .submit-scan {
    width: 100%;
  }

  .trust-strip {
    grid-template-columns: 1fr;
  }

  .trust-item,
  .trust-item:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #263853;
  }

  .trust-item:last-child {
    border-bottom: 0;
  }

  .benefits-grid-v2 {
    grid-template-columns: 1fr;
  }

  .example-result-v2 {
    padding: 23px 20px;
  }

}


/* === NOYTRIX CHAT MODE V3 === */


/* ============================================================
   CLEAN INITIAL SCREEN
   ============================================================ */

#screen-check .example-result-v2,
#screen-check .trust-strip,
#screen-check .what-you-get-v2,
#screen-check .auto-detect-pill,
#screen-check .examples {
  display: none !important;
}

#screen-check .check-v2-layout {
  display: block;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

#screen-check .check-v2-main {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

#screen-check .check-v2-hero {
  max-width: 760px;
  margin: clamp(90px, 13vh, 150px) auto 34px;
  text-align: center;
}

#screen-check .check-v2-hero .eyebrow {
  display: none;
}

#screen-check .check-v2-hero h2 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

#screen-check .check-v2-hero > p:last-child {
  max-width: 650px;
  margin: 18px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: #8e9bb2;
}

#screen-check .scan-box-v2 {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#screen-check .scan-composer {
  width: 100%;
}

#screen-check .scan-input-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 48px;
  gap: 8px;
  align-items: center;
  padding: 7px 8px 7px 9px;
  border: 1px solid #30415f;
  border-radius: 19px;
  background: #0a1428;
  box-shadow:
    0 14px 45px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.02);
}

#screen-check .scan-input-row:focus-within {
  border-color: #49658d;
  box-shadow:
    0 14px 45px rgba(0,0,0,.20),
    0 0 0 3px rgba(54,93,153,.08);
}

#screen-check .scan-composer input {
  height: 48px;
  padding: 0 15px;
  font-size: 15px;
}

#screen-check .submit-scan {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 0;
}

#screen-check .submit-scan span {
  display: none !important;
}

#screen-check .submit-scan::before {
  content: '↑';
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}


/* ============================================================
   ENTER CHAT MODE
   ============================================================ */

#screen-check.conversation-mode .check-v2-hero,
#screen-check.conversation-mode .scan-box-v2,
#screen-check.conversation-mode .trust-strip,
#screen-check.conversation-mode .what-you-get-v2,
#screen-check.conversation-mode .example-result-v2,
#screen-check.conversation-mode .analysis-status,
#screen-check.conversation-mode .verdict-message {
  display: none !important;
}

#screen-check.conversation-mode .check-v2-layout,
#screen-check.conversation-mode .check-v2-main {
  max-width: 900px;
  margin: 0 auto;
}

#screen-check.conversation-mode .scan-followup {
  width: 100%;
  max-width: 820px;
  min-height: calc(100vh - 150px);

  margin: 0 auto;
  padding: 0;

  display: flex;
  flex-direction: column;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

#screen-check.conversation-mode .scan-followup-heading,
#screen-check.conversation-mode .scan-followup-text,
#screen-check.conversation-mode .followup-suggestions,
#screen-check.conversation-mode .followup-limit {
  display: none !important;
}


/* ============================================================
   MESSAGES
   ============================================================ */

#screen-check.conversation-mode .chat-log {
  width: 100%;
  max-height: none;
  overflow: visible;

  display: flex;
  flex-direction: column;
  gap: 28px;

  flex: 1;

  margin: 0;
  padding: 28px 0 80px;
}

#screen-check.conversation-mode .chat-turn {
  border: 0;
  box-shadow: none;
}

#screen-check.conversation-mode .chat-turn.user {
  max-width: min(70%, 620px);
  align-self: flex-end;
  justify-self: auto;

  padding: 12px 17px;

  border: 1px solid #293b58;
  border-radius: 18px;

  background: #111d32;
}

#screen-check.conversation-mode .chat-turn.user small {
  display: none;
}

#screen-check.conversation-mode .chat-turn.user p {
  margin: 0;

  color: #e6ebf5;

  font-size: 15px;
  line-height: 1.55;
}

#screen-check.conversation-mode .chat-turn.assistant {
  width: 100%;
  max-width: 760px;

  align-self: flex-start;
  justify-self: auto;

  padding: 0 7px;

  border: 0;
  background: transparent;
}

#screen-check.conversation-mode .chat-turn.assistant small {
  display: block;

  margin: 0 0 9px;

  color: #ffb51c;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#screen-check.conversation-mode .chat-turn.assistant p {
  margin: 0;

  color: #e2e8f3;

  font-size: 16px;
  line-height: 1.72;

  white-space: pre-wrap;
}


/* ============================================================
   CHAT INPUT
   ============================================================ */

#screen-check.conversation-mode .chat-composer {
  position: sticky;
  bottom: 18px;

  z-index: 5;

  width: 100%;

  display: grid;
  grid-template-columns: minmax(0,1fr) 48px;
  gap: 8px;

  margin-top: auto;
  padding: 7px 8px 7px 9px;

  border: 1px solid #30415f;
  border-radius: 19px;

  background: #0a1428;

  box-shadow:
    0 -25px 55px #030916,
    0 15px 45px rgba(0,0,0,.25);
}

#screen-check.conversation-mode .chat-composer input {
  width: 100%;
  height: 48px;

  padding: 0 13px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #eef2f8;

  font-size: 15px;
}

#screen-check.conversation-mode .chat-composer input::placeholder {
  color: #77859e;
}

#screen-check.conversation-mode .chat-composer .primary-action {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;

  margin: 0;
  padding: 0;

  display: grid;
  place-items: center;

  border-radius: 14px;

  font-size: 22px;
  line-height: 1;
}

#screen-check.conversation-mode:not(.has-result) .chat-composer {
  display: none !important;
}


/* ============================================================
   SCANNING
   ============================================================ */

#screen-check.conversation-mode.is-scanning
.chat-turn.assistant:last-child p {
  color: #9ba9bf;
}

#screen-check.conversation-mode.is-scanning
.chat-turn.assistant:last-child p::after {
  content: '';

  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 8px;

  border-radius: 50%;

  background: #ffb51c;

  animation: noytrixChatPulse 1s infinite alternate;
}

@keyframes noytrixChatPulse {
  from {
    opacity: .2;
    transform: scale(.75);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

  #screen-check .check-v2-hero {
    margin-top: 65px;
  }

  #screen-check .check-v2-hero h2 {
    font-size: 34px;
  }

  #screen-check .check-v2-hero > p:last-child {
    font-size: 14px;
  }

  #screen-check.conversation-mode .scan-followup {
    min-height: calc(100vh - 125px);
  }

  #screen-check.conversation-mode .chat-log {
    padding-top: 15px;
  }

  #screen-check.conversation-mode .chat-turn.user {
    max-width: 86%;
  }

  #screen-check.conversation-mode .chat-turn.assistant p {
    font-size: 15px;
  }

}


/* === NOYTRIX PREMIUM CHAT V4 === */


/* =========================================================
   INITIAL PAGE — PREMIUM MINIMAL
   ========================================================= */

#screen-check:not(.conversation-mode) .example-result-v2,
#screen-check:not(.conversation-mode) .trust-strip,
#screen-check:not(.conversation-mode) .what-you-get-v2,
#screen-check:not(.conversation-mode) .analysis-status,
#screen-check:not(.conversation-mode) .verdict-message,
#screen-check:not(.conversation-mode) .scan-followup,
#screen-check:not(.conversation-mode) .auto-detect-pill {
  display: none !important;
}

#screen-check:not(.conversation-mode) .check-v2-layout {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#screen-check:not(.conversation-mode) .check-v2-main {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}


/* HERO */

#screen-check:not(.conversation-mode) .check-v2-hero {
  position: relative;
  max-width: 880px;
  margin:
    clamp(96px, 13vh, 145px)
    auto
    36px;

  text-align: center;

  animation:
    ntxHeroReveal .75s cubic-bezier(.2,.8,.2,1)
    both;
}

#screen-check:not(.conversation-mode) .check-v2-hero::before {
  content: '';

  position: absolute;
  z-index: -1;

  left: 50%;
  top: 42%;

  width: 640px;
  height: 270px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(38, 75, 145, .20) 0%,
      rgba(26, 56, 115, .08) 42%,
      transparent 72%
    );

  filter: blur(20px);

  animation:
    ntxHeroGlow 5s ease-in-out infinite alternate;
}

#screen-check:not(.conversation-mode) .check-v2-hero .eyebrow {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin: 0 auto 19px;

  padding: 7px 12px;

  border: 1px solid rgba(255, 185, 38, .18);
  border-radius: 999px;

  background: rgba(255, 180, 25, .045);

  color: #dba63f;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .17em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  animation:
    ntxFadeUp .65s .06s both;
}

#screen-check:not(.conversation-mode) .check-v2-hero h2 {
  position: relative;

  max-width: 880px;

  margin: 0 auto;

  font-size:
    clamp(45px, 4.25vw, 64px);

  line-height: 1.055;

  letter-spacing: -.047em;

  font-weight: 800;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f5f7fb 40%,
      #d8e0ed 76%,
      #b6c3d6 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  filter:
    drop-shadow(
      0 14px 25px rgba(0,0,0,.30)
    );

  animation:
    ntxFadeUp .75s .12s both;
}

#screen-check:not(.conversation-mode)
.check-v2-hero > p:last-child {
  max-width: 675px;

  margin: 22px auto 0;

  color: #8795ad;

  font-size: 15px;
  font-weight: 400;

  line-height: 1.72;

  letter-spacing: -.005em;

  animation:
    ntxFadeUp .7s .20s both;
}


/* =========================================================
   PREMIUM INPUT
   ========================================================= */

#screen-check:not(.conversation-mode) .scan-box-v2 {
  width: 100%;
  max-width: 870px;

  margin: 0 auto;

  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;

  animation:
    ntxFadeUp .75s .27s both;
}

#screen-check:not(.conversation-mode) .scan-composer {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;
}

#screen-check:not(.conversation-mode) .scan-input-row {
  position: relative;

  overflow: hidden;

  min-height: 72px;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    54px;

  gap: 8px;

  align-items: center;

  padding:
    8px
    9px
    8px
    11px;

  border:
    1px solid transparent;

  border-radius: 22px;

  background:
    linear-gradient(
      105deg,
      #091327,
      #0a162c 48%,
      #0a1428
    ) padding-box,

    linear-gradient(
      115deg,
      #263b5d 0%,
      #526a8b 44%,
      rgba(255,183,31,.52) 68%,
      #314867 100%
    ) border-box;

  box-shadow:
    0 20px 65px rgba(0,0,0,.28),
    0 3px 18px rgba(13,37,78,.20),
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

#screen-check:not(.conversation-mode)
.scan-input-row::before {
  content: '';

  position: absolute;

  top: -80px;
  left: -130px;

  width: 110px;
  height: 230px;

  transform: rotate(28deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.045),
      transparent
    );

  animation:
    ntxInputSheen 7s 1.2s ease-in-out infinite;

  pointer-events: none;
}

#screen-check:not(.conversation-mode)
.scan-input-row:focus-within {
  transform: translateY(-1px);

  box-shadow:
    0 24px 75px rgba(0,0,0,.34),
    0 0 0 3px rgba(59,92,143,.07),
    0 0 34px rgba(38,76,144,.10),
    inset 0 1px 0 rgba(255,255,255,.045);
}

#screen-check:not(.conversation-mode)
.scan-composer input {
  width: 100%;

  height: 54px;

  min-width: 0;

  padding: 0 17px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #edf2fa;

  font-size: 15px;
  font-weight: 450;

  letter-spacing: -.005em;
}

#screen-check:not(.conversation-mode)
.scan-composer input::placeholder {
  color: #74839b;

  opacity: 1;
}

#screen-check:not(.conversation-mode)
.submit-scan {
  position: relative;

  width: 54px;
  height: 54px;

  min-height: 54px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid rgba(255,216,120,.30);
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #ffd15b 0%,
      #ffb728 43%,
      #f5a611 100%
    );

  color: #10151f;

  box-shadow:
    0 8px 25px rgba(255,178,24,.18),
    inset 0 1px 0 rgba(255,255,255,.45);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

#screen-check:not(.conversation-mode)
.submit-scan:hover {
  transform:
    translateY(-1px)
    scale(1.02);

  box-shadow:
    0 11px 31px rgba(255,178,24,.27),
    inset 0 1px 0 rgba(255,255,255,.55);
}

#screen-check:not(.conversation-mode)
.submit-scan:active {
  transform: scale(.97);
}

#screen-check:not(.conversation-mode)
.submit-scan span {
  display: none !important;
}

#screen-check:not(.conversation-mode)
.submit-scan::before {
  content: '↑';

  font-size: 25px;
  font-weight: 800;

  line-height: 1;
}


/* =========================================================
   EXAMPLES
   ========================================================= */

#screen-check:not(.conversation-mode) .examples {
  display: flex !important;

  justify-content: center;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  margin: 15px 0 0;
}

#screen-check:not(.conversation-mode)
.examples-label {
  margin-right: 3px;

  color: #64728a;

  font-size: 11px;
  font-weight: 600;
}

#screen-check:not(.conversation-mode)
.examples button {
  min-height: 31px;

  padding: 0 12px;

  border:
    1px solid rgba(58,79,113,.70);

  border-radius: 999px;

  background:
    rgba(10,20,38,.55);

  color: #8795ab;

  font-size: 11px;
  font-weight: 600;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);

  transition:
    border-color .18s ease,
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}

#screen-check:not(.conversation-mode)
.examples button:hover {
  transform: translateY(-1px);

  border-color:
    rgba(255,181,30,.40);

  background:
    rgba(255,181,30,.045);

  color: #d9e1ed;
}


/* =========================================================
   CHAT MODE
   ========================================================= */

#screen-check.conversation-mode
.check-v2-hero,

#screen-check.conversation-mode
.scan-box-v2,

#screen-check.conversation-mode
.trust-strip,

#screen-check.conversation-mode
.what-you-get-v2,

#screen-check.conversation-mode
.example-result-v2,

#screen-check.conversation-mode
.analysis-status,

#screen-check.conversation-mode
.verdict-message {
  display: none !important;
}

#screen-check.conversation-mode
.check-v2-layout,

#screen-check.conversation-mode
.check-v2-main {
  display: block;

  width: 100%;

  max-width: 900px;

  margin: 0 auto;
}

#screen-check.conversation-mode
.scan-followup {
  display: flex !important;

  flex-direction: column;

  width: 100%;

  max-width: 840px;

  min-height:
    calc(100vh - 145px);

  margin: 0 auto;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;
}

#screen-check.conversation-mode
.scan-followup-heading,

#screen-check.conversation-mode
.scan-followup-text,

#screen-check.conversation-mode
.followup-suggestions,

#screen-check.conversation-mode
.followup-limit {
  display: none !important;
}


/* CHAT LOG */

#screen-check.conversation-mode
.chat-log {
  width: 100%;

  max-height: none;

  overflow: visible;

  display: flex;

  flex-direction: column;

  gap: 32px;

  flex: 1;

  margin: 0;

  padding:
    34px 0
    115px;
}


/* hide old chat nodes if staging.js creates them */

#screen-check.conversation-mode
.chat-turn {
  display: none !important;
}


/* NEW MESSAGES */

.noytrix-message {
  width: 100%;

  animation:
    ntxMessageIn .35s ease both;
}

.user-message {
  display: flex;

  justify-content: flex-end;
}

.user-bubble {
  max-width:
    min(72%, 620px);

  padding:
    12px 17px;

  border:
    1px solid #2a3a55;

  border-radius:
    18px 18px 5px 18px;

  background:
    linear-gradient(
      145deg,
      #111d31,
      #101a2c
    );

  color: #e8edf6;

  font-size: 14px;

  line-height: 1.55;

  box-shadow:
    0 8px 25px rgba(0,0,0,.10);
}

.assistant-message {
  display: grid;

  grid-template-columns:
    31px minmax(0,1fr);

  gap: 15px;

  align-items: start;
}

.noytrix-chat-avatar {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,184,31,.18);

  border-radius: 9px;

  background:
    rgba(255,184,31,.035);
}

.noytrix-chat-avatar img {
  width: 23px;
  height: 23px;

  object-fit: contain;
}

.assistant-content {
  min-width: 0;

  padding-top: 3px;
}

.assistant-text {
  color: #dce4ef;

  font-size: 15px;

  line-height: 1.72;

  white-space: pre-wrap;
}


/* RESULT */

.result-content {
  max-width: 735px;
}

.result-top {
  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 14px;
}

.chat-risk {
  min-height: 28px;

  display: inline-flex;

  align-items: center;

  padding: 0 10px;

  border: 1px solid;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 750;
}

.chat-risk.critical,
.chat-risk.high {
  color: #ff727c;

  border-color:
    rgba(255,76,89,.34);

  background:
    rgba(255,76,89,.07);
}

.chat-risk.medium {
  color: #ffc04d;

  border-color:
    rgba(255,183,31,.30);

  background:
    rgba(255,183,31,.05);
}

.chat-risk.safe {
  color: #68dda0;

  border-color:
    rgba(53,216,132,.28);

  background:
    rgba(53,216,132,.05);
}

.chat-score {
  color: #8795aa;

  font-size: 12px;
}

.chat-score strong {
  margin-right: 2px;

  color: #edf2fa;

  font-size: 21px;
}

.chat-score.critical strong,
.chat-score.high strong {
  color: #ff666f;
}

.chat-score.medium strong {
  color: #ffbb32;
}

.chat-score.safe strong {
  color: #55db96;
}

.chat-score small {
  color: #6f7c91;

  font-size: 12px;
}

.result-summary {
  color: #e7ebf3;

  font-size: 16px;

  line-height: 1.68;
}

.chat-risk-list {
  display: grid;

  gap: 9px;

  margin-top: 19px;
}

.chat-risk-list > div {
  display: grid;

  grid-template-columns:
    8px minmax(0,1fr);

  gap: 10px;

  align-items: start;

  color: #a8b4c7;

  font-size: 13px;

  line-height: 1.55;
}

.risk-list-dot {
  width: 6px;
  height: 6px;

  margin-top: 7px;

  border-radius: 50%;
}

.risk-list-dot.critical,
.risk-list-dot.high {
  background: #ff5965;

  box-shadow:
    0 0 10px rgba(255,89,101,.35);
}

.risk-list-dot.medium {
  background: #ffb62d;
}

.risk-list-dot.safe {
  background: #48d58e;
}

.result-question-hint {
  margin-top: 22px;

  color: #66758d;

  font-size: 12px;

  line-height: 1.5;
}


/* THINKING */

.thinking-label {
  display: flex;

  align-items: center;

  gap: 9px;

  min-height: 30px;

  color: #8f9db2;

  font-size: 13px;
}

.thinking-dots {
  display: inline-flex;

  align-items: center;

  gap: 4px;
}

.thinking-dots i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #ffb51e;

  animation:
    ntxDot 1.15s ease-in-out infinite;
}

.thinking-dots i:nth-child(2) {
  animation-delay: .15s;
}

.thinking-dots i:nth-child(3) {
  animation-delay: .30s;
}


/* =========================================================
   CHAT COMPOSER — CHATGPT STYLE
   ========================================================= */

#screen-check.conversation-mode
.chat-composer {
  position: sticky;

  bottom: 18px;

  z-index: 10;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    48px;

  gap: 8px;

  align-items: end;

  margin-top: auto;

  padding:
    8px 9px
    8px 14px;

  border:
    1px solid transparent;

  border-radius: 20px;

  background:
    linear-gradient(
      #091427,
      #091427
    ) padding-box,

    linear-gradient(
      120deg,
      #2b3d5b,
      #3e5679,
      rgba(255,184,31,.30)
    ) border-box;

  box-shadow:
    0 -35px 65px #030916,
    0 18px 55px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.025);
}

#screen-check.conversation-mode
.chat-composer textarea {
  width: 100%;

  min-height: 48px;

  max-height: 160px;

  resize: none;

  overflow-y: auto;

  padding:
    13px 4px 10px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #edf1f7;

  font-family: inherit;

  font-size: 14px;

  line-height: 1.5;
}

#screen-check.conversation-mode
.chat-composer textarea::placeholder {
  color: #6f7d93;
}

#screen-check.conversation-mode
.chat-composer .primary-action {
  width: 48px;
  height: 48px;

  min-width: 48px;
  min-height: 48px;

  margin: 0;
  padding: 0;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #ffd05b,
      #ffb424
    );

  color: #10151e;

  font-size: 0;
}

#screen-check.conversation-mode
.chat-composer .primary-action::before {
  content: '↑';

  font-size: 22px;
  font-weight: 850;
}

#screen-check.conversation-mode:not(.has-result)
.chat-composer {
  display: none !important;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes ntxHeroReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ntxFadeUp {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ntxHeroGlow {
  from {
    opacity: .58;
    transform:
      translate(-50%, -50%)
      scale(.94);
  }

  to {
    opacity: .95;
    transform:
      translate(-50%, -50%)
      scale(1.08);
  }
}

@keyframes ntxInputSheen {
  0%,
  65% {
    left: -130px;
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  86% {
    left: calc(100% + 120px);
    opacity: 0;
  }

  100% {
    left: calc(100% + 120px);
    opacity: 0;
  }
}

@keyframes ntxMessageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ntxDot {
  0%,
  60%,
  100% {
    opacity: .25;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  #screen-check:not(.conversation-mode)
  .check-v2-hero {
    margin-top: 65px;
  }

  #screen-check:not(.conversation-mode)
  .check-v2-hero h2 {
    font-size: 38px;
  }

  #screen-check:not(.conversation-mode)
  .check-v2-hero > p:last-child {
    font-size: 14px;
  }

  #screen-check:not(.conversation-mode)
  .examples-label {
    width: 100%;

    text-align: center;
  }

  #screen-check.conversation-mode
  .scan-followup {
    min-height:
      calc(100vh - 120px);
  }

  .user-bubble {
    max-width: 88%;
  }

  .assistant-message {
    grid-template-columns:
      28px minmax(0,1fr);

    gap: 11px;
  }

  .noytrix-chat-avatar {
    width: 28px;
    height: 28px;
  }

  .noytrix-chat-avatar img {
    width: 21px;
    height: 21px;
  }

}


@media (prefers-reduced-motion: reduce) {

  #screen-check *,
  #screen-check *::before,
  #screen-check *::after {
    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;
  }

}



/* ==========================================================
   NOYTRIX CHAT V5 — LIVE ANALYSIS + TRACKING
   ========================================================== */


/* ===== LIVE ANALYSIS ===== */

.live-analysis-content {
  width: 100%;
  max-width: 730px;

  padding:
    18px 19px 17px;

  border:
    1px solid #243954;

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(10,22,42,.78),
      rgba(7,16,32,.72)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);
}

.live-analysis-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding-bottom: 15px;

  border-bottom:
    1px solid rgba(52,71,101,.55);
}

.live-analysis-title {
  display: flex;

  align-items: center;

  gap: 9px;
}

.live-analysis-title strong {
  color: #e8edf5;

  font-size: 13px;
  font-weight: 700;
}

.analysis-live-dot {
  width: 7px;
  height: 7px;

  flex:
    0 0 7px;

  border-radius: 50%;

  background: #ffb51f;

  box-shadow:
    0 0 14px
    rgba(255,181,31,.55);

  animation:
    ntxAnalysisPulse
    1.2s
    ease-in-out
    infinite;
}

.live-analysis-status {
  color: #7f8da5;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.analysis-object {
  display: grid;

  gap: 4px;

  margin-top: 14px;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(47,65,94,.55);

  border-radius: 9px;

  background:
    rgba(5,13,28,.47);
}

.analysis-object > span {
  color: #66748b;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .10em;

  font-weight: 700;
}

.analysis-object strong {
  overflow: hidden;

  color: #bcc7d9;

  font-size: 12px;

  font-weight: 550;

  white-space: nowrap;

  text-overflow: ellipsis;
}


/* ===== STAGES ===== */

.live-stage-list {
  display: grid;

  gap: 5px;

  margin-top: 15px;
}

.live-stage-item {
  position: relative;

  display: grid;

  grid-template-columns:
    21px minmax(0,1fr);

  gap: 9px;

  min-height: 41px;

  align-items: start;

  padding:
    8px 9px;

  border-radius: 8px;

  transition:
    background .22s ease,
    opacity .22s ease;
}

.live-stage-icon {
  position: relative;

  width: 18px;
  height: 18px;

  margin-top: 1px;

  display: grid;
  place-items: center;

  border:
    1px solid #35445d;

  border-radius: 50%;
}

.live-stage-icon::after {
  content: '';

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #65748c;
}

.live-stage-item strong {
  display: block;

  color: #8694aa;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.35;
}

.live-stage-item small {
  display: block;

  margin-top: 3px;

  color: #59677e;

  font-size: 10px;

  line-height: 1.35;
}


/* RUNNING */

.live-stage-item.stage-running {
  background:
    rgba(255,181,31,.035);
}

.live-stage-item.stage-running
.live-stage-icon {
  border-color:
    rgba(255,181,31,.60);

  box-shadow:
    0 0 12px
    rgba(255,181,31,.10);
}

.live-stage-item.stage-running
.live-stage-icon::after {
  background: #ffb51f;

  box-shadow:
    0 0 9px
    rgba(255,181,31,.75);

  animation:
    ntxAnalysisPulse
    .85s
    ease-in-out
    infinite;
}

.live-stage-item.stage-running strong {
  color: #e4e9f2;
}


/* DONE */

.live-stage-item.stage-done
.live-stage-icon,
.live-stage-item.stage-completed
.live-stage-icon,
.live-stage-item.stage-complete
.live-stage-icon {
  border-color:
    rgba(57,207,133,.45);

  background:
    rgba(57,207,133,.06);
}

.live-stage-item.stage-done
.live-stage-icon::after,
.live-stage-item.stage-completed
.live-stage-icon::after,
.live-stage-item.stage-complete
.live-stage-icon::after {
  content: '✓';

  width: auto;
  height: auto;

  background: none;

  color: #49db94;

  font-size: 10px;
  font-weight: 800;
}

.live-stage-item.stage-done strong,
.live-stage-item.stage-completed strong,
.live-stage-item.stage-complete strong {
  color: #aab6c8;
}


/* FAILED */

.live-stage-item.stage-failed
.live-stage-icon,
.live-stage-item.stage-error
.live-stage-icon {
  border-color:
    rgba(255,79,92,.45);
}

.live-stage-item.stage-failed
.live-stage-icon::after,
.live-stage-item.stage-error
.live-stage-icon::after {
  background: #ff5965;
}


/* COMPLETED CARD */

.live-analysis-message.analysis-complete
.analysis-live-dot {
  animation: none;

  background: #42d990;

  box-shadow:
    0 0 12px
    rgba(66,217,144,.35);
}

.live-analysis-message.analysis-complete
.live-analysis-status {
  color: #54c991;
}


/* ===== TRACKING BAR ===== */

.chat-tracking-bar {
  position: sticky;

  bottom: 91px;

  z-index: 8;

  width: 100%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin:
    0 0 9px;

  padding:
    10px 11px
    10px 13px;

  border:
    1px solid
    rgba(42,59,86,.92);

  border-radius: 14px;

  background:
    rgba(7,16,31,.96);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 -16px 40px
    rgba(3,9,22,.35),
    inset 0 1px 0
    rgba(255,255,255,.018);

  animation:
    ntxMessageIn
    .3s ease both;
}

.tracking-bar-left {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 11px;
}

.tracking-eye {
  width: 35px;
  height: 35px;

  flex:
    0 0 35px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,181,31,.18);

  border-radius: 10px;

  background:
    rgba(255,181,31,.035);

  color: #ffb51f;
}

.tracking-eye svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-bar-left strong {
  display: block;

  color: #dce3ee;

  font-size: 12px;
  font-weight: 650;
}

.tracking-bar-left small {
  display: block;

  margin-top: 2px;

  color: #66748b;

  font-size: 10px;
}

.chat-track-button {
  flex:
    0 0 auto;

  min-height: 37px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(255,183,31,.38);

  border-radius: 9px;

  background:
    rgba(255,181,31,.055);

  color: #ffbc35;

  font-size: 11px;
  font-weight: 700;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.chat-track-button:hover:not(:disabled) {
  transform:
    translateY(-1px);

  border-color:
    rgba(255,183,31,.65);

  background:
    rgba(255,181,31,.095);
}

.chat-track-button:disabled {
  cursor: default;

  border-color:
    rgba(56,201,129,.23);

  background:
    rgba(56,201,129,.04);

  color: #58cc92;
}


/* ===== AI TRACKING EXPLANATION ===== */

.tracking-ai-message
.assistant-text {
  max-width: 700px;

  color: #b8c3d3;

  font-size: 14px;

  line-height: 1.68;
}


/* Chat composer now sits below tracking */

#screen-check.conversation-mode
.chat-composer {
  bottom: 18px;
}


/* ===== ANIMATION ===== */

@keyframes ntxAnalysisPulse {

  0%,
  100% {
    opacity: .35;

    transform:
      scale(.82);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.08);
  }
}


/* ===== MOBILE ===== */

@media (max-width:760px) {

  .live-analysis-content {
    padding:
      15px 14px;
  }

  .chat-tracking-bar {
    bottom: 87px;

    padding:
      9px 10px;

    gap: 10px;
  }

  .tracking-bar-left small {
    display: none;
  }

  .chat-track-button {
    padding:
      0 10px;
  }

}


/* ==========================================================
   NOYTRIX CHAT V6 — RESULT ACTIONS
   ========================================================== */


.post-scan-actions {
  width: calc(100% - 46px);

  max-width: 700px;

  margin:
    -12px 0 3px
    46px;

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  animation:
    ntxMessageIn
    .3s ease both;
}


.post-scan-action {
  min-height: 36px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    0 12px;

  border:
    1px solid #2b3c58;

  border-radius:
    9px;

  background:
    rgba(8,18,35,.52);

  color: #8493aa;

  font-family: inherit;

  font-size: 11px;

  font-weight: 650;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}


.post-scan-action:hover:not(:disabled) {
  transform:
    translateY(-1px);

  color: #d4dce8;

  border-color:
    #415775;

  background:
    rgba(15,29,52,.72);
}


.post-action-icon {
  color: #ffb51f;

  font-size: 13px;
}


.report-action {
  border-color:
    rgba(255,181,31,.20);
}


.report-action:hover:not(:disabled) {
  border-color:
    rgba(255,181,31,.42);

  background:
    rgba(255,181,31,.035);

  color: #dce3ed;
}


.tracking-action.active {
  border-color:
    rgba(66,211,143,.22);

  background:
    rgba(66,211,143,.035);

  color: #55ca91;
}


.post-scan-action:disabled {
  cursor: default;

  opacity: .75;
}


/* AI message below actions */

.post-scan-ai-message {
  margin-top: 3px;
}


.post-scan-ai-message
.assistant-text {
  max-width: 690px;

  color: #9fabbd;

  font-size: 13px;

  line-height: 1.7;
}


/* FREE VERDICT */

.result-summary {
  max-width: 710px;

  color: #e2e8f1 !important;

  font-size: 15px !important;

  line-height: 1.72 !important;
}


/* FULL PRO REPORT */

.full-pro-report
.assistant-content {
  max-width: 730px;

  padding:
    17px 18px;

  border:
    1px solid
    rgba(255,181,31,.13);

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(15,27,48,.55),
      rgba(7,17,33,.40)
    );
}


.full-pro-report
.assistant-text {
  color: #cbd4e1;

  font-size: 14px;

  line-height: 1.72;
}


/*
 Old V5 tracking bar is no longer used.
 We now show two quiet actions directly
 under the verdict.
*/

#chatTrackingBar {
  display: none !important;
}


@media(max-width:760px) {

  .post-scan-actions {
    width:
      calc(100% - 39px);

    margin-left:
      39px;
  }

  .post-scan-action {
    padding:
      0 10px;
  }

}


/* === NOYTRIX RESULT V8 === */


/* FREE VERDICT */

#screen-check
.result-message
.result-summary {
  max-width: 740px;

  color: #e2e8f1;

  font-size: 15px;

  line-height: 1.78;

  letter-spacing: -.006em;
}


/* ACTIONS DIRECTLY BELOW VERDICT */

.result-actions-v8 {
  width: calc(100% - 46px);

  max-width: 730px;

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  margin:
    -10px 0 2px
    46px;

  animation:
    ntxMessageIn
    .3s ease both;
}


.result-action-v8 {
  min-height: 36px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    0 12px;

  border:
    1px solid #2b3d59;

  border-radius:
    10px;

  background:
    rgba(8,18,35,.46);

  color: #8997ac;

  font-family: inherit;

  cursor: pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}


.result-action-v8 b {
  color: inherit;

  font-size: 11px;

  font-weight: 650;
}


.result-action-v8 > span {
  color: #ffb51f;

  font-size: 12px;
}


.result-action-v8 em {
  padding:
    2px 5px;

  border-radius: 5px;

  background:
    rgba(255,181,31,.075);

  color: #d4a037;

  font-size: 8px;

  font-weight: 800;

  font-style: normal;

  letter-spacing: .08em;
}


.result-action-v8:hover:not(:disabled) {
  transform:
    translateY(-1px);

  border-color:
    #445b7b;

  background:
    rgba(14,28,50,.68);

  color: #d7dfea;
}


.report-v8 {
  border-color:
    rgba(255,181,31,.19);
}


.report-v8:hover:not(:disabled) {
  border-color:
    rgba(255,181,31,.43);

  background:
    rgba(255,181,31,.035);
}


.tracking-v8.is-active {
  color: #59cf96;

  border-color:
    rgba(65,211,141,.27);

  background:
    rgba(65,211,141,.035);
}


/*
 Old V5/V6 bar CSS can stay.
 New buttons use another ID.
 */

#resultActionBarV8 {
  display: flex !important;
}


/* AI MESSAGE AFTER ACTIONS */

.tracking-ai-message
.assistant-text {
  max-width: 720px;

  color: #aeb9c9;

  font-size: 13px;

  line-height: 1.72;
}


@media(max-width:760px) {

  .result-actions-v8 {
    width:
      calc(100% - 39px);

    margin-left:
      39px;
  }

}



/* === NOYTRIX CHAT UI V9 === */


/* ==========================================================
   SMALLER SIDEBAR
   ========================================================== */

.app-shell {
  grid-template-columns:
    220px minmax(0,1fr);
}

.sidebar {
  width: 220px;

  padding:
    22px 14px
    16px;

  background:
    linear-gradient(
      180deg,
      #040a16 0%,
      #030914 100%
    );
}


.brand {
  min-height: 38px;

  padding:
    0 12px;

  font-size: 18px;
}


.brand img {
  width: 29px;
  height: 29px;
}


.new-check {
  min-height: 47px;

  margin-top: 22px;

  border-radius: 11px;

  font-size: 13px;

  box-shadow:
    0 10px 28px
    rgba(255,178,25,.12);
}


.new-check span {
  font-size: 20px;
}


/* ==========================================================
   CHATS LIKE CHATGPT
   ========================================================== */

.sidebar-chats-v9 {
  margin:
    19px 0 8px;
}


.sidebar-chats-heading-v9 {
  display: flex;

  align-items: center;

  min-height: 25px;

  padding:
    0 9px;

  color: #56667f;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.sidebar-chat-list-v9 {
  max-height: 205px;

  overflow-y: auto;

  padding-right: 2px;

  scrollbar-width: thin;

  scrollbar-color:
    #263853 transparent;
}


.sidebar-chat-row-v9 {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    24px;

  align-items: center;

  margin-bottom: 2px;

  border-radius: 8px;

  transition:
    background .16s ease;
}


.sidebar-chat-row-v9:hover {
  background:
    rgba(255,255,255,.025);
}


.sidebar-chat-row-v9.active {
  background:
    linear-gradient(
      90deg,
      rgba(20,45,91,.68),
      rgba(11,29,59,.55)
    );
}


.sidebar-chat-open-v9 {
  min-width: 0;

  min-height: 39px;

  display: grid;

  grid-template-columns:
    9px minmax(0,1fr);

  gap: 8px;

  align-items: center;

  padding:
    4px 3px
    4px 9px;

  border: 0;

  background: transparent;

  text-align: left;
}


.sidebar-chat-risk-v9 {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}


.sidebar-chat-risk-v9.safe {
  background: #47d593;

  box-shadow:
    0 0 8px
    rgba(71,213,147,.30);
}


.sidebar-chat-risk-v9.medium {
  background: #ffb624;
}


.sidebar-chat-risk-v9.high,
.sidebar-chat-risk-v9.critical {
  background: #ff5664;

  box-shadow:
    0 0 8px
    rgba(255,86,100,.30);
}


.sidebar-chat-text-v9 {
  min-width: 0;
}


.sidebar-chat-text-v9 strong {
  display: block;

  overflow: hidden;

  color: #aeb9cc;

  font-size: 11px;

  font-weight: 560;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.sidebar-chat-text-v9 small {
  display: block;

  margin-top: 2px;

  color: #536178;

  font-size: 8px;
}


.sidebar-chat-row-v9.active
.sidebar-chat-text-v9 strong {
  color: #e2e8f2;
}


.sidebar-chat-delete-v9 {
  width: 22px;
  height: 22px;

  opacity: 0;

  display: grid;
  place-items: center;

  border: 0;

  border-radius: 6px;

  background: transparent;

  color: #66758d;

  font-size: 14px;

  transition:
    opacity .15s ease,
    background .15s ease,
    color .15s ease;
}


.sidebar-chat-row-v9:hover
.sidebar-chat-delete-v9 {
  opacity: 1;
}


.sidebar-chat-delete-v9:hover {
  background:
    rgba(255,255,255,.05);

  color: #d8e0eb;
}


.sidebar-chats-empty-v9 {
  padding:
    7px 10px
    12px;

  color: #46556d;

  font-size: 9px;

  line-height: 1.45;
}


/* ==========================================================
   SMALLER NAVIGATION
   ========================================================== */

.workspace-nav {
  margin:
    9px 0 10px;

  gap: 2px;
}


.workspace-nav .nav-item,
.sidebar-bottom .nav-item {
  min-height: 41px;

  padding:
    0 8px;

  gap: 9px;

  border-radius: 9px;

  color: #8694ac;

  font-size: 12px;
}


.nav-icon {
  width: 29px !important;
  height: 29px !important;

  flex:
    0 0 29px !important;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(49,68,99,.58);

  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      rgba(16,29,51,.80),
      rgba(7,17,34,.80)
    );

  color: #8fa0ba !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

  transition:
    .18s ease;
}


.nav-icon svg {
  width: 16px;
  height: 16px;

  stroke-width: 1.65;
}


.workspace-nav
.nav-item:hover
.nav-icon,

.sidebar-bottom
.nav-item:hover
.nav-icon {
  border-color:
    rgba(255,181,31,.22);

  color: #c3ccda !important;
}


.workspace-nav
.nav-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(15,38,82,.90),
      rgba(8,25,56,.78)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(49,91,164,.62);
}


.workspace-nav
.nav-item.active
.nav-icon {
  border-color:
    rgba(255,183,31,.40);

  background:
    linear-gradient(
      145deg,
      rgba(255,183,31,.14),
      rgba(255,183,31,.035)
    );

  color: #ffbb30 !important;

  box-shadow:
    0 0 15px
    rgba(255,181,31,.08),
    inset 0 1px 0
    rgba(255,255,255,.05);
}


/* ==========================================================
   PREMIUM RESULT ACTIONS
   ========================================================== */

.result-actions-v8,
.result-actions-v9 {
  gap: 11px !important;

  margin-top:
    -4px !important;

  margin-bottom:
    5px !important;
}


.result-action-v8 {
  position: relative;

  overflow: hidden;

  min-height: 43px !important;

  padding:
    0 16px !important;

  border-radius:
    12px !important;

  font-size:
    12px !important;

  font-weight:
    700;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}


.result-action-v8 b {
  font-size:
    12px !important;

  font-weight:
    720 !important;
}


.result-action-v8::before {
  content: '';

  position: absolute;

  top: -80px;
  left: -70px;

  width: 38px;
  height: 190px;

  transform:
    rotate(30deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.13),
      transparent
    );

  transition:
    left .5s ease;
}


.result-action-v8:hover::before {
  left:
    calc(100% + 50px);
}


/* FULL REPORT = MAIN CTA */

.report-v8 {
  border:
    1px solid
    rgba(255,218,116,.42)
    !important;

  background:
    linear-gradient(
      135deg,
      #ffd05b 0%,
      #ffb726 47%,
      #f5a511 100%
    ) !important;

  color:
    #10151f !important;

  box-shadow:
    0 9px 28px
    rgba(255,178,24,.20),
    inset 0 1px 0
    rgba(255,255,255,.45) !important;
}


.report-v8 span,
.report-v8 b {
  color:
    #10151f !important;
}


.report-v8 em {
  padding:
    3px 6px !important;

  background:
    rgba(12,18,28,.14)
    !important;

  color:
    #111721 !important;
}


.report-v8:hover:not(:disabled) {
  transform:
    translateY(-2px)
    !important;

  box-shadow:
    0 13px 34px
    rgba(255,178,24,.29),
    inset 0 1px 0
    rgba(255,255,255,.55)
    !important;
}


/* TRACKING = SECONDARY PREMIUM CTA */

.tracking-v8 {
  border:
    1px solid
    rgba(58,94,151,.92)
    !important;

  background:
    linear-gradient(
      145deg,
      #0e2141,
      #09182f
    ) !important;

  color:
    #d4ddeb !important;

  box-shadow:
    0 9px 26px
    rgba(0,29,76,.22),
    inset 0 1px 0
    rgba(255,255,255,.035)
    !important;
}


.tracking-v8 > span {
  color:
    #ffba2e !important;
}


.tracking-v8:hover:not(:disabled) {
  transform:
    translateY(-2px)
    !important;

  border-color:
    rgba(255,184,35,.54)
    !important;

  box-shadow:
    0 12px 30px
    rgba(0,30,80,.32),
    0 0 22px
    rgba(255,181,31,.06)
    !important;
}


.tracking-v8.is-active {
  border-color:
    rgba(63,215,141,.44)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(26,73,59,.72),
      rgba(8,38,35,.75)
    ) !important;

  color:
    #65dda1 !important;
}


/* ==========================================================
   RESTORED CHAT
   ========================================================== */

.v9-thinking-message
.assistant-text {
  color:
    #74839b;

  font-size:
    12px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .app-shell {
    display: block;
  }

  .sidebar {
    width: 100%;
  }

  .sidebar-chats-v9 {
    display: none;
  }

}



/* ==========================================================
   NOYTRIX SIDEBAR V10 — CHATGPT STRUCTURE
   ========================================================== */


/*
   STRUCTURE:

   LOGO
   NEW CHECK
   MAIN MENU
   CHATS
   SAVED CONVERSATIONS
   SETTINGS / ACCOUNT
*/


.sidebar {
  height: 100vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  padding:
    22px 14px 14px;
}


/* ------------------------------------------
   ORDER
   ------------------------------------------ */

.sidebar .brand {
  order: 1;
}

.sidebar .new-check {
  order: 2;
}

.sidebar .workspace-nav {
  order: 3;
}

.sidebar .sidebar-chats-v9 {
  order: 4;
}

.sidebar .session-list {
  order: 5;
}

.sidebar .sidebar-bottom {
  order: 6;
}


/* ==========================================================
   LOGO
   ========================================================== */

.sidebar .brand {
  flex: 0 0 auto;

  min-height: 43px;

  padding:
    0 9px;

  margin-bottom: 12px;
}


/* ==========================================================
   NEW CHECK
   ========================================================== */

.sidebar .new-check {
  flex: 0 0 auto;

  width: 100%;

  min-height: 46px;

  margin:
    5px 0
    16px;

  border-radius: 10px;

  font-size: 12px;

  font-weight: 750;
}


/* ==========================================================
   MAIN MENU — ABOVE CHATS
   ========================================================== */

.sidebar .workspace-nav {
  flex: 0 0 auto;

  width: 100%;

  margin:
    0 0 12px;

  padding-bottom: 12px;

  display: flex;
  flex-direction: column;

  gap: 2px;

  border-bottom:
    1px solid
    rgba(52,68,94,.42);
}


.sidebar .workspace-nav .nav-item {
  min-height: 38px;

  padding:
    0 8px;

  border-radius: 8px;

  gap: 9px;

  font-size: 11px;

  font-weight: 600;
}


.sidebar .workspace-nav .nav-icon {
  width: 27px !important;
  height: 27px !important;

  flex:
    0 0 27px !important;

  border-radius: 7px;
}


.sidebar .workspace-nav .nav-icon svg {
  width: 15px;
  height: 15px;
}


/* active menu */

.sidebar
.workspace-nav
.nav-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(18,44,91,.83),
      rgba(9,27,59,.66)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(48,88,154,.55);
}


/* ==========================================================
   CHATS AREA
   ========================================================== */

.sidebar-chats-v9 {
  flex: 1 1 auto;

  min-height: 0;

  display: flex;
  flex-direction: column;

  margin: 0;

  padding-top: 2px;

  overflow: hidden;
}


/* "Chats" title */

.sidebar-chats-heading-v9 {
  flex: 0 0 auto;

  min-height: 29px;

  padding:
    0 9px;

  display: flex;
  align-items: center;

  color: #68768d;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .10em;

  text-transform: uppercase;
}


/* chat list = scrollable */

.sidebar-chat-list-v9 {
  flex: 1 1 auto;

  min-height: 0;

  max-height: none !important;

  overflow-y: auto;

  padding:
    2px 3px
    10px 0;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(78,96,126,.55)
    transparent;
}


.sidebar-chat-list-v9::-webkit-scrollbar {
  width: 5px;
}


.sidebar-chat-list-v9::-webkit-scrollbar-track {
  background: transparent;
}


.sidebar-chat-list-v9::-webkit-scrollbar-thumb {
  border-radius: 20px;

  background:
    rgba(74,91,119,.48);
}


/* ==========================================================
   CHAT ROW — CHATGPT STYLE
   ========================================================== */

.sidebar-chat-row-v9 {
  width: 100%;

  min-height: 37px;

  margin-bottom: 1px;

  border-radius: 8px;
}


.sidebar-chat-open-v9 {
  min-height: 37px;

  grid-template-columns:
    18px minmax(0,1fr);

  gap: 5px;

  padding:
    3px 2px
    3px 7px;
}


/*
 Chat bubble icon instead of tiny dot.
 Risk still indicated by color.
*/

.sidebar-chat-risk-v9 {
  position: relative;

  width: 17px;
  height: 17px;

  border:
    1px solid
    currentColor;

  border-radius: 50%;

  background: transparent !important;

  box-shadow: none !important;
}


.sidebar-chat-risk-v9::before {
  content: '';

  position: absolute;

  left: 3px;
  right: 3px;

  top: 5px;

  height: 1px;

  background:
    currentColor;

  opacity: .8;
}


.sidebar-chat-risk-v9::after {
  content: '';

  position: absolute;

  left: 4px;
  bottom: -2px;

  width: 5px;
  height: 5px;

  border-left:
    1px solid currentColor;

  transform:
    rotate(-28deg);
}


.sidebar-chat-risk-v9.safe {
  color: #48d894;
}


.sidebar-chat-risk-v9.medium {
  color: #ffb82d;
}


.sidebar-chat-risk-v9.high,
.sidebar-chat-risk-v9.critical {
  color: #ff5966;
}


/* chat text */

.sidebar-chat-text-v9 strong {
  max-width: 138px;

  color: #aeb8ca;

  font-size: 10.5px;

  font-weight: 540;
}


.sidebar-chat-text-v9 small {
  display: none;
}


.sidebar-chat-row-v9:hover {
  background:
    rgba(255,255,255,.035);
}


.sidebar-chat-row-v9.active {
  background:
    rgba(27,47,78,.66);
}


.sidebar-chat-row-v9.active
.sidebar-chat-text-v9 strong {
  color: #eef2f8;
}


/* delete button like ChatGPT hidden until hover */

.sidebar-chat-delete-v9 {
  opacity: 0;

  width: 22px;
  height: 22px;

  border-radius: 6px;

  color: #738199;
}


.sidebar-chat-row-v9:hover
.sidebar-chat-delete-v9 {
  opacity: 1;
}


/* ==========================================================
   EMPTY CHATS
   ========================================================== */

.sidebar-chats-empty-v9 {
  padding:
    8px 8px;

  color: #46536a;

  font-size: 9px;

  line-height: 1.45;
}


/* ==========================================================
   SETTINGS — ALWAYS BOTTOM
   ========================================================== */

.sidebar-bottom {
  flex: 0 0 auto;

  margin-top: 0 !important;

  padding-top: 11px;

  border-top:
    1px solid
    rgba(52,68,94,.42);
}


.sidebar-bottom .nav-item {
  min-height: 38px;

  padding:
    0 8px;

  border-radius: 8px;

  gap: 9px;

  font-size: 11px;
}


/* ==========================================================
   REMOVE DEAD SPACE
   ========================================================== */

.sidebar .v2-hidden-required {
  display: none !important;
}


/* ==========================================================
   DESKTOP SIZE
   ========================================================== */

@media(min-width:761px) {

  .app-shell {
    grid-template-columns:
      224px minmax(0,1fr);
  }

  .sidebar {
    width: 224px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .sidebar {
    height: auto;

    overflow: visible;
  }

}


/* ==========================================================
   NOYTRIX MENU TUNE + PREMIUM SIGN IN
   ========================================================== */


/* чуть шире sidebar */

@media(min-width:761px) {

  .app-shell {
    grid-template-columns:
      236px minmax(0,1fr) !important;
  }

  .sidebar {
    width: 236px !important;
  }

}


/* new check */

.sidebar .new-check {
  min-height: 48px !important;

  border-radius: 12px !important;

  font-size: 13px !important;

  font-weight: 760 !important;
}


/* menu чуть крупнее */

.sidebar .workspace-nav .nav-item,
.sidebar .sidebar-bottom .nav-item {
  min-height: 41px !important;

  padding: 0 9px !important;

  gap: 10px !important;

  font-size: 12px !important;

  font-weight: 620 !important;
}


.sidebar .workspace-nav .nav-icon,
.sidebar .sidebar-bottom .nav-icon {
  width: 29px !important;
  height: 29px !important;

  flex: 0 0 29px !important;

  border-radius: 8px !important;
}


.sidebar .workspace-nav .nav-icon svg,
.sidebar .sidebar-bottom .nav-icon svg {
  width: 16px !important;
  height: 16px !important;
}


/* chats чуть читаемее */

.sidebar-chat-text-v9 strong {
  max-width: 150px !important;

  font-size: 11px !important;

  font-weight: 560 !important;
}


.sidebar-chats-heading-v9 {
  font-size: 9.5px !important;
}


/* premium sign in */

#headerAccountButton {
  position: relative;

  overflow: hidden;

  min-height: 44px !important;

  padding: 0 18px !important;

  border:
    1px solid
    rgba(255,193,61,.42) !important;

  border-radius: 12px !important;

  background:
    linear-gradient(
      135deg,
      rgba(18,34,63,.96) 0%,
      rgba(11,24,47,.96) 55%,
      rgba(8,18,35,.98) 100%
    ) !important;

  color: #f4f7fb !important;

  font-size: 14px !important;

  font-weight: 760 !important;

  letter-spacing: -.01em;

  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,184,35,.06) inset,
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}


#headerAccountButton::before {
  content: '';

  position: absolute;

  top: -40px;
  left: -75px;

  width: 34px;
  height: 150px;

  transform: rotate(28deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.14),
      transparent
    );

  transition: left .55s ease;
}


#headerAccountButton:hover::before {
  left: calc(100% + 55px);
}


#headerAccountButton:hover {
  transform: translateY(-1px) !important;

  border-color:
    rgba(255,193,61,.62) !important;

  background:
    linear-gradient(
      135deg,
      rgba(23,42,76,.98) 0%,
      rgba(14,31,59,.98) 55%,
      rgba(9,21,40,.99) 100%
    ) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.28),
    0 0 22px rgba(255,181,31,.08),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}


#headerAccountButton:active {
  transform: translateY(0) !important;
}


/* ==========================================================
   NOYTRIX PREMIUM HERO V11
   ========================================================== */

#screen-check:not(.conversation-mode)
.check-v2-hero {
  position: relative;

  isolation: isolate;
}


/* большая мягкая подсветка за заголовком */

#screen-check:not(.conversation-mode)
.check-v2-hero::after {
  content: '';

  position: absolute;

  z-index: -1;

  top: 42%;
  left: 50%;

  width: 720px;
  height: 260px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(31,68,140,.20) 0%,
      rgba(17,42,91,.10) 42%,
      transparent 72%
    );

  filter: blur(32px);

  pointer-events: none;
}


/* главный headline */

#screen-check:not(.conversation-mode)
.check-v2-hero h2 {
  max-width: 940px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  text-transform: uppercase;

  font-size:
    clamp(
      45px,
      4.15vw,
      66px
    ) !important;

  line-height:
    1.03 !important;

  letter-spacing:
    -.048em !important;

  font-weight:
    850 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9fc 30%,
      #dde5f0 66%,
      #b7c3d4 100%
    );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  text-shadow:
    0 3px 0 rgba(255,255,255,.025),
    0 9px 18px rgba(0,0,0,.30),
    0 22px 45px rgba(0,0,0,.34);

  filter:
    drop-shadow(
      0 8px 20px
      rgba(0,0,0,.32)
    );

  animation:
    ntxHeroPremiumEntrance
    .8s
    cubic-bezier(.18,.8,.22,1)
    both;
}


/* жёлтые слова */

#screen-check:not(.conversation-mode)
.check-v2-hero
.hero-accent {
  position: relative;

  display: inline;

  background:
    linear-gradient(
      180deg,
      #ffe17d 0%,
      #ffc13a 43%,
      #f7a817 100%
    );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  text-shadow: none;

  filter:
    drop-shadow(
      0 3px 10px
      rgba(255,181,31,.16)
    )
    drop-shadow(
      0 12px 28px
      rgba(255,159,13,.11)
    );
}


/*
 небольшое золотое свечение,
 не превращаем текст в неон
*/

#screen-check:not(.conversation-mode)
.check-v2-hero h2:hover
.hero-accent {
  filter:
    drop-shadow(
      0 3px 12px
      rgba(255,190,48,.25)
    )
    drop-shadow(
      0 16px 34px
      rgba(255,158,12,.16)
    );
}


/* верхняя маленькая плашка */

#screen-check:not(.conversation-mode)
.check-v2-hero .eyebrow {
  border-color:
    rgba(255,185,38,.25)
    !important;

  color:
    #ffc13c !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,181,31,.025),
      rgba(255,181,31,.07),
      rgba(255,181,31,.025)
    ) !important;

  box-shadow:
    0 7px 24px
    rgba(0,0,0,.14),
    inset 0 1px 0
    rgba(255,255,255,.04)
    !important;
}


/* subtitle немного выразительнее */

#screen-check:not(.conversation-mode)
.check-v2-hero > p:last-child {
  color:
    #8998b0 !important;

  text-shadow:
    0 4px 16px
    rgba(0,0,0,.36);
}


/* вход */

@keyframes ntxHeroPremiumEntrance {

  0% {
    opacity: 0;

    transform:
      translateY(16px)
      scale(.985);

    filter:
      blur(4px);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter:
      blur(0);
  }

}


@media(max-width:760px) {

  #screen-check:not(.conversation-mode)
  .check-v2-hero h2 {
    font-size:
      38px !important;

    line-height:
      1.06 !important;
  }

}


/* ==========================================================
   NOYTRIX PREMIUM LANGUAGE V12
   ========================================================== */


/* убираем старый System operational
   и старые EN/RU/UA */

.header-left-v12-hidden {
  display: none !important;
}


/* header справа */

.workspace-header {
  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 10px !important;
}


/* ==========================================================
   LANGUAGE WRAPPER
   ========================================================== */

.premium-language-v12 {
  position: relative;

  z-index: 100;
}


/* ==========================================================
   MAIN LANGUAGE BUTTON
   ========================================================== */

.language-toggle-v12 {
  position: relative;

  min-width: 88px;
  height: 46px;

  display: grid;

  grid-template-columns:
    23px 1fr 17px;

  align-items: center;

  gap: 6px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(62,83,116,.90);

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(12,26,49,.96),
      rgba(7,17,34,.98)
    );

  color:
    #dce4ef;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.18),
    inset 0 1px 0
    rgba(255,255,255,.035);

  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}


.language-toggle-v12:hover,
.premium-language-v12.open
.language-toggle-v12 {
  transform:
    translateY(-1px);

  border-color:
    rgba(255,185,39,.48);

  background:
    linear-gradient(
      145deg,
      rgba(18,36,65,.98),
      rgba(9,22,42,.98)
    );

  box-shadow:
    0 12px 31px
    rgba(0,0,0,.24),
    0 0 20px
    rgba(255,181,31,.05),
    inset 0 1px 0
    rgba(255,255,255,.05);
}


/* globe */

.language-globe-v12 {
  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  color:
    #ffba2e;

  background:
    rgba(255,181,31,.055);
}


.language-globe-v12 svg {
  width: 15px;
  height: 15px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.45;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* EN */

.language-current-v12 {
  text-align: center;

  font-size:
    12px;

  font-weight:
    750;

  letter-spacing:
    .04em;
}


/* arrow */

.language-chevron-v12 {
  display: grid;
  place-items: center;

  color:
    #71819a;

  transition:
    transform .2s ease;
}


.language-chevron-v12 svg {
  width: 15px;
  height: 15px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.premium-language-v12.open
.language-chevron-v12 {
  transform:
    rotate(180deg);
}


/* ==========================================================
   DROPDOWN
   ========================================================== */

.language-menu-v12 {
  position: absolute;

  top:
    calc(100% + 8px);

  right: 0;

  width: 205px;

  padding: 7px;

  border:
    1px solid
    rgba(53,75,109,.92);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(10,22,42,.985),
      rgba(5,14,29,.99)
    );

  box-shadow:
    0 22px 65px
    rgba(0,0,0,.43),
    0 0 0 1px
    rgba(255,255,255,.015)
    inset,
    inset 0 1px 0
    rgba(255,255,255,.045);

  backdrop-filter:
    blur(22px);

  animation:
    languageMenuOpenV12
    .18s ease both;
}


.language-menu-v12[hidden] {
  display: none !important;
}


/* ==========================================================
   OPTION
   ========================================================== */

.language-option-v12 {
  width: 100%;

  min-height: 45px;

  display: grid;

  grid-template-columns:
    35px minmax(0,1fr) 20px;

  align-items: center;

  gap: 8px;

  padding:
    0 9px;

  border: 0;

  border-radius:
    9px;

  background:
    transparent;

  color:
    #aeb9ca;

  cursor: pointer;

  text-align: left;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}


.language-option-v12:hover {
  background:
    rgba(255,255,255,.045);

  color:
    #eef2f7;
}


.language-option-v12.active {
  background:
    linear-gradient(
      90deg,
      rgba(255,181,31,.11),
      rgba(255,181,31,.025)
    );

  color:
    #f1f4f8;
}


/* language code */

.language-code-v12 {
  height: 25px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(60,83,117,.78);

  border-radius:
    7px;

  background:
    rgba(14,28,49,.8);

  color:
    #8fa0b7;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .05em;
}


.language-option-v12.active
.language-code-v12 {
  border-color:
    rgba(255,183,31,.36);

  background:
    rgba(255,181,31,.08);

  color:
    #ffbd38;
}


/* full name */

.language-name-v12 {
  font-size:
    12px;

  font-weight:
    580;
}


/* active check */

.language-check-v12 {
  text-align:
    center;

  color:
    #ffba2e;

  font-size:
    12px;

  font-weight:
    800;
}


/* ==========================================================
   SIGN IN NEXT TO LANGUAGE
   ========================================================== */

#headerAccountButton {
  min-width:
    103px !important;

  height:
    46px !important;

  min-height:
    46px !important;
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes languageMenuOpenV12 {

  from {
    opacity: 0;

    transform:
      translateY(-5px)
      scale(.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .workspace-header {
    gap: 6px !important;
  }


  .language-toggle-v12 {
    min-width: 76px;

    padding:
      0 9px;
  }


  .language-menu-v12 {
    width: 190px;
  }


  #headerAccountButton {
    min-width:
      88px !important;

    padding:
      0 12px !important;
  }

}


/* ==========================================================
   NOYTRIX APP VIEWPORT V15
   One application = one viewport
   ========================================================== */


/* браузерная страница больше никогда не скроллится */

html,
body {
  width: 100%;
  height: 100%;
  min-height: 0 !important;

  overflow: hidden !important;
}


/* приложение строго в экран */

.app-shell {
  width: 100%;
  height: 100vh;
  height: 100dvh;

  min-height: 0 !important;
  max-height: 100vh;
  max-height: 100dvh;

  overflow: hidden !important;
}


/* sidebar тоже никогда не двигает страницу */

.sidebar {
  position: relative !important;

  top: auto !important;

  height: 100vh !important;
  height: 100dvh !important;

  min-height: 0 !important;

  overflow: hidden !important;
}


/* main area */

.workspace {
  width: 100%;

  height: 100vh;
  height: 100dvh;

  min-width: 0;
  min-height: 0 !important;

  max-width: 1650px;
  max-height: 100vh;
  max-height: 100dvh;

  display: flex;
  flex-direction: column;

  margin: 0 auto !important;

  padding:
    16px
    clamp(20px, 2.2vw, 38px)
    16px !important;

  overflow: hidden !important;
}


/* верхняя строка EN + Sign in */

.workspace-header {
  flex: 0 0 58px;

  min-height: 58px;

  margin: 0 0 10px !important;

  align-items: center !important;
}


/*
   Любая страница занимает ровно оставшееся пространство.
   Старые страницы при необходимости могут прокручиваться
   ВНУТРИ себя, но браузер не двигается.
*/

.screen.active {
  flex: 1 1 auto;

  width: 100%;

  min-width: 0;
  min-height: 0;

  overflow: auto;

  scrollbar-width: none;
}


.screen.active::-webkit-scrollbar {
  display: none;
}


/* Tracking вообще не должен скроллить весь экран */

#screen-tracking.active {
  overflow: hidden !important;
}


/* Sidebar chats остаются внутренним списком */

.sidebar-chat-list-v9 {
  min-height: 0;

  overflow-y: auto !important;

  overscroll-behavior: contain;
}


@media(max-width:760px) {

  /*
    На телефоне физически невозможно вместить
    все desktop-экраны без прокрутки.
  */

  html,
  body {
    overflow: auto !important;
  }

  .app-shell,
  .workspace {
    height: auto;
    max-height: none;
  }

}


/* ==========================================================
   NOYTRIX CHECK POLISH V36
   ONLY MAIN CHECK SCREEN
   ========================================================== */


/* ==========================================================
   HERO — slightly higher
   ========================================================== */

#screen-check
.ntx-check-hero-v36 {
  transform:
    translateY(-18px) !important;

  transition:
    transform .35s ease !important;
}


/* ==========================================================
   INPUT — slightly bigger / more premium
   ========================================================== */

#screen-check
.ntx-check-input-v36 {
  min-height:
    66px !important;

  height:
    66px !important;

  padding-left:
    24px !important;

  padding-right:
    78px !important;

  font-size:
    15px !important;

  font-weight:
    650 !important;

  letter-spacing:
    -.01em !important;
}


/*
   Make input wrapper itself slightly taller too.
*/

#screen-check
.ntx-check-input-v36:where(input,textarea) {
  border-radius:
    18px !important;
}


/* ==========================================================
   FREE CHECK STATUS
   ========================================================== */

#screen-check
.ntx-free-row-v36 {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    13px !important;

  min-height:
    32px !important;

  margin-top:
    14px !important;

  padding:
    5px 11px !important;

  border:
    1px solid
    rgba(65,91,129,.18) !important;

  border-radius:
    999px !important;

  background:
    rgba(8,19,39,.34) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.018) !important;
}


/* Free check used */

#screen-check
.ntx-free-check-v36 {
  position:
    relative !important;

  color:
    #718099 !important;

  font-size:
    11px !important;

  font-weight:
    750 !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;
}


#screen-check
.ntx-free-check-v36::before {
  content: '';

  display:
    inline-block;

  width:
    6px;

  height:
    6px;

  margin-right:
    8px;

  border-radius:
    50%;

  background:
    #ffb627;

  box-shadow:
    0 0 10px
    rgba(255,182,39,.38);
}


/* Create account */

#screen-check
.ntx-create-account-v36 {
  color:
    #ffba2d !important;

  font-size:
    11px !important;

  font-weight:
    850 !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;

  cursor:
    pointer !important;

  transition:
    color .18s ease,
    text-shadow .18s ease !important;
}


#screen-check
.ntx-create-account-v36:hover {
  color:
    #ffd15d !important;

  text-shadow:
    0 0 16px
    rgba(255,185,40,.20) !important;
}


/* ==========================================================
   YOUR CURRENT DESKTOP HEIGHT
   ========================================================== */

@media (
  min-width:761px
) and (
  max-height:950px
) {

  #screen-check
  .ntx-check-hero-v36 {
    transform:
      translateY(-16px) !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  #screen-check
  .ntx-check-hero-v36 {
    transform:
      none !important;
  }


  #screen-check
  .ntx-check-input-v36 {
    min-height:
      58px !important;

    height:
      58px !important;

    font-size:
      14px !important;
  }

}

/* PROFILE TOP ALIGN FIX START */


/* ----------------------------------------------------------
   Глобальный верхний header В PROFILE ОСТАЁТСЯ.
   Только нормально размещаем его.
   ---------------------------------------------------------- */

body.p56-profile-open .workspace-header {
    display: flex !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 62px !important;

    margin:
        0 0 10px 0 !important;

    padding:
        8px 14px 4px 0 !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    overflow:
        visible !important;
}


/* ----------------------------------------------------------
   EN + Sign in
   ---------------------------------------------------------- */

body.p56-profile-open
.workspace-header
.header-actions {
    width:
        auto !important;

    max-width:
        100% !important;

    margin-left:
        auto !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    flex-wrap:
        nowrap !important;

    gap:
        10px !important;
}


/* ----------------------------------------------------------
   LANGUAGE
   ---------------------------------------------------------- */

body.p56-profile-open
.workspace-header
.language-switcher {
    flex:
        0 0 auto !important;

    min-height:
        46px !important;

    padding:
        3px !important;

    display:
        flex !important;

    align-items:
        center !important;

    border-radius:
        12px !important;
}


body.p56-profile-open
.workspace-header
.language-switcher button {
    min-width:
        42px !important;

    height:
        38px !important;

    padding:
        0 10px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    white-space:
        nowrap !important;

    border-radius:
        9px !important;
}


/* ----------------------------------------------------------
   SIGN IN
   ---------------------------------------------------------- */

body.p56-profile-open
.workspace-header
#headerAccountButton {
    flex:
        0 0 auto !important;

    min-width:
        116px !important;

    height:
        46px !important;

    margin:
        0 !important;

    padding:
        0 18px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    white-space:
        nowrap !important;

    border-radius:
        12px !important;

    box-sizing:
        border-box !important;
}


/* ----------------------------------------------------------
   Не даём Profile разъезжаться вправо
   ---------------------------------------------------------- */

body.p56-profile-open
.workspace {
    min-width:
        0 !important;

    overflow-x:
        hidden !important;
}


body.p56-profile-open
#screen-profile-v56 {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;
}


body.p56-profile-open
#screen-profile-v56
.p56-root {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;
}


/* ----------------------------------------------------------
   Верх Profile тоже не должен налезать на login
   ---------------------------------------------------------- */

body.p56-profile-open
#screen-profile-v56
.p56-header {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin-top:
        0 !important;
}


/* PROFILE TOP ALIGN FIX END */



/* tracking-v14.css */

/* ==========================================================
   NOYTRIX TRACKING V14
   ========================================================== */

#screen-tracking {
  padding-top: 10px;
}

.tracking-v14 {
  max-width: 1280px;
  margin: 0 auto 60px;

  border: 1px solid #223b60;
  border-radius: 15px;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(28,63,125,.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #071429,
      #051021
    );

  box-shadow:
    0 24px 70px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);

  overflow: hidden;
}


/* HEADER */

.tracking-v14-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 30px;

  padding: 24px 28px 18px;
}

.tracking-v14-eyebrow {
  margin: 0 0 7px;

  color: #ffb828;

  font-size: 11px;
  font-weight: 850;
  letter-spacing: .085em;
}

.tracking-v14-head h2 {
  margin: 0;

  color: #f5f7fb;

  font-size: 33px;
  line-height: 1.05;

  letter-spacing: -.035em;

  text-shadow:
    0 10px 28px rgba(0,0,0,.32);
}

.tracking-v14-subtitle {
  max-width: 820px;

  margin: 8px 0 0;

  color: #9aa8bc;

  font-size: 13px;
  line-height: 1.5;
}

.tracking-v14-add {
  min-width: 175px;
  min-height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border: 1px solid rgba(255,220,121,.45);
  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #ffd05a,
      #ffb526
    );

  color: #111720;

  font-size: 12px;
  font-weight: 820;

  box-shadow:
    0 10px 30px rgba(255,177,25,.20),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.tracking-v14-add:hover {
  transform: translateY(-1px);

  box-shadow:
    0 14px 34px rgba(255,177,25,.28),
    inset 0 1px 0 rgba(255,255,255,.55);
}


/* STATS */

.tracking-v14-stats {
  display: grid;

  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 14px;

  padding: 0 28px 15px;
}

.tracking-v14-stats article {
  min-height: 86px;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 14px 16px;

  border: 1px solid #294366;
  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(10,27,54,.95),
      rgba(7,20,41,.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

.stat-icon {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: grid;
  place-items: center;

  border: 2px solid currentColor;
  border-radius: 50%;

  font-size: 21px;
  font-weight: 800;
}

.stat-icon.blue { color:#589cff; }
.stat-icon.orange { color:#ff9f1d; }
.stat-icon.green { color:#46d98d; }
.stat-icon.red { color:#ff5361; }

.tracking-v14-stats small {
  display: block;

  color: #bac4d5;

  font-size: 11px;
}

.tracking-v14-stats strong {
  display: inline-block;

  margin-top: 3px;

  color: #eef2f7;

  font-size: 25px;
  line-height: 1;
}

.tracking-v14-stats em {
  margin-left: 6px;

  color: #758298;

  font-size: 8px;
}


/* CHANGE ALERT */

.tracking-v14-alert {
  min-height: 49px;

  margin: 0 28px 14px;

  padding: 7px 10px 7px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 1px solid rgba(255,70,84,.60);
  border-radius: 8px;

  background:
    linear-gradient(
      90deg,
      rgba(103,17,30,.24),
      rgba(44,12,25,.10)
    );
}

.tracking-v14-alert > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tracking-v14-alert > div > span {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border: 2px solid #ff5361;
  border-radius: 50%;

  color: #ff5361;
  font-weight: 850;
}

.tracking-v14-alert strong {
  color: #ff6570;

  font-size: 11px;
}

.tracking-v14-alert button {
  min-height: 32px;

  padding: 0 12px;

  border: 1px solid rgba(255,181,31,.52);
  border-radius: 6px;

  background: rgba(255,181,31,.025);

  color: #ffba2e;

  font-size: 9px;
  font-weight: 760;
}


/* FILTERS */

.tracking-v14-toolbar {
  display: grid;

  grid-template-columns:
    minmax(280px,1fr)
    180px
    180px
    44px;

  gap: 10px;

  padding: 0 28px 14px;
}

.tracking-v14-search {
  min-height: 43px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 0 13px;

  border: 1px solid #2a4262;
  border-radius: 8px;

  background: #07162d;
}

.tracking-v14-search > span {
  color: #8d9aaf;
  font-size: 19px;
}

.tracking-v14-search input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: #e8edf4;

  font-size: 11px;
}

.tracking-v14-toolbar select,
.tracking-v14-refresh {
  border: 1px solid #2a4262;
  border-radius: 8px;

  background: #08172e;

  color: #d5ddea;

  font-size: 10px;
}

.tracking-v14-toolbar select {
  padding: 0 12px;
}

.tracking-v14-refresh {
  font-size: 19px;

  color: #b8c5d7;
}


/* MAIN */

.tracking-v14-body {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    235px;

  gap: 13px;

  padding: 0 28px 20px;
}

.tracking-v14-table,
.tracking-v14-changes {
  border: 1px solid #29415f;
  border-radius: 9px;

  background:
    rgba(5,16,34,.65);
}

.tracking-v14-table {
  overflow: visible;
}

.tracking-v14-table-head {
  min-height: 42px;

  display: grid;

  grid-template-columns:
    minmax(230px,1.45fr)
    150px
    145px
    115px
    105px;

  align-items: center;

  padding: 0 13px;

  border-bottom: 1px solid #273d5d;

  color: #8895a9;

  font-size: 8.5px;
  font-weight: 700;
}


/* ROWS */

.tracking-v14-row {
  min-height: 64px;

  display: grid;

  grid-template-columns:
    minmax(230px,1.45fr)
    150px
    145px
    115px
    105px;

  align-items: center;

  padding: 7px 13px;

  border-bottom:
    1px solid rgba(37,56,85,.68);
}

.tracking-v14-row:last-child {
  border-bottom: 0;
}

.tracking-v14-row.changed {
  box-shadow:
    inset 2px 0 0 #ffb624;
}

.tracking-object-cell-v14 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}

.tracking-object-icon-v14 {
  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: grid;
  place-items: center;

  border: 1px solid currentColor;
  border-radius: 50%;
}

.tracking-object-icon-v14 svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-object-icon-v14.safe { color:#42d78e; }
.tracking-object-icon-v14.medium { color:#ffb728; }
.tracking-object-icon-v14.high,
.tracking-object-icon-v14.critical { color:#ff5361; }

.tracking-object-cell-v14 strong,
.tracking-object-cell-v14 small {
  display: block;
}

.tracking-object-cell-v14 strong {
  color: #edf1f6;

  font-size: 11px;
}

.tracking-object-cell-v14 small {
  max-width: 250px;

  margin-top: 3px;

  overflow: hidden;

  color: #66758c;

  font-size: 8px;

  white-space: nowrap;

  text-overflow: ellipsis;
}


/* RISK */

.tracking-risk-v14 {
  width: max-content;

  display: flex;
  align-items: center;

  gap: 4px;

  padding: 5px 7px;

  border: 1px solid currentColor;
  border-radius: 6px;

  background: rgba(255,255,255,.015);
}

.tracking-risk-v14 strong {
  font-size: 11px;
}

.tracking-risk-v14 small {
  font-size: 8px;
}

.tracking-risk-v14.safe { color:#42d78e; }
.tracking-risk-v14.medium { color:#ffb728; }
.tracking-risk-v14.high,
.tracking-risk-v14.critical { color:#ff5361; }


/* CHANGE */

.tracking-delta-v14 strong,
.tracking-delta-v14 small {
  display: block;
}

.tracking-delta-v14 strong {
  color: #9aa6b8;

  font-size: 11px;
}

.tracking-delta-v14 small {
  margin-top: 3px;

  color: #67758b;

  font-size: 8px;
}

.tracking-delta-v14.up strong { color:#ff5a67; }
.tracking-delta-v14.down strong { color:#46d98d; }

.tracking-last-v14 {
  color: #aab5c5;

  font-size: 9px;
}


/* ACTIONS */

.tracking-row-actions-v14 {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 5px;
}

.tracking-row-actions-v14 .open {
  min-height: 31px;

  padding: 0 10px;

  border: 1px solid #3465a7;
  border-radius: 6px;

  background: rgba(14,43,84,.38);

  color: #76aff9;

  font-size: 9px;
}

.tracking-more-v14 {
  position: relative;
}

.tracking-more-v14 .more {
  width: 26px;
  height: 31px;

  border: 0;

  background: transparent;

  color: #b4bfd0;

  font-size: 19px;
}

.tracking-context-v14 {
  position: absolute;

  z-index: 80;

  right: 0;
  top: 33px;

  width: 150px;

  padding: 5px;

  border: 1px solid #304762;
  border-radius: 8px;

  background: #08162b;

  box-shadow:
    0 18px 50px rgba(0,0,0,.45);
}

.tracking-context-v14[hidden] {
  display: none !important;
}

.tracking-context-v14 button {
  width: 100%;
  min-height: 34px;

  border: 0;
  border-radius: 6px;

  background: transparent;

  color: #cbd4e1;

  font-size: 10px;
  text-align: left;
}

.tracking-context-v14 button:hover {
  background: rgba(255,255,255,.05);
}

.tracking-context-v14 button.danger {
  color: #ff6370;
}


/* RIGHT COLUMN */

.tracking-v14-changes {
  padding: 14px 13px;
}

.tracking-v14-changes h3 {
  margin: 0 0 14px;

  color: #e5eaf2;

  font-size: 13px;
}

.tracking-change-item-v14 {
  display: grid;

  grid-template-columns:
    30px minmax(0,1fr);

  gap: 9px;

  margin-bottom: 15px;
}

.tracking-change-item-v14 > span {
  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border: 1px solid currentColor;
  border-radius: 50%;

  font-weight: 800;
}

.tracking-change-item-v14 > span.up { color:#ff5764; }
.tracking-change-item-v14 > span.down { color:#43d88f; }

.tracking-change-item-v14 strong {
  color: #cfd7e3;

  font-size: 10px;
}

.tracking-change-item-v14 p {
  margin: 2px 0;

  color: #8592a6;

  font-size: 9px;
}

.tracking-change-item-v14 small {
  color: #57667c;

  font-size: 8px;
}

.tracking-change-empty-v14 {
  display: flex;

  gap: 8px;

  color: #65748a;

  font-size: 9px;
}


/* FOOTER */

.tracking-v14-footer {
  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 10px 18px;

  border-top: 1px solid #29415f;

  background:
    linear-gradient(
      145deg,
      #08172e,
      #061226
    );
}

.tracking-v14-footer > div {
  display: flex;
  align-items: center;

  gap: 11px;
}

.tracking-v14-footer > div > span {
  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border: 1px solid #4f91ed;
  border-radius: 50%;

  color: #6aa9fb;

  font-weight: 800;
}

.tracking-v14-footer p {
  margin: 0;
}

.tracking-v14-footer strong,
.tracking-v14-footer small {
  display: block;
}

.tracking-v14-footer strong {
  color: #cbd4e0;

  font-size: 10px;
}

.tracking-v14-footer small {
  margin-top: 3px;

  color: #68768b;

  font-size: 8px;
}

#trackingNotificationsV14 {
  min-height: 35px;

  padding: 0 13px;

  border: 1px solid #3671b8;
  border-radius: 6px;

  background: transparent;

  color: #68a9fa;

  font-size: 9px;
}


/* STATES */

.tracking-v14-loading,
.tracking-empty-v14,
.tracking-login-required-v14,
.tracking-error-v14 {
  min-height: 260px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 25px;

  text-align: center;

  color: #738198;
}

.tracking-v14-loading {
  flex-direction: row;

  gap: 9px;

  font-size: 10px;
}

.tracking-v14-loading i {
  width: 13px;
  height: 13px;

  border: 2px solid #314663;
  border-top-color: #ffb624;
  border-radius: 50%;

  animation: trackSpin .8s linear infinite;
}

@keyframes trackSpin {
  to { transform:rotate(360deg); }
}

.tracking-empty-v14 > span,
.tracking-login-required-v14 > span {
  color: #ffb829;

  font-size: 34px;
}

.tracking-empty-v14 strong,
.tracking-login-required-v14 strong {
  margin-top: 9px;

  color: #e1e7f0;

  font-size: 13px;
}

.tracking-empty-v14 p,
.tracking-login-required-v14 p {
  max-width: 390px;

  color: #65748a;

  font-size: 9px;
  line-height: 1.55;
}

.tracking-login-required-v14 button {
  min-height: 35px;

  margin-top: 5px;

  padding: 0 14px;

  border: 1px solid rgba(255,183,32,.38);
  border-radius: 7px;

  background: rgba(255,181,31,.06);

  color: #ffba2f;

  font-weight: 750;
}


/* MODAL */

.tracking-v14-modal {
  position: fixed;

  z-index: 1000;

  inset: 0;

  display: grid;
  place-items: center;
}

.tracking-v14-modal[hidden] {
  display: none !important;
}

.tracking-v14-backdrop {
  position: absolute;

  inset: 0;

  background: rgba(1,6,15,.80);

  backdrop-filter: blur(8px);
}

.tracking-v14-modal-card {
  position: relative;

  z-index: 1;

  width: min(510px,calc(100vw - 30px));

  padding: 28px;

  border: 1px solid #324965;
  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #0b1b34,
      #071327
    );

  box-shadow:
    0 32px 90px rgba(0,0,0,.56);
}

.tracking-v14-modal-close {
  position: absolute;

  right: 12px;
  top: 12px;

  width: 30px;
  height: 30px;

  border: 0;
  border-radius: 7px;

  background: rgba(255,255,255,.04);

  color: #8795aa;

  font-size: 20px;
}

.tracking-v14-modal-icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,182,31,.38);
  border-radius: 12px;

  background: rgba(255,181,31,.05);

  color: #ffb82b;

  font-size: 24px;
}

.tracking-v14-modal-card h3 {
  margin: 15px 0 7px;

  color: #f0f3f7;

  font-size: 19px;
}

.tracking-v14-modal-card > p {
  color: #8997ab;

  font-size: 11px;
  line-height: 1.55;
}

/* VERIFIED CHANGE DETAILS */

.tracking-change-modal-card-v14 {
  width: min(650px,calc(100vw - 30px));
  max-height: min(760px,calc(100vh - 30px));
  overflow: auto;
}

.tracking-change-modal-icon-v14 {
  color: #ffbf32;
}

.tracking-change-modal-kicker-v14 {
  margin: 15px 0 0;
  color: #ffbe31;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.tracking-change-modal-card-v14 h3 {
  margin-top: 7px;
}

.tracking-change-modal-object-v14 {
  margin: 0;
  color: #9eafc6;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.tracking-change-modal-risk-v14 {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 12px;
  border: 1px solid rgba(255,184,40,.28);
  border-radius: 10px;
  background: rgba(255,184,40,.06);
  color: #ffbf32;
}

.tracking-change-modal-risk-v14 strong { font-size: 20px; }
.tracking-change-modal-risk-v14 span { font-size: 11px; font-weight: 750; }

.tracking-change-modal-intro-v14 {
  margin: 16px 0 10px !important;
  color: #aebbcf !important;
  font-size: 12px !important;
}

.tracking-change-details-v14 {
  display: grid;
  gap: 9px;
}

.tracking-change-detail-v14 {
  padding: 13px;
  border: 1px solid #233d5c;
  border-radius: 10px;
  background: rgba(4,15,32,.74);
}

.tracking-change-detail-head-v14 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #eff4fc;
  font-size: 12px;
}

.tracking-change-detail-head-v14 > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.tracking-change-detail-head-v14 > span.risk { background: rgba(255,82,96,.15); color: #ff6370; }
.tracking-change-detail-head-v14 > span.attention { background: rgba(255,184,40,.15); color: #ffc043; }
.tracking-change-detail-head-v14 > span.info { background: rgba(64,145,255,.15); color: #74b5ff; }

.tracking-change-detail-v14 p {
  margin: 9px 0 7px;
  color: #b7c3d4;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
}

.tracking-change-detail-v14 small {
  color: #70829b;
  font-size: 10px;
}

.tracking-change-loading-v14 {
  padding: 22px 12px;
  color: #91a4bd;
  font-size: 12px;
  text-align: center;
}

.tracking-change-modal-actions-v14 {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.tracking-change-modal-actions-v14 button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 9px;
  font-weight: 800;
}

.tracking-change-open-v14 {
  border: 0;
  background: linear-gradient(135deg,#ffd25c,#ffb629);
  color: #101723;
}

.tracking-change-close-v14 {
  border: 1px solid #344b69;
  background: transparent;
  color: #c2cede;
}

.tracking-change-item-v14 {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.tracking-change-item-v14:hover {
  background: rgba(61,121,197,.12);
}

#trackingAddFormV14 {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 8px;

  margin-top: 18px;
}

#trackingAddInputV14 {
  min-height: 47px;

  padding: 0 13px;

  border: 1px solid #304660;
  border-radius: 9px;

  outline: none;

  background: #071328;

  color: #e6ebf3;
}

#trackingAddSubmitV14 {
  min-height: 47px;

  padding: 0 15px;

  border: 0;
  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #ffd05b,
      #ffb526
    );

  color: #111720;

  font-weight: 800;
}

#trackingAddStatusV14 {
  min-height: 20px;

  margin-top: 10px;

  color: #8492a7;

  font-size: 9px;
}


/* TOAST */

.tracking-toast-v14 {
  position: fixed;

  z-index: 2000;

  right: 24px;
  bottom: 24px;

  max-width: 360px;

  padding: 12px 15px;

  border: 1px solid #355172;
  border-radius: 10px;

  background: #0a1a32;

  color: #dce4ef;

  font-size: 11px;

  box-shadow:
    0 18px 50px rgba(0,0,0,.45);

  opacity: 0;

  transform: translateY(10px);

  transition: .2s ease;
}

.tracking-toast-v14.show {
  opacity: 1;
  transform: translateY(0);
}

.tracking-toast-v14.success {
  border-color: rgba(67,214,142,.45);
}

.tracking-toast-v14.error {
  border-color: rgba(255,82,96,.50);
}


/* MOBILE */

@media(max-width:1100px){

  .tracking-v14-stats {
    grid-template-columns: 1fr 1fr;
  }

  .tracking-v14-body {
    grid-template-columns: 1fr;
  }

  .tracking-v14-table {
    overflow-x: auto;
  }

  .tracking-v14-table-head,
  .tracking-v14-row {
    min-width: 850px;
  }
}

@media(max-width:760px){

  .tracking-v14-head {
    flex-direction: column;
  }

  .tracking-v14-add {
    width: 100%;
  }

  .tracking-v14-stats {
    grid-template-columns: 1fr;
  }

  .tracking-v14-toolbar {
    grid-template-columns: 1fr;
  }

  #trackingAddFormV14 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   NOYTRIX TRACKING POLISH V15
   ========================================================== */


/* вся dashboard-карточка занимает оставшуюся высоту */

#screen-tracking .tracking-v14 {
  width: 100%;
  height: 100%;

  min-height: 0;

  margin: 0 auto !important;

  display: grid;

  grid-template-rows:
    auto
    auto
    auto
    auto
    minmax(0, 1fr)
    auto;

  overflow: hidden;

  border-color:
    rgba(53,79,119,.75);

  border-radius: 16px;

  background:
    radial-gradient(
      circle at 72% -10%,
      rgba(36,76,153,.16),
      transparent 37%
    ),
    linear-gradient(
      145deg,
      rgba(7,20,42,.98),
      rgba(4,14,30,.99)
    );

  box-shadow:
    0 25px 75px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.035);
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.tracking-v14-head {
  padding:
    19px 25px
    14px !important;

  align-items:
    center !important;
}


.tracking-v14-eyebrow {
  margin-bottom:
    5px !important;

  color:
    #ffb927 !important;

  font-size:
    10px !important;

  letter-spacing:
    .105em !important;
}


.tracking-v14-head h2 {
  font-size:
    clamp(27px, 2vw, 34px)
    !important;

  letter-spacing:
    -.04em !important;

  text-shadow:
    0 6px 15px rgba(0,0,0,.30),
    0 18px 38px rgba(0,0,0,.25);
}


.tracking-v14-subtitle {
  margin-top:
    6px !important;

  max-width:
    830px;

  color:
    #8393aa !important;

  font-size:
    11.5px !important;
}


/* Add object */

.tracking-v14-add {
  min-width:
    174px;

  min-height:
    43px !important;

  border-radius:
    10px !important;

  box-shadow:
    0 9px 28px rgba(255,174,21,.20),
    0 0 28px rgba(255,181,31,.04),
    inset 0 1px 0 rgba(255,255,255,.52)
    !important;
}


/* ----------------------------------------------------------
   STATS
   ---------------------------------------------------------- */

.tracking-v14-stats {
  gap:
    12px !important;

  padding:
    0 25px
    12px !important;
}


.tracking-v14-stats article {
  min-height:
    79px !important;

  padding:
    12px 15px !important;

  border-color:
    rgba(47,72,109,.78);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.tracking-v14-stats article:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(66,99,148,.90);

  background:
    linear-gradient(
      145deg,
      rgba(13,32,63,.98),
      rgba(7,21,43,.96)
    );
}


.stat-icon {
  width:
    40px !important;

  height:
    40px !important;

  flex-basis:
    40px !important;

  font-size:
    18px !important;
}


.tracking-v14-stats strong {
  font-size:
    23px !important;
}


/* числа получают смысловой цвет */

.tracking-v14-stats
article[data-stat="changed"]
strong {
  color: #ff5a67;
}


.tracking-v14-stats
article[data-stat="stable"]
strong {
  color: #45d98e;
}


.tracking-v14-stats
article[data-stat="attention"]
strong {
  color: #ff5a67;
}


/* ----------------------------------------------------------
   ALERT

   Сейчас у тебя он отображается даже с hidden.
   Это исправляет пустую красную полосу.
   ---------------------------------------------------------- */

.tracking-v14-alert[hidden] {
  display: none !important;
}


.tracking-v14-alert {
  min-height:
    43px !important;

  margin:
    0 25px
    11px !important;
}


/* ----------------------------------------------------------
   TOOLBAR
   ---------------------------------------------------------- */

.tracking-v14-toolbar {
  grid-template-columns:
    minmax(260px, 1fr)
    190px
    190px
    45px
    !important;

  gap:
    9px !important;

  padding:
    0 25px
    11px !important;
}


.tracking-v14-search,
.tracking-v14-toolbar select,
.tracking-v14-refresh {
  min-height:
    40px !important;

  border-color:
    rgba(46,70,105,.88) !important;

  background:
    linear-gradient(
      145deg,
      rgba(8,24,48,.94),
      rgba(6,19,39,.96)
    ) !important;
}


.tracking-v14-search:focus-within {
  border-color:
    rgba(255,183,37,.36)
    !important;

  box-shadow:
    0 0 0 3px
    rgba(255,181,31,.035);
}


/* ----------------------------------------------------------
   MAIN TABLE AREA

   Вот это главное:
   таблица занимает всё оставшееся пространство.
   ---------------------------------------------------------- */

.tracking-v14-body {
  min-height: 0 !important;

  height: 100%;

  grid-template-columns:
    minmax(0, 1fr)
    250px !important;

  gap:
    11px !important;

  padding:
    0 25px
    12px !important;

  overflow: hidden;
}


.tracking-v14-table {
  min-width: 0;
  min-height: 0;

  height: 100%;

  display: flex;
  flex-direction: column;

  overflow: hidden !important;

  border-color:
    rgba(48,72,107,.82) !important;
}


.tracking-v14-table-head {
  flex:
    0 0 41px;

  min-height:
    41px !important;

  background:
    rgba(9,24,47,.72);
}


/*
  Только строки внутри таблицы прокручиваются,
  если объектов станет 20, 50 и т.д.
*/

.tracking-v14-rows {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(66,88,122,.45)
    transparent;
}


.tracking-v14-rows::-webkit-scrollbar {
  width: 5px;
}


.tracking-v14-rows::-webkit-scrollbar-track {
  background: transparent;
}


.tracking-v14-rows::-webkit-scrollbar-thumb {
  border-radius: 20px;

  background:
    rgba(72,94,130,.45);
}


/* ----------------------------------------------------------
   SIGN IN EMPTY STATE
   ---------------------------------------------------------- */

.tracking-login-required-v14 {
  height: 100%;

  min-height:
    0 !important;

  padding:
    20px !important;
}


.tracking-login-required-v14 > span {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  margin-bottom: 2px;

  border:
    1px solid
    rgba(255,181,31,.34);

  border-radius:
    13px;

  background:
    rgba(255,181,31,.04);

  color:
    #ffb829;

  font-size:
    25px !important;

  box-shadow:
    0 0 24px
    rgba(255,181,31,.05);
}


.tracking-login-required-v14 strong {
  font-size:
    12px !important;
}


.tracking-login-required-v14 button {
  min-height:
    38px !important;

  padding:
    0 16px !important;

  border-color:
    rgba(255,183,37,.46);

  border-radius:
    9px;

  background:
    linear-gradient(
      145deg,
      rgba(255,181,31,.10),
      rgba(255,181,31,.035)
    );

  color:
    #ffc13d;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.18);
}


/* ----------------------------------------------------------
   LATEST CHANGES
   ---------------------------------------------------------- */

.tracking-v14-changes {
  min-width: 0;
  min-height: 0;

  height: 100%;

  overflow: hidden;

  border-color:
    rgba(48,72,107,.82) !important;

  background:
    linear-gradient(
      160deg,
      rgba(7,22,44,.90),
      rgba(5,17,35,.94)
    ) !important;
}


.tracking-v14-changes h3 {
  margin-bottom:
    11px !important;

  font-size:
    12px !important;
}


#trackingChangesV14 {
  height:
    calc(100% - 30px);

  overflow-y: auto;

  scrollbar-width: none;
}


#trackingChangesV14::-webkit-scrollbar {
  display: none;
}


.tracking-change-empty-v14 {
  height:
    calc(100% - 10px);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  text-align: center;

  opacity: .72;
}


.tracking-change-empty-v14 span {
  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(65,211,141,.20);

  border-radius: 50%;

  color:
    #42d68d;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.tracking-v14-footer {
  min-height:
    57px !important;

  padding:
    8px 18px !important;

  border-top-color:
    rgba(45,68,101,.78) !important;
}


.tracking-v14-footer > div > span {
  width:
    27px !important;

  height:
    27px !important;
}


#trackingNotificationsV14 {
  min-height:
    33px !important;
}


/* ----------------------------------------------------------
   900p / smaller laptop screens
   ---------------------------------------------------------- */

@media(
  min-width: 761px
) and (
  max-height: 850px
) {

  .workspace {
    padding-top:
      10px !important;

    padding-bottom:
      10px !important;
  }


  .workspace-header {
    flex-basis:
      51px;

    min-height:
      51px;
  }


  .tracking-v14-head {
    padding-top:
      13px !important;

    padding-bottom:
      10px !important;
  }


  .tracking-v14-head h2 {
    font-size:
      27px !important;
  }


  .tracking-v14-stats article {
    min-height:
      68px !important;
  }


  .stat-icon {
    width:
      35px !important;

    height:
      35px !important;

    flex-basis:
      35px !important;
  }


  .tracking-v14-footer {
    min-height:
      50px !important;
  }

}


/* ==========================================================
   TRACKING V16 — LAYOUT FIX
   ========================================================== */


/*
  ВАЖНО:
  используем flex, а не старую grid-разметку.
  Из-за hidden alert footer раньше попадал
  в растягиваемую grid-строку и занимал кучу места.
*/

#screen-tracking .tracking-v14 {
  display: flex !important;
  flex-direction: column !important;

  height: 100% !important;

  min-height: 0 !important;
}


.tracking-v14-head,
.tracking-v14-stats,
.tracking-v14-alert,
.tracking-v14-toolbar,
.tracking-notify-v15 {
  flex:
    0 0 auto;
}


/* таблица получает ВСЁ оставшееся пространство */

.tracking-v14-body {
  flex:
    1 1 auto !important;

  min-height:
    0 !important;

  height:
    auto !important;

  padding-bottom:
    9px !important;
}


/* немного увеличиваем полезную часть */

.tracking-v14-table-head {
  min-height:
    45px !important;

  flex-basis:
    45px !important;

  font-size:
    9px !important;
}


.tracking-v14-row {
  min-height:
    68px !important;
}


.tracking-object-cell-v14 strong {
  font-size:
    11.5px !important;
}


.tracking-object-cell-v14 small {
  font-size:
    8.5px !important;
}


.tracking-risk-v14 strong {
  font-size:
    11.5px !important;
}


.tracking-v14-changes h3 {
  font-size:
    12.5px !important;
}


/* ==========================================================
   BOTTOM NOTIFICATION BAR
   ========================================================== */

.tracking-notify-v15 {
  width: 100%;

  min-height:
    62px !important;

  max-height:
    62px !important;

  display: grid !important;

  grid-template-columns:
    minmax(270px, 1fr)
    auto
    auto;

  align-items: center;

  gap: 18px;

  padding:
    8px 16px !important;

  border-top:
    1px solid
    rgba(49,73,108,.86)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(8,23,45,.98),
      rgba(6,18,36,.99)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.018);
}


/* LEFT */

.tracking-notify-info-v15 {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 10px;
}


.tracking-info-icon-v15 {
  width: 29px;
  height: 29px;

  flex:
    0 0 29px;

  display: grid;
  place-items: center;

  border:
    1px solid #4687dc;

  border-radius: 50%;

  color: #68aaff;

  font-size: 11px;

  font-weight: 850;
}


.tracking-notify-info-v15 strong,
.tracking-notify-info-v15 small {
  display: block;
}


.tracking-notify-info-v15 strong {
  overflow: hidden;

  color: #d2dae6;

  font-size: 9.5px;

  font-weight: 650;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.tracking-notify-info-v15 small {
  margin-top: 3px;

  overflow: hidden;

  color: #68778d;

  font-size: 8px;

  white-space: nowrap;

  text-overflow: ellipsis;
}


/* CENTER */

.tracking-notify-controls-v15 {
  display: flex;

  align-items: center;

  gap: 8px;
}


.tracking-notify-label-v15 {
  margin-right: 2px;

  color: #8593a8;

  font-size: 8px;

  font-weight: 750;

  white-space: nowrap;
}


.tracking-channel-list-v15 {
  display: flex;

  align-items: center;

  gap: 5px;
}


/* channel pill */

.tracking-channel-v15 {
  position: relative;

  min-height: 34px;

  display: flex;

  align-items: center;

  gap: 6px;

  padding:
    0 9px;

  border:
    1px solid
    rgba(48,72,108,.88);

  border-radius:
    8px;

  background:
    rgba(8,22,43,.76);

  color: #8b99ae;

  font-size: 8.5px;

  font-weight: 650;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}


.tracking-channel-v15 svg {
  width: 14px;
  height: 14px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.tracking-channel-v15 i {
  width: 6px;
  height: 6px;

  margin-left: 2px;

  border-radius: 50%;

  background: #445268;
}


.tracking-channel-v15.active {
  border-color:
    rgba(255,182,34,.39);

  background:
    linear-gradient(
      145deg,
      rgba(255,181,31,.09),
      rgba(255,181,31,.025)
    );

  color: #dbe2ec;
}


.tracking-channel-v15.active svg {
  color: #ffba2e;
}


.tracking-channel-v15.active i {
  background: #ffb82b;

  box-shadow:
    0 0 9px
    rgba(255,181,31,.36);
}


.tracking-channel-v15:hover:not(.disabled) {
  border-color:
    rgba(255,183,35,.44);
}


.tracking-channel-v15.disabled {
  opacity: .42;
}


/* frequency */

.tracking-frequency-v15 {
  min-height: 34px;

  display: flex;

  align-items: center;

  gap: 6px;

  padding:
    0 7px 0 9px;

  border:
    1px solid
    rgba(48,72,108,.88);

  border-radius:
    8px;

  background:
    rgba(8,22,43,.76);
}


.tracking-frequency-v15 > span {
  color: #74839a;

  font-size: 8px;
}


.tracking-frequency-v15 select {
  border: 0;

  outline: 0;

  background: transparent;

  color: #d2dae7;

  font-size: 8.5px;

  font-weight: 650;
}


.tracking-frequency-v15 select option {
  background: #08162b;

  color: #dce3ed;
}


/* RIGHT SAVE STATE */

.tracking-notify-state-v15 {
  min-width: 96px;

  display: flex;

  justify-content: flex-end;
}


.tracking-notify-status-v15 {
  min-height: 29px;

  display: flex;

  align-items: center;

  padding:
    0 9px;

  border:
    1px solid
    rgba(50,74,109,.72);

  border-radius:
    7px;

  color: #718198;

  font-size: 8px;

  white-space: nowrap;
}


.tracking-notify-status-v15.saved {
  border-color:
    rgba(57,194,127,.22);

  color: #55cb8d;

  background:
    rgba(43,179,112,.035);
}


.tracking-notify-status-v15.saving {
  color: #ffb82b;
}


.tracking-notify-status-v15.error {
  border-color:
    rgba(255,84,97,.32);

  color: #ff6570;
}


.tracking-notify-status-v15.signin {
  border-color:
    rgba(255,181,31,.25);

  color: #d2a13d;
}


/* ==========================================================
   EXTRA SPACE FOR MAIN FUNCTIONALITY
   ========================================================== */

.tracking-v14-head {
  padding-bottom:
    12px !important;
}


.tracking-v14-stats {
  padding-bottom:
    10px !important;
}


.tracking-v14-toolbar {
  padding-bottom:
    9px !important;
}


/*
  Теперь таблица и Latest changes визуально
  почти до самого notification bar.
*/

.tracking-v14-table,
.tracking-v14-changes {
  height: 100% !important;
}


/* compact laptop */

@media(
  min-width: 761px
) and (
  max-height: 850px
) {

  .tracking-notify-v15 {
    min-height:
      54px !important;

    max-height:
      54px !important;

    padding:
      6px 14px !important;
  }


  .tracking-channel-v15,
  .tracking-frequency-v15 {
    min-height:
      31px;
  }


  .tracking-notify-info-v15 small {
    display: none;
  }

}

/* ==========================================================
   TRACKING V17 — CLEAN BOTTOM BAR
   ========================================================== */

.tracking-notify-v15 {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 14px !important;

  min-height: 62px !important;
  max-height: 62px !important;

  padding: 8px 16px !important;
  overflow: hidden !important;
}

.tracking-notify-info-v15 {
  min-width: 0 !important;
  max-width: 420px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tracking-info-icon-v15 {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid rgba(83, 142, 228, .95) !important;
  border-radius: 50% !important;

  color: #69a8ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.tracking-notify-info-v15 strong {
  display: block !important;
  margin: 0 !important;

  color: #d7e0ee !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tracking-notify-info-v15 small {
  display: block !important;
  margin-top: 3px !important;

  color: #74839a !important;
  font-size: 10px !important;
  line-height: 1.1 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* center controls */
.tracking-notify-controls-v15 {
  display: flex !important;
  align-items: center !important;
  justify-self: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.tracking-notify-label-v15 {
  display: none !important;
}

.tracking-channel-list-v15 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tracking-channel-v15 {
  min-width: 92px !important;
  height: 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  padding: 0 10px !important;

  border: 1px solid rgba(48,72,108,.9) !important;
  border-radius: 9px !important;

  background: rgba(8,22,43,.82) !important;
  color: #8998ad !important;

  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}

.tracking-channel-v15 svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.tracking-channel-v15 i {
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;

  margin-left: 2px !important;
  border-radius: 50% !important;
  background: #435268 !important;
}

.tracking-channel-v15.active {
  border-color: rgba(255,184,36,.42) !important;
  background: linear-gradient(145deg, rgba(255,181,31,.10), rgba(255,181,31,.03)) !important;
  color: #dfe7f3 !important;
}

.tracking-channel-v15.active svg {
  color: #ffb72d !important;
}

.tracking-channel-v15.active i {
  background: #ffb72d !important;
  box-shadow: 0 0 10px rgba(255,183,45,.35) !important;
}

.tracking-channel-v15.disabled {
  opacity: .42 !important;
}

.tracking-frequency-v15 {
  height: 32px !important;
  min-width: 148px !important;

  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  justify-self: end !important;

  padding: 0 10px !important;

  border: 1px solid rgba(48,72,108,.9) !important;
  border-radius: 9px !important;
  background: rgba(8,22,43,.82) !important;
}

.tracking-frequency-v15 > span {
  color: #7f8ea4 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.tracking-frequency-v15 select {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;

  color: #d7deea !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;

  min-width: 92px !important;
}

.tracking-frequency-v15 select option {
  background: #08162b !important;
  color: #dce3ed !important;
}

.tracking-notify-state-v15 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 90px !important;
}

.tracking-notify-status-v15 {
  min-height: 32px !important;
  padding: 0 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(50,74,109,.78) !important;
  border-radius: 9px !important;

  color: #7b8aa1 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}

.tracking-notify-status-v15.saved {
  color: #53c987 !important;
  border-color: rgba(57,194,127,.24) !important;
  background: rgba(43,179,112,.04) !important;
}

.tracking-notify-status-v15.saving {
  color: #ffb72d !important;
  border-color: rgba(255,183,45,.24) !important;
}

.tracking-notify-status-v15.error {
  color: #ff6570 !important;
  border-color: rgba(255,84,97,.30) !important;
}

.tracking-notify-status-v15.signin {
  display: none !important;
}

/* чуть больше места таблице */
.tracking-v14-body {
  padding-bottom: 8px !important;
}

/* laptop */
@media (max-width: 1460px) {
  .tracking-notify-v15 {
    grid-template-columns: minmax(240px, 1fr) auto auto !important;
    gap: 10px !important;
  }

  .tracking-notify-state-v15 {
    display: none !important;
  }

  .tracking-notify-info-v15 {
    max-width: 330px !important;
  }

  .tracking-channel-v15 {
    min-width: 84px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }

  .tracking-frequency-v15 {
    min-width: 138px !important;
  }
}







/* NOYTRIX TRACKING EXACT ALIGN START */

@media (min-width: 1200px) {

    /* ========================================================
       TABLE
       Same geometry for header AND every generated data row.
       No dependency on row class.
       ======================================================== */

    #screen-tracking .tracking-v14-table-head,
    #screen-tracking #trackingRowsV14 > *:not(.tracking-v14-loading) {

        display: grid !important;

        grid-template-columns:
            minmax(300px, 2.50fr)
            minmax(210px, 1.45fr)
            minmax(115px, .80fr)
            minmax(135px, 1fr)
            minmax(90px, .70fr)
            !important;

        column-gap: 20px !important;

        align-items: center !important;

        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* every generated cell */
    #screen-tracking
    #trackingRowsV14
    > *:not(.tracking-v14-loading)
    > * {

        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* OBJECT */
    #screen-tracking
    #trackingRowsV14
    > *:not(.tracking-v14-loading)
    > :nth-child(1) {

        grid-column: 1 !important;

        width: 100% !important;
        overflow: hidden !important;
    }


    /* CURRENT RISK */
    #screen-tracking
    #trackingRowsV14
    > *:not(.tracking-v14-loading)
    > :nth-child(2) {

        grid-column: 2 !important;

        justify-self: start !important;

        width: 100% !important;

        padding-right: 12px !important;

        overflow: visible !important;
    }


    /*
     * Risk badge may be quite wide:
     * "100/100 Критичний ризик".
     * Keep it in its own column.
     */
    #screen-tracking
    #trackingRowsV14
    > *:not(.tracking-v14-loading)
    > :nth-child(2)
    > * {

        max-width: 100% !important;

        white-space: nowrap !important;

        margin: 0 !important;
    }


    /* CHANGE */
    #screen-tracking
    #trackingRowsV14
    > *:not(.tracking-v14-loading)
    > :nth-child(3) {

        grid-column: 3 !important;

        justify-self: start !important;

        padding-left: 8px !important;

        white-space: nowrap !important;
    }


    /* LAST CHECK */
    #screen-tracking
    #trackingRowsV14
    > *:not(.tracking-v14-loading)
    > :nth-child(4) {

        grid-column: 4 !important;

        justify-self: start !important;

        white-space: nowrap !important;
    }


    /* ACTIONS */
    #screen-tracking
    #trackingRowsV14
    > *:not(.tracking-v14-loading)
    > :nth-child(5) {

        grid-column: 5 !important;

        justify-self: end !important;

        display: flex !important;
        align-items: center !important;

        gap: 10px !important;

        white-space: nowrap !important;
    }


    /* ========================================================
       BOTTOM BAR
       Create enough horizontal room so
       "Збережено в акаунті" is fully visible.
       ======================================================== */

    #screen-tracking [data-notify-channel] {

        min-width: 0 !important;

        padding-left: 11px !important;
        padding-right: 11px !important;

        white-space: nowrap !important;
    }


    #screen-tracking #trackingFrequencyV15 {

        width: 142px !important;
        min-width: 142px !important;
        max-width: 142px !important;

        padding-left: 10px !important;
        padding-right: 24px !important;
    }


    #screen-tracking #trackingNotifyStatusV15 {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;

        margin-left: 10px !important;
        margin-right: 16px !important;

        padding-left: 4px !important;
        padding-right: 4px !important;

        white-space: nowrap !important;

        overflow: visible !important;
        text-overflow: clip !important;

        font-size: 11px !important;
    }


    /*
     * Exact parent of Saved-to-account status:
     * keep children on one line but inside page.
     */
    #screen-tracking
    *:has(> #trackingNotifyStatusV15) {

        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 8px !important;

        min-width: 0 !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        padding-right: 8px !important;

        overflow: visible !important;
    }

}

/* NOYTRIX TRACKING EXACT ALIGN END */


/* guest-funnel-v18.css */

/* ==========================================================
   NOYTRIX GUEST FUNNEL V18
   ========================================================== */


/* free check hint */

.guest-free-note-v18 {
  min-height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 12px;

  color: #697990;

  font-size: 10px;
  font-weight: 550;
}


.guest-free-note-v18[hidden] {
  display: none !important;
}


.guest-free-dot-v18 {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #47d794;

  box-shadow:
    0 0 9px
    rgba(71,215,148,.36);
}


.guest-free-dot-v18.used {
  background: #ffb72c;

  box-shadow:
    0 0 9px
    rgba(255,183,44,.28);
}


.guest-free-note-v18 button {
  margin-left: 4px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #ffb82d;

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}


.guest-free-note-v18 button:hover {
  text-decoration: underline;
}


/* ==========================================================
   UNLOCK CARD
   ========================================================== */

.guest-unlock-card-v18 {
  width:
    calc(100% - 46px);

  max-width: 730px;

  margin:
    7px 0 14px
    46px;

  display: grid;

  grid-template-columns:
    42px minmax(0,1fr) auto;

  align-items: center;

  gap: 13px;

  padding:
    15px 16px;

  border:
    1px solid
    rgba(255,184,40,.25);

  border-radius:
    14px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255,181,31,.09),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(12,27,51,.96),
      rgba(7,18,36,.96)
    );

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.20),
    inset 0 1px 0
    rgba(255,255,255,.035);

  animation:
    guestUnlockIn
    .32s ease both;
}


.guest-unlock-icon-v18 {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,183,38,.32);

  border-radius:
    12px;

  background:
    rgba(255,181,31,.055);

  color: #ffba31;

  font-size: 18px;

  box-shadow:
    0 0 25px
    rgba(255,181,31,.055);
}


.guest-unlock-copy-v18 {
  min-width: 0;
}


.guest-unlock-kicker-v18 {
  display: block;

  margin-bottom: 3px;

  color: #d69d2b;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .10em;
}


.guest-unlock-copy-v18 strong {
  display: block;

  color: #edf2f8;

  font-size: 13px;

  font-weight: 720;
}


.guest-unlock-copy-v18 p {
  max-width: 540px;

  margin:
    4px 0 0;

  color: #8493a8;

  font-size: 10px;

  line-height: 1.5;
}


/* buttons */

.guest-unlock-actions-v18 {
  display: flex;

  flex-direction: column;

  gap: 6px;

  min-width: 173px;
}


.guest-unlock-actions-v18 button {
  min-height: 35px;

  padding:
    0 11px;

  border-radius:
    8px;

  font-family: inherit;

  font-size: 9.5px;

  font-weight: 750;

  white-space: nowrap;
}


.guest-create-v18 {
  border:
    1px solid
    rgba(255,219,113,.42);

  background:
    linear-gradient(
      135deg,
      #ffd05b,
      #ffb526
    );

  color: #111720;

  box-shadow:
    0 8px 22px
    rgba(255,178,25,.15);
}


.guest-create-v18:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 11px 27px
    rgba(255,178,25,.22);
}


.guest-login-v18 {
  border:
    1px solid
    #304560;

  background:
    rgba(7,19,38,.70);

  color: #94a3b7;
}


.guest-login-v18:hover {
  border-color:
    #48617f;

  color:
    #d5deea;
}


/* ==========================================================
   LOCKED CHAT INPUT
   ========================================================== */

.guest-chat-locked-v18 {
  position: relative;

  border-color:
    rgba(255,183,38,.18)
    !important;
}


.guest-chat-locked-v18::after {
  content: '🔒';

  position: absolute;

  right: 67px;
  top: 50%;

  transform:
    translateY(-50%);

  opacity: .48;

  font-size: 11px;

  pointer-events: none;
}


.guest-chat-locked-v18
#chatInput {
  cursor: pointer;

  color:
    #718097 !important;
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes guestUnlockIn {

  from {
    opacity: 0;

    transform:
      translateY(8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@media(max-width:800px) {

  .guest-unlock-card-v18 {
    width:
      calc(100% - 39px);

    margin-left:
      39px;

    grid-template-columns:
      38px minmax(0,1fr);
  }


  .guest-unlock-actions-v18 {
    grid-column:
      1 / -1;

    width: 100%;

    flex-direction: row;
  }


  .guest-unlock-actions-v18 button {
    flex: 1;
  }

}


/* signals-v19.css */

/* ==========================================================
   NOYTRIX SIGNALS V19 — PREMIUM LIVE INTELLIGENCE
   ========================================================== */


#screen-intelligence.active {
  overflow: hidden !important;
}


.signals-v19 {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-rows:
    auto
    auto
    auto
    minmax(0, 1fr)
    auto;

  overflow: hidden;

  border:
    1px solid
    rgba(49,76,117,.76);

  border-radius:
    16px;

  background:
    radial-gradient(
      circle at 15% -15%,
      rgba(32,67,139,.17),
      transparent 36%
    ),
    radial-gradient(
      circle at 92% 5%,
      rgba(15,47,104,.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #07152b 0%,
      #051126 52%,
      #06142a 100%
    );

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.27),

    0 8px 25px
    rgba(0,0,0,.12),

    inset 0 1px 0
    rgba(255,255,255,.032);

  isolation: isolate;
}


/* subtle premium glow */

.signals-v19::before {
  content: '';

  position: absolute;

  z-index: -1;

  top: -210px;
  left: 20%;

  width: 620px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(37,87,177,.13),
      transparent 67%
    );

  filter:
    blur(30px);

  pointer-events: none;
}


/* ==========================================================
   HEADER
   ========================================================== */

.signals-head-v19 {
  min-height: 118px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding:
    19px 27px 15px;

  border-bottom:
    1px solid
    rgba(45,68,102,.65);
}


.signals-title-v19 {
  min-width: 0;
}


.signals-eyebrow-v19 {
  display: block;

  margin-bottom: 6px;

  color:
    #ffb827;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .095em;

  text-shadow:
    0 0 15px
    rgba(255,181,31,.12);
}


.signals-title-v19 h2 {
  margin: 0;

  color: #f4f7fb;

  font-size:
    clamp(
      27px,
      2.1vw,
      36px
    );

  line-height:
    1.05;

  letter-spacing:
    -.042em;

  font-weight:
    810;

  text-shadow:
    0 6px 18px
    rgba(0,0,0,.35),

    0 22px 45px
    rgba(0,0,0,.22);
}


.signals-title-v19 p {
  max-width: 900px;

  margin:
    7px 0 0;

  color:
    #8b9aaf;

  font-size:
    11.5px;

  line-height:
    1.45;
}


/* notification button */

.signals-notify-v19 {
  min-width:
    190px;

  min-height:
    42px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(55,82,121,.92);

  border-radius:
    9px;

  background:
    linear-gradient(
      145deg,
      rgba(11,28,54,.96),
      rgba(7,19,38,.96)
    );

  color:
    #d4dce8;

  font-size:
    10px;

  font-weight:
    680;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.15),

    inset 0 1px 0
    rgba(255,255,255,.035);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.signals-notify-v19 svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke:
    #f0f4fa;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.signals-notify-v19:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(255,183,35,.38);

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.22),

    0 0 20px
    rgba(255,181,31,.04);
}


/* ==========================================================
   TABS
   ========================================================== */

.signals-tabs-v19 {
  height: 47px;

  display: flex;

  align-items: stretch;

  gap: 4px;

  padding:
    0 21px;

  border-bottom:
    1px solid
    rgba(45,68,102,.68);

  background:
    rgba(4,14,30,.22);
}


.signals-tabs-v19 button {
  position: relative;

  min-width:
    142px;

  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 12px;

  border: 0;

  background:
    transparent;

  color:
    #8493a8;

  font-size:
    10.5px;

  font-weight:
    670;

  cursor: pointer;

  transition:
    color .15s ease;
}


.signals-tabs-v19 button::after {
  content: '';

  position: absolute;

  left: 8px;
  right: 8px;
  bottom: -1px;

  height: 2px;

  border-radius:
    4px 4px 0 0;

  background:
    transparent;
}


.signals-tabs-v19 button:hover {
  color:
    #d7dfeb;
}


.signals-tabs-v19 button.active {
  color:
    #f4f6fa;
}


.signals-tabs-v19 button.active::after {
  background:
    linear-gradient(
      90deg,
      #ffd149,
      #ffb520
    );

  box-shadow:
    0 0 13px
    rgba(255,181,31,.23);
}


.signals-tabs-v19 b {
  min-width:
    23px;

  height:
    22px;

  display: inline-grid;
  place-items: center;

  padding:
    0 6px;

  border:
    1px solid
    rgba(65,84,113,.6);

  border-radius:
    10px;

  background:
    rgba(33,48,72,.62);

  color:
    #aab6c7;

  font-size:
    9px;

  font-weight:
    760;
}


.signals-tabs-v19
button[data-signals-tab="threats"]
b {
  border-color:
    rgba(255,79,94,.22);

  background:
    rgba(148,31,42,.23);

  color:
    #ff7480;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.signals-toolbar-v19 {
  min-height:
    58px;

  display: grid;

  grid-template-columns:
    minmax(230px, 1fr)
    155px
    165px
    145px
    126px
    43px
    135px;

  align-items: center;

  gap: 9px;

  padding:
    8px 20px;

  border-bottom:
    1px solid
    rgba(42,64,96,.62);
}


/* search */

.signals-search-v19 {
  min-height:
    39px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(46,70,106,.9);

  border-radius:
    8px;

  background:
    linear-gradient(
      145deg,
      rgba(8,24,48,.94),
      rgba(6,19,39,.96)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.02);
}


.signals-search-v19:focus-within {
  border-color:
    rgba(255,183,38,.34);

  box-shadow:
    0 0 0 3px
    rgba(255,181,31,.025);
}


.signals-search-v19 svg {
  width: 16px;
  height: 16px;

  flex:
    0 0 16px;

  fill: none;

  stroke:
    #8b9aaf;

  stroke-width: 1.7;

  stroke-linecap: round;
}


.signals-search-v19 input {
  width: 100%;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    #e4eaf2;

  font-family:
    inherit;

  font-size:
    10px;
}


.signals-search-v19 input::placeholder {
  color:
    #5f6f86;
}


/* selects */

.signals-toolbar-v19 select {
  height:
    39px;

  min-width: 0;

  padding:
    0 11px;

  border:
    1px solid
    rgba(46,70,106,.9);

  border-radius:
    8px;

  outline: 0;

  background:
    #08172e;

  color:
    #d0d9e6;

  font-family:
    inherit;

  font-size:
    9.5px;

  cursor: pointer;
}


.signals-toolbar-v19 select:hover {
  border-color:
    rgba(67,94,133,.95);
}


/* toggle */

.signals-new-v19 {
  height:
    39px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  color:
    #a8b3c3;

  font-size:
    9.5px;

  white-space:
    nowrap;

  cursor: pointer;
}


.signals-new-v19 input {
  position:
    absolute;

  opacity: 0;

  pointer-events:
    none;
}


.signals-new-v19 i {
  position: relative;

  width:
    34px;

  height:
    19px;

  flex:
    0 0 34px;

  border:
    1px solid
    #3d506d;

  border-radius:
    20px;

  background:
    #1a2a42;

  transition:
    .18s ease;
}


.signals-new-v19 i::after {
  content: '';

  position: absolute;

  top: 2px;
  left: 2px;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    #aab4c3;

  transition:
    .18s ease;
}


.signals-new-v19
input:checked + i {
  border-color:
    rgba(255,190,47,.55);

  background:
    linear-gradient(
      135deg,
      #ffbd30,
      #f59f0b
    );

  box-shadow:
    0 0 13px
    rgba(255,181,31,.12);
}


.signals-new-v19
input:checked + i::after {
  left:
    17px;

  background:
    #fff;
}


/* refresh */

.signals-refresh-v19 {
  width:
    43px;

  height:
    39px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(46,70,106,.9);

  border-radius:
    8px;

  background:
    #08172e;

  color:
    #c1ccda;
}


.signals-refresh-v19 svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;
  stroke-linejoin:
    round;
}


.signals-refresh-v19.loading svg {
  animation:
    signalsSpin
    .8s linear infinite;
}


@keyframes signalsSpin {
  to {
    transform:
      rotate(360deg);
  }
}


.signals-updated-v19 {
  color:
    #718097;

  font-size:
    8.5px;

  text-align:
    right;

  white-space:
    nowrap;
}


/* ==========================================================
   THREE COLUMNS
   ========================================================== */

.signals-grid-v19 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    1.15fr
    .96fr
    1.08fr;

  gap:
    11px;

  padding:
    0 20px 10px;

  overflow:
    hidden;
}


.signals-column-v19 {
  min-width: 0;
  min-height: 0;

  height: 100%;

  display: flex;

  flex-direction: column;

  border:
    1px solid
    rgba(47,71,106,.84);

  border-radius:
    10px;

  background:
    radial-gradient(
      circle at 25% 0%,
      rgba(25,58,115,.08),
      transparent 38%
    ),
    linear-gradient(
      160deg,
      rgba(7,21,43,.94),
      rgba(5,16,34,.96)
    );

  overflow:
    hidden;

  box-shadow:
    0 12px 33px
    rgba(0,0,0,.10),

    inset 0 1px 0
    rgba(255,255,255,.02);

  transition:
    border-color .2s ease,
    opacity .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


.signals-column-v19.focused {
  transform:
    translateY(-1px);

  border-color:
    rgba(255,182,31,.37);

  box-shadow:
    0 17px 42px
    rgba(0,0,0,.18),

    0 0 25px
    rgba(255,181,31,.035),

    inset 0 1px 0
    rgba(255,255,255,.025);
}


.signals-column-v19.soft {
  opacity:
    .84;
}


/* column headers */

.signals-column-v19 > header {
  min-height:
    49px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding:
    0 13px;

  border-bottom:
    1px solid
    rgba(43,66,100,.72);
}


.signals-column-v19 > header > div {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 8px;
}


.signals-column-icon-v19 {
  width:
    25px;

  height:
    25px;

  display: grid;

  place-items: center;

  color:
    #ffb82b;
}


.signals-column-icon-v19 svg {
  width:
    20px;

  height:
    20px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.signals-column-v19.threats
.signals-column-icon-v19 {
  color:
    #ff5361;
}


.signals-column-v19.market
.signals-column-icon-v19 {
  color:
    #63a6ff;
}


.signals-column-v19 h3 {
  margin: 0;

  color:
    #e8edf4;

  font-size:
    12px;

  font-weight:
    720;

  letter-spacing:
    -.015em;
}


.signals-column-v19.threats h3 {
  color:
    #ff6772;
}


.signals-column-v19.community h3 {
  color:
    #ffb82b;
}


.signals-column-v19.market h3 {
  color:
    #68a9ff;
}


.signals-column-v19 > header small {
  color:
    #7e8ca1;

  font-size:
    8px;

  white-space:
    nowrap;
}


/* ==========================================================
   FEEDS
   ========================================================== */

.signals-feed-v19 {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(65,87,120,.42)
    transparent;
}


.signals-feed-v19::-webkit-scrollbar {
  width:
    4px;
}


.signals-feed-v19::-webkit-scrollbar-track {
  background:
    transparent;
}


.signals-feed-v19::-webkit-scrollbar-thumb {
  border-radius:
    20px;

  background:
    rgba(65,87,120,.42);
}


/* item */

.signal-item-v19 {
  position:
    relative;

  padding:
    10px 12px 9px;

  border-bottom:
    1px solid
    rgba(42,62,91,.72);

  transition:
    background .15s ease;
}


.signal-item-v19:last-child {
  border-bottom:
    0;
}


.signal-item-v19:hover {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.018),
      transparent
    );
}


.signal-item-top-v19 {
  display: flex;

  align-items:
    flex-start;

  gap:
    9px;
}


.signal-object-icon-v19 {
  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(255,181,31,.44);

  border-radius:
    50%;

  color:
    #ffb82b;

  background:
    rgba(255,181,31,.035);
}


.threat-item
.signal-object-icon-v19 {
  border-color:
    rgba(255,75,91,.45);

  color:
    #ff5361;

  background:
    rgba(255,75,91,.035);
}


.signal-object-icon-v19 svg {
  width:
    17px;

  height:
    17px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.65;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.signal-item-title-v19 {
  flex:
    1 1 auto;

  min-width:
    0;
}


.signal-item-title-v19 > strong {
  display: block;

  overflow:
    hidden;

  color:
    #e4e9f1;

  font-size:
    10.5px;

  font-weight:
    670;

  line-height:
    1.3;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.signal-item-title-v19 > p {
  display:
    -webkit-box;

  margin:
    3px 0 0;

  overflow:
    hidden;

  color:
    #a3aec0;

  font-size:
    9px;

  line-height:
    1.38;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;
}


/* score */

.signal-score-v19 {
  flex:
    0 0 auto;

  display: flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    7px;
}


.signal-score-v19 > strong {
  color:
    #ff5966;

  font-size:
    18px;

  line-height:
    1;

  font-weight:
    780;
}


.signal-score-v19 > strong small {
  color:
    #ff7c86;

  font-size:
    8px;

  font-weight:
    550;
}


/* badges */

.signal-badge-v19 {
  width:
    max-content;

  max-width:
    125px;

  min-height:
    21px;

  display:
    inline-flex;

  align-items:
    center;

  padding:
    0 7px;

  border:
    1px solid
    currentColor;

  border-radius:
    5px;

  font-size:
    8px;

  font-weight:
    680;

  line-height:
    1;

  white-space:
    nowrap;
}


.signal-badge-v19.critical {
  color:
    #ff5b68;

  background:
    rgba(255,70,85,.09);
}


.signal-badge-v19.high {
  color:
    #ff695d;

  background:
    rgba(255,91,69,.07);
}


.signal-badge-v19.medium {
  color:
    #ffb329;

  background:
    rgba(255,179,41,.06);
}


.signal-badge-v19.info {
  color:
    #65aaff;

  background:
    rgba(65,150,255,.06);
}


/* tags */

.signal-tags-v19 {
  display: flex;

  gap: 5px;

  margin:
    7px 0 0
    40px;
}


.signal-tags-v19 span {
  min-height:
    20px;

  display: inline-flex;

  align-items: center;

  padding:
    0 7px;

  border:
    1px solid
    rgba(57,82,119,.76);

  border-radius:
    5px;

  background:
    rgba(15,34,62,.66);

  color:
    #8da0ba;

  font-size:
    7.5px;
}


.signal-source-v19 {
  margin:
    7px 0 0
    40px;

  overflow:
    hidden;

  color:
    #68788e;

  font-size:
    7.5px;

  line-height:
    1.35;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.community-source {
  color:
    #56ca8c;
}


/* item footer */

.signal-item-v19 footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 9px;

  margin-top:
    9px;
}


.signal-item-v19 footer time {
  color:
    #7c899c;

  font-size:
    7.5px;
}


.signal-item-v19 footer > div {
  display: flex;

  align-items: center;

  gap: 5px;
}


.signal-check-v19 {
  min-height:
    27px;

  padding:
    0 9px;

  border:
    1px solid
    #3565a3;

  border-radius:
    5px;

  background:
    rgba(10,38,75,.40);

  color:
    #72adfb;

  font-size:
    8px;

  font-weight:
    650;
}


.signal-check-v19:hover {
  border-color:
    #5085c9;

  color:
    #a0c9ff;
}


.signal-bookmark-v19 {
  width:
    27px;

  height:
    27px;

  display:
    grid;

  place-items:
    center;

  border: 0;

  background:
    transparent;

  color:
    #738198;
}


.signal-bookmark-v19 svg {
  width:
    16px;

  height:
    16px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.6;

  stroke-linejoin:
    round;
}


.signal-bookmark-v19:hover,
.signal-bookmark-v19.saved {
  color:
    #ffb82b;
}


.signal-bookmark-v19.saved svg {
  fill:
    rgba(255,181,31,.15);
}


/* ==========================================================
   COMMUNITY
   ========================================================== */

.community-count-v19 {
  flex:
    0 0 auto;

  min-height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  padding:
    0 7px;

  border:
    1px solid
    rgba(255,171,19,.45);

  border-radius:
    5px;

  background:
    rgba(255,171,19,.055);

  color:
    #ffb42a;

  font-size:
    7.5px;

  font-weight:
    700;

  white-space:
    nowrap;
}


/* ==========================================================
   MARKET TIMELINE
   ========================================================== */

.market-feed {
  position:
    relative;
}


.market-feed::before {
  content: '';

  position:
    absolute;

  top:
    11px;
  bottom:
    11px;

  left:
    14px;

  width:
    1px;

  background:
    linear-gradient(
      180deg,
      rgba(255,83,97,.52),
      rgba(255,181,31,.42),
      rgba(81,158,255,.35)
    );
}


.market-item {
  position:
    relative;

  padding-left:
    30px;
}


.market-timeline-dot-v19 {
  position:
    absolute;

  z-index: 2;

  left:
    9px;

  top:
    18px;

  width:
    11px;

  height:
    11px;

  border:
    2px solid
    #07152a;

  border-radius:
    50%;

  background:
    #ffb329;

  box-shadow:
    0 0 0 1px
    rgba(255,181,31,.16);
}


.market-item.high
.market-timeline-dot-v19,
.market-item.critical
.market-timeline-dot-v19 {
  background:
    #ff5966;
}


.market-item.info
.market-timeline-dot-v19 {
  background:
    #5b9fff;
}


.market-item
.signal-item-top-v19 {
  gap:
    7px;
}


.market-item
.signal-item-title-v19 >
.signal-badge-v19 {
  margin-bottom:
    6px;
}


.market-item
.signal-item-title-v19 >
strong {
  white-space:
    normal;
}


.market-date-v19 {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    3px;

  color:
    #8c9aaf;

  font-size:
    8px;
}


.market-date-v19 em {
  color:
    #ff6570;

  font-style:
    normal;

  font-weight:
    700;
}


.market-source-v19 {
  display: block;

  margin-top:
    5px;

  color:
    #69778b;

  font-size:
    7.5px;
}


/* ==========================================================
   COLUMN FOOTER BUTTONS
   ========================================================== */

.signals-column-footer-v19 {
  flex:
    0 0 35px;

  height:
    35px;

  margin:
    0 10px 9px;

  border:
    1px solid
    #376da9;

  border-radius:
    5px;

  background:
    rgba(7,28,57,.38);

  color:
    #68aaff;

  font-size:
    8.5px;

  font-weight:
    650;
}


.signals-column-footer-v19:hover {
  border-color:
    #5287c8;

  background:
    rgba(12,40,77,.48);
}


/* ==========================================================
   LOADING / EMPTY
   ========================================================== */

.signals-state-v19,
.signals-empty-v19 {
  height:
    100%;

  min-height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    20px;

  text-align:
    center;

  color:
    #68778d;
}


.signals-state-v19 {
  flex-direction:
    row;

  font-size:
    8.5px;
}


.signals-state-v19 i {
  width:
    13px;

  height:
    13px;

  border:
    2px solid
    #30445f;

  border-top-color:
    #ffb82b;

  border-radius:
    50%;

  animation:
    signalsSpin
    .8s linear infinite;
}


.signals-empty-v19 > span {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(68,205,137,.18);

  border-radius:
    50%;

  color:
    #48cf8d;
}


.signals-empty-v19 strong {
  color:
    #9aa8ba;

  font-size:
    9px;
}


.signals-empty-v19 small {
  color:
    #65748a;

  font-size:
    8px;
}


.signals-empty-v19.error > span {
  border-color:
    rgba(255,84,97,.23);

  color:
    #ff6470;
}


/* ==========================================================
   BOTTOM BAR
   ========================================================== */

.signals-footer-v19 {
  min-height:
    62px;

  display: grid;

  grid-template-columns:
    minmax(260px, 1fr)
    auto
    auto;

  align-items: center;

  gap:
    16px;

  padding:
    8px 16px;

  border-top:
    1px solid
    rgba(47,71,106,.78);

  background:
    linear-gradient(
      180deg,
      rgba(8,23,45,.98),
      rgba(6,18,36,.99)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.018);
}


.signals-footer-copy-v19 {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 10px;
}


.signals-footer-copy-v19 > span {
  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

  display: grid;

  place-items:
    center;

  border:
    1px solid
    #4c8bdf;

  border-radius:
    50%;

  color:
    #68a9ff;
}


.signals-footer-copy-v19 svg {
  width:
    17px;

  height:
    17px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;
}


.signals-footer-copy-v19 p {
  margin: 0;

  overflow:
    hidden;

  color:
    #b4c0d0;

  font-size:
    9px;

  line-height:
    1.35;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


/* source pills */

.signals-source-pills-v19 {
  display: flex;

  align-items:
    center;

  gap: 6px;
}


.signals-source-pills-v19 span {
  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 9px;

  border:
    1px solid
    rgba(49,73,108,.83);

  border-radius:
    7px;

  background:
    rgba(8,22,43,.74);

  color:
    #a7b3c4;

  font-size:
    8px;

  white-space:
    nowrap;
}


.signals-source-pills-v19 svg {
  width:
    14px;

  height:
    14px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;
  stroke-linejoin:
    round;
}


.signals-source-pills-v19 .green svg {
  color:
    #48dc90;
}


.signals-source-pills-v19 .purple svg {
  color:
    #c46fff;
}


.signals-source-pills-v19 .orange svg {
  color:
    #ffb42a;
}


.signals-source-pills-v19 .blue svg {
  color:
    #63a7ff;
}


/* how */

.signals-how-v19 {
  min-height:
    34px;

  padding:
    0 12px;

  border:
    1px solid
    #3670b4;

  border-radius:
    7px;

  background:
    rgba(8,27,54,.38);

  color:
    #6eafff;

  font-size:
    8.5px;

  font-weight:
    650;

  white-space:
    nowrap;
}


/* ==========================================================
   MODAL
   ========================================================== */

.signals-modal-v19 {
  position:
    fixed;

  z-index:
    3000;

  inset:
    0;

  display:
    grid;

  place-items:
    center;
}


.signals-modal-v19[hidden] {
  display:
    none !important;
}


.signals-modal-backdrop-v19 {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(1,6,15,.80);

  backdrop-filter:
    blur(10px);
}


.signals-modal-card-v19 {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      600px,
      calc(100vw - 32px)
    );

  padding:
    27px;

  border:
    1px solid
    #314965;

  border-radius:
    16px;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(36,78,153,.14),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #0b1b34,
      #071327
    );

  box-shadow:
    0 34px 100px
    rgba(0,0,0,.57),

    inset 0 1px 0
    rgba(255,255,255,.035);
}


.signals-modal-close-v19 {
  position:
    absolute;

  top:
    12px;

  right:
    12px;

  width:
    31px;

  height:
    31px;

  border:
    0;

  border-radius:
    8px;

  background:
    rgba(255,255,255,.04);

  color:
    #8391a5;

  font-size:
    19px;
}


.signals-modal-icon-v19 {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(255,181,31,.32);

  border-radius:
    12px;

  color:
    #ffb82b;

  background:
    rgba(255,181,31,.05);
}


.signals-modal-icon-v19 svg {
  width:
    25px;

  height:
    25px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.6;
}


.signals-modal-card-v19 h3 {
  margin:
    15px 0 7px;

  color:
    #f0f4f9;

  font-size:
    20px;

  letter-spacing:
    -.02em;
}


.signals-modal-card-v19 > p {
  margin:
    0;

  color:
    #8897ac;

  font-size:
    11px;

  line-height:
    1.55;
}


.signals-modal-grid-v19 {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    9px;

  margin-top:
    18px;
}


.signals-modal-grid-v19 article {
  padding:
    13px;

  border:
    1px solid
    #2d4361;

  border-radius:
    9px;

  background:
    rgba(6,19,39,.65);
}


.signals-modal-grid-v19 article svg {
  width:
    19px;

  height:
    19px;

  margin-bottom:
    9px;

  fill: none;

  stroke:
    #ffb82b;

  stroke-width:
    1.7;
}


.signals-modal-grid-v19 strong,
.signals-modal-grid-v19 small {
  display:
    block;
}


.signals-modal-grid-v19 strong {
  color:
    #dbe3ee;

  font-size:
    10px;
}


.signals-modal-grid-v19 small {
  margin-top:
    5px;

  color:
    #718097;

  font-size:
    8px;

  line-height:
    1.4;
}


/* ==========================================================
   SMALL LAPTOPS
   ========================================================== */

@media(
  min-width: 761px
) and (
  max-height: 850px
) {

  .signals-head-v19 {
    min-height:
      91px;

    padding-top:
      11px;

    padding-bottom:
      10px;
  }


  .signals-title-v19 h2 {
    font-size:
      27px;
  }


  .signals-title-v19 p {
    margin-top:
      4px;
  }


  .signals-tabs-v19 {
    height:
      40px;
  }


  .signals-toolbar-v19 {
    min-height:
      49px;

    padding-top:
      5px;

    padding-bottom:
      5px;
  }


  .signals-toolbar-v19 select,
  .signals-search-v19,
  .signals-refresh-v19 {
    height:
      35px;

    min-height:
      35px;
  }


  .signals-new-v19 {
    height:
      35px;
  }


  .signals-column-v19 > header {
    min-height:
      43px;
  }


  .signal-item-v19 {
    padding-top:
      8px;

    padding-bottom:
      7px;
  }


  .signals-footer-v19 {
    min-height:
      53px;

    padding-top:
      6px;

    padding-bottom:
      6px;
  }


  .signals-source-pills-v19 span {
    min-height:
      28px;
  }

}


/* ==========================================================
   NARROW DESKTOP
   ========================================================== */

@media(max-width:1400px) {

  .signals-toolbar-v19 {
    grid-template-columns:
      minmax(210px,1fr)
      135px
      140px
      125px
      112px
      40px;

  }


  .signals-updated-v19 {
    display:
      none;
  }


  .signals-source-pills-v19
  span {
    padding:
      0 7px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  #screen-intelligence.active {
    overflow:
      auto !important;
  }


  .signals-v19 {
    height:
      auto;

    min-height:
      100vh;

    display:
      block;

    overflow:
      visible;
  }


  .signals-head-v19 {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .signals-notify-v19 {
    width:
      100%;
  }


  .signals-tabs-v19 {
    overflow-x:
      auto;
  }


  .signals-toolbar-v19 {
    grid-template-columns:
      1fr;

    padding:
      12px;
  }


  .signals-new-v19 {
    justify-content:
      flex-start;
  }


  .signals-updated-v19 {
    display:
      block;

    text-align:
      left;
  }


  .signals-grid-v19 {
    display:
      grid;

    grid-template-columns:
      1fr;

    overflow:
      visible;

    padding:
      0 12px 12px;
  }


  .signals-column-v19 {
    min-height:
      420px;
  }


  .signals-footer-v19 {
    grid-template-columns:
      1fr;
  }


  .signals-source-pills-v19 {
    flex-wrap:
      wrap;
  }


  .signals-how-v19 {
    width:
      100%;
  }


  .signals-modal-grid-v19 {
    grid-template-columns:
      1fr;
  }

}



/* activity-v20.css */

/* ==========================================================
   NOYTRIX ACTIVITY V20
   ========================================================== */

#screen-analytics.active {
  overflow: hidden !important;
}


.activity-v20 {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-rows:
    auto
    auto
    minmax(0,1.04fr)
    minmax(0,.92fr)
    auto;

  gap: 10px;

  overflow: hidden;

  padding: 4px 0 0;

  isolation: isolate;
}


.activity-v20::before {
  content: '';

  position: absolute;

  z-index: -1;

  top: -150px;
  left: 22%;

  width: 650px;
  height: 350px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(36,82,170,.10),
      transparent 70%
    );

  filter: blur(26px);

  pointer-events: none;
}


/* ==========================================================
   HEADER
   ========================================================== */

.activity-head-v20 {
  min-height: 95px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding: 4px 3px 3px;
}


.activity-head-v20 > div:first-child {
  min-width: 0;
}


.activity-eyebrow-v20 {
  display: block;

  margin-bottom: 5px;

  color: #ffb725;

  font-size: 10px;

  font-weight: 850;

  letter-spacing: .095em;

  text-shadow:
    0 0 16px
    rgba(255,181,31,.10);
}


.activity-head-v20 h2 {
  margin: 0;

  color: #f3f6fa;

  font-size:
    clamp(28px,2.2vw,37px);

  line-height: 1.04;

  letter-spacing: -.04em;

  font-weight: 800;

  text-shadow:
    0 7px 20px
    rgba(0,0,0,.36),

    0 20px 40px
    rgba(0,0,0,.18);
}


.activity-head-v20 p {
  margin: 7px 0 0;

  color: #8e9caf;

  font-size: 11.5px;

  line-height: 1.4;
}


/* right */

.activity-head-actions-v20 {
  display: flex;

  align-items: center;

  gap: 9px;
}


.activity-period-v20 {
  height: 41px;

  min-width: 185px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 0 10px;

  border:
    1px solid
    rgba(51,77,116,.92);

  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      rgba(9,24,48,.96),
      rgba(6,18,37,.98)
    );

  box-shadow:
    0 10px 27px
    rgba(0,0,0,.15),

    inset 0 1px 0
    rgba(255,255,255,.026);
}


.activity-period-v20 svg {
  width: 16px;
  height: 16px;

  fill: none;

  stroke: #d6deea;

  stroke-width: 1.7;

  stroke-linecap: round;
}


.activity-period-v20 select {
  min-width: 135px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #d9e0eb;

  font-family: inherit;

  font-size: 10px;

  font-weight: 620;
}


.activity-period-v20 option {
  background: #08162c;
}


.activity-export-v20 {
  height: 41px;

  min-width: 115px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border:
    1px solid
    #3574bb;

  border-radius: 8px;

  background:
    rgba(7,28,57,.38);

  color: #dce6f3;

  font-size: 10px;

  font-weight: 670;

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.12);
}


.activity-export-v20 svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.activity-export-v20:hover {
  border-color: #59a0ed;

  background:
    rgba(12,44,85,.48);
}


/* ==========================================================
   KPI
   ========================================================== */

.activity-kpis-v20 {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 11px;
}


.activity-kpi-v20 {
  min-width: 0;

  min-height: 89px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 13px 15px;

  border:
    1px solid
    rgba(47,72,108,.84);

  border-radius: 9px;

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(31,67,129,.09),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(8,23,47,.96),
      rgba(6,18,37,.97)
    );

  box-shadow:
    0 13px 35px
    rgba(0,0,0,.12),

    inset 0 1px 0
    rgba(255,255,255,.025);

  transition:
    transform .17s ease,
    border-color .17s ease,
    box-shadow .17s ease;
}


.activity-kpi-v20:hover {
  transform: translateY(-1px);

  border-color:
    rgba(63,94,139,.93);

  box-shadow:
    0 17px 42px
    rgba(0,0,0,.18),

    inset 0 1px 0
    rgba(255,255,255,.03);
}


.activity-kpi-icon-v20 {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: grid;

  place-items: center;

  border:
    1px solid currentColor;

  border-radius: 50%;

  background:
    rgba(255,255,255,.018);
}


.activity-kpi-icon-v20 svg {
  width: 25px;
  height: 25px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.65;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.activity-kpi-v20.blue
.activity-kpi-icon-v20 {
  color: #3e9eff;

  box-shadow:
    0 0 21px
    rgba(43,143,255,.08);
}


.activity-kpi-v20.red
.activity-kpi-icon-v20 {
  color: #f3444f;

  box-shadow:
    0 0 21px
    rgba(243,68,79,.08);
}


.activity-kpi-v20.gold
.activity-kpi-icon-v20 {
  color: #ffb400;

  box-shadow:
    0 0 21px
    rgba(255,180,0,.09);
}


.activity-kpi-v20.green
.activity-kpi-icon-v20 {
  color: #20c875;

  box-shadow:
    0 0 21px
    rgba(32,200,117,.08);
}


.activity-kpi-v20 small {
  display: block;

  color: #bcc5d3;

  font-size: 10px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


.activity-kpi-v20 strong {
  display: block;

  margin-top: 3px;

  color: #eef2f8;

  font-size: 26px;

  line-height: 1;

  font-weight: 770;
}


.activity-kpi-v20.red strong {
  color: #ff4d57;
}


.activity-kpi-v20.gold strong {
  color: #ffb400;
}


.activity-kpi-v20.green strong {
  color: #29d47f;
}


.activity-kpi-v20 em {
  display: block;

  margin-top: 5px;

  color: #8492a6;

  font-size: 8px;

  line-height: 1.25;

  font-style: normal;
}


.activity-kpi-v20 em.positive {
  color: #32d67f;
}


.activity-kpi-v20 em.negative {
  color: #ff6570;
}


/* ==========================================================
   GENERIC CARD
   ========================================================== */

.activity-card-v20 {
  min-width: 0;
  min-height: 0;

  border:
    1px solid
    rgba(47,72,108,.84);

  border-radius: 9px;

  background:
    radial-gradient(
      circle at 25% 0%,
      rgba(25,58,115,.07),
      transparent 38%
    ),
    linear-gradient(
      155deg,
      rgba(7,21,43,.96),
      rgba(5,16,34,.98)
    );

  box-shadow:
    0 14px 40px
    rgba(0,0,0,.11),

    inset 0 1px 0
    rgba(255,255,255,.022);

  overflow: hidden;
}


.activity-card-v20 h3 {
  margin: 0;

  color: #e5eaf2;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: -.01em;
}


/* ==========================================================
   MAIN ROW
   ========================================================== */

.activity-main-v20 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    1.6fr
    .92fr;

  gap: 11px;
}


/* ==========================================================
   CHART
   ========================================================== */

.activity-chart-card-v20 {
  display: grid;

  grid-template-rows:
    41px
    minmax(0,1fr)
    30px;

  padding: 0 15px;
}


.activity-chart-card-v20 > header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;
}


.activity-chart-period-v20 {
  display: flex;

  align-items: center;

  border:
    1px solid
    rgba(47,70,104,.78);

  border-radius: 6px;

  overflow: hidden;
}


.activity-chart-period-v20 button {
  min-width: 65px;

  height: 27px;

  border: 0;

  border-right:
    1px solid
    rgba(47,70,104,.7);

  background:
    rgba(8,22,43,.74);

  color: #91a0b4;

  font-size: 8px;

  font-weight: 620;
}


.activity-chart-period-v20 button:last-child {
  border-right: 0;
}


.activity-chart-period-v20 button.active {
  background:
    linear-gradient(
      135deg,
      #ffd044,
      #ffad12
    );

  color: #10151e;

  font-weight: 760;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.45);
}


.activity-chart-v20 {
  min-height: 0;

  height: 100%;
}


.activity-chart-v20 svg {
  width: 100%;
  height: 100%;

  overflow: visible;
}


.chart-grid-line {
  stroke:
    rgba(74,95,128,.22);

  stroke-width: 1;

  stroke-dasharray: 3 4;
}


.chart-y-label,
.chart-x-label {
  fill: #66758b;

  font-family:
    Inter,Arial,sans-serif;

  font-size: 8px;
}


.activity-line-all {
  fill: none;

  stroke: #4aa4ff;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.activity-line-risk {
  fill: none;

  stroke: #f34444;

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.activity-point-all {
  fill: #4ba6ff;

  stroke: #0b1a31;

  stroke-width: 1.3;
}


.activity-point-risk {
  fill: #f34444;

  stroke: #0b1a31;

  stroke-width: 1.2;
}


.activity-chart-legend-v20 {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 28px;

  color: #a2aec0;

  font-size: 8px;
}


.activity-chart-legend-v20 span {
  display: flex;

  align-items: center;

  gap: 6px;
}


.activity-chart-legend-v20 i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}


.activity-chart-legend-v20
.all i {
  background: #4ba6ff;
}


.activity-chart-legend-v20
.risk i {
  background: #f34444;
}


/* ==========================================================
   DONUT
   ========================================================== */

.activity-risk-card-v20 {
  display: grid;

  grid-template-rows:
    41px
    minmax(0,1fr)
    auto;

  padding: 0 15px 11px;
}


.activity-risk-card-v20 > h3 {
  display: flex;

  align-items: center;
}


.activity-risk-content-v20 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(120px,.9fr)
    minmax(145px,1fr);

  align-items: center;

  gap: 15px;
}


.activity-donut-v20 {
  position: relative;

  width:
    min(145px,15vh);

  aspect-ratio: 1;

  margin: auto;

  border-radius: 50%;

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.23),

    0 0 28px
    rgba(43,145,255,.025);
}


.activity-donut-v20::after {
  content: '';

  position: absolute;

  inset: 29%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 40% 30%,
      #0d1d35,
      #07162b 72%
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),

    0 0 0 1px
    rgba(46,70,106,.45);
}


.activity-donut-v20 > div {
  position: absolute;

  z-index: 2;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;
}


.activity-donut-v20 strong {
  color: #edf2f8;

  font-size: 27px;

  line-height: 1;
}


.activity-donut-v20 span {
  margin-top: 4px;

  color: #b4bfce;

  font-size: 9px;
}


.activity-risk-legend-v20 {
  display: grid;

  gap: 14px;
}


.activity-risk-legend-v20 > div {
  display: grid;

  grid-template-columns:
    9px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 8px;

  color: #b9c3d1;

  font-size: 9px;
}


.activity-risk-legend-v20 i {
  width: 8px;
  height: 8px;

  border-radius: 50%;
}


.activity-risk-legend-v20
i.safe {
  background: #24c875;
}


.activity-risk-legend-v20
i.medium {
  background: #ffad17;
}


.activity-risk-legend-v20
i.high {
  background: #f04444;
}


.activity-risk-legend-v20 strong {
  color: #dce4ed;

  font-size: 10px;
}


.activity-risk-summary-v20 {
  margin: 5px 0 0;

  color: #7e8da2;

  font-size: 8px;

  line-height: 1.4;
}


/* ==========================================================
   BOTTOM ROW
   ========================================================== */

.activity-bottom-v20 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    .92fr
    1.05fr
    1.05fr;

  gap: 11px;
}


/* ==========================================================
   TYPES
   ========================================================== */

.activity-types-v20 {
  padding: 13px 15px;
}


.activity-types-v20 h3 {
  margin-bottom: 11px;
}


#activityTypesV20 {
  display: grid;

  gap: 8px;
}


.activity-type-row-v20 {
  display: grid;

  grid-template-columns:
    20px
    82px
    minmax(65px,1fr)
    20px
    26px;

  align-items: center;

  gap: 6px;
}


.activity-type-icon-v20 {
  display: grid;

  place-items: center;

  color: #b7c2d0;
}


.activity-type-icon-v20 svg {
  width: 15px;
  height: 15px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.activity-type-row-v20 strong {
  color: #b8c2d1;

  font-size: 8.5px;

  font-weight: 590;
}


.activity-type-bar-v20 {
  position: relative;

  height: 6px;

  overflow: hidden;

  border-radius: 5px;

  background: #17305a;
}


.activity-type-bar-v20 i {
  position: absolute;

  inset: 0 auto 0 0;

  border-radius: 5px;

  background:
    linear-gradient(
      90deg,
      #ffd02d,
      #ffae12
    );

  box-shadow:
    0 0 10px
    rgba(255,180,18,.14);
}


.activity-type-count-v20 {
  color: #d1d9e5;

  font-size: 8.5px;

  text-align: right;
}


.activity-type-row-v20 small {
  color: #8996aa;

  font-size: 8px;

  text-align: right;
}


/* ==========================================================
   RECENT
   ========================================================== */

.activity-recent-v20 {
  display: grid;

  grid-template-rows:
    34px
    minmax(0,1fr)
    31px;

  padding: 9px 12px 8px;
}


.activity-recent-v20 h3 {
  display: flex;

  align-items: center;
}


.activity-recent-list-v20 {
  min-height: 0;

  overflow: hidden;
}


.activity-action-row-v20 {
  width: 100%;

  min-height: 37px;

  display: grid;

  grid-template-columns:
    28px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 8px;

  padding: 3px 0;

  border: 0;

  background: transparent;

  text-align: left;

  color: inherit;
}


.activity-action-row-v20:hover {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.018),
      transparent
    );
}


.activity-action-icon-v20 {
  width: 26px;
  height: 26px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(56,83,121,.68);

  border-radius: 50%;

  color: #51a7ff;

  background:
    rgba(37,113,199,.05);
}


.activity-action-row-v20.risk
.activity-action-icon-v20 {
  color: #f3444f;

  border-color:
    rgba(243,68,79,.34);

  background:
    rgba(243,68,79,.05);
}


.activity-action-row-v20.changed
.activity-action-icon-v20 {
  color: #ffad17;

  border-color:
    rgba(255,173,23,.34);
}


.activity-action-row-v20.tracking
.activity-action-icon-v20 {
  color: #4d9fff;
}


.activity-action-icon-v20 svg {
  width: 14px;
  height: 14px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.activity-action-copy-v20 {
  min-width: 0;
}


.activity-action-copy-v20 strong,
.activity-action-copy-v20 small {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.activity-action-copy-v20 strong {
  color: #d8e0ea;

  font-size: 8.5px;

  font-weight: 650;
}


.activity-action-copy-v20 small {
  margin-top: 1px;

  color: #8290a5;

  font-size: 7.5px;
}


.activity-action-row-v20 time {
  color: #8c99ab;

  font-size: 7.5px;

  white-space: nowrap;
}


.activity-recent-empty-v20 {
  height: 100%;

  display: grid;

  place-items: center;

  color: #67768c;

  font-size: 8px;

  text-align: center;
}


.activity-secondary-v20 {
  height: 29px;

  border:
    1px solid #3471b6;

  border-radius: 5px;

  background:
    rgba(7,27,55,.34);

  color: #69aaff;

  font-size: 8px;

  font-weight: 650;
}


/* ==========================================================
   RECOMMENDATION
   ========================================================== */

.activity-recommend-v20 {
  display: grid;

  grid-template-rows:
    auto
    minmax(0,1fr)
    36px
    24px;

  padding: 13px 15px 8px;
}


.activity-recommend-v20 h3 {
  color: #ffc21f;

  text-shadow:
    0 0 13px
    rgba(255,183,25,.08);
}


.activity-recommend-body-v20 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    51px
    minmax(0,1fr);

  align-items: center;

  gap: 13px;
}


.activity-bulb-v20 {
  width: 49px;
  height: 49px;

  display: grid;

  place-items: center;

  color: #ffc10e;
}


.activity-bulb-v20 svg {
  width: 43px;
  height: 43px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.35;

  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(
      0 0 8px
      rgba(255,193,14,.10)
    );
}


.activity-recommend-body-v20 p {
  margin: 0;

  color: #c1cad6;

  font-size: 9px;

  line-height: 1.45;
}


.activity-recommend-action-v20 {
  height: 34px;

  border:
    1px solid
    rgba(255,214,85,.45);

  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      #ffd142,
      #ffae12
    );

  color: #121820;

  font-size: 9px;

  font-weight: 800;

  box-shadow:
    0 9px 24px
    rgba(255,173,18,.12),

    inset 0 1px 0
    rgba(255,255,255,.40);
}


.activity-recommend-action-v20:hover {
  transform: translateY(-1px);

  box-shadow:
    0 12px 28px
    rgba(255,173,18,.20);
}


.activity-dismiss-v20 {
  border: 0;

  background: transparent;

  color: #65a7ef;

  font-size: 8px;
}


.activity-recommend-v20.dismissed
.activity-recommend-body-v20,
.activity-recommend-v20.dismissed
.activity-recommend-action-v20,
.activity-recommend-v20.dismissed
.activity-dismiss-v20 {
  opacity: .22;

  pointer-events: none;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.activity-footer-v20 {
  min-height: 58px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 7px 14px;

  border:
    1px solid
    rgba(47,72,108,.84);

  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      rgba(8,23,46,.96),
      rgba(6,18,37,.98)
    );

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.10),

    inset 0 1px 0
    rgba(255,255,255,.02);
}


.activity-footer-v20 > div {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 11px;
}


.activity-footer-v20 > div > span {
  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  display: grid;

  place-items: center;

  border:
    1px solid #e4ae18;

  border-radius: 50%;

  color: #ffc11b;
}


.activity-footer-v20 svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
}


.activity-footer-v20 p {
  min-width: 0;

  margin: 0;
}


.activity-footer-v20 strong,
.activity-footer-v20 small {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.activity-footer-v20 strong {
  color: #dce3ec;

  font-size: 9.5px;
}


.activity-footer-v20 small {
  margin-top: 2px;

  color: #7e8da2;

  font-size: 8px;
}


.activity-footer-v20 > button {
  min-width: 150px;

  height: 33px;

  border:
    1px solid
    rgba(255,183,31,.54);

  border-radius: 6px;

  background:
    rgba(255,181,31,.035);

  color: #ffbd2f;

  font-size: 8.5px;

  font-weight: 670;
}


/* ==========================================================
   HISTORY MODAL
   ========================================================== */

.activity-history-modal-v20 {
  position: fixed;

  z-index: 4000;

  inset: 0;

  display: grid;

  place-items: center;
}


.activity-history-modal-v20[hidden] {
  display: none !important;
}


.activity-history-backdrop-v20 {
  position: absolute;

  inset: 0;

  background:
    rgba(1,6,15,.82);

  backdrop-filter:
    blur(10px);
}


.activity-history-panel-v20 {
  position: relative;

  z-index: 1;

  width:
    min(
      700px,
      calc(100vw - 30px)
    );

  max-height:
    min(
      680px,
      calc(100vh - 50px)
    );

  display: grid;

  grid-template-rows:
    auto
    minmax(0,1fr);

  overflow: hidden;

  border:
    1px solid
    #314b6c;

  border-radius:
    15px;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(35,77,153,.14),
      transparent 37%
    ),
    linear-gradient(
      145deg,
      #0a1a33,
      #061326
    );

  box-shadow:
    0 38px 110px
    rgba(0,0,0,.60),

    inset 0 1px 0
    rgba(255,255,255,.032);
}


.activity-history-panel-v20 > header {
  min-height: 75px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 15px 18px;

  border-bottom:
    1px solid
    #273d5b;
}


.activity-history-panel-v20
> header span {
  color: #ffb725;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .09em;
}


.activity-history-panel-v20
> header h3 {
  margin: 4px 0 0;

  color: #edf2f8;

  font-size: 18px;
}


.activity-history-panel-v20
> header button {
  width: 32px;
  height: 32px;

  border: 0;

  border-radius: 8px;

  background:
    rgba(255,255,255,.04);

  color: #8997aa;

  font-size: 20px;
}


.activity-history-list-v20 {
  min-height: 0;

  overflow-y: auto;

  padding: 8px;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(70,94,129,.45)
    transparent;
}


.activity-history-row-v20 {
  width: 100%;

  min-height: 57px;

  display: grid;

  grid-template-columns:
    10px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 10px;

  padding: 7px 11px;

  border: 0;

  border-bottom:
    1px solid
    rgba(42,64,95,.62);

  background: transparent;

  text-align: left;
}


.activity-history-row-v20:hover {
  background:
    rgba(255,255,255,.025);
}


.activity-history-row-v20 > i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ffad17;
}


.activity-history-row-v20.safe
> i {
  background: #27c979;
}


.activity-history-row-v20.high
> i,
.activity-history-row-v20.critical
> i {
  background: #f0444e;
}


.activity-history-row-v20
strong,
.activity-history-row-v20
small {
  display: block;
}


.activity-history-row-v20
strong {
  color: #dce4ef;

  font-size: 10px;
}


.activity-history-row-v20
small {
  margin-top: 3px;

  color: #74839a;

  font-size: 8px;
}


.activity-history-row-v20
b {
  color: #aeb9c8;

  font-size: 10px;
}


.activity-history-empty-v20 {
  min-height: 260px;

  display: grid;

  place-items: center;

  color: #6e7d93;

  font-size: 10px;
}


/* ==========================================================
   LAPTOP COMPACT
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 850px
) {

  .activity-v20 {
    gap: 7px;

    grid-template-rows:
      auto
      auto
      minmax(0,1fr)
      minmax(0,.88fr)
      auto;
  }


  .activity-head-v20 {
    min-height: 72px;
  }


  .activity-head-v20 h2 {
    font-size: 28px;
  }


  .activity-head-v20 p {
    margin-top: 4px;
  }


  .activity-kpi-v20 {
    min-height: 71px;

    padding-top: 9px;
    padding-bottom: 9px;
  }


  .activity-kpi-icon-v20 {
    width: 37px;
    height: 37px;

    flex-basis: 37px;
  }


  .activity-kpi-icon-v20 svg {
    width: 21px;
    height: 21px;
  }


  .activity-kpi-v20 strong {
    font-size: 22px;
  }


  .activity-kpi-v20 em {
    margin-top: 3px;
  }


  .activity-chart-card-v20 {
    grid-template-rows:
      36px
      minmax(0,1fr)
      25px;
  }


  .activity-risk-card-v20 {
    grid-template-rows:
      36px
      minmax(0,1fr)
      auto;
  }


  .activity-donut-v20 {
    width:
      min(120px,14vh);
  }


  .activity-type-row-v20 {
    gap: 4px;
  }


  #activityTypesV20 {
    gap: 5px;
  }


  .activity-action-row-v20 {
    min-height: 31px;
  }


  .activity-footer-v20 {
    min-height: 49px;
  }

}


/* ==========================================================
   NARROW DESKTOP
   ========================================================== */

@media(max-width:1250px) {

  .activity-kpi-v20 {
    gap: 9px;

    padding-left: 10px;
    padding-right: 10px;
  }


  .activity-kpi-icon-v20 {
    width: 39px;
    height: 39px;

    flex-basis: 39px;
  }


  .activity-bottom-v20 {
    grid-template-columns:
      .9fr
      1fr
      1fr;
  }


  .activity-type-row-v20 {
    grid-template-columns:
      18px
      68px
      minmax(45px,1fr)
      18px
      24px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  #screen-analytics.active {
    overflow: auto !important;
  }


  .activity-v20 {
    height: auto;

    min-height: 100vh;

    display: block;

    overflow: visible;
  }


  .activity-head-v20 {
    flex-direction: column;

    align-items: flex-start;

    padding: 15px 0;
  }


  .activity-head-actions-v20 {
    width: 100%;
  }


  .activity-period-v20 {
    flex: 1;
  }


  .activity-kpis-v20 {
    grid-template-columns: 1fr;

    margin-bottom: 10px;
  }


  .activity-main-v20,
  .activity-bottom-v20 {
    grid-template-columns: 1fr;

    margin-bottom: 10px;
  }


  .activity-chart-card-v20 {
    min-height: 360px;
  }


  .activity-risk-card-v20 {
    min-height: 340px;
  }


  .activity-types-v20,
  .activity-recent-v20,
  .activity-recommend-v20 {
    min-height: 300px;
  }


  .activity-footer-v20 {
    flex-direction: column;

    align-items: stretch;
  }


  .activity-footer-v20 > button {
    width: 100%;
  }

}



/* readability-v21.css */

/* ==========================================================
   NOYTRIX V21
   GLOBAL READABILITY + ONE SCREEN
   ========================================================== */


/* ==========================================================
   1. ONE DESKTOP SCREEN
   ========================================================== */

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;

  overflow: hidden !important;
}


body {
  min-height: 100vh;
}


.app-shell {
  width: 100vw;
  height: 100vh;

  min-height: 0 !important;

  overflow: hidden !important;
}


main,
.workspace,
.workspace-main,
.main-content,
.content,
.screen-container {
  min-width: 0;
  min-height: 0;

  height: 100%;

  overflow: hidden;
}


.screen {
  min-width: 0;
  min-height: 0;

  max-height: 100%;

  overflow: hidden !important;
}


/* sidebar stays inside screen */

.sidebar,
.app-sidebar {
  height: 100vh !important;

  min-height: 0;

  overflow: hidden;
}


/* only chat list can scroll */

.session-list,
.recent-checks,
.sidebar-chats,
.chat-history-list {
  min-height: 0;

  overflow-y: auto;

  scrollbar-width: thin;
}


/* ==========================================================
   2. GLOBAL SMALL TEXT
   +2px approximately, heavier
   ========================================================== */

/*
   Do NOT touch h1/h2/large hero text.
*/

small,
label,
time,
select,
input,
textarea,
button {
  font-weight: 650;
}


/* normal small supporting copy */

small {
  font-size: 10px !important;

  font-weight: 650 !important;

  line-height: 1.4;
}


/* ==========================================================
   3. LEFT SIDEBAR
   ========================================================== */

.nav-item,
.workspace-nav .nav-item {
  font-size: 12px !important;

  font-weight: 700 !important;
}


.nav-item b,
.workspace-nav .nav-item b {
  font-size: 12px !important;

  font-weight: 700 !important;

  letter-spacing: -.01em;
}


.nav-label,
#recent-sessions,
.sidebar .nav-label {
  font-size: 10px !important;

  font-weight: 800 !important;

  letter-spacing: .08em;
}


.recent-item strong,
.session-list strong {
  font-size: 10.5px !important;

  font-weight: 700 !important;
}


.recent-item small,
.session-list small {
  font-size: 9px !important;

  font-weight: 650 !important;
}


.account strong {
  font-size: 11px !important;

  font-weight: 750 !important;
}


.account small {
  font-size: 9px !important;

  font-weight: 650 !important;
}


/* ==========================================================
   4. TOP BAR / LANGUAGE / SIGN IN
   ========================================================== */

#headerAccountButton,
.language-current,
.language-menu button,
[data-lang],
.header-actions button {
  font-size: 11px !important;

  font-weight: 750 !important;
}


.language-current span,
.language-current b {
  font-size: 11px !important;

  font-weight: 750 !important;
}


/* ==========================================================
   5. BUTTONS ACROSS SITE
   ========================================================== */

.primary-action,
.secondary-action,
.button-link,
#newCheck {
  font-size: 11px !important;

  font-weight: 750 !important;
}


button {
  letter-spacing: -.005em;
}


/* ==========================================================
   6. INPUTS / SEARCH / SELECTS
   ========================================================== */

input,
textarea,
select {
  font-size: 11px !important;

  font-weight: 650 !important;
}


input::placeholder,
textarea::placeholder {
  font-weight: 600 !important;

  opacity: .82;
}


/* ==========================================================
   7. PAGE EYEBROWS
   ========================================================== */

.eyebrow,
.context-label {
  font-size: 11px !important;

  font-weight: 850 !important;

  letter-spacing: .085em;
}


/* ==========================================================
   8. CHECK / CHAT
   ========================================================== */

.chat-log,
.chat-message,
.chat-message p,
.result-message,
.verdict-message,
.analysis-status {
  font-size: 12px;

  font-weight: 600;
}


.chat-message small,
.verdict-message small,
.analysis-status small {
  font-size: 10px !important;

  font-weight: 650 !important;
}


.analysis-stage,
.analysis-stage span,
.analysis-stage p {
  font-size: 10.5px !important;

  font-weight: 650 !important;
}


.post-scan-actions button {
  font-size: 10px !important;

  font-weight: 750 !important;
}


/* ==========================================================
   9. TRACKING
   ========================================================== */

.tracking-v14,
.tracking-v14 button,
.tracking-v14 select,
.tracking-v14 input {
  font-weight: 650;
}


.tracking-v14 small,
.tracking-v14 .tracking-small,
.tracking-v14 .tracking-meta {
  font-size: 10px !important;

  font-weight: 650 !important;
}


.tracking-v14 td,
.tracking-v14 th {
  font-size: 10.5px !important;

  font-weight: 650 !important;
}


/* ==========================================================
   10. SIGNALS V19
   ========================================================== */

.signals-eyebrow-v19 {
  font-size: 11px !important;

  font-weight: 850 !important;
}


.signals-title-v19 p {
  font-size: 13px !important;

  font-weight: 600 !important;
}


.signals-notify-v19 {
  font-size: 11px !important;

  font-weight: 750 !important;
}


.signals-tabs-v19 button {
  font-size: 12px !important;

  font-weight: 700 !important;
}


.signals-tabs-v19 b {
  font-size: 10px !important;

  font-weight: 800 !important;
}


.signals-search-v19 input,
.signals-toolbar-v19 select {
  font-size: 11px !important;

  font-weight: 650 !important;
}


.signals-new-v19 {
  font-size: 11px !important;

  font-weight: 650 !important;
}


.signals-updated-v19 {
  font-size: 10px !important;

  font-weight: 650 !important;
}


.signals-column-v19 h3 {
  font-size: 13px !important;

  font-weight: 750 !important;
}


.signals-column-v19 > header small {
  font-size: 10px !important;

  font-weight: 650 !important;
}


.signal-item-title-v19 > strong {
  font-size: 12px !important;

  font-weight: 720 !important;
}


.signal-item-title-v19 > p {
  font-size: 10.5px !important;

  font-weight: 600 !important;
}


.signal-badge-v19 {
  font-size: 9.5px !important;

  font-weight: 750 !important;
}


.signal-tags-v19 span {
  font-size: 9px !important;

  font-weight: 650 !important;
}


.signal-source-v19,
.market-source-v19 {
  font-size: 9px !important;

  font-weight: 600 !important;
}


.signal-item-v19 footer time {
  font-size: 9px !important;

  font-weight: 650 !important;
}


.signal-check-v19 {
  font-size: 10px !important;

  font-weight: 750 !important;
}


.community-count-v19 {
  font-size: 9px !important;

  font-weight: 750 !important;
}


.market-date-v19 {
  font-size: 10px !important;

  font-weight: 650 !important;
}


.signals-column-footer-v19 {
  font-size: 10px !important;

  font-weight: 750 !important;
}


.signals-footer-copy-v19 p {
  font-size: 10.5px !important;

  font-weight: 650 !important;
}


.signals-source-pills-v19 span {
  font-size: 10px !important;

  font-weight: 700 !important;
}


.signals-how-v19 {
  font-size: 10px !important;

  font-weight: 750 !important;
}


/* ==========================================================
   11. MY ACTIVITY V20
   ========================================================== */

.activity-eyebrow-v20 {
  font-size: 11px !important;

  font-weight: 850 !important;
}


.activity-head-v20 p {
  font-size: 13px !important;

  font-weight: 600 !important;
}


.activity-period-v20 select {
  font-size: 11px !important;

  font-weight: 700 !important;
}


.activity-export-v20 {
  font-size: 11px !important;

  font-weight: 750 !important;
}


/* KPI */

.activity-kpi-v20 small {
  font-size: 11px !important;

  font-weight: 650 !important;
}


.activity-kpi-v20 em {
  font-size: 10px !important;

  font-weight: 700 !important;

  line-height: 1.3;
}


/* cards */

.activity-card-v20 h3 {
  font-size: 13px !important;

  font-weight: 750 !important;
}


.activity-chart-period-v20 button {
  font-size: 9.5px !important;

  font-weight: 750 !important;
}


.activity-chart-legend-v20 {
  font-size: 10px !important;

  font-weight: 650 !important;
}


/* chart labels */

.chart-y-label,
.chart-x-label {
  font-size: 9.5px !important;

  font-weight: 650 !important;
}


/* donut */

.activity-donut-v20 span {
  font-size: 10px !important;

  font-weight: 650 !important;
}


.activity-risk-legend-v20 > div {
  font-size: 10.5px !important;

  font-weight: 650 !important;
}


.activity-risk-legend-v20 strong {
  font-size: 11px !important;

  font-weight: 750 !important;
}


.activity-risk-summary-v20 {
  font-size: 9.5px !important;

  font-weight: 650 !important;
}


/* What you check */

.activity-type-row-v20 strong {
  font-size: 10px !important;

  font-weight: 700 !important;
}


.activity-type-count-v20 {
  font-size: 10px !important;

  font-weight: 750 !important;
}


.activity-type-row-v20 small {
  font-size: 9.5px !important;

  font-weight: 700 !important;
}


/* Recent activity */

.activity-action-copy-v20 strong {
  font-size: 10px !important;

  font-weight: 720 !important;
}


.activity-action-copy-v20 small {
  font-size: 9px !important;

  font-weight: 650 !important;
}


.activity-action-row-v20 time {
  font-size: 9px !important;

  font-weight: 650 !important;
}


.activity-secondary-v20 {
  font-size: 9.5px !important;

  font-weight: 750 !important;
}


/* Recommendation */

.activity-recommend-body-v20 p {
  font-size: 10.5px !important;

  font-weight: 650 !important;

  line-height: 1.5;
}


.activity-recommend-action-v20 {
  font-size: 10.5px !important;

  font-weight: 800 !important;
}


.activity-dismiss-v20 {
  font-size: 9.5px !important;

  font-weight: 700 !important;
}


/* Activity footer */

.activity-footer-v20 strong {
  font-size: 10.5px !important;

  font-weight: 750 !important;
}


.activity-footer-v20 small {
  font-size: 9.5px !important;

  font-weight: 650 !important;
}


.activity-footer-v20 > button {
  font-size: 10px !important;

  font-weight: 750 !important;
}


/* ==========================================================
   12. BILLING / PRODUCTS / DEVELOPERS / SETTINGS
   ========================================================== */

.billing-v2,
.settings-v2,
.product-access,
.api-layout,
.pro-layout {
  font-weight: 600;
}


.billing-v2 p,
.settings-v2 p,
.product-access p,
.api-layout p,
.pro-layout p {
  font-size: 12px;

  font-weight: 600;
}


.billing-v2 small,
.settings-v2 small,
.product-access small,
.api-layout small,
.pro-layout small {
  font-size: 10px !important;

  font-weight: 650 !important;
}


.settings-control-label,
.settings-v2 label {
  font-size: 11px !important;

  font-weight: 700 !important;
}


.settings-hint {
  font-size: 10px !important;

  font-weight: 600 !important;
}


/* ==========================================================
   13. KEEP EVERYTHING INSIDE 100VH
   ========================================================== */

#screen-tracking.active,
#screen-intelligence.active,
#screen-analytics.active,
#screen-check.active,
#screen-api.active,
#screen-billing.active,
#screen-settings.active {
  max-height: 100%;

  overflow: hidden !important;
}


/* internal lists can scroll, page itself cannot */

.signals-feed-v19,
.activity-history-list-v20,
.watch-list,
.feed-list {
  overscroll-behavior: contain;
}


/* ==========================================================
   14. LAPTOP HEIGHT
   keep text larger without breaking one-screen layout
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 820px
) {

  .activity-head-v20 {
    min-height: 65px !important;
  }


  .activity-kpi-v20 {
    min-height: 66px !important;
  }


  .activity-v20 {
    gap: 6px !important;
  }


  .signals-head-v19 {
    min-height: 84px !important;
  }

}


/* ==========================================================
   15. MOBILE — allow natural scrolling
   ========================================================== */

@media(max-width:760px) {

  html,
  body {
    height: auto;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }


  .app-shell {
    width: 100%;

    height: auto;

    min-height: 100vh;

    overflow: visible !important;
  }


  .screen.active {
    height: auto;

    max-height: none;

    overflow: visible !important;
  }

}



/* activity-donut-v22.css */
/* ==========================================================
   NOYTRIX V22
   BIGGER DONUT CENTER ON MY ACTIVITY
   ========================================================== */

/* сам блок распределения риска */
.activity-risk-card-v20,
.activity-distribution-v20,
.activity-card-v20.activity-risk-v20 {
  min-height: 100% !important;
}

/* сам круг */
.activity-donut-v20,
.activity-risk-donut-v20,
.risk-donut-v20 {
  position: relative !important;

  width: 190px !important;
  height: 190px !important;
  min-width: 190px !important;
  min-height: 190px !important;

  margin: 8px auto 0 !important;
  flex: 0 0 190px !important;
}

/* внутренний круг по центру */
.activity-donut-v20::after,
.activity-risk-donut-v20::after,
.risk-donut-v20::after {
  content: "" !important;

  position: absolute !important;
  inset: 38px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(circle at 50% 35%, rgba(16,38,86,.82), rgba(4,12,34,.96) 78%),
    #07152f !important;

  box-shadow:
    inset 0 0 0 1px rgba(95,146,255,.14),
    0 8px 30px rgba(0,0,0,.34) !important;

  z-index: 1 !important;
}

/* текст в центре */
.activity-donut-v20 > div,
.activity-donut-v20 .activity-donut-center-v20,
.activity-donut-v20 .donut-center,
.activity-risk-donut-v20 > div,
.activity-risk-donut-v20 .activity-donut-center-v20,
.risk-donut-v20 > div,
.risk-donut-v20 .donut-center {
  position: absolute !important;
  inset: 38px !important;
  z-index: 2 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  border-radius: 50% !important;
  padding: 8px !important;
}

/* большая цифра */
.activity-donut-v20 > div strong,
.activity-donut-v20 > div b,
.activity-donut-v20 .activity-donut-center-v20 strong,
.activity-donut-v20 .activity-donut-center-v20 b,
.activity-donut-v20 .donut-center strong,
.activity-donut-v20 .donut-center b,
.activity-risk-donut-v20 > div strong,
.activity-risk-donut-v20 > div b,
.risk-donut-v20 > div strong,
.risk-donut-v20 > div b {
  display: block !important;

  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;

  white-space: nowrap !important;
}

/* подпись checks */
.activity-donut-v20 > div span,
.activity-donut-v20 > div small,
.activity-donut-v20 .activity-donut-center-v20 span,
.activity-donut-v20 .activity-donut-center-v20 small,
.activity-donut-v20 .donut-center span,
.activity-donut-v20 .donut-center small,
.activity-risk-donut-v20 > div span,
.activity-risk-donut-v20 > div small,
.risk-donut-v20 > div span,
.risk-donut-v20 > div small {
  display: block !important;

  margin-top: 2px !important;

  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
  opacity: .95 !important;
}

/* если число двухзначное/трехзначное */
.activity-donut-v20.double-digits > div strong,
.activity-risk-donut-v20.double-digits > div strong,
.risk-donut-v20.double-digits > div strong {
  font-size: 30px !important;
}

/* чуть больше воздуха между кругом и легендой */
.activity-risk-chart-v20,
.activity-risk-layout-v20,
.activity-risk-wrap-v20 {
  gap: 26px !important;
  align-items: center !important;
}

/* на более низких экранах */
@media (max-width: 1600px) {
  .activity-donut-v20,
  .activity-risk-donut-v20,
  .risk-donut-v20 {
    width: 178px !important;
    height: 178px !important;
    min-width: 178px !important;
    min-height: 178px !important;
    flex-basis: 178px !important;
  }

  .activity-donut-v20::after,
  .activity-risk-donut-v20::after,
  .risk-donut-v20::after {
    inset: 36px !important;
  }

  .activity-donut-v20 > div,
  .activity-donut-v20 .activity-donut-center-v20,
  .activity-donut-v20 .donut-center,
  .activity-risk-donut-v20 > div,
  .activity-risk-donut-v20 .activity-donut-center-v20,
  .risk-donut-v20 > div,
  .risk-donut-v20 .donut-center {
    inset: 36px !important;
  }

  .activity-donut-v20 > div strong,
  .activity-donut-v20 > div b,
  .activity-donut-v20 .activity-donut-center-v20 strong,
  .activity-donut-v20 .activity-donut-center-v20 b,
  .activity-donut-v20 .donut-center strong,
  .activity-donut-v20 .donut-center b,
  .activity-risk-donut-v20 > div strong,
  .activity-risk-donut-v20 > div b,
  .risk-donut-v20 > div strong,
  .risk-donut-v20 > div b {
    font-size: 31px !important;
  }

  .activity-donut-v20 > div span,
  .activity-donut-v20 > div small,
  .activity-donut-v20 .activity-donut-center-v20 span,
  .activity-donut-v20 .activity-donut-center-v20 small,
  .activity-donut-v20 .donut-center span,
  .activity-donut-v20 .donut-center small,
  .activity-risk-donut-v20 > div span,
  .activity-risk-donut-v20 > div small,
  .risk-donut-v20 > div span,
  .risk-donut-v20 > div small {
    font-size: 12px !important;
  }
}


/* products-v23.css */

/* ==========================================================
   NOYTRIX PRODUCTS V23
   DIGITAL BILLBOARD CAROUSEL
   ========================================================== */


#screen-products.active {
  overflow: hidden !important;

  padding: 0 !important;
}


.products-v23 {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  padding:
    4px 0 0;

  overflow: hidden;
}


/* ==========================================================
   STAGE
   ========================================================== */

.products-stage-v23 {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(48,74,113,.74);

  border-radius:
    18px;

  background:
    #061225;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.32),

    0 12px 35px
    rgba(0,0,0,.22),

    inset 0 1px 0
    rgba(255,255,255,.035);

  user-select: none;

  touch-action:
    pan-y;

  isolation: isolate;
}


.products-stage-v23::before {
  content: '';

  position: absolute;

  z-index: 50;

  pointer-events: none;

  inset: 0;

  border-radius:
    inherit;

  box-shadow:
    inset 0 0 100px
    rgba(0,0,0,.18);
}


.products-stage-v23.dragging {
  cursor: grabbing;
}


/* ==========================================================
   SLIDES
   ========================================================== */

.products-slides-v23 {
  width: 100%;
  height: 100%;

  display: flex;

  transition:
    transform
    .85s
    cubic-bezier(.22,.83,.24,1);

  will-change:
    transform;
}


.product-slide-v23 {
  position: relative;

  width: 100%;
  height: 100%;

  flex: 0 0 100%;

  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(0,1.02fr)
    minmax(420px,.98fr);

  align-items: center;

  gap:
    clamp(20px,3vw,55px);

  padding:
    clamp(32px,4.5vw,78px)
    clamp(40px,5vw,90px);

  overflow: hidden;

  cursor: pointer;

  isolation: isolate;
}


/* ==========================================================
   BILLBOARD GRID / NOISE
   ========================================================== */

.product-slide-grid-v23 {
  position: absolute;

  z-index: -2;

  inset: 0;

  opacity: .13;

  background-image:
    linear-gradient(
      rgba(255,255,255,.08)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.06)
      1px,
      transparent 1px
    );

  background-size:
    70px 70px;

  mask-image:
    linear-gradient(
      90deg,
      black,
      transparent 90%
    );
}


.product-slide-noise-v23 {
  position: absolute;

  z-index: 30;

  inset: 0;

  pointer-events: none;

  opacity: .025;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}


/* ==========================================================
   THEMES
   ========================================================== */


/* MOBILE */

.theme-mobile {
  background:
    radial-gradient(
      circle at 78% 38%,
      rgba(46,115,255,.28),
      transparent 27%
    ),

    radial-gradient(
      circle at 84% 64%,
      rgba(0,211,255,.13),
      transparent 32%
    ),

    linear-gradient(
      117deg,
      #030b19 0%,
      #06152c 47%,
      #061c42 100%
    );
}


.theme-mobile::before {
  content: '';

  position: absolute;

  z-index: -3;

  width: 800px;
  height: 800px;

  right: -260px;
  top: -290px;

  border-radius: 50%;

  border:
    1px solid
    rgba(68,139,255,.11);

  box-shadow:
    0 0 0 90px
    rgba(51,120,255,.025),

    0 0 0 180px
    rgba(51,120,255,.017);
}


/* EXTENSION */

.theme-extension {
  background:
    radial-gradient(
      circle at 78% 47%,
      rgba(255,175,17,.22),
      transparent 30%
    ),

    radial-gradient(
      circle at 56% 20%,
      rgba(255,79,55,.07),
      transparent 35%
    ),

    linear-gradient(
      116deg,
      #070b12 0%,
      #101015 49%,
      #261404 100%
    );
}


.theme-extension::before {
  content: '';

  position: absolute;

  z-index: -3;

  width: 600px;
  height: 600px;

  right: -140px;
  bottom: -210px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,181,25,.18),
      transparent 67%
    );

  filter:
    blur(30px);
}


/* TELEGRAM */

.theme-telegram {
  background:
    radial-gradient(
      circle at 78% 43%,
      rgba(0,171,255,.27),
      transparent 31%
    ),

    radial-gradient(
      circle at 70% 70%,
      rgba(61,126,255,.13),
      transparent 33%
    ),

    linear-gradient(
      118deg,
      #030a15 0%,
      #05192c 48%,
      #032a48 100%
    );
}


/* WEB */

.theme-web {
  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(65,95,255,.22),
      transparent 33%
    ),

    radial-gradient(
      circle at 82% 25%,
      rgba(255,181,31,.08),
      transparent 26%
    ),

    linear-gradient(
      118deg,
      #030817 0%,
      #07132c 50%,
      #0b1742 100%
    );
}


/* ==========================================================
   COPY
   ========================================================== */

.product-copy-v23 {
  position: relative;

  z-index: 5;

  max-width:
    780px;
}


.product-number-v23 {
  display: block;

  margin-bottom:
    25px;

  color:
    rgba(255,255,255,.22);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .18em;
}


.product-eyebrow-v23 {
  display: inline-flex;

  align-items: center;

  min-height:
    30px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255,188,42,.28);

  border-radius:
    999px;

  background:
    rgba(255,181,31,.035);

  color:
    #ffba2b;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .13em;

  box-shadow:
    0 0 30px
    rgba(255,181,31,.035);
}


.product-copy-v23 h2 {
  margin:
    22px 0 0;

  color:
    #f5f7fb;

  font-size:
    clamp(
      49px,
      5.2vw,
      92px
    );

  line-height:
    .94;

  letter-spacing:
    -.065em;

  font-weight:
    900;

  text-transform:
    uppercase;

  text-shadow:
    0 10px 25px
    rgba(0,0,0,.38),

    0 35px 80px
    rgba(0,0,0,.35);
}


.product-copy-v23 h2 em {
  display: block;

  margin-top:
    4px;

  color:
    #ffb927;

  font-style:
    normal;

  background:
    linear-gradient(
      180deg,
      #ffd760,
      #ffab12
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  filter:
    drop-shadow(
      0 9px 23px
      rgba(255,164,11,.12)
    );
}


.theme-telegram
.product-copy-v23 h2 em {
  background:
    linear-gradient(
      180deg,
      #77d8ff,
      #2aaeff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;
}


.theme-mobile
.product-copy-v23 h2 em,
.theme-web
.product-copy-v23 h2 em {
  background:
    linear-gradient(
      180deg,
      #80b8ff,
      #3a8fff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;
}


.product-copy-v23 > p {
  max-width:
    690px;

  margin:
    25px 0 0;

  color:
    #a9b5c6;

  font-size:
    clamp(
      14px,
      1.15vw,
      18px
    );

  line-height:
    1.55;

  font-weight:
    600;
}


/* ==========================================================
   CTA
   ========================================================== */

.product-actions-v23 {
  display: flex;

  align-items: center;

  gap:
    18px;

  margin-top:
    31px;
}


.product-cta-v23 {
  min-width:
    205px;

  height:
    51px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    15px;

  padding:
    0 9px 0 18px;

  border:
    1px solid
    rgba(255,219,104,.45);

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      #ffd75b,
      #ffad12
    );

  color:
    #10151c;

  font-size:
    12px;

  font-weight:
    850;

  box-shadow:
    0 15px 40px
    rgba(255,165,10,.18),

    0 0 40px
    rgba(255,181,31,.04),

    inset 0 1px 0
    rgba(255,255,255,.55);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.theme-mobile
.product-cta-v23,
.theme-telegram
.product-cta-v23,
.theme-web
.product-cta-v23 {
  border-color:
    rgba(103,175,255,.48);

  background:
    linear-gradient(
      135deg,
      #79c3ff,
      #328cff
    );

  box-shadow:
    0 15px 40px
    rgba(52,137,255,.18),

    inset 0 1px 0
    rgba(255,255,255,.48);
}


.product-cta-v23 b {
  width:
    34px;

  height:
    34px;

  display: grid;

  place-items: center;

  border-radius:
    8px;

  background:
    rgba(0,0,0,.11);

  font-size:
    17px;
}


.product-cta-v23:hover {
  transform:
    translateY(-2px)
    scale(1.01);

  box-shadow:
    0 20px 50px
    rgba(255,165,10,.28);
}


.product-actions-v23 > small {
  max-width:
    250px;

  color:
    #74839a;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1.4;
}


/* ==========================================================
   MASSIVE BACKGROUND WORD
   ========================================================== */

.product-massive-word-v23 {
  position: absolute;

  z-index: -1;

  left:
    clamp(30px,4vw,70px);

  bottom:
    -1.5vw;

  color:
    rgba(255,255,255,.022);

  font-size:
    clamp(
      120px,
      15vw,
      260px
    );

  line-height:
    .78;

  font-weight:
    950;

  letter-spacing:
    -.08em;

  pointer-events:
    none;
}


/* ==========================================================
   VISUAL AREA
   ========================================================== */

.product-visual-v23 {
  position: relative;

  z-index: 4;

  width: 100%;
  height:
    min(610px,68vh);

  display: grid;

  place-items: center;

  perspective:
    1500px;
}


/* ==========================================================
   MOBILE PHONE
   ========================================================== */

.product-phone-v23 {
  position: relative;

  width:
    min(290px,18vw);

  aspect-ratio:
    .51;

  border:
    5px solid
    #263a59;

  border-radius:
    39px;

  background:
    linear-gradient(
      160deg,
      #0a1831,
      #040b17
    );

  box-shadow:
    0 45px 100px
    rgba(0,0,0,.58),

    0 0 80px
    rgba(53,131,255,.15),

    inset 0 0 0 1px
    rgba(255,255,255,.05);

  transform:
    rotateY(-12deg)
    rotateX(3deg)
    rotateZ(3deg);

  animation:
    productPhoneFloat
    5s ease-in-out
    infinite;
}


@keyframes productPhoneFloat {

  0%,
  100% {
    transform:
      rotateY(-12deg)
      rotateX(3deg)
      rotateZ(3deg)
      translateY(0);
  }

  50% {
    transform:
      rotateY(-9deg)
      rotateX(1deg)
      rotateZ(2deg)
      translateY(-13px);
  }
}


.product-phone-top-v23 {
  position: absolute;

  z-index: 3;

  top: 8px;
  left: 50%;

  width: 86px;
  height: 22px;

  transform:
    translateX(-50%);

  border-radius:
    20px;

  background:
    #02050a;
}


.product-phone-screen-v23 {
  position: absolute;

  inset:
    11px;

  padding:
    70px 19px 20px;

  overflow: hidden;

  border-radius:
    30px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(53,127,255,.18),
      transparent 37%
    ),

    linear-gradient(
      180deg,
      #071a38,
      #040b17
    );
}


.phone-brand-v23 {
  position: absolute;

  top: 32px;
  left: 19px;

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    #dce8fa;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .12em;
}


.phone-brand-v23 span {
  color:
    #58a4ff;
}


.phone-status-v23 {
  width:
    max-content;

  display: flex;

  align-items: center;

  gap: 6px;

  margin:
    32px auto 23px;

  color:
    #72b8ff;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .10em;
}


.phone-status-v23 span {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #36d990;

  box-shadow:
    0 0 9px
    rgba(54,217,144,.55);
}


.product-phone-screen-v23 > strong {
  display: block;

  color:
    #f5f8fd;

  font-size:
    clamp(
      54px,
      4vw,
      72px
    );

  line-height:
    1;

  text-align:
    center;
}


.product-phone-screen-v23 > small {
  display: block;

  margin-top:
    5px;

  color:
    #69809c;

  font-size:
    8px !important;

  letter-spacing:
    .15em;

  text-align:
    center;
}


.phone-line-v23 {
  height:
    7px;

  margin-top:
    34px;

  border-radius:
    7px;

  background:
    #173963;
}


.phone-line-v23.short {
  width:
    68%;

  margin-top:
    12px;
}


.phone-safe-v23 {
  margin-top:
    34px;

  padding:
    15px 10px;

  border:
    1px solid
    rgba(45,218,143,.25);

  border-radius:
    9px;

  background:
    rgba(45,218,143,.055);

  color:
    #48dd96;

  font-size:
    9px;

  font-weight:
    800;

  text-align:
    center;
}


/* floating */

.product-float-card-v23 {
  position: absolute;

  display: flex;

  align-items: center;

  gap:
    9px;

  min-width:
    180px;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(93,151,239,.28);

  border-radius:
    12px;

  background:
    rgba(6,18,39,.73);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.28);
}


.product-float-card-v23 > span {
  width:
    31px;

  height:
    31px;

  display: grid;

  place-items: center;

  border-radius:
    8px;

  background:
    rgba(72,155,255,.10);

  color:
    #66afff;
}


.product-float-card-v23 b,
.product-float-card-v23 small {
  display: block;
}


.product-float-card-v23 b {
  color:
    #dbe7f7;

  font-size:
    9px;
}


.product-float-card-v23 small {
  margin-top:
    2px;

  color:
    #71859f;

  font-size:
    8px !important;
}


.mobile-card-one {
  top:
    22%;

  left:
    2%;
}


.mobile-card-two {
  right:
    0;

  bottom:
    22%;
}


/* ==========================================================
   BROWSER VISUAL
   ========================================================== */

.product-browser-v23 {
  width:
    min(650px,38vw);

  aspect-ratio:
    1.38;

  border:
    1px solid
    #3b4555;

  border-radius:
    15px;

  overflow: hidden;

  background:
    #10151d;

  box-shadow:
    0 55px 110px
    rgba(0,0,0,.56),

    0 0 90px
    rgba(255,169,25,.08);

  transform:
    perspective(1300px)
    rotateY(-8deg)
    rotateX(4deg)
    rotateZ(1deg);
}


.browser-bar-v23 {
  height:
    48px;

  display: flex;

  align-items: center;

  gap:
    7px;

  padding:
    0 13px;

  background:
    #1a1f27;

  border-bottom:
    1px solid
    #2c333e;
}


.browser-bar-v23 > i {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #4c5563;
}


.browser-bar-v23 > i:first-child {
  background:
    #ff5b55;
}


.browser-bar-v23 > div {
  flex: 1;

  height:
    28px;

  display: flex;

  align-items: center;

  margin-left:
    8px;

  padding:
    0 10px;

  border-radius:
    7px;

  background:
    #10141a;

  color:
    #838b97;

  font-size:
    8px;
}


.browser-body-v23 {
  height:
    calc(100% - 48px);

  display: grid;

  place-items: center;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255,171,16,.07),
      transparent 34%
    ),

    #080d13;
}


.browser-warning-v23 {
  width:
    70%;

  padding:
    26px;

  border:
    1px solid
    rgba(255,68,59,.38);

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      rgba(83,17,18,.34),
      rgba(19,10,13,.89)
    );

  text-align:
    center;

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.38),

    0 0 50px
    rgba(255,62,52,.05);
}


.browser-warning-v23 > span {
  width:
    48px;

  height:
    48px;

  display: grid;

  place-items: center;

  margin:
    0 auto 13px;

  border:
    2px solid
    #ff4c46;

  border-radius:
    50%;

  color:
    #ff514b;

  font-size:
    25px;

  font-weight:
    900;
}


.browser-warning-v23 small {
  display: block;

  color:
    #9b6563;

  font-size:
    8px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .13em;
}


.browser-warning-v23 strong {
  display: block;

  margin-top:
    8px;

  color:
    #ff5750;

  font-size:
    28px;
}


.browser-warning-v23 p {
  color:
    #9ca4ae;

  font-size:
    9px;

  line-height:
    1.4;
}


.browser-warning-v23 button {
  width:
    100%;

  height:
    34px;

  margin-top:
    10px;

  border:
    1px solid
    rgba(255,84,73,.42);

  border-radius:
    7px;

  background:
    rgba(255,77,69,.11);

  color:
    #ff655d;

  font-size:
    9px;

  font-weight:
    800;
}


.extension-shield-v23 {
  position: absolute;

  right:
    3%;

  top:
    9%;

  width:
    94px;

  height:
    94px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,184,31,.35);

  border-radius:
    25px;

  background:
    linear-gradient(
      145deg,
      rgba(255,182,31,.13),
      rgba(255,182,31,.025)
    );

  color:
    #ffc03c;

  font-size:
    43px;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.28),

    0 0 60px
    rgba(255,177,23,.09);

  transform:
    rotate(8deg);
}


/* ==========================================================
   TELEGRAM VISUAL
   ========================================================== */

.telegram-orbit-v23 {
  position: absolute;

  width:
    min(500px,31vw);

  aspect-ratio:
    1;

  border:
    1px solid
    rgba(65,179,255,.13);

  border-radius:
    50%;

  box-shadow:
    0 0 0 70px
    rgba(36,164,255,.025),

    0 0 0 140px
    rgba(36,164,255,.014);
}


.telegram-logo-v23 {
  position: absolute;

  top:
    9%;

  right:
    13%;

  width:
    120px;

  height:
    120px;

  display: grid;

  place-items: center;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #44c5ff,
      #1689e7
    );

  color:
    #fff;

  font-size:
    53px;

  box-shadow:
    0 30px 65px
    rgba(0,95,190,.32),

    0 0 70px
    rgba(61,187,255,.15);

  animation:
    telegramFloatV23
    5s ease-in-out
    infinite;
}


@keyframes telegramFloatV23 {
  50% {
    transform:
      translateY(-12px)
      rotate(4deg);
  }
}


.telegram-logo-v23 span {
  transform:
    translate(-3px,1px)
    rotate(-12deg);
}


.telegram-chat-v23 {
  position: relative;

  width:
    min(470px,29vw);

  min-height:
    370px;

  padding:
    33px 25px;

  border:
    1px solid
    rgba(73,145,204,.31);

  border-radius:
    24px;

  background:
    linear-gradient(
      160deg,
      rgba(7,29,52,.87),
      rgba(4,15,29,.91)
    );

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 45px 100px
    rgba(0,0,0,.42);

  transform:
    rotateY(-8deg)
    rotateZ(-2deg);
}


.tg-message-v23 {
  max-width:
    76%;

  padding:
    15px;

  border-radius:
    15px;

  font-size:
    9px;
}


.tg-message-v23.user {
  margin-left:
    auto;

  background:
    linear-gradient(
      145deg,
      #1f77c6,
      #155d9e
    );

  color:
    #e8f5ff;
}


.tg-message-v23.bot {
  margin-top:
    24px;

  background:
    #101d2b;

  border:
    1px solid
    #243b53;

  color:
    #b8c9dc;
}


.tg-message-v23.bot small,
.tg-message-v23.bot strong,
.tg-message-v23.bot span {
  display: block;
}


.tg-message-v23.bot small {
  color:
    #38b6ff;

  font-size:
    8px !important;

  font-weight:
    850 !important;
}


.tg-message-v23.bot strong {
  margin-top:
    8px;

  color:
    #ff5b61;

  font-size:
    28px;
}


.tg-message-v23.bot span {
  margin-top:
    6px;

  color:
    #a6b5c5;
}


/* ==========================================================
   WEB VISUAL
   ========================================================== */

.web-dashboard-v23 {
  width:
    min(650px,39vw);

  aspect-ratio:
    1.33;

  padding:
    19px;

  border:
    1px solid
    #334c75;

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(58,107,255,.13),
      transparent 35%
    ),

    linear-gradient(
      150deg,
      #0a1833,
      #050c1b
    );

  box-shadow:
    0 55px 110px
    rgba(0,0,0,.50),

    0 0 80px
    rgba(68,95,255,.08);

  transform:
    rotateY(-8deg)
    rotateX(3deg)
    rotateZ(1deg);
}


.web-dashboard-top-v23 {
  display: flex;

  justify-content: space-between;

  align-items: center;

  color:
    #d8e4f5;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .12em;
}


.web-dashboard-top-v23 > div {
  display: flex;

  align-items: center;

  gap:
    6px;

  color:
    #55db98;

  font-size:
    8px;
}


.web-dashboard-top-v23 i {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #46db92;

  box-shadow:
    0 0 10px
    #46db92;
}


.web-dashboard-grid-v23 {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    8px;

  margin-top:
    24px;
}


.web-dashboard-grid-v23 section {
  min-height:
    100px;

  padding:
    14px;

  border:
    1px solid
    #263d60;

  border-radius:
    10px;

  background:
    rgba(8,23,46,.72);
}


.web-dashboard-grid-v23 small,
.web-dashboard-grid-v23 strong,
.web-dashboard-grid-v23 em {
  display: block;
}


.web-dashboard-grid-v23 small {
  color:
    #687c99;

  font-size:
    7px !important;

  letter-spacing:
    .10em;
}


.web-dashboard-grid-v23 strong {
  margin-top:
    9px;

  color:
    #f0f5fd;

  font-size:
    28px;
}


.web-dashboard-grid-v23 em {
  margin-top:
    4px;

  color:
    #4e9fff;

  font-size:
    7px;

  font-style:
    normal;
}


.web-dashboard-chart-v23 {
  height:
    190px;

  display: flex;

  align-items: flex-end;

  gap:
    10px;

  margin-top:
    15px;

  padding:
    20px;

  border:
    1px solid
    #223758;

  border-radius:
    11px;

  background:
    rgba(4,15,32,.65);
}


.web-dashboard-chart-v23 i {
  flex: 1;

  border-radius:
    6px 6px 2px 2px;

  background:
    linear-gradient(
      180deg,
      #4ca5ff,
      #1d56b4
    );

  box-shadow:
    0 0 14px
    rgba(60,140,255,.10);
}


.web-dashboard-chart-v23 i:nth-child(1) { height:28%; }
.web-dashboard-chart-v23 i:nth-child(2) { height:42%; }
.web-dashboard-chart-v23 i:nth-child(3) { height:36%; }
.web-dashboard-chart-v23 i:nth-child(4) { height:69%; }
.web-dashboard-chart-v23 i:nth-child(5) { height:53%; }
.web-dashboard-chart-v23 i:nth-child(6) { height:81%; }
.web-dashboard-chart-v23 i:nth-child(7) { height:63%; }


.web-floating-score-v23 {
  position: absolute;

  right:
    0;

  bottom:
    11%;

  min-width:
    150px;

  padding:
    15px;

  border:
    1px solid
    rgba(255,187,36,.25);

  border-radius:
    12px;

  background:
    rgba(7,17,35,.76);

  backdrop-filter:
    blur(13px);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.28);
}


.web-floating-score-v23 small,
.web-floating-score-v23 strong {
  display: block;
}


.web-floating-score-v23 small {
  color:
    #8d7744;

  font-size:
    7px !important;

  letter-spacing:
    .10em;
}


.web-floating-score-v23 strong {
  margin-top:
    6px;

  color:
    #ffc13d;

  font-size:
    27px;
}


/* ==========================================================
   ARROWS
   ========================================================== */

.products-arrow-v23 {
  position: absolute;

  z-index: 80;

  top: 50%;

  width:
    48px;

  height:
    48px;

  display: grid;

  place-items: center;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(111,134,169,.26);

  border-radius:
    50%;

  background:
    rgba(5,15,31,.55);

  backdrop-filter:
    blur(13px);

  color:
    #aebdd1;

  font-size:
    18px;

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.24);

  transition:
    .18s ease;
}


.products-arrow-v23.previous {
  left:
    15px;
}


.products-arrow-v23.next {
  right:
    15px;
}


.products-arrow-v23:hover {
  border-color:
    rgba(255,185,37,.42);

  color:
    #ffc03c;

  background:
    rgba(12,24,44,.82);

  transform:
    translateY(-50%)
    scale(1.08);
}


/* ==========================================================
   DOT NAVIGATION
   ========================================================== */

.products-dots-v23 {
  position: absolute;

  z-index: 80;

  left: 50%;

  bottom:
    18px;

  display: flex;

  align-items: center;

  gap:
    5px;

  transform:
    translateX(-50%);

  padding:
    5px;

  border:
    1px solid
    rgba(73,96,128,.25);

  border-radius:
    11px;

  background:
    rgba(3,11,23,.52);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.20);
}


.products-dots-v23 button {
  position: relative;

  height:
    34px;

  display: flex;

  align-items: center;

  gap:
    7px;

  padding:
    0 10px;

  border: 0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #607086;

  font-size:
    9px;

  font-weight:
    700;

  transition:
    .2s ease;
}


.products-dots-v23 button i {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #435269;
}


.products-dots-v23 button.active {
  background:
    rgba(255,255,255,.045);

  color:
    #dce5f1;
}


.products-dots-v23 button.active i {
  background:
    #ffb82a;

  box-shadow:
    0 0 11px
    rgba(255,181,31,.40);
}


/* ==========================================================
   COUNTER
   ========================================================== */

.products-counter-v23 {
  position: absolute;

  z-index: 75;

  right:
    27px;

  bottom:
    24px;

  display: flex;

  align-items: center;

  gap:
    8px;

  color:
    #56667d;
}


.products-counter-v23 strong {
  color:
    #bdc8d7;

  font-size:
    11px;
}


.products-counter-v23 span {
  width:
    24px;

  height:
    1px;

  background:
    #3c4a60;
}


.products-counter-v23 small {
  font-size:
    9px !important;

  color:
    #59697f;
}


/* ==========================================================
   SWIPE LABEL
   ========================================================== */

.products-swipe-v23 {
  position: absolute;

  z-index: 70;

  left:
    28px;

  bottom:
    29px;

  color:
    #48586f;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .11em;
}


/* ==========================================================
   ENTRANCE
   ========================================================== */

.product-copy-v23,
.product-visual-v23 {
  transition:
    opacity .6s ease,
    transform .7s
    cubic-bezier(.2,.8,.2,1);
}


.product-slide-v23:not(
  :nth-child(1)
)
.product-copy-v23 {
  opacity:
    .92;
}


/* ==========================================================
   1440 / LAPTOP
   ========================================================== */

@media(max-width:1450px) {

  .product-slide-v23 {
    grid-template-columns:
      minmax(0,1.08fr)
      minmax(360px,.92fr);

    padding-left:
      50px;

    padding-right:
      50px;
  }


  .product-copy-v23 h2 {
    font-size:
      clamp(
        46px,
        4.5vw,
        72px
      );
  }


  .product-phone-v23 {
    width:
      min(250px,18vw);
  }


  .product-browser-v23,
  .web-dashboard-v23 {
    width:
      min(570px,38vw);
  }


  .telegram-chat-v23 {
    width:
      min(420px,29vw);
  }

}


/* ==========================================================
   SHORT SCREENS
   ========================================================== */

@media(
  min-width:761px
) and (
  max-height:820px
) {

  .product-slide-v23 {
    padding-top:
      34px;

    padding-bottom:
      44px;
  }


  .product-copy-v23 h2 {
    margin-top:
      14px;

    font-size:
      clamp(
        42px,
        4.3vw,
        66px
      );
  }


  .product-copy-v23 > p {
    margin-top:
      16px;
  }


  .product-actions-v23 {
    margin-top:
      21px;
  }


  .product-visual-v23 {
    height:
      min(
        500px,
        61vh
      );
  }


  .product-phone-v23 {
    width:
      min(
        220px,
        16vw
      );
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  #screen-products.active {
    overflow:
      hidden !important;
  }


  .products-v23 {
    height:
      calc(100vh - 90px);
  }


  .product-slide-v23 {
    grid-template-columns:
      1fr;

    grid-template-rows:
      auto
      minmax(250px,1fr);

    gap:
      15px;

    padding:
      32px 24px 70px;
  }


  .product-copy-v23 h2 {
    font-size:
      clamp(
        37px,
        12vw,
        59px
      );
  }


  .product-copy-v23 > p {
    font-size:
      12px;
  }


  .product-actions-v23 {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .product-visual-v23 {
    height:
      100%;
  }


  .product-phone-v23 {
    width:
      170px;
  }


  .product-browser-v23,
  .web-dashboard-v23 {
    width:
      min(
        95%,
        430px
      );
  }


  .telegram-chat-v23 {
    width:
      80%;
  }


  .products-dots-v23
  button span {
    display: none;
  }


  .products-dots-v23 button {
    width:
      27px;

    padding: 0;

    justify-content:
      center;
  }


  .products-swipe-v23,
  .products-counter-v23 {
    display: none;
  }


  .products-arrow-v23 {
    width:
      39px;

    height:
      39px;
  }

}



/* ==========================================================
   PRODUCTS V24 — REAL PRODUCT VISUALS
   ========================================================== */


/* ==========================================================
   REAL MOBILE PHONE
   ========================================================== */

.real-phone-scene-v24 {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


.real-phone-glow-v24 {
  position: absolute;

  width: 420px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(54,139,255,.28),
      rgba(54,139,255,.06) 43%,
      transparent 70%
    );

  filter: blur(32px);
}


.real-phone-v24 {
  position: relative;

  width: min(300px,19vw);

  aspect-ratio: .49;

  padding: 8px;

  border:
    2px solid
    rgba(152,171,201,.75);

  border-radius: 45px;

  background:
    linear-gradient(
      145deg,
      #5d687b,
      #1d2634 35%,
      #090d13 68%,
      #4c5666
    );

  box-shadow:
    0 55px 120px rgba(0,0,0,.60),
    0 0 95px rgba(52,132,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.25);

  transform:
    perspective(1500px)
    rotateY(-13deg)
    rotateX(3deg)
    rotateZ(3deg);

  animation:
    realPhoneFloatV24
    5s ease-in-out infinite;
}


@keyframes realPhoneFloatV24 {

  50% {
    transform:
      perspective(1500px)
      rotateY(-9deg)
      rotateX(1deg)
      rotateZ(2deg)
      translateY(-12px);
  }

}


.real-phone-screen-v24 {
  position: absolute;

  inset: 8px;

  overflow: hidden;

  border-radius: 37px;

  background: #030813;
}


.real-phone-screen-v24 img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: top center;
}


.real-phone-island-v24 {
  position: absolute;

  z-index: 5;

  top: 17px;
  left: 50%;

  width: 91px;
  height: 26px;

  transform: translateX(-50%);

  border-radius: 20px;

  background: #020305;

  box-shadow:
    0 2px 8px rgba(0,0,0,.5);
}


.real-phone-side-v24 {
  position: absolute;

  width: 3px;

  border-radius: 5px;

  background: #8590a1;
}


.real-phone-side-v24.left {
  left: -4px;
  top: 105px;

  height: 63px;
}


.real-phone-side-v24.right {
  right: -4px;
  top: 124px;

  height: 82px;
}


/* floating */

.real-product-badge-v24 {
  position: absolute;

  min-width: 175px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px;

  border:
    1px solid
    rgba(102,165,255,.31);

  border-radius: 13px;

  background:
    rgba(5,16,34,.72);

  backdrop-filter: blur(18px);

  box-shadow:
    0 20px 55px rgba(0,0,0,.35);
}


.real-product-badge-v24 > span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: #61aeff;

  background:
    rgba(58,147,255,.10);
}


.real-product-badge-v24 b,
.real-product-badge-v24 small {
  display: block;
}


.real-product-badge-v24 b {
  color: #e2ebf8;

  font-size: 9px;
}


.real-product-badge-v24 small {
  margin-top: 2px;

  color: #7488a3;

  font-size: 8px !important;
}


.mobile-security {
  left: 0;
  top: 24%;
}


.mobile-alert {
  right: 1%;
  bottom: 22%;
}


/* ==========================================================
   MACBOOK EXTENSION
   ========================================================== */

.macbook-scene-v24 {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


.macbook-back-glow-v24 {
  position: absolute;

  width: 600px;
  height: 450px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,180,25,.24),
      rgba(255,180,25,.04) 45%,
      transparent 72%
    );

  filter: blur(35px);
}


.macbook-v24 {
  position: relative;

  width: min(680px,41vw);

  transform:
    perspective(1600px)
    rotateY(-8deg)
    rotateX(3deg)
    rotateZ(1deg);

  filter:
    drop-shadow(
      0 55px 70px
      rgba(0,0,0,.55)
    );
}


.macbook-display-v24 {
  position: relative;

  aspect-ratio: 1.58;

  padding: 10px;

  border:
    2px solid #737a84;

  border-radius:
    18px 18px 10px 10px;

  background:
    linear-gradient(
      145deg,
      #6e757e,
      #161a20 20%,
      #050709 70%,
      #555c65
    );
}


.macbook-screen-v24 {
  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 10px;

  background: #02050a;
}


.macbook-screen-v24 img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center top;
}


.macbook-camera-v24 {
  position: absolute;

  z-index: 5;

  top: 4px;
  left: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #171c22;
}


.macbook-base-v24 {
  position: relative;

  width: 111%;
  height: 18px;

  margin-left: -5.5%;

  border-radius:
    2px 2px 40px 40px;

  background:
    linear-gradient(
      180deg,
      #adb2b8,
      #6b7076 45%,
      #34383d
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65);
}


.macbook-notch-v24 {
  width: 90px;
  height: 5px;

  margin: auto;

  border-radius:
    0 0 8px 8px;

  background: #767b81;
}


.extension-floating-warning-v24 {
  position: absolute;

  right: 2%;
  top: 16%;

  min-width: 180px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 13px;

  border:
    1px solid
    rgba(255,76,72,.35);

  border-radius: 13px;

  background:
    rgba(36,8,11,.75);

  backdrop-filter: blur(15px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.32),
    0 0 45px rgba(255,74,66,.07);
}


.extension-floating-warning-v24 > span {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border:
    1px solid #ff554f;

  border-radius: 50%;

  color: #ff5b55;

  font-weight: 900;
}


.extension-floating-warning-v24 small,
.extension-floating-warning-v24 strong {
  display: block;
}


.extension-floating-warning-v24 small {
  color: #8a6968;

  font-size: 7px !important;
}


.extension-floating-warning-v24 strong {
  margin-top: 3px;

  color: #ff625c;

  font-size: 10px;
}


/* ==========================================================
   TELEGRAM REAL SCREEN
   ========================================================== */

.telegram-real-scene-v24 {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


.telegram-real-glow-v24 {
  position: absolute;

  width: 580px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(41,170,255,.27),
      rgba(41,170,255,.05) 45%,
      transparent 72%
    );

  filter: blur(38px);
}


.telegram-window-v24 {
  position: relative;

  width: min(530px,33vw);

  overflow: hidden;

  border:
    1px solid
    rgba(89,151,199,.43);

  border-radius: 22px;

  background: #101c29;

  box-shadow:
    0 50px 110px rgba(0,0,0,.53),
    0 0 80px rgba(29,168,255,.12);

  transform:
    perspective(1400px)
    rotateY(-8deg)
    rotateZ(-2deg);
}


.telegram-window-top-v24 {
  height: 62px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 0 16px;

  background:
    linear-gradient(
      180deg,
      #182838,
      #132231
    );

  border-bottom:
    1px solid #243849;
}


.telegram-app-icon-v24 {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #42bfff,
      #188edc
    );

  color: white;

  transform: rotate(-12deg);
}


.telegram-window-top-v24 strong,
.telegram-window-top-v24 small {
  display: block;
}


.telegram-window-top-v24 strong {
  color: #e8f3fc;

  font-size: 11px;
}


.telegram-window-top-v24 small {
  margin-top: 2px;

  color: #6793af;

  font-size: 8px !important;
}


.telegram-window-top-v24 > i {
  width: 7px;
  height: 7px;

  margin-left: auto;

  border-radius: 50%;

  background: #3bd18d;

  box-shadow:
    0 0 10px #3bd18d;
}


.telegram-real-screen-v24 {
  height: min(520px,55vh);

  overflow: hidden;

  background: #0d1823;
}


.telegram-real-screen-v24 img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: top center;
}


.telegram-live-badge-v24 {
  position: absolute;

  right: 2%;
  bottom: 16%;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 11px 14px;

  border:
    1px solid
    rgba(75,193,255,.28);

  border-radius: 999px;

  background:
    rgba(5,23,40,.76);

  color: #7bcfff;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .10em;

  backdrop-filter: blur(14px);
}


.telegram-live-badge-v24 span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #43d895;

  box-shadow:
    0 0 9px rgba(67,216,149,.55);
}


/* ==========================================================
   ANTIVIRUS SLIDE
   ========================================================== */

.theme-antivirus {
  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(38,231,153,.17),
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 10%,
      rgba(66,113,255,.13),
      transparent 27%
    ),

    linear-gradient(
      118deg,
      #02070f 0%,
      #06131d 47%,
      #08251f 100%
    );
}


.theme-antivirus::before {
  content: '';

  position: absolute;

  z-index: -3;

  right: -250px;
  top: -270px;

  width: 760px;
  height: 760px;

  border-radius: 50%;

  border:
    1px solid
    rgba(48,222,156,.10);

  box-shadow:
    0 0 0 90px rgba(45,217,150,.022),
    0 0 0 180px rgba(45,217,150,.012);
}


.theme-antivirus
.product-copy-v23 h2 em {
  background:
    linear-gradient(
      180deg,
      #6fffc0,
      #25d98e
    );

  -webkit-background-clip: text;
  background-clip: text;
}


.theme-antivirus
.product-cta-v23 {
  border-color:
    rgba(99,255,191,.43);

  background:
    linear-gradient(
      135deg,
      #67fbb9,
      #25d68c
    );

  box-shadow:
    0 15px 40px
    rgba(38,214,140,.17),
    inset 0 1px 0
    rgba(255,255,255,.43);
}


.antivirus-scene-v24 {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


.antivirus-radar-v24 {
  position: absolute;

  width: 570px;
  height: 570px;

  border:
    1px solid
    rgba(54,219,154,.11);

  border-radius: 50%;
}


.antivirus-radar-v24::before,
.antivirus-radar-v24::after,
.antivirus-radar-v24 i {
  content: '';

  position: absolute;

  inset: 15%;

  border:
    1px solid
    rgba(54,219,154,.075);

  border-radius: 50%;
}


.antivirus-radar-v24::after {
  inset: 31%;
}


.antivirus-radar-v24 i:nth-child(1) {
  inset: 46%;
}


.antivirus-machine-v24 {
  position: relative;

  width: min(620px,38vw);
}


.antivirus-monitor-v24 {
  position: relative;

  aspect-ratio: 1.58;

  padding: 9px;

  border:
    2px solid
    #4c5963;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #58636d,
      #151a1e 21%,
      #050809 70%,
      #3f484f
    );

  box-shadow:
    0 55px 110px rgba(0,0,0,.56),
    0 0 85px rgba(43,220,150,.10);

  transform:
    perspective(1500px)
    rotateY(-7deg)
    rotateX(2deg);
}


.antivirus-monitor-top-v24 {
  height: 45px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 0 15px;

  border-radius: 9px 9px 0 0;

  background: #0c171a;

  color: #d8e9e3;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .12em;
}


.antivirus-monitor-top-v24 b {
  display: flex;

  align-items: center;

  gap: 6px;

  color: #4ade98;

  font-size: 7px;
}


.antivirus-monitor-top-v24 i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #43df96;

  box-shadow:
    0 0 10px #43df96;
}


.antivirus-monitor-content-v24 {
  height:
    calc(100% - 45px);

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(44,226,153,.10),
      transparent 37%
    ),

    linear-gradient(
      180deg,
      #071416,
      #04090b
    );
}


.antivirus-shield-v24 {
  width: 75px;
  height: 75px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(65,228,162,.38);

  border-radius: 22px;

  color: #43e19a;

  background:
    rgba(46,220,153,.045);

  font-size: 37px;

  box-shadow:
    0 0 45px
    rgba(42,218,148,.08);
}


.antivirus-monitor-content-v24 > strong {
  margin-top: 16px;

  color: #edf8f4;

  font-size: 24px;

  letter-spacing: .05em;
}


.antivirus-monitor-content-v24
> strong span {
  color: #48df99;
}


.antivirus-monitor-content-v24
> small {
  margin-top: 5px;

  color: #637d75;

  font-size: 8px !important;
}


.antivirus-live-row-v24 {
  display: flex;

  gap: 8px;

  margin-top: 26px;
}


.antivirus-live-row-v24 span {
  min-width: 91px;

  min-height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid
    rgba(57,111,96,.45);

  border-radius: 7px;

  background:
    rgba(17,40,34,.55);

  color: #9ab6ae;

  font-size: 7.5px;
}


.antivirus-live-row-v24 i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #3bdc92;
}


.antivirus-monitor-stand-v24 {
  width: 105px;
  height: 58px;

  margin: auto;

  clip-path:
    polygon(
      36% 0,
      64% 0,
      70% 77%,
      92% 84%,
      92% 100%,
      8% 100%,
      8% 84%,
      30% 77%
    );

  background:
    linear-gradient(
      180deg,
      #646e74,
      #30383d
    );
}


.antivirus-dev-label-v24 {
  position: absolute;

  top: 11%;
  right: 2%;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 11px 14px;

  border:
    1px solid
    rgba(53,222,153,.27);

  border-radius: 999px;

  background:
    rgba(7,29,23,.75);

  color: #57e6a4;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .11em;

  backdrop-filter: blur(14px);
}


.antivirus-dev-label-v24 span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #42df98;

  animation:
    antivirusPulseV24
    1.5s ease-in-out
    infinite;
}


@keyframes antivirusPulseV24 {

  50% {
    opacity: .35;

    box-shadow:
      0 0 14px
      #42df98;
  }

}


.antivirus-threat-v24 {
  position: absolute;

  left: 1%;
  bottom: 16%;

  min-width: 175px;

  padding: 13px;

  border:
    1px solid
    rgba(255,76,84,.30);

  border-radius: 12px;

  background:
    rgba(37,8,13,.74);

  backdrop-filter: blur(14px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.32);
}


.antivirus-threat-v24 small,
.antivirus-threat-v24 strong {
  display: block;
}


.antivirus-threat-v24 small {
  color: #ff6069;

  font-size: 7px !important;

  font-weight: 850 !important;

  letter-spacing: .12em;
}


.antivirus-threat-v24 strong {
  margin-top: 5px;

  color: #d7b4b6;

  font-size: 9px;

  line-height: 1.3;
}


/* ==========================================================
   SMALLER LAPTOPS
   ========================================================== */

@media(max-width:1450px) {

  .real-phone-v24 {
    width: min(250px,18vw);
  }


  .macbook-v24 {
    width: min(590px,40vw);
  }


  .telegram-window-v24 {
    width: min(465px,32vw);
  }


  .antivirus-machine-v24 {
    width: min(550px,38vw);
  }


  .antivirus-radar-v24 {
    width: 490px;
    height: 490px;
  }

}


@media(
  min-width:761px
) and (
  max-height:820px
) {

  .real-phone-v24 {
    width: min(215px,16vw);
  }


  .telegram-real-screen-v24 {
    height: min(420px,50vh);
  }


  .antivirus-machine-v24 {
    width: min(490px,35vw);
  }

}



/* ==========================================================
   ANTIVIRUS WAITLIST
   ========================================================== */

.antivirus-waitlist-v24 {
  position: fixed;

  z-index: 5000;

  inset: 0;

  display: grid;

  place-items: center;
}


.antivirus-waitlist-v24[hidden] {
  display: none !important;
}


.antivirus-waitlist-backdrop-v24 {
  position: absolute;

  inset: 0;

  background:
    rgba(1,7,12,.84);

  backdrop-filter:
    blur(14px);
}


.antivirus-waitlist-card-v24 {
  position: relative;

  z-index: 1;

  width:
    min(
      510px,
      calc(100vw - 30px)
    );

  padding:
    31px;

  border:
    1px solid
    rgba(68,217,158,.32);

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 25% 0%,
      rgba(43,218,148,.12),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #0a1b19,
      #06100f
    );

  box-shadow:
    0 40px 120px
    rgba(0,0,0,.65),

    0 0 70px
    rgba(40,218,146,.05),

    inset 0 1px 0
    rgba(255,255,255,.035);
}


.antivirus-waitlist-close-v24 {
  position: absolute;

  top: 13px;
  right: 13px;

  width: 33px;
  height: 33px;

  border: 0;

  border-radius: 8px;

  background:
    rgba(255,255,255,.04);

  color: #7e938c;

  font-size: 20px;
}


.antivirus-waitlist-mark-v24 {
  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(70,226,164,.35);

  border-radius: 13px;

  color: #49df9d;

  background:
    rgba(48,218,151,.05);

  font-size: 24px;
}


.antivirus-waitlist-eyebrow-v24 {
  display: block;

  margin-top: 19px;

  color: #45d897;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .12em;
}


.antivirus-waitlist-card-v24 h3 {
  margin: 6px 0 0;

  color: #eff8f5;

  font-size: 29px;

  letter-spacing: -.035em;
}


.antivirus-waitlist-card-v24 p {
  margin: 11px 0 0;

  color: #829a92;

  font-size: 11px;

  line-height: 1.55;
}


#antivirusWaitlistFormV24 {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 8px;

  margin-top: 22px;
}


#antivirusEmailV24 {
  height: 45px;

  padding: 0 13px;

  border:
    1px solid
    #315148;

  border-radius: 9px;

  outline: 0;

  background: #071310;

  color: #e1eee9;

  font-size: 11px !important;

  font-weight: 650 !important;
}


#antivirusEmailV24:focus {
  border-color:
    rgba(66,220,158,.54);

  box-shadow:
    0 0 0 3px
    rgba(54,218,153,.035);
}


#antivirusWaitlistFormV24
button {
  min-width: 155px;

  height: 45px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  border:
    1px solid
    rgba(110,255,197,.42);

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #67fbbc,
      #29d991
    );

  color: #07140f;

  font-size: 10px;

  font-weight: 850;
}


.antivirus-waitlist-card-v24
> small {
  display: block;

  margin-top: 10px;

  color: #536b63;

  font-size: 8px !important;

  font-weight: 650 !important;
}



/* ==========================================================
   PRODUCTS V25 — FULL MACBOOK WITH KEYBOARD
   ========================================================== */


/*
   Даём ноутбуку больше визуального пространства.
   Теперь он целиком помещается справа.
*/

.theme-extension .product-visual-v23 {
  overflow: visible !important;

  height:
    min(650px, 72vh) !important;

  padding:
    20px 12px 35px !important;
}


.macbook-scene-v24 {
  overflow: visible !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding:
    10px 20px 45px !important;
}


/* ==========================================================
   FULL LAPTOP
   ========================================================== */

.macbook-v24 {
  position: relative !important;

  width:
    min(640px, 38vw) !important;

  max-width:
    100% !important;

  transform:
    perspective(1700px)
    rotateY(-6deg)
    rotateX(4deg)
    rotateZ(.4deg)
    translateX(-8px) !important;

  transform-origin:
    center center !important;

  filter:
    drop-shadow(
      0 45px 55px
      rgba(0,0,0,.55)
    ) !important;

  overflow:
    visible !important;
}


/* ==========================================================
   DISPLAY
   ========================================================== */

.macbook-display-v24 {
  position: relative !important;

  z-index: 5 !important;

  width: 100% !important;

  aspect-ratio:
    16 / 10 !important;

  padding:
    9px !important;

  border:
    2px solid
    rgba(153,160,169,.85) !important;

  border-radius:
    18px 18px 10px 10px !important;

  background:
    linear-gradient(
      145deg,
      #8d949c 0%,
      #333941 7%,
      #11151b 20%,
      #06080c 78%,
      #6e757d 100%
    ) !important;

  box-shadow:
    inset 0 1px 1px
    rgba(255,255,255,.35),

    inset 0 -1px 1px
    rgba(0,0,0,.65) !important;
}


/* screenshot теперь НЕ обрезаем */

.macbook-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border-radius:
    9px !important;

  background:
    #02060c !important;

  box-shadow:
    inset 0 0 25px
    rgba(0,0,0,.45) !important;
}


.macbook-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #02060c !important;
}


/* camera */

.macbook-camera-v24 {
  position: absolute !important;

  z-index: 8 !important;

  top: 3px !important;
  left: 50% !important;

  width: 5px !important;
  height: 5px !important;

  transform:
    translateX(-50%) !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,
      #172536,
      #030508 70%
    ) !important;

  box-shadow:
    0 0 0 1px
    rgba(255,255,255,.025) !important;
}


/* ==========================================================
   HINGE
   ========================================================== */

.macbook-hinge-v25 {
  position: relative;

  z-index: 7;

  width: 91%;
  height: 10px;

  margin:
    -2px auto 0;

  border-radius:
    0 0 8px 8px;

  background:
    linear-gradient(
      180deg,
      #24292f,
      #6f767d 38%,
      #32373d
    );

  box-shadow:
    0 2px 3px
    rgba(0,0,0,.55);
}


/* ==========================================================
   KEYBOARD DECK
   ========================================================== */

.macbook-keyboard-deck-v25 {
  position: relative;

  z-index: 4;

  width: 113%;

  min-height:
    205px;

  margin:
    -2px 0 0
    -6.5%;

  padding:
    19px 29px 15px;

  clip-path:
    polygon(
      4% 0,
      96% 0,
      100% 90%,
      97% 100%,
      3% 100%,
      0 90%
    );

  background:
    linear-gradient(
      165deg,
      #c0c4c8 0%,
      #8f959b 16%,
      #757b81 43%,
      #a2a7ac 68%,
      #686d72 100%
    );

  box-shadow:
    inset 0 2px 2px
    rgba(255,255,255,.65),

    inset 0 -4px 8px
    rgba(0,0,0,.25),

    0 18px 35px
    rgba(0,0,0,.24);

  transform:
    perspective(1000px)
    rotateX(61deg);

  transform-origin:
    top center;
}


/* ==========================================================
   KEYBOARD
   ========================================================== */

.macbook-keyboard-v25 {
  width: 71%;

  margin:
    0 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    5px 8px 8px;

  border-radius:
    7px;

  background:
    rgba(58,62,67,.18);

  box-shadow:
    inset 0 1px 1px
    rgba(0,0,0,.25);
}


.macbook-key-row-v25 {
  width: 100%;

  display:
    flex;

  justify-content:
    center;

  gap:
    4px;
}


.macbook-key-row-v25 i {
  width:
    23px;

  height:
    18px;

  flex:
    0 0 23px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    3px;

  background:
    linear-gradient(
      180deg,
      #24282d,
      #111419
    );

  box-shadow:
    0 1px 1px
    rgba(0,0,0,.75),

    inset 0 1px 0
    rgba(255,255,255,.055);
}


.macbook-key-row-v25
i.wide {
  width:
    31px;

  flex-basis:
    31px;
}


.macbook-key-row-v25
i.wide2 {
  width:
    38px;

  flex-basis:
    38px;
}


.macbook-key-row-v25
i.wide3 {
  width:
    47px;

  flex-basis:
    47px;
}


.macbook-key-row-v25
i.space {
  width:
    135px;

  flex-basis:
    135px;
}


.macbook-key-row-v25.bottom {
  margin-top:
    1px;
}


/* subtle key labels */

.macbook-key-row-v25 i::after {
  content: '';

  display: block;

  width: 5px;
  height: 1px;

  margin:
    5px auto 0;

  border-radius:
    2px;

  background:
    rgba(255,255,255,.20);
}


/* ==========================================================
   TRACKPAD
   ========================================================== */

.macbook-trackpad-v25 {
  position: absolute;

  left: 50%;
  bottom: 17px;

  width:
    155px;

  height:
    72px;

  transform:
    translateX(-50%);

  border:
    1px solid
    rgba(62,67,73,.32);

  border-radius:
    6px;

  background:
    linear-gradient(
      145deg,
      rgba(191,195,199,.46),
      rgba(123,129,135,.30)
    );

  box-shadow:
    inset 0 1px 1px
    rgba(255,255,255,.35);
}


/* ==========================================================
   FRONT EDGE
   ========================================================== */

.macbook-front-lip-v25 {
  position: relative;

  z-index: 3;

  width:
    116%;

  height:
    12px;

  margin:
    -83px 0 0
    -8%;

  border-radius:
    0 0 50% 50%;

  background:
    linear-gradient(
      180deg,
      #858a8f,
      #42474c
    );

  box-shadow:
    0 10px 17px
    rgba(0,0,0,.34);
}


.macbook-front-lip-v25::after {
  content: '';

  position: absolute;

  top: 1px;
  left: 50%;

  width:
    82px;

  height:
    4px;

  transform:
    translateX(-50%);

  border-radius:
    0 0 7px 7px;

  background:
    #666b70;
}


/* ==========================================================
   THREAT BADGE
   Не даём ему вылезать за экран
   ========================================================== */

.extension-floating-warning-v24 {
  z-index: 20 !important;

  top:
    17% !important;

  right:
    -1% !important;

  min-width:
    166px !important;

  transform:
    translateX(-3px) !important;
}


/* ==========================================================
   GLOW
   ========================================================== */

.macbook-back-glow-v24 {
  width:
    680px !important;

  height:
    560px !important;

  background:
    radial-gradient(
      circle,
      rgba(255,181,31,.20),
      rgba(255,181,31,.055) 41%,
      transparent 69%
    ) !important;

  filter:
    blur(42px) !important;
}


/* ==========================================================
   1440 / NOTEBOOK SCREENS
   ========================================================== */

@media(max-width:1450px) {

  .macbook-v24 {
    width:
      min(575px,37vw) !important;

    transform:
      perspective(1600px)
      rotateY(-5deg)
      rotateX(4deg)
      translateX(-4px) !important;
  }


  .macbook-keyboard-deck-v25 {
    min-height:
      180px;

    padding:
      16px 25px 13px;
  }


  .macbook-key-row-v25 i {
    width:
      20px;

    height:
      16px;

    flex-basis:
      20px;
  }


  .macbook-key-row-v25 i.space {
    width:
      115px;

    flex-basis:
      115px;
  }


  .macbook-trackpad-v25 {
    width:
      135px;

    height:
      62px;
  }


  .macbook-front-lip-v25 {
    margin-top:
      -73px;
  }

}


/* ==========================================================
   SHORT SCREENS
   ТВОЙ ТЕКУЩИЙ РАЗМЕР ЭКРАНА
   ========================================================== */

@media(
  min-width:761px
) and (
  max-height:850px
) {

  .theme-extension
  .product-visual-v23 {
    height:
      min(560px,64vh) !important;

    padding-bottom:
      25px !important;
  }


  .macbook-v24 {
    width:
      min(520px,35vw) !important;

    transform:
      perspective(1500px)
      rotateY(-4deg)
      rotateX(3deg)
      translateY(-3px) !important;
  }


  .macbook-keyboard-deck-v25 {
    min-height:
      164px;
  }


  .macbook-keyboard-v25 {
    transform:
      scale(.90);

    transform-origin:
      top center;
  }


  .macbook-trackpad-v25 {
    width:
      120px;

    height:
      54px;
  }


  .macbook-front-lip-v25 {
    margin-top:
      -65px;
  }


  .extension-floating-warning-v24 {
    top:
      13% !important;

    right:
      -2% !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .macbook-v24 {
    width:
      min(440px,92vw) !important;

    transform:
      perspective(1200px)
      rotateY(-2deg)
      rotateX(2deg) !important;
  }


  .macbook-keyboard-deck-v25 {
    min-height:
      140px;
  }


  .macbook-keyboard-v25 {
    transform:
      scale(.75);

    transform-origin:
      top center;
  }


  .extension-floating-warning-v24 {
    display:
      none !important;
  }

}



/* ==========================================================
   NOYTRIX PRODUCTS — MACBOOK V26
   smaller + realistic proportions
   ========================================================== */


/* убиваем старую геометрию V25 */

.macbook-keyboard-deck-v25,
.macbook-keyboard-v25,
.macbook-trackpad-v25,
.macbook-front-lip-v25 {
  display: none !important;
}


/* ==========================================================
   SCENE
   ========================================================== */

.theme-extension .product-visual-v23 {
  overflow: visible !important;

  height: 100% !important;

  min-height: 0 !important;

  padding:
    18px 18px 45px !important;
}


.macbook-scene-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/*
   Главное изменение:
   ноутбук теперь заметно меньше.
*/

.macbook-v24 {
  position: relative !important;

  z-index: 5 !important;

  width:
    min(470px, 30vw) !important;

  max-width:
    470px !important;

  margin:
    -5px 10px 0 0 !important;

  overflow:
    visible !important;

  transform:
    perspective(1800px)
    rotateY(-4deg)
    rotateX(1.5deg)
    rotateZ(.2deg) !important;

  transform-origin:
    center center !important;

  filter:
    drop-shadow(
      0 35px 35px
      rgba(0,0,0,.46)
    ) !important;
}


/* ==========================================================
   DISPLAY — THIN REALISTIC BEZELS
   ========================================================== */

.macbook-display-v24 {
  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;

  aspect-ratio:
    16 / 10 !important;

  padding:
    6px 6px 8px !important;

  border:
    1px solid
    rgba(176,183,190,.82) !important;

  border-radius:
    13px 13px 7px 7px !important;

  background:
    linear-gradient(
      120deg,
      #8e9499 0%,
      #4b5055 3%,
      #131619 8%,
      #090b0d 91%,
      #777d82 98%,
      #9aa0a5 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.36),

    inset 0 -1px 0
    rgba(0,0,0,.65),

    0 3px 5px
    rgba(0,0,0,.32) !important;
}


/* тонкая чёрная область вокруг LCD */

.macbook-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  overflow: hidden !important;

  border-radius:
    8px 8px 4px 4px !important;

  background:
    #02050a !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.018),

    inset 0 0 15px
    rgba(0,0,0,.65) !important;
}


.macbook-screen-v24::after {
  content: '';

  position: absolute;

  pointer-events: none;

  inset: 0;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.035),
      transparent 23%,
      transparent 77%,
      rgba(255,255,255,.012)
    );
}


/* screenshot целиком */

.macbook-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: contain !important;

  object-position:
    center center !important;

  background:
    #02050a !important;
}


/* камера */

.macbook-camera-v24 {
  top: 2px !important;

  width: 4px !important;
  height: 4px !important;

  background:
    radial-gradient(
      circle at 40% 35%,
      #204468,
      #030507 58%
    ) !important;

  box-shadow:
    0 0 0 1px
    rgba(0,0,0,.8) !important;
}


/* ==========================================================
   HINGE
   ========================================================== */

.macbook-hinge-v25 {
  position: relative !important;

  z-index: 9 !important;

  width: 94% !important;
  height: 7px !important;

  margin:
    -1px auto 0 !important;

  border-radius:
    0 0 8px 8px !important;

  background:
    linear-gradient(
      180deg,
      #15191d 0%,
      #585e63 34%,
      #8c9297 60%,
      #33383c 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.20),

    0 1px 3px
    rgba(0,0,0,.45) !important;
}


/* ==========================================================
   ALUMINIUM TOP CASE
   ========================================================== */

.macbook-keyboard-deck-v26 {
  position: relative;

  z-index: 7;

  width: 108%;

  height: 145px;

  margin:
    -2px 0 0
    -4%;

  padding:
    12px 20px 10px;

  clip-path:
    polygon(
      4% 0,
      96% 0,
      100% 91%,
      98.5% 100%,
      1.5% 100%,
      0 91%
    );

  background:
    linear-gradient(
      110deg,
      #aeb3b7 0%,
      #d1d4d6 17%,
      #a6abae 39%,
      #c6c9cb 62%,
      #979da1 84%,
      #c1c5c7 100%
    );

  box-shadow:
    inset 0 2px 1px
    rgba(255,255,255,.58),

    inset 0 -3px 5px
    rgba(70,74,78,.32),

    0 10px 18px
    rgba(0,0,0,.19);

  transform:
    perspective(900px)
    rotateX(63deg);

  transform-origin:
    top center;
}


/* brushed aluminium */

.macbook-keyboard-deck-v26::before {
  content: '';

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .17;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.20) 0,
      rgba(255,255,255,.20) 1px,
      transparent 1px,
      transparent 4px
    );
}


/* ==========================================================
   KEYBOARD
   ========================================================== */

.macbook-keyboard-v26 {
  position: absolute;

  z-index: 3;

  top: 13px;
  left: 50%;

  width: 70%;

  transform:
    translateX(-50%);

  display: grid;

  grid-template-columns:
    repeat(14, minmax(0,1fr));

  grid-auto-rows:
    17px;

  gap:
    3px;

  padding:
    5px;

  border-radius:
    5px;

  background:
    rgba(70,74,77,.15);

  box-shadow:
    inset 0 1px 2px
    rgba(44,48,52,.18);
}


.mac-key-v26 {
  min-width: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:
    2.5px;

  background:
    linear-gradient(
      180deg,
      #24272a 0%,
      #17191c 50%,
      #0e1012 100%
    );

  color:
    rgba(244,246,247,.72);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    Arial,
    sans-serif;

  font-size:
    4.4px;

  font-style: normal;

  font-weight: 500;

  line-height: 1;

  text-transform: none;

  box-shadow:
    0 1px 1px
    rgba(0,0,0,.55),

    inset 0 1px 0
    rgba(255,255,255,.055);
}


/* реальные размеры специальных клавиш */

.mac-key-v26.delete {
  grid-column:
    span 1;
}


.mac-key-v26.tab,
.mac-key-v26.caps {
  grid-column:
    span 1;
}


.mac-key-v26.enter {
  grid-column:
    span 2;
}


.mac-key-v26.shift-left {
  grid-column:
    span 2;
}


.mac-key-v26.shift-right {
  grid-column:
    span 2;
}


.mac-key-v26.space {
  grid-column:
    span 4;
}


.mac-key-v26.command {
  font-size:
    6px;
}


.mac-key-v26.arrows {
  font-size:
    4px;
}


/* ==========================================================
   SPEAKERS
   ========================================================== */

.macbook-speaker-v26 {
  position: absolute;

  z-index: 3;

  top: 15px;

  width: 11%;
  height: 72px;

  opacity: .48;

  border-radius: 5px;

  background-image:
    radial-gradient(
      circle,
      #414548 0,
      #414548 1px,
      transparent 1.3px
    );

  background-size:
    5px 5px;
}


.macbook-speaker-v26.left {
  left: 4.3%;
}


.macbook-speaker-v26.right {
  right: 4.3%;
}


/* ==========================================================
   TRACKPAD
   ========================================================== */

.macbook-trackpad-v26 {
  position: absolute;

  z-index: 4;

  left: 50%;
  bottom: 9px;

  width: 31%;
  height: 38px;

  transform:
    translateX(-50%);

  border:
    1px solid
    rgba(78,82,85,.30);

  border-radius:
    4px;

  background:
    linear-gradient(
      145deg,
      rgba(211,214,216,.30),
      rgba(153,158,161,.15)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.35),

    inset 0 -1px 1px
    rgba(85,89,92,.10);
}


/* ==========================================================
   FRONT EDGE
   ========================================================== */

.macbook-front-edge-v26 {
  position: relative;

  z-index: 6;

  width: 111%;
  height: 8px;

  margin:
    -48px 0 0
    -5.5%;

  border-radius:
    0 0 50% 50%;

  background:
    linear-gradient(
      180deg,
      #a4a9ac 0%,
      #7a7f82 47%,
      #505558 100%
    );

  box-shadow:
    0 8px 12px
    rgba(0,0,0,.22);
}


.macbook-front-edge-v26 span {
  position: absolute;

  top: 0;
  left: 50%;

  width: 63px;
  height: 3px;

  transform:
    translateX(-50%);

  border-radius:
    0 0 7px 7px;

  background:
    rgba(92,97,101,.70);
}


/* ==========================================================
   BACK GLOW — smaller
   ========================================================== */

.macbook-back-glow-v24 {
  width: 500px !important;
  height: 430px !important;

  background:
    radial-gradient(
      circle,
      rgba(255,176,25,.19),
      rgba(255,176,25,.045) 43%,
      transparent 70%
    ) !important;

  filter:
    blur(40px) !important;
}


/* ==========================================================
   THREAT BLOCKED BADGE
   ========================================================== */

.extension-floating-warning-v24 {
  position: absolute !important;

  z-index: 30 !important;

  top: 22% !important;
  right: 1% !important;

  min-width: 150px !important;

  padding:
    10px 11px !important;

  transform: none !important;

  border-radius:
    10px !important;
}


.extension-floating-warning-v24 > span {
  width: 29px !important;
  height: 29px !important;

  font-size:
    13px !important;
}


.extension-floating-warning-v24 small {
  font-size:
    6px !important;
}


.extension-floating-warning-v24 strong {
  font-size:
    8px !important;
}


/* ==========================================================
   YOUR CURRENT SCREEN SIZE
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 900px
) {

  .macbook-v24 {
    width:
      min(430px,28vw) !important;

    margin-top:
      -6px !important;
  }


  .macbook-keyboard-deck-v26 {
    height:
      132px;
  }


  .macbook-keyboard-v26 {
    grid-auto-rows:
      15px;

    gap:
      2.5px;
  }


  .macbook-speaker-v26 {
    height:
      63px;
  }


  .macbook-trackpad-v26 {
    height:
      34px;

    bottom:
      9px;
  }


  .macbook-front-edge-v26 {
    margin-top:
      -44px;
  }

}


/* ==========================================================
   VERY SHORT DESKTOP
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 760px
) {

  .macbook-v24 {
    width:
      min(385px,26vw) !important;
  }


  .macbook-keyboard-deck-v26 {
    height:
      118px;
  }


  .macbook-keyboard-v26 {
    transform:
      translateX(-50%)
      scale(.88);

    transform-origin:
      top center;
  }


  .macbook-speaker-v26 {
    height:
      55px;
  }


  .macbook-trackpad-v26 {
    height:
      30px;
  }


  .macbook-front-edge-v26 {
    margin-top:
      -39px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .macbook-v24 {
    width:
      min(390px,87vw) !important;

    margin: 0 !important;

    transform:
      perspective(1200px)
      rotateY(-2deg)
      rotateX(1deg) !important;
  }


  .macbook-keyboard-deck-v26 {
    height:
      120px;
  }


  .macbook-keyboard-v26 {
    transform:
      translateX(-50%)
      scale(.88);

    transform-origin:
      top center;
  }


  .extension-floating-warning-v24 {
    display:
      none !important;
  }

}



/* ==========================================================
   NOYTRIX PRODUCTS V28
   REAL MOBILE APP SCREEN
   ========================================================== */


/* ==========================================================
   MOBILE SCENE
   ========================================================== */

.theme-mobile
.product-visual-v23 {
  position: relative !important;

  overflow: visible !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  height: 100% !important;

  min-height: 0 !important;

  padding:
    18px 30px 40px !important;
}


.real-phone-scene-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/* ==========================================================
   PHONE — PREMIUM REALISTIC FRAME
   ========================================================== */

.real-phone-v24 {
  position: relative !important;

  z-index: 10 !important;

  width:
    min(300px,18vw) !important;

  aspect-ratio:
    712 / 1536 !important;

  padding:
    7px !important;

  overflow:
    visible !important;

  border:
    1px solid
    rgba(205,214,226,.55) !important;

  border-radius:
    43px !important;

  background:
    linear-gradient(
      145deg,
      #b4bcc8 0%,
      #555e6a 5%,
      #171c24 12%,
      #06090e 82%,
      #727b87 95%,
      #bec5ce 100%
    ) !important;

  box-shadow:
    0 48px 90px
    rgba(0,0,0,.58),

    0 0 90px
    rgba(55,126,255,.17),

    inset 0 1px 1px
    rgba(255,255,255,.48),

    inset 0 -1px 1px
    rgba(0,0,0,.70) !important;

  transform:
    perspective(1600px)
    rotateY(-8deg)
    rotateX(2deg)
    rotateZ(2deg) !important;

  transform-origin:
    center center !important;

  animation:
    ntxRealPhoneFloatV28
    5.5s
    ease-in-out
    infinite !important;
}


@keyframes ntxRealPhoneFloatV28 {

  0%,
  100% {

    transform:
      perspective(1600px)
      rotateY(-8deg)
      rotateX(2deg)
      rotateZ(2deg)
      translateY(0);

  }

  50% {

    transform:
      perspective(1600px)
      rotateY(-5deg)
      rotateX(1deg)
      rotateZ(1deg)
      translateY(-10px);

  }

}


/* ==========================================================
   SCREEN
   ========================================================== */

.real-phone-screen-v24 {
  position: absolute !important;

  inset:
    7px !important;

  overflow:
    hidden !important;

  border-radius:
    36px !important;

  background:
    #030617 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.025),

    inset 0 0 18px
    rgba(0,0,0,.45) !important;
}


/*
   ВАЖНО:
   показываем весь твой screenshot,
   ничего не отрезаем.
*/

.real-phone-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #030617 !important;

  user-select:
    none !important;

  pointer-events:
    none !important;
}


/* лёгкое стекло поверх реального screenshot */

.real-phone-screen-v24::after {
  content: '';

  position: absolute;

  pointer-events: none;

  inset: 0;

  border-radius:
    inherit;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.04),
      transparent 20%,
      transparent 76%,
      rgba(255,255,255,.012)
    );

  mix-blend-mode:
    screen;

  opacity:
    .55;
}


/* ==========================================================
   TOP CAMERA / SPEAKER
   У тебя Android, поэтому убираем iPhone island
   ========================================================== */

.real-phone-island-v24 {
  display:
    none !important;
}


.real-phone-v24::before {
  content: '';

  position: absolute;

  z-index: 30;

  top:
    13px;

  left:
    50%;

  width:
    6px;

  height:
    6px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 40% 35%,
      #354b63,
      #06090d 58%
    );

  box-shadow:
    0 0 0 2px
    rgba(0,0,0,.65);
}


/* ==========================================================
   METAL SIDE BUTTONS
   ========================================================== */

.real-phone-side-v24.left {
  left:
    -3px !important;

  top:
    115px !important;

  width:
    3px !important;

  height:
    54px !important;

  border-radius:
    4px 0 0 4px !important;

  background:
    linear-gradient(
      180deg,
      #7e8997,
      #313844
    ) !important;
}


.real-phone-side-v24.right {
  right:
    -3px !important;

  top:
    135px !important;

  width:
    3px !important;

  height:
    77px !important;

  border-radius:
    0 4px 4px 0 !important;

  background:
    linear-gradient(
      180deg,
      #818b98,
      #303741
    ) !important;
}


/* ==========================================================
   BACK GLOW
   ========================================================== */

.real-phone-glow-v24 {
  position: absolute !important;

  z-index: 0 !important;

  width:
    470px !important;

  height:
    570px !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,
      rgba(47,117,255,.25),
      rgba(46,103,221,.08) 37%,
      rgba(255,177,27,.025) 57%,
      transparent 72%
    ) !important;

  filter:
    blur(40px) !important;
}


/* ==========================================================
   FLOATING CARDS
   ========================================================== */

.real-product-badge-v24 {
  z-index:
    20 !important;

  min-width:
    166px !important;

  padding:
    11px 12px !important;

  border:
    1px solid
    rgba(77,139,234,.30) !important;

  border-radius:
    12px !important;

  background:
    rgba(4,14,31,.72) !important;

  backdrop-filter:
    blur(18px) !important;

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.32),

    inset 0 1px 0
    rgba(255,255,255,.025) !important;
}


.mobile-security {
  left:
    5% !important;

  top:
    25% !important;
}


.mobile-alert {
  right:
    3% !important;

  bottom:
    24% !important;
}


/* ==========================================================
   PHONE SIZE FOR YOUR CURRENT SCREEN
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 900px
) {

  .real-phone-v24 {

    width:
      min(250px,16vw) !important;

  }


  .real-phone-glow-v24 {

    width:
      390px !important;

    height:
      490px !important;

  }


  .mobile-security {

    left:
      2% !important;

  }


  .mobile-alert {

    right:
      1% !important;

  }

}


/* ==========================================================
   SHORT LAPTOP
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 760px
) {

  .real-phone-v24 {

    width:
      min(215px,14vw) !important;

  }


  .real-product-badge-v24 {

    transform:
      scale(.88);

  }

}


/* ==========================================================
   MOBILE RESPONSIVE
   ========================================================== */

@media(max-width:760px) {

  .real-phone-v24 {

    width:
      min(
        260px,
        65vw
      ) !important;

    transform:
      perspective(1200px)
      rotateY(-3deg)
      rotateX(1deg) !important;

  }


  .real-product-badge-v24 {

    display:
      none !important;

  }

}



/* ==========================================================
   NOYTRIX PRODUCTS V29
   REAL TELEGRAM DESKTOP
   ========================================================== */


/* ==========================================================
   RIGHT SIDE
   ========================================================== */

.theme-telegram
.product-visual-v23 {
  position: relative !important;

  height: 100% !important;

  min-height: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;

  padding:
    20px 18px 55px !important;
}


.telegram-real-scene-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/* ==========================================================
   REMOVE OLD FAKE TELEGRAM HEADER
   screenshot already contains Telegram Desktop UI
   ========================================================== */

.telegram-window-top-v24 {
  display: none !important;
}


/* ==========================================================
   REAL TELEGRAM WINDOW
   ========================================================== */

.telegram-window-v24 {
  position: relative !important;

  z-index: 10 !important;

  width:
    min(690px, 42vw) !important;

  max-width:
    100% !important;

  aspect-ratio:
    1648 / 928 !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(123,164,205,.46) !important;

  border-radius:
    15px !important;

  background:
    #eef1f4 !important;

  box-shadow:
    0 50px 110px
    rgba(0,0,0,.48),

    0 20px 45px
    rgba(0,0,0,.28),

    0 0 90px
    rgba(39,170,255,.12),

    inset 0 1px 0
    rgba(255,255,255,.38) !important;

  transform:
    perspective(1700px)
    rotateY(-5deg)
    rotateX(2deg)
    rotateZ(-.4deg) !important;

  transform-origin:
    center center !important;

  animation:
    telegramRealFloatV29
    6s ease-in-out
    infinite !important;
}


@keyframes telegramRealFloatV29 {

  0%,
  100% {
    transform:
      perspective(1700px)
      rotateY(-5deg)
      rotateX(2deg)
      rotateZ(-.4deg)
      translateY(0);
  }

  50% {
    transform:
      perspective(1700px)
      rotateY(-3deg)
      rotateX(1deg)
      rotateZ(-.2deg)
      translateY(-8px);
  }

}


/* ==========================================================
   SCREEN
   ========================================================== */

.telegram-real-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  overflow:
    hidden !important;

  background:
    #eef1f4 !important;
}


/*
   Показываем ВЕСЬ реальный Telegram screenshot.
   Не crop.
*/

.telegram-real-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #eef1f4 !important;

  user-select:
    none !important;

  pointer-events:
    none !important;
}


/* subtle screen glass */

.telegram-real-screen-v24::after {
  content: '';

  position: absolute;

  pointer-events: none;

  inset: 0;

  background:
    linear-gradient(
      118deg,
      rgba(255,255,255,.09),
      transparent 17%,
      transparent 76%,
      rgba(255,255,255,.015)
    );

  opacity:
    .5;
}


/* ==========================================================
   WINDOW FRAME DETAILS
   ========================================================== */

.telegram-window-v24::before {
  content: '';

  position: absolute;

  z-index: 30;

  pointer-events: none;

  inset: 0;

  border-radius:
    inherit;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.12),

    inset 0 -1px 0
    rgba(0,0,0,.12);
}


/* ==========================================================
   BACK GLOW
   ========================================================== */

.telegram-real-glow-v24 {
  position: absolute !important;

  z-index: 0 !important;

  width:
    680px !important;

  height:
    500px !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,
      rgba(41,176,255,.27),
      rgba(39,136,255,.07) 40%,
      transparent 70%
    ) !important;

  filter:
    blur(48px) !important;
}


/* ==========================================================
   LIVE BADGE
   ========================================================== */

.telegram-live-badge-v24 {
  position: absolute !important;

  z-index: 25 !important;

  right:
    0 !important;

  bottom:
    18% !important;

  display: flex !important;

  align-items: center !important;

  gap:
    8px !important;

  padding:
    11px 14px !important;

  border:
    1px solid
    rgba(73,191,255,.28) !important;

  border-radius:
    999px !important;

  background:
    rgba(4,19,34,.78) !important;

  color:
    #7bd1ff !important;

  font-size:
    8px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .10em !important;

  backdrop-filter:
    blur(16px) !important;

  box-shadow:
    0 17px 40px
    rgba(0,0,0,.28),

    0 0 40px
    rgba(46,172,255,.07) !important;
}


.telegram-live-badge-v24 span {
  width:
    7px !important;

  height:
    7px !important;

  border-radius:
    50% !important;

  background:
    #42dc96 !important;

  box-shadow:
    0 0 10px
    rgba(66,220,150,.65) !important;
}


/* ==========================================================
   EXTRA FLOATING RESULT CARD
   ========================================================== */

.telegram-real-scene-v24::after {
  content:
    '100 / 100  •  CRITICAL';

  position: absolute;

  z-index: 24;

  left:
    1%;

  top:
    22%;

  min-width:
    150px;

  padding:
    12px 15px;

  border:
    1px solid
    rgba(255,76,85,.31);

  border-radius:
    11px;

  background:
    rgba(38,7,13,.78);

  color:
    #ff656c;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .045em;

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.31),

    0 0 40px
    rgba(255,66,76,.06);
}


/* ==========================================================
   CURRENT DESKTOP / YOUR SCREEN
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 900px
) {

  .telegram-window-v24 {

    width:
      min(610px, 39vw) !important;

  }


  .telegram-real-glow-v24 {

    width:
      590px !important;

    height:
      440px !important;

  }


  .telegram-real-scene-v24::after {

    left:
      -1%;

    top:
      19%;

  }


  .telegram-live-badge-v24 {

    right:
      -1% !important;

    bottom:
      16% !important;

  }

}


/* ==========================================================
   SHORT SCREEN
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 760px
) {

  .telegram-window-v24 {

    width:
      min(540px, 36vw) !important;

  }


  .telegram-real-scene-v24::after {

    transform:
      scale(.9);

    transform-origin:
      left center;

  }


  .telegram-live-badge-v24 {

    transform:
      scale(.9);

    transform-origin:
      right center;

  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .telegram-window-v24 {

    width:
      min(
        620px,
        92vw
      ) !important;

    transform:
      perspective(1200px)
      rotateY(-2deg)
      rotateX(1deg) !important;

  }


  .telegram-real-scene-v24::after,
  .telegram-live-badge-v24 {

    display:
      none !important;

  }

}



/* ==========================================================
   NOYTRIX PRODUCTS V30
   REAL BROWSER EXTENSION VISUAL
   ========================================================== */


/* ==========================================================
   CLEAN OLD FAKE OVERLAY
   Generated image already contains warning UI
   ========================================================== */

.theme-extension
.extension-floating-warning-v24 {
  display: none !important;
}


/* ==========================================================
   SCENE
   ========================================================== */

.theme-extension
.product-visual-v23 {
  position: relative !important;

  height: 100% !important;

  min-height: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;

  padding:
    16px 20px 52px !important;
}


.theme-extension
.macbook-scene-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}


/* ==========================================================
   MACBOOK SIZE
   smaller so the FULL machine always fits
   ========================================================== */

.theme-extension
.macbook-v24 {
  position: relative !important;

  z-index: 10 !important;

  width:
    min(465px,29vw) !important;

  max-width:
    465px !important;

  margin:
    -5px 8px 0 0 !important;

  overflow: visible !important;

  transform:
    perspective(1800px)
    rotateY(-4deg)
    rotateX(1.5deg)
    rotateZ(.15deg) !important;

  transform-origin:
    center center !important;

  filter:
    drop-shadow(
      0 34px 38px
      rgba(0,0,0,.50)
    ) !important;
}


/* ==========================================================
   SCREEN FRAME
   ========================================================== */

.theme-extension
.macbook-display-v24 {
  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;

  aspect-ratio:
    16 / 10 !important;

  padding:
    6px 6px 8px !important;

  border:
    1px solid
    rgba(190,198,207,.72) !important;

  border-radius:
    13px 13px 7px 7px !important;

  background:
    linear-gradient(
      120deg,
      #a0a7ad 0%,
      #4c535a 4%,
      #12161b 9%,
      #06090c 91%,
      #737a81 97%,
      #adb3b9 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.40),

    inset 0 -1px 0
    rgba(0,0,0,.65),

    0 3px 5px
    rgba(0,0,0,.35) !important;
}


/* ==========================================================
   REAL GENERATED IMAGE
   ========================================================== */

.theme-extension
.macbook-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border-radius:
    8px 8px 4px 4px !important;

  background:
    linear-gradient(
      145deg,
      #050c18,
      #02060d
    ) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.02),

    inset 0 0 20px
    rgba(0,0,0,.6) !important;
}


/*
   ВАЖНО:
   картинка видна ЦЕЛИКОМ.
*/

.theme-extension
.macbook-screen-v24 img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #030815 !important;

  pointer-events:
    none !important;

  user-select:
    none !important;
}


/* subtle glossy real-display reflection */

.theme-extension
.macbook-screen-v24::after {
  content: '';

  position: absolute;

  z-index: 5;

  pointer-events: none;

  inset: 0;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.055),
      transparent 18%,
      transparent 68%,
      rgba(255,255,255,.012)
    );

  opacity: .50;
}


/* ==========================================================
   CAMERA
   ========================================================== */

.theme-extension
.macbook-camera-v24 {
  z-index: 20 !important;

  top: 2px !important;
  left: 50% !important;

  width: 4px !important;
  height: 4px !important;

  transform:
    translateX(-50%) !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle at 40% 35%,
      #31516e,
      #030507 58%
    ) !important;
}


/* ==========================================================
   HINGE
   ========================================================== */

.theme-extension
.macbook-hinge-v25 {
  width: 94% !important;

  height: 7px !important;

  margin:
    -1px auto 0 !important;

  background:
    linear-gradient(
      180deg,
      #161a1e,
      #656b70 42%,
      #969b9f 65%,
      #34393d
    ) !important;
}


/* ==========================================================
   REALISTIC ALUMINIUM KEYBOARD DECK
   ========================================================== */

.theme-extension
.macbook-keyboard-deck-v26 {
  width: 108% !important;

  height: 137px !important;

  margin:
    -2px 0 0 -4% !important;

  padding:
    12px 20px 10px !important;

  background:
    linear-gradient(
      110deg,
      #aeb3b7 0%,
      #d6d9db 17%,
      #a5aaae 39%,
      #c9ccce 63%,
      #959a9e 84%,
      #c4c8ca 100%
    ) !important;

  box-shadow:
    inset 0 2px 1px
    rgba(255,255,255,.62),

    inset 0 -3px 5px
    rgba(70,74,78,.30),

    0 10px 18px
    rgba(0,0,0,.20) !important;
}


/* keyboard */

.theme-extension
.macbook-keyboard-v26 {
  width:
    69% !important;

  top:
    12px !important;

  grid-auto-rows:
    16px !important;

  gap:
    2.7px !important;
}


.theme-extension
.mac-key-v26 {
  background:
    linear-gradient(
      180deg,
      #2c3034 0%,
      #171a1d 58%,
      #0d0f11 100%
    ) !important;

  color:
    rgba(255,255,255,.68) !important;

  box-shadow:
    0 1px 1px rgba(0,0,0,.65),

    inset 0 1px 0
    rgba(255,255,255,.055) !important;
}


/* speakers */

.theme-extension
.macbook-speaker-v26 {
  top:
    15px !important;

  height:
    65px !important;

  opacity:
    .43 !important;
}


/* ==========================================================
   TRACKPAD
   ========================================================== */

.theme-extension
.macbook-trackpad-v26 {
  bottom:
    8px !important;

  width:
    31% !important;

  height:
    35px !important;

  border:
    1px solid
    rgba(73,78,82,.30) !important;

  background:
    linear-gradient(
      145deg,
      rgba(224,226,228,.30),
      rgba(145,150,154,.15)
    ) !important;
}


/* ==========================================================
   FRONT EDGE
   ========================================================== */

.theme-extension
.macbook-front-edge-v26 {
  width:
    111% !important;

  height:
    8px !important;

  margin:
    -45px 0 0 -5.5% !important;

  background:
    linear-gradient(
      180deg,
      #a9aeb1,
      #777c80 47%,
      #505457
    ) !important;
}


/* ==========================================================
   PREMIUM GOLD/BLUE LIGHT BEHIND DEVICE
   ========================================================== */

.theme-extension
.macbook-back-glow-v24 {
  position: absolute !important;

  z-index: 0 !important;

  width:
    560px !important;

  height:
    470px !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle at 54% 48%,
      rgba(255,180,25,.20),
      rgba(255,176,22,.055) 31%,
      rgba(51,104,255,.065) 49%,
      transparent 71%
    ) !important;

  filter:
    blur(47px) !important;
}


/* ==========================================================
   SMALL PREMIUM LABEL
   ========================================================== */

.theme-extension
.macbook-scene-v24::after {
  content:
    'NOYTRIX SHIELD  •  LIVE PROTECTION';

  position: absolute;

  z-index: 25;

  right:
    1%;

  bottom:
    18%;

  padding:
    10px 13px;

  border:
    1px solid
    rgba(255,184,40,.25);

  border-radius:
    999px;

  background:
    rgba(8,15,28,.76);

  color:
    #efb435;

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    .10em;

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 18px 44px
    rgba(0,0,0,.28);
}


/* ==========================================================
   CURRENT DESKTOP
   ========================================================== */

@media (
  min-width:761px
) and (
  max-height:900px
) {

  .theme-extension
  .macbook-v24 {

    width:
      min(425px,27vw) !important;

  }


  .theme-extension
  .macbook-keyboard-deck-v26 {

    height:
      127px !important;

  }


  .theme-extension
  .macbook-keyboard-v26 {

    grid-auto-rows:
      14px !important;

  }


  .theme-extension
  .macbook-front-edge-v26 {

    margin-top:
      -42px !important;

  }


  .theme-extension
  .macbook-back-glow-v24 {

    width:
      500px !important;

    height:
      420px !important;

  }

}


/* ==========================================================
   SHORT DESKTOP
   ========================================================== */

@media (
  min-width:761px
) and (
  max-height:760px
) {

  .theme-extension
  .macbook-v24 {

    width:
      min(385px,25vw) !important;

  }


  .theme-extension
  .macbook-keyboard-deck-v26 {

    height:
      112px !important;

  }


  .theme-extension
  .macbook-keyboard-v26 {

    transform:
      translateX(-50%)
      scale(.88) !important;

    transform-origin:
      top center !important;

  }


  .theme-extension
  .macbook-scene-v24::after {

    display:
      none !important;

  }

}



/* ==========================================================
   NOYTRIX EXTENSION V31
   FULL SCREEN + SHARPER + BIGGER MACBOOK
   ========================================================== */


/* больше места под продукт справа */
.theme-extension .product-visual-v23 {
  height: 100% !important;
  padding: 10px 6px 45px !important;

  overflow: visible !important;
}


/* ==========================================================
   MACBOOK — BIGGER, STRAIGHTER, SHARPER
   ========================================================== */

.theme-extension .macbook-v24 {
  width: min(590px, 36vw) !important;
  max-width: 590px !important;

  margin: 0 !important;

  /*
     Убираем сильную перспективу.
     Именно transform делал мелкие элементы менее чёткими.
  */
  transform:
    translate3d(0, 0, 0)
    rotateY(-1deg)
    rotateX(.5deg) !important;

  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased;

  filter:
    drop-shadow(0 42px 46px rgba(0,0,0,.55))
    drop-shadow(0 0 35px rgba(255,174,22,.06))
    !important;
}


/* ==========================================================
   DISPLAY
   ========================================================== */

.theme-extension .macbook-display-v24 {
  padding: 5px !important;

  border-radius: 15px 15px 8px 8px !important;

  border:
    1px solid rgba(198,205,213,.82) !important;

  background:
    linear-gradient(
      135deg,
      #b6bcc1 0%,
      #5e6469 4%,
      #111519 9%,
      #050709 91%,
      #747a7f 97%,
      #b1b6ba 100%
    ) !important;
}


/* ==========================================================
   SCREEN — IMAGE FILLS WHOLE DISPLAY
   ========================================================== */

.theme-extension .macbook-screen-v24 {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  overflow: hidden !important;

  border-radius: 10px 10px 5px 5px !important;

  background: #02050b !important;

  /*
     убираем внутренние тени, которые затемняли screenshot
  */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018)
    !important;
}


/*
   ГЛАВНОЕ:
   больше НЕ contain.
   Расширение заполняет весь экран ноутбука.
*/

.theme-extension .macbook-screen-v24 img {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  /*
     слегка увеличиваем исходник,
     чтобы убрать внутренние поля самой картинки
  */
  transform:
    translate(-50%, -50%)
    scale(1.12) !important;

  transform-origin: center center !important;

  /*
     визуально делаем asset более ясным
  */
  filter:
    contrast(1.10)
    brightness(1.035)
    saturate(1.08)
    !important;

  image-rendering: auto !important;

  backface-visibility: hidden !important;

  pointer-events: none !important;
}


/* убираем старое стекло — оно тоже размывало UI */

.theme-extension .macbook-screen-v24::after {
  display: none !important;
}


/* камера остаётся минимальной */

.theme-extension .macbook-camera-v24 {
  width: 4px !important;
  height: 4px !important;

  top: 1px !important;
}


/* ==========================================================
   KEYBOARD
   чуть крупнее вместе с ноутбуком
   ========================================================== */

.theme-extension .macbook-keyboard-deck-v26 {
  height: 158px !important;
}


.theme-extension .macbook-keyboard-v26 {
  width: 70% !important;

  grid-auto-rows: 18px !important;

  gap: 3px !important;
}


.theme-extension .macbook-speaker-v26 {
  height: 77px !important;
}


.theme-extension .macbook-trackpad-v26 {
  width: 32% !important;
  height: 42px !important;

  bottom: 10px !important;
}


.theme-extension .macbook-front-edge-v26 {
  margin-top: -52px !important;
}


/* ==========================================================
   GLOW
   ========================================================== */

.theme-extension .macbook-back-glow-v24 {
  width: 650px !important;
  height: 530px !important;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,177,24,.22),
      rgba(255,170,16,.07) 34%,
      rgba(48,91,190,.055) 52%,
      transparent 72%
    ) !important;

  filter: blur(50px) !important;
}


/* ==========================================================
   LABEL
   ========================================================== */

.theme-extension .macbook-scene-v24::after {
  right: 2% !important;
  bottom: 13% !important;

  padding: 10px 14px !important;

  font-size: 8px !important;
}


/* ==========================================================
   YOUR CURRENT SCREEN
   1536-ish desktop
   ========================================================== */

@media (
  min-width: 1200px
) and (
  max-height: 950px
) {

  .theme-extension .macbook-v24 {
    width: min(555px, 35vw) !important;
  }

  .theme-extension .macbook-keyboard-deck-v26 {
    height: 148px !important;
  }

  .theme-extension .macbook-keyboard-v26 {
    grid-auto-rows: 17px !important;
  }

  .theme-extension .macbook-trackpad-v26 {
    height: 39px !important;
  }

  .theme-extension .macbook-front-edge-v26 {
    margin-top: -49px !important;
  }
}


/* ==========================================================
   SHORT DESKTOP
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 760px
) {

  .theme-extension .macbook-v24 {
    width: min(475px, 32vw) !important;
  }

  .theme-extension .macbook-keyboard-deck-v26 {
    height: 128px !important;
  }

  .theme-extension .macbook-keyboard-v26 {
    grid-auto-rows: 14px !important;
  }

  .theme-extension .macbook-front-edge-v26 {
    margin-top: -42px !important;
  }
}



/* ==========================================================
   NOYTRIX PRODUCTS V32
   MOVE FLOATING BADGES AWAY FROM PRODUCT SCREENS
   ========================================================== */


/* ==========================================================
   MOBILE
   LIVE CHECK / SMART ALERT
   ========================================================== */

/*
   Было: карточки лежали поверх телефона.
   Теперь одна слева сверху, вторая справа снизу,
   не закрывая интерфейс приложения.
*/

.theme-mobile .mobile-security {
  top: 17% !important;
  left: -4% !important;

  right: auto !important;
  bottom: auto !important;

  transform: none !important;
}


.theme-mobile .mobile-alert {
  top: auto !important;
  left: auto !important;

  right: -2% !important;
  bottom: 15% !important;

  transform: none !important;
}


/* сами карточки немного компактнее */

.theme-mobile .real-product-badge-v24 {
  min-width: 145px !important;

  padding: 9px 11px !important;

  gap: 8px !important;

  border-radius: 10px !important;
}


.theme-mobile .real-product-badge-v24 > span {
  width: 29px !important;
  height: 29px !important;

  flex: 0 0 29px !important;
}


.theme-mobile .real-product-badge-v24 b {
  font-size: 8px !important;
}


.theme-mobile .real-product-badge-v24 small {
  font-size: 7px !important;
}


/* ==========================================================
   ANTIVIRUS
   IN DEVELOPMENT
   ========================================================== */

/*
   Уводим зелёный статус ВЫШЕ монитора.
*/

.theme-antivirus .antivirus-dev-label-v24 {
  top: 5% !important;
  right: 5% !important;

  left: auto !important;
  bottom: auto !important;

  transform: translateY(-8px) !important;

  z-index: 30 !important;
}


/* ==========================================================
   ANTIVIRUS
   BLOCKED / MALICIOUS WALLET REQUEST
   ========================================================== */

/*
   Уводим красную карточку вниз и влево
   за пределы матрицы монитора.
*/

.theme-antivirus .antivirus-threat-v24 {
  left: 3% !important;

  top: auto !important;
  right: auto !important;

  bottom: 7% !important;

  z-index: 30 !important;

  min-width: 155px !important;

  padding: 11px 13px !important;
}


/* ==========================================================
   GIVE DEVICE VISUALS SOME SAFE SPACE
   ========================================================== */

.theme-mobile .product-visual-v23,
.theme-antivirus .product-visual-v23 {
  padding-left: 45px !important;
  padding-right: 45px !important;
}


.theme-mobile .real-phone-scene-v24,
.theme-antivirus .antivirus-scene-v24 {
  overflow: visible !important;
}


/* ==========================================================
   YOUR CURRENT DESKTOP HEIGHT
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 950px
) {

  /* mobile */

  .theme-mobile .mobile-security {
    top: 13% !important;
    left: -1% !important;
  }


  .theme-mobile .mobile-alert {
    right: 0 !important;
    bottom: 12% !important;
  }


  /* antivirus */

  .theme-antivirus .antivirus-dev-label-v24 {
    top: 2% !important;
    right: 4% !important;
  }


  .theme-antivirus .antivirus-threat-v24 {
    left: 1% !important;
    bottom: 5% !important;
  }

}


/* ==========================================================
   SMALLER WIDTH
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-width: 1450px
) {

  .theme-mobile .real-product-badge-v24 {
    transform: scale(.88) !important;
  }


  .theme-mobile .mobile-security {
    transform-origin: left center !important;
  }


  .theme-mobile .mobile-alert {
    transform-origin: right center !important;
  }


  .theme-antivirus .antivirus-dev-label-v24 {
    transform:
      translateY(-5px)
      scale(.90) !important;

    transform-origin: right center !important;
  }


  .theme-antivirus .antivirus-threat-v24 {
    transform: scale(.90) !important;

    transform-origin: left center !important;
  }

}


/* ==========================================================
   MOBILE
   Floating promo cards are unnecessary there
   ========================================================== */

@media(max-width:760px) {

  .theme-mobile .real-product-badge-v24,
  .theme-antivirus .antivirus-dev-label-v24,
  .theme-antivirus .antivirus-threat-v24 {
    display: none !important;
  }

}


/* ==========================================================
   NOYTRIX MOBILE BADGES V35
   ONLY MOVE BADGES — PHONE UNTOUCHED
   ========================================================== */

/* верхний LIVE CHECK — левее */
.theme-mobile .mobile-security {
  left: -12% !important;
  right: auto !important;

  transform:
    translateX(-20px) !important;
}


/* нижний SMART ALERT — правее */
.theme-mobile .mobile-alert {
  right: -12% !important;
  left: auto !important;

  transform:
    translateX(20px) !important;
}


/* на твоём размере экрана ещё чуть дальше */
@media (
  min-width: 1200px
) and (
  max-height: 950px
) {

  .theme-mobile .mobile-security {
    left: -16% !important;

    transform:
      translateX(-25px) !important;
  }

  .theme-mobile .mobile-alert {
    right: -16% !important;

    transform:
      translateX(25px) !important;
  }

}


/* NOYTRIX EXTENSION BADGE V10.3.3 START */

@media (max-width: 820px) {

  /*
   * REAL generated badge:
   * NOYTRIX SHIELD • LIVE PROTECTION
   *
   * Laptop stays exactly where it is.
   * Only pseudo-element moves.
   */

  .theme-extension
.macbook-scene-v24::after {

    position:
      absolute !important;

    left:
      50% !important;

    right:
      auto !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    width:
      max-content !important;

    max-width:
      calc(100% - 24px) !important;

    text-align:
      center !important;

    white-space:
      nowrap !important;

    transform:
      translate3d(
        -50%,
        52px,
        0
      )
      !important;

    transform-origin:
      center center !important;

    z-index:
      20 !important;

  }

}

/* NOYTRIX EXTENSION BADGE V10.3.3 END */




/* layout-v27.css */

/* ==========================================================
   NOYTRIX LAYOUT V27
   FULL PREMIUM SUBPAGES
   ========================================================== */


/* ==========================================================
   GLOBAL VIEWPORT
   ========================================================== */

html,
body {
  width: 100%;
  height: 100%;

  overflow: hidden;
}


.app-shell {
  width: 100vw !important;
  height: 100vh !important;

  min-width: 0 !important;
  min-height: 0 !important;

  overflow: hidden !important;
}


/* ==========================================================
   MAIN CHECK PAGE
   untouched
   ========================================================== */

html.noytrix-main-page-v27
.noytrix-top-actions-v27,

html.noytrix-main-page-v27
.noytrix-language-v27,

html.noytrix-main-page-v27
.noytrix-account-v27 {
  opacity: 1;
}


/* ==========================================================
   REMOVE HEADER FROM ALL OTHER PAGES
   ========================================================== */

html.noytrix-subpage-v27
.noytrix-top-actions-v27 {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


html.noytrix-subpage-v27
.noytrix-language-v27,

html.noytrix-subpage-v27
.noytrix-account-v27 {
  display: none !important;
}


/*
   Дополнительные реальные возможные
   селекторы существующей шапки.
*/

html.noytrix-subpage-v27
.header-actions,

html.noytrix-subpage-v27
.top-actions,

html.noytrix-subpage-v27
.workspace-header-actions {
  display: none !important;
}


/* ==========================================================
   COLLAPSE EMPTY TOPBAR
   ========================================================== */

html.noytrix-subpage-v27
.workspace-topbar:has(.noytrix-language-v27),

html.noytrix-subpage-v27
.workspace-header:has(.noytrix-language-v27),

html.noytrix-subpage-v27
.main-header:has(.noytrix-language-v27),

html.noytrix-subpage-v27
.topbar:has(.noytrix-language-v27) {
  display: none !important;

  height: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}


/* ==========================================================
   REMOVE OLD TOP SPACE
   ========================================================== */

html.noytrix-subpage-v27
.workspace-main,

html.noytrix-subpage-v27
.workspace-content,

html.noytrix-subpage-v27
.main-content,

html.noytrix-subpage-v27
.content-area,

html.noytrix-subpage-v27
.content-main {
  padding-top: 0 !important;

  min-height: 0 !important;
}


/* ==========================================================
   ACTIVE SUBPAGE
   ========================================================== */

@media(min-width:761px) {

  html.noytrix-subpage-v27
  .noytrix-active-screen-v27 {

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    display: flex !important;

    align-items: stretch !important;
    justify-content: center !important;

    padding:
      14px
      clamp(18px,1.7vw,30px)
      16px !important;

    margin: 0 !important;

    overflow: hidden !important;
  }


  /*
     Любой основной root страницы
     занимает всю освободившуюся область.
  */

  html.noytrix-subpage-v27
  .noytrix-active-screen-v27
  > *:first-child {

    width: 100% !important;
    height: 100% !important;

    max-width:
      1600px !important;

    max-height:
      100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin:
      auto !important;
  }

}


/* ==========================================================
   PREMIUM PAGE AREA
   ========================================================== */

html.noytrix-subpage-v27
.noytrix-active-screen-v27::before {
  content: '';

  position: absolute;

  z-index: -2;

  top: -300px;
  left: 18%;

  width: 900px;
  height: 650px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(38,86,178,.065),
      transparent 68%
    );

  filter:
    blur(40px);

  pointer-events: none;
}


html.noytrix-subpage-v27
.noytrix-active-screen-v27::after {
  content: '';

  position: absolute;

  z-index: -2;

  right: -200px;
  bottom: -320px;

  width: 720px;
  height: 650px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,177,22,.027),
      transparent 67%
    );

  filter:
    blur(45px);

  pointer-events: none;
}


/* ==========================================================
   TRACKING
   ========================================================== */

html.noytrix-subpage-v27
#screen-tracking
> .tracking-v14,

html.noytrix-subpage-v27
#screen-tracking
> .tracking-v15 {

  width: 100% !important;
  height: 100% !important;

  max-width: 1600px !important;

  margin: auto !important;

  min-height: 0 !important;
}


/* give dashboard more visual room */

html.noytrix-subpage-v27
#screen-tracking
.tracking-shell,

html.noytrix-subpage-v27
#screen-tracking
.tracking-layout {

  width: 100% !important;
  height: 100% !important;
}


/* ==========================================================
   SIGNALS
   ========================================================== */

html.noytrix-subpage-v27
#screen-intelligence
.signals-v19 {

  width: 100% !important;
  height: 100% !important;

  max-width: 1600px !important;

  margin: auto !important;

  min-height: 0 !important;
}


/*
   Немного увеличиваем рабочую область колонок,
   теперь сверху нет header.
*/

html.noytrix-subpage-v27
#screen-intelligence
.signals-columns-v19 {

  min-height: 0 !important;

  flex: 1 !important;
}


/* ==========================================================
   MY ACTIVITY
   ========================================================== */

html.noytrix-subpage-v27
#screen-analytics
.activity-v20 {

  width: 100% !important;
  height: 100% !important;

  max-width: 1600px !important;

  margin: auto !important;

  padding-top: 0 !important;

  min-height: 0 !important;


  /*
     распределяем освободившееся место
     по полезным блокам
  */

  grid-template-rows:
    auto
    auto
    minmax(0,1.12fr)
    minmax(0,1fr)
    auto !important;

  gap:
    clamp(8px,1vh,12px) !important;
}


html.noytrix-subpage-v27
#screen-analytics
.activity-head-v20 {

  min-height: 76px !important;

  padding-top: 0 !important;
}


/*
   график и нижние карточки
   теперь чуть выше
*/

html.noytrix-subpage-v27
#screen-analytics
.activity-main-v20,

html.noytrix-subpage-v27
#screen-analytics
.activity-bottom-v20 {

  min-height: 0 !important;
}


/* ==========================================================
   PRODUCTS
   ========================================================== */

html.noytrix-subpage-v27
#screen-products {

  padding:
    12px
    clamp(16px,1.5vw,27px)
    14px !important;
}


html.noytrix-subpage-v27
#screen-products
.products-v23 {

  width: 100% !important;
  height: 100% !important;

  max-width: 1600px !important;

  margin: auto !important;

  padding: 0 !important;
}


html.noytrix-subpage-v27
#screen-products
.products-stage-v23 {

  width: 100% !important;
  height: 100% !important;

  border-radius:
    20px !important;

  box-shadow:
    0 32px 100px
    rgba(0,0,0,.34),

    0 15px 42px
    rgba(0,0,0,.22),

    inset 0 1px 0
    rgba(255,255,255,.035) !important;
}


/*
   Billboard больше — особенно по высоте.
*/

html.noytrix-subpage-v27
#screen-products
.product-slide-v23 {

  padding-top:
    clamp(35px,4vh,62px) !important;

  padding-bottom:
    clamp(54px,6vh,82px) !important;
}


/* ==========================================================
   DEVELOPERS
   ========================================================== */

html.noytrix-subpage-v27
#screen-api
> *:first-child {

  width: 100% !important;
  height: 100% !important;

  max-width: 1550px !important;

  margin: auto !important;
}


html.noytrix-subpage-v27
#screen-api
.api-layout,

html.noytrix-subpage-v27
#screen-api
.developer-layout,

html.noytrix-subpage-v27
#screen-api
[class*="developer"] {

  width: 100% !important;

  max-width: none !important;
}


/* ==========================================================
   BILLING
   ========================================================== */

html.noytrix-subpage-v27
#screen-billing
> *:first-child {

  width: 100% !important;
  height: 100% !important;

  max-width: 1500px !important;

  margin: auto !important;
}


html.noytrix-subpage-v27
#screen-billing
.billing-v2,

html.noytrix-subpage-v27
#screen-billing
[class*="billing"] {

  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==========================================================
   SETTINGS
   ========================================================== */

html.noytrix-subpage-v27
#screen-settings
> *:first-child {

  width: 100% !important;
  height: 100% !important;

  max-width: 1450px !important;

  margin: auto !important;
}


html.noytrix-subpage-v27
#screen-settings
.settings-v2,

html.noytrix-subpage-v27
#screen-settings
[class*="settings"] {

  max-width: none !important;
}


/* ==========================================================
   REMOVE "CUT OFF" FEEL AT BOTTOM
   ========================================================== */

@media(min-width:761px) {

  html.noytrix-subpage-v27
  #screen-tracking,

  html.noytrix-subpage-v27
  #screen-intelligence,

  html.noytrix-subpage-v27
  #screen-analytics,

  html.noytrix-subpage-v27
  #screen-products,

  html.noytrix-subpage-v27
  #screen-api,

  html.noytrix-subpage-v27
  #screen-billing,

  html.noytrix-subpage-v27
  #screen-settings {

    box-sizing:
      border-box !important;

    overflow:
      hidden !important;
  }


  html.noytrix-subpage-v27
  #screen-tracking
  > *,

  html.noytrix-subpage-v27
  #screen-intelligence
  > *,

  html.noytrix-subpage-v27
  #screen-analytics
  > *,

  html.noytrix-subpage-v27
  #screen-products
  > *,

  html.noytrix-subpage-v27
  #screen-api
  > *,

  html.noytrix-subpage-v27
  #screen-billing
  > *,

  html.noytrix-subpage-v27
  #screen-settings
  > * {

    box-sizing:
      border-box !important;
  }

}


/* ==========================================================
   1080p / LARGE DESKTOP
   ========================================================== */

@media(
  min-width:1500px
) and (
  min-height:900px
) {

  html.noytrix-subpage-v27
  .noytrix-active-screen-v27 {

    padding:
      18px
      30px
      20px !important;
  }


  html.noytrix-subpage-v27
  .noytrix-active-screen-v27
  > *:first-child {

    max-width:
      1660px !important;
  }

}


/* ==========================================================
   1366 / 1440 LAPTOPS
   ========================================================== */

@media(
  min-width:761px
) and (
  max-height:850px
) {

  html.noytrix-subpage-v27
  .noytrix-active-screen-v27 {

    padding:
      8px
      16px
      10px !important;
  }


  /*
     ВАЖНО:
     не уменьшаем сами страницы как раньше.
     Просто немного сокращаем внутренние gaps.
  */

  html.noytrix-subpage-v27
  #screen-analytics
  .activity-v20 {

    grid-template-rows:
      auto
      auto
      minmax(0,1.1fr)
      minmax(0,.97fr)
      auto !important;

    gap:
      6px !important;
  }


  html.noytrix-subpage-v27
  #screen-products {

    padding:
      7px 14px 9px !important;
  }


  html.noytrix-subpage-v27
  #screen-products
  .product-slide-v23 {

    padding-bottom:
      58px !important;
  }

}


/* ==========================================================
   SIDEBAR
   remains untouched and full height
   ========================================================== */

.sidebar,
.app-sidebar,
.workspace-sidebar {

  height:
    100vh !important;

  min-height:
    0 !important;
}


/* ==========================================================
   INTERNAL SCROLL ONLY WHEN ACTUALLY NEEDED
   ========================================================== */

.session-list,
.sidebar-chats,
.activity-history-list-v20,
.signals-feed-v19,
.watch-list {

  overscroll-behavior:
    contain;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  html,
  body {

    height: auto !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;
  }


  .app-shell {

    height:
      auto !important;

    min-height:
      100vh !important;

    overflow:
      visible !important;
  }


  /*
     На мобильном header можно оставить,
     чтобы login/lang не потерялись.
  */

  html.noytrix-subpage-v27
  .noytrix-top-actions-v27 {

    display:
      flex !important;

    width:
      auto !important;

    height:
      auto !important;

    overflow:
      visible !important;
  }


  html.noytrix-subpage-v27
  .noytrix-language-v27,

  html.noytrix-subpage-v27
  .noytrix-account-v27 {

    display:
      flex !important;
  }


  html.noytrix-subpage-v27
  .noytrix-active-screen-v27 {

    height:
      auto !important;

    max-height:
      none !important;

    overflow:
      visible !important;

    padding:
      12px !important;
  }


  html.noytrix-subpage-v27
  .noytrix-active-screen-v27
  > *:first-child {

    height:
      auto !important;

    max-height:
      none !important;
  }

}



/* ==========================================================
   V27.1 — TRACKING SAFE LAYOUT FIX
   ========================================================== */

html.noytrix-subpage-v27
#screen-tracking.active,
html.noytrix-subpage-v27
#screen-tracking.noytrix-active-screen-v27 {
  display: flex !important;

  align-items: stretch !important;
  justify-content: center !important;
}


/*
   Only the actual page root may fill the screen.
   Never stretch inner tracking controls.
*/

html.noytrix-subpage-v27
#screen-tracking
> .tracking-v14,

html.noytrix-subpage-v27
#screen-tracking
> .tracking-v15 {
  flex: 1 1 auto !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;
}


/* restore normal button sizing */

html.noytrix-subpage-v27
#screen-tracking button {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
}


/* Add object */

html.noytrix-subpage-v27
#screen-tracking button[class*="add"],
html.noytrix-subpage-v27
#screen-tracking [class*="add-object"] {
  width: auto !important;

  min-width: 160px !important;

  height: 44px !important;

  min-height: 44px !important;

  flex: 0 0 auto !important;

  margin: 0 !important;

  padding:
    0 21px !important;
}


/* Header must stay horizontal */

html.noytrix-subpage-v27
#screen-tracking header {
  min-width: 0;
}


/* Never allow inner controls to inherit page dimensions */

html.noytrix-subpage-v27
#screen-tracking button,
html.noytrix-subpage-v27
#screen-tracking input,
html.noytrix-subpage-v27
#screen-tracking select {
  max-height: 52px !important;
}


/* Main cards stay inside viewport */

html.noytrix-subpage-v27
#screen-tracking article,
html.noytrix-subpage-v27
#screen-tracking section,
html.noytrix-subpage-v27
#screen-tracking div {
  min-width: 0;
}



/* ==========================================================
   V27.2 — STRICT SINGLE SCREEN
   Only current workspace page may be visible
   ========================================================== */

/*
   Critical rule:
   inactive workspace screens must NEVER remain visible,
   even if a page-specific addon contains display:flex/grid.
*/

[id^="screen-"]:not(.active):not(.noytrix-active-screen-v27) {
  display: none !important;
}


/*
   Current screen is allowed to render according to its
   own page layout.
*/

[id^="screen-"].active,
[id^="screen-"].noytrix-active-screen-v27 {
  visibility: visible !important;
}


/* Tracking only fills workspace while actually active */

html.noytrix-subpage-v27
#screen-tracking.active,
html.noytrix-subpage-v27
#screen-tracking.noytrix-active-screen-v27 {
  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  overflow: hidden !important;
}


/* Explicit protection when Tracking is inactive */

#screen-tracking:not(.active):not(.noytrix-active-screen-v27) {
  display: none !important;
}


/* Same protection for the other main pages */

#screen-intelligence:not(.active):not(.noytrix-active-screen-v27),
#screen-analytics:not(.active):not(.noytrix-active-screen-v27),
#screen-products:not(.active):not(.noytrix-active-screen-v27),
#screen-api:not(.active):not(.noytrix-active-screen-v27),
#screen-billing:not(.active):not(.noytrix-active-screen-v27),
#screen-settings:not(.active):not(.noytrix-active-screen-v27) {
  display: none !important;
}



/* api-business-v38.css */

/* ==========================================================
   NOYTRIX API V38 — PRODUCTION UI
   ========================================================== */

.api-screen-v38 {
  overflow: hidden !important;
}


.api-page-v38 {
  width: 100%;
  height: 100%;

  max-width: 1580px;

  margin: auto;

  display: grid;

  grid-template-rows:
    minmax(210px,1.05fr)
    54px
    minmax(190px,.95fr)
    minmax(205px,1fr)
    68px;

  gap: 9px;

  padding: 1px;

  color: #eef5ff;
}


.api-page-v38 *,
.api-doc-overlay-v38 * {
  box-sizing: border-box;
}


.api-page-v38 svg,
.api-doc-overlay-v38 svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================
   HERO
   ========================================================== */

.api-hero-grid-v38 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap: 12px;
}


.api-hero-v38,
.api-live-v38,
.api-returns-v38,
.api-flow-v38,
.api-plans-section-v38,
.api-footer-features-v38 {
  border:
    1px solid #253d5b;

  background:
    linear-gradient(
      145deg,
      rgba(8,22,43,.95),
      rgba(4,14,29,.95)
    );

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.22),

    inset 0 1px 0
    rgba(255,255,255,.02);
}


.api-hero-v38 {
  display: flex;

  flex-direction: column;
  justify-content: center;

  padding:
    20px 24px;

  border-radius: 17px;

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(255,186,29,.07),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(9,24,46,.98),
      rgba(5,15,31,.95)
    );
}


.api-eyebrow-v38 {
  color: #ffbc24;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .14em;
}


.api-hero-v38 h1 {
  max-width: 690px;

  margin:
    7px 0 0;

  color: #f6f8ff;

  font-size:
    clamp(31px,2.75vw,47px);

  line-height: .99;

  letter-spacing: -.045em;

  text-shadow:
    0 12px 30px
    rgba(0,0,0,.35);
}


.api-hero-v38 > p {
  max-width: 720px;

  margin:
    12px 0 0;

  color: #a7b8d0;

  font-size: 12px;

  font-weight: 700;

  line-height: 1.48;
}


.api-actions-v38 {
  display: flex;

  gap: 9px;

  margin-top: 15px;
}


.api-actions-v38 button {
  min-height: 42px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 16px;

  border-radius: 9px;

  font-size: 10px;

  font-weight: 900;

  cursor: pointer;

  transition:
    transform .17s ease,
    box-shadow .17s ease;
}


.api-actions-v38 button:hover {
  transform:
    translateY(-1px);
}


.api-btn-primary-v38 {
  border:
    1px solid #ffd367;

  color: #07101e;

  background:
    linear-gradient(
      135deg,
      #ffd84b,
      #ffad17
    );

  box-shadow:
    0 12px 34px
    rgba(255,174,23,.17);
}


.api-btn-secondary-v38 {
  border:
    1px solid #4a6382;

  color: #edf5ff;

  background:
    rgba(9,23,44,.78);
}


.api-actions-v38 i {
  display: flex;
}


.api-actions-v38 svg {
  width: 17px;
  height: 17px;
}


.api-trust-v38 {
  display: flex;

  gap: 14px;

  margin-top: 13px;
}


.api-trust-v38 span {
  display: flex;

  align-items: center;

  gap: 6px;

  color: #7588a4;

  font-size: 8px;

  font-weight: 800;
}


.api-trust-v38 b {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #39da8b;

  box-shadow:
    0 0 10px
    rgba(57,218,139,.42);
}


/* ==========================================================
   LIVE EXAMPLE
   ========================================================== */

.api-live-v38 {
  overflow: hidden;

  border-radius: 17px;
}


.api-live-header-v38 {
  height: 39px;

  display: flex;

  align-items: center;

  padding:
    0 14px;

  border-bottom:
    1px solid #223751;
}


.api-live-header-v38 > div {
  display: flex;

  gap: 7px;

  font-family:
    ui-monospace,
    Menlo,
    Consolas,
    monospace;
}


.api-live-header-v38 span {
  color: #46eb96;

  font-size: 9px;

  font-weight: 900;
}


.api-live-header-v38 strong {
  color: #6cf2a9;

  font-size: 9px;
}


.api-live-header-v38 button {
  margin-left: auto;

  min-height: 27px;

  padding:
    0 9px;

  border:
    1px solid #344a65;

  border-radius: 7px;

  background:
    rgba(255,255,255,.015);

  color: #b4c2d4;

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;
}


.api-live-body-v38 {
  height:
    calc(100% - 39px);

  display: grid;

  grid-template-columns:
    .74fr 1.26fr;
}


.api-request-v38,
.api-response-v38 {
  min-height: 0;

  padding:
    12px 14px;
}


.api-request-v38 {
  border-right:
    1px solid #21364f;
}


.api-request-v38 label {
  color: #7187a6;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: .12em;
}


.api-live-v38 pre {
  margin:
    10px 0 0;

  color: #e1ebf8;

  font-family:
    ui-monospace,
    Menlo,
    Consolas,
    monospace;

  font-size: 8.5px;

  line-height: 1.6;
}


.api-live-v38 pre span {
  color: #6db7ff;
}


.api-live-v38 pre b {
  color: #ffd24c;
}


.api-live-v38 pre em {
  color: #63e1b2;

  font-style: normal;
}


.api-live-v38 pre strong {
  color: #ff6670;
}


.api-response-status-v38 {
  display: flex;

  justify-content: space-between;

  color: #39e58c;

  font-size: 8px;

  font-weight: 900;
}


.api-response-status-v38 small {
  color: #617996;

  font-size: 7px;
}


/* ==========================================================
   SUPPORTED
   ========================================================== */

.api-supported-v38 {
  display: grid;

  grid-template-columns:
    145px repeat(5,1fr);

  align-items: center;

  overflow: hidden;

  border:
    1px solid #29425f;

  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      #0a1c34,
      #07172b
    );
}


.api-supported-v38 label {
  padding-left: 15px;

  color: #6e839f;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: .10em;
}


.api-supported-v38 > div {
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border-left:
    1px solid #263c55;

  color: #dbe6f5;

  font-size: 9px;

  font-weight: 850;
}


.api-supported-v38 i {
  width: 29px;
  height: 29px;

  display: grid;

  place-items: center;

  border-radius: 8px;
}


.api-supported-v38 svg {
  width: 17px;
  height: 17px;
}


.api-supported-v38 .blue i {
  color: #59aaff;
  background: rgba(51,143,255,.12);
}


.api-supported-v38 .cyan i {
  color: #4bd9e8;
  background: rgba(52,210,225,.12);
}


.api-supported-v38 .purple i {
  color: #a77bff;
  background: rgba(146,90,255,.12);
}


.api-supported-v38 .orange i {
  color: #ffae2f;
  background: rgba(255,163,32,.12);
}


.api-supported-v38 .green i {
  color: #43df91;
  background: rgba(52,215,135,.12);
}


/* ==========================================================
   CORE
   ========================================================== */

.api-core-grid-v38 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 9px;
}


.api-returns-v38,
.api-flow-v38 {
  min-height: 0;

  padding: 11px;

  border-radius: 14px;
}


.api-section-heading-v38 h2 {
  margin: 0;

  color: #f1f6ff;

  font-size: 12px;

  font-weight: 900;
}


.api-section-heading-v38 p {
  margin:
    3px 0 0;

  color: #7187a4;

  font-size: 7.5px;

  font-weight: 700;
}


.api-return-grid-v38 {
  height:
    calc(100% - 33px);

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 7px;

  margin-top: 8px;
}


.api-return-grid-v38 article {
  position: relative;

  min-width: 0;

  display: grid;

  grid-template-columns:
    38px 1fr auto;

  align-items: center;

  gap: 8px;

  padding:
    8px 9px;

  border:
    1px solid #29405d;

  border-radius: 10px;

  background:
    rgba(12,31,55,.73);
}


.api-return-grid-v38 article > i {
  width: 35px;
  height: 35px;

  display: grid;

  place-items: center;

  border-radius: 9px;
}


.api-return-grid-v38 svg {
  width: 20px;
  height: 20px;
}


.api-return-grid-v38 article strong {
  display: block;

  color: #eef5ff;

  font-size: 8.5px;
}


.api-return-grid-v38 article p {
  margin:
    2px 0 0;

  color: #8da0b9;

  font-size: 7px;

  font-weight: 650;

  line-height: 1.25;
}


.api-return-grid-v38 article > b {
  padding:
    5px 7px;

  border-radius: 6px;

  font-size: 7px;

  white-space: nowrap;
}


.api-return-grid-v38 .risk i {
  color: #5caeff;
  background: rgba(50,140,255,.13);
}


.api-return-grid-v38 .risk > b {
  color: #64b4ff;
  background: rgba(50,140,255,.10);
}


.api-return-grid-v38 .danger i {
  color: #ff5b67;
  background: rgba(255,63,76,.12);
}


.api-return-grid-v38 .danger > b {
  color: #ff6973;
  background: rgba(255,63,76,.10);
}


.api-return-grid-v38 .evidence i {
  color: #ad80ff;
  background: rgba(158,94,255,.12);
}


.api-return-grid-v38 .evidence > b {
  color: #b990ff;
  background: rgba(158,94,255,.10);
}


.api-return-grid-v38 .safe-action i {
  color: #46df91;
  background: rgba(55,214,137,.12);
}


.api-return-grid-v38 .safe-action > b {
  color: #54e79b;
  background: rgba(55,214,137,.10);
}


/* ==========================================================
   FLOW
   ========================================================== */

.api-flow-steps-v38 {
  height:
    calc(100% - 24px);

  display: grid;

  grid-template-columns:
    1fr 24px 1fr 24px 1fr;

  align-items: center;

  margin-top: 5px;
}


.api-flow-steps-v38 article {
  position: relative;

  min-height: 116px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    10px;

  border:
    1px solid #29425e;

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(15,37,64,.79),
      rgba(8,22,40,.72)
    );
}


.api-flow-steps-v38 article > span {
  position: absolute;

  top: 7px;
  left: 7px;

  width: 22px;
  height: 22px;

  display: grid;

  place-items: center;

  border:
    1px solid #e8b700;

  border-radius: 5px;

  color: #ffd021;

  font-size: 10px;

  font-weight: 900;
}


.api-flow-steps-v38 article > i {
  width: 37px;
  height: 37px;

  display: grid;

  place-items: center;

  margin:
    0 auto 7px;

  border-radius: 10px;
}


.api-flow-steps-v38 i.blue {
  color: #5bb0ff;
  background: rgba(55,145,255,.11);
}


.api-flow-steps-v38 i.yellow {
  color: #ffc227;
  background: rgba(255,188,32,.11);
}


.api-flow-steps-v38 i.green {
  color: #45df90;
  background: rgba(52,213,133,.11);
}


.api-flow-steps-v38 strong {
  color: #f0f5ff;

  font-size: 8px;
}


.api-flow-steps-v38 p {
  margin:
    4px 0 0;

  color: #8fa2ba;

  font-size: 6.8px;

  font-weight: 650;

  line-height: 1.3;
}


.api-flow-arrow-v38 {
  display: grid;

  place-items: center;

  color: #758aa6;

  font-size: 17px;
}


/* ==========================================================
   PLANS
   ========================================================== */

.api-plans-section-v38 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    225px 1fr;

  gap: 11px;

  padding: 10px;

  border-radius: 14px;
}


.api-plans-title-v38 {
  display: flex;

  flex-direction: column;
  justify-content: center;

  padding:
    4px 10px;
}


.api-plans-title-v38 h2 {
  margin: 0;

  color: #f4f7ff;

  font-size: 14px;

  line-height: 1.05;
}


.api-plans-title-v38 p {
  margin:
    7px 0 0;

  color: #7d91ad;

  font-size: 7.5px;

  font-weight: 700;

  line-height: 1.4;
}


.api-plans-v38 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 8px;
}


.api-plan-v38 {
  position: relative;

  min-width: 0;

  display: grid;

  grid-template-rows:
    auto auto auto 1fr auto;

  padding:
    10px;

  overflow: hidden;

  border:
    1px solid #2c4562;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(14,34,58,.95),
      rgba(7,20,38,.95)
    );
}


.api-plan-v38.growth {
  border-color:
    rgba(255,189,34,.72);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,183,27,.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #102743,
      #091a30
    );

  box-shadow:
    0 0 38px
    rgba(255,180,22,.045);
}


.api-plan-badge-v38 {
  position: absolute;

  top: 0;
  right: 0;

  padding:
    4px 8px;

  border-radius:
    0 10px 0 8px;

  color: #08101c;

  background: #ffbd28;

  font-size: 5.5px;

  font-weight: 950;

  letter-spacing: .08em;
}


.api-plan-head-v38 {
  display: flex;

  justify-content: space-between;
}


.api-plan-head-v38 span {
  color: #7e92ad;

  font-size: 6.5px;

  font-weight: 800;
}


.api-plan-head-v38 h3 {
  margin:
    1px 0 0;

  color: #f4f7ff;

  font-size: 11px;
}


.api-plan-head-v38 > i {
  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  color: #ffc42b;

  background:
    rgba(255,190,31,.11);
}


.api-plan-head-v38 svg {
  width: 18px;
  height: 18px;
}


.api-plan-price-v38 {
  margin-top: 7px;

  color: #fff;

  font-size: 23px;

  font-weight: 950;

  line-height: 1;
}


.api-plan-price-v38 small {
  color: #7f93ad;

  font-size: 7px;

  font-weight: 800;
}


.api-plan-price-v38.custom {
  font-size: 14px;
}


.api-plan-volume-v38 {
  margin-top: 5px;

  color: #8fa5c0;

  font-size: 7px;
}


.api-plan-v38 ul {
  margin:
    7px 0;

  padding: 0;

  list-style: none;
}


.api-plan-v38 li {
  display: flex;

  align-items: center;

  gap: 5px;

  margin: 3px 0;

  color: #a7b7ca;

  font-size: 6.7px;

  font-weight: 700;
}


.api-plan-v38 li svg {
  flex: 0 0 11px;

  width: 11px;
  height: 11px;

  color: #48dd91;
}


.api-plan-v38 button {
  min-height: 29px;

  border:
    1px solid #47607e;

  border-radius: 7px;

  background:
    rgba(9,23,43,.80);

  color: #ecf4ff;

  font-size: 7px;

  font-weight: 900;

  cursor: pointer;
}


.api-plan-v38.growth button {
  border-color: #ffbf2b;

  color: #07101d;

  background:
    linear-gradient(
      135deg,
      #ffd34b,
      #ffac17
    );
}


/* ==========================================================
   FOOTER FEATURES
   ========================================================== */

.api-footer-features-v38 {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  align-items: center;

  overflow: hidden;

  border-radius: 12px;
}


.api-footer-features-v38 article {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    0 13px;

  border-right:
    1px solid #263d57;
}


.api-footer-features-v38 article:last-child {
  border: 0;
}


.api-footer-features-v38 i {
  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 8px;
}


.api-footer-features-v38 i.blue {
  color: #61b0ff;
  background: rgba(56,144,255,.12);
}


.api-footer-features-v38 i.purple {
  color: #aa7dff;
  background: rgba(154,91,255,.12);
}


.api-footer-features-v38 i.yellow {
  color: #ffc42c;
  background: rgba(255,190,31,.12);
}


.api-footer-features-v38 i.green {
  color: #49df92;
  background: rgba(52,214,135,.12);
}


.api-footer-features-v38 svg {
  width: 18px;
  height: 18px;
}


.api-footer-features-v38 strong {
  display: block;

  color: #eef4ff;

  font-size: 8px;
}


.api-footer-features-v38 span {
  display: block;

  margin-top: 2px;

  color: #7086a3;

  font-size: 6.5px;

  font-weight: 700;
}


/* ==========================================================
   DOCUMENTATION MODAL
   ========================================================== */

.api-doc-overlay-v38 {
  position: fixed;

  z-index: 99999;

  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 40px;

  background:
    rgba(0,6,16,.78);

  backdrop-filter:
    blur(12px);
}


.api-doc-overlay-v38.open {
  display: flex;
}


.api-doc-modal-v38 {
  width:
    min(980px,90vw);

  height:
    min(650px,82vh);

  overflow: hidden;

  border:
    1px solid #355171;

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #091b32,
      #051224
    );

  box-shadow:
    0 45px 140px
    rgba(0,0,0,.60);
}


.api-doc-modal-v38 > header {
  height: 72px;

  display: flex;

  align-items: center;

  padding:
    0 22px;

  border-bottom:
    1px solid #263e59;
}


.api-doc-modal-v38 header span {
  color: #ffbc25;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .12em;
}


.api-doc-modal-v38 header h2 {
  margin:
    3px 0 0;

  color: #f2f7ff;

  font-size: 20px;
}


.api-doc-modal-v38 header button {
  margin-left: auto;

  width: 36px;
  height: 36px;

  border:
    1px solid #3a536f;

  border-radius: 9px;

  background: #0b1e36;

  color: #dfe9f6;

  font-size: 19px;

  cursor: pointer;
}


.api-doc-body-v38 {
  height:
    calc(100% - 72px);

  display: grid;

  grid-template-columns:
    210px 1fr;
}


.api-doc-body-v38 nav {
  padding: 14px;

  border-right:
    1px solid #263d57;
}


.api-doc-body-v38 nav button {
  width: 100%;

  min-height: 38px;

  margin-bottom: 5px;

  padding:
    0 11px;

  border: 0;

  border-radius: 8px;

  background: transparent;

  color: #8196b0;

  text-align: left;

  font-size: 10px;

  font-weight: 800;

  cursor: pointer;
}


.api-doc-body-v38 nav button.active {
  color: #ffbe2c;

  background:
    rgba(255,185,35,.09);
}


.api-doc-body-v38 main {
  overflow-y: auto;

  padding:
    24px 26px;
}


.api-doc-body-v38 h3 {
  margin:
    0 0 18px;

  color: #f2f7ff;

  font-size: 18px;
}


.api-doc-body-v38 p {
  color: #8297b1;

  font-size: 10px;

  font-weight: 750;
}


.api-doc-body-v38 pre {
  padding: 14px;

  overflow-x: auto;

  border:
    1px solid #273f5b;

  border-radius: 9px;

  background: #04101f;

  color: #92c9ff;

  font-size: 10px;

  line-height: 1.55;
}


.api-doc-status-v38 {
  display: flex;

  align-items: center;

  gap: 12px;

  min-height: 43px;

  margin-bottom: 7px;

  padding:
    0 12px;

  border:
    1px solid #28405c;

  border-radius: 8px;
}


.api-doc-status-v38 b {
  color: #48df91;
}


.api-doc-status-v38 span {
  color: #a1b2c6;
}


/* ==========================================================
   TOAST
   ========================================================== */

.api-toast-v38 {
  position: fixed;

  z-index: 100000;

  left: 50%;
  bottom: 28px;

  transform:
    translate(-50%,20px);

  padding:
    10px 15px;

  opacity: 0;

  pointer-events: none;

  border:
    1px solid #4c6685;

  border-radius: 9px;

  background:
    rgba(7,21,40,.95);

  color: #eff5ff;

  font-size: 9px;

  font-weight: 800;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.35);

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.api-toast-v38.show {
  opacity: 1;

  transform:
    translate(-50%,0);
}


/* ==========================================================
   SHORT DESKTOP
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 850px
) {

  .api-page-v38 {
    grid-template-rows:
      minmax(188px,1.03fr)
      47px
      minmax(165px,.91fr)
      minmax(184px,.95fr)
      59px;

    gap: 7px;
  }


  .api-hero-v38 {
    padding:
      14px 20px;
  }


  .api-hero-v38 h1 {
    font-size:
      clamp(28px,2.45vw,40px);
  }


  .api-hero-v38 > p {
    font-size: 10px;
  }


  .api-actions-v38 {
    margin-top: 10px;
  }


  .api-actions-v38 button {
    min-height: 36px;
  }


  .api-trust-v38 {
    margin-top: 9px;
  }


  .api-return-grid-v38 article {
    padding:
      6px 8px;
  }


  .api-flow-steps-v38 article {
    min-height: 100px;
  }


  .api-plans-section-v38 {
    grid-template-columns:
      195px 1fr;

    padding: 7px;
  }


  .api-plan-v38 {
    padding: 7px 8px;
  }


  .api-plan-price-v38 {
    font-size: 19px;
  }


  .api-plan-v38 ul {
    margin:
      4px 0;
  }


  .api-plan-v38 li {
    margin: 2px 0;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px) {

  .api-screen-v38 {
    overflow:
      visible !important;
  }


  .api-page-v38 {
    height: auto;

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 10px;
  }


  .api-hero-grid-v38,
  .api-core-grid-v38 {
    display: flex;

    flex-direction: column;
  }


  .api-supported-v38 {
    grid-template-columns:
      1fr 1fr;

    padding: 8px;
  }


  .api-supported-v38 label {
    grid-column:
      1 / -1;

    padding: 8px;
  }


  .api-supported-v38 > div {
    border: 0;
  }


  .api-live-body-v38 {
    grid-template-columns:
      1fr;
  }


  .api-request-v38 {
    border-right: 0;

    border-bottom:
      1px solid #223751;
  }


  .api-return-grid-v38 {
    grid-template-columns:
      1fr;

    height: auto;
  }


  .api-flow-steps-v38 {
    display: flex;

    flex-direction: column;

    gap: 7px;

    height: auto;
  }


  .api-flow-arrow-v38 {
    transform:
      rotate(90deg);
  }


  .api-plans-section-v38 {
    display: flex;

    flex-direction: column;
  }


  .api-plans-v38 {
    grid-template-columns:
      1fr;
  }


  .api-footer-features-v38 {
    grid-template-columns:
      1fr;
  }


  .api-footer-features-v38 article {
    min-height: 64px;

    border-right: 0;

    border-bottom:
      1px solid #263d57;
  }


  .api-doc-overlay-v38 {
    padding: 12px;
  }


  .api-doc-modal-v38 {
    width: 100%;
    height: 90vh;
  }


  .api-doc-body-v38 {
    grid-template-columns:
      1fr;
  }


  .api-doc-body-v38 nav {
    display: flex;

    overflow-x: auto;

    border-right: 0;

    border-bottom:
      1px solid #263d57;
  }


  .api-doc-body-v38 nav button {
    width: auto;

    min-width: max-content;
  }

}



/* ==========================================================
   NOYTRIX API V39
   FIX HERO / SUPPORTED STRIP OVERLAP
   ========================================================== */


/*
   Верхнему блоку даём нормальную собственную высоту.
   Остальные блоки слегка ужимаем, чтобы вся страница
   по-прежнему помещалась в один экран.
*/

.api-page-v38 {
  grid-template-rows:
    minmax(245px, 1.12fr)
    54px
    minmax(185px, .92fr)
    minmax(188px, .92fr)
    62px !important;

  gap:
    10px !important;
}


/* hero ничего больше не должен выпускать наружу */

.api-hero-grid-v38 {
  min-height:
    245px !important;

  overflow:
    hidden !important;
}


/* немного аккуратнее распределяем содержимое слева */

.api-hero-v38 {
  padding:
    17px 22px !important;

  justify-content:
    center !important;

  overflow:
    hidden !important;
}


/* кнопки чуть ближе к тексту */

.api-actions-v38 {
  margin-top:
    12px !important;
}


/* нижняя служебная строка больше не упирается в следующий блок */

.api-trust-v38 {
  margin-top:
    10px !important;

  padding-bottom:
    2px !important;
}


/* правый API preview строго остаётся внутри своей карточки */

.api-live-v38 {
  min-height:
    245px !important;

  height:
    100% !important;

  overflow:
    hidden !important;
}


/* полоса объектов теперь точно начинается после hero */

.api-supported-v38 {
  position:
    relative !important;

  z-index:
    2 !important;

  margin:
    0 !important;
}


/* ==========================================================
   CURRENT DESKTOP / NOTEBOOK
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 900px
) {

  .api-page-v38 {
    grid-template-rows:
      240px
      50px
      minmax(178px, .9fr)
      minmax(180px, .9fr)
      58px !important;

    gap:
      8px !important;
  }


  .api-hero-grid-v38,
  .api-live-v38 {
    min-height:
      240px !important;
  }


  .api-hero-v38 {
    padding:
      14px 20px !important;
  }


  .api-hero-v38 h1 {
    margin-top:
      5px !important;

    font-size:
      clamp(29px, 2.45vw, 41px) !important;

    line-height:
      1 !important;
  }


  .api-hero-v38 > p {
    margin-top:
      9px !important;
  }


  .api-actions-v38 {
    margin-top:
      10px !important;
  }


  .api-trust-v38 {
    margin-top:
      8px !important;
  }

}



/* ==========================================================
   NOYTRIX API V40
   NO PRICING HERE
   BIGGER / CLEARER / MORE PRODUCT-FOCUSED
   ========================================================== */


/* ==========================================================
   MAIN PAGE
   ========================================================== */

#screen-api .api-page-v38 {
  grid-template-rows:
    270px
    62px
    minmax(315px, 1fr)
    94px !important;

  gap:
    11px !important;
}


/* старый pricing блок больше не должен занимать место
   даже если где-то останется старый DOM */
#screen-api .api-plans-section-v38,
#screen-api .api-plans-v38,
#screen-api .api-plans-title-v38 {
  display:
    none !important;
}


/* ==========================================================
   HERO — MORE AIR / MORE READABLE
   ========================================================== */

#screen-api .api-hero-grid-v38 {
  min-height:
    270px !important;
}


#screen-api .api-hero-v38 {
  padding:
    23px 27px !important;
}


#screen-api .api-eyebrow-v38 {
  font-size:
    12px !important;

  letter-spacing:
    .13em !important;
}


#screen-api .api-hero-v38 h1 {
  max-width:
    730px !important;

  font-size:
    clamp(35px, 3vw, 51px) !important;

  line-height:
    1.01 !important;
}


#screen-api .api-hero-v38 > p {
  max-width:
    700px !important;

  margin-top:
    14px !important;

  font-size:
    14px !important;

  line-height:
    1.52 !important;

  color:
    #afc0d8 !important;
}


#screen-api .api-actions-v38 {
  margin-top:
    17px !important;
}


#screen-api .api-actions-v38 button {
  min-height:
    46px !important;

  padding:
    0 20px !important;

  font-size:
    12px !important;

  border-radius:
    10px !important;
}


#screen-api .api-actions-v38 svg {
  width:
    19px !important;

  height:
    19px !important;
}


/* three trust points */

#screen-api .api-trust-v38 {
  margin-top:
    14px !important;

  gap:
    18px !important;
}


#screen-api .api-trust-v38 span {
  font-size:
    10px !important;

  color:
    #8fa2bd !important;
}


/* ==========================================================
   LIVE API EXAMPLE
   ========================================================== */

#screen-api .api-live-v38 {
  min-height:
    270px !important;
}


#screen-api .api-live-header-v38 {
  height:
    45px !important;

  padding:
    0 17px !important;
}


#screen-api .api-live-header-v38 span,
#screen-api .api-live-header-v38 strong {
  font-size:
    11px !important;
}


#screen-api .api-live-header-v38 button {
  min-height:
    31px !important;

  font-size:
    9px !important;
}


#screen-api .api-live-body-v38 {
  height:
    calc(100% - 45px) !important;
}


#screen-api .api-request-v38,
#screen-api .api-response-v38 {
  padding:
    15px 17px !important;
}


#screen-api .api-request-v38 label {
  font-size:
    9px !important;
}


#screen-api .api-live-v38 pre {
  margin-top:
    13px !important;

  font-size:
    10.5px !important;

  line-height:
    1.68 !important;
}


#screen-api .api-response-status-v38 {
  font-size:
    10px !important;
}


#screen-api .api-response-status-v38 small {
  font-size:
    9px !important;
}


/* ==========================================================
   WHAT YOU CAN CHECK
   ========================================================== */

#screen-api .api-supported-v38 {
  grid-template-columns:
    175px repeat(5,1fr) !important;

  min-height:
    62px !important;

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.22) !important;
}


#screen-api .api-supported-v38 label {
  padding-left:
    18px !important;

  font-size:
    9px !important;

  color:
    #8ca0bc !important;
}


#screen-api .api-supported-v38 > div {
  height:
    46px !important;

  gap:
    10px !important;

  font-size:
    11px !important;
}


#screen-api .api-supported-v38 i {
  width:
    34px !important;

  height:
    34px !important;

  border-radius:
    10px !important;
}


#screen-api .api-supported-v38 svg {
  width:
    19px !important;

  height:
    19px !important;
}


/* stronger color differentiation */

#screen-api .api-supported-v38 .blue i {
  box-shadow:
    0 0 22px rgba(65,156,255,.12) !important;
}

#screen-api .api-supported-v38 .cyan i {
  box-shadow:
    0 0 22px rgba(62,216,230,.12) !important;
}

#screen-api .api-supported-v38 .purple i {
  box-shadow:
    0 0 22px rgba(157,99,255,.13) !important;
}

#screen-api .api-supported-v38 .orange i {
  box-shadow:
    0 0 22px rgba(255,171,37,.13) !important;
}

#screen-api .api-supported-v38 .green i {
  box-shadow:
    0 0 22px rgba(64,222,143,.13) !important;
}


/* ==========================================================
   CORE AREA — NOW THE MAIN PART OF THE PAGE
   ========================================================== */

#screen-api .api-core-grid-v38 {
  min-height:
    315px !important;

  grid-template-columns:
    1.04fr .96fr !important;

  gap:
    11px !important;
}


#screen-api .api-returns-v38,
#screen-api .api-flow-v38 {
  padding:
    16px !important;

  border-radius:
    16px !important;

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.22) !important;
}


/* ==========================================================
   SECTION TITLES
   ========================================================== */

#screen-api .api-section-heading-v38 h2 {
  font-size:
    17px !important;

  letter-spacing:
    -.02em !important;
}


#screen-api .api-section-heading-v38 p {
  margin-top:
    5px !important;

  max-width:
    660px !important;

  font-size:
    10px !important;

  line-height:
    1.42 !important;

  color:
    #899db8 !important;
}


/* ==========================================================
   WHAT PRODUCT RECEIVES
   ========================================================== */

#screen-api .api-return-grid-v38 {
  height:
    calc(100% - 46px) !important;

  margin-top:
    12px !important;

  gap:
    10px !important;
}


#screen-api .api-return-grid-v38 article {
  grid-template-columns:
    51px 1fr auto !important;

  gap:
    12px !important;

  padding:
    13px !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      rgba(17,40,69,.84),
      rgba(8,23,44,.74)
    ) !important;

  transition:
    transform .18s ease,
    border-color .18s ease !important;
}


#screen-api .api-return-grid-v38 article:hover {
  transform:
    translateY(-1px) !important;

  border-color:
    #3c5d82 !important;
}


#screen-api .api-return-grid-v38 article > i {
  width:
    47px !important;

  height:
    47px !important;

  border-radius:
    12px !important;
}


#screen-api .api-return-grid-v38 svg {
  width:
    25px !important;

  height:
    25px !important;
}


#screen-api .api-return-grid-v38 article strong {
  font-size:
    12px !important;
}


#screen-api .api-return-grid-v38 article p {
  margin-top:
    4px !important;

  font-size:
    9px !important;

  line-height:
    1.38 !important;

  color:
    #9dafc7 !important;
}


#screen-api .api-return-grid-v38 article > b {
  padding:
    7px 9px !important;

  font-size:
    9px !important;

  border-radius:
    7px !important;
}


/* ==========================================================
   HOW INTEGRATION WORKS
   ========================================================== */

#screen-api .api-flow-steps-v38 {
  height:
    calc(100% - 32px) !important;

  margin-top:
    10px !important;
}


#screen-api .api-flow-steps-v38 article {
  min-height:
    190px !important;

  padding:
    15px !important;

  border-radius:
    12px !important;
}


#screen-api .api-flow-steps-v38 article > span {
  top:
    10px !important;

  left:
    10px !important;

  width:
    27px !important;

  height:
    27px !important;

  font-size:
    12px !important;
}


#screen-api .api-flow-steps-v38 article > i {
  width:
    52px !important;

  height:
    52px !important;

  margin:
    0 auto 14px !important;

  border-radius:
    13px !important;
}


#screen-api .api-flow-steps-v38 article > i svg {
  width:
    28px !important;

  height:
    28px !important;
}


#screen-api .api-flow-steps-v38 strong {
  font-size:
    11px !important;
}


#screen-api .api-flow-steps-v38 p {
  margin-top:
    6px !important;

  font-size:
    8.5px !important;

  line-height:
    1.42 !important;

  color:
    #9cafc7 !important;
}


#screen-api .api-flow-arrow-v38 {
  font-size:
    21px !important;

  color:
    #8fa4be !important;
}


/* ==========================================================
   FOOTER FEATURES
   ========================================================== */

#screen-api .api-footer-features-v38 {
  min-height:
    94px !important;

  border-radius:
    14px !important;
}


#screen-api .api-footer-features-v38 article {
  gap:
    12px !important;

  padding:
    0 18px !important;
}


#screen-api .api-footer-features-v38 i {
  flex:
    0 0 44px !important;

  width:
    44px !important;

  height:
    44px !important;

  border-radius:
    11px !important;
}


#screen-api .api-footer-features-v38 svg {
  width:
    23px !important;

  height:
    23px !important;
}


#screen-api .api-footer-features-v38 strong {
  font-size:
    11px !important;
}


#screen-api .api-footer-features-v38 span {
  margin-top:
    4px !important;

  font-size:
    8.5px !important;

  line-height:
    1.3 !important;
}


/* ==========================================================
   SHORT DESKTOP
   still one screen, but readable
   ========================================================== */

@media (
  min-width: 761px
) and (
  max-height: 850px
) {

  #screen-api .api-page-v38 {
    grid-template-rows:
      235px
      55px
      minmax(270px,1fr)
      78px !important;

    gap:
      8px !important;
  }


  #screen-api .api-hero-grid-v38,
  #screen-api .api-live-v38 {
    min-height:
      235px !important;
  }


  #screen-api .api-hero-v38 {
    padding:
      16px 21px !important;
  }


  #screen-api .api-hero-v38 h1 {
    font-size:
      clamp(30px,2.55vw,42px) !important;
  }


  #screen-api .api-hero-v38 > p {
    font-size:
      11px !important;
  }


  #screen-api .api-actions-v38 {
    margin-top:
      11px !important;
  }


  #screen-api .api-actions-v38 button {
    min-height:
      38px !important;

    font-size:
      10px !important;
  }


  #screen-api .api-trust-v38 {
    margin-top:
      8px !important;
  }


  #screen-api .api-trust-v38 span {
    font-size:
      8px !important;
  }


  #screen-api .api-core-grid-v38 {
    min-height:
      270px !important;
  }


  #screen-api .api-returns-v38,
  #screen-api .api-flow-v38 {
    padding:
      11px !important;
  }


  #screen-api .api-section-heading-v38 h2 {
    font-size:
      14px !important;
  }


  #screen-api .api-return-grid-v38 article {
    grid-template-columns:
      43px 1fr auto !important;

    padding:
      9px !important;
  }


  #screen-api .api-return-grid-v38 article > i {
    width:
      39px !important;

    height:
      39px !important;
  }


  #screen-api .api-flow-steps-v38 article {
    min-height:
      152px !important;

    padding:
      10px !important;
  }


  #screen-api .api-flow-steps-v38 article > i {
    width:
      43px !important;

    height:
      43px !important;
  }


  #screen-api .api-footer-features-v38 {
    min-height:
      78px !important;
  }


  #screen-api .api-footer-features-v38 i {
    flex-basis:
      37px !important;

    width:
      37px !important;

    height:
      37px !important;
  }

}


/* ==========================================================
   NOYTRIX API HERO TOP FIX
   Prevent eyebrow/title from being clipped by hero card.
   ========================================================== */

#screen-api.api-screen-v38 .api-hero-v38 {
    padding-top: 44px !important;
}

#screen-api.api-screen-v38 .api-eyebrow-v38 {
    margin-top: 0 !important;
    top: auto !important;
    transform: none !important;
}


/* NOYTRIX API DESKTOP EXPAND START */

@media (min-width: 1200px) {

    /*
     * Используем почти всю доступную ширину workspace.
     * Sidebar не трогаем.
     */
    body:has(#screen-api.active) .workspace {
        max-width: none !important;
        width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #screen-api.api-screen-v38 {
        width: 100% !important;
        max-width: none !important;
    }

    /*
     * Немного увеличиваем ВСЮ API-страницу.
     */
    #screen-api.api-screen-v38 .api-page-v38 {
        width: 98.05% !important;
        max-width: none !important;

        zoom: 1.02;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * Главная левая карточка.
     * Верхний отступ 44px сохраняем.
     */
    #screen-api.api-screen-v38 .api-hero-v38 {
        padding-top: 44px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /*
     * Кнопки в hero делаем заметно крупнее.
     */
    #screen-api.api-screen-v38 .api-hero-v38 a,
    #screen-api.api-screen-v38 .api-hero-v38 button {
        min-height: 46px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        font-size: 13px !important;
    }

}

/* NOYTRIX API DESKTOP EXPAND END */

/* NOYTRIX API HERO TITLE FINAL SIZE */

@media (min-width: 1200px) {

    #screen-api.api-screen-v38 .api-hero-v38 h1 {
        font-size: 32px !important;
        line-height: 1.04 !important;
        letter-spacing: -0.02em !important;
    }

}


/* NOYTRIX SUPPORTED MOBILE V8 START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * REAL BLOCK:
   *
   * <section class="api-supported-v38">
   *   <label>WHAT YOU CAN CHECK</label>
   *   <div>Links</div>
   *   <div>Wallets</div>
   *   <div>Tokens</div>
   *   <div>Contracts</div>
   *   <div>Transactions</div>
   * </section>
   *
   * Desktop forced:
   * 175px repeat(5,1fr)
   *
   * Mobile V8 replaces it directly.
   * ========================================================
   */


  #screen-api
  .api-page-v38
  > .api-supported-v38 {

    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      )
      !important;

    grid-template-rows:
      auto !important;

    grid-auto-rows:
      auto !important;

    grid-auto-flow:
      row !important;

    width:
      calc(
        100% -
        16px
      )
      !important;

    max-width:
      calc(
        100% -
        16px
      )
      !important;

    min-width:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      18px
      8px
      20px !important;

    padding:
      14px !important;

    gap:
      10px !important;

    align-items:
      stretch !important;

    justify-items:
      stretch !important;

    overflow:
      hidden !important;

    overflow-x:
      hidden !important;

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * TITLE -> LEFT
   * ========================================================
   */

  #screen-api
  .api-page-v38
  > .api-supported-v38
  > label {

    grid-column:
      1 / -1 !important;

    grid-row:
      auto !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    padding:
      0
      2px
      5px !important;

    display:
      block !important;

    position:
      static !important;

    inset:
      auto !important;

    transform:
      none !important;

    justify-self:
      start !important;

    align-self:
      start !important;

    text-align:
      left !important;

    white-space:
      normal !important;

    font-size:
      11px !important;

    font-weight:
      850 !important;

    line-height:
      1.1 !important;

    letter-spacing:
      .10em !important;

    color:
      #93a8c5 !important;

  }


  /*
   * ========================================================
   * LINKS / WALLETS / TOKENS / CONTRACTS / TRANSACTIONS
   * ========================================================
   */

  #screen-api
  .api-page-v38
  > .api-supported-v38
  > div {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      58px !important;

    min-height:
      58px !important;

    max-height:
      58px !important;

    margin:
      0 !important;

    padding:
      8px
      11px !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      9px !important;

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    float:
      none !important;

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    overflow:
      hidden !important;

    white-space:
      nowrap !important;

    scroll-snap-align:
      none !important;

    border:
      1px solid
      rgba(
        75,
        117,
        163,
        .20
      )
      !important;

    border-radius:
      13px !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          15,
          43,
          73,
          .72
        ),
        rgba(
          7,
          24,
          44,
          .76
        )
      )
      !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Fifth item gets a clean full-width final row.
   */

  #screen-api
  .api-page-v38
  > .api-supported-v38
  > .green {

    grid-column:
      1 / -1 !important;

  }


  /*
   * Icons.
   */

  #screen-api
  .api-page-v38
  > .api-supported-v38
  > div
  > i {

    width:
      34px !important;

    min-width:
      34px !important;

    max-width:
      34px !important;

    height:
      34px !important;

    min-height:
      34px !important;

    max-height:
      34px !important;

    flex:
      0 0 34px !important;

    margin:
      0 !important;

  }


  #screen-api
  .api-page-v38
  > .api-supported-v38
  > div
  > i
  > svg {

    width:
      19px !important;

    height:
      19px !important;

  }


  /*
   * Labels.
   */

  #screen-api
  .api-page-v38
  > .api-supported-v38
  > div
  > span {

    display:
      block !important;

    min-width:
      0 !important;

    max-width:
      calc(
        100% -
        43px
      )
      !important;

    margin:
      0 !important;

    padding:
      0 !important;

    font-size:
      13px !important;

    font-weight:
      750 !important;

    line-height:
      1.1 !important;

    text-align:
      left !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;

  }


  /*
   * Absolutely kill the old horizontal-strip behavior.
   */

  #screen-api
  .api-page-v38
  > .api-supported-v38 {

    scroll-snap-type:
      none !important;

    scroll-behavior:
      auto !important;

    touch-action:
      pan-y !important;

  }

}


/*
 * ==========================================================
 * SMALL PHONE
 * ==========================================================
 */

@media (max-width: 390px) {


  #screen-api
  .api-page-v38
  > .api-supported-v38 {

    width:
      calc(
        100% -
        10px
      )
      !important;

    max-width:
      calc(
        100% -
        10px
      )
      !important;

    margin-left:
      5px !important;

    margin-right:
      5px !important;

    padding:
      11px !important;

    gap:
      7px !important;

  }


  #screen-api
  .api-page-v38
  > .api-supported-v38
  > div {

    height:
      56px !important;

    min-height:
      56px !important;

    max-height:
      56px !important;

    padding-left:
      8px !important;

    padding-right:
      8px !important;

    gap:
      7px !important;

  }


  #screen-api
  .api-page-v38
  > .api-supported-v38
  > div
  > span {

    font-size:
      12px !important;

  }

}


/* NOYTRIX SUPPORTED MOBILE V8 END */




/* billing-v52.css */
/*
============================================================
NOYTRIX BILLING V84
PRO / API SEPARATE
ONE SCREEN DESKTOP
PREMIUM MINIMALISM
============================================================
*/


#screen-billing {

    --b84-bg:
        #020b18;

    --b84-card:
        #071b30;

    --b84-card-2:
        #0a2139;

    --b84-border:
        rgba(89, 151, 207, .28);

    --b84-border-strong:
        rgba(89, 170, 236, .52);

    --b84-text:
        #f6f9ff;

    --b84-muted:
        #8eacd0;

    --b84-soft:
        #6685a8;

    --b84-gold:
        #ffba32;

    --b84-green:
        #31dca0;

    --b84-blue:
        #49a8ff;


    width:
        100% !important;

    height:
        calc(100vh - 8px) !important;

    min-height:
        0 !important;

    overflow:
        hidden !important;
}


#screen-billing,
#screen-billing * {

    box-sizing:
        border-box;
}


#screen-billing
.billing-app {

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;
}


#screen-billing
.billing-premium-v84 {

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        14px 20px 16px;

    overflow:
        hidden;

    color:
        var(--b84-text);

    background:
        var(--b84-bg);

    font-family:
        inherit;
}


#screen-billing
.billing-premium-v84
button,

#screen-billing
.billing-premium-v84
a {

    font:
        inherit;
}


/* ============================================================
   HEADER
   ============================================================ */


#screen-billing
.p84-header {

    flex:
        0 0 auto;

    min-height:
        92px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        24px;

    padding:
        2px 4px 10px;
}


#screen-billing
.p84-title {

    min-width:
        0;
}


#screen-billing
.p84-title > span,

#screen-billing
.p84-kicker {

    display:
        block;

    color:
        var(--b84-gold);

    font-size:
        11px;

    font-weight:
        900;

    line-height:
        1.15;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


#screen-billing
.p84-title h1 {

    margin:
        4px 0 0;

    color:
        var(--b84-text);

    font-size:
        30px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.035em;
}


#screen-billing
.p84-title p {

    margin:
        7px 0 0;

    color:
        var(--b84-muted);

    font-size:
        14px;

    font-weight:
        650;

    line-height:
        1.25;
}


/* ============================================================
   FIXED ACCOUNT HEADER
   ============================================================ */


#screen-billing
.p84-account {

    min-width:
        310px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        8px 14px;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        14px;

    background:
        rgba(8, 28, 48, .78);
}


#screen-billing
.p84-account-avatar {

    width:
        42px;

    height:
        42px;

    min-width:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1.5px solid
        var(--b84-gold);

    border-radius:
        50%;

    color:
        var(--b84-text);

    background:
        #0c2742;

    font-size:
        12px;

    font-weight:
        900;

    line-height:
        1;
}


#screen-billing
.p84-account-copy {

    min-width:
        0;

    display:
        flex;

    flex:
        1 1 auto;

    flex-direction:
        column;

    justify-content:
        center;
}


#screen-billing
.p84-account-copy > strong {

    display:
        block;

    max-width:
        245px;

    overflow:
        hidden;

    color:
        var(--b84-text);

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


#screen-billing
.p84-account-status {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        4px 9px;

    margin-top:
        4px;
}


#screen-billing
.p84-account-status span {

    position:
        relative;

    padding-left:
        10px;

    color:
        var(--b84-green);

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;
}


#screen-billing
.p84-account-status span::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        currentColor;

    transform:
        translateY(-50%);
}


#screen-billing
.p84-account-status span.neutral {

    color:
        var(--b84-muted);
}


#screen-billing
.p84-header-login {

    width:
        130px !important;

    margin:
        0 !important;
}


/* ============================================================
   CENTER SWITCH
   ============================================================ */


#screen-billing
.p84-switch {

    flex:
        0 0 42px;

    width:
        330px;

    align-self:
        center;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        3px;

    padding:
        3px;

    margin:
        0 auto 12px;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        12px;

    background:
        #06172a;
}


#screen-billing
.p84-switch button {

    min-width:
        0;

    height:
        34px;

    padding:
        0 14px;

    border:
        0;

    border-radius:
        9px;

    color:
        var(--b84-muted);

    background:
        transparent;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    white-space:
        nowrap;
}


#screen-billing
.p84-switch button:hover {

    color:
        var(--b84-text);
}


#screen-billing
.p84-switch button.active {

    color:
        var(--b84-text);

    background:
        linear-gradient(
            180deg,
            #17436b,
            #103454
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(73, 168, 255, .24);
}


/* ============================================================
   VIEW
   ============================================================ */


#screen-billing
.p84-view {

    flex:
        1 1 auto;

    min-height:
        0;

    overflow:
        hidden;
}


/* ============================================================
   PRO
   ============================================================ */


#screen-billing
.p84-pro-view {

    display:
        flex;

    justify-content:
        center;

    align-items:
        stretch;
}


#screen-billing
.p84-pro-card {

    width:
        min(
            1060px,
            100%
        );

    height:
        100%;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 186, 50, .38);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(28, 36, 45, .86),
            rgba(5, 25, 44, .99) 48%
        );
}


#screen-billing
.p84-pro-main {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:
        0;
}


#screen-billing
.p84-pro-intro,

#screen-billing
.p84-pro-benefits {

    min-width:
        0;

    padding:
        28px 30px;
}


#screen-billing
.p84-pro-intro {

    display:
        flex;

    flex-direction:
        column;

    border-right:
        1px solid
        var(--b84-border);
}


#screen-billing
.p84-pro-intro h2 {

    margin:
        8px 0 0;

    color:
        var(--b84-text);

    font-size:
        34px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.03em;
}


#screen-billing
.p84-description {

    margin:
        11px 0 0;

    color:
        #bfd0e5;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.4;
}


#screen-billing
.p84-pro-price {

    margin-top:
        22px;
}


#screen-billing
.p84-price {

    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;
}


#screen-billing
.p84-price strong {

    color:
        var(--b84-text);

    font-size:
        40px;

    font-weight:
        900;

    line-height:
        .95;

    letter-spacing:
        -.045em;
}


#screen-billing
.p84-price span {

    color:
        var(--b84-muted);

    font-size:
        12px;

    font-weight:
        750;
}


#screen-billing
.p84-pro-price > small {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--b84-gold);

    font-size:
        10px;

    font-weight:
        800;
}


#screen-billing
.p84-terms {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        8px;

    margin-top:
        auto;

    padding-top:
        22px;
}


#screen-billing
.p84-terms button {

    min-width:
        0;

    min-height:
        68px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        3px;

    padding:
        10px 11px;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        11px;

    color:
        var(--b84-muted);

    background:
        #06192c;

    cursor:
        pointer;
}


#screen-billing
.p84-terms button.active {

    color:
        var(--b84-text);

    border-color:
        var(--b84-gold);

    background:
        rgba(255, 186, 50, .08);
}


#screen-billing
.p84-terms span {

    font-size:
        10px;

    font-weight:
        750;
}


#screen-billing
.p84-terms strong {

    color:
        inherit;

    font-size:
        14px;

    font-weight:
        900;
}


#screen-billing
.p84-terms small {

    color:
        var(--b84-soft);

    font-size:
        8px;

    font-weight:
        700;
}


/* ============================================================
   PRO BENEFITS
   ============================================================ */


#screen-billing
.p84-pro-benefits {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


#screen-billing
.p84-pro-feature-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        17px 24px;

    margin:
        22px 0 0;

    padding:
        0;

    list-style:
        none;
}


#screen-billing
.p84-pro-feature-grid li {

    position:
        relative;

    padding-left:
        23px;

    color:
        #d8e4f1;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.35;
}


#screen-billing
.p84-pro-feature-grid li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    top:
        -1px;

    color:
        var(--b84-green);

    font-size:
        15px;

    font-weight:
        900;
}


/* ============================================================
   PRO FOOTER
   ============================================================ */


#screen-billing
.p84-pro-footer {

    flex:
        0 0 74px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    align-items:
        center;

    gap:
        18px;

    padding:
        12px 18px;

    border-top:
        1px solid
        var(--b84-border);

    background:
        rgba(3, 16, 29, .55);
}


#screen-billing
.p84-pro-actions {

    min-width:
        250px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


#screen-billing
.p84-pro-actions
.p84-primary,

#screen-billing
.p84-pro-actions
.p84-secondary {

    width:
        210px;

    margin:
        0;
}


#screen-billing
.p84-live-status,

#screen-billing
.p84-pro-note {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--b84-muted);

    font-size:
        11px;

    font-weight:
        750;
}


#screen-billing
.p84-live-status {

    color:
        var(--b84-green);
}


#screen-billing
.p84-live-status i {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--b84-green);

    box-shadow:
        0 0 12px
        rgba(49, 220, 160, .45);
}


/* ============================================================
   API VIEW
   ============================================================ */


#screen-billing
.p84-api-view {

    display:
        flex;

    flex-direction:
        column;
}


#screen-billing
.p84-api-heading {

    flex:
        0 0 60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 4px 10px;
}


#screen-billing
.p84-api-heading h2 {

    margin:
        4px 0 0;

    color:
        var(--b84-text);

    font-size:
        19px;

    font-weight:
        850;

    line-height:
        1.1;
}


#screen-billing
.p84-docs-link {

    padding:
        0;

    border:
        0;

    color:
        var(--b84-muted);

    background:
        transparent;

    font-size:
        11px;

    font-weight:
        750;

    cursor:
        pointer;
}


#screen-billing
.p84-docs-link:hover {

    color:
        var(--b84-blue);
}


#screen-billing
.p84-api-grid {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        14px;
}


/* ============================================================
   API CARDS
   ============================================================ */


#screen-billing
.p84-plan {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        20px 21px 16px;

    overflow:
        hidden;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        17px;

    background:
        linear-gradient(
            180deg,
            #09213a,
            #06182b
        );
}


#screen-billing
.p84-plan.p84-featured {

    border-color:
        rgba(73, 168, 255, .58);

    background:
        linear-gradient(
            180deg,
            #153f63,
            #08213a
        );
}


#screen-billing
.p84-current-plan {

    box-shadow:
        inset 0 0 0 1px
        rgba(49, 220, 160, .12);
}


#screen-billing
.p84-badge {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    min-height:
        23px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255, 186, 50, .48);

    border-radius:
        999px;

    color:
        var(--b84-gold);

    background:
        rgba(255, 186, 50, .08);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .05em;
}


#screen-billing
.p84-badge-active {

    color:
        var(--b84-green);

    border-color:
        rgba(49, 220, 160, .42);

    background:
        rgba(49, 220, 160, .08);
}


#screen-billing
.p84-plan-head {

    flex:
        0 0 auto;

    min-height:
        178px;

    padding-right:
        18px;
}


#screen-billing
.p84-plan-head h2 {

    margin:
        7px 0 0;

    color:
        var(--b84-text);

    font-size:
        24px;

    font-weight:
        900;

    line-height:
        1.05;

    letter-spacing:
        -.025em;
}


#screen-billing
.p84-plan-head
.p84-price {

    margin-top:
        14px;
}


#screen-billing
.p84-plan-head
.p84-price strong {

    font-size:
        36px;
}


#screen-billing
.p84-plan-head
.p84-description {

    margin-top:
        10px;

    font-size:
        12px;

    line-height:
        1.35;
}


#screen-billing
.p84-features {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin:
        10px 0 12px;

    padding:
        0;

    list-style:
        none;
}


#screen-billing
.p84-features li {

    position:
        relative;

    padding-left:
        21px;

    color:
        #d9e5f2;

    font-size:
        11.5px;

    font-weight:
        650;

    line-height:
        1.25;
}


#screen-billing
.p84-features li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        var(--b84-green);

    font-size:
        13px;

    font-weight:
        900;
}


#screen-billing
.p84-plan-bottom {

    flex:
        0 0 auto;

    margin-top:
        auto;
}


/* ============================================================
   BUTTONS
   ============================================================ */


#screen-billing
.p84-primary,

#screen-billing
.p84-secondary,

#screen-billing
.p84-mini-button {

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 14px;

    border:
        0;

    border-radius:
        10px;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        850;

    line-height:
        1;

    cursor:
        pointer;
}


#screen-billing
.p84-primary {

    width:
        100%;

    color:
        #06121e;

    background:
        var(--b84-gold);
}


#screen-billing
.p84-featured
.p84-primary:not(
    .p84-active-button
) {

    background:
        #55b0fa;
}


#screen-billing
.p84-secondary {

    color:
        #dce8f5;

    border:
        1px solid
        var(--b84-border);

    background:
        #071d33;
}


#screen-billing
.p84-active-button {

    color:
        #05251a;

    background:
        var(--b84-green);

    opacity:
        .88;

    cursor:
        default;
}


#screen-billing
.p84-api-actions {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        6px;

    margin-top:
        6px;
}


#screen-billing
.p84-mini-button {

    min-height:
        34px;

    color:
        var(--b84-muted);

    border:
        1px solid
        var(--b84-border);

    background:
        #06182b;

    font-size:
        9px;
}


/* ============================================================
   API KEY BOX
   ============================================================ */


#screen-billing
.p84-key-box {

    flex:
        0 0 52px;

    display:
        grid;

    grid-template-columns:
        230px
        minmax(0, 1fr)
        90px;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        8px;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(49, 220, 160, .35);

    border-radius:
        11px;

    background:
        #071d2e;
}


#screen-billing
.p84-key-box div span,

#screen-billing
.p84-key-box div strong {

    display:
        block;
}


#screen-billing
.p84-key-box div span {

    color:
        var(--b84-green);

    font-size:
        8px;

    font-weight:
        900;
}


#screen-billing
.p84-key-box div strong {

    margin-top:
        2px;

    color:
        var(--b84-text);

    font-size:
        9px;
}


#screen-billing
.p84-key-box code {

    min-width:
        0;

    overflow:
        hidden;

    color:
        #d7e7f7;

    font-size:
        10px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


#screen-billing
.p84-key-box
.p84-secondary {

    min-height:
        32px;
}


/* ============================================================
   1600x900 / NORMAL DESKTOP
   ============================================================ */


@media (
    min-width: 1200px
) and (
    max-height: 900px
) {

    #screen-billing
    .billing-premium-v84 {

        padding-top:
            10px;

        padding-bottom:
            10px;
    }


    #screen-billing
    .p84-header {

        min-height:
            82px;
    }


    #screen-billing
    .p84-title h1 {

        font-size:
            27px;
    }


    #screen-billing
    .p84-switch {

        flex-basis:
            38px;

        margin-bottom:
            8px;
    }


    #screen-billing
    .p84-plan {

        padding-top:
            17px;

        padding-bottom:
            13px;
    }


    #screen-billing
    .p84-plan-head {

        min-height:
            155px;
    }


    #screen-billing
    .p84-plan-head h2 {

        font-size:
            22px;
    }


    #screen-billing
    .p84-plan-head
    .p84-price strong {

        font-size:
            33px;
    }


    #screen-billing
    .p84-features {

        gap:
            5px;
    }


    #screen-billing
    .p84-features li {

        font-size:
            10.5px;
    }


    #screen-billing
    .p84-pro-intro,

    #screen-billing
    .p84-pro-benefits {

        padding-top:
            22px;

        padding-bottom:
            22px;
    }


    #screen-billing
    .p84-pro-feature-grid {

        gap:
            13px 20px;
    }
}


/* ============================================================
   SMALL DESKTOP
   ============================================================ */


@media (
    max-width: 1199px
) {

    #screen-billing {

        height:
            auto !important;

        min-height:
            100vh !important;

        overflow-y:
            auto !important;
    }


    #screen-billing
    .billing-app,

    #screen-billing
    .billing-premium-v84 {

        height:
            auto !important;

        overflow:
            visible !important;
    }


    #screen-billing
    .p84-api-grid {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-pro-main {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-pro-intro {

        border-right:
            0;

        border-bottom:
            1px solid
            var(--b84-border);
    }
}


/* ============================================================
   MOBILE
   ============================================================ */


@media (
    max-width: 700px
) {

    #screen-billing
    .billing-premium-v84 {

        padding:
            12px;
    }


    #screen-billing
    .p84-header {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-account {

        min-width:
            0;
    }


    #screen-billing
    .p84-switch {

        width:
            100%;
    }


    #screen-billing
    .p84-pro-feature-grid {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-terms {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-pro-footer {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-pro-actions {

        min-width:
            0;

        flex-direction:
            column;
    }


    #screen-billing
    .p84-pro-actions
    .p84-primary,

    #screen-billing
    .p84-pro-actions
    .p84-secondary {

        width:
            100%;
    }
}


/*
============================================================
NOYTRIX BILLING V85
THREE SEPARATE PRO PLAN CARDS
============================================================
*/


/* ============================================================
   PRO VIEW
   ============================================================ */


#screen-billing
.p85-pro-view {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        0;

    overflow:
        hidden;
}


/* ============================================================
   PRO HEADING
   ============================================================ */


#screen-billing
.p85-pro-heading {

    flex:
        0 0 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        0 4px 9px;
}


#screen-billing
.p85-pro-heading h2 {

    margin:
        4px 0 0;

    color:
        var(--b84-text);

    font-size:
        20px;

    font-weight:
        900;

    line-height:
        1.05;
}


#screen-billing
.p85-pro-heading > p {

    max-width:
        380px;

    margin:
        0;

    color:
        var(--b84-muted);

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.3;

    text-align:
        right;
}


/* ============================================================
   ACTIVE STATUS
   ============================================================ */


#screen-billing
.p85-pro-status {

    flex:
        0 0 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 4px 9px;
}


#screen-billing
.p85-pro-status-left {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


#screen-billing
.p85-live-dot {

    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    border-radius:
        50%;

    background:
        var(--b84-green);

    box-shadow:
        0 0 14px
        rgba(49, 220, 160, .42);
}


#screen-billing
.p85-pro-status-left
strong,

#screen-billing
.p85-pro-status-left
span {

    display:
        block;
}


#screen-billing
.p85-pro-status-left
strong {

    color:
        var(--b84-green);

    font-size:
        12px;

    font-weight:
        850;
}


#screen-billing
.p85-pro-status-left
div > span {

    margin-top:
        2px;

    color:
        var(--b84-muted);

    font-size:
        10px;

    font-weight:
        650;
}


#screen-billing
.p85-pro-status-manage {

    min-width:
        190px;
}


#screen-billing
.p85-pro-status-manage
.p84-secondary {

    min-height:
        36px;

    margin:
        0;
}


/* ============================================================
   THREE PRO CARDS
   ============================================================ */


#screen-billing
.p85-pro-grid {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        14px;

    align-items:
        stretch;
}


/* ============================================================
   PLAN CARD
   ============================================================ */


#screen-billing
.p85-pro-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        22px 23px 17px;

    overflow:
        hidden;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        17px;

    background:
        linear-gradient(
            180deg,
            #091f36,
            #06182b
        );

    transition:
        border-color .18s ease,
        transform .18s ease,
        background .18s ease;
}


#screen-billing
.p85-pro-card:hover {

    border-color:
        var(--b84-border-strong);

    transform:
        translateY(-2px);
}


#screen-billing
.p85-pro-featured {

    border-color:
        rgba(73, 168, 255, .62);

    background:
        linear-gradient(
            180deg,
            #153f63,
            #08213a
        );
}


#screen-billing
.p85-pro-yearly {

    border-color:
        rgba(255, 186, 50, .46);

    background:
        linear-gradient(
            180deg,
            rgba(48, 43, 29, .44),
            #071a2d
        );
}


/* ============================================================
   BADGES
   ============================================================ */


#screen-billing
.p85-plan-badge {

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    min-height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 9px;

    border:
        1px solid
        rgba(73, 168, 255, .55);

    border-radius:
        999px;

    color:
        #78c5ff;

    background:
        rgba(73, 168, 255, .10);

    font-size:
        8px;

    font-weight:
        950;

    letter-spacing:
        .06em;
}


#screen-billing
.p85-best-value {

    color:
        var(--b84-gold);

    border-color:
        rgba(255, 186, 50, .50);

    background:
        rgba(255, 186, 50, .09);
}


/* ============================================================
   CARD HEAD
   ============================================================ */


#screen-billing
.p85-card-head {

    flex:
        0 0 auto;

    min-height:
        190px;

    padding-right:
        10px;
}


#screen-billing
.p85-card-head h2 {

    margin:
        7px 0 0;

    color:
        var(--b84-text);

    font-size:
        28px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.03em;
}


/* ============================================================
   PRICE
   ============================================================ */


#screen-billing
.p85-price {

    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;

    margin-top:
        20px;
}


#screen-billing
.p85-price strong {

    color:
        var(--b84-text);

    font-size:
        40px;

    font-weight:
        900;

    line-height:
        .95;

    letter-spacing:
        -.045em;
}


#screen-billing
.p85-price span {

    color:
        var(--b84-muted);

    font-size:
        11px;

    font-weight:
        750;
}


#screen-billing
.p85-equivalent {

    min-height:
        15px;

    margin:
        7px 0 0;

    color:
        var(--b84-muted);

    font-size:
        10px;

    font-weight:
        750;
}


#screen-billing
.p85-saving {

    color:
        var(--b84-green);
}


#screen-billing
.p85-description {

    max-width:
        380px;

    margin:
        14px 0 0;

    color:
        #bfd0e4;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.4;
}


/* ============================================================
   FEATURES
   ============================================================ */


#screen-billing
.p85-features {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin:
        14px 0 16px;

    padding:
        0;

    list-style:
        none;
}


#screen-billing
.p85-features li {

    position:
        relative;

    padding-left:
        22px;

    color:
        #d9e5f2;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.3;
}


#screen-billing
.p85-features li::before {

    content:
        "✓";

    position:
        absolute;

    top:
        -1px;

    left:
        0;

    color:
        var(--b84-green);

    font-size:
        14px;

    font-weight:
        950;
}


/* ============================================================
   CARD BOTTOM
   ============================================================ */


#screen-billing
.p85-card-bottom {

    flex:
        0 0 auto;

    margin-top:
        auto;
}


#screen-billing
.p85-card-bottom
.p84-primary {

    min-height:
        44px;

    font-size:
        11px;
}


/* ============================================================
   FOOTER
   ============================================================ */


#screen-billing
.p85-pro-footer {

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        8px 4px 0;

    color:
        var(--b84-soft);

    font-size:
        9px;

    font-weight:
        700;
}


/* ============================================================
   FIT 900PX HEIGHT
   ============================================================ */


@media (
    min-width: 1200px
) and (
    max-height: 900px
) {

    #screen-billing
    .p85-pro-status,

    #screen-billing
    .p85-pro-heading {

        flex-basis:
            50px;
    }


    #screen-billing
    .p85-pro-card {

        padding:
            17px 19px 13px;
    }


    #screen-billing
    .p85-card-head {

        min-height:
            158px;
    }


    #screen-billing
    .p85-card-head h2 {

        font-size:
            24px;
    }


    #screen-billing
    .p85-price {

        margin-top:
            14px;
    }


    #screen-billing
    .p85-price strong {

        font-size:
            34px;
    }


    #screen-billing
    .p85-description {

        margin-top:
            9px;

        font-size:
            10.5px;
    }


    #screen-billing
    .p85-features {

        gap:
            6px;

        margin-top:
            9px;

        margin-bottom:
            10px;
    }


    #screen-billing
    .p85-features li {

        font-size:
            10.5px;

        line-height:
            1.2;
    }


    #screen-billing
    .p85-pro-footer {

        flex-basis:
            28px;

        padding-top:
            5px;
    }

}


/* ============================================================
   SMALL DESKTOP
   ============================================================ */


@media (
    max-width: 1199px
) {

    #screen-billing
    .p85-pro-view {

        overflow:
            visible;
    }


    #screen-billing
    .p85-pro-grid {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p85-pro-card {

        min-height:
            500px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */


@media (
    max-width: 700px
) {

    #screen-billing
    .p85-pro-status,

    #screen-billing
    .p85-pro-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        height:
            auto;

        flex-basis:
            auto;
    }


    #screen-billing
    .p85-pro-status-manage {

        width:
            100%;

        min-width:
            0;
    }


    #screen-billing
    .p85-pro-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

        height:
            auto;

        flex-basis:
            auto;
    }

}


/*
============================================================
NOYTRIX BILLING V86
PREMIUM DESIGN POLISH
============================================================
*/


/* ============================================================
   PREMIUM VARIABLES
   ============================================================ */

#screen-billing {

    --p86-blue:
        66, 169, 255;

    --p86-cyan:
        74, 218, 255;

    --p86-gold:
        255, 186, 50;

    --p86-green:
        49, 220, 160;

}


/* ============================================================
   ALL THREE PRO CARDS
   DEEPER PREMIUM BACKGROUND
   ============================================================ */

#screen-billing
.p85-pro-card {

    isolation:
        isolate;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(91, 153, 211, .32);

    background:

        radial-gradient(
            900px 420px
            at -10% -10%,
            rgba(
                var(--p86-blue),
                .10
            ),
            transparent 58%
        ),

        radial-gradient(
            600px 360px
            at 110% 110%,
            rgba(
                var(--p86-cyan),
                .055
            ),
            transparent 62%
        ),

        linear-gradient(
            155deg,
            #0a223a 0%,
            #071a2d 52%,
            #051525 100%
        );

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .035),

        0 18px 50px
        rgba(0, 0, 0, .18);

    transform:
        translateZ(0);

    transition:

        transform .28s
        cubic-bezier(.2,.8,.2,1),

        border-color .28s ease,

        box-shadow .28s ease,

        background .28s ease;
}


/* ============================================================
   SUBTLE LIGHT LAYER
   ============================================================ */

#screen-billing
.p85-pro-card::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .7;

    background:

        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.025) 30%,
            rgba(255,255,255,.07) 49%,
            rgba(255,255,255,.02) 63%,
            transparent 100%
        );

    background-size:
        240% 100%;

    background-position:
        100% 0;

    transition:
        opacity .3s ease;
}


/* ============================================================
   EDGE GLOW
   ============================================================ */

#screen-billing
.p85-pro-card::after {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    pointer-events:
        none;

    width:
        280px;

    height:
        280px;

    top:
        -180px;

    right:
        -150px;

    border-radius:
        50%;

    background:
        rgba(
            var(--p86-blue),
            .14
        );

    filter:
        blur(70px);

    opacity:
        .45;

    transition:
        opacity .3s ease,
        transform .4s ease;
}


/* ============================================================
   CARD HOVER
   ============================================================ */

#screen-billing
.p85-pro-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(
            var(--p86-blue),
            .58
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.06),

        0 24px 65px
        rgba(0,0,0,.28),

        0 0 34px
        rgba(
            var(--p86-blue),
            .075
        );
}


#screen-billing
.p85-pro-card:hover::before {

    animation:
        p86-card-shine
        1.15s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


#screen-billing
.p85-pro-card:hover::after {

    opacity:
        .72;

    transform:
        translate(
            -18px,
            18px
        );
}


/* ============================================================
   MONTHLY — CLEAN BLUE
   ============================================================ */

#screen-billing
.p85-pro-monthly {

    background:

        radial-gradient(
            700px 380px
            at 0% 0%,
            rgba(
                var(--p86-blue),
                .11
            ),
            transparent 60%
        ),

        linear-gradient(
            155deg,
            #0a223a 0%,
            #071a2d 54%,
            #051525 100%
        );
}


/* ============================================================
   6 MONTHS — PREMIUM BLUE
   ============================================================ */

#screen-billing
.p85-pro-featured {

    border-color:
        rgba(
            var(--p86-blue),
            .65
        );

    background:

        radial-gradient(
            800px 440px
            at 10% 0%,
            rgba(
                var(--p86-cyan),
                .13
            ),
            transparent 58%
        ),

        radial-gradient(
            540px 320px
            at 100% 100%,
            rgba(
                var(--p86-blue),
                .10
            ),
            transparent 62%
        ),

        linear-gradient(
            155deg,
            #18496f 0%,
            #103652 33%,
            #09243c 66%,
            #06182a 100%
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 20px 55px
        rgba(0,0,0,.23),

        0 0 34px
        rgba(
            var(--p86-blue),
            .065
        );
}


#screen-billing
.p85-pro-featured::after {

    background:
        rgba(
            var(--p86-cyan),
            .18
        );

    opacity:
        .58;
}


/* ============================================================
   YEARLY — PREMIUM GOLD
   ============================================================ */

#screen-billing
.p85-pro-yearly {

    border-color:
        rgba(
            var(--p86-gold),
            .48
        );

    background:

        radial-gradient(
            800px 400px
            at 5% 0%,
            rgba(
                var(--p86-gold),
                .10
            ),
            transparent 57%
        ),

        radial-gradient(
            500px 300px
            at 100% 100%,
            rgba(
                var(--p86-gold),
                .055
            ),
            transparent 65%
        ),

        linear-gradient(
            155deg,
            #28261f 0%,
            #171e24 28%,
            #0b1c2b 62%,
            #061624 100%
        );
}


#screen-billing
.p85-pro-yearly::after {

    background:
        rgba(
            var(--p86-gold),
            .16
        );

    opacity:
        .48;
}


#screen-billing
.p85-pro-yearly:hover {

    border-color:
        rgba(
            var(--p86-gold),
            .72
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.055),

        0 24px 65px
        rgba(0,0,0,.28),

        0 0 34px
        rgba(
            var(--p86-gold),
            .075
        );
}


/* ============================================================
   LARGE PLAN TITLES
   ============================================================ */

#screen-billing
.p85-card-head h2 {

    margin-top:
        8px;

    font-size:
        29px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.035em;

    text-shadow:
        0 2px 18px
        rgba(0,0,0,.16);
}


/* ============================================================
   PRICE
   ============================================================ */

#screen-billing
.p85-price {

    margin-top:
        18px;
}


#screen-billing
.p85-price strong {

    font-size:
        42px;

    font-weight:
        950;

    letter-spacing:
        -.05em;

    text-shadow:
        0 5px 24px
        rgba(0,0,0,.22);
}


#screen-billing
.p85-price span {

    font-size:
        12px;

    font-weight:
        800;
}


/* ============================================================
   DESCRIPTION — BIGGER
   THIS IS WHAT YOU ASKED FOR
   ============================================================ */

#screen-billing
.p85-description {

    max-width:
        420px;

    margin-top:
        15px;

    color:
        #c9d9eb;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.48;

    letter-spacing:
        -.005em;
}


/* ============================================================
   EFFECTIVE PRICE / SAVING
   ============================================================ */

#screen-billing
.p85-equivalent {

    margin-top:
        8px;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.2;
}


#screen-billing
.p85-saving {

    color:
        #42e4ac;

    text-shadow:
        0 0 18px
        rgba(
            var(--p86-green),
            .14
        );
}


/* ============================================================
   FEATURE LIST — BETTER READABILITY
   ============================================================ */

#screen-billing
.p85-features {

    gap:
        11px;

    margin-top:
        18px;
}


#screen-billing
.p85-features li {

    padding-left:
        24px;

    color:
        #dfebf6;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.32;

    letter-spacing:
        -.006em;
}


/* ============================================================
   CHECKMARK
   ============================================================ */

#screen-billing
.p85-features li::before {

    top:
        -1px;

    font-size:
        15px;

    color:
        #37e3a6;

    text-shadow:
        0 0 14px
        rgba(
            var(--p86-green),
            .25
        );
}


/* ============================================================
   KICKER
   ============================================================ */

#screen-billing
.p85-card-head
.p84-kicker {

    font-size:
        11px;

    letter-spacing:
        .12em;
}


/* ============================================================
   RECOMMENDED / BEST VALUE BADGES
   ============================================================ */

#screen-billing
.p85-plan-badge {

    top:
        15px;

    right:
        15px;

    min-height:
        27px;

    padding:
        0 11px;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08);

    font-size:
        8.5px;
}


#screen-billing
.p85-pro-featured
.p85-plan-badge {

    color:
        #a7dcff;

    border-color:
        rgba(
            var(--p86-cyan),
            .48
        );

    background:
        rgba(
            var(--p86-blue),
            .14
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.08),

        0 0 20px
        rgba(
            var(--p86-blue),
            .08
        );
}


#screen-billing
.p85-best-value {

    color:
        #ffd36f;

    background:
        rgba(
            var(--p86-gold),
            .105
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.06),

        0 0 20px
        rgba(
            var(--p86-gold),
            .075
        );
}


/* ============================================================
   BUTTONS — PREMIUM
   ============================================================ */

#screen-billing
.p85-card-bottom
.p84-primary {

    position:
        relative;

    min-height:
        48px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        11px;

    font-size:
        12px;

    font-weight:
        850;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.15),

        0 7px 22px
        rgba(0,0,0,.12);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}


#screen-billing
.p85-card-bottom
.p84-primary:hover:not(:disabled) {

    transform:
        translateY(-1px);

    filter:
        brightness(1.06);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.18),

        0 10px 28px
        rgba(0,0,0,.19);
}


/* ============================================================
   ACTIVE BUTTON
   ============================================================ */

#screen-billing
.p85-card-bottom
.p84-active-button {

    color:
        #042319;

    background:

        linear-gradient(
            135deg,
            #42dfae,
            #27c897
        );

    border-color:
        rgba(
            var(--p86-green),
            .42
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.16),

        0 0 28px
        rgba(
            var(--p86-green),
            .08
        );
}


/* ============================================================
   CARD BOTTOM SEPARATION
   ============================================================ */

#screen-billing
.p85-card-bottom {

    position:
        relative;

    padding-top:
        14px;
}


#screen-billing
.p85-card-bottom::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(114,171,223,.20),
            transparent
        );
}


/* ============================================================
   HEADER / SWITCH ALSO SLIGHTLY MORE PREMIUM
   ============================================================ */

#screen-billing
.p84-switch {

    border-color:
        rgba(
            var(--p86-blue),
            .28
        );

    background:

        linear-gradient(
            180deg,
            rgba(9,31,53,.94),
            rgba(5,22,39,.94)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.03),

        0 7px 24px
        rgba(0,0,0,.13);
}


#screen-billing
.p84-switch button.active {

    background:

        linear-gradient(
            135deg,
            #1c507a,
            #123d61
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 4px 15px
        rgba(
            var(--p86-blue),
            .07
        );
}


/* ============================================================
   ACCOUNT BOX
   ============================================================ */

#screen-billing
.p84-account {

    border-color:
        rgba(
            var(--p86-blue),
            .30
        );

    background:

        radial-gradient(
            260px 120px
            at 0% 0%,
            rgba(
                var(--p86-blue),
                .07
            ),
            transparent 70%
        ),

        rgba(
            7,
            27,
            47,
            .88
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.035),

        0 8px 26px
        rgba(0,0,0,.11);
}


/* ============================================================
   ANIMATED FEATURED CARD
   VERY SLOW — EXPENSIVE, NOT FLASHY
   ============================================================ */

#screen-billing
.p85-pro-featured {

    animation:
        p86-featured-breathe
        7s ease-in-out
        infinite;
}


/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes p86-card-shine {

    0% {

        background-position:
            100% 0;

    }

    100% {

        background-position:
            -120% 0;

    }

}


@keyframes p86-featured-breathe {

    0%,
    100% {

        box-shadow:

            inset 0 1px 0
            rgba(255,255,255,.065),

            0 20px 55px
            rgba(0,0,0,.22),

            0 0 30px
            rgba(
                var(--p86-blue),
                .045
            );

    }


    50% {

        box-shadow:

            inset 0 1px 0
            rgba(255,255,255,.08),

            0 22px 60px
            rgba(0,0,0,.24),

            0 0 42px
            rgba(
                var(--p86-blue),
                .09
            );

    }

}


/* ============================================================
   KEEP EVERYTHING INSIDE 900PX SCREEN
   DESCRIPTION IS BIGGER,
   SO WE COMPACT UNUSED SPACING INSTEAD.
   ============================================================ */

@media
(
    min-width: 1200px
)
and
(
    max-height: 900px
) {

    #screen-billing
    .p85-pro-card {

        padding:
            17px 20px 13px;

    }


    #screen-billing
    .p85-card-head {

        min-height:
            175px;

    }


    #screen-billing
    .p85-card-head h2 {

        font-size:
            27px;

    }


    #screen-billing
    .p85-price {

        margin-top:
            13px;

    }


    #screen-billing
    .p85-price strong {

        font-size:
            38px;

    }


    #screen-billing
    .p85-description {

        margin-top:
            10px;

        font-size:
            12.5px;

        line-height:
            1.4;

    }


    #screen-billing
    .p85-features {

        gap:
            7px;

        margin-top:
            11px;

        margin-bottom:
            8px;

    }


    #screen-billing
    .p85-features li {

        font-size:
            11.5px;

        line-height:
            1.22;

    }


    #screen-billing
    .p85-card-bottom {

        padding-top:
            9px;

    }


    #screen-billing
    .p85-card-bottom
    .p84-primary {

        min-height:
            46px;

    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(
    prefers-reduced-motion:
    reduce
) {

    #screen-billing
    .p85-pro-card,

    #screen-billing
    .p85-pro-featured {

        animation:
            none !important;

        transition:
            none !important;

    }


    #screen-billing
    .p85-pro-card:hover {

        transform:
            none;

    }


    #screen-billing
    .p85-pro-card:hover::before {

        animation:
            none;

    }

}


/*
============================================================
NOYTRIX BILLING V87 SAFE SWITCH
============================================================
*/


#screen-billing
.p87-change-plan {

    width:
        100% !important;

    min-height:
        48px !important;

    margin:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        1px solid
        rgba(75, 173, 249, .48)
        !important;

    border-radius:
        11px !important;

    color:
        #ddecff !important;

    background:

        linear-gradient(
            135deg,
            rgba(24, 75, 115, .95),
            rgba(8, 37, 62, .98)
        )
        !important;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.05),

        0 8px 24px
        rgba(0,0,0,.12)
        !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;

    font-weight:
        850 !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        filter .2s ease
        !important;
}


#screen-billing
.p87-change-plan:hover:not(:disabled) {

    transform:
        translateY(-1px);

    border-color:
        rgba(89, 191, 255, .78)
        !important;

    filter:
        brightness(1.07);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 11px 30px
        rgba(0,0,0,.18),

        0 0 25px
        rgba(73,168,255,.07)
        !important;
}


#screen-billing
.p87-current-plan {

    width:
        100% !important;

    min-height:
        48px !important;

    color:
        #04251a !important;

    background:

        linear-gradient(
            135deg,
            #46e1af,
            #29ca9a
        )
        !important;

    border:
        1px solid
        rgba(49,220,160,.36)
        !important;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.16),

        0 0 25px
        rgba(49,220,160,.07)
        !important;
}



/*
============================================================
NOYTRIX BILLING V88
BIGGER TEXT INSIDE PRO + API CARDS
============================================================
*/


/* ============================================================
   PRO — MAIN DESCRIPTION
   ============================================================ */

#screen-billing
.p85-description {

    color:
        #d2dfed !important;

    font-size:
        14.5px !important;

    font-weight:
        620 !important;

    line-height:
        1.48 !important;

    letter-spacing:
        -.006em !important;
}


/* ============================================================
   PRO — FEATURE LIST
   ============================================================ */

#screen-billing
.p85-features {

    gap:
        9px !important;
}


#screen-billing
.p85-features li {

    color:
        #e3edf7 !important;

    font-size:
        13.2px !important;

    font-weight:
        680 !important;

    line-height:
        1.30 !important;

    padding-left:
        24px !important;
}


#screen-billing
.p85-features li::before {

    font-size:
        15px !important;

    top:
        0 !important;
}


/* ============================================================
   PRO — SMALL PRICE DESCRIPTION
   ============================================================ */

#screen-billing
.p85-equivalent {

    font-size:
        11.5px !important;

    line-height:
        1.25 !important;
}


/* ============================================================
   API — CARD DESCRIPTION
   ============================================================ */

#screen-billing
.p84-plan-head
.p84-description {

    color:
        #d2dfed !important;

    font-size:
        13.5px !important;

    font-weight:
        620 !important;

    line-height:
        1.42 !important;

    letter-spacing:
        -.006em !important;
}


/* ============================================================
   API — FEATURE LIST
   ============================================================ */

#screen-billing
.p84-features {

    gap:
        7px !important;
}


#screen-billing
.p84-features li {

    color:
        #e3edf7 !important;

    font-size:
        12.5px !important;

    font-weight:
        680 !important;

    line-height:
        1.28 !important;

    padding-left:
        22px !important;
}


#screen-billing
.p84-features li::before {

    font-size:
        14px !important;

    top:
        -1px !important;
}


/* ============================================================
   API — KEEP DESCRIPTION AREA CLEAN
   ============================================================ */

#screen-billing
.p84-plan-head {

    min-height:
        188px !important;
}


/* ============================================================
   DESKTOP 900PX HEIGHT
   BIGGER TEXT WITHOUT BREAKING ONE SCREEN
   ============================================================ */

@media
(
    min-width: 1200px
)
and
(
    max-height: 900px
) {

    /* --------------------------
       PRO
       -------------------------- */

    #screen-billing
    .p85-description {

        font-size:
            13.5px !important;

        line-height:
            1.40 !important;

        margin-top:
            9px !important;
    }


    #screen-billing
    .p85-features {

        gap:
            6px !important;

        margin-top:
            10px !important;

        margin-bottom:
            8px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            12.5px !important;

        line-height:
            1.22 !important;
    }


    #screen-billing
    .p85-card-head {

        min-height:
            170px !important;
    }


    /* --------------------------
       API
       -------------------------- */

    #screen-billing
    .p84-plan-head {

        min-height:
            164px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        margin-top:
            8px !important;

        font-size:
            13px !important;

        line-height:
            1.34 !important;
    }


    #screen-billing
    .p84-features {

        gap:
            5px !important;

        margin-top:
            8px !important;

        margin-bottom:
            8px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            12px !important;

        line-height:
            1.20 !important;
    }

}


/* ============================================================
   VERY LARGE DESKTOP
   ============================================================ */

@media
(
    min-width: 1700px
)
and
(
    min-height: 950px
) {

    #screen-billing
    .p85-description {

        font-size:
            15px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            13.5px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        font-size:
            14px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            13px !important;
    }

}


/*
============================================================
NOYTRIX BILLING V89
CARD TEXT 1.5X HARD OVERRIDE
============================================================
*/


/* ============================================================
   PRO DESCRIPTION
   ============================================================ */

#screen-billing
.p85-description {

    font-size:
        20px !important;

    line-height:
        1.30 !important;

    font-weight:
        650 !important;

    color:
        #dbe7f3 !important;

    letter-spacing:
        -.012em !important;

    margin-top:
        10px !important;
}


/* ============================================================
   PRO FEATURE TEXT
   ============================================================ */

#screen-billing
.p85-features {

    gap:
        7px !important;

    margin-top:
        10px !important;

    margin-bottom:
        8px !important;
}


#screen-billing
.p85-features li {

    font-size:
        18px !important;

    line-height:
        1.18 !important;

    font-weight:
        680 !important;

    color:
        #e6eff8 !important;

    padding-left:
        27px !important;

    letter-spacing:
        -.012em !important;
}


#screen-billing
.p85-features li::before {

    font-size:
        18px !important;

    line-height:
        1 !important;

    top:
        2px !important;
}


/* ============================================================
   PRO EFFECTIVE PRICE / SMALL DESCRIPTION
   ============================================================ */

#screen-billing
.p85-equivalent {

    font-size:
        15px !important;

    line-height:
        1.15 !important;

    font-weight:
        800 !important;

    margin-top:
        6px !important;
}


/* ============================================================
   API DESCRIPTION
   ============================================================ */

#screen-billing
.p84-plan-head
.p84-description {

    font-size:
        19px !important;

    line-height:
        1.27 !important;

    font-weight:
        650 !important;

    color:
        #dbe7f3 !important;

    letter-spacing:
        -.012em !important;

    margin-top:
        8px !important;
}


/* ============================================================
   API FEATURES
   ============================================================ */

#screen-billing
.p84-features {

    gap:
        6px !important;

    margin-top:
        8px !important;

    margin-bottom:
        8px !important;
}


#screen-billing
.p84-features li {

    font-size:
        18px !important;

    line-height:
        1.16 !important;

    font-weight:
        680 !important;

    color:
        #e6eff8 !important;

    padding-left:
        27px !important;

    letter-spacing:
        -.012em !important;
}


#screen-billing
.p84-features li::before {

    font-size:
        18px !important;

    top:
        1px !important;
}


/* ============================================================
   MAKE MORE ROOM INSIDE PRO CARDS
   ============================================================ */

#screen-billing
.p85-card-head {

    min-height:
        185px !important;
}


#screen-billing
.p85-pro-card {

    padding-top:
        16px !important;

    padding-bottom:
        12px !important;
}


#screen-billing
.p85-card-bottom {

    padding-top:
        7px !important;
}


#screen-billing
.p85-card-bottom
.p84-primary,

#screen-billing
.p85-card-bottom
.p84-secondary {

    min-height:
        43px !important;
}


/* ============================================================
   MAKE MORE ROOM INSIDE API CARDS
   ============================================================ */

#screen-billing
.p84-plan {

    padding-top:
        16px !important;

    padding-bottom:
        12px !important;
}


#screen-billing
.p84-plan-head {

    min-height:
        190px !important;
}


#screen-billing
.p84-plan-bottom {

    margin-top:
        auto !important;
}


/* ============================================================
   YOUR 1600x900 / 1680x900 CLASS SCREEN
   FORCE LARGE TEXT THERE TOO
   ============================================================ */

@media
(
    min-width: 1200px
)
and
(
    max-height: 920px
) {

    /* PRO */

    #screen-billing
    .p85-description {

        font-size:
            20px !important;

        line-height:
            1.27 !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            18px !important;

        line-height:
            1.14 !important;
    }


    #screen-billing
    .p85-features {

        gap:
            5px !important;

        margin-top:
            8px !important;
    }


    #screen-billing
    .p85-card-head {

        min-height:
            178px !important;
    }


    /* API */

    #screen-billing
    .p84-plan-head
    .p84-description {

        font-size:
            19px !important;

        line-height:
            1.23 !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            18px !important;

        line-height:
            1.13 !important;
    }


    #screen-billing
    .p84-features {

        gap:
            4px !important;

        margin-top:
            7px !important;
    }


    #screen-billing
    .p84-plan-head {

        min-height:
            184px !important;
    }

}


/* ============================================================
   WIDER DESKTOP
   ============================================================ */

@media
(
    min-width: 1700px
)
and
(
    min-height: 950px
) {

    #screen-billing
    .p85-description {

        font-size:
            21px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            19px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        font-size:
            20px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            19px !important;
    }

}


/*
============================================================
NOYTRIX BILLING V88
BIGGER TEXT INSIDE PRO + API CARDS
============================================================
*/


/* ============================================================
   PRO — MAIN DESCRIPTION
   ============================================================ */

#screen-billing
.p85-description {

    color:
        #d2dfed !important;

    font-size:
        14.5px !important;

    font-weight:
        620 !important;

    line-height:
        1.48 !important;

    letter-spacing:
        -.006em !important;
}


/* ============================================================
   PRO — FEATURE LIST
   ============================================================ */

#screen-billing
.p85-features {

    gap:
        9px !important;
}


#screen-billing
.p85-features li {

    color:
        #e3edf7 !important;

    font-size:
        13.2px !important;

    font-weight:
        680 !important;

    line-height:
        1.30 !important;

    padding-left:
        24px !important;
}


#screen-billing
.p85-features li::before {

    font-size:
        15px !important;

    top:
        0 !important;
}


/* ============================================================
   PRO — SMALL PRICE DESCRIPTION
   ============================================================ */

#screen-billing
.p85-equivalent {

    font-size:
        11.5px !important;

    line-height:
        1.25 !important;
}


/* ============================================================
   API — CARD DESCRIPTION
   ============================================================ */

#screen-billing
.p84-plan-head
.p84-description {

    color:
        #d2dfed !important;

    font-size:
        13.5px !important;

    font-weight:
        620 !important;

    line-height:
        1.42 !important;

    letter-spacing:
        -.006em !important;
}


/* ============================================================
   API — FEATURE LIST
   ============================================================ */

#screen-billing
.p84-features {

    gap:
        7px !important;
}


#screen-billing
.p84-features li {

    color:
        #e3edf7 !important;

    font-size:
        12.5px !important;

    font-weight:
        680 !important;

    line-height:
        1.28 !important;

    padding-left:
        22px !important;
}


#screen-billing
.p84-features li::before {

    font-size:
        14px !important;

    top:
        -1px !important;
}


/* ============================================================
   API — KEEP DESCRIPTION AREA CLEAN
   ============================================================ */

#screen-billing
.p84-plan-head {

    min-height:
        188px !important;
}


/* ============================================================
   DESKTOP 900PX HEIGHT
   BIGGER TEXT WITHOUT BREAKING ONE SCREEN
   ============================================================ */

@media
(
    min-width: 1200px
)
and
(
    max-height: 900px
) {

    /* --------------------------
       PRO
       -------------------------- */

    #screen-billing
    .p85-description {

        font-size:
            13.5px !important;

        line-height:
            1.40 !important;

        margin-top:
            9px !important;
    }


    #screen-billing
    .p85-features {

        gap:
            6px !important;

        margin-top:
            10px !important;

        margin-bottom:
            8px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            12.5px !important;

        line-height:
            1.22 !important;
    }


    #screen-billing
    .p85-card-head {

        min-height:
            170px !important;
    }


    /* --------------------------
       API
       -------------------------- */

    #screen-billing
    .p84-plan-head {

        min-height:
            164px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        margin-top:
            8px !important;

        font-size:
            13px !important;

        line-height:
            1.34 !important;
    }


    #screen-billing
    .p84-features {

        gap:
            5px !important;

        margin-top:
            8px !important;

        margin-bottom:
            8px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            12px !important;

        line-height:
            1.20 !important;
    }

}


/* ============================================================
   VERY LARGE DESKTOP
   ============================================================ */

@media
(
    min-width: 1700px
)
and
(
    min-height: 950px
) {

    #screen-billing
    .p85-description {

        font-size:
            15px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            13.5px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        font-size:
            14px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            13px !important;
    }

}


/* profile-v56.css */
/* ==========================================================
   NOYTRIX PROFILE V56
   ========================================================== */

.p56-hidden-nav {
  display: none !important;
}


/* ==========================================================
   PROFILE MODE
   ========================================================== */

body.p56-profile-open
.screen {
  display: none !important;
}

body.p56-profile-open
#screen-profile-v56 {
  display: block !important;
}

body.p56-profile-open
#screen-profile-v56
.p56-embedded-screen {
  display: block !important;
}


/* ==========================================================
   SIDEBAR PROFILE
   ========================================================== */

.p56-sidebar-profile {
  width: 100%;

  min-height: 76px;

  margin-top: 10px;

  padding: 10px 9px;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    18px;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(55, 132, 208, .38);

  border-radius: 10px;

  color: white;

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 58, .98),
      rgba(4, 19, 36, .98)
    );

  cursor: pointer;

  text-align: left;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .16);
}

.p56-sidebar-profile:hover,
.p56-sidebar-profile.active {
  border-color:
    rgba(65, 152, 239, .76);

  background:
    linear-gradient(
      145deg,
      rgba(11, 42, 77, .98),
      rgba(5, 25, 48, .98)
    );
}

.p56-sidebar-avatar {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border:
    2px solid
    #ffc125;

  border-radius: 50%;

  color: #fff;

  background:
    #061426;

  font-size: 11px;

  font-weight: 950;
}

.p56-sidebar-user {
  min-width: 0;
}

.p56-sidebar-user strong,
.p56-sidebar-user small,
.p56-sidebar-user b {
  display: block;
}

.p56-sidebar-user strong {
  overflow: hidden;

  color: #fff;

  font-size: 10px;

  font-weight: 900;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.p56-sidebar-user small {
  margin-top: 2px;

  overflow: hidden;

  color: #7d9aba;

  font-size: 7px;

  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.p56-sidebar-user b {
  width: max-content;

  margin-top: 5px;

  padding: 2px 7px;

  border-radius: 999px;

  color: #07121e;

  background:
    #ffc125;

  font-size: 6px;

  font-weight: 1000;
}

.p56-sidebar-chevron {
  color:
    #8aabc9;

  font-size:
    22px;
}


/* ==========================================================
   PROFILE SCREEN
   ========================================================== */

#screen-profile-v56 {
  display: none;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  padding: 0 !important;

  overflow: hidden !important;
}

.p56-root {
  --p56-bg: #041224;
  --p56-panel: #071b33;

  --p56-line:
    rgba(63, 128, 193, .28);

  --p56-line2:
    rgba(59, 148, 238, .58);

  --p56-text:
    #f6f8fd;

  --p56-muted:
    #809dbc;

  --p56-yellow:
    #ffba22;

  --p56-blue:
    #49a8ff;

  --p56-green:
    #39dda0;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  padding:
    17px 20px;

  display: grid;

  grid-template-rows:
    auto
    42px
    minmax(0, 1fr);

  gap: 10px;

  overflow: hidden;

  color:
    var(--p56-text);

  background:
    radial-gradient(
      circle at 9% 0%,
      rgba(36, 101, 191, .12),
      transparent 25%
    ),
    radial-gradient(
      circle at 88% 5%,
      rgba(255, 187, 34, .05),
      transparent 24%
    );
}

.p56-root *,
.p56-root *::before,
.p56-root *::after {
  box-sizing: border-box;
}


/* ==========================================================
   HEADER
   ========================================================== */

.p56-header {
  min-height: 70px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 20px;
}

.p56-kicker {
  display: block;

  color:
    var(--p56-yellow);

  font-size:
    8px !important;

  font-weight:
    950 !important;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}

.p56-header h1 {
  margin:
    2px 0 0;

  color: #fff;

  font-size:
    31px !important;

  line-height: 1;

  font-weight:
    950 !important;

  letter-spacing:
    -.045em;
}

.p56-header p {
  margin:
    5px 0 0;

  color:
    var(--p56-muted);

  font-size:
    9px !important;

  font-weight:
    720 !important;
}

.p56-header-user {
  min-width: 265px;

  padding: 8px 10px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 9px;

  border:
    1px solid
    var(--p56-line);

  border-radius:
    10px;

  background:
    rgba(6, 25, 46, .78);
}

.p56-header-avatar {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    2px solid
    var(--p56-yellow);

  border-radius:
    50%;

  color: #fff;

  font-size:
    10px;

  font-weight:
    950;
}

.p56-header-user div {
  min-width: 0;
}

.p56-header-user strong,
.p56-header-user span {
  display: block;
}

.p56-header-user strong {
  color: #fff;

  font-size:
    9px;

  font-weight:
    950;
}

.p56-header-user div span {
  margin-top:
    2px;

  overflow: hidden;

  color:
    var(--p56-muted);

  font-size:
    7px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ==========================================================
   TABS
   ========================================================== */

.p56-tabs {
  padding: 3px;

  display: flex;

  gap: 3px;

  border:
    1px solid
    var(--p56-line);

  border-radius:
    9px;

  background:
    rgba(4, 19, 37, .72);

  overflow-x: auto;

  scrollbar-width:
    none;
}

.p56-tabs::-webkit-scrollbar {
  display: none;
}

.p56-tabs button {
  min-width:
    128px;

  padding:
    0 12px;

  border: 0;

  border-radius:
    7px;

  color:
    #7d9bbb;

  background:
    transparent;

  cursor: pointer;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}

.p56-tabs button.active {
  color: #fff;

  background:
    linear-gradient(
      180deg,
      rgba(25, 66, 106, .95),
      rgba(11, 39, 70, .96)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(68, 151, 232, .22);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.p56-content {
  min-width: 0;
  min-height: 0;

  overflow: hidden;
}

.p56-panel {
  display: none;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow-y: auto;

  padding-right: 2px;

  scrollbar-width:
    thin;
}

.p56-panel.active {
  display: block;
}


/* ==========================================================
   CARDS
   ========================================================== */

.p56-card {
  position: relative;

  padding: 13px;

  border:
    1px solid
    var(--p56-line);

  border-radius:
    11px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 57, .95),
      rgba(5, 21, 40, .97)
    );

  box-shadow:
    0 13px 29px
    rgba(0, 0, 0, .15);
}

.p56-overview-top,
.p56-overview-main {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}

.p56-overview-main {
  margin-top:
    10px;
}


/* ==========================================================
   USER
   ========================================================== */

.p56-user-card {
  min-height:
    135px;

  display: flex;

  align-items: center;

  gap: 14px;
}

.p56-big-avatar {
  width: 78px;
  height: 78px;

  flex: 0 0 78px;

  display: grid;
  place-items: center;

  border:
    4px solid
    var(--p56-yellow);

  border-radius:
    50%;

  color:
    #fff;

  background:
    radial-gradient(
      circle at 35% 25%,
      #153a64,
      #061426 70%
    );

  font-size:
    24px;

  font-weight:
    950;
}

.p56-user-card h2,
.p56-plan-card h2 {
  margin:
    3px 0 2px;

  color:
    #fff;

  font-size:
    17px !important;

  font-weight:
    950 !important;
}

.p56-user-card p {
  margin:
    0 0 8px;

  color:
    #96aec7;

  font-size:
    8px !important;

  font-weight:
    750 !important;
}


/* ==========================================================
   STATUS
   ========================================================== */

.p56-green-status {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    #56e6aa;

  font-size:
    8px !important;

  font-weight:
    850 !important;
}

.p56-green-status i,
.p56-ok {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  display: inline-block;

  border-radius: 50%;

  background:
    var(--p56-green);

  box-shadow:
    0 0 9px
    rgba(57, 221, 160, .34);
}


/* ==========================================================
   PLAN
   ========================================================== */

.p56-plan-card {
  min-height:
    135px;

  display: grid;

  grid-template-columns:
    1fr auto;

  align-items: center;

  gap: 12px;
}

.p56-plan-right {
  min-width:
    180px;

  display: grid;

  gap: 9px;

  text-align: right;
}

.p56-plan-right > strong {
  color: #fff;

  font-size:
    17px !important;

  font-weight:
    950 !important;
}

.p56-plan-pill {
  width: max-content;

  min-height: 23px;

  padding:
    0 8px;

  display: inline-flex;

  align-items: center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255, 187, 34, .32);

  border-radius:
    999px;

  color:
    var(--p56-yellow);

  background:
    rgba(255, 187, 34, .07);

  font-size:
    7px !important;

  font-weight:
    950 !important;
}

.p56-plan-pill.active {
  color:
    #5aeab0;

  border-color:
    rgba(57, 221, 160, .30);

  background:
    rgba(57, 221, 160, .07);
}


/* ==========================================================
   BUTTON
   ========================================================== */

.p56-primary,
.p56-secondary {
  min-height:
    35px;

  padding:
    0 12px;

  border-radius:
    8px;

  cursor:
    pointer;

  font-size:
    8px !important;

  font-weight:
    950 !important;
}

.p56-primary {
  border:
    1px solid
    #ffd25b;

  color:
    #07111c;

  background:
    linear-gradient(
      135deg,
      #ffd35d,
      #ffae1d
    );
}

.p56-secondary {
  border:
    1px solid
    rgba(60, 149, 236, .40);

  color:
    #cfe3f7;

  background:
    rgba(6, 30, 55, .79);
}

.p56-secondary:hover {
  border-color:
    rgba(70, 165, 255, .72);
}

.p56-full {
  width:
    100%;
}


/* ==========================================================
   CARD CONTENT
   ========================================================== */

.p56-card-head {
  display: flex;

  align-items: flex-start;

  justify-content:
    space-between;

  gap: 10px;
}

.p56-card-head h3 {
  margin:
    3px 0 0;

  color: #fff;

  font-size:
    13px !important;

  font-weight:
    950 !important;
}

.p56-card-head p {
  margin:
    4px 0 10px;

  color:
    var(--p56-muted);

  font-size:
    8px !important;

  line-height:
    1.35;

  font-weight:
    720 !important;
}

.p56-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(63, 139, 215, .25);

  border-radius:
    9px;

  color:
    var(--p56-blue);

  background:
    rgba(32, 99, 166, .10);
}

.p56-icon svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   SECURITY LIST
   ========================================================== */

.p56-status-list {
  margin:
    5px 0 11px;

  display: grid;

  gap: 7px;
}

.p56-status-list > div {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    #a8bed4;

  font-size:
    8px;

  font-weight:
    780;
}


/* ==========================================================
   ECOSYSTEM
   ========================================================== */

.p56-ecosystem {
  margin-top:
    10px;
}

.p56-product-strip {
  margin:
    9px 0;

  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 7px;
}

.p56-product-strip > div {
  padding:
    7px;

  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr);

  grid-template-rows:
    auto auto;

  column-gap:
    7px;

  align-items: center;

  border:
    1px solid
    rgba(61, 128, 194, .16);

  border-radius:
    8px;

  background:
    rgba(4, 20, 39, .55);
}

.p56-product-strip
.p56-icon {
  width: 28px;
  height: 28px;

  grid-row:
    1 / 3;

  flex-basis:
    28px;
}

.p56-product-strip
.p56-icon svg {
  width: 14px;
  height: 14px;
}

.p56-product-strip strong {
  color: #dce9f6;

  font-size:
    8px;

  font-weight:
    900;
}

.p56-product-strip > div > span {
  color:
    #6684a4;

  font-size:
    6px;

  font-weight:
    800;
}

.p56-product-strip > div > span.active {
  color:
    #54e4a8;
}


/* ==========================================================
   SECURITY NOTE
   ========================================================== */

.p56-security-note {
  min-height:
    51px;

  margin-top:
    10px;

  padding:
    8px 11px;

  display: flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(61, 128, 194, .18);

  border-radius:
    9px;

  background:
    rgba(5, 23, 43, .67);
}

.p56-security-note
.p56-icon {
  width: 28px;
  height: 28px;

  flex-basis:
    28px;
}

.p56-security-note strong,
.p56-security-note span {
  display: block;
}

.p56-security-note strong {
  color:
    #dce8f4;

  font-size:
    8px;
}

.p56-security-note span {
  margin-top:
    2px;

  color:
    #708ba9;

  font-size:
    7px;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.p56-section-title {
  min-height:
    57px;
}

.p56-section-title h2 {
  margin:
    3px 0 0;

  color: #fff;

  font-size:
    18px !important;

  font-weight:
    950 !important;
}

.p56-section-title p {
  margin:
    4px 0 0;

  color:
    var(--p56-muted);

  font-size:
    8px !important;

  font-weight:
    720 !important;
}


/* ==========================================================
   SUBSCRIPTION
   ========================================================== */

.p56-subscription {
  max-width:
    900px;
}

.p56-sub-top {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;
}

.p56-sub-top h2 {
  margin:
    4px 0 6px;

  color: #fff;

  font-size:
    21px !important;

  font-weight:
    950 !important;
}

.p56-info-grid {
  margin:
    12px 0;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 7px;
}

.p56-info-grid > div {
  padding:
    10px;

  border:
    1px solid
    rgba(61, 128, 194, .16);

  border-radius:
    8px;

  background:
    rgba(4, 20, 39, .55);
}

.p56-info-grid span,
.p56-info-grid strong {
  display: block;
}

.p56-info-grid span {
  color:
    #6684a4;

  font-size:
    7px;

  font-weight:
    900;

  text-transform:
    uppercase;
}

.p56-info-grid strong {
  margin-top:
    3px;

  color:
    #d9e7f4;

  font-size:
    9px;

  font-weight:
    900;
}


/* ==========================================================
   THREE CARDS
   ========================================================== */

.p56-three {
  margin-bottom:
    10px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    10px;
}

.p56-small-card {
  min-height:
    145px;
}

.p56-small-card h3 {
  margin:
    9px 0 4px;

  color: white;

  font-size:
    12px !important;

  font-weight:
    950 !important;
}

.p56-small-card p {
  margin: 0;

  color:
    var(--p56-muted);

  font-size:
    8px !important;

  line-height:
    1.4;
}


/* ==========================================================
   SECURITY
   ========================================================== */

.p56-security-grid {
  margin-bottom:
    10px;

  display: grid;

  grid-template-columns:
    250px
    minmax(0, 1fr);

  gap:
    10px;
}

.p56-security-main {
  min-height:
    190px;

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}

.p56-security-main
.p56-icon {
  width: 62px;
  height: 62px;

  margin-bottom:
    9px;

  color:
    var(--p56-green);

  border-color:
    rgba(57, 221, 160, .24);

  background:
    rgba(57, 221, 160, .06);
}

.p56-security-main
.p56-icon svg {
  width:
    30px;

  height:
    30px;
}

.p56-security-main strong {
  color: #fff;

  font-size:
    14px;
}

.p56-security-main > span {
  margin-top:
    3px;

  color:
    var(--p56-muted);

  font-size:
    8px;
}

.p56-security-row {
  min-height:
    54px;

  display: flex;

  align-items:
    center;

  gap:
    8px;

  border-bottom:
    1px solid
    rgba(62, 128, 190, .13);
}

.p56-security-row strong,
.p56-security-row span {
  display: block;
}

.p56-security-row strong {
  color:
    #dce9f5;

  font-size:
    9px;
}

.p56-security-row div span {
  margin-top:
    2px;

  color:
    #708caa;

  font-size:
    7px;
}


/* ==========================================================
   CONNECTIONS
   ========================================================== */

.p56-connections {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    8px;
}

.p56-connection {
  min-height:
    76px;

  padding:
    10px;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    9px;

  border:
    1px solid
    var(--p56-line);

  border-radius:
    9px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 57, .92),
      rgba(5, 21, 40, .96)
    );
}

.p56-connection.current {
  border-color:
    rgba(57, 221, 160, .28);
}

.p56-connection strong,
.p56-connection span {
  display:
    block;
}

.p56-connection strong {
  color: #fff;

  font-size:
    9px;
}

.p56-connection span {
  margin-top:
    3px;

  color:
    #718eac;

  font-size:
    7px;
}

.p56-connection b {
  color:
    #55e6a9;

  font-size:
    7px;
}

.p56-connection button {
  min-height:
    29px;

  padding:
    0 9px;

  border:
    1px solid
    rgba(61, 145, 226, .34);

  border-radius:
    7px;

  color:
    #bdd8f0;

  background:
    rgba(5, 28, 52, .78);

  cursor: pointer;

  font-size:
    7px;

  font-weight:
    900;
}


/* ==========================================================
   EMBED REAL ACTIVITY + SETTINGS
   ========================================================== */

.p56-embed-panel {
  overflow: hidden;
}

.p56-embed-slot {
  width: 100%;

  height:
    calc(100% - 60px);

  min-width: 0;
  min-height: 0;

  overflow:
    auto;
}

#screen-profile-v56
.p56-embedded-screen {
  position:
    relative !important;

  inset:
    auto !important;

  top:
    auto !important;

  left:
    auto !important;

  right:
    auto !important;

  bottom:
    auto !important;

  display:
    block !important;

  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  overflow:
    auto !important;
}


/* Fix old Settings layout when embedded */

#screen-profile-v56
.p56-embedded-settings > * {
  max-width:
    100% !important;
}

#screen-profile-v56
.p56-embedded-settings {
  padding:
    0 !important;
}


/* Hide duplicate old screen-level page title areas where possible */

#screen-profile-v56
.p56-embedded-settings
.settings-page-title,

#screen-profile-v56
.p56-embedded-settings
.settings-hero,

#screen-profile-v56
.p56-embedded-activity
.activity-page-title {
  display:
    none !important;
}


/* ==========================================================
   EMPTY
   ========================================================== */

.p56-empty {
  min-height:
    180px;

  display: grid;

  place-items:
    center;

  border:
    1px dashed
    rgba(60, 137, 210, .28);

  border-radius:
    10px;

  color:
    #708dab;

  font-size:
    9px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1100px) {

  .p56-root {
    padding:
      14px;
  }

  .p56-product-strip {
    grid-template-columns:
      repeat(3, 1fr);
  }

}


@media(max-width:800px) {

  #screen-profile-v56 {
    overflow-y:
      auto !important;
  }

  .p56-root {
    height:
      auto;

    min-height:
      100%;

    overflow:
      visible;
  }

  .p56-content {
    overflow:
      visible;
  }

  .p56-panel {
    height:
      auto;

    overflow:
      visible;
  }

  .p56-overview-top,
  .p56-overview-main,
  .p56-three,
  .p56-security-grid,
  .p56-connections,
  .p56-info-grid {
    grid-template-columns:
      1fr;
  }

  .p56-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .p56-header-user {
    width:
      100%;
  }

  .p56-plan-card {
    grid-template-columns:
      1fr;
  }

  .p56-plan-right {
    text-align:
      left;
  }

  .p56-product-strip {
    grid-template-columns:
      1fr 1fr;
  }

  .p56-embed-slot {
    height:
      auto;

    min-height:
      600px;
  }

}


/* NOYTRIX PROFILE EXCLUSIVE SCREEN START */

@media (min-width: 821px) {

    /*
     * When Profile is open, no other workspace screen
     * may remain visible above or below it.
     */
    html.p56-profile-open
    .workspace
    > .screen:not(#screen-profile-v56) {
        display: none !important;
    }


    /*
     * Profile becomes the only visible workspace screen.
     */
    html.p56-profile-open
    #screen-profile-v56 {
        display: block !important;

        position: relative !important;
        inset: auto !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: calc(100vh - 16px) !important;
        max-height: none !important;

        margin: 0 !important;

        overflow: visible !important;
    }


    /*
     * Remove nested Profile scrolling.
     * Main workspace/page handles scrolling instead.
     */
    html.p56-profile-open
    #screen-profile-v56 .p56-root,
    html.p56-profile-open
    #screen-profile-v56 .p56-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }


    /*
     * Prevent the ugly inner vertical scrollbar.
     */
    html.p56-profile-open
    #screen-profile-v56 {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    html.p56-profile-open
    #screen-profile-v56::-webkit-scrollbar,
    html.p56-profile-open
    #screen-profile-v56 .p56-root::-webkit-scrollbar,
    html.p56-profile-open
    #screen-profile-v56 .p56-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /*
     * Profile starts cleanly at the top of workspace.
     */
    html.p56-profile-open
    #screen-profile-v56 .p56-root {
        margin-top: 0 !important;
    }

}

/* NOYTRIX PROFILE EXCLUSIVE SCREEN END */




/* profile-v57.css */
/* ==========================================================
   NOYTRIX PROFILE V57 ENHANCEMENT
   Loaded after profile-v56.css
   ========================================================== */

#screen-profile-v56.p57e-premium .p56-root {
  --v57-panel: #071b33;
  --v57-panel-2: #0a223f;
  --v57-line: rgba(72,142,211,.25);
  --v57-line-strong: rgba(74,159,242,.48);
  --v57-text: #f7f9fd;
  --v57-muted: #7f9dbc;
  --v57-gold: #ffbd2f;
  --v57-green: #39dda0;
  --v57-blue: #4aaaff;
  --v57-red: #ff6c76;

  padding: 18px 20px;
  gap: 11px;
  background:
    radial-gradient(circle at 12% 0%, rgba(38,106,200,.13), transparent 28%),
    radial-gradient(circle at 92% 5%, rgba(255,189,47,.055), transparent 25%),
    linear-gradient(180deg, rgba(4,17,33,.98), rgba(2,13,25,.99));
}

/* HEADER */
#screen-profile-v56.p57e-premium .p56-header {
  min-height: 74px;
}

#screen-profile-v56.p57e-premium .p56-header h1 {
  font-size: 34px !important;
  letter-spacing: -.05em;
}

#screen-profile-v56.p57e-premium .p56-header > div:first-child > p {
  max-width: 720px;
  color: var(--v57-muted);
}

#screen-profile-v56.p57e-premium .p56-header-user {
  min-width: 300px;
  padding: 9px 11px;
  border-radius: 12px;
  border-color: var(--v57-line);
  background: linear-gradient(145deg, rgba(9,31,57,.92), rgba(5,22,41,.97));
  box-shadow: 0 15px 34px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.02);
}

/* TABS */
#screen-profile-v56.p57e-premium .p56-tabs {
  min-height: 44px;
  display: grid;
  grid-template-columns: repeat(8, minmax(105px, 1fr));
  gap: 3px;
  border-radius: 11px;
  border-color: var(--v57-line);
  background: rgba(4,19,37,.74);
}

#screen-profile-v56.p57e-premium .p56-tabs button {
  min-width: 0;
  min-height: 36px;
  border-radius: 8px;
  color: #7897b8;
  font-size: 8px !important;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

#screen-profile-v56.p57e-premium .p56-tabs button:hover {
  color: #d9e7f5;
  transform: translateY(-1px);
}

#screen-profile-v56.p57e-premium .p56-tabs button.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(28,72,114,.98), rgba(12,43,77,.96));
  box-shadow: inset 0 0 0 1px rgba(82,163,244,.23), 0 8px 18px rgba(0,0,0,.14);
}

/* EXISTING V56 CARDS — OVERVIEW + SUBSCRIPTION */
#screen-profile-v56.p57e-premium .p56-card,
#screen-profile-v56.p57e-premium .p56-connection {
  border-radius: 13px;
  border-color: var(--v57-line);
  background: linear-gradient(145deg, rgba(9,32,59,.96), rgba(5,21,40,.98));
  box-shadow: 0 16px 34px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.02);
}

#screen-profile-v56.p57e-premium .p56-overview-top,
#screen-profile-v56.p57e-premium .p56-overview-main {
  gap: 11px;
}

#screen-profile-v56.p57e-premium .p56-user-card,
#screen-profile-v56.p57e-premium .p56-plan-card {
  min-height: 148px;
}

#screen-profile-v56.p57e-premium .p56-big-avatar {
  width: 86px;
  height: 86px;
  flex-basis: 86px;
  border-color: var(--v57-gold);
  background: radial-gradient(circle at 35% 30%, #1a477a, #061525 72%);
  box-shadow: 0 0 28px rgba(255,189,47,.10);
}

#screen-profile-v56.p57e-premium .p56-user-card h2,
#screen-profile-v56.p57e-premium .p56-plan-card h2 {
  font-size: 19px !important;
}

#screen-profile-v56.p57e-premium .p56-plan-right > strong {
  font-size: 20px !important;
}

#screen-profile-v56.p57e-premium .p56-product-strip {
  gap: 8px;
}

#screen-profile-v56.p57e-premium .p56-product-strip > div {
  border-radius: 9px;
  border-color: rgba(70,142,211,.18);
  background: rgba(4,20,39,.58);
}

#screen-profile-v56.p57e-premium .p56-security-note {
  border-radius: 10px;
  border-color: rgba(70,142,211,.20);
}

/* SUBSCRIPTION — REMOVE EMPTY FEEL */
#screen-profile-v56.p57e-premium [data-p56-panel="subscription"] .p56-subscription {
  max-width: none;
  min-height: 330px;
  padding: 18px;
}

#screen-profile-v56.p57e-premium [data-p56-panel="subscription"] .p56-info-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 9px;
}

#screen-profile-v56.p57e-premium [data-p56-panel="subscription"] .p56-info-grid > div {
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(70,142,211,.16);
  background: rgba(4,20,39,.58);
}

#screen-profile-v56.p57e-premium [data-p56-panel="subscription"] .p56-primary {
  min-height: 42px;
  margin-top: 6px;
}

/* ACTIVITY EMBED */
#screen-profile-v56.p57e-premium [data-p56-panel="activity"] {
  overflow: hidden;
}

#screen-profile-v56.p57e-premium #p56ActivitySlot {
  border: 1px solid rgba(70,142,211,.15);
  border-radius: 12px;
  background: rgba(4,18,35,.45);
}

#screen-profile-v56.p57e-premium #p56ActivitySlot .p56-embedded-activity {
  background: transparent !important;
}

/* V57 GENERIC */
#screen-profile-v56 .p57e-section-head {
  min-height: 64px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#screen-profile-v56 .p57e-section-head > div > span,
#screen-profile-v56 .p57e-setting > span {
  display: block;
  color: var(--v57-gold);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#screen-profile-v56 .p57e-section-head h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 21px;
  font-weight: 1000;
  letter-spacing: -.025em;
}

#screen-profile-v56 .p57e-section-head p {
  margin: 4px 0 0;
  color: var(--v57-muted);
  font-size: 8px;
  font-weight: 720;
}

#screen-profile-v56 .p57e-card {
  position: relative;
  padding: 14px;
  border: 1px solid var(--v57-line);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(9,32,59,.96), rgba(5,21,40,.98));
  box-shadow: 0 16px 34px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.02);
}

#screen-profile-v56 .p57e-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(68,146,222,.25);
  border-radius: 10px;
  color: var(--v57-blue);
  background: rgba(35,105,175,.10);
}

#screen-profile-v56 .p57e-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#screen-profile-v56 .p57e-primary,
#screen-profile-v56 .p57e-secondary,
#screen-profile-v56 .p57e-danger {
  min-height: 37px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 950;
  transition: transform .15s ease, border-color .15s ease;
}

#screen-profile-v56 .p57e-primary:hover,
#screen-profile-v56 .p57e-secondary:hover,
#screen-profile-v56 .p57e-danger:hover {
  transform: translateY(-1px);
}

#screen-profile-v56 .p57e-primary {
  border: 1px solid rgba(255,204,89,.96);
  color: #07121d;
  background: linear-gradient(135deg, #ffd666, #ffad1b);
  box-shadow: 0 10px 24px rgba(255,178,27,.11);
}

#screen-profile-v56 .p57e-secondary {
  border: 1px solid rgba(67,151,234,.40);
  color: #d7e8f8;
  background: linear-gradient(180deg, rgba(14,47,80,.84), rgba(6,28,52,.88));
}

#screen-profile-v56 .p57e-danger {
  border: 1px solid rgba(255,108,118,.42);
  color: #ff9ca4;
  background: rgba(255,108,118,.07);
}

#screen-profile-v56 .p57e-primary .p57e-icon,
#screen-profile-v56 .p57e-secondary .p57e-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  border: 0;
  background: transparent;
}

#screen-profile-v56 .p57e-primary .p57e-icon svg,
#screen-profile-v56 .p57e-secondary .p57e-icon svg {
  width: 14px;
  height: 14px;
}

/* NOTIFICATIONS */
#screen-profile-v56 .p57e-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

#screen-profile-v56 .p57e-toggle-card,
#screen-profile-v56 .p57e-browser {
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#screen-profile-v56 .p57e-browser {
  margin-top: 10px;
  min-height: 92px;
}

#screen-profile-v56 .p57e-toggle-card > div,
#screen-profile-v56 .p57e-browser > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#screen-profile-v56 .p57e-toggle-card strong,
#screen-profile-v56 .p57e-toggle-card small,
#screen-profile-v56 .p57e-browser strong,
#screen-profile-v56 .p57e-browser small {
  display: block;
}

#screen-profile-v56 .p57e-toggle-card strong,
#screen-profile-v56 .p57e-browser strong {
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}

#screen-profile-v56 .p57e-toggle-card small,
#screen-profile-v56 .p57e-browser small {
  margin-top: 3px;
  color: var(--v57-muted);
  font-size: 7px;
  line-height: 1.35;
}

#screen-profile-v56 .p57e-switch {
  position: relative;
  width: 43px;
  height: 24px;
  flex: 0 0 43px;
  border: 1px solid rgba(94,128,164,.35);
  border-radius: 999px;
  background: #0a2039;
  cursor: pointer;
}

#screen-profile-v56 .p57e-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #9bb0c5;
  transition: transform .15s ease, background .15s ease;
}

#screen-profile-v56 .p57e-switch.on {
  border-color: rgba(57,221,160,.44);
  background: rgba(57,221,160,.17);
}

#screen-profile-v56 .p57e-switch.on::after {
  transform: translateX(19px);
  background: var(--v57-green);
  box-shadow: 0 0 10px rgba(57,221,160,.35);
}

/* SECURITY */
#screen-profile-v56 .p57e-security-layout {
  display: grid;
  grid-template-columns: 290px minmax(0,1fr);
  gap: 10px;
}

#screen-profile-v56 .p57e-security-hero {
  min-height: 245px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#screen-profile-v56 .p57e-security-hero .p57e-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 12px;
  color: var(--v57-green);
  border-color: rgba(57,221,160,.26);
  background: rgba(57,221,160,.07);
}

#screen-profile-v56 .p57e-security-hero .p57e-icon svg {
  width: 34px;
  height: 34px;
}

#screen-profile-v56 .p57e-security-hero strong {
  color: #fff;
  font-size: 17px;
  font-weight: 1000;
}

#screen-profile-v56 .p57e-security-hero small {
  margin-top: 4px;
  color: var(--v57-muted);
  font-size: 8px;
}

#screen-profile-v56 .p57e-security-list {
  padding-top: 4px;
  padding-bottom: 4px;
}

#screen-profile-v56 .p57e-security-list > div {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(68,132,194,.13);
}

#screen-profile-v56 .p57e-security-list > div:last-child { border-bottom: 0; }

#screen-profile-v56 .p57e-security-list i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--v57-green);
  box-shadow: 0 0 10px rgba(57,221,160,.34);
}

#screen-profile-v56 .p57e-security-list i.bad {
  background: var(--v57-red);
  box-shadow: 0 0 10px rgba(255,108,118,.28);
}

#screen-profile-v56 .p57e-security-list strong,
#screen-profile-v56 .p57e-security-list small { display: block; }

#screen-profile-v56 .p57e-security-list strong { color: #dce9f6; font-size: 10px; font-weight: 950; }
#screen-profile-v56 .p57e-security-list small { margin-top: 3px; color: var(--v57-muted); font-size: 7px; }

#screen-profile-v56 .p57e-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

/* CONNECTIONS */
#screen-profile-v56 .p57e-connections {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 9px;
}

#screen-profile-v56 .p57e-connection {
  min-height: 94px;
  padding: 11px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--v57-line);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(9,31,57,.94), rgba(5,21,40,.97));
}

#screen-profile-v56 .p57e-connection.current { border-color: rgba(57,221,160,.28); }
#screen-profile-v56 .p57e-connection strong, #screen-profile-v56 .p57e-connection small { display: block; }
#screen-profile-v56 .p57e-connection strong { color: #fff; font-size: 10px; font-weight: 950; }
#screen-profile-v56 .p57e-connection small { margin-top: 3px; color: var(--v57-muted); font-size: 7px; }
#screen-profile-v56 .p57e-connection b { color: #7c9abb; font-size: 7px; font-weight: 950; }
#screen-profile-v56 .p57e-connection b.good, #screen-profile-v56 .p57e-connection.current b { color: var(--v57-green); }
#screen-profile-v56 .p57e-connection b.muted { color: #607d9b; }

#screen-profile-v56 .p57e-connection button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid rgba(68,151,232,.35);
  border-radius: 8px;
  color: #c9def1;
  background: rgba(5,29,54,.82);
  cursor: pointer;
  font-size: 7px;
  font-weight: 950;
}

#screen-profile-v56 [data-p56-panel="connections"] > .p57e-secondary { margin-top: 10px; }

/* SETTINGS */
#screen-profile-v56 .p57e-settings-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

#screen-profile-v56 .p57e-setting h3 {
  margin: 5px 0 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

#screen-profile-v56 .p57e-setting h3.sub { margin-top: 13px; }
#screen-profile-v56 .p57e-setting.wide { grid-column: 1 / -1; }

#screen-profile-v56 .p57e-setting select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(68,145,219,.28);
  border-radius: 9px;
  color: #e4eef7;
  background: #071b33;
  outline: none;
  font-size: 9px;
  font-weight: 850;
}

#screen-profile-v56 .p57e-segment {
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3px;
  border: 1px solid rgba(68,134,199,.18);
  border-radius: 9px;
  background: rgba(4,20,39,.55);
}

#screen-profile-v56 .p57e-segment.two { grid-template-columns: repeat(2,1fr); }

#screen-profile-v56 .p57e-segment button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  color: #7796b6;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
  font-weight: 900;
}

#screen-profile-v56 .p57e-segment button.active {
  color: #101923;
  background: linear-gradient(135deg, #ffd666, #ffb225);
}

#screen-profile-v56 .p57e-setting-row {
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(66,130,191,.12);
}

#screen-profile-v56 .p57e-setting-row:last-child { border-bottom: 0; }
#screen-profile-v56 .p57e-setting-row strong, #screen-profile-v56 .p57e-setting-row small { display: block; }
#screen-profile-v56 .p57e-setting-row strong { color: #dce9f6; font-size: 9px; font-weight: 900; }
#screen-profile-v56 .p57e-setting-row small { margin-top: 3px; color: var(--v57-muted); font-size: 7px; }

#screen-profile-v56 .p57e-settings-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* DATA */
#screen-profile-v56 .p57e-data-layout {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(290px,.65fr);
  gap: 10px;
}

#screen-profile-v56 .p57e-info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
}

#screen-profile-v56 .p57e-info-grid > div {
  padding: 11px;
  border: 1px solid rgba(67,131,194,.16);
  border-radius: 9px;
  background: rgba(4,20,39,.55);
}

#screen-profile-v56 .p57e-info-grid span, #screen-profile-v56 .p57e-info-grid strong { display: block; }
#screen-profile-v56 .p57e-info-grid span { color: #6685a5; font-size: 7px; font-weight: 950; text-transform: uppercase; }
#screen-profile-v56 .p57e-info-grid strong { margin-top: 4px; color: #dce9f6; font-size: 9px; font-weight: 900; }

#screen-profile-v56 .p57e-data-actions {
  display: grid;
  align-content: start;
  gap: 8px;
}

/* TOAST */
.p57e-toast-region {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999999;
  display: grid;
  gap: 8px;
}

.p57e-toast {
  max-width: 360px;
  padding: 10px 13px;
  border: 1px solid rgba(75,151,224,.42);
  border-radius: 10px;
  color: #e7f2fc;
  background: rgba(5,24,45,.97);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  transform: translateY(6px);
  opacity: 0;
  transition: .18s ease;
  font-size: 9px;
  font-weight: 850;
}

.p57e-toast.show { transform: translateY(0); opacity: 1; }
.p57e-toast.good { border-color: rgba(57,221,160,.38); }
.p57e-toast.error { border-color: rgba(255,108,118,.44); color: #ffb0b6; }

@media(max-width:1200px) {
  #screen-profile-v56.p57e-premium .p56-tabs { grid-template-columns: repeat(8,120px); }
  #screen-profile-v56.p57e-premium [data-p56-panel="subscription"] .p56-info-grid { grid-template-columns: repeat(2,1fr); }
}

@media(max-width:900px) {
  #screen-profile-v56 .p57e-toggle-grid,
  #screen-profile-v56 .p57e-security-layout,
  #screen-profile-v56 .p57e-connections,
  #screen-profile-v56 .p57e-settings-grid,
  #screen-profile-v56 .p57e-data-layout { grid-template-columns: 1fr; }

  #screen-profile-v56 .p57e-setting.wide { grid-column: auto; }
  #screen-profile-v56 .p57e-connection { grid-template-columns: 36px minmax(0,1fr) auto; }
  #screen-profile-v56 .p57e-connection b { display: none; }
}

/* SIDEBAR PROFILE CARD POLISH */
#p56SidebarProfile {
  min-height: 80px !important;
  padding: 10px !important;
  border-radius: 12px !important;
  border-color: rgba(68,151,232,.42) !important;
  background: linear-gradient(145deg, rgba(9,36,66,.98), rgba(4,20,38,.99)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#p56SidebarProfile:hover,
#p56SidebarProfile.active {
  border-color: rgba(78,170,255,.78) !important;
  transform: translateY(-1px);
}

#p56SidebarProfile .p56-sidebar-avatar {
  width: 42px !important;
  height: 42px !important;
  border-color: #ffbd2f !important;
  background: radial-gradient(circle at 35% 30%, #173e6c, #061525 72%) !important;
}

/* PROFILE USER CARD FIX START */


/* ==========================================================
   PROFILE TOP-RIGHT USER CARD
   ========================================================== */

#screen-profile-v56
.p56-header-user {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;

    min-height: 66px !important;
    height: 66px !important;

    margin: 0 !important;
    padding: 8px 11px !important;

    display: grid !important;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        46px !important;

    grid-template-rows:
        1fr !important;

    align-items: center !important;
    justify-items: stretch !important;

    column-gap: 10px !important;

    border:
        1px solid
        rgba(54, 132, 207, .38) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            145deg,
            rgba(7, 29, 54, .98),
            rgba(5, 22, 41, .98)
        ) !important;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .16) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   AVATAR
   ========================================================== */

#screen-profile-v56
.p56-header-user
.p56-header-avatar {
    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    align-self: center !important;
    justify-self: center !important;

    border:
        2px solid
        #ffbd24 !important;

    border-radius:
        50% !important;

    color:
        #ffffff !important;

    background:
        radial-gradient(
            circle at 35% 25%,
            #12345a,
            #061426 72%
        ) !important;

    font-size:
        10px !important;

    font-weight:
        950 !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    text-align:
        center !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;
}


/* ==========================================================
   NAME + EMAIL
   ========================================================== */

#screen-profile-v56
.p56-header-user > div {
    min-width: 0 !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 3px !important;

    overflow: hidden !important;
}


#screen-profile-v56
.p56-header-user
[data-p56-name] {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    color:
        #f7f9fc !important;

    font-size:
        10px !important;

    font-weight:
        950 !important;

    line-height:
        1.2 !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}


#screen-profile-v56
.p56-header-user
[data-p56-email] {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    color:
        #7698bc !important;

    font-size:
        7px !important;

    font-weight:
        750 !important;

    line-height:
        1.2 !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   PRO BADGE
   ========================================================== */

#screen-profile-v56
.p56-header-user
.p56-plan-pill {
    width: 42px !important;
    min-width: 42px !important;

    height: 25px !important;
    min-height: 25px !important;

    margin: 0 !important;
    padding: 0 7px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;
    justify-self: end !important;

    border:
        1px solid
        rgba(255, 190, 35, .46) !important;

    border-radius:
        999px !important;

    color:
        #ffc128 !important;

    background:
        rgba(255, 190, 35, .07) !important;

    font-size:
        7px !important;

    font-weight:
        950 !important;

    line-height:
        1 !important;

    text-align:
        center !important;

    box-sizing:
        border-box !important;
}


/* ==========================================================
   KEEP CARD CLEAN INSIDE HEADER
   ========================================================== */

#screen-profile-v56
.p56-header {
    align-items: center !important;
}


#screen-profile-v56
.p56-header-user * {
    box-sizing: border-box !important;
}


/* PROFILE USER CARD FIX END */



/* top-account-fix.css */
/* ==========================================================
   NOYTRIX TOP ACCOUNT FIX
   ONLY TOP LANGUAGE + ACCOUNT AREA
   ========================================================== */


/* Keep header exactly where it belongs */

.workspace-header {
  overflow:
    visible !important;
}


.workspace-header
.header-actions {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    10px !important;

  flex-wrap:
    nowrap !important;
}


/* Language stays untouched visually */

.workspace-header
.language-switcher {
  flex:
    0 0 auto !important;
}


/* Account button */

#headerAccountButton {
  flex:
    0 0 auto !important;

  min-width:
    110px !important;

  height:
    48px !important;

  margin:
    0 !important;

  padding:
    0 18px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px !important;

  white-space:
    nowrap !important;

  box-sizing:
    border-box !important;
}


/* Logged-in version */

#headerAccountButton.top-account-user {
  min-width:
    120px !important;

  padding:
    5px 14px 5px 6px !important;

  justify-content:
    flex-start !important;

  border-color:
    rgba(
      255,
      190,
      37,
      .52
    ) !important;

  background:
    linear-gradient(
      145deg,
      rgba(
        8,
        31,
        58,
        .98
      ),
      rgba(
        5,
        22,
        42,
        .98
      )
    ) !important;

  cursor:
    pointer !important;
}


#headerAccountButton.top-account-user:hover {
  border-color:
    rgba(
      255,
      190,
      37,
      .90
    ) !important;

  background:
    linear-gradient(
      145deg,
      rgba(
        12,
        43,
        78,
        .98
      ),
      rgba(
        6,
        28,
        51,
        .98
      )
    ) !important;
}


.top-account-avatar {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  border:
    2px solid
    #ffbd24;

  border-radius:
    50%;

  color:
    #fff;

  background:
    #061529;

  font-size:
    8px;

  font-weight:
    950;
}


.top-account-label {
  color:
    #f5f8fc;

  font-size:
    9px;

  font-weight:
    900;
}


/* PROFILE: keep EN + account visible.
   Do not hide or move anything else. */

body.p56-profile-open
.workspace-header {
  display:
    flex !important;

  visibility:
    visible !important;

  opacity:
    1 !important;
}


body.p56-profile-open
.workspace-header
.header-actions {
  margin-left:
    auto !important;
}


/* Prevent top controls from overflowing right */

body.p56-profile-open
.workspace-header {
  padding-right:
    14px !important;
}


body.p56-profile-open
#headerAccountButton {
  max-width:
    150px !important;
}


/* check-scroll-only.css */
/* ==========================================================
   NOYTRIX CHECK INTERNAL SCROLL
   Desktop only.
   The application itself remains one viewport.
   ========================================================== */

@media (min-width: 821px) {

  /*
   * readability-v21.css overrides the intended
   * .screen.active { overflow:auto } behaviour.
   *
   * Restore scrolling ONLY for Check.
   */

  #screen-check.active {
    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: contain;

    scrollbar-gutter: stable;

    min-height: 0 !important;
  }


  /*
   * Result/conversation uses exactly the same scroll container.
   */

  #screen-check.active.conversation-mode {
    overflow-x: hidden !important;
    overflow-y: auto !important;

    min-height: 0 !important;

    padding-bottom: 24px !important;
  }


  /*
   * Do not let inner Check containers create
   * another clipped viewport.
   */

  #screen-check.active
  .check-grid,

  #screen-check.active
  .security-session {
    max-height: none !important;

    overflow: visible !important;
  }


  /*
   * Existing composer remains sticky inside Check.
   * We are NOT changing its size or position.
   */

  #screen-check.active.conversation-mode
  .chat-composer {
    position: sticky !important;

    bottom: 18px !important;

    z-index: 20 !important;
  }

}


/* account-profile-polish.css */

/* ==========================================================
   NOYTRIX PROFILE — CLEAN DESKTOP ONE SCREEN
   ========================================================== */

@media (min-width: 1200px) {

    /*
     * Profile already has language/settings inside it.
     * Remove duplicate top workspace language/account controls.
     */

    html.p56-profile-open
    .workspace-header,
    body.account-profile-open
    .workspace-header {

        display: none !important;

    }


    /*
     * No page scroll while Profile is open.
     */

    html.p56-profile-open,
    html.p56-profile-open body,
    body.account-profile-open {

        height: 100% !important;

        overflow: hidden !important;

    }


    html.p56-profile-open
    .workspace,
    body.account-profile-open
    .workspace {

        width: 100% !important;
        max-width: none !important;

        height: 100vh !important;

        margin: 0 !important;

        padding:
            12px
            18px
            12px
            18px
            !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;

    }


    /*
     * Profile occupies the whole available workspace.
     */

    html.p56-profile-open
    #screen-profile-v56,
    body.account-profile-open
    #screen-profile-v56 {

        width: 100% !important;
        max-width: none !important;

        height:
            calc(100vh - 24px)
            !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

    }


    #screen-profile-v56
    .p56-root {

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: 100% !important;

        display: grid !important;

        grid-template-rows:
            auto
            auto
            minmax(0, 1fr)
            !important;

        gap: 10px !important;

        overflow: hidden !important;

        box-sizing:
            border-box !important;

    }


    /*
     * Compact header.
     */

    #screen-profile-v56
    .p56-header {

        min-height: 0 !important;

        margin: 0 !important;

        padding:
            14px
            18px
            !important;

    }


    #screen-profile-v56
    .p56-header h1 {

        margin-top: 2px !important;
        margin-bottom: 3px !important;

        line-height: 1 !important;

    }


    #screen-profile-v56
    .p56-header > div:first-child > p {

        margin:
            4px
            0
            0
            !important;

    }


    /*
     * Tabs stay on one clean row.
     */

    #screen-profile-v56
    .p56-tabs {

        width: 100% !important;

        min-height: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;

        overflow: hidden !important;

        scrollbar-width:
            none !important;

    }


    #screen-profile-v56
    .p56-tabs::-webkit-scrollbar {

        display: none !important;

    }


    #screen-profile-v56
    .p56-tabs button {

        min-height: 40px !important;

        padding-top: 7px !important;
        padding-bottom: 7px !important;

    }


    /*
     * Main content uses all remaining height.
     * Absolutely no nested scrollbar.
     */

    #screen-profile-v56
    .p56-content {

        width: 100% !important;

        height: 100% !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        padding-bottom: 0 !important;

        overflow: hidden !important;

        scrollbar-width:
            none !important;

    }


    #screen-profile-v56
    .p56-content::-webkit-scrollbar {

        display: none !important;

    }


    #screen-profile-v56
    .p56-panel {

        min-height: 0 !important;
        max-height: 100% !important;

        overflow: hidden !important;

    }


    /*
     * Overview cards:
     * tighter vertical rhythm so all three rows fit.
     */

    #screen-profile-v56
    .p56-overview-top,
    #screen-profile-v56
    .p56-overview-main {

        min-height: 0 !important;

        gap: 10px !important;

    }


    #screen-profile-v56
    .p56-user-card,
    #screen-profile-v56
    .p56-plan-card,
    #screen-profile-v56
    .p56-card,
    #screen-profile-v56
    .p56-security-note {

        min-height: 0 !important;

        padding:
            14px
            !important;

    }


    #screen-profile-v56
    .p56-product-strip {

        margin-top:
            10px !important;

        min-height: 0 !important;

    }


    /*
     * V57 panels also fit without their own scroll.
     */

    #screen-profile-v56
    .p57e-settings-grid,
    #screen-profile-v56
    .p57e-toggle-grid,
    #screen-profile-v56
    .p57e-security-layout,
    #screen-profile-v56
    .p57e-connections,
    #screen-profile-v56
    .p57e-data-layout {

        gap: 10px !important;

        min-height: 0 !important;

    }


    #screen-profile-v56
    .p57e-card {

        padding:
            12px
            !important;

    }


    #screen-profile-v56
    .p57e-section-head {

        margin-bottom:
            10px !important;

    }


    /*
     * Kill every Profile-only scrollbar.
     */

    #screen-profile-v56,
    #screen-profile-v56
    .p56-root,
    #screen-profile-v56
    .p56-content,
    #screen-profile-v56
    .p56-panel {

        scrollbar-width:
            none !important;

        -ms-overflow-style:
            none !important;

    }


    #screen-profile-v56::-webkit-scrollbar,
    #screen-profile-v56
    .p56-root::-webkit-scrollbar,
    #screen-profile-v56
    .p56-content::-webkit-scrollbar,
    #screen-profile-v56
    .p56-panel::-webkit-scrollbar {

        display: none !important;

        width: 0 !important;
        height: 0 !important;

    }

}


/*
 * Slightly tighter on normal laptop-height screens.
 */

@media (
    min-width: 1200px
) and (
    max-height: 920px
) {

    #screen-profile-v56
    .p56-header {

        padding:
            10px
            14px
            !important;

    }


    #screen-profile-v56
    .p56-user-card,
    #screen-profile-v56
    .p56-plan-card,
    #screen-profile-v56
    .p56-card,
    #screen-profile-v56
    .p56-security-note,
    #screen-profile-v56
    .p57e-card {

        padding:
            10px
            12px
            !important;

    }


    #screen-profile-v56
    .p56-root {

        gap:
            8px !important;

    }


    #screen-profile-v56
    .p56-overview-top,
    #screen-profile-v56
    .p56-overview-main,
    #screen-profile-v56
    .p57e-settings-grid,
    #screen-profile-v56
    .p57e-toggle-grid,
    #screen-profile-v56
    .p57e-security-layout,
    #screen-profile-v56
    .p57e-connections {

        gap:
            8px !important;

    }

}



/* nx-profile-tabs-hard-v2.css */
/*
 * NOYTRIX PROFILE — HARD TAB CONTENT V2
 *
 * Desktop only.
 * Does NOT affect mobile.
 */

@media (min-width: 1200px) {

  body.p56-profile-open
  #screen-profile-v56
  .p56-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
  }


  body.p56-profile-open
  #screen-profile-v56
  [data-p56-panel] {
    width: 100% !important;
    max-width: none !important;
  }


  body.p56-profile-open
  #screen-profile-v56
  [data-p56-panel].active {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    inset: auto !important;

    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }


  /*
   * Embedded old Activity/Settings screens
   * are allowed to render inside Profile.
   */

  body.p56-profile-open
  #screen-profile-v56
  [data-p56-panel].active
  .screen {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;

    width: 100% !important;
    height: auto !important;

    pointer-events: auto !important;
  }


  body.p56-profile-open
  #screen-profile-v56
  #p56ActivitySlot,

  body.p56-profile-open
  #screen-profile-v56
  #p56SettingsSlot {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    height: auto !important;
    min-height: 1px !important;
  }
}


/* nx-tracking-page-final-v2.css */
/*
 * NOYTRIX TRACKING
 * FINAL FULL PAGE DESKTOP V2
 *
 * Exact selectors from tracking-page-v14.js /
 * tracking-data-v14.js.
 *
 * Desktop only.
 * Mobile untouched.
 */

@media (min-width: 1200px) {

    /* ========================================================
       1. WORKSPACE — TRACKING USES ALL AVAILABLE SPACE
       ======================================================== */

    .workspace:has(> #screen-tracking.active),
    .workspace:has(#screen-tracking.active) {
        width: 100% !important;
        max-width: none !important;

        height: 100vh !important;
        min-height: 100vh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    #screen-tracking {
        width: 100% !important;
        max-width: none !important;

        height: 100vh !important;
        min-height: 0 !important;
        max-height: 100vh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       2. REMOVE THE HUGE OUTER CARD
       Tracking becomes a real PAGE.
       ======================================================== */

    #screen-tracking .tracking-v14 {
        width: 100% !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        background:
            radial-gradient(
                circle at 50% -12%,
                rgba(31, 92, 157, .10),
                transparent 39%
            ),
            linear-gradient(
                180deg,
                #061326,
                #041020
            ) !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       3. HEADER
       Small page margins instead of giant outer gap.
       ======================================================== */

    #screen-tracking .tracking-v14-head {
        flex: 0 0 auto !important;

        width: 100% !important;

        padding:
            18px
            20px
            12px
            !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    #screen-tracking .tracking-v14-head > div {
        min-width: 0 !important;
    }


    #screen-tracking .tracking-v14-eyebrow {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }


    #screen-tracking .tracking-v14-head h2 {
        font-size: 34px !important;
        line-height: 1.05 !important;
    }


    #screen-tracking .tracking-v14-subtitle {
        max-width: 920px !important;

        font-size: 15px !important;
        line-height: 1.45 !important;
    }


    #screen-tracking .tracking-v14-add {
        min-width: 170px !important;
        min-height: 48px !important;

        font-size: 14px !important;
    }


    /* ========================================================
       4. STATS
       ======================================================== */

    #screen-tracking .tracking-v14-stats {
        flex: 0 0 auto !important;

        width: 100% !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr))
            !important;

        gap: 10px !important;

        padding:
            0
            20px
            12px
            !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    #screen-tracking .tracking-v14-stats article {
        min-width: 0 !important;
        min-height: 78px !important;

        padding:
            12px
            14px
            !important;
    }


    #screen-tracking .tracking-v14-stats article small {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }


    #screen-tracking .tracking-v14-stats article strong {
        font-size: 25px !important;
        line-height: 1 !important;
    }


    #screen-tracking .tracking-v14-stats article em {
        font-size: 12px !important;
        line-height: 1.15 !important;
    }


    /* ========================================================
       5. ALERT
       ======================================================== */

    #screen-tracking .tracking-v14-alert {
        flex: 0 0 auto !important;

        margin:
            0
            20px
            10px
            !important;
    }


    #screen-tracking .tracking-v14-alert[hidden] {
        display: none !important;
    }


    /* ========================================================
       6. TOOLBAR
       ======================================================== */

    #screen-tracking .tracking-v14-toolbar {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;

        grid-template-columns:
            minmax(220px, 1fr)
            minmax(150px, 190px)
            minmax(150px, 190px)
            46px
            !important;

        gap: 9px !important;

        padding:
            0
            20px
            10px
            !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    #screen-tracking .tracking-v14-search,
    #screen-tracking .tracking-v14-toolbar select,
    #screen-tracking .tracking-v14-refresh {
        min-width: 0 !important;
        min-height: 43px !important;
    }


    #screen-tracking .tracking-v14-search input,
    #screen-tracking .tracking-v14-toolbar select {
        font-size: 14px !important;
    }


    /* ========================================================
       7. MAIN BODY
       Use EVERY remaining vertical pixel.
       ======================================================== */

    #screen-tracking .tracking-v14-body {
        flex:
            1
            1
            0
            !important;

        width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 260px)
            !important;

        gap: 10px !important;

        padding:
            0
            20px
            10px
            !important;

        margin: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       8. TABLE CONTAINER
       ABSOLUTELY NO HORIZONTAL SCROLL.
       ======================================================== */

    #screen-tracking .tracking-v14-table {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        height: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        overflow-x: clip !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;

        box-sizing: border-box !important;
    }


    #screen-tracking
    .tracking-v14-table::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }


    /* ========================================================
       9. ONE EXACT COLUMN GEOMETRY
       Header and EVERY dynamically created object row.
       ======================================================== */

    #screen-tracking .tracking-v14-table-head,

    #screen-tracking
    #trackingRowsV14
    > .tracking-v14-row {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 2.45fr)
            minmax(0, 1.32fr)
            minmax(0, .88fr)
            minmax(0, .92fr)
            minmax(88px, .70fr)
            !important;

        column-gap: 12px !important;

        align-items: center !important;

        box-sizing: border-box !important;
    }


    #screen-tracking .tracking-v14-table-head {
        flex:
            0
            0
            46px
            !important;

        min-height: 46px !important;

        padding:
            0
            14px
            !important;

        font-size: 13.5px !important;
        line-height: 1.2 !important;

        overflow: hidden !important;
    }


    /* ========================================================
       10. ROWS
       ======================================================== */

    #screen-tracking .tracking-v14-rows {
        flex:
            1
            1
            auto
            !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        scrollbar-width: none !important;

        overscroll-behavior:
            contain
            !important;
    }


    #screen-tracking
    .tracking-v14-rows::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;

        display: none !important;
    }


    #screen-tracking
    #trackingRowsV14
    > .tracking-v14-row {

        min-height: 76px !important;

        padding:
            9px
            14px
            !important;

        overflow: visible !important;
    }


    #screen-tracking
    #trackingRowsV14
    > .tracking-v14-row
    > * {

        min-width: 0 !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       11. OBJECT COLUMN
       Long URL / wallet / contract can NEVER grow the table.
       ======================================================== */

    #screen-tracking .tracking-object-cell-v14 {
        width: 100% !important;
        min-width: 0 !important;

        gap: 12px !important;
    }


    #screen-tracking
    .tracking-object-cell-v14
    > div {

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        overflow: hidden !important;
    }


    #screen-tracking
    .tracking-object-cell-v14
    strong {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;

        font-size: 15px !important;
        line-height: 1.25 !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;
    }


    #screen-tracking
    .tracking-object-cell-v14
    small {

        display: -webkit-box !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-top: 4px !important;

        overflow: hidden !important;

        color: #8292a9 !important;

        font-size: 13px !important;
        line-height: 1.25 !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
        word-break: break-word !important;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        text-overflow: clip !important;
    }


    #screen-tracking
    .tracking-object-icon-v14 {

        width: 38px !important;
        height: 38px !important;

        flex:
            0
            0
            38px
            !important;
    }


    /* ========================================================
       12. RISK
       ======================================================== */

    #screen-tracking .tracking-risk-v14 {
        width: fit-content !important;
        max-width: 100% !important;

        min-width: 0 !important;

        display: inline-flex !important;
        flex-wrap: wrap !important;

        gap: 5px !important;

        padding:
            6px
            8px
            !important;

        white-space: normal !important;
    }


    #screen-tracking
    .tracking-risk-v14
    strong {

        font-size: 14px !important;
        line-height: 1.15 !important;
    }


    #screen-tracking
    .tracking-risk-v14
    small {

        font-size: 12px !important;
        line-height: 1.15 !important;

        white-space: normal !important;
    }


    /* ========================================================
       13. CHANGE
       ======================================================== */

    #screen-tracking .tracking-delta-v14 {
        min-width: 0 !important;

        padding-left: 0 !important;

        white-space: normal !important;
    }


    #screen-tracking
    .tracking-delta-v14
    strong {

        font-size: 14px !important;
        line-height: 1.15 !important;
    }


    #screen-tracking
    .tracking-delta-v14
    small {

        font-size: 12px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
    }


    /* ========================================================
       14. LAST CHECK
       ======================================================== */

    #screen-tracking .tracking-last-v14 {
        min-width: 0 !important;

        font-size: 13px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
    }


    /* ========================================================
       15. ACTIONS
       Always inside the final column.
       ======================================================== */

    #screen-tracking
    .tracking-row-actions-v14 {

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        justify-content: flex-end !important;

        gap: 4px !important;

        white-space: nowrap !important;
    }


    #screen-tracking
    .tracking-row-actions-v14
    .open {

        min-height: 34px !important;

        padding:
            0
            8px
            !important;

        font-size: 12px !important;
    }


    #screen-tracking
    .tracking-more-v14
    .more {

        width: 27px !important;
        height: 34px !important;

        font-size: 20px !important;
    }


    #screen-tracking
    .tracking-context-v14 {

        width: 165px !important;
    }


    #screen-tracking
    .tracking-context-v14
    button {

        font-size: 13px !important;
    }


    /* ========================================================
       16. LATEST CHANGES
       ======================================================== */

    #screen-tracking .tracking-v14-changes {
        width: 100% !important;
        max-width: none !important;

        min-width: 0 !important;
        min-height: 0 !important;

        height: 100% !important;

        padding:
            15px
            14px
            !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        scrollbar-width: none !important;

        box-sizing: border-box !important;
    }


    #screen-tracking
    .tracking-v14-changes::-webkit-scrollbar {

        display: none !important;

        width: 0 !important;
        height: 0 !important;
    }


    #screen-tracking
    .tracking-v14-changes
    h3 {

        font-size: 16px !important;
    }


    #screen-tracking
    .tracking-change-item-v14
    strong {

        font-size: 14px !important;
    }


    #screen-tracking
    .tracking-change-item-v14
    p {

        font-size: 13px !important;
        line-height: 1.3 !important;
    }


    #screen-tracking
    .tracking-change-item-v14
    small {

        font-size: 12px !important;
    }


    #screen-tracking
    .tracking-change-empty-v14 {

        font-size: 14px !important;
    }


    /* ========================================================
       17. BOTTOM BAR
       Part of PAGE, not separate floating card.
       ======================================================== */

    #screen-tracking .tracking-v14-footer {
        flex:
            0
            0
            auto
            !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 66px !important;
        max-height: none !important;

        margin: 0 !important;

        padding:
            9px
            20px
            10px
            !important;

        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;

        border-radius: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* Notification V15 replaces the old footer content */

    #screen-tracking
    .tracking-notify-v15 {

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
        min-height: 54px !important;
        max-height: none !important;

        display: grid !important;

        grid-template-columns:
            minmax(220px, 1fr)
            auto
            auto
            auto
            !important;

        align-items: center !important;

        gap: 10px !important;

        padding: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    #screen-tracking
    .tracking-notify-info-v15 {

        min-width: 0 !important;
        max-width: none !important;
    }


    #screen-tracking
    .tracking-notify-info-v15
    strong {

        font-size: 14px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
    }


    #screen-tracking
    .tracking-notify-info-v15
    small {

        font-size: 12px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
    }


    #screen-tracking
    .tracking-notify-controls-v15 {

        min-width: 0 !important;

        gap: 6px !important;
    }


    #screen-tracking
    .tracking-channel-v15 {

        min-width: 86px !important;
        height: 36px !important;

        padding:
            0
            9px
            !important;

        font-size: 13px !important;
    }


    #screen-tracking
    .tracking-frequency-v15 {

        min-width: 145px !important;
        height: 36px !important;
    }


    #screen-tracking
    .tracking-frequency-v15
    > span {

        font-size: 12px !important;
    }


    #screen-tracking
    #trackingFrequencyV15 {

        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;

        font-size: 13px !important;
    }


    #screen-tracking
    .tracking-notify-state-v15 {

        min-width: 0 !important;
    }


    #screen-tracking
    #trackingNotifyStatusV15 {

        width: auto !important;

        min-width: 0 !important;
        max-width: 180px !important;

        margin:
            0
            !important;

        padding:
            0
            8px
            !important;

        font-size: 12px !important;

        white-space: normal !important;
        text-align: center !important;

        overflow: hidden !important;
    }


    /* ========================================================
       18. ABSOLUTE HORIZONTAL OVERFLOW KILL
       ======================================================== */

    #screen-tracking,
    #screen-tracking .tracking-v14,
    #screen-tracking .tracking-v14-body,
    #screen-tracking .tracking-v14-table,
    #screen-tracking .tracking-v14-rows {

        overflow-x: hidden !important;
    }


    #screen-tracking
    .tracking-v14-table-head,

    #screen-tracking
    #trackingRowsV14
    > .tracking-v14-row {

        min-width: 0 !important;
        max-width: 100% !important;
    }

}


/* ==========================================================
   NOYTRIX TRACKING — FINAL 0.5CM PAGE INSET
   Desktop only.
   ========================================================== */

@media (min-width: 1200px) {

    #screen-tracking .tracking-v14 {

        width:
            calc(100% - 1cm)
            !important;

        height:
            calc(100% - 1cm)
            !important;

        margin:
            0.5cm
            !important;

        border-radius:
            10px
            !important;

        overflow:
            hidden
            !important;

        box-sizing:
            border-box
            !important;
    }

}



/* ==========================================================
   NOYTRIX TRACKING BOTTOM INFO ALIGN V1
   Desktop only.
   ========================================================== */

@media (min-width: 1200px) {

    #screen-tracking
    .tracking-notify-info-v15 {

        margin-left:
            12px
            !important;
    }

}



/* ==========================================================
   NOYTRIX TRACKING — DARK FILTER DROPDOWNS
   ========================================================== */

#screen-tracking
.tracking-v14-toolbar
select {

  color-scheme:
    dark
    !important;

  background-color:
    #071a34
    !important;

  color:
    #f3f7ff
    !important;

  border-color:
    rgba(83, 119, 169, .42)
    !important;

  -webkit-appearance:
    auto;

  appearance:
    auto;
}


/* dropdown items */

#screen-tracking
.tracking-v14-toolbar
select option {

  background:
    #071a34
    !important;

  background-color:
    #071a34
    !important;

  color:
    #f3f7ff
    !important;

  font-weight:
    600
    !important;
}


/* selected / checked item */

#screen-tracking
.tracking-v14-toolbar
select option:checked {

  background:
    #123967
    !important;

  background-color:
    #123967
    !important;

  color:
    #ffffff
    !important;
}


/* hover/focus on closed select */

#screen-tracking
.tracking-v14-toolbar
select:hover,
#screen-tracking
.tracking-v14-toolbar
select:focus {

  background-color:
    #091f3c
    !important;

  border-color:
    rgba(255, 183, 32, .48)
    !important;

  color:
    #ffffff
    !important;

  outline:
    none
    !important;
}



/* nx-track-guest-native-v4.css */
/*
 * NOYTRIX TRACKING GUEST — NATIVE V4
 *
 * IMPORTANT:
 * No injected DOM.
 * No overlay.
 * No MutationObserver.
 * No timer.
 *
 * Styles ONLY the original guest state generated by
 * tracking-data-v14.js:
 *
 *   #trackingRowsV14
 *     > .tracking-login-required-v14
 */

@media (min-width: 1200px) {

  /* ========================================================
     ROWS AREA — ONLY WHEN ORIGINAL GUEST BLOCK EXISTS
     ======================================================== */

  #screen-tracking
  #trackingRowsV14:has(> .tracking-login-required-v14) {

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding:
      26px
      !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     ORIGINAL GUEST BLOCK BECOMES THE CARD
     ======================================================== */

  #screen-tracking
  #trackingRowsV14
  > .tracking-login-required-v14 {

    position: relative !important;

    inset: auto !important;

    float: none !important;

    width:
      min(
        460px,
        calc(100% - 48px)
      )
      !important;

    max-width: 460px !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;

    gap: 0 !important;

    margin:
      0
      !important;

    padding:
      34px
      38px
      30px
      !important;

    border:
      1px solid
      rgba(255, 183, 32, .30)
      !important;

    border-radius:
      18px
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(12, 29, 52, .98),
        rgba(5, 17, 34, .98)
      )
      !important;

    box-shadow:
      0 24px 70px
      rgba(0, 0, 0, .24)
      !important;

    text-align:
      center
      !important;

    transform:
      translateY(-3%)
      !important;

    overflow:
      visible
      !important;

    box-sizing:
      border-box
      !important;
  }


  /* ========================================================
     KILL INHERITED TABLE GRID RULES
     ======================================================== */

  #screen-tracking
  #trackingRowsV14
  > .tracking-login-required-v14
  > * {

    position: relative !important;

    inset: auto !important;

    grid-column: auto !important;
    grid-row: auto !important;

    justify-self: auto !important;
    align-self: auto !important;

    float: none !important;

    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     ICON
     ======================================================== */

  #screen-tracking
  .tracking-login-required-v14
  > span {

    width: 60px !important;
    height: 60px !important;

    flex:
      0
      0
      60px
      !important;

    display: grid !important;

    place-items: center !important;

    margin:
      0
      0
      19px
      !important;

    padding: 0 !important;

    border:
      1px solid
      rgba(255, 183, 32, .52)
      !important;

    border-radius:
      17px
      !important;

    color:
      #ffb720
      !important;

    background:
      rgba(255, 183, 32, .08)
      !important;

    box-shadow:
      0 0 28px
      rgba(255, 183, 32, .06)
      !important;

    font-size:
      25px
      !important;

    line-height:
      1
      !important;
  }


  /* ========================================================
     TITLE
     ======================================================== */

  #screen-tracking
  .tracking-login-required-v14
  > strong {

    display: block !important;

    width: 100% !important;

    margin:
      0
      !important;

    padding:
      0
      !important;

    color:
      #f7f9ff
      !important;

    font-size:
      24px
      !important;

    font-weight:
      780
      !important;

    line-height:
      1.15
      !important;

    letter-spacing:
      -.025em
      !important;

    white-space:
      normal
      !important;

    text-align:
      center
      !important;
  }


  /* ========================================================
     DESCRIPTION
     ======================================================== */

  #screen-tracking
  .tracking-login-required-v14
  > p {

    display: block !important;

    width: 100% !important;
    max-width: 370px !important;

    margin:
      13px
      0
      0
      !important;

    padding:
      0
      !important;

    color:
      #9cafcf
      !important;

    font-size:
      14px
      !important;

    font-weight:
      520
      !important;

    line-height:
      1.55
      !important;

    white-space:
      normal
      !important;

    overflow:
      visible
      !important;

    text-overflow:
      clip
      !important;

    text-align:
      center
      !important;
  }


  /* ========================================================
     SIGN IN BUTTON
     ======================================================== */

  #screen-tracking
  #trackingLoginV14 {

    position: relative !important;

    width:
      auto
      !important;

    min-width:
      160px
      !important;

    max-width:
      220px
      !important;

    height:
      44px
      !important;

    min-height:
      44px
      !important;

    display:
      inline-flex
      !important;

    align-items:
      center
      !important;

    justify-content:
      center
      !important;

    margin:
      23px
      0
      0
      !important;

    padding:
      0
      28px
      !important;

    border:
      1px solid
      #ffb720
      !important;

    border-radius:
      11px
      !important;

    color:
      #081322
      !important;

    background:
      linear-gradient(
        135deg,
        #ffd05a,
        #ffb720
      )
      !important;

    box-shadow:
      0 8px 26px
      rgba(255, 183, 32, .12)
      !important;

    font-size:
      14px
      !important;

    font-weight:
      780
      !important;

    line-height:
      1
      !important;

    white-space:
      nowrap
      !important;

    cursor:
      pointer
      !important;

    transform:
      none
      !important;
  }


  #screen-tracking
  #trackingLoginV14:hover {

    filter:
      brightness(1.04)
      !important;

    transform:
      translateY(-1px)
      !important;
  }

}


/* ==========================================================
   MOBILE — STILL USE NATIVE GUEST BLOCK, JUST CENTER IT
   ========================================================== */

@media (max-width: 1199px) {

  #screen-tracking
  #trackingRowsV14:has(> .tracking-login-required-v14) {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding:
      20px
      !important;
  }


  #screen-tracking
  #trackingRowsV14
  > .tracking-login-required-v14 {

    width:
      min(
        420px,
        100%
      )
      !important;

    margin:
      auto
      !important;
  }

}

/* REMOVE WEIRD YELLOW TOP ELEMENT IN TRACKING GUEST CARD */
#screen-tracking
#trackingRowsV14
> .tracking-login-required-v14
> span:first-child {
  display: none !important;
}

#screen-tracking
#trackingRowsV14
> .tracking-login-required-v14
> :first-child:not(strong):not(p):not(button):not(#trackingLoginV14) {
  display: none !important;
}

#screen-tracking
#trackingRowsV14
> .tracking-login-required-v14 {
  padding-top: 30px !important;
}

#screen-tracking
#trackingRowsV14
> .tracking-login-required-v14
> strong {
  margin-top: 0 !important;
}


/* tracking-push-v16.css */
/*
 * NOYTRIX REAL WEB PUSH V16
 */

#screen-tracking
[data-notify-channel="push"]
[data-nx-push-connected="1"] {
  opacity: 1;
}


#screen-tracking
[data-notify-channel="push"][data-nx-push-connected="1"] {
  border-color:
    rgba(
      255,
      183,
      32,
      .62
    )
    !important;

  color:
    #f5f8ff
    !important;

  background:
    rgba(
      255,
      183,
      32,
      .08
    )
    !important;
}


#screen-tracking
[data-notify-channel="push"][data-nx-push-connected="1"]
> i {

  background:
    #ffb720
    !important;

  box-shadow:
    0 0 9px
    rgba(
      255,
      183,
      32,
      .55
    )
    !important;
}


#screen-tracking
[data-notify-channel="push"][data-nx-push-busy="1"] {
  opacity:
    .65
    !important;

  pointer-events:
    none
    !important;
}


/* tracking-email-v17.css */
/*
 * NOYTRIX EMAIL ALERTS V17
 */


#screen-tracking
[data-notify-channel="email"][data-nx-email-connected="1"] {

  border-color:
    rgba(
      52,
      211,
      153,
      .45
    )
    !important;

  color:
    #eafff7
    !important;

  background:
    rgba(
      52,
      211,
      153,
      .07
    )
    !important;
}


.nx-email-modal-v17 {

  position:
    fixed;

  inset:
    0;

  z-index:
    999999;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;
}


.nx-email-backdrop-v17 {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      1,
      7,
      16,
      .74
    );

  backdrop-filter:
    blur(7px);
}


.nx-email-card-v17 {

  position:
    relative;

  z-index:
    1;

  width:
    min(
      460px,
      100%
    );

  padding:
    30px;

  border:
    1px solid
    #1b3a61;

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      #0a1d34,
      #061326
    );

  box-shadow:
    0 28px 90px
    rgba(
      0,
      0,
      0,
      .42
    );

  color:
    #f7f9ff;

  box-sizing:
    border-box;
}


.nx-email-close-v17 {

  position:
    absolute;

  top:
    13px;

  right:
    15px;

  width:
    34px;

  height:
    34px;

  border:
    0;

  background:
    transparent;

  color:
    #8296b5;

  font-size:
    26px;

  cursor:
    pointer;
}


.nx-email-icon-v17 {

  width:
    50px;

  height:
    50px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    17px;

  border:
    1px solid
    rgba(
      255,
      183,
      32,
      .45
    );

  border-radius:
    14px;

  color:
    #ffb720;

  background:
    rgba(
      255,
      183,
      32,
      .07
    );

  font-size:
    22px;
}


.nx-email-kicker-v17 {

  color:
    #ffb720;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .09em;
}


.nx-email-card-v17
h3 {

  margin:
    7px
    0
    8px;

  font-size:
    25px;

  line-height:
    1.15;
}


.nx-email-text-v17 {

  margin:
    0
    0
    23px;

  color:
    #9eb1ce;

  font-size:
    14px;

  line-height:
    1.5;
}


.nx-email-label-v17 {

  display:
    block;

  margin-bottom:
    8px;

  color:
    #afbed5;

  font-size:
    12px;

  font-weight:
    700;
}


.nx-email-input-v17,
.nx-email-code-v17 {

  width:
    100%;

  height:
    46px;

  padding:
    0
    14px;

  border:
    1px solid
    #25486f;

  border-radius:
    10px;

  outline:
    none;

  color:
    #ffffff;

  background:
    #07172b;

  font:
    inherit;

  box-sizing:
    border-box;
}


.nx-email-code-v17 {

  text-align:
    center;

  font-size:
    23px;

  font-weight:
    800;

  letter-spacing:
    .18em;
}


.nx-email-input-v17:focus,
.nx-email-code-v17:focus {

  border-color:
    #ffb720;

  box-shadow:
    0 0 0 3px
    rgba(
      255,
      183,
      32,
      .08
    );
}


.nx-email-primary-v17,
.nx-email-secondary-v17,
.nx-email-danger-v17 {

  width:
    100%;

  min-height:
    44px;

  margin-top:
    12px;

  padding:
    0
    16px;

  border-radius:
    10px;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    750;

  cursor:
    pointer;
}


.nx-email-primary-v17 {

  border:
    1px solid
    #ffb720;

  color:
    #071221;

  background:
    linear-gradient(
      135deg,
      #ffd05a,
      #ffb720
    );
}


.nx-email-secondary-v17 {

  border:
    1px solid
    #24486f;

  color:
    #d9e5f7;

  background:
    #0a1b30;
}


.nx-email-danger-v17 {

  border:
    1px solid
    rgba(
      255,
      78,
      98,
      .4
    );

  color:
    #ff7a89;

  background:
    rgba(
      255,
      78,
      98,
      .05
    );
}


.nx-email-message-v17 {

  min-height:
    18px;

  margin-top:
    15px;

  color:
    #7f95b5;

  font-size:
    12px;

  line-height:
    1.4;
}


.nx-email-message-v17.error {

  color:
    #ff7282;
}


.nx-email-message-v17.success {

  color:
    #34d399;
}


.nx-email-message-v17.working {

  color:
    #ffbf32;
}


.nx-email-connected-v17 {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    13px
    14px;

  border:
    1px solid
    rgba(
      52,
      211,
      153,
      .27
    );

  border-radius:
    10px;

  color:
    #dffdf2;

  background:
    rgba(
      52,
      211,
      153,
      .05
    );

  overflow:
    hidden;
}


.nx-email-connected-v17
span {

  color:
    #34d399;

  font-weight:
    900;
}


.nx-email-connected-v17
strong {

  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* tracking-telegram-v18.css */
/*
 * NOYTRIX TELEGRAM ALERTS V18
 */


#screen-tracking
[data-notify-channel="telegram"]
[data-nx-telegram-connected="1"] {
  opacity: 1;
}


#screen-tracking
[data-notify-channel="telegram"][data-nx-telegram-connected="1"] {

  border-color:
    rgba(
      255,
      183,
      32,
      .55
    )
    !important;

  color:
    #ffffff
    !important;

  background:
    rgba(
      255,
      183,
      32,
      .07
    )
    !important;
}


.nx-telegram-modal-v18 {

  position:
    fixed;

  inset:
    0;

  z-index:
    999999;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;
}


.nx-telegram-backdrop-v18 {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      1,
      7,
      16,
      .75
    );

  backdrop-filter:
    blur(7px);
}


.nx-telegram-card-v18 {

  position:
    relative;

  z-index:
    1;

  width:
    min(
      460px,
      100%
    );

  padding:
    30px;

  border:
    1px solid
    #1b3a61;

  border-radius:
    18px;

  color:
    #f7f9ff;

  background:
    linear-gradient(
      180deg,
      #0a1d34,
      #061326
    );

  box-shadow:
    0 28px 90px
    rgba(
      0,
      0,
      0,
      .42
    );

  box-sizing:
    border-box;
}


.nx-telegram-close-v18 {

  position:
    absolute;

  top:
    13px;

  right:
    15px;

  width:
    34px;

  height:
    34px;

  border:
    0;

  color:
    #8296b5;

  background:
    transparent;

  font-size:
    26px;

  cursor:
    pointer;
}


.nx-telegram-icon-v18 {

  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    17px;

  border:
    1px solid
    rgba(
      255,
      183,
      32,
      .45
    );

  border-radius:
    14px;

  color:
    #ffb720;

  background:
    rgba(
      255,
      183,
      32,
      .07
    );

  font-size:
    23px;
}


.nx-telegram-kicker-v18 {

  color:
    #ffb720;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .09em;
}


.nx-telegram-card-v18
h3 {

  margin:
    7px
    0
    8px;

  font-size:
    25px;

  line-height:
    1.15;
}


.nx-telegram-text-v18 {

  margin:
    0
    0
    22px;

  color:
    #9eb1ce;

  font-size:
    14px;

  line-height:
    1.5;
}


.nx-telegram-primary-v18,
.nx-telegram-danger-v18 {

  width:
    100%;

  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    12px;

  padding:
    0
    16px;

  border-radius:
    10px;

  box-sizing:
    border-box;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    750;

  text-decoration:
    none;

  cursor:
    pointer;
}


.nx-telegram-primary-v18 {

  border:
    1px solid
    #ffb720;

  color:
    #071221;

  background:
    linear-gradient(
      135deg,
      #ffd05a,
      #ffb720
    );
}


.nx-telegram-danger-v18 {

  border:
    1px solid
    rgba(
      255,
      78,
      98,
      .4
    );

  color:
    #ff7a89;

  background:
    rgba(
      255,
      78,
      98,
      .05
    );
}


.nx-telegram-connected-v18 {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    14px;

  border:
    1px solid
    rgba(
      52,
      211,
      153,
      .28
    );

  border-radius:
    10px;

  color:
    #dffdf2;

  background:
    rgba(
      52,
      211,
      153,
      .05
    );
}


.nx-telegram-connected-v18
span {

  color:
    #34d399;

  font-weight:
    900;
}


.nx-telegram-connected-v18
strong {

  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.nx-telegram-wait-v18 {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    14px;

  border:
    1px solid
    #24486f;

  border-radius:
    10px;

  color:
    #d9e5f7;

  background:
    #07172b;
}


.nx-telegram-spinner-v18 {

  width:
    18px;

  height:
    18px;

  flex:
    0 0
    18px;

  border:
    2px solid
    rgba(
      255,
      183,
      32,
      .20
    );

  border-top-color:
    #ffb720;

  border-radius:
    999px;

  animation:
    nxTelegramSpinV18
    .8s
    linear
    infinite;
}


@keyframes nxTelegramSpinV18 {

  to {
    transform:
      rotate(360deg);
  }
}


.nx-telegram-message-v18 {

  min-height:
    18px;

  margin-top:
    15px;

  color:
    #7f95b5;

  font-size:
    12px;

  line-height:
    1.45;
}


.nx-telegram-message-v18.success {

  color:
    #34d399;
}


.nx-telegram-message-v18.error {

  color:
    #ff7282;
}


.nx-telegram-message-v18.working {

  color:
    #ffbf32;
}


/* nx-tracking-dropdown-v19.css */
/*
 * NOYTRIX TRACKING CUSTOM DROPDOWNS V19
 *
 * Replaces visible native selects only.
 * Original select remains underneath for
 * existing Tracking filtering logic.
 */


#screen-tracking
.tracking-v14-toolbar {

  overflow:
    visible
    !important;
}


/* ==========================================================
   WRAPPER
   ========================================================== */

#screen-tracking
.nx-tracking-select-v19 {

  position:
    relative;

  z-index:
    80;

  width:
    100%;

  min-width:
    0;

  box-sizing:
    border-box;
}


#screen-tracking
.nx-tracking-select-v19.open {

  z-index:
    9999;
}


/* ==========================================================
   HIDE NATIVE SELECT VISUALLY
   ========================================================== */

#screen-tracking
.nx-tracking-select-native-v19 {

  position:
    absolute
    !important;

  width:
    1px
    !important;

  height:
    1px
    !important;

  margin:
    0
    !important;

  padding:
    0
    !important;

  opacity:
    0
    !important;

  pointer-events:
    none
    !important;

  overflow:
    hidden
    !important;
}


/* ==========================================================
   CLOSED BUTTON
   ========================================================== */

#screen-tracking
.nx-tracking-select-button-v19 {

  width:
    100%;

  min-width:
    0;

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    0
    15px
    0
    17px;

  border:
    1px solid
    rgba(
      66,
      105,
      157,
      .48
    );

  border-radius:
    11px;

  outline:
    none;

  color:
    #edf4ff;

  background:
    linear-gradient(
      180deg,
      rgba(
        10,
        31,
        58,
        .98
      ),
      rgba(
        7,
        24,
        47,
        .98
      )
    );

  box-shadow:
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .025
    );

  font:
    inherit;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color
    .16s ease,
    background
    .16s ease,
    box-shadow
    .16s ease,
    transform
    .16s ease;

  box-sizing:
    border-box;
}


#screen-tracking
.nx-tracking-select-button-v19:hover {

  border-color:
    rgba(
      255,
      183,
      32,
      .48
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        13,
        37,
        67,
        1
      ),
      rgba(
        8,
        28,
        52,
        1
      )
    );
}


#screen-tracking
.nx-tracking-select-button-v19:focus-visible {

  border-color:
    rgba(
      255,
      183,
      32,
      .72
    );

  box-shadow:
    0
    0
    0
    3px
    rgba(
      255,
      183,
      32,
      .09
    );
}


#screen-tracking
.nx-tracking-select-v19.open
.nx-tracking-select-button-v19 {

  border-color:
    rgba(
      255,
      183,
      32,
      .70
    );

  background:
    #0a2341;

  box-shadow:
    0
    0
    0
    3px
    rgba(
      255,
      183,
      32,
      .07
    );
}


#screen-tracking
.nx-tracking-select-label-v19 {

  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ==========================================================
   ARROW
   ========================================================== */

#screen-tracking
.nx-tracking-select-arrow-v19 {

  flex:
    0
    0
    auto;

  width:
    24px;

  height:
    24px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    7px;

  color:
    #91a8c9;

  transition:
    transform
    .18s ease,
    color
    .18s ease,
    background
    .18s ease;
}


#screen-tracking
.nx-tracking-select-v19.open
.nx-tracking-select-arrow-v19 {

  transform:
    rotate(180deg);

  color:
    #ffbd32;

  background:
    rgba(
      255,
      183,
      32,
      .08
    );
}


/* ==========================================================
   MENU
   ========================================================== */

#screen-tracking
.nx-tracking-select-menu-v19 {

  position:
    absolute;

  top:
    calc(
      100% + 7px
    );

  left:
    0;

  right:
    0;

  z-index:
    10000;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    7px;

  border:
    1px solid
    rgba(
      67,
      108,
      162,
      .52
    );

  border-radius:
    13px;

  color:
    #edf4ff;

  background:
    linear-gradient(
      180deg,
      #0b203b,
      #07182e
    );

  box-shadow:
    0
    20px
    55px
    rgba(
      0,
      0,
      0,
      .42
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .035
    );

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(-5px)
    scale(.985);

  transform-origin:
    top center;

  transition:
    opacity
    .14s ease,
    transform
    .14s ease,
    visibility
    .14s ease;

  box-sizing:
    border-box;
}


#screen-tracking
.nx-tracking-select-v19.open
.nx-tracking-select-menu-v19 {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0)
    scale(1);
}


/* ==========================================================
   OPTION
   ========================================================== */

#screen-tracking
.nx-tracking-select-option-v19 {

  width:
    100%;

  min-height:
    39px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    0
    10px
    0
    12px;

  border:
    0;

  border-radius:
    9px;

  outline:
    none;

  color:
    #aebfda;

  background:
    transparent;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1.2;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background
    .12s ease,
    color
    .12s ease,
    transform
    .12s ease;

  box-sizing:
    border-box;
}


#screen-tracking
.nx-tracking-select-option-v19:hover,
#screen-tracking
.nx-tracking-select-option-v19:focus-visible {

  color:
    #ffffff;

  background:
    rgba(
      74,
      125,
      190,
      .14
    );
}


#screen-tracking
.nx-tracking-select-option-v19.selected {

  color:
    #ffffff;

  background:
    linear-gradient(
      90deg,
      rgba(
        255,
        183,
        32,
        .12
      ),
      rgba(
        255,
        183,
        32,
        .035
      )
    );
}


#screen-tracking
.nx-tracking-select-option-v19.selected:hover {

  background:
    linear-gradient(
      90deg,
      rgba(
        255,
        183,
        32,
        .17
      ),
      rgba(
        255,
        183,
        32,
        .06
      )
    );
}


#screen-tracking
.nx-tracking-select-option-label-v19 {

  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ==========================================================
   CHECK
   ========================================================== */

#screen-tracking
.nx-tracking-select-check-v19 {

  width:
    24px;

  height:
    24px;

  flex:
    0
    0
    24px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    7px;

  color:
    #ffbd32;

  background:
    rgba(
      255,
      183,
      32,
      .09
    );

  opacity:
    0;

  transform:
    scale(.72);

  transition:
    opacity
    .12s ease,
    transform
    .12s ease;
}


#screen-tracking
.nx-tracking-select-option-v19.selected
.nx-tracking-select-check-v19 {

  opacity:
    1;

  transform:
    scale(1);
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (
  min-width: 1200px
) {

  #screen-tracking
  .nx-tracking-select-menu-v19 {

    min-width:
      100%;
  }

}


/* ==========================================================
   MOBILE / TABLET
   ========================================================== */

@media (
  max-width: 1199px
) {

  #screen-tracking
  .nx-tracking-select-button-v19 {

    height:
      46px;
  }


  #screen-tracking
  .nx-tracking-select-menu-v19 {

    max-height:
      260px;

    overflow-y:
      auto;
  }

}


/* ==========================================================
   NOYTRIX TRACKING
   RESTORE ORIGINAL TOOLBAR GEOMETRY
   DO NOT TOUCH DROPDOWN MENU DESIGN
   ========================================================== */

@media (min-width: 1200px) {

  #screen-tracking
  .tracking-v14-toolbar {

    display:
      grid
      !important;

    grid-template-columns:
      minmax(0, 1fr)
      210px
      210px
      54px
      !important;

    column-gap:
      10px
      !important;

    row-gap:
      0
      !important;

    align-items:
      stretch
      !important;

    justify-content:
      stretch
      !important;

    width:
      100%
      !important;

    max-width:
      100%
      !important;

    box-sizing:
      border-box
      !important;
  }


  /* both custom dropdown containers */

  #screen-tracking
  .tracking-v14-toolbar
  > .nx-tracking-select-v19 {

    width:
      210px
      !important;

    min-width:
      210px
      !important;

    max-width:
      210px
      !important;

    margin:
      0
      !important;

    justify-self:
      stretch
      !important;

    align-self:
      stretch
      !important;
  }


  /* closed buttons — original large size */

  #screen-tracking
  .tracking-v14-toolbar
  .nx-tracking-select-button-v19 {

    width:
      210px
      !important;

    min-width:
      210px
      !important;

    max-width:
      210px
      !important;

    height:
      48px
      !important;

    min-height:
      48px
      !important;

    margin:
      0
      !important;

    padding-left:
      17px
      !important;

    padding-right:
      14px
      !important;

    box-sizing:
      border-box
      !important;
  }


  /* custom menu follows button width */

  #screen-tracking
  .tracking-v14-toolbar
  .nx-tracking-select-menu-v19 {

    width:
      210px
      !important;

    min-width:
      210px
      !important;

    max-width:
      210px
      !important;

    left:
      0
      !important;

    right:
      auto
      !important;
  }

}


/* nx-signals-final-v2.css */
/*
 * ============================================================
 * NOYTRIX SIGNALS — FINAL FULL WORKSPACE V2
 *
 * REAL OWNER:
 * #screen-intelligence
 * .signals-v19
 *
 * DESKTOP ONLY
 * ============================================================
 */


@media (min-width: 1200px) {


  /* ==========================================================
     1. USE THE WHOLE WORKING AREA
     ========================================================== */

  #screen-intelligence.active {

    width:
      100%
      !important;

    max-width:
      none
      !important;

    height:
      100%
      !important;

    min-height:
      0
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;

    overflow:
      hidden
      !important;

    box-sizing:
      border-box
      !important;
  }


  /*
   * This is the ACTUAL Signals root.
   *
   * Same geometry principle as Tracking:
   * 0.5cm on every side.
   */

  #screen-intelligence.active
  > .signals-v19,

  html.noytrix-subpage-v27
  #screen-intelligence
  .signals-v19 {

    width:
      calc(100% - 1cm)
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    height:
      calc(100% - 1cm)
      !important;

    min-height:
      0
      !important;

    max-height:
      none
      !important;

    margin:
      0.5cm
      !important;

    box-sizing:
      border-box
      !important;

    border-radius:
      10px
      !important;

    overflow:
      hidden
      !important;
  }


  /*
   * layout-v27 currently applies
   * max-width:1600px !important.
   * Kill it explicitly.
   */

  html.noytrix-subpage-v27
  #screen-intelligence
  .signals-v19 {

    max-width:
      none
      !important;
  }


  /* ==========================================================
     2. MAKE THE CENTER USE ALL AVAILABLE HEIGHT
     ========================================================== */

  #screen-intelligence
  .signals-grid-v19 {

    min-width:
      0
      !important;

    min-height:
      0
      !important;

    height:
      100%
      !important;

    overflow:
      hidden
      !important;
  }


  #screen-intelligence
  .signals-column-v19 {

    min-width:
      0
      !important;

    min-height:
      0
      !important;

    height:
      100%
      !important;
  }


  #screen-intelligence
  .signals-feed-v19 {

    min-height:
      0
      !important;

    overflow-y:
      auto
      !important;

    overflow-x:
      hidden
      !important;
  }


  /* ==========================================================
     3. HEADER
     ========================================================== */

  #screen-intelligence
  .signals-head-v19 {

    min-height:
      112px
      !important;

    padding-left:
      28px
      !important;

    padding-right:
      28px
      !important;
  }


  #screen-intelligence
  .signals-eyebrow-v19 {

    font-size:
      15px
      !important;

    line-height:
      1.2
      !important;

    font-weight:
      850
      !important;
  }


  #screen-intelligence
  .signals-title-v19 h2 {

    font-size:
      32px
      !important;

    line-height:
      1.08
      !important;

    letter-spacing:
      -0.03em
      !important;
  }


  #screen-intelligence
  .signals-title-v19 p {

    max-width:
      1100px
      !important;

    font-size:
      17px
      !important;

    line-height:
      1.4
      !important;

    font-weight:
      600
      !important;
  }


  #screen-intelligence
  .signals-notify-v19 {

    min-width:
      210px
      !important;

    min-height:
      48px
      !important;

    font-size:
      14px
      !important;

    font-weight:
      750
      !important;
  }


  /* ==========================================================
     4. TOP TABS
     ========================================================== */

  #screen-intelligence
  .signals-tabs-v19 {

    height:
      54px
      !important;

    min-height:
      54px
      !important;
  }


  #screen-intelligence
  .signals-tabs-v19 button {

    min-width:
      155px
      !important;

    font-size:
      15px
      !important;

    line-height:
      1
      !important;

    font-weight:
      700
      !important;
  }


  #screen-intelligence
  .signals-tabs-v19 b {

    min-width:
      24px
      !important;

    height:
      24px
      !important;

    font-size:
      12px
      !important;

    line-height:
      24px
      !important;
  }


  /* ==========================================================
     5. FILTER TOOLBAR
     ========================================================== */

  #screen-intelligence
  .signals-toolbar-v19 {

    min-height:
      66px
      !important;

    align-items:
      center
      !important;
  }


  #screen-intelligence
  .signals-search-v19 {

    min-height:
      46px
      !important;
  }


  #screen-intelligence
  .signals-search-v19 input {

    font-size:
      15px
      !important;

    line-height:
      1.2
      !important;

    font-weight:
      600
      !important;
  }


  #screen-intelligence
  .signals-search-v19 input::placeholder {

    font-size:
      15px
      !important;
  }


  #screen-intelligence
  .signals-toolbar-v19 select {

    height:
      46px
      !important;

    min-height:
      46px
      !important;

    font-size:
      14px
      !important;

    line-height:
      1
      !important;

    font-weight:
      700
      !important;
  }


  #screen-intelligence
  .signals-new-v19 {

    height:
      46px
      !important;

    min-height:
      46px
      !important;

    font-size:
      14px
      !important;

    line-height:
      1
      !important;

    font-weight:
      700
      !important;
  }


  #screen-intelligence
  .signals-refresh-v19 {

    width:
      48px
      !important;

    height:
      46px
      !important;

    min-height:
      46px
      !important;
  }


  #screen-intelligence
  .signals-updated-v19 {

    font-size:
      13px
      !important;

    line-height:
      1.2
      !important;

    font-weight:
      650
      !important;
  }


  /* ==========================================================
     6. THREE MAIN COLUMNS
     ========================================================== */

  #screen-intelligence
  .signals-column-v19
  > header {

    min-height:
      58px
      !important;

    padding-left:
      18px
      !important;

    padding-right:
      18px
      !important;
  }


  #screen-intelligence
  .signals-column-icon-v19 {

    width:
      29px
      !important;

    height:
      29px
      !important;
  }


  #screen-intelligence
  .signals-column-v19 h3 {

    font-size:
      17px
      !important;

    line-height:
      1.2
      !important;

    font-weight:
      750
      !important;
  }


  #screen-intelligence
  .signals-column-v19
  > header
  small {

    font-size:
      13px
      !important;

    line-height:
      1.25
      !important;

    font-weight:
      650
      !important;
  }


  /* ==========================================================
     7. EMPTY / LOADING STATES
     ========================================================== */

  #screen-intelligence
  .signals-state-v19 {

    font-size:
      14px
      !important;

    line-height:
      1.4
      !important;
  }


  #screen-intelligence
  .signals-empty-v19
  strong {

    font-size:
      15px
      !important;

    line-height:
      1.35
      !important;

    font-weight:
      700
      !important;
  }


  #screen-intelligence
  .signals-empty-v19
  small {

    font-size:
      13px
      !important;

    line-height:
      1.4
      !important;

    font-weight:
      600
      !important;
  }


  /* ==========================================================
     8. REAL SIGNAL CARDS WHEN DATA APPEARS
     ========================================================== */

  #screen-intelligence
  .signal-item-v19 {

    font-size:
      14px
      !important;

    line-height:
      1.4
      !important;
  }


  #screen-intelligence
  .signal-item-title-v19 {

    font-size:
      15px
      !important;

    line-height:
      1.35
      !important;
  }


  #screen-intelligence
  .signal-item-title-v19
  strong,

  #screen-intelligence
  .signal-item-title-v19
  a {

    font-size:
      15px
      !important;

    line-height:
      1.35
      !important;
  }


  #screen-intelligence
  .signal-badge-v19 {

    font-size:
      12px
      !important;

    line-height:
      1.2
      !important;
  }


  #screen-intelligence
  .signal-tags-v19,

  #screen-intelligence
  .signal-source-v19,

  #screen-intelligence
  .community-count-v19,

  #screen-intelligence
  .market-date-v19,

  #screen-intelligence
  .market-source-v19 {

    font-size:
      13px
      !important;

    line-height:
      1.4
      !important;
  }


  #screen-intelligence
  .signal-check-v19,

  #screen-intelligence
  .signal-bookmark-v19 {

    font-size:
      13px
      !important;
  }


  /* ==========================================================
     9. COLUMN FOOTER BUTTONS
     ========================================================== */

  #screen-intelligence
  .signals-column-footer-v19 {

    flex-basis:
      43px
      !important;

    height:
      43px
      !important;

    min-height:
      43px
      !important;

    font-size:
      14px
      !important;

    font-weight:
      700
      !important;
  }


  /* ==========================================================
     10. BOTTOM INFO BAR
     ========================================================== */

  #screen-intelligence
  .signals-footer-v19 {

    min-height:
      68px
      !important;
  }


  #screen-intelligence
  .signals-footer-copy-v19 p {

    font-size:
      14px
      !important;

    line-height:
      1.4
      !important;

    font-weight:
      650
      !important;
  }


  #screen-intelligence
  .signals-source-pills-v19
  span {

    font-size:
      13px
      !important;

    line-height:
      1
      !important;

    font-weight:
      700
      !important;
  }


  #screen-intelligence
  .signals-how-v19 {

    min-height:
      42px
      !important;

    font-size:
      14px
      !important;

    font-weight:
      700
      !important;
  }


  /* ==========================================================
     11. KEEP PAGE ITSELF FROM SCROLLING HORIZONTALLY
     ========================================================== */

  #screen-intelligence,

  #screen-intelligence
  .signals-v19,

  #screen-intelligence
  .signals-grid-v19,

  #screen-intelligence
  .signals-column-v19 {

    box-sizing:
      border-box
      !important;
  }


  #screen-intelligence,

  #screen-intelligence
  .signals-v19 {

    overflow-x:
      hidden
      !important;
  }

}


/*
 * TABLET / MOBILE ARE INTENTIONALLY UNTOUCHED.
 */


/* nx-signals-hard-v3.css */
/*
 * ============================================================
 * NOYTRIX SIGNALS — HARD GEOMETRY V3
 *
 * Desktop only.
 *
 * This intentionally bypasses all legacy parent sizing.
 * Signals is anchored directly to the viewport,
 * starting exactly after the real sidebar.
 * ============================================================
 */


@media (min-width: 1200px) {


  /* ==========================================================
     1. SCREEN = ENTIRE AREA TO THE RIGHT OF SIDEBAR
     ========================================================== */

  html body
  #screen-intelligence.active {

    position:
      fixed
      !important;

    top:
      0
      !important;

    right:
      0
      !important;

    bottom:
      0
      !important;

    left:
      var(
        --nx-signals-left-v3,
        255px
      )
      !important;

    width:
      auto
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    height:
      auto
      !important;

    min-height:
      0
      !important;

    max-height:
      none
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;

    overflow:
      hidden
      !important;

    box-sizing:
      border-box
      !important;

    z-index:
      20
      !important;
  }


  /* ==========================================================
     2. SIGNALS CARD = 0.5CM FROM ALL FOUR SIDES
     ========================================================== */

  html body
  #screen-intelligence.active
  > .signals-v19,

  html.noytrix-subpage-v27
  body
  #screen-intelligence.active
  > .signals-v19 {

    position:
      absolute
      !important;

    inset:
      0.05cm
      !important;

    top:
      0.05cm
      !important;

    right:
      0.05cm
      !important;

    bottom:
      0.05cm
      !important;

    left:
      0.05cm
      !important;

    width:
      auto
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    height:
      auto
      !important;

    min-height:
      0
      !important;

    max-height:
      none
      !important;

    margin:
      0
      !important;

    box-sizing:
      border-box
      !important;

    overflow:
      hidden
      !important;

    border-radius:
      10px
      !important;
  }


  /* ==========================================================
     3. GUARANTEE INTERNAL GRID USES ALL REMAINING SPACE
     ========================================================== */

  html body
  #screen-intelligence.active
  .signals-grid-v19 {

    min-width:
      0
      !important;

    min-height:
      0
      !important;

    width:
      100%
      !important;

    max-width:
      none
      !important;

    overflow:
      hidden
      !important;
  }


  html body
  #screen-intelligence.active
  .signals-column-v19 {

    min-width:
      0
      !important;

    min-height:
      0
      !important;

    max-width:
      none
      !important;
  }


  html body
  #screen-intelligence.active
  .signals-feed-v19 {

    min-height:
      0
      !important;

    overflow-y:
      auto
      !important;

    overflow-x:
      hidden
      !important;
  }


  /* ==========================================================
     4. REMOVE ANY LEGACY CENTERING
     ========================================================== */

  html body
  #screen-intelligence.active
  .signals-v19 {

    margin-left:
      0
      !important;

    margin-right:
      0
      !important;
  }


  /*
   * Explicitly beat layout-v27's
   * max-width:1600px!important.
   */

  html.noytrix-subpage-v27
  #screen-intelligence
  .signals-v19 {

    max-width:
      none
      !important;
  }

}


/*
 * Mobile and tablet unchanged.
 */


/* nx-signals-dropdown-v4.css */
/*
 * ============================================================
 * NOYTRIX SIGNALS — CUSTOM DROPDOWNS V4
 * ============================================================
 */


@media (min-width: 1200px) {


  /* ==========================================================
     TOOLBAR MUST ALLOW DROPDOWN OVERLAY
     ========================================================== */

  #screen-intelligence
  .signals-toolbar-v19 {

    position:
      relative
      !important;

    z-index:
      500
      !important;

    overflow:
      visible
      !important;
  }


  #screen-intelligence
  .signals-grid-v19 {

    position:
      relative;

    z-index:
      1;
  }


  /* ==========================================================
     CUSTOM SELECT WRAPPER
     ========================================================== */

  #screen-intelligence
  .nx-signals-select-v4 {

    position:
      relative;

    z-index:
      510;

    width:
      100%;

    min-width:
      0;

    box-sizing:
      border-box;
  }


  #screen-intelligence
  .nx-signals-select-v4.open {

    z-index:
      10000;
  }


  /* ==========================================================
     KEEP REAL SELECT FOR EXISTING FILTER LOGIC
     BUT HIDE IT VISUALLY
     ========================================================== */

  #screen-intelligence
  .nx-signals-native-select-v4 {

    position:
      absolute
      !important;

    width:
      1px
      !important;

    height:
      1px
      !important;

    min-width:
      1px
      !important;

    min-height:
      1px
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;

    opacity:
      0
      !important;

    pointer-events:
      none
      !important;

    overflow:
      hidden
      !important;
  }


  /* ==========================================================
     CLOSED BUTTON
     ========================================================== */

  #screen-intelligence
  .nx-signals-select-button-v4 {

    width:
      100%
      !important;

    min-width:
      0
      !important;

    height:
      50px
      !important;

    min-height:
      50px
      !important;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      14px;

    padding:
      0
      14px
      0
      17px;

    border:
      1px solid
      rgba(
        66,
        105,
        157,
        .48
      );

    border-radius:
      11px;

    outline:
      none;

    color:
      #edf4ff;

    background:
      linear-gradient(
        180deg,
        rgba(
          10,
          31,
          58,
          .99
        ),
        rgba(
          7,
          24,
          47,
          .99
        )
      );

    box-shadow:
      inset
      0
      1px
      0
      rgba(
        255,
        255,
        255,
        .025
      );

    font:
      inherit;

    font-size:
      15px
      !important;

    font-weight:
      700
      !important;

    line-height:
      1;

    text-align:
      left;

    cursor:
      pointer;

    box-sizing:
      border-box;

    transition:
      border-color
      .16s ease,
      background
      .16s ease,
      box-shadow
      .16s ease;
  }


  #screen-intelligence
  .nx-signals-select-button-v4:hover {

    border-color:
      rgba(
        255,
        183,
        32,
        .50
      );

    background:
      linear-gradient(
        180deg,
        #0d2543,
        #081c34
      );
  }


  #screen-intelligence
  .nx-signals-select-button-v4:focus-visible {

    border-color:
      rgba(
        255,
        183,
        32,
        .78
      );

    box-shadow:
      0
      0
      0
      3px
      rgba(
        255,
        183,
        32,
        .09
      );
  }


  #screen-intelligence
  .nx-signals-select-v4.open
  .nx-signals-select-button-v4 {

    border-color:
      rgba(
        255,
        183,
        32,
        .72
      );

    background:
      #0a2341;

    box-shadow:
      0
      0
      0
      3px
      rgba(
        255,
        183,
        32,
        .07
      );
  }


  #screen-intelligence
  .nx-signals-select-label-v4 {

    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* ==========================================================
     ARROW
     ========================================================== */

  #screen-intelligence
  .nx-signals-select-arrow-v4 {

    width:
      25px;

    height:
      25px;

    flex:
      0 0
      25px;

    display:
      grid;

    place-items:
      center;

    border-radius:
      7px;

    color:
      #91a8c9;

    transition:
      transform
      .18s ease,
      color
      .18s ease,
      background
      .18s ease;
  }


  #screen-intelligence
  .nx-signals-select-v4.open
  .nx-signals-select-arrow-v4 {

    transform:
      rotate(
        180deg
      );

    color:
      #ffbd32;

    background:
      rgba(
        255,
        183,
        32,
        .08
      );
  }


  /* ==========================================================
     MENU
     ========================================================== */

  #screen-intelligence
  .nx-signals-select-menu-v4 {

    position:
      absolute;

    top:
      calc(
        100% + 7px
      );

    left:
      0;

    width:
      100%;

    min-width:
      190px;

    z-index:
      10001;

    display:
      flex;

    flex-direction:
      column;

    gap:
      4px;

    padding:
      7px;

    border:
      1px solid
      rgba(
        67,
        108,
        162,
        .58
      );

    border-radius:
      13px;

    color:
      #edf4ff;

    background:
      linear-gradient(
        180deg,
        #0b203b,
        #07182e
      );

    box-shadow:
      0
      22px
      60px
      rgba(
        0,
        0,
        0,
        .48
      ),
      inset
      0
      1px
      0
      rgba(
        255,
        255,
        255,
        .035
      );

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateY(-5px)
      scale(.985);

    transform-origin:
      top center;

    transition:
      opacity
      .14s ease,
      transform
      .14s ease,
      visibility
      .14s ease;

    box-sizing:
      border-box;
  }


  #screen-intelligence
  .nx-signals-select-v4.open
  .nx-signals-select-menu-v4 {

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      translateY(0)
      scale(1);
  }


  /* ==========================================================
     OPTIONS
     ========================================================== */

  #screen-intelligence
  .nx-signals-select-option-v4 {

    width:
      100%;

    min-height:
      42px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      12px;

    padding:
      0
      10px
      0
      12px;

    border:
      0;

    border-radius:
      9px;

    outline:
      none;

    color:
      #aebfda;

    background:
      transparent;

    font:
      inherit;

    font-size:
      14px
      !important;

    font-weight:
      650
      !important;

    line-height:
      1.2;

    text-align:
      left;

    cursor:
      pointer;

    box-sizing:
      border-box;

    transition:
      background
      .12s ease,
      color
      .12s ease;
  }


  #screen-intelligence
  .nx-signals-select-option-v4:hover,

  #screen-intelligence
  .nx-signals-select-option-v4:focus-visible {

    color:
      #ffffff;

    background:
      rgba(
        74,
        125,
        190,
        .15
      );
  }


  #screen-intelligence
  .nx-signals-select-option-v4.selected {

    color:
      #ffffff;

    background:
      linear-gradient(
        90deg,
        rgba(
          255,
          183,
          32,
          .14
        ),
        rgba(
          255,
          183,
          32,
          .035
        )
      );
  }


  #screen-intelligence
  .nx-signals-select-option-v4.selected:hover {

    background:
      linear-gradient(
        90deg,
        rgba(
          255,
          183,
          32,
          .20
        ),
        rgba(
          255,
          183,
          32,
          .06
        )
      );
  }


  #screen-intelligence
  .nx-signals-select-option-label-v4 {

    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* ==========================================================
     SELECTED CHECK
     ========================================================== */

  #screen-intelligence
  .nx-signals-select-check-v4 {

    width:
      25px;

    height:
      25px;

    flex:
      0 0
      25px;

    display:
      grid;

    place-items:
      center;

    border-radius:
      7px;

    color:
      #ffbd32;

    background:
      rgba(
        255,
        183,
        32,
        .09
      );

    opacity:
      0;

    transform:
      scale(.72);

    transition:
      opacity
      .12s ease,
      transform
      .12s ease;
  }


  #screen-intelligence
  .nx-signals-select-option-v4.selected
  .nx-signals-select-check-v4 {

    opacity:
      1;

    transform:
      scale(1);
  }


  /* ==========================================================
     REMOVE THESE TWO BUTTONS COMPLETELY
     ========================================================== */

  #screen-intelligence
  .signals-column-v19.community
  > .signals-column-footer-v19,

  #screen-intelligence
  .signals-column-v19.market
  > .signals-column-footer-v19 {

    display:
      none
      !important;
  }


  /*
   * Let feed consume the space previously
   * occupied by the removed footer buttons.
   */

  #screen-intelligence
  .signals-column-v19.community
  > .signals-feed-v19,

  #screen-intelligence
  .signals-column-v19.market
  > .signals-feed-v19 {

    flex:
      1 1 auto
      !important;

    min-height:
      0
      !important;
  }

}


/* nx-dev-full-v53.css */
/*
 * ============================================================
 * NOYTRIX FOR DEVELOPERS — HARD FULL WORKSPACE V53
 *
 * REAL OWNER:
 * #screen-api.api-screen-v38
 * > .api-page-v38
 *
 * DESKTOP ONLY
 * ============================================================
 */


@media (min-width: 1200px) {


  /* ==========================================================
     1. ENTIRE AREA TO THE RIGHT OF SIDEBAR
     ========================================================== */

  html body
  #screen-api.api-screen-v38 {

    position:
      fixed
      !important;

    top:
      0
      !important;

    right:
      0
      !important;

    bottom:
      0
      !important;

    left:
      var(
        --nx-dev-left-v53,
        255px
      )
      !important;

    width:
      auto
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    height:
      auto
      !important;

    min-height:
      0
      !important;

    max-height:
      none
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;

    overflow:
      hidden
      !important;

    box-sizing:
      border-box
      !important;

    z-index:
      20
      !important;
  }


  /* ==========================================================
     2. PAGE FILLS THE ENTIRE WORKSPACE
     ========================================================== */

  html body
  #screen-api.api-screen-v38
  > .api-page-v38 {

    position:
      absolute
      !important;

    top:
      0.05cm
      !important;

    right:
      0.05cm
      !important;

    bottom:
      0.05cm
      !important;

    left:
      0.05cm
      !important;

    width:
      auto
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    height:
      auto
      !important;

    min-height:
      0
      !important;

    max-height:
      none
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;

    box-sizing:
      border-box
      !important;

    overflow-x:
      hidden
      !important;

    overflow-y:
      auto
      !important;
  }


  /*
   * Kill any old width / centered-page limitation.
   */

  html.noytrix-subpage-v27
  body
  #screen-api
  .api-page-v38,

  html body
  #screen-api
  .api-page-v38 {

    max-width:
      none
      !important;

    margin-left:
      0
      !important;

    margin-right:
      0
      !important;
  }


  /* ==========================================================
     3. ALL MAIN SECTIONS USE AVAILABLE WIDTH
     ========================================================== */

  #screen-api
  .api-page-v38
  > * {

    min-width:
      0
      !important;

    max-width:
      none
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-hero-grid-v38 {

    width:
      100%
      !important;

    min-width:
      0
      !important;

    max-width:
      none
      !important;
  }


  #screen-api
  .api-hero-v38 {

    min-width:
      0
      !important;

    max-width:
      none
      !important;
  }


  /*
   * Let all direct grid children stretch.
   */

  #screen-api
  .api-page-v38
  section,

  #screen-api
  .api-page-v38
  article {

    min-width:
      0
      !important;

    box-sizing:
      border-box
      !important;
  }


  /* ==========================================================
     4. MAIN HERO
     Keep big headings big — user asked only for tiny text.
     ========================================================== */

  #screen-api
  .api-hero-v38 h1 {

    font-size:
      clamp(
        34px,
        2.45vw,
        48px
      )
      !important;

    line-height:
      1.03
      !important;

    letter-spacing:
      -0.035em
      !important;
  }


  #screen-api
  .api-eyebrow-v38 {

    font-size:
      15px
      !important;

    line-height:
      1.2
      !important;

    font-weight:
      850
      !important;

    letter-spacing:
      .09em
      !important;
  }


  #screen-api
  .api-hero-v38
  > p {

    font-size:
      16px
      !important;

    line-height:
      1.48
      !important;

    font-weight:
      600
      !important;

    max-width:
      920px
      !important;
  }


  /* ==========================================================
     5. SMALL TEXT — HARD READABILITY INCREASE
     ========================================================== */

  #screen-api
  .api-page-v38 p {

    font-size:
      15px
      !important;

    line-height:
      1.42
      !important;
  }


  #screen-api
  .api-page-v38 small {

    font-size:
      13px
      !important;

    line-height:
      1.38
      !important;
  }


  #screen-api
  .api-page-v38 li {

    font-size:
      14px
      !important;

    line-height:
      1.4
      !important;
  }


  #screen-api
  .api-page-v38 code {

    font-size:
      13px
      !important;

    line-height:
      1.5
      !important;
  }


  #screen-api
  .api-page-v38 pre {

    font-size:
      13px
      !important;

    line-height:
      1.5
      !important;
  }


  /*
   * Labels / meta / kicker text were especially tiny.
   */

  #screen-api
  .api-page-v38
  [class*="label"],

  #screen-api
  .api-page-v38
  [class*="meta"],

  #screen-api
  .api-page-v38
  [class*="kicker"] {

    font-size:
      13px
      !important;

    line-height:
      1.3
      !important;
  }


  /* ==========================================================
     6. BUTTONS
     ========================================================== */

  #screen-api
  .api-page-v38 button,

  #screen-api
  .api-page-v38 a {

    font-size:
      14px
      !important;

    line-height:
      1.2
      !important;

    font-weight:
      750
      !important;
  }


  #screen-api
  .api-btn-primary-v38,

  #screen-api
  .api-btn-secondary-v38 {

    min-height:
      50px
      !important;

    padding-left:
      20px
      !important;

    padding-right:
      20px
      !important;
  }


  /* ==========================================================
     7. CARDS — GIVE CONTENT ROOM
     ========================================================== */

  #screen-api
  .api-page-v38 article {

    overflow:
      hidden;
  }


  #screen-api
  .api-page-v38 article h2,

  #screen-api
  .api-page-v38 article h3 {

    line-height:
      1.15
      !important;
  }


  #screen-api
  .api-page-v38 article h3 {

    font-size:
      18px
      !important;
  }


  #screen-api
  .api-page-v38 article strong {

    font-size:
      16px
      !important;

    line-height:
      1.25
      !important;
  }


  /* ==========================================================
     8. CODE / REQUEST / RESPONSE PANEL
     ========================================================== */

  #screen-api
  .api-page-v38 pre,

  #screen-api
  .api-page-v38 code {

    white-space:
      pre-wrap
      !important;

    overflow-wrap:
      anywhere
      !important;

    word-break:
      break-word
      !important;
  }


  /* ==========================================================
     9. SVG / ICONS
     Font changes must not distort icons.
     ========================================================== */

  #screen-api
  .api-page-v38 svg {

    flex:
      0 0 auto;
  }


  /* ==========================================================
     10. NO HORIZONTAL SCROLL
     ========================================================== */

  #screen-api,

  #screen-api
  .api-page-v38,

  #screen-api
  .api-hero-grid-v38 {

    box-sizing:
      border-box
      !important;

    overflow-x:
      hidden
      !important;
  }


}


/*
 * ============================================================
 * MOBILE / TABLET UNTOUCHED
 * ============================================================
 */

/* NX DEV ROW BALANCE V54 START */

@media (min-width: 1200px) {


  /* ==========================================================
     FOUR MAIN ROWS

     1 = HERO
     2 = WHAT CAN BE CHECKED
     3 = MAIN CONTENT
     4 = BOTTOM CAPABILITIES
     ========================================================== */

  #screen-api
  .api-page-v38 {

    display:
      grid
      !important;

    /*
     * Было визуально:
     * HERO        ~260px
     * SUPPORTED    ~68px
     * MIDDLE      ~400px
     * BOTTOM       ~85px
     *
     * Теперь:
     * HERO          больше
     * SUPPORTED     46px
     * MIDDLE        забирает максимум
     * BOTTOM        62px
     */

    grid-template-rows:
      minmax(282px, 1.15fr)
      46px
      minmax(0, 1.85fr)
      62px
      !important;

    gap:
      10px
      !important;
  }


  /* ==========================================================
     1. TOP / HERO — GIVE IT SPACE TAKEN FROM ROW 2
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(1) {

    min-height:
      0
      !important;

    height:
      100%
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(1)
  > * {

    height:
      100%
      !important;

    min-height:
      0
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-hero-v38 {

    display:
      flex
      !important;

    flex-direction:
      column
      !important;

    justify-content:
      center
      !important;
  }


  /* ==========================================================
     2. "WHAT CAN BE CHECKED" — MUCH THINNER
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(2) {

    height:
      46px
      !important;

    min-height:
      46px
      !important;

    max-height:
      46px
      !important;

    margin:
      0
      !important;

    padding-top:
      0
      !important;

    padding-bottom:
      0
      !important;

    align-items:
      center
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(2)
  > * {

    min-height:
      44px
      !important;

    height:
      44px
      !important;

    padding-top:
      0
      !important;

    padding-bottom:
      0
      !important;

    display:
      flex
      !important;

    align-items:
      center
      !important;

    justify-content:
      center
      !important;

    box-sizing:
      border-box
      !important;
  }


  /*
   * Не даём иконкам делать эту строку снова высокой.
   */

  #screen-api
  .api-page-v38
  > :nth-child(2)
  svg {

    max-width:
      24px
      !important;

    max-height:
      24px
      !important;
  }


  /* ==========================================================
     3. MIDDLE — BIGGEST AREA
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(3) {

    min-height:
      0
      !important;

    height:
      100%
      !important;

    align-items:
      stretch
      !important;

    box-sizing:
      border-box
      !important;
  }


  /*
   * Левая и правая большие панели занимают всю высоту.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > * {

    min-height:
      0
      !important;

    height:
      100%
      !important;

    box-sizing:
      border-box
      !important;
  }


  /*
   * Красиво центрируем СОДЕРЖИМОЕ каждой
   * средней большой панели по вертикали,
   * но внутреннюю структуру карточек не ломаем.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > * {

    display:
      flex
      !important;

    flex-direction:
      column
      !important;

    justify-content:
      center
      !important;
  }


  /*
   * Заголовки средней зоны сохраняем сверху относительно
   * собственного содержимого и даём аккуратный отступ.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > *
  > h2:first-child,

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > *
  > h3:first-child {

    margin-top:
      0
      !important;

    margin-bottom:
      8px
      !important;
  }


  /*
   * Если внутри панели есть grid,
   * он занимает свободную высоту равномерно.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  > *
  > div {

    min-height:
      0
      !important;
  }


  /*
   * Текст в карточках средней области:
   * выравнивание по вертикали аккуратнее.
   */

  #screen-api
  .api-page-v38
  > :nth-child(3)
  article {

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(3)
  article
  > div {

    align-self:
      center
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(3)
  article h3,

  #screen-api
  .api-page-v38
  > :nth-child(3)
  article strong {

    margin-top:
      0
      !important;

    margin-bottom:
      5px
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(3)
  article p,

  #screen-api
  .api-page-v38
  > :nth-child(3)
  article small {

    margin-top:
      0
      !important;

    margin-bottom:
      0
      !important;
  }


  /* ==========================================================
     4. BOTTOM STRIP — SLIGHTLY THINNER
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(4) {

    height:
      62px
      !important;

    min-height:
      62px
      !important;

    max-height:
      62px
      !important;

    margin:
      0
      !important;

    padding-top:
      0
      !important;

    padding-bottom:
      0
      !important;

    align-items:
      center
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(4)
  article {

    height:
      60px
      !important;

    min-height:
      60px
      !important;

    padding-top:
      6px
      !important;

    padding-bottom:
      6px
      !important;

    display:
      flex
      !important;

    align-items:
      center
      !important;

    box-sizing:
      border-box
      !important;
  }


  #screen-api
  .api-page-v38
  > :nth-child(4)
  svg {

    max-width:
      28px
      !important;

    max-height:
      28px
      !important;
  }


  /* ==========================================================
     KEEP EVERYTHING INSIDE VIEWPORT
     ========================================================== */

  #screen-api
  .api-page-v38
  > :nth-child(1),

  #screen-api
  .api-page-v38
  > :nth-child(2),

  #screen-api
  .api-page-v38
  > :nth-child(3),

  #screen-api
  .api-page-v38
  > :nth-child(4) {

    overflow:
      hidden
      !important;
  }

}

/* NX DEV ROW BALANCE V54 END */


/* nx-api-docs-tab-v55.css */
/*
 * ============================================================
 * NOYTRIX API DOCS — STANDALONE WORKSPACE TAB V55
 *
 * Real docs root:
 * #nxd-docs-v41
 *
 * Desktop:
 * sidebar remains visible
 * documentation completely replaces previous workspace screen
 * ============================================================
 */


@media (min-width: 1200px) {


  /* ==========================================================
     1. HIDE OLD API PAGE WHILE DOCS ARE OPEN
     ========================================================== */

  body:has(#nxd-docs-v41)
  #screen-api {

    visibility:
      hidden
      !important;

    pointer-events:
      none
      !important;
  }


  /*
   * Docs live directly under body,
   * therefore hiding #screen-api does NOT hide docs.
   */


  /* ==========================================================
     2. DOCS = FULL WORKSPACE TAB
     ========================================================== */

  html body
  #nxd-docs-v41 {

    position:
      fixed
      !important;

    top:
      0
      !important;

    right:
      0
      !important;

    bottom:
      0
      !important;

    left:
      var(
        --nx-docs-left-v55,
        255px
      )
      !important;


    width:
      auto
      !important;

    height:
      auto
      !important;


    min-width:
      0
      !important;

    min-height:
      0
      !important;


    max-width:
      none
      !important;

    max-height:
      none
      !important;


    margin:
      0
      !important;

    padding:
      0
      !important;


    border:
      0
      !important;

    border-radius:
      0
      !important;


    box-shadow:
      none
      !important;


    background:
      #061326
      !important;


    overflow:
      hidden
      !important;


    opacity:
      1
      !important;


    transform:
      none
      !important;


    z-index:
      999999
      !important;


    isolation:
      isolate
      !important;


    box-sizing:
      border-box
      !important;
  }


  /* ==========================================================
     3. COMPLETELY OPAQUE BACKGROUND
     ========================================================== */

  #nxd-docs-v41::before {

    content:
      "";

    position:
      absolute;

    inset:
      0;

    z-index:
      -2;

    background:
      #061326;

    pointer-events:
      none;
  }


  #nxd-docs-v41::after {

    content:
      "";

    position:
      absolute;

    inset:
      0;

    z-index:
      -1;

    background:
      linear-gradient(
        135deg,
        rgba(
          8,
          28,
          52,
          .98
        ),
        rgba(
          4,
          17,
          33,
          .99
        )
      );

    pointer-events:
      none;
  }


  /* ==========================================================
     4. TOP BAR = REAL TAB HEADER
     ========================================================== */

  #nxd-docs-v41
  .nxd-top {

    position:
      relative
      !important;

    top:
      auto
      !important;

    left:
      auto
      !important;

    right:
      auto
      !important;


    width:
      100%
      !important;

    max-width:
      none
      !important;


    margin:
      0
      !important;


    border-radius:
      0
      !important;


    background:
      #07162a
      !important;


    box-shadow:
      none
      !important;


    z-index:
      20
      !important;


    box-sizing:
      border-box
      !important;
  }


  /* ==========================================================
     5. LEFT DOCS NAVIGATION
     ========================================================== */

  #nxd-docs-v41
  .nxd-nav {

    background:
      #061326
      !important;

    border-radius:
      0
      !important;


    min-height:
      0
      !important;


    overflow-y:
      auto
      !important;

    overflow-x:
      hidden
      !important;


    box-sizing:
      border-box
      !important;
  }


  /* ==========================================================
     6. EVERYTHING INSIDE STAYS ABOVE OPAQUE ROOT
     ========================================================== */

  #nxd-docs-v41
  > * {

    position:
      relative;

    z-index:
      1;
  }


  /* ==========================================================
     7. REMOVE OLD MODAL-LIKE GEOMETRY
     ========================================================== */

  #nxd-docs-v41,

  #nxd-docs-v41
  > div,

  #nxd-docs-v41
  > main {

    max-width:
      none
      !important;

    max-height:
      none
      !important;

    border-radius:
      0
      !important;
  }


  /* ==========================================================
     8. CENTRAL CONTENT SHOULD USE AVAILABLE WIDTH
     ========================================================== */

  #nxd-docs-v41
  .nxd-main-inner {

    width:
      100%
      !important;

    max-width:
      1100px
      !important;

    margin-left:
      auto
      !important;

    margin-right:
      auto
      !important;

    box-sizing:
      border-box
      !important;
  }


  /* ==========================================================
     9. CODE / RIGHT PANEL
     No transparent areas back to old page.
     ========================================================== */

  #nxd-docs-v41
  aside,

  #nxd-docs-v41
  [class*="aside"],

  #nxd-docs-v41
  [class*="code-panel"] {

    background-color:
      #061326
      !important;
  }


  /* ==========================================================
     10. NO OUTER GAP ANYWHERE
     ========================================================== */

  body:has(#nxd-docs-v41) {

    overflow:
      hidden
      !important;
  }


  body:has(#nxd-docs-v41)
  .workspace {

    overflow:
      hidden
      !important;
  }


}


/*
 * ============================================================
 * TABLET / MOBILE
 *
 * Docs still become a full standalone page,
 * but sidebar geometry is not forced.
 * ============================================================
 */

@media (max-width: 1199px) {


  html body
  #nxd-docs-v41 {

    position:
      fixed
      !important;

    inset:
      0
      !important;


    width:
      100vw
      !important;

    height:
      100dvh
      !important;


    max-width:
      none
      !important;

    max-height:
      none
      !important;


    margin:
      0
      !important;


    border-radius:
      0
      !important;


    background:
      #061326
      !important;


    z-index:
      999999
      !important;
  }

}


/* nx-settings-layout-v66.css */
/*
 * ============================================================
 * NOYTRIX SETTINGS — DESKTOP LAYOUT HARD FIX V66
 *
 * Fix:
 * - restore Settings below header
 * - prevent workspace from shifting right
 * - prevent right-side clipping
 * - keep section navigation on left
 * - main settings content fills remaining width
 *
 * Desktop only.
 * ============================================================
 */

@media (min-width: 1200px) {


  /* ==========================================================
     1. SETTINGS SCREEN ITSELF
     MUST NOT BE A TWO-COLUMN GRID.
     Header + workspace must flow vertically.
     ========================================================== */

  #screen-settings.active,
  #screen-settings.noytrix-active-screen-v27 {

    display: block !important;

    position: relative !important;

    inset: auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;

    transform: none !important;

    width: 100% !important;
    max-width: 1320px !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 100% !important;

    margin:
      0 auto
      !important;

    padding:
      8px 0 70px
      !important;

    grid-template-columns:
      none !important;

    grid-template-rows:
      none !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* ==========================================================
     2. HEADER BACK TO NORMAL POSITION
     ========================================================== */

  #screen-settings .settings-page-header {

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin:
      6px 0 18px
      !important;

    padding: 0 !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 22px !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-page-header > * {

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-page-tools {

    position: relative !important;

    margin-left: auto !important;

    flex:
      0 0 auto
      !important;

    min-width: 0 !important;

    transform: none !important;
  }


  /* ==========================================================
     3. WORKSPACE — THIS IS THE REAL TWO-COLUMN GRID
     ========================================================== */

  #screen-settings .settings-workspace {

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
      238px
      minmax(0, 1fr)
      !important;

    grid-template-rows:
      auto !important;

    gap: 18px !important;

    align-items: start !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ==========================================================
     4. LEFT SETTINGS NAV
     ========================================================== */

  #screen-settings .settings-section-nav {

    position: sticky !important;

    top: 16px !important;

    left: auto !important;
    right: auto !important;

    width: 238px !important;
    max-width: 238px !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 9px !important;

    box-sizing: border-box !important;

    transform: none !important;
  }


  #screen-settings .settings-section-nav button {

    width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     5. MAIN SETTINGS COLUMN
     ========================================================== */

  #screen-settings .settings-main {

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    gap: 12px !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ==========================================================
     6. EVERY SETTINGS PANEL MUST FIT MAIN COLUMN
     ========================================================== */

  #screen-settings .settings-panel {

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;

    transform: none !important;

    overflow: hidden !important;
  }


  #screen-settings .settings-panel > * {

    max-width: 100%;

    box-sizing: border-box;
  }


  /* ==========================================================
     7. LANGUAGE + REGION
     THREE-COLUMN RULE WAS TOO AGGRESSIVE FOR AVAILABLE WIDTH.
     Use two columns where there are two actual controls.
     ========================================================== */

  #screen-settings .settings-fields-three {

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    gap: 16px !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-fields-three > * {

    min-width: 0 !important;

    max-width: 100% !important;
  }


  /* ==========================================================
     8. APPEARANCE
     Keep controls inside panel.
     ========================================================== */

  #screen-settings .appearance-controls {

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      !important;

    gap: 20px !important;

    align-items: end !important;

    box-sizing: border-box !important;
  }


  #screen-settings .appearance-controls > * {

    min-width: 0 !important;

    max-width: 100% !important;
  }


  #screen-settings .segmented {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  #screen-settings .segmented button {

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     9. DEFAULT CHECKS
     ========================================================== */

  #screen-settings .settings-scan-grid {

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(220px, .65fr)
      !important;

    gap: 24px !important;

    align-items: start !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-scan-grid > * {

    min-width: 0 !important;

    max-width: 100% !important;
  }


  /* ==========================================================
     10. BEHAVIOUR AND DATA
     ========================================================== */

  #screen-settings .settings-data-panel {

    width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, .75fr)
      !important;

    gap: 22px !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-data-controls,
  #screen-settings .settings-sync-state {

    min-width: 0 !important;

    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     11. SELECTS / CONTROLS — NEVER ESCAPE PANEL
     ========================================================== */

  #screen-settings select,
  #screen-settings input,
  #screen-settings button {

    max-width: 100%;

    box-sizing: border-box;
  }


  #screen-settings .settings-fields select,
  #screen-settings .settings-select-block select,
  #screen-settings .settings-retention select {

    width: 100% !important;

    min-width: 0 !important;
  }


  /* ==========================================================
     12. FOOTER
     ========================================================== */

  #screen-settings .settings-footer {

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin:
      14px 0 0
      !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     13. HARD OVERFLOW PROTECTION
     ========================================================== */

  #screen-settings,
  #screen-settings .settings-workspace,
  #screen-settings .settings-main,
  #screen-settings .settings-panel {

    box-sizing: border-box !important;
  }

}


/* ============================================================
   SAFER FALLBACK FOR SMALLER DESKTOP / LAPTOP
   ============================================================ */

@media (min-width: 1200px) and (max-width: 1450px) {

  #screen-settings.active,
  #screen-settings.noytrix-active-screen-v27 {

    max-width:
      calc(100vw - 300px)
      !important;
  }


  #screen-settings .settings-workspace {

    grid-template-columns:
      210px
      minmax(0, 1fr)
      !important;

    gap: 14px !important;
  }


  #screen-settings .settings-section-nav {

    width: 210px !important;
    max-width: 210px !important;
  }


  #screen-settings .appearance-controls,
  #screen-settings .settings-scan-grid,
  #screen-settings .settings-data-panel {

    grid-template-columns:
      1fr
      !important;
  }

}


/* nx-settings-flow-v67.css */
/*
 * ============================================================
 * NOYTRIX SETTINGS — V67 HARD TOP FLOW FIX
 *
 * Fixes:
 * - huge vertical gap
 * - settings workspace pushed to bottom
 * - layout-v27 margin:auto conflict
 *
 * Desktop only.
 * ============================================================
 */

@media (min-width: 1200px) {


  /* ==========================================================
     1. ACTIVE SETTINGS SCREEN
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings.active,

  html.noytrix-subpage-v27
  #screen-settings.noytrix-active-screen-v27 {

    display: block !important;

    position: relative !important;

    width: 100% !important;
    max-width: 1320px !important;

    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    margin:
      0 auto
      !important;

    padding:
      8px 0 70px
      !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    align-content: start !important;
    justify-content: start !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* ==========================================================
     2. HIDDEN SETTINGS STAYS HIDDEN
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings:not(.active):not(.noytrix-active-screen-v27) {

    display: none !important;
  }


  /* ==========================================================
     3. THIS IS THE IMPORTANT FIX
     layout-v27 currently has:
     #screen-settings > *:first-child {
        margin:auto !important;
     }

     We override it with GREATER specificity.
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings
  > .settings-page-header:first-child {

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin:
      6px 0 18px
      !important;

    padding: 0 !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* Extra hard override against ANY first-child rule */

  html.noytrix-subpage-v27
  body
  #screen-settings
  > *:first-child {

    margin-top: 6px !important;
    margin-right: 0 !important;
    margin-bottom: 18px !important;
    margin-left: 0 !important;
  }


  /* ==========================================================
     4. HEADER NORMAL FLOW
     ========================================================== */

  #screen-settings .settings-page-header {

    display: flex !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 22px !important;

    position: relative !important;

    float: none !important;

    clear: both !important;

    transform: none !important;
  }


  #screen-settings .settings-page-tools {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin:
      0 0 0 auto
      !important;

    transform: none !important;
  }


  /* ==========================================================
     5. WORKSPACE MUST START IMMEDIATELY UNDER HEADER
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings
  .settings-workspace {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display: grid !important;

    grid-template-columns:
      238px
      minmax(0, 1fr)
      !important;

    grid-template-rows:
      auto
      !important;

    gap: 18px !important;

    align-items: start !important;
    align-content: start !important;

    justify-items: stretch !important;
    justify-content: stretch !important;

    transform: none !important;

    float: none !important;

    clear: both !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ==========================================================
     6. LEFT MENU
     ========================================================== */

  #screen-settings .settings-section-nav {

    position: sticky !important;

    top: 16px !important;

    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    align-self: start !important;

    margin: 0 !important;

    transform: none !important;
  }


  /* ==========================================================
     7. RIGHT CONTENT
     ========================================================== */

  #screen-settings .settings-main {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    align-self: start !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     8. PANELS
     ========================================================== */

  #screen-settings .settings-panel {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     9. REMOVE ANY ACCIDENTAL SPACER BEHAVIOUR
     ========================================================== */

  #screen-settings .settings-page-header
  + .settings-workspace {

    margin-top: 0 !important;
  }


  #screen-settings .settings-page-header::after,
  #screen-settings .settings-workspace::before {

    margin: 0 !important;
  }

}


/* ============================================================
   SMALLER DESKTOP
   ============================================================ */

@media (min-width: 1200px) and (max-width: 1450px) {

  html.noytrix-subpage-v27
  #screen-settings.active,

  html.noytrix-subpage-v27
  #screen-settings.noytrix-active-screen-v27 {

    width:
      calc(100% - 28px)
      !important;

    max-width:
      calc(100vw - 280px)
      !important;
  }


  html.noytrix-subpage-v27
  #screen-settings
  .settings-workspace {

    grid-template-columns:
      210px
      minmax(0, 1fr)
      !important;

    gap: 14px !important;
  }

}


/* nx-settings-clean-v68.css */
/*
 * ============================================================
 * NOYTRIX SETTINGS — CLEAN LAYOUT V68
 *
 * REMOVE:
 * - General / Checks / Sync and data / Privacy / Account nav
 * - Header language selector
 * - Security service status
 *
 * RESULT:
 * - Settings title stays
 * - Settings panels use full width
 * - No empty left column
 *
 * Desktop only.
 * ============================================================
 */

@media (min-width: 1200px) {


  /* ==========================================================
     1. REMOVE TOP-RIGHT SETTINGS TOOLS COMPLETELY
     EN + Security service status
     ========================================================== */

  #screen-settings .settings-page-tools {

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;
    pointer-events: none !important;
  }


  /* Extra protection in case individual controls have
     stronger CSS elsewhere */

  #screen-settings .settings-header-select,
  #screen-settings .settings-page-tools select,
  #screen-settings .settings-page-tools .live-pill,
  #screen-settings .settings-page-tools .engine-status,
  #screen-settings .settings-page-tools [class*="status"] {

    display: none !important;
  }


  /* ==========================================================
     2. HEADER NOW CONTAINS ONLY TITLE/SUBTITLE
     ========================================================== */

  #screen-settings .settings-page-header {

    width: 100% !important;

    display: block !important;

    margin:
      6px 0 18px
      !important;

    padding: 0 !important;

    min-height: 0 !important;

    box-sizing: border-box !important;
  }


  #screen-settings .settings-page-header > div:first-child {

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
  }


  /* ==========================================================
     3. REMOVE LEFT SETTINGS NAV COMPLETELY
     ========================================================== */

  #screen-settings .settings-section-nav {

    display: none !important;

    position: static !important;

    width: 0 !important;
    max-width: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;
    pointer-events: none !important;
  }


  #screen-settings .settings-section-nav * {

    display: none !important;
  }


  /* ==========================================================
     4. WORKSPACE BECOMES ONE FULL-WIDTH COLUMN
     ========================================================== */

  html.noytrix-subpage-v27
  #screen-settings
  .settings-workspace,

  #screen-settings .settings-workspace {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    grid-template-rows:
      auto
      !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: start !important;
    align-content: start !important;

    justify-items: stretch !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ==========================================================
     5. MAIN SETTINGS CONTENT FULL WIDTH
     ========================================================== */

  #screen-settings .settings-main {

    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    gap: 12px !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     6. PANELS USE WHOLE AVAILABLE WIDTH
     ========================================================== */

  #screen-settings .settings-panel {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     7. LANGUAGE & REGION
     Nice balanced layout
     ========================================================== */

  #screen-settings .settings-fields-three {

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      !important;

    gap: 16px !important;

    width: 100% !important;
  }


  /* ==========================================================
     8. APPEARANCE
     ========================================================== */

  #screen-settings .appearance-controls {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      !important;

    gap: 22px !important;

    width: 100% !important;

    align-items: end !important;
  }


  /* ==========================================================
     9. DEFAULT CHECKS
     ========================================================== */

  #screen-settings .settings-scan-grid {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(260px, .75fr)
      !important;

    gap: 28px !important;

    width: 100% !important;
  }


  /* ==========================================================
     10. BEHAVIOUR AND DATA
     ========================================================== */

  #screen-settings .settings-data-panel {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, .8fr)
      !important;

    gap: 24px !important;

    width: 100% !important;
  }


  /* ==========================================================
     11. NO HORIZONTAL OVERFLOW
     ========================================================== */

  #screen-settings,
  #screen-settings .settings-workspace,
  #screen-settings .settings-main,
  #screen-settings .settings-panel {

    box-sizing: border-box !important;

    max-width: 100% !important;
  }


  #screen-settings .settings-panel > *,
  #screen-settings .settings-main > * {

    min-width: 0 !important;

    box-sizing: border-box !important;
  }

}


/* ============================================================
   SMALLER DESKTOP
   ============================================================ */

@media (min-width: 1200px) and (max-width: 1450px) {

  #screen-settings .settings-fields-three {

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }


  #screen-settings .appearance-controls {

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }


  #screen-settings .settings-scan-grid,
  #screen-settings .settings-data-panel {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(240px, .7fr)
      !important;
  }

}


/* nx-settings-controls-v69.css */
/*
 * ============================================================
 * NOYTRIX SETTINGS — CONTROLS V69
 *
 * Visual language based on Tracking custom dropdowns.
 *
 * - native selects stay in DOM for existing logic
 * - custom premium dropdown shown to user
 * - selected option has gold check
 * - dark floating menu
 * - Theme / Density use same visual system
 * - switches polished
 * - buttons polished
 *
 * Desktop only.
 * ============================================================
 */


/* Custom wrappers are desktop-only.
   Native selects remain visible on smaller screens. */

.nx-settings-select-v69 {
  display: none;
}

.nx-settings-select-menu-v69 {
  display: none;
}


@media (min-width: 1200px) {

  /* ==========================================================
     1. HIDE NATIVE SETTINGS SELECTS
     BUT KEEP THEM ALIVE FOR EXISTING JS
     ========================================================== */

  #screen-settings .settings-main select[data-nx-settings-dropdown-v69="1"] {
    display: none !important;
  }


  /* ==========================================================
     2. CUSTOM SELECT WRAPPER
     ========================================================== */

  #screen-settings .nx-settings-select-v69 {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     3. TRIGGER
     ========================================================== */

  #screen-settings .nx-settings-select-trigger-v69 {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 48px !important;
    min-height: 48px !important;

    padding:
      0 9px 0 16px
      !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 12px !important;

    border:
      1px solid
      rgba(72, 110, 158, .62)
      !important;

    border-radius:
      10px
      !important;

    background:
      linear-gradient(
        180deg,
        #0b203d 0%,
        #081a33 100%
      )
      !important;

    color:
      #f4f7ff
      !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      750 !important;

    line-height:
      1.15 !important;

    text-align:
      left !important;

    cursor:
      pointer !important;

    outline:
      none !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.015)
      !important;

    box-sizing:
      border-box !important;

    transition:
      border-color .15s ease,
      background .15s ease,
      box-shadow .15s ease
      !important;
  }


  #screen-settings
  .nx-settings-select-trigger-v69:hover {

    border-color:
      rgba(91, 142, 203, .82)
      !important;

    background:
      linear-gradient(
        180deg,
        #0d2547 0%,
        #091e39 100%
      )
      !important;
  }


  #screen-settings
  .nx-settings-select-v69.open
  .nx-settings-select-trigger-v69 {

    border-color:
      rgba(255, 190, 35, .92)
      !important;

    box-shadow:
      0 0 0 1px
      rgba(255, 190, 35, .12),
      0 0 18px
      rgba(255, 183, 26, .07)
      !important;
  }


  #screen-settings
  .nx-settings-select-trigger-v69:focus-visible {

    border-color:
      #ffbd2e
      !important;

    box-shadow:
      0 0 0 3px
      rgba(255, 189, 46, .14)
      !important;
  }


  /* ==========================================================
     4. SELECTED VALUE
     ========================================================== */

  #screen-settings .nx-settings-select-value-v69 {

    min-width: 0 !important;

    flex:
      1 1 auto
      !important;

    color:
      #f4f7ff
      !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;
  }


  /* ==========================================================
     5. CARET BOX — LIKE OTHER NOYTRIX DROPDOWNS
     ========================================================== */

  #screen-settings .nx-settings-select-caret-v69 {

    width: 30px !important;
    height: 30px !important;

    flex:
      0 0 30px
      !important;

    display:
      grid !important;

    place-items:
      center !important;

    border-radius:
      7px !important;

    background:
      rgba(255,255,255,.035)
      !important;

    color:
      #a9c2e5
      !important;

    font-size:
      15px !important;

    font-weight:
      900 !important;

    line-height:
      1 !important;

    transition:
      transform .15s ease,
      color .15s ease,
      background .15s ease
      !important;
  }


  #screen-settings
  .nx-settings-select-v69.open
  .nx-settings-select-caret-v69 {

    color:
      #ffbd2e
      !important;

    background:
      rgba(255, 189, 46, .10)
      !important;

    transform:
      rotate(180deg)
      !important;
  }


  /* ==========================================================
     6. SETTINGS PANELS — SAME VISUAL FAMILY
     ========================================================== */

  #screen-settings .settings-panel {

    border:
      1px solid
      rgba(53, 86, 130, .72)
      !important;

    border-radius:
      12px !important;

    background:
      linear-gradient(
        135deg,
        rgba(11, 31, 59, .97),
        rgba(6, 20, 42, .97)
      )
      !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.012)
      !important;

    overflow:
      visible !important;
  }


  #screen-settings .settings-panel h3 {

    color:
      #f4f7ff !important;

    font-weight:
      800 !important;
  }


  #screen-settings .settings-fields label,
  #screen-settings .settings-select-block,
  #screen-settings .settings-retention,
  #screen-settings .settings-control-label {

    color:
      #eaf1ff !important;

    font-size:
      13px !important;

    font-weight:
      750 !important;
  }


  #screen-settings .settings-hint,
  #screen-settings .settings-select-block small {

    color:
      #87a6d1 !important;

    font-size:
      12px !important;
  }


  /* ==========================================================
     7. THEME + INTERFACE DENSITY
     ========================================================== */

  #screen-settings #settingsTheme,
  #screen-settings #settingsDensity {

    width:
      100% !important;

    padding:
      4px !important;

    display:
      grid !important;

    gap:
      4px !important;

    border:
      1px solid
      rgba(72, 110, 158, .62)
      !important;

    border-radius:
      10px !important;

    background:
      #081a33 !important;

    box-sizing:
      border-box !important;

    overflow:
      hidden !important;
  }


  #screen-settings #settingsTheme {

    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      !important;
  }


  #screen-settings #settingsDensity {

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }


  #screen-settings #settingsTheme button,
  #screen-settings #settingsDensity button {

    appearance:
      none !important;

    min-width:
      0 !important;

    min-height:
      40px !important;

    padding:
      0 12px !important;

    border:
      1px solid transparent
      !important;

    border-radius:
      7px !important;

    background:
      transparent !important;

    color:
      #a9c0df !important;

    font:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      750 !important;

    cursor:
      pointer !important;

    transition:
      .15s ease !important;
  }


  #screen-settings #settingsTheme button:hover,
  #screen-settings #settingsDensity button:hover {

    color:
      #ffffff !important;

    background:
      rgba(255,255,255,.045)
      !important;
  }


  #screen-settings #settingsTheme button.active,
  #screen-settings #settingsDensity button.active,
  #screen-settings #settingsTheme button[aria-pressed="true"],
  #screen-settings #settingsDensity button[aria-pressed="true"] {

    color:
      #ffffff !important;

    border-color:
      rgba(255, 189, 46, .85)
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(255, 190, 40, .16),
        rgba(255, 181, 18, .08)
      )
      !important;

    box-shadow:
      inset 2px 0 0
      #ffbd2e
      !important;
  }


  /* ==========================================================
     8. TOGGLES
     ========================================================== */

  #screen-settings .toggle-setting {

    position:
      relative !important;

    min-width:
      0 !important;

    min-height:
      44px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      18px !important;

    color:
      #eaf1ff !important;

    font-size:
      13px !important;

    font-weight:
      700 !important;

    cursor:
      pointer !important;
  }


  #screen-settings .toggle-setting input {

    position:
      absolute !important;

    width:
      1px !important;

    height:
      1px !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;
  }


  #screen-settings .toggle-setting i {

    position:
      relative !important;

    width:
      46px !important;

    height:
      26px !important;

    flex:
      0 0 46px
      !important;

    border:
      1px solid
      rgba(77, 111, 155, .72)
      !important;

    border-radius:
      999px !important;

    background:
      #0a1c35 !important;

    box-sizing:
      border-box !important;

    transition:
      .16s ease !important;

    box-shadow:
      inset 0 1px 4px
      rgba(0,0,0,.25)
      !important;
  }


  #screen-settings .toggle-setting i::before {

    content:
      none !important;
  }


  #screen-settings .toggle-setting i::after {

    content:
      "" !important;

    position:
      absolute !important;

    top:
      3px !important;

    left:
      3px !important;

    width:
      18px !important;

    height:
      18px !important;

    border-radius:
      50% !important;

    background:
      #edf4ff !important;

    box-shadow:
      0 2px 6px
      rgba(0,0,0,.35)
      !important;

    transition:
      transform .16s ease
      !important;
  }


  #screen-settings
  .toggle-setting
  input:checked + i {

    border-color:
      rgba(41, 213, 125, .85)
      !important;

    background:
      #20c66c !important;

    box-shadow:
      0 0 12px
      rgba(32, 198, 108, .14)
      !important;
  }


  #screen-settings
  .toggle-setting
  input:checked + i::after {

    transform:
      translateX(20px)
      !important;
  }


  #screen-settings
  .toggle-setting
  input:focus-visible + i {

    box-shadow:
      0 0 0 3px
      rgba(255, 189, 46, .15)
      !important;
  }


  /* ==========================================================
     9. DETAIL SELECT BLOCK
     ========================================================== */

  #screen-settings .settings-select-block {

    min-width:
      0 !important;

    align-content:
      start !important;
  }


  /* ==========================================================
     10. RETENTION DROPDOWN
     ========================================================== */

  #screen-settings .settings-retention {

    width:
      100% !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(160px, 1fr)
      minmax(260px, 360px)
      !important;

    gap:
      16px !important;

    align-items:
      center !important;

    box-sizing:
      border-box !important;
  }


  /* ==========================================================
     11. SYNC STATE CARD
     ========================================================== */

  #screen-settings .settings-sync-state {

    border:
      1px solid
      rgba(67, 104, 150, .62)
      !important;

    border-radius:
      10px !important;

    background:
      rgba(4, 17, 36, .62)
      !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.015)
      !important;
  }


  /* ==========================================================
     12. FOOTER BUTTONS
     ========================================================== */

  #screen-settings .settings-footer .secondary-action,
  #screen-settings .settings-footer .primary-action {

    min-height:
      44px !important;

    padding:
      0 18px !important;

    border-radius:
      9px !important;

    font-size:
      13px !important;

    font-weight:
      800 !important;

    cursor:
      pointer !important;
  }


  #screen-settings .settings-footer .secondary-action {

    border:
      1px solid
      rgba(72, 110, 158, .62)
      !important;

    background:
      #081a33 !important;

    color:
      #eaf1ff !important;
  }


  #screen-settings .settings-footer .secondary-action:hover {

    border-color:
      rgba(97, 147, 207, .85)
      !important;

    background:
      #0c2241 !important;
  }


  #screen-settings .settings-footer .primary-action {

    border:
      1px solid
      #ffbd2e !important;

    background:
      linear-gradient(
        180deg,
        #ffd15b,
        #ffb821
      )
      !important;

    color:
      #061326 !important;

    box-shadow:
      0 8px 20px
      rgba(255, 180, 24, .12)
      !important;
  }


  #screen-settings .settings-footer .primary-action:hover {

    filter:
      brightness(1.035);
  }


  /* ==========================================================
     13. KEEP EVERYTHING INSIDE
     ========================================================== */

  #screen-settings .settings-fields > *,
  #screen-settings .appearance-controls > *,
  #screen-settings .settings-scan-grid > *,
  #screen-settings .settings-data-panel > * {

    min-width:
      0 !important;
  }

}


/* ============================================================
   FLOATING DROPDOWN MENU
   Appended to BODY so parent overflow can NEVER clip it.
   ============================================================ */

@media (min-width: 1200px) {

  .nx-settings-select-menu-v69 {

    position:
      fixed !important;

    z-index:
      2147483000 !important;

    display:
      grid !important;

    gap:
      4px !important;

    padding:
      8px !important;

    margin:
      0 !important;

    border:
      1px solid
      rgba(64, 104, 151, .82)
      !important;

    border-radius:
      12px !important;

    background:
      linear-gradient(
        180deg,
        #0b213e,
        #081b35
      )
      !important;

    box-shadow:
      0 18px 45px
      rgba(0, 0, 0, .48),
      inset 0 1px 0
      rgba(255,255,255,.025)
      !important;

    box-sizing:
      border-box !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain !important;
  }


  .nx-settings-select-menu-v69[hidden] {

    display:
      none !important;
  }


  /* ==========================================================
     MENU OPTION
     ========================================================== */

  .nx-settings-select-option-v69 {

    appearance:
      none !important;

    width:
      100% !important;

    min-height:
      44px !important;

    padding:
      5px 6px 5px 14px
      !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      12px !important;

    border:
      1px solid transparent
      !important;

    border-radius:
      8px !important;

    background:
      transparent !important;

    color:
      #b8cae5 !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      700 !important;

    line-height:
      1.2 !important;

    text-align:
      left !important;

    cursor:
      pointer !important;

    box-sizing:
      border-box !important;

    transition:
      background .12s ease,
      color .12s ease,
      border-color .12s ease
      !important;
  }


  .nx-settings-select-option-v69:hover,
  .nx-settings-select-option-v69:focus-visible {

    outline:
      none !important;

    color:
      #ffffff !important;

    background:
      rgba(255,255,255,.055)
      !important;

    border-color:
      rgba(85, 127, 180, .18)
      !important;
  }


  .nx-settings-select-option-v69.is-selected {

    color:
      #ffffff !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.075),
        rgba(255,255,255,.035)
      )
      !important;
  }


  .nx-settings-select-option-label-v69 {

    min-width:
      0 !important;

    flex:
      1 1 auto
      !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere !important;
  }


  /* ==========================================================
     GOLD CHECK BOX ON SELECTED OPTION
     ========================================================== */

  .nx-settings-select-option-check-v69 {

    width:
      30px !important;

    height:
      30px !important;

    flex:
      0 0 30px
      !important;

    display:
      grid !important;

    place-items:
      center !important;

    border-radius:
      7px !important;

    background:
      rgba(255,255,255,.035)
      !important;

    color:
      transparent !important;

    font-size:
      16px !important;

    font-weight:
      950 !important;
  }


  .nx-settings-select-option-v69.is-selected
  .nx-settings-select-option-check-v69 {

    color:
      #07152b !important;

    background:
      linear-gradient(
        180deg,
        #ffd354,
        #f5ad16
      )
      !important;

    box-shadow:
      0 5px 13px
      rgba(255, 179, 22, .13)
      !important;
  }


  .nx-settings-select-option-v69:disabled {

    opacity:
      .42 !important;

    cursor:
      default !important;
  }


  /* Scrollbar */

  .nx-settings-select-menu-v69::-webkit-scrollbar {

    width:
      7px;
  }


  .nx-settings-select-menu-v69::-webkit-scrollbar-track {

    background:
      transparent;
  }


  .nx-settings-select-menu-v69::-webkit-scrollbar-thumb {

    border-radius:
      99px;

    background:
      #28486d;
  }

}


/* ============================================================
   LIGHT THEME SAFETY
   ============================================================ */

@media (min-width: 1200px) {

  html[data-theme="light"]
  #screen-settings
  .nx-settings-select-trigger-v69 {

    background:
      #ffffff !important;

    color:
      #102443 !important;

    border-color:
      #9eafc6 !important;
  }


  html[data-theme="light"]
  #screen-settings
  .nx-settings-select-value-v69 {

    color:
      #102443 !important;
  }


  html[data-theme="light"]
  .nx-settings-select-menu-v69 {

    background:
      #f5f8fd !important;

    border-color:
      #9eafc6 !important;

    box-shadow:
      0 18px 40px
      rgba(20, 38, 68, .20)
      !important;
  }


  html[data-theme="light"]
  .nx-settings-select-option-v69 {

    color:
      #253c5e !important;
  }


  html[data-theme="light"]
  .nx-settings-select-option-v69:hover,

  html[data-theme="light"]
  .nx-settings-select-option-v69.is-selected {

    color:
      #102443 !important;

    background:
      #e2ebf7 !important;
  }

}


/* nx-legal-v70.css */
/*
 * ============================================================
 * NOYTRIX — LEGAL LINKS V70
 *
 * Privacy Policy + Terms & Conditions
 *
 * Used in:
 * 1. Main Settings screen
 * 2. User Profile -> Settings
 * ============================================================
 */


/* ============================================================
   SETTINGS — LEGAL BLOCK
   ============================================================ */

#screen-settings .nx-legal-settings-v70 {

  width:
    100%;

  margin:
    22px 0 0;

  padding:
    20px 0 0;

  border-top:
    1px solid
    rgba(67, 103, 148, .40);

  box-sizing:
    border-box;
}


#screen-settings .nx-legal-heading-v70 {

  margin:
    0 0 13px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


#screen-settings .nx-legal-heading-v70 small {

  color:
    #ffbd2e;

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .10em;
}


#screen-settings .nx-legal-heading-v70 strong {

  color:
    #f4f7ff;

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1.2;
}


#screen-settings .nx-legal-heading-v70 p {

  margin:
    0;

  max-width:
    760px;

  color:
    #8ea9cf;

  font-size:
    12px;

  font-weight:
    560;

  line-height:
    1.45;
}


/* ============================================================
   LEGAL LINKS GRID
   ============================================================ */

.nx-legal-links-v70 {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;

  box-sizing:
    border-box;
}


/* ============================================================
   LEGAL LINK CARD
   ============================================================ */

.nx-legal-link-v70 {

  position:
    relative;

  min-width:
    0;

  min-height:
    74px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    12px 14px;

  border:
    1px solid
    rgba(67, 104, 150, .58);

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      rgba(9, 29, 56, .92),
      rgba(5, 19, 39, .92)
    );

  color:
    inherit;

  text-decoration:
    none;

  box-sizing:
    border-box;

  overflow:
    hidden;

  transition:
    border-color .14s ease,
    background .14s ease,
    transform .14s ease,
    box-shadow .14s ease;
}


.nx-legal-link-v70:hover {

  border-color:
    rgba(255, 189, 46, .72);

  background:
    linear-gradient(
      135deg,
      rgba(15, 38, 68, .98),
      rgba(8, 25, 48, .98)
    );

  transform:
    translateY(-1px);

  box-shadow:
    0 9px 24px
    rgba(0, 0, 0, .13);
}


.nx-legal-link-v70:focus-visible {

  outline:
    none;

  border-color:
    #ffbd2e;

  box-shadow:
    0 0 0 3px
    rgba(255, 189, 46, .13);
}


/* ============================================================
   ICON
   ============================================================ */

.nx-legal-icon-v70 {

  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(255, 189, 46, .30);

  border-radius:
    9px;

  background:
    rgba(255, 189, 46, .07);

  color:
    #ffbd2e;

  font-size:
    17px;

  font-weight:
    900;

  line-height:
    1;

  box-sizing:
    border-box;
}


/* ============================================================
   TEXT
   ============================================================ */

.nx-legal-copy-v70 {

  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.nx-legal-copy-v70 strong {

  color:
    #f5f8ff;

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.18;
}


.nx-legal-copy-v70 span {

  color:
    #8fa9cd;

  font-size:
    11px;

  font-weight:
    560;

  line-height:
    1.3;
}


.nx-legal-arrow-v70 {

  margin-left:
    auto;

  flex:
    0 0 auto;

  color:
    #7593bd;

  font-size:
    18px;

  line-height:
    1;

  transition:
    color .14s ease,
    transform .14s ease;
}


.nx-legal-link-v70:hover
.nx-legal-arrow-v70 {

  color:
    #ffbd2e;

  transform:
    translateX(2px);
}


/* ============================================================
   PROFILE — LEGAL CARD
   ============================================================ */

.p70-profile-legal {

  width:
    100%;

  margin:
    16px 0 86px;

  padding:
    18px;

  border:
    1px solid
    rgba(56, 88, 130, .68);

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 29, 55, .97),
      rgba(5, 18, 37, .97)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.015);

  box-sizing:
    border-box;
}


.p70-profile-legal-head {

  margin:
    0 0 14px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.p70-profile-legal-head small {

  color:
    #ffbd2e;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .10em;

  line-height:
    1;
}


.p70-profile-legal-head h3 {

  margin:
    0;

  color:
    #f5f8ff;

  font-size:
    18px;

  font-weight:
    800;

  line-height:
    1.2;
}


.p70-profile-legal-head p {

  margin:
    0;

  max-width:
    720px;

  color:
    #8fa8cc;

  font-size:
    12px;

  font-weight:
    550;

  line-height:
    1.45;
}


/* ============================================================
   LIGHT THEME
   ============================================================ */

html[data-theme="light"]
#screen-settings
.nx-legal-link-v70,

html[data-theme="light"]
.p70-profile-legal {

  background:
    #ffffff;

  border-color:
    #acbdd3;
}


html[data-theme="light"]
.nx-legal-copy-v70 strong,

html[data-theme="light"]
.p70-profile-legal-head h3,

html[data-theme="light"]
#screen-settings
.nx-legal-heading-v70 strong {

  color:
    #102443;
}


html[data-theme="light"]
.nx-legal-copy-v70 span,

html[data-theme="light"]
.p70-profile-legal-head p,

html[data-theme="light"]
#screen-settings
.nx-legal-heading-v70 p {

  color:
    #637896;
}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width: 900px) {

  .nx-legal-links-v70 {

    grid-template-columns:
      1fr;
  }


  .p70-profile-legal {

    margin-bottom:
      30px;

    padding:
      15px;
  }

}


/* nx-sidebar-clean-v71.css */
/*
 * ============================================================
 * NOYTRIX — SIDEBAR CLEAN V71
 *
 * Remove duplicate "Check" navigation item.
 *
 * IMPORTANT:
 * - New check button stays
 * - Check screen stays
 * - Check functionality stays
 * - Only sidebar link is hidden
 * ============================================================
 */


/* Desktop sidebar */
.sidebar .nav-item[data-screen="check"],
.sidebar-nav .nav-item[data-screen="check"],
nav .nav-item[data-screen="check"] {
    display: none !important;
}


/*
 * Extra protection against inherited flex/grid sizing.
 */
.nav-item[data-screen="check"] {
    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/*
 * Do NOT touch the New check button.
 */
[data-new-check],
.new-check,
.new-check-button,
#newCheckButton {
    visibility: visible;
}


/* nx-guest-sidebar-v72.css */
/*
 * ============================================================
 * NOYTRIX — GUEST SIDEBAR V72
 *
 * Guest:
 *   My activity = hidden
 *
 * Signed in:
 *   My activity = visible
 *
 * Check screen / analytics screen are NOT deleted.
 * ============================================================
 */


/* ============================================================
   HIDE ACTIVITY ONLY WHEN JS MARKS USER AS GUEST
   ============================================================ */

body.nx-guest-v72
.nav-item[data-screen="analytics"] {

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/* ============================================================
   SIGNED-IN USER
   ============================================================ */

body.nx-user-v72
.nav-item[data-screen="analytics"] {

    display: flex !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    visibility: visible !important;

    pointer-events: auto !important;
}


/* ============================================================
   CHECK TAB REMAINS HIDDEN FROM V71
   ============================================================ */

.nav-item[data-screen="check"] {

    display: none !important;
}


/* nx-profile-full-v73.css */
/*
 * ============================================================
 * NOYTRIX — PROFILE FULL WIDTH V73
 *
 * - Profile fills available workspace
 * - No narrow centered container
 * - Small text significantly larger
 * - My activity profile tab removed
 *
 * Desktop only.
 * ============================================================
 */

@media (min-width: 1200px) {


  /* ==========================================================
     1. PROFILE SCREEN — FULL AVAILABLE WIDTH
     ========================================================== */

  body.p56-profile-open
  .nx-profile-screen-v73,

  body.p55-profile-open
  .nx-profile-screen-v73,

  .nx-profile-screen-v73 {

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 100% !important;

    margin:
      0 !important;

    padding:
      18px 18px 34px
      !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* ==========================================================
     2. REMOVE WIDTH LIMITS FROM PROFILE WRAPPERS
     ========================================================== */

  .nx-profile-screen-v73
  .nx-profile-width-v73 {

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * Common old/current profile wrappers.
   */

  .nx-profile-screen-v73
  [class*="profile-shell"],

  .nx-profile-screen-v73
  [class*="profile-wrap"],

  .nx-profile-screen-v73
  [class*="profile-main"],

  .nx-profile-screen-v73
  [class*="profile-content"],

  .nx-profile-screen-v73
  [class*="p55-profile"],

  .nx-profile-screen-v73
  [class*="p56-profile"],

  .nx-profile-screen-v73
  [class*="p57-profile"] {

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     3. PROFILE HEADER
     ========================================================== */

  .nx-profile-screen-v73
  .nx-profile-header-v73 {

    width: 100% !important;
    max-width: none !important;

    margin:
      0 0 16px
      !important;

    box-sizing: border-box !important;
  }


  .nx-profile-screen-v73
  .nx-profile-header-v73 h1,

  .nx-profile-screen-v73
  .nx-profile-header-v73 h2 {

    line-height:
      1.05 !important;
  }


  /*
   * Main Profile title.
   * Keep large — don't double it.
   */

  .nx-profile-screen-v73
  .nx-profile-header-v73 > h1,

  .nx-profile-screen-v73
  .nx-profile-header-v73 > h2 {

    font-size:
      38px !important;
  }


  /* ==========================================================
     4. PROFILE TOP TABS
     ========================================================== */

  .nx-profile-screen-v73
  .nx-profile-tabs-v73 {

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin:
      0 0 12px
      !important;

    display: flex !important;

    align-items: stretch !important;

    gap: 4px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  .nx-profile-screen-v73
  [data-p55-tab],

  .nx-profile-screen-v73
  [data-p56-tab] {

    min-width: 0 !important;

    min-height:
      42px !important;

    padding:
      0 14px
      !important;

    font-size:
      13px !important;

    font-weight:
      750 !important;

    line-height:
      1.1 !important;

    box-sizing:
      border-box !important;
  }


  /* ==========================================================
     5. REMOVE MY ACTIVITY TAB FROM PROFILE
     ========================================================== */

  .nx-profile-screen-v73
  [data-p55-tab="activity"],

  .nx-profile-screen-v73
  [data-p56-tab="activity"],

  .nx-profile-screen-v73
  [data-p55-tab="my-activity"],

  .nx-profile-screen-v73
  [data-p56-tab="my-activity"] {

    display: none !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;

    pointer-events: none !important;
  }


  /* ==========================================================
     6. PROFILE PANELS
     ========================================================== */

  .nx-profile-screen-v73
  [data-p55-panel],

  .nx-profile-screen-v73
  [data-p56-panel] {

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     7. BIGGER SMALL TEXT — PROFILE ONLY
     ========================================================== */

  .nx-profile-screen-v73 p {

    font-size:
      13px !important;

    line-height:
      1.38 !important;
  }


  .nx-profile-screen-v73 small {

    font-size:
      12px !important;

    line-height:
      1.32 !important;
  }


  .nx-profile-screen-v73 li {

    font-size:
      13px !important;

    line-height:
      1.35 !important;
  }


  .nx-profile-screen-v73 label {

    font-size:
      13px !important;

    line-height:
      1.3 !important;
  }


  .nx-profile-screen-v73 button {

    font-size:
      13px !important;

    line-height:
      1.15 !important;
  }


  /* ==========================================================
     8. CARD HEADINGS
     ========================================================== */

  .nx-profile-screen-v73 article h2,
  .nx-profile-screen-v73 article h3,
  .nx-profile-screen-v73 section h3,
  .nx-profile-screen-v73 aside h3 {

    font-size:
      18px !important;

    line-height:
      1.15 !important;
  }


  /* Account / plan big values */

  .nx-profile-screen-v73
  [data-p55-name],

  .nx-profile-screen-v73
  [data-p56-name],

  .nx-profile-screen-v73
  [data-p55-plan],

  .nx-profile-screen-v73
  [data-p56-plan],

  .nx-profile-screen-v73
  [data-p55-sub-plan],

  .nx-profile-screen-v73
  [data-p56-sub-plan] {

    font-size:
      21px !important;

    line-height:
      1.1 !important;
  }


  /* ==========================================================
     9. EMAIL / SECONDARY ACCOUNT TEXT
     ========================================================== */

  .nx-profile-screen-v73
  [data-p55-email],

  .nx-profile-screen-v73
  [data-p56-email],

  .nx-profile-screen-v73
  [data-p55-sub-email],

  .nx-profile-screen-v73
  [data-p56-sub-email] {

    font-size:
      12px !important;

    line-height:
      1.25 !important;
  }


  /* ==========================================================
     10. STATUS / EYEBROWS / SMALL LABELS
     ========================================================== */

  .nx-profile-screen-v73
  .eyebrow,

  .nx-profile-screen-v73
  [class*="eyebrow"],

  .nx-profile-screen-v73
  [class*="kicker"],

  .nx-profile-screen-v73
  [class*="label"] {

    font-size:
      11px !important;

    line-height:
      1.15 !important;
  }


  /* ==========================================================
     11. BUTTONS
     ========================================================== */

  .nx-profile-screen-v73
  button,

  .nx-profile-screen-v73
  .primary-action,

  .nx-profile-screen-v73
  .secondary-action {

    min-height:
      40px !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }


  /* ==========================================================
     12. CARDS — USE AVAILABLE WIDTH
     ========================================================== */

  .nx-profile-screen-v73 article,
  .nx-profile-screen-v73 aside {

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  .nx-profile-screen-v73
  [class*="grid"] {

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     13. TOP ACCOUNT CARD
     ========================================================== */

  .nx-profile-screen-v73
  [class*="account-card"],

  .nx-profile-screen-v73
  [class*="profile-account"] {

    max-width: none !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     14. REMOVE OLD CENTERING / MAX WIDTHS
     ========================================================== */

  .nx-profile-screen-v73 > * {

    max-width: none !important;

    box-sizing: border-box !important;
  }


  /* ==========================================================
     15. SAFETY — NO HORIZONTAL OVERFLOW
     ========================================================== */

  .nx-profile-screen-v73,
  .nx-profile-screen-v73 * {

    box-sizing: border-box;
  }


}


/* ============================================================
   LARGE DESKTOP
   Use almost every available pixel.
   ============================================================ */

@media (min-width: 1500px) {

  .nx-profile-screen-v73 {

    padding:
      14px 16px 30px
      !important;
  }


  .nx-profile-screen-v73
  [data-p55-tab],

  .nx-profile-screen-v73
  [data-p56-tab] {

    font-size:
      14px !important;
  }


  .nx-profile-screen-v73 p {

    font-size:
      14px !important;
  }


  .nx-profile-screen-v73 small {

    font-size:
      12px !important;
  }

}


/* nx-profile-inset-v78.css */
/*
 * ============================================================
 * NOYTRIX PROFILE — INSET FULLSCREEN V78
 *
 * Exact outer gap:
 *   top    = 0.2cm
 *   right  = 0.2cm
 *   bottom = 0.2cm
 *   left   = sidebar edge + 0.2cm
 *
 * 0.2cm ~= 7.56px on standard CSS rendering.
 * ============================================================
 */


/* ============================================================
   PROFILE OPEN
   ============================================================ */

body.nx-profile-v78-open {
    overflow: hidden !important;
}


/* ============================================================
   HIDE GLOBAL TOP LANGUAGE / PROFILE
   ============================================================ */

body.nx-profile-v78-open
.nx-v78-hide-top {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    overflow: hidden !important;
}


/* ============================================================
   PROFILE ROOT
   left is set by JS:
   sidebarRight + 0.2cm
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-screen-v73.nx-profile-v78-root {

    position: fixed !important;

    top: 0.2cm !important;
    right: 0.2cm !important;
    bottom: 0.2cm !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      0 0 14px
      !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    z-index: 10000 !important;

    background:
      #020d1d !important;

    border-radius:
      8px !important;
}


/* ============================================================
   PROFILE HEADER
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-header-v73 {

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
      14px 16px 12px
      !important;

    box-sizing: border-box !important;
}


/* ============================================================
   PROFILE TABS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-tabs-v73 {

    width: 100% !important;
    max-width: none !important;

    margin:
      0 0 8px
      !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


body.nx-profile-v78-open
.nx-profile-v78-root
[data-p55-tab],

body.nx-profile-v78-open
.nx-profile-v78-root
[data-p56-tab] {

    flex:
      1 1 0
      !important;

    width:
      auto !important;

    min-width:
      0 !important;

    min-height:
      42px !important;
}


/* ============================================================
   PANELS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
[data-p55-panel],

body.nx-profile-v78-open
.nx-profile-v78-root
[data-p56-panel] {

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   REMOVE OLD WIDTH LIMITS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-width-v73,

body.nx-profile-v78-open
.nx-profile-v78-root
[class*="profile-shell"],

body.nx-profile-v78-open
.nx-profile-v78-root
[class*="profile-wrap"],

body.nx-profile-v78-open
.nx-profile-v78-root
[class*="profile-content"],

body.nx-profile-v78-open
.nx-profile-v78-root
[class*="profile-main"],

body.nx-profile-v78-open
.nx-profile-v78-root
[class*="p55-profile"],

body.nx-profile-v78-open
.nx-profile-v78-root
[class*="p56-profile"],

body.nx-profile-v78-open
.nx-profile-v78-root
[class*="p57-profile"] {

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   PROFILE GRIDS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
[class*="grid"] {

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   CARDS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root article,

body.nx-profile-v78-open
.nx-profile-v78-root aside,

body.nx-profile-v78-open
.nx-profile-v78-root section {

    max-width: none !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   FIRST LEVEL CONTENT
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root > * {

    max-width: none !important;

    box-sizing: border-box !important;
}


/* ============================================================
   BOTTOM BLOCK
   Make sure final notice doesn't leave artificial empty space.
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
[data-p55-panel="overview"],

body.nx-profile-v78-open
.nx-profile-v78-root
[data-p56-panel="overview"] {

    min-height:
      calc(100% - 58px)
      !important;
}


/* ============================================================
   SAFETY
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root,

body.nx-profile-v78-open
.nx-profile-v78-root * {

    box-sizing: border-box;
}


/* nx-profile-balance-v79.css */
/*
 * ============================================================
 * NOYTRIX PROFILE — INTERNAL BALANCE V79
 *
 * V78 GEOMETRY IS NOT TOUCHED.
 *
 * Changes:
 * - ecosystem grows vertically
 * - product cards become larger
 * - Open activity aligns with Security
 * - bottom keys notice icon is fixed
 * ============================================================
 */


/* ============================================================
   1. OVERVIEW USES AVAILABLE PROFILE HEIGHT
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-overview.nx-p79-active:not([hidden]) {

    width: 100% !important;

    min-height:
      calc(100% - 58px)
      !important;

    height:
      calc(100% - 58px)
      !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

    box-sizing: border-box !important;
}


/* ============================================================
   2. TOP ACTIVITY + SECURITY CARDS
   SAME HEIGHT / SAME INTERNAL BEHAVIOUR
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-equal-card {

    display: flex !important;

    flex-direction: column !important;

    min-height: 205px !important;

    height: 100% !important;

    box-sizing: border-box !important;
}


/*
 * Child that contains the action button is pushed
 * to the bottom of the card.
 */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-action-wrap {

    width: 100% !important;

    margin-top: auto !important;

    padding-top: 10px !important;

    box-sizing: border-box !important;
}


body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-action-button {

    width: 100% !important;

    min-height: 44px !important;
    height: 44px !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding:
      0 14px
      !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   3. ECOSYSTEM — GROW INTO FREE SPACE
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-ecosystem {

    width: 100% !important;

    min-width: 0 !important;

    /*
     * This is the important part:
     * consume remaining vertical space.
     */

    flex:
      1 1 auto
      !important;

    min-height: 250px !important;

    display: flex !important;

    flex-direction: column !important;

    padding:
      14px
      !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* Heading slightly larger */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-ecosystem h2,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-ecosystem h3 {

    font-size: 20px !important;

    line-height: 1.15 !important;
}


/* ============================================================
   4. PRODUCT ROW
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-row {

    width: 100% !important;

    min-width: 0 !important;

    flex:
      1 1 auto
      !important;

    min-height: 105px !important;

    display: grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr))
      !important;

    grid-auto-rows:
      minmax(94px, 1fr)
      !important;

    gap: 10px !important;

    align-items: stretch !important;

    margin:
      12px 0 10px
      !important;

    box-sizing: border-box !important;
}


/* ============================================================
   5. BIGGER PRODUCT CARDS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card {

    width: 100% !important;

    min-width: 0 !important;

    height: 100% !important;

    min-height: 94px !important;

    padding:
      13px 14px
      !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    box-sizing: border-box !important;

    border-radius: 10px !important;
}


/*
 * Product icon boxes.
 */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card
svg {

    max-width: 22px !important;
    max-height: 22px !important;
}


/*
 * Product text.
 */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card strong {

    font-size: 13px !important;

    line-height: 1.15 !important;
}


body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card small,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card span {

    line-height: 1.2 !important;
}


/* ============================================================
   6. MANAGE CONNECTIONS BUTTON
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-ecosystem
.nx-p79-manage-connections {

    width: 100% !important;

    min-height: 46px !important;
    height: 46px !important;

    flex:
      0 0 46px
      !important;

    margin-top: auto !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   7. BOTTOM "YOUR KEYS STAY YOURS"
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-keys-note {

    width: 100% !important;

    min-height: 58px !important;

    flex:
      0 0 58px
      !important;

    margin-top: 0 !important;

    padding:
      9px 14px
      !important;

    display: flex !important;

    align-items: center !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* ============================================================
   8. SHIELD ICON FIX
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-keys-icon {

    position: relative !important;

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    max-width: 34px !important;
    max-height: 34px !important;

    flex:
      0 0 34px
      !important;

    margin-right: 10px !important;

    display: grid !important;

    place-items: center !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/*
 * Force shield/check SVG completely inside its box.
 */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-keys-icon svg {

    display: block !important;

    width: 19px !important;
    height: 19px !important;

    min-width: 19px !important;
    min-height: 19px !important;

    max-width: 19px !important;
    max-height: 19px !important;

    margin: 0 !important;

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform:
      translate(0, 0)
      !important;

    overflow: hidden !important;
}


/*
 * Any check or nested icon also stays centered.
 */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-keys-icon
svg * {

    transform-origin:
      center !important;
}


/* ============================================================
   9. KEYS TEXT
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-keys-note strong {

    font-size: 12px !important;

    line-height: 1.15 !important;
}


body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-keys-note small,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-keys-note p {

    font-size: 10px !important;

    line-height: 1.2 !important;
}


/* ============================================================
   10. SAFETY
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-ecosystem *,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-equal-card *,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-keys-note * {

    box-sizing: border-box;
}


/* nx-profile-polish-v80.css */
/*
 * ============================================================
 * NOYTRIX PROFILE — POLISH V80
 *
 * V78 outer geometry stays.
 * V79 ecosystem sizing stays.
 *
 * Fix:
 * - profile tabs stay inside their border
 * - bigger ecosystem icons
 * - bigger ecosystem labels
 * - Open activity = same bottom line as Security
 * ============================================================
 */


/* ============================================================
   1. TOP PROFILE TABS — HARD CONTAINMENT
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-tabs-v73 {

    width: 100% !important;

    min-width: 0 !important;

    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;

    padding: 4px !important;

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    margin:
      0 0 8px
      !important;

    border-radius: 10px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* Every tab must stay INSIDE parent */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-tabs-v73
[data-p55-tab],

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-tabs-v73
[data-p56-tab] {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex:
      1 1 0
      !important;

    width: auto !important;

    min-width: 0 !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    margin: 0 !important;

    padding:
      0 10px
      !important;

    border-radius: 7px !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}


/* Active tab also stays inside */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-tabs-v73
[data-p55-tab].active,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-tabs-v73
[data-p56-tab].active,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-tabs-v73
[data-p55-tab][aria-selected="true"],

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-profile-tabs-v73
[data-p56-tab][aria-selected="true"] {

    top: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform: none !important;

    border-radius: 7px !important;

    box-shadow:
      inset 0 0 0 1px
      rgba(76, 145, 210, .25)
      !important;
}


/* ============================================================
   2. ACTIVITY + SECURITY CARDS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p80-action-card {

    position: relative !important;

    min-height: 205px !important;

    /*
     * Reserve exact space for bottom button.
     */
    padding-bottom: 70px !important;

    box-sizing: border-box !important;
}


/* ============================================================
   3. ACTION WRAPPERS — SAME ABSOLUTE BOTTOM POSITION
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p80-action-wrap {

    position: absolute !important;

    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   4. OPEN ACTIVITY + SECURITY BUTTONS
   EXACT SAME HEIGHT
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p80-action-button {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;

    padding:
      0 14px
      !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    transform: none !important;

    box-sizing: border-box !important;
}


/* ============================================================
   5. ECOSYSTEM PRODUCT ROW
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-row {

    min-height: 120px !important;

    grid-auto-rows:
      minmax(108px, 1fr)
      !important;

    gap: 10px !important;
}


/* ============================================================
   6. BIGGER PRODUCT CARDS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card {

    min-height: 108px !important;

    padding:
      16px 18px
      !important;

    gap: 14px !important;

    align-items: center !important;

    overflow: hidden !important;
}


/* ============================================================
   7. PRODUCT ICON BOX
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p80-product-icon {

    position: relative !important;

    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;
    min-height: 44px !important;

    max-width: 44px !important;
    max-height: 44px !important;

    flex:
      0 0 44px
      !important;

    display: grid !important;

    place-items: center !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* Bigger actual icon */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p80-product-icon svg {

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    max-width: 24px !important;
    max-height: 24px !important;

    margin: 0 !important;

    display: block !important;

    transform: none !important;
}


/* ============================================================
   8. PRODUCT LABEL
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p80-product-label {

    font-size: 16px !important;

    font-weight: 800 !important;

    line-height: 1.1 !important;

    letter-spacing: -.01em !important;

    white-space: nowrap !important;
}


/* Status: Current / Manage / Business */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p80-product-status {

    font-size: 10px !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    margin-left: 6px !important;

    white-space: nowrap !important;
}


/* ============================================================
   9. FALLBACK TYPOGRAPHY FOR PRODUCT CARDS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card strong {

    font-size: 16px !important;

    font-weight: 800 !important;

    line-height: 1.1 !important;
}


body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card small {

    font-size: 10px !important;

    line-height: 1.15 !important;
}


/* ============================================================
   10. MANAGE CONNECTIONS
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-manage-connections {

    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;

    font-size: 14px !important;

    font-weight: 800 !important;
}


/* ============================================================
   11. ECOSYSTEM TITLE
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-ecosystem h2,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-ecosystem h3 {

    font-size: 21px !important;

    font-weight: 800 !important;

    line-height: 1.12 !important;
}


/* ============================================================
   12. SAFETY
   ============================================================ */

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p80-action-card *,

body.nx-profile-v78-open
.nx-profile-v78-root
.nx-p79-product-card * {

    box-sizing: border-box;
}


/* nx-profile-source-v82.css */
/*
 * ============================================================
 * NOYTRIX PROFILE — REAL SOURCE FIX V82
 *
 * These classes are inserted directly into profile-v56.js.
 *
 * No runtime wrapper guessing.
 * No coordinate calculations.
 * No timers.
 * ============================================================
 */

@media (min-width: 1200px) {


    /* ========================================================
       THE TWO REAL OVERVIEW CARDS
       ======================================================== */

    body.nx-profile-v78-open
    #screen-profile-v56
    .p56-overview-main {

        align-items:
            stretch !important;
    }


    body.nx-profile-v78-open
    #screen-profile-v56
    .p56-overview-main
    .p82-action-card {

        position:
            relative !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-self:
            stretch !important;

        height:
            100% !important;

        min-height:
            0 !important;

        /*
         * Kill V80's artificial 70px bottom padding.
         */
        padding-bottom:
            14px !important;

        box-sizing:
            border-box !important;
    }



    /* ========================================================
       REMOVE OLD V80/V81 POSITIONING
       ======================================================== */

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-card.nx-p80-action-card,

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-card.nx-p81-action-card {

        position:
            relative !important;

        padding-bottom:
            14px !important;
    }



    /* ========================================================
       REAL BUTTON WRAPPER
       This is what was wrong before.
       ======================================================== */

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-card
    .p82-action-slot {

        position:
            static !important;

        inset:
            auto !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            auto 0 0
            !important;

        padding:
            10px 0 0
            !important;

        transform:
            none !important;

        box-sizing:
            border-box !important;
    }


    /*
     * V80 may keep adding its runtime class.
     * V82 always wins.
     */

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-slot.nx-p80-action-wrap,

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-slot.nx-p81-neutral-wrap {

        position:
            static !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            100% !important;

        height:
            auto !important;

        margin:
            auto 0 0
            !important;

        padding:
            10px 0 0
            !important;

        transform:
            none !important;
    }



    /* ========================================================
       BUTTON DIRECTLY INSIDE CARD FALLBACK
       ======================================================== */

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-card
    > .p82-action-direct {

        margin-top:
            auto !important;
    }



    /* ========================================================
       BOTH REAL BUTTONS
       ======================================================== */

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-card
    .p82-action-button {

        position:
            static !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            100% !important;

        height:
            44px !important;

        min-height:
            44px !important;

        max-height:
            44px !important;

        margin:
            0 !important;

        padding:
            0 14px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        flex:
            0 0 44px
            !important;

        transform:
            none !important;

        font-size:
            14px !important;

        font-weight:
            800 !important;

        line-height:
            1 !important;

        box-sizing:
            border-box !important;
    }



    /* ========================================================
       HARD OVERRIDE V80 ABSOLUTE ACTION BUTTON
       ======================================================== */

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-button.nx-p80-action-button,

    body.nx-profile-v78-open
    #screen-profile-v56
    .p82-action-button.nx-p81-action-button {

        position:
            static !important;

        inset:
            auto !important;

        width:
            100% !important;

        height:
            44px !important;

        margin:
            0 !important;

        transform:
            none !important;
    }

}


/* nx-settings-v100.css */
/*
============================================================
NOYTRIX SETTINGS V100
FINAL SETTINGS UI
============================================================
*/


/* ============================================================
   REAL SETTINGS PANEL
   ============================================================ */

#screen-profile-v56
[data-p56-panel="settings"][data-nx-settings-v100],

#screen-profile-v56
[data-p56-panel="settings"][data-nx-settings-v100="1"] {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        100% !important;

    min-height:
        0 !important;

    padding:
        4px 5px 22px !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    box-sizing:
        border-box !important;
}


/* ============================================================
   PAGE
   ============================================================ */

.nx100-page {

    width:
        100%;

    max-width:
        1180px;

    margin:
        0 auto;

    padding:
        6px 4px 24px;

    box-sizing:
        border-box;
}


/* ============================================================
   HEADER
   ============================================================ */

.nx100-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        18px;

    padding:
        2px 2px 4px;
}


.nx100-eyebrow {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #ffbd24;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .12em;
}


.nx100-header h1 {

    margin:
        0;

    color:
        #f5f8ff;

    font-size:
        27px;

    font-weight:
        820;

    letter-spacing:
        -.035em;

    line-height:
        1.1;
}


.nx100-header p {

    margin:
        7px 0 0;

    color:
        #869bb5;

    font-size:
        13px;

    font-weight:
        570;

    line-height:
        1.4;
}


.nx100-save-state {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        9px;

    padding:
        7px 10px;

    color:
        #7e95ae;

    font-size:
        10px;

    font-weight:
        700;

    border:
        1px solid #1b3c5d;

    border-radius:
        999px;

    background:
        rgba(6, 22, 42, .72);
}


.nx100-save-state span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #59748f;
}


.nx100-save-state.is-saved {

    color:
        #8be7ba;

    border-color:
        rgba(56, 177, 119, .32);
}


.nx100-save-state.is-saved span {

    background:
        #42d48d;

    box-shadow:
        0 0 10px rgba(66, 212, 141, .45);
}


/* ============================================================
   MAIN CARD
   ============================================================ */

.nx100-card {

    width:
        100%;

    margin-bottom:
        14px;

    overflow:
        hidden;

    border:
        1px solid #173d60;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 27, 51, .97),
            rgba(5, 20, 39, .98)
        );

    box-shadow:
        0 14px 38px rgba(0, 0, 0, .14);
}


.nx100-card-head {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        16px 18px;

    border-bottom:
        1px solid rgba(35, 78, 113, .55);
}


.nx100-section-icon {

    flex:
        0 0 auto;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    color:
        #ffbd24;

    font-size:
        15px;

    font-weight:
        900;

    border:
        1px solid rgba(255, 189, 36, .26);

    border-radius:
        9px;

    background:
        rgba(255, 189, 36, .055);
}


.nx100-card-head h2 {

    margin:
        0;

    color:
        #edf4ff;

    font-size:
        15px;

    font-weight:
        790;

    line-height:
        1.2;
}


.nx100-card-head p {

    margin:
        3px 0 0;

    color:
        #7087a1;

    font-size:
        10px;

    font-weight:
        600;
}


/* ============================================================
   SETTINGS ROW
   ============================================================ */

.nx100-row {

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        13px 18px;

    border-bottom:
        1px solid rgba(28, 65, 97, .46);

    box-sizing:
        border-box;
}


.nx100-row:last-child {

    border-bottom:
        0;
}


.nx100-row-copy {

    min-width:
        0;

    flex:
        1 1 auto;
}


.nx100-row-copy strong {

    display:
        block;

    color:
        #e8f0fb;

    font-size:
        12px;

    font-weight:
        760;

    line-height:
        1.3;
}


.nx100-row-copy span {

    display:
        block;

    max-width:
        610px;

    margin-top:
        4px;

    color:
        #7289a4;

    font-size:
        10px;

    font-weight:
        570;

    line-height:
        1.35;
}


/* ============================================================
   SELECT
   ============================================================ */

.nx100-select-wrap,

.nx100-select-slot {

    flex:
        0 0 210px;
}


.nx100-select,

.nx100-select-slot select,

.nx100-native-language {

    width:
        100% !important;

    min-width:
        180px !important;

    height:
        38px !important;

    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 34px 0 12px !important;

    color:
        #e8f1fc !important;

    font-size:
        11px !important;

    font-weight:
        690 !important;

    border:
        1px solid #24547d !important;

    border-radius:
        9px !important;

    outline:
        none !important;

    background-color:
        #081e38 !important;

    box-shadow:
        none !important;

    cursor:
        pointer !important;

    box-sizing:
        border-box !important;
}


.nx100-select:focus,

.nx100-select-slot select:focus {

    border-color:
        #408dbe !important;

    box-shadow:
        0 0 0 3px rgba(64, 141, 190, .10) !important;
}


/* ============================================================
   SWITCH
   ============================================================ */

.nx100-switch {

    flex:
        0 0 auto;

    width:
        42px;

    height:
        23px;

    position:
        relative;

    padding:
        0;

    border:
        1px solid #2a4b68;

    border-radius:
        999px;

    background:
        #0a1d30;

    cursor:
        pointer;

    transition:
        background .16s ease,
        border-color .16s ease;
}


.nx100-switch span {

    width:
        17px;

    height:
        17px;

    position:
        absolute;

    top:
        2px;

    left:
        3px;

    border-radius:
        50%;

    background:
        #758aa1;

    transition:
        transform .16s ease,
        background .16s ease;
}


.nx100-switch.is-on {

    border-color:
        #3388bd;

    background:
        rgba(26, 111, 164, .38);
}


.nx100-switch.is-on span {

    transform:
        translateX(18px);

    background:
        #59beff;

    box-shadow:
        0 0 10px rgba(89, 190, 255, .32);
}


/* ============================================================
   LEGAL
   ============================================================ */

.nx100-link-row {

    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        12px 18px;

    color:
        inherit;

    text-decoration:
        none;

    border-bottom:
        1px solid rgba(28, 65, 97, .46);

    transition:
        background .14s ease;
}


.nx100-link-row:last-child {

    border-bottom:
        0;
}


.nx100-link-row:hover {

    background:
        rgba(20, 67, 103, .14);
}


.nx100-link-row strong {

    display:
        block;

    color:
        #e7effa;

    font-size:
        12px;

    font-weight:
        750;
}


.nx100-link-row small {

    display:
        block;

    margin-top:
        4px;

    color:
        #7088a3;

    font-size:
        10px;

    font-weight:
        570;
}


.nx100-link-row b {

    color:
        #53b8f5;

    font-size:
        17px;

    font-weight:
        750;
}


/* ============================================================
   RESET
   ============================================================ */

.nx100-footer {

    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        13px 17px;

    border:
        1px solid rgba(104, 62, 69, .5);

    border-radius:
        12px;

    background:
        rgba(37, 15, 23, .18);
}


.nx100-footer strong {

    display:
        block;

    color:
        #d9e2ee;

    font-size:
        11px;

    font-weight:
        720;
}


.nx100-footer span {

    display:
        block;

    margin-top:
        3px;

    color:
        #73889e;

    font-size:
        9px;

    font-weight:
        570;
}


.nx100-reset {

    flex:
        0 0 auto;

    min-width:
        82px;

    height:
        34px;

    padding:
        0 14px;

    color:
        #f1a5ad;

    font-size:
        10px;

    font-weight:
        760;

    border:
        1px solid rgba(185, 75, 88, .48);

    border-radius:
        8px;

    background:
        rgba(110, 29, 40, .16);

    cursor:
        pointer;
}


.nx100-reset:hover {

    color:
        #ffc0c6;

    border-color:
        rgba(221, 85, 101, .72);

    background:
        rgba(132, 34, 48, .26);
}


/* ============================================================
   REDUCED MOTION — REAL SETTING
   ============================================================ */

html.nx-v100-reduce-motion *,
html.nx-v100-reduce-motion *::before,
html.nx-v100-reduce-motion *::after {

    animation-duration:
        .01ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        .01ms !important;

    scroll-behavior:
        auto !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .nx100-header {

        display:
            block;
    }


    .nx100-save-state {

        width:
            max-content;

        margin-top:
            12px;
    }


    .nx100-row {

        align-items:
            flex-start;

        gap:
            15px;
    }


    .nx100-select-wrap,

    .nx100-select-slot {

        flex-basis:
            150px;
    }


    .nx100-page {

        padding-left:
            0;

        padding-right:
            0;
    }

}


/* nx-profile-settings-v104.css */
/*
============================================================
NOYTRIX PROFILE SETTINGS V104
REAL SETTINGS IN PROFILE
GUEST SETTINGS -> LOGIN
============================================================
*/


/* ============================================================
   SIDEBAR
   ============================================================ */


/*
 * Standalone Settings is gone for BOTH states.
 *
 * Authenticated:
 * settings are inside Profile.
 *
 * Guest:
 * Login replaces this item.
 */

.sidebar
.settings-nav-item {

    display:
        none !important;
}


/*
 * Login occupies exactly the same sidebar slot.
 */

.sidebar
.nx-login-nav-v104 {

    box-sizing:
        border-box !important;
}


body.nx104-authenticated
.sidebar
.nx-login-nav-v104 {

    display:
        none !important;
}


body.nx104-guest
.sidebar
.nx-login-nav-v104 {

    display:
        flex !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;
}


/* ============================================================
   GUEST
   ============================================================ */


/*
 * Guest cannot open Settings.
 */

body.nx104-guest
#screen-settings {

    display:
        none !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;
}


/*
 * Guest does not have Profile preferences either.
 */

body.nx104-guest
#screen-profile-v56
.nx103-settings {

    display:
        none !important;
}


/* ============================================================
   AUTHENTICATED PROFILE SETTINGS
   ============================================================ */


/*
 * V103's own "Preferences" heading is removed.
 *
 * The REAL Settings page already has its own:
 *
 * YOUR WORKSPACE
 * Settings
 * Make Noytrix work the way you prefer.
 */

body.nx104-authenticated
#screen-profile-v56
.nx104-real-settings-section
> .nx103-section-head {

    display:
        none !important;
}


body.nx104-authenticated
#screen-profile-v56
.nx104-real-settings-section {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        28px 0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    border-top:
        1px solid #173a59 !important;
}


/* ============================================================
   HOST
   ============================================================ */

#screen-profile-v56
.nx104-settings-host {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        18px 0 0 !important;

    overflow:
        visible !important;
}


/*
 * Old Profile-specific Settings implementation is not shown.
 *
 * It remains in DOM only for legacy compatibility.
 */

#screen-profile-v56
.nx104-settings-host
> .nx104-old-profile-settings {

    display:
        none !important;
}


/* ============================================================
   ORIGINAL #screen-settings
   ============================================================ */


/*
 * THIS IS THE ACTUAL ORIGINAL SETTINGS SCREEN.
 *
 * We only normalize its outer .screen container so that it
 * can live inside Profile.
 *
 * Everything INSIDE remains styled by the existing:
 *
 * nx-settings-layout-v66.css
 * nx-settings-flow-v67.css
 * nx-settings-clean-v68.css
 * nx-settings-controls-v69.css
 *
 * Therefore the UI stays one-to-one.
 */

body.nx104-authenticated
#screen-profile-v56
.nx104-settings-host
> #screen-settings.nx104-embedded-settings {

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    position:
        relative !important;

    inset:
        auto !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    transform:
        none !important;

    pointer-events:
        auto !important;

    box-sizing:
        border-box !important;
}


/*
 * Don't let generic inactive-screen rules hide embedded Settings.
 */

body.nx104-authenticated
#screen-profile-v56
#screen-settings.nx104-embedded-settings:not(.active),

body.nx104-authenticated
#screen-profile-v56
#screen-settings.nx104-embedded-settings[aria-hidden="true"] {

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    height:
        auto !important;

    max-height:
        none !important;

    pointer-events:
        auto !important;
}


/* ============================================================
   ONE PROFILE SCROLL
   ============================================================ */


/*
 * Settings itself must not create another vertical scroll.
 */

#screen-profile-v56
#screen-settings.nx104-embedded-settings,

#screen-profile-v56
#screen-settings.nx104-embedded-settings
.settings-workspace,

#screen-profile-v56
#screen-settings.nx104-embedded-settings
.settings-main {

    max-height:
        none !important;
}


/*
 * Preserve V103/V103.1 whole-profile scrolling.
 */

#screen-profile-v56[data-nx-profile-final="103"] {

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    #screen-profile-v56
    .nx104-settings-host {

        padding-top:
            14px !important;
    }

}


/* nx-profile-settings-only-v105.css */
/*
============================================================
NOYTRIX PROFILE V105.1
ONLY REAL SETTINGS
============================================================
*/


/* ============================================================
   HIDE OLD PROFILE CONTENT
   ============================================================ */

#screen-profile-v56
.nx105-profile-hidden,

.p56-screen
.nx105-profile-hidden {

    display:
        none !important;
}


/*
 * Extra hard protection.
 *
 * Once V105 is active, no old V103 Profile layout appears.
 */

#screen-profile-v56[data-nx-profile-settings-only="105"]
> .nx103-profile,

#screen-profile-v56[data-nx-profile-settings-only="105"]
> .nx102-profile,

.p56-screen[data-nx-profile-settings-only="105"]
> .nx103-profile,

.p56-screen[data-nx-profile-settings-only="105"]
> .nx102-profile {

    display:
        none !important;
}


/* ============================================================
   DO NOT FORCE PROFILE SCREEN DISPLAY
   ROUTER STILL OWNS SCREEN VISIBILITY
   ============================================================ */

#screen-profile-v56[data-nx-profile-settings-only="105"],

.p56-screen[data-nx-profile-settings-only="105"] {

    width:
        100% !important;

    max-width:
        none !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        12px 10px 80px !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    box-sizing:
        border-box !important;

    scrollbar-gutter:
        stable !important;
}


/* ============================================================
   SETTINGS HOST
   ============================================================ */

#screen-profile-v56
> .nx105-settings-only,

.p56-screen
> .nx105-settings-only {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        auto !important;

    min-height:
        max-content !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    box-sizing:
        border-box !important;
}


/* ============================================================
   ORIGINAL #screen-settings
   ============================================================ */

#screen-profile-v56
#screen-settings.nx105-real-settings,

.p56-screen
#screen-settings.nx105-real-settings {

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    position:
        relative !important;

    inset:
        auto !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    transform:
        none !important;

    pointer-events:
        auto !important;

    box-sizing:
        border-box !important;
}


/*
 * Generic screen-router CSS cannot hide embedded Settings.
 */

#screen-profile-v56
#screen-settings.nx105-real-settings:not(.active),

#screen-profile-v56
#screen-settings.nx105-real-settings[aria-hidden="true"],

.p56-screen
#screen-settings.nx105-real-settings:not(.active),

.p56-screen
#screen-settings.nx105-real-settings[aria-hidden="true"] {

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    height:
        auto !important;

    max-height:
        none !important;

    pointer-events:
        auto !important;
}


/* ============================================================
   PRESERVE ORIGINAL SETTINGS DESIGN
   ============================================================ */

/*
 * DO NOT redesign Settings here.
 *
 * Existing V66/V67/V68/V69 CSS remains responsible
 * for the exact Settings UI.
 *
 * Only remove fixed container limitations caused by
 * embedding it in Profile.
 */

#screen-profile-v56
#screen-settings
.settings-page-header,

#screen-profile-v56
#screen-settings
.settings-workspace,

#screen-profile-v56
#screen-settings
.settings-main,

#screen-profile-v56
#screen-settings
.settings-footer,

.p56-screen
#screen-settings
.settings-page-header,

.p56-screen
#screen-settings
.settings-workspace,

.p56-screen
#screen-settings
.settings-main,

.p56-screen
#screen-settings
.settings-footer {

    max-width:
        none !important;
}


#screen-profile-v56
#screen-settings
.settings-workspace,

#screen-profile-v56
#screen-settings
.settings-main,

.p56-screen
#screen-settings
.settings-workspace,

.p56-screen
#screen-settings
.settings-main {

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    overflow:
        visible !important;
}


/* ============================================================
   ONE SCROLL
   ============================================================ */

#screen-profile-v56[data-nx-profile-settings-only="105"],

.p56-screen[data-nx-profile-settings-only="105"] {

    scrollbar-width:
        thin;

    scrollbar-color:
        #245778 transparent;
}


#screen-profile-v56[data-nx-profile-settings-only="105"]::-webkit-scrollbar,

.p56-screen[data-nx-profile-settings-only="105"]::-webkit-scrollbar {

    width:
        8px;
}


#screen-profile-v56[data-nx-profile-settings-only="105"]::-webkit-scrollbar-thumb,

.p56-screen[data-nx-profile-settings-only="105"]::-webkit-scrollbar-thumb {

    background:
        #245778;

    border-radius:
        999px;
}



/* nx-profile-account-v106.css */
/*
============================================================
NOYTRIX PROFILE V106
ACCOUNT + REAL SETTINGS
============================================================
*/


/* ============================================================
   HIDE TOP RIGHT CONTROLS ONLY ON PROFILE
   ============================================================ */

body.p56-profile-open
.language-switcher,

body.p56-profile-open
#headerAccountButton,

body.nx106-profile-active
.language-switcher,

body.nx106-profile-active
#headerAccountButton {

    display:
        none !important;
}


/* ============================================================
   MOVE PROFILE CONTENT UP
   ============================================================ */

body.p56-profile-open
.workspace,

body.nx106-profile-active
.workspace {

    padding-top:
        0 !important;
}


#screen-profile-v56[data-nx-profile-settings-only="105"],

.p56-screen[data-nx-profile-settings-only="105"] {

    padding-top:
        12px !important;
}


/* ============================================================
   PROFILE
   ============================================================ */

.nx106-profile {

    width:
        100%;

    margin:
        0 0 26px;

    padding:
        0;

    box-sizing:
        border-box;
}


.nx106-head {

    margin:
        0 0 18px;

    padding:
        0;
}


.nx106-eyebrow {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #ffbd24;

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        .11em;

    line-height:
        1;
}


.nx106-head h1 {

    margin:
        0;

    color:
        #f4f7ff;

    font-size:
        38px;

    font-weight:
        820;

    letter-spacing:
        -.04em;

    line-height:
        1.05;
}


.nx106-head p {

    margin:
        7px 0 0;

    color:
        #8ba2bd;

    font-size:
        13px;

    font-weight:
        580;

    line-height:
        1.4;
}


/* ============================================================
   TWO PERFECTLY EQUAL CARDS
   ============================================================ */

.nx106-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        12px;

    width:
        100%;
}


.nx106-card {

    width:
        100%;

    height:
        118px;

    min-height:
        118px;

    max-height:
        118px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        18px 20px;

    border:
        1px solid #204a72;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #081d37,
            #071a31
        );

    box-sizing:
        border-box;

    overflow:
        hidden;
}


.nx106-avatar {

    width:
        58px;

    height:
        58px;

    min-width:
        58px;

    display:
        grid;

    place-items:
        center;

    color:
        #f6f9ff;

    font-size:
        18px;

    font-weight:
        850;

    border:
        2px solid #ffbd24;

    border-radius:
        50%;

    background:
        #09213d;
}


.nx106-copy,

.nx106-plan-copy {

    min-width:
        0;

    flex:
        1 1 auto;
}


.nx106-copy > span,

.nx106-plan-copy > span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #ffbd24;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .08em;
}


.nx106-copy > strong,

.nx106-plan-copy > strong {

    display:
        block;

    overflow:
        hidden;

    color:
        #f2f6fc;

    font-size:
        18px;

    font-weight:
        790;

    line-height:
        1.2;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.nx106-copy > small,

.nx106-plan-copy > small {

    display:
        block;

    overflow:
        hidden;

    margin-top:
        5px;

    color:
        #8aa1ba;

    font-size:
        11px;

    font-weight:
        580;

    line-height:
        1.3;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.nx106-plan-status {

    color:
        #43de97 !important;

    font-weight:
        700 !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.nx106-manage,

.nx106-logout {

    flex:
        0 0 auto;

    min-width:
        128px;

    height:
        40px;

    padding:
        0 16px;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        760;

    border-radius:
        8px;

    cursor:
        pointer;
}


.nx106-manage {

    color:
        #07101a;

    border:
        1px solid #ffbd24;

    background:
        #ffbd2e;
}


.nx106-manage:hover {

    filter:
        brightness(1.05);
}


.nx106-logout {

    color:
        #dce8f5;

    border:
        1px solid #315675;

    background:
        #0a213b;
}


.nx106-logout:hover {

    border-color:
        #4c789c;

    background:
        #0d2948;
}


/* ============================================================
   SETTINGS DIRECTLY BELOW PROFILE
   ============================================================ */

#screen-profile-v56
#screen-settings.nx105-real-settings,

.p56-screen
#screen-settings.nx105-real-settings {

    margin-top:
        0 !important;
}


#screen-profile-v56
#screen-settings
.settings-page-header,

.p56-screen
#screen-settings
.settings-page-header {

    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


/*
 * The account/help sentence is now redundant because
 * Profile + plan management are directly above Settings.
 *
 * Save / Reset remain untouched.
 */

#screen-profile-v56
#settingsFooterText,

.p56-screen
#settingsFooterText {

    display:
        none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .nx106-grid {

        grid-template-columns:
            1fr;
    }


    .nx106-card {

        max-height:
            none;

        height:
            auto;

        min-height:
            110px;
    }


    .nx106-manage,

    .nx106-logout {

        min-width:
            110px;
    }

}


/* nx-profile-scroll-v1063.css */
/*
============================================================
NOYTRIX PROFILE V106.3
PROFILE SCROLL RESTORE

Only affects the authenticated Profile page.
Does NOT change scrolling on other screens.
============================================================
*/


/*
 * Browser document itself must be allowed to grow.
 */

html:has(body.p56-profile-open),
html:has(body.nx106-profile-active) {
  height: auto !important;
  min-height: 100% !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}


body.p56-profile-open,
body.nx106-profile-active {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  position: static !important;
}


/*
 * Main app containers must not create
 * a second clipped viewport.
 */

body.p56-profile-open .app,
body.p56-profile-open .app-shell,
body.p56-profile-open .workspace,
body.p56-profile-open .workspace-main,
body.p56-profile-open main,

body.nx106-profile-active .app,
body.nx106-profile-active .app-shell,
body.nx106-profile-active .workspace,
body.nx106-profile-active .workspace-main,
body.nx106-profile-active main {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/*
 * Dynamic Profile screen must grow naturally
 * with Profile + original Settings content.
 */

body.p56-profile-open #screen-profile-v56,
body.nx106-profile-active #screen-profile-v56 {
  position: relative !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/*
 * V105 / V106 containers.
 */

body.p56-profile-open #screen-profile-v56 > .nx105-settings-only,
body.p56-profile-open #screen-profile-v56 .nx106-profile,

body.nx106-profile-active #screen-profile-v56 > .nx105-settings-only,
body.nx106-profile-active #screen-profile-v56 .nx106-profile {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/*
 * Original Settings is embedded in Profile.
 * Never clip its lower sections.
 */

body.p56-profile-open #screen-profile-v56 #screen-settings,
body.nx106-profile-active #screen-profile-v56 #screen-settings {
  position: relative !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}


/*
 * Prevent old profile wrappers from owning
 * the viewport scroll.
 */

body.p56-profile-open #screen-profile-v56 .p56-root,
body.nx106-profile-active #screen-profile-v56 .p56-root {
  max-height: none !important;
}


/*
 * Normal browser scrollbar.
 */

body.p56-profile-open,
body.nx106-profile-active {
  overscroll-behavior-y: auto !important;
}


/* mobile-v1.css */
/* ==========================================================
   NOYTRIX MOBILE V1

   ONE mobile CSS owner.
   Only <= 820px.
   Desktop is untouched.
   ========================================================== */


@media (max-width: 820px), (hover: none) and (pointer: coarse) {

  :root {
    --nxm-bg: #020711;
    --nxm-panel: #0b111d;
    --nxm-panel-2: #111827;
    --nxm-line: rgba(255,255,255,.10);
    --nxm-line-soft: rgba(255,255,255,.065);
    --nxm-text: #f7f8fb;
    --nxm-muted: #929cad;
    --nxm-gold: #ffb522;

    --nxm-header: 64px;
  }


  /* ========================================================
     GLOBAL
     ======================================================== */

  html {
    width: 100% !important;
    min-width: 0 !important;

    font-size: 16px !important;

    overflow-x: hidden !important;
  }


  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background:
      radial-gradient(
        circle at 50% -160px,
        rgba(26, 61, 117, .18),
        transparent 480px
      ),
      var(--nxm-bg) !important;

    color: var(--nxm-text) !important;

    -webkit-text-size-adjust: 100%;
  }


  body.nxm-menu-open {
    overflow: hidden !important;
  }


  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }


  button,
  input,
  textarea,
  select {
    font: inherit;
  }


  /* ========================================================
     HIDE DESKTOP NAVIGATION / HEADER
     ======================================================== */

  body.nxm-ready .sidebar {
    display: none !important;
  }


  body.nxm-ready .workspace-header {
    display: none !important;
  }


  /* ========================================================
     APP
     ======================================================== */

  body.nxm-ready .app-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 100dvh !important;

    display: block !important;
  }


  body.nxm-ready .workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 100dvh !important;

    margin: 0 !important;

    padding:
      calc(var(--nxm-header) + 18px)
      18px
      110px !important;

    overflow: visible !important;
  }


  body.nxm-ready .screen {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    overflow: visible !important;
  }


  /* ========================================================
     MOBILE HEADER
     ======================================================== */

  .nxm-topbar {
    position: fixed;

    z-index: 10000;

    top: 0;
    left: 0;
    right: 0;

    height:
      calc(
        var(--nxm-header) +
        env(safe-area-inset-top)
      );

    padding:
      env(safe-area-inset-top)
      12px
      0;

    display: grid;

    grid-template-columns:
      42px
      minmax(0, 1fr)
      auto;

    align-items: center;

    gap: 8px;

    border-bottom:
      1px solid
      var(--nxm-line-soft);

    background:
      rgba(2, 7, 17, .92);

    backdrop-filter:
      blur(20px);

    -webkit-backdrop-filter:
      blur(20px);
  }


  .nxm-menu-button {
    width: 42px;
    height: 42px;

    padding: 0;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #fff;

    cursor: pointer;
  }


  .nxm-menu-icon {
    width: 23px;

    display: grid;

    gap: 5px;
  }


  .nxm-menu-icon span {
    width: 23px;
    height: 2px;

    display: block;

    border-radius: 20px;

    background: #e9edf5;
  }


  .nxm-brand {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #fff;

    text-decoration: none;
  }


  .nxm-brand-mark {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: grid;

    place-items: center;

    border:
      1px solid
      rgba(255,181,34,.38);

    border-radius: 9px;

    color: var(--nxm-gold);

    font-size: 12px;
    font-weight: 900;

    background:
      rgba(255,181,34,.07);
  }


  .nxm-brand-text {
    overflow: hidden;

    color: #fff;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .12em;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


  .nxm-header-actions {
    display: flex;

    align-items: center;

    gap: 6px;
  }


  .nxm-language {
    height: 38px;

    padding: 3px;

    display: flex;

    align-items: center;

    gap: 1px;

    border:
      1px solid
      var(--nxm-line);

    border-radius: 12px;

    background:
      rgba(255,255,255,.035);
  }


  .nxm-language button {
    min-width: 30px;
    height: 30px;

    padding: 0 5px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #8994a7;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
  }


  .nxm-language button.active {
    background:
      rgba(255,181,34,.13);

    color: var(--nxm-gold);
  }


  .nxm-auth {
    height: 38px;

    padding: 0 13px;

    border:
      1px solid
      rgba(255,255,255,.14);

    border-radius: 12px;

    background:
      rgba(255,255,255,.035);

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
  }


  /* ========================================================
     CHECK HOME
     ======================================================== */

  body.nxm-ready #screen-check {
    min-height:
      calc(
        100dvh -
        var(--nxm-header) -
        116px
      ) !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-layout,

  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-main {
    width: 100% !important;
    max-width: 100% !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-main {
    min-height:
      calc(
        100dvh -
        var(--nxm-header) -
        126px
      ) !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;
  }


  /* ========================================================
     HERO
     ======================================================== */

  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero {
    width: 100% !important;
    max-width: 560px !important;

    margin:
      -42px
      auto
      150px !important;

    padding: 0 !important;

    text-align: center !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero::before {
    width: 420px !important;
    height: 260px !important;

    top: 44% !important;
    left: 50% !important;

    transform:
      translate(-50%, -50%) !important;

    opacity: .7 !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero .eyebrow {
    width: max-content !important;
    max-width: 100% !important;

    margin:
      0
      auto
      18px !important;

    padding:
      7px
      11px !important;

    border-radius: 999px !important;

    font-size: 9px !important;
    line-height: 1.2 !important;

    letter-spacing: .12em !important;

    white-space: normal !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero h2 {
    width: 100% !important;
    max-width: 520px !important;

    margin:
      0
      auto !important;

    color: #f5f7fb !important;

    font-size:
      clamp(
        38px,
        10.5vw,
        54px
      ) !important;

    font-weight: 850 !important;

    line-height: .98 !important;

    letter-spacing:
      -.045em !important;

    text-align: center !important;

    text-wrap: balance;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero h2 strong {
    color: var(--nxm-gold) !important;
  }


  body.nxm-ready
  #screen-check:not(.conversation-mode)
  .check-v2-hero > p:last-child {
    width: 100% !important;
    max-width: 460px !important;

    margin:
      22px
      auto
      0 !important;

    color: var(--nxm-muted) !important;

    font-size: 15px !important;

    line-height: 1.55 !important;

    letter-spacing: 0 !important;

    text-align: center !important;
  }


  /* ========================================================
     CHATGPT-LIKE BOTTOM COMPOSER
     ======================================================== */

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-box-v2 {
    position: fixed !important;

    z-index: 8000 !important;

    left: 12px !important;
    right: 12px !important;

    bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      ) !important;

    width: auto !important;
    max-width: 680px !important;

    margin:
      0
      auto !important;

    padding: 0 !important;

    background: transparent !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-input-row {
    width: 100% !important;

    min-height: 68px !important;

    padding:
      7px
      7px
      7px
      17px !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      54px !important;

    align-items: center !important;

    gap: 7px !important;

    border:
      1px solid
      rgba(255,255,255,.12) !important;

    border-radius: 24px !important;

    background:
      #171b21 !important;

    box-shadow:
      0 22px 60px
      rgba(0,0,0,.42) !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-composer {
    min-width: 0 !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-composer input {
    width: 100% !important;
    height: 54px !important;

    padding: 0 !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    color: #fff !important;

    font-size: 16px !important;

    letter-spacing: 0 !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-composer input::placeholder {
    color:
      #8a8f98 !important;

    opacity: 1 !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .submit-scan {
    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 18px !important;

    background:
      var(--nxm-gold) !important;

    color: #07101e !important;

    box-shadow: none !important;
  }


  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .examples,

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .auto-detect-pill {
    display: none !important;
  }


  /* ========================================================
     DRAWER BACKDROP
     ======================================================== */

  .nxm-backdrop {
    position: fixed;

    z-index: 11000;

    inset: 0;

    visibility: hidden;

    opacity: 0;

    background:
      rgba(0,0,0,.58);

    transition:
      opacity .2s ease,
      visibility .2s ease;
  }


  body.nxm-menu-open
  .nxm-backdrop {
    visibility: visible;

    opacity: 1;
  }


  /* ========================================================
     DRAWER
     ======================================================== */

  .nxm-drawer {
    position: fixed;

    z-index: 12000;

    top: 0;
    bottom: 0;
    left: 0;

    width:
      min(
        88vw,
        370px
      );

    min-height: 100dvh;

    padding:
      calc(
        18px +
        env(safe-area-inset-top)
      )
      12px
      calc(
        14px +
        env(safe-area-inset-bottom)
      );

    display: flex;

    flex-direction: column;

    transform:
      translateX(-102%);

    border-right:
      1px solid
      var(--nxm-line-soft);

    background:
      #05080d;

    box-shadow:
      28px 0 70px
      rgba(0,0,0,.42);

    transition:
      transform
      .23s
      cubic-bezier(.22,.75,.25,1);
  }


  body.nxm-menu-open
  .nxm-drawer {
    transform:
      translateX(0);
  }


  .nxm-drawer-head {
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
      0
      8px
      6px;
  }


  .nxm-drawer-brand {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #fff;

    font-size: 15px;
    font-weight: 900;

    letter-spacing: .10em;
  }


  .nxm-close {
    width: 40px;
    height: 40px;

    padding: 0;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #aeb6c4;

    font-size: 29px;
    font-weight: 300;

    cursor: pointer;
  }


  .nxm-drawer-nav {
    flex: 1;

    min-height: 0;

    padding:
      12px
      0;

    display: flex;

    flex-direction: column;

    gap: 4px;

    overflow-y: auto;

    scrollbar-width: none;
  }


  .nxm-drawer-nav::-webkit-scrollbar {
    display: none;
  }


  .nxm-drawer-item {
    width: 100%;
    min-height: 48px;

    padding:
      0
      14px;

    display: flex;

    align-items: center;

    gap: 12px;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #e8ebf0;

    font-size: 15px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;
  }


  .nxm-drawer-item:hover,
  .nxm-drawer-item.active {
    background:
      rgba(255,255,255,.07);
  }


  .nxm-drawer-item-icon {
    width: 25px;

    flex: 0 0 25px;

    display: grid;

    place-items: center;

    color: #a9b2c0;

    font-size: 17px;
  }


  .nxm-drawer-account {
    padding:
      10px
      4px
      2px;

    border-top:
      1px solid
      var(--nxm-line-soft);
  }


  .nxm-account-button {
    width: 100%;
    min-height: 56px;

    padding:
      8px
      10px;

    display: flex;

    align-items: center;

    gap: 11px;

    border: 0;

    border-radius: 13px;

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;
  }


  .nxm-account-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
      linear-gradient(
        135deg,
        #ffb522,
        #dd7b00
      );

    color: #101010;

    font-size: 13px;
    font-weight: 900;
  }


  .nxm-account-copy {
    min-width: 0;

    display: grid;

    gap: 2px;
  }


  .nxm-account-copy strong {
    overflow: hidden;

    color: #f5f6f8;

    font-size: 14px;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


  .nxm-account-copy small {
    color: #858e9e;

    font-size: 12px;
  }


  /* ========================================================
     OTHER SCREENS — FIRST SAFE MOBILE BASE
     ======================================================== */

  body.nxm-ready
  .screen:not(#screen-check) {
    padding-bottom:
      calc(
        30px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  body.nxm-ready
  .screen:not(#screen-check)
  h1,

  body.nxm-ready
  .screen:not(#screen-check)
  h2 {
    max-width: 100% !important;

    font-size:
      clamp(
        28px,
        8vw,
        40px
      ) !important;

    line-height: 1.05 !important;
  }


  body.nxm-ready
  .screen:not(#screen-check)
  img,

  body.nxm-ready
  .screen:not(#screen-check)
  table {
    max-width: 100% !important;
  }


}


/* ==========================================================
   DESKTOP
   Mobile shell never appears.
   ========================================================== */

@media (min-width: 821px) {

  .nxm-topbar,
  .nxm-drawer,
  .nxm-backdrop {
    display: none !important;
  }

}


/* ==========================================================
   MOBILE V1.1
   HEADER + LANGUAGE + FREE STATUS
   ========================================================== */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {


  /* ========================================================
     REMOVE NX BADGE + NOYTRIX NAME FROM TOP HEADER
     Hamburger stays.
     ======================================================== */

  .nxm-topbar .nxm-brand {
    display: none !important;
  }


  /*
   * Keep right controls at the right edge even though
   * the center brand has been removed.
   */

  .nxm-header-actions {
    grid-column: 3 !important;

    justify-self: end !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;
  }


  /* ========================================================
     LANGUAGE DROPDOWN
     ======================================================== */

  .nxm-language-select {
    appearance: none;
    -webkit-appearance: none;

    width: 66px;
    height: 40px;

    margin: 0;

    padding:
      0
      28px
      0
      13px;

    border:
      1px solid
      rgba(255,255,255,.13);

    border-radius: 12px;

    outline: none;

    background:
      linear-gradient(
        45deg,
        transparent 50%,
        #8994a7 50%
      )
      calc(100% - 14px)
      17px
      / 5px 5px
      no-repeat,

      linear-gradient(
        135deg,
        #8994a7 50%,
        transparent 50%
      )
      calc(100% - 10px)
      17px
      / 5px 5px
      no-repeat,

      rgba(255,255,255,.035);

    color:
      #ffb522;

    font-size:
      12px;

    font-weight:
      850;

    cursor:
      pointer;

    box-shadow:
      none;
  }


  .nxm-language-select:focus {
    border-color:
      rgba(255,181,34,.45);

    box-shadow:
      0 0 0 3px
      rgba(255,181,34,.08);
  }


  .nxm-language-select option {
    background:
      #111722;

    color:
      #f5f7fb;
  }


  /* ========================================================
     SIGN IN — keep clean after removing logo
     ======================================================== */

  .nxm-auth {
    height:
      40px !important;

    padding:
      0
      15px !important;

    border-radius:
      12px !important;
  }


  /* ========================================================
     FREE CHECK STATUS UNDER COMPOSER

     The real guest system already creates:
       .guest-free-dot-v18

     We keep exactly ONE real dot.
     ======================================================== */

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-box-v2
  :has(> .guest-free-dot-v18) {

    width:
      max-content !important;

    max-width:
      calc(100vw - 40px) !important;

    min-height:
      38px !important;

    margin:
      12px
      auto
      0 !important;

    padding:
      7px
      14px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    border-radius:
      999px !important;

    text-align:
      center !important;
  }


  /*
   * Remove any legacy decorative bullet.
   * This is what can produce the second dot.
   */

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-box-v2
  :has(> .guest-free-dot-v18)::before,

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .scan-box-v2
  :has(> .guest-free-dot-v18)::after {

    content:
      none !important;

    display:
      none !important;
  }


  /*
   * Exactly one real status dot.
   * DO NOT change its background color:
   * existing guest logic may make it orange/green
   * depending on status.
   */

  body.nxm-ready
  #screen-check.active:not(.conversation-mode)
  .guest-free-dot-v18 {

    width:
      8px !important;

    height:
      8px !important;

    min-width:
      8px !important;

    flex:
      0 0 8px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      block !important;

    border-radius:
      50% !important;
  }


}


/* ==========================================================
   MOBILE V1.2
   COMPACT ONE-SCREEN AUTH
   ========================================================== */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {

  #authModal[hidden] {
    display: none !important;
  }


  /* FULLSCREEN OVERLAY */

  #authModal:not([hidden]) {
    position: fixed !important;

    z-index: 50000 !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;

    padding:
      calc(6px + env(safe-area-inset-top))
      10px
      calc(6px + env(safe-area-inset-bottom)) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background:
      rgba(0, 4, 10, .94) !important;

    backdrop-filter:
      blur(18px) !important;

    -webkit-backdrop-filter:
      blur(18px) !important;

    isolation: isolate !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
  }


  /* COMPACT CARD — NO SCROLL */

  #authModal:not([hidden])
  > .auth-modal {
    position: relative !important;

    z-index: 50001 !important;

    width:
      min(
        100%,
        520px
      ) !important;

    max-width:
      520px !important;

    height:
      auto !important;

    max-height:
      calc(
        100dvh -
        12px -
        env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
      ) !important;

    margin: 0 !important;

    padding:
      18px
      16px
      16px !important;

    overflow:
      hidden !important;

    border:
      1px solid
      rgba(108,144,205,.28) !important;

    border-radius:
      20px !important;

    background:
      #081126 !important;

    box-shadow:
      0 24px 80px
      rgba(0,0,0,.65) !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
  }


  /* CLOSE */

  #authModal
  .modal-close {
    position: absolute !important;

    z-index: 10 !important;

    top: 12px !important;
    right: 12px !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    place-items: center !important;

    border:
      1px solid
      rgba(255,255,255,.09) !important;

    border-radius:
      10px !important;

    background:
      rgba(4,10,22,.88) !important;

    color:
      #aeb8c8 !important;

    font-size:
      23px !important;

    line-height:
      1 !important;
  }


  /* TOP COPY */

  #authModal
  #authEyebrow {
    margin:
      0
      42px
      5px
      0 !important;

    color:
      #ffb522 !important;

    font-size:
      9px !important;

    line-height:
      1.2 !important;

    letter-spacing:
      .12em !important;
  }


  #authModal
  #authTitle {
    margin:
      0
      44px
      6px
      0 !important;

    max-width:
      none !important;

    color:
      #f7f8fb !important;

    font-size:
      27px !important;

    line-height:
      1.02 !important;

    letter-spacing:
      -.025em !important;
  }


  #authModal
  #authDescription {
    margin:
      0
      0
      11px !important;

    color:
      #94a0b5 !important;

    font-size:
      12px !important;

    line-height:
      1.35 !important;
  }


  /* TABS */

  #authModal
  .auth-tabs {
    width:
      100% !important;

    margin:
      0
      0
      11px !important;

    display:
      flex !important;

    gap:
      2px !important;

    overflow:
      hidden !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.09) !important;
  }


  #authModal
  .auth-tabs button {
    flex:
      1 1 0 !important;

    min-width:
      0 !important;

    min-height:
      34px !important;

    padding:
      0
      4px !important;

    font-size:
      12px !important;

    line-height:
      1.1 !important;

    white-space:
      nowrap !important;
  }


  /* FORM */

  #authModal
  #authForm {
    width:
      100% !important;

    display:
      grid !important;

    gap:
      8px !important;
  }


  #authModal
  #authForm label {
    width:
      100% !important;

    display:
      grid !important;

    gap:
      4px !important;

    margin:
      0 !important;

    color:
      #d8deea !important;

    font-size:
      11px !important;

    font-weight:
      700 !important;

    line-height:
      1.2 !important;
  }


  #authModal
  #authForm input {
    width:
      100% !important;

    min-width:
      0 !important;

    height:
      43px !important;

    margin:
      0 !important;

    padding:
      0
      13px !important;

    border:
      1px solid
      rgba(112,147,206,.27) !important;

    border-radius:
      11px !important;

    outline:
      none !important;

    background:
      #0e1c36 !important;

    color:
      #fff !important;

    font-size:
      14px !important;
  }


  #authModal
  #authForm input:focus {
    border-color:
      rgba(71,127,226,.9) !important;

    box-shadow:
      0 0 0 2px
      rgba(64,113,204,.14) !important;
  }


  #authModal
  #authSubmit {
    width:
      100% !important;

    min-height:
      44px !important;

    margin:
      2px
      0
      0 !important;

    padding:
      0
      12px !important;

    border-radius:
      11px !important;

    font-size:
      14px !important;
  }


  /* DIVIDER */

  #authModal
  .auth-divider {
    margin:
      11px
      0 !important;

    font-size:
      11px !important;
  }


  /* GOOGLE */

  #authModal
  .google-button {
    width:
      100% !important;

    min-height:
      44px !important;

    padding:
      0
      12px !important;

    border-radius:
      11px !important;

    font-size:
      14px !important;
  }


  /* STATUS */

  #authModal
  .auth-status {
    margin:
      6px
      0
      0 !important;

    font-size:
      11px !important;

    line-height:
      1.25 !important;
  }


  #authModal
  .auth-footnote {
    margin:
      7px
      0
      0 !important;

    font-size:
      10px !important;

    line-height:
      1.25 !important;
  }


  /* MAIN PAGE CANNOT COVER AUTH */

  body:has(#authModal:not([hidden]))
  #screen-check
  .scan-box-v2 {
    visibility:
      hidden !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;
  }


  body:has(#authModal:not([hidden]))
  .nxm-topbar,

  body:has(#authModal:not([hidden]))
  .nxm-drawer,

  body:has(#authModal:not([hidden]))
  .nxm-backdrop {
    pointer-events:
      none !important;
  }


  html:has(#authModal:not([hidden])),

  body:has(#authModal:not([hidden])) {
    overflow:
      hidden !important;

    overscroll-behavior:
      none !important;
  }

}


/* EXTRA COMPACT FOR SHORT PHONE SCREENS */

@media (max-width: 820px) and (max-height: 720px) {

  #authModal:not([hidden])
  > .auth-modal {
    padding:
      13px
      14px
      12px !important;

    border-radius:
      17px !important;
  }


  #authModal
  #authEyebrow {
    display:
      none !important;
  }


  #authModal
  #authTitle {
    margin-bottom:
      4px !important;

    font-size:
      23px !important;
  }


  #authModal
  #authDescription {
    margin-bottom:
      7px !important;

    font-size:
      11px !important;
  }


  #authModal
  .auth-tabs {
    margin-bottom:
      7px !important;
  }


  #authModal
  .auth-tabs button {
    min-height:
      30px !important;

    font-size:
      11px !important;
  }


  #authModal
  #authForm {
    gap:
      6px !important;
  }


  #authModal
  #authForm label {
    gap:
      3px !important;

    font-size:
      10px !important;
  }


  #authModal
  #authForm input {
    height:
      39px !important;

    font-size:
      13px !important;
  }


  #authModal
  #authSubmit,

  #authModal
  .google-button {
    min-height:
      40px !important;
  }


  #authModal
  .auth-divider {
    margin:
      7px
      0 !important;
  }


  #authModal
  .auth-footnote {
    display:
      none !important;
  }

}


/* ==========================================================
   END MOBILE V1.2
   ========================================================== */


















/* NOYTRIX MOBILE BILLING V1.7 CSS START */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {


  /* ================================================
     BILLING SCREEN
     ================================================ */

  body.nxm-ready:has(#screen-billing)
  .workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    margin: 0 !important;

    padding:
      calc(var(--nxm-header) + 8px)
      0
      calc(28px + env(safe-area-inset-bottom))
      !important;

    overflow-x: hidden !important;
  }


  body.nxm-ready
  #screen-billing {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    margin: 0 !important;

    padding:
      14px
      16px
      28px !important;

    overflow-x: hidden !important;
  }


  body.nxm-ready
  #screen-billing
  #billingApp {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ================================================
     REMOVE SIGN IN ON BILLING
     ================================================ */

  body:has(#screen-billing)
  .nxm-topbar-signin-v17,

  #screen-billing
  [data-b52-signin],

  #screen-billing
  .nxm-hide-signin-v17 {
    display: none !important;
  }


  /* ================================================
     MAIN MOBILE LAYOUT
     ================================================ */

  #screen-billing
  .b52-body,

  #screen-billing
  .b52-personal,

  #screen-billing
  .b52-plans,

  #screen-billing
  .b52-plan-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  #screen-billing
  .b52-personal {
    display: block !important;
  }


  #screen-billing
  .b52-plan-grid {
    display: block !important;
  }


  /* no giant FREE card */

  #screen-billing
  .b52-plan-grid
  > .b52-plan:not(.b52-plan-pro) {
    display: none !important;
  }


  /* ================================================
     COMPACT BILLING HEADER
     ================================================ */

  #screen-billing
  .b52-header {
    margin: 0 0 12px !important;
    padding: 0 !important;
  }


  #screen-billing
  .b52-eyebrow {
    margin: 0 0 4px !important;

    font-size: 9px !important;
    line-height: 1.1 !important;

    letter-spacing: .12em !important;
  }


  #screen-billing
  .b52-header h1 {
    margin: 0 0 5px !important;

    font-size: 28px !important;
    line-height: 1 !important;

    letter-spacing: -.035em !important;
  }


  #screen-billing
  .b52-header p {
    max-width: 330px !important;

    margin: 0 !important;

    font-size: 12px !important;
    line-height: 1.3 !important;
  }


  /* ================================================
     PRO / API SWITCH
     ================================================ */

  #screen-billing
  .b52-tabs {
    width: 100% !important;

    margin: 8px 0 13px !important;
    padding: 3px !important;

    display: grid !important;

    grid-template-columns:
      1fr 1fr !important;

    border-radius: 13px !important;
  }


  #screen-billing
  .b52-tabs button {
    width: 100% !important;

    min-width: 0 !important;
    min-height: 38px !important;

    padding: 0 8px !important;

    font-size: 12px !important;

    border-radius: 10px !important;
  }


  /* ================================================
     SECTION COPY
     ================================================ */

  #screen-billing
  .b52-section-head {
    margin: 0 0 10px !important;
    padding: 0 !important;
  }


  #screen-billing
  .b52-section-head h2 {
    margin: 0 0 4px !important;

    font-size: 24px !important;
    line-height: 1 !important;

    letter-spacing: -.03em !important;
  }


  #screen-billing
  .b52-section-head p {
    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1.3 !important;
  }


  /* ================================================
     REMOVE DESKTOP PRO SHELL
     ================================================ */

  #screen-billing
  .b52-plan-pro {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;
  }


  #screen-billing
  .b52-plan-pro
  > .b52-recommended,

  #screen-billing
  .b52-plan-pro
  > .b52-plan-head {
    display: none !important;
  }


  /* ================================================
     TRUE HORIZONTAL CAROUSEL
     ================================================ */

  #screen-billing
  .b52-pro-terms {
    position: relative !important;

    width:
      calc(100vw - 16px)
      !important;

    max-width: none !important;

    margin:
      4px
      -16px
      12px
      0 !important;

    padding:
      3px
      48px
      12px
      0 !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    grid-template-columns: none !important;
    grid-auto-flow: initial !important;

    align-items: stretch !important;

    gap: 12px !important;

    overflow-x: scroll !important;
    overflow-y: hidden !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-left:
      0 !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    touch-action:
      pan-x !important;

    scrollbar-width:
      none !important;

    box-sizing:
      border-box !important;
  }


  #screen-billing
  .b52-pro-terms::-webkit-scrollbar {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
  }


  /* ================================================
     ONE REAL TERM = ONE CARD
     ================================================ */

  #screen-billing
  .b52-pro-terms
  > button {
    position: relative !important;

    flex:
      0 0
      calc(100vw - 70px)
      !important;

    width:
      calc(100vw - 70px)
      !important;

    min-width:
      calc(100vw - 70px)
      !important;

    max-width:
      calc(100vw - 70px)
      !important;

    min-height:
      185px !important;

    height: 185px !important;

    margin: 0 !important;

    padding:
      20px
      18px !important;

    display: flex !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      center !important;

    gap: 5px !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    border:
      1px solid
      rgba(72,121,174,.45)
      !important;

    border-radius:
      20px !important;

    background:
      linear-gradient(
        145deg,
        #102c46,
        #071521
      ) !important;

    box-shadow:
      0 14px 32px
      rgba(0,0,0,.27)
      !important;

    color: #fff !important;

    text-align: left !important;

    white-space: normal !important;

    box-sizing:
      border-box !important;

    transform: none !important;
  }


  /* ACTIVE */

  #screen-billing
  .b52-pro-terms
  > button.active {
    border-color:
      rgba(255,181,34,.9)
      !important;

    background:
      linear-gradient(
        145deg,
        #293943,
        #0b1a27
      ) !important;

    box-shadow:
      0
      0
      0
      1px
      rgba(255,181,34,.12),
      0
      15px
      34px
      rgba(0,0,0,.30)
      !important;
  }


  #screen-billing
  .b52-pro-terms
  > button.active::after {
    display: none !important;

    content: none !important;
  }


  /* PLAN NAME */

  #screen-billing
  .b52-pro-terms
  > button
  > span {
    margin: 0 !important;

    color: #f8f9fc !important;

    font-size: 25px !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: -.03em !important;
  }


  /* PRICE */

  #screen-billing
  .b52-pro-terms
  > button
  > strong {
    margin:
      6px
      0
      2px !important;

    color: #fff !important;

    font-size: 42px !important;
    font-weight: 850 !important;

    line-height: .94 !important;

    letter-spacing: -.045em !important;
  }


  #screen-billing
  .b52-pro-terms
  > button.active
  > strong {
    color:
      #ffbd32 !important;
  }


  /* SUBTEXT */

  #screen-billing
  .b52-pro-terms
  > button
  > small {
    margin: 2px 0 0 !important;

    color: #9bacc0 !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
  }


  /* ================================================
     FEATURES
     ================================================ */

  #screen-billing
  .b52-plan-pro
  > ul {
    width: 100% !important;

    margin:
      3px
      0
      10px !important;

    padding:
      13px
      14px !important;

    display:
      grid !important;

    gap: 7px !important;

    border:
      1px solid
      rgba(255,255,255,.07)
      !important;

    border-radius:
      14px !important;

    background:
      rgba(255,255,255,.025)
      !important;
  }


  #screen-billing
  .b52-plan-pro
  > ul
  > li {
    padding-left:
      22px !important;

    font-size:
      11px !important;

    line-height:
      1.25 !important;
  }


  /* ================================================
     REAL PAYMENT CTA
     ================================================ */

  #screen-billing
  .b52-plan-pro
  > .b52-btn {
    width: 100% !important;

    min-height:
      44px !important;

    margin: 0 !important;

    padding:
      0
      12px !important;

    border-radius:
      12px !important;

    font-size:
      12px !important;
  }


  #screen-billing
  .b52-pay-note {
    margin-top:
      5px !important;

    font-size:
      9px !important;

    text-align:
      center !important;
  }


  /* ================================================
     SIDE CONTENT BELOW
     ================================================ */

  #screen-billing
  .b52-personal-side {
    width: 100% !important;
    max-width: 100% !important;

    margin-top:
      12px !important;

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      9px !important;
  }

}


/* SMALL PHONE */

@media (max-width: 390px) {

  #screen-billing
  .b52-pro-terms
  > button {
    flex-basis:
      calc(100vw - 60px)
      !important;

    width:
      calc(100vw - 60px)
      !important;

    min-width:
      calc(100vw - 60px)
      !important;

    max-width:
      calc(100vw - 60px)
      !important;

    height:
      175px !important;

    min-height:
      175px !important;

    padding:
      18px
      16px !important;
  }


  #screen-billing
  .b52-pro-terms
  > button
  > strong {
    font-size:
      38px !important;
  }

}

/* NOYTRIX MOBILE BILLING V1.7 CSS END */


/* ==========================================================
   NOYTRIX MOBILE V1.8
   HARD RUNTIME BILLING GUARANTEE
   ========================================================== */

@media (max-width: 820px), (hover: none) and (pointer: coarse) {


  /*
   * This intentionally targets the REAL Billing controls
   * without relying on #screen-billing.active.
   */

  #screen-billing .b52-pro-terms {

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    grid-template-columns:
      none !important;

    width:
      calc(100vw - 16px) !important;

    max-width:
      none !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    gap:
      12px !important;

    padding-right:
      48px !important;

    scroll-snap-type:
      x mandatory !important;

    -webkit-overflow-scrolling:
      touch !important;

    scrollbar-width:
      none !important;

    touch-action:
      pan-x !important;
  }


  #screen-billing
  .b52-pro-terms::-webkit-scrollbar {

    display:
      none !important;
  }


  #screen-billing
  .b52-pro-terms
  > button {

    flex:
      0 0
      calc(100vw - 70px) !important;

    width:
      calc(100vw - 70px) !important;

    min-width:
      calc(100vw - 70px) !important;

    max-width:
      calc(100vw - 70px) !important;

    height:
      185px !important;

    min-height:
      185px !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    margin:
      0 !important;
  }


  /*
   * Sign in never shown inside Billing.
   */

  #screen-billing
  [data-b52-signin] {

    display:
      none !important;
  }


  /*
   * Force page to PHONE width.
   */

  html,
  body {

    min-width:
      0 !important;

    max-width:
      100vw !important;

    overflow-x:
      hidden !important;
  }


  body.nxm-ready
  #screen-billing {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;
  }

}


/* ==========================================================
   END NOYTRIX MOBILE V1.8
   ========================================================== */


/* NOYTRIX MOBILE BILLING V1.9 CSS START */


/*
 * ==========================================================
 * MOBILE ONLY.
 * DESKTOP IS NOT TOUCHED.
 * ==========================================================
 */

@media (max-width: 820px) {


  /*
   * ------------------------------------------
   * REMOVE REDUNDANT BILLING SIGN IN
   * ------------------------------------------
   */

  #screen-billing
  [data-b52-signin] {

    display:
      none !important;

  }


  body:has(#screen-billing.active)
  .nxm-auth {

    display:
      none !important;

  }


  /*
   * ------------------------------------------
   * REAL BILLING CAROUSEL
   * ------------------------------------------
   */

  #screen-billing
  .b52-pro-terms {

    width:
      calc(100vw - 16px)
      !important;

    max-width:
      none !important;

    margin:
      6px
      -16px
      0
      0 !important;

    padding:
      4px
      48px
      14px
      0 !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    grid-template-columns:
      none !important;

    grid-auto-flow:
      initial !important;

    align-items:
      stretch !important;

    gap:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-left:
      0 !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    touch-action:
      pan-x !important;

    scrollbar-width:
      none !important;

    box-sizing:
      border-box !important;

  }


  #screen-billing
  .b52-pro-terms::-webkit-scrollbar {

    display:
      none !important;

  }


  /*
   * ------------------------------------------
   * EACH REAL PLAN = ONE CARD
   * ------------------------------------------
   */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select] {

    position:
      relative !important;

    flex:
      0 0
      calc(100vw - 70px)
      !important;

    width:
      calc(100vw - 70px)
      !important;

    min-width:
      calc(100vw - 70px)
      !important;

    max-width:
      calc(100vw - 70px)
      !important;

    min-height:
      190px !important;

    height:
      190px !important;

    margin:
      0 !important;

    padding:
      21px
      19px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      center !important;

    gap:
      6px !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    border:
      1px solid
      rgba(
        75,
        124,
        180,
        .42
      )
      !important;

    border-radius:
      20px !important;

    background:
      linear-gradient(
        145deg,
        #102c46,
        #071521
      )
      !important;

    box-shadow:
      0
      14px
      32px
      rgba(
        0,
        0,
        0,
        .27
      )
      !important;

    color:
      #ffffff !important;

    text-align:
      left !important;

    white-space:
      normal !important;

    box-sizing:
      border-box !important;

    transform:
      none !important;

  }


  /*
   * Visible / selected slide.
   */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select].active,

  #screen-billing
  .b52-pro-terms
  > .nxm-visible-plan-v19 {

    border-color:
      rgba(
        255,
        181,
        34,
        .90
      )
      !important;

    box-shadow:
      0
      0
      0
      1px
      rgba(
        255,
        181,
        34,
        .12
      ),
      0
      16px
      34px
      rgba(
        0,
        0,
        0,
        .30
      )
      !important;

  }


  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select].active::after {

    display:
      none !important;

    content:
      none !important;

  }


  /* TITLE */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select]
  > span {

    margin:
      0 !important;

    color:
      #f7f9fc !important;

    font-size:
      25px !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    letter-spacing:
      -.03em !important;

  }


  /* PRICE */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select]
  > strong {

    margin:
      7px
      0
      2px !important;

    color:
      #ffffff !important;

    font-size:
      43px !important;

    font-weight:
      850 !important;

    line-height:
      .94 !important;

    letter-spacing:
      -.045em !important;

  }


  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select].active
  > strong {

    color:
      #ffbd32 !important;

  }


  /* DESCRIPTION */

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select]
  > small {

    margin:
      3px
      0
      0 !important;

    color:
      #9eafc4 !important;

    font-size:
      12px !important;

    font-weight:
      600 !important;

    line-height:
      1.2 !important;

  }


  /*
   * ------------------------------------------
   * BUY BUTTON AREA UNDER CARD
   * ------------------------------------------
   */

  #screen-billing
  .nxm-buy-actions-v19 {

    width:
      100% !important;

    margin:
      7px
      0
      13px !important;

    padding:
      0 !important;

    display:
      block !important;

  }


  #screen-billing
  .nxm-buy-plan-v19 {

    width:
      100% !important;

    min-height:
      48px !important;

    margin:
      0 !important;

    padding:
      0
      16px !important;

    display:
      none !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border:
      1px solid
      rgba(
        255,
        181,
        34,
        .82
      )
      !important;

    border-radius:
      13px !important;

    background:
      linear-gradient(
        135deg,
        #ffc044,
        #f2a900
      )
      !important;

    color:
      #081321 !important;

    box-shadow:
      0
      10px
      24px
      rgba(
        255,
        181,
        34,
        .14
      )
      !important;

    font-family:
      inherit !important;

    font-size:
      13px !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    cursor:
      pointer !important;

    -webkit-tap-highlight-color:
      transparent !important;

  }


  /*
   * Only button belonging to the
   * currently visible card is shown.
   */

  #screen-billing
  .nxm-buy-plan-v19[
    data-active="1"
  ] {

    display:
      flex !important;

  }


  #screen-billing
  .nxm-buy-plan-v19:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  /*
   * ------------------------------------------
   * HIDE ORIGINAL DUPLICATE CTA.
   *
   * Its real JS functionality remains in DOM
   * and V1.9 invokes it programmatically.
   * ------------------------------------------
   */

  #screen-billing
  .b52-plan-pro
  > .b52-btn {

    position:
      absolute !important;

    width:
      1px !important;

    height:
      1px !important;

    min-width:
      1px !important;

    min-height:
      1px !important;

    padding:
      0 !important;

    margin:
      -1px !important;

    overflow:
      hidden !important;

    clip:
      rect(
        0,
        0,
        0,
        0
      )
      !important;

    white-space:
      nowrap !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;

  }


  /*
   * Keep secure-payment note underneath
   * our real purchase button.
   */

  #screen-billing
  .b52-pay-note {

    margin:
      0
      0
      8px !important;

    font-size:
      9px !important;

    line-height:
      1.2 !important;

    text-align:
      center !important;

  }

}


/*
 * SMALL MOBILE ONLY.
 */

@media (max-width: 390px) {

  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select] {

    flex-basis:
      calc(100vw - 60px)
      !important;

    width:
      calc(100vw - 60px)
      !important;

    min-width:
      calc(100vw - 60px)
      !important;

    max-width:
      calc(100vw - 60px)
      !important;

    height:
      178px !important;

    min-height:
      178px !important;

    padding:
      19px
      16px !important;

  }


  #screen-billing
  .b52-pro-terms
  > [data-b52-pro-select]
  > strong {

    font-size:
      39px !important;

  }

}


/* NOYTRIX MOBILE BILLING V1.9 CSS END */


/* NOYTRIX MOBILE REAL PLANS V2 CSS START */


/*
 * ЛИШЕ МОБІЛЬНА ВЕРСІЯ.
 */

@media (max-width: 820px) {


  /*
   * Сторінка ніколи не розширюється
   * через горизонтальні картки.
   */

  html,
  body {

    max-width:
      100vw !important;

    overflow-x:
      hidden !important;

  }


  #screen-billing {

    width:
      100% !important;

    max-width:
      100vw !important;

    overflow-x:
      hidden !important;

  }


  /*
   * ========================================================
   * СПРАВЖНІ ВЕЛИКІ КАРТКИ
   * ========================================================
   */

  #screen-billing
  .nxm-real-plan-track-v2 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      8px
      0
      16px !important;

    padding:
      2px
      44px
      14px
      0 !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      stretch !important;

    gap:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-left:
      0 !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    touch-action:
      pan-x pan-y !important;

    scrollbar-width:
      none !important;

    box-sizing:
      border-box !important;

  }


  #screen-billing
  .nxm-real-plan-track-v2::-webkit-scrollbar {

    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;

  }


  /*
   * ОДНА КАРТКА НА ЕКРАНІ,
   * НАСТУПНУ ТРОХИ ВИДНО СПРАВА.
   */

  #screen-billing
  .nxm-real-plan-track-v2
  > .nxm-real-plan-card-v2 {

    flex:
      0 0
      calc(100vw - 76px)
      !important;

    width:
      calc(100vw - 76px)
      !important;

    min-width:
      calc(100vw - 76px)
      !important;

    max-width:
      calc(100vw - 76px)
      !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    align-self:
      stretch !important;

    box-sizing:
      border-box !important;

    transform:
      none !important;

  }


  /*
   * Якщо старий CSS задав grid-column
   * або іншу desktop-геометрію —
   * скидаємо її.
   */

  #screen-billing
  .nxm-real-plan-card-v2 {

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    position:
      relative !important;

  }


  /*
   * ========================================================
   * КНОПКА КУПІВЛІ ВНИЗУ КОЖНОЇ КАРТКИ
   * ========================================================
   */

  #screen-billing
  .nxm-real-buy-v2 {

    width:
      100% !important;

    min-height:
      50px !important;

    margin:
      22px
      0
      0 !important;

    padding:
      0
      16px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    flex:
      0
      0
      auto !important;

    border:
      1px solid
      rgba(
        255,
        190,
        55,
        .92
      )
      !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        135deg,
        #ffc348,
        #efa500
      )
      !important;

    color:
      #071321 !important;

    box-shadow:
      0
      12px
      28px
      rgba(
        255,
        181,
        34,
        .18
      )
      !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      850 !important;

    line-height:
      1 !important;

    text-align:
      center !important;

    cursor:
      pointer !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    -webkit-appearance:
      none !important;

    appearance:
      none !important;

    -webkit-tap-highlight-color:
      transparent !important;

  }


  #screen-billing
  .nxm-real-buy-v2:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  #screen-billing
  .nxm-real-buy-v2:disabled {

    opacity:
      .65 !important;

    pointer-events:
      none !important;

  }


  /*
   * Технічні старі маленькі перемикачі
   * залишаємо в DOM для справжньої логіки покупки,
   * але користувачеві вони не потрібні.
   */

  #screen-billing
  .b52-pro-terms {

    position:
      absolute !important;

    width:
      1px !important;

    height:
      1px !important;

    margin:
      -1px !important;

    padding:
      0 !important;

    overflow:
      hidden !important;

    clip:
      rect(
        0,
        0,
        0,
        0
      )
      !important;

    white-space:
      nowrap !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;

  }

}


/*
 * ВУЗЬКІ ТЕЛЕФОНИ.
 */

@media (max-width: 390px) {

  #screen-billing
  .nxm-real-plan-track-v2
  > .nxm-real-plan-card-v2 {

    flex-basis:
      calc(100vw - 66px)
      !important;

    width:
      calc(100vw - 66px)
      !important;

    min-width:
      calc(100vw - 66px)
      !important;

    max-width:
      calc(100vw - 66px)
      !important;

  }


  #screen-billing
  .nxm-real-buy-v2 {

    min-height:
      48px !important;

    font-size:
      13px !important;

  }

}


/* NOYTRIX MOBILE REAL PLANS V2 CSS END */


/* NOYTRIX MOBILE POLISH V3 CSS START */


/*
 * ==========================================================
 * MOBILE ONLY
 * ==========================================================
 */

@media (max-width: 820px) {


  /*
   * --------------------------------------------------------
   * WHOLE MOBILE WORKSPACE +0.5 CM WIDER
   *
   * Old common gutter was about 16px.
   * New gutter = 7px.
   *
   * Gain:
   * 9px left + 9px right = 18px ≈ 0.48cm.
   * --------------------------------------------------------
   */

  :root {

    --nxm-page-gutter-v3:
      7px;

  }


  html,
  body {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    overflow-x:
      hidden !important;

  }


  body.nxm-ready
  .workspace {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    padding-left:
      var(--nxm-page-gutter-v3)
      !important;

    padding-right:
      var(--nxm-page-gutter-v3)
      !important;

    box-sizing:
      border-box !important;

  }


  body.nxm-ready
  .workspace
  > .screen,

  body.nxm-ready
  [data-screen-panel] {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding-left:
      0 !important;

    padding-right:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Remove old max-width restrictions from
   * main mobile page roots.
   */

  body.nxm-ready
  .api-page-v38,

  body.nxm-ready
  #billingApp,

  body.nxm-ready
  .billing-v52,

  body.nxm-ready
  .product-page-v23,

  body.nxm-ready
  .tracking-v14,

  body.nxm-ready
  .signals-v19 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
   * --------------------------------------------------------
   * CENTER MOBILE COPY
   * --------------------------------------------------------
   */

  body.nxm-ready
  .screen,

  body.nxm-ready
  [data-screen-panel] {

    text-align:
      center !important;

  }


  body.nxm-ready
  .screen h1,

  body.nxm-ready
  .screen h2,

  body.nxm-ready
  .screen h3,

  body.nxm-ready
  .screen h4,

  body.nxm-ready
  .screen p,

  body.nxm-ready
  .screen small,

  body.nxm-ready
  .screen .eyebrow,

  body.nxm-ready
  .screen [class*="eyebrow"],

  body.nxm-ready
  .screen [class*="kicker"] {

    text-align:
      center !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

  }


  /*
   * Center common flex/grid headers.
   */

  body.nxm-ready
  .page-intro,

  body.nxm-ready
  .panel-heading,

  body.nxm-ready
  .api-section-head-v38,

  body.nxm-ready
  .b52-section-head,

  body.nxm-ready
  .b52-header {

    text-align:
      center !important;

    justify-content:
      center !important;

    align-items:
      center !important;

  }


  /*
   * Lists look better centered on general pages.
   */

  body.nxm-ready
  .screen
  ul:not(
    [class*="code"]
  ),

  body.nxm-ready
  .screen
  ol:not(
    [class*="code"]
  ) {

    width:
      fit-content;

    max-width:
      100%;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

  }


  /*
   * Inputs / code / technical tables stay left aligned.
   */

  body.nxm-ready
  input,

  body.nxm-ready
  textarea,

  body.nxm-ready
  select,

  body.nxm-ready
  pre,

  body.nxm-ready
  code,

  body.nxm-ready
  table,

  body.nxm-ready
  th,

  body.nxm-ready
  td {

    text-align:
      left !important;

  }


  /*
   * --------------------------------------------------------
   * API PAGE
   * --------------------------------------------------------
   */

  #screen-api
  .api-page-v38 {

    padding-left:
      0 !important;

    padding-right:
      0 !important;

  }


  #screen-api
  .api-hero-grid-v38,

  #screen-api
  .api-hero-v38 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  #screen-api
  .api-hero-v38
  h1 {

    max-width:
      620px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  #screen-api
  .api-hero-v38
  p {

    max-width:
      560px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  /*
   * --------------------------------------------------------
   * API DOCUMENTATION BUTTON
   * --------------------------------------------------------
   */

  #screen-api
  .nxm-api-docs-wrap-v3 {

    width:
      100% !important;

    margin:
      16px
      auto
      20px !important;

    display:
      flex !important;

    justify-content:
      center !important;

    align-items:
      center !important;

  }


  #screen-api
  .nxm-api-docs-button-v3 {

    width:
      auto !important;

    min-width:
      190px !important;

    max-width:
      calc(
        100vw -
        32px
      ) !important;

    min-height:
      48px !important;

    margin:
      16px
      auto !important;

    padding:
      0
      22px !important;

    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border:
      1px solid
      rgba(
        255,
        183,
        32,
        .70
      )
      !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          255,
          183,
          32,
          .16
        ),
        rgba(
          10,
          28,
          50,
          .95
        )
      )
      !important;

    color:
      #ffd167 !important;

    box-shadow:
      0
      10px
      30px
      rgba(
        0,
        0,
        0,
        .22
      )
      !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    letter-spacing:
      .01em !important;

    text-align:
      center !important;

    text-decoration:
      none !important;

    cursor:
      pointer !important;

    -webkit-tap-highlight-color:
      transparent !important;

  }


  #screen-api
  .nxm-api-docs-button-v3:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  /*
   * ========================================================
   * REAL API DOCUMENTATION MOBILE
   *
   * Exact root generated by api-docs-v41.js:
   * [aria-label="Noytrix API documentation"]
   * ========================================================
   */

  [aria-label="Noytrix API documentation"] {

    position:
      fixed !important;

    inset:
      0 !important;

    width:
      100vw !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    height:
      100dvh !important;

    max-height:
      100dvh !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      block !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    background:
      #06111f !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    z-index:
      70000 !important;

    box-sizing:
      border-box !important;

    color-scheme:
      dark;

  }


  /*
   * Every docs child must fit phone width.
   */

  [aria-label="Noytrix API documentation"]
  * {

    min-width:
      0;

    max-width:
      100%;

    box-sizing:
      border-box;

  }


  /*
   * --------------------------------------------------------
   * DOCS HEADER
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  .nxd-top {

    position:
      sticky !important;

    top:
      0 !important;

    left:
      0 !important;

    right:
      0 !important;

    width:
      100% !important;

    min-height:
      62px !important;

    margin:
      0 !important;

    padding:
      calc(
        10px +
        env(
          safe-area-inset-top
        )
      )
      12px
      10px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      8px !important;

    background:
      rgba(
        5,
        16,
        30,
        .97
      )
      !important;

    border-bottom:
      1px solid
      rgba(
        112,
        143,
        183,
        .18
      )
      !important;

    backdrop-filter:
      blur(
        16px
      ) !important;

    z-index:
      20 !important;

  }


  [aria-label="Noytrix API documentation"]
  .nxd-brand {

    flex:
      1
      1
      auto !important;

    min-width:
      0 !important;

    display:
      flex !important;

    justify-content:
      center !important;

    align-items:
      center !important;

    gap:
      7px !important;

    text-align:
      center !important;

  }


  [aria-label="Noytrix API documentation"]
  .nxd-brand
  .name {

    font-size:
      15px !important;

    font-weight:
      800 !important;

    white-space:
      nowrap !important;

  }


  /*
   * --------------------------------------------------------
   * DOCS CONTENT
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  main,

  [aria-label="Noytrix API documentation"]
  [role="main"] {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      16px
      10px
      calc(
        34px +
        env(
          safe-area-inset-bottom
        )
      )
      !important;

    overflow:
      visible !important;

  }


  /*
   * Any desktop side navigation becomes
   * a normal mobile block instead of stealing width.
   */

  [aria-label="Noytrix API documentation"]
  aside {

    position:
      static !important;

    inset:
      auto !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    max-height:
      none !important;

    margin:
      0
      0
      12px !important;

    padding:
      8px !important;

    overflow-x:
      auto !important;

    overflow-y:
      visible !important;

  }


  /*
   * Navigation can scroll sideways as compact chips.
   */

  [aria-label="Noytrix API documentation"]
  nav {

    max-width:
      100% !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    -webkit-overflow-scrolling:
      touch !important;

    scrollbar-width:
      none !important;

  }


  [aria-label="Noytrix API documentation"]
  nav::-webkit-scrollbar {

    display:
      none !important;

  }


  /*
   * --------------------------------------------------------
   * DOCS TYPOGRAPHY
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  h1 {

    margin:
      10px
      auto
      12px !important;

    font-size:
      28px !important;

    line-height:
      1.08 !important;

    letter-spacing:
      -.025em !important;

    text-align:
      center !important;

  }


  [aria-label="Noytrix API documentation"]
  h2 {

    margin-top:
      25px !important;

    margin-bottom:
      10px !important;

    font-size:
      22px !important;

    line-height:
      1.15 !important;

  }


  [aria-label="Noytrix API documentation"]
  h3 {

    margin-top:
      20px !important;

    margin-bottom:
      8px !important;

    font-size:
      17px !important;

    line-height:
      1.2 !important;

  }


  [aria-label="Noytrix API documentation"]
  h2,

  [aria-label="Noytrix API documentation"]
  h3,

  [aria-label="Noytrix API documentation"]
  h4 {

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  p,

  [aria-label="Noytrix API documentation"]
  li {

    font-size:
      13px !important;

    line-height:
      1.55 !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  small {

    font-size:
      11px !important;

    line-height:
      1.4 !important;

  }


  /*
   * Cards / sections.
   */

  [aria-label="Noytrix API documentation"]
  section,

  [aria-label="Noytrix API documentation"]
  article {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

  }


  /*
   * --------------------------------------------------------
   * CODE
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  pre {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      10px
      0
      14px !important;

    padding:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    border-radius:
      12px !important;

    font-size:
      10.5px !important;

    line-height:
      1.55 !important;

    white-space:
      pre !important;

    tab-size:
      2 !important;

    -webkit-overflow-scrolling:
      touch !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  code {

    font-size:
      .92em !important;

    word-break:
      normal !important;

    overflow-wrap:
      normal !important;

    text-align:
      left !important;

  }


  /*
   * --------------------------------------------------------
   * TABLES
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  table {

    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      10px
      0
      16px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    border-spacing:
      0 !important;

    font-size:
      11px !important;

    -webkit-overflow-scrolling:
      touch !important;

  }


  [aria-label="Noytrix API documentation"]
  th,

  [aria-label="Noytrix API documentation"]
  td {

    min-width:
      105px !important;

    padding:
      9px
      8px !important;

    font-size:
      11px !important;

    line-height:
      1.35 !important;

    white-space:
      normal !important;

    vertical-align:
      top !important;

    text-align:
      left !important;

  }


  /*
   * --------------------------------------------------------
   * DOC BUTTONS / INPUTS
   * --------------------------------------------------------
   */

  [aria-label="Noytrix API documentation"]
  button,

  [aria-label="Noytrix API documentation"]
  a {

    max-width:
      100% !important;

  }


  [aria-label="Noytrix API documentation"]
  input,

  [aria-label="Noytrix API documentation"]
  textarea,

  [aria-label="Noytrix API documentation"]
  select {

    width:
      100% !important;

    max-width:
      100% !important;

    font-size:
      16px !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Wide grids collapse to one column.
   */

  [aria-label="Noytrix API documentation"]
  [class*="grid"] {

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

  }

}


/*
 * EXTRA SMALL PHONE
 */

@media (max-width: 390px) {

  [aria-label="Noytrix API documentation"]
  main,

  [aria-label="Noytrix API documentation"]
  [role="main"] {

    padding-left:
      8px !important;

    padding-right:
      8px !important;

  }


  [aria-label="Noytrix API documentation"]
  h1 {

    font-size:
      25px !important;

  }


  [aria-label="Noytrix API documentation"]
  h2 {

    font-size:
      20px !important;

  }


  [aria-label="Noytrix API documentation"]
  p,

  [aria-label="Noytrix API documentation"]
  li {

    font-size:
      12.5px !important;

  }

}


/* NOYTRIX MOBILE POLISH V3 CSS END */


/* NOYTRIX MOBILE BILLING API V4 CSS START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * REAL BILLING -> API FOR BUSINESS
   * ========================================================
   */

  #screen-billing.nxm-api-business-active-v4 {

    width:
      100% !important;

    max-width:
      100vw !important;

    padding-left:
      7px !important;

    padding-right:
      7px !important;

    overflow-x:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  #screen-billing
  .nxm-api-business-v4 {

    position:
      relative !important;

    width:
      100vw !important;

    max-width:
      100vw !important;

    margin-left:
      calc(
        50% -
        50vw
      )
      !important;

    margin-right:
      calc(
        50% -
        50vw
      )
      !important;

    padding:
      0
      7px
      34px !important;

    box-sizing:
      border-box !important;

    overflow-x:
      hidden !important;

    text-align:
      center !important;

  }


  /*
   * Kill desktop max-widths inside this
   * particular API billing page.
   */

  #screen-billing
  .nxm-api-business-v4
  > * {

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * CENTER EVERYTHING USER-FACING
   * ========================================================
   */

  #screen-billing
  .nxm-api-business-v4
  h1,

  #screen-billing
  .nxm-api-business-v4
  h2,

  #screen-billing
  .nxm-api-business-v4
  h3,

  #screen-billing
  .nxm-api-business-v4
  h4,

  #screen-billing
  .nxm-api-business-v4
  p,

  #screen-billing
  .nxm-api-business-v4
  span,

  #screen-billing
  .nxm-api-business-v4
  strong,

  #screen-billing
  .nxm-api-business-v4
  small,

  #screen-billing
  .nxm-api-business-v4
  li {

    text-align:
      center !important;

  }


  #screen-billing
  .nxm-api-business-v4
  [class*="hero"] {

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

    justify-items:
      center !important;

    align-items:
      center !important;

    text-align:
      center !important;

  }


  /*
   * Current giant hero title was too wide.
   */

  #screen-billing
  .nxm-api-business-v4
  h1 {

    max-width:
      620px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    font-size:
      clamp(
        38px,
        11vw,
        52px
      )
      !important;

    line-height:
      1.04 !important;

    letter-spacing:
      -.035em !important;

  }


  /*
   * ========================================================
   * API DOCUMENTATION = REAL CENTER BUTTON
   * ========================================================
   */

  #screen-billing
  .nxm-billing-api-docs-v4 {

    width:
      auto !important;

    min-width:
      210px !important;

    max-width:
      calc(
        100vw -
        42px
      )
      !important;

    min-height:
      50px !important;

    margin:
      18px
      auto
      24px !important;

    padding:
      0
      22px !important;

    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    border:
      1px solid
      rgba(
        255,
        188,
        48,
        .78
      )
      !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          255,
          186,
          45,
          .17
        ),
        rgba(
          10,
          31,
          55,
          .98
        )
      )
      !important;

    color:
      #ffd066 !important;

    box-shadow:
      0
      10px
      28px
      rgba(
        0,
        0,
        0,
        .24
      )
      !important;

    font-size:
      14px !important;

    font-weight:
      850 !important;

    line-height:
      1 !important;

    text-align:
      center !important;

    text-decoration:
      none !important;

    cursor:
      pointer !important;

    box-sizing:
      border-box !important;

    -webkit-tap-highlight-color:
      transparent !important;

  }


  #screen-billing
  .nxm-billing-api-docs-v4:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  /*
   * ========================================================
   * API PLAN CAROUSEL
   *
   * Starter -> Growth -> Scale
   * horizontal only on mobile.
   * ========================================================
   */

  #screen-billing
  .nxm-api-plan-track-v4 {

    width:
      100vw !important;

    max-width:
      100vw !important;

    margin:
      8px
      0
      14px !important;

    padding:
      2px
      44px
      18px
      7px !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      stretch !important;

    gap:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-left:
      7px !important;

    scrollbar-width:
      none !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    touch-action:
      pan-x pan-y !important;

    box-sizing:
      border-box !important;

  }


  #screen-billing
  .nxm-api-plan-track-v4::-webkit-scrollbar {

    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;

  }


  /*
   * Current screenshot:
   * card is about 596px on a 690px viewport.
   *
   * New:
   * 690 - 76 = 614px
   *
   * Exactly ~18px wider total,
   * approximately requested +0.5cm.
   */

  #screen-billing
  .nxm-api-plan-card-v4 {

    flex:
      0 0
      calc(
        100vw -
        76px
      )
      !important;

    width:
      calc(
        100vw -
        76px
      )
      !important;

    min-width:
      calc(
        100vw -
        76px
      )
      !important;

    max-width:
      calc(
        100vw -
        76px
      )
      !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    padding-left:
      22px !important;

    padding-right:
      22px !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    align-self:
      stretch !important;

    position:
      relative !important;

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    transform:
      none !important;

    box-sizing:
      border-box !important;

  }


  /*
   * More polished card scale.
   */

  #screen-billing
  .nxm-api-plan-card-v4
  h2,

  #screen-billing
  .nxm-api-plan-card-v4
  h3 {

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    font-size:
      clamp(
        34px,
        9vw,
        44px
      )
      !important;

    line-height:
      1.05 !important;

    letter-spacing:
      -.025em !important;

  }


  #screen-billing
  .nxm-api-plan-card-v4
  p {

    max-width:
      520px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    line-height:
      1.48 !important;

  }


  #screen-billing
  .nxm-api-plan-card-v4
  ul {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding-left:
      4px !important;

    padding-right:
      4px !important;

  }


  #screen-billing
  .nxm-api-plan-card-v4
  li {

    justify-content:
      center !important;

    align-items:
      center !important;

    text-align:
      center !important;

  }


  /*
   * ========================================================
   * BUY / CHOOSE BUTTON
   * ========================================================
   */

  #screen-billing
  .nxm-api-buy-v4 {

    width:
      100% !important;

    min-height:
      50px !important;

    margin:
      22px
      auto
      0 !important;

    padding:
      0
      16px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border:
      1px solid
      rgba(
        255,
        188,
        48,
        .92
      )
      !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        135deg,
        #ffc449,
        #eda600
      )
      !important;

    color:
      #071321 !important;

    box-shadow:
      0
      12px
      28px
      rgba(
        255,
        181,
        34,
        .16
      )
      !important;

    font-family:
      inherit !important;

    font-size:
      14px !important;

    font-weight:
      900 !important;

    line-height:
      1 !important;

    text-align:
      center !important;

    text-decoration:
      none !important;

    cursor:
      pointer !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    -webkit-appearance:
      none !important;

    appearance:
      none !important;

  }


  #screen-billing
  .nxm-api-buy-v4:active {

    transform:
      translateY(
        1px
      ) !important;

  }


  /*
   * ========================================================
   * REAL API DOCUMENTATION MOBILE
   * ========================================================
   */

  [aria-label="Noytrix API documentation"].nxm-api-docs-v4 {

    position:
      fixed !important;

    inset:
      0 !important;

    width:
      100vw !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    height:
      100dvh !important;

    max-height:
      100dvh !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain !important;

    -webkit-overflow-scrolling:
      touch !important;

    background:
      #06111f !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    z-index:
      999999 !important;

  }


  [aria-label="Noytrix API documentation"].nxm-api-docs-v4
  * {

    box-sizing:
      border-box !important;

  }


  /*
   * Header
   */

  [aria-label="Noytrix API documentation"]
  .nxd-top {

    position:
      sticky !important;

    top:
      0 !important;

    width:
      100% !important;

    min-height:
      62px !important;

    margin:
      0 !important;

    padding:
      calc(
        10px +
        env(
          safe-area-inset-top
        )
      )
      10px
      10px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    background:
      rgba(
        5,
        16,
        30,
        .97
      )
      !important;

    border-bottom:
      1px solid
      rgba(
        121,
        151,
        190,
        .18
      )
      !important;

    backdrop-filter:
      blur(
        16px
      ) !important;

    z-index:
      50 !important;

  }


  [aria-label="Noytrix API documentation"]
  .nxd-brand {

    min-width:
      0 !important;

    justify-content:
      center !important;

    text-align:
      center !important;

  }


  [aria-label="Noytrix API documentation"]
  .nxd-brand
  .name {

    font-size:
      15px !important;

    font-weight:
      850 !important;

  }


  /*
   * Desktop docs layouts become
   * one readable mobile column.
   */

  [aria-label="Noytrix API documentation"]
  [class*="layout"],

  [aria-label="Noytrix API documentation"]
  [class*="shell"],

  [aria-label="Noytrix API documentation"]
  [class*="body"],

  [aria-label="Noytrix API documentation"]
  [class*="content"],

  [aria-label="Noytrix API documentation"]
  main {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    max-height:
      none !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

  }


  /*
   * Side navigation does not eat
   * half of the phone width.
   */

  [aria-label="Noytrix API documentation"]
  aside {

    position:
      static !important;

    inset:
      auto !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    max-height:
      none !important;

    margin:
      0
      0
      12px !important;

    padding:
      8px !important;

    overflow-x:
      auto !important;

    overflow-y:
      visible !important;

  }


  /*
   * Main docs content.
   */

  [aria-label="Noytrix API documentation"]
  main,

  [aria-label="Noytrix API documentation"]
  [role="main"] {

    padding:
      16px
      10px
      calc(
        40px +
        env(
          safe-area-inset-bottom
        )
      )
      !important;

    overflow:
      visible !important;

  }


  /*
   * Documentation is technical content:
   * body copy stays LEFT aligned for readability.
   */

  [aria-label="Noytrix API documentation"]
  h1 {

    margin:
      8px
      auto
      14px !important;

    font-size:
      28px !important;

    line-height:
      1.08 !important;

    text-align:
      center !important;

  }


  [aria-label="Noytrix API documentation"]
  h2 {

    margin:
      24px
      0
      9px !important;

    font-size:
      21px !important;

    line-height:
      1.18 !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  h3 {

    margin:
      18px
      0
      8px !important;

    font-size:
      17px !important;

    line-height:
      1.2 !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  p,

  [aria-label="Noytrix API documentation"]
  li {

    font-size:
      13px !important;

    line-height:
      1.55 !important;

    text-align:
      left !important;

  }


  /*
   * CODE: horizontal scroll INSIDE block,
   * never the whole page.
   */

  [aria-label="Noytrix API documentation"]
  pre {

    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      10px
      0
      14px !important;

    padding:
      12px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    white-space:
      pre !important;

    font-size:
      10.5px !important;

    line-height:
      1.55 !important;

    border-radius:
      12px !important;

    -webkit-overflow-scrolling:
      touch !important;

    text-align:
      left !important;

  }


  [aria-label="Noytrix API documentation"]
  code {

    text-align:
      left !important;

    word-break:
      normal !important;

    overflow-wrap:
      normal !important;

  }


  /*
   * TABLES: scroll inside themselves.
   */

  [aria-label="Noytrix API documentation"]
  table {

    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    margin:
      10px
      0
      16px !important;

    font-size:
      11px !important;

    -webkit-overflow-scrolling:
      touch !important;

  }


  [aria-label="Noytrix API documentation"]
  th,

  [aria-label="Noytrix API documentation"]
  td {

    min-width:
      105px !important;

    padding:
      8px !important;

    font-size:
      11px !important;

    line-height:
      1.4 !important;

    text-align:
      left !important;

    vertical-align:
      top !important;

  }


  [aria-label="Noytrix API documentation"]
  input,

  [aria-label="Noytrix API documentation"]
  textarea,

  [aria-label="Noytrix API documentation"]
  select {

    width:
      100% !important;

    max-width:
      100% !important;

    font-size:
      16px !important;

  }

}


@media (max-width: 390px) {

  #screen-billing
  .nxm-api-plan-card-v4 {

    flex-basis:
      calc(
        100vw -
        66px
      )
      !important;

    width:
      calc(
        100vw -
        66px
      )
      !important;

    min-width:
      calc(
        100vw -
        66px
      )
      !important;

    max-width:
      calc(
        100vw -
        66px
      )
      !important;

  }


  [aria-label="Noytrix API documentation"]
  h1 {

    font-size:
      25px !important;

  }

}


/* NOYTRIX MOBILE BILLING API V4 CSS END */


/* NOYTRIX MOBILE API UI V5 CSS START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * BILLING -> API FOR BUSINESS HERO
   *
   * TITLE
   * then
   * API DOCUMENTATION BUTTON
   * ========================================================
   */

  #screen-billing
  .nxm-api-billing-hero-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

    grid-template-rows:
      auto
      auto !important;

    justify-items:
      center !important;

    align-items:
      center !important;

    gap:
      16px !important;

    text-align:
      center !important;

  }


  #screen-billing
  .nxm-api-billing-title-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    grid-column:
      1 !important;

    grid-row:
      1 !important;

    margin:
      0
      auto !important;

    text-align:
      center !important;

    justify-self:
      center !important;

  }


  #screen-billing
  .nxm-api-billing-title-v5
  * {

    text-align:
      center !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

  }


  #screen-billing
  .nxm-api-billing-docs-slot-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    grid-column:
      1 !important;

    grid-row:
      2 !important;

    display:
      flex !important;

    justify-content:
      center !important;

    align-items:
      center !important;

    margin:
      0
      auto !important;

    padding:
      0 !important;

  }


  #screen-billing
  .nxm-api-billing-docs-button-v5 {

    width:
      min(
        320px,
        calc(
          100vw -
          46px
        )
      )
      !important;

    min-width:
      0 !important;

    max-width:
      320px !important;

    min-height:
      52px !important;

    height:
      52px !important;

    margin:
      0
      auto
      22px !important;

    padding:
      0
      20px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    position:
      static !important;

    inset:
      auto !important;

    transform:
      none !important;

    text-align:
      center !important;

    border-radius:
      14px !important;

    white-space:
      nowrap !important;

  }


  /*
   * ========================================================
   * DEVELOPER PAGE:
   *
   * GET API KEY | API DOCUMENTATION
   *
   * SAME RECTANGLE
   * SAME HEIGHT
   * SAME WIDTH
   * ONE LINE
   * ========================================================
   */

  #screen-api
  .nxm-dev-actions-row-v5 {

    width:
      100% !important;

    max-width:
      590px !important;

    margin:
      22px
      auto
      18px !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        0,
        1fr
      )
      !important;

    gap:
      10px !important;

    align-items:
      stretch !important;

    justify-content:
      center !important;

  }


  #screen-api
  .nxm-dev-action-slot-v5 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      64px !important;

    min-height:
      64px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      flex !important;

    align-items:
      stretch !important;

  }


  #screen-api
  .nxm-dev-main-action-v5 {

    position:
      static !important;

    inset:
      auto !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      64px !important;

    min-height:
      64px !important;

    max-height:
      64px !important;

    margin:
      0 !important;

    padding:
      0
      12px !important;

    display:
      flex !important;

    flex:
      1
      1
      auto !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      8px !important;

    border-radius:
      14px !important;

    font-size:
      13px !important;

    font-weight:
      850 !important;

    line-height:
      1.05 !important;

    text-align:
      center !important;

    white-space:
      nowrap !important;

    transform:
      none !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Yellow API key button.
   */

  #screen-api
  .nxm-dev-key-action-v5 {

    border:
      1px solid
      rgba(
        255,
        196,
        73,
        .92
      )
      !important;

    background:
      linear-gradient(
        135deg,
        #ffc94d,
        #f2a900
      )
      !important;

    color:
      #071321 !important;

  }


  /*
   * Dark documentation button.
   */

  #screen-api
  .nxm-dev-docs-action-v5 {

    border:
      1px solid
      rgba(
        255,
        190,
        50,
        .75
      )
      !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          255,
          186,
          45,
          .12
        ),
        rgba(
          11,
          31,
          53,
          .98
        )
      )
      !important;

    color:
      #ffd068 !important;

  }


  /*
   * Existing SVG/icon must not change button width.
   */

  #screen-api
  .nxm-dev-main-action-v5
  svg {

    width:
      20px !important;

    height:
      20px !important;

    flex:
      0
      0
      20px !important;

  }


  /*
   * ========================================================
   * WHAT YOU CAN CHECK
   *
   * NO CLIPPED CONTRACTS.
   * LEFT-ALIGNED 2 COLUMN GRID.
   * ========================================================
   */

  #screen-api
  .nxm-check-section-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      16px
      0
      20px !important;

    padding:
      16px
      18px
      18px !important;

    overflow:
      hidden !important;

    text-align:
      left !important;

    box-sizing:
      border-box !important;

  }


  #screen-api
  .nxm-check-title-v5 {

    width:
      100% !important;

    margin:
      0
      0
      13px !important;

    padding:
      0 !important;

    display:
      block !important;

    text-align:
      left !important;

    justify-self:
      start !important;

    align-self:
      start !important;

  }


  #screen-api
  .nxm-check-grid-v5 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      )
      !important;

    grid-auto-flow:
      row !important;

    gap:
      10px !important;

    overflow:
      visible !important;

    transform:
      none !important;

  }


  #screen-api
  .nxm-check-item-v5 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    min-height:
      58px !important;

    margin:
      0 !important;

    padding:
      9px
      11px !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      9px !important;

    text-align:
      left !important;

    border:
      1px solid
      rgba(
        85,
        125,
        172,
        .16
      )
      !important;

    border-radius:
      13px !important;

    background:
      rgba(
        11,
        34,
        60,
        .50
      )
      !important;

    box-sizing:
      border-box !important;

  }


  #screen-api
  .nxm-check-item-v5
  * {

    text-align:
      left !important;

  }


  /*
   * Small icon blocks.
   */

  #screen-api
  .nxm-check-item-v5
  svg {

    width:
      25px !important;

    height:
      25px !important;

    flex:
      0
      0
      25px !important;

  }


  /*
   * Kill horizontal carousel behavior
   * from this particular capability block.
   */

  #screen-api
  .nxm-check-grid-v5 {

    overflow-x:
      visible !important;

    scroll-snap-type:
      none !important;

    touch-action:
      pan-y !important;

  }

}


/*
 * VERY SMALL PHONE
 */

@media (max-width: 390px) {


  #screen-api
  .nxm-dev-actions-row-v5 {

    gap:
      8px !important;

  }


  #screen-api
  .nxm-dev-main-action-v5 {

    height:
      60px !important;

    min-height:
      60px !important;

    max-height:
      60px !important;

    padding-left:
      8px !important;

    padding-right:
      8px !important;

    font-size:
      12px !important;

  }


  #screen-api
  .nxm-check-section-v5 {

    padding-left:
      12px !important;

    padding-right:
      12px !important;

  }


  #screen-api
  .nxm-check-item-v5 {

    padding-left:
      8px !important;

    padding-right:
      8px !important;

    font-size:
      12px !important;

  }

}


/* NOYTRIX MOBILE API UI V5 CSS END */


/* NOYTRIX DEV MOBILE V6 CSS START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * WHAT YOU CAN CHECK
   * ========================================================
   */

  #screen-api
  .nxm-check-section-v6 {

    width:
      calc(
        100% -
        14px
      )
      !important;

    max-width:
      none !important;

    margin:
      18px
      7px
      20px !important;

    padding:
      15px
      14px
      16px !important;

    display:
      block !important;

    overflow:
      hidden !important;

    border-radius:
      18px !important;

    text-align:
      left !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Heading moves LEFT.
   */

  #screen-api
  .nxm-check-heading-v6 {

    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0
      0
      12px !important;

    padding:
      0
      2px !important;

    display:
      block !important;

    position:
      static !important;

    inset:
      auto !important;

    transform:
      none !important;

    text-align:
      left !important;

    justify-self:
      start !important;

    font-size:
      11px !important;

    font-weight:
      800 !important;

    line-height:
      1 !important;

    letter-spacing:
      .10em !important;

  }


  /*
   * Real 2-column mobile grid.
   */

  #screen-api
  .nxm-check-grid-v6 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      )
      !important;

    grid-auto-flow:
      row !important;

    gap:
      9px !important;

    overflow:
      visible !important;

    scroll-snap-type:
      none !important;

    transform:
      none !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Individual item.
   */

  #screen-api
  .nxm-check-item-v6 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      58px !important;

    min-height:
      58px !important;

    max-height:
      58px !important;

    margin:
      0 !important;

    padding:
      8px
      10px !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      9px !important;

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    border:
      1px solid
      rgba(
        84,
        124,
        170,
        .18
      )
      !important;

    border-radius:
      13px !important;

    background:
      rgba(
        10,
        33,
        59,
        .58
      )
      !important;

    text-align:
      left !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Everything inside aligns left.
   */

  #screen-api
  .nxm-check-item-v6
  * {

    text-align:
      left !important;

  }


  /*
   * Icons.
   */

  #screen-api
  .nxm-check-item-v6
  svg {

    width:
      24px !important;

    height:
      24px !important;

    min-width:
      24px !important;

    flex:
      0
      0
      24px !important;

  }


  #screen-api
  .nxm-check-item-v6
  img {

    width:
      24px !important;

    height:
      24px !important;

    min-width:
      24px !important;

    object-fit:
      contain !important;

  }


  /*
   * Labels.
   */

  #screen-api
  .nxm-check-item-v6
  span,

  #screen-api
  .nxm-check-item-v6
  strong,

  #screen-api
  .nxm-check-item-v6
  p,

  #screen-api
  .nxm-check-item-v6
  b {

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    font-size:
      13px !important;

    line-height:
      1.05 !important;

    text-align:
      left !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;

  }


  /*
   * Old horizontal-track leftovers.
   */

  #screen-api
  .nxm-check-empty-v6 {

    display:
      none !important;

  }

}


/*
 * Very narrow phone:
 * slightly smaller spacing but still 2 columns.
 */

@media (max-width: 390px) {


  #screen-api
  .nxm-check-section-v6 {

    margin-left:
      5px !important;

    margin-right:
      5px !important;

    width:
      calc(
        100% -
        10px
      )
      !important;

    padding-left:
      10px !important;

    padding-right:
      10px !important;

  }


  #screen-api
  .nxm-check-grid-v6 {

    gap:
      7px !important;

  }


  #screen-api
  .nxm-check-item-v6 {

    padding-left:
      8px !important;

    padding-right:
      8px !important;

    gap:
      7px !important;

  }


  #screen-api
  .nxm-check-item-v6
  span,

  #screen-api
  .nxm-check-item-v6
  strong,

  #screen-api
  .nxm-check-item-v6
  p,

  #screen-api
  .nxm-check-item-v6
  b {

    font-size:
      12px !important;

  }

}


/* NOYTRIX DEV MOBILE V6 CSS END */


/* NOYTRIX PRODUCTS MOBILE V10 CSS START */


@media (max-width: 820px) {


  /*
   * ========================================================
   * PRODUCTS SCREEN = NO VERTICAL PAGE SCROLL
   * ========================================================
   */

  body:has(
    #screen-products.active
  ) {

    overflow-y:
      hidden !important;

    overscroll-behavior-y:
      none !important;

  }


  #screen-products.nxm-products-fit-v10 {

    width:
      100% !important;

    min-width:
      0 !important;

    height:
      var(
        --nxm-products-height-v10
      )
      !important;

    min-height:
      0 !important;

    max-height:
      var(
        --nxm-products-height-v10
      )
      !important;

    margin:
      0 !important;

    padding:
      0
      6px
      4px !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * ENTIRE CAROUSEL = EXACT SCREEN HEIGHT
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-v23 {

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      hidden !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-stage-v23 {

    position:
      relative !important;

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    margin:
      0 !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-slides-v23 {

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    overflow:
      hidden !important;

  }


  /*
   * ========================================================
   * EACH SLIDE = EXACTLY ONE PHONE SCREEN
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23 {

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    margin:
      0 !important;

    padding:
      clamp(
        12px,
        1.8dvh,
        20px
      )
      14px
      58px
      !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

    grid-template-rows:
      auto
      minmax(
        0,
        1fr
      )
      !important;

    align-items:
      start !important;

    justify-items:
      center !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * COPY — COMPACT + PERFECTLY CENTERED
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-copy-v23 {

    grid-column:
      1 !important;

    grid-row:
      1 !important;

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    margin:
      0
      auto !important;

    padding:
      0
      14px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      clamp(
        4px,
        .8dvh,
        8px
      )
      !important;

    text-align:
      center !important;

    box-sizing:
      border-box !important;

    z-index:
      5 !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-number-v23 {

    margin:
      0
      auto
      2px !important;

    font-size:
      11px !important;

    line-height:
      1 !important;

    text-align:
      center !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-eyebrow-v23 {

    width:
      auto !important;

    max-width:
      calc(
        100% -
        12px
      )
      !important;

    margin:
      0
      auto
      4px !important;

    padding:
      8px
      15px !important;

    font-size:
      clamp(
        10px,
        2.7vw,
        13px
      )
      !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    text-align:
      center !important;

  }


  /*
   * Main headline.
   */

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h1,

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h2,

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h3 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      5px
      auto
      5px !important;

    padding:
      0 !important;

    font-size:
      clamp(
        29px,
        8.8vw,
        42px
      )
      !important;

    line-height:
      .98 !important;

    letter-spacing:
      -.04em !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

  }


  /*
   * Description.
   *
   * THIS fixes the Telegram sentence
   * that was running out of the right side.
   */

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  p {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin:
      4px
      auto
      2px !important;

    padding:
      0
      3px !important;

    font-size:
      clamp(
        12px,
        3.25vw,
        15px
      )
      !important;

    line-height:
      1.32 !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    overflow-wrap:
      anywhere !important;

    word-break:
      normal !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * CTA + NOTE
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-actions-v23 {

    width:
      100% !important;

    max-width:
      360px !important;

    margin:
      8px
      auto
      0 !important;

    padding:
      0 !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      6px !important;

    text-align:
      center !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-cta-v23 {

    width:
      min(
        100%,
        350px
      )
      !important;

    min-width:
      0 !important;

    max-width:
      350px !important;

    height:
      50px !important;

    min-height:
      50px !important;

    max-height:
      50px !important;

    margin:
      0
      auto !important;

    padding:
      0
      15px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    text-align:
      center !important;

    box-sizing:
      border-box !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-actions-v23
  small,

  #screen-products.nxm-products-fit-v10
  .product-actions-v23
  p,

  #screen-products.nxm-products-fit-v10
  .product-actions-v23
  span {

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  /*
   * ========================================================
   * VISUAL — USE ALL REMAINING SPACE, NEVER MAKE PAGE TALLER
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-visual-v23 {

    grid-column:
      1 !important;

    grid-row:
      2 !important;

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    margin:
      3px
      auto
      0 !important;

    padding:
      0 !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Any large laptop / Telegram image / antivirus mockup
   * must stay inside the visual zone.
   */

  #screen-products.nxm-products-fit-v10
  .product-visual-v23
  > * {

    max-width:
      100% !important;

    max-height:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    box-sizing:
      border-box !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-visual-v23
  img,

  #screen-products.nxm-products-fit-v10
  .product-visual-v23
  picture,

  #screen-products.nxm-products-fit-v10
  .product-visual-v23
  video {

    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    max-width:
      100% !important;

    max-height:
      100% !important;

    margin:
      auto !important;

    object-fit:
      contain !important;

  }


  /*
   * ========================================================
   * TELEGRAM — HARD FIX
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23 {

    width:
      100% !important;

    max-width:
      100% !important;

    padding-left:
      12px !important;

    padding-right:
      12px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  p {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding:
      0
      2px !important;

    transform:
      none !important;

    left:
      auto !important;

    right:
      auto !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    transform:
      none !important;

  }


  /*
   * ========================================================
   * ARROWS
   *
   * Stay at the sides and never create extra height.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-arrow-v23 {

    position:
      absolute !important;

    top:
      64% !important;

    bottom:
      auto !important;

    width:
      48px !important;

    height:
      48px !important;

    min-width:
      48px !important;

    min-height:
      48px !important;

    transform:
      translateY(
        -50%
      )
      !important;

    z-index:
      30 !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-arrow-v23.previous {

    left:
      14px !important;

    right:
      auto !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-arrow-v23.next {

    right:
      14px !important;

    left:
      auto !important;

  }


  /*
   * ========================================================
   * DOTS
   *
   * Always visible at bottom of SAME screen.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-dots-v23 {

    position:
      absolute !important;

    left:
      50% !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      12px !important;

    transform:
      translateX(
        -50%
      )
      !important;

    margin:
      0 !important;

    z-index:
      40 !important;

  }


  /*
   * Old counter/swipe hint consumes vertical space.
   * On phone dots already communicate carousel state.
   */

  #screen-products.nxm-products-fit-v10
  .products-counter-v23,

  #screen-products.nxm-products-fit-v10
  .products-swipe-v23 {

    display:
      none !important;

  }


  /*
   * Decorative massive background word
   * must never affect layout.
   */

  #screen-products.nxm-products-fit-v10
  .product-massive-word-v23 {

    position:
      absolute !important;

    pointer-events:
      none !important;

  }

}


/*
 * ==========================================================
 * SHORT PHONE
 * Compact further instead of introducing vertical scroll.
 * ==========================================================
 */

@media (
  max-width: 820px
)
and (
  max-height: 740px
) {


  #screen-products.nxm-products-fit-v10
  .product-slide-v23 {

    padding-top:
      9px !important;

    padding-left:
      10px !important;

    padding-right:
      10px !important;

    padding-bottom:
      50px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-copy-v23 {

    gap:
      3px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-number-v23 {

    display:
      none !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-eyebrow-v23 {

    padding:
      6px
      11px !important;

    margin-bottom:
      1px !important;

    font-size:
      9px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h1,

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h2,

  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  h3 {

    margin:
      2px
      auto !important;

    font-size:
      clamp(
        25px,
        7.8vw,
        34px
      )
      !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-copy-v23
  p {

    margin:
      2px
      auto !important;

    font-size:
      11px !important;

    line-height:
      1.22 !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-actions-v23 {

    margin-top:
      4px !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-cta-v23 {

    height:
      44px !important;

    min-height:
      44px !important;

    max-height:
      44px !important;

  }


  #screen-products.nxm-products-fit-v10
  .products-arrow-v23 {

    width:
      44px !important;

    height:
      44px !important;

    min-width:
      44px !important;

    min-height:
      44px !important;

  }

}


/* NOYTRIX PRODUCTS MOBILE V10 CSS END */


/* NOYTRIX PRODUCTS MOBILE V10.1 START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * FIX THE ACTUAL CAROUSEL
   *
   * V10 accidentally allowed slides to shrink.
   * The original JS moves the whole strip by slide width,
   * therefore every slide MUST remain exactly 100%.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-slides-v23 {

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      stretch !important;

    justify-content:
      flex-start !important;

    width:
      100% !important;

    min-width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    overflow:
      visible !important;

    /*
     * DO NOT override transform.
     * products-v23.js owns translateX().
     */

    box-sizing:
      border-box !important;

  }


  /*
   * EVERY SLIDE MUST BE ONE FULL CAROUSEL WIDTH.
   *
   * This is the critical fix.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23 {

    flex:
      0 0 100% !important;

    flex-grow:
      0 !important;

    flex-shrink:
      0 !important;

    flex-basis:
      100% !important;

    width:
      100% !important;

    min-width:
      100% !important;

    max-width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    box-sizing:
      border-box !important;

  }


  /*
   * ========================================================
   * KEEP EACH SLIDE'S CONTENT VISIBLE
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-copy-v23,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-visual-v23 {

    visibility:
      visible !important;

    opacity:
      1 !important;

  }


  /*
   * ========================================================
   * TELEGRAM
   * Keep everything centered and inside the card.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram {

    overflow:
      hidden !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding-left:
      16px !important;

    padding-right:
      16px !important;

    align-items:
      center !important;

    text-align:
      center !important;

    transform:
      none !important;

    left:
      auto !important;

    right:
      auto !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  h1,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  h2,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  h3,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  p {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    overflow-wrap:
      break-word !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-actions-v23 {

    width:
      100% !important;

    max-width:
      350px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    align-items:
      center !important;

    justify-content:
      center !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23 {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    transform:
      none !important;

  }


  /*
   * Actual Telegram screenshot.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23
  img {

    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    max-width:
      100% !important;

    max-height:
      100% !important;

    margin:
      auto !important;

    object-fit:
      contain !important;

    object-position:
      center center !important;

  }


  /*
   * ========================================================
   * EXTENSION + ANTIVIRUS + MOBILE
   * Same full-width protection.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-extension,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-mobile {

    flex:
      0 0 100% !important;

    width:
      100% !important;

    min-width:
      100% !important;

    max-width:
      100% !important;

  }


  /*
   * ========================================================
   * DOTS + ARROWS
   * Keep exactly where V10 put them.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .products-arrow-v23,

  #screen-products.nxm-products-fit-v10
  .products-dots-v23 {

    visibility:
      visible !important;

    opacity:
      1 !important;

  }

}


/* NOYTRIX PRODUCTS MOBILE V10.1 END */


/* NOYTRIX PRODUCTS MOBILE V10.3 CSS START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * IMPORTANT:
   *
   * Carousel geometry from V10/V10.1 stays untouched.
   * We change ONLY the visual composition.
   * ========================================================
   */


  #screen-products.nxm-products-fit-v10
  .product-visual-v23 {

    overflow:
      visible !important;

    transform-origin:
      center center !important;

  }


  /*
   * ========================================================
   * 01 — MOBILE APP
   *
   * User request:
   * phone screenshot approximately 3x smaller.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-mobile
  .product-visual-v23 {

    width:
      100% !important;

    height:
      100% !important;

    margin:
      0
      auto !important;

    transform:
      translateY(-1%)
      scale(.36)
      !important;

    transform-origin:
      center top !important;

  }


  /*
   * Do NOT additionally shrink the children.
   * The whole original composition is already scaled.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-mobile
  .product-visual-v23
  > * {

    max-width:
      none !important;

    max-height:
      none !important;

  }


  /*
   * ========================================================
   * 02 — BROWSER EXTENSION
   *
   * Laptop + its own labels are treated as ONE composition.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-extension
  .product-visual-v23 {

    width:
      100% !important;

    height:
      100% !important;

    margin:
      0
      auto !important;

    transform:
      translateY(-2%)
      scale(.72)
      !important;

    transform-origin:
      center top !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-extension
  .product-visual-v23
  > * {

    max-width:
      none !important;

    max-height:
      none !important;

  }


  /*
   * The NOYTRIX SHIELD • LIVE PROTECTION label
   * was drifting to the right.
   */

  #screen-products
  .nxm-extension-caption-v103 {

    position:
      relative !important;

    left:
      50% !important;

    right:
      auto !important;

    width:
      max-content !important;

    max-width:
      90% !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    text-align:
      center !important;

    transform:
      translateX(-50%)
      !important;

    white-space:
      nowrap !important;

  }


  /*
   * ========================================================
   * 03 — TELEGRAM
   *
   * Keep the original Telegram screenshot as one unit.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23 {

    width:
      100% !important;

    height:
      100% !important;

    margin:
      0
      auto !important;

    transform:
      translateY(-1%)
      scale(.70)
      !important;

    transform-origin:
      center top !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-visual-v23
  > * {

    max-width:
      none !important;

    max-height:
      none !important;

  }


  /*
   * Telegram text above screenshot stays normal.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23 {

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0
      auto !important;

    padding-left:
      18px !important;

    padding-right:
      18px !important;

    transform:
      none !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-telegram
  .product-copy-v23
  p {

    width:
      100% !important;

    max-width:
      100% !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

  }


  /*
   * ========================================================
   * 04 — ANTIVIRUS
   *
   * CRITICAL:
   * monitor + halo + Browser/Wallet/Downloads are scaled
   * TOGETHER instead of being resized independently.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .product-visual-v23 {

    width:
      100% !important;

    height:
      100% !important;

    margin:
      0
      auto !important;

    overflow:
      visible !important;

    transform:
      translateY(-2%)
      scale(.64)
      !important;

    transform-origin:
      center top !important;

  }


  /*
   * Undo the broad child size limits from the earlier
   * mobile visual experiment.
   *
   * We want the ORIGINAL desktop composition internally.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .product-visual-v23
  > * {

    max-width:
      none !important;

    max-height:
      none !important;

  }


  /*
   * Do not convert antivirus children into mobile flex rows.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .product-visual-v23
  [style] {

    max-width:
      none;

  }


  /*
   * ========================================================
   * GENERAL MEDIA:
   *
   * Do not crop assets.
   * We scale the parent visual instead.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-visual-v23
  img,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-visual-v23
  video,

  #screen-products.nxm-products-fit-v10
  .product-slide-v23
  .product-visual-v23
  picture {

    object-fit:
      contain !important;

    object-position:
      center center !important;

  }


  /*
   * ========================================================
   * SAFETY:
   * slide itself clips anything beyond rounded card.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23 {

    overflow:
      hidden !important;

  }


  /*
   * Arrows and dots are NOT part of the scaled visual.
   */

  #screen-products.nxm-products-fit-v10
  .products-arrow-v23,

  #screen-products.nxm-products-fit-v10
  .products-dots-v23 {

    transform-origin:
      center center !important;

  }

}


/* NOYTRIX PRODUCTS MOBILE V10.3 CSS END */


/* NOYTRIX PHONE DOWN V10.3.1 START */

@media (max-width: 820px) {

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-mobile
  .product-visual-v23 {

    transform:
      translate3d(
        0,
        72px,
        0
      )
      scale(.36)
      !important;

    transform-origin:
      center top
      !important;

  }

}

/* NOYTRIX PHONE DOWN V10.3.1 END */


\n



\n\n



\n


/* NOYTRIX ANTIVIRUS V10.7 FINAL START */

@media (max-width: 820px) {


  /*
   * ========================================================
   * ROOT CAUSE FIX
   *
   * V10.3 scales entire antivirus visual to .64.
   * Kill that scaling ONLY for antivirus.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .product-visual-v23 {

    transform:
      none !important;

    transform-origin:
      center center !important;

    overflow:
      visible !important;

  }


  /*
   * ========================================================
   * ORIGINAL SCENE
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-scene-v24 {

    width:
      100% !important;

    height:
      100% !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    position:
      relative !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    overflow:
      visible !important;

  }


  /*
   * ========================================================
   * WHOLE MACHINE
   *
   * Monitor + frame + stand now scale TOGETHER.
   *
   * Current effective monitor:
   * .64 × 1.29 ≈ .826
   *
   * New final:
   * .78
   *
   * So it becomes just slightly smaller,
   * exactly as requested.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-machine-v24 {

    position:
      relative !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    width:
      auto !important;

    max-width:
      none !important;

    margin:
      0 auto !important;

    transform:
      translate3d(
        0,
        6px,
        0
      )
      scale(.78)
      !important;

    transform-origin:
      center center !important;

    overflow:
      visible !important;

    z-index:
      12 !important;

  }


  /*
   * ========================================================
   * MONITOR
   *
   * REMOVE custom fake V10.6 frame.
   * Let ORIGINAL products-v23.css render real monitor.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-v24 {

    position:
      relative !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    max-width:
      none !important;

    overflow:
      visible !important;

    box-sizing:
      border-box !important;

  }


  /*
   * V10.6 created its own fake lower bezel.
   * Remove it completely.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-v24::after {

    content:
      none !important;

    display:
      none !important;

  }


  /*
   * ========================================================
   * ORIGINAL STAND
   *
   * Keep it directly connected to monitor.
   * No independent scaling.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-stand-v24 {

    position:
      relative !important;

    margin:
      0 auto !important;

    transform:
      none !important;

    transform-origin:
      center top !important;

  }


  /*
   * ========================================================
   * DIAMOND
   *
   * Keep approximately same visible size
   * but move it clearly upward.
   *
   * Negative top margin physically changes layout,
   * unlike the previous visual-only translate.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-shield-v24 {

    margin-top:
      -24px !important;

    margin-bottom:
      24px !important;

    transform:
      scale(1.10)
      !important;

    transform-origin:
      center center !important;

    z-index:
      20 !important;

  }


  /*
   * ========================================================
   * CONTENT
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-content-v24 {

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    text-align:
      center !important;

    overflow:
      visible !important;

  }


  /*
   * CRYPTO PROTECTED stays inside monitor.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-content-v24
  > strong {

    position:
      relative !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  /*
   * Real-time protection text.
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-content-v24
  > small {

    position:
      relative !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;

  }


  /*
   * ========================================================
   * BROWSER / WALLET / DOWNLOADS
   *
   * They belong INSIDE monitor-content in original DOM.
   * Keep them there.
   * ========================================================
   */

  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-live-row-v24 {

    position:
      relative !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    justify-content:
      center !important;

  }


  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-live-row-v24
  > span {

    position:
      relative !important;

    top:
      auto !important;

    transform:
      none !important;

  }


}


/* NOYTRIX ANTIVIRUS V10.7 FINAL END */

/* NOYTRIX MOBILE MONITOR SIZE FORCE START */
@media screen and (max-width: 820px) {

  html body
  #screen-products.nxm-products-fit-v10
  .product-slide-v23.theme-antivirus
  .antivirus-machine-v24 {

    transform:
      translate3d(0, calc(6px - 3cm), 0)
      scale(.34)
      !important;

    transform-origin:
      center center
      !important;
  }

}
/* NOYTRIX MOBILE MONITOR SIZE FORCE END */

/* NOYTRIX MOBILE REAL MONITOR INSIDE START */
@media screen and (max-width: 820px) {

  html body
  #screen-products
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-v24 {
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  /*
   * После JS нижняя часть уже является CHILD монитора.
   * Ставим её строго внутрь рамки.
   */
  html body
  #screen-products
  .product-slide-v23.theme-antivirus
  .antivirus-monitor-v24
  > .antivirus-monitor-stand-v24 {
    display: block !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    margin: 0 !important;

    transform:
      translateX(-50%)
      !important;

    transform-origin:
      center bottom
      !important;

    z-index: 50 !important;

    max-width:
      calc(100% - 12px)
      !important;

    box-sizing:
      border-box
      !important;
  }

}
/* NOYTRIX MOBILE REAL MONITOR INSIDE END */



/* NOYTRIX MOBILE SIGNALS CLEAN FILTERS START */
@media screen and (max-width: 820px) {

  /*
   * ==========================================================
   * SIGNALS TOOLBAR
   * ==========================================================
   */

  html body .signals-toolbar-v19 {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      56px
      minmax(0, 1fr)
      !important;

    gap:
      12px
      12px
      !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
      20px
      22px
      18px
      !important;

    box-sizing: border-box !important;

    align-items: center !important;

    overflow: visible !important;
  }


  /*
   * SEARCH
   */

  html body .signals-toolbar-v19
  .signals-search-v19 {
    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  html body .signals-toolbar-v19
  .signals-search-v19
  input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * ==========================================================
   * REAL NATIVE SELECT
   *
   * НЕ УДАЛЯЕМ.
   * Он остаётся в DOM для signals-v19.js.
   *
   * Но после успешной инициализации custom dropdown
   * JS добавляет класс nx-signals-native-select-v4.
   * Тогда настоящий browser select полностью скрываем.
   * ==========================================================
   */

  html body .signals-toolbar-v19
  select.nx-signals-native-select-v4,

  html body .signals-toolbar-v19
  #signalsNetworkV19.nx-signals-native-select-v4,

  html body .signals-toolbar-v19
  #signalsSeverityV19.nx-signals-native-select-v4,

  html body .signals-toolbar-v19
  #signalsPeriodV19.nx-signals-native-select-v4 {
    display: none !important;

    position: absolute !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;
  }


  /*
   * ==========================================================
   * CUSTOM SELECT WRAPPER
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .nx-signals-select-v4 {
    position: relative !important;

    grid-column:
      1 / -1
      !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    z-index: 20 !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-v4.open {
    z-index: 5000 !important;
  }


  /*
   * ==========================================================
   * VISIBLE DARK BUTTON
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .nx-signals-select-button-v4 {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;

    padding:
      0
      16px
      !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(72, 111, 158, .55)
      !important;

    border-radius:
      14px
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(8, 27, 50, .98),
        rgba(5, 20, 39, .98)
      )
      !important;

    color:
      #e5edf7
      !important;

    font-family:
      inherit
      !important;

    font-size:
      16px
      !important;

    font-weight:
      700
      !important;

    line-height:
      1
      !important;

    text-align:
      left
      !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025)
      !important;

    cursor: pointer !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-label-v4 {
    display: block !important;

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    color:
      #e5edf7
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-arrow-v4 {
    flex: 0 0 auto !important;

    margin-left:
      12px
      !important;

    color:
      #9eb1c8
      !important;
  }


  /*
   * ==========================================================
   * CUSTOM MENU
   *
   * ЗАКРЫТО = вообще не видно
   * OPEN     = только тёмное меню
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .nx-signals-select-menu-v4 {
    position: absolute !important;

    top:
      calc(100% + 7px)
      !important;

    left: 0 !important;
    right: auto !important;

    display: none !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    max-height:
      310px
      !important;

    margin: 0 !important;
    padding: 6px !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    border:
      1px solid
      rgba(72, 111, 158, .58)
      !important;

    border-radius:
      14px
      !important;

    background:
      rgba(5, 18, 34, .995)
      !important;

    box-shadow:
      0 20px 50px
      rgba(0, 0, 0, .48)
      !important;

    z-index:
      99999
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-v4.open
  .nx-signals-select-menu-v4 {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
  }


  /*
   * ==========================================================
   * DROPDOWN OPTIONS
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .nx-signals-select-option-v4 {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height:
      48px
      !important;

    margin: 0 !important;

    padding:
      0
      13px
      !important;

    box-sizing: border-box !important;

    border: 0 !important;

    border-radius:
      9px
      !important;

    background:
      transparent
      !important;

    color:
      #dce7f4
      !important;

    font-family:
      inherit
      !important;

    font-size:
      15px
      !important;

    font-weight:
      600
      !important;

    line-height:
      1.2
      !important;

    text-align:
      left
      !important;

    box-shadow:
      none
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-option-v4:hover,

  html body .signals-toolbar-v19
  .nx-signals-select-option-v4:focus-visible {
    background:
      rgba(68, 111, 164, .16)
      !important;

    color:
      #ffffff
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-option-v4.selected {
    background:
      rgba(219, 162, 37, .11)
      !important;

    color:
      #ffffff
      !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-option-label-v4 {
    min-width: 0 !important;

    color: inherit !important;

    white-space: normal !important;
  }


  html body .signals-toolbar-v19
  .nx-signals-select-check-v4 {
    flex: 0 0 auto !important;

    margin-left:
      12px
      !important;

    color:
      #e6ad2f
      !important;
  }


  /*
   * ==========================================================
   * ONLY NEW
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .signals-new-v19 {
    grid-column:
      1 / -1
      !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height:
      50px
      !important;

    margin:
      2px
      0
      0
      !important;

    box-sizing: border-box !important;
  }


  /*
   * ==========================================================
   * REFRESH + UPDATED TEXT
   * ==========================================================
   */

  html body .signals-toolbar-v19
  .signals-refresh-v19 {
    grid-column:
      1
      !important;

    grid-row:
      auto
      !important;

    justify-self:
      start
      !important;

    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  html body .signals-toolbar-v19
  .signals-updated-v19 {
    grid-column:
      2
      !important;

    align-self:
      center
      !important;

    justify-self:
      start
      !important;

    width: auto !important;

    margin: 0 !important;

    text-align: left !important;
  }

}
/* NOYTRIX MOBILE SIGNALS CLEAN FILTERS END */

/* ==========================================================
   NOYTRIX MOBILE SIGNALS — ALL FEEDS SCROLL
   DESKTOP UNTOUCHED
   ========================================================== */
@media screen and (max-width: 820px) {

  /*
   * Убираем нижние кнопки:
   * "Все сигналы сообщества"
   * "Открыть календарь"
   * и остальные footer-кнопки Signals.
   */
  html body
  .signals-grid-v19
  .signals-column-footer-v19 {
    display: none !important;
  }


  /*
   * Все три блока:
   * Критические угрозы
   * Сигналы сообщества
   * Важные события рынка
   */
  html body
  .signals-grid-v19
  .signals-column-v19 {
    display: flex !important;
    flex-direction: column !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;
  }


  /*
   * ВНУТРЕННИЙ СКРОЛ ДЛЯ КАЖДОГО FEED.
   * Включая КРИТИЧЕСКИЕ УГРОЗЫ.
   */
  html body
  .signals-grid-v19
  .signals-column-v19
  .signals-feed-v19 {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    max-height: 520px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  /*
   * КРИТИЧЕСКИЕ УГРОЗЫ —
   * принудительно такой же скрол как у остальных.
   */
  html body
  #signalsThreatColumnV19
  #signalsThreatFeedV19 {
    max-height: 520px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }


  /*
   * Нормальный отступ после списка,
   * раз footer-кнопок больше нет.
   */
  html body
  .signals-grid-v19
  .signals-column-v19
  .signals-feed-v19:last-child {
    padding-bottom: 12px !important;
  }


  /*
   * Chrome scrollbar — аккуратный и тёмный.
   */
  html body
  .signals-grid-v19
  .signals-feed-v19::-webkit-scrollbar {
    width: 4px !important;
  }

  html body
  .signals-grid-v19
  .signals-feed-v19::-webkit-scrollbar-track {
    background: transparent !important;
  }

  html body
  .signals-grid-v19
  .signals-feed-v19::-webkit-scrollbar-thumb {
    background: rgba(100, 139, 185, .42) !important;
    border-radius: 999px !important;
  }

}
/* NOYTRIX MOBILE SIGNALS — ALL FEEDS SCROLL END */



/* NOYTRIX TRACKING MOBILE FINAL START */
@media screen and (max-width: 820px) {

  /* ========================================================
     ROOT
     ======================================================== */

  html body #screen-tracking,
  html body #screen-tracking .tracking-v14 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  html body #screen-tracking * {
    box-sizing: border-box;
  }


  /* ========================================================
     HERO
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-head {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-head h1,
  html body #screen-tracking
  .tracking-v14-head h2 {
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     KPI — 2 x 2
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-stats {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-stats > article {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 118px !important;
    height: auto !important;

    margin: 0 !important;

    padding:
      18px
      14px
      !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-stats .stat-icon {
    flex-shrink: 0 !important;
  }


  html body #screen-tracking
  .tracking-v14-stats small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     FILTER TOOLBAR
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-toolbar {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding:
      16px
      20px
      18px
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    text-align: left !important;
  }


  /* SEARCH */

  html body #screen-tracking
  .tracking-v14-search {
    display: flex !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 54px !important;

    margin: 0 !important;
  }


  html body #screen-tracking
  .tracking-v14-search input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    font-size: 16px !important;

    text-align: left !important;
  }


  /* NATIVE SELECTS */

  html body #screen-tracking
  .tracking-v14-toolbar select {
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * nx-tracking-dropdown-v19.js создаёт wrapper
   * с data-dropdown-index.
   */
  html body #screen-tracking
  .tracking-v14-toolbar
  [data-dropdown-index] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-toolbar
  [data-dropdown-index] > button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 54px !important;

    box-sizing: border-box !important;
  }


  /* REFRESH */

  html body #screen-tracking
  .tracking-v14-refresh {
    justify-self: start !important;

    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
  }


  /* ========================================================
     MAIN BODY

     Был desktop: TABLE | LATEST CHANGES.
     На телефоне теперь строго сверху вниз.
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-body {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 16px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding:
      0
      20px
      18px
      !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    text-align: left !important;
  }


  /* ========================================================
     OBJECTS TABLE
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-table {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    box-sizing: border-box !important;
  }


  /*
   * Desktop header из 5 колонок на телефоне не нужен.
   * Сами данные остаются в rows.
   */
  html body #screen-tracking
  .tracking-v14-table-head {
    display: none !important;

    min-width: 0 !important;
    width: 0 !important;
    height: 0 !important;

    overflow: hidden !important;
  }


  html body #screen-tracking
  .tracking-v14-rows {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 220px !important;

    max-height: 520px !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;

    box-sizing: border-box !important;
  }


  /*
   * Любой guest / empty / object блок внутри списка
   * занимает полную ширину.
   */
  html body #screen-tracking
  .tracking-v14-rows > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-v14-rows *
  {
    max-width: 100%;
  }


  /* ========================================================
     LATEST CHANGES
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-changes {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 260px !important;
    max-height: 440px !important;

    margin: 0 !important;

    padding:
      18px
      16px
      !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;

    box-sizing: border-box !important;

    text-align: left !important;
  }


  html body #screen-tracking
  .tracking-v14-changes h3 {
    width: 100% !important;

    margin:
      0
      0
      16px
      !important;

    text-align: left !important;
  }


  html body #screen-tracking
  #trackingChangesV14 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  html body #screen-tracking
  #trackingChangesV14 > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /* ========================================================
     OLD FOOTER
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      14px
      18px
      !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     NOTIFICATION BAR
     Причина нижнего обрезания:
     desktop grid minmax(300px,1fr) auto auto auto.
     ======================================================== */

  html body #screen-tracking
  .tracking-notify-v15 {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      14px
      16px
      calc(14px + env(safe-area-inset-bottom))
      !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-notify-info-v15 {
    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }


  html body #screen-tracking
  .tracking-notify-info-v15 strong,
  html body #screen-tracking
  .tracking-notify-info-v15 small {
    white-space: normal !important;

    overflow: visible !important;
    text-overflow: unset !important;

    overflow-wrap: anywhere !important;

    text-align: left !important;
  }


  html body #screen-tracking
  .tracking-channel-v15,

  html body #screen-tracking
  .tracking-frequency-v15 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  html body #screen-tracking
  .tracking-notify-status-v15 {
    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }


  html body #screen-tracking
  .tracking-notify-v15
  select,

  html body #screen-tracking
  .tracking-notify-v15
  [data-dropdown-index] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /* ========================================================
     MODAL
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-modal-card {
    width:
      calc(100vw - 32px)
      !important;

    max-width:
      calc(100vw - 32px)
      !important;

    min-width: 0 !important;

    max-height:
      calc(100dvh - 32px)
      !important;

    overflow-y: auto !important;

    margin: 16px !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     NEVER ALLOW TRACKING TO CREATE PAGE HORIZONTAL SCROLL
     ======================================================== */

  html body #screen-tracking
  .tracking-v14-head,

  html body #screen-tracking
  .tracking-v14-stats,

  html body #screen-tracking
  .tracking-v14-toolbar,

  html body #screen-tracking
  .tracking-v14-body,

  html body #screen-tracking
  .tracking-v14-table,

  html body #screen-tracking
  .tracking-v14-rows,

  html body #screen-tracking
  .tracking-v14-changes,

  html body #screen-tracking
  .tracking-v14-footer,

  html body #screen-tracking
  .tracking-notify-v15 {
    transform: none !important;

    left: auto !important;
    right: auto !important;

    max-width: 100% !important;
  }

}


/* Маленькие телефоны */
@media screen and (max-width: 430px) {

  html body #screen-tracking
  .tracking-v14-stats {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }


  html body #screen-tracking
  .tracking-notify-v15 {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }


  html body #screen-tracking
  .tracking-notify-info-v15,

  html body #screen-tracking
  .tracking-notify-status-v15 {
    grid-column:
      1
      !important;
  }

}

/* NOYTRIX TRACKING MOBILE FINAL END */



/* NOYTRIX MOBILE TRACKING POLISH START */
@media screen and (max-width: 820px) {

  /* ========================================================
     TOP KPI — LABEL + VALUE EXACTLY CENTERED
     Icon stays where it already is.
     ======================================================== */

  html body
  .nx-mobile-tracking-kpi {
    position: relative !important;
  }

  html body
  .nx-mobile-tracking-kpi-value {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform:
      translate(-50%, -50%)
      !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width:
      min(58%, 280px)
      !important;

    margin: 0 !important;

    text-align: center !important;
  }

  html body
  .nx-mobile-tracking-kpi-value small,
  html body
  .nx-mobile-tracking-kpi-value span,
  html body
  .nx-mobile-tracking-kpi-value strong,
  html body
  .nx-mobile-tracking-kpi-value em {
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }


  /* ========================================================
     TRACKING FOOTER
     ======================================================== */

  html body
  .tracking-v14-footer {
    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 16px !important;

    width: 100% !important;

    padding:
      22px
      22px
      24px
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }

  html body
  .tracking-v14-footer > div:first-child {
    display: flex !important;

    align-items: flex-start !important;

    width: 100% !important;

    margin: 0 !important;
  }


  /* ========================================================
     PUSH / TELEGRAM / EMAIL + FREQUENCY
     Existing real controls are moved here by JS.
     They are NOT cloned, so their existing click handlers stay.
     ======================================================== */

  html body
  .nx-mobile-tracking-notifications {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      !important;

    gap:
      10px
      !important;

    width: 100% !important;

    margin:
      2px
      0
      0
      !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* Push / Telegram / Email */

  html body
  .nx-mobile-tracking-channel {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;

    padding:
      0
      8px
      !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(69, 105, 148, .58)
      !important;

    border-radius:
      14px
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(8, 28, 51, .98),
        rgba(5, 20, 39, .98)
      )
      !important;

    color:
      #aebed2
      !important;

    font-family:
      inherit
      !important;

    font-size:
      14px
      !important;

    font-weight:
      700
      !important;

    line-height:
      1
      !important;

    text-align:
      center
      !important;

    white-space:
      nowrap
      !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025)
      !important;

    cursor: pointer !important;
  }


  html body
  .nx-mobile-tracking-channel:not(:disabled) {
    pointer-events: auto !important;
  }


  html body
  .nx-mobile-tracking-channel.active,

  html body
  .nx-mobile-tracking-channel.is-active,

  html body
  .nx-mobile-tracking-channel[aria-pressed="true"],

  html body
  .nx-mobile-tracking-channel[data-active="true"] {
    border-color:
      rgba(255, 183, 44, .82)
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(85, 57, 8, .56),
        rgba(46, 34, 10, .52)
      )
      !important;

    color:
      #ffc247
      !important;
  }


  html body
  .nx-mobile-tracking-channel:disabled {
    cursor: not-allowed !important;
  }


  /* ========================================================
     FREQUENCY
     ======================================================== */

  html body
  .nx-mobile-tracking-frequency {
    grid-column:
      1 / -1
      !important;

    display: grid !important;

    grid-template-columns:
      auto
      minmax(0, 1fr)
      !important;

    align-items: center !important;

    gap:
      12px
      !important;

    width: 100% !important;
    min-width: 0 !important;

    margin:
      2px
      0
      0
      !important;

    padding: 0 !important;

    box-sizing: border-box !important;
  }


  html body
  .nx-mobile-tracking-frequency > span:first-child,

  html body
  .nx-mobile-tracking-frequency > label:first-child {
    margin: 0 !important;

    color:
      #92a2b8
      !important;

    font-size:
      14px
      !important;

    font-weight:
      700
      !important;

    white-space:
      nowrap
      !important;
  }


  html body
  .nx-mobile-tracking-frequency select {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;

    padding:
      0
      44px
      0
      16px
      !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(69, 105, 148, .62)
      !important;

    border-radius:
      14px
      !important;

    background-color:
      rgba(7, 25, 47, .98)
      !important;

    color:
      #dbe5f1
      !important;

    font-family:
      inherit
      !important;

    font-size:
      15px
      !important;

    font-weight:
      700
      !important;

    cursor: pointer !important;
  }


  html body
  .nx-mobile-tracking-frequency select option {
    background:
      #07192f
      !important;

    color:
      #e6edf7
      !important;
  }


  /* No horizontal overflow from footer controls */

  html body
  .tracking-v14-footer,
  html body
  .tracking-v14-footer * {
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

}
/* NOYTRIX MOBILE TRACKING POLISH END */



/* NOYTRIX MOBILE TRACKING REAL TABLE START */
@media screen and (max-width: 820px) {

  /* ========================================================
     BODY
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-body {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 20px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     MAIN MONITORED OBJECTS BOX
     THIS IS THE SCROLL CONTAINER
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: contain !important;

    touch-action: pan-x pan-y !important;

    scrollbar-width: thin !important;

    scrollbar-gutter: stable !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     RESTORE REAL DESKTOP TABLE HEADER
     
     Desktop columns:
     Object / Current risk / Change / Last check / Actions
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table-head {
    position: sticky !important;

    top: 0 !important;
    left: 0 !important;

    z-index: 20 !important;

    display: grid !important;

    grid-template-columns:
      minmax(230px, 1.45fr)
      150px
      145px
      115px
      105px
      !important;

    grid-template-areas: none !important;

    align-items: center !important;

    width: 790px !important;
    min-width: 790px !important;
    max-width: 790px !important;

    min-height: 45px !important;

    margin: 0 !important;

    padding:
      0
      13px
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    background:
      #07172e
      !important;

    border-bottom:
      1px solid
      rgba(46, 70, 104, .92)
      !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table-head > * {
    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;

    min-width: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     ROWS WRAPPER
     Parent table scrolls — rows wrapper must NOT clip.
     ======================================================== */

  html body
  #screen-tracking
  #trackingRowsV14,

  html body
  #screen-tracking
  .tracking-v14-rows {
    display: block !important;

    width: 790px !important;
    min-width: 790px !important;
    max-width: 790px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     EVERY REAL MONITORING ROW
     FORCE THE SAME 5 COLUMNS AS DESKTOP
     ======================================================== */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-v14-row {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      minmax(230px, 1.45fr)
      150px
      145px
      115px
      105px
      !important;

    grid-template-areas: none !important;

    grid-auto-flow: row !important;

    align-items: center !important;

    width: 790px !important;
    min-width: 790px !important;
    max-width: 790px !important;

    min-height: 68px !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
      7px
      13px
      !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /*
   * Убираем мобильные grid-area/grid-column,
   * которые превращали строку в обрезанную карточку.
   */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-v14-row > * {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;

    min-width: 0 !important;
    max-width: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
  }


  /* Object cell stays flex like desktop */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-object-cell-v14 {
    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-width: 0 !important;

    overflow: visible !important;
  }


  /* Risk must stay INSIDE its own desktop column */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-risk-v14 {
    position: relative !important;

    inset: auto !important;

    transform: none !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* Actions remain usable */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-more-v14 {
    position: relative !important;

    inset: auto !important;

    transform: none !important;

    min-width: 0 !important;

    overflow: visible !important;
  }


  /* ========================================================
     TABLE SCROLLBAR
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-track {
    display: block !important;

    background:
      transparent
      !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-thumb {
    display: block !important;

    background:
      rgba(97, 139, 191, .52)
      !important;

    border-radius:
      999px
      !important;
  }


  /* ========================================================
     LATEST CHANGES BOX
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-changes {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    padding:
      15px
      14px
      !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  .tracking-v14-changes > h3 {
    flex:
      0 0 auto
      !important;

    margin:
      0
      0
      14px
      !important;
  }


  /* Real scroll area inside Latest changes */

  html body
  #screen-tracking
  #trackingChangesV14 {
    flex:
      1 1 auto
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;

    touch-action: pan-y !important;

    scrollbar-width: thin !important;

    scrollbar-gutter: stable !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-track {
    display: block !important;

    background:
      transparent
      !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-thumb {
    display: block !important;

    background:
      rgba(97, 139, 191, .52)
      !important;

    border-radius:
      999px
      !important;
  }


  /*
   * IMPORTANT:
   * Mobile page itself stays normal width.
   * Only the INSIDE of the table scrolls horizontally.
   */

  html body
  #screen-tracking {
    overflow-x: hidden !important;
  }

}
/* NOYTRIX MOBILE TRACKING REAL TABLE END */



/* NOYTRIX MOBILE SETTINGS REAL FIT START */
@media screen and (max-width: 820px) {

  /* ========================================================
     1. PROFILE ROOT
     ======================================================== */

  html body #screen-profile-v56,
  html body .p56-screen {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  /* ========================================================
     2. V105 REAL SETTINGS HOST

     Это настоящий контейнер, в который сейчас
     физически вложен #screen-settings.
     ======================================================== */

  html body
  #screen-profile-v56
  > .nx105-settings-only,

  html body
  .p56-screen
  > .nx105-settings-only {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;

    /*
     * Убираем max-content из V105.
     */
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* ========================================================
     3. V104 SECTION / HOST
     ======================================================== */

  html body
  #screen-profile-v56
  .nx104-settings-section,

  html body
  #screen-profile-v56
  .nx104-real-settings-section,

  html body
  #screen-profile-v56
  .nx104-settings-host {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  /* ========================================================
     4. REAL ORIGINAL #screen-settings
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings,

  html body
  #screen-profile-v56
  #screen-settings.nx104-embedded-settings,

  html body
  #screen-profile-v56
  #screen-settings.nx105-real-settings {
    position: relative !important;

    inset: auto !important;

    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;

    padding:
      8px
      0
      40px
      !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* ========================================================
     5. OLD SETTINGS WORKSPACE / MAIN
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-workspace,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-main {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      0
      auto
      !important;

    padding:
      0
      !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  /* ========================================================
     6. HEADER

     В workspace.css здесь стоял:
     min-width: max-content
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-page-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-profile-v56
  #screen-settings
  .settings-page-tools {
    display: flex !important;

    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    /*
     * ВАЖНО:
     * перебиваем старый min-width:max-content
     */
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     7. SETTINGS NAV
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-section-nav {
    position: static !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    gap: 6px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      0
      auto
      16px
      !important;

    padding: 8px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  html body
  #screen-profile-v56
  #screen-settings
  .settings-section-nav
  button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding:
      10px
      8px
      !important;

    justify-content: flex-start !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     8. OLD SETTINGS CARDS
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;

    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: 620px !important;

    margin:
      0
      auto
      14px
      !important;

    padding:
      18px
      16px
      !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  /*
   * Никакой внутренний div не имеет права
   * растянуть карточку шире телефона.
   */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  * {
    min-width: 0 !important;
    max-width: 100%;

    box-sizing: border-box !important;
  }


  /* ========================================================
     9. OLD SETTINGS TEXT / HEADINGS
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  h2,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  h3 {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  p,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  label,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  span,

  html body
  #screen-profile-v56
  #screen-settings
  .settings-panel
  strong {
    white-space: normal !important;

    overflow-wrap: break-word !important;
  }


  /* ========================================================
     10. FORM CONTROLS
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  select,

  html body
  #screen-profile-v56
  #screen-settings
  input:not([type="checkbox"]),

  html body
  #screen-profile-v56
  #screen-settings
  textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  /*
   * Switch stays on the right,
   * but cannot leave the card.
   */

  html body
  #screen-profile-v56
  #screen-settings
  input[type="checkbox"],

  html body
  #screen-profile-v56
  #screen-settings
  [role="switch"] {
    flex:
      0 0 auto
      !important;

    margin-left:
      auto
      !important;

    margin-right:
      0
      !important;
  }


  /* ========================================================
     11. V100 PAGE
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-page {
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: 620px !important;

    margin:
      0
      auto
      !important;

    padding:
      0
      !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  html body
  #screen-profile-v56
  .nx100-page
  * {
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     12. V100 CARDS
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      0
      auto
      14px
      !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  html body
  #screen-profile-v56
  .nx100-card-head {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding:
      14px
      14px
      !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-profile-v56
  .nx100-card-head
  > div:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
  }


  html body
  #screen-profile-v56
  .nx100-card-head
  h2,

  html body
  #screen-profile-v56
  .nx100-card-head
  p {
    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     13. V100 ROWS

     Desktop flex + 150px control was pushing the row.
     Mobile becomes real two-column grid:
       text | switch
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-row {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto
      !important;

    align-items: center !important;

    gap:
      12px
      !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding:
      14px
      14px
      !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-profile-v56
  .nx100-row-copy {
    min-width: 0 !important;
    max-width: 100% !important;
  }


  html body
  #screen-profile-v56
  .nx100-row-copy
  strong,

  html body
  #screen-profile-v56
  .nx100-row-copy
  span {
    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     14. V100 SELECT ROW

     Select goes full width under label.
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-row
  .nx100-select-wrap,

  html body
  #screen-profile-v56
  .nx100-row
  .nx100-select-slot {
    grid-column:
      1 / -1
      !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    flex-basis:
      auto
      !important;

    margin:
      4px
      0
      0
      !important;
  }


  html body
  #screen-profile-v56
  .nx100-select-wrap,

  html body
  #screen-profile-v56
  .nx100-select-slot,

  html body
  #screen-profile-v56
  .nx100-select-wrap
  > *,

  html body
  #screen-profile-v56
  .nx100-select-slot
  > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     15. V100 SAVE STATE
     ======================================================== */

  html body
  #screen-profile-v56
  .nx100-save-state {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      12px
      auto
      0
      !important;

    white-space: normal !important;

    text-align: center !important;
  }


  /* ========================================================
     16. ABSOLUTE FINAL SAFETY
     ======================================================== */

  html body
  #screen-profile-v56
  #screen-settings
  img,

  html body
  #screen-profile-v56
  #screen-settings
  svg {
    max-width: 100% !important;
  }

}
/* NOYTRIX MOBILE SETTINGS REAL FIT END */



/* NOYTRIX MOBILE TRACKING LAST POLISH START */
@media screen and (max-width: 820px) {

  /* ========================================================
     1. OBJECTS TABLE — REAL TOUCH SCROLL
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: contain !important;

    touch-action: pan-x pan-y !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table
  * {
    touch-action: inherit !important;
  }


  /* visible scrollbar */

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-track {
    background: transparent !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-thumb {
    background:
      rgba(104, 144, 190, .55)
      !important;

    border-radius: 999px !important;
  }


  /* ========================================================
     2. GUEST / EMPTY MESSAGE
     FULL TEXT MUST FIT
     ======================================================== */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-login-required-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-empty-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-error-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-v14-loading {
    position: sticky !important;

    left: 0 !important;

    width:
      calc(100vw - 76px)
      !important;

    min-width: 0 !important;

    max-width:
      calc(100vw - 76px)
      !important;

    min-height: 300px !important;

    margin: 0 !important;

    padding:
      24px
      16px
      !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    overflow: visible !important;

    white-space: normal !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  strong,

  html body
  #screen-tracking
  .tracking-empty-v14
  strong {
    display: block !important;

    width: 100% !important;
    max-width: 290px !important;

    margin:
      8px
      auto
      0
      !important;

    font-size: 16px !important;
    line-height: 1.35 !important;

    text-align: center !important;

    white-space: normal !important;

    overflow: visible !important;
    text-overflow: clip !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  p,

  html body
  #screen-tracking
  .tracking-empty-v14
  p {
    width: 100% !important;
    max-width: 280px !important;

    margin:
      8px
      auto
      0
      !important;

    font-size: 13px !important;
    line-height: 1.45 !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     3. LATEST CHANGES — TOUCH SCROLL
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-changes {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  .tracking-v14-changes
  > h3 {
    flex: 0 0 auto !important;

    margin:
      0
      0
      12px
      !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14 {
    flex:
      1 1 auto
      !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 0 !important;

    overflow-x: auto !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: contain !important;

    touch-action: pan-x pan-y !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14
  * {
    touch-action: inherit !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-track {
    background: transparent !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-thumb {
    background:
      rgba(104, 144, 190, .55)
      !important;

    border-radius: 999px !important;
  }


  /* Empty latest-changes message */

  html body
  #screen-tracking
  .tracking-change-empty-v14 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 300px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding:
      20px
      14px
      !important;

    box-sizing: border-box !important;

    text-align: center !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     4. REAL CHANGE ITEMS MUST FIT
     ======================================================== */

  html body
  #screen-tracking
  #trackingChangesV14
  .tracking-change-item-v14 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14
  .tracking-change-item-v14
  strong,

  html body
  #screen-tracking
  #trackingChangesV14
  .tracking-change-item-v14
  p,

  html body
  #screen-tracking
  #trackingChangesV14
  .tracking-change-item-v14
  small {
    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     5. BOTTOM FREQUENCY
     "Проверять   Каждые 4 часа"
     SMALL + ONE LINE
     ======================================================== */

  html body
  #screen-tracking
  .tracking-frequency-v15,

  html body
  #screen-tracking
  .nx-mobile-tracking-frequency {
    grid-column:
      1 / -1
      !important;

    display: grid !important;

    grid-template-columns:
      72px
      minmax(0, 160px)
      !important;

    align-items: center !important;

    justify-content: center !important;

    column-gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin:
      0
      auto
      !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* "Проверять" */

  html body
  #screen-tracking
  .tracking-frequency-v15
  > span:first-child,

  html body
  #screen-tracking
  .tracking-frequency-v15
  > label:first-child,

  html body
  #screen-tracking
  .nx-mobile-tracking-frequency
  > span:first-child,

  html body
  #screen-tracking
  .nx-mobile-tracking-frequency
  > label:first-child {
    display: block !important;

    width: 72px !important;
    min-width: 0 !important;
    max-width: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #9eacc0 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-align: right !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
  }


  /* "Каждые 4 часа" */

  html body
  #screen-tracking
  .tracking-frequency-v15
  select,

  html body
  #screen-tracking
  .nx-mobile-tracking-frequency
  select {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;

    width: 160px !important;
    min-width: 0 !important;
    max-width: 160px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;

    padding:
      0
      32px
      0
      12px
      !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(69, 105, 148, .72)
      !important;

    border-radius:
      11px
      !important;

    background-color:
      #071a32
      !important;

    color:
      #e0e8f4
      !important;

    font-family: inherit !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 40px !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    cursor: pointer !important;
  }


  /* if V15 itself is rendered as the visible control */

  html body
  #screen-tracking
  .tracking-frequency-v15
  button,

  html body
  #screen-tracking
  .tracking-frequency-v15
  [role="button"] {
    width: 160px !important;
    min-width: 0 !important;
    max-width: 160px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;

    padding:
      0
      12px
      !important;

    border-radius:
      11px
      !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
  }


  /* ========================================================
     6. FOOTER MUST NOT CLIP FREQUENCY ROW
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-footer,

  html body
  #screen-tracking
  .tracking-notify-v15,

  html body
  #screen-tracking
  .nx-mobile-tracking-notifications {
    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }

}
/* NOYTRIX MOBILE TRACKING LAST POLISH END */



/* NOYTRIX TRACKING HARD TOUCH SCROLL START */
@media screen and (max-width: 820px) {

  /* ========================================================
     OBJECTS TABLE
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow-x: scroll !important;
    overflow-y: scroll !important;

    -webkit-overflow-scrolling: touch !important;

    /*
     * IMPORTANT:
     * JS below controls the gesture manually.
     */
    touch-action: none !important;

    overscroll-behavior: none !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table
  * {
    pointer-events: auto !important;
  }


  /* ========================================================
     REAL TABLE CONTENT MUST ACTUALLY BE WIDER
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table-head,

  html body
  #screen-tracking
  #trackingRowsV14,

  html body
  #screen-tracking
  .tracking-v14-rows {
    width: 790px !important;
    min-width: 790px !important;
    max-width: none !important;
  }


  /* ========================================================
     GUEST MESSAGE — FULLY VISIBLE
     ======================================================== */

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-login-required-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-empty-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-error-v14,

  html body
  #screen-tracking
  #trackingRowsV14
  .tracking-v14-loading {
    width:
      calc(100vw - 74px)
      !important;

    min-width:
      calc(100vw - 74px)
      !important;

    max-width:
      calc(100vw - 74px)
      !important;

    min-height: 340px !important;

    padding:
      24px
      16px
      !important;

    box-sizing: border-box !important;

    white-space: normal !important;

    overflow: visible !important;

    text-align: center !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  strong,

  html body
  #screen-tracking
  .tracking-login-required-v14
  p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 290px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    white-space: normal !important;

    overflow: visible !important;

    text-overflow: clip !important;

    overflow-wrap: anywhere !important;

    text-align: center !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  strong {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }


  html body
  #screen-tracking
  .tracking-login-required-v14
  p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }


  /* ========================================================
     LATEST CHANGES
     WHOLE CARD CAN BE DRAGGED WITH FINGER
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-changes {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    overflow: hidden !important;

    touch-action: none !important;

    overscroll-behavior: none !important;

    pointer-events: auto !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14 {
    flex: 1 1 auto !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;

    overflow-x: scroll !important;
    overflow-y: scroll !important;

    -webkit-overflow-scrolling: touch !important;

    touch-action: none !important;

    overscroll-behavior: none !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-tracking
  #trackingChangesV14
  * {
    pointer-events: auto !important;
  }


  /* ========================================================
     VISIBLE SCROLLBARS
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar {
    display: block !important;

    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-track,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-track {
    background: transparent !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-thumb,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-thumb {
    background:
      rgba(104, 145, 194, .62)
      !important;

    border-radius:
      999px
      !important;
  }

}
/* NOYTRIX TRACKING HARD TOUCH SCROLL END */



/* NOYTRIX MOBILE FAST SCROLL START */
@media screen and (max-width: 820px) {

  /* ========================================================
     TRACKING
     ======================================================== */

  html body
  #screen-tracking
  .tracking-v14-table,

  html body
  #screen-tracking
  #trackingChangesV14,

  html body
  #screen-tracking
  .tracking-v14-changes {
    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: none !important;

    touch-action: none !important;

    pointer-events: auto !important;
  }


  html body
  #screen-tracking
  .tracking-v14-table,

  html body
  #screen-tracking
  #trackingChangesV14 {
    overflow: auto !important;

    scrollbar-width: thin !important;
  }


  /* ========================================================
     SIGNALS
     Critical / Community / Market
     ======================================================== */

  html body
  #screen-signals
  .signals-column-v19 {
    overflow: hidden !important;

    touch-action: none !important;

    pointer-events: auto !important;
  }


  html body
  #screen-signals
  .signals-feed-v19 {
    width: 100% !important;

    min-height: 0 !important;

    max-height: 520px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior: none !important;

    touch-action: none !important;

    pointer-events: auto !important;

    scrollbar-width: thin !important;

    box-sizing: border-box !important;
  }


  html body
  #screen-signals
  .signals-feed-v19::-webkit-scrollbar,

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
  }


  html body
  #screen-signals
  .signals-feed-v19::-webkit-scrollbar-track,

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-track,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-track {
    background: transparent !important;
  }


  html body
  #screen-signals
  .signals-feed-v19::-webkit-scrollbar-thumb,

  html body
  #screen-tracking
  .tracking-v14-table::-webkit-scrollbar-thumb,

  html body
  #screen-tracking
  #trackingChangesV14::-webkit-scrollbar-thumb {
    background:
      rgba(105, 148, 200, .62)
      !important;

    border-radius: 999px !important;
  }

}
/* NOYTRIX MOBILE FAST SCROLL END */

/* The web result deliberately mirrors the mobile quick-verdict card. */
.mobile-verdict-card{max-width:830px;margin:12px auto;border:2px solid #ffb020;border-radius:22px;overflow:hidden;background:#081126;box-shadow:0 18px 46px rgba(0,0,0,.28)}.mobile-verdict-card.safe,.mobile-verdict-card.low{border-color:#29d37a}.mobile-verdict-card.critical{border-color:#ff6b6b}.mobile-verdict-card.medium,.mobile-verdict-card.high{border-color:#ffb547}.mobile-verdict-card.unknown{border-color:#71809b}.mobile-verdict-surface{padding:20px;background:linear-gradient(145deg,rgba(255,176,32,.11),rgba(8,15,32,.96));text-align:center}.mobile-verdict-card.safe .mobile-verdict-surface,.mobile-verdict-card.low .mobile-verdict-surface{background:linear-gradient(145deg,rgba(41,211,122,.10),rgba(8,15,32,.96))}.mobile-verdict-card.critical .mobile-verdict-surface{background:linear-gradient(145deg,rgba(255,107,107,.12),rgba(8,15,32,.96))}.mobile-verdict-card.unknown .mobile-verdict-surface{background:linear-gradient(145deg,rgba(113,128,155,.14),rgba(8,15,32,.96))}.mobile-verdict-kicker,.mobile-report-section h4,.mobile-ai-verdict h4{display:block;margin:0 0 7px;color:#a8b4cf;font-size:11px;font-weight:900;letter-spacing:.1em}.mobile-verdict-surface h3{margin:0;color:#ffb020;font-size:28px;line-height:1.14}.mobile-verdict-card.safe h3,.mobile-verdict-card.low h3{color:#29d37a}.mobile-verdict-card.critical h3{color:#ff6b6b}.mobile-verdict-card.unknown h3{color:#b8c3d8}.mobile-score-wrap{display:flex;justify-content:center;margin:15px 0 10px}.mobile-score-circle{width:86px;height:86px;border:8px solid #ffb020;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center}.mobile-verdict-card.safe .mobile-score-circle,.mobile-verdict-card.low .mobile-score-circle{border-color:#29d37a}.mobile-verdict-card.critical .mobile-score-circle{border-color:#ff6b6b}.mobile-verdict-card.unknown .mobile-score-circle{border-color:#71809b}.mobile-score-circle strong{font-size:22px;color:#e9ecff}.mobile-score-circle span{font-size:9px;font-weight:900;color:#a8b4cf}.mobile-score-bar{height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.09)}.mobile-score-bar i{display:block;height:100%;border-radius:inherit;background:#ffb020}.mobile-verdict-card.safe .mobile-score-bar i,.mobile-verdict-card.low .mobile-score-bar i{background:#29d37a}.mobile-verdict-card.critical .mobile-score-bar i{background:#ff6b6b}.mobile-verdict-card.unknown .mobile-score-bar i{background:#71809b}.mobile-target{margin:12px 0 0;color:#a8b4cf;line-height:1.4;overflow-wrap:anywhere}.mobile-ai-verdict{margin-top:12px;padding:14px;border:1px solid rgba(255,176,32,.25);border-radius:18px;background:rgba(255,176,32,.08);text-align:left}.mobile-verdict-card.unknown .mobile-ai-verdict{border-color:rgba(113,128,155,.36);background:rgba(113,128,155,.10)}.mobile-ai-verdict p{margin:0;color:#e9ecff;font-size:15px;font-weight:800;line-height:1.48}.mobile-report-section{margin:14px 18px 0;padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.025)}.mobile-report-section h4{color:#e9ecff}.mobile-report-section ul{display:grid;gap:9px;padding:0;margin:0;list-style:none}.mobile-report-section li{position:relative;padding-left:16px;color:#cbd6ea;font-size:13px;line-height:1.46}.mobile-report-section li:before{content:'•';position:absolute;left:0;color:#ffb020}.mobile-report-section.actions li:before{content:'✓';color:#29d37a}.mobile-report-limit{margin:14px 18px;color:#a8b4cf;font-size:12px;line-height:1.45}.mobile-solana-controls{margin:14px 18px 18px;padding:14px;border:1px solid rgba(255,176,32,.34);border-radius:16px;background:rgba(255,176,32,.07)}.mobile-solana-controls>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}.mobile-solana-controls h4{margin:0;color:#ffb020;font-size:13px}.mobile-solana-controls>div:first-child strong{color:#e9ecff}.mobile-solana-headline{margin:8px 0;color:#e9ecff;font-weight:800;line-height:1.42}.mobile-solana-finding{padding-top:10px;margin-top:10px;border-top:1px solid rgba(255,255,255,.08)}.mobile-solana-finding strong{color:#ffb020;font-size:13px}.mobile-solana-finding p,.mobile-solana-action{margin:4px 0 0;color:#a8b4cf;font-size:12px;line-height:1.45}.mobile-solana-action{color:#29d37a;font-weight:800;margin-top:11px}