.ui-page { min-height: var(--ui-viewport-height); display: flex; flex-direction: column; }
.ui-header { min-height: var(--ui-header-height); padding: var(--ui-space-3) var(--ui-space-8); border-bottom: var(--ui-border-width) solid var(--ui-line); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); }
.ui-brand { display: flex; align-items: center; gap: var(--ui-space-3); font-size: var(--ui-text-sm); font-weight: var(--ui-weight-strong); }
.ui-brand img { width: var(--ui-logo-size); height: var(--ui-logo-size); object-fit: contain; }
.ui-brand span { color: var(--ui-muted); font-weight: var(--ui-weight-normal); border-left: var(--ui-border-width) solid var(--ui-border); padding-left: var(--ui-space-3); }
.ui-header-note, .ui-footer { color: var(--ui-dim); font-size: var(--ui-text-xs); display: flex; align-items: center; justify-content: center; gap: var(--ui-space-2); }
.ui-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--ui-space-10) var(--ui-space-6); background: var(--ui-glow); }
.ui-shell { width: var(--ui-width-standard); max-width: 100%; min-width: 0; border: var(--ui-border-width) solid var(--ui-line); border-radius: var(--ui-radius-card); background: var(--ui-panel); padding: var(--ui-space-8); }
.ui-shell[data-width="wide"] { width: var(--ui-width-wide); }
.ui-shell[data-width="account"] { width: var(--ui-width-account); }
.ui-form, .ui-stack { display: grid; gap: var(--ui-space-5); min-width: 0; }
.ui-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); }
.ui-actions > .ui-confirmation:has(details[open]) { flex-basis: 100%; }
.ui-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2); color: var(--ui-muted); font-size: var(--ui-text-sm); margin: var(--ui-space-6) 0 0; }
.ui-footer { padding: var(--ui-space-2) var(--ui-space-5) var(--ui-space-6); }
@media (min-width: 1000px) { .ui-shell { padding: var(--ui-space-9); } }
@media (max-width: 520px) {
  .ui-header { min-height: var(--ui-header-mobile); padding-inline: var(--ui-space-6); }
  .ui-header-note { display: none; }
  .ui-main { padding: var(--ui-space-8) var(--ui-space-6); background: none; }
  .ui-shell { border: 0; border-radius: 0; padding: 0; background: transparent; width: 100%; }
}
@media (max-width: 355px) { .ui-main, .ui-header { padding-inline: var(--ui-space-4); } }