:root {
  --bg-0: #030717;
  --bg-1: #07112b;
  --bg-2: #0a1a43;
  --line: rgba(120, 162, 255, 0.2);
  --text: #eef3ff;
  --muted: #9cb3de;
  --panel: rgba(8, 20, 53, 0.78);
  --panel-strong: rgba(9, 26, 66, 0.88);
  --blue: #3d86ff;
  --blue-2: #1f5fd8;
  --cyan: #53d6ff;
  --ok: #62d9a0;
  --radius: 20px;
  --shadow: 0 20px 60px rgba(3, 8, 24, 0.65);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(1200px 800px at 82% 16%, rgba(67, 121, 255, 0.25), transparent 55%), linear-gradient(180deg, var(--bg-1), var(--bg-0));
  color: var(--text);
  font-family: "Manrope", "Segoe UI", sans-serif;
}

body {
  position: relative;
  overflow-x: hidden;
}

.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(110, 153, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 153, 255, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 48%, transparent 100%);
  pointer-events: none;
}

.bg-glow {
  position: fixed;
  width: 740px;
  height: 740px;
  right: -180px;
  top: -220px;
  background: radial-gradient(circle, rgba(75, 126, 255, 0.3), rgba(75, 126, 255, 0) 70%);
  filter: blur(8px);
  pointer-events: none;
}

.wrap {
  width: min(1180px, calc(100% - 2.2rem));
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.brand {
  color: var(--text);
  text-decoration: none;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  display: flex;
  gap: .55rem;
  align-items: center;
}

.brand-dot {
  color: var(--cyan);
  font-size: 1.05rem;
}

.nav {
  display: flex;
  gap: 1.1rem;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}

.nav a:hover { color: var(--text); }

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .68rem 1rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  box-shadow: 0 12px 26px rgba(22, 71, 175, 0.5);
}

.btn-ghost {
  border-color: rgba(106, 149, 255, 0.35);
  background: rgba(15, 31, 73, 0.55);
}

.btn-discord {
  background: linear-gradient(135deg, #3556c9, #2145af);
  border-color: rgba(132, 162, 255, .5);
}

.auth-box {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.auth-user {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .45rem .7rem;
  border-radius: 10px;
  background: rgba(9, 24, 64, .7);
  border: 1px solid rgba(125, 164, 255, .3);
  color: #c8dcff;
  font-size: .88rem;
  font-weight: 700;
}

.hero {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 1.3rem;
  align-items: center;
  padding: 1.2rem 0 2rem;
}

.eyebrow {
  width: fit-content;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(122, 170, 255, .35);
  color: var(--cyan);
  font-weight: 700;
  background: rgba(12, 28, 74, .65);
}

h1 {
  font-size: clamp(2rem, 4.1vw, 3.4rem);
  line-height: 1.07;
  margin: .8rem 0;
  max-width: 13ch;
}

.lead {
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: 1.1rem;
}

.hero-actions {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.login-card,
.panel {
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.login-card {
  padding: 1rem;
  max-width: 530px;
}

.login-card h2 { margin-top: .2rem; }

label {
  display: grid;
  gap: .4rem;
  margin: .55rem 0;
  color: #d9e4ff;
  font-weight: 600;
}

input, textarea, select {
  background: rgba(6, 15, 42, 0.86);
  border: 1px solid rgba(118, 157, 255, 0.36);
  color: var(--text);
  padding: .72rem .82rem;
  border-radius: 12px;
  outline: none;
  font-family: inherit;
}

textarea { min-height: 130px; resize: vertical; }

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin: .45rem 0 .8rem;
}

.form-row a { color: #7ea8ff; text-decoration: none; font-size: .9rem; }

.check {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin: 0;
}

.muted {
  color: var(--muted);
  font-size: .92rem;
}

.hero-art {
  min-height: 420px;
  display: grid;
  place-items: center;
  position: relative;
}

.orb {
  width: min(420px, 86%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 26%, rgba(130, 173, 255, .95), rgba(42, 90, 210, .72) 48%, rgba(15, 39, 110, .5) 70%),
    linear-gradient(145deg, rgba(32, 66, 164, .7), rgba(6, 17, 53, .7));
  box-shadow: 0 0 0 24px rgba(48, 92, 215, .14), 0 0 90px rgba(58, 109, 255, .55);
  animation: pulse 5s ease-in-out infinite;
}

.bot-face {
  position: absolute;
  width: min(280px, 60%);
  aspect-ratio: 1.15;
  border-radius: 42% 42% 45% 45%;
  background: linear-gradient(160deg, rgba(24, 38, 88, .96), rgba(8, 14, 38, .96));
  border: 1px solid rgba(141, 178, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.2rem;
}

.eye {
  width: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #8be8ff, #45c8ff 65%, #1686e0);
  box-shadow: 0 0 22px rgba(82, 210, 255, .95);
}

.float-card {
  position: absolute;
  padding: .5rem .78rem;
  border-radius: 12px;
  background: rgba(8, 22, 60, .78);
  border: 1px solid rgba(126, 163, 255, .35);
  color: #bdd4ff;
  font-weight: 700;
  font-size: .88rem;
  backdrop-filter: blur(8px);
}

.f1 { top: 18%; left: 8%; }
.f2 { bottom: 11%; right: 12%; }
.f3 { top: 52%; left: 4%; }

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 2.2rem;
}

.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

.panel {
  padding: 1rem;
}

.panel h3 { margin-top: .2rem; }

.panel a {
  color: #81adff;
  text-decoration: none;
  font-weight: 700;
}

.stat strong {
  display: block;
  font-size: 2rem;
  margin: .25rem 0;
}

.stat span { color: var(--muted); font-weight: 700; }

.stat small { color: var(--ok); font-weight: 700; }

.section-gap { padding: 1rem 0 2rem; }

.list-clean {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

.grid-2 {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full { grid-column: 1 / -1; }

.actions-inline {
  margin-top: .8rem;
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 320px; }
  .cards, .cards-2, .cards-3, .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .topbar { flex-wrap: wrap; gap: .5rem; }
  .nav { width: 100%; order: 3; overflow-x: auto; padding-bottom: .2rem; }
  .auth-box { width: 100%; }
  .auth-user { flex: 1; }
}

.topbar-actions { display: flex; align-items: center; gap: .8rem; }

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1rem;
  padding: 0 0 2rem;
}

.sidebar {
  position: sticky;
  top: 88px;
  height: fit-content;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

.side-nav {
  display: grid;
  gap: .32rem;
}

.side-nav a {
  text-decoration: none;
  color: var(--muted);
  padding: .55rem .62rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: .92rem;
}

.side-nav a:hover,
.side-nav a.active {
  color: var(--text);
  background: rgba(46, 94, 215, .2);
  border-color: rgba(124, 164, 255, .35);
}

.content-col {
  display: grid;
  gap: 1rem;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}

.section-head h2 { margin: .15rem 0; }

.badge {
  padding: .24rem .58rem;
  border-radius: 999px;
  border: 1px solid rgba(124, 164, 255, .35);
  color: #b8d4ff;
  background: rgba(16, 34, 80, .62);
  font-size: .8rem;
  font-weight: 800;
}

.cards.compact { padding-bottom: 0; }

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; }
  .side-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .side-nav { grid-template-columns: 1fr; }
}

/* ===== Dashboard V2 polish ===== */
.dash-v2 {
  background:
    radial-gradient(900px 520px at 10% 12%, rgba(132, 171, 255, .20), transparent 60%),
    radial-gradient(700px 460px at 86% 82%, rgba(125, 159, 243, .18), transparent 70%),
    linear-gradient(180deg, #050a22 0%, #081238 52%, #050d2a 100%);
}

.dash-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(116, 155, 244, .22);
  background: linear-gradient(180deg, rgba(7, 16, 46, .96), rgba(8, 17, 50, .88));
  backdrop-filter: blur(10px);
}

.dash-header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-col { min-width: 240px; }
.brand-sub {
  margin: .12rem 0 0;
  color: #95a9d4;
  font-size: .82rem;
  font-weight: 600;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.field {
  display: grid;
  gap: .38rem;
  margin: 0;
  color: #d8e2ff;
  font-weight: 650;
}

.field.mini {
  min-width: 170px;
  max-width: 220px;
}

.field input,
.field textarea,
.field select {
  border-radius: 12px;
  border: 1px solid rgba(110, 152, 245, .38);
  background: linear-gradient(180deg, rgba(14, 29, 72, .9), rgba(9, 22, 58, .88));
  color: #edf3ff;
  font-weight: 600;
  transition: border-color .22s ease, box-shadow .22s ease, transform .14s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(131, 176, 255, .95);
  box-shadow: 0 0 0 3px rgba(82, 133, 255, .2);
  transform: translateY(-1px);
}

.field textarea { min-height: 102px; }

.field-select select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9dc1ff 50%),
    linear-gradient(135deg, #9dc1ff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.chip-link,
.chip-user,
.chip-logout {
  height: 34px;
  border-radius: 11px;
  padding: 0 .78rem;
  border: 1px solid rgba(113, 154, 245, .45);
  background: rgba(12, 27, 69, .7);
  color: #d4e3ff;
  text-decoration: none;
  font-weight: 700;
  font-size: .84rem;
  display: inline-flex;
  align-items: center;
}

.chip-link:hover,
.chip-logout:hover {
  border-color: rgba(148, 185, 255, .85);
  transform: translateY(-1px);
}

.chip-user { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: .85rem;
  padding-top: .8rem;
}

.dash-shell.overview-mode {
  grid-template-columns: 1fr;
}

.dash-shell.overview-mode .dash-sidebar {
  display: none;
}

.dash-sidebar {
  padding: .58rem;
  border-radius: 16px;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  background: linear-gradient(180deg, rgba(11, 24, 62, .94), rgba(8, 17, 46, .88));
}

.side-nav { gap: .27rem; }
.side-nav a {
  border-radius: 11px;
  padding: .63rem .76rem;
  background: rgba(9, 20, 54, .58);
  border: 1px solid rgba(90, 126, 213, .18);
  transition: all .2s ease;
}

.side-nav a:hover {
  border-color: rgba(120, 161, 255, .45);
  background: rgba(27, 49, 111, .36);
}

.side-nav a.active {
  border-color: rgba(140, 178, 255, .75);
  background: linear-gradient(135deg, rgba(61, 111, 233, .43), rgba(39, 75, 167, .33));
  color: #f2f6ff;
  box-shadow: inset 0 1px 0 rgba(187, 211, 255, .22), 0 6px 18px rgba(26, 55, 140, .36);
}

.dash-content {
  display: grid;
  gap: .85rem;
  padding-bottom: 2rem;
}

.dash-content.single-view {
  position: relative;
}

.view {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease;
}

.view.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.side-nav-main .side-tab {
  appearance: none;
  width: 100%;
  text-align: left;
  border-radius: 11px;
  padding: .63rem .76rem;
  background: rgba(9, 20, 54, .58);
  border: 1px solid rgba(90, 126, 213, .18);
  color: var(--muted);
  font-weight: 700;
  font-size: .92rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
}

.side-nav-main .side-tab:hover {
  color: var(--text);
  border-color: rgba(120, 161, 255, .45);
  background: rgba(27, 49, 111, .36);
}

.side-nav-main .side-tab.active {
  color: #f2f6ff;
  border-color: rgba(140, 178, 255, .75);
  background: linear-gradient(135deg, rgba(61, 111, 233, .43), rgba(39, 75, 167, .33));
  box-shadow: inset 0 1px 0 rgba(187, 211, 255, .22), 0 6px 18px rgba(26, 55, 140, .36);
}

.hub-shortcuts {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .55rem 0 .85rem;
}

.hub-cards .mini-card {
  display: grid;
  gap: .58rem;
}

.hub-cards .mini-card p {
  margin: 0;
}

.hub-cards .list-clean {
  gap: .33rem;
}

.hub-cards .list-clean li {
  color: #b9cbef;
  font-size: .92rem;
  position: relative;
  padding-left: .86rem;
}

.hub-cards .list-clean li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(128, 173, 255, .95);
  position: absolute;
  left: 0;
  top: .5em;
}

.section-card {
  border-radius: 16px;
  padding: .95rem;
  background: linear-gradient(180deg, rgba(11, 24, 62, .94), rgba(8, 17, 46, .88));
  border: 1px solid rgba(95, 136, 230, .24);
}

.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}

.tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.section-head { margin-bottom: .35rem; }
.section-head h2 {
  margin: 0;
  font-size: 1.82rem;
  letter-spacing: .2px;
}

.badge {
  background: rgba(18, 40, 97, .72);
  border-color: rgba(129, 170, 255, .45);
}

.mini-card {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 31, 78, .92), rgba(11, 23, 62, .85));
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.mini-card:hover {
  transform: translateY(-2px);
  border-color: rgba(143, 182, 255, .55);
  box-shadow: 0 12px 28px rgba(10, 25, 68, .4);
}

.tab-row {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin: .55rem 0 .7rem;
}

.tab-btn {
  border-radius: 11px;
  border: 1px solid rgba(101, 141, 231, .35);
  padding: .5rem .78rem;
  background: rgba(13, 28, 73, .62);
  color: #c6dbff;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.tab-btn.active,
.tab-btn:hover {
  color: #f2f6ff;
  border-color: rgba(150, 186, 255, .78);
  background: linear-gradient(135deg, rgba(54, 103, 227, .42), rgba(29, 68, 156, .3));
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: .7rem;
}

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

.form-panel {
  margin-top: .75rem;
  border-radius: 14px;
  padding: .75rem;
  background: linear-gradient(180deg, rgba(12, 29, 74, .88), rgba(10, 22, 58, .82));
}

.form-panel h3 {
  margin: 0 0 .55rem;
}

.modern-color-picker {
  --active-color: #4f8dff;
  margin-top: .7rem;
  border: 1px solid rgba(111, 150, 236, .34);
  border-radius: 14px;
  padding: .72rem;
  background: linear-gradient(180deg, rgba(12, 30, 77, .74), rgba(8, 20, 55, .78));
}

.picker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  color: #d9e7ff;
  font-weight: 700;
  margin-bottom: .62rem;
}

.picker-top code {
  padding: .2rem .46rem;
  border-radius: 8px;
  border: 1px solid rgba(114, 154, 246, .4);
  background: rgba(13, 29, 73, .7);
  color: var(--active-color);
  font-weight: 800;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .48rem;
  margin-bottom: .65rem;
}

.swatches button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(168, 193, 255, .24);
  background: var(--sw);
  cursor: pointer;
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

.swatches button:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(197, 215, 255, .65);
}

.swatches button.active {
  border-color: #f4f8ff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 45%, transparent);
}

.picker-inputs {
  display: grid;
  gap: .62rem;
  grid-template-columns: 56px minmax(0, 1fr);
}

.picker-inputs input[type="color"] {
  width: 56px;
  height: 44px;
  min-height: 44px;
}

.picker-inputs input[type="text"] {
  text-transform: lowercase;
  letter-spacing: .35px;
}

.divider {
  height: 1px;
  margin: .82rem 0;
  background: linear-gradient(90deg, transparent, rgba(122, 161, 245, .4), transparent);
}

.color-combo {
  display: grid;
  grid-template-columns: 1fr 50px;
  gap: .5rem;
}

input[type="color"] {
  min-height: 44px;
  padding: .2rem;
  border-radius: 10px;
  border: 1px solid rgba(118, 157, 255, .45);
  background: rgba(12, 25, 62, .88);
}

.actions-inline { margin-top: .8rem; }
.actions-inline .btn { min-height: 42px; }

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .46s ease, transform .46s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1320px) {
  .section-head h2 { font-size: 1.45rem; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; max-height: none; }
  .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-shell.overview-mode .dash-sidebar { display: none; }
}

@media (max-width: 860px) {
  .dash-header-inner { flex-direction: column; align-items: stretch; padding: .55rem 0 .8rem; }
  .header-tools { justify-content: flex-start; }
  .field.mini { max-width: none; min-width: 0; }
  .grid-2, .grid-3, .grid-4, .cards-2, .cards-3 { grid-template-columns: 1fr; }
  .side-nav { grid-template-columns: 1fr; }
}