/* ─────────────────────────────────────────────────────────────
   Chatbot Admin Console — shared styles (Chatbot dark theme)
   ───────────────────────────────────────────────────────────── */
/* Colors, palette tokens, and the light/dark theme variants now live in
   theme.css (loaded before this file). The appearance-selector styles are
   there too. This file holds layout + components only. */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}

/* ───── Layout shell ───── */
.m-app{display:flex;min-height:100vh;}
.m-side{
  width:248px;flex-shrink:0;
  background:#0f1113;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:18px;
  padding:22px 14px 16px;
  position:sticky;top:0;height:100vh;
}
.m-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.m-content{padding:26px 32px 48px;max-width:1280px;width:100%;}

/* ───── Sidebar brand + nav ───── */
.m-brand{display:flex;align-items:center;gap:11px;padding:2px 8px 4px;}
.m-mark{
  width:34px;height:34px;border-radius:9px;position:relative;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, var(--accent) 0%, oklch(0.34 0.03 250) 62%, var(--surface) 100%);
}
.m-mark::after{content:'';position:absolute;inset:3px;border-radius:6px;background:#0f1113;}
.m-mark svg{position:absolute;inset:0;margin:auto;z-index:1;}
.m-brand-name{font-size:15px;font-weight:800;letter-spacing:-0.3px;}
.m-brand-sub{font-size:10px;color:var(--text-mute);letter-spacing:1.2px;text-transform:uppercase;font-weight:700;margin-top:2px;}

.m-nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;}
.m-nav-label{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-mute);padding:14px 10px 6px;}
.m-nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:9px;
  color:var(--text-dim);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .12s,color .12s;
}
.m-nav-item i{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.m-nav-item:hover{background:var(--surface);color:var(--text);}
.m-nav-item.active{background:transparent;color:var(--text);font-weight:700;box-shadow:none;}
.m-nav-item.active i{color:var(--accent);}
.m-nav-item .m-count{
  margin-left:auto;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:99px;
  background:var(--surface3);color:var(--text-dim);
}
.m-nav-item.active .m-count{background:var(--accent);color:#0A0B0D;}

.m-shortcuts{display:flex;flex-direction:column;gap:2px;flex-shrink:0;padding-top:12px;border-top:1px solid var(--border);}
.m-side-foot{position:relative;display:flex;align-items:center;gap:8px;}
.m-profile{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px;flex:1;min-width:0;border:none;background:transparent;text-align:left;font-family:inherit;color:inherit;cursor:pointer;}
.m-profile .m-av{transition:filter .15s;filter:brightness(.85) grayscale(.12);}
.m-profile-caret{margin-left:auto;color:var(--text-mute);font-size:12px;transition:transform .2s ease,color .12s;}
/* Variant 3 (text + avatar brighten) with the rotating arrow from variant 1 — no background, no ring */
.m-profile:hover .m-profile-name{color:var(--text);}
.m-profile:hover .m-av{filter:none;}
.m-profile:hover .m-profile-caret{color:var(--text);}
.m-side-foot:has(.m-pop.open) .m-profile-name{color:var(--text);}
.m-side-foot:has(.m-pop.open) .m-profile .m-av{filter:none;}
.m-side-foot:has(.m-pop.open) .m-profile-caret{transform:rotate(180deg);color:var(--text);}

/* Profile popup menu (opens above the profile) */
.m-pop{
  position:absolute;left:0;right:0;bottom:calc(100% + 8px);
  background:var(--surface2);border:1px solid var(--border2);border-radius:12px;
  padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.55);
  display:none;z-index:60;
}
.m-pop.open{display:block;}
.m-pop-mail{font-size:11.5px;color:var(--text-mute);padding:8px 10px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.m-pop-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;}
.m-pop-item i{font-size:15px;width:18px;text-align:center;color:var(--text-dim);}
.m-pop-item:hover{background:rgba(255,255,255,0.05);}
.m-pop-item:hover i{color:var(--text);}
.m-pop-sep{height:1px;background:var(--border);margin:6px 8px;}
.m-pop-item.danger{color:var(--bad);}
.m-pop-item.danger i{color:var(--bad);}
.m-pop-item.danger:hover{background:var(--bad-bg);}
.m-av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#5b8def,#3a6cd9);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;letter-spacing:.4px;
}
.m-profile-name{font-size:13px;font-weight:600;color:var(--text-dim);transition:color .12s;}
.m-profile-role{font-size:10.5px;color:var(--text-mute);margin-top:2px;}

/* ───── Page header ───── */
.m-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.m-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-mute);margin-bottom:8px;}
.m-page-title{font-size:24px;font-weight:800;letter-spacing:-0.5px;}
.m-page-sub{font-size:13.5px;color:var(--text-dim);margin-top:6px;max-width:620px;line-height:1.5;}
.m-topbar-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}

/* ───── Buttons ───── */
.m-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:9px;border:1px solid var(--border2);
  background:var(--surface2);color:var(--text);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .12s,filter .12s;white-space:nowrap;
}
.m-btn i{font-size:14px;}
.m-btn:hover{background:var(--surface3);}
.m-btn-primary{background:var(--accent);color:#0A0B0D;border-color:transparent;}
.m-btn-primary:hover{filter:brightness(1.06);background:var(--accent);}
.m-btn-ghost{background:transparent;}
.m-btn-ghost:hover{background:var(--surface);}
.m-btn-danger{background:transparent;color:var(--bad);border-color:transparent;}
.m-btn-danger:hover{background:var(--bad-bg);}
.m-btn-sm{padding:6px 11px;font-size:12px;}

/* ───── KPI tiles ───── */
.m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.m-kpis.cols-3{grid-template-columns:repeat(3,1fr);}
.m-kpi{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:13px;row-gap:8px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.m-kpi-ico{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:16px;margin-bottom:0;background:var(--surface3);color:var(--text-dim);grid-column:1;grid-row:1;
}
.m-kpi-ico.acc{background:var(--warn-bg);color:var(--accent);}
.m-kpi-ico.good{background:var(--good-bg);color:var(--good);}
.m-kpi-ico.info{background:var(--info-bg);color:var(--info);}
.m-kpi-ico.violet{background:var(--violet-bg);color:var(--violet);}
.m-kpi-val{font-size:26px;font-weight:800;letter-spacing:-0.6px;line-height:1;grid-column:2;grid-row:1;}
.m-kpi-lbl{font-size:12.5px;color:var(--text-dim);margin-top:0;font-weight:500;grid-column:1/-1;grid-row:2;}
.m-kpi-sub{font-size:11px;color:var(--text-mute);margin-top:0;grid-column:1/-1;grid-row:3;}
.m-kpi-trend{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;margin-top:0;grid-column:1/-1;grid-row:3;justify-self:end;}
.m-kpi-trend i{font-size:10px;}
.m-kpi-trend.up{background:var(--good-bg);color:var(--good);}
.m-kpi-trend.down{background:var(--bad-bg);color:var(--bad);}

/* ───── Charts ───── */
.m-charts-2{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-bottom:16px;}
.m-leg{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.m-leg span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-dim);font-weight:600;}
.m-leg .d{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.m-chart-body{padding:10px 18px 16px;}
.m-axis{display:flex;justify-content:space-between;margin-top:8px;}
.m-axis span{font-size:10.5px;color:var(--text-mute);}
.m-card-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end;}
.m-plot{display:flex;gap:10px;}
.m-plot-svg{flex:1;min-width:0;position:relative;}
.m-yaxis.bars{padding:3px 0;}
.m-stack-row{display:flex;align-items:flex-end;gap:7px;height:200px;}
.m-stack-col{flex:1;height:100%;display:flex;align-items:flex-end;}
.m-stack{width:100%;display:flex;flex-direction:column;border-radius:5px 5px 0 0;overflow:hidden;min-height:4px;}
.m-stack .seg-esc{background:var(--info);}
.m-stack .seg-hand{background:linear-gradient(180deg,var(--accent),var(--accent-deep));flex:1;min-height:2px;}
.m-xcols{display:flex;gap:7px;margin-top:8px;}
.m-xcols span{flex:1;text-align:center;font-size:10px;color:var(--text-mute);}
.m-stack-col{cursor:pointer;}
.m-stack-col .m-stack{transition:filter .12s;}
.m-stack-col.hot .m-stack{filter:brightness(1.15);}
.chart-tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));background:var(--surface3);border:1px solid var(--border2);border-radius:9px;padding:8px 11px;white-space:nowrap;pointer-events:none;display:none;box-shadow:0 8px 22px rgba(0,0,0,.55);z-index:9;}
.chart-tip .ct-h{font-weight:800;font-size:12.5px;margin-bottom:5px;color:var(--text);display:flex;align-items:center;}
.chart-tip .ct-r{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:11.5px;line-height:1.7;}
.chart-tip .ct-r .lbl{display:flex;align-items:center;gap:6px;color:var(--text-dim);}
.chart-tip .ct-r .lbl .d{width:8px;height:8px;border-radius:2px;}
.chart-tip .ct-r .val{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.chart-tip .ct-sep{border-top:1px solid var(--border2);margin-top:5px;padding-top:4px;}
.m-donut-center{pointer-events:none;}
.m-donut-tag{pointer-events:none;}
.m-donut svg circle[data-seg]{transition:opacity .12s;}
.m-hbar-fill{transition:filter .12s;}
.m-hbar:hover .m-hbar-fill{filter:brightness(1.18);}
.m-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:200px;text-align:right;min-width:32px;padding:14px 0;box-sizing:border-box;}
.m-yaxis span{font-size:10.5px;color:var(--text-mute);font-family:'JetBrains Mono',monospace;line-height:1;}
.hr-wrap{position:relative;cursor:crosshair;}
.hr-guide{position:absolute;top:0;width:1px;height:200px;background:var(--border2);pointer-events:none;display:none;}
.hr-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);transform:translate(-50%,-50%);box-shadow:0 0 0 4px var(--warn-bg);pointer-events:none;display:none;}
.hr-tip{position:absolute;transform:translate(-50%,calc(-100% - 12px));background:var(--surface3);border:1px solid var(--border2);border-radius:8px;padding:6px 10px;font-size:11.5px;color:var(--text);white-space:nowrap;pointer-events:none;display:none;box-shadow:0 6px 18px rgba(0,0,0,.55);z-index:6;text-align:center;}
.hr-tip b{font-size:14px;font-weight:800;}
.hr-tip .tt{display:block;color:var(--text-mute);font-size:10.5px;font-family:'JetBrains Mono',monospace;margin-top:1px;}
.m-impact-2{display:grid;grid-template-columns:1fr 1fr;gap:2px 34px;}
.m-impact-2 .m-impact-row{border-bottom:none;padding:11px 0;}
@media (max-width:760px){.m-impact-2{grid-template-columns:1fr;}}

/* donut */
.m-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;padding:14px 18px 20px;}
.m-donut{position:relative;width:172px;height:172px;}
.m-donut svg{transform:rotate(-90deg);}
.m-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.m-donut-pct{font-size:32px;font-weight:800;letter-spacing:-1px;line-height:1;}
.m-donut-lbl{font-size:11px;color:var(--text-dim);margin-top:4px;}
.m-donut-annot{position:relative;width:100%;height:188px;}
.m-donut-annot .m-donut{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.m-donut-tag{position:absolute;display:flex;flex-direction:column;gap:2px;}
.m-donut-tag .t{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);font-weight:600;}
.m-donut-tag .t .d{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.m-donut-tag .n{font-size:14px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.m-donut-tag .n small{font-weight:600;color:var(--text-mute);font-size:11px;margin-left:2px;}
.m-donut-tag.tl{top:6px;left:8px;}
.m-donut-tag.tr{top:6px;right:8px;align-items:flex-end;}
.m-donut-tag.bc{bottom:0;left:50%;transform:translateX(-50%);align-items:center;}
.m-donut-foot{font-size:12px;color:var(--text-mute);}
.m-donut-foot b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums;}

/* horizontal bars */
.m-hbar{display:flex;align-items:center;gap:12px;margin-bottom:15px;}
.m-hbar:last-child{margin-bottom:0;}
.m-hbar-lbl{font-size:12.5px;color:var(--text-dim);width:128px;flex-shrink:0;}
.m-hbar-track{flex:1;height:9px;border-radius:6px;background:var(--surface3);overflow:hidden;}
.m-hbar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent-deep),var(--accent));}
.m-hbar-val{font-size:12.5px;font-weight:700;width:48px;text-align:right;flex-shrink:0;}

/* vertical bars */
.m-vbars{display:flex;align-items:flex-end;gap:10px;height:172px;padding:16px 4px 0;}
.m-vcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;}
.m-vbar{width:100%;max-width:30px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent),var(--accent-deep));min-height:4px;}
.m-vbar.mute{background:var(--surface3);}
.m-vx{font-size:10.5px;color:var(--text-mute);}

/* before/after change pill */
.m-chg{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;}
.m-chg.good{background:var(--good-bg);color:var(--good);}

/* impact stat list */
.m-impact-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);}
.m-impact-row:last-child{border-bottom:none;}
.m-impact-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.m-impact-meta{flex:1;min-width:0;}
.m-impact-t{font-size:12.5px;color:var(--text-dim);}
.m-impact-v{font-size:19px;font-weight:800;letter-spacing:-0.3px;margin-top:2px;}
.m-impact-v small{font-size:12px;font-weight:600;color:var(--good);}

@media (max-width:980px){.m-charts-2{grid-template-columns:1fr;}}

/* ───── Cards ───── */
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.m-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.m-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 12px;}
.m-card-title{font-size:14.5px;font-weight:700;letter-spacing:-0.2px;}
.m-card-lbl{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-mute);margin-bottom:4px;}
.m-card-link{font-size:12px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:4px;}
.m-card-body{padding:4px 18px 18px;}

/* ───── Toolbar (search + filters) ───── */
.m-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.m-search{
  flex:1;min-width:220px;max-width:360px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:9px 14px;display:flex;align-items:center;gap:10px;
}
.m-search i{color:var(--text-mute);font-size:14px;}
.m-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:13.5px;}
.m-search input::placeholder{color:var(--text-mute);}
.m-chips{display:flex;gap:6px;flex-wrap:wrap;}
.m-chip{
  padding:7px 14px;border-radius:99px;border:none;
  background:var(--surface2);color:var(--text-dim);
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .12s,color .12s;
}
.m-chip:hover{background:var(--surface3);color:var(--text);}
.m-chip.on{background:var(--accent);color:#0A0B0D;}

/* ───── Tables ───── */
.m-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:relative;}
.m-table{width:100%;border-collapse:collapse;}
.m-table thead th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-mute);padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface2);
}
.m-table tbody td{padding:14px 18px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle;}
.m-table tbody tr:last-child td{border-bottom:none;}
.m-table tbody tr{transition:background .1s;}
.m-table tbody tr:hover{background:var(--surface2);}
.m-table .num{font-family:var(--mono);}
.m-table .ta-right{text-align:right;}

.m-user{display:flex;align-items:center;gap:11px;min-width:0;}
.m-user .m-av{width:38px;height:38px;font-size:12px;}
.m-user .av-violet{background:linear-gradient(135deg,#9b7ddc,#7a5ec9);}
.m-user .av-teal{background:linear-gradient(135deg,#4dbab0,#2a9d8f);}
.m-user .av-orange{background:linear-gradient(135deg,#f4a356,#e07d2b);}
.m-user .av-pink{background:linear-gradient(135deg,#ec6e8d,#d8456c);}
.m-user .av-grey{background:linear-gradient(135deg,#8c98a4,#6b7785);}
.m-user-name{font-size:13.5px;font-weight:600;}
.m-user-mail{font-size:11.5px;color:var(--text-mute);margin-top:2px;}

/* ───── Badges / pills ───── */
.m-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.2px;}
.m-badge i{font-size:11px;}
.role-admin{background:var(--warn-bg);color:var(--accent);}
.role-manager{background:var(--violet-bg);color:var(--violet);}
.role-operator{background:var(--info-bg);color:var(--info);}
.role-viewer{background:var(--surface3);color:var(--text-dim);}
.role-owner{background:var(--accent);color:#0A0B0D;}
.st-active{background:var(--good-bg);color:var(--good);}
.st-invited{background:var(--warn-bg);color:var(--accent);}
.st-suspended{background:var(--bad-bg);color:var(--bad);}
.st-trained{background:var(--good-bg);color:var(--good);}
.st-processing{background:var(--info-bg);color:var(--info);}
.st-queued{background:var(--surface3);color:var(--text-dim);}
.st-failed{background:var(--bad-bg);color:var(--bad);}
.m-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

.m-perms{display:flex;gap:5px;flex-wrap:wrap;}
.m-perm{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--surface3);color:var(--text-dim);white-space:nowrap;}

/* ───── Row action icons ───── */
.m-actions{display:flex;gap:4px;justify-content:flex-end;}
.m-icon-btn{
  width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--text-mute);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:background .12s,color .12s;
}
.m-icon-btn:hover{background:var(--surface3);color:var(--text);}
.m-icon-btn.danger:hover{background:var(--bad-bg);color:var(--bad);}

/* ───── Tabs ───── */
.m-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.m-tabs::-webkit-scrollbar{height:0;}
.m-tab{
  flex:0 0 auto;white-space:nowrap;
  padding:10px 16px;background:transparent;border:none;cursor:pointer;
  color:var(--text-dim);font-family:inherit;font-size:13.5px;font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s;
}
.m-tab:hover{color:var(--text);}
.m-tab.on{color:var(--text);border-bottom-color:var(--accent);}
.m-tabpane{display:none;}
.m-tabpane.on{display:block;}

/* ───── Knowledge-base section (dark) ───── */
.m-tab{text-decoration:none;}
.kb-filters{margin-bottom:18px;}

/* Slim inline filter bar */
.kb-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px;}
.kb-mini{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:0 12px;height:40px;color:var(--text);font-family:inherit;font-size:13px;outline:none;cursor:pointer;}
.kb-mini:focus{box-shadow:0 0 0 3px var(--warn-bg);}
.kb-mini-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:0 12px;height:40px;transition:box-shadow .12s;}
.kb-mini-search:focus-within{box-shadow:0 0 0 3px var(--warn-bg);}
.kb-mini-search i{color:var(--text-mute);font-size:13px;}
.kb-mini-search:focus-within i{color:var(--accent);}
.kb-mini-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:13px;width:150px;min-width:0;}
.kb-mini-search input::placeholder{color:var(--text-mute);}
.kb-bar .m-btn{height:40px;}
.kb-bar .kb-spacer{flex:1;}

/* Type-to-tag filter field */
.kb-tags{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px;margin-bottom:14px;min-height:48px;}
/* magnifier-expand search (brands-style): collapsed = icon only, click = dark search box that grows from the magnifier */
.ms{display:flex;align-items:center;gap:4px;flex:none;border-radius:9px;height:36px;transition:background .12s;}
.ms.open{flex:1;min-width:0;}
.ms-mag{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;color:var(--text-dim);border-radius:8px;cursor:pointer;flex:none;font-size:15px;transition:color .12s;}
.ms-mag:hover{color:var(--text);}
.ms input,.ms input:focus{display:none;flex:1;min-width:0;height:34px;border:none;background:none;outline:none;box-shadow:none;font-family:inherit;font-size:13px;color:var(--text);}
.ms.open input{display:block;}
.ms-clear{display:none;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:none;color:var(--text-mute);border-radius:99px;cursor:pointer;flex:none;font-size:11px;padding:0;transition:background .12s,color .12s;}
.ms.open .ms-clear{display:inline-flex;}
.ms-clear:hover{background:var(--surface3);color:var(--text);}
/* brands-style status tabs (used beside the .ms search) */
.ms-tabs{display:flex;align-items:center;gap:4px;}
.ms-tabs[hidden]{display:none;}
.ms-tab{font-family:inherit;font-size:13px;font-weight:600;padding:6px 12px;border:none;background:none;border-radius:8px;color:var(--text-dim);cursor:pointer;transition:background .12s,color .12s;}
.ms-tab:hover{color:var(--text);}
.ms-tab.on{background:var(--surface3);color:var(--text);}
.kb-tags:focus-within{background:var(--surface2);}
.kb-tags > i{color:var(--text-mute);font-size:14px;flex-shrink:0;}
.kb-tag{display:inline-flex;align-items:center;gap:4px;background:var(--warn-bg);color:var(--accent);font-size:12.5px;font-weight:600;padding:4px 4px 4px 11px;border-radius:99px;}
.kb-tag button{background:transparent;border:none;color:var(--accent);cursor:pointer;font-size:10px;width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kb-tag button:hover{background:rgba(10,11,13,.18);}
.kb-tags input{flex:1;min-width:160px;background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:13.5px;padding:5px 0;}
.kb-tags input::placeholder{color:var(--text-mute);}
.kb-status-pill{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--surface3);color:var(--text);font-size:12.5px;font-weight:700;padding:5px 12px;border:none;border-radius:99px;cursor:pointer;transition:background .12s;}
.kb-status-pill:hover{background:var(--surface2);}
.kb-status-pill .ftclear{font-size:10px;font-weight:900;margin-left:2px;opacity:.6;transition:opacity .12s;display:inline-flex;}
.kb-status-pill .ftclear:hover{opacity:1;}
.kb-sugg{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:var(--surface2);border:1px solid var(--border2);border-radius:11px;padding:5px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:40;display:none;max-height:260px;overflow-y:auto;}
.kb-sugg-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);padding:6px 10px 4px;}
.kb-sugg-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;color:var(--text);font:inherit;font-size:13px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .12s;}
.kb-sugg-item:hover{background:var(--surface3);}
.kb-sugg-item i{color:var(--text-mute);font-size:14px;width:16px;}
[data-sugg-toggle]{cursor:pointer;}
.kb-sugg.open{display:block;}
.kb-sugg button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;cursor:pointer;color:var(--text);font-family:inherit;font-size:13px;font-weight:500;padding:9px 11px;border-radius:8px;text-align:left;}
.kb-sugg button:hover,.kb-sugg button.active{background:rgba(255,255,255,0.06);}
.kb-sugg .cat{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-mute);}
.kb-fgrid{display:grid;gap:14px;}
.kb-fgrid.c5{grid-template-columns:repeat(5,1fr);}
.kb-fgrid.c3{grid-template-columns:repeat(3,1fr);}
.kb-fgrid.c2{grid-template-columns:repeat(2,1fr);}
.kb-htable thead th{vertical-align:middle;}
.kb-htable thead th:empty{padding:0;}
.kb-htools{position:absolute;top:0;right:16px;height:43px;display:flex;align-items:center;gap:10px;white-space:nowrap;text-transform:none;letter-spacing:normal;font-weight:500;color:var(--text);z-index:3;}
.kb-srch{display:flex;align-items:center;height:34px;border-radius:9px;border:1px solid transparent;background:transparent;overflow:hidden;transition:background .15s,border-color .15s;}
.kb-srch.open{background:var(--surface);border-color:var(--border2);}
.kb-srch input{width:0;min-width:0;opacity:0;padding:0;border:none;outline:none;background:transparent;color:var(--text);font-family:inherit;font-size:13px;font-weight:500;text-transform:none;letter-spacing:normal;transition:width .22s ease,opacity .15s,padding .2s ease;}
.kb-srch input::placeholder{color:var(--text-mute);}
.kb-srch.open input{width:340px;padding:0 6px 0 12px;opacity:1;}
.kb-srch-ic{flex:none;width:33px;height:33px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:15px;}
.kb-srch-ic:hover,.kb-srch.open .kb-srch-ic{color:var(--text);}
.kb-fseg{display:inline-flex;background:var(--surface);border:1px solid var(--border2);border-radius:9px;padding:2px;flex:none;}
.kb-fseg button{border:none;background:transparent;color:var(--text-dim);font-family:inherit;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:normal;padding:6px 13px;border-radius:7px;cursor:pointer;transition:background .12s,color .12s;}
.kb-fseg button.on{background:var(--surface3);color:var(--text);}
.kb-fseg button:hover:not(.on){color:var(--text);}
.kb-act{display:flex;gap:4px;}
.kb-edit,.kb-del,.kb-view{font-family:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px;border:none;cursor:pointer;background:transparent;color:var(--text-dim);transition:background .12s,color .12s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.kb-edit:hover{background:var(--surface3);color:var(--text);}
.kb-view:hover{background:var(--info-bg);color:var(--info);}
.kb-del:hover{background:var(--bad-bg);color:var(--bad);}
/* ===== Brand cards (clickable card grid) ===== */
.kb-cardbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.kb-cardbar .kb-srch{flex:none;}
.kb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:14px;align-items:start;}
/* inline card editing */
.kb-card.editing{cursor:default;background:var(--surface2);}
.kb-cname-input{display:none;flex:1;min-width:0;background:var(--surface3);border:1px solid var(--border2);border-radius:8px;padding:6px 10px;color:var(--text);font-family:inherit;font-size:14px;font-weight:600;outline:none;}
.kb-cname-input:focus{box-shadow:0 0 0 2px var(--accent);}
.kb-card.editing .kb-cname{display:none;}
.kb-card.editing .kb-cname-input{display:block;}
.kb-card.editing .kb-cmeta{display:none;}
.kb-card-actions{display:none;align-items:center;justify-content:space-between;margin-top:11px;}
.kb-card.editing .kb-card-actions{display:flex;}
.kb-card-actions .kb-del{padding:5px 10px;}
.kb-edit-acts{display:inline-flex;align-items:center;gap:5px;}
.kb-iconbtn{width:28px;height:28px;border-radius:8px;border:none;background:var(--surface3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--text-dim);transition:background .12s,color .12s;}
.kb-iconbtn.kb-tick{color:var(--good);}
.kb-iconbtn.kb-tick:hover{background:var(--good-bg);}
.kb-iconbtn.kb-cross:hover{background:var(--bad-bg);color:var(--bad);}
.kb-card{display:flex;flex-direction:column;text-align:left;font-family:inherit;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:17px 18px 16px;cursor:pointer;transition:background .14s,transform .14s,box-shadow .14s;}
.kb-card:hover{background:var(--surface2);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.26);}
.kb-card:focus-visible{box-shadow:0 0 0 2px var(--accent);}
.kb-card-top{display:flex;align-items:center;gap:10px;}
.kb-cdot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-mute);}
.kb-cdot.on{background:var(--good);}
.kb-cstatus{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:6px;border-radius:50%;transition:background .12s;}
.kb-cstatus:hover{background:var(--surface3);}
.kb-cstatus .kb-cdot{width:9px;height:9px;}
.kb-cstatus.on .kb-cdot{background:var(--good);}
.kb-card-top .kb-logo{width:38px;height:38px;border-radius:11px;font-size:13px;}
.kb-cname{font-size:15.5px;font-weight:700;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kb-cmeta{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:12.5px;color:var(--text-dim);}
.kb-cmeta b{font-family:var(--mono);font-weight:800;color:var(--text);margin-right:2px;}
.kb-cmeta .sep{color:var(--text-mute);}
/* ===== Inset panel rows (Design B) ===== */
.kb-irows{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:10px;}
.kb-irow-head,.kb-irow{display:grid;grid-template-columns:44px 1.3fr 2fr .8fr 1fr auto;align-items:center;}
.kb-irow-head{padding:11px 16px;background:var(--surface2);border-radius:12px;margin-bottom:7px;}
.kb-irow-head span{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text-mute);}
.kb-irow-head .kb-iact-h{text-align:right;}
.kb-irow-body{display:flex;flex-direction:column;gap:7px;}
.kb-irow{background:transparent;border-radius:12px;padding:12px 16px;transition:background .12s;}
.kb-irow:hover{background:var(--surface3);}
.kb-irow>span{display:flex;align-items:center;gap:9px;min-width:0;font-size:13.5px;color:var(--text);}
.kb-inum{font-family:var(--mono);color:var(--text-dim);font-size:12.5px;}
.kb-istrong{font-weight:700;}
.kb-idesc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-size:12.5px;}
.kb-iact{justify-content:flex-end;gap:2px;}
.kb-logo{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;flex-shrink:0;}
.kb-brandcell{display:flex;align-items:center;gap:10px;font-weight:600;}
.kb-count{display:inline-block;background:var(--surface3);color:var(--text-dim);font-weight:700;font-size:12px;padding:2px 10px;border-radius:99px;}
.st-inactive{background:var(--surface3);color:var(--text-dim);}
.m-table.kb-clickable tbody tr{cursor:pointer;}

/* View-entry modal (bilingual columns + language tabs) */
.vw-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.vw-bdg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;}
.vw-bdg.acc{background:var(--warn-bg);color:var(--accent);}
.vw-bdg.info{background:var(--info-bg);color:var(--info);}
.vw-bdg.violet{background:var(--violet-bg);color:var(--violet);}
.vw-tabs{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px;margin-bottom:14px;}
.vw-tabs button{background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text-dim);padding:6px 15px;border-radius:999px;}
.vw-tabs button.on{background:var(--surface2);color:var(--text);}
.vw-pane{display:none;}
.vw-pane.on{display:block;}
.vw-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.vw-col{background:var(--surface2);border-radius:10px;padding:14px;}
.vw-lang{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-mute);margin-bottom:9px;}
.vw-q{font-size:13.5px;font-weight:700;line-height:1.45;}
.vw-a{font-size:12.5px;color:var(--text-dim);margin-top:9px;line-height:1.6;}
@media (max-width:560px){.vw-grid{grid-template-columns:1fr;}}
.kb-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.kb-form .full{grid-column:1 / -1;}
.kb-formfoot{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:24px;}
.kb-attach{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;}
.kb-fname{font-size:11.5px;color:var(--text-mute);}
.kb-ac{position:relative;}
.kb-ac .kb-sugg{left:0;right:0;min-width:0;}
/* Content-language switch — show one language at a time */
.kb-langbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.kb-langlbl{font-size:12px;font-weight:700;color:var(--text-dim);}
.kb-form[data-lang="ch"] .f-en{display:none;}
.kb-form[data-lang="en"] .f-ch{display:none;}
.kb-form[data-lang="ch"] .f-ch{grid-column:1 / -1;}
.kb-form[data-lang="en"] .f-en{grid-column:1 / -1;}
/* Drag-and-drop highlight on attach rows */
.kb-attach.dragover{outline:2px dashed var(--accent);outline-offset:4px;border-radius:8px;}
/* Layered-only field groups — flow into the form only when Layered is selected */
.lay-group{display:none;}
.kb-form.is-layered .lay-group{display:contents;}
/* Tag input (type a value → it becomes a removable pill) */
.kb-taginput{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:8px 10px;min-height:44px;cursor:text;}
.kb-taginput:focus-within{box-shadow:0 0 0 3px var(--warn-bg);}
.kb-taginput input{flex:1;min-width:120px;background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:13.5px;padding:4px 2px;}
.kb-taginput input::placeholder{color:var(--text-mute);}
.kb-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface3);color:var(--text);font-size:12.5px;font-weight:500;padding:5px 6px 5px 11px;border-radius:7px;}
.kb-chip button{background:transparent;border:none;color:var(--text-mute);cursor:pointer;font-size:10px;width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;}
.kb-chip button:hover{background:rgba(255,255,255,.1);color:var(--text);}
/* Option branching builder — accordion cards (design 4) */
.kb-opts{display:flex;flex-direction:column;gap:8px;}
.kb-acc{border:1px solid var(--border);border-radius:10px;background:var(--surface2);}
.kb-acc-head{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px 10px 0 0;}
.kb-acc:not(.open) .kb-acc-head{border-radius:10px;}
.kb-acc-head .opt-num{font-size:12px;font-weight:700;color:var(--text-mute);width:16px;text-align:center;flex-shrink:0;}
.kb-acc-head .m-input{flex:1;min-width:120px;padding:7px 11px;}
.kb-acc-x{width:28px;height:28px;border-radius:7px;border:none;background:transparent;color:var(--text-mute);cursor:pointer;font-size:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;}
.kb-acc:hover .kb-acc-x{opacity:1;}
.kb-acc-x:hover{background:var(--bad-bg);color:var(--bad);}
.kb-acc-chev{width:28px;height:28px;border-radius:7px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.kb-acc-chev i{transition:transform .18s;}
.kb-acc.open .kb-acc-chev i{transform:rotate(180deg);}
.kb-acc-body{display:none;padding:12px;border-top:1px solid var(--border);background:var(--surface);border-radius:0 0 10px 10px;}
.kb-acc.open .kb-acc-body{display:block;}
/* Link-existing combobox (type to filter or click to select) */
.kb-combo{position:relative;}
.kb-combo .kb-combo-input{width:100%;padding-right:32px;}
.kb-combo-chev{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--text-mute);font-size:12px;pointer-events:none;}
.kb-combo-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface3);border:1px solid var(--border2);border-radius:10px;padding:5px;box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:30;display:none;max-height:220px;overflow-y:auto;}
.kb-combo.open .kb-combo-menu{display:block;}
.kb-combo-menu button{display:block;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;color:var(--text);font-family:inherit;font-size:13px;padding:8px 10px;border-radius:7px;}
.kb-combo-menu button:hover{background:rgba(255,255,255,.06);}
.kb-combo-menu button[hidden]{display:none;}

/* ───── Conversation flow — pro node editor (pan/zoom + minimap, curved links) ───── */
.flow-hint{font-size:12px;color:var(--text-mute);margin-bottom:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.flow-hint span{display:inline-flex;align-items:center;gap:6px;}
.flow-hint .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);}

.flow-vp{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--bg);overflow:hidden;height:calc(100vh - 300px);min-height:480px;cursor:grab;user-select:none;}
.flow-vp.panning{cursor:grabbing;}
.flow-world{position:absolute;top:0;left:0;width:2600px;height:1700px;transform-origin:0 0;
  background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:26px 26px;}
.flow-svg{position:absolute;top:0;left:0;width:2600px;height:1700px;pointer-events:none;overflow:visible;}

.flow-node{position:absolute;width:232px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.45);z-index:2;}
.flow-node.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 12px 28px rgba(0,0,0,.5);z-index:5;}
.flow-node.drop-ok{border-color:var(--accent);}
.flow-port-in{position:absolute;left:-7px;top:18px;width:14px;height:14px;border-radius:50%;background:var(--surface3);border:2px solid var(--border2);z-index:3;transition:background .12s,border-color .12s,box-shadow .12s;}
.flow-node.drop-ok .flow-port-in{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--warn-bg);}
.flow-node-head{display:flex;align-items:center;gap:8px;padding:10px 11px 8px;cursor:grab;}
.flow-node-head:active{cursor:grabbing;}
.flow-node-type{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:99px;}
.flow-node-type.type-q{background:var(--info-bg);color:var(--info);}
.flow-node-type.type-end{background:var(--warn-bg);color:var(--accent);}
.flow-node-del{margin-left:auto;width:22px;height:22px;border-radius:6px;border:none;background:transparent;color:var(--text-mute);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;}
.flow-node-del:hover{background:var(--bad-bg);color:var(--bad);}
.flow-node-title{font-size:12.5px;font-weight:700;line-height:1.35;padding:0 12px 9px;}
.flow-node-title[contenteditable]:focus{outline:none;}
.flow-opts{padding:0 12px 12px;display:flex;flex-direction:column;gap:6px;}
.flow-opt{position:relative;display:flex;align-items:center;font-size:11.5px;color:var(--text-dim);background:var(--surface2);border-radius:7px;padding:6px 22px 6px 10px;}
.flow-opt span[contenteditable]:focus{outline:none;}
.flow-port-out{position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:crosshair;z-index:4;transition:filter .12s,transform .12s;}
.flow-port-out:hover,.flow-port-out.live{filter:brightness(1.15);transform:translateY(-50%) scale(1.2);}
.flow-end-ans{font-size:11.5px;color:var(--text-dim);background:var(--surface2);border-radius:7px;padding:8px 10px;line-height:1.45;}

.flow-tool{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;z-index:20;}
.flow-tbtn{width:30px;height:30px;border-radius:8px;background:var(--surface);border:1px solid var(--border2);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;}
.flow-tbtn:hover{color:var(--text);border-color:var(--text-mute);background:var(--surface2);}
.flow-zoom{height:30px;min-width:60px;padding:0 10px;border-radius:8px;background:var(--surface);border:1px solid var(--border2);color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;font-family:'JetBrains Mono',monospace;cursor:pointer;}
.flow-zoom:hover{color:var(--text);}
.flow-tdiv{width:1px;height:20px;background:var(--border2);margin:0 2px;}

.flow-mini{position:absolute;right:12px;bottom:12px;width:190px;height:126px;border:1px solid var(--border2);border-radius:10px;background:rgba(12,13,15,.82);overflow:hidden;z-index:20;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,.45);}
.flow-mini canvas{display:block;width:100%;height:100%;}
.flow-mini-lbl{position:absolute;top:6px;left:8px;font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-mute);pointer-events:none;}

.flow-cue{position:absolute;left:12px;bottom:12px;z-index:20;font-size:10.5px;color:var(--text-mute);background:rgba(12,13,15,.8);border:1px solid var(--border);border-radius:8px;padding:5px 10px;display:flex;gap:12px;}
.flow-cue b{color:var(--text-dim);font-weight:600;}
.kb-acc-pane{margin-top:12px;}
.kb-acc-pane .m-field{margin-bottom:10px;}
.kb-acc-pane .m-field:last-child{margin-bottom:0;}
.kb-acc-pane .m-select{width:100%;}
.kb-addopt{align-self:flex-start;margin-top:10px;background:transparent;border:none;color:var(--accent);font-family:inherit;font-size:12.5px;font-weight:700;padding:4px 2px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.kb-addopt:hover{filter:brightness(1.1);text-decoration:underline;}
.kb-layered{display:none;margin-top:22px;border:1px solid var(--border);border-radius:12px;padding:20px;background:rgba(255,255,255,0.02);}
.kb-layered.show{display:block;}
.kb-layered h3{font-size:15px;font-weight:800;letter-spacing:-0.2px;margin:0 0 16px;}

/* Clean tick / checkbox */
.kb-tick{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:var(--text-dim);user-select:none;padding:9px 0;}
.kb-tick input{position:absolute;opacity:0;width:0;height:0;}
.kb-tick .box{width:20px;height:20px;border-radius:6px;background:var(--surface3);box-shadow:inset 0 0 0 1.5px var(--border2);display:flex;align-items:center;justify-content:center;color:transparent;font-size:12px;transition:background .12s,box-shadow .12s,color .12s;flex-shrink:0;}
.kb-tick:hover .box{box-shadow:inset 0 0 0 1.5px var(--text-dim);}
.kb-tick input:checked + .box{background:var(--accent);box-shadow:none;color:#0A0B0D;}
.kb-tick input:checked ~ span{color:var(--text);}

/* File upload (drag/drop) + or-URL */
.kb-upload{
  border:1.5px dashed var(--border2);border-radius:11px;background:var(--surface2);
  padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;transition:background .12s,border-color .12s;
}
.kb-upload:hover{background:var(--surface3);}
.kb-upload .ico{width:44px;height:44px;border-radius:11px;background:var(--warn-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;}
.kb-upload .t{font-size:13.5px;font-weight:700;}
.kb-upload .s{font-size:12px;color:var(--text-dim);}
.kb-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--text-mute);font-size:11px;font-weight:700;letter-spacing:1px;}
.kb-or::before,.kb-or::after{content:'';flex:1;height:1px;background:var(--border);}

/* Service Type pills — hover + press feedback */
#servicePills .m-chip{transition:background .14s,color .14s,box-shadow .14s,transform .1s;}
#servicePills .m-chip:hover{background:var(--warn-bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
#servicePills .m-chip.on{background:var(--accent);color:#0A0B0D;box-shadow:none;}
#servicePills .m-chip.on:hover{background:var(--accent);color:#0A0B0D;filter:brightness(1.06);}
#servicePills .m-chip:active{transform:scale(0.96);}

/* Segmented control (e.g. QA / Layered) — recessed track, raised active pill */
.kb-seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px;flex-wrap:wrap;}
.kb-seg button{background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-dim);padding:7px 16px;border-radius:999px;transition:background .14s,color .14s;}
.kb-seg button:hover{color:var(--text);}
.kb-seg button.on{background:var(--surface2);color:var(--text);}
.kb-seg.kb-seg-sm{padding:3px;}
.kb-seg.kb-seg-sm button{padding:4px 11px;font-size:11.5px;}
.m-select:disabled,.m-input:disabled{opacity:0.5;cursor:not-allowed;}

/* Search-box field (icon + input + clear) used in KB filters */
.m-search-field{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:0 12px;transition:box-shadow .12s;}
.m-search-field:focus-within{box-shadow:0 0 0 3px var(--warn-bg);}
.m-search-field .ic{color:var(--text-mute);font-size:14px;flex-shrink:0;}
.m-search-field:focus-within .ic{color:var(--accent);}
.m-search-field input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:13.5px;padding:11px 0;min-width:0;}
.m-search-field input::placeholder{color:var(--text-mute);}
.m-search-field .clr{background:transparent;border:none;cursor:pointer;color:var(--text-mute);font-size:11px;width:22px;height:22px;border-radius:11px;display:none;align-items:center;justify-content:center;flex-shrink:0;}
.m-search-field .clr:hover{background:var(--surface3);color:var(--text);}
.m-search-field.has-val .clr{display:flex;}
@media (max-width:1000px){.kb-fgrid.c5,.kb-fgrid.c3{grid-template-columns:1fr 1fr;}}
@media (max-width:760px){.kb-form{grid-template-columns:1fr;}}
@media (max-width:560px){.kb-fgrid{grid-template-columns:1fr !important;}}

/* ───── Upload dropzone ───── */
.m-dropzone{
  border:1.5px dashed var(--border2);border-radius:14px;
  background:var(--surface);padding:38px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px;
  transition:background .12s,border-color .12s;cursor:pointer;
}
.m-dropzone:hover{background:var(--surface2);}
.m-dz-ico{width:54px;height:54px;border-radius:14px;background:var(--warn-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:24px;}
.m-dz-title{font-size:15px;font-weight:700;}
.m-dz-sub{font-size:12.5px;color:var(--text-dim);max-width:420px;line-height:1.5;}
.m-dz-formats{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
.m-fmt{font-size:10.5px;font-weight:700;font-family:var(--mono);padding:2px 8px;border-radius:6px;background:var(--surface3);color:var(--text-dim);}

/* ───── File / doc icon ───── */
.m-fileico{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;background:var(--surface3);color:var(--text-dim);
}
.m-fileico.pdf{background:var(--bad-bg);color:var(--bad);}
.m-fileico.doc{background:var(--info-bg);color:var(--info);}
.m-fileico.txt{background:var(--surface3);color:var(--text-dim);}
.m-fileico.csv{background:var(--good-bg);color:var(--good);}
.m-fileico.url{background:var(--violet-bg);color:var(--violet);}

/* ───── Progress bar ───── */
.m-bar{height:6px;border-radius:3px;background:var(--surface3);overflow:hidden;width:120px;}
.m-bar > span{display:block;height:100%;background:var(--accent);border-radius:3px;}

/* ───── Toggle switch ───── */
.m-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;}
.m-switch input{opacity:0;width:0;height:0;}
.m-switch .sl{position:absolute;inset:0;cursor:pointer;background:var(--surface3);border-radius:99px;transition:background .18s;}
.m-switch .sl::before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .18s;}
.m-switch input:checked + .sl{background:var(--accent);}
.m-switch input:checked + .sl::before{transform:translateX(18px);}

/* ───── Q&A + keyword list ───── */
.m-qa{padding:14px 0;border-bottom:1px solid var(--border);}
.m-qa:last-child{border-bottom:none;}
.m-qa-q{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:600;}
.m-qa-q i{color:var(--accent);font-size:15px;margin-top:1px;flex-shrink:0;}
.m-qa-a{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-dim);margin-top:8px;line-height:1.5;}
.m-qa-a i{color:var(--good);font-size:15px;margin-top:1px;flex-shrink:0;}
.m-qa-foot{display:flex;align-items:center;gap:8px;margin-top:10px;}

.m-kw{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--warn-bg);color:var(--accent);}
.m-kw-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);}
.m-kw-row:last-child{border-bottom:none;}
.m-kw-set{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:0;}
.m-kw-action{font-size:12.5px;color:var(--text-dim);display:flex;align-items:center;gap:6px;white-space:nowrap;}
.m-kw-action i{color:var(--text-mute);}

/* ───── Permission matrix ───── */
.m-matrix th.col{text-align:center;}
.m-matrix td.cell{text-align:center;}
.m-matrix .yes{color:var(--good);}
.m-matrix .no{color:var(--text-mute);opacity:.4;}
.m-matrix .perm-name{font-weight:600;}

/* ───── Modal ───── */
.m-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;}
.m-modal.open{display:flex;}
.m-backdrop{position:absolute;inset:0;background:rgba(8,9,11,0.62);}
.m-modal-card{
  position:relative;z-index:1;width:100%;max-width:520px;max-height:88vh;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border2);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.m-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px;flex:none;}
.m-close{margin:-2px -4px 0 0;}
.m-modal-title{font-size:17px;font-weight:800;letter-spacing:-0.3px;}
.m-modal-sub{font-size:12.5px;color:var(--text-dim);margin-top:4px;}
.m-modal-body{padding:8px 22px 6px;display:flex;flex-direction:column;gap:14px;flex:1;overflow-y:auto;min-height:0;}
.m-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 22px 22px;flex:none;}
.m-close{width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--text-mute);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.m-close:hover{background:var(--surface3);color:var(--text);}

/* ───── Form fields ───── */
.m-field{display:flex;flex-direction:column;gap:6px;}
.m-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);}
.m-input,.m-select,.m-textarea{
  background:var(--surface2);border:1px solid var(--border);border-radius:9px;
  padding:10px 12px;color:var(--text);font-family:inherit;font-size:13.5px;outline:none;
  transition:background .12s;width:100%;
}
.m-input:focus,.m-select:focus,.m-textarea:focus{background:var(--surface3);}
.m-textarea{resize:vertical;min-height:80px;line-height:1.5;}
.m-input::placeholder,.m-textarea::placeholder{color:var(--text-mute);}
.m-check-list{display:flex;flex-direction:column;gap:8px;}
.m-check{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:var(--surface2);cursor:pointer;}
.m-check input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;}
.m-check-meta{flex:1;}
.m-check-t{font-size:13px;font-weight:600;}
.m-check-s{font-size:11px;color:var(--text-mute);margin-top:1px;}

/* ───── Settings page ───── */
.m-profile.active .m-profile-name{color:var(--text);}
.m-profile.active .m-av{filter:none;}
.m-acct{display:flex;align-items:center;gap:16px;padding:0 0 20px;background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;margin:2px 0 20px;flex-wrap:wrap;}
.m-acct .m-av{width:58px;height:58px;font-size:19px;}
.m-acct-meta{flex:1;min-width:0;}
.m-acct-name{font-size:18px;font-weight:800;letter-spacing:-0.3px;}
.m-acct-mail{font-size:13px;color:var(--text-dim);margin-top:3px;}
.m-acct-role{margin-top:8px;}
.m-acct-role .m-badge{background:transparent;padding:0;}
.m-acct .m-btn{align-self:flex-start;}
.m-set-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.m-set-card{display:flex;align-items:center;gap:14px;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:background .12s;cursor:pointer;}
.m-set-card:hover{background:var(--surface2);}
.m-set-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--surface3);color:var(--text-dim);}
.m-set-ico.acc{background:var(--warn-bg);color:var(--accent);}
.m-set-ico.good{background:var(--good-bg);color:var(--good);}
.m-set-ico.info{background:var(--info-bg);color:var(--info);}
.m-set-ico.violet{background:var(--violet-bg);color:var(--violet);}
.m-set-ico.bad{background:var(--bad-bg);color:var(--bad);}
.m-set-meta{flex:1;min-width:0;}
.m-set-t{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px;}
.m-set-s{font-size:12px;color:var(--text-dim);margin-top:3px;line-height:1.4;}
.m-set-card .m-arrow{color:var(--text-mute);font-size:14px;flex-shrink:0;}
@media (max-width:980px){.m-set-grid{grid-template-columns:1fr;}}

/* ───── Settings sub-menu (second vertical menu) ───── */
.m-subnav{
  width:244px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:20px 12px 16px;gap:2px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.m-subnav-head{font-size:19px;font-weight:800;letter-spacing:-0.4px;padding:4px 10px 14px;}
.m-subnav-label{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-mute);padding:12px 10px 6px;}
.m-subnav-item{
  display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:9px;
  color:var(--text-dim);font-size:13.5px;font-weight:500;cursor:pointer;
  border:none;background:transparent;width:100%;text-align:left;font-family:inherit;
  transition:background .12s,color .12s;
}
.m-subnav-item i{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.m-subnav-item:hover{background:rgba(255,255,255,0.035);color:var(--text);}
.m-subnav-item.on{background:transparent;color:var(--text);font-weight:700;box-shadow:none;}
.m-subnav-item.on i{color:var(--accent);}
.m-subnav-item .m-count{margin-left:auto;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--surface3);color:var(--text-dim);}
.m-subnav-item.danger{color:var(--bad);}
.m-subnav-item.danger i{color:var(--bad);}
.m-subnav-item.danger:hover{background:var(--bad-bg);color:var(--bad);}
.m-subnav-sep{height:1px;background:var(--border);margin:8px 10px;}

/* Clickable profile photo (camera badge overlay) */
.m-photo{position:relative;border:none;background:transparent;padding:0;cursor:pointer;flex-shrink:0;border-radius:50%;}
.m-photo .m-av{width:58px;height:58px;font-size:19px;transition:filter .12s;}
.m-photo .cam{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#0A0B0D;display:flex;align-items:center;justify-content:center;font-size:11px;border:2px solid var(--surface);}
.m-photo:hover .m-av{filter:brightness(.82);}

/* settings panes */
.m-pane{display:none;}
.m-pane.on{display:block;}
.m-pane-title{font-size:21px;font-weight:800;letter-spacing:-0.4px;}
.m-pane-sub{font-size:13px;color:var(--text-dim);margin:6px 0 22px;line-height:1.5;max-width:640px;}
.m-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;}
.m-form .full{grid-column:1 / -1;}
.m-srow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--border);}
.m-srow:last-child{border-bottom:none;}
.m-srow-meta{min-width:0;}
.m-srow-t{font-size:13.5px;font-weight:600;}
.m-srow-s{font-size:12px;color:var(--text-dim);margin-top:3px;line-height:1.4;}
@media (max-width:560px){ .m-srow{flex-wrap:wrap;gap:10px 16px;} .m-srow > .m-btn, .m-srow > .m-pill, .m-srow > .m-switch{margin-left:auto;} }
.m-plan{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);margin-bottom:16px;flex-wrap:wrap;}
.m-plan-name{font-size:16px;font-weight:800;}
.m-plan-price{font-size:13px;color:var(--text-dim);margin-top:3px;}

@media (max-width:760px){
  .m-app{flex-direction:column;}
  .m-subnav{width:auto;height:auto;position:relative;flex-direction:row;flex-wrap:wrap;gap:6px;border-right:none;border-bottom:1px solid var(--border);padding:10px 12px;}
  .m-subnav-head,.m-subnav-label,.m-subnav-foot{display:none;}
  .m-subnav-item{box-shadow:none !important;width:auto;background:var(--surface2);}
  .m-subnav-item.on{background:var(--surface3);}
  .m-subnav-item .m-count{margin-left:6px;}
  .m-form{grid-template-columns:1fr;}
}

/* ───── Activity log ───── */
.m-log{display:flex;flex-direction:column;}
.m-log-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.m-log-item:last-child{border-bottom:none;}
.m-log-ico{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--surface3);color:var(--text-dim);}
.m-log-text{font-size:13px;line-height:1.45;}
.m-log-text b{font-weight:700;}
.m-log-time{font-size:11px;color:var(--text-mute);margin-top:3px;}

/* ───── Misc ───── */
.m-empty-note{font-size:12px;color:var(--text-mute);text-align:center;padding:20px;}
.m-section-gap{margin-top:24px;}

/* ───── Delete confirmation note ───── */
.m-del-note{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--text);line-height:1.5;background:var(--bad-bg);border:1px solid rgba(239,68,68,.2);border-radius:10px;padding:12px 13px;}
.m-del-note i{color:var(--bad);font-size:15px;margin-top:1px;flex-shrink:0;}
.m-del-note b{font-weight:800;}

/* ───── Locked (display-only) permission list ───── */
.m-label-hint{font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-mute);font-size:11px;}
.m-check-list--locked .m-check{pointer-events:none;}
.m-check-list--locked .m-check input{cursor:default;}
/* Granted permissions keep the tick + bright text; denied ones drop the box and grey out */
.m-check-list--locked .m-check:has(input:not(:checked)){background:transparent;}
.m-check-list--locked .m-check input:not(:checked){display:none;}
.m-check-list--locked .m-check input:not(:checked) + .m-check-meta{margin-left:26px;}
.m-check-list--locked .m-check input:not(:checked) + .m-check-meta .m-check-t{color:var(--text-mute);font-weight:500;}

/* ───── Status pills ───── */
.m-pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.2px;background:var(--surface3);color:var(--text-dim);white-space:nowrap;}
.m-pill.gold{background:var(--accent);color:#0A0B0D;}
.m-pill.green{background:var(--good-bg);color:var(--good);}

/* ───── Billing cards (Payment method + Payment record) ───── */
.m-billing-card{border:1px solid var(--border);border-radius:12px;background:var(--surface2);padding:16px 18px;}
.m-billing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.m-billing-title{font-size:14px;font-weight:700;}
.m-billing-sub{font-size:12px;color:var(--text-dim);margin-top:4px;line-height:1.4;}

.m-pay-cards{display:flex;flex-direction:column;gap:8px;}
.m-pay-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
.m-pay-ico{width:40px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--surface3);color:var(--text-dim);font-size:16px;flex-shrink:0;}
.m-pay-row.primary .m-pay-ico{background:var(--good-bg);color:var(--good);}
.m-pay-main{flex:1;min-width:0;}
.m-pay-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.m-pay-brand{font-size:13.5px;font-weight:700;}
.m-pay-num{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);}
.m-pay-meta{font-size:11.5px;color:var(--text-mute);margin-top:3px;}
.m-pay-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
.m-pay-add{display:inline-flex;align-items:center;gap:7px;padding:11px 12px;border:1px dashed var(--border2);border-radius:10px;background:transparent;color:var(--text-dim);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,color .12s;}
.m-pay-add:hover{background:var(--surface3);color:var(--text);}
.m-pay-form{display:flex;flex-direction:column;gap:12px;border:1px solid var(--border2);border-radius:11px;padding:14px;background:var(--surface);margin-top:2px;}
.m-pay-form[hidden]{display:none;}
.m-pay-form-foot{display:flex;justify-content:flex-end;gap:8px;}

/* Knowledge: Add-menu dropdown + import toast */
.kb-add-wrap{position:relative;display:inline-block;}
.kb-add-caret{font-size:11px;margin-left:2px;}
.kb-add-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:240px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:2px;}
.kb-add-menu[hidden]{display:none;}
.kb-add-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:none;border-radius:9px;background:transparent;color:var(--text);font-family:inherit;text-align:left;cursor:pointer;width:100%;}
.kb-add-item:hover{background:var(--surface2);}
.kb-add-item > i{font-size:16px;color:var(--accent);margin-top:1px;flex-shrink:0;}
.kb-add-t{display:block;font-size:13px;font-weight:600;}
.kb-add-s{display:block;font-size:11.5px;color:var(--text-dim);margin-top:1px;}
.kb-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(12px);z-index:200;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border2);border-radius:11px;padding:11px 15px;font-size:13px;font-weight:600;color:var(--text);box-shadow:0 12px 32px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;}
.kb-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.kb-toast i{color:var(--good);font-size:16px;}

.m-pay-list{display:flex;flex-direction:column;}
.m-pay-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.m-pay-item:last-child{border-bottom:none;}
.m-pay-item-main{flex:1;min-width:0;}
.m-pay-item-desc{font-size:13px;font-weight:600;}
.m-pay-item-meta{font-size:11.5px;color:var(--text-mute);margin-top:2px;font-family:var(--mono);}
.m-pay-item-amt{font-family:var(--mono);font-size:13px;font-weight:700;white-space:nowrap;}

/* ───── Plan chooser (upgrade modal — side-by-side columns, stacks on mobile) ───── */
.m-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.m-plan-opt{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface2);display:flex;flex-direction:column;gap:10px;}
.m-plan-opt.current{background:var(--surface);border-color:var(--border2);}
.m-plan-opt.rec{border:1.5px solid var(--accent);}
.m-plan-opt-name{font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.m-plan-opt-price{font-size:20px;font-weight:800;letter-spacing:-.4px;}
.m-plan-opt-price span{font-size:11px;font-weight:600;color:var(--text-dim);}
.m-plan-opt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--text-dim);flex:1;}
.m-plan-opt li{display:flex;gap:6px;align-items:flex-start;line-height:1.35;}
.m-plan-opt li i{color:var(--good);font-size:11px;margin-top:2px;flex-shrink:0;}
.m-plan-opt .m-btn{width:100%;justify-content:center;}
.m-plan-opt .m-btn[disabled]{opacity:.5;cursor:default;}
.m-pill.mute{background:var(--surface3);color:var(--text-dim);}
#upgradeModal .m-modal-body{padding-bottom:30px;}
@media (max-width:620px){ .m-plan-grid{grid-template-columns:1fr;} }

@media (max-width:620px){
  .m-pay-row{flex-wrap:wrap;}
  .m-pay-actions{width:100%;justify-content:flex-start;}
  .m-pay-item{flex-wrap:wrap;}
  .m-pay-item-amt{margin-left:auto;}
  /* Plan summary: stack name/price over full-width actions (no squeezed text column) */
  .m-plan{flex-direction:column;align-items:stretch;gap:12px;}
  .m-plan .m-kpi-ico{display:none;}
  .m-plan .m-btn{width:100%;}
}
.m-nav-toggle{display:none;}

/* ───── Responsive ───── */
@media (max-width:980px){
  .m-kpis{grid-template-columns:1fr 1fr;}
  .m-kpis.cols-3{grid-template-columns:1fr 1fr;}
  .m-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .m-side{position:fixed;left:0;top:0;z-index:120;transform:translateX(-100%);transition:transform .22s;}
  .m-app.nav-open .m-side{transform:translateX(0);}
  .m-app.nav-open .m-nav-backdrop{display:block;}
  .m-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:110;}
  .m-content{padding:18px 16px 40px;}
  .m-nav-toggle{display:inline-flex;}
  .m-kpis{grid-template-columns:1fr 1fr;}
  .m-kpis.cols-3{grid-template-columns:1fr 1fr;}
  /* topbar action buttons wrap instead of forcing the page wide */
  .m-topbar-actions{flex-wrap:wrap;flex-shrink:1;width:100%;}

  /* page-nav tabs wrap into pills instead of scrolling sideways */
  .m-tabs{flex-wrap:wrap;overflow:visible;border-bottom:none;gap:4px;margin-bottom:18px;}
  .m-tabs .m-tab{flex:0 0 auto;border-bottom:none;margin-bottom:0;border-radius:8px;padding:7px 12px;color:var(--text-dim);}
  .m-tabs .m-tab.on{background:var(--surface3);color:var(--text);border-bottom:none;}

  /* data tables collapse into stacked, labeled cards (no horizontal scroll) */
  .m-table-wrap{overflow:visible;}
  .m-table{min-width:0;}
  .m-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}
  .m-table tbody tr{display:block;padding:12px 15px;border-bottom:1px solid var(--border);}
  .m-table tbody tr:last-child{border-bottom:none;}
  .m-table tbody td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 0;border:none;text-align:right;font-size:13px;}
  .m-table tbody td::before{content:attr(data-label);flex:0 0 auto;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-mute);}
  .m-table tbody td:first-child{padding:0 0 8px;}
  .m-table tbody td:first-child::before{display:none;}
  .m-table tbody td[data-label="Actions"]{justify-content:flex-end;padding-top:8px;}
  .m-table tbody td[data-label="Actions"]::before{display:none;}
  .m-table tbody td .m-actions{justify-content:flex-end;}

  /* category rows collapse into stacked, labeled cards */
  .kb-irows{padding:0;background:none;border:none;}
  .kb-irow-head{display:none;}
  .kb-irow-body{gap:10px;}
  .kb-irow{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 15px;min-width:0;}
  .kb-irow>span{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:4px 0;}
  .kb-irow>span::before{content:attr(data-label);flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-mute);}
  .kb-irow .kb-istrong{font-size:15px;}
  .kb-irow .kb-idesc{white-space:normal;text-align:right;}
  .kb-irow .kb-iact{justify-content:flex-end;}
}