html { font-size: 14px; }

:root {
    --ill-black:#000;
    --ill-text:#111;
    --ill-muted:#6b6b6b;
    --ill-border:#e8e8e8;
    --ill-soft:#f6f6f6;
    --ill-white:#fff;
}

html, body { margin:0; min-height:100%; }
body.ilove-body {
    background:#fff;
    color:var(--ill-text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.ilove-shell { display:flex; min-height:100vh; background:#fff; }
.ilove-sidebar {
    position:sticky; top:0; width:220px; height:100vh; flex:0 0 220px;
    display:flex; flex-direction:column; padding:18px 12px 14px;
    background:#fff; border-right:1px solid var(--ill-border);
    transition:width .18s ease,flex-basis .18s ease;
}
.ilove-brand { display:flex; align-items:center; height:68px; padding:0 10px 0 9px; margin-bottom:16px; color:#000; text-decoration:none; }
.ilove-brand-logo { width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; color:#000; }
.ilove-brand-logo svg { width:46px; height:46px; }
.ilove-brand-name { margin-left:5px; font-size:25px; font-weight:800; letter-spacing:-1.2px; white-space:nowrap; color:#000; }
.ilove-menu { display:flex; flex-direction:column; gap:7px; }
.ilove-menu-item { position:relative; display:flex; align-items:center; min-height:46px; gap:16px; padding:0 16px; color:#252525; font-size:14px; font-weight:500; text-decoration:none; border-radius:7px; transition:background .12s ease,color .12s ease; }
.ilove-menu-item:hover { color:#000; background:#f5f5f5; }
.ilove-menu-item.active { color:#000; background:#f2f2f2; }
.ilove-menu-item.active::before { content:""; position:absolute; left:-12px; top:0; bottom:0; width:4px; background:#000; }
.ilove-menu-item svg,.ilove-collapse-btn svg { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ilove-collapse-btn { margin-top:auto; min-height:44px; display:flex; align-items:center; gap:13px; padding:0 16px; border:0; background:transparent; color:#555; font-size:13px; cursor:pointer; }
.ilove-collapse-btn:hover { color:#000; }
.sidebar-collapsed .ilove-sidebar { width:72px; flex-basis:72px; }
.sidebar-collapsed .ilove-brand { justify-content:center; padding:0; }
.sidebar-collapsed .ilove-brand-name,.sidebar-collapsed .ilove-menu-item span,.sidebar-collapsed .ilove-collapse-btn span { display:none; }
.sidebar-collapsed .ilove-menu-item,.sidebar-collapsed .ilove-collapse-btn { justify-content:center; padding:0; }
.sidebar-collapsed .ilove-collapse-btn svg { transform:rotate(180deg); }

.ilove-main { min-width:0; flex:1 1 auto; background:#fff; }
.ilove-topbar { position:sticky; top:0; z-index:800; height:74px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:0 28px; background:#fff; border-bottom:1px solid var(--ill-border); }
.ilove-top-search { position:relative; width:min(510px,48vw); }
.ilove-top-search input[type="text"] { width:100%; height:42px; padding:0 18px 0 46px; border:0; border-radius:7px; outline:0; background:#f6f6f6; color:#222; font-size:14px; }
.ilove-top-search input[type="text"]::placeholder { color:#777; }
.ilove-top-search input[type="text"]:focus { background:#f2f2f2; box-shadow:inset 0 0 0 1px #d8d8d8; }
.ilove-top-search > svg { position:absolute; left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:#222; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ilove-top-actions { display:flex; align-items:center; gap:20px; }
.ilove-icon-button { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:transparent; color:#000; cursor:pointer; }
.ilove-icon-button:hover { background:#f4f4f4; }
.ilove-icon-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ilove-user { display:flex; align-items:center; gap:10px; cursor:pointer; }
.ilove-avatar { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#000; color:#fff; font-size:12px; font-weight:700; }
.ilove-user-text { display:flex; flex-direction:column; min-width:110px; line-height:1.25; }
.ilove-user-text strong { color:#111; font-size:13px; font-weight:700; }
.ilove-user-text span { color:#777; font-size:12px; }
.ilove-user-chevron { width:16px; height:16px; fill:none; stroke:#111; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ilove-content { padding:28px 30px 40px; }

.metric-card { width:100%; height:100%; background:#fff; border:1px solid #e7eaee; border-radius:8px; padding:18px; min-height:125px; box-shadow:none; text-align:left; color:inherit; cursor:pointer; transition:border-color .15s ease; }
.metric-card:hover { border-color:#cfcfcf; }
.metric-card.active { border-color:#111; }
.metric-title { color:#6c757d; font-size:.82rem; margin-bottom:8px; }
.metric-value { font-size:1.85rem; font-weight:700; line-height:1.1; }
.metric-value.money { font-size:1.35rem; }
.metric-hint { margin-top:10px; color:#777; font-size:.75rem; font-weight:600; }
.chart-wrap { position:relative; height:320px; }
.table td,.table th { vertical-align:middle; }
.badge { white-space:normal; text-align:left; line-height:1.3; }
#gridCard { scroll-margin-top:20px; }
.grid-search { width:min(430px,75vw); }
.grid-search .form-control { min-width:220px; }

@media (max-width:900px) {
    .ilove-user-text { display:none; }
    .ilove-top-search { width:100%; }
}
@media (max-width:700px) {
    .ilove-sidebar { width:72px; flex-basis:72px; }
    .ilove-brand-name,.ilove-menu-item span,.ilove-collapse-btn span { display:none; }
    .ilove-menu-item,.ilove-collapse-btn { justify-content:center; padding:0; }
    .ilove-topbar { padding:0 12px; }
    .ilove-content { padding:18px 12px 30px; }
    .grid-search { width:100%; }
}