:root{
  --bg:#090a0c;
  --panel:#0d0f12;
  --surface:#12151a;
  --surface-raised:#171b21;
  --surface-hover:#1c2128;
  --border:rgba(255,255,255,.075);
  --border-strong:rgba(255,255,255,.13);
  --text:#f5f7fa;
  --secondary:#c5cbd3;
  --muted:#858d98;
  --subtle:#5d6570;
  --accent:#5b8cff;
  --accent-soft:rgba(91,140,255,.14);
  --green:#37c995;
  --green-soft:rgba(55,201,149,.11);
  --danger:#f07b79;
  --danger-soft:rgba(240,123,121,.11);
  --warning:#e7aa4f;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-panel:0 1px 0 rgba(255,255,255,.035) inset,0 14px 36px rgba(0,0,0,.16);
}

*{
  -webkit-tap-highlight-color:transparent;
}

html{
  background:var(--bg);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  padding-bottom:calc(92px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)));
}

.ambient{
  opacity:.07;
  filter:blur(120px);
}

.shell{
  width:100%;
  max-width:800px;
  padding:calc(16px + max(env(safe-area-inset-top),var(--tg-content-safe-area-inset-top,0px))) 16px 40px;
}

.topbar{
  position:relative;
  margin-bottom:22px;
  padding:2px 2px 0;
}

.topbar h1{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:-.75px;
}

.eyebrow{
  margin-bottom:6px;
  color:var(--muted);
  font-size:9px;
  font-weight:600;
  letter-spacing:.115em;
}

.top-actions{
  gap:7px;
}

.icon-button{
  width:42px;
  height:42px;
  border-color:var(--border);
  border-radius:50%;
  background:var(--surface);
  color:var(--secondary);
  font-size:16px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}

.icon-button:active,
.primary-button:active,
.nav-item:active{
  transform:scale(.96);
}

button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.app-screen:not(.hidden){animation:screen-in .2s cubic-bezier(.2,.75,.35,1)}

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

.sales-grid{
  gap:9px;
}

.sales-card,
.metric-card,
.shop-card,
.report-panel,
.hero-card,
.expense-hero,
.capital-card,
.trading-hero,
.trading-metric,
.source-card,
.expense-category{
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
}

.sales-card{
  min-height:132px;
  padding:17px;
  border-radius:var(--radius-md);
}

.sales-primary,
.sales-revenue{
  background:var(--surface);
}

.sales-card p,
.metric-card p,
.label{
  color:var(--muted);
  font-size:11px;
  font-weight:500;
}

.sales-card strong{
  font-size:clamp(27px,8vw,36px);
  font-weight:590;
  letter-spacing:-1.2px;
}

.sales-card>span{
  color:var(--subtle);
}

.sales-revenue strong,
.positive,
.metric-card .positive{
  color:var(--green);
}

.today-details{
  gap:7px;
  margin-top:8px;
}

.today-details div{
  min-height:44px;
  padding:11px 12px;
  border-color:var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.018);
}

.profit-note,
.coverage-note{
  color:var(--subtle);
}

.report-panel{
  margin-bottom:16px;
  padding:17px;
  border-radius:var(--radius-lg);
  background:var(--panel);
  box-shadow:var(--shadow-panel);
}

.report-summary{
  gap:8px;
  margin-bottom:14px;
}

.report-summary>div{
  padding:15px;
  border-color:var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
}

.report-summary strong{
  font-size:clamp(24px,7.5vw,34px);
  font-weight:590;
}

.report-payout{
  background:var(--green-soft)!important;
  border-color:rgba(55,201,149,.18)!important;
}

.flow-list{
  gap:13px;
  border-color:var(--border);
}

.flow-row progress,
.progress-track,
.expense-progress{
  background:rgba(255,255,255,.07);
}

.flow-row progress::-webkit-progress-value,
.progress-track::-webkit-progress-value,
.expense-progress::-webkit-progress-value{
  background:var(--accent);
}

.flow-row progress::-moz-progress-bar,
.progress-track::-moz-progress-bar,
.expense-progress::-moz-progress-bar{
  background:var(--accent);
}

.report-foot{
  border-color:var(--border);
  background:var(--border);
}

.report-foot>div{
  background:var(--surface);
}

.profit-lock{
  border-color:var(--border);
  background:rgba(255,255,255,.018);
}

.profit-lock>span,
.source-icon{
  background:var(--accent-soft);
  color:#9bb9ff;
}

.hero-card{
  padding:20px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-panel);
}

.hero-value{
  font-size:clamp(40px,12vw,54px);
  font-weight:590;
  letter-spacing:-2px;
}

.status-pill,
.demo-badge{
  border-color:rgba(55,201,149,.2);
  background:var(--green-soft);
  color:#79dfba;
  font-weight:600;
}

.status-pill.unavailable,
.demo-badge.unavailable{
  border-color:rgba(231,170,79,.24);
  background:rgba(231,170,79,.1);
  color:#f0bd6f;
}

.metrics-grid{
  gap:9px;
  margin:10px 0 24px;
}

.metric-card{
  min-height:108px;
  padding:15px;
  border-radius:var(--radius-md);
}

.metric-card strong{
  font-size:clamp(25px,7vw,31px);
  font-weight:590;
}

.section-heading{
  margin:0 2px 12px;
}

.section-heading h2{
  font-size:20px;
  font-weight:600;
  letter-spacing:-.45px;
}

.updated{
  color:var(--subtle);
}

.shops-list,
.expense-categories{
  gap:8px;
}

.shop-card,
.expense-category{
  padding:15px;
  border-radius:var(--radius-md);
}

.shop-title-row h3{
  font-weight:590;
}

.source-card{
  border-radius:var(--radius-md);
  background:var(--green-soft);
  border-color:rgba(55,201,149,.16);
}

.price-tier-buttons,
.category-buttons{
  gap:7px;
}

.price-tier-buttons button,
.category-buttons button,
.category-toggle,
.period-buttons button,
.primary-button{
  min-height:44px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--secondary);
  font-weight:560;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}

.price-tier-buttons button.active,
.category-buttons button.active,
.period-buttons button.active{
  border-color:rgba(91,140,255,.42);
  background:var(--accent-soft);
  color:#dce7ff;
}

.search-input{
  min-height:46px;
  border-color:var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
}

.product-result-card{
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}

.product-rank{
  background:var(--accent-soft);
  color:#a9c2ff;
}

.product-result-metrics span{
  background:rgba(255,255,255,.026);
}

.expense-hero{
  margin-bottom:10px;
  padding:20px;
  border-color:var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
  box-shadow:var(--shadow-panel);
}

.expense-total{
  font-size:clamp(38px,11vw,52px);
  font-weight:590;
  letter-spacing:-2px;
}

.expense-kpi-grid{
  gap:9px;
  margin-bottom:24px;
}

.expense-leader-card{
  background:var(--surface-raised);
}

.expense-leading-share strong{
  color:#9bb9ff;
}

.expense-category-head em{
  color:#9bb9ff;
}

.expense-category{
  padding:0;
  overflow:hidden;
}

.expense-category-toggle{
  width:100%;
  min-height:72px;
  padding:15px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.expense-category-toggle .expense-category-head>div:last-child{
  display:grid;
  grid-template-columns:auto 22px;
  column-gap:8px;
  align-items:center;
  text-align:right;
}

.expense-category-toggle .expense-category-head b,
.expense-category-toggle .expense-category-head em{
  grid-column:1;
}

.expense-category-toggle .expense-category-head i{
  grid-column:2;
  grid-row:1 / span 2;
  color:var(--muted);
  font-size:20px;
  font-style:normal;
  transition:transform .16s ease;
}

.expense-category-toggle[aria-expanded="true"] .expense-category-head i{
  transform:rotate(180deg);
}

.expense-category-details{
  padding:0 15px 12px;
  border-top:1px solid var(--border);
}

.expense-detail-row{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
}

.expense-detail-row:last-child{
  border-bottom:0;
}

.expense-detail-row div{
  min-width:0;
}

.expense-detail-row strong,
.expense-detail-row span{
  display:block;
}

.expense-detail-row strong{
  overflow-wrap:anywhere;
  font-size:14px;
  font-weight:570;
}

.expense-detail-row span{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}

.expense-detail-row b{
  flex:none;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}

.expense-detail-empty{
  padding:14px 0 2px;
  color:var(--muted);
  font-size:12px;
}

.expense-recent-block{
  margin-top:26px;
}

.expense-recent-heading{
  margin-bottom:10px;
}

.expense-recent-list{
  padding:0 15px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
}

.investment-panel{
  margin-top:10px;
}

.capital-grid{
  gap:9px;
}

.capital-card{
  border-radius:var(--radius-md);
}

.capital-primary{
  border-color:rgba(91,140,255,.22);
  background:var(--accent-soft);
}

.investment-summary{
  border-color:rgba(55,201,149,.18);
  border-radius:var(--radius-md);
  background:var(--green-soft);
}

.trading-hero{
  margin-bottom:9px;
  padding:20px;
  border-color:rgba(55,201,149,.2);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
  box-shadow:var(--shadow-panel);
}

.trading-balance{
  font-size:clamp(46px,14vw,64px);
  font-weight:590;
  letter-spacing:-2.5px;
}

.trading-metrics{
  gap:9px;
}

.trading-metric{
  min-height:110px;
  border-radius:var(--radius-md);
}

.trading-metric strong{
  font-size:clamp(24px,7vw,30px);
  font-weight:590;
}

.trading-metric.positive{
  border-color:rgba(55,201,149,.17);
  background:var(--green-soft);
}

.trading-metric.negative{
  border-color:rgba(240,123,121,.16);
  background:var(--danger-soft);
}

.trading-note{
  padding:15px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
}

.state-panel{
  color:var(--muted);
}

.spinner{
  border-color:rgba(255,255,255,.08);
  border-top-color:var(--accent);
}

.bottom-nav{
  height:calc(82px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)));
  padding:6px max(6px,calc((100vw - 800px)/2 + 6px)) max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px));
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:2px;
  border-top:1px solid var(--border-strong);
  background:rgba(9,10,12,.9);
  backdrop-filter:saturate(150%) blur(22px);
  -webkit-backdrop-filter:saturate(150%) blur(22px);
  box-shadow:0 -10px 36px rgba(0,0,0,.18);
}

.nav-item{min-height:52px;min-width:0;padding:4px 1px;border:0;border-radius:12px;background:transparent;color:var(--subtle);font:inherit;font-size:8.5px;font-weight:540;line-height:1;gap:4px;transition:background .16s ease,color .16s ease,transform .16s ease}

.nav-item:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

.nav-icon{
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  border-radius:10px;
  color:currentColor;
  transition:background .16s ease,color .16s ease;
}

.nav-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-item .nav-label{font-size:9px;line-height:1;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .nav-label-wrap{white-space:normal;line-height:1.05}

.nav-item.active{
  background:transparent;
  color:var(--text);
}

.nav-item.active .nav-icon{
  background:var(--accent-soft);
  color:#8fb0ff;
}

@media(hover:hover){
  .icon-button:hover,
  .nav-item:hover,
  .price-tier-buttons button:hover,
  .category-buttons button:hover,
  .period-buttons button:hover{
    background:var(--surface-hover);
    border-color:var(--border-strong);
  }

  .shop-card:hover,
  .product-result-card:hover{
    border-color:var(--border-strong);
    background:var(--surface-raised);
    transform:translateY(-1px);
  }
}

@media(max-width:390px){
  .shell{padding-left:12px;padding-right:12px}
  .topbar h1{font-size:25px}
  .nav-item{font-size:7.6px;padding-inline:0}
  .nav-icon{width:27px;height:27px}
  .nav-icon svg{width:18px;height:18px}
  .report-panel{padding:14px}
  .sales-card{padding:15px}
}

@media(max-width:340px){
  .bottom-nav{
    grid-template-columns:repeat(7,minmax(44px,1fr));
    gap:1px;
    padding-left:2px;
    padding-right:2px;
    overflow-x:auto;
  }
}

@media(min-width:700px){
  .shell{padding-left:22px;padding-right:22px}
  .metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .shops-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trading-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .capital-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .capital-card strong{font-size:24px}
}

@media(min-width:840px){
  .bottom-nav{
    left:50%;
    right:auto;
    width:800px;
    padding-left:6px;
    padding-right:6px;
    transform:translateX(-50%);
    border:1px solid var(--border-strong);
    border-bottom:0;
    border-radius:20px 20px 0 0;
  }
}

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