:root {
      --brand: #5b5ce2;
      --brand-strong: #4647c8;
      --brand-soft: #eeefff;
      --cyan: #20b8cd;
      --orange: #ff8a3d;
      --green: #16a778;
      --red: #e55353;
      --ink: #202231;
      --muted: #74798c;
      --line: #e7e9f0;
      --surface: #ffffff;
      --canvas: #f5f6fa;
      --shadow: 0 10px 30px rgba(34, 38, 67, .08);
      --radius: 16px;
      --sidebar: 232px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--canvas);
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 14px;
      line-height: 1.55;
    }

    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }

    .app {
      display: grid;
      grid-template-columns: var(--sidebar) minmax(0, 1fr);
      min-height: 100vh;
    }

    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 30;
      width: var(--sidebar);
      display: flex;
      flex-direction: column;
      padding: 22px 14px 16px;
      overflow: hidden;
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
      color: #dfe2ff;
      background:
        radial-gradient(circle at 20% 8%, rgba(112, 115, 255, .34), transparent 30%),
        linear-gradient(180deg, #17192d 0%, #111322 100%);
    }

    .sidebar-menu-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
    }

    .sidebar:hover { scrollbar-color: rgba(151, 158, 207, .5) transparent; }
    .sidebar::-webkit-scrollbar { width: 7px; }
    .sidebar::-webkit-scrollbar-track { background: transparent; }
    .sidebar::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: transparent;
      background-clip: padding-box;
    }
    .sidebar:hover::-webkit-scrollbar-thumb { background-color: rgba(151, 158, 207, .48); }
    .sidebar:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(184, 190, 238, .74); }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 0 10px 22px;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: white;
      font-size: 19px;
      font-weight: 800;
      background: linear-gradient(135deg, #8386ff, #5758df 60%, #31c5d8);
      box-shadow: 0 8px 22px rgba(91, 92, 226, .35);
    }

    .brand strong { display: block; color: #fff; font-size: 17px; letter-spacing: .4px; }
    .brand small { color: #8e93b5; font-size: 11px; }

    .sidebar-collapse {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      margin-left: auto;
      padding: 0;
      border: 1px solid #e2e2e6;
      border-radius: 7px;
      color: #74747c;
      background: #fff;
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      transition: .18s ease;
    }
    .sidebar-collapse:hover { color: #202126; border-color: #cbcbcf; background: #f2f2f4; }

    .nav-label {
      padding: 13px 12px 7px;
      color: #6e7497;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
    }

    .nav {
      display: grid;
      gap: 5px;
    }

    .nav-group { margin: 0 0 6px; }
    .nav-group summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      color: #d8dcf1;
      cursor: pointer;
      list-style: none;
      user-select: none;
      transition: .2s ease;
    }
    .nav-group summary::-webkit-details-marker { display: none; }
    .nav-group summary:hover { background: rgba(255,255,255,.05); }
    .nav-group-title { display: flex; align-items: center; gap: 10px; font-weight: 720; }
    .nav-group-caret { color: #777da4; font-size: 13px; transition: transform .2s ease; }
    .nav-group[open] .nav-group-caret { transform: rotate(180deg); }
    .nav-sublist { display: grid; gap: 3px; padding: 3px 0 4px 37px; }
    .nav-item.nav-sub {
      min-height: 34px;
      padding: 8px 11px;
      border-radius: 8px;
      color: #9ea4c2;
      font-size: 13px;
    }
    .nav-item.nav-sub.active { box-shadow: inset 2px 0 0 #8487ff; }
    .nav-item.nav-sub.nested { margin-left: 10px; font-size: 12px; }
    .nav-item.nav-sub.planned { color: #707692; }
    .nav-item.nav-sub.planned::after { content: "规划中"; margin-left: auto; color: #666c87; font-size: 10px; }
    .nav-config { margin: 2px 0 0 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.08); }
    .nav-child-group { margin: 0; }
    .nav-child-group summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 34px;
      padding: 8px 11px;
      border-radius: 8px;
      color: #9ea4c2;
      cursor: pointer;
      list-style: none;
      font-size: 13px;
    }
    .nav-child-group summary::-webkit-details-marker { display: none; }
    .nav-child-group summary:hover { background: rgba(255,255,255,.05); color: #fff; }
    .nav-child-group > summary span:last-child { color: #777da4; transition: transform .2s ease; }
    .nav-child-group[open] > summary span:last-child { transform: rotate(180deg); }
    .nav-child-list { display: grid; gap: 3px; margin: 2px 0 3px 12px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.07); }

    .nav-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 12px;
      border: 0;
      border-radius: 10px;
      color: #aeb3cf;
      background: transparent;
      text-align: left;
      transition: .2s ease;
    }

    .nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
    .nav-item.active {
      color: #fff;
      background: linear-gradient(90deg, rgba(103, 106, 244, .34), rgba(103, 106, 244, .13));
      box-shadow: inset 3px 0 0 #8487ff;
    }

    .nav-icon {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: currentColor;
      background: rgba(255,255,255,.06);
      font-size: 13px;
      font-weight: 800;
    }

    .sidebar-spacer { flex: 1; }

    .account {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      padding: 13px 10px 3px;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .avatar {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      font-weight: 700;
      background: linear-gradient(135deg, #ff9d64, #ee6c8f);
    }

    .account strong { display: block; color: #fff; font-size: 13px; }
    .account small { color: #777d9e; font-size: 11px; }

    .main {
      grid-column: 2;
      min-width: 0;
      min-height: 100vh;
    }

    .topbar {
      display: none;
      position: sticky;
      top: 0;
      z-index: 20;
      height: 68px;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(14px);
      transition: color .22s ease, background .22s ease, border-color .22s ease;
    }

    .crumb { display: flex; align-items: center; gap: 9px; color: var(--muted); }
    .crumb strong { color: var(--ink); font-size: 16px; }

    .top-actions { display: flex; align-items: center; gap: 10px; }

    .main.pull-mode .topbar {
      color: #eef0f8;
      border-bottom-color: #2c303c;
      background: rgba(22, 24, 32, .94);
    }

    .main.pull-mode .crumb,
    .main.pull-mode .crumb strong {
      color: #eef0f8;
    }

    .main.pull-mode .crumb > span:first-of-type {
      color: #8f95a8;
    }

    .main.pull-mode .team-select,
    .main.pull-mode .topbar .ghost-btn,
    .main.pull-mode .topbar .icon-btn {
      color: #cbd0de;
      border-color: #383b49;
      background: #22252f;
    }

    .team-select, .icon-btn, .ghost-btn, .primary-btn, .soft-btn {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    .team-select {
      padding: 8px 12px;
      color: #4e5263;
      font-weight: 600;
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      color: #64697c;
      font-size: 16px;
    }

    .page {
      display: none;
      min-height: 100vh;
      animation: fadeIn .24s ease;
    }

    .page.active { display: block; }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .page-pad { padding: 26px 28px 44px; }

    .page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 22px;
    }

    .page-head h1 { margin: 0 0 5px; font-size: 24px; line-height: 1.2; }
    .page-head p { margin: 0; color: var(--muted); }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      border-radius: 999px;
      color: var(--brand-strong);
      background: var(--brand-soft);
      font-size: 11px;
      font-weight: 700;
    }

    .badge.green { color: #087d59; background: #e6f8f1; }
    .badge.orange { color: #b45d20; background: #fff1e6; }
    .badge.red { color: #b53e3e; background: #ffeded; }
    .badge.gray { color: #656b7e; background: #f0f1f5; }

    .primary-btn, .ghost-btn, .soft-btn {
      padding: 9px 14px;
      font-weight: 650;
      transition: .2s ease;
    }

    .primary-btn {
      color: #fff;
      border-color: var(--brand);
      background: linear-gradient(135deg, #6b6dea, #5556d7);
      box-shadow: 0 8px 18px rgba(91, 92, 226, .2);
    }

    .primary-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(91, 92, 226, .28); }
    .ghost-btn { color: #555a6d; background: #fff; }
    .ghost-btn:hover { border-color: #cdd0db; background: #f9f9fc; }
    .soft-btn { color: var(--brand-strong); border-color: transparent; background: var(--brand-soft); }

    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 4px 18px rgba(28, 32, 59, .035);
    }

    .card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px 12px;
    }

    .card-title h3 { margin: 0; font-size: 15px; }
    .card-title small { color: var(--muted); }