.ogp-branding-studio__layout{gap:var(--ogp-space-6);grid-template-columns:minmax(18rem,24rem) minmax(0,1fr);align-items:start;display:grid}@media (width<=960px){.ogp-branding-studio__layout{grid-template-columns:1fr}}.ogp-branding-studio__fieldset{border:1px solid var(--ogp-color-border);border-radius:var(--ogp-radius-md);padding:var(--ogp-space-4);margin:0 0 var(--ogp-space-4);gap:var(--ogp-space-3);flex-direction:column;display:flex}.ogp-branding-studio__fieldset legend{padding:0 var(--ogp-space-2);font-weight:var(--ogp-weight-semibold);font-size:var(--ogp-text-sm)}.ogp-branding-studio__color{gap:var(--ogp-space-3);grid-template-columns:1fr auto;align-items:end;display:grid}.ogp-branding-studio__swatch{border:1px solid var(--ogp-color-border);border-radius:var(--ogp-radius-md);cursor:pointer;background:0 0;width:2.75rem;height:2.75rem;padding:0}.ogp-branding-studio__logo-row{gap:var(--ogp-space-4);flex-wrap:wrap;align-items:center;display:flex}.ogp-branding-studio__logo-preview{border-radius:var(--ogp-radius-md);border:1px dashed var(--ogp-color-border);background:var(--ogp-color-bg-elevated);place-items:center;width:4.5rem;height:4.5rem;display:grid;overflow:hidden}.ogp-branding-studio__logo-preview img{object-fit:contain;max-width:100%;max-height:100%}.ogp-branding-studio__logo-choice{align-items:center;gap:var(--ogp-space-4);margin-bottom:var(--ogp-space-3);display:flex}.ogp-branding-studio__logo-actions{gap:var(--ogp-space-2);flex-direction:column;align-items:flex-start;display:flex}.ogp-branding-studio__file{align-items:center;gap:var(--ogp-space-2);font-weight:var(--ogp-weight-semibold);color:var(--ogp-color-action);cursor:pointer;display:inline-flex}.ogp-branding-studio__file input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.ogp-branding-studio__footer{align-items:center;gap:var(--ogp-space-3);flex-wrap:wrap;display:flex}.ogp-branding-studio__preview-pane{gap:var(--ogp-space-3);flex-direction:column;min-width:0;display:flex}.ogp-branding-studio__preview-toolbar{justify-content:space-between;align-items:center;gap:var(--ogp-space-3);flex-wrap:wrap;display:flex}.ogp-branding-studio__preview-title{font-size:var(--ogp-text-lg);margin:0}.ogp-branding-studio__tabs{gap:var(--ogp-space-1);padding:var(--ogp-space-1);border-radius:var(--ogp-radius-md);background:var(--ogp-color-bg-elevated);border:1px solid var(--ogp-color-border);display:inline-flex}.ogp-branding-studio__tabs button{appearance:none;padding:var(--ogp-space-2) var(--ogp-space-3);border-radius:var(--ogp-radius-sm);cursor:pointer;color:var(--ogp-color-text-muted);font:inherit;font-size:var(--ogp-text-sm);background:0 0;border:0}.ogp-branding-studio__tabs button.is-active{background:var(--ogp-color-bg);color:var(--ogp-color-text);box-shadow:var(--ogp-shadow-1)}.ogp-branding-preview{border:1px solid var(--ogp-color-border);border-radius:var(--ogp-radius-lg);background:var(--ogp-color-bg);min-height:18rem;overflow:hidden}.ogp-branding-preview__chrome{min-height:18rem}.ogp-branding-preview__join,.ogp-branding-preview__home,.ogp-branding-preview__workspace{padding:var(--ogp-space-5);gap:var(--ogp-space-3);flex-direction:column;display:flex}.ogp-branding-preview__join-brand{align-items:center;gap:var(--ogp-space-3);display:inline-flex}.ogp-branding-preview__logo{object-fit:contain;border-radius:var(--ogp-radius-sm);width:2rem;height:2rem}.ogp-branding-preview__title{font-size:var(--ogp-text-xl);margin:0}.ogp-branding-preview__hint{color:var(--ogp-color-text-muted);margin:0}.ogp-branding-preview__field{border:1px solid var(--ogp-color-border);border-radius:var(--ogp-radius-md);padding:var(--ogp-space-3);max-width:12rem;font-family:var(--ogp-font-mono,ui-monospace, monospace);letter-spacing:.08em}.ogp-branding-preview__btn{appearance:none;border-radius:var(--ogp-radius-md);padding:var(--ogp-space-3) var(--ogp-space-4);background:var(--ogp-color-action);color:var(--ogp-color-action-text);font:inherit;font-weight:var(--ogp-weight-semibold);cursor:default;border:0;width:fit-content}.ogp-branding-preview__btn--sm{padding:var(--ogp-space-2) var(--ogp-space-3);font-size:var(--ogp-text-sm)}.ogp-branding-preview__accent-chip{width:fit-content;padding:var(--ogp-space-1) var(--ogp-space-3);border-radius:var(--ogp-radius-full,999px);background:color-mix(in srgb, var(--ogp-color-accent) 18%, transparent);color:var(--ogp-color-accent);border:1px solid color-mix(in srgb, var(--ogp-color-accent) 40%, transparent);font-size:var(--ogp-text-sm);font-weight:var(--ogp-weight-semibold);display:inline-flex}.ogp-branding-preview__home-top{justify-content:space-between;align-items:center;gap:var(--ogp-space-3);display:flex}.ogp-branding-preview__metrics{gap:var(--ogp-space-3);grid-template-columns:1fr 1fr;display:grid}.ogp-branding-preview__metric{border:1px solid var(--ogp-color-border);border-radius:var(--ogp-radius-md);padding:var(--ogp-space-3);gap:var(--ogp-space-1);flex-direction:column;display:flex}.ogp-branding-preview__metric.is-accent{border-color:color-mix(in srgb, var(--ogp-color-accent) 55%, var(--ogp-color-border));box-shadow:inset 3px 0 0 var(--ogp-color-accent)}.ogp-branding-preview__workspace{grid-template-columns:10rem 1fr;gap:0;min-height:18rem;padding:0;display:grid}.ogp-branding-preview__nav{background:var(--ogp-color-shell-nav-bg,#0f172a);color:var(--ogp-color-shell-nav-text,#e2e8f0);padding:var(--ogp-space-4);gap:var(--ogp-space-4);flex-direction:column;display:flex}.ogp-branding-preview__nav ul{gap:var(--ogp-space-2);font-size:var(--ogp-text-sm);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ogp-branding-preview__nav li.is-active{background:var(--ogp-gradient-nav-active,#5b4bd6);color:var(--ogp-color-nav-active-text,#fff);font-weight:var(--ogp-weight-semibold);border-radius:var(--ogp-radius-md);padding:.35rem .55rem}.ogp-branding-preview__nav-label{font-size:var(--ogp-text-xs);text-transform:uppercase;letter-spacing:.04em;max-width:7rem;line-height:1.2}.ogp-branding-preview__main{padding:var(--ogp-space-5);gap:var(--ogp-space-3);flex-direction:column;display:flex}.ogp-branding-preview__actions{gap:var(--ogp-space-3);flex-wrap:wrap;align-items:center;display:flex}