:root {
  --hki-primary: #0B3D66;
  --hki-primary-dark: #0B3D66;
  --hki-secondary: #F26B2E;
  --hki-bg: #F8FAFC;
  --hki-sidebar: #102F4A;
  --hki-sidebar-text: #FFFFFF;
  --hki-topbar: #0B3D66;
  --hki-topbar-text: #FFFFFF;
  --hki-card-accent: #0B3D66;
  --hki-card-bg: #FFFFFF;
  --hki-border: #DDE7F0;
  --hki-success: #16A34A;
  --hki-warning: #F59E0B;
  --hki-danger: #DC2626;
  --hki-hero-start: #E8F4FF;
  --hki-hero-end: #F6F8FC;
  --hki-chart-1: #154c79;
  --hki-chart-2: #38a3d1;
  --hki-chart-3: #f4b942;
  --hki-chart-4: #65a30d;
  --hki-chart-5: #7c3aed;
  --hki-chart-6: #db2777;
  --hki-chart-7: #ea580c;
  --hki-chart-8: #0891b2;
  --hki-chart-9: #4f46e5;
  --hki-chart-10: #64748b;
}

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

body { margin: 0; min-height: 100vh; background: var(--hki-bg); color:#1b2a38; }
.hki-body { display: flex; flex-direction: column; }

.hki-topbar {
  background: linear-gradient(90deg, var(--hki-topbar), var(--hki-primary));
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  color: var(--hki-topbar-text);
}
.hki-topbar .navbar-brand,
.hki-topbar .nav-link,
.hki-topbar .hki-topbar-user { color: var(--hki-topbar-text) !important; }
.hki-topbar .nav-link:hover,
.hki-topbar .nav-link:focus { color: rgba(255,255,255,.88) !important; }
.hki-navbar-brand { display:flex; align-items:center; gap:.55rem; }
.hki-brand-logo { width:34px; height:34px; object-fit:contain; border-radius:.55rem; background:rgba(255,255,255,.9); padding:.12rem; }

.hki-shell { display: flex; min-height: calc(100vh - 96px); }
.hki-sidenav { width: 270px; flex: 0 0 270px; background: var(--hki-sidebar); color: var(--hki-sidebar-text); }
.hki-sidenav .nav-link { color: color-mix(in srgb, var(--hki-sidebar-text) 84%, transparent); border-radius: .8rem; padding: .7rem .9rem; }
.hki-sidenav .nav-link:hover,
.hki-sidenav .nav-link:focus { background: rgba(255,255,255,.12); color: var(--hki-sidebar-text); }
.hki-sidebar-section-label { color: color-mix(in srgb, var(--hki-sidebar-text) 58%, transparent); letter-spacing:.04em; }
.hki-main { min-width: 0; }
.hki-footer { background: var(--hki-card-bg); border-color: var(--hki-border) !important; }

.btn-primary {
  --bs-btn-bg: var(--hki-primary);
  --bs-btn-border-color: var(--hki-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--hki-primary) 88%, #000000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--hki-primary) 88%, #000000);
  --bs-btn-active-bg: color-mix(in srgb, var(--hki-primary) 82%, #000000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--hki-primary) 82%, #000000);
}
.btn-outline-primary {
  --bs-btn-color: var(--hki-primary);
  --bs-btn-border-color: var(--hki-primary);
  --bs-btn-hover-bg: var(--hki-primary);
  --bs-btn-hover-border-color: var(--hki-primary);
}
a { color: var(--hki-primary); }
a:hover { color: color-mix(in srgb, var(--hki-primary) 78%, #000000); }

.alert-success { border-left: 5px solid var(--hki-success); }
.alert-warning { border-left: 5px solid var(--hki-warning); }
.alert-danger { border-left: 5px solid var(--hki-danger); }
.badge.bg-success { background-color: var(--hki-success) !important; }
.badge.bg-warning { background-color: var(--hki-warning) !important; }
.badge.bg-danger { background-color: var(--hki-danger) !important; }

.hki-landing-body { background: radial-gradient(circle at 20% 20%, var(--hki-hero-start), var(--hki-hero-end) 42%, var(--hki-bg) 100%); }
.hki-landing { background: linear-gradient(135deg, color-mix(in srgb, var(--hki-primary) 10%, transparent), color-mix(in srgb, var(--hki-secondary) 14%, transparent)); }
.hki-hero-card,
.hki-landing-panel,
.stat-card,
.chart-card,
.master-card {
  background: color-mix(in srgb, var(--hki-card-bg) 96%, transparent);
  border: 1px solid var(--hki-border);
  border-radius: 1.4rem;
  box-shadow: 0 16px 48px rgba(16,47,74,.10);
}
.hki-logo-mark { width: 82px; height: 82px; border-radius: 22px; display:flex; align-items:center; justify-content:center; background: var(--hki-primary); color:#fff; font-weight:800; font-size:1.35rem; letter-spacing:.06em; }
.stat-card { padding: 1.25rem; border-top: 4px solid var(--hki-card-accent); }
.chart-card { padding: 1.25rem; min-height: 280px; border-top: 4px solid var(--hki-card-accent); }
.master-card { display:flex; flex-direction:column; gap:.35rem; text-decoration:none; color:#1b2a38; padding:1.25rem; min-height:140px; transition:.15s ease; border-top: 4px solid var(--hki-card-accent); }
.master-card span { color:#6c757d; }
.master-card:hover { transform: translateY(-2px); color:var(--hki-primary); box-shadow: 0 18px 50px rgba(16,47,74,.14); }

.white-space-preline { white-space: pre-line; }
.hki-bar-row { display:grid; grid-template-columns: minmax(110px, 220px) 1fr auto; gap:.75rem; align-items:center; margin:.75rem 0; }
.hki-bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#334; }
.hki-bar-track { height: 18px; background:#e8edf4; border-radius: 999px; overflow:hidden; }
.hki-bar-fill { height:100%; background: linear-gradient(90deg, var(--hki-primary), #38a3d1); border-radius: 999px; min-width: 4px; }
.hki-empty { padding: 2rem; text-align:center; color:#6c757d; border:1px dashed #ced4da; border-radius:1rem; }

.hki-pie-wrap { display:grid; grid-template-columns: 180px 1fr; gap:1rem; align-items:center; min-height:210px; }
.hki-pie { width:170px; height:170px; border-radius:50%; box-shadow: inset 0 0 0 10px rgba(255,255,255,.55), 0 8px 24px rgba(16,47,74,.12); }
.hki-pie-legend { display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.hki-pie-legend-item { display:grid; grid-template-columns: 18px 1fr auto; gap:.5rem; align-items:center; font-size:.9rem; }
.hki-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.hki-line-chart svg { width:100%; min-height:220px; }
.hki-line-chart .hki-axis { stroke:#cbd5e1; stroke-width:1; }
.hki-line-chart .hki-line { fill:none; stroke:var(--hki-primary); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.hki-line-chart circle { fill:var(--hki-primary); stroke:#fff; stroke-width:2; }
.hki-line-labels text { fill:#64748b; font-size:11px; }

.hki-theme-preview-shell { border:1px solid var(--hki-border); border-radius:1.25rem; overflow:hidden; background:var(--hki-bg); }
.hki-theme-preview-topbar { background:linear-gradient(90deg, var(--hki-topbar), var(--hki-primary)); color:var(--hki-topbar-text); padding:.85rem 1rem; display:flex; align-items:center; gap:.65rem; }
.hki-theme-preview-logo { width:32px; height:32px; object-fit:contain; border-radius:.5rem; background:#fff; padding:.1rem; }
.hki-theme-preview-body { display:grid; grid-template-columns:135px 1fr; min-height:220px; }
.hki-theme-preview-sidebar { background:var(--hki-sidebar); color:var(--hki-sidebar-text); padding:1rem; }
.hki-theme-preview-sidebar .preview-link { display:block; padding:.45rem .55rem; border-radius:.65rem; color:var(--hki-sidebar-text); background:rgba(255,255,255,.10); margin-bottom:.4rem; font-size:.85rem; }
.hki-theme-preview-content { padding:1rem; }
.hki-theme-preview-card { background:var(--hki-card-bg); border:1px solid var(--hki-border); border-top:4px solid var(--hki-card-accent); border-radius:1rem; padding:1rem; }
.hki-color-chip { width:38px; min-width:38px; border:1px solid var(--hki-border); }

@media (max-width: 991.98px) {
  .hki-shell { display:block; }
  .hki-sidenav { width:100%; flex:auto; }
  .hki-theme-preview-body { grid-template-columns:1fr; }
}
@media (max-width: 575.98px) { .hki-pie-wrap { grid-template-columns: 1fr; justify-items:center; } .hki-pie-legend { width:100%; } }


/* V5-C Landing Page Polish */
.hki-landing-modern {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--hki-secondary) 22%, transparent), transparent 28%),
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--hki-primary) 20%, transparent), transparent 34%),
    linear-gradient(135deg, var(--hki-hero-start), var(--hki-hero-end) 48%, var(--hki-bg) 100%);
  color: #172434;
}
.hki-landing-navbar { position: relative; z-index: 2; }
.hki-landing-brand { display: inline-flex; align-items: center; gap: .65rem; color: #172434; }
.hki-landing-brand:hover { color: var(--hki-primary); }
.hki-landing-brand-logo { width: 42px; height: 42px; object-fit: contain; border-radius: .85rem; background: rgba(255,255,255,.85); padding: .15rem; box-shadow: 0 10px 28px rgba(16,47,74,.12); }
.hki-landing-hero-card,
.hki-landing-panel,
.hki-landing-mini-card,
.hki-landing-storage-note {
  background: color-mix(in srgb, var(--hki-card-bg) 94%, transparent);
  border: 1px solid var(--hki-border);
  border-radius: 1.6rem;
  box-shadow: 0 20px 60px rgba(16,47,74,.12);
  backdrop-filter: blur(8px);
}
.hki-landing-hero-card { border-top: 5px solid var(--hki-card-accent); }
.hki-landing-hero-logo { width: 86px; height: 86px; object-fit: contain; border-radius: 1.1rem; background: rgba(255,255,255,.9); padding: .2rem; box-shadow: 0 14px 36px rgba(16,47,74,.14); }
.hki-landing-kicker { color: var(--hki-secondary); letter-spacing: .07em; font-size: .78rem; text-transform: uppercase; font-weight: 800; }
.hki-landing-app-name { color: #425466; font-size: .95rem; }
.hki-landing-subtitle { color: color-mix(in srgb, #172434 74%, transparent); font-weight: 500; }
.hki-landing-tagline { color: #5f6f82; font-size: 1.04rem; max-width: 760px; }
.hki-landing-notice {
  background: color-mix(in srgb, var(--hki-warning) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--hki-warning) 34%, transparent);
  border-left: 5px solid var(--hki-warning);
  border-radius: 1rem;
  color: #344054;
}
.hki-landing-badge { background: color-mix(in srgb, var(--hki-secondary) 15%, #ffffff); color: var(--hki-secondary); border: 1px solid color-mix(in srgb, var(--hki-secondary) 30%, transparent); }
.hki-landing-timeline { display: flex; flex-direction: column; gap: .85rem; }
.hki-landing-step { display: grid; grid-template-columns: 38px 1fr; gap: .75rem; align-items: start; }
.hki-landing-step-number { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--hki-primary); color: #ffffff; font-weight: 800; box-shadow: 0 10px 24px color-mix(in srgb, var(--hki-primary) 24%, transparent); }
.hki-landing-step-text { padding-top: .35rem; color: #475569; }
.hki-landing-mini-card { border-radius: 1.2rem; box-shadow: 0 14px 40px rgba(16,47,74,.09); }
.hki-landing-storage-note { border-radius: 1.2rem; box-shadow: 0 14px 40px rgba(16,47,74,.09); color: #475569; border-left: 5px solid var(--hki-success); }
.hki-landing-footer { color: #64748b; }
@media (max-width: 991.98px) {
  .hki-landing-hero-logo { width: 70px; height: 70px; }
  .hki-landing-modern .display-5 { font-size: 2rem; }
}

/* V5-C1 Landing Page Re-layout - Centered/AMIGO-like */
.hki-landing-center {
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--hki-secondary) 18%, transparent), transparent 30%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--hki-primary) 18%, transparent), transparent 32%),
    linear-gradient(135deg, var(--hki-hero-start), #ffffff 48%, var(--hki-hero-end) 100%);
  color: #172434;
}
.hki-landing-center-main { min-height: calc(100vh - 58px); }
.hki-landing-center-wrap { max-width: 1040px; }
.hki-landing-center-card {
  background: color-mix(in srgb, var(--hki-card-bg) 96%, transparent);
  border: 1px solid var(--hki-border);
  border-top: 6px solid var(--hki-card-accent);
  border-radius: 1.65rem;
  padding: clamp(1.35rem, 4vw, 2.75rem);
  box-shadow: 0 28px 90px rgba(16,47,74,.14);
  backdrop-filter: blur(8px);
}
.hki-landing-center-logo {
  display: block;
  width: clamp(104px, 13vw, 142px);
  height: clamp(104px, 13vw, 142px);
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(16,47,74,.14));
}
.hki-landing-logo-placeholder {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--hki-primary) 12%, #ffffff);
  color: var(--hki-primary);
  font-weight: 800;
  letter-spacing: .06em;
}
.hki-landing-center-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .95rem;
  color: color-mix(in srgb, var(--hki-secondary) 82%, #000000);
  background: color-mix(in srgb, var(--hki-secondary) 14%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--hki-secondary) 28%, transparent);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hki-landing-center-kicker {
  color: var(--hki-secondary);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hki-landing-center-title {
  color: #172434;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(1.65rem, 4.2vw, 3rem);
  line-height: 1.08;
}
.hki-landing-center-system {
  color: var(--hki-primary);
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hki-landing-center-subtitle {
  color: #334155;
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  font-weight: 650;
}
.hki-landing-center-tagline {
  color: #64748b;
  max-width: 760px;
  font-size: 1rem;
}
.hki-landing-feature-card {
  background: #ffffff;
  border: 1px solid var(--hki-border);
  border-radius: 1.2rem;
  padding: 1.1rem;
  text-align: left;
  box-shadow: 0 14px 38px rgba(16,47,74,.08);
}
.hki-landing-feature-code {
  width: 42px;
  height: 42px;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
  background: color-mix(in srgb, var(--hki-primary) 10%, #ffffff);
  color: var(--hki-primary);
  font-weight: 850;
}
.hki-landing-center-notice {
  background: color-mix(in srgb, var(--hki-warning) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--hki-warning) 32%, transparent);
  border-left: 5px solid var(--hki-warning);
  border-radius: 1.1rem;
  color: #344054;
  padding: 1rem 1.1rem;
}
.hki-landing-flow-card {
  background: color-mix(in srgb, var(--hki-bg) 70%, #ffffff);
  border: 1px solid var(--hki-border);
  border-radius: 1.35rem;
  padding: 1.2rem;
}
.hki-landing-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .85rem;
}
.hki-landing-flow-step {
  background: #ffffff;
  border: 1px solid var(--hki-border);
  border-radius: 1rem;
  padding: .95rem;
  text-align: center;
}
.hki-landing-flow-number {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .65rem;
  background: linear-gradient(135deg, var(--hki-primary), color-mix(in srgb, var(--hki-primary) 82%, var(--hki-secondary)));
  color: #ffffff;
  font-weight: 850;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--hki-primary) 24%, transparent);
}
.hki-landing-flow-text { color: #475569; font-size: .92rem; }
.hki-landing-storage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  color: #475569;
  background: color-mix(in srgb, var(--hki-success) 8%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--hki-success) 22%, transparent);
  border-radius: 999px;
  padding: .75rem 1rem;
  text-align: center;
}
.hki-landing-center-footer { color: #64748b; }
@media (max-width: 767.98px) {
  .hki-landing-center-card { border-radius: 1.25rem; }
  .hki-landing-storage-strip { border-radius: 1rem; }
  .hki-landing-feature-card { text-align: center; }
}

/* V5-E Layout Integration - Dynamic Menu */
.hki-menu-icon {
  width: 1.15rem;
  min-width: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .45rem;
  opacity: .9;
}
.hki-sidenav .nav-link {
  display: flex;
  align-items: center;
  gap: .15rem;
}
.hki-sidenav .nav-link.active {
  background: color-mix(in srgb, var(--hki-sidebar-text) 18%, transparent);
  color: var(--hki-sidebar-text);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--hki-secondary);
}
.hki-sidebar-child {
  margin-left: .55rem;
  padding-left: 1.15rem !important;
  font-size: .94rem;
}
.hki-sidebar-group-label {
  display: flex;
  align-items: center;
  gap: .2rem;
}
.hki-topbar .nav-link.active {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .35rem;
}
.hki-topbar-dropdown {
  border-color: var(--hki-border);
  box-shadow: 0 18px 48px rgba(16,47,74,.16);
  border-radius: .9rem;
  overflow: hidden;
}
.hki-topbar-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: .15rem;
}
.hki-topbar-dropdown .dropdown-item.active,
.hki-topbar-dropdown .dropdown-item:active {
  background: var(--hki-primary);
  color: #ffffff;
}