:root {
  --bg: #070b16; --panel: #0d1425; --raised: #121b2e; --line: rgba(148,163,184,.16);
  --text: #edf3ff; --muted: #8e9bb2; --pink: #f472b6; --violet: #a78bfa;
  --cyan: #22d3ee; --green: #34d399; --orange: #fbbf24; --red: #fb7185;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; overflow: hidden; color: var(--text); background: radial-gradient(circle at 15% 0, rgba(139,92,246,.16), transparent 31rem), radial-gradient(circle at 90% 10%, rgba(244,114,182,.09), transparent 26rem), var(--bg); color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
.topbar { min-height: 68px; padding: 8px max(22px, calc((100vw - 1500px) / 2)); position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr); align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: rgba(7,11,22,.82); backdrop-filter: blur(20px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; width: max-content; }
.brand .product-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg,var(--violet),var(--pink)); box-shadow: 0 9px 24px rgba(139,92,246,.24); font-size: 9px; font-weight: 900; }
.brand strong { display: flex; align-items: baseline; gap: 5px; font-size: 14px; letter-spacing: -.03em; }.brand strong em { color: var(--pink); font: 800 9px/1 Inter,sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.topbar .global-tool-nav { justify-self: center; }.topbar .global-auth-actions { justify-self: end; }
.json-page .global-tool-nav { --header-ink:#151f36; --header-muted:#8e9bb2; --header-surface:#151f36; --header-active-ink:#fff; --header-accent:#f472b6; }
.json-page .global-auth-actions { --header-ink:#edf3ff; --header-muted:#8e9bb2; --header-surface:#151f36; --header-line:rgba(148,163,184,.2); --header-accent:#f472b6; }
.playground-shell { width: min(1500px, calc(100% - 44px)); height: calc(100vh - 68px); margin: 0 auto; padding-bottom: 18px; display: flex; flex-direction: column; overflow: hidden; }
.hero { padding: 12px 0; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 8px; color: var(--pink); font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.hero-copy { min-width: 0; }
.hero h1 { margin: 0; max-width: none; font-size: clamp(25px,2.7vw,38px); line-height: 1.04; letter-spacing: -.05em; }.hero h1 em { color: transparent; background: linear-gradient(100deg,var(--violet),var(--pink)); background-clip: text; font-style: normal; }
.hero-copy > p:last-child { max-width: 780px; margin: 7px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.hero-tools { flex: none; display: flex; align-items: center; gap: 10px; }
.hero-tools .seo-guide-button { min-height: 38px; margin: 0; white-space: nowrap; }
.status-card { min-width: 190px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(52,211,153,.24); border-radius: 11px; background: rgba(52,211,153,.06); }.status-card.invalid { border-color: rgba(251,113,133,.3); background: rgba(251,113,133,.07); }.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px var(--green); }.invalid .status-dot { background: var(--red); box-shadow: 0 0 16px var(--red); }.status-card div { display: grid; gap: 2px; }.status-card strong { font-size: 11px; }.status-card small { color: var(--muted); font-size: 9px; }
.workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); gap: 14px; }
.panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg,rgba(17,26,46,.93),rgba(10,16,30,.96)); box-shadow: 0 22px 65px rgba(0,0,0,.2); }
.panel.is-maximized { width: auto; height: auto; max-width: none; max-height: none; position: fixed; z-index: 18; top: var(--maximized-top,68px); right: 0; bottom: 0; left: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; background: var(--panel); box-shadow: none; }
.panel.is-maximized .panel-header { padding-right: 24px; padding-left: 24px; }
.editor-panel.is-maximized .editor-wrap { background: rgba(4,8,18,.82); }
.panel-header { min-height: 64px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }.panel-header > div:first-child { display: flex; align-items: center; gap: 10px; }.panel-header h2 { margin: 0; font-size: 15px; letter-spacing: -.03em; }.panel-header .eyebrow { margin-bottom: 2px; }.step { width: 31px; height: 31px; display: grid; place-items: center; color: var(--pink); border: 1px solid rgba(244,114,182,.2); border-radius: 9px; background: rgba(244,114,182,.07); font: 800 9px ui-monospace,monospace; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.actions button, .selected-path button { min-height: 32px; padding: 0 11px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: var(--raised); font-size: 10px; font-weight: 750; cursor: pointer; }.actions button:hover { border-color: var(--pink); }.actions .quiet { color: var(--muted); background: transparent; }.actions .primary { border-color: transparent; background: linear-gradient(135deg,#8b5cf6,#db57a3); box-shadow: 0 8px 22px rgba(139,92,246,.22); }
.editor-wrap { min-height: 0; flex: 1; position: relative; overflow: hidden; background: rgba(4,8,18,.64); }
#editor-line-numbers { width: 46px; margin: 0; padding: 20px 10px 60px 0; position: absolute; z-index: 2; inset: 0 auto 0 0; overflow: hidden; color: #64748b; border-right: 1px solid var(--line); background: rgba(4,8,18,.38); user-select: none; pointer-events: none; text-align: right; font: 12.5px/1.72 "SFMono-Regular",Consolas,"Liberation Mono",monospace; }
#error-line { height: 21.5px; position: absolute; z-index: 1; top: calc(20px + var(--error-row, 0) * 21.5px - var(--editor-scroll-top, 0px)); right: 0; left: 0; border-top: 1px solid rgba(251,113,133,.18); border-bottom: 1px solid rgba(251,113,133,.18); background: rgba(251,113,133,.1); pointer-events: none; }
#error-line::before { content: ""; width: 2px; height: 18px; position: absolute; top: 1px; left: calc(58px + var(--error-column, 0) * 7.53px - var(--editor-scroll-left, 0px)); border-radius: 2px; background: var(--red); box-shadow: 0 0 9px rgba(251,113,133,.8); }
#error-line::after { content: ""; position: absolute; top: -5px; left: calc(55px + var(--error-column, 0) * 7.53px - var(--editor-scroll-left, 0px)); border-right: 4px solid transparent; border-bottom: 5px solid var(--red); border-left: 4px solid transparent; }
#highlight-layer, #json-input { margin: 0; padding: 20px 20px 60px 58px; position: absolute; inset: 0; overflow: auto; border: 0; white-space: pre; tab-size: 2; font: 12.5px/1.72 "SFMono-Regular",Consolas,"Liberation Mono",monospace; }
#highlight-layer { z-index: 1; color: #cbd5e1; pointer-events: none; }#json-input { z-index: 2; width: 100%; height: 100%; resize: none; color: transparent; caret-color: #fff; background: transparent; outline: 0; -webkit-text-fill-color: transparent; }#json-input::selection { background: rgba(139,92,246,.35); -webkit-text-fill-color: transparent; }
.token-key { color: #f9a8d4; }.token-string { color: #86efac; }.token-number { color: #fcd34d; }.token-boolean { color: #67e8f9; }.token-null { color: #c4b5fd; }
.editor-footer { min-height: 32px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); font: 9px ui-monospace,monospace; }
.path-finder { padding: 10px 14px; border-bottom: 1px solid var(--line); }.path-finder label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }.path-finder > div { position: relative; }.path-finder input { width: 100%; height: 36px; padding: 0 60px 0 12px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: rgba(5,9,19,.55); outline: 0; font-size: 11px; }.path-finder input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(244,114,182,.08); }.path-finder kbd { position: absolute; top: 8px; right: 9px; padding: 3px 6px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; font: 8px ui-monospace,monospace; }
.search-results { max-height: 210px; overflow: auto; padding: 7px; border-bottom: 1px solid var(--line); }.search-summary { position: sticky; top: -7px; z-index: 1; padding: 7px 10px; color: var(--muted); background: var(--panel); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.search-result { width: 100%; padding: 9px 10px; display: grid; grid-template-columns: minmax(70px,.6fr) minmax(120px,1.4fr) auto; align-items: center; gap: 10px; color: var(--text); border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }.search-result:hover,.search-result:focus-visible { background: rgba(244,114,182,.07); outline: 0; }.search-result .search-result-key { overflow: hidden; color: var(--text); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.search-result code { overflow: hidden; color: var(--pink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.search-result .search-result-type { color: var(--muted); font-size: 9px; white-space: nowrap; }
.selected-path { margin: 12px 17px 0; padding: 10px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(34,211,238,.15); border-radius: 9px; background: rgba(34,211,238,.05); }.selected-path span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }.selected-path code { overflow: hidden; color: var(--cyan); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.selected-path button { min-height: 26px; padding: 0 8px; background: transparent; }
.tree-view { flex: 1; overflow: auto; padding: 17px 16px 40px; font: 11px/1.65 "SFMono-Regular",Consolas,monospace; counter-reset: tree-line; }.tree-empty { padding: 70px 20px; color: var(--muted); text-align: center; }.tree-node { margin-left: 16px; }.tree-view > .tree-node { margin-left: 0; }.tree-row { min-height: 25px; padding: 2px 5px; display: flex; align-items: center; gap: 5px; border-radius: 6px; cursor: pointer; white-space: nowrap; }.tree-row:hover, .tree-row.selected { background: rgba(244,114,182,.08); }.tree-row:focus-visible { background: rgba(244,114,182,.08); outline: 1px solid var(--pink); outline-offset: -1px; }.tree-line-number { width: 30px; flex: 0 0 30px; color: #64748b; text-align: right; user-select: none; }.tree-toggle { width: 15px; padding: 0; color: var(--muted); border: 0; background: none; cursor: pointer; font-size: 10px; }.tree-toggle.leaf { visibility: hidden; }.tree-key { color: #f9a8d4; }.tree-punctuation,.tree-meta { color: #64748b; }.tree-string { color: #86efac; }.tree-number { color: #fcd34d; }.tree-boolean { color: #67e8f9; }.tree-null { color: #c4b5fd; }.tree-children[hidden] { display: none; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; padding: 11px 14px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: #172137; box-shadow: 0 15px 40px rgba(0,0,0,.35); font-size: 10px; }
:root[data-theme="light"] { --bg:#f4f6fb; --panel:#fff; --raised:#f5f1fa; --line:rgba(71,85,105,.18); --text:#172033; --muted:#68748a; }
:root[data-theme="light"] body { color-scheme: light; }
:root[data-theme="light"] body { background: radial-gradient(circle at 15% 0,rgba(139,92,246,.1),transparent 31rem),radial-gradient(circle at 90% 10%,rgba(244,114,182,.08),transparent 26rem),var(--bg); }
:root[data-theme="light"] .topbar { background: rgba(255,255,255,.84); }
:root[data-theme="light"] .panel { background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,248,252,.98)); box-shadow: 0 20px 55px rgba(76,62,100,.1); }
:root[data-theme="light"] .editor-wrap { background: #edf1f7; box-shadow: inset 0 0 0 1px rgba(71,85,105,.04); }
:root[data-theme="light"] #editor-line-numbers { color: #64748b; background: #e5eaf2; }
:root[data-theme="light"] .editor-panel.is-maximized .editor-wrap { background: #edf1f7; }
:root[data-theme="light"] #json-input { caret-color: #172033; }
:root[data-theme="light"] #highlight-layer { color: #334155; }
:root[data-theme="light"] .token-key, :root[data-theme="light"] .tree-key { color: #9d174d; font-weight: 700; }
:root[data-theme="light"] .token-string, :root[data-theme="light"] .tree-string { color: #166534; }
:root[data-theme="light"] .token-number, :root[data-theme="light"] .tree-number { color: #a74408; }
:root[data-theme="light"] .token-boolean, :root[data-theme="light"] .tree-boolean { color: #0369a1; font-weight: 700; }
:root[data-theme="light"] .token-null, :root[data-theme="light"] .tree-null { color: #6d28d9; font-weight: 700; }
:root[data-theme="light"] .tree-punctuation, :root[data-theme="light"] .tree-meta { color: #64748b; }
:root[data-theme="light"] .path-finder input { background: #fff; }
:root[data-theme="light"] .json-page .global-tool-nav { --header-ink:#272038; --header-muted:#68748a; --header-surface:#eeeaf3; --header-active-ink:#fff; }
:root[data-theme="light"] .json-page .global-auth-actions { --header-ink:#172033; --header-muted:#68748a; --header-surface:#eeeaf3; --header-line:rgba(71,85,105,.18); }
:root[data-theme="light"] .toast { background: #fff; }
@media (max-width: 1050px) { body { height: auto; min-height: 100vh; overflow: auto; }.playground-shell { height: auto; padding-bottom: 40px; overflow: visible; }.workspace { grid-template-columns: 1fr; }.editor-panel { min-height: 600px; }.tree-panel { min-height: 600px; }.topbar { grid-template-columns: 1fr auto; }.topbar .global-tool-nav { grid-column: 1/-1; grid-row: 2; width: 100%; justify-content: flex-start; overflow: visible; }.hero { align-items: start; } }
@media (max-width: 700px) { .playground-shell { width: min(100% - 24px,1500px); }.hero { padding: 20px 0 14px; display: block; }.hero h1 { font-size: 32px; }.hero-copy > p:last-child { font-size: 11px; }.hero-tools { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0,1fr); }.status-card { min-width: 0; width: 100%; }.panel-header { align-items: flex-start; flex-direction: column; }.actions { width: 100%; flex-wrap: wrap; }.actions button { flex: 1; }.editor-panel { min-height: 540px; }.tree-heading { min-height: 110px; } #highlight-layer,#json-input { padding-left: 18px; font-size: 11px; } #error-line::before { left: calc(18px + var(--error-column,0) * 6.63px - var(--editor-scroll-left,0px)); } #error-line::after { left: calc(15px + var(--error-column,0) * 6.63px - var(--editor-scroll-left,0px)); } }