/* One neutral app interface, with complete light/dark surfaces. */
:root{color-scheme:light;--ink:#183244;--muted:#627587;--blue:#14738a;--line:#dbe5eb;--soft:#f2f6f8;--surface:#fff;--surface-2:#f7fafb;--selected:#e5f3f6;--chart:#8cc4ce;--good:#24734e;--good-bg:#e8f5ee;--warning:#815b19;--warning-bg:#fff3db;--bad:#ad3651;--bad-bg:#fcecf0;--overlay:#10233288;--shadow:0 12px 35px #17324414}
:root[data-theme=dark]{color-scheme:dark;--ink:#e6edf5;--muted:#a0b2c5;--blue:#6ed2df;--line:#2a3c50;--soft:#0d1825;--surface:#152334;--surface-2:#1b2c40;--selected:#1b3c4a;--chart:#357e91;--good:#8bd9b0;--good-bg:#173f34;--warning:#f2ce80;--warning-bg:#42351c;--bad:#f3a4b6;--bad-bg:#472835;--overlay:#020812bb;--shadow:0 12px 35px #0004}
*{box-sizing:border-box}body{margin:0;background:var(--soft);color:var(--ink);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button,select,summary{cursor:pointer}button,input,select,textarea{color:var(--ink)}button{border:1px solid var(--line);border-radius:7px;padding:9px 13px;background:var(--surface);font-weight:600}button:hover{background:var(--selected)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}a{color:var(--blue);text-underline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:30px;letter-spacing:-.7px;line-height:1.25}h2{font-size:17px}h3{font-size:16px}small{font-size:11px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.demo-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}.demo-sidebar{background:var(--surface);border-right:1px solid var(--line);padding:25px 15px;display:flex;flex-direction:column;gap:17px;position:sticky;top:0;height:100dvh;overflow-y:auto;scrollbar-width:thin;z-index:45}.demo-brand{display:flex;gap:11px;align-items:center;padding:0 9px 12px;border-bottom:1px solid var(--line)}.demo-brand strong,.demo-brand small{display:block}.demo-brand strong{font-size:17px}.demo-brand small{color:var(--muted)}.brand-icon{display:grid;place-items:center;width:38px;height:38px;background:var(--blue);color:var(--surface);border-radius:11px;font-weight:800;font-size:23px}.demo-nav-label{font-size:10px;letter-spacing:1.6px;color:var(--muted);padding:0 10px}.demo-sidebar nav{display:grid;gap:5px}.demo-nav-group{border:0}.demo-nav-group>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px;border-radius:6px;font-weight:700;font-size:12px}.demo-nav-group>summary::-webkit-details-marker{display:none}.demo-nav-group>summary::after{content:'›';margin-left:auto;transform:rotate(0deg);font-size:18px;color:var(--muted)}.demo-nav-group[open]>summary::after{transform:rotate(90deg)}.demo-nav-group>summary:hover{background:var(--surface-2)}.demo-nav-group svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.demo-nav-group>div{display:grid;gap:2px;padding:0 0 5px 21px}.demo-sidebar nav button{display:block;width:100%;border:0;text-align:left;font-size:12px;min-height:36px;padding:8px 11px;line-height:1.4;background:transparent;font-weight:500;color:var(--muted)}.demo-sidebar nav button:hover{background:var(--surface-2);color:var(--ink)}.demo-sidebar nav button[aria-current=page]{background:var(--selected);color:var(--blue);font-weight:700}.sidebar-note{font-size:11px;color:var(--muted);margin:auto 9px 0;padding-top:20px;border-top:1px solid var(--line)}.sidebar-note a{display:block;margin-top:12px}.demo-menu-button,.demo-menu-backdrop,.demo-mobile-menu{display:none}
.demo-workspace{min-width:0}.demo-topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;padding:16px 28px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:35}.demo-topbar-heading{display:flex;align-items:center;gap:12px}.demo-topbar-heading>div{display:grid;gap:3px}.demo-topbar-heading strong{font-size:14px}.demo-topbar-heading span{font-size:11px;color:var(--muted)}.demo-topbar b{display:inline-block;font-size:10px;font-weight:650;padding:2px 7px;background:var(--warning-bg);color:var(--warning);border-radius:5px;margin-left:7px}.demo-topbar-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.demo-topbar button{font-size:11px;padding:7px 10px;white-space:nowrap}.demo-theme-switch{display:flex;align-items:center;gap:7px}.demo-theme-switch>span:first-child{font-size:17px;line-height:1}.demo-package-link{font-size:11px;font-weight:650;margin-left:9px}.demo-topbar .demo-menu-button{font-size:17px;padding:7px 9px}.demo-topbar .demo-menu-button span{font-size:11px;color:var(--ink)}
main{padding:28px 30px 45px;max-width:1500px;margin:auto}.demo-heading{margin-bottom:20px}.demo-heading>p:last-child{margin-top:9px;max-width:900px;color:var(--muted)}.demo-eyebrow{font-size:10px;font-weight:750;letter-spacing:1.6px;color:var(--blue);margin-bottom:7px}.demo-filters{display:flex;align-items:end;gap:12px;justify-content:flex-end;margin-bottom:20px}.demo-filters label{display:grid;gap:5px;font-size:11px;color:var(--muted)}.demo-filters select{padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:12px;max-width:100%}.demo-filters select:disabled{opacity:.55;cursor:default}.demo-channel-strip{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 0 22px}.channel-brand{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;white-space:nowrap}.channel-brand img{display:block;width:74px;height:27px;object-fit:contain;object-position:left center;background:#fff;padding:4px;border:1px solid #dce4e9;border-radius:5px;box-sizing:content-box}.channel-brand img[src$="bol-wordmark.svg"]{background:#0000a4;border-color:#0000a4}.channel-country{font-size:10px;font-weight:700;color:var(--muted)}.channel-caption{display:block;font-size:11px;margin-top:6px}.demo-channel-strip .channel-brand img{width:61px;height:23px}.demo-channel-strip .channel-country{font-size:9px}
.demo-home{margin-bottom:22px}.demo-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-quick-actions button{padding:17px 18px;text-align:left;display:grid;gap:7px;border-top:3px solid var(--blue)}.demo-quick-actions strong{font-size:14px}.demo-quick-actions span{font-weight:400;font-size:11px;color:var(--muted)}.demo-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}.demo-tabs button{background:transparent;border:0;border-radius:0;padding:10px 14px;color:var(--muted);font-size:12px}.demo-tabs button[aria-pressed=true]{color:var(--blue);box-shadow:inset 0 -2px var(--blue)}.demo-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px}.demo-shell[data-module=dashboard] .demo-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-metrics article{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:19px 20px;min-width:0}.demo-metrics span,.demo-metrics strong,.demo-metrics small{display:block}.demo-metrics span{font-size:12px;color:var(--muted)}.demo-metrics strong{font-size:29px;font-variant-numeric:tabular-nums;letter-spacing:-.7px;margin:7px 0;line-height:1.2;overflow-wrap:anywhere}.demo-metrics small{font-size:11px;color:var(--muted);line-height:1.5}
.demo-chart{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:20px 22px;margin-bottom:20px}.demo-chart>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:14px}.demo-chart-key{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}.demo-chart-key i{width:8px;height:8px;background:var(--blue);border-radius:2px}.demo-bars{height:170px;display:flex;align-items:flex-end;justify-content:space-around;gap:14px;margin-top:20px;padding:0 12px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent,transparent 39px,var(--line) 40px,var(--line) 41px)}.demo-bars>div{height:100%;flex:1;min-width:0;max-width:70px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-bottom:24px}.demo-bars i{display:block;background:var(--chart);border-radius:4px 4px 0 0}.demo-bars>div:last-child i{background:var(--blue)}.demo-bars span{position:absolute;bottom:1px;width:100%;text-align:center;font-size:10px;color:var(--muted)}
.demo-table-panel{background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow:hidden}.demo-table-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 21px;border-bottom:1px solid var(--line)}.demo-table-heading span{font-size:11px;color:var(--muted)}.demo-table-heading label{font-size:10px;color:var(--muted);display:grid;gap:4px;margin-left:auto}.demo-table-heading input{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:210px;max-width:100%;background:var(--surface-2)}.demo-table-tools{display:flex;gap:7px;align-items:center}.demo-table-tools button{font-size:11px}.demo-table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}th{font-size:10px;letter-spacing:.3px;font-weight:650;background:var(--surface-2);color:var(--muted)}th,td{padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--surface-2)}td button{padding:3px 0;border:0;background:none;font-size:11px;color:var(--blue)}td button:hover{background:none;text-decoration:underline}td:first-child{font-weight:600}td:last-child button{max-width:155px;white-space:normal;text-align:right;line-height:1.4}.demo-product-link{text-align:left;max-width:245px;white-space:normal!important;line-height:1.4;border:0;padding:0;background:transparent;color:var(--blue)}.demo-product-link small{display:block;font-weight:400;font-size:10px;color:var(--muted);margin-top:3px}.demo-pill{display:inline-block;background:var(--selected);color:var(--blue);padding:3px 7px;border-radius:4px;font-size:10px}.demo-note{color:var(--muted);font-size:11px;margin:17px 0;max-width:1050px}.demo-status:not(:empty){position:fixed;bottom:20px;right:22px;max-width:min(460px,calc(100vw - 36px));border:1px solid var(--line);border-left:4px solid var(--good);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);padding:15px 18px;border-radius:8px;font-size:12px;z-index:80}
.demo-scenario{display:flex;align-items:center;gap:20px;border:1px solid var(--line);padding:15px 18px;background:var(--selected);border-radius:8px;margin-bottom:20px}.demo-scenario label{font-size:12px;display:flex;align-items:center;gap:12px}.demo-scenario input{width:75px;padding:7px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}.demo-scenario span{font-size:11px;color:var(--muted)}
.demo-agent-intro{margin:0 0 18px}.demo-agent-intro p{color:var(--muted);font-size:12px;margin-top:7px}.demo-advice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:24px}.demo-advice-card{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:21px;display:flex;flex-direction:column;gap:12px;min-width:0}.demo-advice-meta{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--blue);font-weight:700}.demo-advice-card h3{font-size:18px;line-height:1.4}.demo-advice-card p{color:var(--muted);font-size:13px}.demo-advice-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}.demo-advice-actions button{font-size:11px}.demo-empty{padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:8px}.demo-settings{background:var(--surface);border:1px solid var(--line);padding:25px;border-radius:9px;max-width:800px;display:grid;gap:18px}.demo-settings p{color:var(--muted)}.demo-settings label{display:grid;gap:7px;max-width:300px}.demo-settings select{background:var(--surface-2);border:1px solid var(--line);padding:11px;border-radius:6px}.demo-settings button,.demo-settings a{justify-self:start}
.demo-finance-context{margin-bottom:20px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:9px}.demo-finance-context .article-metrics{margin-bottom:0}.demo-finance-context .article-metrics strong{font-size:19px}
dialog{background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);max-width:960px;width:calc(100vw - 36px);max-height:calc(100svh - 36px);overflow:auto;padding:25px;box-shadow:var(--shadow)}dialog::backdrop{background:var(--overlay)}.demo-dialog-header{position:sticky;top:-25px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:18px;z-index:3}.demo-dialog-header h2{font-size:22px;line-height:1.3}.demo-dialog-header button{font-size:12px;flex:none}dialog p{font-size:13px;color:var(--muted);margin-bottom:15px}dialog h3{font-size:15px;margin:22px 0 12px}dialog dl>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:10px 0;font-size:13px}dialog dt{color:var(--muted)}dialog dd{margin:0;font-weight:600;text-align:right}.demo-dialog-error{color:var(--bad);font-size:13px;margin-top:14px}.demo-primary{background:var(--blue);color:var(--surface);border-color:var(--blue)}.demo-primary:hover{background:var(--blue);filter:brightness(.92)}.demo-action-field{display:grid;gap:7px;font-size:12px;margin:18px 0}.demo-action-field input,.demo-action-field select,.demo-action-field textarea{width:100%;padding:11px;border:1px solid var(--line);background:var(--surface-2);border-radius:6px}.demo-action-field input[type=number]{max-width:190px}.demo-action-field textarea{resize:vertical}.demo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.article-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.article-metrics>div{background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:14px;min-width:0}.article-metrics span{display:block;font-size:11px;color:var(--muted)}.article-metrics strong{display:block;font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums}.article-channels>div{display:grid;grid-template-columns:minmax(90px,1fr) 110px minmax(150px,1fr);align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px}.article-channels>div>span:nth-child(2){font-weight:700;text-align:right}.offer-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;line-height:1.4}.offer-badge b{display:grid;place-items:center;width:21px;height:21px;flex:none;border-radius:50%;background:var(--line);color:var(--ink);font:700 14px/1 Arial,sans-serif}.offer-badge.is-published b{background:var(--good-bg);color:var(--good)}.offer-badge.is-failed b{background:var(--bad-bg);color:var(--bad)}.offer-badge.is-queued b{background:var(--warning-bg);color:var(--warning)}.article-history{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.article-history>div{border:1px solid var(--line);padding:11px;border-radius:5px;background:var(--surface-2)}.article-history span,.article-history strong,.article-history small{display:block}.article-history span{font-size:11px;color:var(--muted)}.article-history strong{font-size:14px;margin-top:4px}.article-history small{font-size:10px;color:var(--muted)}.demo-dialog-links{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.demo-dialog-links button{font-size:12px}.offer-controls>div{display:grid;grid-template-columns:1fr 1fr max-content;gap:14px;padding:13px 0;align-items:center;border-bottom:1px solid var(--line);font-size:13px}.offer-controls button{font-size:11px}.listing-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.listing-compare>div{background:var(--surface-2);padding:18px;border:1px solid var(--line);border-radius:7px;min-width:0}.listing-compare strong{font-size:13px}.listing-compare p{margin:12px 0 0}.keyword-example>div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.keyword-example span{font-weight:700;color:var(--blue)}.demo-supplier-products{display:grid;gap:9px}.demo-supplier-products button{text-align:left;padding:15px;display:grid;gap:5px}.demo-supplier-products span{font-size:12px;font-weight:400;color:var(--muted)}
@media(max-width:1150px){.demo-shell{grid-template-columns:220px minmax(0,1fr)}.demo-package-link{display:none}.demo-shell[data-module=dashboard] .demo-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:950px){.demo-quick-actions{grid-template-columns:1fr}.demo-quick-actions button{padding:14px 16px}.demo-advice-grid{grid-template-columns:1fr}.demo-topbar{padding:14px 20px}.demo-chart-key{display:none}main{padding:23px 20px}.demo-metrics strong{font-size:25px}}
@media(max-width:760px) and (orientation:portrait){
.demo-shell{display:block}.demo-sidebar{position:fixed;inset:0 auto 0 0;width:min(310px,86vw);height:100dvh;transform:translateX(-100%);transition:transform .18s ease;z-index:65;box-shadow:var(--shadow)}.demo-nav-open .demo-sidebar{transform:translateX(0)}.demo-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;border:0;border-radius:0;padding:0;background:var(--overlay);z-index:60}.demo-topbar .demo-menu-button{display:flex;gap:7px;align-items:center}.demo-topbar{padding:11px 14px;gap:10px}.demo-topbar-heading{gap:9px}.demo-topbar-heading strong{font-size:12px}.demo-topbar-heading>div>span{font-size:9px}.demo-topbar b{font-size:8px;margin-left:3px;padding:2px 4px}.demo-topbar button{font-size:10px;padding:7px 8px}.demo-topbar-actions{gap:6px}.demo-topbar .demo-menu-button span{display:none}main{padding:20px 15px 35px}.demo-heading{margin-bottom:15px}h1{font-size:26px}.demo-heading>p:last-child{font-size:13px;margin-top:7px}.demo-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:19px}.demo-filters select{width:100%;font-size:11px}.demo-filters label{font-size:10px;min-width:0}.demo-channel-strip{gap:7px 12px;margin:12px 0 20px}.demo-channel-strip .channel-brand img{width:48px;height:20px}.demo-channel-strip .channel-brand{gap:4px}.demo-channel-strip .channel-country{font-size:8px}.demo-tabs{margin-bottom:17px}.demo-tabs button{padding:9px 10px;font-size:11px}.demo-metrics,.demo-shell[data-module=dashboard] .demo-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.demo-metrics article{padding:15px}.demo-metrics strong{font-size:24px;margin:6px 0}.demo-metrics span{font-size:11px}.demo-metrics small{font-size:10px}.demo-chart{padding:16px}.demo-chart h2{font-size:14px}.demo-bars{height:125px;gap:9px;padding-inline:2px;margin-top:15px}.demo-bars span{font-size:8px}.demo-table-heading{padding:16px;align-items:flex-start;gap:12px}.demo-table-heading>div:first-child{width:100%}.demo-table-heading h2{font-size:16px}.demo-table-heading label{width:100%;margin:0}.demo-table-heading input{width:100%}.demo-table-tools{width:100%;justify-content:space-between}table,tbody{display:block}thead{display:none}tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:7px 13px;padding:16px;border-bottom:1px solid var(--line)}tbody tr:last-child{border:0}td{border:0;padding:0;white-space:normal;font-size:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}td::before{content:attr(data-label);font-size:10px;color:var(--muted)}td:first-child,td:last-child{grid-column:1/-1}td:first-child::before{display:none}td:last-child{align-items:flex-end;padding-top:4px}td:last-child::before{display:none}.demo-product-link{max-width:100%}td:last-child button{max-width:none;font-size:12px}.demo-scenario{align-items:stretch;flex-direction:column;padding:13px;gap:8px}.demo-scenario label{justify-content:space-between}.demo-scenario span{font-size:10px}.demo-advice-card{padding:18px}.demo-advice-card h3{font-size:17px}.demo-note{font-size:10px}.demo-status:not(:empty){bottom:12px;right:12px;max-width:calc(100vw - 24px);padding:12px 14px}dialog{padding:18px;width:calc(100vw - 24px);max-height:calc(100svh - 24px)}.demo-dialog-header{top:-18px;gap:12px;padding:10px 0}.demo-dialog-header h2{font-size:18px}.demo-dialog-header button{font-size:10px}.article-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.article-metrics>div{padding:11px}.article-metrics strong{font-size:19px}.article-channels>div{grid-template-columns:minmax(0,1fr) max-content;gap:6px 10px;font-size:12px}.article-channels .offer-badge{grid-column:1/-1}.article-history{grid-template-columns:repeat(3,minmax(0,1fr))}.article-history>div{padding:9px}.article-history strong{font-size:12px}.offer-controls>div{grid-template-columns:1fr 1fr;gap:10px;font-size:12px}.offer-controls button{grid-column:1/-1;justify-self:start}.listing-compare{grid-template-columns:1fr}.demo-dialog-links button{font-size:11px}.demo-settings{padding:20px}
}
@media(max-width:380px){.demo-topbar{gap:8px}.demo-topbar-heading>div>span b{display:block;margin:3px 0 0;max-width:max-content}.demo-topbar-heading>div>span{font-size:8px}.demo-topbar-actions button{font-size:9px;padding:6px}.demo-metrics strong{font-size:21px}.demo-metrics article{padding:12px}.demo-form-grid{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){.demo-sidebar{transition:none}}

/* Product Image Studio: local, schematic examples with the same theme tokens. */
.demo-studio-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}
.demo-studio-toolbar label{display:grid;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.demo-studio-toolbar select{max-width:100%;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink)}
.demo-studio-toolbar>span{font-size:12px;color:var(--muted)}
.demo-studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.demo-studio>div{min-width:0}
.demo-studio figure{margin:0}
.demo-studio-preview{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.demo-studio-preview>svg{display:block;width:100%;height:auto;max-height:560px;background:#fff}
.demo-studio figcaption,.demo-studio-review figcaption{padding:10px 12px;font-size:12px;color:var(--muted)}
.demo-studio-thumbnails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.demo-studio-thumbnails button{padding:0;overflow:hidden;min-width:0;background:var(--surface)}
.demo-studio-thumbnails svg{display:block;width:100%;height:auto;background:#fff}
.demo-studio-thumbnails button>span{display:block;padding:8px 5px;font-size:10px;font-weight:500}
.demo-studio-thumbnails button[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.demo-studio-controls{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:23px}
.demo-studio-controls h2{font-size:22px}.demo-studio-controls h3{font-size:17px;margin-top:4px}
.demo-studio-controls p{font-size:13px;color:var(--muted)}.demo-studio-controls .demo-eyebrow{margin:0;color:var(--blue)}
.demo-studio-actions{display:grid;gap:10px;margin-top:5px}
.demo-studio-actions button{font-size:12px;text-align:left}
.demo-studio-actions button:disabled{opacity:.5;cursor:default}
.demo-studio-controls .demo-studio-disclaimer{font-size:11px;border-top:1px solid var(--line);padding-top:15px}
.demo-studio-review{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
.demo-studio-review figure{margin:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface-2)}
.demo-studio-review svg{display:block;width:100%;height:auto;background:#fff}
@media(max-width:950px){.demo-studio{grid-template-columns:1fr}.demo-studio-preview>svg{max-height:500px}.demo-studio-controls{padding:20px}}
@media(max-width:760px) and (orientation:portrait){.demo-studio-toolbar{align-items:stretch;flex-direction:column;gap:9px}.demo-studio-toolbar select{font-size:12px;width:100%}.demo-studio-preview>svg{max-height:420px}.demo-studio-thumbnails{gap:8px}.demo-studio-thumbnails button>span{font-size:9px}.demo-studio-review{gap:7px}.demo-studio-review figcaption{padding:7px 5px;font-size:10px}}

/* Dark-first management dashboard, using the user's app layout with fictional data. */
:root[data-theme=dark]{--ink:#e7effc;--muted:#a9bdd6;--blue:#7dd5db;--line:#304e74;--soft:#031a34;--surface:#102c4d;--surface-2:#173858;--selected:#244c6d;--chart:#3c8fbb;--good:#60dfb1;--good-bg:#164f4c;--warning:#ffd079;--warning-bg:#4a3e25;--bad:#ff9aaa;--bad-bg:#50263e;--shadow:0 12px 35px #0005}
:root[data-theme=dark] body{background:radial-gradient(ellipse at 85% 0,#262a54 0,transparent 42%),var(--soft)}
:root[data-theme=dark] .demo-sidebar{background:linear-gradient(160deg,#122c4c,#051d38)}
:root[data-theme=dark] .demo-topbar{background:linear-gradient(120deg,#16294d,#103457)}
:root[data-theme=dark] .demo-metrics article,:root[data-theme=dark] .demo-chart,:root[data-theme=dark] .demo-table-panel,:root[data-theme=dark] .demo-dashboard-tile{background:linear-gradient(145deg,#203a58,#102a4b)}
.demo-topbar-brand{display:flex;align-items:center;justify-content:center;background:#fff!important;border-color:#fff;padding:8px 10px!important;border-radius:9px}
.demo-topbar-brand img{display:block;width:108px;height:auto}
.demo-environment{font-size:11px;color:var(--muted)}
.demo-topbar .demo-menu-button{background:#ed672b;border-color:#ed672b;color:#fff}
.demo-topbar .demo-menu-button span{color:#fff}
.demo-search-routes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.demo-search-routes button{display:grid;gap:5px;text-align:left;font-size:12px;padding:12px}
.demo-search-routes small{font-weight:400;color:var(--muted)}
.demo-shell[data-module=dashboard] .demo-heading{padding:21px 23px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:24px}
:root[data-theme=dark] .demo-shell[data-module=dashboard] .demo-heading{background:linear-gradient(110deg,#173253,#2a315f)}
.demo-shell[data-module=dashboard] .demo-heading h1{font-size:30px}
.demo-shell[data-module=dashboard] .demo-channel-strip{display:none}
.demo-shell[data-module=dashboard] .demo-heading>p:last-child{font-size:12px;margin-top:8px}
.demo-dashboard-section{margin-bottom:25px}
.demo-dashboard-section>h2{font-size:17px;letter-spacing:.1px;margin-bottom:12px}
.demo-dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.demo-dashboard-tile{display:flex;flex-direction:column;gap:7px;align-items:flex-start;min-width:0;padding:18px;border:1px solid var(--line);border-radius:9px;text-align:left;background:var(--surface)}
.demo-dashboard-tile:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.demo-dashboard-tile-top{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:25px;color:var(--muted);font-size:11px;font-weight:650}
.demo-dashboard-tile-top>svg{width:22px;height:22px;flex:none;color:var(--blue)}
.demo-dashboard-tile strong{font-size:27px;line-height:1.2;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.demo-dashboard-tile small{font-size:10px;line-height:1.45;color:var(--muted);font-weight:400}
.demo-dashboard-delta{background:var(--good-bg);color:var(--good);border-radius:20px;padding:3px 6px;font-size:9px;white-space:nowrap}
.demo-dashboard-delta.is-down{background:var(--bad-bg);color:var(--bad)}
.demo-dashboard-products{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:9px;margin-top:14px}
.demo-dashboard-products button{position:relative;padding:0;border:0;border-radius:7px;overflow:hidden;min-width:0;background:var(--surface-2);text-align:left}
.demo-dashboard-products svg{display:block;width:100%;height:auto;background:#fff}
.demo-dashboard-products span{display:block;padding:8px;font-size:10px;line-height:1.35;color:var(--ink)}
.demo-dashboard-agent{display:flex;align-items:center;gap:12px;width:100%;padding:17px 20px;border-color:var(--blue);background:var(--surface);text-align:left;margin-bottom:14px}
.demo-dashboard-agent>svg{width:25px;height:25px;color:var(--blue)}
.demo-dashboard-agent strong{font-size:19px}
.demo-dashboard-agent>span{margin-left:auto;display:grid;place-items:center;min-width:35px;height:35px;padding:0 8px;border-radius:50%;background:var(--selected);color:var(--ink);font-size:13px}
.demo-dashboard-channels{display:grid;gap:1px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--line)}
.demo-dashboard-channels button{display:grid;grid-template-columns:120px minmax(0,1fr) 105px;align-items:center;gap:20px;border:0;border-radius:0;padding:14px 18px;text-align:left;background:var(--surface)}
.demo-dashboard-channels button>strong{text-align:right;font-size:17px}
.demo-dashboard-channel-track{height:7px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.demo-dashboard-channel-track i{display:block;height:100%;background:var(--blue);border-radius:6px}
.demo-dashboard-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:15px}
.demo-dashboard-shortcuts button{font-size:12px;text-align:left;padding:15px}
@media(max-width:1200px){.demo-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px) and (orientation:portrait){
.demo-topbar{flex-wrap:nowrap;padding:10px 12px;gap:8px}
.demo-topbar-heading{gap:8px}.demo-topbar-actions{gap:7px;flex-wrap:nowrap}
.demo-topbar-brand img{width:88px}.demo-topbar-brand{padding:7px!important}.demo-environment{display:none}
.demo-topbar .demo-menu-button{padding:10px 9px;font-size:18px}
.demo-topbar-actions button{padding:9px 10px;font-size:11px}.demo-topbar [data-demo-reset]{display:none}
.demo-shell[data-module=dashboard] main{padding:16px 12px 30px}
.demo-shell[data-module=dashboard] .demo-heading{padding:17px 14px;margin-bottom:19px}
.demo-shell[data-module=dashboard] .demo-heading h1{font-size:24px;letter-spacing:-.5px}
.demo-shell[data-module=dashboard] .demo-heading .demo-eyebrow{display:none}
.demo-shell[data-module=dashboard] .demo-heading>p:last-child{font-size:10px}
.demo-dashboard-section{margin-bottom:21px}.demo-dashboard-section>h2{font-size:14px;margin-bottom:10px}
.demo-dashboard-grid{gap:9px}.demo-dashboard-tile{padding:13px 11px;gap:6px;min-height:104px}
.demo-dashboard-tile-top{font-size:10px;gap:5px;align-items:flex-start}.demo-dashboard-tile-top>svg{width:19px;height:19px}
.demo-dashboard-tile strong{font-size:23px}.demo-dashboard-tile small{font-size:9px}.demo-dashboard-delta{font-size:8px;padding:3px 5px}
.demo-dashboard-products{display:flex;overflow-x:auto;gap:9px;padding:9px;scrollbar-width:thin}.demo-dashboard-products button{flex:0 0 75px}.demo-dashboard-products span{padding:6px;font-size:8px}
.demo-dashboard-agent{padding:14px}.demo-dashboard-agent strong{font-size:17px}
.demo-dashboard-channels button{grid-template-columns:90px minmax(0,1fr) 75px;gap:11px;padding:12px}.demo-dashboard-channels .channel-brand img{width:50px;height:21px}.demo-dashboard-channels button>strong{font-size:13px}
.demo-dashboard-shortcuts{grid-template-columns:1fr;gap:9px}.demo-dashboard-shortcuts button{font-size:12px;padding:13px}
.demo-search-routes{grid-template-columns:1fr}
}
@media(max-width:380px){.demo-topbar-brand img{width:75px}.demo-topbar-actions button{font-size:10px;padding:8px}.demo-dashboard-tile strong{font-size:21px}.demo-dashboard-tile-top{font-size:9px;flex-wrap:wrap}.demo-dashboard-delta{font-size:7px}}

.demo-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.demo-dashboard-grid:has(>.demo-dashboard-tile:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1200px){.demo-dashboard-grid:has(>.demo-dashboard-tile:nth-child(6)){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Channel > month > metrics: keep each depth visible in both themes. */
.demo-channel-hint{font-size:11px;color:var(--muted);margin:-3px 0 12px}
.demo-flag{display:inline-block;width:17px;height:11px;flex:none;overflow:hidden;font-size:0!important;border:1px solid #b8c8d8;border-radius:3px}
.demo-flag-NL{background:linear-gradient(#bc2633 0 33.33%,#fff 33.33% 66.66%,#244c9a 66.66%)}
.demo-flag-DE{background:linear-gradient(#171717 0 33.33%,#cf3339 33.33% 66.66%,#f1c443 66.66%)}
.demo-flag-BE{background:linear-gradient(90deg,#171717 0 33.33%,#f1c443 33.33% 66.66%,#cf3339 66.66%)}
.demo-dashboard-channels{gap:10px;background:transparent;border:0;border-radius:0;overflow:visible}
.demo-channel-detail{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.demo-channel-detail>summary,.demo-channel-month>summary{display:grid;grid-template-columns:130px 130px minmax(0,1fr) auto;align-items:center;gap:14px;cursor:pointer;list-style:none;padding:14px 18px;min-height:72px}
.demo-channel-detail summary::-webkit-details-marker,.demo-dashboard-heatmap summary::-webkit-details-marker{display:none}
.demo-channel-detail summary:focus-visible,.demo-dashboard-heatmap summary:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.demo-channel-detail>summary:hover,.demo-channel-month>summary:hover{background:var(--selected)}
.demo-channel-detail summary>strong{font-size:23px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.demo-channel-stats{font-size:12px;line-height:1.4;color:var(--muted);font-weight:700}
.demo-channel-stats small,.demo-month-label small{display:block;font-size:11px}
.demo-channel-detail .demo-dashboard-delta{font-size:11px;padding:5px 8px;justify-self:end}
.demo-dashboard-delta.is-neutral{color:var(--muted);background:var(--surface-2)}
.demo-channel-detail[open]{background:#edf6f3;border-color:#4d998d;border-left:4px solid #4d998d}
.demo-channel-detail[open]>summary{background:#dceee8}
.demo-channel-months{padding:0 18px 17px}
.demo-channel-months>h3{font-size:14px;color:var(--muted);padding:17px 0 9px;border-top:1px solid var(--line)}
.demo-channel-month{border-bottom:1px solid var(--line)}
.demo-channel-month>summary{grid-template-columns:65px 115px minmax(0,1fr) auto;padding:14px 0}
.demo-month-label{font-size:17px;font-weight:750;line-height:1.25}
.demo-channel-month[open]>summary{background:#dceee8;padding-inline:10px}
.demo-channel-month dl{margin:0 0 14px;padding:8px 12px;background:#fff;border-radius:0 0 6px 6px}
.demo-channel-month dl>div{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0;font-size:13px}
.demo-channel-month dl>div:last-child{border:0}.demo-channel-month dt{font-weight:650}
.demo-channel-month dd{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 13px;margin:0;text-align:right;font-variant-numeric:tabular-nums}
.demo-channel-month dd span{font-size:12px;color:var(--muted)}
.demo-channel-explanation{font-size:11px;line-height:1.6;color:var(--muted);margin:14px 0}
.demo-dashboard-channels .demo-channel-months>button{display:block;width:100%;min-height:0;font-size:12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:12px}
:root[data-theme=dark] .demo-channel-detail{background:linear-gradient(145deg,#203a58,#102a4b)}
:root[data-theme=dark] .demo-channel-detail[open]{background:#1d3d43;border-color:#5caaa1}
:root[data-theme=dark] .demo-channel-detail[open]>summary,:root[data-theme=dark] .demo-channel-month[open]>summary{background:#2c5059}
:root[data-theme=dark] .demo-channel-month dl{background:#102f36}
:root[data-theme=dark] .demo-channel-detail .demo-dashboard-delta{background:#45c98d;color:#06362d;box-shadow:0 0 22px #45c98d22}
:root[data-theme=dark] .demo-channel-detail .demo-dashboard-delta.is-down{background:#dc454e;color:#fff;box-shadow:0 0 22px #dc454e22}
:root[data-theme=dark] .demo-channel-detail .demo-dashboard-delta.is-neutral{background:var(--surface-2);color:var(--muted);box-shadow:none}
.demo-dashboard-heatmap{margin:0 0 25px;background:var(--surface);border:1px solid var(--blue);border-radius:9px;overflow:hidden}
.demo-dashboard-heatmap>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;padding:18px 20px}
.demo-dashboard-heatmap>summary strong{font-size:20px}.demo-dashboard-heatmap>summary>span{font-size:12px;color:var(--muted)}
.demo-heatmap-content{padding:0 20px 20px}.demo-heatmap-content p{font-size:12px;color:var(--muted);margin:0 0 15px}
.demo-heatmap-scroll{overflow-x:auto}.demo-heatmap-grid{display:grid;grid-template-columns:90px repeat(6,minmax(28px,1fr));gap:5px;min-width:310px;align-items:center}
.demo-heatmap-label,.demo-heatmap-day{font-size:11px;color:var(--muted)}.demo-heatmap-label{text-align:center}
.demo-heatmap-cell{display:grid;place-items:center;border:1px solid #bfd6d0;border-radius:4px;min-height:29px;font-size:11px;font-weight:700;background:#eff6f3;color:#184b42}
.demo-heatmap-cell[data-level="1"]{background:#d5ede2}.demo-heatmap-cell[data-level="2"]{background:#a3dbc6}.demo-heatmap-cell[data-level="3"]{background:#62c5a2}.demo-heatmap-cell[data-level="4"]{background:#207f66;color:#fff}
:root[data-theme=dark] .demo-heatmap-cell{background:#102b43;border-color:#35566a;color:#c9f6e7}
:root[data-theme=dark] .demo-heatmap-cell[data-level="1"]{background:#164f50}:root[data-theme=dark] .demo-heatmap-cell[data-level="2"]{background:#217568}:root[data-theme=dark] .demo-heatmap-cell[data-level="3"]{background:#35a887}:root[data-theme=dark] .demo-heatmap-cell[data-level="4"]{background:#6ce0a8;color:#082f2d}
.demo-heatmap-key{display:flex;align-items:center;gap:6px;margin-top:14px;color:var(--muted);font-size:10px}.demo-heatmap-key i{width:18px;min-height:16px}
.demo-forecast-rate{font-size:16px;color:var(--good);white-space:nowrap}.demo-forecast-rate.is-down{color:var(--bad)}
.demo-forecast-method{margin:-8px 0 25px;font-size:12px;color:var(--muted)}.demo-forecast-method summary{cursor:pointer}.demo-forecast-method p{margin-top:12px;max-width:850px}
@media(max-width:760px) and (orientation:portrait){
 .demo-channel-detail>summary{grid-template-columns:88px 60px minmax(0,1fr) auto;gap:7px;padding:10px;min-height:67px}
 .demo-channel-detail .channel-brand{gap:5px}.demo-channel-detail .channel-brand img{width:54px;height:26px}
 .demo-channel-detail .demo-flag{width:13px;height:9px}.demo-channel-stats{font-size:9px}.demo-channel-stats small{font-size:8px}
 .demo-channel-detail summary>strong{font-size:18px}.demo-channel-detail .demo-dashboard-delta{font-size:8px;padding:4px 6px}
 .demo-channel-months{padding:0 12px 13px}.demo-channel-months>h3{font-size:12px;padding-top:13px}
 .demo-channel-month>summary{grid-template-columns:40px 70px minmax(0,1fr) auto;gap:7px}.demo-month-label{font-size:15px}.demo-month-label small{font-size:10px}
 .demo-channel-month[open]>summary{padding-inline:6px}.demo-channel-month dl{padding:6px 9px}.demo-channel-month dl>div{font-size:12px;gap:8px;padding:8px 0}
 .demo-channel-month dd{gap:3px 7px}.demo-channel-month dd span{font-size:10px}.demo-channel-explanation{font-size:10px}
 .demo-dashboard-heatmap>summary{padding:16px 13px;gap:10px}.demo-dashboard-heatmap>summary strong{font-size:17px}.demo-dashboard-heatmap>summary>span{font-size:10px;text-align:right}
 .demo-heatmap-content{padding:0 12px 15px}.demo-heatmap-grid{grid-template-columns:68px repeat(6,minmax(24px,1fr));min-width:275px;gap:4px}.demo-heatmap-label,.demo-heatmap-day{font-size:9px}
 .demo-forecast-rate{font-size:13px}.demo-forecast-method{font-size:11px}
}
@media(max-width:380px){.demo-channel-detail>summary{grid-template-columns:70px 48px minmax(0,1fr) auto;gap:5px;padding:9px 7px}.demo-channel-detail .channel-brand img{width:40px;height:24px}.demo-channel-detail summary>strong{font-size:15px}.demo-channel-detail .demo-dashboard-delta{font-size:7px;padding:4px}.demo-channel-month>summary{grid-template-columns:32px 56px minmax(0,1fr) auto;gap:5px}.demo-channel-stats{font-size:8px}}

.demo-dashboard-products .demo-dashboard-quantity{position:absolute;right:5px;bottom:5px;display:block;min-width:25px;padding:3px 7px;border:2px solid #fff;border-radius:999px;background:#e9511d;color:#fff;font-size:12px;line-height:1.2;font-weight:800;text-align:center;box-shadow:0 2px 5px #0003}