:root{
      /* light, water-like minimal palette */
      --bg: #f6fbff;
      --card: #ffffff;
      --border: #e7f1fa;
      --text: #0f172a;
      --muted: #6b7a90;
      --primary: #2b8cff;
      --primary-weak: rgba(43,140,255,0.10);
      --danger: #dc2626;
      --shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
      --radius: 14px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    }

    *{ box-sizing:border-box; }

    .badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; line-height:18px; border:1px solid var(--border); background: var(--primary-weak); color: var(--primary); }
    .badge.ok{ background: rgba(34,197,94,0.10); color:#15803d; border-color: rgba(34,197,94,0.25); }
    .badge.bad{ background: rgba(220,38,38,0.10); color:#b91c1c; border-color: rgba(220,38,38,0.25); }

    body{
      margin:0;
      font-family: var(--sans);
      color: var(--text);
      background:
        radial-gradient(900px 560px at 12% 0%, rgba(43,140,255,0.08), transparent 60%),
        radial-gradient(900px 560px at 92% 10%, rgba(0,180,216,0.08), transparent 55%),
        radial-gradient(850px 520px at 50% 110%, rgba(43,140,255,0.05), transparent 60%),
        var(--bg);
      min-height: 100vh;
    }

    .container{ max-width: 1040px; margin: 0 auto; padding: 26px 18px 56px; }

    .topbar{
 display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 18px; }

    /* v2 topbar layout */
    body.v2Enabled .topbar{
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      align-items:center;
    }
    body.v2Enabled .topTitle{ text-align:center; }
    body.v2Enabled .topRight{ display:flex; justify-content:flex-end; }
    body.v2Enabled .topLeft{ display:block; }

    h1{ margin:0; font-size: 22px; font-weight: 850; letter-spacing: 0.2px; }
    .sub{ margin:6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 999px;
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      box-shadow: var(--shadow);
    }

    .grid{ display:grid; grid-template-columns: 1fr; gap: 14px; }

    .card{
      border: 1px solid var(--border);
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px 16px;
    }

    .card h2{ margin:0 0 12px; font-size:16px; }

    .row{ display:grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 780px){ .row.two{ grid-template-columns: 1fr 1fr; } }

    label{ display:block; font-size: 12px; color: var(--muted); margin: 0 0 6px; }

    input, select{
      width: 100%;
      height: 42px;
      padding: 10px 11px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--text);
      outline: none;
    }

    input:focus, select:focus{
      border-color: rgba(43,140,255,0.55);
      box-shadow: 0 0 0 4px var(--primary-weak);
    }

    .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; align-items:center; }

    button{
      appearance:none;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--text);
      height: 42px;
      padding: 9px 12px;
      border-radius: 12px;
      cursor:pointer;
      font-weight: 750;
    }

    button.primary{
      background: var(--primary);
      border-color: rgba(43,140,255,0.75);
      color: #fff;
    }

    button.danger{
      background: #fff;
      border-color: rgba(220,38,38,0.25);
      color: var(--danger);
    }

    button:hover{ filter: brightness(0.985); }

    .msg{ margin-top: 10px; font-size: 13px; color: var(--danger); }

    code{
      font-family: var(--mono);
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
      background: #f1f7ff;
      border: 1px solid var(--border);
    }

    .kv{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; color: var(--muted); font-size: 13px; }

    .badge{
      display:inline-flex;
      align-items:center;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: #f4f9ff;
      color: #0f172a;
      font-size: 12px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    table{ width:100%; border-collapse: collapse; }
    thead th{ text-align:left; padding: 10px 10px; font-size: 12px; color: #334155; background: #f7fbff; border-bottom: 1px solid var(--border); }
    tbody td{ padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; color: #0f172a; }
    tbody tr:nth-child(2n){ background: #fbfdff; }

    .tableWrap{ margin-top: 10px; overflow:auto; border: 1px solid var(--border); border-radius: 12px; }

    .footer{ margin-top: 22px; color: var(--muted); font-size: 12px; }

    /* aligned admin form */
    .formGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items:end;
    }
    @media (min-width: 980px){
      .formGrid{ grid-template-columns: 260px 260px 220px 140px; }
    }

    .hintRow{ grid-column: 1 / -1; margin-top: -6px; }
    .hint{ color: var(--muted); font-size: 12px; margin: 6px 0 0; }

    .inlineSmall{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
    .inlineSmall > div{ min-width: 260px; }

    

    /* v2 nav tabs */
    .tabs{ display:flex; justify-content:center; align-items:center; gap:12px; margin: 12px 0 16px; position:sticky; top:10px; z-index:60; padding:12px; background: rgba(246,251,255,0.88); backdrop-filter: blur(6px); border:1px solid var(--border); border-radius: 18px; }
    .tabsGroup{ display:flex; gap:14px; flex-wrap:nowrap; justify-content:space-between; width:100%; }
    .v2UserBox{ justify-self:end; display:flex; align-items:center; gap:10px; }
    .v2UserChip{ border:1px solid var(--border); background:#fff; border-radius: 14px; padding:10px 12px; line-height:1.1; }
    .v2UserName{ font-weight:700; font-size:13px; }
    .v2UserRole{ margin-top:4px; color: var(--muted); font-size:12px; }
    

    .tabBtn{ position:relative; overflow:hidden; }
    .tabBtn::before{
      content:'';
      position:absolute;
      left:10px; right:10px;
      top:7px;
      height:42%;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.0));
      border-radius: 999px;
      opacity:0.55;
      pointer-events:none;
      filter: blur(0.2px);
    }
    .tabBtn.active::before{ opacity:0.72; }
.tabBtn{
      appearance:none;
      border:1px solid var(--border);
      background:#fff;
      color: var(--text);
      padding:16px 18px;
      border-radius: 22px 22px 34px 34px; /* more droplet */
      cursor:pointer;
      font-size:16px;
      font-weight:700;
      line-height:1;
      height:52px;
      flex:1 1 0;
      min-width:0;
      box-shadow: 0 8px 20px rgba(15,23,42,0.08);
      transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
    }
    .tabBtnText{ display:block; width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .tabBtn:active.tabBtn:active{ transform: translateY(1px) scale(0.99); }
    .tabBtn:hover{ box-shadow: 0 10px 22px rgba(15,23,42,0.08); }
    .tabBtn.active{ background: linear-gradient(180deg, rgba(43,140,255,0.22), rgba(43,140,255,0.08)); border-color: rgba(43,140,255,0.55); color: var(--primary); font-weight:800; box-shadow: 0 14px 30px rgba(43,140,255,0.22); }
    .view{ display:none; }
    .view.active{ display:block; }

    /* v2 dashboard */

    /* v2 alignment tweaks */

    /* v2 font scale (do NOT affect query tables) */
    body.v2Enabled #v2Shell label{ font-size:14px; }
    body.v2Enabled #v2Shell .sub{ font-size:15px; }
    body.v2Enabled #v2Shell .hint{ font-size:14px; }
    body.v2Enabled #v2Shell input, body.v2Enabled #v2Shell select, body.v2Enabled #v2Shell textarea{ font-size:15px; }
    body.v2Enabled #v2Shell button{ font-size:15px; }
    body.v2Enabled #v2Shell .kpiLabel{ font-size:14px; }
    body.v2Enabled #v2Shell .kpiHint{ font-size:13px; }
    body.v2Enabled #v2Shell .v2UserName{ font-size:14px; }
    body.v2Enabled #v2Shell .v2UserRole{ font-size:13px; }

    #v2Shell .tabsGroup{ justify-content:space-between; width:100%; }
    #v2Shell .actions{ justify-content:center; }
    #v2Shell h2{ text-align:center; }
    #v2Shell .hint{ text-align:center; }
    #v2Shell .kpiHead{ justify-content:center; }
    #v2Shell .kpiTitle{ text-align:center; }
    #v2Shell .kpiBody{ justify-items:stretch; }

    .kpiGrid{ display:grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 900px){ .kpiGrid{ grid-template-columns: 1fr 1fr; } }
    .kpiCard{ position:relative; overflow:hidden; }
    .kpiCard::after{ content:''; position:absolute; inset:-40% -30% auto auto; width:220px; height:220px; background: radial-gradient(circle at 30% 30%, rgba(43,140,255,0.18), transparent 60%); transform: rotate(8deg); }
    .kpiHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
    .kpiTitle{ font-weight:700; letter-spacing:0.2px; }
    .kpiBadge{ font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; }
    .kpiBadge.ok{ background: rgba(34,197,94,0.10); color:#15803d; border-color: rgba(34,197,94,0.25); }
    .kpiBadge.warn{ background: rgba(245,158,11,0.12); color:#b45309; border-color: rgba(245,158,11,0.25); }
    .kpiBadge.bad{ background: rgba(220,38,38,0.10); color:#b91c1c; border-color: rgba(220,38,38,0.25); }

    .kpiBody{ margin-top:10px; display:grid; grid-template-columns: 1fr; gap: 10px; position:relative; z-index:1; }
    @media (min-width: 520px){ .kpiBody{ grid-template-columns: 1fr 1fr; } }
    .kpiItem{ padding:10px 12px; border:1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,0.75); }
    .kpiLabel{ color: var(--muted); font-size:12px; }
    .kpiValue{ margin-top:4px; font-family: var(--mono); font-size: 16px; font-weight:700; }
    .kpiHint{ margin-top:4px; color: var(--muted); font-size:12px; }


    /* custom suggest dropdown (mobile-friendly; datalist is unreliable in some in-app browsers) */
    .suggestWrap{ position: relative; }
    .suggestBox{
      position:absolute;
      top: calc(100% + 6px);
      left:0;
      right:auto;
      width:100%;
      max-width: 520px;
      z-index: 50;
      background:#fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow);
      max-height: 320px;
      overflow:auto;
      display:none;
    }
    .suggestItem{
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      cursor:pointer;
      font-size: 13px;
      color: var(--text);
    }
    .suggestItem:last-child{ border-bottom:none; }
    .suggestItem:hover{ background: #f6fbff; }
    .suggestMuted{ color: var(--muted); font-size: 12px; }
  


    @media (max-width: 420px){
      .tabsGroup{ flex-wrap:wrap; }
      .tabBtn{ flex: 1 1 calc(50% - 7px); }
    }


    /* table UX */
    .tableWrap{ overflow:auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
    .tableWrap table{ border-collapse: separate; border-spacing:0; width:max-content; min-width:100%; }
    .tableWrap thead th{ position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); }
    .tableWrap th, .tableWrap td{ white-space: nowrap; }
    .tableWrap tbody tr:nth-child(even){ background: rgba(15,23,42,0.02); }