:root{
    --bg1:#2D47A2;
    --bg2:#00FFFF;
  }
  
  * { box-sizing: border-box; }
  
  body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1220; /* fallback */
    overflow-x: hidden;
  }
  
  /* === Animated floating gradient background ===
     Base direction: 131.73deg as requested
  */
  .bg-animated{
    position: fixed;
    inset: -30%;
    z-index: -1;
    background: linear-gradient(131.73deg, var(--bg1) -59.36%, var(--bg2) 114.64%);
    background-size: 240% 240%;
    filter: saturate(1.15) contrast(1.05);
    animation: gradientFloat 14s ease-in-out infinite;
    transform: translate3d(0,0,0);
  }
  
  /* a subtle "glow" / depth */
  .bg-animated::after{
    content:"";
    position:absolute;
    inset: 0;
    background:
      radial-gradient(60% 60% at 20% 20%, rgba(255,255,255,.18), transparent 60%),
      radial-gradient(50% 50% at 80% 30%, rgba(255,255,255,.10), transparent 65%),
      radial-gradient(55% 55% at 60% 80%, rgba(0,0,0,.18), transparent 60%);
    mix-blend-mode: overlay;
    animation: blobDrift 18s ease-in-out infinite;
  }
  
  /* motion */
  @keyframes gradientFloat{
    0%   { background-position: 10% 30%; transform: scale(1.05) translate(-1.5%, -1%); }
    25%  { background-position: 70% 20%; transform: scale(1.08) translate(1.2%, -0.8%); }
    50%  { background-position: 90% 70%; transform: scale(1.06) translate(1.8%, 1.1%); }
    75%  { background-position: 30% 90%; transform: scale(1.09) translate(-1.2%, 1.6%); }
    100% { background-position: 10% 30%; transform: scale(1.05) translate(-1.5%, -1%); }
  }
  
  @keyframes blobDrift{
    0%   { transform: translate(-1%, -1%) scale(1.02); opacity:.85; }
    50%  { transform: translate(1.5%, 1.2%) scale(1.06); opacity:.95; }
    100% { transform: translate(-1%, -1%) scale(1.02); opacity:.85; }
  }
  
  /* Reduce motion if user prefers */
  @media (prefers-reduced-motion: reduce){
    .bg-animated, .bg-animated::after { animation: none; }
  }
  
  .card{
    background: rgba(255,255,255,.92);
    border-radius: 14px;
    padding: 28px;
    max-width: 980px;
    width: 100%;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    backdrop-filter: blur(6px);
  }
  
  h1 { margin: 0 0 6px 0; }
  .subtitle { color: #666; margin-bottom: 18px; font-size: 14px; }
  
  .row { display: flex; gap: 18px; flex-wrap: wrap; }
  .col { flex: 1; min-width: 280px; }
  
  .block{
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 16px;
    background: #fafbfc;
    margin-top: 14px;
  }
  
  label { display: block; font-size: 13px; color: #333; margin-bottom: 6px; }
  
  textarea, input, select{
    width: 100%;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
  }
  
  textarea { min-height: 130px; resize: vertical; }
  
  .btnbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
  
  button{
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
  }
  
  .primary { background: #0b5fff; color: #fff; }
  .secondary { background: #eaeef2; color: #111; }
  .danger { background: #ffe3e3; color: #8a1f1f; }
  button:disabled { opacity: 0.6; cursor: not-allowed; }
  
  .msg { margin-top: 10px; font-size: 14px; display: none; white-space: pre-wrap; }
  .msg.ok { color: #2e7d32; }
  .msg.err { color: #b42318; }
  
  .tokenbox{
    display:none;
    margin-top: 10px;
    font-size: 12px;
    background: #fff;
    border: 1px dashed #c7ccd1;
    padding: 10px;
    border-radius: 10px;
    word-break: break-all;
  }
  
  table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
  }
  
  th, td{
    text-align: left;
    padding: 10px 10px;
    border-bottom: 1px solid #eef1f4;
    vertical-align: top;
    font-size: 13px;
  }
  
  th { background: #f3f6fa; font-size: 12px; color: #333; }
  tr:last-child td { border-bottom: 0; }
  
  .pill{
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid #d0d7de;
    background: #fff;
  }
  
  .mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  
  .muted { color: #667085; }
  .hidden { display: none !important; }
  
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }
  
  .spacer-10 { height: 10px; }
  .batch-comment { min-height: 96px; }
  
  .results-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
  }
  .results-count{ margin-left:8px; }
  .results-hint{ font-size:12px; }