*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; min-height: 100%; }
body {
  min-height: 100dvh;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea, summary { min-height: var(--ui-control); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-primary) 72%, transparent);
  outline-offset: 3px;
}

.ui-shell { min-height: 100dvh; background: var(--ui-bg); }
.ui-content { width: min(var(--ui-content), 100%); margin-inline: auto; padding: 32px 24px 96px; }
.ui-topbar {
  position: sticky; z-index: var(--ui-z-sticky); top: 0;
  min-height: calc(var(--ui-topbar-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(16px, calc((100% - var(--ui-content)) / 2)) 0;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent);
  background: color-mix(in srgb, var(--ui-bg) 90%, transparent);
  backdrop-filter: blur(18px);
}
.ui-topbar__brand { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--ui-heading); }
.ui-brandmark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--ui-primary); color: #fff; font-weight: 850; }

.ui-page-header { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.ui-page-header > div { min-width: 0; flex: 1; }
.ui-eyebrow { margin: 0; color: var(--ui-primary); font-size: var(--ui-text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ui-page-title { margin: 5px 0 4px; color: var(--ui-heading); font-size: var(--ui-title-lg); line-height: 1.05; letter-spacing: -.045em; }
.ui-page-description { margin: 0; color: var(--ui-muted); font-size: var(--ui-text-md); }

.ui-button, .ui-icon-button {
  min-height: var(--ui-control); border: 0; border-radius: var(--ui-radius-control);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; background: var(--ui-primary); color: var(--ui-on-primary);
  font-weight: 750; text-decoration: none; cursor: pointer;
}
.ui-button:hover { background: var(--ui-primary-hover); }
.ui-button--secondary { background: var(--ui-surface-subtle); color: var(--ui-text); }
.ui-button--secondary:hover { background: color-mix(in srgb, var(--ui-surface-subtle) 82%, var(--ui-text)); }
.ui-button--quiet { background: transparent; color: var(--ui-muted); }
.ui-button--danger { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-button:disabled { opacity: .55; cursor: not-allowed; }
.ui-icon-button { width: var(--ui-control); padding: 0; background: var(--ui-surface-subtle); color: var(--ui-text); }

.ui-field { display: grid; gap: 5px; color: var(--ui-muted); font-size: var(--ui-text-xs); font-weight: 700; }
.ui-field input, .ui-field select, .ui-field textarea, .ui-control {
  width: 100%; min-height: var(--ui-control); padding: 9px 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  outline: 0; background: var(--ui-surface); color: var(--ui-text); font-size: var(--ui-text-md);
}
.ui-field textarea { min-height: 104px; resize: vertical; }
.ui-field input::placeholder, .ui-field textarea::placeholder { color: var(--ui-faint); }
.ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 18%, transparent); }
.ui-field__help { color: var(--ui-muted); font-weight: 400; line-height: 1.4; }
.ui-field__error { color: var(--ui-danger); font-weight: 600; }
.ui-field--error input, .ui-field--error select, .ui-field--error textarea { border-color: var(--ui-danger); }

.ui-card { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-card--padded { padding: 20px; }
.ui-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ui-list { overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-list-row { min-height: 64px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ui-border); }
.ui-list-row:last-child { border-bottom: 0; }
.ui-pill { min-height: 26px; padding: 5px 9px; display: inline-flex; align-items: center; border-radius: var(--ui-radius-pill); background: var(--ui-primary-soft); color: var(--ui-primary); font-size: 10px; font-weight: 800; }
.ui-alert { padding: 13px 15px; border-radius: var(--ui-radius-control); background: var(--ui-warning-soft); color: var(--ui-warning); }

.ui-backdrop, .ui-overlay-dismiss {
  position: fixed; z-index: var(--ui-z-backdrop); inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--ui-overlay-gutter);
  border: 0; background: var(--ui-overlay-backdrop);
  -webkit-backdrop-filter: blur(var(--ui-overlay-backdrop-blur));
  backdrop-filter: blur(var(--ui-overlay-backdrop-blur));
  animation: ui-backdrop-in var(--ui-overlay-motion) var(--ui-ease) both;
}
.ui-overlay-dismiss--clear { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ui-dialog, .ui-overlay {
  position: relative; z-index: var(--ui-z-dialog);
  display: flex; flex-direction: column;
  width: min(var(--ui-overlay-dialog-width), 100%);
  max-height: var(--ui-overlay-max-height); overflow: hidden;
  border: 1px solid var(--ui-overlay-border);
  border-radius: var(--ui-overlay-dialog-radius);
  background: var(--ui-overlay-surface);
  box-shadow: var(--ui-overlay-shadow-dialog);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
  animation: ui-dialog-in var(--ui-overlay-motion) var(--ui-ease) both;
}
.ui-overlay--popover {
  z-index: var(--ui-z-sheet); width: min(var(--ui-overlay-popover-width), 100%);
  border-radius: var(--ui-overlay-popover-radius);
  box-shadow: var(--ui-overlay-shadow-popover);
  transform-origin: var(--ui-overlay-origin, center bottom);
  animation-name: ui-popover-in;
}
.ui-overlay--menu {
  z-index: var(--ui-z-floating); width: min(var(--ui-overlay-menu-width), 100%);
  padding: 6px; border-radius: var(--ui-overlay-menu-radius);
  box-shadow: var(--ui-overlay-shadow-menu);
  transform-origin: var(--ui-overlay-origin, center bottom);
  animation: ui-popover-in var(--ui-overlay-motion-fast) var(--ui-ease) both;
}
.ui-overlay__header, .ui-dialog__header {
  position: sticky; z-index: 2; top: 0; flex: 0 0 auto;
  min-height: var(--ui-overlay-header-height); padding: 10px var(--ui-overlay-padding);
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--ui-overlay-border);
  background: color-mix(in srgb, var(--ui-overlay-surface) 94%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.ui-overlay__heading { min-width: 0; flex: 1; }
.ui-overlay__title { margin: 0; color: var(--ui-heading); font-size: var(--ui-title-sm); line-height: 1.25; letter-spacing: -.015em; }
.ui-overlay__description { margin: 3px 0 0; color: var(--ui-muted); font-size: 13px; line-height: 1.4; }
.ui-overlay__close {
  flex: 0 0 var(--ui-control); width: var(--ui-control); min-height: var(--ui-control);
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted);
}
.ui-overlay__close:hover { background: var(--ui-surface-subtle); color: var(--ui-text); }
.ui-overlay__body, .ui-dialog__body {
  min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain;
  padding: var(--ui-overlay-padding);
  scrollbar-gutter: stable;
}
.ui-overlay__footer, .ui-dialog__footer {
  position: sticky; z-index: 2; bottom: 0; flex: 0 0 auto;
  min-height: var(--ui-overlay-footer-height); padding: 12px var(--ui-overlay-padding);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--ui-overlay-border);
  background: color-mix(in srgb, var(--ui-overlay-surface) 94%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.ui-overlay__danger {
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--ui-overlay-border); color: var(--ui-danger);
}
.ui-overlay__label { display: grid; gap: 6px; color: var(--ui-muted); font-size: 12px; font-weight: 700; }
.ui-overlay__menu-item {
  width: 100%; min-height: var(--ui-control); padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 11px; background: transparent; color: var(--ui-text); text-align: left;
}
.ui-overlay__menu-item:hover { background: var(--ui-surface-subtle); }
.ui-overlay__menu-item--danger { color: var(--ui-danger); }

@keyframes ui-backdrop-in { from { opacity: 0; } }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes ui-popover-in { from { opacity: 0; transform: translateY(7px) scale(.985); } }
.ui-bottom-nav { position: fixed; z-index: var(--ui-z-floating); left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(540px, calc(100% - 24px)); min-height: 66px; padding: 6px; display: grid; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-nav); background: color-mix(in srgb, var(--ui-surface) 94%, transparent); box-shadow: var(--ui-shadow-floating); backdrop-filter: blur(18px); }

@media (max-width: 760px) {
  .ui-content { padding: 22px 16px 92px; }
  .ui-page-header { align-items: flex-start; flex-wrap: wrap; }
  .ui-page-header > div { flex-basis: 100%; }
  .ui-backdrop, .ui-overlay-dismiss { padding: 0; align-items: flex-end; }
  .ui-dialog, .ui-overlay--adaptive {
    width: 100%; max-height: min(var(--ui-overlay-sheet-max-height), var(--visual-viewport-height, 100dvh));
    border-width: 1px 0 0; border-radius: var(--ui-overlay-dialog-radius) var(--ui-overlay-dialog-radius) 0 0;
    animation-name: ui-sheet-in;
  }
  .ui-overlay--adaptive .ui-overlay__header::before, .ui-dialog__header::before {
    content: ""; position: absolute; top: 6px; left: 50%;
    width: 36px; height: 4px; border-radius: 999px;
    background: color-mix(in srgb, var(--ui-faint) 38%, transparent); transform: translateX(-50%);
  }
  .ui-overlay__footer, .ui-dialog__footer { padding-bottom: calc(12px + max(env(safe-area-inset-bottom), var(--tg-content-safe-bottom, 0px))); }
  @keyframes ui-sheet-in { from { opacity: .6; transform: translateY(18px); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}