:root {
  --night: #0b1014;
  --deep: #121a20;
  --reed: #1f2b33;
  --silt: #9aa9b2;
  --foam: #e6eef2;
  --water: #6fc3d6;
  --clay: #d69a6f;
  --radius: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% -10%, #17323d 0%, var(--night) 60%) fixed;
  color: var(--foam);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

header { padding: 1.25rem 1.5rem 0; }

.mark {
  color: var(--water);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-decoration: none;
}

main { max-width: 1400px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }

a { color: var(--water); }

.path { margin: 0 0 1.25rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.path a { text-decoration: none; }
.path .sep { color: var(--silt); margin: 0 0.35rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.tile {
  display: flex;
  flex-direction: column;
  background: var(--deep);
  border: 1px solid var(--reed);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--foam);
  text-decoration: none;
}

.tile:hover { border-color: var(--water); }

.tile img, .tile .file, .tile .pool-mark {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--night);
}

.tile .file {
  display: grid;
  place-content: center;
  color: var(--clay);
  font: 600 1.1rem ui-monospace, monospace;
  text-transform: uppercase;
}

/* A pool: water seen from above */
.tile.pool .pool-mark {
  background:
    radial-gradient(circle at 50% 55%, rgb(111 195 214 / 0.35) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 55%, rgb(111 195 214 / 0.18) 0 38%, transparent 39%),
    radial-gradient(circle at 50% 55%, rgb(111 195 214 / 0.08) 0 55%, transparent 56%),
    var(--night);
}

.tile .name {
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  color: var(--silt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile.pool .name { color: var(--foam); }

.more { grid-column: 1 / -1; height: 1px; }

.empty { color: var(--silt); }

.object { max-width: 900px; }
.object img { display: block; max-width: 100%; border-radius: var(--radius); background: var(--deep); }
.object h1 { font-size: 1.1rem; font-weight: 600; margin: 1rem 0 0.5rem; overflow-wrap: anywhere; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0 0 1rem; }
dt { color: var(--silt); font-size: 0.85rem; }
dd { margin: 0; overflow-wrap: anywhere; }
code { font: 0.85rem ui-monospace, monospace; }

.meta {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--deep);
  border: 1px solid var(--reed);
  border-radius: var(--radius);
  font: 0.8rem/1.45 ui-monospace, monospace;
  color: var(--silt);
  overflow-x: auto;
}

.actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; }

button, .button {
  padding: 0.5rem 1.2rem;
  background: var(--water);
  color: var(--night);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.login {
  max-width: 360px;
  margin: 20vh auto 0;
  padding: 1rem;
  background: var(--deep);
  border: 1px solid var(--reed);
  border-radius: var(--radius);
}

.login input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--night);
  color: var(--foam);
  border: 1px solid var(--reed);
  border-radius: 10px;
  font: inherit;
}

.form-error { color: var(--clay); font-size: 0.85rem; margin-right: auto; }