/* Figma 3:11 tokens deliberately reuse the existing shared palette. */
.studio-layout .app-header{height:64px;padding:0 16px;gap:24px}
.studio-layout .brand{font-size:15px;letter-spacing:0;gap:12px;white-space:nowrap}
.studio-layout .brand small{display:none}
.studio-layout .brand-symbol{width:24px;height:26px}
.studio-layout .header-center{display:flex;flex:1;min-width:0;gap:20px}
.studio-layout .studio-project-identity{min-width:0}
.studio-layout .studio-project-identity h1{font:500 15px/1.45 var(--sans);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-layout .studio-project-identity>.eyebrow,.studio-layout .studio-project-identity>p{display:none}
.studio-layout .project-actions{margin:0;max-width:none;align-self:auto;flex:1;justify-content:space-between}
.studio-layout .save-state{font-size:11px;max-width:240px}
.studio-layout .history-controls{border:0;gap:8px}
.studio-layout .history-controls .icon-button{width:36px;height:34px;border:1px solid var(--line);background:var(--surface)}
.studio-layout #studio-preview-font{height:34px;padding:0 12px}
.studio-layout .header-actions{gap:8px}
.studio-layout .header-actions button{font-size:11px}
.studio-layout .workspace{--companion-width:360px;grid-template-columns:204px minmax(0,1fr) var(--companion-width);min-height:calc(100dvh - 64px);max-width:none;position:relative}
.studio-layout .left-sidebar{background:var(--surface);border:0;min-width:0}
.studio-stage-nav{position:sticky;top:0;min-height:calc(100dvh - 64px);display:flex;flex-direction:column;padding:20px;gap:6px}
.studio-nav-label{font-size:10px;color:var(--muted);margin-bottom:8px;line-height:1.45}
.studio-stage-link{display:block;text-align:left;width:100%;font-size:12px;line-height:1.45;padding:12px 10px;border-radius:6px;white-space:pre-wrap}
.studio-stage-link[aria-current=step]{color:var(--blue);background:var(--soft-blue);font-weight:600}
.studio-substage{font-size:11px;padding:6px 10px 6px 24px;color:var(--muted)}
.studio-stage-link[data-stage=outline]{color:var(--blue)}
.studio-nav-footer{margin-top:auto;padding-top:60px;font-size:11px;line-height:1.5}
.studio-nav-footer>strong{display:block;border-top:1px solid var(--line);padding-top:16px;font-weight:500}
.studio-nav-footer>p{color:var(--muted);margin:4px 0 14px}
.studio-layout .sidebar-footer{padding:16px 10px 0;line-height:1.5}
.studio-layout .main-panel{padding:26px;display:flex;flex-direction:column;gap:16px;min-width:0}
.studio-layout .project-heading{margin:0;min-height:59px;align-items:flex-start;order:0}
.studio-layout .project-heading h1{font:600 23px/1.45 var(--sans);letter-spacing:0}
.studio-layout .project-heading p{font-size:12px;line-height:1.45;margin-top:0}
.studio-layout .project-heading>.editor-button{min-width:130px;padding:11px 16px}
.studio-layout .studio-stage-panel{order:1;min-width:0}
.studio-layout #studio-stage-glyphs{order:5}
.studio-layout .studio-source-details{order:1;font-size:11px;line-height:1.45}
.studio-source-details>summary,.studio-reference-tools>summary,.studio-attachments>summary,.studio-view-options>summary,.studio-clipboard>summary{cursor:pointer;color:var(--muted);padding:6px 0;line-height:1.5}
.studio-layout .source-toolbar{background:var(--surface);padding:12px;border:1px solid var(--line);border-radius:6px;margin:8px 0 0}
.studio-layout .canvas-toolbar>.source-field{display:flex;align-items:center;gap:6px;padding:0}
.studio-layout .canvas-toolbar>.source-field>label{display:none}
.studio-layout .canvas-toolbar>.source-field select{width:95px;padding:10px;font-size:11px}
.studio-layout .canvas-toolbar #source-style-label{font-size:10px;max-width:90px}
.studio-layout .canvas-toolbar>.studio-source-details{position:relative;font-size:10px}
.studio-layout .canvas-toolbar>.studio-source-details[open]{flex-basis:100%;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.studio-layout .canvas-toolbar>.studio-source-details[open]>#weight-master-root{max-height:360px;overflow:auto}
.studio-layout .workbench{order:2;border:0;background:transparent;overflow:visible;border-radius:0}
.studio-layout .workbench-toolbar{display:none}
.studio-layout #glyph-panel{display:flex;flex-direction:column;gap:12px}
.studio-layout .canvas-toolbar{padding:0;min-height:42px;gap:12px;flex-wrap:wrap;order:0}
.studio-layout .glyph-identity{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);min-height:40px}
.studio-layout .glyph-identity>span:first-child{font:500 13px var(--sans)}
.studio-layout .canvas-options{gap:12px}
.studio-layout .canvas-options label{font-size:11px}
.studio-layout .studio-group-bar{display:flex;align-items:center;gap:8px;margin-left:auto}
.studio-group-bar label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.studio-group-bar select{padding:10px;font-size:11px;max-width:185px}
.studio-view-options{position:relative;font-size:11px}
.studio-view-options[open]>.editor-view-shelf{position:absolute;right:0;top:28px;width:280px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 25px #26272215;z-index:5}
.studio-layout .glyph-canvas{order:2;height:530px;min-height:320px;background:repeating-linear-gradient(to bottom,var(--surface) 0,var(--surface) 27px,var(--paper) 27px,var(--paper) 28px);border:1px solid var(--line);border-radius:8px}
.studio-layout .glyph-canvas #glyph-path{fill:var(--ink)}
.studio-layout .glyph-guide{stroke:var(--line);stroke-dasharray:none;opacity:1}
.studio-layout .glyph-guide.baseline{stroke:var(--blue);opacity:.65}
.studio-layout .glyph-guide-label{font-family:var(--sans);fill:var(--muted)}
.studio-layout .studio-drawing-tools{position:absolute;left:14px;top:90px;display:flex;flex-direction:column;gap:4px;padding:5px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.studio-drawing-tools button{width:30px;height:32px;font-size:11px;color:var(--muted);position:relative;border-radius:3px}
.studio-drawing-tools button[aria-pressed=true]{color:var(--blue);background:var(--soft-blue)}
.studio-tool-label{position:absolute;left:37px;top:0;display:none;white-space:nowrap;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:4px;z-index:2}
.studio-drawing-tools button:hover .studio-tool-label,.studio-drawing-tools button:focus-visible .studio-tool-label{display:block}
.studio-layout .studio-canvas-bottom{pointer-events:auto;align-items:center;justify-content:flex-start;gap:10px;font:10px var(--sans)}
.studio-canvas-bottom #glyph-edit-hint{margin-right:auto;max-width:55%}
.studio-canvas-bottom #glyph-coordinates{display:none}
.studio-canvas-bottom .editor-button{padding:4px 6px;border:0;background:transparent}
.studio-layout .editor-tool-help{order:3;padding:0;margin:0;font-size:11px;line-height:1.5;color:var(--muted)}
.studio-layout .studio-tool-help,.studio-layout .studio-glyph-review{order:6;font-size:11px;color:var(--muted)}
.studio-tool-help>summary,.studio-glyph-review>summary{cursor:pointer;padding:6px 0}
.studio-layout .studio-tool-help[open]>.editor-tool-help{padding:12px;background:var(--surface);border-radius:6px}
.studio-layout .component-navigation{order:1}
.studio-layout .component-navigation:has(>[hidden]):not(:has(>:not([hidden]))){display:none}
.studio-layout .glyph-draft-bar{order:4;border:1px solid var(--line);border-radius:6px}
.studio-layout .selection-inspector{order:5;border:0;background:var(--surface);border-radius:6px;padding:12px;min-width:0}
.studio-layout .selection-heading{font-size:11px;padding:0;gap:12px}
.studio-layout .studio-tool-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.studio-tool-heading h2{font-size:12px}
.studio-layout .selection-sections{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-top:10px}
.studio-layout .selection-sections>details{min-width:130px;flex:1;border:0;margin:0}
.studio-layout .selection-sections>details[open]{flex-basis:100%}
.studio-layout .selection-sections>details>summary{font-size:11px;padding:6px 0}
.studio-layout .workspace:not(.studio-tool-expanded) .selection-inspector{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 12px}
.studio-layout .workspace:not(.studio-tool-expanded) .studio-tool-heading{display:none}
.studio-layout .workspace:not(.studio-tool-expanded) .selection-heading{flex:1;min-width:180px}
.studio-layout .workspace:not(.studio-tool-expanded) .selection-sections{display:contents}
.studio-layout .workspace:not(.studio-tool-expanded) .selection-sections>details{flex:0 1 auto;min-width:0}
.studio-layout .workspace:not(.studio-tool-expanded) .selection-sections>details[open]{flex:1 0 100%}
.studio-layout .workspace:not(.studio-tool-expanded) .selection-inspector>#editor-error{width:100%}
.studio-layout .editor-tool-shelf{width:100%;padding:0;background:transparent;border:0}
.studio-layout .editor-note{font-size:11px;line-height:1.55}
.studio-tool-reference{margin:12px 0 0;border-top:1px solid var(--line);padding-top:8px}
.studio-tool-reference>summary{font:500 11px/1.5 var(--sans);color:var(--muted);cursor:pointer}
.studio-tool-reference .editor-note{margin:10px 0}
.studio-layout .editor-clipboard-shelf{padding:10px 0;background:transparent}
.studio-layout .glyph-library{order:3;margin:0}
.studio-layout .glyph-library-heading h2{font:500 10px var(--sans);text-transform:uppercase;color:var(--muted)}
.studio-layout .glyph-library-heading{margin:0 0 12px}
.studio-layout .glyph-grid{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.studio-layout .glyph-cell{flex:0 0 57px;min-width:57px;height:68px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.studio-layout .glyph-cell.is-selected{background:var(--soft-blue);border-color:var(--blue);color:var(--blue)}
.studio-layout .studio-footer{order:6;font:10px var(--sans);padding:0;border:0;margin:0}
.studio-layout .sidebar-section,.studio-layout .project-section,.studio-layout .metadata-card,.studio-layout .export-card{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin:0 0 16px}
.studio-layout .studio-offstage{display:none!important}
.studio-layout .right-sidebar{padding:22px;border:1px solid var(--line);background:var(--surface);position:sticky;top:0;height:calc(100dvh - 64px);min-width:0;overflow-y:auto;overscroll-behavior:contain}
.studio-layout .assistant-card{padding:0;border:0;background:transparent;box-shadow:none}
.studio-layout .assistant-heading{display:flex;gap:10px;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.studio-layout .assistant-heading h2{font-size:15px;font-weight:600}
.studio-layout .assistant-heading>div{flex:1;min-width:0}
.studio-layout .assistant-heading>div>span{font-size:10px;color:var(--muted);line-height:1.5}
.studio-layout .spark-icon{background:transparent;padding:0;color:var(--blue);width:23px}
.studio-close-chat{font-size:24px;color:var(--muted);padding:0 3px;align-self:flex-start}
.studio-companion-context{padding:10px;border-radius:6px;background:var(--paper);font-size:11px;line-height:1.6;margin-bottom:16px}
.studio-layout .availability-label{font:500 10px var(--sans);margin:0 0 12px}
.studio-layout #assistant-intro{font-size:12px;line-height:1.5;margin:0 0 12px}
.studio-layout .suggestion-list{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.studio-layout .suggestion-list button{font-size:11px;padding:9px;border-radius:6px}
.studio-layout .assistant-card:has(#chat-history:not([hidden])) .suggestion-list,.studio-layout .assistant-card:has(#chat-history:not([hidden])) #assistant-intro{display:none}
.studio-layout .assistant-history{margin:0;padding:0;border:0}
.studio-layout .assistant-history>.eyebrow{font:500 9px var(--sans);margin:16px 0 12px}
.studio-layout #chat-messages{max-height:240px;display:flex;flex-direction:column;gap:16px}
.studio-layout .chat-message{padding:0;border:0;margin:0}
.studio-layout .chat-message.is-user{background:var(--soft-blue);padding:12px;border-radius:8px}
.studio-layout .chat-message>span{font:500 9px var(--sans);color:var(--muted)}
.studio-layout .chat-message>p{font-size:12px;line-height:1.5;margin-top:4px;white-space:pre-wrap}
.studio-layout .assistant-composer{margin-top:20px}
.studio-layout .assistant-input{border-radius:8px;padding:12px;align-items:flex-end}
.studio-layout .assistant-input textarea{font-size:12px;min-height:72px}
.studio-layout .assistant-input #ai-send{width:32px;min-width:32px;height:32px}
.studio-layout .ai-context,.studio-layout .provider-note{font:10px/1.5 var(--sans)}
.studio-attachments{font-size:11px;margin:10px 0}
.studio-layout .studio-chat-resize{position:absolute;top:0;bottom:0;left:0;width:6px;cursor:col-resize;touch-action:none}
.studio-chat-resize:after{content:'';position:absolute;top:45%;left:0;width:4px;height:38px;border-radius:2px;background:var(--line)}
.studio-chat-resize:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.studio-open-chat{position:sticky;top:0;grid-column:3;grid-row:1;align-self:start;height:calc(100dvh - 64px);width:52px;padding:24px 15px;background:var(--surface);border-left:1px solid var(--line);color:var(--blue);writing-mode:vertical-rl;font-size:12px;z-index:10;text-align:left}
.studio-layout .studio-chat-collapsed{grid-template-columns:204px minmax(0,1fr) 52px}
.studio-chat-collapsed>.right-sidebar{display:none}
.studio-proposal-card{padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:8px;margin:16px 0;font-size:11px;line-height:1.5}
.studio-proposal-card h3{font:600 15px/1.45 var(--sans);margin:8px 0}
.studio-proposal-card .eyebrow{font:600 9px var(--sans);color:var(--blue)}
.studio-proposal-comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
.studio-proposal-comparison svg{display:block;width:100%;height:96px;stroke:none}
.studio-proposal-comparison path:not([fill=none]){fill:var(--ink)}
.studio-proposal-comparison>div:last-child path:not([fill=none]){fill:var(--blue)}
.studio-layout .assistant-card .customer-credit-status{position:static;display:block;margin:16px 0 0;padding:12px;font-size:10px;background:var(--paper);border-radius:6px}
.studio-proposal-actions{display:flex;gap:8px;margin-top:12px}
.studio-layout .studio-tool-expanded #glyph-panel{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start}
.studio-tool-expanded .canvas-toolbar{grid-column:1/-1;grid-row:1}
.studio-tool-expanded .glyph-canvas{grid-column:2;grid-row:2;height:530px}
.studio-tool-expanded .selection-inspector{grid-column:1;grid-row:2/6;max-height:720px;overflow-y:auto;border:1px solid var(--line)}
.studio-tool-expanded .transform-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.studio-tool-expanded .transform-lock{grid-column:1/-1}
.studio-tool-expanded .component-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.studio-tool-expanded .studio-tool-heading>button{display:none}
.studio-tool-expanded .selection-heading{flex-wrap:wrap;gap:6px}
.studio-tool-expanded .glyph-draft-bar{grid-column:2;grid-row:3}
.studio-tool-expanded .component-navigation{grid-column:2;grid-row:4}
.studio-tool-expanded .studio-tool-help{grid-column:2;grid-row:5}
.studio-tool-expanded .studio-glyph-review{grid-column:1/-1;grid-row:6}
.studio-tool-expanded #glyph-review-root{grid-column:1/-1}
@media(max-width:1200px){
  .studio-layout .workspace{grid-template-columns:174px minmax(0,1fr) 310px}
  .studio-stage-nav{padding:16px 12px}
  .studio-layout .main-panel{padding:20px}
  .studio-layout .studio-chat-collapsed{grid-template-columns:174px minmax(0,1fr) 52px}
  .studio-layout .right-sidebar{padding:18px}
  .studio-layout .save-state{max-width:140px}
  .studio-layout .app-header{gap:16px}
  .studio-layout .studio-tool-expanded #glyph-panel{grid-template-columns:1fr}
  .studio-layout .studio-tool-expanded #glyph-panel>*{grid-column:1;grid-row:auto}
  .studio-tool-expanded .selection-inspector{max-height:none}
}
@media(max-width:1000px){
  .studio-layout .workspace,.studio-layout .studio-chat-collapsed{grid-template-columns:174px minmax(0,1fr)}
  .studio-layout .right-sidebar{position:fixed;z-index:20;top:auto;right:16px;bottom:16px;width:min(400px,calc(100vw - 32px));height:min(720px,calc(100dvh - 96px));border-radius:12px;box-shadow:0 12px 50px #26272230}
  .studio-layout .studio-chat-resize{display:none}
  .studio-open-chat{position:fixed;right:16px;bottom:16px;top:auto;width:auto;height:auto;writing-mode:horizontal-tb;padding:12px 16px;border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 12px #26272212}
  .studio-layout .header-center .save-state{display:none}
  .studio-layout .header-actions #first-font-open,.studio-layout .header-actions #owner-management-open{font-size:10px}
  .studio-layout .app-header .brand span{display:none}
}
@media(max-width:720px){
  .studio-layout .app-header{height:auto;min-height:64px;flex-wrap:wrap;padding:12px;gap:12px}
  .studio-layout .header-center{display:flex;gap:10px}
  .studio-layout .studio-project-identity{flex:1}
  .studio-layout .header-center .project-actions{flex:0 0 auto}
  .studio-layout .studio-project-identity h1{font-size:13px;max-width:145px}
  .studio-layout .header-actions{margin-left:auto}
  .studio-layout .header-actions #new-project-header{font-size:10px;padding:8px}
  .studio-layout .workspace,.studio-layout .studio-chat-collapsed{display:block}
  .studio-layout .left-sidebar{display:block;border-bottom:1px solid var(--line)}
  .studio-stage-nav{position:static;min-height:0;flex-direction:row;gap:4px;overflow:auto;padding:8px 12px}
  .studio-stage-nav>.studio-nav-label,.studio-stage-nav>.studio-substage{display:none}
  .studio-stage-nav>.studio-stage-link{white-space:nowrap;width:auto;font-size:11px;padding:10px}
  .studio-nav-footer{padding:0;margin:0;display:contents}
  .studio-nav-footer>strong,.studio-nav-footer>p,.studio-nav-footer>.sidebar-footer{display:none}
  .studio-nav-footer>.studio-stage-link{white-space:nowrap;width:auto;font-size:11px;padding:10px}
  .studio-layout .main-panel{padding:18px 12px;gap:12px}
  .studio-layout .project-heading h1{font-size:20px}
  .studio-layout .project-heading>.editor-button{min-width:0;padding:9px;font-size:11px}
  .studio-layout .glyph-canvas{height:420px}
  .studio-layout .studio-tool-expanded #glyph-panel{display:flex}
  .studio-layout .canvas-toolbar{gap:8px}
  .studio-layout .canvas-options{margin-left:auto}
  .studio-layout .studio-group-bar{margin-left:0}
  .studio-layout .source-toolbar{flex-wrap:wrap}
  .studio-layout .glyph-library-heading{flex-wrap:wrap}
  .studio-layout .right-sidebar{top:130px;right:0;bottom:0;width:100%;height:calc(100dvh - 130px);border-radius:14px 14px 0 0;padding:20px}
  .studio-layout #studio-preview-font{font-size:10px;padding:0 8px}
  .studio-layout #chat-messages{max-height:180px}
}