:root{
 --navy:#0b2038;
 --blue:#1769e7;
 --orange:#ff962f;
 --ink:#17283e;
 --line:#e2e9f3;
 --muted:#687990;
}

*{box-sizing:border-box}

body{
 font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
 background:linear-gradient(145deg,#edf4fb,#f7f9fd 60%,#edf2fa);
 color:var(--ink);
}

header{
 background:linear-gradient(110deg,#091b30,#133653)!important;
 box-shadow:0 6px 22px #0b20381c;
 padding:15px 24px;
}

header .brand{
 display:flex;
 align-items:center;
 gap:12px;
 margin:0;
}

.brand-icon{
 width:49px;
 height:49px;
 border-radius:12px;
}

.brand-name{
 font-size:23px;
 font-weight:850;
 letter-spacing:-.6px;
 line-height:1.1;
 color:#fff;
}

.brand-name span{color:var(--orange)}
.brand-name small{
 display:block;
 font-size:10px;
 letter-spacing:3px;
 color:#9fc0dd;
 margin-top:4px;
}

main{
 max-width:1080px!important;
 margin:24px auto!important;
 padding:0 18px 95px!important;
}

.card{
 background:#fff;
 border:1px solid var(--line);
 border-radius:19px!important;
 padding:24px!important;
 box-shadow:0 9px 30px #1b3d6710!important;
 margin-bottom:19px!important;
}

.card h2{
 font-size:20px;
 color:#122b48;
 letter-spacing:-.3px;
}

.dash-hero{
 background:linear-gradient(120deg,#0b2542,#11538a);
 color:white;
 border-radius:22px;
 padding:29px 30px;
 margin-bottom:22px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:20px;
 position:relative;
 overflow:hidden;
}

.dash-hero:after{
 content:"";
 position:absolute;
 width:230px;
 height:230px;
 right:-75px;
 top:-105px;
 border:32px solid #ffffff0e;
 border-radius:50%;
 pointer-events:none;
}

.dash-hero h2{
 color:white;
 font-size:clamp(25px,3vw,34px);
 letter-spacing:-1px;
 margin:8px 0;
}

.dash-hero p{color:#c5dcef;margin:8px 0 18px}
.eyebrow{
 font-size:11px;
 font-weight:800;
 letter-spacing:2px;
 color:#ffb65f;
}

.hero-buttons{display:flex;flex-wrap:wrap;gap:10px}
.hero-buttons a{
 display:inline-block;
 padding:11px 16px;
 border-radius:10px;
 text-decoration:none;
 font-weight:750;
 font-size:13px;
 background:#fff;
 color:#163d69;
}
.hero-buttons a:last-child{
 background:#ffffff18;
 color:#fff;
 border:1px solid #ffffff44;
}

.hero-stat{
 text-align:center;
 min-width:118px;
 border:1px solid #ffffff30;
 background:#ffffff12;
 padding:19px;
 border-radius:16px;
 position:relative;
 z-index:1;
}
.hero-stat strong{font-size:38px;display:block;color:#fff}
.hero-stat span{font-size:12px;color:#d7eafb}

input:not([type=checkbox]),select,textarea{
 border:1px solid #ccd7e6;
 background:#fcfdff;
 border-radius:11px;
 padding:13px;
 transition:border-color .15s,box-shadow .15s;
}

input:focus,select:focus,textarea:focus{
 outline:none;
 border-color:#2580eb;
 box-shadow:0 0 0 3px #2580eb22;
}

button,.primary,.download{
 transition:filter .15s,transform .15s;
 border-radius:11px!important;
}

button:hover,.download:hover{filter:brightness(1.07)}
button:active{transform:scale(.99)}

.primary,.download{background:var(--blue)!important;color:white!important}
.drive,.secondary{background:#138768!important;color:white!important}
.stop{background:#df4148!important;color:white!important}

.actions button{
 min-height:75px;
 font-size:17px;
 box-shadow:0 7px 17px #163d6917;
}

a{color:#1769db}
.entry{border-bottom:1px solid #ebeff5;padding:14px 0}

summary{
 padding:15px!important;
 background:#f3f7fd;
 border-radius:11px;
 margin:10px 0;
}

.message{
 background:#e8f5ed;
 border:1px solid #b6e2c8;
 color:#146340;
}

#live-timer{
 font-size:38px;
 font-weight:850;
 letter-spacing:2px;
 color:#125db8;
 margin:16px 0;
 font-variant-numeric:tabular-nums;
}

.mobile-nav{display:none}

.sidework-login{
 min-height:100vh;
 background:radial-gradient(circle at 85% 12%,#24598a,#0b2038 65%);
}
.sidework-login .card{
 max-width:420px;
 margin:20px auto!important;
 padding:34px!important;
 box-shadow:0 24px 65px #0004!important;
}
.login-identity{text-align:center;margin-bottom:24px}
.login-identity img{width:92px;height:92px}
.login-identity h1{margin:8px 0 0;color:#102743}
.login-identity p{margin:4px 0;color:#75859a}

@media(max-width:650px){
 header{padding:12px 17px}
 .brand-icon{width:42px;height:42px}
 .brand-name{font-size:19px}
 main{margin:14px auto!important;padding:0 12px 96px!important}
 .card{padding:19px!important;border-radius:17px!important}
 .dash-hero{padding:23px 19px;gap:10px}
 .dash-hero h2{font-size:25px}
 .hero-stat{min-width:78px;padding:12px 8px}
 .hero-stat strong{font-size:26px}
 .hero-stat span{font-size:10px}
 .hero-buttons a{padding:10px 12px}
 .mobile-nav{
  display:flex;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fffffffa;
  box-shadow:0 -5px 25px #17243a16;
  border-top:1px solid #e5eaf2;
  z-index:100;
  justify-content:space-around;
  padding:8px 4px max(10px,env(safe-area-inset-bottom));
 }
 .mobile-nav a{
  color:#50627a;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  text-align:center;
  min-width:65px;
 }
 .mobile-nav a span{
  display:block;
  font-size:23px;
  line-height:28px;
 }
 .mobile-nav a.active{color:#1769e7}
}