:root {
  color-scheme: dark;
  --bg: #101925;
  --bg-deep: #172635;
  --sidebar: #192638;
  --panel: #1d2b3d;
  --panel-soft: #26384c;
  --composer: #182434;
  --hover: #233348;
  --ink: #ecf4ff;
  --muted: #9fb2c8;
  --line: #33485e;
  --accent: #48a7d8;
  --accent-dark: #277ea9;
  --danger: #f23f42;
  --warn: #f0b232;
  --ok: #23a55a;
  --shadow: 0 16px 38px rgba(0, 0, 0, .28);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(55, 137, 190, .25), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(35, 78, 118, .42), transparent 32%),
    linear-gradient(135deg, var(--bg), var(--bg-deep));
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
}

button:hover {
  background: var(--accent-dark);
}

.app {
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
    radial-gradient(circle at 80% 0%, rgba(72, 167, 216, .12), transparent 35%);
}

.login-panel {
  width: min(420px, calc(100vw - 32px));
  margin: 12vh auto 0;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(33, 54, 76, .96), rgba(16, 29, 43, .98)),
    radial-gradient(circle at 50% 0%, rgba(120, 210, 255, .16), transparent 46%);
  border: 1px solid rgba(120, 210, 255, .22);
  border-radius: 12px;
  display: grid;
  gap: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.login-window-controls {
  position: fixed;
  top: 8px;
  right: 10px;
  z-index: 20;
  border-left: 0;
  background: rgba(7, 18, 32, .58);
  border: 1px solid rgba(82, 138, 180, .24);
  border-radius: 7px;
  backdrop-filter: blur(8px);
  -webkit-app-region: no-drag;
}

.login-panel h1 {
  margin: 0 0 4px;
  font-size: 28px;
}

.login-wordmark {
  width: min(300px, 100%);
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 0 18px rgba(72, 167, 216, .24));
}

.login-tagline {
  margin: -4px 0 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.login-version-panel {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid rgba(120, 210, 255, .16);
  border-radius: 6px;
  background: rgba(10, 18, 30, .36);
  color: #b9cce0;
  font-size: 12px;
  line-height: 1.25;
}

.login-version-panel .update-ready {
  color: #78d2ff;
  font-weight: 700;
}

.login-version-panel .update-ok {
  color: #7ee0a0;
  font-weight: 700;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  background: rgba(10, 18, 30, .54);
  border: 1px solid rgba(120, 210, 255, .16);
  border-radius: 8px;
}

.auth-tab {
  padding: 8px 9px;
  color: var(--muted);
  background: transparent;
  border-radius: 6px;
  font-weight: 700;
}

.auth-tab:hover,
.auth-tab.active {
  color: #f2f8ff;
  background: linear-gradient(180deg, rgba(72, 167, 216, .28), rgba(39, 126, 169, .20));
  box-shadow: inset 0 0 0 1px rgba(120, 210, 255, .22);
}

.auth-panel {
  display: none;
  gap: 12px;
}

.auth-panel.active {
  display: grid;
}

.auth-panel label span {
  color: #b9d9ef;
  font-weight: 700;
}

.remember-login {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 4px;
  color: #c7d8e8;
}

.remember-login input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: #5cb2df;
}

.room-login-toggle {
  justify-self: center;
  margin-top: -4px;
  padding: 2px 6px;
  color: var(--muted);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}

.room-login-toggle:hover,
.room-login-toggle.active {
  color: #dff4ff;
  background: transparent;
  text-decoration: underline;
}

.room-login-fields {
  display: grid;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 210, 255, .14);
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  background: #101a27;
  color: var(--ink);
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(72, 167, 216, .22);
  box-shadow: 0 0 0 3px rgba(72, 167, 216, .08);
}

select {
  border-left: 3px solid transparent;
}

select:focus,
select:has(option:checked) {
  border-left-color: var(--accent);
}

textarea {
  resize: none;
}

.hidden {
  display: none !important;
}

.shell {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr) 260px;
  grid-template-rows: 58px 46px minmax(0, 1fr) 26px;
  background: #202733;
}

.topbar {
  grid-column: 1 / -1;
  height: 58px;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(28, 36, 48, .98), rgba(19, 29, 42, .98));
  border-bottom: 1px solid rgba(88, 119, 151, .72);
  box-shadow: 0 1px 16px rgba(0, 0, 0, .22);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.topbar-spacer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.top-action {
  height: 30px;
  padding: 0 11px;
  color: #c7d7e5;
  background: rgba(38, 48, 62, .86);
  border: 1px solid #394f67;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
}

.top-action:hover,
.top-action.active {
  color: #fff;
  background: rgba(20, 37, 49, .96);
  border-color: #5fa3cc;
  box-shadow: inset 0 -2px 0 #ffc928;
}

.admin-top-button {
  min-width: 78px;
  height: 30px;
  padding: 0 12px;
  color: #101925;
  border: 1px solid rgba(240, 178, 50, .52);
  border-radius: 4px;
  background: linear-gradient(180deg, #ffd27a, #d9a33a);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .28);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.admin-top-button:hover,
.admin-top-button.active {
  color: #06111c;
  background: linear-gradient(180deg, #ffe1a0, #f0b232);
  box-shadow: 0 10px 24px rgba(240, 178, 50, .18), inset 0 0 0 1px rgba(255, 255, 255, .24);
}


.character-session-button {
  height: 28px;
  padding: 0 10px;
  color: #b9d9ef;
  background: rgba(32, 49, 70, .72);
  border: 1px solid rgba(120, 210, 255, .18);
  border-radius: 7px;
  cursor: pointer;
}
.character-session-button:hover,
.character-session-button.has-character {
  color: #f4fbff;
  border-color: rgba(120, 210, 255, .52);
  background: rgba(43, 67, 94, .86);
}
.character-panel {
  position: absolute;
  inset: 76px 18px auto 18px;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.online-panel {
  position: absolute;
  inset: 66px 18px auto auto;
  z-index: 32;
  width: min(620px, calc(100vw - 36px));
  pointer-events: none;
}

.online-card {
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 16px;
  color: #f2f8ff;
  background: rgba(14, 25, 38, .98);
  border: 1px solid rgba(120, 210, 255, .24);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  pointer-events: auto;
}

.online-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.online-card h2 { margin: 0 0 4px; font-size: 19px; }
.online-card p { margin: 0; color: #9fb2c8; font-size: 13px; }

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

.online-grid h3 {
  margin: 0 0 8px;
  color: #b9d9ef;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-list {
  display: grid;
  gap: 7px;
}

.online-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px;
  background: rgba(26, 40, 58, .9);
  border: 1px solid rgba(120, 210, 255, .14);
  border-radius: 8px;
}

.online-user-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-user-row span {
  display: block;
  margin-top: 2px;
  color: #9fb2c8;
  font-size: 12px;
}

.online-user-row button {
  height: 28px;
  padding: 0 9px;
  color: #dff4ff;
  background: rgba(72, 167, 216, .16);
  border: 1px solid rgba(120, 210, 255, .2);
  border-radius: 6px;
  font-size: 12px;
}

.online-empty {
  padding: 12px;
  color: #9fb2c8;
  background: rgba(26, 40, 58, .52);
  border: 1px dashed rgba(120, 210, 255, .18);
  border-radius: 8px;
}

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

@media (max-width: 1120px) {
  .shell {
    grid-template-columns: 174px minmax(0, 1fr);
  }

  .friends-rail {
    display: none;
  }

  .module-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.character-card {
  width: min(560px, calc(100vw - 44px));
  max-height: calc(100vh - 130px);
  overflow: auto;
  padding: 18px;
  color: #f2f8ff;
  background: rgba(14, 25, 38, .98);
  border: 1px solid rgba(120, 210, 255, .24);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  pointer-events: auto;
}
.character-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.character-card h2 { margin: 0 0 4px; font-size: 20px; }
.character-card p { margin: 0; color: #9fb2c8; }
.character-picker-grid {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(240px, 1.2fr);
  gap: 12px;
}
.character-picker-grid h3 {
  margin: 0 0 8px;
  color: #b9d9ef;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}
.character-list {
  display: grid;
  gap: 8px;
}
.character-option {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  text-align: left;
  color: #dce8f5;
  background: rgba(26, 40, 58, .9);
  border: 1px solid rgba(120, 210, 255, .16);
  border-radius: 8px;
  cursor: pointer;
}
.character-option span,
.character-empty { color: #9fb2c8; font-size: 13px; }
.character-option:hover,
.character-option.active {
  border-color: rgba(120, 210, 255, .62);
  background: rgba(41, 64, 88, .94);
}
.character-option.active {
  box-shadow: inset 3px 0 0 #5cb2df;
}
.account-option.active {
  border-color: rgba(240, 178, 50, .7);
  box-shadow: inset 3px 0 0 #f0b232;
}
.character-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 760px) {
  .character-picker-grid {
    grid-template-columns: 1fr;
  }
}

.channel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.channel-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 0 18px rgba(72, 167, 216, .22);
}

.channel-title strong {
  font-size: 17px;
  letter-spacing: .2px;
}

.channel-title span:last-child {
  color: var(--muted);
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 0;
  font-size: 13px;
}

.online-button {
  height: 28px;
  padding: 0 9px;
  color: #b9d9ef;
  background: rgba(32, 49, 70, .62);
  border: 1px solid rgba(120, 210, 255, .16);
  border-radius: 7px;
  font-size: 13px;
}

.online-button:hover,
.online-button.active {
  color: #f4fbff;
  background: rgba(43, 67, 94, .9);
  border-color: rgba(120, 210, 255, .46);
}

.clock-row {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--warn);
}

.status-dot.online {
  background: var(--ok);
}

.status-dot.offline {
  background: var(--danger);
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 8px 14px 0;
  background: rgba(18, 29, 42, .96);
  border-bottom: 1px solid var(--line);
}

.side-nav {
  grid-column: 1;
  grid-row: 2 / 4;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(25, 35, 48, .98), rgba(16, 25, 36, .98)),
    radial-gradient(circle at 50% 0%, rgba(72, 167, 216, .12), transparent 42%);
  border-right: 1px solid rgba(88, 119, 151, .62);
  border-bottom: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .18);
}

.side-account {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.side-account div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(80, 111, 139, .52);
  background:
    linear-gradient(180deg, rgba(20, 34, 49, .82), rgba(11, 22, 35, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.side-account span,
.side-group-title {
  color: #78d2ff;
  font-size: 10px;
  line-height: 1.1;
  text-transform: uppercase;
}

.side-account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-account strong {
  color: #ffc928;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.side-account div:nth-child(2) strong {
  color: #43e27b;
}

.side-group-title {
  margin: 12px 2px 6px;
  letter-spacing: .03em;
  text-align: left;
}

.side-nav-group,
.side-quick-actions {
  display: grid;
  width: 100%;
}

.side-nav-group {
  gap: 0;
}

.side-quick-actions {
  gap: 8px;
}

.tab {
  background: transparent;
  color: var(--muted);
  border-radius: 4px 4px 0 0;
}

.side-nav-group .tab,
.admin-sidebar-button {
  width: 100%;
  height: 33px;
  padding: 0 10px;
  text-align: left;
  color: #bcd7eb;
  background: rgba(38, 48, 62, .68);
  border: 1px solid rgba(80, 111, 139, .44);
  border-radius: 0;
  margin-top: -1px;
  font-weight: 800;
  font-size: 12px;
}

.side-nav-group .tab:first-child {
  border-radius: 4px 4px 0 0;
  margin-top: 0;
}

.side-nav-group .tab:last-child {
  border-radius: 0 0 4px 4px;
}

.admin-sidebar-button {
  color: #ffd85f;
  border-color: rgba(221, 173, 35, .72);
  background: linear-gradient(180deg, rgba(54, 54, 28, .72), rgba(31, 43, 35, .78));
  box-shadow: inset 3px 0 0 rgba(255, 202, 40, .78);
  margin: 3px 0 4px;
  text-align: center;
}

.side-action {
  width: 100%;
  min-height: 33px;
  padding: 0 10px;
  color: #f2fbff;
  border: 1px solid rgba(90, 126, 158, .55);
  border-radius: 4px;
  text-align: left;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}

.side-action.donate {
  border-color: rgba(196, 125, 31, .76);
  background: linear-gradient(180deg, rgba(127, 78, 21, .94), rgba(93, 50, 16, .94));
}

.side-action.rewards {
  border-color: rgba(35, 157, 92, .76);
  background: linear-gradient(180deg, rgba(24, 110, 71, .94), rgba(17, 84, 55, .94));
}

.side-action.logout {
  border-color: rgba(186, 66, 66, .74);
  background: linear-gradient(180deg, rgba(119, 35, 39, .94), rgba(83, 27, 31, .94));
}

.side-action:hover,
.side-action.active {
  filter: brightness(1.12);
}

.module-nav {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(18, 29, 42, .96);
  border-bottom: 1px solid rgba(88, 119, 151, .55);
}

.module-tab {
  height: 32px;
  min-width: 0;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c7d7e5;
  background: rgba(38, 48, 62, .78);
  border: 1px solid rgba(80, 111, 139, .55);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
}

.module-tab:hover,
.module-tab.active {
  color: #fff;
  background: rgba(20, 37, 49, .96);
  border-color: #5fa3cc;
  box-shadow: inset 0 -2px 0 #48a7d8;
}

.module-tab.admin-module {
  color: #ffe8a4;
  border-color: rgba(240, 178, 50, .6);
  background: linear-gradient(180deg, rgba(82, 64, 23, .92), rgba(45, 39, 24, .92));
}

.tab:hover,
.tab.active {
  background: var(--panel);
  color: var(--ink);
}

.tab.active {
  box-shadow: inset 0 -3px 0 var(--accent);
}

.side-nav-group .tab:hover,
.side-nav-group .tab.active,
.admin-sidebar-button:hover,
.admin-sidebar-button.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(31, 49, 64, .96), rgba(20, 37, 49, .96));
  border-color: #5fa3cc;
}

.side-nav-group .tab.active,
.admin-sidebar-button.active {
  box-shadow: inset 3px 0 0 #ffc928;
}

.view {
  position: relative;
  display: none;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  grid-column: 2;
  grid-row: 3;
  z-index: 1;
}

.friends-rail {
  grid-column: 3;
  grid-row: 2 / 4;
  min-width: 0;
  overflow: hidden auto;
  padding: 14px 10px;
  background:
    linear-gradient(180deg, rgba(25, 35, 48, .98), rgba(16, 25, 36, .98)),
    radial-gradient(circle at 50% 0%, rgba(255, 201, 40, .08), transparent 42%);
  border-left: 1px solid rgba(88, 119, 151, .62);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .025);
}

.friends-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 11px 10px;
  border: 1px solid rgba(80, 111, 139, .66);
  background: linear-gradient(180deg, rgba(30, 39, 51, .92), rgba(25, 33, 43, .92));
}

.friends-search {
  height: 30px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 4px;
}

.friends-head span,
.friends-section h3 {
  color: #ffc928;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.friends-head strong {
  display: block;
  margin-top: 3px;
  color: #cfe1ef;
  font-size: 14px;
}

.friends-section {
  margin-bottom: 14px;
}

.friends-section h3 {
  margin: 0 0 7px;
  padding: 0 2px;
}

.friends-list {
  display: grid;
  gap: 7px;
}

.friends-list .online-user-row {
  min-height: 38px;
  padding: 8px;
  border-radius: 4px;
  background: rgba(26, 40, 58, .72);
  border-color: rgba(80, 111, 139, .42);
}

.friends-list .online-user-row button {
  height: 24px;
  padding: 0 7px;
}

.friends-list .online-empty {
  border-radius: 4px;
  padding: 10px;
}

.view.active {
  display: block;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.hub-view.active,
.settings.view.active {
  overflow: auto;
  padding: 20px 24px 28px;
  background: #202733;
}

.hub-hero,
.hub-section-head,
.hub-card {
  border: 1px solid rgba(80, 111, 139, .78);
  background: linear-gradient(180deg, rgba(30, 39, 51, .92), rgba(25, 33, 43, .92));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16), inset 0 0 32px rgba(70, 174, 223, .035);
}

.hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 auto 18px;
  max-width: 1680px;
  padding: 18px 20px;
}

.hub-kicker,
.hub-card span {
  color: #ffc928;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hub-hero h1,
.hub-section-head h2 {
  margin: 4px 0 6px;
  color: #f2f8ff;
  font-size: 24px;
}

.hub-hero p,
.hub-section-head p,
.hub-card p {
  margin: 0;
  color: #a8bdcf;
  line-height: 1.45;
}

.hub-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 1680px;
  margin: 0 auto 18px;
  padding: 16px 18px;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  max-width: 1680px;
  margin: 0 auto;
}

.hub-card {
  min-height: 138px;
  padding: 16px;
}

.hub-card strong {
  display: block;
  margin: 6px 0 7px;
  color: #cfe1ef;
  font-size: 17px;
}

.account-dashboard {
  display: grid;
  gap: 18px;
  max-width: 1680px;
  margin: 0 auto;
}

.account-summary-panel,
.master-account-panel,
.master-panel,
.dashboard-actions {
  border: 1px solid rgba(80, 111, 139, .78);
  background: linear-gradient(180deg, rgba(30, 39, 51, .92), rgba(25, 33, 43, .92));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16), inset 0 0 32px rgba(70, 174, 223, .035);
}

.master-account-table button {
  height: 29px;
  padding: 0 11px;
  border: 1px solid #40566d;
  background: rgba(62, 75, 92, .9);
  border-radius: 3px;
  color: #f4fbff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.account-summary-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.account-summary-panel div {
  min-width: 0;
  padding: 13px 15px;
  border-right: 1px solid rgba(80, 111, 139, .48);
}

.account-summary-panel div:last-child {
  border-right: 0;
}

.account-summary-panel span {
  display: block;
  margin-bottom: 6px;
  color: #78d2ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-summary-panel strong {
  display: block;
  overflow: hidden;
  color: #cfe1ef;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardBalance {
  color: #43e27b;
}

.master-account-stack {
  display: grid;
  gap: 18px;
}

.master-account-panel header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(88, 119, 151, .72);
}

.master-account-panel h2 {
  margin: 0;
  color: #f4fbff;
  font-size: 16px;
  text-align: center;
  text-shadow: 0 0 10px rgba(72, 167, 216, .42);
}

.master-account-table-wrap {
  padding: 15px 18px 18px;
}

.master-account-table {
  width: 100%;
  border-collapse: collapse;
  color: #dbeaf8;
  font-size: 12px;
}

.master-account-table th,
.master-account-table td {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(80, 111, 139, .58);
  text-align: left;
  vertical-align: middle;
}

.master-account-table th {
  color: #8fcaff;
  font-size: 11px;
  font-weight: 900;
}

.master-account-table tbody tr:last-child td {
  border-bottom-color: rgba(80, 111, 139, .22);
}

.master-account-table td:last-child {
  white-space: nowrap;
}

.master-account-table td:last-child button {
  height: 27px;
  margin-right: 5px;
  padding: 0 9px;
}

.dashboard-character-actions {
  min-width: 300px;
}

.dashboard-character-actions button[data-character-action="items"]::before {
  content: "\25A3 ";
  color: var(--warn);
}

.dashboard-character-actions button[data-character-action="skills"]::before {
  content: "\2726 ";
  color: var(--warn);
}

.dashboard-character-actions button[data-character-action="statistics"]::before {
  content: "\25A5 ";
  color: var(--warn);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(120, 150, 176, .42);
  border-radius: 3px;
  background: rgba(18, 33, 48, .68);
  color: #a9bbc9;
  font-size: 11px;
  font-weight: 900;
}

.status-pill.online,
.online-text {
  color: #25ff91;
}

.dashboard-empty-row {
  color: #8fa5b9;
  text-align: center;
}

.character-detail-shell {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  min-width: 0;
}

.character-detail-header,
.character-detail-summary,
.character-detail-card,
.inventory-overview {
  border: 1px solid rgba(98, 145, 179, .62);
  background: linear-gradient(180deg, rgba(44, 67, 88, .92), rgba(30, 50, 70, .94));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14), inset 0 0 32px rgba(120, 210, 255, .04);
}

.character-detail-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 15px;
}

.character-detail-header span {
  display: block;
  color: #8edcff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.character-detail-header h2 {
  margin: 4px 0 0;
  color: #f3f9ff;
  font-size: 18px;
}

.character-detail-content {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.character-detail-summary,
.inventory-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.character-detail-summary div,
.inventory-overview div {
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid rgba(99, 145, 179, .5);
}

.character-detail-summary div:last-child,
.inventory-overview div:last-child {
  border-right: 0;
}

.character-detail-summary span,
.inventory-overview span {
  display: block;
  margin-bottom: 6px;
  color: #8edcff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.character-detail-summary strong,
.inventory-overview strong {
  display: block;
  overflow: hidden;
  color: #f3f9ff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.character-detail-card {
  min-width: 0;
  padding: 14px;
}

.character-detail-card h3 {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(99, 145, 179, .5);
  color: #f3f9ff;
  font-size: 15px;
}

.detail-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(99, 145, 179, .24);
}

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

.detail-stat-row span {
  color: #bad0e1;
}

.detail-stat-row strong {
  color: #f3f9ff;
  text-align: right;
}

.detail-stat-row.accent strong {
  color: #25ff91;
}

.detail-table-wrap {
  overflow: auto;
  max-height: 430px;
  border: 1px solid rgba(99, 145, 179, .34);
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  color: #f3f9ff;
  font-size: 12px;
}

.detail-table th,
.detail-table td {
  padding: 10px 11px;
  border-bottom: 1px solid rgba(99, 145, 179, .3);
  text-align: left;
  vertical-align: middle;
}

.detail-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(28, 47, 67, .98);
  color: #8edcff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-table tbody tr:hover {
  background: rgba(103, 184, 230, .1);
}

.detail-item-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.detail-item-name img,
.detail-item-name > span:first-child {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgba(142, 220, 255, .35);
  border-radius: 3px;
  background: rgba(10, 22, 34, .66);
  object-fit: contain;
}

.detail-item-name > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8edcff;
  font-size: 10px;
  font-weight: 900;
}

.detail-item-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.detail-item-copy strong {
  color: #f3f9ff;
  font-size: 12px;
  line-height: 1.2;
}

.detail-item-copy small {
  color: #8bb6d5;
  font-size: 10px;
  line-height: 1.2;
}

.detail-grade-badge {
  display: inline-flex;
  min-width: 34px;
  justify-content: center;
  padding: 3px 7px;
  border: 1px solid rgba(255, 209, 82, .35);
  background: rgba(255, 190, 62, .08);
  color: #ffd152;
  font-size: 11px;
  font-weight: 800;
}

.l2-inventory-panel {
  display: grid;
  grid-template-columns: 250px minmax(360px, 1fr);
  gap: 16px;
  align-items: start;
}

.l2-paperdoll {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  min-height: 420px;
  padding: 12px;
  border: 1px solid rgba(98, 145, 179, .42);
  background: radial-gradient(circle at 50% 38%, rgba(74, 119, 150, .34), rgba(9, 24, 38, .84) 62%);
}

.l2-paperdoll-column {
  display: grid;
  grid-template-rows: repeat(9, 40px);
  gap: 5px;
}

.l2-character-paper {
  display: grid;
  place-content: center;
  gap: 7px;
  min-width: 0;
  color: #d9efff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}

.l2-character-paper strong {
  color: #7bd7ff;
  font-size: 15px;
}

.l2-character-paper span {
  color: #a8c8df;
  font-size: 11px;
}

.l2-inventory-main {
  min-width: 0;
  border: 1px solid rgba(98, 145, 179, .42);
  background: rgba(9, 24, 38, .58);
}

.l2-inventory-main header,
.l2-inventory-main footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(98, 145, 179, .42);
  color: #d9efff;
}

.l2-inventory-main footer {
  border-top: 1px solid rgba(98, 145, 179, .42);
  border-bottom: 0;
}

.l2-inventory-main footer strong {
  color: #23f58b;
}

.l2-inventory-grid {
  display: grid;
  grid-template-columns: repeat(10, 40px);
  gap: 5px;
  align-content: start;
  justify-content: start;
  max-height: 430px;
  overflow: auto;
  padding: 12px;
}

.l2-inventory-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(92, 130, 158, .55);
  background: linear-gradient(180deg, rgba(23, 43, 61, .96), rgba(7, 18, 31, .96));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .38);
}

.l2-inventory-slot.empty span {
  color: rgba(142, 220, 255, .26);
  font-size: 9px;
}

.l2-inventory-slot.filled {
  border-color: rgba(255, 209, 82, .36);
}

.l2-inventory-slot img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: auto;
}

.slot-enchant,
.slot-count {
  position: absolute;
  z-index: 1;
  padding: 0 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .68);
  font-size: 10px;
  line-height: 14px;
}

.slot-enchant {
  top: 1px;
  left: 1px;
  color: #7cff8b;
}

.slot-count {
  right: 1px;
  bottom: 1px;
  color: #f3f9ff;
}

.inventory-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.inventory-detail-tabs button {
  border: 1px solid rgba(98, 145, 179, .7);
  background: linear-gradient(180deg, rgba(40, 63, 84, .96), rgba(20, 38, 56, .98));
  color: #dff5ff;
  padding: 9px 16px;
  font-weight: 900;
  cursor: pointer;
}

.inventory-detail-tabs button.active {
  border-color: #ffd152;
  box-shadow: inset 3px 0 0 #ffd152, 0 0 16px rgba(255, 209, 82, .16);
  color: #fff7d2;
}

.inventory-showcase-card {
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid rgba(98, 145, 179, .62);
  background: linear-gradient(180deg, rgba(31, 51, 71, .94), rgba(20, 37, 54, .96));
  box-shadow: inset 0 0 36px rgba(120, 210, 255, .035);
}

.inventory-showcase-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(99, 145, 179, .5);
}

.inventory-showcase-heading span {
  color: #f3f9ff;
  font-size: 15px;
  font-weight: 900;
}

.inventory-showcase-heading small {
  color: #8edcff;
  font-weight: 800;
}

.inventory-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 42px));
  gap: 7px;
}

.inventory-showcase-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.inventory-showcase-layout .inventory-showcase-card {
  min-width: 0;
  margin-bottom: 0;
}

.inventory-showcase-layout .inventory-showcase-grid {
  grid-template-columns: repeat(auto-fill, minmax(36px, 36px));
  justify-content: start;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(5, 16, 25, .76), rgba(3, 11, 18, .68));
  border: 1px solid rgba(35, 74, 101, .42);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .22);
}

.inventory-showcase-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(92, 130, 158, .62);
  background: linear-gradient(180deg, rgba(23, 43, 61, .96), rgba(7, 18, 31, .96));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .38);
  cursor: pointer;
}

.inventory-showcase-slot:focus-visible {
  outline: 1px solid #ffd152;
  outline-offset: 2px;
}

.inventory-showcase-slot:hover {
  border-color: rgba(255, 209, 82, .66);
  box-shadow: 0 0 0 1px rgba(255, 209, 82, .22), inset 0 0 16px rgba(255, 209, 82, .08);
  z-index: 30;
}

.inventory-showcase-item,
.inventory-showcase-fallback {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.inventory-showcase-fallback {
  display: grid;
  place-items: center;
  color: #8edcff;
  font-size: 10px;
  font-weight: 900;
}

.inventory-item-tooltip {
  position: absolute;
  left: 46px;
  top: -8px;
  z-index: 80;
  width: min(330px, 70vw);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  border: 1px solid rgba(255, 209, 82, .48);
  background: linear-gradient(180deg, rgba(18, 34, 51, .98), rgba(8, 20, 33, .99));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 0 1px rgba(103, 184, 230, .16) inset;
  padding: 11px;
  transition: opacity .12s ease, transform .12s ease;
}

.inventory-showcase-slot:hover .inventory-item-tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.inventory-tooltip-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(99, 145, 179, .36);
}

.inventory-tooltip-head img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.inventory-tooltip-head strong,
.augment-card strong {
  display: block;
  color: #f3f9ff;
  font-size: 13px;
  line-height: 1.25;
}

.inventory-tooltip-head span,
.augment-card small {
  display: block;
  margin-top: 3px;
  color: #8edcff;
  font-size: 11px;
}

.inventory-tooltip-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  margin-top: 9px;
  font-size: 11px;
}

.inventory-tooltip-grid span,
.inventory-tooltip-block h5 {
  color: #8bb6d5;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-tooltip-grid b {
  color: #f3f9ff;
  text-align: right;
}

.tooltip-positive,
.inventory-tooltip-grid .tooltip-positive {
  color: #25ff91;
}

.inventory-tooltip-block {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(99, 145, 179, .28);
}

.inventory-tooltip-block h5 {
  margin: 0 0 7px;
  font-size: 10px;
}

.inventory-element-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.element-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 58px;
  height: 22px;
  padding: 2px 7px 2px 3px;
  border: 1px solid rgba(160, 178, 190, .28);
  background: linear-gradient(180deg, rgba(117, 130, 141, .22), rgba(48, 58, 67, .3));
  color: #dff5ff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.element-chip img,
.element-chip i {
  width: 20px;
  height: 16px;
  object-fit: contain;
  display: block;
}

.element-chip i {
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(150, 160, 170, .72), rgba(86, 96, 106, .72));
}

.element-chip b {
  color: #f5fbff;
  min-width: 24px;
  text-align: right;
}

.element-fire { border-color: rgba(255, 111, 78, .44); color: #ffb19e; }
.element-water { border-color: rgba(87, 181, 255, .44); color: #9bd8ff; }
.element-wind { border-color: rgba(138, 255, 194, .38); color: #b4ffd4; }
.element-earth { border-color: rgba(224, 174, 93, .44); color: #ffd59d; }
.element-holy { border-color: rgba(255, 235, 139, .44); color: #fff0a8; }
.element-dark { border-color: rgba(190, 143, 255, .44); color: #d6b7ff; }

.augment-card {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255, 209, 82, .26);
  background: linear-gradient(180deg, rgba(255, 209, 82, .07), rgba(25, 41, 55, .58));
  padding: 7px;
}

.augment-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
}

.augment-row img,
.augment-fallback {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(103, 184, 230, .32);
  background: rgba(7, 16, 24, .65);
  object-fit: contain;
}

.augment-fallback {
  display: grid;
  place-items: center;
  color: #ffc928;
  font-size: 12px;
  font-weight: 900;
}

.augment-row small {
  display: block;
  margin-top: 2px;
  color: #a8c4d7;
  font-size: 10px;
  line-height: 1.25;
}

.augment-row em {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 1px 5px;
  border: 1px solid rgba(103, 184, 230, .28);
  border-radius: 999px;
  color: #8edcff;
  background: rgba(103, 184, 230, .08);
  font-style: normal;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 900;
}

.augment-active em { color: #9fdcff; border-color: rgba(103, 184, 230, .4); }
.augment-passive em { color: #9cffbd; border-color: rgba(52, 209, 123, .38); }
.augment-chance em { color: #ffd67b; border-color: rgba(255, 201, 40, .38); }

.augment-active .augment-fallback { color: #8edcff; }
.augment-passive .augment-fallback { color: #34d17b; }
.augment-chance .augment-fallback { color: #ffc928; }

.inventory-showcase-money {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(99, 145, 179, .34);
}

.inventory-showcase-money span {
  color: #8edcff;
  font-weight: 900;
}

.inventory-showcase-money strong {
  color: #25ff91;
}

.inventory-empty-note {
  border: 1px dashed rgba(98, 145, 179, .42);
  color: #90aac0;
  padding: 14px;
  text-align: center;
}

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

.inventory-statistics-hero {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 16px;
  border: 1px solid rgba(98, 145, 179, .42);
  background: radial-gradient(circle at center, rgba(88, 150, 190, .2), rgba(8, 22, 34, .84));
  text-align: center;
}

.inventory-statistics-hero b {
  color: #f3f9ff;
}

.inventory-statistics-hero span {
  color: #25ff91;
}

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

.inventory-statistics-group {
  padding: 12px;
  border: 1px solid rgba(98, 145, 179, .38);
  background: rgba(7, 20, 32, .34);
}

.inventory-statistics-group h4 {
  margin: 0 0 8px;
  color: #ffd152;
  font-size: 13px;
}

.inventory-skills-card .inventory-skill-group {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(98, 145, 179, .42);
  background: rgba(7, 20, 32, .28);
}

.inventory-skill-class,
.inventory-skill-kind {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.inventory-skill-class b,
.inventory-skill-kind span {
  color: #f3f9ff;
  font-weight: 900;
}

.inventory-skill-class small,
.inventory-skill-kind small {
  color: #8edcff;
}

.inventory-skills-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}

.inventory-skill-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(98, 145, 179, .38);
  background: linear-gradient(180deg, rgba(32, 53, 73, .78), rgba(12, 27, 42, .9));
  color: #dff5ff;
  min-height: 40px;
  padding: 5px 6px;
  text-align: left;
}

.inventory-skill-item:hover {
  border-color: rgba(95, 163, 204, .68);
  background: linear-gradient(180deg, rgba(36, 59, 80, .84), rgba(14, 32, 49, .94));
}

.inventory-skill-item.is-open {
  border-color: rgba(95, 190, 255, .9);
  background:
    linear-gradient(180deg, rgba(35, 83, 116, .96), rgba(13, 48, 78, .96)),
    radial-gradient(circle at 18% 0%, rgba(103, 184, 230, .24), transparent 48%);
  box-shadow: 0 0 18px rgba(74, 169, 232, .2), inset 3px 0 0 #5fc7ff;
}

.inventory-skill-item.is-enchanted {
  border-color: rgba(37, 255, 145, .32);
  background: linear-gradient(180deg, rgba(32, 62, 76, .84), rgba(12, 34, 45, .94));
}

.inventory-skill-icon,
.inventory-skill-icon img,
.inventory-skill-fallback {
  width: 26px;
  height: 26px;
}

.inventory-skill-icon img {
  object-fit: contain;
}

.inventory-skill-fallback {
  display: grid;
  place-items: center;
  border: 1px solid rgba(142, 220, 255, .3);
  color: #8edcff;
  font-size: 9px;
}

.inventory-skill-name {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: #f3f9ff;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-skill-enchant-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(37, 255, 145, .45);
  background: rgba(37, 255, 145, .12);
  color: #25ff91;
  padding: 1px 6px;
  font-size: 11px;
  font-style: normal;
  line-height: 16px;
}

.inventory-skill-meta {
  color: #8edcff;
  font-size: 11px;
}

.inventory-skill-meta b {
  min-width: 30px;
  display: inline-flex;
  justify-content: center;
  padding: 1px 5px;
  border: 1px solid rgba(142, 220, 255, .22);
  background: rgba(142, 220, 255, .06);
  color: #bfeaff;
  font-size: 10px;
  line-height: 15px;
}

.inventory-skill-item.is-enchanted .inventory-skill-meta b {
  border-color: rgba(37, 255, 145, .45);
  background: rgba(37, 255, 145, .12);
  color: #25ff91;
}

.inventory-skill-item.enchant-15 .inventory-skill-meta b {
  border-color: rgba(37, 255, 145, .58);
  background: rgba(37, 255, 145, .13);
  color: #25ff91;
  box-shadow: 0 0 10px rgba(37, 255, 145, .12);
}

.inventory-skill-item.enchant-30 .inventory-skill-meta b {
  border-color: rgba(255, 209, 82, .66);
  background: rgba(255, 209, 82, .14);
  color: #ffd152;
  box-shadow: 0 0 12px rgba(255, 209, 82, .14);
}

.inventory-skill-detail {
  overflow: hidden;
  color: #8bb6d5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-skill-hover {
  position: absolute;
  left: 30px;
  top: calc(100% - 2px);
  z-index: 95;
  width: min(360px, 82vw);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  border: 1px solid rgba(255, 209, 82, .46);
  background:
    linear-gradient(180deg, rgba(21, 38, 55, .99), rgba(7, 18, 30, .99)),
    radial-gradient(circle at 18% 0%, rgba(103, 184, 230, .15), transparent 42%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .44), inset 0 0 0 1px rgba(103, 184, 230, .14);
  padding: 10px;
  transition: opacity .12s ease, transform .12s ease;
}

.inventory-skill-item.is-open .inventory-skill-hover {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.skill-hover-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(99, 145, 179, .36);
}

.skill-hover-head img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.skill-hover-head strong {
  display: block;
  color: #f3f9ff;
  font-size: 13px;
  line-height: 1.25;
}

.skill-hover-head small {
  display: block;
  margin-top: 3px;
  color: #8edcff;
  font-size: 11px;
}

.skill-hover-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  margin-top: 9px;
  font-size: 11px;
}

.skill-hover-grid span {
  color: #8bb6d5;
  font-weight: 900;
  text-transform: uppercase;
}

.skill-hover-grid b {
  color: #f3f9ff;
  text-align: right;
}

.skill-hover-description {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(99, 145, 179, .28);
  color: #d7e8f4;
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
}

@media (max-width: 1280px) {
  .character-detail-summary,
  .inventory-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .inventory-showcase-layout {
    grid-template-columns: 1fr;
  }

  .inventory-warehouse-card {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .character-detail-summary,
  .inventory-overview,
  .character-detail-grid,
  .inventory-showcase-layout {
    grid-template-columns: 1fr;
  }

  .inventory-warehouse-card {
    grid-column: auto;
  }

  .character-detail-summary div,
  .inventory-overview div {
    border-right: 0;
    border-bottom: 1px solid rgba(99, 145, 179, .5);
  }
}

.master-panel header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(88, 119, 151, .72);
}

.master-panel h2 {
  margin: 2px 0 0;
  color: #cfe1ef;
  font-size: 18px;
}

.master-list {
  display: grid;
  gap: 0;
  padding: 0;
}

.master-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(60, 80, 103, .34);
}

.master-list-row:nth-child(odd) {
  background: rgba(32, 45, 58, .74);
}

.master-list-row strong {
  color: #dce8f5;
}

.master-list-row span {
  display: block;
  margin-top: 3px;
  color: #9fb2c8;
  font-size: 12px;
}

.master-list-row button,
.dashboard-actions button {
  height: 29px;
  padding: 0 11px;
  border: 1px solid #40566d;
  background: rgba(62, 75, 92, .9);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

#chatView.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}


.chat-channels {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(13, 24, 36, .96);
  border-top: 1px solid rgba(120, 210, 255, .16);
  border-bottom: 1px solid rgba(120, 210, 255, .12);
  overflow-x: auto;
  scrollbar-width: thin;
}
.chat-channel {
  height: 30px;
  padding: 0 12px;
  color: #b9d9ef;
  background: rgba(32, 49, 70, .72);
  border: 1px solid rgba(120, 210, 255, .16);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.chat-channel:hover {
  color: #f4fbff;
  border-color: rgba(120, 210, 255, .42);
  background: rgba(43, 67, 94, .82);
}
.chat-channel.active {
  color: #06111b;
  background: linear-gradient(180deg, #78d2ff, #4caee0);
  border-color: rgba(120, 210, 255, .95);
  box-shadow: 0 0 0 1px rgba(120, 210, 255, .16), 0 8px 20px rgba(35, 139, 195, .18);
}

.chat-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(14, 23, 34, .94);
  border-bottom: 1px solid rgba(120, 210, 255, .16);
}

.chat-search-bar input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  color: #f2f8ff;
  background: rgba(24, 36, 52, .98);
  border: 1px solid rgba(120, 210, 255, .24);
  border-radius: 7px;
  outline: none;
}

.chat-search-bar input:focus {
  border-color: rgba(120, 210, 255, .64);
  box-shadow: 0 0 0 3px rgba(72, 167, 216, .12);
}

.chat-search-count {
  min-width: 54px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.chat-search-empty {
  margin: 16px 24px;
}

.chat-history-loader {
  width: calc(100% - 32px);
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 16px 6px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}

.chat-history-loader-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 151, 188, .45), transparent);
}

.chat-history-loader-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border: 1px solid rgba(73, 116, 150, .58);
  border-radius: 6px;
  background: rgba(10, 23, 36, .74);
  box-shadow: inset 0 0 0 1px rgba(126, 215, 255, .035);
}

.chat-history-loader button {
  height: 22px;
  padding: 0 9px;
  border-radius: 4px;
  color: #cfe9fb;
  background: rgba(31, 55, 78, .86);
  border: 1px solid rgba(83, 134, 175, .5);
  font-size: 11px;
  line-height: 1;
}

.chat-history-loader button:hover {
  color: #071320;
  border-color: rgba(255, 201, 40, .86);
  background: linear-gradient(180deg, #ffd85f, #d69a22);
}

.chat-history-loader span {
  color: #83a2ba;
  font-size: 10px;
  min-width: 42px;
  text-align: center;
}

.messages {
  height: auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 0 34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.messages::-webkit-scrollbar {
  width: 12px;
}

.messages::-webkit-scrollbar-thumb {
  background: #496279;
  border: 3px solid var(--bg);
  border-radius: 8px;
}

.message {
  width: 100%;
  padding: 8px 16px;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 56px;
  overflow: visible;
  flex: 0 0 auto;
}

.message.no-avatar {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 18px;
}

.message:last-child {
  margin-bottom: 12px;
}

.message:hover {
  background: rgba(120, 210, 255, .035);
}

.system-message {
  display: block;
  padding: 8px 24px;
}

.system-message:hover {
  background: transparent;
}

.system-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.system-line::before,
.system-line::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #33485e;
}

.message.mine {
  align-self: stretch;
  background: rgba(72, 167, 216, .045);
  border-left: 2px solid rgba(72, 167, 216, .18);
}

.message.mine:hover {
  background: rgba(72, 167, 216, .06);
}

.message.pending {
  opacity: .72;
}

.message.failed .message-text {
  color: #ffb4b4;
}

.avatar {
  position: static;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1b6f96, #39a086);
  color: #fff;
  font-weight: 800;
  border: 2px solid #24384d;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(28, 52, 76, .18);
}

.avatar.has-image {
  background: #26384c;
}

.avatar img,
.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.message-body {
  min-height: 28px;
  position: relative;
  min-width: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: 46px max-content minmax(0, 1fr);
  align-items: start;
  column-gap: 5px;
}

.message-meta,
.saved-meta {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 0;
  min-height: 18px;
  line-height: 1;
  white-space: nowrap;
}

.message-time {
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  text-align: left;
  white-space: nowrap;
}

.message-text-wrap {
  min-width: 0;
  padding-top: 0;
}

.crest-stack {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
  height: 16px;
  margin-right: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  vertical-align: middle;
  align-self: center;
}

.crest-canvas {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
  image-rendering: pixelated;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

.crest-canvas.ally {
  border-radius: 0;
  border-right: 0;
}

.crest-canvas.crest-missing {
  background: linear-gradient(135deg, rgba(72, 167, 216, .35), rgba(240, 178, 50, .28));
}

.crest-badge {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  color: #f7fbff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .28), transparent 42%),
    linear-gradient(180deg, var(--crest-color), color-mix(in srgb, var(--crest-color), #000 42%));
  border: 1px solid rgba(207, 232, 255, .42);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .24), 0 2px 8px rgba(0, 0, 0, .28);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.crest-badge.ally {
  border-radius: 50%;
}

.message-meta strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}

.message-text,
.saved-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #dce8f5;
  font-size: 15.5px;
  line-height: 1.35;
}

.message-line {
  display: block;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.message-line .message-text {
  min-width: 0;
  max-width: 100%;
  position: relative;
  top: -1px;
}

.message-actions-popover {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 29, 42, .96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity .12s ease, border-color .12s ease;
  z-index: 4;
}

.message:hover .message-actions-popover,
.message:focus-within .message-actions-popover,
.message.actions-pinned .message-actions-popover {
  opacity: 1;
  pointer-events: auto;
  border-color: rgba(120, 210, 255, .34);
}

.quick-reaction-bar,
.message-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
}

.quick-reaction-bar.used {
  opacity: 0;
  pointer-events: none;
}

.quick-reaction-bar button {
  width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  color: #dce8f5;
  font-size: 16px;
  transition: background .12s ease, box-shadow .12s ease;
}

.quick-reaction-bar button:hover {
  background: rgba(72, 167, 216, .18);
  box-shadow: inset 0 0 0 1px rgba(120, 210, 255, .18);
}

.message-toolbar button,
.note-form button {
  padding: 5px 7px;
  background: transparent;
  color: #aec5d9;
  border-radius: 5px;
  font-size: 12px;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}

.message-toolbar button:hover,
.note-form button:hover {
  background: rgba(72, 167, 216, .16);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(120, 210, 255, .18);
}

.message-toolbar .toolbar-danger {
  color: #ffb4b4;
}

.message-toolbar .toolbar-danger:hover {
  background: rgba(239, 68, 68, .18);
  color: #ffd6d6;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .28);
}

.deleted-message .message-text {
  color: #8fa4b8 !important;
  font-style: italic;
}

.deleted-message .reaction-list,
.deleted-message .quick-reaction-bar {
  display: none;
}

.edit-input {
  width: 100%;
  min-height: 72px;
  padding: 13px 15px;
  border: 1px solid #b8c9d8;
  border-radius: 8px;
  resize: vertical;
  background: linear-gradient(180deg, #1a2738, #142130);
  color: var(--ink);
  font: inherit;
  line-height: 1.38;
  outline: 2px solid transparent;
}

.edit-input:focus {
  outline-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 109, 143, .12);
}

.edit-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.reaction-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 0;
  margin: 5px 0 0;
}

.reaction-chip {
  padding: 2px 7px;
  border-radius: 8px;
  background: #26384c;
  color: #dce8f5;
  font-size: 12px;
  line-height: 1.4;
}

.reaction-chip:hover {
  background: #334b63;
}

.attachment {
  display: inline-flex;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #78d2ff;
  background: #152233;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.attachment:hover {
  border-color: #78d2ff;
}

.error {
  color: var(--danger);
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 10, 18, .64);
  backdrop-filter: blur(5px);
}

.confirm-card {
  width: min(420px, calc(100vw - 36px));
  padding: 18px;
  background: linear-gradient(180deg, rgba(29, 43, 61, .98), rgba(16, 26, 39, .98));
  border: 1px solid rgba(120, 210, 255, .24);
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .44);
}

.confirm-card h3 {
  margin: 0 0 8px;
  color: #f2f8ff;
  font-size: 19px;
}

.confirm-card p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.45;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.danger-button {
  background: var(--danger);
}

.danger-button:hover {
  background: #c93336;
}

.composer {
  min-height: 104px;
  padding: 8px 16px 12px;
  background: rgba(14, 23, 34, .94);
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
}

.composer-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 12px;
  background: rgba(24, 36, 52, .98);
  border: 1px solid rgba(120, 210, 255, .24);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.composer-box:focus-within {
  border-color: rgba(120, 210, 255, .54);
  box-shadow: 0 0 0 3px rgba(72, 167, 216, .12), 0 10px 28px rgba(0, 0, 0, .18);
}

.composer-box textarea {
  min-height: 32px;
  max-height: 110px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: #f2f8ff;
  outline: none;
  caret-color: #78d2ff;
}

.composer-box textarea::placeholder {
  color: #8196aa;
}

.attach-round {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  flex: 0 0 auto;
  background: #26384c;
  color: #36536b;
  font-size: 24px;
  line-height: 1;
}

.attach-round:hover {
  background: #36516a;
}

.composer-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.icon-button,
.secondary-button,
.file-button {
  background: var(--panel-soft);
  color: var(--muted);
}

.icon-button:hover,
.secondary-button:hover,
.file-button:hover {
  background: #31465d;
  color: var(--ink);
}

.composer-hint,
.upload-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.emoji-picker {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  position: fixed;
  width: 280px;
  max-height: 96px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  background: rgba(20, 31, 45, .98);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(120, 210, 255, .06);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 4px;
  z-index: 70;
}

.emoji-option {
  aspect-ratio: 1;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
}

.emoji-option:hover {
  background: #25384c;
}

.capture-menu {
  position: fixed;
  z-index: 40;
  width: 136px;
  display: grid;
  gap: 3px;
  padding: 5px;
  background: rgba(20, 31, 45, .98);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(120, 210, 255, .06);
  pointer-events: auto;
}

.capture-menu button {
  width: 100%;
  background: #24384e;
  color: var(--ink);
  text-align: left;
  padding: 5px 7px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 4px;
  white-space: nowrap;
}

.capture-menu button:hover,
.capture-menu button:focus {
  background: #2f4a64;
  outline: 2px solid rgba(72, 167, 216, .22);
}

.capture-remember {
  display: flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.capture-remember input {
  width: auto;
  accent-color: var(--accent);
}

.file-button {
  width: auto;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}

.file-button input {
  display: none;
}

.settings,
.saved-list,
.note-form,
.notes-board,
.activity-panel,
.screenshot-grid {
  width: min(920px, calc(100vw - 36px));
  margin: 18px auto;
  max-height: calc(100vh - 134px);
  overflow: auto;
}

.activity-panel {
  display: grid;
  gap: 10px;
  align-content: start;
}

.activity-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(29, 43, 61, .78);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 12px rgba(35, 165, 90, .38);
}

.activity-item.offline .activity-dot {
  background: var(--danger);
  box-shadow: 0 0 12px rgba(242, 63, 66, .35);
}

.activity-item strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.activity-item time {
  color: var(--muted);
  font-size: 12px;
}

.settings {
  display: none;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #256d8f, #46a188);
  border: 3px solid #24384d;
  box-shadow: 0 10px 26px rgba(28, 52, 76, .18);
}

.avatar-picker {
  justify-content: center;
}

.settings.active {
  display: grid;
}

.note-form {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.note-form textarea {
  min-height: 82px;
  background: var(--composer);
}

.saved-list {
  display: grid;
  gap: 12px;
}

.notes-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 12px;
  max-height: calc(100vh - 260px);
  overflow: auto;
}

.note-column {
  min-height: 240px;
  background: rgba(29, 43, 61, .72);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.note-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(16, 26, 39, .62);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
}

.note-column.status-new .note-column-header {
  box-shadow: inset 4px 0 0 var(--accent);
}

.note-column.status-progress .note-column-header {
  box-shadow: inset 4px 0 0 var(--warn);
}

.note-column.status-done .note-column-header {
  box-shadow: inset 4px 0 0 var(--ok);
}

.note-column.status-cancelled .note-column-header {
  box-shadow: inset 4px 0 0 var(--danger);
}

.note-dropzone {
  min-height: 198px;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.note-dropzone.drag-over {
  background: rgba(72, 167, 216, .12);
  outline: 2px dashed rgba(120, 210, 255, .55);
  outline-offset: -6px;
}

.note-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 7px;
  padding: 10px;
  background: rgba(24, 36, 52, .94);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
  cursor: grab;
}

.note-card:hover {
  border-color: rgba(120, 210, 255, .52);
  background: rgba(32, 47, 65, .96);
}

.note-card.dragging {
  opacity: .55;
}

.note-card.status-progress {
  border-left-color: var(--warn);
}

.note-card.status-done {
  border-left-color: var(--ok);
}

.note-card.status-cancelled {
  border-left-color: var(--danger);
}

.note-card-content {
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
  margin-bottom: 10px;
}

.note-card-meta {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.saved-item,
.screenshot-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(28, 52, 76, .08);
}

.saved-item img,
.screenshot-card img {
  max-width: 100%;
  max-height: 420px;
  border-radius: 6px;
  border: 1px solid var(--line);
  margin-top: 10px;
  object-fit: contain;
}

.screenshot-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #25384c;
  margin: 0 0 10px;
}

.screenshot-card a {
  position: relative;
  display: block;
}

.screenshot-title {
  margin: 0 0 8px;
  padding: 8px 10px;
  color: #f2f8ff;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid rgba(120, 210, 255, .18);
  border-radius: 6px;
  background: rgba(16, 26, 39, .56);
  overflow-wrap: anywhere;
}

.screenshot-rename-input {
  width: 100%;
  padding: 8px 9px;
  color: #f2f8ff;
  background: rgba(9, 16, 27, .82);
  border: 1px solid rgba(120, 210, 255, .58);
  border-radius: 5px;
  outline: none;
  font: inherit;
  font-weight: 800;
}

.screenshot-rename-input:focus {
  box-shadow: 0 0 0 3px rgba(120, 210, 255, .16);
}

.screenshot-rename-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.screenshot-image-label {
  position: absolute;
  left: 8px;
  top: 8px;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  color: #f2f8ff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 5px;
  background: rgba(10, 18, 30, .82);
  border: 1px solid rgba(120, 210, 255, .28);
  overflow-wrap: anywhere;
}

.empty-panel {
  grid-column: 1 / -1;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.context-menu {
  position: fixed;
  z-index: 20;
  width: 236px;
  padding: 6px;
  background: rgba(24, 36, 52, .98);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.context-menu button {
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: transparent;
  color: #dce8f5;
  border-radius: 4px;
}

.context-menu button[data-action="user-role"] {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
}

.role-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}

.context-check {
  color: #78d2ff;
  font-weight: 900;
}

.context-menu button.active-context-option {
  background: rgba(120, 210, 255, .12);
  color: #fff;
  box-shadow: inset 3px 0 0 #78d2ff;
}

.context-menu button:hover {
  background: var(--accent);
  color: #fff;
}

.context-menu .danger-action {
  color: #ffb4b4;
}

.context-menu .danger-action:hover {
  background: var(--danger);
  color: #fff;
}

.context-menu button[data-status="progress"]:hover {
  background: var(--warn);
  color: #17202b;
}

.context-menu button[data-status="done"]:hover {
  background: var(--ok);
}

.context-menu button[data-status="cancelled"]:hover {
  background: var(--danger);
}

.settings-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 26, 39, .45);
}

.settings-section h2 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 12px;
}

.toggle-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(38, 56, 76, .45);
}

.toggle-grid label:has(input:checked) {
  border-color: rgba(120, 210, 255, .5);
  background: rgba(72, 167, 216, .14);
  color: var(--ink);
}

.toggle-grid input {
  width: auto;
  accent-color: var(--accent);
}

.settings-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.context-separator {
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
}

.context-label {
  padding: 4px 8px 6px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.context-emoji-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.context-emoji-row button {
  display: grid;
  place-items: center;
  padding: 7px 0;
  text-align: center;
  font-size: 16px;
}

.explain-panel {
  position: fixed;
  right: 18px;
  top: 108px;
  z-index: 30;
  width: min(360px, calc(100vw - 36px));
  padding: 14px 16px;
  color: #ecf4ff;
  background: #1d2b3d;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(30, 55, 80, .16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease;
  font-size: 14px;
  line-height: 1.45;
}

.explain-panel.active {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 680px) {
  .topbar {
    height: auto;
    padding: 12px;
    align-items: flex-start;
    flex-direction: column;
  }

  .messages {
    height: calc(100vh - 264px);
  }

  .message {
    padding-right: 12px;
  }

  .composer-actions,
  .note-form {
    flex-direction: column;
  }

  .notes-board {
    grid-template-columns: 1fr;
  }

  .composer-actions button,
  .composer-actions .file-button,
  .note-form button {
    width: 100%;
    justify-content: center;
  }
}

.view {
  min-height: 0;
  overflow: auto;
}

#chatView {
  overflow: hidden;
}

.view.active:not(#chatView) {
  overflow: auto;
}

.file-kind {
  margin-top: 4px;
  color: #ffb24a;
  font-weight: 800;
  font-size: 12px;
}

.capture-menu button.selected::before {
  content: "\2713 ";
  color: #78d2ff;
}

.quick-note-panel {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(29, 43, 61, .8);
}

.composer-actions button.active {
  background: #2f8fcb;
  color: #fff;
}

/* MindeX - Expose main workspace */
.shell {
  position: relative;
  grid-template-columns: 196px minmax(560px, 1fr) 288px;
  grid-template-rows: 48px 48px minmax(0, 1fr);
  background:
    radial-gradient(circle at 54% 38%, rgba(67, 150, 202, .12), transparent 38%),
    linear-gradient(180deg, #0a1724 0%, #0c1722 100%);
  color: #d9e9f7;
}

.topbar {
  height: 48px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(8, 18, 30, .98), rgba(7, 16, 26, .98));
  border-bottom: 1px solid rgba(91, 130, 162, .42);
  grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 1fr);
  box-shadow: 0 1px 0 rgba(120, 210, 255, .08), 0 10px 28px rgba(0, 0, 0, .24);
  -webkit-app-region: drag;
}

.topbar button,
.topbar a,
.topbar input,
.topbar select {
  -webkit-app-region: no-drag;
}

.topbar-brand,
.channel-title,
.status-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.topbar-brand {
  justify-content: flex-start;
  gap: 10px;
}

.topbar-brand strong {
  color: #f3f9ff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .01em;
  white-space: nowrap;
}

.topbar-brand strong span {
  color: #26aaf3;
}

.channel-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(57, 179, 255, .44));
}

.topbar-server-time {
  height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  margin-left: 7px;
  border: 1px solid rgba(120, 210, 255, .18);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(17, 31, 46, .72), rgba(9, 22, 36, .76));
  color: #b7d9ef;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.channel-title {
  justify-content: center;
  gap: 8px;
}

.character-session-button {
  height: 28px;
  min-width: 196px;
  padding: 0 13px;
  border-color: rgba(120, 210, 255, .34);
  background: rgba(17, 31, 46, .92);
  color: #e8f6ff;
  border-radius: 5px;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.status-row {
  justify-content: flex-end;
  gap: 14px;
  color: #c5d7e7;
  font-size: 13px;
}

.online-button {
  height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(120, 210, 255, .22);
  background: rgba(17, 31, 46, .92);
  color: #e6f5ff;
}

.status-dot {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 12px rgba(45, 212, 117, .4);
}

.notification-bell {
  position: relative;
  width: 31px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(120, 210, 255, .22);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(17, 31, 46, .92), rgba(9, 24, 39, .96));
  color: #bfe8ff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.notification-bell:hover,
.notification-bell.active {
  border-color: rgba(255, 201, 40, .55);
  color: #ffe28a;
  background: linear-gradient(180deg, rgba(38, 61, 82, .96), rgba(18, 38, 58, .98));
  box-shadow: 0 0 14px rgba(255, 201, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.master-signout-button {
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 201, 40, .18);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(17, 31, 46, .72), rgba(9, 24, 39, .82));
  color: #d7ecfb;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.master-signout-button:hover {
  border-color: rgba(255, 201, 40, .62);
  color: #ffe28a;
  background: linear-gradient(180deg, rgba(42, 63, 82, .96), rgba(20, 38, 56, .98));
  box-shadow: 0 0 14px rgba(255, 201, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.notification-bell-icon {
  position: relative;
  width: 14px;
  height: 15px;
  display: block;
  transform: translateY(1px);
}

.notification-bell-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 3px 3px;
  box-sizing: border-box;
}

.notification-bell-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 4px 0 -1px currentColor;
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: linear-gradient(180deg, #ff4f5f, #a50f26);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(255, 67, 86, .32);
}

.notification-panel {
  position: absolute;
  top: 52px;
  right: 92px;
  z-index: 80;
  width: 310px;
  max-height: min(420px, calc(100vh - 92px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(91, 157, 205, .5);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(18, 38, 58, .98), rgba(9, 24, 39, .98));
  box-shadow: 0 22px 58px rgba(0, 0, 0, .46), 0 0 24px rgba(72, 167, 216, .1);
  -webkit-app-region: no-drag;
}

.notification-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 11px;
  border-bottom: 1px solid rgba(91, 130, 162, .36);
}

.notification-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notification-panel-head strong {
  color: #f2fbff;
  font-size: 13px;
  font-weight: 900;
}

.notification-panel-head button {
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(120, 210, 255, .24);
  border-radius: 4px;
  background: rgba(14, 32, 51, .82);
  color: #9fdfff;
  font-size: 11px;
  font-weight: 800;
}

.notification-panel-head .notification-toggle {
  min-width: 72px;
  font-weight: 900;
}

.notification-panel-head .notification-toggle.enabled {
  border-color: rgba(56, 255, 155, .45);
  background: linear-gradient(180deg, rgba(24, 93, 63, .92), rgba(13, 54, 41, .96));
  color: #55ff9f;
}

.notification-panel-head .notification-toggle.disabled {
  border-color: rgba(255, 87, 87, .48);
  background: linear-gradient(180deg, rgba(95, 38, 45, .95), rgba(59, 18, 28, .98));
  color: #ff7c7c;
}

.notification-list {
  overflow: auto;
  padding: 6px;
}

.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid rgba(91, 130, 162, .23);
}

.notification-item strong {
  display: block;
  color: #63ff92;
  font-size: 12px;
}

.notification-item p {
  margin: 2px 0 0;
  color: #c7d9e7;
  font-size: 12px;
  line-height: 1.35;
}

.notification-item time,
.notification-empty {
  color: #8db0c9;
  font-size: 11px;
}

.notification-empty {
  padding: 18px 10px;
  text-align: center;
}

.top-username,
.clock-row {
  white-space: nowrap;
}

.window-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 4px;
  height: 32px;
  padding: 0 4px;
  border-left: 1px solid rgba(92, 137, 174, .26);
  -webkit-app-region: no-drag;
}

.window-controls button {
  width: 28px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #b9d6eb;
  font-size: 0;
  font-weight: 900;
  line-height: 0;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.window-controls button::before,
.window-controls button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  transform: translate(-50%, -50%);
  background: currentColor;
}

.window-controls button[data-window-action="minimize"]::before {
  width: 10px;
  height: 2px;
  border-radius: 2px;
}

.window-controls button[data-window-action="maximize"]::before {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
  background: transparent;
}

.window-controls button[data-window-action="close"]::before,
.window-controls button[data-window-action="close"]::after {
  width: 12px;
  height: 2px;
  border-radius: 2px;
}

.window-controls button[data-window-action="close"]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.window-controls button[data-window-action="close"]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.window-controls button:hover {
  color: #ffffff;
  border-color: rgba(109, 191, 248, .48);
  background: linear-gradient(180deg, rgba(32, 62, 86, .92), rgba(15, 35, 53, .94));
  box-shadow: 0 0 10px rgba(78, 184, 255, .12);
}

.window-controls .window-close:hover {
  color: #ffffff;
  border-color: rgba(255, 86, 86, .68);
  background: linear-gradient(180deg, rgba(150, 37, 44, .96), rgba(87, 21, 30, .98));
  box-shadow: 0 0 12px rgba(255, 58, 74, .16);
}

.side-nav {
  grid-row: 2 / 4;
  padding: 46px 10px 10px;
  background:
    linear-gradient(90deg, rgba(7, 17, 28, .98), rgba(13, 27, 42, .97)),
    radial-gradient(circle at 60% 15%, rgba(57, 179, 255, .12), transparent 36%);
  border-right: 1px solid rgba(91, 130, 162, .35);
}

.side-account {
  gap: 8px;
  margin-bottom: 13px;
}

.side-account div {
  min-height: 31px;
  padding: 7px 9px;
  border-radius: 2px;
  border-color: rgba(73, 112, 145, .44);
  background: linear-gradient(180deg, rgba(17, 31, 46, .92), rgba(7, 18, 29, .92));
}

.side-account span,
.side-group-title {
  color: #69c9ff;
  font-size: 10px;
  letter-spacing: 0;
}

.side-account strong {
  color: #ffc92f;
  font-size: 13px;
}

.side-account div:nth-child(2) strong {
  color: #2ef276;
}

.admin-sidebar-button {
  height: 31px;
  color: #ffcf38;
  border-color: rgba(255, 207, 56, .68);
  background: linear-gradient(180deg, rgba(56, 50, 23, .86), rgba(28, 36, 30, .94));
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 207, 56, .08), 0 0 20px rgba(255, 199, 45, .07);
}

.side-nav-group .tab {
  height: 29px;
  font-size: 11px;
  font-weight: 800;
  color: #c9dce9;
  border-color: rgba(70, 105, 135, .45);
  background: rgba(20, 35, 51, .68);
}

.side-nav-group .tab:hover,
.side-nav-group .tab.active {
  color: #f6fbff;
  border-color: rgba(90, 189, 244, .78);
  background: linear-gradient(180deg, rgba(28, 55, 77, .92), rgba(18, 39, 58, .94));
  box-shadow: inset 3px 0 0 #25aef4;
}

.side-quick-actions {
  gap: 7px;
}

.side-action {
  min-height: 30px;
  border-radius: 3px;
  font-size: 11px;
}

.app-performance {
  margin-top: 18px;
  padding: 10px;
  border: 1px solid rgba(70, 105, 135, .38);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(14, 28, 43, .9), rgba(8, 19, 31, .92));
  color: #b8ccdc;
  font-size: 11px;
}

.app-performance div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 6px;
}

.app-performance strong {
  color: #dcebf8;
  font-weight: 600;
}

.app-performance div:first-child strong {
  color: #33df78;
}

.app-performance button {
  width: 100%;
  height: 28px;
  margin-top: 6px;
  color: #dceeff;
  border: 1px solid rgba(91, 146, 184, .32);
  border-radius: 3px;
  background: rgba(27, 49, 69, .78);
}

.side-footer-note {
  margin-top: auto;
  padding: 12px 2px 2px;
  color: #7f94a9;
  font-size: 11px;
}

.module-nav {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(6, minmax(112px, 1fr)) minmax(150px, 1fr);
  gap: 10px;
  padding: 8px 10px;
  background: rgba(9, 21, 34, .88);
  border-bottom: 1px solid rgba(91, 130, 162, .34);
}

.module-tab {
  height: 32px;
  border-radius: 3px;
  border-color: rgba(70, 105, 135, .45);
  background: linear-gradient(180deg, rgba(18, 33, 50, .94), rgba(13, 27, 42, .94));
  color: #d7e7f4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.module-tab:hover,
.module-tab.active {
  border-color: rgba(69, 183, 248, .65);
  background: linear-gradient(180deg, rgba(25, 65, 95, .92), rgba(18, 45, 67, .94));
  box-shadow: inset 0 -2px 0 #28aef2, 0 0 18px rgba(40, 174, 242, .08);
}

.module-tab.admin-module {
  color: #ffcf38;
  border-color: rgba(255, 207, 56, .42);
  background: linear-gradient(180deg, rgba(73, 57, 18, .82), rgba(36, 34, 23, .94));
}

.friends-rail {
  grid-row: 2 / 4;
  padding: 12px 10px 14px;
  background:
    linear-gradient(180deg, rgba(8, 18, 30, .96), rgba(8, 17, 27, .98)),
    radial-gradient(circle at 50% 12%, rgba(41, 157, 226, .14), transparent 38%);
  border-left: 1px solid rgba(91, 130, 162, .34);
}

.friends-head {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0;
  margin: 0 0 10px;
  border: 0;
  background: transparent;
}

.friends-head strong {
  margin: 0;
  color: #f2f8ff;
  font-size: 15px;
}

.new-chat-button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(91, 146, 184, .28);
  border-radius: 4px;
  background: rgba(24, 42, 60, .9);
  color: #d9eafa;
  font-size: 12px;
}

.friends-search {
  width: 100%;
  height: 30px;
  margin-bottom: 8px;
  background: rgba(16, 30, 45, .96);
  border-color: rgba(71, 115, 150, .34);
}

.friends-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 9px;
}

.friends-filters select {
  height: 28px;
  padding: 0 24px 0 9px;
  appearance: none;
  -webkit-appearance: none;
  color: #cfe3f4;
  background:
    linear-gradient(45deg, transparent 50%, #9cd9ff 50%) calc(100% - 13px) 11px / 5px 5px no-repeat,
    linear-gradient(135deg, #9cd9ff 50%, transparent 50%) calc(100% - 8px) 11px / 5px 5px no-repeat,
    linear-gradient(180deg, rgba(26, 50, 72, .98), rgba(14, 31, 49, .98));
  border: 1px solid rgba(98, 153, 191, .54);
  border-radius: 4px;
  font-weight: 700;
  outline: none;
}

.friends-filters select:hover,
.friends-filters select:focus {
  border-color: rgba(255, 201, 40, .58);
  color: #f4fbff;
  box-shadow: 0 0 0 2px rgba(255, 201, 40, .08);
}

.friends-filters select option {
  color: #eaf6ff;
  background: #13283c;
}

.friends-section {
  margin: 0;
}

.friends-section h3 {
  display: none;
}

.friends-list {
  gap: 0;
}

.friends-list .online-user-row,
.online-user-row.friend-card {
  min-height: 31px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.friends-list .online-user-row:hover,
.online-user-row.friend-card:hover,
.online-user-row.friend-card.active {
  border-color: rgba(41, 174, 242, .58);
  background: rgba(24, 48, 69, .72);
  box-shadow: inset 0 0 0 1px rgba(41, 174, 242, .08);
}

.friend-avatar {
  display: none;
}

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

.friend-copy strong {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #f2f8ff;
  font-size: 12px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-copy .crest-stack {
  flex: 0 0 auto;
  height: 13px;
  gap: 0;
  margin-right: 2px;
}

.friend-copy .crest-canvas,
.friend-copy .crest-badge {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
}

.friend-copy .crest-canvas + .crest-canvas,
.friend-copy .crest-badge + .crest-badge {
  margin-left: -1px;
}

.friend-copy .friend-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-copy span {
  margin-top: 1px;
  color: #8fa8bc;
  font-size: 10px;
  line-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-status {
  align-self: center;
  color: #2de67c;
  font-size: 11px;
  font-style: normal;
}

.online-user-row.friend-card.offline {
  opacity: .68;
}

.online-user-row.friend-card.offline .friend-status {
  color: #ff5b66;
}

.show-offline-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  color: #8fa8bc;
  font-size: 12px;
  border-top: 1px solid rgba(91, 130, 162, .18);
}

#chatView.active {
  grid-row: 3;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr) 40px 102px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(12, 27, 41, .92), rgba(10, 22, 34, .96)),
    radial-gradient(circle at 50% 44%, rgba(66, 150, 202, .1), transparent 45%);
  border-left: 1px solid rgba(91, 130, 162, .18);
  border-right: 1px solid rgba(91, 130, 162, .18);
}

.chat-search-bar {
  padding: 8px 10px;
  background: rgba(8, 18, 30, .72);
  border-bottom: 1px solid rgba(91, 130, 162, .28);
}

.chat-search-bar input {
  height: 30px;
  border-radius: 4px;
  background: rgba(17, 31, 46, .88);
  border-color: rgba(72, 117, 151, .34);
}

.chat-search-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-search-tools .icon-button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(72, 117, 151, .34);
  border-radius: 4px;
  color: #aecdde;
  background: rgba(16, 30, 45, .92);
}

.messages {
  gap: 0;
  padding: 10px 0 16px;
  background:
    radial-gradient(circle at 52% 42%, rgba(65, 144, 193, .08), transparent 42%),
    linear-gradient(180deg, rgba(14, 30, 45, .5), rgba(12, 25, 38, .58));
}

.messages::-webkit-scrollbar {
  width: 8px;
}

.messages::-webkit-scrollbar-thumb {
  background: rgba(92, 137, 168, .72);
  border: 2px solid #0b1724;
}

.message {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  min-height: 35px;
  padding: 6px 12px;
  background: transparent;
}

.message.no-avatar {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 12px;
}

.message:hover,
.message.mine:hover,
.message.actions-pinned {
  background: rgba(62, 113, 150, .16);
}

.message.mine {
  border-left: 0;
  background: transparent;
}

.avatar {
  width: 34px;
  height: 34px;
  align-self: center;
  border-width: 1px;
  box-shadow: 0 0 0 1px rgba(82, 198, 226, .18), 0 4px 10px rgba(0, 0, 0, .18);
}

.message-body {
  grid-template-columns: 52px max-content minmax(0, 1fr);
  column-gap: 7px;
  align-items: start;
}

.message-time {
  color: #9ec2dd;
  font-size: 12px;
  line-height: 20px;
}

.message-meta {
  min-height: 20px;
  gap: 3px;
  line-height: 20px;
}

.message-meta strong {
  color: #21b7ff;
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
}

.sender-name::after {
  content: ":";
}

.sender-now-name {
  color: #91a8bb;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}

.sender-now-name::before {
  content: "(";
}

.sender-now-name::after {
  content: ")";
}

.profile-name-hint {
  color: #8faabe;
  display: block;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
}

.message-text-wrap {
  align-self: start;
}

.message-line {
  display: block;
}

.message-line .message-text {
  top: 0;
}

.message-text {
  color: #dbeaf7;
  font-size: 13px;
  line-height: 20px;
}

.crest-stack {
  height: 14px;
  align-self: center;
}

.crest-canvas,
.crest-badge {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
}

.reaction-list {
  grid-column: 3;
  margin-top: 5px;
  gap: 5px;
}

.reaction-chip {
  border-radius: 4px;
  background: rgba(31, 55, 75, .92);
  border: 1px solid rgba(80, 130, 162, .22);
  font-size: 11px;
}

.message-actions-popover {
  top: -27px;
  right: 126px;
  grid-template-columns: auto auto;
  padding: 4px;
  border-radius: 6px;
  background: rgba(10, 22, 34, .96);
  border-color: rgba(71, 115, 150, .38);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.message-toolbar button {
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(80, 130, 162, .22);
  border-radius: 4px;
  background: rgba(24, 42, 60, .78);
  color: #cfe3f4;
  font-size: 11px;
}

.quick-reaction-bar button {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.chat-channels {
  align-self: end;
  gap: 7px;
  padding: 7px 10px;
  background: rgba(8, 18, 30, .86);
  border-top: 1px solid rgba(91, 130, 162, .24);
  border-bottom: 1px solid rgba(91, 130, 162, .28);
}

.chat-channel {
  position: relative;
  height: 28px;
  padding: 0 13px;
  border-radius: 4px;
  color: #d7eafa;
  background: linear-gradient(180deg, rgba(25, 43, 61, .92), rgba(15, 31, 47, .94));
  border-color: rgba(73, 119, 151, .42);
}

.chat-channel.active {
  color: #061320;
  background: linear-gradient(180deg, #7edbff, #3aa7dc);
  box-shadow: 0 0 20px rgba(55, 168, 220, .18);
}

.chat-channel.has-unread,
.direct-dock-chip.has-unread {
  animation: chatUnreadPop .34s ease-out;
}

.chat-channel.has-unread:not(.active) {
  border-color: rgba(255, 201, 40, .72);
  box-shadow:
    inset 0 -1px 0 rgba(255, 201, 40, .58),
    0 0 14px rgba(255, 201, 40, .12),
    0 0 18px rgba(89, 204, 255, .06);
}

.chat-unread-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 226, 122, .88);
  color: #061320;
  background: linear-gradient(180deg, #ffe88c, #ffc928 55%, #d99418);
  box-shadow:
    0 0 0 2px rgba(7, 18, 31, .92),
    0 0 14px rgba(255, 201, 40, .28);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
}

@keyframes chatUnreadPop {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-2px) scale(1.025); }
  100% { transform: translateY(0) scale(1); }
}

.composer {
  min-height: 0;
  padding: 8px 10px 10px;
  gap: 6px;
  background: rgba(8, 18, 30, .94);
}

.composer-box {
  min-height: 48px;
  padding: 6px 10px;
  border-radius: 5px;
  background: rgba(17, 31, 46, .92);
  border-color: rgba(72, 117, 151, .42);
}

.composer-box textarea {
  min-height: 36px;
  font-size: 13px;
}

.composer-actions {
  gap: 7px;
}

.composer-actions button,
.composer-actions .file-button {
  height: 28px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 12px;
}

.composer-actions button[type="submit"] {
  color: #fff;
  background: linear-gradient(180deg, #60bde9, #258ccf);
}

.composer-hint,
.upload-status {
  min-height: 14px;
  font-size: 11px;
}

.direct-chat-window {
  position: absolute;
  right: 340px;
  bottom: 118px;
  z-index: 26;
  width: 292px;
  height: 298px;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr) 42px;
  border: 1px solid rgba(80, 130, 162, .44);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(12, 25, 38, .98), rgba(8, 18, 30, .98));
  box-shadow: 0 22px 58px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(120, 210, 255, .04);
  overflow: hidden;
}

.direct-chat-window.minimized {
  height: 42px;
  grid-template-rows: 42px;
}

.direct-chat-window.minimized .direct-chat-messages,
.direct-chat-window.minimized .direct-chat-form {
  display: none;
}

.direct-chat-window header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-bottom: 1px solid rgba(80, 130, 162, .32);
  background: rgba(16, 31, 46, .92);
}

.direct-chat-window header strong {
  display: block;
  color: #f2f8ff;
  font-size: 13px;
}

.direct-chat-window header span {
  display: block;
  color: #2fe37f;
  font-size: 10px;
}

.direct-window-actions {
  display: flex;
  gap: 5px;
}

.direct-window-actions button {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #aac3d6;
  background: rgba(27, 47, 66, .92);
  border: 1px solid rgba(80, 130, 162, .26);
}

.direct-chat-messages {
  min-height: 0;
  overflow: auto;
  padding: 9px;
  display: grid;
  align-content: end;
  gap: 7px;
}

.direct-chat-line {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  color: #cfe1ef;
  font-size: 11px;
  line-height: 1.35;
}

.direct-chat-line time {
  color: #8fa8bc;
}

.direct-chat-line strong {
  color: #2ab8ff;
}

.direct-chat-empty {
  align-self: center;
  justify-self: center;
  color: #8fa8bc;
  font-size: 12px;
}

.direct-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  padding: 7px;
  border-top: 1px solid rgba(80, 130, 162, .24);
}

.direct-chat-form input {
  min-width: 0;
  height: 28px;
  padding: 0 9px;
  color: #eaf6ff;
  background: rgba(14, 27, 41, .96);
  border: 1px solid rgba(80, 130, 162, .34);
  border-radius: 4px;
}

.direct-chat-form button {
  width: 32px;
  border-radius: 4px;
  color: #061320;
  background: linear-gradient(180deg, #60bde9, #258ccf);
}

@media (max-width: 1120px) {
  .shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .direct-chat-window {
    right: 28px;
  }
}

/* Screenshot alignment pass */
.shell {
  grid-template-columns: 196px minmax(720px, 1fr) 274px;
}

.topbar {
  grid-template-columns: 330px minmax(260px, 1fr) 330px;
}

.status-row {
  gap: 12px;
}

.top-username {
  display: none;
}

.clock-row {
  min-width: 118px;
  color: #cfe2f2;
  white-space: nowrap;
}

.module-nav {
  grid-template-columns: minmax(150px, 1fr) minmax(120px, .88fr) minmax(128px, .9fr) minmax(140px, .96fr) minmax(150px, 1fr) minmax(92px, .7fr) minmax(150px, 1fr);
  gap: 9px;
}

.module-tab {
  padding: 0 9px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-tab.chat-tab {
  min-width: 88px;
}

.module-tab.admin-module {
  display: block;
}

.friends-rail {
  padding-left: 10px;
  padding-right: 10px;
}

.friends-head {
  align-items: center;
  min-height: 30px;
}

.friends-head strong {
  font-size: 14px;
}

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

#chatView.active {
  grid-template-rows: 46px minmax(0, 1fr) 42px 92px;
}

.chat-search-bar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.chat-search-bar input {
  max-width: none;
}

.messages {
  padding-top: 11px;
}

.message {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 7px;
  min-height: 38px;
  padding: 5px 12px 5px 10px;
}

.message.no-avatar {
  padding-left: 10px;
}

.avatar {
  width: 28px;
  height: 28px;
  align-self: start;
  margin-top: 1px;
}

.message-body {
  grid-template-columns: 48px max-content minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
}

.message-time {
  line-height: 19px;
  font-size: 11px;
  color: #9dbbd1;
}

.message-time::after {
  content: "";
}

.message-time {
  min-width: 48px;
}

.message-meta {
  gap: 3px;
  min-height: 19px;
  line-height: 19px;
}

.message-meta strong {
  font-size: 12px;
  line-height: 19px;
}

.message-edited {
  color: #7898b2;
  font-size: 10px;
  line-height: 18px;
}

.sender-name::after {
  content: ":";
  margin-right: 3px;
}

.message-text {
  font-size: 12px;
  line-height: 19px;
}

.message-line .message-text {
  display: block;
}

.crest-stack {
  height: 13px;
  margin-right: 2px;
}

.crest-canvas,
.crest-badge {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
}

.message-actions-popover {
  top: -24px;
  right: 70px;
}

.reaction-list {
  margin-top: 3px;
}

.chat-channels {
  padding: 7px 10px;
}

.chat-channel {
  height: 28px;
  font-size: 12px;
}

.composer {
  padding: 8px 10px 9px;
}

.composer-box {
  min-height: 42px;
}

.composer-box textarea {
  min-height: 30px;
}

.composer-actions button,
.composer-actions .file-button {
  height: 27px;
  font-size: 11px;
}

.app-performance {
  display: none;
}

.side-footer-note {
  margin-top: auto;
  padding-top: 18px;
  display: grid;
  gap: 3px;
  line-height: 1.25;
}

.side-footer-note span {
  color: #7f94a9;
  font-size: 10px;
}

.side-footer-note strong {
  color: #b9d9ef;
  font-size: 11px;
  font-weight: 800;
}

.side-account div {
  grid-template-columns: minmax(0, 1fr) auto;
}

.side-account span {
  font-size: 9px;
}

.side-account strong {
  font-size: 12px;
}

@media (max-width: 1280px) {
  .shell {
    grid-template-columns: 196px minmax(620px, 1fr) 274px;
  }

  .module-nav {
    grid-template-columns: repeat(7, minmax(90px, 1fr));
  }

  .module-tab {
    font-size: 10px;
  }
}

/* Navigation icons and bottom workspace status */
.shell {
  grid-template-rows: 48px 48px minmax(0, 1fr) 34px;
}

.side-nav {
  grid-row: 2 / 4;
}

.friends-rail {
  grid-row: 2 / 4;
}

.module-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  grid-template-columns: none;
}

.module-tab {
  min-width: 116px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: visible;
  text-overflow: clip;
}

.module-tab.premium-module {
  min-width: 158px;
  color: #ffe9a6;
  border-color: rgba(255, 207, 56, .42);
  background: linear-gradient(180deg, rgba(60, 48, 22, .8), rgba(18, 36, 52, .95));
}

.module-tab::before,
.side-nav-group .tab::before,
.admin-sidebar-button::before,
.side-action::before {
  content: attr(data-icon);
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  color: #ffc928;
  font-size: 11px;
  line-height: 1;
  border-radius: 3px;
  background: rgba(72, 167, 216, .12);
  box-shadow: inset 0 0 0 1px rgba(120, 210, 255, .1);
}

.side-nav-group .tab,
.admin-sidebar-button,
.side-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-nav-group .tab::before {
  color: #78d2ff;
}

.side-action.donate::before,
.module-tab.premium-module::before,
.admin-sidebar-button::before,
.module-tab.admin-module::before {
  color: #ffc928;
  background: rgba(255, 201, 40, .12);
}

.side-action.rewards::before {
  color: #2ef276;
  background: rgba(46, 242, 118, .1);
}

.side-action.logout::before {
  color: #ff9a9a;
  background: rgba(255, 77, 77, .11);
}

.workspace-statusbar {
  grid-column: 1 / -1;
  grid-row: 4;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  color: #8fa8bc;
  background: linear-gradient(180deg, rgba(8, 18, 30, .98), rgba(6, 14, 23, .98));
  border-top: 1px solid rgba(91, 130, 162, .34);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .14);
  font-size: 11px;
  white-space: nowrap;
}

.workspace-statusbar > span:first-child {
  color: #a9c3d9;
}

.workspace-statusbar strong {
  color: #dceefa;
  font-weight: 800;
}

.workspace-statusbar strong.online {
  color: #2ef276;
}

.workspace-statusbar strong.offline {
  color: #ff6b6b;
}

.statusbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  color: #78d2ff;
  font-size: 13px;
}

@media (max-width: 1280px) {
  .module-nav {
    gap: 7px;
  }

  .module-tab {
    min-width: 104px;
    padding: 0 8px;
  }

  .module-tab.premium-module {
    min-width: 142px;
  }

  .workspace-statusbar {
    gap: 12px;
    font-size: 10px;
  }
}

.typing-indicator {
  min-height: 16px;
  color: #9fc9e8;
  font-size: 12px;
}

.note-column.status-future .note-column-header {
  border-color: rgba(160, 126, 255, .75);
}

.note-card.status-future {
  border-left-color: #9b7cff;
}

.activity-table {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(29, 43, 61, .78);
}

.activity-table h3 {
  margin: 0;
  text-transform: capitalize;
}

.activity-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.activity-table td {
  padding: 7px 8px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: var(--muted);
}

.activity-table td:nth-child(2) {
  color: var(--ink);
}

.inline-explain {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(120, 210, 255, .35);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(16, 26, 39, .88);
}

.inline-explain-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.inline-explain-actions button {
  padding: 4px 8px;
  background: var(--panel-soft);
}

.profile-color-field {
  position: relative;
  display: grid;
  gap: 8px;
}

.profile-color-line {
  width: 100%;
  height: 14px;
  padding: 0;
  border: 1px solid rgba(120, 210, 255, .32);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.profile-color-line:focus {
  outline: none;
  border-color: rgba(120, 210, 255, .72);
  box-shadow: 0 0 0 3px rgba(72, 167, 216, .14);
}

.profile-color-line::-webkit-color-swatch-wrapper {
  padding: 0;
}

.profile-color-line::-webkit-color-swatch {
  border: 0;
  border-radius: 999px;
}

.profile-color-line::-moz-color-swatch {
  border: 0;
  border-radius: 999px;
}

.admin-users {
  display: grid;
  gap: 14px;
}

.admin-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-board-head h2 {
  margin-bottom: 5px;
}

.admin-refresh-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 190px;
}

.admin-refresh-btn {
  height: 31px;
  padding: 0 13px;
  border-radius: 5px;
  border: 1px solid rgba(255, 201, 40, .5);
  color: #ffe08a;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(41, 58, 72, .96), rgba(21, 39, 50, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 12px rgba(255, 201, 40, .06);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}

.admin-refresh-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #ffffff;
  border-color: rgba(126, 215, 255, .76);
  box-shadow: 0 0 16px rgba(126, 215, 255, .12), inset 3px 0 0 #ffc928;
}

.admin-refresh-btn:disabled {
  cursor: wait;
  opacity: .62;
}

.admin-refresh-status {
  min-width: 76px;
  color: #9ec2dd;
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 54px auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(38, 56, 76, .45);
}

.role-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.role-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 26, 39, .62);
}

.role-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.role-card input[type="color"],
.admin-user-row input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 2px;
}

.role-permissions {
  display: grid;
  gap: 6px;
}

.role-permissions label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
}

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

.muted-copy {
  margin: 0;
  color: var(--muted);
}

/* Master Account visual polish pass */
:root {
  --bg: #111c2a;
  --bg-deep: #1a2837;
  --sidebar: #1b2736;
  --panel: #1b2b3c;
  --panel-soft: #25384c;
  --composer: #152333;
  --hover: #24384d;
  --line: #41617b;
  --accent: #55b8e7;
  --accent-dark: #328fbe;
  --warn: #ffc928;
}

.shell,
.app-shell {
  background:
    radial-gradient(circle at 17% 10%, rgba(72, 167, 216, .1), transparent 28%),
    linear-gradient(180deg, #1b2838 0%, #111c2a 100%);
}

.side-nav {
  background:
    linear-gradient(90deg, rgba(23, 34, 47, .98), rgba(28, 40, 55, .96)),
    radial-gradient(circle at 100% 20%, rgba(84, 150, 193, .09), transparent 34%);
  border-right-color: rgba(91, 134, 166, .42);
}

.side-account div {
  background: rgba(9, 22, 33, .64);
  border-color: rgba(77, 116, 146, .72);
  box-shadow: inset 0 0 22px rgba(72, 167, 216, .035);
}

.side-account span,
.side-group-title {
  color: #79d4ff;
}

.side-account strong {
  color: #ffc928;
}

.side-account div:nth-child(2) strong {
  color: #24ff91;
}

.side-quick-actions,
.side-footer-note {
  display: none !important;
}

.side-nav-group .tab,
.admin-sidebar-button,
.module-tab,
.chat-channel {
  background: linear-gradient(180deg, rgba(27, 43, 60, .92), rgba(17, 31, 46, .94));
  border-color: rgba(78, 117, 148, .62);
  color: #e6f5ff;
}

.side-nav-group .tab:hover,
.admin-sidebar-button:hover,
.module-tab:hover,
.chat-channel:hover {
  color: #ffffff;
  border-color: rgba(96, 153, 188, .82);
  background: linear-gradient(180deg, rgba(34, 55, 74, .96), rgba(22, 41, 58, .96));
  box-shadow: inset 0 0 0 1px rgba(120, 210, 255, .06);
}

.side-nav-group .tab.active,
.admin-sidebar-button.active {
  color: #ffffff;
  border-color: rgba(255, 201, 40, .72);
  background: linear-gradient(180deg, rgba(30, 49, 65, .96), rgba(18, 39, 57, .98));
  box-shadow: inset 3px 0 0 #ffc928, 0 0 18px rgba(255, 201, 40, .08);
}

.module-tab.active,
.chat-channel.active {
  color: #ffffff;
  border-color: rgba(255, 201, 40, .76);
  background: linear-gradient(180deg, rgba(31, 50, 66, .96), rgba(18, 39, 58, .96));
  box-shadow: inset 0 -2px 0 #ffc928, 0 0 18px rgba(255, 201, 40, .08);
}

.admin-sidebar-button,
.module-tab.admin-module,
.module-tab.premium-module {
  color: #ffd95e;
  border-color: rgba(255, 201, 40, .48);
  background: linear-gradient(180deg, rgba(75, 59, 20, .82), rgba(36, 34, 24, .96));
}

.module-tab::before,
.side-nav-group .tab::before,
.admin-sidebar-button::before,
.side-action::before {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #77cfff;
  font-size: 11px;
  line-height: 1;
  opacity: .98;
}

.module-tab::before {
  color: #ffc928;
}

.side-nav-group .tab.active::before,
.admin-sidebar-button::before,
.admin-sidebar-button.active::before,
.module-tab.active::before {
  color: #ffc928;
}

.main-pane,
.chat-shell,
.friends-rail,
.view:not(.chat-layout) {
  border-color: rgba(73, 112, 142, .54);
}

.message,
.player-row,
.direct-chat-window,
.master-account-card,
.ranking-card {
  background: linear-gradient(180deg, rgba(31, 49, 66, .6), rgba(19, 34, 49, .74));
}

.workspace-statusbar {
  position: relative;
  justify-content: center;
  gap: 0;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(13, 28, 41, .98), rgba(9, 21, 32, .98));
  border-top: 1px solid rgba(68, 105, 136, .45);
}

.statusbar-center {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1 1 auto;
  color: #8faabe;
  text-align: center;
}

.statusbar-center > span {
  white-space: nowrap;
}

.statusbar-center > span + span {
  position: relative;
}

.statusbar-center > span + span::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: rgba(76, 113, 142, .55);
}

.statusbar-brand {
  color: #dceefa;
  font-weight: 800;
  letter-spacing: .1px;
}

.workspace-statusbar strong {
  color: #dceefa;
}

.workspace-statusbar strong.online {
  color: #24ff91;
}

.workspace-statusbar strong.offline {
  color: #ff6b6b;
}

.workspace-statusbar strong.ping-good {
  color: #24ff91;
}

.workspace-statusbar strong.ping-warn {
  color: #ffb347;
}

.workspace-statusbar strong.ping-bad {
  color: #ff5a66;
}

.statusbar-server-time {
  color: #8faabe;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.statusbar-server-time strong {
  color: #ffc928;
  font-weight: 900;
}

.statusbar-version {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 72px;
  text-align: right;
  color: #ffc928;
  font-weight: 900;
  letter-spacing: .2px;
}

.statusbar-actions {
  display: none !important;
}

@media (max-width: 1180px) {
  .statusbar-center {
    gap: 12px;
    font-size: 10px;
  }

  .statusbar-center > span + span::before {
    left: -7px;
  }

  .statusbar-version {
    right: 10px;
  }
}

/* Master Account light-blue dashboard pass */
:root {
  --bg: #1b2d3f;
  --bg-deep: #263d52;
  --sidebar: #203349;
  --panel: #263e54;
  --panel-soft: #31506a;
  --composer: #22374d;
  --hover: #35556f;
  --ink: #f3f9ff;
  --muted: #bad0e1;
  --line: #5b819e;
  --accent: #66c3f1;
  --accent-dark: #3e9fd1;
  --warn: #ffc928;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(91, 187, 241, .18), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(74, 139, 185, .24), transparent 34%),
    linear-gradient(135deg, #1b2d3f, #263d52);
}

.shell {
  background:
    radial-gradient(circle at 28% 16%, rgba(93, 181, 232, .1), transparent 34%),
    linear-gradient(180deg, #263b50 0%, #1c2f43 100%);
}

.topbar {
  background: linear-gradient(180deg, rgba(8, 18, 30, .99), rgba(7, 16, 26, .99));
  border-bottom-color: rgba(91, 130, 162, .5);
  box-shadow: 0 1px 0 rgba(120, 210, 255, .08), 0 10px 28px rgba(0, 0, 0, .26);
}

.workspace-statusbar {
  background: linear-gradient(180deg, rgba(13, 28, 41, .99), rgba(9, 21, 32, .99));
  border-top-color: rgba(68, 105, 136, .45);
}

.side-nav {
  background:
    linear-gradient(90deg, rgba(31, 48, 66, .98), rgba(37, 58, 78, .96)),
    radial-gradient(circle at 100% 20%, rgba(120, 210, 255, .1), transparent 35%);
  border-right-color: rgba(101, 151, 187, .5);
}

.module-nav,
.friends-rail,
.view:not(.chat-layout),
.chat-tools,
.chat-channel-strip {
  background: linear-gradient(180deg, rgba(36, 56, 75, .94), rgba(28, 46, 64, .94));
  border-color: rgba(91, 129, 159, .56);
}

.module-tab,
.side-nav-group .tab,
.admin-sidebar-button,
.chat-channel,
.top-action,
.online-button,
.character-session-button,
.new-chat-button,
.friends-filters select {
  background: linear-gradient(180deg, rgba(43, 68, 91, .94), rgba(29, 50, 70, .96));
  border-color: rgba(100, 143, 176, .62);
  color: #f0f8ff;
}

.module-tab:hover,
.side-nav-group .tab:hover,
.admin-sidebar-button:hover,
.chat-channel:hover,
.top-action:hover,
.online-button:hover,
.character-session-button:hover,
.new-chat-button:hover {
  background: linear-gradient(180deg, rgba(52, 81, 107, .96), rgba(36, 61, 83, .98));
  border-color: rgba(127, 188, 224, .78);
}

.side-nav-group .tab.active,
.admin-sidebar-button.active {
  background: linear-gradient(180deg, rgba(43, 67, 88, .98), rgba(30, 54, 75, .98));
  border-color: rgba(255, 201, 40, .78);
  box-shadow: inset 3px 0 0 #ffc928, 0 0 18px rgba(255, 201, 40, .08);
}

.module-tab.active,
.chat-channel.active,
.top-action.active {
  background: linear-gradient(180deg, rgba(43, 67, 88, .98), rgba(30, 54, 75, .98));
  border-color: rgba(255, 201, 40, .78);
  box-shadow: inset 0 -2px 0 #ffc928, 0 0 18px rgba(255, 201, 40, .08);
}

.admin-sidebar-button,
.module-tab.admin-module,
.module-tab.premium-module {
  color: #ffe08a;
  border-color: rgba(255, 201, 40, .56);
  background: linear-gradient(180deg, rgba(96, 77, 28, .86), rgba(51, 47, 29, .96));
}

.side-account div,
.account-summary-panel,
.master-account-panel,
.master-panel,
.dashboard-actions,
.hub-card,
.activity-panel,
.settings-section,
.empty-panel,
.screenshot-card,
.note-card,
.role-card,
.admin-user-row,
.online-card,
.character-card,
.direct-chat-window,
.quick-note-panel,
.explain-panel,
.confirm-card {
  background:
    linear-gradient(180deg, rgba(44, 67, 88, .92), rgba(30, 50, 70, .94));
  border-color: rgba(98, 145, 179, .62);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14), inset 0 0 32px rgba(120, 210, 255, .04);
}

.account-summary-panel div,
.master-account-panel header,
.master-panel header,
.friends-head,
.friends-section,
.direct-chat-window header,
.direct-chat-form,
.composer,
.chat-search-bar,
.message,
.master-account-table th,
.master-account-table td {
  border-color: rgba(99, 145, 179, .5);
}

.messages {
  background:
    radial-gradient(circle at 0% 0%, rgba(120, 210, 255, .055), transparent 30%),
    linear-gradient(180deg, rgba(35, 55, 74, .92), rgba(27, 45, 63, .95));
}

.message {
  background: rgba(39, 61, 82, .2);
}

.message:hover {
  background: rgba(120, 210, 255, .075);
}

.message.mine {
  background: rgba(102, 195, 241, .075);
  border-left-color: rgba(255, 201, 40, .42);
}

.composer {
  background: linear-gradient(180deg, rgba(27, 43, 61, .96), rgba(20, 34, 49, .96));
}

.composer-box,
.chat-search-bar input,
.friends-search,
.direct-chat-form input,
input,
select,
textarea {
  background: rgba(27, 45, 63, .98);
  border-color: rgba(102, 153, 190, .58);
  color: #f3f9ff;
}

.composer-box:focus-within,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(255, 201, 40, .66);
  outline-color: rgba(255, 201, 40, .24);
  box-shadow: 0 0 0 3px rgba(255, 201, 40, .1);
}

.icon-button,
.secondary-button,
.file-button,
.composer-actions button {
  background: linear-gradient(180deg, rgba(49, 80, 106, .94), rgba(36, 61, 83, .96));
  border: 1px solid rgba(97, 145, 180, .6);
  color: #d9edf9;
}

.icon-button:hover,
.secondary-button:hover,
.file-button:hover,
.composer-actions button:hover {
  background: linear-gradient(180deg, rgba(64, 102, 133, .98), rgba(45, 78, 106, .98));
  border-color: rgba(127, 188, 224, .82);
}

.composer-actions button[type="submit"],
.direct-chat-form button {
  color: #061320;
  background: linear-gradient(180deg, #7ed7ff, #48ace0);
  border-color: rgba(126, 215, 255, .8);
}

/* Chat composer compact action rail */
.composer {
  position: relative;
  padding: 8px 10px 0;
  gap: 7px;
}

.composer-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 64px;
  align-items: stretch;
  gap: 8px;
}

.composer-row > button,
.composer-plus {
  height: 42px;
  border-radius: 5px;
  border: 1px solid rgba(93, 147, 187, .62);
  color: #e8f6ff;
  background: linear-gradient(180deg, rgba(47, 78, 105, .95), rgba(32, 55, 78, .98));
}

.composer-plus {
  padding: 0;
  font-size: 23px;
  line-height: 1;
  color: #9fdcff;
}

.composer-row > button[type="submit"] {
  color: #061320;
  font-weight: 700;
  background: linear-gradient(180deg, #80d9ff, #48ace0);
  border-color: rgba(126, 215, 255, .86);
}

.composer-row .composer-box {
  min-height: 42px;
  padding: 5px 10px;
}

.composer-row .composer-box textarea {
  min-height: 30px;
  max-height: 78px;
}

.composer-actions {
  display: none;
}

.composer-menu {
  position: absolute;
  left: 10px;
  bottom: 58px;
  z-index: 35;
  min-width: 190px;
  padding: 7px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(95, 148, 188, .58);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(29, 49, 70, .98), rgba(18, 34, 50, .99));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(126, 215, 255, .05);
}

.composer-menu.hidden {
  display: none;
}

.composer-menu button,
.composer-menu .file-button {
  width: 100%;
  height: 30px;
  justify-content: flex-start;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #dff2ff;
  background: rgba(37, 61, 84, .9);
  border: 1px solid rgba(87, 134, 170, .52);
}

.composer-menu button:hover,
.composer-menu .file-button:hover {
  border-color: rgba(255, 201, 40, .78);
  background: rgba(48, 76, 101, .98);
}

.direct-chat-dock {
  min-height: 36px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 7px;
  padding: 6px 2px 1px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.direct-chat-dock::-webkit-scrollbar {
  display: none;
}

.direct-chat-dock:empty {
  min-height: 0;
  margin-top: 0;
}

.direct-dock-chip {
  position: relative;
  flex: 0 1 clamp(96px, 12vw, 168px);
  min-width: 86px;
  max-width: 168px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 30px 0 10px;
  text-align: left;
  border-radius: 5px;
  color: #cfe6f5;
  border: 1px solid rgba(82, 127, 162, .5);
  background: linear-gradient(180deg, rgba(32, 53, 73, .92), rgba(23, 40, 58, .96));
}

.direct-dock-chip:hover {
  border-color: rgba(93, 150, 192, .62);
  background: linear-gradient(180deg, rgba(25, 43, 61, .98), rgba(14, 29, 45, .99));
}

.direct-dock-chip.relation-clan {
  border-color: rgba(154, 91, 255, .42);
  box-shadow:
    inset 0 0 0 1px rgba(188, 132, 255, .08),
    0 0 12px rgba(127, 79, 255, .06);
}

.chat-channel.relation-clan,
.direct-dock-chip.relation-clan,
.chat-channel.direct-presence-channel.relation-clan {
  --tab-relation-rgb: 154, 91, 255;
  --tab-relation-rgb-2: 81, 219, 255;
  --tab-relation-accent: #a95bff;
}

.chat-channel.relation-alliance,
.direct-dock-chip.relation-alliance,
.chat-channel.direct-presence-channel.relation-alliance {
  --tab-relation-rgb: 185, 255, 92;
  --tab-relation-rgb-2: 225, 255, 135;
  --tab-relation-accent: #b9ff5c;
}

.chat-channel.relation-party,
.direct-dock-chip.relation-party,
.chat-channel.direct-presence-channel.relation-party {
  --tab-relation-rgb: 45, 220, 118;
  --tab-relation-rgb-2: 126, 255, 180;
  --tab-relation-accent: #2ddc76;
}

.chat-channel.relation-trade,
.direct-dock-chip.relation-trade,
.chat-channel.direct-presence-channel.relation-trade {
  --tab-relation-rgb: 238, 173, 94;
  --tab-relation-rgb-2: 255, 211, 145;
  --tab-relation-accent: #eead5e;
}

.chat-channel.relation-general,
.direct-dock-chip.relation-general,
.chat-channel.direct-presence-channel.relation-general {
  --tab-relation-rgb: 57, 163, 255;
  --tab-relation-rgb-2: 68, 240, 255;
  --tab-relation-accent: #39a3ff;
}

.chat-channel.relation-all,
.direct-dock-chip.relation-all,
.chat-channel.direct-presence-channel.relation-all,
.chat-channel.relation-game,
.direct-dock-chip.relation-game,
.chat-channel.direct-presence-channel.relation-game {
  --tab-relation-rgb: 120, 210, 255;
  --tab-relation-rgb-2: 72, 172, 224;
  --tab-relation-accent: #78d2ff;
}

.chat-channel.relation-direct,
.direct-dock-chip.relation-direct,
.chat-channel.direct-presence-channel.relation-direct {
  --tab-relation-rgb: 120, 210, 255;
  --tab-relation-rgb-2: 72, 172, 224;
  --tab-relation-accent: #78d2ff;
}

.chat-channel[class*="relation-"],
.direct-dock-chip[class*="relation-"] {
  border-color: rgba(var(--tab-relation-rgb), .42);
  background:
    linear-gradient(180deg, rgba(32, 53, 73, .92), rgba(23, 40, 58, .96)),
    linear-gradient(90deg, rgba(var(--tab-relation-rgb), .12), transparent 48%);
  box-shadow:
    inset 2px 0 0 rgba(var(--tab-relation-rgb), .68),
    inset 0 0 0 1px rgba(var(--tab-relation-rgb-2), .035),
    0 0 12px rgba(var(--tab-relation-rgb), .055);
}

.chat-channel[class*="relation-"]:hover,
.direct-dock-chip[class*="relation-"]:hover {
  border-color: rgba(var(--tab-relation-rgb), .68);
  box-shadow:
    inset 2px 0 0 rgba(var(--tab-relation-rgb), .86),
    0 0 15px rgba(var(--tab-relation-rgb), .12);
}

.chat-channel[class*="relation-"].active,
.direct-dock-chip[class*="relation-"].active,
.direct-dock-chip[class*="relation-"].unread {
  color: #f7fbff;
  border-color: rgba(255, 201, 40, .72);
  background:
    linear-gradient(180deg, rgba(42, 65, 86, .98), rgba(28, 49, 70, .99)),
    linear-gradient(90deg, rgba(var(--tab-relation-rgb), .18), transparent 56%);
  box-shadow:
    inset 2px 0 0 rgba(var(--tab-relation-rgb), .88),
    inset 0 -2px 0 #ffc928,
    0 0 16px rgba(var(--tab-relation-rgb), .12);
}

.direct-dock-chip.relation-clan:hover {
  border-color: rgba(188, 132, 255, .64);
  box-shadow:
    inset 0 0 0 1px rgba(188, 132, 255, .14),
    0 0 16px rgba(127, 79, 255, .12);
}

.direct-dock-chip.relation-clan.active,
.direct-dock-chip.relation-clan.unread {
  box-shadow:
    inset 0 -2px 0 #ffc928,
    inset 2px 0 0 rgba(188, 132, 255, .7),
    0 0 18px rgba(127, 79, 255, .12);
}

.direct-relation-mark {
  display: none;
}

.direct-dock-chip.relation-clan .direct-relation-mark {
  display: block;
  position: absolute;
  left: 3px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(210, 174, 255, .25), rgba(170, 93, 255, .95), rgba(81, 219, 255, .45));
  box-shadow: 0 0 9px rgba(170, 93, 255, .5);
}

.direct-dock-chip.dragging {
  opacity: .66;
  transform: translateY(-1px);
  cursor: grabbing;
}

.direct-dock-chip.drop-target {
  border-color: rgba(255, 201, 40, .9);
  box-shadow: inset 3px 0 0 #ffc928, 0 0 14px rgba(255, 201, 40, .12);
}

.direct-dock-chip strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.direct-dock-chip strong {
  color: #f0f8ff;
  font-size: 12px;
  line-height: 1;
}

.direct-dock-chip.unread {
  border-color: rgba(255, 201, 40, .9);
  box-shadow: 0 0 16px rgba(255, 201, 40, .13);
  background: linear-gradient(180deg, rgba(74, 59, 24, .94), rgba(39, 51, 61, .98));
}

.direct-dock-chip .chat-unread-badge {
  top: 2px;
  right: 19px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-width: 1px;
  font-size: 8px;
  line-height: 15px;
  box-shadow: 0 0 8px rgba(255, 54, 95, .42), 0 1px 4px rgba(0, 0, 0, .34);
}

.direct-dock-chip.unread strong {
  color: #ffd55a;
}

.direct-dock-chip.active {
  border-color: rgba(255, 201, 40, .78);
  background: linear-gradient(180deg, rgba(43, 67, 88, .98), rgba(30, 54, 75, .98));
  box-shadow: inset 0 -2px 0 #ffc928, 0 0 18px rgba(255, 201, 40, .08);
}

.direct-dock-chip.active:hover {
  background: linear-gradient(180deg, rgba(35, 57, 78, .99), rgba(22, 43, 63, .99));
}

.direct-dock-more {
  position: sticky;
  right: 0;
  z-index: 4;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: none;
  place-items: center;
  margin-left: -4px;
  border-radius: 5px;
  color: #ffe27a;
  border: 1px solid rgba(255, 201, 40, .48);
  background:
    linear-gradient(90deg, rgba(10, 22, 35, 0), rgba(11, 26, 42, .96) 28%),
    linear-gradient(180deg, rgba(37, 59, 80, .98), rgba(17, 35, 52, .98));
  box-shadow: -8px 0 14px rgba(7, 18, 30, .72), 0 0 14px rgba(255, 201, 40, .08);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.direct-chat-dock.has-overflow .direct-dock-more {
  display: grid;
}

.direct-chat-dock.has-overflow.at-end .direct-dock-more {
  opacity: .5;
}

.direct-dock-more:hover {
  color: #fff4bf;
  border-color: rgba(255, 201, 40, .76);
  background:
    linear-gradient(90deg, rgba(10, 22, 35, 0), rgba(12, 27, 43, .98) 28%),
    linear-gradient(180deg, rgba(31, 50, 70, .99), rgba(12, 27, 43, .99));
}

.direct-dock-close {
  position: absolute;
  top: 2px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #9eb7ca;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.direct-dock-close:hover {
  color: #fff;
  background: rgba(255, 77, 91, .72);
}

.composer-hint {
  display: none;
}

.upload-status {
  min-height: 0;
}

.typing-indicator:empty,
.upload-status:empty {
  display: none;
}

.chat-channel-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 5px 10px;
  border-top: 1px solid rgba(89, 145, 185, .38);
  border-bottom: 1px solid rgba(89, 145, 185, .38);
  background: rgba(7, 17, 29, .86);
}

.chat-channel-strip .chat-channels {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.chat-channel-strip .typing-indicator {
  flex: 0 0 auto;
  max-width: min(36%, 330px);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(119, 192, 236, .38);
  background: linear-gradient(180deg, rgba(34, 58, 78, .88), rgba(18, 34, 50, .92));
  color: #d8edff;
  box-shadow: inset 3px 0 0 rgba(120, 210, 255, .45), 0 0 16px rgba(90, 180, 235, .08);
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-channel-strip .typing-indicator:empty {
  display: none;
}

.side-account span,
.side-group-title,
.account-summary-panel span,
.master-account-table th,
.friends-section h3,
.hub-card span {
  color: #8edcff;
}

.side-account strong {
  color: #ffc928;
}

.statusbar-version-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.statusbar-update-notice {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255, 201, 40, .42);
  border-radius: 4px;
  color: #ffe28a;
  background: linear-gradient(180deg, rgba(69, 55, 20, .92), rgba(35, 30, 17, .96));
  box-shadow: 0 0 16px rgba(255, 201, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .05);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.statusbar-update-notice.pulse {
  animation: update-notice-pulse 1.05s ease-in-out 3;
}

.statusbar-update-progress {
  width: min(220px, 18vw);
  min-width: 150px;
  height: 20px;
  display: grid;
  grid-template-rows: 12px 3px;
  gap: 2px;
  padding: 1px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.statusbar-update-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #857fa6;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.statusbar-update-track {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3px;
  border-radius: 0;
  background: rgba(20, 18, 34, .96);
  border: 0;
}

.statusbar-update-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #6235ff 0%, #8c55ff 52%, #c293ff 100%);
  box-shadow: 0 0 12px rgba(129, 75, 255, .38);
  transition: width .18s ease;
}

.statusbar-update-fill::after {
  content: "";
  position: absolute;
  inset: -5px -18px -5px auto;
  width: 38px;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(226, 210, 255, .85), transparent);
  filter: blur(.2px);
  animation: update-lightning-sweep .82s linear infinite;
}

.statusbar-update-progress span {
  min-width: 0;
  color: #857fa6;
  font-size: 9px;
  font-weight: 900;
  text-align: right;
}

.statusbar-update-progress #updateProgressText {
  text-align: left;
}

.statusbar-update-progress #updateSpeedText {
  text-align: right;
}

.statusbar-version {
  position: static;
  transform: none;
  min-width: 92px;
  text-align: right;
  color: #ffc928;
  font-weight: 900;
}

.statusbar-version.version-ok {
  color: #ffc928;
}

.statusbar-version.version-outdated {
  color: #ff5a66;
}

.statusbar-update {
  height: 22px;
  position: relative;
  overflow: hidden;
  padding: 0 6px;
  border: 0;
  border-radius: 3px;
  color: #ffc928;
  background: transparent;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0;
}

.statusbar-update.available {
  color: #ffc928;
  border: 0;
  background: transparent;
  text-shadow: 0 0 10px rgba(255, 201, 40, .24);
}

.statusbar-update.available::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -34px;
  width: 28px;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 243, 180, .9), transparent);
  opacity: 0;
}

.statusbar-update.available:hover {
  color: #fff2a5;
  text-shadow: 0 0 12px rgba(255, 201, 40, .46);
}

.statusbar-update.available:hover::after {
  animation: update-button-lightning .76s ease-out infinite;
}

@keyframes update-notice-pulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(255, 201, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 24px rgba(255, 201, 40, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: translateY(-1px);
  }
}

@keyframes update-lightning-sweep {
  0% {
    transform: translateX(-132px) skewX(-22deg);
    opacity: .2;
  }
  45% {
    opacity: .95;
  }
  100% {
    transform: translateX(36px) skewX(-22deg);
    opacity: .2;
  }
}

@keyframes update-button-lightning {
  0% {
    left: -34px;
    opacity: 0;
  }
  35% {
    opacity: .95;
  }
  100% {
    left: calc(100% + 12px);
    opacity: 0;
  }
}

.statusbar-update:disabled {
  cursor: default;
  opacity: .78;
}

.statusbar-update.status-only {
  height: auto;
  padding: 0;
  border: 0;
  color: #25ff91;
  background: transparent;
  opacity: 1;
}

.statusbar-update.hidden {
  display: none;
}

.side-account div:nth-child(2) strong,
#dashboardBalance,
.workspace-statusbar strong.online {
  color: #25ff91;
}

.master-account-table tbody tr:hover,
.friends-list .online-user-row:hover,
.online-user-row.friend-card:hover,
.online-user-row.friend-card.active {
  background: rgba(103, 184, 230, .12);
}

.master-account-table button {
  background: linear-gradient(180deg, rgba(65, 91, 116, .94), rgba(47, 73, 97, .96));
  border-color: rgba(112, 158, 190, .66);
}

.master-account-table button:hover {
  border-color: rgba(255, 201, 40, .66);
  box-shadow: inset 0 -2px 0 rgba(255, 201, 40, .9);
}

/* Sidebar Admin Panel button mirrors the Master Account panel */
#adminSidebarBtn.admin-sidebar-button {
  min-height: 36px;
  height: 36px;
  margin: 10px 0 14px;
  padding: 0 12px;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(255, 201, 40, .76);
  border-left: 3px solid #ffc928;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(82, 69, 25, .92), rgba(39, 45, 37, .96)),
    radial-gradient(circle at 12% 50%, rgba(255, 201, 40, .14), transparent 32%);
  color: #ffe27a;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 201, 40, .08), 0 0 20px rgba(255, 201, 40, .08);
}

#adminSidebarBtn.admin-sidebar-button::before {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  color: #ffc928;
  text-shadow: 0 0 10px rgba(255, 201, 40, .35);
}

#adminSidebarBtn.admin-sidebar-button:hover,
#adminSidebarBtn.admin-sidebar-button.active {
  color: #ffffff;
  border-color: rgba(255, 201, 40, .98);
  border-left-color: #ffc928;
  background:
    linear-gradient(180deg, rgba(105, 84, 27, .96), rgba(48, 54, 42, .98)),
    radial-gradient(circle at 12% 50%, rgba(255, 201, 40, .2), transparent 34%);
  box-shadow: inset 3px 0 0 #ffc928, 0 0 22px rgba(255, 201, 40, .16);
}

/* Subtle chat message separators */
.messages .message:not(.system-message) {
  border-bottom: 1px solid rgba(126, 178, 213, .18);
}

.messages .message:not(.system-message):hover {
  border-bottom-color: rgba(150, 205, 238, .3);
}

/* Softer grey-blue contrast for chat readability */
.messages {
  background:
    radial-gradient(circle at 0% 0%, rgba(118, 178, 212, .04), transparent 30%),
    linear-gradient(180deg, rgba(37, 55, 72, .94), rgba(34, 52, 69, .95));
  position: relative;
}

.messages.relationship-clan {
  box-shadow:
    inset 0 0 0 1px rgba(169, 118, 255, .24),
    inset 0 0 18px rgba(127, 79, 255, .08);
}

.messages[data-relationship="clan"],
.messages[data-relationship="alliance"],
.messages[data-relationship="party"],
.messages[data-relationship="trade"],
.messages[data-relationship="game"],
.messages[data-relationship="general"],
.messages[data-relationship="all"] {
  --relation-rgb: 154, 91, 255;
  --relation-rgb-2: 81, 219, 255;
  --relation-accent: #a95bff;
  box-shadow:
    inset 0 0 0 1px rgba(var(--relation-rgb), .24),
    inset 0 0 18px rgba(var(--relation-rgb), .07);
}

.messages[data-relationship="general"] {
  --relation-rgb: 57, 163, 255;
  --relation-rgb-2: 68, 240, 255;
  --relation-accent: #39a3ff;
}

.messages[data-relationship="all"] {
  --relation-rgb: 120, 210, 255;
  --relation-rgb-2: 72, 172, 224;
  --relation-accent: #78d2ff;
}

.messages[data-relationship="party"] {
  --relation-rgb: 45, 220, 118;
  --relation-rgb-2: 126, 255, 180;
  --relation-accent: #2ddc76;
}

.messages[data-relationship="trade"] {
  --relation-rgb: 238, 173, 94;
  --relation-rgb-2: 255, 211, 145;
  --relation-accent: #eead5e;
}

.messages[data-relationship="alliance"] {
  --relation-rgb: 185, 255, 92;
  --relation-rgb-2: 225, 255, 135;
  --relation-accent: #b9ff5c;
}

.messages[data-relationship="clan"]::before,
.messages[data-relationship="alliance"]::before,
.messages[data-relationship="party"]::before,
.messages[data-relationship="trade"]::before,
.messages[data-relationship="game"]::before,
.messages[data-relationship="general"]::before,
.messages[data-relationship="all"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 4px;
  border: 1px solid rgba(var(--relation-rgb), .17);
  box-shadow: inset 0 0 14px rgba(var(--relation-rgb), .055);
}

.messages[data-relationship="clan"]::after,
.messages[data-relationship="alliance"]::after,
.messages[data-relationship="party"]::after,
.messages[data-relationship="trade"]::after,
.messages[data-relationship="game"]::after,
.messages[data-relationship="general"]::after,
.messages[data-relationship="all"]::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 88px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--relation-rgb), .96), rgba(var(--relation-rgb-2), .55), transparent);
  box-shadow:
    0 0 8px rgba(var(--relation-rgb), .68),
    0 0 15px rgba(var(--relation-rgb-2), .18);
  animation: relationConversationTrace 7.5s linear infinite;
}

.messages.relationship-clan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 4px;
  border: 1px solid rgba(169, 118, 255, .18);
  box-shadow: inset 0 0 14px rgba(127, 79, 255, .06);
}

.messages.relationship-clan::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 88px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  box-shadow:
    0 0 8px rgba(176, 108, 255, .7),
    0 0 15px rgba(95, 217, 255, .2);
  animation: clanConversationTrace 7.5s linear infinite;
}

@keyframes clanConversationTrace {
  0% {
    top: 0;
    left: 0;
    width: 88px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  }
  24.9% {
    top: 0;
    left: calc(100% - 88px);
    width: 88px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  }
  25% {
    top: 0;
    left: calc(100% - 1px);
    width: 1px;
    height: 88px;
    background: linear-gradient(180deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  }
  49.9% {
    top: calc(100% - 88px);
    left: calc(100% - 1px);
    width: 1px;
    height: 88px;
    background: linear-gradient(180deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  }
  50% {
    top: calc(100% - 1px);
    left: calc(100% - 88px);
    width: 88px;
    height: 1px;
    background: linear-gradient(270deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  }
  74.9% {
    top: calc(100% - 1px);
    left: 0;
    width: 88px;
    height: 1px;
    background: linear-gradient(270deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  }
  75% {
    top: calc(100% - 88px);
    left: 0;
    width: 1px;
    height: 88px;
    background: linear-gradient(0deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  }
  100% {
    top: 0;
    left: 0;
    width: 1px;
    height: 88px;
    background: linear-gradient(0deg, transparent, rgba(190, 132, 255, .96), rgba(95, 217, 255, .5), transparent);
  }
}

@keyframes relationConversationTrace {
  0% {
    top: 0;
    left: 0;
    width: 88px;
    height: 1px;
  }
  24.9% {
    top: 0;
    left: calc(100% - 88px);
    width: 88px;
    height: 1px;
  }
  25% {
    top: 0;
    left: calc(100% - 1px);
    width: 1px;
    height: 88px;
  }
  49.9% {
    top: calc(100% - 88px);
    left: calc(100% - 1px);
    width: 1px;
    height: 88px;
  }
  50% {
    top: calc(100% - 1px);
    left: calc(100% - 88px);
    width: 88px;
    height: 1px;
  }
  74.9% {
    top: calc(100% - 1px);
    left: 0;
    width: 88px;
    height: 1px;
  }
  75% {
    top: calc(100% - 88px);
    left: 0;
    width: 1px;
    height: 88px;
  }
  100% {
    top: 0;
    left: 0;
    width: 1px;
    height: 88px;
  }
}

.messages .message:not(.system-message) {
  background: rgba(44, 63, 80, .18);
  border-bottom-color: rgba(137, 178, 204, .16);
}

.messages .message:nth-of-type(even):not(.system-message) {
  background: rgba(40, 59, 76, .16);
}

.messages .message.mine:not(.system-message) {
  background: rgba(48, 68, 85, .22);
  border-left-color: rgba(255, 201, 40, .28);
}

.messages .message:not(.system-message):hover,
.messages .message.mine:not(.system-message):hover {
  background: rgba(55, 77, 95, .24);
  border-bottom-color: rgba(159, 198, 222, .24);
}

.message-actions {
  background: rgba(27, 43, 58, .94);
  border-color: rgba(119, 161, 190, .42);
}

.mindex-page-loading {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 45%, rgba(77, 178, 231, .18), transparent 32%),
    rgba(7, 12, 18, .84);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(6px);
  transition: opacity 140ms ease, visibility 140ms ease;
}

.mindex-is-loading-page .mindex-page-loading {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mindex-page-loading-panel {
  min-width: 260px;
  padding: 22px 28px 24px;
  border: 1px solid rgba(95, 163, 204, .85);
  background: linear-gradient(180deg, rgba(18, 32, 43, .98), rgba(7, 14, 20, .98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55), inset 0 0 32px rgba(70, 174, 223, .06);
  text-align: center;
}

.mindex-page-loading-panel::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border: 3px solid rgba(95, 163, 204, .28);
  border-top-color: #ffc928;
  border-radius: 50%;
  animation: mindex-spin 760ms linear infinite;
}

.mindex-page-loading-kicker,
.mindex-page-loading-panel small {
  display: block;
  color: #8ed4f2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.mindex-page-loading-panel strong {
  display: block;
  margin: 3px 0 4px;
  color: #ffffff;
  font-size: 22px;
  letter-spacing: 0;
}

.mindex-page-loading-panel small {
  color: #9fb8ca;
  text-transform: none;
}

@keyframes mindex-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Master Account visual parity: darker two-tone sidebar/navigation */
.side-nav {
  background:
    linear-gradient(180deg, #202733 0%, #1b222d 100%),
    linear-gradient(90deg, rgba(104, 183, 223, .12), transparent 34%);
  border-right: 1px solid #40566d;
  box-shadow: inset -1px 0 0 rgba(120, 169, 210, .18), inset -18px 0 32px rgba(0, 0, 0, .12);
}

.side-nav::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 104px;
  bottom: 54px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(104, 183, 223, .62), transparent);
  box-shadow: 0 0 14px rgba(104, 183, 223, .28);
  pointer-events: none;
}

.side-account {
  gap: 7px;
  padding-left: 7px;
}

.side-account div {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #40566d;
  background: rgba(8, 18, 22, .72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14), inset 0 0 20px rgba(70, 174, 223, .035);
}

.side-account span,
.side-group-title {
  color: #88c7e9;
  font-size: 11px;
  letter-spacing: 0;
}

.side-account strong {
  color: #ffc928;
  font-size: 15px;
  line-height: 18px;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(41, 170, 255, .35);
}

.side-account div:nth-child(2) strong {
  color: #34d17b;
  text-shadow: 0 0 12px rgba(52, 209, 123, .32);
}

.side-group-title {
  margin: 26px 0 8px 7px;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(136, 199, 233, .18);
}

.side-nav-group {
  gap: 7px;
  padding-left: 7px;
}

.side-nav-group .tab,
#adminSidebarBtn.admin-sidebar-button {
  min-height: 36px;
  height: 36px;
  margin: 0;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid #394f67;
  border-left: 3px solid transparent;
  border-radius: 3px;
  background: rgba(38, 48, 62, .86);
  color: #c7d7e5;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.side-nav-group .tab:first-child,
.side-nav-group .tab:last-child {
  border-radius: 3px;
}

.side-nav-group .tab::before,
#adminSidebarBtn.admin-sidebar-button::before {
  color: #8ebfe3;
  text-shadow: none;
}

.side-nav-group .tab:hover,
.side-nav-group .tab.active {
  color: #ffffff;
  background: rgba(20, 37, 49, .96);
  border-color: #5fa3cc;
  border-left-color: #ffc928;
  box-shadow: 0 0 16px rgba(56, 162, 231, .18);
}

.side-nav-group .tab:hover::before,
.side-nav-group .tab.active::before {
  color: #ffc928;
}

.side-nav-group .community-tab {
  padding-right: 7px;
}

.side-nav-group .community-tab .tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-chat-badge {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(71, 255, 154, .42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 115, 78, .48), rgba(15, 67, 52, .62));
  color: #79ffbd;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(39, 255, 143, .14), inset 0 0 8px rgba(88, 255, 184, .08);
}

.community-tab.active .live-chat-badge,
.community-tab:hover .live-chat-badge {
  border-color: rgba(107, 255, 193, .68);
  color: #b7ffdb;
  box-shadow: 0 0 14px rgba(39, 255, 143, .22), inset 0 0 10px rgba(88, 255, 184, .12);
}

#adminSidebarBtn.admin-sidebar-button {
  margin: 18px 0 0 7px;
  width: calc(100% - 7px);
  border-color: rgba(255, 201, 40, .55);
  background: linear-gradient(180deg, rgba(41, 58, 72, .96), rgba(21, 39, 50, .96));
  color: #ffffff;
  box-shadow: inset 0 0 18px rgba(255, 201, 40, .035);
}

#adminSidebarBtn.admin-sidebar-button::before,
#adminSidebarBtn.admin-sidebar-button:hover::before,
#adminSidebarBtn.admin-sidebar-button.active::before {
  color: #ffc928;
}

#adminSidebarBtn.admin-sidebar-button:hover,
#adminSidebarBtn.admin-sidebar-button.active {
  border-color: #5fa3cc;
  border-left-color: #ffc928;
  background: rgba(20, 37, 49, .96);
  box-shadow: 0 0 16px rgba(56, 162, 231, .18), inset 0 0 18px rgba(255, 201, 40, .045);
}

.module-nav {
  background:
    linear-gradient(180deg, rgba(28, 39, 53, .98), rgba(18, 30, 43, .98)),
    radial-gradient(circle at 50% 0%, rgba(104, 183, 223, .08), transparent 44%);
  border-bottom: 1px solid #40566d;
}

.module-tab {
  border: 1px solid #394f67;
  border-left: 3px solid transparent;
  border-radius: 3px;
  background: rgba(38, 48, 62, .86);
  color: #c7d7e5;
  box-shadow: none;
}

.module-tab:hover,
.module-tab.active {
  color: #ffffff;
  background: rgba(20, 37, 49, .96);
  border-color: #5fa3cc;
  border-left-color: #ffc928;
  box-shadow: 0 0 16px rgba(56, 162, 231, .18);
}

.module-tab:hover::before,
.module-tab.active::before {
  color: #ffc928;
}

.module-tab.admin-module,
.module-tab.premium-module {
  border-color: rgba(255, 201, 40, .55);
  background: linear-gradient(180deg, rgba(41, 58, 72, .96), rgba(21, 39, 50, .96));
  color: #fff;
  box-shadow: inset 0 0 18px rgba(255, 201, 40, .035);
}

.module-tab.admin-module:hover,
.module-tab.admin-module.active,
.module-tab.premium-module:hover,
.module-tab.premium-module.active {
  border-color: #5fa3cc;
  border-left-color: #ffc928;
  box-shadow: 0 0 16px rgba(56, 162, 231, .18), inset 0 0 18px rgba(255, 201, 40, .045);
}

/* Compact dashboard/detail density */
.hub-view.active,
.settings.view.active {
  padding: 14px 18px 18px;
}

.account-dashboard,
.master-account-stack,
.character-detail-shell,
.character-detail-content {
  gap: 10px;
}

.account-summary-panel {
  min-height: 42px;
}

.account-summary-panel div {
  padding: 8px 10px;
}

.account-summary-panel span,
.master-account-table th,
.character-detail-summary span,
.inventory-overview span,
.detail-table th {
  font-size: 10px;
}

.account-summary-panel strong,
.master-account-panel h2,
.character-detail-header h2,
.inventory-showcase-heading span {
  font-size: 14px;
}

.master-account-panel header {
  min-height: 42px;
  padding: 8px 12px;
}

.master-account-table {
  font-size: 11px;
}

.master-account-table th,
.master-account-table td {
  padding: 7px 9px;
}

.master-account-table td:last-child button,
.dashboard-character-actions button,
.master-account-table button {
  height: 24px;
  padding: 0 7px;
  font-size: 10px;
}

.dashboard-character-actions {
  min-width: 250px;
}

.status-pill {
  min-height: 20px;
  padding: 1px 6px;
  font-size: 10px;
}

.character-detail-header {
  min-height: 52px;
  gap: 10px;
  padding: 8px 11px;
}

.character-detail-summary div,
.inventory-overview div {
  padding: 9px 10px;
}

.character-detail-summary span,
.inventory-overview span {
  margin-bottom: 4px;
}

.character-detail-summary strong,
.inventory-overview strong {
  font-size: 12px;
}

.character-detail-grid {
  gap: 10px;
}

.character-detail-card {
  padding: 10px;
}

.character-detail-card h3,
.inventory-statistics-group h4 {
  margin-bottom: 8px;
  padding-bottom: 7px;
  font-size: 13px;
}

.detail-stat-row {
  padding: 5px 0;
  font-size: 11px;
}

.inventory-detail-tabs {
  gap: 7px;
  margin-bottom: 10px;
}

.inventory-detail-tabs button {
  padding: 6px 11px;
  font-size: 11px;
}

.inventory-showcase-card {
  margin-bottom: 10px;
  padding: 10px;
}

.inventory-showcase-heading {
  margin-bottom: 8px;
  padding-bottom: 7px;
}

.inventory-showcase-heading small {
  font-size: 10px;
}

.inventory-showcase-grid {
  grid-template-columns: repeat(auto-fill, minmax(36px, 36px));
  gap: 5px;
}

.inventory-showcase-layout {
  grid-template-columns: 1fr;
  gap: 10px;
}

.inventory-showcase-slot {
  width: 36px;
  height: 36px;
}

.inventory-showcase-item,
.inventory-showcase-fallback {
  width: 28px;
  height: 28px;
}

.slot-enchant,
.slot-count {
  font-size: 9px;
  line-height: 12px;
}

.inventory-item-tooltip {
  left: 39px;
  width: min(300px, 70vw);
  padding: 9px;
}

.inventory-tooltip-head {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 7px;
}

.inventory-tooltip-head img {
  width: 30px;
  height: 30px;
}

.inventory-tooltip-head strong,
.augment-card strong {
  font-size: 12px;
}

.inventory-tooltip-grid,
.element-chip,
.augment-row small,
.skill-hover-grid,
.skill-hover-description {
  font-size: 10px;
}

.element-chip {
  min-width: 50px;
  height: 20px;
}

.inventory-statistics-layout {
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 10px;
}

.inventory-statistics-hero {
  min-height: 130px;
  padding: 11px;
}

.inventory-statistics-table {
  gap: 8px;
}

.inventory-statistics-group {
  padding: 9px;
}

.inventory-skills-card .inventory-skill-group {
  margin-bottom: 10px;
  padding: 9px;
}

.inventory-skill-class,
.inventory-skill-kind {
  margin-bottom: 6px;
}

.inventory-skills-icons {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 5px;
  margin-bottom: 8px;
}

.inventory-skill-item {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 34px;
  gap: 6px;
  padding: 4px 5px;
}

.inventory-skill-icon,
.inventory-skill-icon img,
.inventory-skill-fallback {
  width: 22px;
  height: 22px;
}

.inventory-skill-name {
  font-size: 11px;
}

.inventory-skill-meta b {
  min-width: 27px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 14px;
}

.inventory-skill-hover {
  left: 27px;
  width: min(320px, 82vw);
  padding: 8px;
}

.skill-hover-head {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  padding-bottom: 7px;
}

.skill-hover-head img {
  width: 24px;
  height: 24px;
}

.skill-hover-head strong {
  font-size: 12px;
}

/* Cleaner Master Account character rows */
.master-account-panel header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.master-account-panel h2 {
  text-align: left;
}

.game-account-actions,
.dashboard-character-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.game-account-actions button,
.dashboard-character-actions button {
  min-height: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: 3px;
  border: 1px solid rgba(95, 142, 176, .58);
  color: #dff3ff;
  background: linear-gradient(180deg, rgba(45, 69, 91, .92), rgba(31, 51, 72, .96));
  font-size: 11px;
  font-weight: 900;
}

.game-account-actions button {
  border-color: rgba(255, 201, 40, .34);
  color: #ffe5a2;
  background: linear-gradient(180deg, rgba(64, 55, 31, .82), rgba(35, 42, 48, .94));
}

.game-account-actions button:hover,
.dashboard-character-actions button:hover {
  color: #061320;
  border-color: rgba(255, 201, 40, .82);
  background: linear-gradient(180deg, #ffe083, #d9a52e);
  box-shadow: 0 0 16px rgba(255, 201, 40, .12);
}

.dashboard-character-actions .unstuck-action {
  border-color: rgba(126, 215, 255, .48);
  color: #9ee4ff;
}

.master-account-table th:first-child,
.master-account-table td:first-child {
  width: 34%;
}

.master-account-table td:first-child {
  color: #f2fbff;
  font-weight: 900;
}

.master-account-table td:last-child {
  white-space: normal;
}

/* Definitive center-frame sizing. Keep every page inside the same content cell. */
.shell.app-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-template-rows: 48px 48px minmax(0, 1fr) 34px !important;
}

.app-shell > .module-nav {
  grid-column: 2 !important;
  grid-row: 2 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
}

.app-shell > .side-nav,
.app-shell > .friends-rail {
  grid-row: 2 / 4 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}

.app-shell > .workspace-statusbar {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
}

.app-shell > .view {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.app-shell > .view.active:not(#chatView) {
  display: grid !important;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 12px;
  padding: 0 10px 10px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 215, 255, .04), transparent 28%),
    linear-gradient(180deg, rgba(31, 49, 67, .96), rgba(24, 41, 58, .98)) !important;
}

.app-shell > .view.active:not(#chatView) > :first-child {
  margin-top: 0 !important;
}

.app-shell > #adminView.active .admin-control-panel {
  width: 100%;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Final internal module override: Profile, Settings, Admin and Premium remain inside the app frame. */
.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #adminView.active,
.app-shell > #premiumView.active {
  padding: 0 10px 10px !important;
  gap: 10px;
  align-content: start;
  overflow: auto !important;
  scrollbar-gutter: stable;
}

.mindex-internal-view,
.admin-control-view {
  color: #e7f4ff;
}

.mindex-page-head,
.admin-control-head {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(93, 145, 184, .52);
  border-left: 3px solid #ffc928;
  border-radius: 5px;
  background:
    radial-gradient(circle at 92% 0%, rgba(126, 215, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(34, 53, 72, .96), rgba(19, 36, 52, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 30px rgba(0, 0, 0, .12);
}

.mindex-page-head h2,
.admin-control-head h2 {
  margin: 2px 0 3px;
  color: #f7fbff;
  font-size: 18px;
  line-height: 1.05;
}

.mindex-page-head p,
.admin-control-head .muted-copy {
  margin: 0;
  color: #9fbdd4;
  font-size: 12px;
  line-height: 1.35;
}

.mindex-page-kicker,
.admin-kicker,
.mindex-card-title span {
  color: #ffc928;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mindex-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.profile-settings-grid {
  grid-template-columns: minmax(260px, .95fr) minmax(260px, 1fr);
}

.mindex-settings-card,
.admin-control-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(89, 137, 173, .52);
  border-radius: 5px;
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 215, 255, .055), transparent 34%),
    linear-gradient(180deg, rgba(33, 53, 72, .92), rgba(21, 38, 54, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  box-sizing: border-box;
}

.mindex-wide-card {
  width: 100%;
}

.mindex-card-title {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(94, 145, 183, .24);
}

.mindex-card-title strong {
  color: #f4fbff;
  font-size: 14px;
}

.mindex-internal-view label,
.mindex-settings-card label,
.settings-section label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mindex-internal-view label > span,
.mindex-settings-card label > span,
.settings-section label > span {
  color: #9fd8ff;
  font-size: 11px;
  font-weight: 800;
}

.mindex-internal-view input:not([type="checkbox"]):not([type="range"]),
.mindex-internal-view select,
.mindex-settings-card input:not([type="checkbox"]):not([type="range"]),
.mindex-settings-card select,
.settings-section input:not([type="checkbox"]):not([type="range"]),
.settings-section select {
  height: 34px;
  border: 1px solid rgba(104, 159, 198, .48);
  border-radius: 4px;
  background: rgba(14, 29, 44, .8);
  color: #e8f6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.mindex-internal-view input:focus,
.mindex-internal-view select:focus,
.mindex-settings-card input:focus,
.mindex-settings-card select:focus {
  outline: none;
  border-color: rgba(126, 215, 255, .8);
  box-shadow: 0 0 0 2px rgba(72, 167, 216, .13);
}

.mindex-primary-action,
#saveSettingsBtn,
#saveProfileBtn {
  min-width: 132px;
  height: 34px;
  justify-self: end;
  color: #061320;
  border: 1px solid rgba(126, 215, 255, .82);
  border-radius: 4px;
  background: linear-gradient(180deg, #7ed7ff, #48ace0);
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(72, 172, 224, .12);
}

.mindex-primary-action:hover,
#saveSettingsBtn:hover,
#saveProfileBtn:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 18px rgba(126, 215, 255, .18);
}

.profile-avatar-row {
  padding: 10px;
  border: 1px solid rgba(94, 145, 183, .26);
  border-radius: 5px;
  background: rgba(11, 25, 39, .48);
}

.profile-avatar-preview {
  width: 58px;
  height: 58px;
}

.profile-security-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-left-color: #ffc928;
}

.toggle-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
}

.toggle-grid label {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(94, 145, 183, .24);
  border-radius: 4px;
  background: rgba(12, 27, 42, .42);
}

.settings-row {
  align-items: end;
}

.mindex-page-status {
  min-height: 18px;
  margin: 0;
  color: #7ed7ff;
  font-size: 12px;
}

.admin-control-panel.mindex-inner-page {
  min-height: 0 !important;
  padding: 12px !important;
  gap: 10px;
  overflow: visible;
}

.admin-users {
  display: grid;
  gap: 10px;
}

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

  .toggle-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 820px) {
  .mindex-page-head,
  .admin-control-head,
  .profile-security-card {
    grid-template-columns: 1fr;
  }

  .mindex-primary-action,
  #saveSettingsBtn,
  #saveProfileBtn {
    width: 100%;
    justify-self: stretch;
  }

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

/* Internal module pages: Profile, Settings, Admin stay inside the MindeX interface. */
.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #adminView.active,
.app-shell > #premiumView.active {
  padding: 0 10px 10px !important;
  gap: 10px;
  align-content: start;
  overflow: auto !important;
  scrollbar-gutter: stable;
}

.mindex-internal-view,
.admin-control-view {
  color: #e7f4ff;
}

.mindex-page-head,
.admin-control-head {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(93, 145, 184, .52);
  border-left: 3px solid #ffc928;
  border-radius: 5px;
  background:
    radial-gradient(circle at 92% 0%, rgba(126, 215, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(34, 53, 72, .96), rgba(19, 36, 52, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 30px rgba(0, 0, 0, .12);
}

.mindex-page-head h2,
.admin-control-head h2 {
  margin: 2px 0 3px;
  color: #f7fbff;
  font-size: 18px;
  line-height: 1.05;
}

.mindex-page-head p,
.admin-control-head .muted-copy {
  margin: 0;
  color: #9fbdd4;
  font-size: 12px;
  line-height: 1.35;
}

.mindex-page-kicker,
.admin-kicker,
.mindex-card-title span {
  color: #ffc928;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mindex-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.profile-settings-grid {
  grid-template-columns: minmax(260px, .95fr) minmax(260px, 1fr);
}

.mindex-settings-card,
.admin-control-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(89, 137, 173, .52);
  border-radius: 5px;
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 215, 255, .055), transparent 34%),
    linear-gradient(180deg, rgba(33, 53, 72, .92), rgba(21, 38, 54, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  box-sizing: border-box;
}

.mindex-wide-card {
  width: 100%;
}

.mindex-card-title {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(94, 145, 183, .24);
}

.mindex-card-title strong {
  color: #f4fbff;
  font-size: 14px;
}

.mindex-internal-view label,
.mindex-settings-card label,
.settings-section label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mindex-internal-view label > span,
.mindex-settings-card label > span,
.settings-section label > span {
  color: #9fd8ff;
  font-size: 11px;
  font-weight: 800;
}

.mindex-internal-view input:not([type="checkbox"]):not([type="range"]),
.mindex-internal-view select,
.mindex-settings-card input:not([type="checkbox"]):not([type="range"]),
.mindex-settings-card select,
.settings-section input:not([type="checkbox"]):not([type="range"]),
.settings-section select {
  height: 34px;
  border: 1px solid rgba(104, 159, 198, .48);
  border-radius: 4px;
  background: rgba(14, 29, 44, .8);
  color: #e8f6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.mindex-internal-view input:focus,
.mindex-internal-view select:focus,
.mindex-settings-card input:focus,
.mindex-settings-card select:focus {
  outline: none;
  border-color: rgba(126, 215, 255, .8);
  box-shadow: 0 0 0 2px rgba(72, 167, 216, .13);
}

.mindex-primary-action,
#saveSettingsBtn,
#saveProfileBtn {
  min-width: 132px;
  height: 34px;
  justify-self: end;
  color: #061320;
  border: 1px solid rgba(126, 215, 255, .82);
  border-radius: 4px;
  background: linear-gradient(180deg, #7ed7ff, #48ace0);
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(72, 172, 224, .12);
}

.mindex-primary-action:hover,
#saveSettingsBtn:hover,
#saveProfileBtn:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 18px rgba(126, 215, 255, .18);
}

.profile-avatar-row {
  padding: 10px;
  border: 1px solid rgba(94, 145, 183, .26);
  border-radius: 5px;
  background: rgba(11, 25, 39, .48);
}

.profile-avatar-preview {
  width: 58px;
  height: 58px;
}

.profile-security-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-left-color: #ffc928;
}

.toggle-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
}

.toggle-grid label {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(94, 145, 183, .24);
  border-radius: 4px;
  background: rgba(12, 27, 42, .42);
}

.settings-row {
  align-items: end;
}

.mindex-page-status {
  min-height: 18px;
  margin: 0;
  color: #7ed7ff;
  font-size: 12px;
}

.admin-control-panel.mindex-inner-page {
  min-height: 0 !important;
  padding: 12px !important;
  gap: 10px;
  overflow: visible;
}

.admin-users {
  display: grid;
  gap: 10px;
}

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

  .toggle-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 820px) {
  .mindex-page-head,
  .admin-control-head,
  .profile-security-card {
    grid-template-columns: 1fr;
  }

  .mindex-primary-action,
  #saveSettingsBtn,
  #saveProfileBtn {
    width: 100%;
    justify-self: stretch;
  }

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

/* Definitive center-frame sizing. Keep every page inside the same content cell. */
.shell.app-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-template-rows: 48px 48px minmax(0, 1fr) 34px !important;
}

.app-shell > .module-nav {
  grid-column: 2 !important;
  grid-row: 2 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
}

.app-shell > .side-nav,
.app-shell > .friends-rail {
  grid-row: 2 / 4 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}

.app-shell > .workspace-statusbar {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
}

.app-shell > .view {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.app-shell > .view.active:not(#chatView) {
  display: grid !important;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 12px;
  padding: 0 10px 10px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 215, 255, .04), transparent 28%),
    linear-gradient(180deg, rgba(31, 49, 67, .96), rgba(24, 41, 58, .98)) !important;
}

.app-shell > .view.active:not(#chatView) > :first-child {
  margin-top: 0 !important;
}

.app-shell > #adminView.active .admin-control-panel {
  width: 100%;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Page frame contract: every non-chat page must live inside the center grid cell. */
.shell.app-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-template-rows: 48px 48px minmax(0, 1fr) 34px !important;
}

.app-shell > .module-nav {
  grid-column: 2 !important;
  grid-row: 2 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
}

.app-shell > .side-nav,
.app-shell > .friends-rail {
  grid-row: 2 / 4 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.app-shell > .workspace-statusbar {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
}

.app-shell > .view {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.app-shell > .view.active:not(#chatView) {
  display: grid !important;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 12px;
  padding: 0 10px 10px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 215, 255, .04), transparent 28%),
    linear-gradient(180deg, rgba(31, 49, 67, .96), rgba(24, 41, 58, .98)) !important;
}

.app-shell > .view.active:not(#chatView) > :first-child {
  margin-top: 0 !important;
}

.app-shell > #adminView.active .admin-control-panel,
.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #premiumView.active,
.app-shell > #dashboardView.active,
.app-shell > #rankingsView.active,
.app-shell > #servicesView.active,
.app-shell > #supportView.active,
.app-shell > #activityView.active {
  max-height: 100% !important;
}

/* Final center-stage containment for all non-chat pages. */
.app-shell > .module-nav {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.app-shell > .view,
.app-shell > #profileView,
.app-shell > #settingsView,
.app-shell > #premiumView,
.app-shell > #adminView,
.app-shell > #dashboardView,
.app-shell > #rankingsView,
.app-shell > #servicesView,
.app-shell > #supportView,
.app-shell > #activityView {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

.app-shell > .view.active,
.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #premiumView.active,
.app-shell > #adminView.active,
.app-shell > #dashboardView.active,
.app-shell > #rankingsView.active,
.app-shell > #servicesView.active,
.app-shell > #supportView.active,
.app-shell > #activityView.active {
  display: block !important;
  overflow: hidden !important;
}

.app-shell > .hub-view.active,
.app-shell > .settings.view.active,
.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #premiumView.active,
.app-shell > #adminView.active,
.app-shell > #rankingsView.active,
.app-shell > #servicesView.active,
.app-shell > #supportView.active,
.app-shell > #activityView.active {
  overflow: auto !important;
  overscroll-behavior: contain;
  padding: 12px 14px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 215, 255, .045), transparent 28%),
    linear-gradient(180deg, rgba(31, 49, 67, .96), rgba(24, 41, 58, .98)) !important;
  border-top: 1px solid rgba(92, 137, 171, .44);
}

.app-shell > .side-nav {
  grid-column: 1 !important;
  grid-row: 2 / 4 !important;
  z-index: 3 !important;
}

.app-shell > .friends-rail {
  grid-column: 3 !important;
  grid-row: 2 / 4 !important;
  z-index: 3 !important;
}

/* Admin Panel console layout */
.admin-control-view {
  overflow: auto;
}

.admin-control-panel {
  min-height: 100%;
  padding: 16px;
  border-color: rgba(94, 145, 183, .58);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 201, 40, .06), transparent 30%),
    linear-gradient(180deg, rgba(30, 50, 69, .98), rgba(17, 31, 45, .99));
}

.admin-control-head {
  align-items: center;
  padding: 13px 14px;
  margin-bottom: 4px;
  border: 1px solid rgba(96, 144, 178, .42);
  border-left: 3px solid #ffc928;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(39, 62, 82, .9), rgba(20, 36, 51, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.admin-kicker {
  display: block;
  margin-bottom: 4px;
  color: #ffc928;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.admin-control-head h2 {
  margin: 0 0 4px;
  color: #f6fbff;
  font-size: 18px;
}

.admin-control-head .muted-copy {
  color: #9fc0d8;
}

.admin-refresh-wrap {
  min-width: 220px;
}

.admin-refresh-btn {
  min-width: 92px;
  height: 34px;
  border-color: rgba(255, 201, 40, .58);
  color: #ffe699;
  background:
    linear-gradient(90deg, rgba(255, 201, 40, 0), rgba(255, 201, 40, .11), rgba(126, 215, 255, 0)),
    linear-gradient(180deg, rgba(42, 61, 78, .98), rgba(17, 35, 49, .98));
}

.admin-refresh-btn::before {
  content: "\21BB";
  margin-right: 7px;
  color: #7ed7ff;
}

.admin-refresh-btn:hover:not(:disabled) {
  border-color: rgba(255, 201, 40, .85);
  box-shadow: 0 0 18px rgba(255, 201, 40, .12), inset 3px 0 0 #ffc928;
}

.admin-category-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.admin-category-tab {
  min-height: 56px;
  padding: 9px 11px;
  text-align: left;
  border: 1px solid rgba(95, 141, 176, .42);
  border-radius: 5px;
  color: #d6ebfb;
  background: linear-gradient(180deg, rgba(36, 56, 75, .8), rgba(23, 39, 55, .9));
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease;
}

.admin-category-tab strong,
.admin-category-tab span {
  display: block;
}

.admin-category-tab strong {
  color: #f7fbff;
  font-size: 12px;
}

.admin-category-tab span {
  margin-top: 4px;
  color: #87a9c3;
  font-size: 10px;
  line-height: 1.25;
}

.admin-category-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(126, 215, 255, .55);
}

.admin-category-tab.active {
  border-color: rgba(255, 201, 40, .84);
  background:
    linear-gradient(180deg, rgba(46, 66, 84, .95), rgba(18, 39, 55, .98));
  box-shadow: inset 3px 0 0 #ffc928, 0 0 18px rgba(255, 201, 40, .08);
}

.admin-category-tab.active strong {
  color: #ffe9a8;
}

.admin-category-panel {
  display: none;
  gap: 12px;
}

.admin-category-panel.active {
  display: grid;
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-metric-card,
.admin-management-card {
  padding: 13px;
  border: 1px solid rgba(96, 145, 180, .5);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(38, 61, 82, .88), rgba(20, 38, 55, .92));
  box-shadow: inset 0 0 24px rgba(126, 215, 255, .035);
}

.admin-metric-card span,
.admin-management-card span {
  display: block;
  color: #8edcff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.admin-metric-card strong {
  display: block;
  margin: 5px 0;
  color: #25ff91;
  font-size: 24px;
  line-height: 1;
}

.admin-metric-card small,
.admin-management-card p,
.admin-section-title span {
  color: #91b1c8;
}

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

.admin-management-card {
  border-left: 3px solid #ffc928;
}

.admin-management-card strong {
  display: block;
  margin: 6px 0;
  color: #f4fbff;
}

.admin-management-card p {
  margin: 0;
  line-height: 1.45;
}

.admin-update-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.admin-update-card {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px 13px;
  border: 1px solid rgba(96, 145, 180, .5);
  border-left: 3px solid #ffc928;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(36, 58, 78, .92), rgba(18, 35, 51, .96));
  box-shadow: inset 0 0 22px rgba(126, 215, 255, .04);
}

.admin-update-card.running {
  border-color: rgba(126, 215, 255, .66);
  box-shadow: inset 0 0 22px rgba(126, 215, 255, .07), 0 0 18px rgba(126, 215, 255, .08);
}

.admin-update-card.complete {
  border-left-color: #37f29b;
}

.admin-update-card.failed {
  border-left-color: #ff5b6b;
}

.admin-update-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.admin-update-card span {
  color: #f6fbff;
  font-size: 13px;
  font-weight: 900;
}

.admin-update-card p {
  margin: 0;
  color: #9bb9ce;
  font-size: 12px;
  line-height: 1.45;
}

.admin-update-card.disabled {
  opacity: .58;
  border-left-color: #72869b;
}

.admin-update-progress {
  display: grid;
  gap: 5px;
}

.admin-update-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #9bb9ce;
  font-size: 11px;
}

.admin-update-progress-meta strong {
  color: #b8d7ef;
  font-size: 11px;
  font-weight: 800;
}

.admin-update-progress-meta em {
  color: #ffc928;
  font-style: normal;
  font-weight: 900;
}

.admin-update-bar {
  height: 5px;
  overflow: hidden;
  border: 1px solid rgba(126, 215, 255, .18);
  border-radius: 3px;
  background: rgba(8, 17, 28, .72);
}

.admin-update-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(126, 215, 255, .22), rgba(255, 201, 40, .9), rgba(126, 215, 255, .3)),
    linear-gradient(90deg, #43aede, #7ed7ff);
  box-shadow: 0 0 12px rgba(255, 201, 40, .32);
  transition: width .28s ease;
}

.admin-update-card.failed .admin-update-bar i {
  background: linear-gradient(90deg, #ff5b6b, #ff9a9a);
  box-shadow: 0 0 12px rgba(255, 91, 107, .28);
}

.admin-deploy-btn {
  justify-self: start;
  min-width: 108px;
  padding: 8px 13px;
  border: 1px solid rgba(126, 215, 255, .45);
  border-radius: 4px;
  color: #05121d;
  font-weight: 900;
  background: linear-gradient(180deg, #7ed7ff, #43aede);
  box-shadow: 0 0 14px rgba(126, 215, 255, .12);
}

.admin-deploy-btn:hover:not(:disabled) {
  border-color: rgba(255, 201, 40, .9);
  box-shadow: 0 0 18px rgba(255, 201, 40, .2), inset 0 0 12px rgba(255, 255, 255, .18);
}

.admin-deploy-btn:disabled {
  cursor: not-allowed;
  color: #95a9b9;
  background: rgba(41, 61, 78, .8);
}

.admin-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(96, 145, 180, .35);
}

.admin-section-title strong {
  display: block;
  color: #f4fbff;
  font-size: 14px;
}

.admin-section-title em {
  color: #ffc928;
  font-style: normal;
  font-weight: 900;
}

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

.admin-user-row {
  grid-template-columns: minmax(0, 1fr) 142px 44px 70px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(38, 61, 82, .78), rgba(24, 43, 61, .86));
}

.role-editor {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.role-card {
  border-radius: 6px;
  border-color: rgba(96, 145, 180, .5);
  background: linear-gradient(180deg, rgba(33, 54, 73, .9), rgba(17, 33, 48, .94));
}

.admin-activity-list {
  display: grid;
  gap: 7px;
}

.admin-activity-row {
  display: grid;
  grid-template-columns: 136px 110px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(96, 145, 180, .35);
  border-radius: 5px;
  background: rgba(14, 29, 43, .56);
}

.admin-activity-row time {
  color: #8edcff;
}

.admin-activity-row strong {
  color: #ffe9a8;
}

.admin-activity-row span {
  color: #d4e7f5;
}

@media (max-width: 980px) {
  .admin-category-tabs,
  .admin-overview-grid,
  .admin-management-grid {
    grid-template-columns: 1fr;
  }

  .admin-control-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-refresh-wrap {
    justify-content: flex-start;
  }
}

/* Direct Chats crest pair must stay joined horizontally, matching the in-chat name crest. */
.friends-rail .friend-card .friend-copy strong {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.friends-rail .friend-card .friend-copy strong > .crest-stack {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 14px !important;
  margin: 0 3px 0 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.friends-rail .friend-card .friend-copy strong > .crest-stack .crest-canvas,
.friends-rail .friend-card .friend-copy strong > .crest-stack .crest-badge {
  display: block !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  image-rendering: pixelated;
}

.friends-rail .friend-card .friend-copy strong > .crest-stack .crest-canvas + .crest-canvas,
.friends-rail .friend-card .friend-copy strong > .crest-stack .crest-badge + .crest-badge {
  margin-left: -1px !important;
}

/* Stable chat viewport frame: border/relationship animation stays visible while messages scroll. */
.messages-frame {
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(118, 178, 212, .04), transparent 30%),
    linear-gradient(180deg, rgba(37, 55, 72, .94), rgba(34, 52, 69, .95));
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(99, 145, 179, .18);
}

.messages-frame > .messages {
  height: 100%;
  padding-top: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}

.messages-frame .chat-history-loader {
  position: sticky;
  top: 0;
  z-index: 6;
  width: 100%;
  margin: 0 0 4px;
  padding: 6px 16px 4px;
  background: linear-gradient(180deg, rgba(15, 31, 47, .96), rgba(15, 31, 47, .74));
  border-bottom: 1px solid rgba(99, 151, 188, .16);
}

.messages-frame[data-relationship="clan"],
.messages-frame[data-relationship="alliance"],
.messages-frame[data-relationship="party"],
.messages-frame[data-relationship="trade"],
.messages-frame[data-relationship="game"],
.messages-frame[data-relationship="general"],
.messages-frame[data-relationship="all"],
.messages-frame[data-relationship="direct"] {
  --relation-rgb: 154, 91, 255;
  --relation-rgb-2: 81, 219, 255;
  --relation-accent: #a95bff;
  box-shadow:
    inset 0 0 0 1px rgba(var(--relation-rgb), .26),
    inset 0 0 18px rgba(var(--relation-rgb), .07);
}

.messages-frame[data-relationship="general"] {
  --relation-rgb: 57, 163, 255;
  --relation-rgb-2: 68, 240, 255;
  --relation-accent: #39a3ff;
}

.messages-frame[data-relationship="all"] {
  --relation-rgb: 120, 210, 255;
  --relation-rgb-2: 72, 172, 224;
  --relation-accent: #78d2ff;
}

.messages-frame[data-relationship="party"] {
  --relation-rgb: 45, 220, 118;
  --relation-rgb-2: 126, 255, 180;
  --relation-accent: #2ddc76;
}

.messages-frame[data-relationship="trade"] {
  --relation-rgb: 238, 173, 94;
  --relation-rgb-2: 255, 211, 145;
  --relation-accent: #eead5e;
}

.messages-frame[data-relationship="alliance"] {
  --relation-rgb: 185, 255, 92;
  --relation-rgb-2: 225, 255, 135;
  --relation-accent: #b9ff5c;
}

.messages-frame[data-relationship="direct"] {
  --relation-rgb: 192, 73, 134;
  --relation-rgb-2: 255, 130, 190;
  --relation-accent: #c04986;
}

.messages-frame[data-relationship="clan"]::before,
.messages-frame[data-relationship="alliance"]::before,
.messages-frame[data-relationship="party"]::before,
.messages-frame[data-relationship="trade"]::before,
.messages-frame[data-relationship="game"]::before,
.messages-frame[data-relationship="general"]::before,
.messages-frame[data-relationship="all"]::before,
.messages-frame[data-relationship="direct"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: 4px;
  border: 1px solid rgba(var(--relation-rgb), .2);
  box-shadow: inset 0 0 14px rgba(var(--relation-rgb), .06);
}

.messages-frame[data-relationship="clan"]::after,
.messages-frame[data-relationship="alliance"]::after,
.messages-frame[data-relationship="party"]::after,
.messages-frame[data-relationship="trade"]::after,
.messages-frame[data-relationship="game"]::after,
.messages-frame[data-relationship="general"]::after,
.messages-frame[data-relationship="all"]::after,
.messages-frame[data-relationship="direct"]::after {
  content: "";
  position: absolute;
  z-index: 8;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 88px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--relation-rgb), .96), rgba(var(--relation-rgb-2), .55), transparent);
  box-shadow:
    0 0 8px rgba(var(--relation-rgb), .68),
    0 0 15px rgba(var(--relation-rgb-2), .18);
  animation: relationConversationTrace 7.5s linear infinite;
}

/* Composer follows the active chat channel color. */
.composer[data-relationship],
.composer-box[data-relationship] {
  --composer-relation-rgb: 120, 210, 255;
  --composer-relation-rgb-2: 72, 172, 224;
}

.composer[data-relationship="general"],
.composer-box[data-relationship="general"] {
  --composer-relation-rgb: 57, 163, 255;
  --composer-relation-rgb-2: 68, 240, 255;
}

.composer[data-relationship="all"],
.composer-box[data-relationship="all"] {
  --composer-relation-rgb: 120, 210, 255;
  --composer-relation-rgb-2: 72, 172, 224;
}

.composer[data-relationship="party"],
.composer-box[data-relationship="party"] {
  --composer-relation-rgb: 45, 220, 118;
  --composer-relation-rgb-2: 126, 255, 180;
}

.composer[data-relationship="trade"],
.composer-box[data-relationship="trade"] {
  --composer-relation-rgb: 238, 173, 94;
  --composer-relation-rgb-2: 255, 211, 145;
}

.composer[data-relationship="clan"],
.composer-box[data-relationship="clan"] {
  --composer-relation-rgb: 154, 91, 255;
  --composer-relation-rgb-2: 81, 219, 255;
}

.composer[data-relationship="alliance"],
.composer-box[data-relationship="alliance"] {
  --composer-relation-rgb: 185, 255, 92;
  --composer-relation-rgb-2: 225, 255, 135;
}

.composer[data-relationship="direct"],
.composer-box[data-relationship="direct"] {
  --composer-relation-rgb: 192, 73, 134;
  --composer-relation-rgb-2: 255, 130, 190;
}

.composer-row .composer-box[data-relationship] {
  border-color: rgba(var(--composer-relation-rgb), .54);
  box-shadow:
    inset 0 0 0 1px rgba(var(--composer-relation-rgb), .08),
    0 0 14px rgba(var(--composer-relation-rgb), .08);
}

.composer-row .composer-box[data-relationship]:focus-within {
  border-color: rgba(var(--composer-relation-rgb), .84);
  box-shadow:
    0 0 0 2px rgba(var(--composer-relation-rgb), .11),
    0 0 18px rgba(var(--composer-relation-rgb-2), .13),
    inset 0 0 0 1px rgba(var(--composer-relation-rgb), .12);
}

/* Keep every app page inside the center interface area, preserving sidebar and Direct Chats. */
.app-shell > .module-nav,
.app-shell > .view {
  grid-column: 2 !important;
  min-width: 0;
  max-width: 100%;
}

.app-shell > .module-nav {
  grid-row: 2 !important;
}

.app-shell > .view {
  grid-row: 3 !important;
  align-self: stretch;
  box-sizing: border-box;
}

.app-shell > .view.active {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app-shell > .hub-view.active,
.app-shell > .settings.view.active {
  overflow: auto;
  overscroll-behavior: contain;
}

.app-shell > .side-nav,
.app-shell > .friends-rail {
  position: relative;
  z-index: 2;
}

.app-shell > .side-nav,
.app-shell > .friends-rail {
  grid-row: 2 / 4 !important;
}

.app-shell > .workspace-statusbar {
  grid-row: 4 !important;
  height: 26px;
  min-height: 26px;
  box-sizing: border-box;
}

/* Direct conversation tabs use presence styling instead of normal channel text. */
.chat-channel.direct-presence-channel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 30px;
  padding: 0 11px;
  border-color: rgba(100, 143, 176, .62);
  background: linear-gradient(180deg, rgba(43, 68, 91, .94), rgba(29, 50, 70, .96));
  color: #f0f8ff;
}

.chat-channel.direct-presence-channel:hover {
  border-color: rgba(127, 188, 224, .78);
  background: linear-gradient(180deg, rgba(52, 81, 107, .96), rgba(36, 61, 83, .98));
}

.chat-channel.direct-presence-channel.active {
  color: #f4fbff;
  border-color: rgba(255, 201, 40, .78);
  background: linear-gradient(180deg, rgba(43, 67, 88, .98), rgba(30, 54, 75, .98));
  box-shadow: inset 0 -2px 0 #ffc928, 0 0 18px rgba(255, 201, 40, .08);
}

.chat-channel.direct-presence-channel.relation-clan {
  border-color: rgba(154, 91, 255, .46);
  box-shadow: inset 2px 0 0 rgba(188, 132, 255, .62);
}

.chat-channel.direct-presence-channel.relation-clan.active {
  box-shadow:
    inset 2px 0 0 rgba(188, 132, 255, .72),
    inset 0 -2px 0 #ffc928,
    0 0 16px rgba(127, 79, 255, .1);
}

.direct-presence-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  box-shadow: 0 0 9px currentColor;
}

.direct-presence-dot.online {
  color: #27dc76;
  background: #27dc76;
}

.direct-presence-dot.away {
  color: #ffb238;
  background: #ffb238;
}

.direct-presence-dot.offline {
  color: #ff4d5b;
  background: #ff4d5b;
}

.direct-presence-name {
  overflow: hidden;
  max-width: 120px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Direct Chats crest rendering must match the in-chat crest, without clipping. */
.friends-rail .online-user-row.friend-card {
  min-height: 34px;
  align-items: center;
}

.friends-rail .friend-copy strong {
  min-height: 17px;
  line-height: 17px;
  overflow: visible;
}

.friends-rail .friend-copy .crest-stack {
  width: auto;
  height: 16px;
  min-width: 16px;
  align-items: center;
  overflow: visible;
  transform: translateY(0);
}

.friends-rail .friend-copy .crest-canvas,
.friends-rail .friend-copy .crest-badge {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  image-rendering: pixelated;
}

.friends-rail .friend-copy .crest-canvas + .crest-canvas,
.friends-rail .friend-copy .crest-badge + .crest-badge {
  margin-left: 0;
}

.dashboard-character-actions {
  min-width: 0;
}

/* Final compact composer sizing */
.composer {
  padding: 7px 10px 7px;
}

.composer-row {
  grid-template-columns: 34px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 8px;
}

.composer-row > button,
.composer-plus {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.composer-plus {
  padding: 0;
  font-size: 20px;
}

.composer-row > .composer-plus {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #aee6ff;
  border-color: rgba(93, 147, 187, .62);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 215, 255, .16), transparent 58%),
    linear-gradient(180deg, rgba(36, 62, 84, .96), rgba(22, 42, 60, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 10px rgba(65, 171, 224, .06);
  transition: transform .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.composer-row > .composer-plus::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border-radius: 4px;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 201, 40, .2), transparent 62%);
  transition: opacity .14s ease;
}

.composer-row > .composer-plus:hover {
  transform: translateY(-1px);
  color: #fff4bf;
  border-color: rgba(255, 201, 40, .78);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 201, 40, .12), transparent 56%),
    linear-gradient(180deg, rgba(42, 69, 92, .98), rgba(25, 48, 68, .99));
  box-shadow:
    0 0 0 1px rgba(255, 201, 40, .12),
    0 0 14px rgba(87, 199, 255, .16),
    inset 0 0 0 1px rgba(126, 215, 255, .09);
}

.composer-row > .composer-plus:hover::after {
  opacity: 1;
}

.composer-row > .composer-plus:active {
  transform: translateY(0);
  filter: brightness(.94);
}

.composer-row .composer-box {
  min-height: 34px;
  height: 34px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
}

.composer-row .composer-box textarea {
  min-height: 24px;
  height: 24px;
  max-height: 48px;
  line-height: 20px;
  padding: 2px 0;
}

.composer-row > .composer-send {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 64px;
  color: #04121e;
  font-weight: 1000;
  letter-spacing: 0;
  border: 1px solid rgba(126, 215, 255, .84);
  background:
    linear-gradient(180deg, rgba(158, 233, 255, .98), rgba(78, 181, 229, .98) 48%, rgba(42, 129, 190, .98));
  box-shadow:
    0 0 14px rgba(79, 190, 244, .18),
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(0, 37, 67, .35);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}

.composer-row > .composer-send::before {
  content: "";
  position: absolute;
  inset: -35% auto -35% -70%;
  z-index: -1;
  width: 52%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  opacity: 0;
}

.composer-row > .composer-send:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 201, 40, .9);
  filter: saturate(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 201, 40, .16),
    0 0 18px rgba(85, 202, 255, .25),
    0 0 20px rgba(255, 201, 40, .12),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

.composer-row > .composer-send:hover::before {
  opacity: 1;
  animation: sendButtonSweep .78s ease-out;
}

.composer-row > .composer-send:active {
  transform: translateY(0);
  filter: brightness(.96);
}

@keyframes sendButtonSweep {
  from { left: -70%; }
  to { left: 120%; }
}

/* Master Account creation focus */
.create-game-hero {
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 2px 0 12px;
  padding: 18px 22px;
  border: 1px solid rgba(95, 163, 204, .56);
  border-left: 3px solid #ffc928;
  background:
    radial-gradient(circle at 72% 28%, rgba(255, 201, 40, .12), transparent 34%),
    linear-gradient(180deg, rgba(28, 43, 58, .96), rgba(15, 27, 39, .98));
  box-shadow: inset 0 0 34px rgba(70, 174, 223, .055), 0 18px 38px rgba(0, 0, 0, .18);
}

.create-game-hero span {
  color: #ffc928;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.create-game-hero h2 {
  margin: 4px 0 6px;
  color: #f4fbff;
  font-size: 23px;
  line-height: 1.1;
}

.create-game-hero p {
  margin: 0;
  max-width: 560px;
  color: #9fc0d7;
  font-size: 13px;
}

.create-game-hero-btn {
  min-width: 218px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #061320;
  border: 1px solid rgba(255, 201, 40, .88);
  border-radius: 4px;
  background: linear-gradient(180deg, #ffe083, #d9a52e);
  box-shadow: 0 12px 28px rgba(255, 201, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .32);
  font-weight: 900;
}

.create-game-hero-btn span {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #061320;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  font-size: 18px;
  line-height: 1;
}

.create-game-hero-btn:hover {
  color: #03101a;
  background: linear-gradient(180deg, #fff0a9, #ffc928);
  transform: translateY(-1px);
}

.mindex-action-modal {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 9, 16, .68);
  backdrop-filter: blur(6px);
}

.mindex-action-card {
  width: min(520px, calc(100vw - 36px));
  display: grid;
  gap: 14px;
  padding: 0;
  color: #dceefa;
  border: 1px solid rgba(100, 156, 194, .52);
  border-top: 2px solid #ffc928;
  border-radius: 7px;
  background:
    radial-gradient(circle at 80% 0%, rgba(72, 167, 216, .14), transparent 38%),
    linear-gradient(180deg, rgba(24, 39, 54, .99), rgba(9, 20, 31, .99));
  box-shadow: 0 28px 78px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.mindex-action-card header {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(93, 137, 170, .36);
  background: linear-gradient(180deg, rgba(31, 49, 67, .78), rgba(18, 31, 44, .9));
}

.mindex-action-card header span,
.profile-security-card span {
  color: #8edcff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mindex-action-card h3 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 22px;
}

.mindex-action-intro {
  margin: 0;
  padding: 0 18px;
  color: #9fb9ce;
  line-height: 1.45;
}

.mindex-action-card label {
  margin: 0 18px;
}

.mindex-action-fields {
  display: grid;
  gap: 12px;
}

.mindex-action-card input {
  height: 38px;
  border-color: rgba(98, 145, 179, .7);
  background: #dfe9f7;
  color: #061320;
  font-weight: 700;
}

.mindex-action-card input::placeholder {
  color: #5e7181;
  font-weight: 600;
}

.mindex-action-status {
  min-height: 18px;
  margin: 0 18px;
  color: #9fb9ce;
  font-size: 13px;
}

.mindex-action-status.error {
  color: #ff8080;
}

.mindex-action-status.success {
  color: #25ff91;
}

.mindex-action-status code {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 9px;
  color: #08131e;
  border-radius: 5px;
  background: linear-gradient(180deg, #9fffd0, #40d990);
  font-weight: 900;
  letter-spacing: .05em;
}

.mindex-action-note {
  margin: 0 18px;
  padding: 10px 12px;
  color: #b7d5e9;
  border: 1px solid rgba(103, 158, 197, .32);
  border-left: 3px solid #63c7ff;
  border-radius: 5px;
  background: rgba(13, 31, 47, .72);
  font-size: 12px;
  line-height: 1.35;
}

.mindex-action-note.danger {
  color: #ffe3b8;
  border-left-color: #ffc928;
}

.mindex-action-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(93, 137, 170, .28);
}

.sell-item-card {
  width: min(540px, calc(100vw - 36px));
}

.sell-item-preview {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 18px;
  padding: 12px;
  border: 1px solid rgba(98, 145, 179, .45);
  background: linear-gradient(180deg, rgba(12, 30, 45, .86), rgba(6, 18, 29, .86));
}

.sell-item-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(93, 137, 170, .65);
  background: #06111d;
}

.sell-item-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.sell-item-preview strong {
  display: block;
  color: #f3f9ff;
  font-size: 14px;
}

.sell-item-preview small {
  color: #8edcff;
  font-size: 11px;
  font-weight: 800;
}

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

.create-game-submit {
  min-width: 156px;
  color: #061320;
  border: 1px solid rgba(126, 215, 255, .8);
  background: linear-gradient(180deg, #7ed7ff, #48ace0);
  font-weight: 900;
}

.profile-security-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(78, 117, 148, .56);
  border-left: 3px solid #ffc928;
  border-radius: 5px;
  background: rgba(18, 32, 46, .72);
}

.profile-security-card strong {
  display: block;
  margin: 3px 0;
  color: #f4fbff;
}

.profile-security-card p {
  margin: 0;
  color: #8faabe;
  font-size: 12px;
}

@media (max-width: 760px) {
  .create-game-hero,
  .profile-security-card {
    grid-template-columns: 1fr;
  }

  .create-game-hero-btn {
    width: 100%;
  }
}

/* Final Account Dashboard action layout */
.master-account-panel header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.master-account-panel h2 {
  text-align: left;
}

.game-account-actions,
.dashboard-character-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.game-account-actions button,
.dashboard-character-actions button,
.master-account-table td:last-child button {
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 900;
}

.game-account-actions button {
  border-color: rgba(255, 201, 40, .38);
  color: #ffe5a2;
  background: linear-gradient(180deg, rgba(64, 55, 31, .86), rgba(35, 42, 48, .96));
}

.dashboard-character-actions .unstuck-action {
  border-color: rgba(126, 215, 255, .5);
  color: #9ee4ff;
}

.master-account-table th:first-child,
.master-account-table td:first-child {
  width: 34%;
}

.master-account-table td:first-child {
  color: #f2fbff;
  font-weight: 900;
}

.master-account-table td:last-child {
  white-space: normal;
}

/* Absolute final page-frame lock: center pages start flush and never overflow below the app frame. */
.app-shell > .view,
.app-shell > #profileView,
.app-shell > #settingsView,
.app-shell > #premiumView,
.app-shell > #adminView,
.app-shell > #dashboardView,
.app-shell > #rankingsView,
.app-shell > #servicesView,
.app-shell > #supportView,
.app-shell > #activityView {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.app-shell > .hub-view.active,
.app-shell > .settings.view.active,
.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #premiumView.active,
.app-shell > #adminView.active,
.app-shell > #dashboardView.active,
.app-shell > #rankingsView.active,
.app-shell > #servicesView.active,
.app-shell > #supportView.active,
.app-shell > #activityView.active {
  display: block !important;
  padding: 0 10px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 215, 255, .04), transparent 28%),
    linear-gradient(180deg, rgba(31, 49, 67, .96), rgba(24, 41, 58, .98)) !important;
  border-top: 0 !important;
}

.app-shell > #adminView.active .admin-control-panel,
.app-shell > #profileView.active > *,
.app-shell > #settingsView.active > *,
.app-shell > #premiumView.active > *,
.app-shell > #dashboardView.active > *,
.app-shell > #rankingsView.active > *,
.app-shell > #servicesView.active > *,
.app-shell > #supportView.active > *,
.app-shell > #activityView.active > * {
  margin-top: 0 !important;
}

.app-shell > #adminView.active .admin-control-panel {
  min-height: auto !important;
  height: auto !important;
  box-sizing: border-box !important;
}
/* EOF center-frame override. This intentionally sits last because older page-frame
   experiments above are duplicated and must not win the cascade. */
.shell.app-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-template-rows: 48px 48px minmax(0, 1fr) 34px !important;
}

.app-shell > .module-nav {
  grid-column: 2 !important;
  grid-row: 2 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
}

.app-shell > .side-nav,
.app-shell > .friends-rail {
  grid-row: 2 / 4 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}

.app-shell > .workspace-statusbar {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
}

.app-shell > .view {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.app-shell > .view.active:not(#chatView) {
  display: grid !important;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 12px;
  padding: 0 10px 10px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 215, 255, .04), transparent 28%),
    linear-gradient(180deg, rgba(31, 49, 67, .96), rgba(24, 41, 58, .98)) !important;
}

.app-shell > .view.active:not(#chatView) > :first-child {
  margin-top: 0 !important;
}

.app-shell > #adminView.active .admin-control-panel {
  width: 100%;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Final internal module override: Profile, Settings, Admin and Premium remain inside the app frame. */
.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #adminView.active,
.app-shell > #premiumView.active {
  padding: 0 10px 10px !important;
  gap: 10px;
  align-content: start;
  overflow: auto !important;
  scrollbar-gutter: stable;
}

.mindex-internal-view,
.admin-control-view {
  color: #e7f4ff;
}

.mindex-page-head,
.admin-control-head {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(93, 145, 184, .52);
  border-left: 3px solid #ffc928;
  border-radius: 5px;
  background:
    radial-gradient(circle at 92% 0%, rgba(126, 215, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(34, 53, 72, .96), rgba(19, 36, 52, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 30px rgba(0, 0, 0, .12);
}

.mindex-page-head h2,
.admin-control-head h2 {
  margin: 2px 0 3px;
  color: #f7fbff;
  font-size: 18px;
  line-height: 1.05;
}

.mindex-page-head p,
.admin-control-head .muted-copy {
  margin: 0;
  color: #9fbdd4;
  font-size: 12px;
  line-height: 1.35;
}

.mindex-page-kicker,
.admin-kicker,
.mindex-card-title span {
  color: #ffc928;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mindex-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.profile-settings-grid {
  grid-template-columns: minmax(260px, .95fr) minmax(260px, 1fr);
}

.mindex-settings-card,
.admin-control-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(89, 137, 173, .52);
  border-radius: 5px;
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 215, 255, .055), transparent 34%),
    linear-gradient(180deg, rgba(33, 53, 72, .92), rgba(21, 38, 54, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  box-sizing: border-box;
}

.mindex-wide-card {
  width: 100%;
}

.mindex-card-title {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(94, 145, 183, .24);
}

.mindex-card-title strong {
  color: #f4fbff;
  font-size: 14px;
}

.mindex-internal-view label,
.mindex-settings-card label,
.settings-section label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mindex-internal-view label > span,
.mindex-settings-card label > span,
.settings-section label > span {
  color: #9fd8ff;
  font-size: 11px;
  font-weight: 800;
}

.mindex-internal-view input:not([type="checkbox"]):not([type="range"]),
.mindex-internal-view select,
.mindex-settings-card input:not([type="checkbox"]):not([type="range"]),
.mindex-settings-card select,
.settings-section input:not([type="checkbox"]):not([type="range"]),
.settings-section select {
  height: 34px;
  border: 1px solid rgba(104, 159, 198, .48);
  border-radius: 4px;
  background: rgba(14, 29, 44, .8);
  color: #e8f6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.mindex-internal-view input:focus,
.mindex-internal-view select:focus,
.mindex-settings-card input:focus,
.mindex-settings-card select:focus {
  outline: none;
  border-color: rgba(126, 215, 255, .8);
  box-shadow: 0 0 0 2px rgba(72, 167, 216, .13);
}

.mindex-primary-action,
#saveSettingsBtn,
#saveProfileBtn {
  min-width: 132px;
  height: 34px;
  justify-self: end;
  color: #061320;
  border: 1px solid rgba(126, 215, 255, .82);
  border-radius: 4px;
  background: linear-gradient(180deg, #7ed7ff, #48ace0);
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(72, 172, 224, .12);
}

.mindex-primary-action:hover,
#saveSettingsBtn:hover,
#saveProfileBtn:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 18px rgba(126, 215, 255, .18);
}

.profile-avatar-row {
  padding: 10px;
  border: 1px solid rgba(94, 145, 183, .26);
  border-radius: 5px;
  background: rgba(11, 25, 39, .48);
}

.profile-avatar-preview {
  width: 58px;
  height: 58px;
}

.profile-security-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-left-color: #ffc928;
}

.toggle-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
}

.toggle-grid label {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(94, 145, 183, .24);
  border-radius: 4px;
  background: rgba(12, 27, 42, .42);
}

.settings-row {
  align-items: end;
}

.mindex-page-status {
  min-height: 18px;
  margin: 0;
  color: #7ed7ff;
  font-size: 12px;
}

.admin-control-panel.mindex-inner-page {
  min-height: 0 !important;
  padding: 12px !important;
  gap: 10px;
  overflow: visible;
}

.admin-users {
  display: grid;
  gap: 10px;
}

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

  .toggle-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 820px) {
  .mindex-page-head,
  .admin-control-head,
  .profile-security-card {
    grid-template-columns: 1fr;
  }

  .mindex-primary-action,
  #saveSettingsBtn,
  #saveProfileBtn {
    width: 100%;
    justify-self: stretch;
  }

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

/* Live alignment fix: module pages must start at the top edge of the center frame. */
.app-shell > #premiumView.active,
.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #adminView.active {
  padding-top: 0 !important;
  align-content: start !important;
}

.app-shell > #premiumView.active > :first-child,
.app-shell > #profileView.active > :first-child,
.app-shell > #settingsView.active > :first-child,
.app-shell > #adminView.active > :first-child {
  margin-top: 0 !important;
}

.app-shell > #adminView.active .admin-control-panel.mindex-inner-page {
  margin-top: 0 !important;
}


/* Final structural position fix: internal pages stay below the module menu. */
.app-shell > .module-nav {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: relative !important;
  z-index: 30 !important;
}

.app-shell > #profileView,
.app-shell > #settingsView,
.app-shell > #adminView,
.app-shell > #premiumView {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 7;
}

.app-shell > #profileView.active,
.app-shell > #settingsView.active,
.app-shell > #adminView.active,
.app-shell > #premiumView.active {
  display: grid !important;
  grid-auto-rows: min-content;
  align-content: start !important;
  gap: 10px;
  padding: 8px 10px 10px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 215, 255, .045), transparent 28%),
    linear-gradient(180deg, rgba(31, 49, 67, .98), rgba(24, 41, 58, .99)) !important;
}

.app-shell > #profileView.active > :first-child,
.app-shell > #settingsView.active > :first-child,
.app-shell > #adminView.active > :first-child,
.app-shell > #premiumView.active > :first-child {
  margin-top: 0 !important;
}

.app-shell > #adminView.active .admin-control-panel.mindex-inner-page {
  margin-top: 0 !important;
  min-height: 0 !important;
}

/* Final chat layout restore after enabling app-shell. */
.app-shell > #chatView {
  grid-column: 2 !important;
  grid-row: 3 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.app-shell > #chatView.active {
  display: grid !important;
  grid-template-rows: 46px minmax(0, 1fr) auto auto !important;
  align-content: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(126, 215, 255, .035), transparent 30%),
    linear-gradient(180deg, rgba(31, 49, 67, .96), rgba(24, 41, 58, .98)) !important;
}

.app-shell > #chatView.active .chat-search-bar,
.app-shell > #chatView.active .messages-frame,
.app-shell > #chatView.active .chat-channel-strip,
.app-shell > #chatView.active .composer {
  display: flex;
  min-width: 0;
  box-sizing: border-box;
}

.app-shell > #chatView.active .messages-frame {
  display: block;
  min-height: 0;
  overflow: hidden;
}

.app-shell > #chatView.active .chat-channel-strip {
  min-height: 40px;
  align-items: center;
  gap: 7px;
}

.app-shell > #chatView.active .composer {
  display: grid;
  min-height: 92px;
}

/* Clear message time/date rhythm. */
.messages-frame .message {
  padding-left: 6px !important;
  padding-right: 12px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.messages-frame .message-body {
  grid-template-columns: 34px max-content minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 4px !important;
}

.messages-frame .message-time {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 32px !important;
  padding-top: 1px !important;
  color: rgba(179, 219, 246, .9) !important;
  font-size: 11px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

.messages-frame .message-meta {
  gap: 2px !important;
  margin-right: 2px !important;
}

.messages-frame .message-meta .crest-stack {
  height: 12px !important;
  margin-right: 1px !important;
}

.messages-frame .message-meta .crest-canvas,
.messages-frame .message-meta .crest-badge {
  width: 12px !important;
  height: 12px !important;
  flex-basis: 12px !important;
}

.messages-frame .message-meta .crest-canvas + .crest-canvas,
.messages-frame .message-meta .crest-badge + .crest-badge {
  margin-left: -1px !important;
}

.messages-frame .message-meta strong {
  margin-right: 2px !important;
}

.messages-frame .chat-date-divider {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 16px 6px;
  color: #ffd45f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
}

.messages-frame .chat-date-divider::before,
.messages-frame .chat-date-divider::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 40, .42), transparent);
}

.messages-frame .chat-date-divider span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 10px;
  border: 1px solid rgba(255, 201, 40, .24);
  border-radius: 4px;
  background: rgba(10, 24, 37, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Internal pages use the same sharper master-account geometry as the app shell. */
.app-shell > #profileView .hub-section-head,
.app-shell > #settingsView .hub-section-head,
.app-shell > #premiumView .hub-section-head,
.app-shell > #adminView .admin-control-head,
.app-shell > #profileView .mindex-settings-card,
.app-shell > #settingsView .mindex-settings-card,
.app-shell > #adminView .admin-control-panel,
.app-shell > #premiumView .premium-card,
.app-shell > #premiumView .hub-card,
.app-shell > #profileView .profile-security-card,
.app-shell > #profileView .profile-avatar-card,
.app-shell > #settingsView .settings-section,
.app-shell > #adminView .settings-section,
.app-shell > #premiumView .settings-section {
  border-radius: 3px !important;
}

.app-shell > #profileView button,
.app-shell > #settingsView button,
.app-shell > #adminView button,
.app-shell > #premiumView button,
.app-shell > #profileView input:not([type="checkbox"]):not([type="range"]),
.app-shell > #settingsView input:not([type="checkbox"]):not([type="range"]),
.app-shell > #adminView input:not([type="checkbox"]):not([type="range"]),
.app-shell > #premiumView input:not([type="checkbox"]):not([type="range"]),
.app-shell > #profileView select,
.app-shell > #settingsView select,
.app-shell > #adminView select,
.app-shell > #premiumView select,
.app-shell > #profileView textarea,
.app-shell > #settingsView textarea,
.app-shell > #adminView textarea,
.app-shell > #premiumView textarea {
  border-radius: 3px !important;
}

.app-shell > #profileView .avatar-preview,
.app-shell > #profileView .profile-avatar-preview,
.app-shell > #profileView .avatar-large {
  border-radius: 4px !important;
}

.app-shell > #profileView :is(.card, .panel, .section, .settings-row, .toggle-grid, .toggle-card, .setting-card, .mindex-card, .mindex-wide-card, .profile-security-card, .profile-avatar-card, .color-picker-panel, .language-grid, .notification-row, .admin-section, .admin-card, .role-card, .permission-card),
.app-shell > #settingsView :is(.card, .panel, .section, .settings-row, .toggle-grid, .toggle-card, .setting-card, .mindex-card, .mindex-wide-card, .color-picker-panel, .language-grid, .notification-row, .admin-section, .admin-card, .role-card, .permission-card),
.app-shell > #adminView :is(.card, .panel, .section, .settings-row, .toggle-grid, .toggle-card, .setting-card, .mindex-card, .mindex-wide-card, .color-picker-panel, .language-grid, .notification-row, .admin-section, .admin-card, .role-card, .permission-card),
.app-shell > #premiumView :is(.card, .panel, .section, .settings-row, .toggle-grid, .toggle-card, .setting-card, .mindex-card, .mindex-wide-card, .premium-card, .premium-feature, .premium-plan, .color-picker-panel, .language-grid, .notification-row, .admin-section, .admin-card, .role-card, .permission-card) {
  border-radius: 3px !important;
}

.app-shell > #profileView :is(.pill, .badge, .chip, .tag),
.app-shell > #settingsView :is(.pill, .badge, .chip, .tag),
.app-shell > #adminView :is(.pill, .badge, .chip, .tag),
.app-shell > #premiumView :is(.pill, .badge, .chip, .tag) {
  border-radius: 3px !important;
}

/* Hard square pass for internal pages: no rounded card UI inside Profile/Settings/Premium/Admin. */
.app-shell > #profileView,
.app-shell > #settingsView,
.app-shell > #premiumView,
.app-shell > #adminView,
.app-shell > #profileView *,
.app-shell > #settingsView *,
.app-shell > #premiumView *,
.app-shell > #adminView * {
  border-radius: 2px !important;
}

.master-module-head {
  border-left: 3px solid #ffd32a;
}

.master-module-tools,
.master-module-tabs,
.master-module-pager,
.leaderboard-title {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1680px;
  margin: 0 auto 10px;
}

.master-module-tools {
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid rgba(95, 143, 176, .62);
  background: rgba(20, 35, 49, .72);
}

.marketplace-search-control {
  flex: 1 1 280px;
}

.marketplace-search-control input {
  min-height: 34px;
  width: 100%;
  border: 1px solid rgba(104, 157, 194, .72);
  background: #132638;
  color: #eaf7ff;
  padding: 7px 10px;
  outline: none;
}

.marketplace-search-control input:focus,
.master-module-tools select:focus {
  border-color: #ffd32a;
  box-shadow: 0 0 0 1px rgba(255, 211, 42, .18), 0 0 16px rgba(94, 190, 255, .1);
}

.mindex-market-tabs {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}

.mindex-market-tabs button {
  min-height: 34px;
  border: 1px solid rgba(96, 146, 182, .75);
  background: linear-gradient(180deg, #263b50, #1a2d40);
  color: #f4fbff;
  padding: 0 13px;
  font-weight: 900;
  cursor: pointer;
}

.mindex-market-tabs button.active {
  border-color: #ffd32a;
  box-shadow: inset 3px 0 0 #ffd32a, 0 0 14px rgba(255, 211, 42, .12);
}

.master-module-tools label,
.support-ticket-form label {
  display: grid;
  gap: 5px;
  color: #9fd7ff;
  font-size: 12px;
  font-weight: 800;
}

.master-module-tools select,
.support-ticket-form select,
.support-ticket-form input,
.support-ticket-form textarea {
  min-height: 34px;
  border: 1px solid rgba(104, 157, 194, .72);
  background: #132638;
  color: #eaf7ff;
  padding: 7px 9px;
  outline: none;
}

.master-module-tabs {
  flex-wrap: wrap;
}

.master-module-tabs button,
.master-module-pager button {
  min-height: 34px;
  border: 1px solid rgba(96, 146, 182, .75);
  background: linear-gradient(180deg, #263b50, #1a2d40);
  color: #f4fbff;
  padding: 0 13px;
  font-weight: 900;
  cursor: pointer;
}

.master-module-tabs button.active,
.master-module-pager button:not(:disabled):hover {
  border-color: #ffd32a;
  box-shadow: inset 3px 0 0 #ffd32a, 0 0 14px rgba(255, 211, 42, .12);
}

.master-module-pager {
  justify-content: center;
  margin-top: 10px;
}

.master-module-pager span,
.module-status {
  color: #a9c6dd;
  font-weight: 800;
}

.master-module-panel,
.marketplace-table-panel,
.support-layout {
  max-width: 1680px;
  margin: 0 auto;
}

.marketplace-table-panel,
.support-ticket-card,
.support-ticket-form,
.master-module-panel {
  border: 1px solid rgba(84, 132, 168, .68);
  background: linear-gradient(180deg, rgba(32, 53, 72, .94), rgba(23, 40, 57, .96));
  box-shadow: inset 0 0 28px rgba(88, 190, 255, .035);
}

.marketplace-table-panel {
  overflow-x: auto;
  overflow-y: hidden;
}

.marketplace-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(93, 151, 194, .42);
  background: linear-gradient(180deg, rgba(25, 45, 63, .88), rgba(15, 29, 43, .9));
}

.marketplace-stat-card {
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid rgba(88, 142, 181, .58);
  background: linear-gradient(180deg, rgba(27, 49, 69, .92), rgba(14, 29, 43, .96));
  box-shadow: inset 3px 0 0 rgba(85, 198, 255, .45);
}

.marketplace-stat-card span {
  display: block;
  color: #9ed4fa;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.marketplace-stat-card strong {
  display: block;
  margin-top: 5px;
  color: #f4fbff;
  font-size: 17px;
  font-weight: 950;
}

.marketplace-stat-card.accent {
  box-shadow: inset 3px 0 0 #ffd32a;
}

.marketplace-stat-card.accent strong {
  color: #38ff9b;
}

.marketplace-table-shell {
  min-width: 880px;
}

.marketplace-auction-body {
  min-width: 880px;
}

.marketplace-auction-head,
.marketplace-auction-row {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(310px, 2.45fr) minmax(70px, .45fr) minmax(105px, .7fr) minmax(105px, .65fr) minmax(112px, .65fr);
  align-items: center;
  gap: 10px;
  min-width: 880px;
}

.marketplace-auction-head {
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(98, 154, 197, .72);
  background: linear-gradient(180deg, rgba(33, 56, 76, .96), rgba(21, 38, 55, .98));
  color: #83d7ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.marketplace-auction-row {
  min-height: 62px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(90, 137, 170, .36);
  color: #e8f7ff;
  background: linear-gradient(90deg, rgba(17, 33, 48, .78), rgba(19, 38, 55, .66));
}

.marketplace-auction-row:nth-child(even) {
  background: linear-gradient(90deg, rgba(29, 52, 72, .62), rgba(20, 40, 58, .52));
}

.marketplace-auction-row:hover {
  background: rgba(42, 70, 93, .48);
}

.marketplace-auction-row.is-owned {
  box-shadow: inset 3px 0 0 rgba(255, 211, 42, .9);
}

.marketplace-seller {
  min-width: 0;
  overflow: hidden;
}

.marketplace-seller strong {
  display: block;
  overflow: hidden;
  color: #f4fbff;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-seller small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #91b6cd;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-auction-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.marketplace-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 211, 42, .45);
  background: rgba(5, 16, 25, .55);
}

.marketplace-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.marketplace-icon i {
  color: #9fd7ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.marketplace-item-copy {
  min-width: 0;
}

.marketplace-item-copy strong,
.support-ticket-card strong {
  display: block;
  color: #f4fbff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-item-copy strong em {
  margin-left: 5px;
  color: #7dff95;
  font-style: normal;
}

.marketplace-item-copy small {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.marketplace-item-copy span,
.marketplace-item-copy small,
.support-ticket-card span,
.support-ticket-card small {
  color: #a9c6dd;
  font-size: 12px;
}

.marketplace-grade {
  color: #ffd32a;
}

.marketplace-grade.muted {
  color: #7f91a3;
}

.marketplace-count {
  overflow: hidden;
  color: #f4fbff;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-token-price {
  text-align: right;
  color: #a9c6dd;
}

.marketplace-token-price b,
.metric-cell {
  color: #38ff9b;
}

.marketplace-token-price small {
  display: block;
  font-size: 11px;
}

.marketplace-status-cell {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.marketplace-status-cell small {
  color: #91b6cd;
  font-size: 11px;
  font-weight: 800;
}

.market-status-badge {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(117, 168, 204, .5);
  background: rgba(17, 33, 48, .9);
  color: #dceeff;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.market-status-badge.available {
  border-color: rgba(56, 255, 155, .45);
  color: #38ff9b;
}

.market-status-badge.owned {
  border-color: rgba(255, 211, 42, .68);
  color: #ffd32a;
}

.market-status-badge.expired {
  border-color: rgba(255, 104, 104, .52);
  color: #ff7777;
}

.marketplace-action-cell {
  text-align: right;
}

.marketplace-action-btn {
  min-height: 28px;
  border: 1px solid rgba(96, 146, 182, .75);
  background: linear-gradient(180deg, #33475c, #22384d);
  color: #f4fbff;
  padding: 0 10px;
  font-weight: 900;
  cursor: pointer;
}

.marketplace-action-btn:not(:disabled):hover {
  border-color: #ffd32a;
  background: linear-gradient(180deg, #67c4ee, #2688bb);
  color: #061522;
  box-shadow: 0 0 14px rgba(103, 196, 238, .2);
}

.marketplace-action-btn:disabled {
  opacity: .76;
  cursor: default;
}

.marketplace-empty-filter {
  margin: 12px;
}

@media (max-width: 1180px) {
  .marketplace-dashboard {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

/* Master Account icon parity: use FontAwesome icons, not encoded pseudo symbols. */
.module-tab::before,
.side-nav-group .tab::before,
.admin-sidebar-button::before,
.side-action::before,
.game-account-actions button::before,
.dashboard-character-actions button::before {
  content: none !important;
  display: none !important;
}

.nav-icon,
.dashboard-character-actions button .fa,
.game-account-actions button .fa,
.character-detail-tabs .fa {
  width: 15px;
  min-width: 15px;
  margin-right: 6px;
  color: #ffc928;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 201, 40, .18);
}

.side-nav-group .tab .nav-icon {
  color: #8edcff;
}

.side-nav-group .tab:hover .nav-icon,
.side-nav-group .tab.active .nav-icon,
#adminSidebarBtn.admin-sidebar-button .nav-icon,
.module-tab.premium-module .nav-icon,
.module-tab.admin-module .nav-icon {
  color: #ffc928;
}

.dashboard-character-actions button,
.game-account-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.dashboard-character-actions button .fa-archive,
.dashboard-character-actions button .fa-magic,
.dashboard-character-actions button .fa-bar-chart {
  color: #ffc928;
}

.dashboard-character-actions button .fa-user-plus,
.dashboard-character-actions button .fa-location-arrow {
  color: #8edcff;
}

.game-account-actions button .fa {
  color: #ffc928;
}

.leaderboard-title {
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(84, 132, 168, .68);
  background: rgba(18, 33, 48, .72);
}

.leaderboard-title h3 {
  margin: 0;
  color: #f4fbff;
}

.master-table-wrap {
  overflow: auto;
}

.master-module-table {
  width: 100%;
  border-collapse: collapse;
  color: #e8f7ff;
  font-size: 12px;
}

.master-module-table th,
.master-module-table td {
  border-bottom: 1px solid rgba(90, 137, 170, .36);
  padding: 9px 10px;
  text-align: left;
}

.master-module-table th {
  color: #79d5ff;
  text-transform: uppercase;
}

.master-module-table td:first-child span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border: 1px solid rgba(125, 194, 245, .55);
  background: rgba(8, 22, 34, .62);
  font-weight: 900;
}

.rank-jewels {
  display: flex;
  gap: 5px;
  align-items: center;
}

.rank-jewels img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.support-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 12px;
}

.support-ticket-form {
  display: grid;
  gap: 10px;
  padding: 12px;
}

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

.support-ticket-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.support-ticket-card {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-left: 3px solid #ffd32a;
}

.support-ticket-card.status-0 {
  border-left-color: #7f91a3;
}

.support-ticket-card.status-2 {
  border-left-color: #38ff9b;
}

.module-loading {
  padding: 18px;
  border: 1px solid rgba(84, 132, 168, .68);
  background: linear-gradient(90deg, rgba(23, 39, 55, .9), rgba(41, 73, 97, .85), rgba(23, 39, 55, .9));
  color: #d8f4ff;
  font-weight: 900;
}

/* Final chat tab polish: readable unread counters and active state without the old yellow underline. */
.app-shell .chat-channel-strip,
.app-shell .chat-channels {
  overflow: visible !important;
}

.app-shell .chat-channel {
  overflow: visible;
  isolation: isolate;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.app-shell .chat-channel.active {
  color: #f7fbff !important;
  border-color: rgba(var(--tab-relation-rgb, 120, 210, 255), .86) !important;
  background:
    linear-gradient(180deg, rgba(var(--tab-relation-rgb, 120, 210, 255), .22), rgba(21, 42, 61, .96)),
    linear-gradient(180deg, rgba(36, 58, 78, .96), rgba(16, 33, 50, .98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    inset 3px 0 0 rgba(var(--tab-relation-rgb, 120, 210, 255), .9),
    0 0 14px rgba(var(--tab-relation-rgb, 120, 210, 255), .13) !important;
  transform: translateY(-1px);
}

.app-shell .chat-channel.relation-general { --tab-relation-rgb: 57, 163, 255; }
.app-shell .chat-channel.relation-all { --tab-relation-rgb: 120, 210, 255; }
.app-shell .chat-channel.relation-trade { --tab-relation-rgb: 238, 173, 94; }
.app-shell .chat-channel.relation-party { --tab-relation-rgb: 45, 220, 118; }
.app-shell .chat-channel.relation-clan { --tab-relation-rgb: 154, 91, 255; }
.app-shell .chat-channel.relation-alliance { --tab-relation-rgb: 185, 255, 92; }
.app-shell .chat-channel.relation-direct { --tab-relation-rgb: 192, 73, 134; }

.app-shell .chat-channel.active::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 3px;
  background: radial-gradient(circle at 18% 50%, rgba(var(--tab-relation-rgb, 120, 210, 255), .28), transparent 58%);
  opacity: .7;
  pointer-events: none;
}

.app-shell .chat-unread-badge {
  top: -9px !important;
  right: -4px !important;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  line-height: 20px;
  font-size: 11px;
  z-index: 12;
}

.app-shell .direct-dock-chip .chat-unread-badge {
  top: -8px !important;
  right: -6px !important;
}

.messages-frame .chat-conversation-header {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  width: 100%;
  padding: 6px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(var(--conversation-rgb, 120, 210, 255), .22);
  background:
    linear-gradient(90deg, rgba(var(--conversation-rgb, 120, 210, 255), .10), transparent 42%),
    linear-gradient(180deg, rgba(13, 28, 44, .98), rgba(13, 28, 44, .86));
  box-shadow: 0 8px 18px rgba(4, 13, 24, .18);
  backdrop-filter: blur(7px);
}

.messages-frame .chat-conversation-header[data-relationship="general"] { --conversation-rgb: 57, 163, 255; }
.messages-frame .chat-conversation-header[data-relationship="all"] { --conversation-rgb: 120, 210, 255; }
.messages-frame .chat-conversation-header[data-relationship="trade"] { --conversation-rgb: 238, 173, 94; }
.messages-frame .chat-conversation-header[data-relationship="party"] { --conversation-rgb: 45, 220, 118; }
.messages-frame .chat-conversation-header[data-relationship="clan"] { --conversation-rgb: 154, 91, 255; }
.messages-frame .chat-conversation-header[data-relationship="alliance"] { --conversation-rgb: 185, 255, 92; }
.messages-frame .chat-conversation-header[data-relationship="direct"] { --conversation-rgb: 192, 73, 134; }

.chat-conversation-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chat-conversation-title strong {
  max-width: min(420px, 48vw);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #f3fbff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .15px;
}

.chat-conversation-mark {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 2px;
  background: rgb(var(--conversation-rgb, 120, 210, 255));
  box-shadow: 0 0 10px rgba(var(--conversation-rgb, 120, 210, 255), .55);
}

.chat-conversation-meta {
  flex: 0 1 auto;
  color: #9fbed2;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.messages-frame .chat-history-loader {
  top: 34px !important;
}

.app-shell .direct-dock-chip {
  overflow: visible;
}

.app-shell .direct-dock-chip.relation-direct {
  --tab-relation-rgb: 192, 73, 134;
  --tab-relation-rgb-2: 255, 130, 190;
  --tab-relation-accent: #c04986;
}

.app-shell .direct-dock-chip.has-unread:not(.active) {
  border-color: rgba(255, 215, 86, .82) !important;
  background:
    linear-gradient(90deg, rgba(255, 201, 40, .18), transparent 52%),
    linear-gradient(180deg, rgba(40, 61, 80, .98), rgba(21, 39, 56, .99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    inset 3px 0 0 rgba(255, 201, 40, .88),
    0 0 18px rgba(255, 201, 40, .16) !important;
}

.app-shell .direct-dock-chip.active {
  color: #f7fbff !important;
  border-color: rgba(var(--tab-relation-rgb, 120, 210, 255), .82) !important;
  background:
    linear-gradient(90deg, rgba(var(--tab-relation-rgb, 120, 210, 255), .16), transparent 58%),
    linear-gradient(180deg, rgba(35, 58, 78, .99), rgba(19, 38, 56, .99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    inset 3px 0 0 rgba(var(--tab-relation-rgb, 120, 210, 255), .88),
    0 0 16px rgba(var(--tab-relation-rgb, 120, 210, 255), .13) !important;
}

.app-shell .direct-dock-chip.active strong {
  color: #ffffff;
}

.app-shell .direct-dock-chip.has-unread:not(.active) strong {
  color: #ffe28a;
}

@media (max-width: 980px) {
  .support-layout {
    grid-template-columns: 1fr;
  }

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