/* Themes extend main.css's semantic tokens and the existing editor components. */
:root{--theme-secondary:var(--active);--theme-decoration-opacity:0;--theme-active-fill:var(--accent-subtle)}
:root[data-studio-theme] input,:root[data-studio-theme] select,:root[data-studio-theme] .btn,:root[data-studio-theme] .tb-btn{border-radius:var(--radius-md)}
:root[data-studio-theme] .dropdown,:root[data-studio-theme] .modal,:root[data-studio-theme] .popover{border-radius:var(--radius-lg)}
:root[data-studio-theme="cat-lover"] .tool-btn.active,:root[data-studio-theme="midnight-cat"] .tool-btn.active{background:var(--theme-active-fill)!important;color:var(--accent)!important;border-color:var(--accent)!important}
:root[data-studio-theme="cat-lover"] #rightpanel,:root[data-studio-theme="pastel-dreams"] #rightpanel{background:var(--bg-app)}
:root[data-studio-theme="cat-lover"] #rightpanel>.panel-section,:root[data-studio-theme="midnight-cat"] #rightpanel>.panel-section,:root[data-studio-theme="pastel-dreams"] #rightpanel>.panel-section{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
:root[data-studio-theme="minimal-mono"] .tool-btn,:root[data-studio-theme="minimal-mono"] .panel-section{border-radius:var(--radius-sm)!important}
.theme-cat-badge,.theme-brand-cat,.theme-empty-cat{display:none;pointer-events:none;user-select:none}
:root[data-cat-decorations] .theme-cat-badge{display:none;width:34px;height:34px;flex:none;align-self:center;margin:0 0 8px}
:root[data-cat-decorations] .theme-brand-cat{display:block;width:30px;height:30px;flex:none}
:root[data-cat-decorations] #logo .brand-mark{display:none}
:root[data-cat-decorations] .theme-empty-cat{display:block;width:95px;height:60px;margin:0 auto 12px;opacity:.85}
:root[data-cat-decorations] .workspace-document-tab [aria-selected=true]::before{content:'';display:inline-block;width:18px;height:18px;margin-right:7px;vertical-align:middle;background:url('../assets/themes/cat-face.svg') center/contain no-repeat;pointer-events:none}
:root[data-cat-decorations] #lefttoolbar::after{content:'';display:block;min-height:24px;width:24px;margin:12px auto 4px;background:url('../assets/themes/paw.svg') center/contain no-repeat;opacity:var(--theme-decoration-opacity);pointer-events:none;flex-shrink:0}
:root[data-cat-decorations] .workspace-inspector-heading strong::before{content:'';display:inline-block;width:26px;height:26px;margin-right:8px;vertical-align:middle;background:url('../assets/themes/cat-face.svg') center/contain no-repeat;pointer-events:none}
:root[data-cat-decorations] #toolopts::before{content:'';width:22px;height:22px;flex:none;background:url('../assets/themes/paw.svg') center/contain no-repeat;opacity:.65;pointer-events:none}
.appearance-themes-launch{width:100%;min-height:36px;border:1px solid var(--accent-border);background:var(--accent-subtle);color:var(--accent)}
.theme-current-name{font-size:var(--text-sm);color:var(--text-dim);margin:4px 0 12px}
.themes-modal{width:min(820px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important}
.themes-modal .modal-body{max-height:calc(100dvh - 190px);overflow-y:auto;padding:20px}
.themes-intro{color:var(--text-dim);font-size:13px;line-height:1.6;margin:0 0 20px}
.theme-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.theme-card{min-width:0;border:1px solid var(--border);background:var(--bg-panel);border-radius:var(--radius-lg);padding:10px;display:flex;flex-direction:column}
.theme-card[data-selected=true]{border-color:var(--accent)}
.theme-card[data-previewing]{outline:2px solid var(--accent);outline-offset:2px}
.theme-card-title{display:flex;justify-content:space-between;gap:5px;align-items:center;margin-top:12px}
.theme-card-title strong{font-size:13px;color:var(--text)}
.theme-mode{font-size:10px;color:var(--text-dim);border:1px solid var(--border-strong);border-radius:20px;padding:1px 6px}
.theme-card p{color:var(--text-dim);font-size:12px;line-height:1.5;margin:7px 0 12px;flex:1}
.theme-card-actions{display:flex;justify-content:space-between;gap:8px;align-items:center}
.theme-card-actions button{min-height:36px;border:1px solid var(--border-strong)}
.theme-applied{color:var(--accent);font-size:11px;font-weight:600}
.theme-decoration-setting{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:13px;min-height:44px}
.theme-decoration-setting input{width:18px;height:18px;accent-color:var(--accent)}
.theme-preview-status{font-size:12px;color:var(--text-dim);line-height:1.5;min-height:36px;margin:8px 0 0}
.themes-modal .modal-footer{display:flex;flex-wrap:wrap;gap:8px}
.themes-modal .modal-footer .btn{min-height:40px}
.theme-mini{height:112px;overflow:hidden;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg-app);pointer-events:none}
.theme-mini-top{height:17px;display:flex;align-items:center;gap:7px;padding:3px 6px;background:var(--bg-panel-2);border-bottom:1px solid var(--border)}
.theme-mini-top i{width:7px;height:7px;border-radius:50%;background:var(--mini-accent)}
.theme-mini-top span{width:17px;height:2px;background:var(--text-dim)}
.theme-mini-editor{display:grid;grid-template-columns:16px 1fr 43px;height:79px;gap:2px}
.theme-mini-tools{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:6px;background:var(--bg-panel)}
.theme-mini-tools i{width:5px;height:5px;border:1px solid var(--text-dim)}
.theme-mini-tools i:first-child{background:var(--mini-accent);border-color:var(--mini-accent)}
.theme-mini-canvas{background:var(--canvas-bg);position:relative;display:grid;place-items:center}
.theme-mini-artboard{width:65%;height:56%;background:var(--bg-input);border:1px solid var(--mini-accent);box-shadow:var(--shadow-sm)}
.theme-mini-canvas img{position:absolute;bottom:2px;right:3px;width:19px;height:19px}
.theme-mini-props{display:flex;flex-direction:column;gap:7px;padding:7px 4px;background:var(--bg-panel-2)}
.theme-mini-props i{height:8px;border:1px solid var(--border-strong);border-radius:2px;background:var(--bg-input)}
.theme-mini-props i:first-child{height:3px;width:65%;border:0;background:var(--text-dim)}
.theme-mini-palette{height:15px;display:flex;gap:4px;align-items:center;padding-left:21px;background:var(--bg-panel)}
.theme-mini-palette i{width:7px;height:7px;border-radius:50%;background:var(--mini-accent)}
.theme-mini-palette i:nth-child(2n){background:var(--theme-secondary,var(--border-strong))}.theme-mini-palette i:nth-child(3n){background:var(--text-dim)}
@media(max-width:650px){.theme-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.themes-modal .modal-body{padding:14px}.theme-card-title{align-items:flex-start;flex-wrap:wrap}.theme-card-actions button{min-height:44px}}
@media(max-width:360px){.theme-gallery{grid-template-columns:1fr}.theme-mini{height:112px}}
/* Keep the preview controls available while revealing the editor underneath. */
.modal-overlay:has(.theme-live-preview){background:transparent;align-items:flex-start;justify-content:flex-end;padding:16px}
.themes-modal.theme-live-preview{width:min(400px,calc(100vw - 32px))!important;min-width:0;height:auto;max-height:calc(100dvh - 32px);margin:0;box-shadow:var(--shadow-md)}
.theme-live-preview .theme-gallery,.theme-live-preview .themes-intro{display:none}
.theme-live-preview .theme-decoration-setting{margin-top:0}
.theme-live-preview .modal-body{max-height:calc(100dvh - 230px)}
.theme-mini-artboard{background:var(--canvas-page)}
:root[data-cat-decorations] #pb-layers .workspace-empty::before{content:'';display:block;width:95px;height:60px;margin:0 auto 12px;background:url('../assets/themes/sleeping-cat.svg') center/contain no-repeat;pointer-events:none}

.workspace-panel-popup button{max-width:100%;white-space:normal;min-height:44px;line-height:1.4}.workspace-selection-count[hidden]{display:none!important}

#lefttoolbar .theme-cat-badge,#lefttoolbar .tool-discovery-open{display:none!important;}
/* Cat decoration stays in the interface; drawing and text-editing cursors keep their meaning. */
:root[data-cat-decorations] #lefttoolbar .tool-btn{position:relative;border-radius:10px}
:root[data-cat-decorations] #lefttoolbar .tool-btn::before{content:'';position:absolute;top:2px;right:2px;width:10px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 8V1l4 3h2l4-3v7' fill='%23ecc0d6' stroke='%23875c83' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none;opacity:.8}
:root[data-cat-decorations] #lefttoolbar .tool-btn.active{box-shadow:inset 0 -2px 0 var(--accent)}
:root[data-cat-decorations] #app{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2l2 23 6-6 5 10 4-2-5-10 8-1Z' fill='white' stroke='%2340344d' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5 8V3l5 4 5 1 4-3v9' fill='%23f0bad3' stroke='%2340344d' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='11' r='1' fill='%2340344d'/%3E%3Ccircle cx='15' cy='12' r='1' fill='%2340344d'/%3E%3C/svg%3E") 3 2,auto}
:root[data-cat-decorations] #viewport[data-tool="select"],:root[data-cat-decorations] #viewport[data-tool="select"] #stage,:root[data-cat-decorations] #lefttoolbar .tool-btn{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2l2 23 6-6 5 10 4-2-5-10 8-1Z' fill='white' stroke='%2340344d' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5 8V3l5 4 5 1 4-3v9' fill='%23f0bad3' stroke='%2340344d' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='11' r='1' fill='%2340344d'/%3E%3Ccircle cx='15' cy='12' r='1' fill='%2340344d'/%3E%3C/svg%3E") 3 2,pointer}

/* Neutral workspace surfaces use the cat pointer even before the first canvas event. */
:root[data-cat-decorations] #viewport:not([data-cursor]),:root[data-cat-decorations] #viewport:not([data-cursor]) svg,:root[data-cat-decorations] #viewport:not([data-cursor]) svg *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2l2 23 6-6 5 10 4-2-5-10 8-1Z' fill='white' stroke='%2340344d' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5 8V3l5 4 5 1 4-3v9' fill='%23f0bad3' stroke='%2340344d' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='11' r='1' fill='%2340344d'/%3E%3Ccircle cx='15' cy='12' r='1' fill='%2340344d'/%3E%3C/svg%3E") 3 2,auto!important}