:root {
  --bg:#0d0d14;--surface:#13131f;--surface2:#1a1a2e;
  --border:rgba(255,255,255,.07);--gold:#f5c842;--gold2:#c49a1a;
  --text:#e8e8f0;--muted:#7070a0;--green:#4ade80;--red:#f87171;
  --blue:#60a5fa;--purple:#a78bfa;--radius:12px;
  --sidebar-w:360px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;min-height:100vh}

/* LOGIN */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem;width:100%;max-width:380px}
.login-box h1{font-size:1.4rem;margin-bottom:.25rem}
.login-box p{color:var(--muted);margin-bottom:1.75rem;font-size:.9rem}
.login-box input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;color:var(--text);font-size:1rem;margin-bottom:1rem;outline:none}
.login-box input:focus{border-color:var(--gold)}
.btn-login{width:100%;background:var(--gold);color:#000;border:none;border-radius:8px;padding:.8rem;font-weight:700;font-size:1rem;cursor:pointer}
.btn-login:hover{background:var(--gold2)}
.error{color:var(--red);font-size:.85rem;margin-top:.5rem}
.logo{font-size:1.1rem;font-weight:700;color:var(--gold);margin-bottom:1.5rem;display:block}

/* TOPBAR */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.topbar-logo{font-weight:700;color:var(--gold)}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topbar-right a{color:var(--muted);text-decoration:none;font-size:.85rem}
.topbar-right a:hover{color:var(--text)}
select.preset{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:.35rem .6rem;font-size:.8rem;cursor:pointer}

/* LAYOUT */
.layout{display:flex;min-height:calc(100vh - 48px)}
.main{flex:1;max-width:100%;padding:1.5rem;overflow:auto;transition:margin-right .3s}
.main.sidebar-open{margin-right:var(--sidebar-w)}

/* SIDEBAR CHAT */
.sidebar{position:fixed;right:0;top:48px;bottom:0;width:var(--sidebar-w);background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:15;transform:translateX(100%);transition:transform .3s}
.sidebar.open{transform:translateX(0)}
.sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:.9rem}
.sidebar-toggle{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;padding:.25rem}
.sidebar-toggle:hover{color:var(--text)}

/* CHAT */
.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.chat-msg{display:flex}
.chat-msg.user{justify-content:flex-end}
.chat-bubble{max-width:85%;padding:.65rem .9rem;border-radius:12px;font-size:.85rem;line-height:1.55;white-space:pre-wrap}
.chat-msg.assistant .chat-bubble{background:var(--surface2);border:1px solid var(--border)}
.chat-msg.user .chat-bubble{background:var(--gold);color:#000;font-weight:500}
.chat-input-wrap{padding:1rem;border-top:1px solid var(--border);display:flex;gap:.5rem}
.chat-input-wrap textarea{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;color:var(--text);font-size:.85rem;resize:none;outline:none;font-family:inherit}
.chat-input-wrap textarea:focus{border-color:var(--gold)}
.chat-send{background:var(--gold);color:#000;border:none;border-radius:8px;padding:.6rem .9rem;font-weight:700;cursor:pointer;white-space:nowrap}
.chat-send:hover{background:var(--gold2)}
.chat-warning{padding:.5rem 1rem;font-size:.75rem;color:var(--red);text-align:center}
.chat-typing .chat-bubble::after{content:'...';animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* PAGE HEADER */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.page-header h1{font-size:1.4rem;font-weight:700}
.btn-ai{background:var(--purple);color:#fff;border:none;border-radius:8px;padding:.5rem 1.1rem;font-weight:600;font-size:.85rem;cursor:pointer}
.btn-ai:hover{opacity:.85}

/* SECTION */
h2.section-head{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:2rem 0 1rem}
h2.section-head:first-child{margin-top:0}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem}
.kpi__label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.5rem}
.kpi__value{font-size:1.75rem;font-weight:700;line-height:1}
.kpi__sub{font-size:.72rem;color:var(--muted);margin-top:.35rem}
.gold{color:var(--gold)}.green{color:var(--green)}.red{color:var(--red)}.blue{color:var(--blue)}.purple{color:var(--purple)}

/* TABLE */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem}
table{width:100%;border-collapse:collapse}
thead th{background:var(--surface2);padding:.75rem 1rem;text-align:left;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;border-bottom:1px solid var(--border)}
tbody td{padding:.75rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.02)}
tfoot td{padding:.75rem 1rem;background:var(--surface2)}
.badge{display:inline-block;padding:.2rem .55rem;border-radius:20px;font-size:.7rem;font-weight:600}
.badge-active{background:rgba(74,222,128,.15);color:var(--green)}
.badge-paused{background:rgba(248,113,113,.12);color:var(--red)}

/* INTEGRATIONS */
.int-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.int-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.int-card h3{font-size:.9rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.int-card p{color:var(--muted);font-size:.82rem;line-height:1.6}
.int-status{font-size:.7rem;padding:.15rem .5rem;border-radius:20px;font-weight:600}
.int-ok{background:rgba(74,222,128,.15);color:var(--green)}
.int-pending{background:rgba(245,200,66,.12);color:var(--gold)}

/* LOADING */
.loading{color:var(--muted);font-size:.9rem;padding:1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:.5rem}

@media(max-width:768px){
  .main.sidebar-open{margin-right:0}
  .sidebar{width:100%}
}