/* XALO PHOTO / V13 professional workspace. Pure CSS, no decorative video or GPU shader. */
:root{--xp13-cyan:#90e5ff;--xp13-edge:rgba(164,215,255,.15);--xp13-panel:#0d131b;--xp13-ease:cubic-bezier(.22,1,.36,1)}
.editor-body{background:#070b11}
.editor-topbar{background:linear-gradient(180deg,#141d29,#0b121b);border-bottom:1px solid var(--xp13-edge)}
.editor-brand{letter-spacing:.07em}.editor-brand small{color:#b9dae7}
.editor-subbar{background:linear-gradient(90deg,rgba(70,150,189,.07),#0c1119 72%);border-bottom:1px solid rgba(130,204,255,.11)}
.toolbar{background:#0b1119;border-inline-end:1px solid var(--xp13-edge)}
.tool-btn{transition:background .18s,border-color .18s,transform .18s var(--xp13-ease)}
.tool-btn.active{box-shadow:inset 0 0 0 1px rgba(126,225,255,.3),0 0 20px rgba(92,186,231,.08)}
.tool-btn[aria-label="Sample color"]{font-size:19px}
.canvas-stage{background:radial-gradient(ellipse at 52% 39%,rgba(93,131,153,.12),transparent 58%),repeating-conic-gradient(rgba(255,255,255,.013) 0% 25%,transparent 0% 50%) 50%/24px 24px,#090e14}
.canvas-wrap{filter:drop-shadow(0 18px 32px rgba(0,0,0,.28))}
.right-panel{background:var(--xp13-panel);border-inline-start:1px solid var(--xp13-edge)}
.panel-tabs{background:#0b121a;border-bottom:1px solid rgba(126,225,255,.15)}
.panel-btn.active{border-bottom-color:var(--xp13-cyan);color:#e7f8ff}
.panel-section .adjust-group,.quick-card{transition:border-color .22s,background-color .22s}
.panel-section .adjust-group:hover,.quick-card:hover{border-color:rgba(132,225,255,.21)}
.export-btn{box-shadow:0 3px 24px rgba(41,154,204,.14)}
.xp13-command-trigger{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;border-color:rgba(155,216,243,.19);background:rgba(148,208,243,.055)}
.xp13-command-trigger kbd{font:600 9px Manrope,system-ui,sans-serif;padding:3px 5px;border-radius:4px;background:rgba(255,255,255,.07);color:#a4b9c9}
.xp13-focus-btn[aria-pressed="true"]{background:rgba(126,225,255,.13);border-color:rgba(126,225,255,.4);color:white}
.xp13-look-intro{font-size:10px;color:#9cbed1;margin:4px 0 9px;line-height:1.5}
.xp13-look-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.xp13-look-grid button{min-width:0;border-radius:9px;min-height:36px;transition:transform .2s var(--xp13-ease),border-color .2s;background:linear-gradient(150deg,rgba(110,178,211,.085),rgba(22,30,40,.12))}
.xp13-look-grid button:focus-visible,.xp13-look-grid button:hover{border-color:rgba(124,223,255,.7);transform:translateY(-1px)}
.xp13-workflow-note{display:flex;align-items:center;gap:9px;padding:10px;margin:2px 0 12px;background:rgba(122,220,255,.04);border:1px solid rgba(122,220,255,.12);border-radius:10px;color:#a9cadb;font-size:10px;line-height:1.55}
.xp13-status-dot{width:7px;height:7px;border-radius:50%;background:#8be8c0;flex:0 0 auto;box-shadow:0 0 0 4px rgba(139,232,192,.07)}
.xp13-export-presets{display:grid;gap:6px;padding:10px;border:1px solid rgba(122,220,255,.14);border-radius:11px;margin:13px 0;background:rgba(122,220,255,.04)}
.xp13-export-presets label{font-size:11px;font-weight:750;color:#def2fb}.xp13-export-presets select{width:100%;min-width:0;border:1px solid rgba(150,200,220,.2);border-radius:7px;background:#111a25;padding:7px}
.xp13-export-presets span{font-size:10px;color:#aabecd;line-height:1.55}
.xp13-panel-backdrop{display:none}
.xp13-command-mask{position:fixed;inset:0;z-index:10030;background:rgba(2,6,12,.77);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:clamp(22px,8vh,110px) 16px;overflow:auto}
.xp13-command-mask[hidden]{display:none!important}
.xp13-command-dialog{width:min(600px,100%);margin:0 auto;background:#0d1520;border:1px solid rgba(151,230,254,.28);border-radius:18px;box-shadow:0 32px 100px rgba(0,0,0,.6);overflow:hidden;direction:ltr}
.xp13-command-header{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(141,225,255,.13);font-size:19px;color:#91e6fb}
#xp13Query{flex:1;min-width:0;font:500 15px Manrope,system-ui,sans-serif;background:transparent;border:0;outline:0;color:#f1faff;padding:10px 0}
#xp13CloseCommands{background:rgba(255,255,255,.07);border:0;border-radius:8px;padding:7px 10px;color:#b3c6d2}
.xp13-command-list{max-height:min(55vh,460px);overflow-y:auto;padding:9px}
.xp13-command-result{display:flex;justify-content:space-between;align-items:center;gap:15px;text-align:start;width:100%;border:0;border-radius:10px;background:transparent;padding:13px;color:#e4f0f8;font-size:12px;line-height:1.45}
.xp13-command-result:hover,.xp13-command-result[aria-selected="true"]{background:rgba(112,208,248,.12);outline:1px solid rgba(112,208,248,.14)}
.xp13-command-result span{font-weight:750}.xp13-command-result small{color:#9eb2c1;font-size:10px}.xp13-command-empty{padding:24px;color:#9eb2c1;text-align:center}
.xp13-command-footer{display:flex;justify-content:space-between;gap:10px;padding:11px 18px;border-top:1px solid rgba(141,225,255,.12);font-size:10px;color:#8298a9}
.editor-body.xp13-focus .editor-main{grid-template-columns:var(--xp-toolbar) minmax(0,1fr)!important}
.editor-body.xp13-focus #rightPanel,.editor-body.xp13-focus #panelResizer{display:none!important}
.editor-body.xp13-focus .canvas-stage{background-color:#05080c}
.editor-body.xp13-focus #xp13Focus{color:#e9f9ff}
@media(max-width:1050px){.xp13-command-trigger kbd{display:none}.xp13-command-trigger{padding:7px}.editor-body:has(.right-panel.open) .xp13-panel-backdrop{display:block;position:fixed;inset:0;z-index:22;background:rgba(2,7,13,.58)}.right-panel{z-index:26!important}}
@media(max-width:650px){.xp13-command-trigger{display:none}.xp13-command-dialog{border-radius:14px}.xp13-focus-btn{font-size:10px;padding:6px!important}.editor-topbar .menu-cluster{gap:4px}.xp13-command-mask{padding:26px 12px}.xp13-command-footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){.xp13-command-mask{backdrop-filter:none;-webkit-backdrop-filter:none}.xp13-look-grid button,.tool-btn,.quick-card{transition:none!important;transform:none!important}}

.xp13-tool-search{width:40px;height:35px;min-height:35px;display:grid;place-items:center;margin:2px auto 7px;border:1px solid rgba(132,225,255,.24);border-radius:9px;background:rgba(110,208,247,.09);color:#b5f0ff;font-size:23px}.xp13-tool-search:hover,.xp13-tool-search:focus-visible{background:rgba(110,208,247,.2);outline-color:#93def6}
/* V13 mobile two-tier command header: brand and controls stay legible at 360–430px. */
@media(max-width:650px){
 .editor-shell{grid-template-rows:90px 42px minmax(0,1fr) 82px 76px!important}
 .editor-topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:34px 36px;gap:4px 7px!important;align-items:center;overflow:hidden;padding:6px 9px!important}
 .editor-topbar>.editor-brand{grid-column:1!important;grid-row:1!important;display:flex!important;align-items:center;max-width:none!important;min-width:0;font-size:12px!important;white-space:nowrap}
 .editor-topbar>.mode-switch{grid-column:1!important;grid-row:2!important;justify-self:start;max-width:none!important;margin:0!important}
 .editor-topbar>.quick-cluster{display:contents!important}
 .quick-cluster>.editor-lang-picker{grid-column:2;grid-row:1;min-height:32px;justify-self:end}
 .quick-cluster>#panelToggle{grid-column:3;grid-row:1;justify-self:end}
 .quick-cluster>#compareBtn{display:inline-flex!important;grid-column:2;grid-row:2;justify-self:end;font-size:10px}
 .quick-cluster>#xp13Focus{display:inline-flex!important;grid-column:3;grid-row:2;justify-self:end;font-size:10px}
 .quick-cluster>.top-btn:not(#compareBtn):not(#xp13Focus):not(#panelToggle),.quick-cluster>.install-app-btn,.quick-cluster>a.top-btn{display:none!important}
 .right-panel{top:132px!important;bottom:158px!important}
 .editor-topbar .mode-switch button{font-size:10px;padding:6px 8px}
 .xp13-tool-search{height:35px}
}
@media(max-width:355px){.quick-cluster>#xp13Focus{display:none!important}.mode-switch button{padding:5px!important}}