/* shadcn/ui (new-york-v4) components ported to plain CSS for a static page.
   Class recipes follow the registry sources one to one (button, input, label, field, card, badge, table,
   tabs, accordion, alert, avatar, separator, dialog, sheet, dropdown-menu, item, switch, progress,
   navigation-menu link). Theme: dark, owner's "baroworks" palette (graphite + gold), tuned to the Binance
   DESIGN.md in _materials/design-md/binance (surfaces, hairlines, radius scale, flat cards, blue focus ring). */
:root {
  --radius: .5rem;
  --background: #0b0e11;
  --foreground: #eaecef;
  --card: #1e2329;
  --card-foreground: #eaecef;
  --popover: #1e2329;
  --popover-foreground: #eaecef;
  --primary: #fcd535;
  --primary-foreground: #181a20;
  --secondary: #2b3139;
  --secondary-foreground: #eaecef;
  --muted: #2b3139;
  --muted-foreground: #929aa5;
  --accent: #2b3139;
  --accent-foreground: #eaecef;
  --destructive: #f6465d;
  --success: #0ecb81;
  --border: #2b3139;
  --input: #3a414b;
  --ring: #3b82f6;
  --primary-active: #f0b90b;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --ring-50: color-mix(in oklab, var(--ring) 50%, transparent);
  color-scheme: dark;
}

/* ---------- button ---------- */
.btn {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: .5rem;
  height: 2.25rem; padding: .5rem 1rem; border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: inherit; font-size: .875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  background: var(--primary); color: var(--primary-foreground); text-decoration: none;
  transition: all .15s cubic-bezier(.4, 0, .2, 1); outline: none;
}
.btn:hover { background: var(--primary-active); text-decoration: none; }
.btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-50); }
.btn:disabled { pointer-events: none; opacity: .5; }
.btn svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; }
.btn:has(> svg) { padding-left: .75rem; padding-right: .75rem; }
.btn[data-variant="outline"] { border-color: var(--input); background: color-mix(in oklab, var(--input) 30%, transparent); color: var(--foreground); box-shadow: var(--shadow-xs); }
.btn[data-variant="outline"]:hover { background: color-mix(in oklab, var(--input) 50%, transparent); }
.btn[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
.btn[data-variant="secondary"]:hover { background: color-mix(in oklab, var(--secondary) 80%, transparent); }
.btn[data-variant="ghost"] { background: transparent; color: var(--foreground); }
.btn[data-variant="ghost"]:hover { background: color-mix(in oklab, var(--accent) 50%, transparent); color: var(--accent-foreground); }
.btn[data-variant="link"] { background: transparent; color: var(--primary); padding-left: 0; padding-right: 0; height: auto; text-underline-offset: 4px; }
.btn[data-variant="link"]:hover { text-decoration: underline; }
.btn[data-size="sm"] { height: 2rem; gap: .375rem; padding: 0 .75rem; }
.btn[data-size="sm"]:has(> svg) { padding: 0 .625rem; }
.btn[data-size="lg"] { height: 2.5rem; padding: 0 1.5rem; }
.btn[data-size="lg"]:has(> svg) { padding: 0 1rem; }
.btn[data-size="icon"] { width: 2.25rem; padding: 0; }

/* ---------- input / label / field ---------- */
.input {
  display: flex; width: 100%; min-width: 0; height: 2.25rem; padding: .25rem .75rem;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--input) 30%, transparent); color: var(--foreground);
  font-family: inherit; font-size: 1rem; line-height: 1.5rem; font-weight: 400; box-shadow: var(--shadow-xs);
  transition: color .15s, box-shadow .15s; outline: none;
}
.input::placeholder { color: var(--muted-foreground); }
.input::selection { background: var(--primary); color: var(--primary-foreground); }
.input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-50); }
.input[aria-invalid="true"], .input.error { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent); }
@media (min-width: 768px) { .input { font-size: .875rem; line-height: 1.25rem; } }
.label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: 1; font-weight: 500; user-select: none; }
.field-group { display: flex; width: 100%; flex-direction: column; gap: 1.75rem; }
.field { display: flex; width: 100%; flex-direction: column; gap: .75rem; }
.field > * { width: 100%; }
.field-description { margin: -.25rem 0 0; font-size: .875rem; line-height: 1.5; font-weight: 400; color: var(--muted-foreground); }
.field-description a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.field-description a:hover { color: var(--primary); }
.field label.error { display: block; margin: -.25rem 0 0; font-size: .875rem; line-height: 1.25rem; font-weight: 400; color: var(--destructive); }
.input-group { position: relative; }
.input-group > .input { padding-right: 2.5rem; }
.input-group-addon { position: absolute; top: 0; right: 0; }

/* ---------- card ---------- */
.card { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); color: var(--card-foreground); min-width: 0; }
.card-header { display: grid; grid-auto-rows: min-content; grid-template-rows: auto auto; align-items: start; gap: .5rem; padding: 0 1.5rem; }
.card-header:has(> .card-action) { grid-template-columns: 1fr auto; }
.card-header.border-b { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.card-title { margin: 0; font-size: 1rem; line-height: 1; font-weight: 600; letter-spacing: 0; }
.card-description { margin: 0; font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.card-action { grid-column-start: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; }
.card-content { padding: 0 1.5rem; }
.card-footer { display: flex; align-items: center; padding: 0 1.5rem; }
.card-footer.border-t { padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* ---------- badge ---------- */
.badge { display: inline-flex; width: fit-content; flex-shrink: 0; align-items: center; justify-content: center; gap: .25rem; overflow: hidden; padding: .125rem .5rem; border: 1px solid transparent; border-radius: 9999px; font-size: .75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; background: var(--primary); color: var(--primary-foreground); }
.badge > svg { pointer-events: none; width: .75rem; height: .75rem; }
.badge[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
.badge[data-variant="destructive"] { background: color-mix(in oklab, var(--destructive) 60%, transparent); color: #fff; }
.badge[data-variant="outline"] { border-color: var(--border); background: transparent; color: var(--foreground); }
.badge[data-variant="success"] { background: color-mix(in oklab, var(--success) 18%, transparent); color: var(--success); }

/* ---------- table ---------- */
.table-container { position: relative; width: 100%; overflow-x: auto; }
.table { width: 100%; caption-side: bottom; border-collapse: collapse; font-size: .875rem; line-height: 1.25rem; }
.table thead tr { border-bottom: 1px solid var(--border); }
.table tr { border-bottom: 1px solid var(--border); transition: background-color .15s; }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.table th { height: 2.5rem; padding: 0 .5rem; text-align: left; vertical-align: middle; font-weight: 500; white-space: nowrap; color: var(--foreground); }
.table td { padding: .5rem; vertical-align: middle; white-space: nowrap; }
.table caption { margin-top: 1rem; font-size: .875rem; color: var(--muted-foreground); }

/* ---------- tabs ---------- */
.tabs-list { display: inline-flex; width: fit-content; height: 2.25rem; align-items: center; justify-content: center; padding: 3px; border-radius: var(--radius-lg); background: var(--muted); color: var(--muted-foreground); }
.tabs-trigger { position: relative; display: inline-flex; flex: 1; height: calc(100% - 1px); align-items: center; justify-content: center; gap: .375rem; padding: .25rem .5rem; border: 1px solid transparent; border-radius: var(--radius-md); font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--muted-foreground); background: transparent; }
.tabs-trigger[data-state="active"] { border-color: var(--input); background: color-mix(in oklab, var(--input) 30%, transparent); color: var(--foreground); box-shadow: var(--shadow-sm); }

/* ---------- accordion (details/summary keeps every answer in the page) ---------- */
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: 0; }
.accordion-trigger { display: flex; flex: 1; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-radius: var(--radius-md); text-align: left; font-size: 1rem; line-height: 1.4; font-weight: 600; list-style: none; cursor: pointer; outline: none; transition: all .15s; }
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger:hover { text-decoration: underline; text-underline-offset: 4px; }
.accordion-trigger:focus-visible { box-shadow: 0 0 0 3px var(--ring-50); }
.accordion-trigger > svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; transform: translateY(.125rem); color: var(--muted-foreground); transition: transform .2s; }
.accordion-item[open] > .accordion-trigger > svg { transform: translateY(.125rem) rotate(180deg); }
.accordion-content { overflow: hidden; font-size: .875rem; line-height: 1.25rem; }
.accordion-item[open] > .accordion-content { animation: ui-accordion-down .2s ease-out; }
.accordion-content > div { padding: 0 0 1rem; }
@keyframes ui-accordion-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- alert ---------- */
.alert { position: relative; display: grid; width: 100%; grid-template-columns: 0 1fr; align-items: start; row-gap: .125rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--card-foreground); font-size: .875rem; line-height: 1.25rem; }
.alert:has(> svg) { grid-template-columns: 1rem 1fr; column-gap: .75rem; }
.alert > svg { width: 1rem; height: 1rem; transform: translateY(.125rem); color: currentColor; }
.alert-title { grid-column-start: 2; min-height: 1rem; margin: 0; font-size: .875rem; font-weight: 500; letter-spacing: -.025em; }
.alert-description { grid-column-start: 2; display: grid; justify-items: start; gap: .25rem; font-size: .875rem; color: var(--muted-foreground); }
.alert-description p { margin: 0; line-height: 1.625; }
.alert[data-variant="destructive"] { color: var(--destructive); }
.alert[data-variant="destructive"] .alert-description { color: color-mix(in oklab, var(--destructive) 90%, transparent); }

/* ---------- avatar ---------- */
.avatar { position: relative; display: flex; flex-shrink: 0; width: 2rem; height: 2rem; overflow: hidden; border-radius: 9999px; user-select: none; }
.avatar[data-size="lg"] { width: 2.5rem; height: 2.5rem; }
.avatar-fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 9999px; background: var(--muted); font-size: .875rem; color: var(--muted-foreground); }
.avatar-fallback svg { width: 1rem; height: 1rem; }

/* ---------- separator ---------- */
.separator { flex-shrink: 0; width: 100%; height: 1px; border: 0; margin: 0; background: var(--border); }

/* ---------- item ---------- */
.item-group { display: flex; flex-direction: column; }
.item { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid transparent; border-radius: var(--radius-md); font-size: .875rem; line-height: 1.25rem; color: inherit; text-decoration: none; transition: background-color .1s; outline: none; }
.item[data-variant="outline"] { border-color: var(--border); }
.item[data-variant="muted"] { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.item[data-size="sm"] { gap: .625rem; padding: .75rem 1rem; }
a.item:hover { background: color-mix(in oklab, var(--accent) 50%, transparent); text-decoration: none; }
.item:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-50); }
.item-media { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: .5rem; }
.item:has(.item-description) > .item-media { align-self: flex-start; transform: translateY(.125rem); }
.item-media[data-variant="icon"] { width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); }
.item-media[data-variant="icon"] svg { width: 1rem; height: 1rem; }
.item-media[data-variant="image"] { width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: var(--radius-sm); }
.item-content { display: flex; flex: 1; flex-direction: column; gap: .25rem; min-width: 0; }
.item-title { display: flex; width: fit-content; align-items: center; gap: .5rem; margin: 0; font-size: .875rem; line-height: 1.375; font-weight: 500; }
.item-description { margin: 0; font-size: .875rem; line-height: 1.5; font-weight: 400; color: var(--muted-foreground); }
.item-actions { display: flex; align-items: center; gap: .5rem; }
.item-separator { margin: 0; }

/* ---------- switch ---------- */
.switch { display: inline-flex; flex-shrink: 0; align-items: center; width: 2rem; height: 1.15rem; border: 1px solid transparent; border-radius: 9999px; background: color-mix(in oklab, var(--input) 80%, transparent); box-shadow: var(--shadow-xs); }
.switch[data-state="checked"] { background: var(--primary); }
.switch-thumb { display: block; width: 1rem; height: 1rem; border-radius: 9999px; background: var(--foreground); transition: transform .15s; }
.switch[data-state="checked"] .switch-thumb { transform: translateX(calc(100% - 2px)); background: var(--primary-foreground); }

/* ---------- progress ---------- */
.progress { position: relative; width: 100%; height: .5rem; overflow: hidden; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 20%, transparent); }
.progress-indicator { height: 100%; width: 100%; background: var(--primary); transition: transform .3s; }

/* ---------- navigation menu link ---------- */
.nav-link { display: inline-flex; width: max-content; height: 2.25rem; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: var(--radius-md); font-size: .875rem; font-weight: 500; color: var(--foreground); background: transparent; text-decoration: none; transition: color .15s, box-shadow .15s; outline: none; }
.nav-link:hover, .nav-link:focus { background: var(--accent); color: var(--accent-foreground); text-decoration: none; }
.nav-link[aria-current="page"] { background: color-mix(in oklab, var(--accent) 50%, transparent); }
.nav-link:focus-visible { box-shadow: 0 0 0 3px var(--ring-50); }

/* ---------- overlays: dialog, sheet, dropdown menu ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .5); }
.dialog, .sheet { position: fixed; inset: 0; z-index: 50; }
.dialog[hidden], .sheet[hidden], .dropdown-menu-content[hidden] { display: none; }
.dialog-content { position: fixed; top: 50%; left: 50%; z-index: 50; display: grid; gap: 1rem; width: 100%; max-width: calc(100% - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); box-shadow: var(--shadow-lg); transform: translate(-50%, -50%); outline: none; }
@media (min-width: 640px) { .dialog-content { max-width: 32rem; } }
.dialog-header { display: flex; flex-direction: column; gap: .5rem; text-align: center; }
@media (min-width: 640px) { .dialog-header { text-align: left; } }
.dialog-title { margin: 0; font-size: 1.125rem; line-height: 1; font-weight: 600; }
.dialog-description { margin: 0; font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.dialog-close, .sheet-close { position: absolute; top: 1rem; right: 1rem; display: inline-flex; padding: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; opacity: .7; cursor: pointer; transition: opacity .15s; }
.dialog-close:hover, .sheet-close:hover { opacity: 1; }
.dialog-close:focus-visible, .sheet-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.dialog-close svg, .sheet-close svg { width: 1rem; height: 1rem; }
.sheet-content { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1rem; width: 75%; height: 100%; border-left: 1px solid var(--border); background: var(--background); box-shadow: var(--shadow-lg); overflow-y: auto; }
@media (min-width: 640px) { .sheet-content { max-width: 24rem; } }
.sheet-header { display: flex; flex-direction: column; gap: .375rem; padding: 1rem; }
.sheet-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--foreground); }
.sheet-footer { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding: 1rem; }
.dropdown-menu { position: relative; }
.dropdown-menu-content { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; min-width: 8rem; overflow: hidden; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-md); }
.dropdown-menu-label { padding: .375rem .5rem; font-size: .875rem; font-weight: 500; }
.dropdown-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--border); }
.dropdown-menu-item { position: relative; display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: var(--radius-sm); font-size: .875rem; color: inherit; text-decoration: none; cursor: default; user-select: none; outline: none; }
.dropdown-menu-item:hover, .dropdown-menu-item:focus { background: var(--accent); color: var(--accent-foreground); text-decoration: none; }
.dropdown-menu-item svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; color: var(--muted-foreground); }
.dropdown-menu-shortcut { margin-left: auto; }

/* open / close motion (tw-animate-css: fade-in, zoom-in-95, slide-in-from-right, slide-in-from-top-2) */
[data-state="open"] > .overlay { animation: ui-fade-in .2s ease-out; }
[data-state="closed"] > .overlay { animation: ui-fade-out .2s ease-in forwards; }
.dialog[data-state="open"] .dialog-content { animation: ui-zoom-in .2s ease-out; }
.dialog[data-state="closed"] .dialog-content { animation: ui-zoom-out .2s ease-in forwards; }
.sheet[data-state="open"] .sheet-content { animation: ui-slide-in-right .5s ease-in-out; }
.sheet[data-state="closed"] .sheet-content { animation: ui-slide-out-right .3s ease-in-out forwards; }
.dropdown-menu-content[data-state="open"] { animation: ui-menu-in .15s ease-out; }
@keyframes ui-fade-in { from { opacity: 0; } }
@keyframes ui-fade-out { to { opacity: 0; } }
@keyframes ui-zoom-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }
@keyframes ui-zoom-out { to { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }
@keyframes ui-slide-in-right { from { transform: translateX(100%); } }
@keyframes ui-slide-out-right { to { transform: translateX(100%); } }
@keyframes ui-menu-in { from { opacity: 0; transform: translateY(-.5rem) scale(.95); } }