:root{
      --accent: #2563eb; /* blue-600 */
      --muted: #6b7280;
      --bg: #f8fafc;
      --card: #ffffff;
      --radius: 12px;
    }

    *{box-sizing: border-box}
    body{font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:#111}
    
.card {
    background: #1a2a54;
    border-radius: 15px;
    border: 2px solid #1a2a54;
    padding: 20px;
}
    /* Tab list */
    .tabs{display:flex;gap:20px;align-items:stretch}
    .tab-btn {
    appearance: none;
    border: 1px solid #eff2f7;
    background: #eff2f7;
    padding: 10px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    transition: all .18s 
ease;
font-family: "Public Sans", sans-serif;
    color: #1b2953;
}
    .tab-btn:hover{transform:translateY(-2px)}
   .tab-btn[aria-selected="true"] {
    background: #0071db;
    border-color: rgba(37, 99, 235, 0.12);
    color: #fff;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.06);
}

    /* Make tabs scrollable on very small screens */
    .tab-wrap{overflow-x:auto;padding-bottom:8px}
    .tab-wrap::-webkit-scrollbar{height:8px}
    .tab-wrap::-webkit-scrollbar-thumb{background:#ddd;border-radius:10px}

    /* Panels */
    .panels{margin-top:18px}
    .panel {
    display: none;
    padding: 18px;
    border-radius: 10px;
    border: 0px;
    background: transparent;
}
    .panel.active{display:block}

    /* Responsive: stack tabs vertically on small screens */
    @media (max-width:640px){
      .tabs{flex-direction:column}
      .tab-btn{flex:none}
    }

    /* Simple utilities */
    h1{font-size:20px;margin:0 0 12px}
    p{margin:0 0 10px;color:#334155}