/* GENERATED by scripts/build-menu-css.js from menu/style.css. Do not edit. */
:root {
  /* ===== Colors ===== */
  --body-color: #E4E9F7;
  --sidebar-color: #FFF;
  --primary-color: #0982f8;
  --selected-color: #0982f8;
  --selected-color-dark: #0063c7;
  --primary-color-light: #F6F5FF;
  --toggle-color: #DDD;
  --edgypro-text-color: #505050;
  --border-color: #d9d9d9;
  --border-color-light: #0982f8;

  /* ===== Surfaces & depth ===== */
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 6px;
  --menu-shadow: 0 18px 50px -12px rgba(15, 23, 42, 0.45), 0 4px 12px rgba(15, 23, 42, 0.12);
  --item-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);

  /* ====== Transition ====== */
  --tran-fast: all 0.15s ease;
  --tran-03: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --tran-04: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --tran-05: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --tran-menu: all 0.3s ease, left none, top none;
}

/* Theme-aware glow — declared on body so var(--selected-color) resolves the
   active theme override (which is set on body.<theme>), not the :root default. */
body {
  --selected-glow: 0 4px 14px -2px color-mix(in srgb, var(--selected-color) 50%, transparent);
  --hover-glow: 0 2px 10px -2px color-mix(in srgb, var(--selected-color) 38%, transparent);
}

body.dark {
  --menu-shadow: 0 20px 55px -12px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.35);
  --item-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== Reduce Motion customization ===== */
body.edgypro-reduce-motion nav.main,
body.edgypro-reduce-motion nav.main *,
body.edgypro-reduce-motion nav.main *::before,
body.edgypro-reduce-motion nav.main *::after {
  transition: none !important;
  animation: none !important;
}

/* ===== Glass Menu customization ===== */
body.edgypro-glass nav.main {
  background: color-mix(in srgb, var(--sidebar-color) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

body.edgypro-glass nav.main header,
body.edgypro-glass nav.main .customize-menu,
body.edgypro-glass nav.main .account-menu {
  background: transparent;
}

body.edgypro-glass nav.main .menu-links {
  background: color-mix(in srgb, var(--body-color) 55%, transparent);
}

body.arial * {
  font-family: 'Arial', sans-serif !important;
}

body.comicsans * {
  font-family: 'Comic Sans MS', cursive, sans-serif !important;
}

body.verdana * {
  font-family: 'Verdana', sans-serif !important;
}

body.tahoma * {
  font-family: 'Tahoma', sans-serif !important;
}

body.courier * {
  font-family: 'Courier New', monospace !important;
}

body.georgia * {
  font-family: 'Georgia', serif !important;
}

body.times * {
  font-family: 'Times New Roman', serif !important;
}

body.trebuchet * {
  font-family: 'Trebuchet MS', sans-serif !important;
}

body.impact * {
  font-family: 'Impact', sans-serif !important;
}

body.lucida * {
  font-family: 'Lucida Sans', sans-serif !important;
}

body .bx {
  font-family: 'boxicons' !important;
}

body.red-theme {
  --primary-color: #FF3333;
  /* Brighter shade */
  --selected-color: #FF3333;
  --selected-color-dark: #D32F2F;
  /* Deeper contrast */
  --border-color-light: #FF6666;
  /* Lighter for border */
}

body.orange-theme {
  --primary-color: #FF8800;
  /* More vibrant */
  --selected-color: #FF8800;
  --selected-color-dark: #CC6E00;
  /* Stronger contrast */
  --border-color-light: #FFAA33;
  /* Lighter for border */
}

body.yellow-theme {
  --primary-color: #FFFF33;
  /* More vibrant yellow */
  --selected-color: #FFFF33;
  --selected-color-dark: #CCCC00;
  /* Stronger contrast */
  --border-color-light: #FFFF66;
  /* Lighter for border */
}

body.green-theme {
  --primary-color: #00B300;
  /* Brighter green */
  --selected-color: #00B300;
  --selected-color-dark: #007F00;
  /* Deeper shade */
  --border-color-light: #33CC33;
  /* Lighter border */
}

body.purple-theme {
  --primary-color: #5A00FF;
  /* More vibrant indigo */
  --selected-color: #5A00FF;
  --selected-color-dark: #4000B3;
  /* Stronger contrast */
  --border-color-light: #7F33FF;
  /* Lighter border */
}

body.pink-theme {
  --primary-color: #FF99FF;
  /* Brighter violet */
  --selected-color: #FF99FF;
  --selected-color-dark: #CC66CC;
  /* Stronger contrast */
  --border-color-light: #FFCCFF;
  /* Lighter border */
}

body.dark {
  --body-color: #18191a;
  --sidebar-color: #242526;
  --primary-color: #3a3b3c;
  --primary-color-light: #3a3b3c;
  --toggle-color: #fff;
  --edgypro-text-color: #ccc;
  --border-color: #3a3b3c;
}

/* Red Theme */
body.red-theme #edgypro-icon {
  filter: hue-rotate(150deg) saturate(1.5);
}

/* Orange Theme */
body.orange-theme #edgypro-icon {
  filter: hue-rotate(180deg) saturate(1.5);
}

/* Yellow Theme */
body.yellow-theme #edgypro-icon {
  filter: hue-rotate(-140deg) saturate(1.5);
}

/* Green Theme */
body.green-theme #edgypro-icon {
  filter: hue-rotate(-100deg) saturate(1.5);
}

/* Indigo (Purple) Theme */
body.purple-theme #edgypro-icon {
  filter: hue-rotate(50deg) saturate(1.5);
}

/* Violet (Pink) Theme */
body.pink-theme #edgypro-icon {
  filter: hue-rotate(90deg) saturate(1.2) brightness(1.5);
}

/* ===== Sidebar ===== */
nav.main {
  position: fixed;
  top: calc(50% - 100px);
  left: calc(50% - 160px);
  height: 470px;
  width: 320px;
  padding: 10px 14px;
  background: var(--sidebar-color);
  transition: var(--tran-05);
  z-index: 2147483646;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--menu-shadow);
}

nav.main.moving {
  transition: opacity ease 0.3s !important;
}

nav.main.close {
  height: 84px;
  border-radius: var(--radius);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.menu-links {
  height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--body-color);
  transition: background-color 0.3s ease;
  align-items: center;
  display: block;
  padding: 4px 6px 10px;
  margin-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
}

.menu-links>.login-msg {
  margin-top: 45%;
  color: var(--edgypro-text-color);
  text-align: center;
}

.menu-links::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
  transition: var(--tran-03);
}

.menu-links::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 10px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: var(--tran-03);
}

.menu-links::-webkit-scrollbar-thumb:hover {
  background-color: var(--selected-color-dark);
  transition: var(--tran-03);
}

/* ===== Feature search / filter bar ===== */
.menu-search {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
  padding: 0 8px;
  height: 34px;
  background: var(--sidebar-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--item-shadow);
  transition: var(--tran-03);
}

.menu-search:focus-within {
  border-color: var(--border-color-light);
  box-shadow: var(--hover-glow);
}

.menu-search-icon {
  font-size: 16px;
  color: var(--edgypro-text-color);
  opacity: 0.7;
  flex-shrink: 0;
}

nav.main .menu-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  color: var(--edgypro-text-color);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}

nav.main .menu-search-input::placeholder {
  color: var(--edgypro-text-color);
  opacity: 0.6;
}

.menu-search-clear {
  font-size: 18px;
  color: var(--edgypro-text-color);
  opacity: 0.7;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: var(--tran-03);
}

.menu-search-clear:hover {
  color: #fff;
  background: var(--primary-color);
  opacity: 1;
}

.nav-link.search-hidden {
  display: none !important;
}

body.edgypro-hide-search .menu-search {
  display: none !important;
}

.menu-search-empty {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--edgypro-text-color);
  opacity: 0.7;
  padding: 20px 10px;
}


/* ===== Reusable code - Here ===== */
nav.main li {
  border: 1px solid var(--border-color);
  min-height: 32px;
  max-height: 32px;
  list-style: none;
  display: flex;
  margin: 6px 0px !important;
  background: var(--sidebar-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--item-shadow);
  transition: var(--tran-03);
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow-y: hidden;
  align-items: center;
  flex-wrap: wrap;
}

nav.main .customize-menu li {
  background: var(--body-color) !important;
}

nav.main li label {
  cursor: pointer;
  user-select: none;
  margin: 3px 0px;
}

.menu-item-toggler {
  font-size: 14px;
  right: 5px;
  top: 5px;
  position: absolute;
  padding: 1px 3px 0px;
  color: var(--edgypro-text-color);
  background-color: transparent;
  border: none;
  border-radius: 50%;
  transition: var(--tran-03);
  text-align: center;
}

.menu-item-toggler i {
  transition: var(--tran-03);
  padding: 3px;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  text-align: center;
}

.menu-item-toggler:hover i {
  color: #fff;
  background-color: var(--primary-color);
}

nav.main li:has(input:checked) .menu-item-toggler {
  color: #fff !important;
}

/* Info icon: reveals a feature's description; hover-only + left side so it never crowds the row */
.menu-item-info {
  position: absolute;
  left: 4px;
  top: 7px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding: 0;
  color: var(--edgypro-text-color);
  background-color: transparent;
  border: none;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: var(--tran-03);
  z-index: 3;
}

.nav-link:hover .menu-item-info {
  opacity: 0.7;
  pointer-events: auto;
}

.menu-item-info:hover {
  opacity: 1;
  color: #fff;
  background-color: var(--primary-color);
}

nav.main li:has(input:checked) .menu-item-info {
  color: #fff;
}

/* Slide the label right on hover so the revealed info icon doesn't cover the feature name */
nav.main li.has-info > label {
  transition: padding-left 0.3s ease;
}

nav.main li.has-info:hover > label {
  padding-left: 20px;
}

nav.main li .nav-select {
  display: block;
  height: 24px;
  width: 60%;
  font-size: 12px;
  padding: 1px 18px 1px 8px;
  margin: 5px 0px;
  border: 1px solid var(--border-color);
  background-color: var(--sidebar-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
  border-radius: var(--radius-sm);
  color: var(--edgypro-text-color);
  transition: var(--tran-03);
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none;
}

nav.main li .nav-input {
  display: block;
  height: 24px;
  width: 60%;
  font-size: 12px;
  margin: 5px 0px;
  padding: 1px 8px;
  border: 1px solid var(--border-color);
  background-color: var(--sidebar-color);
  border-radius: var(--radius-sm);
  color: var(--edgypro-text-color);
  transition: var(--tran-03);
  text-align: center;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none;
}

/* Multi-line inputs (e.g. Custom AI Instructions) need real room to type */
nav.main li textarea.nav-input,
nav.main li .nav-textarea {
  height: auto;
  min-height: 56px;
  max-height: 150px;
  width: 90%;
  padding: 6px 8px;
  text-align: left;
  line-height: 1.4;
  resize: vertical;
  font-family: inherit;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
}

nav.main li .nav-textarea::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}

nav.main li .nav-textarea::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 10px;
}

nav.main li .nav-textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-color-light);
}

nav.main li .nav-num {
  display: block;
  text-align: center;
  height: 24px;
  width: 30%;
  font-size: 12px;
  margin: 5px 0px;
  padding: 1px 4px;
  border: 1px solid var(--border-color);
  background-color: var(--sidebar-color);
  border-radius: var(--radius-sm);
  color: var(--edgypro-text-color);
  transition: var(--tran-03);
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none;
}

/* Hide native number spinners so inputs stay consistent when focused (type=number) */
nav.main li input[type="number"]::-webkit-outer-spin-button,
nav.main li input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

nav.main li input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

nav.main .max-min-span {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--edgypro-text-color);
  transition: var(--tran-03);
  gap: 5px;
}

nav.main input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  height: 6px;
  /* theme-adaptive so the track stays visible on both the sidebar and settings-panel backgrounds */
  background: color-mix(in srgb, var(--edgypro-text-color) 28%, transparent);
  border-radius: 6px;
  outline: none;
  transition: var(--tran-03);
  margin: 10px 0;
  max-width: 85%;
}

nav.main input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: var(--selected-color);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--tran-03);
}

nav.main input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--selected-color-dark);
}

nav.main input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--selected-color);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--tran-03);
}

nav.main input[type="range"]::-moz-range-thumb:hover {
  background: var(--selected-color-dark);
}

nav.main input[type="range"]::-ms-thumb {
  width: 15px;
  height: 15px;
  background: var(--selected-color);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--tran-03);
}

nav.main input[type="range"]::-ms-thumb:hover {
  background: var(--selected-color-dark);
}

.scale-value-display {
  margin-left: 8%;
  color: var(--edgypro-text-color);
}

nav.main li .nav-select:focus,
nav.main li .nav-input:focus,
nav.main li .nav-num:focus {
  border-color: var(--border-color-light);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--selected-color) 22%, transparent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--selected-color) 22%, transparent) !important;
}

nav.main li:has(input:checked:not(:disabled)) {
  background: linear-gradient(135deg, var(--selected-color) 0%, var(--selected-color-dark) 100%);
  box-shadow: var(--selected-glow);
  border: 1px solid var(--border-color-light);
}

.settings-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  background: var(--body-color);
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: opacity 0.2s ease, padding 0.2s ease;
  opacity: 0.85;
}

.settings-button-container:hover {
  opacity: 1;
  padding: 6px 5px;
}

.settings-button-container button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  background: var(--sidebar-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--edgypro-text-color);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 6px;
  cursor: pointer;
  transition: var(--tran-03);
  text-align: center;
}

.settings-button-container button i {
  margin-right: 0;
  font-size: 14px;
}

.settings-button-container button:hover {
  background: linear-gradient(135deg, var(--selected-color) 0%, var(--selected-color-dark) 100%) !important;
  color: #fff !important;
  border: 1px solid var(--border-color-light) !important;
  transform: translateY(-1px);
}

.reset-button {
  font-weight: bold;
  color: #fff !important;
  border: 1px solid #ce0000;
  background: linear-gradient(135deg, #ff4d4d 0%, #d11a1a 100%) !important;
}

.reset-button:hover {
  background: linear-gradient(135deg, #ff6363 0%, #e02323 100%) !important;
  border: 1px solid #ff8080 !important;
}

.settings-button-container .reset-button:hover {
  background: linear-gradient(135deg, #ff6363 0%, #e02323 100%) !important;
  color: #fff !important;
  border: 1px solid #ff8080 !important;
}

/* .checkbox:checked + label {
  text-shadow: 1px 1px 2px var(--edgypro-text-color), 0 0 25px var(--primary-color), 0 0 5px var(--primary-color);
} */
.checkbox:checked+label .text {
  color: #fff;
}

.coming-soon+label+span {
  cursor: not-allowed !important;
}

nav.main li:has(input.coming-soon) {
  background: linear-gradient(30deg, var(--body-color) 50%, var(--primary-color-light) 100%);
  cursor: not-allowed !important;
  opacity: 50% !important;
  box-shadow: none !important;
}

.checkbox.coming-soon+label {
  text-shadow: none !important;
  cursor: not-allowed !important;
}

.checkbox.coming-soon+label .text {
  color: var(--edgypro-text-color) !important;
  cursor: not-allowed !important;
}

nav.main li:hover {
  border-color: var(--border-color-light);
  border-radius: var(--radius);
  box-shadow: var(--hover-glow);
}

nav.main li:hover .settings-panel {
  box-shadow: 0px 0px 0px var(--body-color)
}

nav.main header .image,
nav.main .icon {
  min-width: 60px;
  border-radius: 6px;
}

nav.main header {
  cursor: pointer;
  /* Set the initial cursor style to pointer or any other desired style */
  transition: border 0.1s ease;
  border: 1px solid transparent;

  /* Change cursor to "grab" on hover */
  &:hover {
    cursor: grab;
    border: 1px solid var(--primary-color);
  }

  /* Change cursor back to normal when clicked and held (active state) */
  &:active {
    cursor: grabbing;
    border: 1px solid var(--selected-color);
  }

  /* Reset cursor to normal after releasing the click */
  &:active,
  &:focus {
    cursor: grabbing;
    /* Change this to the desired cursor style after releasing the click */
    border: 1px solid var(--selected-color);
  }
}


nav.main .icon {
  min-width: 60px;
  border-radius: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

nav.main .text,
nav.main .icon {
  color: var(--edgypro-text-color);
  transition: var(--tran-03);
}

nav.main .text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 1;
}

nav.main .text-small {
  font-size: 12px;
  color: var(--edgypro-text-color);
}

nav.main a.text-small {
  font-size: 12px;
  color: var(--selected-color);
  transition: color 0.3s ease;
}

nav.main a.text-small:hover {
  font-size: 12px;
  color: var(--selected-color-dark);
}

nav.main .info-text {
  font-size: 10px;
  opacity: 80%;
  font-style: italic
}

/* nav.main.close .text{
    opacity: 0;
} */
/* =========================== */

nav.main header {
  position: relative;
  transition: var(--tran-03);
  background-color: var(--sidebar-color);
}

nav.main header .image-text {
  display: flex;
  align-items: center;
  user-select: none;
}

nav.main header .logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
}

header .image-text .name {
  margin-top: 0px;
  font-size: 18px;
  font-weight: 600;
}

/* Version is hidden until the name is hovered, then fades in below
   while the name eases upward to make room. */
header .image-text .profession {
  font-size: 0.9em;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  transform: translateY(-3px);
  overflow: hidden;
  display: block;
  pointer-events: none;
  transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease,
    margin-top 0.3s ease;
}

nav.main header .logo-text:hover .profession {
  opacity: 0.75;
  max-height: 1.4em;
  margin-top: -2px;
  transform: translateY(0);
}

nav.main header .image {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav.main header .image img {
  width: 40px;
  border-radius: 6px;
}

nav.main header .toggle {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%) rotate(180deg);
  height: 25px;
  width: 25px;
  background-color: var(--primary-color);
  color: var(--sidebar-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: var(--tran-05);
}

nav.main header .toggle:hover {
  background-color: var(--selected-color);
  color: #fff;
}

body.dark nav.main header .toggle {
  color: var(--edgypro-text-color);
}

nav.main.close .toggle {
  transform: translateY(-50%) rotate(90deg);
}

nav.main .menu {
  margin-top: 5px;
  transition: var(--tran-03);
  /* filter: blur(5px); */
}

.close .menu {
  margin-top: 10px !important;
  opacity: 0;
}

nav.main .customize-menu {
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  user-select: none;
  background-color: var(--sidebar-color);
  z-index: 1000;
}

nav.main .account-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 16px;
  gap: 12px;
  overflow-y: auto;
  background-color: var(--sidebar-color);
}

.account-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--selected-color) 0%, var(--selected-color-dark) 100%);
  box-shadow: var(--selected-glow);
  flex-shrink: 0;
}

.account-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.account-header-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.25;
  min-width: 0;
}

.account-header-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.account-header-sub {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  word-break: break-all;
  line-height: 1.35;
  letter-spacing: -0.5px;
}

nav.main .account-menu>a.text-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--body-color);
  border: 1px solid var(--border-color);
  font-weight: 600;
  color: var(--selected-color);
  text-decoration: none;
  transition: var(--tran-03);
  flex-shrink: 0;
}

nav.main .account-menu>a.text-small:hover {
  background: linear-gradient(135deg, var(--selected-color), var(--selected-color-dark));
  color: #fff;
  border-color: var(--border-color-light);
}

nav.main li a {
  list-style: none;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  text-decoration: none;
  transition: var(--tran-03);
}

nav.main li a:hover {
  background-color: var(--primary-color);
}

nav.main li a:hover .icon,
nav.main li a:hover .text {
  color: var(--sidebar-color);
}

body.dark nav.main li a:hover .icon,
body.dark nav.main li a:hover .text {
  color: var(--edgypro-text-color);
}

nav.main .menu-bar {
  height: calc(100% - 55px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: scroll;
}

.menu-bar::-webkit-scrollbar {
  display: none;
}

nav.main .menu-bar .mode {
  margin-top: 5px !important;
  border-radius: 6px;
  background: var(--body-color) !important;
  position: relative;
  transition: var(--tran-05);
}

.menu-bar .mode .sun-moon {
  height: 30px;
  width: 60px;
}

.mode .sun-moon i {
  position: absolute;
}

.toggle-switch {
  position: absolute;
  right: 0;
  height: 100%;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}

.toggle-switch .switch {
  position: relative;
  height: 22px;
  width: 40px;
  border-radius: 25px;
  background-color: var(--toggle-color);
  transition: var(--tran-05);
}

/* When toggled, change the background to blue */
.toggle-switch .toggled.switch {
  background-color: var(--selected-color);
}

.switch::before {
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background-color: var(--sidebar-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: var(--tran-04);
}

.toggled.switch::before {
  left: 20px;
}

.style-selector {
  border: 1px solid var(--border-color);
  min-height: 32px;
  max-height: 32px;
  list-style: none;
  display: flex;
  margin: 6px 0px;
  background: var(--body-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--item-shadow);
  transition: var(--tran-03);
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow-y: hidden;
  align-items: center;
  flex-wrap: nowrap;
}

.style-text {
  cursor: pointer;
  user-select: none;
  margin: 3px 10px;
  margin-left: 0;
  text-align: left;
  white-space: nowrap;
  color: var(--edgypro-text-color);
  font-size: 14px;
  font-weight: 500;
}

.style-select {
  height: 24px;
  width: 35%;
  flex-shrink: 0;
  font-size: 12px;
  padding: 1px 18px;
  margin: 0 10px 0 auto;
  /* Adjusted margin to align to the right */
  border: 1px solid var(--border-color);
  background-color: var(--sidebar-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 9px;
  border-radius: var(--radius-sm);
  color: var(--edgypro-text-color);
  transition: var(--tran-03);
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}

.style-select:hover {
  border-color: var(--border-color-light);
  background-color: var(--sidebar-color);
  color: var(--selected-color);
}

#font-select option[value="arial"] {
  font-family: 'Arial', sans-serif !important;
}

#font-select option[value="comicsans"] {
  font-family: 'Comic Sans MS', cursive, sans-serif !important;
}

#font-select option[value="verdana"] {
  font-family: 'Verdana', sans-serif !important;
}

#font-select option[value="tahoma"] {
  font-family: 'Tahoma', sans-serif !important;
}

#font-select option[value="courier"] {
  font-family: 'Courier New', monospace !important;
}

#font-select option[value="georgia"] {
  font-family: 'Georgia', serif !important;
}

#font-select option[value="times"] {
  font-family: 'Times New Roman', serif !important;
}

#font-select option[value="trebuchet"] {
  font-family: 'Trebuchet MS', sans-serif !important;
}

#font-select option[value="impact"] {
  font-family: 'Impact', sans-serif !important;
}

#font-select option[value="lucida"] {
  font-family: 'Lucida Sans', sans-serif !important;
}

.checkbox {
  visibility: hidden;
  margin: 0 !important;
}

/* .checkbox {
    position: relative;
    display: inline-block;
    width: 18px; 
    height: 18px; 
    margin-right: 5px;
} */

/* .checkbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd; 
    border-radius: 0px; 
    transition: background-color 0.3s;
}

.checkbox:checked::before {
    background-color: #695CFE; 
}

.checkbox input:checked + label {
    color: #695CFE;
} */

#edgypro-icon {
  width: 42px;
  height: 42px;
  margin: 10px;
  transition: all ease 0.3s;
  user-select: none;
  float: right;
}

#edgypro-icon:hover {
  filter: invert(0.1);
}

.bottom-content {
  margin-top: 5px;
  text-align: center;
  align-items: center;
  display: block;
}

.bottom-buttons {
  margin-top: 5px;
  display: flex;
  /* Use flexbox for inline layout */
  gap: 5px;
  /* Adds spacing between buttons */
  align-items: center;
  /* Vertically aligns items */
}

#footer-button {
  margin: auto;
  /* Remove margins for better alignment */
  font-size: 13px;
  transition: var(--tran-03);
  text-decoration: none;
  color: var(--edgypro-text-color);
  padding: 5px 12px;
  /* Adjust padding for consistent spacing */
  border-radius: 999px;
  display: inline-flex;
  /* Ensures icon and text are aligned */
  align-items: center;
  opacity: 70%;
}

#footer-button i {
  font-size: 20px;
  margin-right: 5px;
  /* Adds spacing between icon and text */
}

#footer-button:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--selected-color) 0%, var(--selected-color-dark) 100%);
  opacity: 100%;
}

.header-btns {
  width: 150px;
  display: inline-block;
  justify-content: right;
  text-align: right;
  margin-right: 10px;
  transition: var(--tran-03)
}

#nav.main.close .header-btns button {
  opacity: 0;
  scale: 0;
}

.header-btns button {
  background: none;
  color: var(--edgypro-text-color);
  border: none;
  font-size: 18px;
  transition: var(--tran-03);
  margin: 0.5px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.header-btns .toggled-btn {
  color: var(--selected-color);
  background: var(--primary-color-light);
}

.header-btns button:hover {
  background: var(--primary-color-light);
  color: var(--selected-color);
  border: none;
  font-size: 18px;
}

.notification-badge {
  position: absolute;
  top: 15px;
  right: 5px;
  width: 12px;
  height: 12px;
  background-color: red;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.service-key-box {
  display: block;
  width: 100%;
  background-color: var(--sidebar-color);
  border: 1px solid var(--border-color);
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  margin-top: 12px;
}

#key-redeem-span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 16px 14px;
  border-radius: var(--radius);
  background: var(--body-color);
  border: 1px solid var(--border-color);
  margin-bottom: 0;
}

#key-input-box {
  width: 150px;
  height: 34px;
  border: 1px solid transparent;
  background-color: var(--primary-color-light);
  color: var(--edgypro-text-color);
  border-radius: 5px;
  text-align: center;
  font-size: 0.85em;
  margin-bottom: 6px;
  margin-top: 2px;
  transition: var(--tran-03);
}

#key-input-box:focus {
  background-color: var(--sidebar-color);
  border: 1px solid var(--border-color-light);
  border-radius: 5px;
}

#key-redeem-btn {
  width: fit-content;
  height: 25px;
  background: linear-gradient(30deg, var(--selected-color) 50%, var(--selected-color-dark) 100%);
  color: #dedede;
  padding: 3px 10px 2px;
  font-size: 0.85em;
  font-weight: 800;
  border-radius: 3px;
  border: 1px solid var(--primary-color);
  transition: var(--tran-03);
}

#key-redeem-btn:hover {
  background: linear-gradient(90deg, var(--selected-color) 50%, var(--selected-color-dark) 100%);
  border: 1px solid var(--selected-color);
  border-radius: 5px;
  color: #fff;
}


/* CSS code with new class names */
.advance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--tran-03);
  z-index: 999999999999999999999999999;
  /* Basically on top of everything ^^^ */
}

.advance-overlay-box {
  width: 450px;
  height: 150px;
  background: var(--body-color);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.15s ease-in-out;
  border: 1px solid var(--body-color);
  box-shadow: 0px 0px 15px var(--body-color);
}

.advance-overlay-box:hover {
  border-radius: 3px;
  margin-bottom: 5px;
  border: 1px solid var(--primary-color-light);
  box-shadow: 0px 5px 15px var(--body-color);
}

.advance-overlay-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--edgypro-text-color);
}

.advance-overlay-dropdown {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: none;
  background-color: var(--sidebar-color);
  color: var(--edgypro-text-color);
  box-shadow: 0px 0px 15px var(--body-color);
  cursor: grab;
}

.advance-overlay-button-span {
  display: flex;
  text-align: center;
  justify-content: center;
  gap: 5px;
}

.advance-overlay-start-button {
  background: linear-gradient(30deg, var(--selected-color) 50%, var(--selected-color-dark) 100%);
  color: var(--edgypro-text-color);
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: var(--tran-03);
  display: block;
}

.advance-overlay-start-button:hover {
  background: linear-gradient(90deg, var(--selected-color) 0%, var(--selected-color-dark) 100%);
  color: #fff;
  border-radius: 5px;
}

.advance-overlay-start-button:disabled {
  display: none;
}

.advance-overlay-cancel-button {
  background: linear-gradient(90deg, #f03d3d 0%, #9d0000 100%);
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: var(--tran-03);
}

.advance-overlay-cancel-button:hover {
  background: linear-gradient(90deg, #e42525 0%, #f03d3d 100%);
  border-radius: 5px;
}

#wip-feature {
  margin-left: 3px;
  color: var(--edgypro-text-color);
  transition: var(--tran-05);
}

.checkbox:checked+label #wip-feature {
  color: #fff;
}

#wip-feature:hover>.wip-disclaimer {
  display: block !important;
}

.menu-links .nav-link:has(#wip-feature:hover) {
  max-height: 100px;
}

.menu-links .nav-link {
  position: relative;
  padding: 0 !important;
  /* Position relative for absolute positioning of the disclaimer */
}

.menu-links .nav-link.settings-open {
  max-height: 600px !important;
}

nav.main li:has(input:checked) .settings-panel {
  background-color: var(--selected-color-dark);
}

nav.main li:has(input:checked) .settings-panel .text-small {
  color: #ccc !important;
}

/* A selected feature paints its settings panel dark (--selected-color-dark), so
   accent bits that were --selected-color (the slider value + thumb) blend in.
   Swap them for a light, high-contrast color like the white feature title. */
nav.main li:has(input:checked) .settings-panel .setting-slider-value {
  color: #fff;
}

nav.main li:has(input:checked) .settings-panel input[type="range"]::-webkit-slider-thumb,
nav.main li:has(input:checked) .settings-panel input[type="range"]::-webkit-slider-thumb:hover {
  background: #fff;
}

nav.main li:has(input:checked) .settings-panel input[type="range"]::-moz-range-thumb,
nav.main li:has(input:checked) .settings-panel input[type="range"]::-moz-range-thumb:hover {
  background: #fff;
}

.settings-panel {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  display: block;
  margin: 10px;
  padding: 5px 8px;
  text-align: left;
  /* transition: var(--tran-03); */
  background: var(--primary-color-light);
  /* Your preferred background */
  border: none;
  border-radius: 3px;
  /* box-shadow: 0px 0px 15px var(--body-color); */
}

.settings-panel:has(input:checked) {
  box-shadow: 0px 0px 0px var(--body-color)
}

/* Cleaned-up settings controls: inline toggles + sliders */
.settings-panel .setting-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 6px 4px 6px 2px;
}

.settings-panel .setting-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.settings-panel .setting-toggle .switch {
  position: relative;
  height: 22px;
  width: 40px;
  border-radius: 25px;
  background-color: var(--toggle-color);
  /* inset outline keeps the off-state toggle defined without shifting the knob */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edgypro-text-color) 22%, transparent);
  transition: var(--tran-05);
}

.settings-panel .setting-toggle .toggled.switch {
  background-color: var(--selected-color);
}

.settings-panel .setting-slider-row {
  padding: 6px 4px 8px 2px;
}

.settings-panel .setting-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.settings-panel .setting-slider-value {
  color: var(--selected-color);
  font-weight: 700;
  font-size: 12px;
}

/* Higher specificity than `nav.main input[type=range]` so width/align actually apply:
   full-width under the label instead of the narrow, right-drifting default. */
.settings-panel input[type="range"].setting-slider-input {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 6px 0 0;
  height: 6px;
  /* Track must contrast with the panel: both defaulted to --primary-color-light and vanished */
  background: color-mix(in srgb, var(--edgypro-text-color) 32%, transparent);
  border-radius: 6px;
}

.wip-disclaimer {
  margin-top: 5px;
  display: none;
  position: absolute;
  top: 100%;
  /* Position below the label */
  left: 0;
  width: 100%;
  padding: 3px 2px 2px 2px;
  white-space: normal;
  height: 38px;
  font-size: 13.5px;
  color: var(--edgypro-text-color);
  background-color: var(--sidebar-color);
  border-radius: 5px;
  transition: var(--tran-03);
  z-index: 2147483647;
  opacity: 90%;
  border: 1px solid var(--sidebar-color);
}

.wip-disclaimer>p {
  padding: 0 !important;
}

.nav-link:hover>label>span>.coming-soon-disclaimer {
  opacity: 100%;
}

.coming-soon-disclaimer {
  position: absolute;
  inset: 0;
  padding: 2px;
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--edgypro-text-color);
  background-color: var(--primary-color-light);
  border-radius: 5px;
  transition: var(--tran-03);
  z-index: 1;
  /* Lower z-index */
  opacity: 0%;
  border: 2px solid var(--sidebar-color);
  transition: var(--tran-05);
}

.coming-soon-disclaimer>p {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

#brainly-search-button {
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  font-weight: 800;
  font-size: 14px;
  padding: 2px;
  transition: var(--tran-05);
}

#brainly-search-button>i {
  margin-right: 2px;
}

#brainly-search-button:hover {
  background-color: #100;
  border-radius: 3px;
}

#brainly-search-button:hover+div[qid] {
  border: 1px solid rgba(20, 20, 20, 0.9);
}

#brainly-search-button:hover+div[class*=\"Content_Question\"][id] {
  border: 1px solid rgba(20, 20, 20, 0.9);
}

.welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999999999999999999999999;
  transition: var(--tran-05);
  /* Basically on top of everything ^^^ */
}

.welcome-overlay-box {
  position: relative;
  max-width: 500px;
  background: var(--body-color);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: var(--tran-05);
  box-shadow: 0px 0px 15px var(--body-color);
}

.welcome-overlay-box:hover {
  border-radius: 3px;
  margin-bottom: 5px;
  box-shadow: 0px 5px 15px var(--body-color);
}

.welcome-overlay-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 0 26px;
  color: var(--edgypro-text-color);
}

.welcome-overlay-box-contents {
  color: var(--edgypro-text-color);
  margin: 5px;
  font-size: 14px;
  font-weight: 500;
  transition: var(--tran-05);
}

.welcome-overlay-box-contents a {
  color: var(--selected-color);
  margin: 2px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.welcome-overlay-box-contents a:hover {
  text-decoration: underline;
}


.welcome-overlay-button-span {
  display: flex;
  text-align: center;
  justify-content: center;
}

.welcome-overlay-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
  z-index: 3;
}

.welcome-overlay-close-button::before {
  content: "\00d7";
  font-size: 24px;
  line-height: 1;
  color: #b7b7b7;
  transition: color 0.18s ease;
}

.welcome-overlay-close-button:hover {
  background: rgba(240, 61, 61, 0.16);
}

.welcome-overlay-close-button:hover::before {
  color: #ff4d4d;
}

.edgypro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999999999999999999999999;
  transition: var(--tran-05);
  /* Basically on top of everything ^^^ */
}

.edgypro-overlay-box {
  position: relative;
  max-width: 500px;
  background: var(--body-color);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.15s ease-in-out;
  border: 1px solid var(--body-color);
  box-shadow: 0px 0px 15px var(--body-color);
}

.edgypro-overlay-box:hover {
  border-radius: 3px;
  margin-bottom: 5px;
  border: 1px solid var(--primary-color-light);
  box-shadow: 0px 5px 15px var(--body-color);
}

.edgypro-overlay-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 0 26px;
  color: var(--edgypro-text-color);
}

.edgypro-overlay-box-contents {
  max-height: 500px;
  color: var(--edgypro-text-color);
  margin: 5px;
  font-size: 14px;
  font-weight: 500;
  transition: var(--tran-05);
  overflow-y: auto;
}

.edgypro-overlay-box-contents::-webkit-scrollbar {
  width: 8px;
  background-color: var(--sidebar-color);
  transition: var(--tran-05);
}

.edgypro-overlay-box-contents::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 10px;
  transition: var(--tran-05);
}

.edgypro-overlay-box-contents::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-color-light);
  transition: var(--tran-05);
}

.edgypro-overlay-box-contents a {
  color: var(--selected-color);
  margin: 2px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.edgypro-overlay-box-contents a:hover {
  text-decoration: underline;
}

.edgypro-overlay-button-span {
  display: flex;
  text-align: center;
  justify-content: center;
}

.edgypro-overlay-start-button {
  margin: 2px 5px;
  background: linear-gradient(30deg, var(--primary-color) 50%, var(--primary-color-light) 100%);
  color: var(--edgypro-text-color);
  padding: 10px 20px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  transition: var(--tran-03);
  display: block;
}

.edgypro-overlay-start-button:hover {
  background: linear-gradient(90deg, var(--selected-color) 50%, var(--selected-color-dark) 100%);
  color: #fff;
  border-radius: 5px;
}

.edgypro-overlay-start-button:disabled {
  display: none;
}

.edgypro-overlay-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
  z-index: 3;
}

.edgypro-overlay-close-button::before {
  content: "\00d7";
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #b7b7b7;
  transition: color 0.18s ease;
}

.edgypro-overlay-close-button:hover {
  background: rgba(240, 61, 61, 0.16);
}

.edgypro-overlay-close-button:hover::before {
  color: #ff4d4d;
}

/* "important" countdown: seconds number inside a pulsing ring so it's obviously a timer */
.edgypro-overlay-close-button.is-counting {
  color: #ffb3b3;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  cursor: not-allowed;
  border: 2px solid rgba(240, 61, 61, 0.55);
  background: rgba(240, 61, 61, 0.14);
  border-radius: 50%;
  animation: edgyCountPulse 1s ease-in-out infinite;
}

.edgypro-overlay-close-button.is-counting:hover {
  background: rgba(240, 61, 61, 0.14);
}

.edgypro-overlay-close-button.is-counting::before {
  content: none;
}

@keyframes edgyCountPulse {
  0%,
  100% {
    border-color: rgba(240, 61, 61, 0.35);
    box-shadow: 0 0 0 0 rgba(240, 61, 61, 0.35);
  }
  50% {
    border-color: rgba(240, 61, 61, 0.9);
    box-shadow: 0 0 0 5px rgba(240, 61, 61, 0);
  }
}

.edgypro-overlay-close-button:disabled {
  cursor: not-allowed;
}

.edgypro-overlay-input {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 12px;
  padding: 10px 12px;
  background: var(--sidebar-color);
  color: var(--edgypro-text-color);
  border: 1px solid var(--primary-color-light);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.18s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
}

.edgypro-overlay-input::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}

.edgypro-overlay-input::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 10px;
  transition: var(--tran-05);
}

.edgypro-overlay-input::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-color-light);
}

.edgypro-overlay-input:focus {
  border-color: var(--selected-color);
}

.key-end-date {
  margin: 0;
  position: relative;
  color: var(--edgypro-text-color);
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
}

.edgypro-legend {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 14px;
  margin-bottom: 5px;
  color: var(--edgypro-text-color);
  transition: var(--tran-03);
  background-color: var(--sidebar-color);
  user-select: none;
  position: sticky;
  top: 0;
  margin: 0px 5px;
  padding: 5px 0px;
  z-index: 9999;
}

.edgypro-status-item {
  display: flex;
  align-items: center;
}

.edgypro-status-box {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border-radius: 2px;
}

:not(body.dark) .edgypro-status-box {
  border: 1px solid;
}


.edgypro-enabled-legend {
  background-color: var(--selected-color);
  transition: var(--tran-03);
}

.edgypro-disabled-legend {
  background-color: var(--primary-color-light);
  transition: var(--tran-03);
}

.edgypro-disabled-legend:hover {
  background-color: var(--sidebar-color);
}

.fa,
.far,
.fas {
  /* Fix Icons */
  font-family: Font Awesome\ 5 Free !important;
}

/* .user-id-span {
  color: var(--edgypro-text-color);
  font-size: 10px;
  text-align: center;
  align-items: row;
  display: block;
}

.user-id-span i:hover {
  cursor: pointer;
}

#user-id-text {
  margin-left: 2px;
}
#toggle-user-id {
  margin-right: 2px;
} */

.edgypro-unhide-button {
  position: fixed;
  bottom: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.78);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--selected-color, #0a84ff) 55%, transparent);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 2147483647;
  opacity: 0.55;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  animation: edgyproUnhidePulse 2.6s ease-in-out infinite;
}

.edgypro-unhide-button:hover {
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--selected-color, #0a84ff) 18%, transparent), 0 6px 18px rgba(0, 0, 0, 0.55);
  animation: none;
}

@keyframes edgyproUnhidePulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 0 color-mix(in srgb, var(--selected-color, #0a84ff) 45%, transparent);
  }
  50% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 6px transparent;
  }
}

body.edgypro-reduce-motion .edgypro-unhide-button {
  animation: none;
}

/* ===== Mobile / touch optimizations ===== */
/* The header is the drag handle: block native touch gestures so dragging is
   smooth, while taps on its buttons still register (guarded in JS). */
nav.main header {
  touch-action: none;
}

/* Let the feature list scroll vertically on touch without pulling the page. */
nav.main .menu-links {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Don't select text / pop the iOS callout while dragging the menu. */
nav.main.moving,
nav.main.moving * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Prevent iOS from auto-zooming when focusing the menu's text fields
   (any input under 16px triggers the zoom). */
@media (max-width: 600px),
(pointer: coarse) {

  nav.main .nav-input,
  nav.main .nav-num,
  nav.main .menu-search-input {
    font-size: 16px;
  }

  .edgypro-overlay-input {
    font-size: 16px;
  }
}

/* Keep menu popups within the viewport on small screens. */
@media (max-width: 600px) {
  .edgypro-overlay-box {
    max-width: 90vw;
  }
}

/* ============================================================================
   EP2 REDESIGN — Edgenuity / EdgeEx only. Scoped under `nav.main.ep2` so Apex
   (which shares this stylesheet) keeps the old skin. Values mirror the approved
   concept (menu/redesign-preview/index.html) 1:1; accent comes from the theme.
   ============================================================================ */
nav.main.ep2 {
  --ep-accent: var(--selected-color);
  --ep-accent-2: var(--selected-color-dark);
  --ep-soft: color-mix(in srgb, var(--ep-accent) 10%, transparent);
  --ep-ring: color-mix(in srgb, var(--ep-accent) 35%, transparent);
  --ep-panel: var(--sidebar-color);
  --ep-panel-2: #eef1fb;
  --ep-row: #ffffff;
  --ep-border: #d9d9d9;
  --ep-border-strong: #c7cedd;
  --ep-text: #505050;
  --ep-text-soft: #7b8191;
  --ep-text-faint: #a6abb8;
  --ep-shadow: 0 24px 60px -18px rgba(23, 34, 62, .42), 0 6px 18px -8px rgba(23, 34, 62, .22);
  --ep-shadow-row: 0 1px 2px rgba(23, 34, 62, .05);
  --ep-sp: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ep-ease: cubic-bezier(0.4, 0, 0.2, 1);

  box-sizing: border-box;
  width: 344px;
  height: 558px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--ep-border);
  background: var(--ep-panel);
  box-shadow: var(--ep-shadow);
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  transition: background .5s var(--ep-ease), border-color .5s var(--ep-ease), box-shadow .5s var(--ep-ease),
    height .4s var(--ep-ease), opacity .25s var(--ep-ease), rotate .45s var(--ep-sp), scale .45s var(--ep-sp);
}
nav.main.ep2 *, nav.main.ep2 *::before, nav.main.ep2 *::after { box-sizing: border-box; }
nav.main.ep2 input[type="text"], nav.main.ep2 input[type="number"], nav.main.ep2 textarea { user-select: text; -webkit-user-select: text; }

body.dark nav.main.ep2 {
  --ep-panel-2: #1c1d1e;
  --ep-row: #2a2b2c;
  --ep-border: #3a3b3c;
  --ep-border-strong: #4a4b4c;
  --ep-text: #cccccc;
  --ep-text-soft: #9a9b9c;
  --ep-text-faint: #6f7071;
  --ep-shadow: 0 28px 70px -18px rgba(0, 0, 0, .75), 0 6px 20px -8px rgba(0, 0, 0, .55);
  --ep-shadow-row: 0 1px 2px rgba(0, 0, 0, .35);
}
/* with Page Dark Mode the page behind is already near-black, so the big dark halo reads as a smear: pull it in */
body.dark.edgypro-page-dark nav.main.ep2 {
  --ep-shadow: 0 14px 34px -16px rgba(0, 0, 0, .5), 0 3px 10px -6px rgba(0, 0, 0, .35);
  --ep-shadow-row: 0 1px 1px rgba(0, 0, 0, .2);
}
/* concept theme tweaks: readable yellow, lighter purple, softer pink */
body.yellow-theme nav.main.ep2 { --ep-accent: #E6B800; --ep-accent-2: #CCCC00; }
body.purple-theme nav.main.ep2 { --ep-accent: #8F6BFF; --ep-accent-2: #6E45E8; }
body.pink-theme nav.main.ep2 { --ep-accent: #E05CC0; --ep-accent-2: #CC66CC; }
body.pink-theme nav.main.ep2 #edgypro-icon { filter: hue-rotate(90deg) saturate(1.2) brightness(1.3); }

body.edgypro-glass nav.main.ep2 {
  background: color-mix(in srgb, var(--ep-panel) 72%, transparent);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-color: color-mix(in srgb, var(--ep-border-strong) 80%, transparent);
}
body.edgypro-glass nav.main.ep2 header,
body.edgypro-glass nav.main.ep2 .menu-links,
body.edgypro-glass nav.main.ep2 .customize-menu,
body.edgypro-glass nav.main.ep2 .account-menu { background: transparent !important; }
/* the translucent glass panel lowers contrast, so lift section labels from faint to soft */
body.edgypro-glass nav.main.ep2 li.ep2-group,
body.edgypro-glass nav.main.ep2 .ep2-card-title,
body.edgypro-glass nav.main.ep2 #footer-button { color: color-mix(in srgb, var(--ep-text) 80%, transparent); }
body.edgypro-glass nav.main.ep2 #footer-button:hover { color: var(--ep-accent); }
body.edgypro-glass nav.main.ep2 li.ep2-group::after { background: color-mix(in srgb, var(--ep-text-soft) 35%, transparent); }

/* drag: lifted shadow; rotate/scale are set inline by the drag loop */
nav.main.ep2.moving { box-shadow: 0 46px 100px -22px rgba(23, 34, 62, .55), 0 12px 34px -10px rgba(23, 34, 62, .38); }
body.dark nav.main.ep2.moving { box-shadow: 0 50px 115px -24px rgba(0, 0, 0, .85), 0 12px 34px -10px rgba(0, 0, 0, .6); }
/* lifted shadow while dragging over an already-dark page: keep the lift, lose the black smear */
body.dark.edgypro-page-dark nav.main.ep2.moving { box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .5), 0 8px 22px -10px rgba(0, 0, 0, .35); }
nav.main.ep2.moving.ep2-calm { box-shadow: var(--ep-shadow); }

/* ---------- minimise ---------- */
nav.main.ep2.close { height: 72px; border-radius: 20px; }
nav.main.ep2.close header { padding: 0; }
nav.main.ep2.close .menu-bar { opacity: 0; pointer-events: none; }
nav.main.ep2.close .header-btns { opacity: 0; max-width: 0; padding: 0; border-width: 0; transform: scale(.85); pointer-events: none; }
nav.main.ep2.close .ep2-count { opacity: 0 !important; max-width: 0 !important; padding: 0 !important; margin-left: -11px !important; }
nav.main.ep2.close .logo-text:hover .name { transform: none; }

/* footer links move up into the header while minimised (they slide in as the page tabs slide out) */
nav.main.ep2 .ep2-head-links {
  flex-shrink: 0; display: flex; align-items: center; gap: 2px; height: 36px;
  max-width: 0; padding: 0; margin-left: -11px; overflow: hidden; opacity: 0; transform: scale(.85); pointer-events: none;
  transition: opacity .3s var(--ep-ease), transform .3s var(--ep-sp), max-width .35s var(--ep-ease), padding .3s var(--ep-ease), margin-left .3s var(--ep-ease);
}
nav.main.ep2 .ep2-head-links a {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  color: var(--ep-text-soft); font-size: 19px; text-decoration: none; background: transparent;
  transition: color .2s var(--ep-ease), background .2s var(--ep-ease), transform .2s var(--ep-sp);
}
nav.main.ep2 .ep2-head-links a:hover { color: var(--ep-accent); background: var(--ep-soft); transform: translateY(-1px); }
nav.main.ep2.close .ep2-head-links { max-width: 80px; margin-left: 0; opacity: 1; transform: scale(1); pointer-events: auto; transition-delay: .12s, .12s, .08s, 0s, 0s; }


/* ---------- header (drag handle) ---------- */
nav.main.ep2 header {
  position: relative; display: block; padding: 2px 2px 12px; background: transparent !important;
  border: none !important; cursor: grab; transition: padding .4s var(--ep-ease);
}
nav.main.ep2 header:hover, nav.main.ep2 header:active, nav.main.ep2 header:focus { border: none !important; }
nav.main.ep2.moving header, nav.main.ep2 header:active { cursor: grabbing; }
nav.main.ep2 header .image-text { position: relative; display: flex; align-items: center; gap: 11px; width: calc(100% + 10px); margin: -5px; padding: 5px; border-radius: 13px; transition: background .25s var(--ep-ease); }
/* grab affordance: soft tint + grip pill when hovering the drag area (not the page tabs) */
nav.main.ep2 header:hover:not(:has(.header-btns:hover, .toggle:hover, .ep2-head-links:hover)) .image-text { background: color-mix(in srgb, var(--ep-text) 5%, transparent); }
nav.main.ep2.moving header .image-text { background: color-mix(in srgb, var(--ep-accent) 9%, transparent); }
nav.main.ep2 header::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 34px; height: 4px; border-radius: 4px; pointer-events: none;
  background: var(--ep-border-strong); opacity: 0; transform: translateX(-50%) scaleX(.5);
  transition: opacity .25s var(--ep-ease), transform .3s var(--ep-sp), background .2s var(--ep-ease);
}
nav.main.ep2 header:hover:not(:has(.header-btns:hover, .toggle:hover, .ep2-head-links:hover))::before { opacity: 1; transform: translateX(-50%) scaleX(1); }
nav.main.ep2.moving header::before { opacity: 1; transform: translateX(-50%) scaleX(1.25); background: var(--ep-accent); }
nav.main.ep2 header .image-text > span:first-child { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; }
nav.main.ep2 #edgypro-icon { float: none; width: 42px; height: 42px; margin: 0; object-fit: contain; transition: filter .5s var(--ep-ease); }
nav.main.ep2 #edgypro-icon:hover { filter: none; }
nav.main.ep2 header .logo-text { display: flex; flex-direction: column; justify-content: center; margin-right: auto; min-width: 0; height: 42px; cursor: inherit; }
nav.main.ep2 header .image-text .name { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2; white-space: nowrap; color: var(--ep-text); transform: translateY(0); transition: transform .3s var(--ep-ease); }
nav.main.ep2 header .image-text .profession {
  font-size: 11px; font-weight: 500; color: var(--ep-text-faint); white-space: nowrap; line-height: 1.3;
  opacity: 0; max-height: 0; margin-top: 0; transform: translateY(-3px); overflow: hidden; pointer-events: none;
  transition: opacity .3s var(--ep-ease), max-height .3s var(--ep-ease), transform .3s var(--ep-ease), margin-top .3s var(--ep-ease);
}
nav.main.ep2 header .logo-text:hover .name { transform: translateY(-2px); }
nav.main.ep2 header .logo-text:hover .profession { opacity: .75; max-height: 1.4em; margin-top: -1px; transform: translateY(0); }

/* page tabs */
nav.main.ep2 .header-btns {
  display: flex; gap: 2px; width: auto; max-width: 130px; margin: 0; padding: 3px; flex-shrink: 0; overflow: hidden; text-align: initial;
  background: var(--ep-panel-2); border: 1px solid var(--ep-border); border-radius: 11px;
  transition: background .45s var(--ep-ease), border-color .45s var(--ep-ease), opacity .25s var(--ep-ease), max-width .32s var(--ep-ease), transform .28s var(--ep-ease), padding .28s var(--ep-ease);
}
nav.main.ep2 .header-btns button {
  position: relative; width: 30px; height: 28px; margin: 0; padding: 0; border: none; border-radius: 8px;
  display: grid; place-items: center; font-size: 17px; color: var(--ep-text-soft); background: transparent; cursor: pointer;
  opacity: 1; scale: 1; transition: color .2s var(--ep-ease), background .2s var(--ep-ease);
}
nav.main.ep2 .header-btns button:hover { color: var(--ep-text); background: transparent; border: none; font-size: 17px; }
nav.main.ep2 .header-btns .toggled-btn, nav.main.ep2 .header-btns .toggled-btn:hover {
  color: #fff; background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); box-shadow: 0 4px 10px -3px var(--ep-ring);
}
nav.main.ep2 .header-btns .notification-badge { top: 2px; right: 2px; width: 9px; height: 9px; font-size: 0; }

/* active-feature count in the header (off-home, or when the search bar is hidden) */
nav.main.ep2 .ep2-count {
  flex-shrink: 0; height: 36px; display: inline-flex; align-items: center; gap: 5px; line-height: 1; white-space: nowrap;
  max-width: 0; padding: 0; margin-left: -11px; overflow: hidden; opacity: 0; transform: scale(.85); pointer-events: none;
  border: none; border-radius: 9px; background: var(--ep-soft); color: var(--ep-accent); font-size: 12.5px; font-weight: 700;
  transition: opacity .3s var(--ep-ease), transform .3s var(--ep-sp), max-width .35s var(--ep-ease), padding .3s var(--ep-ease), margin-left .3s var(--ep-ease);
}
nav.main.ep2 .ep2-count i { font-size: 15px; }
nav.main.ep2.ep2-offhome .ep2-count,
body.edgypro-hide-search nav.main.ep2 .ep2-count { max-width: 90px; padding: 0 10px; margin-left: 0; opacity: 1; transform: scale(1); pointer-events: auto; }

/* collapse chevron: sits on the panel edge, vertically centred on the logo row it lives in (the row's right edge is
   5px past the header's, so -22px here = the old -27px from the header). Centring uses the individual `translate`
   property: it is applied before `rotate`, so flipping the chevron when minimised can't push it off-centre
   (a translateY inside `transform` runs after the 180° rotate and moved it 13px DOWN instead of up). */
nav.main.ep2 header .toggle {
  position: absolute; top: 50%; right: -22px; width: 26px; height: 26px; margin: 0; z-index: 6;
  display: grid; place-items: center; font-size: 18px; line-height: 1; color: #fff; border-radius: 50%;
  background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2));
  border: 2px solid var(--ep-panel); box-sizing: border-box; box-shadow: 0 4px 12px -3px var(--ep-ring);
  translate: 0 -50%; transform: none; transition: rotate .35s var(--ep-ease), scale .3s var(--ep-ease);
}
nav.main.ep2 header .toggle::before { display: block; line-height: 1; }
nav.main.ep2 header .toggle:hover { background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); color: #fff; scale: 1.08; }
nav.main.ep2.close .toggle { translate: 0 -50%; transform: none; rotate: 180deg; }
body.dark nav.main.ep2 header .toggle { color: #fff; }

/* ---------- views ---------- */
nav.main.ep2 .menu-bar { height: calc(100% - 56px); display: flex; flex-direction: column; overflow: hidden; transition: opacity .3s var(--ep-ease); }
nav.main.ep2 .menu-bar::-webkit-scrollbar { display: none; }
nav.main.ep2 .menu-bar > .menu { flex: 1; min-height: 0; margin: 0 !important; display: flex; flex-direction: column; animation: ep2ViewIn .32s var(--ep-ease) both; }
@keyframes ep2ViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

nav.main.ep2 .menu-links, nav.main.ep2 .customize-menu, nav.main.ep2 .account-menu {
  scrollbar-width: thin; scrollbar-color: var(--ep-border-strong) transparent;
  /* edge fades: --ep-ft / --ep-fb are set by ep2ScrollFade() when there's more to scroll that way */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ep-ft), #000 calc(100% - var(--ep-fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ep-ft), #000 calc(100% - var(--ep-fb)), transparent 100%);
  transition: --ep-ft .25s var(--ep-ease), --ep-fb .25s var(--ep-ease);
}
@property --ep-ft { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ep-fb { syntax: "<length>"; inherits: false; initial-value: 0px; }
nav.main.ep2 .menu-links::-webkit-scrollbar, nav.main.ep2 .customize-menu::-webkit-scrollbar, nav.main.ep2 .account-menu::-webkit-scrollbar { width: 7px; background: transparent; }
nav.main.ep2 .menu-links::-webkit-scrollbar-thumb, nav.main.ep2 .customize-menu::-webkit-scrollbar-thumb, nav.main.ep2 .account-menu::-webkit-scrollbar-thumb {
  background: var(--ep-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
}
nav.main.ep2 .menu-links::-webkit-scrollbar-thumb:hover, nav.main.ep2 .customize-menu::-webkit-scrollbar-thumb:hover, nav.main.ep2 .account-menu::-webkit-scrollbar-thumb:hover {
  background: var(--ep-text-faint); background-clip: padding-box;
}

/* ---------- search row ---------- */
nav.main.ep2 .ep2-subrow { display: flex; align-items: center; gap: 9px; padding: 0 2px 11px; flex-shrink: 0; }
body.edgypro-hide-search nav.main.ep2 .ep2-subrow { display: none; }
nav.main.ep2 .menu-search {
  position: static; flex: 1; min-width: 0; height: 38px; margin: 0; padding: 0 12px; gap: 8px;
  display: flex; align-items: center; background: var(--ep-panel-2); border: 1px solid var(--ep-border); border-radius: 11px; box-shadow: none;
  transition: border-color .2s var(--ep-ease), box-shadow .2s var(--ep-ease), background .45s var(--ep-ease);
}
nav.main.ep2 .menu-search:focus-within { border-color: var(--ep-accent); box-shadow: 0 0 0 3px var(--ep-soft); }
nav.main.ep2 .menu-search-icon { font-size: 17px; color: var(--ep-text-faint); opacity: 1; }
nav.main.ep2 .menu-search-input { font-size: 13px !important; font-weight: 500; color: var(--ep-text) !important; }
nav.main.ep2 .menu-search-input::placeholder { color: var(--ep-text-faint) !important; opacity: 1 !important; }
nav.main.ep2 .menu-search-clear { color: var(--ep-text-faint); }
nav.main.ep2 .ep2-home-count {
  flex-shrink: 0; height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; white-space: nowrap;
  border-radius: 11px; background: var(--ep-soft); color: var(--ep-accent); font-size: 13px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--ep-accent) 22%, transparent);
}
nav.main.ep2 .ep2-home-count i { font-size: 16px; }

/* ---------- feature list ---------- */
nav.main.ep2 .menu-links {
  flex: 1; min-height: 0; height: auto; margin: 0 -4px 0 0; padding: 2px 6px 2px 2px; display: block;
  overflow-y: auto; overflow-x: hidden; background: transparent !important; border-radius: 0;
}
nav.main.ep2 .menu-search-empty { color: var(--ep-text-soft); }
nav.main.ep2 .menu-links > .login-msg { color: var(--ep-text-soft); font-size: 14px; }

nav.main.ep2 li.ep2-group {
  display: flex; align-items: center; gap: 8px; list-style: none;
  min-height: 0; max-height: none; margin: 0 !important; padding: 12px 6px 7px;
  border: none; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; cursor: default;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; color: var(--ep-text-faint);
}
nav.main.ep2 li.ep2-group::after { content: ""; flex: 1; height: 1px; background: var(--ep-border); }
nav.main.ep2 li.ep2-group:hover { border: none; box-shadow: none; }

/* EdgeEx: Classic-only features live in a collapsed "Disabled on EdgeEx" group */
nav.main.ep2 li.ep2-group.ep2-archived-group { cursor: pointer; margin-top: 8px !important; border-radius: 8px; transition: color .2s var(--ep-ease); }
nav.main.ep2 li.ep2-group.ep2-archived-group:hover,
nav.main.ep2 li.ep2-group.ep2-archived-group:focus-visible { color: var(--ep-text-soft); outline: none; }
nav.main.ep2 li.ep2-group.ep2-archived-group::after { order: 1; }
nav.main.ep2 li.ep2-group.ep2-archived-group > i.bx { order: 2; font-size: 16px; transition: transform .25s var(--ep-ease); }
nav.main.ep2 .menu-links.ep2-archive-open li.ep2-group.ep2-archived-group > i.bx { transform: rotate(180deg); }
nav.main.ep2 li.ep2-archive-note {
  display: block; list-style: none; min-height: 0; max-height: none; margin: -2px 0 6px !important; padding: 0 6px;
  border: none; border-radius: 0; background: transparent !important; box-shadow: none; overflow: visible; cursor: default;
  text-align: left; white-space: normal; font-size: 11.5px; line-height: 1.45; color: var(--ep-text-faint);
}
/* disabled rows: no switch, never "on", info icon always shown, the whole row explains why */
nav.main.ep2 .nav-link.ep2-archived { opacity: .6 !important; transition: opacity .25s var(--ep-ease); }
nav.main.ep2 .nav-link.ep2-archived:hover { opacity: .9 !important; }
nav.main.ep2 .nav-link.ep2-archived > .ep2-row,
nav.main.ep2 .nav-link.ep2-archived:has(> input.checkbox:checked) > .ep2-row {
  --ep-row-cur: var(--ep-row); border-color: var(--ep-border); border-style: dashed; box-shadow: none; cursor: help;
}
nav.main.ep2 .nav-link.ep2-archived .ep2-chip { background: var(--ep-panel-2) !important; color: var(--ep-text-faint) !important; box-shadow: none !important; }
nav.main.ep2 .nav-link.ep2-archived .ep2-sw,
nav.main.ep2 .nav-link.ep2-archived .menu-item-toggler,
nav.main.ep2 .nav-link.ep2-archived .settings-panel,
nav.main.ep2 .nav-link.ep2-archived .coming-soon-disclaimer { display: none !important; }
nav.main.ep2 .nav-link.ep2-archived .ep2-row > .menu-item-info,
nav.main.ep2 .nav-link.ep2-archived .ep2-row:hover > .menu-item-info { position: static; transform: none; opacity: 1; pointer-events: auto; flex-shrink: 0; }
nav.main.ep2 .nav-link.ep2-archived .ep2-row > .menu-item-info::before { display: none; }
nav.main.ep2 .nav-link.ep2-archived .ep2-row:hover .nav-text { color: var(--ep-text) !important; }
nav.main.ep2 .menu-links:not(.ep2-archive-open):not(.ep2-searching) > li.nav-link.ep2-archived,
nav.main.ep2 .menu-links:not(.ep2-archive-open) > li.ep2-archive-note { display: none !important; }

/* each feature li is a plain wrapper: the visible card is .ep2-row, the drawer tucks under it */
nav.main.ep2 .menu-links > li.nav-link {
  display: block; position: relative; min-height: 0; max-height: none !important; margin: 7px 0 !important; padding: 0 !important;
  border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  overflow: visible; text-align: left; cursor: default;
}
/* visually hidden but still laid out: back.js/edgeex.js call checkbox.scrollIntoView() */
nav.main.ep2 .nav-link > input.checkbox {
  display: block; position: absolute; top: 0; left: 0; width: 1px; height: 54px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none; visibility: hidden;
}

nav.main.ep2 .ep2-row {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  --ep-row-cur: var(--ep-row);
  background: var(--ep-row-cur); border: 1.5px solid var(--ep-border); border-radius: 13px; box-shadow: var(--ep-shadow-row); cursor: pointer;
  transition: transform .2s var(--ep-ease), border-color .3s var(--ep-ease), box-shadow .3s var(--ep-ease), background .4s var(--ep-ease), border-radius .2s var(--ep-ease);
}
nav.main.ep2 .ep2-row:hover { transform: translateY(-1px); border-color: var(--ep-border-strong); box-shadow: 0 8px 20px -12px rgba(23, 34, 62, .4); }
nav.main.ep2 .nav-link:has(> input.checkbox:checked) > .ep2-row {
  --ep-row-cur: color-mix(in srgb, var(--ep-accent) 6%, var(--ep-row));
  border-color: var(--ep-accent);
  box-shadow: 0 0 0 3px var(--ep-soft), 0 8px 18px -12px var(--ep-ring);
}
nav.main.ep2 .nav-link.settings-open > .ep2-row { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }

nav.main.ep2 .ep2-chip {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--ep-panel-2); color: var(--ep-text-soft); font-size: 18px;
  transition: background .35s var(--ep-ease), color .35s var(--ep-ease);
}
nav.main.ep2 .nav-link:has(> input.checkbox:checked) .ep2-chip {
  background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); color: #fff; box-shadow: 0 4px 10px -3px var(--ep-ring);
}

nav.main.ep2 .ep2-row > label { flex: 1; min-width: 0; margin: 0; padding: 0 !important; cursor: pointer; text-align: left; }
nav.main.ep2 .ep2-row .nav-text {
  display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ep-text) !important; transition: color .3s var(--ep-ease);
}

/* info icon: floats over the row's right side on hover (never steals label width).
   Sits in the gear's column (right of the switch + gap) when a row has no settings, else just left of the gear. */
nav.main.ep2 .ep2-row > .menu-item-info {
  position: absolute; top: 50%; left: auto; right: 65px; transform: translateY(-50%); z-index: 3;
  width: 25px; height: 25px; padding: 0; border: none; border-radius: 7px; display: grid; place-items: center;
  font-size: 15px; color: var(--ep-text-faint); background: var(--ep-row-cur); cursor: help;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ep-ease), background .2s var(--ep-ease), color .2s var(--ep-ease);
}
nav.main.ep2 .ep2-row > .menu-item-info::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 22px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ep-row-cur));
}
nav.main.ep2 .ep2-row:has(.menu-item-toggler) > .menu-item-info { right: 94px; }
nav.main.ep2 .ep2-row:hover > .menu-item-info, nav.main.ep2 .nav-link.settings-open .menu-item-info { opacity: 1; pointer-events: auto; }
nav.main.ep2 .ep2-row > .menu-item-info:hover { background: linear-gradient(var(--ep-soft), var(--ep-soft)), var(--ep-row-cur); color: var(--ep-accent); }
nav.main.ep2 .menu-item-info i, nav.main.ep2 .menu-item-toggler i { padding: 0; background: none !important; color: inherit !important; }

/* settings gear: always visible for features that have settings */
nav.main.ep2 .ep2-row > .menu-item-toggler {
  position: static; width: 25px; height: 25px; padding: 0; border: none; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 15px; color: var(--ep-text-faint) !important; background: transparent; cursor: pointer;
  opacity: .7; transition: opacity .2s var(--ep-ease), background .2s var(--ep-ease), color .2s var(--ep-ease), transform .3s var(--ep-ease);
}
nav.main.ep2 .ep2-row:hover > .menu-item-toggler, nav.main.ep2 .nav-link.settings-open .menu-item-toggler { opacity: 1; }
nav.main.ep2 .nav-link:has(> input.checkbox:checked) .menu-item-toggler { color: color-mix(in srgb, var(--ep-accent) 70%, var(--ep-text)) !important; }
nav.main.ep2 .ep2-row > .menu-item-toggler:hover { background: var(--ep-soft); color: var(--ep-accent) !important; opacity: 1; }
nav.main.ep2 .nav-link.settings-open .menu-item-toggler { transform: rotate(90deg); color: var(--ep-accent) !important; }

/* iOS toggle (knob centres itself off the track's height so host-page resets can't push it off-centre) */
nav.main.ep2 .ep2-sw { position: relative; display: inline-block; width: 42px; height: 24px; box-sizing: border-box; border: 0; padding: 0; line-height: 0; border-radius: 20px; flex-shrink: 0; background: var(--ep-border-strong); transition: background .25s var(--ep-ease); }
nav.main.ep2 .ep2-sw::after {
  content: ""; position: absolute; top: 50%; left: 3px; width: 18px; height: 18px; margin: 0; border-radius: 50%; background: #fff;
  transform: translateY(-50%); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .28s var(--ep-sp), width .2s var(--ep-ease);
}
nav.main.ep2 .nav-link:has(> input.checkbox:checked) .ep2-sw { background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); }
nav.main.ep2 .nav-link:has(> input.checkbox:checked) .ep2-sw::after { left: 21px; }
nav.main.ep2 .ep2-row:active .ep2-sw::after { width: 22px; }

/* locked features (no key yet) */
nav.main.ep2 .nav-link:not(.ep2-archived):has(> input.coming-soon) { opacity: .55 !important; transition: opacity .25s var(--ep-ease); }
nav.main.ep2 .nav-link:not(.ep2-archived):has(> input.coming-soon):hover { opacity: .95 !important; }
nav.main.ep2 .nav-link:not(.ep2-archived):has(> input.coming-soon) .ep2-row { cursor: not-allowed; }
/* locked/coming-soon message: a left-anchored gradient wash that covers the chip + name, text left-aligned */
nav.main.ep2 .coming-soon-disclaimer {
  inset: -1.5px; padding: 0 0 0 16px; border: none; border-radius: 13px; z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-start; text-align: left; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.1px; color: var(--ep-text);
  background: linear-gradient(90deg, var(--ep-row) 0%, var(--ep-row) 58%, color-mix(in srgb, var(--ep-row) 0%, transparent) 88%);
  opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ep-ease), transform .3s var(--ep-ease);
}
nav.main.ep2 .coming-soon-disclaimer > p { margin: 0; }
nav.main.ep2.ep2-simple .coming-soon-disclaimer { border-radius: 8px; padding-left: 12px; }
/* main.js appends "Redeem a key first!" after "Loading..."; only show the newest */
nav.main.ep2 .coming-soon-disclaimer:has(~ .coming-soon-disclaimer) { display: none !important; }
/* only locked rows ever show the overlay; otherwise it must not cover the row's controls */
nav.main.ep2 .nav-link:not(:has(> input.coming-soon)) .coming-soon-disclaimer { display: none !important; }
nav.main.ep2 .ep2-row:hover .coming-soon-disclaimer { opacity: 1; transform: none; }
nav.main.ep2 .nav-link:not(.ep2-archived):has(> input.coming-soon) .ep2-row:hover > .menu-item-info { opacity: 0; pointer-events: none; }
/* fade the feature name out too so long names never peek past the gradient (the message sets its own color) */
nav.main.ep2 .nav-link:not(.ep2-archived):has(> input.coming-soon) .ep2-row:hover .nav-text { color: transparent !important; }

/* ---------- settings drawer (tucked under its row, fades in) ---------- */
nav.main.ep2 .nav-link > .settings-panel {
  position: relative; z-index: 1;
  display: block; width: auto; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px);
  margin: 0 7px; padding: 0 12px; text-align: left;
  background: var(--ep-panel-2) !important; border: 0 solid var(--ep-border); border-radius: 0 0 12px 12px; box-shadow: none !important;
  transition: max-height .32s var(--ep-ease), opacity .3s var(--ep-ease), transform .3s var(--ep-ease), padding .32s var(--ep-ease), margin .32s var(--ep-ease), background .45s var(--ep-ease), border-color .3s var(--ep-ease), box-shadow .3s var(--ep-ease);
}
nav.main.ep2 .nav-link.settings-open > .settings-panel {
  max-height: 600px; opacity: 1; transform: none; margin: -9px 7px 2px; padding: 15px 12px 11px; border-width: 0 1px 1px; cursor: default;
}
/* enabled feature: drawer picks up the row's accent outline */
nav.main.ep2 .nav-link.settings-open:has(> input.checkbox:checked) > .settings-panel {
  background: color-mix(in srgb, var(--ep-accent) 4%, var(--ep-panel-2)) !important;
  border-color: color-mix(in srgb, var(--ep-accent) 55%, transparent);
  box-shadow: 0 0 0 3px var(--ep-soft) !important;
}
nav.main.ep2 .settings-panel .ep2-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
nav.main.ep2 .settings-panel .ep2-field + .ep2-field { border-top: 1px solid var(--ep-border); margin-top: 2px; padding-top: 10px; }
/* pointed at from an in-page "no answer" notice */
nav.main.ep2 .settings-panel .ep2-field.ep2-flash { border-radius: 8px; animation: ep2FieldFlash 2.4s ease; }
@keyframes ep2FieldFlash {
  0%, 60% { background: var(--ep-soft); box-shadow: 0 0 0 4px var(--ep-soft); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}
nav.main.ep2 .settings-panel .ep2-field.col { flex-direction: column; align-items: stretch; }
nav.main.ep2 .settings-panel .ep2-field.col > .text-small { margin-bottom: 7px; }
nav.main.ep2 .nav-link .settings-panel .text-small {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--ep-text-soft) !important;
}
nav.main.ep2 .nav-link .settings-panel .info-text { display: block; font-size: 10px; opacity: 1; font-style: italic; color: var(--ep-text-faint) !important; }
nav.main.ep2 .settings-panel .nav-select,
nav.main.ep2 .settings-panel .nav-input,
nav.main.ep2 .settings-panel .nav-num {
  height: 30px; margin: 0; padding: 0 10px; font-size: 12px; text-align: left; text-align-last: auto;
  color: var(--ep-text); background-color: var(--ep-panel); border: 1px solid var(--ep-border-strong); border-radius: 8px;
}
nav.main.ep2 .settings-panel .nav-select { width: auto; min-width: 118px; padding-right: 22px; cursor: pointer; }
nav.main.ep2 .settings-panel .nav-input { width: 100%; }
nav.main.ep2 .settings-panel .nav-select:focus,
nav.main.ep2 .settings-panel .nav-input:focus,
nav.main.ep2 .settings-panel .nav-num:focus { border-color: var(--ep-accent); box-shadow: 0 0 0 3px var(--ep-soft) !important; }
nav.main.ep2 .settings-panel .max-min-span { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ep-text-faint) !important; }
nav.main.ep2 .settings-panel .max-min-span .nav-num { width: 64px; text-align: center; padding: 0 6px; }
nav.main.ep2 .settings-panel .ep2-field > .text-small { flex-shrink: 0; }
nav.main.ep2 .ep2-hidden-select { display: none !important; }
nav.main.ep2 .ep2-seg { display: flex; flex-shrink: 0; gap: 2px; padding: 2px; background: var(--ep-panel); border: 1px solid var(--ep-border-strong); border-radius: 8px; }
nav.main.ep2 .ep2-seg button {
  border: none; background: transparent; color: var(--ep-text-soft); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 4px 8px; border-radius: 6px; cursor: pointer; transition: all .18s var(--ep-ease);
}
nav.main.ep2 .ep2-seg button.sel { background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); color: #fff; }

/* drawer toggles (mini) */
nav.main.ep2 .settings-panel .setting-row { justify-content: space-between; }
nav.main.ep2 .settings-panel .setting-toggle { flex-shrink: 0; }
nav.main.ep2 .settings-panel .setting-toggle .switch {
  position: relative; display: inline-block; width: 38px; height: 22px; box-sizing: border-box; border: 0; padding: 0; line-height: 0; border-radius: 20px; background: var(--ep-border-strong); box-shadow: none; transition: background .25s var(--ep-ease);
}
nav.main.ep2 .settings-panel .setting-toggle .switch::before {
  top: 50%; left: 3px; width: 16px; height: 16px; margin: 0; transform: translateY(-50%); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .28s var(--ep-sp);
}
nav.main.ep2 .settings-panel .setting-toggle .toggled.switch { background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); }
nav.main.ep2 .settings-panel .setting-toggle .toggled.switch::before { left: 19px; }

/* drawer slider (label left, slider right) */
nav.main.ep2 .settings-panel .setting-slider-head { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; }
nav.main.ep2 .settings-panel .setting-slider-value { color: var(--ep-accent) !important; font-size: 11.5px; font-weight: 700; }
nav.main.ep2 input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 130px; max-width: none; height: 5px; margin: 0; flex-shrink: 0;
  border-radius: 5px; background: var(--ep-border-strong); outline: none;
}
nav.main.ep2 input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--ep-accent) !important; cursor: pointer; box-shadow: 0 0 0 3px var(--ep-soft);
}
nav.main.ep2 input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background: var(--ep-accent) !important; cursor: pointer; box-shadow: 0 0 0 3px var(--ep-soft); }

/* two-thumb range for min/max settings: two transparent <input type=range> stacked over one painted track;
   only the thumbs take pointer events so both stay draggable. The text inputs remain as the "Advanced" view. */
nav.main.ep2 .settings-panel .ep2-has-range > .text-small { flex: 1; }
nav.main.ep2 .settings-panel .ep2-range-col { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
nav.main.ep2 .settings-panel .ep2-range-val { padding-right: 2px; font-size: 10.5px; font-weight: 700; color: var(--ep-accent) !important; line-height: 1.2; }
nav.main.ep2 .settings-panel .ep2-range { --thumb: 15px; position: relative; flex-shrink: 0; width: 140px; height: 22px; }
nav.main.ep2 .settings-panel .ep2-range-track {
  position: absolute; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); top: 50%; height: 5px; transform: translateY(-50%); border-radius: 5px; background: var(--ep-border-strong);
}
nav.main.ep2 .settings-panel .ep2-range-fill {
  position: absolute; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, var(--ep-accent), var(--ep-accent-2));
}
/* the inputs are exactly thumb-high and centred on the track, so the thumb's natural top-aligned position is centred too */
nav.main.ep2 .settings-panel .ep2-range input[type="range"] {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; height: var(--thumb); margin: 0;
  background: transparent; pointer-events: none; z-index: 3;
}
nav.main.ep2 .settings-panel .ep2-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: var(--thumb); }
nav.main.ep2 .settings-panel .ep2-range input[type="range"]::-moz-range-track { background: transparent; height: var(--thumb); }
nav.main.ep2 .settings-panel .ep2-range input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; margin-top: 0; width: var(--thumb); height: var(--thumb); border: 2px solid var(--ep-row); background: var(--ep-accent) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25), 0 0 0 0 var(--ep-soft); transition: box-shadow .2s var(--ep-ease), width .12s var(--ep-ease), height .12s var(--ep-ease);
}
nav.main.ep2 .settings-panel .ep2-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: calc(var(--thumb) - 4px); height: calc(var(--thumb) - 4px); border: 2px solid var(--ep-row); background: var(--ep-accent) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
nav.main.ep2 .settings-panel .ep2-range input[type="range"]:hover::-webkit-slider-thumb,
nav.main.ep2 .settings-panel .ep2-range input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, .25), 0 0 0 4px var(--ep-soft); }
/* value bubbles: children of the li (not the clipping drawer), positioned by JS; above the row card (z 2) */
nav.main.ep2 .nav-link > .ep2-range-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }
nav.main.ep2 .ep2-range-bubble {
  position: absolute; transform: translate(-50%, calc(-100% - 4px)) translateY(4px); padding: 3px 7px; border-radius: 6px;
  background: var(--ep-text); color: var(--ep-panel); font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ep-ease), transform .18s var(--ep-ease);
}
nav.main.ep2 .ep2-range-bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--ep-text); border-bottom: none;
}
nav.main.ep2 .ep2-range-bubbles.show .ep2-range-bubble:not(.off) { opacity: 1; transform: translate(-50%, calc(-100% - 4px)); }
/* default view: sliders; "Advanced" swaps in the typed min/max boxes */
nav.main.ep2 .settings-panel .ep2-has-range > .max-min-span { display: none; }
nav.main.ep2 .settings-panel.ep2-adv-on .ep2-has-range > .max-min-span { display: flex; }
nav.main.ep2 .settings-panel.ep2-adv-on .ep2-has-range > .ep2-range-col { display: none; }
nav.main.ep2 .settings-panel .ep2-adv-row { display: flex; justify-content: flex-start; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--ep-border); }
nav.main.ep2 .settings-panel .ep2-adv-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 6px; border: none; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--ep-text-faint); font-family: inherit; font-size: 11px; font-weight: 600; transition: color .2s var(--ep-ease), background .2s var(--ep-ease);
}
nav.main.ep2 .settings-panel .ep2-adv-btn i { font-size: 14px; }
nav.main.ep2 .settings-panel .ep2-adv-btn:hover { color: var(--ep-accent); background: var(--ep-soft); }

/* custom info tooltip */
nav.main.ep2 .ep2-tip {
  position: absolute; z-index: 30; max-width: 252px; width: max-content; padding: 8px 11px; border-radius: 9px;
  background: var(--ep-text); color: var(--ep-panel); font-size: 11.5px; font-weight: 500; line-height: 1.42; text-align: left;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%) translateY(2px); transition: opacity .2s var(--ep-ease), transform .2s var(--ep-ease);
}
nav.main.ep2 .ep2-tip::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ep-text); border-bottom: none;
}
nav.main.ep2 .ep2-tip.show { opacity: 1; transform: translate(-50%, -100%) translateY(-5px); }

/* short-lived hint bubble pointing at a header button (e.g. "No key on this account.") */
nav.main.ep2 .ep2-hint {
  position: absolute; z-index: 40; width: max-content; max-width: 220px; padding: 7px 11px; border-radius: 9px;
  background: var(--ep-text); color: var(--ep-panel); font-size: 11.5px; font-weight: 600; line-height: 1.35; white-space: normal;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%) translateY(4px); transition: opacity .25s var(--ep-ease), transform .3s var(--ep-sp);
}
nav.main.ep2 .ep2-hint::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ep-text); border-bottom: none;
}
nav.main.ep2 .ep2-hint.show { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
nav.main.ep2 .ep2-hint.below { transform: translate(-50%, 0) translateY(-4px); }
nav.main.ep2 .ep2-hint.below.show { transform: translate(-50%, 0) translateY(0); }
nav.main.ep2 .ep2-hint.below::after { bottom: auto; top: -5px; border-top-color: transparent; border-bottom: 6px solid var(--ep-text); border-top: none; }

/* ---------- footer links ---------- */
nav.main.ep2 .bottom-content { display: flex; justify-content: center; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--ep-border); flex-shrink: 0; }
nav.main.ep2 .bottom-buttons { display: flex; justify-content: center; gap: 24px; margin: 0; }
nav.main.ep2 #footer-button {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; opacity: 1; border-radius: 0;
  background: none; color: var(--ep-text-faint); font-size: 11.5px; font-weight: 600; text-decoration: none; transition: color .2s var(--ep-ease);
}
nav.main.ep2 #footer-button i { margin: 0; font-size: 15px; }
nav.main.ep2 #footer-button:hover { color: var(--ep-accent); background: none; }

/* ---------- customize ---------- */
nav.main.ep2 .customize-menu {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto;
  overflow-y: auto; padding: 0 4px 0 0; margin: 0 -4px 0 0 !important; text-align: left; background: transparent !important;
}
nav.main.ep2 .customize-menu > .style-selector:has(#theme-select) { display: none; } /* replaced by swatches */
nav.main.ep2 .ep2-card {
  flex-shrink: 0; margin: 10px 2px; padding: 13px; background: var(--ep-row); border: 1px solid var(--ep-border);
  border-radius: 14px; box-shadow: var(--ep-shadow-row); transition: background .45s var(--ep-ease), border-color .45s var(--ep-ease);
}
nav.main.ep2 .ep2-card-title { margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; color: var(--ep-text-faint); }
nav.main.ep2 .ep2-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; width: 100%; }
nav.main.ep2 .ep2-swatch { position: relative; width: 100%; min-width: 0; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: transform .18s var(--ep-sp); }
nav.main.ep2 .ep2-swatch:hover { transform: scale(1.1); }
nav.main.ep2 .ep2-swatch.sel { border-color: var(--ep-text); }
nav.main.ep2 .ep2-swatch.sel::after { content: "\ea41"; font-family: 'boxicons' !important; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 17px; }
nav.main.ep2 .ep2-swatch.is-default.sel::after, nav.main.ep2 .ep2-swatch.is-custom.sel::after { top: -8px; }
nav.main.ep2 .ep2-swatch-tag {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); padding: 1px 5px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font-size: 7px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: rgba(255, 255, 255, .92); color: #0063c7; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* custom theme: swatch shows a soft hue wheel until chosen, then the picked color; editor = color well (opens our picker) + hex / RGB box */
nav.main.ep2 .ep2-swatch.is-custom {
  display: grid; place-items: center; color: rgba(31, 41, 55, .8); font-size: 17px; text-shadow: 0 1px 2px rgba(255, 255, 255, .45);
  /* muted stops + a white veil so the wheel reads as one calm pool instead of a neon ring; static, only turns while hovered */
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 60%),
    conic-gradient(from var(--ep-hue-spin, 200deg), #e8736f, #e9a46a, #e3cf6e, #86cf8a, #6ec4c4, #7b96e6, #a98be0, #de8ac6, #e8736f);
}
@property --ep-hue-spin { syntax: "<angle>"; inherits: false; initial-value: 200deg; }
@keyframes ep2SwatchSpin { from { --ep-hue-spin: 200deg; } to { --ep-hue-spin: 560deg; } }
@media (prefers-reduced-motion: no-preference) {
  nav.main.ep2 .ep2-swatch.is-custom:not(.sel):hover { animation: ep2SwatchSpin 10s linear infinite; }
}
/* no @property support: same static wheel */
@supports not (background: conic-gradient(from var(--x, 0deg), red, blue)) {
  nav.main.ep2 .ep2-swatch.is-custom { background: conic-gradient(from 200deg, #e8736f, #e9a46a, #e3cf6e, #86cf8a, #6ec4c4, #7b96e6, #a98be0, #de8ac6, #e8736f); animation: none; }
}
nav.main.ep2 .ep2-swatch.is-custom.sel { background: var(--ep-custom, var(--ep-accent)); animation: none; }
nav.main.ep2 .ep2-swatch.is-custom.sel i { display: none; }
nav.main.ep2 .ep2-swatch.is-custom i { margin-top: -7px; }
nav.main.ep2 .ep2-swatch.is-custom .ep2-swatch-tag { color: #1f2937; }
nav.main.ep2 .ep2-custom-theme { --ep-custom: var(--ep-accent); display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
nav.main.ep2 .ep2-custom-theme[hidden] { display: none; }
nav.main.ep2 .ep2-custom-row { display: flex; align-items: center; gap: 8px; }
nav.main.ep2 .ep2-color-well {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0; border-radius: 9px; cursor: pointer; display: grid; place-items: center;
  background: var(--ep-custom); color: #fff; font-size: 17px; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  border: 2px solid var(--ep-row); box-shadow: 0 0 0 1px var(--ep-border-strong), 0 4px 10px -4px var(--ep-custom);
  transition: transform .18s var(--ep-sp), box-shadow .2s var(--ep-ease);
}
nav.main.ep2 .ep2-color-well:hover { transform: scale(1.06); }
nav.main.ep2 .ep2-color-well i { transition: transform .25s var(--ep-ease); }
nav.main.ep2 .ep2-custom-theme.open .ep2-color-well i { transform: rotate(180deg); }
nav.main.ep2 .ep2-custom-theme .ep2-color-text {
  flex: 1; min-width: 0; height: 32px; margin: 0; padding: 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  color: var(--ep-text); background: var(--ep-panel); border: 1px solid var(--ep-border-strong); border-radius: 9px; transition: border-color .2s var(--ep-ease), box-shadow .2s var(--ep-ease);
}
nav.main.ep2 .ep2-custom-theme .ep2-color-text:focus { outline: none; border-color: var(--ep-accent); box-shadow: 0 0 0 3px var(--ep-soft); }
nav.main.ep2 .ep2-custom-theme .ep2-color-text.bad { border-color: #e23b3b; box-shadow: 0 0 0 3px rgba(226, 59, 59, .15); }
nav.main.ep2 .ep2-color-eye {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; cursor: pointer; font-size: 16px;
  color: var(--ep-text-soft); background: var(--ep-panel); border: 1px solid var(--ep-border-strong); border-radius: 9px; transition: color .2s var(--ep-ease), border-color .2s var(--ep-ease);
}
nav.main.ep2 .ep2-color-eye:hover { color: var(--ep-accent); border-color: var(--ep-accent); }
/* the picker: saturation/brightness square + hue bar, folds open under the row */
nav.main.ep2 .ep2-picker {
  display: flex; flex-direction: column; gap: 10px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px);
  transition: max-height .3s var(--ep-ease), opacity .25s var(--ep-ease), transform .25s var(--ep-ease), margin .3s var(--ep-ease); margin: -9px 0 0;
}
nav.main.ep2 .ep2-custom-theme.open .ep2-picker { max-height: 260px; opacity: 1; transform: none; margin: 0; }
nav.main.ep2 .ep2-picker-sv {
  --hue: 210; position: relative; width: 100%; height: 118px; border-radius: 10px; cursor: crosshair; touch-action: none; outline: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue) 100% 50%));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
nav.main.ep2 .ep2-picker-sv:focus-visible { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px var(--ep-soft); }
nav.main.ep2 .ep2-picker-dot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: var(--ep-custom); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .35); transition: width .15s var(--ep-ease), height .15s var(--ep-ease);
}
nav.main.ep2 .ep2-picker-sv.dragging .ep2-picker-dot { width: 20px; height: 20px; }
nav.main.ep2 input[type="range"].ep2-picker-hue {
  --hue: 210; -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 0; border-radius: 8px; outline: none; cursor: pointer;
  background: linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
nav.main.ep2 input[type="range"].ep2-picker-hue::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--hue) 100% 50%) !important; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .3); cursor: pointer;
}
nav.main.ep2 input[type="range"].ep2-picker-hue::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: hsl(var(--hue) 100% 50%) !important; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); cursor: pointer; }
nav.main.ep2 .ep2-picker-presets { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
nav.main.ep2 .ep2-picker-presets button {
  aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .15s var(--ep-sp), border-color .15s var(--ep-ease);
}
nav.main.ep2 .ep2-picker-presets button:hover { transform: scale(1.15); }
nav.main.ep2 .ep2-picker-presets button.sel { border-color: var(--ep-text); }
/* contextual nudge (very dark pick in dark mode, etc.) */
nav.main.ep2 .ep2-color-note {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px; font-size: 11px; line-height: 1.35; color: var(--ep-text-soft);
  background: var(--ep-panel-2); border: 1px solid var(--ep-border);
}
nav.main.ep2 .ep2-color-note[hidden] { display: none; }
nav.main.ep2 .ep2-color-note i { flex-shrink: 0; font-size: 15px; color: #e6a700; }
nav.main.ep2 .ep2-color-note span { flex: 1; min-width: 0; }
/* this note only shows when the accent itself is unreadable, so the button can't use the accent: ink-on-panel instead */
nav.main.ep2 .ep2-color-note button {
  flex-shrink: 0; height: 24px; padding: 0 9px; border: none; border-radius: 7px; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--ep-row); background: var(--ep-text); transition: opacity .2s var(--ep-ease), transform .15s var(--ep-sp);
}
nav.main.ep2 .ep2-color-note button:hover { opacity: .85; transform: translateY(-1px); }
nav.main.ep2 .ep2-color-note button[hidden] { display: none; }

/* card rows: icon box · label · control */
nav.main.ep2 .ep2-card > li.style-selector,
nav.main.ep2 .ep2-card > li.mode {
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap;
  min-height: 0; max-height: none; margin: 0 !important; padding: 9px 0 !important; position: relative; overflow: visible; text-align: left;
  background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; cursor: default;
}
nav.main.ep2 .ep2-card > li + li.mode,
nav.main.ep2 .ep2-card > li + li.style-selector { border-top: 1px solid var(--ep-border) !important; }
nav.main.ep2 .ep2-card > li:hover { border-radius: 0 !important; box-shadow: none !important; }
nav.main.ep2 .ep2-card .sun-moon { position: static; width: 30px; height: 30px; min-width: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--ep-panel-2); transition: background .4s var(--ep-ease); }
nav.main.ep2 .ep2-card .sun-moon i { position: static; min-width: 0; width: auto; height: auto; font-size: 17px; color: var(--ep-text-soft); }
nav.main.ep2 .ep2-card .style-text,
nav.main.ep2 .ep2-card .mode-text {
  flex: 1; min-width: 0; margin: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 500; color: var(--ep-text);
}
nav.main.ep2 .ep2-card .style-select {
  width: auto; max-width: 150px; height: 32px; margin: 0; flex-shrink: 0; padding: 0 26px 0 12px; text-align: left; text-align-last: auto;
  font-size: 12.5px; color: var(--ep-text); background-color: var(--ep-panel-2); border: 1px solid var(--ep-border-strong); border-radius: 9px;
}
nav.main.ep2 .ep2-card .style-select:hover { color: var(--ep-text); border-color: var(--ep-accent); background-color: var(--ep-panel-2); }
nav.main.ep2 .ep2-card .toggle-switch { position: static; min-width: 0; width: auto; height: auto; flex-shrink: 0; display: flex; }
nav.main.ep2 .ep2-card .toggle-switch .switch {
  position: relative; display: inline-block; width: 44px; height: 25px; box-sizing: border-box; border: 0; padding: 0; line-height: 0; border-radius: 20px; background: var(--ep-border-strong); cursor: pointer; transition: background .25s var(--ep-ease);
}
nav.main.ep2 .ep2-card .toggle-switch .switch::before {
  top: 50%; left: 3px; width: 19px; height: 19px; margin: 0; transform: translateY(-50%); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .28s var(--ep-sp);
}
nav.main.ep2 .ep2-card .toggle-switch .toggled.switch { background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); }
nav.main.ep2 .ep2-card .toggle-switch .toggled.switch::before { left: 22px; }
nav.main.ep2 .ep2-card .slider-container { display: flex; flex-shrink: 0; }
nav.main.ep2 .ep2-card .opacity-slider { width: 110px; min-width: 0; margin: 0; }
nav.main.ep2 .settings-button-container .ep2-replay-tour { grid-column: 1 / -1; }

/* backup & reset */
nav.main.ep2 .settings-button-container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; opacity: 1;
  background: transparent; border: none; border-radius: 0;
}
nav.main.ep2 .settings-button-container:hover { padding: 0; }
nav.main.ep2 .settings-button-container button {
  height: 36px; padding: 0; gap: 5px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--ep-text-soft) !important; background: var(--ep-panel-2) !important;
  border: 1px solid var(--ep-border-strong) !important; border-radius: 9px; cursor: pointer;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .3s var(--ep-ease), border-color .3s var(--ep-ease), box-shadow .35s var(--ep-ease), transform .3s var(--ep-ease);
}
/* gradient fill fades in on a layer behind the label (gradients can't be transitioned) */
nav.main.ep2 .settings-button-container button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); transition: opacity .3s var(--ep-ease);
}
nav.main.ep2 .settings-button-container .reset-button::before { background: linear-gradient(140deg, #ff5a5a, #d11a1a); }
nav.main.ep2 .settings-button-container button i { font-size: 14px; margin: 0; }
nav.main.ep2 .settings-button-container button:hover {
  color: #fff !important; background: var(--ep-panel-2) !important; border-color: transparent !important; transform: translateY(-1px);
  box-shadow: 0 8px 16px -9px var(--ep-ring);
}
nav.main.ep2 .settings-button-container .reset-button:hover { box-shadow: 0 8px 16px -9px rgba(209, 26, 26, .5); }
nav.main.ep2 .settings-button-container button:hover::before { opacity: 1; }
nav.main.ep2 .settings-button-container button:active { transform: translateY(0); }

/* ---------- account ---------- */
nav.main.ep2 .account-menu {
  flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
  overflow-y: auto; padding: 0 3px 0 0; margin: 0 -3px 0 0 !important; text-align: left; background: transparent !important;
}
nav.main.ep2 .account-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px; width: auto; margin: 8px 2px 10px; padding: 13px; border-radius: 14px;
  background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); box-shadow: 0 12px 26px -14px var(--ep-ring);
}
nav.main.ep2 .account-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-size: 20px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .2); border: 1.5px solid rgba(255, 255, 255, .4);
}
nav.main.ep2 .account-header-text { min-width: 0; flex: 1; color: #fff; }
nav.main.ep2 .account-hide-btn {
  flex-shrink: 0; width: 30px; height: 30px; margin: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); border-radius: 9px; font-size: 16px;
  opacity: 0; transition: background .2s var(--ep-ease), opacity .2s var(--ep-ease);
}
nav.main.ep2 .account-header:hover .account-hide-btn, nav.main.ep2 .account-hide-btn:focus-visible { opacity: 1; }
@media (hover: none) { nav.main.ep2 .account-hide-btn { opacity: 1; } }
nav.main.ep2 .account-header-sub.is-copyable { cursor: copy; }
nav.main.ep2 .account-header-sub.is-copyable:hover { text-decoration: underline; text-underline-offset: 2px; }
nav.main.ep2 .account-hide-btn:hover { background: rgba(255, 255, 255, .3); }
nav.main.ep2 .account-header.is-hidden .account-avatar,
nav.main.ep2 .account-header.is-hidden .account-header-title,
nav.main.ep2 .account-header.is-hidden .account-header-sub { filter: blur(6px); user-select: none; transition: filter .25s var(--ep-ease); }
nav.main.ep2 .account-header-title { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav.main.ep2 .account-header-sub {
  display: block; font-size: 10.5px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: rgba(255, 255, 255, .9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal;
}
nav.main.ep2 .ep2-acard {
  flex-shrink: 0; margin: 0 2px 9px; padding: 12px; background: var(--ep-row); border: 1px solid var(--ep-border);
  border-radius: 13px; box-shadow: var(--ep-shadow-row); transition: background .45s var(--ep-ease), border-color .45s var(--ep-ease);
}
nav.main.ep2 .ep2-acard .ep2-card-title { margin-bottom: 9px; font-size: 10.5px; letter-spacing: .07em; }
nav.main.ep2 .ep2-mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 12.5px; }
nav.main.ep2 .ep2-mrow + .ep2-mrow { border-top: 1px solid var(--ep-border); }
nav.main.ep2 .ep2-mlbl { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 500; color: var(--ep-text-soft); }
nav.main.ep2 .ep2-mlbl i { font-size: 16px; color: var(--ep-text-faint); }
nav.main.ep2 .ep2-mval { font-weight: 700; white-space: nowrap; color: var(--ep-text); }
nav.main.ep2 .ep2-mval.ok { display: inline-flex; align-items: center; gap: 6px; color: #17b26a; }
nav.main.ep2 .ep2-mval.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #17b26a; box-shadow: 0 0 0 3px rgba(23, 178, 106, .2); }
nav.main.ep2 .ep2-membership:not(.is-service) .ep2-service-only { display: none; }
nav.main.ep2 .ep2-countdown { margin-top: 10px; padding: 11px; border-radius: 11px; background: var(--ep-soft); border: 1px solid color-mix(in srgb, var(--ep-accent) 22%, transparent); }
nav.main.ep2 .ep2-cd-top {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 9px; white-space: nowrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ep-accent);
}
nav.main.ep2 .ep2-cd-top i { font-size: 13px; }
nav.main.ep2 .ep2-cd-timer { display: flex; align-items: center; justify-content: center; gap: 7px; }
nav.main.ep2 .ep2-cd-seg {
  display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 5px 0;
  background: var(--ep-panel); border: 1px solid var(--ep-border); border-radius: 9px; transition: background .45s var(--ep-ease), border-color .45s var(--ep-ease);
}
nav.main.ep2 .ep2-cd-seg b { font-size: 18px; font-weight: 700; line-height: 1; color: var(--ep-text); font-variant-numeric: tabular-nums; }
nav.main.ep2 .ep2-cd-seg small { margin-top: 3px; font-size: 7.5px; font-weight: 700; letter-spacing: .1em; color: var(--ep-text-faint); }
nav.main.ep2 .ep2-cd-sep { font-size: 16px; font-weight: 700; color: var(--ep-accent); opacity: .5; }
nav.main.ep2 .ep2-cd-note { margin-top: 9px; text-align: center; font-size: 9.5px; color: var(--ep-text-soft); }

nav.main.ep2 .ep2-keybox { display: flex; gap: 8px; }
nav.main.ep2 #key-input-box {
  flex: 1; min-width: 0; width: auto; height: 38px; margin: 0; padding: 0 14px; text-align: center; letter-spacing: .05em; outline: none;
  font-size: 13px; color: var(--ep-text); background: var(--ep-panel-2); border: 1px solid var(--ep-border-strong) !important; border-radius: 10px;
}
nav.main.ep2 #key-input-box:focus { border-color: var(--ep-accent) !important; box-shadow: 0 0 0 3px var(--ep-soft); }
nav.main.ep2 #key-input-box:disabled { opacity: .65; cursor: not-allowed; color: var(--ep-text-faint); }
nav.main.ep2 #key-redeem-btn {
  height: 38px; width: auto; margin: 0; padding: 0 16px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: #fff; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); box-shadow: 0 8px 16px -8px var(--ep-ring); transition: transform .2s var(--ep-ease);
}
nav.main.ep2 #key-redeem-btn:hover { transform: translateY(-1px); }
nav.main.ep2 #key-redeem-btn:disabled { cursor: not-allowed; color: var(--ep-text-soft); background: var(--ep-border-strong); box-shadow: none; transform: none; }
nav.main.ep2 .ep2-redeem-note { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 10.5px; color: var(--ep-text-soft); }
nav.main.ep2 .ep2-redeem-note i { font-size: 13px; color: var(--ep-accent); }
nav.main.ep2 .ep2-redeem > a.text-small {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 9px; padding: 0; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--ep-accent); background: none; border: none; text-decoration: none;
}
nav.main.ep2 .ep2-redeem > a.text-small:hover { text-decoration: underline; color: var(--ep-accent); background: none; }
nav.main.ep2 .ep2-remove-btn {
  flex-shrink: 0; width: calc(100% - 4px); height: 40px; margin: 0 2px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: #e23b3b; background: var(--ep-row); border: 1px solid color-mix(in srgb, #e23b3b 40%, var(--ep-border)); border-radius: 11px;
  cursor: pointer; position: relative; isolation: isolate; overflow: hidden;
  transition: color .3s var(--ep-ease), border-color .3s var(--ep-ease), box-shadow .35s var(--ep-ease), transform .3s var(--ep-ease);
}
/* gradients can't be transitioned, so the red fill fades in on a layer behind the label */
nav.main.ep2 .ep2-remove-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(140deg, #ff5a5a, #d11a1a); opacity: 0; transition: opacity .3s var(--ep-ease);
}
nav.main.ep2 .ep2-remove-btn:hover { color: #fff; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(209, 26, 26, .5); transform: translateY(-1px); }
nav.main.ep2 .ep2-remove-btn:hover::before { opacity: 1; }
nav.main.ep2 .ep2-remove-btn:active { transform: translateY(0); }

/* ---------- minimal ("old menu") mode ---------- */
nav.main.ep2.ep2-simple { border-radius: 13px; box-shadow: 0 14px 38px -18px rgba(23, 34, 62, .42); }
body.dark nav.main.ep2.ep2-simple { box-shadow: 0 16px 42px -18px rgba(0, 0, 0, .7); }
body.dark.edgypro-page-dark nav.main.ep2.ep2-simple { box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .45); }
nav.main.ep2.ep2-simple .ep2-chip, nav.main.ep2.ep2-simple .ep2-sw { display: none; }
nav.main.ep2.ep2-simple .ep2-row { min-height: 39px; padding: 6px 11px; border-radius: 8px; box-shadow: none; }
nav.main.ep2.ep2-simple .ep2-row:hover { transform: none; box-shadow: none; border-color: var(--ep-border-strong); }
nav.main.ep2.ep2-simple .nav-link:has(> input.checkbox:checked) > .ep2-row { --ep-row-cur: color-mix(in srgb, var(--ep-accent) 12%, var(--ep-row)); box-shadow: none; }
nav.main.ep2.ep2-simple .ep2-row > .menu-item-info { right: 10px; background: none; }
nav.main.ep2.ep2-simple .ep2-row > .menu-item-info::before { display: none; }
nav.main.ep2.ep2-simple .ep2-row:has(.menu-item-toggler) > .menu-item-info { right: 40px; }
nav.main.ep2.ep2-simple .nav-link > .settings-panel { border-radius: 0 0 8px 8px; }
nav.main.ep2.ep2-simple .ep2-card, nav.main.ep2.ep2-simple .ep2-acard, nav.main.ep2.ep2-simple .ep2-countdown { border-radius: 9px; box-shadow: none; }
nav.main.ep2.ep2-simple .menu-search, nav.main.ep2.ep2-simple .ep2-home-count, nav.main.ep2.ep2-simple .header-btns { border-radius: 8px; }
nav.main.ep2.ep2-simple .header-btns button { border-radius: 6px; }
nav.main.ep2.ep2-simple .ep2-cd-seg { border-radius: 7px; }
nav.main.ep2.ep2-simple .header-btns .toggled-btn,
nav.main.ep2.ep2-simple .settings-panel .setting-toggle .toggled.switch,
nav.main.ep2.ep2-simple .ep2-card .toggle-switch .toggled.switch,
nav.main.ep2.ep2-simple .ep2-seg button.sel,
nav.main.ep2.ep2-simple header .toggle,
nav.main.ep2.ep2-simple #key-redeem-btn:not(:disabled),
nav.main.ep2.ep2-simple .account-header,
nav.main.ep2.ep2-simple .nav-link:has(> input.checkbox:checked) .ep2-chip { background: var(--ep-accent) !important; box-shadow: none !important; }
nav.main.ep2.ep2-simple .settings-button-container button::before { background: var(--ep-accent); }
nav.main.ep2.ep2-simple .settings-button-container .reset-button::before { background: #d11a1a; }
nav.main.ep2.ep2-simple .settings-button-container button:hover { box-shadow: none; }

/* ---------- mobile ---------- */
@media (max-width: 480px) {
  nav.main.ep2 { width: min(344px, calc(100vw - 20px)); }
  nav.main.ep2 .ep2-row > .menu-item-info { opacity: 1; pointer-events: auto; } /* no hover on touch */
}

/* ---------- logged out ---------- */
nav.main.ep2.ep2-loggedout .ep2-count,
nav.main.ep2.ep2-nokey .ep2-count,
nav.main.ep2.ep2-nokey .ep2-home-count { display: none !important; }
nav.main.ep2 .menu-links > .ep2-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 100%; margin: 0; padding: 24px 18px; text-align: center; color: var(--ep-text);
  animation: ep2ViewIn .4s var(--ep-ease) both;
}
nav.main.ep2 .ep2-empty-title { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--ep-text); }
nav.main.ep2 .ep2-empty-text { max-width: 250px; font-size: 12.5px; line-height: 1.55; color: var(--ep-text-soft); }
nav.main.ep2 .ep2-empty-steps {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 12px; border-radius: 11px;
  background: var(--ep-panel-2); border: 1px solid var(--ep-border); font-size: 11px; font-weight: 600; color: var(--ep-text-soft); white-space: nowrap;
}
nav.main.ep2 .ep2-empty-steps span { display: inline-flex; align-items: center; gap: 4px; }
nav.main.ep2 .ep2-empty-steps span i { font-size: 14px; color: var(--ep-accent); }
nav.main.ep2 .ep2-empty-steps > i { font-size: 14px; color: var(--ep-text-faint); }

/* ---------- banned ---------- */
nav.main.ep2.ep2-banned .menu-links > :not(.ep2-banned-view),
nav.main.ep2.ep2-banned .menu-search,
nav.main.ep2.ep2-banned .ep2-home-count,
nav.main.ep2.ep2-banned #account-menu-btn,
nav.main.ep2.ep2-banned .ep2-backup-card,
nav.main.ep2.ep2-loggedout .ep2-backup-card { display: none !important; }

/* Backup & Reset card: settings backup needs a key; without one it's just the tutorial (the tour won't run logged out) */
nav.main.ep2 .ep2-bk-tour { display: none; }
nav.main.ep2.ep2-nokey .ep2-backup-card .reset-button,
nav.main.ep2.ep2-nokey .ep2-backup-card .import-button,
nav.main.ep2.ep2-nokey .ep2-backup-card .export-button,
nav.main.ep2.ep2-nokey .ep2-bk-full { display: none !important; }
nav.main.ep2.ep2-nokey .ep2-bk-tour { display: inline; }
nav.main.ep2 .ep2-banned-view { gap: 8px; }
nav.main.ep2 .ep2-banned-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px;
  background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; font-size: 30px;
}
nav.main.ep2 .ep2-banned-reason {
  width: 100%; max-width: 260px; margin-top: 6px; padding: 9px 12px; border-radius: 12px; text-align: left;
  background: var(--ep-panel-2); border: 1px solid var(--ep-border); border-left: 3px solid #ef4444;
}
nav.main.ep2 .ep2-banned-reason > span { display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-text-faint); }
nav.main.ep2 .ep2-banned-reason > div { font-size: 12.5px; line-height: 1.5; color: var(--ep-text); white-space: pre-wrap; word-break: break-word; }
nav.main.ep2 .ep2-banned-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 16px; border-radius: 11px;
  font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-2)); box-shadow: 0 6px 16px -6px var(--ep-ring);
  transition: transform .2s var(--ep-sp), box-shadow .2s var(--ep-ease);
}
nav.main.ep2 .ep2-banned-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px var(--ep-ring); color: #fff; }
nav.main.ep2 .ep2-banned-btn i { font-size: 17px; }

/* ============================================================================
   EP2 POPUPS — every createPopUp / input / logout / welcome popup in
   shared.js, main.js, back.js and edgeex.js. Scoped by html.ep2-ui (set by
   the Edgenuity menu) so Apex keeps its old popups.
   ============================================================================ */
html.ep2-ui body.yellow-theme { --selected-color: #E6B800; --selected-color-dark: #CCCC00; }
html.ep2-ui body.purple-theme { --selected-color: #8F6BFF; --selected-color-dark: #6E45E8; }
html.ep2-ui body.pink-theme { --selected-color: #E05CC0; --selected-color-dark: #CC66CC; }

html.ep2-ui .edgypro-overlay,
html.ep2-ui .welcome-overlay,
html.ep2-ui .edgypro-overlay-dock {
  --pop-accent: var(--selected-color);
  --pop-accent-2: var(--selected-color-dark);
  --pop-panel: var(--sidebar-color);
  --pop-panel-2: color-mix(in srgb, var(--body-color) 55%, var(--sidebar-color));
  --pop-text: var(--edgypro-text-color);
  --pop-soft: color-mix(in srgb, var(--edgypro-text-color) 78%, transparent);
  --pop-border: color-mix(in srgb, var(--edgypro-text-color) 16%, transparent);
}
html.ep2-ui .edgypro-overlay,
html.ep2-ui .welcome-overlay {
  padding: 16px; box-sizing: border-box;
  background: rgba(12, 16, 26, .42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s ease;
  font-family: 'Poppins', sans-serif;
}
html.ep2-ui .welcome-overlay { background: rgba(12, 16, 26, .6); }

html.ep2-ui .edgypro-overlay-box,
html.ep2-ui .welcome-overlay-box {
  position: relative; overflow: hidden; box-sizing: border-box;
  width: min(420px, 100%); max-width: 420px; margin: 0; padding: 24px 22px 18px;
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pop-accent) 13%, var(--pop-panel)) 0%, var(--pop-panel) 70%);
  border: 1px solid var(--pop-border); border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(10, 16, 32, .55), 0 8px 22px -10px rgba(10, 16, 32, .35);
  transition: opacity .25s ease, transform .4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
html.ep2-ui body.dark .edgypro-overlay-box,
html.ep2-ui body.dark .welcome-overlay-box { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 8px 22px -10px rgba(0, 0, 0, .6); }
html.ep2-ui .edgypro-overlay-box:hover,
html.ep2-ui .welcome-overlay-box:hover { margin: 0; border-radius: 18px; border: 1px solid var(--pop-border); box-shadow: 0 30px 70px -20px rgba(10, 16, 32, .55), 0 8px 22px -10px rgba(10, 16, 32, .35); }

html.ep2-ui .edgypro-overlay-title,
html.ep2-ui .welcome-overlay-title {
  margin: 0 0 8px; padding: 0 34px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; color: var(--pop-text);
}
html.ep2-ui .edgypro-overlay-box-contents,
html.ep2-ui .welcome-overlay-box-contents {
  margin: 0; padding: 0 2px 0 0; max-height: min(420px, 60vh); overflow-y: auto;
  font-size: 13.5px; font-weight: 400; line-height: 1.6; color: var(--pop-soft);
  scrollbar-width: thin; scrollbar-color: var(--pop-border) transparent;
}
html.ep2-ui .edgypro-overlay-box-contents p,
html.ep2-ui .welcome-overlay-box-contents p { margin: 0; padding: 0; }
html.ep2-ui .edgypro-overlay-box-contents b,
html.ep2-ui .welcome-overlay-box-contents b { font-weight: 600; color: var(--pop-text); }
html.ep2-ui .edgypro-overlay-box-contents a,
html.ep2-ui .welcome-overlay-box-contents a { margin: 0; font-size: inherit; font-weight: 600; color: var(--pop-accent); text-decoration: none; }
html.ep2-ui .edgypro-overlay-box-contents a:hover,
html.ep2-ui .welcome-overlay-box-contents a:hover { text-decoration: underline; }
html.ep2-ui .edgypro-overlay-box-contents::-webkit-scrollbar { width: 7px; background: transparent; }
html.ep2-ui .edgypro-overlay-box-contents::-webkit-scrollbar-thumb { background: var(--pop-border); border-radius: 10px; }

/* ---------- answer cards (Brainly / AI popups) ---------- */
html.ep2-ui .edgypro-overlay-box.ep-card-popup { width: min(480px, 100%); max-width: 480px; }
html.ep2-ui .ep-card-popup .edgypro-overlay-box-contents { max-height: min(460px, 64vh); }
/* the badge is the title: × sits on the head row with Insert / Copy, all 30px tall */
html.ep2-ui .ep-card-popup > .edgypro-overlay-title { display: none; }
html.ep2-ui .ep-card-popup > .edgypro-overlay-button-span > .edgypro-overlay-close-button { top: 24px; right: 22px; box-sizing: border-box; }
html.ep2-ui .ep-card { display: flex; flex-direction: column; gap: 12px; }
/* padding-right = × width (30) + head gap (6) − the 2px the × overhangs the contents' right padding */
html.ep2-ui .ep-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 30px; padding-right: 34px; }
html.ep2-ui .ep-card-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px; color: #fff;
}
html.ep2-ui .ep-card-badge i.bx { font-size: 15px; }
html.ep2-ui .ep-card-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--pop-soft); background: var(--pop-panel-2); border: 1px solid var(--pop-border);
}
html.ep2-ui .ep-card-chip.ok { color: #16a34a; background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .35); }
html.ep2-ui .ep-card-chip i.bx { font-size: 13px; }
html.ep2-ui .ep-card-copy {
  margin: 0 0 0 auto; height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; box-sizing: border-box;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--pop-soft);
  background: var(--pop-panel-2); border: 1px solid var(--pop-border); border-radius: 9px; transition: color .2s ease, background .2s ease, border-color .2s ease;
}
html.ep2-ui .ep-card-copy:hover { color: var(--pop-text); border-color: var(--pop-accent); }
html.ep2-ui .ep-card-copy.done { color: #16a34a; border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .1); }
/* only the first action button pushes right; Insert + Copy stay together */
html.ep2-ui .ep-card-head > .ep-card-copy ~ .ep-card-copy { margin-left: 0; }
/* icon-only head buttons (minimize / fold / expand) */
html.ep2-ui .ep-card-min, html.ep2-ui .ep-card-fold { width: 30px; padding: 0; justify-content: center; font-size: 16px; }

/* ---------- minimized answer card: parked top-centre, page stays usable ---------- */
.edgypro-overlay-dock {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2147483645;
  width: min(520px, calc(100vw - 24px)); pointer-events: none; font-family: 'Poppins', sans-serif;
}
.edgypro-overlay-dock:empty { display: none; }
/* dragged (or restored to a remembered spot): positioned by left/top instead of centred */
.edgypro-overlay-dock.ep-dock-placed { transform: none; }
html.ep2-ui .ep-card-docked .ep-card-head { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.edgypro-overlay-dock.ep-dock-dragging, .edgypro-overlay-dock.ep-dock-dragging .ep-card-head { cursor: grabbing; }
.edgypro-overlay-dock.ep-dock-dragging .edgypro-overlay-box.ep-card-docked { animation: none; box-shadow: 0 34px 70px -18px rgba(10, 16, 32, .6), 0 10px 24px -10px rgba(10, 16, 32, .4); }
.edgypro-overlay-dock .edgypro-overlay-box.ep-card-docked {
  pointer-events: auto; position: relative; width: 100% !important; max-width: none !important; margin: 0 !important;
  padding: 14px 18px 12px; opacity: 1; transform: none; cursor: default;
  animation: epDockIn .3s cubic-bezier(.2, .8, .3, 1);
}
.edgypro-overlay-dock .edgypro-overlay-box.ep-card-docked:hover { margin: 0 !important; }
html.ep2-ui .ep-card-docked .edgypro-overlay-box-contents { max-height: min(240px, 38vh); }
html.ep2-ui .ep-card-docked > .edgypro-overlay-button-span { margin-top: 0; }
html.ep2-ui .ep-card-docked > .edgypro-overlay-button-span > .edgypro-overlay-close-button { top: 14px; right: 16px; }
html.ep2-ui .ep-card-docked .ep-card-head { padding-right: 32px; }
html.ep2-ui .ep-card-docked .ep-card-note { display: none; }
html.ep2-ui .ep-card-docked.ep-card-folded .ep-card > :not(.ep-card-head) { display: none; }
html.ep2-ui .ep-card-docked.ep-card-folded .edgypro-overlay-box-contents { overflow: hidden; }
@keyframes epDockIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .edgypro-overlay-dock { top: 6px; width: calc(100vw - 12px); }
}

/* ---------- delay countdown HUD (Auto Advance Delay / Auto Submit Delay) + toasts (same card) ---------- */
.ep-countdown-hud, .ep-toast {
  --pop-accent: var(--selected-color, #0982f8);
  --pop-accent-2: var(--selected-color-dark, #0a66c2);
  --pop-panel: var(--sidebar-color, #fff);
  --pop-text: var(--edgypro-text-color, #16181d);
  --pop-soft: color-mix(in srgb, var(--edgypro-text-color, #16181d) 72%, transparent);
  --pop-border: color-mix(in srgb, var(--edgypro-text-color, #16181d) 16%, transparent);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: min(500px, calc(100vw - 24px)); padding: 10px 14px 12px; box-sizing: border-box; overflow: hidden;
  font-family: 'Poppins', sans-serif; color: var(--pop-text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--pop-accent) 13%, var(--pop-panel)) 0%, var(--pop-panel) 70%);
  border: 1px solid var(--pop-border); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(10, 16, 32, .5), 0 6px 16px -10px rgba(10, 16, 32, .35);
  opacity: 0; transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .3, 1);
}
.ep-countdown-hud { position: fixed; top: 10px; left: 50%; z-index: 2147483644; transform: translate(-50%, -14px); pointer-events: none; }
.ep-countdown-hud.is-on { opacity: 1; transform: translate(-50%, 0); }
body.dark .ep-countdown-hud, body.dark .ep-toast { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8), 0 6px 16px -10px rgba(0, 0, 0, .6); }
.ep-countdown-hud .ep-cd-icon, .ep-toast .ep-cd-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; font-size: 19px; color: #fff;
  background: linear-gradient(140deg, var(--pop-accent), var(--pop-accent-2)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--pop-accent) 70%, transparent);
}
.ep-countdown-hud .ep-cd-body, .ep-toast .ep-cd-body { min-width: 0; }
.ep-countdown-hud .ep-cd-title, .ep-toast .ep-cd-title { font-size: 12.5px; font-weight: 700; letter-spacing: -.1px; line-height: 1.3; }
.ep-countdown-hud .ep-cd-sub, .ep-toast .ep-cd-sub { font-size: 11px; line-height: 1.4; color: var(--pop-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-toast .ep-cd-sub a { color: var(--pop-accent); font-weight: 600; }
.ep-toast .ep-cd-sub b { color: var(--pop-text); }
.ep-countdown-hud .ep-cd-time, .ep-toast .ep-cd-time { font-size: 20px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; color: var(--pop-accent); white-space: nowrap; }
.ep-countdown-hud .ep-cd-bar, .ep-toast .ep-cd-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--pop-text) 8%, transparent); }
.ep-countdown-hud .ep-cd-bar i, .ep-toast .ep-cd-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pop-accent), var(--pop-accent-2)); transition: width .12s linear; }
/* Nova Auto Answers progress: the HUD card, kept up for the whole quiz; count and bar ease between reports. */
.ep-nova-progress { z-index: 2147483643; }
.ep-nova-progress .ep-cd-time { font-size: 16px; }
.ep-nova-progress .ep-cd-bar i { transition: width .55s cubic-bezier(.2, .8, .3, 1); }
.ep-nova-progress.is-done { --pop-accent: #22a559; --pop-accent-2: #15803d; }
/* The icon element itself spins, so while loading it's a bare glyph (no box to rotate) with a soft drop shadow. */
.ep-nova-progress .ep-cd-icon.bx-spin {
  animation-duration: 1.6s; background: none; box-shadow: none; font-size: 28px; color: var(--pop-accent);
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--pop-accent) 55%, transparent));
}
/* Toasts stack under the HUD; the host is just a positioning column. */
.ep-toasts { position: fixed; top: 10px; left: 50%; z-index: 2147483643; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ep-toast { position: relative; grid-template-columns: auto minmax(0, 1fr) auto auto; transform: translateY(-14px); pointer-events: auto; }
.ep-toast.is-on { opacity: 1; transform: none; }
.ep-toast .ep-cd-sub { -webkit-line-clamp: 4; }
.ep-toast:not(.has-time) .ep-cd-time { display: none; }
.ep-toast.is-error { --pop-accent: #e5484d; --pop-accent-2: #b3261e; }
.ep-toast.is-success { --pop-accent: #22a559; --pop-accent-2: #15803d; }
.ep-toast .ep-toast-x {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 -4px 0 -2px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--pop-soft); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s, color .15s;
}
.ep-toast .ep-toast-x:hover { background: color-mix(in srgb, var(--pop-text) 10%, transparent); color: var(--pop-text); }
@media (max-width: 600px) {
  .ep-countdown-hud, .ep-toasts { top: 6px; }
  .ep-countdown-hud, .ep-toast { width: calc(100vw - 12px); gap: 10px; padding: 9px 12px 11px; }
  .ep-countdown-hud .ep-cd-sub, .ep-toast .ep-cd-sub { -webkit-line-clamp: 1; }
  .ep-toast .ep-cd-sub { -webkit-line-clamp: 3; }
}
html.ep2-ui .ep-card-q {
  padding: 8px 12px; border-radius: 10px; border-left: 3px solid var(--ep-card-accent, var(--pop-accent));
  background: var(--pop-panel-2); font-size: 12.5px; line-height: 1.5; color: var(--pop-soft);
}
html.ep2-ui .ep-card-q span {
  display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--ep-card-accent, var(--pop-accent));
}
/* Question pictures: a short row of thumbnails that scale with the card and the viewport, never past it. */
html.ep2-ui .ep-card-imgs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 8px; max-width: 100%; }
html.ep2-ui .ep-card-imgs a {
  display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; border-radius: 8px; overflow: hidden; line-height: 0;
  border: 1px solid var(--pop-border); background: var(--pop-panel); transition: border-color .2s ease, transform .2s ease;
}
html.ep2-ui .ep-card-imgs a:hover { border-color: var(--ep-card-accent, var(--pop-accent)); transform: translateY(-1px); }
html.ep2-ui .ep-card-imgs img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(56px, 12vh, 110px); object-fit: contain;
}
html.ep2-ui .ep-card-imgs[data-n="1"] img { max-height: clamp(80px, 22vh, 180px); }
html.ep2-ui .ep-card-imgs:not([data-n="1"]) a { max-width: calc(50% - 4px); }
html.ep2-ui .ep-card-body { font-size: 13.5px; line-height: 1.65; color: var(--pop-text); overflow-wrap: anywhere; }
html.ep2-ui .ep-card-body p { margin: 0 0 9px; }
html.ep2-ui .ep-card-body > :last-child { margin-bottom: 0; }
html.ep2-ui .ep-card-body ul, html.ep2-ui .ep-card-body ol { margin: 0 0 9px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; counter-reset: ep-card; }
html.ep2-ui .ep-card-body li { position: relative; padding: 8px 10px 8px 38px; border-radius: 10px; background: var(--pop-panel-2); border: 1px solid var(--pop-border); }
html.ep2-ui .ep-card-body li::before {
  position: absolute; left: 9px; top: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: var(--ep-card-accent, var(--pop-accent));
}
html.ep2-ui .ep-card-body ol li::before { counter-increment: ep-card; content: counter(ep-card); }
html.ep2-ui .ep-card-body ul li::before { content: ""; width: 7px; height: 7px; left: 16px; top: 16px; }
html.ep2-ui .ep-card-note { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--pop-soft); opacity: .8; }
html.ep2-ui .ep-card-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; }
html.ep2-ui .ep-card-sources > span {
  display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--ep-card-accent, var(--pop-accent));
}
html.ep2-ui .ep-card-sources a {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 9px; border-radius: 999px;
  font-weight: 600; color: var(--pop-text) !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--pop-panel-2); border: 1px solid var(--pop-border); transition: border-color .2s ease, color .2s ease;
}
html.ep2-ui .ep-card-sources a:hover { border-color: var(--ep-card-accent, var(--pop-accent)); color: var(--ep-card-accent, var(--pop-accent)) !important; }
html.ep2-ui .ep-card-sources a i { font-size: 12px; opacity: .7; }
html.ep2-ui .ep-card-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: #fff !important; text-decoration: none !important;
  background: var(--ep-card-accent, var(--pop-accent)); transition: filter .2s ease, transform .2s ease;
}
html.ep2-ui .ep-card-link:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Brainly: its own blue, answer HTML kept readable */
html.ep2-ui .ep-card-brainly { --ep-card-accent: #3b9cf0; }
html.ep2-ui .ep-card-brainly .ep-card-badge { background: linear-gradient(120deg, #4fb3f6, #2f80e4); }
html.ep2-ui .ep-card-brainly .ep-card-body {
  padding: 12px 14px; border-radius: 12px; background: var(--pop-panel-2); border: 1px solid var(--pop-border);
}
html.ep2-ui .ep-card-brainly .ep-card-body strong, html.ep2-ui .ep-card-brainly .ep-card-body b { color: var(--pop-text); font-weight: 600; }
html.ep2-ui .ep-card-brainly .ep-card-body h1, html.ep2-ui .ep-card-brainly .ep-card-body h2, html.ep2-ui .ep-card-brainly .ep-card-body h3 {
  margin: 12px 0 4px; font-size: 13.5px; font-weight: 700; color: var(--pop-text);
}

/* AI: light-to-dark sweep of the active theme accent, shimmering top edge, answer blocks fade in */
html.ep2-ui .ep-card-ai { --ep-card-accent: var(--pop-accent); --ep-card-light: color-mix(in srgb, var(--pop-accent) 62%, #fff); }
html.ep2-ui .ep-card-ai .ep-card-badge {
  background: linear-gradient(120deg, var(--ep-card-light), var(--pop-accent-2));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--pop-accent) 70%, transparent);
}
html.ep2-ui .ep-card-popup:has(.ep-card-ai)::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ep-card-light), var(--pop-accent), var(--pop-accent-2), var(--ep-card-light)); background-size: 300% 100%;
  animation: epCardShimmer 4s linear infinite;
}
html.ep2-ui .ep-card-ai .ep-card-body > * { animation: epCardIn .45s cubic-bezier(.2, .8, .2, 1) both; }
html.ep2-ui .ep-card-ai .ep-card-body > :nth-child(2) { animation-delay: .08s; }
html.ep2-ui .ep-card-ai .ep-card-body > :nth-child(3) { animation-delay: .16s; }
html.ep2-ui .ep-card-ai .ep-card-body > :nth-child(n+4) { animation-delay: .24s; }
@keyframes epCardShimmer { to { background-position: 300% 0; } }
@keyframes epCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.ep2-ui .ep-card-popup:has(.ep-card-ai)::before, html.ep2-ui .ep-card-ai .ep-card-body > * { animation: none; }
}

/* ---------- Essay Writer (writing activities) ---------- */
html.ep2-ui .edgypro-overlay-box.ep-essay-popup { width: min(720px, 100%); max-width: 720px; }
html.ep2-ui .ep-essay-popup .edgypro-overlay-box-contents { max-height: min(780px, 84vh); }
html.ep2-ui .ep-essay { gap: 10px; }
html.ep2-ui .ep-essay .ep-card-badge { background: linear-gradient(140deg, var(--pop-accent), var(--pop-accent-2)); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--pop-accent) 70%, transparent); }
html.ep2-ui .ep-essay-row input.edgypro-overlay-input { height: 34px; min-height: 0; padding: 0 12px; font-size: 12.5px; }
html.ep2-ui .ep-essay-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--pop-text); }
html.ep2-ui .ep-essay-label span { font-size: 11px; font-weight: 500; color: var(--pop-soft); }
html.ep2-ui .ep-essay textarea.edgypro-overlay-input { display: block; width: 100%; box-sizing: border-box; margin: 0; resize: vertical; min-height: 68px; font-size: 13.5px; line-height: 1.55; }
html.ep2-ui .ep-essay textarea.ep-essay-draft { min-height: 230px; }
html.ep2-ui .ep-essay-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html.ep2-ui .ep-essay-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--pop-soft); }
html.ep2-ui .ep-essay-controls select {
  height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--pop-border); background: var(--pop-panel-2); color: var(--pop-text);
  font-family: inherit; font-size: 12.5px; color-scheme: light dark;
}
html.ep2-ui .ep-essay-controls select:focus { outline: none; border-color: var(--pop-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop-accent) 14%, transparent); }
html.ep2-ui .ep-essay-row { display: flex; align-items: center; gap: 8px; }
html.ep2-ui .ep-essay-row .edgypro-overlay-input { flex: 1; min-width: 0; margin: 0; }
html.ep2-ui .ep-essay-btn {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--pop-border); background: var(--pop-panel-2); color: var(--pop-text);
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, transform .15s ease, filter .2s ease, opacity .2s ease;
}
html.ep2-ui .ep-essay-btn:hover:not(:disabled) { border-color: var(--pop-accent); transform: translateY(-1px); }
html.ep2-ui .ep-essay-btn.primary { border-color: transparent; color: #fff; background: linear-gradient(140deg, var(--pop-accent), var(--pop-accent-2)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--pop-accent) 60%, transparent); }
html.ep2-ui .ep-essay-btn.primary:hover:not(:disabled) { filter: brightness(1.06); }
html.ep2-ui .ep-essay-btn:disabled { opacity: .55; cursor: default; }
html.ep2-ui .ep-essay-btn i.bx { font-size: 15px; }
html.ep2-ui .ep-essay-status { display: inline-flex; align-items: center; gap: 6px; min-height: 18px; font-size: 12px; color: var(--pop-soft); }
html.ep2-ui .ep-essay-status.is-ok { color: #16a34a; }
html.ep2-ui .ep-essay-status.is-err { color: #e5484d; }
html.ep2-ui .ep-essay-status.is-busy { color: var(--pop-accent); }
html.ep2-ui .ep-essay-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html.ep2-ui .ep-essay-chips button {
  height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--pop-border); background: var(--pop-panel-2); color: var(--pop-soft);
  font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; transition: color .2s ease, border-color .2s ease;
}
html.ep2-ui .ep-essay-chips button:hover:not(:disabled) { color: var(--pop-text); border-color: var(--pop-accent); }
html.ep2-ui .ep-essay-chips button:disabled { opacity: .55; cursor: default; }
html.ep2-ui .ep-essay-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
html.ep2-ui .ep-essay.is-busy .ep-essay-draft { opacity: .7; }
html.ep2-ui .ep-essay-notice p { margin: 0 0 10px; }
html.ep2-ui .ep-essay-notice .ep-essay-btn { margin-top: 4px; }
@media (max-width: 640px) {
  html.ep2-ui .ep-essay-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ep2-ui .ep-essay-popup .edgypro-overlay-box-contents { max-height: 80vh; }
}

html.ep2-ui .edgypro-overlay-button-span,
html.ep2-ui .welcome-overlay-button-span { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
html.ep2-ui .edgypro-overlay-button-span:not(:has(.edgypro-overlay-start-button)) { margin-top: 0; }

/* primary action */
html.ep2-ui .edgypro-overlay-start-button {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  height: 38px; margin: 0; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(140deg, var(--pop-accent), var(--pop-accent-2));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--pop-accent) 60%, transparent);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
html.ep2-ui .edgypro-overlay-start-button:hover { transform: translateY(-1px); filter: brightness(1.06); border-radius: 10px; background: linear-gradient(140deg, var(--pop-accent), var(--pop-accent-2)); color: #fff; }
html.ep2-ui .edgypro-overlay-start-button:active { transform: translateY(0); }

/* close (×) in the corner */
html.ep2-ui .edgypro-overlay-close-button,
html.ep2-ui .welcome-overlay-close-button {
  top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 9px;
  background: var(--pop-panel-2); border: 1px solid var(--pop-border);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
html.ep2-ui .edgypro-overlay-close-button::before,
html.ep2-ui .welcome-overlay-close-button::before { font-size: 20px; color: var(--pop-soft); }
html.ep2-ui .edgypro-overlay-close-button:hover,
html.ep2-ui .welcome-overlay-close-button:hover { background: rgba(240, 61, 61, .12); border-color: rgba(240, 61, 61, .35); }
html.ep2-ui .edgypro-overlay-close-button:hover::before,
html.ep2-ui .welcome-overlay-close-button:hover::before { color: #e23b3b; }
html.ep2-ui .edgypro-overlay-close-button.is-counting {
  font-size: 12px; color: var(--pop-accent); border: 2px solid color-mix(in srgb, var(--pop-accent) 50%, transparent);
  background: color-mix(in srgb, var(--pop-accent) 10%, transparent); border-radius: 50%; animation: ep2PopCount 1s ease-in-out infinite;
}
html.ep2-ui .edgypro-overlay-close-button.is-counting:hover { background: color-mix(in srgb, var(--pop-accent) 10%, transparent); }
@keyframes ep2PopCount {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pop-accent) 35%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}

/* text field popups (import / export) */
html.ep2-ui .edgypro-overlay-input {
  margin: 14px 0 0; padding: 10px 12px; min-height: 84px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
  color: var(--pop-text); background: var(--pop-panel-2); border: 1px solid var(--pop-border); border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html.ep2-ui .edgypro-overlay-input:focus { border-color: var(--pop-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop-accent) 12%, transparent); }

@media (max-width: 480px) {
  html.ep2-ui .edgypro-overlay-box, html.ep2-ui .welcome-overlay-box { padding: 22px 18px 16px; border-radius: 16px; }
  html.ep2-ui .edgypro-overlay-button-span { justify-content: stretch; }
  html.ep2-ui .edgypro-overlay-start-button { flex: 1; }
}

/* Auto Advance class picker: same look as the other popups */
html.ep2-ui .advance-overlay {
  --pop-accent: var(--selected-color);
  --pop-accent-2: var(--selected-color-dark);
  --pop-panel: var(--sidebar-color);
  --pop-panel-2: color-mix(in srgb, var(--body-color) 55%, var(--sidebar-color));
  --pop-text: var(--edgypro-text-color);
  --pop-soft: color-mix(in srgb, var(--edgypro-text-color) 78%, transparent);
  --pop-border: color-mix(in srgb, var(--edgypro-text-color) 16%, transparent);
  padding: 16px; box-sizing: border-box; background: rgba(12, 16, 26, .42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: 'Poppins', sans-serif;
}
html.ep2-ui .advance-overlay-box,
html.ep2-ui .advance-overlay-box:hover {
  width: min(400px, 100%); max-width: 400px; height: auto; margin: 0; padding: 24px 22px 18px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pop-accent) 13%, var(--pop-panel)) 0%, var(--pop-panel) 70%);
  border: 1px solid var(--pop-border); border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(10, 16, 32, .55), 0 8px 22px -10px rgba(10, 16, 32, .35);
}
html.ep2-ui .advance-overlay-title {
  margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; text-align: left; color: var(--pop-text);
}
html.ep2-ui .advance-overlay-text { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--pop-soft); }
html.ep2-ui .advance-overlay-dropdown {
  width: 100%; height: 42px; margin: 0; padding: 0 12px; box-sizing: border-box; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--pop-text); color-scheme: light dark;
  background: var(--pop-panel-2); border: 1px solid var(--pop-border); border-radius: 10px; outline: none; box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html.ep2-ui .advance-overlay-dropdown:focus { border-color: var(--pop-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop-accent) 14%, transparent); }
html.ep2-ui .advance-overlay-button-span { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
html.ep2-ui .advance-overlay-start-button,
html.ep2-ui .advance-overlay-cancel-button {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; margin: 0; padding: 0 18px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 10px; transition: transform .2s ease, filter .25s ease, background .2s ease, opacity .2s ease;
}
html.ep2-ui .advance-overlay-start-button {
  color: #fff; border: none; background: linear-gradient(140deg, var(--pop-accent), var(--pop-accent-2));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--pop-accent) 60%, transparent);
}
html.ep2-ui .advance-overlay-start-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); border-radius: 10px; }
html.ep2-ui .advance-overlay-start-button:disabled { display: inline-flex; opacity: .45; cursor: not-allowed; box-shadow: none; }
html.ep2-ui .advance-overlay-cancel-button,
html.ep2-ui .advance-overlay-cancel-button:hover {
  color: var(--pop-soft); background: transparent; border: 1px solid var(--pop-border); border-radius: 10px;
}
html.ep2-ui .advance-overlay-cancel-button:hover { background: var(--pop-panel-2); color: var(--pop-text); }

/* class picker: enrollment cards in a 2-column grid, ~4 rows visible then scroll */
html.ep2-ui .advance-overlay-box.ep-picker,
html.ep2-ui .advance-overlay-box.ep-picker:hover { width: min(680px, 100%); max-width: 680px; max-height: calc(100vh - 32px); }
html.ep2-ui .ep-picker .advance-overlay-text { margin-bottom: 12px; }
html.ep2-ui .ep-picker-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
html.ep2-ui .ep-picker-search {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; box-sizing: border-box;
  background: var(--pop-panel-2); border: 1px solid var(--pop-border); border-radius: 10px; color: var(--pop-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
}
html.ep2-ui .ep-picker-search:focus-within { border-color: var(--pop-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop-accent) 14%, transparent); }
html.ep2-ui .ep-picker-search i.bx { font-size: 17px; }
html.ep2-ui .ep-picker-search input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  font-family: inherit; font-size: 13px; color: var(--pop-text);
}
html.ep2-ui .ep-picker-search input::placeholder { color: var(--pop-soft); }
html.ep2-ui .ep-picker-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
html.ep2-ui .ep-picker-count { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--pop-soft); white-space: nowrap; }
html.ep2-ui .ep-picker-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start;
  min-height: 0; padding: 2px; margin: 0 -2px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--pop-border) transparent;
}
/* max-height is set from the card height by showClassPicker (2 rows); only then is there room for a scrollbar */
html.ep2-ui .ep-picker-scroll { position: relative; display: flex; flex-direction: column; min-height: 0; }
html.ep2-ui .ep-picker-scroll:has(> .is-scroll) { padding-bottom: 12px; }
html.ep2-ui .ep-picker-grid.is-scroll { padding-right: 6px; margin-right: -6px; }
/* "more below" cue straddling the grid's bottom edge, hidden once scrolled to the end */
html.ep2-ui .ep-picker-more {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 2px;
  height: 24px; margin: 0; padding: 0 9px 0 11px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--pop-soft);
  background: var(--pop-panel); border: 1px solid var(--pop-border); border-radius: 999px;
  box-shadow: 0 2px 8px -4px rgba(10, 16, 32, .35); transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
html.ep2-ui .ep-picker-more i.bx { font-size: 14px; }
html.ep2-ui .ep-picker-more:hover { color: var(--pop-text); border-color: color-mix(in srgb, var(--pop-accent) 50%, var(--pop-border)); transform: translateX(-50%) translateY(-1px); }
html.ep2-ui .ep-picker-more[hidden] { display: none; }
html.ep2-ui .ep-picker-grid::-webkit-scrollbar { width: 7px; }
html.ep2-ui .ep-picker-grid::-webkit-scrollbar-thumb { background: var(--pop-border); border-radius: 10px; }
html.ep2-ui .ep-picker-card {
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 11px 13px 10px; min-width: 0; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--pop-text); background: var(--pop-panel-2); border: 1px solid var(--pop-border); border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
html.ep2-ui .ep-picker-card:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pop-accent) 55%, var(--pop-border)); transform: translateY(-1px); }
html.ep2-ui .ep-picker-card:focus-visible { outline: none; border-color: var(--pop-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop-accent) 18%, transparent); }
html.ep2-ui .ep-picker-card[aria-selected='true'] {
  border-color: var(--pop-accent); background: color-mix(in srgb, var(--pop-accent) 10%, var(--pop-panel-2));
  box-shadow: inset 0 0 0 1px var(--pop-accent), 0 10px 24px -14px color-mix(in srgb, var(--pop-accent) 70%, transparent);
}
html.ep2-ui .ep-picker-card:disabled, html.ep2-ui .ep-picker-card.is-done { cursor: default; opacity: .55; }
html.ep2-ui .ep-picker-card[hidden] { display: none; }
html.ep2-ui .ep-picker-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
html.ep2-ui .ep-picker-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pop-soft); }
html.ep2-ui .ep-picker-platform, html.ep2-ui .ep-picker-last {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--pop-soft); background: color-mix(in srgb, var(--pop-text) 7%, transparent); border: 1px solid var(--pop-border);
}
html.ep2-ui .ep-picker-platform.ex { color: #fff; background: linear-gradient(140deg, var(--pop-accent), var(--pop-accent-2)); border-color: transparent; }
html.ep2-ui .ep-picker-last { color: var(--pop-accent); border-color: color-mix(in srgb, var(--pop-accent) 40%, transparent); background: color-mix(in srgb, var(--pop-accent) 10%, transparent); }
html.ep2-ui .ep-picker-last i.bx { font-size: 12px; }
html.ep2-ui .ep-picker-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--pop-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.35em);
}
html.ep2-ui .ep-picker-bar { position: relative; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--pop-text) 10%, transparent); overflow: visible; }
html.ep2-ui .ep-picker-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--pop-accent); transition: width .4s ease; }
html.ep2-ui .ep-picker-bar.ahead i { background: #22c55e; }
html.ep2-ui .ep-picker-bar.behind i { background: #f59e0b; }
html.ep2-ui .ep-picker-bar.done i { background: color-mix(in srgb, var(--pop-text) 30%, transparent); }
html.ep2-ui .ep-picker-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--pop-text); opacity: .6; }
html.ep2-ui .ep-picker-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--pop-soft); }
html.ep2-ui .ep-picker-status { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
html.ep2-ui .ep-picker-status.ahead { color: #16a34a; }
html.ep2-ui .ep-picker-status.behind { color: #d97706; }
html.ep2-ui .ep-picker-grade b { font-weight: 700; color: var(--pop-text); }
html.ep2-ui .ep-picker-empty { grid-column: 1 / -1; padding: 28px 0; text-align: center; font-size: 13px; color: var(--pop-soft); }
html.ep2-ui .ep-picker-empty[hidden] { display: none; }
html.ep2-ui .ep-picker .advance-overlay-button-span { margin-top: 6px; }
html.ep2-ui .ep-picker .advance-overlay-start-button { gap: 4px; }
html.ep2-ui .ep-picker .advance-overlay-start-button i.bx { font-size: 17px; }
@media (max-width: 560px) {
  html.ep2-ui .ep-picker-grid { grid-template-columns: minmax(0, 1fr); }
  html.ep2-ui .ep-picker-count { display: none; }
}

/* ============================================================================
   EP2 TOUR — spotlight walkthrough (key tour + features tour)
   ============================================================================ */
html.ep2-ui .ep2-tour {
  --tour-accent: var(--selected-color);
  --tour-accent-2: var(--selected-color-dark);
  --tour-panel: var(--sidebar-color);
  --tour-panel-2: color-mix(in srgb, var(--body-color) 55%, var(--sidebar-color));
  --tour-text: var(--edgypro-text-color);
  --tour-soft: color-mix(in srgb, var(--edgypro-text-color) 78%, transparent);
  --tour-border: color-mix(in srgb, var(--edgypro-text-color) 16%, transparent);
  position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
  font-family: 'Poppins', sans-serif; opacity: 0; transition: opacity .3s ease;
}
html.ep2-ui .ep2-tour.show { opacity: 1; }
html.ep2-ui .ep2-tour *, html.ep2-ui .ep2-tour *::before, html.ep2-ui .ep2-tour *::after { box-sizing: border-box; }

/* click shield with a hole over the target (clip-path set from JS) */
html.ep2-ui .ep2-tour-catcher { position: absolute; inset: 0; pointer-events: auto; }

html.ep2-ui .ep2-tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(10, 14, 24, .58);
  transition: left .4s cubic-bezier(.22, 1, .36, 1), top .4s cubic-bezier(.22, 1, .36, 1),
    width .4s cubic-bezier(.22, 1, .36, 1), height .4s cubic-bezier(.22, 1, .36, 1);
}
html.ep2-ui .ep2-tour-spot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 16px; opacity: 0;
  border: 2px solid var(--tour-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tour-accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--tour-accent) 45%, transparent);
  transition: opacity .3s ease;
}
html.ep2-ui .ep2-tour-spot.on::after { opacity: 1; animation: ep2TourPulse 2s ease-in-out infinite; }
@keyframes ep2TourPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tour-accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--tour-accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tour-accent) 10%, transparent), 0 0 30px color-mix(in srgb, var(--tour-accent) 30%, transparent); }
}

html.ep2-ui .ep2-tour-card {
  position: fixed; left: 50%; top: 50%; width: min(320px, calc(100vw - 24px)); pointer-events: auto;
  padding: 16px 16px 14px; border-radius: 16px; text-align: left;
  color: var(--tour-text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tour-accent) 13%, var(--tour-panel)) 0%, var(--tour-panel) 70%);
  border: 1px solid var(--tour-border);
  box-shadow: 0 30px 70px -20px rgba(10, 16, 32, .55), 0 8px 22px -10px rgba(10, 16, 32, .35);
  transition: left .4s cubic-bezier(.22, 1, .36, 1), top .4s cubic-bezier(.22, 1, .36, 1);
}
html.ep2-ui body.dark .ep2-tour-card { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 8px 22px -10px rgba(0, 0, 0, .6); }
html.ep2-ui .ep2-tour-card.swap > :not(.ep2-tour-top) { animation: ep2TourIn .35s ease both; }
html.ep2-ui .ep2-tour-card.nudge { animation: ep2TourNudge .4s ease; }
@keyframes ep2TourIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ep2TourNudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }

html.ep2-ui .ep2-tour-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
html.ep2-ui .ep2-tour-step {
  font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tour-accent); background: color-mix(in srgb, var(--tour-accent) 12%, transparent);
  padding: 3px 8px; border-radius: 999px;
}
html.ep2-ui .ep2-tour-x {
  display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; cursor: pointer;
  border-radius: 8px; background: var(--tour-panel-2); border: 1px solid var(--tour-border); color: var(--tour-soft);
  font-size: 18px; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
html.ep2-ui .ep2-tour-x:hover { background: rgba(240, 61, 61, .12); border-color: rgba(240, 61, 61, .35); color: #e23b3b; }

html.ep2-ui .ep2-tour-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; color: var(--tour-text); }
html.ep2-ui .ep2-tour-text { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--tour-soft); }
html.ep2-ui .ep2-tour-text b { font-weight: 600; color: var(--tour-text); }
html.ep2-ui .ep2-tour-text a { font-weight: 600; color: var(--tour-accent); text-decoration: none; }
html.ep2-ui .ep2-tour-text a:hover { text-decoration: underline; }
html.ep2-ui .ep2-tour-text i.bx { font-size: 15px; vertical-align: -2px; color: var(--tour-text); }

html.ep2-ui .ep2-tour-keys {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px;
  padding: 2px 10px; border-radius: 10px; background: var(--tour-panel-2); border: 1px solid var(--tour-border);
}
html.ep2-ui .ep2-tour-keys > span, html.ep2-ui .ep2-tour-keys > p {
  padding: 5px 0; border-top: 1px solid var(--tour-border); white-space: nowrap;
}
html.ep2-ui .ep2-tour-keys > span:first-child, html.ep2-ui .ep2-tour-keys > span:first-child + p { border-top: none; }
html.ep2-ui .ep2-tour-keys span { font-size: 10px; font-weight: 600; color: var(--tour-soft); }
html.ep2-ui .ep2-tour-keys p { margin: 0; font-size: 12px; line-height: 1.35; color: var(--tour-text); overflow: hidden; text-overflow: ellipsis; }
html.ep2-ui .ep2-tour-text .ep2-tour-keys kbd { min-width: 0; padding: 0 4px; font-size: 10px; }
html.ep2-ui .ep2-tour-text kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 6px; text-align: center;
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--tour-text);
  background: var(--tour-panel); border: 1px solid var(--tour-border); border-bottom-width: 2px;
}

html.ep2-ui .ep2-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
html.ep2-ui .ep2-tour-dots { display: flex; gap: 3px; flex-wrap: nowrap; flex-shrink: 0; }
html.ep2-ui .ep2-tour-dots i {
  flex: none; width: 5px; height: 5px; border-radius: 999px; background: var(--tour-border);
  transition: width .3s ease, background .3s ease;
}
html.ep2-ui .ep2-tour-dots i.seen { background: color-mix(in srgb, var(--tour-accent) 45%, transparent); }
html.ep2-ui .ep2-tour-dots i.on { width: 14px; background: var(--tour-accent); }
html.ep2-ui .ep2-tour-btns { display: flex; gap: 6px; flex-shrink: 1; min-width: 0; }
html.ep2-ui .ep2-tour-btns button {
  height: 34px; margin: 0; padding: 0 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: transform .2s ease, filter .25s ease, background .2s ease;
}
html.ep2-ui .ep2-tour-back { color: var(--tour-soft); background: transparent; border: 1px solid var(--tour-border); }
html.ep2-ui .ep2-tour-back:hover { background: var(--tour-panel-2); color: var(--tour-text); }
html.ep2-ui .ep2-tour-next {
  color: #fff; border: none;
  background: linear-gradient(140deg, var(--tour-accent), var(--tour-accent-2));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--tour-accent) 60%, transparent);
}
html.ep2-ui .ep2-tour-next:hover { transform: translateY(-1px); filter: brightness(1.06); }
html.ep2-ui .ep2-tour-next:active { transform: none; }

/* "Try it" task line + completed state */
html.ep2-ui .ep2-tour-task {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 8px 10px; border-radius: 11px;
  border: 1px dashed color-mix(in srgb, var(--tour-accent) 45%, transparent);
  background: color-mix(in srgb, var(--tour-accent) 7%, transparent);
  transition: background .3s ease, border-color .3s ease;
}
html.ep2-ui .ep2-tour-task[hidden] { display: none; }
html.ep2-ui .ep2-tour-tick {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tour-accent) 55%, transparent); color: transparent; font-size: 15px;
  animation: ep2TourWait 1.6s ease-in-out infinite;
  transition: background .3s ease, border-color .3s ease, color .2s ease;
}
html.ep2-ui .ep2-tour-task-l { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--tour-text); }
html.ep2-ui .ep2-tour-task-l small { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--tour-accent); }
html.ep2-ui .ep2-tour-task.done { border-style: solid; border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .1); }
html.ep2-ui .ep2-tour-task.done .ep2-tour-tick {
  animation: ep2TourPop .45s cubic-bezier(.34, 1.56, .64, 1);
  background: #22c55e; border-color: #22c55e; color: #fff;
}
html.ep2-ui .ep2-tour-task.done .ep2-tour-task-l small { color: #16a34a; }
@keyframes ep2TourWait {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tour-accent) 35%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}
@keyframes ep2TourPop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }

html.ep2-ui .ep2-tour-next { position: relative; }
html.ep2-ui .ep2-tour-next i.bx { font-size: 17px; vertical-align: -3px; margin-right: 2px; }
html.ep2-ui .ep2-tour-next.done {
  background: linear-gradient(140deg, #22c55e, #16a34a);
  box-shadow: 0 8px 20px -8px rgba(34, 197, 94, .7);
  animation: ep2TourDone .5s cubic-bezier(.34, 1.56, .64, 1);
}
/* fill bar = auto-advance countdown */
html.ep2-ui .ep2-tour-next.done::before {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .55); transform-origin: left; animation: ep2TourFill 1.4s linear forwards;
}
html.ep2-ui .ep2-tour-next.done::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: ep2TourRing .7s ease-out;
}
@keyframes ep2TourDone { 0% { transform: scale(.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes ep2TourFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ep2TourRing { to { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); } }
html.ep2-ui .ep2-tour-spot.done::after { border-color: #22c55e; animation: none; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25), 0 0 28px rgba(34, 197, 94, .5); }
html.ep2-ui .ep2-tour-card.stack .ep2-tour-foot { flex-direction: column-reverse; align-items: stretch; }
html.ep2-ui .ep2-tour-card.stack .ep2-tour-dots { justify-content: center; }
html.ep2-ui .ep2-tour-card.stack .ep2-tour-btns { width: 100%; }
html.ep2-ui .ep2-tour-card.stack .ep2-tour-btns button { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.ep2-ui .ep2-tour-card.stack .ep2-tour-next { flex: 2; }


@media (max-width: 599px) {
  html.ep2-ui .ep2-tour-card { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  html.ep2-ui .ep2-tour-spot, html.ep2-ui .ep2-tour-card { transition: none; }
  html.ep2-ui .ep2-tour-spot.on::after, html.ep2-ui .ep2-tour-card.swap > *, html.ep2-ui .ep2-tour-card.nudge { animation: none; }
}