/**
 * myDraft CMS — Core Design System & UI Token Framework
 *
 * Modern, responsive CSS design system with CSS custom properties, dark/light mode tokens,
 * glassmorphism UI utilities, micro-animations, and atomic typography.
 *
 * @package myDraft CMS
 * @version 3.0.0
 */

@import './pricing.css';

:root {
  /* ========================================================================
     DESIGN-SYSTEM-COMPAT-SHIM
     Mappt die internen --bg-* / --text-* / --border-* Variablen dieses
     Design Systems auf die Produktiv-Token aus default.css (--color-*).
     Dadurch sind beide Dateien austauschbar, ohne Tokens zu duplizieren.
     ======================================================================== */

  /* Color Palette — Slate & Indigo Cyber Suite */
  --bg-primary: var(--color-primary, #0f172a);
  --bg-secondary: var(--color-primary-mid, #1e293b);
  --bg-card: var(--color-surface-card, rgba(30, 41, 59, 0.7));
  --bg-card-hover: var(--color-surface-hover, rgba(51, 65, 85, 0.8));

  --accent-primary: var(--color-accent, #6366f1);
  --accent-primary-hover: var(--color-accent-hover, #4f46e5);
  --accent-secondary: #06b6d4;
  --accent-success: var(--color-green, #10b981);
  --accent-warning: #f59e0b;
  --accent-danger: var(--color-red, #ef4444);

  --text-main: var(--color-text, #f8fafc);
  --text-muted: var(--color-text-muted, #94a3b8);
  --text-subtle: #64748b;

  --border-color: var(--color-border, rgba(255, 255, 255, 0.08));
  --border-focus: rgba(99, 102, 241, 0.5);

  /* Typography */
  --font-family-base: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --font-family-heading: 'Outfit', var(--font-family-base);
  --font-family-mono: 'Fira Code', monospace;

  /* Shadows & Glassmorphism */
  --glass-bg: rgba(15, 23, 42, 0.65);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --glass-backdrop: blur(12px);
  --shadow-sm: var(--shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  --shadow-md: var(--shadow-sm, 0 4px 6px -1px rgba(0, 0, 0, 0.3));
  --shadow-lg: var(--shadow-md, 0 10px 25px -5px rgba(0, 0, 0, 0.5));
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.35);

  /* Border Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: all 0.15s ease-in-out;
  --transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Accessibility: Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Text Selection ---- */
::selection {
  background: var(--accent-primary);
  color: #ffffff;
}

/* ---- Keyboard Focus Visibility (WCAG 2.1 AA) ---- */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Consistent Form Elements ---- */
input, select, textarea {
  font-family: var(--font-family-base);
  font-size: 1rem;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  transition: border-color var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Light Theme Overrides */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-card-hover: rgba(241, 245, 249, 1);

  --text-main: #0f172a;
  --text-muted: #475569;
  --text-subtle: #94a3b8;

  --border-color: rgba(0, 0, 0, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ---- Smooth Theme Transitions ---- */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* ---- Print Styles ---- */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }
  .sidebar, .rss-mobile-sticky-dock, #rss_reading_progress_bar,
  .offcanvas-mobile, .offcanvas-backdrop, .no-print {
    display: none !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  .cms-page-container { max-width: 100% !important; padding: 0 !important; }
}

/* ---- Native Color Scheme (prevents white flash in dark themes) ---- */
:root {
  color-scheme: dark light;
}

/* ---- Safari Backdrop-Filter Fallback (iOS < 15) ---- */
@supports not (backdrop-filter: blur(12px)) {
  .mydraft-card,.sidebar,.menue-widget,.rss-mobile-sticky-dock {
    background: rgba(15, 23, 42, 0.95);
  }
}

/* ---- :has() Parent Selector Utilities ---- */
.card:has(img) .card-body { padding-top: 0; }
.card:has(.badge.bg-danger) { border-color: var(--accent-danger, #ef4444); }
aside:has([data-lazy-sidebar]) { min-height: 60px; }

/* ---- Skeleton Loading Animation ---- */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-card, rgba(30, 41, 59, 0.7)) 25%,
    var(--bg-card-hover, rgba(51, 65, 85, 0.8)) 50%,
    var(--bg-card, rgba(30, 41, 59, 0.7)) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-text:last-child { width: 60%; }
.skeleton-thumbnail { width: 100%; aspect-ratio: 16/9; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- High Contrast Mode (Windows Ease of Access) ---- */
@media (forced-colors: active) {
  .btn, .button, .btn-primary { border: 2px solid ButtonText; }
  .card, .box, .block, .sidebar { border: 1px solid CanvasText; }
  .mydraft-card, .glass-bg, [style*="backdrop-filter"] { backdrop-filter: none !important; }
}

/* ---- Performance: content-visibility (auto-render skipping for long lists) ---- */
.cms-module-box[data-cms-module="rss_categoryview"] .layout_liste > li,
.tsec-video-rec-scroll .tsec-video-rec-card,
.mydraft-grid-dashboard > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

/* ---- Layout Stability: scrollbar-gutter stable (prevents layout shift) ---- */
html {
  scrollbar-gutter: stable;
}

/* ---- Typography: text-wrap balance for headlines ---- */
h1, h2, h3, h4, .rss-category-card-title, .tsec-article-detail h1 {
  text-wrap: balance;
}

/* ---- Typography: text-underline-offset for links ---- */
a:not(.btn):not(.button):not(.nav-link) {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* ---- Form Styling: accent-color in theme brand ---- */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--accent-primary, var(--color-accent, #6366f1));
}

/* ---- Dark Scrollbar Styling (matches dark theme) ---- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary, var(--color-primary, #0f172a));
}
::-webkit-scrollbar-thumb {
  background: var(--border-color, var(--color-border, #2a3a5c));
  border-radius: 5px;
  border: 2px solid var(--bg-primary, var(--color-primary, #0f172a));
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary, var(--color-accent, #f5a623));
}

/* ---- Hyphenation for German compound words (e.g. "Datenschutzerklärung") ---- */
p, .rss_content_text, .content, .rss-category-description, .ai-summary-content {
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* ---- Overflow-wrap for long URLs and code snippets ---- */
code, pre, .rss-category-card-title a, .rss-head-link a, [itemprop="headline"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- CSS Cascade Layers (Foundation → Components → Utilities → Overrides) ---- */
@layer foundation, components, utilities, overrides;

/* Layer-Zuweisungen für die Design-System-Komponenten */
@layer foundation {
  :root, body, h1, h2, h3, h4, h5, h6, a, p, img, ul, ol, table,
  input, select, textarea, button, .sr-only, ::selection {
    /* Foundation-Regeln werden hier zugewiesen */
  }
}
@layer components {
  .mydraft-card, .mydraft-btn, .mydraft-badge, .mydraft-table,
  .mydraft-stat-card, .mydraft-toast, .empty-state, .glass-panel,
  .offcanvas-mobile, .offcanvas-backdrop, .skeleton {
    /* Component-Regeln werden hier zugewiesen */
  }
}
@layer utilities {
  .text-gradient, .hover-lift, .focus-ring, .scroll-margin-top,
  .line-clamp-1, .line-clamp-2, .line-clamp-3, .line-clamp-4,
  .glass-panel, .sr-only {
    /* Utility-Regeln werden hier zugewiesen */
  }
}
@layer overrides {
  [data-theme="light"], [data-theme="dark"] {
    /* Theme-Overrides werden hier zugewiesen */
  }
}

/* ---- Performance: will-change hints for animated elements ---- */
.card, .mydraft-card, .rss-category-card, .tsec-video-rec-card,
.btn, .nav-link, [style*="backdrop-filter"] {
  will-change: transform;
}
.tsec-video-rec-card, .rss-mobile-sticky-dock, .sticky-header {
  will-change: transform, opacity;
}

/* ---- Line Clamp Utility (standardized text truncation) ---- */
.line-clamp-1 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.line-clamp-4 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; }

/* ---- Dark Mode Image Dimming (prevents white images from blinding in dark theme) ---- */
img:not([src*=".svg"]):not(.no-dim) {
  filter: brightness(0.92);
}
[data-theme="light"] img:not([src*=".svg"]):not(.no-dim) {
  filter: none;
}

/* ---- Tabular Numbers for tables (aligns prices/statistics) ---- */
table, .mydraft-table, .cms-stack-table, .stat-value, .price {
  font-variant-numeric: tabular-nums;
}

/* ---- Backface visibility for flicker-free transform animations ---- */
.card, .mydraft-card, .rss-category-card, .btn {
  backface-visibility: hidden;
}

/* ---- List markers in brand accent color ---- */
ul:not(.list-unstyled) li::marker,
ol:not(.list-unstyled) li::marker {
  color: var(--accent-primary, var(--color-accent, #f5a623));
}

/* ---- Mobile Touch Optimization ---- */
html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ========================================================================
   SAAS DESIGN-SYSTEM EXTENSIONS (Phase 4)
   ------------------------------------------------------------------------
   Neue wiederverwendbare Komponenten & Utilities für das myDraft CMS
   Design-System. Alle Komponenten nutzen die --color-* / --space-* /
   --radius-* / --shadow-* Tokens aus default.css.
   ======================================================================== */

/* ---- Container Queries: Fluid Card Grids ---- */
@container (min-width: 400px) {
  .module-card-grid,
  .isharestuff-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (min-width: 700px) {
  .module-card-grid,
  .isharestuff-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container (min-width: 1000px) {
  .module-card-grid,
  .isharestuff-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Utility: Gradient Text ---- */
.text-gradient {
  background: linear-gradient(135deg, var(--color-accent, #f5a623), var(--color-accent-hover, #ffc857));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Utility: Glass Panel ---- */
.glass-panel {
  background: var(--glass-bg, rgba(15, 23, 42, 0.65));
  backdrop-filter: var(--glass-backdrop, blur(12px));
  -webkit-backdrop-filter: var(--glass-backdrop, blur(12px));
  border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.3));
}

/* ---- Utility: Hover Lift ---- */
.hover-lift {
  transition: transform var(--duration-base, 0.25s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow var(--duration-base, 0.25s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 10px 25px -5px rgba(0, 0, 0, 0.5));
}

/* ---- Utility: Accessible Focus Ring ---- */
.focus-ring:focus-visible {
  outline: 2px solid var(--accent-primary, var(--color-accent, #f5a623));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 0.375rem);
}

/* ---- Utility: Scroll Margin for Anchor Links under Sticky Header ---- */
.scroll-margin-top,
[data-scroll-margin] {
  scroll-margin-top: calc(var(--nav-height, 60px) + 1rem);
}

/* ---- Form Validation States (Brand) ---- */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--color-green, #10b981);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310b981' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-red, #ef4444);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--color-green, #10b981);
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.15);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--color-red, #ef4444);
  box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.15);
}
.valid-feedback { color: var(--color-green, #10b981); }
.invalid-feedback { color: var(--color-red, #ef4444); }

/* ---- Toast / Notification System ---- */
.mydraft-toast {
  position: fixed;
  bottom: calc(var(--safe-area-inset-bottom, 0px) + 1rem);
  right: 1rem;
  z-index: 1100;
  min-width: 280px;
  max-width: 420px;
  padding: 1rem 1.25rem;
  background: var(--color-surface-card, rgba(30, 41, 59, 0.95));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-lg, 0 10px 25px -5px rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text, #f8fafc);
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.mydraft-toast.is-visible {
  transform: translateX(0);
}
.mydraft-toast-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.75rem;
  font-weight: 700;
}
.mydraft-toast-success .mydraft-toast-icon {
  background: var(--color-green-dim, rgba(16, 185, 129, 0.12));
  color: var(--color-green, #10b981);
}
.mydraft-toast-error .mydraft-toast-icon {
  background: var(--color-red-dim, rgba(239, 68, 68, 0.12));
  color: var(--color-red, #ef4444);
}
.mydraft-toast-warning .mydraft-toast-icon {
  background: var(--color-accent-dim, rgba(245, 166, 35, 0.12));
  color: var(--color-accent, #f5a623);
}
.mydraft-toast-info .mydraft-toast-icon {
  background: var(--color-blue-dim, rgba(59, 130, 246, 0.12));
  color: var(--color-blue, #3b82f6);
}
.mydraft-toast-body {
  flex: 1;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}
.mydraft-toast-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--color-text-heading, #ffffff);
}
.mydraft-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: var(--radius-sm, 0.375rem);
  transition: color var(--duration-fast, 0.15s);
}
.mydraft-toast-close:hover {
  color: var(--color-text, #f8fafc);
}

/* ---- Empty State Component ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12, 3rem) var(--space-6, 1.5rem);
  background: var(--color-surface-card, rgba(30, 41, 59, 0.7));
  border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg, 0.75rem);
}
.empty-state-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-accent-dim, rgba(245, 166, 35, 0.12));
  color: var(--color-accent, #f5a623);
  font-size: 1.5rem;
  margin-bottom: var(--space-4, 1rem);
}
.empty-state-title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-text-heading, #ffffff);
  margin-bottom: var(--space-2, 0.5rem);
}
.empty-state-description {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #94a3b8);
  max-width: 320px;
  margin-bottom: var(--space-6, 1.5rem);
}

/* ---- Typography: text-wrap pretty for paragraphs ---- */
p, .content p, .rss_content_text p {
  text-wrap: pretty;
}

/* ---- Form: field-sizing content for auto-width inputs ---- */
input[type="text"].auto-size,
input[type="search"].auto-size {
  field-sizing: content;
  min-width: 2ch;
}

/* ---- Scrollbar-gutter stable (prevents layout shift) ---- */
html {
  scrollbar-gutter: stable;
}

/* ---- Light Theme Overrides for Design System Components ---- */
[data-theme="light"] .mydraft-toast {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}
[data-theme="light"] .mydraft-toast-title {
  color: #0f172a;
}
[data-theme="light"] .empty-state {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .empty-state-title {
  color: #0f172a;
}
[data-theme="light"] .empty-state-description {
  color: #64748b;
}
[data-theme="light"] .glass-panel {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ---- CLS Protection for Lazy-Loaded Content ---- */
aside[data-lazy-sidebar]:not([data-lazy-activated="true"]) {
  min-height: 400px;
  contain: layout style paint;
}
aside[data-lazy-sidebar].sidebar-activated {
  contain: none;
}

/* ---- Font Loading Strategy (FOIT Prevention) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter'), local('Inter-Regular');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Outfit'), local('Outfit-Bold');
}

/* ---- Safe Area Insets (iPhone X+ Notch / Home Indicator) ---- */
:root {
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
}

/* Body overscroll containment when sticky dock is active */
body.has-mobile-dock {
  overscroll-behavior-y: contain;
}

/* Base Styles & Typography */
body {
  font-family: var(--font-family-base);
  background-color: var(--bg-primary);
  color: var(--text-main);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--text-main);
  margin-top: 0;
  letter-spacing: -0.025em;
}

/* Layout Utilities */
.mydraft-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
}

.mydraft-grid-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Glassmorphism Cards */
.mydraft-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
}

.mydraft-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Stat KPI Cards */
.mydraft-stat-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.mydraft-stat-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}

.mydraft-stat-value {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
}

.mydraft-stat-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.mydraft-stat-trend {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mydraft-trend-up {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-success);
}

.mydraft-trend-down {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger);
}

/* Modern Buttons */
.mydraft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.mydraft-btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.mydraft-btn-primary:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.mydraft-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border-color: var(--border-color);
}

.mydraft-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--text-muted);
}

/* Badges & Pills */
.mydraft-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.mydraft-badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent-success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.mydraft-badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Responsive Tables */
.mydraft-table-container {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
}

.mydraft-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.mydraft-table th {
  background: rgba(15, 23, 42, 0.8);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 1.25rem;
  border-bottom: var(--border-color);
}

.mydraft-table td {
  padding: 1rem 1.25rem;
  border-bottom: var(--border-color);
  font-size: 0.875rem;
  color: var(--text-main);
}

.mydraft-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   Mobile-First Breakpoint Context Classes (set by JS in jquery_user_main.js)
   Enables context-dependent styling without media-query duplication.
   ========================================================================== */
html.is-mobile  { --sidebar-visibility: none; }
html.is-tablet  { --sidebar-visibility: block; }
html.is-desktop { --sidebar-visibility: block; }

/* ---- Content-Priority Utility (RSS/News Modules on Mobile/Tablet) ---- */
html.is-mobile .cms-content-priority,
html.is-tablet .cms-content-priority {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* ---- Sidebar Lazy-Load Placeholder ---- */
aside[data-lazy-sidebar] {
  min-height: 60px;
  display: var(--sidebar-visibility, block);
}
.sidebar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  animation: sidebar-pulse 1.5s ease-in-out infinite;
}
@keyframes sidebar-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* ---- Mobile-First Spacing System ---- */
:root {
  --content-gap-mobile: 0.5rem;
  --content-gap-tablet: 0.75rem;
  --content-gap-desktop: 1.5rem;
}
.cms-module-box {
  margin-bottom: var(--content-gap-mobile);
}
@media (min-width: 576px) {
  .cms-module-box { margin-bottom: var(--content-gap-tablet); }
}
@media (min-width: 992px) {
  .cms-module-box { margin-bottom: var(--content-gap-desktop); }
}

/* ---- Universal Touch Target Enforcement (44px minimum) ---- */
@media (pointer: coarse) {
  .btn, .nav-link, .badge, a[href], button, [role="button"],
  .tsec-mm-subcard-item a, .tsec-tree-toggle, .rss-category-card-readmore,
  .rss-social-follow-btn, .rss-share-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-xs, .badge {
    min-height: 36px;
  }
  /* Navigation Tree: adequate tap spacing */
  .nav-link, button.nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* ---- CSS-Only Offcanvas Drawer Basics (for menus/panels) ---- */
.offcanvas-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  height: 100dvh;
  z-index: 1050;
  background: var(--bg-primary);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--safe-area-inset-bottom, 0px);
}
.offcanvas-mobile.is-open {
  transform: translateX(0);
}
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.offcanvas-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---- RSS/News Module Mobile Optimization ---- */
[data-cms-module="rss_content_view"].cms-module-box,
[data-cms-module="rss_categoryview"].cms-module-box {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 575.98px) {
  [data-cms-module="rss_content_view"].cms-module-box,
  [data-cms-module="rss_categoryview"].cms-module-box {
    margin-top: 0;
    margin-bottom: 0.25rem;
  }
}