:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --border: #e5e7eb;
    --border-soft: #f0f1f3;
    --text: #1f2328;
    --text-2: #59636e;
    --text-3: #8b949e;
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, .08);
    --row-hover: #f3f6fb;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
    --c-folder: #e3a008;
    --c-file: #8b949e;
    --c-image: #db2777;
    --c-video: #7c3aed;
    --c-audio: #0891b2;
    --c-archive: #b45309;
    --c-code: #16a34a;
    --c-doc: #2563eb;
    --c-pdf: #dc2626;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1117;
        --surface: #161b22;
        --surface-2: #1c2129;
        --border: #30363d;
        --border-soft: #21262d;
        --text: #e6edf3;
        --text-2: #9da7b3;
        --text-3: #6e7681;
        --accent: #58a6ff;
        --accent-soft: rgba(88, 166, 255, .12);
        --row-hover: #1c2330;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
        --c-folder: #f0b429;
        --c-file: #8b949e;
        --c-image: #f472b6;
        --c-video: #a78bfa;
        --c-audio: #22d3ee;
        --c-archive: #f59e0b;
        --c-code: #4ade80;
        --c-doc: #60a5fa;
        --c-pdf: #f87171;
    }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px 32px;
}

/* ---------- Icons (CSS mask, colored by currentColor) ---------- */
.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.t-folder  { color: var(--c-folder); }
.t-file    { color: var(--c-file); }
.t-image   { color: var(--c-image); }
.t-video   { color: var(--c-video); }
.t-audio   { color: var(--c-audio); }
.t-archive { color: var(--c-archive); }
.t-code    { color: var(--c-code); }
.t-doc     { color: var(--c-doc); }
.t-pdf     { color: var(--c-pdf); }

/* ---------- Header ---------- */
header { margin-bottom: 20px; }

.title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.title-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.title-icon .icon { width: 22px; height: 22px; }
h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    word-break: break-all;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    color: var(--text-3);
    font-size: 13px;
}
.breadcrumbs a,
.breadcrumbs .current {
    padding: 2px 6px;
    border-radius: 6px;
    text-decoration: none;
    word-break: break-all;
}
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs a:hover { background: var(--accent-soft); color: var(--accent); }
.breadcrumbs .current { color: var(--text); font-weight: 500; }
.breadcrumbs .sep { user-select: none; }

/* ---------- Toolbar ---------- */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.stats { color: var(--text-2); font-size: 13px; white-space: nowrap; }
.search {
    position: relative;
    flex: 0 1 280px;
}
.search .icon {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}
.search input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    font: inherit;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--text-3); }
.search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- Card & table ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
col.c-size { width: 120px; }
col.c-time { width: 200px; }

th {
    padding: 0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
th button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 10px 16px;
    font: inherit;
    color: inherit;
    text-align: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
th button:hover { color: var(--text); }
th .icon {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: transform .15s, opacity .15s;
}
th[aria-sort] .icon { opacity: 1; color: var(--accent); }
th[aria-sort="descending"] .icon { transform: rotate(180deg); }
th.size button { justify-content: flex-end; }

td {
    padding: 0 16px;
    height: 44px;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .1s; }
tbody tr:hover { background: var(--row-hover); }

td.name a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}
td.name a:hover .label { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
td.name .label { overflow: hidden; text-overflow: ellipsis; }
tr.directory .label { font-weight: 500; }
tr.parent .label { color: var(--text-2); }
tr.parent .icon { color: var(--text-3); }

td.size {
    text-align: right;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
td.time {
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.muted { color: var(--text-3); }

.empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--text-3);
}
.empty .icon { display: block; width: 40px; height: 40px; margin: 0 auto 8px; color: var(--text-3); opacity: .6; }

footer {
    margin-top: 20px;
    text-align: center;
    color: var(--text-3);
    font-size: 12px;
}

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .container { padding: 24px 12px; }
    h1 { font-size: 18px; }
    .title-icon { width: 34px; height: 34px; }
    .toolbar { flex-wrap: wrap; }
    .search { flex: 1 1 100%; order: -1; }
    col.c-time, th.time, td.time { display: none; }
    col.c-size { width: 90px; }
    td, th button { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Icon shapes (Tabler Icons, MIT) ---------- */
.t-folder { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='%23000' fill-opacity='.2'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2'/%3E%3C/g%3E%3Cg fill='none'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2'/%3E%3C/g%3E%3C/svg%3E"); }
.t-folder-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14l-4 -4l4 -4'/%3E%3Cpath d='M5 10h11a4 4 0 1 1 0 8h-1'/%3E%3C/svg%3E"); }
.t-file { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3C/svg%3E"); }
.t-image { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8h.01'/%3E%3Cpath d='M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z'/%3E%3Cpath d='M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5'/%3E%3Cpath d='M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3'/%3E%3C/svg%3E"); }
.t-video { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z'/%3E%3Cpath d='M3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'/%3E%3C/svg%3E"); }
.t-audio { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M13 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M9 17v-13h10v13'/%3E%3Cpath d='M9 8h10'/%3E%3C/svg%3E"); }
.t-archive { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20.735a2 2 0 0 1 -1 -1.735v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-1'/%3E%3Cpath d='M11 17a2 2 0 0 1 2 2v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a2 2 0 0 1 2 -2z'/%3E%3Cpath d='M11 5h-1M13 7h-1M11 9h-1M13 11h-1M11 13h-1M13 15h-1'/%3E%3C/svg%3E"); }
.t-code { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M10 13l-1 2l1 2'/%3E%3Cpath d='M14 13l1 2l-1 2'/%3E%3C/svg%3E"); }
.t-doc { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 9h1M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.t-pdf { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4'/%3E%3Cpath d='M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6'/%3E%3Cpath d='M17 18h2'/%3E%3Cpath d='M20 15h-3v6'/%3E%3Cpath d='M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z'/%3E%3C/svg%3E"); }
.t-search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E"); }
.t-arrow { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M18 11l-6 -6'/%3E%3Cpath d='M6 11l6 -6'/%3E%3C/svg%3E"); }