:root{
  --bg:#f4f6f4;
  --surface:#ffffff;
  --surface-2:#eaede9;
  --border:#dbe1dc;
  --text:#171a18;
  --text-muted:#5c655f;
  --text-faint:#8b948d;
  --accent:#a86a1c;
  --accent-strong:#8a5615;
  --accent-soft:#f3e3c9;
  --accent-2:#2f6fb0;
  --accent-2-soft:#dde9f5;
  --danger:#a83c37;
  --danger-soft:#f4dcda;
  --success:#2f7d4f;
  --success-soft:#dcefe2;
  --code-bg:#eef0ec;
  --code-border:#d7ddd3;
  --shadow:0 1px 2px rgba(20,25,20,.05),0 10px 30px rgba(20,25,20,.07);
  --radius:10px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'IBM Plex Sans Condensed',var(--sans);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12100b; --surface:#1a1712; --surface-2:#211d16; --border:#332d21;
    --text:#ece7db; --text-muted:#a89d87; --text-faint:#7d7462;
    --accent:#e0a83f; --accent-strong:#f0bd5e; --accent-soft:#3a2c14;
    --accent-2:#6fa8e0; --accent-2-soft:#1c2a38;
    --danger:#e2726d; --danger-soft:#3a1f1d; --success:#6fbf8c; --success-soft:#1a2e22;
    --code-bg:#201c14; --code-border:#3a331f;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#12100b; --surface:#1a1712; --surface-2:#211d16; --border:#332d21;
  --text:#ece7db; --text-muted:#a89d87; --text-faint:#7d7462;
  --accent:#e0a83f; --accent-strong:#f0bd5e; --accent-soft:#3a2c14;
  --accent-2:#6fa8e0; --accent-2-soft:#1c2a38;
  --danger:#e2726d; --danger-soft:#3a1f1d; --success:#6fbf8c; --success-soft:#1a2e22;
  --code-bg:#201c14; --code-border:#3a331f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-2);}
::selection{background:var(--accent-soft);}

.app{display:grid;grid-template-columns:272px minmax(0,1fr) 220px;max-width:1400px;margin:0 auto;min-height:100vh;}
.app[hidden]{display:none;}
@media (max-width:1100px){.app{grid-template-columns:240px minmax(0,1fr);}.toc{display:none;}}
@media (max-width:760px){
  .app{display:block;}
  .mobile-topbar:not([hidden]){display:flex;}
}

.mobile-topbar{
  display:none;position:sticky;top:0;z-index:45;align-items:center;gap:10px;
  padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);
}
.mobile-topbar .brand-mark{width:26px;height:26px;}
.mobile-topbar .mt-title{font-family:var(--display);font-weight:700;font-size:14.5px;}
.mobile-menu-btn{
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:6px 10px;color:var(--text);font-size:16px;cursor:pointer;line-height:1;flex:none;
}
.sidebar-backdrop{display:none;position:fixed;inset:0;z-index:65;background:rgba(10,10,8,.5);}

.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;border-right:1px solid var(--border);padding:20px 14px 40px;background:var(--surface);}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 16px;border-bottom:1px solid var(--border);margin-bottom:14px;}
.brand-mark{width:32px;height:32px;border-radius:8px;object-fit:cover;flex:none;border:1px solid var(--border);}
.brand-text .t1{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:.01em;}
.brand-text .t2{font-size:11.5px;color:var(--text-faint);}

.search-trigger{
  display:flex;align-items:center;gap:8px;width:100%;margin-bottom:16px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:9px 10px;color:var(--text-faint);font-family:var(--sans);font-size:13.5px;
  cursor:pointer;text-align:left;
}
.search-trigger:hover{border-color:var(--accent-2);color:var(--text-muted);}
.search-trigger svg{opacity:.6;flex:none;}
.search-trigger span{flex:1;}
.search-trigger kbd{
  font-family:var(--mono);font-size:11px;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:4px;padding:1px 6px;background:var(--surface);color:var(--text-faint);flex:none;
}
.search-hint{font-size:11px;color:var(--text-faint);margin:6px 2px 0;}

.nav-group-label{font-family:var(--display);text-transform:uppercase;font-size:11px;letter-spacing:.09em;color:var(--text-faint);margin:18px 8px 6px;}
.nav-list{list-style:none;margin:0;padding:0;}
.nav-item a{display:block;text-decoration:none;color:var(--text);padding:8px 10px;border-radius:8px;font-size:13.5px;line-height:1.35;border:1px solid transparent;}
.nav-item .nav-desc{display:block;color:var(--text-faint);font-size:11.3px;margin-top:2px;}
.nav-item a:hover{background:var(--surface-2);}
.nav-item a.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);}
.nav-item a.active .nav-desc{color:var(--accent-strong);opacity:.8;}
.sidebar-footer{margin-top:22px;padding-top:14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-faint);}

/* ---------- Search modal ---------- */
.search-modal-backdrop{
  display:none;position:fixed;inset:0;z-index:80;
  background:rgba(10,10,8,.55);backdrop-filter:blur(2px);
  align-items:flex-start;justify-content:center;padding:12vh 20px 20px;
}
.search-modal-backdrop.open{display:flex;}
.search-modal{
  width:100%;max-width:560px;max-height:70vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;
}
.search-modal-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);}
.search-modal-input-row svg{opacity:.6;flex:none;}
.search-modal-input-row input{flex:1;border:none;background:none;outline:none;font-family:var(--sans);font-size:15px;color:var(--text);}
.search-modal-input-row kbd{
  font-family:var(--mono);font-size:11px;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:4px;padding:1px 6px;background:var(--surface-2);color:var(--text-faint);flex:none;
}
.search-modal-results{overflow-y:auto;padding:6px;}
.sr-item{display:block;padding:10px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent;}
.sr-item:hover{background:var(--surface-2);}
.sr-doc{font-size:11px;color:var(--accent-2);font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;}
.sr-heading{font-size:13.5px;font-weight:600;margin:2px 0;}
.sr-snippet{font-size:12.3px;color:var(--text-muted);}
.sr-snippet mark,.sr-heading mark{background:var(--accent-soft);color:var(--accent-strong);border-radius:2px;padding:0 1px;}
.sr-empty{padding:20px 14px;color:var(--text-faint);font-size:13px;text-align:center;}

main{padding:34px 48px 90px;min-width:0;}
@media (max-width:760px){main{padding:24px 18px 70px;}}

.doc-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--display);text-transform:uppercase;font-size:11.5px;letter-spacing:.08em;color:var(--text-faint);margin-bottom:10px;}
.doc-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.doc-eyebrow.client .dot{background:var(--accent-2);}

.content h1{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.18;margin:0 0 6px;text-wrap:balance;color:var(--text);}
.content .doc-desc{color:var(--text-muted);font-size:14.5px;margin:0 0 28px;max-width:62ch;}
.content h2{font-family:var(--display);font-weight:700;font-size:21px;margin:40px 0 14px;padding-top:14px;border-top:1px solid var(--border);color:var(--text);}
.content h1+h2,.content .doc-desc+h2{border-top:none;padding-top:0;}
.content h3{font-family:var(--display);font-weight:600;font-size:17px;margin:26px 0 10px;color:var(--text);}
.content h4{font-family:var(--sans);font-weight:600;margin:20px 0 8px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:12.5px;}
.content p,.chat-msg.assistant p{margin:0 0 14px;max-width:72ch;color:var(--text);}
.content ul,.content ol,.chat-msg.assistant ul,.chat-msg.assistant ol{margin:0 0 14px;padding-left:1.3em;max-width:70ch;}
.content li,.chat-msg.assistant li{margin-bottom:5px;}
.content code,.chat-msg.assistant code{font-family:var(--mono);font-size:.87em;background:var(--code-bg);border:1px solid var(--code-border);border-radius:4px;padding:.1em .35em;color:var(--accent-strong);}
.content pre.code-block,.chat-msg.assistant pre.code-block{background:var(--code-bg);border:1px solid var(--code-border);border-radius:var(--radius);padding:14px 16px;overflow-x:auto;margin:0 0 14px;max-width:100%;}
.content pre.code-block code,.chat-msg.assistant pre.code-block code{background:none;border:none;padding:0;color:var(--text);font-size:12.8px;line-height:1.55;}
.content blockquote,.chat-msg.assistant blockquote{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;color:var(--text);}
.content blockquote p,.chat-msg.assistant blockquote p{margin:0;max-width:none;}
.content hr,.chat-msg.assistant hr{border:none;border-top:1px solid var(--border);margin:30px 0;}
.table-wrap{overflow-x:auto;max-width:100%;margin:0 0 14px;border:1px solid var(--border);border-radius:var(--radius);}
.content table,.chat-msg.assistant table{border-collapse:collapse;width:100%;font-size:13.3px;}
.chat-msg.assistant table{font-size:12.5px;}
.content th,.content td,.chat-msg.assistant th,.chat-msg.assistant td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.content th,.chat-msg.assistant th{background:var(--surface-2);font-family:var(--display);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);white-space:nowrap;}
.content tr:last-child td,.chat-msg.assistant tr:last-child td{border-bottom:none;}
.content a,.chat-msg.assistant a{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px;}
.content a:hover,.chat-msg.assistant a:hover{text-decoration-color:var(--accent-2);}
.chat-msg.assistant h1,.chat-msg.assistant h2,.chat-msg.assistant h3{font-family:var(--display);font-weight:700;font-size:14.5px;margin:12px 0 6px;color:var(--text);}
.chat-msg.assistant h4{font-family:var(--sans);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin:10px 0 4px;}

.doc-nav-footer{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:20px;border-top:1px solid var(--border);}
.doc-nav-btn{flex:1;max-width:48%;border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--text);background:var(--surface);}
.doc-nav-btn:hover{border-color:var(--accent-2);}
.doc-nav-btn .dnb-label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;font-family:var(--display);}
.doc-nav-btn.next{text-align:right;margin-left:auto;}
.doc-nav-btn .dnb-title{font-weight:600;font-size:13.5px;margin-top:2px;}

.toc{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;padding:34px 20px 40px 0;}
.toc-label{font-family:var(--display);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;color:var(--text-faint);margin:0 0 10px;}
.toc ul{list-style:none;margin:0;padding:0;}
.toc li a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--border);color:var(--text-muted);text-decoration:none;font-size:12.6px;line-height:1.4;}
.toc li.h3 a{padding-left:22px;font-size:12px;}
.toc li a:hover{color:var(--text);}
.toc li a.active{border-left-color:var(--accent);color:var(--accent-strong);font-weight:600;}

.home-hero{max-width:70ch;margin-bottom:36px;}
.home-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,36px);margin:0 0 12px;text-wrap:balance;}
.home-hero p{color:var(--text-muted);font-size:15px;max-width:64ch;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.card{display:block;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;transition:border-color .12s ease, transform .12s ease;}
.card:hover{border-color:var(--accent-2);transform:translateY(-1px);}
.card .card-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-family:var(--display);color:var(--accent);}
.card.client .card-group{color:var(--accent-2);}
.card h3{margin:6px 0 6px;font-family:var(--display);font-size:15.5px;}
.card p{margin:0;font-size:12.6px;color:var(--text-muted);}
.home-section-title{font-family:var(--display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin:32px 0 14px;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- Chat widget ---------- */
.chat-toggle{
  position:fixed;right:22px;bottom:22px;z-index:50;
  display:flex;align-items:center;gap:9px;
  background:var(--accent);color:#1a1204;border:none;border-radius:999px;
  padding:13px 18px 13px 15px;font-family:var(--display);font-weight:700;font-size:14px;
  box-shadow:var(--shadow);cursor:pointer;
}
.chat-toggle[hidden]{display:none;}
.chat-toggle:hover{background:var(--accent-strong);}
.chat-panel{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:480px;max-width:calc(100vw - 32px);height:min(680px, calc(100vh - 44px));
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);display:none;flex-direction:column;overflow:hidden;
}
.chat-panel.open{display:flex;}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.ch-left{display:flex;align-items:center;gap:10px;}
.mops-avatar{border-radius:50%;object-fit:cover;background:var(--surface);border:1px solid var(--border);flex:none;}
.mops-avatar-md{width:38px;height:38px;}
.mops-avatar-sm{width:20px;height:20px;}
.chat-header .ch-title{font-family:var(--display);font-weight:700;font-size:14px;}
.chat-header .ch-sub{font-size:11px;color:var(--text-faint);}
.chat-close{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1;padding:4px;}
.chat-messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;}
.chat-msg{max-width:88%;font-size:13.6px;line-height:1.5;padding:10px 12px;border-radius:12px;}
.chat-msg.user{align-self:flex-end;background:var(--accent-soft);color:var(--text);border-bottom-right-radius:3px;}
.chat-msg.assistant{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:3px;position:relative;margin-left:32px;}
.chat-msg.assistant::before{
  content:'';position:absolute;left:-32px;top:0;width:24px;height:24px;border-radius:50%;
  background:var(--surface) url('/mops-avatar.jpg') center/cover no-repeat;border:1px solid var(--border);
}
.chat-msg.assistant p{margin:0 0 8px;}
.chat-msg.assistant p:last-child{margin-bottom:0;}
.chat-msg.system-note{align-self:center;font-size:12px;color:var(--text-faint);text-align:center;max-width:100%;}
.chat-sources{margin-top:8px;font-size:11px;color:var(--text-faint);border-top:1px dashed var(--border);padding-top:6px;}
.chat-sources .src-link{color:var(--accent-2);text-decoration:underline;text-decoration-color:transparent;cursor:pointer;}
.chat-sources .src-link:hover{text-decoration-color:var(--accent-2);}
.chat-sources .src-sep{color:var(--text-faint);}
.chat-feedback{margin-top:8px;display:flex;align-items:center;gap:6px;}
.chat-feedback-hint{font-size:11px;color:var(--text-faint);margin-right:2px;}
.fb-btn{background:none;border:1px solid transparent;border-radius:6px;font-size:13px;padding:2px 6px;cursor:pointer;opacity:.55;}
.fb-btn:hover{opacity:1;background:var(--surface);}
.fb-btn:disabled{cursor:default;}
.fb-btn.fb-chosen{opacity:1;border-color:var(--border);background:var(--surface);}
.chat-input-row{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--surface);}
.chat-input-row textarea{
  flex:1;resize:none;border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  font-family:var(--sans);font-size:13.5px;line-height:1.4;color:var(--text);background:var(--surface-2);
  min-height:42px;max-height:120px;overflow-y:auto;
}
.chat-input-row textarea::placeholder{color:var(--text-faint);}
.chat-input-row textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;}
.chat-send{
  flex:none;align-self:flex-end;
  background:var(--accent);border:none;border-radius:10px;height:42px;padding:0 16px;
  color:#1a1204;font-weight:700;font-family:var(--display);cursor:pointer;
}
.chat-send:disabled{opacity:.5;cursor:default;}
.chat-typing{display:inline-flex;gap:3px;}
.chat-typing span{width:5px;height:5px;border-radius:50%;background:var(--text-faint);animation:blink 1.2s infinite ease-in-out;}
.chat-typing span:nth-child(2){animation-delay:.2s;}
.chat-typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

/* ---------- Login screen ---------- */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:24px;
}
.login-card{
  max-width:360px;width:100%;text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:36px 28px;box-shadow:var(--shadow);
}
.login-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);margin-bottom:18px;}
.login-card h1{font-family:var(--display);font-size:19px;margin:0 0 10px;}
.login-card p{color:var(--text-muted);font-size:13.5px;margin:0 0 22px;}
.login-tg-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:#2AABEE;color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:14.5px;
  border-radius:10px;padding:12px 18px;transition:background .12s ease;
}
.login-tg-btn:hover{background:#229ED9;}
.login-manual{margin-top:14px;font-size:12px;color:var(--text-faint);line-height:1.5;}
.login-manual code{font-family:var(--mono);background:var(--surface-2);border-radius:4px;padding:1px 5px;color:var(--text);}
.login-manual:empty{display:none;}
.login-status{margin-top:14px;font-size:12.5px;color:var(--text-muted);}
.login-status.error{color:var(--danger);}
.login-status:empty{display:none;}

/* ---------- User chip / logout ---------- */
.user-chip{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:9px;
}
.user-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--border);}
.user-chip .uc-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-chip .uc-role{font-size:10.5px;color:var(--text-faint);}
.user-chip .uc-logout{margin-left:auto;background:none;border:none;color:var(--text-faint);font-size:11px;cursor:pointer;padding:4px 6px;flex:none;}
.user-chip .uc-logout:hover{color:var(--danger);}

.ch-actions{display:flex;align-items:center;gap:4px;}
.chat-new{background:none;border:none;color:var(--text-muted);font-size:15px;cursor:pointer;line-height:1;padding:4px 6px;border-radius:6px;}
.chat-new:hover{background:var(--surface);color:var(--text);}

/* ---------- Mobile off-canvas sidebar (placed last on purpose — needs to win the cascade over the base .sidebar rule above) ---------- */
@media (max-width:760px){
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:70;
    width:85vw;max-width:320px;height:100vh;
    transform:translateX(-101%);transition:transform .2s ease;
    box-shadow:var(--shadow);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop.open{display:block;}
  main{padding-top:20px;}
}