*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333;line-height:1.6}#app{max-width:1200px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:30px}header h1{color:#2c3e50;margin-bottom:10px}header p{color:#7f8c8d;font-size:16px}main{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}.editor-section,.error-section{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 10px #0000001a}.editor-section label{display:block;margin-bottom:10px;font-weight:600;color:#2c3e50}.editor-container{position:relative}.error-overlay{position:absolute;inset:0;pointer-events:none;font-family:Monaco,Consolas,monospace;font-size:14px;line-height:1.5;white-space:pre-wrap;padding:15px;border:2px solid transparent;background:transparent;color:transparent}.error-highlight{background-color:#e53e3e1a;border-bottom:2px wavy #e53e3e;position:relative;display:inline;padding:0 2px;border-radius:2px}.error-highlight:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:repeating-linear-gradient(to right,#e53e3e 0px,#e53e3e 3px,transparent 3px,transparent 6px)}#html-input{width:100%;padding:15px;border:2px solid #e0e0e0;border-radius:6px;font-family:Monaco,Consolas,monospace;font-size:14px;line-height:1.5;resize:vertical;background-color:#fafafa;transition:border-color .3s ease}#html-input:focus{outline:none;border-color:#3498db;background-color:#fff}.error-section h3{margin-bottom:15px;color:#2c3e50}.results-container{min-height:200px;padding:15px;background-color:#f8f9fa;border-radius:6px;border:1px solid #e9ecef}.placeholder{color:#6c757d;font-style:italic;text-align:center;margin-top:80px}.error-item{background:#fff5f5;border:1px solid #fed7d7;border-radius:6px;padding:12px;margin-bottom:10px}.error-item.error{border-left:4px solid #e53e3e}.error-item.warning{background:#fffaf0;border:1px solid #fbd38d;border-left:4px solid #ed8936}.error-location{font-weight:600;color:#e53e3e;font-size:12px;margin-bottom:5px}.error-message{color:#2d3748;margin-bottom:5px}.error-context{background:#f7fafc;border:1px solid #e2e8f0;border-radius:4px;padding:8px;margin:5px 0;font-family:Monaco,Consolas,monospace;font-size:12px;color:#4a5568;overflow-x:auto}.error-rule{font-size:11px;color:#718096;font-family:monospace}.success-message{background:#f0fff4;border:1px solid #9ae6b4;border-left:4px solid #38a169;border-radius:6px;padding:15px;color:#2f855a;text-align:center}@media (max-width: 768px){main{grid-template-columns:1fr;gap:20px}#app{padding:15px}}