:root {
  --g950: #0f2206;
  --g900: #1b3a0b;
  --g800: #23470f;
  --g700: #2f6b14;
  --g600: #3f8a1c;
  --g100: #e7f1d8;
  --g50: #f3f8ea;
  --lime: #a8c83a;
  --lime-200: #dbeaa6;
  --lime-50: #f6fae6;
  --bg: #f5f7f1;
  --card: #ffffff;
  --line: #e3e8da;
  --line-2: #eef1e8;
  --ink: #1d2617;
  --ink-2: #4b5643;
  --ink-3: #7c8673;
  --amber: #c98a12;
  --amber-50: #fdf5e3;
  --amber-200: #f2d798;
  --red: #c2413b;
  --red-50: #fcefee;
  --red-200: #f1c4c1;
  --blue: #2f6aa3;
  --blue-50: #eaf2fb;
  --cA: #2f6b14;
  --cB: #93b82e;
  --shadow: 0 1px 3px rgba(20, 40, 10, .06), 0 1px 2px rgba(20, 40, 10, .04);
  --lift: 0 18px 40px -16px rgba(20, 40, 10, .35);
  --r: 14px;
  --display: 'Michroma', 'Manrope', sans-serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--g700); }
h1, h2, h3 { margin: 0; }
.display { font-family: var(--display); letter-spacing: .02em; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- Splash + login ---------- */
.splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #2a5512, var(--g950) 70%); transition: opacity .5s ease; }
.splash img { width: 240px; animation: scaleIn .6s ease; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.splash .dots { margin-top: 28px; display: flex; gap: 8px; }
.splash .dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); animation: pulse 1s infinite ease-in-out; }
.splash .dots span:nth-child(2) { animation-delay: .15s; }
.splash .dots span:nth-child(3) { animation-delay: .3s; }
.splash.out { opacity: 0; pointer-events: none; }
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.login { min-height: 100vh; display: flex; }
.login-brand { flex: 1; position: relative; overflow: hidden; display: none; color: #fff; background: var(--g950); }
.login-brand .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; }
.login-brand .veil { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(15,34,6,.55), rgba(15,34,6,.95)); }
.login-brand .inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; }
.login-brand img { width: 170px; }
.login-brand h2 { font-family: var(--display); font-size: 26px; line-height: 1.35; max-width: 460px; font-weight: 400; }
.login-brand p { color: #cfe0b4; max-width: 440px; line-height: 1.6; }
.login-brand .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.login-brand .chips span { border: 1px solid rgba(168,200,58,.45); color: var(--lime-200); border-radius: 99px; padding: 5px 12px; font-size: 12px; }
.login-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: #fff; }
.login-form .box { width: 100%; max-width: 360px; animation: slideUp .5s ease; }
.login-form .logo-m { width: 120px; margin-bottom: 24px; }
.login-form h1 { font-family: var(--display); font-size: 20px; font-weight: 400; }
.login-form .hint { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: var(--lime-50); border: 1px solid var(--lime-200); font-size: 12px; color: var(--ink-2); }
@media (min-width: 960px) { .login-brand { display: block; } .login-form .logo-m { display: none; } }

/* ---------- Shell ---------- */
.app { display: flex; min-height: 100vh; }
.side { width: 248px; flex-shrink: 0; background: var(--g950); color: #d7e4c4; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40; transition: transform .25s ease; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.side .brand img { height: 38px; }
.side .brand div { font-family: var(--display); font-size: 10.5px; line-height: 1.4; color: var(--lime); letter-spacing: .08em; }
.side nav { flex: 1; overflow-y: auto; padding: 6px 10px 16px; }
.side .grp { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #7f9a68; padding: 14px 10px 6px; }
.side a.item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; color: #d7e4c4; text-decoration: none; font-weight: 500; cursor: pointer; }
.side a.item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.side a.item:hover { background: rgba(168,200,58,.08); color: #fff; }
.side a.item.on { background: linear-gradient(90deg, rgba(168,200,58,.22), rgba(168,200,58,.06)); color: #fff; box-shadow: inset 3px 0 0 var(--lime); }
.side a.item .pill { margin-left: auto; background: var(--red); color: #fff; font-size: 10.5px; border-radius: 99px; padding: 1px 7px; font-weight: 700; }
.side a.item .pill.ai { background: var(--lime); color: var(--g950); }
.side .foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.07); font-size: 11.5px; color: #8ea67a; }
.main { flex: 1; min-width: 0; margin-left: 248px; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; background: rgba(245,247,241,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 10px 24px; }
.top .burger { display: none; }
.top h1 { font-family: var(--display); font-size: 15px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .sp { flex: 1; }
.seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--g900); color: #fff; }
.seg .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.iconbtn { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn .badge-n { position: absolute; top: -5px; right: -5px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 1px 5px; }
.user { display: flex; align-items: center; gap: 9px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--g950); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.user .who { line-height: 1.2; }
.user .who b { display: block; font-size: 13px; }
.user .who span { font-size: 11.5px; color: var(--ink-3); }
.content { padding: 22px 24px 60px; max-width: 1480px; width: 100%; animation: fadeIn .25s ease; }
.scrim { display: none; }

@media (max-width: 1080px) {
  .side { transform: translateX(-100%); }
  .side.open { transform: none; box-shadow: var(--lift); }
  .scrim.open { display: block; position: fixed; inset: 0; background: rgba(10,20,5,.45); z-index: 35; }
  .main { margin-left: 0; }
  .top .burger { display: inline-flex; }
  .user .who { display: none; }
}
@media (max-width: 640px) {
  .top { padding: 10px 14px; flex-wrap: wrap; }
  .top h1 { order: 1; flex: 1; }
  .top .seg { order: 5; width: 100%; justify-content: space-between; }
  .top .seg button { flex: 1; justify-content: center; padding: 6px 4px; }
  .top .sp { display: none; }
  .content { padding: 16px 14px 60px; }
}

/* ---------- Components ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.card.pad { padding: 18px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.card-h h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-b { padding: 16px 18px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1200px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-21, .g-12, .g3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .g2, .g4, .g5 { grid-template-columns: minmax(0, 1fr); } }
.mt { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }

.kpi { padding: 16px 18px; position: relative; overflow: hidden; }
.kpi .lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.kpi .val { font-size: 24px; font-weight: 800; margin-top: 6px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.kpi .ic { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; background: var(--g50); color: var(--g700); display: flex; align-items: center; justify-content: center; }
.kpi .ic svg { width: 18px; height: 18px; }
.kpi.warn .ic { background: var(--amber-50); color: var(--amber); }
.kpi.bad .ic { background: var(--red-50); color: var(--red); }
.up { color: var(--g600); font-weight: 700; }
.down { color: var(--red); font-weight: 700; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; border: 1px solid transparent; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s ease; white-space: nowrap; text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn-p { background: var(--g900); color: #fff; }
.btn-p:hover { background: var(--g700); }
.btn-l { background: var(--lime); color: var(--g950); }
.btn-l:hover { filter: brightness(1.05); }
.btn-o { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn-o:hover { background: var(--g50); }
.btn-d { background: var(--red); color: #fff; }
.btn-g { background: transparent; color: var(--ink-2); }
.btn-g:hover { background: var(--g50); }
.btn-s { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.input, select.input, textarea.input { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 11px; outline: none; transition: box-shadow .15s; }
.input:focus { box-shadow: 0 0 0 3px rgba(168,200,58,.35); border-color: var(--lime); }
.label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 5px; }
.field + .field { margin-top: 12px; }
.search { position: relative; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); }
.search .input { padding-left: 32px; min-width: 220px; }

.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; white-space: nowrap; }
.b-ok { background: var(--g100); color: var(--g700); }
.b-warn { background: var(--amber-50); color: #9a6a0a; border: 1px solid var(--amber-200); }
.b-bad { background: var(--red-50); color: var(--red); border: 1px solid var(--red-200); }
.b-info { background: var(--blue-50); color: var(--blue); }
.b-mute { background: var(--line-2); color: var(--ink-2); }
.b-ai { background: var(--g950); color: var(--lime); }
.emp { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; }
.emp.A { background: var(--cA); }
.emp.B { background: var(--cB); color: var(--g950); }

.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafbf7; white-space: nowrap; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #fafcf5; }
.tbl tr.click { cursor: pointer; }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tfoot td { font-weight: 800; border-top: 2px solid var(--line); background: #fafbf7; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs button { border: 0; background: transparent; padding: 10px 14px; font-weight: 700; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--g900); border-bottom-color: var(--lime); }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid; }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert.warn { background: var(--amber-50); border-color: var(--amber-200); color: #7a5208; }
.alert.bad { background: var(--red-50); border-color: var(--red-200); color: #8c2b26; }
.alert.ok { background: var(--g50); border-color: var(--g100); color: var(--g800); }
.alert.info { background: var(--blue-50); border-color: #cfe0f3; color: #234e78; }
.alert b { display: block; margin-bottom: 2px; }

.list-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line-2); }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .s { font-size: 12px; color: var(--ink-3); }
.dotc { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dotc svg { width: 17px; height: 17px; }
.dotc.bad { background: var(--red-50); color: var(--red); }
.dotc.warn { background: var(--amber-50); color: var(--amber); }
.dotc.ok { background: var(--g50); color: var(--g700); }
.dotc.info { background: var(--blue-50); color: var(--blue); }

.bar { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; display: flex; }
.bar > span { display: block; height: 100%; }
.mix { display: flex; height: 10px; border-radius: 99px; overflow: hidden; min-width: 90px; }
.mix .a { background: var(--cA); }
.mix .b { background: var(--cB); }

/* charts */
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .ax { font-size: 10.5px; fill: var(--ink-3); font-family: var(--sans); }
.chart .gl { stroke: var(--line-2); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tip { position: fixed; z-index: 200; pointer-events: none; background: var(--g950); color: #fff; padding: 7px 10px; border-radius: 8px; font-size: 12px; box-shadow: var(--lift); white-space: nowrap; }

/* kanban */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: #eef2e6; border-radius: 14px; padding: 10px; min-height: 300px; }
.kcol.over { outline: 2px dashed var(--lime); }
.kcol h4 { margin: 2px 4px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; display: flex; justify-content: space-between; color: var(--ink-2); }
.kcard { background: #fff; border-radius: 11px; padding: 11px 12px; border: 1px solid var(--line); box-shadow: var(--shadow); cursor: grab; margin-bottom: 8px; animation: slideUp .25s ease; }
.kcard:active { cursor: grabbing; }
.kcard .t { font-weight: 800; font-size: 13px; }
.kcard .s { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.kcard .m { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: 12px; }

/* modal */
.modal-bg { position: fixed; inset: 0; z-index: 150; background: rgba(15,30,8,.5); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; animation: fadeIn .2s ease; }
.modal { width: 100%; max-width: 640px; background: #fff; border-radius: 18px; box-shadow: var(--lift); animation: scaleIn .25s ease; overflow: hidden; }
.modal.wide { max-width: 920px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--g950); color: #fff; }
.modal-h h3 { font-family: var(--display); font-size: 14px; font-weight: 400; }
.modal-h button { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; }
.modal-b { padding: 20px; }
.modal-f { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 8px; background: #fafbf7; flex-wrap: wrap; }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--g950); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--lift); display: flex; gap: 10px; align-items: center; animation: slideUp .25s ease; max-width: 380px; }
.toast svg { width: 18px; height: 18px; color: var(--lime); flex-shrink: 0; }

/* steps / AI */
.steps .st { display: flex; gap: 10px; align-items: center; padding: 7px 0; color: var(--ink-3); }
.steps .st.on { color: var(--ink); font-weight: 700; }
.steps .st.done { color: var(--g700); }
.spin { width: 16px; height: 16px; border: 2px solid var(--lime-200); border-top-color: var(--g700); border-radius: 50%; animation: rot .7s linear infinite; flex-shrink: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
.drop { border: 2px dashed #c9d6b2; border-radius: 16px; padding: 32px 20px; text-align: center; background: var(--lime-50); cursor: pointer; transition: all .15s; }
.drop:hover, .drop.over { border-color: var(--g600); background: var(--g50); }
.drop svg { width: 38px; height: 38px; color: var(--g700); }

.chat { display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 92%; padding: 12px 14px; border-radius: 14px; line-height: 1.55; animation: slideUp .25s ease; }
.msg.u { align-self: flex-end; background: var(--g900); color: #fff; border-bottom-right-radius: 4px; }
.msg.a { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; width: 92%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.chip:hover { border-color: var(--lime); background: var(--lime-50); }

.tree { font-size: 13px; }
.tree .node { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin: 6px 0; }
.tree .kids { margin-left: 22px; padding-left: 14px; border-left: 2px solid var(--lime-200); }
.mail { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mail .mh { padding: 12px 16px; background: #fafbf7; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.mail .mb { padding: 18px; }
.switch { position: relative; width: 38px; height: 22px; border-radius: 99px; background: #cfd6c4; border: 0; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch.on { background: var(--g600); }
.switch.on::after { transform: translateX(16px); }
.banner-demo { background: var(--g950); color: var(--lime-200); font-size: 12px; text-align: center; padding: 6px 12px; }
.banner-demo b { color: var(--lime); }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.section-title p { margin: 4px 0 0; color: var(--ink-3); max-width: 760px; }
.empty { padding: 30px; text-align: center; color: var(--ink-3); }