/* Editor controls use ZhaoUI; artwork and diagram canvases retain their own styles. */
body[data-cc-zhaoui="content"] { background:var(--zh-bg-subtle); color:var(--zh-text); font-family:var(--zh-font-sans); }
body[data-cc-zhaoui="content"] :is(.control-panel,.sidebar,.editor-card,.preview-9x16,.preview-3x4,.app-header,.header,.controls) { background:var(--zh-bg-elevated); border:1px solid var(--zh-border); border-radius:var(--zh-radius-lg); box-shadow:none; }
body[data-cc-zhaoui="content"] :is(.control-panel,.sidebar,.controls,.header-actions,.card-header) :is(button,.btn),
body[data-cc-zhaoui="content"] > .container-fluid .btn,
body[data-cc-tool="cut"] button,
body[data-cc-tool="mermaid"] button,
body[data-cc-tool="price"] .btn-modern-primary { border-radius:var(--zh-radius-md); box-shadow:none; }
body[data-cc-zhaoui="content"] :is(.control-panel,.sidebar,.controls,.header-actions,.card-header) :is(.btn-primary,.btn-success),
body[data-cc-tool="cut"] :is(.btn-primary,.btn-success),
body[data-cc-tool="mermaid"] button,
body[data-cc-tool="price"] .btn-modern-primary { background:var(--zh-color-primary); color:var(--zh-on-primary); border-color:var(--zh-color-primary); }
body[data-cc-zhaoui="content"] :is(.control-panel,.sidebar,.controls,.header-actions) :is(input:not([type="color"]):not([type="range"]):not([type="radio"]):not([type="checkbox"]),textarea,select) { border-color:var(--zh-border); border-radius:var(--zh-radius-md); }
body[data-cc-tool="card"] > .container > header h1,
body[data-cc-tool="xhs"] > .container > header h1 { background:none; color:var(--zh-text); -webkit-text-fill-color:var(--zh-text); }
body[data-cc-tool="card"] > .container > header h1::after,
body[data-cc-tool="xhs"] > .container > header h1::after { background:var(--zh-color-primary); }
body[data-cc-tool="zhishi"] > #app > div > header h1 { background:none; color:var(--zh-text); -webkit-text-fill-color:var(--zh-text); }
body[data-cc-tool="zhishi"] > #app > div > .bg-white { border:1px solid var(--zh-border); box-shadow:none; border-radius:var(--zh-radius-lg); }
body[data-cc-tool="zhishi"] .card { border:1px solid var(--zh-border); box-shadow:none; }
body[data-cc-tool="md"] { --primary-color:var(--zh-color-primary); --bg-body:var(--zh-bg-subtle); --border-color:var(--zh-border); }
body[data-cc-tool="mmd"] > .container-fluid > .row:first-child h1 { font-size:28px; font-weight:650; }
body[data-cc-tool="mmd"] > .container-fluid .card { border-color:var(--zh-border); border-radius:var(--zh-radius-lg); }
body[data-cc-tool="mermaid"] > h1 { font-size:28px; font-weight:650; margin:16px 0; }
body[data-cc-tool="mermaid"] > .container { min-width:0; }
/* The shared version bar needs space inside viewport-height editors in both modes. */
body:is([data-cc-tool="md"],[data-legacy-tool="md"]) { display:flex; flex-direction:column; }
body:is([data-cc-tool="md"],[data-legacy-tool="md"]) #cc-ui-switch { flex:none; margin:0; }
body:is([data-cc-tool="md"],[data-legacy-tool="md"]) .app-container { flex:1; min-height:0; height:auto; }
body:is([data-cc-tool="pic"],[data-legacy-tool="pic"]) .app-container { height:calc(100dvh - 104px); }
body:is([data-cc-tool="card"],[data-legacy-tool="card"]) .top-nav { position:static; margin-bottom:12px; }
body:is([data-cc-tool="cut"],[data-legacy-tool="cut"]) { flex-direction:column; }
body:is([data-cc-tool="cut"],[data-legacy-tool="cut"]) #cc-ui-switch { align-self:stretch; }
body:is([data-cc-tool="price"],[data-legacy-tool="price"]) #cc-ui-switch { flex-shrink:0; margin:0; }
@media(max-width:700px) {
 body:is([data-cc-tool="mermaid"],[data-legacy-tool="mermaid"]) > .container { flex-direction:column; height:auto; }
 body:is([data-cc-tool="mermaid"],[data-legacy-tool="mermaid"]) > .container > :is(textarea,.preview-container) { width:100%; height:360px; }
 body:is([data-cc-tool="mermaid"],[data-legacy-tool="mermaid"]) #preview { height:340px; }
 body:is([data-cc-tool="cut"],[data-legacy-tool="cut"]) .grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body:is([data-cc-tool="price"],[data-legacy-tool="price"]) { height:auto; min-height:100dvh; overflow:auto; }
 body:is([data-cc-tool="price"],[data-legacy-tool="price"]) > header { padding:12px; height:auto; gap:12px; flex-wrap:wrap; }
 body:is([data-cc-tool="price"],[data-legacy-tool="price"]) > .flex-1 { display:block; overflow:visible; }
 body:is([data-cc-tool="price"],[data-legacy-tool="price"]) aside { width:100%; height:auto; }
 body:is([data-cc-tool="price"],[data-legacy-tool="price"]) main { padding:16px; justify-content:flex-start; }
 body:is([data-cc-tool="md"],[data-legacy-tool="md"]) .app-header { height:auto; padding:12px; flex-wrap:wrap; gap:12px; }
 body:is([data-cc-tool="md"],[data-legacy-tool="md"]) .app-header .btn { padding:8px; }
}
body[data-cc-zhaoui="content"] .preview-panel { background:var(--zh-bg-elevated); border:1px solid var(--zh-border); box-shadow:none; }
body[data-cc-zhaoui="content"] :is(.panel-header,.compact-controls) { background:var(--zh-bg-elevated); border-color:var(--zh-border); }
body[data-cc-zhaoui="content"] :is(.panel-header,.compact-controls) .btn { background:var(--zh-bg-elevated); color:var(--zh-color-primary); box-shadow:none; border:1px solid var(--zh-border); }
body[data-cc-zhaoui="content"] :is(.panel-header,.compact-controls) .btn-primary { background:var(--zh-color-primary); color:var(--zh-on-primary); }
body[data-cc-zhaoui="content"] .nav-item.active { background:var(--zh-bg-subtle); border-color:var(--zh-color-primary); }

body[data-cc-tool="zhishi"] .from-primary { --tw-gradient-from:var(--zh-color-primary); }
body[data-cc-tool="zhishi"] .to-secondary { --tw-gradient-to:var(--zh-color-primary); }
body[data-cc-tool="zhishi"] .bg-primary { background:var(--zh-color-primary); }
body[data-cc-tool="zhishi"] .text-primary { color:var(--zh-color-primary); }
@media(max-width:700px) {
 body:is([data-cc-tool="card"],[data-legacy-tool="card"]) .top-nav { flex-wrap:wrap; gap:4px; padding:10px; }
 body:is([data-cc-tool="card"],[data-legacy-tool="card"]) .top-nav .nav-link { white-space:nowrap; padding:8px; }
}
body:is([data-cc-tool="mermaid"],[data-legacy-tool="mermaid"]) > .container > textarea { box-sizing:border-box; }
body:is([data-cc-tool="card"],[data-legacy-tool="card"],[data-cc-tool="xhs"],[data-legacy-tool="xhs"]) .preview-panel { min-width:0; overflow-x:auto; }

@media(max-width:700px) {
 body:is([data-cc-tool="mmd"],[data-legacy-tool="mmd"]) #editor { min-height:280px; height:280px !important; }
 body:is([data-cc-tool="mmd"],[data-legacy-tool="mmd"]) .container-fluid > .row:first-child .d-flex { flex-wrap:wrap; gap:12px; }
}