:root{--surface-canvas: #f7f7f4;--surface-base: #ffffff;--surface-subtle: #f1f1ed;--surface-inverse: #1d1f1c;--text-primary: #1d1f1c;--text-secondary: #5f635d;--text-tertiary: #858a82;--text-inverse: #f7f7f4;--border-default: #dedfd9;--border-subtle: #e9eae5;--border-strong: #bfc2ba;--accent-primary: #596b47;--accent-hover: #4b5c3c;--accent-subtle: #e8ede2;--accent-contrast: #ffffff;--success: #3f6d4a;--success-subtle: #e6f0e8;--warning: #8a6928;--warning-subtle: #f4ecd9;--danger: #a04b43;--danger-subtle: #f6e7e4;--info: #4d657d;--info-subtle: #e6edf2;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px}*{box-sizing:border-box}body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.5}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.app-shell{display:flex;min-height:100vh}.rail{width:56px;flex:none;background:var(--surface-inverse);color:var(--text-inverse);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px}.rail button{width:40px;height:40px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:inherit;font-size:13px;cursor:pointer}.rail button[aria-current=page]{background:#ffffff1f;border-color:#fff3}.sidebar{width:264px;flex:none;background:var(--surface-base);border-right:1px solid var(--border-subtle);padding:16px;display:flex;flex-direction:column;gap:16px}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface-base);border-bottom:1px solid var(--border-subtle)}.studio-grid{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(280px,340px);gap:12px;padding:12px 16px;flex:1}.panel{background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:12px;min-width:0}.panel h2{font-size:13px;margin:0 0 8px;color:var(--text-secondary);font-weight:600}.preview-frame{width:100%;height:520px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:#fff}.preview-frame.narrow{max-width:420px;margin:0 auto;display:block}.preview-frame.medium{max-width:820px;margin:0 auto;display:block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-base);color:var(--text-primary);font-size:14px;cursor:pointer}.btn-primary{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--accent-contrast);min-width:120px}.btn-primary:hover{background:var(--accent-hover)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-destructive{color:var(--danger);border-color:var(--danger)}.input,.textarea,.select{width:100%;padding:8px 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font:inherit;background:var(--surface-base);color:var(--text-primary)}.textarea{min-height:88px;resize:vertical}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.field label{font-size:12px;font-weight:600}.field-error{color:var(--danger);font-size:12px}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--border-default);background:var(--surface-subtle)}.badge-ready{background:var(--success-subtle);color:var(--success);border-color:var(--success)}.badge-warn{background:var(--warning-subtle);color:var(--warning);border-color:var(--warning)}.badge-block{background:var(--danger-subtle);color:var(--danger);border-color:var(--danger)}.badge-prod{background:var(--surface-inverse);color:var(--text-inverse)}.env-banner{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong)}.env-preview{background:var(--info-subtle);color:var(--info)}.env-production{background:var(--surface-inverse);color:var(--text-inverse)}.row-list{list-style:none;margin:0;padding:0}.row-list li{display:flex;justify-content:space-between;gap:8px;padding:8px 4px;border-bottom:1px solid var(--border-subtle)}.muted{color:var(--text-secondary)}.small{font-size:12px}.alert{border:1px solid var(--border-default);border-left:4px solid var(--info);padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-base);margin-bottom:8px}.alert-error{border-left-color:var(--danger)}.alert-warn{border-left-color:var(--warning)}.skeleton{background:var(--surface-subtle);border-radius:var(--radius-sm);min-height:16px;margin:6px 0}.composer{display:flex;flex-direction:column;gap:8px}.tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}.tabs button{border:1px solid var(--border-default);background:var(--surface-base);border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer}.tabs button[aria-selected=true]{background:var(--accent-subtle);border-color:var(--accent-primary)}.mobile-nav{display:none}@media (max-width: 1100px){.studio-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.studio-grid .panel:last-child{grid-column:1 / -1}}@media (max-width: 767px){.sidebar,.rail{display:none}.studio-grid{grid-template-columns:minmax(0,1fr)}.mobile-nav{display:flex;gap:4px;padding:8px;background:var(--surface-base);border-top:1px solid var(--border-subtle);position:sticky;bottom:0}.mobile-nav button{flex:1;min-height:44px}.preview-frame{height:420px}.desktop-only{display:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}