:root {
 --bg: #080a10;
 --bg-elevated: #101522;
 --bg-card: #141b2c;
 --bg-card-hover: #1a2338;
 --border: #2a354d;
 --border-glow: rgba(108, 140, 255, 0.35);
 --text: #eef2fa;
 --text-muted: #8b96ad;
 --accent: #6c8cff;
 --accent-soft: rgba(108, 140, 255, 0.14);
 --accent-pressed: #5576e8;
 --green: #3dd68c;
 --danger: #ff6b7a;
 --warning: #f0b429;
 --gold: #f0c14a;
 --radius: 16px;
 --radius-sm: 12px;
 --safe-top: env(safe-area-inset-top, 0px);
 --safe-bottom: env(safe-area-inset-bottom, 0px);
 --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.35);
 --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
 --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
 --dur-fast: 0.14s;
 --dur-med: 0.22s;
 --dur-slow: 0.32s;
}

* {
 box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
}

html {
 scroll-behavior: smooth;
}

html, body {
 margin: 0;
 padding: 0;
 min-height: 100%;
 background: var(--bg);
 color: var(--text);
 font-family: var(--font);
 font-size: 16px;
 line-height: 1.45;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

body {
 overscroll-behavior-y: none;
 position: relative;
}

/* Ambient background glow */
.bg-glow {
 pointer-events: none;
 position: fixed;
 inset: 0;
 z-index: 0;
 background:
 radial-gradient(ellipse 80% 50% at 50% -10%, rgba(108, 140, 255, 0.22), transparent 55%),
 radial-gradient(ellipse 60% 40% at 100% 20%, rgba(61, 214, 140, 0.08), transparent 45%),
 radial-gradient(ellipse 50% 35% at 0% 80%, rgba(199, 125, 255, 0.08), transparent 50%),
 var(--bg);
}

#app {
 position: relative;
 z-index: 1;
 max-width: 520px;
 margin: 0 auto;
 min-height: 100dvh;
 padding: calc(12px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
}

.help-app {
 max-width: 640px;
}

/* Editor needs room for sticky CTA */
#view-editor.active {
 padding-bottom: calc(120px + var(--safe-bottom));
}

.simple-lead {
 font-size: 15px;
 line-height: 1.5;
}

.simple-steps {
 list-style: none;
 display: flex;
 gap: 6px;
 margin: 0 0 16px;
 padding: 0;
 flex-wrap: wrap;
}

.simple-steps li {
 flex: 1;
 min-width: 90px;
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 12px;
 font-weight: 650;
 color: var(--text-muted);
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 999px;
 padding: 8px 10px;
}

.simple-steps .num {
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: var(--accent);
 color: #fff;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 font-weight: 800;
 flex-shrink: 0;
}

.smart-actions {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 12px;
}

.btn-smart {
 width: 100%;
 border-radius: var(--radius);
 padding: 12px 14px;
}

.btn-rebuild {
 width: 100%;
 margin: 0;
 font-size: 15px;
 padding: 14px 16px;
}

.advanced-box {
 margin: 18px 0 8px;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 background: var(--bg-elevated);
 overflow: hidden;
}

.advanced-box > summary {
 list-style: none;
 cursor: pointer;
 padding: 14px 16px;
 font-weight: 700;
 font-size: 14px;
 color: var(--text-muted);
 user-select: none;
}

.advanced-box > summary::-webkit-details-marker {
 display: none;
}

.advanced-box > summary::after {
 content: "Show";
 float: right;
 font-size: 12px;
 font-weight: 600;
 color: var(--accent);
}

.advanced-box[open] > summary::after {
 content: "Hide";
}

.advanced-inner {
 padding: 0 14px 14px;
 border-top: 1px solid var(--border);
 padding-top: 12px;
}

.mini-advanced {
 margin: 0 0 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 padding: 8px 10px;
 background: var(--bg-elevated);
}

.mini-advanced > summary {
 cursor: pointer;
 font-size: 13px;
 font-weight: 650;
 color: var(--text-muted);
}

.sticky-cta {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 30;
 padding: 14px 16px calc(14px + var(--safe-bottom));
 background:
  linear-gradient(to top, rgba(8, 10, 16, 0.94) 55%, rgba(8, 10, 16, 0.55) 85%, transparent);
 -webkit-backdrop-filter: blur(12px) saturate(1.2);
 backdrop-filter: blur(12px) saturate(1.2);
 pointer-events: none;
 border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.sticky-cta .btn-done,
.sticky-cta .sticky-hint {
 pointer-events: auto;
 max-width: 520px;
 margin-left: auto;
 margin-right: auto;
}

.sticky-cta .btn-done {
 display: block;
 width: 100%;
 margin: 0;
 box-shadow:
  0 8px 28px rgba(61, 214, 140, 0.28),
  0 0 0 1px rgba(61, 214, 140, 0.15);
 transition:
  transform var(--dur-fast) var(--ease-out),
  box-shadow var(--dur-med) var(--ease-out),
  filter var(--dur-fast) ease;
}

.sticky-cta .btn-done:hover {
 box-shadow:
  0 10px 32px rgba(61, 214, 140, 0.35),
  0 0 0 1px rgba(61, 214, 140, 0.25);
}

.sticky-cta .btn-done:active {
 transform: scale(0.985);
 filter: brightness(0.96);
}

.sticky-hint {
 text-align: center;
 margin: 8px auto 0;
 font-size: 12px;
 max-width: 520px;
}

.view {
 display: none;
}

.view.active {
 display: block;
 animation: fadeIn var(--dur-med) var(--ease-out);
}

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: none; }
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 14px;
}

.topbar-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}

.brand {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
}

.brand-mark {
 width: 42px;
 height: 42px;
 border-radius: 14px;
 display: block;
 object-fit: cover;
 flex-shrink: 0;
 background: #0b0e14;
 box-shadow: 0 6px 20px rgba(108, 140, 255, 0.35);
 /* fallback if image fails: gradient + letter via CSS content not used on img */
}

/* Text fallback when no img (legacy / rare) */
div.brand-mark {
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 900;
 font-size: 18px;
 color: #fff;
 background: linear-gradient(145deg, #6c8cff 0%, #4a6cf0 45%, #3dd68c 120%);
}

img.brand-mark {
 border: 0;
}

.eyebrow {
 margin: 0;
 font-size: 11px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--text-muted);
 font-weight: 650;
}

h1 {
 margin: 2px 0 0;
 font-size: 22px;
 font-weight: 800;
 letter-spacing: -0.03em;
 line-height: 1.15;
 background: linear-gradient(120deg, #fff 0%, #c8d4ff 100%);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}

/* Version / last-updated under title (top brand) */
.brand-version {
 margin: 3px 0 0;
 font-size: 11px;
 font-weight: 650;
 letter-spacing: 0.02em;
 color: var(--text-muted);
 line-height: 1.25;
 white-space: nowrap;
}

/* Longer app title on small screens */
@media (max-width: 380px) {
 h1 {
 font-size: 17px;
 }
 .brand-version {
 font-size: 10px;
 white-space: normal;
 }
 .brand-mark {
 width: 36px;
 height: 36px;
 border-radius: 12px;
 }
 div.brand-mark {
 font-size: 15px;
 }
}

h2 {
 margin: 0;
 font-size: 18px;
 font-weight: 700;
}

.hint {
 color: var(--text-muted);
 font-size: 14px;
 margin: 0 0 16px;
}

a.btn {
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}

.empty {
 text-align: center;
 color: var(--text-muted);
 padding: 40px 16px;
 border: 1px dashed var(--border);
 border-radius: var(--radius);
}

.empty-card {
 background: linear-gradient(180deg, rgba(23, 29, 43, 0.9), rgba(16, 21, 34, 0.9));
 border-style: solid;
 border-color: var(--border);
 box-shadow: var(--shadow-card);
}

.empty-icon {
 display: block;
 font-size: 22px;
 margin-bottom: 8px;
 color: var(--accent);
 opacity: 0.85;
}

.hidden {
 display: none !important;
}

/* Buttons */
.btn {
 appearance: none;
 border: none;
 border-radius: 999px;
 padding: 10px 16px;
 font: inherit;
 font-size: 15px;
 font-weight: 600;
 cursor: pointer;
 transition:
  transform var(--dur-fast) var(--ease-out),
  background var(--dur-med) ease,
  opacity var(--dur-med) ease,
  border-color var(--dur-med) ease,
  box-shadow var(--dur-med) var(--ease-out);
 white-space: nowrap;
}

.btn:active {
 transform: scale(0.97);
}

.btn:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}

.btn-primary {
 background: var(--accent);
 color: #fff;
}

.btn-done {
 width: 100%;
 border-radius: var(--radius);
 background: linear-gradient(135deg, #3dd68c 0%, #2bb673 100%);
 color: #062416;
 font-size: 16px;
 font-weight: 700;
 padding: 14px 16px;
 margin: 4px 0 6px;
 border: none;
 box-shadow: 0 6px 20px rgba(61, 214, 140, 0.18);
}

.btn-done:active {
 filter: brightness(0.95);
}

.done-hint {
 margin-top: 0;
 margin-bottom: 18px;
}

.done-hint code,
#export-hint code {
 font-size: 12px;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 1px 5px;
 color: var(--green);
}

.btn-primary:active {
 background: var(--accent-pressed);
}

.btn-secondary {
 background: var(--bg-card);
 color: var(--text);
 border: 1px solid var(--border);
}

.btn-ghost {
 background: transparent;
 color: var(--accent);
 padding-left: 8px;
 padding-right: 8px;
}

.btn-danger {
 background: transparent;
 color: var(--danger);
 padding: 8px;
 font-size: 13px;
 border: 1px solid rgba(255, 107, 122, 0.35);
}

.btn-danger.btn-sm {
 padding: 7px 12px;
 font-size: 13px;
 width: 100%;
}

.smart-actions .btn-danger {
 margin-top: 2px;
}

.btn-sm {
 padding: 7px 12px;
 font-size: 13px;
}

.btn-icon {
 width: 36px;
 height: 36px;
 padding: 0;
 border-radius: 10px;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 color: var(--text);
 font-size: 16px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}

.btn-icon:disabled {
 opacity: 0.35;
 cursor: default;
}

/* Cards / list */
.card-list {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.seq-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 14px 14px 12px;
 text-align: left;
 width: 100%;
 color: inherit;
 font: inherit;
 cursor: pointer;
 transition:
  background var(--dur-med) ease,
  border-color var(--dur-med) ease,
  box-shadow var(--dur-med) var(--ease-out),
  transform var(--dur-fast) var(--ease-out);
}

.seq-card:hover {
 background: var(--bg-card-hover);
 border-color: rgba(108, 140, 255, 0.35);
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.seq-card:active {
 background: var(--bg-card-hover);
 transform: scale(0.992);
}

.seq-card-top {
 display: flex;
 justify-content: space-between;
 gap: 8px;
 align-items: flex-start;
}

.seq-card h3 {
 margin: 0;
 font-size: 17px;
 font-weight: 650;
}

.seq-meta {
 margin: 6px 0 0;
 font-size: 13px;
 color: var(--text-muted);
 line-height: 1.35;
}

.seq-meta-role {
 margin: 4px 0 0;
 font-size: 12px;
 font-weight: 650;
 color: var(--green, #3dd68c);
 line-height: 1.3;
}

.seq-card-main {
 min-width: 0;
 flex: 1;
}

.seq-card-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-top: 12px;
 justify-content: flex-start;
}

.seq-card-actions .btn {
 flex: 1 1 auto;
 min-width: 4.5rem;
}

/* Forms */
.form-block {
 margin-bottom: 14px;
}

.form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
}

/* Class / spec horizontal scroll pickers */
.picker-scroll {
 display: flex;
 gap: 8px;
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior-x: contain;
 padding: 4px 2px 10px;
 scroll-snap-type: x proximity;
 scrollbar-width: thin;
 scrollbar-color: var(--border) transparent;
}

.picker-scroll::-webkit-scrollbar {
 height: 6px;
}

.picker-scroll::-webkit-scrollbar-thumb {
 background: var(--border);
 border-radius: 999px;
}

.picker-chip {
 appearance: none;
 flex: 0 0 auto;
 scroll-snap-align: start;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text);
 border-radius: 999px;
 padding: 10px 14px;
 font: inherit;
 font-size: 13px;
 font-weight: 650;
 cursor: pointer;
 white-space: nowrap;
 transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.picker-chip:active {
 transform: scale(0.97);
}

.picker-chip.active {
 background: rgba(108, 140, 255, 0.18);
 border-color: var(--accent);
 color: #c9d6ff;
 box-shadow: 0 0 0 1px rgba(108, 140, 255, 0.25);
}

.picker-chip.has-dot::before {
 content: "";
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--chip-color, var(--accent));
 margin-right: 8px;
 vertical-align: middle;
}

#talent-tips {
 margin-top: -6px;
 color: var(--accent);
 font-size: 13px;
}

#talent-tips:empty {
 display: none;
}

#loadout-status {
 margin-top: -4px;
 font-size: 12px;
 font-weight: 600;
}

#loadout-status.ok {
 color: var(--green);
}

#loadout-status.warn {
 color: var(--warning);
}

.talent-panel {
 border: 1px solid var(--border);
 border-radius: var(--radius);
 background: var(--bg-elevated);
 padding: 10px 12px;
 margin-bottom: 16px;
 max-height: 220px;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}

.talent-panel h3 {
 margin: 0 0 8px;
 font-size: 13px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: var(--text-muted);
}

.talent-panel ul {
 margin: 0 0 12px;
 padding-left: 18px;
}

.talent-panel ul.talent-icon-list {
 list-style: none;
 padding-left: 0;
}

.talent-panel ul.talent-icon-list li {
 display: flex;
 align-items: flex-start;
 gap: 8px;
}

.talent-panel ul.talent-icon-list .spell-icon {
 margin-top: 1px;
 flex-shrink: 0;
}

.talent-panel li {
 margin: 4px 0;
 font-size: 13px;
 color: var(--text);
}

.talent-panel li .t-note {
 display: block;
 font-size: 11px;
 color: var(--text-muted);
 font-weight: 500;
}

.talent-panel .talent-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 8px;
}

/* Exclusive talent branch pickers */
.branch-picker {
 display: flex;
 flex-direction: column;
 gap: 10px;
 max-height: 240px;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 padding: 4px 0 8px;
}

.branch-group {
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg-card);
 padding: 8px 10px;
}

.branch-group-title {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--text-muted);
 margin: 0 0 6px;
}

.branch-options {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.branch-opt {
 appearance: none;
 border: 1px solid var(--border);
 background: var(--bg-elevated);
 color: var(--text-muted);
 border-radius: 999px;
 padding: 7px 11px;
 font: inherit;
 font-size: 12px;
 font-weight: 650;
 cursor: pointer;
}

.branch-opt.active {
 background: rgba(108, 140, 255, 0.18);
 border-color: var(--accent);
 color: #c9d6ff;
}

.branch-opt .branch-casts {
 display: block;
 font-size: 10px;
 font-weight: 500;
 opacity: 0.75;
 margin-top: 2px;
}

.chip.chip-exclusive {
 border-color: rgba(240, 180, 41, 0.45);
}

.chip.chip-exclusive .chip-branch-tag {
 font-size: 9px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.03em;
 color: var(--warning);
 margin-left: 2px;
}

.chip.chip-blocked {
 opacity: 0.38;
 text-decoration: line-through;
 pointer-events: none;
}

/* -- Wowhead-style talent calculator -- */
.sheet-panel-tall {
 max-height: min(94dvh, 900px);
}

.calc-toolbar {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 10px;
 align-items: center;
}

.calc-level-label {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 12px;
 font-weight: 700;
 color: var(--text-muted);
 margin: 0;
}

.calc-level-select {
 font: inherit;
 font-weight: 700;
 font-size: 13px;
 padding: 6px 8px;
 border-radius: 8px;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text);
 min-width: 4.5rem;
}

.calc-points {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 10px;
}

.calc-points span {
 flex: 1;
 min-width: 90px;
 text-align: center;
 font-size: 12px;
 font-weight: 700;
 padding: 8px 6px;
 border-radius: 10px;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text-muted);
}

.calc-points span.is-full {
 border-color: var(--warning);
 color: var(--warning);
}

.calc-points span.is-ok {
 border-color: rgba(61, 214, 140, 0.45);
 color: var(--green);
}

.calc-tabs {
 display: flex;
 gap: 6px;
 margin-bottom: 10px;
 flex-wrap: wrap;
}

.calc-tree-view {
 min-height: 280px;
 max-height: min(55dvh, 480px);
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 background: #0a0c12;
 padding: 12px;
 /* subtle tree feel */
 background-image:
 radial-gradient(ellipse at 50% 0%, rgba(108, 140, 255, 0.08), transparent 55%),
 radial-gradient(ellipse at 20% 100%, rgba(61, 214, 140, 0.05), transparent 45%);
}

.calc-row {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 justify-content: center;
 margin-bottom: 12px;
 min-height: 56px;
 align-items: flex-start;
}

.calc-node {
 appearance: none;
 width: 76px;
 min-height: 84px;
 border-radius: 12px;
 border: 2px solid #2a3348;
 background: #121722;
 color: var(--text);
 padding: 5px 4px 6px;
 font: inherit;
 font-size: 10px;
 font-weight: 650;
 line-height: 1.2;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 gap: 3px;
 text-align: center;
 position: relative;
 transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, opacity 0.12s;
}

.calc-node .calc-node-pts {
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.02em;
 color: #f0c14a;
 background: rgba(240, 193, 74, 0.12);
 border: 1px solid rgba(240, 193, 74, 0.35);
 border-radius: 999px;
 padding: 1px 5px;
 line-height: 1.3;
 white-space: nowrap;
 max-width: 70px;
 overflow: hidden;
 text-overflow: ellipsis;
}

.calc-node .calc-node-pts.is-free {
 color: #3dd68c;
 background: rgba(61, 214, 140, 0.1);
 border-color: rgba(61, 214, 140, 0.35);
}

.calc-node .calc-node-pts.is-spent {
 color: #6c8cff;
 background: rgba(108, 140, 255, 0.14);
 border-color: rgba(108, 140, 255, 0.4);
}

.calc-node .calc-node-icon {
 width: 28px;
 height: 28px;
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.calc-node .calc-node-name {
 max-width: 70px;
 overflow: hidden;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 word-break: break-word;
}

.calc-node.is-selected {
 border-color: #6c8cff;
 background: rgba(108, 140, 255, 0.16);
 box-shadow: 0 0 0 1px rgba(108, 140, 255, 0.35), 0 0 16px rgba(108, 140, 255, 0.2);
}

.calc-node.is-locked {
 border-color: #3dd68c;
 background: rgba(61, 214, 140, 0.1);
 cursor: default;
}

.calc-node.is-locked.is-selected {
 box-shadow: 0 0 0 1px rgba(61, 214, 140, 0.35);
}

.calc-node.is-blocked {
 opacity: 0.35;
 cursor: not-allowed;
}

.calc-node.is-gate-blocked {
 opacity: 0.28;
 filter: grayscale(0.45);
 cursor: not-allowed;
}

.calc-node.is-choice {
 border-style: dashed;
}

.calc-node.is-hero-a.is-selected {
 border-color: #c77dff;
 background: rgba(199, 125, 255, 0.14);
 box-shadow: 0 0 0 1px rgba(199, 125, 255, 0.35), 0 0 14px rgba(199, 125, 255, 0.18);
}

.calc-node.is-hero-b.is-selected {
 border-color: #f0a030;
 background: rgba(240, 160, 48, 0.14);
 box-shadow: 0 0 0 1px rgba(240, 160, 48, 0.35), 0 0 14px rgba(240, 160, 48, 0.18);
}

.calc-node-badge {
 font-size: 8px;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--text-muted);
}

/* Gate dividers between tree sections (8 / 20 pts, hero 5) */
.calc-gate-bar {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 10px 4px 14px;
 width: 100%;
}

.calc-gate-bar .calc-gate-line {
 flex: 1;
 height: 1px;
 background: linear-gradient(
 90deg,
 transparent,
 rgba(240, 193, 74, 0.55),
 transparent
 );
}

.calc-gate-bar .calc-gate-label {
 flex: 0 1 auto;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 text-align: center;
 padding: 4px 10px;
 border-radius: 999px;
 white-space: nowrap;
 max-width: 90%;
}

.calc-gate-bar.is-locked .calc-gate-label {
 color: #f0c14a;
 background: rgba(240, 193, 74, 0.1);
 border: 1px solid rgba(240, 193, 74, 0.4);
}

.calc-gate-bar.is-open .calc-gate-label {
 color: #3dd68c;
 background: rgba(61, 214, 140, 0.1);
 border: 1px solid rgba(61, 214, 140, 0.4);
}

.calc-gate-bar.is-open .calc-gate-line {
 background: linear-gradient(
 90deg,
 transparent,
 rgba(61, 214, 140, 0.45),
 transparent
 );
}

.calc-row.is-gate-locked {
 opacity: 0.55;
}

.calc-path-label {
 text-align: center;
 font-size: 12px;
 font-weight: 700;
 color: var(--text-muted);
 margin: 0 0 10px;
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

.calc-summary {
 margin-top: 6px;
 font-size: 12px;
}

label {
 display: block;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--text-muted);
 margin-bottom: 6px;
}

input[type="text"],
input[type="number"],
select,
textarea {
 width: 100%;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 color: var(--text);
 font: inherit;
 padding: 12px 12px;
 outline: none;
}

input:focus,
select:focus,
textarea:focus {
 border-color: var(--accent);
}

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

.section-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin: 8px 0 10px;
}

.badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 22px;
 height: 22px;
 padding: 0 6px;
 border-radius: 999px;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 font-size: 12px;
 color: var(--text-muted);
 vertical-align: middle;
 margin-left: 6px;
}

/* Steps - scrollable panel so the page doesn't stack forever */
.steps-scroll {
 display: flex;
 flex-direction: column;
 max-height: min(52dvh, 420px);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 background: var(--bg-elevated);
 overflow: hidden;
}

.steps-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
 flex: 1;
 min-height: 0;
 max-height: min(52dvh, 420px);
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 padding: 8px;
 scroll-padding: 8px;
 /* Subtle scrollbar (Firefox + WebKit) */
 scrollbar-width: thin;
 scrollbar-color: var(--border) transparent;
}

.steps-list::-webkit-scrollbar {
 width: 8px;
}

.steps-list::-webkit-scrollbar-thumb {
 background: var(--border);
 border-radius: 999px;
}

.steps-list::-webkit-scrollbar-track {
 background: transparent;
}

.steps-scroll .group-header:first-child,
.steps-list > .group-header:first-child {
 margin-top: 0;
}

.steps-list .empty {
 margin: 8px;
}

.step-card {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 10px;
 align-items: start;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 10px;
 cursor: pointer;
 transition:
  border-color var(--dur-med) ease,
  box-shadow var(--dur-med) var(--ease-out),
  background var(--dur-med) ease,
  transform var(--dur-fast) var(--ease-out);
}
.step-card:hover {
 border-color: rgba(108, 140, 255, 0.45);
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.step-card:active {
 transform: scale(0.995);
}
.step-card-selected {
 border-color: rgba(61, 214, 140, 0.75);
 box-shadow: 0 0 0 1px rgba(61, 214, 140, 0.35), 0 4px 16px rgba(61, 214, 140, 0.12);
 background: linear-gradient(180deg, rgba(61, 214, 140, 0.1) 0%, var(--bg-card) 100%);
}
.step-card .step-controls {
 cursor: default;
}
.pill-selected {
 background: rgba(61, 214, 140, 0.2);
 color: var(--green, #3dd68c);
 border: 1px solid rgba(61, 214, 140, 0.45);
 font-size: 11px;
 font-weight: 700;
}
.helper-selection-banner {
 margin: 0 0 10px;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid rgba(61, 214, 140, 0.4);
 background: rgba(61, 214, 140, 0.1);
 font-size: 13px;
 line-height: 1.45;
 color: var(--text);
}
.helper-selection-banner.hidden {
 display: none !important;
}
.helper-selection-banner .btn {
 margin-left: 6px;
 vertical-align: middle;
}

.step-num {
 width: 28px;
 height: 28px;
 border-radius: 8px;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 13px;
 font-weight: 700;
 color: var(--accent);
 margin-top: 2px;
}

.step-body {
 min-width: 0;
}

.step-label-row {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin: 0 0 4px;
}

.step-label {
 font-weight: 650;
 font-size: 15px;
 margin: 0;
}

.pill {
 display: inline-flex;
 align-items: center;
 border-radius: 999px;
 padding: 2px 8px;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.03em;
 text-transform: uppercase;
 border: 1px solid var(--border);
}

.pill-loop {
 background: rgba(61, 214, 140, 0.12);
 color: var(--green);
 border-color: rgba(61, 214, 140, 0.35);
}

.pill-once {
 background: rgba(240, 180, 41, 0.12);
 color: var(--warning);
 border-color: rgba(240, 180, 41, 0.35);
}

.toggle-row {
 display: flex;
 gap: 8px;
}

.toggle-row.three .toggle-opt {
 padding: 10px 6px;
 font-size: 12px;
}

.toggle-opt {
 flex: 1;
 appearance: none;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text-muted);
 border-radius: 12px;
 padding: 12px 10px;
 font: inherit;
 font-size: 15px;
 font-weight: 700;
 cursor: pointer;
}

.toggle-opt.active[data-mode="once"] {
 background: rgba(240, 180, 41, 0.14);
 border-color: var(--warning);
 color: var(--warning);
}

.toggle-opt.active[data-mode="sequential"] {
 background: rgba(108, 140, 255, 0.16);
 border-color: var(--accent);
 color: var(--accent);
}

.toggle-opt.active[data-mode="priority"] {
 background: rgba(61, 214, 140, 0.16);
 border-color: var(--green);
 color: var(--green);
}

.btn-mode-toggle {
 font-size: 10px;
 font-weight: 700;
 padding: 6px 6px;
 border-radius: 8px;
 border: 1px solid var(--border);
 background: var(--bg-elevated);
 color: var(--text-muted);
 cursor: pointer;
 white-space: nowrap;
 min-width: 52px;
}

.btn-mode-toggle.is-once {
 color: var(--warning);
 border-color: rgba(240, 180, 41, 0.4);
 background: rgba(240, 180, 41, 0.1);
}

.btn-mode-toggle.is-sequential {
 color: var(--accent);
 border-color: rgba(108, 140, 255, 0.45);
 background: rgba(108, 140, 255, 0.12);
}

.btn-mode-toggle.is-priority {
 color: var(--green);
 border-color: rgba(61, 214, 140, 0.4);
 background: rgba(61, 214, 140, 0.1);
}

.pill-seq {
 background: rgba(108, 140, 255, 0.12);
 color: var(--accent);
 border-color: rgba(108, 140, 255, 0.35);
}

.pill-pri {
 background: rgba(61, 214, 140, 0.12);
 color: var(--green);
 border-color: rgba(61, 214, 140, 0.35);
}

.block-preview {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-bottom: 10px;
 min-height: 0;
}

.block-chip {
 font-size: 11px;
 font-weight: 700;
 padding: 5px 10px;
 border-radius: 999px;
 border: 1px solid var(--border);
 color: var(--text-muted);
 background: var(--bg-elevated);
}

.block-chip.once {
 color: var(--warning);
 border-color: rgba(240, 180, 41, 0.35);
}

.block-chip.seq {
 color: var(--accent);
 border-color: rgba(108, 140, 255, 0.4);
}

.block-chip.pri {
 color: var(--green);
 border-color: rgba(61, 214, 140, 0.4);
}

.vars-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 18px;
}

.var-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 10px 12px;
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 8px;
 align-items: start;
}

.var-card h3 {
 margin: 0;
 font-size: 14px;
 font-weight: 700;
 color: var(--accent);
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.var-card pre {
 margin: 4px 0 0;
 font-size: 11px;
 color: var(--text-muted);
 white-space: pre-wrap;
 word-break: break-word;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.var-actions {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.group-header {
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--text-muted);
 margin: 10px 0 4px;
 padding: 6px 10px;
 border-left: 3px solid var(--border);
 background: rgba(255, 255, 255, 0.02);
 border-radius: 0 8px 8px 0;
}

.group-header.mode-once {
 border-left-color: var(--warning);
 color: var(--warning);
}

.group-header.mode-sequential {
 border-left-color: var(--accent);
 color: var(--accent);
}

.group-header.mode-priority {
 border-left-color: var(--green);
 color: var(--green);
}

.step-macro {
 margin: 0;
 font-size: 12px;
 color: var(--text-muted);
 white-space: pre-wrap;
 word-break: break-word;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.step-controls {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

/* Bottom sheets */
.sheet {
 position: fixed;
 inset: 0;
 z-index: 50;
 display: flex;
 align-items: flex-end;
 justify-content: center;
}

.sheet-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.55);
 -webkit-backdrop-filter: blur(4px);
 backdrop-filter: blur(4px);
 animation: fadeBackdrop var(--dur-med) ease;
}

@keyframes fadeBackdrop {
 from { opacity: 0; }
 to { opacity: 1; }
}

.sheet-panel {
 position: relative;
 width: 100%;
 max-width: 520px;
 max-height: min(88dvh, 720px);
 overflow: auto;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-bottom: none;
 border-radius: 22px 22px 0 0;
 padding: 10px 16px calc(16px + var(--safe-bottom));
 animation: slideUp var(--dur-slow) var(--ease-out);
 box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
 overscroll-behavior: contain;
}

@keyframes slideUp {
 from { transform: translateY(28px); opacity: 0.5; }
 to { transform: none; opacity: 1; }
}

.sheet-grab {
 width: 40px;
 height: 4px;
 border-radius: 999px;
 background: var(--border);
 margin: 4px auto 14px;
 opacity: 0.9;
}

.sheet-actions {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
 margin-top: 12px;
}

.export-tabs {
 display: flex;
 gap: 6px;
 margin-bottom: 10px;
 flex-wrap: wrap;
}

.tab {
 appearance: none;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text-muted);
 border-radius: 999px;
 padding: 7px 12px;
 font: inherit;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}

.tab.active {
 background: var(--accent);
 border-color: var(--accent);
 color: #fff;
}

#export-text {
 min-height: 220px;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
}

#ability-filter {
 margin-bottom: 8px;
}

.chip-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 4px;
 max-height: min(42dvh, 320px);
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 padding: 4px 2px 8px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg);
 scrollbar-width: thin;
 scrollbar-color: var(--border) transparent;
}

.chip-grid::-webkit-scrollbar {
 width: 8px;
}

.chip-grid::-webkit-scrollbar-thumb {
 background: var(--border);
 border-radius: 999px;
}

#ability-count {
 margin: 0 0 4px;
 font-size: 12px;
}

.chip {
 appearance: none;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text);
 border-radius: 999px;
 padding: 8px 12px 8px 8px;
 font: inherit;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 max-width: 100%;
}

.chip:active {
 background: var(--bg-card-hover);
}

.chip .chip-text {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

/* Spell icons  -  in-game style frame; art from Wowhead CDN when known */
.spell-icon {
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 3px;
 color: var(--si-color, var(--accent));
 background: var(--si-bg, rgba(108, 140, 255, 0.12));
 border: 1px solid color-mix(in srgb, var(--si-color, var(--accent)) 35%, transparent);
 padding: 0;
 box-sizing: border-box;
 overflow: hidden;
 position: relative;
}

/* Gold/bronze action-button frame like retail UI */
.spell-icon--frame {
 border: 1px solid #1a1208;
 border-radius: 3px;
 box-shadow:
  0 0 0 1px #6b5428,
  0 0 0 2px #c9a227,
  0 0 0 3px #3a2a10,
  0 2px 6px rgba(0, 0, 0, 0.55);
 background: #0a0a0c;
 color: var(--si-color, #e8c547);
}

.spell-icon--wow {
 background: #000;
}

.spell-icon-img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 image-rendering: auto;
 border-radius: 1px;
}

.spell-icon-fallback {
 display: none;
 position: absolute;
 inset: 0;
 align-items: center;
 justify-content: center;
 background: rgba(12, 14, 20, 0.92);
 padding: 2px;
}

.spell-icon.is-fallback .spell-icon-img,
.spell-icon-img.is-broken {
 display: none;
}

.spell-icon.is-fallback .spell-icon-fallback {
 display: flex;
}

.spell-icon svg {
 display: block;
}

.step-label-row .spell-icon,
.step-label-row .spell-icon-group {
 margin-right: 4px;
}

/* Multi-spell step (e.g. Immolation Aura + Infernal Strike) */
.spell-icon-group {
 display: inline-flex;
 align-items: center;
 flex: 0 0 auto;
 gap: 2px;
 vertical-align: middle;
}

.spell-icon-plus {
 font-size: 11px;
 font-weight: 800;
 color: var(--text-muted, #8b95a8);
 line-height: 1;
 padding: 0 1px;
 user-select: none;
}

.chip .spell-icon,
.chip .spell-icon-group {
 margin-right: 4px;
 flex-shrink: 0;
}

.rot-chip .rot-icon .spell-icon-group {
 gap: 1px;
}

.rot-chip .rot-icon .spell-icon-plus {
 font-size: 9px;
}

.calc-node .calc-node-icon .spell-icon {
 width: 28px !important;
 height: 28px !important;
}

.calc-node .calc-node-icon {
 width: 32px;
 height: 32px;
 border-radius: 4px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 background: transparent;
}

.legend-row {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 10px;
 margin: 0 0 10px;
 padding: 0;
 list-style: none;
}

.legend-row li {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 font-size: 11px;
 color: var(--text-muted);
 font-weight: 600;
}

.toast {
 text-align: center;
 color: var(--green);
 font-size: 13px;
 font-weight: 600;
 margin: 8px 0 0;
}

@media (min-width: 600px) {
 #app {
 padding-top: 24px;
 }

 .sheet {
 align-items: center;
 }

 .sheet-panel {
 border-radius: 20px;
 border-bottom: 1px solid var(--border);
 margin: 16px;
 }
}

/* -- Crawlable SEO blurb (home) -- */
.seo-blurb {
 margin: 0 0 18px;
 padding: 14px 16px 14px;
 border-radius: var(--radius);
 border: 1px solid var(--border);
 background: rgba(16, 21, 34, 0.72);
}
.seo-blurb-title {
 margin: 0 0 8px;
 font-size: 15px;
 font-weight: 750;
 letter-spacing: -0.01em;
 color: var(--text);
}
.seo-blurb-text {
 margin: 0 0 10px;
 font-size: 13px;
 line-height: 1.55;
 color: var(--text-muted);
}
.seo-blurb-text code {
 font-size: 11px;
 background: rgba(0, 0, 0, 0.28);
 border: 1px solid var(--border);
 border-radius: 5px;
 padding: 1px 5px;
 color: var(--green);
}
.seo-blurb-list {
 margin: 0 0 10px;
 padding-left: 1.15em;
 font-size: 13px;
 line-height: 1.5;
 color: var(--text-muted);
}
.seo-blurb-list li {
 margin: 0 0 4px;
}
.seo-blurb-links {
 margin: 0;
 font-size: 13px;
 font-weight: 650;
}
.seo-blurb-links a {
 color: var(--accent);
 text-decoration: none;
}
.seo-blurb-links a:hover {
 text-decoration: underline;
}
.seo-blurb-links .dot {
 color: var(--text-muted);
 font-weight: 500;
}

/* -- Hero / home polish -- */
.hero-card {
 position: relative;
 overflow: hidden;
 margin: 0 0 20px;
 padding: 20px 18px 18px;
 border-radius: calc(var(--radius) + 4px);
 border: 1px solid var(--border-glow);
 background:
 linear-gradient(145deg, rgba(108, 140, 255, 0.16) 0%, transparent 45%),
 linear-gradient(180deg, #171f33 0%, #101522 100%);
 box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-card::after {
 content: "";
 position: absolute;
 right: -20%;
 top: -40%;
 width: 60%;
 height: 100%;
 background: radial-gradient(circle, rgba(61, 214, 140, 0.12), transparent 65%);
 pointer-events: none;
}

.hero-kicker {
 margin: 0 0 8px;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--green);
}

.hero-title {
 margin: 0 0 10px;
 font-size: 22px;
 font-weight: 800;
 letter-spacing: -0.02em;
 line-height: 1.25;
 position: relative;
 z-index: 1;
}

.hero-text {
 margin: 0 0 14px;
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.55;
 position: relative;
 z-index: 1;
}

.hero-text code {
 font-size: 12px;
 background: rgba(0, 0, 0, 0.35);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 1px 6px;
 color: var(--green);
}

.hero-pills {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-bottom: 14px;
 position: relative;
 z-index: 1;
}

.hero-pills span {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: #c5d0ff;
 background: var(--accent-soft);
 border: 1px solid rgba(108, 140, 255, 0.3);
 border-radius: 999px;
 padding: 5px 10px;
}

.hero-link {
 position: relative;
 z-index: 1;
 display: inline-flex;
 font-size: 14px;
 font-weight: 700;
 color: var(--accent);
 text-decoration: none;
}

.hero-link:hover {
 text-decoration: underline;
}

.list-section-head {
 margin-top: 4px;
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
}

.list-section-head h2 {
 font-size: 15px;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--text-muted);
 margin: 0;
}

.list-section-actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
}

/* Patch + casual onboarding */
.patch-banner {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0 0 8px;
 padding: 8px 12px;
 border-radius: 999px;
 background: rgba(61, 214, 140, 0.1);
 border: 1px solid rgba(61, 214, 140, 0.28);
 font-size: 12px;
 font-weight: 650;
 color: var(--green);
 position: relative;
 z-index: 1;
}

.patch-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.2);
 flex-shrink: 0;
}

.method-patch-badge {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
 margin: 0 0 12px;
 padding: 6px 12px;
 border-radius: 10px;
 background: rgba(108, 140, 255, 0.12);
 border: 1px solid rgba(108, 140, 255, 0.32);
 font-size: 12px;
 font-weight: 650;
 color: var(--text);
 position: relative;
 z-index: 1;
}

.method-patch-label {
 text-transform: uppercase;
 letter-spacing: 0.06em;
 font-size: 10px;
 font-weight: 800;
 color: var(--text-muted);
}

.method-patch-value {
 color: #9eb6ff;
 font-weight: 750;
}

.method-patch-scraped {
 color: var(--text-muted);
 font-weight: 550;
 font-size: 11px;
}

.export-checklist {
 margin-top: 12px;
 padding: 12px 14px;
 border-radius: var(--radius-sm);
 border: 1px solid rgba(61, 214, 140, 0.35);
 background: rgba(61, 214, 140, 0.08);
}

.export-checklist-title {
 margin: 0 0 8px;
 font-size: 14px;
 font-weight: 800;
 color: var(--green);
}

.export-checklist-steps {
 margin: 0 0 8px;
 padding-left: 20px;
 font-size: 13px;
 line-height: 1.45;
 color: var(--text);
}

.export-checklist-steps li {
 margin: 5px 0;
}

.export-checklist-steps code {
 font-size: 12px;
 color: var(--green);
}

.export-checklist-hint {
 margin: 0 0 10px;
}

.casual-path {
 margin: 0 0 12px;
 padding: 10px 12px 10px 28px;
 border-radius: var(--radius-sm);
 background: rgba(0, 0, 0, 0.22);
 border: 1px solid var(--border);
 font-size: 13px;
 color: var(--text-muted);
 position: relative;
 z-index: 1;
}

.casual-path li {
 margin: 4px 0;
}

.casual-path code {
 font-size: 12px;
 color: var(--green);
}

.hero-sba-note {
 margin: 0 0 12px;
 padding: 10px 12px;
 border-radius: var(--radius-sm);
 border: 1px solid rgba(240, 180, 41, 0.28);
 background: rgba(240, 180, 41, 0.08);
 font-size: 12px;
 line-height: 1.45;
 color: var(--text-muted);
 position: relative;
 z-index: 1;
}

.hero-sba-note strong {
 color: var(--warning);
}

/* Role chips */
.role-picker {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.role-chip {
 appearance: none;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text-muted);
 border-radius: 999px;
 padding: 8px 12px;
 font: inherit;
 font-size: 13px;
 font-weight: 650;
 cursor: pointer;
}

.role-chip.active {
 color: #062216;
 background: linear-gradient(180deg, #4ee69a 0%, #2fc47a 100%);
 border-color: transparent;
}

.role-badge {
 display: inline-block;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 padding: 4px 8px;
 border-radius: 999px;
 white-space: nowrap;
 border: 1px solid var(--border);
 color: var(--text-muted);
}

.role-badge-st {
 color: #9eb6ff;
 border-color: rgba(108, 140, 255, 0.4);
 background: rgba(108, 140, 255, 0.12);
}

.role-badge-aoe {
 color: #f0c14a;
 border-color: rgba(240, 193, 74, 0.4);
 background: rgba(240, 193, 74, 0.12);
}

.role-badge-hybrid {
 color: var(--green);
 border-color: rgba(61, 214, 140, 0.35);
 background: rgba(61, 214, 140, 0.1);
}

.seq-card-badges {
 flex-shrink: 0;
}

/* Casual helpers card */
.casual-card {
 margin: 0 0 16px;
 padding: 14px;
 border-radius: var(--radius);
 border: 1px solid var(--border);
 background: linear-gradient(180deg, #161d2e 0%, #121826 100%);
}

.casual-card-title {
 margin: 0 0 6px;
 font-size: 15px;
 font-weight: 800;
}

.helper-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 margin-top: 10px;
}

.helper-btn {
 appearance: none;
 text-align: left;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text);
 border-radius: var(--radius-sm);
 padding: 10px 10px 8px;
 font: inherit;
 cursor: pointer;
 transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.helper-btn:focus-visible {
 outline: 2px solid rgba(61, 214, 140, 0.65);
 outline-offset: 2px;
}

.helper-main {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 8px;
 width: 100%;
}

.helper-text {
 flex: 1;
 min-width: 0;
}

.helper-btn.active,
.helper-btn[aria-checked="true"] {
 border-color: rgba(61, 214, 140, 0.6);
 background: rgba(61, 214, 140, 0.12);
 box-shadow: inset 0 0 0 1px rgba(61, 214, 140, 0.18);
}

.helper-label {
 display: block;
 font-size: 13px;
 font-weight: 750;
 margin-bottom: 2px;
}

.helper-desc {
 display: block;
 font-size: 11px;
 color: var(--text-muted);
 line-height: 1.35;
}

/* Visible On/Off switch */
.helper-switch {
 flex-shrink: 0;
 width: 40px;
 height: 22px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.12);
 position: relative;
 margin-top: 1px;
 transition: background 0.15s ease, border-color 0.15s ease;
}

.helper-knob {
 position: absolute;
 top: 2px;
 left: 2px;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: #c5cdd9;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
 transition: transform 0.15s ease, background 0.15s ease;
}

.helper-btn.active .helper-switch,
.helper-btn[aria-checked="true"] .helper-switch {
 background: rgba(61, 214, 140, 0.45);
 border-color: rgba(61, 214, 140, 0.7);
}

.helper-btn.active .helper-knob,
.helper-btn[aria-checked="true"] .helper-knob {
 transform: translateX(18px);
 background: #3dd68c;
}

.helper-state {
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--text-muted);
}

.helper-btn.active .helper-state,
.helper-btn[aria-checked="true"] .helper-state {
 color: #3dd68c;
}

.hint.ok {
 color: var(--green);
}

.hint.warn,
.macro-warnings {
 color: var(--warning);
}

/* Rotation preview */
.rotation-preview {
 margin: 0 0 12px;
 padding: 10px 12px;
 border-radius: var(--radius-sm);
 border: 1px solid var(--border);
 background: rgba(0, 0, 0, 0.2);
}

.rotation-preview.is-empty {
 display: none;
}

.rotation-preview-title {
 margin: 0 0 8px;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--text-muted);
}

.rotation-preview-row {
 display: flex;
 align-items: center;
 gap: 6px;
 overflow-x: auto;
 padding-bottom: 4px;
 -webkit-overflow-scrolling: touch;
}

.rot-chip .rot-icon {
 display: inline-flex;
 flex-shrink: 0;
}

.rot-chip .rot-icon .spell-icon {
 width: 18px !important;
 height: 18px !important;
}

.rot-chip {
 flex: 0 0 auto;
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 6px 10px;
 border-radius: 999px;
 border: 1px solid var(--border);
 background: var(--bg-card);
 font-size: 12px;
 font-weight: 650;
 max-width: 140px;
}

.rot-chip .rot-name {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.rot-num {
 width: 18px;
 height: 18px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 font-weight: 800;
 background: var(--accent);
 color: #fff;
 flex-shrink: 0;
}

.rot-chip.mode-once .rot-num {
 background: #8b96ad;
}

.rot-chip.mode-sequential .rot-num {
 background: #6c8cff;
}

.rot-chip.mode-priority .rot-num {
 background: #2fc47a;
}

.rot-arrow {
 color: var(--text-muted);
 font-size: 12px;
 flex-shrink: 0;
}

/* Export sheet extras */
.export-howto {
 margin: 0 0 12px;
 padding: 10px 12px 10px 28px;
 border-radius: var(--radius-sm);
 background: rgba(61, 214, 140, 0.08);
 border: 1px solid rgba(61, 214, 140, 0.22);
 font-size: 13px;
 color: var(--text-muted);
}

.export-howto li {
 margin: 4px 0;
}

.export-howto code {
 color: var(--green);
 font-size: 12px;
}

.export-validation {
 margin: 0 0 12px;
 padding: 10px 12px;
 border-radius: var(--radius-sm);
 border: 1px solid rgba(240, 180, 41, 0.35);
 background: rgba(240, 180, 41, 0.1);
 font-size: 13px;
 color: var(--text);
}

.export-validation ul {
 margin: 6px 0 0;
 padding-left: 18px;
}

.export-validation.hidden {
 display: none;
}

.export-handoff {
 display: flex;
 justify-content: center;
 margin: 10px 0 4px;
}

.qr-wrap {
 text-align: center;
 max-width: 200px;
}

.qr-wrap.hidden {
 display: none;
}

.qr-wrap img {
 display: inline-block;
 border-radius: 12px;
 background: #fff;
 padding: 6px;
 border: 1px solid var(--border);
}

.export-actions {
 flex-wrap: wrap;
}

.field-select {
 width: 100%;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text);
 font: inherit;
}

.new-choice-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin: 8px 0 14px;
}

.new-choice {
 appearance: none;
 text-align: left;
 width: 100%;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text);
 border-radius: var(--radius);
 padding: 12px 14px;
 font: inherit;
 cursor: pointer;
}

.new-choice:first-child {
 border-color: rgba(61, 214, 140, 0.45);
 background: rgba(61, 214, 140, 0.08);
}

/* Opened via + ST+AoE pack  -  strong recommended state */
.new-choice.preferred,
.new-choice.new-choice-preferred {
 border-color: rgba(61, 214, 140, 0.85) !important;
 background: rgba(61, 214, 140, 0.16) !important;
 box-shadow: 0 0 0 2px rgba(61, 214, 140, 0.35), 0 8px 24px rgba(61, 214, 140, 0.12);
 outline: none;
}
.new-choice.preferred .new-choice-title::after,
.new-choice.new-choice-preferred .new-choice-title::after {
 content: "   |   recommended";
 font-weight: 700;
 font-size: 12px;
 color: var(--green, #3dd68c);
 letter-spacing: 0.02em;
}

.new-choice-title {
 display: block;
 font-weight: 800;
 font-size: 15px;
 margin-bottom: 4px;
}

.new-choice-desc {
 display: block;
 font-size: 12px;
 color: var(--text-muted);
 line-height: 1.4;
}

.patch-line {
 margin-top: -6px;
 font-size: 12px;
}

/* Support / donate (optional tips) */
.support-card {
 margin: 20px 0 8px;
 padding: 16px 14px;
 border-radius: var(--radius);
 border: 1px solid rgba(108, 140, 255, 0.28);
 background: linear-gradient(165deg, rgba(28, 36, 56, 0.95) 0%, rgba(16, 22, 36, 0.98) 100%);
 box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.25));
}

.support-card-inline {
 margin: 12px 0 0;
}

.support-title {
 margin: 0 0 8px;
 font-size: 17px;
 font-weight: 800;
}

.support-text {
 margin: 0 0 12px;
 font-size: 13px;
 color: var(--text-muted);
 line-height: 1.45;
}

.support-amounts {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 0 0 12px;
}

.support-amount {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 64px;
 padding: 10px 16px;
 border-radius: 999px;
 font-size: 15px;
 font-weight: 800;
 text-decoration: none;
 color: #0a0d14;
 background: linear-gradient(180deg, #f0d060 0%, #c9a227 100%);
 border: 1px solid rgba(255, 220, 120, 0.45);
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
 transition: transform 0.08s ease, filter 0.15s ease;
}

.support-amount:hover {
 filter: brightness(1.06);
}

.support-amount:active {
 transform: scale(0.98);
}

.support-amount-mid {
 background: linear-gradient(180deg, #7ec8ff 0%, #4a8fd4 100%);
 border-color: rgba(140, 200, 255, 0.4);
 color: #0a0d14;
}

.support-amount-hi {
 background: linear-gradient(180deg, #3dd68c 0%, #2a9f68 100%);
 border-color: rgba(100, 220, 150, 0.4);
 color: #0a0d14;
}

.paypal-host {
 min-height: 0;
 margin: 4px 0 8px;
}

.paypal-host.is-ready {
 min-height: 45px;
}

.paypal-host.is-link-only:empty {
 display: none;
}

.support-fallback,
.support-disclaimer {
 margin: 6px 0 0;
 font-size: 12px;
}

.support-fallback a,
.support-disclaimer {
 color: var(--text-muted);
}

.support-card-page {
 margin: 16px 0 8px;
}

.footer-donate {
 margin: 0 0 10px;
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.45;
}

.footer-donate-link {
 color: var(--accent, #6c8cff);
 font-weight: 750;
 text-decoration: underline;
 text-underline-offset: 2px;
}

.footer-donate-link:hover {
 color: #9eb6ff;
}

.site-footer {
 margin-top: 28px;
 padding: 18px 14px 8px;
 border-top: 1px solid var(--border);
 text-align: center;
 font-size: 12px;
 color: var(--text-muted);
 line-height: 1.5;
}

.site-footer .footer-brand {
 margin: 0 0 8px;
 font-size: 13px;
 font-weight: 800;
 letter-spacing: 0.02em;
 color: var(--text);
}

.site-footer .footer-legal {
 margin: 0 auto 12px;
 max-width: 36em;
 font-size: 11px;
 line-height: 1.5;
 color: var(--text-muted);
}

.site-footer .footer-links {
 margin: 0;
 font-size: 12px;
}

.site-footer a {
 color: var(--accent);
 text-decoration: none;
 font-weight: 650;
}

.site-footer .dot {
 margin: 0 6px;
 opacity: 0.5;
}

.site-footer .footer-version {
 margin: 12px 0 0;
 font-size: 11px;
 font-weight: 650;
 letter-spacing: 0.02em;
 color: var(--text-muted);
 opacity: 0.9;
}

/* Sequence cards polish */
.card-list {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.seq-card {
 border: 1px solid var(--border);
 border-radius: var(--radius);
 background: linear-gradient(180deg, #181f30 0%, #131a28 100%);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
 transition: border-color 0.12s, transform 0.12s;
}

.seq-card:active {
 transform: scale(0.99);
 border-color: rgba(108, 140, 255, 0.4);
}

/* Sticky CTA match darker bg */
.sticky-cta {
 background: linear-gradient(to top, rgba(8, 10, 16, 0.98) 55%, rgba(8, 10, 16, 0));
}

/* -- Help page -- */
.help-page .help-lead {
 font-size: 15px;
 line-height: 1.55;
 color: var(--text-muted);
 margin: 0 0 18px;
}

.help-page .help-lead a {
 color: var(--accent);
 font-weight: 650;
}

.help-page .help-lead code {
 font-size: 12px;
 background: rgba(0, 0, 0, 0.35);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 1px 6px;
 color: var(--green);
}

.help-toc {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 0 0 22px;
 padding: 12px;
 border-radius: var(--radius);
 border: 1px solid var(--border);
 background: var(--bg-card);
}

.help-toc a {
 font-size: 12px;
 font-weight: 700;
 color: #c5d0ff;
 text-decoration: none;
 padding: 6px 10px;
 border-radius: 999px;
 background: var(--accent-soft);
 border: 1px solid rgba(108, 140, 255, 0.25);
}

.help-toc a:hover {
 border-color: var(--accent);
}

.help-section {
 margin: 0 0 22px;
 padding: 18px 16px;
 border-radius: var(--radius);
 border: 1px solid var(--border);
 background: linear-gradient(180deg, rgba(23, 29, 43, 0.95), rgba(16, 21, 34, 0.98));
 box-shadow: var(--shadow-card);
}

.help-section h2 {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 0 0 12px;
 font-size: 18px;
}

.help-h3 {
 margin: 16px 0 8px;
 font-size: 15px;
 font-weight: 800;
 color: var(--text);
 letter-spacing: -0.01em;
}

.help-section > .help-h3:first-of-type {
 margin-top: 4px;
}

.help-page .help-card a {
 color: var(--accent);
 font-weight: 650;
}

.help-cta a.hint,
.help-cta .hint a {
 color: var(--accent);
}

.help-step {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 13px;
 font-weight: 900;
 color: #fff;
 background: linear-gradient(145deg, #6c8cff, #4a6cf0);
 flex-shrink: 0;
 box-shadow: 0 4px 12px rgba(108, 140, 255, 0.35);
}

.help-section p {
 margin: 0 0 10px;
 color: var(--text-muted);
 font-size: 14px;
 line-height: 1.55;
}

.help-ol,
.help-ul {
 margin: 0 0 12px;
 padding-left: 1.2em;
 color: var(--text-muted);
 font-size: 14px;
 line-height: 1.55;
}

.help-ol li,
.help-ul li {
 margin-bottom: 6px;
}

.help-ol strong,
.help-ul strong,
.help-section strong {
 color: var(--text);
}

.help-contact {
 border-color: rgba(108, 140, 255, 0.35);
 background: linear-gradient(180deg, rgba(108, 140, 255, 0.1) 0%, rgba(16, 21, 34, 0.5) 100%);
}
.help-contact a {
 color: var(--accent);
 font-weight: 650;
}
.help-contact .help-ol {
 margin-bottom: 8px;
}

/* Easy helpers: disabled until spell is on the list */
.helper-btn.helper-disabled,
.helper-btn:disabled {
 opacity: 0.55;
 cursor: not-allowed;
}
.helper-btn.helper-disabled .helper-state,
.helper-btn:disabled .helper-state {
 color: var(--text-muted);
}

/* Easy helpers: live KeyPress preview */
.helper-keypress-preview {
 margin: 10px 0 0;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid rgba(61, 214, 140, 0.35);
 background: rgba(61, 214, 140, 0.08);
 color: var(--text);
 font-size: 12px;
 line-height: 1.45;
 white-space: pre-wrap;
 word-break: break-word;
}
.helper-keypress-preview.hidden {
 display: none !important;
}

/* -- Questions board (plain-text comments) -- */
.questions-page .ss-q-heading {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
}
.ss-q-count {
 font-size: 13px;
 font-weight: 650;
 color: var(--text-muted);
}
.ss-q-empty {
 margin: 0 0 8px;
}
.ss-q-banner-ok {
 border-color: rgba(61, 214, 140, 0.45) !important;
 background: rgba(61, 214, 140, 0.12) !important;
}
.ss-q-admin-bar {
 border-color: rgba(108, 140, 255, 0.45) !important;
 background: rgba(108, 140, 255, 0.12) !important;
}
.ss-q-admin-links {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 10px;
 align-items: center;
}
.ss-comment-list,
.ss-comment-list .children {
 list-style: none;
 margin: 0;
 padding: 0;
}
.ss-comment-list .children {
 margin: 10px 0 0 12px;
 padding-left: 12px;
 border-left: 2px solid rgba(108, 140, 255, 0.25);
}
.ss-comment {
 margin: 0 0 12px;
}
.ss-comment-body {
 padding: 12px 14px;
 border-radius: var(--radius);
 border: 1px solid var(--border);
 background: rgba(16, 21, 34, 0.85);
}
.ss-comment-meta {
 display: flex;
 flex-wrap: nowrap;
 gap: 10px;
 align-items: center;
 margin-bottom: 8px;
}
.ss-comment-avatar-wrap {
 flex: 0 0 auto;
 line-height: 0;
}
.ss-comment-avatar,
.ss-comment-avatar-wrap img.ss-comment-avatar,
.ss-comment-avatar-wrap img.avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 object-fit: cover;
 display: block;
 border: 1px solid rgba(232, 197, 71, 0.35);
 background: #0a0d14;
 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.ss-comment-meta-text {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
 flex: 1 1 auto;
}
.ss-comment-author {
 font-weight: 750;
 font-size: 14px;
 color: var(--text);
 line-height: 1.25;
}
.ss-comment-time {
 font-size: 12px;
 color: var(--text-muted);
 line-height: 1.25;
}
.ss-comment-awaiting {
 margin: 0 0 8px;
 font-size: 13px;
 color: #e8b84a;
}
.ss-comment-content {
 font-size: 14px;
 line-height: 1.55;
 color: var(--text);
 word-break: break-word;
 white-space: normal;
}
.ss-comment-content a {
 /* plain text only  -  no real anchors expected */
 color: inherit;
 pointer-events: none;
 text-decoration: none;
}
.ss-comment-actions {
 margin-top: 8px;
}
.ss-comment-actions .comment-reply-link {
 font-size: 13px;
 font-weight: 650;
 color: var(--accent);
 text-decoration: none;
}
.ss-comment-actions .comment-reply-link:hover {
 text-decoration: underline;
}
.ss-q-form-wrap {
 margin-top: 8px;
}
.ss-comment-form label {
 display: block;
 font-size: 13px;
 font-weight: 650;
 margin-bottom: 6px;
 color: var(--text-muted);
}
.ss-comment-form input[type="text"],
.ss-comment-form input[type="email"],
.ss-comment-form textarea {
 width: 100%;
 box-sizing: border-box;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid var(--border);
 background: var(--bg-card);
 color: var(--text);
 font: inherit;
 margin-bottom: 12px;
}
.ss-comment-form textarea {
 min-height: 120px;
 resize: vertical;
}
.ss-comment-note {
 font-size: 13px;
 line-height: 1.5;
 color: var(--text-muted);
 margin: 0 0 14px;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid rgba(108, 140, 255, 0.3);
 background: rgba(108, 140, 255, 0.08);
}
.ss-comment-submit {
 margin-top: 4px;
}
.ss-comment-form .required {
 color: #e88;
}
.ss-comment-form .comment-form-cookies-consent {
 font-size: 12px;
 color: var(--text-muted);
}
.ss-comment-form .comment-form-cookies-consent input {
 width: auto;
 margin-right: 8px;
}

.help-callout {
 margin: 12px 0 0;
 padding: 12px 14px;
 border-radius: var(--radius-sm);
 border: 1px solid rgba(61, 214, 140, 0.35);
 background: rgba(61, 214, 140, 0.1);
 color: var(--text);
 font-size: 13px;
 line-height: 1.5;
}

.help-callout.warn {
 border-color: rgba(240, 193, 74, 0.4);
 background: rgba(240, 193, 74, 0.1);
}

.help-grid {
 display: grid;
 gap: 10px;
 margin: 0 0 10px;
}

@media (min-width: 520px) {
 .help-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.help-card {
 padding: 12px;
 border-radius: var(--radius-sm);
 border: 1px solid var(--border);
 background: rgba(0, 0, 0, 0.2);
}

.help-card h3 {
 margin: 0 0 6px;
 font-size: 14px;
 font-weight: 800;
 color: var(--accent);
}

.help-card p {
 margin: 0;
 font-size: 13px;
}

.help-cta {
 margin: 8px 0 20px;
 text-align: center;
}

.help-cta .btn-done {
 display: inline-flex;
 width: auto;
 min-width: 200px;
 text-decoration: none;
}

/* Picker / form polish */
.picker-chip.active {
 box-shadow: 0 0 0 1px rgba(108, 140, 255, 0.45), 0 4px 14px rgba(108, 140, 255, 0.2);
}

.simple-steps li {
 background: linear-gradient(180deg, #1a2234, #141b2a);
 border-color: var(--border);
}

.btn-primary {
 background: linear-gradient(180deg, #7a98ff 0%, #5a7cf0 100%);
 box-shadow: 0 4px 16px rgba(108, 140, 255, 0.3);
}

.btn-done {
 background: linear-gradient(180deg, #4ee69a 0%, #2fc47a 100%);
 color: #062216;
 font-weight: 800;
}

/* -- First-run coach tour (v5) -- */
body.tour-active {
 overflow: hidden !important;
}

.tour-overlay {
 position: fixed;
 inset: 0;
 z-index: 9999;
 background: rgba(4, 6, 12, 0.72);
 pointer-events: auto;
 -webkit-tap-highlight-color: transparent;
}
.tour-overlay.hidden {
 display: none;
}
.tour-overlay.tour-dim-full {
 background: rgba(4, 6, 12, 0.8);
}
.tour-overlay:not(.tour-dim-full) {
 background: transparent;
}

/* Spotlight cutout */
.tour-hole {
 position: fixed;
 border-radius: 14px;
 box-shadow:
  0 0 0 9999px rgba(4, 6, 12, 0.74),
  0 0 0 2px rgba(61, 214, 140, 0.9),
  0 0 28px 4px rgba(61, 214, 140, 0.35);
 border: none;
 pointer-events: none;
 z-index: 10000;
 transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
 animation: tour-hole-pulse 2.2s ease-in-out infinite;
}
@keyframes tour-hole-pulse {
 0%, 100% {
  box-shadow:
   0 0 0 9999px rgba(4, 6, 12, 0.74),
   0 0 0 2px rgba(61, 214, 140, 0.9),
   0 0 22px 2px rgba(61, 214, 140, 0.28);
 }
 50% {
  box-shadow:
   0 0 0 9999px rgba(4, 6, 12, 0.74),
   0 0 0 3px rgba(108, 140, 255, 0.95),
   0 0 36px 6px rgba(61, 214, 140, 0.42);
 }
}

/* Card */
.tour-card {
 position: fixed;
 z-index: 10001;
 max-width: 400px;
 width: min(400px, calc(100vw - 24px));
 max-height: min(72vh, 520px);
 overflow-y: auto;
 overflow-x: hidden;
 padding: 16px 16px 12px;
 border-radius: 18px;
 background:
  linear-gradient(165deg, rgba(32, 42, 68, 0.98) 0%, rgba(16, 22, 36, 0.99) 55%, rgba(12, 16, 28, 1) 100%);
 border: 1px solid rgba(108, 140, 255, 0.4);
 box-shadow:
  0 20px 56px rgba(0, 0, 0, 0.55),
  0 0 0 1px rgba(255, 255, 255, 0.04) inset,
  0 1px 0 rgba(255, 255, 255, 0.06) inset;
 color: var(--text, #eef2fa);
 font-family: inherit;
 -webkit-overflow-scrolling: touch;
 outline: none;
}
.tour-card-shine {
 pointer-events: none;
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(
  125deg,
  rgba(108, 140, 255, 0.12) 0%,
  transparent 42%,
  transparent 100%
 );
 z-index: 0;
}
.tour-card > *:not(.tour-card-shine) {
 position: relative;
 z-index: 1;
}

/* Opacity-only enter  -  card may use transform for centering */
.tour-card-enter {
 animation: tour-card-in 0.26s ease-out both;
}
@keyframes tour-card-in {
 from {
  opacity: 0;
  filter: brightness(0.9);
 }
 to {
  opacity: 1;
  filter: none;
 }
}

.tour-card-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin-bottom: 8px;
}
.tour-card-top-left {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
}
.tour-icon {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 border-radius: 9px;
 font-size: 13px;
 font-weight: 900;
 letter-spacing: 0;
 color: #062216;
 background: linear-gradient(180deg, #5ef0a8 0%, #2fc47a 100%);
 box-shadow: 0 2px 10px rgba(61, 214, 140, 0.35);
}
.tour-icon.tour-icon-done {
 background: linear-gradient(180deg, #8aa8ff 0%, #6c8cff 100%);
 color: #0a1020;
 box-shadow: 0 2px 10px rgba(108, 140, 255, 0.4);
}
.tour-progress {
 margin: 0;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--green, #3dd68c);
 white-space: nowrap;
}
.tour-badge {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 padding: 4px 9px;
 border-radius: 999px;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: #dfe8ff;
 background: rgba(108, 140, 255, 0.18);
 border: 1px solid rgba(108, 140, 255, 0.4);
}
.tour-badge.hidden {
 display: none;
}
.tour-step-done .tour-badge {
 color: #062216;
 background: linear-gradient(180deg, #5ef0a8 0%, #2fc47a 100%);
 border-color: transparent;
}

/* Thin progress bar */
.tour-progress-track {
 height: 3px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.08);
 margin: 0 0 10px;
 overflow: hidden;
}
.tour-progress-fill {
 height: 100%;
 width: 12.5%;
 border-radius: inherit;
 background: linear-gradient(90deg, #3dd68c, #6c8cff);
 transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
 box-shadow: 0 0 10px rgba(61, 214, 140, 0.45);
}

/* Step dots (clickable) */
.tour-dots {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 margin: 0 0 12px;
 flex-wrap: wrap;
}
.tour-dot {
 appearance: none;
 -webkit-appearance: none;
 border: none;
 padding: 0;
 margin: 0;
 width: 8px;
 height: 8px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.16);
 cursor: pointer;
 transition: width 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.tour-dot.done {
 background: rgba(61, 214, 140, 0.55);
}
.tour-dot.active {
 width: 22px;
 background: linear-gradient(90deg, #3dd68c, #6c8cff);
 box-shadow: 0 0 10px rgba(108, 140, 255, 0.45);
}
.tour-dot:focus-visible {
 outline: 2px solid var(--accent, #6c8cff);
 outline-offset: 2px;
}

.tour-title {
 margin: 0 0 8px;
 font-size: 18px;
 font-weight: 800;
 line-height: 1.28;
 letter-spacing: -0.01em;
}
.tour-body {
 margin: 0 0 10px;
 font-size: 14px;
 line-height: 1.55;
 color: var(--text-muted, #8b96ad);
}

.tour-bullets {
 margin: 0 0 12px;
 padding: 0 0 0 0;
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.tour-bullets.hidden {
 display: none;
}
.tour-bullets li {
 position: relative;
 padding: 7px 10px 7px 28px;
 border-radius: 10px;
 font-size: 13px;
 line-height: 1.4;
 color: var(--text, #eef2fa);
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid rgba(255, 255, 255, 0.05);
}
.tour-bullets li::before {
 content: "";
 position: absolute;
 left: 10px;
 top: 50%;
 transform: translateY(-50%);
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: linear-gradient(180deg, #5ef0a8, #2fc47a);
 box-shadow: 0 0 8px rgba(61, 214, 140, 0.5);
}

.tour-note {
 margin: 0 0 12px;
 padding: 8px 10px;
 border-radius: 10px;
 font-size: 12px;
 line-height: 1.45;
 color: #f5d98a;
 background: rgba(240, 180, 41, 0.1);
 border: 1px solid rgba(240, 180, 41, 0.28);
}
.tour-note.hidden {
 display: none;
}

.tour-actions {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-top: 2px;
}
.tour-actions-right {
 display: flex;
 gap: 8px;
}
.tour-actions .btn {
 min-height: 36px;
}
.tour-actions #tour-next {
 min-width: 96px;
 font-weight: 800;
}

.tour-kbd-hint {
 display: none;
 margin: 10px 0 0;
 text-align: center;
 font-size: 10px;
 letter-spacing: 0.04em;
 color: rgba(139, 150, 173, 0.65);
}
@media (hover: hover) and (pointer: fine) {
 .tour-kbd-hint {
  display: block;
 }
}

.tour-highlight {
 position: relative;
 z-index: 10002 !important;
 box-shadow:
  0 0 0 3px rgba(61, 214, 140, 0.65),
  0 0 28px rgba(61, 214, 140, 0.3) !important;
 border-radius: 12px;
}
/* Sticky export must sit above the tour dim cutout when spotlighted */
.sticky-cta.tour-highlight,
.sticky-cta .tour-highlight,
#btn-gse3.tour-highlight {
 z-index: 10003 !important;
}

.tour-step-done .tour-title {
 background: linear-gradient(90deg, #eef2fa, #5ef0a8);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}

/* -- Global fluidity polish (2.0.88) -- */
.chip-grid .chip,
.branch-opt,
.pill {
 transition:
  background var(--dur-med) ease,
  border-color var(--dur-med) ease,
  color var(--dur-med) ease,
  transform var(--dur-fast) var(--ease-out),
  box-shadow var(--dur-med) ease;
}

.chip:active,
.branch-opt:active {
 transform: scale(0.97);
}

.btn-primary {
 box-shadow: 0 2px 12px rgba(108, 140, 255, 0.22);
}

.btn-primary:hover {
 box-shadow: 0 4px 16px rgba(108, 140, 255, 0.32);
}

.btn-secondary:hover {
 border-color: rgba(108, 140, 255, 0.4);
 background: var(--bg-card-hover);
}

.btn-ghost:hover {
 background: var(--accent-soft);
}

.brand-mark {
 transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) ease;
}

.brand:hover .brand-mark {
 transform: scale(1.03);
}

.hero-card {
 transition: box-shadow var(--dur-slow) ease, border-color var(--dur-med) ease;
}

.empty-card {
 animation: fadeIn var(--dur-slow) var(--ease-out);
}

.copy-toast,
#copy-toast {
 animation: toastIn var(--dur-med) var(--ease-spring);
}

@keyframes toastIn {
 from { opacity: 0; transform: translateY(8px) scale(0.96); }
 to { opacity: 1; transform: none; }
}

/* Softer scrollbar (editor steps / sheets) */
.steps-list,
.sheet-panel {
 scrollbar-width: thin;
 scrollbar-color: rgba(108, 140, 255, 0.35) transparent;
}

/* Reduce layout jump on list load */
.card-list {
 min-height: 48px;
}

/* Questions avatars already round  -  smooth image load */
.ss-comment-avatar,
.ss-comment-avatar-wrap img {
 transition: opacity var(--dur-med) ease, transform var(--dur-med) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
 html {
  scroll-behavior: auto;
 }
 .view.active,
 .sheet-panel,
 .sheet-backdrop,
 .empty-card,
 .copy-toast,
 #copy-toast {
  animation: none !important;
 }
 .tour-hole {
  animation: none;
  transition: none;
 }
 .tour-card-enter {
  animation: none;
 }
 .tour-progress-fill {
  transition: none;
 }
 .tour-dot {
  transition: none;
 }
 .btn,
 .seq-card,
 .step-card,
 .chip-grid .chip,
 .branch-opt,
 .sticky-cta .btn-done,
 .brand-mark {
  transition: none !important;
 }
}