#sonic.view.active { grid-template-rows: auto minmax(0, 1fr) !important; gap: 10px !important; }
#sonic .market-hero { min-height: 0 !important; padding: 10px 14px !important; }
#sonic .market-hero p:not(.eyebrow), #sonic .market-status { display: none; }
#sonic .sonic-layout { grid-template-columns: minmax(210px, 21%) minmax(0, 1fr) !important; gap: 14px; min-height: 0; }
#sonic .sonic-layout > .panel { min-width: 0; overflow: hidden; }
#sonic .sonic-layout > .panel:last-child { padding: 0 !important; border: 0; background: transparent; clip-path: none; }
#sonic .sonic-layout > .panel:last-child > .panel-header { margin: 0; padding: 8px 0; }
#sonic .panel-header p { display: none; }
#sonic .panel-header h2 { font-size: 18px; }
#sonic .sonic-program-list { overflow: auto; min-height: 0; }
#sonic .sonic-program { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto; height: auto !important; padding: 12px; min-height: 165px !important; text-align: left; overflow: visible; }
#sonic .sonic-program > div > span, #sonic .sonic-program strong { display: block; margin-bottom: 5px; }
#sonic .sonic-color-signature { display: inline-flex !important; align-items: center; gap: 5px; }
#sonic .sonic-color-signature i { display: block; width: 14px; height: 5px; background: var(--swatch); border-radius: 2px; box-shadow: 0 0 6px color-mix(in srgb, var(--swatch) 35%, transparent); }
#sonic .sonic-selected-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#sonic .sonic-program strong { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
#sonic .sonic-program span, #sonic .sonic-program small, #sonic .sonic-program em { font-size: 11px; line-height: 1.45; white-space: normal; }
#sonic .sonic-bars { display: none; }
#sonic .sonic-detail { display: flex !important; flex-direction: column; gap: 10px; padding: 0; overflow: auto; }
#sonic .sonic-style-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; border-bottom: 1px solid #23434a; padding: 0 0 8px; }
#sonic .sonic-style-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 18px; color: #9bb8c0; font: inherit; font-size: 13px; cursor: pointer; }
#sonic .sonic-style-tabs button[aria-pressed="true"] { color: #7effd9; border-color: #7effd9; background: #10282b; }
#sonic .sonic-style-tabs button:focus-visible { outline: 2px solid #7effd9; outline-offset: -2px; }
#sonic .sonic-visual-frame { flex: 1 0 auto; height: max(300px, calc(100dvh - 480px)); min-height: 300px !important; border: 0; clip-path: none; box-shadow: none; background: #03070d; }
#sonic .sonic-canvas { position: absolute; inset: 0; min-height: 0 !important; width: 100%; height: 100%; cursor: grab; }
#sonic .sonic-canvas:active { cursor: grabbing; }
#sonic .sonic-frequency-legend { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; pointer-events: none; color: #dceaf0; font: 12px var(--font-data); }
#sonic .sonic-frequency-legend span { display: inline-flex; align-items: center; gap: 6px; background: #03070dcc; padding: 5px; }
#sonic .sonic-frequency-legend i { width: 10px; height: 10px; border-radius: 50%; }
#sonic .sonic-equation { bottom: 0; left: 0; right: 0; clip-path: none; border: 0; border-top: 1px solid #16323b; padding: 12px 16px; background: #061018e8; pointer-events: none; }
#sonic .sonic-equation strong { font-size: 13px; white-space: normal; }
#sonic .sonic-equation em { font-size: 11px; overflow-wrap: anywhere; white-space: normal; }
#sonic .sonic-preview-button { flex-shrink: 0; min-height: 40px; }
#sonic .sonic-specifications { flex-shrink: 0; padding: 0 0 12px; }
#sonic .sonic-specifications summary { padding: 12px 0; color: #b3c8cc; cursor: pointer; font-size: 13px; }
#sonic .sonic-specifications > div { margin-top: 12px; }
#sonic .scenario-actions { padding-top: 10px; display: flex; gap: 10px; }
#sonic .scenario-actions button { min-height: 40px; }
@media(max-width: 760px) {
  body:has(#sonic.active) { min-width: 0 !important; height: auto !important; overflow: auto !important; }
  body:has(#sonic.active) .app-shell { display: block !important; min-width: 0 !important; height: auto !important; }
  body:has(#sonic.active) .sidebar { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 12px; }
  body:has(#sonic.active) .sidebar-panel, body:has(#sonic.active) .sidebar-footer, body:has(#sonic.active) .topbar { display: none !important; }
  body:has(#sonic.active) .nav-tabs { display: flex; overflow: auto; }
  body:has(#sonic.active) .nav-button { flex: 0 0 auto; }
  body:has(#sonic.active) .main { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; padding: 10px !important; overflow: visible !important; }
  #sonic.view.active { height: auto !important; overflow: visible !important; }
  #sonic .sonic-layout { display: flex !important; flex-direction: column-reverse; overflow: visible; }
  #sonic .sonic-program-list { max-height: 300px; }
  #sonic .sonic-style-tabs button { padding: 9px 12px; }
  #sonic .sonic-equation { grid-template-columns: 1fr; gap: 3px; padding: 8px; }
  #sonic .sonic-visual-frame { height: 400px; }
  #sonic .climate-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}