:root{font-family:var(--shopops-font-sans);color:var(--shopops-color-ink);background:var(--shopops-color-canvas);font-synthesis:none;--phone-width:390px;--control-size:44px;--header-height:52px;--toolbar-height:44px;--text-small:12px;--text-body:14px;--state-width:480px;--state-heading:24px;--phone-border:4px;--phone-radius:24px;--frame-radius:12px;--focus-width:3px;--transition:.16s}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{font-size:var(--text-body);line-height:1.5}button,a{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:var(--shopops-color-brand-action);text-underline-offset:var(--shopops-space-1)}button:focus-visible,a:focus-visible,iframe:focus-visible{outline:var(--focus-width) solid var(--shopops-color-focus);outline-offset:2px}h1,h2,p{margin:0}.viewer{grid-template-rows:auto minmax(0,1fr);height:100dvh;display:grid;overflow:hidden}.viewer-header{align-items:center;gap:var(--shopops-space-6);min-width:0;min-height:var(--header-height);padding:0 var(--shopops-space-4);background:var(--shopops-color-surface);border-bottom:1px solid var(--shopops-color-border);display:flex}.brand{align-items:center;gap:var(--shopops-space-2);min-height:var(--control-size);color:var(--shopops-color-ink);letter-spacing:-1px;font-size:20px;font-weight:750;text-decoration:none;display:inline-flex}.brand img{display:block}.brand-period{color:var(--shopops-color-brand-action)}.header-divider{width:1px;height:var(--shopops-space-6);background:var(--shopops-color-border)}.viewer-header h1{font-size:var(--text-body);color:var(--shopops-color-muted);font-weight:500}.viewer-main{min-width:0;min-height:0;padding:0 var(--shopops-space-4) var(--shopops-space-3);overflow:hidden}.workspace-grid{grid-template-columns:minmax(0, 1fr) var(--phone-width);gap:var(--shopops-space-4);height:100%;min-height:0;display:grid}.client-panel{grid-template-rows:var(--toolbar-height) minmax(0, 1fr);min-width:0;min-height:0;display:grid}.client-toolbar{justify-content:space-between;align-items:center;gap:var(--shopops-space-2);min-width:0;display:flex}.client-title{align-items:center;gap:var(--shopops-space-2);min-width:0;display:flex}.client-title h2{font-size:var(--text-small);white-space:nowrap;font-weight:650}.client-actions{flex:none;display:flex}.icon-button{width:var(--control-size);height:var(--control-size);color:var(--shopops-color-muted);border-radius:var(--shopops-radius-medium);font-size:var(--state-heading);transition:background-color var(--transition), color var(--transition);background:0 0;border:0;place-items:center;padding:0;text-decoration:none;display:inline-grid}.icon-button:hover{color:var(--shopops-color-ink);background:var(--shopops-color-surface)}.browser-window,.phone-window{background:var(--shopops-color-surface);min-width:0;height:100%;min-height:0;overflow:hidden}.browser-window{border:1px solid var(--shopops-color-border);border-radius:var(--frame-radius)}.phone-window{border:var(--phone-border) solid var(--shopops-color-ink);border-radius:var(--phone-radius)}iframe{background:var(--shopops-color-surface);border:0;width:100%;min-width:0;height:100%;min-height:0;display:block}.view-switch{border:1px solid var(--shopops-color-border);border-radius:var(--shopops-radius-medium);background:var(--shopops-color-canvas);padding:0;display:none}.view-switch button{min-height:var(--control-size);padding:0 var(--shopops-space-3);border-radius:var(--shopops-radius-small);color:var(--shopops-color-muted);background:0 0;border:0}.view-switch button[aria-pressed=true]{color:var(--shopops-color-brand-action);background:var(--shopops-color-surface);font-weight:650}.config-state{max-width:var(--state-width);justify-content:center;align-items:center;gap:var(--shopops-space-4);height:100%;padding:var(--shopops-space-4);text-align:center;flex-direction:column;margin:auto;display:flex;overflow:auto}.config-state h2{font-size:var(--state-heading);line-height:1.25}.config-state p{color:var(--shopops-color-muted);overflow-wrap:anywhere}.primary-button{min-height:var(--control-size);padding:var(--shopops-space-2) var(--shopops-space-6);border-radius:var(--shopops-radius-medium);background:var(--shopops-color-brand-action);color:var(--shopops-color-surface);border:0;flex:none;font-weight:600}.primary-button:hover{background:var(--shopops-color-ink)}@media (width<=1100px){.viewer-header{gap:var(--shopops-space-4)}.viewer-main{padding-bottom:var(--shopops-space-4)}}@media (width<=900px){.view-switch{margin-left:auto;display:flex}.workspace-grid{grid-template-columns:minmax(0,1fr)}.workspace-grid>.client-panel{grid-area:1/1}.workspace-grid[data-active-client=browser] .chat-panel,.workspace-grid[data-active-client=chat] .browser-panel{visibility:hidden;pointer-events:none}.chat-panel{width:min(100%, var(--phone-width));justify-self:center}}@media (width<=520px){.viewer-header{gap:var(--shopops-space-2);padding:var(--shopops-space-1) var(--shopops-space-3)}.viewer-header h1,.header-divider{display:none}.viewer-main{padding:0 var(--shopops-space-2) var(--shopops-space-2)}.brand{font-size:20px}.brand img{width:24px;height:24px}}@media (height<=500px){.viewer-header{padding-block:0}.viewer-main{padding-bottom:var(--shopops-space-2)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}