:root {
  --velvet: #100709;
  --wine: #2d0f16;
  --ink: #201315;
  --gold: #f0ce73;
  --old-gold: #b88a31;
  --paper: #edd7a4;
  --paper-deep: #c29c55;
  --cream: #fff2c8;
  --night: #16080d;
  --potion: #1b6b5d;
  --shadow: rgba(29, 12, 10, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 10%, rgba(240, 206, 115, 0.22), transparent 22rem),
    radial-gradient(circle at 88% 74%, rgba(33, 145, 126, 0.16), transparent 24rem),
    linear-gradient(135deg, #030303 0%, #15070b 48%, #020202 100%);
}

body.auth-locked .app-shell {
  display: none;
}

body.auth-locked .app-navigation,
body.auth-locked .calculator-shell,
body.auth-locked .requests-shell,
body.auth-locked .home-shell,
body.auth-locked .module-shell,
body.auth-locked .admin-shell {
  display: none;
}

body:not(.auth-locked) .auth-screen {
  display: none;
}

button,
input,
select {
  font: inherit;
}

.auth-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.auth-card {
  display: grid;
  gap: 14px;
  width: min(430px, 100%);
  border: 1px solid rgba(240, 206, 115, 0.48);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 12%, rgba(240, 206, 115, 0.2), transparent 12rem),
    linear-gradient(145deg, #fff4ca, #e6d09a);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
  padding: 28px;
}

.auth-card img {
  width: 86px;
  height: 86px;
  justify-self: center;
}

.auth-card h1 {
  text-align: center;
  font-size: 1.7rem;
}

.auth-message {
  min-height: 1.25rem;
  margin: 0;
  color: #7a1828;
  font-size: 0.88rem;
  font-weight: 800;
}

.app-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(1480px, calc(100% - 48px));
  margin: 18px auto 0;
}

.home-shell,
.module-shell {
  display: grid;
  gap: 20px;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.welcome-panel,
.announcement-panel,
.module-panel {
  border: 1px solid rgba(240, 206, 115, 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 242, 200, 0.97), rgba(226, 202, 147, 0.95));
  box-shadow: 0 24px 70px rgba(29, 12, 10, 0.3);
  padding: 22px;
}

.welcome-panel {
  background:
    radial-gradient(circle at 85% 20%, rgba(27, 107, 93, 0.2), transparent 20rem),
    linear-gradient(135deg, #fff2c8, #d7b96f);
}

.module-heading {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(75, 16, 32, 0.18);
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.module-heading h1,
.module-heading h2 {
  margin: 0;
}

.announcement-form,
.inventory-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(110px, 160px)) auto;
  gap: 10px;
  margin-bottom: 16px;
}

.announcement-form {
  grid-template-columns: 1fr auto;
}

.announcement-form textarea {
  grid-column: 1 / -1;
}

.announcement-list,
.inventory-list,
#issuedLicenseList,
#expiringLicenseList {
  display: grid;
  gap: 9px;
}

.announcement,
.registry-row,
.inventory-row {
  border: 1px solid rgba(75, 16, 32, 0.14);
  background: rgba(255, 255, 255, 0.36);
  padding: 12px;
}

.announcement h3,
.announcement p {
  margin: 0 0 7px;
}

.announcement footer,
.registry-row span,
.inventory-row span {
  color: rgba(53, 16, 24, 0.65);
  font-size: 0.72rem;
}

.license-registry-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(420px, 1.3fr);
  gap: 18px;
}

.registry-row strong,
.registry-row span,
.registry-row p {
  display: block;
  margin: 0 0 4px;
}

.inventory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inventory-row > strong {
  color: #6c1929;
  font-family: Cinzel, serif;
  font-size: 1.35rem;
}

.member-transfer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.member-drop-list {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 150px;
  border: 1px dashed rgba(75, 16, 32, 0.35);
  background: rgba(255, 255, 255, 0.28);
  padding: 9px;
}

.member-drop-list.assigned {
  background: rgba(27, 107, 93, 0.08);
}

.member-chip {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(75, 16, 32, 0.2);
  border-radius: 5px;
  background: #fff9e8;
  color: #351018;
  cursor: grab;
  padding: 9px;
}

.member-chip span {
  font-size: 0.7rem;
}

.request-tabs {
  display: flex;
  gap: 8px;
}

.request-tab {
  border: 1px solid rgba(75, 16, 32, 0.25);
  border-radius: 5px;
  background: #fff9e8;
  color: #5b2930;
  cursor: pointer;
  padding: 9px 12px;
  font-weight: 900;
}

.request-tab.active {
  background: #4b1020;
  color: #fff2c8;
}

.complete-request-button {
  width: 100%;
  margin-top: 10px;
}

.completion-summary {
  border-top: 1px solid rgba(75, 16, 32, 0.15);
  margin-top: 10px;
  padding-top: 9px;
}

.completion-dialog {
  width: min(620px, calc(100% - 24px));
  border: 1px solid rgba(240, 206, 115, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff2c8, #dfc588);
  color: #351018;
  padding: 0;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
}

.completion-dialog::backdrop {
  background: rgba(6, 3, 4, 0.78);
}

.completion-dialog form {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.app-nav-button {
  min-height: 42px;
  border: 1px solid rgba(240, 206, 115, 0.38);
  border-radius: 6px;
  background: rgba(10, 7, 8, 0.72);
  color: rgba(255, 242, 200, 0.72);
  cursor: pointer;
  padding: 0 16px;
  font-weight: 900;
}

.app-nav-button.active {
  border-color: rgba(240, 206, 115, 0.82);
  background: linear-gradient(180deg, #7c1f31, #3e0b17);
  color: #fff2c8;
}

.app-view[hidden] {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(310px, 430px) minmax(340px, 1fr);
  gap: 24px;
  width: min(1480px, 100%);
  min-height: calc(100vh - 60px);
  margin: 0 auto;
  padding: 24px;
}

.calculator-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
  align-items: start;
  gap: 20px;
  width: min(1480px, 100%);
  min-height: calc(100vh - 60px);
  margin: 0 auto;
  padding: 24px;
}

.requests-shell {
  display: grid;
  grid-template-columns: minmax(420px, 0.86fr) minmax(520px, 1.14fr);
  align-items: start;
  gap: 20px;
  width: min(1480px, 100%);
  min-height: calc(100vh - 60px);
  margin: 0 auto;
  padding: 24px;
}

.request-create-panel,
.request-archive-panel {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(240, 206, 115, 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 242, 200, 0.97), rgba(226, 202, 147, 0.95));
  box-shadow: 0 24px 70px rgba(29, 12, 10, 0.3);
  padding: 20px;
}

.request-create-panel {
  position: sticky;
  top: 20px;
}

.request-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.18);
  padding-bottom: 14px;
}

.request-heading h1 {
  margin: 0;
  color: var(--velvet);
  font-family: Cinzel, Georgia, serif;
  font-size: 1.35rem;
}

.request-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.request-wide-field,
.request-basket-preview {
  grid-column: 1 / -1;
}

.request-basket-preview {
  border: 1px solid rgba(75, 16, 32, 0.2);
  background: rgba(255, 249, 232, 0.46);
}

.request-basket-preview > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.16);
  padding: 10px 12px;
  color: #4b1020;
}

#requestBasketPreview {
  display: grid;
  max-height: 260px;
  overflow-y: auto;
}

.clear-request-basket {
  width: calc(100% - 24px);
  margin: 10px 12px 12px;
  border-color: rgba(216, 180, 91, 0.3);
  background: #101714;
  color: #e7d69f;
}

.request-basket-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.1);
  padding: 8px 12px;
  color: #351018;
  font-size: 0.78rem;
}

.request-basket-potion > p {
  margin: 0;
  border-bottom: 1px solid rgba(75, 16, 32, 0.1);
  color: rgba(53, 16, 24, 0.65);
  padding: 0 12px 9px;
  font-size: 0.68rem;
  line-height: 1.45;
}

.request-list {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 175px);
  overflow-y: auto;
}

.request-file {
  border: 1px solid rgba(75, 16, 32, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 45%),
    rgba(255, 249, 232, 0.58);
  box-shadow: inset 4px 0 #6c1929;
  padding: 14px 16px 14px 20px;
}

.request-file header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 2px double rgba(75, 16, 32, 0.22);
  padding-bottom: 10px;
}

.request-file header span {
  color: #7a1828;
  font-size: 0.72rem;
  font-weight: 900;
}

.request-file h2 {
  margin: 3px 0 0;
  color: #351018;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
}

.request-file header > strong {
  color: #6c1929;
  white-space: nowrap;
}

.request-file dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.request-file dl div {
  border-left: 2px solid rgba(75, 16, 32, 0.2);
  padding-left: 8px;
}

.request-file dt {
  color: rgba(53, 16, 24, 0.58);
  font-size: 0.62rem;
  font-weight: 900;
}

.request-file dd {
  margin: 2px 0 0;
  color: #351018;
  font-size: 0.78rem;
  font-weight: 800;
}

.request-reason {
  border: 1px solid rgba(75, 16, 32, 0.12);
  background: rgba(255, 255, 255, 0.24);
  color: #4b1020;
  margin: 0 0 12px;
  padding: 9px;
  font-size: 0.8rem;
  line-height: 1.45;
}

.request-file section {
  display: grid;
  gap: 3px;
  color: #351018;
  font-size: 0.75rem;
}

.request-file section p {
  margin: 0 0 7px;
  color: rgba(53, 16, 24, 0.72);
  line-height: 1.4;
}

.request-file footer {
  border-top: 1px solid rgba(75, 16, 32, 0.14);
  color: #6c1929;
  margin-top: 8px;
  padding-top: 8px;
  font-size: 0.72rem;
  font-weight: 900;
}

.calculator-catalog,
.calculator-summary {
  border: 1px solid rgba(240, 206, 115, 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 242, 200, 0.97), rgba(226, 202, 147, 0.95));
  box-shadow: 0 24px 70px rgba(29, 12, 10, 0.3);
}

.calculator-catalog {
  padding: 20px;
}

.calculator-summary {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 14px;
  padding: 20px;
}

.calculator-heading,
.summary-heading {
  color: var(--velvet);
}

.calculator-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.18);
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.calculator-heading h1,
.summary-heading h2 {
  margin: 0;
}

.calculator-heading h1 {
  font-size: 1.65rem;
}

.summary-heading h2 {
  font-family: Cinzel, Georgia, serif;
  font-size: 1.25rem;
}

.material-count {
  border: 1px solid rgba(75, 16, 32, 0.2);
  border-radius: 999px;
  color: #5b2930;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.material-search {
  margin-bottom: 14px;
}

.add-material-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px auto;
  align-items: end;
  gap: 10px;
  border: 1px solid rgba(75, 16, 32, 0.18);
  background: rgba(255, 249, 232, 0.42);
  margin-bottom: 14px;
  padding: 12px;
}

.add-material-form[hidden] {
  display: none;
}

.add-material-form .auth-message {
  grid-column: 1 / -1;
}

.catalog-header,
.material-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 86px 86px 40px;
  align-items: center;
  gap: 10px;
}

.catalog-header {
  color: rgba(75, 16, 32, 0.68);
  padding: 0 10px 7px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.add-material-form {
  border-color: rgba(216, 180, 91, 0.2);
  background: #141a18;
}

.add-material-form label > span {
  color: #d9e2dd;
}

.material-catalog {
  display: grid;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  border: 1px solid rgba(75, 16, 32, 0.16);
}

.material-row {
  min-height: 49px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.12);
  background: rgba(255, 249, 232, 0.48);
  padding: 7px 10px;
}

.material-row:nth-child(even) {
  background: rgba(112, 76, 33, 0.05);
}

.material-row:last-child {
  border-bottom: 0;
}

.material-row strong {
  color: #351018;
  font-size: 0.9rem;
}

.material-price {
  color: #6c1929;
  font-weight: 900;
  text-align: right;
}

.catalog-quantity,
.selected-quantity {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(75, 16, 32, 0.24);
  border-radius: 5px;
  background: #fff9e8;
  color: #241719;
  padding: 7px;
}

.add-material-button,
.remove-material-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 900;
}

.add-material-button {
  border: 1px solid #4b1020;
  background: #4b1020;
  color: #fff2c8;
}

.remove-material-button {
  border: 1px solid rgba(122, 24, 40, 0.36);
  background: transparent;
  color: #7a1828;
}

.selected-materials {
  display: grid;
  gap: 8px;
  max-height: 440px;
  overflow-y: auto;
}

.selected-material-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 74px 32px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.14);
  padding: 8px 0;
}

.selected-material-row div {
  min-width: 0;
}

.selected-material-row strong,
.selected-material-row span {
  display: block;
}

.selected-material-row strong {
  color: #351018;
  font-size: 0.84rem;
}

.selected-material-row span {
  color: rgba(53, 16, 24, 0.62);
  font-size: 0.7rem;
}

.selected-line-total {
  text-align: right;
}

.selected-potion-row {
  border: 1px solid rgba(75, 16, 32, 0.25);
  background: rgba(255, 249, 232, 0.52);
}

.selected-potion-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 32px;
  align-items: center;
  gap: 8px;
  background: rgba(75, 16, 32, 0.08);
  padding: 9px;
}

.selected-potion-heading strong,
.selected-potion-heading span {
  display: block;
}

.selected-potion-heading strong {
  color: #351018;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.84rem;
}

.selected-potion-heading span {
  color: #7a1828;
  font-size: 0.72rem;
  font-weight: 900;
}

.selected-potion-quantity {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(75, 16, 32, 0.24);
  border-radius: 5px;
  background: #fff9e8;
  padding: 6px;
}

.remove-potion-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(122, 24, 40, 0.36);
  border-radius: 50%;
  background: transparent;
  color: #7a1828;
  cursor: pointer;
  font-weight: 900;
}

.selected-potion-ingredients {
  display: grid;
}

.selected-potion-ingredients > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  border-top: 1px solid rgba(75, 16, 32, 0.1);
  padding: 6px 9px;
  color: rgba(53, 16, 24, 0.76);
  font-size: 0.69rem;
}

.selected-potion-ingredients strong {
  color: #6c1929;
}

.selected-potion-ingredients small {
  color: rgba(53, 16, 24, 0.56);
  font-weight: 700;
}

.selected-potion-ingredients .missing-price {
  background: rgba(122, 24, 40, 0.08);
}

.empty-calculation {
  margin: 0;
  color: rgba(53, 16, 24, 0.6);
  padding: 16px 0;
  text-align: center;
}

.calculation-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 3px double rgba(75, 16, 32, 0.38);
  padding-top: 12px;
  color: var(--velvet);
  font-family: Cinzel, Georgia, serif;
  font-weight: 900;
}

.calculation-total strong {
  font-size: 1.45rem;
}

.recipe-calculator {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(75, 16, 32, 0.24);
  background: rgba(255, 249, 232, 0.44);
  padding: 12px;
}

.recipe-calculator-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recipe-calculator-heading > span {
  color: #4b1020;
  font-family: Cinzel, Georgia, serif;
  font-weight: 900;
}

.recipe-calculator-heading small {
  border: 1px solid rgba(75, 16, 32, 0.2);
  border-radius: 999px;
  color: #6c1929;
  padding: 4px 7px;
  font-weight: 900;
}

.potion-recipe-details {
  display: grid;
  max-height: 255px;
  overflow-y: auto;
  border: 1px solid rgba(75, 16, 32, 0.14);
}

.potion-ingredient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 88px;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.1);
  padding: 6px 8px;
  font-size: 0.78rem;
}

.potion-ingredient-row:last-child {
  border-bottom: 0;
}

.potion-ingredient-row strong {
  color: #4b1020;
  text-align: center;
}

.potion-ingredient-row span:last-child {
  color: #6c1929;
  font-weight: 900;
  text-align: right;
}

.potion-ingredient-row.missing-price {
  background: rgba(122, 24, 40, 0.08);
}

.potion-ingredient-row.missing-price span:last-child {
  color: #a10f2d;
}

.potion-cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.potion-cost-grid div {
  border: 1px solid rgba(75, 16, 32, 0.18);
  background: rgba(255, 255, 255, 0.32);
  padding: 9px;
}

.potion-cost-grid span,
.potion-cost-grid strong {
  display: block;
}

.potion-cost-grid span {
  color: rgba(53, 16, 24, 0.66);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.potion-cost-grid strong {
  color: #4b1020;
  font-family: Cinzel, Georgia, serif;
  margin-top: 4px;
}

.potion-price-warning {
  min-height: 0;
  margin: 0;
  color: #9a1730;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

.control-panel,
.preview-panel {
  border: 1px solid rgba(217, 184, 93, 0.36);
  background: linear-gradient(180deg, rgba(255, 242, 200, 0.96), rgba(237, 215, 164, 0.93));
  box-shadow: 0 24px 70px var(--shadow);
}

.control-panel {
  overflow-y: auto;
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 8px;
}

.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.16);
  margin-bottom: 16px;
  padding-bottom: 12px;
}

#currentUserLabel {
  color: #4b1020;
  font-weight: 900;
}

.compact-action {
  min-height: 34px;
  padding: 0 10px;
}

.admin-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(75, 16, 32, 0.2);
  border-radius: 8px;
  background: rgba(255, 249, 232, 0.66);
  margin-bottom: 18px;
  padding: 14px;
}

.admin-shell {
  display: grid;
  grid-template-columns: minmax(560px, 1.15fr) minmax(380px, 0.85fr);
  align-items: start;
  gap: 20px;
  width: min(1480px, 100%);
  min-height: calc(100vh - 60px);
  margin: 0 auto;
  padding: 24px;
}

.admin-shell .admin-panel,
.activity-panel {
  display: grid;
  gap: 16px;
  margin: 0;
  border: 1px solid rgba(240, 206, 115, 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 242, 200, 0.97), rgba(226, 202, 147, 0.95));
  box-shadow: 0 24px 70px rgba(29, 12, 10, 0.3);
  padding: 20px;
}

.admin-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.18);
  padding-bottom: 14px;
}

.admin-heading h1 {
  margin: 0;
  color: var(--velvet);
  font-family: Cinzel, Georgia, serif;
  font-size: 1.35rem;
}

.admin-panel[hidden] {
  display: none;
}

.admin-panel h2 {
  margin: 0;
  color: var(--velvet);
  font-size: 1.1rem;
}

.admin-create-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-create-form .primary-action {
  grid-column: 1 / -1;
}

.user-list {
  display: grid;
  gap: 8px;
}

.user-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 110px 165px 140px auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(75, 16, 32, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  padding: 9px 10px;
}

.user-row strong {
  display: block;
  color: #351018;
}

.user-row span {
  color: rgba(53, 16, 24, 0.72);
  font-size: 0.78rem;
}

.user-role-select,
.user-access-select,
.user-password-input {
  min-width: 0;
  width: 100%;
}

.activity-list {
  display: grid;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  border: 1px solid rgba(75, 16, 32, 0.14);
  background: rgba(255, 249, 232, 0.42);
}

.activity-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(75, 16, 32, 0.12);
  padding: 11px 12px;
}

.activity-row:last-child {
  border-bottom: 0;
}

.activity-row strong,
.activity-row span {
  display: block;
}

.activity-row strong {
  color: #351018;
}

.activity-row span {
  color: #6c1929;
  font-size: 0.82rem;
  font-weight: 900;
}

.activity-row p {
  margin: 3px 0 0;
  color: rgba(53, 16, 24, 0.68);
  font-size: 0.76rem;
}

.activity-row time {
  flex: 0 0 auto;
  color: rgba(53, 16, 24, 0.58);
  font-size: 0.7rem;
  white-space: nowrap;
}

.danger-action {
  min-height: 32px;
  border: 1px solid rgba(122, 24, 40, 0.42);
  border-radius: 6px;
  background: #fff5e8;
  color: #7a1828;
  cursor: pointer;
  font-weight: 900;
  padding: 0 10px;
}

.panel-heading {
  border-bottom: 1px solid rgba(75, 16, 32, 0.2);
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.eyebrow,
.preview-toolbar,
legend,
dt,
.card-footer span {
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--wine);
  font-size: 0.78rem;
  font-weight: 800;
}

h1,
h2,
h3 {
  font-family: Cinzel, Georgia, serif;
}

h1 {
  margin: 0;
  color: var(--velvet);
  font-size: 1.9rem;
}

.license-form {
  display: grid;
  gap: 18px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

label,
.license-picker,
.mode-picker {
  display: grid;
  gap: 7px;
}

label span,
legend {
  color: #5b2930;
  font-size: 0.83rem;
  font-weight: 800;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(75, 16, 32, 0.28);
  border-radius: 6px;
  background: #fff9e8;
  color: var(--ink);
  padding: 11px 12px;
}

textarea {
  resize: vertical;
}

.mode-picker {
  min-width: 0;
  border: 1px solid rgba(75, 16, 32, 0.18);
  border-radius: 8px;
  margin: 0;
  padding: 12px;
}

.mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mode-options label {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  border: 1px solid rgba(75, 16, 32, 0.18);
  border-radius: 6px;
  background: rgba(255, 249, 232, 0.72);
  color: #4b1020;
  padding: 9px;
  font-weight: 800;
}

.mode-options label[hidden],
.announcement-form[hidden] {
  display: none !important;
}

.mode-options input {
  accent-color: var(--wine);
}

input:focus {
  outline: 2px solid rgba(199, 164, 75, 0.5);
  border-color: var(--gold);
}

.signature-field {
  width: 100%;
}

.license-picker {
  min-width: 0;
  border: 1px solid rgba(75, 16, 32, 0.18);
  border-radius: 8px;
  margin: 0;
  padding: 14px;
}

.license-options {
  display: grid;
  gap: 9px;
}

.license-option {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 9px;
  color: #321c1e;
  line-height: 1.35;
  padding: 10px 12px;
  border: 1px solid rgba(199, 164, 75, 0.24);
  background: rgba(255, 255, 255, 0.38);
}

.license-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--wine);
}

.license-option-copy {
  display: grid;
  gap: 3px;
}

.license-option-copy strong {
  color: #241a16;
  font-size: 0.94rem;
}

.license-option-copy small {
  color: #6e5733;
  font-size: 0.8rem;
  font-weight: 800;
}

.license-fee-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 13px 14px;
  border-top: 1px solid rgba(199, 164, 75, 0.42);
  color: #3d3022;
  font-weight: 800;
}

.license-fee-summary strong {
  color: #0b604a;
  font-family: Cinzel, serif;
  font-size: 1.25rem;
  white-space: nowrap;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.primary-action,
.secondary-action {
  min-height: 44px;
  border-radius: 6px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 800;
}

.primary-action {
  border: 1px solid #350a15;
  background: linear-gradient(180deg, #7c1f31, #4b1020);
  color: #fff7dc;
}

.secondary-action {
  border: 1px solid rgba(75, 16, 32, 0.28);
  background: #fff6dd;
  color: var(--velvet);
}

.preview-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  overflow: auto;
  padding: 18px;
  border-radius: 8px;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--velvet);
  font-size: 0.82rem;
  font-weight: 800;
}

.status-dot {
  border: 1px solid rgba(122, 29, 45, 0.3);
  border-radius: 999px;
  padding: 5px 10px;
}

.magic-card {
  position: relative;
  overflow: hidden;
  width: min(860px, 100%);
  margin: 0 auto;
  border: 2px solid rgba(240, 206, 115, 0.92);
  border-radius: 8px;
  min-height: 0;
  padding: 19px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 16px),
    linear-gradient(45deg, rgba(240, 206, 115, 0.07) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 72% 18%, rgba(41, 173, 149, 0.2), transparent 12rem),
    radial-gradient(circle at 35% 110%, rgba(240, 206, 115, 0.22), transparent 17rem),
    linear-gradient(118deg, rgba(255, 255, 255, 0.2), transparent 18%, rgba(255, 235, 170, 0.14) 45%, transparent 62%),
    linear-gradient(145deg, #09090a 0%, #151011 42%, #020203 100%);
  background-size: 18px 18px, 20px 20px, auto, auto, auto, auto;
  color: var(--cream);
  box-shadow:
    inset 0 0 0 7px rgba(240, 206, 115, 0.09),
    inset 0 0 70px rgba(0, 0, 0, 0.58),
    0 30px 80px rgba(0, 0, 0, 0.42);
}

.magic-card.member-mode {
  border-color: rgba(250, 219, 129, 0.98);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 15px),
    radial-gradient(circle at 18% 16%, rgba(250, 219, 129, 0.24), transparent 12rem),
    radial-gradient(circle at 84% 18%, rgba(62, 194, 162, 0.22), transparent 13rem),
    linear-gradient(118deg, rgba(255, 255, 255, 0.26), transparent 16%, rgba(255, 235, 170, 0.18) 48%, transparent 68%),
    linear-gradient(145deg, #030303 0%, #111918 42%, #010101 100%);
  box-shadow:
    inset 0 0 0 7px rgba(250, 219, 129, 0.11),
    inset 0 0 78px rgba(0, 0, 0, 0.7),
    0 30px 90px rgba(0, 0, 0, 0.48);
}

.member-mode .card-header {
  border-bottom-color: rgba(250, 219, 129, 0.82);
}

.member-mode .card-body {
  grid-template-columns: 176px 1fr;
}

.member-mode .photo-frame {
  height: 230px;
  border-color: rgba(250, 219, 129, 0.88);
}

.rank-preview-item {
  border-color: rgba(250, 219, 129, 0.42) !important;
  background: linear-gradient(180deg, rgba(250, 219, 129, 0.14), rgba(0, 0, 0, 0.22)) !important;
}

.magic-card::before,
.magic-card::after {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  border: 1px solid rgba(240, 206, 115, 0.7);
}

.magic-card::after {
  inset: 21px;
  border-color: rgba(255, 238, 173, 0.44);
}

.corner {
  position: absolute;
  z-index: 2;
  width: 82px;
  height: 82px;
  border-color: rgba(240, 206, 115, 0.88);
  opacity: 0.86;
}

.corner::before,
.corner::after {
  content: none;
}

.corner::before {
  inset: 12px;
}

.corner::after {
  inset: 30px;
}

.corner-tl {
  top: 14px;
  left: 14px;
  border-top: 3px double;
  border-left: 3px double;
}

.corner-tr {
  top: 14px;
  right: 14px;
  border-top: 3px double;
  border-right: 3px double;
}

.corner-bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 3px double;
  border-left: 3px double;
}

.corner-br {
  right: 14px;
  bottom: 14px;
  border-right: 3px double;
  border-bottom: 3px double;
}

.card-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 12px;
  border-bottom: 2px double rgba(217, 184, 93, 0.66);
  padding: 4px 10px 10px 4px;
  text-align: center;
}

.ministry-logo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  filter: drop-shadow(0 0 16px rgba(217, 184, 93, 0.28));
}

.card-header p {
  margin: 0;
  color: #ffe4a3;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 900;
}

.card-header h2 {
  margin: 4px 0 0;
  color: #e0b75f;
  font-size: clamp(0.95rem, 1.3vw, 1.14rem);
}

.card-body {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 158px 1fr;
  gap: 16px;
  padding-top: 12px;
}

.identity-column {
  display: grid;
  align-content: start;
}

.photo-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  height: 192px;
  aspect-ratio: auto;
  border: 2px solid rgba(217, 184, 93, 0.72);
  background:
    linear-gradient(135deg, rgba(217, 184, 93, 0.11) 25%, transparent 25% 50%, rgba(217, 184, 93, 0.11) 50% 75%, transparent 75%),
    linear-gradient(180deg, #2c1017, #14080c);
  background-size: 18px 18px;
  color: rgba(255, 232, 164, 0.66);
  font-family: Cinzel, serif;
  font-weight: 900;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.28) contrast(1.05) saturate(0.9);
}

.detail-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.detail-list div {
  border: 1px solid rgba(217, 184, 93, 0.22);
  background: rgba(20, 8, 12, 0.26);
  min-width: 0;
  padding: 8px 10px;
}

dt {
  color: rgba(255, 229, 163, 0.58);
  font-size: 0.66rem;
  font-weight: 900;
}

dd {
  overflow-wrap: anywhere;
  margin: 4px 0 0;
  color: #fff0bb;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 800;
}

.card-license-block {
  position: relative;
  z-index: 3;
  margin-top: 10px;
}

.member-authority-block {
  position: relative;
  z-index: 3;
  margin-top: 12px;
}

.member-authority-block[hidden],
.rank-preview-item[hidden],
.rank-field[hidden],
.profession-preview-item[hidden],
.license-form label[hidden],
.license-picker[hidden],
.card-license-block[hidden] {
  display: none;
}

#professionPreviewItem[hidden],
#professionField[hidden] {
  display: none;
}

.member-authority-block h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #ffe4a3;
  font-size: 0.98rem;
}

.member-authority-block h3::before,
.member-authority-block h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 206, 115, 0.78), transparent);
}

.rank-insignia {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(240, 206, 115, 0.48);
  background:
    radial-gradient(circle at 14% 50%, rgba(41, 173, 149, 0.22), transparent 8rem),
    linear-gradient(180deg, rgba(250, 219, 129, 0.1), rgba(0, 0, 0, 0.28));
  padding: 14px 18px;
}

.rank-insignia > span {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 4px double rgba(250, 219, 129, 0.92);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(41, 173, 149, 0.34), transparent 62%),
    #050806;
  color: #ffe8a4;
  font-family: Cinzel, Georgia, serif;
  font-size: 2.1rem;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(41, 173, 149, 0.24);
}

.member-mode.rank-intern {
  border-color: rgba(185, 157, 93, 0.78);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 20% 18%, rgba(185, 157, 93, 0.18), transparent 12rem),
    linear-gradient(145deg, #14110d 0%, #1e1711 52%, #070605 100%);
  background-size: 26px 26px, 26px 26px, auto, auto;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.56), 0 28px 70px rgba(0, 0, 0, 0.42);
}

.member-mode.rank-intern .detail-list div,
.member-mode.rank-intern .rank-insignia {
  background: rgba(20, 16, 12, 0.62);
  border-color: rgba(185, 157, 93, 0.34);
}

.member-mode.rank-intern .rank-insignia > span {
  width: 80px;
  height: 80px;
  border-width: 2px;
  color: #d6bd79;
  font-size: 1.55rem;
  box-shadow: none;
}

.member-mode.rank-member {
  border-color: rgba(91, 211, 178, 0.72);
  background:
    radial-gradient(circle at 18% 20%, rgba(63, 185, 155, 0.25), transparent 13rem),
    repeating-linear-gradient(135deg, rgba(91, 211, 178, 0.08) 0 1px, transparent 1px 16px),
    linear-gradient(145deg, #03120f 0%, #0b211c 45%, #030605 100%);
}

.member-mode.rank-member .card-header,
.member-mode.rank-member .card-footer,
.member-mode.rank-member .rank-insignia {
  border-color: rgba(91, 211, 178, 0.5);
}

.member-mode.rank-member .rank-insignia {
  background:
    radial-gradient(circle at 14% 50%, rgba(91, 211, 178, 0.26), transparent 8rem),
    rgba(4, 16, 13, 0.74);
}

.member-mode.rank-senior {
  border-width: 3px;
  border-color: rgba(83, 160, 255, 0.72);
  background:
    radial-gradient(circle at 78% 16%, rgba(83, 160, 255, 0.24), transparent 14rem),
    linear-gradient(120deg, rgba(240, 206, 115, 0.15), transparent 28%, rgba(83, 160, 255, 0.14) 58%, transparent),
    repeating-linear-gradient(45deg, rgba(240, 206, 115, 0.08) 0 1px, transparent 1px 18px),
    linear-gradient(145deg, #040914 0%, #101a2a 48%, #020306 100%);
}

.member-mode.rank-senior .detail-list div,
.member-mode.rank-senior .rank-insignia {
  border-color: rgba(83, 160, 255, 0.44);
  background: rgba(5, 12, 24, 0.7);
}

.member-mode.rank-senior .rank-insignia > span {
  border-width: 5px;
  border-color: rgba(240, 206, 115, 0.78);
  box-shadow: 0 0 28px rgba(83, 160, 255, 0.26), 0 0 20px rgba(240, 206, 115, 0.18);
}

.member-mode.rank-deputy {
  border-width: 3px;
  border-color: rgba(177, 124, 255, 0.74);
  background:
    radial-gradient(circle at 16% 18%, rgba(177, 124, 255, 0.3), transparent 13rem),
    radial-gradient(circle at 86% 18%, rgba(240, 206, 115, 0.22), transparent 13rem),
    repeating-linear-gradient(90deg, rgba(177, 124, 255, 0.09) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(240, 206, 115, 0.06) 0 1px, transparent 1px 22px),
    linear-gradient(145deg, #12061c 0%, #21102f 50%, #050208 100%);
  box-shadow:
    inset 0 0 0 8px rgba(177, 124, 255, 0.1),
    inset 0 0 88px rgba(0, 0, 0, 0.68),
    0 36px 100px rgba(0, 0, 0, 0.52);
}

.member-mode.rank-deputy::after {
  inset: 18px;
  border: 2px double rgba(177, 124, 255, 0.58);
}

.member-mode.rank-deputy .rank-insignia {
  border-color: rgba(177, 124, 255, 0.58);
  background:
    radial-gradient(circle at 14% 50%, rgba(177, 124, 255, 0.28), transparent 8rem),
    rgba(16, 6, 24, 0.76);
}

.member-mode.rank-deputy .rank-insignia > span {
  width: 104px;
  height: 104px;
  font-size: 2.28rem;
  border-color: rgba(240, 206, 115, 0.84);
  box-shadow: 0 0 34px rgba(177, 124, 255, 0.3), 0 0 26px rgba(240, 206, 115, 0.22);
}

.member-mode.rank-chief {
  border-width: 4px;
  border-color: rgba(250, 219, 129, 0.98);
  background:
    radial-gradient(circle at 18% 16%, rgba(250, 219, 129, 0.38), transparent 12rem),
    radial-gradient(circle at 84% 18%, rgba(62, 194, 162, 0.3), transparent 13rem),
    radial-gradient(circle at 50% 112%, rgba(250, 219, 129, 0.28), transparent 16rem),
    repeating-conic-gradient(from 45deg, rgba(250, 219, 129, 0.1) 0deg 8deg, transparent 8deg 18deg),
    linear-gradient(118deg, rgba(255, 255, 255, 0.3), transparent 16%, rgba(255, 235, 170, 0.22) 48%, transparent 68%),
    linear-gradient(145deg, #010101 0%, #10201d 42%, #000 100%);
  background-size: auto, auto, auto, 38px 38px, auto, auto;
  box-shadow:
    inset 0 0 0 9px rgba(250, 219, 129, 0.16),
    inset 0 0 92px rgba(0, 0, 0, 0.72),
    0 38px 110px rgba(0, 0, 0, 0.56);
}

.member-mode.rank-chief::before {
  inset: 13px;
  border: 2px solid rgba(250, 219, 129, 0.86);
}

.member-mode.rank-chief::after {
  inset: 20px;
  border: 3px double rgba(250, 219, 129, 0.62);
}

.member-mode.rank-chief .corner {
  width: 96px;
  height: 96px;
  border-width: 4px;
}

.member-mode.rank-chief .rank-insignia {
  border-color: rgba(250, 219, 129, 0.78);
  background:
    radial-gradient(circle at 14% 50%, rgba(41, 173, 149, 0.34), transparent 8rem),
    linear-gradient(180deg, rgba(250, 219, 129, 0.2), rgba(0, 0, 0, 0.3));
}

.member-mode.rank-chief .rank-insignia > span {
  width: 112px;
  height: 112px;
  border-width: 6px;
  font-size: 2.45rem;
  box-shadow: 0 0 40px rgba(240, 206, 115, 0.32), 0 0 32px rgba(41, 173, 149, 0.3);
}

.rank-insignia strong {
  display: block;
  color: #fff0bb;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.45rem;
  margin-bottom: 6px;
}

.rank-insignia p {
  margin: 0;
  color: rgba(255, 238, 190, 0.78);
  font-size: 0.98rem;
  line-height: 1.45;
}

.card-license-block h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 7px;
  color: #ffe4a3;
  font-size: 0.96rem;
}

.card-license-block h3::before,
.card-license-block h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 184, 93, 0.76), transparent);
}

.license-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  width: min(100%, 780px);
  margin: 0 auto;
}

.license-card-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px 15px 1fr;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 3px;
  min-height: 46px;
  border: 1px solid rgba(240, 206, 115, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 237, 172, 0.08), rgba(0, 0, 0, 0.24)),
    rgba(4, 4, 5, 0.62);
  color: rgba(255, 238, 190, 0.82);
  font-size: 0.84rem;
  padding: 5px 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 242, 200, 0.04);
}

.license-card-row::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(240, 206, 115, 0.14);
  pointer-events: none;
}

.license-icon {
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border: 2px double rgba(217, 184, 93, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(27, 107, 93, 0.18), transparent 60%),
    rgba(7, 13, 11, 0.6);
  color: rgba(255, 231, 162, 0.72);
  font-family: Cinzel, serif;
  font-size: 0.72rem;
  font-weight: 900;
}

.license-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.check-box {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(217, 184, 93, 0.52);
  color: transparent;
  font-size: 0.7rem;
  font-weight: 900;
}

.license-title {
  display: -webkit-box;
  overflow: hidden;
  min-height: 0;
  text-align: left;
  line-height: 1.16;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.license-card-row.approved {
  border-color: rgba(217, 184, 93, 0.78);
  background:
    radial-gradient(circle at 84% 22%, rgba(27, 107, 93, 0.34), transparent 3.8rem),
    linear-gradient(180deg, rgba(255, 234, 163, 0.14), rgba(74, 13, 28, 0.24)),
    rgba(18, 8, 11, 0.62);
  color: #fff0ba;
  font-weight: 800;
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 162, 0.13),
    0 0 18px rgba(217, 184, 93, 0.12);
}

.license-card-row.approved .license-icon {
  border-color: rgba(217, 184, 93, 0.8);
  background:
    radial-gradient(circle, rgba(88, 201, 171, 0.3), transparent 60%),
    rgba(9, 22, 18, 0.78);
  color: #ffe7a2;
  box-shadow: 0 0 14px rgba(27, 107, 93, 0.28);
}

.license-card-row.approved .check-box {
  border-color: #e2bf65;
  background: rgba(217, 184, 93, 0.18);
  color: #ffe7a2;
}

.mini-stamp {
  grid-column: 2 / 4;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  border: 1px solid rgba(217, 184, 93, 0.64);
  color: rgba(255, 231, 162, 0.86);
  font-family: Cinzel, serif;
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1;
  padding: 2px 4px;
  transform: rotate(-3deg);
}

.license-card-row:not(.approved) .mini-stamp {
  visibility: hidden;
}

.card-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-top: 3px double rgba(217, 184, 93, 0.54);
  margin-top: 8px;
  padding-top: 8px;
}

.signature-zone {
  min-width: 260px;
  padding: 0 8px 5px;
}

.card-footer strong {
  display: block;
  border-bottom: 1px solid rgba(240, 206, 115, 0.34);
  color: #f5d993;
  font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  font-size: 3rem;
  font-style: italic;
  font-weight: 400;
  line-height: 0.82;
  text-shadow: 0 0 10px rgba(217, 184, 93, 0.16);
  transform: skewX(-10deg) rotate(-1deg);
  transform-origin: left bottom;
}

.approval-ribbon {
  border: 1px solid rgba(217, 184, 93, 0.76);
  background: linear-gradient(180deg, rgba(217, 184, 93, 0.14), rgba(18, 8, 11, 0.28));
  color: #ffe4a3;
  font-family: Cinzel, serif;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 7px 10px;
}

@media (max-width: 1020px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .calculator-shell {
    grid-template-columns: 1fr;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .requests-shell {
    grid-template-columns: 1fr;
  }

  .license-registry-grid {
    grid-template-columns: 1fr;
  }

  .request-create-panel {
    position: static;
  }

  .request-list {
    max-height: none;
  }

  .activity-list {
    max-height: 520px;
  }

  .user-row {
    grid-template-columns: minmax(180px, 1fr) 120px 180px auto auto;
  }

  .calculator-summary {
    position: static;
  }

  .control-panel {
    max-height: none;
  }

  .magic-card {
    min-height: auto;
    aspect-ratio: auto;
  }

  .license-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-navigation {
    width: calc(100% - 24px);
  }

  .app-nav-button {
    flex: 1;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  .app-shell {
    padding: 12px;
  }

  .calculator-shell {
    padding: 12px;
  }

  .admin-shell {
    padding: 12px;
  }

  .requests-shell {
    padding: 12px;
  }

  .home-shell,
  .module-shell {
    padding: 12px;
  }

  .announcement-form,
  .inventory-form,
  .member-transfer {
    grid-template-columns: 1fr;
  }

  .request-form,
  .request-file dl {
    grid-template-columns: 1fr;
  }

  .request-wide-field,
  .request-basket-preview {
    grid-column: auto;
  }

  .admin-create-form,
  .user-row {
    grid-template-columns: 1fr;
  }

  .user-row .compact-action,
  .user-row .danger-action {
    width: 100%;
  }

  .activity-row {
    display: grid;
  }

  .calculator-heading {
    align-items: start;
    flex-direction: column;
  }

  .add-material-form {
    grid-template-columns: 1fr;
  }

  .add-material-form .auth-message {
    grid-column: auto;
  }

  .catalog-header {
    display: none;
  }

  .material-row {
    grid-template-columns: minmax(0, 1fr) 72px 66px 34px;
    gap: 6px;
    padding: 7px;
  }

  .material-row strong {
    font-size: 0.78rem;
  }

  .selected-material-row {
    grid-template-columns: minmax(0, 1fr) 52px 62px 30px;
    gap: 5px;
  }

  .selected-potion-ingredients > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .selected-potion-ingredients > div span:last-child {
    grid-column: 1 / -1;
  }

  .field-grid,
  .card-body,
  .detail-list {
    grid-template-columns: 1fr;
  }

  .magic-card {
    aspect-ratio: auto;
    padding: 24px 18px;
  }

  .card-header {
    grid-template-columns: 1fr;
    padding-right: 6px;
  }

  .ministry-logo {
    justify-self: center;
  }

  .identity-column {
    grid-template-columns: minmax(120px, 160px) 1fr;
    align-items: center;
  }
}

/* Modern bureau interface. Card artwork rules above remain unchanged. */
:root {
  --surface-0: #07090a;
  --surface-1: #0e1212;
  --surface-2: #151b1a;
  --surface-3: #1d2422;
  --line-modern: rgba(216, 180, 91, 0.22);
  --text-modern: #edf1ea;
  --muted-modern: #9aa69f;
  --emerald-modern: #42b989;
  --gold-modern: #d8b45b;
  --burgundy-modern: #d8b45b;
}

body {
  color: var(--text-modern);
  background:
    linear-gradient(rgba(216, 180, 91, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 180, 91, 0.035) 1px, transparent 1px),
    var(--surface-0);
  background-size: 36px 36px;
}

.app-navigation {
  position: sticky;
  z-index: 50;
  top: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: min(1500px, calc(100% - 28px));
  margin: 14px auto 0;
  border: 1px solid var(--line-modern);
  border-radius: 8px;
  background: rgba(14, 18, 18, 0.96);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
  padding: 10px 12px;
}

.nav-brand,
.nav-session,
.nav-links {
  display: flex;
  align-items: center;
}

.nav-brand {
  gap: 10px;
}

.nav-brand img {
  width: 38px;
  height: 38px;
}

.nav-brand strong,
.nav-brand span {
  display: block;
}

.nav-brand strong {
  color: #f2d889;
  font-family: Cinzel, serif;
  font-size: 0.85rem;
}

.nav-brand span {
  color: var(--muted-modern);
  font-size: 0.62rem;
}

.nav-links {
  justify-content: center;
  gap: 4px;
}

.app-nav-button {
  min-height: 38px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #aeb8b2;
  padding: 0 11px;
  font-size: 0.72rem;
  font-weight: 800;
}

.app-nav-button:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}

.app-nav-button.active {
  background: #26322e;
  color: #f4d982;
  box-shadow: inset 0 -2px var(--emerald-modern);
}

.nav-session {
  justify-content: end;
  gap: 9px;
  white-space: nowrap;
}

.nav-session span {
  color: var(--emerald-modern);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.76rem;
}

.nav-session strong {
  color: #e7ece8;
  font-size: 0.72rem;
}

.nav-logout {
  min-height: 34px;
  border: 1px solid rgba(140, 41, 64, 0.65);
  border-radius: 5px;
  background: rgba(140, 41, 64, 0.14);
  color: #ffc5d1;
  cursor: pointer;
  padding: 0 11px;
  font-weight: 800;
}

.home-shell,
.module-shell,
.app-shell,
.calculator-shell,
.requests-shell,
.admin-shell {
  width: min(1500px, 100%);
  min-height: auto;
  padding-top: 28px;
}

.home-shell {
  grid-template-columns: minmax(0, 1fr);
}

.welcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid rgba(216, 180, 91, 0.34);
  background:
    linear-gradient(110deg, rgba(66, 185, 137, 0.09), transparent 44%),
    #101615;
  color: var(--text-modern);
  padding: 38px 44px;
}

.welcome-panel::after {
  content: "M";
  position: absolute;
  right: 21%;
  color: rgba(216, 180, 91, 0.055);
  font-family: Cinzel, serif;
  font-size: 15rem;
  font-weight: 800;
  pointer-events: none;
}

.welcome-panel {
  position: relative;
}

.welcome-panel .eyebrow,
.module-panel .eyebrow,
.announcement-panel .eyebrow,
.control-panel .eyebrow,
.calculator-shell .eyebrow,
.requests-shell .eyebrow,
.admin-shell .eyebrow {
  color: var(--gold-modern);
}

.welcome-copy h1 {
  color: #f3f0e7;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 1;
}

.welcome-copy > p:last-child {
  color: var(--muted-modern);
  font-size: 1rem;
}

.bureau-clock {
  position: relative;
  z-index: 1;
  min-width: 260px;
  border-left: 1px solid var(--line-modern);
  padding-left: 34px;
  text-align: right;
}

.bureau-clock span,
.bureau-clock strong,
.bureau-clock small {
  display: block;
}

.bureau-clock span {
  color: var(--emerald-modern);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 4rem;
  line-height: 1;
}

.bureau-clock strong {
  color: #e6d59d;
  margin-top: 10px;
  text-transform: capitalize;
}

.bureau-clock small {
  color: var(--muted-modern);
  margin-top: 5px;
}

.home-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.home-metrics article {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--gold-modern);
  border-radius: 6px;
  background: var(--surface-1);
  padding: 18px;
}

.home-metrics span,
.home-metrics strong {
  display: block;
}

.home-metrics span {
  color: var(--muted-modern);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.home-metrics strong {
  overflow-wrap: anywhere;
  color: #f0e7cc;
  margin-top: 8px;
  font-family: Cinzel, serif;
  font-size: 1.6rem;
}

.announcement-panel,
.module-panel,
.request-create-panel,
.request-archive-panel,
.admin-shell .admin-panel,
.activity-panel,
.calculator-catalog,
.calculator-summary,
.control-panel,
.preview-panel {
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-modern);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
}

.module-heading,
.request-heading,
.admin-heading,
.calculator-heading,
.panel-heading,
.user-bar {
  border-color: var(--line-modern);
}

.module-heading h1,
.module-heading h2,
.request-heading h1,
.admin-heading h1,
.calculator-heading h1,
.summary-heading h2,
.panel-heading h1 {
  color: #f1ead8;
}

label span,
legend {
  color: #bdc8c1;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="search"],
textarea,
select {
  border-color: rgba(255, 255, 255, 0.12);
  background: #0b0f0f;
  color: #eef2ee;
}

input::placeholder,
textarea::placeholder {
  color: #65716b;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(66, 185, 137, 0.22);
  border-color: var(--emerald-modern);
}

.primary-action {
  border-color: #397b60;
  background: #267052;
  color: #f5fff9;
}

.primary-action:hover {
  background: #318464;
}

.secondary-action {
  border-color: rgba(216, 180, 91, 0.3);
  background: #171d1b;
  color: #e5d8ad;
}

.auth-message {
  color: #ffacbd;
}

.announcement-form {
  border: 1px solid rgba(66, 185, 137, 0.2);
  background: #0b100f;
  padding: 14px;
}

.announcement {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 14px;
  border-color: rgba(255, 255, 255, 0.08);
  background: #111716;
}

.announcement-mark {
  background: var(--gold-modern);
}

.announcement h3 {
  color: #f3e9ca;
}

.announcement p {
  color: #c4cdc8;
}

.announcement footer {
  color: #74817a;
}

.control-panel {
  max-height: calc(100vh - 105px);
}

.preview-panel {
  padding-bottom: 12px;
}

.user-bar {
  display: none;
}

.catalog-header,
.material-row,
.selected-material-row,
.recipe-calculator,
.potion-ingredient-row,
.selected-potion-row,
.request-file,
.activity-list,
.user-row,
.request-basket-preview {
  border-color: rgba(255, 255, 255, 0.09);
}

.material-row,
.material-row:nth-child(even),
.selected-material-row,
.recipe-calculator,
.request-file,
.user-row,
.activity-list,
.request-basket-preview {
  background: #111716;
}

.material-row strong,
.selected-material-row strong,
.recipe-calculator-heading > span,
.potion-cost-grid strong,
.request-file h2,
.request-file dd,
.user-row strong,
.activity-row strong {
  color: #e9eee9;
}

.material-price,
.selected-potion-heading span,
.request-file header span,
.activity-row span {
  color: #e3bf68;
}

.calculation-total,
.request-file header > strong {
  color: var(--emerald-modern);
}

.material-count,
.recipe-calculator-heading small {
  border-color: rgba(66, 185, 137, 0.3);
  background: rgba(66, 185, 137, 0.08);
  color: #8ee0bd;
}

.member-drop-list {
  border-color: rgba(216, 180, 91, 0.25);
  background: #0a0f0e;
}

.member-chip {
  border-color: rgba(255, 255, 255, 0.1);
  background: #19201e;
  color: #eef1ed;
}

.member-chip:disabled {
  cursor: default;
  opacity: 0.72;
}

.license-registry-grid {
  grid-template-columns: minmax(280px, 0.75fr) minmax(280px, 0.75fr) minmax(420px, 1.5fr);
}

.license-registry-grid > section {
  min-width: 0;
}

.license-registry-grid h2 {
  border-bottom: 1px solid var(--line-modern);
  color: #e9ddba;
  padding-bottom: 10px;
  font-size: 1rem;
}

.registry-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  border-color: rgba(255, 255, 255, 0.09);
  border-left: 3px solid var(--gold-modern);
  background: #121817;
}

.registry-row.expiring {
  border-color: rgba(216, 180, 91, 0.55);
  background: #201b10;
  box-shadow: inset 0 0 24px rgba(216, 180, 91, 0.06);
}

.registry-row.expired {
  border-color: rgba(176, 51, 73, 0.55);
  border-left-color: #bd3e58;
  background: #211013;
}

.registry-emblem {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold-modern);
  border-radius: 50%;
  color: var(--gold-modern);
  font-family: Cinzel, serif;
  font-weight: 900;
}

.registry-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.registry-title strong {
  color: #f2eee2;
}

.registry-title span {
  color: #91a099;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
}

.license-expiry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(216, 180, 91, 0.17);
  background: #090d0c;
  margin: 8px 0;
  padding: 9px;
}

.license-expiry small {
  color: #8f9a94;
}

.license-expiry strong {
  color: #ffdd7d;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.05rem;
}

.license-expiry em {
  color: #ff8ea4;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.renew-license-button {
  border: 1px solid rgba(66, 185, 137, 0.3);
  border-radius: 4px;
  background: rgba(66, 185, 137, 0.09);
  color: #8ee0bd;
  cursor: pointer;
  padding: 7px 10px;
  font-weight: 800;
}

.inventory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 8px;
}

.segmented-filter {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: #090d0c;
  padding: 3px;
}

.segmented-filter button {
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #909c96;
  cursor: pointer;
  padding: 0 14px;
  font-weight: 800;
}

.segmented-filter button.active {
  background: #26332f;
  color: #f0d98e;
}

.inventory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(350px, 0.75fr);
  align-items: start;
  gap: 16px;
}

.inventory-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.inventory-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  border-color: rgba(255, 255, 255, 0.08);
  background: #111716;
}

.inventory-kind {
  align-self: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #6fcba5;
  font-size: 0.58rem;
  font-weight: 900;
}

.inventory-row.potion .inventory-kind {
  color: #e0bb62;
}

.inventory-name strong,
.inventory-name span,
.inventory-quantity small,
.inventory-quantity strong {
  display: block;
}

.inventory-name strong {
  color: #eef1ed;
}

.inventory-name span,
.inventory-quantity small {
  color: #75817b;
  font-size: 0.65rem;
}

.inventory-quantity {
  min-width: 50px;
  text-align: right;
}

.inventory-quantity strong {
  color: #f2d67f;
  font-family: Cinzel, serif;
  font-size: 1.35rem;
}

.craftability-panel {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  border: 1px solid rgba(66, 185, 137, 0.2);
  border-radius: 6px;
  background: #0c1110;
  padding: 14px;
}

#craftabilityList {
  display: grid;
  gap: 7px;
}

.craftability-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #c78f3c;
  background: #121716;
  padding: 10px;
}

.craftability-row.ready {
  border-left-color: var(--emerald-modern);
}

.craftability-row strong,
.craftability-row span {
  display: block;
}

.craftability-row > div:first-child strong {
  color: #e8eee9;
  font-size: 0.78rem;
}

.craftability-row > div:first-child span,
.craftability-row p {
  color: #7e8983;
  font-size: 0.65rem;
}

.craftability-row p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

.craftability-count {
  text-align: right;
}

.craftability-count strong {
  color: #7fdbb4;
  font-family: Cinzel, serif;
  font-size: 1.15rem;
}

#discordReportOutput {
  font-family: ui-monospace, Consolas, monospace;
  line-height: 1.55;
}

.auth-card {
  border-color: var(--line-modern);
  background: #111716;
  color: var(--text-modern);
}

.auth-card h1 {
  color: #f0e7d3;
}

@media (max-width: 1250px) {
  .app-navigation {
    grid-template-columns: auto 1fr;
  }

  .nav-session {
    grid-column: 1 / -1;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
  }

  .license-registry-grid,
  .inventory-layout {
    grid-template-columns: 1fr;
  }

  .craftability-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 850px) {
  .app-navigation {
    position: static;
    display: flex;
    justify-content: center;
  }

  .nav-brand {
    width: 100%;
    justify-content: center;
  }

  .nav-links {
    width: 100%;
    flex-wrap: wrap;
  }

  .welcome-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .bureau-clock {
    border-top: 1px solid var(--line-modern);
    border-left: 0;
    padding-top: 22px;
    padding-left: 0;
    text-align: left;
  }

  .home-metrics,
  .inventory-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .home-metrics,
  .inventory-list {
    grid-template-columns: 1fr;
  }

  .welcome-panel {
    padding: 26px 20px;
  }

  .bureau-clock span {
    font-size: 3rem;
  }

  .inventory-row {
    grid-template-columns: 66px minmax(0, 1fr) auto;
  }
}

/* Readability and operations polish */
.control-panel label > span,
.request-form label > span,
.calculator-shell label > span,
.completion-dialog label > span,
.mode-picker legend {
  color: #dce5df;
  font-size: 0.84rem;
  font-weight: 800;
}

.mode-picker legend {
  color: #f3d77e;
  font-size: 0.9rem;
}

.mode-picker {
  border-color: rgba(216, 180, 91, 0.34);
  background: #0b100f;
  padding: 14px;
}

.mode-options label {
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: #151b19;
  color: #f2ead7;
  font-size: 0.88rem;
  font-weight: 800;
}

.mode-options label:has(input:checked) {
  border-color: #55c99a;
  background: #1e372e;
  color: #fff2bd;
}

.catalog-header {
  color: #d8bd72;
  font-size: 0.78rem;
}

.material-row strong,
.selected-material-row strong,
.selected-potion-heading strong {
  color: #f4f0e7;
  font-size: 0.9rem;
}

.material-price,
.selected-line-total,
.selected-potion-heading span,
.potion-ingredient-row span:last-child {
  color: #ffd36d;
  font-size: 0.9rem;
  font-weight: 900;
}

.catalog-quantity,
.selected-quantity,
.selected-potion-quantity {
  border-color: rgba(216, 180, 91, 0.28);
  background: #070b0a;
  color: #fff;
  font-size: 0.9rem;
}

.selected-material-row span,
.selected-potion-ingredients > div,
.selected-potion-ingredients small,
.potion-cost-grid span,
.potion-ingredient-row {
  color: #b9c5bf;
  font-size: 0.76rem;
}

.recipe-calculator-heading > span {
  color: #f4df9b;
  font-size: 1rem;
}

.potion-cost-grid strong,
.calculation-total strong {
  color: #70ddb0;
  font-size: 1.35rem;
}

.potion-price-warning,
.auth-message {
  color: #ff91a8;
  font-size: 0.8rem;
}

.calculator-summary .empty-calculation {
  color: #8f9b95;
}

.potion-ingredient-row strong {
  color: #69d8aa;
  font-size: 0.82rem;
}

.request-form,
.request-basket-preview,
.member-transfer,
.request-tabs {
  color: #eaf0eb;
}

.request-tabs {
  align-items: center;
  gap: 8px;
}

.request-tab {
  border-color: rgba(255, 255, 255, 0.12);
  background: #101615;
  color: #bac6c0;
  font-size: 0.8rem;
}

.request-tab.active {
  border-color: #4ac492;
  background: #21382f;
  color: #ffe59a;
}

.request-bureau-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.request-bureau-filter span {
  color: #9eaaa4;
  font-size: 0.7rem;
  font-weight: 800;
}

.request-bureau-filter select {
  min-width: 220px;
  min-height: 38px;
}

.request-list {
  display: grid;
  gap: 18px;
}

.request-bureau-group {
  --bureau-color: #d8b45b;
  border: 1px solid color-mix(in srgb, var(--bureau-color) 42%, transparent);
  background: #0a0f0e;
}

.request-bureau-group.bureau-mediwizard { --bureau-color: #48bce8; }
.request-bureau-group.bureau-creatures { --bureau-color: #a96bd4; }
.request-bureau-group.bureau-auror { --bureau-color: #5bd68f; }
.request-bureau-group.bureau-ministry { --bureau-color: #e25a55; }
.request-bureau-group.bureau-hogwarts { --bureau-color: #d9a64d; }

.request-bureau-group > header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--bureau-color) 35%, transparent);
  background: color-mix(in srgb, var(--bureau-color) 10%, #0d1211);
  padding: 13px 15px;
}

.request-bureau-group > header > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bureau-color);
  color: var(--bureau-color);
  font-family: Cinzel, serif;
  font-weight: 900;
}

.request-bureau-group > header small {
  color: var(--bureau-color);
  font-size: 0.64rem;
  font-weight: 900;
}

.request-bureau-group > header h2 {
  margin: 2px 0 0;
  color: #f1eee5;
  font-size: 0.95rem;
}

.request-bureau-group > header > strong {
  color: var(--bureau-color);
  font-family: Cinzel, serif;
  font-size: 1.4rem;
}

.request-bureau-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

.request-file {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid var(--bureau-color, #d8b45b);
  background: #121817;
  color: #e8eee9;
}

.request-file dt,
.request-file footer,
.request-file section > strong {
  color: #95a49c;
}

.request-file dd,
.request-file p {
  color: #e9eee9;
  font-size: 0.82rem;
}

.complete-request-button {
  min-height: 44px;
  background: #2a7f5d;
  font-size: 0.88rem;
}

.completion-summary {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(77, 206, 151, 0.32);
  border-left: 4px solid #4dce97;
  background: #0b1713;
  padding: 12px;
}

.completion-summary small {
  color: #63dca8;
  font-size: 0.64rem;
  font-weight: 900;
}

.completion-summary strong {
  color: #fff0bd;
  font-size: 0.95rem;
}

.completion-summary p,
.completion-summary time {
  color: #b9c7c0;
  font-size: 0.75rem;
}

.completion-dialog {
  width: min(680px, calc(100% - 28px));
  border: 1px solid rgba(216, 180, 91, 0.5);
  background: #0d1311;
  color: #edf2ee;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.75);
}

.completion-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(5px);
}

.completion-dialog form {
  background: transparent;
}

.completion-dialog .module-heading h2 {
  color: #fff0bd;
  font-size: 1.2rem;
}

.completion-dialog .eyebrow {
  color: #d8b45b;
}

/* Angular ministry license registry */
.license-registry-grid {
  gap: 18px;
}

.license-registry-grid > section {
  position: relative;
  border: 1px solid rgba(216, 180, 91, 0.22);
  background: #090e0d;
  padding: 14px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.license-registry-grid h2 {
  color: #fff0bd;
  font-size: 0.95rem;
}

.registry-row {
  position: relative;
  grid-template-columns: 50px minmax(0, 1fr);
  border: 1px solid rgba(216, 180, 91, 0.28);
  border-left: 0;
  background:
    linear-gradient(135deg, rgba(216, 180, 91, 0.08), transparent 36%),
    #111715;
  padding: 14px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.registry-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #d8b45b;
}

.registry-row.expiring {
  background: linear-gradient(135deg, rgba(232, 175, 55, 0.18), transparent 48%), #171409;
}

.registry-row.expired {
  background: linear-gradient(135deg, rgba(191, 50, 78, 0.17), transparent 48%), #180d10;
}

.registry-emblem {
  border-radius: 2px;
  transform: rotate(45deg);
}

.registry-emblem::first-letter {
  transform: rotate(-45deg);
}

.registry-content {
  min-width: 0;
}

.registry-title strong {
  color: #fff3c8;
  font-family: Cinzel, serif;
  font-size: 0.95rem;
}

.registry-title span {
  color: #b5c2bb;
  font-size: 0.76rem;
}

.registry-content p {
  color: #c5d0ca;
  font-size: 0.76rem;
  line-height: 1.55;
}

.license-expiry {
  min-height: 48px;
  border-color: rgba(216, 180, 91, 0.34);
  background: #060908;
}

.license-expiry strong {
  color: #ffdc75;
  font-size: 1.08rem;
}

.license-expiry em {
  border: 1px solid rgba(255, 95, 126, 0.42);
  background: rgba(255, 95, 126, 0.1);
  color: #ff9caf;
  padding: 5px 7px;
}

.registry-row.expiring .license-expiry,
.registry-row.expired .license-expiry {
  grid-template-columns: auto minmax(0, 1fr);
}

.registry-row.expiring .license-expiry em,
.registry-row.expired .license-expiry em {
  grid-column: 1 / -1;
  text-align: center;
}

.module-panel .empty-calculation,
.request-archive-panel .empty-calculation,
.activity-panel .empty-calculation,
.announcement-panel .empty-calculation {
  color: #8f9c95;
}

/* Admin audit workspace */
.admin-shell {
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
}

.activity-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.activity-dashboard article {
  border: 1px solid rgba(216, 180, 91, 0.18);
  background: #0a0f0e;
  padding: 12px;
}

.activity-dashboard span,
.activity-dashboard strong {
  display: block;
}

.activity-dashboard span {
  color: #93a199;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.activity-dashboard strong {
  color: #f4d777;
  margin-top: 4px;
  font-family: Cinzel, serif;
  font-size: 1.45rem;
}

.activity-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 180px;
  gap: 8px;
}

.activity-list {
  gap: 7px;
  border: 0;
  background: transparent;
}

.activity-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #101615;
  padding: 10px;
}

.activity-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(77, 206, 151, 0.4);
  background: rgba(77, 206, 151, 0.09);
  color: #72dcb0;
  font-weight: 900;
}

.activity-copy > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.activity-row strong {
  color: #f2eee3;
}

.activity-row span {
  color: #d7b95f;
  font-size: 0.75rem;
}

.activity-row p {
  color: #9eaaa4;
  font-size: 0.72rem;
}

.activity-row time {
  text-align: right;
}

.activity-row time strong,
.activity-row time span {
  display: block;
}

.user-row > div strong {
  color: #f4f0e7;
  font-size: 0.9rem;
}

.user-row > div span {
  color: #9eaaa4;
  font-size: 0.72rem;
  line-height: 1.4;
}

.user-row .secondary-action {
  border-color: rgba(216, 180, 91, 0.38);
  color: #ffe08a;
}

.user-row .danger-action {
  border-color: rgba(255, 101, 130, 0.4);
  background: rgba(255, 101, 130, 0.1);
  color: #ff9db0;
}

.activity-row time strong {
  color: #b8c4be;
  font-size: 0.7rem;
}

.activity-row time span {
  color: #65d7a9;
  font-family: ui-monospace, Consolas, monospace;
}

.announcement-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.announcement-delete {
  border: 1px solid rgba(220, 73, 99, 0.42);
  background: rgba(220, 73, 99, 0.08);
  color: #ff9eb0;
  cursor: pointer;
  padding: 5px 9px;
  font-weight: 800;
}

/* Home guide reconstructed from the supplied bureau poster */
.bureau-guide {
  border: 1px solid rgba(216, 180, 91, 0.3);
  background:
    linear-gradient(135deg, rgba(216, 180, 91, 0.06), transparent 34%),
    #0d1211;
  padding: 22px;
}

.bureau-guide .eyebrow {
  color: #d8b45b;
}

.bureau-guide-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(216, 180, 91, 0.24);
  padding-bottom: 16px;
}

.bureau-guide-header h2 {
  margin: 0;
  color: #fff0bd;
  font-size: 1.45rem;
}

.bureau-guide-header > strong {
  border: 1px solid rgba(216, 180, 91, 0.38);
  background: #17150e;
  color: #f2ce63;
  padding: 10px 13px;
  font-family: Cinzel, serif;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.bureau-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.65fr);
  gap: 14px;
  margin-top: 14px;
}

.rank-guide-list,
.bureau-officials {
  display: grid;
  gap: 8px;
}

.rank-guide {
  --rank-color: #d8b45b;
  border: 1px solid color-mix(in srgb, var(--rank-color) 34%, transparent);
  background: color-mix(in srgb, var(--rank-color) 7%, #101514);
  padding: 12px;
}

.rank-guide.rank-intern { --rank-color: #72ca72; }
.rank-guide.rank-member { --rank-color: #54b9dc; }
.rank-guide.rank-senior { --rank-color: #a978df; }
.rank-guide.rank-deputy { --rank-color: #e75d51; }
.rank-guide.rank-chief { --rank-color: #e5b64d; }

.rank-guide header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.rank-guide header > span {
  color: var(--rank-color);
  font-family: Cinzel, serif;
  font-weight: 900;
}

.rank-guide h3 {
  margin: 0;
  color: #f3eee1;
  font-size: 0.9rem;
}

.rank-guide header strong {
  color: var(--rank-color);
  font-size: 0.68rem;
}

.rank-guide > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
  border-top: 1px solid color-mix(in srgb, var(--rank-color) 22%, transparent);
  margin-top: 9px;
  padding-top: 9px;
}

.rank-guide > div span {
  color: #c6d0ca;
  font-size: 0.74rem;
}

.rank-guide > div span::before {
  content: "✦";
  color: var(--rank-color);
  margin-right: 6px;
}

.official-card {
  --official-color: #d8b45b;
  display: grid;
  align-content: center;
  min-height: 105px;
  border: 1px solid color-mix(in srgb, var(--official-color) 42%, transparent);
  border-left: 4px solid var(--official-color);
  background: color-mix(in srgb, var(--official-color) 8%, #0b100f);
  padding: 14px 17px;
}

.official-card.auror { --official-color: #62d292; }
.official-card.mediwizard { --official-color: #51b9e4; }
.official-card.creatures { --official-color: #b66bd4; }
.official-card.potions { --official-color: #ec6559; }

.official-card small {
  color: #b9c4be;
  font-weight: 800;
  text-transform: uppercase;
}

.official-card strong {
  color: var(--official-color);
  font-family: Cinzel, serif;
  font-size: 1.65rem;
}

.official-card span {
  color: #d8ded9;
  font-size: 0.75rem;
}

@media (max-width: 1100px) {
  .request-bureau-files,
  .bureau-guide-layout,
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .activity-panel {
    order: -1;
  }
}

@media (max-width: 700px) {
  .request-tabs,
  .bureau-guide-header {
    align-items: stretch;
    flex-direction: column;
  }

  .request-bureau-filter {
    display: grid;
    width: 100%;
    margin-left: 0;
  }

  .request-bureau-filter select,
  .activity-toolbar {
    width: 100%;
  }

  .activity-toolbar,
  .activity-dashboard {
    grid-template-columns: 1fr;
  }

  .rank-guide > div {
    grid-template-columns: 1fr;
  }

  .registry-title,
  .license-expiry {
    grid-template-columns: 1fr;
  }
}

/* Final alignment and personal profile workspace. */
.security-blocks-panel .empty-calculation {
  color: #b8c5be !important;
  font-size: 0.86rem;
}

.catalog-header span:nth-child(2) {
  text-align: center;
}

.material-price {
  justify-self: center;
  min-width: 72px;
  text-align: center;
}

.card-user-authority {
  min-width: 190px;
  justify-content: flex-end;
  border: 0;
  padding: 0 8px 7px;
}

.card-user-authority strong {
  border: 0;
  color: #f5d57f;
  font-family: Cinzel, serif;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: right;
  text-shadow: 0 0 12px rgba(240, 206, 115, 0.24);
  text-transform: uppercase;
  transform: none;
}

.profile-panel {
  --profile-accent: #58d6a4;
  --profile-accent-rgb: 88, 214, 164;
  padding: 0;
  overflow: hidden;
}

.profile-panel[data-profile-accent="gold"] {
  --profile-accent: #e5c86f;
  --profile-accent-rgb: 229, 200, 111;
}

.profile-panel[data-profile-accent="cyan"] {
  --profile-accent: #5fd9e8;
  --profile-accent-rgb: 95, 217, 232;
}

.profile-panel[data-profile-accent="violet"] {
  --profile-accent: #c398ff;
  --profile-accent-rgb: 195, 152, 255;
}

.profile-cover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  min-height: 230px;
  border-bottom: 1px solid rgba(var(--profile-accent-rgb), 0.34);
  background:
    linear-gradient(115deg, rgba(var(--profile-accent-rgb), 0.2), transparent 38%),
    radial-gradient(circle at 82% 20%, rgba(var(--profile-accent-rgb), 0.13), transparent 24%),
    #080e0d;
  padding: 34px;
}

.profile-cover-grid {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(var(--profile-accent-rgb), 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--profile-accent-rgb), 0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
  pointer-events: none;
}

.profile-identity {
  position: relative;
  z-index: 1;
  align-items: flex-end;
  border: 0;
  padding: 0;
}

.profile-avatar {
  width: 92px;
  height: 92px;
  border: 1px solid var(--profile-accent);
  background:
    linear-gradient(145deg, rgba(var(--profile-accent-rgb), 0.22), transparent),
    #101816;
  color: var(--profile-accent);
  box-shadow: 0 0 28px rgba(var(--profile-accent-rgb), 0.13);
  font-size: 1.8rem;
}

.profile-identity-copy {
  display: grid;
  gap: 3px;
}

.profile-identity-copy .eyebrow {
  color: var(--profile-accent);
}

.profile-identity h1 {
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.profile-identity span {
  color: var(--profile-accent);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-status {
  max-width: 640px;
  margin: 8px 0 0;
  color: #c8d3ce;
  font-size: 0.88rem;
}

.profile-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 8px;
}

.profile-stats article {
  min-width: 110px;
  border-top: 2px solid var(--profile-accent);
  background: rgba(4, 9, 8, 0.74);
  padding: 12px;
}

.profile-stats span,
.profile-stats strong {
  display: block;
}

.profile-stats span {
  color: #8fa099;
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-stats strong {
  margin-top: 5px;
  color: #f1f5f2;
  font-family: Cinzel, serif;
  font-size: 1.05rem;
}

.profile-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: 12px;
  margin: 0;
  padding: 18px;
}

.profile-grid > section {
  border-color: rgba(255, 255, 255, 0.09);
  background: #0b1110;
  padding: 18px;
}

.profile-grid .eyebrow {
  color: var(--profile-accent);
}

.profile-about {
  grid-row: span 2;
}

.profile-bio {
  min-height: 86px;
  border-left: 3px solid var(--profile-accent);
  background: rgba(var(--profile-accent-rgb), 0.06);
  margin: 0 0 16px;
  padding: 14px;
  color: #d9e2dd;
  line-height: 1.65;
  white-space: pre-wrap;
}

.profile-settings-form {
  display: grid;
  gap: 11px;
}

.profile-settings-form label > span,
.profile-security label > span {
  color: #c9d4ce;
}

.profile-settings-form input,
.profile-settings-form textarea,
.profile-settings-form select,
.profile-security input {
  border-color: rgba(var(--profile-accent-rgb), 0.28);
  background: #070d0c;
  color: #f1f5f2;
}

.profile-settings-form .primary-action {
  border-color: rgba(var(--profile-accent-rgb), 0.6);
  background: rgba(var(--profile-accent-rgb), 0.2);
  color: #f4f8f5;
}

.profile-history,
.profile-security {
  grid-column: 1 / -1;
}

.profile-page-label {
  border: 1px solid rgba(var(--profile-accent-rgb), 0.35);
  color: var(--profile-accent);
  padding: 6px 9px;
  font: 800 0.72rem ui-monospace, Consolas, monospace;
}

.profile-request-list article {
  border-left-color: var(--profile-accent);
}

.profile-activity-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-activity-list article {
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 0;
  background: #101716;
  padding: 12px;
}

.profile-activity-mark {
  width: 7px;
  height: 30px;
  background: var(--profile-accent);
  box-shadow: 0 0 12px rgba(var(--profile-accent-rgb), 0.32);
}

.profile-activity-list article > div {
  display: grid;
  gap: 3px;
}

.profile-activity-list time {
  max-width: 128px;
  text-align: right;
}

.profile-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.profile-pagination button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #101716;
  color: #aebbb4;
  cursor: pointer;
  font-weight: 900;
}

.profile-pagination button.active,
.profile-pagination button:hover {
  border-color: var(--profile-accent);
  background: rgba(var(--profile-accent-rgb), 0.16);
  color: var(--profile-accent);
}

@media (max-width: 900px) {
  .profile-cover,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-stats {
    width: 100%;
  }

  .profile-about {
    grid-row: auto;
  }

  .profile-history,
  .profile-security {
    grid-column: auto;
  }

  .profile-activity-list {
    grid-template-columns: 1fr;
  }
}

/* Staff directory, inventory steppers and readable license grants. */
.staff-directory {
  display: grid;
  gap: 18px;
}

.staff-intro,
.discord-personal-note {
  color: #9eada5;
  margin: -8px 0 0;
}

.staff-directory-list {
  display: grid;
  gap: 16px;
}

.staff-rank-tier {
  --staff-color: #58d6a4;
  width: calc(100% - (var(--tier-depth) * 5%));
  max-width: 1120px;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--staff-color) 30%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--staff-color) 9%, transparent), transparent 38%), #090f0d;
  padding: 12px;
}

.staff-rank-tier.rank-chief { --staff-color: #f1c75b; }
.staff-rank-tier.rank-deputy { --staff-color: #ef8d58; }
.staff-rank-tier.rank-senior { --staff-color: #be94ff; }
.staff-rank-tier.rank-member { --staff-color: #58bde0; }

.staff-rank-tier > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--staff-color) 24%, transparent);
  padding: 0 4px 10px;
}

.staff-rank-tier > header > span,
.staff-rank-tier > header > strong {
  color: var(--staff-color);
  font: 900 0.85rem Cinzel, serif;
}

.staff-rank-tier > header small {
  color: #7f8e86;
  font-size: 0.58rem;
  font-weight: 900;
}

.staff-rank-tier > header h2 {
  margin: 2px 0 0;
  color: #f6eed7;
  font-size: 1rem;
}

.staff-tier-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.staff-card {
  --staff-color: #58d6a4;
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 128px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 3px solid var(--staff-color);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--staff-color) 12%, transparent), transparent 52%),
    #0d1412;
  padding: 15px;
}

.registry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.show-license-card-button {
  min-height: 36px;
  border: 1px solid rgba(88, 214, 164, 0.48);
  background: rgba(88, 214, 164, 0.1);
  color: #8de7c0;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 900;
}

.staff-card.rank-chief { --staff-color: #f1c75b; }
.staff-card.rank-deputy { --staff-color: #ef8d58; }
.staff-card.rank-senior { --staff-color: #be94ff; }
.staff-card.rank-member { --staff-color: #58bde0; }

.staff-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--staff-color);
  color: var(--staff-color);
  font: 900 0.95rem Cinzel, serif;
}

.staff-card-copy {
  min-width: 0;
}

.staff-card-copy small {
  color: var(--staff-color);
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.staff-card-copy h2 {
  margin: 4px 0;
  color: #f1f5f2;
  font-size: 1rem;
}

.staff-card-copy span {
  color: #8f9e96;
  font-size: 0.7rem;
}

.staff-card > button {
  grid-column: 1 / -1;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--staff-color) 42%, transparent);
  background: color-mix(in srgb, var(--staff-color) 10%, #0b1110);
  color: var(--staff-color);
  cursor: pointer;
  font-weight: 900;
}

.staff-editor {
  border: 1px solid rgba(229, 200, 111, 0.25);
  background: #0a100f;
  padding: 16px;
}

.staff-editor-rows {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.staff-editor-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 210px 190px;
  gap: 8px;
}

.public-profile-dialog {
  width: min(560px, calc(100% - 28px));
}

.public-profile-card {
  --public-color: #58d6a4;
  display: grid;
  justify-items: center;
  text-align: center;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--public-color) 13%, transparent), transparent),
    #0b1110;
  padding: 28px;
}

.public-profile-card[data-profile-accent="gold"] { --public-color: #e5c86f; }
.public-profile-card[data-profile-accent="cyan"] { --public-color: #5fd9e8; }
.public-profile-card[data-profile-accent="violet"] { --public-color: #c398ff; }

.public-profile-avatar {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 1px solid var(--public-color);
  color: var(--public-color);
  font: 900 1.5rem Cinzel, serif;
}

.public-profile-card h1 {
  margin: 6px 0;
  color: #f5f7f4;
}

.public-profile-card > strong,
.public-profile-card .eyebrow {
  color: var(--public-color);
}

.public-profile-status {
  color: #d9e2dd;
}

.public-profile-bio {
  width: 100%;
  border-left: 3px solid var(--public-color);
  background: rgba(255, 255, 255, 0.035);
  margin: 12px 0;
  padding: 14px;
  color: #bdc9c3;
  line-height: 1.6;
}

.registry-license-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.registry-license-list span {
  border: 1px solid rgba(229, 200, 111, 0.28);
  background: #0a100e;
  color: #e8ddbd;
  padding: 6px 8px;
  font-size: 0.7rem;
  line-height: 1.25;
}

.registry-license-list span::before {
  content: "✓";
  color: #65d7a9;
  margin-right: 6px;
  font-weight: 900;
}

.registry-license-list em {
  color: #8f9c95;
  font-size: 0.75rem;
}

.inventory-row {
  grid-template-columns: 68px minmax(0, 1fr) 58px auto;
  align-items: center;
}

.inventory-stepper {
  display: grid;
  grid-template-columns: 34px 54px 34px;
  align-items: center;
  gap: 4px;
}

.inventory-stepper button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(88, 214, 164, 0.36);
  background: #13241e;
  color: #76dfb6;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 900;
}

.inventory-stepper button:first-child {
  border-color: rgba(239, 103, 98, 0.34);
  background: #241412;
  color: #ff9993;
}

.inventory-stepper input {
  width: 54px;
  height: 34px;
  border-color: rgba(255, 255, 255, 0.12);
  background: #070c0b;
  color: #fff;
  padding: 4px;
  text-align: center;
}

@media (max-width: 1100px) {
  .inventory-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .staff-editor-row {
    grid-template-columns: 1fr;
  }

  .staff-rank-tier {
    width: 100%;
  }

  .inventory-row {
    grid-template-columns: 58px minmax(0, 1fr) 48px;
  }

  .inventory-stepper {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .profile-cover {
    padding: 22px;
  }

  .profile-identity {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-stats {
    grid-template-columns: 1fr;
  }
}

/* Dark surfaces never use burgundy text or controls. */
.app-navigation,
.home-shell,
.module-shell,
.app-shell,
.calculator-shell,
.requests-shell,
.admin-shell,
.completion-dialog {
  --wine: #d8b45b;
  --velvet: #f1ead8;
  --burgundy-modern: #d8b45b;
}

.nav-logout {
  border-color: rgba(239, 103, 98, 0.56);
  background: rgba(239, 103, 98, 0.11);
  color: #ffb0aa;
}

.add-material-button {
  border-color: #318765;
  background: #267052;
  color: #fff;
}

.remove-material-button,
.remove-potion-button {
  border-color: rgba(239, 103, 98, 0.42);
  color: #ff928c;
}

.request-basket-preview > div:first-child strong,
.request-basket-preview > div:first-child span,
.request-file section > strong,
.request-file .request-reason {
  color: #dbe5df;
}

.request-file section > p {
  color: #afbbb5;
}

.request-file .request-reason {
  border-color: rgba(255,255,255,.08);
  background: #171d1b;
  color: #dce4df;
}

.member-chip,
.member-chip:disabled {
  border-color: rgba(77, 206, 151, 0.2);
  background: #141b19;
  color: #edf2ee;
}

.member-chip span {
  color: #8fa099;
}

.member-drop-list .empty-calculation {
  color: #8d9a93;
}

.material-search {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(77, 206, 151, 0.28);
  background: linear-gradient(90deg, rgba(77, 206, 151, 0.08), transparent 45%), #0a0f0e;
  margin: 14px 0;
  padding: 11px 14px;
}

.material-search::before {
  content: "⌕";
  color: #67d7aa;
  font-size: 1.5rem;
  line-height: 1;
}

.material-search > span {
  position: absolute;
  left: 52px;
  top: 7px;
  color: #d8b45b !important;
  font-size: 0.6rem !important;
  text-transform: uppercase;
}

.material-search input {
  grid-column: 2;
  min-height: 44px;
  border: 0;
  background: transparent;
  padding: 11px 0 0;
  font-size: 0.95rem;
}

.catalog-header {
  grid-template-columns: minmax(190px, 1fr) 86px 86px 40px;
  padding-right: 11px;
}

.catalog-header span:nth-child(2) {
  text-align: right;
}

.material-price {
  justify-self: end;
  min-width: 72px;
}

.request-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

.request-actions .record-delete-button {
  grid-column: 1 / -1;
}

.record-delete-button {
  min-height: 36px;
  border: 1px solid rgba(239, 103, 98, 0.5);
  background: rgba(239, 103, 98, 0.1);
  color: #ffaaa6;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 900;
}

.record-delete-button:hover {
  background: rgba(239, 103, 98, 0.2);
}

.completion-summary .record-delete-button {
  width: 100%;
  margin-top: 10px;
}

.edit-collaborators-button {
  color: #8ce1bd;
}

.activity-row {
  --activity-color: #9caaa3;
  border-left: 3px solid var(--activity-color);
}

.activity-row .activity-avatar {
  border-color: color-mix(in srgb, var(--activity-color) 52%, transparent);
  color: var(--activity-color);
}

.activity-row .activity-copy span {
  color: var(--activity-color);
}

.activity-login { --activity-color: #52c7e8; }
.activity-create { --activity-color: #5ed69c; }
.activity-update { --activity-color: #e6bb54; }
.activity-complete { --activity-color: #9a7bea; }
.activity-delete { --activity-color: #ef6762; }

.online-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(77, 206, 151, 0.22);
  background: #0b1110;
  padding: 14px 18px;
}

.online-panel > div:first-child {
  display: flex;
  align-items: center;
  gap: 11px;
}

.online-panel small,
.online-panel strong {
  display: block;
}

.online-panel small {
  color: #87958e;
  font-size: 0.62rem;
  font-weight: 900;
}

.online-panel strong {
  color: #e9eee9;
}

.online-pulse,
.online-user-list i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #52d79f;
  box-shadow: 0 0 12px rgba(82, 215, 159, 0.7);
}

.online-user-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 7px;
}

.online-user-list > span {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #121918;
  color: #eef2ee;
  padding: 7px 9px;
  font-weight: 800;
}

.online-user-list small {
  color: #8e9b94;
}

.guide-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-header-actions > strong {
  border: 1px solid rgba(216, 180, 91, 0.38);
  background: #17150e;
  color: #f2ce63;
  padding: 10px 13px;
  font-family: Cinzel, serif;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.guide-official-editor,
.profile-grid,
.profile-password-form {
  display: grid;
  gap: 10px;
}

.guide-official-editor {
  grid-template-columns: 1fr 1fr;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line-modern);
  padding-bottom: 18px;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid #d8b45b;
  background: #17160f;
  color: #f0ce6c;
  font-family: Cinzel, serif;
  font-size: 1.35rem;
  font-weight: 900;
}

.profile-identity h1 {
  margin: 0;
  color: #f2eee4;
}

.profile-identity span {
  color: #68d5a9;
}

.profile-grid {
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
}

.profile-grid > section {
  border: 1px solid rgba(255,255,255,.08);
  background: #0b100f;
  padding: 14px;
}

.profile-security {
  grid-column: 1 / -1;
}

#profilePasswordForm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.profile-request-list,
.profile-activity-list {
  display: grid;
  gap: 7px;
}

.profile-request-list article,
.profile-activity-list article {
  display: grid;
  gap: 3px;
  border-left: 3px solid #52c99a;
  background: #121817;
  padding: 10px;
}

.profile-request-list strong,
.profile-activity-list strong {
  color: #f1d678;
}

.profile-request-list span,
.profile-activity-list span {
  color: #d6dfda;
}

.profile-request-list small,
.profile-activity-list time {
  color: #84928b;
  font-size: 0.68rem;
}

.card-user-authority {
  display: flex;
  align-items: baseline;
  justify-content: end;
  gap: 8px;
  min-width: 220px;
  border-bottom: 1px solid rgba(216, 180, 91, 0.48);
  padding: 0 4px 4px;
  color: var(--gold);
}

.card-footer {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.card-user-authority span {
  font-size: 0.48rem;
  font-weight: 800;
  text-transform: uppercase;
}

.card-user-authority strong {
  font-family: Cinzel, serif;
  font-size: 0.7rem;
}

@media (max-width: 700px) {
  .online-panel,
  .guide-header-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .online-user-list {
    justify-content: start;
  }
  .guide-official-editor,
  .profile-grid,
  #profilePasswordForm {
    grid-template-columns: 1fr;
  }
  .profile-security {
    grid-column: auto;
  }
  .request-actions {
    grid-template-columns: 1fr;
  }
}
/* Final contrast pass: dark application surfaces use gold, mint and neutral ink only. */
.auth-card .eyebrow,
.requests-shell .eyebrow,
.requests-shell h1,
.requests-shell h2,
.requests-shell h3,
.requests-shell label,
.requests-shell .field-label,
.requests-shell .request-basket-preview strong {
  color: #e5c86f !important;
}

.auth-card p,
.auth-card label,
.requests-shell p,
.requests-shell span,
.requests-shell small,
.requests-shell .empty-calculation {
  color: #b8c5be;
}

.auth-card input,
.requests-shell input,
.requests-shell select,
.requests-shell textarea {
  border-color: rgba(116, 151, 134, 0.42);
  background: #09100e;
  color: #f3f6f2;
}

.requests-shell .request-file,
.requests-shell .request-file section,
.requests-shell .request-basket-preview,
.requests-shell .member-drop-list {
  background: #0d1512 !important;
  color: #edf3ef !important;
}

.requests-shell .request-file h2,
.requests-shell .request-file dd,
.requests-shell .request-file p,
.requests-shell .request-file section > p,
.requests-shell .request-file .request-reason {
  color: #edf3ef !important;
}

.requests-shell .request-file dt,
.requests-shell .request-file footer,
.requests-shell .request-file section > strong {
  color: #9fb4aa !important;
}

input[type="date"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(89%) sepia(36%) saturate(684%) hue-rotate(356deg) brightness(103%) contrast(91%);
  opacity: 1;
}

.security-blocks-panel {
  border: 1px solid rgba(229, 200, 111, 0.28);
  background: #0d1412;
  padding: 18px;
}

.security-blocks-note {
  color: #9fb0a7;
  margin: 4px 0 14px;
}

.blocked-login-list {
  display: grid;
  gap: 8px;
}

.security-block-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(239, 103, 98, 0.26);
  border-left: 3px solid #ef6762;
  background: #101816;
  padding: 11px 12px;
}

.security-block-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(239, 103, 98, 0.45);
  color: #ffaaa5;
  font: 800 0.72rem Cinzel, serif;
}

.security-block-row div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.security-block-row small {
  color: #ef8b86;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.security-block-row strong {
  color: #f1f5f2;
}

.security-block-row span {
  color: #9fb0a7;
  font-size: 0.75rem;
}

@media (max-width: 700px) {
  .security-block-row {
    grid-template-columns: 42px 1fr;
  }

  .security-block-row button {
    grid-column: 1 / -1;
  }
}

/* Keep the personal workspace above legacy profile rules. */
.security-blocks-panel .empty-calculation {
  color: #b8c5be !important;
}

.catalog-header span:nth-child(2),
.material-price {
  justify-self: center;
  text-align: center;
}

.catalog-header {
  padding-right: 26px;
}

.card-user-authority {
  min-width: 210px;
  justify-content: flex-end;
  border: 0;
  padding: 0 8px 7px;
}

.card-user-authority strong {
  border: 0;
  color: #f5d57f;
  font-family: Cinzel, serif;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-shadow: 0 0 12px rgba(240, 206, 115, 0.24);
  text-transform: uppercase;
  transform: none;
}

.profile-cover .profile-identity {
  position: relative;
  z-index: 1;
  align-items: flex-end;
  border: 0;
  padding: 0;
}

.profile-cover .profile-avatar {
  width: 92px;
  height: 92px;
  border-color: var(--profile-accent);
  color: var(--profile-accent);
  font-size: 1.8rem;
}

.profile-cover .profile-identity h1 {
  color: #f2eee4;
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.profile-cover .profile-identity span,
.profile-grid .eyebrow {
  color: var(--profile-accent);
}

.profile-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: 12px;
  margin: 0;
  padding: 18px;
}

.profile-grid > section {
  border-color: rgba(255, 255, 255, 0.09);
  background: #0b1110;
  padding: 18px;
}

.profile-about {
  grid-row: span 2;
}

.profile-history,
.profile-security {
  grid-column: 1 / -1;
}

.profile-request-list article {
  border-left-color: var(--profile-accent);
}

.profile-activity-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-activity-list article {
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 0;
  padding: 12px;
}

@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-about {
    grid-row: auto;
  }

  .profile-history,
  .profile-security {
    grid-column: auto;
  }

  .profile-activity-list {
    grid-template-columns: 1fr;
  }
}