/* KlikSkor brand system: Royal Blue + White + Yellow */
:root{
  --ks-blue:#0058a3;
  --ks-blue-dark:#003f7d;
  --ks-yellow:#ffda1a;
  --ks-yellow-dark:#efc900;
  --ks-white:#fff;
  --ks-ink:#102a43;
  --ks-muted:#52677a;
  --ks-line:#d8e3ec;
  --ks-bg:#f4f8fb;
  --p:#0058a3;
  --p2:#0058a3;
  --pink:#ffda1a;
  --blue:#0058a3;
  --yellow:#ffda1a;
  --ink:#102a43;
  --muted:#52677a;
  --line:#d8e3ec;
  --bg:#f4f8fb;
}

html{accent-color:var(--ks-blue)}
body{background:var(--ks-bg)!important;color:var(--ks-ink)!important;font-family:"Avenir Next","Segoe UI",Arial,sans-serif!important}
a{color:var(--ks-blue)}

/* Header identity */
.hero{background:var(--ks-blue)!important;color:#fff!important;border-radius:0!important;border-bottom:8px solid var(--ks-yellow)!important;box-shadow:none!important}
.hero h1,.hero h2,.hero h3,.hero p,.hero .brand{color:#fff}
.hero h1 span,.brand h1 span{color:var(--ks-yellow)!important}
.hero .icon,.hero .mark,.mini-logo{background:var(--ks-yellow)!important;color:var(--ks-blue-dark)!important;border-radius:6px!important;box-shadow:none!important}
.hero:before,.hero:after{filter:none!important}
.back{color:#fff!important;text-decoration:none!important}

/* Cards and navigation */
.card,.setcard,.install,.tabs,.package,.plan,.order-card,.summary-card,.question-card,.record-card{
  background:#fff!important;
  border-color:var(--ks-line)!important;
  border-radius:9px!important;
  box-shadow:6px 6px 0 #dce9f2!important;
}
.chapter,.simulation{border-left-color:var(--ks-blue)!important}
.tag,.pill,.curriculum span,.badge,.chip{
  background:#e8f2fa!important;
  color:var(--ks-blue-dark)!important;
  border-color:#b7d3e7!important;
  border-radius:4px!important;
}
.tab{border-radius:5px!important;background:#e8f2fa!important;color:var(--ks-blue-dark)!important}
.tab.active,.active.tab{background:var(--ks-blue)!important;color:#fff!important}
.go,.panel-title h2{color:var(--ks-blue)!important}

/* Buttons */
button,.btn,.primary,.install-btn,.cta,.action-btn{
  border-radius:6px!important;
}
.primary,.btn:not(.light):not(.ghost):not(.danger):not(.secondary),.install-btn,.cta-primary{
  background:var(--ks-blue)!important;
  color:#fff!important;
  box-shadow:0 4px 0 var(--ks-blue-dark)!important;
}
.secondary,.premium-link,.guest-link,.noteBtn,.cta-yellow{
  background:var(--ks-yellow)!important;
  color:var(--ks-blue-dark)!important;
  border-color:var(--ks-yellow-dark)!important;
}
.ghost,.light{background:#e8f2fa!important;color:var(--ks-blue-dark)!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--ks-yellow)!important;outline-offset:2px}

/* Quiz components */
.progress{background:#dfe9f1!important}.bar{background:var(--ks-yellow)!important}
.seticon,.avatar,.logo{background:#e8f2fa!important;color:var(--ks-blue)!important;border-radius:7px!important}
.opt{border-radius:7px!important;border-color:var(--ks-line)!important}.opt:hover:not(:disabled){border-color:var(--ks-blue)!important;background:#eef6fc!important}
.opt.good{background:#e9f8ef!important;border-color:#71be91!important;color:#0f7047!important}.opt.bad{background:#fff0f0!important;border-color:#e59a9a!important;color:#a23131!important}
.feedback,.notice{border-radius:7px!important}.feedbackCard{background:#fff!important;border:2px solid var(--ks-line)!important}
.stat{border-radius:6px!important;background:#eef5fa!important}

/* Forms, account, premium and admin */
input,textarea,select{border-radius:6px!important;border-color:var(--ks-line)!important;background:#fff!important;color:var(--ks-ink)!important}
input:focus,textarea:focus,select:focus{border-color:var(--ks-blue)!important;box-shadow:0 0 0 3px rgba(0,88,163,.14)!important}
.step-no{background:var(--ks-yellow)!important;color:var(--ks-blue-dark)!important;border-radius:4px!important}
.quota,.notice,.explain{border-radius:7px!important}.sales-card{border-top:7px solid var(--ks-yellow)!important}

/* Remove generic AI-style effects */
.hero,.primary,.tab.active,.bar,.feedbackCard,.simulation,.account-login-link,.guest-link,.premium-link{
  background-image:none!important;
}
dialog{border-radius:9px!important}

@media (hover:hover){
  .card:hover,.setcard:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ks-yellow)!important}
}