:root {
  --glass-bg: #edf2f0;
  --glass-surface: rgba(255, 255, 255, .76);
  --glass-surface-strong: rgba(255, 255, 255, .9);
  --glass-line: rgba(255, 255, 255, .84);
  --glass-edge: rgba(123, 148, 137, .23);
  --glass-shadow: 0 14px 38px rgba(29, 50, 42, .08), 0 2px 8px rgba(29, 50, 42, .04);
  --glass-shadow-raised: 0 20px 52px rgba(25, 48, 39, .14), 0 4px 12px rgba(25, 48, 39, .06);
}

html,
body {
  background-color: var(--glass-bg);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 118px 0 rgba(52, 121, 98, .055), inset 0 -140px 0 rgba(57, 94, 130, .035);
}

.topbar,
.creator-topbar {
  background: rgba(247, 250, 248, .76);
  border-color: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 30px rgba(25, 48, 39, .055), inset 0 -1px rgba(111, 138, 126, .16);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.sidebar {
  background: rgba(17, 34, 29, .96);
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 18px 0 48px rgba(20, 38, 32, .12);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}

.brand,
.sidebar-foot {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .018);
}

.nav-list {
  background: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.nav-group {
  border: 1px solid rgba(255, 255, 255, .04);
  background: rgba(255, 255, 255, .025);
}

.nav-group-overview {
  border-color: rgba(84, 205, 162, .13);
  background: rgba(84, 205, 162, .075);
}

.nav-item:hover {
  background: rgba(255, 255, 255, .065);
}

.nav-item.active {
  background: rgba(78, 139, 117, .24);
  border: 1px solid rgba(113, 222, 183, .12);
  box-shadow: inset 3px 0 #63d8ae, 0 9px 22px rgba(5, 18, 13, .13);
}

.content,
.creator-main {
  position: relative;
}

.stat-card,
.panel,
.asset-card,
.stage-row,
.platform-card,
.settings-shell,
.user-table-panel,
.creator-stat,
.creator-panel,
.work-card,
.info-card,
.revenue-card,
.action-banner,
.creator-platform-account-card {
  background: var(--glass-surface);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(112, 139, 127, .1);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.stat-card,
.creator-stat {
  position: relative;
  overflow: hidden;
}

.stat-card::before,
.creator-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(28, 135, 104, .72);
}

.stat-card:hover,
.asset-card:hover,
.platform-card:hover,
.creator-stat:hover,
.work-card:hover,
.info-card:hover,
.creator-platform-account-card:hover {
  transform: translateY(-2px);
  border-color: rgba(101, 145, 126, .34);
  box-shadow: var(--glass-shadow-raised), inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.stat-card,
.platform-card,
.creator-stat,
.info-card,
.creator-platform-account-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.panel-head,
.modal-head,
.modal-foot,
.drawer-head,
.drawer-foot {
  border-color: rgba(124, 148, 137, .17);
}

.global-search,
.search-field,
.search-box,
.filter-select,
.filter-bar select,
.field input,
.field select,
.field textarea,
.settings-form input,
.settings-form select,
.settings-form textarea {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(116, 142, 130, .22);
  box-shadow: inset 0 1px 2px rgba(22, 45, 36, .025);
}

.global-search:focus-within,
.search-field:focus-within,
.search-box:focus-within {
  border-color: rgba(36, 139, 106, .48);
  box-shadow: 0 0 0 3px rgba(20, 122, 98, .08), inset 0 1px 2px rgba(22, 45, 36, .025);
}

.btn,
.button,
.portal-switch,
.language-toggle,
.admin-link {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(111, 139, 126, .24);
  box-shadow: 0 4px 12px rgba(32, 54, 45, .045), inset 0 1px rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn.primary,
.button.primary,
.submit-button {
  background: #147a62;
  border-color: #147a62;
  box-shadow: 0 9px 20px rgba(20, 122, 98, .2), inset 0 1px rgba(255, 255, 255, .16);
}

.icon-btn:hover,
.icon-button:hover {
  background: rgba(255, 255, 255, .65);
  box-shadow: inset 0 0 0 1px rgba(111, 139, 126, .14);
}

.data-table th {
  background: rgba(240, 246, 243, .72);
  border-color: rgba(120, 146, 134, .17);
}

.data-table td,
.work-row,
.notification,
.contract-item,
.check-row,
.payout-row {
  border-color: rgba(124, 148, 137, .14);
}

.data-table tbody tr:hover,
.work-row:hover {
  background: rgba(241, 248, 245, .62);
}

.settings-tabs {
  background: rgba(241, 246, 243, .56);
  border-right-color: rgba(117, 143, 131, .16);
}

.settings-tabs button {
  border: 1px solid transparent;
}

.settings-tabs button:hover {
  background: rgba(255, 255, 255, .62);
}

.settings-tabs button.active {
  background: rgba(20, 122, 98, .92);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 10px 24px rgba(20, 122, 98, .2), inset 0 1px rgba(255, 255, 255, .16);
}

.settings-provider-row,
.setting-row,
.settings-enable,
.email-test-box,
.review-block,
.creator-linked-account {
  background: rgba(255, 255, 255, .58);
  border-color: rgba(116, 142, 130, .18);
}

.modal-backdrop,
.drawer-backdrop {
  background: rgba(14, 26, 21, .38);
  backdrop-filter: blur(9px) saturate(110%);
  -webkit-backdrop-filter: blur(9px) saturate(110%);
}

.modal,
.drawer,
.creator-modal,
.creator-profile-menu,
.profile-menu {
  background: var(--glass-surface-strong);
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 28px 75px rgba(13, 30, 23, .22), inset 0 0 0 1px rgba(100, 130, 116, .08);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
}

.creator-announcement,
.toast,
.creator-toast {
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: var(--glass-shadow-raised);
}

.creator-login-page,
.admin-login-page {
  background: #e9efec;
  box-shadow: inset 0 130px rgba(33, 113, 87, .055), inset 0 -150px rgba(60, 97, 133, .035);
}

.creator-login-card,
.admin-login-card {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 30px 80px rgba(26, 50, 40, .15), inset 0 0 0 1px rgba(104, 135, 120, .1);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
}

.creator-login-form input,
.admin-login-form input:not([type=checkbox]),
.captcha-image,
.captcha-refresh,
.google-login-button {
  background: rgba(255, 255, 255, .75);
  border-color: rgba(111, 139, 126, .25);
}

/* Keep the creator workspace stable at browser zoom and intermediate widths. */
.creator-topbar,
.creator-main,
.creator-footer,
.creator-grid,
.creator-panel,
.creator-panel > *,
.creator-stats,
.creator-stat,
.works-list,
.work-row,
.work-main,
.filter-bar,
.field {
  min-width: 0;
}

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

.creator-topbar {
  width: 100%;
}

.creator-nav {
  min-width: 0;
}

.creator-nav button,
.creator-actions,
.head-actions,
.button,
.status {
  flex-shrink: 0;
}

.panel-head > div,
.work-main > div,
.creator-platform-account-head > div {
  min-width: 0;
}

.panel-head h2,
.panel-head p,
.work-main b,
.work-main small,
.creator-platform-account-head h3,
.creator-platform-account-head p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-bar select,
.field select,
.settings-form select {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.creator-profile-menu {
  max-width: calc(100vw - 24px);
}

@media (max-width: 1120px) {
  .creator-topbar {
    padding-inline: 18px;
  }

  .creator-brand span {
    display: none;
  }

  .creator-nav {
    margin-left: 22px;
  }

  .creator-nav button {
    padding-inline: 8px;
  }
}

@media (max-width: 900px) {
  .creator-nav,
  .creator-profile b,
  .creator-profile > svg {
    display: none;
  }

  .mobile-nav-button {
    display: grid;
  }

  .mobile-nav {
    position: fixed;
    z-index: 35;
    top: 68px;
    left: 0;
    right: 0;
    padding: 8px 16px 14px;
    background: rgba(248, 250, 249, .96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 22px rgba(20, 30, 25, .08);
  }

  .mobile-nav.open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .mobile-nav button,
  .mobile-nav a {
    min-width: 0;
    min-height: 37px;
    overflow: hidden;
    padding: 0 10px;
    color: #536159;
    background: #f7f9f7;
    border: 0;
    border-radius: 4px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .creator-topbar,
  .topbar,
  .mobile-nav {
    background: rgba(248, 250, 249, .91);
  }

  .stat-card,
  .panel,
  .settings-shell,
  .creator-stat,
  .creator-panel,
  .work-card,
  .info-card,
  .revenue-card {
    background: rgba(255, 255, 255, .86);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .creator-topbar,
  .stat-card,
  .panel,
  .asset-card,
  .settings-shell,
  .creator-stat,
  .creator-panel,
  .work-card,
  .info-card,
  .revenue-card,
  .creator-login-card,
  .admin-login-card,
  .modal,
  .drawer,
  .creator-modal {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Dialogs remain readable without an opaque click mask. */
.modal-backdrop,
.drawer-backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}