:root{
  --km19-navy:#103a5a;
  --km19-navy-2:#0b2f4a;
  --km19-green:#0b9b70;
  --km19-green-dark:#08795a;
  --km19-mint:#eaf8f3;
  --km19-mint-2:#f5fcf9;
  --km19-cyan:#dff5f1;
  --km19-bg:#f4f9f8;
  --km19-surface:#ffffff;
  --km19-text:#18384c;
  --km19-muted:#6f8490;
  --km19-line:#dbeae6;
  --km19-danger:#dc3545;
  --km19-shadow:0 10px 28px rgba(17,64,75,.07);
  --km19-shadow-lg:0 18px 46px rgba(17,64,75,.12);
  --km19-radius:16px;
  --km19-radius-sm:11px;
  --km19-focus:0 0 0 .22rem rgba(11,155,112,.18);
}

html{scroll-behavior:smooth}
body.km-v19{
  background:
    radial-gradient(circle at 92% 7%,rgba(135,221,194,.16),transparent 26%),
    linear-gradient(180deg,#f8fcfb 0%,var(--km19-bg) 100%);
  color:var(--km19-text);
}

.km-skip-link{
  position:fixed;left:16px;top:-80px;z-index:3000;
  padding:10px 14px;border-radius:10px;background:#fff;color:var(--km19-navy);
  box-shadow:var(--km19-shadow-lg);font-weight:600;
}
.km-skip-link:focus{top:12px}

.km-v19 a:focus-visible,
.km-v19 button:focus-visible,
.km-v19 input:focus-visible,
.km-v19 select:focus-visible,
.km-v19 textarea:focus-visible,
.km-v19 [tabindex]:focus-visible{
  outline:0;
  box-shadow:var(--km19-focus)!important;
}

.km-v19 .km-app{min-height:100vh}

/* Sidebar */
.km-v19 .km-sidebar{
  width:266px;flex:0 0 266px;
  background:rgba(255,255,255,.97);
  color:var(--km19-text);
  border-right:1px solid var(--km19-line);
  box-shadow:8px 0 32px rgba(29,83,78,.045);
}
.km-v19 .km-side-brand{
  color:var(--km19-navy);
  padding:24px 20px 22px;
  gap:11px;
}
.km-v19 .km-side-brand:hover{color:var(--km19-green-dark)}
.km-v19 .km-brand-mark{
  width:44px;height:44px;flex-basis:44px;border-radius:14px;
  background:linear-gradient(145deg,#18aa7d,#087b61);
  color:#fff;
  box-shadow:0 8px 18px rgba(11,155,112,.22);
}
.km-v19 .km-side-brand strong{font-size:18px;color:var(--km19-navy)}
.km-v19 .km-side-brand small{
  max-width:174px;margin-top:4px;color:#7b918d;font-size:9px;line-height:1.45;
}
.km-v19 .km-nav-caption{
  padding:10px 23px 7px;
  color:#8ca19c;font-size:9px;letter-spacing:.08em;font-weight:700;
}
.km-v19 .km-side-nav{padding:0 12px}
.km-v19 .km-side-link{
  min-height:43px;margin-bottom:3px;padding:10px 12px;
  color:#4f6975;border-radius:12px;gap:11px;font-size:12px;
}
.km-v19 .km-side-link i{width:20px;text-align:center;font-size:17px;color:#638a83}
.km-v19 .km-side-link:hover{
  background:#f0faf6;color:var(--km19-green-dark);
  transform:none;
}
.km-v19 .km-side-link.active{
  color:#08795a;
  background:linear-gradient(100deg,#ddf5ec,#eefbf6);
  border:1px solid #ccebe0;
  box-shadow:none;
}
.km-v19 .km-side-link.active i{color:#07916b}
.km-v19 .km-side-help{
  color:#517169;background:#f1faf7;border:1px solid #d8ece6;
  margin:18px 14px;padding:12px;border-radius:13px;
}
.km-v19 .km-side-help>i{color:var(--km19-green)}
.km-v19 .km-side-help small{color:#7d958e}
.km-v19 .km-sidebar-foot{
  padding:10px 21px 22px;color:#819590;line-height:1.6;
}
.km-v19 .km-sidebar-foot span{color:#9aaba7}

/* Topbar */
.km-v19 .km-topbar{
  min-height:72px;height:auto;
  padding:10px clamp(16px,2.5vw,38px);
  background:linear-gradient(100deg,var(--km19-navy-2),var(--km19-navy));
  border:0;
  box-shadow:0 6px 20px rgba(12,48,73,.13);
  gap:18px;
  position:sticky;top:0;z-index:1015;
}
.km-v19 .km-top-actions{gap:9px;flex-shrink:0}
.btn-km-top-create{
  --bs-btn-color:#fff;--bs-btn-bg:#0b9b70;--bs-btn-border-color:#0b9b70;
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#07845f;--bs-btn-hover-border-color:#07845f;
  border-radius:10px;font-weight:600;padding:8px 13px;
}
.btn-km-top-ghost{
  --bs-btn-color:#edf9f5;--bs-btn-bg:rgba(255,255,255,.07);--bs-btn-border-color:rgba(255,255,255,.16);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:rgba(255,255,255,.13);--bs-btn-hover-border-color:rgba(255,255,255,.24);
  border-radius:10px;
}
.km-v19 .km-notification-bell{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);
  color:#fff;box-shadow:none;
}
.km-v19 .km-notification-bell:hover,
.km-v19 .km-notification-bell:focus-visible{background:rgba(255,255,255,.17);color:#fff}
.km-user-identity{align-items:center;gap:8px;padding-left:2px}
.km-v19 .km-avatar{
  width:38px;height:38px;
  background:linear-gradient(135deg,#d8f5ed,#a8dfd0);
  color:#0b5f4b;border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.km-v19 .km-user-name{color:#fff}
.km-v19 .km-user-name strong{font-size:11px;font-weight:600}
.km-v19 .km-user-name small{color:#b9d1dc;font-size:9px}
.km-logout-form{margin:0}
.km-logout-button{
  color:#ffe8e9;background:rgba(220,53,69,.10);border:1px solid rgba(255,187,194,.18);
  border-radius:10px;padding:8px 10px;
}
.km-logout-button:hover{color:#fff;background:rgba(220,53,69,.26);border-color:rgba(255,198,204,.28)}
.km-public-brand{display:flex;align-items:center;gap:8px;color:#fff}
.km-public-brand strong{display:block;font-size:13px}
.km-public-brand small{display:block;color:#bcd3dd;font-size:8px}
.km-public-brand .km-brand-mark{width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:16px}

/* Main surfaces */
.km-v19 .km-main{
  width:100%;max-width:1600px;margin-inline:auto;
  padding:28px clamp(15px,2.6vw,42px) 48px;
}
.km-v19 .km-footer{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--km19-line);color:#8a9c98;background:rgba(255,255,255,.62);
}
.km-footer-version{color:#a0b0ac}
.km-v19 .km-card,
.km-v19 .card{
  border-color:var(--km19-line);
  border-radius:var(--km19-radius);
  box-shadow:var(--km19-shadow);
}
.km-v19 .km-page-heading h1,
.km-v19 .km-form-title{color:var(--km19-navy)}
.km-v19 .km-eyebrow{color:var(--km19-green-dark)}
.km-v19 .btn-km-primary{
  --bs-btn-bg:var(--km19-green);--bs-btn-border-color:var(--km19-green);
  --bs-btn-hover-bg:var(--km19-green-dark);--bs-btn-hover-border-color:var(--km19-green-dark);
  box-shadow:0 5px 14px rgba(11,155,112,.16);
}
.km-v19 .btn-km-secondary{
  --bs-btn-color:#456b62;--bs-btn-bg:#f2faf7;--bs-btn-border-color:#dcece7;
  --bs-btn-hover-color:#08795a;--bs-btn-hover-bg:#e7f7f1;--bs-btn-hover-border-color:#cbe7dd;
}
.km-v19 .form-control,
.km-v19 .form-select{
  border-color:#d6e6e1;border-radius:10px;
}
.km-v19 .form-control:focus,
.km-v19 .form-select:focus{
  border-color:#74c4aa;box-shadow:var(--km19-focus);
}
.km-v19 .km-section-number{
  background:linear-gradient(135deg,#0ba779,#087c60);
}
.km-v19 .km-form-intro{
  color:#426b61;background:#eef9f5;border-color:#d5eee5;
}
.km-v19 .km-category-tag{background:#e6f8f1;color:#08785a}
.km-v19 .km-post-symbol,
.km-v19 .km-media-file-icon,
.km-v19 .km-public-owner-icon{
  background:#e9f8f3;color:#0a8d68;
}
.km-v19 .km-empty-icon{
  background:#eaf8f3;color:#0b9b70;
}

/* Status consistency */
.km-v19 .km-status-draft{background:#eef2f4;color:#62757d}
.km-v19 .km-status-review{background:#fff7df;color:#916617}
.km-v19 .km-status-revision{background:#fff0ed;color:#b75348}
.km-v19 .km-status-published{background:#e3f8ef;color:#087b58}

/* Page-specific legacy components inherit the design system */
.km-v19 .km-public-hero{
  background:linear-gradient(115deg,#0c5f54 0%,#0c8268 58%,#70c7aa 100%);
}
.km-v19 .km-public-card{
  border-color:var(--km19-line);box-shadow:var(--km19-shadow);
}
.km-v19 .km-public-card-body h3 a:hover{color:var(--km19-green-dark)}
.km-v19 .km-public-read{color:var(--km19-green-dark)}
.km-v19 .km-welcome{
  background:linear-gradient(115deg,#0b5e55 0%,#0c8e70 62%,#73cbb0 100%);
}
.km-v19 .km-list-search:focus-within{border-color:#7cc8af;box-shadow:var(--km19-focus)}
.km-v19 .km-filter:hover,
.km-v19 .km-filter.active{color:var(--km19-green)}
.km-v19 .km-filter.active{border-bottom-color:var(--km19-green)}

/* Notifications inherit global theme */
.km-v19 .km-notification-dropdown{
  border-color:var(--km19-line);box-shadow:var(--km19-shadow-lg);
}
.km-v19 .km-notification-preview-icon{background:#e9f8f3;color:var(--km19-green-dark)}
.km-v19 .km-notification-preview-copy strong{color:var(--km19-navy)}

/* Accessibility / touch */
.km-v19 .btn,
.km-v19 .km-side-link,
.km-v19 .km-choice-chip{min-height:40px}
.km-v19 .btn-sm{min-height:34px}
.km-v19 .km-alert{box-shadow:var(--km19-shadow)}

/* Mobile */
.km-v19 .km-mobile-bar{
  background:linear-gradient(100deg,var(--km19-navy-2),var(--km19-navy));
  border-bottom:0;color:#fff;
}
.km-mobile-brand{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px}
.km-mobile-brand .km-brand-mark{
  width:32px;height:32px;flex-basis:32px;border-radius:9px;font-size:15px;
}
.km-v19 .km-icon-button{color:#fff;border:1px solid rgba(255,255,255,.12)}
.km-v19 .offcanvas-header{background:#f6fbf9;color:var(--km19-navy);border-bottom:1px solid var(--km19-line)}

@media(max-width:1199.98px){
  .km-v19 .km-sidebar{width:250px;flex-basis:250px}
}
@media(max-width:991.98px){
  body.km-v19{padding-top:0}
  .km-v19 .km-app{padding-top:60px}
  .km-v19 .km-sidebar{width:270px!important}
  .km-v19 .km-topbar{top:60px;min-height:60px;padding:8px 14px}
  .km-v19 .km-main{padding-top:22px}
  .km-v19 .km-top-actions{margin-left:auto}
  .km-v19 .km-notification-dropdown{top:auto!important}
}
@media(max-width:767.98px){
  .km-v19 .km-topbar{gap:8px}
  .km-v19 .km-top-actions{gap:5px}
}
@media(max-width:575.98px){
  .km-v19 .km-topbar{align-items:center}
  .km-v19 .km-main{padding-left:12px;padding-right:12px}
  .km-v19 .km-page-heading{margin-bottom:18px}
  .km-v19 .km-card,.km-v19 .card{border-radius:13px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .km-v19 *, .km-v19 *::before, .km-v19 *::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}

/* STEP 19 staff workspace refinement */
.km-v19 .km-staff-topbar{
  background:linear-gradient(100deg,#08795a 0%,#0b9b70 58%,#16a87d 100%);
  box-shadow:0 6px 20px rgba(7,121,90,.18);
}
.km-v19 .km-staff-topbar .btn-km-top-create{
  --bs-btn-color:#08795a;
  --bs-btn-bg:#fff;
  --bs-btn-border-color:rgba(255,255,255,.92);
  --bs-btn-hover-color:#075f49;
  --bs-btn-hover-bg:#effaf6;
  --bs-btn-hover-border-color:#fff;
  box-shadow:0 4px 12px rgba(4,95,70,.14);
}
.km-v19 .km-side-brand{
  min-height:92px;
  padding:18px 20px 14px;
  justify-content:flex-start;
}
.km-side-brand-logo{
  display:block;
  width:min(190px,100%);
  max-height:58px;
  object-fit:contain;
  object-position:left center;
}
.km-mobile-brand-logo{
  display:block;
  width:132px;
  max-height:40px;
  object-fit:contain;
  object-position:center;
}
.km-v19 .km-mobile-bar{
  background:linear-gradient(100deg,#08795a 0%,#0b9b70 100%);
}
.km-v19 .km-eyebrow{
  color:#08795a;
  font-weight:700;
}
.km-detail-category-card{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:9px 13px;
  border:1px solid #9fd7c5;
  border-radius:12px;
  background:linear-gradient(135deg,#effaf6,#e4f7f0);
  color:#08795a;
  font-size:12px;
  font-weight:600;
  box-shadow:0 4px 12px rgba(11,155,112,.07);
}
.km-detail-category-card i{font-size:15px}
.km-workflow-state-card{
  border:1px solid #d8ebe5;
  border-radius:14px;
  background:#f8fcfb;
  padding:16px;
}
.km-workflow-state-card .km-workflow-state-label{
  color:#78908a;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.km-workflow-state-card .km-workflow-state-value{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:5px;
  color:#173d35;
  font-weight:700;
}
.km-workflow-state-card .km-workflow-state-note{
  margin-top:7px;
  color:#6f8580;
  font-size:11px;
  line-height:1.6;
}
.km-workflow-state-card.is-live{
  border-color:#bfe4d7;
  background:linear-gradient(135deg,#f0fbf7,#e9f8f2);
}
.km-workflow-state-card.is-withdrawn{
  border-color:#f0d89b;
  background:#fffaf0;
}
.km-workflow-state-card.is-archived{
  border-color:#d9e0e4;
  background:#f6f8f9;
}
.km-form-final-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:-4px;
  margin-bottom:24px;
}
.km-role-choice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.km-role-choice .btn{justify-content:center}
@media(max-width:575.98px){
  .km-side-brand-logo{width:168px}
  .km-form-final-actions{align-items:stretch}
  .km-form-final-actions>.btn,
  .km-form-final-actions>form,
  .km-form-final-actions>form>.btn{width:100%}
  .km-role-choice{grid-template-columns:1fr}
}

/* Natural-flow sticky footer:
   short pages keep the footer at the bottom of the viewport,
   long pages place it after content without pinning it on screen. */
.km-v19 .km-content-shell{
  min-height:100vh;
  padding-bottom:0;
  display:flex;
  flex-direction:column;
}
.km-v19 .km-main{
  flex:1 0 auto;
}
.km-v19 .km-footer{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:auto;
  margin-top:auto;
  flex-shrink:0;
  min-height:44px;
  padding:10px 15px;
  align-items:center;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}