/* MKA_UI_V2 */
.mka-hidden{display:none!important}

.mka-state-banner{
  margin-top:16px;
  padding:14px 15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,14,24,.82);
  color:#eef6ff;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.mka-state-banner b{display:block;font-size:15px;margin-bottom:5px}
.mka-state-banner small{display:block;color:#94a0b4;line-height:1.35}
.mka-state-banner.warning{border-color:rgba(255,184,76,.35);background:rgba(35,23,8,.82)}
.mka-state-banner.danger{border-color:rgba(255,82,82,.35);background:rgba(35,8,10,.82)}
.mka-state-banner.success{border-color:rgba(50,214,109,.30);background:rgba(5,28,16,.82)}

.mka-race-card{
  margin-top:14px;
  padding:17px;
  border-radius:24px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid rgba(70,160,255,.26);
  background:
    radial-gradient(circle at 18% 20%,rgba(22,130,255,.18),transparent 30%),
    linear-gradient(135deg,rgba(7,13,26,.92),rgba(3,7,13,.82));
  box-shadow:0 16px 40px rgba(0,0,0,.34);
  cursor:pointer;
}
.mka-race-card:active{transform:scale(.985)}
.mka-race-icon{
  width:52px;height:52px;border-radius:18px;
  display:grid;place-items:center;
  font-size:27px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.mka-race-card b{display:block;font-size:17px}
.mka-race-card small{display:block;margin-top:5px;color:#93a0b4;font-size:12px}
.mka-race-go{margin-left:auto;color:#62b5ff;font-size:28px}

.mka-screen{
  position:fixed;
  inset:0;
  z-index:70;
  display:none;
  overflow:auto;
  color:#f6f8fc;
  background:
    radial-gradient(circle at 50% 0,rgba(22,130,255,.15),transparent 35%),
    linear-gradient(180deg,#03060c,#010204);
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.mka-screen.open{display:block}
.mka-screen-head{
  position:sticky;
  top:0;
  z-index:4;
  min-height:74px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  background:rgba(2,4,8,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.mka-screen-back{
  width:44px;height:44px;border:0;border-radius:16px;
  background:rgba(255,255,255,.08);
  color:#fff;font-size:30px;
}
.mka-screen-title{text-align:center}
.mka-screen-title b{display:block;font-size:20px}
.mka-screen-title span{display:block;margin-top:3px;color:#8792a5;font-size:12px}
.mka-screen-wrap{max-width:430px;margin:0 auto;padding:16px}

.mka-card-v2{
  margin-bottom:14px;
  padding:17px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(7,11,18,.82);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.mka-card-v2 h3{margin:0 0 13px;font-size:18px}
.mka-info-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.mka-info-row:first-of-type{border-top:0}
.mka-info-row span{color:#8f98aa}
.mka-info-row b{text-align:right}

.mka-action-list{display:grid;gap:10px}
.mka-action-btn{
  width:100%;
  border:0;
  border-radius:18px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#f6f8fc;
  background:rgba(255,255,255,.07);
  text-align:left;
}
.mka-action-btn strong{font-size:15px}
.mka-action-btn small{display:block;margin-top:3px;color:#8f98aa}
.mka-action-btn.primary{
  background:linear-gradient(135deg,#1682ff,#3fa7ff);
  color:white;
  box-shadow:0 14px 30px rgba(22,130,255,.25);
}
.mka-action-btn.danger{background:rgba(255,73,73,.12);color:#ff9b9b}

.mka-device-item{
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}
.mka-device-top{display:flex;justify-content:space-between;gap:10px}
.mka-device-top b{font-size:15px}
.mka-device-top span{color:#62b5ff;font-size:12px}
.mka-device-meta{margin-top:7px;color:#8f98aa;font-size:12px;line-height:1.45}
.mka-device-delete{
  margin-top:10px;
  width:100%;
  border:0;
  border-radius:14px;
  padding:10px 12px;
  color:#ff9b9b;
  background:rgba(255,73,73,.11);
}

.mka-onboarding{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:flex-end;
  padding:16px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(10px);
}
.mka-onboarding.open{display:flex}
.mka-onboarding-box{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:22px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 50% 0,rgba(22,130,255,.20),transparent 35%),
    rgba(7,11,18,.96);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
}
.mka-onboarding-box h2{margin:0 0 8px;font-size:25px}
.mka-onboarding-box p{margin:0 0 16px;color:#9aa5b7;line-height:1.45}
.mka-onboarding-actions{display:grid;gap:10px}
.mka-onboarding-actions button{
  border:0;border-radius:18px;padding:15px;
  color:#fff;background:rgba(255,255,255,.08);
}
.mka-onboarding-actions button.primary{background:linear-gradient(135deg,#1682ff,#39a7ff)}

.mka-toast{
  position:fixed;
  left:14px;right:14px;
  bottom:calc(86px + env(safe-area-inset-bottom));
  z-index:150;
  max-width:430px;
  margin:auto;
  padding:13px 15px;
  border-radius:18px;
  color:#fff;
  background:rgba(12,18,28,.96);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 44px rgba(0,0,0,.42);
  display:none;
}
.mka-toast.show{display:block}