:root {
  --bg: #080808;
  --sidebar: #090909;
  --panel: #111111;
  --panel-soft: #161616;
  --panel-strong: #1a1a1a;
  --control: #0f0f0f;
  --control-2: #151515;
  --control-hover: #202020;
  --ink: #f4f1e8;
  --muted: #aaa59a;
  --dim: #747066;
  --line: rgba(244, 241, 232, 0.12);
  --purple: #7dd3fc;
  --purple-dark: #10202a;
  --purple-mid: #142631;
  --pink: #f2bf5a;
  --green: #9ae66e;
  --green-dark: #1f3219;
  --blue: #7dd3fc;
  --danger: #ff6d84;
}

html {
  color-scheme: dark;
}

body {
  background:
    linear-gradient(90deg, rgba(244, 241, 232, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(244, 241, 232, 0.022) 1px, transparent 1px),
    #080808 !important;
  background-size: 96px 96px, 96px 96px, auto !important;
  color: var(--ink) !important;
  font-weight: 760;
}

body::before {
  background:
    linear-gradient(120deg, rgba(125, 211, 252, 0.07), transparent 34%),
    linear-gradient(300deg, rgba(242, 191, 90, 0.055), transparent 30%) !important;
  background-size: auto !important;
  opacity: 1 !important;
}

body::after {
  display: none !important;
}

a,
button {
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

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

input,
textarea,
select {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #0d0d0d !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(244, 241, 232, 0.42) !important;
}

.dashboard-shell {
  grid-template-columns: 280px minmax(0, 1fr) !important;
}

.sidebar {
  border-right: 1px solid var(--line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 40%),
    #090909 !important;
  box-shadow: none !important;
}

.brand {
  letter-spacing: 0 !important;
}

.brand-logo {
  border-radius: 8px !important;
  filter: none !important;
}

.account-dropdown summary,
.main-nav-link,
.account-subnav a,
.side-card,
.share-button,
.account-chip,
.workspace-header,
.overview-identity-card,
.overview-status-card,
.overview-grid article,
.reaction-overview article,
.profile-progress-card,
.profile-tools,
.device-chart-card,
.views-chart-card,
.insight-card,
.analytics-card,
.analytics-panel,
.links-panel,
.link-card,
.settings-panel,
.settings-card,
.badge-card,
.template-card,
.verification-card,
.admin-card,
.admin-panel,
.auth-card,
.auth-preview-card {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(17, 17, 17, 0.86) !important;
  box-shadow: none !important;
}

.account-dropdown summary {
  grid-template-columns: 26px 1fr 20px !important;
  background:
    linear-gradient(180deg, rgba(125, 211, 252, 0.12), rgba(255, 255, 255, 0.025)),
    #101010 !important;
}

.main-nav-link {
  min-height: 46px !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.main-nav-link:hover,
.main-nav-link.active,
.account-subnav a:hover,
.account-subnav a.active {
  border-color: rgba(125, 211, 252, 0.26) !important;
  background: rgba(125, 211, 252, 0.09) !important;
  color: #ffffff !important;
}

.account-subnav {
  padding-left: 44px !important;
}

.account-subnav a {
  min-height: 32px !important;
  padding: 0 10px !important;
  color: var(--muted) !important;
}

.sidebar[data-shared-sidebar="ready"] .side-card {
  border-radius: 8px !important;
  background: rgba(17, 17, 17, 0.86) !important;
}

.sidebar[data-shared-sidebar="ready"] .side-card a,
.sidebar[data-shared-sidebar="ready"] .side-card button,
.sidebar[data-shared-sidebar="ready"] .share-button,
.share-button {
  border-radius: 8px !important;
  background: #f4f1e8 !important;
  color: #080808 !important;
  box-shadow: none !important;
}

.sidebar[data-shared-sidebar="ready"] .side-card a.support-link,
.sidebar[data-shared-sidebar="ready"] .side-card button.support-link,
.sidebar[data-shared-sidebar="ready"] .side-card a:not(.support-link) {
  border-color: var(--line) !important;
  background: #151515 !important;
  color: var(--ink) !important;
}

.sidebar[data-shared-sidebar="ready"] .mini-icon,
.sidebar[data-shared-sidebar="ready"] .side-card span.mini-icon,
.sidebar[data-shared-sidebar="ready"] .share-button span {
  border-radius: 8px !important;
  background: rgba(244, 241, 232, 0.08) !important;
  color: currentColor !important;
}

.sidebar[data-shared-sidebar="ready"] .account-chip {
  border-radius: 8px !important;
  background: rgba(17, 17, 17, 0.86) !important;
}

.account-avatar,
.overview-avatar,
.preview-avatar,
.mini-avatar,
.badge-icon,
.template-preview {
  border-radius: 8px !important;
}

.workspace,
.links-workspace,
.settings-workspace,
.badges-workspace,
.templates-workspace,
.verification-workspace,
.analytics-workspace,
.admin-workspace {
  padding: 40px min(48px, 4vw) !important;
  overflow-x: hidden !important;
}

.overview-hero {
  grid-template-columns: minmax(320px, 1.4fr) minmax(220px, 0.8fr) minmax(220px, 0.8fr) !important;
}

.overview-grid,
.reaction-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.overview-hero,
.overview-grid,
.reaction-overview {
  max-width: 100% !important;
}

.active-links {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

.social-picker,
.platform-button,
.custom-url-button,
.link-modal,
.modal-overlay .link-modal {
  border-radius: 8px !important;
}

.platform-button,
.custom-url-button {
  border-color: var(--line) !important;
  background: rgba(17, 17, 17, 0.86) !important;
  box-shadow: none !important;
}

.platform-button:hover,
.custom-url-button:hover {
  border-color: rgba(125, 211, 252, 0.28) !important;
  background: rgba(125, 211, 252, 0.08) !important;
}

.workspace-header {
  align-items: end !important;
  margin-bottom: 28px !important;
  padding: 0 0 28px !important;
  border-width: 0 0 1px 0 !important;
  background: transparent !important;
}

.kicker,
.eyebrow,
.workspace-header .kicker,
.section-kicker {
  color: var(--blue) !important;
  letter-spacing: 0.14em !important;
}

.workspace-header h1,
.auth-copy h1,
.section-copy h2,
.overview-identity-card h2 {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

.workspace-subtitle,
.workspace-header p,
.auth-copy p:not(.kicker),
.side-card p,
.overview-grid small,
.reaction-overview small,
.setting-row span,
.template-card p,
.badge-card p {
  color: var(--muted) !important;
}

.header-actions a,
.header-actions button,
.primary-button,
.save-button,
.danger-button,
.auth-form button,
.auth-button,
.verification-card a,
.profile-tools a,
.profile-tools button,
.plans a {
  min-height: 42px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #f4f1e8 !important;
  color: #080808 !important;
  box-shadow: none !important;
  font-weight: 950 !important;
}

.header-actions a:hover,
.header-actions button:hover,
.primary-button:hover,
.save-button:hover,
.auth-form button:hover,
.auth-button:hover {
  transform: translateY(-1px);
  background: #ffffff !important;
}

.danger-button {
  background: rgba(255, 109, 132, 0.12) !important;
  color: #ffd9df !important;
  border-color: rgba(255, 109, 132, 0.28) !important;
}

.overview-identity-card,
.overview-status-card,
.overview-grid article,
.reaction-overview article,
.profile-progress-card,
.profile-tools,
.device-chart-card,
.views-chart-card,
.analytics-card,
.analytics-panel,
.links-panel,
.link-card,
.settings-panel,
.settings-card,
.badge-card,
.template-card,
.templates-hero,
.template-toolbar,
.verification-card,
.admin-card,
.admin-panel {
  background:
    linear-gradient(180deg, rgba(244, 241, 232, 0.035), rgba(244, 241, 232, 0.012)),
    #111111 !important;
}

.overview-grid article:nth-child(1),
.reaction-overview article:nth-child(1),
.template-card:nth-child(2n),
.badge-card:nth-child(3n) {
  border-color: rgba(125, 211, 252, 0.18) !important;
}

.overview-grid article:nth-child(2),
.reaction-overview article:nth-child(2),
.template-card:nth-child(3n),
.badge-card:nth-child(2n) {
  border-color: rgba(242, 191, 90, 0.18) !important;
}

.overview-grid b,
.reaction-overview b,
.analytics-card b,
.analytics-panel b,
.profile-progress-card b {
  color: var(--ink) !important;
}

.overview-mini-progress,
.progress-track,
.profile-completion-bar,
.completion-bar {
  border-radius: 8px !important;
  background: rgba(244, 241, 232, 0.08) !important;
}

.overview-mini-progress i,
.progress-track i,
.profile-completion-bar i,
.completion-bar i {
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--blue), var(--green)) !important;
}

.auth-shell {
  width: min(1180px, calc(100% - 48px)) !important;
}

.auth-card {
  padding: 28px !important;
}

.auth-preview-card {
  background:
    linear-gradient(180deg, rgba(244, 241, 232, 0.08), rgba(244, 241, 232, 0.02)),
    #151515 !important;
}

.auth-highlights span,
.preview-socials span,
.preview-reactions span,
.mini-badges b,
.overview-identity-card span,
.template-tab,
.founder-mode-note,
.badge-pill,
.status-pill {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(244, 241, 232, 0.055) !important;
  color: var(--ink) !important;
}

.templates-hero {
  background:
    linear-gradient(180deg, rgba(244, 241, 232, 0.04), rgba(244, 241, 232, 0.012)),
    #111111 !important;
}

.template-kicker {
  color: var(--blue) !important;
  letter-spacing: 0.14em !important;
}

.templates-hero .open-profile-button,
.template-card button,
.template-preview-dialog footer button,
.modal-save,
.modal-close,
.template-tab.active {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #f4f1e8 !important;
  color: #080808 !important;
  box-shadow: none !important;
}

.template-tab {
  background: transparent !important;
  color: var(--muted) !important;
}

.template-tab.active {
  color: #080808 !important;
}

.template-search-row {
  grid-template-columns: minmax(0, 1fr) 220px !important;
}

.template-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

.modal,
.dialog,
.toast,
.account-menu,
.topbar,
.search-wrap,
.layout .sidebar,
.content .hero,
.status-box,
.quick-card,
.doc-section,
.step-box,
.info-box,
.note,
.right-card,
.empty-state {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #111111 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46) !important;
}

.topbar {
  background: rgba(8, 8, 8, 0.88) !important;
  box-shadow: none !important;
}

.content .hero {
  background:
    linear-gradient(180deg, rgba(244, 241, 232, 0.04), rgba(244, 241, 232, 0.012)),
    #111111 !important;
}

.content .hero h1 {
  max-width: 620px !important;
  font-size: 64px !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.pill-link,
.nav-list a,
.tag {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(244, 241, 232, 0.055) !important;
  color: var(--ink) !important;
}

.pill-link.is-primary,
.nav-list a.is-active {
  background: #f4f1e8 !important;
  color: #080808 !important;
}

@media (max-width: 980px) {
  .dashboard-shell {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: relative !important;
    height: auto !important;
    min-width: 0 !important;
  }

  .workspace,
  .links-workspace,
  .settings-workspace,
  .badges-workspace,
  .templates-workspace,
  .verification-workspace,
  .analytics-workspace,
  .admin-workspace {
    padding: 26px 16px !important;
  }

  .overview-hero,
  .overview-grid,
  .reaction-overview {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 680px) {
  body {
    background-size: 64px 64px, 64px 64px, auto !important;
  }

  .auth-shell {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .workspace-header {
    align-items: flex-start !important;
  }

  .workspace-header h1,
  .auth-copy h1,
  .section-copy h2 {
    font-size: 42px !important;
    line-height: 1.02 !important;
  }

  .overview-hero,
  .overview-grid,
  .reaction-overview {
    grid-template-columns: 1fr !important;
  }
}