:root{
      --bg:#f3f4f6;
      --panel:#ffffff;
      --accent:#4f46e5;
      --accent-soft:#eef2ff;
      --muted:#9ca3af;
      --btn:#f1f5f9;
      --btn-accent:#e0e7ff;
      --danger:#ef4444;
      --shadow-main:0 10px 30px rgba(15,23,42,0.12);
      --shadow-btn:0 4px 10px rgba(2,6,23,0.04);
      --text:#0f172a;
    }

    /* Dark theme */
    body.dark{
      --bg:#020617;
      --panel:#020617;
      --accent:#6366f1;
      --accent-soft:#1e293b;
      --muted:#9ca3af;
      --btn:#0f172a;
      --btn-accent:#111827;
      --danger:#ef4444;
      --shadow-main:0 16px 40px rgba(15,23,42,0.6);
      --shadow-btn:0 4px 12px rgba(15,23,42,0.6);
      --text:#e5e7eb;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      background:radial-gradient(circle at top, #eef2ff 0%, var(--bg) 55%);
      font-family:Inter, "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:var(--text);
      padding:20px;
      transition:background .25s ease, color .25s ease;
    }

    .calculator {
      width:380px;
      max-width:100%;
      background:linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
      border-radius:20px;
      box-shadow: var(--shadow-main);
      overflow:hidden;
      padding:18px 18px 14px;
      backdrop-filter: blur(16px);
      border:1px solid rgba(148,163,184,0.25);
      transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    body.dark .calculator{
      background:linear-gradient(150deg, #020617, #020617);
      border-color:rgba(30,64,175,0.5);
    }

    .calc-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:10px;
    }
    .title-group{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .title{
      font-size:18px;
      font-weight:700;
      letter-spacing:.02em;
    }
    .subtitle{
      font-size:12px;
      color:var(--muted);
    }

    .theme-toggle{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      color:var(--muted);
      cursor:pointer;
      user-select:none;
    }
    .switch{
      width:36px;
      height:20px;
      border-radius:999px;
      background:var(--btn);
      border:1px solid rgba(148,163,184,0.7);
      position:relative;
      padding:1px;
      transition:background .2s ease, border-color .2s ease;
    }
    .switch-thumb{
      position:absolute;
      width:16px;
      height:16px;
      border-radius:999px;
      background:#ffffff;
      top:1px;
      left:1px;
      box-shadow:0 2px 6px rgba(15,23,42,0.4);
      transition:transform .2s ease;
    }
    body.dark .switch{
      background:#1f2937;
      border-color:#4b5563;
    }
    body.dark .switch-thumb{
      transform:translateX(16px);
    }

    .display {
      background: radial-gradient(circle at top left, rgba(79,70,229,0.22), rgba(79,70,229,0.02));
      border-radius:14px;
      padding:12px 14px;
      margin-bottom:8px;
      min-height:80px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:6px;
      border:1px solid rgba(148,163,184,0.4);
    }
    body.dark .display{
      background:radial-gradient(circle at top left, rgba(79,70,229,0.35), rgba(15,23,42,0.95));
    }

    .info-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size:12px;
      color:var(--muted);
    }
    .memory-indicator{
      font-weight:600;
      letter-spacing:.08em;
      text-transform:uppercase;
      opacity:0;
      transition:opacity .15s ease;
    }
    .memory-indicator.active{
      opacity:1;
    }
    .history-toggle{
      cursor:pointer;
      border-radius:999px;
      padding:2px 8px;
      background:rgba(148,163,184,0.15);
      border:1px solid transparent;
      display:flex;
      align-items:center;
      gap:4px;
      user-select:none;
    }
    .history-toggle span.icon{
      font-size:11px;
      transform:translateY(1px);
    }
    .history-toggle:hover{
      border-color:rgba(148,163,184,0.6);
    }

    .prev {
      color:var(--muted);
      font-size:14px;
      text-align:right;
      word-break:break-all;
      min-height:18px;
    }
    .curr {
      font-size:30px;
      font-weight:600;
      text-align:right;
      word-break:break-all;
    }

    .history-panel{
      margin-bottom:10px;
      max-height:0;
      overflow:hidden;
      transition:max-height .22s ease;
    }
    .history-panel.open{
      max-height:140px;
    }
    .history-list{
      list-style:none;
      margin:0;
      padding:6px 2px 0 2px;
      font-size:13px;
      color:var(--muted);
      border-top:1px dashed rgba(148,163,184,0.6);
    }
    .history-item{
      display:flex;
      justify-content:space-between;
      gap:6px;
      padding:4px 4px;
      border-radius:8px;
      cursor:pointer;
    }
    .history-item:hover{
      background:rgba(148,163,184,0.18);
    }
    .history-expr{
      flex:1;
      text-align:left;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .history-res{
      font-weight:600;
      text-align:right;
      min-width:60px;
    }

    .memory-row{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:8px;
      margin-bottom:8px;
    }

    .keys {
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:10px;
    }
    button {
      padding:14px;
      font-size:18px;
      border-radius:10px;
      border:0;
      background:var(--btn);
      cursor:pointer;
      box-shadow: var(--shadow-btn);
      transition:transform .08s ease, box-shadow .08s ease, background .12s ease, color .12s ease;
      user-select:none;
    }
    button:active{
      transform:translateY(1px) scale(.99);
      box-shadow: 0 1px 4px rgba(15,23,42,0.2);
    }
    button:focus-visible{
      outline:2px solid var(--accent);
      outline-offset:2px;
    }

    .op { background:var(--btn-accent); color:var(--accent); font-weight:600; }
    .wide { grid-column: span 2; }
    .equal { background:var(--accent); color:white; box-shadow: 0 8px 18px rgba(79,70,229,0.35); }
    .danger { background:var(--danger); color:white; }
    .small { padding:10px; font-size:15px; }
    .mem { font-size:14px; }

    body.dark button{
      box-shadow:0 4px 16px rgba(15,23,42,0.8);
    }

    .kbd-hint {
      margin-top:10px;
      font-size:12px;
      color:var(--muted);
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
    }
    .kbd {
      background:rgba(15,23,42,0.03);
      border:1px solid #e5e7eb;
      padding:4px 7px;
      border-radius:6px;
      font-weight:600;
      font-size:11px;
      box-shadow: 0 2px 6px rgba(2,6,23,0.04);
    }
    body.dark .kbd{
      background:#020617;
      border-color:#4b5563;
      box-shadow:none;
    }

    @media (max-width:420px){
      .calculator{ padding:12px; border-radius:16px; }
      .display{ min-height:68px; padding:10px; }
      .curr{ font-size:26px; }
      button{ padding:12px; font-size:16px; }
    }