/* 2026-08 app refresh: compact, task-led and neutral. */
:root {
  --rail: 236px;
  --bg: #070708;
  --panel: #0d0d0f;
  --panel2: #111114;
  --line: rgba(255, 255, 255, .085);
  --text: #f4f4f5;
  --muted: #85858e;
  --radius: 14px;
}

body:has(.app-shell) {
  background: #070708 !important;
}

.rail {
  padding: 25px 16px 16px;
  border-color: rgba(255,255,255,.075);
  background: #09090a;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -.055em;
}

.mobile-brand {
  display: none;
  align-items: center;
  gap: 10px;
  letter-spacing: -.055em;
}

.brand img,
.mobile-brand img {
  width: 25px;
  height: 25px;
  margin: 0;
  flex: 0 0 25px;
}

.brand b,
.mobile-brand b {
  color: #f4f4f5;
  font-size: 20px;
  font-weight: 780;
}

.rail-nav {
  margin-top: 31px;
  gap: 13px;
}

.nav-group > small {
  padding: 0 11px 4px;
  color: #56565e;
  font-size: 7px;
  letter-spacing: .18em;
}

.nav-group .nav-link {
  min-height: 38px;
  padding: 9px 11px;
  gap: 11px;
  border-radius: 9px;
  color: #8b8b92;
  font-size: 12px;
  font-weight: 570;
}

.nav-link .ui-icon { width: 15px; height: 15px; }
.nav-link.active { color: #f4f4f5; background: #18181a !important; }
.nav-link.active::before { display: none; }
.account-link { padding: 9px; border-radius: 11px; }

.workspace { background: #070708; }

.topbar {
  height: 83px;
  padding: 18px clamp(24px, 3.4vw, 46px);
  border-color: rgba(255,255,255,.07);
  background: rgba(7,7,8,.88);
}

.topbar p { margin-bottom: 2px; color: #65656d; font-size: 8px; letter-spacing: .16em; }
.topbar h1 { font-size: 19px; font-weight: 620; letter-spacing: -.035em; }
.top-actions { gap: 7px; }
.icon-button,.avatar-button { width: 38px; height: 38px; }
.avatar-button { border: 1px solid var(--line); font-size: 12px; }

.screen {
  max-width: 1360px;
  padding: clamp(24px, 3vw, 42px);
  animation: app-screen-in 260ms cubic-bezier(.22,.8,.2,1) both;
}

@keyframes app-screen-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.home-command {
  min-height: 284px;
  padding: clamp(28px, 3.5vw, 46px);
  grid-template-columns: minmax(0,1fr) minmax(260px,330px);
  align-items: stretch;
  gap: clamp(28px,4vw,58px);
  border-color: rgba(255,255,255,.095) !important;
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(255,255,255,.025),transparent 48%),#0c0c0e !important;
  box-shadow: none;
}

.home-command-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.home-label { color: #686870; font-size: 8px; font-weight: 720; letter-spacing: .17em; text-transform: uppercase; }
.home-command-copy h2 {
  max-width: 660px;
  margin: 12px 0 14px;
  font-size: clamp(42px,4.5vw,62px);
  font-weight: 540;
  letter-spacing: -.065em;
  line-height: .94;
}
.home-command-copy > p { max-width: 520px; color: #85858d; font-size: 12px; line-height: 1.6; }
.home-command-actions { margin-top: 25px; gap: 8px; }
.home-command-actions .solid-button,
.home-command-actions .outline-button { min-height: 43px; padding: 0 15px; border-radius: 9px; font-size: 11px; }

.home-balance {
  min-height: 100%;
  padding: 23px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(255,255,255,.085);
  border-radius: 14px;
  background: #101012;
  backdrop-filter: none;
}
.home-balance > strong { margin: 18px 0 7px; font-size: clamp(34px,3vw,48px); }
.home-balance > button { min-height: 41px; margin-top: 23px; border-radius: 8px; background: #171719; }
.home-balance > button:hover { border-color: #555; background: #1b1b1e; }

.home-pulse { gap: 8px; margin-top: 8px; }
.home-pulse button {
  min-height: 108px;
  padding: 16px;
  border-radius: 13px;
  background: #0d0d0f;
}
.home-pulse button:hover { border-color: rgba(255,255,255,.2); background: #111113; transform: translateY(-1px); }
.home-pulse span,.home-pulse small { font-size: 9px; }
.home-pulse strong { margin: auto 0 3px; font-size: 25px; }
.home-pulse strong:has(.ui-icon) { color: #aaaab1; }

.section-heading { margin: 42px 0 16px; }
.section-heading.compact { margin-top: 36px; }
.section-heading h2,
.store-header h2,
.thread-head h2,
.account-intro h2 { margin-top: 4px; font-size: 23px; font-weight: 590; }

.listing-grid,.listing-grid.wide { gap: 10px; }
.listing-card,.network-card,.business-card {
  border-color: rgba(255,255,255,.085);
  border-radius: 14px;
  background: #0d0d0f;
  box-shadow: none;
}
.listing-card:hover,.network-card:hover,.business-card:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); }

/* Keep secondary areas visually related to the dashboard instead of becoming new landing pages. */
.network-hero,
.directory-hero,
.store-ops-head,
.money-hero,
.account-intro {
  min-height: 0;
  padding: clamp(26px,3.4vw,44px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(255,255,255,.025),transparent 52%),#0c0c0e !important;
  box-shadow: none;
}

.network-hero { grid-template-columns: minmax(0,1fr) minmax(240px,310px); align-items: center; }
.network-hero h2,
.directory-hero h2,
.store-ops-head h2 { max-width: 720px; margin: 8px 0 12px; font-size: clamp(34px,4vw,52px); line-height: .98; letter-spacing: -.055em; }
.network-hero p,.directory-hero p,.store-ops-head p { max-width: 610px; color: #85858d; font-size: 11px; line-height: 1.6; }
.network-hero-mark,.directory-overview { border-color: rgba(255,255,255,.085); border-radius: 13px; background: #101012; }
.network-hero-mark span,.network-hero-mark small,.network-hero-mark strong,.network-balance-card button { color: #a5a5ad; }
.network-hero-mark strong { font-size: clamp(36px,4vw,54px); }

.directory-tools,.network-tools {
  margin-top: 12px;
  padding: 7px;
  gap: 7px;
  border-color: rgba(255,255,255,.085);
  border-radius: 12px;
  background: #0c0c0e;
}
.directory-tools input,.network-tools label,.network-tools select { border-radius: 8px; }

.store-ops-grid { gap: 10px; }
.business-cover { background: linear-gradient(145deg,#171719,#0c0c0e); }
.business-cover i,.distribution-icon { color: #b0b0b7; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.business-body > small,.business-manage,.store-detail-back,.distribution-row a { color: #9999a1; }
.store-ops-panel { border: 1px solid var(--line); border-radius: 16px; background: #0b0b0d; }

.search-bar { height: 62px; border-color: rgba(255,255,255,.16); }
.search-bar input { font-size: clamp(19px,2.4vw,28px); }
.filter-row { margin-top: 19px; }
.filter { padding: 7px 12px; border-radius: 8px; background: #0d0d0f; }

.solid-button,.outline-button,.light-button,.row-action { border-radius: 9px; }
.outline-button,.row-action { border-color: rgba(255,255,255,.11); background: #0d0d0f; }
.empty-state { min-height: 140px; border-color: rgba(255,255,255,.1); border-radius: 13px; }

@media (max-width: 1050px) {
  .home-command { grid-template-columns: 1fr minmax(240px,300px); gap: 24px; }
  .home-command-copy h2 { font-size: 47px; }
  .listing-grid,.listing-grid.wide { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .mobile-brand { display: inline-flex; }
  .topbar { height: 72px; padding: 14px 17px; }
  .screen { padding: 18px 14px 92px; }
  .home-command { padding: 23px 19px; grid-template-columns: 1fr; gap: 22px; border-radius: 15px; }
  .home-command-copy h2 { margin-top: 10px; font-size: 42px; }
  .home-command-copy > p { font-size: 11px; }
  .home-command-actions { width: 100%; margin-top: 20px; }
  .home-command-actions > * { width: 100%; }
  .home-balance { min-height: 190px; }
  .home-pulse { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .network-hero,.directory-hero,.store-ops-head { padding: 24px 20px; grid-template-columns: 1fr; border-radius: 15px; }
  .network-hero h2,.directory-hero h2,.store-ops-head h2 { font-size: 37px; }
  .network-hero-mark,.directory-overview { display: none; }
  .listing-grid,.listing-grid.wide { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 480px) {
  .home-command-copy h2 { font-size: 37px; }
  .home-pulse { grid-template-columns: 1fr 1fr; }
  .home-pulse button { min-height: 102px; }
  .listing-grid,.listing-grid.wide { grid-template-columns: 1fr; }
  .section-heading h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}