:root{
  --green-900:#04342C; --green-700:#0E5C4A; --green-500:#1D9E75; --green-100:#DCF2E9; --green-50:#EDF7F2;
  --sand:#F7F4EE; --paper:#FFFFFF; --ink:#1E2723; --muted:#5E6B65; --line:#E4E0D6;
  --amber:#C98A2D; --amber-50:#FAF0DE;
  --sg:#7C5CD6; --sg-50:#F0EBFC; --sg-700:#4E37A3;
  --red:#C0442E; --red-50:#FBEAE6;
  --radius:14px;
  --shadow:0 1px 2px rgba(30,39,35,.05), 0 6px 20px -8px rgba(30,39,35,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Noto Sans",sans-serif; color:var(--ink);
  background:var(--sand); display:flex; min-height:100vh; font-size:15px; line-height:1.65;
}
h1,h2,h3,h4{font-family:"Noto Serif",serif; color:var(--green-900); margin:0 0 8px; line-height:1.3}
h2{font-size:26px} h3{font-size:17px; display:flex; align-items:center; gap:8px}
h3 i{color:var(--green-500)}
p{margin:0 0 10px}
a{color:var(--green-700)}
code{background:var(--green-50); padding:1px 6px; border-radius:6px; font-size:13px}

/* ---------- sidebar ---------- */
.sidebar{
  width:248px; flex-shrink:0; background:linear-gradient(180deg,#0B4A3C 0%, #04342C 100%);
  color:#E8F3EE; padding:22px 14px; display:flex; flex-direction:column; gap:20px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:12px; padding:0 8px}
.brand h1{font-size:22px; color:#fff; margin:0}
.brand p{font-size:12px; color:#9FE1CB; margin:0}
#nav{display:flex; flex-direction:column; gap:2px}
#nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:#CFE7DD; text-decoration:none; font-size:14.5px; transition:background .15s;
}
#nav a i{font-size:19px}
#nav a:hover{background:rgba(255,255,255,.08)}
#nav a.active{background:#1D9E75; color:#fff; font-weight:600}
.sidebar-foot{margin-top:auto; font-size:12px; color:#8FB8A9; padding:0 8px}

/* ---------- layout ---------- */
main{flex:1; padding:28px 34px 60px; max-width:1180px}
.page.hidden, .hidden{display:none}
.page-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.sub{color:var(--muted); font-size:14px}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px; margin-bottom:18px}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); margin-bottom:18px;
}
.grid-2 .card{margin-bottom:0}
.hint{font-size:13px; color:var(--muted)}

/* ---------- buttons, tabs ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink); font-size:14px; font-family:inherit;
  cursor:pointer; transition:.15s; text-decoration:none;
}
.btn:hover{border-color:var(--green-500); color:var(--green-700)}
.btn.primary{background:var(--green-700); border-color:var(--green-700); color:#fff}
.btn.primary:hover{background:var(--green-900)}
.btn.ghost{border-style:dashed; color:var(--muted)}
.btn.sg{background:var(--sg-50); border-color:#CDBBF2; color:var(--sg-700)}
.btn.sg:hover{background:#E5DBF9}
.btn.danger-ghost{color:var(--red)}
.btn:disabled{opacity:.5; cursor:wait}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-family:inherit; font-size:14px; cursor:pointer; color:var(--muted);
}
.tab.active{background:var(--green-700); color:#fff; border-color:var(--green-700); font-weight:600}
.horizon-tabs{display:flex; gap:6px; margin-top:14px}

.row{display:flex; gap:10px; align-items:center}
.row.wrap{flex-wrap:wrap}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.row-end{display:flex; justify-content:flex-end; gap:10px}

/* ---------- KPI ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:18px}
.kpi{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
}
.kpi .k-label{font-size:12.5px; color:var(--muted); display:flex; gap:6px; align-items:center}
.kpi .k-label i{color:var(--green-500); font-size:16px}
.kpi .k-value{font-size:24px; font-weight:700; color:var(--green-900); margin-top:4px; font-family:"Noto Serif",serif}
.kpi .k-note{font-size:12px; color:var(--muted)}
.kpi.warn .k-value{color:var(--amber)}
.kpi.bad .k-value{color:var(--red)}

.chart-wrap{position:relative; height:250px}

/* ---------- forms, tables ---------- */
input[type=text],input[type=number],input[type=password],input[type=date],input[type=email],select,textarea{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14px; background:#FDFCFA; color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--green-100); border-color:var(--green-500)}
label{font-size:13px; color:var(--muted); display:block}
label input,label select,label textarea{margin-top:4px}
.form-col{display:flex; flex-direction:column; gap:12px}
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
.inline-label{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink)}
.inline-label input{width:auto; margin:0}
.check{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink)}
.check input{width:auto}

.edit-table{width:100%; border-collapse:collapse; margin:10px 0}
.edit-table th{font-size:12.5px; color:var(--muted); text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); font-weight:600}
.edit-table td{padding:5px 6px; border-bottom:1px solid #F0EDE5}
.edit-table input,.edit-table select{padding:7px 10px}
.edit-table .num{text-align:right}
.edit-table td.del{width:34px; text-align:center; color:var(--red); cursor:pointer}

.data-table{width:100%; border-collapse:collapse; font-size:13.5px}
.data-table th{background:var(--green-50); color:var(--green-900); text-align:left; padding:8px 10px; font-size:12.5px}
.data-table td{padding:7px 10px; border-bottom:1px solid #F0EDE5}
.data-table td.num,.data-table th.num{text-align:right; font-variant-numeric:tabular-nums}
.pos{color:var(--green-700); font-weight:600}
.neg{color:var(--red); font-weight:600}

/* ---------- canvas ---------- */
.legend{display:flex; gap:18px; font-size:13px; color:var(--muted); margin-bottom:14px}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px}
.sg-inline{color:var(--sg-700); background:var(--sg-50); padding:0 6px; border-radius:6px}

.cv-block{margin-bottom:16px}
.cv-block .cv-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.cv-qs{margin:8px 0 10px; padding-left:18px; color:var(--muted); font-size:13.5px}
.cv-qs li{margin:3px 0}
.cv-block textarea{min-height:88px}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  padding:5px 12px; background:var(--green-50); border:1px solid var(--green-100);
  color:var(--green-900); border-radius:999px; font-size:13px;
}
.chip.sg{
  background:var(--sg-50); border:1px dashed #B9A3EC; color:var(--sg-700); cursor:pointer;
}
.chip.sg:hover{background:#E5DBF9}
.chip.sg::before{content:"✦ "; }
.sg-note{font-size:12.5px; color:var(--sg-700); margin-top:6px}

.bmc{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px}
.bmc-cell{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px; box-shadow:var(--shadow)}
.bmc-cell h4{font-size:13.5px; margin-bottom:6px; display:flex; align-items:center; gap:6px}
.bmc-cell h4 i{color:var(--green-500); font-size:16px}
.bmc-cell ul{margin:0; padding-left:16px; font-size:12.5px; color:var(--ink)}
.bmc-cell li{margin:3px 0}
.bmc-cell li.sg{color:var(--sg-700)}
.bmc-cell li.sg::marker{color:var(--sg)}
.c-kp{grid-column:1/3; grid-row:1/3}
.c-ka{grid-column:3/5}
.c-kr{grid-column:3/5}
.c-vp{grid-column:5/7; grid-row:1/3; background:var(--green-50)}
.c-cr{grid-column:7/9}
.c-ch{grid-column:7/9}
.c-cs{grid-column:9/11; grid-row:1/3}
.c-cost{grid-column:1/6}
.c-rev{grid-column:6/11}
.modern-card{border-left:4px solid var(--sg)}
.modern-card h3 i{color:var(--sg)}

/* ---------- steps / guide ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-bottom:18px}
.steps.compact{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{position:relative; padding-top:18px}
.step-num{
  position:absolute; top:-14px; left:18px; width:30px; height:30px; border-radius:50%;
  background:var(--green-700); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; box-shadow:var(--shadow);
}
.steps .card{margin-bottom:0}
.steps.compact .step{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px 16px 12px}
.step h4{font-size:15px}
.step p{font-size:13.5px; color:var(--muted); margin:0}
.nice-list{padding-left:20px; margin:0}
.nice-list li{margin:6px 0}
.guide-card{border-left:4px solid var(--green-500)}

/* ---------- tasks & plan ---------- */
.task-list{display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto}
.task{
  display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1px solid var(--line);
  border-radius:10px; background:#FDFCFA;
}
.task input[type=checkbox]{width:17px; height:17px; margin-top:2px; accent-color:var(--green-700); flex-shrink:0}
.task.done .t-title{text-decoration:line-through; color:var(--muted)}
.t-title{font-size:14px; font-weight:600}
.t-meta{font-size:12px; color:var(--muted)}
.t-date{font-size:12px; color:var(--green-700); white-space:nowrap; margin-left:auto; font-variant-numeric:tabular-nums}
.task .gcal{margin-left:8px; color:var(--muted); cursor:pointer; text-decoration:none}
.task .gcal:hover{color:var(--green-700)}
.badge{display:inline-block; font-size:11px; padding:2px 9px; border-radius:999px; font-weight:600}
.b-mark{background:var(--amber-50); color:#8A5A14}
.b-fin{background:var(--green-100); color:var(--green-900)}
.b-mgmt{background:#E6EEF8; color:#20507E}
.b-for{background:var(--sg-50); color:var(--sg-700)}

.phase{margin-bottom:18px}
.phase-head{
  display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap;
}
.phase-head .ph-num{
  width:32px; height:32px; border-radius:50%; background:var(--green-700); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.phase-head h3{margin:0}
.phase-head .ph-dates{font-size:13px; color:var(--muted)}
.progress{height:8px; background:var(--green-50); border-radius:99px; overflow:hidden; margin:8px 0}
.progress i{display:block; height:100%; background:var(--green-500); border-radius:99px; transition:width .3s}

/* ---------- chat ---------- */
.chat-card{display:flex; flex-direction:column; height:calc(100vh - 200px); min-height:420px}
.chat-log{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-bottom:10px}
.msg{max-width:78%; padding:12px 16px; border-radius:16px; font-size:14.5px; white-space:pre-wrap}
.msg.user{align-self:flex-end; background:var(--green-700); color:#fff; border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start; background:var(--green-50); border:1px solid var(--green-100); border-bottom-left-radius:4px}
.msg.bot.thinking{color:var(--muted); font-style:italic}
.chat-input{display:flex; gap:10px; align-items:flex-end; border-top:1px solid var(--line); padding-top:12px}
.chat-input textarea{resize:none}

/* ---------- misc ---------- */
.link-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px}
.link-grid a{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; text-decoration:none; font-size:13.5px; color:var(--ink); background:#FDFCFA;
}
.link-grid a:hover{border-color:var(--green-500)}
.link-grid a i{color:var(--green-500); font-size:19px; flex-shrink:0}

.banner{
  background:var(--amber-50); border:1px solid #EBD3A8; color:#6B4310; padding:12px 16px;
  border-radius:12px; margin-bottom:16px; display:flex; gap:10px; align-items:flex-start; font-size:14px;
}
.banner i{margin-top:2px}

#toast{
  position:fixed; bottom:24px; right:24px; z-index:99; display:flex; flex-direction:column; gap:8px;
}
.toast-item{
  background:var(--green-900); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.25); animation:pop .25s;
}
@keyframes pop{from{opacity:0; transform:translateY(8px)}to{opacity:1}}

/* ---------- нэвтрэлтийн хаалт ---------- */
.auth-gate{
  position:fixed; inset:0; z-index:200; background:linear-gradient(160deg,#0B4A3C 0%,#04342C 100%);
  display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto;
}
.auth-gate.hidden{display:none}
.auth-card{
  background:var(--paper); border-radius:20px; padding:34px 36px; width:100%; max-width:410px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.auth-brand{text-align:center; margin-bottom:22px}
.auth-brand h2{margin:10px 0 0; font-size:26px}
.auth-brand p{color:var(--muted); font-size:13px; margin:0}
.auth-pane h3{font-size:18px; margin-bottom:14px}
.auth-pane label{margin-bottom:12px}
.btn.wide{width:100%; justify-content:center; margin-top:6px; padding:11px}
.auth-links{text-align:center; font-size:13px; margin-top:14px; color:var(--muted)}
.auth-msg{text-align:center; font-size:13px; margin:12px 0 0; min-height:18px}
.auth-user{text-align:center; color:var(--muted); font-size:13px; margin-bottom:10px}
.pay-box{background:var(--green-50); border:1px solid var(--green-100); border-radius:12px; padding:14px 16px; margin-bottom:14px}
.pay-box ul{margin:6px 0 0}
.pay-price{font-family:"Noto Serif",serif; font-size:34px; font-weight:700; color:var(--green-900); margin:0 0 4px}
.pay-price span{font-size:15px; color:var(--muted); font-family:"Noto Sans",sans-serif; font-weight:400; margin-left:4px}

.empty{color:var(--muted); font-size:13.5px; text-align:center; padding:24px 10px}
.empty i{font-size:28px; display:block; margin-bottom:6px; color:var(--line)}

.report{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px 30px; box-shadow:var(--shadow)}
.report h3{border-bottom:2px solid var(--green-100); padding-bottom:6px; margin-top:18px}
.report h3:first-child{margin-top:0}
.report .rep-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--green-700); padding-bottom:10px; margin-bottom:14px}
.report .rep-head h2{margin:0}
.report .rep-head span{color:var(--muted); font-size:13px}

@media (max-width: 900px){
  body{flex-direction:column}
  .sidebar{width:100%; height:auto; position:static; flex-direction:row; align-items:center; overflow-x:auto}
  #nav{flex-direction:row}
  #nav a span{display:none}
  .bmc{grid-template-columns:1fr 1fr}
  .bmc-cell{grid-column:auto!important; grid-row:auto!important}
  .calc-grid{grid-template-columns:1fr}
}
@media print{
  .sidebar,.btn,.tabs,.chat-input,#toast,.page-head button,.horizon-tabs{display:none!important}
  body{background:#fff}
  main{padding:0; max-width:none}
  .card,.report{box-shadow:none}
}