/* Statix Control — modular studio visual system. */
:root {
  --admin-bg: #090516;
  --admin-panel: rgba(15, 9, 34, .88);
  --admin-raised: rgba(21, 13, 45, .9);
  --admin-control: rgba(7, 4, 20, .76);
  --admin-line: rgba(210, 198, 255, .16);
  --admin-line-strong: rgba(87, 215, 255, .38);
  --admin-text: #f5f2ff;
  --admin-muted: #aaa3bd;
  --admin-cyan: #57d7ff;
  --admin-violet: #b986ff;
  --admin-danger: #ff637e;
  --admin-radius: 10px;
  --admin-ease: cubic-bezier(.23, 1, .32, 1);
}

body { min-width: 900px; background: var(--admin-bg); color: var(--admin-text); }
[hidden] { display: none !important; }
.aurora { background: radial-gradient(circle at 4% 100%, rgba(43, 164, 207, .18), transparent 29%), radial-gradient(circle at 96% 0%, rgba(143, 83, 226, .16), transparent 28%), var(--admin-bg); }
.shell { grid-template-columns: 224px minmax(0, 1fr); }

.app-sidebar {
  position: relative;
  padding: 24px 12px 20px;
  border-right: 1px solid var(--admin-line);
  background: rgba(8, 5, 22, .82);
}

.app-sidebar .brand { gap: 7px; padding: 4px 11px 30px; }
.app-sidebar .brand img { width: 111px; max-height: 45px; }
.app-sidebar .brand span { color: #9b90b7; font-size: 8px; letter-spacing: .15em; }
.app-sidebar nav { gap: 3px; }

.app-sidebar nav button {
  position: relative;
  min-height: 38px;
  padding: 9px 10px 9px 14px;
  border-radius: 8px;
  background: transparent;
  color: #aaa3bb;
  font-size: 12px;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--admin-ease);
}

.app-sidebar nav button::before {
  position: absolute;
  left: 0;
  width: 2px;
  height: 15px;
  border-radius: 2px;
  background: transparent;
  content: '';
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.app-sidebar nav button.active { background: linear-gradient(90deg, rgba(66, 201, 239, .15), rgba(120, 81, 221, .14)); color: #fbfaff; }
.app-sidebar nav button.active::before { background: var(--admin-cyan); box-shadow: 0 0 10px rgba(87, 215, 255, .7); }

@media (hover: hover) and (pointer: fine) {
  .app-sidebar nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; transform: translateX(2px); }
}

.app-sidebar nav button:active { transform: scale(.98); }

.app-sidebar small {
  right: auto;
  bottom: 19px;
  left: 12px;
  padding: 0 10px;
  color: #8e87a2;
  font-size: 9px;
}

.content { max-width: 1560px; padding: 0 42px 46px; }
.app-topbar { height: 56px; border-bottom-color: var(--admin-line); color: #a89fbd; font-size: 9px; letter-spacing: .14em; }
.app-topbar button { min-height: 30px; padding: 0 2px; color: #9cecff; font-size: 10px; letter-spacing: 0; transition: color 150ms ease, transform 150ms var(--admin-ease); }
.app-topbar button:active { transform: scale(.97); }

.page { padding-top: 31px; }
.page > .eyebrow, .wiki-admin-hero .eyebrow { margin-bottom: 7px; color: #a79ac3; font-size: 8px; letter-spacing: .14em; }
h1 { margin: 7px 0 9px; font-family: Manrope, Arial, sans-serif; font-size: 32px; font-weight: 800; line-height: 1.07; letter-spacing: -.06em; }
h1 em { color: #c3a1ff; }
.page > p:not(.eyebrow), .login > p { max-width: 670px; color: #ada6bd; font-size: 12px; line-height: 1.65; }

.card { border-color: var(--admin-line); border-radius: var(--admin-radius); background: var(--admin-panel); box-shadow: inset 0 1px rgba(255, 255, 255, .045); }
.two-columns, .cape-layout, .crate-workspace, .wiki-workspace { gap: 14px; margin-top: 22px; }
.two-columns { grid-template-columns: minmax(320px, .92fr) minmax(320px, 1.08fr); }
.narrow { margin-top: 22px; }
.section-heading { gap: 10px; margin-bottom: 15px; }
h2 { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: 14px; font-weight: 800; letter-spacing: -.025em; }
.hint { color: #9690a8; font-size: 10px; line-height: 1.5; }

form { gap: 11px; }
label { gap: 5px; color: #d3cde4; font-size: 9px; letter-spacing: .055em; }
input, textarea, select { min-height: 36px; border-color: var(--admin-line); border-radius: 7px; background: var(--admin-control); color: var(--admin-text); font-size: 11px; }
textarea { min-height: 172px; }
input:focus, textarea:focus, select:focus { border-color: rgba(87, 215, 255, .68); box-shadow: 0 0 0 3px rgba(87, 215, 255, .10); }

/* Only a form's action button is a primary CTA. Nested controls (the rich
   text toolbar, colour swatches and inline actions) stay compact tools. */
form > button:not(.quiet-button):not(.danger-button) {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(148, 237, 255, .52);
  border-radius: 7px;
  background: linear-gradient(95deg, #38cbed, #8358e6);
  font-size: 9px;
  letter-spacing: .08em;
  transition: filter 160ms ease, transform 160ms var(--admin-ease), border-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  form > button:not(.quiet-button):not(.danger-button):hover { filter: brightness(1.07); transform: translateY(-1px); }
}

form > button:not(.quiet-button):not(.danger-button):active { transform: scale(.98); }

.quiet-button, .danger-button {
  min-height: 32px;
  padding: 0 10px;
  border-color: var(--admin-line);
  border-radius: 7px;
  background: transparent;
  color: #bdeeff;
  font-size: 8px;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms var(--admin-ease);
}

.danger-button { border-color: rgba(255, 99, 126, .42); color: #ffb4c3; }

@media (hover: hover) and (pointer: fine) {
  .quiet-button:hover { border-color: rgba(87, 215, 255, .62); background: rgba(87, 215, 255, .09); color: #effdff; }
  .danger-button:hover { border-color: rgba(255, 99, 126, .78); background: rgba(255, 99, 126, .10); color: #ffe4ea; }
}

.quiet-button:active, .danger-button:active { transform: scale(.97); }

.mods-workspace { gap: 13px; margin-top: 22px; }
.mods-upload-card { gap: 20px; padding: 18px 20px; border-color: rgba(87, 215, 255, .22); background: linear-gradient(90deg, rgba(20, 55, 84, .46), rgba(44, 22, 91, .44)); }
.mods-upload-card form { gap: 10px; }
.mods-catalog { padding: 19px; }
.mods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mod-card { min-height: 124px; gap: 10px; padding: 12px; border-color: var(--admin-line); border-radius: 8px; background: rgba(255, 255, 255, .022); transition: border-color 150ms ease, background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .mod-card:hover { border-color: rgba(87, 215, 255, .48); background: rgba(87, 215, 255, .045); } }
.mod-card b { font-size: 11px; }
.mod-card small { font-size: 9px; }
.mod-card .row-actions { gap: 5px; }

.cape-layout { grid-template-columns: minmax(270px, .78fr) minmax(290px, .84fr) minmax(310px, 1.08fr); }
.crate-workspace { grid-template-columns: minmax(520px, 1.32fr) minmax(290px, .68fr); }
.crate-side { padding: 0; border: 0; background: transparent; }
.preview-card, .crate-editor, .wiki-editor { background: var(--admin-raised); }
#cape-preview { border-color: var(--admin-line); border-radius: 8px; background: #0a061a; box-shadow: none; }
.visual-list { gap: 8px; }
.visual-row, .list-item, .user-card, .report-card { border-color: var(--admin-line); border-radius: 8px; background: rgba(255, 255, 255, .022); box-shadow: none; }
.list-item { padding: 12px; }
.catalogue-thumb, .crate-catalogue-thumb { border-color: rgba(87, 215, 255, .26); border-radius: 7px; background: #090518; }

.crate-rewards-editor { border-top-color: var(--admin-line); }
.crate-reward-grid { gap: 7px; }
.crate-reward { min-height: 80px; padding: 8px; border-color: var(--admin-line); border-radius: 8px; background: rgba(255, 255, 255, .02); transition: border-color 150ms ease, background-color 150ms ease; }
.crate-reward:hover, .crate-reward.selected { border-color: rgba(87, 215, 255, .48); background: rgba(87, 215, 255, .065); box-shadow: none; }
.crate-reward > img { border-radius: 6px; background: #090518; }

.quest-objective, .rule-item-editor { border-color: var(--admin-line); border-radius: 8px; background: rgba(255, 255, 255, .022); }
.quest-row, .wiki-row { border-radius: 8px; }

.wiki-admin-hero { align-items: end; }
.wiki-admin-hero-note { max-width: 250px; padding: 12px 14px; border-color: var(--admin-line); border-radius: 8px; background: rgba(255, 255, 255, .035); color: #b6b0c7; }
.wiki-admin-hero-note b { color: #d6d1e9; }
.wiki-workspace { grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.1fr); }
.wiki-editor { top: 16px; }
.wiki-admin-list .wiki-row { border-color: var(--admin-line); border-radius: 8px; background: rgba(255, 255, 255, .022); }

.rich-editor { border-color: var(--admin-line); border-radius: 8px; background: var(--admin-control); }
.rich-editor:focus-within { border-color: rgba(87, 215, 255, .68); box-shadow: 0 0 0 3px rgba(87, 215, 255, .10); }

/* The toolbar lives inside a form, so it needs to explicitly opt out of the
   primary submit-button treatment above. It is an editing instrument, not a CTA. */
form .rich-editor .rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-bottom-color: var(--admin-line);
  background: rgba(255, 255, 255, .035);
}

form .rich-editor .rich-toolbar button {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--admin-line);
  border-radius: 5px;
  background: rgba(8, 5, 22, .64);
  box-shadow: none;
  color: #e9e4ff;
  cursor: pointer;
  filter: none;
  font: 800 11px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms var(--admin-ease);
}

form .rich-editor .rich-toolbar select {
  width: auto;
  min-width: 68px;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-color: var(--admin-line);
  border-radius: 5px;
  background: rgba(8, 5, 22, .64);
  color: #d7d1e8;
  font-size: 10px;
}

form .rich-editor .rich-toolbar button.rich-color {
  background: rgba(8, 5, 22, .64);
}

form .rich-editor .rich-toolbar button.rich-color::after {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 0 8px var(--rich-color);
}

@media (hover: hover) and (pointer: fine) {
  form .rich-editor .rich-toolbar button:hover {
    border-color: rgba(87, 215, 255, .64);
    background: rgba(87, 215, 255, .08);
    color: #fff;
    filter: none;
    transform: none;
  }
}

form .rich-editor .rich-toolbar button:active { transform: scale(.94); }
.rich-content { min-height: 145px; font-size: 12px; }
.rule-callout-field { border-radius: 8px; }

.users-toolbar { max-width: 800px; gap: 9px; margin-top: 22px; padding: 14px; }
.users-toolbar button { height: 36px; }
.users-list { gap: 8px; margin-top: 13px; }
.user-card { gap: 13px; padding: 14px; }
.owned-cape { border-color: rgba(87, 215, 255, .22); border-radius: 6px; background: rgba(87, 215, 255, .07); }
.pagination { margin-top: 16px; }

.reports-list { gap: 10px; margin-top: 22px; }
.report-card { gap: 10px; padding: 14px; }
.report-card header { color: inherit; }
.report-card header b { color: var(--admin-text); }
.report-card details { border-top-color: var(--admin-line); }
.report-card pre { border-color: var(--admin-line); border-radius: 7px; background: rgba(5, 3, 16, .72); }
.scan-control { border-top-color: var(--admin-line); }
.scan-columns section { border-color: var(--admin-line); border-radius: 7px; background: rgba(255, 255, 255, .02); }

#toast { right: 24px; bottom: 24px; border-color: rgba(87, 215, 255, .42); border-radius: 8px; background: rgba(20, 12, 47, .96); box-shadow: 0 14px 32px rgba(0, 0, 0, .32); transition: opacity 180ms ease, transform 180ms var(--admin-ease); }

@media (max-width: 1250px) { .mods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .content { padding: 0 28px 38px; } .mods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cape-layout, .crate-workspace { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .app-sidebar nav button, .quiet-button, .danger-button, form > button:not(.quiet-button):not(.danger-button) { transition-duration: 1ms; } }