:root {
    --bg: #14120f;
    --panel: #1d1a16;
    --ink: #f3ead8;
    --muted: #b4a790;
    --line: #3a342b;
    --accent: #e0a04a;
    --accent-ink: #1a140c;
    --danger: #d36b5a;
    --ok: #8fb573;
    --shadow: 0 18px 50px rgb(0 0 0 / 28%);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(900px 420px at 10% -10%, rgb(224 160 74 / 12%), transparent 50%),
        var(--bg);
    color: var(--ink);
    font: 16px/1.5 "IBM Plex Sans", "Segoe UI", sans-serif;
}

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

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.wordmark {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.wordmark span {
    color: var(--muted);
    font-weight: 400;
}

.top-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.who {
    color: var(--muted);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.85rem;
}

.inline { display: inline-flex; gap: 0.5rem; align-items: center; }
.inline.tight { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 0.7rem; }

button.linkish {
    background: none;
    border: 0;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

button.linkish:hover { text-decoration: underline; }

.shell {
    width: min(1100px, calc(100% - 2rem));
    margin: 2rem auto 4rem;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.92rem;
}

.crumbs a { color: var(--ink); }
.crumbs .sep { color: var(--line); }
.crumbs a:last-of-type { color: var(--accent); }

.toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; }

input[type="text"],
input[type="email"],
input[type="password"],
input:not([type]) {
    background: #120f0c;
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font: inherit;
}

input:focus {
    outline: 2px solid rgb(224 160 74 / 45%);
    border-color: var(--accent);
}

.btn {
    appearance: none;
    border: 1px solid var(--line);
    background: #2a251e;
    color: var(--ink);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    font: 500 0.95rem/1 "IBM Plex Sans", sans-serif;
    cursor: pointer;
}

.btn:hover { border-color: var(--accent); }

.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.btn.danger {
    color: #2a1210;
    background: var(--danger);
    border-color: var(--danger);
}

input[type="file"] {
    max-width: 220px;
    color: var(--muted);
    font-size: 0.85rem;
}

.listing {
    width: 100%;
    border-collapse: collapse;
}

.listing th,
.listing td {
    text-align: left;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--line);
}

.listing th {
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

.listing tr:last-child td { border-bottom: 0; }
.listing .num { text-align: right; font-variant-numeric: tabular-nums; }
.listing .muted { color: var(--muted); font-size: 0.92rem; }
.listing a.dir { font-weight: 500; color: var(--ink); }
.listing a.file { color: var(--ink); }

.empty {
    margin: 0;
    padding: 2.5rem 1.2rem;
    color: var(--muted);
    text-align: center;
}

.actions { text-align: right; }

.menu { position: relative; display: inline-block; }
.menu summary {
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-box {
    position: absolute;
    right: 0;
    top: 1.5rem;
    z-index: 5;
    width: 220px;
    padding: 0.75rem;
    background: #120f0c;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.banner {
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    margin: 0 0 1rem;
}

.banner.ok {
    background: rgb(143 181 115 / 14%);
    color: var(--ok);
}

.banner.bad {
    background: rgb(211 107 90 / 14%);
    color: #f0b3a8;
}

.auth {
    width: min(420px, 100%);
    margin: 3rem auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.6rem;
    box-shadow: var(--shadow);
}

.auth h1 {
    margin: 0 0 0.75rem;
    font-size: 1.45rem;
}

.lede { color: var(--muted); margin-top: 0; }
.aux { margin: 1rem 0 0; color: var(--muted); }
.hint { color: var(--muted); font-size: 0.88rem; margin: 0; }

.auth label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.92rem;
}

.auth label.check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.field-error { color: #f0b3a8; font-size: 0.86rem; }

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}