:root {
  --bg: #ffffff;
  --surface: #f8f9fb;
  --surface2: #f0f2f7;
  --border: #e0e3eb;
  --accent: #5b6ef5;
  --accent2: #ff6b6b;
  --text: #1a1f3a;
  --muted: #6b7280;
  --radius: 14px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%);
  color: var(--text);
  min-height: 100vh;
  padding: 24px 16px 40px;
}

.app { max-width: 1100px; margin: 0 auto; }

/* Header */
/* header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 32px;
  background: #ffffff; padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.header-icon { width:48px;height:48px; background: linear-gradient(135deg, var(--accent), #7b8ff7); border-radius:12px; display:grid; place-items:center; font-size:24px; flex-shrink:0; }
header h1 { font-family: 'Syne', sans-serif; font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
header p { font-size:13px; color: var(--muted); margin-top:4px; } */

/* Card */
.card { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.card-title { font-family:'Arial',sans-serif; font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#000000; margin-bottom:18px; }

/* Controls Grid */
.controls-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:16px; }
.field label { display:block; font-size:11px; font-weight:700; color:#1a1f3a; letter-spacing:0.5px; margin-bottom:8px; text-transform:uppercase; }
input[type="text"], select { width:100%; background: var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13.5px; padding:10px 12px; outline:none; transition:all 0.2s; }
input[type="text"]:focus, select:focus { border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(91,110,245,0.1); }
select option { background:#fff; color:var(--text); }

/* Toggle */
.toggle-row { display:flex; align-items:center; gap:10px; margin-top:4px; }
.toggle { position:relative; width:40px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#e0e3eb; border-radius:20px; cursor:pointer; transition:0.2s; }
.slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:0.2s; box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.toggle input:checked + .slider { background:var(--accent); }
.toggle input:checked + .slider::before { transform: translateX(16px); }
.toggle-label { font-size:13px; color:#1a1f3a; font-weight:700; }

/* Table */
.table-wrapper { overflow-x:auto; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; min-width:360px; }
thead th { font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#2d3748; padding:12px 10px; text-align:left; border-bottom:2px solid var(--border); }
.data-row td { padding:10px 4px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-row:last-child td { border-bottom:none; }
.row-input { background: var(--surface2); border:1px solid var(--border); border-radius:7px; color: var(--text); font-size:13px; padding:8px 10px; width:100%; outline:none; transition:all 0.2s; }
.row-input:focus { border-color: var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(91,110,245,0.1); }
input[type="number"].row-input { -moz-appearance: textfield; }
input[type="number"].row-input::-webkit-inner-spin-button,
input[type="number"].row-input::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type="color"] { width:40px; height:36px; border:1px solid var(--border); border-radius:7px; cursor:pointer; }

/* Buttons */
.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.btn { font-size:13px; font-weight:600; padding:10px 18px; border-radius:8px; border:none; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:7px; }
.btn-primary { background: var(--accent); color:#fff; box-shadow:0 4px 14px rgba(91,110,245,0.35); }
.btn-primary:hover { background:#4a5ee8; transform:translateY(-1px); box-shadow:0 6px 20px rgba(91,110,245,0.4); }
.btn-secondary { background: var(--surface2); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); background:#fff; color: var(--accent); }
.btn-outline { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-outline:hover { color:var(--text); border-color:var(--accent); background:var(--surface2); }

/* Chart */
.chart-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow: var(--shadow-sm);}
.chart-area {
  width: 100%;
  min-height: 300px; /* give a visible height on mobile */
  position: relative;
}

canvas {
  width: 100% !important;
  height: auto !important; /* maintain aspect ratio */
}

/* Empty state */
.empty-state { text-align:center; padding:60px 20px; color:var(--muted);}
.empty-state .big-icon { font-size:48px; margin-bottom:12px; }
.empty-state p { font-size:14px; }

/* Responsive */
@media (max-width: 600px) {
  .controls-grid {
    grid-template-columns: 1fr; /* full width per control */
    gap: 12px;
  }

  .btn-row {
    flex-direction: column;
    gap: 10px;
  }

  .btn {
    width: 100%; /* buttons stretch full width */
    justify-content: center;
  }

  .table-wrapper {
    overflow-x: auto; /* keep table scrollable */
  }

  .chart-card {
    padding: 16px;
  }
}