/* One visual language across every workspace panel. */
.modern-app{--panel-navy:#0b2844;--panel-surface:#f5f9fd}
.modern-app .app-main{background:radial-gradient(ellipse at 95% 12%,#58b9dc24,transparent 44%),radial-gradient(ellipse at 5% 70%,#6799ed20,transparent 48%),linear-gradient(140deg,#f3f8ff,#edf5fa 60%,#f9fcff)}
.modern-app .ambient-art:before{border-color:#6caac53b;opacity:.7}.modern-app .ambient-art:after{opacity:.65}
.modern-app dialog.workspace-panel{border:1px solid #b9d0e1;border-radius:20px;background:var(--panel-surface);box-shadow:0 28px 90px #08284455;overflow:auto;overscroll-behavior:contain}
.modern-app dialog.workspace-panel::backdrop{background:#091f38a6;backdrop-filter:blur(5px)}
.modern-app dialog.workspace-panel>.workspace-panel-hero{box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;min-height:176px;margin:0 0 20px;padding:26px;border-radius:14px;background:linear-gradient(90deg,#071c35f5,#071c3540),url('/assets/toolkit-banner.png') center/cover;color:#fff}
.modern-app dialog.workspace-panel>.workspace-panel-hero h2{font-size:clamp(24px,2.8vw,32px);line-height:1.15;letter-spacing:-.6px;color:#fff;margin:8px 0 12px;max-width:560px}
.modern-app dialog.workspace-panel>.workspace-panel-hero :is(p,.as-eyebrow,.tf-kicker,.billing-kicker,.eyebrow,.roadmap-kicker){color:#d3eafa;max-width:560px;line-height:1.5}
.modern-app dialog.workspace-panel>.workspace-panel-hero>button{flex:none;min-width:44px;min-height:44px;background:#f0f8ff;color:#153b58;border:1px solid #c4e1ef;border-radius:10px}
.modern-app #agent-studio>.workspace-panel-hero{background-image:linear-gradient(90deg,#081d35 0%,#081d35e6 38%,#081d3520 100%),url('/assets/agent-studio-banner.svg')}
.modern-app #trend-finder>.workspace-panel-hero{background-image:linear-gradient(90deg,#081d35 0%,#081d35e6 38%,#081d3520 100%),url('/assets/trend-finder-banner.svg')}
.modern-app #billing-panel>.workspace-panel-hero,.modern-app #cf-dialog>.workspace-panel-hero,.modern-app #rd-dialog>.workspace-panel-hero{background-image:linear-gradient(90deg,#071c35f5,#071c3540),url('/assets/bookkeeping-banner.png')}
.modern-app #widget-dialog>.workspace-panel-hero{border-radius:18px 18px 0 0;margin:0 0 16px}
.modern-app #zi-guide>.workspace-panel-hero{min-height:200px}
.modern-app .review-dialog-nav{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:6px;padding:10px;margin:0 0 14px;border:1px solid #c5d9e9;border-radius:10px;background:#eaf3fb;box-shadow:0 3px 10px #102a4010}
.modern-app .review-dialog-nav a{font:600 12px/1.4 Arial;padding:9px 11px;min-height:36px;box-sizing:border-box;border-radius:7px;color:#234f70;text-decoration:none}
.modern-app .review-dialog-nav a:hover,.modern-app .review-dialog-nav a[aria-current=page]{background:#143b5d;color:white}
.modern-app.dark-mode dialog.workspace-panel{background:#112b43;color:#e3f0fa}.modern-app.dark-mode .app-main{background:radial-gradient(ellipse at 85% 15%,#1a68892b,transparent 55%),#10253c}
@media(max-width:700px){.modern-app dialog.workspace-panel>.workspace-panel-hero{min-height:160px;padding:20px;gap:10px;background-position:60% center}.modern-app dialog.workspace-panel>.workspace-panel-hero h2{font-size:24px}.modern-app dialog.workspace-panel>.workspace-panel-hero p{font-size:14px}.modern-app .review-dialog-nav{gap:3px;padding:6px}.modern-app .review-dialog-nav a{padding:8px;font-size:12px}.modern-app #agent-studio>.workspace-panel-hero,.modern-app #trend-finder>.workspace-panel-hero{background-position:62% center}}
.modern-app dialog.workspace-panel{width:min(1060px,calc(100vw - 28px));max-width:1060px;max-height:calc(100dvh - 28px);padding:24px;box-sizing:border-box}
.modern-app dialog.workspace-panel>.workspace-panel-hero>div{min-width:0;max-width:72%}
.modern-app dialog.workspace-panel>.workspace-panel-hero :is(h3,.tf-kicker,.as-eyebrow,.billing-kicker,.welcome-kicker){color:#d3eafa}
.modern-app dialog.workspace-panel>.workspace-panel-hero h3{font-size:28px;color:#fff;margin:12px 0}
.modern-app #widget-dialog.workspace-panel{padding:0}
.modern-app #zi-guide.workspace-panel{width:min(760px,calc(100vw - 28px))}
@media(max-width:700px){.modern-app dialog.workspace-panel{padding:14px}.modern-app dialog.workspace-panel>.workspace-panel-hero>div{max-width:calc(100% - 66px)}.modern-app #widget-dialog>.workspace-panel-hero>.widget-identity{max-width:calc(100% - 44px)}.modern-app #zi-guide>.workspace-panel-hero>div{max-width:100%}}
.modern-app dialog.workspace-panel>.workspace-panel-hero{background-color:#0b2844}
.modern-app dialog.workspace-panel>.workspace-panel-hero :is(.tf-kicker,.as-eyebrow,.billing-kicker,.welcome-kicker,.eyebrow,.roadmap-kicker){color:#c1e4f5!important}
/* Quiet architectural planes replace the previous orbit and blue glow effects. */
.modern-app .app-main{background:linear-gradient(115deg,#f8f8f5 0%,#f4f6f8 60%,#edf1f4 100%)}
.modern-app .ambient-art{background:none;inset:0!important;transform:none!important;will-change:auto;opacity:1}
.modern-app .ambient-art>svg{display:none}
.modern-app .ambient-art:before{content:"";inset:0; width:auto;height:auto;border:0;border-radius:0;transform:none;animation:none;opacity:1;background:linear-gradient(124deg,transparent 0 67%,#173b5910 67.08%,#fff9 67.25%,#ffffff20 79%,transparent 79.1%)}
.modern-app .ambient-art:after{content:"";inset:0;width:auto;height:auto;border:0;border-radius:0;transform:none;animation:none;opacity:1;background:linear-gradient(124deg,transparent 0 79%,#a5926f33 79.08%,transparent 79.2%),linear-gradient(124deg,transparent 0 88%,#173b5912 88.08%,transparent 88.2%)}
.modern-app #projects-dialog .workspace-panel-hero .draft-tag,.modern-app #credit-dialog .workspace-panel-hero .draft-tag{display:inline-block;background:#173e5c;color:#e3f3fc;border:1px solid #6386a1;font-size:12px;font-weight:700;letter-spacing:.08em;padding:7px 10px}
.modern-app #local-projects{padding:20px 0 8px;font-size:15px;line-height:1.7;color:#3e586f}
.modern-app #projects-close{display:inline-flex;margin-top:32px;margin-bottom:8px;min-height:46px;align-items:center;padding:12px 20px}
.modern-app .workspace-tool-nav button{display:flex;align-items:center;gap:11px}
.modern-app .workspace-tool-nav button svg,.modern-app .side-nav button svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:#163c5d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#163c5d}
.modern-app .workspace-nav-label{border-top:1px solid #173b591a;padding-top:20px;margin-top:18px}
.modern-app .workspace-nav-feedback{border-top:1px solid #173b591a!important;border-radius:0!important;margin-top:14px;padding-top:18px;min-height:58px}
.modern-app .workspace-tool-nav{padding-bottom:18px;border-bottom:1px solid #173b591a}
.modern-app .project-dot,.modern-app .project-dot.teal{background:#163c5d;box-shadow:0 0 0 3px #163c5d0a}
.modern-app.dark-mode .app-main{background:linear-gradient(115deg,#111f30,#16283b)}
.modern-app.dark-mode .ambient-art:before{opacity:.25}.modern-app.dark-mode .ambient-art:after{opacity:.4}
.modern-app.dark-mode .workspace-tool-nav button svg,.modern-app.dark-mode .side-nav button svg{stroke:#bed6eb;color:#bed6eb}
.modern-app.dark-mode .workspace-nav-label,.modern-app.dark-mode .workspace-nav-feedback,.modern-app.dark-mode .workspace-tool-nav{border-color:#bed6eb26!important}
.modern-app.dark-mode #local-projects{color:#c2d5e5}
.modern-app .ambient-art:before,.modern-app .ambient-art:after{background-size:100% 850px;background-repeat:no-repeat}
/* Custom material artwork: replace all previous geometric background layers. */
.modern-app .app-main{background:#f8f8f6}
.modern-app .ambient-art{background:url('/assets/workspace-glass.png') right top/100% auto no-repeat;opacity:1;inset:0!important;transform:none!important}
.modern-app .ambient-art:before,.modern-app .ambient-art:after{content:none;display:none}
.modern-app .ambient-art>svg{display:none}
.modern-app .project-dot{background:#5b8ede;box-shadow:none}
.modern-app .project-dot.teal{background:#48b3a6}
.modern-app .welcome{background:#fafbf8d9;border:1px solid #ffffff80;border-radius:20px;padding:18px 22px;box-sizing:border-box}
.modern-app .provider-guide{background:#ffffffeb;border-radius:12px}
.modern-app.dark-mode .app-main{background:#10253a}
.modern-app.dark-mode .ambient-art{opacity:.2}
.modern-app.dark-mode .welcome{background:#122a40ed;border-color:#334b61}
.modern-app.dark-mode .provider-guide{background:#152f47ed}
@media(max-width:700px){.modern-app .ambient-art{background-size:auto 740px;background-position:65% top}.modern-app .welcome{padding:16px;margin-bottom:22px}.modern-app .app-content{padding-left:18px;padding-right:18px}}
/* Fade the artwork into the page surface rather than ending at an image edge. */
.modern-app .ambient-art{background:none}
.modern-app .ambient-art:before{content:"";display:block;position:absolute;inset:0 0 auto;height:auto;width:100%;aspect-ratio:3/2;background:url('/assets/workspace-glass.png') center top/100% auto no-repeat;mask-image:linear-gradient(#000 0 65%,transparent 100%);opacity:1}
@media(max-width:700px){.modern-app .ambient-art:before{aspect-ratio:auto;height:800px;background-size:auto 800px;background-position:right top;mask-image:linear-gradient(#000 0 65%,transparent 100%)}}
/* Viewport-wide atmosphere remains visible for the entire scroll journey. */
body.modern-app{position:relative;isolation:isolate;background:#f4f7f9}
body.modern-app::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:#f4f7f9 url('/assets/workspace-air.png') center/cover no-repeat}
.modern-app .app-main,.modern-app.dark-mode .app-main{background:transparent}
.modern-app .ambient-art{display:none}
.modern-app .welcome{background:#ffffffa8;border-color:#ffffff70;box-shadow:none}
body.modern-app.dark-mode::before{background-image:linear-gradient(#092038df,#092038df),url('/assets/workspace-air.png')}
@media(max-width:700px){body.modern-app::before{background-position:68% center}.modern-app .welcome{background:#ffffffc9}}
/* Native vector artwork uses the existing navy and blue tokens at every resolution. */
body.modern-app::before{background:#f3f8ff url('/assets/workspace-brand.svg') center/cover no-repeat}
body.modern-app.dark-mode::before{background-image:linear-gradient(#10253ae8,#10253ae8),url('/assets/workspace-brand.svg')}
.modern-app .provider-guide{overflow:hidden;border:1px solid #d8e5f0;background:#ffffffed;border-radius:12px}
.modern-app .provider-guide>summary{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;box-sizing:border-box;padding:14px 18px;list-style:none;color:#173554;font-weight:600;line-height:1.5}
.modern-app .provider-guide>summary::-webkit-details-marker{display:none}
.modern-app .provider-guide>summary::before{content:"";width:7px;height:7px;flex:0 0 7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.modern-app .provider-guide[open]>summary::before{transform:rotate(45deg)}
.modern-app #help-toggle{display:inline-flex!important;align-items:center!important;justify-content:center;gap:9px!important;height:52px;min-height:52px!important;padding:6px 17px 6px 10px!important;box-sizing:border-box;background:#173554!important;border:1px solid #40617e!important;color:#fff!important;line-height:1.2;border-radius:26px!important}
.modern-app #help-toggle>span{display:inline-flex!important;align-items:center;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;font-size:15px;line-height:1.2;font-weight:700}
.modern-app #help-toggle img{display:block;width:34px;height:38px;object-fit:contain;margin:0}
.modern-app .workspace-support .tour-fab{display:inline-flex;align-items:center;justify-content:center;height:52px;box-sizing:border-box;padding:10px 17px;line-height:1.2;background:#173554;color:white}
.modern-app.dark-mode .provider-guide>summary{color:#d3e8fa}
@media(prefers-reduced-motion:reduce){.modern-app .provider-guide>summary::before{transition:none}}
/* Faceted Z monogram: exact vector geometry and existing brand colours. */
body.modern-app::before{background:#f4f8fd url('/assets/workspace-z.svg') center/cover no-repeat}
body.modern-app.dark-mode::before{background-image:linear-gradient(#10253adf,#10253adf),url('/assets/workspace-z.svg')}
@media(max-width:700px){body.modern-app::before{background-position:74% center}}

/* Logo silhouette fitted inside the visible workspace below its own header. */
body.modern-app::before{inset:var(--brand-top,180px) 0 0 var(--brand-left,224px);background:#f4f8fd}
body.modern-app::after{content:"";position:fixed;z-index:-1;pointer-events:none;top:calc(var(--brand-top,180px) + 12px);left:calc(var(--brand-left,224px) + 16px);right:16px;bottom:24px;background:url('/assets/workspace-z.svg') center top/contain no-repeat;opacity:.14}
body.modern-app.dark-mode::before{background:#10253a}
body.modern-app.dark-mode::after{opacity:.13}
@media(max-width:700px){body.modern-app::after{left:12px;right:12px;bottom:32px;opacity:.12}}