.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 75% 18%, #443313 0, transparent 23%),
    radial-gradient(circle at 12% 84%, #1f2630 0, transparent 28%),
    #090a0c;
  transition: opacity .3s ease, visibility .3s ease;
}

.member-platforms {
  display: flex;
  align-items: center;
  gap: 4px;
}

.member-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #3b4149;
  border-radius: 999px;
  background: #171a1f;
  color: #7e858e;
  padding: 4px 7px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .05em;
}

.member-platform i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #555c65;
}

.member-platform.apk {
  border-color: #5b4820;
  color: #d9ad43;
  background: #241e10;
}

.member-platform.web {
  border-color: #294d61;
  color: #70c9ec;
  background: #12232c;
}

.member-platform.online i {
  background: #5bd293;
  box-shadow: 0 0 7px #5bd29399;
}

.member-platform-empty {
  color: #666d77;
  font-size: 8px;
}

.toast.error {
  border-color: #753a3a;
  background: #341b1b;
  color: #ffb0b0;
}

.login-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000, transparent 75%);
}

.login-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.login-panel {
  position: relative;
  width: min(450px, 100%);
  padding: 34px;
  border: 1px solid #554526;
  border-radius: 14px;
  background: linear-gradient(145deg, #15171bfa, #0d0f12fa);
  box-shadow: 0 32px 110px #000;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  font: 18px Georgia;
}

.login-brand > b {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #201707;
  background: linear-gradient(145deg, #f0ce78, #9b6b24);
}

.login-brand i {
  color: var(--gold);
  font-style: normal;
}

.login-brand small {
  display: block;
  margin-top: 4px;
  color: #777;
  font: 7px Arial;
  letter-spacing: 2px;
}

.eyebrow {
  color: var(--gold);
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 2px;
}

.login-panel h1 {
  margin: 9px 0;
  font: 27px Georgia;
}

.login-panel > p {
  margin: 0 0 22px;
  color: #7c828b;
  line-height: 1.6;
}

.login-panel form > label {
  display: block;
  margin: 14px 0;
  color: #aaa;
  font-size: 8px;
}

.login-panel form > label > input,
.password-field {
  width: 100%;
  height: 43px;
  display: flex;
  margin-top: 7px;
  border: 1px solid #343840;
  border-radius: 6px;
  background: #181b20;
}

.login-panel form > label > input,
.password-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 12px;
  background: transparent;
  color: #eee;
}

.login-panel form > label > input {
  background: #181b20;
  color: #f4f0e8;
  caret-color: #efc86d;
  color-scheme: dark;
}

.login-panel input:-webkit-autofill,
.login-panel input:-webkit-autofill:hover,
.login-panel input:-webkit-autofill:focus,
.login-panel input:-webkit-autofill:active {
  -webkit-text-fill-color: #f4f0e8;
  caret-color: #efc86d;
  box-shadow: 0 0 0 1000px #181b20 inset;
  transition: background-color 9999s ease-out 0s;
}

.login-panel form > label > input:focus,
.password-field:focus-within {
  border-color: #9f7a2d;
  box-shadow: 0 0 0 3px rgba(207, 163, 61, .12);
}

.ghost.danger {
  border-color: #64383b;
  color: #ef969b;
  background: #251719;
}

.ghost.danger:hover:not(:disabled) {
  border-color: #a8585e;
  background: #351d20;
}

.password-field button {
  width: 42px;
  border: 0;
  background: transparent;
  color: #888;
}

.login-options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 11px 0 18px;
  color: #7a8089;
  font-size: 8px;
}

.login-options input {
  accent-color: #c99a43;
}

.login-options button {
  border: 0;
  background: transparent;
  color: #d6aa53;
  font-size: 8px;
}

.login-submit {
  width: 100%;
  min-height: 43px;
}

.login-submit:disabled {
  cursor: wait;
  opacity: .7;
}

.login-security {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.login-security span {
  padding: 5px 8px;
  border: 1px solid #2d503e;
  border-radius: 12px;
  background: #14241b;
  color: #6bca93;
  font-size: 7px;
}

.login-note {
  display: block;
  margin-top: 14px;
  color: #626872;
  font-size: 7px;
  text-align: center;
}

.mfa-step[hidden] {
  display: none;
}

.mfa-step h2 {
  margin: 8px 0;
  font: 23px Georgia;
}

.mfa-step > p {
  margin: 0 0 16px;
  color: #858b94;
  font-size: 10px;
  line-height: 1.6;
}

.mfa-step > label {
  display: block;
  margin: 14px 0;
  color: #aaa;
  font-size: 8px;
}

.mfa-step > label > input {
  width: 100%;
  height: 43px;
  display: block;
  margin-top: 7px;
  border: 1px solid #343840;
  border-radius: 6px;
  outline: 0;
  padding: 0 12px;
  background: #181b20;
  color: #eee;
  font-size: 14px;
  letter-spacing: 2px;
}

.mfa-qr {
  width: 188px;
  height: 188px;
  display: grid;
  place-items: center;
  margin: 15px auto;
  padding: 8px;
  border: 1px solid #705726;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 38px #0008;
}

.mfa-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mfa-secret-label {
  text-align: center;
}

.mfa-secret-label code {
  display: block;
  margin-top: 7px;
  padding: 9px;
  overflow-wrap: anywhere;
  border: 1px dashed #5b4a2b;
  border-radius: 5px;
  background: #19160f;
  color: #e1b65d;
  font-size: 10px;
  letter-spacing: 1px;
  user-select: all;
}

.mfa-step .wide + .wide {
  margin-top: 8px;
}

.mfa-back {
  width: 100%;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #848a93;
  font-size: 8px;
}

.mfa-recovery-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 16px 0;
}

.mfa-recovery-codes code {
  padding: 9px 6px;
  border: 1px solid #4d422c;
  border-radius: 5px;
  background: #19160f;
  color: #e5bd69;
  font-size: 9px;
  text-align: center;
  user-select: all;
}

.operator-shell {
  position: relative;
  margin-left: auto;
}

.operator-shell .operator {
  margin-left: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.account-menu {
  position: absolute;
  top: 48px;
  right: 0;
  width: 270px;
  display: none;
  overflow: hidden;
  border: 1px solid #3e3729;
  border-radius: 8px;
  background: #13161a;
  box-shadow: 0 20px 60px #000;
}

.account-menu.open {
  display: block;
}

.account-menu header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid var(--line);
}

.account-menu header > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #171108;
  background: linear-gradient(145deg, #ebcc76, #9c691f);
  font-style: normal;
  font-weight: bold;
}

.account-menu header b,
.account-menu header small {
  display: block;
}

.account-menu header small {
  margin-top: 4px;
  color: #6f7580;
  font-size: 7px;
}

.account-menu > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.account-menu > div span {
  padding: 11px 14px;
  background: #101216;
  color: #6f7580;
  font-size: 7px;
}

.account-menu > div strong {
  display: block;
  margin-top: 4px;
  color: #c9cdd2;
  font-size: 8px;
}

.account-menu > button {
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: #15181c;
  color: #aaa;
  text-align: left;
  font-size: 8px;
}

.account-menu > button:hover {
  background: #1c2025;
}

.account-menu > button.logout {
  color: #ef8585;
}

.upload-button {
  display: block;
  width: calc(100% - 36px);
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pager button {
  width: 29px;
  height: 29px;
  border: 1px solid #353941;
  border-radius: 5px;
  background: #181b20;
  color: #d7ae55;
}

.pager button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.pager b {
  min-width: 44px;
  color: #b8a985;
  font-size: 8px;
  text-align: center;
}

.actions select {
  border: 1px solid #353941;
  background: #181b20;
  color: #aeb2b9;
  border-radius: 6px;
  padding: 10px 13px;
}

.server-table {
  min-width: 1050px;
}

.server-name {
  font-size: 10px;
}

.row-actions {
  display: flex;
  gap: 6px;
}

.icon-btn.danger {
  color: #ed8585;
  border-color: #5b3030;
  background: #241617;
}

.usage {
  height: 4px;
  margin-top: 13px;
  background: #25282e;
  border-radius: 4px;
  overflow: hidden;
}

.usage i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8d6428, #e1b85f);
}

.storage-grid {
  grid-template-columns: 1.2fr .8fr;
}

.storage-list {
  padding: 6px 18px 15px;
}

.storage-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.storage-list > div:last-child {
  border: 0;
}

.storage-list span b,
.storage-list span small {
  display: block;
}

.storage-list span b {
  font-size: 9px;
}

.storage-list span small {
  color: #6f7580;
  font-size: 7px;
  margin-top: 4px;
}

.storage-list > div > strong {
  font: 13px Georgia;
  color: #d7d2c9;
}

.storage-list > div > i {
  grid-column: 1 / -1;
  height: 4px;
  background: #262a30;
  border-radius: 4px;
  overflow: hidden;
}

.storage-list > div > i > em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7b5722, #d8ab52);
}

.database-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.database-grid > span {
  background: #121419;
  padding: 19px;
}

.database-grid small,
.database-grid strong {
  display: block;
}

.database-grid small {
  font-size: 7px;
  color: #747a83;
  text-transform: uppercase;
}

.database-grid strong {
  font: 18px Georgia;
  margin-top: 8px;
}

.storage-policy {
  margin-top: 16px;
}

.storage-policy .state-row:last-child {
  border-bottom: 0;
}

.chat-feature-panel {
  display: none;
}

.chat-feature-panel.active {
  display: block;
}

.status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.story-card {
  min-width: 0;
  padding: 0;
  border: 1px solid #30343b;
  border-radius: 8px;
  overflow: hidden;
  background: #15181d;
  color: #ddd;
  text-align: left;
  cursor: pointer;
}

.story-card:hover,
.story-card.active {
  border-color: #b78839;
  box-shadow: 0 0 0 1px #5e461f;
}

.status-preview-trigger:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.status-preview-modal {
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(12px);
}

.status-preview-shell {
  position: relative;
  width: min(400px, 100%);
  height: min(760px, calc(100dvh - 34px));
  min-height: 560px;
  display: grid;
  grid-template-rows: 78px minmax(0, 1fr) 48px;
  overflow: hidden;
  border: 1px solid rgba(219, 173, 81, .42);
  border-radius: 26px;
  background: #050608;
  box-shadow: 0 32px 110px #000, 0 0 0 1px rgba(255, 217, 132, .06) inset;
}

.status-preview-progress {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 5px;
}

.status-preview-progress span {
  height: 3px;
  flex: 1;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, .26);
}

.status-preview-progress i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #b77b20, #ffe29a);
  transition-property: width;
  transition-timing-function: linear;
}

.status-preview-progress span.complete i {
  width: 100%;
}

.status-preview-shell > header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 23px 16px 10px;
  background: linear-gradient(180deg, #090b0f 0%, rgba(9, 11, 15, .92) 72%, rgba(9, 11, 15, 0));
}

.status-preview-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 2px solid #d1a343;
  border-radius: 50%;
  background: linear-gradient(145deg, #dcb65f, #765019);
  color: #100d07;
  font-size: 12px;
  font-weight: 900;
}

.status-preview-shell > header > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.status-preview-shell > header b {
  overflow: hidden;
  color: #f6f2e8;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-preview-shell > header small {
  margin-top: 4px;
  color: #9a9ea5;
  font-size: 11px;
}

.status-preview-shell > header em {
  padding: 5px 7px;
  border: 1px solid #5f4a20;
  border-radius: 10px;
  color: #ddb456;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .08em;
  white-space: nowrap;
}

.status-preview-shell > header button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 20px;
}

.status-preview-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2c2415, #050608 65%);
}

.status-preview-media > img,
.status-preview-media > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #030405;
}

.status-preview-media > [hidden] {
  display: none;
}

.status-preview-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 12px;
  color: #9ca0a7;
  text-align: center;
}

.status-preview-fallback span {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: auto;
  border: 1px solid #715723;
  border-radius: 22px;
  background: linear-gradient(145deg, #392b11, #111318);
  color: #e1b757;
  font: 26px Georgia;
}

.status-preview-nav {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 24%;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 42px;
  transition: color .18s, background .18s;
}

.status-preview-nav:hover:not(:disabled),
.status-preview-nav:focus-visible:not(:disabled) {
  color: rgba(255, 255, 255, .86);
  background: linear-gradient(90deg, rgba(0, 0, 0, .4), transparent);
}

.status-preview-nav.previous {
  left: 0;
}

.status-preview-nav.next {
  right: 0;
}

.status-preview-nav.next:hover:not(:disabled),
.status-preview-nav.next:focus-visible:not(:disabled) {
  background: linear-gradient(-90deg, rgba(0, 0, 0, .4), transparent);
}

.status-preview-caption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 80px 22px 22px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9));
  pointer-events: none;
}

.status-preview-caption span {
  color: #e2b95c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.status-preview-caption p {
  margin: 9px 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.status-preview-caption small {
  color: #a4a8ae;
  font-size: 11px;
}

.status-preview-shell > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-top: 1px solid #24272c;
  background: #0b0d10;
  color: #7f858e;
  font-size: 10px;
}

.status-preview-shell > footer button {
  border: 0;
  background: transparent;
  color: #ddb456;
  font-size: 11px;
}

.story-visual {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background: radial-gradient(circle at 70% 15%, #7d5a20, transparent 25%), linear-gradient(145deg, #423113, #111318 68%);
}

.story-visual.blue {
  background: radial-gradient(circle at 70% 15%, #315c76, transparent 25%), linear-gradient(145deg, #173041, #111318 68%);
}

.story-visual.violet {
  background: radial-gradient(circle at 70% 15%, #6b426b, transparent 25%), linear-gradient(145deg, #332036, #111318 68%);
}

.story-visual span,
.story-visual small {
  color: #dfbd70;
  font-size: 7px;
  letter-spacing: 1px;
}

.story-visual strong {
  margin: 8px 0;
  font: 18px Georgia;
}

.story-visual.media-image {
  position: relative;
  background-position: center;
  background-size: cover;
}

.story-visual.media-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 10, .08) 30%, rgba(5, 7, 10, .94));
}

.story-visual.media-image > * {
  position: relative;
  z-index: 1;
}

.story-visual.media-video::before {
  content: "\25B6";
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: auto;
  border: 1px solid rgba(223, 189, 112, .7);
  border-radius: 50%;
  background: rgba(7, 9, 12, .72);
  color: #dfbd70;
  font-size: 18px;
}

.story-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #7f858e;
  text-align: center;
}

.story-empty.compact {
  min-height: 100px;
}

.story-copy {
  display: block;
  padding: 11px;
}

.story-copy b,
.story-copy small,
.story-copy em {
  display: block;
}

.story-copy small {
  min-height: 30px;
  margin: 5px 0 9px;
  color: #7f858e;
  font-size: 7px;
  line-height: 1.45;
}

.story-copy em {
  color: #d7ad57;
  font-size: 7px;
  font-style: normal;
}

.viewer-card {
  align-self: start;
}

.viewer-summary {
  padding: 22px 18px;
  border-bottom: 1px solid var(--line);
}

.viewer-summary strong,
.viewer-summary small {
  display: block;
}

.viewer-summary strong {
  font: 28px Georgia;
  color: #e2bd6b;
}

.viewer-summary small {
  margin-top: 6px;
  color: #747a84;
  font-size: 8px;
}

.viewer-list {
  padding: 7px 18px 15px;
}

.viewer-list > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.viewer-list i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #302610;
  color: #dfb65e;
  font-size: 8px;
  font-style: normal;
}

.viewer-list b {
  font-size: 9px;
}

.viewer-list small {
  display: block;
  margin-top: 4px;
  color: #686e77;
  font-size: 7px;
}

.viewer-card > .wide {
  width: calc(100% - 36px);
  margin: 0 18px 18px;
}

.modal-card textarea {
  display: block;
  width: 100%;
  height: 85px;
  margin-top: 7px;
  border: 1px solid #343840;
  border-radius: 5px;
  padding: 9px;
  resize: vertical;
  background: #181b20;
  color: #eee;
}

.status-upload {
  width: calc(100% - 36px);
  margin: 18px 18px 4px;
  font: inherit;
  cursor: pointer;
}

#statusMediaFile[hidden] {
  display: none !important;
}

.status-media-selection {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 18px 14px;
  padding: 11px 12px;
  border: 1px solid #343941;
  border-radius: 8px;
  background: #12151a;
}

.status-media-selection[hidden] {
  display: none;
}

.status-media-selection > span:first-child {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2a2111;
  color: #e2bd6b;
}

.status-media-selection > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.status-media-selection b,
.status-media-selection small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-media-selection small {
  margin-top: 4px;
  color: #7f858e;
}

.status-media-selection button {
  border: 0;
  background: transparent;
  color: #9ca1aa;
  font-size: 20px;
  cursor: pointer;
}

.livescore-empty {
  padding: 55px 22px;
  text-align: center;
  background: radial-gradient(circle at 50% 0, #2b2414, #111318 54%);
}

.livescore-empty > i {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: auto;
  border: 1px solid #685328;
  border-radius: 50%;
  background: #241d0f;
  font-size: 27px;
  font-style: normal;
}

.livescore-empty > small {
  display: block;
  margin-top: 20px;
  color: #d8aa52;
  font-size: 8px;
  letter-spacing: 2px;
}

.livescore-empty h2 {
  margin: 9px 0;
  font: 24px Georgia;
}

.livescore-empty p {
  max-width: 570px;
  margin: 0 auto 20px;
  color: #7e848d;
  line-height: 1.6;
}

.prediction-control-card {
  margin-top: 18px;
  overflow: hidden;
  border-color: #57451f;
  background:
    radial-gradient(circle at 88% -10%, rgba(218, 169, 55, .14), transparent 34%),
    linear-gradient(145deg, #15171b 0%, #0c0f12 56%, #12100b 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 225, 137, .04);
}

.prediction-control-card > header p {
  margin: 7px 0 0;
  color: #858b94;
  font-size: 10px;
}

.prediction-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 18px 0;
  overflow: hidden;
  border: 1px solid #30343a;
  border-radius: 12px;
  background: #30343a;
}

.prediction-summary > span {
  min-height: 74px;
  padding: 15px 17px;
  background: linear-gradient(150deg, #181b20, #101216);
}

.prediction-summary small,
.prediction-summary strong {
  display: block;
}

.prediction-summary small {
  color: #767d87;
  font-size: 8px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.prediction-summary strong {
  margin-top: 8px;
  color: #f0d071;
  font: 17px Georgia, serif;
}

.prediction-guide {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px 8px;
  color: #858b94;
  font-size: 9px;
}

.prediction-guide b {
  margin-right: 5px;
  color: #e8c463;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.prediction-guide span {
  padding: 6px 9px;
  border: 1px solid #343840;
  border-radius: 999px;
  background: #111419;
}

.prediction-filter-shell {
  margin: 8px 18px 4px;
  padding: 14px;
  border: 1px solid #2d3138;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(25, 28, 33, .96), rgba(12, 14, 18, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.prediction-filter-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px 12px;
}

.prediction-filter-heading small,
.prediction-filter-heading b { display: block; }
.prediction-filter-heading small { color: #a87d29; font-size: 7px; letter-spacing: 1.4px; }
.prediction-filter-heading b { margin-top: 4px; color: #e8eaed; font: 14px Georgia, serif; }
.prediction-filter-heading em { color: #6f7680; font-size: 8px; font-style: normal; }

.prediction-date-tabs,
.prediction-league-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.prediction-date-tabs { padding: 1px 1px 11px; }
.prediction-league-tabs { padding: 10px 1px 1px; border-top: 1px solid #292d33; }

.prediction-date-tabs button,
.prediction-league-tabs button {
  flex: 0 0 auto;
  border: 1px solid #373c45;
  outline: none;
  color: #8f96a0;
  background: linear-gradient(150deg, #191c21, #111318);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.prediction-date-tabs button:hover,
.prediction-league-tabs button:hover { border-color: #78602d; color: #e5e7e9; transform: translateY(-1px); }

.prediction-date-tabs button {
  position: relative;
  min-width: 88px;
  padding: 9px 12px 10px;
  border-radius: 11px;
  text-align: left;
}

.prediction-date-tabs button::after {
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #505660;
  content: '';
}

.prediction-date-tabs small,
.prediction-date-tabs b,
.prediction-date-tabs em { display: block; }
.prediction-date-tabs small { color: #777f89; font-size: 7px; letter-spacing: .9px; }
.prediction-date-tabs b { margin-top: 5px; color: #d5d8dc; font-size: 11px; }
.prediction-date-tabs em { margin-top: 4px; color: #676e77; font-size: 7px; font-style: normal; }

.prediction-date-tabs button.active {
  border-color: #c59a3d;
  color: #18130a;
  background: linear-gradient(145deg, #f0ce70, #b78021);
  box-shadow: 0 7px 20px rgba(174, 122, 30, .18), inset 0 1px rgba(255, 255, 255, .36);
}
.prediction-date-tabs button.active small,
.prediction-date-tabs button.active b,
.prediction-date-tabs button.active em { color: #241a08; }
.prediction-date-tabs button.active::after { background: #513707; }

.prediction-league-tabs button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
}
.prediction-league-tabs button span { font-size: 12px; }
.prediction-league-tabs button b { color: inherit; font-size: 9px; }
.prediction-league-tabs button em { min-width: 17px; padding: 2px 5px; border-radius: 999px; background: #252a31; color: #9097a1; font-size: 7px; font-style: normal; text-align: center; }
.prediction-league-tabs button.active { border-color: #997324; color: #efcc6b; background: linear-gradient(150deg, #2d2413, #16150f); box-shadow: inset 0 0 0 1px rgba(224, 178, 75, .07); }
.prediction-league-tabs button.active em { background: #b98a2e; color: #161006; }
.prediction-filter-empty { color: #757c85; font-size: 9px; }

.prediction-list {
  display: grid;
  gap: 9px;
  max-height: 610px;
  padding: 8px 18px 18px;
  overflow: auto;
}

.prediction-row {
  display: grid;
  grid-template-columns: 28px minmax(260px, 1.4fr) minmax(190px, .75fr) minmax(130px, .48fr) minmax(155px, .62fr);
  align-items: center;
  gap: 13px;
  min-height: 94px;
  padding: 13px 15px;
  border: 1px solid #30353c;
  border-radius: 12px;
  background: linear-gradient(115deg, rgba(29, 33, 39, .96), rgba(14, 17, 21, .98));
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.prediction-row:has(.prediction-enabled:checked) {
  border-color: #7a5c22;
  box-shadow: inset 3px 0 #d5a83f, 0 8px 26px rgba(0, 0, 0, .16);
}

.prediction-row:not(:has(.prediction-enabled:checked)) {
  opacity: .66;
}

.prediction-enabled {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #d5a83f;
}

.prediction-match {
  min-width: 0;
}

.prediction-match small,
.prediction-match b,
.prediction-match em {
  display: block;
}

.prediction-match small {
  color: #c19c4b;
  font-size: 8px;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.prediction-match b {
  margin-top: 7px;
  overflow: hidden;
  color: #f0f1f2;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-match em {
  margin-top: 5px;
  overflow: hidden;
  color: #737a84;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-field {
  min-width: 0;
}

.prediction-field > small {
  display: block;
  margin-bottom: 6px;
  color: #717883;
  font-size: 7px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.prediction-score-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 7px;
}

.prediction-score-inputs > b {
  color: #a48236;
}

.prediction-row input[type="number"],
.prediction-row select {
  width: 100%;
  height: 38px;
  border: 1px solid #3c4149;
  border-radius: 8px;
  padding: 0 10px;
  outline: none;
  background: linear-gradient(#171a1f, #111419);
  color: #f2f2f2;
  font-size: 10px;
}

.prediction-row select {
  color-scheme: dark;
  cursor: pointer;
}

.prediction-row select option {
  background: #15181d;
  color: #f0f1f2;
}

.prediction-row input[type="number"] {
  text-align: center;
}

.prediction-row input:focus,
.prediction-row select:focus {
  border-color: #bd8d2b;
  box-shadow: 0 0 0 3px rgba(194, 145, 44, .11);
}

.prediction-recommendation-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.prediction-recommendation-options button {
  height: 38px;
  border: 1px solid #3c4149;
  border-radius: 8px;
  background: linear-gradient(#171a1f, #111419);
  color: #7d848e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .45px;
  cursor: pointer;
}

.prediction-recommendation-options button:hover { border-color: #77602f; color: #e4c368; }
.prediction-recommendation-options button.active { border-color: #bd8d2b; background: linear-gradient(145deg, #d9ad4c, #9a6d1c); color: #171006; box-shadow: 0 5px 14px rgba(177, 126, 31, .16); }

.prediction-control-card > footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.prediction-control-card > footer b {
  color: #bd984a;
  font-size: 8px;
}

@media (max-width: 1120px) {
  .prediction-row {
    grid-template-columns: 28px minmax(240px, 1.25fr) minmax(180px, .8fr) minmax(120px, .55fr);
  }
  .prediction-row .prediction-field:last-child {
    grid-column: 2 / -1;
  }
}

@media (max-width: 720px) {
  .prediction-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prediction-guide {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .prediction-filter-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .prediction-row {
    grid-template-columns: 24px 1fr 1fr;
  }
  .prediction-match {
    grid-column: 2 / -1;
  }
  .prediction-row .prediction-field:last-child {
    grid-column: 2 / -1;
  }
  .prediction-control-card > header .actions {
    width: 100%;
  }
  .prediction-control-card > header .actions button {
    flex: 1;
  }
}

.concept-grid {
  margin-top: 16px;
}

.concept-grid strong {
  font-size: 16px;
}

.member-activity-button {
  width: calc(100% - 36px);
  margin: 0 18px 14px;
}

.member-activity-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 18px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.member-activity-summary article {
  padding: 14px;
  background: #15171b;
}

.member-activity-summary small,
.member-activity-summary b {
  display: block;
}

.member-activity-summary small {
  color: #747a84;
  font-size: 8px;
}

.member-activity-summary b {
  margin-top: 7px;
  color: #dfb75e;
  font-size: 15px;
}

.activity-rule {
  margin-bottom: 14px;
}

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

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

@media (max-width: 700px) {
  .login-panel {
    padding: 25px 20px;
  }

  .status-layout .card > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .status-layout .card > header .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .status-layout .card > header .actions button {
    width: 100%;
    min-width: 0;
  }

  .login-security {
    display: grid;
  }

  .database-grid {
    grid-template-columns: 1fr;
  }

  .story-grid {
    grid-template-columns: 1fr;
  }

  .status-preview-modal {
    padding: 0;
  }

  .status-preview-shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .member-activity-summary {
    grid-template-columns: 1fr;
  }
}

/* Premium Members workspace + global scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #a77a2d #0a0c0f;
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  border: 1px solid #191c21;
  background: linear-gradient(90deg, #080a0d, #0d1014 50%, #080a0d);
}

*::-webkit-scrollbar-thumb {
  border: 2px solid #090b0e;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1cd74 0%, #b88732 45%, #77501c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 151, .24), 0 0 10px rgba(196, 143, 47, .18);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe29a 0%, #d19d42 50%, #8e6121 100%);
}

*::-webkit-scrollbar-corner {
  background: #090b0e;
}

#members {
  position: relative;
  isolation: isolate;
}

#members::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(580px, 55vw);
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 143, 47, .105), transparent 68%);
  content: "";
  pointer-events: none;
  transform: translate(13%, -32%);
}

.member-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.member-page-kicker,
.member-directory-head > div > small {
  color: #d8a94e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
}

.member-page-head h1 {
  margin: 7px 0 6px;
  color: #f5f0e5;
  font: 400 31px/1.05 Georgia, serif;
  letter-spacing: -.02em;
}

.member-page-head p {
  margin: 0;
  color: #828894;
  font-size: 9px;
}

.member-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.member-head-actions > button {
  min-height: 40px;
}

.member-live-state {
  display: grid;
  grid-template-columns: 8px auto;
  column-gap: 8px;
  min-width: 153px;
  padding: 8px 12px;
  border: 1px solid rgba(79, 171, 118, .26);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(27, 57, 39, .48), rgba(14, 19, 17, .65));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.member-live-state > i {
  grid-row: 1 / 3;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #60d598;
  box-shadow: 0 0 0 4px rgba(96, 213, 152, .09), 0 0 14px rgba(96, 213, 152, .42);
}

.member-live-state b {
  color: #8cdfae;
  font-size: 7px;
  letter-spacing: .13em;
}

.member-live-state small {
  margin-top: 2px;
  color: #718078;
  font-size: 7px;
}

.member-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.member-kpi {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 132px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #292d34;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(24, 27, 32, .98), rgba(14, 16, 20, .98));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .025);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.member-kpi::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--member-tone, #c8973d);
  content: "";
  box-shadow: 0 0 18px var(--member-glow, rgba(200, 151, 61, .25));
}

.member-kpi::after {
  position: absolute;
  right: -38px;
  bottom: -55px;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--member-glow, rgba(200, 151, 61, .12)), transparent 68%);
  content: "";
}

.member-kpi:hover {
  border-color: color-mix(in srgb, var(--member-tone, #c8973d) 45%, #292d34);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .04);
  transform: translateY(-2px);
}

.member-kpi.active { --member-tone: #52c98a; --member-glow: rgba(82, 201, 138, .16); }
.member-kpi.dormant { --member-tone: #c8826c; --member-glow: rgba(200, 130, 108, .15); }
.member-kpi.engaged { --member-tone: #7399ce; --member-glow: rgba(115, 153, 206, .16); }

.member-kpi-code {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--member-tone, #c8973d) 42%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--member-tone, #c8973d) 11%, transparent);
  color: var(--member-tone, #d7a646);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}

.member-kpi > div { min-width: 0; }
.member-kpi > div > small {
  display: block;
  color: #7b828d;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
}

.member-kpi > div > strong {
  display: block;
  margin: 7px 0 5px;
  color: #f2eadb;
  font: 400 27px/1 Georgia, serif;
}

.member-kpi > div > p {
  margin: 0;
  overflow: hidden;
  color: #646b75;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-kpi > i {
  position: absolute;
  top: 13px;
  right: 15px;
  color: rgba(255, 255, 255, .075);
  font: italic 17px Georgia, serif;
}

.member-directory-card {
  border-color: #2c3037;
  border-radius: 11px;
  background: linear-gradient(155deg, #13161a, #0f1115 64%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .02);
}

.member-directory-card > .member-directory-head {
  min-height: 84px;
  padding: 19px 21px;
  background: linear-gradient(90deg, rgba(200, 151, 61, .045), transparent 45%);
}

.member-directory-head h2 {
  margin: 6px 0 4px;
  color: #eee8dc;
  font: 400 18px Georgia, serif;
}

.member-directory-head p {
  margin: 0;
  color: #686f7a;
  font-size: 8px;
}

.member-directory-meta {
  display: flex;
  align-items: center;
  gap: 13px;
}

.member-directory-meta > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #70c793;
  font-size: 7px;
  letter-spacing: .1em;
}

.member-directory-meta > span > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #59d08e;
  box-shadow: 0 0 10px rgba(89, 208, 142, .55);
}

.member-directory-meta > b {
  min-width: 64px;
  padding: 7px 10px;
  border: 1px solid #3a3427;
  border-radius: 999px;
  background: #1d1911;
  color: #dfba65;
  font-size: 8px;
  text-align: center;
}

.member-primary-tools {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(210px, 280px);
  gap: 10px;
  padding: 14px 18px 10px;
}

.member-search,
.member-primary-select,
.member-filter-grid label {
  position: relative;
  display: block;
}

.member-search > span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 14px;
  color: #c8a151;
  font: 20px Georgia, serif;
  transform: translateY(-40%);
}

.member-search > small,
.member-primary-select > small,
.member-filter-grid label > small {
  display: block;
  margin-bottom: 6px;
  color: #696f79;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
}

.member-search > small {
  position: absolute;
  top: 8px;
  left: 43px;
  margin: 0;
  pointer-events: none;
}

.member-search input,
.member-primary-select select,
.member-filter-grid select,
.member-filter-grid input {
  width: 100%;
  border: 1px solid #31363e;
  border-radius: 7px;
  outline: none;
  background: linear-gradient(145deg, #191c21, #14171b);
  color: #d9dce0;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.member-search input {
  height: 49px;
  padding: 19px 14px 6px 43px;
}

.member-primary-select select {
  height: 49px;
  padding: 0 12px;
  color-scheme: dark;
}

.member-search input:focus,
.member-primary-select select:focus,
.member-filter-grid select:focus,
.member-filter-grid input:focus {
  border-color: #806328;
  box-shadow: 0 0 0 3px rgba(200, 151, 61, .08);
}

.member-filter-panel {
  margin: 0 18px 10px;
  overflow: hidden;
  border: 1px solid #272c33;
  border-radius: 8px;
  background: rgba(10, 12, 15, .44);
}

.member-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-bottom: 1px solid #24282f;
}

.member-filter-title span b,
.member-filter-title span small {
  display: block;
}

.member-filter-title span b {
  color: #bbbfc6;
  font-size: 8px;
}

.member-filter-title span small {
  margin-top: 3px;
  color: #5f6670;
  font-size: 7px;
}

.member-filter-title em {
  padding: 5px 8px;
  border: 1px solid #51411f;
  border-radius: 999px;
  color: #b8954c;
  font-size: 6px;
  font-style: normal;
  letter-spacing: .12em;
}

.member-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr .85fr .9fr .9fr;
  gap: 9px;
  padding: 12px 13px 14px;
}

.member-filter-grid select,
.member-filter-grid input {
  height: 37px;
  padding: 0 9px;
  color: #aeb3bb;
  color-scheme: dark;
  font-size: 8px;
}

.member-filter-state {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 10px;
  padding: 0 18px 11px;
  border-bottom: 1px solid #252a31;
}

.member-filter-state > span {
  padding: 5px 9px;
  border: 1px solid #51411f;
  border-radius: 999px;
  background: #1e190f;
  color: #d5ad59;
  font-size: 7px;
}

.member-filter-state > span i {
  margin-right: 4px;
  color: #e7c36f;
  font-style: normal;
}

.member-filter-state > button {
  border: 0;
  background: transparent;
  color: #8d929b;
  font-size: 7px;
}

.member-filter-state > button:hover { color: #e0bd6b; }
.member-filter-state > small {
  margin-left: auto;
  color: #5f6670;
  font-size: 7px;
}

.member-table-scroll {
  max-width: 100%;
  background: #0e1014;
}

.member-premium-table {
  min-width: 1460px !important;
}

.member-premium-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 42px;
  padding: 0 13px;
  border-top: 0;
  border-bottom: 1px solid #2b3037;
  background: linear-gradient(180deg, #12151a, #0d0f13);
  color: #777e88;
  font-size: 7px;
  letter-spacing: .11em;
}

.member-premium-table tbody tr {
  background: rgba(16, 18, 22, .74);
  transition: background .16s ease, box-shadow .16s ease;
}

.member-premium-table tbody tr:nth-child(even) { background: rgba(19, 22, 27, .76); }
.member-premium-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(63, 50, 24, .34), rgba(24, 27, 32, .86) 40%, rgba(19, 22, 27, .9));
  box-shadow: inset 2px 0 #c6953c;
}

.member-premium-table td {
  height: 69px;
  padding: 10px 13px;
  border-color: #23272e;
  color: #a7adb6;
  font-size: 8px;
}

.member-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 155px;
}

.member-identity > i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #785b24;
  border-radius: 10px;
  background: linear-gradient(145deg, #3b2d14, #18160f);
  box-shadow: inset 0 1px rgba(255, 226, 151, .12);
  color: #edc66d;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.member-identity b,
.member-identity small {
  display: block;
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-identity b { color: #e7e2d8; font-size: 9px; }
.member-identity small { margin-top: 4px; color: #646b75; }

.member-phone,
.member-date {
  color: #aeb3ba;
  font-variant-numeric: tabular-nums;
}

.member-last-activity { color: #c2c5ca; }
.member-code {
  display: inline-block;
  max-width: 158px;
  padding: 5px 7px;
  overflow: hidden;
  border: 1px solid #292e35;
  border-radius: 5px;
  background: #0b0d10;
  color: #8491a2;
  font: 7px Consolas, monospace;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.member-premium-table .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 66px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  letter-spacing: .05em;
}

.member-premium-table .status i,
.member-notification-state .badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

.member-premium-table .status.active { border-color: #28553f; background: #142a20; }
.member-premium-table .status.banned { border-color: #663132; background: #30191b; }
.member-pin { justify-content: center; min-width: 58px; }

.member-notification-state small {
  margin-top: 5px !important;
  color: #626973 !important;
  font-size: 7px !important;
}

.member-notification-state .badge {
  gap: 5px;
  padding: 5px 8px;
}

.member-activity-cell {
  width: 104px;
}

.member-activity-cell > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.member-activity-cell b { color: #dbb45d; font-size: 11px; }
.member-activity-cell small { margin: 0 !important; color: #626973 !important; }
.member-activity-cell > i {
  display: block;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #292d33;
}

.member-activity-cell > i > em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #98702b, #e1b858);
  box-shadow: 0 0 8px rgba(225, 184, 88, .35);
}

.member-message-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.member-message-count b { color: #d8dde5; font-size: 12px; }
.member-message-count small { margin: 0 !important; }

.member-premium-table .restrict {
  display: inline-flex;
  padding: 6px 8px;
  border: 1px solid #654d20;
  background: #2a210f;
  white-space: nowrap;
}

.member-manage-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 31px;
  padding: 0 9px 0 11px;
  border: 1px solid #524322;
  border-radius: 6px;
  background: linear-gradient(145deg, #201c14, #141519);
  color: #cdb170;
  font-size: 7px;
}

.member-manage-button b {
  color: #e6bd61;
  font-size: 11px;
  transition: transform .16s ease;
}

.member-manage-button:hover {
  border-color: #8f6b28;
  background: linear-gradient(145deg, #342810, #17171a);
  color: #f1d793;
}

.member-manage-button:hover b { transform: translateX(2px); }

.member-table-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 150px;
  place-content: center;
  text-align: center;
}

.member-table-state > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #59451f;
  border-radius: 50%;
  color: #d4a94e;
  font-style: normal;
}

.member-table-state > i.spinner { width: 26px; height: 26px; }
.member-table-state b { color: #d6d9de; font-size: 9px; }
.member-table-state small { margin: 0 !important; color: #656c76 !important; }

.member-pagination {
  min-height: 59px;
  align-items: center;
  background: linear-gradient(180deg, #111419, #0e1014);
}

.member-pagination > span { color: #69717c; }
.member-pagination .pager {
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-pagination .pager > button,
.member-pagination .pager > b {
  display: grid;
  place-items: center;
  height: 30px;
  border: 1px solid #30353d;
  border-radius: 6px;
  background: #171a1f;
  color: #a7acb4;
}

.member-pagination .pager > button { width: 31px; font-size: 15px; }
.member-pagination .pager > b { min-width: 51px; padding: 0 8px; color: #d6b45e; font-size: 8px; }
.member-pagination .pager > button:disabled { cursor: default; opacity: .32; }
.member-pagination .pager > button:not(:disabled):hover { border-color: #7c6029; color: #e6c26b; }

.member-page-size {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 5px 6px 5px 12px;
  border: 1px solid #343944;
  border-radius: 10px;
  background:
    linear-gradient(112deg, rgba(207, 158, 62, .075), transparent 42%),
    linear-gradient(145deg, #171a1f, #101216);
  box-shadow: inset 0 1px rgba(255, 233, 184, .035), 0 7px 22px rgba(0, 0, 0, .2);
}

.member-page-size > span {
  display: flex;
  min-width: 82px;
  flex-direction: column;
  gap: 2px;
}

.member-page-size > span > small {
  color: #8b7450;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}

.member-page-size > span > b {
  color: #c7cbd1;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.member-page-size-options {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #292e36;
  border-radius: 8px;
  background: rgba(7, 9, 12, .68);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .38);
}

.member-page-size-options > button {
  width: auto !important;
  min-width: 34px;
  height: 28px !important;
  padding: 0 8px;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  outline: none;
  background: transparent !important;
  box-shadow: none;
  color: #777f8a !important;
  font-size: 9px !important;
  font-weight: 800;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.member-page-size-options > button:last-child { min-width: 45px; }
.member-page-size-options > button:hover,
.member-page-size-options > button:focus-visible {
  border-color: #4e422c !important;
  background: #242016 !important;
  color: #e3c67d !important;
}

.member-page-size-options > button.active {
  border-color: #9a732d !important;
  background: linear-gradient(145deg, #e1bd68, #a77327) !important;
  box-shadow: 0 4px 13px rgba(175, 123, 32, .22), inset 0 1px rgba(255, 245, 208, .38);
  color: #181107 !important;
  transform: translateY(-1px);
}

.member-export-modal { overflow: hidden; }
.member-export-body { padding: 18px; }
.member-export-range,
.member-export-all {
  border: 1px solid #30353d;
  border-radius: 10px;
  background: linear-gradient(145deg, #171a1f, #121418);
  padding: 16px;
}
.member-export-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.member-export-heading > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid #624c20;
  border-radius: 8px;
  background: #251e0f;
  color: #dfb650;
  font-style: normal;
}
.member-export-heading > span,
.member-export-all > span { display: flex; min-width: 0; flex-direction: column; }
.member-export-heading b,
.member-export-all b { color: #d9dde2; font-size: 10px; }
.member-export-heading small,
.member-export-all small { margin-top: 4px; color: #737b85; font-size: 8px; line-height: 1.5; }
.member-export-range .form-row { margin: 0 -7px 14px; }
.member-export-range .form-row label { margin: 0 7px; color: #939aa4; font-size: 8px; }
.member-export-range input {
  display: block;
  width: 100%;
  height: 39px;
  margin-top: 7px;
  padding: 0 10px;
  border: 1px solid #343a43;
  border-radius: 7px;
  outline: none;
  background: #101216;
  color: #d9dde2;
  color-scheme: dark;
}
.member-export-range input:focus { border-color: #806329; box-shadow: 0 0 0 3px rgba(200,151,61,.08); }
.member-export-separator { display: flex; align-items: center; gap: 10px; padding: 12px 4px; color: #59616c; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.member-export-separator::before,
.member-export-separator::after { content: ""; height: 1px; flex: 1; background: #292e35; }
.member-export-all { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 13px; }
.member-export-all > strong { color: #dfb650; font-size: 11px; white-space: nowrap; }
.member-export-all > button { grid-column: 1 / -1; }
.member-export-modal button:disabled { cursor: wait; opacity: .55; }
@media(max-width:700px){.member-export-body{padding:13px}.member-export-range,.member-export-all{padding:13px}.member-export-range .form-row{grid-template-columns:1fr;gap:12px}.member-export-all{grid-template-columns:1fr}.member-export-all>strong{justify-self:start}}

@media (max-width: 1180px) {
  .member-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .member-page-head { align-items: flex-start; flex-direction: column; }
  .member-head-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .member-primary-tools { grid-template-columns: 1fr; }
  .member-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  *::-webkit-scrollbar { width: 7px; height: 7px; }
  .member-page-head h1 { font-size: 27px; }
  .member-head-actions > button { flex: 1; }
  .member-live-state { width: 100%; }
  .member-kpi-grid { grid-template-columns: 1fr; }
  .member-kpi { min-height: 112px; }
  .member-directory-card > .member-directory-head { align-items: flex-start; gap: 13px; flex-direction: column; }
  .member-directory-meta { width: 100%; justify-content: space-between; }
  .member-primary-tools { padding-inline: 12px; }
  .member-filter-panel { margin-inline: 12px; }
  .member-filter-grid { grid-template-columns: 1fr; }
  .member-filter-state { align-items: flex-start; flex-wrap: wrap; padding-inline: 12px; }
  .member-filter-state > small { width: 100%; margin-left: 0; }
  .member-pagination { align-items: flex-start; gap: 12px; flex-direction: column; }
  .member-pagination .pager { width: 100%; align-items: stretch; }
  .member-pagination .pager > button { width: 38px; height: 42px; flex: 0 0 38px; }
  .member-page-size { min-width: 0; flex: 1; justify-content: space-between; padding-left: 10px; }
  .member-page-size > span { min-width: 70px; }
  .member-page-size-options { flex: 1; justify-content: stretch; }
  .member-page-size-options > button,
  .member-page-size-options > button:last-child { min-width: 0; padding-inline: 4px; flex: 1; }
}

@media (max-width: 430px) {
  .member-page-size { gap: 6px; }
  .member-page-size > span { display: none; }
}

/* Members detail polish and non-native premium filter menus */
.member-directory-card > .member-directory-head {
  position: relative;
  overflow: hidden;
  border-bottom-color: #343023;
  background:
    linear-gradient(90deg, rgba(211, 163, 70, .095), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 9px),
    linear-gradient(145deg, #171a1f, #101216);
}

.member-directory-card > .member-directory-head::after {
  position: absolute;
  right: 115px;
  bottom: -57px;
  width: 180px;
  height: 110px;
  border: 1px solid rgba(205, 157, 66, .12);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 55px rgba(190, 137, 43, .06);
  transform: rotate(-13deg);
}

.member-directory-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
}

.member-directory-title > div > small {
  color: #d8a94e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
}

.member-directory-emblem {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #675126;
  border-radius: 11px;
  background: radial-gradient(circle at 50% 35%, #2d2516, #101216 70%);
  box-shadow: inset 0 1px rgba(255, 230, 167, .11), 0 7px 24px rgba(0, 0, 0, .28);
}

.member-directory-emblem::after {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(233, 190, 96, .15);
  border-radius: 8px;
  content: "";
}

.member-directory-emblem img {
  position: relative;
  z-index: 1;
  width: 35px;
  height: 35px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(232, 183, 75, .26));
}

.member-directory-meta {
  position: relative;
  z-index: 1;
}

.member-primary-tools {
  position: relative;
  background: linear-gradient(180deg, rgba(17, 20, 25, .9), rgba(12, 14, 18, .62));
}

.member-search::after {
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 169, 79, .4));
  content: "";
  pointer-events: none;
}

.member-filter-panel {
  overflow: visible;
  background:
    linear-gradient(120deg, rgba(199, 148, 52, .035), transparent 34%),
    linear-gradient(145deg, rgba(17, 20, 24, .94), rgba(11, 13, 17, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}

.member-filter-title {
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, rgba(34, 29, 18, .58), transparent 48%);
}

.member-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
}

.member-select-shell {
  position: relative;
  width: 100%;
}

.member-select-shell.open {
  z-index: 50;
}

.member-select-trigger {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 14px;
  align-items: center;
  width: 100%;
  height: 49px;
  padding: 0 11px 0 9px;
  border: 1px solid #323740;
  border-radius: 7px;
  outline: none;
  background:
    linear-gradient(145deg, rgba(28, 31, 37, .98), rgba(17, 20, 24, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  color: #b8bdc5;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.member-filter-grid .member-select-trigger {
  height: 37px;
}

.member-select-trigger:hover,
.member-select-trigger:focus-visible,
.member-select-shell.open .member-select-trigger {
  border-color: #806329;
  box-shadow: 0 0 0 3px rgba(200, 151, 61, .075), inset 0 1px rgba(255, 234, 184, .045);
  color: #ebe1ce;
}

.member-select-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #50401f;
  border-radius: 6px;
  background: #211b10;
  color: #d5aa50;
  font-size: 9px;
  font-style: normal;
}

.member-select-trigger > span {
  min-width: 0;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-primary-select .member-select-trigger > span {
  font-size: 9px;
}

.member-select-trigger > b {
  color: #cba34d;
  font-size: 12px;
  text-align: center;
  transition: transform .18s ease;
}

.member-select-shell.open .member-select-trigger > b {
  transform: rotate(180deg);
}

.member-select-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: 100%;
  max-height: 240px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #594724;
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% -20%, rgba(211, 164, 73, .12), transparent 38%),
    rgba(12, 14, 18, .985);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .64), inset 0 1px rgba(255, 228, 162, .05);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(.985);
  transform-origin: top;
  transition: opacity .14s ease, transform .14s ease;
}

.member-select-shell.open .member-select-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.member-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: none;
  background: transparent;
  color: #8e949d;
  font-size: 8px;
  text-align: left;
}

.member-select-option + .member-select-option {
  margin-top: 2px;
}

.member-select-option i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #302610;
  color: #dfb557;
  font-size: 7px;
  font-style: normal;
  opacity: 0;
}

.member-select-option:hover,
.member-select-option:focus-visible {
  border-color: #373124;
  background: linear-gradient(90deg, rgba(66, 51, 21, .54), rgba(26, 28, 32, .5));
  color: #e4dccd;
}

.member-select-option.selected {
  border-color: #5d4922;
  background: linear-gradient(90deg, #342811, #18181a);
  color: #edcb78;
}

.member-select-option.selected i {
  opacity: 1;
}

.member-filter-grid input[type="date"] {
  padding-left: 11px;
  background:
    linear-gradient(145deg, rgba(28, 31, 37, .98), rgba(17, 20, 24, .98));
}

.member-filter-grid input[type="date"]::-webkit-calendar-picker-indicator {
  padding: 6px;
  border-radius: 5px;
  background-color: rgba(199, 151, 61, .12);
  filter: invert(78%) sepia(43%) saturate(775%) hue-rotate(358deg) brightness(89%);
  cursor: pointer;
}

/* Symmetrical executive System Health */
#health {
  position: relative;
  isolation: isolate;
}

#health::before {
  position: absolute;
  z-index: -1;
  top: -110px;
  right: -80px;
  width: 540px;
  height: 390px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 143, 51, .095), transparent 69%);
  content: "";
  pointer-events: none;
}

.health-control-head {
  position: relative;
  min-height: 104px;
  margin-bottom: 14px;
  padding: 21px 23px;
  overflow: hidden;
  align-items: center;
  border: 1px solid #302d26;
  border-radius: 12px;
  background:
    linear-gradient(110deg, rgba(193, 146, 55, .085), transparent 39%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .011) 0 1px, transparent 1px 10px),
    linear-gradient(145deg, #171a1f, #0e1014);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
}

.health-control-head::after {
  position: absolute;
  top: -94px;
  right: 210px;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(218, 174, 84, .075);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 70px rgba(205, 153, 57, .04);
}

.health-control-head > span,
.health-head-actions {
  position: relative;
  z-index: 1;
}

.health-control-head > span > small {
  letter-spacing: .22em;
}

.health-control-head h1 {
  margin-block: 7px 5px;
  color: #f2ece1;
  font-size: 31px;
}

.health-head-actions {
  display: flex;
  align-items: stretch;
  gap: 9px;
}

.health-head-badges {
  display: grid;
  align-content: center;
  min-width: 250px;
  padding: 9px 12px;
  border: 1px solid #343129;
  border-radius: 8px;
  background: rgba(10, 12, 15, .55);
}

.health-head-badges > small {
  margin-bottom: 7px;
  color: #626973;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .13em;
}

.health-head-badges > span {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.health-head-badges .badge {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
  font-size: 7px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#refreshHealth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 136px;
  border-color: #6a5328;
  border-radius: 8px;
  background: linear-gradient(145deg, #2b2313, #171719);
  color: #dfbd6c;
  box-shadow: inset 0 1px rgba(255, 232, 176, .055);
  font-size: 8px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

#refreshHealth:hover:not(:disabled) {
  border-color: #98732d;
  background: linear-gradient(145deg, #392b12, #19191b);
  transform: translateY(-1px);
}

#refreshHealth:disabled {
  cursor: wait;
  opacity: .62;
}

#refreshHealth > i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #59451f;
  border-radius: 6px;
  background: #211b10;
  color: #e3b95e;
  font-size: 12px;
  font-style: normal;
}

.health-button-spinner {
  width: 14px !important;
  height: 14px !important;
  border: 2px solid #574923 !important;
  border-top-color: #e0b75d !important;
  border-radius: 50% !important;
  background: transparent !important;
  animation: spin .8s linear infinite;
}

.health-scan-banner {
  min-height: 60px;
  margin-bottom: 19px;
  border-color: #3d443d;
  background:
    linear-gradient(100deg, rgba(24, 43, 33, .63), rgba(18, 22, 21, .77) 50%, rgba(27, 25, 19, .73));
  color: #9ab9a6;
  box-shadow: inset 0 1px rgba(255, 255, 255, .02);
}

.health-scan-banner > b {
  border-color: #476652;
  background: #14251b;
  color: #71cb96;
}

.health-scan-banner > em {
  margin-left: auto;
  padding: 6px 9px;
  border: 1px solid #504322;
  border-radius: 999px;
  background: #201a0f;
  color: #c9a653;
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .13em;
  white-space: nowrap;
}

.health-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 1px 11px;
}

.health-section-heading small {
  color: #bf974b;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .17em;
}

.health-section-heading h2 {
  margin: 5px 0 0;
  color: #dcd7ce;
  font: 400 17px Georgia, serif;
}

.health-section-heading p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #666d76;
  font-size: 7px;
}

.health-section-heading p > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #59ca8a;
  box-shadow: 0 0 9px rgba(89, 202, 138, .5);
}

#health .health-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

#health .health-grid article {
  position: relative;
  grid-column: span 3;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 119px;
  padding: 17px;
  overflow: hidden;
  border-color: #2c3037;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(188, 141, 51, .035), transparent 46%),
    linear-gradient(145deg, #181b20, #101216);
  box-shadow: 0 13px 32px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .02);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

#health .health-grid article:nth-last-child(-n+3) {
  grid-column: span 4;
}

#health .health-grid article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: #98742f;
  content: "";
  opacity: .72;
}

#health .health-grid article::after {
  position: absolute;
  right: -35px;
  bottom: -44px;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 143, 50, .075), transparent 70%);
  content: "";
}

#health .health-grid article:has(strong.green)::before {
  background: #52bd80;
  box-shadow: 0 0 15px rgba(82, 189, 128, .22);
}

#health .health-grid article:has(strong.red)::before {
  background: #c76d67;
  box-shadow: 0 0 15px rgba(199, 109, 103, .2);
}

#health .health-grid article:has(strong.amber)::before {
  background: #c99a42;
  box-shadow: 0 0 15px rgba(201, 154, 66, .18);
}

#health .health-grid article:hover {
  border-color: #4d4534;
  box-shadow: 0 17px 38px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .025);
  transform: translateY(-2px);
}

.health-card-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #4d432d;
  border-radius: 9px;
  background: #211c12;
  color: #d2aa59;
  font-size: 11px;
}

#health .health-grid article:has(strong.green) .health-card-icon {
  border-color: #345e46;
  background: #14271d;
  color: #68c890;
}

#health .health-grid article:has(strong.red) .health-card-icon {
  border-color: #61383a;
  background: #2a191a;
  color: #d77b75;
}

#health .health-grid article > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

#health .health-grid label,
#health .health-grid strong,
#health .health-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#health .health-grid label {
  color: #737a84;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
}

#health .health-grid strong {
  margin: 8px 0 6px;
  font: 700 10px Arial, sans-serif;
  letter-spacing: .015em;
}

#health .health-grid strong.green { color: #70c994; }
#health .health-grid strong.red { color: #d9827c; }
#health .health-grid strong.amber { color: #d3aa58; }

#health .health-grid small {
  color: #5f6670;
  font-size: 7px;
}

.health-card-index {
  position: absolute;
  z-index: 1;
  top: 11px;
  right: 12px;
  color: rgba(255, 255, 255, .055);
  font: italic 14px Georgia, serif;
}

.health-detail-grid {
  align-items: stretch;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#health .health-detail-grid > .card {
  min-height: 307px;
  border-color: #2c3037;
  border-radius: 11px;
  background: linear-gradient(150deg, #15181d, #0f1115);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .02);
}

#health .health-detail-grid > .card > header {
  min-height: 72px;
  border-bottom-color: #292d34;
  background: linear-gradient(90deg, rgba(190, 142, 50, .05), transparent 48%);
}

#health .health-detail-grid > .card > header h2 {
  color: #e3ded5;
  font-size: 17px;
}

#healthIssueCount {
  max-width: 180px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid #3c403e;
  border-radius: 999px;
  background: #151a17;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#healthIssueCount.green {
  border-color: #315841;
  background: #13231a;
  color: #69c48e;
}

#healthIssueCount.red {
  border-color: #603537;
  background: #291819;
  color: #d87b76;
}

#health .health-issues {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 17px;
}

#health .health-issues li {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #2b3036;
  border-radius: 8px;
  background: rgba(18, 21, 25, .83);
}

#health .health-issues li > i {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid #3d674c;
  border-radius: 50%;
  background: #14271c;
  color: #6dcb93;
  font-style: normal;
}

#health .health-issues li > span b,
#health .health-issues li > span small {
  display: block;
}

#health .health-issues li > span b {
  color: #c8ccd1;
  font-size: 8px;
}

#health .health-issues li > span small {
  margin-top: 4px;
  color: #656c76;
  font-size: 7px;
  line-height: 1.45;
}

.health-incidents-card > footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  border-top: 1px solid #252a30;
  color: #626973;
}

.health-incidents-card > footer > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c49740;
  box-shadow: 0 0 7px rgba(196, 151, 64, .45);
}

.health-guide-card > header > em {
  padding: 6px 9px;
  border: 1px solid #4e4124;
  border-radius: 999px;
  background: #1e190f;
  color: #c8a555;
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
}

#health .health-guide-card .state-row {
  min-height: 59px;
  padding: 11px 17px;
  border-bottom-color: #252a30;
}

#health .health-guide-card .state-row > i {
  width: 31px;
  height: 31px;
  border: 1px solid #3b4148;
  background: #171a1f;
  font-size: 8px;
}

#health .health-guide-card .state-row.healthy > i {
  border-color: #3a684d;
  background: #14271c;
  color: #6ac990;
}

#health .health-guide-card .state-row.error > i {
  border-color: #62383a;
  background: #2a191a;
  color: #d77b76;
}

#health .health-guide-card .state-row.disabled > i {
  border-color: #4b4f56;
  color: #8b9199;
}

#health .health-guide-card .state-row b {
  color: #c5c9cf;
  font-size: 8px;
  letter-spacing: .025em;
}

#health .health-guide-card .state-row small {
  color: #656c75;
  font-size: 7px;
  line-height: 1.45;
}

#health .health-readonly-note {
  margin: 13px 17px 16px;
  border-color: #4d4025;
  background: linear-gradient(90deg, #211a0f, #181714);
  color: #bba266;
}

@media (max-width: 1180px) {
  #health .health-grid article {
    grid-column: span 4;
  }

  #health .health-grid article:nth-last-child(-n+2) {
    grid-column: span 6;
  }

  #health .health-grid article:nth-child(9) {
    grid-column: span 4;
  }
}

@media (max-width: 900px) {
  .health-control-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .health-head-actions {
    width: 100%;
  }

  .health-head-badges {
    flex: 1;
  }

  #health .health-grid article,
  #health .health-grid article:nth-child(9),
  #health .health-grid article:nth-last-child(-n+2) {
    grid-column: span 6;
  }

  .health-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .health-control-head h1 { font-size: 27px; }
  .health-head-actions { flex-direction: column; }
  .health-head-badges { width: 100%; }
  #refreshHealth { min-height: 43px; }
  .health-scan-banner { align-items: flex-start; }
  .health-scan-banner > em { display: none; }
  .health-section-heading { align-items: flex-start; flex-direction: column; }
  #health .health-grid article,
  #health .health-grid article:nth-child(9),
  #health .health-grid article:nth-last-child(-n+2) { grid-column: span 12; }
  #health .health-grid article { min-height: 105px; }
}

@media (max-width: 700px) {
  .member-directory-title { align-items: flex-start; }
  .member-directory-emblem { width: 41px; height: 41px; }
  .member-directory-emblem img { width: 31px; height: 31px; }
  .member-directory-card > .member-directory-head::after { display: none; }
}

/* Dashboard command center */
.dashboard-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}

.dashboard-toolbar > span > small {
  color: var(--gold);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2.1px;
}

.dashboard-toolbar h1 {
  margin: 7px 0 0;
  font: 400 29px Georgia, serif;
}

.dashboard-toolbar > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-toolbar select {
  height: 39px;
  padding: 0 35px 0 13px;
  border: 1px solid #3a3d42;
  border-radius: 7px;
  background: #16191d;
  color: #c6c8cc;
}

.dashboard-sync {
  display: grid;
  grid-template-columns: 8px auto;
  column-gap: 8px;
  min-width: 160px;
  padding-right: 13px;
  border-right: 1px solid #292d33;
}

.dashboard-sync > i {
  grid-row: 1 / 3;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ed58c;
  box-shadow: 0 0 0 4px rgba(78,213,140,.1), 0 0 12px rgba(78,213,140,.45);
  animation: dashboardPulse 2.2s ease-in-out infinite;
}

.dashboard-sync b,
.dashboard-sync small {
  display: block;
}

.dashboard-sync b {
  color: #cdd1d5;
  font-size: 8px;
}

.dashboard-sync small {
  margin-top: 3px;
  color: #646b75;
  font-size: 7px;
}

.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  min-height: 258px;
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid #59451e;
  border-radius: 13px;
  background:
    linear-gradient(112deg, rgba(37,28,12,.98), rgba(16,18,22,.96) 48%, rgba(8,10,13,.99)),
    #111318;
  box-shadow: inset 0 1px rgba(255,235,177,.06), 0 20px 55px rgba(0,0,0,.18);
}

.dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  top: -110px;
  right: 12%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,174,67,.14), transparent 68%);
  pointer-events: none;
}

.dashboard-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 32px;
}

.dashboard-live {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(102,190,139,.28);
  border-radius: 99px;
  background: rgba(24,57,39,.42);
  color: #6ed99a;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.dashboard-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60d693;
  box-shadow: 0 0 9px #54d18c;
}

.dashboard-hero h2 {
  max-width: 640px;
  margin: 15px 0 8px;
  color: #fff4db;
  font: 400 clamp(25px, 2.7vw, 38px) Georgia, serif;
  letter-spacing: -.6px;
  text-shadow: 0 2px 20px rgba(225,174,67,.08);
}

.dashboard-hero-copy > p {
  max-width: 620px;
  margin: 0;
  color: #918b80;
  font-size: 10px;
  line-height: 1.65;
}

.dashboard-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.dashboard-actions button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #3b3931;
  border-radius: 6px;
  background: rgba(22,24,28,.78);
  color: #a7a8aa;
  font-size: 8px;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.dashboard-actions button:first-child {
  border-color: #8a6829;
  background: linear-gradient(145deg, #d7a849, #9d6d23);
  color: #161007;
  font-weight: 700;
}

.dashboard-actions button:hover {
  border-color: #b48b3d;
  color: #f1c86c;
  transform: translateY(-1px);
}

.dashboard-actions button:first-child:hover {
  color: #161007;
}

.dashboard-actions b {
  font-size: 12px;
}

.dashboard-rule {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 720px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(119,104,72,.3);
}

.dashboard-rule > span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid #5d4922;
  border-radius: 50%;
  color: #d7ad56;
  font-size: 7px;
  place-items: center;
}

.dashboard-rule p {
  flex: 1;
  margin: 0;
}

.dashboard-rule b,
.dashboard-rule small {
  display: block;
}

.dashboard-rule b {
  color: #c6b994;
  font-size: 8px;
}

.dashboard-rule small {
  margin-top: 4px;
  color: #756e60;
  font-size: 7px;
  line-height: 1.45;
}

.dashboard-rule button {
  border: 0;
  background: none;
  color: #d2a94e;
  font-size: 8px;
  white-space: nowrap;
}

.dashboard-emblem {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 258px;
  place-items: center;
}

.dashboard-emblem img {
  position: relative;
  z-index: 3;
  width: 118px;
  height: 118px;
  border-radius: 27px;
  box-shadow: 0 18px 45px rgba(0,0,0,.55), 0 0 30px rgba(216,166,56,.15);
}

.emblem-ring {
  position: absolute;
  border: 1px solid rgba(218,169,69,.24);
  border-radius: 50%;
}

.ring-one {
  width: 184px;
  height: 184px;
  box-shadow: inset 0 0 35px rgba(221,172,66,.04);
}

.ring-two {
  width: 226px;
  height: 226px;
  border-style: dashed;
  opacity: .42;
  animation: dashboardOrbit 28s linear infinite;
}

.dashboard-emblem > small,
.dashboard-emblem > b {
  position: absolute;
  bottom: 26px;
  color: #8b7549;
  font-size: 6px;
  letter-spacing: 2px;
}

.dashboard-emblem > b {
  bottom: 14px;
  color: #c39c49;
  font-size: 7px;
}

.emblem-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8b64f;
  box-shadow: 0 0 12px #e8b64f;
}

.dot-one { top: 37px; right: 23%; }
.dot-two { right: 11%; bottom: 72px; width: 4px; height: 4px; opacity: .65; }

.dashboard-metrics {
  gap: 11px;
}

.dashboard-metrics .dashboard-metric {
  position: relative;
  min-height: 146px;
  overflow: hidden;
  padding: 15px 16px;
  border-color: #2c3036;
  background: linear-gradient(155deg, #171a1f, #101216 72%);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.dashboard-metrics .dashboard-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: #d3a64d;
}

.dashboard-metrics .dashboard-metric::after {
  content: "";
  position: absolute;
  top: -48px;
  right: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,168,70,.12), transparent 70%);
}

.dashboard-metrics .dashboard-metric:hover {
  z-index: 2;
  border-color: #64502a;
  transform: translateY(-3px);
  box-shadow: 0 13px 34px rgba(0,0,0,.25);
}

.metric-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-heading em {
  color: #4f555e;
  font-size: 7px;
  font-style: normal;
  letter-spacing: 1px;
}

.metric-symbol {
  display: grid;
  width: 30px;
  height: 30px;
  border: 1px solid #55441f;
  border-radius: 8px;
  background: #2b2415;
  color: #e7ba5d;
  font-size: 15px;
  font-style: normal;
  place-items: center;
}

.metric-symbol svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-metric > label {
  display: block;
  margin-top: 13px;
}

.dashboard-metric > strong {
  margin: 7px 0 9px;
  color: #f0eee8;
  font-size: clamp(21px, 2vw, 27px);
}

.metric-trend {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-trend small {
  position: relative;
  z-index: 1;
  padding: 4px 7px;
  border-radius: 99px;
  background: rgba(37,89,61,.25);
}

.metric-trend small.negative {
  background: rgba(108,46,46,.25);
}

.metric-trend i {
  width: 28px;
  height: 10px;
  border-top: 2px solid #71613d;
  border-right: 2px solid #71613d;
  transform: skewY(-18deg);
  opacity: .62;
}

.dashboard-metric.blue::before { background: #609ac5; }
.dashboard-metric.blue .metric-symbol { border-color: #2d526b; background: #172632; color: #78b5df; }
.dashboard-metric.green::before { background: #59c88b; }
.dashboard-metric.green .metric-symbol { border-color: #2b6547; background: #17291f; color: #67d399; }
.dashboard-metric.violet::before { background: #a681d1; }
.dashboard-metric.violet .metric-symbol { border-color: #57416d; background: #251d2e; color: #b99ad9; }
.dashboard-metric.amber::before { background: #e0a24a; }

.dashboard-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid #2b2f35;
  border-radius: 8px;
  background: #0e1013;
}

.dashboard-insights > span {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 13px 17px;
  border-right: 1px solid #292d33;
}

.dashboard-insights > span:last-child {
  border-right: 0;
}

.dashboard-insights small {
  grid-column: 1;
  color: #656c76;
  font-size: 7px;
  letter-spacing: .8px;
}

.dashboard-insights b {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: #e6b85a;
  font: 17px Georgia, serif;
}

.dashboard-insights em {
  color: #8a8f96;
  font-size: 8px;
  font-style: normal;
}

.dashboard-content-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr);
}

.dashboard-chart-card,
.dashboard-report-card {
  box-shadow: 0 12px 35px rgba(0,0,0,.12);
}

.dashboard-chart-card > header,
.dashboard-report-card > header {
  min-height: 66px;
  background: linear-gradient(90deg, rgba(37,29,14,.42), transparent 55%);
}

.chart-head-stats {
  display: flex;
  gap: 8px;
}

.chart-head-stats > span {
  min-width: 90px;
  padding: 8px 10px;
  border: 1px solid #30343a;
  border-radius: 6px;
  background: #0d0f12;
}

.chart-head-stats small,
.chart-head-stats b {
  display: block;
}

.chart-head-stats small {
  color: #646b75;
  font-size: 6px;
  letter-spacing: .8px;
}

.chart-head-stats b {
  margin-top: 4px;
  color: #e2c17b;
  font: 13px Georgia, serif;
}

.chart-shell {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  min-height: 264px;
  padding: 17px 17px 0;
  background: radial-gradient(circle at 50% 100%, rgba(208,157,56,.07), transparent 55%);
}

.chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 210px;
  padding: 1px 8px 0 0;
  color: #4e555f;
  font-size: 6px;
  text-align: right;
}

.dashboard-chart-card .bar-chart {
  height: 210px;
  padding: 9px 5% 0;
  gap: 5%;
  border: 0;
  background: repeating-linear-gradient(to bottom, #2a2e34 0, #2a2e34 1px, transparent 1px, transparent 52px);
}

.dashboard-data-state {
  align-self: stretch;
  flex: 1;
  display: grid;
  place-items: center;
  color: #8f98a7;
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
}

.dashboard-table-state {
  padding: 24px 12px;
  color: #8f98a7;
  text-align: center;
  letter-spacing: .04em;
}

.dashboard-chart-card .chart-day {
  gap: 5px;
}

.dashboard-chart-card .chart-day i {
  width: clamp(8px, 1vw, 15px);
  min-height: 7px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, #f0ca6e, #8e6324);
  box-shadow: 0 0 12px rgba(221,172,70,.12);
  transition: filter .18s ease, transform .18s ease;
}

.dashboard-chart-card .chart-day i:last-of-type {
  background: linear-gradient(180deg, #76b4dc, #385f7b);
  box-shadow: 0 0 10px rgba(83,151,197,.12);
}

.dashboard-chart-card .chart-day:hover i {
  filter: brightness(1.2);
  transform: scaleX(1.08);
}

.dashboard-chart-card .chart-day small {
  bottom: -21px;
  color: #686f79;
}

.dashboard-chart-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 47px;
  border-top: 1px solid #262a30;
}

.dashboard-chart-card > footer small {
  color: #666d76;
}

.dashboard-chart-card .legend {
  display: flex;
  gap: 13px;
}

.dashboard-chart-card .legend span {
  display: flex;
  align-items: center;
  color: #898f97;
}

.dashboard-chart-card .legend i {
  width: 8px;
  height: 8px;
  margin: 0 6px 0 0;
  border-radius: 2px;
  background: #d7aa50;
}

.dashboard-chart-card .legend span:last-child i {
  background: #5689ad;
}

.dashboard-report-card .table-scroll {
  max-height: 263px;
}

.dashboard-report-card .compact {
  min-width: 590px;
}

.dashboard-report-card .compact tbody tr:first-child td {
  background: rgba(216,169,75,.055);
  color: #d4d0c7;
}

.dashboard-report-card .compact tbody tr:first-child td:first-child {
  box-shadow: inset 2px 0 #d5a94e;
  color: #e3ba60;
  font-weight: 700;
}

.dashboard-report-card .compact tbody tr:hover td {
  background: #181b20;
}

.dashboard-report-card > footer {
  display: flex;
  justify-content: space-between;
  min-height: 47px;
  border-top: 1px solid #262a30;
}

.dashboard-report-card > footer span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dashboard-report-card > footer i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #56cf8d;
  box-shadow: 0 0 7px rgba(86,207,141,.45);
}

@keyframes dashboardPulse {
  0%, 100% { opacity: .58; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes dashboardOrbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 1200px) {
  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .dashboard-content-grid {
    grid-template-columns: 1fr;
  }
}

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

  .dashboard-emblem {
    display: none;
  }

  .dashboard-insights {
    grid-template-columns: 1fr;
  }

  .dashboard-insights > span {
    border-right: 0;
    border-bottom: 1px solid #292d33;
  }

  .dashboard-insights > span:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 700px) {
  .dashboard-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-toolbar > div {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-sync {
    min-width: 0;
  }

  .dashboard-toolbar select {
    max-width: 155px;
  }

  .dashboard-hero-copy {
    padding: 24px 20px;
  }

  .dashboard-rule {
    align-items: flex-start;
  }

  .dashboard-rule button {
    display: none;
  }

  .dashboard-actions button {
    flex: 1 1 calc(50% - 8px);
    justify-content: space-between;
  }

  .chart-head-stats {
    display: none;
  }

  .chart-shell {
    grid-template-columns: 29px 1fr;
    padding-inline: 10px;
  }

  .dashboard-chart-card > footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-sync > i,
  .ring-two {
    animation: none;
  }
}

/* Refined control-center identity and consistent navigation iconography. */
.sidebar .brand {
  position: relative;
  gap: 12px;
  min-height: 68px;
  padding: 0 5px 22px;
}

.sidebar .brand::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -1px;
  left: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 184, 88, .58), transparent);
  box-shadow: 0 0 9px rgba(222, 171, 66, .28);
}

.brand-mark {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(246, 207, 111, .4);
  border-radius: 12px;
  background: #080706;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 7px 22px rgba(183, 126, 27, .24);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
}

.brand-copy {
  min-width: 0;
}

.brand-copy > strong {
  display: block;
  padding: 2px 0;
  background: linear-gradient(180deg, #fff6c7 0%, #f2cd70 38%, #b97b20 72%, #ffe5a0 100%);
  color: transparent;
  font: 700 17px Georgia, serif;
  letter-spacing: .65px;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 #51360f) drop-shadow(0 0 5px rgba(239, 193, 84, .16));
}

.brand-copy > strong span {
  color: #f2be46;
  -webkit-text-fill-color: #f2be46;
}

.brand-copy small {
  letter-spacing: 2.35px;
  color: #8d8066;
}

.sidebar nav button {
  position: relative;
  gap: 11px;
  padding: 0 11px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.sidebar nav button:hover {
  transform: translateX(2px);
}

.sidebar nav button > .nav-icon {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #7891a7;
}

.sidebar nav button > .nav-icon svg,
.storage-metric-head svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar nav button:hover > .nav-icon,
.sidebar nav button.active > .nav-icon {
  color: #efbd4f;
  filter: drop-shadow(0 0 5px rgba(225, 175, 62, .25));
}

.sidebar nav button > em#liveChatUnreadBadge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid #a3473e;
  background: linear-gradient(145deg, #9c3b32, #5f211d);
  color: #fff2ef;
  font-size: 8px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 3px rgba(130, 45, 37, .12);
}

[hidden] {
  display: none !important;
}

/* Data Storage: real percentages, clearer hierarchy, and VPS-ready capacity. */
.storage-metrics article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(217, 169, 70, .12), transparent 42%), linear-gradient(145deg, #171a1f, #101216);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 10px 25px rgba(0,0,0,.12);
}

.storage-metrics article::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -34px;
  width: 85px;
  height: 85px;
  border: 1px solid rgba(223, 174, 72, .1);
  border-radius: 50%;
}

.storage-metric-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.storage-metric-head > span {
  display: grid;
  width: 31px;
  height: 31px;
  border: 1px solid #54431f;
  border-radius: 8px;
  place-items: center;
  background: linear-gradient(145deg, #30250f, #15130e);
  color: #e4b653;
}

.storage-metrics article > strong {
  margin-bottom: 6px;
}

.storage-progress {
  position: relative;
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #292d33;
  border-radius: 99px;
  background: #090b0e;
}

.storage-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8c5b1b, #f1c45f, #fff0ab);
  box-shadow: 0 0 10px rgba(226, 177, 68, .35);
  transition: width .45s ease;
}

.storage-progress.local i {
  background: linear-gradient(90deg, #32526d, #69a6d2);
  box-shadow: 0 0 10px rgba(87, 153, 199, .25);
}

.storage-progress.disk i {
  background: linear-gradient(90deg, #9d6b23, #e1ae48);
}

.storage-percent {
  display: block;
  margin-top: 7px;
  color: #9d8659 !important;
}

.storage-stat-pair {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.storage-stat-pair span {
  flex: 1;
  padding: 8px;
  border: 1px solid #2c3036;
  border-radius: 6px;
  background: rgba(8,10,13,.48);
  color: #747b85;
  font-size: 7px;
}

.storage-stat-pair b {
  color: #d9b25d;
  font-size: 10px;
}

.storage-ring-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 13px;
}

.storage-ring-row > div:last-child {
  min-width: 0;
}

.storage-ring-row > div:last-child strong {
  margin: 0 0 4px;
  font-size: 18px;
}

.storage-ring {
  --storage-percent: 0deg;
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 7px;
  border-radius: 50%;
  background: conic-gradient(#efbd54 var(--storage-percent), #252930 0);
  place-items: center;
  box-shadow: 0 0 18px rgba(224, 172, 64, .12);
}

.storage-ring > span {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #111318;
  place-content: center;
  text-align: center;
}

.storage-ring b,
.storage-ring small {
  display: block;
}

.storage-ring b {
  color: #f0ca72;
  font: 13px Georgia, serif;
}

.storage-ring small {
  margin-top: 2px;
  color: #6e747e;
  font-size: 6px;
  text-transform: uppercase;
}

.storage-list > div > strong small {
  display: block;
  margin-top: 4px;
  color: #c69a42;
  font: 7px Arial, sans-serif;
  text-align: right;
}

.storage-capacity-card {
  background: radial-gradient(circle at 100% 0, rgba(219, 172, 71, .09), transparent 42%), var(--panel);
}

.capacity-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 18px 12px;
}

.capacity-summary > span {
  padding: 13px;
  border: 1px solid #2d3138;
  border-radius: 7px;
  background: rgba(8,10,13,.55);
}

.capacity-summary small,
.capacity-summary strong {
  display: block;
}

.capacity-summary small {
  color: #717883;
  font-size: 7px;
  text-transform: uppercase;
}

.capacity-summary strong {
  margin-top: 7px;
  color: #e1d6bd;
  font: 16px Georgia, serif;
}

.storage-capacity-card > .storage-progress {
  margin: 0 18px;
}

.capacity-caption {
  margin: 9px 18px 16px;
  color: #747b85;
  font-size: 8px;
}

@media (max-width: 700px) {
  .sidebar .brand {
    justify-content: center;
    padding-inline: 0;
  }

  .sidebar .brand .brand-mark {
    display: block;
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .sidebar .brand .brand-copy {
    display: none;
  }

  .sidebar nav button:hover {
    transform: none;
  }

  .sidebar nav button > .nav-icon {
    display: grid;
  }

  .sidebar nav button > em#liveChatUnreadBadge {
    position: absolute;
    top: 3px;
    right: 1px;
    display: block;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    line-height: 15px;
  }

  .capacity-summary {
    grid-template-columns: 1fr;
  }
}
.uid-code {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.notification-history-card {
  margin-top: 16px;
}

.announcement-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.announcement-summary article {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(145deg, #17191d, #111317);
}

.announcement-summary small,
.announcement-summary b {
  display: block;
}

.announcement-summary small {
  color: #727781;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.announcement-summary b {
  margin-top: 7px;
  color: var(--gold2);
  font-size: 22px;
}

.announcement-actions {
  align-items: end;
}

.table-actions {
  display: flex;
  gap: 6px;
}

.notification-contract {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
}

.notification-contract b,
.notification-contract span {
  padding: 10px 12px;
  background: #15171b;
  font-size: 8px;
}

.notification-contract b {
  color: #d4aa54;
}

.notification-contract span {
  color: #9298a2;
}

.mono-input {
  font-family: Consolas, monospace;
  letter-spacing: .5px;
}

.apk-upload {
  cursor: pointer;
}

.apk-upload.busy {
  pointer-events: none;
  opacity: .65;
}

.apk-inspection {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
}

.apk-inspection[hidden] {
  display: none;
}

.apk-inspection > div {
  min-width: 0;
  padding: 10px 12px;
  background: #111318;
}

.apk-inspection small,
.apk-inspection b {
  display: block;
}

.apk-inspection small {
  color: #6f7580;
  font-size: 7px;
}

.apk-inspection b {
  margin-top: 5px;
  overflow: hidden;
  color: #c4a45e;
  font: 8px Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#releaseChecks span.pass {
  color: #62ca8d;
}

#releaseChecks span.fail {
  color: #ef8383;
}

.live-score-page-title {
  position: relative;
  min-height: 104px;
  padding: 19px 21px;
  overflow: hidden;
  border: 1px solid #3c3321;
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% -40%, rgba(216, 171, 82, .2), transparent 42%),
    linear-gradient(125deg, #17191e, #0f1115 62%, #171309);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 231, 165, .05);
}

.live-score-page-title::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b78932, transparent);
  content: '';
}

.live-score-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.live-score-mark,
.live-score-stat-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #88682d;
  color: #f0ce70;
  background: linear-gradient(145deg, #2e2515, #121418);
  font-style: normal;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255, 238, 189, .13), 0 8px 22px rgba(0, 0, 0, .2);
}

.live-score-mark {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  font: 700 16px Georgia, serif;
  letter-spacing: 1px;
}

.live-score-page-title h1 { margin: 5px 0 6px; font-size: 27px; }
.live-score-page-title p { color: #8e949c; font-size: 10px; }
.live-score-page-title .actions { position: relative; z-index: 1; align-items: center; }
.live-score-heading > span > small { color: #d6aa50; font-size: 8px; font-weight: 800; letter-spacing: 1.8px; }

.live-score-alerts {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 11px;
  margin: 14px 0;
}

.live-score-alerts .notice {
  min-height: 61px;
  margin: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(21, 48, 36, .86), rgba(14, 20, 18, .96));
}

.live-score-alerts .notice.info {
  background: linear-gradient(135deg, rgba(39, 32, 16, .9), rgba(17, 17, 15, .98));
}

.live-score-alerts .notice > b { width: 29px; height: 29px; font-size: 10px; }
.live-score-alerts .notice strong { font-size: 10px; }
.live-score-alerts .notice small { color: #899087; font-size: 8px; line-height: 1.45; }

.live-score-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.live-score-stat {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 126px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid #2e333b;
  border-radius: 14px;
  background: linear-gradient(145deg, #181b20, #0f1115);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 30px rgba(0, 0, 0, .14);
}

.live-score-stat::after {
  position: absolute;
  right: -25px;
  bottom: -36px;
  width: 95px;
  height: 95px;
  border: 1px solid rgba(211, 168, 73, .08);
  border-radius: 50%;
  content: '';
}

.live-score-stat-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 8px;
  letter-spacing: .5px;
}

.live-score-stat > span { min-width: 0; }
.live-score-stat label,
.live-score-stat strong,
.live-score-stat small { display: block; }
.live-score-stat label { color: #8c939d; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }
.live-score-stat strong { margin-top: 12px; overflow: hidden; color: #eceef0; font: 20px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.live-score-stat small { margin-top: 8px; color: #6f7680; font-size: 8px; line-height: 1.4; }

.live-score-quota-card {
  display: block;
  border-color: #59471f;
  background:
    radial-gradient(circle at 100% 0, rgba(222, 178, 79, .14), transparent 45%),
    linear-gradient(145deg, #181a1e, #11120f);
}

.live-score-quota-title,
.live-score-quota-value,
.live-score-quota-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.live-score-quota-title { justify-content: flex-start; }
.live-score-quota-title span { min-width: 0; }
.live-score-quota-title small { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-score-quota-value { margin-top: 10px; }
.live-score-quota-value strong { margin: 0; font-size: 14px; }
.live-score-quota-value b { color: #62d994; font: 16px Georgia, serif; }
.live-score-quota-value b.amber { color: #e4b65d; }
.live-score-quota-value b.red { color: #ef7d7d; }
.live-score-quota-value b.green { color: #62d994; }
.live-score-quota-card .usage { height: 7px; margin-top: 9px; border: 1px solid #2d3334; background: #0c0f11; }
.live-score-quota-card .usage i { border-radius: inherit; background: linear-gradient(90deg, #2f9a69, #69dda0 72%, #e8ca6a); box-shadow: 0 0 14px rgba(83, 207, 142, .25); transition: width .35s ease; }
.live-score-quota-card footer { margin-top: 9px; color: #777e86; font-size: 7px; }
.live-score-quota-card footer b { color: #c9ac67; }

#livescore .card {
  border-radius: 14px;
  border-color: #30353d;
  background: linear-gradient(145deg, #15181d, #0e1014);
  box-shadow: 0 15px 38px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .02);
}

#livescore .card > header { min-height: 69px; padding: 17px 19px; background: linear-gradient(90deg, rgba(255, 255, 255, .018), transparent); }
#livescore .card > header small { font-size: 8px; letter-spacing: 1.5px; }
#livescore .card h2 { font-size: 17px; }

.live-score-ops-grid { grid-template-columns: .92fr 1.08fr; gap: 16px; }

.live-score-contract {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 14px 16px 8px;
}

.live-score-contract > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 63px;
  padding: 11px;
  border: 1px solid #2c3138;
  border-radius: 10px;
  background: linear-gradient(145deg, #181b20, #111318);
}

.live-score-contract > div > i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #554522;
  border-radius: 8px;
  color: #d4ad58;
  background: #211b10;
  font-size: 7px;
  font-style: normal;
}

.live-score-contract small,
.live-score-contract strong { display: block; }
.live-score-contract small { color: #777f89; font-size: 8px; letter-spacing: .4px; text-transform: uppercase; }
.live-score-contract strong { margin-top: 6px; overflow-wrap: anywhere; color: #d8dadd; font-size: 9px; line-height: 1.4; }

.live-score-cache { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 8px 16px 14px; }
.live-score-cache > div { display: block; min-width: 0; padding: 10px; border: 1px solid #2b3037; border-radius: 9px; color: #7f8791; background: #111419; font-size: 8px; text-align: center; }
.live-score-cache b { display: block; margin-top: 5px; color: #e3c26c; font-size: 9px; }

.live-score-toolbar { padding: 11px 16px 13px; border-bottom: 1px solid #2b3036; }
.live-score-toolbar .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; border: 0; overflow: visible; }
.live-score-toolbar .tabs button { min-height: 35px; padding: 8px; border: 1px solid #343941; border-radius: 9px; background: #14171b; color: #838a94; font-size: 9px; }
.live-score-toolbar .tabs button.active { border-color: #a47c2e; color: #f0cc6a; background: linear-gradient(145deg, #2d2413, #17150f); box-shadow: inset 0 0 0 1px rgba(235, 196, 103, .06); }
.live-score-toolbar select { width: 100%; height: 38px; padding: 0 11px; border: 1px solid #343a43; border-radius: 9px; outline: none; background: #15181d; color: #c4c8cd; font-size: 9px; color-scheme: dark; }
.live-score-toolbar select:focus { border-color: #a37b2c; box-shadow: 0 0 0 3px rgba(192, 144, 46, .1); }

.live-score-match-list { min-height: 294px; max-height: 406px; padding: 8px 16px 12px; overflow: auto; }
.live-score-match { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 66px; padding: 10px 11px; border: 1px solid transparent; border-bottom-color: #292e35; border-radius: 8px; transition: border-color .16s ease, background .16s ease; }
.live-score-match:hover { border-color: #403720; background: linear-gradient(90deg, rgba(187, 140, 45, .07), transparent); }
.live-score-match:last-child { border-bottom-color: transparent; }
.live-score-match > span,
.live-score-match > div { min-width: 0; }
.live-score-match small,
.live-score-match b,
.live-score-match strong { display: block; }
.live-score-match small { overflow: hidden; color: #737b85; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.live-score-match b { margin-top: 5px; overflow: hidden; color: #e6e8ea; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.live-score-match strong { color: #f0cb67; font: 17px Georgia, serif; text-align: right; white-space: nowrap; }
.live-score-match .live-label { color: #69dc99; }
.live-score-match .live-label::before { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; content: ''; }
.live-score-empty-row { min-height: 270px; display: grid; place-items: center; padding: 25px; color: #777f89; font-size: 10px; text-align: center; }

.live-score-leagues-card { margin-top: 16px; }
.live-score-league-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 14px 16px 16px; }
.live-score-league-grid > span { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 9px; min-width: 0; padding: 11px; border: 1px solid #2c3138; border-radius: 10px; background: linear-gradient(145deg, #181b20, #101216); }
.live-score-league-grid i { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #3b4048; border-radius: 8px; background: #111419; font-size: 14px; font-style: normal; }
.live-score-league-grid b,
.live-score-league-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-score-league-grid b { color: #dadddf; font-size: 9px; }
.live-score-league-grid small { margin-top: 4px; color: #707782; font-size: 7px; }

.row-muted {
  opacity: 0.55;
}

@media (max-width: 700px) {
  .live-score-page-title { align-items: flex-start; padding: 17px; }
  .live-score-page-title .actions { width: 100%; }
  .live-score-alerts,
  .live-score-overview { grid-template-columns: 1fr; }
  .live-score-overview { gap: 9px; }
  .live-score-stat { min-height: 105px; }
  .live-score-heading { align-items: flex-start; }
  .live-score-mark { width: 42px; height: 42px; border-radius: 12px; }
  .live-score-contract,
  .live-score-league-grid {
    grid-template-columns: 1fr;
  }

  .live-score-match {
    grid-template-columns: 72px minmax(0, 1fr) auto;
  }

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

  .notification-contract {
    grid-template-columns: 1fr;
  }
}