:root{
      --bg:#0f1220; 
      --panel:#171b2e; 
      --accent:#4f76ff; 
      --text:#e9edf5; 
      --muted:#9aa3b2; 
      --danger:#ff5d5d;

      --radius:18px;
}
*{
    box-sizing:border-box
}
html,body{
        height:100%
    }


body{
      margin:0; 
      font-family:system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 1200px at 80% -10%, #2a3158 0%, transparent 60%),
                  radial-gradient(1000px 800px at -10% 110%, #1e2442 0%, transparent 60%),
                  var(--bg);
      color:var(--text);
      display:grid; 
      place-items:center;
       padding:24px;
    }
    .wrap{width:min(380px, 94vw)}

    .brand{display:flex; 
        align-items:center; 
        gap:10px;
        margin-bottom:14px; 
        opacity:.9}

    .brand .dot{
        width:10px;
        height:10px;
        border-radius:50%;
        background:var(--accent);
         box-shadow:0 0 16px var(--accent)
        }
    .brand h1{font-size:18px; 
        font-weight:600; 
        letter-spacing:.4px; 
        margin:0
    }

.calc{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.04)), var(--panel);
      border-radius:var(--radius);
      padding:18px; 
      box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
      backdrop-filter: blur(5px);
    }
.screen{
      height:88px; border-radius:14px; background:rgba(0,0,0,.25);
      display:flex;
       flex-direction:column;
        justify-content:center;
         gap:2px; padding:12px 14px;
          margin-bottom:12px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .history{font-size:12px; color:var(--muted); min-height:16px; text-align:right; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    .result{font-size:32px; font-weight:700; text-align:right; letter-spacing:.6px}

    .keys{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px}
    button{
      appearance:none; border:none; cursor:pointer; height:58px; border-radius:14px; font-size:18px; font-weight:600; color:var(--text);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06)), #222743;
      box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
      transition: transform .04s ease, filter .2s ease;
    }
    button:active{ transform: translateY(2px) }
    .op{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)), #2a2f54 }
    .accent{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.08)), var(--accent); color:white }
    .danger{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.08)), var(--danger) }
    .span-2{ grid-column: span 2 }

    .footer{margin-top:12px; display:flex; gap:10px; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px}
    .toggle-theme{ height:36px; padding:0 12px; font-size:14px }

    @media (hover:hover){
      button:hover{ filter:brightness(1.06) }
    }

    /* Light theme */
    .light{ --bg:#f3f6ff; --panel:#ffffff; --accent:#4f76ff; --text:#0f1320; --muted:#657089; --danger:#ff3d3d }
    .light body{ background:#f3f6ff }
    .light .screen{ background:#f4f6fb }
    .light button{ background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.03)), #f1f3fb; color:#101426 }
    .light .op{ background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.03)), #e9ecf8 }
    .light .accent{ color:white }