/* =====================================================================
   AllinWriter — "Bright Authority" theme layer
   Ports the allinwriter.com design system onto the Laravel app.
   Loaded AFTER app.css / app.extra.css so it overrides brand colors,
   radius, shadows, buttons and adds motion. Excludes the AI Designer.
   Source of truth: allinwriter.com client/src/index.css
   ===================================================================== */

:root {
  /* Brand — exact allinwriter.com/admin palette (OKLCH -> sRGB) */
  --aw-primary: #7E58EB;
  --aw-primary-600: #7048D9;
  --aw-primary-700: #5F37C0;
  --aw-primary-100: #EFEBFF;
  --aw-primary-050: #F4F1FF;
  --aw-primary-grad-a: #7E58EB;
  --aw-primary-grad-b: #A85AD9;

  /* Neutrals */
  --aw-bg: #FBF9FE;
  --aw-fg: #161726;
  --aw-card: #FFFFFF;
  --aw-secondary: #F3F0F9;
  --aw-secondary-fg: #38384F;
  --aw-muted: #F4F2F8;
  --aw-muted-fg: #676777;
  --aw-accent: #EFEBFF;
  --aw-accent-fg: #3A3261;
  --aw-border: #E2E0E7;

  /* Accents */
  --aw-mint: #65DFAF;
  --aw-mint-050: #E6FAF3;
  --aw-mint-fg: #004027;
  --aw-coral: #F3625D;
  --aw-coral-050: #FFEEED;
  --aw-danger: #EA3C3F;

  /* Shape & motion */
  --aw-radius: 16px;
  --aw-radius-sm: 12px;
  --aw-radius-lg: 20px;
  --aw-shadow-sm: 0 1px 2px rgba(60,40,110,.05), 0 6px 18px -10px rgba(70,50,130,.14);
  --aw-shadow: 0 1px 2px rgba(60,40,110,.05), 0 12px 32px -12px rgba(70,50,130,.16);
  --aw-shadow-lg: 0 24px 60px -22px rgba(70,50,130,.30);
  --aw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --aw-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Remap Bootstrap 4 CSS variables where used */
  --primary: #7E58EB;
  --indigo: #7E58EB;
  --purple: #7E58EB;
}

/* ---------- Base canvas & typography ---------- */
/* Fonts mirror allinwriter.com: Sora (display) + Inter Tight (body) */
/* Global gradient base: applied on html + body so EVERY authenticated page
   (including short pages) shows the same soft lilac + violet/mint radial glow
   as the Dashboard, eliminating the default grey/blue html backdrop. */
html {
  background-color: var(--aw-bg);
}
body {
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(124,92,252,.07) 0%, transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(47,211,165,.06) 0%, transparent 50%),
    var(--aw-bg);
  background-attachment: fixed;
  color: var(--aw-fg);
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.card-header, .modal-title, .nui-heading, .navbar-brand, .page-title {
  font-family: "Sora", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.02em;
  color: var(--aw-fg);
}

/* ---------- Content-area background (match website /admin) ----------
   The app content column (div.content) gets the website's soft lilac base
   plus subtle radial gradients (violet top-right, mint bottom-left). */
.d-flex.flex-column.flex-fill.content,
#header ~ .d-flex .content,
.content {
  background: transparent;
}

/* Many inner pages (Templates, Journalists, Documents, Account, etc.) wrap
   their content in a solid `.bg-base-1` panel (light grey-blue) that hides the
   body gradient. Inside the authenticated `.content` column we make that panel
   transparent so every page shows the same Dashboard gradient. The theme layer
   is already excluded on /login, /register and the image-editor, so those pages
   keep their own backgrounds. */
.content .bg-base-1,
.content.bg-base-1 {
  background-color: transparent !important;
  background: transparent !important;
}

/* ---------- Links ---------- */
a {
  color: var(--aw-primary);
  transition: color .15s var(--aw-ease-out);
}
a:hover { color: var(--aw-primary-700); }

/* ---------- Brand color remaps ---------- */
.text-primary, a.text-primary { color: var(--aw-primary) !important; }
.bg-primary { background-color: var(--aw-primary) !important; }
.border-primary { border-color: var(--aw-primary) !important; }

/* Focus rings */
.form-control:focus,
.custom-select:focus,
.form-check-input:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--aw-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, .15);
  outline: 0;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 10px;
  font-weight: 600;
  transition: transform .16s var(--aw-ease-out),
              box-shadow .2s var(--aw-ease-out),
              background-color .2s var(--aw-ease-out),
              filter .2s var(--aw-ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--aw-primary);
  border-color: var(--aw-primary);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(124, 92, 252, .6);
}
.btn-primary:hover {
  background-color: var(--aw-primary-600);
  border-color: var(--aw-primary-600);
  filter: brightness(1.03);
  box-shadow: 0 12px 26px -10px rgba(124, 92, 252, .7);
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(124, 92, 252, .35);
}
.btn-outline-primary {
  color: var(--aw-primary);
  border-color: var(--aw-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--aw-primary);
  border-color: var(--aw-primary);
  color: #fff;
}
.btn-success { background-color: var(--aw-mint); border-color: var(--aw-mint); color:#08483a; }
.btn-success:hover { background-color:#28c199; border-color:#28c199; }
.btn-danger { background-color: var(--aw-danger); border-color: var(--aw-danger); }

.btn-rounded, .rounded-pill.btn, .btn.rounded-pill { border-radius: 999px !important; }

/* Slide-shine on primary CTAs */
.btn-primary,
.shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary > *, .shine > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
  .btn-primary::before,
  .shine::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
    transform: translateX(-160%) skewX(-18deg);
    transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
    z-index: 1;
  }
  .btn-primary:hover::before,
  .shine:hover::before { transform: translateX(220%) skewX(-18deg); }
}

/* ---------- Badges ---------- */
.badge-primary { background-color: var(--aw-primary); color:#fff; }
.badge-success { background-color: var(--aw-mint-050); color: var(--aw-mint-fg); }
.badge-danger  { background-color: var(--aw-coral-050); color: var(--aw-coral); }
.badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; }

/* ---------- Cards (shadowless, border-only — like /admin/authors) ---------- */
.card,
.new-design-card {
  background: var(--aw-card);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius);
  box-shadow: none;
  transition: transform .25s var(--aw-ease-out), border-color .2s var(--aw-ease-out);
}
.new-design-card-curved { border-radius: var(--aw-radius); }
.new-design-card-white { background: var(--aw-card); }

/* Interactive template/tool cards: subtle lift + border emphasis on hover (no heavy shadow) */
.new-design-card.group:hover,
a.new-design-card:hover,
.new-design-card[data-template]:hover {
  transform: translateY(-2px);
  border-color: rgba(126,88,235,.4);
}

/* ---------- Forms ---------- */
.form-control, .custom-select, .input {
  border-radius: 10px;
  border: 1px solid var(--aw-border);
  transition: border-color .15s var(--aw-ease-out), box-shadow .15s var(--aw-ease-out);
}

/* ---------- Tables ---------- */
.table thead th {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  color: var(--aw-muted-fg);
  border-bottom: 1px solid var(--aw-border);
  background: rgba(124,92,252,.035);
}
.table td, .table th { border-top: 1px solid var(--aw-border); }
.table-hover tbody tr { transition: background-color .15s var(--aw-ease-out); }
.table-hover tbody tr:hover { background-color: rgba(124,92,252,.04); }

/* ---------- Utility: gradient text / soft backgrounds ---------- */
.aw-text-gradient {
  background: linear-gradient(100deg, var(--aw-primary-grad-a), var(--aw-primary-grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.aw-soft-bg { background: var(--aw-secondary); }
.card-soft {
  background: var(--aw-card);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius);
  box-shadow: none;
}

/* ---------- Reveal / micro-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes awFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .aw-reveal { animation: awFadeUp .5s var(--aw-ease-out) both; }
}

/* ---------- Modals / popups ---------- */
.modal-content {
  border: 0;
  border-radius: var(--aw-radius);
  box-shadow: var(--aw-shadow-lg);
  overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--aw-border); }
@media (prefers-reduced-motion: no-preference) {
  .modal.fade .modal-dialog {
    transition: transform .28s var(--aw-ease-out), opacity .28s var(--aw-ease-out);
    transform: translateY(8px) scale(.98);
  }
  .modal.show .modal-dialog { transform: none; }
}

/* ---------- Nav / sidebar active state ---------- */
.nav-link.active,
.sidebar .active > a,
.menu-item.active,
a.active.menu-link {
  color: var(--aw-primary) !important;
}

/* Selection */
::selection { background: rgba(124,92,252,.22); }


/* =====================================================================
   SIDEBAR / MENU — match allinwriter.com/admin
   Targets the app slide-menu (#slide-menu / .slide-menu) used on the
   whole Laravel app (user + admin). Restyles look only; the collapse
   submenu behavior is preserved (Bootstrap data-toggle="collapse").
   ===================================================================== */

/* Sidebar shell: white "card" column with a right border, soft shadow */
#slide-menu.slide-menu,
nav.slide-menu {
  background: var(--aw-card) !important;
  border-right: 1px solid var(--aw-border);
  box-shadow: 0 0 0 1px rgba(70,50,130,.02), 12px 0 32px -24px rgba(70,50,130,.18) !important;
}

/* Brand block at the top */
#slide-menu .navbar-brand .logo img { max-height: 34px; width: auto; }

/* "MENU" section label */
#slide-menu .text-uppercase.text-muted {
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--aw-muted-fg) !important;
}

/* The scrollable nav area */
#slide-menu .sidebar { padding: .1rem .625rem; }

/* Base nav links inside the sidebar (both top-level and submenu) */
#slide-menu .sidebar .nav-link,
#slide-menu .sidebar a.nav-link {
  position: relative;
  display: flex !important;
  align-items: center !important;
  margin: 1px .25rem;
  padding: .34rem .7rem !important;
  border-radius: 11px;
  color: #4b4863 !important;                 /* foreground/70 */
  font-weight: 600;
  font-size: .89rem;
  line-height: 1.1;
  transition: background-color .16s var(--aw-ease-out),
              color .16s var(--aw-ease-out),
              transform .16s var(--aw-ease-out);
}

/* Icons in nav */
#slide-menu .sidebar .nav-link .sidebar-icon svg,
#slide-menu .sidebar .nav-link svg.fill-current {
  color: #8b88a3;
  transition: color .16s var(--aw-ease-out);
}

/* Hover state: soft violet accent bg */
#slide-menu .sidebar .nav-link:hover {
  background: var(--aw-accent);
  color: var(--aw-fg) !important;
  text-decoration: none;
}
#slide-menu .sidebar .nav-link:hover .sidebar-icon svg,
#slide-menu .sidebar .nav-link:hover svg.fill-current {
  color: var(--aw-primary);
}

/* Active state: solid violet fill + white text (like admin website) */
#slide-menu .sidebar .nav-link.active,
#slide-menu .sidebar .nav-link.active:hover,
#slide-menu .sidebar .nav-link.active:focus {
  background: var(--aw-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -10px rgba(124,92,252,.7);
}
#slide-menu .sidebar .nav-link.active:hover .sidebar-icon svg,
#slide-menu .sidebar .nav-link.active:hover svg.fill-current { color: #fff !important; }
#slide-menu .sidebar .nav-link.active .sidebar-icon svg,
#slide-menu .sidebar .nav-link.active svg.fill-current {
  color: #fff !important;
}
#slide-menu .sidebar .nav-link.active .text-muted { color: rgba(255,255,255,.85) !important; }

/* Expand caret on parent items */
#slide-menu .sidebar .nav-link .sidebar-expand svg {
  transition: transform .2s var(--aw-ease-out);
  color: #b4b1c6;
}
#slide-menu .sidebar .nav-link[aria-expanded="true"] .sidebar-expand svg {
  transform: rotate(180deg);
  color: var(--aw-primary);
}

/* Submenu container: subtle inset with a guide line */
#slide-menu .sidebar .sub-menu {
  margin: 2px .5rem 6px 1.35rem;
  padding-left: .5rem;
  border-left: 2px solid var(--aw-border);
}
#slide-menu .sidebar .sub-menu .nav-link {
  font-size: .86rem;
  font-weight: 500;
  padding: .45rem .7rem !important;
  color: #6b6880 !important;
}
#slide-menu .sidebar .sub-menu .nav-link.active {
  background: var(--aw-primary) !important;
  color: #fff !important;
}

/* Credits card near the bottom */
#slide-menu a[href*="account/plan"],
#slide-menu a[href$="/plan"] {
  display: block;
  margin: .25rem .75rem !important;
  padding: .75rem .85rem !important;
  border-radius: 14px;
  background: var(--aw-secondary);
  border: 1px solid var(--aw-border);
}
#slide-menu a[href*="account/plan"]:hover { background: var(--aw-accent); }
#slide-menu .progress { background-color: #e7e4f2; border-radius: 999px; overflow: hidden; }
#slide-menu .progress-bar { background-color: var(--aw-primary); }

/* CTA button in sidebar → pill */
#slide-menu .get-more-credits-sidebar,
#slide-menu .start-free-trial-sidebar,
#slide-menu #skip-trial-button {
  border-radius: 999px !important;
  font-weight: 700;
  width: 100%;
}

/* Sidebar footer (user + logout) */
#slide-menu .sidebar-footer {
  border-top: 1px solid var(--aw-border);
  background: rgba(248,247,251,.6);
}
#slide-menu .sidebar-footer .rounded-circle {
  border: 2px solid var(--aw-border);
}
#slide-menu .sidebar-footer .small.font-weight-medium { color: var(--aw-primary); }

/* Admin/User toggle icon buttons at top */
#slide-menu .text-secondary svg.fill-current { color: #8b88a3; }
#slide-menu .text-secondary:hover svg.fill-current { color: var(--aw-primary); }

/* Mobile top header bar */
#header.header {
  background: var(--aw-card) !important;
  border-bottom: 1px solid var(--aw-border);
  box-shadow: 0 1px 0 rgba(70,50,130,.04) !important;
}


/* ---- Override base app.css sidebar defaults (old purple #a34df4, right-border, accent bg) ---- */
#slide-menu .sidebar .nav-link,
#slide-menu .sidebar .nav-link.active,
#slide-menu .sidebar .nav-link[aria-expanded="true"] {
  border-right: 0 !important;
  border-left: 0 !important;
}
/* Parent item that is expanded but NOT the active page: keep it light, not filled */
#slide-menu .sidebar .nav-link[aria-expanded="true"]:not(.active) {
  background: var(--aw-accent) !important;
  color: var(--aw-fg) !important;
}
#slide-menu .sidebar .nav-link[aria-expanded="true"]:not(.active) .sidebar-icon svg,
#slide-menu .sidebar .nav-link[aria-expanded="true"]:not(.active) svg.fill-current {
  color: var(--aw-primary) !important;
}
/* Sub-menu wrapper should be transparent (base gives it accent bg) */
#slide-menu .sidebar .sub-menu { background: transparent !important; }
#slide-menu .sidebar .sub-menu .nav-link:not(.active):hover { background: var(--aw-accent) !important; }


/* =====================================================================
   FORMS + CONTAINING BOXES/CARDS — match allinwriter.com/admin
   ===================================================================== */

/* ---- Cards / boxes that contain forms & content (shadowless, like /admin) ---- */
.card {
  background: var(--aw-card) !important;
  border: 1px solid var(--aw-border) !important;
  border-radius: var(--aw-radius) !important;      /* 16px, like admin rounded-2xl */
  box-shadow: none !important;
  transition: border-color .2s var(--aw-ease-out);
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--aw-border) !important;
  padding: 1rem 1.35rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card-body { padding: 1.35rem !important; border-top: 0 !important; }
.card-footer {
  background: rgba(248,247,251,.5) !important;
  border-top: 1px solid var(--aw-border) !important;
  padding: 1rem 1.35rem !important;
}
/* generic .box containers (shadowless) */
.box {
  background: var(--aw-card);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius);
  box-shadow: none;
}

/* ---- Inputs / selects / textareas ---- */
.form-control,
.custom-select,
textarea.form-control,
.nui-input,
.nui-input-default {
  border-radius: 12px !important;
  border: 1px solid var(--aw-border) !important;
  background-color: #fff;
  color: var(--aw-fg);
  transition: border-color .15s var(--aw-ease-out), box-shadow .15s var(--aw-ease-out);
}
.form-control::placeholder, textarea::placeholder { color: #a5a2b5; }

.form-control:focus,
.custom-select:focus,
.nui-input:focus,
.nui-input-default:focus,
.nui-focus:focus-within,
.nui-input-wrapper:focus-within {
  border-color: var(--aw-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,.15) !important;
  outline: 0 !important;
}

/* nui input wrapper (icon inputs) */
.nui-input-outer, .nui-input-wrapper {
  border-radius: 12px !important;
}
.nui-input-icon svg, .nui-input-icon { color: #a5a2b5; }

/* Labels */
label, .form-label, .col-form-label {
  font-weight: 600;
  color: var(--aw-fg);
  font-size: .9rem;
}
.form-text, small.text-muted { color: var(--aw-muted-fg) !important; }

/* Checkbox / radio / switch accent */
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background-color: var(--aw-primary) !important;
  border-color: var(--aw-primary) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--aw-primary); }

/* Section headings (nui) */
.nui-heading, .nui-heading-md {
  letter-spacing: -0.02em;
  color: var(--aw-fg);
}
.nui-paragraph, .nui-paragraph-xs { color: var(--aw-muted-fg); }

/* Input group addons */
.input-group-text {
  background: var(--aw-secondary);
  border: 1px solid var(--aw-border);
  border-radius: 12px;
  color: var(--aw-muted-fg);
}

/* Dropdown menus (form selects, actions) */
.dropdown-menu {
  border: 1px solid var(--aw-border);
  border-radius: 14px;
  box-shadow: var(--aw-shadow);
  padding: .35rem;
}
.dropdown-item { border-radius: 10px; font-weight: 500; padding: .5rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--aw-accent); color: var(--aw-fg); }
.dropdown-item.active, .dropdown-item:active { background: var(--aw-primary); color: #fff; }

/* Alerts */
.alert { border-radius: 14px; border: 1px solid var(--aw-border); }
.alert-success { background: var(--aw-mint-050); color: var(--aw-mint-fg); border-color: rgba(47,211,165,.35); }
.alert-danger  { background: var(--aw-coral-050); color: #b4272a; border-color: rgba(255,107,107,.35); }
.alert-info    { background: var(--aw-primary-050); color: var(--aw-primary-700); border-color: rgba(124,92,252,.3); }

/* Nav pills / tabs used in account pages */
.nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: #4b4863; }
.nav-pills .nav-link.active { background: var(--aw-primary); color: #fff; }
.nav-tabs .nav-link.active { color: var(--aw-primary); border-bottom-color: var(--aw-primary); }


/* =====================================================================
   MODALS / POPUPS — exit-intent style: blur the app behind the modal
   (like the allinwriter.com exit-intent popup). Bootstrap 4 adds
   `modal-open` to <body> while a modal is visible.
   ===================================================================== */

/* KEY FIX: modals in this app live INSIDE div.content (not direct children
   of body), so we must NOT blur the app wrapper (it contains the modal).
   Instead the blur lives on the .modal-backdrop overlay itself, which sits
   between the app and the modal. The app shows through it, blurred; the
   modal renders ABOVE the backdrop, perfectly crisp. */

/* Backdrop = the blur layer. Light dim + real gaussian blur of what's behind. */
.modal-backdrop,
.modal-backdrop.show {
  background: rgba(35, 33, 53, 0.22) !important;
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  backdrop-filter: blur(7px) saturate(115%);
  opacity: 1 !important;
  transition: backdrop-filter .28s var(--aw-ease-out), background-color .28s var(--aw-ease-out);
}

/* Modal + its dialog must never inherit any blur and must sit above backdrop */
.modal { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.modal, .modal-dialog, .modal-content { filter: none !important; }
.modal-dialog { z-index: 1060; }
.modal-content {
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: var(--aw-radius-lg) !important;   /* 20px */
  box-shadow: 0 30px 80px -24px rgba(45,30,90,.45), 0 8px 24px -12px rgba(45,30,90,.25) !important;
  background: #ffffff;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--aw-border) !important;
  padding: 1.15rem 1.4rem !important;
}
.modal-title { font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; }
.modal-body { padding: 1.1rem 1.4rem !important; }
.modal-footer {
  border-top: 1px solid var(--aw-border) !important;
  padding: 1rem 1.4rem !important;
  background: rgba(248,247,251,.5);
}
.modal .close {
  border-radius: 10px;
  opacity: .6;
  transition: opacity .15s var(--aw-ease-out), background-color .15s var(--aw-ease-out);
}
.modal .close:hover { opacity: 1; background: var(--aw-accent); }

/* Entrance motion for the dialog */
@media (prefers-reduced-motion: no-preference) {
  .modal.fade .modal-dialog {
    transform: translateY(12px) scale(.97);
    opacity: 0;
    transition: transform .30s var(--aw-ease-out), opacity .30s var(--aw-ease-out);
  }
  .modal.show .modal-dialog { transform: none; opacity: 1; }
}


/* =====================================================================
   PRICING / PLANS PAGE — match allinwriter.com pricing cards
   ===================================================================== */

/* Plan card: rounded, border-only, full height */
.card.plan {
  border: 1px solid var(--aw-border) !important;
  border-radius: var(--aw-radius) !important;   /* 16px, like rounded-2xl */
  box-shadow: none !important;
  overflow: visible !important;
  transition: transform .25s var(--aw-ease-out), border-color .2s var(--aw-ease-out), box-shadow .25s var(--aw-ease-out);
  background: var(--aw-card) !important;
}
.card.plan:hover {
  transform: translateY(-3px);
  border-color: rgba(126,88,235,.35) !important;
}

/* Selected / current plan = the "popular" treatment from the website:
   violet border + soft violet glow + slight scale + badge.
   Also neutralize base app.css .selected-plan (5px border + negative margins + 104% height). */
.card.plan.selected-plan {
  border: 1.5px solid var(--aw-primary) !important;
  box-shadow: 0 30px 70px -25px rgba(126,88,235,.45) !important;
  position: relative;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: 100% !important;
}
@media (min-width: 992px) {
  .card.plan.selected-plan { transform: scale(1.03); }
  .card.plan.selected-plan:hover { transform: scale(1.03) translateY(-3px); }
}
.card.plan.selected-plan::before {
  content: "Current plan";
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--aw-primary);
  color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .3rem .8rem; border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(126,88,235,.7);
  white-space: nowrap;
}

/* Plan name (uppercase badge-like heading) */
.card.plan .font-weight-bold.text-uppercase {
  font-family: "Sora","Inter Tight",sans-serif;
  letter-spacing: -.01em;
}

/* Price number */
.card.plan .h1 {
  font-family: "Sora","Inter Tight",sans-serif;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  color: var(--aw-fg);
}

/* Feature check/cross icons: green mint for enabled, muted for disabled */
.card.plan .fa-check, .card.plan .fa-check-circle,
.card.plan svg.text-success, .card.plan .text-success {
  color: var(--aw-mint) !important;
}
.card.plan .text-muted { color: var(--aw-muted-fg) !important; }

/* Monthly / Yearly toggle */
.btn-group-toggle .toggle-button,
.btn.toggle-button {
  border-radius: 999px !important;
  font-weight: 700;
  color: var(--aw-muted-fg);
  border: none !important;
  background: transparent !important;
  padding: .5rem 1.4rem !important;
  transition: color .15s var(--aw-ease-out), background-color .15s var(--aw-ease-out);
}
.btn.toggle-button.active {
  background: var(--aw-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -10px rgba(126,88,235,.7);
}
/* toggle track */
.btn-group-toggle {
  background: var(--aw-secondary);
  border-radius: 999px;
  padding: .25rem;
  border: 1px solid var(--aw-border);
}

/* Plan CTA button */
.round-btn-plans, .card.plan .btn-primary.btn-block {
  border-radius: 999px !important;
  font-weight: 700;
}


/* =========================================================
   MOBILE RESPONSIVE PASS (<= 991px) — modern, clear UX
   The base template already ships an off-canvas sidebar
   (.slide-menu translateX(-113%) toggled by .slide-menu-toggle).
   These rules only refine spacing, the mobile top bar and
   card grids so everything reads well on phones.
   ========================================================= */
@media (max-width: 991.98px) {
  /* Mobile top bar (logo + hamburger) */
  #header .navbar.navbar-light {
    background: var(--aw-card) !important;
    border-bottom: 1px solid var(--aw-border);
  }
  #header.sticky-top { z-index: 1025; }

  .slide-menu-toggle .navbar-toggler-icon {
    background-image: none;
    position: relative;
    width: 22px;
    height: 2px;
    background: var(--aw-fg);
    display: inline-block;
    border-radius: 2px;
  }
  .slide-menu-toggle .navbar-toggler-icon::before,
  .slide-menu-toggle .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--aw-fg);
    border-radius: 2px;
  }
  .slide-menu-toggle .navbar-toggler-icon::before { top: -7px; }
  .slide-menu-toggle .navbar-toggler-icon::after  { top: 7px; }

  /* Off-canvas sidebar look on mobile */
  .slide-menu {
    width: 84% !important;
    max-width: 320px;
    box-shadow: 0 20px 60px -20px rgba(20,16,40,.35) !important;
  }
  /* Dim + blur the app behind the open sidebar (matches modal feel) */
  .slide-menu.active::after {
    content: "";
    position: fixed;
    inset: 0;
    left: 100%;
    width: 100vw;
    height: 100vh;
    background: rgba(20,16,40,.28);
    z-index: -1;
  }

  /* Content breathing room on phones */
  .content { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Page headings scale down a touch */
  h1, .h1 { font-size: 1.9rem !important; }
  h2, .h2 { font-size: 1.5rem !important; }

  /* Card padding a bit tighter on phones */
  .card-body { padding: 1.1rem !important; }

  /* Pricing: single column, no scale/negative offsets on mobile */
  .card.plan.selected-plan { transform: none !important; }
  .toggle-buttons, .plan-toggle, .d-flex.justify-content-center { flex-wrap: wrap; }

  /* Overview stat cards & template grid already use Bootstrap cols;
     ensure comfortable gaps when they wrap */
  .row > [class*="col-"] { margin-bottom: 1rem; }
}

/* Small phones */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.6rem !important; }
  .content { padding-left: .85rem !important; padding-right: .85rem !important; }
  /* Modal near full-width with comfortable margins */
  .modal-dialog { margin: .75rem !important; }
}

/* ============================================================
   AllinWriter 2 — Onboarding & Paywall modals (non-dismissible)
   ============================================================ */
:root{
  --aw-ease-out2:cubic-bezier(0.23,1,0.32,1);
}
html.aw-modal-open, html.aw-modal-open body{ overflow:hidden !important; }
.aw-modal-layer{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(22,23,38,0.42);
  -webkit-backdrop-filter:blur(10px) saturate(1.05); backdrop-filter:blur(10px) saturate(1.05);
  animation:awFadeIn .28s var(--aw-ease-out2);
}
@keyframes awFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes awPop{ from{opacity:0; transform:scale(.96) translateY(8px)} to{opacity:1; transform:none} }
.aw-modal{
  width:100%; background:#fff; border:1px solid var(--aw-border); border-radius:24px;
  box-shadow:0 24px 80px -24px rgba(126,88,235,0.35), 0 8px 24px -12px rgba(22,23,38,0.18);
  overflow:hidden; animation:awPop .34s var(--aw-ease-out2);
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif; color:var(--aw-fg);
}
.aw-onb-modal{ max-width:920px; }
.aw-paywall-modal{ max-width:1040px; }
.aw-badge{ display:inline-block; font-family:'Sora',sans-serif; font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--aw-primary); background:var(--aw-primary-100); border-radius:999px; padding:6px 12px; margin-bottom:14px; }
.aw-badge-light{ background:rgba(255,255,255,0.9); color:var(--aw-primary); }
.aw-btn{ font-family:'Sora',sans-serif; font-weight:600; font-size:15px; border:none; border-radius:14px; padding:13px 22px; cursor:pointer; transition:transform .16s var(--aw-ease-out2), box-shadow .2s var(--aw-ease-out2), background .2s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.aw-btn:active{ transform:scale(0.97); }
.aw-btn-primary{ background:var(--aw-primary); color:#fff; box-shadow:0 8px 20px -8px rgba(126,88,235,0.6); }
.aw-btn-primary:hover{ background:var(--aw-primary-600); }
.aw-btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.aw-btn-ghost{ background:transparent; color:var(--aw-muted-fg); }
.aw-btn-ghost:hover{ color:var(--aw-fg); background:var(--aw-bg); }
.aw-btn-outline{ background:#fff; color:var(--aw-primary); border:1.5px solid var(--aw-primary); }
.aw-btn-outline:hover{ background:var(--aw-primary-100); }
.aw-btn-lg{ padding:15px 24px; font-size:16px; width:100%; }
.aw-btn-spinner{ width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:awSpin .7s linear infinite; display:inline-block; }
.aw-btn-outline .aw-btn-spinner{ border-color:rgba(126,88,235,.4); border-top-color:var(--aw-primary); }
@keyframes awSpin{ to{ transform:rotate(360deg) } }
.aw-onb-progress{ display:flex; gap:8px; justify-content:center; padding:18px 0 4px; }
.aw-onb-dot{ width:28px; height:5px; border-radius:999px; background:var(--aw-border); transition:background .3s var(--aw-ease-out2); }
.aw-onb-dot.is-active{ background:var(--aw-primary); }
.aw-onb-step{ display:none; }
.aw-onb-step.is-active{ display:block; animation:awPop .3s var(--aw-ease-out2); }
.aw-onb-grid{ display:grid; grid-template-columns:1fr 1fr; min-height:440px; }
.aw-onb-media{ position:relative; overflow:hidden; }
.aw-onb-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.aw-onb-body{ padding:34px 38px; display:flex; flex-direction:column; }
.aw-onb-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:26px; line-height:1.2; margin:0 0 10px; }
.aw-onb-sub{ color:var(--aw-muted-fg); font-size:15px; line-height:1.55; margin:0 0 18px; }
.aw-onb-points{ list-style:none; padding:0; margin:0 0 22px; }
.aw-onb-points li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:14.5px; }
.aw-onb-points li::before{ content:"\2713"; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; background:var(--aw-mint); color:#0b3b2a; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.aw-onb-body > .aw-btn-primary{ margin-top:auto; align-self:flex-start; }
.aw-onb-actions{ display:flex; gap:10px; margin-top:auto; align-items:center; }
.aw-onb-actions .aw-btn-primary{ margin-left:auto; }
.aw-role-grid{ display:grid; gap:12px; margin-bottom:8px; }
.aw-role-card{ position:relative; cursor:pointer; margin:0; }
.aw-role-card input{ position:absolute; opacity:0; pointer-events:none; }
.aw-role-inner{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; border:1.5px solid var(--aw-border); border-radius:16px; padding:14px 16px; transition:border-color .2s var(--aw-ease-out2), background .2s, transform .16s var(--aw-ease-out2); }
.aw-role-card:hover .aw-role-inner{ border-color:var(--aw-primary); transform:translateY(-1px); }
.aw-role-card.is-selected .aw-role-inner{ border-color:var(--aw-primary); background:var(--aw-primary-100); box-shadow:0 0 0 3px rgba(126,88,235,.14); }
.aw-role-emoji{ grid-row:1/3; font-size:26px; }
.aw-role-name{ font-family:'Sora',sans-serif; font-weight:600; font-size:15px; }
.aw-role-desc{ color:var(--aw-muted-fg); font-size:13px; }
.aw-field{ margin-bottom:14px; }
.aw-field label{ display:block; font-family:'Sora',sans-serif; font-weight:600; font-size:13px; margin-bottom:6px; }
.aw-input{ width:100%; border:1.5px solid var(--aw-border); border-radius:12px; padding:11px 14px; font-size:14.5px; font-family:'Inter Tight',sans-serif; transition:border-color .2s, box-shadow .2s; background:#fff; color:var(--aw-fg); }
.aw-input:focus{ outline:none; border-color:var(--aw-primary); box-shadow:0 0 0 3px rgba(126,88,235,.14); }
.aw-onb-error{ color:var(--aw-coral); font-size:13px; margin:10px 0 0; }
.aw-paywall-grid{ display:grid; grid-template-columns:0.85fr 1fr; min-height:520px; }
.aw-paywall-hero{ position:relative; overflow:hidden; background:#0f0b1d; }
.aw-paywall-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.96; }
.aw-paywall-hero-overlay{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:32px 30px; background:linear-gradient(180deg, rgba(15,11,29,0) 30%, rgba(15,11,29,.72) 100%); color:#fff; }
.aw-paywall-hero-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:24px; line-height:1.2; margin:0 0 14px; color:#fff; }
/* Split overlay: only the badge is pinned to the top (clear of the model's face);
   the title, benefits and trial chip stay anchored at the bottom. */
.aw-paywall-hero-overlay--split{ justify-content:space-between; background:linear-gradient(180deg, rgba(15,11,29,.72) 0%, rgba(15,11,29,.30) 22%, rgba(15,11,29,0) 46%, rgba(15,11,29,.78) 100%); }
.aw-paywall-hero-badge{ align-self:flex-start; margin-bottom:0; }
.aw-paywall-hero-bottom{ display:flex; flex-direction:column; }
.aw-paywall-benefits{ list-style:none; padding:0; margin:0 0 18px; }
.aw-paywall-benefits li{ position:relative; padding-left:24px; margin-bottom:8px; font-size:14px; color:rgba(255,255,255,.92); }
.aw-paywall-benefits li::before{ content:"\2726"; position:absolute; left:0; color:var(--aw-mint); }
.aw-trial-chip{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:10px 12px; }
.aw-trial-chip img{ width:40px; height:40px; border-radius:10px; object-fit:cover; }
.aw-trial-chip span{ font-size:13.5px; line-height:1.35; }
.aw-paywall-body{ padding:30px 32px; display:flex; flex-direction:column; }
.aw-paywall-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.aw-paywall-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:20px; margin:0; }
.aw-interval-toggle{ display:inline-flex; background:var(--aw-bg); border:1px solid var(--aw-border); border-radius:12px; padding:3px; }
.aw-interval-btn{ border:none; background:transparent; font-family:'Sora',sans-serif; font-weight:600; font-size:13px; color:var(--aw-muted-fg); padding:7px 14px; border-radius:9px; cursor:pointer; transition:all .2s var(--aw-ease-out2); }
.aw-interval-btn.is-active{ background:#fff; color:var(--aw-fg); box-shadow:0 2px 8px -4px rgba(22,23,38,.25); }
.aw-save{ color:#28c199; font-size:11px; }
.aw-plan-list{ display:grid; gap:10px; margin-bottom:6px; max-height:222px; overflow-y:auto; padding:2px 8px 2px 2px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--aw-primary) transparent; }
.aw-plan-list::-webkit-scrollbar{ width:6px; }
.aw-plan-list::-webkit-scrollbar-thumb{ background:rgba(126,88,235,.4); border-radius:999px; }
.aw-plan-list::-webkit-scrollbar-track{ background:transparent; }
.aw-plan-scrollhint{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; color:var(--aw-muted-fg); margin:2px 0 16px; }
.aw-plan-scrollhint-arrow{ display:inline-block; animation:awScrollBounce 1.4s var(--aw-ease-out2) infinite; }
@keyframes awScrollBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
.aw-plan-card{ position:relative; display:flex; align-items:center; gap:14px; cursor:pointer; margin:0; border:1.5px solid var(--aw-border); border-radius:16px; padding:14px 16px; transition:border-color .2s var(--aw-ease-out2), background .2s, transform .16s; }
.aw-plan-card input{ position:absolute; opacity:0; pointer-events:none; }
.aw-plan-card:hover{ border-color:var(--aw-primary); transform:translateY(-1px); }
.aw-plan-card.is-selected{ border-color:var(--aw-primary); background:var(--aw-primary-100); box-shadow:0 0 0 3px rgba(126,88,235,.14); }
.aw-plan-main{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.aw-plan-name{ font-family:'Sora',sans-serif; font-weight:600; font-size:15.5px; display:flex; align-items:center; gap:8px; }
.aw-plan-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#fff; background:var(--aw-primary); border-radius:999px; padding:3px 8px; text-align:center; }
.aw-plan-price{ font-family:'Sora',sans-serif; font-weight:700; font-size:17px; white-space:nowrap; }
.aw-price-per{ font-size:12px; font-weight:500; color:var(--aw-muted-fg); }
.aw-plan-check{ width:20px; height:20px; border-radius:50%; border:2px solid var(--aw-border); flex:0 0 auto; transition:all .2s var(--aw-ease-out2); }
.aw-plan-card.is-selected .aw-plan-check{ border-color:var(--aw-primary); background:var(--aw-primary); box-shadow:inset 0 0 0 4px #fff; }
.aw-paywall-cta{ margin-top:auto; display:grid; gap:10px; }
.aw-paywall-note{ text-align:center; color:var(--aw-muted-fg); font-size:12.5px; margin:2px 0 0; }
@media (max-width:820px){
  .aw-modal-layer{ padding:0; align-items:stretch; }
  .aw-modal{ border-radius:0; min-height:100%; max-width:100%; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:awFadeIn .28s var(--aw-ease-out2); }
  .aw-onb-grid, .aw-paywall-grid{ grid-template-columns:1fr; min-height:0; }
  .aw-onb-media{ height:180px; }
  .aw-onb-media img{ object-position:center 22%; }
  .aw-paywall-hero{ min-height:210px; order:-1; }
  .aw-paywall-hero-img{ object-position:center 20%; }
  .aw-paywall-hero-overlay{ padding:20px; justify-content:flex-end; }
  .aw-paywall-hero-title{ font-size:21px; }
  .aw-onb-body, .aw-paywall-body{ padding:24px 20px; }
  .aw-onb-title{ font-size:22px; }
  .aw-paywall-head{ margin-bottom:16px; }
  .aw-interval-toggle{ width:100%; justify-content:center; }
}
@media (max-width:480px){
  .aw-onb-media{ height:150px; }
  .aw-paywall-hero{ min-height:170px; }
  .aw-onb-body, .aw-paywall-body{ padding:22px 16px; }
  .aw-onb-title{ font-size:20px; }
  .aw-onb-sub{ font-size:14px; }
  .aw-paywall-title{ font-size:18px; }
  .aw-paywall-hero-title{ font-size:19px; }
  .aw-role-inner{ padding:12px 13px; column-gap:11px; }
  .aw-role-emoji{ font-size:22px; }
  .aw-role-name{ font-size:14px; }
  .aw-role-desc{ font-size:12px; }
  .aw-plan-card{ padding:12px 13px; gap:10px; }
  .aw-plan-name{ font-size:14px; }
  .aw-plan-price{ font-size:15px; }
  .aw-plan-tag{ font-size:9.5px; padding:2px 6px; }
  .aw-btn-lg{ padding:14px 18px; font-size:15px; }
  .aw-onb-points li{ font-size:13.5px; }
  .aw-trial-chip span{ font-size:12.5px; }
  .aw-badge{ font-size:11px; padding:5px 10px; margin-bottom:12px; }
}
/* Landscape / short viewport: keep modal usable */
@media (max-width:820px) and (max-height:560px){
  .aw-onb-media, .aw-paywall-hero{ display:none; }
  .aw-modal{ height:100%; }
}

/* =====================================================================
   SIDEBAR GAMIFICATION — profile card w/ level ring, XP bar, streak
   ===================================================================== */
.aw-side-gamify{
  margin: .4rem .75rem .2rem;
  padding: 10px 12px 10px;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(126,88,235,.10) 0%, transparent 55%),
    linear-gradient(180deg, #fff 0%, var(--aw-primary-050) 100%);
  border: 1px solid var(--aw-border);
  box-shadow: var(--aw-shadow-sm);
}
.aw-side-gamify{ position:relative; }
.aw-side-gamify-top{ display:flex; align-items:center; gap:11px; }
.aw-side-admin-btn{
  position:absolute; top:8px; right:8px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px;
  background:#fff; border:1px solid var(--aw-border); color:var(--aw-muted-fg);
  box-shadow:0 2px 6px -3px rgba(70,50,130,.25);
  transition:background .16s var(--aw-ease-out), color .16s var(--aw-ease-out), transform .16s var(--aw-ease-out);
}
.aw-side-admin-btn:hover{ background:var(--aw-primary); color:#fff; transform:translateY(-1px); }
.aw-side-admin-btn:active{ transform:scale(.94); }
.aw-side-admin-btn svg{ fill:currentColor; width:15px; height:15px; }
.aw-side-avatar{
  position:relative; width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  /* conic ring reflects level progress */
  background: conic-gradient(var(--aw-primary) calc(var(--aw-ring,0) * 1%), #e7e3f5 0);
  padding:3px;
}
.aw-side-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #fff; display:block; }
.aw-side-level-badge{
  position:absolute; right:-3px; bottom:-3px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--aw-primary); color:#fff; font-family:'Sora',sans-serif;
  font-weight:800; font-size:11px; line-height:20px; text-align:center; border:2px solid #fff;
  box-shadow:0 4px 10px -4px rgba(126,88,235,.7);
}
.aw-side-idwrap{ min-width:0; flex:1; }
.aw-side-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--aw-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aw-side-rank{ font-size:11.5px; font-weight:600; color:var(--aw-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aw-side-streak{
  flex:0 0 auto; display:flex; align-items:center; gap:2px; padding:4px 8px; border-radius:999px;
  background:#fff; border:1px solid var(--aw-border); font-family:'Sora',sans-serif; font-weight:800; font-size:12px; color:#e8720c;
}
.aw-side-streak .aw-streak-flame{ font-size:12px; line-height:1; }
.aw-side-xpbar{ height:6px; border-radius:999px; background:#e7e3f5; overflow:hidden; margin-top:8px; }
.aw-side-xpfill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--aw-primary), var(--aw-primary-grad-b));
  transition: width .6s var(--aw-ease-out);
}
.aw-side-xpmeta{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.aw-side-xpmeta .aw-side-xpnow{ font-family:'Sora',sans-serif; font-weight:700; font-size:11px; color:var(--aw-fg); }
.aw-side-xpmeta .aw-side-xpnext{ font-size:11px; font-weight:600; color:var(--aw-muted-fg); }
@media (prefers-reduced-motion: no-preference){
  .aw-side-streak .aw-streak-flame{ animation: awFlame 1.6s ease-in-out infinite; transform-origin:center bottom; }
  @keyframes awFlame{ 0%,100%{ transform:scale(1) rotate(-2deg);} 50%{ transform:scale(1.12) rotate(2deg);} }
}

/* =====================================================================
   DASHBOARD REDESIGN — gamified hero, stat cards, templates, activity
   ===================================================================== */
.aw-dash{ }
.aw-section-title{ font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-.02em; }

/* ---- Hero ---- */
.aw-dash-hero{
  position:relative; overflow:hidden;
  border-radius: var(--aw-radius-lg);
  border:1px solid var(--aw-border);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(168,90,217,.14) 0%, transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(101,223,175,.12) 0%, transparent 55%),
    linear-gradient(180deg,#fff 0%, var(--aw-primary-050) 100%);
  box-shadow: var(--aw-shadow);
  padding: 22px 24px;
}
.aw-dash-hero-glow{ position:absolute; inset:0; pointer-events:none; }
.aw-dash-hero-main{ position:relative; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.aw-dash-avatar{
  position:relative; width:74px; height:74px; flex:0 0 auto; border-radius:50%;
  background: conic-gradient(var(--aw-primary) calc(var(--aw-ring,0)*1%), #e7e3f5 0);
  padding:4px;
}
.aw-dash-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #fff; display:block; }
.aw-dash-level-badge{
  position:absolute; right:-2px; bottom:-2px; min-width:26px; height:26px; padding:0 6px;
  border-radius:999px; background:var(--aw-primary); color:#fff; font-family:'Sora',sans-serif;
  font-weight:800; font-size:13px; line-height:26px; text-align:center; border:3px solid #fff;
  box-shadow:0 6px 14px -5px rgba(126,88,235,.8);
}
.aw-dash-hero-id{ min-width:0; flex:1 1 240px; }
.aw-dash-greet{ color:var(--aw-muted-fg); font-weight:600; font-size:.95rem; }
.aw-dash-name{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.7rem; margin:.1rem 0 .4rem; letter-spacing:-.02em; line-height:1.1; }
.aw-wave{ display:inline-block; }
.aw-dash-rankrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aw-dash-rankpill{ background:var(--aw-primary); color:#fff; font-weight:700; font-size:.78rem; padding:4px 11px; border-radius:999px; }
.aw-dash-planpill{ display:inline-flex; align-items:center; background:#fff; border:1px solid var(--aw-border); color:var(--aw-fg)!important; font-weight:600; font-size:.78rem; padding:4px 11px; border-radius:999px; text-decoration:none!important; }
.aw-dash-planpill:hover{ background:var(--aw-accent); }
.aw-dash-streakpill{ display:inline-flex; align-items:center; gap:4px; background:#fff5eb; border:1px solid #ffe0c2; color:#d9760a; font-weight:700; font-size:.78rem; padding:4px 11px; border-radius:999px; }
.aw-dash-hero-cta{ flex:0 0 auto; margin-left:auto; }
.aw-dash-hero-cta .btn{ border-radius:999px; padding:.55rem 1.25rem; }

.aw-dash-xp{ position:relative; margin-top:20px; }
.aw-dash-xp-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.aw-dash-xp-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:.86rem; color:var(--aw-fg); }
.aw-dash-xp-count{ font-weight:700; font-size:.82rem; color:var(--aw-primary); }
.aw-dash-xp-track{ height:12px; border-radius:999px; background:#e9e5f6; overflow:hidden; box-shadow: inset 0 1px 2px rgba(70,50,130,.08); }
.aw-dash-xp-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--aw-primary),var(--aw-primary-grad-b)); transition:width .7s var(--aw-ease-out); position:relative; }
.aw-dash-xp-foot{ margin-top:6px; font-size:.78rem; color:var(--aw-muted-fg); }

/* ---- Segmented toggle ---- */
.aw-seg{ background:#f0edf8; border-radius:999px; padding:3px; }
.aw-seg .nav-link{ border-radius:999px!important; color:var(--aw-muted-fg); font-weight:600; }
.aw-seg .nav-link.active{ background:#fff!important; color:var(--aw-primary)!important; box-shadow:var(--aw-shadow-sm); }

/* ---- Stat cards ---- */
.aw-stat-card{
  background:var(--aw-card); border:1px solid var(--aw-border); border-radius:var(--aw-radius);
  padding:16px; height:100%; box-shadow:var(--aw-shadow-sm);
  transition: transform .18s var(--aw-ease-out), box-shadow .18s var(--aw-ease-out);
}
.aw-stat-card:hover{ transform:translateY(-3px); box-shadow:var(--aw-shadow); }
.aw-stat-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.aw-ic-violet{ background:var(--aw-primary-100); color:var(--aw-primary); }
.aw-ic-coral{ background:var(--aw-coral-050); color:var(--aw-coral); }
.aw-ic-mint{ background:var(--aw-mint-050); color:#12a97a; }
.aw-ic-blue{ background:#e7f0ff; color:#2f6bd8; }
.aw-stat-label{ color:var(--aw-muted-fg); font-size:.82rem; font-weight:600; margin-bottom:2px; }
.aw-stat-value{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.5rem; color:var(--aw-fg); letter-spacing:-.02em; }

/* ---- Templates grid ---- */
.aw-tpl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.aw-tpl-card{
  position:relative; background:var(--aw-card); border:1px solid var(--aw-border);
  border-radius:var(--aw-radius); padding:14px; box-shadow:var(--aw-shadow-sm);
  transition: transform .18s var(--aw-ease-out), box-shadow .18s var(--aw-ease-out);
}
.aw-tpl-card:hover{ transform:translateY(-4px); box-shadow:var(--aw-shadow); }
.aw-tpl-thumb{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/10; background:var(--aw-secondary); }
.aw-tpl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.aw-tpl-foot{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.aw-tpl-ic{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--aw-accent); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.aw-tpl-name{ font-family:'Sora',sans-serif; font-weight:600; font-size:.92rem; color:var(--aw-fg); line-height:1.2; }

/* ---- Activity ---- */
.aw-activity-card{ background:var(--aw-card); border:1px solid var(--aw-border); border-radius:var(--aw-radius); box-shadow:var(--aw-shadow-sm); overflow:hidden; }
.aw-activity-head{ padding:14px 18px; font-family:'Sora',sans-serif; font-weight:700; border-bottom:1px solid var(--aw-border); }
.aw-activity-body{ padding:8px 18px; }
.aw-doc-ic{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--aw-accent); display:flex; align-items:center; justify-content:center; }
.aw-activity-foot{ display:flex; align-items:center; justify-content:center; padding:12px; background:#faf9fd; border-top:1px solid var(--aw-border); color:var(--aw-muted-fg)!important; font-weight:600; text-decoration:none!important; }
.aw-activity-foot:hover{ color:var(--aw-primary)!important; }

/* ---- Empty state ---- */
.aw-empty{ text-align:center; padding:34px 16px; }
.aw-empty-ic{ width:60px; height:60px; margin:0 auto 12px; border-radius:16px; background:var(--aw-primary-100); color:var(--aw-primary); display:flex; align-items:center; justify-content:center; }
.aw-empty-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem; }
.aw-empty-sub{ color:var(--aw-muted-fg); font-size:.9rem; margin:.25rem 0 .5rem; }

@media (prefers-reduced-motion: no-preference){
  .aw-wave{ animation: awWave 2.4s ease-in-out infinite; transform-origin:70% 70%; }
  @keyframes awWave{ 0%,60%,100%{ transform:rotate(0);} 10%{ transform:rotate(14deg);} 20%{ transform:rotate(-8deg);} 30%{ transform:rotate(14deg);} 40%{ transform:rotate(-4deg);} 50%{ transform:rotate(10deg);} }
  .aw-dash-xp-fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:translateX(-100%); animation: awXpShine 2.6s var(--aw-ease-out) infinite; }
  @keyframes awXpShine{ 0%{ transform:translateX(-100%);} 60%,100%{ transform:translateX(200%);} }
}

/* ---- Dashboard responsive ---- */
@media (max-width: 991px){
  .aw-tpl-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .aw-dash-hero{ padding:18px; }
  .aw-dash-name{ font-size:1.4rem; }
  .aw-dash-avatar{ width:60px; height:60px; }
  .aw-dash-hero-cta{ margin-left:0; width:100%; }
  .aw-dash-hero-cta .btn{ width:100%; }
  .aw-tpl-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .aw-stat-value{ font-size:1.25rem; }
  .aw-tpl-name{ font-size:.82rem; }
}

/* =====================================================================
   SIDEBAR — FUTURISTIC LAYER (overrides earlier base look)
   Modern, subtle glassy violet gradient shell, glowing active item,
   pill icon chips, animated brand dot. Keeps existing markup/behavior.
   ===================================================================== */
#slide-menu.slide-menu,
nav.slide-menu{
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(126,88,235,.08) 0%, transparent 60%),
    radial-gradient(120% 50% at 0% 100%, rgba(101,223,175,.07) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #FBFAFF 55%, #F6F3FE 100%) !important;
  border-right: 1px solid rgba(126,88,235,.10) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.6) inset, 14px 0 40px -28px rgba(70,50,130,.28) !important;
}

/* Brand: add a soft glowing dot next to the logo */
#slide-menu .navbar-brand{ position:relative; }
#slide-menu .navbar-brand .logo{ position:relative; }

/* MENU label with a gradient tick */
#slide-menu .text-uppercase.text-muted{
  position:relative;
  color:#9a97ad !important;
}

/* Icon chip: give every nav icon a soft rounded backdrop */
#slide-menu .sidebar .nav-link .sidebar-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px;
  background:rgba(126,88,235,.07);
  transition: background-color .18s var(--aw-ease-out), transform .18s var(--aw-ease-out);
}
#slide-menu .sidebar .nav-link:hover .sidebar-icon{ background:rgba(126,88,235,.14); }
#slide-menu .sidebar .nav-link{
  gap:2px;
  backdrop-filter: none;
}

/* Active item: gradient fill + glow + left indicator bar */
#slide-menu .sidebar .nav-link.active,
#slide-menu .sidebar .nav-link.active:hover,
#slide-menu .sidebar .nav-link.active:focus{
  background:linear-gradient(100deg, var(--aw-primary) 0%, var(--aw-primary-grad-b) 100%) !important;
  box-shadow:0 10px 24px -10px rgba(126,88,235,.75), 0 2px 6px -2px rgba(126,88,235,.5) !important;
  color: #fff !important;
}
#slide-menu .sidebar .nav-link.active::before{
  content:""; position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  width:4px; height:58%; border-radius:999px; background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.9);
}
#slide-menu .sidebar .nav-link.active .sidebar-icon{
  background:rgba(255,255,255,.22) !important;
}

/* Credits card: glassy futuristic panel */
#slide-menu a[href*="account/plan"],
#slide-menu a[href$="/plan"]{
  background:linear-gradient(180deg,#ffffff, #F4F1FE) !important;
  border:1px solid rgba(126,88,235,.14) !important;
  box-shadow: var(--aw-shadow-sm);
}
#slide-menu .progress{ background-color:#e9e5f6 !important; height:8px !important; }
#slide-menu .progress-bar{
  background:linear-gradient(90deg,var(--aw-primary),var(--aw-primary-grad-b)) !important;
}

/* Footer profile: subtle glass */
#slide-menu .sidebar-footer{
  border-top:1px solid rgba(126,88,235,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(244,241,254,.7)) !important;
  backdrop-filter: blur(6px);
}

/* Gamify card: upgrade to glass + animated ring shimmer */
.aw-side-gamify{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(126,88,235,.14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(244,241,254,.9) 100%) !important;
  border:1px solid rgba(126,88,235,.16) !important;
  backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: no-preference){
  .aw-side-avatar::after{
    content:""; position:absolute; inset:-2px; border-radius:50%;
    background:conic-gradient(from 0deg, transparent, rgba(126,88,235,.55), transparent 40%);
    animation: awRingSpin 3.2s linear infinite; z-index:-1; filter:blur(1px);
  }
  @keyframes awRingSpin{ to{ transform:rotate(360deg);} }
}

/* =====================================================================
   RESULT MOCKUPS — platform-aware preview chrome (FB/IG/X/LI/Google...)
   ===================================================================== */
.aw-mock{ border:1px solid var(--aw-border); border-radius:14px; overflow:hidden; background:#fff; }
.aw-mock-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #f0eef6; }
.aw-mock-av{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.aw-mock-id{ min-width:0; flex:1 1 auto; }
.aw-mock-name{ font-weight:700; font-size:.92rem; color:#111; display:flex; align-items:center; gap:5px; }
.aw-mock-meta{ font-size:.76rem; color:#8a8a94; }
.aw-mock-more,.aw-mock-xlogo,.aw-mock-li,.aw-mock-mail,.aw-mock-ytlogo{ margin-left:auto; color:#9a97ad; font-weight:700; }
.aw-mock-handle{ font-weight:500; color:#8a8a94; font-size:.8rem; }
.aw-mock-body{ padding:14px; font-size:.98rem; line-height:1.6; }
.aw-mock-body .ql-editor{ padding:0; }
.aw-mock-body .ql-container.ql-snow, .aw-mock-body .ql-toolbar.ql-snow{ border:0; }
.aw-mock-actions{ display:flex; gap:6px; padding:10px 14px; border-top:1px solid #f0eef6; color:#65676b; font-size:.84rem; font-weight:600; }
.aw-mock-actions span{ flex:1; text-align:center; cursor:default; }
.aw-mock-fbbadge{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:#1877f2; color:#fff; font-size:9px; }

/* Facebook */
.aw-mock--facebook,.aw-mock--facebook_ad{ }
.aw-mock-head--fb .aw-mock-name{ color:#050505; }
.aw-mock-globe{ font-size:.7rem; }

/* Instagram */
.aw-mock--instagram{ }
.aw-mock-ig-ring{ padding:2px; border-radius:50%; background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); display:inline-flex; flex:0 0 auto; }
.aw-mock-ig-ring .aw-mock-av{ border:2px solid #fff; width:38px; height:38px; }
.aw-mock-actions--ig span{ text-align:left; font-size:1.15rem; flex:0 0 auto; }
.aw-mock-actions--ig{ gap:16px; }

/* Twitter / X */
.aw-mock-head--tw{ background:#fff; }
.aw-mock-xlogo{ font-size:1.1rem; color:#000; }
.aw-mock-actions--tw{ justify-content:space-between; }
.aw-mock-actions--tw span{ color:#536471; }

/* LinkedIn */
.aw-mock-li{ background:#0a66c2; color:#fff; width:24px; height:24px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; }

/* Google Ad */
.aw-mock--google_ad .aw-mock-head--ga{ gap:8px; }
.aw-mock-adtag{ font-weight:800; color:#202124; font-size:.72rem; border:1px solid #dadce0; border-radius:4px; padding:0 5px; }
.aw-mock-url{ color:#202124; font-size:.82rem; }
.aw-mock--google_ad .aw-mock-body{ color:#1a0dab; }

/* YouTube */
.aw-mock-ytlogo{ background:#ff0000; color:#fff; width:30px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.7rem; margin-left:0; }

/* Email / Push / Generic */
.aw-mock-doc-ic{ width:32px; height:32px; border-radius:8px; background:var(--aw-primary-100); color:var(--aw-primary); display:flex; align-items:center; justify-content:center; }
.aw-mock--generic .aw-mock-head--generic{ background:var(--aw-primary-050); }

/* SEO Article (blog layout) */
.aw-mock--seo_article{ background:#fff; }
.aw-mock-head--blog{ background:#f7f6fb; gap:12px; padding:9px 14px; }
.aw-mock-dots{ display:inline-flex; gap:6px; flex:0 0 auto; }
.aw-mock-dots i{ width:11px; height:11px; border-radius:50%; background:#d9d6e3; display:inline-block; }
.aw-mock-dots i:nth-child(1){ background:#ff5f57; }
.aw-mock-dots i:nth-child(2){ background:#febc2e; }
.aw-mock-dots i:nth-child(3){ background:#28c840; }
.aw-mock-addr{ font-size:.78rem; color:#8a8a94; background:#fff; border:1px solid #ece9f3; border-radius:20px; padding:3px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
.aw-mock-blog{ padding:26px 30px 30px; max-width:760px; margin:0 auto; }
.aw-mock-blog-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.7rem; line-height:1.2; color:#1c1830; margin:0 0 14px; letter-spacing:-.01em; }
.aw-mock-blog-byline{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:#8a8a94; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid #f0eef6; }
.aw-mock-blog-av{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.aw-mock-blog-author{ font-weight:700; color:#4b4660; }
.aw-mock-blog-dot{ color:#c9c5d6; }
.aw-mock-body--blog{ padding:0; font-size:1.02rem; line-height:1.75; color:#33304a; }
.aw-mock-body--blog img{ border-radius:12px; margin:8px 0; }

/* SEO Product (e-shop product page) */
.aw-mock--seo_product{ background:#fff; }
.aw-mock-head--shop{ background:#fff; border-bottom:1px solid #f0eef6; }
.aw-mock-shop-logo{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--aw-primary-grad-a),var(--aw-primary-grad-b)); color:#fff; font-weight:800; font-family:'Sora',sans-serif; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.aw-mock-shop-cart{ margin-left:auto; font-size:1.1rem; }
.aw-mock-shop{ padding:20px 22px 24px; }
.aw-mock-shop-grid{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:26px; align-items:start; }
.aw-mock-shop-gallery{ display:flex; flex-direction:column; gap:10px; }
.aw-mock-shop-photo{ aspect-ratio:1/1; border-radius:14px; background:linear-gradient(135deg,#f4f1ff 0%,#eef7f3 100%); border:1px solid #ece9f3; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.aw-mock-shop-photo img{ width:100%; height:100%; object-fit:cover; }
.aw-mock-shop-photo:empty::after{ content:'🖼'; font-size:2.4rem; opacity:.35; }
.aw-mock-shop-thumbs{ display:flex; gap:8px; }
.aw-mock-shop-thumbs span{ width:54px; height:54px; border-radius:9px; background:#f4f1ff; border:1px solid #ece9f3; flex:0 0 auto; }
.aw-mock-shop-thumbs span:first-child{ border-color:var(--aw-primary); }
.aw-mock-shop-info{ min-width:0; }
.aw-mock-shop-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.35rem; line-height:1.25; color:#1c1830; margin-bottom:8px; }
.aw-mock-shop-stars{ color:#f5a623; font-size:1rem; letter-spacing:1px; margin-bottom:10px; }
.aw-mock-shop-star-half{ opacity:.4; }
.aw-mock-shop-rating{ color:#8a8a94; font-size:.8rem; letter-spacing:0; margin-left:4px; }
.aw-mock-shop-price{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.7rem; color:#12a97a; margin-bottom:14px; }
.aw-mock-shop-price-cents{ font-size:1rem; vertical-align:super; }
.aw-mock-shop-old{ font-size:.95rem; color:#b8b4c6; font-weight:600; text-decoration:line-through; margin-left:8px; }
.aw-mock-body--shop{ padding:0 0 6px; font-size:.95rem; line-height:1.65; color:#4b4660; }
.aw-mock-shop-cta{ display:flex; gap:10px; margin:16px 0 12px; flex-wrap:wrap; }
.aw-mock-shop-add{ background:linear-gradient(135deg,var(--aw-primary-grad-a),var(--aw-primary-grad-b)); color:#fff; font-weight:700; font-size:.92rem; padding:11px 20px; border-radius:30px; }
.aw-mock-shop-buy{ background:#fff5e6; color:#d98500; font-weight:700; font-size:.92rem; padding:11px 20px; border-radius:30px; border:1px solid #ffe2b8; }
.aw-mock-shop-trust{ font-size:.78rem; color:#8a8a94; }
@media (max-width:600px){ .aw-mock-shop-grid{ grid-template-columns:1fr; } }


/* Sidebar nav-link inner alignment fix (icon + label vertically centered) */
#slide-menu .sidebar .nav-link > *{ align-self:center; }
#slide-menu .sidebar .nav-link .sidebar-icon{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
#slide-menu .sidebar .nav-link .sidebar-title,
#slide-menu .sidebar .nav-link span{ display:inline-flex; align-items:center; line-height:1.1; }
#slide-menu .sidebar .nav-link .sidebar-expand{ margin-left:auto; display:inline-flex; align-items:center; }

/* =====================================================================
   DASHBOARD ANALYTICS — chart cards
   ===================================================================== */
.aw-chart-card{ background:#fff; border:1px solid var(--aw-border); border-radius:18px; padding:18px 20px; box-shadow:0 1px 3px rgba(30,20,60,.04), 0 8px 24px -16px rgba(70,50,130,.18); }
.aw-chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.aw-chart-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.02rem; color:#1c1830; }
.aw-chart-sub{ font-size:.8rem; color:#8a8a94; margin-top:2px; }
.aw-chart-legend{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:#6b6878; font-weight:600; }
.aw-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; }
.aw-dot-violet{ background:#7E58EB; }
.aw-dot-mint{ background:#12a97a; }
.aw-chart-canvas{ position:relative; height:250px; }
.aw-chart-canvas--doughnut{ height:250px; }
@media (max-width:575px){ .aw-chart-canvas, .aw-chart-canvas--doughnut{ height:220px; } }

/* Dashboard stat card — sub text, unit, accent variant */
.aw-stat-sub{ font-size:.72rem; color:#9a97ad; font-weight:600; margin-top:2px; }
.aw-stat-unit{ font-size:1rem; font-weight:700; color:#9a97ad; margin-left:2px; }
.aw-stat-card--accent{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(243,98,93,.10) 0%, transparent 55%),
    linear-gradient(180deg,#fff 0%, #fff 100%);
  border-color:#f5d3d1;
}
.aw-stat-card--accent .aw-stat-value{ color:#1c1830; }

/* ===== Dashboard extra charts ===== */
.aw-chart-canvas--sm{height:220px;position:relative}
.aw-chart-kpi{font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;color:#12a97a;background:#eafaf3;border-radius:999px;padding:.15rem .6rem;white-space:nowrap}
@media (max-width:640px){.aw-chart-canvas--sm{height:190px}.aw-chart-kpi{font-size:.9rem}}

/* ============================================================
   AllinWriter 2 — Level-up toast
   ============================================================ */
.aw-levelup-toast{
  position:fixed;right:24px;bottom:24px;z-index:99999;
  display:flex;align-items:center;gap:14px;
  min-width:280px;max-width:360px;padding:16px 40px 16px 16px;
  background:linear-gradient(135deg,#7E58EB 0%,#9B7BF0 100%);
  color:#fff;border-radius:16px;
  box-shadow:0 18px 40px rgba(126,88,235,.38);
  overflow:hidden;
  transform:translateY(16px) scale(.96);opacity:0;
  animation:awLevelUpIn .5s cubic-bezier(0.23,1,0.32,1) forwards;
}
.aw-levelup-toast--out{
  animation:awLevelUpOut .4s cubic-bezier(0.77,0,0.175,1) forwards;
}
@keyframes awLevelUpIn{to{transform:translateY(0) scale(1);opacity:1}}
@keyframes awLevelUpOut{to{transform:translateY(16px) scale(.96);opacity:0}}
.aw-levelup-toast__glow{
  position:absolute;inset:-40% -20% auto auto;width:180px;height:180px;
  background:radial-gradient(circle,rgba(101,223,175,.55) 0%,rgba(101,223,175,0) 70%);
  pointer-events:none;
}
.aw-levelup-toast__icon{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:rgba(255,255,255,.16);color:#FFE27A;
  animation:awStarPulse 1.6s ease-in-out infinite;
}
@keyframes awStarPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.aw-levelup-toast__body{position:relative;z-index:1;min-width:0}
.aw-levelup-toast__title{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;line-height:1.2}
.aw-levelup-toast__sub{font-size:12.5px;opacity:.92;margin-top:2px}
.aw-levelup-toast__reward{
  display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;
  background:#65DFAF;color:#0f3d2e;font-weight:700;font-size:12px;
}
.aw-levelup-toast__close{
  position:absolute;top:8px;right:10px;z-index:2;
  background:none;border:0;color:rgba(255,255,255,.8);
  font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px;
  transition:background .16s ease,color .16s ease;
}
.aw-levelup-toast__close:hover{background:rgba(255,255,255,.15);color:#fff}
@media (prefers-reduced-motion:reduce){
  .aw-levelup-toast{animation:none;transform:none;opacity:1}
  .aw-levelup-toast__icon{animation:none}
}

/* =====================================================================
   Document /edit — Quill editor themed to AllinWriter design system
   ===================================================================== */
.aw-edit-card{ background:#fff; border:1px solid #E2E0E7; border-radius:16px; padding:1.5rem; }
.aw-edit-card .form-group > label{ font-family:'Sora',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:#676777; margin-bottom:.5rem; }
.aw-edit-card #i-name{ border:1px solid #E2E0E7; border-radius:10px; padding:.7rem .9rem; font-family:'Inter Tight',sans-serif; color:#161726; background:#FBF9FE; transition:border-color .16s cubic-bezier(0.23,1,0.32,1), box-shadow .16s cubic-bezier(0.23,1,0.32,1); }
.aw-edit-card #i-name:focus{ border-color:#7E58EB; box-shadow:0 0 0 3px rgba(126,88,235,.15); outline:none; background:#fff; }

.aw-edit-editor{ border:1px solid #E2E0E7 !important; border-radius:12px; background:#fff; padding:0 !important; overflow:hidden; transition:border-color .16s cubic-bezier(0.23,1,0.32,1), box-shadow .16s cubic-bezier(0.23,1,0.32,1); }
.aw-edit-editor:focus-within{ border-color:#7E58EB !important; box-shadow:0 0 0 3px rgba(126,88,235,.12); }
.aw-edit-editor .aw-edit-toolbar{ border-bottom:1px solid #E2E0E7 !important; background:#FBF9FE; padding:.5rem .75rem !important; margin:0 !important; }
.aw-edit-editor .ql-toolbar.ql-snow, .aw-edit-editor .aw-edit-toolbar{ border:0 !important; }
.aw-edit-editor [id^="toolbar-"]{ border:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem .35rem; align-items:center; }
.aw-edit-editor .ql-formats{ margin-right:.6rem !important; display:inline-flex; align-items:center; padding-right:.6rem; border-right:1px solid #E2E0E7; }
.aw-edit-editor .ql-formats:last-child{ border-right:0; }
.aw-edit-editor .ql-formats button{ width:28px; height:28px; padding:4px; border-radius:7px; border:0; background:transparent; color:#161726; transition:background-color .14s ease-out, transform .14s cubic-bezier(0.23,1,0.32,1); }
.aw-edit-editor .ql-formats button:hover{ background:#EFEBFF; }
.aw-edit-editor .ql-formats button:active{ transform:scale(.94); }
.aw-edit-editor .ql-snow.ql-toolbar button.ql-active, .aw-edit-editor .ql-formats button.ql-active{ background:#EFEBFF; color:#7E58EB; }
.aw-edit-editor .ql-snow .ql-stroke{ stroke:#4b4b57; }
.aw-edit-editor .ql-formats button:hover .ql-stroke, .aw-edit-editor .ql-formats button.ql-active .ql-stroke{ stroke:#7E58EB; }
.aw-edit-editor .ql-snow .ql-fill{ fill:#4b4b57; }
.aw-edit-editor .ql-formats button:hover .ql-fill, .aw-edit-editor .ql-formats button.ql-active .ql-fill{ fill:#7E58EB; }
.aw-edit-editor .ql-container.ql-snow{ border:0 !important; }
.aw-edit-editor .ql-editor{ padding:1.1rem 1.25rem; min-height:220px; font-family:'Inter Tight',sans-serif; font-size:1rem; line-height:1.7; color:#161726; }
.aw-edit-editor .ql-editor.ql-blank::before{ color:#a1a1ad; font-style:normal; }
.aw-edit-editor .ql-editor img{ max-width:100%; height:auto; border-radius:12px; margin:.75rem 0; }
.aw-edit-card button[type="submit"]{ font-family:'Sora',sans-serif; font-weight:600; background:#7E58EB; border:0; border-radius:10px; padding:.65rem 1.6rem; color:#fff; transition:filter .16s ease-out, transform .16s cubic-bezier(0.23,1,0.32,1); box-shadow:0 6px 16px -6px rgba(126,88,235,.5); }
.aw-edit-card button[type="submit"]:hover{ filter:brightness(1.06); }
.aw-edit-card button[type="submit"]:active{ transform:scale(.97); }
/* /edit image gallery: full-width big image on top, AI Editor overlay, thumbnails row below */
[id^="result-image-"].images-container{ position:relative; display:block; margin-bottom:1.25rem; }
[id^="result-image-"].images-container .images-box-big{ display:block; width:100%; height:auto; max-height:520px; object-fit:cover; border-radius:14px; border:1px solid #E2E0E7; cursor:zoom-in; }
[id^="result-image-"].images-container .images-ai-editor{ position:absolute; top:16px; right:16px; z-index:3; overflow:hidden; isolation:isolate; font-family:'Sora',sans-serif; font-weight:600; font-size:.8rem; background:#FFC107; border:0; color:#161726; padding:.5rem 1rem; border-radius:10px; box-shadow:0 6px 16px -6px rgba(255,193,7,.7); transition:filter .16s ease-out, transform .16s cubic-bezier(0.23,1,0.32,1); }
[id^="result-image-"].images-container .images-ai-editor:hover{ filter:brightness(1.04); color:#161726; }
[id^="result-image-"].images-container .images-ai-editor:active{ transform:scale(.97); }
[id^="result-image-"].images-container .images-ai-editor > *{ position:relative; z-index:2; }
@media (prefers-reduced-motion: no-preference){
  [id^="result-image-"].images-container .images-ai-editor::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:60%; background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%); transform:translateX(-160%) skewX(-18deg); transition:transform 1.1s cubic-bezier(0.22,0.61,0.36,1); pointer-events:none; z-index:1; }
  [id^="result-image-"].images-container .images-ai-editor:hover::before{ transform:translateX(220%) skewX(-18deg); }
}
[id^="result-image-"].images-container .images-box-thumbnails{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
[id^="result-image-"].images-container .thumbnail-container{ position:relative; }
[id^="result-image-"].images-container .images-box-thumbnail{ width:110px; height:110px; object-fit:cover; border-radius:10px; border:2px solid #E2E0E7; opacity:.75; cursor:pointer; transition:opacity .14s ease-out, border-color .14s ease-out, transform .14s cubic-bezier(0.23,1,0.32,1); display:block; }
[id^="result-image-"].images-container .images-box-thumbnail:hover{ opacity:1; border-color:#a34df4; }
[id^="result-image-"].images-container .images-box-thumbnail.images-box-selected{ opacity:1; border-color:#7E58EB; box-shadow:0 0 0 3px rgba(126,88,235,.18); }


/* ===== Modern responsive footer ===== */
#footer .aw-footer-cols{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:2rem;
  margin-bottom:.5rem;
}
#footer .aw-footer-heading{
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#161726;
  margin-bottom:.85rem;
}
#footer .aw-footer-links{ list-style:none; margin:0; padding:0; }
#footer .aw-footer-links li{ margin:0; }
#footer .aw-footer-links a{
  display:inline-block;
  color:#6b6a73;
  font-size:.9rem;
  line-height:1.9;
  text-decoration:none;
  transition:color .15s var(--aw-ease-out), transform .15s var(--aw-ease-out);
}
#footer .aw-footer-links a:hover{ color:var(--aw-primary); transform:translateX(2px); }
#footer .aw-footer-social{ display:flex; gap:.6rem; }
#footer .aw-footer-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background:#f3f1fb; color:var(--aw-primary);
  transition:background .15s var(--aw-ease-out), color .15s var(--aw-ease-out), transform .15s var(--aw-ease-out);
}
#footer .aw-footer-social-link:hover{ background:var(--aw-primary); color:#fff; transform:translateY(-2px); }
#footer .aw-footer-social-link:active{ transform:scale(.94); }
#footer .aw-footer-social-link svg{ fill:currentColor; }

@media (max-width: 991.98px){
  #footer .aw-footer-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem 1rem; }
}
@media (max-width: 575.98px){
  #footer .aw-footer-cols{ grid-template-columns:1fr; gap:1.25rem; }
  #footer .aw-footer-heading{ margin-bottom:.5rem; }
  #footer .container{ padding-top:2rem !important; padding-bottom:2rem !important; }
}


/* --- Sidebar: slightly wider so long submenu labels (e.g. "Keyword Tracker") fit fully --- */
@media (min-width: 992px) {
    #slide-menu.slide-menu { width: 258px; }
    .content { margin-left: 258px !important; }
    [dir=rtl] #slide-menu.slide-menu { width: 258px; }
    [dir=rtl] .content { margin-right: 258px !important; margin-left: 0 !important; }
}
/* Tighten submenu item horizontal padding + icon gap to gain room for text */
#slide-menu .sidebar .sub-menu .nav-link { padding-left: .55rem !important; padding-right: .4rem !important; }
#slide-menu .sidebar .sub-menu .nav-link .icon-spacing { margin-right: 10px; }
#slide-menu .sidebar .nav-link .flex-grow-1 { min-width: 0; }