/* RocketVPS — dark theme overrides for index-dark.html.
   Loaded AFTER css/site.css: same class names, redefined with the dark
   token set from brand-guidelines-dark.html. Tailwind's layout/spacing
   utilities (flex, gap, rounded, text-size, etc.) are theme-agnostic and
   come from site.css untouched — only color-bearing rules are overridden
   here, so index-dark.html needs zero structural markup changes. */

:root {
  --canvas: #0b0b10;
  --canvas-edge: #000000;
  --surface: #15151c;
  --surface-raised: #1d1e27;
  --surface-raised-2: #262835;
  --border: #2a2b36;
  --ink: #f4f2ec;
  --ink-dim: #9c9aa8;
  --ink-faint: #66646f;
  --cobalt-deep: #3654d1;
  --cobalt: #5b7cf0;
  --cobalt-bright: #93a8ff;
  --success: #2bab8b;
  --warning: #e19909;
  --error: #f43444;
  --info: #9161ef;
}

body {
  background: var(--canvas) !important;
  color: var(--ink) !important;
}

/* ---- site nav: transparent at top, panel bg once scrolled ---- */
.site-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  background-color: rgba(21, 21, 28, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* ---- raw utility classes used directly in the markup ---- */
.bg-void { background-color: var(--canvas) !important; }
.bg-panel { background-color: var(--surface) !important; }
.bg-panel\/70 { background-color: rgba(21, 21, 28, 0.7) !important; }
.\!bg-panel { background-color: var(--surface) !important; }
.bg-\[\#ECE3CD\] { background-color: var(--surface) !important; }
.border-line { border-color: var(--border) !important; }
.text-cobalt { color: var(--cobalt-bright) !important; }
.text-ink { color: var(--ink) !important; }
.text-ink-dim { color: var(--ink-dim) !important; }
.text-error { color: var(--error) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.border-l-success { border-left-color: var(--success) !important; }
.border-l-error { border-left-color: var(--error) !important; }

/* ---- aliases for shared (cross-theme) extension content, e.g. legal pages ----
   That copy is written once against a different theme's token names; these
   map it onto this theme's own dark values instead of hand-editing the
   shared content per theme. */
.text-ink-muted { color: var(--ink-dim) !important; }
.bg-paper-deep { background-color: var(--canvas) !important; }
.bg-paper-card { background-color: var(--surface-raised) !important; }
.border-hairline { border-color: var(--border) !important; }
.border-cobalt { border-color: var(--cobalt) !important; }

/* ---- component classes ---- */
.eyebrow { color: var(--cobalt-bright); }

.btn-primary { background-color: var(--cobalt-deep); color: #fff; }
.btn-primary:hover { background-color: #34449c; }
.btn-secondary { border-color: var(--border); color: var(--ink); background-color: transparent; }
.btn-secondary:hover { border-color: var(--ink-faint); }
.btn-danger { background-color: var(--error); color: #fff; }
.btn-danger:hover { background-color: #d81f34; }
.btn-outline-danger { color: var(--error); border-color: rgba(244, 52, 68, 0.4); }
.btn-outline-danger:hover { background-color: rgba(244, 52, 68, 0.1); }

.feature-check { color: var(--ink-dim); }
.feature-check::before { color: var(--success); }

.feature-check-icon { color: var(--ink-dim); }
.feature-check-icon::before { background-color: var(--success); }

.nav-link:hover { color: var(--ink); }
.nav-link--active { color: var(--cobalt-bright); }

.billing-tab { color: var(--ink-dim); }
.billing-tab.active {
  background-color: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--cobalt) inset;
}
.billing-badge { background-color: rgba(91, 124, 240, 0.16); color: var(--cobalt-bright); }

.plan-card,
.plan-free,
.why-card {
  background-color: var(--surface-raised);
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.65);
}
.plan-free { --plan-accent: 156, 154, 168; }
.plan-card--scout,
.plan-card--pioneer,
.plan-card--voyager,
.plan-card--odyssey {
  --plan-accent: 91, 124, 240;
  border-color: rgba(var(--plan-accent), 0.35);
}

.plan-code { border-color: var(--border); color: var(--ink-dim); }
.plan-badge { background-color: var(--surface-raised-2); color: var(--ink); }
.plan-badge--accent { background-color: var(--success); color: #0d2417; }
.plan-spec-tag { border-color: var(--border); color: var(--ink); }

.why-icon { background-color: var(--surface-raised-2); color: var(--cobalt-bright); }

.category-card {
  background-color: var(--surface-raised);
  background-image: radial-gradient(circle at top left, rgba(var(--plan-accent), 0.18), transparent 60%);
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.65);
}
.category-card--featured {
  background-image: radial-gradient(circle at top left, rgba(var(--plan-accent), 0.26), transparent 65%);
}
.category-card--vps { --plan-accent: 91, 124, 240; }   /* cobalt-bright — RocketVPS' own product */
.category-card--wordpress { --plan-accent: 33, 117, 155; } /* WordPress blue */
.category-card--n8n { --plan-accent: 234, 75, 113; }        /* n8n pink */
.category-card--zulip { --plan-accent: 120, 119, 252; }     /* Zulip indigo */
.category-link { color: var(--cobalt-bright); }

.faq-shell { background-color: var(--surface-raised); border-color: var(--border); }
.faq-row { border-color: var(--border); }
.faq-question { color: var(--cobalt-bright); }
.faq-chevron { color: var(--ink-dim); }
.faq-answer { color: var(--ink-dim); }

/* ---- auth pages (login/register) ---- */
.auth-card { background-color: var(--surface); border-color: var(--border); }
.back-link { color: var(--ink-dim); }
.back-link:hover { color: var(--ink); }
.form-label { color: var(--ink); }
.form-input,
.form-select {
  background-color: var(--surface-raised);
  border-color: var(--border);
  color: var(--ink);
}
.form-input:focus,
.form-select:focus { border-color: var(--cobalt); }
.form-input::placeholder,
.form-select::placeholder,
.form-input::-moz-placeholder,
.form-select::-moz-placeholder { color: rgba(156, 154, 168, 0.6); }
.form-checkbox { background-color: var(--surface-raised); border-color: var(--border); }
.accent-cobalt { accent-color: var(--cobalt-deep); }
.form-password-toggle { color: var(--ink-dim); }
.form-section-label { color: var(--ink-dim); }
.form-editor { background-color: var(--surface-raised); border-color: var(--border); }
.form-editor:focus-within { border-color: var(--cobalt); }
.form-editor-toolbar { border-color: var(--border); }
.form-editor-btn { color: var(--ink-dim); }
.form-editor-btn:hover { background-color: var(--surface-raised); color: var(--cobalt-bright); }
.form-editor textarea { color: var(--ink); }
.form-editor textarea::placeholder { color: rgba(156, 154, 168, 0.6); }
.form-dropzone { border-color: var(--border); color: var(--ink-dim); }
.form-dropzone:hover { border-color: var(--cobalt); }
.form-dropzone-label { color: var(--cobalt-bright); }
.form-dropzone-hint { color: var(--ink-dim); }
.form-password-toggle:hover { color: var(--ink); }

/* ---- backgrounds ---- */
.brand-cover-bg { background: var(--canvas); }
.hero-meteor-bg {
  background-color: var(--canvas);
  background-image:
    radial-gradient(circle 600px at 0 200px, rgba(91, 124, 240, 0.35), transparent),
    radial-gradient(circle 600px at 100% 200px, rgba(91, 124, 240, 0.35), transparent);
}
.hero-beam-bg {
  position: relative;
  isolation: isolate;
  background-color: var(--canvas);
  background-image: radial-gradient(ellipse 80% 65% at 30% 45%, var(--canvas) 0%, var(--canvas-edge) 100%);
  background-repeat: no-repeat;
}
.hero-beam-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: hsl(228 45% 10%);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");
  background-blend-mode: overlay;
  opacity: 0.14;
  mix-blend-mode: screen;
}
.cta-band { background-color: var(--cobalt-deep); }
.footer-band { background-color: var(--canvas); }

.hero-showcase-img { border-color: var(--border); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65); }
.hero-showcase-fade { background: linear-gradient(to bottom, transparent, var(--canvas)); }

/* ---- managed-services hero: decorative app-logo stickers ----
   Hand-written since marketing pages don't load the Tailwind JIT build (see
   the blade comment above .hero-stickers) -- arbitrary-value utilities like
   top-[18%] or lg:block would silently compile to nothing here, same as the
   pt-[108px]/w-84 notes elsewhere in this file. Own absolute layer (z-index 0)
   sandwiched between the section's background and the centered copy (z-10),
   so it never affects hero layout; hidden below 1024px where there's no room
   for the stickers to float clear of the centered text. */
.hero-stickers {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) {
  .hero-stickers { display: block; }
}
.hero-sticker {
  position: absolute;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55));
}
.hero-sticker svg { display: block; width: 52px; height: 52px; }
.hero-sticker--wordpress { top: 24%; left: 34%; transform: rotate(-10deg); }
.hero-sticker--n8n { top: 20%; right: 36%; transform: rotate(8deg); }
.hero-sticker--zulip { bottom: 22%; left: 39%; transform: rotate(6deg); }
@media (min-width: 1280px) {
  .hero-sticker--wordpress { left: 39%; }
  .hero-sticker--n8n { right: 41%; }
  .hero-sticker--zulip { left: 44%; }
}

/* ---- pricing comparison chart ---- */
.pcomp-shell { background-color: var(--surface-raised); border-color: var(--border); }
.pcomp-eyebrow { color: var(--cobalt-bright) !important; }
.pcomp-value { color: var(--ink) !important; }
.pcomp-unit { color: var(--ink-dim) !important; }
.pcomp-tabs { background-color: var(--canvas); border-color: var(--border); }
.pcomp-tab { color: var(--ink-dim) !important; }
.pcomp-tab.active {
  background-color: var(--surface-raised-2) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 2px var(--cobalt) inset !important;
}
.pcomp-tab:not(.active):hover { color: var(--ink) !important; }

.pcomp-grid line { stroke: var(--border); }
.pcomp-bar-shadow { fill: rgba(255, 255, 255, 0.05); }
.pcomp-bar .face { stroke: rgba(255, 255, 255, 0.08); }

.pcomp-bar.us .face.front { fill: var(--cobalt-deep); }
.pcomp-bar.us .face.side { fill: #1b2568; }
.pcomp-bar.us .face.top { fill: var(--cobalt); stroke: rgba(255, 255, 255, 0.2); }

.pcomp-bar.other .face.front { fill: #2c2e3b; }
.pcomp-bar.other .face.side { fill: #1f2029; }
.pcomp-bar.other .face.top { fill: #3a3d52; stroke: rgba(255, 255, 255, 0.15); }

.pcomp-note { color: var(--ink-faint) !important; }
.pcomp-note a { color: var(--ink-dim) !important; }

.pcomp-axis-tick { color: var(--ink-faint); }
.pcomp-provider-name { color: #c8c6ca; }
.pcomp-provider-name.us { color: var(--ink); }
.pcomp-provider-spec { color: var(--ink-faint); }
.pcomp-value-label { color: var(--ink); }
.pcomp-lowest-badge { background: var(--success); color: #0d2417; }

/* ---- client-area dashboard sidebar ---- */
.dash-sidebar { background-color: var(--surface); border-color: var(--border); }
.dash-sidebar-logo { border-color: var(--border); }
.dash-nav-link { color: var(--ink-dim); }
.dash-nav-link:hover { color: var(--ink); background-color: var(--canvas); }
.dash-nav-link--active,
.dash-nav-link--active:hover { color: var(--cobalt-bright); background-color: rgba(91, 124, 240, 0.12); }
.dash-nav-link--active::before { background-color: var(--cobalt); }
.dash-nav-badge { background-color: var(--cobalt); }
.dash-nav-section-label { color: var(--ink-faint); }
.dash-nav-external { color: var(--ink-faint); }
.dash-sidebar-footer { border-color: var(--border); }
.dash-user-avatar { background-color: rgba(91, 124, 240, 0.18); color: var(--cobalt-bright); }
.dash-mobile-toggle { background-color: var(--surface); border-color: var(--border); color: var(--ink); }
.dash-content-bg {
  position: relative;
  isolation: isolate;
  background-color: var(--canvas);
  background-image: radial-gradient(ellipse 80% 65% at 30% 45%, var(--canvas) 0%, var(--canvas-edge) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.dash-content-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: hsl(228 45% 10%);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");
  background-blend-mode: overlay;
  opacity: 0.14;
  mix-blend-mode: screen;
}

/* ---- client-area dashboard content: stat bar, panels, services table ---- */
.dash-stat-bar,
.dash-panel,
.dash-settings-row {
  background-color: var(--surface);
  border-color: var(--border);
}
.dash-stat-bar > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }
.dash-stat-icon { background-color: rgba(91, 124, 240, 0.14); color: var(--cobalt-bright); }
.dash-stat-value { color: var(--ink); }
.dash-stat-label { color: var(--ink-dim); }

.dash-panel-header { border-color: var(--border); }
.dash-panel-title { color: var(--ink); }
.dash-panel-title svg { color: var(--ink-dim); }
.dash-panel-link { color: var(--cobalt-bright); }
.dash-panel-empty { color: var(--ink-dim); }

.dash-banner--danger {
  background-color: rgba(244, 52, 68, 0.1);
  border-color: rgba(244, 52, 68, 0.35);
}
.dash-banner-icon--danger { background-color: rgba(244, 52, 68, 0.16); color: var(--error); }

.dash-table th { color: var(--ink-dim); border-color: var(--border); }
.dash-table td { border-color: var(--border); }
.dash-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.045); }
.dash-table-wrap--inset { background-color: var(--surface-raised); }
.dash-table-name { color: var(--ink); }
.dash-table-meta { color: var(--ink-dim); }
.dash-table-chevron { color: var(--ink-faint); }
.dash-table-ticket-id { color: var(--ink-faint); }
.dash-service-server-row { background-color: var(--surface-raised); border-color: var(--border); }
.dash-service-server-row:hover { background-color: rgba(255, 255, 255, 0.045); }

.dash-status--active,
.dash-status--open { color: var(--success); }
.dash-status--inactive,
.dash-status--closed { color: var(--ink-dim); }
.dash-status--answered { color: var(--cobalt-bright); }
.dash-status--pending { color: var(--warning); }
.dash-status--failed { color: var(--error); }

/* Pill-style status badge for services/invoices lists (the dot+text .dash-status
   style reads as a live "running" indicator, so it's reserved for the Proxmox
   server list; everything else uses this solid-tint badge instead). Same shape
   as .dash-priority-badge in the guideline source, just a different class name
   since it carries its own status color set. */
.dash-status-badge {
  display: inline-flex;
  align-items: center;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 9999px;
}
.dash-status-badge--active,
.dash-status-badge--open { background-color: rgba(43, 171, 139, 0.16); color: var(--success); }
.dash-status-badge--inactive,
.dash-status-badge--closed { background-color: rgba(156, 154, 168, 0.12); color: var(--ink-dim); }
.dash-status-badge--answered { background-color: rgba(91, 124, 240, 0.16); color: var(--cobalt-bright); }
.dash-status-badge--pending { background-color: rgba(225, 153, 9, 0.16); color: var(--warning); }
.dash-status-badge--failed { background-color: rgba(244, 52, 68, 0.16); color: var(--error); }

.dash-header-link { color: var(--cobalt-bright); }

/* Dart (free-tier) plan card footnote: text-ink-dim at text-xs reads too
   low-contrast on the .plan-free dark surface. A touch brighter than
   --ink-dim, still well short of full --ink so it stays secondary copy. */
.dart-card-note { color: #b9b7c4; }

.dash-chat-sender { color: var(--ink-dim); }
.dash-chat-bubble--out { background-color: var(--cobalt-deep); }
.dash-chat-bubble--in { background-color: var(--surface); border-color: var(--border); color: var(--ink); }
.dash-chat-time { color: var(--ink-dim); }
.dash-chat-composer { border-color: var(--border); }
.dash-chat-composer .form-editor { background-color: var(--surface); }
.dash-chat-bubble--in .dash-chat-markdown code,
.dash-chat-bubble--in .dash-chat-markdown pre { background-color: var(--canvas); }
.dash-chat-bubble--out .dash-chat-markdown code,
.dash-chat-bubble--out .dash-chat-markdown pre { background-color: rgba(255, 255, 255, 0.15); }

/* ---- real EasyMDE editor dropped inside .form-editor (tickets create/reply) ----
   .form-editor already provides the outer border/bg; these targets restyle the real
   widget's own internal chrome (toolbar, CodeMirror surface, cursor) to match instead
   of the light-theme default it ships with. */
.form-editor .EasyMDEContainer .editor-statusbar { display: none; }
.form-editor .EasyMDEContainer .editor-toolbar { background: transparent; border-color: var(--border); }
.form-editor .EasyMDEContainer .editor-toolbar button { color: var(--ink-dim); }
.form-editor .EasyMDEContainer .editor-toolbar button:hover,
.form-editor .EasyMDEContainer .editor-toolbar button.active { background-color: var(--surface-raised); color: var(--cobalt-bright); }
.form-editor .EasyMDEContainer .editor-toolbar i.separator { border-style: none; margin: 0 !important; width: .25rem; }

/* Toolbar buttons ship with autoDownloadFontAwesome:false (see easymde-editor.blade.php),
   so the stock <i class="fa ..."> glyphs never render -- paint the icon as a masked
   ::before instead, same SVGs as css/easymde.css (app.css's copy), recolored with this
   theme's own custom properties since app.css/its hsl(--color-*) tokens aren't loaded
   on dashboard pages (see layouts/app.blade.php's isDashboard branch). */
.form-editor .EasyMDEContainer .editor-toolbar button::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--ink-dim);
}
.form-editor .EasyMDEContainer .editor-toolbar button:hover::before,
.form-editor .EasyMDEContainer .editor-toolbar button.active::before { background-color: var(--cobalt-bright); }
.form-editor .EasyMDEContainer .editor-toolbar .bold::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M321.1 242.4c19-22.3 30.9-50.8 30.9-82.4 0-70.59-57.42-128-128-128l-192 .01c-17.67 0-32 14.31-32 32s14.33 32 32 32h16v320H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h224c70.58 0 128-57.41 128-128 0-46.71-25.4-87.21-62.9-109.61zM112 96.01h112c35.3 0 64 28.72 64 64s-28.7 64-64 64H112v-128zM256 416H112V288h144c35.3 0 64 28.71 64 63.1S291.3 416 256 416z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M321.1 242.4c19-22.3 30.9-50.8 30.9-82.4 0-70.59-57.42-128-128-128l-192 .01c-17.67 0-32 14.31-32 32s14.33 32 32 32h16v320H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h224c70.58 0 128-57.41 128-128 0-46.71-25.4-87.21-62.9-109.61zM112 96.01h112c35.3 0 64 28.72 64 64s-28.7 64-64 64H112v-128zM256 416H112V288h144c35.3 0 64 28.71 64 63.1S291.3 416 256 416z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .italic::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M384 64.01c0 17.69-14.31 32-32 32h-58.67l-133.3 320H224c17.69 0 32 14.31 32 32s-14.31 32-32 32H32c-17.69 0-32-14.31-32-32s14.31-32 32-32h58.67l133.3-320H160c-17.69 0-32-14.31-32-32s14.31-32 32-32h192c17.7 0 32 14.32 32 32z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M384 64.01c0 17.69-14.31 32-32 32h-58.67l-133.3 320H224c17.69 0 32 14.31 32 32s-14.31 32-32 32H32c-17.69 0-32-14.31-32-32s14.31-32 32-32h58.67l133.3-320H160c-17.69 0-32-14.31-32-32s14.31-32 32-32h192c17.7 0 32 14.32 32 32z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .strikethrough::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21-3.031 17.59-10.88 29.34-24.72 36.99-35.44 19.75-108.5 11.96-186-19.68-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37 29.62 0 58.81-5.156 83.72-18.96 30.81-17.09 50.44-45.46 56.72-82.11 3.998-23.27 2.168-42.58-3.488-59.05H332.2zm155.8-80-176.5-.03c-15.85-5.614-31.83-10.34-46.7-14.62-85.47-24.62-110.9-39.05-103.7-81.33 2.5-14.53 10.16-25.96 22.72-34.03 20.47-13.15 64.06-23.84 155.4.343 17.09 4.53 34.59-5.654 39.13-22.74 4.531-17.09-5.656-34.59-22.75-39.12-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1c-8.83 51.4 9.81 84.2 39.11 106.8H24c-13.25 0-24 10.75-24 23.1 0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1 0-12.3-10.7-23.1-24-23.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21-3.031 17.59-10.88 29.34-24.72 36.99-35.44 19.75-108.5 11.96-186-19.68-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37 29.62 0 58.81-5.156 83.72-18.96 30.81-17.09 50.44-45.46 56.72-82.11 3.998-23.27 2.168-42.58-3.488-59.05H332.2zm155.8-80-176.5-.03c-15.85-5.614-31.83-10.34-46.7-14.62-85.47-24.62-110.9-39.05-103.7-81.33 2.5-14.53 10.16-25.96 22.72-34.03 20.47-13.15 64.06-23.84 155.4.343 17.09 4.53 34.59-5.654 39.13-22.74 4.531-17.09-5.656-34.59-22.75-39.12-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1c-8.83 51.4 9.81 84.2 39.11 106.8H24c-13.25 0-24 10.75-24 23.1 0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1 0-12.3-10.7-23.1-24-23.1z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .link::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M598.6 41.41C570.1 13.8 534.8 0 498.6 0s-72.36 13.8-99.96 41.41l-43.36 43.36c15.11 8.012 29.47 17.58 41.91 30.02 3.146 3.146 5.898 6.518 8.742 9.838l37.96-37.96C458.5 72.05 477.1 64 498.6 64c20.67 0 40.1 8.047 54.71 22.66 14.61 14.61 22.66 34.04 22.66 54.71s-8.049 40.1-22.66 54.71l-133.3 133.3C405.5 343.1 386 352 365.4 352s-40.1-8.048-54.71-22.66C296 314.7 287.1 295.3 287.1 274.6s8.047-40.1 22.66-54.71l4.44-3.49c-2.1-3.9-4.3-7.9-7.5-11.1-8.6-8.6-19.9-13.3-32.1-13.3-11.93 0-23.1 4.664-31.61 12.97-30.71 53.96-23.63 123.6 22.39 169.6C293 402.2 329.2 416 365.4 416c36.18 0 72.36-13.8 99.96-41.41L598.6 241.3c28.45-28.45 42.24-66.01 41.37-103.3-.87-35.9-14.57-69.84-41.37-96.59zM234 387.4l-37.9 37.9C181.5 439.1 162 448 141.4 448c-20.67 0-40.1-8.047-54.71-22.66-14.61-14.61-22.66-34.04-22.66-54.71s8.049-40.1 22.66-54.71l133.3-133.3C234.5 168 253.1 160 274.6 160s40.1 8.048 54.71 22.66c14.62 14.61 22.66 34.04 22.66 54.71s-8.047 40.1-22.66 54.71l-3.51 3.52c2.094 3.939 4.219 7.895 7.465 11.15C341.9 315.3 353.3 320 365.4 320c11.93 0 23.1-4.664 31.61-12.97 30.71-53.96 23.63-123.6-22.39-169.6C346.1 109.8 310.8 96 274.6 96c-36.2 0-72.3 13.8-99.9 41.4L41.41 270.7C13.81 298.3 0 334.48 0 370.66c0 36.18 13.8 72.36 41.41 99.97C69.01 498.2 105.2 512 141.4 512c36.18 0 72.36-13.8 99.96-41.41l43.36-43.36c-15.11-8.012-29.47-17.58-41.91-30.02-3.21-3.11-5.91-6.51-8.81-9.81z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M598.6 41.41C570.1 13.8 534.8 0 498.6 0s-72.36 13.8-99.96 41.41l-43.36 43.36c15.11 8.012 29.47 17.58 41.91 30.02 3.146 3.146 5.898 6.518 8.742 9.838l37.96-37.96C458.5 72.05 477.1 64 498.6 64c20.67 0 40.1 8.047 54.71 22.66 14.61 14.61 22.66 34.04 22.66 54.71s-8.049 40.1-22.66 54.71l-133.3 133.3C405.5 343.1 386 352 365.4 352s-40.1-8.048-54.71-22.66C296 314.7 287.1 295.3 287.1 274.6s8.047-40.1 22.66-54.71l4.44-3.49c-2.1-3.9-4.3-7.9-7.5-11.1-8.6-8.6-19.9-13.3-32.1-13.3-11.93 0-23.1 4.664-31.61 12.97-30.71 53.96-23.63 123.6 22.39 169.6C293 402.2 329.2 416 365.4 416c36.18 0 72.36-13.8 99.96-41.41L598.6 241.3c28.45-28.45 42.24-66.01 41.37-103.3-.87-35.9-14.57-69.84-41.37-96.59zM234 387.4l-37.9 37.9C181.5 439.1 162 448 141.4 448c-20.67 0-40.1-8.047-54.71-22.66-14.61-14.61-22.66-34.04-22.66-54.71s8.049-40.1 22.66-54.71l133.3-133.3C234.5 168 253.1 160 274.6 160s40.1 8.048 54.71 22.66c14.62 14.61 22.66 34.04 22.66 54.71s-8.047 40.1-22.66 54.71l-3.51 3.52c2.094 3.939 4.219 7.895 7.465 11.15C341.9 315.3 353.3 320 365.4 320c11.93 0 23.1-4.664 31.61-12.97 30.71-53.96 23.63-123.6-22.39-169.6C346.1 109.8 310.8 96 274.6 96c-36.2 0-72.3 13.8-99.9 41.4L41.41 270.7C13.81 298.3 0 334.48 0 370.66c0 36.18 13.8 72.36 41.41 99.97C69.01 498.2 105.2 512 141.4 512c36.18 0 72.36-13.8 99.96-41.41l43.36-43.36c-15.11-8.012-29.47-17.58-41.91-30.02-3.21-3.11-5.91-6.51-8.81-9.81z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .heading::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-16v112h224V96h-16c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-16v320h16c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V272H112v144h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V96H32C14.3 96 0 81.7 0 64z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-16v112h224V96h-16c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-16v320h16c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V272H112v144h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V96H32C14.3 96 0 81.7 0 64z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .quote::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M96 224c-11.28 0-21.95 2.3-32 5.9V224c0-35.3 28.7-64 64-64 17.67 0 32-14.33 32-32s-14.3-32-32-32C57.42 96 0 153.4 0 224v96c0 53.02 42.98 96 96 96s96-42.98 96-96-43-96-96-96zm256 0c-11.28 0-21.95 2.305-32 5.879V224c0-35.3 28.7-64 64-64 17.67 0 32-14.33 32-32s-14.33-32-32-32c-70.58 0-128 57.42-128 128v96c0 53.02 42.98 96 96 96s96-42.98 96-96-43-96-96-96z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M96 224c-11.28 0-21.95 2.3-32 5.9V224c0-35.3 28.7-64 64-64 17.67 0 32-14.33 32-32s-14.3-32-32-32C57.42 96 0 153.4 0 224v96c0 53.02 42.98 96 96 96s96-42.98 96-96-43-96-96-96zm256 0c-11.28 0-21.95 2.305-32 5.879V224c0-35.3 28.7-64 64-64 17.67 0 32-14.33 32-32s-14.33-32-32-32c-70.58 0-128 57.42-128 128v96c0 53.02 42.98 96 96 96s96-42.98 96-96-43-96-96-96z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .code::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M416 31.94C416 21.75 408.1 0 384.1 0c-13.98 0-26.87 9.072-30.89 23.18l-128 448a31.933 31.933 0 0 0-1.241 8.801C223.1 490.3 232 512 256 512c13.92 0 26.73-9.157 30.75-23.22l128-448c.85-2.97 1.25-5.93 1.25-8.84zM176 143.1c0-18.28-14.95-32-32-32-8.188 0-16.38 3.125-22.62 9.376l-112 112C3.125 239.6 0 247.8 0 255.1s3.125 17.3 9.375 23.5l112 112c6.225 6.3 14.425 8.5 22.625 8.5 17.05 0 32-13.73 32-32 0-8.188-3.125-16.38-9.375-22.63L77.25 255.1l89.38-89.38c6.27-5.42 9.37-13.52 9.37-22.62zm464 112c0-8.188-3.125-16.38-9.375-22.63l-112-112C512.4 115.1 504.2 111.1 496 111.1c-17.05 0-32 13.73-32 32 0 8.188 3.125 16.38 9.375 22.63l89.38 89.38-89.38 89.38C467.1 351.6 464 359.8 464 367.1c0 18.28 14.95 32 32 32 8.188 0 16.38-3.125 22.62-9.376l112-112C636.9 272.4 640 264.2 640 255.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M416 31.94C416 21.75 408.1 0 384.1 0c-13.98 0-26.87 9.072-30.89 23.18l-128 448a31.933 31.933 0 0 0-1.241 8.801C223.1 490.3 232 512 256 512c13.92 0 26.73-9.157 30.75-23.22l128-448c.85-2.97 1.25-5.93 1.25-8.84zM176 143.1c0-18.28-14.95-32-32-32-8.188 0-16.38 3.125-22.62 9.376l-112 112C3.125 239.6 0 247.8 0 255.1s3.125 17.3 9.375 23.5l112 112c6.225 6.3 14.425 8.5 22.625 8.5 17.05 0 32-13.73 32-32 0-8.188-3.125-16.38-9.375-22.63L77.25 255.1l89.38-89.38c6.27-5.42 9.37-13.52 9.37-22.62zm464 112c0-8.188-3.125-16.38-9.375-22.63l-112-112C512.4 115.1 504.2 111.1 496 111.1c-17.05 0-32 13.73-32 32 0 8.188 3.125 16.38 9.375 22.63l89.38 89.38-89.38 89.38C467.1 351.6 464 359.8 464 367.1c0 18.28 14.95 32 32 32 8.188 0 16.38-3.125 22.62-9.376l112-112C636.9 272.4 640 264.2 640 255.1z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .unordered-list::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M16 96c0-26.51 21.49-48 48-48s48 21.49 48 48c0 26.5-21.49 48-48 48s-48-21.5-48-48zm464-32c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32 0-17.67 14.3-32 32-32h288zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32h288zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32h288zM16 416c0-26.5 21.49-48 48-48s48 21.5 48 48-21.49 48-48 48-48-21.5-48-48zm96-160c0 26.5-21.49 48-48 48s-48-21.5-48-48 21.49-48 48-48 48 21.5 48 48z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M16 96c0-26.51 21.49-48 48-48s48 21.49 48 48c0 26.5-21.49 48-48 48s-48-21.5-48-48zm464-32c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32 0-17.67 14.3-32 32-32h288zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32h288zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32h288zM16 416c0-26.5 21.49-48 48-48s48 21.5 48 48-21.49 48-48 48-48-21.5-48-48zm96-160c0 26.5-21.49 48-48 48s-48-21.5-48-48 21.49-48 48-48 48 21.5 48 48z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .ordered-list::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M55.1 56.04c0-13.26 11.64-24 24-24h32c14.2 0 24 10.74 24 24V176h16c14.2 0 24 10.8 24 24 0 13.3-9.8 24-24 24h-80c-12.36 0-24-10.7-24-24 0-13.2 11.64-24 24-24h16V80.04h-8c-12.36 0-24-10.75-24-24zm63.6 285.16c-6.6-7.4-18.3-6.9-24.05 1.2l-11.12 15.5c-7.7 10.8-22.69 13.3-33.48 5.6-10.79-7.7-13.28-22.7-5.58-33.4l11.12-15.6c23.74-33.3 72.31-35.7 99.21-4.9 21.3 23.5 20.8 60.9-1.1 84.7L118.8 432H152c13.3 0 24 10.7 24 24s-10.7 24-24 24H64c-9.53 0-18.16-5.6-21.98-14.4-3.83-8.7-2.12-18.9 4.34-25.9l72.04-78c5.3-5.8 5.4-14.6.3-20.5zM512 64c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H256c-17.7 0-32-14.3-32-32 0-17.67 14.3-32 32-32h256zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32h256zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32h256z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M55.1 56.04c0-13.26 11.64-24 24-24h32c14.2 0 24 10.74 24 24V176h16c14.2 0 24 10.8 24 24 0 13.3-9.8 24-24 24h-80c-12.36 0-24-10.7-24-24 0-13.2 11.64-24 24-24h16V80.04h-8c-12.36 0-24-10.75-24-24zm63.6 285.16c-6.6-7.4-18.3-6.9-24.05 1.2l-11.12 15.5c-7.7 10.8-22.69 13.3-33.48 5.6-10.79-7.7-13.28-22.7-5.58-33.4l11.12-15.6c23.74-33.3 72.31-35.7 99.21-4.9 21.3 23.5 20.8 60.9-1.1 84.7L118.8 432H152c13.3 0 24 10.7 24 24s-10.7 24-24 24H64c-9.53 0-18.16-5.6-21.98-14.4-3.83-8.7-2.12-18.9 4.34-25.9l72.04-78c5.3-5.8 5.4-14.6.3-20.5zM512 64c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H256c-17.7 0-32-14.3-32-32 0-17.67 14.3-32 32-32h256zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32h256zm0 160c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32h256z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .undo::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 256c0 123.4-100.5 223.9-223.9 223.9-48.84 0-95.17-15.58-134.2-44.86-14.12-10.59-16.97-30.66-6.375-44.81 10.59-14.12 30.62-16.94 44.81-6.375 27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256S344.31 96.2 256.2 96.2c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04C16 35 45.07 22.96 62.07 39.97l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11 379.5 32.11 480 132.6 480 256z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 256c0 123.4-100.5 223.9-223.9 223.9-48.84 0-95.17-15.58-134.2-44.86-14.12-10.59-16.97-30.66-6.375-44.81 10.59-14.12 30.62-16.94 44.81-6.375 27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256S344.31 96.2 256.2 96.2c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04C16 35 45.07 22.96 62.07 39.97l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11 379.5 32.11 480 132.6 480 256z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .editor-toolbar .redo::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2 0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31 18.48 0 31.97 15.04 31.97 31.96 0 35.04-81.59 70.41-147 70.41-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26L450 40.07c5.5-5.5 12.3-7.96 18.9-7.96z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2 0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31 18.48 0 31.97 15.04 31.97 31.96 0 35.04-81.59 70.41-147 70.41-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26L450 40.07c5.5-5.5 12.3-7.96 18.9-7.96z'/%3E%3C/svg%3E");
}
.form-editor .EasyMDEContainer .CodeMirror { background: transparent; color: var(--ink); border: 0; }
.form-editor .EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--ink); }
.form-editor .EasyMDEContainer .CodeMirror-placeholder { color: rgba(156, 154, 168, 0.6) !important; }
.form-editor .EasyMDEContainer .cm-s-easymde .cm-comment { background: transparent; }
.form-editor .EasyMDEContainer .editor-preview { background-color: var(--canvas); color: var(--ink); }
.dash-chat-closed { border-color: var(--border); }
.dash-chat-closed svg { color: var(--ink-dim); }
.dash-chat-closed p { color: var(--ink-dim); }

.dash-priority-badge--low { background-color: rgba(156, 154, 168, 0.12); color: var(--ink-dim); }
.dash-priority-badge--medium { background-color: rgba(91, 124, 240, 0.16); color: var(--cobalt-bright); }
.dash-priority-badge--high { background-color: rgba(225, 153, 9, 0.16); color: var(--warning); }
.dash-priority-badge--urgent { background-color: rgba(244, 52, 68, 0.16); color: var(--error); }

.dash-detail-label { color: var(--ink-dim); }
.dash-detail-value { color: var(--ink); }

.dash-info-row { border-color: var(--border); }
.dash-info-label { color: var(--ink-dim); }
.dash-info-value { color: var(--ink); }

/* ---- upgrade page: target-service identity strip, plan radio list, diff rows ---- */
.form-radio { background-color: var(--surface-raised); border-color: var(--border); }
.dash-upgrade-target { background-color: var(--surface); border-color: var(--border); }
.dash-plan-option { background-color: var(--surface-raised); border-color: var(--border); }
.dash-plan-option:hover { border-color: var(--ink-faint); }
.dash-plan-option--disabled:hover { border-color: var(--border); }
.dash-plan-option--selected { border-color: var(--cobalt); background-color: rgba(91, 124, 240, 0.08); }
.dash-plan-name { color: var(--ink); }
.dash-plan-specs { color: var(--ink-dim); }
.dash-plan-price-value { color: var(--ink); }
.dash-plan-price-period { color: var(--ink-dim); }
.dash-plan-tag--current { background-color: rgba(156, 154, 168, 0.12); color: var(--ink-dim); }
.dash-plan-tag--new { background-color: rgba(91, 124, 240, 0.16); color: var(--cobalt-bright); }
.dash-diff-row { border-color: var(--border); }
.dash-diff-label { color: var(--ink-dim); }
.dash-diff-old { color: var(--ink-faint); }
.dash-diff-arrow { color: var(--ink-dim); }
.dash-diff-new { color: var(--ink); }
.dash-diff-new--up { color: var(--success); }
.dash-diff-new--down { color: var(--warning); }
.dash-upgrade-total-label { color: var(--ink); }
.dash-upgrade-total-value { color: var(--ink); }
.dash-upgrade-total-note { color: var(--ink-dim); }

/* ---- credits page: balance card, amount presets ---- */
.dash-balance-amount { color: var(--ink); }
.dash-balance-currency { color: var(--ink-dim); }
.dash-amount-preset { border-color: var(--border); background-color: var(--canvas); color: var(--ink-dim); }
.dash-amount-preset:hover { border-color: var(--ink-faint); color: var(--ink); }
.dash-amount-preset.is-active { border-color: var(--cobalt); background-color: rgba(91, 124, 240, 0.14); color: var(--cobalt-bright); }

/* ---- server detail page: header, tabs, actions, metric cards ---- */
.dash-server-icon { background-color: rgba(91, 124, 240, 0.14); border-color: var(--border); color: var(--cobalt-bright); }
.dash-meta-row { color: var(--ink-dim); }

.dash-menu-panel { background-color: var(--surface); border-color: var(--border); }
.dash-menu-item { color: var(--ink-dim); }
.dash-menu-item:hover { color: var(--ink); background-color: var(--canvas); }
.dash-menu-item--danger,
.dash-menu-item--danger:hover { color: var(--error); }
.dash-menu-item--danger:hover { background-color: rgba(244, 52, 68, 0.1); }
.dash-menu-label { color: var(--ink-faint); }
.dash-menu-product:hover { background-color: rgba(255, 255, 255, 0.045); }
.dash-menu-product-icon { background-color: var(--canvas); border-color: var(--border); color: var(--cobalt-bright); }
.dash-menu-product-title { color: var(--ink); }
.dash-menu-product-desc { color: var(--ink-dim); }

.dash-notice { background-color: var(--surface); border-color: var(--border); }
.dash-notice-bar { background-color: var(--canvas); }
.dash-notice-bar-fill { background-color: var(--cobalt); }

.dash-tabs { border-color: var(--border); }
.dash-tab { color: var(--ink-dim); }
.dash-tab:hover { color: var(--ink); }
.dash-tab--active { color: var(--cobalt-bright); border-color: var(--cobalt); }

.dash-metric-title { color: var(--ink); }
.dash-metric-title svg { color: var(--ink-dim); }
.dash-metric-subtitle { color: var(--ink-dim); }
.dash-metric-value { color: var(--ink); }
.dash-metric-trend { color: var(--ink-dim); }
.dash-metric-chart { background-color: var(--surface-raised); }
.dash-chart-legend-item { color: var(--ink-dim); }

.dash-settings-title { color: var(--ink); }
.dash-settings-desc { color: var(--ink-dim); }
.dash-danger-row { border-color: rgba(244, 52, 68, 0.3); background-color: rgba(244, 52, 68, 0.06); }
.dash-danger-row .dash-settings-title { color: var(--error); }

.dash-copy-btn { color: var(--ink-faint); }
.dash-copy-btn:hover { color: var(--ink); background-color: var(--canvas); }

/* Ticket reply composer's "Attach files" trigger -- a label+icon control, not the
   fixed-size icon-only .dash-copy-btn square (that class collapses this row to 24px
   and crushes the icon/text together, see the ticket screenshot bug it caused). */
.attach-trigger { color: var(--ink-faint); }
.attach-trigger:hover { color: var(--ink-dim); }
.dash-ip-badge { background-color: rgba(91, 124, 240, 0.14); color: var(--cobalt-bright); }

/* ---- reinstall confirmation modal ---- */
.dash-modal { background-color: var(--surface); border-color: var(--border); }
.dash-modal-title { color: var(--ink); }
.dash-modal-close { color: var(--ink-dim); }
.dash-modal-close:hover { color: var(--ink); }
.dash-modal-confirm label { color: var(--ink-dim); }

/* ---- services page: right-hand detail drawer ---- */
.dash-drawer { background-color: var(--surface); border-color: var(--border); }
.dash-drawer-header { border-color: var(--border); }

/* Real drawers here nest a full Livewire component (services.show / invoices.show)
   which can itself open dash-modal dialogs (cancel service, pay invoice, edit label,
   billing agreement). site.css slides .dash-drawer-wrap in via `transform`, which
   creates a new containing block for any `position:fixed` descendant — a nested
   dash-modal would then be confined to the drawer's own box instead of the full
   viewport. Overridden here (loaded after site.css) to slide via `right` offset
   instead, same visual result, no stacking-context side effect. */
.dash-drawer-wrap { transform: none; right: -100%; }
.dash-drawer-wrap.is-open { transform: none; right: 0; }

/* ---- account pages: session rows, toggle switches ---- */
.dash-row-list > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }
.dash-session-icon { border-color: var(--border); background-color: var(--canvas); color: var(--ink-dim); }
.dash-session-current { color: var(--success); }
.dash-toggle-track { background-color: var(--canvas); border-color: var(--border); }
.dash-toggle-track::after { background-color: #fff; }
.dash-toggle input:checked ~ .dash-toggle-track { background-color: var(--cobalt-deep); border-color: var(--cobalt-deep); }

/* ---- checkout flow: configure.html, cart.html ---- */
.checkout-step { color: var(--ink-dim); }
.checkout-step-num { border-color: var(--border); }
.checkout-step--active { color: var(--ink); }
.checkout-step--active .checkout-step-num { background-color: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.checkout-step--done { color: var(--ink); }
.checkout-step--done .checkout-step-num { background-color: rgba(91, 124, 240, 0.15); color: var(--cobalt-bright); }
.checkout-step-connector { background-color: var(--border); }
.checkout-step-connector--done { background-color: rgba(91, 124, 240, 0.4); }

.checkout-section-num { background-color: rgba(91, 124, 240, 0.15); color: var(--cobalt-bright); }
.checkout-section-divider { border-color: var(--border); }

.os-card { background-color: var(--surface-raised); border-color: var(--border); }
.os-card:hover { border-color: var(--ink-faint); }
.os-card--selected,
.os-card:has(input:checked) { border-color: var(--cobalt); background-color: rgba(91, 124, 240, 0.08); }
.os-card-name { color: var(--ink); }
.os-card-version { color: var(--ink-dim); }
.os-card-check { background-color: var(--cobalt); color: #fff; }

/* ---- marketing nav: authenticated account dropdown ----
   <livewire:auth.logout> is a core shared component (also used by the
   token-driven dashboard topbar via x-dropdown) so its own view can't be
   restyled with guideline classes without breaking that context. Its
   Livewire root <div> is always the dropdown's last child here, so it's
   restyled from the outside instead, matching .dash-nav-link's look. */
#marketing-account-menu > div:last-child button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--error);
  background-color: transparent;
  transition: background-color 150ms;
}
#marketing-account-menu > div:last-child button:hover {
  background-color: rgba(244, 52, 68, 0.1);
}

/* ---- dashboard sidebar footer: logout button ----
   Same technique/reason as #marketing-account-menu above, applied to the sidebar
   footer's <livewire:auth.logout>. Guideline's own mock is an icon-only link
   (text-ink-dim hover:text-cobalt, w-5 h-5 logout SVG) -- the real component
   renders a text button ("Log out") with unrelated colors instead, and its
   markup can't be edited (shared across themes). Reproduced the guideline's
   icon look from the outside: collapse the button to a 20x20 box, hide its
   text, and paint the exact same logout glyph via mask-image so only the
   icon shows, colored/hovered the same as the rest of the guideline pages. */
#dash-sidebar-logout > div:last-child button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  font-size: 0;
  color: transparent;
}
#dash-sidebar-logout > div:last-child button::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--ink-dim);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 150ms;
}
#dash-sidebar-logout > div:last-child button:hover::before {
  background-color: var(--cobalt-bright);
}

/* ---- pricing: "unavailable plan" toast (Voyager/Odyssey Deploy buttons) ---- */
.unavailable-plan-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 60;
  max-width: calc(100% - 2rem);
  padding: 0.75rem 1.1rem;
  border-radius: 0.75rem;
  border-left: 4px solid var(--error);
  background-color: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.unavailable-plan-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- cart & checkout pages: nav clearance ----
   These pages reuse <x-marketing.nav> (a sticky header with -mb-[76px] so
   hero sections on other marketing pages can sit flush underneath it), but
   have no hero section of their own directly after the nav, so their content
   needs explicit top padding to clear it. pt-[108px] isn't in the guideline's
   precompiled site.css (arbitrary bracket values only compile if that exact
   class string appeared in the original static mockup — see the w-84 note
   below), so it silently did nothing and the content overlapped the nav.
   Defined by hand here instead, scoped so it can't collide with anything
   else. */
.nav-clearance { padding-top: 108px; }

/* ---- marketing navbar: cart button ----
   Reuses the shared <livewire:components.cart> component (same view every theme uses),
   which hardcodes app.css's admin-configurable token classes (hover:bg-neutral, bg-primary)
   and core's <x-navigation.link> (a plain <a> wrapper). Marketing pages don't load app.css
   (see cobalt_dark_gotchas: text-base collision note), so those classes compile to nothing
   there. Restyled here with the guideline's dark palette, scoped to #marketing-cart so
   nothing elsewhere (fallback navbar, other themes) is touched. Same technique as
   #marketing-notifications above. Only rendered while signed in (wrapped in @auth in
   marketing/nav.blade.php); the component itself still self-hides when the cart is empty. */
#marketing-cart .hover\:bg-neutral:hover { background-color: var(--surface); }
#marketing-cart .bg-primary { background-color: var(--cobalt); }

/* ---- marketing navbar: notifications bell dropdown ----
   Reuses the shared <livewire:components.notifications> component (same view every
   theme uses), which hardcodes app.css's admin-configurable token classes
   (bg-background-secondary, border-neutral, hover:bg-neutral, text-primary). Marketing
   pages don't load app.css (see cobalt_dark_gotchas: text-base collision note), so those
   classes compile to nothing there. Restyled here with the guideline's dark palette,
   scoped to #marketing-notifications so nothing elsewhere (fallback navbar, other
   themes) is touched. Same technique as #marketing-account-menu above. */
#marketing-notifications .hover\:bg-neutral:hover { background-color: var(--surface); }
#marketing-notifications .bg-background-secondary { background-color: var(--surface); border-color: var(--border); }
#marketing-notifications .border-neutral { border-color: var(--border); }
#marketing-notifications .hover\:bg-background-secondary\/50:hover { background-color: var(--surface-raised); }
#marketing-notifications .border-neutral\/50 { border-color: var(--border); }
#marketing-notifications .text-primary { color: var(--cobalt-bright); }
#marketing-notifications .bg-red-600 { background-color: var(--error); }

/* w-84 isn't in the guideline's Tailwind v3 spacing scale (only app.css's Tailwind v4
   build supports arbitrary numeric steps like this), so it silently doesn't compile
   here and the notifications dropdown panel collapses to its content's intrinsic width. */
#marketing-notifications .w-84 { width: 21rem; }