/*
Theme Name: CheatChat
Theme URI: https://cheatchat.app
Author: CheatChat
Description: Women's dating safety community theme. Features community feed, name search, Oracle Suite AI readings, forum, scam detector, watchlist, safety map, and admin panel. Full WordPress integration with custom post types and database.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: cheatchat
Tags: community, safety, women, dating, forum
*/

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — v2 Modern
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --pink:           #e91e8c;
  --pink-hot:       #f72585;
  --pink-dark:      #c2185b;
  --pink-light:     #fce4ec;
  --pink-pale:      #fdf4f8;
  --pink-glow:      rgba(233, 30, 140, 0.18);
  --pink-glow-soft: rgba(233, 30, 140, 0.08);

  --purple:         #9c27b0;
  --purple-light:   #f3e5f5;
  --purple-pale:    #f8f0fc;
  --gold:           #f59e0b;
  --gold-light:     #fffbeb;

  /* Semantic */
  --red-flag:       #ef4444;
  --red-light:      #fef2f2;
  --green-flag:     #22c55e;
  --green-light:    #f0fdf4;
  --amber-flag:     #f97316;
  --amber-light:    #fff7ed;

  /* Surfaces — cleaner, more airy */
  --bg:             #ffffff;
  --bg-2:           #faf6f9;
  --bg-3:           #f5edf3;
  --bg-elevated:    #fdf5fa;
  --bg-card:        #ffffff;
  --bg-sidebar:     #ffffff;

  /* Cards — sharper definition */
  --card:           #ffffff;
  --card-border:    #ecdde8;
  --card-shadow:    0 1px 2px rgba(0,0,0,0.04), 0 4px 20px rgba(233,30,140,0.05);
  --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.06), 0 12px 40px rgba(233,30,140,0.12);
  --card-shadow-lifted: 0 8px 32px rgba(0,0,0,0.08), 0 16px 48px rgba(233,30,140,0.14);

  /* Text — higher contrast */
  --text:           #160a1b;
  --text-1:         #160a1b;
  --text-2:         #3d2248;
  --text-3:         #8a6e96;
  --text-4:         #c4aece;

  /* Borders */
  --border:         #ecdde8;
  --border-bright:  #d8a8c8;
  --border-focus:   rgba(233,30,140,0.4);

  /* Radius — slightly tighter, more modern */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-pill: 100px;

  /* Layout */
  --nav-width:    252px;
  --content-max:  680px;

  /* Typography scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;

  /* Transitions */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:  180ms;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes pulse-pink {
  0%, 100% { box-shadow: 0 4px 24px var(--pink-glow); }
  50%       { box-shadow: 0 6px 40px rgba(247,37,133,0.38), 0 0 0 6px rgba(233,30,140,0.07); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(2deg); }
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(30px,-20px) scale(1.05); }
  66%       { transform: translate(-20px,15px) scale(0.95); }
}
@keyframes logo-appear {
  0%   { opacity: 0; transform: scale(0.88) translateY(6px); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.92); }
  60%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   BASE RESET
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background: var(--bg-2);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

::selection {
  background: rgba(233,30,140,0.13);
  color: var(--pink-dark);
}

/* ── Scrollbars ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(233,30,140,0.2); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(233,30,140,0.38); }
html { scrollbar-width: thin; scrollbar-color: rgba(233,30,140,0.2) transparent; }

.app-sidebar::-webkit-scrollbar       { width: 3px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(233,30,140,0.25); border-radius: 100px; }
.app-sidebar { scrollbar-width: thin; scrollbar-color: rgba(233,30,140,0.25) transparent; }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
   ═══════════════════════════════════════════════════════════════ */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.font-medium { font-weight: 600; }
.font-bold   { font-weight: 700; }
.font-heavy  { font-weight: 800; }
.font-black  { font-weight: 900; }

.text-muted  { color: var(--text-3); }
.text-pink   { color: var(--pink); }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.cc-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--duration) var(--ease-out),
              transform  var(--duration) var(--ease-out),
              border-color var(--duration);
}
.cc-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-bright);
}
.cc-card.feature-card:hover {
  transform: translateY(-3px);
}

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--duration) var(--ease-out),
              transform  var(--duration) var(--ease-out),
              border-color var(--duration);
}
.card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-bright);
}
a .card:hover, button.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-lifted);
}

.card-flat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Glass variant */
.card-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(233,30,140,0.07), 0 1px 4px rgba(0,0,0,0.04);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1;
  text-decoration: none;
  transition: transform var(--duration) var(--ease-spring),
              box-shadow var(--duration) var(--ease-out),
              background var(--duration),
              opacity var(--duration);
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97) !important; }

/* Primary pink */
.btn-pink {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-hot) 100%);
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 14px 32px;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 4px 20px rgba(233,30,140,0.28), 0 1px 4px rgba(233,30,140,0.15) !important;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform var(--duration) var(--ease-spring),
              box-shadow var(--duration) var(--ease-out);
}
.btn-pink:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(233,30,140,0.36), 0 2px 8px rgba(233,30,140,0.2) !important;
  color: #fff;
}
.btn-pink:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(233,30,140,0.2) !important;
}

.btn-pink-xl {
  padding: 16px 40px;
  font-size: 17px;
  font-weight: 900;
  border-radius: var(--radius-pill);
}

/* Ghost / outline */
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border-bright);
  color: var(--text-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
}
.btn-ghost:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: var(--pink-glow-soft);
}

/* Subtle / secondary */
.btn-subtle {
  background: var(--bg-elevated);
  color: var(--text-2);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
}
.btn-subtle:hover {
  background: var(--pink-pale);
  border-color: var(--border-bright);
  color: var(--pink);
}

.animate-pulse-pink { animation: pulse-pink 2.5s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════════ */
.cc-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--duration), box-shadow var(--duration);
  -webkit-appearance: none;
}
.cc-input:hover {
  border-color: var(--border-bright);
}
.cc-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.1);
}
.cc-input::placeholder { color: var(--text-4); }

/* Custom select */
select.cc-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
  cursor: pointer;
}
select.cc-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e91e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
select.cc-input:hover:not(:focus) { border-color: var(--text-4); }
select.cc-input option {
  background: var(--bg-elevated);
  color: var(--text-1);
  font-size: 14px;
  padding: 8px 12px;
}
select.cc-input option:checked,
select.cc-input option:hover {
  background: rgba(233,30,140,0.08);
  color: var(--pink);
}

/* ─── Input group (icon + input) ── */
.cc-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.cc-input-group .cc-input {
  padding-left: 42px;
}
.cc-input-icon {
  position: absolute;
  left: 14px;
  color: var(--text-4);
  pointer-events: none;
  font-size: 17px;
  display: flex;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES & PILLS
   ═══════════════════════════════════════════════════════════════ */
.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  white-space: nowrap;
}
.cc-badge-pink    { background: var(--pink-light); color: var(--pink-dark); }
.cc-badge-green   { background: var(--green-light); color: #15803d; }
.cc-badge-amber   { background: var(--amber-light); color: #c2410c; }
.cc-badge-red     { background: var(--red-light); color: #b91c1c; }
.cc-badge-purple  { background: var(--purple-light); color: var(--purple); }
.cc-badge-neutral { background: var(--bg-3); color: var(--text-3); }

/* Tag pills */
.cc-tag {
  background: var(--pink-pale);
  color: var(--pink);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
  border: 1px solid rgba(233,30,140,0.15);
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  transition: background var(--duration), border-color var(--duration);
}
.cc-tag:hover {
  background: var(--pink-light);
  border-color: rgba(233,30,140,0.3);
}

/* Long tag — sentence style */
.cc-tag-long {
  background: var(--pink-pale);
  color: var(--pink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  padding: 10px 16px;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(233,30,140,0.15);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: 100%;
  box-sizing: border-box;
}
.cc-tag-long::before {
  content: '#';
  font-weight: 700;
  margin-right: 1px;
}

.cc-tags-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  margin-top: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.cc-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Risk badges */
.risk-high   { background: rgba(233,30,140,0.10); color: var(--pink); font-weight: 700; }
.risk-medium { background: rgba(243,156,18,0.10);  color: #e67e22; font-weight: 700; }
.risk-low    { background: rgba(34,197,94,0.10);   color: #16a34a; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   CATEGORY CARDS (post-new)
   ═══════════════════════════════════════════════════════════════ */
.cc-cat-default {
  border-color: var(--card-border) !important;
  background: #ffffff !important;
  box-shadow: var(--card-shadow) !important;
  transition: all var(--duration) var(--ease-out) !important;
}
.cc-cat-default:hover {
  border-color: var(--border-bright) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
.cc-cat-selected {
  border-color: var(--pink) !important;
  background: var(--pink-light) !important;
  box-shadow: 0 4px 24px rgba(233,30,140,0.2) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════════════ */
.cc-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}
.cc-divider-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cc-divider-label::before,
.cc-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.app-layout {
  display: flex;
  min-height: 100dvh;
}

/* ── Sidebar ── */
.app-sidebar {
  width: var(--nav-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

aside.app-sidebar {
  background-color: #fff !important;
}

/* ── Main content area ── */
.app-main .card {
  padding: 20px;
}
input.cc-input {
  background-color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   NAV — SIDEBAR ITEMS
   ═══════════════════════════════════════════════════════════════ */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
  transition: background var(--duration), color var(--duration);
  cursor: pointer;
}
.nav-item:hover {
  background: var(--pink-pale);
  color: var(--text-2);
}
.nav-item.active,
.nav-item[aria-current="page"] {
  background: var(--pink-light);
  color: var(--pink);
}
.nav-icon {
  font-size: 19px;
  flex-shrink: 0;
}
.nav-label { font-size: var(--text-xs); font-weight: 700; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.07em; padding: 12px 12px 4px; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV
   ═══════════════════════════════════════════════════════════════ */
.top-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  /* needed so the absolute-centred logo works */
  position: sticky;
}
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  height: 66px;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING NAV
   ═══════════════════════════════════════════════════════════════ */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  padding: 0 28px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s;
}
.landing-nav.nav-scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
.landing-nav .btn-pink { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   DARK LANDING
   ═══════════════════════════════════════════════════════════════ */
body.dark-landing {
  background: #0a0210;
  --text-1: #f8f0fc;
  --text-2: rgba(248,240,252,0.82);
  --text-3: rgba(248,240,252,0.52);
  --text-4: rgba(248,240,252,0.32);
  --bg-card: rgba(255,255,255,0.04);
  --bg-elevated: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.09);
  --border-bright: rgba(255,255,255,0.18);
}
body.dark-landing .cc-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
body.dark-landing .cc-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: var(--text-1);
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN LAYOUT (custom frontend panel)
   ═══════════════════════════════════════════════════════════════ */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 224px;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 2px 0 12px rgba(233,30,140,0.04);
}
.admin-main {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  background: var(--bg-2);
}

/* Admin sidebar nav */
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.admin-nav-item:hover {
  background: var(--pink-pale);
  color: var(--text-2);
}
.admin-nav-item.active {
  background: var(--pink-light);
  color: var(--pink);
  font-weight: 700;
}
.admin-nav-section {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 12px 4px;
}

/* Admin stat cards */
.admin-stat {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
}
.admin-stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.admin-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1;
}
.admin-stat-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 6px;
}
.admin-stat-delta.up   { color: #16a34a; }
.admin-stat-delta.down { color: var(--red-flag); }

/* ═══════════════════════════════════════════════════════════════
   WP ADMIN — MODERN OVERRIDES
   These override WordPress's own /wp-admin/ styles.
   ═══════════════════════════════════════════════════════════════ */

/* ── Admin bar ── */
#wpadminbar {
  background: #160a1b !important;
  border-bottom: 1px solid rgba(233,30,140,0.15) !important;
  box-shadow: 0 1px 12px rgba(233,30,140,0.06) !important;
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar .ab-label {
  color: rgba(248,230,244,0.65) !important;
  font-size: 12px !important;
}
#wpadminbar #wp-admin-bar-site-name > .ab-item {
  color: #f472b6 !important;
  font-weight: 700 !important;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-item:hover,
#wpadminbar a.ab-item:hover {
  background: rgba(233,30,140,0.15) !important;
  color: #f9a8d4 !important;
}
#wpadminbar .menupop .ab-sub-wrapper {
  background: #1e0a25 !important;
  border: 1px solid rgba(233,30,140,0.15) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
}
#wpadminbar .ab-submenu .ab-item:hover {
  background: rgba(233,30,140,0.12) !important;
  color: #f472b6 !important;
}

/* ── Left sidebar / menu ── */
#adminmenuwrap,
#adminmenu,
#adminmenuback,
#adminmenushadow {
  background: #160a1b !important;
  border-right: 1px solid rgba(233,30,140,0.1) !important;
}
#adminmenu li a {
  color: rgba(240,210,230,0.6) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-left: 2px solid transparent !important;
  transition: background 0.15s, color 0.15s !important;
}
#adminmenu li a:hover,
#adminmenu li:hover > a {
  background: rgba(233,30,140,0.1) !important;
  color: rgba(240,210,230,0.95) !important;
}
#adminmenu li.current > a,
#adminmenu li.wp-has-current-submenu > a,
#adminmenu li.current > a:focus,
#adminmenu li.wp-has-current-submenu > a:focus {
  background: rgba(233,30,140,0.18) !important;
  color: #f472b6 !important;
  border-left: 2px solid #e91e8c !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
#adminmenu .wp-submenu {
  background: #100618 !important;
  border-left: none !important;
  padding: 4px 0 8px !important;
}
#adminmenu .wp-submenu .wp-submenu-head {
  color: rgba(240,210,230,0.35) !important;
  font-size: 11px !important;
}
#adminmenu .wp-submenu a {
  color: rgba(240,210,230,0.55) !important;
  font-size: 12.5px !important;
  padding: 5px 5px 5px 30px !important;
}
#adminmenu .wp-submenu a:hover {
  color: #f472b6 !important;
  background: rgba(233,30,140,0.08) !important;
}
#adminmenu .wp-menu-image:before {
  color: rgba(240,210,230,0.45) !important;
}
#adminmenu li.current .wp-menu-image:before,
#adminmenu li.wp-has-current-submenu .wp-menu-image:before {
  color: #e91e8c !important;
}
#adminmenu .wp-menu-name {
  padding-left: 8px !important;
}
#collapse-menu, #collapse-button {
  color: rgba(240,210,230,0.4) !important;
}
#collapse-menu:hover { color: #f472b6 !important; }

/* ── Main content bg ── */
#wpcontent, #wpbody-content, #wpbody {
  background: #faf6f9 !important;
}
#wpfooter {
  border-top: 1px solid var(--border) !important;
  color: var(--text-4) !important;
}
#wpfooter a { color: var(--pink) !important; }

/* Page titles */
.wrap h1 {
  color: var(--text-1) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}
.wrap h2 {
  color: var(--text-2) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* ── Postboxes / meta boxes ── */
.postbox {
  background: #fff !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}
.postbox .postbox-header {
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 12px 16px !important;
}
.postbox h2.hndle,
.postbox .hndle {
  color: var(--text-1) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 !important;
}
.postbox .handlediv button.handlediv:before {
  color: var(--text-4) !important;
}
.postbox .inside {
  padding: 16px !important;
}

/* ── Primary buttons ── */
.button-primary,
input[type="submit"].button-primary,
#publish {
  background: linear-gradient(135deg, #e91e8c, #f72585) !important;
  border-color: #e91e8c !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(233,30,140,0.25) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 7px 18px !important;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s !important;
}
.button-primary:hover,
input[type="submit"].button-primary:hover,
#publish:hover {
  background: linear-gradient(135deg, #d0177f, #e91e8c) !important;
  border-color: #d0177f !important;
  box-shadow: 0 4px 20px rgba(233,30,140,0.35) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.button-primary:active { transform: scale(0.97) !important; }

/* Secondary / default buttons */
.button,
.button-secondary,
.button-large {
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-color: var(--border-bright) !important;
  color: var(--text-2) !important;
  background: #fff !important;
  font-weight: 600 !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}
.button:hover,
.button-secondary:hover {
  border-color: var(--pink) !important;
  color: var(--pink) !important;
  background: var(--pink-pale) !important;
}

/* ── Form fields ── */
#wpcontent input[type="text"],
#wpcontent input[type="email"],
#wpcontent input[type="password"],
#wpcontent input[type="search"],
#wpcontent input[type="url"],
#wpcontent input[type="number"],
#wpcontent textarea,
#wpcontent select {
  border: 1.5px solid var(--border-bright) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: #fff !important;
  color: var(--text-1) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
#wpcontent input[type="text"]:focus,
#wpcontent input[type="email"]:focus,
#wpcontent input[type="search"]:focus,
#wpcontent textarea:focus,
#wpcontent select:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(233,30,140,0.1) !important;
  outline: none !important;
}

/* ── Tables (users, posts, plugins, etc) ── */
.wp-list-table {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: var(--card-shadow) !important;
}
.wp-list-table thead th,
.wp-list-table tfoot th {
  background: #faf4f8 !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px !important;
}
.wp-list-table th a,
.wp-list-table th a:hover {
  color: var(--text-2) !important;
}
.wp-list-table th a:hover { color: var(--pink) !important; }
.wp-list-table tbody td { 
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
.wp-list-table tbody tr:last-child td { border-bottom: none !important; }
.wp-list-table tbody tr:hover td {
  background: #fdf5f9 !important;
}
.wp-list-table .check-column input[type="checkbox"] {
  accent-color: var(--pink);
}

/* Tablenav (bulk actions, pagination bar) */
.tablenav {
  background: transparent !important;
}
.tablenav .tablenav-pages a,
.tablenav .tablenav-pages span {
  border-radius: 6px !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
.tablenav .tablenav-pages .current-page {
  border-color: var(--pink) !important;
  color: var(--pink) !important;
}

/* ── Status row count pills ── */
.subsubsub a { color: var(--text-3) !important; }
.subsubsub a:hover, .subsubsub .current { color: var(--pink) !important; }

/* ── Notices ── */
.notice,
div.notice,
.update-nag,
.updated,
.error {
  border-radius: 8px !important;
  border-left-width: 3px !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
.notice-success, .updated {
  border-left-color: #22c55e !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}
.notice-error, .error {
  border-left-color: var(--red-flag) !important;
  background: var(--red-light) !important;
  color: #b91c1c !important;
}
.notice-warning {
  border-left-color: var(--amber-flag) !important;
  background: var(--amber-light) !important;
  color: #c2410c !important;
}
.notice-info {
  border-left-color: #3b82f6 !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* ── Dashboard widgets ── */
#dashboard-widgets .postbox-container .postbox {
  border-radius: var(--radius) !important;
}
.welcome-panel {
  background: linear-gradient(135deg, #1e0a25, #2d0f2a) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 24px rgba(233,30,140,0.15) !important;
  color: rgba(240,210,230,0.75) !important;
  overflow: hidden !important;
}
.welcome-panel h2, .welcome-panel .welcome-panel-column h3 {
  color: #f472b6 !important;
}
.welcome-panel p { color: rgba(240,210,230,0.65) !important; }
.welcome-panel a { color: #f9a8d4 !important; }
.welcome-panel .button-primary {
  background: linear-gradient(135deg, #e91e8c, #f72585) !important;
  border: none !important;
}
.welcome-panel .button {
  border-color: rgba(233,30,140,0.3) !important;
  color: #f9a8d4 !important;
  background: rgba(233,30,140,0.1) !important;
}

/* Activity widget */
#dashboard_activity .inside { padding: 0 !important; }
#dashboard_activity .activity-block { padding: 12px 16px !important; border-bottom: 1px solid var(--border) !important; }
#dashboard_activity h4 { color: var(--text-3) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; }
#dashboard_activity li a { color: var(--pink) !important; }

/* Quick draft */
#dashboard_quick_press label { color: var(--text-3) !important; font-size: 12px !important; font-weight: 700 !important; }

/* ── Media library ── */
.attachment.selected .thumbnail { box-shadow: 0 0 0 3px var(--pink) !important; border-radius: 6px !important; }
.media-frame-toolbar .media-toolbar-primary .button { border-radius: 8px !important; }

/* ── Post editor ── */
#titlediv #title {
  border-radius: 10px !important;
  border-color: var(--border-bright) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  padding: 12px 16px !important;
}
#titlediv #title:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(233,30,140,0.1) !important;
}
.editor-styles-wrapper { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
#wp-content-editor-tools { border-radius: 10px 10px 0 0 !important; overflow: hidden; }
#wp-content-wrap { border-radius: 10px !important; border-color: var(--border-bright) !important; overflow: hidden; }

/* Publish box */
#submitdiv .inside { padding: 12px 16px !important; }
#submitdiv .misc-pub-section { border-color: var(--border) !important; font-size: 13px !important; }
#submitdiv #major-publishing-actions { border-color: var(--border) !important; background: var(--bg-elevated) !important; }

/* ── Plugin cards ── */
.plugin-card {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
}
.plugin-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-2px) !important;
}
.plugin-card .plugin-card-top { border-bottom: 1px solid var(--border) !important; }
.plugin-card .button-primary { margin-right: 8px !important; }

/* ── Settings pages ── */
.form-table th {
  color: var(--text-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 16px 10px 16px 0 !important;
}
.form-table td { padding: 12px 10px !important; }
.form-table tr { border-bottom: 1px solid var(--border) !important; }
.form-table tr:last-child { border-bottom: none !important; }

/* ── Screen options / help tabs ── */
#screen-options-wrap, #contextual-help-wrap {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
}
#screen-options-wrap input[type="checkbox"] { accent-color: var(--pink); }

/* ── Login page ── */
body.login {
  background: #0a0210 !important;
}
body.login #login {
  background: rgba(30,10,40,0.9);
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid rgba(233,30,140,0.2);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(233,30,140,0.08);
  backdrop-filter: blur(20px);
}
body.login h1 a {
  filter: brightness(1.2) saturate(1.1);
}
body.login label {
  color: rgba(248,210,234,0.7) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
body.login input[type="text"],
body.login input[type="password"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(233,30,140,0.2) !important;
  border-radius: 10px !important;
  color: #f8f0fc !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(233,30,140,0.15) !important;
  outline: none !important;
}
body.login .button-primary {
  width: 100% !important;
  background: linear-gradient(135deg, #e91e8c, #f72585) !important;
  border-color: #e91e8c !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(233,30,140,0.35) !important;
  text-shadow: none !important;
  letter-spacing: 0.01em !important;
}
body.login .button-primary:hover {
  background: linear-gradient(135deg, #d0177f, #e91e8c) !important;
  transform: translateY(-1px) !important;
}
body.login #nav a,
body.login #backtoblog a {
  color: rgba(248,210,234,0.5) !important;
  font-size: 12px !important;
  transition: color 0.15s !important;
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
  color: #f472b6 !important;
}
body.login .privacy-policy-page-link a {
  color: rgba(248,210,234,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE TAB
   ═══════════════════════════════════════════════════════════════ */
div#profiletab button {
  border: none !important;
  outline: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  transition: background 0.15s, color 0.15s !important;
}
div#profiletab button:hover,
div#profiletab button:focus,
div#profiletab button:active {
  background-color: var(--pink) !important;
  border: none !important;
  outline: none !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL OVERLAYS
   ═══════════════════════════════════════════════════════════════ */
.cc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  padding: 16px;
  background: rgba(16,4,24,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cc-modal-overlay.cc-modal-overlay--open {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.cc-modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(233,30,140,0.18), 0 8px 32px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: pop-in 0.22s var(--ease-spring) both;
}
.cc-modal-header {
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cc-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
  font-size: 18px;
  transition: background 0.15s, color 0.15s;
}
.cc-modal-close:hover { background: var(--pink-pale); color: var(--pink); }

/* ── Flag modal buttons ── */
.cc-flag-submit-btn {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #e91e8c, #f72585) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(233,30,140,0.30) !important;
  transition: transform .15s, box-shadow .15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.cc-flag-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 28px rgba(233,30,140,0.42) !important;
}
.cc-flag-submit-btn:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.cc-flag-done-btn {
  display: block !important;
  width: 100% !important;
  padding: 13px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #e91e8c, #f72585) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-align: center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.cc-flag-level-btn {
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 10px 6px !important;
  background: var(--bg-elevated) !important;
  color: var(--text-3) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all .15s !important;
  line-height: 1.4 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SHARE SHEET
   ═══════════════════════════════════════════════════════════════ */
.cc-share-sheet {
  position: fixed !important;
  inset: 0;
  z-index: 99999 !important;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
}
.cc-share-sheet.open { display: flex !important; }
.cc-share-inner {
  background: var(--bg-card, #1a1a2e);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 20px 20px 0 0;
  padding: 20px;
  width: 100%;
  max-width: 520px;
  animation: slide-up 0.22s var(--ease-out) both;
}
.cc-share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.cc-share-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-2, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 14px;
  padding: 14px 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3, #aaa);
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.cc-share-opt:hover { border-color: var(--pink, #e91e8c); color: var(--text-1, #fff); }
.cc-share-opt span { font-size: 22px; }

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.gradient-text-animated {
  background: linear-gradient(135deg, var(--pink), var(--purple), var(--pink-hot));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}
.marquee-track {
  display: flex;
  align-items: center;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
  width: max-content;
}

/* Fluid helpers */
img, video { max-width: 100%; height: auto; }
.cc-resp-wrap { width: 100%; max-width: 100%; overflow-x: hidden; }

[style*="max-width:680px"], [style*="max-width: 680px"],
[style*="max-width:720px"], [style*="max-width: 720px"],
[style*="max-width:760px"], [style*="max-width: 760px"],
[style*="max-width:800px"], [style*="max-width: 800px"],
[style*="max-width:640px"], [style*="max-width: 640px"] {
  width: 100% !important;
  box-sizing: border-box;
}

/* ── WP resets ── */
.wp-block-image { margin: 0; }
p { margin: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 900; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
a { color: inherit; }
img { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ── 1024px ── */
@media (max-width: 1024px) {
  :root { --nav-width: 220px; }
  .app-main { max-width: 100%; padding: 0 20px; }
  .landing-hero-ctas { flex-direction: column; align-items: center; }
  .cc-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  .app-sidebar   { display: none !important; }
  .top-bar       { display: flex; }
  .bottom-nav    { display: flex; }
  .app-main      { padding: 0 14px; padding-bottom: 84px; max-width: 100%; }
  .admin-sidebar { display: none !important; }
  .admin-main    { padding: 16px; }
  .admin-layout  { display: block; }
  .md-show       { display: none !important; }
  .homevideo { height: 90vh; }
  .homevideo video { object-position: center top; }
  .landing-nav { padding: 0 16px; height: 60px; }
  .cc-hero-section { padding: 40px 16px !important; min-height: 70vh !important; }
  .cc-hero-section h1 { font-size: clamp(28px, 8vw, 48px) !important; }
  a[style*="font-size:22px"][style*="padding:24px 56px"] { font-size: 16px !important; padding: 16px 28px !important; gap: 8px !important; }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))"],
  [style*="grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))"] { grid-template-columns: 1fr !important; }
  #cc-forum-wrap,
  [style*="max-width:680px"], [style*="max-width:720px"], [style*="max-width:640px"] { padding-left: 0 !important; padding-right: 0 !important; }
  .cc-feed-header-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cc-img-grid { gap: 4px !important; }
  .cc-forum-thread-item { padding: 14px 12px !important; }
  [style*="grid-template-columns:repeat(4,1fr)"][style*="margin-bottom:24px"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  [style*="grid-template-columns:repeat(3,1fr)"][style*="margin-bottom:16px"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:10px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"][style*="margin-bottom:32px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"][style*="margin-bottom:28px"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:10px"][style*="margin-bottom:20px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:12px"][style*="margin-bottom:32px"] { grid-template-columns: 1fr 1fr !important; }
  .cc-share-inner { border-radius: 20px 20px 0 0; padding: 16px; }
  .cc-share-grid  { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cc-notif-item { padding: 12px 14px !important; gap: 10px !important; }
  .cc-post-step  { padding: 16px !important; }
  .cc-auth-card  { padding: 24px 18px !important; }
  .cc-auth-tabs  { font-size: 13px !important; }
  /* WP admin tablet */
  #adminmenuwrap { display: none; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .app-main   { padding: 0 12px; padding-bottom: 84px; }
  .top-bar    { padding: 0 12px; height: 52px; }
  .bottom-nav { height: 60px; }
  .bottom-nav a, .bottom-nav button { font-size: 10px !important; gap: 2px !important; }
  .bottom-nav .nav-icon { font-size: 18px !important; }
  .cc-card  { padding: 14px !important; border-radius: 14px !important; }
  .cc-feed-card { padding: 14px !important; border-radius: 14px !important; margin-bottom: 12px !important; }
  .btn-pink { font-size: 14px !important; padding: 12px 24px !important; }
  .btn-pink-xl { font-size: 14px !important; padding: 13px 24px !important; }
  a[style*="font-size:22px"][style*="padding:24px 56px"] { font-size: 14px !important; padding: 13px 20px !important; border-radius: 60px !important; }
  .cc-hero-section { padding: 28px 14px !important; }
  .cc-hero-section p { font-size: 14px !important; }
  [style*="gap:24px 40px"] { gap: 16px 24px !important; }
  #cc-feed-tabs [style*="display:flex"] { gap: 6px !important; padding-bottom: 6px !important; }
  #cc-feed-tabs button { font-size: 11px !important; padding: 7px 12px !important; }
  .cc-action-bar { gap: 0 !important; }
  .cc-action-btn { font-size: 12px !important; padding: 7px 10px 7px 0 !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 8px !important; }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:14px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:10px"] { grid-template-columns: 1fr !important; }
  [style*="width:64px;height:64px"] { width: 48px !important; height: 48px !important; font-size: 20px !important; border-radius: 12px !important; }
  .cc-post-step { padding: 12px !important; }
  .cc-forum-thread-item { padding: 12px !important; }
  .cc-forum-thread-item h3 { font-size: 14px !important; }
  .cc-oracle-card { padding: 16px !important; }
  [style*="grid-template-columns:repeat(4,1fr)"][style*="margin-bottom:24px"] { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-notif-item { padding: 10px 12px !important; }
  #cc-safety-map { height: 55vh !important; }
  .cc-scam-result { padding: 14px !important; }
  .cc-dossier-section { padding: 14px !important; }
  input[style*="height:54px"] { height: 48px !important; font-size: 14px !important; }
  .cc-share-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .cc-share-opt  { padding: 10px 6px !important; font-size: 10px !important; }
  .cc-share-opt span { font-size: 18px !important; }
  .cc-auth-card  { padding: 20px 14px !important; border-radius: 16px !important; }
  .cc-auth-title { font-size: 20px !important; }
  .admin-main { padding: 12px; }
  .marquee-track { animation-duration: 28s; }
  .landing-nav { padding: 0 12px; height: 58px; }
  .landing-nav__logo img  { height: 42px !important; }
  .landing-nav__ghost-btn { font-size: 11px !important; padding: 7px 10px !important; }
  .landing-nav__cta       { font-size: 11px !important; padding: 8px 12px !important; }
}

/* ── 360px ── */
@media (max-width: 360px) {
  .app-main { padding: 0 10px; padding-bottom: 76px; }
  .landing-nav__ghost-btn { display: none; }
  .landing-nav__logo img  { height: 36px !important; }
  .landing-nav__cta       { font-size: 11px !important; padding: 8px 14px !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr !important; gap: 8px !important; }
  .cc-cat-grid { grid-template-columns: 1fr 1fr !important; }
  .btn-pink { font-size: 13px !important; padding: 12px 20px !important; }
  .cc-feed-card { padding: 12px !important; }
  .cc-card { padding: 12px !important; }
  .bottom-nav { height: 56px; }
}

/* ── Landscape mobile ── */
@media (max-height: 500px) and (orientation: landscape) {
  .homevideo { height: 100vw; max-height: 100dvh; }
  .bottom-nav { display: none !important; }
  .app-main { padding-bottom: 20px; }
}
/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWER NAV
   ═══════════════════════════════════════════════════════════════ */

/* Drawer open state */
#cc-mobile-drawer.is-open {
  transform: translateX(0) !important;
}

/* Smooth scroll inside drawer */
#cc-mobile-drawer > div:last-of-type {
  -webkit-overflow-scrolling: touch;
}

/* Dark mode support for drawer */
@media (prefers-color-scheme: dark) {
  #cc-mobile-drawer {
    background: var(--bg-base, #0d0d0f) !important;
  }
}

/* Hamburger button — only visible on mobile */
.cc-hamburger {
  display: none;
}
@media (max-width: 768px) {
  .cc-hamburger {
    display: flex;
  }
  /* Make top-bar position relative so absolute logo centres correctly */
  .top-bar {
    position: sticky;
  }
}

/* Hide drawer on desktop */
@media (min-width: 769px) {
  #cc-mobile-drawer,
  #cc-drawer-overlay {
    display: none !important;
  }
}