:root {
  --ppka-ink: #102033;
  --ppka-muted: #64748b;
  --ppka-line: rgba(15, 23, 42, .10);
  --ppka-primary: #1d4ed8;
  --ppka-primary-2: #0891b2;
  --ppka-accent: #f59e0b;
  --ppka-bg-1: #f8fafc;
  --ppka-bg-2: #eef6ff;
  --ppka-card: rgba(255, 255, 255, .94);
  --ppka-radius: 1.15rem;
  --ppka-shadow: 0 18px 45px rgba(15, 23, 42, .10);
  --ppka-shadow-soft: 0 10px 28px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.ppka-app {
  min-height: 100vh;
  color: var(--ppka-ink);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 33rem),
    radial-gradient(circle at 85% 10%, rgba(14, 165, 233, .14), transparent 28rem),
    linear-gradient(180deg, var(--ppka-bg-2) 0%, var(--ppka-bg-1) 34rem, #ffffff 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.ppka-app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 68%);
  z-index: -1;
}

.ppka-main-container { max-width: 1320px; }

.ppka-navbar {
  background: linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 64, 175, .96) 58%, rgba(8, 145, 178, .96)) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.ppka-brand {
  display: inline-flex;
  align-items: center;
  gap: .68rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ppka-brand-mark {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: .9rem;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #22c55e 48%, #06b6d4);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.28);
}

.ppka-nav-actions .btn {
  border-radius: 999px;
  padding-inline: .82rem;
  font-weight: 650;
}

.ppka-nav-actions .btn-outline-light {
  border-color: rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
}

.ppka-nav-actions .btn-outline-light:hover,
.ppka-nav-actions .btn-outline-light:focus {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .65);
}

.ppka-user-pill {
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  padding: .35rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
}

.card {
  border: 1px solid var(--ppka-line);
  border-radius: var(--ppka-radius);
  background: var(--ppka-card);
  box-shadow: var(--ppka-shadow-soft);
  overflow: hidden;
}

.card .card-title, h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; }
.table { --bs-table-bg: transparent; }
.table thead th {
  color: #475569;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  background: rgba(226, 232, 240, .55);
  border-bottom: 1px solid var(--ppka-line);
}
.table tbody tr:hover td { background: rgba(59, 130, 246, .045); }

.form-control, .form-select {
  border-color: rgba(100, 116, 139, .28);
  border-radius: .86rem;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(37, 99, 235, .65);
  box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .11) !important;
}

.btn { border-radius: .85rem; font-weight: 650; }
.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(.98); transform: translateY(-1px); }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger, .btn-outline-success { background: rgba(255, 255, 255, .72); }
.alert { border-radius: 1rem; border-width: 1px; }
.badge { border-radius: 999px; padding: .45em .7em; }

.ppka-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 82% 18%, rgba(125, 211, 252, .45), transparent 22rem),
    radial-gradient(circle at 62% 95%, rgba(245, 158, 11, .24), transparent 18rem),
    linear-gradient(135deg, #0f172a 0%, #1d4ed8 54%, #0891b2 100%);
  box-shadow: var(--ppka-shadow);
  border: 1px solid rgba(255, 255, 255, .20);
}
.ppka-hero::after {
  content: "";
  position: absolute;
  width: 26rem;
  height: 26rem;
  right: -9rem;
  top: -9rem;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.20) 0 2px, transparent 2px 13px);
  opacity: .55;
}
.ppka-hero-inner { position: relative; z-index: 1; padding: clamp(1.5rem, 3vw, 2.4rem); }
.ppka-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.13);
  color: rgba(255,255,255,.94);
  border-radius: 999px;
  padding: .35rem .72rem;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.ppka-hero-title {
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.03;
  font-weight: 850;
  letter-spacing: -.055em;
}
.ppka-hero-text { color: rgba(255,255,255,.82); font-size: 1.04rem; max-width: 62rem; }
.ppka-hero-illustration { position: relative; z-index: 1; min-height: 17rem; display: grid; place-items: center; padding: 1.4rem; }
.ppka-visual-card {
  width: min(100%, 24rem);
  border-radius: 1.35rem;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 24px 60px rgba(0,0,0,.20);
  backdrop-filter: blur(12px);
  padding: 1rem;
}
.ppka-logo-card {
  display: grid;
  place-items: center;
  width: min(100%, 26rem);
  min-height: 24rem;
  padding: 1.1rem;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.ppka-visual-logo {
  display: block;
  width: min(100%, 23rem);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(15,23,42,.12));
}
.ppka-mini-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: .55rem; height: 8.5rem; padding: 1rem .75rem .6rem; }
.ppka-mini-bars span {
  display: block;
  border-radius: 999px 999px .35rem .35rem;
  background: linear-gradient(180deg, #fbbf24, #22c55e 55%, #38bdf8);
  min-height: 1.2rem;
  box-shadow: 0 8px 16px rgba(0,0,0,.16);
}
.ppka-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .78rem; }
.ppka-kpi-card { border-radius: 1.1rem; padding: 1rem; border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.ppka-kpi-card .value { display: block; font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 840; line-height: 1; }
.ppka-kpi-card .label { color: rgba(255,255,255,.72); font-size: .78rem; }
.ppka-feature-card { height: 100%; transition: transform .18s ease, box-shadow .18s ease; }
.ppka-feature-card:hover { transform: translateY(-3px); box-shadow: var(--ppka-shadow); }
.ppka-feature-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(8,145,178,.16));
  color: var(--ppka-primary);
  font-size: 1.35rem;
}
.ppka-stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.ppka-stat { border-radius: 1rem; background: rgba(248, 250, 252, .9); border: 1px solid var(--ppka-line); padding: .95rem; }
.ppka-stat strong { display: block; font-size: 1.45rem; line-height: 1; }
.ppka-chart-card canvas { max-height: 360px; }
.ppka-section-title { font-weight: 800; letter-spacing: -.035em; }
.ppka-muted { color: var(--ppka-muted); }
.ppka-footer { color: #64748b; border-top: 1px solid var(--ppka-line); margin-top: 2rem; padding-top: 1.2rem; }

@media (max-width: 991.98px) {
  .ppka-nav-actions { align-items: stretch !important; padding-top: .75rem; }
  .ppka-nav-actions .btn, .ppka-user-pill { width: 100%; text-align: left; }
  .ppka-stat-strip, .ppka-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .ppka-stat-strip, .ppka-kpi-grid { grid-template-columns: 1fr; }
  .ppka-hero-inner { padding: 1.15rem; }
}
@media print {
  body.ppka-app { background: #fff !important; }
  body.ppka-app::before, .ppka-navbar, .ppka-footer { display: none !important; }
  .card { box-shadow: none !important; border-color: #cbd5e1 !important; }
  .ppka-main-container { max-width: none !important; width: 100% !important; }
}


@media (max-width: 575.98px) {
  .ppka-logo-card { min-height: 18rem; padding: .9rem; }
  .ppka-visual-logo { width: min(100%, 17rem); }
}


@media (min-width: 768px) and (max-width: 991.98px) {
  .ppka-hero .row { align-items: center; }
  .ppka-hero-inner { padding-right: 1rem; }
  .ppka-hero-title { font-size: clamp(1.9rem, 4.2vw, 3rem); }
  .ppka-hero-text { font-size: .98rem; }
  .ppka-logo-card {
    width: 100%;
    min-height: 18rem;
    padding: .85rem;
  }
  .ppka-visual-logo {
    width: min(100%, 16rem);
  }
  .ppka-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


.ppka-hero--with-logo {
  min-height: 32rem;
}

.ppka-hero-inner--with-logo {
  position: relative;
  z-index: 2;
  max-width: min(58rem, 60%);
}

.ppka-hero-logo-float {
  position: absolute;
  right: clamp(1rem, 3vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: min(32vw, 25rem);
  max-width: 100%;
}

.ppka-logo-card--float {
  width: 100%;
  min-height: 0;
}

@media (max-width: 991.98px) {
  .ppka-hero--with-logo { min-height: 0; }
  .ppka-hero-inner--with-logo { max-width: 100%; padding-right: clamp(1.15rem, 3vw, 2rem); }
  .ppka-hero-logo-float {
    position: static;
    transform: none;
    width: min(100%, 20rem);
    margin: 0 auto 1.25rem;
    padding: 0 1rem 1rem;
  }
}


/* 2026-04-25 refinement: smaller hero logo aligned to the upper-right */
.ppka-hero--with-logo {
  min-height: 30rem;
}

.ppka-hero-inner--with-logo {
  max-width: min(58rem, calc(100% - 17rem));
  padding-right: 12rem;
}

.ppka-hero-logo-float {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  transform: none;
  width: 12.5rem;
  z-index: 2;
}

.ppka-logo-card--float {
  min-height: auto;
  padding: .55rem;
  border-radius: 1.2rem;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.ppka-logo-card--float .ppka-visual-logo {
  width: 100%;
  max-width: 10.8rem;
  margin-inline: auto;
  filter: drop-shadow(0 10px 20px rgba(15,23,42,.10));
}

@media (max-width: 991.98px) {
  .ppka-hero-inner--with-logo {
    max-width: 100%;
    padding-right: clamp(1.15rem, 3vw, 2rem);
  }

  .ppka-hero-logo-float {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 8.75rem;
    margin: 0;
    padding: 0;
  }

  .ppka-logo-card--float {
    padding: .4rem;
  }

  .ppka-logo-card--float .ppka-visual-logo {
    max-width: 7.5rem;
  }
}

@media (max-width: 575.98px) {
  .ppka-hero-logo-float {
    width: 6.5rem;
    top: .85rem;
    right: .85rem;
  }

  .ppka-logo-card--float .ppka-visual-logo {
    max-width: 5.7rem;
  }

  .ppka-hero-title {
    padding-top: 4.5rem;
  }
}


/* direct simple hero logo fix */
.ppka-hero-simple-logo {
  position: relative;
  overflow: hidden;
}
.ppka-hero-inner-simple-logo {
  position: relative;
  z-index: 2;
  max-width: min(58rem, calc(100% - 170px));
  padding-right: 140px;
}
@media (max-width: 767.98px) {
  .ppka-hero-inner-simple-logo {
    max-width: 100%;
    padding-right: 0;
    padding-top: 92px;
  }
  .ppka-hero-corner-logo {
    width: 82px !important;
    top: 16px !important;
    right: 16px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }
}


/* 2026-04-25 final hero logo treatment: flush-right decorative element */
.ppka-hero-simple-logo {
  position: relative;
  overflow: hidden;
}

.ppka-hero-inner-simple-logo {
  position: relative;
  z-index: 2;
  max-width: min(58rem, calc(100% - 260px));
  padding-right: 0;
}

.ppka-hero-logo-decor {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
  width: clamp(170px, 19vw, 250px);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.ppka-hero-logo-decor-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: .20;
  filter: drop-shadow(0 14px 24px rgba(15,23,42,.12));
}

@media (max-width: 1199.98px) {
  .ppka-hero-inner-simple-logo {
    max-width: min(54rem, calc(100% - 210px));
  }
  .ppka-hero-logo-decor {
    width: 180px;
  }
}

@media (max-width: 991.98px) {
  .ppka-hero-inner-simple-logo {
    max-width: 100%;
    padding-right: 0;
  }
  .ppka-hero-logo-decor {
    display: none;
  }
}

@media (min-width: 992px) {
  .ppka-kpi-grid {
    max-width: min(100%, calc(100% - 10px));
  }
}


/* 2026-04-25 final override: small flush-right decorative logo, no clash */
.ppka-hero-simple-logo {
  position: relative !important;
  overflow: hidden !important;
}
.ppka-hero-inner-simple-logo {
  position: relative !important;
  z-index: 2 !important;
  max-width: min(58rem, calc(100% - 120px)) !important;
  padding-right: 0 !important;
}
.ppka-hero-logo-decor {
  position: absolute !important;
  top: 50% !important;
  right: -38px !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  width: clamp(95px, 9vw, 128px) !important;
  display: block !important;
  pointer-events: none !important;
}
.ppka-hero-logo-decor-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: .16 !important;
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.10)) !important;
}
@media (max-width: 1199.98px) {
  .ppka-hero-inner-simple-logo {
    max-width: 100% !important;
  }
  .ppka-hero-logo-decor {
    display: none !important;
  }
}


/* 2026-04-25 hard fix: remove oversized hero logo markup; use a tiny non-clashing watermark only on wide screens */
.ppka-hero-logo-decor,
.ppka-hero-corner-logo,
.ppka-hero-illustration,
.ppka-logo-card,
.ppka-visual-logo,
.ppka-visual-card.ppka-logo-card {
  display: none !important;
}

.ppka-hero-simple-logo {
  position: relative !important;
  overflow: hidden !important;
}

.ppka-hero-inner-simple-logo {
  position: relative !important;
  z-index: 2 !important;
  max-width: 60rem !important;
  padding-right: 0 !important;
}

@media (min-width: 1200px) {
  .ppka-hero-simple-logo::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 1rem !important;
    width: 6.5rem !important;
    height: 6.5rem !important;
    transform: translateY(-50%) !important;
    background: url("../img/ppka_logo_clean.png") no-repeat center / contain !important;
    opacity: .10 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1199.98px) {
  .ppka-hero-simple-logo::before {
    content: none !important;
    display: none !important;
  }
}


/* 2026-04-25 visibility tune: make right-side hero logo more visible but still decorative */
@media (min-width: 1200px) {
  .ppka-hero-simple-logo::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 1.35rem !important;
    width: 9.5rem !important;
    height: 9.5rem !important;
    transform: translateY(-50%) !important;
    background: url("../img/ppka_logo_clean.png") no-repeat center / contain !important;
    opacity: .20 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 14px 26px rgba(0,0,0,.12)) !important;
  }
}

@media (min-width: 1400px) {
  .ppka-hero-simple-logo::before {
    width: 10.75rem !important;
    height: 10.75rem !important;
    opacity: .22 !important;
    right: 1.75rem !important;
  }
}


/* 2026-04-25 final responsive visibility update: visible on desktop, tablet, and mobile */
.ppka-hero-simple-logo {
  position: relative !important;
  overflow: hidden !important;
}

@media (min-width: 1200px) {
  .ppka-hero-inner-simple-logo {
    max-width: min(58rem, calc(100% - 13.5rem)) !important;
    padding-right: 8.5rem !important;
  }
  .ppka-hero-simple-logo::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 1.2rem !important;
    width: 10.5rem !important;
    height: 10.5rem !important;
    transform: translateY(-50%) !important;
    background: url("../img/ppka_logo_clean.png") no-repeat center / contain !important;
    opacity: .28 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.12)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .ppka-hero-inner-simple-logo {
    max-width: calc(100% - 8rem) !important;
    padding-right: 6.25rem !important;
  }
  .ppka-hero-simple-logo::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: .85rem !important;
    width: 7.25rem !important;
    height: 7.25rem !important;
    transform: translateY(-50%) !important;
    background: url("../img/ppka_logo_clean.png") no-repeat center / contain !important;
    opacity: .23 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.10)) !important;
  }
}

@media (max-width: 767.98px) {
  .ppka-hero-inner-simple-logo {
    max-width: 100% !important;
    padding-right: 4.65rem !important;
  }
  .ppka-hero-simple-logo::before {
    content: "" !important;
    position: absolute !important;
    top: .95rem !important;
    right: .8rem !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    transform: none !important;
    background: url("../img/ppka_logo_clean.png") no-repeat center / contain !important;
    opacity: .20 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.08)) !important;
  }
}

/* 2026-04-25 responsive polish: tablet and mobile layout pass */
html, body.ppka-app {
  max-width: 100%;
  overflow-x: hidden;
}

img, canvas, svg, video {
  max-width: 100%;
  height: auto;
}

.ppka-navbar .container-fluid {
  gap: .75rem;
}

.ppka-brand span:last-child {
  display: inline-block;
  max-width: min(48vw, 24rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-toggler {
  border-color: rgba(255,255,255,.32) !important;
  border-radius: .85rem;
  padding: .35rem .55rem;
}

.ppka-nav-actions {
  justify-content: flex-end;
}

.ppka-nav-actions .btn,
.ppka-user-pill {
  white-space: nowrap;
}

.card-body {
  min-width: 0;
}

.table-responsive {
  border-radius: 1rem;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table th,
.table td {
  vertical-align: middle;
}

.table td.text-end,
.table th.text-end {
  white-space: nowrap;
}

.ppka-hero {
  min-height: auto !important;
}

.ppka-hero-title,
.ppka-hero-text,
.ppka-section-title,
.card-title {
  overflow-wrap: anywhere;
}

.ppka-hero-simple-logo::before {
  mix-blend-mode: normal;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .ppka-main-container {
    max-width: 100%;
  }

  .ppka-hero {
    border-radius: 1.25rem;
  }

  .ppka-hero-title {
    font-size: clamp(2.15rem, 4.8vw, 3.15rem) !important;
    max-width: calc(100% - 7.5rem);
  }

  .ppka-hero-text {
    max-width: calc(100% - 7rem);
  }

  .ppka-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: calc(100% - 7rem) !important;
  }

  .ppka-hero-inner-simple-logo {
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  .ppka-hero-simple-logo::before {
    content: "" !important;
    top: 50% !important;
    right: .9rem !important;
    width: 6.5rem !important;
    height: 6.5rem !important;
    transform: translateY(-50%) !important;
    opacity: .20 !important;
    background: url("../img/ppka_logo_clean.png") no-repeat center / contain !important;
    z-index: 1 !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .ppka-main-container {
    max-width: 100%;
  }

  .container.ppka-main-container {
    padding-top: 1rem !important;
  }

  .ppka-navbar .container-fluid {
    align-items: center;
  }

  .navbar-collapse {
    margin-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.16);
    padding-top: .75rem;
  }

  .ppka-nav-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem !important;
    width: 100%;
  }

  .ppka-nav-actions .btn,
  .ppka-user-pill {
    width: 100%;
    text-align: center !important;
    justify-content: center;
  }

  .ppka-user-pill {
    grid-column: span 2;
  }

  .ppka-hero {
    border-radius: 1.2rem;
  }

  .ppka-hero-inner,
  .ppka-hero-inner-simple-logo {
    padding: 1.35rem !important;
    max-width: 100% !important;
  }

  .ppka-hero-title {
    font-size: clamp(2rem, 5.2vw, 2.85rem) !important;
    line-height: 1.05;
    max-width: calc(100% - 6rem);
  }

  .ppka-hero-text {
    font-size: .98rem;
    max-width: calc(100% - 5.5rem);
  }

  .ppka-kpi-grid,
  .ppka-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .ppka-kpi-card {
    padding: .85rem !important;
  }

  .ppka-feature-card .card-body {
    padding: 1rem;
  }

  .ppka-hero-simple-logo::before {
    content: "" !important;
    top: 1rem !important;
    right: .9rem !important;
    width: 5.5rem !important;
    height: 5.5rem !important;
    transform: none !important;
    opacity: .18 !important;
    background: url("../img/ppka_logo_clean.png") no-repeat center / contain !important;
    z-index: 1 !important;
  }

  .row.g-2 > [class*="col-md-"],
  .row.g-3 > [class*="col-md-"] {
    min-width: 0;
  }

  .ppka-entry-lecturers .ppka-lecturer-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    max-height: 20rem !important;
  }
}

@media (max-width: 767.98px) {
  body.ppka-app::before {
    background-size: 26px 26px;
    opacity: .55;
  }

  .container.ppka-main-container {
    padding: .85rem .75rem 1.25rem !important;
  }

  .ppka-navbar {
    position: sticky;
  }

  .ppka-navbar .container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .ppka-brand {
    gap: .5rem;
    font-size: .98rem;
    min-width: 0;
  }

  .ppka-brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: .72rem;
    flex: 0 0 auto;
  }

  .ppka-brand span:last-child {
    max-width: calc(100vw - 8.25rem);
  }

  .navbar-collapse {
    margin-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.16);
    padding-top: .75rem;
  }

  .ppka-nav-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .5rem !important;
    width: 100%;
  }

  .ppka-nav-actions .btn,
  .ppka-user-pill {
    width: 100%;
    min-width: 0;
    padding: .55rem .6rem !important;
    text-align: center !important;
    font-size: .85rem;
  }

  .ppka-user-pill {
    grid-column: 1 / -1;
  }

  .ppka-hero {
    border-radius: 1rem;
    margin-bottom: 1rem !important;
  }

  .ppka-hero::after {
    width: 13rem;
    height: 13rem;
    top: -4rem;
    right: -5rem;
    opacity: .36;
  }

  .ppka-hero-inner,
  .ppka-hero-inner-simple-logo {
    padding: 1.05rem !important;
    max-width: 100% !important;
    padding-right: 1.05rem !important;
  }

  .ppka-eyebrow {
    font-size: .68rem;
    padding: .28rem .55rem;
    max-width: calc(100% - 4.25rem);
  }

  .ppka-hero-title {
    font-size: clamp(1.75rem, 10vw, 2.35rem) !important;
    line-height: 1.03;
    margin-top: .85rem !important;
    margin-bottom: .75rem !important;
    max-width: 100%;
    letter-spacing: -.045em;
  }

  .ppka-hero-text {
    font-size: .92rem;
    line-height: 1.45;
    margin-bottom: 1rem !important;
  }

  .ppka-hero .d-flex.gap-2.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .55rem !important;
  }

  .ppka-hero .btn {
    width: 100%;
    padding: .65rem .75rem;
  }

  .ppka-kpi-grid,
  .ppka-stat-strip {
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    margin-top: 1rem !important;
  }

  .ppka-kpi-card,
  .ppka-stat {
    padding: .8rem !important;
    border-radius: .9rem !important;
  }

  .ppka-kpi-card .value {
    font-size: 1.55rem !important;
  }

  .ppka-feature-card .card-body,
  .card .card-body {
    padding: .95rem !important;
  }

  .ppka-feature-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .85rem;
    font-size: 1.15rem;
  }

  .ppka-section-title,
  h3,
  h4,
  h5 {
    line-height: 1.15;
  }

  .d-flex.justify-content-between.align-items-center,
  .d-flex.justify-content-between.align-items-start {
    align-items: stretch !important;
  }

  .d-flex.justify-content-between.align-items-center > .btn,
  .d-flex.justify-content-between.align-items-start > .btn,
  .d-flex.justify-content-between.align-items-center > a.btn,
  .d-flex.justify-content-between.align-items-start > a.btn {
    width: 100%;
  }

  .row.g-2,
  .row.g-3 {
    --bs-gutter-x: .65rem;
    --bs-gutter-y: .65rem;
  }

  .form-control,
  .form-select,
  .btn {
    min-height: 2.55rem;
  }

  .form-label {
    margin-bottom: .25rem;
  }

  .input-group {
    flex-wrap: nowrap;
  }

  .input-group > .btn {
    width: auto;
  }

  .table-responsive {
    margin-left: -.1rem;
    margin-right: -.1rem;
  }

  .table {
    min-width: 720px;
    font-size: .86rem;
  }

  .table .btn-sm {
    padding: .35rem .55rem;
    font-size: .78rem;
  }

  .table td.text-end {
    white-space: nowrap;
  }

  .ppka-course-picker .ppka-course-results {
    max-height: 18rem !important;
  }

  .ppka-course-picker .ppka-course-option {
    grid-template-columns: 1fr !important;
    gap: .12rem !important;
    padding: .65rem !important;
  }

  .ppka-course-picker .ppka-course-title {
    white-space: normal !important;
  }

  .ppka-entry-lecturers .ppka-lecturer-grid {
    grid-template-columns: 1fr !important;
    max-height: 19rem !important;
    padding: .5rem !important;
  }

  .ppka-entry-lecturers .ppka-lecturer-card {
    padding: .6rem !important;
  }

  .ppka-entry-lecturers .ppka-lecturer-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .35rem !important;
  }

  .ppka-entry-lecturers .ppka-loaned-section {
    padding: .7rem !important;
  }

  .ppka-entry-lecturers .ppka-loaned-section > summary {
    align-items: flex-start !important;
  }

  .ppka-staff-move-details {
    position: static !important;
  }

  .ppka-staff-move-form {
    position: fixed !important;
    left: .75rem !important;
    right: .75rem !important;
    top: auto !important;
    bottom: .75rem !important;
    z-index: 1050 !important;
    min-width: 0 !important;
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
  }

  .ppka-hero-simple-logo::before {
    content: "" !important;
    position: absolute !important;
    top: .85rem !important;
    right: .75rem !important;
    width: 3.65rem !important;
    height: 3.65rem !important;
    transform: none !important;
    background: url("../img/ppka_logo_clean.png") no-repeat center / contain !important;
    opacity: .16 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.08)) !important;
  }
}

@media (max-width: 420px) {
  .ppka-nav-actions {
    grid-template-columns: 1fr;
  }

  .ppka-hero-title {
    font-size: clamp(1.55rem, 11vw, 2rem) !important;
  }

  .ppka-hero-simple-logo::before {
    width: 3rem !important;
    height: 3rem !important;
    opacity: .14 !important;
  }

  .ppka-eyebrow {
    max-width: calc(100% - 3.6rem);
  }
}