/* ---------- Tokens ---------- */
:root {
  --bg: #1e1f22;
  --bg-2: #2b2d31;
  --bg-3: #313338;
  --bg-4: #383a40;
  --border: #3f4147;
  --text: #dbdee1;
  --text-muted: #949ba4;
  --text-strong: #f2f3f5;
  --brand: #5865f2;
  --brand-hover: #4752c4;
  --green: #23a559;
  --yellow: #f0b232;
  --red: #f23f43;
  --orange: #e67e22;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lvl-default: #4e5058;
  --lvl-hidden: #6b2c2f;
  --lvl-read: #4d5a8c;
  --lvl-write: #2b6b45;
  --lvl-moderate: #7a4f9c;
  --lvl-custom: #7a6a2c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; }
a { color: #00a8fc; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--text-strong); margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
code { font-family: var(--mono); font-size: .9em; background: var(--bg-4); padding: .1em .35em; border-radius: 4px; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type="text"], input[type="number"], select, textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .4rem .55rem; color: var(--text-strong); width: 100%;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
input[type="color"] { width: 2.2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: none; cursor: pointer; }
label { color: var(--text-muted); font-size: .85rem; }
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); }
.row { display: flex; gap: .5rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.right { margin-left: auto; }
.hidden { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 4px; border: none; cursor: pointer;
  background: var(--bg-4); color: var(--text-strong); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .12s;
}
.btn:hover { background: #4a4d55; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-success { background: var(--green); }
.btn-success:hover { background: #1d8b4b; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #c9333a; }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--bg-4); }
.btn-sm { padding: .3rem .6rem; font-size: .85rem; }
.btn-xs { padding: .15rem .45rem; font-size: .8rem; }
.btn-discord { background: #5865f2; padding: .7rem 1.4rem; font-size: 1rem; }
.btn-icon { padding: .25rem .4rem; background: transparent; color: var(--text-muted); }
.btn-icon:hover { color: var(--text-strong); background: var(--bg-4); }

/* ---------- Alerts & badges ---------- */
.alert { padding: .7rem .9rem; border-radius: var(--radius); margin-bottom: .75rem; border-left: 4px solid var(--border); background: var(--bg-2); }
.alert-error { border-color: var(--red); }
.alert-warn { border-color: var(--yellow); }
.alert-info { border-color: var(--brand); }
.alert-success { border-color: var(--green); }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--bg-4); color: var(--text-strong); }
.badge-green { background: var(--green); }
.badge-red { background: var(--red); }
.badge-yellow { background: var(--yellow); color: #111; }
.badge-brand { background: var(--brand); }
.badge-muted { background: var(--bg-4); color: var(--text-muted); }

/* ---------- Login / legal ---------- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.login-card { background: var(--bg-2); border-radius: 12px; padding: 2.5rem; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.login-logo { font-size: 3rem; margin-bottom: .5rem; }
.login-tagline { color: var(--text-muted); margin-bottom: 1.5rem; }
.login-features { list-style: none; padding: 0; margin: 1.5rem 0 0; text-align: left; color: var(--text-muted); font-size: .9rem; }
.login-features li::before { content: "✓ "; color: var(--green); }
.login-footer { margin-top: 1.5rem; font-size: .8rem; color: var(--text-muted); }
.lang-switch a.active { color: var(--text-strong); font-weight: 600; }
.legal-page { max-width: 780px; margin: 0 auto; padding: 2rem 1.5rem; }
.legal-back { display: inline-block; margin-bottom: 1rem; }

/* ---------- App shell ---------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-loading { padding: 3rem; text-align: center; color: var(--text-muted); }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1.2rem; background: var(--bg-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar .brand { font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: .5rem; }
.topbar .brand img { width: 24px; height: 24px; }
.topbar nav { display: flex; gap: .25rem; }
.topbar nav a { padding: .35rem .7rem; border-radius: 4px; color: var(--text-muted); }
.topbar nav a.active, .topbar nav a:hover { background: var(--bg-4); color: var(--text-strong); text-decoration: none; }
.topbar .user { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.topbar .user img { width: 28px; height: 28px; border-radius: 50%; }
.topbar select { width: auto; padding: .25rem .4rem; }
.main { flex: 1; padding: 1.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }
.main.wide { max-width: none; }
.page-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head img { width: 48px; height: 48px; border-radius: 12px; }
.page-head .title { flex: 1; min-width: 200px; }
.page-head .title h1 { margin: 0; }
.crumbs { font-size: .85rem; color: var(--text-muted); margin-bottom: .5rem; }
.crumbs a { color: var(--text-muted); }

.toast-wrap { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; }
.toast { background: var(--bg-4); color: var(--text-strong); padding: .6rem .9rem; border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.4); border-left: 4px solid var(--brand); max-width: 380px; }
.toast.error { border-color: var(--red); }
.toast.success { border-color: var(--green); }

/* ---------- Cards / grids ---------- */
.card { background: var(--bg-2); border-radius: var(--radius); padding: 1rem 1.1rem; border: 1px solid var(--border); }
.card + .card { margin-top: 1rem; }
.card h2, .card h3 { margin-bottom: .6rem; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.stat { text-align: center; min-width: 80px; }
.stat .n { font-size: 1.6rem; font-weight: 700; color: var(--text-strong); }
.stat .l { font-size: .8rem; color: var(--text-muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .9rem; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }

.server-card { display: flex; align-items: center; gap: .9rem; }
.server-card img, .server-card .icon-fallback { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; }
.server-card .icon-fallback { background: var(--bg-4); display: grid; place-items: center; font-weight: 700; color: var(--text-strong); }
.server-card .info { flex: 1; min-width: 0; }
.server-card .name { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Editor ---------- */
.editor { display: grid; grid-template-columns: 320px 1fr 320px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .editor { grid-template-columns: 1fr; } }
.editor-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-strong); }
.panel-body { padding: .6rem .8rem; }
.tree { list-style: none; margin: 0; padding: 0; }
.tree-cat { margin-bottom: .6rem; border: 1px solid transparent; border-radius: 6px; }
.tree-cat.selected { border-color: var(--brand); }
.tree-cat-head { display: flex; align-items: center; gap: .35rem; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; font-weight: 600; text-transform: uppercase; font-size: .8rem; color: var(--text-muted); }
.tree-cat-head:hover { background: var(--bg-3); color: var(--text-strong); }
.tree-cat.selected .tree-cat-head { color: var(--text-strong); }
.tree-channels { list-style: none; margin: 0; padding: 0 0 0 .6rem; min-height: 6px; }
.tree-ch { display: flex; align-items: center; gap: .35rem; padding: .25rem .4rem; border-radius: 4px; cursor: pointer; color: var(--text-muted); }
.tree-ch:hover { background: var(--bg-3); color: var(--text-strong); }
.tree-ch.selected { background: var(--bg-4); color: var(--text-strong); }
.tree-ch .ico, .tree-cat-head .ico { width: 1.1rem; text-align: center; opacity: .8; }
.tree-ch .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-ch .ovr { font-size: .7rem; color: var(--yellow); }
.drag-handle { cursor: grab; color: var(--text-muted); opacity: .5; }
.drag-handle:hover { opacity: 1; }
.sortable-ghost { opacity: .35; }
.sortable-chosen { background: var(--bg-4); }
.tree-actions { display: flex; gap: .25rem; margin-top: .4rem; }
.tree-empty { color: var(--text-muted); font-size: .85rem; padding: .3rem .4rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: .2rem; }
.check { display: flex; align-items: center; gap: .4rem; color: var(--text); font-size: .9rem; cursor: pointer; }
.check input { width: auto; }

/* Access matrix */
.matrix-wrap { overflow-x: auto; }
.matrix { border-collapse: separate; border-spacing: 3px; min-width: 100%; }
.matrix th { font-size: .75rem; color: var(--text-muted); font-weight: 600; padding: .2rem .4rem; text-align: left; white-space: nowrap; }
.matrix th.role { text-align: center; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.matrix th .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.matrix td.rowlabel { font-size: .85rem; color: var(--text-strong); white-space: nowrap; padding-right: .5rem; }
.matrix td.rowlabel.ch { padding-left: 1.2rem; color: var(--text-muted); font-weight: normal; }
.matrix tr.chrow td { opacity: .9; }
.cell { display: block; width: 100%; min-width: 86px; padding: .35rem .3rem; border-radius: 4px; border: none; cursor: pointer; font-size: .78rem; font-weight: 600; color: #fff; text-align: center; background: var(--lvl-default); transition: filter .1s; }
.cell:hover { filter: brightness(1.2); }
.cell.default { background: var(--lvl-default); color: var(--text-muted); font-weight: 500; }
.cell.hidden { background: var(--lvl-hidden); }
.cell.read { background: var(--lvl-read); }
.cell.write { background: var(--lvl-write); }
.cell.moderate { background: var(--lvl-moderate); }
.cell.custom { background: var(--lvl-custom); }
.cell.inherit { opacity: .45; font-style: italic; }
.legend { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .75rem; margin-top: .6rem; }
.legend span { display: inline-flex; align-items: center; gap: .3rem; }
.legend i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; }

/* Roles panel */
.role-list { list-style: none; margin: 0; padding: 0; }
.role-item { display: flex; align-items: center; gap: .4rem; padding: .35rem .4rem; border-radius: 4px; cursor: pointer; }
.role-item:hover { background: var(--bg-3); }
.role-item.selected { background: var(--bg-4); }
.role-item .swatch { width: .8rem; height: .8rem; border-radius: 50%; flex-shrink: 0; }
.role-item .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.role-item .preset { font-size: .7rem; color: var(--text-muted); }
.perm-group { margin-top: .5rem; }
.perm-group h4 { font-size: .8rem; color: var(--text-muted); margin: .4rem 0 .2rem; text-transform: uppercase; }
.perm-group .check { font-size: .8rem; }

/* Templates modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal { background: var(--bg-2); border-radius: 12px; max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; padding: 1.25rem; border: 1px solid var(--border); }
.modal h2 { margin-bottom: .75rem; }
.tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.tpl { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; cursor: pointer; }
.tpl:hover { border-color: var(--brand); }
.tpl .nm { font-weight: 600; color: var(--text-strong); }
.tpl .ds { font-size: .82rem; color: var(--text-muted); margin: .3rem 0; }
.tpl .st { font-size: .75rem; color: var(--text-muted); }

/* ---------- Sync preview ---------- */
.preview-list { list-style: none; margin: 0; padding: 0; }
.preview-item { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .3rem .5rem; border-radius: 4px; }
.preview-item.cat { margin-top: .5rem; font-weight: 600; text-transform: uppercase; font-size: .8rem; color: var(--text-muted); }
.preview-item.child { padding-left: 1.5rem; }
.preview-item .nm { color: var(--text-strong); }
.preview-item.cat .nm { color: var(--text-muted); }
.preview-item .ico { width: 1.1rem; text-align: center; opacity: .8; }
.preview-item .swatch { width: .8rem; height: .8rem; border-radius: 50%; flex-shrink: 0; }
.preview-item .sub { flex-basis: 100%; font-size: .8rem; color: var(--yellow); padding-left: 1.6rem; }
.preview-item.unchanged { opacity: .55; }
.preview-item.create { background: rgba(35, 165, 89, .08); }
.preview-item.update { background: rgba(240, 178, 50, .08); }
.preview-item .warn { color: var(--yellow); }

/* ---------- Sync ---------- */
.summary-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.chip { padding: .3rem .7rem; border-radius: 999px; background: var(--bg-4); font-size: .85rem; }
.chip b { color: var(--text-strong); }
.ops { list-style: none; margin: 0; padding: 0; }
.op { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; border-radius: 6px; border-left: 4px solid var(--border); background: var(--bg-3); margin-bottom: .4rem; }
.op.create { border-color: var(--green); }
.op.update { border-color: var(--yellow); }
.op.delete { border-color: var(--red); }
.op.adopt { border-color: var(--brand); }
.op.positions { border-color: var(--text-muted); }
.op .what { font-weight: 600; color: var(--text-strong); min-width: 170px; }
.op .label { color: var(--text); }
.op .detail { font-size: .82rem; color: var(--text-muted); }
.op .warn { font-size: .8rem; color: var(--yellow); }
.op .warn.red { color: var(--red); }
.progress { height: 10px; background: var(--bg-4); border-radius: 999px; overflow: hidden; margin: .5rem 0; }
.progress > div { height: 100%; background: var(--brand); transition: width .2s; }
.progress.done > div { background: var(--green); }
.progress.failed > div { background: var(--red); }
.log { font-family: var(--mono); font-size: .78rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .5rem .7rem; max-height: 320px; overflow: auto; }
.log .ok { color: var(--green); }
.log .error { color: var(--red); }
.log .retry { color: var(--yellow); }
.runs { width: 100%; border-collapse: collapse; font-size: .88rem; }
.runs th, .runs td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); }
.runs th { color: var(--text-muted); font-weight: 600; font-size: .78rem; }