/* Pastel (pastel.wtf) · Layout: toolbar; three panes (add & layers | Roblox canvas | inspector & Lua editor); footer.
   Black and white with one pastel pink accent taken from the heart in the logo. */
:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0a0a0a;
  --raised: #151515;
  --line: #1f1f1f;
  --line-strong: #2f2f2f;
  --fg: #f2f2f2;
  --muted: #8a8a8a;
  --invert: #ffffff;
  --on-invert: #000000;
  --ring: rgba(255, 255, 255, 0.16);
  --dots: rgba(255, 255, 255, 0.09);
  --code-str: #b3b3b3;
  --code-com: #5f5f5f;
  --shadow: rgba(0, 0, 0, 0.5);
  --screen: #1b1d21;
  --pink: #f6a8c6;
  --pink-soft: rgba(246, 168, 198, 0.14);
  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 12px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #fafafa;
    --raised: #efefef;
    --line: #e6e6e6;
    --line-strong: #cfcfcf;
    --fg: #0a0a0a;
    --muted: #6b6b6b;
    --invert: #000000;
    --on-invert: #ffffff;
    --ring: rgba(0, 0, 0, 0.12);
    --dots: rgba(0, 0, 0, 0.11);
    --code-str: #4d4d4d;
    --code-com: #9a9a9a;
    --shadow: rgba(0, 0, 0, 0.18);
    --screen: #3a3d42;
    --pink: #c4467a;
    --pink-soft: rgba(196, 70, 122, 0.1);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #fafafa;
  --raised: #efefef;
  --line: #e6e6e6;
  --line-strong: #cfcfcf;
  --fg: #0a0a0a;
  --muted: #6b6b6b;
  --invert: #000000;
  --on-invert: #ffffff;
  --ring: rgba(0, 0, 0, 0.12);
  --dots: rgba(0, 0, 0, 0.11);
  --code-str: #4d4d4d;
  --code-com: #9a9a9a;
  --shadow: rgba(0, 0, 0, 0.18);
  --screen: #3a3d42;
  --pink: #c4467a;
  --pink-soft: rgba(196, 70, 122, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
::selection { background: var(--pink-soft); }

.app {
  height: 100%;
  padding-inline: 16px;
  padding-block: 12px 16px;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr) 340px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}
.app.code-open { grid-template-columns: 256px minmax(0, 1fr) min(560px, 40vw); }
.footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: -2px; font-size: 12px; color: var(--muted); }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.footer nav { display: flex; gap: 14px; }
.footer-note { margin-left: auto; }

/* ---------- toolbar ---------- */
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.brand:hover strong::after { opacity: 1; }
.brand strong { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
.brand strong::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); opacity: 0.8; transition: opacity 0.15s; }
.brand span { display: block; font: 12px/18px var(--font-mono); color: var(--muted); }
.mark { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: #000; box-shadow: 0 0 0 1px var(--line-strong); object-fit: cover; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: border-color 0.12s, opacity 0.12s;
}
.btn:hover { border-color: var(--fg); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn.primary { background: var(--invert); color: var(--on-invert); border-color: var(--invert); }
.btn.primary:hover { opacity: 0.86; }
.btn.square { width: 34px; padding: 0; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
.btn.sm svg { width: 14px; height: 14px; }

/* ---------- panels ---------- */
.panel {
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.seg { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.seg button {
  flex: 1; height: 32px; border: 0; border-radius: 8px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted); font-size: 13px; font-weight: 500;
}
.seg button:hover { color: var(--fg); }
.seg button[aria-selected="true"] { background: var(--invert); color: var(--on-invert); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
h2 { margin: 6px 0 0; font: 500 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.palette { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 8px; padding: 12px 14px 16px; }
.pal-hint { margin: 0; font-size: 12px; color: var(--muted); }
.pal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pal button {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  font-size: 12px; font-weight: 500; text-align: left;
  transition: border-color 0.12s;
}
.pal button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal button:hover { border-color: var(--fg); }
.pal button svg { width: 16px; height: 16px; flex-shrink: 0; }
.pal button[aria-disabled="true"] { opacity: 0.35; }

.tree { position: relative; flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1px; padding: 8px; }
.tree-h { margin: 10px 8px 4px; font: 500 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tree-h:first-child { margin-top: 2px; }
.node {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 28px; padding: 0 8px 0 calc(8px + var(--d) * 14px);
  border: 0; border-radius: 6px; background: transparent;
  font-size: 13px; text-align: left;
}
.node:hover { background: var(--raised); }
.node svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.node .n-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .n-meta { flex-shrink: 0; font: 11px var(--font-mono); color: var(--muted); white-space: nowrap; }
.node.off .n-name { color: var(--muted); }
.node.is-active-tab .n-name { font-weight: 600; }
.node[aria-current="true"] { background: var(--invert); color: var(--on-invert); }
.node[aria-current="true"] svg, .node[aria-current="true"] .n-meta, .node.off[aria-current="true"] .n-name { color: inherit; opacity: 0.65; }

/* ---------- canvas ---------- */
.stage {
  position: relative; min-width: 0; min-height: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1px, transparent 1.3px);
  background-size: 18px 18px;
  overflow: hidden;
}
.stage-bar { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.stage-bar > * { pointer-events: auto; }
.mini-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); }
.mini-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; }
.mini-seg button[aria-pressed="true"] { background: var(--invert); color: var(--on-invert); }
.stage-bar select { width: auto; height: 32px; font-size: 12px; }
.stage-meta { position: absolute; left: 14px; bottom: 10px; margin: 0; font: 11px var(--font-mono); color: var(--muted); pointer-events: none; }
.ob-scale { position: absolute; }
.ob-zoom { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* ---------- inspector ---------- */
.props { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: grid; align-content: start; gap: 14px; }
.insp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.insp-head > div:first-child { flex: 1 1 150px; min-width: 0; }
.insp-head p { margin: 0; font: 11px var(--font-mono); color: var(--muted); }
.insp-head h3 { margin: 3px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.insp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.insp-actions .btn.square { width: 30px; height: 30px; }
.insp-actions .btn svg { width: 15px; height: 15px; }
.insp-sec { margin: 8px 0 -4px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.field { display: grid; gap: 6px; min-width: 0; }
.field > label { font: 500 12px var(--font-mono); }
.field small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.field.bool { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.field.bool label { display: grid; gap: 2px; font: 500 12px var(--font-mono); }
.field.bool label small { font-family: var(--font-ui); font-weight: 400; }

input[type="text"], input[type="number"], select, textarea {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--bg); color: var(--fg); font-size: 13px;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; font: 12.5px/1.5 var(--font-mono); }
textarea.code-in { tab-size: 4; white-space: pre; overflow-wrap: normal; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px var(--pink-soft); }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row > input { min-width: 0; }
.row .unit { flex-shrink: 0; font: 11px var(--font-mono); color: var(--muted); }
.color-row input[type="color"] { width: 42px; height: 34px; flex-shrink: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); }
.icon-prev { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; }
.icon-prev svg { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; font: 12px var(--font-mono); cursor: pointer; }
.chips input { margin: 0; accent-color: var(--fg); }
.deps { display: grid; gap: 6px; }
.dep-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 34px; gap: 6px; }

input.switch {
  appearance: none; -webkit-appearance: none; position: relative; margin: 0;
  width: 36px; height: 20px; border-radius: 999px; background: var(--line-strong);
  transition: background 0.15s;
}
input.switch::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}
input.switch:checked { background: var(--invert); }
input.switch:checked::after { transform: translateX(16px); background: var(--on-invert); }

.code-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font: 12px var(--font-mono); color: var(--muted); }
.warnings { margin: 0; padding: 10px 14px 10px 30px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: 12.5px; }
.editor { position: relative; flex: 1; min-height: 0; }
.code, .code-input { position: absolute; inset: 0; margin: 0; padding: 14px; font: 12px/1.65 var(--font-mono); tab-size: 4; white-space: pre; overflow-wrap: normal; letter-spacing: 0; }
.code { overflow: hidden; pointer-events: none; }
.code-input { width: 100%; height: 100%; border: 0; border-radius: 0; resize: none; overflow: auto; background: transparent; color: transparent; caret-color: var(--fg); -webkit-text-fill-color: transparent; }
.code-input:focus-visible { box-shadow: inset 0 0 0 2px var(--pink-soft); }
.code-input::selection { background: var(--pink-soft); -webkit-text-fill-color: transparent; }
.code-status { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--font-ui); }
.code-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-status i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.code-status.ok i { background: var(--pink); }
.code-status.busy i { background: var(--fg); animation: pulse 0.9s ease-in-out infinite alternate; }
.code-status.error { color: var(--fg); }
.code-status.error i { background: transparent; box-shadow: inset 0 0 0 2px var(--fg); }
@keyframes pulse { to { opacity: 0.25; } }
.code-actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.code .k { font-weight: 600; }
.code .s, .code .n { color: var(--code-str); }
.code .c { color: var(--code-com); font-style: italic; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 9px 16px; border-radius: 999px;
  background: var(--invert); color: var(--on-invert);
  font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px var(--shadow);
}

@media (max-width: 1240px) { .app { grid-template-columns: 240px minmax(0, 1fr) 320px; } .app.code-open { grid-template-columns: 220px minmax(0, 1fr) min(480px, 40vw); } }
@media (max-width: 900px) {
  html, body { height: auto; }
  .app { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .stage { order: 1; aspect-ratio: 1 / 0.95; }
  .side { order: 2; max-height: 560px; }
  .inspector { order: 3; }
  .props { max-height: 640px; }
  .editor { height: 520px; flex: none; }
  .app.code-open { grid-template-columns: minmax(0, 1fr); }
  .footer-note { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Obsidian preview ----------
   Numbers below are taken 1:1 from Library.lua (sizes, paddings); colors come from the theme as --o-* variables.
   1 CSS px = 1 Roblox offset px. */
.ob-zoom {
  color: var(--o-font);
  font-family: var(--o-ff);
  font-weight: var(--o-fw);
  font-style: var(--o-fs);
  font-size: 14px;
  line-height: 1;
  text-align: left;
  -webkit-user-select: none; user-select: none;
}
.ob-zoom svg { display: block; width: 100%; height: 100%; }
.ob-screen { position: relative; }
.ob-screen:not(.plain) {
  overflow: hidden;
  background: var(--screen) linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.25));
  border-radius: 6px;
}
.ob-screen:not(.plain).cursor-hidden, .ob-screen:not(.plain).cursor-hidden * { cursor: none !important; }
.ob-dpi { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ob-zoom .is-sel { outline: 1px dashed rgba(255, 255, 255, 0.9); outline-offset: 3px; }
.ob-zoom .ob.is-sel, .ob-zoom .ob-load.is-sel { outline: 1px dashed var(--fg); outline-offset: 6px; }
.ob-screen:not(.plain) .ob.is-sel, .ob-screen:not(.plain) .ob-load.is-sel { outline-color: rgba(255, 255, 255, 0.9); }
.ob-zoom .ob-box.is-sel, .ob-zoom .ob-holder.is-sel .ob-box, .ob-zoom .ob-depgroup.is-sel { outline: 1px dashed rgba(255, 255, 255, 0.9); outline-offset: 1px; }
.ob-zoom .ob-holder.is-sel { outline: 0; }
.ob-zoom .ob-tab.is-sel, .ob-zoom .ob-tbtn.is-sel { outline-offset: -3px; }
.ob-zoom .ob-el:not(.is-sel):hover { outline: 1px solid rgba(255, 255, 255, 0.18); outline-offset: 3px; }
.ob-zoom [data-sel], .ob-zoom [data-tab], .ob-zoom [data-subtab], .ob-zoom [data-collapse] { cursor: pointer; }

.ob { position: relative; width: var(--W); height: var(--H); background: var(--o-win); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-hl { position: absolute; left: 0; right: 0; height: 1px; background: var(--o-line); z-index: 3; }
.ob-vl { position: absolute; left: var(--S); top: 0; width: 1px; height: calc(var(--H) - 21px); background: var(--o-line); z-index: 2; }
.ob-title { position: absolute; left: 0; top: 0; width: var(--S); height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ob-wicon { width: 30px; height: 30px; flex-shrink: 0; }
.ob-wletter { width: 30px; height: 30px; font-size: 30px; line-height: 30px; text-align: center; }
.ob-wtitle { font-size: 20px; line-height: 48px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.ob-asset { display: block; width: 100%; height: 100%; padding: 15%; border-radius: 3px; background: var(--o-main); color: var(--o-dim); }
.ob-right { position: absolute; left: calc(var(--S) + 9px); top: 8px; width: calc(var(--W) - var(--S) - 58px); height: 32px; display: flex; align-items: center; gap: 8px; }
.ob-tabinfo { flex-shrink: 0; height: 32px; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ob-ti-n, .ob-ti-d { font-size: 14px; line-height: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-ti-d { color: var(--o-font-50); }
.ob-search {
  position: relative; flex-shrink: 0; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--o-main); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line);
  color: var(--o-dim); white-space: pre; overflow: hidden;
}
.ob-search svg { position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; color: var(--o-font); opacity: 0.5; }
.ob-move { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; color: var(--o-line); }
.ob-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 0 var(--R) var(--R); background: var(--o-foot);
  font-size: 14px; line-height: 20px; white-space: pre; color: var(--o-font-50);
}
.ob-resize { position: absolute; right: calc(var(--R) / 4); top: 0; width: 20px; height: 20px; padding: 2px; color: var(--o-font-50); }
.ob-btn .ob-asset { width: 14px; height: 14px; flex-shrink: 0; padding: 1px; }

.ob-tabs { position: absolute; left: 0; top: 49px; width: var(--S); height: calc(var(--H) - 70px); background: var(--o-bg); overflow: hidden auto; scrollbar-width: none; display: flex; flex-direction: column; }
.ob-tab { position: relative; height: 40px; flex-shrink: 0; }
.ob-tab.on { background: var(--o-main); }
.ob-tab-i { position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; color: var(--o-accent); opacity: 0.5; }
.ob-tab-n { position: absolute; left: 42px; top: 11px; height: 18px; font-size: 16px; line-height: 18px; white-space: pre; opacity: 0.5; }
.ob-tab.compact .ob-tab-i { left: 6px; right: 6px; top: 6px; bottom: 6px; width: auto; height: auto; }
.ob-tab.on .ob-tab-i, .ob-tab.on .ob-tab-n { opacity: 1; }
.ob-tab:not(.on):hover .ob-tab-i, .ob-tab:not(.on):hover .ob-tab-n { opacity: 0.75; }
.ob-tabind { position: absolute; right: calc(100% + 2px); top: 50%; transform: translateY(-50%); border-radius: 99px; background: var(--o-accent); }

.ob-cont { position: absolute; left: calc(var(--S) + 1px); top: 49px; width: calc(var(--W) - var(--S) - 1px); height: calc(var(--H) - 70px); background: var(--o-cont); overflow: hidden; }
.ob-cols { position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; }
.ob-col { position: absolute; top: 0; bottom: 0; padding: 4px 2px; display: flex; flex-direction: column; gap: 2px; overflow: hidden auto; scrollbar-width: none; }
.ob-col::-webkit-scrollbar, .ob-tabs::-webkit-scrollbar, .ob-keytab::-webkit-scrollbar { display: none; }
.ob-col.l { left: 0; width: var(--colL); }
.ob-col.r { left: var(--colR); right: 0; }
.ob-holder { flex-shrink: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 6px; }
.ob-keytab { position: absolute; inset: 0; padding: 0 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden auto; scrollbar-width: none; }
.ob-keytab > * { width: 100%; }

.ob-warn {
  position: absolute; left: 2px; top: 7px; width: calc(100% - 5px); z-index: 1; overflow: hidden;
  padding: 4px 6px; border-radius: var(--R);
  background: rgb(127, 0, 0); box-shadow: 0 0 0 1px rgb(255, 50, 50), 0 0 0 1.5px rgb(85, 0, 0);
}
.ob-warn.normal { background: var(--o-bg); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-warn-t { height: 14px; font-size: 14px; line-height: 14px; color: rgb(255, 50, 50); white-space: pre; text-shadow: 1px 0 rgb(169, 0, 0), -1px 0 rgb(169, 0, 0), 0 1px rgb(169, 0, 0), 0 -1px rgb(169, 0, 0); }
.ob-warn.normal .ob-warn-t { color: var(--o-font); text-shadow: 1px 0 var(--o-line), -1px 0 var(--o-line), 0 1px var(--o-line), 0 -1px var(--o-line); }
.ob-warn-x { margin-top: 2px; font-size: 14px; line-height: 14px; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }

.ob-box { background: var(--o-bg); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-gtop { position: relative; padding: 6px; }
.ob-gicon { position: absolute; left: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--o-accent); }
.ob-gtexts { padding: 3px 6px; }
.ob-gname { padding-bottom: 1px; font-size: 15px; line-height: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-gdesc { font-size: 14px; line-height: 14px; color: var(--o-font-50); white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-garrow { position: absolute; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; transform: rotate(180deg); }
.ob-garrow.up { transform: none; }
.ob-sep { height: 1px; background: var(--o-line); }
.ob-body { padding: 7px; display: flex; flex-direction: column; gap: 8px; }
.ob-depgroup { display: flex; flex-direction: column; gap: 8px; padding: 7px 7px 11px; background: var(--o-bg); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-dep { display: flex; flex-direction: column; gap: 8px; }
.ob-dep.is-sel { outline-offset: 2px; }
.ob-nest { padding: 4px 0; flex-shrink: 0; }

.ob-tbtns { display: flex; height: 34px; }
.ob-tbtn { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--o-main); }
.ob-tbtn:first-child { border-top-left-radius: var(--R); }
.ob-tbtn:last-child { border-top-right-radius: var(--R); }
.ob-tbtn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--o-line); }
.ob-tbtn.on { background: transparent; }
.ob-tbtn.on::after { content: none; }
.ob-tbicon { width: 18px; height: 18px; flex-shrink: 0; color: var(--o-accent); opacity: 0.5; }
.ob-tbicon.sm { width: 16px; height: 16px; }
.ob-tbname { font-size: 15px; line-height: 16px; white-space: pre; opacity: 0.5; }
.ob-tbtn.on .ob-tbicon, .ob-tbtn.on .ob-tbname { opacity: 1; }
.ob-tbody { margin-top: 1px; }

/* elements */
.ob-el { position: relative; flex-shrink: 0; }
.ob-switch, .ob-check { height: 18px; }
.ob-tl { position: absolute; top: 0; height: 18px; line-height: 18px; white-space: pre; color: var(--o-font-60); }
.ob-switch .ob-tl { left: 0; width: calc(100% - 40px); }
.ob-check .ob-tl { left: 26px; width: calc(100% - 26px); }
.ob-el.on .ob-tl { color: var(--o-font); }
.ob-el.risky .ob-tl { color: var(--o-red-60); }
.ob-el.risky.on .ob-tl { color: var(--o-red); }
.ob-el.dis .ob-tl { color: var(--o-font-20); }
.ob-el.dis.risky .ob-tl { color: var(--o-red-20); }
.ob-sw { position: absolute; right: 0; top: 0; width: 32px; height: 18px; border-radius: 9px; background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); }
.ob-ball { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--o-font); }
.ob-el.on .ob-sw { background: var(--o-accent); box-shadow: 0 0 0 1px var(--o-accent); }
.ob-el.on .ob-ball { left: 16px; }
.ob-el.dis .ob-sw { background: var(--o-main-25); box-shadow: 0 0 0 1px var(--o-line-25); }
.ob-el.dis.on .ob-sw { background: var(--o-accent-25); box-shadow: 0 0 0 1px var(--o-accent-25); }
.ob-el.dis .ob-ball { background: var(--o-dim); }
.ob-cb { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); }
.ob-cb svg { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; opacity: 0; }
.ob-el.on .ob-cb svg { opacity: 1; }
.ob-el.dis .ob-cb { background: var(--o-bg); box-shadow: 0 0 0 1px var(--o-line-50); }
.ob-el.dis.on .ob-cb svg { opacity: 0.2; }

.ob-addons { position: absolute; right: 0; top: 0; display: flex; gap: 6px; }
.ob-swatch { position: relative; width: 18px; height: 18px; border-radius: var(--R2); overflow: hidden; }
.ob-checker { position: absolute; inset: 0; background: repeating-conic-gradient(#fff 0 25%, #ccc 0 50%) 0 0 / 9px 9px; }
.ob-key { height: 18px; padding: 0 4.5px; border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); font-size: 14px; line-height: 18px; color: var(--o-font-60); white-space: pre; }
.ob-key:hover { color: var(--o-font); }

.ob-brow { height: 21px; display: flex; gap: 9px; }
.ob-bgroup { flex: 1 1 0; min-width: 0; display: flex; gap: 9px; }
.ob-btn {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line);
  line-height: 21px; white-space: pre; color: var(--o-font-60);
}
.ob-btn:hover { color: var(--o-font); }
.ob-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ob-btn.risky { color: var(--o-red-60); }
.ob-btn.risky:hover { color: var(--o-red); }
.ob-btn.dis, .ob-btn.dis:hover { background: var(--o-bg); box-shadow: 0 0 0 1px var(--o-line-50); color: var(--o-font-20); }
.ob-btn.dis.risky { color: var(--o-red-20); }
.ob-bkey { flex-shrink: 0; height: 21px; border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); line-height: 21px; text-align: center; white-space: pre; overflow: hidden; color: var(--o-font-60); }

.ob-label { height: 18px; line-height: 18px; white-space: pre; }
.ob-label.wrap { height: auto; padding: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-label.center { text-align: center; }

.ob-din { position: relative; height: 6px; }
.ob-dl { position: absolute; top: 1px; height: 4px; border: 1px solid var(--o-line); background: var(--o-main); }
.ob-dt { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); font-size: 14px; line-height: 14px; white-space: pre; color: var(--o-font-50); }

.ob-slider { height: 33px; }
.ob-slider.compact { height: 15px; }
.ob-sl, .ob-il { height: 14px; line-height: 14px; white-space: pre; }
.ob-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); }
.ob-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--R2); background: var(--o-accent); }
.ob-sv, .ob-lbar-t {
  position: absolute; inset: 0; text-align: center; line-height: 15px; white-space: pre;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}
.ob-input, .ob-dd { height: 39px; }
.ob-ib, .ob-db {
  position: absolute; left: 0; right: 0; bottom: 0; height: 21px;
  border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); white-space: pre;
}
.ob-ib { padding: 4px 8px 3px; line-height: 14px; }
.ob-zoom .ph { color: var(--o-dim); }
.ob-db { padding: 0 4px 0 8px; line-height: 21px; }
.ob-db > svg { position: absolute; right: 4px; top: 2.5px; width: 16px; height: 16px; opacity: 0.5; }
.ob-dimg { position: absolute; left: 4px; top: 3px; width: 16px; height: 16px; }
.ob-db.has-img .tx { margin-left: 14px; }
.ob-el.dis .ob-sl, .ob-el.dis .ob-il, .ob-el.dis .ob-sv, .ob-el.dis .ob-ib, .ob-el.dis .ob-db .tx { color: var(--o-font-20); }
.ob-el.dis .ob-fill { background: var(--o-line); }
.ob-el.dis .ob-ib { background: var(--o-bg); box-shadow: 0 0 0 1px var(--o-line-50); }
.ob-el.dis .ob-db > svg { opacity: 0.2; }

.ob-media .ob-imgbox { position: absolute; inset: 0; padding: 4px 8px 3px; border-radius: var(--R2); box-shadow: 0 0 0 1px var(--o-line); overflow: hidden; }
.ob-media .ob-framebox { position: absolute; inset: 0; padding: 4px 8px 3px; background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); }
.ob-media img, .ob-imgicon { display: block; width: 100%; height: 100%; }
.ob-media-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--o-dim); }
.ob-media-ph svg { width: 28px; height: 28px; }
.ob-pass { outline: 1px dashed var(--o-line); outline-offset: -1px; }
.ob-keybox { width: 75% !important; height: 21px; display: flex; gap: 8px; }
.ob-kin, .ob-kbtn { height: 21px; border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); line-height: 21px; white-space: pre; }
.ob-kin { flex: 1; padding: 0 8px; }
.ob-kbtn { width: 63px; flex-shrink: 0; text-align: center; color: var(--o-font-60); }

/* dialogs */
.ob-dlg-over { position: absolute; inset: 0; z-index: 9; border-radius: var(--R); background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; }
.ob-dlg { width: 300px; padding: 15px; display: flex; flex-direction: column; gap: 10px; background: var(--o-bg); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-dlg-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 5px; }
.ob-dlg-row { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.ob-dlg-i { width: 16px; height: 16px; flex-shrink: 0; }
.ob-dlg-t { font-size: 18px; line-height: 18px; white-space: pre-wrap; }
.ob-dlg-d { font-size: 14px; line-height: 14px; color: var(--o-font-80); white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-dlg-body { display: flex; flex-direction: column; gap: 8px; padding-bottom: 5px; }
.ob-dlg-sep { height: 1px; background: var(--o-line); }
.ob-dlg-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 5px; }
.ob-fbtn { position: relative; height: 26px; padding: 0 15px; border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; font-size: 14px; line-height: 26px; white-space: pre; overflow: hidden; }
.ob-fbtn.primary { background: var(--o-font); color: var(--o-bg); }
.ob-fbtn.secondary { background: var(--o-main); color: var(--o-font); }
.ob-fbtn.destructive { background: var(--o-dest); color: #fff; }
.ob-fbtn.ghost { background: var(--o-bg); color: var(--o-font); }
.ob-fbtn.wait { opacity: 0.5; }
.ob-fbar { position: absolute; left: 0; bottom: 0; height: 2px; width: 35%; background: var(--o-accent); }

/* notifications, overlays, keybind menu */
.ob-notes { position: absolute; top: 6px; width: 300px; display: flex; flex-direction: column; gap: 8px; }
.ob-notes.right { right: 6px; align-items: flex-end; transform-origin: 100% 0; }
.ob-notes.left { left: 6px; align-items: flex-start; transform-origin: 0 0; }
.ob-note { width: fit-content; max-width: 300px; padding: 8px 16px 8px 8px; display: flex; flex-direction: column; gap: 4px; background: var(--o-main); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-nrow { display: flex; align-items: center; gap: 8px; }
.ob-nbig { width: 24px; height: 24px; flex-shrink: 0; }
.ob-ntexts { display: flex; flex-direction: column; gap: 4px; max-width: var(--nmax); min-width: 0; }
.ob-ntitle { position: relative; display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-nicon { width: 15px; height: 15px; flex-shrink: 0; position: relative; top: 1px; }
.ob-ndesc { font-size: 14px; line-height: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-ntimer { position: relative; height: 7px; }
.ob-ntimer::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 4px; border: 1px solid var(--o-line); background: var(--o-bg); }
.ob-ntimer i { position: absolute; left: 1px; top: 3px; height: 2px; max-width: calc(100% - 2px); background: var(--o-accent); }

.ob-floats { position: absolute; left: 6px; top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; transform-origin: 0 0; }
.ob-dlabel { position: relative; padding-block: 6px; font-size: 15px; line-height: 15px; white-space: pre; background: var(--o-bg); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-dlicon { position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; }
.ob-dlicon.l { left: 12px; }
.ob-dlicon.r { right: 12px; }
.ob-dbutton { height: 32px; font-size: 16px; line-height: 32px; text-align: center; white-space: pre; background: var(--o-bg); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-menu { position: relative; min-width: 120px; width: max-content; background: var(--o-bg); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-menu-t { height: 34px; padding: 0 12px; font-size: 15px; line-height: 34px; white-space: pre; }
.ob-menu-line { height: 1px; background: var(--o-line); }
.ob-menu-c { padding: 7px; display: flex; flex-direction: column; gap: 7px; min-height: 14px; }
.ob-kbwrap { position: absolute; left: 6px; top: 50%; transform-origin: 0 50%; }
.ob-kbmenu.collapsed { min-width: 160px; height: 34px; }
.ob-kbbtns { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.ob-kbico { width: 18px; height: 18px; display: block; }
.ob-kbico.flip svg { transform: rotate(180deg); }
.ob-kbrow { position: relative; height: 16px; font-size: 14px; line-height: 16px; white-space: pre; color: var(--o-font-50); }
.ob-kbrow.on { color: var(--o-font); }
.ob-kbcheck { position: absolute; left: 0; top: 1px; width: 14px; height: 14px; padding: 2px; border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); }
.ob-kbcheck svg { opacity: 0; }
.ob-kbrow.on .ob-kbcheck svg { opacity: 1; }

/* loading screen */
.ob-load { position: relative; overflow: hidden; background: var(--o-win); border-radius: var(--R); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; }
.ob-lcont { position: absolute; left: 0; top: 0; bottom: 0; }
.ob-ltop { height: 48px; padding-left: 12px; display: flex; align-items: center; gap: 6px; }
.ob-lin { position: absolute; left: 0; right: 0; top: 49px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ob-lspin { width: 64px; height: 64px; }
.ob-lspin-i { display: block; width: 100%; height: 100%; animation: ob-spin 1s linear infinite; }
.ob-spin-default { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--spinner) center / contain no-repeat; mask: var(--spinner) center / contain no-repeat; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-lmsg { font-size: 18px; line-height: 18px; white-space: pre; }
.ob-ldesc { font-size: 14px; line-height: 14px; color: var(--o-font-50); white-space: pre; }
.ob-lbar { position: relative; width: 70%; height: 15px; border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line), 0 0 0 1.5px #000; overflow: hidden; }
.ob-lbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--R2); background: var(--o-accent); }
.ob-lside { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--o-line); background: var(--o-win); }
.ob-lside-c { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ob-lerr { position: absolute; left: 0; right: 0; top: 49px; bottom: 0; }
.ob-lerr-t { position: absolute; left: 15px; top: 15px; font-size: 18px; line-height: 18px; color: var(--o-red); }
.ob-lerr-m { position: absolute; left: 15px; right: 15px; top: 39px; font-size: 14px; line-height: 14px; color: var(--o-font-80); white-space: pre-wrap; }
.ob-lerr-sep { position: absolute; left: 15px; right: 15px; bottom: 48px; height: 1px; background: var(--o-line); }
.ob-lerr-btns { position: absolute; left: 0; right: 15px; bottom: 15px; display: flex; justify-content: flex-end; gap: 8px; }

/* opened menus (Library:AddContextMenu): app.js places them under their anchor */
.ob-pop { position: absolute; z-index: 20; background: var(--o-bg); box-shadow: 0 0 0 1px var(--o-line); }
.ob-zoom .pop-anchor { cursor: pointer; }
.ob-db.open { border-radius: var(--R2) var(--R2) 0 0; }
.ob-db.open > svg { opacity: 1; transform: rotate(180deg); }
.ob-key.open, .ob-bkey.open { border-radius: var(--R2) 0 0 var(--R2); color: var(--o-font); }
.ob-swatch.open { border-radius: var(--R2) var(--R2) 0 0; }
.ob-ddlist { overflow: hidden auto; border-radius: 0 0 var(--R2) var(--R2); scrollbar-width: thin; scrollbar-color: var(--o-line) transparent; }
.ob-ddrow { position: relative; height: 21px; padding: 0 7px; line-height: 21px; font-size: 14px; white-space: pre; color: var(--o-font-50); cursor: pointer; }
.ob-ddrow.on { background: var(--o-main); color: var(--o-font); }
.ob-ddrow.dis { color: var(--o-font-20); cursor: default; }
.ob-ddrow.last { border-radius: 0 0 var(--R2) var(--R2); }
.ob-ddrow:not(.on):not(.dis):hover { color: var(--o-font-80); }
.ob-ddimg { position: absolute; left: 4px; top: 3px; width: 16px; height: 16px; }
.ob-ddimg + .tx { margin-left: 18px; }
.ob-kmenu { width: 62px; border-radius: 0 var(--R2) var(--R2) var(--R2); overflow: hidden; }
.ob-kmrow { text-align: center; font-size: 14px; color: var(--o-font-50); cursor: pointer; white-space: pre; }
.ob-kmrow.on { background: var(--o-main); color: var(--o-font); }
.ob-cpick { border-radius: 0 0 var(--R2) var(--R2); }
.ob-cp-in { padding: 6px; display: flex; flex-direction: column; gap: 8px; }
.ob-cp-title { height: 8px; font-size: 14px; line-height: 8px; white-space: pre; }
.ob-cp-row { display: flex; gap: 6px; height: 200px; }
.ob-cp-map { position: relative; width: 200px; height: 200px; flex-shrink: 0; cursor: crosshair; background-image: linear-gradient(transparent, #000), linear-gradient(90deg, #fff, transparent); }
.ob-cp-map b { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #000; }
.ob-cp-bar { position: relative; width: 16px; height: 200px; flex-shrink: 0; cursor: pointer; }
.ob-cp-hue { background: linear-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.ob-cp-alpha { background: repeating-conic-gradient(#fff 0 25%, #ccc 0 50%) 0 0 / 8px 8px; }
.ob-cp-alpha i { position: absolute; inset: 0; }
.ob-cp-bar b { position: absolute; left: -1px; right: -1px; height: 1px; margin-top: -1px; background: #fff; box-shadow: 0 0 0 1px #000; }
.ob-cp-info { display: flex; gap: 8px; height: 20px; }
.ob-cpbox { flex: 1; min-width: 0; height: 20px; border-radius: var(--R2); background: var(--o-main); box-shadow: 0 0 0 1px var(--o-line); text-align: center; font-size: 14px; line-height: 20px; white-space: pre; overflow: hidden; }
.ob-cp-foot { position: relative; height: 22px; padding: 0 26px 0 6px; border-radius: 0 0 var(--R2) var(--R2); background: var(--o-foot); text-align: center; font-size: 14px; line-height: 22px; color: var(--o-font-50); white-space: pre; overflow: hidden; }
.ob-cp-foot .ob-resize { top: 1px; }

/* custom cursor (Library.ShowCustomCursor): 11x11 cross with a dark outline */
.ob-cursor { position: absolute; left: -40px; top: -40px; z-index: 50; pointer-events: none; transform: translate(-50%, -50%); }
.ob-cursor.cross { width: 11px; height: 11px; }
.ob-cursor.cross i { position: absolute; background: #000; }
.ob-cursor.cross i:nth-child(1) { left: 0; right: 0; top: 4px; height: 3px; }
.ob-cursor.cross i:nth-child(2) { top: 0; bottom: 0; left: 4px; width: 3px; }
.ob-cursor.cross i:nth-child(3) { left: 1px; right: 1px; top: 5px; height: 1px; background: var(--cross); }
.ob-cursor.cross i:nth-child(4) { top: 1px; bottom: 1px; left: 5px; width: 1px; background: var(--cross); }

.ob-tip {
  position: absolute; z-index: 60; max-width: 320px; padding: 3px 4px 1px;
  border-radius: var(--R2); background: var(--o-bg); box-shadow: 0 0 0 1px var(--o-line);
  font-size: 14px; line-height: 14px; white-space: pre-wrap; pointer-events: none;
}

/* Baseline: with identical box edges, Roblox draws Code text 1px lower than browsers do
   (measured row by row against an in-game screenshot). Shift the text, never the boxes. */
.ob-zoom .tx, .ob-wtitle, .ob-gtexts, .ob-gname, .ob-sl, .ob-il, .ob-ti-n, .ob-ti-d, .ob-ndesc, .ob-menu-t, .ob-lmsg, .ob-ldesc, .ob-dlg-t, .ob-dlg-d { position: relative; top: 1px; }
.ob-tbname { position: relative; top: 2px; } /* 15px titles round one pixel further (.ob-gname adds to .ob-gtexts) */
.ob-tab-n { top: 12px; }
.ob-tl, .ob-dt { top: 1px; }
.ob-tl .ob-addons { top: -1px; }
.ob-sv { inset: 1px 0 -1px; }
.ob-lbar-t { inset: 1px 0 -1px; }

/* Obsidian's default loading spinner (assets/LoadingIcon.png), tinted through a mask. */
.ob-zoom { --spinner: url("data:image/png;base64,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"); }

/* ---------- legal pages (terms.html, privacy.html) ---------- */
.legal-body { height: auto; min-height: 100%; }
.legal-page { max-width: 760px; margin: 0 auto; padding: 20px 16px 28px; display: flex; flex-direction: column; gap: 32px; }
.legal-top .btn { color: var(--fg); text-decoration: none; }
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.legal { display: flex; flex-direction: column; gap: 28px; }
.legal-eyebrow { margin: 0 0 -16px; font: 12px/18px var(--font-mono); color: var(--muted); }
.legal h1 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.legal .legal-lead { margin: -8px 0 0; font-size: 17px; line-height: 1.55; color: var(--fg); padding-left: 14px; border-left: 2px solid var(--pink); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.legal .legal-toc a { padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; color: var(--muted); text-decoration: none; }
.legal .legal-toc a:hover { color: var(--fg); border-color: var(--fg); }
.legal section { scroll-margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal h2 { margin: 0 0 10px; font: 600 18px/1.3 var(--font-ui); letter-spacing: -0.01em; text-transform: none; color: var(--fg); }
.legal p, .legal li { color: var(--muted); line-height: 1.65; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal strong, .legal em { color: var(--fg); }
.legal a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-table { margin: 6px 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; font-size: 13px; }
.legal-table [role="row"] { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--muted); }
.legal-table [role="row"]:first-child { border-top: 0; background: var(--surface); color: var(--fg); font-weight: 500; }
.legal-foot { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .legal h1 { font-size: 28px; }
  .legal-table [role="row"] { grid-template-columns: 1fr; gap: 2px; }
  .legal-table [role="row"]:first-child { display: none; }
  .legal-table [role="row"] > span:first-child { color: var(--fg); font-weight: 500; }
  .footer-note { margin-left: 0; }
}

/* ---------- dashboard (index.html) ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dash-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); text-decoration: none; transition: border-color 0.15s; }
.legal .dash-card { text-decoration: none; }
.dash-card:hover { border-color: var(--pink); }
.dash-card strong { font-size: 16px; font-weight: 600; }
.dash-card span { color: var(--muted); line-height: 1.55; }
.dash-card em { margin-top: auto; font: 12px/18px var(--font-mono); font-style: normal; color: var(--pink); }