:root{
      --bg: #f6f8fc;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#475569;
      --line: rgba(2,6,23,.12);
      --shadow: 0 14px 50px rgba(2,6,23,.10);
      --primary:#2563eb;
      --primary2:#06b6d4;
      --ring: rgba(37,99,235,.25);
      --radius: 18px;
      --glass: rgba(255,255,255,.75);
      --glass2: rgba(255,255,255,.55);
    }
    [data-theme="dark"]{
      --bg:#070b18;
      --card:#0b1226;
      --text:#e5e7eb;
      --muted:#aab3c2;
      --line: rgba(148,163,184,.18);
      --shadow: 0 18px 70px rgba(0,0,0,.45);
      --primary:#60a5fa;
      --primary2:#22d3ee;
      --ring: rgba(96,165,250,.22);
      --glass: rgba(11,18,38,.68);
      --glass2: rgba(11,18,38,.48);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      background:
        radial-gradient(900px 380px at 15% 0%, rgba(37,99,235,.14), transparent 60%),
        radial-gradient(900px 420px at 90% 10%, rgba(6,182,212,.16), transparent 55%),
        var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    /* Header / Topbar */
    .topbar{
      
      position: sticky;
      top: 0;
      z-index: 999;
      backdrop-filter: blur(12px);
      background: linear-gradient(180deg, var(--glass), var(--glass2));
      border-bottom: 1px solid var(--line);
    }
    .wrap{
      max-width: 1780px;
      margin: 0 auto;
      padding: 0 16px;
      text-align: center;
    }
    .topbar-inner{
      height: 68px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 220px;
    }
    .brand img{
      width: 52px;
      height: 52px;
      border-radius: 12px;
      object-fit: contain;
      background: rgba(255,255,255,.35);
      padding: 6px;
      border: 1px solid var(--line);
      box-shadow: 0 10px 25px rgba(0,0,0,.08);
    }
    [data-theme="dark"] .brand img{ background: rgba(255,255,255,.06); }

    .brand-title{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }
    .brand-title strong{
      font-size: 14px;
      letter-spacing:.2px;
    }
    .brand-title span{
      font-size: 12px;
      color: var(--muted);
    }

    nav{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .navlink{
      position: relative;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      text-decoration:none;
      color: var(--text);
      font-size: 14px;
      border: 1px solid transparent;
      transition: transform .15s ease, background .2s ease, border-color .2s ease;
      user-select:none;
      white-space:nowrap;
    }
    .navlink:hover{
      background: rgba(37,99,235,.08);
      border-color: rgba(37,99,235,.18);
      transform: translateY(-1px);
    }
    [data-theme="dark"] .navlink:hover{
      background: rgba(96,165,250,.10);
      border-color: rgba(96,165,250,.22);
    }
    .navlink::after{
      content:"";
      position:absolute;
      left: 12px;
      right: 12px;
      bottom: 7px;
      height: 2px;
      border-radius:999px;
      background: linear-gradient(90deg, var(--primary), var(--primary2));
      transform: scaleX(0);
      transform-origin:left;
      transition: transform .2s ease;
      opacity:.9;
    }
    .navlink:hover::after{ transform: scaleX(1); }
    .navlink.active{
      background: rgba(37,99,235,.10);
      border-color: rgba(37,99,235,.22);
    }
    .navlink.active::after{ transform: scaleX(1); }

    .controls{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 220px;
      justify-content:flex-end;
    }
    .btn1{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      height: 40px;
      padding: 0 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.55);
      color: var(--text);
      cursor:pointer;
      transition: transform .15s ease, background .2s ease, border-color .2s ease;
      user-select:none;
    }
    [data-theme="dark"] .btn1{ background: rgba(255,255,255,.06); }
    .btn1:hover{
      transform: translateY(-1px);
      border-color: rgba(37,99,235,.28);
      box-shadow: 0 0 0 6px var(--ring);
    }
    .select{
      height: 40px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.55);
      color: var(--text);
      padding: 0 10px;
      outline:none;
      cursor:pointer;
    }
    [data-theme="dark"] .select{ background: rgba(255,255,255,.06); }

    /* Mobile */
    .hamburger{
      display:none;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.55);
      cursor:pointer;
      align-items:center;
      justify-content:center;
      transition: transform .15s ease, background .2s ease;
    }
    [data-theme="dark"] .hamburger{ background: rgba(255,255,255,.06); }
    .hamburger:hover{ transform: translateY(-1px); }

    .hamburger span{
      width: 18px;
      height: 2px;
      background: var(--text);
      position: relative;
      border-radius: 99px;
    }
    .hamburger span::before,
    .hamburger span::after{
      content:"";
      position:absolute;
      left:0;
      width: 18px;
      height: 2px;
      background: var(--text);
      border-radius: 99px;
      transition: transform .2s ease, top .2s ease, opacity .2s ease;
    }
    .hamburger span::before{ top:-6px; }
    .hamburger span::after{ top:6px; }

    .mobile-panel{
      display:none;
      padding: 10px 16px 16px;
      border-top: 1px solid var(--line);
      animation: drop .18s ease both;
    }
    @keyframes drop{
      from{ opacity:0; transform: translateY(-8px); }
      to{ opacity:1; transform: translateY(0); }
    }
    .mobile-panel .navcol{
      display:flex;
      flex-direction:column;
      gap: 8px;
      padding: 10px 0;
    }
    .mobile-panel .controls{
      justify-content:flex-start;
      min-width:auto;
      flex-wrap:wrap;
    }

    @media (max-width: 980px){
      nav{ display:none; }
      .hamburger{ display:inline-flex; }
      .brand{ min-width:auto; }
      .controls{ min-width:auto; }
    }

    /* Content */
    main{ padding: 26px 0 40px; }
    
   

    /* Footer */
    footer{
      border-top: 1px solid var(--line);
      background: linear-gradient(180deg, transparent, rgba(2,6,23,.03));
    }
    [data-theme="dark"] footer{
      background: linear-gradient(180deg, transparent, rgba(255,255,255,.03));
    }
    .foot{
      padding: 18px 0 26px;
      display:grid;
      gap: 14px;
      grid-template-columns: 1.3fr 1fr 1fr;
    }
    .foot h4{ margin:0 0 8px; font-size: 14px; }
    .foot p, .foot a{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height:1.6;
      text-decoration:none;
    }
    .foot a:hover{ color: var(--text); }
    .copyright{
      padding: 10px 0 18px;
      color: var(--muted);
      font-size: 12px;
      border-top: 1px dashed var(--line);
    }
    @media (max-width: 980px){
      .foot{ grid-template-columns: 1fr; }
    }