:root { --bg:#0f1115; --panel:#171a21; --panel2:#1d2129; --line:#2a2f3a; --text:#e8eaed; --mute:#9aa3b2; --accent:#8b5cf6; --accent-d:#7c3aed; --bad:#ff6b6b; --warn:#f5c04a; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.center { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 36px; max-width: 420px; text-align: center; }
.login-card h1 { margin: 12px 0 8px; font-size: 24px; }
.login-card p { color: var(--mute); margin: 0 0 22px; }
/* Logo (replaces the old coloured dot) */
.dot { display: inline-block; width: 26px; height: 26px; background: url("logo.svg") center / contain no-repeat; margin-right: 8px; vertical-align: middle; }
.dot.big { width: 84px; height: 84px; margin: 0; }
a { color: var(--accent); }
.btn { display: inline-block; background: var(--accent); color: #fff; border: 0; padding: 10px 18px; border-radius: 8px; font-weight: 700; cursor: pointer; text-decoration: none; font-size: 15px; }
.btn:hover { background: var(--accent-d); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.ghost:hover { border-color: var(--accent); }
.top { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { font-weight: 700; } .brand small { color: var(--mute); font-weight: 400; margin-left: 6px; }
.user { display: flex; align-items: center; gap: 10px; } .user img { border-radius: 50%; }
.shell { display: grid; grid-template-columns: 210px 1fr; gap: 0; min-height: calc(100vh - 54px); }
.side { border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.side a { padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.side a.active { background: var(--panel2); border-left: 3px solid var(--accent); }
.side a.soon { color: var(--mute); cursor: default; } .side i { font-size: 11px; background: var(--panel2); padding: 1px 6px; border-radius: 10px; margin-left: 6px; font-style: normal; }
main { padding: 22px 26px; max-width: 1280px; width: 100%; }
h1 { margin: 0 0 16px; font-size: 24px; } h2 { margin: 0 0 14px; font-size: 17px; } h3 { margin: 18px 0 8px; font-size: 15px; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.sticky { position: sticky; top: 14px; }
label { display: block; font-size: 13px; color: var(--mute); margin-bottom: 12px; }
input:not([type=checkbox]):not([type=color]), select, textarea { width: 100%; margin-top: 5px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; }
textarea { resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); } .check.pad { margin-top: 22px; }
.hint { color: var(--mute); font-size: 12px; } .count { float: right; font-size: 12px; } .count.over { color: var(--bad); }
.colorrow { display: flex; gap: 8px; margin-top: 5px; } .colorrow input[type=color] { width: 46px; height: 38px; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; } .colorrow input:last-child { margin-top: 0; }
.mentions { margin-bottom: 8px; } .rolepick { display: flex; gap: 8px; margin: 8px 0; } .rolepick select { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 3px 6px 3px 10px; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; } .chip button { background: none; border: 0; color: var(--mute); cursor: pointer; font-size: 15px; }
details { border-top: 1px solid var(--line); padding: 10px 0; margin-top: 6px; } summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.fieldrow { display: grid; grid-template-columns: 1fr 1.6fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; } .fieldrow input { margin-top: 0 !important; }
.errors { background: #2a1517; border: 1px solid #5c2a2e; color: #ffb3b3; border-radius: 8px; padding: 10px 12px; margin-top: 12px; } .errors div { margin: 2px 0; }
.sendrow { display: flex; gap: 10px; margin-top: 14px; }
.status { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); } .status.ok { border-color: var(--accent); } .status.err { border-color: #5c2a2e; color: #ffb3b3; }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; max-width: 460px; padding: 20px; } dialog::backdrop { background: rgba(0,0,0,.6); }
#toast { position: fixed; bottom: 22px; right: 22px; background: var(--panel2); border: 1px solid var(--accent); padding: 10px 16px; border-radius: 8px; }
.history table { width: 100%; border-collapse: collapse; } .history th, .history td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; } .history th { color: var(--mute); font-weight: 600; font-size: 12px; }
.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--panel2); } .badge.done { color: var(--accent); } .badge.failed { color: var(--bad); } .badge.pending, .badge.running { color: var(--warn); }
.empty { color: var(--mute); padding: 8px 0; }
/* ---- Discord-style preview ---- */
.discord { background: #313338; border-radius: 10px; padding: 16px; color: #dbdee1; font-family: "gg sans", "Segoe UI", system-ui, sans-serif; font-size: 15px; }
.msg { display: flex; gap: 12px; } .msg .av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); flex: none; } .msg .body { min-width: 0; flex: 1; }
.msg .name { font-weight: 600; color: #fff; } .msg .tag { background: #5865f2; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; } .msg .when { color: #949ba4; font-size: 12px; margin-left: 8px; }
.pill { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 4px; padding: 0 3px; }
.embed { position: relative; margin-top: 6px; max-width: 520px; background: #2b2d31; border-left: 4px solid var(--accent); border-radius: 4px; padding: 10px 14px 12px 12px; display: grid; gap: 6px; overflow: hidden; }
.embed .e-author { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; } .embed .e-author img { width: 22px; height: 22px; border-radius: 50%; }
.embed .e-title { font-weight: 700; color: #fff; font-size: 16px; overflow-wrap: anywhere; } .embed .e-title a { color: #00a8fc; text-decoration: none; }
.embed .e-desc { font-size: 14px; overflow-wrap: anywhere; } .embed .e-desc a, .msg .text a { color: #00a8fc; }
.embed .e-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .embed .e-field { grid-column: 1 / -1; } .embed .e-field.inline { grid-column: auto; } .e-field .fn { font-weight: 700; color: #fff; font-size: 14px; } .e-field .fv { font-size: 14px; overflow-wrap: anywhere; }
.embed .e-image { max-width: 100%; border-radius: 4px; margin-top: 4px; } .embed .e-thumb { position: absolute; top: 10px; right: 12px; width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.embed .e-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b5bac1; } .embed .e-foot img { width: 18px; height: 18px; border-radius: 50%; }
.discord code { background: #1e1f22; padding: 1px 4px; border-radius: 4px; font-size: 13px; } .discord pre { background: #1e1f22; border-radius: 4px; padding: 8px; margin: 4px 0; overflow-x: auto; } .discord pre code { padding: 0; }
.md-h1 { font-size: 1.5em; font-weight: 700; margin: 4px 0; } .md-h2 { font-size: 1.25em; font-weight: 700; margin: 4px 0; } .md-h3 { font-size: 1.1em; font-weight: 700; margin: 2px 0; } .md-sub { font-size: 12px; color: #949ba4; }
.md-quote { border-left: 4px solid #4e5058; padding-left: 10px; margin: 2px 0; } .md-gap { height: 8px; } .md-li { padding-left: 4px; }
@media (max-width: 960px) { .grid { grid-template-columns: 1fr; } .sticky { position: static; } .shell { grid-template-columns: 1fr; } .side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .row2 { grid-template-columns: 1fr; } }