:root {
  --bg: #f8f5fb;
  --bg-alt: #faf5ff;
  --surface: #ffffff;
  --surface-alt: #f5eefe;
  --border: #e3d5f7;
  --border-strong: #d8b4fe;

  --primary: #c026d3;
  --accent: #a855f7;
  --deep: #4c1d95;

  --success: #16a34a;
  --success-bg: #ecfdf3;
  --success-border: #a7e6bf;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #f3b7b7;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #f6dfa6;
  --info-bg: #f5edff;
  --info-border: #d8b4fe;

  /* Categorical tag/chip colors -- distinct hues so different badge KINDS
     (an ID vs. a class vs. a file type vs. a status) read apart from each
     other at a glance, instead of everything defaulting to the primary
     purple. Status-meaning badges (on/off, ok/error) should keep using
     --success/--warning/--danger/--info above; these are for plain
     categorical labels. */
  --tag-blue: #1d4ed8;
  --tag-blue-bg: #eff6ff;
  --tag-blue-border: #bfdbfe;
  --tag-teal: #0e7490;
  --tag-teal-bg: #ecfeff;
  --tag-teal-border: #a5f3fc;
  --tag-rose: #be123c;
  --tag-rose-bg: #fff1f2;
  --tag-rose-border: #fecdd3;
  --tag-slate: #475569;
  --tag-slate-bg: #f1f5f9;
  --tag-slate-border: #dbe3ec;

  --text-main: #241b33;
  --text-muted: #7a7291;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  --shadow-sm: 0 2px 8px rgba(107, 33, 168, 0.08);
  --shadow-md: 0 8px 24px rgba(107, 33, 168, 0.12);
  --shadow-lg: 0 20px 45px rgba(76, 29, 149, 0.16);

  --transition-fast: 150ms ease-out;
  --transition-med: 220ms ease-out;

  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  /* Retained so any leftover var(--font-mono) usage renders as the same
     clean sans rather than a stray monospace fallback. */
  --font-mono: var(--font-ui);

  /* Back-compat aliases: many admin/qctt templates still reference the old
     cyberpunk token names directly in page-specific <style> blocks. Aliasing
     them here means those pages inherit the new light palette automatically
     instead of needing every template's local CSS rewritten one-by-one. */
  --panel: var(--surface);
  --panel-border: var(--border);
  --panel-glass: rgba(255, 255, 255, 0.85);
  --bg-alt: var(--bg);
  --accent-cyan: var(--primary);
  --accent-magenta: var(--accent);
  --accent-lime: var(--success);
  --accent-warning: var(--warning);
  --accent-danger: var(--danger);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, rgba(192, 38, 211, 0.06), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(168, 85, 247, 0.07), transparent 45%),
    var(--bg);
  color: var(--text-main);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.75rem;
}

h1, h2, h3 {
  color: var(--text-main);
}

main > h1,
.page-title,
h1.glitch {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--deep);
  margin: 0 0 1.25rem;
  letter-spacing: normal;
  text-transform: none;
}

/*!Header*/
/* -----------------------------
   Header nav
------------------------------ */

.app-header {
  background: linear-gradient(100deg, #4c1d95, #7c3aed 65%, #a855f7);
  box-shadow: 0 4px 20px rgba(76, 29, 149, 0.25);
}

.app-header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.85rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-title-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.app-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.app-title {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  color: #ffffff;
}

.app-subtitle {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.05rem;
}

.app-header nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Nav pill */

.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 1.05rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.01em;
  text-transform: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

/* Active nav tab */

.btn-nav-active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--deep);
  border-color: rgba(255, 255, 255, 0.92);
}

/* Hover */

.btn-nav:hover,
.btn-nav:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

/* Dropdown nav groups (Chat / Family / Network / Account) */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-caret {
  font-size: 0.6rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.nav-dropdown.open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 210px;
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--info-bg);
  color: var(--primary);
}

/*!Breadcrumbs*/
/* -----------------------------
   Breadcrumb trail -- same on every page, replaces the old per-page
   "back to X" links.
------------------------------ */

.breadcrumb-trail {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.65rem 1.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb-link .btn-icon-svg {
  width: 0.9em;
  height: 0.9em;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

.breadcrumb-home {
  color: var(--text-muted);
}

.breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--deep);
  font-weight: 600;
}

.breadcrumb-sep {
  color: var(--border-strong);
  padding: 0 0.1rem;
}

/*!Buttons*/
/* -----------------------------
   Buttons
------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  background: var(--surface);
  color: var(--deep);
  text-transform: none;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    background var(--transition-med),
    color var(--transition-med),
    box-shadow var(--transition-med),
    border-color var(--transition-med),
    transform var(--transition-fast);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Primary: gradient hero */

.btn-primary {
  padding-inline: 1.9rem;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(192, 38, 211, 0.3);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 10px 24px rgba(192, 38, 211, 0.4);
}

/* Ghost: subtle outline */

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  box-shadow: none;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--info-bg);
  color: var(--primary);
  border-color: var(--accent);
  box-shadow: none;
}

/* Danger: destructive actions (delete, remove, revoke) */

.btn-danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: #a11515;
}

.btn-danger:hover,
.btn-danger:focus-visible {
  border-color: var(--danger);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.18);
}

/* Small: row-action buttons inside tables. */

.btn-sm {
  padding: 0.32rem 0.85rem;
  font-size: 0.76rem;
}

/* Inline icon glyphs inside buttons. currentColor ties the color to
   whichever button variant it's in (ghost/primary/danger). */

.btn-icon-svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

.btn-sm .btn-icon-svg {
  width: 0.9em;
  height: 0.9em;
}

/* Row-action containers: several buttons packed into one table cell. */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Icon-only row-action button: same variants as .btn (ghost/danger via the
   existing modifier classes) but round and sized just for the glyph, so a
   row of 4-5 actions stays on one line instead of wrapping the row tall. */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-icon .btn-icon-svg {
  width: 1rem;
  height: 1rem;
}

.btn-icon:hover,
.btn-icon:focus-visible {
  border-color: var(--accent);
  color: var(--primary);
  background: var(--info-bg);
  transform: translateY(-1px);
}

.btn-icon.btn-danger {
  color: #a11515;
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.btn-icon.btn-danger:hover,
.btn-icon.btn-danger:focus-visible {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Generic categorical tag/chip -- pair with a color modifier below. */

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tag-purple { color: var(--primary); background: var(--info-bg); border-color: var(--info-border); }
.tag-blue   { color: var(--tag-blue); background: var(--tag-blue-bg); border-color: var(--tag-blue-border); }
.tag-teal   { color: var(--tag-teal); background: var(--tag-teal-bg); border-color: var(--tag-teal-border); }
.tag-rose   { color: var(--tag-rose); background: var(--tag-rose-bg); border-color: var(--tag-rose-border); }
.tag-green  { color: #0f6b32; background: var(--success-bg); border-color: var(--success-border); }
.tag-amber  { color: #a15c00; background: var(--warning-bg); border-color: var(--warning-border); }
.tag-red    { color: #a11515; background: var(--danger-bg); border-color: var(--danger-border); }
.tag-slate  { color: var(--tag-slate); background: var(--tag-slate-bg); border-color: var(--tag-slate-border); }

/*!Cards / panels */
/* -----------------------------
   Cards / panels
------------------------------ */

.card {
  max-width: 720px;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 1.85rem 2rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  position: relative;
}

.card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--deep);
  margin: 0 0 1.25rem;
}

.form-card {
  max-width: 520px;
  margin: 2.5rem auto;
}

/* Full-width content surface (admin list/tool pages). */
.panel {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.panel h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep);
}

/* -----------------------------
   Form layout
------------------------------ */

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

/* Labels */

.form-label {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--deep);
  margin-bottom: 0.35rem;
}

/* Inputs / selects / textareas */

.form-input,
.form-select,
.form-textarea {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  outline: none;
  transition:
    border-color var(--transition-med),
    box-shadow var(--transition-med);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(122, 114, 145, 0.7);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* Textarea specifics */

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Errors */

.form-error-text {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--danger);
}

.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Inline read-only rows on profile page */

.profile-row {
  margin-top: 0.65rem;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.9rem;
}

.profile-row .form-label {
  min-width: 4.5rem;
  margin-bottom: 0;
}

.profile-row span:last-child {
  color: var(--text-main);
}

/*! auth*/
/* Auth card tweaks */

.auth-card {
  max-width: 420px;
}

.auth-header {
  margin-bottom: 1.4rem;
}

.auth-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.9;
  margin-bottom: 0.35rem;
}

.auth-subtitle {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Remember me row */

.auth-remember-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.auth-remember-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  outline: none;
  accent-color: var(--primary);
}

.auth-remember-label {
  margin: 0;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  cursor: pointer;
}

/* Register link */

.auth-register-link {
  margin-top: 1.35rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-register-link a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.auth-register-link a:hover {
  text-decoration: underline;
}

/*!Flash Messages*/
/* -----------------------------
   Flash messages – soft tiles
------------------------------ */

.flash-messages {
  margin-bottom: 1.25rem;
}

.flash {
  padding: 0.75rem 1rem;
  font-size: 0.87rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  border: 1px solid transparent;
}

.flash-success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: #0f6b32;
}

.flash-info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--deep);
}

.flash-error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: #97180f;
}