:root { color-scheme: light; --blue: #087aff; --ink: #101b32; --muted: #4d5870; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(120deg, #fff 0%, #f7faff 72%, #f0f5ff 100%); color: var(--ink); font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif; font-size: 17px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a:focus-visible, button:focus-visible { outline: 3px solid #69b7ff; outline-offset: 4px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-header { position: relative; z-index: 1; height: 70px; border-bottom: 1px solid #e1e7f1; background: rgba(255,255,255,.92); }
.header-inner, .main-content { width: calc(100% - 76px); max-width: 1264px; margin: 0 auto; }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 27px; font-weight: 750; letter-spacing: -.6px; color: #0c1730; }
.brand img { object-fit: contain; border-radius: 7px; }
.header-divider { width: 1px; height: 22px; background: #dce2ed; }
.header-caption { font-size: 18px; }
.hero-background { position: absolute; top: 70px; left: 0; width: 100%; height: 100px; overflow: hidden; pointer-events: none; background: linear-gradient(105deg, #fff 5%, #f9fbff 55%, #e0edff 100%); }
.hero-background span { position: absolute; width: 720px; height: 250px; right: -130px; top: 55px; border-radius: 50% 0 0 0; transform: rotate(-13deg); background: linear-gradient(100deg, #e8f1ff70, #a3caff8a); }
.hero-background i { position: absolute; width: 550px; height: 260px; right: -150px; top: 20px; transform: rotate(-32deg); background: linear-gradient(90deg, #c6deff55, #82b7ff77); }
.main-content { position: relative; padding-bottom: 34px; }
.hero { height: 100px; display: flex; align-items: center; gap: 20px; padding: 0 24px; }
.hero-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: #e4efff; color: var(--blue); }
.hero-icon svg { width: 32px; height: 32px; stroke-width: 2.4; filter: drop-shadow(0 2px 0 #fff); }
h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: 1px; line-height: 1.3; font-weight: 750; color: #0c1527; }
.hero p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.files-card { padding: 22px 24px; border: 1px solid #e0e6f1; border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: 0 5px 20px #2c4b8010; }
.breadcrumbs { min-height: 40px; display: flex; align-items: center; gap: 19px; padding: 6px 22px; border-radius: 11px; background: linear-gradient(100deg, #f2f4fa, #f0f4fc); font-size: 18px; overflow-wrap: anywhere; flex-wrap: wrap; }
.breadcrumbs a { display: inline-flex; align-items: center; gap: 9px; color: #006aff; }
.breadcrumbs svg { width: 23px; height: 23px; }
.breadcrumbs [aria-current] { color: #101522; font-weight: 500; }
.breadcrumb-separator { color: #24314a; }
.directory-summary { min-height: 66px; display: flex; align-items: center; flex-wrap: wrap; gap: 17px; color: var(--muted); padding: 0 2px; font-size: 17px; }
.current-path { margin-left: 8px; }
.summary-divider { color: #ccd2e0; }
.demo-label { margin-left: auto; border: 1px solid #d5e6ff; border-radius: 5px; color: #5673a0; font-size: 12px; padding: 2px 8px; }
.table-container { overflow-x: auto; }
.file-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; text-align: left; }
.name-col { width: 49%; } .size-col { width: 16%; } .date-col { width: 23%; } .action-col { width: 12%; }
.file-table th { height: 47px; padding: 0 20px; font-size: 17px; font-weight: 600; background: #f1f4f9; color: #111a2a; }
.file-table th:first-child { border-radius: 11px 0 0 0; }
.file-table th:last-child { border-radius: 0 11px 0 0; }
.file-table td { height: 47.5px; padding: 2px 20px; border-bottom: 1px solid #dee5ef; color: #434e65; white-space: nowrap; }
.file-table tbody tr:not(:has(.empty-state)):hover { background: #f7faff; }
.file-name { display: flex; align-items: center; gap: 20px; min-width: 0; color: #0c1422; }
.file-name > span:last-child, .file-name > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name a:hover { color: #0676ff; }
.folder-icon { width: 32px; height: 29px; margin: 0 2px; }
.document-icon { position: relative; display: inline-block; width: 36px; height: 39px; flex-shrink: 0; border-radius: 5px 12px 4px 4px; background: linear-gradient(135deg, #d9edff, #a4d0ff); }
.document-icon::after { content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 0 0 0 2px; background: #f5f9ff; clip-path: polygon(0 0,100% 100%,0 100%); }
.document-icon span { position: absolute; left: 0; right: 0; bottom: 2px; padding: 2px 0; background: #168dff; border-radius: 2px; font-size: 10px; line-height: 13px; text-align: center; font-weight: 750; color: white; }
.document-tar { background: linear-gradient(135deg, #e6d7ff, #bd99fb); } .document-tar span { background: #8138ee; font-size: 8px; }
.document-zip { background: linear-gradient(135deg, #fff0d0, #ffd080); } .document-zip span { background: #efa00c; }
.document-txt { background: linear-gradient(135deg, #edf0f6, #cbd1df); } .document-txt span { background: #b6becf; }
.document-apk { background: linear-gradient(135deg, #e4f8d7, #ace18a); } .document-apk span { background: #58af42; }
.action-button { display: inline-flex; height: 34px; min-width: 98px; padding: 0 14px; align-items: center; justify-content: center; gap: 7px; color: white; font-size: 16px; line-height: 1; border: 1px solid #0876ff; border-radius: 14px; background: linear-gradient(180deg, #258aff 0%, #0875ff 100%); box-shadow: inset 0 1px 1px #ffffff40; transition: filter .15s, transform .15s; }
.action-button:hover { filter: brightness(.96); }
.action-button:active { transform: translateY(1px); }
.action-button svg { width: 17px; height: 17px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 38px; margin-top: 24px; }
.page-button { height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid #dbe1ed; border-radius: 10px; background: linear-gradient(#fff,#f4f6fa); color: #5b6780; font-size: 16px; }
.page-button svg { width: 12px; height: 16px; }
.chevron-left { transform: rotate(180deg); }
.disabled { color: #8892a7; }
.current-page { width: 42px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #e4efff; color: #0866ff; }
.page-total { margin-left: -6px; margin-right: 10px; }
.storage-note { min-height: 57px; margin-top: 28px; padding: 12px 22px; display: flex; align-items: center; gap: 18px; border-radius: 11px; background: linear-gradient(100deg, #eaf3ff, #dfedff); font-size: 17px; }
.storage-note svg { width: 31px; height: 31px; color: #0879ff; filter: drop-shadow(0 1px 0 #fff); stroke-width: 1.9; }
.file-table .empty-state { height: 380px; text-align: center; white-space: normal; }
.empty-state svg { width: 56px; height: 50px; color: #73a7ef; }
.empty-state p { margin: 18px 0 8px; color: #5a6981; }
.empty-state a { color: var(--blue); }
.ad-dialog { width: min(846px, calc(100vw - 40px), calc(141dvh - 63px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 8px solid white; border-radius: 29px; background: #e7f2ff; box-shadow: 0 20px 65px #091b4245; overflow: hidden; outline: none; transform: translateY(10px); }
.ad-dialog::backdrop { background: rgba(31,48,80,.45); }
.ad-artwork { position: relative; aspect-ratio: 827 / 587; overflow: hidden; }
.platform-visual { position: absolute; left: -38.694%; top: -50.426%; width: 175.091%; height: auto; max-width: none; pointer-events: none; user-select: none; }
.ad-brand { position: absolute; left: 5.8%; top: 6.5%; width: 6.4%; height: auto; border-radius: 8px; }
.ad-close { position: absolute; top: .85%; right: 1.1%; width: 5.2%; aspect-ratio: 1; border: 0; border-radius: 50%; background: #edf4ff; color: #102654; padding: 0; display: grid; place-items: center; }
.ad-close svg { width: 56%; height: 56%; stroke-width: 1.8; }
.ad-close:hover { background: #ffffff35; }
.ad-details { position: absolute; left: 6.1%; top: 48.1%; width: 25.3%; height: 9.3%; border-radius: 40px; }
.ad-details:hover { background: #ffffff12; }
@media (max-width: 900px) {
  .header-inner, .main-content { width: calc(100% - 40px); }
  .file-table th, .file-table td { padding-left: 12px; padding-right: 12px; }
  .name-col { width: 45%; } .size-col { width: 15%; } .date-col { width: 25%; } .action-col { width: 15%; }
  .file-name { gap: 12px; } .action-button { min-width: 82px; }
  .file-table { font-size: 14px; } .file-table th { font-size: 15px; }
}
@media (max-width: 600px) {
  body { font-size: 14px; }
  .site-header { height: 64px; }
  .header-inner, .main-content { width: calc(100% - 28px); }
  .header-inner { gap: 13px; } .brand { font-size: 22px; gap: 7px; } .brand img { width: 30px; height: 30px; }
  .header-caption { font-size: 13px; } .header-divider { height: 19px; }
  .hero-background { top: 64px; height: 96px; }
  .hero { height: 96px; padding: 0 6px; gap: 14px; }
  .hero-icon { width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; } .hero-icon svg { width: 29px; height: 29px; }
  h1 { font-size: 24px; letter-spacing: 1px; } .hero p { font-size: 13px; }
  .files-card { padding: 15px 12px; border-radius: 15px; }
  .breadcrumbs { padding: 8px 12px; gap: 10px; font-size: 14px; } .breadcrumbs svg { width: 18px; height: 18px; }
  .directory-summary { padding: 12px 2px; gap: 10px; font-size: 12px; min-height: 60px; } .current-path { margin-left: 0; }
  .file-table .date-col, .file-table th:nth-child(3), .file-table td:nth-child(3) { display: none; }
  .name-col { width: 57%; } .size-col { width: 18%; } .action-col { width: 25%; }
  .file-table th, .file-table td { padding: 4px 7px; font-size: 12px; height: 55px; }
  .file-table th { height: 40px; }
  .file-name { gap: 8px; } .folder-icon { width: 24px; height: 24px; margin: 0; }
  .document-icon { width: 25px; height: 32px; } .document-icon span { font-size: 8px; padding: 0; } .document-tar span { font-size: 6px; }
  .action-button { min-width: 62px; height: 29px; padding: 0 8px; border-radius: 10px; font-size: 12px; gap: 4px; } .action-button svg { width: 13px; height: 13px; }
  .pagination { gap: 9px; margin-top: 19px; } .page-button { font-size: 12px; height: 32px; padding: 0 8px; } .current-page { width: 32px; height: 32px; } .page-total { margin-right: 3px; }
  .storage-note { margin-top: 20px; min-height: 48px; padding: 10px; gap: 9px; font-size: 12px; } .storage-note svg { width: 25px; height: 25px; }
  .ad-dialog { border-width: 5px; border-radius: 18px; width: calc(100vw - 24px); }
  .file-table .empty-state { height: 300px; }
}