body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; background:#111; color:#eee; }
.container { max-width: 1100px; margin: 32px auto; padding: 0 16px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#0f172a; border-bottom:1px solid #233; }
.brand { font-weight:600; }
.topbar a { color:#aee; text-decoration:none; margin-left:12px; }
.sep { color:#555; margin:0 8px; }
h1, h2 { font-size: 20px; margin: 16px 0; }
.card { background:#0b1220; border:1px solid #233; border-radius:8px; padding:12px; }
label { display:block; margin-bottom:10px; }
input, textarea { width:100%; background:#0a0f1a; border:1px solid #233; color:#eee; border-radius:6px; padding:8px; }
button { padding:8px 14px; border-radius:6px; border:1px solid #355; background:#193; color:#fff; cursor:pointer; }
button:hover { filter: brightness(1.05); }
.hint { color:#999; margin-top:10px; }
table { width:100%; border-collapse:collapse; background:#0b1220; border:1px solid #233; border-radius:8px; overflow:hidden; }
th, td { border-bottom:1px solid #233; padding:10px; text-align:left; }
.muted { color:#999; font-size:13px; }
.badge { background:#1e293b; border:1px solid #254; color:#9f9; padding:3px 8px; border-radius:999px; font-size:12px; }
.btn { padding:6px 10px; border:1px solid #355; border-radius:6px; color:#aee; text-decoration:none; }
.thread { display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.msg { border:1px solid #233; border-radius:8px; padding:8px; background:#0b1220; }
.msg.staff { border-color:#2b5; }
.msg.client { border-color:#555; }
.flash { list-style:none; padding:0; }
.flash li { margin:10px 0; padding:8px; border-radius:6px; }
.flash li.ok { background:#123c1f; border:1px solid #2b5; }
.flash li.error { background:#3c1212; border:1px solid #b52; }

.layout  { display:flex; gap:24px; }
.main    { flex:1 1 auto; }
.templates { width:220px; }
.templates ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.template-item {
  width:100%; text-align:left; padding:6px 10px;
  background:#1e293b; border:1px solid #355; border-radius:6px; color:#aee; cursor:pointer;
}
.template-item:hover { filter:brightness(1.10); }
.reply-form textarea { min-height: 260px; }

.tabs { margin-bottom:16px; display:flex; gap:8px; }
.tabs a { padding:6px 12px; border:1px solid #355; border-radius:6px; color:#aee; text-decoration:none; }
.tabs a.active { background:#355; color:#fff; }

.btn-small {
  padding:4px 8px; font-size:12px;
  border:1px solid #355; border-radius:6px;
  background:#1e293b; color:#aee; cursor:pointer;
}
.btn-small:hover { filter:brightness(1.1); }

.btn-copy {
  border:none; background:transparent; cursor:pointer; color:#aee;
  font-size:14px; margin-left:4px;
}
.btn-copy:hover { filter:brightness(1.2); }