.calc {
      position: fixed;
      left: 20px;
      top: 20px;
      width: 320px;

      background: #0b1220;
      color: #e5e7eb;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow: hidden;
      user-select: none;
      z-index: 9999;
      touch-action: none;
    }

    .bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      cursor: grab;
      background: rgba(255,255,255,.03);
      user-select: none;
    }
    .bar:active { cursor: grabbing; }

    .dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(59,130,246,.9);
      box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }
    .title {
      font-weight: 700;
      font-size: 13px;
      opacity: .95;
      white-space: nowrap;
    }
    .hintTiny {
      margin-left: auto;
      font-size: 12px;
      opacity: .7;
      white-space: nowrap;
    }

    .expr {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      color: #e5e7eb;
      font-size: 14px;
      line-height: 1.2;
      padding: 10px 12px 6px;
      box-sizing: border-box;
    }

    .out {
      padding: 0 12px 8px;
      font-size: 22px;
      font-weight: 800;
      text-align: right;
      color: #fff;
      min-height: 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 12px;
      box-sizing: border-box;
    }

    .btn {
      padding: 10px 0;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      color: #e5e7eb;
      border-radius: 10px;
      text-align: center;
      cursor: pointer;
      transition: transform .05s ease, background .15s ease;
      font-weight: 700;
      user-select: none;
    }
    .btn:active { transform: translateY(1px); }
    .btn.op { background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.35); }
    .btn.eq { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.45); }
    .btn.danger { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.45); }
    .btn.mute { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }

    .foot {
      padding: 0 12px 12px;
      box-sizing: border-box;
      display: flex;
      gap: 8px;
    }
    .chip {
      flex: 1;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
      cursor: pointer;
      text-align: center;
      font-weight: 700;
      opacity: .95;
      user-select: none;
    }
    .chip:active { transform: translateY(1px); }
	
	#collapseCalc{
  transform: scale(0.6);
  transform-origin: center;
  background: rgba(255,255,255,.07);
  color: #bbb;
}