html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.authenticator-qr {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
  image-rendering: pixelated;
}

.karasu-navbar-logo {
  display: block;
  width: 224px;
  max-width: min(224px, calc(100vw - 6rem));
  height: auto;
  max-height: 56px;
  object-fit: contain;
}

.karasu-login {
  max-width: 640px;
}

.karasu-login-banner {
  display: block;
  width: 100%;
  height: clamp(80px, 18vw, 132px);
  max-height: 132px;
  object-fit: cover;
  object-position: center;
  border-bottom: 3px solid #b99050;
  border-radius: .5rem .5rem 0 0;
  margin-bottom: 1rem;
  background-color: #10263d;
}

.karasu-login h1 {
  color: #10263d;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.karasu-login .btn-primary {
  background-color: #10263d;
  border-color: #10263d;
}

.karasu-login .btn-primary:hover {
  background-color: #1b3d5f;
  border-color: #1b3d5f;
}
.v3-hero { background: linear-gradient(120deg,#123d4c,#1d6871 65%,#39937e); color: #fff; border-radius: 1.25rem; padding: clamp(1.5rem,4vw,3rem); margin-bottom: 1rem; box-shadow: 0 18px 45px #123d4c22; }
.v3-hero h1 { font-size: clamp(2rem,4vw,3.3rem); font-weight: 750; margin: .35rem 0; }
.v3-hero p { max-width: 55rem; opacity: .94; }
.v3-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; }
.v3-warning { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; align-items: center; background: #fff5d9; border-left: .35rem solid #bd7c13; color: #594018; padding: .9rem 1.15rem; border-radius: .4rem; margin: 1rem 0 1.5rem; }
.v3-section-title { color: #123d4c; font-size: 1.4rem; margin: 2rem 0 1rem; }
.v3-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
.v3-kpi, .v3-module { border: 1px solid #dce8e8; border-radius: .9rem; background: #fff; padding: 1.2rem; box-shadow: 0 6px 18px #123d4c0b; }
.v3-kpi { display: flex; flex-direction: column; gap: .45rem; }
.v3-kpi > span { color: #42626c; font-weight: 650; }
.v3-kpi strong { color: #123d4c; font-size: clamp(1.45rem,2.5vw,2rem); overflow-wrap: anywhere; }
.v3-kpi small, .v3-footnote { color: #526771; }
.v3-kpi details { margin-top: auto; color: #526771; font-size: .85rem; }
.v3-kpi details p { margin: .4rem 0; }
.v3-module-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 1rem; }
.v3-module h3 { color: #123d4c; font-size: 1.05rem; }
.v3-module p { margin-bottom: 0; color: #42626c; }
.v3-footnote { margin: 1.4rem 0; }
.v3-table-wrap { border: 1px solid #dce8e8; border-radius: .8rem; }
.v3-table-wrap table { margin: 0; min-width: 650px; }
.v3-bar { width: 130px; height: .65rem; border-radius: 1rem; background: #e2efec; overflow: hidden; }
.v3-bar span { display: block; height: 100%; background: linear-gradient(90deg,#26867b,#62b79f); }
.v3-caveats { background: #f1f6f6; border-radius: .8rem; padding: 1.1rem 1.4rem; margin-top: 1.5rem; color: #315662; }
@media(max-width: 600px) { .v3-kpi-grid,.v3-module-grid { grid-template-columns: 1fr; } .v3-hero { border-radius: .8rem; } }