:root{
    --bg:#0f172a;
    --fg:#e2e8f0;
    --muted:#94a3b8;
    --card:#111827;
    --border:#1f2937;
    --link:#60a5fa;
    --link-hover:#93c5fd;
    --hover:#0b1220;
    --thead:#0b1220;
}

@media (prefers-color-scheme: light){
    :root{
        --bg:#f8fafc;
        --fg:#0f172a;
        --muted:#64748b;
        --card:#ffffff;
        --border:#e5e7eb;
        --link:#2563eb;
        --link-hover:#1d4ed8;
        --hover:#f1f5f9;
        --thead:#f8fafc;
    }
}

*{
    box-sizing: border-box;
}

body{
    margin:0;
    font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
    background:var(--bg);
    color:var(--fg);
}

header{
    padding:20px;
    border-bottom:1px solid var(--border);
    background:var(--card);
    position:sticky;
    top:0;
    z-index:2;
}

h1 {
    margin: 0 0 6px;
    font-size: 20px;
}

.crumbs {
    color: var(--muted);
    font-size: 13px;
}

.crumbs a {
    color: var(--link);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.sep {
    margin: 0 6px;
    color: var(--muted);
}

main {
    padding: 16px 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

th, td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

th {
    text-align: left;
    color: var(--muted);
    font-weight: 600;
    background: var(--thead);
    position: sticky;
    top: 67px;
    z-index: 1;
}

tr:hover td {
    background: var(--hover);
}

tr.up td {
    background: var(--hover);
}

td.icon {
    width: 32px;
    text-align: center;
}

td.size, td.mtime {
    white-space: nowrap;
    color: var(--muted);
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.footer {
    color: var(--muted);
    font-size: 12px;
    margin-top: 10px;
}