:root {
  color-scheme: dark;
  --bg: #0a0d08;
  --surface: #131810;
  --surface-2: #1a2115;
  --surface-3: #20291a;
  --lime: #c8ff3d;
  --lime-2: #a9e91f;
  --lime-soft: rgba(200, 255, 61, .10);
  --ink: #f4f8ed;
  --muted: #a4ad99;
  --faint: #70796a;
  --border: rgba(255, 255, 255, .085);
  --border-strong: rgba(200, 255, 61, .30);
  --danger: #ff6470;
  --warning: #f5a83b;
  --success: #58dc91;
  --shadow: 0 20px 70px rgba(0, 0, 0, .36);
  --radius: 20px;
  --nav-h: 70px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  background:
    radial-gradient(46rem 28rem at 80% -12%, rgba(200, 255, 61, .12), transparent 68%),
    radial-gradient(30rem 24rem at 4% 100%, rgba(112, 255, 81, .055), transparent 70%),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a, .list-item, .tab { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 0;
  border-color: var(--border-strong) !important;
  box-shadow: 0 0 0 4px rgba(200, 255, 61, .12) !important;
}
.hidden { display: none !important; }

.boot-screen, .login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.boot-inner { text-align: center; }
.boot-brand { justify-content: center; margin-bottom: 8px; }
.boot-screen p { color: var(--muted); font-size: 12px; }
.login-card {
  width: min(390px, 100%);
  padding: 32px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(19, 24, 16, .88);
  backdrop-filter: blur(26px);
  box-shadow: var(--shadow);
}
.login-mark, .brand-mark {
  display: grid;
  place-items: center;
  color: #10140c;
  background: linear-gradient(145deg, #ddff87, #a8e61e);
  box-shadow: 0 12px 34px rgba(168, 230, 30, .18);
}
.login-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 900;
}
.login-card h2 { font-size: 22px; letter-spacing: -.04em; }
.login-hint {
  margin: 9px 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.login-card input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  background: var(--surface-2);
}
.login-error { margin-top: 12px; color: var(--danger); font-size: 12px; }

#app {
  width: min(1180px, 100%);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.header {
  min-height: 78px;
  padding: 14px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-wrap { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
}
.brand { display: flex; gap: 4px; font-size: 14px; font-weight: 850; letter-spacing: -.03em; }
.brand b { color: var(--lime); }
.brand-sub {
  margin-top: 2px;
  color: var(--faint);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .16em;
}
.header-stat {
  min-width: 92px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255,255,255,.03);
}
.header-stat span { display: block; color: var(--faint); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.header-stat strong { display: block; margin-top: 2px; color: var(--lime); font-size: 15px; }

.screen {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 14px calc(var(--nav-h) + var(--safe-b) + 18px);
  scrollbar-width: thin;
  scrollbar-color: rgba(200,255,61,.25) transparent;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: block; animation: screen-in .22s var(--ease); }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } }
.screen-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 2px 20px;
}
.screen-head h1 {
  margin-top: 4px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.06em;
}
.screen-head h1 small { color: var(--lime); font-size: .45em; letter-spacing: -.02em; }
.screen-head > p { max-width: 320px; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: right; }
.screen-head.compact { align-items: center; }
.eyebrow { color: var(--lime); font-size: 8px; font-weight: 850; letter-spacing: .18em; }

.search-wrap {
  width: min(260px, 48vw);
  height: 40px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  transition: .18s var(--ease);
}
.search-wrap:focus-within {
  border-color: rgba(200,255,61,.30);
  background: rgba(200,255,61,.055);
  box-shadow: 0 0 0 4px rgba(200,255,61,.07);
}
.search-wrap svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linecap: round; }
.search {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 11px;
}
.search::placeholder { color: var(--faint); }

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.metric-card, .panel, .list-item, .detail-card, .client-card, .channel-card {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(26,33,21,.96), rgba(18,23,15,.96));
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}
.metric-card {
  position: relative;
  min-height: 116px;
  padding: 18px;
  overflow: hidden;
  border-radius: var(--radius);
}
.metric-card.primary {
  border-color: rgba(200,255,61,.20);
  background: linear-gradient(145deg, #223015, #172010);
}
.metric-card.primary:after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(200,255,61,.11);
  filter: blur(2px);
}
.metric-label { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.metric-value { position: relative; z-index: 1; margin-top: 14px; font-size: 29px; font-weight: 780; letter-spacing: -.055em; }
.metric-note { margin-top: 6px; color: var(--faint); font-size: 9px; }

.dashboard-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 12px; }
.panel { margin-bottom: 12px; padding: 17px; border-radius: var(--radius); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.panel h2 { margin-top: 3px; font-size: 15px; letter-spacing: -.03em; }
.counter {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #11140d;
  background: var(--lime);
  font-size: 11px;
  font-weight: 850;
}
.attention-list { display: grid; gap: 7px; }
.attention-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}
.attention-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.attention-item.error i { background: var(--danger); }
.attention-item.ok i { background: var(--success); }
.attention-item b { display: block; font-size: 10px; }
.attention-item span { color: var(--faint); font-size: 9px; }
.attention-item strong { font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-item { padding: 12px; border-radius: 13px; background: rgba(255,255,255,.035); }
.stat-item span { display: block; color: var(--faint); font-size: 9px; }
.stat-item strong { display: block; margin-top: 5px; font-size: 19px; }

.tabs {
  display: flex;
  gap: 6px;
  max-width: 380px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
}
.tab {
  flex: 1;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 750;
  transition: .18s var(--ease);
}
.tab.active { color: #11140d; background: var(--lime); box-shadow: 0 7px 20px rgba(168,230,30,.14); }
.list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.list-item {
  width: 100%;
  padding: 15px;
  border-radius: 17px;
  color: inherit;
  text-align: left;
  transition: .17s var(--ease);
}
.list-item:hover, .client-card:hover { transform: translateY(-2px); border-color: rgba(200,255,61,.19); box-shadow: var(--shadow); }
.list-item:active, .client-card:active { transform: scale(.988); }
.list-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.order-identity { display: flex; align-items: center; gap: 7px; min-width: 0; }
.list-item-id { color: var(--lime); font-size: 10px; font-weight: 820; }
.client-tag {
  max-width: 155px;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid rgba(200,255,61,.14);
  border-radius: 999px;
  color: var(--lime);
  background: rgba(200,255,61,.06);
  font-size: 8px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-item-amt { font-size: 15px; font-weight: 740; }
.list-item-amt span { color: var(--muted); font-size: 9px; font-weight: 650; }
.list-item-meta { margin-top: 5px; color: var(--faint); font-size: 9px; }
.payment-card {
  margin: 4px 0 6px;
  padding: 10px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(200,255,61,.13);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(200,255,61,.07), rgba(255,255,255,.018));
}
.payment-card.compact { margin: 10px 0 8px; padding: 8px 9px; grid-template-columns: 31px minmax(0, 1fr) auto; border-radius: 12px; }
.payment-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200,255,61,.22);
  border-radius: 11px;
  color: var(--lime);
  background: rgba(200,255,61,.09);
  box-shadow: inset 0 0 18px rgba(200,255,61,.035);
}
.payment-card.compact .payment-icon { width: 31px; height: 31px; border-radius: 10px; }
.payment-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.payment-icon--stars { color: #ffd75a; border-color: rgba(255,215,90,.24); background: rgba(255,215,90,.085); }
.payment-icon--stars svg, .payment-icon--bnb svg, .payment-icon--sol svg { fill: currentColor; stroke: none; }
.payment-icon--cryptobot { color: #62bdf5; border-color: rgba(98,189,245,.24); background: rgba(98,189,245,.08); }
.payment-icon--usdt { color: #53d6a5; border-color: rgba(83,214,165,.25); background: rgba(83,214,165,.08); }
.payment-icon--ton { color: #50a7f8; border-color: rgba(80,167,248,.25); background: rgba(80,167,248,.08); }
.payment-icon--trx { color: #ff6271; border-color: rgba(255,98,113,.25); background: rgba(255,98,113,.08); }
.payment-icon--sol { color: #9b72ff; border-color: rgba(155,114,255,.25); background: rgba(155,114,255,.08); }
.payment-icon--bnb { color: #f5ba38; border-color: rgba(245,186,56,.25); background: rgba(245,186,56,.08); }
.payment-icon--eth { color: #8aa4ff; border-color: rgba(138,164,255,.25); background: rgba(138,164,255,.08); }
.payment-copy, .payment-route { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.payment-copy small, .payment-route small { color: var(--faint); font-size: 7px; font-weight: 650; }
.payment-copy strong { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.payment-route { max-width: 120px; align-items: flex-end; text-align: right; }
.payment-route b { overflow: hidden; max-width: 100%; color: var(--lime); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.payment-route small { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.mode-chip {
  margin-right: 6px;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(88,220,145,.24);
  border-radius: 999px;
  color: var(--success) !important;
  background: rgba(88,220,145,.08);
  font-size: 7px;
  font-weight: 820;
  white-space: nowrap;
}
.mode-chip.manual {
  color: var(--warning) !important;
  border-color: rgba(245,168,59,.24);
  background: rgba(245,168,59,.08);
}
.badge {
  padding: 4px 8px;
  border: 1px solid rgba(88,220,145,.24);
  border-radius: 999px;
  color: var(--success);
  background: rgba(88,220,145,.08);
  font-size: 8px;
  font-weight: 750;
}
.badge.pending { color: var(--warning); border-color: rgba(245,168,59,.24); background: rgba(245,168,59,.08); }
.badge.cancel { color: var(--danger); border-color: rgba(255,100,112,.24); background: rgba(255,100,112,.08); }

.back-btn {
  margin: 6px 0 12px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  color: var(--lime);
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}
.back-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.detail-card { padding: 19px; border-radius: var(--radius); }
.order-client-head {
  margin-bottom: 16px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.order-client-head h3 { font-size: 19px; letter-spacing: -.035em; }
.order-client-head p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.chat-btn, .client-chat {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(200,255,61,.22);
  border-radius: 11px;
  color: var(--lime);
  background: rgba(200,255,61,.075);
  font-size: 9px;
  font-weight: 760;
  text-decoration: none;
}
.chat-btn svg, .client-chat svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.detail-row:last-child { border: 0; }
.detail-row > span:first-child { color: var(--muted); }
.detail-row code { max-width: 62%; color: var(--ink); font-size: 10px; text-align: right; word-break: break-all; }
.detail-card > .payment-card { margin: 10px 0; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.btn {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 820;
}
.btn-primary { color: #11140d; background: linear-gradient(145deg, #dbff83, #adeb22); box-shadow: 0 10px 28px rgba(168,230,30,.14); }
.btn-danger { color: var(--danger); border-color: rgba(255,100,112,.24); background: rgba(255,100,112,.08); }

.client-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.client-tools { display: flex; align-items: center; gap: 8px; }
.client-tools .btn { min-height: 40px; white-space: nowrap; }
.manual-client-form { margin-bottom: 12px; }
.client-notes { min-height: 30px; margin: -2px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.client-chat--off { display: grid; place-items: center; min-height: 37px; color: var(--faint); border: 1px solid var(--border); border-radius: 11px; font-size: 9px; }
.client-card {
  padding: 16px;
  border-radius: 18px;
  transition: .17s var(--ease);
}
.client-card-head { display: flex; align-items: center; gap: 10px; }
.client-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #11140d;
  background: linear-gradient(145deg, #dfff8e, #a8e91e);
  font-size: 12px;
  font-weight: 900;
}
.client-main { min-width: 0; }
.client-main b { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.client-main span { display: block; margin-top: 3px; color: var(--faint); font-size: 9px; }
.client-meta {
  margin: 14px 0 11px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.client-meta span { color: var(--faint); font-size: 8px; }
.client-meta strong { display: block; margin-top: 3px; color: var(--ink); font-size: 11px; }
.client-chat { width: 100%; }

.task-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.task-summary-card {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(255,255,255,.028);
}
.task-summary-card span { display: block; color: var(--faint); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.task-summary-card strong { display: block; margin-top: 5px; font-size: 20px; letter-spacing: -.04em; }
.task-summary-card.alert strong { color: var(--danger); }
.task-summary-card.today strong { color: var(--lime); }
.task-form { border-color: rgba(200,255,61,.18); }
.task-field-grid { grid-template-columns: 1.3fr .8fr .55fr; }
.task-notes-field { grid-column: 1 / -1; }
.field select, .field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255,255,255,.035);
}
.field select { height: 43px; padding: 0 12px; }
.field textarea { min-height: 80px; padding: 11px 12px; resize: vertical; line-height: 1.45; }
.task-tabs { margin-top: 2px; }
.task-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.task-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(26,33,21,.96), rgba(18,23,15,.96));
  transition: .17s var(--ease);
}
.task-card:hover { transform: translateY(-2px); border-color: rgba(200,255,61,.19); box-shadow: var(--shadow); }
.task-card.done { opacity: .62; }
.task-card.overdue { border-color: rgba(255,100,112,.28); }
.task-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200,255,61,.30);
  border-radius: 9px;
  color: var(--lime);
  background: rgba(200,255,61,.06);
}
.task-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.task-card.done .task-check { color: #11140d; background: var(--lime); }
.task-content { min-width: 0; }
.task-title-row { display: flex; align-items: center; gap: 7px; }
.task-content h3 { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-card.done h3 { text-decoration: line-through; }
.task-priority { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--muted); }
.task-priority.high { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,100,112,.08); }
.task-priority.low { background: var(--success); }
.task-notes { margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.45; white-space: pre-line; }
.task-due { margin-top: 9px; color: var(--faint); font-size: 8px; }
.task-card.overdue .task-due { color: var(--danger); font-weight: 760; }
.task-menu { display: flex; align-items: flex-start; gap: 4px; }
.task-icon-btn {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
}
.task-icon-btn.danger { color: var(--danger); }
.task-icon-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.delivery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.delivery-card {
  padding: 14px;
  border: 1px solid rgba(88,220,145,.18);
  border-radius: 15px;
  background: rgba(88,220,145,.045);
}
.delivery-card.manual {
  border-color: rgba(245,168,59,.18);
  background: rgba(245,168,59,.04);
}
.delivery-card.setup {
  border-color: rgba(255,100,112,.20);
  background: rgba(255,100,112,.045);
}
.delivery-card.unavailable { border-color: rgba(255,100,112,.20); background: rgba(255,100,112,.045); }
.delivery-card.unavailable .delivery-status { color: var(--danger); }
.delivery-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.delivery-product { color: var(--muted); font-size: 8px; font-weight: 760; letter-spacing: .06em; }
.delivery-status { color: var(--success); font-size: 7px; font-weight: 850; text-align: right; text-transform: uppercase; }
.delivery-card.manual .delivery-status { color: var(--warning); }
.delivery-card.setup .delivery-status { color: var(--danger); }
.delivery-card strong { display: block; margin-top: 13px; font-size: 11px; }
.delivery-card p { margin-top: 5px; color: var(--faint); font-size: 8px; line-height: 1.45; }
.channel-card { padding: 16px; border-radius: 18px; }
.payment-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.payment-option-card { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.025); }
.payment-option-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(88,220,145,.08); }
.payment-option-dot.off { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,100,112,.08); }
.payment-option-card strong,.payment-option-card small { display: block; }
.payment-option-card strong { font-size: 10px; }.payment-option-card small { margin-top: 3px; color: var(--faint); font-size: 8px; }.payment-option-card code { color: var(--muted); font-size: 8px; }
.channel-top { display: flex; justify-content: space-between; gap: 10px; }
.channel-name { font-size: 11px; font-weight: 780; }
.channel-state { color: var(--success); font-size: 8px; font-weight: 800; }
.channel-state.off { color: var(--danger); }
.channel-value { margin-top: 16px; font-size: 24px; font-weight: 780; letter-spacing: -.05em; }
.channel-meta { margin-top: 5px; color: var(--faint); font-size: 9px; }
.stars-form {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}
.stars-form input {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255,255,255,.035);
  font-size: 10px;
}
.stars-form button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(200,255,61,.22);
  border-radius: 10px;
  color: #11140d;
  background: var(--lime);
  font-size: 9px;
  font-weight: 800;
}
.storage-panel { margin-bottom: 12px; }
.price-overview {
  margin-bottom: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
.price-overview > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.022); }
.price-overview span { display: block; color: var(--faint); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.price-overview strong { display: block; margin-top: 5px; color: var(--lime); font-size: 16px; }
.prices-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.price-card { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg,rgba(26,33,21,.96),rgba(13,17,11,.96)); box-shadow: 0 16px 44px rgba(0,0,0,.18); }
.price-card:before { position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; content: ""; background: linear-gradient(90deg,var(--lime),transparent 72%); opacity: .7; }
.price-card.manual:before { background: linear-gradient(90deg,var(--warning),transparent 72%); }
.price-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.price-network { color: var(--lime); font-size: 8px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.price-card.manual .price-network { color: var(--warning); }
.price-card h2 { margin-top: 5px; font-size: 19px; letter-spacing: -.04em; }
.price-card-head p { margin-top: 4px; color: var(--muted); font-size: 9px; }
.price-minimum { margin-top: 16px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; background: var(--lime-soft); }
.price-minimum span { color: var(--muted); font-size: 9px; }.price-minimum strong { color: var(--lime); font-size: 13px; }
.price-tier-list { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.price-tier-list > div { padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.022); }
.price-tier-list span { color: var(--muted); font-size: 9px; }.price-tier-list strong { font-size: 10px; }
.price-calculator { margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--border); }
.price-calculator label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 750; }
.price-calculator > div { height: 42px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.03); transition: border-color .18s var(--ease),box-shadow .18s var(--ease); }
.price-calculator:focus-within > div { border-color: var(--border-strong); box-shadow: 0 0 0 4px var(--lime-soft); }
.price-calculator input { min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: 0; color: var(--ink); background: transparent; font: 11px "SFMono-Regular",Consolas,monospace; }
.price-calculator output { padding: 0 12px; color: var(--lime); font-size: 15px; font-weight: 850; }
.price-calculator small { display: block; margin-top: 6px; color: var(--faint); font-size: 8px; }
.price-calculator.invalid small { color: var(--danger); }
.section-note { color: var(--faint); font-size: 8px; text-align: right; }
.settings-form { display: grid; gap: 12px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.field { min-width: 0; }
.field label {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 730;
}
.source-chip { color: var(--lime); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.field input {
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255,255,255,.035);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
}
.settings-form .btn { justify-self: start; min-width: 190px; }
.wallet-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.wallet-card { padding: 14px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.025); }
.wallet-role { color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wallet-card h3 { margin-top: 6px; font-size: 11px; }
.wallet-address {
  margin-top: 10px;
  display: block;
  overflow: hidden;
  color: var(--muted);
  font: 9px "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-balance { margin-top: 8px; color: var(--ink); font-size: 9px; line-height: 1.45; }
.ghost-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  font-size: 9px;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(520px, 100%);
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  border-top: 1px solid var(--border);
  background: rgba(10,13,8,.91);
  backdrop-filter: blur(22px);
  transform: translateX(-50%);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  color: var(--faint);
  background: none;
  font-size: 8px;
  font-weight: 720;
}
.nav-item.active { color: var(--lime); }
.nav-icon { display: grid; place-items: center; }
.nav-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loader, .toast {
  position: fixed;
  left: 50%;
  z-index: 100;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(19,24,16,.96);
  box-shadow: var(--shadow);
  font-size: 10px;
  transform: translateX(-50%);
}
.loader { top: 50%; display: inline-flex; align-items: center; gap: 8px; }
.loader i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.toast { bottom: calc(var(--nav-h) + var(--safe-b) + 16px); }
.empty { padding: 34px 15px; color: var(--faint); font-size: 11px; text-align: center; }

@media (min-width: 760px) {
  #app { position: relative; padding-left: 172px; }
  .header { padding-left: 0; }
  .screen { padding: 10px 18px 26px; }
  .bottom-nav {
    left: calc(50% - 590px);
    top: 88px;
    bottom: auto;
    width: 150px;
    height: auto;
    padding: 8px;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(19,24,16,.88);
    box-shadow: var(--shadow);
    transform: none;
  }
  .nav-item {
    min-height: 44px;
    flex: none;
    padding: 0 12px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 12px;
    font-size: 10px;
  }
  .nav-item.active { color: #11140d; background: var(--lime); }
  .toast { bottom: 24px; }
}
@media (max-width: 980px) {
  .hero-metrics { grid-template-columns: repeat(2,1fr); }
  .client-grid { grid-template-columns: repeat(2,1fr); }
  .delivery-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 759px) {
  .header { min-height: 68px; }
  .screen-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .screen-head > p { text-align: left; }
  .screen-head.compact { flex-direction: row; align-items: center; }
  .list, .dashboard-grid, .task-list { grid-template-columns: 1fr; }
  .channel-grid, .delivery-grid, .payment-option-grid { grid-template-columns: 1fr; }
  .prices-grid { grid-template-columns: 1fr; }
  .screen-head.compact { flex-direction: column; align-items: stretch; }
  .client-tools { width: 100%; }
  .client-tools .search-wrap { flex: 1; }
}
@media (max-width: 520px) {
  .brand { font-size: 12px; }
  .header-stat { min-width: 78px; padding: 7px 10px; }
  .hero-metrics { grid-template-columns: repeat(2,1fr); }
  .metric-card { min-height: 105px; padding: 14px; }
  .metric-value { font-size: 24px; }
  .screen-head h1 { font-size: 28px; }
  .field-grid, .wallet-grid, .client-grid, .task-field-grid { grid-template-columns: 1fr; }
  .task-notes-field { grid-column: auto; }
  .task-summary { grid-template-columns: repeat(2,1fr); }
  .price-overview { grid-template-columns: repeat(2,1fr); }
  .settings-form .btn { width: 100%; }
  .client-tools { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
}
/* Git-like update journal */
.update-summary { margin: 14px 0 0; color: var(--muted, #8d9488); line-height: 1.5; }
.update-changes { margin: 12px 0 0; padding-left: 20px; color: var(--muted, #8d9488); }
.update-changes li + li { margin-top: 5px; }
.update-hash { display: block; margin-top: 14px; overflow: hidden; color: var(--muted, #8d9488); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* Store bot announcements */
#broadcast-form textarea { min-height: 150px; }
#broadcast-form .field small { display: block; margin-top: 6px; color: var(--faint); font-size: 10px; line-height: 1.45; }
.compact-list { gap: 8px; }
.broadcast-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 13px 0; border-top: 1px solid var(--border); }
.broadcast-entry:first-child { border-top: 0; padding-top: 0; }
.broadcast-entry strong, .broadcast-entry small { display: block; }
.broadcast-entry small { margin-top: 3px; color: var(--faint); font-size: 10px; }
.broadcast-entry p { grid-column: 1 / -1; max-height: 80px; margin: 0; overflow: hidden; color: var(--muted); white-space: pre-wrap; }