:root {
  --bg: #11131a;
  --panel: rgba(255, 253, 247, 0.97);
  --panel-soft: rgba(255, 248, 236, 0.14);
  --text: #101015;
  --muted: rgba(16, 16, 21, 0.64);
  --line: rgba(255, 248, 236, 0.16);
  --brand: #2948d8;
  --brand-dark: #087e86;
  --accent: #ef4f3e;
  --shadow: 0 26px 76px rgba(0, 0, 0, 0.26);
}

body { background: #11131a; }

.app-shell {
  background:
    radial-gradient(circle at 76% 10%, rgba(203, 184, 255, 0.18), transparent 28%),
    radial-gradient(circle at 18% 0%, rgba(239, 79, 62, 0.12), transparent 25%),
    linear-gradient(145deg, #11131a, #1f3b57 55%, #101015);
  color: #fff8ec;
}

.topbar {
  background: rgba(17, 19, 26, 0.88);
  border-bottom: 1px solid rgba(255, 248, 236, 0.16);
  color: #fff8ec;
}

.brand p,
.page-title .muted,
.board-header .muted,
.workspace-timer,
.read-summary { color: rgba(255, 248, 236, 0.86); }
.page-title,
.board-header { color: #fff8ec; }

.btn {
  background: linear-gradient(135deg, #2948d8, #087e86);
  border: 1px solid rgba(255, 248, 236, 0.18);
  border-radius: 7px;
  box-shadow: 0 0 22px rgba(41, 72, 216, 0.22), 0 16px 34px rgba(0, 0, 0, 0.26);
  color: #fff8ec;
}

.btn:hover {
  background: linear-gradient(135deg, #ef4f3e, #2948d8);
  box-shadow: 0 0 30px rgba(239, 79, 62, 0.24), 0 18px 38px rgba(0, 0, 0, 0.3);
}

.btn.secondary,
.icon-btn,
.account-trigger,
.share-pill {
  background: rgba(255, 248, 236, 0.1);
  border: 1px solid rgba(255, 248, 236, 0.24);
  color: #fff8ec;
}

.btn.secondary:hover,
.icon-btn:hover,
.account-trigger:hover,
.account-wrap.is-open .account-trigger,
.share-pill:hover {
  background: rgba(41, 72, 216, 0.24);
  border-color: rgba(255, 248, 236, 0.44);
}

.account-avatar { background: linear-gradient(135deg, #2948d8, #ef4f3e); }

.account-menu-panel,
.settings-menu {
  background: rgba(17, 19, 26, 0.98);
  border: 1px solid rgba(255, 248, 236, 0.18);
  box-shadow: 0 30px 82px rgba(0, 0, 0, 0.45), 0 0 34px rgba(41, 72, 216, 0.15);
  color: #fff8ec;
}

.settings-menu-title,
.account-menu-title,
.account-menu-head strong,
.account-menu-head span,
.account-menu-head em,
.account-menu-item,
.account-target,
.menu-item,
.account-target small,
.account-target em { color: rgba(255, 248, 236, 0.9); }

.account-menu-head,
.account-target,
.menu-item {
  background: rgba(255, 248, 236, 0.08);
  border: 1px solid rgba(255, 248, 236, 0.11);
}

.account-menu-icon,
.menu-icon { background: rgba(41, 72, 216, 0.3); color: #fff8ec; }
.account-menu-item:hover,
.account-target:hover,
.menu-item:hover { background: rgba(41, 72, 216, 0.28); color: #fff8ec; }

.modal { background: #fffdf7; color: #101015; }

.request-panel,
.workspace-card,
.card {
  background: rgba(255, 253, 247, 0.97);
  border: 1px solid rgba(255, 248, 236, 0.16);
  box-shadow: var(--shadow);
  color: #101015;
}

.column {
  background: rgba(255, 248, 236, 0.2);
  border-color: rgba(255, 248, 236, 0.26);
  color: #fff8ec;
}

.column .muted,
.column .count,
.column .add-card-btn { color: rgba(255, 248, 236, 0.86); }
.column-head { border-bottom: 1px solid rgba(255, 248, 236, 0.17); }
.workspace-card { border-top: 3px solid #2948d8; }
.request-panel { border-top: 3px solid #ef4f3e; }
.card:hover { border-color: rgba(41, 72, 216, 0.48); box-shadow: 0 0 30px rgba(41, 72, 216, 0.15), 0 22px 44px rgba(0, 0, 0, 0.2); }
.card.active-request-card,
.request-item { background: rgba(239, 79, 62, 0.12); border-color: rgba(239, 79, 62, 0.38); }
.badge { background: #101015; color: #fff8ec; }
.badge.planned { background: #ef4f3e; color: #fff8ec; }
.empty { background: rgba(255, 248, 236, 0.1); border-color: rgba(255, 248, 236, 0.22); color: rgba(255, 248, 236, 0.78); }
.modal .empty { background: rgba(247, 234, 215, 0.48); color: rgba(16, 16, 21, 0.68); }
.register-head { background: #101015; color: #fff8ec; }