header{
    height:var(--headerH);
    padding:0 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:1300;
    background:rgba(253,253,251,.94);
    color:var(--text);
    border-bottom:1px solid var(--border-soft);
    backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(20,21,63,.03);
  }
  header .title{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .brandLogo{
    height:42px;
    width:auto;
    display:block;
  }
  .brandText{
    font-family:Aptos, "Aptos Display", Arial, sans-serif;
    font-weight:700;
    letter-spacing:.01em;
    font-size:18px;
    color:var(--primary);
    padding-left:18px;
    border-left:1px solid var(--accent-line);
  }
  header .meta{
    font-size:12px;
    color:var(--muted);
    background:var(--surface-muted);
    border:1px solid var(--border);
    border-radius:999px;
    padding:7px 12px;
  }
  .headerRight{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .sessionBar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(253,253,251,.92);
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
    font-size:12px;
    color:var(--slate-ink);
  }
  .sessionBar strong{
    color:var(--primary);
  }
  .sessionBtn{
    border:none;
    background:transparent;
    color:var(--primary);
    cursor:pointer;
    font-weight:700;
    padding:0;
  }
  .shell{
    width:100%;
    margin:0;
    padding:0 18px 120px 0;
    position:relative;
  }

  .sidebar{
    width:286px;
    background:rgba(248,244,236,.96);
    border-right:1px solid var(--border-soft);
    padding:22px 16px;
    position:fixed;
    inset:var(--headerH) auto 0 0;
    height:calc(100vh - var(--headerH));
    overflow:auto;
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .navBtn{
    position:relative;
    width:100%;
    border:1px solid transparent;
    background:transparent;
    color:var(--primary);
    border-radius:18px;
    padding:14px 16px;
    text-align:left;
    cursor:pointer;
    font-weight:700;
    margin-bottom:2px;
    transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
  }
  .navBtn:hover{
    background:var(--surface);
    border-color:var(--accent-line);
    transform:translateX(1px);
  }
  .navBtn.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#ffffff;
    box-shadow:inset 3px 0 0 var(--accent), 0 8px 18px rgba(20,21,63,.12);
  }
  .mainArea{
    width:calc(100% - 286px);
    min-width:0;
    margin-left:286px;
    padding:28px 32px 24px 24px;
    box-sizing:border-box;
  }
  .page{ display:none; }
  .page.is-active{ display:block; }
  .wrap{
    max-width:1240px;
    margin:0;
    padding:0;
  }
  .grid{
    display:grid;
    grid-template-columns:minmax(340px, 380px) minmax(0, 1fr);
    gap:20px;
  }
  .card{
    background:rgba(253,253,251,.92);
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow2);
    padding:22px;
  }
  .card h3{
    margin:0 0 14px;
    font-family:Aptos, "Aptos Display", Arial, sans-serif;
    font-size:18px;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--primary);
  }
  .row{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:10px;
  }

  @media (max-width: 1180px){
    .shell{
      padding-right:0;
      padding-bottom:96px;
    }
    .sidebar{
      width:238px;
      padding:18px 12px;
    }
    .mainArea{
      width:calc(100% - 238px);
      margin-left:238px;
      padding:22px 18px 20px 14px;
    }
    .grid{
      grid-template-columns:minmax(300px, 340px) minmax(0, 1fr);
      gap:16px;
    }
    .card{
      padding:18px;
    }
  }

  @media (max-width: 768px){
    header{
      padding:0 12px;
    }
    .headerRight{
      gap:6px;
    }
    .sessionBar{
      max-width:min(58vw, 280px);
      overflow:hidden;
      padding:7px 10px;
    }
    .brandLogo{
      height:32px;
    }
    .brandText{
      font-size:15px;
      padding-left:10px;
    }
    .shell{
      padding:0 0 88px;
    }
    .sidebar{
      position:sticky;
      inset:var(--headerH) 0 auto 0;
      width:100%;
      height:auto;
      min-height:auto;
      max-height:none;
      overflow-x:auto;
      overflow-y:hidden;
      flex-direction:row;
      flex-wrap:nowrap;
      gap:10px;
      padding:12px;
      border-right:none;
      border-bottom:1px solid var(--border-soft);
      z-index:180;
    }
    .navBtn{
      width:auto;
      min-width:max-content;
      margin-bottom:0;
      flex:0 0 auto;
      padding:10px 14px;
      text-align:center;
    }
    .mainArea{
      width:100%;
      margin-left:0;
      padding:14px 12px 20px;
    }
    .wrap{
      max-width:100%;
    }
    .grid{
      grid-template-columns:1fr;
      gap:14px;
    }
    .card{
      border-radius:20px;
      padding:16px 14px;
    }
    .card h3{
      font-size:16px;
    }
    .row{
      gap:8px;
    }
  }