/* Page base */
body{
  margin:0;
  padding:18px;
  background:#0E0F21;
  font-family: Arial, sans-serif;
}
@media (max-width:520px){
  body{ padding:14px; }
}

@keyframes zspin { to { transform: rotate(360deg); } }
    .zgrid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    .zcard { border:1px solid #232831; border-radius:14px; padding:14px; background:#141823; box-shadow: 0 10px 20px rgba(0,0,0,0.25); }
    .ztitle { font-weight:800; margin-bottom:10px; color:#e9eef5; }
    .zlabel { display:block; font-size:13px; margin:10px 0 6px; color:#c9d2e3; }
    .zinput { width:100%; max-width: 340px; padding:10px 12px; font-size:16px; border:1px solid #2a3140; border-radius:12px; background:#0f1320; color:#e9eef5; outline:none; }
    .zinput:focus { border-color:#3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
    .zmuted { color:#9aa6bd; font-size:12px; margin-top:6px; }
    .zrow { display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }

    /* Neon purple buttons */
    .zbtn{
      padding:10px 14px; font-size:16px; border-radius:12px; cursor:pointer;
      border:1px solid rgba(168,85,247,0.75);
      background: linear-gradient(180deg, rgba(88,28,135,0.35), rgba(15,19,32,0.90));
      color:#d8b4fe;
      box-shadow:
        0 0 0 1px rgba(168,85,247,0.15),
        0 0 18px rgba(168,85,247,0.18),
        0 10px 22px rgba(0,0,0,0.35);
      transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }
    .zbtn:hover{
      border-color:#6348FF;
      background:#6348FF;
      color:#ffffff;
      box-shadow:
        0 0 0 1px rgba(217,70,239,0.18),
        0 0 26px rgba(217,70,239,0.28),
        0 12px 26px rgba(0,0,0,0.40);
      transform: translateY(-1px);
    }
    .zbtn:active{
      transform: translateY(0px);
      box-shadow:
        0 0 0 1px rgba(217,70,239,0.14),
        0 0 18px rgba(217,70,239,0.22),
        0 8px 18px rgba(0,0,0,0.35);
    }
    .zbtnTop{ padding:8px 12px; font-size:14px; }
    .zbtnDisabled { opacity:0.55; cursor:not-allowed; filter:saturate(0.7); }
    .zerr { color:#ff6b6b; font-size:13px; }

    .kpiGrid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
    .kpi { border:1px solid #232831; border-radius:14px; padding:12px; background:#101522; }
    .kpiLabel { color:#9aa6bd; font-size:12px; margin-bottom:6px; }
    .kpiVal { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:14px; color:#e9eef5; }
    .kpiGreen { color:#00e676; font-weight:900; font-size:16px; }
    .kpiHighlight { border-color:#1f3b2f; background:#0f1c16; box-shadow: 0 0 0 1px rgba(0,230,118,0.15), 0 0 16px rgba(0,230,118,0.12); }

    @media (max-width: 980px) { #topGrid { grid-template-columns: 1fr; } }
    @media (max-width: 900px) { .zgrid { grid-template-columns: 1fr; } }
  
    .zbtn:disabled{ opacity:0.55; cursor:not-allowed; filter:saturate(0.8); }

    @media (max-width: 860px){ .zgrid { grid-template-columns: 1fr; } }
    @media (max-width: 520px){ .zcard{ padding:12px; } .zinput{ font-size:15px; } .zbtn{ font-size:15px; } }

    .infoIcon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:16px;
      height:16px;
      margin-left:6px;
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      line-height:1;
      color:#cdd6f4;
      background:rgba(255,255,255,0.08);
      border:1px solid #2b3140;
      position:relative;
      cursor:help;
      user-select:none;
      vertical-align:middle;
    }
    .infoIcon:hover::after{
      content: attr(data-tip);
      position:absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      min-width: 220px;
      max-width: 340px;
      padding:10px 10px;
      border-radius:12px;
      background:#0e1220;
      border:1px solid #2b3140;
      box-shadow: 0 14px 34px rgba(0,0,0,0.45);
      color:#e9eef5;
      font-weight:600;
      font-size:12px;
      line-height:1.35;
      z-index:999;
      white-space: normal;
      pointer-events:none;
    }
    .infoIcon:hover::before{
      content:"";
      position:absolute;
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%);
      border:6px solid transparent;
      border-top-color:#2b3140;
    }
    @media (max-width: 520px){
      .infoIcon:hover::after{
        left: 0;
        transform: none;
        max-width: 92vw;
      }
      .infoIcon:hover::before{
        left: 10px;
        transform:none;
      }
    }