:root { --bg: #0f0b0d; --panel: #1a1216; --ink: #fff6f0; --coral: #ff3b3b; --lime: #c6ff3d; --mute: #a89a9a; --line: rgba(255,246,240,.14); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Space Mono", ui-monospace, monospace; font-size: 14px; display: flex; min-height: 100vh; }
a { color: var(--lime); }
.logo { font-family: "Anton", Impact, sans-serif; font-size: 26px; letter-spacing: .08em; color: var(--coral); text-decoration: none; }
.logo span { color: var(--ink); }
h1 { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 36px; text-transform: uppercase; margin: 0 0 18px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .2em; color: var(--lime); margin: 36px 0 12px; }
.muted { color: var(--mute); }

.side { width: 230px; background: var(--panel); border-right: 1px solid var(--line); padding: 24px 18px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side nav a { text-decoration: none; color: var(--ink); padding: 10px 12px; border-radius: 8px; }
.side nav a.on, .side nav a:hover { background: rgba(255,246,240,.08); }
.side nav a.on { color: var(--lime); }
.side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.linkish { background: none; border: 0; color: var(--mute); font: inherit; cursor: pointer; padding: 0; text-align: left; }
.linkish:hover { color: var(--coral); }
.content { flex: 1; padding: 32px 40px; max-width: 1100px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 20px 0; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; text-decoration: none; color: var(--ink); }
.tile b { display: block; font-family: "Anton", Impact, sans-serif; font-size: 44px; font-weight: 400; color: var(--lime); line-height: 1; }
.tile span { color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--mute); font-weight: 400; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
td.wrap { white-space: pre-wrap; max-width: 420px; }
tr.done { opacity: .5; }

input, textarea { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--lime); border-color: transparent; }
label > span { display: block; color: var(--mute); font-size: 12px; margin-bottom: 6px; }
.stack { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.stack--narrow { max-width: 420px; }
.row-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.row-form input { width: auto; flex: 1 1 160px; }
.row-form .w-s { flex: 0 0 64px; }
.row-form .w-m { flex: 0 0 150px; }
.row-form .w-xl { flex: 2 1 320px; }
.chk { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--mute); font-size: 12px; }
.chk input { width: auto; }

.btn { background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; box-shadow: 4px 4px 0 var(--coral); align-self: flex-start; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--coral); }
.btn--sm { padding: 8px 14px; font-size: 11px; box-shadow: 3px 3px 0 var(--lime); }
.btn--danger { background: var(--coral); color: var(--bg); box-shadow: 3px 3px 0 var(--ink); }
.flash { padding: 12px 14px; border-radius: 10px; margin: 0 0 18px; }
.flash--ok { background: var(--lime); color: var(--bg); }
.flash--err { background: var(--coral); color: var(--bg); }

.login-page { align-items: center; justify-content: center; }
.login { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 36px; width: min(420px, 92vw); display: flex; flex-direction: column; gap: 16px; box-shadow: 10px 10px 0 var(--coral); }
.login h1 { margin: 0; }
.login label { display: flex; flex-direction: column; gap: 6px; color: var(--mute); font-size: 12px; }

@media (max-width: 760px) {
  body { flex-direction: column; }
  .side { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side nav { flex-direction: row; flex-wrap: wrap; }
  .side__foot { margin: 0; flex-direction: row; }
  .content { padding: 20px 16px; }
}