.apps-designer { margin-top:24px; padding:24px; }
.apps-designer-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.apps-designer h2 { font-size:24px; letter-spacing:-.02em; margin:4px 0 10px; }
.apps-designer h3 { font-size:14px; margin-bottom:12px; }
.apps-designer-eyebrow { font:11px var(--olf-font-mono); color:var(--olf-ink-muted); letter-spacing:.07em; }
.apps-designer-toolbar { display:grid; grid-template-columns:1fr 2fr auto; align-items:end; gap:14px; margin-bottom:14px; }
.apps-designer label { display:grid; gap:7px; min-width:0; font-size:12px; color:var(--olf-ink-secondary); }
.apps-designer .share-input { width:100%; min-width:0; min-height:40px; }
.apps-designer .btn { min-height:40px; padding:8px 12px; white-space:normal; }
.apps-designer [hidden] { display:none!important; }
.apps-designer [data-tone="error"] { color:var(--olf-danger); }
.apps-designer-body { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(260px,1.7fr) minmax(200px,1fr); gap:0; margin-top:18px; border:1px solid var(--olf-line); border-radius:var(--olf-radius-panel); overflow:hidden; }
.apps-designer-body>section { min-width:0; padding:18px; }
.apps-designer-components,.apps-designer-properties { background:var(--olf-paper-raised); }
.apps-designer-preview { background:var(--olf-paper-muted); border-inline:1px solid var(--olf-line); }
.apps-designer-component-list { display:grid; gap:8px; margin-top:14px; }
.apps-designer-component { display:grid; grid-template-columns:18px minmax(0,1fr) auto auto; align-items:center; gap:5px; border:1px solid var(--olf-line); border-radius:4px; padding:6px; background:var(--olf-paper); }
.apps-designer-component[data-selected="true"] { border-color:var(--olf-accent); }
.apps-designer-component input { width:16px; height:16px; accent-color:var(--olf-accent); }
.apps-designer-component .btn { min-height:32px; padding:5px; font-size:11px; }
.apps-designer-component .btn[aria-pressed] { text-align:left; border:0; background:transparent; justify-content:start; }
.apps-designer-preview-bar { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.apps-designer-preview-well { display:grid; gap:12px; margin-top:20px; padding:18px; border:1px solid var(--olf-line); border-radius:4px; background:var(--olf-paper-raised); }
.apps-designer-preview-component { display:grid; gap:7px; text-align:left; min-height:64px; padding:14px; background:var(--olf-paper); border:1px solid var(--olf-line); border-radius:4px; font:500 14px var(--olf-font-sans); color:var(--olf-ink); cursor:pointer; }
.apps-designer-preview-component span { font-size:12px; font-weight:400; color:var(--olf-ink-secondary); overflow-wrap:anywhere; }
.apps-designer-property-fields { display:grid; gap:18px; }
.apps-designer-footer { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.apps-designer-footer .form-hint { flex:1 1 200px; }
.apps-designer :is(button,input,select,a):focus-visible { outline:2px solid var(--olf-accent); outline-offset:3px; }
@media(max-width:1100px){.apps-designer-body { grid-template-columns:minmax(180px,1fr) minmax(240px,2fr); }.apps-designer-properties { grid-column:1/-1; border-top:1px solid var(--olf-line); }.apps-designer-property-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }.apps-designer-preview { border-right:0; }}
@media(max-width:700px){.apps-designer { padding:16px; }.apps-designer-toolbar,.apps-designer-body,.apps-designer-property-fields { grid-template-columns:minmax(0,1fr); }.apps-designer-preview { border:0; border-block:1px solid var(--olf-line); }.apps-designer-toolbar>button { justify-self:start; }}