:root {
        --bg: #0b1020;
        --card: #11162a;
        --muted: #a6b0cf;
        --text: #e7ebff;
        --accent: #6c8cff;
        --accent-2: #7ee7c2;
        --danger: #ff6b6b;
        --border: #1e2542;
        --shadow: 0 10px 30px rgba(0,0,0,.35);
        --radius: 16px;
    }
    *{box-sizing:border-box}
    body {
        margin:0; background:linear-gradient(160deg, #0a0d1d, #121a35 60%);
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
        color: var(--text);
        min-height:100svh; display:flex; align-items:center; justify-content:center; padding:24px;
    }
    .wrap { width:100%; max-width: 880px; }
    .card {
        background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
                    radial-gradient(1200px 400px at 100% -20%, rgba(124, 93, 250, .18), transparent 40%),
                    radial-gradient(1200px 400px at -10% 120%, rgba(80, 227, 194, .16), transparent 40%),
                    var(--card);
        border:1px solid var(--border);
        border-radius: var(--radius);
        padding: 28px;
        box-shadow: var(--shadow);
        backdrop-filter: blur(6px);
    }
    h1 { margin:0 0 6px; font-size: 24px; letter-spacing:.2px; }
    .sub { color: var(--muted); margin-bottom: 20px; }
    form { display:grid; gap:14px; }
    label { font-size:13px; color: var(--muted); margin-bottom:6px; display:block; }
    input, select, button { font: inherit; }
    .field { display:flex; flex-direction:column; }
    .row { display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .row-4 { display:grid; gap:14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
    .control, select {
        border:1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text);
        border-radius: 12px; padding:12px 14px; outline:none;
        transition: border-color .2s, box-shadow .2s;
    }
    .control:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,140,255,.18); }
    .btn {
        appearance:none; border:0; cursor:pointer; border-radius: 12px; padding: 12px 16px; font-weight:600;
        background: linear-gradient(135deg, var(--accent), #5a74ff); color: white;
        transition: transform .04s ease, filter .2s ease;
    }
    .btn:active { transform: translateY(1px); }
    .btn.secondary { background: linear-gradient(135deg, #2a3259, #222a4d); color: var(--text); }
    .btn.danger { background: linear-gradient(135deg, #ff6b6b, #ef4444); }
    .actions { display:flex; gap:10px; flex-wrap:wrap; }
    .errors { background: rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.35); color:#ffe3e3; padding:10px 12px; border-radius:12px; }
    .flash { background: rgba(110,231,183,.12); border:1px solid rgba(110,231,183,.35); color:#d1fae5; padding:10px 12px; border-radius:12px; }
    .grid { display:grid; gap:16px; }
    .summary { display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pill { font-size:12px; color: var(--muted); border:1px solid var(--border); padding:6px 10px; border-radius:999px; display:inline-block; }
    .kpi { border:1px solid var(--border); border-radius:14px; padding:16px; background: rgba(255,255,255,.02); }
    .kpi h3 { margin: 0 0 6px; font-size:14px; color: var(--muted); font-weight:600; }
    .kpi .val { font-size:22px; font-weight:800; letter-spacing:.3px; }
    .topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
    .topbar .who { color: var(--muted); font-size: 13px; }
    .footer { margin-top:12px; color: var(--muted); font-size:12px; text-align:center; }
    @media (max-width:640px){ .row, .row-4, .summary { grid-template-columns: 1fr; } }

/* Prevent iOS zoom-on-focus and improve tap targets */
input, select, button { font-size: 16px; min-height: 42px; }

/* Let the card breathe on small screens */
@media (max-width: 640px) {
  .wrap { padding: 0 12px; }
  .card { padding: 20px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .actions { gap: 8px; }
  .actions .btn { width: 100%; }           /* Buttons stack full-width */
  .kpi .val { word-break: break-word; }    /* Avoid overflow in KPI values */
  .footer { margin-top: 16px; line-height: 1.4; }

  /* Inputs full width and comfy */
  .control, select { width: 100%; }
}

/* Tablet+: bring multi-column layouts back progressively */
@media (min-width: 641px) and (max-width: 899px) {
  .row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .row-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } /* was 4; give more room */
  .summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .actions .btn { width: auto; }
}

/* Wide screens: a little more density for summary tiles */
@media (min-width: 900px) {
  .summary { grid-template-columns: repeat(3, minmax(0,1fr)); }
}