/* ===== Smart Finance — AI нягтлан бодогч | чимээгүй mono загвар (нүүрс хар accent) ===== */
:root{
  /* Индиго accent + спектр; саармаг grayscale суурь; өнгө мөнгөн тоонд (улаан/ногоон) */
  --bg:#fbfbfb;
  --bg-2:#f3f4f6;
  --card:#ffffff;
  --sidebar-1:#1e1b4b;
  --sidebar-2:#312e81;
  --primary:#4f46e5;
  --primary-d:#4338ca;
  --on-primary:#ffffff;
  --grad:linear-gradient(135deg,#6366f1,#4f46e5);
  --pos:#16a34a;
  --pos-bg:#dcfce7; --pos-text:#15803d;
  --neg:#dc2626;
  --warn:#d97706;
  --warn-bg:#fef3c7; --warn-text:#b45309;
  --info:#4f46e5;
  --text:#18181b;
  --text-2:#3f3f46;
  --muted:#71717a;
  --border:#ececec;
  --border-2:#e4e4e7;
  --th-bg:#fafafa;
  --row-hover:#fafafa;
  --tint:#eef2ff;
  --ring:rgba(79,70,229,.22);
  --radius:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 10px 30px -12px rgba(0,0,0,.12);
}
[data-theme="dark"]{
  --bg:#0c0c0d;
  --bg-2:#161618;
  --card:#141416;
  --sidebar-1:#1e1b4b;
  --sidebar-2:#312e81;
  --primary:#6366f1;
  --primary-d:#a5b4fc;
  --on-primary:#ffffff;
  --grad:linear-gradient(135deg,#6366f1,#4f46e5);
  --pos:#4ade80;
  --pos-bg:rgba(74,222,128,.15); --pos-text:#4ade80;
  --neg:#f87171;
  --warn:#fbbf24;
  --warn-bg:rgba(251,191,36,.16); --warn-text:#fbbf24;
  --info:#818cf8;
  --text:#ededee;
  --text-2:#a1a1aa;
  --muted:#71717a;
  --border:#262629;
  --border-2:#2e2e32;
  --th-bg:#0f0f11;
  --row-hover:#1a1a1d;
  --tint:rgba(129,140,248,.16);
  --ring:rgba(129,140,248,.4);
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 12px 34px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text); font-size:13.5px; line-height:1.45; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .35s ease, color .3s ease;
}
.app{display:flex; min-height:100vh; padding-left:48px} /* зүүн rail-ийн зай (fixed rail overlay) */
.muted{color:var(--muted)}

/* ===== Keyboard focus (a11y) ===== */
:focus-visible{outline:3px solid #4f46e5; outline-offset:2px; border-radius:6px}
.nav-item:focus-visible{outline-offset:-2px}
.skip-link{position:absolute; left:12px; top:-60px; z-index:200; background:var(--primary-d); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; font-size:14px; transition:top .2s}
.skip-link:focus{top:12px}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn-txt{color:var(--warn)} .info-txt{color:var(--info)}
.hidden{display:none !important}
::selection{background:rgba(79,70,229,.20)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:20px;border:3px solid transparent;background-clip:content-box}

/* ===== Sidebar ===== */
.sidebar{
  width:272px; flex-shrink:0; background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2));
  color:#bcccc4; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  border-right:1px solid rgba(255,255,255,.04); overflow-y:auto;
  transition:background-color .35s ease;
}
.brand{display:flex; align-items:center; gap:13px; padding:24px 22px 18px}
.brand-logo{width:44px; height:44px; border-radius:14px; background:var(--grad); display:grid; place-items:center; font-weight:800; font-size:22px; color:#fff; box-shadow:0 8px 22px rgba(79,70,229,.5); position:relative}
.brand-logo::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
.brand-name{font-size:20px; font-weight:800; color:#fff; line-height:1.05; letter-spacing:-.02em}
.brand-sub{font-size:11px; color:#6f8a80; margin-top:1px}
.nav{display:flex; flex-direction:column; gap:2px; padding:8px 14px; flex:1}
.nav-group{font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#5d7a6f; padding:14px 14px 6px}
.nav-item{display:flex; align-items:center; gap:13px; width:100%; padding:11px 14px; border:none; background:transparent; text-align:left; font-family:inherit; border-radius:11px; color:#8ba298; font-weight:500; font-size:13.5px; cursor:pointer; user-select:none; position:relative; transition:background .18s, color .18s, transform .12s; touch-action:manipulation}
.nav-item:hover{background:rgba(255,255,255,.05); color:#fff}
.nav-item:active{transform:scale(.98)}
.nav-item.active{background:linear-gradient(90deg,rgba(79,70,229,.26),rgba(79,70,229,.08)); color:#fff; box-shadow:inset 0 0 0 1px rgba(79,70,229,.18)}
.nav-item.active::before{content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:3px; background:linear-gradient(#3f3f46,#27272a); border-radius:0 4px 4px 0}
.nav-ico{width:20px;height:20px;display:grid;place-items:center;flex-shrink:0}
.nav-ico svg{width:18px;height:18px;opacity:.95}
.nav-badge{margin-left:auto; background:var(--warn); color:#fafafa; font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px}
.nav-tag{margin-left:auto; font-size:10px; font-weight:700; color:#d4d4d8; background:rgba(79,70,229,.18); padding:2px 8px; border-radius:999px}
.sidebar-foot{padding:14px 16px 18px}
.auto-card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:13px 15px}
.auto-head{display:flex; align-items:center; gap:9px; font-size:12.5px; color:#d6e2dc; font-weight:700}
.dot-live{width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.auto-sub{font-size:11px; color:#6f8a80; margin-top:5px; line-height:1.4}

/* ===== Зүүн icon rail (Midday маягийн) ===== */
/* Rail-ийн өнгө — theme-д тааруулна (light=цайвар, dark=хар) */
:root{
  --rail-bg:#ffffff; --rail-border:var(--border); --rail-ico:#6b7280;
  --rail-hover-bg:rgba(0,0,0,.05); --rail-hover-ico:var(--text);
  --rail-active-bg:rgba(79,70,229,.12); --rail-active-ico:#4f46e5;
  --rail-ring:rgba(0,0,0,.08); --rail-dot-ring:#ffffff;
}
[data-theme="dark"]{
  --rail-bg:#0f0f12; --rail-border:rgba(255,255,255,.07); --rail-ico:#8a8a93;
  --rail-hover-bg:rgba(255,255,255,.08); --rail-hover-ico:#fff;
  --rail-active-bg:rgba(99,102,241,.22); --rail-active-ico:#fff;
  --rail-ring:rgba(255,255,255,.1); --rail-dot-ring:#0f0f12;
}
.railbar{
  width:48px; position:fixed; left:0; top:0; bottom:0; z-index:50;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  padding:9px 6px; overflow-y:auto; overflow-x:hidden;
  background:var(--rail-bg); border-right:1px solid var(--rail-border);
  transition:width .2s cubic-bezier(.4,0,.2,1), transform .26s cubic-bezier(.4,0,.2,1), background-color .35s ease, border-color .35s ease, box-shadow .2s ease;
}
.railbar:hover{width:206px; box-shadow:8px 0 28px -10px rgba(0,0,0,.22)}
/* Railbar нээх/хаах — хажуу руугаа гулсаж нуугдана (Vercel маягийн toggle) */
.app.rail-collapsed{padding-left:0}
.app.rail-collapsed .railbar{transform:translateX(-100%); box-shadow:none; border-right-color:transparent}
.app.rail-collapsed .railbar:hover{width:48px; box-shadow:none}
.railbar::-webkit-scrollbar{width:0}
/* Hover-expand-д гарч ирэх нэр (label) */
.rail-label{
  font-size:13px; font-weight:600; white-space:nowrap; color:inherit; line-height:1;
  opacity:0; transform:translateX(-4px); transition:opacity .14s ease, transform .14s ease; pointer-events:none;
}
.railbar:hover .rail-label{opacity:1; transform:none}
.rail-logo{
  width:30px; height:30px; border-radius:9px; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:15px; text-decoration:none;
  flex-shrink:0; align-self:flex-start; margin:0 0 7px 2px; box-shadow:0 5px 14px rgba(79,70,229,.42);
}
.rail-logo svg{width:18px; height:18px}
.rail-nav{display:flex; flex-direction:column; align-items:stretch; gap:2px; width:100%}
.railbar .nav-item{
  width:100%; height:36px; padding:0 8px; display:flex; align-items:center; justify-content:flex-start;
  gap:11px; position:relative; border:none; background:transparent; border-radius:9px;
  color:var(--rail-ico); cursor:pointer; transition:background .15s, color .15s, transform .1s;
}
.railbar .nav-item:hover{background:var(--rail-hover-bg); color:var(--rail-hover-ico)}
.railbar .nav-item:active{transform:scale(.97)}
.railbar .nav-item.active{background:var(--rail-active-bg); color:var(--rail-active-ico); box-shadow:inset 0 0 0 1px rgba(99,102,241,.45)}
.railbar .nav-item.active::before{display:none}
.railbar .nav-ico{width:18px; height:18px; flex-shrink:0; display:grid; place-items:center}
.railbar .nav-ico svg{width:18px; height:18px}
.nav-dot{position:absolute; left:21px; top:3px; right:auto; min-width:14px; height:14px; padding:0 3px; border-radius:999px; background:var(--warn,#d97706); color:#fff; font-size:9.5px; font-weight:800; line-height:14px; text-align:center; box-shadow:0 0 0 2px var(--rail-dot-ring)}
.nav-dot.accent{min-width:0; width:7px; height:7px; padding:0; background:#6366f1; left:23px; top:5px; right:auto}
.rail-foot{display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:6px; flex-shrink:0; padding-left:4px}
.rail-foot .icon-btn{width:38px; height:38px; flex-shrink:0; border:none; background:transparent; color:var(--rail-ico)}
.rail-foot .icon-btn:hover{background:var(--rail-hover-bg); color:var(--rail-hover-ico)}
.rail-foot .avatar{width:34px; height:34px; flex-shrink:0; font-size:13px; box-shadow:0 0 0 2px var(--rail-ring)}

/* ===== Main / Topbar ===== */
.main{flex:1; display:flex; flex-direction:column; min-width:0}
/* Mobile menu button + drawer scrim (hidden on desktop) */
.menu-btn{display:grid; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:var(--card); place-items:center; cursor:pointer; color:var(--text-2); flex-shrink:0; touch-action:manipulation; transition:background .14s, color .14s, border-color .14s}
.menu-btn:hover{background:var(--rail-hover-bg); color:var(--text); border-color:var(--border-2)}
.menu-btn svg{width:19px; height:19px}
.scrim{position:fixed; inset:0; background:rgba(3,12,8,.55); opacity:0; visibility:hidden; z-index:55; transition:opacity .3s, visibility .3s}
.scrim.show{opacity:1; visibility:visible}
.topbar{display:flex; align-items:center; gap:18px; padding:12px 28px; background:color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; transition:background-color .35s ease, border-color .35s ease}
.company{display:flex; align-items:center; gap:12px}
.company-chev{display:inline-flex; align-items:center; color:var(--muted); margin-left:-4px}
.company-chev svg{width:16px; height:16px}
.company:hover .company-chev{color:var(--text-2)}
.company-menu{position:fixed; z-index:200; background:var(--card); border:1px solid var(--border); border-radius:13px; box-shadow:0 16px 44px -14px rgba(0,0,0,.3); padding:6px; max-height:64vh; overflow:auto}
.cmenu-item:hover{background:var(--rail-hover-bg) !important}
/* Туршилт / зөвхөн харах горим */
.trial-banner{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:400; display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--border); box-shadow:0 14px 40px -12px rgba(0,0,0,.32); border-radius:13px; padding:11px 16px; font-size:13.5px; color:var(--text); max-width:92vw}
.trial-banner.ro{border-color:#f59e0b; background:#fffbeb; color:#92400e}
.trial-banner b{font-weight:800; color:var(--primary)}
.trial-banner .tb-up{font:inherit; font-size:13px; font-weight:700; border:none; background:var(--primary); color:#fff; padding:7px 14px; border-radius:9px; cursor:pointer; white-space:nowrap}
.trial-banner .tb-up:hover{filter:brightness(1.08)}
.sf-readonly .section:not(#plans) .btn.primary,
.sf-readonly .sf-modal .btn.primary,
.sf-readonly .sf-drawer-foot .btn.primary{pointer-events:none; opacity:.5; filter:grayscale(.3)}
.company-logo{position:relative; width:42px; height:42px; border-radius:13px; background:var(--tint); display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--primary) 22%, transparent); cursor:pointer; overflow:hidden; background-size:cover; background-position:center; flex-shrink:0; transition:filter .15s}
.company-logo:hover{filter:brightness(.96)}
.company-logo:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
.company-logo .cl-ph{display:grid; place-items:center}
.company-logo .cl-ph svg{width:26px; height:26px; color:color-mix(in srgb, var(--primary) 55%, var(--muted))}
.company-logo.has-img{background-color:var(--card)}
.company-logo.has-img .cl-ph{display:none}
.company-logo .cl-cam{position:absolute; inset:0; display:grid; place-items:center; background:rgba(15,23,42,.45); opacity:0; transition:opacity .15s}
.company-logo .cl-cam svg{width:18px; height:18px; color:#fff}
.company-logo:hover .cl-cam,.company-logo:focus-visible .cl-cam{opacity:1}
.company-name{display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:15px}
.company-sub{font-size:11.5px; color:var(--muted)}
.chev{display:inline-flex; align-items:center; color:var(--muted)}
.chev svg{width:14px; height:14px}
.search{flex:1; max-width:420px; display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid transparent; border-radius:12px; padding:0 14px; height:42px; transition:.18s; margin:0 auto}
.search:focus-within{background:var(--card); border-color:var(--primary); box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.search svg{width:17px;height:17px;color:var(--muted);flex-shrink:0}
.search input{flex:1; border:none; background:none; outline:none; font-size:13.5px; font-family:inherit; color:var(--text)}
.kbd{font-size:11px; color:var(--muted); background:var(--card); border:1px solid var(--border-2); border-radius:6px; padding:2px 7px; font-weight:600}
.topbar-right{display:flex; align-items:center; gap:12px}
.period{display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; font-weight:600; font-family:inherit; color:var(--text-2); background:var(--bg-2); border:none; padding:9px 14px; border-radius:11px; cursor:pointer; transition:.15s; touch-action:manipulation}
.period:hover{filter:brightness(.97)}
.period svg{width:16px;height:16px;color:var(--primary)}
.period-wrap{position:relative}
.period-menu{position:absolute; top:calc(100% + 6px); right:0; min-width:180px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:6px; z-index:50; display:flex; flex-direction:column; gap:1px}
.period-menu[hidden]{display:none}
.period-menu button{text-align:left; border:none; background:transparent; color:var(--text); font-family:inherit; font-size:13px; font-weight:500; padding:9px 12px; border-radius:9px; cursor:pointer}
.period-menu button:hover{background:var(--bg-2)}
.period-menu button.sel{background:var(--tint); color:var(--primary-d); font-weight:700}
.period-sep{height:1px; background:var(--border); margin:5px 4px}
.period-custom{display:flex; flex-direction:column; gap:7px; padding:6px 8px 4px}
.period-custom label{display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:600; color:var(--muted)}
.period-custom input[type=date]{font-family:inherit; font-size:13px; color:var(--text); background:var(--bg-2); border:1px solid var(--border); border-radius:9px; padding:7px 9px; color-scheme:light dark}
.period-custom .btn.primary{font-size:13px; padding:8px}
.period-err{color:var(--neg); font-size:11.5px; font-weight:600; margin-top:2px}
.period-err[hidden]{display:none}
.icon-btn{position:relative; width:44px; height:44px; border-radius:11px; border:1px solid var(--border); background:var(--card); display:grid; place-items:center; cursor:pointer; color:var(--text-2); transition:.15s; touch-action:manipulation}
.icon-btn:hover{background:var(--bg-2)}
.icon-btn svg{width:19px;height:19px}
.dot-red{position:absolute; top:8px; right:9px; width:8px; height:8px; background:var(--neg); border-radius:50%; border:2px solid var(--card)}
.avatar{width:44px; height:44px; border:none; border-radius:50%; background:var(--grad); color:var(--on-primary); display:grid; place-items:center; font-weight:700; font-size:15px; box-shadow:0 0 0 3px rgba(79,70,229,.15); cursor:pointer; touch-action:manipulation}
.theme-toggle .ico-sun{display:none}
[data-theme="dark"] .theme-toggle .ico-moon{display:none}

/* ===== Дээд брэнд (topbar) ===== */
.topbrand{display:flex; align-items:center; gap:11px; flex-shrink:0}
.topbrand .brand-logo{width:40px; height:40px; font-size:20px; border-radius:12px}
.topbrand-text .brand-name{font-size:18px; color:var(--text); line-height:1.05}
.topbrand-text .brand-sub{font-size:10.5px; color:var(--muted); margin-top:1px}

/* ===== Дээд хэвтээ цэс (topnav) ===== */
.topnav{display:flex; align-items:center; gap:4px; padding:8px 22px; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:66px; z-index:25; overflow:visible; transition:background-color .35s ease, border-color .35s ease}
/* "Бусад" товч + dropdown (4 үндсэн + бусад нь энд эсвэл ⌘K-д) */
.topnav-more-btn{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; padding:8px 12px; border:none; background:transparent; color:var(--text-2); font-family:inherit; font-size:13px; font-weight:600; border-radius:10px; cursor:pointer; white-space:nowrap}
.topnav-more-btn:hover{background:var(--bg-2); color:var(--text)}
.topnav-more-btn.active{background:var(--bg-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--border-2)}
.topnav-more-btn .nav-ico{width:18px; height:18px}
.topnav-more-btn .nav-ico svg{width:16px; height:16px}
.topnav-more-btn .chev2{font-size:10px; opacity:.65; margin-left:-2px}
.topnav-more-menu{position:absolute; top:calc(100% + 6px); right:16px; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:2px; min-width:360px; z-index:40}
.topnav-more-menu[hidden]{display:none}
.topnav-more-menu .nav-item{width:100%; flex:1 1 auto; padding:10px 12px; border-radius:10px; color:var(--text-2); font-size:13.5px; font-weight:500}
.topnav-more-menu .nav-item:hover{background:var(--bg-2); color:var(--text)}
.topnav-more-menu .nav-item.active{background:var(--bg-2); color:var(--text)}
.topnav::-webkit-scrollbar{height:6px}
.topnav .nav-item{width:auto; flex:0 0 auto; padding:8px 12px; border-radius:10px; color:var(--text-2); font-size:13px; font-weight:600; white-space:nowrap; gap:8px}
.topnav .nav-item:hover{background:var(--bg-2); color:var(--text)}
.topnav .nav-item.active{background:linear-gradient(90deg,rgba(79,70,229,.16),rgba(79,70,229,.05)); color:var(--primary-d); box-shadow:inset 0 0 0 1px rgba(79,70,229,.28)}
.topnav .nav-item.active::before{display:none}
.topnav .nav-ico{width:18px; height:18px}
.topnav .nav-ico svg{width:16px; height:16px}
.topnav .nav-badge,.topnav .nav-tag{margin-left:2px}

/* ===== Хүний нөөц (HR) ===== */
.hr-layout{display:flex; gap:18px; align-items:flex-start}
.hr-sidenav{width:236px; flex:0 0 auto; display:flex; flex-direction:column; gap:2px; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:8px; position:sticky; top:142px; max-height:calc(100vh - 170px); overflow-y:auto}
.hr-item{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:10px 13px; border:none; background:transparent; border-radius:10px; color:var(--text-2); font-family:inherit; font-size:13px; font-weight:500; text-align:left; cursor:pointer; transition:.15s}
.hr-item:hover{background:var(--bg-2); color:var(--text)}
.hr-item.active{background:linear-gradient(90deg,rgba(79,70,229,.16),transparent); color:var(--primary-d); font-weight:700; box-shadow:inset 0 0 0 1px rgba(79,70,229,.22)}
.hr-badge{background:var(--warn); color:#fafafa; font-size:11px; font-weight:800; padding:0 7px; border-radius:999px; min-width:18px; text-align:center}
.hr-content{flex:1; min-width:0}
.hr-panel{display:none}
.hr-panel.active{display:block}
.hr-empty{background:var(--card); border:1px dashed var(--border-2); border-radius:16px; padding:52px 28px; text-align:center}
.hr-empty h3{margin:0 0 10px; font-size:19px; color:var(--text)}
.hr-empty p{margin:0 auto; max-width:440px; color:var(--muted); font-size:14px; line-height:1.6}
.hr-empty b{color:var(--primary-d)}
@media(max-width:900px){
  .hr-layout{flex-direction:column}
  .hr-sidenav{width:100%; flex-direction:row; overflow-x:auto; position:static; max-height:none}
  .hr-item{white-space:nowrap}
}

/* ===== Цаг бүртгэл (attendance) ===== */
.clockin-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.clockin-input{padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-2); color:var(--text); font-family:inherit; font-size:14px; min-width:210px}
.att-badge{display:inline-block; font-size:12px; font-weight:700; padding:3px 11px; border-radius:999px}
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px}
.feat-card{padding:22px 24px}
.feat-ico{font-size:24px; margin-bottom:12px; line-height:1}
.feat-card h3{margin:0 0 13px; font-size:15.5px; color:var(--text); line-height:1.4}
.feat-card ul{margin:0; padding-left:20px; color:var(--text-2)}
.feat-card li{font-size:13.5px; line-height:1.95}
@media(max-width:900px){ .feat-grid{grid-template-columns:1fr} }

/* ===== Багц ба төлбөр (plans) ===== */
.price-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.price{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px}
.price.feat{border-color:rgba(79,70,229,.45); box-shadow:0 0 0 1px rgba(79,70,229,.22)}
.price .pn{font-size:14px; color:var(--muted); font-weight:600}
.price .pp{font-size:25px; font-weight:800; margin:6px 0}
.price .pp small{font-size:13px; color:var(--muted); font-weight:500}
.price ul{margin:12px 0 0; padding-left:18px; color:var(--text-2); font-size:13.5px}
.price li{margin:6px 0}
.plan-lock{padding:16px}
.plan-lock-card{max-width:460px; margin:24px auto; text-align:center; background:var(--card); border:1px dashed var(--border-2); border-radius:18px; padding:42px 28px}
.plan-lock-card h3{margin:12px 0 8px; font-size:20px}
.plan-lock-card p{color:var(--muted); font-size:14px; margin:0 auto 18px; max-width:360px; line-height:1.6}
.plan-lock-card b{color:var(--primary-d)}
[data-locked="1"] > *:not(.plan-lock){display:none !important}
.plan-lock{display:none}
[data-locked="1"] > .plan-lock{display:block}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}

/* ===== Банк сонгогч + алхам заагч (bank import) ===== */
.bstep{padding:5px 11px;border-radius:999px;background:var(--bg-2);color:var(--muted);font-weight:600;white-space:nowrap}
.bstep.active{background:rgba(79,70,229,.16);color:var(--primary-d);box-shadow:inset 0 0 0 1px rgba(79,70,229,.3)}
.bank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bank-pick{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-family:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:.15s}
.bank-pick:hover{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.bank-ava{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:0 0 auto}
@media(max-width:760px){.bank-grid{grid-template-columns:1fr 1fr}}

/* ===== Хөдөлгөөн — нягт, чимээгүй (glow хасагдсан) ===== */
.kpi{transition:transform .18s ease, box-shadow .2s ease}
.kpi:hover{transform:translateY(-2px); box-shadow:0 10px 26px -16px rgba(0,0,0,.2)}
.btn.primary{transition:filter .15s ease, transform .1s ease}
.btn.primary:active{transform:scale(.98)}
.topnav .nav-item.active{box-shadow:inset 0 0 0 1px var(--border-2)}
.hr-item.active{box-shadow:inset 0 0 0 1px var(--border-2)}
#cmdkOverlay > div{box-shadow:0 24px 60px -20px rgba(0,0,0,.4) !important}
.avatar{transition:box-shadow .2s ease}
.avatar:hover{box-shadow:0 0 0 3px var(--border-2)}

/* ===== Onboarding wizard — салбар/банк сонгох сүлжээ (Notion) ===== */
.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.ob-grid-bank{max-height:300px;overflow:auto;padding-right:2px}
.ob-pick{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:border-color .15s, box-shadow .18s, transform .12s}
.ob-pick:hover{border-color:var(--primary);transform:translateY(-1px)}
.ob-pick.sel{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary), 0 8px 22px -10px rgba(79,70,229,.55)}
.ob-ico{font-size:20px;line-height:1}
.ob-ava{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:#fff;font-size:13px;font-weight:700;flex:none}

/* ===== Хоосон төлөв (empty state) — найрсаг чиглүүлэг (Notion) ===== */
.sf-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 20px;gap:2px}
.sf-empty-art{margin-bottom:8px;opacity:.95}
.sf-empty-title{font-size:16px;font-weight:650;color:var(--text)}
.sf-empty-desc{font-size:13.5px;color:var(--muted);max-width:340px;line-height:1.55;margin-top:4px}

/* ===== Багцын "хэнд зориулав" мөр (Notion) ===== */
.plan-who{margin:2px 0 6px;padding:9px 11px;background:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);border-radius:11px;font-size:13px;color:var(--text);line-height:1.45}
.plan-who span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--primary);margin-bottom:2px}

/* ===== Toast мэдэгдэл ===== */
.sf-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--text);color:var(--bg);padding:12px 20px;border-radius:12px;font-size:14px;font-weight:550;box-shadow:0 14px 40px -10px rgba(0,0,0,.5);z-index:2000;opacity:0;transition:opacity .3s, transform .3s;max-width:min(90vw,440px);white-space:pre-line;line-height:1.45;text-align:center}
.sf-toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.ob-pick,.sf-toast{transition:none}}

/* ===== PDF хэвлэх (зөвхөн идэвхтэй тайланг) ===== */
@media print{
  .topbar,.railbar,.skip-link,.menu-btn,.scrim{display:none !important}
  .section{display:none !important}
  #reports{display:block !important}
  #reports .report-tabs,#reports .report-actions,#reports .section-head p,.balance-check svg,#reports .report-chart{display:none !important}
  body,.content,.card,.report-doc{background:#fff !important;color:#000 !important;box-shadow:none !important;border-color:#ddd !important}
  #reports .report-doc:not(.hidden) *{color:#000 !important}
  .rrow{border-color:#e5e5e5 !important}
  .content{padding:8px 0 !important;max-width:none !important;margin:0 !important}
  @page{margin:14mm}
}
[data-theme="dark"] .theme-toggle .ico-sun{display:block}

.content{padding:18px 24px 40px; max-width:1440px; width:100%; margin:0 auto}
.section{display:none}
.section.active{display:block; animation:sectionIn .42s cubic-bezier(.22,1,.36,1)}
@keyframes sectionIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.section-head{margin-bottom:18px}
.section-head.row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sh-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.section-head h1{font-size:21px; font-weight:800; letter-spacing:-.025em}
.section-head p{margin-top:4px; font-size:13px}
.block-title{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; margin:20px 0 10px}
.block-title svg{width:18px; height:18px; color:var(--primary-d); flex-shrink:0}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); transition:background-color .35s ease, border-color .35s ease}

.reveal{opacity:0; transform:translateY(14px); animation:reveal .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes reveal{to{opacity:1; transform:none}}
.kpi-grid .reveal:nth-child(1){animation-delay:.04s}
.kpi-grid .reveal:nth-child(2){animation-delay:.10s}
.kpi-grid .reveal:nth-child(3){animation-delay:.16s}
.kpi-grid .reveal:nth-child(4){animation-delay:.22s}
.chart-grid .reveal:nth-child(2){animation-delay:.06s}
.chart-grid .reveal:nth-child(3){animation-delay:.12s}
.chart-grid .reveal:nth-child(4){animation-delay:.18s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal,.section.active{animation:none;opacity:1;transform:none}
}

/* ===== Hero ===== */
.hero{position:relative; margin-bottom:16px; overflow:hidden}
.hero-orb{position:absolute; top:-90px; right:-40px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(79,70,229,.22), rgba(79,70,229,.05) 60%, transparent 70%); filter:blur(8px); pointer-events:none; animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}

/* ===== Pipeline ===== */
.pipeline{display:flex; align-items:center; gap:6px; padding:12px 16px; margin-bottom:16px; overflow-x:auto}
.pipe-step{display:flex; align-items:center; gap:11px; padding:9px 15px; border-radius:13px; background:var(--bg-2); flex-shrink:0; transition:transform .2s}
.pipe-step.done{background:var(--tint); border:1px solid color-mix(in srgb, var(--pos) 30%, transparent)}
.pipe-step:hover{transform:translateY(-2px)}
.pipe-ico{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--card); flex-shrink:0}
.pipe-ico svg{width:19px; height:19px; color:var(--primary-d)}
.pipe-step b{display:block; font-size:13px; font-weight:700}
.pipe-step span{font-size:11px; color:var(--muted)}
.pipe-arrow{display:grid; place-items:center; color:var(--muted); flex-shrink:0; opacity:.55}
.pipe-arrow svg{width:18px; height:18px}

/* ===== KPI ===== */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px}
.kpi{padding:15px 17px; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s, background-color .35s, border-color .35s}
.kpi:hover{transform:translateY(-3px); box-shadow:0 18px 40px -18px rgba(0,0,0,.25)}
.kpi::after{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); opacity:.9}
.kpi-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px}
.kpi-ico{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#4f46e5; background:#eae8fb}
.kpi-ico svg{width:21px;height:21px}
.kpi-ico.amber{color:#d97706; background:#fbeed7}
.kpi-ico.teal{color:#0d9488; background:#d7f3ef}
.kpi-ico.sky{color:#db2777; background:#fbe1ee}
.trend{display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px}
.trend svg{width:13px;height:13px}
.trend.up{color:var(--pos-text); background:var(--pos-bg)}
.trend.down{color:var(--neg); background:color-mix(in srgb, var(--neg) 14%, transparent)}
.trend.down svg{transform:rotate(180deg)}
.kpi-label{font-size:12px; color:var(--muted); font-weight:600}
.kpi-value{font-size:24px; font-weight:800; margin:4px 0 4px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.kpi-value .unit{font-size:13px; font-weight:600; color:var(--muted); margin-left:3px; letter-spacing:0}
.spark{margin-top:8px; height:34px}
.spark svg{width:100%; height:100%; display:block; overflow:visible}

/* ===== Insights ===== */
.insights{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:20px}
.insight{display:flex; gap:13px; padding:17px 19px; position:relative; overflow:hidden; transition:transform .2s}
.insight:hover{transform:translateY(-2px)}
.insight::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px}
.insight.good::before{background:var(--pos)}
.insight.warn::before{background:var(--warn)}
.insight.info::before{background:var(--info)}
.insight-ico{display:grid; place-items:center; flex-shrink:0; width:30px; height:30px}
.insight-ico svg{width:22px; height:22px}
.insight.good .insight-ico{color:var(--pos)}
.insight.warn .insight-ico{color:var(--warn)}
.insight.info .insight-ico{color:var(--info)}
.insight b{font-size:13.5px; font-weight:700}
.insight p{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45}

/* ===== Charts ===== */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.chart-card{padding:20px 22px; transition:box-shadow .2s, background-color .35s, border-color .35s}
.chart-card:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.2)}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px}
.chart-head h3{font-size:15px; font-weight:700}
.chart-head .muted{font-size:12px}
.chart-box{position:relative; height:240px}

/* ===== Mini summary cards ===== */
.mini-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
.mini{padding:13px 15px; display:flex; flex-direction:column; gap:5px; transition:transform .2s, background-color .35s, border-color .35s}
.mini:hover{transform:translateY(-2px)}
.mini span{font-size:12.5px; color:var(--muted); font-weight:600}
.mini b{font-size:18px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* ===== Tables ===== */
.tx-toolbar{display:flex; gap:8px; padding:18px 8px; margin-bottom:18px}
.tx-stat{flex:1; text-align:center; border-right:1px solid var(--border)}
.tx-stat:last-child{border-right:none}
.tx-stat b{display:block; font-size:23px; font-weight:800; letter-spacing:-.02em}
.tx-stat span{font-size:12px; color:var(--muted)}
.table-card{overflow:hidden}
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl thead th{text-align:left; padding:10px 16px; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; background:var(--th-bg); border-bottom:1px solid var(--border); transition:background-color .35s}
.tbl th.r,.tbl td.r{text-align:right}
.tbl th.c,.tbl td.c{text-align:center}
.tbl tbody td{padding:9px 16px; border-bottom:1px solid var(--border)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--row-hover)}
.tx-date{color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.tx-desc b{font-weight:600}
.tx-src{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 10px; border-radius:8px; background:var(--bg-2); color:var(--text-2); font-weight:500}
.tx-src svg{width:14px; height:14px; color:var(--primary-d); flex-shrink:0}
.cat-tag{display:inline-block; font-size:12px; padding:4px 11px; border-radius:8px; background:var(--tint); color:var(--primary-d); font-weight:600}
.amt{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.conf{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:12px}
.conf-bar{width:46px; height:6px; border-radius:3px; background:var(--bg-2); overflow:hidden}
.conf-bar i{display:block; height:100%; border-radius:3px}
.row-flag{background:var(--warn-bg)}
.flag-tag{display:inline-block; font-size:11px; padding:2px 9px; border-radius:7px; background:var(--warn-bg); color:var(--warn-text); font-weight:700; margin-left:6px}

/* status pills */
.pill{display:inline-block; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px}
.pill.paid{background:var(--pos-bg); color:var(--pos-text)}
.pill.sent{background:color-mix(in srgb, var(--info) 16%, transparent); color:var(--info)}
.pill.overdue{background:color-mix(in srgb, var(--neg) 14%, transparent); color:var(--neg)}
.pill.ok{background:var(--pos-bg); color:var(--pos-text)}
.pill.low{background:var(--warn-bg); color:var(--warn-text)}
.pill.out{background:color-mix(in srgb, var(--neg) 14%, transparent); color:var(--neg)}

/* accounts tree */
.accounts-tbl tbody td{padding:11px 20px}
.acc-group td{background:var(--th-bg); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--text)}
.acc-code{color:var(--muted); font-variant-numeric:tabular-nums; font-weight:600}
.acc-sub td{font-weight:800; border-top:1px solid var(--border-2)}

/* contacts */
.contacts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.contact-card{padding:18px; display:flex; gap:14px; align-items:flex-start; transition:transform .2s, box-shadow .2s, background-color .35s, border-color .35s}
.contact-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px -18px rgba(0,0,0,.22)}
.contact-ava{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-weight:800; font-size:17px; color:#fff; flex-shrink:0}
.contact-ava.customer{background:linear-gradient(135deg,#18181b,#3f3f46)}
.contact-ava.vendor{background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
.contact-info{flex:1; min-width:0}
.contact-info h4{font-size:14px; font-weight:700; margin-bottom:2px}
.contact-meta{font-size:11.5px; color:var(--muted)}
.contact-bal{margin-top:8px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
.bal-badge{display:inline-block; margin-left:7px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; vertical-align:middle; letter-spacing:.02em; text-transform:none}
.bal-badge.paid{background:var(--pos-bg); color:var(--pos-text)}
.bal-badge.unpaid{background:color-mix(in srgb, var(--warn,#d97706) 14%, transparent); color:var(--warn,#d97706)}
.cd-paybadge{margin:-4px 0 8px}
.cd-paybadge .bal-badge{margin-left:0; font-size:11px; padding:3px 11px}
.pay-vendor{padding:5px 11px; font-size:12px; white-space:nowrap}
.contact-type{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.3px}
.contact-type.customer{background:var(--pos-bg); color:var(--pos-text)}
.contact-type.vendor{background:color-mix(in srgb, var(--info) 16%, transparent); color:var(--info)}

/* ===== Reports ===== */
.report-tabs{display:inline-flex; gap:4px; margin-bottom:20px; background:var(--bg-2); padding:5px; border-radius:13px; flex-wrap:wrap}
.rtab{padding:9px 18px; border:none; background:none; border-radius:9px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:.18s; font-family:inherit}
.rtab:hover{color:var(--text-2)}
.rtab.active{background:var(--card); color:var(--primary-d); box-shadow:var(--shadow-sm)}
.report-doc{padding:30px 34px}
.report-chart{position:relative; height:210px; margin:4px 0 26px; padding-bottom:22px; border-bottom:1px dashed var(--border)}
.report-title{border-bottom:2px solid var(--text); padding-bottom:13px; margin-bottom:20px}
.report-title h2{font-size:19px; font-weight:800; letter-spacing:-.02em}
.report-title span{font-size:12px}
.report-cols{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.report-single{max-width:580px}
.report-doc h4{font-size:11.5px; letter-spacing:.6px; color:var(--muted); margin-bottom:8px; font-weight:700}
.rrow{display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-bottom:1px solid var(--border)}
.rrow span{color:var(--text-2)}
.rrow b{font-variant-numeric:tabular-nums; font-weight:600}
.rrow.group{font-weight:700; color:var(--text); border-bottom:none; padding-top:15px; padding-bottom:3px}
.rrow.group span{color:var(--text); font-weight:700}
.rrow.sub{font-weight:700; border-top:1px solid var(--border-2); border-bottom:none}
.rrow.sub span{font-weight:700; color:var(--text)}
.rrow.total{border-top:2px solid var(--text); border-bottom:none; margin-top:7px; padding-top:12px; font-size:15px}
.rrow.total span{font-weight:800}
.rrow.total b{font-weight:800; color:var(--primary-d)}
.balance-check{display:flex; align-items:center; gap:9px; margin-top:20px; padding:12px 17px; background:var(--tint); color:var(--pos-text); border:1px solid color-mix(in srgb, var(--pos) 30%, transparent); border-radius:12px; font-weight:600; font-size:13px}
.balance-check svg{width:17px; height:17px; flex-shrink:0}
.report-actions{display:flex; gap:10px; margin-top:18px; justify-content:flex-end; flex-wrap:wrap}

/* ===== Tax ===== */
.tax-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:18px}
.tax-card{padding:22px 24px; transition:transform .2s, background-color .35s, border-color .35s}
.tax-card:hover{transform:translateY(-2px)}
.tax-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:11px}
.tax-name{font-size:16px; font-weight:800}
.tax-amt{font-size:27px; font-weight:800; color:var(--primary-d); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tax-meta{font-size:12px; color:var(--muted); margin:3px 0 14px}
.tax-row{display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--border)}
.tax-row b{font-variant-numeric:tabular-nums}
.tax-due{margin-top:13px; font-size:12.5px; font-weight:600; color:var(--muted)}
.tax-total{display:flex; justify-content:space-between; align-items:center; padding:22px 26px; background:linear-gradient(120deg,var(--card), var(--tint))}
.tax-total-amt{font-size:29px; font-weight:800; color:var(--text); margin-top:2px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

.badge{font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px}
.badge.ok{background:var(--pos-bg); color:var(--pos-text)}
.badge.soon{background:var(--warn-bg); color:var(--warn-text)}
.badge.off{background:var(--bg-2); color:var(--muted)}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 17px; min-height:44px; border:1px solid var(--border-2); background:var(--card); border-radius:11px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text); transition:.16s; font-family:inherit; touch-action:manipulation}
.btn:hover{background:var(--bg-2); transform:translateY(-1px)}
.btn svg{width:16px; height:16px; flex-shrink:0}
.btn.small{padding:9px 15px; min-height:38px; font-size:12px; margin-top:13px}
.btn.primary{background:var(--grad); color:var(--on-primary); border-color:transparent; box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn.primary:hover{filter:brightness(1.08)}

/* ===== AI Assistant ===== */
.chat-card{padding:0; overflow:hidden; max-width:780px}
.chat{padding:24px; display:flex; flex-direction:column; gap:16px; min-height:300px; max-height:460px; overflow-y:auto}
.msg{display:flex; gap:11px; max-width:86%; animation:reveal .35s ease}
.msg.user{margin-left:auto; flex-direction:row-reverse}
.msg-ava{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; background:var(--tint); font-size:15px; font-weight:700; color:var(--primary-d)}
.msg-ava svg{width:19px; height:19px}
.msg.user .msg-ava{background:var(--grad); color:var(--on-primary)}
.bubble{padding:13px 16px; border-radius:16px; font-size:13.5px; line-height:1.6; background:var(--bg-2); border-bottom-left-radius:5px}
.msg.user .bubble{background:var(--grad); color:var(--on-primary); border-bottom-left-radius:16px; border-bottom-right-radius:5px}
.bubble b{font-weight:700}
.chips{display:flex; gap:8px; padding:0 24px 16px; flex-wrap:wrap}
.chip{padding:9px 14px; border:1px solid var(--border-2); background:var(--card); border-radius:999px; font-size:12.5px; cursor:pointer; color:var(--text-2); font-family:inherit; transition:.16s}
.chip:hover{border-color:var(--primary); color:var(--primary); transform:translateY(-1px)}
.chat-input{display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--border)}
.chat-input input{flex:1; padding:12px 16px; border:1px solid var(--border-2); border-radius:12px; font-size:13.5px; font-family:inherit; outline:none; background:var(--card); color:var(--text); transition:.16s}
.chat-input input:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(79,70,229,.12)}

/* ===== Integrations ===== */
.int-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.int-card{padding:22px; transition:transform .2s, box-shadow .2s, background-color .35s, border-color .35s}
.int-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px -18px rgba(0,0,0,.22)}
.int-card.connected{border-color:color-mix(in srgb, var(--pos) 30%, transparent)}
.int-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.int-logo{width:48px; height:48px; border-radius:14px; background:var(--bg-2); display:grid; place-items:center}
.int-logo svg{width:24px; height:24px; color:var(--primary-d)}
.int-card h3{font-size:15px; font-weight:700; margin-bottom:4px}
.int-card p{font-size:12.5px; line-height:1.5}
.int-sync{margin-top:13px; font-size:12px; color:var(--pos); font-weight:600}

/* ===== Мобайл доод бар (Vercel-style: хөвж буй нягт бар — Цэс + Хайх) — зөвхөн утсанд ===== */
.mobbar{display:none; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0));
  z-index:70; align-items:center; gap:7px; padding:6px;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.3)}
/* Хоёр товч ИЖИЛ хэмжээтэй (50/50), голлосон агуулгатай — зэрэгцүүлсэн */
.mobbar-menu,.mobbar-find{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:1 1 0; min-width:0; height:38px; padding:0 12px;
  border:none; border-radius:11px; background:var(--bg-2);
  font-family:inherit; font-size:13px; cursor:pointer; touch-action:manipulation; transition:transform .12s}
.mobbar-menu{color:var(--text); font-weight:600}
.mobbar-find{color:var(--muted)}
.mobbar-menu svg{width:19px; height:19px; flex-shrink:0}
.mobbar-find svg{width:17px; height:17px; flex-shrink:0}
.mobbar-find span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mobbar-find kbd{display:none}                /* ⌘K нь десктопын зүйл — утсанд хэрэггүй */
.mobbar-menu:active,.mobbar-find:active{transform:scale(.96)}
.mobnav-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:78}
.mobnav-scrim.show{display:block}

/* ===== Responsive ===== */
@media(max-width:1120px){
  .kpi-grid,.mini-grid{grid-template-columns:repeat(2,1fr)}
  .insights{grid-template-columns:1fr}
  .chart-grid,.tax-grid,.report-cols{grid-template-columns:1fr}
  .int-grid,.contacts-grid{grid-template-columns:repeat(2,1fr)}
  .search{max-width:240px}
}
@media(max-width:760px){
  .menu-btn{display:none}
  .kpi-grid,.mini-grid,.int-grid,.contacts-grid{grid-template-columns:1fr}
  .search{display:none}
  .content{padding:18px 14px 84px}
  /* Topbar: компанийн нэр + үндсэн товчнууд л багтаана (overflow арилгана) */
  .topbar{padding:10px 14px; gap:10px}
  .company-sub{display:none}
  .company{flex:1 1 auto; min-width:0}
  .company-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px}
  .period{display:none}
  .topbar-right{gap:8px; flex-shrink:0}
  .icon-btn,.avatar{width:40px; height:40px}
  /* Мобайл доод бар харагдана */
  .mobbar{display:flex}

  /* Icon rail → доороос дээш гарах sheet (Vercel-style). ☰ дарж нээнэ, цэс/scrim дарж хаана. */
  .app{padding-left:0}
  .railbar{position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; height:auto; max-height:72vh;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:12px 10px calc(14px + env(safe-area-inset-bottom,0));
    border-right:none; border-top:1px solid var(--rail-border); border-radius:18px 18px 0 0;
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    transform:translateY(110%); transition:transform .32s cubic-bezier(.22,1,.36,1);
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.42); z-index:80}
  .railbar:hover{width:100%}
  .app.rail-collapsed .railbar{transform:translateY(110%)}
  .app.nav-open .railbar,
  .app.nav-open.rail-collapsed .railbar{transform:translateY(0)}
  .railbar::-webkit-scrollbar{width:0; height:0}
  .rail-logo{display:none}
  .rail-label{display:none}
  .rail-nav{flex-direction:column; align-items:stretch; gap:2px; width:100%}
  /* Sheet доторх: томхон, title-аар нэрлэсэн жагсаалт мөрүүд */
  .railbar .nav-item{width:100%; height:auto; flex:0 0 auto; flex-direction:row;
    justify-content:flex-start; gap:14px; padding:13px 16px; border-radius:12px}
  .railbar .nav-item::after{content:attr(aria-label); font-size:14.5px; font-weight:500; white-space:nowrap}
  .railbar .nav-item.active::after{font-weight:600}
  .nav-dot{left:auto; right:14px; top:50%; transform:translateY(-50%)}
  .nav-dot.accent{left:auto; right:18px; top:50%; transform:translateY(-50%)}
  .rail-foot{flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px;
    margin:8px 4px 0; padding:10px 4px 0; border-top:1px solid var(--rail-border)}
}

/* ===== Десктоп (>760px) — railbar default далд, menuBtn (☰) зүүнээс гарах label-тэй drawer болгон нээнэ; хэсэг сонгох/scrim дарахад хаагдана (Vercel-style) ===== */
@media(min-width:761px){
  .app{padding-left:0}                          /* контент бүтэн өргөн — байнгын rail байхгүй */
  .railbar{width:256px; padding:14px 12px; z-index:80;
    transform:translateX(-100%); box-shadow:none; border-right:1px solid var(--rail-border)}
  .railbar:hover{width:256px; box-shadow:none}  /* hover-expand хүчингүй (drawer болсон) */
  .app.nav-open .railbar{transform:translateX(0); box-shadow:12px 0 44px -14px rgba(0,0,0,.32)}
  .rail-logo{display:flex; margin:0 2px 12px}
  .rail-label{display:none}
  .rail-nav{gap:2px}
  .railbar .nav-item{width:100%; height:auto; flex-direction:row; justify-content:flex-start;
    gap:14px; padding:11px 14px; border-radius:11px}
  .railbar .nav-item::after{content:attr(aria-label); font-size:14px; font-weight:500; white-space:nowrap}
  .railbar .nav-item.active::after{font-weight:600}
  .nav-dot{left:auto; right:14px; top:50%; transform:translateY(-50%)}
  .nav-dot.accent{left:auto; right:18px; top:50%; transform:translateY(-50%)}
  .rail-foot{flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px;
    margin-top:12px; padding-top:12px; border-top:1px solid var(--rail-border)}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* ============================================================ */
/* Midday маягийн detail-ууд: tooltip / confirm / skeleton / drawer */
/* ============================================================ */

/* 1) Hover tooltip */
[data-tip]{cursor:help}
.kpi-label[data-tip],.tx-stat[data-tip]{cursor:default}
button[data-tip],a[data-tip],[role="button"][data-tip]{cursor:pointer}
.sf-tip{position:fixed; z-index:3000; max-width:248px; background:var(--text); color:var(--bg);
  font-size:12px; line-height:1.5; font-weight:500; padding:8px 11px; border-radius:9px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.45); white-space:pre-line; pointer-events:none;
  opacity:0; transform:translateY(3px); transition:opacity .14s, transform .14s}
.sf-tip.show{opacity:1; transform:none}
.sf-tip::after{content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px;
  background:var(--text); transform:translateX(-50%) rotate(45deg)}
.sf-tip.below::after{bottom:auto; top:-5px}

/* 2) Confirm popover */
.sf-pop{position:fixed; z-index:3100; width:228px; background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:13px; padding:13px 14px 12px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.4); animation:reveal .18s ease forwards; opacity:0; transform:translateY(6px)}
.sf-pop-msg{font-size:13px; line-height:1.5; font-weight:550; margin-bottom:11px}
.sf-pop-act{display:flex; gap:8px; justify-content:flex-end}
.sf-pop-btn{font:inherit; font-size:12.5px; font-weight:650; padding:7px 13px; border-radius:9px; cursor:pointer; border:1px solid var(--border)}
.sf-pop-btn.cancel{background:var(--card); color:var(--text-2)}
.sf-pop-btn.cancel:hover{background:var(--bg-2)}
.sf-pop-btn.ok{background:var(--primary); color:#fff; border-color:var(--primary)}
.sf-pop.danger .sf-pop-btn.ok{background:#ef4444; border-color:#ef4444}
.sf-pop::after{content:""; position:absolute; left:50%; bottom:-6px; width:11px; height:11px;
  background:var(--card); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transform:translateX(-50%) rotate(45deg)}
.sf-pop.below::after{bottom:auto; top:-6px; border:none; border-left:1px solid var(--border); border-top:1px solid var(--border)}

/* 3) Skeleton shimmer */
.sk{display:inline-block; height:11px; border-radius:6px; min-width:24px;
  background:linear-gradient(100deg, var(--bg-2) 30%, color-mix(in srgb, var(--border-2) 60%, var(--bg-2)) 50%, var(--bg-2) 70%);
  background-size:200% 100%; animation:sf-shimmer 1.25s ease-in-out infinite}
.sk-row td{vertical-align:middle}
.sk-contact{align-items:center !important; pointer-events:none}
@keyframes sf-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
/* Хоосон төлөв grid дотор бүтэн өргөнөөр */
.contacts-grid .sf-empty-wrap{grid-column:1/-1}

/* 4) Гүйлгээний дэлгэрэнгүй самбар (slide-over) */
#txBody tr[data-txid],#dashTxBody tr[data-txid],#accountsBody tr[data-acc],#invBody tr[data-inv],#invtBody tr[data-iidx],#payrollBody tr[data-empid],#attBody tr[data-empid],#recvBody tr[data-cname],#payBody tr[data-cname]{cursor:pointer; transition:background-color .12s}
#txBody tr[data-txid]:hover,#dashTxBody tr[data-txid]:hover,#accountsBody tr[data-acc]:hover,#invBody tr[data-inv]:hover,#invtBody tr[data-iidx]:hover,#payrollBody tr[data-empid]:hover,#attBody tr[data-empid]:hover,#recvBody tr[data-cname]:hover,#payBody tr[data-cname]:hover{background:var(--bg-2)}
#contactsGrid .contact-card[data-cidx]{cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s}
#contactsGrid .contact-card[data-cidx]:hover{transform:translateY(-2px); border-color:var(--primary); box-shadow:0 10px 26px -12px rgba(0,0,0,.25)}
#sfDrawer{position:fixed; inset:0; z-index:2400}
.sf-drawer-scrim{position:absolute; inset:0; background:rgba(8,10,20,.42); opacity:0; transition:opacity .24s}
#sfDrawer.show .sf-drawer-scrim{opacity:1}
.sf-drawer-panel{position:absolute; top:0; right:0; height:100%; width:min(420px,94vw);
  background:var(--card); border-left:1px solid var(--border); box-shadow:-24px 0 60px -24px rgba(0,0,0,.35);
  display:flex; flex-direction:column; padding:20px 22px 22px; overflow-y:auto;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1)}
#sfDrawer.show .sf-drawer-panel{transform:none}
.sf-drawer-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.sf-drawer-kicker{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.sf-drawer-title{font-size:18px; font-weight:800; letter-spacing:-.02em; margin:3px 0 0; line-height:1.25}
.sf-drawer-x{flex-shrink:0; width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--text-2); cursor:pointer; font-size:13px; line-height:1}
.sf-drawer-x:hover{background:var(--bg-2); color:var(--text)}
.sf-drawer-headact{display:flex; align-items:center; gap:7px; flex-shrink:0}
.sf-drawer-nav{display:inline-flex; gap:4px}
.sf-nav-btn{width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--card);
  color:var(--text-2); cursor:pointer; font-size:14px; line-height:1; display:grid; place-items:center; transition:background-color .12s}
.sf-nav-btn:hover:not(:disabled){background:var(--primary); color:#fff; border-color:var(--primary)}
.sf-nav-btn:disabled{opacity:.35; cursor:default}
.sf-drawer-amt{font-size:27px; font-weight:800; letter-spacing:-.03em; margin:16px 0 4px}
.sf-drawer-meta{margin-top:10px; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.sf-meta-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; font-size:13px; border-bottom:1px solid var(--border)}
.sf-meta-row:last-child{border-bottom:none}
.sf-meta-row>span{color:var(--muted)}
.sf-meta-row>b{font-weight:650; text-align:right}
.sf-pill{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:7px}
.sf-drawer-sec{margin-top:20px}
.sf-drawer-sec-h{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:9px}
.sf-jl{width:100%; border-collapse:collapse; font-size:12.5px}
.sf-jl th{text-align:left; font-size:11px; color:var(--muted); font-weight:600; padding:0 0 7px; border-bottom:1px solid var(--border)}
.sf-jl th.r,.sf-jl td.r{text-align:right}
.sf-jl td{padding:8px 0; border-bottom:1px solid var(--border); vertical-align:top}
.sf-jl tfoot td{border-bottom:none; border-top:1px solid var(--border-2); font-weight:750; padding-top:9px}
.jl-acc{padding-right:12px}
.jl-code{display:inline-block; font-size:10.5px; font-weight:700; color:var(--primary); background:var(--tint); border-radius:5px; padding:1px 5px; margin-right:4px}
.jl-num{font-variant-numeric:tabular-nums; white-space:nowrap}
.sf-jl-note{margin:9px 0 0; font-size:11.5px; color:var(--muted)}
.sf-note{width:100%; box-sizing:border-box; min-height:64px; resize:vertical; font:inherit; font-size:13px;
  padding:10px 11px; border:1px solid var(--border); border-radius:10px; background:var(--bg-2); color:var(--text)}
.sf-note:focus{outline:none; border-color:var(--primary)}
.sf-note-saved{display:inline-block; font-size:11.5px; color:var(--pos); margin-top:5px; opacity:0; transition:opacity .2s}
.sf-note-saved.show{opacity:1}
.sf-drawer-foot{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:20px}
.sf-drawer-foot .sf-act{flex:1; min-width:0; justify-content:center; font-size:13px; padding:9px 12px}
.sf-drawer-foot .sf-act.danger{border-color:color-mix(in srgb,#ef4444 40%,transparent); color:#ef4444}
.sf-drawer-foot .sf-act.danger:hover{background:#ef4444; color:#fff}
@media (max-width:560px){.sf-drawer-panel{width:100vw}}
@media (prefers-reduced-motion:reduce){.sf-drawer-scrim,.sf-drawer-panel{transition:none}}

/* 5) Мөрийн ⋯ quick-action (floating button + menu) */
.sf-rowact{position:fixed; z-index:2300; width:26px; height:26px; border-radius:7px;
  border:1px solid var(--border); background:var(--card); color:var(--text-2);
  cursor:pointer; font-size:14px; line-height:1; font-weight:700; display:grid; place-items:center;
  transform:translate(-50%,-50%) scale(.9); opacity:0; pointer-events:none; transition:opacity .12s, transform .12s;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.3)}
.sf-rowact.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.sf-rowact:hover{background:var(--primary); color:#fff; border-color:var(--primary)}
.sf-menu{position:fixed; z-index:3100; min-width:172px; background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:11px; padding:6px; box-shadow:0 18px 50px -12px rgba(0,0,0,.4);
  opacity:0; transform:translateY(6px); animation:reveal .16s ease forwards}
.sf-menu button{display:flex; align-items:center; gap:9px; width:100%; text-align:left; font:inherit; font-size:13px;
  font-weight:550; padding:8px 10px; border:none; border-radius:8px; background:none; color:var(--text); cursor:pointer}
.sf-menu button:hover{background:var(--bg-2)}
.sf-menu button.danger{color:#ef4444}
.sf-menu button.danger:hover{background:rgba(239,68,68,.1)}
.sf-menu .sf-menu-sep{height:1px; background:var(--border); margin:5px 2px}
.sf-menu .sf-menu-ico{width:15px; text-align:center; opacity:.8}

/* 6) Мэдэгдлийн dropdown */
.sf-notif{position:fixed; z-index:3100; width:304px; max-width:calc(100vw - 20px); background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:13px; padding:7px; box-shadow:0 20px 56px -14px rgba(0,0,0,.42);
  opacity:0; transform:translateY(6px); animation:reveal .16s ease forwards}
.sf-notif-head{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:6px 8px 8px; display:flex; align-items:center; gap:8px}
.sf-notif-count{background:var(--primary); color:#fff; border-radius:999px; font-size:11px; padding:0 7px; line-height:17px; letter-spacing:0}
.sf-notif-item{display:flex; align-items:center; gap:11px; width:100%; text-align:left; font:inherit; font-size:13px; font-weight:550;
  padding:10px 9px; border:none; border-radius:9px; background:none; color:var(--text); cursor:pointer; line-height:1.35}
.sf-notif-item:hover{background:var(--bg-2)}
.sf-notif-ico{width:26px; height:26px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center; font-size:13px}
.sf-notif-ico.warn{background:var(--warn-bg); color:var(--warn-text)}
.sf-notif-ico.neg{background:rgba(239,68,68,.12); color:#ef4444}
.sf-notif-ico.info{background:rgba(79,70,229,.12); color:#4f46e5}
.sf-notif-empty{padding:18px 12px; text-align:center; font-size:13px; color:var(--muted)}

/* ============================================================ */
/* Орчин үеийн popup modal (Бараа нэмэх г.м) — дахин ашиглах sf-modal */
/* ============================================================ */
.sf-modal-wrap{position:fixed; inset:0; z-index:2600; display:grid; place-items:center; padding:20px}
.sf-modal-scrim{position:absolute; inset:0; background:rgba(8,10,20,.5); opacity:0; transition:opacity .22s}
.sf-modal-wrap.show .sf-modal-scrim{opacity:1}
.sf-modal{position:relative; width:min(480px,96vw); max-height:92vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 32px 80px -24px rgba(0,0,0,.5); opacity:0; transform:translateY(14px) scale(.985);
  transition:transform .24s cubic-bezier(.34,1.3,.5,1), opacity .2s}
.sf-modal-wrap.show .sf-modal{opacity:1; transform:none}
.sf-modal-head{display:flex; align-items:center; gap:13px; padding:20px 22px 16px; border-bottom:1px solid var(--border)}
.sf-modal-ico{width:44px; height:44px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; font-size:22px;
  background:var(--tint); border:1px solid color-mix(in srgb, var(--primary) 22%, transparent)}
.sf-modal-titles{flex:1; min-width:0}
.sf-modal-titles h2{margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em}
.sf-modal-titles p{margin:2px 0 0; font-size:13px; color:var(--muted)}
.sf-modal-x{flex-shrink:0; width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--text-2); cursor:pointer; font-size:13px}
.sf-modal-x:hover{background:var(--bg-2); color:var(--text)}
.sf-modal-body{padding:18px 22px; display:flex; flex-direction:column; gap:15px}
.sf-field{display:flex; flex-direction:column; gap:6px}
.sf-flabel{font-size:12.5px; font-weight:650; color:var(--text-2)}
.sf-flabel i{color:var(--neg); font-style:normal}
.sf-opt{font-weight:500; color:var(--muted)}
.sf-inp{width:100%; box-sizing:border-box; padding:11px 13px; border:1px solid var(--border); border-radius:11px;
  background:var(--bg-2); color:var(--text); font-family:inherit; font-size:14.5px; transition:border-color .15s, box-shadow .15s, background-color .15s}
.sf-inp:focus{outline:none; border-color:var(--primary); background:var(--card); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}
.sf-fhint{font-size:11.5px; color:var(--muted)}
.sf-frow{display:flex; gap:12px}
.sf-inp-suffix{position:relative; display:flex; align-items:center}
.sf-inp-suffix .sf-inp{padding-right:34px}
.sf-suffix{position:absolute; right:13px; font-size:14px; font-weight:700; color:var(--muted); pointer-events:none}
.im-chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:3px}
.im-chip{font:inherit; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text-2); cursor:pointer; transition:.12s}
.im-chip:hover{border-color:var(--primary); color:var(--primary)}
.im-chip.sel{background:var(--primary); color:#fff; border-color:var(--primary)}
.im-total{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-radius:13px;
  background:var(--tint); border:1px solid color-mix(in srgb, var(--primary) 18%, transparent)}
.im-total-lbl{display:block; font-size:13px; font-weight:700}
.im-total-sub{display:block; font-size:11px; color:var(--muted); margin-top:1px}
.im-total b{font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--primary)}
/* Эхлэлийн үлдэгдэл modal */
.ob-grouptitle{font-size:12px; font-weight:700; color:var(--text-2); margin:14px 0 2px; letter-spacing:.01em}
.ob-grouptitle:first-of-type{margin-top:6px}
.ob-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.ob-row>span{font-size:13px; color:var(--text); flex:1}
.ob-row .ob-suf{flex:0 0 168px; max-width:168px}
.ob-row .ob-inp{text-align:right; padding-right:30px}
.ob-eq{margin-top:14px}
.ob-check{margin-top:8px; text-align:center}
.ob-eqline{font-size:12.5px; color:var(--muted)}
.ob-eqline b{color:var(--text); font-weight:700}
/* Зээлүүд */
.loans-card{margin-top:16px}
.loans-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.loans-head h3{font-size:15px; font-weight:700}
.loans-head p{margin-top:2px; font-size:12px}
.loans-empty{padding:18px; text-align:center; color:var(--muted); font-size:13px; border:1px dashed var(--border); border-radius:12px}
.loan-card{border:1px solid var(--border); border-radius:13px; padding:14px 15px; margin-bottom:10px; background:var(--card)}
.loan-card:last-child{margin-bottom:0}
.loan-main{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.loan-info b{font-size:14px; font-weight:700; display:block}
.loan-meta{font-size:12px; color:var(--muted)}
.loan-remain{text-align:right; flex:0 0 auto}
.loan-remain span{display:block; font-size:11px; color:var(--muted)}
.loan-remain b{font-size:16px; font-weight:800; letter-spacing:-.02em}
.loan-prog{height:6px; border-radius:99px; background:var(--tint); margin:11px 0 10px; overflow:hidden}
.loan-prog-bar{height:100%; border-radius:99px; background:var(--primary); transition:width .3s}
.loan-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.loan-paidn{font-size:12px; color:var(--text-2); font-weight:600; margin-right:auto}
.loan-done{font-size:12.5px; font-weight:700; color:var(--pos); margin-right:auto}
.loan-foot .btn{padding:7px 12px; font-size:12.5px}
.im-status.ln-basis,.im-status.ln-method{grid-template-columns:repeat(2,1fr)}
.ln-disb{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2); cursor:pointer; margin-top:2px}
.ln-disb input{width:16px; height:16px; cursor:pointer}
.sf-modal-wide{max-width:680px}
.ls-body{max-height:62vh; overflow:auto}
.ls-tbl{width:100%}
.ls-tbl th,.ls-tbl td{font-size:12.5px}
.ls-paid{opacity:.62}
.ls-paid .pill.paid{font-weight:700}
.im-status{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.im-st{font:inherit; font-size:12.5px; font-weight:600; padding:10px 8px; border-radius:11px; border:1px solid var(--border);
  background:var(--card); color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:.12s}
.im-st:hover{border-color:var(--border-2)}
.im-st.sel{border-color:var(--primary); background:var(--tint); color:var(--text); box-shadow:inset 0 0 0 1px var(--primary)}
.im-st-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.im-st-dot.ok{background:#16a34a} .im-st-dot.low{background:#d97706} .im-st-dot.out{background:#ef4444}
.sf-ferr{font-size:13px; color:#ef4444; background:rgba(239,68,68,.1); padding:9px 12px; border-radius:10px}
/* Барааны зураг ачаалах талбар */
.im-photo{position:relative; width:100%; height:132px; border-radius:14px; border:1.5px dashed var(--border-2); background:var(--bg-2); cursor:pointer; overflow:hidden; display:grid; place-items:center; transition:border-color .15s, background-color .15s}
.im-photo:hover{border-color:var(--primary)}
.im-photo.has-img{border-style:solid; border-color:var(--border)}
.im-photo-empty{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-size:13px; font-weight:600}
.im-photo-ico{font-size:26px}
.im-photo-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.im-photo-edit{position:absolute; right:8px; bottom:8px; font-size:11.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:3px 9px; border-radius:999px; opacity:0; transition:opacity .15s}
.im-photo.has-img:hover .im-photo-edit{opacity:1}
.im-photo-spin{position:absolute; inset:0; background:rgba(255,255,255,.6); display:grid; place-items:center}
[data-theme="dark"] .im-photo-spin{background:rgba(0,0,0,.5)}
.im-photo-spin::after{content:""; width:24px; height:24px; border-radius:50%; border:3px solid var(--border-2); border-top-color:var(--primary); animation:sf-spin .7s linear infinite}
@keyframes sf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.im-photo-spin::after{animation:none}}
.sf-modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:14px 22px 20px; border-top:1px solid var(--border)}
.sf-modal-foot .btn{min-width:96px; justify-content:center}
@media (max-width:520px){.sf-frow{flex-direction:column} .im-status{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sf-modal-scrim,.sf-modal{transition:none}}

/* Бараа материалын жагсаалт: зураг (thumbnail) + ангилал (сектор) бүлэг */
.inv-name{display:flex; align-items:center; gap:11px; min-width:0}
.inv-thumb{width:38px; height:38px; flex-shrink:0; border-radius:9px; object-fit:cover; background:var(--bg-2); border:1px solid var(--border)}
.inv-thumb-ph{display:grid; place-items:center; font-size:18px; color:var(--muted)}
#invtBody tr.inv-group{cursor:default}
#invtBody tr.inv-group td{padding:13px 16px 7px; border:none}
.inv-group-name{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.inv-group-cnt{display:inline-block; margin-left:8px; font-size:11px; font-weight:700; color:var(--primary); background:var(--tint); border-radius:999px; padding:1px 8px; letter-spacing:0}
/* Барааны drawer: зураг + үлдэгдэл засах */
.sf-drawer-photo{width:100%; height:170px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--bg-2); margin:14px 0 4px}
.sf-drawer-photo img{width:100%; height:100%; object-fit:cover; display:block}
.inv-qty-edit{display:flex; align-items:center; gap:8px}
.inv-qstep{width:38px; height:38px; flex-shrink:0; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:18px; font-weight:700; cursor:pointer; line-height:1}
.inv-qstep:hover{background:var(--bg-2); border-color:var(--primary); color:var(--primary)}
.inv-qty-inp{flex:1; min-width:0; text-align:center; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:var(--bg-2); color:var(--text); font-family:inherit; font-size:16px; font-weight:700}
.inv-qty-inp:focus{outline:none; border-color:var(--primary)}
.inv-qty-unit{font-size:13px; color:var(--muted); flex-shrink:0}
.inv-qty-save{flex-shrink:0; padding:9px 14px}
.inv-qty-save:disabled{opacity:.5; cursor:default}
/* Барааны ангилал (сектор) slide tabs */
.inv-tabs{display:flex; align-items:center; gap:7px; overflow-x:auto; padding:2px 2px 13px; -webkit-overflow-scrolling:touch}
.inv-tabs::-webkit-scrollbar{height:0}
.inv-tab{flex-shrink:0; display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text-2); cursor:pointer; transition:background-color .12s, border-color .12s, color .12s}
.inv-tab:hover{border-color:var(--border-2); color:var(--text)}
.inv-tab.active{background:var(--primary); border-color:var(--primary); color:#fff}
.inv-tab-cnt{font-size:11px; font-weight:700; background:var(--bg-2); color:var(--muted); border-radius:999px; padding:0 6px; line-height:16px; min-width:16px; text-align:center}
.inv-tab.active .inv-tab-cnt{background:rgba(255,255,255,.25); color:#fff}
.inv-tab-add{padding:7px 12px; font-size:15px; font-weight:800; color:var(--primary)}
.inv-tab-add:hover{background:var(--tint); border-color:var(--primary)}
.inv-cat-new{flex-shrink:0; display:inline-flex; align-items:center; gap:5px}
.inv-cat-new input{font:inherit; font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--primary); background:var(--card); color:var(--text); width:162px; outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent)}
.inv-cat-ok{width:32px; height:32px; flex-shrink:0; border-radius:50%; border:none; background:var(--primary); color:#fff; cursor:pointer; font-size:14px; font-weight:800}
.inv-cat-ok:hover{filter:brightness(1.07)}
/* Ангилал устгах × (tab дотор) */
.inv-tab-del{display:inline-grid; place-items:center; width:16px; height:16px; margin:-1px -4px -1px -1px; border-radius:50%; font-size:13px; line-height:1; color:var(--muted); opacity:0; transition:opacity .12s, background-color .12s, color .12s}
.inv-tab:hover .inv-tab-del{opacity:.65}
.inv-tab-del:hover{opacity:1; background:rgba(239,68,68,.16); color:#ef4444}
.inv-tab.active .inv-tab-del{color:rgba(255,255,255,.85)}
.inv-tab.active .inv-tab-del:hover{background:rgba(255,255,255,.25); color:#fff}
/* Drawer footer: 🗑/⧉ icon товчнууд нарийхан */
.sf-drawer-foot .sf-act.df-ico{flex:0 0 auto; min-width:46px}
/* Харилцагч нэмэх modal-ийн аватар preview + зураг ачаалах */
.ct-preview{display:flex; align-items:center; gap:12px; padding:2px 0 4px}
.ct-preview .contact-ava{width:48px; height:48px; flex-shrink:0; font-size:19px}
.ct-preview b{display:block; font-size:15px; font-weight:800}
.contact-ava.has-img{background-size:cover; background-position:center}
.contact-ava.has-img .ct-ava-init{display:none}
.ct-ava-up{position:relative; cursor:pointer}
.ct-ava-cam{position:absolute; bottom:-3px; right:-3px; width:19px; height:19px; border-radius:50%; background:var(--card); border:1px solid var(--border); display:grid; place-items:center; font-size:9px; box-shadow:0 1px 5px rgba(0,0,0,.22)}
.contact-ava.loading{opacity:.55}
/* drawer дахь том аватар */
.cd-photo-wrap{display:flex; flex-direction:column; align-items:center; gap:8px; margin:14px 0 6px}
.cd-ava{position:relative; width:74px; height:74px; flex-shrink:0; font-size:28px; cursor:pointer}
.cd-photo-name{font-size:13px; color:var(--muted); font-weight:600}
/* нэхэмжлэх жагсаалт дахь үйлчлүүлэгчийн жижиг аватар */
.inv-cust{display:flex; align-items:center; gap:9px; min-width:0}
.inv-cust-ava{width:28px; height:28px; flex-shrink:0; border-radius:50%; background:var(--bg-2); color:var(--muted); display:grid; place-items:center; font-size:12px; font-weight:700; background-size:cover; background-position:center; border:1px solid var(--border)}
.inv-cust-ava.has-img{color:transparent}