:root{--bg-color-light:#ffffff;--text-color-light:#333333;--primary-color-light:#4a6ed0;--secondary-color-light:#e9ecef;--border-color-light:#ced4da;--error-color-light:#dc3545;--warning-color-light:#ffc107;--success-color-light:#28a745;--highlight-bg-light:#f8f9fa;--code-bg-light:#f5f5f5;--bg-color-dark:#1a1a1a;--text-color-dark:#f8f9fa;--primary-color-dark:#5e81ea;--secondary-color-dark:#2d3748;--border-color-dark:#4a5568;--error-color-dark:#ff6b6b;--warning-color-dark:#ffd166;--success-color-dark:#72c896;--highlight-bg-dark:#2d3748;--code-bg-dark:#2d2d2d}.html-validator{max-width:1200px;margin:0 auto;padding:2rem;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;transition:all .3s ease;min-height:100vh;display:flex;flex-direction:column}.html-validator.light-mode{background-color:var(--bg-color-light);color:var(--text-color-light)}.html-validator.dark-mode{background-color:var(--bg-color-dark);color:var(--text-color-dark)}.validator-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;border-bottom:2px solid;padding-bottom:1rem}.light-mode .validator-header{border-color:var(--border-color-light)}.dark-mode .validator-header{border-color:var(--border-color-dark)}.validator-header h1{font-size:2.5rem;margin:0;font-weight:700;background:linear-gradient(90deg,#4a6ed0,#28a745);-webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0)}.validator-header p{margin:.5rem 0 0;font-size:1.1rem;font-weight:400;opacity:.8}.toggle-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:background-color .3s ease}.light-mode .toggle-button{background-color:var(--secondary-color-light)}.light-mode .toggle-button:hover{background-color:hsl(210,15.7894736842%,87.5490196078%)}.dark-mode .toggle-button{background-color:var(--secondary-color-dark)}.dark-mode .toggle-button:hover{background-color:rgb(54.8076923077,66.9871794872,87.6923076923)}.input-container{display:flex;flex-direction:column;gap:1.5rem;flex:1}.textarea-container{position:relative;flex:1;min-height:300px}.html-input{width:100%;height:100%;min-height:300px;padding:1rem;font-family:Fira Code,Source Code Pro,Consolas,monospace;font-size:1rem;line-height:1.5;resize:vertical;border-radius:8px;transition:all .3s ease;outline:none}.light-mode .html-input{background-color:var(--code-bg-light);color:var(--text-color-light);border:1px solid var(--border-color-light)}.light-mode .html-input:focus{box-shadow:0 0 0 2px rgba(74,110,208,.5);border-color:var(--primary-color-light)}.dark-mode .html-input{background-color:var(--code-bg-dark);color:var(--text-color-dark);border:1px solid var(--border-color-dark)}.dark-mode .html-input:focus{box-shadow:0 0 0 2px rgba(94,129,234,.5);border-color:var(--primary-color-dark)}.buttons-container{display:flex;gap:1rem;justify-content:flex-end;margin-top:1rem}.primary-button,.secondary-button{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:6px;cursor:pointer;transition:all .2s ease;border:none;display:flex;align-items:center;justify-content:center;gap:.5rem}.primary-button:disabled,.secondary-button:disabled{opacity:.6;cursor:not-allowed}.light-mode .primary-button{background-color:var(--primary-color-light);color:#fff}.light-mode .primary-button:hover:not(:disabled){background-color:rgb(47.6184210526,84.0921052632,183.3815789474)}.dark-mode .primary-button{background-color:var(--primary-color-dark);color:#fff}.dark-mode .primary-button:hover:not(:disabled){background-color:hsl(225,76.9230769231%,54.3137254902%)}.light-mode .secondary-button{background-color:var(--secondary-color-light);color:var(--text-color-light)}.light-mode .secondary-button:hover:not(:disabled){background-color:hsl(210,15.7894736842%,87.5490196078%)}.dark-mode .secondary-button{background-color:var(--secondary-color-dark);color:var(--text-color-dark)}.dark-mode .secondary-button:hover:not(:disabled){background-color:rgb(54.8076923077,66.9871794872,87.6923076923)}.sample-templates{margin-top:1rem}.sample-templates h3{font-size:1.2rem;margin-bottom:1rem}.template-buttons{display:flex;flex-wrap:wrap;gap:.75rem}.template-buttons button{padding:.5rem 1rem;font-size:.9rem;border-radius:4px;cursor:pointer;transition:all .2s ease}.light-mode .template-buttons button{background-color:var(--secondary-color-light);color:var(--text-color-light);border:1px solid var(--border-color-light)}.light-mode .template-buttons button:hover{background-color:hsl(210,15.7894736842%,87.5490196078%)}.dark-mode .template-buttons button{background-color:var(--secondary-color-dark);color:var(--text-color-dark);border:1px solid var(--border-color-dark)}.dark-mode .template-buttons button:hover{background-color:rgb(54.8076923077,66.9871794872,87.6923076923)}.validation-results{display:flex;flex-direction:column;gap:1.5rem;flex:1}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.results-header h2{font-size:1.8rem;margin:0}.result-summary{display:flex;gap:1rem;font-weight:600}.result-summary .error-count,.result-summary .warning-count{padding:.4rem .8rem;border-radius:4px}.light-mode .result-summary .error-count{background-color:rgba(220,53,69,.1);color:var(--error-color-light)}.dark-mode .result-summary .error-count{background-color:rgba(255,107,107,.1);color:var(--error-color-dark)}.light-mode .result-summary .error-count.has-errors{background-color:rgba(220,53,69,.2)}.dark-mode .result-summary .error-count.has-errors{background-color:rgba(255,107,107,.2)}.light-mode .result-summary .warning-count{background-color:rgba(255,193,7,.1);color:#a07800}.dark-mode .result-summary .warning-count{background-color:rgba(255,209,102,.1);color:var(--warning-color-dark)}.light-mode .result-summary .warning-count.has-warnings{background-color:rgba(255,193,7,.2)}.dark-mode .result-summary .warning-count.has-warnings{background-color:rgba(255,209,102,.2)}.success-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;border-radius:8px}.light-mode .success-message{background-color:rgba(40,167,69,.1)}.dark-mode .success-message{background-color:rgba(114,200,150,.1)}.success-message .checkmark{font-size:4rem;line-height:1;margin-bottom:1rem}.light-mode .success-message .checkmark{color:var(--success-color-light)}.dark-mode .success-message .checkmark{color:var(--success-color-dark)}.success-message p{font-size:1.5rem;font-weight:600;margin:0}.light-mode .success-message p{color:var(--success-color-light)}.dark-mode .success-message p{color:var(--success-color-dark)}.messages-container{display:flex;flex-direction:column;gap:1rem;max-height:600px;overflow-y:auto;padding-right:.5rem;margin-bottom:1rem}.messages-container::-webkit-scrollbar{width:8px}.light-mode .messages-container::-webkit-scrollbar-track{background:var(--secondary-color-light)}.light-mode .messages-container::-webkit-scrollbar-thumb{background:#adb5bd}.light-mode .messages-container::-webkit-scrollbar-thumb:hover{background:#6c757d}.dark-mode .messages-container::-webkit-scrollbar-track{background:var(--secondary-color-dark)}.dark-mode .messages-container::-webkit-scrollbar-thumb{background:#4a5568}.dark-mode .messages-container::-webkit-scrollbar-thumb:hover{background:#718096}.message{border-radius:6px;overflow:hidden}.light-mode .message.error{border-left:4px solid var(--error-color-light);background-color:rgba(220,53,69,.05)}.light-mode .message.warning{border-left:4px solid var(--warning-color-light);background-color:rgba(255,193,7,.05)}.dark-mode .message.error{border-left:4px solid var(--error-color-dark);background-color:rgba(255,107,107,.05)}.dark-mode .message.warning{border-left:4px solid var(--warning-color-dark);background-color:rgba(255,209,102,.05)}.message-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem}.light-mode .message-header{background-color:rgba(0,0,0,.03)}.dark-mode .message-header{background-color:hsla(0,0%,100%,.03)}.message-header .message-type{font-weight:700;font-size:.85rem;padding:.25rem .5rem;border-radius:3px}.light-mode .error .message-header .message-type{background-color:var(--error-color-light);color:#fff}.dark-mode .error .message-header .message-type{background-color:var(--error-color-dark);color:#1a1a1a}.light-mode .warning .message-header .message-type{background-color:var(--warning-color-light);color:#212529}.dark-mode .warning .message-header .message-type{background-color:var(--warning-color-dark);color:#1a1a1a}.message-header .message-location{font-size:.85rem;font-family:Fira Code,Source Code Pro,monospace;opacity:.8}.message-content{padding:1rem;line-height:1.5;font-size:1rem}.code-extract{margin:0;padding:.75rem 1rem;font-family:Fira Code,Source Code Pro,monospace;font-size:.9rem;border-radius:0 0 6px 0;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto}.light-mode .code-extract{background-color:var(--code-bg-light);border-top:1px solid var(--border-color-light)}.dark-mode .code-extract{background-color:var(--code-bg-dark);border-top:1px solid var(--border-color-dark)}.fixed-html-container{display:flex;flex-direction:column;gap:1.5rem;flex:1}.fixed-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.fixed-header h2{font-size:1.8rem;margin:0}.copy-button{padding:.5rem 1rem;font-size:.9rem;border-radius:4px;cursor:pointer;transition:all .2s ease;font-weight:600}.light-mode .copy-button{background-color:var(--primary-color-light);color:#fff;border:none}.light-mode .copy-button:hover{background-color:rgb(47.6184210526,84.0921052632,183.3815789474)}.dark-mode .copy-button{background-color:var(--primary-color-dark);color:#fff;border:none}.dark-mode .copy-button:hover{background-color:hsl(225,76.9230769231%,54.3137254902%)}.code-container{flex:1;border-radius:8px;overflow:hidden}.light-mode .code-container{border:1px solid var(--border-color-light)}.dark-mode .code-container{border:1px solid var(--border-color-dark)}.fixed-code{margin:0;padding:1rem;font-family:Fira Code,Source Code Pro,monospace;font-size:.95rem;line-height:1.5;white-space:pre-wrap;word-break:break-all;height:100%;min-height:300px;max-height:600px;overflow-y:auto}.light-mode .fixed-code{background-color:var(--code-bg-light);color:var(--text-color-light)}.dark-mode .fixed-code{background-color:var(--code-bg-dark);color:var(--text-color-dark)}.fixed-code::-webkit-scrollbar{width:8px}.light-mode .fixed-code::-webkit-scrollbar-track{background:var(--secondary-color-light)}.light-mode .fixed-code::-webkit-scrollbar-thumb{background:#adb5bd}.light-mode .fixed-code::-webkit-scrollbar-thumb:hover{background:#6c757d}.dark-mode .fixed-code::-webkit-scrollbar-track{background:var(--secondary-color-dark)}.dark-mode .fixed-code::-webkit-scrollbar-thumb{background:#4a5568}.dark-mode .fixed-code::-webkit-scrollbar-thumb:hover{background:#718096}.validator-footer{margin-top:2rem;padding-top:1rem;font-size:.9rem;text-align:center;opacity:.8}.light-mode .validator-footer{border-top:1px solid var(--border-color-light)}.dark-mode .validator-footer{border-top:1px solid var(--border-color-dark)}.light-mode .validator-footer a{color:var(--primary-color-light)}.dark-mode .validator-footer a{color:var(--primary-color-dark)}.validator-footer a:hover{text-decoration:underline}@media(max-width:768px){.html-validator{padding:1rem}.validator-header{flex-direction:column;align-items:flex-start;gap:1rem}.validator-header .theme-toggle{align-self:flex-end;margin-top:-3rem}.fixed-header,.results-header{flex-direction:column;align-items:flex-start;gap:.5rem}.fixed-header .copy-button{align-self:flex-end}.buttons-container{flex-direction:column}.buttons-container button{width:100%}.template-buttons{flex-direction:column}.template-buttons button{width:100%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.message,.success-message{animation:fadeIn .3s ease}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.primary-button:disabled:after{content:"";display:inline-block;width:1em;height:1em;border-radius:50%;border:2px solid hsla(0,0%,100%,.3);border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-left:.5rem}button:focus,textarea:focus{outline:2px solid rgba(0,0,0,0)}.light-mode button:focus{box-shadow:0 0 0 3px rgba(74,110,208,.5)}.dark-mode button:focus{box-shadow:0 0 0 3px rgba(94,129,234,.5)}@media print{.html-validator{padding:0;background-color:#fff!important;color:#000!important}.buttons-container,.sample-templates,.template-buttons,.toggle-button{display:none!important}.fixed-code,.messages-container{max-height:none;overflow:visible}.code-extract,.message{break-inside:avoid}}