/* Otto backstage. Builds on otto.css. */
.cabinet.admin { width: min(1080px, calc(100vw - 20px)); }
.panel { background: linear-gradient(#111a22, #080c10); padding: 22px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold-3); }
.panel.narrow { width: min(420px, 100%); margin: 20px auto; }
.panel h2 { margin: 0 0 12px; font: 400 26px var(--display); text-align: center; letter-spacing: .1em; }
.panel label { display: block; margin-bottom: 6px; font: 400 12px var(--thin); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); }
.panel input, .card input[type=text] {
  width: 100%; padding: 10px 12px; margin-bottom: 12px; background: #05080a; color: var(--gold-1); border: 1px solid var(--gold-3);
  font: 400 16px var(--serif); letter-spacing: .04em;
}
.panel input:focus, .card input[type=text]:focus { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.err { min-height: 1.4em; margin: 10px 0 0; color: #ff9c9c; font-size: 14px; text-align: center; }

.intro { max-width: 760px; margin: 0 auto 18px; text-align: center; line-height: 1.7; color: #d6cdb4; }
.intro p { margin: 0 0 8px; }
.intro b { color: var(--gold-1); font-weight: 400; }
.muted { color: var(--muted); font-size: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.card { padding: 12px; background: linear-gradient(#0f171e, #080c10); border: 1px solid #2c3540; position: relative; }
.card.active { border-color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold-2), 0 0 24px rgba(242,197,82,.18); }
.card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card .role { font: 400 11px var(--thin); letter-spacing: .25em; text-transform: uppercase; color: var(--gold-2); }
.card .pays { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.card label { display: block; margin: 10px 0 4px; font: 400 11px var(--thin); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.card input[type=text] { margin-bottom: 0; padding: 8px 10px; font-size: 15px; }

/* picker */
.dz { position: relative; aspect-ratio: 1; cursor: pointer; overflow: hidden; border: 2px solid var(--gold-3); background: #05080a; transition: border-color .15s, box-shadow .15s; }
.dz:hover, .dz:focus-visible { border-color: var(--gold-1); outline: none; }
.dz.over { border-color: #fff; box-shadow: 0 0 0 3px var(--gold-2), 0 0 30px rgba(242,197,82,.6); }
.dz-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-hint {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 10px;
  background: rgba(3,6,9,.78); color: var(--gold-1); font-size: 13px; line-height: 1.7; opacity: 0; transition: opacity .18s;
}
.dz:hover .dz-hint, .dz:focus-visible .dz-hint, .dz.over .dz-hint { opacity: 1; }
.dz-hint b { color: var(--gold-2); font-weight: 400; }
.dz-busy { position: absolute; inset: 0; display: grid; place-content: center; background: rgba(3,6,9,.7); }
.dz-busy[hidden] { display: none; }
.dz-busy i { width: 34px; height: 34px; border: 3px solid var(--gold-4); border-top-color: var(--gold-2); border-radius: 50%; animation: spin 1s linear infinite; }
.dz-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dz-actions .gbtn { flex: 1 1 auto; padding: 0 8px; letter-spacing: .12em; }
.dz-actions .gbtn[hidden] { display: none; }
@media (hover: none) { .dz-hint { opacity: 1; background: linear-gradient(transparent 55%, rgba(3,6,9,.85)); place-content: end center; } }

.admin-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 26px 0 6px; }
.admin-bar .gbtn { display: inline-flex; align-items: center; text-decoration: none; }
.foot { text-align: center; margin: 16px 0 0; }

@media (max-width: 560px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { padding: 8px; }
  .card header { flex-direction: column; align-items: flex-start; gap: 0; }
  .card .pays { font-size: 11px; }
  .dz-actions .gbtn { font-size: 11px; letter-spacing: .04em; height: 32px; }
  .intro { font-size: 14px; }
}