/* Sabz Studio / glass desktop, 2026-10-29.
   Original art directed pastel sky, lagoon and lilac atmosphere, rendered locally
   with CSS: no third-party fonts, OS assets, telemetry or stock wallpaper.
   Apple-inspired interaction vocabulary, not a claim to be native macOS/iOS. */
:root{
  --desk-ink:#203651;--desk-muted:#667b96;--desk-outline:rgba(255,255,255,.84);
  --desk-blue:#286bdc;--desk-blue-dark:#1654b2;--desk-ice:rgba(246,251,255,.78);
  --desk-shadow:0 35px 110px rgba(28,54,94,.24),0 8px 28px rgba(41,77,118,.12);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",sans-serif!important;
  font-synthesis:none; color:var(--desk-ink);
  background:#dce9fa;
}
html{scroll-behavior:smooth}
body{
  position:relative;min-height:100vh;overflow-x:clip;
  background:
    radial-gradient(ellipse 66% 56% at 9% 3%,rgba(180,219,253,.9),transparent 72%),
    radial-gradient(ellipse 66% 66% at 102% 44%,rgba(174,172,245,.8),transparent 69%),
    radial-gradient(ellipse 64% 50% at 6% 99%,rgba(152,227,226,.85),transparent 78%),
    linear-gradient(135deg,#e5f0ff 2%,#d7e6fc 31%,#f1e3ff 62%,#d4ecf5 100%)!important;
  background-attachment:fixed;
  color:var(--desk-ink);
}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:0;filter:blur(7px);opacity:.72}
body::before{
  width:85vw;height:56vh;top:2vh;right:-27vw;border-radius:45% 58% 39% 70%;
  background:linear-gradient(140deg,rgba(255,255,255,.45),rgba(145,192,255,.14) 46%,rgba(190,134,249,.29));
  transform:rotate(-23deg);box-shadow:inset 38px 14px 80px rgba(255,255,255,.34)
}
body::after{
  width:75vw;height:34vh;left:-22vw;bottom:-17vh;border-radius:67% 41% 58% 43%;
  background:linear-gradient(15deg,rgba(79,179,216,.36),rgba(242,250,255,.43) 48%,rgba(172,192,255,.18));
  transform:rotate(12deg);box-shadow:0 -30px 100px rgba(255,255,255,.25)
}
body[data-studio-mood="dusk"]{
 --desk-ink:#24385e;--desk-blue:#5b67d7;
 background:radial-gradient(ellipse 75% 52% at 14% -4%,rgba(188,182,255,.95),transparent 72%),
 radial-gradient(ellipse 76% 60% at 100% 42%,rgba(255,189,205,.62),transparent 74%),
 radial-gradient(ellipse 60% 42% at 6% 100%,rgba(154,204,244,.88),transparent 80%),
 linear-gradient(125deg,#e1e5ff,#e9e0fb 54%,#f6e1e4)!important;
 background-attachment:fixed
}
.app{position:relative;z-index:1;min-height:100vh;padding-bottom:104px}
main{width:100%;max-width:none;margin:0 auto;flex:1}
.masthead{
 position:sticky;z-index:60;top:0;min-height:53px;padding:9px clamp(16px,3.5vw,49px)!important;
 background:rgba(249,251,255,.49)!important;
 border-bottom:1px solid rgba(255,255,255,.72)!important;
 -webkit-backdrop-filter:blur(36px) saturate(165%);backdrop-filter:blur(36px) saturate(165%);
 box-shadow:0 1px 16px rgba(43,82,143,.055)
}
.wordmark{font-size:17px;font-weight:750;letter-spacing:-.065em;color:#203951}
.wordmark .thin{font-weight:430;color:#557395;margin-left:2px}
.sigil{height:29px;width:29px;border-radius:9px;background:linear-gradient(135deg,#5db9ee,#3b82d7 56%,#456bd2);color:white;font-size:18px;box-shadow:0 3px 9px #366ebc33}
.header-side{font-size:11px;color:#54708d;gap:14px}
.header-side .private{font-weight:740;letter-spacing:.1em;color:#6285af}
.header-side a{background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.8);border-radius:999px;padding:9px 12px;color:#35679a;transition:background .17s ease,transform .17s ease}
.header-side a:hover{background:#fff;transform:translateY(-1px)}
.desktop-menu{display:flex;align-items:center;gap:9px;margin-right:auto;margin-left:clamp(20px,4vw,75px)}
.desktop-menu button{font:590 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:transparent;border:0;color:#446485;padding:8px 10px;border-radius:8px}
.desktop-menu button:hover{background:#ffffff80;color:#25599a}
.desktop-menutime{font:600 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#5f7b9a;white-space:nowrap;font-variant-numeric:tabular-nums}
.workspace{
 position:relative;isolation:isolate;
 max-width:1530px; width:calc(100% - clamp(20px,5vw,100px));
 margin:34px auto 22px;padding:0 0 26px!important;overflow:visible;
 border:1px solid rgba(255,255,255,.88);border-radius:26px;
 background:linear-gradient(125deg,rgba(249,252,255,.82),rgba(245,248,255,.69) 60%,rgba(249,253,255,.82));
 box-shadow:var(--desk-shadow),inset 0 1px rgba(255,255,255,.84)
}
/* Existing publish and review sheets use fixed positioning inside .workspace.
   Raise that window above the system bar only while its private modal is open. */
body.review-open .app{z-index:100}
body.review-open .workspace{z-index:90}
/* Blur the wallpaper on a pseudo-layer, not the entire workspace. Placing
   backdrop-filter on the window itself would trap/clamp fixed review dialogs. */
.workspace::before{
 content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
 -webkit-backdrop-filter:blur(38px) saturate(155%);backdrop-filter:blur(38px) saturate(155%)
}
.desktop-window-bar{
 display:flex;align-items:center;gap:18px;
 height:51px;padding:0 21px;border-bottom:1px solid rgba(143,168,196,.22);
 background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(248,252,255,.28));
}
.desktop-traffic{display:flex;align-items:center;gap:9px;flex:none}
.desktop-traffic span{display:block;height:12px;width:12px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000012,0 1px 1px #ffffff85}
.desktop-traffic span:nth-child(1){background:#ff665f}
.desktop-traffic span:nth-child(2){background:#ffbf4b}
.desktop-traffic span:nth-child(3){background:#35c76c}
.desktop-window-caption{font-size:11px;color:#7186a2;font-weight:650;letter-spacing:.005em;flex:1;text-align:center}
.desktop-window-actions{display:flex;gap:7px;flex:none}
.desktop-window-actions button{border:1px solid #ffffffd0;background:#ffffff75;border-radius:9px;padding:7px 11px;color:#547092;font-size:10px;min-height:31px;font-weight:660;transition:transform .2s ease,background .2s ease}
.desktop-window-actions button:hover{background:#fff;transform:translateY(-1px)}
.desktop-window-actions button[aria-pressed=true]{background:#d9eafe;border-color:#a8cdf1;color:#265caa}
.workspace>.intro{margin:0!important;padding:27px 35px 20px;border-bottom:1px solid rgba(157,181,211,.19)}
.intro h1{font-size:clamp(25px,2.5vw,34px)!important;line-height:1.15;font-weight:720!important;letter-spacing:-.055em;color:#203c63}
.intro p{color:#7586a1!important;font-size:12px}
.intro .eyebrow{color:#5380bd;letter-spacing:.14em;font-weight:790}
.subtle{border-radius:12px;background:rgba(255,255,255,.72);border:1px solid #cddced;color:#3c658e;box-shadow:0 2px 5px #2947770b;transition:background .17s,transform .17s,box-shadow .17s}
.subtle:hover{background:#fff;transform:translateY(-1px);box-shadow:0 5px 13px #38598816}
.primary{border-radius:12px;background:linear-gradient(145deg,#398ce7,#226bcf);border:1px solid #3985db;box-shadow:0 4px 13px rgba(35,102,204,.16);color:white;transition:filter .15s,transform .15s,box-shadow .15s}
.primary:hover{background:linear-gradient(145deg,#3782d3,#1e5ab1);filter:brightness(1.035);transform:translateY(-1px);box-shadow:0 7px 18px rgba(35,102,204,.24)}
.primary:active,.subtle:active{transform:scale(.985)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #66aaf5!important;outline-offset:3px}
.workspace>.layout{gap:0;grid-template-columns:225px minmax(0,1fr);align-items:start}
.side{
 align-self:stretch;min-height:calc(100vh - 320px);
 padding:26px 14px 24px!important;
 border-right:1px solid rgba(146,169,193,.2);background:rgba(243,248,255,.25);
}
.side-title{color:#91a6bf;font-size:10px;font-weight:800;letter-spacing:.105em}
.side-link{font-size:12px;font-weight:610;color:#627a99;min-height:42px;padding:11px;border-radius:12px;transition:background .2s,transform .2s,color .2s}
.side-link:hover{background:#ffffffb2;color:#316ab2;transform:translateX(2px)}
.side-link.selected{color:#255db5;background:linear-gradient(125deg,#dbeeff,#e8f0ff);box-shadow:inset 0 1px #fff,0 2px 8px #3a79b40b}
.side-break{background:#cbd9ea6e}.side-foot{color:#8192ae;font-size:10px}
.maincol{padding:26px 30px 20px;min-width:0}
.stats{gap:11px!important;margin-bottom:15px}
.stat,.studio-health,.advanced-editors,.panel,.ai-work-result{
 border:1px solid rgba(255,255,255,.86)!important;
 background:rgba(255,255,255,.56)!important;
 box-shadow:0 7px 26px rgba(42,82,121,.065),inset 0 1px #ffffffb0
}
.stat{border-radius:17px;padding:15px 17px!important}
.stat>span{font-size:9px;font-weight:780;letter-spacing:.07em;color:#8198b2}
.stat strong{font-size:15px;color:#3e6187;font-weight:720}
.studio-health{border-radius:16px;padding:15px 17px;color:#617995}
.studio-health strong{color:#365f91}
.studio-health p{color:#7c91a8}
.maincol>.ai-command-center{
 margin:0 0 17px;padding:clamp(20px,2.2vw,32px);min-height:0;
 background:linear-gradient(142deg,rgba(255,255,255,.95) 0%,rgba(248,252,255,.83) 49%,rgba(235,244,255,.84) 100%)!important;
 border:1px solid #ffffffeb!important;border-radius:23px;
 box-shadow:0 13px 42px rgba(54,89,149,.12),0 2px 6px #618db61a,inset 0 1px #fff
}
.ai-command-center::before{background:radial-gradient(circle,#bad9ff90,transparent 71%);right:-60px;top:-90px;width:310px;height:290px}
.ai-hero-label{color:#6388af;font-size:10px;letter-spacing:.105em}
.ai-sigil{border-radius:11px;background:linear-gradient(145deg,#4bacee,#3874d8,#645dd2);color:white;box-shadow:0 4px 12px #5675d447}
.ai-private-pill{background:#edf5ffb9;border:1px solid #d4e7fd;color:#5a81a8}
.ai-hero-head{margin:18px 0 23px}
.ai-hero-head h2{font-size:clamp(30px,3.4vw,44px);font-weight:750;letter-spacing:-.063em;color:#1b375d}
.ai-command-center .ai-hero-head p{color:#7790ac;font-size:12px;max-width:600px}
.ai-orbit{color:#b8c9f7;font-size:44px}
.ai-main-form{
 border:1px solid rgba(218,231,246,.9);border-radius:20px;padding:17px;
 background:linear-gradient(150deg,#fffffff5,#f9fcffed);
 box-shadow:0 5px 24px #45658b0e
}
.ai-input-label{color:#6485aa}
.ai-main-form #aiInput{
 border:1px solid #d4e3f2;border-radius:16px;
 background:#fcfdff;color:#223e63;font-size:15px;min-height:158px;
 box-shadow:inset 0 1px 4px #647f9f0a
}
.ai-main-form #aiInput:focus{outline:3px solid #9ccaf9!important;outline-offset:1px;border-color:#78aae9}
input,textarea,select{background:#fffffff0;color:#29415c;border-color:#d5e2f3}
input::placeholder,textarea::placeholder{color:#9aaec5}
.ai-examples button,.asset-ai-examples button{background:#f0f5fd;border:1px solid #dce9f8;color:#5276a2;border-radius:999px;transition:background .15s,transform .15s}
.ai-examples button:hover,.asset-ai-examples button:hover{background:#e0efff;transform:translateY(-1px);color:#2e6db5}
.ai-command-center .model-label{color:#506d90}
.ai-command-center .model-help{color:#9aacc2}
.ai-tool-settings select{border:1px solid #d9e5f4;background:#f9fcff;color:#335875;border-radius:12px}
.ai-command-center .model-info,.ai-command-center .ai-image-source p{color:#8b9fb8}
.ai-image-source{border-color:#e3ecf6}
.ai-image-source label{color:#577ba3}
.ai-generate,.ai-command-center .ai-generate{
 background:linear-gradient(110deg,#448bea,#346fe0 58%,#6267d8)!important;border:1px solid #6195ea!important;
 border-radius:15px;font-size:14px;font-weight:730;min-height:53px;
 box-shadow:0 8px 24px #417be03b
}
.ai-generate:hover,.ai-command-center .ai-generate:hover{background:linear-gradient(110deg,#2976d7,#275fc3,#555dc5)!important;box-shadow:0 10px 25px #417be051}
.ai-operation{color:#768da8}
.ai-work-result{border-radius:21px;background:#fcfdfff1!important;border-color:#dbe9fb!important}
.ai-work-top strong{color:#355c8d}.ai-work-dot{background:#4a97ee;box-shadow:0 0 0 4px #e3f0ff}
.ai-work-top>span:last-child{color:#6995c4}
.ai-command-center .ai-work-result>p{color:#6f87a0}
.ai-metrics>div{background:#f1f7ff;border:1px solid #e1edfa;border-radius:13px}
.ai-metrics small{color:#8da7c4}.ai-metrics strong{color:#3a6796}
.ai-visual-head strong,.ai-compare span{color:#507bad}
.ai-site-stage{background:#e5effa;border:1px solid #c8dcef}
.ai-compare>div{background:#eff7ff;border-color:#d8e6f6}
.ai-handoff{color:#87a0b8!important;border-color:#e4eef9}
.advanced-editors{border-radius:17px;background:rgba(245,249,255,.7)!important;border:1px solid rgba(255,255,255,.88)!important}
.advanced-editors>summary{color:#4e7096;padding:16px 19px;min-height:54px}
.advanced-editors>summary::before{color:#6a9fe4}
.advanced-editors>summary small{color:#93a9bf}
.advanced-editors[open]>summary{background:#e8f2ffb0;border-bottom:1px solid #d3e2f4}
.advanced-editors .panel{border-radius:17px;background:#fffffff0!important}
.review-backdrop,.publish-receipt-backdrop{background:#26396378;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.review,.publish-receipt{
 background:linear-gradient(135deg,#ffffffef,#f2f8fffa)!important;
 border:1px solid #ffffffed!important;border-radius:25px!important;
 box-shadow:0 25px 110px #2c467b5e!important;
 color:#345679
}
.review h2,.publish-receipt h2{color:#234871}
.review pre,.technical-details pre{background:#f9fbff;color:#315b8b;border:1px solid #d7e5f3}
.review .primary,.publish-receipt .primary{background:#317ed8}
.review .review-actions{gap:10px}
.usage-details{background:#f0f5ff;color:#426482}
.login-wrap{min-height:calc(100vh - 180px);padding:36px}
.login-card{
 border:1px solid #ffffffed;border-radius:28px;width:min(470px,100%);
 background:rgba(255,255,255,.76);box-shadow:var(--desk-shadow);
 -webkit-backdrop-filter:blur(37px) saturate(170%);backdrop-filter:blur(37px) saturate(170%);
 padding:37px 38px 36px
}
.login-card h1{color:#244269;font-weight:720;letter-spacing:-.06em;font-size:39px}
.login-card p{color:#7990a9}
.login-card .primary{background:linear-gradient(115deg,#478fe7,#366bd4)}
.login-card .eyebrow{color:#477eaf}
footer{border:0;color:#ffffffc9;font-weight:700;text-shadow:0 1px 7px #456b9d7a;padding:13px clamp(20px,3vw,46px);font-size:9px}
.desktop-dock{
 position:fixed;bottom:15px;left:50%;transform:translateX(-50%);z-index:75;
 display:flex;align-items:flex-end;gap:9px;
 padding:10px 14px 9px;border:1px solid #ffffffd4;border-radius:24px;
 background:rgba(247,250,255,.52);box-shadow:0 12px 39px #24476f42, inset 0 1px #ffffffaf;
 -webkit-backdrop-filter:blur(32px) saturate(190%);backdrop-filter:blur(32px) saturate(190%)
}
.desktop-dock[hidden]{display:none!important}
.dock-app{position:relative;display:flex;align-items:center;flex-direction:column;gap:4px;justify-content:center;
 width:57px;min-height:62px;padding:4px 2px 0;border:0;border-radius:13px;
 background:transparent;color:#597390;font-size:9px;font-weight:660;white-space:nowrap;cursor:pointer;
 text-decoration:none;transition:transform .21s cubic-bezier(.2,.7,.2,1),filter .2s}
.dock-app:hover,.dock-app:focus-visible{transform:translateY(-10px) scale(1.09)}
.dock-app:active{transform:scale(.96)}
.dock-app[data-active="true"]::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);height:4px;width:4px;border-radius:50%;background:#4783da}
.dock-app-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;
 background:linear-gradient(135deg,#95d0fb,#3373d9);border:1px solid #ffffffa1;
 box-shadow:inset 0 1px #ffffffa8,0 4px 11px #3f6daf33;
 font-size:24px;line-height:1;color:white;text-shadow:0 1px 3px #162f676b}
.dock-app:nth-child(2) .dock-app-icon{background:linear-gradient(135deg,#9bd2eb,#5e91df 58%,#797de0)}
.dock-app:nth-child(3) .dock-app-icon{background:linear-gradient(145deg,#e4c1ff,#a18ee8 62%,#6578dd)}
.dock-app:nth-child(4) .dock-app-icon{background:linear-gradient(135deg,#a7e4d8,#42a9ad 58%,#3e86c6)}
.dock-app:nth-child(5) .dock-app-icon{background:linear-gradient(135deg,#fad1a8,#ea9895 55%,#c76caa)}
.dock-app:nth-child(6) .dock-app-icon{background:linear-gradient(135deg,#bcd4ee,#6f96c3)}
.dock-separator{align-self:stretch;width:1px;margin:7px 2px;background:#ffffffa8}
.desktop-command-backdrop{position:fixed;inset:0;z-index:110;background:#20375942;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.desktop-command-palette{position:fixed;top:min(24vh,170px);left:50%;transform:translateX(-50%);z-index:111;
 width:min(535px,calc(100vw - 26px));padding:13px;border-radius:22px;
 background:#ffffffed;border:1px solid #ffffff;box-shadow:0 30px 100px #2342726e;
 -webkit-backdrop-filter:blur(44px);backdrop-filter:blur(44px)}
.desktop-command-palette input{border:0!important;background:#f3f7ff;padding:14px 17px;border-radius:14px;font-size:16px;outline:0!important}
.desktop-command-palette .command-caption{color:#8ea2c0;padding:13px 12px 7px;font-size:10px;letter-spacing:.12em;font-weight:750}
.desktop-command-list{display:grid;gap:4px;max-height:52vh;overflow-y:auto}
.desktop-command-list button{display:flex;align-items:center;gap:10px;border:0;border-radius:12px;padding:12px 14px;
 background:transparent;text-align:left;font-size:13px;font-weight:600;color:#496c9c;cursor:pointer}
.desktop-command-list button:hover,.desktop-command-list button:focus-visible{background:#eaf3ff;outline:none!important}
.desktop-command-list .command-key{margin-left:auto;color:#a1b2c9;font-size:11px}
.desktop-command-empty{font-size:12px;color:#819ab1;padding:14px}
body.desktop-focus .workspace>.layout{grid-template-columns:minmax(0,1fr)}
body.desktop-focus .side,body.desktop-focus .stats,body.desktop-focus .studio-health{display:none!important}
body.desktop-focus .maincol{padding:29px clamp(20px,5vw,80px) 35px}
body.desktop-focus .maincol>.ai-command-center{max-width:980px;margin-left:auto;margin-right:auto}
@media(max-width:1040px){
 .workspace{width:calc(100% - 30px);margin-top:20px}
 .workspace>.layout{grid-template-columns:175px minmax(0,1fr)}
 .maincol{padding:18px 17px}
 .side{padding:18px 10px!important}
 .desktop-menu{margin-left:18px}
 .desktop-menutime{display:none}
}
@media(max-width:760px){
 .desktop-menu{display:none}
 .masthead{padding:11px 18px!important}
 .workspace{width:calc(100% - 18px);margin:12px auto 20px;border-radius:22px}
 .workspace>.layout{display:block}
 .side{display:none!important}
 .workspace>.intro{padding:20px 19px 17px}
 .intro h1{font-size:27px!important}
 .maincol{padding:16px 14px}
 .desktop-window-caption{font-size:10px}
 .desktop-window-bar{padding:0 14px;height:46px;gap:8px}
 .desktop-window-actions button{font-size:10px;padding:7px}
 .maincol>.ai-command-center{padding:17px}
 .ai-hero-head h2{font-size:30px}
 .ai-main-form #aiInput{font-size:15px}
 .ai-private-pill{letter-spacing:0}
 .desktop-dock{bottom:max(9px,env(safe-area-inset-bottom,0px));gap:4px;padding:7px 9px;border-radius:21px;max-width:calc(100vw - 15px)}
 .dock-app{width:50px;font-size:8px}
 .dock-app-icon{width:39px;height:39px;border-radius:12px;font-size:21px}
 .dock-separator{margin:7px 1px}
 .app{padding-bottom:101px}
}
@media(max-width:420px){
 .workspace>.intro{padding:15px 13px}
 .intro h1{font-size:24px!important}
 .desktop-window-actions{gap:3px}
 .desktop-window-actions button{padding:6px 7px;font-size:9px}
 .desktop-window-caption{display:none}
 .desktop-window-bar{justify-content:space-between}
 .maincol{padding:12px 10px}
 .desktop-dock{gap:1px;padding:7px 6px}
 .dock-app{width:46px}
 .dock-app-icon{width:36px;height:36px;font-size:19px}
 .dock-app span:last-child{font-size:8px}
 .dock-separator{margin:7px 0}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .dock-app,.subtle,.primary,.side-link,.header-side a,.ai-examples button{transition:none!important;transform:none!important}
 .dock-app:hover{transform:none!important}
}
@supports not ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
 .workspace,.masthead,.desktop-dock,.login-card,.desktop-command-palette{background:rgba(248,251,255,.97)!important}
}