:root {
      --bg: #0f172a; /* slate-900 */
      --card: #111827ee; /* gray-900 */
      --ink: #e5e7eb; /* gray-200 */
      --muted: #9ca3af; /* gray-400 */
      --accent: #22d3ee; /* cyan-400 */
      --accent-2: #a78bfa; /* violet-400 */
      --good: #34d399;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      background: radial-gradient(1200px 600px at 80% -10%, #1e293b 0%, #0b1223 40%, var(--bg) 100%);
      color: var(--ink);
    }
    .wrap { max-width: 980px; margin: 40px auto; padding: 16px; }
    .card {
      background: linear-gradient(180deg, #0b1223cc, var(--card));
      border: 1px solid #1f2937; border-radius: 18px; padding: 20px; backdrop-filter: blur(4px);
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
    }
    h1 { font-size: clamp(24px, 3.8vw, 36px); margin: 0 0 6px; letter-spacing: .3px; }
    p.sub { margin-top: 0; color: var(--muted); }
    label { display:block; font-weight:600; margin: 14px 0 6px; }
    input[type="text"], select, input[type="number"]{
      width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #374151; background:#0b1223; color:var(--ink);
      outline: none; transition: border .15s;
    }
    input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.15); }
    .row { display:grid; grid-template-columns: 1fr; gap: 14px; }
    @media (min-width:720px){ .row { grid-template-columns: repeat(2, 1fr);} }
    .controls { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
    @media (max-width:680px){ .controls{ grid-template-columns:1fr; } }
    .btn { display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius: 14px; border:1px solid #334155; cursor:pointer; background:#0b1223; color:var(--ink); font-weight:600; }
    .btn:hover{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.12); }
    .btn.primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1223; border:0; }
    .btn.primary:hover{ filter: brightness(1.06); }
    .grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px; margin-top:14px; }
    .name{ padding:14px 12px; border:1px solid #334155; border-radius:12px; background:#0b1223; display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .muted{ color: var(--muted); font-size: 12px; }
    .footer{ margin-top: 18px; color: var(--muted); font-size: 13px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .range { width:100%; }
    .fav-section { margin-top: 20px; }
    .fav-title { font-weight: bold; margin-bottom: 6px; }
    .hidden { display:none; }
    #toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(135, 245, 121, 1);
    color: #000000ff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
    z-index: 9999;
    }
    #toast.show {
    opacity: 1;
    }