@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  --bg: #ffffff;
  --bg2: #f5f0e8;
  --panel: rgba(255,255,255,.96);
  --line: rgba(23,46,70,.08);
  --line2: rgba(23,46,70,.16);
  --text: #172e46;
  --text2: #42566b;
  --text3: #71808e;
  --accent: #c87a2a;
  --accent2: #172e46;
  --warm: #c87a2a;
  --ok: #2f7d52;
  --warn: #c87a2a;
  --danger: #9b4634;
  --r1: 12px;
  --r2: 8px;
  --r3: 6px;
  --shadow: 0 1px 3px rgba(23,46,70,.08), 0 1px 2px rgba(23,46,70,.04);
}

/* ==========================================================================
   RESET & GLOBAL
   ========================================================================== */
* { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }

body {
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, #fcfaf6 40%, #f5f0e8 100%);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit }

/* ==========================================================================
   LAYOUT SHELL
   ========================================================================== */
.app {
  min-height: 100vh;
  padding: 40px 32px calc(48px + env(safe-area-inset-bottom));
}
.wrap {
  position: relative;
  width: min(1280px, 100%);
  margin: 0 auto;
}

/* ==========================================================================
   GLASS PANELS & CARDS
   ========================================================================== */
.glass {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
}

/* ==========================================================================
   BRAND
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.brand-logo {
  width: auto;
  height: 44px;
  max-width: min(200px, 48vw);
  object-fit: contain;
  flex-shrink: 0;
}
.brand-copy { display: grid; gap: 2px }
.mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent2));
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.brand-name,
.hero-title,
.section-title,
.auth-title,
.story-title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand-name { font-size: 20px; line-height: 1.2 }
.brand-sub, .copy, .muted { color: var(--text2); font-size: 14px }

/* ==========================================================================
   EYEBROW
   ========================================================================== */
.eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.eyebrow:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--accent));
}

/* ==========================================================================
   AUTH LAYOUT
   ========================================================================== */
.auth-layout {
  min-height: calc(100vh - 80px);
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(340px, .95fr);
  gap: 0;
}
.auth-layout-single {
  grid-template-columns: minmax(340px, 520px);
  justify-content: center;
  align-items: center;
}

.story, .auth { padding: 40px }
.story {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 560px;
  background: linear-gradient(180deg, rgba(200,122,42,.05), rgba(245,240,232,.7));
  border-right: 1px solid var(--line);
}
.story:before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(200,122,42,.12), transparent 70%);
}
.story:after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -30px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(23,46,70,.08), transparent 72%);
}
.story-body, .pill-row { position: relative; z-index: 1 }
.story-title {
  margin-top: 28px;
  max-width: 16ch;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1;
}
.story-copy {
  max-width: 54ch;
  margin-top: 20px;
  color: var(--text2);
  line-height: 1.65;
}
.story-list { display: grid; gap: 16px; margin-top: 32px }
.story-item {
  padding: 16px 18px;
  border-radius: var(--r2);
  border: 1px solid rgba(23,46,70,.06);
  background: rgba(255,255,255,.82);
}
.story-item h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600 }
.story-item p { margin: 0; color: var(--text2); font-size: 14px; line-height: 1.6 }

/* ==========================================================================
   PILLS / BADGES
   ========================================================================== */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.pill-slate { background: rgba(23,46,70,.05); border-color: rgba(23,46,70,.06); color: var(--text2) }
.pill-accent, .pill-warning { background: rgba(200,122,42,.1); border-color: rgba(200,122,42,.16); color: var(--accent) }
.pill-success { background: rgba(47,125,82,.1); border-color: rgba(47,125,82,.16); color: var(--ok) }
.pill-danger { background: rgba(155,70,52,.08); border-color: rgba(155,70,52,.14); color: var(--danger) }

/* ==========================================================================
   AUTH FORM
   ========================================================================== */
.auth { display: grid; gap: 28px; align-self: center }
.auth-single { width: min(520px, 100%); margin: 0 auto }
.auth-title { font-size: 28px; line-height: 1.15 }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0;
  color: var(--text3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.auth-divider:before, .auth-divider:after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(23,46,70,.1);
}

/* ==========================================================================
   STACKS & GRIDS
   ========================================================================== */
.stack, .auth-form, .field-grid, .shell, .rail, .workspace,
.domain-list, .tab-grid, .list, .code-list {
  display: grid;
  gap: 16px;
}
.stack { gap: 20px }
.shell { gap: 28px }
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
.field-grid > .full { grid-column: 1 / -1 }
.field { display: grid; gap: 10px }
.label {
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   INPUTS & FORMS
   ========================================================================== */
.input, .textarea {
  width: 100%;
  color: var(--text);
  background: #fff;
  border: 1px solid rgba(23,46,70,.12);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,122,42,.15), 0 0 0 1px rgba(200,122,42,.3);
  background: #fff;
}
.textarea { min-height: 160px; resize: vertical }
.help { color: var(--text3); font-size: 13px; line-height: 1.6 }

/* ==========================================================================
   BANNERS / ALERTS
   ========================================================================== */
.banner {
  padding: 16px 20px;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  line-height: 1.6;
  font-size: 14px;
  animation: slideDown .25s ease;
}
.banner-error { border-color: rgba(155,70,52,.18); background: rgba(155,70,52,.06); color: var(--danger) }
.banner-info { border-color: rgba(23,46,70,.1); background: rgba(23,46,70,.04); color: var(--accent2) }
.banner-warning { border-color: rgba(200,122,42,.18); background: rgba(200,122,42,.06); color: var(--accent) }
.banner-success { border-color: rgba(47,125,82,.18); background: rgba(47,125,82,.06); color: var(--ok) }
.banner-slate { border-color: rgba(23,46,70,.08); background: rgba(245,240,232,.7); color: var(--text2) }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.actions, .hero-actions, .shell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.btn:hover:not(:disabled) {
  transform: none;
}
.btn:active:not(:disabled) {
  transform: none;
}
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.btn:focus-visible, .domain-btn:focus-visible, .tab-container .tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(200,122,42,.16);
}
.btn-primary:hover:not(:disabled) {
  background: #b86f23;
  box-shadow: 0 4px 14px rgba(200,122,42,.2);
}
.btn-secondary {
  color: var(--text);
  background: transparent;
  border-color: rgba(23,46,70,.14);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(23,46,70,.03);
  border-color: rgba(23,46,70,.22);
}
.btn-danger {
  color: var(--danger);
  background: transparent;
  border-color: rgba(155,70,52,.16);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(155,70,52,.04);
}
.btn-lg { padding: 10px 20px; font-size: 15px }
.btn-sm { min-height: 32px; padding: 6px 12px; font-size: 13px }

/* ==========================================================================
   SHELL HEADER
   ========================================================================== */
.shell-head, .hero, .card, .empty { padding: 32px }
.shell-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.shell-actions { justify-content: flex-end }

/* ==========================================================================
   SIDEBAR / RAIL
   ========================================================================== */
.shell-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
}
.rail {
  position: sticky;
  top: 32px;
  align-self: start;
}
.card { border-radius: var(--r2) }
.account { display: grid; gap: 24px }
.account-top { display: flex; gap: 14px; align-items: center }
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(200,122,42,.14), rgba(23,46,70,.06));
  border: 1px solid rgba(23,46,70,.08);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.account-name {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}
.account-email { color: var(--text2); font-size: 13px; word-break: break-word }

.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.mini {
  padding: 16px;
  border-radius: var(--r3);
  border: 1px solid rgba(23,46,70,.06);
  background: rgba(245,240,232,.5);
}
.mini-label { color: var(--text3); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none }
.mini-value {
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* ==========================================================================
   DOMAIN LIST
   ========================================================================== */
.domain-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 4px;
}
.domain-btn {
  width: 100%;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 14px 16px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.domain-btn:hover:not(.active) {
  background: rgba(23,46,70,.02);
  transform: none;
}
.domain-btn.active {
  background: rgba(200,122,42,.04);
  border-color: transparent;
  border-left-color: var(--accent);
  box-shadow: none;
}
.domain-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}
.domain-sub { margin-top: 6px; color: var(--text3); font-size: 12px }

/* ==========================================================================
   TABS
   ========================================================================== */
.tab-container { margin-bottom: 20px }
.tab-container .tab-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--line);
}
.tab-container .tab-btn {
  flex: 0 1 auto;
  text-align: center;
  min-height: 38px;
  padding: 12px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  color: var(--text3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.tab-container .tab-btn:hover:not(.active) {
  background: transparent;
  color: var(--text);
  transform: none;
}
.tab-container .tab-btn.active {
  background: transparent;
  color: var(--text);
  box-shadow: none;
  border-color: transparent;
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto;
  gap: 32px;
  align-items: start;
  padding: 36px 32px;
}
.hero > div:first-child { min-width: 0 }
.hero-title {
  margin-top: 16px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  word-break: break-word;
}
.hero-copy, .section-copy, .item-copy, .metric-copy {
  color: var(--text2);
  font-size: 14px;
  line-height: 1.65;
}
.hero-copy { max-width: 52ch; margin-top: 12px }
.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 14px;
  width: min(380px, 100%);
  align-self: start;
}
.hero-actions .btn { width: 100% }
.hero-website { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 24px }
.hero-website .btn { min-width: 160px }
.hero-verification-alert { margin-top: 16px }

/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */
.section-title {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.metric-grid, .content-grid, .settings-grid { display: grid; gap: 24px }
.metric-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px }
.content-grid, .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }

.metric-grid .card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 2px solid rgba(23,46,70,.05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.metric-grid .card:hover {
  box-shadow: 0 2px 5px rgba(23,46,70,.08);
  transform: none;
}

.metric-title, .mini-label {
  color: var(--text3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.metric-value {
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}
.metric-copy { margin-top: 14px; font-size: 13px }

.row-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid rgba(23,46,70,.06);
}
.row-item:first-child { border-top: 0; padding-top: 0 }
.row-item:last-child { padding-bottom: 0 }
.item-title { font-size: 15px; font-weight: 600 }

.code-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
.code-chip {
  padding: 14px 16px;
  border-radius: var(--r3);
  border: 1px solid rgba(23,46,70,.08);
  background: rgba(255,255,255,.82);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.code-chip-pending { opacity: .6; border-style: dashed }

.note {
  padding: 16px 20px;
  border-radius: var(--r3);
  border: 1px solid rgba(200,122,42,.14);
  background: rgba(200,122,42,.05);
  color: var(--accent2);
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   HELPERS
   ========================================================================== */
.stack-tight { gap: 8px }
.stack-gap-sm { gap: 14px }
.stack-gap-md { gap: 24px }
.space-top-sm { margin-top: 14px }
.space-top-md { margin-top: 20px }
.section-copy, .note, .metric-copy, .item-copy { overflow-wrap: anywhere }
.metric-grid-transfer { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.metric-grid-transfer > .glass { min-height: 100% }
.metric-grid-transfer { align-items: stretch }
.metric-value-compact { font-size: 17px; line-height: 1.45 }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty { border-radius: var(--r2) }
.empty h2 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 24px;
}
.empty p { margin: 10px 0 0; color: var(--text2); line-height: 1.65 }

/* ==========================================================================
   REGISTRAR SYNC PANEL
   ========================================================================== */
.resource-list { display: grid; gap: 18px }
.resource-item {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid rgba(23,46,70,.06);
}
.resource-item:first-child { border-top: 0; padding-top: 0 }
.resource-item:last-child { padding-bottom: 0 }

.sync-panel { display: grid; gap: 24px }
.sync-panel-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start }
.sync-list, .sync-grid { display: grid; gap: 16px }
.sync-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) }
.sync-item, .sync-stat {
  padding: 14px 16px;
  border-radius: var(--r3);
  border: 1px solid rgba(23,46,70,.06);
  background: rgba(255,255,255,.82);
}
.sync-item { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start }
.sync-stat-label { color: var(--text3); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none }
.sync-stat-value {
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

/* ==========================================================================
   SUPPORT
   ========================================================================== */
.checkline { display: flex; align-items: center; gap: 10px; color: var(--text2); font-size: 14px }
.checkline input { width: 18px; height: 18px; accent-color: var(--accent) }
.textarea-compact { min-height: 120px }
.support-trigger { min-height: 38px; padding: 9px 14px; font-size: 13px }
.support-card { display: grid; gap: 24px }
.support-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start }
.support-form { gap: 24px }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px) }
  to { opacity: 1; transform: translateY(0) }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px) }
  to { opacity: 1; transform: translateY(0) }
}

.workspace { animation: fadeIn .2s ease }

/* ==========================================================================
   RESPONSIVE: 1080px
   ========================================================================== */
@media (max-width: 1080px) {
  .auth-layout,
  .shell-grid,
  .content-grid,
  .settings-grid { grid-template-columns: 1fr }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rail { position: static }
  .hero { grid-template-columns: 1fr }
  .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .metric-grid-transfer { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
}

/* ==========================================================================
   RESPONSIVE: 860px
   ========================================================================== */
@media (max-width: 860px) {
  .app { padding: 24px 16px 32px }
  .story, .auth, .shell-head, .hero, .card, .empty { padding: 26px }
  .shell-head { flex-direction: column; align-items: flex-start }
  .shell-actions, .hero-actions { width: 100% }
  .shell-actions .btn, .hero-actions .btn { flex: 1 1 calc(50% - 6px) }
  .field-grid, .mini-grid { grid-template-columns: 1fr }
  .account-top, .row-item { flex-direction: column }
  .hero { gap: 20px }
  .hero-website { width: 100% }
  .hero-website .btn { flex: 1 1 calc(50% - 6px); min-width: 0 }

  .domain-list {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
    padding-right: 0;
  }
  .domain-btn { min-height: 52px }
  .tab-container .tab-grid { flex-wrap: wrap }
  .story { min-height: auto }
  .resource-item, .sync-item, .sync-panel-head, .support-head { flex-direction: column }
  .resource-item .actions, .sync-item .actions { width: 100% }
  .resource-item .actions .btn { width: 100% }
}

/* ==========================================================================
   RESPONSIVE: 640px
   ========================================================================== */
@media (max-width: 640px) {
  :root { --r1: 10px; --r2: 6px; --r3: 4px }
  .app { padding: 16px 12px calc(28px + env(safe-area-inset-bottom)) }
  .story, .auth, .shell-head, .hero, .card, .empty { padding: 22px }
  .brand { gap: 10px }
  .brand-logo { height: 38px; max-width: min(170px, 62vw) }
  .brand-name { font-size: 18px }
  .auth-title { font-size: 24px }
  .hero-title { font-size: clamp(22px, 9vw, 30px) }
  .copy, .help, .hero-copy, .section-copy, .item-copy, .metric-copy, .domain-sub { font-size: 13px }
  .pill { font-size: 11px; padding: 3px 8px }
  .metric-grid, .content-grid, .settings-grid, .field-grid,
  .mini-grid, .code-list { grid-template-columns: 1fr }
  .tab-container .tab-grid { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch }
  .shell { gap: 16px }
  .shell-actions .btn, .hero-actions .btn, .actions .btn { flex: 1 1 100%; width: 100% }
  .hero-actions { grid-template-columns: 1fr }
  .hero-website { display: grid; grid-template-columns: 1fr; width: 100% }
  .hero-website .btn, .btn-lg { width: 100% }
  .row-item { gap: 12px; padding: 0; border-top: 0 }
  .row-item + .row-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(23,46,70,.06) }
  .row-item .actions { width: 100% }
  .row-item .actions .btn { width: 100% }
  .note, .banner { padding: 14px 16px }
  .input, .textarea { padding: 12px }
  .textarea { min-height: 140px }
  .metric-grid-transfer { grid-template-columns: 1fr }
  .metric-value { font-size: clamp(22px, 7vw, 26px) }
  .metric-value-compact { font-size: 16px; line-height: 1.4 }
  .section-title { font-size: 18px }
  .row-item + .row-item { border-top-color: rgba(23,46,70,.06) }
}

/* ==========================================================================
   RESPONSIVE: 420px
   ========================================================================== */
@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr }
  .metric-value { font-size: 22px }
  .account-name { font-size: 16px }
}