:root{
--rod-red:#C21F0D;
--rod-dark:#181818;
--rod-text:#222222;
--rod-muted:#70737A;
--rod-border:rgba(24,24,24,.12);
--rod-soft:#f4f4f4;
--rod-soft-red:rgba(194,31,13,.10);
}
.rod-front,
.rod-front *{
box-sizing:border-box;
}
.rod-front{
max-width:1290px;
margin:0 auto;
padding:20px 70px 70px;
font-family:"Poppins", "Roboto", Arial, sans-serif;
color:var(--rod-text);
}
.rod-front h2{
margin:0 0 6px;
font-family:"Poppins", sans-serif;
font-size:clamp(36px,4vw,56px);
font-weight:600;
line-height:1;
letter-spacing:-.04em;
color:var(--rod-dark);
}
.rod-muted{
color:var(--rod-muted);
font-size:15px;
line-height:1.6;
}
.rod-account-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:30px;
margin:0 0 45px;
}
.rod-logout,
.rod-download,
.rod-login-btn,
.rod-login-card input[type=submit]{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:0!important;
border-radius:0!important;
background:var(--rod-red)!important;
color:#fff!important;
text-decoration:none!important;
font-family:"Poppins", sans-serif;
font-size:15px;
font-weight:700;
line-height:1;
padding:15px 30px!important;
cursor:pointer;
transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.rod-logout:hover,
.rod-download:hover,
.rod-login-btn:hover,
.rod-login-card input[type=submit]:hover{
background:var(--rod-dark)!important;
color:#fff!important;
transform:translateY(-1px);
}
.rod-front-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
margin:0 0 28px;
}
.rod-front-stats div{
background:#fff;
border:1px solid var(--rod-border);
border-radius:0;
padding:30px;
box-shadow:none;
transition:border-color .25s ease,background-color .25s ease,transform .25s ease;
}
.rod-front-stats div:hover{
border-color:var(--rod-red);
background:#fff;
transform:translateY(-2px);
}
.rod-front-stats strong{
display:block;
font-size:42px;
font-weight:700;
line-height:1;
letter-spacing:-.04em;
color:var(--rod-dark);
}
.rod-front-stats span{
display:block;
color:var(--rod-muted);
margin-top:12px;
font-size:15px;
font-weight:500;
}
.rod-f-card{
background:#fff;
border:1px solid var(--rod-border);
border-radius:0;
margin:20px 0;
padding:0;
overflow:hidden;
box-shadow:none;
}
.rod-f-card summary{
cursor:pointer;
padding:24px 30px;
font-family:"Poppins", sans-serif;
font-weight:700;
font-size:20px;
color:var(--rod-dark);
background:#fff;
border-bottom:1px solid var(--rod-border);
transition:color .25s ease,background-color .25s ease;
}
.rod-f-card summary:hover{
color:var(--rod-red);
background:#fafafa;
}
.rod-device{
border-top:0;
border-bottom:1px solid rgba(24,24,24,.08);
padding:30px;
}
.rod-device:last-child{
border-bottom:0;
}
.rod-device h3{
margin:0 0 18px;
font-family:"Poppins", sans-serif;
font-size:clamp(26px,2.5vw,38px);
font-weight:600;
line-height:1.08;
letter-spacing:-.04em;
color:var(--rod-dark);
}
.rod-doc-list{
display:grid;
gap:12px;
}
.rod-doc{
display:grid;
grid-template-columns:auto 1fr auto auto;
gap:18px;
align-items:center;
background:#f7f7f7;
border:1px solid rgba(24,24,24,.08);
border-radius:0;
padding:18px 18px 18px 22px;
transition:border-color .25s ease,background-color .25s ease;
}
.rod-doc:hover{
border-color:rgba(194,31,13,.35);
background:#fff;
}
.rod-doc strong{
color:var(--rod-text);
font-size:16px;
font-weight:700;
}
.rod-doc small{
color:var(--rod-muted);
font-size:14px;
}
.rod-badge{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:0;
padding:9px 12px;
font-size:12px;
line-height:1;
font-weight:800;
text-transform:uppercase;
letter-spacing:.04em;
background:#eeeeee;
color:var(--rod-dark);
}
.rod-badge.ok{
background:#e8f5eb;
color:#1f7a3b;
}
.rod-badge.warn{
background:var(--rod-soft-red);
color:var(--rod-red);
}
.rod-badge.danger{
background:var(--rod-red);
color:#fff;
}
.rod-badge.neutral{
background:#eeeeee;
color:#555;
}
.rod-login-wrap{
display:flex;
justify-content:center;
padding:50px 20px 70px;
}
.rod-login-card{
width:100%;
max-width:500px;
background:#fff;
border:1px solid var(--rod-border);
border-radius:0;
padding:40px;
box-shadow:none;
}
.rod-login-card h2{
margin:0 0 10px;
font-size:42px;
}
.rod-login-card label,
.rod-login-form label{
display:block;
font-weight:700;
margin:18px 0 8px;
color:var(--rod-dark);
font-size:14px;
}
.rod-login-card input[type=text],
.rod-login-card input[type=password],
.rod-login-form input[type=text],
.rod-login-form input[type=password]{
width:100%;
min-height:48px;
border:1px solid var(--rod-border);
border-radius:0;
padding:13px 15px;
background:#fff;
color:var(--rod-dark);
font-size:15px;
outline:none;
transition:border-color .25s ease;
}
.rod-login-card input[type=text]:focus,
.rod-login-card input[type=password]:focus,
.rod-login-form input[type=text]:focus,
.rod-login-form input[type=password]:focus{
border-color:var(--rod-red);
}
.rod-login-form .rod-check,
.rod-login-card .login-remember label{
display:flex;
align-items:center;
gap:8px;
font-weight:500;
color:var(--rod-muted);
}
.rod-login-links{
text-align:center;
margin:18px 0 0;
}
.rod-login-links a,
.rod-front a:not(.rod-download):not(.rod-logout){
color:var(--rod-red);
text-decoration:none;
font-weight:700;
}
.rod-login-links a:hover,
.rod-front a:not(.rod-download):not(.rod-logout):hover{
color:var(--rod-dark);
}
.rod-login-error{
background:var(--rod-soft-red);
color:var(--rod-red);
border:1px solid rgba(194,31,13,.25);
border-radius:0;
padding:14px 16px;
font-weight:600;
}
@media(max-width:1279px){
.rod-front{padding-left:40px;padding-right:40px;}
}
@media(max-width:767px){
.rod-front{padding:10px 20px 50px;}
.rod-account-head{align-items:flex-start;flex-direction:column;margin-bottom:30px;}
.rod-logout{width:100%;}
.rod-front-stats{grid-template-columns:1fr;gap:14px;}
.rod-front-stats div{padding:24px;}
.rod-f-card summary{padding:20px;}
.rod-device{padding:24px 20px;}
.rod-doc{grid-template-columns:1fr;gap:10px;padding:18px;}
.rod-doc .rod-badge{width:max-content;}
.rod-download{width:100%;}
.rod-login-card{padding:28px 22px;}
}