.ot-branding-page { max-width: 1380px; padding-top: 20px; padding-bottom: 56px; }
.ot-branding-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.ot-branding-header .page-title { font-size:calc(30px * var(--vera-font-scale, 1)); margin:2px 0 4px; }
.ot-branding-header p { margin:0; color:#667085; }
.ot-branding-form { display:grid; gap:18px; }
.ot-branding-section { margin:0; overflow:hidden; border-radius:8px; }
.ot-branding-section > .card-header { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ot-branding-section > .card-header > div { display:flex; align-items:center; gap:12px; }
.ot-branding-section h2 { margin:0; font-size:calc(19px * var(--vera-font-scale, 1)); }
.ot-step { display:grid; place-items:center; width:32px; height:32px; border-radius:6px; background:var(--ot-primary-soft); color:var(--ot-primary); font-weight:700; }
.ot-branding-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ot-field, .ot-color-field { display:grid; align-content:start; gap:8px; font-weight:600; }
.ot-field-double { grid-column:span 2; }
.ot-color-control { height:44px; display:flex; align-items:center; gap:12px; border:1px solid #d7e0eb; border-radius:6px; padding:5px 10px; background:#fff; }
.ot-color-control input { width:34px; height:32px; padding:0; border:0; background:none; }
.ot-color-control code { color:#344054; }
.ot-font-preview { min-height:76px; display:grid; align-content:center; gap:3px; padding:10px 14px; border-left:3px solid var(--ot-primary); background:#f8fafc; }
.ot-font-preview > span { color:#667085; font-size:calc(12px * var(--vera-font-scale, 1)); }
.ot-font-preview > strong { font-family:var(--preview-font),Arial,sans-serif; font-size:calc(16px * var(--vera-font-scale, 1)); }
.ot-font-preview > code { font-family:var(--preview-mono),Consolas,monospace !important; color:#344054; }
.ot-position-fieldset { margin:0 0 20px; padding:0; border:0; }
.ot-position-fieldset legend { font-size:calc(14px * var(--vera-font-scale, 1)); font-weight:700; margin-bottom:10px; }
.ot-position-options { display:grid; grid-template-columns:repeat(3,minmax(0,180px)); gap:10px; }
.ot-position-option input { position:absolute; opacity:0; pointer-events:none; }
.ot-position-option span { display:flex; align-items:center; gap:9px; min-height:46px; padding:0 14px; border:1px solid #d7e0eb; border-radius:6px; cursor:pointer; background:#fff; }
.ot-position-option input:checked + span { border-color:var(--ot-primary); box-shadow:0 0 0 2px var(--ot-primary-soft); color:#006c90; }
.ot-login-preview { min-height:330px; display:flex; align-items:center; padding:28px; position:relative; overflow:hidden; border:1px solid #d7e0eb; border-radius:7px; background:#dde6ef center / cover no-repeat; }
.ot-login-preview.ot-preview-left { justify-content:flex-start; }
.ot-login-preview.ot-preview-center { justify-content:center; }
.ot-login-preview.ot-preview-right { justify-content:flex-end; }
.ot-login-preview-shade { position:absolute; inset:0; background:rgba(17,24,39,.12); }
.ot-login-preview-panel { width:280px; padding:24px; display:grid; gap:10px; position:relative; background:#fff; border:1px solid #d7e0eb; border-radius:7px; box-shadow:0 12px 30px rgba(17,24,39,.16); text-align:center; }
.ot-login-preview-panel img { max-width:145px; max-height:48px; margin:0 auto 5px; object-fit:contain; }
.ot-login-preview-panel span { color:#667085; font-size:calc(12px * var(--vera-font-scale, 1)); line-height:1.4; }
.ot-login-preview-panel i { display:block; height:30px; border:1px solid #d7e0eb; border-radius:5px; }
.ot-login-preview-panel button { height:32px; border:0; border-radius:5px; background:var(--ot-primary); color:#003744; }
.ot-login-preview { min-height:460px; align-items:var(--login-vertical,center); background-position:var(--login-focus,center); }
.ot-login-preview-shade { background:color-mix(in srgb,#000 var(--login-overlay,15%),transparent); }
.ot-login-preview-panel { width:min(100%,var(--login-width,440px)); padding:var(--login-padding,32px); border-radius:var(--login-radius,8px); background:color-mix(in srgb,var(--login-surface,#fff) var(--login-opacity,100%),transparent); color:var(--login-text,#171717); box-shadow:var(--login-shadow,none); }
.ot-login-preview-panel span { color:inherit; }
.ot-login-preview-panel img { width:var(--login-logo_width,220px); max-width:100%; max-height:var(--login-logo_height,72px); }
.ot-asset-upload { display:grid; grid-template-columns:minmax(240px,1fr) minmax(280px,1fr); align-items:center; gap:20px; padding-top:18px; border-top:1px solid #e5eaf0; }
.ot-asset-copy { display:flex; align-items:center; gap:12px; }
.ot-asset-copy > i { font-size:calc(24px * var(--vera-font-scale, 1)); color:var(--ot-primary); }
.ot-asset-copy div { display:grid; gap:2px; }
.ot-asset-copy span { color:#667085; font-size:calc(13px * var(--vera-font-scale, 1)); }
.ot-background-actions { display:grid; gap:9px; }
.ot-assets-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ot-asset-tile { display:grid; gap:9px; font-weight:600; }
.ot-asset-image { height:112px; display:grid; place-items:center; border:1px solid #d7e0eb; border-radius:6px; background:#f8fafc; }
.ot-asset-image img { max-width:85%; max-height:72px; object-fit:contain; }
.ot-branding-actions { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; border:1px solid #d7e0eb; border-radius:8px; background:#fff; box-shadow:0 -8px 24px rgba(17,24,39,.07); }
.ot-branding-actions > span { color:#667085; }
@media (max-width: 991.98px) {
    .ot-branding-grid, .ot-assets-grid { grid-template-columns:1fr 1fr; }
    .ot-field-double { grid-column:span 1; }
    .ot-asset-upload { grid-template-columns:1fr; }
}
@media (max-width: 575.98px) {
    .ot-branding-header { align-items:flex-start; flex-direction:column; }
    .ot-branding-grid, .ot-assets-grid { grid-template-columns:1fr; }
    .ot-position-options { grid-template-columns:1fr; }
    .ot-login-preview { min-height:390px; align-items:flex-end; justify-content:center !important; padding:16px; }
    .ot-login-preview-panel { width:100%; }
    .ot-branding-actions { align-items:stretch; flex-direction:column; }
}
.ot-color-control .ot-color-reset { margin-left:auto; flex:none; width:32px; height:32px; padding:0; color:var(--vera-text); }
.ot-access-section { border-top:1px solid #d7e0eb; background:#fff; min-width:0; }
.ot-access-section > .card-header { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid #e8edf3; }
.ot-access-settings .ot-access-section h2 { margin:0; font-size:1.125rem !important; line-height:1.4; }
.ot-access-section > .card-body { padding:20px; }
.ot-access-settings .ot-branding-form { gap:24px; }
.ot-access-settings .ot-login-preview-panel button { color:var(--vera-on-primary); }
.ot-access-settings .ot-position-option input:checked + span { color:var(--vera-text); }
.ot-access-settings .ot-position-option input:focus-visible + span { outline:2px solid var(--vera-text); outline-offset:3px; }
@media(max-width:575.98px) {
    .ot-access-section > .card-header, .ot-access-section > .card-body { padding:16px; }
    .ot-access-settings .ot-position-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .ot-access-settings .ot-position-option span { gap:4px; padding:8px 4px; }
}