:root {
  --outline: 255 255 255;
  --outlineSoft: 255 255 255;

  --bgTop: 30 4 119;
  --bgMid: 18 6 70;
  --bg: 10 6 28;

  --shadow-card: 0 18px 46px rgba(0,0,0,.48);
  --shadow-panel: 0 10px 22px rgba(0,0,0,.42);
  --shadow-input: 0 2px 6px rgba(0,0,0,.25);

  --panel: 26 14 60;
  --panel2: 36 20 82;

  --border: 88 61 140;
  --text: 244 243 255;
  --muted: 197 187 220;

  --accent: 168 85 247;
  --accent2: 217 70 239;

  --shadow1: 28 16 74;
  --shadow2: 46 26 118;
}

a,
.c-link {
	text-decoration: none; !important;
}

a:hover,
.c-link:hover {
	text-decoration: none; !important;
}

html[data-theme="light"] {
  --bgTop: 236 228 248;
  --bgMid: 245 239 252;
  --bg: 252 249 255;

  --panel: 255 255 255;
  --panel2: 244 236 252;
  --border: 166 132 214;
  --text: 38 22 65;
  --muted: 96 72 140;
  --accent: 122 86 188;
  --accent2: 94 51 168;

  --shadow1: 188 160 228;
  --shadow2: 150 116 206;
}

html[data-theme="dark"] {
  --bgTop: 24 24 27;
  --bgMid: 18 18 20;
  --bg: 9 9 11;

  --panel: 24 24 27;
  --panel2: 39 39 42;
  --border: 180 180 90;
  --text: 244 244 245;
  --muted: 161 161 170;
  --accent: 99 102 241;
  --accent2: 168 85 247;

  --shadow1: 39 39 42;
  --shadow2: 63 63 70;
}

body {
  background:
    linear-gradient(
      180deg,
      rgb(var(--bgTop)) 0px,
      rgb(var(--bgTop)) 120px,
      rgb(var(--bgMid)) 340px,
      rgb(var(--bg)) 760px
    );
  color: rgb(var(--text));
}

.font-display {
  font-family: Cinzel, ui-serif, Georgia, serif !important;
}

.font-sans {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% 10%, rgba(var(--accent), .10), transparent 60%),
    radial-gradient(700px 460px at 80% 18%, rgba(var(--accent2), .08), transparent 62%),
    linear-gradient(
      180deg,
      rgba(var(--shadow1), .10),
      rgba(var(--shadow2), .06) 35%,
      rgba(0,0,0,0) 70%
    );
  opacity: .85;
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(900px 520px at 50% 10%, rgba(var(--accent), .06), transparent 60%),
    radial-gradient(700px 460px at 80% 18%, rgba(var(--accent2), .04), transparent 62%),
    linear-gradient(
      180deg,
      rgba(255,255,255,.22),
      rgba(var(--shadow1), .06) 35%,
      rgba(255,255,255,0) 70%
    );
  opacity: .65;
}

.c-link,
a {
  color: rgb(var(--accent));
}

.c-link:hover,
a:hover {
  filter: brightness(1.08);
}

.c-surface {
  background: linear-gradient(
    180deg,
    rgba(var(--shadow1), .32),
    rgba(var(--panel), .58)
  );
  border: 1px solid rgba(var(--border), .52);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  position: relative;
}
html[data-theme="light"] .c-surface {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.90),
    rgba(var(--panel2), .82)
  );
  border-color: rgba(var(--border), .34);
  box-shadow:
    0 14px 34px rgba(90, 54, 140, .10),
    0 1px 0 rgba(255,255,255,.8) inset;
}
.c-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(var(--accent), .22),
    rgba(var(--accent2), .08),
    rgba(var(--shadow2), .18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.c-surface-header {
  background: linear-gradient(
    180deg,
    rgba(var(--shadow2), .38),
    rgba(var(--panel), .12)
  );
  border-bottom: 1px solid rgba(var(--border), .30);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  position: relative;
}

.c-surface-header::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(var(--accent), 0),
    rgba(var(--accent), .30),
    rgba(var(--accent2), .16),
    rgba(var(--accent), 0)
  );
  opacity: .85;
}

.c-elev {
  background: linear-gradient(
    180deg,
    rgba(var(--shadow2), .22),
    rgba(var(--panel2), .24)
  );
  border: 1px solid rgba(var(--border), .44);
  border-radius: 12px;
  box-shadow: var(--shadow-panel);
  transition: border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
html[data-theme="light"] .c-elev {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.88),
    rgba(var(--panel2), .72)
  );
  border-color: rgba(var(--border), .26);
  box-shadow:
    0 8px 20px rgba(90, 54, 140, .08),
    0 1px 0 rgba(255,255,255,.75) inset;
}
.c-elev:hover {
  filter: brightness(1.03);
  border-color: rgba(var(--outline), .42);
  box-shadow: 0 14px 28px rgba(0,0,0,.50);
}

.c-glow {
  box-shadow:
    0 10px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(var(--outline), .20);
}

.c-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--shadow2), .55),
    rgba(var(--border), .35),
    rgba(var(--shadow1), .55),
    transparent
  );
}

/* -----------------------------
   CRISP WHITE INPUTS
----------------------------- */

.c-input,
input.c-input,
textarea.c-input,
select.c-input {
  background: rgba(var(--panel2), .12) !important;
  color: rgb(var(--text)) !important;
  border: 1px solid rgba(var(--outline), .72) !important;
  border-radius: 12px;
  outline: none;
  box-shadow:
  	inset 0 1px 0 rgba(255,255,255,.04),
	var(--shadow-input);
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background-color .14s ease;
  -webkit-appearance: none;
  appearance: none;
}
html[data-theme="light"] .c-input,
html[data-theme="light"] input.c-input,
html[data-theme="light"] textarea.c-input,
html[data-theme="light"] select.c-input {
  background: rgba(255,255,255,.92) !important;
  color: rgb(var(--text)) !important;
  border: 1px solid rgba(var(--border), .38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 8px rgba(90,54,140,.06);
}
.c-input:hover,
input.c-input:hover,
textarea.c-input:hover,
select.c-input:hover {
  border-color: rgba(var(--outline), .88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.14),
    0 8px 18px rgba(0,0,0,.30);
}

.c-input:focus,
input.c-input:focus,
textarea.c-input:focus,
select.c-input:focus {
  outline: none !important;
  border-color: rgba(var(--outline), 1) !important;
  background: rgba(var(--panel2), .16) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.95),
    0 0 0 3px rgba(var(--accent), .18),
    0 10px 24px rgba(0,0,0,.34);
}
html[data-theme="light"] .c-input:focus,
html[data-theme="light"] input.c-input:focus,
html[data-theme="light"] textarea.c-input:focus,
html[data-theme="light"] select.c-input:focus {
  border-color: rgba(var(--accent), .60) !important;
  box-shadow:
    0 0 0 1px rgba(var(--accent), .22),
    0 0 0 4px rgba(var(--accent), .10),
    0 6px 18px rgba(90,54,140,.10);
}
.c-input::placeholder,
input.c-input::placeholder,
textarea.c-input::placeholder {
  color: rgba(var(--muted), .76);
}

.c-input:disabled,
input.c-input:disabled,
textarea.c-input:disabled,
select.c-input:disabled {
  opacity: .65;
  cursor: not-allowed;
}

    .rail-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: rgba(var(--text), .92);
      text-decoration:none;
      transition: background .15s ease, border-color .15s ease, transform .15s ease;
      user-select:none;
    }
    .rail-item:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.22);
      transform: translateY(-1px);
    }
    .rail-dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background: rgba(255,255,255,.20);
      box-shadow: 0 0 0 1px rgba(0,0,0,.2);
      flex: 0 0 auto;
    }
    .rail-text{
      font-size: 14px;
      font-weight: 650;
      letter-spacing: .01em;
    }
    #railNav a.active{
      background: linear-gradient(180deg, rgba(var(--panel2), .55), rgba(var(--panel), .38));
      border-color: rgba(var(--accent), .35);
      box-shadow:
        0 10px 26px rgba(0,0,0,.35),
        0 0 0 1px rgba(var(--accent), .18);
    }
    #railNav a.active .rail-dot{
      background: rgba(var(--accent), .85);
      box-shadow: 0 0 18px rgba(var(--accent), .25);
    }

/* Buttons */
.c-btn {
  background: rgb(var(--accent));
  color: white;
  border: 1px solid rgba(var(--outline), .36);
  border-radius: 12px;
  font-weight: 700;
  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08);
}

.c-btn:hover {
  filter: brightness(1.06);
  border-color: rgba(var(--outline), .55);
}
/* Fix white text in light theme */
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-white\/95,
html[data-theme="light"] .text-white\/90,
html[data-theme="light"] .text-white\/85,
html[data-theme="light"] .text-white\/80 {
  color: rgb(var(--text)) !important;
}

html[data-theme="light"] .font-display {
  color: rgb(42 18 82);
}

html[data-theme="light"] .text-\[rgb\(var\(--muted\)\)\] {
  color: rgb(var(--muted)) !important;
}

html[data-theme="light"] a,
html[data-theme="light"] .c-link {
  color: rgb(var(--accent2));
}

html[data-theme="light"] .c-btn {
  color: white;
}

html[data-theme="light"] .c-divider {
  opacity: .35;
}

.c-chip,
.inline-chip {
  border: 1px solid rgba(var(--outline), .22);
}
/* ---------- Milestones / Branch layout ---------- */

.m-rail {
  position: relative;
}

.m-node {
  position: relative;
}

/* trunk line between milestone blocks */
.m-node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  width: 2px;
  height: 28px;
  background: linear-gradient(
    180deg,
    rgba(var(--border), .0),
    rgba(var(--border), .55),
    rgba(var(--accent), .22),
    rgba(var(--border), .0)
  );
  opacity: .9;
}

.m-node:last-child::after {
  display: none;
}

/* task branch area */
.m-branches {
  position: relative;
  padding-top: 8px;
  padding-bottom: 12px;
}

/* connector overlay sits behind the task cards */
.m-connectors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.m-branches > .m-branch-card {
  position: relative;
  z-index: 1; /* above connector lines */
}

/* line style */
.m-line {
  position: absolute;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent), .0),
    rgba(var(--accent), .35),
    rgba(var(--border), .55)
  );
  filter: drop-shadow(0 0 10px rgba(var(--accent), .12));
  opacity: .9;
}

/* milestone "block" — flatter, less bubbly */
.m-block {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18); /* brighter outline */
  background: linear-gradient(
    180deg,
    rgba(var(--panel2), .55),
    rgba(var(--panel), .72)
  );
  box-shadow:
    0 18px 55px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.m-block.active {
  box-shadow:
    0 18px 55px rgba(0,0,0,.50),
    0 0 0 1px rgba(var(--accent), .28),
    0 0 30px rgba(var(--accent), .12),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.m-block.locked {
  opacity: .55;
}

/* small dot on the trunk at milestone level */
.m-dot {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--border), .7);
  box-shadow: 0 0 0 4px rgba(var(--accent), .08);
}
/* ---------- Final cauldron node ---------- */

.m-end {
  position: relative;
  display: grid;
  place-items: center;
  padding-top: 12px;
}

.m-cauldron {
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(
    180deg,
    rgba(var(--panel2), .55),
    rgba(var(--panel), .78)
  );
  box-shadow:
    0 18px 55px rgba(0,0,0,.50),
    0 0 0 1px rgba(var(--accent), .18),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding: 18px 18px;
}

.m-cauldron-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.m-cauldron-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 18px rgba(var(--accent), .18));
  opacity: .95;
}

.m-cauldron-title {
  font-family: Cinzel, ui-serif, Georgia, serif;
  letter-spacing: .02em;
  font-weight: 700;
  color: rgba(var(--text), .92);
}

.m-cauldron-sub {
  margin-top: 4px;
  font-size: 12px;
  color: rgb(var(--muted));
}

/* optional: faint glow beam into the cauldron */
.m-end::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 32px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent), .0),
    rgba(var(--accent), .35),
    rgba(var(--border), .55)
  );
  opacity: .9;
}
/* Make Bootstrap modal shell blend into Coven surfaces */
.modal {
	z-index: 2000;
}

.modal-backdrop {
	z-index: 1990;
}

.modal-content {
  color: rgb(var(--text)) !important;
  background: rgb(var(--panel2)) !important;
  border: 1px solid rgba(var(--outline), .14) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
}

.modal-header,
.modal-footer {
  border-color: rgba(var(--outline), .12) !important;
}

.modal-backdrop.show {
  opacity: .7 !important;
}

.modal-backdrop {
  backdrop-filter: blur(4px);
  background: rgba(6, 4, 18, .78) !important;
}

/* Make modal internals scroll correctly */
.modal-dialog {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 4rem);
}

#editTaskForm,
#newTaskForm {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modal-body {
  overflow-y: auto !important;
  min-height: 0;
}

/* Remove Bootstrap default close icon styling if using text button */
.btn-close {
  filter: invert(1) opacity(.75);
}

/* Optional: smoother modal body scroll look */
.modal-dialog-scrollable .modal-body {
  scrollbar-width: thin;
}

/* Bootstrap bridge */
.text-muted {
  color: rgb(var(--muted)) !important;
}

.bg-body-tertiary,
.navbar,
.dropdown-menu {
  background: rgba(var(--panel), .92) !important;
  border-color: rgba(var(--outline), .18) !important;
  color: rgb(var(--text)) !important;
  backdrop-filter: blur(8px);
}

.navbar {
	position: sticky;
	top: 0;
	z-index: 10;
}
.dropdown-item {
  color: rgb(var(--text)) !important;
}

.dropdown-item:hover {
  background: rgba(255,255,255,.08) !important;
}

.btn-primary {
  background: rgb(var(--accent)) !important;
  border-color: rgba(var(--outline), .32) !important;
}

.btn-outline-secondary {
  border-color: rgba(var(--outline), .42) !important;
  color: rgb(var(--text)) !important;
}

.btn-outline-secondary:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(var(--outline), .72) !important;
}

/* =========================
   SPELLBOOK / PARCHMENT
========================= */

.spellbook-shell {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(120,72,24,.08), transparent 30%),
    linear-gradient(180deg, #f3e7c9 0%, #ead9b2 45%, #e2cda1 100%);
  color: #4a3218;
  border: 1px solid rgba(92, 62, 24, .28);
  border-radius: 18px;
  box-shadow:
    0 18px 42px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 0 80px rgba(120,72,24,.06);
  position: relative;
  overflow: hidden;
}

.spellbook-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(90, 60, 25, .018) 0px,
      rgba(90, 60, 25, .018) 1px,
      transparent 1px,
      transparent 28px
    );
  opacity: .65;
}

.spellbook-header {
  background: linear-gradient(180deg, rgba(110,72,28,.10), rgba(255,255,255,.10));
  border-bottom: 1px solid rgba(92, 62, 24, .18);
}

.spellbook-title {
  font-family: Cinzel, ui-serif, Georgia, serif;
  letter-spacing: .04em;
  color: #53361a;
}

.spellbook-status {
  color: #7a5a35 !important;
}

.spellbook-pagebar {
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(92, 62, 24, .18);
}

.spellbook-pagebtn {
  border-radius: 999px;
  border: 1px solid rgba(92,62,24,.22);
  background: rgba(255,248,230,.72);
  color: #5f4324;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(120,72,24,.08);
}

.spellbook-pagebtn:hover {
  background: rgba(255,248,230,.92);
  border-color: rgba(92,62,24,.34);
}

.spellbook-pagebtn.active {
  background: linear-gradient(180deg, #d8b77b, #c79f5c);
  color: #2d1c0a;
  border-color: rgba(92,62,24,.38);
  box-shadow:
    0 4px 12px rgba(120,72,24,.18),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.spellbook-input {
  background: rgba(255,252,242,.86) !important;
  color: #4a3218 !important;
  border: 1px solid rgba(92,62,24,.22) !important;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 3px 10px rgba(120,72,24,.06);
}

.spellbook-input::placeholder {
  color: rgba(92,62,24,.55);
}

.spellbook-editor-wrap {
  background:
    linear-gradient(180deg, rgba(255,252,244,.96), rgba(241,227,194,.92));
  border: 1px solid rgba(92,62,24,.24);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 8px 18px rgba(120,72,24,.08);
}

.spellbook-editor-wrap .ql-toolbar.ql-snow {
  border: 0 !important;
  border-bottom: 1px solid rgba(92,62,24,.18) !important;
  background: linear-gradient(180deg, rgba(255,248,232,.96), rgba(236,218,177,.92));
}

.spellbook-editor-wrap .ql-container.ql-snow {
  border: 0 !important;
}

.spellbook-editor-wrap .ql-editor {
  min-height: 420px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.8;
  color: #4a3218;
  background: transparent;
}

.spellbook-editor-wrap .ql-editor p,
.spellbook-editor-wrap .ql-editor li {
  color: #4a3218;
}

.spellbook-editor-wrap .ql-editor.ql-blank::before {
  color: rgba(92,62,24,.45);
  font-style: italic;
}

.spellbook-btn-primary {
  background: linear-gradient(180deg, #7c4d1f, #5f3814);
  color: #fff7ea;
  border: 1px solid rgba(55,32,12,.42);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(70,42,16,.25);
}

.spellbook-btn-primary:hover {
  filter: brightness(1.05);
}

.spellbook-btn-danger {
  background: linear-gradient(180deg, #8c3b2a, #6a281d);
  color: #fff4ef;
  border: 1px solid rgba(72,20,14,.35);
  border-radius: 12px;
}

.spellbook-btn-muted {
  background: linear-gradient(180deg, #efe0bc, #dfc695);
  color: #50361a;
  border: 1px solid rgba(92,62,24,.24);
  border-radius: 12px;
}

/* Quill icons darker on parchment */
.spellbook-editor-wrap .ql-snow .ql-stroke {
  stroke: #5a3c1b;
}
.spellbook-editor-wrap .ql-snow .ql-fill {
  fill: #5a3c1b;
}
.spellbook-editor-wrap .ql-snow .ql-picker {
  color: #5a3c1b;
}