.brand-dialog { padding:0; border:0; border-radius:24px; width:min(640px,calc(100% - 48px)); max-width:none; max-height:min(900px,calc(var(--brand-viewport-height,100dvh) - 48px)); margin:auto; color:var(--ink); background:#fff; box-shadow:0 28px 100px #10193245; overflow:hidden; }
.brand-dialog::backdrop { background:rgba(15,23,42,.62); backdrop-filter:blur(4px); }
.brand-dialog[open] { display:flex; animation:brand-arrive .24s ease-out; }
.brand-form { display:flex; flex-direction:column; min-width:0; width:100%; max-height:inherit; }
.brand-header { position:relative; flex:none; padding:30px 32px 20px; border-bottom:1px solid #e5e9f2; }
.brand-step { margin:0 40px 10px 0; font-size:11px; font-weight:800; letter-spacing:.13em; color:var(--accent); }
.brand-dialog h2 { margin:0; max-width:490px; font-size:32px; line-height:1.12; letter-spacing:-.035em; font-weight:800; outline:none; }
.brand-dialog h2 em { font-style:normal; color:var(--accent); }
#brand-intro { margin:12px 0 0; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.brand-close { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:#f0f3f8; color:#4b5563; font:28px/1 var(--font); cursor:pointer; }
.brand-close:hover { background:#e4eaf5; }
.brand-close:disabled { opacity:.45; cursor:wait; }
.brand-handle { display:none; }
.brand-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:22px 32px; display:flex; flex-direction:column; gap:20px; scrollbar-gutter:stable; }
.brand-dialog .lbl { font-size:12px; letter-spacing:.045em; line-height:1.4; margin-bottom:8px; }
.brand-dialog .lbl span, .brand-extras summary span { font-weight:400; text-transform:none; letter-spacing:0; color:#737b8b; font-size:12px; }
.brand-dialog .field { min-width:0; }
.brand-dialog .field input, .brand-dialog textarea { width:100%; min-width:0; border:1px solid #ccd3e0; border-radius:12px; background:#fff; padding:13px 14px; font:16px/1.4 var(--font); color:var(--ink); box-shadow:none; }
.brand-dialog textarea { display:block; resize:vertical; min-height:92px; max-height:220px; }
.brand-dialog input::placeholder, .brand-dialog textarea::placeholder { color:#88909e; }
.brand-dialog :focus-visible { outline:3px solid #2563eb66; outline-offset:3px; }
.brand-dialog h2:focus-visible { outline:none; }
.brand-dialog .field input:focus, .brand-dialog textarea:focus { border-color:var(--accent); }
.brand-dialog [aria-invalid="true"] { border-color:#b91c1c!important; }
.brand-hint { display:block; margin-top:8px; font-size:12.5px; line-height:1.5; color:#626b7c; }
.brand-names { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.brand-upload { display:flex; position:relative; align-items:center; gap:14px; border:1.5px dashed #afbee0; background:#f6f8fd; border-radius:14px; padding:17px 16px; cursor:pointer; }
.brand-upload input { position:absolute; opacity:0; width:1px; height:1px; }
.brand-upload:has(input:focus-visible) { outline:3px solid #2563eb66; outline-offset:3px; }
.brand-upload svg { flex:none; color:var(--accent); }
.brand-upload span { min-width:0; }
.brand-upload b { display:block; font-size:15px; overflow-wrap:anywhere; }
.brand-upload small { display:block; margin-top:4px; color:#626b7c; font-size:12px; line-height:1.5; }
.brand-upload.is-dragging, .brand-upload.has-file { border-color:var(--accent); background:#edf2ff; }
.brand-remove { border:0; background:none; color:#626b7c; padding:10px 0 0; font:13px var(--font); text-decoration:underline; cursor:pointer; }
.brand-extras summary { font-size:13px; color:#5b6475; cursor:pointer; }
.brand-extras > div { display:grid; gap:16px; padding-top:16px; }
.brand-footer { flex:none; padding:18px 32px 20px; border-top:1px solid #e5e9f2; background:#fff; box-shadow:0 -5px 20px #12233d05; }
.brand-footer .btn { min-height:52px; box-shadow:0 8px 18px -10px #2563eb80; }
.brand-footer > p:last-child { margin:10px 0 0; text-align:center; font-size:12px; color:#626b7c; }
.brand-footer .form-error { margin:0 0 12px; line-height:1.4; }
.brand-dialog [hidden] { display:none!important; }
.brand-success { padding:42px 32px 32px; text-align:center; }
.brand-success-mark { display:grid; place-items:center; margin:0 auto 22px; width:60px; height:60px; border-radius:50%; background:#e9f0ff; color:var(--accent); font-size:30px; }
.brand-success .brand-step { margin:0 0 12px; }
.brand-success h2 { margin:0 auto; }
.brand-success > p:not(.brand-step) { margin:16px 0 26px; font-size:16px; color:#626b7c; overflow-wrap:anywhere; }
.brand-success strong { font-weight:600; }
#design .brief-pending { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.09em; margin-bottom:8px; }
#design .brief-confirmed { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.09em; }
@keyframes brand-arrive { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes brand-slide-up { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media(max-width:640px) {
  .brand-dialog { position:fixed; inset:auto 0 var(--brand-keyboard-offset,0px); width:100%; max-height:min(92dvh,calc(var(--brand-viewport-height,100dvh) - 16px)); margin:0; border-radius:24px 24px 0 0; }
  .brand-dialog[open] { animation:brand-slide-up .3s cubic-bezier(.2,.75,.25,1); }
  .brand-header { padding:28px 22px 16px; }
  .brand-handle { display:block; width:38px; height:4px; background:#d7deea; border-radius:99px; position:absolute; top:9px; left:calc(50% - 19px); }
  .brand-close { top:20px; right:12px; width:40px; height:40px; }
  .brand-step { font-size:10px; margin-bottom:10px; }
  .brand-dialog h2 { font-size:28px; max-width:290px; padding-right:12px; }
  #brand-intro { font-size:14px; margin-top:10px; }
  .brand-body { padding:18px 22px; gap:18px; scrollbar-gutter:auto; }
  .brand-names { grid-template-columns:1fr; gap:18px; }
  .brand-footer { padding:14px 20px max(14px,env(safe-area-inset-bottom)); }
  .brand-footer .btn { font-size:16px; }
  .brand-footer > p:last-child { margin-top:8px; }
  .brand-success { padding:32px 24px max(28px,env(safe-area-inset-bottom)); }
  .brand-success h2 { padding:0; }
  .brand-dialog.is-keyboard .brand-header { padding:16px 60px 16px 20px; }
  .brand-dialog.is-keyboard .brand-header h2 { font-size:23px; }
  .brand-dialog.is-keyboard .brand-header .brand-step, .brand-dialog.is-keyboard #brand-intro, .brand-dialog.is-keyboard .brand-handle { display:none; }
  .brand-dialog.is-keyboard .brand-close { top:10px; }
}
@media(max-width:640px) and (max-height:560px) {
  .brand-header { padding:16px 60px 16px 20px; }
  .brand-header h2 { font-size:23px; }
  .brand-header .brand-step, #brand-intro, .brand-handle { display:none; }
  .brand-close { top:10px; }
}
@media(prefers-reduced-motion:reduce) { .brand-dialog[open] { animation:none; } }