/* ServiPits visual refresh — black/white with ServiFácil red and yellow accents */
:root{--sp-black:#171717;--sp-ink:#202124;--sp-red:#d71920;--sp-red-dark:#b51218;--sp-yellow:#ffc928;--sp-yellow-dark:#e6ac00;--sp-white:#fff;--sp-bg:#f4f4f2;--sp-line:#e3e3df;--sp-muted:#686868;--sp-radius:16px}
*{box-sizing:border-box}
html{background:var(--sp-bg)}
body{background:var(--sp-bg)!important;color:var(--sp-ink)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;line-height:1.5}
.shell{max-width:1120px!important;width:100%;margin:0 auto!important;padding:26px 22px 48px!important}
.brand{display:flex;align-items:center;gap:14px;margin:4px 0 26px!important;padding:10px 0}
.brand h1{font-size:clamp(22px,3vw,28px)!important;letter-spacing:-.035em;color:var(--sp-black)!important;margin:0!important;font-weight:800}
.brand p{color:var(--sp-muted)!important;margin:3px 0 0!important}
.sp-logo-img{display:block;width:auto;height:auto;max-width:190px;max-height:68px;object-fit:contain}
.brand .sp-logo-img{max-width:140px;max-height:58px}
.brand.centered .sp-logo-img{max-width:220px;max-height:100px;margin:0 auto 8px}
.logo{background:var(--sp-black)!important;color:#fff!important;border-radius:13px!important}
.card,.login-card,.welcome{background:#fff!important;border:1px solid var(--sp-line)!important;border-radius:var(--sp-radius)!important;padding:24px!important;box-shadow:0 8px 30px rgba(0,0,0,.045)!important}
.login-card{max-width:460px!important;margin:5vh auto 0!important;padding:28px!important}
.login-card .brand{margin:0 0 22px!important}
.centered{flex-direction:column;text-align:center;gap:7px}
.centered h1{margin-top:8px!important}
.centered p{margin-top:0!important}
.card h2,.section h2{font-size:18px!important;color:var(--sp-black)!important;font-weight:800!important;letter-spacing:-.02em}
.card h2{margin:0 0 12px!important}
.card p,.welcome p{color:#555!important}
.welcome{margin-bottom:16px!important;position:relative;overflow:hidden}
.welcome:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sp-yellow)}
.eyebrow{font-size:11px!important;letter-spacing:.12em;font-weight:800;color:#777!important}
.tags span{background:#f1f1ee!important;color:#292929!important;border:1px solid #e5e5e0}
input,select,textarea{color:var(--sp-ink)!important;background:#fff!important;border:1px solid #d5d5d0!important;border-radius:10px!important;min-height:45px}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(255,201,40,.36)!important;border-color:var(--sp-yellow-dark)!important}
label,.field{color:#303030!important}
.button,button.button{display:block;background:var(--sp-red)!important;color:#fff!important;border:1px solid var(--sp-red)!important;border-radius:10px!important;padding:13px 17px!important;font-weight:800!important;text-decoration:none!important;transition:background .15s ease,transform .15s ease}
.button:hover,button.button:hover{background:var(--sp-red-dark)!important}
.button:active,button:active{transform:translateY(1px)}
a{color:var(--sp-red-dark)}
.logout{font-weight:700;color:var(--sp-black)!important}
.notice{background:#fff8dc!important;border:1px solid #f3d36b!important;color:#5e4b00!important}
.success{background:#eff9ee!important;border-color:#b7e2ad!important;color:#286221!important}
.error{background:#fff0f0!important;border-color:#f2b9b9!important;color:#a10e16!important}
.info{background:#fff8dc!important;border-color:#f3d36b!important;color:#5e4b00!important}
.section{border:1px solid var(--sp-line)!important;border-radius:var(--sp-radius)!important;padding:22px!important;margin:16px 0!important;background:#fff!important;box-shadow:0 5px 18px rgba(0,0,0,.025)}
.section h2{display:flex;align-items:center;gap:8px}
.service-toggle{background:#fafaf8!important;border:1px solid #e1e1dc!important;border-radius:12px!important;transition:border-color .15s ease,background .15s ease}
.service-toggle:has(input:checked){background:#fffbea!important;border-color:var(--sp-yellow-dark)!important;box-shadow:inset 3px 0 var(--sp-yellow)}
.service-toggle strong{color:var(--sp-black)}
.service-toggle small{color:#6b6b6b!important}
.service-detail{border:1px solid #e5e5e0!important;border-radius:12px!important;background:#fcfcfa!important;padding:18px!important}
.quantity-control{gap:8px}
.qty-btn{min-width:42px;min-height:42px;border:1px solid #d5d5d0!important;background:#fff!important;color:var(--sp-black)!important;border-radius:10px!important;font-weight:800}
.qty-btn:hover{border-color:var(--sp-yellow-dark)!important;background:#fff9e4!important}
.small-button{border:1px solid #deded8!important;background:#fff!important;color:var(--sp-black)!important;border-radius:8px!important;padding:7px 10px!important}
table{font-size:13px}
th{background:#f4f4f1;color:#555!important}
td,th{border-bottom:1px solid #e8e8e3!important}
.status{border-radius:7px!important}
.status.active{background:#eaf7e8!important;color:#25621f!important}
.status.inactive{background:#fff0f0!important;color:#a10e16!important}
#sig{max-width:100%;border:1px dashed #bcbcb5!important;border-radius:10px;background:white}
hr{border:0;border-top:1px solid var(--sp-line)}
@media(max-width:700px){
 .shell{padding:14px 12px 30px!important}
 .brand{gap:10px;margin:0 0 18px!important;flex-wrap:wrap}
 .brand .sp-logo-img{max-width:112px;max-height:48px}
 .brand h1{font-size:22px!important}
 .card,.login-card,.welcome{padding:17px!important;border-radius:14px!important}
 .login-card{margin:4vh auto 0!important}
 .section{padding:15px!important;margin:12px 0!important}
 .service-detail{padding:13px!important}
 .button{min-height:44px}
 .brand .logout{margin-left:auto}
}