*, *::before, *::after {
  box-sizing: border-box;
}

/* nextin-header-widget.css */

:root {
  --color-cream: #F9F7F5;
  --color-parchment: #F5F1EA;
  --color-slate: #3A3A3C; /* Existing dark grey */
  --color-mist: #E8E6E1; /* Existing light grey */
  --color-neutral-grey: #888B8D; /* New neutral grey */
  --color-soft-charcoal: #525252; /* A softer dark grey for text on light pastels */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Original Pastels */
  --color-lavender: #E6E8FF; --color-lavender-rgb: 230, 232, 255;
  --color-mint: #E0F2EC; --color-mint-rgb: 224, 242, 236;
  --color-coral: #FFE8E8; --color-coral-rgb: 255, 232, 232;
  /* --color-parchment is already defined, can be used as a pastel */
   --color-parchment-rgb: 245, 241, 234; /* RGB for parchment */
  /* --color-slate is too dark for a typical pastel, used as a base text color */
   --color-slate-rgb: 58, 58, 60; /* RGB for slate */

  /* Expanded Pastel Palette (approx. 15 new ones + 5 existing = 20) */
  --pastel-sky-blue: #D6EAF8; --pastel-sky-blue-rgb: 214, 234, 248;
  --pastel-powder-blue: #A9CCE3; --pastel-powder-blue-rgb: 169, 204, 227;
  --pastel-periwinkle: #CCCCFF; --pastel-periwinkle-rgb: 204, 204, 255;
  --pastel-lilac: #D8BFD8; --pastel-lilac-rgb: 216, 191, 216;
  --pastel-pale-pink: #FADADD; --pastel-pale-pink-rgb: 250, 218, 221;
  --pastel-rose-quartz: #F7CAC9; --pastel-rose-quartz-rgb: 247, 202, 201;
  --pastel-peach: #FFDAB9; --pastel-peach-rgb: 255, 218, 185;
  --pastel-apricot: #FFCCBC; --pastel-apricot-rgb: 255, 204, 188;
  --pastel-light-yellow: #FFFFE0; --pastel-light-yellow-rgb: 255, 255, 224;
  --pastel-buttercream: #FFFACD; --pastel-buttercream-rgb: 255, 250, 205;
  --pastel-seafoam-green: #AEEEEE; --pastel-seafoam-green-rgb: 174, 238, 238;
  --pastel-celadon: #ACE1AF; --pastel-celadon-rgb: 172, 225, 175;
  --pastel-light-aqua: #AFEEEE; --pastel-light-aqua-rgb: 175, 238, 238;
  --pastel-baby-blue-eyes: #A1CAF1; --pastel-baby-blue-eyes-rgb: 161, 202, 241;
  --pastel-thistle: #D8BFD8; --pastel-thistle-rgb: 216, 191, 216;

  /* Warm Sunset Theme Colors */
  --sunset-red: #FF6B6B; --sunset-red-rgb: 255, 107, 107;
  --sunset-orange: #FFA07A; --sunset-orange-rgb: 255, 160, 122; /* Light Salmon */
  --sunset-deep-orange: #FF7F50; --sunset-deep-orange-rgb: 255, 127, 80; /* Coral */
  --sunset-yellow: #FFD700; --sunset-yellow-rgb: 255, 215, 0; /* Gold */
  --sunset-pink: #FFC0CB; --sunset-pink-rgb: 255, 192, 203; /* Pink */

  /* Cool Ocean Theme Colors */
  --ocean-deep-blue: #0077BE; --ocean-deep-blue-rgb: 0, 119, 190;
  --ocean-medium-blue: #58A4B0; --ocean-medium-blue-rgb: 88, 164, 176;
  --ocean-teal: #20B2AA; --ocean-teal-rgb: 32, 178, 170; /* LightSeaGreen */
  --ocean-aqua: #7FFFD4; --ocean-aqua-rgb: 127, 255, 212; /* Aquamarine */
  --ocean-light-blue: #ADD8E6; --ocean-light-blue-rgb: 173, 216, 230; /* LightBlue */

  /* Sentiment-Driven Colors - Sophisticated & Serene Palette */
  --sentiment-positive: #059669; --sentiment-positive-rgb: 5, 150, 105;        /* Muted emerald */
  --sentiment-positive-light: #6ee7b7; --sentiment-positive-light-rgb: 110, 231, 183;  /* Soft emerald */
  --sentiment-negative: #dc2626; --sentiment-negative-rgb: 220, 38, 38;        /* Muted red */
  --sentiment-negative-light: #fca5a5; --sentiment-negative-light-rgb: 252, 165, 165;  /* Soft coral */
  --sentiment-neutral: #64748b; --sentiment-neutral-rgb: 100, 116, 139;        /* Sophisticated slate */
  --sentiment-neutral-light: #cbd5e1; --sentiment-neutral-light-rgb: 203, 213, 225;    /* Soft slate */
  --sentiment-mixed: #d97706; --sentiment-mixed-rgb: 217, 119, 6;              /* Muted amber */
  --sentiment-mixed-light: #fed7aa; --sentiment-mixed-light-rgb: 254, 215, 170;        /* Soft amber */
  --sentiment-unknown: #9ca3af; --sentiment-unknown-rgb: 156, 163, 175;        /* Gentle gray */

  /* Variables for opacity - to be set by JS */
  --pill-opacity-1: 1;
  --pill-opacity-2: 1;
  --pill-opacity-3: 1;
  --pill-opacity-4: 1;
  --pill-opacity-5: 1;
  --overall-theme-pill-opacity: 1;

  /* Default text colors for pills - can be overridden by themes if needed */
  --default-pill-text-light: var(--color-white);
  --default-pill-text-dark: var(--color-soft-charcoal);

  /* Accent color for focused items - placeholder, will be set by JS */
  --accent-color: #3b82f6; --accent-color-rgb: 59, 130, 246;
  --accent-text-color: var(--color-white); /* Default text for accent background */

  /* Variables to be set by theme classes for individual pills */
  --current-pill-bg-color: var(--color-mist); /* Fallback */
  --current-pill-text-color: var(--default-pill-text-dark); /* Fallback */
}

.nextin-header-widget {
  font-family: 'Inter', sans-serif;
  /* Default: no background, no padding, no styling */
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  /* Accent color will be set dynamically via inline style on the element by JS */
}

/* Only apply background styling when has-background class is present */
.nextin-header-widget.has-background {
  background: var(--color-parchment);
  padding: 20px 24px;
  border-radius: 16px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* New Animated Header Styles */
.nextin-animated-header {
  display: flex;
  align-items: center;
  gap: 10px; /* Gap between label, window, and surprise button */
  padding: 10px; /* Optional: padding around the whole header unit */
  background: linear-gradient(135deg, rgba(230, 232, 255, 0.3), rgba(224, 242, 236, 0.3)); /* Existing madlibs style */
  border-radius: 12px; /* Existing madlibs style */
  border: 1px solid rgba(255, 255, 255, 0.6); /* Existing madlibs style */
  backdrop-filter: blur(10px); /* Existing madlibs style */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); /* Existing madlibs style */
  margin-bottom: 20px; /* Spacing below header */
}

.animated-header-label {
  font-weight: 500;
  font-size: 18px;
  color: var(--color-slate);
  white-space: nowrap;
}

.highlight-window {
  flex-grow: 0; /* Do not grow beyond specified width */
  flex-shrink: 0; /* Do not shrink below specified width */
  /* width: 220px; */ /* Default width removed, JS will set it */
  /* max-width: 300px; */ /* Max-width removed, JS calculation will handle constraints */
  height: 40px; /* Adjust height to fit tags comfortably */
  border: 1px solid var(--color-mist);
  background-color: white;
  border-radius: 8px;
  overflow: hidden; /* This is crucial */
  position: relative; /* For fade effects */
  display: flex; /* To help center the treadmill if its content is narrower than the window */
  align-items: center; /* Vertically center tags in the window */
}

.highlight-window.highlight-window-transparent {
  background-color: transparent;
}

.highlight-window::before,
.highlight-window::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25px; /* Adjusted width of the fade effect */
  z-index: 2;
  pointer-events: none;
}

.highlight-window::before {
  left: 0;
  background: linear-gradient(to right, var(--color-parchment) 0%, rgba(245,241,234,0) 100%); /* Fade from widget bg */
}
.highlight-window.highlight-window-transparent::before {
  background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); /* Subtle shadow fade for transparent */
}

.highlight-window::after {
  right: 0;
  background: linear-gradient(to left, var(--color-parchment) 0%, rgba(245,241,234,0) 100%); /* Fade from widget bg */
}
.highlight-window.highlight-window-transparent::after {
  background: linear-gradient(to left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); /* Subtle shadow fade for transparent */
}

.tags-treadmill {
  display: flex; /* Tags in a row */
  align-items: center; /* Vertically align tags */
  height: 100%;
  position: relative; /* Allow transform for scrolling */
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); /* Smooth scrolling */
  white-space: nowrap; /* Prevent tags from wrapping */
  padding: 0 8px; /* Some padding inside the treadmill so tags aren't flush with window edges if list is short */
}

.nextin-animated-header .tag-item { /* Styling for individual tags in the new header - DEFAULT: NO PILLS */
  display: inline-flex; /* Use inline-flex for better alignment of text and icon */
  align-items: center;
  padding: 6px 10px; /* Minimal padding for no-pill default */
  border-radius: 0 !important; /* No pill shape by default */
  font-size: 15px !important; /* Increased font size, added important */
  font-weight: 500;
  color: var(--color-slate);
  text-decoration: none !important; /* Ensure no underline from theme */
  white-space: nowrap; /* Prevent text wrapping within a tag */
  margin-right: 10px; /* Space between tags */
  opacity: 0.6; /* Default opacity for non-focused tags */
  cursor: pointer;
  transform: scale(1); /* Base scale */
  background-color: transparent !important; /* No background by default */
  border: none !important; /* No border by default */
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.nextin-animated-header .tag-item span:not(.tag-lock-icon) { /* Target only the text span */
  display: inline-block; /* Or block if preferred for text-overflow to work reliably */
  vertical-align: middle; /* Align with potential icons or if line-height changes */
  font-size: 15px !important; /* Ensure font size applies directly to text container */
}

/* Styles for when background pills ARE enabled - for text truncation */
.nextin-animated-header.has-background-pills .tag-item span:not(.tag-lock-icon) {
  max-width: 200px; /* Adjust as needed, consider window size and pill padding */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* Ensure it's on one line for ellipsis */
}

.nextin-animated-header .tag-item .tag-lock-icon {
  margin-left: 6px;
  font-size: 0.8em;
  opacity: 0.7;
}

/* Focused tag style - general (applies whether pills are on or off) */
.nextin-animated-header .tag-item.tag-item-focused {
  opacity: 1;
  transform: scale(1.05);
  font-weight: 600;
  /* color will be handled by pill/no-pill specific focused styles */
}

/* --- Styles for when background pills ARE enabled --- */
.nextin-animated-header.has-background-pills .tag-item {
  padding: 6px 16px; /* Original padding for pills */
  border-radius: 20px !important; /* Pill shape */
  background: var(--current-pill-bg-color) !important; /* APPLY THE BACKGROUND COLOR VARIABLE with !important */
  color: var(--current-pill-text-color) !important; /* APPLY THE TEXT COLOR VARIABLE with !important */
  border-width: 1px; /* Ensure border width is set */
  border-style: solid; /* Ensure border style is set */
  /* border-color is set by individual theme rules directly or inherited if not specified by theme */
  text-shadow: 0 1px 1px rgba(0,0,0,0.08); /* Consistent text shadow for pills */
  /* Added !important to background and color to ensure it overrides any base styles. */
}

/* --- Pill Theme Definitions --- */

/* Theme: Default Pastels (5 colors) - Original Theme */
/* Note: JS applies theme-default_pastel_5 (with underscore) */
.nextin-animated-header.theme-default_pastel_5.has-background-pills .tag-item:nth-child(5n+1) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-lavender-rgb), var(--pill-opacity-1, 1)); --current-pill-text-color: var(--pill-text-color-1, var(--default-pill-text-dark)); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-default_pastel_5.has-background-pills .tag-item:nth-child(5n+2) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-mint-rgb), var(--pill-opacity-2, 1)); --current-pill-text-color: var(--pill-text-color-2, var(--default-pill-text-dark)); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-default_pastel_5.has-background-pills .tag-item:nth-child(5n+3) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-coral-rgb), var(--pill-opacity-3, 1)); --current-pill-text-color: var(--pill-text-color-3, var(--default-pill-text-dark)); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-default_pastel_5.has-background-pills .tag-item:nth-child(5n+4) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-parchment-rgb), var(--pill-opacity-4, 1)); --current-pill-text-color: var(--pill-text-color-4, var(--default-pill-text-dark)); border-color: var(--color-mist) !important;}
.nextin-animated-header.theme-default_pastel_5.has-background-pills .tag-item:nth-child(5n+5) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-slate-rgb), var(--pill-opacity-5, 1)); --current-pill-text-color: var(--pill-text-color-5, var(--default-pill-text-light)); border-color: rgba(0,0,0,0.08);}

/* Theme: Expanded Pastels (20 colors) */
/* Mix of existing and new pastels. Text color defaults to dark, adjust if specific pastel is very dark. */
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+1) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-lavender-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+2) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-mint-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+3) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-coral-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+4) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-sky-blue-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+5) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-pale-pink-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+6) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-peach-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+7) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-light-yellow-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+8) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-seafoam-green-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+9) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-parchment-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: var(--color-mist) !important; } /* Original parchment with border */
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+10) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-periwinkle-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+11) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-lilac-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+12) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-rose-quartz-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+13) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-apricot-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+14) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-buttercream-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+15) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-celadon-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+16) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-light-aqua-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+17) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-powder-blue-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+18) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-baby-blue-eyes-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+19) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--pastel-thistle-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08); }
.nextin-animated-header.theme-expanded_pastel_20.has-background-pills .tag-item:nth-child(20n+20) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), rgba(var(--color-slate-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08); } /* Original slate */

/* Theme: Warm Sunset */
.nextin-animated-header.theme-warm_sunset.has-background-pills .tag-item:nth-child(5n+1) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sunset-red-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-warm_sunset.has-background-pills .tag-item:nth-child(5n+2) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sunset-deep-orange-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-warm_sunset.has-background-pills .tag-item:nth-child(5n+3) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sunset-orange-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-warm_sunset.has-background-pills .tag-item:nth-child(5n+4) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sunset-yellow-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-warm_sunset.has-background-pills .tag-item:nth-child(5n+5) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sunset-pink-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08);}

/* Theme: Cool Ocean */
.nextin-animated-header.theme-cool_ocean.has-background-pills .tag-item:nth-child(5n+1) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--ocean-deep-blue-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-cool_ocean.has-background-pills .tag-item:nth-child(5n+2) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--ocean-medium-blue-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-cool_ocean.has-background-pills .tag-item:nth-child(5n+3) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--ocean-teal-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-cool_ocean.has-background-pills .tag-item:nth-child(5n+4) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--ocean-aqua-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-cool_ocean.has-background-pills .tag-item:nth-child(5n+5) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--ocean-light-blue-rgb), var(--overall-theme-pill-opacity, 1)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08);}

/* Sentiment-Driven Theme - Sophisticated Colors */
.nextin-animated-header.theme-sentiment_driven.has-background-pills .tag-item[data-sentiment="positive"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-positive-rgb), var(--overall-theme-pill-opacity, 0.8)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-sentiment_driven.has-background-pills .tag-item[data-sentiment="negative"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-negative-rgb), var(--overall-theme-pill-opacity, 0.8)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-sentiment_driven.has-background-pills .tag-item[data-sentiment="neutral"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-neutral-rgb), var(--overall-theme-pill-opacity, 0.7)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-sentiment_driven.has-background-pills .tag-item[data-sentiment="mixed"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-mixed-rgb), var(--overall-theme-pill-opacity, 0.8)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-sentiment_driven.has-background-pills .tag-item[data-sentiment="unknown"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-unknown-rgb), var(--overall-theme-pill-opacity, 0.6)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08);}

/* Sentiment-Driven Light Theme - Ultra-Serene Pastels */
.nextin-animated-header.theme-sentiment_light.has-background-pills .tag-item[data-sentiment="positive"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-positive-light-rgb), var(--overall-theme-pill-opacity, 0.9)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.05);}
.nextin-animated-header.theme-sentiment_light.has-background-pills .tag-item[data-sentiment="negative"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-negative-light-rgb), var(--overall-theme-pill-opacity, 0.9)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.05);}
.nextin-animated-header.theme-sentiment_light.has-background-pills .tag-item[data-sentiment="neutral"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-neutral-light-rgb), var(--overall-theme-pill-opacity, 0.8)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.05);}
.nextin-animated-header.theme-sentiment_light.has-background-pills .tag-item[data-sentiment="mixed"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-mixed-light-rgb), var(--overall-theme-pill-opacity, 0.9)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.05);}
.nextin-animated-header.theme-sentiment_light.has-background-pills .tag-item[data-sentiment="unknown"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-unknown-rgb), var(--overall-theme-pill-opacity, 0.5)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.05);}

/* Multi-Source Sentiment Intelligence Theme */
.nextin-animated-header.theme-sentiment_multi_source.has-background-pills .tag-item[data-sentiment="positive"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-positive-rgb), var(--overall-theme-pill-opacity, 0.85)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.06);}
.nextin-animated-header.theme-sentiment_multi_source.has-background-pills .tag-item[data-sentiment="negative"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-negative-rgb), var(--overall-theme-pill-opacity, 0.85)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.06);}
.nextin-animated-header.theme-sentiment_multi_source.has-background-pills .tag-item[data-sentiment="neutral"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-neutral-rgb), var(--overall-theme-pill-opacity, 0.75)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.06);}
.nextin-animated-header.theme-sentiment_multi_source.has-background-pills .tag-item[data-sentiment="mixed"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-mixed-rgb), var(--overall-theme-pill-opacity, 0.85)); --current-pill-text-color: var(--default-pill-text-light); border-color: rgba(0,0,0,0.06);}
.nextin-animated-header.theme-sentiment_multi_source.has-background-pills .tag-item[data-sentiment="unknown"] { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-unknown-rgb), var(--overall-theme-pill-opacity, 0.65)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.06);}

/* Fallback for sentiment themes when no data-sentiment attribute is present */
.nextin-animated-header.theme-sentiment_driven.has-background-pills .tag-item:not([data-sentiment]) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-neutral-rgb), var(--overall-theme-pill-opacity, 0.7)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.08);}
.nextin-animated-header.theme-sentiment_light.has-background-pills .tag-item:not([data-sentiment]) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-neutral-light-rgb), var(--overall-theme-pill-opacity, 0.8)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.05);}
.nextin-animated-header.theme-sentiment_multi_source.has-background-pills .tag-item:not([data-sentiment]) { --current-pill-bg-color: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), rgba(var(--sentiment-neutral-rgb), var(--overall-theme-pill-opacity, 0.75)); --current-pill-text-color: var(--default-pill-text-dark); border-color: rgba(0,0,0,0.06);}

/* Multi-Source Sentiment Divergence Indicators */
.nextin-animated-header .tag-item[data-sentiment-divergence="true"] {
  position: relative;
}

.nextin-animated-header .tag-item[data-sentiment-divergence="true"]::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sentiment-positive-rgb) 0%, var(--sentiment-negative-rgb) 100%);
  opacity: 0.8;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* Multi-source sentiment consensus strength indicators */
.nextin-animated-header .tag-item[data-consensus="strong"] {
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3), 0 2px 4px rgba(0,0,0,0.1);
}

.nextin-animated-header .tag-item[data-consensus="weak"] {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 2px 4px rgba(0,0,0,0.1);
}

.nextin-animated-header .tag-item[data-consensus="moderate"] {
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.3), 0 2px 4px rgba(0,0,0,0.1);
}

/* Publication type sentiment leaders - subtle indicators */
.nextin-animated-header .tag-item[data-industry-positive="true"] {
  border-left: 3px solid rgba(34, 197, 94, 0.6);
}

.nextin-animated-header .tag-item[data-consumer-positive="true"] {
  border-right: 3px solid rgba(34, 197, 94, 0.6);
}

.nextin-animated-header .tag-item[data-mainstream-negative="true"] {
  border-top: 2px solid rgba(239, 68, 68, 0.6);
}

.nextin-animated-header .tag-item[data-specialist-divergent="true"] {
  background-image: linear-gradient(45deg, transparent 40%, rgba(99, 102, 241, 0.1) 50%, transparent 60%);
}

/* Focused tag style when .has-background-pills is active (applies to all themes) */
.nextin-animated-header.has-background-pills .tag-item.tag-item-focused {
  color: var(--accent-text-color, var(--default-pill-text-light)) !important; /* Use dynamic accent text color, fallback to white */
  background-color: var(--accent-color) !important; /* Use important to override individual theme/nth-child colors */
  border-radius: 20px !important; /* Ensure pill shape is maintained on focus */
  box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); /* Softer, slightly more pronounced outer shadow */
  border-color: var(--accent-color) !important; /* Ensure border color matches accent on focus for 5n+4 */
}
.nextin-animated-header.has-background-pills .tag-item.tag-item-focused .tag-lock-icon {
  opacity: 1;
  color: var(--accent-text-color, white) !important; /* Use dynamic accent text color for lock icon */
}

/* --- Styles for when background pills are NOT enabled (default) --- */
/* Force override any pill styling when NOT using .has-background-pills */
.nextin-animated-header:not(.has-background-pills) .tag-item {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
}

/* Focused tag styling when pills are DISABLED - use accent color background */
.nextin-animated-header:not(.has-background-pills) .tag-item.tag-item-focused {
  background-color: var(--accent-color) !important; /* Use custom accent color */
  color: white !important; /* White text on accent background */
  border-radius: 4px !important; /* Subtle rounded corners */
  padding: 6px 12px !important; /* Slightly more padding for focus state */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Subtle shadow */
}
.nextin-animated-header:not(.has-background-pills) .tag-item.tag-item-focused .tag-lock-icon {
  opacity: 1 !important;
  color: white !important; /* White lock icon on accent background */
}

/* General fallback focused styling (for backwards compatibility) */
.nextin-animated-header .tag-item.tag-item-focused {
    color: var(--accent-color); /* This will be overridden by more specific rules above */
}
.nextin-animated-header .tag-item.tag-item-focused .tag-lock-icon {
    opacity: 1;
    color: var(--accent-color);
}


/* Ensure user customization controls (Surprise Me button) are styled and positioned */
.nextin-animated-header .user-customization-controls {
  margin-left: auto; /* Pushes it to the right if header has space */
}

/* Remove or adapt old .nextin-tags, .nextin-madlibs, .nextin-blank styles */
.nextin-tags, .nextin-madlibs, .nextin-blank, .nextin-tags .tags-list, .nextin-tags .tag-item {
  /* If these selectors are still used elsewhere or by old JS, they might need careful deprecation. */
  /* For now, assume the new structure replaces their primary styling role for the animated header. */
  /* Resetting some properties that might conflict with new layout for these old selectors if they are somehow still on page */
}
/* Example of clearing out old styles if they were very specific: */
.nextin-tags { display: none; /* Hide old structure if new one is completely replacing it and they share a parent */ }


/* Static Header (ensure it's not affected if selectors were too broad) */
.nextin-header .static-header { /* More specific selector for static header */
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(230, 232, 255, 0.2), rgba(224, 242, 236, 0.2));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.widget-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-slate);
  margin: 0;
}

/* Stories Grid Layout - Default Safe Grid */
.nextin-stories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 200px 200px 200px;
  gap: 16px;
  margin-top: 20px;
}

/* Default positioning for cards - only when NOT using custom grid */
.nextin-header-widget:not(.custom-grid-active) .nextin-stories-grid .story-card:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.nextin-header-widget:not(.custom-grid-active) .nextin-stories-grid .story-card:nth-child(2) {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}

.nextin-header-widget:not(.custom-grid-active) .nextin-stories-grid .story-card:nth-child(3) {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
}

.nextin-header-widget:not(.custom-grid-active) .nextin-stories-grid .story-card:nth-child(4) {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}

.nextin-header-widget:not(.custom-grid-active) .nextin-stories-grid .story-card:nth-child(5) {
  grid-column: 4 / span 1;
  grid-row: 2 / span 1;
}

/* Custom grid positioning - when JavaScript sets custom layout */
.nextin-header-widget.custom-grid-active .nextin-stories-grid .story-card {
  /* Reset default positioning to allow JavaScript control */
  grid-column: auto; /* Removed !important */
  grid-row: auto;    /* Removed !important */
}

/* User customization elements */
.tag-lock-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 12px;
  cursor: pointer;
  z-index: 10;
  background: white;
  border-radius: 50%;
  padding: 2px;
  border: 1px solid var(--color-mist);
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

.tag-item:hover .tag-lock-icon {
  opacity: 1;
  transform: scale(1);
}

.tag-lock-icon:hover {
  background: var(--accent-color);
  color: white;
  transform: scale(1.1);
}

.sticky-tag-updated {
  animation: stickyTagPulse 0.3s ease;
}

@keyframes stickyTagPulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.surprise-me-btn {
  /* Default asterisk/circle state */
  width: 32px; /* Small size for asterisk */
  height: 32px;
  padding: 0;
  border-radius: 50%; /* Circle */
  background: linear-gradient(45deg, var(--sunset-yellow), var(--sunset-pink), var(--pastel-sky-blue), var(--pastel-celadon));
  background-size: 200% 200%; /* For gradient animation if desired */
  animation: nextinSurpriseGradient 10s ease infinite;
  border: none;
  color: white; /* For the asterisk */
  cursor: pointer;
  position: relative; /* For pseudo-elements and placement */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Important for text hiding and shape */
  font-size: 0; /* Hide original text "Surprise Me" */
  text-indent: -9999px; /* Further ensure text is hidden */
  margin-left: 12px; /* Default margin, can be overridden by placement classes */
  transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              border-radius 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              padding 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              background 0.3s ease-out; /* Simpler background transition */
  z-index: 20; /* Ensure it's above other elements like highlight window fades */
}

/* Asterisk shape using pseudo-elements */
.surprise-me-btn::before,
.surprise-me-btn::after {
  content: '';
  position: absolute;
  background-color: white; /* Color of the asterisk lines */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Separate transitions */
}
.surprise-me-btn::before { /* Line 1 of X */
  width: 2px;
  height: 16px; /* Full height of X */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.surprise-me-btn::after { /* Line 2 of X */
  width: 2px;
  height: 16px; /* Full height of X */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Text span for "Surprise Me" - hidden by default, shown on hover */
.surprise-me-btn .surprise-me-text {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease-out 0.2s, transform 0.2s ease-out 0.2s; /* Delayed appearance */
  font-size: 14px; /* Will be set on hover */
  font-weight: 500;
  color: var(--color-slate); /* Default text color for the pill */
  white-space: nowrap;
}

.surprise-me-btn:hover {
  width: auto; /* Expand to fit content */
  min-width: 120px; /* Example min-width for pill */
  height: 32px; /* Keep height consistent or adjust as needed */
  border-radius: 20px; /* Pill shape */
  padding: 0px 16px; /* Padding for pill text */
  background: linear-gradient(135deg, var(--color-mint), var(--color-coral)); /* Explicit hover background */
  animation: none; /* Stop the default gradient animation on hover */
  text-indent: 0; /* Show text */
  /* transform: translateY(-2px); /* Existing lift, can keep or remove */
  /* box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); /* Existing shadow */
}

.surprise-me-btn:hover::before,
.surprise-me-btn:hover::after {
  opacity: 0; /* Hide asterisk lines on hover */
  transform: translate(-50%, -50%) scale(0.5);
}

.surprise-me-btn:hover .surprise-me-text {
  opacity: 1;
  transform: scale(1);
  font-size: 14px; /* Ensure font size is set for the text */
  color: var(--color-slate); /* Ensure text color is correct on hover */
}

@keyframes nextinSurpriseGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


.surprise-me-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  animation: none; /* Stop gradient animation when disabled */
  background: var(--color-mist); /* Simple disabled background */
}

.surprise-chaos {
  animation: chaosMovement 1.5s ease-in-out;
}

@keyframes chaosMovement {
0% { transform: translateX(0) translateY(0) rotate(0deg); }
20% { transform: translateX(50px) translateY(-20px) rotate(45deg); }
40% { transform: translateX(-30px) translateY(30px) rotate(-30deg); }
60% { transform: translateX(40px) translateY(-10px) rotate(60deg); }
80% { transform: translateX(-20px) translateY(20px) rotate(-45deg); }
100% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; }
}

.user-customization-controls {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

.edit-tags-btn {
  background: var(--color-mist);
  border: none;
  border-radius: 15px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--color-slate);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.edit-tags-btn:hover {
  opacity: 1;
  background: var(--accent-color);
  color: white;
  transform: scale(1.05);
}

/* Layout: All Small Cards */
.nextin-header-widget[data-layout="all_small"] .nextin-stories-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 180px);
}

.nextin-header-widget[data-layout="all_small"] .story-card {
  grid-column: span 1;
  grid-row: span 1;
}

/* Layout: Two Big Cards */
.nextin-header-widget[data-layout="two_big"] .nextin-stories-grid {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 220px);
}

.nextin-header-widget[data-layout="two_big"] .story-card:nth-child(1),
.nextin-header-widget[data-layout="two_big"] .story-card:nth-child(2) {
  grid-column: span 1;
  grid-row: span 2;
}

.nextin-header-widget[data-layout="two_big"] .story-card:nth-child(n+3) {
  grid-column: span 1;
  grid-row: span 1;
}

/* Layout: Trending List */
.nextin-header-widget[data-layout="trending"] .nextin-stories-grid {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 120px);
  max-width: 600px;
}

.nextin-header-widget[data-layout="trending"] .story-card {
  grid-column: span 1;
  grid-row: span 1;
  display: flex;
  flex-direction: row;
  max-height: 120px;
}

.nextin-header-widget[data-layout="trending"] .story-image {
  width: 180px;
  height: 100%;
  flex-shrink: 0;
}

.nextin-header-widget[data-layout="trending"] .story-content {
  flex: 1;
  padding: 12px;
  height: 100%;
}

.story-card {
  display: flex; /* Ensure base card is a flex container */
  flex-direction: column; /* Default to vertical stacking for image and content */
  height: 100%; /* Make card fill the height of its grid cell */
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0),
              opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
  position: relative;
}

.story-card:hover {
  transform: translateY(-6px); /* Increased lift */
  box-shadow: 0 6px 18px rgba(0,0,0,0.07), 0 10px 35px rgba(0,0,0,0.05); /* Softer, more spread shadow */
}

/* Featured article - spans 2x2 in top left */
.story-card.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Regular cards - Commenting out these broad rules as they conflict with card-size-WxH specifics */
/*
.story-card.regular {
  display: flex;
  flex-direction: column;
}
*/

/* Random positioning for Instagram feel */
.story-card:nth-child(4) {
  grid-column: 1;
  grid-row: 3;
}

.story-card:nth-child(5) {
  grid-column: 2;
  grid-row: 3;
}

.story-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Featured Card (Large) */
.story-card.featured {
  display: flex;
  flex-direction: column;
}

.story-card.featured .story-image {
  height: 60%;
  overflow: hidden;
  position: relative;
}

.story-card.featured .story-content {
  height: 40%;
  padding: 16px; /* Consistent padding */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

/* Regular Cards (Small) - Horizontal Layout - Commenting out as this is too broad */
/*
.story-card.regular {
  display: flex;
  flex-direction: row;
}

.story-card.regular .story-image {
  width: 40%;
  height: 100%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.story-card.regular .story-content {
  width: 60%;
  height: 100%;
  padding: 12px; /* Consistent padding */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
*/

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.3s ease, filter 0.3s ease; /* Added filter to transition */
}

.story-card:hover .story-image img {
  transform: scale(1.05); /* Slightly reduced scale */
  filter: brightness(1.03) contrast(1.03); /* Subtle pop */
}

/* Programmatic hover effect (applied by JavaScript for matching tags) */
.story-card.programmatic-hover {
  /* transform: translateY(-3px) scale(1.015); */ /* REMOVED transform */
  /* box-shadow will be set by JS based on secondary_accent_type - Keep this if JS handles it, otherwise set a new subtle one. */
  /* For now, let's define a new subtle default here, JS can override if configured */
  box-shadow: inset 3px 0 0 rgba(var(--accent-color-rgb), 0.6), 0 2px 10px rgba(0,0,0,0.08); /* Subtle left border + softer overall shadow */
  z-index: 10; /* Keep z-index to ensure it's visually distinct if overlapping slightly due to other effects (though transforms are removed) */
}
.story-card.programmatic-hover .story-image img {
  transform: scale(1.02); /* Subtle scale for programmatic hover */
}

/* .story-card-dimmed is removed */
/* .story-card-active-highlight is removed (replaced by programmatic-hover logic) */

/* Headlines */
.story-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.2;
  color: var(--color-slate);
}

.story-card.featured .story-title {
  font-size: 28px; /* Increased from 24px */
  font-weight: 700; /* Ensure bold */
  margin-bottom: 12px; /* Adjusted margin */
  line-height: 1.2; /* Ensure line-height */
}

/*
.story-card.regular .story-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}
*/

/* Date */
.story-date {
  font-size: 12px;
  color: var(--color-slate);
  opacity: 0.6;
  margin-bottom: 8px;
  font-weight: 500;
}

/*
.story-card.regular .story-date {
  font-size: 10px;
  margin-bottom: 4px;
}
*/

/* Intro Text */
.story-excerpt {
  color: var(--color-slate);
  opacity: 0.7;
  font-size: 14px;
  line-height: 1.4;
  flex-grow: 1; /* Ensure this is always active */
  margin-bottom: 0; /* Remove, rely on parent's padding */
  /* Existing -webkit-line-clamp and overflow properties are fine */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-card.featured .story-excerpt {
  font-size: 16px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Max lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* margin-bottom: 12px; */ /* Removed */
}

/*
.story-card.regular .story-excerpt {
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
*/

/* Story text container - leave space for absolute categories */
.story-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* padding-bottom: 20px; */ /* Removed, as story-categories is gone */
}

/* Styles for .story-categories and card-based .category-tag are removed */

/* Responsive design */

/* Default Card Element Styles (Mobile-first approach often good, but here applying base then overriding) */
.story-card .story-image {
  width: 100%; /* Default for column layout */
  height: 150px; /* Default height, can be overridden */
  overflow: hidden;
  background-color: var(--color-mist); /* Placeholder bg */
}
.story-card .story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-card .story-content {
  padding: 12px;
  display: flex; /* Ensures this is a flex container by default */
  flex-direction: column; /* Default stacking */
  flex-grow: 1; /* Takes remaining space in card if parent is flex */
  overflow: hidden; /* Prevents content from breaking card layout */
  /* height: 100%; /* Removed, as flex-grow:1 should handle filling space in a flex-column parent */
}
.story-card .story-text {
  flex-grow: 1; /* Allows excerpt to push meta down, and this block to fill story-content */
  display: flex;
  flex-direction: column;
}
.story-card .story-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px 0;
  color: var(--color-slate);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* Increased Default max lines for title */
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-card .story-meta {
  font-size: 11px;
  color: var(--color-slate);
  opacity: 0.7;
  margin-bottom: 8px;
}
.story-card .story-excerpt {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-slate);
  opacity: 0.8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Increased Default max lines for excerpt */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0; /* Remove bottom margin if it's the last text item */
}

/* == Dynamic Typography Scaling Based on Content Importance == */

/* High importance content - larger, bolder typography */
.story-card[data-importance="high"] .story-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  -webkit-line-clamp: 3 !important;
}

.story-card[data-importance="high"] .story-excerpt {
  font-size: 14px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 4 !important;
  opacity: 0.85 !important;
}

.story-card[data-importance="high"] .story-meta {
  font-size: 12px !important;
  opacity: 0.8 !important;
  font-weight: 600 !important;
}

/* Medium importance content - standard styling with slight emphasis */
.story-card[data-importance="medium"] .story-title {
  font-size: 18px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

.story-card[data-importance="medium"] .story-excerpt {
  font-size: 13px !important;
  line-height: 1.4 !important;
  opacity: 0.8 !important;
}

/* Low importance content - smaller, lighter typography */
.story-card[data-importance="low"] .story-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2 !important;
}

.story-card[data-importance="low"] .story-excerpt {
  font-size: 12px !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2 !important;
  opacity: 0.7 !important;
}

.story-card[data-importance="low"] .story-meta {
  font-size: 10px !important;
  opacity: 0.6 !important;
}

/* Trending content - special emphasis with larger fonts and strong visual hierarchy */
.story-card[data-trending="true"] .story-title {
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: rgba(var(--accent-color-rgb), 0.9) !important;
}

.story-card[data-trending="true"] .story-excerpt {
  font-size: 14px !important;
  line-height: 1.5 !important;
  -webkit-line-clamp: 3 !important;
}

/* Featured card size adjustments */
.story-card.featured[data-importance="high"] .story-title {
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  -webkit-line-clamp: 2 !important;
}

.story-card.featured[data-importance="medium"] .story-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.story-card.featured[data-importance="low"] .story-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Responsive typography scaling for very large cards */
.story-card.card-size-2x2[data-importance="high"] .story-title,
.story-card.card-size-3x3[data-importance="high"] .story-title {
  font-size: 24px !important;
  -webkit-line-clamp: 3 !important;
}

.story-card.card-size-2x2 .story-excerpt,
.story-card.card-size-3x3 .story-excerpt {
  font-size: 15px !important;
  line-height: 1.5 !important;
  -webkit-line-clamp: 5 !important;
}

/* Sentiment-enhanced typography - subtle importance indicators */
.story-card[data-sentiment="positive"][data-importance="high"] .story-title {
  color: rgba(var(--sentiment-positive-rgb), 0.9) !important;
}

.story-card[data-sentiment="negative"][data-importance="high"] .story-title {
  color: rgba(var(--sentiment-negative-rgb), 0.85) !important;
}

/* == Card Size Specific Styles == */

/* Small card (1x1) */
.story-card.card-size-1x1 {
  /* DIAGNOSTIC height rules removed */
  overflow: hidden; /* Keep overflow hidden for now if content might exceed */
}
.story-card.card-size-1x1 .story-image {
  height: 50%;
  flex-shrink: 0;
}
.story-card.card-size-1x1 .story-content {
  height: 50%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* DIAGNOSTIC: Stack content from top */
  overflow: hidden;
}
.story-card.card-size-1x1 .story-title {
  font-size: 13px;
  line-height: 1.3;
  -webkit-line-clamp: 2; /* Max 2 lines for title to leave space for excerpt */
  margin-bottom: 4px;
}
.story-card.card-size-1x1 .story-meta {
  font-size: 10px;
  margin-bottom: 4px; /* Space between meta and excerpt */
}
.story-card.card-size-1x1 .story-excerpt {
  display: -webkit-box; /* Make excerpt visible */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* Show 1 line of excerpt */
  font-size: 11px; /* Smaller font for excerpt */
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  /* flex-grow: 1; /* Allow excerpt to take remaining space if needed, but be careful with short excerpts */
}

/* Tall card (e.g., 1x2, 1x3) - Image at top */
.story-card.card-h2.card-w1 .story-image, /* 1x2 */
.story-card.card-h3.card-w1 .story-image, /* 1x3 */
.story-card.card-h4.card-w1 .story-image { /* 1x4 */
  height: 40%; /* Image takes roughly top 40% */
}
.story-card.card-h2.card-w1 .story-title,
.story-card.card-h3.card-w1 .story-title,
.story-card.card-h4.card-w1 .story-title {
  font-size: 15px;
  -webkit-line-clamp: 3;
}
.story-card.card-h2.card-w1 .story-excerpt,
.story-card.card-h3.card-w1 .story-excerpt,
.story-card.card-h4.card-w1 .story-excerpt {
  -webkit-line-clamp: 3; /* More lines for excerpt on tall cards */
  font-size: 12px;
}

/* Wide card (e.g., 2x1, 3x1, 4x1) - Image on left */
/* Restoring original styles for wide cards */
.story-card.card-h1.card-w2,
.story-card.card-h1.card-w3,
.story-card.card-h1.card-w4 {
  flex-direction: row; /* Image and content side-by-side */
  /* DIAGNOSTIC height rules removed */
  overflow: hidden; /* Keep overflow hidden for now */
}
.story-card.card-h1.card-w2 .story-image,
.story-card.card-h1.card-w3 .story-image,
.story-card.card-h1.card-w4 .story-image {
  width: 35%; /* Image takes left 35% */
  height: 100%; /* Full height of card */
  flex-shrink: 0;
}
.story-card.card-h1.card-w2 .story-content,
.story-card.card-h1.card-w3 .story-content,
.story-card.card-h1.card-w4 .story-content {
  width: 65%;
  height: 100%;
  padding: 12px; /* Consistent padding */
  display: flex;
  flex-direction: column;
}
.story-card.card-h1.card-w2 .story-title,
.story-card.card-h1.card-w3 .story-title,
.story-card.card-h1.card-w4 .story-title {
  font-size: 16px;
  -webkit-line-clamp: 2;
}
.story-card.card-h1.card-w2 .story-excerpt,
.story-card.card-h1.card-w3 .story-excerpt,
.story-card.card-h1.card-w4 .story-excerpt {
  display: -webkit-box; /* Ensure it's displayed for line clamping */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Allow up to 3 lines for excerpt */
  font-size: 13px;
  line-height: 1.4;
  flex-grow: 1; /* Allow excerpt to expand */
  overflow: hidden; /* Required for line clamping */
  text-overflow: ellipsis; /* Required for line clamping */
}
.story-card.card-h1.card-w2 .story-text,
.story-card.card-h1.card-w3 .story-text,
.story-card.card-h1.card-w4 .story-text {
  justify-content: space-between; /* Better distribution: title/meta top, excerpt expands */
  flex-grow: 1; /* Ensure story-text itself fills the story-content height */
}
/* End of restored styles for wide cards */


/* Large card (e.g., 2x2) */
.story-card.card-size-2x2 .story-image {
  height: 50%; /* Image is half the height */
}
.story-card.card-size-2x2 .story-title {
  font-size: 18px;
  -webkit-line-clamp: 2;
}
.story-card.card-size-2x2 .story-excerpt {
  -webkit-line-clamp: 3;
  font-size: 14px;
}

/* Very Large card (e.g., 3x2 or larger) - similar to featured */
.story-card.card-size-3x3 { /* Specifically target 3x3 cards */
  /* DIAGNOSTIC height rules removed */
  overflow: hidden; /* Keep overflow hidden for now */
}
.story-card.large-card.card-w3, /* Catches 3xH */
.story-card.large-card.card-w4, /* Catches 4xH */
.story-card.card-size-3x3 .story-image, /* Specific for 3x3 */
.story-card.card-size-4x3 .story-image {
  height: 60%; /* Dominant image - this will be 60% of the 600px forced height */
}
.story-card.large-card.card-w3 .story-title,
.story-card.large-card.card-w4 .story-title,
.story-card.card-size-3x3 .story-title,
.story-card.card-size-4x3 .story-title {
  font-size: 22px;
  -webkit-line-clamp: 3;
}
.story-card.large-card.card-w3 .story-excerpt,
.story-card.large-card.card-w4 .story-excerpt,
.story-card.card-size-3x3 .story-excerpt,
.story-card.card-size-4x3 .story-excerpt {
  -webkit-line-clamp: 5; /* Increased line clamp */
  font-size: 15px;
  flex-grow: 1; /* Allow excerpt to expand if story-text is flex container */
}

/* Overriding old .featured and .regular specific content layouts if they conflict */
/* The new card-size-WxH classes should ideally be comprehensive enough. */
.story-card.featured .story-image, .story-card.regular .story-image {
  /* Reset if new classes are to take full control */
  /* height: auto; width: auto; */ /* Or let new classes override */
}
.story-card.featured .story-content, .story-card.regular .story-content {
  /* height: auto; width: auto; padding: 12px; */ /* Base padding from default */
}
.story-card.regular { /* This used to set flex-direction: row */
  /* flex-direction: column; */ /* Revert to default if new classes handle row layout */
}

/* Card Highlighting & Hover Effects */

/* Standard hover effect by user */
.story-card:hover {
  transform: translateY(-5px) scale(1.03); /* Slightly more pronounced than programmatic hover */
  box-shadow: 0 10px 35px rgba(0,0,0,0.15); /* Standard hover shadow */
  z-index: 20; /* Ensure user hover is visually on top */
}
.story-card:hover .story-image img {
  transform: scale(1.1); /* More pronounced image zoom on user hover */
}

/* Programmatic hover effect (applied by JavaScript for matching tags) */
.story-card.programmatic-hover {
  /* transform: translateY(-3px) scale(1.015); */ /* REMOVED transform */
  /* box-shadow will be set by JS based on secondary_accent_type - Keep this if JS handles it, otherwise set a new subtle one. */
  /* For now, let's define a new subtle default here, JS can override if configured */
  box-shadow: inset 3px 0 0 rgba(var(--accent-color-rgb), 0.6), 0 2px 10px rgba(0,0,0,0.08); /* Subtle left border + softer overall shadow */
  z-index: 10; /* Keep z-index to ensure it's visually distinct if overlapping slightly due to other effects (though transforms are removed) */
}
.story-card.programmatic-hover .story-image img {
  /* transform: scale(1.06); */ /* REMOVED image zoom for programmatic hover, keep it for user hover only */
}
.story-card.programmatic-hover .story-title {
    font-weight: 700; /* Keep or make slightly bolder if base is less, e.g. 600 -> 700 */
    /* color: var(--color-soft-charcoal); */ /* Example: slightly darken text if needed */
}


/* Remove .story-card-dimmed styles as it's no longer used */
/*
.story-card.story-card-dimmed {
  opacity: 0.4 !important;
  filter: grayscale(0.3) !important;
}
*/

/* Ensure transition is smooth for these effects - .story-card already has transition for transform and box-shadow */
/* The existing transition on .story-card should cover these:
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   And on .story-image img:
   transition: transform 0.3s ease;
   Consider adding 'opacity' to .story-card's transition if not already covered by a more general rule.
*/
.story-card {
  /* ... existing styles ... */
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Added opacity here */
}


@media (max-width: 768px) {
  .nextin-header-widget {
    padding: 16px;
  }

  .nextin-tags {
    margin-bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .nextin-tags .label {
    font-size: 16px;
  }

  .nextin-madlibs {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(230, 232, 255, 0.4), rgba(224, 242, 236, 0.4));
  }

  .nextin-blank {
    font-size: 16px;
    min-width: 120px;
    padding: 6px 12px;
  }

  .nextin-tags .tags-list {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .nextin-tags .tag-item {
    font-size: 12px;
    padding: 4px 12px;
  }

  /* Mobile hover states - simplified for touch devices */
  .nextin-madlibs:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(230, 232, 255, 0.6), rgba(224, 242, 236, 0.6));
    padding: 12px 16px;
  }

  .nextin-madlibs:hover .nextin-blank {
    opacity: 0.4;
    transform: scale(0.98);
  }

  .nextin-madlibs:hover .tags-list {
    opacity: 1;
    flex-wrap: wrap;
  }

  .nextin-madlibs:hover .tag-item {
    opacity: 0.8;
    transform: scale(1);
    pointer-events: all;
  }

  .nextin-madlibs:hover .tag-item.active {
    opacity: 1;
    transform: scale(1.02);
    border: 2px solid var(--accent-color);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    background: white;
    color: var(--accent-color);
    font-weight: 600;
  }

  /* Mobile grid layout - Single column for cards */
  .nextin-stories-grid {
    grid-template-columns: 1fr; /* Single column */
    grid-auto-rows: auto; /* Let cards determine their height */
    /* grid-template-rows: repeat(4, 180px); */ /* Remove fixed row heights */
    gap: 16px; /* Uniform gap */
  }

  /* Reset all card spans to full width */
  .nextin-header-widget .story-card,
  .nextin-header-widget.custom-grid-active .nextin-stories-grid .story-card { /* Ensure custom grid cards also reset */
    grid-column: 1 / -1 !important; /* Full width */
    grid-row: auto !important; /* Stack naturally */
    width: 100%;
    max-width: 500px; /* Optional: max-width for cards on mobile for better readability on tablets */
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure all cards use vertical layout internally on mobile */
  .story-card,
  .story-card.card-h1.card-w2, /* Reset wide cards */
  .story-card.card-h1.card-w3,
  .story-card.card-h1.card-w4 {
    flex-direction: column !important;
  }

  .story-card .story-image,
  .story-card.card-h1.card-w2 .story-image, /* Reset image width for wide cards */
  .story-card.card-h1.card-w3 .story-image,
  .story-card.card-h1.card-w4 .story-image {
    width: 100% !important; /* Full width image */
    height: 180px; /* Uniform image height for mobile */
  }

  .story-card .story-content,
  .story-card.card-h1.card-w2 .story-content, /* Reset content width for wide cards */
  .story-card.card-h1.card-w3 .story-content,
  .story-card.card-h1.card-w4 .story-content {
    width: 100% !important;
    padding: 12px; /* Consistent padding */
  }

  /* Adjust text sizes and excerpts for mobile */
  .story-card .story-title {
    font-size: 17px; /* Slightly smaller title */
    -webkit-line-clamp: 2; /* Max 2 lines */
    margin-bottom: 6px;
  }
  .story-card .story-meta {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .story-card .story-excerpt {
    font-size: 12px;
    -webkit-line-clamp: 2; /* Max 2 lines for excerpt */
  }

  /* Specific overrides for very small cards (1x1) on mobile - they might become too plain */
  .story-card.card-size-1x1 .story-image {
    height: 120px; /* Slightly smaller image for 1x1 cards if needed */
  }
  .story-card.card-size-1x1 .story-title {
    font-size: 15px;
  }
  .story-card.card-size-1x1 .story-excerpt {
    display: -webkit-box; /* Optionally show a very short excerpt for 1x1 on mobile */
    -webkit-line-clamp: 1;
    font-size: 11px;
  }
}


@media (max-width: 480px) {
  .nextin-tags {
    gap: 6px;
  }

  .nextin-madlibs {
    gap: 8px;
    padding: 10px 14px;
  }

  .nextin-blank {
    font-size: 14px;
    min-width: 100px;
    padding: 4px 10px;
  }

  .nextin-tags .tags-list {
    gap: 6px;
  }

  .nextin-tags .tag-item {
    font-size: 11px;
    padding: 3px 10px;
  }

  .nextin-stories-grid {
    gap: 12px;
  }

  .story-content {
    padding: 16px;
  }

  .story-card.featured .story-title {
    font-size: 24px;
  }

  .story-card.regular .story-title {
    font-size: 16px;
  }
}


/* NextIn Admin Styles Specific to Widget List Cards */
.nextin-admin .nextin-widget-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* Makes cards in the same grid row take up equal height */
  box-sizing: border-box;
}

.nextin-admin .nextin-widget-card > div:first-child { /* Header part of the card */
  flex-shrink: 0;
}
.nextin-admin .nextin-widget-card > div:last-child { /* Shortcode part of the card */
  flex-shrink: 0;
}
.nextin-admin .nextin-widget-card .nextin-widget-card-preview-area {
  flex-grow: 1; /* Allows preview area to take available space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  min-height: 120px; /* Ensure it has some base height */
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.nextin-admin .nextin-widget-card-actions .button,
.nextin-admin .nextin-widget-card-actions .button-small,
.nextin-admin .nextin-widget-card-actions button.button-small { /* Target both <a> and <button> */
  display: inline-flex !important; /* Use important if necessary to override WP defaults */
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-top: 0 !important; /* Adjust for vertical centering */
  padding-bottom: 0 !important; /* Adjust for vertical centering */
  height: 28px; /* Example fixed height, adjust as needed */
}

/* General Admin Button Consistency (already present, verified) */
.nextin-admin .button {
  font-size: 13px !important;
  padding: 6px 12px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border-radius: 3px !important;
  transition: all 0.2s ease !important;
  vertical-align: middle;
}

.nextin-admin .button-small {
  font-size: 10px !important;
  padding: 3px 6px !important; /* Base padding */
  line-height: normal !important; /* Let inline-flex handle alignment with height */
}

.nextin-admin .button.danger,
.nextin-widget-card-actions a.button.danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important;
}
.nextin-admin .button.danger:hover,
.nextin-widget-card-actions a.button.danger:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
}

.nextin-admin .button:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.nextin-admin .grid-controls .button {
  min-width: 32px;
}

.nextin-admin .button:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Styles for New Preview UX on Widget Cards (already present, verified) */
.nextin-widget-card-preview-area:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  border-color: var(--accent-color);
}

.nextin-widget-card-preview-icon-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.nextin-widget-card-preview-icon {
  font-size: 48px;
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}

.nextin-widget-card-preview-area:hover .nextin-widget-card-preview-icon {
  transform: scale(1.15);
  color: var(--accent-color);
}

.nextin-widget-card-preview-icon-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.0) 70%);
  transform: translate(-50%, -50%) scale(0.7);
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-out;
  opacity: 0;
  z-index: -1;
}

.nextin-widget-card-preview-area:hover .nextin-widget-card-preview-icon-container::before {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 1;
}

.nextin-widget-grid-preview {
  opacity: 0.6;
  transition: opacity 0.3s ease;
  width: 100%;
}

.nextin-widget-card-preview-area:hover .nextin-widget-grid-preview {
  opacity: 0.3;


  /* --- Force No Underline on Story Card Links and key text children --- */
  .nextin-header-widget .story-card a.story-link,
  .nextin-header-widget .story-card a.story-link .story-title,
  .nextin-header-widget .story-card a.story-link .story-excerpt,
  .nextin-header-widget .story-card a.story-link .story-date { /* Assuming .story-date is also inside the link */
    text-decoration: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
  }

  /* --- Ensure No Underline on Hover for Story Card Links --- */
  .nextin-header-widget .story-card a.story-link:hover,
  .nextin-header-widget .story-card a.story-link:focus, /* Also for focus state */
  .nextin-header-widget .story-card a.story-link:hover .story-title, /* Target children as well */
  .nextin-header-widget .story-card a.story-link:focus .story-title,
  .nextin-header-widget .story-card a.story-link:hover .story-excerpt,
  .nextin-header-widget .story-card a.story-link:focus .story-excerpt,
  .nextin-header-widget .story-card a.story-link:hover .story-date,
  .nextin-header-widget .story-card a.story-link:focus .story-date {
    text-decoration: none !important;
  }
  /* If this hover is too broad (underlines too much),
     we can target just .story-title on hover instead:
  .nextin-header-widget .story-card a.story-link:hover .story-title {
    text-decoration: underline !important;
  }
  .nextin-header-widget .story-card a.story-link:hover,
  .nextin-header-widget .story-card a.story-link:hover .story-excerpt,
  .nextin-header-widget .story-card a.story-link:hover .story-date {
    text-decoration: none !important;
  }
  */

  /* --- Ensure other links in the widget (like header tags) also have no underline by default --- */
  .nextin-header-widget .nextin-animated-header a.tag-item {
    text-decoration: none !important;
  }
  /* No hover rule for tag-items means they won't get an underline on hover from these rules. */

/* Old "Animation Pill Control - Enhanced Specificity" rules for .no-background-pills are removed.
   The new logic is:
   - Default: no pills (transparent background, default text color).
   - .has-background-pills class enables pill styling (backgrounds, borders, specific text colors for pills).
   - Focused states adjust text color or background based on whether pills are active.
*/

/* === Styles for Cards Without Images === */

/* Default behavior for any card with .no-image */
.story-card.no-image {
    /* Ensure the card itself still behaves as a flex container if it was before,
       so story-content can expand correctly. */
}

.story-card.no-image .story-content {
    width: 100% !important; /* Override specific widths like 60% on regular cards */
    height: 100% !important; /* Override specific heights */
    padding: 16px; /* Ensure consistent padding, adjust as needed */
    display: flex; /* Ensure it's a flex container */
    flex-direction: column; /* Stack text elements vertically */
    justify-content: flex-start; /* Align content to the top for no-image cards */
}

.story-card.no-image .story-text {
    flex-grow: 1; /* Allow story-text to take available space */
    height: auto; /* Ensure height is not fixed if it was before */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align text elements to the top within story-text */
}

/* Allow excerpt in no-image cards to take more space */
.story-card.no-image .story-excerpt {
    -webkit-line-clamp: initial; /* Remove line clamping to allow full text */
    max-height: none; /* Ensure no max-height is restricting it */
    overflow-y: auto; /* Add scroll if content truly overflows the card */
}


/* Adjustments for specific card types when .no-image is present */

/* For cards that are normally flex-direction: row (like .regular or wide custom cards) */
.story-card.regular.no-image,
.story-card.card-h1.card-w2.no-image,
.story-card.card-h1.card-w3.no-image,
.story-card.card-h1.card-w4.no-image {
    /* story-content width 100% is already handled by the general .story-card.no-image .story-content rule */
    /* No need to change flex-direction if .story-content takes full width */
}

/* For cards that are normally flex-direction: column (like .featured or tall custom cards) */
.story-card.featured.no-image,
.story-card.card-h2.card-w1.no-image,
.story-card.card-h3.card-w1.no-image,
.story-card.card-h4.card-w1.no-image {
    /* story-content height 100% is already handled */
}

/* Specific considerations for small cards like 1x1 */
.story-card.card-size-1x1.no-image .story-excerpt {
    display: -webkit-box !important; /* Ensure excerpt is shown, it's hidden by default on 1x1 with image */
    -webkit-line-clamp: 2 !important; /* Allow a couple of lines for excerpt */
    font-size: 12px !important; /* Adjust if needed */
}

.story-card.card-size-1x1.no-image .story-title {
    -webkit-line-clamp: 3 !important; /* More room for title if no image */
}

/* Mobile: Most no-image styling should carry over well.
   The generic .story-card.no-image .story-content width: 100% is key.
   Ensure that on mobile, where cards are already full width and vertical,
   the .story-content simply uses all available space.
*/
@media (max-width: 768px) {
    .story-card.no-image .story-content {
        padding: 12px; /* Slightly less padding on mobile */
        justify-content: flex-start; /* Usually better not to center vertically on mobile lists */
    }

    .story-card.no-image .story-text {
        justify-content: flex-start;
    }

    /* For 1x1 cards on mobile, ensure text is readable */
    .story-card.card-size-1x1.no-image .story-title {
        font-size: 16px !important; /* Slightly larger than default mobile 1x1 title with image */
        -webkit-line-clamp: 3 !important;
    }
    .story-card.card-size-1x1.no-image .story-excerpt {
        display: -webkit-box !important; /* Ensure it's shown */
        -webkit-line-clamp: 2 !important;
        font-size: 11px !important;
    }
}

/* ===== Header Dynamism Enhancements ===== */
/*
   Assumes JavaScript will add/remove a class 'tag-focused-present'
   to the main .nextin-header-widget element when a tag in the
   cycler causes related story cards to be highlighted.
*/

/* Default state for story cards when a tag is actively being highlighted */
.nextin-header-widget.tag-focused-present .nextin-stories-grid .story-card {
    opacity: 0.65; /* Subdue by default */
    /* transform: scale(0.97); */ /* REMOVED transform for non-highlighted cards */
    /* transition is already on .story-card, opacity added previously */
}

/* When a card is programmatically hovered (matching the selected tag) */
.nextin-header-widget.tag-focused-present .nextin-stories-grid .story-card.programmatic-hover {
    opacity: 1; /* Full opacity */
    /* transform: translateY(-5px) scale(1.025); */ /* REMOVED transform */
    /* The box-shadow from .story-card.programmatic-hover (subtle inset border) will apply */
    z-index: 15; /* Above subdued cards */
}

/* User direct hover on a card that IS ALSO programmatically highlighted */
.nextin-header-widget.tag-focused-present .nextin-stories-grid .story-card.programmatic-hover:hover {
    opacity: 1; /* Stays fully opaque */
    /* transform: translateY(-7px) scale(1.05); */ /* Standard user hover transform will take effect from .story-card:hover */
    /* Uses existing :hover box-shadow from .story-card:hover */
    z-index: 25; /* Highest z-index */
}

/* User direct hover on a card that is NOT programmatically highlighted (it's one of the subdued ones) */
.nextin-header-widget.tag-focused-present .nextin-stories-grid .story-card:not(.programmatic-hover):hover {
    opacity: 0.9; /* Bring it forward more than other subdued cards, but not full */
    /* transform: translateY(-5px) scale(1.03); */ /* Standard user hover transform will take effect */
    /* Uses existing :hover box-shadow from .story-card:hover */
    z-index: 20; /* Above subdued cards but below a programmatically-hovered-and-user-hovered one */
}

/* Reset card styles when no tag is focused (i.e., .tag-focused-present is removed from widget) */
/* This relies on the base .story-card styles and transitions to return to normal */
.nextin-header-widget:not(.tag-focused-present) .nextin-stories-grid .story-card {
    opacity: 1;
    /* transform: scale(1); */ /* Ensure transform returns to normal if it was changed */
}

/* ===== UI Polish: Surprise Me Button ===== */
.surprise-me-btn:active {
    transform: translateY(-1px) scale(0.97); /* Click feedback */
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.surprise-me-btn:disabled,
.surprise-me-btn.is-loading { /* JS should add/remove 'is-loading' class */
    opacity: 0.7;
    cursor: not-allowed !important; /* Ensure cursor indicates disabled state */
    background: var(--color-mist) !important; /* More distinct disabled background, override other backgrounds */
    color: var(--color-slate) !important;
    transform: none !important;
    box-shadow: none !important;
    animation: none; /* Stop gradient animation when disabled */
}

/* Surprise Me Button Placement Styles */
/* Default is effectively 'header_right' due to normal flex flow if no absolute positioning is applied by a class */
.surprise-me-btn.smb-pos-window_tl {
    position: absolute;
    top: 5px; /* Adjust as needed for visual appeal */
    left: 5px;
    margin-left: 0; /* Override default margin */
}
.surprise-me-btn.smb-pos-window_tr {
    position: absolute;
    top: 5px;
    right: 5px;
    margin-left: 0; /* Override default margin */
}
.surprise-me-btn.smb-pos-window_bl {
    position: absolute;
    bottom: 5px;
    left: 5px;
    margin-left: 0; /* Override default margin */
}
.surprise-me-btn.smb-pos-window_br {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin-left: 0; /* Override default margin */
}
/* Note: For window positions, the .highlight-window needs position:relative (already set) */
/* For smb-pos-header_right, the default margin-left:auto on .user-customization-controls handles it if button is inside that.
   If button is moved outside, specific positioning might be needed or rely on flex order.
   The current CSS places .surprise-me-btn directly inside .user-customization-controls which is display:flex and margin-left:auto.
   If we make .surprise-me-btn position:absolute for these options, it's taken out of flow, so .user-customization-controls might shrink.
   This is acceptable as the button is meant to be an overlay.
*/


.surprise-me-btn.is-loading::after { /* Optional loading spinner */
    content: ' ...'; /* Simple text spinner */
    display: inline-block;
    animation: nextinDots 1.4s infinite steps(4, end); /* slightly slower animation */
    vertical-align: bottom;
}

@keyframes nextinDots {
  0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);}
  40% { color: var(--color-slate); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);}
  60% { text-shadow: .25em 0 0 var(--color-slate), .5em 0 0 rgba(0,0,0,0);}
  80%, 100% { text-shadow: .25em 0 0 var(--color-slate), .5em 0 0 var(--color-slate);}
}