:root {
      font-family: "Segoe UI", Arial, sans-serif;
      background: #0f172a;
      color: #e2e8f0;
    }
    body {
      display: grid;
      place-items: center;
      min-height: 100vh;
      margin: 0;
    }
    .panel {
      background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border: 1px solid rgba(226,232,240,0.2);
      box-shadow: 0 20px 50px rgba(0,0,0,0.35);
      border-radius: 18px;
      padding: 28px;
      max-width: 420px;
      width: 92%;
    }
    h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: 0.4px; }
    p { margin: 0 0 18px; color: #cbd5e1; }
    label { display: block; margin-bottom: 10px; font-weight: 600; }
    input[type="number"] {
      width: 93%;
      padding: 12px 14px;
      margin-top: 6px;
      border-radius: 8px;
      border: 1px solid rgba(148,163,184,0.5);
      background: rgba(15,23,42,0.6);
      color: #e2e8f0;
      font-size: 15px;
    }
    input[type="number"]:focus {
      outline: 2px solid #38bdf8;
      border-color: transparent;
    }
    .row { margin-bottom: 14px; }
    .result {
      margin-top: 16px;
      padding: 14px;
      border-radius: 10px;
      background: rgba(56,189,248,0.1);
      color: #38bdf8;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.5px;
    }
    .hint { font-size: 13px; color: #94a3b8; }