/* YumYum Admin × Binance Design System
   Layout / components built atop colors_and_type.css tokens.
   Light theme is default — admin UIs read better on white.
*/

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg-subtle);
  color: var(--color-fg-normal);
  font-size: var(--type-body3-size);
  line-height: var(--type-body3-lh);
  letter-spacing: var(--type-body3-ls);
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; }

/* ============ LAYOUT ============ */
.app { display: flex; min-height: 100vh; }

/* ============ SIDEBAR — dark canvas, yellow active ============ */
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--b-canvas-dark);
  color: var(--b-body-on-dark);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--b-hairline-dark);
}
.sidebar-brand {
  padding: 20px 20px 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--b-hairline-dark);
}
.sidebar-brand .logo {
  width: 32px; height: 32px; border-radius: var(--radius-3);
  background: var(--b-yellow);
  display: grid; place-items: center;
  font-weight: 700; color: var(--b-ink); font-size: 16px;
}
.sidebar-brand .name {
  font: var(--type-title2-weight) var(--type-title2-size)/var(--type-title2-lh) var(--font-sans);
  color: var(--b-white);
}
.sidebar-brand .name small {
  display: block; font-size: var(--type-caption2-size); font-weight: 400;
  color: var(--b-muted); margin-top: 2px; letter-spacing: 0;
}

.nav { padding: 12px 12px 24px; overflow-y: auto; flex: 1; }
.nav-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-2);
  color: var(--b-body-on-dark);
  font: var(--type-label1-weight) var(--type-label1-size)/var(--type-label1-lh) var(--font-sans);
  letter-spacing: var(--type-label1-ls);
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-item:hover { background: var(--b-surface-elev-d); }
.nav-item.active {
  background: var(--b-yellow);
  color: var(--b-ink);
}
.nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item .chev { margin-left: auto; opacity: 0.5; transition: transform 0.18s; }
.nav-item.expanded .chev { transform: rotate(180deg); }

.nav-sub { padding-left: 28px; display: flex; flex-direction: column; gap: 1px; margin: 2px 0; }
.nav-sub button {
  padding: 8px 12px;
  font: var(--type-label2-weight) var(--type-label2-size)/var(--type-label2-lh) var(--font-sans);
  letter-spacing: var(--type-label2-ls);
  color: var(--b-muted-strong);
  border-radius: var(--radius-1); text-align: left;
  transition: background 0.12s, color 0.12s;
}
.nav-sub button:hover { color: var(--b-white); background: var(--b-surface-elev-d); }
.nav-sub button.active { color: var(--b-yellow); background: var(--b-surface-elev-d); }

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--b-hairline-dark);
  font-size: var(--type-caption1-size);
  color: var(--b-muted);
}
.sidebar-footer .env { display: flex; align-items: center; gap: 6px; }
.sidebar-footer .env .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--b-trading-up); }

/* ============ MAIN ============ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-line-normal);
  position: sticky; top: 0; z-index: 5;
}
.topbar .crumbs { display: flex; align-items: center; gap: 6px; color: var(--color-fg-alt); font-size: var(--type-caption1-size); }
.topbar .crumbs .now {
  font: var(--type-title1-weight) var(--type-title1-size)/var(--type-title1-lh) var(--font-sans);
  letter-spacing: var(--type-title1-ls);
  color: var(--color-fg-strong);
}
.topbar .spacer { flex: 1; }
.topbar .search {
  display: flex; align-items: center; gap: 8px;
  background: var(--b-surface-strong-l); border: 1px solid var(--color-line-normal);
  padding: 8px 12px; border-radius: var(--radius-3); min-width: 280px;
  color: var(--color-fg-alt);
}
.topbar .search input {
  border: 0; background: transparent; outline: 0; flex: 1;
  font: var(--type-body3-weight) var(--type-body3-size)/var(--type-body3-lh) var(--font-sans);
  color: var(--color-fg-strong);
}
.topbar .iconbtn {
  width: 36px; height: 36px; border-radius: var(--radius-3);
  display: grid; place-items: center;
  color: var(--color-fg-alt);
  position: relative;
}
.topbar .iconbtn:hover { background: var(--b-surface-strong-l); color: var(--color-fg-strong); }
.topbar .iconbtn .badge {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; min-width: 0; padding: 0;
  border-radius: 50%;
  background: var(--b-trading-down); border: 2px solid var(--color-bg-base);
  display: block;
}
.topbar .me {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-normal);
}
.topbar .me .meta { line-height: 1.15; }
.topbar .me .meta .role { font-size: var(--type-caption2-size); color: var(--color-fg-alt); }
.topbar .me .meta .who { font: var(--type-label2-weight) var(--type-label2-size)/var(--type-label2-lh) var(--font-sans); }

/* ============ PAGE ============ */
.page { padding: 28px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.page-head h1 {
  font: var(--type-heading3-weight) var(--type-heading3-size)/var(--type-heading3-lh) var(--font-sans);
  letter-spacing: var(--type-heading3-ls);
  margin: 0; color: var(--color-fg-strong);
}
.page-head .sub {
  color: var(--color-fg-alt);
  font: var(--type-body3-weight) var(--type-body3-size)/var(--type-body3-lh) var(--font-sans);
  margin-top: 4px;
}
.page-head .actions { margin-left: auto; display: flex; gap: 8px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 36px;
  border-radius: var(--radius-2);
  font: var(--type-label1-weight) var(--type-label1-size)/1 var(--font-sans);
  letter-spacing: var(--type-label1-ls);
  transition: all 0.12s;
}
.btn-primary { background: var(--b-yellow); color: var(--b-ink); }
.btn-primary:hover { background: var(--b-yellow-active); }
.btn-ghost {
  color: var(--color-fg-strong);
  border: 1px solid var(--color-line-normal);
  background: var(--color-bg-base);
}
.btn-ghost:hover { background: var(--b-surface-strong-l); border-color: var(--b-border-strong); }
.btn-soft { background: var(--b-yellow-soft); color: #8A6900; }
.btn-soft:hover { background: #FBE889; }
.btn-danger-ghost {
  color: var(--b-trading-down);
  border: 1px solid var(--color-line-normal);
  background: var(--color-bg-base);
}
.btn-danger-ghost:hover { background: var(--b-trading-down-soft); border-color: var(--b-trading-down); }
.btn-sm { height: 30px; padding: 0 10px; font-size: var(--type-label2-size); }
.btn-icon { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: var(--radius-2); }
.btn-icon:hover { background: var(--b-surface-strong-l); }

/* ============ CARDS ============ */
.card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-line-normal);
  border-radius: var(--radius-5);
  padding: 20px;
}
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-h h3 {
  margin: 0;
  font: var(--type-title2-weight) var(--type-title2-size)/var(--type-title2-lh) var(--font-sans);
  letter-spacing: var(--type-title2-ls);
  color: var(--color-fg-strong);
}
.card-h .more { margin-left: auto; }

/* ============ STAT ============ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.stat {
  background: var(--color-bg-base);
  border: 1px solid var(--color-line-normal);
  border-radius: var(--radius-5);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
}
.stat .stat-label { font-size: var(--type-caption1-size); color: var(--color-fg-alt); display: flex; align-items: center; gap: 6px; }
.stat .stat-value {
  font: var(--type-heading3-weight) var(--type-heading3-size)/1.25 var(--font-sans);
  letter-spacing: var(--type-heading3-ls);
  color: var(--color-fg-strong);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.stat .stat-foot { font-size: var(--type-caption1-size); color: var(--color-fg-alt); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.stat .delta { font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.stat .delta.up { color: var(--b-trading-up); }
.stat .delta.down { color: var(--b-trading-down); }
.stat .stat-icon {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: var(--radius-3);
  display: grid; place-items: center;
  background: var(--b-yellow); color: var(--b-ink);
}
.stat.s-blue .stat-icon { background: rgba(59, 130, 246, 0.12); color: var(--b-info); }
.stat.s-green .stat-icon { background: var(--b-trading-up-soft); color: var(--b-trading-up); }
.stat.s-purple .stat-icon { background: rgba(45, 189, 182, 0.14); color: var(--b-accent-turquoise); }

/* ============ BADGES ============ */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-1); font: var(--type-caption2-weight) var(--type-caption2-size)/1.4 var(--font-sans); letter-spacing: var(--type-caption2-ls); }
.badge-warn { background: var(--b-yellow-soft); color: #8A6900; }
.badge-success { background: var(--b-trading-up-soft); color: var(--b-trading-up); }
.badge-danger { background: var(--b-trading-down-soft); color: var(--b-trading-down); }
.badge-info { background: rgba(59,130,246,0.12); color: var(--b-info); }
.badge-neutral { background: var(--color-fill-normal); color: var(--color-fg-alt); }
.badge-brand { background: var(--b-yellow); color: var(--b-ink); }
.badge-pink { background: rgba(45, 189, 182, 0.14); color: var(--b-accent-turquoise); }
.badge-yellow { background: var(--b-yellow-soft); color: #8A6900; }

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-success { background: var(--b-trading-up); }
.dot-warn { background: var(--b-yellow-active); }
.dot-danger { background: var(--b-trading-down); }
.dot-neutral { background: var(--b-muted-strong); }

/* ============ TABLES ============ */
.table-wrap { background: var(--color-bg-base); border: 1px solid var(--color-line-normal); border-radius: var(--radius-5); overflow: hidden; }
.table-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-line-normal); background: var(--color-bg-base); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-line-normal); padding: 0 16px; background: var(--color-bg-base); }
.tab {
  padding: 12px 16px;
  font: var(--type-label1-weight) var(--type-label1-size)/var(--type-label1-lh) var(--font-sans);
  color: var(--color-fg-alt);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--color-fg-strong); }
.tab.active { color: var(--color-fg-strong); border-bottom-color: var(--b-yellow); }
.tab .count { font-weight: 600; margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-fill-normal); color: var(--color-fg-alt); font-size: var(--type-caption2-size); }
.tab.active .count { background: var(--b-yellow); color: var(--b-ink); }

.table { width: 100%; border-collapse: collapse; font-size: var(--type-body3-size); font-variant-numeric: tabular-nums; }
.table thead th {
  text-align: left; padding: 11px 14px; background: var(--b-surface-soft-l);
  font: var(--type-caption1-weight) var(--type-caption1-size)/var(--type-caption1-lh) var(--font-sans);
  font-weight: 600;
  color: var(--color-fg-alt);
  border-bottom: 1px solid var(--color-line-normal); white-space: nowrap;
}
.table tbody td { padding: 14px; border-bottom: 1px solid var(--color-line-normal); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--b-surface-soft-l); }
.table .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.table .checkbox-cell { width: 36px; padding-right: 0; }
.t-mono { font-family: var(--font-mono); font-size: var(--type-caption1-size); color: var(--color-fg-alt); }

.table-foot { display: flex; align-items: center; padding: 12px 16px; border-top: 1px solid var(--color-line-normal); }
.pager { margin-left: auto; display: flex; gap: 4px; }
.pager button {
  width: 30px; height: 30px; border-radius: var(--radius-2);
  display: grid; place-items: center; color: var(--color-fg-alt);
  border: 1px solid transparent; font-size: var(--type-label2-size);
}
.pager button:hover { background: var(--b-surface-strong-l); }
.pager button.active { background: var(--b-yellow); color: var(--b-ink); font-weight: 700; }

/* ============ FORM ============ */
.input, .select {
  height: 34px; padding: 0 10px;
  border-radius: var(--radius-2); border: 1px solid var(--color-line-normal);
  background: var(--color-bg-base); font-size: var(--type-body3-size); color: var(--color-fg-strong);
  outline: none;
}
.input:focus, .select:focus { border-color: var(--b-yellow-active); box-shadow: 0 0 0 3px rgba(252,213,53,0.25); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: var(--type-label2-weight) var(--type-label2-size)/var(--type-label2-lh) var(--font-sans); color: var(--color-fg-alt); }

/* ============ CHARTS ============ */
.chart { width: 100%; height: 240px; }

/* ============ MISC ============ */
.checkbox {
  width: 16px; height: 16px; border: 1.5px solid var(--b-border-strong);
  border-radius: var(--radius-1); background: var(--color-bg-base); display: inline-grid; place-items: center;
}
.checkbox.checked { background: var(--b-yellow); border-color: var(--b-yellow-active); }
.checkbox.checked::after { content: ''; width: 8px; height: 5px; border-left: 2px solid var(--b-ink); border-bottom: 2px solid var(--b-ink); transform: rotate(-45deg); margin-bottom: 2px; }

.thumb {
  width: 36px; height: 36px; border-radius: var(--radius-3);
  background: var(--b-yellow-soft);
  display: grid; place-items: center; color: #8A6900;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}

.kbd-divider { width: 1px; height: 18px; background: var(--color-line-normal); }

/* drawer */
.drawer-bd {
  position: fixed; inset: 0; background: rgba(11,14,17,0.5);
  z-index: 50;
  animation: fade 0.16s ease-out;
}
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 520px; background: var(--color-bg-base);
  z-index: 51;
  display: flex; flex-direction: column;
  animation: slide-in 0.22s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow: var(--shadow-emphasize-xlarge);
}
@keyframes fade { from { opacity: 0;} to {opacity: 1;}}
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-h {
  padding: 16px 20px; border-bottom: 1px solid var(--color-line-normal);
  display: flex; align-items: center; gap: 12px;
}
.drawer-h h3 {
  margin: 0;
  font: var(--type-title1-weight) var(--type-title1-size)/var(--type-title1-lh) var(--font-sans);
  color: var(--color-fg-strong);
}
.drawer-b { padding: 20px; flex: 1; overflow-y: auto; }
.drawer-f { padding: 14px 20px; border-top: 1px solid var(--color-line-normal); display: flex; gap: 8px; justify-content: flex-end; }

.spec { display: grid; grid-template-columns: 130px 1fr; row-gap: 10px; column-gap: 16px; font-size: var(--type-body3-size); }
.spec dt { color: var(--color-fg-alt); font-weight: 500; }
.spec dd { margin: 0; color: var(--color-fg-strong); font-weight: 500; }

.seg { display: inline-flex; padding: 3px; background: var(--b-surface-strong-l); border-radius: var(--radius-3); gap: 2px; }
.seg button { padding: 6px 12px; border-radius: var(--radius-2); font: var(--type-label2-weight) var(--type-label2-size)/1 var(--font-sans); color: var(--color-fg-alt); }
.seg button.active { background: var(--color-bg-base); color: var(--color-fg-strong); box-shadow: var(--shadow-normal-xsmall); }

/* ============ LOGIN PAGE ============ */
.login-shell {
  min-height: 100vh; width: 100%;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--color-bg-base);
}
.login-hero {
  position: relative; overflow: hidden;
  padding: 44px 56px;
  background: var(--b-canvas-dark);
  color: var(--b-body-on-dark);
  display: flex; flex-direction: column;
}
.login-hero-top { position: relative; z-index: 2; }
.login-hero-top .brand-row { display: flex; align-items: center; gap: 12px; }
.login-hero-top .brand-logo {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--b-yellow-base); color: var(--b-yellow-on-yellow);
  font-weight: 800; font-size: 18px;
}
.login-hero-top .brand-name {
  font: var(--type-title1-weight) var(--type-title1-size)/var(--type-title1-lh) var(--font-sans);
  letter-spacing: -0.01em;
}
.login-hero-top .brand-name small {
  display: block; font-weight: 400; font-size: 12px; opacity: 0.6; margin-top: 2px;
  letter-spacing: 0;
}
.login-hero-mid {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 2;
}
.login-hero-mid h1 {
  margin: 0;
  font-size: 52px; line-height: 1.1; font-weight: 700;
  letter-spacing: -0.02em;
}
.login-hero-mid h1 br + * { display: inline; }
.login-hero-mid p {
  margin-top: 18px;
  font-size: 16px; line-height: 1.65;
  color: rgba(255,255,255,0.7);
}
.login-hero-stats {
  display: flex; gap: 24px; align-items: center;
  position: relative; z-index: 2;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08);
}
.login-hero-stats .div { width: 1px; height: 32px; background: rgba(255,255,255,0.1); }
.login-hero-stats .num {
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--b-yellow-base);
}
.login-hero-stats .lbl { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }

.login-hero-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.login-hero-bg .blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4;
}
.login-hero-bg .b1 { width: 360px; height: 360px; background: var(--b-yellow-base); top: -120px; right: -80px; opacity: 0.18; }
.login-hero-bg .b2 { width: 260px; height: 260px; background: #FF8500; bottom: 80px; right: 40px; opacity: 0.15; }
.login-hero-bg .b3 { width: 220px; height: 220px; background: #FF91C7; bottom: -60px; left: 60px; opacity: 0.12; }

.login-main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 32px;
  position: relative;
}
.login-card {
  width: 100%; max-width: 400px;
}
.login-card-h { margin-bottom: 28px; }
.login-card-h h2 {
  margin: 0;
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fg-strong);
}
.login-card-h p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--color-fg-alt);
}

.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-form .field { gap: 8px; }
.login-form .field label {
  font-size: 13px; font-weight: 600; color: var(--color-fg-normal);
}
.login-input {
  height: 46px !important;
  font-size: 15px !important;
  padding: 0 14px !important;
  border-radius: var(--radius-3) !important;
}
.login-hint { font-size: 12px; color: var(--color-fg-alt); margin-top: 2px; }
.login-hint code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--b-surface-strong-l); color: var(--color-fg-strong);
  font-family: var(--font-mono); font-size: 11.5px;
}

.login-row { display: flex; align-items: center; justify-content: space-between; }
.login-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--color-fg-normal);
  cursor: pointer; user-select: none;
}
.login-forgot {
  font-size: 13px; font-weight: 600; color: var(--color-fg-alt);
  text-decoration: none;
}
.login-forgot:hover { color: var(--color-fg-strong); }

.login-error {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--color-bg-danger-subtle, #FDECEC);
  border: 1px solid rgba(229,34,34,0.18);
  border-radius: var(--radius-2);
  color: var(--b-red-base, #E52222);
  font-size: 13px; font-weight: 500;
}

.login-submit {
  height: 48px !important;
  font-size: 15px !important;
  border-radius: var(--radius-3) !important;
  margin-top: 4px;
  justify-content: center;
}
.login-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.login-foot {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--color-line-normal);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--color-fg-alt);
}
.login-foot a { color: var(--color-fg-strong); font-weight: 600; text-decoration: none; }

.login-bottom {
  position: absolute; bottom: 24px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 12px; color: var(--color-fg-alt);
}
.login-bottom a { color: var(--color-fg-alt); text-decoration: none; }
.login-bottom a:hover { color: var(--color-fg-normal); }
.login-bottom .div { width: 3px; height: 3px; border-radius: 50%; background: var(--color-line-normal); }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { display: none; }
}