/*
  THE LOOK of the dashboard. Plain CSS, no build step.

  All colors live in the variables just below (":root"). Change --accent and the
  whole site changes color. The look is flat on purpose: solid colors, no color
  fades, no glows, and only tiny hover changes (150 ms or less).

  Three colors, each with one job:
    blue   (--accent)   buttons, links, the thing you picked, focus rings
    orange (--accent-2) Plus / Premium, "new" and warnings
    red    (--danger)   delete / leave / ban, errors, locked or blocked

  Right-to-left (Arabic): instead of "left" and "right" we mostly use
  "inline-start" and "inline-end". In English inline-start = left; in Arabic
  (<html dir="rtl">) it's the right side, so the layout mirrors by itself.
  The few things that need more are in the "Arabic / right-to-left" part at the end.
*/

:root {
  --bg: #0f1115;           /* page background */
  --bg-2: #13161b;         /* sidebar */
  --card: #171a20;         /* boxes */
  --card-2: #1e222a;       /* boxes inside boxes, inputs */
  --pop: #1b1f26;          /* menus and pop-ups that open over the page */
  --border: #2a2f38;
  --border-2: #3a414d;
  --text: #e8eaed;
  --muted: #a2a9b4;        /* grey text: 7.9:1 on --bg, 7.3:1 on --card, easy to read */

  /* Blue: the main color. White text on #3b82f6 is only 3.7:1 (too weak for small text),
     so FILLED buttons use the darker --accent-fill (5.2:1) and --accent-fill-hover (6.7:1). */
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-fill: #2563eb;
  --accent-fill-hover: #1d4ed8;
  --accent-text: #60a5fa;  /* blue words and links on the dark background: 7:1 */
  --accent-soft: rgba(59, 130, 246, .14);
  --focus: #93c5fd;        /* the keyboard focus ring */

  /* Orange: Plus / Premium, "new", warnings. A filled orange button uses DARK text (white on orange is too weak). */
  --accent-2: #f97316;
  --accent-2-hover: #ea580c;
  --accent-2-text: #fb923c; /* orange words on the dark background: 7.6:1 */
  --accent-2-soft: rgba(249, 115, 22, .12);
  --on-accent-2: #1a0d02;  /* text on a filled orange button: 7.9:1 */

  /* Red: danger and errors. A filled red button uses #dc2626 (white on it: 4.8:1). */
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-text: #f87171;  /* red words on the dark background: 6.4:1 */
  --danger-soft: rgba(239, 68, 68, .12);

  --green: #22c55e;
  --discord: #5865f2;      /* Discord's own color (the "Add to Discord" button and the preview) */
  --radius: 10px;
  --sidebar-w: 264px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--card-2); padding: 1px 6px; border-radius: 6px; font-size: 0.92em; color: #bfdbfe; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
[hidden] { display: none !important; }

.i { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.w-100 { width: 100%; }

/* ───────────────────────── buttons ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-weight: 600; color: var(--text); cursor: pointer;
  background: var(--card-2); transition: background-color .12s, border-color .12s, color .12s;
  text-decoration: none !important; white-space: nowrap;
}
.btn:hover { background: #272c35; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn .i { width: 16px; height: 16px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 12px 22px; font-size: 15.5px; }
.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-primary:hover { background: var(--accent-fill-hover); }
.btn-ghost { background: transparent; border-color: var(--border-2); }
.btn-ghost:hover { background: var(--card-2); border-color: #4a5260; }
.btn-dark { background: var(--bg); border-color: var(--border); }
.btn-dark:hover { background: var(--bg-2); border-color: var(--border-2); }
/* "btn-gold" = the Premium / Plus button. It's orange now (the class name stays, so the pages don't change). */
.btn-gold { background: var(--accent-2); color: var(--on-accent-2); }
.btn-gold:hover { background: var(--accent-2-hover); }
.btn-danger { background: var(--danger-soft); border-color: rgba(239, 68, 68, .45); color: #fca5a5; }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }
.btn-discord { background: var(--discord); color: #fff; }
.btn-discord:hover { background: #4752c4; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.icon-btn { background: none; border: 0; color: var(--text); padding: 6px; border-radius: 8px; cursor: pointer; }
.icon-btn:hover { background: var(--card-2); }

/* ───────────────────────── page frame ───────────────────────── */
.demo-bar { background: var(--accent-fill); color: #fff; text-align: center; font-size: 12.5px; font-weight: 600; padding: 4px; }
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-2); border-inline-end: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 14px 12px 30px;
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.server-switch { position: relative; margin-bottom: 14px; }
.server-current {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.server-current:hover { border-color: var(--border-2); }
.server-current img, .menu-item img { width: 32px; height: 32px; border-radius: 10px; }
.server-name { flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-letter {
  width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; flex-shrink: 0;
  background: var(--accent-fill); font-weight: 700; color: #fff;
}
.server-letter.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.server-letter.lg { width: 64px; height: 64px; border-radius: 10px; font-size: 26px; }

.nav-group { margin-top: 16px; }
.nav-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9ba3af; padding: 0 10px 6px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  color: #b8bec8; font-weight: 500; text-decoration: none !important; transition: background-color .12s, color .12s;
}
.nav-link:hover { background: var(--card); color: var(--text); }
/* The page you're on: a light blue box with a solid orange line on its start edge (left; right in Arabic). */
.nav-link.active { background: var(--accent-soft); color: #fff; box-shadow: inset 3px 0 0 var(--accent-2); }
.nav-link.active .i { color: var(--accent-text); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 28px;
  border-bottom: 1px solid var(--border); background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { flex: 1; }
.brand { flex: 1; font-weight: 700; font-size: 17px; display: flex; gap: 8px; align-items: center; }
.brand-mark { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }  /* the site's icon (static/favicon.svg) */
.plan-free { font-size: 12.5px; color: var(--muted); border: 1px solid var(--border-2); padding: 3px 10px; border-radius: 99px; }
.user-box { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; padding: 5px 8px; border-radius: 10px; }
.user-btn:hover { background: var(--card); }
.user-btn img { width: 32px; height: 32px; border-radius: 50%; }

.menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; min-width: 220px;
  background: var(--pop); border: 1px solid var(--border-2); border-radius: 8px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); max-height: 60vh; overflow-y: auto;
}
.menu-right { left: auto; right: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none !important; font-weight: 500; }
.menu-item:hover, .menu-item.active { background: var(--card-2); }
.menu-item.danger { color: var(--danger-text); }

.content { padding: 30px 28px 120px; max-width: 1480px; width: 100%; margin: 0 auto; }
.page-head { padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.page-head h1 { font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.page-head.center { border: 0; text-align: center; }

.section-title { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; margin: 34px 0 16px; }
.section-title .i { width: 20px; height: 20px; color: var(--accent-text); }
.group-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9ba3af; margin: 26px 0 12px; }

.notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; margin: 12px 0;
  background: rgba(59, 130, 246, .08); border: 1px solid rgba(59, 130, 246, .25); color: #c7d7fe;
}
.notice .i { color: #93c5fd; margin-top: 2px; }
.alert { background: var(--danger-soft); border: 1px solid rgba(239, 68, 68, .45); color: #fecaca; padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; }
.empty { color: var(--muted); text-align: center; padding: 40px 10px; }

/* ───────────────────────── badges & chips ───────────────────────── */
.badge-plus {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 7px; vertical-align: middle;
  background: var(--accent-2-soft); color: var(--accent-2-text); font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}
.badge-plus .i { width: 13px; height: 13px; }
.chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 7px; }
.chip .i { width: 13px; height: 13px; }
.chip.up { color: #4ade80; background: rgba(34, 197, 94, .12); }
.chip.down { color: var(--danger-text); background: rgba(239, 68, 68, .12); }
.chip.flat { color: var(--muted); background: var(--card-2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.online { background: var(--green); }
.status-pill { padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 12.5px; }
.status-pill.on { color: #4ade80; background: rgba(34, 197, 94, .12); }
.status-pill.off { color: var(--muted); background: var(--card-2); }

/* ───────────────────────── on/off switch ───────────────────────── */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.slider { position: absolute; inset: 0; background: #3a414d; border-radius: 99px; transition: background-color .12s; }
.slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%;
  background: #fff; transition: transform .12s ease-out;
}
.switch input:checked + .slider { background: var(--accent-fill); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch.is-disabled { opacity: .45; cursor: not-allowed; }

/* ───────────────────────── Overview ───────────────────────── */
.server-hero {
  display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
}
.server-hero img { width: 64px; height: 64px; border-radius: 12px; }
.server-hero h2 { font-size: 20px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; color: var(--muted); font-weight: 500; }
.hero-stats span { display: inline-flex; align-items: center; gap: 6px; }
.hero-stats .i { width: 16px; height: 16px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card {
  position: relative; display: block; padding: 18px 18px 0; border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  text-decoration: none !important; transition: border-color .12s;
}
.stat-card:hover { border-color: var(--border-2); }
.stat-label { font-weight: 600; }
.stat-value { font-size: 26px; font-weight: 800; margin: 2px 0 6px; }
.stat-change { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.spark { display: block; width: calc(100% + 36px); margin: 14px -18px 0; height: 84px; }
.spark.big { height: 170px; width: 100%; margin: 12px 0 0; }

.plugins-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.search {
  display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 0 12px; min-width: 260px; color: var(--muted);
}
.search:focus-within { border-color: var(--accent); }
.search input { background: none; border: 0; outline: 0; color: var(--text); font: inherit; padding: 9px 0; width: 100%; }

.plugin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plugin-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 220px; padding: 18px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  transition: border-color .12s;
}
.plugin-card:hover { border-color: #4a5260; }
/* A feature that's switched off: its icon turns grey, the words stay readable. */
.plugin-card.is-off .plugin-icon { color: var(--muted); background: var(--card-2); border-color: var(--border); }
.plugin-top { display: flex; align-items: flex-start; gap: 12px; }
.plugin-icon {
  width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); border: 1px solid rgba(59, 130, 246, .25); color: var(--accent-text);
}
.plugin-icon .i { width: 21px; height: 21px; }
.plugin-icon.lg { width: 60px; height: 60px; border-radius: 10px; }
.plugin-icon.lg .i { width: 28px; height: 28px; }
.plugin-name { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 2px; }
.plugin-name h4 { font-size: 15.5px; font-weight: 700; }
.plugin-card p { margin: 0; flex: 1; color: var(--muted); font-size: 13.5px; }
.plugin-card .btn { align-self: flex-start; }

/* ───────────────────────── server picker ───────────────────────── */
.topbar-plain { position: static; }
.servers-page { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.server-card {
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border);
  padding: 26px 18px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  transition: border-color .12s;
}
.server-card:hover { border-color: #4a5260; }
/* (servers.html and app.js still add a blurred copy of the server icon here; the flat look hides it.) */
.server-card-bg { display: none; }
.server-card > *:not(.server-card-bg) { position: relative; }
.server-card-icon { width: 76px; height: 76px; border-radius: 14px; }
.server-card-icon.letter { display: grid; place-items: center; font-size: 30px; font-weight: 800; background: var(--accent-fill); color: #fff; }
.server-card-name { font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.server-card.no-bot .server-card-icon { filter: grayscale(.8); opacity: .7; }

/* ───────────────────────── login page ───────────────────────── */
.center-page { min-height: 100vh; display: grid; place-items: center; }
.hero { position: relative; text-align: center; max-width: 560px; padding: 40px 24px; }
.hero-glow { display: none; }  /* (this was a colored light; the look is flat now) */
.hero-logo { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--border-2); color: var(--accent-text); }
.hero-logo .i { width: 30px; height: 30px; }
.hero-logo.danger { color: var(--danger-text); border-color: rgba(239, 68, 68, .45); }
.hero h1 { font-size: 40px; font-weight: 800; }
.hero p { color: var(--muted); font-size: 15.5px; margin: 14px 0 28px; }
.hero .fine { font-size: 12.5px; margin-top: 18px; }
.grad { color: var(--text); }  /* (this was colored text; the class stays so older pages still look right) */

/* ───────────────────────── feature (Explore) page ───────────────────────── */
.module-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.module-title { flex: 1; }
.module-title h1 { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.module-title p { margin: 4px 0 0; color: var(--muted); }
.plus-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 18px;
  border-radius: 8px; background: var(--accent-2-soft); border: 1px solid rgba(249, 115, 22, .4); color: #fed7aa;
}
.plus-banner .i { color: var(--accent-2-text); }

.module-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.module-layout.no-preview { grid-template-columns: minmax(0, 820px); }
.steps { display: flex; flex-direction: column; gap: 12px; }
/* No overflow:hidden here: it would cut off the channel/role lists that pop out of a step. */
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .12s; }
.step.open { border-color: var(--border-2); }
.step-head {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: none; border: 0;
  color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
.step-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 700;
  background: var(--accent-soft); color: #bfdbfe; border: 1px solid rgba(59, 130, 246, .35);
}
.step.open .step-num { background: var(--accent-fill); color: #fff; border-color: transparent; }
.step-title { flex: 1; font-weight: 700; font-size: 15px; display: flex; flex-direction: column; }
.step-title small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.step-arrow { transition: transform .12s; color: var(--muted); }
.step.open .step-arrow { transform: rotate(180deg); }
.step-body { display: none; padding: 4px 18px 18px; padding-inline-start: 62px; }
.step.open .step-body { display: block; }

.field { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.04); }
.field:first-child { border-top: 0; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.field-row.inline { padding: 0; border: 0; gap: 12px; }
.field.is-locked { opacity: .6; }
.q { display: block; font-weight: 600; margin-bottom: 2px; }
.small-q { margin-bottom: 8px; }
.tip { color: var(--muted); font-size: 12.5px; margin-bottom: 8px; }
.field-row .tip { margin-bottom: 0; }

.input {
  width: 100%; background: var(--card-2); border: 1px solid var(--border); color: var(--text); font: inherit;
  padding: 10px 12px; border-radius: 8px; outline: none; transition: border-color .12s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
textarea.input { resize: vertical; min-height: 90px; }
.input-number { width: 120px; }
.number-row { display: flex; align-items: center; gap: 12px; }
.input-wrap { position: relative; }
.input-wrap .counter { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.ph-chip {
  background: var(--accent-soft); border: 1px solid rgba(59, 130, 246, .3); color: #bfdbfe; border-radius: 6px;
  padding: 2px 8px; font: 12px ui-monospace, Consolas, monospace; cursor: pointer;
}
.ph-chip:hover { background: rgba(59, 130, 246, .24); }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--card-2); border: 1px solid var(--border); padding: 4px; border-radius: 8px; }
.segmented button, .segmented a {
  background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  text-decoration: none !important;
}
.segmented button:hover, .segmented a:hover { color: var(--text); }
.segmented .active { background: var(--accent-fill); color: #fff; }
.segmented.links { margin-bottom: 18px; }

/* Channel / role pickers (built by app.js). */
.picker { position: relative; }
.picker-box {
  min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; padding-inline-end: 36px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; position: relative;
}
.picker-box:hover { border-color: var(--border-2); }
.picker.open .picker-box { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.picker-box > .i { position: absolute; inset-inline-end: 10px; color: var(--muted); }
.picker-placeholder { color: var(--muted); padding: 0 4px; }
.pill { display: inline-flex; align-items: center; gap: 5px; background: #2a303a; border-radius: 6px; padding: 3px 6px 3px 8px; font-weight: 500; font-size: 13px; }
.pill .x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 15px; line-height: 1; }
.pill .x:hover { color: var(--text); }
.pill .i { width: 14px; height: 14px; color: var(--muted); }
.role-dot { width: 10px; height: 10px; border-radius: 50%; background: #99aab5; flex-shrink: 0; }
.picker-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--pop); border: 1px solid var(--border-2);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45); overflow: hidden;
}
/* Not enough room below (near the bottom of the screen)? The list opens upwards instead. */
.picker-pop.up { top: auto; bottom: calc(100% + 6px); }
.picker-pop input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 11px 14px; color: var(--text); font: inherit; outline: none; }
.picker-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.picker-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9ba3af; padding: 8px 8px 4px; }
.picker-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.picker-opt:hover, .picker-opt.hl { background: var(--card-2); }
.picker-opt.sel { color: var(--accent-text); }
.picker-opt.sel::after { content: "✓"; margin-inline-start: auto; }
.picker-opt .i { width: 15px; height: 15px; color: var(--muted); }
.picker-none { color: var(--muted); padding: 10px; text-align: center; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; min-height: 44px; background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; align-items: center; }
.tags:focus-within { border-color: var(--accent); }
.tags input { flex: 1; min-width: 140px; background: none; border: 0; outline: 0; color: var(--text); font: inherit; padding: 4px; }
.color-row input[type=color] { width: 60px; height: 36px; border: 1px solid var(--border); background: var(--card-2); border-radius: 8px; padding: 2px; }

.cmd-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.cmd-list li { display: flex; gap: 12px; align-items: baseline; }
.cmd-list code { flex-shrink: 0; }
.cmd-list span { color: var(--muted); font-size: 13px; }

/* Live preview: a little fake Discord. */
.preview-col { position: sticky; top: 82px; }
.preview-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.preview-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.preview-head .small { margin-inline-start: auto; font-weight: 400; }
.discord { background: #313338; border-radius: 10px; padding: 6px 0; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif; color: #dbdee1; font-size: 14.5px; max-height: 70vh; overflow-y: auto; }
.d-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #949ba4; padding: 10px 14px 2px; display: flex; gap: 6px; align-items: center; }
.d-label .i { width: 13px; height: 13px; }
.d-msg { display: flex; gap: 12px; padding: 6px 14px; }
.d-msg:hover { background: #2e3035; }
.d-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.d-body { min-width: 0; flex: 1; }
.d-name { font-weight: 600; color: #f2f3f5; display: flex; align-items: center; gap: 6px; }
.d-time { font-size: 11px; color: #949ba4; font-weight: 400; }
.app-tag { background: var(--discord); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .02em; }
.d-text { white-space: pre-wrap; word-wrap: break-word; }
.d-text strong { color: #f2f3f5; }
.d-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.d-embed { display: flex; margin-top: 4px; max-width: 100%; background: #2b2d31; border-radius: 4px; border-left: 4px solid #1e1f22; padding: 10px 14px 12px 12px; gap: 12px; }
.d-embed-main { flex: 1; min-width: 0; }
.d-embed-title { font-weight: 700; color: #f2f3f5; margin-bottom: 4px; }
.d-embed img { width: 64px; height: 64px; border-radius: 6px; }
.d-empty { color: #949ba4; font-style: italic; }
.d-voice { display: flex; align-items: center; gap: 8px; margin: 4px 14px 8px; padding: 6px 8px; border-radius: 6px; color: #949ba4; font-weight: 500; }
.d-voice:hover { background: #393c41; color: #dbdee1; }

/* Auto-save note ("Saving…" / "Saved ✓" / "Couldn't save"), bottom corner of feature pages. */
.save-status {
  position: fixed; inset-inline-end: 24px; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; background: var(--pop); border: 1px solid var(--border-2); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); font-weight: 600; font-size: 13px;
}
.save-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.save-status[data-kind="saved"] { border-color: rgba(34, 197, 94, .45); }
.save-status[data-kind="saved"] .save-dot { background: var(--green); }
.save-status[data-kind="error"] { border-color: rgba(239, 68, 68, .5); color: #fecaca; padding-inline-end: 6px; }
.save-status[data-kind="error"] .save-dot { background: var(--danger); }

/* ───────────────────────── panels (Profile, Commands, ...) ───────────────────────── */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.panel-foot { display: flex; justify-content: flex-end; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--border); }

.profile-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; }
.profile-card { background: #232428; border-radius: 12px; overflow: hidden; }
.profile-banner { height: 90px; background: #2563eb; }  /* stands in for the bot's banner in the Discord profile preview */
.profile-avatar { position: relative; width: 84px; height: 84px; margin: -42px 0 0 16px; }
.profile-avatar img { width: 84px; height: 84px; border-radius: 50%; border: 6px solid #232428; background: #232428; }
.dot.big { position: absolute; right: 2px; bottom: 4px; width: 20px; height: 20px; border: 4px solid #232428; }
.profile-body { padding: 8px 16px 16px; }
.profile-name { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.profile-status { margin-top: 12px; padding: 10px 12px; background: #1b1c1f; border-radius: 8px; font-size: 13px; color: #dbdee1; }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.plan-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.plan-card.plus { border-color: rgba(249, 115, 22, .45); }
.plan-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-name { font-weight: 700; font-size: 18px; display: flex; gap: 8px; align-items: center; }
.plan-name .i { color: var(--accent-2-text); }
.plan-price { font-size: 28px; font-weight: 800; }
.checks { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; flex: 1; align-content: start; }
.checks li { display: flex; gap: 8px; align-items: flex-start; color: #cdd3db; }
.checks .i { color: var(--green); width: 16px; height: 16px; margin-top: 3px; }
.plan-tag { align-self: flex-start; padding: 3px 10px; border-radius: 6px; background: var(--accent-soft); color: #bfdbfe; font-weight: 700; font-size: 12.5px; }
.plan-tag.gold { background: var(--accent-2-soft); color: var(--accent-2-text); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .segmented.links { margin: 0; }
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-top { display: flex; justify-content: space-between; align-items: flex-start; }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; margin-top: 4px; }

.cmd-panel { padding: 16px 18px 6px; }
.cmd-panel .panel-head { margin-bottom: 4px; padding-bottom: 12px; }
.cmd-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.04); }
.cmd-row:first-of-type { border-top: 0; }
.cmd-row > div { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }

.log-list { padding: 6px 0; }
.log-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.04); }
.log-row:first-child { border-top: 0; }
.log-row img { width: 36px; height: 36px; border-radius: 50%; }
.log-main { flex: 1; min-width: 0; }
.source { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.source .i { width: 13px; height: 13px; }
.source.dashboard { background: var(--accent-soft); color: #bfdbfe; }
.source.discord { background: rgba(88, 101, 242, .14); color: #a5b0ff; }

/* ───────────────────────── pop-up messages ───────────────────────── */
#toasts { position: fixed; top: 76px; inset-inline-end: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 8px; max-width: 380px;
  background: var(--pop); border: 1px solid var(--border-2); box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font-weight: 500;
}
.toast.ok { border-color: rgba(34, 197, 94, .4); }
.toast.ok .i { color: var(--green); }
/* A problem: a red line on the start edge and a red icon. */
.toast.err { border-color: rgba(239, 68, 68, .55); box-shadow: inset 3px 0 0 var(--danger), 0 8px 24px rgba(0,0,0,.45); }
.toast.err .i { color: var(--danger-text); }
.toast.bye { opacity: 0; transition: opacity .15s; }

/* ───────────────────────── phones and small screens ───────────────────────── */
.only-mobile { display: none; }
@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .plugin-grid { grid-template-columns: repeat(2, 1fr); }
  .module-layout { grid-template-columns: 1fr; }
  .preview-col { position: static; }
}
@media (max-width: 860px) {
  .only-mobile { display: inline-flex; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .15s ease-out; box-shadow: 8px 0 24px rgba(0,0,0,.45); }
  .sidebar.open { transform: none; }
  .content { padding: 22px 16px 120px; }
  .topbar { padding: 0 16px; }
  .plugin-grid, .chart-grid, .plan-grid, .profile-layout { grid-template-columns: 1fr; }
  .step-body { padding-inline-start: 18px; }
  .save-status { inset-inline-end: 16px; bottom: 16px; }
  .user-btn span { display: none; }
  .search { min-width: 0; width: 100%; }
}
@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 22px; }
  .hero h1 { font-size: 30px; }
  .log-row { flex-wrap: wrap; }
  .row-item { flex-wrap: wrap; }  /* on phones, buttons drop under the text instead of squashing it */
  .row-main { flex-basis: 100%; }
}
.chart-tip { z-index: 5; }

/* Step numbers count themselves (1, 2, 3...) so steps can be added anywhere. */
.steps { counter-reset: step; }
.step-num::before { counter-increment: step; content: counter(step); }

/* ───────────────────────── Manage sections (lists) ───────────────────────── */
.rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.row-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--border);
}
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-main .muted { overflow: hidden; text-overflow: ellipsis; }
.icon-btn.danger { color: var(--danger-text); }
.icon-btn.danger:hover { background: rgba(239, 68, 68, .12); }
.sub-form { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--border-2); }
.inline-form { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: end; }
.inline-form .field { border: 0; padding: 0; }
.inline-form .btn { margin-bottom: 2px; }
.avatar-sm { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.big-emoji { font-size: 20px; }
.level-badge { background: var(--accent-soft); color: #bfdbfe; font-weight: 700; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; }
.rank { display: inline-block; min-width: 28px; font-weight: 800; color: var(--accent-text); }
.q-input { margin-top: 6px; }
.q-list { margin: 4px 0 0; padding-inline-start: 18px; }
.w-auto { width: auto; }
details.row-item { display: block; }
details.row-item summary { cursor: pointer; list-style: none; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
details.row-item summary .status-pill { margin-inline-start: auto; }
.qa { padding: 8px 0 0; padding-inline-start: 30px; }
form .btn[type=submit] { margin-top: 10px; }
#eb-mode { margin-bottom: 12px; }
.eb-button { flex-wrap: wrap; }
.eb-button .input { flex: 1; min-width: 140px; }
.eb-button .picker { flex: 1; min-width: 180px; }
.d-embed-author { font-size: 13px; font-weight: 600; color: #f2f3f5; margin-bottom: 4px; }
.d-embed-footer { font-size: 12px; color: #b5bac1; margin-top: 8px; }
.d-embed .d-embed-image { width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 6px; margin-top: 10px; }
.d-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.d-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 4px; font-size: 14px; font-weight: 500; color: #fff; }
.d-btn .i { width: 13px; height: 13px; }
.d-btn.blue { background: #5865f2; }
.d-btn.grey { background: #4e5058; }
.d-btn.green { background: #248046; }
.d-btn.red { background: #da373c; }
@media (max-width: 860px) { .inline-form { grid-template-columns: 1fr; } }

/* ───────────────────────── Bot updates page ───────────────────────── */
.servers-page.narrow { max-width: 760px; }
.upd-log {
  white-space: pre-wrap; font-size: 12px; background: var(--card-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; max-height: 260px; overflow: auto; color: var(--muted);
}
a.brand { color: inherit; text-decoration: none; }

/* A button that's working: a small spinning circle replaces its icon. */
.btn.busy { pointer-events: none; opacity: .75; }
.btn.busy .i { display: none; }
.btn.busy::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor;
  border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────── search box in the top bar ───────────────────────── */
.topsearch { position: relative; flex: 0 1 420px; min-width: 0; }
.topsearch .search { min-width: 0; width: 100%; }
.search kbd {
  font: 11px ui-monospace, Consolas, monospace; color: var(--muted); border: 1px solid var(--border-2);
  border-radius: 6px; padding: 1px 6px; flex-shrink: 0;
}
.search-results {
  position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 55; padding: 6px; min-width: 280px;
  background: var(--pop); border: 1px solid var(--border-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.search-hit {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--text);
  text-decoration: none !important;
}
.search-hit:hover, .search-hit.sel { background: var(--card-2); }
.search-hit.sel { box-shadow: inset 0 0 0 1px var(--accent); }
.search-hit .i { color: var(--accent-text); }
.search-hit span { display: flex; flex-direction: column; min-width: 0; }
.search-hit b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A setting found with the search box gets a light blue box with a blue line on its start edge
   (no glow, no animation). A setting the server refused gets a red edge. */
.field { border-radius: 8px; }
.field.flash { background: rgba(59, 130, 246, .08); box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .field.flash { box-shadow: inset -3px 0 0 var(--accent); }
.field.has-error .input, .field.has-error .picker-box, .field.has-error .tags, .field.has-error .segmented {
  border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger);
}
.field.has-error .q { color: #fca5a5; }

/* ───────────────────────── orange "missing permissions" warning ───────────────────────── */
.warn-banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: 8px;
  background: var(--accent-2-soft); border: 1px solid rgba(249, 115, 22, .45); color: #fed7aa;
}
.warn-banner > .i { color: var(--accent-2-text); margin-top: 2px; width: 20px; height: 20px; }
.warn-banner ul { margin: 6px 0 8px; padding-inline-start: 20px; }
.warn-banner li { margin: 2px 0; }
.warn-banner a { color: #fdba74; font-weight: 600; }
.warn-banner .small { color: #fbd5b5; }

/* ───────────────────────── feature page extras ───────────────────────── */
.module-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Under a message box: Variables, Test, and the length counter. */
.msg-tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.msg-tools .char-count { margin-inline-start: auto; }
.vars { position: relative; }
.vars-pop {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 35; width: min(360px, 80vw); padding: 6px;
  background: var(--pop); border: 1px solid var(--border-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.vars-title { font-size: 12px; color: var(--muted); padding: 4px 8px 6px; }
.vars-item {
  width: 100%; display: flex; align-items: baseline; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  background: none; border: 0; color: var(--text); font: inherit; text-align: start;
}
.vars-item:hover, .vars-item:focus-visible { background: var(--card-2); outline: none; }
.vars-item code { flex-shrink: 0; direction: ltr; }
.vars-item span { color: var(--muted); font-size: 13px; }

/* "Refresh list" at the bottom of a channel/role list. */
.picker-refresh {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--border); color: var(--muted); font: inherit; font-size: 12.5px;
}
.picker-refresh:hover { color: var(--text); background: var(--card-2); }
.picker-refresh .i { width: 14px; height: 14px; }

/* ───────────────────────── language switch (user menu) ───────────────────────── */
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-label { display: flex; align-items: center; gap: 8px; padding: 4px 10px; color: var(--muted); font-size: 12px; font-weight: 600; }
.menu-label .i { width: 15px; height: 15px; }
.lang-switch { display: flex; gap: 4px; padding: 2px 6px 4px; }
.lang-switch a {
  flex: 1; text-align: center; padding: 6px 8px; border-radius: 8px; color: var(--muted); font-weight: 600;
  background: var(--card-2); text-decoration: none !important;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a.active { background: var(--accent-fill); color: #fff; }
.lang-links a { color: var(--muted); }

@media (max-width: 860px) {
  .search kbd { display: none; }
  .topsearch { flex: 1 1 auto; }
  .topbar-title { flex: 0 0 auto; }
  .topbar .plan-free { display: none; }  /* not enough room on phones; it's in the sidebar menu too */
  .module-head { flex-wrap: wrap; }
  .module-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 520px) {
  .module-actions .btn span { display: none; }  /* just the ↻ icon on small phones */
}

/* ───────────────────────── Phase 5: community ───────────────────────── */
.text-danger { color: var(--danger-text); }
.big-emoji { font-size: 18px; }
.poll-row { display: grid; grid-template-columns: minmax(80px, 180px) 1fr auto; align-items: center; gap: 10px; margin-top: 6px; }
.poll-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.poll-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.lb-page.rules-page { max-width: 760px; }
.rules-card { padding: 26px 28px; }
.rules-card h2 { font-size: 22px; margin-bottom: 8px; overflow-wrap: anywhere; }
.rules-list { margin: 18px 0 0; padding-inline-start: 22px; display: grid; gap: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.rules-list li::marker { color: var(--accent-text); font-weight: 800; }
.rules-card code { background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 6px; }
.rules-card a { color: var(--accent-text); }
@media (max-width: 600px) { .poll-row { grid-template-columns: 1fr auto; } .poll-row .poll-bar { grid-column: 1 / -1; grid-row: 2; } .rules-card { padding: 18px 16px; } }

/* ───────────────────────── Arabic / right-to-left ───────────────────────── */
/* Arabic letters join together, so extra letter spacing would break the words apart. */
html[lang="ar"] body { font-family: "Poppins", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 1.65; }
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] .page-head h1 { text-transform: none; }

/* Arrows that point "forward" (Explore →) point the other way. */
[dir="rtl"] .i.flip, [dir="rtl"] .dir-arrow { transform: scaleX(-1); display: inline-block; }
/* The orange line on the active sidebar link sits on the right edge. */
[dir="rtl"] .nav-link.active { box-shadow: inset -3px 0 0 var(--accent-2); }
[dir="rtl"] .menu-right { left: 0; right: auto; }
[dir="rtl"] .switch input:checked + .slider::before { transform: translateX(-20px); }
[dir="rtl"] .slider::before { left: auto; right: 3px; }
[dir="rtl"] .toast.err { box-shadow: inset -3px 0 0 var(--danger), 0 8px 24px rgba(0,0,0,.45); }

/* Discord itself is always left-to-right, so the live preview stays that way.
   "plaintext" lets each line of a message (English or Arabic) line up on its own correct side. */
[dir="rtl"] .discord, [dir="rtl"] #eb-preview { direction: ltr; text-align: left; }
.d-text, .d-embed-title, .input, .tags input { unicode-bidi: plaintext; }
/* "@Bro" stays "@Bro" even inside an Arabic sentence. */
.d-mention { unicode-bidi: isolate; direction: ltr; }
/* Charts read left (old) to right (today) in every language. */
.spark, .chart-axis { direction: ltr; }

@media (max-width: 860px) {
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); box-shadow: -8px 0 24px rgba(0,0,0,.45); }
  [dir="rtl"] .sidebar.open { transform: none; }
}

/* ───────────────────────── Tickets page (extras/tickets.html) ───────────────────────── */
.input-time { width: 140px; }
.pic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 8px; }
.pic-card { background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pic-preview { width: 100%; max-height: 150px; object-fit: contain; border-radius: 8px; background: #0c0e12; }
.pic-empty { display: flex; align-items: center; justify-content: center; gap: 8px; height: 90px; border: 1px dashed var(--border-2); border-radius: 8px; color: var(--muted); }
.pic-form { display: flex; flex-direction: column; gap: 8px; }
.pic-form .btn[type=submit] { margin-top: 0; }
input[type=file].input { padding: 7px; color: var(--muted); cursor: pointer; }
/* The "Choose file" button inside a file box: looks like our ghost buttons instead of the plain browser one. */
input[type=file].input::file-selector-button {
  font: inherit; font-weight: 600; font-size: 13px; color: var(--text); cursor: pointer;
  background: var(--card); border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 12px; margin-inline-end: 10px;
  transition: background-color .12s;
}
input[type=file].input::file-selector-button:hover { background: var(--bg-2); border-color: var(--accent); }
/* Date boxes: dark calendar pop-up, and the little calendar icon light instead of black. */
input[type=date].input { color-scheme: dark; min-height: 42px; }
input[type=date].input::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }
/* Placeholder ("e.g. ...", "Search...") text: readable, but still lighter than what you typed. */
.input::placeholder, .search input::placeholder { color: #8b929d; opacity: 1; }
.cat-thumb { width: 54px; height: 38px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.cmd-item .alias-input { width: 220px; flex-shrink: 0; }
.tk-search { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: end; margin-bottom: 8px; }
.date-box { display: flex; flex-direction: column; gap: 2px; }
#tk-results.busy { opacity: .5; }
#tk-results .btn { flex-shrink: 0; }
.tk-stats .stat-card { padding-bottom: 14px; }
.tk-stats .stat-value { font-size: 22px; }
.tk-chart { margin: 14px 0; }
.tk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.bar-name { width: 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { flex: 1; height: 8px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
@media (max-width: 860px) {
  .pic-grid, .tk-two, .tk-search { grid-template-columns: 1fr; }
  .cmd-item .alias-input { width: 100%; }
}

/* ───────────────────────── Phase 3: picture cards (rank card, welcome picture) ───────────────────────── */
/* The live picture sits on Discord's own dark grey, so see-through corners look like they will in Discord. */
.card-stage {
  position: relative; border-radius: 10px; padding: 10px; margin: 6px 0 14px;
  background: #313338;
  border: 1px solid var(--border);
}
.card-preview { display: block; width: 100%; height: auto; border-radius: 8px; transition: opacity .12s; }
.card-stage.rank .card-preview { aspect-ratio: 934 / 282; }
.card-stage.welcome .card-preview { aspect-ratio: 1024 / 450; }
.card-stage.busy .card-preview { opacity: .55; }
.card-busy {
  display: none; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; border: 3px solid var(--focus); border-right-color: transparent; animation: spin .7s linear infinite;
}
.card-stage.busy .card-busy { display: block; }
.designer-bg { margin-top: 4px; }
.designer-bg .pic-preview { max-height: 120px; object-fit: cover; }
/* In the Discord preview: the picture under the message / inside the embed. */
.d-card { display: block; width: 100%; max-width: 440px; height: auto; border-radius: 8px; margin-top: 8px; min-height: 40px; background: #2b2d31; }
.d-embed img.d-card { width: 100%; height: auto; border-radius: 6px; }

/* XP boosters and events (Levels page) */
.boost-badge { display: inline-block; font-weight: 800; font-size: 12.5px; padding: 2px 9px; border-radius: 6px; margin-inline-start: 6px;
  color: #fdba74; background: var(--accent-2-soft); border: 1px solid rgba(249, 115, 22, .35); }
.boost-badge.slow { color: #93c5fd; background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .3); }
.boost-gap { margin-top: 20px; }
.boost-form { grid-template-columns: 1fr 170px auto; }
.event-live {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 8px; border-radius: 8px;
  background: var(--card-2); border: 1px solid rgba(249, 115, 22, .45);
}
.event-glow { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-2); color: var(--on-accent-2); }
.event-form { display: grid; grid-template-columns: auto 220px auto; gap: 12px; align-items: end; }
.event-form .field { border: 0; padding: 0; }
.link-row { display: flex; gap: 8px; align-items: center; }
.link-row .input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
@media (max-width: 860px) {
  .boost-form, .event-form { grid-template-columns: 1fr; }
  .link-row { flex-wrap: wrap; }
  .link-row .input { flex-basis: 100%; }
}

/* ───────────────────────── Phase 3: the public leaderboard page ───────────────────────── */
.lb-page { position: relative; max-width: 980px; margin: 0 auto; padding: 44px 20px 60px; }
.lb-glow { display: none; }  /* (this was a colored light behind the page; the look is flat now) */
.lb-head { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.lb-server-icon { width: 84px; height: 84px; border-radius: 14px; flex-shrink: 0; }
.lb-server-icon.letter { display: grid; place-items: center; font-size: 34px; font-weight: 800; background: var(--accent-fill); color: #fff; }
.lb-title { min-width: 0; }
.lb-kicker { display: flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.lb-kicker .i { width: 15px; height: 15px; }
.lb-title h1 { font-size: 32px; font-weight: 800; overflow-wrap: anywhere; }
.lb-stats { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); margin-top: 6px; font-weight: 500; }
.lb-stats span { display: inline-flex; align-items: center; gap: 6px; }
.lb-stats .i { width: 16px; height: 16px; }
.lb-search { display: flex; gap: 10px; margin-bottom: 8px; }
.lb-search .search { flex: 1; min-width: 0; }
.lb-search .btn[type=submit] { margin-top: 0; }
.lb-found { margin: 4px 0 14px; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0 18px; align-items: end; }
.podium-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0;
  padding: 22px 16px 18px; border-radius: 10px; background: var(--card); border: 1px solid var(--border);
}
.podium-card.place-1 { order: 2; padding-top: 30px; border-color: rgba(249, 115, 22, .55); }
.podium-card.place-2 { order: 1; border-color: rgba(203, 213, 225, .35); }
.podium-card.place-3 { order: 3; border-color: rgba(180, 120, 70, .5); }
/* The place number (1, 2, 3) in a small square on the top edge of the card. */
.podium-medal { position: absolute; top: -14px; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: var(--card-2); border: 1px solid var(--border-2); color: var(--text); }
.place-1 .podium-medal { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent-2); }
.podium-name { font-weight: 700; font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-level { color: var(--accent-text); font-weight: 700; font-size: 13px; }
.podium-card .lb-bar { width: 100%; }

.lb-avatar { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: hsl(var(--hue) 45% 42%); }
.lb-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-letter { font-weight: 800; color: #fff; }
.lb-avatar.xl { width: 84px; height: 84px; font-size: 30px; border: 2px solid var(--border-2); }
.place-1 .lb-avatar.xl { width: 96px; height: 96px; border-color: var(--accent-2); }

.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: grid; grid-template-columns: 56px 44px minmax(0, 1fr) minmax(140px, 240px) 90px; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); transition: border-color .12s; }
.lb-row:hover { border-color: var(--border-2); }
.lb-row.top { border-color: rgba(249, 115, 22, .35); }
.lb-pos { font-weight: 800; font-size: 17px; color: var(--accent-text); }
.lb-who { display: flex; flex-direction: column; min-width: 0; }
.lb-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-progress-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.lb-bar { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.lb-bar span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.lb-xp { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.lb-pages { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 22px 0 6px; }
.i.back { transform: scaleX(-1); }
[dir="rtl"] .i.back { transform: none; }
.lb-page .fine { font-size: 12.5px; margin-top: 26px; }

@media (max-width: 720px) {
  .lb-page { padding: 26px 16px 50px; }
  .lb-head { gap: 14px; }
  .lb-server-icon { width: 60px; height: 60px; border-radius: 12px; }
  .lb-title h1 { font-size: 24px; }
  .podium { grid-template-columns: 1fr; }
  .podium-card.place-1, .podium-card.place-2, .podium-card.place-3 { order: 0; }
  .lb-row { grid-template-columns: 40px 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .lb-avatar { width: 40px; height: 40px; }
  .lb-progress { grid-column: 1 / -1; grid-row: 2; }
  .lb-xp { grid-column: 4; grid-row: 1; }
  .lb-pos { font-size: 15px; }
}

/* ───────── Phase 4: moderation & safety ───────── */
/* Cases (Moderation page) */
.case-stats { margin-bottom: 14px; }
.case-no { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--accent-text); }
.case-item { cursor: pointer; }
.case-item:hover, .case-item:focus-visible { border-color: var(--border-2); outline: none; }
.case-detail { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-2); display: flex; flex-direction: column; gap: 8px; cursor: default; }
.case-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.case-reason-form { display: flex; gap: 8px; }
.case-reason-form .input { flex: 1; min-width: 0; }
[dir="rtl"] .case-pages .i:not(.back) { transform: scaleX(-1); }
#case-results.busy { opacity: .6; }
/* Appeals */
.appeal-item .row-main { min-width: 0; }
.appeal-qa { display: grid; gap: 2px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--card-2); overflow-wrap: anywhere; }
.appeal-qa .small-q { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.appeal-qa .small-q:first-child { margin-top: 0; }
.appeal-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.deny-form { display: flex; gap: 8px; flex: 1; min-width: 240px; margin: 0; }
.deny-form .input { flex: 1; min-width: 0; padding-block: 7px; }
/* Automod rules (Protection page) */
.rule-item.is-off .row-main { opacity: .55; }
.lockdown-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 16px; border-radius: var(--radius);
  border: 1px solid rgba(239, 68, 68, .55); background: var(--card); }
.lockdown-glow { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: rgba(239, 68, 68, .16); color: #fca5a5; flex-shrink: 0; }
.lockdown-banner .row-main { flex: 1; min-width: 200px; }
.lockdown-end { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; flex-wrap: wrap; }
/* Verification */
.captcha-preview { margin-top: 14px; }
.captcha-row { display: flex; gap: 14px; flex-wrap: wrap; }
.captcha-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px; border-radius: 12px; background: #313338; color: #dbdee1; }
.captcha-img { width: 300px; max-width: 100%; height: auto; border-radius: 6px; }
.captcha-emoji { display: flex; gap: 6px; flex-wrap: wrap; }
.captcha-emoji .d-btn { font-size: 18px; padding: 4px 12px; }
/* Logs quick setup */
.plan-list { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.plan-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-list .plan-child { padding-inline-start: 22px; }
/* The public appeal page */
.appeal-page { max-width: 640px; }
.appeal-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.appeal-intro { margin: 0; white-space: pre-line; }
.appeal-status { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); }
.appeal-status.denied, .appeal-status.ban { border-color: rgba(239, 68, 68, .4); }
.appeal-status.accepted { border-color: rgba(34, 197, 94, .4); }
.appeal-status.pending, .appeal-status.timeout { border-color: rgba(249, 115, 22, .45); }
/* The icon at the start of the appeal status box (a gavel for a ban, a clock for a timeout). */
.appeal-big { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; background: var(--card); color: var(--accent-2-text); }
.appeal-big .i { width: 22px; height: 22px; }
.appeal-status.ban .appeal-big, .appeal-status.denied .appeal-big { color: var(--danger-text); }
.appeal-form { display: flex; flex-direction: column; gap: 8px; }
.appeal-form .btn { align-self: flex-start; margin-top: 6px; }
.appeal-card .fine { margin: 0; font-size: 12.5px; }
@media (max-width: 520px) {
  .lockdown-end { margin-inline-start: 0; width: 100%; justify-content: space-between; }
  .stat-grid.case-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .deny-form { min-width: 0; width: 100%; }
  .case-reason-form { flex-direction: column; }
  .appeal-card { padding: 16px; }
}

/* ───────────────────────── Phase 7: owner Admin page ───────────────────────── */
.admin-page { max-width: 1100px; }
.admin-stats { margin-bottom: 18px; }
.admin-stats .stat-card { padding-bottom: 16px; }
.admin-stats .stat-card:hover { transform: none; }
.small-value { font-size: 15px; margin: 8px 0; }
.admin-mini { line-height: 1.6; }
.admin-search { max-width: 260px; }
.admin-server { gap: 14px; }
.admin-icon { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; object-fit: cover; }
.admin-icon.letter { display: grid; place-items: center; background: var(--card-2); font-weight: 800; color: var(--accent-text); }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.admin-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; padding: 6px 0 10px; }
.admin-form .q { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.admin-form .grow { flex: 1; min-width: 220px; }
.admin-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.admin-errors { max-height: 360px; overflow: auto; white-space: pre-wrap; }
.badge-owner { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  color: #fdba74; background: var(--accent-2-soft); }
.owner-view { margin-bottom: 16px; border-color: rgba(249, 115, 22, .45); background: var(--accent-2-soft); color: #fed7aa; }
.owner-view .i { color: var(--accent-2-text); }
.confirm-box { background: var(--pop); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 20px; width: min(440px, calc(100vw - 32px)); }
.confirm-box::backdrop { background: rgba(0, 0, 0, .6); }
.confirm-box h3 { margin: 0 0 6px; }
.confirm-box .input { width: 100%; margin: 6px 0 4px; }
@media (max-width: 760px) {
  .admin-actions { margin-inline-start: 0; width: 100%; }
  .admin-search { max-width: none; width: 100%; }
}

/* ───────────────────────── Phase 8: owner Admin extras ───────────────────────── */
/* The "Info" box that drops open under a server row (member count + channels). */
.admin-info { flex-basis: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--border); }
.admin-info-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; color: var(--muted); font-weight: 600; font-size: 13px; }
.admin-info-stats span { display: inline-flex; align-items: center; gap: 6px; }
.admin-info-stats .i { width: 15px; height: 15px; }
.admin-info-chans { display: flex; flex-wrap: wrap; gap: 6px; }
/* The send-message textarea should sit on its own line, full width. */
#sm-text { min-height: 72px; }

/* The three buttons under each saved transcript in the search results. */
.tk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }

/* ───────────────────────── Phase 8: the public ticket transcript page ───────────────────────── */
.tr-page { position: relative; max-width: 860px; margin: 0 auto; padding: 44px 20px 60px; }
.tr-head { margin-bottom: 22px; }
.tr-head-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.tr-server-icon { width: 72px; height: 72px; border-radius: 14px; flex-shrink: 0; object-fit: cover; }
.tr-server-icon.letter { display: grid; place-items: center; font-size: 30px; font-weight: 800; background: var(--accent-fill); color: #fff; }
.tr-title { min-width: 0; }
.tr-title h1 { font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.tr-title h1 .muted { font-weight: 600; font-size: 20px; }
.tr-guild { color: var(--muted); font-weight: 600; margin-top: 2px; }
/* The ticket "facts" grid (opened by, dates, reason...). */
.tr-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; margin: 0;
  padding: 16px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.tr-meta div { min-width: 0; }
.tr-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9ba3af; }
.tr-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* The conversation, drawn to look like Discord. */
.tr-chat { background: #313338; border-radius: var(--radius); padding: 10px 2px; color: #dbdee1;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
[dir="rtl"] .tr-chat { direction: ltr; text-align: left; }  /* Discord is always left-to-right */
.tr-msg { display: flex; gap: 14px; padding: 7px 16px; }
.tr-msg:hover { background: #2e3035; }
.tr-avatar { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0; margin-top: 2px; overflow: hidden; background: hsl(var(--hue) 45% 42%); }
.tr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tr-letter { font-weight: 800; color: #fff; }
.tr-body { min-width: 0; flex: 1; }
.tr-who { font-weight: 600; color: #f2f3f5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-time { font-size: 11px; color: #949ba4; font-weight: 400; }
.tr-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.tr-embed { margin-top: 5px; max-width: 520px; background: #2b2d31; border-radius: 4px; border-left: 4px solid #1e1f22; padding: 9px 13px; }
.tr-embed-title { font-weight: 700; color: #f2f3f5; margin-bottom: 3px; overflow-wrap: anywhere; }
.tr-embed-desc { white-space: pre-wrap; overflow-wrap: anywhere; color: #dbdee1; }
.tr-att { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; color: #00a8fc; }
.tr-att .i { width: 15px; height: 15px; }
.tr-att-img { display: block; margin-top: 6px; }
.tr-att-img img { max-width: min(400px, 100%); height: auto; border-radius: 8px; }
.tr-fallback { white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px 16px; margin: 0; color: #dbdee1; font: 13px ui-monospace, Consolas, monospace; }
.tr-foot { text-align: center; margin-top: 22px; }
@media (max-width: 720px) {
  .tr-page { padding: 26px 16px 50px; }
  .tr-head-top { gap: 14px; }
  .tr-server-icon { width: 56px; height: 56px; border-radius: 12px; }
  .tr-title h1 { font-size: 22px; }
  .tr-title h1 .muted { font-size: 16px; }
  .tr-msg { gap: 10px; padding: 7px 12px; }
}

/* ───────────────────────── phones: final polish (≤430px) ───────────────────────── */
@media (max-width: 480px) {
  /* Tap targets: every button at least 40px tall, comfortable to press. */
  .btn, .btn-sm, .icon-btn, .switch { min-height: 40px; }
  .btn-sm { padding-top: 8px; padding-bottom: 8px; }
  .icon-btn { min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
  /* Buttons that sit in a row: let them stretch so they're easy to hit. */
  .admin-actions .btn, .tk-actions .btn { flex: 1 1 auto; }
  /* The transcript facts stack to one column. */
  .tr-meta { grid-template-columns: 1fr; padding: 14px; }
  /* Pop-up menus never run off-screen. */
  .menu { min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
  /* The confirm pop-up's buttons are full width and easy to tap. */
  .confirm-box .panel-foot { flex-wrap: wrap; }
  .confirm-box .panel-foot .btn { flex: 1 1 auto; }
}
/* A guard against sideways scrolling on the public pages (long links, wide content). */
.lb-page, .tr-page, .servers-page { overflow-x: hidden; }

/* ───────────────────────── the welcome page ("/", templates/landing.html) ───────────────────────── */
html:has(body.landing-body) { scroll-behavior: smooth; }  /* "Features" / "Plus" links glide down */
.land { position: relative; min-height: 100vh; display: flex; flex-direction: column; }

/* Top bar */
.land-nav {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 12px 28px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.land-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); font-weight: 800; font-size: 17px; text-decoration: none !important; }
.land-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.land-links { display: flex; gap: 4px; margin-inline-start: 14px; }
.land-links a, .land-lang {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px;
  color: var(--muted); font-weight: 500; text-decoration: none !important; transition: color .12s, background-color .12s;
}
.land-links a:hover, .land-lang:hover { color: var(--text); background: var(--card-2); }
.land-lang .i { width: 16px; height: 16px; }
.land-nav-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.land-me img { width: 22px; height: 22px; border-radius: 50%; margin-inline-start: -4px; }

/* The bot's avatar: a colored letter, with the real picture on top when it loads. */
.land-face {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 50%;
  background: var(--accent-fill); color: #fff; font-weight: 800;
}
.land-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.land-face.sm { width: 32px; height: 32px; font-size: 14px; }
.land-face.xl { width: 80px; height: 80px; font-size: 34px; margin-bottom: 18px; border: 1px solid var(--border-2); }

/* Hero: the bot's name, one plain sentence of what it does, and the two buttons. */
.landing { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px 40px; flex: 1; }
.land-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 0 40px; }
.land-hero h1 { font-size: clamp(34px, 6vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.land-pitch { max-width: 640px; margin: 14px auto 28px; color: #c3c8d0; font-size: 18px; line-height: 1.55; }
.land-hero .alert { margin: -8px 0 22px; }
.land-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.land-fine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; margin: 22px 0 0; color: var(--muted); font-size: 13px; }
.land-fine span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.land-fine .i { width: 15px; height: 15px; color: var(--green); }

/* Numbers strip: real numbers from the bot's own server list (landing.py bot_numbers). Hidden when there are none. */
.land-stats {
  display: flex; flex-wrap: wrap; gap: 1px; max-width: 860px; margin: 0 auto; overflow: hidden;
  background: var(--border); border: 1px solid var(--border); border-radius: 10px;
}
.land-stats div { flex: 1 1 150px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 14px; background: var(--card); }
.land-stats b { font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--text); }
.land-stats span { color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }

/* Sections */
.land-section { padding: 72px 0 0; scroll-margin-top: 64px; }
.land-head { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.land-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--accent-text); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.land-eyebrow .i { width: 15px; height: 15px; }
.land-eyebrow.gold { color: var(--accent-2-text); }
.land-head h2 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 800; letter-spacing: -.01em; }
.land-head h2, .land-final h2, .land-pitch { text-wrap: balance; }
.land-head p { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; }

/* Feature categories: newspaper columns, so a short category doesn't leave a big empty box next to a long one. */
.land-cats { columns: 3; column-gap: 18px; }
.land-cats > .land-cat { break-inside: avoid; margin-bottom: 18px; }
.land-cat, .land-steps li, .land-plan {
  position: relative; border-radius: 10px; border: 1px solid var(--border); background: var(--card);
  transition: border-color .12s;
}
.land-cat { padding: 18px; }
.land-cat:hover, .land-steps li:hover { border-color: var(--border-2); }
.land-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.land-cat-head h3 { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
.land-cat-icon {
  width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); border: 1px solid rgba(59, 130, 246, .3); color: var(--accent-text);
}
.land-cat-icon .i { width: 20px; height: 20px; }
.land-count { min-width: 28px; height: 22px; padding: 0 8px; border-radius: 6px; display: grid; place-items: center; background: var(--card-2); color: var(--muted); font-weight: 700; font-size: 12px; }
.land-feats { list-style: none; padding: 0; margin: 0 -8px; display: grid; gap: 2px; }
.land-feats li { display: flex; align-items: flex-start; gap: 12px; padding: 8px; border-radius: 6px; transition: background-color .12s; }
.land-feats li:hover { background: rgba(255, 255, 255, .03); }
.land-feat-icon {
  width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--card-2); border: 1px solid var(--border); color: var(--accent-text);
}
.land-feat-icon .i { width: 16px; height: 16px; }
.land-feat-icon.gold { color: var(--accent-2-text); background: var(--accent-2-soft); border-color: rgba(249, 115, 22, .3); }
.land-feats li > div { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.land-feats b { font-weight: 600; font-size: 14px; }
.land-feats li > div > span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* How it works */
.land-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.land-steps li { padding: 22px; }
.land-step-num {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--accent-fill); color: #fff; font-weight: 800; font-size: 15px;
}
.land-steps h3 { font-size: 16px; margin-bottom: 6px; }
.land-steps p { margin: 0; color: var(--muted); }

/* Free and Plus */
.land-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 18px; max-width: 940px; margin: 0 auto; align-items: start; }
.land-plan { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.land-plan.plus { border-color: rgba(249, 115, 22, .45); }
.land-plan .checks { flex: none; }
.land-plan-sub { margin: 0 0 2px; }
.land-feats.perks { margin-bottom: 8px; }

/* Last call + footer */
.land-final {
  max-width: 940px; margin: 80px auto 10px; padding: 40px 24px; text-align: center; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
}
.land-final h2 { font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; }
.land-final p { margin: 10px 0 24px; color: var(--muted); }
.land-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 50px; padding: 26px 28px 34px; border-top: 1px solid var(--border); }
.land-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.land-foot-links a { color: var(--muted); }
.land-foot-links a:hover { color: var(--text); text-decoration: none; }
.land-foot p { width: 100%; margin: 0; }

@media (max-width: 960px) {
  .land-cats { columns: 2; }
  .land-steps, .land-plans { grid-template-columns: minmax(0, 1fr); }
  .land-plans { max-width: 560px; }
}
@media (max-width: 720px) {
  .land-nav { padding: 10px 16px; gap: 10px; }
  .land-links { display: none; }
  .landing { padding: 0 16px 30px; }
  .land-hero { padding: 40px 0 28px; }
  .land-face.xl { width: 64px; height: 64px; font-size: 28px; }
  .land-pitch { font-size: 16px; }
  .land-cta { width: 100%; }
  .land-cta .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .land-cats { columns: 1; }
  .land-section { padding-top: 56px; }
  .land-final { margin-top: 60px; padding: 30px 18px; }
  .land-foot { padding: 22px 16px 30px; }
  .land-stats b { font-size: 22px; }
  .land-stats div { flex-basis: 40%; padding: 14px 10px; }
}
@media (max-width: 420px) {
  .land-lang span { display: none; }  /* just the globe on small phones */
  .land-nav .btn-sm { padding-inline: 10px; }
}

/* ───────────────────────── small helpers (every page) ─────────────────────────
   The look is calm on purpose: nothing fades, slides, bounces or glows in. Only hover
   colors change (150 ms or less), and a spinner turns while a button is busy. */
.switch::after { content: ""; position: absolute; inset: -8px -4px; }  /* a bigger area to tap, same look */
/* The "Saving… / Saved" note hides quickly when done (app.js adds "bye", then hides it). */
.save-status { transition: opacity .15s; }
.save-status.bye { opacity: 0; }
/* Lists that load after the page (cases, transcripts): a plain grey box keeps their space until they arrive. */
#case-results:empty, #tk-results:empty { height: 176px; border-radius: 8px; background: var(--card-2); }
#case-results, #tk-results { transition: opacity .12s; }
a.brand:hover { text-decoration: none; }
.case-stats .stat-card { padding-bottom: 14px; }  /* no chart under these numbers, so they need their own bottom space */
@media (max-width: 520px) {
  .servers-page { padding: 28px 16px 60px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 14px 14px 0; }
  .stat-value { font-size: 22px; }
  .spark { width: calc(100% + 28px); margin: 10px -14px 0; height: 60px; }
  .stat-change { flex-wrap: wrap; gap: 4px 8px; }
}
@media (max-width: 480px) {
  .switch { min-height: 0; }  /* the switch keeps its shape on phones; ::after above makes it easy to tap */
}

/* Less motion: people who turned on "reduce motion" on their device get no movement at all. */
@media (prefers-reduced-motion: reduce) {
  html:has(body.landing-body) { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  /* Spinners still turn (slowly), so a busy button doesn't look frozen. */
  .btn.busy::before, .card-busy { animation-duration: 1.6s !important; }
}

/* ───────────────────────── speed + auto refresh ───────────────────────── */
/* "Pick a server" after clicking "Add the bot": a small note with a blue dot while the page checks by itself (app.js, initServers). */
.watch-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 14px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid rgba(59, 130, 246, .35); color: #bfdbfe; font-size: 13.5px; font-weight: 500; max-width: 100%; }
.watch-note[hidden] { display: none; }
.watch-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
/* The bot just joined: the card gets a blue edge (app.js adds "just-joined"). */
.server-card.just-joined { border-color: var(--accent); }
/* Pictures keep their space while loading (width/height in the HTML), so nothing jumps. */
.server-card-icon { object-fit: cover; }

/* ───────────────────────── Backup page (extras/backup.html) ───────────────────────── */
.bk-job {
  padding: 14px 16px; border-radius: 8px; margin-bottom: 14px; background: var(--card-2);
  border: 1px solid rgba(59, 130, 246, .45);
}
.bk-job[data-status="failed"], .bk-job[data-status="cancelled"] { border-color: rgba(239, 68, 68, .35); box-shadow: none; }
.bk-job-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.bk-job .lb-bar span { transition: width .15s linear; }
.bk-job-step { margin-top: 8px; color: var(--muted); overflow-wrap: anywhere; }
.bk-job-actions { margin-top: 8px; }
.bk-row { flex-wrap: wrap; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bk-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.bk-code code { user-select: all; overflow-wrap: anywhere; }

/* ───────── Premium page (/premium, templates/premium.html) ───────── */
.premium-page .page-head .land-eyebrow { justify-content: center; }
.pm-offer { max-width: 620px; margin: 0 auto 18px; }
.pm-card { background: var(--card); border-color: rgba(249, 115, 22, .45); }
.pm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.pm-facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.pm-good { border-color: rgba(34, 197, 94, .35); }
.pm-good .i { color: var(--green); }
.pm-bad { border-color: rgba(239, 68, 68, .4); }
.pm-bad .i { color: var(--danger-text); }
.plan-tag.pm-warn { background: var(--danger-soft); color: #fca5a5; }
.pm-servers { display: grid; gap: 8px; margin-top: 10px; }
.pm-server { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .12s, background-color .12s; min-width: 0; }
.pm-server:hover { background: rgba(255, 255, 255, .03); }
.pm-server:has(input:checked), .pm-server.is-picked { border-color: var(--accent); background: rgba(59, 130, 246, .10); }
.pm-server input { accent-color: var(--accent); flex-shrink: 0; }
.pm-server img, .pm-server .server-letter { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.pm-server-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pm-steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; color: #cdd3db; }
@media (max-width: 620px) {
  .pm-facts { grid-template-columns: 1fr; }
  .premium-page .panel-foot .btn, .premium-page .btn-row .btn { flex: 1 1 100%; }
}
.premium-page .btn-row + .tip { margin-top: 8px; }

/* ───────── Bot staff: Admin tabs, Users, Staff, Admin log, maintenance (dashboard/staff.py) ───────── */
/* Maintenance mode banner at the very top of every page (base.html). */
.maint-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; background: var(--accent-2); color: var(--on-accent-2); text-align: center; font-size: 13px;
  font-weight: 600; padding: 7px 16px; overflow-wrap: anywhere; }
.maint-bar .i { width: 16px; height: 16px; }
.maint-staff { font-weight: 500; }
.maint-panel { border-color: rgba(249, 115, 22, .5); }
/* The tabs: plain boxes that wrap onto a 2nd line on phones (no sideways scrolling). The open one is blue. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.admin-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-weight: 600;
  font-size: 14px; color: var(--muted); background: var(--card); border: 1px solid var(--border); text-decoration: none !important;
  transition: color .12s, border-color .12s; }
.admin-tab:hover { color: var(--text); border-color: var(--border-2); }
.admin-tab.active { color: #fff; border-color: var(--accent-fill); background: var(--accent-fill); }
.admin-tab .i { width: 16px; height: 16px; }
/* Search / filter boxes above a list. */
.admin-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.admin-filter .q { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.admin-filter .grow { flex: 1; min-width: 200px; }
.admin-filter .btn[type=submit] { margin-top: 0; }
.admin-filter .grow-all { flex-basis: 100%; margin: 0; }
.admin-back { display: inline-block; margin-bottom: 12px; font-weight: 600; }
/* A person's or a server's header card. */
.admin-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--card); }
.admin-hero h2 { font-size: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.admin-icon.big { width: 64px; height: 64px; border-radius: 12px; font-size: 24px; }
.admin-avatar.sm { width: 38px; height: 38px; flex-shrink: 0; }
.admin-user { color: var(--text); text-decoration: none !important; transition: border-color .12s; }
.admin-user:hover { border-color: var(--accent); }
.admin-user b, .admin-name b { overflow-wrap: anywhere; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.admin-facts { margin-bottom: 8px; }
.admin-more summary { cursor: pointer; font-weight: 600; margin: 10px 0 8px; }
/* Staff page: one tick box per power, with its tip under it. */
.power-list { gap: 4px 14px; margin: 6px 0 4px; }
.power-box { align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); }
.power-box:has(input:checked) { border-color: rgba(59, 130, 246, .55); background: rgba(59, 130, 246, .08); }
.power-box input { margin-top: 3px; flex-shrink: 0; }
.power-box > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.power-box .tip { margin: 0; }
.staff-member summary { display: flex; }
.staff-member[open] summary .i:last-child { transform: rotate(180deg); }
.staff-edit { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-2); }
.admin-log .row-item { align-items: flex-start; }
@media (max-width: 620px) {
  .admin-tab { padding: 7px 11px; font-size: 13px; }
  .admin-filter .q, .admin-filter .grow { min-width: 0; flex: 1 1 100%; }
  .admin-filter .btn { flex: 1 1 100%; }
  .admin-hero { align-items: flex-start; }
  .power-list { grid-template-columns: 1fr; }
}
.panel > .btn + .tip { margin-top: 8px; }

/* ───────────────────────── website moderators (General → Website access, webaccess.py) ───────────────────────── */
/* The small notes in the top bar / on a server card: "View only", "Moderator access". */
.badge-viewonly, .badge-mod {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 7px; vertical-align: middle;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; margin-inline-start: 6px;
}
.badge-viewonly { color: #93c5fd; background: rgba(59, 130, 246, .15); }
.badge-mod { color: #bfdbfe; background: var(--accent-soft); }
.badge-viewonly .i, .badge-mod .i { width: 13px; height: 13px; }
.server-card .badge-mod { margin: -4px 0 0; }
/* A view-only page: pickers and switches can't be opened (app.js lockViewOnly disables the rest). */
body.view-only .content .picker, body.view-only .content .switch { pointer-events: none; opacity: .6; }
body.view-only .content button:disabled, body.view-only .content input:disabled { cursor: not-allowed; }
/* The list of entries and the page tick boxes. */
.wa-row { align-items: center; }
.wa-icon { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.wa-icon.role { display: grid; place-items: center; font-weight: 800; color: var(--role); background: var(--card-2);
  border: 2px solid var(--role); }
.wa-row .row-main { min-width: 0; }
.wa-row .row-main b { overflow-wrap: anywhere; }
.wa-actions { display: flex; gap: 6px; flex-shrink: 0; }
.chip.wa-view { color: #93c5fd; background: rgba(59, 130, 246, .13); }
.wa-group { margin-top: 10px; }
.wa-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#wa-form .segmented button { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 520px) {
  .topbar .badge-viewonly > span, .topbar .badge-mod > span { display: none; }  /* just the icon on phones */
  .wa-group .check-list { grid-template-columns: 1fr 1fr; }
  .wa-row .wa-actions { margin-inline-start: auto; }
}

/* Wave 3: Suggestions page. Long ideas (or links without spaces) wrap instead of making the page scroll sideways. */
.sg-text { overflow-wrap: anywhere; white-space: pre-wrap; }
/* On phones a list row's text takes the full width and its buttons drop below it. (The ".row-main { flex: 1 }"
   rule above reset the older phone rule, so this one is a little more specific.) */
@media (max-width: 520px) { .row-item > .row-main { flex-basis: 100%; } }

/* Terms + Privacy pages (legal.html): headings and paragraphs inside the rules-style card. */
.legal-page .rules-card h2 { font-size: 18px; margin: 22px 0 6px; }
.legal-page .rules-card p { line-height: 1.7; margin: 6px 0; overflow-wrap: anywhere; }
.legal-page .rules-list { margin-top: 8px; }

/* ───────── Wave 4: Premium belongs to a person, Plus in up to 3 servers (premium.html, module.html, overview.html) ───────── */
/* The 3 slot boxes on /premium. Each one: "Slot 1 · server name", then a server picker + button, then Remove. */
.pm-slots { display: grid; gap: 10px; margin-top: 12px; }
.pm-slot { border: 1px solid var(--border); border-radius: 8px; padding: 12px; min-width: 0; display: grid; gap: 8px; }
.pm-slot.is-filled { border-color: rgba(249, 115, 22, .45); background: rgba(249, 115, 22, .05); }
.pm-slot-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pm-slot-num { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* A long server name (or one with no spaces) wraps instead of pushing the page sideways. */
.pm-slot-name { min-width: 0; overflow-wrap: anywhere; }
.pm-slot .tip { margin: 0; }
.pm-slot .btn-row { margin: 0; }
/* The picker and its button sit side by side; on phones the button drops below, full width. */
.pm-slot-form { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pm-slot-form select { flex: 1 1 180px; min-width: 0; max-width: 100%; }
@media (max-width: 520px) { .pm-slot-form .btn { flex: 1 1 100%; } }
/* The note "Plus here comes from Bro's Premium; only they can change Plus settings" (pluslock.py). */
#premium-lock-note > div { min-width: 0; overflow-wrap: anywhere; }

/* ───────────────────────── Wave 4: global credits (My profile /me and Admin → Credits) ─────────────────────────
   The card preview on the left and the numbers on the right; on phones they stack.
   Everything uses grid/flex with min-width: 0, so nothing makes a 390px phone scroll sideways. */
.me-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.me-card-box { padding: 14px; }
.me-card { display: block; width: 100%; height: auto; border-radius: 10px; transition: opacity .12s; }
.me-card.loading { opacity: .55; }
.me-trying { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; color: var(--accent-text); font-size: 13.5px; }
.me-trying .btn { margin-inline-start: auto; }
.me-card-box .tip { margin: 10px 0 0; }
.me-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.me-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--border); min-width: 0; }
.me-stat span { display: inline-flex; align-items: center; gap: 6px; }
.me-stat b { font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.me-stat.gold { border-color: rgba(249, 115, 22, .45); }
.me-stat.gold b { color: var(--accent-2-text); }
.me-how { grid-column: 1 / -1; margin: 2px 0 0; line-height: 1.55; }
/* The shop: background cards in a grid, titles as rows of tags. */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.shop-item { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: var(--card-2);
  border: 1px solid var(--border); min-width: 0; }
.shop-item.in-use, .title-item.in-use { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.shop-thumb { display: block; width: 100%; height: auto; aspect-ratio: 300 / 167; object-fit: cover; border-radius: 6px; background: var(--card); }
.shop-name { font-weight: 700; overflow-wrap: anywhere; }
.shop-price { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-2-text); font-weight: 700; font-size: 13.5px; }
.shop-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.title-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--border); min-width: 0; }
.title-item .shop-buttons { margin: 0 0 0 auto; }
[dir="rtl"] .title-item .shop-buttons { margin: 0 auto 0 0; }
.title-tag { display: inline-block; padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 13.5px; color: #fff;
  background: var(--accent-fill); overflow-wrap: anywhere; }
.title-tag.none { background: var(--card); color: var(--muted); border: 1px dashed var(--border-2); }
.cr-amount { font-weight: 800; white-space: nowrap; }
.cr-amount.up { color: #4ade80; }
.cr-amount.down { color: var(--danger-text); }
/* Admin → Credits */
.cr-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; }
.cr-settings .q { display: flex; flex-direction: column; gap: 6px; font-weight: 600; min-width: 0; }
.cr-settings .tip { font-weight: 400; margin: 0; }
.cr-mini { width: 96px; height: 53px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.cr-mini.title-icon { display: grid; place-items: center; background: var(--card); color: var(--accent-text); }
.cr-item.is-off { opacity: .6; }
.cr-actions { flex-shrink: 0; gap: 6px; }
.cr-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; }
.cr-form .q { display: flex; flex-direction: column; gap: 6px; font-weight: 600; min-width: 0; }
.cr-form .q[hidden] { display: none; }
.cr-form .tip { font-weight: 400; margin: 0; }
.cr-form .panel-foot { grid-column: 1 / -1; }
.cr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.cr-two a.row-item { color: var(--text); text-decoration: none; }
@media (max-width: 860px) {
  .me-top, .cr-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-item { padding: 8px; }
  .shop-buttons .btn { flex: 1 1 auto; justify-content: center; }
  .me-stat b { font-size: 19px; }
  .cr-item .cr-actions { margin-inline-start: auto; }
}

/* ───────── Credit packs (wave 4: _buy_credits.html on /me, admin/_credit_packs.html) ───────── */
/* /me: one card per pack, side by side; on a phone they stack (minmax keeps them from overflowing). */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.pack-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 8px; min-width: 0;
  background: var(--card-2); border: 1px solid var(--border); }
.pack-name { font-weight: 700; overflow-wrap: anywhere; }
.pack-credits { display: flex; align-items: center; gap: 6px; color: var(--accent-2-text); flex-wrap: wrap; }
.pack-credits b { font-size: 22px; }
.pack-card .btn { justify-content: center; margin-top: auto; }
.pack-rules { margin: 12px 0 0; }
/* Admin: one row (form) per pack: name, credits, price, on/off, Save. */
.pack-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 10px 14px;
  align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
/* The tick box and the button sit level with the boxes (the labels above the boxes are ~30px tall). */
.pack-form > .btn, .pack-on { margin-top: 30px; }
.pack-form .q { display: flex; flex-direction: column; gap: 6px; font-weight: 600; min-width: 0; }
.pack-form .tip { font-weight: 400; margin: 0; }
.pack-form.is-off { opacity: .65; }
.pack-on { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 40px; }
.pack-add-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 18px 0 0; }
.pack-session { overflow-wrap: anywhere; font-size: 11.5px; }
@media (max-width: 720px) {
  .pack-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pack-form .q:first-of-type { grid-column: 1 / -1; }
  .pack-form > .btn, .pack-on { margin-top: 0; align-self: center; }
}

/* "Accept the Terms" screen (accept.html): one centered card with the two links and the tick box. */
.lb-page.accept-page { max-width: 560px; padding-top: 70px; }
.accept-card { text-align: center; display: grid; gap: 14px; justify-items: center; }
.accept-card h1 { font-size: 24px; margin: 0; overflow-wrap: anywhere; }
.accept-face { position: relative; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--accent-fill); color: #fff; font-size: 30px; font-weight: 800; }
.accept-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.accept-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.accept-form { display: grid; gap: 14px; justify-items: center; width: 100%; margin-top: 6px; }
.accept-check { display: flex; gap: 10px; align-items: flex-start; text-align: start; line-height: 1.5; cursor: pointer; }
.accept-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.accept-missing { color: var(--danger-text); margin: 0; }
@media (max-width: 520px) { .accept-form .btn { width: 100%; justify-content: center; } }

/* "How long?" picker for Premium / Plus given by hand (templates/_plan_time.html, app.js initPlanTime). */
.pt { display: grid; gap: 12px; padding: 6px 0 4px; min-width: 0; }
.pt-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 8px; color: var(--text); background: var(--card-2); border: 1px solid var(--border); }
.pt-chip .i { width: 14px; height: 14px; }
.pt-chip:hover { border-color: var(--border-2); }
.pt-chip.is-on { border-color: var(--accent); background: rgba(59, 130, 246, .18); }
.pt-forever.is-on { border-color: var(--accent-2); background: var(--accent-2-soft); }
.pt-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.pt-row .q { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt-for { display: flex; gap: 8px; }
.pt-for .input-number { width: 96px; }
.pt-for select.input { width: auto; min-width: 120px; }
.pt-date .input { width: 180px; }
.pt-ends { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; overflow-wrap: anywhere; }
.pt-history-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 18px 0 6px; }
.pt-detail { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .pt-row, .pt-row .q, .pt-date .input { width: 100%; }
  .pt-for { width: 100%; }
  .pt-for .input-number { flex: 1 1 0; width: auto; min-width: 0; }
  .pt-for select.input { flex: 1 1 0; min-width: 0; }
  .pt-buttons .btn { flex: 1 1 calc(50% - 10px); justify-content: center; }
}

/* The small row of links at the bottom of the Premium, Terms and Privacy pages
   (Home, Features, Premium, Terms, Privacy, English, العربية). They wrap onto more lines on phones. */
.page-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 18px 0 28px; font-size: 13px; }
.page-foot-links a { color: var(--muted); }
.page-foot-links a:hover { color: var(--text); }

/* ───────────────────────── My profile: "Delete my data" (me.html, core/mydata.py) ───────────────────────── */
.me-delete { border-color: rgba(239, 68, 68, .35); }
.me-delete-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 14px; }
.me-delete-cols h3 { font-size: 15px; margin: 0 0 8px; }
.me-delete-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.me-delete .warn-banner { margin: 16px 0 0; }
@media (max-width: 760px) { .me-delete-cols { grid-template-columns: 1fr; } }