/* Charcoal panels, thin outlines, light display type. Teal = interaction, DYNR gold = brand.
   New = green and Edit = amber are never teal or gold, so the two modes can't be confused. */
:root {
  color-scheme: dark;
  --bg: #1a1c22;
  --bg-deep: #131419;
  --panel: #22252d;
  --panel-2: #2a2e37;
  --field: #15171c;
  --line: #333844;
  --line-2: #464c5a;
  --text: #eef2f4;
  --muted: #a3afb9;
  --teal: #1fd2d4;
  --teal-hi: #6ff0f1;
  --teal-ink: #04292a;
  --teal-soft: rgba(31, 210, 212, .12);
  --accent: #fab906;
  --new: #33c47a;
  --new-ink: #032113;
  --new-soft: rgba(51, 196, 122, .10);
  --edit: #ff9330;
  --edit-ink: #2b1300;
  --edit-soft: rgba(255, 147, 48, .11);
  --danger: #f0565a;
  --danger-ink: #2b0001;
  --danger-soft: rgba(240, 86, 90, .13);
  --link: #00a8fc;
  --radius: 10px;
  --radius-sm: 7px;
  --display: "Barlow", "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font: "Barlow", "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html {
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(31, 210, 212, .10), transparent 70%),
    radial-gradient(900px 480px at 100% 0%, rgba(250, 185, 6, .05), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
html, body { margin: 0; }
body { color: var(--text); font: 14px/1.5 var(--font); min-height: 100vh; overflow-x: hidden; }
[hidden] { display: none !important; }
code { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); font-weight: 400; }

/* background dot field, drawn by js/field.js */
.field-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .7; }

/* --- focus: one visible ring everywhere */
:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 210, 212, .28);
}

/* --- controls: default = teal outline pill, ghost = quiet outline, primary-neutral = teal fill */
button, .button-link {
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--teal);
  background: transparent; border: 1px solid var(--teal); border-radius: 999px; min-height: 34px;
  padding: 5px 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
button:hover:not(:disabled), .button-link:hover { background: var(--teal-soft); color: var(--teal-hi); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost { color: var(--text); border-color: var(--line-2); }
button.ghost:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-hi); background: transparent; }
button.small, .button-link.small { min-height: 28px; padding: 2px 12px; font-size: 12px; }
button.icon {
  background: transparent; border-color: transparent; border-radius: 6px; padding: 1px 7px;
  min-height: 28px; min-width: 28px; color: var(--muted);
}
button.icon:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); background: transparent; }
button.danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); font-weight: 600; }
button.danger:hover:not(:disabled) { background: #ff7276; color: var(--danger-ink); }
.danger-text { color: #ff9b9d !important; }
.warn-text { color: #ffc58f !important; }
button.primary-neutral { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); font-weight: 600; }
button.primary-neutral:hover:not(:disabled) { background: var(--teal-hi); color: var(--teal-ink); }
button.edit-accent { background: var(--edit); border-color: var(--edit); color: var(--edit-ink); font-weight: 600; }
button.edit-accent:hover:not(:disabled) { background: #ffa755; color: var(--edit-ink); }
button.chip {
  min-height: 24px; padding: 1px 9px; font-size: 12px; border-radius: 999px; border-color: var(--line-2);
  background: transparent; color: var(--muted);
}
button.chip:hover:not(:disabled) { color: var(--teal-hi); border-color: var(--teal); background: transparent; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 7px 10px; width: 100%; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #7f8b96; }
input:hover:not(:disabled), select:hover, textarea:hover { border-color: #5a6170; }
textarea { resize: vertical; line-height: 1.45; }
input.invalid, input:invalid:not(:placeholder-shown) { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
input[type=color] { width: 40px; height: 34px; padding: 3px; flex: none; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--teal); }
input.hex { width: 100px; font-family: var(--mono); }
input[type=date], input[type=time], input[type=datetime-local] { color-scheme: dark; }
select {
  appearance: none; cursor: pointer; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--teal) 50%), linear-gradient(135deg, var(--teal) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
select option, select optgroup { background: var(--panel); color: var(--text); }

.stack { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline.right { justify-content: flex-end; }
.lbl { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.lbl .muted { text-transform: none; letter-spacing: 0; }
.grow { flex: 1; }

/* --- top bar: one row, everything occasional lives in the ⋮ menu */
.topbar {
  display: flex; align-items: center; gap: 12px 20px; padding: 6px 16px 6px 24px; min-height: 52px;
  background: rgba(19, 20, 25, .86); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5;
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--teal); min-width: 0; }
.brand-logo { width: 28px; height: 28px; flex: none; }
.brand-logo-gold { stroke: var(--accent); }
.brand-mark { color: var(--accent); font: 600 15px/1 var(--display); letter-spacing: .22em; }
.brand-sep { width: 1px; height: 18px; background: var(--line-2); }
.brand-name { color: var(--text); font: 300 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.topbar-actions { display: flex; gap: 12px; align-items: center; margin-left: auto; min-width: 0; }
.group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.topbar .group { flex-wrap: nowrap; min-width: 0; gap: 2px 4px; }
.pill-select { width: auto; max-width: 220px; border-radius: 999px; padding: 5px 30px 5px 14px; font-size: 13px; margin-right: 2px; }
.nav-btn {
  position: relative; background: transparent; border: 0; border-radius: 6px; min-height: 32px; padding: 6px 8px;
  color: #c9d2d8; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.nav-btn::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 1px;
  background: var(--teal); transform: scaleX(0); transition: transform .2s;
}
.nav-btn:hover:not(:disabled) { color: var(--teal-hi); background: transparent; }
.nav-btn:hover:not(:disabled)::after { transform: scaleX(1); }
.user-chip { display: flex; align-items: center; }
.user-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap; }
.no-sign-in { padding-left: 12px; border-left: 1px solid var(--line); font-size: 12px; }
.avatar-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  border: 1px solid var(--teal); color: var(--teal); flex: none;
}
.role-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 1px 8px;
  border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted);
}
.role-pill.owner { border-color: var(--accent); color: var(--accent); }
.role-pill.admin { border-color: var(--teal); color: var(--teal); }

.menu-wrap { position: relative; flex: none; }
.kebab {
  width: 36px; height: 36px; min-height: 0; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border-color: var(--line-2); color: var(--text);
}
.kebab span, .kebab span::before, .kebab span::after {
  display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; position: relative;
}
.kebab span::before, .kebab span::after { content: ""; position: absolute; left: 0; }
.kebab span::before { top: -7px; }
.kebab span::after { top: 7px; }
.kebab:hover:not(:disabled), .kebab[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 230px; max-height: calc(100vh - 80px); overflow: auto;
  padding: 6px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(30, 33, 40, .98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5); z-index: 6;
}
.menu::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.menu-group + .menu-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.menu-group:empty { display: none; }
.menu-label { padding: 6px 10px 2px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.menu [role=menuitem] {
  display: block; width: 100%; min-height: 0; text-align: left; background: transparent; border: 0; border-radius: 7px;
  padding: 7px 10px; font-size: 14px; letter-spacing: 0; color: var(--text);
}
.menu [role=menuitem]:hover:not(:disabled), .menu [role=menuitem]:focus-visible { background: var(--teal-soft); color: var(--teal-hi); outline: none; }
.menu [role=menuitem].danger-text:hover:not(:disabled), .menu [role=menuitem].danger-text:focus-visible { background: var(--danger-soft); color: #ffd0d1 !important; }
.menu .mobile-only { display: none; }

/* --- target bar: the mode must be impossible to miss */
.target {
  position: relative; margin: 16px 24px 0; padding: 12px 16px 14px 24px; border-radius: var(--radius);
  border: 1px solid var(--line); background: rgba(34, 37, 45, .92);
  display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: border-color .2s, background .2s;
}
.target::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; }
.target.mode-new { border-color: rgba(51, 196, 122, .65); background: linear-gradient(90deg, var(--new-soft), transparent 55%), rgba(34, 37, 45, .92); }
.target.mode-new::before { background: var(--new); }
.target.mode-edit { border-color: rgba(255, 147, 48, .75); background: linear-gradient(90deg, var(--edit-soft), transparent 55%), rgba(34, 37, 45, .92); }
/* Edit also gets a hatched rail, so it reads as "careful" even without color. */
.target.mode-edit::before { background: repeating-linear-gradient(-45deg, var(--edit) 0 6px, #b85e10 6px 12px); }
.target-flag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: -4px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 10px 2px 4px; border-radius: 999px;
}
.target-flag strong { font-weight: 700; }
.flag-sub { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--muted); font-size: 12px; }
.flag-icon { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; line-height: 1; }
.mode-new .target-flag { color: #8af0b8; background: rgba(51, 196, 122, .14); }
.mode-new .flag-icon { background: var(--new); color: var(--new-ink); }
.mode-new .flag-icon::before { content: "+"; font-weight: 800; }
.mode-edit .target-flag { color: #ffc58f; background: rgba(255, 147, 48, .16); }
.mode-edit .flag-icon { background: var(--edit); color: var(--edit-ink); }
.mode-edit .flag-icon::before { content: "✎"; font-size: 9px; }
.target-row { display: flex; gap: 12px 14px; align-items: flex-end; flex-wrap: wrap; }
.target-row > label:not(.grow) { width: 230px; }
.mode-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; background: var(--field); }
.mode-btn {
  border: 0; border-radius: 999px; background: transparent; min-height: 30px; padding: 4px 16px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.mode-btn:hover:not(:disabled) { color: var(--text); background: transparent; }
.mode-new #modeNew, .mode-new #modeNew:hover { background: var(--new); color: var(--new-ink); }
.mode-edit #modeEdit, .mode-edit #modeEdit:hover { background: var(--edit); color: var(--edit-ink); }
.mode-edit #messageRef:not(.invalid) { border-color: var(--edit); }
/* the one big action: filled with the mode color, never teal */
button.primary { font-weight: 700; min-height: 36px; padding: 6px 20px; font-size: 13px; letter-spacing: .03em; border-width: 0; }
.mode-new button.primary { background: var(--new); color: var(--new-ink); box-shadow: 0 6px 20px rgba(51, 196, 122, .25); }
.mode-new button.primary:hover:not(:disabled) { background: #4fd68e; color: var(--new-ink); }
.mode-edit button.primary { background: var(--edit); color: var(--edit-ink); box-shadow: 0 6px 20px rgba(255, 147, 48, .25); }
.mode-edit button.primary:hover:not(:disabled) { background: #ffa755; color: var(--edit-ink); }
button.primary:disabled { box-shadow: none; }
.mode-new .edit-only { display: none !important; }
.mode-edit .new-only { display: none !important; }
body:not(.editing) .tab-hint.edit-only { display: none; }
.action-stack { min-width: 260px; }

.banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--panel-2); }
.banner.success { border-color: var(--new); }
.banner.error { border-color: var(--danger); background: var(--danger-soft); }
.banner.info { border-color: rgba(31, 210, 212, .5); background: var(--teal-soft); }
.banner-close { margin-left: auto; }
.error-details { margin: 6px 0 0; padding-left: 18px; }
.error-details li { margin: 2px 0; }

/* --- workspace */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 18px 24px 48px; align-items: start; }
.editor { min-width: 0; }
.tabs { display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  min-height: 0; padding: 10px 16px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.tab:hover:not(:disabled) { color: var(--text); background: transparent; }
.tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-hint { margin-left: auto; font-size: 12px; color: #ffc58f; }

.section { margin-bottom: 24px; }
.section-head { display: flex; align-items: flex-end; gap: 6px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.section-head h2 {
  position: relative; margin: 0; padding-bottom: 8px; font: 300 21px/1.15 var(--display); letter-spacing: .02em;
}
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--teal); border-radius: 2px; }
.section-head > .muted, .section-head > span { padding-bottom: 8px; font-size: 12px; }
.section-head > button { margin-left: auto; margin-bottom: 4px; }
.card { background: rgba(34, 37, 45, .9); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.card.inner { background: rgba(255, 255, 255, .025); padding: 9px 11px; margin-bottom: 9px; border-radius: var(--radius-sm); }
.embed-card { border-left: 4px solid #4e5058; }
.embed-card > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; padding: 2px 0; border-radius: 6px; }
.embed-card > summary::-webkit-details-marker { display: none; }
.embed-card > summary::before { content: "▸"; color: var(--teal); transition: transform .15s; }
.embed-card[open] > summary { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.embed-card[open] > summary::before { transform: rotate(90deg); }
.card-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move { margin-left: auto; display: inline-flex; gap: 2px; flex: none; }
.row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.subsection { margin: 4px 0 8px; }
.subsection-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.subsection-head button { margin-left: auto; text-transform: none; letter-spacing: .02em; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }

.field { margin-bottom: 10px; min-width: 0; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.field-head label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.counter { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.counter.near { color: #ffc58f; }
.counter.over { color: #ff9b9d; font-weight: 700; }
.helpers { display: flex; gap: 5px 12px; flex-wrap: wrap; margin-bottom: 5px; }
.helper-group { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.chip.fmt-b { font-weight: 800; }
.chip.fmt-i { font-style: italic; }
.chip.fmt-u { text-decoration: underline; }
.chip.fmt-s { text-decoration: line-through; }
select.chip-select.wide { width: auto; }
.state-pill.testing { border-color: #a974d6; color: #dcbdf3; }
.state-pill.coming_soon { border-color: #6f7cff; color: #c9cdfb; }
select.chip-select {
  width: 7.5em; flex: none; min-height: 24px; padding: 1px 24px 1px 9px; font-size: 12px; border-radius: 999px;
  color: var(--muted); background-color: transparent; background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
.button-edit { display: grid; grid-template-columns: 130px 1fr 1.4fr auto; gap: 0 10px; align-items: end; }
.button-edit .move { margin-bottom: 14px; }

.issues { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.issue {
  display: flex; gap: 10px; align-items: flex-start; font-size: 13px; padding: 8px 12px;
  border-radius: var(--radius-sm); border: 1px solid; overflow-wrap: anywhere;
}
.issue-icon { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.issue.error { border-color: rgba(240, 86, 90, .55); background: var(--danger-soft); }
.issue.error .issue-icon { background: var(--danger); color: var(--danger-ink); }
.issue.warn { border-color: rgba(255, 147, 48, .5); background: var(--edit-soft); }
.issue.warn .issue-icon { background: var(--edit); color: var(--edit-ink); }

/* --- JSON editor */
.json-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.json-status { font-size: 12px; margin-left: auto; }
.json-status.ok { color: #8af0b8; }
.json-status.bad { color: #ff9b9d; }
.json-wrap { position: relative; height: 70vh; min-height: 360px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--field); overflow: hidden; }
.json-wrap:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 210, 212, .2); }
.json-layer {
  position: absolute; inset: 0; margin: 0; padding: 12px 14px; font: 13px/1.55 var(--mono); white-space: pre;
  overflow: auto; tab-size: 2; border: 0; border-radius: 0; background: transparent;
}
.json-input, .json-input:hover, .json-input:focus-visible { color: transparent; caret-color: var(--text); resize: none; z-index: 1; border: 0; box-shadow: none; }
.json-input::selection { background: rgba(31, 210, 212, .35); color: transparent; }
#jsonHighlight { color: var(--text); pointer-events: none; }
.j-key { color: #8be9ea; }
.j-str { color: #f2c27a; }
.j-num { color: #b5e3a8; }
.j-lit { color: #a5b4ff; }
.j-punct { color: #8a929c; }

/* --- preview: the frame is ours, the inside stays (approximately) Discord's dark theme */
.preview-col {
  position: sticky; top: 68px; min-width: 0; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(19, 20, 25, .85); padding: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 6px 10px; font-size: 12px; }
.preview-head > :first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.preview-head > :first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.discord { background: #313338; color: #dbdee1; border-radius: 8px; padding: 16px 16px 20px 0; max-height: calc(100vh - 140px); overflow: auto; font: 16px/1.375 "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.msg { display: flex; gap: 16px; padding-left: 16px; }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: #5865f2; object-fit: cover; }
.msg-main { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: center; gap: 6px; }
.msg-user { font-weight: 600; color: #f2f3f5; }
.app-badge { background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; line-height: 15px; }
.msg-time { font-size: 12px; color: #949ba4; }
.msg-content { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.preview-empty { color: #949ba4; font-style: italic; font-size: 14px; }

.embed { background: #2b2d31; border-left: 4px solid #1e1f22; border-radius: 4px; padding: 8px 16px 16px 12px; max-width: 520px; width: 100%; margin-top: 4px; font-size: 14px; }
.embed-grid { display: flex; gap: 16px; }
.embed-body { flex: 1; min-width: 0; }
.embed-author { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: #f2f3f5; }
.embed-author-icon { width: 24px; height: 24px; border-radius: 50%; }
.embed-title { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; color: #f2f3f5; text-decoration: none; }
a.embed-title { color: var(--link); }
a.embed-title:hover, .embed-author-name:hover { text-decoration: underline; }
.embed-author-name { color: inherit; text-decoration: none; }
.embed-desc { margin-top: 8px; }
.embed-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 8px; }
.embed-field { min-width: 0; }
.embed-field-name { font-weight: 600; color: #f2f3f5; margin-bottom: 2px; }
.embed-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: 4px; margin-top: 8px; flex: none; }
.embed-image { display: block; max-width: 100%; max-height: 300px; border-radius: 4px; margin-top: 16px; }
.embed-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #b5bac1; }
.embed-footer-icon { width: 20px; height: 20px; border-radius: 50%; }
.embed:not(:has(.embed-body > *)) .embed-image { margin-top: 8px; }
.img-broken { min-width: 80px; min-height: 40px; background: repeating-linear-gradient(45deg, #2b2d31 0 6px, #383a40 6px 12px); border-radius: 4px; }

.button-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 2px 16px; border-radius: 8px; background: #4e5058; color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; }
.dbtn:hover { background: #6d6f78; }
.btn-emoji { width: 20px; height: 20px; }
.btn-emoji-text { font-size: 16px; }
.btn-ext { width: 16px; height: 16px; }

/* markdown */
.md { white-space: normal; overflow-wrap: anywhere; }
.md a { color: var(--link); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md-line, .md-li { min-height: 1.375em; }
.md-empty { height: 1.375em; }
.md-h1 { font-size: 1.5em; font-weight: 700; line-height: 1.375; margin: 8px 0 4px; color: #f2f3f5; }
.md-h2 { font-size: 1.25em; font-weight: 700; line-height: 1.375; margin: 8px 0 4px; color: #f2f3f5; }
.md-h3 { font-size: 1em; font-weight: 700; line-height: 1.375; margin: 8px 0 4px; color: #f2f3f5; }
.md > .md-h1:first-child, .md > .md-h2:first-child, .md > .md-h3:first-child { margin-top: 0; }
.md-sub { font-size: .8125em; color: #949ba4; line-height: 1.33; }
.md-li { padding-left: 1.2em; position: relative; }
.md-li::before { content: "•"; position: absolute; left: .35em; }
.md-li2 { padding-left: 2.4em; }
.md-li2::before { left: 1.55em; content: "◦"; }
.md-quote { margin: 0; padding-left: 12px; border-left: 4px solid #4e5058; }
.md-code { background: #1e1f22; border-radius: 4px; padding: 0 .2em; font-size: .875em; }
.md-codeblock { background: #1e1f22; border: 1px solid #1e1f22; border-radius: 4px; padding: 7px; margin: 4px 0; white-space: pre-wrap; font-size: .875em; }
.md-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; white-space: nowrap; }
.md-time { background: rgba(255, 255, 255, .06); border-radius: 3px; padding: 0 2px; }
.md-emoji { width: 1.375em; height: 1.375em; vertical-align: -.3em; object-fit: contain; }
.md-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; }
.md-spoiler * { visibility: hidden; }
.md-spoiler:hover:not(.revealed) { background: #26272b; }
.md-spoiler.revealed { color: inherit; background: rgba(255, 255, 255, .1); cursor: auto; }
.md-spoiler.revealed * { visibility: visible; }
.md-ol { position: relative; padding-left: 1.6em; min-height: 1.375em; }
.md-num { position: absolute; left: 0; min-width: 1.3em; text-align: right; }
.md-ol.md-li2 { padding-left: 3em; }
.md-ol.md-li2 .md-num { left: 1.4em; }
.md-command { font-weight: 500; }

/* --- dialogs, lists, toast */
.dialog {
  background: rgba(34, 37, 45, .98); color: var(--text); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 18px 22px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.dialog::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, transparent, var(--teal) 30%, var(--teal) 70%, transparent);
}
.dialog.wide { width: min(640px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(8, 9, 12, .72); backdrop-filter: blur(3px); }
.dialog h2 { margin: 0 0 8px; font: 300 24px/1.2 var(--display); letter-spacing: .02em; }
.dialog h3 { margin: 20px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.dialog-body p { margin: 0 0 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 6px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.add-form .stack { margin-bottom: 8px; }
.form-error { border: 1px solid var(--danger); background: var(--danger-soft); padding: 8px 10px; border-radius: var(--radius-sm); }
.list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.list-item, .list-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%;
  white-space: normal; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); min-height: 0;
}
button.list-item { border-color: var(--line); background: rgba(255, 255, 255, .02); }
button.list-item:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); color: var(--text); }
.list-row { flex-direction: row; justify-content: space-between; align-items: center; border: 1px solid var(--line); }
.list-main { font-weight: 600; }
.list-sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line-2); padding: 9px 16px; border-radius: 999px; z-index: 10; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.toast.error { border-color: var(--danger); }
.toast.warn { border-color: var(--edit); }

/* --- image library */
button.link-btn { background: none; border: 0; min-height: 0; padding: 0; margin-left: auto; margin-right: 8px; font-size: 12px; color: var(--teal); }
button.link-btn:hover:not(:disabled) { background: none; text-decoration: underline; }
.field-note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.divider-field select { flex: 1; min-width: 0; }
.divider-swatch { width: 160px; height: 8px; object-fit: cover; border-radius: 4px; flex: none; }
.notice { border: 1px solid var(--edit); background: var(--edit-soft); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }
.lib-section { margin-top: 14px; }
.lib-list { display: flex; flex-direction: column; gap: 6px; max-height: 32vh; overflow: auto; }
.lib-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: rgba(255, 255, 255, .02); }
.lib-thumb { width: 120px; height: 48px; object-fit: contain; background: var(--field); border-radius: 4px; grid-row: span 2; }
.lib-item.bar .lib-thumb { height: 10px; object-fit: cover; align-self: center; }
.lib-meta { min-width: 0; }
.lib-meta .list-main { display: flex; align-items: center; gap: 6px; }
.lib-warn { font-size: 12px; color: #ffc58f; }
.lib-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.lib-save { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.color-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bar-form, .image-form { margin-top: 8px; }
.bar-form .inline input[type=text]:not(.hex), .image-form input { flex: 1; min-width: 140px; width: auto; }
.swatches { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; min-height: 0; border-radius: 50%; padding: 0; border: 2px solid var(--line-2); }
.swatch:hover:not(:disabled) { border-color: var(--text); }

/* --- status posts */
.dialog.xwide { width: min(860px, calc(100vw - 32px)); }
.lib-list.tall { max-height: 40vh; }
.status-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; background: rgba(255, 255, 255, .02); }
.status-row:hover { border-color: var(--line-2); }
.status-row .lib-actions { grid-column: 2; }
.status-row.paused { opacity: .6; }
.state-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: rgba(0, 0, 0, .2); border: 1px solid var(--line-2); }
.state-pill.online { border-color: var(--new); color: #8af0b8; }
.state-pill.restarting { border-color: #f0b429; color: #ffd98a; }
.state-pill.offline { border-color: var(--danger); color: #ffb3b5; }
.status-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 8px; }
.status-form .span2 { grid-column: 1 / -1; }
.dialog h3.subhead { font-size: 11px; color: var(--muted); margin: 14px 0 0; }
.server-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
.server-check { display: flex; flex-direction: column; gap: 4px; }
.server-check .region-label { padding: 4px 8px; font-size: 13px; margin-left: 22px; width: calc(100% - 22px); }
.server-pills { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 2px; }
.state-pill.partial { border-color: #ff7a45; color: #ffb898; }
.design-choice { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 12px 8px; margin: 0; display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; }
.design-choice legend { padding: 0 6px; }
.design-choice .field-note { flex-basis: 100%; margin: 0; }

/* --- schedule */
.schedule-what { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--panel-2); border-left: 4px solid var(--line-2); }
.schedule-what:has(.what-new) { border-left-color: var(--new); }
.schedule-what:has(.what-edit) { border-left-color: var(--edit); }
.schedule-when { display: grid; grid-template-columns: 170px 130px 1fr; gap: 10px; align-items: end; }
.schedule-form > .stack, .schedule-form > .inline { margin-top: 10px; }
.state-pill.job-pending { border-color: #6f7cff; color: #c9cdfb; }
.state-pill.job-running { border-color: #f0b429; color: #ffd98a; }
.state-pill.job-done { border-color: var(--new); color: #8af0b8; }
.state-pill.job-failed { border-color: var(--danger); color: #ffb3b5; }
.state-pill.job-cancelled { color: var(--muted); }
.status-row.job.cancelled, .status-row.job.done { opacity: .75; }
@media (max-width: 640px) { .schedule-when { grid-template-columns: 1fr 1fr; } .schedule-when > :last-child { grid-column: 1 / -1; } }

/* --- signed in vs public */
body.public .member-only, body:not(.public) .public-only, body.role-editor .admin-only { display: none !important; }
.public-hook { flex: 1; min-width: 260px; }
.field-note.ok { color: #8af0b8; }
.field-note.bad { color: #ff9b9d; }
.field-note.warn-note { color: #ffd28a; }
.activity-row { align-items: flex-start; }
code.copyable { background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 6px 9px; user-select: all; overflow-wrap: anywhere; }
.settings-form .lib-section:first-child { margin-top: 0; }
.stack.narrow { max-width: 220px; margin-top: 10px; }
input:disabled { opacity: .6; cursor: not-allowed; }

/* --- window chrome */
.dialog { position: relative; padding-top: 38px; }
.mac-close {
  position: absolute; top: 14px; left: 16px; width: 14px; height: 14px; min-height: 0; padding: 0; border-radius: 50%;
  background: #ff5f57; border: 1px solid #e0443e; display: grid; place-items: center;
}
.mac-close:hover:not(:disabled) { background: #ff5f57; border-color: #b8322d; }
.mac-close::after { content: "×"; font-size: 12px; line-height: 1; color: #4d0000; opacity: 0; font-weight: 700; margin-top: -1px; }
.mac-close:hover::after, .mac-close:focus-visible::after { opacity: 1; }
.secret-wrap { position: relative; display: block; }
.secret-wrap input { padding-right: 38px; }
.eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 26px; min-height: 0; padding: 0;
  border: 0; background: transparent; justify-content: center; color: var(--muted);
}
.eye:hover:not(:disabled) { background: transparent; color: var(--text); }
.eye::before { content: "👁"; font-size: 15px; filter: grayscale(1); opacity: .7; }
.eye.on::before { opacity: 1; filter: none; }

/* --- login */
.login { max-width: 360px; margin: 18vh auto 0; padding: 0 16px; }
.login .brand-mark { margin-right: 8px; }
.login form { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .preview-col { position: static; }
  .discord { max-height: none; }
}
@media (max-width: 700px) {
  .topbar { padding: 6px 12px 6px 16px; gap: 10px; }
  .brand-sep, .brand-name, .user-label, .user-name .role-pill, #tplSave { display: none; }
  .topbar-actions { flex: 1; gap: 8px; }
  .tpl-quick { flex: 1; justify-content: flex-end; }
  .pill-select { max-width: none; width: 100%; }
  .user-name { padding-left: 0; border-left: 0; }
  .menu .mobile-only { display: block; }
  .menu { position: fixed; top: 56px; right: 12px; width: min(260px, calc(100vw - 24px)); }
  .target { margin: 14px 16px 0; padding: 12px 14px 14px 22px; }
  .target-row > .stack, .target-row > label:not(.grow), .action-stack { width: 100%; min-width: 0; flex: 1 1 100%; }
  .target-row > .stack:has(> .inline) .lbl { display: none; }
  .target-flag { border-radius: 12px; }
  .flag-sub { display: none; }
  .mode-toggle { display: flex; }
  .mode-btn { flex: 1; }
  .workspace { padding: 16px 16px 40px; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .button-edit { grid-template-columns: minmax(0, 1fr); }
  .button-edit .move { margin: 0 0 10px; }
  .lib-item { grid-template-columns: minmax(0, 1fr); }
  .status-form { grid-template-columns: minmax(0, 1fr); }
  .status-row { grid-template-columns: minmax(0, 1fr); }
  .status-row .lib-actions { grid-column: 1; }
  .lib-thumb { grid-row: auto; }
  .divider-swatch { width: 80px; }
  .inline.right { justify-content: stretch; }
  .inline.right button { flex: 1 1 auto; }
  .inline.right button.primary { flex-basis: 100%; white-space: normal; }
  .tab-hint { margin-left: 0; flex-basis: 100%; padding-bottom: 6px; }
  .dialog { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.subsection-head .all-inline { margin-left: auto; text-transform: none; font-weight: 500; }
.subsection-head .all-inline + button { margin-left: 10px; }

/* --- editing a status post's design */
.design-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--teal, #1fd2d4); background: rgba(31, 210, 212, .08); }
.design-bar #designBarText { flex: 1 1 320px; }
.design-bar-actions { display: inline-flex; gap: 8px; }

/* --- attachments */
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.msg-attachment { max-width: 320px; max-height: 240px; border-radius: 8px; object-fit: contain; background: #2b2d31; }
.attachments-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
.attachment-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.attachment-row img { width: 56px; height: 40px; object-fit: cover; border-radius: 4px; background: #0d0e10; }
.attachment-row select { width: auto; max-width: 200px; }
.drop-zone { border: 1px dashed var(--line-2); border-radius: 8px; padding: 12px; text-align: center; color: var(--muted); }
.drop-zone.over { border-color: var(--teal, #1fd9f0); color: var(--text); background: rgba(31, 217, 240, .06); }
@media (max-width: 640px) { .attachment-row { grid-template-columns: 56px minmax(0, 1fr); } }

/* --- pop-up windows: wide enough that their contents rarely need scrolling --- */
.dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.dialog.wide { width: min(1080px, calc(100vw - 32px)); }
.dialog.xwide { width: min(1280px, calc(100vw - 32px)); }
/* Lists inside windows grow with the window instead of scrolling in their own little box. */
.dialog .list, .dialog .lib-list, .dialog .lib-list.tall, .dialog .server-checklist { max-height: none; overflow: visible; }
.dialog .lib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); }
.dialog .server-checklist { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Image library: bars and images side by side on wide screens. */
@media (min-width: 1100px) {
  #libraryDialog { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-content: start; }
  #libraryDialog > :not(.lib-section) { grid-column: 1 / -1; }
  #libraryDialog > .lib-section { margin-top: 0; }
  #libraryDialog .lib-list { grid-template-columns: 1fr; }
  #libraryDialog:not([open]) { display: none; }
}

/* --- scrollbars in DYNR Blue --- */
* { scrollbar-color: #1fd9f0 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1fd9f0; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #6ff0f1; background-clip: padding-box; }

.undo-group { display: inline-flex; gap: 6px; margin-left: 12px; }
.undo-group button { min-height: 28px; padding: 2px 10px; }
.state-pill.in_development { border-color: #3498db; color: #9ccbf0; }
.state-pill.cancelled { color: var(--muted); }