:root{
    --primary:#0d6efd;
    --primary-dark:#084298;
    --primary-soft:#e8f1ff;
    --success-soft:#e8fff1;
    --danger-soft:#ffecec;
    --warning-soft:#fff6dd;
    --white:#ffffff;
    --text:#172033;
    --muted:#6b7485;
    --border:#dbe6f1;
    --card-shadow:0 20px 60px rgba(18, 38, 63, .08);
    --bg:#f4f8fc;
    --sidebar:#ffffff;
    --glass:rgba(255,255,255,.88);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    background:radial-gradient(circle at top left,#f8fbff 0%,#eef5ff 45%,#f4f8fc 100%);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    min-height:100vh;
}
a{text-decoration:none}
.app-shell{display:flex; min-height:100vh;}
.sidebar{
    width:290px; background:var(--sidebar); border-right:1px solid var(--border);
    padding:24px 18px; position:fixed; top:0; bottom:0; left:0; z-index:1000;
    box-shadow:var(--card-shadow); transition:transform .28s ease;
}
.sidebar.closed{transform:translateX(-100%)}
.brand-wrap{
    display:flex; align-items:center; gap:14px; margin-bottom:26px; padding:14px;
    border-radius:24px; background:linear-gradient(135deg,#0d6efd,#5ea1ff); color:#fff;
    box-shadow:0 20px 40px rgba(13,110,253,.25);
}
.brand-logo{height:52px; width:52px; object-fit:contain; border-radius:16px; background:rgba(255,255,255,.15); padding:8px}
.brand-title{font-weight:800; line-height:1.15}
.brand-subtitle{font-size:.85rem; opacity:.9}
.sidebar-nav .nav-link{
    color:var(--text); padding:14px 16px; border-radius:16px; margin-bottom:8px;
    font-weight:700; transition:all .2s ease;
}
.sidebar-nav .nav-link:hover,.sidebar-nav .nav-link.active{
    background:linear-gradient(135deg,#0d6efd,#5ea1ff); color:#fff; transform:translateX(4px);
}
.main-content{margin-left:290px; width:calc(100% - 290px);}
.topbar{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:20px 24px; background:var(--glass); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;
}
.content-area{padding:24px}
.card-soft, .metric-card, .chart-card, .glass-card{
    border:1px solid rgba(219,230,241,.85); border-radius:24px; box-shadow:var(--card-shadow);
    background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
}
.metric-card{
    padding:22px; height:100%; transition:transform .2s ease, box-shadow .2s ease;
}
.metric-card:hover,.card-soft.hover-lift:hover,.chart-card:hover{transform:translateY(-4px); box-shadow:0 24px 60px rgba(18,38,63,.12)}
.metric-value{font-size:2rem; font-weight:800; line-height:1.1}
.metric-label{font-size:.92rem; color:var(--muted)}
.metric-meta{font-size:.85rem; color:var(--muted)}
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{
    max-width:460px; width:100%; padding:28px; border-radius:28px; background:var(--white);
    border:1px solid var(--border); box-shadow:var(--card-shadow);
}
.form-control, .form-select, .form-check-input{
    border-radius:14px; min-height:48px; border:1px solid var(--border); background:#fff; color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:#97c0ff; box-shadow:0 0 0 .2rem rgba(13,110,253,.12)}
.btn{border-radius:14px; min-height:44px; font-weight:700; transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-1px)}
.table-wrap,.table-responsive{overflow:auto}
.table thead th{white-space:nowrap; color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em}
.table > :not(caption) > * > *{padding:1rem .9rem; vertical-align:middle}
.table tbody tr{transition:background .18s ease, transform .18s ease}
.table tbody tr:hover{background:#f8fbff}
.chat-window{
    height:60vh; overflow-y:auto; padding:18px; background:var(--white);
    border:1px solid var(--border); border-radius:24px;
}
.chat-message{max-width:75%; padding:12px 14px; border-radius:18px; margin-bottom:12px; clear:both}
.chat-self{background:var(--primary); color:#fff; margin-left:auto}
.chat-other{background:var(--primary-soft); color:var(--text); margin-right:auto}
.notification-pill{display:inline-block; padding:6px 12px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-weight:700}
.inline-stat, .quick-pill{
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background:#f8fbff;
    border:1px solid var(--border); border-radius:999px; font-size:.92rem
}
.management-badge{display:inline-block; padding:6px 10px; border-radius:999px; font-size:.85rem; font-weight:700; background:#f2f6fb; border:1px solid var(--border)}
.detail-list dt{font-weight:700; color:var(--muted)}
.detail-list dd{margin-bottom:14px}
.topbar-search{flex:1; max-width:520px;}
.topbar-search .form-control,.topbar-search .input-group-text{min-height:44px; border-radius:14px;}
.topbar-search .input-group-text{border-top-right-radius:0; border-bottom-right-radius:0;}
.topbar-search .form-control{border-top-left-radius:0; border-bottom-left-radius:0;}
.modern-input-group{filter:drop-shadow(0 12px 20px rgba(18,38,63,.05))}
.action-icon-btn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:#fff; transition:all .2s ease}
.action-icon-btn:hover{background:var(--primary-soft); color:var(--primary); transform:translateY(-1px)}
.search-toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.search-toolbar .form-control{max-width:340px;}
.page-title-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.user-chip{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--border)}
.user-chip-avatar{height:36px; width:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0d6efd,#5ea1ff); color:#fff; font-weight:800}
.alert-modern{border-radius:18px; border:none; box-shadow:var(--card-shadow)}
.pagination-modern .page-link{border:none; margin:0 4px; border-radius:12px; color:var(--text); background:#fff; box-shadow:0 8px 24px rgba(18,38,63,.06)}
.pagination-modern .page-item.active .page-link{background:linear-gradient(135deg,#0d6efd,#5ea1ff); color:#fff}
.kpi-strip{display:flex; gap:10px; flex-wrap:wrap}
.funnel-stage{position:relative; background:#fff; border:1px solid var(--border); border-radius:18px; padding:16px; text-align:center; min-height:110px}
.funnel-stage::after{content:''; position:absolute; right:-18px; top:50%; transform:translateY(-50%); width:24px; height:2px; background:#a8c8ff}
.funnel-stage:last-child::after{display:none}
.chart-card{padding:18px}
.card-header-inline{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.soft-divider{height:1px; background:linear-gradient(90deg,transparent,#d7e3f2,transparent); margin:14px 0}
.notification-item{padding:16px 0; border-bottom:1px solid #eef3f8}
.notification-item:last-child{border-bottom:none}
.badge-glow{box-shadow:0 0 0 4px rgba(13,110,253,.08)}
.table-card-footer{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px}
.empty-state{padding:34px 18px; text-align:center; color:var(--muted)}
.status-dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; box-shadow:0 0 0 4px rgba(13,110,253,.08)}
.status-up{background:#198754}
.status-down{background:#dc3545}
.status-unknown{background:#6c757d}
.hover-scale{transition:transform .18s ease}
.hover-scale:hover{transform:scale(1.02)}
.canvas-wrap{position:relative; min-height:300px}
@media (max-width: 991px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.show{transform:translateX(0)}
    .main-content{margin-left:0; width:100%}
    .topbar{padding:18px; flex-wrap:wrap; align-items:flex-start}
    .topbar-search{order:3; width:100%; max-width:none}
}