/* ==========================================================================
   Discord Guardian — Dashboard styles
   Visual language: "Vision UI" — deep navy gradient, glassmorphism cards,
   blue/cyan gradient accents, glowing purple borders, RTL Arabic.
   Tailwind (CDN) handles layout/spacing utilities; this file owns the
   bespoke glass, glow, gradient and toggle aesthetics that Tailwind can't.
   ========================================================================== */

:root {
  --bg-0: #060a1f;        /* deepest navy */
  --bg-1: #0b1437;        /* card-area navy */
  --bg-2: #111c44;        /* panel navy (Vision UI signature) */
  --indigo: #4318ff;      /* Vision UI primary */
  --cyan: #21d4fd;        /* gradient highlight */
  --purple: #7c3aed;      /* premium / save accent */
  --purple-glow: rgba(124, 58, 237, 0.55);
  --text-0: #ffffff;
  --text-1: #a0aec0;      /* muted slate */
  --line: rgba(255, 255, 255, 0.08);
  --ok: #01b574;
  --warn: #ffb547;
  --danger: #ee5d50;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--text-0);
  font-family: "Tajawal", "Plus Jakarta Sans", system-ui, sans-serif;
  /* Layered radial glows over a navy gradient = the Vision UI backdrop. */
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(67, 24, 255, 0.35), transparent 60%),
    radial-gradient(800px 500px at 0% 0%, rgba(33, 212, 253, 0.18), transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  background-attachment: fixed;
}

/* --- Glassmorphism panel -------------------------------------------------- */
.glass {
  position: relative;
  background: linear-gradient(160deg, rgba(17, 28, 68, 0.74), rgba(11, 20, 55, 0.55));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.glass:hover {
  border-color: var(--purple-glow);
  box-shadow: 0 0 0 1px var(--purple-glow), 0 12px 40px rgba(124, 58, 237, 0.25);
  transform: translateY(-2px);
}

/* Thin gradient hairline on top of each card, Vision UI style. */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(124,58,237,.7), rgba(33,212,253,.25), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .6; pointer-events: none;
}

/* --- Sidebar -------------------------------------------------------------- */
.sidebar-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border-radius: 14px;
  color: var(--text-1); font-weight: 600; font-size: .92rem;
  transition: all .2s ease; cursor: pointer;
}
.sidebar-item:hover { color: #fff; background: rgba(255,255,255,.04); }
.sidebar-item.active {
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--purple));
  box-shadow: 0 8px 24px rgba(67, 24, 255, .45);
}
.sidebar-icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 10px;
  background: rgba(255,255,255,.06);
}
.sidebar-item.active .sidebar-icon { background: rgba(255,255,255,.18); }

/* --- Headings / labels ---------------------------------------------------- */
.panel-title { font-size: 1.05rem; font-weight: 700; letter-spacing: .2px; }
.panel-sub { color: var(--text-1); font-size: .82rem; }
.field-label { color: var(--text-1); font-size: .85rem; font-weight: 600; }

/* --- Inputs / selects ----------------------------------------------------- */
.gi {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #fff; padding: .65rem .9rem; font-size: .9rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gi::placeholder { color: #6b7699; }
.gi:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .25);
}
select.gi option { background: var(--bg-2); color: #fff; }

/* --- Toggle switch (sleek, animated) ------------------------------------- */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--line);
  transition: .3s; border-radius: 999px;
}
.slider::before {
  content: ""; position: absolute; height: 20px; width: 20px;
  right: 3px; top: 3px;            /* RTL: knob starts on the right */
  background: #fff; border-radius: 50%; transition: .3s;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.switch input:checked + .slider {
  background: linear-gradient(135deg, var(--indigo), var(--purple));
  border-color: transparent;
  box-shadow: 0 0 14px var(--purple-glow);
}
.switch input:checked + .slider::before { transform: translateX(-22px); }

/* --- Row inside panels ---------------------------------------------------- */
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: none; }

/* --- Chips / badges ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.badge-premium { background: linear-gradient(135deg, var(--purple), var(--indigo)); color: #fff; }
.badge-on { background: rgba(1,181,116,.15); color: var(--ok); }
.badge-off { background: rgba(238,93,80,.15); color: var(--danger); }

/* --- Save button ---------------------------------------------------------- */
.btn-save {
  background: linear-gradient(135deg, var(--purple), var(--indigo));
  color: #fff; font-weight: 700; border: none; cursor: pointer;
  padding: .8rem 1.6rem; border-radius: 14px; font-size: .95rem;
  box-shadow: 0 10px 30px rgba(124, 58, 237, .45);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(124,58,237,.6); }
.btn-save:active { transform: translateY(0); }
.btn-save:disabled { opacity: .6; cursor: not-allowed; }

.btn-ghost {
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: #fff; border-radius: 12px; padding: .55rem 1rem; cursor: pointer;
  font-weight: 600; font-size: .85rem; transition: all .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.1); }

/* --- Floating save bar ---------------------------------------------------- */
.save-bar {
  position: sticky; bottom: 18px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.4rem; margin-top: 1.5rem;
}

/* --- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 28px; left: 28px; z-index: 80;
  min-width: 260px; padding: .9rem 1.2rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(17,28,68,.95), rgba(11,20,55,.95));
  border: 1px solid var(--purple-glow);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  transform: translateY(140%); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.ok { border-color: rgba(1,181,116,.7); }
.toast.err { border-color: rgba(238,93,80,.7); }

/* --- Avatar preview ------------------------------------------------------- */
.avatar-preview {
  width: 84px; height: 84px; border-radius: 18px; object-fit: cover;
  border: 2px solid var(--purple-glow); background: rgba(255,255,255,.04);
}

/* --- Stat cards (top KPI row, Vision UI) ---------------------------------- */
.stat-icon {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--indigo), var(--purple));
  box-shadow: 0 8px 20px rgba(67,24,255,.45);
}

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.35); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   3D ANIMATION LAYER
   Adds depth/perspective, mouse-tracking card tilt, floating depth orbs,
   scroll-reveal entrances, and continuous ambient motion across the whole web.
   Honors prefers-reduced-motion for accessibility.
   ========================================================================== */

/* Establish a shared 3D camera for the entire document. */
html { perspective: 1600px; }
body { transform-style: preserve-3d; }

/* ---- Animated depth background (floating orbs) -------------------------- */
#fx-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  transform-style: preserve-3d; pointer-events: none;
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(38px); opacity: .55;
  will-change: transform; transform: translateZ(0);
  animation: orbFloat linear infinite;
}
.orb.o1 { width: 460px; height: 460px; top: -120px; right: -80px;
  background: radial-gradient(circle at 30% 30%, #7c3aed, transparent 70%); animation-duration: 22s; }
.orb.o2 { width: 540px; height: 540px; bottom: -160px; left: -120px;
  background: radial-gradient(circle at 30% 30%, #21d4fd, transparent 70%); animation-duration: 28s; }
.orb.o3 { width: 380px; height: 380px; top: 38%; left: 44%;
  background: radial-gradient(circle at 30% 30%, #4318ff, transparent 70%); animation-duration: 34s; opacity: .4; }
@keyframes orbFloat {
  0%   { transform: translate3d(0,0,0) scale(1); }
  33%  { transform: translate3d(40px,-50px,80px) scale(1.08); }
  66%  { transform: translate3d(-30px,40px,-60px) scale(.95); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* Subtle moving grid for extra depth (sits above orbs, below content). */
#fx-grid {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(124,58,237,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,212,253,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(62deg) translateZ(-120px);
  animation: gridDrift 18s linear infinite;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 0 60px; } }

/* ---- 3D tilt on glass cards --------------------------------------------- */
.glass {
  transform-style: preserve-3d;
  /* CSS vars driven by effects.js pointer tracking. */
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(var(--tz, 0px));
  will-change: transform;
}
.glass:hover { --tz: 22px; }
/* Lift inner content forward so tilt feels truly volumetric. */
.glass > * { transform: translateZ(28px); }
.glass .stat-icon, .glass .switch, .glass .btn-save { transform: translateZ(46px); }

/* A specular highlight that follows the cursor across each card. */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255,255,255,.10), transparent 45%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.glass:hover::after { opacity: 1; }

/* ---- Scroll-reveal entrance (3D) ---------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(46px) rotateX(-14deg) scale(.97);
  transform-origin: 50% 100%;
  transition: opacity .7s cubic-bezier(.2,.8,.2,1),
              transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }

/* ---- Continuous ambient float on stat icons ---------------------------- */
.stat-icon { animation: iconFloat 5s ease-in-out infinite; }
@keyframes iconFloat {
  0%,100% { transform: translateZ(46px) translateY(0); }
  50%     { transform: translateZ(46px) translateY(-6px); }
}

/* ---- 3D press feedback on buttons --------------------------------------- */
.btn-save, .btn-ghost { transform-style: preserve-3d; transition: transform .15s ease, box-shadow .2s ease; }
.btn-save:active { transform: translateZ(46px) translateY(2px) scale(.98); }

/* ---- Sidebar items pop forward on hover --------------------------------- */
.sidebar-item { transform-style: preserve-3d; transition: all .25s ease; }
.sidebar-item:hover { transform: translateZ(18px) translateX(-4px); }

/* ---- Respect reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .orb, #fx-grid, .stat-icon { animation: none !important; }
  .glass, .reveal, .sidebar-item { transition: none !important; transform: none !important; }
  .reveal { opacity: 1 !important; }
}

/* ==========================================================================
   LANDING PAGE (OAuth2 entry point)
   Reuses the .glass / 3D layer above; adds the centered hero, the glowing
   brand title, the Discord auth button, status pill and auth banners.
   ========================================================================== */

.landing-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 2rem 1.25rem;
}

.landing-card {
  width: 100%; max-width: 560px;
  padding: 3rem 2.5rem 2.25rem;
  text-align: center;
}

/* Eyebrow above the title */
.brand-eyebrow {
  letter-spacing: .35em; font-size: .72rem; font-weight: 700;
  color: var(--text-1); text-transform: uppercase; margin-bottom: 1rem;
}

/* Premium, glowing shop title */
.brand-title {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800; line-height: 1.1; letter-spacing: .5px;
  background: linear-gradient(120deg, #ffffff 8%, #c4b5fd 48%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: titleGlow 4.5s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(124, 58, 237, .35)); }
  50%      { filter: drop-shadow(0 0 30px rgba(33, 212, 253, .5)); }
}
.brand-sub { color: var(--text-1); margin-top: .9rem; font-size: 1rem; line-height: 1.7; }

.auth-zone { margin-top: 2.2rem; }

/* Discord auth / CTA button */
.btn-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; padding: 1rem 1.5rem; border-radius: 16px; border: none;
  font-family: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #5865F2, var(--purple));
  box-shadow: 0 14px 40px rgba(88, 101, 242, .45);
  transition: transform .18s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-discord:hover {
  transform: translateY(-3px) translateZ(30px);
  box-shadow: 0 20px 52px rgba(124, 58, 237, .6);
  filter: brightness(1.06);
}
.btn-discord:active { transform: translateY(-1px); }
.btn-discord.cta { background: linear-gradient(135deg, var(--purple), var(--indigo)); }

/* Logged-in status pill (avatar + username) */
.status-pill {
  display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.3rem;
  padding: .45rem 1.1rem .45rem .45rem; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.status-pill img {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--purple-glow); object-fit: cover;
}
.status-pill .lbl { font-size: .9rem; color: var(--text-1); }
.status-pill .lbl b { color: #fff; font-weight: 700; }

/* Auth state banners */
.auth-banner {
  margin-top: 1.3rem; padding: .85rem 1.1rem; border-radius: 14px;
  font-size: .9rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  animation: bannerIn .4s ease;
}
.auth-banner.err  { background: rgba(238, 93, 80, .12); border: 1px solid rgba(238, 93, 80, .55); color: #ff9a90; }
.auth-banner.warn { background: rgba(255, 181, 71, .12); border: 1px solid rgba(255, 181, 71, .5); color: var(--warn); }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.muted-link { color: var(--text-1); font-size: .85rem; text-decoration: none; transition: color .2s ease; }
.muted-link:hover { color: #fff; }

.landing-foot { margin-top: 2rem; color: var(--text-1); font-size: .76rem; opacity: .8; }

/* ==========================================================================
 * MULTI-PAGE LAYOUT (v2) — one dedicated page per sidebar option.
 * Appended after the original styles; reuses the same palette + .glass system.
 * ========================================================================== */

.hidden { display: none !important; }

.shell {
  display: flex;
  min-height: 100vh;
  gap: 0;
}

/* --- Sidebar ------------------------------------------------------------ */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 270px;
  min-width: 270px;
  height: 100vh;
  padding: 22px 16px;
  border-radius: 0;
  border-inline-start: none;
  border-block: none;
  border-inline-end: 1px solid var(--line, rgba(124, 58, 237, 0.18));
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  z-index: 40;
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 18px;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--indigo, #4318ff), var(--purple, #7c3aed));
  box-shadow: 0 0 22px var(--purple-glow, rgba(124, 58, 237, 0.55));
  color: #fff;
}
.brand-name { font-weight: 800; font-size: 1.05rem; display: block; }
.brand-tag { font-size: 0.66rem; letter-spacing: 0.18em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 13px;
  color: var(--text-1, #b8c2e6);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.sidebar-link:hover {
  background: rgba(124, 58, 237, 0.10);
  color: var(--text-0, #fff);
}
.sidebar-link.active {
  background: linear-gradient(135deg, rgba(67, 24, 255, 0.30), rgba(124, 58, 237, 0.22));
  color: #fff;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.30) inset;
}
.sidebar-ic {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--cyan, #21d4fd);
}
.sidebar-ic svg { width: 19px; height: 19px; }

/* --- Main column -------------------------------------------------------- */
.main {
  flex: 1;
  min-width: 0;
  padding: 22px clamp(16px, 3vw, 40px) 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 22px;
  flex-wrap: wrap;
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; }
.crumbs .sep { opacity: 0.5; }
.page-h1 { font-size: 1.5rem; font-weight: 800; margin-top: 2px; }
.topbar-user { display: flex; align-items: center; gap: 12px; }
.user-meta { text-align: end; line-height: 1.25; }
.user-name { font-weight: 700; }
.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 14px var(--purple-glow, rgba(124, 58, 237, 0.45));
}
.page-body { display: flex; flex-direction: column; gap: 20px; }

/* --- Sections / cards --------------------------------------------------- */
.section-card { padding: 22px 24px; }
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.module-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.module-title { display: flex; align-items: center; gap: 9px; }
.module-title h3 { font-weight: 800; font-size: 1.02rem; }
.module-title svg { color: var(--cyan, #21d4fd); width: 20px; height: 20px; }
.module-desc { margin-bottom: 4px; }
.module-body { display: flex; flex-direction: column; gap: 13px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field .field-label { margin-bottom: 2px; }

/* --- Stats (overview) --------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.stat-card { padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1; }

/* --- Quick nav (overview) ---------------------------------------------- */
.quicknav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.quick-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(124, 58, 237, 0.28);
}
.quick-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.16);
  color: var(--cyan, #21d4fd);
}
.quick-label { font-weight: 700; flex: 1; }
.quick-arrow { opacity: 0.55; width: 18px; height: 18px; }

/* --- Lists (roles / owners) -------------------------------------------- */
.list-wrap { display: flex; flex-direction: column; gap: 8px; }
.text-input {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(8, 12, 32, 0.6);
  border: 1px solid var(--line, rgba(124, 58, 237, 0.22));
  color: var(--text-0, #fff);
  font-family: inherit;
}
.text-input:focus { outline: none; border-color: var(--purple, #7c3aed); }
.row-text { display: flex; flex-direction: column; gap: 1px; }
.row-label { font-weight: 600; }

/* --- Chips (word filter) ----------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.40);
  font-size: 0.85rem;
}
.chip button {
  background: none;
  border: none;
  color: var(--danger, #ed4245);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

/* --- Logs / branding grids --------------------------------------------- */
.logs-grid, .brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.avatar-field { grid-column: 1 / -1; }
.avatar-row { display: flex; align-items: center; gap: 14px; }
.brand-lock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(250, 166, 26, 0.12);
  border: 1px solid rgba(250, 166, 26, 0.4);
  color: var(--warn, #faa61a);
  font-size: 0.9rem;
}

/* --- Audit (settings change log) --------------------------------------- */
.audit-wrap { display: flex; flex-direction: column; gap: 10px; }
.audit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.audit-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.audit-label { font-weight: 700; }
.audit-change { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; flex-wrap: wrap; }
.audit-change svg { width: 15px; height: 15px; opacity: 0.6; }
.audit-old {
  color: var(--text-1, #b8c2e6);
  text-decoration: line-through;
  opacity: 0.8;
  background: rgba(237, 66, 69, 0.10);
  padding: 2px 9px;
  border-radius: 8px;
}
.audit-new {
  color: var(--ok, #57f287);
  background: rgba(87, 242, 135, 0.10);
  padding: 2px 9px;
  border-radius: 8px;
}
.audit-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 0.78rem; }
.audit-actor { display: flex; align-items: center; gap: 5px; color: var(--text-0, #fff); font-weight: 600; }
.audit-actor svg { width: 14px; height: 14px; color: var(--cyan, #21d4fd); }
.audit-time { color: var(--text-1, #b8c2e6); }

/* --- Save bar ----------------------------------------------------------- */
.save-bar {
  position: sticky;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  flex-wrap: wrap;
  z-index: 20;
}
.save-hint-wrap { display: flex; align-items: center; gap: 8px; }
.save-hint-wrap svg { width: 16px; height: 16px; }

/* --- Mobile menu button ------------------------------------------------- */
.menu-btn {
  display: none;
  position: fixed;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(124, 58, 237, 0.3));
  background: rgba(11, 20, 55, 0.9);
  color: #fff;
  cursor: pointer;
  place-items: center;
}

@media (max-width: 900px) {
  .menu-btn { display: grid; }
  .sidebar {
    position: fixed;
    inset-inline-end: 0;
    top: 0;
    transform: translateX(110%);
    transition: transform 0.28s ease;
    box-shadow: -12px 0 50px rgba(0, 0, 0, 0.5);
  }
  [dir="rtl"] .sidebar { transform: translateX(-110%); }
  .sidebar.open { transform: translateX(0); }
  .main { padding-top: 70px; }
}

/* ==========================================================================
 * Premium + Settings pages (v3)
 * ========================================================================== */
.tiers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:.4rem}
.tier-card{position:relative;padding:1.4rem 1.2rem;border-radius:20px;display:flex;flex-direction:column;gap:.55rem;text-align:center;transition:transform .25s ease,box-shadow .25s ease}
.tier-card:hover{transform:translateY(-4px)}
.tier-card.tier-pop{border:1px solid var(--purple);box-shadow:0 0 24px var(--purple-glow)}
.tier-badge{position:absolute;top:-12px;inset-inline-start:50%;transform:translateX(50%);background:linear-gradient(135deg,var(--indigo),var(--purple));color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .7rem;border-radius:999px;white-space:nowrap}
.tier-name{font-size:1.05rem;font-weight:700;color:var(--text-0)}
.tier-price{font-size:1.8rem;font-weight:800;color:var(--text-0);line-height:1}
.tier-price span{font-size:.85rem;font-weight:600;color:var(--text-1)}
.tier-tag{min-height:1.1rem}
.tier-buy{margin-top:.4rem;width:100%;justify-content:center}
.premium-status{margin-top:.3rem}
.premium-active,.premium-inactive{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border-radius:16px}
.premium-active{background:rgba(87,242,135,.08);border:1px solid rgba(87,242,135,.35)}
.premium-inactive{background:rgba(124,58,237,.08);border:1px solid var(--line)}
.premium-active i,.premium-inactive i{width:30px;height:30px;flex:0 0 auto}
.premium-active-title{font-weight:700;color:var(--text-0)}
.premium-note{margin-top:.7rem}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}

/* ===== Legal pages (Terms / Privacy / Refund) v1 ===== */
.legal-wrap{
  position:relative; z-index:2;
  max-width:920px; margin:0 auto;
  padding:4.5rem 1.25rem 3.5rem;
}
.legal-card{ padding:2.4rem 2.2rem; text-align:right; }
.legal-back{ display:inline-flex; align-items:center; gap:.4rem; margin-bottom:1.3rem; font-size:.92rem; }
.legal-back i{ width:16px; height:16px; }
.legal-title{ font-size:2rem; font-weight:800; color:#f4f6ff; margin:.2rem 0 .35rem; }
.legal-updated{ color:#9aa3c7; font-size:.9rem; margin-bottom:1.8rem; }
.legal-card section{ margin-bottom:1.5rem; }
.legal-card h2{
  font-size:1.18rem; font-weight:700; color:#c4b5fd;
  margin:0 0 .6rem; display:flex; align-items:center; gap:.5rem;
}
.legal-card h2 .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6rem; height:1.6rem; border-radius:9px; font-size:.85rem; flex:0 0 auto;
  background:rgba(124,58,237,.18); border:1px solid rgba(167,139,250,.35); color:#d6c9ff;
}
.legal-card p, .legal-card li{ color:#cdd3ec; line-height:2; font-size:1rem; }
.legal-card ul{ margin:.4rem 1.4rem .2rem; padding:0; list-style:disc; }
.legal-card li{ margin-bottom:.35rem; }
.legal-card strong{ color:#eef0ff; }
.legal-card a{ color:#a78bfa; text-decoration:none; }
.legal-card a:hover{ text-decoration:underline; }
.legal-foot{
  margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.08);
  text-align:center; color:#9aa3c7; font-size:.9rem;
}
.legal-foot a{ color:#b9a8f5; margin:0 .25rem; }
.legal-foot .copy{ margin-top:.5rem; font-size:.82rem; color:#7e87ad; }
@media (max-width:640px){ .legal-card{ padding:1.6rem 1.2rem; } .legal-title{ font-size:1.6rem; } }