:root {
  --ink:#16231f; --muted:#68766f; --paper:#f5f7f4; --surface:#fff;
  --green:#176b55; --green-dark:#103f33; --green-soft:#e5f2ed;
  --amber:#b7791f; --amber-soft:#fff4d9; --red:#b34343; --red-soft:#fbeaea;
  --line:#dfe7e2; --shadow:0 12px 34px rgba(19,55,45,.08); --radius:18px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { min-height:100%; background:var(--paper); }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:Tahoma,"Segoe UI",Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(23,107,85,.22); outline-offset:2px; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); padding:.78rem .85rem; transition:.15s ease; }
input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,85,.08); }
textarea { resize:vertical; line-height:1.7; }
label { display:grid; gap:.45rem; margin:.85rem 0; color:#33443e; font-size:.88rem; font-weight:700; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:.35rem; font-size:clamp(1.7rem,2.4vw,2.35rem); }
h2 { margin-bottom:.8rem; font-size:1.15rem; }
h3 { margin-bottom:.45rem; }
.muted { color:var(--muted); }
.eyebrow { margin-bottom:.35rem; color:var(--green); font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.mono { direction:ltr; text-align:right; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; }
.primary,.secondary,.danger,.text-button,.icon-button { border:0; border-radius:11px; padding:.72rem 1rem; font-weight:800; transition:.15s ease; }
.primary { color:#fff; background:var(--green); box-shadow:0 6px 16px rgba(23,107,85,.18); }
.primary:hover { background:#125b48; transform:translateY(-1px); }
.secondary { color:var(--green); background:var(--green-soft); }
.danger { color:var(--red); background:var(--red-soft); }
.text-button { color:var(--green); background:transparent; }
.icon-button { width:40px; height:40px; display:grid; place-items:center; padding:0; color:var(--muted); background:#f2f5f3; font-size:1.15rem; }
.wide { width:100%; }
.actions,.filter-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.count,.hint { color:var(--muted); font-size:.8rem; }
.status { display:inline-flex; align-items:center; gap:.5rem; width:max-content; border-radius:999px; padding:.5rem .75rem; font-size:.8rem; font-weight:800; }
.status i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.status.good { color:var(--green); background:var(--green-soft); }
.status.warn { color:var(--amber); background:var(--amber-soft); }
.status.bad { color:var(--red); background:var(--red-soft); }
.status.neutral { color:#66736d; background:#edf1ef; }
.notice { position:sticky; top:1rem; z-index:30; margin-bottom:1rem; border:1px solid #cce2d9; border-radius:12px; padding:.9rem 1rem; color:var(--green-dark); background:#f0f8f5; box-shadow:var(--shadow); }
.notice.error { color:var(--red); border-color:#f0caca; background:var(--red-soft); }

.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.05fr) minmax(380px,.95fr); background:#eef3ef; }
.login-intro { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,7vw,8rem); color:#fff; background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.12),transparent 25%),linear-gradient(145deg,#0c352b,#176b55); }
.login-intro h1 { max-width:650px; margin:.6rem 0 1rem; font-size:clamp(2.5rem,4.7vw,5rem); line-height:1.25; }
.login-intro p { max-width:600px; color:#d5e6df; font-size:1.08rem; line-height:1.8; }
.login-intro .eyebrow { color:#9ed3c0; }
.intro-mark,.brand-fallback { display:grid; place-items:center; flex:0 0 auto; color:#fff; background:linear-gradient(145deg,#1c8367,#125642); font-weight:900; }
.intro-mark { width:76px; height:76px; border:1px solid rgba(255,255,255,.18); border-radius:24px; font-size:2.2rem; box-shadow:0 20px 50px rgba(0,0,0,.16); }
.intro-flow { display:flex; align-items:center; gap:.75rem; margin-top:2rem; flex-wrap:wrap; }
.intro-flow span { border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.65rem .9rem; background:rgba(255,255,255,.08); }
.login-card { width:min(430px,calc(100vw - 2rem)); align-self:center; justify-self:center; padding:2.4rem; border:1px solid rgba(255,255,255,.8); border-radius:24px; background:rgba(255,255,255,.94); box-shadow:0 28px 70px rgba(25,52,43,.13); }
.login-card h2 { margin-bottom:.4rem; font-size:1.7rem; }
.mobile-brand { display:none; align-items:center; gap:.7rem; margin-bottom:2rem; }
.brand-fallback { width:46px; height:46px; border-radius:14px; font-size:1.35rem; }
.login-help { display:block; margin-top:1.2rem; color:#87938e; text-align:center; }
.form-message { margin:.9rem 0 0; border-radius:10px; padding:.75rem; font-size:.85rem; }
.form-message.error { color:var(--red); background:var(--red-soft); }

.app { min-height:100vh; display:grid; grid-template-columns:268px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:1.2rem; color:#fff; background:linear-gradient(180deg,#113f34,#0d3028); }
.brand { display:flex; align-items:center; gap:.75rem; min-height:58px; padding:.25rem .3rem; margin-bottom:1.5rem; }
.brand-logo { width:46px; height:46px; border-radius:14px; object-fit:cover; background:#fff; }
.brand strong,.brand small { display:block; }
.brand small { max-width:150px; margin-top:.2rem; overflow:hidden; color:#a9c4ba; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.sidebar nav { display:grid; gap:.35rem; }
.sidebar nav button { position:relative; display:grid; grid-template-columns:28px 1fr; align-items:center; gap:.6rem; border:0; border-radius:12px; padding:.78rem .8rem; color:#bfd2ca; background:transparent; text-align:right; }
.sidebar nav button span { font-size:1rem; text-align:center; }
.sidebar nav button b { font-size:.88rem; }
.sidebar nav button:hover,.sidebar nav button.active { color:#fff; background:rgba(255,255,255,.1); }
.sidebar nav button i { position:absolute; left:.7rem; width:8px; height:8px; border-radius:50%; background:#f3c263; }
.sidebar-foot { display:flex; align-items:center; gap:.55rem; margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,.1); }
.sidebar-foot .icon-button { color:#d5e4de; background:rgba(255,255,255,.08); }
.user-chip { min-width:0; display:flex; align-items:center; flex:1; gap:.6rem; }
.user-chip>span { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:var(--green-dark); background:#dfeee8; font-weight:900; }
.user-chip strong,.user-chip small { display:block; max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip small { margin-top:.15rem; color:#9ebbb0; font-size:.7rem; }
.workspace { min-width:0; padding:2rem clamp(1rem,3vw,3rem) 4rem; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; }
.topbar .muted { margin-bottom:0; }
.topbar-actions { display:flex; align-items:center; gap:.6rem; }
.mobile-only { display:none; }
.view { animation:fade-in .18s ease-out; }
@keyframes fade-in { from { opacity:.35; transform:translateY(5px); } }
.panel { min-width:0; padding:1.35rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.panel-head h2 { margin-bottom:0; }
.metrics { display:grid; grid-template-columns:repeat(5,minmax(140px,1fr)); gap:.8rem; margin-bottom:.9rem; }
.metric { min-height:118px; display:flex; flex-direction:column; justify-content:space-between; padding:1.1rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.metric strong { font-size:1.9rem; }
.metric span { color:var(--muted); font-size:.82rem; }
.dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.span-2 { grid-column:span 2; }
.span-3 { grid-column:span 3; }
.service-health { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.service-card { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.9rem; border-radius:13px; background:#f7faf8; }
.service-card strong,.service-card small { display:block; }
.service-card small { margin-top:.2rem; color:var(--muted); }
.check-list { display:grid; gap:.65rem; }
.check-item { display:flex; align-items:flex-start; gap:.55rem; font-size:.84rem; line-height:1.55; }
.check-item i { width:20px; height:20px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; font-style:normal; }
.check-item.good i { color:var(--green); background:var(--green-soft); }
.check-item.warn i { color:var(--amber); background:var(--amber-soft); }
.flow { display:flex; align-items:center; justify-content:center; gap:.8rem; padding:1rem 0; flex-wrap:wrap; }
.flow span { padding:.75rem 1rem; border:1px solid #d9e7e1; border-radius:12px; color:var(--green-dark); background:#f0f7f4; font-weight:800; }

.section-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.search { min-width:280px; }
.grid { display:grid; gap:.9rem; }
.two-balanced { grid-template-columns:minmax(300px,.75fr) minmax(500px,1.25fr); }
.data-list,.conversation-list,.version-list { display:grid; }
.data-row { display:grid; grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) auto; align-items:center; gap:.8rem; min-height:66px; padding:.8rem .2rem; border-top:1px solid var(--line); }
.data-row:first-child { border-top:0; }
.data-row strong,.data-row small { display:block; }
.data-row small { margin-top:.25rem; color:var(--muted); line-height:1.45; }
.row-actions { display:flex; gap:.35rem; justify-content:flex-end; flex-wrap:wrap; }
.row-actions button { padding:.48rem .65rem; font-size:.75rem; }
.empty-state { display:grid; place-items:center; align-content:center; min-height:280px; color:var(--muted); text-align:center; }
.empty-state>span { width:56px; height:56px; display:grid; place-items:center; margin-bottom:.8rem; border-radius:18px; color:var(--green); background:var(--green-soft); font-size:1.4rem; }
.inbox-layout { display:grid; grid-template-columns:minmax(330px,.72fr) minmax(520px,1.28fr); gap:.9rem; }
.conversation-list-panel,.thread-panel { min-height:650px; }
.conversation-item { display:grid; grid-template-columns:44px 1fr auto; gap:.7rem; align-items:center; width:100%; padding:.9rem .2rem; border:0; border-top:1px solid var(--line); color:var(--ink); background:transparent; text-align:right; }
.conversation-item:first-child { border-top:0; }
.conversation-item.active { padding-inline:.7rem; border-radius:12px; background:var(--green-soft); }
.conversation-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--green); background:#eef5f2; font-weight:900; }
.conversation-copy { min-width:0; }
.conversation-copy strong,.conversation-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-copy small { margin-top:.25rem; color:var(--muted); }
.thread-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.messages { height:470px; overflow:auto; display:flex; flex-direction:column; gap:.55rem; padding:1rem .25rem; }
.message { max-width:78%; border-radius:14px; padding:.75rem .9rem; line-height:1.65; }
.message.inbound { align-self:flex-start; background:#f0f3f1; }
.message.outbound { align-self:flex-end; color:#fff; background:var(--green); }
.message small { display:block; margin-top:.3rem; opacity:.7; font-size:.65rem; }
.reply-box { display:grid; grid-template-columns:1fr auto; gap:.6rem; padding-top:.8rem; border-top:1px solid var(--line); }
.knowledge-layout { display:grid; grid-template-columns:minmax(330px,.72fr) minmax(540px,1.28fr); gap:.9rem; }
.knowledge-layout:not(:has(.editor-panel:not([hidden]))) { grid-template-columns:1fr; }
.knowledge-list .data-row { grid-template-columns:minmax(260px,2fr) minmax(100px,.6fr) minmax(105px,.6fr) auto; }
.pagination { display:flex; align-items:center; justify-content:center; gap:1rem; padding-top:1rem; border-top:1px solid var(--line); }

.agent-hero,.channel-hero { display:flex; align-items:center; gap:1rem; margin-bottom:.9rem; }
.agent-avatar { width:68px; height:68px; display:grid; place-items:center; overflow:hidden; flex:0 0 auto; border-radius:21px; color:#fff; background:linear-gradient(145deg,#218267,#125744); font-size:1.8rem; font-weight:900; }
.agent-avatar img { width:100%; height:100%; object-fit:cover; }
.agent-hero h2,.channel-hero h2 { margin-bottom:.3rem; font-size:1.45rem; }
.agent-hero-status { margin-inline-start:auto; }
.agent-layout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 .8rem; }
.switch-row { grid-template-columns:auto 1fr; align-items:center; justify-content:start; }
.switch-row input { width:44px; height:24px; accent-color:var(--green); }
.version-item { display:grid; grid-template-columns:100px 1fr auto; gap:1rem; align-items:center; padding:.85rem .2rem; border-top:1px solid var(--line); }
.version-item:first-child { border-top:0; }
.channel-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:#fff; background:#22a06b; font-size:1.4rem; }
.channel-hero .status { margin-inline-start:auto; }
.channel-alert { margin:.55rem 0 0; padding:.55rem .7rem; border-radius:10px; color:#7b4d08; background:#fff3d6; font-size:.84rem; }
.action-stack { display:grid; gap:.65rem; }
.qr-panel { min-height:420px; display:grid; place-items:center; }
.qr { width:min(330px,100%); padding:.7rem; border:1px solid var(--line); border-radius:18px; background:#fff; }
.settings-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }

@media (max-width:1180px) {
  .metrics { grid-template-columns:repeat(3,1fr); }
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .dashboard-grid .span-3 { grid-column:span 2; }
  .agent-layout { grid-template-columns:1fr 1fr; }
  .agent-layout .span-3 { grid-column:span 2; }
  .inbox-layout,.knowledge-layout,.two-balanced { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .app { grid-template-columns:88px minmax(0,1fr); }
  .sidebar { padding:.9rem .65rem; }
  .brand { justify-content:center; }
  .brand>div,.sidebar nav button b,.sidebar-foot .user-chip>div { display:none; }
  .sidebar nav button { display:grid; grid-template-columns:1fr; justify-items:center; padding:.8rem .5rem; }
  .sidebar-foot { justify-content:center; }
  .sidebar-foot .user-chip { display:none; }
  .workspace { padding:1.35rem 1rem 3rem; }
  .service-health { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .login-shell { display:block; padding:1rem; }
  .login-intro { display:none; }
  .login-card { margin:8vh auto 0; padding:1.5rem; }
  .mobile-brand { display:flex; }
  .app { display:block; }
  .sidebar { position:fixed; inset:auto 0 0; z-index:50; width:100%; height:auto; padding:.45rem; }
  .sidebar .brand,.sidebar-foot { display:none; }
  .sidebar nav { display:flex; gap:.25rem; overflow-x:auto; }
  .sidebar nav button { min-width:64px; padding:.55rem .35rem; }
  .sidebar nav button b { display:block; font-size:.6rem; white-space:nowrap; }
  .workspace { padding:1rem 1rem 6rem; }
  .topbar { align-items:flex-start; }
  .topbar .muted { display:none; }
  .metrics,.dashboard-grid,.settings-layout,.agent-layout,.form-grid { grid-template-columns:1fr; }
  .span-2,.span-3,.dashboard-grid .span-3,.agent-layout .span-3 { grid-column:span 1; }
  .metrics { grid-template-columns:1fr 1fr; }
  .metric { min-height:95px; }
  .section-toolbar { align-items:stretch; flex-direction:column; }
  .search { min-width:0; }
  .data-row,.knowledge-list .data-row,.version-item { grid-template-columns:1fr; }
  .row-actions { justify-content:flex-start; }
  .conversation-list-panel,.thread-panel { min-height:auto; }
  .messages { height:54vh; }
  .reply-box { grid-template-columns:1fr; }
  .agent-hero,.channel-hero { align-items:flex-start; flex-wrap:wrap; }
  .agent-hero-status,.channel-hero .status { margin-inline-start:0; }
}