:root {
  --sml-primary: #1f4e8c;
  --sml-primary-dark: #163a69;
  --sml-bg: #f4f6fa;
  --sml-sidebar: #12263f;
  --sml-sidebar-text: #b9c6d8;
  --sml-border: #e3e8f0;
}
body { background: var(--sml-bg); font-size: .92rem; }
.btn-primary { --bs-btn-bg: var(--sml-primary); --bs-btn-border-color: var(--sml-primary); --bs-btn-hover-bg: var(--sml-primary-dark); --bs-btn-hover-border-color: var(--sml-primary-dark); --bs-btn-active-bg: var(--sml-primary-dark); }
.text-primary { color: var(--sml-primary) !important; }
a { color: var(--sml-primary); }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 248px; background: var(--sml-sidebar); color: var(--sml-sidebar-text); flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { padding: 1rem 1.1rem; font-weight: 700; color: #fff; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .brand i { color: #6aa7ff; margin-right: .35rem; }
.sidebar nav { padding: .5rem 0 2rem; }
.nav-link-item { display: flex; align-items: center; gap: .6rem; padding: .45rem 1.1rem; color: var(--sml-sidebar-text); text-decoration: none; font-size: .88rem; border-left: 3px solid transparent; }
.nav-link-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link-item.active { background: rgba(106,167,255,.15); color: #fff; border-left-color: #6aa7ff; }
.nav-link-item i { width: 1.1rem; text-align: center; }
.nav-group-title { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1.1rem .25rem; color: #7f93ad; text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; text-decoration: none; }
.nav-group-title:hover { color: #fff; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid var(--sml-border); padding: .55rem 1.25rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 20; }
.global-search { position: relative; width: min(460px, 50vw); }
.global-search i { position: absolute; left: .65rem; top: .45rem; color: #8a97ab; }
.global-search input { padding-left: 2rem; }
.content { padding: 1.25rem; flex: 1; }
.app-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--sml-border); background: #fff; }
.avatar { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--sml-primary); color: #fff; font-size: .75rem; font-weight: 600; align-items: center; justify-content: center; }
.avatar-lg { width: 54px; height: 54px; font-size: 1.1rem; }
.notif-badge { position: absolute; top: -6px; right: -6px; font-size: .6rem; }

.card { border: 1px solid var(--sml-border); border-radius: .6rem; box-shadow: 0 1px 2px rgba(16,40,80,.04); }
.card-header { background: #fff; font-weight: 600; border-bottom: 1px solid var(--sml-border); }
.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #5b6b82; white-space: nowrap; }
.badge-soft { background: #e8eef8; color: #274a7d; font-weight: 500; }
.filter-bar { background: #fbfcfe; }

.stat-card { background: #fff; border: 1px solid var(--sml-border); border-radius: .6rem; padding: .9rem 1rem; display: flex; gap: .8rem; align-items: center; height: 100%; }
a .stat-card:hover { border-color: var(--sml-primary); }
.stat-icon { width: 42px; height: 42px; border-radius: 10px; background: #e8eef8; color: var(--sml-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: #667791; font-size: .8rem; }
.funnel-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.funnel-label { width: 170px; font-size: .82rem; color: #4a5a72; flex-shrink: 0; }
.funnel-bar { flex: 1; background: #edf1f7; border-radius: 4px; height: 12px; }
.funnel-bar div { background: var(--sml-primary); height: 12px; border-radius: 4px; }
.funnel-n { width: 52px; text-align: right; font-weight: 600; }

.record-header { border-left: 4px solid var(--sml-primary); }
.record-tabs .nav-link { color: #4a5a72; font-size: .86rem; }
.record-tabs .nav-link.active { color: var(--sml-primary); font-weight: 600; }
.kv { display: flex; gap: .75rem; padding: .35rem 0; border-bottom: 1px dashed #edf0f5; }
.kv-l { width: 42%; color: #667791; font-size: .84rem; flex-shrink: 0; }
.kv-v { flex: 1; word-break: break-word; }
.next-action { display: flex; justify-content: space-between; align-items: center; padding: .2rem 0; }
.note { background: #fffdf3; border-left: 3px solid #f0c24b; padding: .6rem .8rem; margin-bottom: .6rem; border-radius: 4px; }
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { display: flex; gap: .75rem; padding-bottom: .9rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: #dfe5ee; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sml-primary); margin-top: 4px; flex-shrink: 0; z-index: 1; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #12263f, #1f4e8c); margin: -1.5rem -.75rem; padding: 1rem; }
.login-card { width: 100%; max-width: 400px; }
.login-logo { width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 14px; background: var(--sml-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.lookup-list { position: absolute; z-index: 1050; background: #fff; border: 1px solid var(--sml-border); border-radius: .4rem; box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; min-width: 280px; }
.lookup-list div { padding: .4rem .7rem; cursor: pointer; }
.lookup-list div:hover { background: #eef3fb; }

@media (max-width: 991px) {
  .sidebar { position: fixed; left: -260px; z-index: 1040; transition: left .2s; }
  .sidebar.open { left: 0; }
  .global-search { width: 100%; }
  .content { padding: .9rem; }
  .kv { flex-direction: column; gap: 0; }
  .kv-l { width: 100%; }
}