.app-layout{height:calc(100vh - var(--header-height,68px));display:flex;overflow:hidden}.editor-panel{background:var(--background);flex-direction:column;width:50%;min-width:200px;display:flex}.editor-header{border-bottom:1px solid var(--border);background:var(--card-bg);flex-shrink:0;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}.editor-title{color:var(--text-muted);letter-spacing:-.01em;margin:0;font-size:.95rem;font-weight:700}.editor-actions{align-items:center;gap:.5rem;display:flex}.upload-btn,.example-btn,.download-btn,.clear-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;align-items:center;gap:.35rem;padding:.4rem .7rem;font-size:.8rem;font-weight:600;transition:all .2s;display:inline-flex}.upload-btn:hover,.example-btn:hover,.download-btn:hover,.clear-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--icon-bg)}.editor-textarea{resize:none;width:100%;color:var(--text);background:var(--background);tab-size:4;border:none;outline:none;flex:1;padding:1.25rem;font-family:JetBrains Mono,Fira Code,SF Mono,Consolas,monospace;font-size:.85rem;line-height:1.7}.editor-textarea::placeholder{color:var(--text-dim);opacity:.6}.editor-footer{border-top:1px solid var(--border);background:var(--card-bg);flex-shrink:0;justify-content:space-between;align-items:center;padding:.5rem 1.25rem;display:flex}.char-count{color:var(--text-dim);font-size:.75rem}.validator-toggle{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:6px;align-items:center;gap:.3rem;padding:.25rem .55rem;font-size:.72rem;font-weight:600;transition:all .2s;display:inline-flex}.validator-toggle:hover{color:var(--primary);border-color:var(--primary);background:var(--icon-bg)}.validator-toggle.active{color:#16a34a;background:#16a34a14;border-color:#16a34a}.validator-toggle.has-errors{color:#d63638;background:#d6363814;border-color:#d63638}.validator-toggle.has-warnings{color:#db8617;background:#db861714;border-color:#db8617}.validator-panel{border-top:1px solid var(--border);background:var(--card-bg);flex-shrink:0;max-height:320px;overflow-y:auto}.validator-header{border-bottom:1px solid var(--border);align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex}.validator-progress-ring{flex-shrink:0;width:64px;height:64px;position:relative}.validator-progress-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:var(--border);stroke-width:6px}.ring-fill{fill:none;stroke:#16a34a;stroke-width:6px;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:263.9px;transition:stroke-dashoffset .6s,stroke .3s}.ring-fill.warn{stroke:#dba617}.ring-fill.bad{stroke:#d63638}.ring-text{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ring-pct{color:var(--text);font-size:.95rem;font-weight:700;line-height:1}.ring-label{color:var(--text-dim);margin-top:2px;font-size:.55rem}.validator-summary{flex-direction:column;gap:.2rem;display:flex}.summary-title{color:var(--text);font-size:.85rem;font-weight:700}.summary-sub{color:var(--text-dim);font-size:.75rem}.validator-checklist{padding:.5rem}.check-group{padding:0 1.25rem}.check-group-header{flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem 0 .25rem;display:flex}.check-group-title{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:.72rem;font-weight:700}.check-group-count{color:var(--text-dim);background:var(--icon-bg);border-radius:4px;padding:.1rem .4rem;font-size:.65rem;font-weight:600}.check-group-desc{color:var(--text-dim);width:100%;font-size:.65rem}.check-item{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:flex-start;gap:.5rem;padding:.4rem 0;display:flex}.check-item:last-child{border-bottom:none}.check-icon{border-radius:50%;flex-shrink:0;place-items:center;width:18px;height:18px;margin-top:2px;font-size:.65rem;font-weight:700;line-height:1;display:grid}.check-icon.pass{color:#16a34a;background:#dcfce7}.check-icon.fail{color:#d63638;background:#fee2e2}.check-icon.warn{color:#a16207;background:#fef9c3}.check-icon.info{color:#4338ca;background:#e0e7ff}.check-text{flex:1;min-width:0}.check-label-row{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.check-label{color:var(--text);align-items:center;font-size:.78rem;line-height:1.4;display:flex}.check-add-btn{color:#3858e9;cursor:pointer;white-space:nowrap;background:#3859e914;border:1px solid #3858e9;border-radius:5px;flex-shrink:0;align-items:center;gap:.2rem;padding:.2rem .5rem;font-size:.68rem;font-weight:600;transition:all .2s;display:inline-flex}.check-add-btn:hover{color:#fff;background:#3858e9}.check-add-btn.added{color:#16a34a;background:#16a34a1a;border-color:#16a34a}.check-group:first-child .check-failed .check-label{color:#d63638}.check-detail{color:var(--text-dim);margin-top:1px;font-size:.7rem}.check-detail a{color:#5b8def;text-decoration:underline}.check-tip{width:100%;color:var(--text-muted);white-space:pre-line;background:#3859e90f;border-left:2px solid #3858e9;border-radius:0 4px 4px 0;align-items:flex-start;gap:.35rem;margin:.25rem 0 0 1.5rem;padding:.4rem .55rem;font-size:.7rem;line-height:1.5;display:flex}.check-tip svg{color:#3858e9;flex-shrink:0;margin-top:1px}.check-passed .check-label{color:var(--text-dim)}.resize-handle{cursor:col-resize;background:var(--border);z-index:10;flex-shrink:0;justify-content:center;align-items:center;width:5px;transition:background .15s;display:flex;position:relative}.resize-handle:hover,.resize-handle.drag{background:var(--primary)}.resize-dots{background-image:radial-gradient(circle, var(--text-dim) 1px, transparent 1px);opacity:.6;background-size:3px 6px;width:3px;height:24px;display:block}.resize-handle:hover .resize-dots,.resize-handle.drag .resize-dots{opacity:1}.preview-panel{background:var(--background);flex-direction:column;flex:1;min-width:200px;display:flex;overflow:hidden}.preview-header{border-bottom:1px solid var(--border);background:var(--card-bg);flex-shrink:0;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}.preview-title{color:var(--text-muted);letter-spacing:-.01em;margin:0;font-size:.95rem;font-weight:700}.preview-actions{align-items:center;gap:.5rem;display:flex}.preview-badge{background:var(--icon-bg);color:var(--text-dim);border-radius:999px;align-items:center;gap:.4rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600;display:inline-flex}.preview-badge.has-content{color:var(--success)}.status-dot{background:var(--text-dim);border-radius:50%;width:6px;height:6px}.has-content .status-dot{background:var(--success);animation:2s infinite pulse;box-shadow:0 0 #16a34a66}@keyframes pulse{0%{box-shadow:0 0 #16a34a66}70%{box-shadow:0 0 0 6px #16a34a00}to{box-shadow:0 0 #16a34a00}}.maximize-btn{border:1px solid var(--border);width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:inline-flex}.maximize-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--icon-bg)}.preview-content{flex:1;padding:1.5rem;overflow-y:auto}.preview-empty{text-align:center;height:100%;min-height:300px;color:var(--text-dim);flex-direction:column;justify-content:center;align-items:center;display:flex}.preview-empty p{margin:.5rem 0 0;font-size:.95rem}.preview-hint{opacity:.6;font-size:.85rem!important}.app-layout.maximized .editor-panel,.app-layout.maximized .resize-handle{display:none}.app-layout.maximized .preview-panel{flex:1;width:100%;min-width:0}.app-layout.maximized .preview-content{width:100%;max-width:1160px;margin:0 auto;padding:1.5rem 2rem}@media (width<=768px){.app-layout{height:auto;min-height:calc(100vh - var(--header-height,68px));flex-direction:column}.editor-panel{min-width:0;height:40vh;width:100%!important}.resize-handle{cursor:row-resize;width:auto;height:5px}.resize-dots{background-size:6px 3px;width:24px;height:3px}.preview-panel{flex:1;min-width:0}}