/* Presentation layer only. Original routes, controls, models and business logic are retained. */
:root[data-design]{--bg:#f6f2ea!important;--panel:#fffdf8!important;--soft:#ece6db!important;--ink:#242727!important;--muted:#77716b!important;--line:#ded6c9!important;--accent:#862e41!important;--accent-ink:#fff!important;--signal:#ba9c67!important;--tint:#eee0df!important;--rail:#eee7db!important;--rail-ink:#4b4340!important;--radius:3px!important;--font:'Segoe UI',Arial,sans-serif!important;--display:Georgia,serif!important;--shadow:0 12px 35px #39302708!important;--green:var(--accent)!important;--mint:var(--tint)!important;--orange:#a16b26!important;--red:#ae404c!important;--zx-ink:var(--ink)!important;--zx-muted:var(--muted)!important;--zx-blue:var(--accent)!important;--zx-line:var(--line)!important;--zx-paper:var(--bg)!important;font-family:var(--font)!important;color-scheme:light!important}
:root[data-design=vector]{--bg:#eef1f5!important;--panel:#fff!important;--soft:#e5eaf1!important;--ink:#141823!important;--muted:#637086!important;--line:#ccd4df!important;--accent:#164cf3!important;--signal:#dfff57!important;--tint:#e5ebff!important;--rail:#164cf3!important;--rail-ink:#fff!important;--radius:0!important;--font:Arial,sans-serif!important;--display:Arial,sans-serif!important;--shadow:5px 5px 0 #14223d0d!important}
:root[data-design=orbit]{--bg:#0e1423!important;--panel:#171f31!important;--soft:#1e293e!important;--ink:#e5e9fa!important;--muted:#9ba9c3!important;--line:#2c3850!important;--accent:#a1afff!important;--accent-ink:#121b31!important;--signal:#47d9c0!important;--tint:#2a3556!important;--rail:#141d2e!important;--rail-ink:#a7b4cb!important;--radius:16px!important;--font:'Segoe UI',sans-serif!important;--display:'Segoe UI',sans-serif!important;--shadow:0 12px 38px #0002!important;--orange:#efc277!important;--red:#ff9299!important;color-scheme:dark!important}
:root[data-design=bloom]{--bg:#faf6f2!important;--panel:#fffdfb!important;--soft:#f0e8ed!important;--ink:#352b38!important;--muted:#7e6f7c!important;--line:#e7dbe4!important;--accent:#69466a!important;--signal:#cedfba!important;--tint:#f0e4ed!important;--rail:#fffdfb!important;--rail-ink:#736175!important;--radius:24px!important;--font:'Trebuchet MS','Segoe UI',sans-serif!important;--display:'Trebuchet MS','Segoe UI',sans-serif!important;--shadow:0 8px 32px #5d416c08!important}
:root[data-design=monolith]{--bg:#f2f3f0!important;--panel:#fff!important;--soft:#e7ebe7!important;--ink:#1b2725!important;--muted:#67766f!important;--line:#ccd5ce!important;--accent:#006b55!important;--signal:#b8d0bf!important;--tint:#e0eee6!important;--rail:#1b2725!important;--rail-ink:#d2ded7!important;--radius:2px!important;--font:'Segoe UI',sans-serif!important;--display:Bahnschrift,'Arial Narrow',Arial,sans-serif!important;--shadow:none!important}
html[data-design][data-zirix-service]{--z-bg:var(--bg)!important;--z-panel:var(--panel)!important;--z-soft:var(--soft)!important;--z-hover:var(--soft)!important;--z-line:var(--line)!important;--z-text:var(--ink)!important;--z-muted:var(--muted)!important;--z-accent:var(--accent)!important;--text:var(--ink)!important;--surface:var(--bg)!important;--surface-raised:var(--panel)!important;--border:var(--line)!important;background:var(--bg)!important;color:var(--ink)!important}
html[data-design][data-zirix-service] body.zirix-connected,html[data-design][data-zirix-service] body{font-family:var(--font)!important;background:var(--bg)!important;color:var(--ink)!important;padding-top:0!important;margin:0!important}
html[data-design] button,html[data-design] input,html[data-design] select,html[data-design] textarea{font-family:var(--font);border-color:var(--line);background:var(--panel);color:var(--ink);border-radius:var(--radius)}
html[data-design] :is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px}
html[data-design] button.primary,html[data-design] .zx-btn.primary,html[data-design] #app button.primary{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important}
html[data-design] button:hover{filter:brightness(.96)}
html[data-design][data-zirix-service] #zirix-global{position:relative!important;top:0;background:var(--panel)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;padding:13px 32px!important;gap:22px!important;min-height:74px!important;height:auto!important;font-family:var(--font)!important}
html[data-design][data-zirix-service] #zirix-global .zg-brand{gap:10px!important;flex:0 0 auto!important;width:auto!important;min-width:168px!important;max-width:none!important}
html[data-design][data-zirix-service] #zirix-global .zg-brand>img:first-child{width:38px!important;height:38px!important;filter:none!important}
html[data-design][data-zirix-service] #zirix-global .zg-wordmark{width:120px!important;min-width:120px!important;max-width:none!important;height:39px!important;max-height:none!important;flex:none!important;filter:none!important}
html:root[data-design][data-zirix-service] body #zirix-global .zg-brand img.zg-wordmark{height:39px!important;max-height:none!important}
html[data-design][data-zirix-service] #zirix-global :is(a,button){color:var(--ink)!important;font-family:var(--font)!important}
html[data-design][data-zirix-service] #zirix-global .zg-links{gap:17px!important}
html[data-design][data-zirix-service] #zirix-global .zg-links a{font-size:12px!important;color:var(--muted)!important;padding:6px 0!important}
html[data-design][data-zirix-service] #zirix-global .zg-links a[aria-current=page]{background:transparent!important;color:var(--accent)!important}
html[data-design][data-zirix-service] #zirix-global :is(.zx-search,.zx-language,.zg-launch,.zx-account>button){background:var(--soft)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;color:var(--ink)!important;box-shadow:none!important}
html[data-design][data-zirix-service] #zirix-global .zx-search input,html[data-design][data-zirix-service] #zirix-global .zx-search button{color:var(--ink)!important;background:transparent!important}
html[data-design][data-zirix-service] #zirix-global .zx-login{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important;border-radius:var(--radius)!important;padding:9px 17px!important}
html[data-design][data-zirix-service] #zirix-global input::placeholder{color:var(--muted)!important}
html[data-design] :is(.zx-dialog,.zx-popover-inner,#zirix-launcher,.zx-plan-dialog,#editor){background:var(--panel)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;font-family:var(--font)!important;box-shadow:0 20px 80px #0003}
html[data-design] :is(.zx-dialog,.zx-plan-dialog,#editor) :is(h2,p,label,input,select,textarea){color:var(--ink)}
html[data-design] #editor :is(.dialog-head,.dialog-foot){background:var(--panel);border-color:var(--line)}
html[data-design] #editor :is(input,select,textarea){background:var(--bg);color:var(--ink);border-color:var(--line);border-radius:var(--radius)}
html[data-design] #editor .estimate-total{background:var(--tint);color:var(--ink)}

/* Marketing site: same sections, text, plan data and selection handlers. */
html[data-design] .crm-offer-nav{background:var(--bg);border-color:var(--line);padding:15px 4.8%;gap:34px;font-family:var(--font);font-size:12px;justify-content:flex-end;overflow:auto}
html[data-design] .crm-offer-nav strong{margin-right:auto;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:2px}
html[data-design] .crm-offer-nav a{color:var(--ink)}html[data-design] .crm-offer-nav .demo-link{color:var(--accent)}
html[data-design] .zx-presentation{max-width:1480px;margin:auto;padding:0 4.8% 50px}
html[data-design] .zx-presentation :is(h1,h2,h3){color:var(--ink);font-family:var(--display)}
html[data-design] .zx-presentation p,html[data-design] .zx-presentation li{color:var(--muted)}
html[data-design] .zx-presentation h2{font-size:34px;font-weight:500;letter-spacing:-1px}
html[data-design] .zx-crm-intro{display:grid;grid-template-columns:1.05fr .95fr;position:relative;text-align:left;padding:28px 0 0;margin:0 0 70px;background:none;border-radius:0;column-gap:5%;align-items:center;overflow:visible}
html[data-design] .design-index{grid-column:1/-1;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 0 15px;margin:0 0 35px;color:var(--muted);font-size:10px;letter-spacing:1px}
html[data-design] .intro-copy{position:relative;z-index:1}
html[data-design] .zx-crm-intro h1{font-size:clamp(38px,4.6vw,68px);font-weight:400;line-height:1.02;letter-spacing:-2.8px;margin:17px 0 27px;max-width:750px}
html[data-design] .intro-copy>p:not(.zx-kicker){font-size:14px;max-width:530px;margin:0 0 20px;line-height:1.8}
html[data-design] .intro-copy .zx-caption{font-size:10px!important;margin-top:20px;max-width:490px}
html[data-design] .zx-kicker{color:var(--accent)!important;font-size:10px!important;font-weight:650;letter-spacing:1.5px}
html[data-design] .zx-crm-intro .zx-actions{justify-content:flex-start;gap:9px;margin-top:28px}
html[data-design] :is(.zx-btn,.zx-presentation button){background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);padding:13px 18px;font:600 12px var(--font);box-shadow:none}
html[data-design] .design-splash{min-width:0;align-self:stretch;display:grid;place-items:center;position:relative;color:var(--accent)}
html[data-design] .design-splash svg{width:100%;max-height:480px;overflow:visible}
html[data-design] .crm-hero-preview{grid-column:1/-1;width:100%;max-width:none;margin:40px 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
html[data-design] .crm-preview-bar{background:var(--panel);color:var(--muted);border-bottom:1px solid var(--line);padding:13px 20px;font-size:10px;font-family:var(--font)}
html[data-design] .crm-preview-bar>span:last-child{color:var(--accent)}
html[data-design] .crm-hero-preview img{width:100%;height:530px;object-fit:cover;object-position:top;display:block}
html[data-design] .zx-crm-products{gap:24px}
html[data-design] .zx-crm-product{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);position:relative}
html[data-design] .zx-crm-product>img{border-color:var(--line);filter:none}
html[data-design] .zx-crm-product>div{padding:25px}
html[data-design] .zx-crm-product h2{font-size:29px;margin:13px 0 20px}
html[data-design] .zx-crm-product h3{font-size:18px;min-height:50px;font-weight:500}
html[data-design] .zx-crm-product small{color:var(--accent);font-size:9px}
html[data-design] .crm-flow li{background:var(--soft);border:0;border-radius:var(--radius);color:var(--ink);font-size:10px}
html[data-design] .zx-crm-product .crm-example{border-color:var(--line)}
html[data-design] .zx-section{margin-top:85px;scroll-margin-top:25px}
html[data-design] :is(.zx-feature,.zx-plan){border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);box-shadow:none;padding:28px}
html[data-design] .zx-feature h3{font-size:21px;font-weight:500}
html[data-design] :is(.zx-note,.zx-selected-plan){background:var(--soft);border-color:var(--line);border-radius:var(--radius);color:var(--ink)}
html[data-design] .zx-comparison{background:var(--panel);border-color:var(--line);border-radius:var(--radius)}
html[data-design] .zx-comparison th{background:var(--soft);color:var(--ink)}
html[data-design] .zx-comparison :is(th,td){border-color:var(--line);font-size:13px}
html[data-design] .zx-plan.featured{border:2px solid var(--accent);background:var(--panel);padding:27px}
html[data-design] .zx-plan :is(.zx-plan-label,.zx-plan-price){color:var(--accent)}
html[data-design] .zx-plan-price{font-size:43px;font-family:var(--display);font-weight:500}
html[data-design] .zx-tabs button[aria-pressed=true]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
html[data-design] .zx-faq details{border-color:var(--line)}
html[data-design] .zx-presentation footer{border-color:var(--line);display:flex;justify-content:space-between;gap:18px;margin-top:65px;padding-top:25px}

/* Shared workspace tokens; all original controls remain mounted and interactive. */
html[data-design] #app .layout{grid-template-columns:224px minmax(0,1fr);background:var(--bg);min-height:calc(100vh - 74px)}
html[data-design][data-zirix-service] #app .sidebar{background:var(--rail)!important;color:var(--rail-ink);padding:24px 14px;top:0;height:100vh;gap:22px;border-right:1px solid var(--line)}
html[data-design] #app .workspace{justify-content:flex-start;padding:0 7px 20px;border-bottom:1px solid var(--line)}
html[data-design] #app .workspace-mark{display:flex;align-items:center;gap:12px;font-family:var(--font);font-size:10px;background:none;border-radius:0;box-shadow:none;width:auto;height:auto;font-weight:500;color:var(--rail-ink)}
html[data-design] #app .workspace-mark img{width:29px;height:29px}
html[data-design] #app .workspace-mark span{max-width:98px;line-height:1.6}
html[data-design] #app .sidebar .nav{gap:6px}
html[data-design][data-zirix-service] #app .sidebar .nav button{flex-direction:row;justify-content:flex-start;gap:14px;text-align:left;padding:12px;min-height:42px;font-size:12px;line-height:1.2;color:var(--rail-ink)!important;border:0;border-radius:var(--radius);background:transparent;box-shadow:none}
html[data-design] #app .sidebar .nav button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
html[data-design][data-zirix-service] #app .sidebar .nav button.active{background:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:none;border:0}
html[data-design] #app .sidebar .nav .icon{height:18px}html[data-design] #app .sidebar .nav svg{width:18px;height:18px;stroke-width:1.6}
html[data-design] #app .nav-label{font-size:8px;text-align:left;letter-spacing:1.7px;padding:17px 12px 5px;margin:10px 0 0;border-top:1px solid var(--line);color:var(--rail-ink);opacity:.65}
html[data-design] #app .sidebar-bottom{align-items:center;justify-content:flex-start;flex-direction:row;flex-wrap:wrap;border-color:var(--line);gap:8px;padding:18px 4px 4px}
html[data-design] #app .sidebar-bottom .avatar{background:var(--tint);color:var(--accent);width:30px;height:30px;border-radius:50%}
html[data-design] #app .sidebar-bottom small{color:var(--rail-ink);font-size:10px}
html[data-design] #app .sidebar-bottom button{color:var(--rail-ink)!important;font-size:9px!important;width:100%;text-align:left;padding-top:10px!important}
html[data-design] #app .main{padding:0 30px 45px;background:var(--bg)}
html[data-design] #app .topbar{margin:0 -30px;padding:17px 30px;min-height:83px;background:var(--panel);border-bottom:1px solid var(--line);gap:12px}
html[data-design] #app .crm-app-icon{background:var(--tint);color:var(--accent);border-radius:var(--radius);width:36px;height:36px}
html[data-design] #app .crm-app-title{min-width:125px}html[data-design] #app .crm-app-title strong{font-size:17px;letter-spacing:-.2px;font-family:var(--display);font-weight:500;color:var(--ink)}
html[data-design] #app .crm-app-title small{font-size:9px;color:var(--muted)}
html[data-design] #app .topbar .search{width:25vw;max-width:340px;font-size:11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);padding:11px 12px}
html[data-design] #app .crm-demo-select{width:150px!important;background:var(--panel);color:var(--ink);border-color:var(--line);border-radius:var(--radius);font-size:11px;padding:10px}
html[data-design] #app .crm-offers-link{font-size:10px;color:var(--accent)}
html[data-design] #app .crm-object-tabs{background:transparent;border-color:var(--line);margin:0;padding:0;min-height:52px;gap:10px}
html[data-design] #app .crm-object-tabs button{color:var(--muted);background:transparent;padding:14px 7px;font-size:11px;border-bottom:2px solid transparent;border-radius:0}
html[data-design] #app .crm-object-tabs button.active{color:var(--accent);border-color:var(--accent);font-weight:700}
html[data-design] #app .crm-tab-note{font-family:var(--font);font-size:10px;color:var(--muted)}
html[data-design] #app .notice{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:13px 0;margin:0;gap:10px;color:var(--muted);font-size:9px}
html[data-design] #app .notice b{background:var(--soft);border:1px solid var(--line);color:var(--muted);border-radius:3px;font-size:8px;font-weight:500;letter-spacing:1.2px;padding:3px 6px}
html[data-design] #app .notice a{color:var(--accent);font-size:9px}
html[data-design] #app .page-head{margin:29px 0 24px;gap:14px}
html[data-design] #app .page-head h1{font-family:var(--display);color:var(--ink);font-size:32px;font-weight:400;letter-spacing:-.9px;margin:8px 0 9px}
html[data-design] #app .page-head .eyebrow{color:var(--accent);font-size:8px;letter-spacing:2px}
html[data-design] #app .page-head p{color:var(--muted);font-size:11px;line-height:1.65}
html[data-design] #app .page-actions button{border-radius:var(--radius);font-size:10px;padding:11px 14px;white-space:nowrap}
html[data-design] #app .crm-spotlights{gap:14px;margin:0 0 22px}
html[data-design] #app .crm-spotlight{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:17px;gap:12px}
html[data-design] #app .crm-spotlight:nth-child(2){background:var(--soft)}
html[data-design] #app .crm-spotlight:nth-child(3){background:var(--tint)}
html[data-design] #app .crm-spotlight .spot-icon{background:transparent;color:var(--accent);width:26px;height:26px;border:1px solid var(--line);border-radius:var(--radius)}
html[data-design] #app .crm-spotlight h3{font:600 12px var(--font);color:var(--ink);margin-bottom:7px}
html[data-design] #app .crm-spotlight p{color:var(--muted);font-size:10px;line-height:1.6}
html[data-design] #app .crm-spotlight button{color:var(--accent);font-size:10px;background:none}
html[data-design] #app .metrics{gap:14px;margin-bottom:24px}
html[data-design] #app .metric{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:none;background:var(--panel)}
html[data-design] #app .metric:before{display:none}
html[data-design] #app .metric label{color:var(--muted);font-size:10px}
html[data-design] #app .metric label .icon{color:var(--accent);background:none;width:18px;height:18px;padding:0;border-radius:0}
html[data-design] #app .metric strong{font-family:var(--display);color:var(--ink);font-weight:400;font-size:32px;margin:14px 0 8px;letter-spacing:-1px}
html[data-design] #app .metric small{font-size:9px;color:var(--muted)}
html[data-design] #app .crm-dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:20px}
html[data-design] #app .crm-dashboard-side{gap:20px}
html[data-design] #app .panel{border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;background:var(--panel);overflow:hidden}
html[data-design] #app .panel-head{background:transparent;border-color:var(--line);padding:18px 20px;min-height:58px}
html[data-design] #app .panel-head h2{font-family:var(--font);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:0}
html[data-design] #app .panel-head h2:before{display:none}
html[data-design] #app .panel-body{padding:19px 20px}
html[data-design] #app .link-btn,html[data-design] #app .record-link{color:var(--accent);font-size:11px;background:none}
html[data-design] #app .row{border-color:var(--line);padding:15px 0}
html[data-design] #app .row-text b{color:var(--ink);font-size:11px}html[data-design] #app .row-text small{color:var(--muted);font-size:10px}
html[data-design] #app .crm-chart{grid-template-columns:1fr 115px;gap:18px}
html[data-design] #app .crm-donut{width:115px;height:115px;background:conic-gradient(var(--accent) 0 var(--crm-complete),var(--soft) var(--crm-complete) 100%)}
html[data-design] #app .crm-donut:before{inset:10px;background:var(--panel)}
html[data-design] #app .crm-donut strong{font:400 29px var(--display);color:var(--ink)}
html[data-design] #app .crm-donut small{font-size:8px;color:var(--muted)}
html[data-design] #app .crm-chart .bar{height:6px;background:var(--soft);border-radius:2px}
html[data-design] #app .crm-chart .bar-row{font-size:9px;color:var(--muted);grid-template-columns:90px minmax(40px,1fr) 16px;margin:15px 0}
html[data-design] #app .crm-chart .bar i{background:var(--accent);border-radius:2px}
html[data-design] #app .crm-chart .bar-row:nth-child(2n) .bar i{background:color-mix(in srgb,var(--accent) 55%,var(--signal))}
html[data-design] #app .crm-chart-caption{font-size:9px;color:var(--muted)}
html[data-design] #app :is(th,td){border-color:var(--line)}
html[data-design] #app th{background:var(--soft);color:var(--muted);font-size:10px}
html[data-design] #app td{font-size:11px;color:var(--ink)}
html[data-design] #app .crm-initial{background:var(--soft);color:var(--accent);border-radius:var(--radius);font-family:var(--display);width:31px;height:31px}
html[data-design] #app .crm-stage{background:var(--tint);color:var(--accent);font-size:8px;border-radius:var(--radius);padding:5px 7px}
html[data-design] #app .crm-stage[data-stage=won],html[data-design] #app .crm-stage[data-stage=done]{background:color-mix(in srgb,var(--signal) 25%,var(--panel));color:var(--ink)}
html[data-design] #app .lane{background:var(--soft);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius);padding:13px}
html[data-design] #app .lane-head b{color:var(--ink)}html[data-design] #app .lane-head small{color:var(--muted)}
html[data-design] #app .deal{background:var(--panel);border-color:var(--line);border-radius:var(--radius);box-shadow:none;padding:17px}
html[data-design] #app .deal h3{color:var(--accent);font-size:12px}html[data-design] #app .deal footer{border-color:var(--line);color:var(--muted)}
html[data-design] #app :is(.tag,.pill){background:var(--tint);color:var(--accent);border-radius:var(--radius)}
html[data-design] #app .bay{border-radius:var(--radius);border-color:var(--line);background:var(--panel)}
html[data-design] #app .slot{background:var(--tint);border-left-color:var(--accent);border-radius:var(--radius)}
html[data-design] #app .integration{border-radius:var(--radius);border-color:var(--line);background:var(--panel)}
html[data-design] #app .integration p{color:var(--muted)}
html[data-design] #app .crm-access-screen{background:var(--panel);border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
html[data-design] #app .crm-access-screen h1{font-family:var(--display);color:var(--ink)}

/* 01 Meridian — editorial composition, warm materials, wide navigation. */
html[data-design=meridian] .zx-crm-intro{grid-template-columns:1.15fr .85fr}
html[data-design=meridian] .design-splash{background:repeating-linear-gradient(0deg,transparent 0 49px,#d8cdbd55 50px),repeating-linear-gradient(90deg,transparent 0 49px,#d8cdbd55 50px);border:1px solid var(--line);border-radius:50% 50% 0 0;padding:15px;min-height:410px}
html[data-design=meridian] .crm-hero-preview{margin-top:52px;padding:12px;background:#e9e1d5;box-shadow:0 18px 0 -9px var(--bg),0 19px 0 -9px var(--line)}
html[data-design=meridian] .crm-hero-preview img{height:420px}
html[data-design=meridian] .zx-crm-products{display:block;border-top:1px solid var(--line)}
html[data-design=meridian] .zx-crm-product{display:grid;grid-template-columns:.85fr 1.15fr;gap:5%;border:0;border-bottom:1px solid var(--line);padding:45px 0;background:none;box-shadow:none}
html[data-design=meridian] .zx-crm-product>img{align-self:center;border:1px solid var(--line);aspect-ratio:1.25;object-fit:cover;object-position:top}
html[data-design=meridian] .zx-crm-product:nth-child(2)>img{grid-column:2;grid-row:1}
html[data-design=meridian] .zx-crm-product:nth-child(2)>div{grid-column:1;grid-row:1}
html[data-design=meridian] .zx-crm-product>div{padding:0}
html[data-design=meridian] .zx-crm-product h2{font-size:42px}
html[data-design=meridian] #app .metric{background:transparent;border:0;border-left:1px solid var(--line);padding:10px 20px}
html[data-design=meridian] #app .metric:first-child{border-left:0;padding-left:0}
html[data-design=meridian] #app .metrics{padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:0}
html[data-design=meridian] #app .crm-dashboard-grid{grid-template-columns:minmax(0,1fr) minmax(270px,.9fr)}

/* 02 Vector — bold grid, cobalt field and a horizontal working navigation. */
html[data-design=vector] .crm-offer-nav{background:var(--ink);border:0}
html[data-design=vector] .crm-offer-nav a,html[data-design=vector] .crm-offer-nav strong{color:white}
html[data-design=vector] .crm-offer-nav .demo-link{color:var(--signal)}
html[data-design=vector] .zx-presentation{padding-top:28px}
html[data-design=vector] .zx-crm-intro{background:var(--accent);color:white;padding:28px 38px 0;grid-template-columns:1.2fr .8fr;gap:0;margin-bottom:38px}
html[data-design=vector] .design-index{border-color:#ffffff44;color:#d8e2ff}
html[data-design=vector] .zx-crm-intro h1{font-size:clamp(38px,4.8vw,70px);font-weight:800;color:white;letter-spacing:-3px;line-height:1.01;margin-bottom:25px}
html[data-design=vector] .intro-copy>p,html[data-design=vector] .intro-copy .zx-kicker{color:#d5dfff!important}
html[data-design=vector] .zx-crm-intro .primary{background:var(--signal)!important;border-color:var(--signal)!important;color:var(--ink)!important}
html[data-design=vector] .design-splash{color:white;margin-left:30px;align-self:center}
html[data-design=vector] .crm-hero-preview{margin:35px 0 -1px;border:0;width:86%;justify-self:center;box-shadow:12px -12px 0 #ffffff33}
html[data-design=vector] .crm-hero-preview img{height:320px}
html[data-design=vector] .zx-presentation h2{font-weight:750;letter-spacing:-1.4px}
html[data-design=vector] .zx-crm-products{gap:0}
html[data-design=vector] .zx-crm-product{border:1px solid var(--ink);box-shadow:none}
html[data-design=vector] .zx-crm-product:before{content:attr(data-index);font-size:47px;letter-spacing:-3px;font-weight:800;color:var(--ink);background:var(--signal);padding:14px 25px;border-bottom:1px solid var(--ink)}
html[data-design=vector] .zx-crm-product>img{order:2;border-top:1px solid var(--ink)}
html[data-design=vector] .zx-crm-product h2{font-weight:800}
html[data-design=vector] .zx-plan.featured{background:var(--signal);border-color:var(--ink)}
html[data-design=vector] .zx-feature-grid{gap:0}
html[data-design=vector] .zx-feature{border-color:var(--ink)}
html[data-design=vector] #app .layout{display:flex;flex-direction:column}
html[data-design=vector][data-zirix-service] #app .sidebar{position:relative;height:auto;width:100%;top:auto;display:flex;flex-direction:row;align-items:center;padding:0 30px;border:0;gap:16px;overflow:visible}
html[data-design=vector] #app .workspace{border:0;padding:0;flex-shrink:0}
html[data-design=vector] #app .workspace-mark img{filter:brightness(0) invert(1);width:23px;height:23px}
html[data-design=vector] #app .workspace-mark span{display:none}
html[data-design=vector] #app .sidebar .nav{flex-direction:row;gap:0;overflow-x:auto;min-width:0;flex:1;scrollbar-width:thin;align-items:stretch}
html[data-design=vector][data-zirix-service] #app .sidebar .nav button{min-height:57px;white-space:nowrap;font-size:10px;padding:12px;gap:7px;flex-shrink:0}
html[data-design=vector][data-zirix-service] #app .sidebar .nav button.active{background:var(--signal)!important;color:var(--ink)!important}
html[data-design=vector] #app .nav-label{writing-mode:vertical-rl;font-size:6px;border:0;padding:6px;margin:0;letter-spacing:1px}
html[data-design=vector] #app .sidebar-bottom{padding:0 0 0 18px;margin:0;border:0;border-left:1px solid #ffffff44;flex-wrap:nowrap}
html[data-design=vector] #app .sidebar-bottom :is(small,button){display:none}
html[data-design=vector] #app .sidebar-bottom .avatar{background:var(--signal);color:var(--ink);border-radius:0;width:27px;height:27px}
html[data-design=vector] #app .main{padding:0 40px 40px}
html[data-design=vector] #app .topbar{margin:0 -40px;padding:14px 40px;min-height:74px}
html[data-design=vector] #app .page-head h1{font-weight:800;font-size:34px;letter-spacing:-1.6px}
html[data-design=vector] #app .crm-spotlights{gap:0}
html[data-design=vector] #app .crm-spotlight{background:transparent;border-color:var(--line);padding:15px 23px}
html[data-design=vector] #app .metric{border:0;border-left:4px solid var(--accent);padding:18px 24px}
html[data-design=vector] #app .metric:first-child{background:var(--accent)}
html[data-design=vector] #app .metric:first-child :is(strong,label,small,.icon){color:white}
html[data-design=vector] #app .metric strong{font-weight:800;font-size:33px;letter-spacing:-1.3px}
html[data-design=vector] #app .panel-head{background:var(--soft)}
html[data-design=vector] #app .crm-dashboard-grid{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr)}

/* 03 Orbit — dark workspace and airy orbital brand system. */
html[data-design=orbit] .zx-crm-intro{grid-template-columns:1fr;text-align:center;padding-top:30px;overflow:hidden}
html[data-design=orbit] .intro-copy{max-width:910px;margin:0 auto}
html[data-design=orbit] .intro-copy>p:not(.zx-kicker){margin-left:auto;margin-right:auto;max-width:640px}
html[data-design=orbit] .zx-crm-intro h1{font-weight:300;font-size:clamp(44px,5vw,74px);line-height:1.05;max-width:860px;margin:20px auto 25px;letter-spacing:-3px}
html[data-design=orbit] .zx-crm-intro .zx-actions{justify-content:center}
html[data-design=orbit] .design-splash{position:absolute;width:610px;height:430px;right:-310px;top:30px;opacity:.35;pointer-events:none;z-index:0}
html[data-design=orbit] .crm-hero-preview{width:91%;justify-self:center;box-shadow:0 0 90px #5271bb18;margin-top:38px;border-color:#495986;border-radius:16px 16px 0 0}
html[data-design=orbit] .crm-hero-preview img{height:460px}
html[data-design=orbit] .zx-crm-product{background:linear-gradient(145deg,#202c43,#141c2c);border-color:#2b3b59;border-radius:20px}
html[data-design=orbit] .zx-crm-product>img{opacity:.9}
html[data-design=orbit] .zx-section h2{font-weight:350;font-size:38px}
html[data-design=orbit] .zx-feature{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0}
html[data-design=orbit] .zx-plan.featured{background:linear-gradient(150deg,#283759,#171f31);box-shadow:0 0 55px #849cfd10}
html[data-design=orbit] #app .layout{grid-template-columns:104px minmax(0,1fr);gap:10px;padding:16px}
html[data-design=orbit][data-zirix-service] #app .sidebar{border:1px solid var(--line);border-radius:20px;height:calc(100vh - 32px);top:16px;padding:15px 7px;gap:13px;box-shadow:0 20px 40px #0001}
html[data-design=orbit] #app .workspace{padding:2px 0 17px;justify-content:center}
html[data-design=orbit] #app .workspace-mark span{display:none}
html[data-design=orbit][data-zirix-service] #app .sidebar .nav button{flex-direction:column;font-size:9px;gap:7px;padding:10px 3px;min-height:58px;border-radius:12px;justify-content:center;text-align:center}
html[data-design=orbit][data-zirix-service] #app .sidebar .nav button.active{background:#a1afff!important;color:#10192e!important}
html[data-design=orbit] #app .nav-label{text-align:center;padding:12px 0 5px;font-size:7px;letter-spacing:1px}
html[data-design=orbit] #app .sidebar-bottom{flex-direction:column;justify-content:center;text-align:center;padding-bottom:15px}
html[data-design=orbit] #app .sidebar-bottom button{text-align:center}
html[data-design=orbit] #app .main{padding:0 18px 30px}
html[data-design=orbit] #app .topbar{background:var(--bg);margin:0;padding:3px 0 18px;border:0;min-height:72px}
html[data-design=orbit] #app .crm-object-tabs{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px 8px;min-height:44px;gap:4px}
html[data-design=orbit] #app .crm-object-tabs button{padding:9px 14px;border:0;border-radius:8px}
html[data-design=orbit] #app .crm-object-tabs button.active{background:var(--tint);color:var(--accent)}
html[data-design=orbit] #app .notice{padding:14px 1px;border:0}
html[data-design=orbit] #app .page-head{margin:10px 0 24px}
html[data-design=orbit] #app .page-head h1{font-weight:350;font-size:33px;letter-spacing:-1px}
html[data-design=orbit] #app .metric{background:linear-gradient(145deg,#1c2940,#151e2f);border-color:#33405b;box-shadow:0 6px 25px #0001}
html[data-design=orbit] #app .metric strong{font-weight:300;font-size:33px}
html[data-design=orbit] #app .crm-spotlight{background:transparent;border:1px solid var(--line);border-radius:12px}
html[data-design=orbit] #app .crm-spotlight:nth-child(2){background:#192c31}html[data-design=orbit] #app .crm-spotlight:nth-child(3){background:#29233a}
html[data-design=orbit] #app .crm-chart .bar i{box-shadow:0 0 12px #a1afff22}
html[data-design=orbit] #app .crm-donut{box-shadow:0 0 30px #819af617}

/* 04 Bloom — soft spatial surfaces and an asymmetrical brand composition. */
html[data-design=bloom] .crm-offer-nav{border:0;background:var(--bg)}
html[data-design=bloom] .zx-crm-intro{grid-template-columns:1.1fr .9fr;background:#f1e8ed;border-radius:38px;padding:28px 42px 0;gap:10px;overflow:hidden;margin-top:12px}
html[data-design=bloom] .design-index{border-color:#d8c7d2}
html[data-design=bloom] .zx-crm-intro h1{font-size:clamp(38px,4.4vw,65px);font-weight:600;line-height:1.07;letter-spacing:-2.8px}
html[data-design=bloom] .design-splash{align-self:center;transform:rotate(-8deg);margin-left:12px}
html[data-design=bloom] .crm-hero-preview{margin-top:40px;transform:rotate(1.8deg);width:94%;justify-self:center;border:9px solid #fffdfb;border-radius:18px 18px 0 0;box-shadow:0 12px 30px #69466a15}
html[data-design=bloom] .crm-hero-preview img{height:330px}
html[data-design=bloom] .zx-crm-products{gap:22px;align-items:start}
html[data-design=bloom] .zx-crm-product{background:#f0e8ed;border:0;border-radius:28px}
html[data-design=bloom] .zx-crm-product:nth-child(2){margin-top:45px;background:#e8efdf}
html[data-design=bloom] .zx-crm-product:nth-child(3){margin-top:90px;background:#f7e5d8}
html[data-design=bloom] .zx-crm-product>img{border:12px solid transparent;border-radius:28px}
html[data-design=bloom] .zx-crm-product h2{font-weight:600;font-size:29px;letter-spacing:-1.1px}
html[data-design=bloom] .zx-crm-product>div{padding:14px 27px 27px}
html[data-design=bloom] .zx-plan{border:0;background:var(--soft)}
html[data-design=bloom] .zx-plan.featured{border:0;background:#cedfba;padding:28px;transform:translateY(-12px)}
html[data-design=bloom] .zx-feature{background:#fffdfb;border:1px solid var(--line);border-radius:28px}
html[data-design=bloom] #app .layout{grid-template-columns:227px minmax(0,1fr);padding:18px;gap:16px}
html[data-design=bloom][data-zirix-service] #app .sidebar{background:#f0e8ed!important;border:0;border-radius:27px;padding:23px 16px;height:calc(100vh - 36px);top:18px;gap:21px}
html[data-design=bloom] #app .workspace{border-color:#dbcdd9;padding-bottom:23px}
html[data-design=bloom][data-zirix-service] #app .sidebar .nav button{border-radius:14px;padding:13px 14px;font-size:11px;gap:12px}
html[data-design=bloom][data-zirix-service] #app .sidebar .nav button.active{background:#fffdfb!important;color:var(--accent)!important;box-shadow:0 5px 12px #69466a08}
html[data-design=bloom] #app .main{padding:0 15px 35px}
html[data-design=bloom] #app .topbar{margin:0;padding:5px 0 20px;background:var(--bg);border:0;min-height:76px}
html[data-design=bloom] #app .crm-object-tabs{border:0;background:var(--panel);border-radius:16px;padding:5px 8px;min-height:44px}
html[data-design=bloom] #app .crm-object-tabs button{border:0;border-radius:11px;padding:9px 11px}
html[data-design=bloom] #app .crm-object-tabs button.active{background:var(--tint);color:var(--accent)}
html[data-design=bloom] #app .notice{border:0;padding:14px 0}
html[data-design=bloom] #app .page-head{margin:14px 0 27px}
html[data-design=bloom] #app .page-head h1{font-size:31px;font-weight:500;letter-spacing:-1.4px}
html[data-design=bloom] #app .crm-spotlight{background:#e9efdf;border:0;padding:20px;border-radius:20px}
html[data-design=bloom] #app .crm-spotlight:nth-child(2){background:#f1e7ef}
html[data-design=bloom] #app .crm-spotlight:nth-child(3){background:#f7e6da}
html[data-design=bloom] #app .crm-spotlight .spot-icon{border:0;background:#fff9;border-radius:50%;width:29px;height:29px}
html[data-design=bloom] #app .metric{background:#fffdfb;border:0;box-shadow:var(--shadow);padding:21px 19px;border-radius:22px}
html[data-design=bloom] #app .metric strong{font-size:30px;font-weight:500}
html[data-design=bloom] #app .panel{border:0;border-radius:24px;box-shadow:var(--shadow)}
html[data-design=bloom] #app .panel-head{padding:21px 24px}
html[data-design=bloom] #app .panel-body{padding:22px 24px}
html[data-design=bloom] #app .crm-initial{border-radius:50%}
html[data-design=bloom] #app .crm-stage{border-radius:30px}

/* 05 Monolith — architectural typesetting, framed data and right-side navigation. */
html[data-design=monolith] .crm-offer-nav{background:var(--ink);border:0;padding-top:13px;padding-bottom:13px}
html[data-design=monolith] .crm-offer-nav a,html[data-design=monolith] .crm-offer-nav strong{color:#d8e1db}
html[data-design=monolith] .crm-offer-nav .demo-link{color:#a8d8c4}
html[data-design=monolith] .zx-crm-intro{grid-template-columns:1.4fr .6fr;column-gap:0;align-items:start}
html[data-design=monolith] .zx-crm-intro h1{font-size:clamp(43px,5.8vw,85px);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:-3px;max-width:900px}
html[data-design=monolith] .design-splash{height:100%;max-height:500px;overflow:hidden;align-items:start;padding-top:18px;color:var(--accent)}
html[data-design=monolith] .design-splash svg{min-width:410px;height:400px;transform:translateX(45px)}
html[data-design=monolith] .crm-hero-preview{margin-top:38px;border:1px solid var(--ink);box-shadow:10px 10px 0 #d4ddd4;width:100%}
html[data-design=monolith] .crm-hero-preview img{height:430px}
html[data-design=monolith] .crm-preview-bar{background:var(--ink);color:#e5eee8}
html[data-design=monolith] .crm-preview-bar>span:last-child{color:#a8d8c4}
html[data-design=monolith] .zx-crm-products{display:block;border-top:2px solid var(--ink)}
html[data-design=monolith] .zx-crm-product{display:grid;grid-template-columns:70px 1fr 1fr;background:transparent;border:0;border-bottom:1px solid var(--ink);gap:24px;padding:35px 0;box-shadow:none}
html[data-design=monolith] .zx-crm-product:before{content:attr(data-index);font:400 36px var(--display);color:var(--accent)}
html[data-design=monolith] .zx-crm-product>img{grid-column:3;grid-row:1;align-self:center;border:1px solid var(--line);aspect-ratio:1.3;object-fit:cover;object-position:top}
html[data-design=monolith] .zx-crm-product>div{grid-column:2;grid-row:1;padding:0}
html[data-design=monolith] .zx-crm-product h2{font-size:34px;text-transform:uppercase;letter-spacing:-1.5px}
html[data-design=monolith] .zx-section>h2{text-transform:uppercase;font-size:38px;font-weight:600}
html[data-design=monolith] .zx-plan.featured{background:var(--ink);border-color:var(--ink)}
html[data-design=monolith] .zx-plan.featured :is(h3,strong,p,li,.zx-plan-price,.zx-plan-unit,.zx-plan-label){color:#e8f1eb}
html[data-design=monolith] .zx-plan.featured button.primary{background:#a8d8c4!important;border-color:#a8d8c4!important;color:var(--ink)!important}
html[data-design=monolith] #app .layout{grid-template-columns:minmax(0,1fr) 196px}
html[data-design=monolith][data-zirix-service] #app .sidebar{grid-column:2;grid-row:1;border:0;border-left:1px solid #2d4138;background:var(--ink)!important;padding:25px 15px;gap:27px}
html[data-design=monolith] #app .workspace{border-color:#ffffff20}
html[data-design=monolith] #app .workspace-mark img{filter:brightness(0) invert(1)}
html[data-design=monolith] #app .main{grid-column:1;grid-row:1;padding:0 35px 45px}
html[data-design=monolith] #app .topbar{margin:0 -35px;padding:17px 35px}
html[data-design=monolith][data-zirix-service] #app .sidebar .nav button{font-size:11px;padding:12px 8px;gap:12px}
html[data-design=monolith][data-zirix-service] #app .sidebar .nav button.active{background:#a8d8c4!important;color:var(--ink)!important}
html[data-design=monolith] #app .nav-label{border-color:#ffffff20;font-size:7px;padding-left:8px}
html[data-design=monolith] #app .sidebar-bottom{border-color:#ffffff20}
html[data-design=monolith] #app .page-head h1{font-weight:500;text-transform:uppercase;font-size:34px;letter-spacing:-1.2px}
html[data-design=monolith] #app .crm-object-tabs button{font-size:10px;text-transform:uppercase;letter-spacing:.7px;padding-left:0;padding-right:13px}
html[data-design=monolith] #app .crm-spotlights{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-design=monolith] #app .crm-spotlight{border:0;border-right:1px solid var(--line);background:transparent!important;padding:19px 17px}
html[data-design=monolith] #app .crm-spotlight:first-child{padding-left:0}html[data-design=monolith] #app .crm-spotlight:last-child{border-right:0}
html[data-design=monolith] #app .metrics{gap:1px;background:var(--line);border:1px solid var(--line)}
html[data-design=monolith] #app .metric{border:0;background:var(--panel);padding:20px 25px}
html[data-design=monolith] #app .metric strong{font-size:34px;font-weight:400;letter-spacing:-1px}
html[data-design=monolith] #app .panel-head{background:var(--ink)}
html[data-design=monolith] #app .panel-head h2{color:white;font-size:10px;letter-spacing:.8px;text-transform:uppercase}
html[data-design=monolith] #app .panel-head .link-btn{color:#a8d8c4}
html[data-design=monolith] #app .crm-dashboard-grid{grid-template-columns:minmax(0,1.05fr) minmax(290px,1fr)}

/* Preview account forms share the same design system. */
html[data-design] body[data-atlas-surface=account] :is(.zx-auth-card,.auth-card,.zx-settings-card,.zx-account-card){background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}

@media(min-width:1550px){html[data-design] #app .page-head h1{font-size:38px}html[data-design] #app .crm-spotlight{padding:22px}html[data-design] #app .metric{padding-top:25px;padding-bottom:25px}}
@media(max-width:1250px){html[data-design][data-zirix-service] #zirix-global{padding:12px 22px!important;gap:14px!important}html[data-design] #app .topbar{flex-wrap:wrap}html[data-design] #app .crm-offers-link{margin-left:auto}html[data-design] #app .crm-dashboard-grid{grid-template-columns:1fr}html[data-design] #app .crm-dashboard-side{display:grid;grid-template-columns:1fr 1fr}html[data-design] #app .crm-chart{grid-template-columns:1fr 125px}html[data-design] #app .crm-spotlight{padding:14px;gap:9px}html[data-design] #app .metric{padding:15px}html[data-design] #app .metric strong{font-size:27px}html[data-design=vector] #app .sidebar-bottom{display:none}html[data-design] .zx-crm-product>div{padding:21px}html[data-design=monolith] .zx-crm-product>div,html[data-design=meridian] .zx-crm-product>div{padding:0}html[data-design] #app .crm-app-title{min-width:110px}}
@media(max-width:1000px){html[data-design][data-zirix-service] #zirix-global .zg-links{gap:9px!important}html[data-design][data-zirix-service] #zirix-global .zg-links a{font-size:10px!important}html[data-design] .zx-crm-intro h1{font-size:46px}html[data-design] .intro-copy>p:not(.zx-kicker){font-size:13px}html[data-design] .design-splash{min-height:0}html[data-design] .crm-hero-preview img{height:350px}html[data-design] #app .layout{grid-template-columns:186px minmax(0,1fr)}html[data-design=orbit] #app .layout{grid-template-columns:88px minmax(0,1fr)}html[data-design=monolith] #app .layout{grid-template-columns:minmax(0,1fr) 174px}html[data-design] #app .main{padding-left:20px;padding-right:20px}html[data-design] #app .topbar{margin:0 -20px;padding:13px 20px}html[data-design=orbit] #app .topbar,html[data-design=bloom] #app .topbar{margin:0;padding-left:0;padding-right:0}html[data-design] #app .page-head{align-items:flex-start;flex-direction:column}html[data-design] #app .crm-spotlights{grid-template-columns:1fr}html[data-design] #app .crm-spotlight{padding:15px;min-height:0}html[data-design] #app .crm-spotlight p{margin-bottom:6px}html[data-design] #app .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-design] #app .crm-dashboard-side{grid-template-columns:1fr}html[data-design] .zx-crm-products{gap:13px}html[data-design] .zx-crm-product h2{font-size:24px}html[data-design=vector] .zx-crm-product>div{padding:18px}}
@media(max-width:760px){
html[data-design][data-zirix-service] #zirix-global{padding:11px 15px!important;gap:9px!important;min-height:65px!important;flex-wrap:wrap!important}
html[data-design][data-zirix-service] #zirix-global .zg-brand>img:first-child{width:31px!important;height:31px!important}
html[data-design][data-zirix-service] #zirix-global .zg-wordmark{width:110px!important;height:34px!important}
html[data-design][data-zirix-service] #zirix-global .zg-links{display:none!important}
html[data-design][data-zirix-service] #zirix-global .zg-actions{margin-left:auto!important}
html[data-design][data-zirix-service] #zirix-global .zg-launch{padding:7px!important}
html[data-design][data-zirix-service] #zirix-global .zx-tools{gap:6px!important}
html[data-design][data-zirix-service] #zirix-global .zx-search{display:flex!important;flex:1 1 240px!important;max-width:none!important;min-width:0!important;order:5!important}
html[data-design][data-zirix-service] #zirix-global .zx-login{padding:8px 11px!important;font-size:11px!important}
html[data-design][data-zirix-service] #zirix-global .zx-language{padding:6px!important;font-size:10px!important}
html[data-design] .crm-offer-nav{justify-content:flex-start;gap:20px;padding:14px 18px;font-size:11px}
html[data-design] .crm-offer-nav strong{display:none}
html[data-design] .zx-presentation{padding:0 18px 35px}
html[data-design] .zx-crm-intro{display:flex;flex-direction:column;align-items:stretch;padding:22px 0 0;margin:0 0 36px;border-radius:0;text-align:left;overflow:hidden}
html[data-design] .design-index{font-size:8px;margin-bottom:25px;padding-bottom:13px;gap:18px;width:100%}
html[data-design] .design-index span:last-child{letter-spacing:0;max-width:130px;text-align:right}
html[data-design] .zx-crm-intro h1{font-size:43px;line-height:1.05;letter-spacing:-2px;margin:14px 0 23px}
html[data-design] .intro-copy>p:not(.zx-kicker){font-size:13px;margin:0 0 19px}
html[data-design] .zx-crm-intro .zx-actions{gap:8px;justify-content:flex-start;margin-top:25px}
html[data-design] .zx-crm-intro .zx-actions>*{font-size:11px;padding:13px 14px}
html[data-design] .design-splash{position:relative;inset:auto;width:auto;height:auto;min-height:0;max-height:none;opacity:1;margin:18px 0 0;transform:none;overflow:hidden;border-radius:80px 80px 0 0}
html[data-design] .design-splash svg{height:200px;width:100%;min-width:0;transform:none}
html[data-design] .crm-hero-preview{margin:20px 0 0;width:100%;transform:none;border-radius:var(--radius);padding:0;border-width:1px;box-shadow:none}
html[data-design] .crm-preview-bar{font-size:8px;padding:10px;gap:6px}
html[data-design] .crm-preview-bar>span:first-child{display:none}
html[data-design] .crm-hero-preview img{height:200px;object-fit:cover}
html[data-design] .zx-crm-products{display:grid;grid-template-columns:1fr;gap:22px;border:0}
html[data-design] .zx-crm-product{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);background:var(--panel);margin-top:0!important}
html[data-design] .zx-crm-product>img{order:0;width:100%;aspect-ratio:1.7;border:0;object-position:top}
html[data-design] .zx-crm-product>div{padding:24px}
html[data-design] .zx-crm-product h2{font-size:29px}
html[data-design] .zx-crm-product h3{min-height:0;font-size:18px}
html[data-design] .zx-crm-product:before{padding:15px 24px;font-size:30px}
html[data-design] .zx-section{margin-top:48px}
html[data-design] .zx-section>h2{font-size:29px;letter-spacing:-1px}
html[data-design] .zx-feature-grid,html[data-design] .zx-pricing-grid{grid-template-columns:1fr;gap:15px}
html[data-design] .zx-plan.featured{transform:none}
html[data-design] .zx-presentation footer{flex-direction:column;gap:0}
html[data-design=vector] .zx-crm-intro{background:var(--accent);padding:20px;border-radius:0;margin:16px -1px 35px}
html[data-design=bloom] .zx-crm-intro{background:var(--soft);padding:20px;border-radius:23px;margin-top:12px}
html[data-design=orbit] .zx-crm-intro h1{font-size:43px;font-weight:350}
html[data-design=monolith] .zx-crm-intro h1{font-size:46px}
html[data-design] #app .layout{display:block;padding:0}
html[data-design][data-zirix-service] #app .sidebar{display:none;position:fixed;left:0;top:0;bottom:0;width:224px;height:100dvh;max-height:100dvh;z-index:90;border-radius:0;padding:45px 14px 20px;border:0;overflow-y:auto;box-shadow:0 0 0 100vmax #0005}
html[data-design][data-zirix-service] #app .sidebar.open{display:flex;flex-direction:column;align-items:stretch}
html[data-design] #app .sidebar .nav{flex-direction:column;overflow:visible;flex:none;gap:4px}
html[data-design][data-zirix-service] #app .sidebar .nav button{flex-direction:row;text-align:left;justify-content:flex-start;white-space:normal;font-size:12px;gap:12px;min-height:40px;padding:12px}
html[data-design] #app .nav-label{writing-mode:horizontal-tb;text-align:left;padding:14px 12px 5px;font-size:8px;border-top:1px solid var(--line);margin-top:10px}
html[data-design] #app .sidebar-bottom{display:flex;flex-direction:row;margin-top:auto;padding:18px 4px 4px;border:0;flex-wrap:wrap}
html[data-design] #app .sidebar-bottom :is(small,button){display:block}
html[data-design] #app .workspace{justify-content:flex-start;padding-bottom:17px;border-bottom:1px solid var(--line)}
html[data-design] #app .workspace-mark span{display:block}
html[data-design] #app .crm-close-menu{position:absolute;top:8px;right:10px;display:block!important;color:var(--rail-ink);background:transparent;border:0;font-size:23px;padding:5px;line-height:1}
html[data-design] #app .main{padding:0 14px 25px}
html[data-design] #app .topbar{margin:0 -14px;padding:14px;background:var(--panel);gap:9px;flex-wrap:wrap;min-height:80px}
html[data-design] #app .mobile-menu{display:block;background:var(--soft);border-color:var(--line);color:var(--ink);padding:7px;border-radius:var(--radius)}
html[data-design] #app .crm-app-icon{width:30px;height:30px}
html[data-design] #app .crm-app-title{min-width:80px;flex:1}
html[data-design] #app .crm-app-title strong{font-size:16px}
html[data-design] #app .crm-demo-select{width:138px!important;font-size:10px;padding:8px}
html[data-design] #app .topbar .search{order:5;width:auto;flex:1;max-width:none;min-width:190px;margin:0;font-size:11px}
html[data-design] #app .crm-offers-link{order:6;max-width:105px;white-space:normal;font-size:9px;margin-left:0}
html[data-design] #app .crm-object-tabs{margin:0 -14px;padding:3px 12px;gap:5px;border-radius:0;border:0;border-bottom:1px solid var(--line);min-height:44px}
html[data-design] #app .crm-object-tabs button{font-size:10px;padding:10px 9px;letter-spacing:0;text-transform:none}
html[data-design] #app .notice{font-size:8px;gap:6px;flex-wrap:wrap;padding:12px 0}
html[data-design] #app .notice b{font-size:7px}
html[data-design] #app .notice a{font-size:8px}
html[data-design] #app .page-head{margin:22px 0;gap:14px;align-items:flex-start;flex-direction:column}
html[data-design] #app .page-head h1{font-size:28px;letter-spacing:-.8px}
html[data-design] #app .page-head p{font-size:11px}
html[data-design] #app .page-actions button{font-size:11px}
html[data-design] #app .crm-spotlights{display:grid;grid-template-columns:1fr;gap:9px;border:0;margin-bottom:18px}
html[data-design] #app .crm-spotlight,html[data-design] #app .crm-spotlight:first-child{border:1px solid var(--line);padding:15px;gap:12px;min-height:0}
html[data-design] #app .crm-spotlight h3{font-size:12px}
html[data-design] #app .crm-spotlight p{font-size:11px}
html[data-design] #app .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;border:0;background:none}
html[data-design] #app .metric,html[data-design] #app .metric:first-child{padding:17px;border:1px solid var(--line);background:var(--panel)}
html[data-design] #app .metric strong{font-size:27px;font-weight:500}
html[data-design=vector] #app .metric:first-child :is(strong,label,small,.icon){color:var(--ink)}
html[data-design] #app .metric label{font-size:9px;gap:5px}
html[data-design] #app .metric label .icon{width:14px;height:14px}
html[data-design] #app .metric small{font-size:9px}
html[data-design] #app .crm-dashboard-grid,html[data-design] #app .crm-dashboard-side{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
html[data-design] #app .panel-head{padding:16px;min-height:54px}
html[data-design] #app .panel-body{padding:17px}
html[data-design] #app .crm-chart{grid-template-columns:minmax(0,1fr) 95px;gap:12px}
html[data-design] #app .crm-donut{width:95px;height:95px}
html[data-design] #app .crm-chart .bar-row{grid-template-columns:80px minmax(25px,1fr) 15px;gap:5px;font-size:8px}
html[data-design] #app .toolbar{flex-wrap:wrap}
html[data-design] #app .crm-activity-table{min-width:580px}
html[data-design] #app .crm-dashboard-wide{overflow-x:auto}
html[data-design] #editor{max-width:calc(100vw - 20px)}
html[data-design] #editor .form-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html[data-design]{scroll-behavior:auto}html[data-design] *{animation:none!important;transition:none!important}}

/* Meridian colour review: one retained layout, five white-based palettes. */
html[data-palette] .design-splash{background:repeating-linear-gradient(0deg,transparent 0 49px,var(--line) 50px),repeating-linear-gradient(90deg,transparent 0 49px,var(--line) 50px)!important}
html[data-palette] .crm-hero-preview{background:var(--soft)!important}
html[data-palette] #app :is(.crm-spotlight,.panel-head,.metrics,.bay h3){background:var(--soft)!important}
html[data-palette] #app .crm-spotlight:nth-child(3){background:var(--tint)!important}
html[data-palette] #app :is(.metric,.panel-body,.table-wrap,.main){background:var(--panel)!important}
html[data-palette] #app :is(th,.toolbar select,.toolbar input){background:var(--soft)!important;color:var(--ink)!important}
html[data-palette] #app tr:nth-child(even) td{background:var(--soft)}
html[data-palette] #app .sidebar .nav button{background:color-mix(in srgb,var(--panel) 58%,var(--soft))!important;color:var(--rail-ink)!important}
html[data-palette][data-zirix-service] #app .sidebar .nav button.active{background:var(--tint)!important;color:var(--accent)!important;box-shadow:inset 3px 0 var(--accent)!important}
html[data-palette][data-zirix-service] #app .sidebar .nav button:hover{background:var(--tint)!important}
html[data-palette] #app .nav-label{opacity:1;color:var(--muted)}
html[data-palette] #app .workspace{position:relative;padding-right:30px}
html[data-palette] #app .workspace-mark{gap:9px}
html[data-palette] #app .workspace-mark span{max-width:82px}
html[data-palette] #app .meridian-rail-toggle{display:grid;place-items:center;position:absolute;right:0;top:0;width:28px;height:31px;padding:5px;background:var(--panel);color:var(--accent);border:1px solid var(--line);border-radius:3px}
html[data-palette] #app .meridian-rail-toggle svg{width:20px;height:20px}
html[data-palette] #app .sidebar-bottom button{display:flex;align-items:center;gap:8px;color:var(--accent)!important}
html[data-palette] #app .sidebar-bottom button svg{width:16px;height:16px;flex-shrink:0}
html[data-palette] #app .sidebar .nav .icon{flex-shrink:0}
html[data-palette] #app .crm-stage{font-weight:600}
html[data-palette] :is(.zx-feature,.zx-note,.zx-selected-plan,.zx-plan.featured){background:var(--soft)!important}
html[data-palette] .zx-plan-dialog,html[data-palette] #editor{box-shadow:0 20px 80px #735B6633}
html[data-palette] dialog::backdrop{background:#75687466}
html[data-palette] input::placeholder,html[data-palette] textarea::placeholder{color:var(--muted);opacity:1}
html[data-palette] #toast{background:var(--accent)!important;color:white!important}
html[data-palette] .crm-preview-bar>span:first-child{color:var(--muted)!important}
html[data-palette] .zx-comparison thead{background:var(--soft)!important}
html[data-palette] button.primary{box-shadow:none!important}
html[data-palette] body[data-atlas-surface=account] :is(main,section,article){background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-palette] body[data-atlas-surface=account] :is(h1,h2,h3,h4,label){color:var(--ink)!important}
html[data-palette] body[data-atlas-surface=account] :is(p,small){color:var(--muted)!important}
html[data-palette] body[data-atlas-surface=account] a{color:var(--accent)!important}
@media(min-width:761px){
 html[data-palette][data-sidebar-collapsed=true] #app .layout{grid-template-columns:72px minmax(0,1fr)}
 html[data-palette][data-sidebar-collapsed=true][data-zirix-service] #app .sidebar{padding-left:8px;padding-right:8px}
 html[data-palette][data-sidebar-collapsed=true] #app .workspace{padding:0 0 20px;justify-content:center;min-height:50px}
 html[data-palette][data-sidebar-collapsed=true] #app .workspace-mark{visibility:hidden}
 html[data-palette][data-sidebar-collapsed=true] #app .meridian-rail-toggle{left:10px;right:auto;width:36px;height:34px}
 html[data-palette][data-sidebar-collapsed=true] #app .meridian-rail-toggle svg{transform:scaleX(-1)}
 html[data-palette][data-sidebar-collapsed=true] #app .meridian-nav-text,
 html[data-palette][data-sidebar-collapsed=true] #app .workspace-mark span,
 html[data-palette][data-sidebar-collapsed=true] #app .sidebar-bottom small{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 html[data-palette][data-sidebar-collapsed=true][data-zirix-service] #app .sidebar .nav button{justify-content:center;padding:12px 0;gap:0}
 html[data-palette][data-sidebar-collapsed=true] #app .nav-label{font-size:0;padding:10px 0 0;margin:10px 6px 0}
 html[data-palette][data-sidebar-collapsed=true] #app .sidebar-bottom{justify-content:center;padding-left:0;padding-right:0}
 html[data-palette][data-sidebar-collapsed=true] #app .sidebar-bottom button{justify-content:center;min-height:32px;padding:8px!important}
}
@media(max-width:760px){
 html[data-palette] #app .meridian-rail-toggle{display:none}
 html[data-palette] #app .workspace{padding-right:7px}
 html[data-palette][data-zirix-service] #app .sidebar{box-shadow:0 0 0 100vmax #75687466}
}
/* Workspace-inspired colour roles; Meridian geometry remains unchanged. */
html[data-palette] #app .crm-spotlight:nth-child(1){background:var(--warning-soft)!important}
html[data-palette] #app .crm-spotlight:nth-child(2){background:var(--tint)!important}
html[data-palette] #app .crm-spotlight:nth-child(3){background:var(--secondary-soft)!important}
html[data-palette] #app .crm-spotlight:nth-child(1) :is(.spot-icon,button){color:var(--warning)}
html[data-palette] #app .crm-spotlight:nth-child(3) :is(.spot-icon,button){color:var(--secondary)}
html[data-palette] #app .metrics{background:var(--soft)!important}
html[data-palette] #app .metric:nth-child(1){background:var(--tint)!important}
html[data-palette] #app .metric:nth-child(2){background:var(--secondary-soft)!important}
html[data-palette] #app .metric:nth-child(3){background:var(--warning-soft)!important}
html[data-palette] #app .metric:nth-child(4){background:var(--tertiary-soft)!important}
html[data-palette] #app .metric:nth-child(2) label .icon{color:var(--secondary)}
html[data-palette] #app .metric:nth-child(3) label .icon{color:var(--warning)}
html[data-palette] #app .metric:nth-child(4) label .icon{color:var(--tertiary)}
html[data-palette] #app .sidebar .nav button:not(.active)[data-page=clients] .icon{color:var(--secondary)}
html[data-palette] #app .sidebar .nav button:not(.active):is([data-page=deals],[data-page=orders],[data-page=requests]) .icon{color:var(--tertiary)}
html[data-palette] #app .sidebar .nav button:not(.active):is([data-page=tasks],[data-page=products],[data-page=services]) .icon{color:var(--warning)}
html[data-palette] #app .sidebar .nav button:not(.active):is([data-page=reports],[data-page=appointments],[data-page=bookings]) .icon{color:var(--accent)}
html[data-palette] #app .crm-chart .bar-row:nth-child(2) .bar i{background:var(--secondary)}
html[data-palette] #app .crm-chart .bar-row:nth-child(3) .bar i{background:var(--warning)}
html[data-palette] #app .crm-chart .bar-row:nth-child(4) .bar i{background:var(--tertiary)}
html[data-palette] #app .crm-chart .bar-row:nth-child(5) .bar i{background:var(--secondary)}
html[data-palette] #app :is(.crm-stage[data-stage=won],.crm-stage[data-stage=done]){background:var(--secondary-soft);color:var(--secondary)}
html[data-palette] #app .crm-stage[data-stage=lost]{background:var(--tertiary-soft);color:var(--tertiary)}
html[data-palette] #app .crm-stage[data-stage=proposal]{background:var(--warning-soft);color:var(--warning)}
html[data-palette] .zx-feature:nth-child(3n+1){background:var(--tint)!important}
html[data-palette] .zx-feature:nth-child(3n+2){background:var(--secondary-soft)!important}
html[data-palette] .zx-feature:nth-child(3n){background:var(--warning-soft)!important}
html[data-palette] .design-splash svg>g:first-child{stroke:var(--line)}
html[data-palette] .design-splash svg>g:first-child path:last-child{stroke:var(--accent)}
html[data-palette] .design-splash svg>g:last-child circle:nth-child(2){fill:var(--secondary)}
html[data-palette] .design-splash svg>g:last-child circle:nth-child(3){fill:var(--warning)}
html[data-palette] .design-splash svg>g:last-child circle:nth-child(4){fill:var(--tertiary)}
html[data-palette] :is(.zx-auth-card,.zx-account-card){background:var(--panel)!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-palette] #zx-page :is(h1,h2,h3,label){color:var(--ink)!important}
html[data-palette] #zx-page :is(p,small){color:var(--muted)!important}
html[data-palette] #zx-page a{color:var(--accent)!important}