:root {
  --aqua: #12bde9;
  --sky: #6cc7ed;
  --aqua-soft: #dff7ff;
  --aqua-pale: #f1fbff;
  --navy: #062f55;
  --navy-2: #0a4776;
  --ink: #132238;
  --muted: #688096;
  --white: #ffffff;
  --surface: #ffffff;
  --bg: #f6fbfe;
  --border: #dfeef6;
  --green: #1bb875;
  --green-soft: #e7f9f1;
  --yellow: #f0ad25;
  --yellow-soft: #fff6dc;
  --red: #ef5c61;
  --red-soft: #ffebec;
  --blue: #069fe2;
  --shadow: 0 12px 34px rgba(4, 61, 102, 0.09);
  --shadow-sm: 0 5px 18px rgba(4, 61, 102, 0.07);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height:100vh; min-height:100dvh; }
button, input, select, textarea { font: inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }

.app-shell { min-height:100dvh; display:flex; }
.main-column { min-width:0; flex:1; padding-bottom: calc(78px + var(--safe-bottom)); }
.side-nav { display:none; }
.topbar { position:sticky; top:0; z-index:20; min-height:72px; padding: calc(10px + var(--safe-top)) 16px 10px; background:rgba(246,251,254,.92); backdrop-filter: blur(18px); border-bottom:1px solid rgba(217,235,245,.76); }
.topbar-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand-mini { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mini img { width:42px; height:42px; border-radius:14px; filter:drop-shadow(0 5px 10px rgba(0,112,177,.15)); }
.brand-mini strong { display:block; color:var(--navy); font-size:15px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-mini small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.top-actions { display:flex; gap:8px; align-items:center; }
svg { display:block; }
.icon-btn svg { width:20px; height:20px; }
.btn svg { width:18px; height:18px; }
.mini-btn svg { width:17px; height:17px; }
.icon-btn { width:42px; height:42px; border-radius:14px; border:1px solid var(--border); background:var(--white); display:grid; place-items:center; color:var(--navy); box-shadow:var(--shadow-sm); }
.icon-btn:hover { border-color:#b9deef; transform:translateY(-1px); }
.install-btn { padding:0; width:42px; flex:0 0 42px; }
.install-btn .install-text { display:none; }
.topbar-date { display:none; margin-left:auto; color:var(--muted); font-size:12px; font-weight:700; }
.topbar-date::first-letter { text-transform:uppercase; }

.view { max-width:1280px; margin:0 auto; padding:18px 16px 26px; }
.view-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.view-header h1 { margin:0; font-size:26px; line-height:1.15; color:var(--navy); }
.view-header p { margin:5px 0 0; color:var(--muted); font-size:14px; }

.hero { position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:22px; background:linear-gradient(135deg,#effbff 0%,#ddf6ff 58%,#c9f1ff 100%); border:1px solid #d6f1fb; box-shadow:var(--shadow); margin-bottom:16px; }
.hero::after { content:""; position:absolute; width:320px; height:120px; right:-70px; bottom:-60px; border-radius:50%; border:16px solid rgba(18,189,233,.13); transform:rotate(-7deg); box-shadow:0 -22px 0 rgba(18,189,233,.08),0 -44px 0 rgba(18,189,233,.06); }
.hero h2 { margin:0 0 7px; color:var(--navy); font-size:22px; }
.hero p { margin:0; max-width:650px; color:#335d79; line-height:1.5; font-size:14px; position:relative; z-index:2; }
.hero .verse { margin-top:12px; font-size:12px; color:#527891; font-style:italic; }

.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.metric-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); min-width:0; }
.metric-head { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.metric-icon { width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:grid; place-items:center; background:var(--aqua-pale); color:var(--blue); }
.metric-icon svg { width:18px; height:18px; }
.tone-blue { background:#e2f4fd; color:#0b83c6; }
.tone-amber { background:var(--yellow-soft); color:#b07d16; }
.tone-green { background:var(--green-soft); color:#12965f; }
.tone-red { background:var(--red-soft); color:#d4494f; }
.tone-aqua { background:var(--aqua-soft); color:#0a9ecb; }
.metric-label { color:var(--muted); font-size:12px; min-width:0; line-height:1.25; }
.metric-value { color:var(--navy); font-size:22px; font-weight:800; letter-spacing:-.025em; overflow-wrap:anywhere; }
.metric-value.is-text { font-size:17px; }
.metric-sub { margin-top:4px; font-size:11px; color:var(--muted); }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); }
.card + .card { margin-top:12px; }
.card-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.card h2, .card h3 { margin:0; color:var(--navy); }
.card h2 { font-size:18px; }
.card h3 { font-size:15px; }

.recommend-card { display:flex; gap:12px; align-items:flex-start; background:linear-gradient(135deg,#e8fbff,#d8f6ff); border-color:#c8edf9; }
.recommend-card .bulb { width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:grid; place-items:center; background:white; color:#e0a01f; box-shadow:var(--shadow-sm); }
.recommend-card .bulb svg { width:22px; height:22px; }
.recommend-card strong { color:var(--navy); display:block; margin-bottom:4px; }
.recommend-card p { margin:0; color:#406b84; font-size:13px; line-height:1.45; }

.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; height:calc(70px + var(--safe-bottom)); padding:7px 6px var(--safe-bottom); display:grid; grid-template-columns:repeat(5,1fr); background:rgba(255,255,255,.97); backdrop-filter:blur(18px); border-top:1px solid var(--border); box-shadow:0 -8px 30px rgba(3,50,85,.08); }
.nav-btn { border:0; background:transparent; color:#7590a4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; border-radius:13px; }
.nav-btn .nav-icon { display:grid; place-items:center; }
.nav-btn .nav-icon svg { width:22px; height:22px; }
.nav-btn .nav-label { font-size:10px; font-weight:700; white-space:nowrap; }
.nav-btn.active { color:var(--blue); background:#edf9ff; }

.toolbar { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.search-box { flex:1 1 210px; min-width:0; position:relative; }
.search-box input { width:100%; height:44px; padding:0 14px 0 40px; border:1px solid var(--border); border-radius:14px; background:var(--white); color:var(--ink); outline:none; }
.search-box input:focus { border-color:#77cfee; box-shadow:0 0 0 3px rgba(18,189,233,.12); }
.search-box::before { content:"⌕"; position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#6f8ea2; font-size:20px; }
.btn { min-height:42px; border:0; border-radius:13px; padding:0 15px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:.15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:linear-gradient(135deg,#10b9e7,#087fd0); color:#fff; box-shadow:0 8px 18px rgba(6,159,226,.2); }
.btn-soft { background:#ecf8fd; color:var(--navy); border:1px solid #d8eef8; }
.btn-danger { background:var(--red-soft); color:#b83e44; }
.btn-success { background:var(--green-soft); color:#08774a; }
.btn-warning { background:var(--yellow-soft); color:#8c6200; }
.btn-block { width:100%; }

.sale-list { display:flex; flex-direction:column; gap:9px; }
.sale-item { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:11px; align-items:center; padding:12px; border:1px solid var(--border); background:white; border-radius:16px; }
.sale-item.chosen { border-color:#a9ddf8; background:#f7fdff; }
.sale-item .thumb { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,#e6f7fd,#cbedfb); color:#0a6ea8; font-weight:900; font-size:17px; }
.product-main { min-width:0; }
.product-main strong { color:var(--navy); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-meta { color:var(--muted); font-size:12px; margin-top:3px; }
.qty-control { display:grid; grid-template-columns:34px 36px 34px; align-items:center; border:1px solid #d9eaf4; border-radius:12px; overflow:hidden; background:#f9fdff; }
.qty-control button { height:34px; border:0; background:#eaf7fd; color:var(--navy); display:grid; place-items:center; }
.qty-control button svg { width:16px; height:16px; }
.qty-control .plus { background:var(--blue); color:#fff; }
.qty-control button:disabled { background:#f2f7fa; color:#9db3c1; }
.qty-control span { text-align:center; font-weight:800; font-size:13px; }
.stock-zero { color:var(--red); font-weight:700; }

.checkout { position:sticky; bottom:calc(76px + var(--safe-bottom)); z-index:10; margin-top:14px; background:rgba(255,255,255,.98); backdrop-filter:blur(12px); border:1px solid #d9ecf5; border-radius:20px; padding:14px; box-shadow:0 15px 35px rgba(4,58,95,.14); }
.total-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.total-row span { color:var(--muted); font-weight:700; }
.total-row strong { color:var(--navy); font-size:25px; }
.status-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.status-chip { border:1px solid var(--border); background:#f7fbfd; color:#597386; border-radius:12px; min-height:38px; font-weight:800; }
.status-chip[data-status="PAID"] { background:var(--green-soft); border-color:#cceedf; color:#0d8755; }
.status-chip[data-status="PENDING"] { background:var(--yellow-soft); border-color:#f7e3b1; color:#8f6400; }
.status-chip[data-status="PARTIAL"] { background:#e4f5ff; border-color:#c6e8fa; color:#0878b9; }
.status-chip.active { color:#fff; box-shadow:0 7px 15px rgba(4,58,95,.15); }
.status-chip[data-status="PAID"].active { background:var(--green); border-color:var(--green); }
.status-chip[data-status="PENDING"].active { background:var(--yellow); border-color:var(--yellow); }
.status-chip[data-status="PARTIAL"].active { background:var(--blue); border-color:var(--blue); }

.inventory-list { display:flex; flex-direction:column; gap:9px; }
.inventory-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:16px; padding:13px; }
.inventory-item.inactive { opacity:.58; }
.inventory-name { font-weight:800; color:var(--navy); }
.inventory-details { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:6px; color:var(--muted); font-size:11px; }
.inventory-details b { color:#385d77; }
.item-actions { display:flex; gap:7px; }
.mini-btn { width:35px; height:35px; border-radius:11px; border:1px solid var(--border); background:#f4fbfe; display:grid; place-items:center; color:var(--navy); }
.mini-btn.danger { background:var(--red-soft); color:#bc444a; border-color:#ffd1d3; }
.stock-pill { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 8px; background:#eef9fd; color:#416b83; font-size:10px; font-weight:800; }
.stock-pill.low { background:var(--red-soft); color:#b53e45; }

.history-list { display:flex; flex-direction:column; gap:10px; }
.sale-card { border:1px solid var(--border); border-radius:17px; padding:14px; background:#fff; box-shadow:var(--shadow-sm); }
.sale-card-head { display:flex; justify-content:space-between; gap:10px; }
.sale-card h3 { margin:0; color:var(--navy); font-size:15px; }
.sale-card .date { color:var(--muted); font-size:11px; margin-top:3px; }
.sale-amount { font-size:19px; color:var(--navy); font-weight:900; text-align:right; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:10px; font-weight:900; margin-top:5px; }
.badge.paid { background:var(--green-soft); color:#0c8452; }
.badge.pending { background:var(--yellow-soft); color:#8a6200; }
.badge.partial { background:#e5f6ff; color:#0879b8; }
.badge.cancelled { background:#eef1f4; color:#6c7c89; }
.sale-items-text { color:#5d7789; font-size:12px; line-height:1.45; margin:10px 0; }
.sale-finance { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; }
.finance-mini { background:#f7fbfd; border-radius:11px; padding:8px; }
.finance-mini span { display:block; color:var(--muted); font-size:9px; }
.finance-mini b { display:block; color:var(--navy); font-size:12px; margin-top:2px; }
.sale-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

.report-grid { display:grid; gap:12px; }
.chart-card { overflow:hidden; }
.bar-chart { height:230px; display:flex; align-items:flex-end; gap:10px; padding:16px 4px 2px; border-bottom:1px solid var(--border); background:repeating-linear-gradient(to top, transparent 0 47px, #eef5f9 47px 48px); }
.bar-col { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; }
.bar-value { font-size:10px; font-weight:800; color:var(--navy); }
.bar { width:min(44px,75%); min-height:4px; background:linear-gradient(180deg,#14c8ef,#0786d0); border-radius:9px 9px 3px 3px; box-shadow:0 6px 12px rgba(5,145,211,.15); }
.bar-label { height:34px; font-size:9px; color:var(--muted); text-align:center; display:flex; align-items:flex-start; justify-content:center; overflow:hidden; }
.donut-wrap { display:grid; grid-template-columns:160px 1fr; align-items:center; gap:16px; }
.donut { width:150px; height:150px; margin:auto; border-radius:50%; position:relative; display:grid; place-items:center; }
.donut::after { content:""; position:absolute; inset:27px; background:white; border-radius:50%; box-shadow:inset 0 0 0 1px var(--border); }
.donut-center { position:relative; z-index:2; text-align:center; }
.donut-center strong { display:block; color:var(--navy); font-size:15px; letter-spacing:-.02em; }
.donut-center span { display:block; color:var(--muted); font-size:10px; margin-bottom:2px; }
.legend { display:flex; flex-direction:column; gap:8px; }
.legend-row { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#557184; font-size:12px; }
.legend-name { display:flex; align-items:center; gap:7px; }
.legend-dot { width:10px; height:10px; border-radius:50%; }

.range-select { height:42px; border:1px solid var(--border); border-radius:13px; background:white; padding:0 12px; color:var(--navy); font-weight:700; outline:none; }
.recommendations { display:grid; gap:10px; }
.insight { border-radius:15px; padding:13px; border:1px solid var(--border); background:#f9fdff; display:flex; gap:10px; }
.insight-icon { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:white; box-shadow:var(--shadow-sm); flex:0 0 36px; color:var(--blue); }
.insight-icon svg { width:19px; height:19px; }
.insight.tone-green { background:#f4fdf8; border-color:#cdeedd; }
.insight.tone-green .insight-icon { color:#12965f; }
.insight.tone-amber { background:#fffbf2; border-color:#f6e5bd; }
.insight.tone-amber .insight-icon { color:#b07d16; }
.insight.tone-red { background:#fff8f8; border-color:#ffd9db; }
.insight.tone-red .insight-icon { color:#d4494f; }
.insight strong { color:var(--navy); font-size:13px; display:block; }
.insight p { margin:3px 0 0; color:#607b8d; font-size:11px; line-height:1.4; }

.settings-grid { display:grid; gap:12px; }
.settings-actions { display:grid; grid-template-columns:1fr; gap:9px; }
.storage-note { color:var(--muted); font-size:12px; line-height:1.5; }
.danger-zone { border-color:#ffd8da; background:#fffafa; }

.empty { text-align:center; padding:36px 18px; color:var(--muted); }
.empty .emoji { font-size:38px; margin-bottom:8px; }
.empty strong { display:block; color:var(--navy); margin-bottom:4px; }

.modal-backdrop { position:fixed; inset:0; z-index:60; background:rgba(2,28,50,.48); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; padding:18px 12px calc(18px + var(--safe-bottom)); }
.modal { width:min(560px,100%); max-height:90dvh; overflow:auto; background:white; border-radius:24px; box-shadow:0 30px 80px rgba(0,27,48,.28); padding:18px; animation:modalIn .16s ease-out; }
@keyframes modalIn { from { transform:translateY(14px); opacity:0; } }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.modal-header h2 { margin:0; color:var(--navy); font-size:20px; }
.close-btn { width:38px; height:38px; border:0; border-radius:12px; background:#edf7fb; color:var(--navy); font-size:20px; }
.form-grid { display:grid; gap:12px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field label { display:block; color:#4d6d82; font-size:11px; font-weight:800; margin:0 0 5px; }
.field input, .field textarea, .field select { width:100%; min-height:44px; border:1px solid var(--border); border-radius:13px; padding:10px 12px; outline:none; background:white; color:var(--ink); }
.field textarea { min-height:80px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:#6cc8ed; box-shadow:0 0 0 3px rgba(18,189,233,.12); }
.field-help { color:var(--muted); font-size:10px; margin-top:4px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

.toast-root { position:fixed; left:12px; right:12px; bottom:calc(84px + var(--safe-bottom)); z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast { width:min(480px,100%); background:#062f55; color:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 16px 36px rgba(2,35,62,.24); font-size:12px; animation:toastIn .2s ease-out; }
.toast.error { background:#a8393f; }
@keyframes toastIn { from { transform:translateY(12px); opacity:0; } }

.table-wrap { display:none; overflow:auto; border:1px solid var(--border); border-radius:16px; }
table { width:100%; border-collapse:collapse; background:white; }
th, td { text-align:left; padding:12px 13px; border-bottom:1px solid #edf4f8; font-size:12px; white-space:nowrap; }
th { color:#688096; font-size:10px; text-transform:uppercase; letter-spacing:.04em; background:#f8fcfe; }
td { color:#345b74; }
td strong { color:var(--navy); }

@media (min-width:700px) {
  .view { padding:24px; }
  .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .report-grid { grid-template-columns:1.15fr .85fr; }
  .settings-actions { grid-template-columns:repeat(2,1fr); }
  .modal-backdrop { align-items:center; }
  .inventory-list.mobile-only { display:none; }
  .table-wrap { display:block; }
}

@media (min-width:980px) {
  .app-shell { display:grid; grid-template-columns:245px minmax(0,1fr); }
  .main-column { padding-bottom:0; grid-column:2; }
  .side-nav { grid-column:1; grid-row:1; position:fixed; inset:0 auto 0 0; width:245px; display:flex; flex-direction:column; background:linear-gradient(180deg,#062f55,#073d68 74%,#075387); color:white; padding:24px 16px; overflow:hidden; }
  .side-nav::after { content:""; position:absolute; left:-30px; right:-60px; bottom:-54px; height:150px; border-radius:50%; border:16px solid rgba(20,200,239,.35); transform:rotate(-7deg); box-shadow:0 -26px 0 rgba(108,199,237,.20),0 -52px 0 rgba(223,247,255,.10); }
  .side-brand { display:flex; align-items:center; gap:11px; margin-bottom:26px; position:relative; z-index:2; }
  .side-brand img { width:46px; height:46px; }
  .side-brand strong { display:block; line-height:1.1; font-size:15px; }
  .side-brand small { display:block; opacity:.68; font-size:10px; margin-top:3px; }
  .side-menu { display:flex; flex-direction:column; gap:6px; position:relative; z-index:2; }
  .side-menu .nav-btn { flex-direction:row; justify-content:flex-start; min-height:46px; padding:0 13px; gap:10px; color:#d5e9f5; }
  .side-menu .nav-btn.active { background:rgba(21,184,233,.19); color:white; box-shadow:inset 3px 0 0 #22c3ed; }
  .side-menu .nav-label { font-size:12px; }
  .side-footer { margin-top:auto; position:relative; z-index:2; font-size:11px; line-height:1.5; color:#b9ddeb; font-style:italic; padding:0 7px 72px; }
  .bottom-nav { display:none; }
  .topbar { padding-left:24px; padding-right:24px; }
  .topbar .brand-mini { display:none; }
  .install-btn { width:auto; flex:0 0 auto; padding:0 15px; }
  .install-btn .install-text { display:inline; }
  .topbar-date { display:block; }
  .checkout { bottom:18px; }
  .toast-root { bottom:24px; left:265px; }
  .view-header h1 { font-size:30px; }
  .hero { padding:26px; }
}

@media (min-width:1200px) {
  .view { padding:28px 32px 40px; }
  .dashboard-lower { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .dashboard-lower .card + .card { margin-top:0; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

.rank-list { display:flex; flex-direction:column; gap:8px; }
.rank-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; border-radius:12px; background:#f7fbfd; color:#547185; font-size:12px; }
.rank-row span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-row span b { display:inline-grid; place-items:center; width:23px; height:23px; margin-right:7px; border-radius:8px; background:#e3f6fd; color:#087dbd; font-size:10px; }
.rank-row strong { color:var(--navy); flex:0 0 auto; }