/* --- General Styles & Variables --- */

:root {
    --bg-color: #f3f4f6;
    --text-color: #1f2937;
    --card-bg: #ffffff;
    --input-bg: #f9fafb;
    --border-color: #d1d5db;
    --brand-color: #4f46e5;
    --brand-hover: #4338ca;
    --text-light: #4b5563;
    --text-lighter: #6b7280;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --color-green: #22c55e;
    --color-red: #ef4444;
    --color-orange: #f97316;
    --color-yellow: #eab308;
}

.card,.card2,.site-header{background-color:var(--card-bg)}#form-message,#result-content,.page-header,.site-footer{text-align:center}h2,p{margin-bottom:1rem}.how-to-section h2,p{margin-top:0}fieldset,form{flex-direction:column}body,h1,input,select,textarea{color:var(--text-color)}#result-content,body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}body{background-color:var(--bg-color);margin:0;padding:0;line-height:1.5}.container{max-width:42rem;margin:0 auto;padding:1rem}.card,.card2,.how-to-section,.page-header,.site-header{margin-bottom:2rem}#result-section,.card2{margin-top:2rem}.card,.card2{border-radius:.5rem;box-shadow:0 4px 6px -1px var(--shadow-color),0 2px 4px -2px var(--shadow-color);padding:1.5rem}h1{font-size:1.875rem;font-weight:700}.result-label,button,h2,legend{font-weight:600}.how-to-section li,.site-header nav a,p{color:var(--text-light)}h2{font-size:1.25rem}h3,legend{font-size:1rem}#form-message,.site-footer,label{font-size:.875rem}code{background-color:#e5e7eb;padding:.125rem .375rem;border-radius:.25rem;font-family:monospace}.site-header nav ul,fieldset{margin:0;padding:0;display:flex;gap:1.5rem}button,fieldset>div{gap:.5rem;display:flex}.how-to-section ol{padding-left:1.5rem;margin:0}.how-to-section li{margin-bottom:.75rem}.how-to-section li:last-child{margin-bottom:0}form{display:flex;gap:1.5rem}fieldset{border:none}fieldset>div{flex-direction:column}label{font-weight:500}input,select,textarea{width:100%;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:.375rem;padding:.75rem;font-size:1rem;box-sizing:border-box}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-color);box-shadow:0 0 0 2px rgba(79,70,229,.4)}textarea{min-height:10rem;resize:vertical}button{justify-content:center;align-items:center;width:100%;padding:.75rem 1rem;border-radius:.375rem;border:none;cursor:pointer;transition:background-color .2s;background-color:var(--brand-color);color:#fff}button:hover:not(:disabled){background-color:var(--brand-hover)}button:disabled{opacity:.7;cursor:not-allowed}#form-message{color:var(--color-red);min-height:1.25rem}#result-content{font-size:1rem}.site-header{padding:1rem;border-bottom:1px solid var(--border-color)}.site-header .container{padding-top:0;padding-bottom:0;display:flex;flex-direction:column;align-items:center;gap:1rem}@media (min-width:640px){.container{padding:1.5rem}h1{font-size:2.25rem}.site-header .container{flex-direction:row;justify-content:space-between}}.site-header .site-title{font-size:1.5rem;font-weight:700;margin:0}.site-header .site-title a{text-decoration:none;color:inherit}.site-header nav ul{list-style:none}.site-header nav a{text-decoration:none;font-weight:500;transition:color .2s}.site-header nav a:hover{color:var(--brand-color)}.site-footer{margin-top:3rem;padding:2rem 1rem;color:var(--text-lighter);border-top:1px solid var(--border-color)}.hidden{display:none!important}.text-green-400{color:var(--color-green)}.text-red-400{color:var(--color-red)}.text-orange-400{color:var(--color-orange)}.text-yellow-400{color:var(--color-yellow)}

.spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 2px solid #fff;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}