:root{
      --bg: #f6f7fb;
      --panel: #ffffff;
      --panel-2:#fbfbfe;
      --border:#e6e8f0;
      --text:#0f172a;
      --muted:#5b647a;
      --muted-2:#7b859e;
      --brand:#635bff;
      --brand-2:#4f46e5;
      --good:#16a34a;
      --warn:#f59e0b;
      --bad:#ef4444;

      --shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
      --shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);

      --radius-xl: 18px;
      --radius-lg: 14px;
      --radius-md: 12px;
      --radius-sm: 10px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    .primary-color {
        background-color: #16a34a;
        color:white;
    }

    .secondary-color {
        background: rgba(99, 91, 255, .10);
        color: var(--brand);
    }

    /* Dark mode */
    html[data-theme="dark"]{
      --bg:#0b1020;
      --panel:#0f172a;
      --panel-2:#0c1327;
      --border:#1f2a44;
      --text:#e7ecff;
      --muted:#aab3d6;
      --muted-2:#8f9ac2;
      --shadow: 0 18px 45px rgba(0,0,0,.35);
      --shadow-sm: 0 12px 28px rgba(0,0,0,.28);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background: radial-gradient(1200px 800px at 10% -20%, rgba(99,91,255,.14), transparent 60%),
                  radial-gradient(1000px 700px at 90% 0%, rgba(79,70,229,.10), transparent 55%),
                  var(--bg);
    }

    /* Layout */
    .app{
      display:grid;
      grid-template-columns: 260px 1fr;
      min-height:100vh;
    }


    .main{
      padding:22px 22px 36px;
    }


    .pill{
      font-size:11px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      color:var(--muted);
      background: rgba(255,255,255,.5);
    }
    html[data-theme="dark"] .pill{ background: rgba(255,255,255,.04); }



    
    /* Content grid */
    .grid{
      display:grid;
      grid-template-columns: 1.5fr 1.5fr;
      gap:16px;
      margin-top:14px;
      height:80%;
      width:100%;
    }


    @media (max-width: 1050px){
      .app{ grid-template-columns: 84px 1fr; }
      .brand h1, .brand small, .nav span.label, .help-card{ display:none; }
      .brand{ justify-content:center; }
      .nav a{ justify-content:center; }
      .sidebar{ padding:16px 10px; }
      .sidebar-footer{ left:10px; right:10px; }
      .grid{ grid-template-columns: 1fr; }
      .search{ min-width: 220px; }
    }



    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }
    .muted{ color: var(--muted); }
    .right{ text-align:right; }


  

    .view{
      display:none;
      height:100%;
      width:95%;
      
    }

    label {
      font-size: 19px;
      font-weight: bold;
      padding-left: 20px;
      display: block;
    }