:root{--bg:#0f1117;--bg-panel:#1a1b23;--bg-toolbar:#22232d;--bg-input:#14151d;--border:#2e303a;--text:#c9cdd5;--text-dim:#6b7280;--text-bright:#f3f4f6;--accent:#818cf8;--accent-dim:#818cf826;--green:#34d399;--green-dim:#34d39926;--red:#f87171;--red-dim:#f8717126;--yellow:#fbbf24;--mono:ui-monospace, "Cascadia Code", "Fira Code", Consolas, monospace;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--sans);color:var(--text);background:var(--bg);height:100vh;font-size:14px;overflow:hidden}#app{height:100vh}.app-layout{height:100vh;display:flex}.panel{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.divider{background:var(--border);flex-shrink:0;width:1px}.json-editor{background:var(--bg-panel);flex-direction:column;height:100%;display:flex}.toolbar{border-bottom:1px solid var(--border);background:var(--bg-toolbar);flex-direction:column;gap:8px;padding:10px 12px;display:flex}.toolbar-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.toolbar select,.toolbar button,.toolbar .file-btn{font-family:var(--sans);border:1px solid var(--border);background:var(--bg-input);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:5px;padding:5px 10px;font-size:12px;transition:border-color .15s}.toolbar select:hover,.toolbar button:hover:not(:disabled),.toolbar .file-btn:hover{border-color:var(--accent)}.toolbar button:disabled{opacity:.4;cursor:default}.toolbar .btn-clear{color:var(--red)}.status-row{font-size:11px}.status.neutral{color:var(--text-dim)}.status.valid{color:var(--green)}.status.invalid{color:var(--red)}.editor-container{flex:1;position:relative;overflow:hidden}.editor-gutter{z-index:2;background:var(--bg-panel);border-right:1px solid var(--border);-webkit-user-select:none;user-select:none;width:28px;height:100%;font-family:var(--mono);padding-top:12px;font-size:13px;line-height:1.6;position:absolute;top:0;left:0;overflow:hidden}.gutter-line{justify-content:center;align-items:center;height:1.6em;display:flex}.fold-toggle{cursor:pointer;color:var(--text-dim);border-radius:3px;justify-content:center;align-items:center;width:18px;height:18px;font-size:9px;transition:transform .15s,color .15s,background .15s;display:inline-flex;transform:rotate(90deg)}.fold-toggle.folded{transform:rotate(0)}.fold-toggle:hover{color:var(--text-bright);background:var(--accent-dim)}.editor-container textarea,.editor-container .highlight-layer{font-family:var(--mono);tab-size:2;white-space:pre;border:none;margin:0;padding:12px 14px;font-size:13px;line-height:1.6;position:absolute;inset:0 0 0 28px;overflow:auto}.editor-container .highlight-layer{background:var(--bg-panel);color:var(--text);pointer-events:none;z-index:0}.editor-container .highlight-layer code{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:0 0;border-radius:0;padding:0;display:block}.editor-container textarea{color:#0000;caret-color:var(--text-bright);resize:none;z-index:1;-webkit-text-fill-color:transparent;background:0 0;outline:none}.editor-container textarea::placeholder{color:var(--text-dim);-webkit-text-fill-color:var(--text-dim)}.html-preview{flex-direction:column;height:100%;display:flex;overflow:hidden}.preview-toolbar{border-bottom:1px solid var(--border);background:var(--bg-toolbar);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.preview-meta{align-items:center;gap:8px;min-width:0;display:flex}.locale-badge{text-transform:uppercase;background:var(--accent-dim);color:var(--accent);border-radius:4px;flex-shrink:0;padding:2px 7px;font-size:11px;font-weight:600}.url-path{font-family:var(--mono);color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.toggle-source{font-family:var(--sans);border:1px solid var(--border);background:var(--bg-input);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:5px;flex-shrink:0;padding:5px 10px;font-size:12px}.toggle-source:hover{border-color:var(--accent)}.source-view{background:var(--bg-panel);flex:1;padding:16px;overflow:auto}.source-view pre{font-family:var(--mono);color:var(--text);white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.7}.rendered-preview{background:var(--bg-panel);flex:1;padding:20px 24px;overflow-y:auto}.seo-block{background:var(--bg-toolbar);border:1px solid var(--border);border-radius:8px;margin-bottom:24px;padding:16px}.seo-block h3{color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:13px;font-weight:600}.seo-grid{gap:10px;display:grid}.seo-item{flex-direction:column;gap:2px;display:flex}.seo-item label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;font-size:11px;font-weight:600}.seo-item span{color:var(--text);word-break:break-word;font-size:13px}.seo-item .og-image{border-radius:4px;max-width:200px;margin-top:4px}.tag-yes{color:var(--green)!important}.tag-no{color:var(--red)!important}.og-card{border:1px solid var(--border);background:var(--bg-input);border-radius:8px;margin-top:16px;overflow:hidden}.og-card-image img{object-fit:cover;width:100%;height:140px;display:block}.og-card-body{padding:12px}.og-card-site{color:var(--text-dim);text-transform:uppercase;margin-bottom:4px;font-size:11px}.og-card-title{color:var(--text-bright);margin-bottom:4px;font-size:14px;font-weight:600}.og-card-desc{color:var(--text-dim);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;display:-webkit-box;overflow:hidden}.breadcrumbs{margin-bottom:16px}.breadcrumbs ol{gap:4px;font-size:13px;list-style:none;display:flex}.breadcrumbs a{color:var(--accent);text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}.breadcrumbs .sep{color:var(--text-dim);margin:0 4px}.page-info{color:var(--text-dim);flex-wrap:wrap;gap:16px;margin-bottom:20px;font-size:12px;display:flex}.page-content{color:var(--text);line-height:1.7}.content-section{border-left:3px solid #0000;border-radius:4px;margin-bottom:24px;padding:8px 12px}.content-section.section-flash{animation:1s ease-out section-pulse}@keyframes section-pulse{0%{border-left-color:var(--accent);background:var(--accent-dim)}70%{border-left-color:var(--accent);background:var(--accent-dim)}to{background:0 0;border-left-color:#0000}}.section-header-link{cursor:pointer;transition:color .15s;position:relative}.section-header-link:hover{color:var(--accent)!important}.section-header-link .link-icon{opacity:0;font-size:.75em;transition:opacity .15s;position:absolute;top:4px;right:calc(100% + 4px)}.section-header-link:hover .link-icon{opacity:.7}.content-section h1{color:var(--text-bright);margin-bottom:12px;font-size:28px;font-weight:700;line-height:1.2}.content-section h2{color:var(--text-bright);margin-bottom:10px;font-size:22px;font-weight:600;line-height:1.3}.content-section h3{color:var(--text-bright);margin-bottom:8px;font-size:18px;font-weight:600;line-height:1.3}.section-body{font-size:14px}.section-body p{margin-bottom:10px}.section-body p:last-child{margin-bottom:0}.section-body a{color:var(--accent);-webkit-text-decoration:underline #818cf84d;text-decoration:underline #818cf84d}.section-body a:hover{-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.section-body ul,.section-body ol{margin-bottom:10px;padding-left:24px}.section-body li{margin-bottom:4px}.section-body table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px}.section-body table td,.section-body table th{border:1px solid var(--border);text-align:left;padding:8px 12px}.section-body table tr:first-child td{background:var(--bg-toolbar);color:var(--text-bright);font-weight:600}.section-images img{border-radius:6px;max-width:100%;margin-top:8px}.structured-data-block{background:var(--bg-toolbar);border:1px solid var(--border);border-radius:8px;margin-top:32px;padding:16px}.structured-data-block h3{color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:13px;font-weight:600}.structured-data-block pre{font-family:var(--mono);color:var(--text);white-space:pre-wrap;word-break:break-word;background:var(--bg-input);border-radius:6px;margin-bottom:12px;padding:12px;font-size:12px;line-height:1.6}.structured-data-block pre:last-child{margin-bottom:0}.empty-preview{background:var(--bg-panel);flex:1;justify-content:center;align-items:center;height:100%;display:flex}.empty-message{text-align:center;color:var(--text-dim)}.empty-message svg{opacity:.4;margin-bottom:12px}.empty-message p{font-size:14px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3e404a}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6b7280}.token.punctuation{color:#9ca3af}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f87171}.token.boolean,.token.number{color:#c084fc}.token.string,.token.char,.token.inserted{color:#34d399}.token.attr-name{color:#fbbf24}.token.attr-value,.token.attr-value .punctuation{color:#34d399}.token.operator,.token.entity,.token.url{color:#67e8f9}.token.keyword{color:#818cf8}.token.function{color:#60a5fa}.token.regex,.token.important,.token.variable{color:#fbbf24}.token.null-value{color:#9ca3af;font-style:italic}
