.data-page [hidden] { display:none !important; }
.data-page { --data-blue:#9ac7ff; --data-gold:#efd38d; --data-purple:#d4b5ff; }
.data-main { padding:62px 0 110px; }
.data-intro { max-width:980px; margin-bottom:32px; }
.data-intro h1 { margin:0 0 16px; font-size:clamp(2.8rem,7vw,6.4rem); line-height:.94; letter-spacing:-.06em; }
.data-intro h1 span { color:var(--accent); }
.data-intro > p { max-width:800px; margin:0; color:var(--muted); font-size:1.08rem; }
.truth-card,.workspace-card,.results-card,.error-card,.info-grid article { border:1px solid var(--line); border-radius:var(--radius); background:rgba(16,23,19,.88); box-shadow:var(--shadow); }
.truth-card { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:24px 28px; margin-bottom:18px; border-color:rgba(198,223,136,.28); background:linear-gradient(145deg,rgba(198,223,136,.07),rgba(16,23,19,.9)); }
.truth-mark { min-width:54px; height:44px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:14px; color:var(--accent); font:800 1.05rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.truth-card h2 { margin:0 0 7px; font-size:1.08rem; }
.truth-card p { margin:0; color:var(--muted); font-size:.9rem; }
.workspace-card,.results-card,.error-card { padding:clamp(18px,4vw,36px); }
.mode-tabs,.view-tabs { display:flex; gap:6px; padding:4px; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.18); }
.mode-tabs { width:max-content; margin-bottom:18px; }
.mode-tab,.view-tab { min-height:40px; padding:0 14px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-weight:750; }
.mode-tab[aria-selected="true"],.view-tab[aria-selected="true"] { color:var(--text); background:var(--panel-2); }
.workspace-toolbar,.result-header,.result-controls,.export-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.workspace-toolbar { margin-bottom:17px; }
.toolbar-actions,.action-row,.export-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.primary-button,.ghost-button,.file-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:12px; border:0; cursor:pointer; font-weight:750; }
.primary-button { background:var(--accent); color:#10160f; }
.ghost-button,.file-button { border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--text); }
.ghost-button:hover,.file-button:hover { border-color:var(--line-strong); background:rgba(255,255,255,.05); }
.primary-button:disabled,.ghost-button:disabled { opacity:.45; cursor:not-allowed; }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.editor-label { display:flex; justify-content:space-between; gap:16px; margin:0 2px 8px; color:var(--muted); font-size:.78rem; font-weight:750; }
#source-text,#output-text { width:100%; resize:vertical; padding:16px; border:1px solid var(--line); border-radius:14px; background:#080d0a; color:var(--text); font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:4; }
#source-text { min-height:430px; }
#output-text { min-height:440px; border:0; border-radius:0; }
#source-text:focus,#output-text:focus,.search-box input:focus,.options-grid select:focus { outline:1px solid var(--accent); border-color:var(--accent); }
.options-grid { display:flex; flex-wrap:wrap; gap:10px 20px; margin:18px 0 0; padding:16px; border:1px solid var(--line); border-radius:14px; }
.options-grid legend { padding:0 7px; color:var(--accent); font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.options-grid label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem; }
.options-grid select { min-height:36px; padding:0 9px; border:1px solid var(--line); border-radius:9px; background:#0b110e; color:var(--text); }
.message { margin-bottom:16px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; color:var(--muted); }
.message.error { color:var(--danger); border-color:rgba(255,155,143,.35); background:rgba(255,155,143,.06); }
.message.success { color:var(--success); border-color:rgba(169,220,145,.35); background:rgba(169,220,145,.05); }
.error-card { display:grid; grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr); gap:22px; margin-top:18px; border-color:rgba(255,155,143,.34); }
.error-card h2 { margin:0; font-size:clamp(1.6rem,3vw,2.3rem); }
.error-card p:not(.result-kicker) { color:var(--muted); }
.error-location { min-width:0; padding:15px; border:1px solid rgba(255,155,143,.2); border-radius:14px; background:#080d0a; }
.error-location strong { color:var(--danger); }
.error-location pre { max-height:180px; overflow:auto; margin:12px 0 0; color:#ffd6d1; font:12.5px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; }
.results-card { margin-top:18px; }
.result-header { align-items:flex-start; }
.result-kicker { margin:0 0 5px; color:var(--accent); font-size:.7rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.result-header h2 { margin:0; font-size:clamp(1.7rem,3vw,2.5rem); }
.result-header p:not(.result-kicker) { margin:7px 0 0; color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(78px,1fr)); gap:8px; }
.stats div { min-width:80px; padding:12px; border:1px solid var(--line); border-radius:13px; text-align:center; background:rgba(255,255,255,.02); }
.stats strong { display:block; font-size:1.2rem; overflow-wrap:anywhere; }
.stats span { color:var(--soft); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }
.warning-list { margin-top:18px; padding:13px 15px; border:1px solid rgba(239,211,141,.3); border-radius:13px; background:rgba(239,211,141,.045); color:var(--warning); font-size:.84rem; }
.warning-list ul { margin:7px 0 0; padding-left:1.2rem; }
.result-controls { margin:22px 0 12px; flex-wrap:wrap; }
.search-box { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.75rem; }
.search-box input { min-width:240px; min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#0b110e; color:var(--text); }
.data-view { min-height:300px; border:1px solid var(--line); border-radius:15px; overflow:auto; background:#080d0a; }
.tree-content { min-width:560px; padding:10px; font:12.5px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.tree-node { border-left:1px solid rgba(220,231,224,.12); margin-left:12px; padding-left:12px; }
.tree-node > summary { list-style:none; cursor:pointer; padding:3px 6px; border-radius:7px; }
.tree-node > summary::-webkit-details-marker { display:none; }
.tree-node > summary:hover,.tree-leaf:hover { background:rgba(255,255,255,.04); }
.tree-toggle { display:inline-block; width:16px; color:var(--accent); }
.tree-key { color:var(--data-blue); }
.tree-type { color:var(--soft); }
.tree-string { color:#bde6aa; }
.tree-number { color:#f0c7ff; }
.tree-boolean { color:#ffd79d; }
.tree-null { color:#9eb0ba; font-style:italic; }
.tree-leaf { display:flex; gap:8px; align-items:flex-start; margin-left:12px; padding:3px 6px; border-left:1px solid rgba(220,231,224,.12); cursor:pointer; overflow-wrap:anywhere; }
.tree-search-results { padding:8px; }
.tree-search-hit { display:grid; grid-template-columns:minmax(180px,.45fr) minmax(0,1fr); gap:12px; padding:8px; border:0; width:100%; color:var(--text); background:transparent; text-align:left; border-bottom:1px solid rgba(220,231,224,.08); }
.tree-search-hit:hover { background:rgba(255,255,255,.035); }
.tree-search-hit code { color:var(--data-blue); overflow-wrap:anywhere; }
.table-wrap { max-height:620px; overflow:auto; }
.data-table { width:100%; min-width:620px; border-collapse:collapse; font:12.5px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }
.data-table th { position:sticky; top:0; z-index:2; padding:9px 11px; background:#121b16; color:var(--accent); text-align:left; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.data-table td { max-width:420px; padding:7px 11px; border-right:1px solid rgba(220,231,224,.08); border-bottom:1px solid rgba(220,231,224,.07); white-space:pre-wrap; overflow-wrap:anywhere; }
.data-table tr:nth-child(even) td { background:rgba(255,255,255,.012); }
.data-table mark { background:rgba(239,211,141,.28); color:inherit; }
.render-note { margin:10px 0 0; color:var(--soft); font-size:.75rem; }
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.action-grid section { padding:15px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.015); }
.action-grid h3 { margin:0 0 10px; font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.export-row { justify-content:flex-start; margin-top:16px; }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.info-grid article { padding:24px; }
.info-grid h2 { margin:0 0 8px; font-size:1rem; }
.info-grid p { margin:0; color:var(--muted); font-size:.84rem; }
@media (max-width:920px) { .result-header,.error-card { grid-template-columns:1fr; flex-direction:column; } .stats { width:100%; } .action-grid,.info-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .data-main { padding-top:38px; } .workspace-card,.results-card,.error-card { padding:15px; } .workspace-toolbar { align-items:stretch; flex-direction:column; } .toolbar-actions,.workspace-toolbar .primary-button { width:100%; } .toolbar-actions > *,.workspace-toolbar .primary-button { flex:1; } .mode-tabs { width:100%; } .mode-tab { flex:1; } .stats { grid-template-columns:repeat(2,1fr); } .result-controls { align-items:stretch; flex-direction:column; } .search-box { align-items:stretch; flex-direction:column; } .search-box input { min-width:0; width:100%; } .view-tabs { width:100%; } .view-tab { flex:1; } .editor-label { align-items:flex-start; flex-direction:column; gap:3px; } }