:root{color-scheme:dark;--bg:#0e0e10;--surface:#18181b;--line:#34313d;--text:#efeff1;--muted:#adadb8;--accent:#9146ff;--ink:#ffffff;--purple:#bf94ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:var(--purple)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}
.shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
.sidebar{padding:32px 20px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#0d0d10}
.brand{color:var(--text);text-decoration:none;font-size:34px;font-weight:760;letter-spacing:-1.5px;display:flex;align-items:center;margin:0 8px 60px;gap:10px}
.brand-icon{display:grid;place-items:center;background:var(--accent);color:var(--ink);font-size:25px;width:37px;height:38px;border-radius:9px;font-weight:850;letter-spacing:-2px;transform:rotate(-6deg)}
.brand-period{color:var(--accent);margin-left:-9px}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:1.7px;color:var(--muted);margin:0 0 14px}
.sidebar>.eyebrow{font-size:.65rem;letter-spacing:1.4px;margin-left:13px}
.nav{display:flex;gap:13px;align-items:center;width:100%;padding:14px 13px;text-align:left;background:transparent;border:0;color:var(--muted);border-radius:7px;margin:5px 0;font-size:.9rem;font-weight:600}
.nav span{width:20px;font-size:20px;font-weight:400}
.nav:hover{background:#25252b;color:white}
.nav.active{background:#281940;color:var(--accent)}
.sidebar-footer{margin-top:auto;padding:64px 10px 0;color:var(--muted)}
.sidebar-footer p{font-size:.85rem;margin-bottom:8px}
.sidebar-footer small{font-size:.78rem;line-height:1.6}
.service-mark{font-size:.68rem;letter-spacing:2px;border:1px solid var(--line);padding:5px 7px;border-radius:4px}main{min-width:0;padding:0 42px;max-width:1600px;width:100%;margin:auto}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:.7rem;letter-spacing:1.8px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;border:1px solid #494353;padding:6px 10px;border-radius:5px;font-size:.7rem;letter-spacing:1px;color:#d3cddd}
.badge.live{border-color:#24663b;color:var(--accent);background:#13291a}
.badge.demo-badge{color:var(--purple);border-color:#634392;background:#241832}
.page-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:39px 0 29px}h1{font-size:clamp(1.8rem,3vw,2.75rem);letter-spacing:-1.3px;line-height:1.1;margin:0 0 12px;font-weight:720}h2{font-size:1.1rem;margin:0;letter-spacing:-.3px}h3{font-size:1.1rem}
.muted{color:var(--muted);line-height:1.6}
.page-heading p{margin-bottom:0}
.page-heading .eyebrow{margin-bottom:13px}
.primary,.secondary,.text-button{padding:12px 18px;border:1px solid transparent;border-radius:6px;font-size:.9rem;font-weight:650;line-height:1.4}
.primary{color:var(--ink);background:var(--accent)}
.primary:hover{background:#772ce8}
.primary.stop{background:#281940;border-color:#725299;color:#bf94ff}
.secondary{background:#25252b;color:var(--text);border-color:#433b50}
.secondary:hover{background:#2d2638}
.text-button{background:none;color:var(--muted);padding:10px 0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:25px}
.stats article{border:1px solid var(--line);border-radius:9px;padding:23px 24px;background:var(--surface)}
.stat-label{color:var(--muted);font-size:.85rem}
.stats strong{display:block;font-size:1.95rem;letter-spacing:-.8px;margin:13px 0 9px;line-height:1.2}
.stats small{color:var(--muted);font-size:.78rem;line-height:1.5}
.workspace-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;min-width:0;padding:24px}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}
.card>.muted{font-size:.88rem}
.small{font-size:.8rem}
.chat-feed{height:228px;overflow:auto;margin:20px 0 10px;padding:0 2px;scrollbar-width:thin}
.empty-chat{display:flex;align-items:center;flex-direction:column;justify-content:center;height:100%;text-align:center;color:var(--muted)}
.empty-chat h3{color:var(--text);margin:15px 0 0}
.empty-chat p{font-size:.9rem}
.chat-symbol{color:var(--accent);font-size:30px;border:1px solid #67438e;border-radius:12px;width:46px;height:46px;background:#281940}
.chat-line{padding:10px 0;line-height:1.5;font-size:.95rem;overflow-wrap:anywhere}
.chat-line strong{font-size:.82rem;color:var(--purple);margin-right:8px}
.chat-line.bot strong{color:var(--accent)}
.chat-line.note{font-size:.8rem;color:var(--muted)}
.quick-commands{display:flex;gap:8px;margin:15px 0}
.quick-commands button,code{font-family:Consolas,monospace;font-size:.86em}
.quick-commands button{background:#25252b;color:#ded7e8;border:1px solid #483b59;border-radius:5px;padding:5px 9px}
.chat-input{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.chat-input input{min-width:0;flex:1}
.chat-input button{background:#281940;color:var(--accent);border:1px solid #67438e;border-radius:6px;padding:10px 13px;font-size:.85rem;font-weight:650}input,textarea{background:#0d0d10;color:var(--text);border:1px solid #4c405a;border-radius:6px;padding:11px 12px;width:100%;line-height:1.5}input::placeholder,textarea::placeholder{color:#aba3b6}textarea{resize:vertical;min-height:84px}label{display:block;font-size:.85rem;color:#dfd8e8;margin-bottom:8px}
.activity-feed{height:350px;overflow:auto;scrollbar-width:thin;margin-top:20px}
.activity-item{padding:16px 0;border-bottom:1px solid #34313d;font-size:.88rem;line-height:1.6;overflow-wrap:anywhere}
.activity-item time{display:block;color:#aaa0b6;font-size:.75rem;margin-bottom:4px}
.activity-item.error{color:#ffb4b4}
.activity-item.bot{color:var(--accent)}
.next-step{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#21182c;border-left:3px solid var(--accent);border-radius:0 7px 7px 0;padding:20px 23px;margin-top:23px}
.next-step p{color:var(--muted);font-size:.85rem;line-height:1.5;margin:7px 0 0}
.next-step strong{font-size:.95rem}footer{display:flex;justify-content:space-between;color:#adadb8;font-size:.75rem;border-top:1px solid var(--line);margin-top:36px;padding:22px 0}
.editor-list{display:grid;gap:16px;margin:22px 0}
.editor{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:24px}
.editor-top{display:flex;gap:18px;justify-content:space-between;align-items:center;margin-bottom:18px}
.editor-top>label{flex:1;max-width:280px;margin:0}
.editor-top input[type=text]{margin-top:8px}
.editor-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:18px}
.editor-bottom label{margin:0;max-width:200px}
.editor-bottom input{margin-top:8px}
.toggle{display:flex;gap:9px;align-items:center;color:var(--muted);white-space:nowrap;margin:0}
.toggle input{accent-color:var(--accent);width:19px;height:19px}
.remove{color:#ffc0c0}
.info-strip{display:flex;gap:15px;align-items:center;padding:17px 20px;background:#21182c;border:1px solid #503963;border-radius:7px;font-size:.9rem;color:#d7c8ed;line-height:1.5}
.info-strip code{color:var(--accent)}
.connection-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.setup-card{padding:30px}
.steps{padding-left:22px;margin-top:28px}
.steps li{padding-left:9px;margin-bottom:26px;line-height:1.6}
.steps li::marker{color:var(--accent);font-weight:700}
.steps p{font-size:.9rem;color:var(--muted);margin:8px 0}
.steps code{overflow-wrap:anywhere}
.setup-card>p{margin:18px 0 26px}#auth-form button{margin-top:16px;width:100%}
.connection-status{margin-top:30px;padding-top:25px;border-top:1px solid var(--line)}
.connection-status .muted{font-size:.88rem}
.connection-status button{display:block;margin:12px 0}
.button-link{display:inline-block;text-decoration:none}#auth-instructions{border:1px solid #67438e;border-radius:7px;margin-top:22px;padding:20px;font-size:.9rem}#notice{position:sticky;top:12px;z-index:3;background:#21182c;border:1px solid #67438e;padding:14px 18px;border-radius:7px;margin-top:14px;box-shadow:0 8px 30px #0006;font-size:.9rem}#notice.error{background:#392024;border-color:#a75b68}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){main{padding:0 56px}}
@media(max-width:1100px){.shell{grid-template-columns:200px minmax(0,1fr)}main{padding:0 25px}
.sidebar{padding:28px 12px}
.stats article{padding:19px 16px}
.stats strong{font-size:1.6rem}
.workspace-grid{grid-template-columns:1fr}
.activity-feed{height:210px}
.connection-grid{grid-template-columns:1fr}
.page-heading{align-items:flex-start}
.page-heading>.primary{max-width:160px}
.next-step{align-items:flex-start}}
@media(max-width:720px){.shell{display:block}
.sidebar{padding:16px;border-right:0;border-bottom:1px solid var(--line)}
.brand{font-size:28px;margin:0 0 18px}
.brand-icon{height:31px;width:31px;font-size:22px}
.sidebar>.eyebrow,.sidebar-footer{display:none}nav{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.nav{font-size:.85rem;padding:8px;margin:0}
.nav span{font-size:18px}main{padding:0 18px}
.topbar{height:62px;font-size:.65rem}
.page-heading{margin:29px 0 22px;flex-direction:column;gap:20px}
.page-heading>.primary{max-width:none}
.stats{gap:10px;grid-template-columns:1fr}
.stats article{display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:16px}
.stats strong{grid-row:span 2;margin:0;align-self:center}
.stats small{grid-column:1}
.card{padding:19px}
.next-step{flex-direction:column}
.editor{padding:18px}
.editor-top{flex-wrap:wrap}
.editor-top>label{min-width:160px}
.editor-bottom{flex-wrap:wrap}
.connection-grid{gap:18px}
.setup-card{padding:22px}footer{gap:15px;line-height:1.6;flex-wrap:wrap}
.eyebrow{font-size:.68rem}h1{letter-spacing:-.7px}
.chat-input{flex-wrap:wrap}
.chat-input input{min-width:150px}}

.live-command-form{border-top:1px solid var(--line);padding-top:18px;margin-top:16px}
.live-command-form button{margin-top:12px;width:100%;white-space:normal}
.live-command-form p{margin-bottom:0}
.brand{font-size:28px;gap:8px}
.brand-icon{flex-shrink:0}

.bot-setup{grid-column:1/-1}
.bot-setup>p{max-width:850px}#bot-auth-instructions{border:1px solid #67438e;border-radius:7px;margin-top:22px;padding:20px;font-size:.9rem}

/* Direction artistique de chumbot.fr : violet Twitch, noir et cartes anthracite. */
body {
  background:
    linear-gradient(135deg, transparent 0 20%, rgba(145,70,255,.16) 21% 24%, transparent 25% 100%),
    linear-gradient(150deg, transparent 0 48%, rgba(100,35,190,.22) 49% 52%, transparent 53% 100%),
    linear-gradient(116deg, transparent 0 60%, rgba(145,70,255,.08) 61% 65%, transparent 66% 100%),
    radial-gradient(circle at 76% 12%, rgba(145,70,255,.12), transparent 26%),
    linear-gradient(180deg, #101014 0%, var(--bg) 520px);
  background-attachment: fixed;
}
.sidebar { background: rgba(13,13,16,.96); }
.brand { font-size: 24px; font-weight: 800; letter-spacing: -.7px; gap: 10px; margin-bottom: 48px; }
.brand-icon {
  display: block; width: 44px; height: 44px; object-fit: cover;
  border-radius: 50%; transform: none; background: var(--bg); filter: hue-rotate(265deg) saturate(1.1) brightness(1.1);
  box-shadow: 0 0 0 2px rgba(145,70,255,.18);
}
main { align-self: start; margin: 0 auto; }
.eyebrow { color: var(--purple); font-weight: 800; letter-spacing: .4px; }
.sidebar > .eyebrow { color: var(--muted); }
.nav { border: 1px solid transparent; border-radius: 8px; }
.nav.active { border-color: #68419a; color: #bf94ff; box-shadow: inset 3px 0 var(--accent); }
.nav:hover { background: #21182c; }
h1 { font-weight: 800; font-size: clamp(2rem,3.6vw,3.25rem); letter-spacing: -1.6px; line-height: 1.05; }
h2 { font-weight: 750; }
.primary,.secondary { border-radius: 8px; font-weight: 800; min-height: 46px; }
.primary { box-shadow: 0 4px 18px rgba(100,35,190,.15); }
.primary:disabled { box-shadow: none; }
.primary.stop { box-shadow: none; }
.stats article,.card,.editor { border-radius: 8px; border-top: 3px solid rgba(145,70,255,.78); box-shadow: 0 8px 24px #0002; }
.stats strong { font-weight: 800; }
.badge { border-radius: 6px; line-height: 1.5; }
.badge.live { color: #57f287; }
.badge.demo-badge { color: #bf94ff; }
.chat-symbol { color: #bf94ff; }
.chat-line.bot strong,.activity-item.bot,.info-strip code { color: #bf94ff; }
.chat-input button { color: #d4b8ff; border-radius: 8px; }
.quick-commands button:hover,.chat-input button:hover { background: #39214f; border-color: var(--accent); }
.steps li::marker { color: #bf94ff; }
.text-button:hover { color: var(--text); }
.remove:hover { color: #ff8c98; }
.toggle input { accent-color: var(--accent); }
.topbar { gap: 16px; }
.topbar > .badge { text-align: center; letter-spacing: .5px; }
input,textarea { border-radius: 8px; }
footer { background: transparent; }
@media(max-width:720px) {
  .brand { font-size: 24px; margin-bottom: 18px; }
  .brand-icon { width: 38px; height: 38px; }
  .topbar { height: auto; min-height: 70px; padding: 12px 0; flex-wrap: wrap; gap: 8px; }
  h1 { font-size: 2rem; letter-spacing: -1px; }
  .page-heading .save-button { width: 100%; }
}