:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #080810; color: #f8f8f2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #17172a, #080810 45rem); }
a { color: #8be9fd; text-decoration: underline; }
a:hover { color: #b3ecff; }
header, main, footer, .breadcrumbs { width: min(68rem, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }
main { padding: 1rem 0 2rem; }
header.page-header { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: 1rem 0; flex-wrap: wrap; }
header a { color: inherit; text-decoration: none; }
.page-nav { margin-left: auto; }
.menu { position: relative; }
.menu-trigger { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4rem; font: inherit; }
.menu-trigger::-webkit-details-marker { display: none; }
.menu-trigger::after { content: "+"; transition: transform 180ms ease, opacity 180ms ease; }
.menu[open] .menu-trigger::after { transform: rotate(45deg); }
.menu-panel { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.menu-inline .menu-panel { display: flex; }
.menu-button .menu-panel { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 10; min-width: 18rem; padding: .75rem; background: #050508; border: 3px solid #fff; box-shadow: 0 0 0 3px #000, 0 0 0 6px #fff; flex-direction: column; align-items: stretch; opacity: 0; transform: translateY(-.35rem); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.menu-button[open] .menu-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu-link, .menu-action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .35rem .6rem; border: 2px solid transparent; text-decoration: none; }
.menu-link:hover, .menu-action:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.menu-link[aria-current="page"], .menu-action[aria-current] { text-decoration: underline; font-weight: bold; }
.menu-extra { display: flex; justify-content: flex-end; }
.box, .card, .admin { border: 3px solid #fff; box-shadow: 0 0 0 3px #000, 0 0 0 6px #fff; background: #050508; padding: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.card img, article img { width: 100%; height: auto; image-rendering: pixelated; }
input, select, textarea, button { font: inherit; border: 2px solid #fff; background: #101020; color: #fff; padding: .55rem; }
textarea { min-height: 12rem; width: 100%; }
button { cursor: pointer; }
table { width: 100%; border-collapse: collapse; }
td, th { border-bottom: 1px solid #8a8a9a; padding: .5rem; text-align: left; }

trix-editor { min-height: 12rem; width: 100%; display: block; background: #101020; color: #fff; border: 2px solid #fff; }

.entry-form { display: flex; flex-direction: column; gap: 1rem; }
.entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem 1rem; align-items: start; }
.entry-grid > label, .entry-grid > .hero-picker, .entry-grid > .relation-picker, .entry-grid > .gallery-picker, .entry-grid > trix-editor, .entry-grid > trix-toolbar, .entry-grid > button { grid-column: 1 / -1; }
.entry-grid > button { width: fit-content; }
.checkbox-row { display: flex; align-items: center; gap: .5rem; }
.checkbox-row input { width: 1.15rem; height: 1.15rem; }

.hero-picker, .relation-picker, .gallery-picker { display: flex; flex-direction: column; gap: .5rem; }
.hero-preview { max-width: 10rem; }

.relation-chips, .gallery-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.relation-chip { display: inline-flex; align-items: center; gap: .4rem; border: 2px solid #fff; background: #101020; padding: .3rem .5rem; }
.relation-remove, .gallery-remove { border: none; background: transparent; color: #fff; padding: 0 .2rem; cursor: pointer; }

.gallery-item { position: relative; border: 2px solid #fff; padding: .3rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.gallery-item img { width: 6rem; height: 6rem; object-fit: cover; image-rendering: pixelated; }

.relation-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.relation-results li { border: 2px solid #fff; padding: .3rem .5rem; cursor: pointer; }

footer { width: min(68rem, calc(100% - 2rem)); margin: 2rem auto 1rem; padding-top: 1rem; border-top: 1px solid #8a8a9a; }
footer nav { gap: 1rem; }

.new-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.btn { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem .8rem; border: 2px solid #fff; background: #101020; color: #f8f8f2; text-decoration: none; }
.btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.row-actions { display: flex; gap: .75rem; align-items: center; }
.row-actions form { margin: 0; }

.site-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: bold; color: #f8f8f2; text-decoration: none; }
.site-logo { image-rendering: pixelated; }

.admin-nav { display: flex; gap: 1rem; justify-content: space-between; align-items: center; width: min(68rem, calc(100% - 2rem)); margin: 1rem auto 0; }

.breadcrumbs { margin: .5rem auto 1.25rem; color: #c9c9d6; line-height: 1.5; }
.breadcrumbs a { color: #c9c9d6; }

[aria-current="page"] { text-decoration: underline; font-weight: bold; }

[data-tooltip] { position: relative; }
[data-tooltip]:hover::after, [data-tooltip]:focus-within::after {
  content: attr(data-tooltip);
  position: absolute; left: 0; top: 100%; z-index: 20;
  width: max-content; max-width: 18rem;
  background: #101020; color: #f8f8f2; border: 2px solid #fff;
  padding: .4rem .5rem; font-size: .85rem; box-shadow: 0 0 0 3px #000;
}

.login-box { width: min(24rem, calc(100% - 2rem)); margin: 3rem auto; text-align: center; }
.login-box form { display: flex; flex-direction: column; gap: .75rem; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #ffcc00; outline-offset: 2px;
}

trix-toolbar { background: #050508; border: 2px solid #fff; padding: .5rem; }
.entry-form trix-toolbar .trix-button-row { flex-wrap: wrap; overflow: visible; justify-content: flex-start; gap: .35rem .75rem; }
.entry-form trix-toolbar .trix-button-group-spacer { display: none; }
.entry-form trix-toolbar .trix-button-group { margin: 0; }
trix-toolbar .trix-button-group { border: 1px solid #fff; border-radius: 0; }
trix-toolbar .trix-button { background: #23233c; border: 1px solid #fff; color: #fff; }
.entry-form trix-toolbar .trix-button--icon::before { opacity: .9; filter: brightness(0) invert(1); }
.entry-form trix-toolbar .trix-button--icon:disabled::before { opacity: .35; filter: brightness(0) invert(1); }
trix-toolbar .trix-button.trix-active { background: #5b5bd6; }
trix-toolbar .trix-dialog { background: #050508; color: #fff; border-color: #fff; }
trix-toolbar .trix-input--dialog { background: #101020; color: #fff; border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .menu-trigger::after, .menu-button .menu-panel { transition: none; }
}

.cropper-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.85); display: flex; flex-direction: column; padding: 1rem; gap: 1rem; }
.cropper-frame { flex: 1; min-height: 0; }
.cropper-frame img { max-width: 100%; max-height: 100%; }
.cropper-bar { display: flex; gap: 1rem; justify-content: center; }

@media (max-width: 40rem) {
  header.page-header { display: block; }
  .page-nav { margin-top: .75rem; }
  .menu-button .menu-panel { position: static; min-width: 0; }
  .entry-grid { grid-template-columns: 1fr; }
}