*{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color:var(--text);
      background: radial-gradient(1200px 800px at 10% -10%, rgba(45,127,249,.15), transparent 60%),
                  radial-gradient(800px 600px at 90% -20%, rgba(45,127,249,.08), transparent 60%),
                  var(--bg);
    }

    /* Header */
    header.appbar{
      position:sticky; top:0; z-index:50;
      background: linear-gradient(180deg, rgba(19,23,34,.9), rgba(19,23,34,.75));
      backdrop-filter: blur(8px);
      border-bottom:1px solid var(--border);
    }
    .wrap{
      max-width:1100px; margin:0 auto; padding:0 16px;
      display:flex; align-items:center; gap:16px; height:64px;
    }

    /* Burger */
    .burger{
      display:inline-flex; align-items:center; justify-content:center;
      width:40px; height:40px;
      border-radius:10px; border:1px solid var(--border);
      background:linear-gradient(180deg, var(--panel), var(--panel-2));
      color:var(--text); cursor:pointer;
      transition: border-color .2s, background .2s, transform .06s ease-in-out;
    }
    .burger:active{ transform: scale(.98) }
    .burger:hover{ border-color:#2b3346 }
    .burger svg{ width:22px; height:22px }

    .brand{
      font-weight:700; letter-spacing:.2px;
      color:var(--text);
    }
    .brand small{ color:var(--muted); font-weight:500 }

    /* Right actions */
    .spacer{ flex:1 }
    nav.actions{
      display:flex; align-items:center; gap:16px;
    }
    .link{
      color:var(--muted); text-decoration:none; font-weight:600;
      padding:8px 10px; border-radius:8px;
      transition: color .2s, background .2s;
    }
    .link:hover{ color:var(--text); background:rgba(45,127,249,.08) }

    .primary{
      border:1px solid var(--blue);
      background: linear-gradient(180deg, var(--blue), var(--blue-2));
      color:white; padding:10px 14px; border-radius:10px; font-weight:700;
      box-shadow: 0 6px 18px rgba(45,127,249,.35);
      transition: filter .15s, transform .06s;
      cursor:pointer;
      margin-left: 10px;
    }
    .primary:active{ transform: translateY(1px) }
    .primary:hover{ filter: brightness(1.03) }

    /* Sidebar (drawer) */
    .backdrop{
      position:fixed; inset:0; background: rgba(0,0,0,.45);
      opacity:0; pointer-events:none; transition: opacity .25s ease;
      z-index:40;
    }
    .backdrop.show{ opacity:1; pointer-events:auto }

    aside.sidebar{
      position:fixed; left:0; top:0; height:100vh; width:280px;
      background: linear-gradient(180deg, var(--panel-2), var(--panel));
      border-right:1px solid var(--border);
      box-shadow: var(--shadow);
      transform: translateX(-100%);
      transition: transform .28s cubic-bezier(.22,.61,.36,1);
      z-index:9999;
      display:flex; flex-direction:column;
    }
    aside.sidebar.open{ transform: translateX(0) }

    .side-header{
      height:65px; display:flex; align-items:center; gap:10px; padding:0 16px;
      border-bottom:1px solid var(--border);
    }
    .pill{
      font-size:12px; color:#b9c3d3; background:#101623; border:1px solid #1d2740;
      padding:2px 8px; border-radius:999px;
    }

    .menu{
      padding:12px; overflow:auto;
    }
    .section{
      border:1px solid var(--border);
      background: #0f1420;
      border-radius:12px;
      margin-bottom:12px;
      overflow:hidden;
      width: 100%;
      box-sizing: border-box;
    }
    .section > button.toggle{
      all:unset;
      display:flex;
      align-items:center;
      justify-content:space-between;
      width:100%;
      max-width: 100%;
      box-sizing: border-box;
      padding:12px 12px;
      cursor:pointer;
      background: linear-gradient(180deg,#121827,#0e1422);
      color:var(--text);
      font-weight:700;
      border-bottom:1px solid rgba(255,255,255,.04);
      overflow: hidden;
    }
    .section > button.toggle:hover{
      background: linear-gradient(180deg,#172033,#101828);
    }
    .label{
      display:flex; align-items:center; gap:8px;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background: radial-gradient(50% 50% at 50% 50%, #52a0ff 0%, #2d7ff9 60%, #114aa6 100%);
      box-shadow: 0 0 10px rgba(45,127,249,.6);
    }
    .chev{ transition: transform .2s }
    .toggle[aria-expanded="true"] .chev{ transform: rotate(90deg) }

    ul.submenu{
      list-style:none; margin:0; padding:0; overflow:hidden;
      max-height:0; transition:max-height .25s ease;
      background: #0b101a;
    }
    ul.submenu.open{ max-height:320px }
    ul.submenu li a{
      display:flex; align-items:center; gap:10px;
      padding:10px 14px; color:var(--muted); text-decoration:none; font-weight:600;
      border-left:3px solid transparent;
      transition: color .2s, background .2s, border-color .2s;
    }
    ul.submenu li a:hover{
      color:var(--text); background: rgba(45,127,249,.08); border-color: var(--blue);
    }

    /* Main content */
    main{
      max-width:1100px;
      margin:24px auto;
      padding:0 16px;
    }
    .card{
      background: linear-gradient(180deg, #0f1420, #0b1018);
      border:1px solid var(--border); border-radius: var(--radius);
      padding:18px; box-shadow: var(--shadow);
    }
    h1{ margin:0 0 8px; font-size:22px }
    p.lead{ margin:0; color:var(--muted) }

    @media (max-width:720px){
      nav.actions .hide-sm{ display:none }
    }