/* Dark studio chrome. Artwork colors stay independent from the interface. */
.transform-box{background:var(--input);border:1px solid var(--line);border-radius:8px;padding:14px!important;margin-bottom:16px}.transform-box .section-title{margin-bottom:12px}.attribute-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.attribute-grid .field-label{min-width:0}.properties .field-label input[type=number]{width:100%;min-width:0;padding:8px;border:1px solid #3c4957;border-radius:5px;background:var(--surface);color:var(--ink)}.transform-box .rotation-control{margin:12px 0}.transform-box .field-label{font-size:10px;margin-bottom:10px}.transform-note{font-size:10px;line-height:1.5;color:var(--muted);margin:4px 0 10px}.checkbox-field{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:11px}.checkbox-field input{accent-color:var(--accent)}.shape-preview.rounded-rect{border-radius:12px}.shape-preview.triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.shape-preview.diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.shape-preview.star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 95%,50% 73%,21% 95%,32% 57%,2% 35%,39% 35%)}.shape-preview.hexagon{clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%)}.shape-preview.arrow{clip-path:polygon(0 30%,60% 30%,60% 0,100% 50%,60% 100%,60% 70%,0 70%)}#panel-background>.property-section{margin-top:24px}#shapeProperties .field-label{margin-top:12px}
.document-name{position:relative;min-width:0}.project-name-row{display:flex;align-items:center;gap:4px}.project-name-row input{min-width:0}.project-menu{position:absolute;top:calc(100% + 12px);left:0;width:310px;max-width:calc(100vw - 24px);padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 36px #0007;z-index:50}.project-menu-caption{font-size:11px;color:var(--muted);margin:16px 0 8px}.project-list{max-height:300px;overflow-y:auto}.project-row{display:flex;align-items:center;gap:6px;border-radius:6px}.project-row.active{background:#17364d}.project-choice{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:12px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.project-choice:hover{background:#ffffff08}.project-row .icon-button{flex-shrink:0}.project-row.active .project-choice{color:#90caf9}@media(max-width:650px){.project-menu{position:fixed;top:64px;left:12px;right:12px;width:auto}.project-name-row input{width:90px}.project-name-row{gap:0}}
.carousel-variables h2{font-size:14px;margin:0 0 16px}.carousel-variables #carouselFields{display:grid;gap:14px}.carousel-variables textarea{resize:vertical;min-height:54px}.carousel-variables{border-bottom:1px solid var(--line);padding-bottom:20px}
:root{color-scheme:dark;--ink:#eef2f6;--text:#d7dfe7;--muted:#a0acb8;--line:#31363b;--green:#2196f3;--paper:#17191e;--accent:#2196f3;--surface:#1e2228;--input:#252a31}
body{background:var(--paper)}
.topbar,.rail,.library,.properties{background:var(--surface)}
.brand-mark{background:var(--accent);color:#081d2d}.brand-studio{color:#9aaebe}
.header-divider{background:var(--line)}
.document-name input{color:var(--ink)}
.save-state{color:#9cafbd}
.avatar{background:#163b57;color:#bbdefb;border-color:#213344}
.button{background:var(--input);color:#dbe5ed}
.button.primary{background:var(--accent);color:#081d2d;font-weight:650}
.button.primary:hover{background:#64b5f6}
.button.outline{border-color:#3d4955;color:#c5d2df}
.button.outline:hover,.button.subtle:hover,.icon-button:hover{background:#2d3945}
.rail-item{color:#a3afba}.rail-item.active{background:#17364d;color:#90caf9}.rail-item:hover{background:#283746}
.help-dot{color:#aebdcc;border-color:#445362}
.search{background:var(--input);color:#9cadbd;border-color:#364452}.search input{color:#e1eaf2}.search input::placeholder{color:#8d9cac}
.filter-tabs{flex-wrap:wrap;gap:6px}.filter-tabs button{background:transparent;color:#adbdcb;border-color:#384755}.filter-tabs button.selected{background:var(--accent);border-color:var(--accent);color:#081d2d}
.section-caption>span{color:#94a5b5}.template-card>span{color:#c0cedb}.template-card .template-kind{color:#91a3b3}
.template-card.active canvas{border-color:var(--accent);box-shadow:0 0 0 2px #17364d}.template-card:hover canvas{border-color:#64b5f6}
.template-card.wide-template{grid-column:1/-1}.template-card.wide-template canvas{aspect-ratio:16/9}
.library-tip{background:#222e3a;border-color:#344657}.library-tip>span{color:var(--accent)}.library-tip p{color:#a0b3c3}
.library-footer{color:#97a9b9}.status-dot{background:var(--accent)}
.workspace{background:#15181c}.workspace-toolbar{border-color:#2c3236}.breadcrumb{color:#98a8b6}.slash{color:#536779}.workspace-toolbar strong{color:#becfdd}
.icon-button svg{color:#acbfd0}
.canvas-area{background-image:radial-gradient(#303d4a .65px,transparent .65px)}
.artboard-label{color:#b4c7d7}.artboard-label>span:last-child,.muted{color:#91a6b8}
#artboard{box-shadow:0 15px 50px #0005}
.workspace-footer{border-color:#2a3541;color:#93a8b9}.zoom-controls button{color:#bcd2e3}
input[type=range]{accent-color:var(--accent)}
.small-badge,.selection-indicator{background:#17364d;color:#90caf9}
.section-title svg{color:#a9c2d5}.field-label,.dimension-inputs label,.phone-note{color:#a5b8ca}
.field-label select,.field-label textarea{background:var(--input);border-color:#3c4957;color:#dce7f0}
.field-label select:disabled,.field-label textarea:disabled{color:#708295}
.dimension-inputs label>div,.size-field{background:var(--input);border-color:#3c4957}
.dimension-inputs input,.size-field input{background:transparent;color:#d8e8f5}
.dimension-inputs label span,.size-field span{color:#9fb5c9}.dimension-cross{color:#96aec3}
.format-button{background:var(--input);border-color:#3c4957;color:#d8e8f5}.format-button.active{background:#173f5e;border-color:#42a5f5;color:#bbdefb}
input[type=color]{background:var(--input);border-color:#3f5163}
.alignment-buttons{border-color:#3c4957}.alignment-buttons button{background:var(--input);color:#a1b8cc}.alignment-buttons button+button{border-color:#3c4957}.alignment-buttons button.active{background:#17364d;color:#90caf9}
.opacity-label>span{color:#bfd8eb}.layer-controls button{color:#abc3d7}
.pro-tip{color:#bfd5e8}.pro-tip>span{color:var(--accent)}.pro-tip p{color:#98aec2}
.text-presets button,.shape-grid button{background:var(--input);border-color:#354655;color:#d3e5f4}.shape-grid button:hover,.text-presets button:hover{background:#283c4d}
.shape-preview{background:#64b5f6}.shape-preview.phone{border-color:#8294a5;background:linear-gradient(145deg,#bbdefb,#2196f3)}.shape-preview.phone:before{display:none}
.upload-zone{background:#202f3c;border-color:#4b7597}.upload-zone.drag-over{background:#1c4566}.upload-zone span{color:#9ab4ca}
.background-swatches{grid-template-columns:repeat(4,1fr);gap:12px}.background-swatches button{height:44px;border:2px solid #ffffff18;box-shadow:0 2px 6px #0003}.background-swatches button:hover{transform:translateY(-2px);border-color:#fff9}.background-swatches button.active{outline:2px solid #90caf9;outline-offset:3px}
.palette-label{font-size:10px;line-height:1.6;color:#a0b7cc;margin:22px 0 12px}
dialog{background:var(--surface);border-color:#3b4d5e;color:var(--ink)}dialog::backdrop{background:#070b12b8}dialog p{color:#a7bed2}.export-summary{color:#b4cbdf}
.toast{background:#90caf9;color:#081d2d;box-shadow:0 6px 30px #0005}
.rotation-control{margin-bottom:20px}.rotation-control>.field-label{margin-bottom:8px}.rotation-row{display:flex;align-items:center;gap:6px}.rotation-row .icon-button{color:#bdd9ef;border:1px solid #3c4957;font-size:21px;flex-shrink:0;height:33px;width:30px}.rotation-value{display:flex;align-items:center;gap:4px;min-width:0;flex:1;padding:8px;background:var(--input);border:1px solid #3c4957;border-radius:5px}.rotation-value input{background:transparent;border:0;width:100%;min-width:0;font-size:11px;color:#d8e8f5}.rotation-value span{font-size:11px;color:#a3bace}.rotation-reset{background:transparent;border:0;font-size:10px;color:#90caf9;padding:4px}.rotation-control>input{display:block;width:100%;height:3px;margin:14px 0 0}
@media(max-width:650px){.template-card.wide-template{grid-column:span 3}.template-card.wide-template canvas{max-height:230px;object-fit:contain;background:#161a20}.background-swatches{grid-template-columns:repeat(6,1fr)}.properties{border-color:var(--line)}}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline-color:var(--accent)}
.phone-range,.opacity-label input,.zoom-controls input{accent-color:var(--accent)}
.shape-grid .store-badge-button{grid-column:1/-1;padding:20px 12px;gap:12px}.store-badge-button canvas{display:block;width:150px;max-width:100%;height:auto}
.carousel-form{display:grid;gap:16px}.carousel-form .field-label{margin:0}.carousel-form .panel-note{margin:0;line-height:1.6}.carousel-form input{width:100%;min-width:0;padding:12px;border:1px solid #3c4957;border-radius:6px;background:var(--input);color:var(--ink);font:inherit}.carousel-pages{display:flex;gap:0;margin:12px 0 20px;overflow:hidden;border-radius:6px}.carousel-page{flex:1;min-width:0;padding:0;border:0;background:var(--input);color:var(--ink);text-align:center;font-size:10px}.carousel-page canvas{display:block;width:100%;height:auto}.carousel-page span{display:block;padding:10px 2px;border-bottom:3px solid transparent}.carousel-page[aria-pressed=true] span{border-color:var(--accent);background:#17364d;color:#90caf9}.carousel-page:hover span{background:#17364d}