*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,Segoe UI,sans-serif;background:#0f1115;color:#e7e9ee}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:#11131a;border-bottom:1px solid #202433;position:sticky;top:0;z-index:9}
.brand{font-weight:800;letter-spacing:.5px}.nav a{color:#aeb4c2;margin:0 .5rem;text-decoration:none}.nav a.active{color:#fff;border-bottom:2px solid #ff7a00;padding-bottom:.25rem}
.page{padding:1rem;max-width:1100px;margin:0 auto}.card{background:#131722;border:1px solid #1c2130;border-radius:14px;padding:1rem;max-width:1100px;margin:1rem auto}
label{display:block;margin:.4rem 0 .25rem .1rem;opacity:.85}
input,select,textarea{width:100%;padding:.7rem .8rem;border:1px solid #2a3142;background:#0f1320;color:#e7e9ee;border-radius:10px;font-size:16px}
.btn,.ghost{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:.6rem 1rem;border:1px solid #2a3142;background:#1a2132;color:#fff;cursor:pointer}
.ghost{background:transparent}.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.stat{background:#131722;border:1px solid #1c2130;border-radius:14px;padding:1rem;text-align:center}.stat-num{font-size:1.8rem;font-weight:800}
.list{display:grid;gap:.5rem}.item{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem;border:1px solid #1c2130;border-radius:12px;background:#131722}
.badge{display:inline-flex;align-items:center;gap:.3rem;border:1px solid #39415a;border-radius:999px;padding:.2rem .5rem;font-size:.8rem}.small{opacity:.75;font-size:.9rem}
/* Threads */
.threads{display:grid;gap:.5rem}
.thread{display:flex;gap:.6rem;align-items:center;border:1px solid #1c2130;background:#131722;border-radius:12px;padding:.6rem}
.thread .t-main{flex:1}
.thread .t-title{font-weight:700}
.thread .t-small{opacity:.75;font-size:.9rem}
.unread{background:#ff7a00;color:#111;padding:.1rem .45rem;border-radius:999px;font-size:.78rem;font-weight:700}
/* Chat overlay */
.chat-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center}
.chat-overlay.open{display:flex}
.chat-panel{width:min(900px,96vw);height:min(90vh,900px);background:#0f1320;border:1px solid #202433;border-radius:18px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.chat-head{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border-bottom:1px solid #202433}
.chat-title{font-weight:800}
.chat-body{flex:1;overflow:auto;padding:.8rem;display:grid;gap:.5rem}
.msg{display:flex;gap:.6rem;align-items:flex-start}
.msg.me{justify-content:flex-end}
.bubble{max-width:72%;padding:.55rem .7rem;border-radius:14px;background:#131722;border:1px solid #1c2130}
.bubble.me{background:#1a2132;border-color:#2a3142}
.file-tile{display:flex;align-items:center;gap:.5rem;border:1px dashed #39415a;border-radius:10px;padding:.4rem .6rem;margin-top:.25rem}
.msg .meta{opacity:.7;font-size:.78rem;margin-top:.15rem}
.chat-input{display:flex;gap:.5rem;padding:.6rem;border-top:1px solid #202433}
.chat-dropmask{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,122,0,.15);border:2px dashed #ff7a00;color:#ffbe7a;font-weight:800;font-size:1.2rem}
.chat-overlay.drag .chat-dropmask{display:flex}
/* Reports */
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:.5rem 0}
.filters .span2{grid-column:span 2}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #1c2130;padding:.5rem;text-align:left}
.table th{background:#131722}
/* FAB */
.fab{position:fixed;right:16px;bottom:16px;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.fab-btn{border:1px solid #2a3142;background:#ff7a00;color:#111;border-radius:999px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.fab-menu{display:flex;flex-direction:column;gap:.25rem;background:#0f1320;border:1px solid #202433;border-radius:12px;padding:.4rem;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.fab-item{display:block;color:#e7e9ee;text-decoration:none;padding:.4rem .6rem;border-radius:8px}
.fab-item:hover{background:#1a2132}
@media (max-width:720px){.grid{grid-template-columns:1fr}.chat-panel{width:100vw;height:100vh;border-radius:0}}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:30}
.modal.open{display:flex}
.modal-dlg{width:min(860px,96vw);background:#0f1320;border:1px solid #202433;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.45);display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid #202433}
.modal-title{font-weight:800}
.modal-body{padding:1rem;display:block;max-height:min(70vh,720px);overflow:auto}
.modal-foot{display:flex;gap:.5rem;align-items:center;padding:.7rem .9rem;border-top:1px solid #202433}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.grid2 .span2{grid-column:span 2}
.badge.warn{border-color:#5a4239;color:#ffbe7a}
.badge.red{border-color:#5a3939;color:#ff7a7a}
.svc-card{display:flex;gap:.6rem;align-items:center;border:1px solid #1c2130;border-radius:12px;background:#131722;padding:.6rem}
.svc-card .icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#1a2132;border:1px solid #2a3142}
.filters-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}