/* A compact studio: one tool rail, a quiet canvas, and a predictable inspector. */
:root { --primary:#2563eb; --primary-hover:#1d4ed8; --primary-soft:#eef3ff; --ink:#202631; --muted:#68717e; --subtle:#89919d; --border:#e2e5ea; --canvas:#eceef2; --surface-alt:#f7f8fa; --radius:8px; --radius-lg:10px; }
body { font-size:13px; }
.app-shell { grid-template-rows:54px 40px minmax(0,1fr); background:#fff; }
.topbar { padding:0 16px; gap:18px; grid-template-columns:auto minmax(80px,1fr) auto; background:white; border-bottom:1px solid var(--border); }
.brand { gap:8px; }.brand-mark { width:28px; height:28px; }.brand-word { font-size:18px; letter-spacing:-.6px; color:#202631; }
.document-title { gap:10px; padding-left:18px; border-left:1px solid var(--border); max-width:100%; }
.document-name { font-size:12px; }.document-state { font-size:11px; color:var(--subtle); }
.top-actions { gap:6px; }.button { min-height:32px; padding:0 11px; border-radius:6px; font-size:12px; font-weight:500; text-decoration:none; }
.top-actions .button { min-height:32px; width:auto; padding:0 10px; }.top-actions .button span { display:inline; }
#export-button > .ti-download { display:none; }
.button.large { min-height:38px; padding:0 16px; }.button.ghost { background:transparent; }
#account-button { max-width:112px; font-size:11px; border-color:transparent; color:var(--muted); }
#ai-launcher { border-color:transparent; background:#f0f4ff; color:#325baf; }.ai-launcher-logo { width:18px !important; height:18px !important; }
.file-menu { position:relative; }.file-menu summary { list-style:none; cursor:pointer; }.file-menu summary::-webkit-details-marker { display:none; }
.file-menu-items { position:absolute; top:39px; right:0; width:210px; background:white; border:1px solid var(--border); padding:6px; border-radius:8px; box-shadow:0 10px 35px #2026311a; }
.file-menu-items .button { display:flex !important; width:100%; justify-content:flex-start; border:0; margin:1px 0; padding:0 10px; }
.file-menu-items .button span { display:inline !important; }
.workspace-toolbar { margin:0; padding:0 14px; gap:6px; border-radius:0; background:#fff; border-bottom:1px solid var(--border); }
.toolbar-group { align-items:center; gap:2px; }.toolbar-divider { height:18px; margin:0 5px; flex-shrink:0; }
.icon-button,.compact-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:30px; min-height:28px; padding:0 7px; border-radius:5px; }
.icon-button i,.compact-button i { font-size:17px; }.icon-button span,.compact-button span { font-size:11px; }
.icon-button:hover:not(:disabled),.compact-button:hover:not(:disabled) { background:#f0f2f6; }
.selection-hint { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:48%; }
.editor-layout { grid-template-columns:56px minmax(0,1fr) 280px; background:var(--canvas); }
.tool-rail { margin:0; padding:9px 5px; border:0; border-right:1px solid var(--border); border-radius:0; gap:5px; }
.tool-button { width:42px; min-height:47px; padding:5px 3px; gap:4px; border-radius:6px; }.tool-button i { font-size:20px; }.tool-button small { font-size:10px; }
.tool-button.active { color:#2563eb; background:#eef3ff; box-shadow:inset 2px 0 #2563eb; }
.workspace { margin:0; border:0; border-radius:0; grid-template-rows:minmax(0,1fr) 32px; }
.canvas-viewport { background:#eceef2; }
.empty-state { inset:0; border:0; border-radius:0; background:radial-gradient(ellipse at 50% 38%,#fafbfc,#eceef2 75%); padding:28px; }
.empty-icon { width:44px; height:44px; margin-bottom:24px; transform:rotate(-6deg); filter:drop-shadow(0 7px 9px #2563eb15); }
.empty-state .eyebrow { font-size:10px; color:#788494; font-weight:500; letter-spacing:.16em; margin-bottom:15px; }
.empty-state h1 { font-size:clamp(24px,2.6vw,34px); font-weight:600; letter-spacing:-1px; color:#262e3a; }
.empty-state > p:not(.eyebrow) { margin:16px 0 25px; font-size:12px; line-height:1.9; color:#7a828e; }
.empty-actions { display:flex; gap:9px; }.empty-actions .ghost { background:#ffffffa8; border-color:#d7dce5; }
.format-note { margin-top:21px; font-size:10px; color:#959da8; letter-spacing:.04em; }
kbd { font:10px 'Segoe UI',sans-serif; background:#fff8; padding:2px 5px; border:1px solid #dce0e6; border-radius:3px; color:#828a96; white-space:nowrap; }
.statusbar { padding:0 12px; gap:6px; font-size:10px; flex-wrap:nowrap; }
.image-meta { white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; gap:6px; }
.status-spacer { min-width:8px; }.zoom-fit { white-space:nowrap; flex-shrink:0; padding:0 6px; font-size:11px; }.zoom-button { width:24px; flex-shrink:0; }.zoom-value { min-width:34px; flex-shrink:0; font-size:10px; }
.statusbar #zoom-range { width:110px; flex:0 0 110px; margin:0 4px; height:20px; }.statusbar input[type=range]::-webkit-slider-thumb { width:11px; height:11px; }
.inspector { margin:0; border:0; border-left:1px solid var(--border); border-radius:0; grid-template-rows:42px minmax(0,1fr); }
.inspector-tabs { background:#fff; }.inspector-tab { font-size:12px; font-weight:500; }.inspector-tab::after { height:2px; }
.panel { padding:20px 19px; }.panel-heading h2 { font-size:17px; }.panel-heading .eyebrow { font-size:9px; margin-bottom:7px; }.panel-heading { margin-bottom:20px; }
.control-stack { gap:17px; }.range-control { gap:9px; margin-bottom:17px; }.range-control > span { font-size:12px; }.range-control output { font-size:11px; }
input[type=range] { height:22px; }input[type=range]::-webkit-slider-thumb { width:13px; height:13px; }
.section-label { margin-top:22px; font-size:12px; }.preset-grid { gap:8px; }.preset-preview { border-radius:5px; }.preset em { font-size:10px; }
.rotation-control { display:flex; align-items:center; height:26px; }
.rotation-value { min-width:38px; height:26px; padding:0 5px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--subtle); font-size:11px; font-weight:400; cursor:text; }
.rotation-value:hover:not(:disabled) { border-color:var(--border); background:var(--surface-alt); color:var(--primary); }
.rotation-input { width:80px; height:26px; padding:0 5px; border:1px solid var(--primary); border-radius:4px; background:#fff; color:var(--ink); font-size:12px; text-align:right; }
.action-grid button { border-radius:6px; min-height:48px; }.size-grid input { font-size:12px; }.style-tip { font-size:11px; border-radius:6px; }
.inspector-welcome { display:none; padding:30px 24px; overflow-y:auto; }
html:not([data-loaded=true]) .inspector { grid-template-rows:minmax(0,1fr); }
html:not([data-loaded=true]) .inspector-tabs,html:not([data-loaded=true]) .inspector-scroll { display:none; }
html:not([data-loaded=true]) .inspector-welcome { display:block; }
.welcome-kicker { font-size:9px; letter-spacing:.13em; color:#9ba3b0; }.inspector-welcome h2 { margin:19px 0 12px; font-size:24px; line-height:1.45; font-weight:500; letter-spacing:-.7px; }
.inspector-welcome > p { font-size:11px; color:#8a939f; line-height:1.8; margin-bottom:33px; }
.welcome-feature { display:flex; align-items:flex-start; gap:11px; margin:25px 0; }.welcome-feature i { font-size:18px; color:#6f86ad; padding-top:1px; }.welcome-feature strong { font-size:12px; font-weight:500; display:block; }.welcome-feature span { display:block; color:#969eaa; font-size:10px; margin-top:6px; }
.welcome-shortcuts { border-top:1px solid var(--border); margin-top:35px; padding-top:18px; display:grid; gap:12px; }.welcome-shortcuts span { display:flex; align-items:center; justify-content:space-between; font-size:10px; color:#98a0aa; }
.share-status { flex-shrink:0; font-size:10px; color:#657b95; padding:3px 7px; background:#f1f5fa; border:0; border-radius:4px; cursor:pointer; white-space:nowrap; }
.share-status[data-kind=synced] { color:#22825b; background:#edf8f2; }.share-status[data-kind=conflict] { color:#b2671b; background:#fff2de; }.share-status[data-kind=pending] { color:#7b8190; }
.document-title:has(.share-status:not([hidden])) .document-state { display:none; }
.share-banner { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:6; width:max-content; max-width:calc(100% - 24px); display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:10px 16px; background:#fffffff2; border:1px solid #dce3ee; box-shadow:0 4px 14px #2030400a; border-radius:7px; font-size:11px; color:#647084; }
html[data-readonly=true] .leafer-host,html[data-readonly=true] .tool-surface { pointer-events:none !important; }
.share-dialog { width:min(550px,calc(100vw - 24px)); max-height:85vh; padding:24px; border:1px solid var(--border); border-radius:10px; color:var(--ink); box-shadow:var(--shadow-panel); }
.share-dialog::backdrop { background:#18253860; }.share-dialog h2 { font-size:19px; margin:0; }.share-description { font-size:12px; color:var(--muted); line-height:1.8; margin:18px 0 22px; }
.share-current { background:#f7f9fc; border:1px solid var(--border); border-radius:7px; padding:16px; }.share-current label { font-size:11px; color:var(--muted); }
.share-current input { display:block; width:100%; margin:9px 0 12px; padding:9px; border:1px solid #d9dfe8; border-radius:5px; font-size:11px; background:#fff; }.share-actions { display:flex; gap:9px; }.share-note { font-size:10px; line-height:1.6; color:var(--subtle); margin:12px 0 0; }
.share-list-heading { margin:24px 0 0; padding-top:18px; border-top:1px solid var(--border); font-size:12px; }.share-dialog .cloud-file-name { flex:1; font-size:12px; }.cloud-dialog { border-radius:10px; }.cloud-file { border-radius:6px; }.cloud-list { font-size:12px; }.cloud-dialog .icon-button,.share-dialog .icon-button { width:28px; min-width:28px; }
@media(min-width:901px) { .inspector-toggle { display:none; } }
@media(max-width:1180px) { .document-state { display:none; }.topbar { gap:12px; }.document-title { padding-left:12px; }.editor-layout { grid-template-columns:54px minmax(0,1fr) 252px; }.inspector-welcome { padding:26px 20px; }.top-actions .button { padding:0 8px; } }
@media(max-width:900px) { .editor-layout { grid-template-columns:54px minmax(0,1fr); }.inspector { top:94px; bottom:0; right:0; width:280px; border-left:1px solid var(--border); }.inspector.mobile-open { display:grid; }.inspector-toggle { display:flex; }.tool-rail,.workspace { margin:0; }.top-actions .button span { display:none; }.top-actions .button { width:32px; padding:0; }.file-menu-items .button { width:100%; padding:0 10px; }.selection-hint { display:none; }.document-title { gap:6px; }.share-status { max-width:135px; overflow:hidden; text-overflow:ellipsis; } }
@media(max-width:640px) { .app-shell { grid-template-rows:48px 38px minmax(0,1fr); }.topbar { padding:0 8px; gap:6px; }.brand-word { display:none; }.brand-mark { width:25px; height:25px; }.document-title { border:0; padding-left:0; justify-self:start; }.document-name { max-width:90px; font-size:11px; }.top-actions { gap:3px; }.top-actions .button:not(#open-button):not(#export-button):not(#ai-launcher) { display:inline-flex; }#account-button { max-width:65px; width:auto; padding:0 4px; font-size:10px; }#ai-launcher { display:none; }#cloud-button { display:none; }.document-title .share-status { display:none; }.workspace-toolbar { padding:0 6px; gap:2px; }.compact-button,.icon-button { min-width:27px; padding:0 5px; }.workspace-toolbar button span { display:none; }.toolbar-divider { margin:0 3px; }.editor-layout { grid-template-columns:46px minmax(0,1fr); }.tool-rail { padding:8px 3px; }.tool-button { width:37px; min-height:44px; }.tool-button i { font-size:18px; }.empty-state { padding:18px; }.empty-state h1 { font-size:24px; }.empty-actions { flex-direction:column; }.format-note { max-width:230px; line-height:1.8; }.statusbar { padding:0 7px; gap:2px; }.statusbar #zoom-range { display:none; }.image-meta { max-width:44%; }.inspector { top:86px; }.share-banner { font-size:10px; gap:8px; padding:8px; }.empty-icon { margin-bottom:18px; } }
@media(max-height:620px) { .empty-icon { width:34px; height:34px; margin-bottom:12px; }.empty-state .eyebrow { margin-bottom:8px; }.empty-state > p:not(.eyebrow) { margin:10px 0 16px; }.format-note { margin-top:14px; }.inspector-welcome { padding-top:22px; } }
@media(max-width:900px) { #export-button > .ti-download { display:inline; } #export-button > .ti-chevron-down,.file-menu summary > .ti-chevron-down { display:none; } }