.overlay-is-open { overflow: hidden; }

.overlay-dialog {
  box-sizing: border-box;
  color: var(--ew-text);
  background: var(--ew-graphite);
  border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius-scene-desktop) var(--ew-radius-scene-desktop) 0 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  max-height: calc(100svh - 16px);
  margin: auto 0 0;
  font-family: var(--ew-font-ui);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

.overlay-dialog[open] { display: flex; flex-direction: column; animation: overlay-enter var(--ew-motion-enter) var(--ew-ease-decelerate); }
.overlay-dialog::backdrop { background: color-mix(in srgb, var(--ew-ink) 78%, transparent); }
.overlay-dialog *, .overlay-dialog *::before, .overlay-dialog *::after { box-sizing: border-box; }
.overlay-dialog button, .overlay-dialog input { font: inherit; }
.overlay-dialog button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.overlay-dialog button:disabled { cursor: default; color: var(--ew-muted); }
.overlay-dialog [hidden] { display: none !important; }
.overlay-dialog :focus-visible { outline: 2px solid var(--ew-focus); outline-offset: 3px; }
.overlay-dialog #overlay-title:focus { outline: none; }
.overlay-dialog h2, .overlay-dialog h3, .overlay-dialog p { margin: 0; }
.overlay-icon { display: block; flex: 0 0 24px; }

.overlay-handle {
  flex: 0 0 44px;
  width: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  touch-action: none;
}
.overlay-handle span { width: 40px; height: 4px; border-radius: var(--ew-radius-pill); background: var(--ew-muted); }
.overlay-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ew-space-2); flex-shrink: 0; padding: 0 var(--ew-space-4); }
.overlay-heading h2 { font-size: 22px; font-weight: 800; line-height: 1.25; }
.overlay-close { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; border: 0; border-radius: var(--ew-radius); background: var(--ew-steel); }
.overlay-demo-note { color: var(--ew-muted); font-size: 12px; padding: var(--ew-space-2) var(--ew-space-4) var(--ew-space-3); flex-shrink: 0; }
.overlay-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--ew-space-4) max(var(--ew-space-5), env(safe-area-inset-bottom)); }
.overlay-intro { color: var(--ew-muted); font-size: 13px; padding-bottom: var(--ew-space-4); }
.overlay-button { display: flex; align-items: center; justify-content: center; gap: var(--ew-space-2); min-height: 48px; width: 100%; border: 1px solid transparent; border-radius: var(--ew-radius); padding: 10px var(--ew-space-4); background: var(--ew-violet); color: var(--ew-text); font-weight: 800 !important; }
.overlay-button:not(:disabled):active, .overlay-close:active { transform: scale(.98); }
.overlay-secondary { background: var(--ew-steel); border-color: var(--ew-border); }
.overlay-button:disabled { background: var(--ew-steel); border-color: var(--ew-border); }
.overlay-help, .overlay-privacy, .overlay-status, .overlay-strength-copy { color: var(--ew-muted); font-size: 12px; }
.overlay-status:empty { display: none; }
.overlay-status:not(:empty) { padding-top: var(--ew-space-2); }
.overlay-privacy { border-top: 1px solid var(--ew-border); padding-top: var(--ew-space-3); margin-top: var(--ew-space-3) !important; }

.overlay-dialog[data-view="menu"] { width: min(344px, calc(100% - 32px)); height: 100svh; max-height: 100svh; margin: 0 auto 0 0; border-radius: 0 var(--ew-radius-scene-desktop) var(--ew-radius-scene-desktop) 0; padding-top: max(var(--ew-space-4), env(safe-area-inset-top)); }
.overlay-dialog[data-view="menu"][open] { animation-name: overlay-drawer-enter; }
.overlay-dialog[data-view="menu"] .overlay-body { display: flex; flex: 1; flex-direction: column; }
.overlay-menu { display: grid; gap: var(--ew-space-2); margin-top: var(--ew-space-4); }
.overlay-menu-item { display: flex; align-items: center; gap: var(--ew-space-3); width: 100%; min-height: 56px; padding: var(--ew-space-3); border: 1px solid var(--ew-border); border-radius: var(--ew-radius); background: var(--ew-slate); text-align: left; }
.overlay-menu-item > span:first-of-type { flex: 1; font-weight: 600; }
.overlay-soon { color: var(--ew-muted); font-size: 12px; }
.overlay-menu-footer { margin-top: auto !important; padding-top: var(--ew-space-6); color: var(--ew-muted); font-size: 12px; }

.overlay-currencies { display: grid; gap: var(--ew-space-2); }
.overlay-currency { display: flex; align-items: center; gap: var(--ew-space-3); min-height: 72px; width: 100%; border: 1px solid var(--ew-border); border-radius: var(--ew-radius); padding: var(--ew-space-3); background: var(--ew-slate); text-align: left; }
.overlay-currency[aria-pressed="true"] { border-color: var(--ew-focus); }
.overlay-coin { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--ew-radius-pill); background: var(--ew-steel); color: var(--ew-coin-gold); font-size: 17px; font-weight: 800; flex-shrink: 0; }
.overlay-currency-name, .overlay-currency-balance { display: grid; gap: 2px; }
.overlay-currency-name { flex: 1; }
.overlay-currency-name strong { font-size: 14px; font-weight: 800; }
.overlay-currency-name > span, .overlay-currency-balance > span { font-size: 12px; color: var(--ew-muted); }
.overlay-currency-balance { text-align: right; }
.overlay-currency-balance strong { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums lining-nums; }
.overlay-selection { width: 16px; height: 16px; border: 1px solid var(--ew-muted); border-radius: 50%; flex-shrink: 0; }
.overlay-currency[aria-pressed="true"] .overlay-selection { border: 5px solid var(--ew-focus); }
.overlay-wallet-actions { display: flex; gap: var(--ew-space-2); margin: var(--ew-space-5) 0 var(--ew-space-3); }

.overlay-form { display: grid; gap: var(--ew-space-2); }
.overlay-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ew-space-2); margin-bottom: var(--ew-space-2); }
.overlay-tab { min-height: 44px; border: 1px solid var(--ew-border); border-radius: var(--ew-radius); background: var(--ew-steel); font-weight: 600 !important; }
.overlay-tab[aria-selected="true"] { background: var(--ew-violet); border-color: transparent; }
.overlay-fields { display: grid; gap: var(--ew-space-3); }
.overlay-field { display: grid; gap: var(--ew-space-2); }
.overlay-field label { font-size: 13px; font-weight: 600; }
.overlay-input { color: var(--ew-text); background: var(--ew-slate); border: 1px solid var(--ew-muted); border-radius: var(--ew-radius); min-height: 46px; width: 100%; min-width: 0; padding: 10px var(--ew-space-3); }
.overlay-input::placeholder { color: var(--ew-muted); opacity: 1; font-size: 13px; }
.overlay-input[aria-invalid="true"] { border-color: var(--ew-loss-text); }
.overlay-password-row { display: flex; gap: var(--ew-space-2); }
.overlay-password-toggle { display: grid; place-items: center; flex: 0 0 46px; min-height: 46px; border: 1px solid var(--ew-border); border-radius: var(--ew-radius); background: var(--ew-steel); }
.overlay-form-options { display: grid; grid-template-columns: 1fr auto; gap: var(--ew-space-2); align-items: center; }
.overlay-check { display: flex; align-items: center; gap: var(--ew-space-2); min-height: 44px; font-size: 12px; cursor: pointer; }
.overlay-check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid var(--ew-muted); border-radius: 5px; background: var(--ew-slate); flex-shrink: 0; margin: 0; }
.overlay-check input:checked { background: var(--ew-focus); border-color: var(--ew-focus); }
.overlay-check input:checked::after { content: ''; display: block; width: 10px; height: 6px; border-left: 2px solid var(--ew-ink); border-bottom: 2px solid var(--ew-ink); transform: translate(4px, 4px) rotate(-45deg); }
.overlay-check input[aria-invalid="true"] { border-color: var(--ew-loss-text); }
.overlay-text-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--ew-space-2); border: 0; border-radius: var(--ew-radius); background: transparent; text-decoration: underline; text-underline-offset: 3px; font-size: 12px !important; font-weight: 600 !important; }
.overlay-text-button:hover { background: var(--ew-slate); }
.overlay-terms-info { justify-self: start; }
.overlay-error { color: var(--ew-loss-text); font-size: 12px; }
.overlay-strength { display: flex; gap: var(--ew-space-2); }
.overlay-strength span { height: 4px; flex: 1; border-radius: var(--ew-radius-pill); background: var(--ew-steel); }
.overlay-strength[data-strength="1"] span:first-child, .overlay-strength[data-strength="2"] span:nth-child(-n+2), .overlay-strength[data-strength="3"] span { background: var(--ew-muted); }
.overlay-auth-switch { display: flex; align-items: center; justify-content: center; gap: var(--ew-space-2); font-size: 12px; color: var(--ew-muted); }
.overlay-auth-switch .overlay-text-button { color: var(--ew-text); }
.overlay-info { display: grid; gap: var(--ew-space-4); }
.overlay-info p { color: var(--ew-muted); }
.overlay-info h3 { margin-top: var(--ew-space-2); font-size: 15px; font-weight: 800; }
.overlay-settings { display: grid; gap: var(--ew-space-3); margin: 0; }
.overlay-settings > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ew-space-4); padding-bottom: var(--ew-space-3); border-bottom: 1px solid var(--ew-border); }
.overlay-settings dt { font-weight: 600; }
.overlay-settings dd { margin: 0; color: var(--ew-muted); text-align: right; }

@media (min-width: 768px) {
  .overlay-dialog { width: 460px; max-width: calc(100% - 48px); max-height: calc(100svh - 48px); margin: auto; border-radius: var(--ew-radius-scene-desktop); padding-top: var(--ew-space-5); }
  .overlay-handle { display: none; }
  .overlay-heading { padding: 0 var(--ew-space-5); }
  .overlay-demo-note { padding-right: var(--ew-space-5); padding-left: var(--ew-space-5); }
  .overlay-body { padding: 0 var(--ew-space-5) var(--ew-space-5); }
  .overlay-dialog[data-view="menu"] { width: 360px; max-width: 360px; }
}

@media (max-width: 767px) and (max-height: 720px) {
  .overlay-dialog { max-height: calc(100svh - 8px); }
  .overlay-handle { flex-basis: 44px; }
  .overlay-intro { padding-bottom: var(--ew-space-2); }
  .overlay-heading h2 { font-size: 20px; }
  .overlay-currency { min-height: 64px; }
}

@keyframes overlay-enter { from { transform: translateY(32px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes overlay-drawer-enter { from { transform: translateX(-32px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .overlay-dialog[open], .overlay-dialog[data-view="menu"][open] { animation: overlay-fade var(--ew-motion-reduced) linear; }
  .overlay-button:not(:disabled):active, .overlay-close:active { transform: none; }
}
@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }