/* Global dark glass product skin. */
:root {
  --glass-bg: rgba(16, 23, 28, 0.44);
  --glass-bg-soft: rgba(22, 31, 36, 0.36);
  --glass-bg-deep: rgba(9, 15, 19, 0.64);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-line-strong: rgba(255, 255, 255, 0.17);
  --glass-text: #f4f7f6;
  --glass-muted: #94a29e;
  --glass-shadow: 0 22px 54px rgba(0, 0, 0, 0.27);
}

html,
body {
  color: var(--glass-text);
  background-color: #0a1014;
}

body {
  background-image:
    linear-gradient(rgba(121, 151, 143, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 151, 143, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(194, 43, 122, 0.08), transparent 30%),
    linear-gradient(315deg, rgba(37, 143, 169, 0.08), transparent 34%),
    linear-gradient(180deg, #10161b, #080d11);
  background-size: 58px 58px, 58px 58px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

.app-shell,
.view-root {
  background: transparent;
}

.workspace {
  color: var(--glass-text);
  background: transparent;
}

.topbar {
  border: 1px solid var(--glass-line);
  color: var(--glass-text);
  background: rgba(13, 19, 24, 0.42);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(1.18);
}

.topbar h2,
.panel-header h3,
.panel h3,
.overview-profile h3 {
  color: var(--glass-text);
}

.topbar .eyebrow,
.panel-header p,
.overview-profile p,
.muted-text {
  color: var(--glass-muted);
}

.panel,
.overview-hero,
.metric-card,
.table-shell,
.referral-result,
.gift-attention,
.empty-state {
  border-color: var(--glass-line);
  color: var(--glass-text);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(24px) saturate(1.16);
}

.panel::before,
.overview-hero::after {
  opacity: 0.38;
}

.overview-hero {
  background:
    linear-gradient(110deg, rgba(203, 33, 127, 0.09), transparent 42%),
    linear-gradient(290deg, rgba(37, 160, 116, 0.08), transparent 44%),
    rgba(13, 20, 24, 0.4);
}

.overview-profile span,
.metric-label,
.metric-card small,
.metric-card p {
  color: var(--glass-muted);
}

.metric-card strong,
.metric-card h3,
.metric-card h4 {
  color: var(--glass-text);
}

.metric-card {
  background: rgba(20, 29, 34, 0.38) !important;
}

.metric-card.pink {
  border-color: rgba(225, 74, 153, 0.25);
  background: linear-gradient(145deg, rgba(205, 47, 130, 0.08), rgba(20, 29, 34, 0.36)) !important;
}

.metric-card.green {
  border-color: rgba(61, 199, 134, 0.23);
  background: linear-gradient(145deg, rgba(42, 169, 113, 0.08), rgba(20, 29, 34, 0.36)) !important;
}

.metric-card.gold {
  border-color: rgba(226, 180, 67, 0.23);
  background: linear-gradient(145deg, rgba(190, 142, 30, 0.08), rgba(20, 29, 34, 0.36)) !important;
}

.metric-card:nth-child(1) { border-color: rgba(225, 74, 153, 0.24); }
.metric-card:nth-child(2) { border-color: rgba(61, 199, 134, 0.22); }
.metric-card:nth-child(3) { border-color: rgba(83, 145, 213, 0.22); }
.metric-card:nth-child(4) { border-color: rgba(225, 74, 153, 0.18); }
.metric-card:nth-child(5) { border-color: rgba(226, 180, 67, 0.22); }

.overview-status,
.live-chip {
  border-color: rgba(66, 204, 137, 0.18);
  color: #79e8ac;
  background: rgba(45, 177, 112, 0.09);
}

.secondary-action,
.ghost-action,
.table-action,
.icon-action,
.refresh-action {
  border-color: var(--glass-line);
  color: #dce4e1;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.secondary-action:hover,
.ghost-action:hover,
.table-action:hover,
.icon-action:hover,
.refresh-action:hover {
  border-color: var(--glass-line-strong);
  color: white;
  background: rgba(255, 255, 255, 0.085);
}

.primary-action {
  border-color: rgba(235, 74, 160, 0.35);
  color: white;
  background: linear-gradient(135deg, #db2f89, #a51d68);
  box-shadow: 0 12px 28px rgba(184, 35, 111, 0.24), inset 0 1px rgba(255, 255, 255, 0.16);
}

.form-stack label,
.form-inline label,
.check-label {
  color: #abb7b3;
}

input,
select,
textarea,
.language-select {
  border-color: var(--glass-line);
  color: var(--glass-text);
  background: rgba(6, 12, 16, 0.52);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

input::placeholder,
textarea::placeholder {
  color: #687672;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(226, 67, 151, 0.42);
  background: rgba(8, 14, 18, 0.7);
  box-shadow: 0 0 0 3px rgba(203, 33, 127, 0.09);
}

.table-shell {
  overflow: auto;
  background: rgba(8, 14, 18, 0.42);
}

table {
  color: #dfe6e3;
}

thead,
thead tr {
  background: rgba(255, 255, 255, 0.035);
}

th {
  color: #84928e;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035) !important;
}

td {
  color: #dfe6e3;
  border-color: rgba(255, 255, 255, 0.065);
}

tbody tr {
  background: transparent;
}

tbody tr:hover,
.selected-board-row,
.gift-action-row {
  background: rgba(203, 33, 127, 0.055);
}

.notification-row,
.referral-link-row {
  border-color: var(--glass-line);
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.notification-row:hover,
.referral-link-row:hover {
  border-color: var(--glass-line-strong);
  background: rgba(255, 255, 255, 0.065);
}

.notification-row.is-read {
  opacity: 0.58;
}

.notification-row small,
.notification-row time,
.referral-link-meta,
.party-name small {
  color: var(--glass-muted);
}

.referral-link-main,
.referral-link-meta strong,
.party-name strong {
  color: var(--glass-text);
}

.token-box {
  border-color: rgba(62, 191, 130, 0.14);
  color: #8ce6b5;
  background: rgba(38, 148, 100, 0.07);
}

.empty-state {
  border-style: dashed;
  background: rgba(15, 22, 27, 0.38);
}

.empty-state strong { color: #d9e1de; }
.empty-state span { color: var(--glass-muted); }

.panel .board-meta div,
.overview-hero .board-meta div {
  border-color: var(--glass-line);
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.035) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.panel .board-meta small,
.overview-hero .board-meta small {
  color: var(--glass-muted);
}

.panel .board-meta strong,
.overview-hero .board-meta strong {
  color: var(--glass-text);
}

.status-pill {
  border-color: var(--glass-line);
  color: #b6c1bd;
  background: rgba(255, 255, 255, 0.055);
}

.status-pill.ok {
  border-color: rgba(71, 207, 142, 0.2);
  color: #7ce7ae;
  background: rgba(54, 181, 118, 0.09);
}

.status-pill.warn {
  border-color: rgba(226, 179, 65, 0.22);
  color: #efd17d;
  background: rgba(202, 149, 26, 0.09);
}

.status-pill.danger {
  border-color: rgba(241, 102, 102, 0.22);
  color: #ff9a9a;
  background: rgba(212, 65, 65, 0.09);
}

.account-popover {
  border-color: var(--glass-line);
  color: var(--glass-text);
  background: rgba(10, 16, 21, 0.9);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(26px) saturate(1.15);
}

.account-popover-head,
.language-control {
  color: var(--glass-muted);
}

.auth-screen {
  color: var(--glass-text);
  background:
    linear-gradient(rgba(94, 229, 173, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 229, 173, 0.025) 1px, transparent 1px),
    #0a1014;
  background-size: 54px 54px;
}

.brand-panel,
.auth-panel {
  border-color: var(--glass-line);
  background: rgba(15, 22, 27, 0.62);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
}

.brand-panel h1,
.auth-panel h2 {
  color: var(--glass-text);
}

.brand-metrics > div,
.segmented {
  border-color: var(--glass-line);
  background: rgba(255, 255, 255, 0.035);
}

.segment {
  color: #899792;
}

.segment.is-active {
  color: white;
  background: rgba(203, 33, 127, 0.18);
}

/* Board: remove the photo and inherit the same dark glass system. */
body[data-view="board"] .workspace,
body[data-view="board"] .board-panel {
  background: transparent;
}

body[data-view="board"] {
  background-color: #0a1014;
  background-image:
    linear-gradient(rgba(121, 151, 143, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 151, 143, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(194, 43, 122, 0.08), transparent 30%),
    linear-gradient(315deg, rgba(37, 143, 169, 0.08), transparent 34%),
    linear-gradient(180deg, #10161b, #080d11);
  background-size: 58px 58px, 58px 58px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

body[data-view="board"] .linux-board-scene {
  color: var(--glass-text);
  background: transparent;
}

body[data-view="board"] .linux-board-scene::after {
  display: none;
}

body[data-view="board"] .board-game-boot {
  display: none !important;
}

body[data-view="board"] .board-game-bar,
body[data-view="board"] .board-system-hud.board-control-deck {
  border-color: var(--glass-line);
  color: var(--glass-text);
  background: rgba(17, 25, 30, 0.42);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(26px) saturate(1.16);
}

body[data-view="board"] .game-board-identity strong,
body[data-view="board"] .board-control-deck .level-pass-body > strong,
body[data-view="board"] .board-control-deck .level-pass-value strong,
body[data-view="board"] .board-control-deck .board-meta strong,
body[data-view="board"] .topology-heading strong {
  color: var(--glass-text);
}

body[data-view="board"] .game-board-identity small,
body[data-view="board"] .board-control-deck .level-pass-serial,
body[data-view="board"] .board-control-deck .board-meta small,
body[data-view="board"] .topology-heading span,
body[data-view="board"] .topology-heading small {
  color: var(--glass-muted);
}

body[data-view="board"] .board-control-deck .level-pass {
  border-color: var(--glass-line);
  color: var(--glass-text);
  background:
    linear-gradient(105deg, rgba(218, 48, 136, 0.12), transparent 47%),
    linear-gradient(285deg, rgba(38, 169, 119, 0.1), transparent 46%);
}

body[data-view="board"] .board-control-deck .board-meta div {
  border-color: rgba(255, 255, 255, 0.075);
}

body[data-view="board"] .topology-heading {
  border-color: rgba(255, 255, 255, 0.09);
}

body[data-view="board"] .linux-board-scene .position-card,
body[data-view="board"] .linux-board-scene .position-card.legend,
body[data-view="board"] .linux-board-scene .position-card.left_builder,
body[data-view="board"] .linux-board-scene .position-card.right_builder,
body[data-view="board"] .linux-board-scene .position-card.empty {
  color: var(--glass-text);
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(18, 27, 32, 0.38);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(22px) saturate(1.18);
}

body[data-view="board"] .linux-board-scene .position-card.legend {
  border-color: rgba(225, 74, 153, 0.34);
  background: linear-gradient(135deg, rgba(216, 47, 135, 0.14), rgba(18, 27, 32, 0.48) 55%);
}

body[data-view="board"] .linux-board-scene .position-card.left_builder {
  border-color: rgba(48, 190, 126, 0.28);
  background: linear-gradient(140deg, rgba(40, 168, 120, 0.12), rgba(18, 27, 32, 0.48));
}

body[data-view="board"] .linux-board-scene .position-card.right_builder {
  border-color: rgba(56, 157, 199, 0.28);
  background: linear-gradient(220deg, rgba(49, 139, 180, 0.13), rgba(18, 27, 32, 0.48));
}

body[data-view="board"] .linux-board-scene .board-tree .position-user,
body[data-view="board"] .linux-board-scene .board-tree .position-user-button,
body[data-view="board"] .linux-board-scene .board-tree > .position-card.legend .position-user,
body[data-view="board"] .linux-board-scene .board-tree > .position-card.left_builder .position-user,
body[data-view="board"] .linux-board-scene .board-tree > .position-card.right_builder .position-user {
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--glass-text);
  background: rgba(5, 11, 15, 0.34);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

body[data-view="board"] .linux-board-scene .board-tree .position-user strong {
  color: var(--glass-text);
}

body[data-view="board"] .linux-board-scene .board-tree .position-user small {
  color: var(--glass-muted);
}

body[data-view="board"] .linux-board-scene .board-tree .status-pill {
  border-color: rgba(255, 255, 255, 0.09);
  color: #b3bfbb;
  background: rgba(255, 255, 255, 0.055);
}

body[data-view="board"] .linux-board-scene .board-tree .position-card.empty .avatar-mini {
  border-color: rgba(255, 255, 255, 0.08);
  color: #82908b;
  background: rgba(255, 255, 255, 0.045);
}

body[data-view="board"] .board-tree .position-state-icon {
  top: 50%;
  right: 7px;
  bottom: auto;
  left: auto;
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.86);
  font-size: 11px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.24);
  transform: translateY(-50%);
}

body[data-view="board"] .board-tree .position-user:has(.position-state-icon) {
  padding-right: 34px;
}

body[data-view="board"] .linux-board-scene .board-scene-progress > span {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.07);
}

body[data-view="board"] .linux-board-scene .board-scene-progress small,
body[data-view="board"] .linux-board-scene .board-scene-progress b {
  color: #a9b5b1;
}

dialog:not(.game-profile-dialog) {
  border-color: var(--glass-line);
  color: var(--glass-text);
  background: rgba(11, 17, 22, 0.92);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(28px);
}

@media (max-width: 620px) {
  .panel,
  .overview-hero,
  .metric-card,
  .table-shell {
    backdrop-filter: blur(18px) saturate(1.12);
  }
}