:root{
--romano-bg-color:#ffffff;
--romano-text-color:#343a40;
--romano-border-color:#e9ecef;
--romano-input-bg:#ffffff;
--romano-input-text:#343a40;
--romano-input-border:#e9ecef;
--romano-input-border-focus:#00a651;
--romano-label-text:#343a40;
--romano-opcao-bg:#ffffff;
--romano-opcao-text:#343a40;
--romano-opcao-border:#e9ecef;
--romano-opcao-hover-border:#0072bc;
--romano-opcao-hover-bg:#f8f9fa;
--romano-opcao-checked-bg:#f0f8f0;
--romano-opcao-checked-border:#00a651;
--romano-opcao-checked-text:#00a651;
--romano-radio-border:#dee2e6;
--romano-radio-bg:#ffffff;
--romano-resultado-success-text:#2e7d32;
--romano-resultado-success-border:#66bb6a;
--romano-resultado-error-text:#c62828;
--romano-resultado-error-border:#ef5350;
}
[data-theme="dark"]{
--romano-bg-color:var(--white);
--romano-text-color:var(--dark-gray);
--romano-border-color:var(--light-gray);
--romano-input-bg:var(--white);
--romano-input-text:var(--dark-gray);
--romano-input-border:var(--light-gray);
--romano-input-border-focus:#34d399;
--romano-label-text:var(--dark-gray);
--romano-opcao-bg:var(--white);
--romano-opcao-text:var(--dark-gray);
--romano-opcao-border:var(--light-gray);
--romano-opcao-hover-border:#34d399;
--romano-opcao-hover-bg:#1e3a2a;
--romano-opcao-checked-bg:#1e3a2a;
--romano-opcao-checked-border:#34d399;
--romano-opcao-checked-text:#34d399;
--romano-radio-border:var(--light-gray);
--romano-radio-bg:var(--white);
--romano-resultado-success-text:#86efac;
--romano-resultado-success-border:#34d399;
--romano-resultado-error-text:#fca5a5;
--romano-resultado-error-border:#f87171;
}
.conversor-romano-container{max-width:600px;margin:0 auto;background:var(--romano-bg-color);border-radius:1rem;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15);padding:2rem;position:relative;overflow:hidden;}
.conversor-romano-container label{font-weight:600;color:var(--romano-label-text);margin-bottom:0.5rem;font-size:0.95rem;display:flex;align-items:center;gap:0.25rem;}
.conversor-romano-container select,.conversor-romano-container input{width:100%;padding:1rem;font-size:1.1rem;border:2px solid var(--romano-input-border);border-radius:0.5rem;transition:all 0.3s ease;background:var(--romano-input-bg);color:var(--romano-input-text);font-weight:500;margin-bottom:1.5rem;}
.conversor-romano-container select:focus,.conversor-romano-container input:focus{border-color:var(--romano-input-border-focus);outline:none;box-shadow:0 0 0 3px rgba(0,166,81,0.1);transform:translateY(-1px);}
[data-theme="dark"] .conversor-romano-container select:focus,[data-theme="dark"] .conversor-romano-container input:focus{box-shadow:0 0 0 3px rgba(52,211,153,0.1);}
.conversor-romano-container select:hover,.conversor-romano-container input:hover{border-color:var(--primary-blue);}
.conversor-romano-container .converter-btn{width:100%;padding:1rem 1.5rem;background:linear-gradient(135deg,#1976d2,#1565c0)!important;color:#ffffff!important;border:none;border-radius:0.5rem;font-weight:600;font-size:1rem;cursor:pointer;transition:all 0.3s ease;display:none;align-items:center;justify-content:center;gap:0.5rem;min-height:48px;box-shadow:0 4px 15px rgba(0,0,0,0.1);margin-bottom:1.5rem;opacity:0;transform:translateY(10px);}
.conversor-romano-container .converter-btn.show{display:flex;animation:slideInButton 0.4s ease-out forwards;}
@keyframes slideInButton{to{opacity:1;transform:translateY(0);}}
.conversor-romano-container .converter-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(21,101,192,0.3);background:linear-gradient(135deg,#1565c0,#0d47a1)!important;}
.conversor-romano-container .converter-btn:active{transform:translateY(0);}
.conversor-romano-container .converter-btn:disabled{opacity:0.7;cursor:not-allowed;transform:none;}
.conversor-romano-resultado{background:transparent;color:var(--romano-resultado-success-text);padding:1.5rem;border:2px solid var(--romano-resultado-success-border);border-radius:0.5rem;font-weight:600;font-size:1.2rem;text-align:center;min-height:60px;display:none;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all 0.3s ease;position:relative;overflow:hidden;margin-bottom:1rem;word-break:break-word;opacity:0;transform:translateY(15px);}
.conversor-romano-resultado.show{display:flex!important;animation:slideInResult 0.5s ease-out forwards;}
@keyframes slideInResult{to{opacity:1;transform:translateY(0);}}
.conversor-romano-resultado.erro{color:var(--romano-resultado-error-text);border-color:var(--romano-resultado-error-border);}
.conversor-romano-resultado.sucesso{color:var(--romano-resultado-success-text);border-color:var(--romano-resultado-success-border);}
.conversor-romano-container .copiar-btn{width:100%;padding:0.75rem 1rem;background:linear-gradient(135deg,#4caf50,#2e7d32)!important;color:#ffffff!important;border:none;border-radius:0.5rem;font-weight:600;font-size:0.95rem;cursor:pointer;transition:all 0.3s ease;display:none;align-items:center;justify-content:center;gap:0.5rem;box-shadow:0 4px 15px rgba(0,0,0,0.1);position:relative;overflow:hidden;opacity:0;transform:translateY(10px);}
.conversor-romano-container .copiar-btn.show{display:flex;animation:slideInCopyButton 0.4s ease-out 0.2s forwards;}
@keyframes slideInCopyButton{to{opacity:1;transform:translateY(0);}}
.conversor-romano-container .copiar-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(46,125,50,0.3);background:linear-gradient(135deg,#2e7d32,#1b5e20)!important;}
.tipo-conversao-container{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;}
.tipo-opcao{display:flex;align-items:center;gap:0.75rem;cursor:pointer;padding:0.75rem;border:2px solid var(--romano-opcao-border);border-radius:0.5rem;transition:all 0.3s ease;background:var(--romano-opcao-bg);font-weight:500;color:var(--romano-opcao-text);flex:1;min-width:200px;}
.tipo-opcao:hover{border-color:var(--romano-opcao-hover-border);background:var(--romano-opcao-hover-bg);}
.tipo-opcao input[type="radio"]{display:none;}
.radio-custom{width:20px;height:20px;border:2px solid var(--romano-radio-border);border-radius:50%;position:relative;transition:all 0.3s ease;background:var(--romano-radio-bg);}
.radio-custom::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:10px;height:10px;background:linear-gradient(135deg,#00a651,#0072bc);border-radius:50%;transition:transform 0.2s ease;}
.tipo-opcao input[type="radio"]:checked+.radio-custom{border-color:var(--romano-opcao-checked-border);}
.tipo-opcao input[type="radio"]:checked+.radio-custom::after{transform:translate(-50%,-50%) scale(1);}
.tipo-opcao input[type="radio"]:checked~.opcao-texto{color:var(--romano-opcao-checked-text);font-weight:600;}
.tipo-opcao input[type="radio"]:checked{background:var(--romano-opcao-checked-bg);border-color:var(--romano-opcao-checked-border);}
.tipo-opcao:has(input[type="radio"]:checked){background:var(--romano-opcao-checked-bg);border-color:var(--romano-opcao-checked-border);}
.opcao-texto{font-size:1rem;transition:all 0.3s ease;}
.conversor-romano-container input{width:100%;padding:1rem;font-size:1.1rem;border:2px solid var(--romano-input-border);border-radius:0.5rem;transition:all 0.3s ease;background:var(--romano-input-bg);color:var(--romano-input-text);font-weight:500;margin-bottom:1.5rem;}
.conversor-romano-container input:focus{border-color:var(--romano-input-border-focus);outline:none;box-shadow:0 0 0 3px rgba(0,166,81,0.1);transform:translateY(-1px);}
[data-theme="dark"] .conversor-romano-container input:focus{box-shadow:0 0 0 3px rgba(52,211,153,0.1);}
.conversor-romano-container input:hover{border-color:var(--primary-blue);}
@media (max-width:768px){
.conversor-romano-container{margin:0 0.5rem;padding:1.5rem;}
.conversor-romano-container select,.conversor-romano-container input{font-size:1rem;padding:0.75rem;}
.conversor-romano-resultado{font-size:1.1rem;padding:1rem;}
.tipo-conversao-container{gap:0.75rem;}
.tipo-opcao{padding:0.625rem;min-width:180px;}
.opcao-texto{font-size:0.95rem;}
}
@media (max-width:480px){
.tipo-conversao-container{flex-direction:column;gap:0.75rem;}
.tipo-opcao{min-width:auto;flex:none;}
}
@media (max-width:420px){
.conversor-romano-container{margin:0;border-radius:0.5rem;padding:1rem;}
.conversor-romano-container select,.conversor-romano-container input{font-size:0.95rem;padding:0.75rem;}
.conversor-romano-resultado{font-size:1rem;min-height:50px;padding:0.75rem;}
.conversor-romano-container button,.copiar-btn{font-size:0.9rem;padding:0.75rem;}
.tipo-conversao-container{gap:0.5rem;}
.tipo-opcao{padding:0.5rem;}
.radio-custom{width:18px;height:18px;}
.radio-custom::after{width:8px;height:8px;}
.opcao-texto{font-size:0.9rem;}
}