*{box-sizing:border-box}
html,body{height:100%}
body{margin:0}
a{color:inherit}

:root{
  --cal-navy:#1f3a5a;
  --cal-navy-2:#24466d;
  --cal-navy-deep:#172c45;
  --cal-green:#2f8f4d;
  --cal-green-2:#257240;
  --cal-ink:#101828;
  --cal-muted:#5f6b7b;
  --cal-border:#d6dce5;
  --cal-card:#f8fafc;
}

input,select,textarea,
.kkInput,.kkCode,.kkInputPhone{font-size:16px!important}

html,body{-webkit-text-size-adjust:100%;touch-action:manipulation}
body.kkView,
body.kkDash{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  color:var(--cal-ink);
  font-family:"Avenir Next","Montserrat","Helvetica Neue",Arial,sans-serif;
}

.kkApp{
  height:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
}

button,a{-webkit-tap-highlight-color:transparent}

/* auth */
body.kkView{
  background:
    radial-gradient(1200px 420px at 50% -120px, rgba(31,58,90,.18), transparent 65%),
    linear-gradient(180deg, #f0f2f5 0%, #e9edf2 100%);
}

body.kkView::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:radial-gradient(circle at 22px 22px, rgba(31,58,90,.14) 1.6px, transparent 1.6px);
  background-size:44px 44px;
}

.kkWrap{
  width:min(540px,100%);
  margin:0 auto;
  padding:18px 12px 30px;
}

.kkShell{max-width:470px;margin:0 auto}

.kkLogoCenterLab{
  border-radius:20px 20px 0 0;
  background:
    radial-gradient(80% 180% at 10% 0%, rgba(255,255,255,.08), transparent 55%),
    var(--cal-navy);
  border:1px solid #2d4f75;
  border-bottom:0;
  padding:20px 18px 16px;
  margin:0;
}

.kkLabLogo{
  display:block;
  width:min(220px,56vw);
  max-height:96px;
  margin:0 auto;
  object-fit:contain;
}

.kkCard.kkLabCard{
  background:linear-gradient(180deg,#ffffff,#f5f8fc);
  border:1px solid var(--cal-border);
  border-radius:0 0 20px 20px;
  box-shadow:0 20px 40px rgba(17,24,39,.12);
  overflow:hidden;
}

.kkLabIntro{
  background:var(--cal-card);
  padding:14px 16px;
  border-bottom:1px solid #e2e8f0;
}

.kkLabTitle{
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--cal-navy-deep);
}

.kkLabSub{
  margin-top:5px;
  color:var(--cal-muted);
  font-size:13px;
  line-height:1.35;
}

.kkLabForm{padding:14px 16px 16px}

.kkLabel{
  display:block;
  margin:0 0 8px;
  color:#556070;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
}

.kkField.kkLabField{
  display:flex;
  align-items:center;
  border:1px solid #cfd8e3;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.kkFieldPrefix{
  padding:14px 12px;
  min-width:64px;
  text-align:center;
  border-right:1px solid #d6dce5;
  background:#f3f6fa;
  color:#475467;
  font-weight:800;
}

.kkInputPhone,
.kkInput,
.kkCode{
  width:100%;
  border:0!important;
  background:transparent!important;
  outline:none;
  padding:14px 12px;
  font-weight:800;
  color:#1d2939;
}

.kkInputPhone::placeholder,
.kkCode::placeholder{color:#98a2b3}

.kkCode{
  border:1px solid #cfd8e3!important;
  border-radius:14px;
  background:#fff!important;
  text-align:center;
  letter-spacing:.25em;
}

.kkBtn{
  width:100%;
  margin-top:14px;
  border:0;
  border-radius:14px;
  padding:14px 16px;
  background:linear-gradient(180deg,var(--cal-green),var(--cal-green-2));
  color:#fff;
  font-weight:900;
  font-size:17px;
  cursor:pointer;
  box-shadow:0 14px 26px rgba(38,105,64,.35);
}

.kkBtn:hover{filter:brightness(1.03)}
.kkBtn:active{transform:scale(.985)}

.kkError,
.kkNotice{
  margin:12px 16px 0;
  padding:11px 12px;
  border-radius:11px;
  font-size:13px;
}

.kkError{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
}

.kkNotice{
  background:#f0f9ff;
  border:1px solid #bae6fd;
  color:#075985;
}

.kkLinks.kkLabLinks{
  margin:0;
  padding:0 16px 14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#3e4b5d;
}

.kkLinks.kkLabLinks a{
  text-decoration:none;
  border-bottom:1px dashed rgba(62,75,93,.35);
}

.kkLabFooterLink{
  display:block;
  text-align:center;
  padding:12px 14px;
  border-top:1px solid #e2e8f0;
  background:#f7f9fc;
  text-decoration:none;
  color:#2b3950;
  font-size:13px;
  font-weight:600;
}

/* dashboard */
body.kkDash{
  background:
    radial-gradient(1000px 480px at 50% -140px, rgba(31,58,90,.22), transparent 60%),
    linear-gradient(180deg,#eef2f6 0%,#e8edf3 100%);
}

body.kkDash::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:radial-gradient(circle at 20px 20px, rgba(36,70,109,.18) 1.5px, transparent 1.5px);
  background-size:40px 40px;
}

body.kkDash .kkApp{position:relative;z-index:1;padding-bottom:26px}

.topBar{
  margin:10px auto 0;
  width:min(760px,calc(100% - 18px));
  padding:12px;
  border-radius:18px;
  border:1px solid #2d4f75;
  background:linear-gradient(180deg,var(--cal-navy),var(--cal-navy-2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.topLeft{display:flex;align-items:center;gap:10px;min-width:0}

.topLogo{
  width:40px;
  height:40px;
  border-radius:999px;
  background:#fff;
  border:1px solid #d8e0ea;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
}

.topLogo img,
.kkDialerLogo img{width:66%;height:66%;object-fit:contain}

.topTitle{
  color:#fff;
  font-size:15px;
  font-weight:900;
  line-height:1.15;
}

.topSub{margin-top:3px;color:#d5deea;font-size:11px;line-height:1.2}

.logoutBtn{
  text-decoration:none;
  border:1px solid rgba(255,255,255,.55);
  border-radius:12px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:10px 12px;
  white-space:nowrap;
}

.dialer{
  width:min(620px,calc(100% - 18px));
  margin:14px auto 0;
  border-radius:22px;
  border:1px solid #2f4f74;
  background:linear-gradient(180deg,#24466d,#1c3858);
  padding:14px;
  box-shadow:0 24px 40px rgba(15,23,42,.18);
}

.kkDialerBrand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 10px 12px;
}

.kkDialerLogo{
  width:38px;
  height:38px;
  border-radius:999px;
  background:#fff;
  border:1px solid #d8e0ea;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.kkDialerBrandText{text-align:left}
.kkDialerTitle{font-size:14px;font-weight:900;color:#fff}
.kkDialerSub{font-size:12px;color:#d6dfeb;margin-top:2px}

.screen{
  background:#eef2f6;
  border:1px solid #d2d9e4;
  border-radius:16px;
  padding:14px;
}

.dialDisplay{
  min-height:31px;
  text-align:center;
  font-size:26px;
  letter-spacing:.11em;
  font-weight:900;
  color:#1c2f49;
}

.dialHint{
  margin-top:6px;
  text-align:center;
  color:#51627a;
  font-size:11px;
}

.pad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}

.key{
  border:1px solid #ced6e2;
  border-radius:16px;
  background:#fff;
  color:#1f344f;
  padding:14px 0;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}

.key:active{transform:scale(.97)}

.actions{
  margin-top:12px;
  display:flex;
  gap:8px;
}

.btnGhost,
.btnCall{
  flex:1;
  border-radius:12px;
  padding:11px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.btnGhost{
  border:1px solid #bdc7d6;
  background:#f8fafc;
  color:#344054;
}

.btnCall{
  border:0;
  background:linear-gradient(180deg,var(--cal-green),var(--cal-green-2));
  color:#fff;
  box-shadow:0 12px 20px rgba(38,105,64,.35);
}

.toast{
  margin-top:10px;
  opacity:0;
  transform:translateY(4px);
  transition:.18s ease;
  border-radius:10px;
  padding:10px;
  border:1px solid #d2d9e4;
  background:#f8fafc;
  color:#2d3f58;
  font-size:12px;
}

.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{border-color:#86efac;background:#f0fdf4;color:#166534}
.toast.bad{border-color:#fca5a5;background:#fef2f2;color:#991b1b}

@media (max-width:520px){
  .kkWrap{padding:12px 8px 22px}
  .kkLabTitle{font-size:16px}
  .topBar{padding:10px}
  .topTitle{font-size:13px}
  .logoutBtn{padding:9px 10px}
  .dialer{padding:12px}
  .dialDisplay{font-size:23px}
}