:root{
  --brand:#FF5000;
  --brand-weak: rgba(255,80,0,0.12);
  --price:#FF5000;
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#FAFAFA;
  --text: rgba(0,0,0,0.88);
  --text-2: rgba(0,0,0,0.60);
  --text-3: rgba(0,0,0,0.40);
  --border: rgba(0,0,0,0.10);
  --divider: rgba(0,0,0,0.06);
  --shadow: 0 10px 30px rgba(0,0,0,0.10);
  --radius-card:20px;
  --radius-field:14px;
  --radius-btn:18px;
  --panel: var(--surface);
  --panel2: var(--surface);
  --line: var(--border);
  --muted: var(--text-2);
  --accent: var(--brand);
  --accent-2: #FF8C00;
  --accent-2-weak: rgba(255,140,0,0.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --ease-fast:.12s;
  --ease-default:.15s;
  --ease-slow:.2s;

  /* Layers */
  --z-base:1;
  --z-nav:30;
  --z-overlay:80;
  --z-boot:120;

  /* Status pills */
  --status-pill-bg: var(--st-viewed-bg);
  --status-pill-border: transparent;
  --status-pill-fg: var(--st-viewed-fg);
  --st-new-bg: rgba(255,80,0,0.12);
  --st-new-fg: #FF5000;
  --st-new-border: transparent;
  --st-viewed-bg: rgba(0,0,0,0.06);
  --st-viewed-fg: rgba(0,0,0,0.70);
  --st-viewed-border: transparent;
  --st-updated-bg: rgba(255,140,0,0.14);
  --st-updated-fg: #FF8C00;
  --st-updated-border: transparent;
  --st-waitpay-bg: rgba(0,122,255,0.12);
  --st-waitpay-fg: #007AFF;
  --st-waitpay-border: transparent;
  --st-paid-bg: rgba(59,130,246,0.12);
  --st-paid-fg: #1d4ed8;
  --st-paid-border: transparent;
  --st-purchased-bg: rgba(34,197,94,0.12);
  --st-purchased-fg: #15803d;
  --st-purchased-border: transparent;
  --st-done-bg: rgba(100,116,139,0.10);
  --st-done-fg: #374151;
  --st-done-border: transparent;
  --st-cancelled-bg: rgba(239,68,68,0.10);
  --st-cancelled-fg: #b91c1c;
  --st-cancelled-border: transparent;
}

body{
  background: var(--bg);
  color: var(--text);
}

.bg{ display:none; }

p{ color: var(--text-2); }
.muted, .hint{ color: var(--text-2); }

.card{
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

#cart-list .card,
#orders-list .card,
#order-view .card,
#preview-list .card{
  background: var(--surface);
  border-color: var(--divider);
}

.logo{
  background: linear-gradient(135deg, #ff7a2f, #ff5000);
  box-shadow: 0 12px 24px rgba(255,80,0,.25);
}

.brand-sub{ color: var(--text-2); }

label{ color: var(--text-2); }

input, textarea, select{
  background-color: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

input:focus, textarea:focus, select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-weak);
}

button{
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.btn.primary{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
}

.btn.danger{
  background: rgba(255,59,48,0.10);
  border-color: rgba(255,59,48,0.35);
  color: #ff3b30;
}

.btn.ghost{
  background: transparent;
}

.auth-role-btn{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.auth-role-btn.active{
  background: var(--brand-weak);
  border-color: rgba(255,80,0,0.45);
  color: var(--brand);
}

/* Segmented control (Products: Feed / Favorites) */
.seg{
  /* In light theme keep segment buttons looking like our native pills (not a dark filled bar). */
  background: transparent;
}
.seg-btn{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.seg-btn.active{
  background: var(--brand-weak);
  border-color: rgba(255,80,0,0.45);
  color: var(--brand);
}
.seg-count{
  background: var(--brand-weak);
  color: var(--brand);
}

.chip,
.version-pill,
.bell,
.rate-card{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
}

.bell.active{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-weak);
}

#bottom-nav{
  background: rgba(246,247,249,0.95);
  border-top: 1px solid var(--divider);
  backdrop-filter: saturate(150%) blur(12px);
  box-shadow: 0 -12px 26px rgba(0,0,0,0.08);
}

.chat-bar{
  background: rgba(246,247,249,0.95);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--divider);
  box-shadow: 0 -12px 26px rgba(0,0,0,0.08);
}
.chat-bar .chat-input{
  background: #fff;
  border-color: var(--divider);
  color: var(--text);
}
.chat-bar .chat-input::placeholder{ color: var(--muted); }
.chat-bar .chat-input:focus{ border-color: var(--brand); }
.chat-bar .chat-attach{ color: var(--muted); }
.chat-bar .chat-attach:hover{ color: var(--brand); }

.nav-btn{
  background: transparent;
  border-color: transparent;
  color: var(--nav-inactive);
}

.nav-btn:hover{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.06);
}

.nav-btn.active{
  background: var(--nav-active-bg);
  border-color: rgba(255,80,0,0.18);
  color: var(--nav-active);
}

.nav-count{
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

  .item-title{ color: var(--text); }
  .item-url{ color: var(--text-2); }
  .item-meta{ color: var(--text-2); }

.item-photo{
  border-color: var(--divider);
  background: var(--surface-2);
}

.skeleton::after{
  background: linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.04) 100%);
}

.variant-input{
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.progress{
  background: rgba(0,0,0,0.06);
}
.progress .bar{
  background: linear-gradient(90deg, #ff7a2f, #ff5000);
}

.summary-box{
  background: var(--surface-2);
  border-color: var(--divider);
}

.summary-row.total .totals-main,
.totals-main b,
#sum-all-y,
#preview-sum-y,
#order-sum-y,
#buyer-sum-y{
  color: var(--price);
}

.rate-value b{
  color: var(--text);
}

.debug-panel{
  background: #fff;
  border-color: rgba(255,80,0,0.25);
  box-shadow: var(--shadow);
}

.debug-item{
  background: rgba(255,80,0,0.08);
  border-color: rgba(255,80,0,0.2);
  color: var(--text);
}

.boot-screen{
  background: var(--bg);
}

.boot-card{
  background: var(--surface);
  border-color: var(--divider);
  box-shadow: var(--shadow);
}

.notice-item{
  background: rgba(0,122,255,0.08);
  border-color: rgba(0,122,255,0.22);
}

.notice-item.notice-request{
  background: rgba(255,80,0,0.10);
  border-color: rgba(255,80,0,0.28);
}

.notice-item.notice-status{
  background: rgba(255,140,0,0.10);
  border-color: rgba(255,140,0,0.28);
}

.notice-item.notice-debug{
  background: rgba(255,59,48,0.10);
  border-color: rgba(255,59,48,0.28);
}

.notice-time{
  color: var(--text-3);
}

.profile-card{
  background: var(--surface);
  border-color: var(--divider);
}

.profile-avatar{
  background: var(--surface-2);
  border-color: var(--divider);
  color: var(--text-2);
}

.profile-badge{
  background: var(--surface-2);
  border-color: var(--divider);
  color: var(--text-2);
}

.profile-badge.role-client{
  background: rgba(0,122,255,.12);
  border-color: rgba(0,122,255,.35);
  color: #007aff;
}

.profile-badge.role-buyer,
.profile-badge.role-cargo,
.profile-badge.role-cargo_admin{
  background: rgba(255,80,0,.12);
  border-color: rgba(255,80,0,.35);
  color: #ff5000;
}

.profile-chip{
  background: var(--surface-2);
  border-color: var(--divider);
  color: var(--text-2);
}

.buyer-request-card{
  background: var(--surface);
  border-color: var(--divider);
}

.profile-avatar-preview{
  background: var(--surface-2);
  border-color: var(--divider);
}