:root{
    --navy-950:#0a1030;
    --navy-900:#0c1440;
    --navy-800:#101c56;
    --blue-600:#1f5fd6;
    --blue-500:#2f7bf0;
    --orange-600:#f07d1e;
    --orange-500:#ff9633;
    --violet-600:#5b3df0;
    --ink-900:#141033;
    --muted:#6b6785;
    --field-bd:#e6e5f2;
    --page-bg:#eef0fb;
  }

  *{box-sizing:border-box;}

  body{
    color:var(--ink-900);
    background:var(--page-bg);
  }

  .app-shell{
    display:flex;
    min-height:100vh;
  }

  /* ===================== SIDEBAR ===================== */
  .sidebar{
    width:300px;
    flex-shrink:0;
    background:linear-gradient(180deg, #0c1440 0%, #0a1030 60%, #0a1030 100%);
    color:#fff;
    padding:1.8rem 1.4rem 2.5rem;
    overflow-y:auto;
    position:sticky;
    top:0;
    height:100vh;
    transition:transform .3s ease;
  }

  .current-issue-label{
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1px;
    color:#e9e8f7;
    text-align:center;
    margin-bottom:1rem;
  }

  .issue-cover{
    width:100%;
    max-width:190px;
    aspect-ratio:3/4;
    margin:0 auto 1rem;
    border-radius:6px;
    padding:14px 12px;
    background:
      radial-gradient(circle at 70% 70%, rgba(63,150,232,.55), transparent 55%),
      linear-gradient(160deg, #0e1a4d, #142868 70%);
    border:1px solid rgba(255,255,255,.15);
    position:relative;
    box-shadow:0 15px 30px -12px rgba(0,0,0,.6);
    overflow:hidden;
  }
  .issue-cover:before{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,.4) 50%, transparent 51%),
      radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.35) 50%, transparent 51%),
      radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,.3) 50%, transparent 51%);
  }
  .issue-cover .badge-dot{
    position:absolute; top:8px; right:8px;
    width:16px; height:16px; border-radius:50%;
    background:#3fd0e8;
    display:flex; align-items:center; justify-content:center;
    font-size:.55rem; color:#0a1030; font-weight:800;
  }
  .issue-cover .cover-brand{
    font-weight:800; font-size:.85rem; position:relative; z-index:2;
  }
  .issue-cover .cover-brand .j{ color:#ff9633; }
  .issue-cover .cover-title{
    font-weight:700; font-size:.82rem; line-height:1.25;
    margin-top:.5rem; position:relative; z-index:2;
  }
  .issue-cover .cover-sub{
    font-size:.5rem; color:#b9c3ec; margin-top:.3rem; position:relative; z-index:2;
  }

  .issue-volume{
    text-align:center;
    color:#ffb154;
    font-weight:700;
    font-size:.95rem;
    margin-bottom:2px;
  }
  .issue-date{
    text-align:center;
    color:#c7c4e8;
    font-size:.8rem;
    margin-bottom:1.2rem;
  }

  .sidebar hr{ border-color:rgba(255,255,255,.12); margin:0 0 .3rem; }

  .nav-collapse-list{ padding:0; margin:0; list-style:none; }
  .nav-collapse-list > li{ border-bottom:1px solid rgba(255,255,255,.08); }

  .nav-link-item{
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem .2rem;
    color:#e9e8f7;
    text-decoration:none;
    font-size:.92rem;
    font-weight:500;
    cursor:pointer;
  }
  .nav-link-item:hover{ color:#ff9633; }
  .nav-link-item .nav-left{ display:flex; align-items:center; gap:.7rem; }
  .nav-link-item i.chev{
    font-size:.75rem;
    transition:transform .25s ease;
    color:#b9c3ec;
  }
  .nav-link-item[aria-expanded="true"] i.chev{ transform:rotate(180deg); }

  .nav-sub-panel{
    padding:0 .2rem .7rem 2.3rem;
  }
  .nav-sub-panel a{
    display:block;
    color:#c7c4e8;
    text-decoration:none;
    font-size:.85rem;
    padding:.35rem 0;
  }
  .nav-sub-panel a:hover{ color:#fff; }

  .sidebar-cta{
    display:flex; align-items:center; justify-content:center; gap:.6rem;
    width:100%;
    border:none;
    border-radius:10px;
    padding:.8rem;
    font-weight:700;
    font-size:.88rem;
    margin-top:1rem;
    text-decoration:none;
  }
  .cta-submit{
    background:linear-gradient(90deg, var(--blue-600), var(--violet-600));
    color:#fff;
  }
  .cta-submit:hover{ color:#fff; filter:brightness(1.08); }
  .cta-track{
    background:linear-gradient(90deg, var(--orange-600), var(--orange-500));
    color:#fff;
  }
  .cta-track:hover{ color:#fff; filter:brightness(1.08); }

  .sidebar-flat-link{
    display:flex; align-items:center; gap:.7rem;
    padding:.8rem .2rem;
    color:#e9e8f7; text-decoration:none;
    font-size:.9rem; font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .sidebar-flat-link:hover{ color:#ff9633; }

  .sidebar-pill-link{
    display:flex; align-items:center; gap:.7rem;
    padding:.7rem .9rem;
    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
    color:#e9e8f7; text-decoration:none;
    font-size:.85rem; font-weight:500;
    margin-top:.7rem;
  }
  .sidebar-pill-link:hover{ background:rgba(255,255,255,.06); color:#fff; }

  /* ===================== MAIN CONTENT ===================== */
  .main-content{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
  }

  .topbar{
    background:#fff;
    padding:1rem 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 2px 10px rgba(20,16,51,.05);
    position:sticky;
    top:0;
    z-index:20;
  }

   .topbar-logo{
    font-weight:800;
    font-size:1.7rem;
    letter-spacing:.5px;
  }
  .topbar-logo .j{ color:#ff9633; }
  .topbar-logo .m{ color:#1f5fd6; }
  .topbar-logo .s{ color:#141033; } 

  .hamburger-btn{
    display:none;
    border:none;
    background:none;
    font-size:1.3rem;
    color:var(--ink-900);
    margin-right:1rem;
  }

  /* .topbar-right{ display:flex; align-items:center; gap:1.3rem; }
  .icon-btn{
    position:relative;
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid var(--field-bd);
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-900);
    font-size:1.05rem;
    cursor:pointer;
  }
  .icon-btn .badge-count{
    position:absolute; top:-6px; right:-6px;
    background:var(--orange-500);
    color:#fff;
    font-size:.65rem;
    font-weight:700;
    min-width:18px; height:18px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
  }
  .avatar-btn{
    width:42px; height:42px;
    border-radius:50%;
    background:#eef0fb;
    border:2px solid var(--blue-600);
    display:flex; align-items:center; justify-content:center;
    color:var(--blue-600);
    font-size:1.1rem;
    cursor:pointer;
  }
  .profile-wrap{ display:flex; align-items:center; gap:.4rem; cursor:pointer; }
  .profile-wrap .fa-chevron-down{ font-size:.75rem; color:var(--muted); } */

  /* .content-area{
    padding:2.2rem 2.4rem 3rem;
    flex:1;
  } */

  /* .page-title{
    font-weight:800;
    font-size:1.85rem;
    color:var(--ink-900);
    margin-bottom:.6rem;
  }
  .title-rule{
    width:70px; height:4px; border-radius:4px;
    background:linear-gradient(90deg, var(--blue-600), var(--violet-600));
    margin-bottom:1.1rem;
  }
  .intro-copy{
    color:var(--muted);
    max-width:900px;
    line-height:1.7;
    font-size:.98rem;
    margin-bottom:2rem;
  } */

  /* Cards */
  /* .action-card{
    background:#fff;
    border-radius:16px;
    padding:1.3rem 1.4rem;
    display:flex;
    align-items:center;
    gap:1.1rem;
    text-decoration:none;
    color:var(--ink-900);
    box-shadow:0 8px 20px -14px rgba(20,16,51,.25);
    border:1px solid #f1f0fa;
    transition:.2s ease;
    height:100%;
  }
  .action-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 30px -16px rgba(20,16,51,.3);
    color:var(--ink-900);
  }
  .action-icon{
    width:58px; height:58px;
    border-radius:14px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
    color:#fff;
  }
  .action-icon.blue{ background:linear-gradient(135deg,#2f7bf0,#1a4bc4); }
  .action-icon.orange{ background:linear-gradient(135deg,#ff9d4d,#e8720f); } */

  /* .action-title{
    font-weight:700;
    font-size:1.02rem;
    line-height:1.3;
    margin-bottom:0;
  }
  .action-title .count{ color:#e0304f; font-weight:700; } */

  @media (max-width:1199.98px){
    .sidebar{ width:270px; }
  }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width:991.98px){
    .sidebar{
      position:fixed;
      left:0; top:0;
      height:100vh;
      z-index:1050;
      transform:translateX(-105%);
      box-shadow:20px 0 40px rgba(0,0,0,.25);
    }
    .sidebar.open{ transform:translateX(0); }
    .hamburger-btn{ display:inline-flex; align-items:center; justify-content:center; }
    .sidebar-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(10,10,30,.5);
      z-index:1040;
    }
    .sidebar-backdrop.show{ display:block; }
    /* .content-area{ padding:1.8rem 1.4rem 2.5rem; } */
    .page-title{ font-size:1.55rem; }
  }

  @media (max-width:767.98px){
    .topbar{ padding:.9rem 1.2rem; }
    .topbar-logo{ font-size:1.4rem; }
    /* .icon-btn, .avatar-btn{ width:38px; height:38px; font-size:.95rem; }
    .content-area{ padding:1.5rem 1rem 2rem; }
    .page-title{ font-size:1.35rem; }
    .intro-copy{ font-size:.9rem; }
    .action-card{ padding:1.1rem; gap:.9rem; }
    .action-icon{ width:50px; height:50px; font-size:1.2rem; border-radius:12px; }
    .action-title{ font-size:.92rem; } */
  }

  /* @media (max-width:575.98px){
    .profile-wrap span.d-none-xs{ display:none; }
    .action-card{ flex-direction:row; align-items:flex-start; }
    .action-icon{ width:46px; height:46px; font-size:1.05rem; }
    .action-title{ font-size:.88rem; }
    .content-area{ padding:1.2rem .8rem 2rem; }
  } */

  @media (prefers-reduced-motion: reduce){
    .sidebar, .action-card{ transition:none; }
  }

  .icon-btn:focus-visible,
  .avatar-btn:focus-visible,
  .action-card:focus-visible,
  .nav-link-item:focus-visible,
  .hamburger-btn:focus-visible{
    outline:2px solid var(--blue-600);
    outline-offset:2px;
  }