/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:          #0b0f1a;
  --surface:     #131825;
  --surface-2:   #1a2035;
  --surface-3:   #212842;
  --border:      rgba(255, 255, 255, 0.06);
  --text:        #e8ecf4;
  --text-dim:    #7a839b;
  --sale:        #00c896;
  --expense:     #f45b69;
  --accent:      #6c5ce7;
  --radius:      14px;
  --radius-sm:   10px;
  --radius-xs:   8px;
  --shadow:      0 4px 24px rgba(0,0,0,0.35);
  --transition:  0.25s cubic-bezier(.4,0,.2,1);

  /* Chart Colors */
  --chart-1: #6c5ce7;
  --chart-2: #00c896;
  --chart-3: #ffb142;
  --chart-4: #f45b69;
  --chart-5: #34ace0;
  --chart-6: #706fd3;
  --chart-7: #ff5252;
  --chart-8: #b33939;
  --chart-9: #cc8e35;
  --chart-10: #218c74;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100dvh; overflow-x: hidden;
}

/* ── App Shell ───────────────────────────────────── */
.app-shell {
  position: relative; max-width: 520px;
  margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
}

.glow {
  position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: 0.15;
  pointer-events: none; z-index: 0;
  animation: pulse 8s ease-in-out infinite alternate;
}
.glow-1 { width: 300px; height: 300px; background: var(--expense); top: -40px; right: -40px; }
.glow-2 { width: 250px; height: 250px; background: var(--chart-1); bottom: 100px; left: -50px; }

@keyframes pulse {
  0%   { transform: scale(1);    opacity: 0.15; }
  100% { transform: scale(1.15); opacity: 0.1; }
}

/* ── Top Bar ─────────────────────────────────────── */
.top-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.back-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  text-decoration: none; transition: background var(--transition);
}
.back-btn:hover { background: var(--surface-2); }
.top-bar h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }

/* ── Body ────────────────────────────────────────── */
.analysis-body {
  position: relative; z-index: 2; flex: 1;
  padding: 4px 20px 32px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}

/* ── Filters Card ────────────────────────────────── */
.filters-card {
  display: flex; flex-direction: column; gap: 14px;
}
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim);
}

.segment-control {
  display: flex; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px;
}
.segment {
  flex: 1; padding: 10px; font-family: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--text-dim); background: transparent; border: none; border-radius: var(--radius-xs);
  cursor: pointer; transition: all var(--transition);
}
.segment.active[data-type="expense"] { background: var(--expense); color: #fff; box-shadow: 0 2px 12px rgba(244,91,105,0.25); }
.segment.active[data-type="sale"]    { background: var(--sale);    color: #fff; box-shadow: 0 2px 12px rgba(0,200,150,0.25); }

.select-wrap { position: relative; }
.select-chevron {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); color: var(--text-dim); pointer-events: none;
}
.select-wrap select {
  width: 100%; padding: 12px 14px; padding-right: 36px;
  font-family: inherit; font-size: 0.9rem; font-weight: 500;
  color: var(--text); background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--transition);
}
.select-wrap select:focus { border-color: var(--accent); }

/* ── Summary Card ────────────────────────────────── */
.summary-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.summary-total { text-align: center; }
.total-label {
  display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 4px;
}
.total-amount {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
  transition: color var(--transition);
}

/* ── CSS Donut Chart ─────────────────────────────── */
.chart-container {
  display: flex; justify-content: center; padding: 24px 0;
}
.donut-chart {
  width: 200px; height: 200px;
  border-radius: 50%;
  /* Conic gradient applied via JS */
  background: conic-gradient(var(--surface-2) 100%);
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: scaleIn 0.5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.donut-chart::after {
  content: '';
  position: absolute; inset: 26px; /* controls thickness */
  background: var(--bg);
  border-radius: 50%;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.3);
}

/* ── Category List ───────────────────────────────── */
.results-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 20px 20px;
}
.category-list {
  display: flex; flex-direction: column; gap: 4px;
}
.cat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-bottom: 1px solid var(--border);
  animation: slideUp 0.3s cubic-bezier(.22,1,.36,1) both;
}
.cat-item:last-child { border-bottom: none; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cat-dot {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
}
.cat-info { flex: 1; min-width: 0; }
.cat-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-bar-bg {
  width: 100%; height: 6px; background: var(--surface-3);
  border-radius: 3px; margin-top: 6px; overflow: hidden;
}
.cat-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.8s cubic-bezier(.22,1,.36,1);
}

.cat-stats { text-align: right; }
.cat-amount { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.cat-pct { font-size: 0.75rem; font-weight: 600; color: var(--text-dim); margin-top: 2px; }

/* ── Empty State ─────────────────────────────────── */
.empty-state {
  display: none; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 16px; text-align: center; color: var(--text-dim);
}
.empty-state.show { display: flex; }
.empty-state svg { opacity: 0.2; }
.empty-state p { font-size: 0.9rem; font-weight: 500; }

/* ── Responsive ──────────────────────────────────── */
@media (min-width: 560px) {
  .app-shell {
    margin-top: 24px; margin-bottom: 24px;
    min-height: calc(100dvh - 48px);
    border: 1px solid var(--border); border-radius: 24px;
    background: rgba(19, 24, 37, 0.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  }
}

.analysis-body::-webkit-scrollbar { width: 4px; }
.analysis-body::-webkit-scrollbar-track { background: transparent; }
.analysis-body::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 4px; }