/* LXBG Modern — core UI design system, 4.A LAB. Scoped to .lxm to avoid touching the active demo. */
.lxm{
--lxm-bg:#f5f8fe;--lxm-surface:#fff;--lxm-ink:#14233d;--lxm-muted:#65748b;
--lxm-blue:#2563eb;--lxm-blue-dark:#1d4ed8;--lxm-blue-soft:#eff6ff;
--lxm-cyan:#06b6d4;--lxm-navy:#111f39;--lxm-line:#e0e8f3;
--lxm-green:#0d9b74;--lxm-orange:#c97922;--lxm-red:#c94050;
--lxm-shadow:0 16px 50px rgba(22,51,102,.065);
--lxm-radius:20px;--lxm-rounded:13px;
font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color:var(--lxm-ink);background:var(--lxm-bg);font-size:15px;
line-height:1.5;min-height:100vh;overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
.lxm,.lxm *,.lxm *::before,.lxm *::after{box-sizing:border-box}
.lxm a{color:inherit;text-decoration:none}
.lxm button,.lxm input{font:inherit}
.lxm button{cursor:pointer}
.lxm :is(button,a,input,select):focus-visible{outline:3px solid #06b6d4;outline-offset:3px}
.lxm h1,.lxm h2,.lxm h3,.lxm p{margin-top:0}
.lxm .lm-wrap{max-width:1220px;width:calc(100% - 60px);margin-inline:auto}
.lxm .lm-visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0)}
.lxm .lm-topline{background:var(--lxm-navy);color:#c5d4ee}
.lxm .lm-topline .lm-wrap{display:flex;align-items:center;justify-content:space-between;min-height:39px;gap:16px;font-size:11px;font-weight:700;letter-spacing:.05em}
.lxm .lm-topline .lm-blue-dot{width:7px;height:7px;display:inline-block;background:#31d5e1;border-radius:100%;margin-right:7px;box-shadow:0 0 0 4px #31d5e129}
.lxm .lm-topline em{color:#8ee3ee;font-style:normal}
.lxm .lm-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--lxm-line);position:relative;z-index:8}
.lxm .lm-header-row{min-height:80px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.lxm .lm-brand{display:inline-flex;align-items:center;gap:11px;font-size:23px;letter-spacing:-.065em;font-weight:900;color:var(--lxm-ink);white-space:nowrap}
.lxm .lm-brand strong{letter-spacing:-.06em}
.lxm .lm-brand strong span{color:var(--lxm-blue)}
.lxm .lm-brandmark{position:relative;width:38px;height:38px;display:grid;place-items:center;background:linear-gradient(145deg,#2079f9,#3456ec);color:#fff;border-radius:12px;font-size:17px;letter-spacing:-.09em;font-weight:950;box-shadow:0 5px 12px #275ce736}
.lxm .lm-brandmark::after{content:"";position:absolute;right:-4px;top:-4px;width:11px;height:11px;background:#19c6d8;border:3px solid white;border-radius:50%}
.lxm .lm-main-links{display:flex;align-items:center;gap:5px}
.lxm .lm-main-links a{padding:11px 15px;color:#50617b;font-size:13px;font-weight:760;border-radius:10px;transition:background .15s,color .15s}
.lxm .lm-main-links a:hover,.lxm .lm-main-links a[aria-current]{background:#edf4ff;color:var(--lxm-blue)}
.lxm .lm-header-tools{display:flex;align-items:center;gap:10px}
.lxm .lm-desktop-badge{display:flex;align-items:center;gap:7px;color:#32715f;background:#e9f9f2;border-radius:100px;padding:7px 11px;font-size:11px;font-weight:800}
.lxm .lm-pulse{width:7px;height:7px;background:#16b982;border-radius:50%;box-shadow:0 0 0 3px #16b98225}
.lxm .lm-menu-toggle{display:none;width:42px;height:42px;border-radius:11px;background:#ecf3ff;border:1px solid #d4e2f6;align-items:center;justify-content:center;color:#1c4386}
.lxm .lm-menu-toggle svg{width:19px;height:19px}
.lxm .lm-drawer{display:none}
.lxm .lm-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 19px;min-height:46px;border:1px solid transparent;border-radius:12px;font-weight:780;font-size:13px;white-space:normal;text-align:center;transition:transform .15s,box-shadow .15s,background .15s}
.lxm .lm-btn:hover{transform:translateY(-1px)}
.lxm .lm-btn-primary{background:linear-gradient(125deg,#2670f8,#2854e7);color:#fff;border-color:#2458e9;box-shadow:0 8px 20px #2563eb2e}
.lxm .lm-btn-secondary{background:#fff;color:#234984;border-color:#d7e3f5}
.lxm .lm-btn-dark{background:#132746;color:#fff;border-color:#132746}
.lxm .lm-btn-small{padding:9px 14px;min-height:39px;font-size:12px}
.lxm .lm-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.lxm .lm-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:880;letter-spacing:.1em;color:var(--lxm-blue);text-transform:uppercase}
.lxm .lm-icon-circle{width:43px;height:43px;border-radius:13px;background:var(--lxm-blue-soft);color:var(--lxm-blue);display:grid;place-items:center;font-size:21px}
.lxm .lm-icon-circle svg{width:22px;height:22px}
.lxm .lm-hero{position:relative;padding:73px 0 68px;overflow:hidden;background:radial-gradient(ellipse 55% 70% at 85% 6%,#ddeaff 0%,transparent 79%),linear-gradient(180deg,#fafcff,var(--lxm-bg))}
.lxm .lm-hero::before{content:"";position:absolute;top:-140px;right:-70px;width:480px;height:480px;border-radius:100%;border:1px solid #d9e8fc;pointer-events:none}
.lxm .lm-hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;position:relative}
.lxm .lm-hero-copy h1{font-weight:900;letter-spacing:-.061em;line-height:1.08;font-size:clamp(42px,5.4vw,70px);margin:15px 0 23px;max-width:620px}
.lxm .lm-hero-copy h1 span{color:var(--lxm-blue)}
.lxm .lm-hero-copy p{font-size:16px;line-height:1.8;color:#61718a;max-width:500px;margin-bottom:25px}
.lxm .lm-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.lxm .lm-hero-foot{display:flex;flex-wrap:wrap;gap:19px;margin-top:28px;color:#5e7090;font-weight:730;font-size:12px}
.lxm .lm-hero-foot span::before{content:"✓";color:#0cab83;font-weight:900;margin-right:7px}
.lxm .lm-window{background:white;border:1px solid #dfebfc;border-radius:20px;overflow:hidden;box-shadow:0 26px 75px rgba(33,68,119,.16);position:relative;transform:rotate(.9deg)}
.lxm .lm-window-top{background:#152641;color:#d6e5ff;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;font-size:11px;font-weight:800}
.lxm .lm-window-dots{display:flex;gap:5px}
.lxm .lm-window-dots i{width:8px;height:8px;border-radius:50%;background:#607596}
.lxm .lm-window-dots i:first-child{background:#f18090}
.lxm .lm-window-dots i:nth-child(2){background:#f2c56e}
.lxm .lm-window-dots i:last-child{background:#54d4a6}
.lxm .lm-product-demo{display:grid;grid-template-columns:130px 1fr;min-height:295px}
.lxm .lm-product-sidebar{background:#f1f6fd;padding:16px 11px;border-right:1px solid #e3ecf7}
.lxm .lm-product-sidebar strong{display:block;color:#59708b;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:15px}
.lxm .lm-product-sidebar span{display:block;font-size:12px;font-weight:720;color:#657897;margin:10px 0;padding:9px 10px;border-radius:8px}
.lxm .lm-product-sidebar span.active{color:#2057bd;background:#dfebff}
.lxm .lm-product-chat{padding:20px;background:#fff;display:flex;flex-direction:column}
.lxm .lm-product-chat-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf0f8;padding-bottom:14px;font-weight:850;font-size:13px}
.lxm .lm-online-pill{font-size:10px;background:#eafbf3;color:#15956f;border-radius:999px;padding:5px 8px;font-weight:800}
.lxm .lm-chatmessages{display:flex;flex-direction:column;gap:12px;padding:18px 0;flex:1}
.lxm .lm-bubble{max-width:88%;padding:10px 13px;background:#f0f4fb;color:#37506d;border-radius:12px 12px 12px 3px;font-size:12px;align-self:flex-start}
.lxm .lm-bubble.self{background:#2d69ee;color:white;border-radius:12px 12px 3px 12px;align-self:flex-end}
.lxm .lm-chat-input{border:1px solid #e0e9f4;border-radius:10px;padding:10px 12px;color:#90a0b5;font-size:11px;display:flex;justify-content:space-between}
.lxm .lm-live-float{position:absolute;bottom:-21px;left:-21px;display:flex;gap:10px;align-items:center;padding:12px 16px;background:white;border:1px solid #e1eafa;box-shadow:0 15px 30px #284d831c;border-radius:14px;transform:rotate(-.9deg);font-weight:850;font-size:12px}
.lxm .lm-live-float .lm-icon-circle{width:33px;height:33px;font-size:17px;background:#e8f8fb;color:#069db9;border-radius:10px}
.lxm .lm-section{padding:65px 0}
.lxm .lm-section-header{margin-bottom:27px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.lxm .lm-section-header h2{font-size:clamp(28px,3.5vw,41px);letter-spacing:-.046em;line-height:1.18;margin:10px 0 7px}
.lxm .lm-section-header p{color:#718099;font-size:14px;line-height:1.7;margin-bottom:0;max-width:650px}
.lxm .lm-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lxm .lm-feature-card{background:white;border:1px solid #e0e9f5;border-radius:19px;padding:25px;box-shadow:var(--lxm-shadow);transition:transform .18s,box-shadow .18s}
.lxm .lm-feature-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px #244d9d18}
.lxm .lm-feature-card h3{font-size:19px;letter-spacing:-.035em;margin:19px 0 9px}
.lxm .lm-feature-card p{color:#75839a;font-size:13px;line-height:1.7;margin-bottom:21px}
.lxm .lm-feature-card .lm-link{font-weight:850;color:var(--lxm-blue);font-size:12px}
.lxm .lm-section-soft{background:#eef4fc;border-block:1px solid #dfeaf8}
.lxm .lm-mini-label{font-size:11px;letter-spacing:.1em;color:#7091b5;font-weight:850;text-transform:uppercase}
.lxm .lm-design-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:26px}
.lxm .lm-panel{background:white;border:1px solid var(--lxm-line);border-radius:20px;padding:26px;box-shadow:var(--lxm-shadow)}
.lxm .lm-panel h3{font-size:20px;letter-spacing:-.04em}
.lxm .lm-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin:25px 0 0}
.lxm .lm-swatch{min-width:0}
.lxm .lm-color{height:74px;border-radius:13px 13px 6px 6px;border:1px solid #00000009}
.lxm .lm-swatch strong{display:block;font-size:11px;margin-top:9px}
.lxm .lm-swatch small{display:block;color:#8a97a9;font-size:10px;letter-spacing:.02em}
.lxm .lm-type-sample{font-size:44px;font-weight:900;letter-spacing:-.05em;line-height:1.2;margin:12px 0 15px}
.lxm .lm-typography p{color:#76869e;font-size:13px;margin-bottom:18px}
.lxm .lm-ui-buttons{display:flex;flex-wrap:wrap;gap:8px}
.lxm .lm-admin-demo{display:grid;grid-template-columns:185px minmax(0,1fr);background:white;border:1px solid var(--lxm-line);border-radius:21px;overflow:hidden;box-shadow:var(--lxm-shadow)}
.lxm .lm-admin-sidebar{background:#15233e;color:#b2c5e3;padding:24px 14px}
.lxm .lm-admin-sidebar strong{color:#fff;font-size:13px;display:block;padding:0 9px 23px}
.lxm .lm-admin-sidebar span{display:flex;gap:8px;align-items:center;padding:11px;font-size:12px;font-weight:750;border-radius:10px;margin:4px 0}
.lxm .lm-admin-sidebar span.active{background:#2c4371;color:#fff}
.lxm .lm-admin-panel{padding:28px}
.lxm .lm-admin-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:22px}
.lxm .lm-admin-heading h3{font-size:21px;margin:0}
.lxm .lm-admin-heading p{font-size:12px;color:#74839a;margin:3px 0 0}
.lxm .lm-admin-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:22px}
.lxm .lm-admin-summary article{background:#f5f8fe;border:1px solid #e6eef8;padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:7px}
.lxm .lm-admin-summary article b{font-size:27px;letter-spacing:-.05em;color:#173a67}
.lxm .lm-admin-summary article small{font-size:11px;color:#8190a5}
.lxm .lm-admin-list{border:1px solid #e5edf7;border-radius:13px;overflow:hidden}
.lxm .lm-admin-list>div{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #edf1f7}
.lxm .lm-admin-list>div:last-child{border-bottom:0}
.lxm .lm-admin-list b{font-size:12px}
.lxm .lm-admin-list small{font-size:11px;color:#728199}
.lxm .lm-status{display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:5px 9px;font-size:10px;font-weight:850}
.lxm .lm-status.good{background:#e7fbf3;color:#087854}
.lxm .lm-status.planned{background:#eff4ff;color:#3b65ad}
.lxm .lm-status.warn{background:#fff3df;color:#a56517}
.lxm .lm-install-demo{background:#fff;border:1px solid var(--lxm-line);border-radius:21px;padding:26px;box-shadow:var(--lxm-shadow)}
.lxm .lm-installer-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:24px}
.lxm .lm-installer-head strong{font-size:17px;letter-spacing:-.025em}
.lxm .lm-installer-head small{display:block;font-size:12px;color:#8091a8;margin-top:4px}
.lxm .lm-install-progress{height:6px;background:#e9f0fb;border-radius:30px;overflow:hidden;margin-bottom:22px}
.lxm .lm-install-progress>span{display:block;background:linear-gradient(90deg,#2673f6,#12bfd6);height:100%;width:16.67%;border-radius:30px;transition:width .2s}
.lxm .lm-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:22px}
.lxm .lm-step{border:1px solid #e3ebf6;border-radius:11px;background:#f9fbff;color:#7990a8;padding:10px 5px;min-height:70px;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;font-size:11px;font-weight:800;text-align:center}
.lxm .lm-step b{display:grid;place-items:center;border:1px solid #dce5f2;border-radius:50%;height:24px;width:24px;background:#fff;font-size:11px}
.lxm .lm-step.active{color:#1658c4;border-color:#bcd1f8;background:#edf4ff}
.lxm .lm-step.active b{background:#2563eb;color:#fff;border-color:#2563eb}
.lxm .lm-step.done{color:#0b916a;background:#f0fcf7}
.lxm .lm-installer-stage{background:#f8faff;border:1px solid #e6edf8;border-radius:13px;padding:20px}
.lxm .lm-installer-stage h3{font-size:20px;margin:0 0 7px}
.lxm .lm-installer-stage p{font-size:13px;color:#73839a;margin:0}
.lxm .lm-installer-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:17px}
.lxm .lm-installer-checks span{font-size:12px;background:#fff;border:1px solid #e5ebf5;border-radius:9px;padding:11px;color:#45617d}
.lxm .lm-installer-checks span::before{content:"✓";color:#0fa579;font-weight:900;margin-right:6px}
.lxm .lm-installer-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.lxm .lm-installer-footer p{font-size:11px;color:#8a99ad;margin:0;max-width:55%}
.lxm .lm-bottom{background:#12213a;padding:34px 0;color:#c7d8f0}
.lxm .lm-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}
.lxm .lm-bottom .lm-brand{color:white}
.lxm .lm-notice{padding:10px 14px;background:#ecf7ff;border:1px solid #c9e4fc;border-radius:11px;color:#22558a;font-size:12px;font-weight:750}
@media(max-width:1060px){
 .lxm .lm-main-links{gap:0}
 .lxm .lm-main-links a{padding:10px}
 .lxm .lm-hero-layout{gap:25px}
 .lxm .lm-hero-copy h1{font-size:clamp(38px,5vw,56px)}
}
@media(max-width:830px){
 .lxm .lm-main-links,.lxm .lm-header-tools .lm-desktop-badge,.lxm .lm-header-tools>.lm-btn{display:none}
 .lxm .lm-menu-toggle{display:inline-flex}
 .lxm .lm-header-row{min-height:72px}
 .lxm .lm-drawer{display:block;max-height:0;overflow:hidden;visibility:hidden;background:#fff;transition:max-height .18s ease,visibility .18s}
 .lxm .lm-drawer.is-open{max-height:520px;visibility:visible;border-top:1px solid #e8edf5}
 .lxm .lm-drawer-inner{padding:16px 0 23px;display:grid;gap:5px}
 .lxm .lm-drawer a{display:block;padding:12px 15px;border:1px solid transparent;border-radius:11px;font-weight:800;color:#425b7b}
 .lxm .lm-drawer a.active{color:#1e5cd2;background:#edf4ff;border-color:#d9e9ff}
 .lxm .lm-hero-layout{grid-template-columns:1fr;gap:42px}
 .lxm .lm-hero-copy h1{max-width:640px}
 .lxm .lm-window{max-width:620px;margin:auto}
 .lxm .lm-features{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lxm .lm-design-grid{grid-template-columns:1fr}
 .lxm .lm-swatches{max-width:540px}
}
@media(max-width:640px){
 .lxm .lm-wrap{width:calc(100% - 30px)}
 .lxm .lm-topline .lm-wrap{min-height:36px;font-size:10px}
 .lxm .lm-topline .lm-topline-extra{display:none}
 .lxm .lm-brand{font-size:21px}
 .lxm .lm-header-row{min-height:66px}
 .lxm .lm-hero{padding:46px 0 60px}
 .lxm .lm-hero-copy h1{font-size:clamp(38px,11vw,50px)}
 .lxm .lm-hero-copy p{font-size:14px;line-height:1.7}
 .lxm .lm-hero-actions .lm-btn{flex:1 1 140px}
 .lxm .lm-hero-foot{gap:9px 14px;font-size:11px}
 .lxm .lm-product-demo{grid-template-columns:99px minmax(0,1fr);min-height:260px}
 .lxm .lm-product-sidebar{padding:14px 6px}
 .lxm .lm-product-sidebar span{font-size:10px;padding:7px 6px}
 .lxm .lm-product-chat{padding:14px}
 .lxm .lm-bubble{font-size:10px}
 .lxm .lm-live-float{left:8px;bottom:-20px;font-size:10px;padding:8px 10px}
 .lxm .lm-section{padding:47px 0}
 .lxm .lm-section-header{display:block}
 .lxm .lm-section-header h2{font-size:30px}
 .lxm .lm-features{grid-template-columns:1fr;gap:12px}
 .lxm .lm-feature-card{padding:20px}
 .lxm .lm-panel{padding:20px}
 .lxm .lm-swatches{gap:7px}
 .lxm .lm-color{height:58px}
 .lxm .lm-swatch strong{font-size:10px}
 .lxm .lm-swatch small{font-size:9px}
 .lxm .lm-admin-demo{grid-template-columns:70px minmax(0,1fr)}
 .lxm .lm-admin-sidebar{padding:18px 6px}
 .lxm .lm-admin-sidebar strong{font-size:9px;padding:0 0 15px}
 .lxm .lm-admin-sidebar span{font-size:0;min-height:42px;justify-content:center;padding:8px}
 .lxm .lm-admin-sidebar span::first-letter{font-size:17px}
 .lxm .lm-admin-panel{padding:17px 11px}
 .lxm .lm-admin-heading{align-items:flex-start}
 .lxm .lm-admin-heading .lm-btn{display:none}
 .lxm .lm-admin-summary{gap:5px}
 .lxm .lm-admin-summary article{padding:8px}
 .lxm .lm-admin-summary article b{font-size:21px}
 .lxm .lm-admin-summary article small{font-size:9px}
 .lxm .lm-admin-list>div{padding:9px 8px;gap:6px}
 .lxm .lm-admin-list b{font-size:10px}
 .lxm .lm-admin-list small{font-size:9px}
 .lxm .lm-status{font-size:9px;padding:4px 6px;white-space:nowrap}
 .lxm .lm-install-demo{padding:18px 12px}
 .lxm .lm-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
 .lxm .lm-step{min-height:60px;font-size:10px}
 .lxm .lm-installer-stage{padding:16px}
 .lxm .lm-installer-checks{grid-template-columns:1fr}
 .lxm .lm-installer-footer{flex-wrap:wrap}
 .lxm .lm-installer-footer p{width:100%;max-width:none;order:-1}
 .lxm .lm-bottom-row{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.lxm *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Milestone 4.A – prominent dashboard statistics on Admin design preview. */
.lxm .lm-admin-sample-note{font-size:10px;color:#5980aa;margin:0 0 12px!important;font-weight:800}
.lxm .lm-admin-traffic{margin:0 0 22px;border:1px solid #e6eef8;background:linear-gradient(180deg,#fbfdff,#f3f7ff);border-radius:12px;padding:15px 15px 11px}
.lxm .lm-admin-traffic-head{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#203b63;font-size:12px}
.lxm .lm-admin-traffic-head small{font-size:10px;color:#8799b1}
.lxm .lm-admin-sample-bars{display:flex;align-items:end;gap:9px;height:86px;margin:16px 0 0}
.lxm .lm-admin-sample-bars span{background:linear-gradient(180deg,#49a4ff,#2864ec);border-radius:5px 5px 0 0;flex:1;min-height:3px}
.lxm .lm-admin-module-head{margin:0 0 10px}
@media(max-width:640px){.lxm .lm-admin-traffic{padding:11px}.lxm .lm-admin-sample-bars{height:70px;gap:5px}.lxm .lm-admin-sample-note{font-size:9px}}