:root {
      --bg: #0a0f1d;
      --card: rgba(255,255,255,0.05);
      --card-2: rgba(255,255,255,0.035);
      --border: rgba(255,255,255,0.10);
      --text: #eef3ff;
      --muted: #b9c3df;
      --accent: #8ea5ff;
      --shadow: 0 18px 60px rgba(0,0,0,0.35);
      --radius: 20px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scrollbar-gutter: stable; overflow-y: scroll; }
    body { caret-color: transparent; }

    body {
      margin: 0;
      font-family: Inter, system-ui, sans-serif;
      padding-bottom: 120px;
      background:
        radial-gradient(circle at top left, rgba(124,156,255,0.18), transparent 26%),
        radial-gradient(circle at top right, rgba(86,224,182,0.10), transparent 24%),
        linear-gradient(180deg, #070b16 0%, #0a0f1d 100%);
      color: var(--text);
      line-height: 1.5;
    }

    a { color: inherit; text-decoration: none; }

    .container {
      width: min(calc(100% - 32px), var(--max));
      margin: 0 auto;
    }

    footer .container {
      width: calc(100% - 24px);
      max-width: none;
    }

    .page-shell {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .page-main {
      flex: 1;
    }

    .content-wrap {
      padding: 38px 0 60px;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(16px);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(7, 11, 22, 0.78);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 14px 34px rgba(0,0,0,.22),
        0 0 36px rgba(124,156,255,.05);
    }

    .nav::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(
          90deg,
          transparent 0%,
          rgba(124,156,255,.05) 22%,
          rgba(127,216,221,.04) 50%,
          rgba(124,156,255,.05) 78%,
          transparent 100%
        );
      opacity: .9;
    }

    .nav-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 20px;
      padding: 2px 0;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      font-weight: 800;
      letter-spacing: 0.2px;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .brand:hover {
      transform: translateY(-1px);
      text-shadow: 0 0 18px rgba(124,156,255,.08);
    }

    .brand span {
      color: #f6f9ff;
      text-shadow: 0 0 16px rgba(124,156,255,.10);
    }

    .nav-links {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .nav-links a {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 3px 9px;
      border-radius: 999px;
      color: rgba(225,233,248,.80);
      background: rgba(255,255,255,.02);
      border: 1px solid transparent;
      transition:
        color .18s ease,
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
    }

    .nav-links a::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 48%);
      opacity: 0;
      transition: opacity .18s ease;
      pointer-events: none;
    }

    .nav-links a:hover {
      color: #f6f9ff;
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.10);
      background:
        linear-gradient(135deg, rgba(124,156,255,.10), rgba(127,216,221,.05) 60%, rgba(255,255,255,.02)),
        rgba(255,255,255,.03);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 22px rgba(0,0,0,.16),
        0 0 22px rgba(124,156,255,.06);
    }

    .nav-links a:hover::before {
      opacity: .9;
    }

    .nav-links .nav-accent {
      border-color: rgba(127,216,221,.16);
      background:
        linear-gradient(135deg, rgba(127,216,221,.10), rgba(124,156,255,.05)),
        rgba(255,255,255,.03);
      color: #eefcff;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 20px rgba(0,0,0,.14),
        0 0 18px rgba(127,216,221,.06);
    }

    .nav-links .nav-accent:hover {
      border-color: rgba(127,216,221,.24);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 24px rgba(0,0,0,.18),
        0 0 24px rgba(127,216,221,.08);
    }

    h1 {
      margin: 0 0 10px;
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1.05;
    }

    .lead {
      color: var(--muted);
      margin: 0 0 28px;
    }

    .tree-root {
      display: grid;
      gap: 10px;
    }

    .folder-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.20);
      overflow: hidden;
    }

    .folder-card.depth-1 { background: rgba(255,255,255,0.045); }
    .folder-card.depth-2 { background: rgba(255,255,255,0.040); }
    .folder-card.depth-3 { background: rgba(255,255,255,0.035); }

    .folder-header {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .folder-header:hover {
      background: rgba(255,255,255,0.03);
    }

    .folder-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 0.85rem;
      overflow: hidden;
    }

    .folder-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .folder-text {
      min-width: 0;
      flex: 1;
    }

    .folder-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .folder-title {
      margin: 0;
      font-size: 0.98rem;
      line-height: 1.1;
      word-break: break-word;
    }

    .folder-sub {
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.25;
      word-break: break-word;
    }

    .folder-badge {
      flex-shrink: 0;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(142,165,255,0.15);
      color: #dce5ff;
      font-size: 0.7rem;
      line-height: 1;
      white-space: nowrap;
    }

    .folder-chevron {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 0.7rem;
      transition: transform 0.18s ease;
    }

    .folder-card.open > .folder-header .folder-chevron {
      transform: rotate(90deg);
    }

    .folder-body {
      display: none;
      padding: 0 12px 12px;
    }

    .folder-card.open > .folder-body {
      display: block;
    }

    .folder-inner {
      display: grid;
      gap: 8px;
    }

    .children {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .file-list {
      display: grid;
      gap: 6px;
    }

    .file-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      background: var(--card-2);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .file-left {
      min-width: 0;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      flex: 1;
    }

    .file-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 0.8rem;
    }

    .file-info {
      min-width: 0;
    }

    .file-name {
      font-weight: 800;
      font-size: 0.9rem;
      line-height: 1.15;
      word-break: break-word;
    }

    .file-meta {
      color: var(--muted);
      font-size: 0.74rem;
      margin-top: 2px;
      line-height: 1.2;
      word-break: break-word;
    }

    .download-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 82px;
      padding: 8px 10px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), #a7b9ff);
      color: #08101d;
      font-weight: 800;
      font-size: 0.8rem;
      line-height: 1;
      text-decoration: none;
    }

    .state {
      color: var(--muted);
      padding: 4px 0;
    }

    .state.error {
      color: #ffb4b4;
    }

    .depth-wrap {
      padding-left: 10px;
      border-left: 1px solid rgba(255,255,255,0.08);
    }

    .logo {
      height: 36px;
      width: auto;
      display: block;
      filter: drop-shadow(0 0 10px rgba(124,156,255,.16));
    }

    .hero-logo {
      max-width: 520px;
      width: 100%;
      margin: 25px 0 10px 0;
      opacity: 0.9;
    }

    @media (max-width: 760px) {
      .nav-inner {
        grid-template-columns: 1fr;
        align-items: flex-start;
      }

      .nav-links {
        width: 100%;
        gap: 8px;
      }

      .nav-links > * {
        width: 100%;
      }

      .nav-links a {
        min-height: 38px;
      }

      .folder-header {
        padding: 9px 10px;
      }

      .folder-body {
        padding: 0 10px 10px;
      }

      .file-item {
        flex-direction: column;
        align-items: flex-start;
      }

      .download-btn {
        width: 100%;
      }
    }