:root {
  --green:       #1A6B3C;
  --green-dark:  #0F4525;
  --green-mid:   #2A8A52;
  --green-lite:  #E6F4ED;
  --green-ring:  rgba(26,107,60,0.12);
  --gold:        #D4A017;
  --gold-dark:   #A87C0D;
  --gold-lite:   #FDF8E8;
  --orange:      #FF6B35;
  --orange-lite: #FFF1EC;
  --surface:     #FFFFFF;
  --surface2:    #F2F6F3;
  --surface3:    #E6F4ED;
  --text:        #0C1A10;
  --text2:       #3A5244;
  --text3:       #8BA898;
  --border:      #D4E8DA;
  --border2:     #C0D9C8;
  --danger:      #D63031;
  --danger-lite: #FDECEA;
  --nav-h:       68px;
  --r:           18px;
  --r-sm:        12px;
  --shadow-sm:   0 2px 8px rgba(26,107,60,0.08);
  --shadow:      0 4px 20px rgba(26,107,60,0.12);
  --shadow-gold: 0 4px 20px rgba(212,160,23,0.25);
  --shadow-lg:   0 6px 24px rgba(15,69,37,0.4);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--surface2);
  color: var(--text);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + 12px);
}

.screen { display:none; }
.screen.active { display:block; }

/* ── TOPBAR ── */
.topbar {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-mid) 100%);
  padding: 10px 16px 10px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top:0; z-index:200;
  box-shadow: 0 2px 12px rgba(15,69,37,0.3);
}
.topbar-logo { display:flex; align-items:center; gap:10px; flex:1; }
.logo-svg { width:34px; height:34px; flex-shrink:0; }
.logo-wordmark { display:flex; flex-direction:column; line-height:1.1; }
.logo-wordmark .w1 { font-size: 15px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }
.logo-wordmark .w2 { font-size: 8px; font-weight: 600; color: var(--gold); letter-spacing: 1.2px; text-transform: uppercase; }
.logo-wordmark .w3 { font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.65); letter-spacing: 0.3px; }
.topbar-profit {
  background: rgba(255,255,255,0.13);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 24px; padding: 5px 12px;
  display: flex; flex-direction: column; align-items: flex-end; cursor:pointer;
}
.tb-label { font-size: 8px; font-weight: 500; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.8px; }
.tb-amount { font-size: 14px; font-weight: 800; color: #7BFFB0; line-height: 1.1; }
.topbar-settings {
  margin-left:8px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:none; color:#fff;
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* ── OFFLINE BANNER ── */
.offline-banner {
  display:none; background:#7f1d1d; color:#fca5a5;
  padding:8px 16px; font-size:12px; font-weight:600;
  text-align:center; position:sticky; top:54px; z-index:199;
}
.offline-banner.show { display:block; }

/* ── BOTTOM NAV ── */
.bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; height:var(--nav-h);
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; align-items:center;
  z-index:300; box-shadow:0 -4px 20px rgba(0,0,0,0.06);
}
.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; padding:8px 4px;
  background:none; border:none; position:relative; transition:all 0.15s;
}
.nav-icon  { font-size:20px; line-height:1; }
.nav-label { font-size:10px; font-weight:600; color:var(--text3); font-family:'Poppins',sans-serif; }
.nav-item.active .nav-label { color:var(--green); }
.nav-item.active .nav-icon  { transform:translateY(-1px); }
.nav-item.active::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; background: var(--green); border-radius: 2px;
}
.nav-item.nav-sell .nav-label { color:var(--orange); font-weight:700; }
.nav-item.nav-sell.active::after { background:var(--orange); }
.nav-item.nav-sell.active .nav-label { color:var(--orange); }

/* ── SHARED ── */
.pad { padding:16px; }
.card { background:var(--surface); border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.card-body { padding:16px; }
.section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text3); margin-bottom:10px; }
.divider { height:1px; background:var(--border); margin:14px 0; }

/* ── FORMS ── */
.form-group { margin-bottom:14px; }
.form-label { font-size:12px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.form-label .opt { font-size:10px; font-weight:500; color:var(--text3); text-transform:none; letter-spacing:0; }
.form-input {
  width:100%; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:15px; font-weight:600; color:var(--text);
  background:var(--surface); outline:none;
  font-family:'Poppins',sans-serif;
  transition:border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance:none;
}
.form-input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-ring); }
.form-input::placeholder { color:var(--text3); font-weight:400; font-size:13px; }
select.form-input { cursor:pointer; }

/* ── BUTTONS ── */
.btn {
  width:100%; border:none; border-radius:var(--r-sm);
  padding:14px; font-size:14px; font-weight:700;
  font-family:'Poppins',sans-serif; cursor:pointer;
  transition:opacity 0.15s, transform 0.12s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.btn:active { transform:scale(0.97); opacity:0.9; }
.btn-green  { background: linear-gradient(135deg, var(--green-mid), var(--green-dark)); color: white; box-shadow: 0 4px 16px rgba(26,107,60,0.30); }
.btn-gold   { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: white; box-shadow: var(--shadow-gold); }
.btn-orange { background: linear-gradient(135deg, var(--orange), #FF3D00); color: white; box-shadow: 0 4px 16px rgba(255,107,53,0.35); }
.btn-outline { background:var(--surface); border:1.5px solid var(--border); color:var(--text2); }
.btn-ghost  { background:var(--green-lite); color:var(--green); }
.btn-sm { padding:8px 14px; font-size:13px; width:auto; border-radius:8px; }
.btn-xs { padding:6px 10px; font-size:12px; width:auto; border-radius:7px; }

/* ── PILLS ── */
.pill { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.pill-green  { background:var(--green-lite); color:var(--green); }
.pill-gold   { background:var(--gold-lite);  color:var(--gold); }
.pill-orange { background:var(--orange-lite); color:var(--orange); }
.pill-red    { background:var(--danger-lite); color:var(--danger); }
.pill-gray   { background:var(--surface3); color:var(--text2); }

/* ── SCREEN HEADER ── */
.screen-header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 16px; display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:100;
}
.back-btn {
  width:34px; height:34px; border-radius:9px; background:var(--surface3);
  border:none; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text2);
}
.sh-title { font-size:16px; font-weight:800; color:var(--text); }
.sh-sub   { font-size:11px; color:var(--text3); }

/* ── INFO BOX ── */
.info-box { border-radius:var(--r-sm); padding:12px 14px; font-size:13px; font-weight:600; line-height:1.5; }
.info-box.green  { background:var(--green-lite); color:var(--green-dark); border-left:3px solid var(--green); }
.info-box.orange { background:var(--orange-lite); color:var(--orange); border-left:3px solid var(--orange); }

/* ── ALERT ── */
.alert-banner {
  margin:8px 16px 0; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--danger-lite); border:1px solid rgba(220,38,38,0.15);
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--danger);
}

/* ═══ HOME SCREEN ═══ */
.home-hero {
  background: linear-gradient(160deg, var(--green-dark) 0%, var(--green) 55%, var(--green-mid) 100%);
  padding: 18px 20px 24px; position: relative; overflow: hidden;
}
.home-hero::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.05);
}
.hero-shop-info {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.hero-shop-name { font-size:16px; font-weight:800; color:#fff; }
.hero-owner-name { font-size:11px; color:rgba(255,255,255,0.65); margin-top:1px; }
.hero-date-badge {
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2);
  border-radius:8px; padding:5px 10px; text-align:right;
}
.hero-date-badge .hdb-day { font-size:18px; font-weight:800; color:#fff; line-height:1; }
.hero-date-badge .hdb-mon { font-size:10px; color:rgba(255,255,255,0.7); font-weight:600; letter-spacing:0.5px; }
.hero-lbl { font-size:11px; font-weight:600; color:rgba(255,255,255,0.65); letter-spacing:0.8px; text-transform: uppercase; }
.hero-amt  { font-size:46px; font-weight:900; color:white; line-height:1.1; letter-spacing:-2px; margin:3px 0 2px; }
.hero-amt .cur { font-size:26px; vertical-align:super; font-weight:700; }
.hero-sub  { font-size:12px; color:rgba(255,255,255,0.65); font-weight:500; }

.hero-stats { display:flex; gap:8px; margin-top:14px; }
.hero-stat {
  flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:10px; text-align:center;
}
.hs-val      { font-size:15px; font-weight:800; color:white; }
.hs-val.gold { color:var(--gold); }
.hs-lbl      { font-size:10px; color:rgba(255,255,255,0.6); font-weight:500; margin-top:2px; }

.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 16px; }
.qa-btn {
  background:var(--surface); border-radius:var(--r); padding:16px 12px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  border:1.5px solid var(--border); cursor:pointer; transition:all 0.15s;
  box-shadow:var(--shadow-sm);
}
.qa-btn:active { transform:scale(0.96); }
.qa-btn.buy  { border-color:rgba(5,150,105,0.3); background:var(--green-lite); }
.qa-btn.sell { border-color:rgba(234,88,12,0.3); background:var(--orange-lite); }
.qa-icon  { font-size:26px; }
.qa-label { font-size:13px; font-weight:700; color:var(--text); }
.qa-sub   { font-size:11px; color:var(--text3); font-weight:500; }

/* Today card */
.glance-card { margin:0 16px 16px; }
.glance-header {
  background: var(--gold-lite); border-bottom: 1.5px solid rgba(212,160,23,0.2);
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--r) var(--r) 0 0;
}
.glance-title { font-size: 13px; font-weight: 700; color: var(--gold-dark); }
.glance-rows { }
.g-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.g-row:last-child { border-bottom:none; }
.g-lbl { font-size:13px; color:var(--text2); font-weight:500; }
.g-val { font-size:14px; font-weight:700; color:var(--text); }
.g-val.green  { color:var(--green); }
.g-val.orange { color:var(--orange); }

/* ═══ BUY SCREEN ═══ */
.buy-step-card {
  background:var(--surface); border-radius:var(--r);
  border:1px solid var(--border); box-shadow:var(--shadow-sm); padding:16px;
}
.buy-step-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--text3); margin-bottom:12px;
}
.buy-mode-btn {
  padding:10px; border-radius:var(--r-sm); font-size:13px; font-weight:700;
  font-family:'Poppins',sans-serif; cursor:pointer; border:2px solid var(--border);
  background:var(--surface2); color:var(--text2); transition:all 0.15s;
}
.buy-mode-btn.active { background:var(--green-lite); border-color:var(--green); color:var(--green); }

.calc-box {
  background:var(--green-lite); border:1px solid rgba(5,150,105,0.15);
  border-radius:var(--r-sm); padding:12px 14px; display:none;
}
.calc-box.show { display:block; }
.calc-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; }
.cr-label { font-size:12px; color:var(--text2); font-weight:500; }
.cr-val   { font-size:13px; font-weight:700; color:var(--green); }
.cr-val.warn { color:var(--orange); }

/* ═══ SELL SCREEN ═══ */
.stock-pill-row { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }

.price-display {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--green-lite); border:1.5px solid rgba(5,150,105,0.2);
  border-radius:var(--r-sm); padding:11px 14px; cursor:pointer;
}
.pd-label { font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; }
.pd-value { font-size:22px; font-weight:800; color:var(--green); line-height:1.2; }
.pd-tap   { font-size:11px; color:var(--text3); }

.cart-section {
  margin:10px 16px; background:var(--surface); border-radius:var(--r);
  border:1px solid var(--border); box-shadow:var(--shadow-sm); display:none;
}
.cart-section.show { display:block; }
.cart-header {
  background:var(--green-lite); padding:10px 14px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(5,150,105,0.1); border-radius:var(--r) var(--r) 0 0;
}
.ch-title { font-size:13px; font-weight:700; color:var(--green); }
.ch-total { font-size:14px; font-weight:800; color:var(--green-dark); }
.cart-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.cart-item:last-child { border-bottom:none; }
.ci-name  { font-size:13px; font-weight:600; }
.ci-sub   { font-size:11px; color:var(--text3); margin-top:1px; }
.ci-total { font-size:14px; font-weight:700; color:var(--green); }
.ci-remove {
  width:26px; height:26px; border-radius:7px;
  background:var(--danger-lite); border:none; color:var(--danger);
  font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; margin-left:4px;
}
.ci-edit {
  width:26px; height:26px; border-radius:7px;
  background:var(--gold-lite); border:none; color:var(--gold);
  font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; margin-left:4px;
}

/* Cart all-zero banner */
.cart-complete-banner {
  display:none; margin:0 16px 8px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--green-lite); border:1.5px solid rgba(26,107,60,0.2);
  font-size:13px; font-weight:600; color:var(--green-dark);
  text-align:center;
}
.cart-complete-banner.show { display:block; }

.item-total-box {
  display:none; align-items:center; justify-content:space-between;
  background:var(--surface3); border-radius:9px; padding:10px 14px;
  margin-top:8px; border:1px solid var(--border);
}
.item-total-box.show { display:flex; }
.itb-label { font-size:12px; color:var(--text3); font-weight:500; }
.itb-value { font-size:18px; font-weight:800; color:var(--text); }

.cart-buttons { display:none; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.cart-buttons.show { display:grid; }

/* Cart complete — only show done */
.cart-buttons.cart-full { grid-template-columns:1fr; }

.final-section { margin:0 16px 12px; display:none; }
.final-section.show { display:block; }
.final-card { background:var(--surface); border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:hidden; }
.final-card-header {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
}
.fch-title  { font-size:13px; font-weight:700; color:rgba(255,255,255,0.7); }
.fch-amount { font-size:22px; font-weight:800; color:#6ee7b7; }
.final-card-body { padding:14px; }

.profit-preview { display:none; background:var(--green-lite); border-radius:9px; padding:12px 14px; margin-top:10px; }
.profit-preview.show { display:block; }
.pp-row   { display:flex; justify-content:space-between; padding:4px 0; }
.pp-label { font-size:12px; color:var(--text2); font-weight:500; }
.pp-val   { font-size:14px; font-weight:700; }
.pp-val.green  { color:var(--green); }
.pp-val.red    { color:var(--danger); }
.pp-val.orange { color:var(--orange); }

/* ═══ DASHBOARD ═══ */
.tab-bar {
  display:flex; background:var(--surface); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none; position:sticky; top:0; z-index:99;
}
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn {
  flex:1; min-width:68px; padding:12px 6px; border:none; background:none;
  font-size:11px; font-weight:700; color:var(--text3); cursor:pointer;
  font-family:'Poppins',sans-serif;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  white-space:nowrap; transition:all 0.15s;
}
.tab-btn.active { color:var(--green); border-bottom-color:var(--green); }
.tab-content { display:none; }
.tab-content.active { display:block; }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-card {
  background:var(--surface); border-radius:var(--r); padding:14px;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:5px;
}
.sc-icon  { font-size:20px; }
.sc-label { font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.sc-value { font-size:20px; font-weight:800; color:var(--text); line-height:1.2; }
.sc-value.green  { color:var(--green); }
.sc-value.orange { color:var(--orange); }
.sc-value.gold   { color:var(--gold); }

.stock-row {
  background:var(--surface); border-radius:var(--r-sm); padding:12px 14px;
  margin-bottom:8px; display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--border);
}
.stock-row.danger  { border-left:3px solid var(--danger); }
.stock-row.warning { border-left:3px solid var(--gold); }
.stock-row.good    { border-left:3px solid var(--green); }
.sk-name { font-size:13px; font-weight:600; }
.sk-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.sk-qty  { font-size:14px; font-weight:800; }
.sk-qty.danger  { color:var(--danger); }
.sk-qty.warning { color:var(--gold); }
.sk-qty.good    { color:var(--green); }

.top-row {
  background:var(--surface); border-radius:var(--r); padding:13px 14px;
  margin-bottom:8px; border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.top-row-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.top-row-name   { font-size:14px; font-weight:700; }
.top-row-profit { font-size:15px; font-weight:800; color:var(--green); }
.top-row-stats  { display:flex; gap:12px; flex-wrap:wrap; }
.top-stat       { font-size:11px; color:var(--text3); }
.top-stat strong { color:var(--text2); }

/* ── EDIT PRICES TAB ── */
.price-row {
  display:flex; align-items:center; padding:12px 14px;
  border-bottom:1px solid var(--border); gap:10px;
}
.price-row:last-child { border-bottom:none; }
.eci-name     { flex:1; font-size:13px; font-weight:600; }
.eci-price    { font-size:13px; font-weight:700; color:var(--green); margin-right:4px; }
.eci-edit-btn {
  padding:5px 10px; background:var(--gold-lite);
  border:1px solid rgba(217,119,6,0.2); border-radius:7px;
  font-size:11px; font-weight:700; color:var(--gold);
  cursor:pointer; font-family:'Poppins',sans-serif;
}
.eci-edit-row {
  display:none; flex-direction:column; gap:10px;
  padding:14px; background:var(--surface3);
  border-top:1px solid var(--border);
}
.eci-edit-row.show { display:flex; }
.eci-edit-input {
  flex:1; padding:8px 12px; border:1.5px solid rgba(217,119,6,0.3);
  border-radius:8px; font-size:14px; font-weight:700; color:var(--gold);
  background:#fff; outline:none; font-family:'Poppins',sans-serif;
}
.eci-name-input {
  flex:1; padding:8px 12px; border:1.5px solid rgba(26,107,60,0.25);
  border-radius:8px; font-size:14px; font-weight:700; color:var(--text);
  background:#fff; outline:none; font-family:'Poppins',sans-serif;
}

/* ── HISTORY TAB ── */
.hist-filter {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; background:var(--surface3);
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.hist-filter input[type="date"] {
  flex:1; min-width:0; padding:6px 9px; font-size:11px; font-weight:600;
  border:1px solid var(--border); border-radius:7px; background:var(--surface);
  color:var(--text2); font-family:'Poppins',sans-serif; outline:none;
}
.hist-filter input[type="date"]:focus { border-color:var(--green); }
.hist-filter .sep { font-size:11px; color:var(--text3); }
.hist-filter .go-btn {
  padding:6px 12px; background:var(--green); color:#fff; border:none;
  border-radius:7px; font-size:11px; font-weight:700; cursor:pointer;
  font-family:'Poppins',sans-serif; white-space:nowrap;
}
.hist-day-row {
  background:var(--surface); margin:0 16px 8px; border-radius:var(--r);
  border:1px solid var(--border); overflow:hidden; cursor:pointer;
}
.hdr-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
}
.hdr-date { font-size:13px; font-weight:700; color:var(--text); }
.hdr-dow  { font-size:11px; color:var(--text3); font-weight:500; }
.hdr-right { display:flex; align-items:center; gap:10px; }
.hdr-profit { font-size:14px; font-weight:800; color:var(--green); }
.hdr-items  { font-size:11px; color:var(--text3); font-weight:600; }
.hdr-chevron { font-size:12px; color:var(--text3); transition:transform 0.2s; }
.hdr-chevron.open { transform:rotate(180deg); }
.hdr-detail {
  display:none; border-top:1px solid var(--border);
  padding:10px 14px; background:var(--surface2);
}
.hdr-detail.show { display:block; }
.hdr-detail-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px;
}
.hd-cell { background:var(--surface); border-radius:8px; padding:8px 10px; border:1px solid var(--border); }
.hd-lbl { font-size:10px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.hd-val { font-size:14px; font-weight:800; margin-top:2px; }
.hd-val.green  { color:var(--green); }
.hd-val.orange { color:var(--orange); }
.hist-empty { text-align:center; padding:40px 20px; color:var(--text3); }
.hist-loading { text-align:center; padding:30px; color:var(--text3); font-size:13px; }
.hdr-left { display:flex; flex-direction:column; gap:2px; }
.hdr-summary { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.hist-section-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px;
  color:var(--text3); padding:8px 0 6px; border-top:1px solid var(--border); margin-top:4px;
}
.hist-items-list { border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border); margin-bottom:4px; }
.hist-sale-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.hist-sale-row:last-child { border-bottom:none; }
.hsr-left { flex:1; }
.hsr-name { font-size:13px; font-weight:700; color:var(--text); }
.hsr-meta { font-size:11px; color:var(--text3); margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hsr-bargain {
  background:var(--orange-lite); color:var(--orange);
  font-size:10px; font-weight:600; padding:1px 6px; border-radius:10px;
  text-decoration:line-through;
}
.hsr-right { text-align:right; }
.hsr-total  { font-size:14px; font-weight:800; color:var(--green); }
.hsr-profit { font-size:10px; font-weight:600; color:var(--green-mid); margin-top:1px; }
.hist-buy-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.hist-buy-row:last-child { border-bottom:none; }
.hbr-name  { font-size:13px; font-weight:700; color:var(--text); }
.hbr-meta  { font-size:11px; color:var(--text3); margin-top:2px; }
.hbr-total { font-size:14px; font-weight:800; color:var(--orange); }
.hist-type-bar {
  display:flex; gap:6px; padding:10px 14px; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.htype-btn {
  padding:5px 12px; border-radius:20px; font-size:11px; font-weight:700;
  border:1px solid var(--border); background:var(--surface3); color:var(--text2);
  cursor:pointer; font-family:'Poppins',sans-serif;
}
.htype-btn.active { background:var(--green); color:#fff; border-color:var(--green); }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:40px 20px; color:var(--text3); }
.es-icon  { font-size:44px; margin-bottom:10px; }
.es-title { font-size:14px; font-weight:600; color:var(--text2); margin-bottom:5px; }
.es-sub   { font-size:12px; }

/* ── TOAST ── */
.toast {
  display: none; position: fixed;
  bottom: calc(var(--nav-h) + 16px); left: 50%; transform: translateX(-50%);
  background: var(--green-dark); color: white;
  padding: 12px 22px; border-radius: 30px; font-size: 13px; font-weight: 600;
  z-index: 500; box-shadow: var(--shadow-lg);
  white-space: nowrap; max-width: 90vw; text-align: center;
}
.toast.show { display: block; animation: toastIn 0.3s ease; }
@keyframes toastIn {
  from { opacity:0; transform:translateX(-50%) translateY(10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── SETTINGS MODAL ── */
.modal-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:600; overflow-y:auto;
}
.modal-backdrop.show { display:block; }
.modal-sheet {
  background:var(--surface); border-radius:var(--r) var(--r) 0 0;
  margin-top:80px; min-height:calc(100vh - 80px);
  max-width:480px; margin-left:auto; margin-right:auto;
}
.modal-header {
  background:linear-gradient(135deg,var(--green-dark),var(--green));
  padding:14px 16px; border-radius:var(--r) var(--r) 0 0;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:10;
}
.modal-title { font-size:15px; font-weight:800; color:#fff; }
.modal-close {
  background:rgba(255,255,255,0.15); border:none; color:#fff;
  width:32px; height:32px; border-radius:8px; font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-body { padding:16px; }

/* ── CONFIRM DIALOG ── */
.confirm-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5);
  z-index:700; align-items:center; justify-content:center;
}
.confirm-overlay.show { display:flex; }
.confirm-box {
  background:var(--surface); border-radius:var(--r); padding:20px;
  width:calc(100% - 48px); max-width:340px; box-shadow:var(--shadow-lg);
}
.confirm-title { font-size:15px; font-weight:800; margin-bottom:8px; }
.confirm-msg   { font-size:13px; color:var(--text2); margin-bottom:18px; line-height:1.5; }
.confirm-btns  { display:flex; gap:10px; }

/* ── EDIT CART ITEM ── */
.edit-cart-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5);
  z-index:700; align-items:flex-end; justify-content:center;
}
.edit-cart-overlay.show { display:flex; }
.edit-cart-box {
  background:var(--surface); border-radius:var(--r) var(--r) 0 0;
  padding:20px; width:100%; max-width:480px; box-shadow:var(--shadow-lg);
}
.edit-cart-title { font-size:15px; font-weight:800; margin-bottom:14px; color:var(--text); }
/* ── BUY SCREEN TAB BAR ── */
.buy-tab-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.buy-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  border-right: 1px solid var(--border);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.buy-tab-btn:last-child { border-right: none; }
.buy-tab-btn:active     { opacity: 0.7; }
.btab-icon  { font-size: 22px; line-height: 1; }
.btab-label { font-size: 12px; font-weight: 700; color: var(--text3); }
.buy-tab-btn.active { background: var(--green-lite); }
.buy-tab-btn.active .btab-label { color: var(--green); }
.buy-tab-panel {
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  padding: 14px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: var(--shadow-sm);
}