/* Level 1: page navigation, no pill outlines. */
#panel .editor-sections{display:flex;gap:0;padding:0!important;margin:0 0 14px!important;border-bottom:1px solid var(--ui-line);background:transparent;overflow:visible}
#panel .editor-sections>button{position:relative;flex:1;min-height:40px!important;padding:6px 12px 10px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ui-muted);font-size:13px;font-weight:500;transform:none!important}
#panel .editor-sections>button.on{color:var(--ui-ink);font-weight:650}
#panel .editor-sections>button.on:before{content:'';position:absolute;bottom:-1px;left:25%;right:25%;height:2px;background:var(--ui-accent);border-radius:2px}
#panel .editor-sections>button:last-child{flex:0 0 40px;border-left:1px solid color-mix(in srgb,var(--ui-line) 60%,transparent)!important;margin-bottom:8px!important;padding-bottom:2px!important;min-height:30px!important}
/* Level 2: object switching and effect variants. */
#panel .target-tabs{display:flex;width:max-content;max-width:100%;gap:2px;padding:3px;margin:0 0 14px;border-radius:12px;background:color-mix(in srgb,var(--ui-tint) 45%,transparent);overflow-x:auto}
#panel .target-tabs>button{min-width:64px;min-height:32px;padding:6px 12px;border:0;border-radius:9px;font-size:11px;background:transparent;box-shadow:none;color:var(--ui-muted)}
#panel .target-tabs>button.on{background:var(--ui-chrome);color:var(--ui-ink);box-shadow:0 1px 4px #132d3010}
#panel .variant-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin:0 0 14px;padding:0;overflow:visible}
#panel .variant-options>button{white-space:normal;min-width:0;min-height:44px;padding:8px 6px;border-radius:12px;font-size:11px;line-height:1.35}
#panel .bubble-presets>button{display:flex;flex-direction:column;gap:7px;min-height:60px}
.bubble-presets>button:before{content:'';display:block;width:23px;height:14px;border-radius:5px;background:linear-gradient(145deg,#e4eeeacc,#7ca59d88);border:1px solid #f9ffffaa}
.bubble-presets>button:nth-child(2):before{background:linear-gradient(145deg,#58616a,#26343b);border-color:#738289;border-radius:2px}
.bubble-presets>button:nth-child(3):before{background:repeating-linear-gradient(0deg,#e6d4ae 0 3px,#d6c7a1 3px 4px);border-color:#c3af83;border-radius:2px;transform:rotate(-6deg)}
/* Level 3: named parameter groups, with compact rows inside. */
.control-section{border:0;border-top:1px solid color-mix(in srgb,var(--ui-line) 65%,transparent);margin:0;padding:0 0 4px;min-width:0}
.control-section>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;min-height:42px;padding:9px 0;color:var(--ui-ink);font-size:12px;font-weight:550;line-height:1.4;user-select:none}
.control-section>summary::-webkit-details-marker{display:none}.control-section>summary:after{content:'+';font-size:16px;font-weight:350;color:var(--ui-muted)}.control-section[open]>summary:after{content:'−'}
.control-section>summary:focus-visible{outline:2px solid var(--ui-accent);outline-offset:1px;border-radius:4px}
.control-section>.chips{padding:2px 0 8px!important;margin-bottom:4px!important;gap:6px}
.control-section>.slider-row{min-height:46px;margin:0;gap:12px;grid-template-columns:84px minmax(0,1fr) 32px}.control-section .slider-row label{font-size:11px}.control-section .slider-row input{margin:18px 0}
.control-section .text-edit{margin:2px 0 12px}.control-section .type-entries{margin:0 0 12px}.control-section .font-entry{min-height:42px;border-radius:12px;font-size:12px}
.parameter-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:2px 0 10px;font-size:11px}.parameter-choice>span{flex:1;color:var(--ui-muted)}.parameter-choice .theme-select{min-width:120px;max-width:70%;margin:0;min-height:36px;border-radius:10px;font-size:12px}
.frame-material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:12px}.frame-material{display:flex;align-items:center;gap:8px;width:100%;height:48px;padding:7px 9px;border:1px solid var(--ui-line);border-radius:12px;text-align:left;font-size:11px;background:transparent;box-shadow:inset 0 1px 0 #ffffff24}.frame-material.on{border-color:var(--ui-accent);background:color-mix(in srgb,var(--ui-tint) 60%,transparent)}
.material-swatch{display:block;flex:0 0 28px;width:28px;height:30px;border-radius:6px;border:1px solid #ffffff50;background:var(--material-color)}
.material-swatch.frost{background:linear-gradient(140deg,#ffffffc4,#9abcb5),var(--material-color)}.material-swatch.gel{background:repeating-radial-gradient(ellipse at 40% 55%,#a8c9bf 0 3px,#e8f5e0 4px,#b9d7cc 6px)}.material-swatch.film{background:linear-gradient(135deg,#d4b7cf,#adcfd5,#e0d6ad,#bab7dc)}.material-swatch.prism{background:repeating-linear-gradient(65deg,#d8eaf0 0 5px,#8eb0c0 6px 10px,#c5dce4 11px 13px)}
.material-swatch.graphite{background:radial-gradient(#a1a5a270 .6px,transparent .8px) 0 0/3px 3px,#283538}.material-swatch.leather{background:repeating-linear-gradient(45deg,#69564b55 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,#bd9f7e30 0 1px,#3b3538 1px 4px)}.material-swatch.velvet-card{background:linear-gradient(140deg,#776b91,#303647 60%,#161c2e)}.material-swatch.brushed{background:repeating-linear-gradient(0deg,#7b8b9050 0 1px,#3c484b 1px 3px)}
.material-swatch.cotton{background:radial-gradient(#846c4240 .5px,transparent .8px) 0 0/4px 3px,#efe1b9}.material-swatch.vellum{background:linear-gradient(125deg,#eef0dfaa,#b6c2bb99)}.material-swatch.torn{background:repeating-linear-gradient(35deg,#b99d7740 0 1px,#e8d1ae 1px 5px);clip-path:polygon(4% 3%,26% 0,51% 4%,76% 0,97% 4%,100% 35%,95% 68%,100% 96%,72% 100%,47% 95%,22% 100%,0 94%,4% 60%,0 33%)}.material-swatch.ruled{background:repeating-linear-gradient(0deg,#f0e7ce 0 5px,#9eb8ba 5px 6px)}
#panel .selection-methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}#panel .selection-methods button{min-height:42px;font-size:11px;border-radius:12px;padding:8px;justify-content:flex-start;gap:9px}
#panel .selection-operations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#panel .selection-operations button{min-width:0;padding:7px!important;border-radius:10px;font-size:11px}
.control-section .selection-adjust{width:100%;margin:4px 0 10px}.control-section .swatch-row{padding:3px 3px 12px;gap:9px}.control-section .swatch-row .color{width:25px;height:25px}
@media(max-width:359px){.frame-material{gap:6px;padding:6px;font-size:10px}.material-swatch{width:24px;flex-basis:24px;height:28px}.control-section>.slider-row{grid-template-columns:70px minmax(0,1fr) 28px;gap:8px}#panel .editor-sections>button{padding-inline:7px!important;font-size:12px}}
.structured-edit .panel-head{display:none}#panel .bubble-presets>button{min-height:44px;flex-direction:row;gap:6px}#panel .bubble-presets>button:before{width:16px;height:12px;flex:none}.structured-edit .panel{padding-top:12px}.structured-edit .control-section>summary{min-height:36px;padding-block:7px}.structured-edit #panel .variant-options{margin-bottom:10px}
.type-sheet .type-mode .chip{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:12px!important;color:var(--ui-muted)}.type-sheet .type-mode .chip[aria-pressed=true]{color:var(--ui-ink);border-bottom:2px solid var(--ui-accent)!important}.type-languages{background:color-mix(in srgb,var(--ui-tint) 40%,transparent);padding:2px;border-radius:10px}.type-sheet .type-languages .chip{border:0;border-radius:8px;background:transparent;box-shadow:none}.type-sheet .type-languages .chip.on{background:var(--ui-chrome)}
#panel .editor-sections>button:last-child.on:before{display:none}

/* Keep the focused text field visible when it lives inside a semantic group. */
.app.typing #panel>.typing-content{display:block!important;margin:0!important;padding:0!important;border:0;box-shadow:none}
.app.typing #panel>.control-section.typing-content>summary,.app.typing #panel>.control-section.typing-content>:not(.text-edit){display:none!important}
.app.typing #panel>.typing-content .text-edit{margin:0;display:flex;min-width:0}
.app.typing #panel .text-edit textarea{min-width:0;flex:1}
.app.typing #panel>:not(.typing-content){display:none!important}.app.typing #panel{scroll-behavior:auto;padding-top:16px!important}.app.typing #panel>.typing-content .text-edit{margin:0!important}