/* ========================================================================== */
/* CROSS-BROWSER NORMALIZE & RESET - Based on normalize.css v8.0.1 */
/* Ensures consistent rendering across Chrome, Firefox, Safari, Edge */
/* ========================================================================== */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
  resize: vertical;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* ========================================================================== */
/* ADDITIONAL MODERN BROWSER RESETS */
/* ========================================================================== */

/**
 * Use a better box model (opinionated).
 */

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

/**
 * Use a more readable tab size (opinionated).
 */

html {
  tab-size: 4;
}

/**
 * Remove default margin and padding.
 */

* {
  margin: 0;
  padding: 0;
}

/**
 * Allow percentage-based heights in the application.
 */

html,
body {
  height: 100%;
}

/**
 * Improve media defaults.
 */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/**
 * Remove built-in form typography styles.
 */

input,
button,
textarea,
select {
  font: inherit;
}

/**
 * Avoid text overflows.
 */

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/**
 * Create a root stacking context.
 */

#root,
#__next {
  isolation: isolate;
}

/* ========================================================================== */
/* CROSS-BROWSER COMPATIBILITY FIXES */
/* ========================================================================== */

/**
 * Consistent focus indicators across browsers.
 */

:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/**
 * Improve consistency of default fonts across platforms.
 */

body {
  font-family: 
    system-ui, 
    'Segoe UI', 
    Roboto, 
    Helvetica, 
    Arial, 
    sans-serif, 
    'Apple Color Emoji', 
    'Segoe UI Emoji';
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Consistent list styling.
 */

ul,
ol {
  list-style: none;
}

/**
 * Remove default link styling.
 */

a {
  color: inherit;
  text-decoration: none;
}

/**
 * Consistent table styling.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
} 
/* ========================================================================== */
/* UNIFIED DESIGN SYSTEM - Single source of truth for all styling */
/* ========================================================================== */

/* ========================================================================== */
/* 1. CSS CUSTOM PROPERTIES - Light Theme Default */
/* ========================================================================== */

:root {
  /* Colors - Light Theme Default */
  --bg-primary: #ffffff; /* This is actually a container background - all instances should be changed to the other variavle later.*/
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --container-background: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  --accent-primary: #3b82f6;
  --accent-hover: #2563eb;
  --accent-active: #1d4ed8;
  --success-color: #22c55e;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  
  /* Legacy color system compatibility */
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  
  /* Navigation - Always Dark */
  --nav-bg: #2B2A32;
  --nav-border: #334155;
  --nav-text: #f8fafc;
  --nav-text-muted: #94a3b8;
  --nav-accent: #3b82f6;
  
  /* Body Background - Dark for contrast with light containers */
  --body-bg: #2B2A32;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  /* --space-xl: 2rem; */
  --space-2xl: 3rem;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  
  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
}

/* ========================================================================== */
/* 2. FIXED THEME - No theme switching */
/* ========================================================================== */

/* Using light theme as the only theme */

/* ========================================================================== */
/* 4. GLOBAL RESET & BASE STYLES */
/* ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

/* Global focus styles - inward outlines for all interactive elements */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
  outline-offset: -2px;
}

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-family);
  font-size: 1rem;
  font-size: var(--font-size-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #2B2A32;
  background-color: var(--body-bg);
}

body {
  background-color: #2B2A32 !important;
  background-color: var(--body-bg) !important;
  color: #0f172a;
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-family);
  font-size: 1rem;
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 100vh;
}

#root {
  min-height: 100vh;
  background-color: #2B2A32;
  background-color: var(--body-bg);
  color: #0f172a;
  color: var(--text-primary);
}

/* ========================================================================== */
/* 5. NAVIGATION STYLES - Always Dark */
/* ========================================================================== */

.navigation,
.app-navigation {
  background-color: #2B2A32;
  background-color: var(--nav-bg);
  color: #f8fafc;
  color: var(--nav-text);
}

.nav-brand {
  color: #f8fafc;
  color: var(--nav-text);
  font-weight: 700;
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
}

.nav-brand a {
  color: #f8fafc;
  color: var(--nav-text);
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  gap: var(--space-lg);
}

.nav-link-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-sm);
  color: #94a3b8;
  color: var(--nav-text-muted);
  text-decoration: none;
  padding: 0.5rem 1rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  transition: 150ms ease-in-out;
  transition: var(--transition-fast);
}

.nav-link-with-icon:hover,
.nav-link-with-icon.active {
  color: #3b82f6;
  color: var(--nav-accent);
  background-color: rgba(59, 130, 246, 0.1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-sm);
}

.nav-btn-search,
.btn-profile,
.btn-notifications,
.btn-settings {
  background-color: transparent;
  border: 1px solid #334155;
  border: 1px solid var(--nav-border);
  color: #94a3b8;
  color: var(--nav-text-muted);
  padding: 0.5rem;
  padding: var(--space-sm);
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: 150ms ease-in-out;
  transition: var(--transition-fast);
}

.nav-btn-search:hover,
.btn-profile:hover,
.btn-notifications:hover,
.btn-settings:hover,
.btn-settings.active {
  color: #3b82f6;
  color: var(--nav-accent);
  border-color: #3b82f6;
  border-color: var(--nav-accent);
}

/* Navigation SVG icon styling - override inline stroke="currentColor" */
/* SVG colors are now handled by component-specific CSS files */
/* Removed conflicting global SVG stroke rules to allow proper cascade */

/* Focus styles with inward outlines for navigation elements */
.nav-btn-search:focus,
.btn-profile:focus,
.btn-notifications:focus,
.btn-settings:focus,
.nav-link-with-icon:focus {
  outline: none !important;
}

/* ========================================================================== */
/* 6. MAIN CONTENT AREAS - Light containers on dark background */
/* ========================================================================== */

.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #2B2A32;
  background-color: var(--body-bg);
}

.main-content,
.app-main,
.content-container,
.page-content {
  flex: 1 1;
  background-color: transparent;
  color: #0f172a;
  color: var(--text-primary);
  padding: var(--space-xl);
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.writing-session,
.groups,
.dashboard,
.progress,
.home,
.feed-container {
  background-color: transparent;
  color: #0f172a;
  color: var(--text-primary);
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-xl);
}

/* ========================================================================== */
/* 7. CARDS & CONTAINERS - Light containers on dark background */
/* ========================================================================== */

.card,
.session-details,
.groups-content,
.dashboard-card,
.writing-card,
.analytics-card,
.social-card {
  background-color: #ffffff;
  background-color: var(--bg-primary);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  padding: var(--space-lg);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-sm);
  color: #0f172a;
  color: var(--text-primary);
}

.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
  border-color: var(--border-hover);
}

/* ========================================================================== */
/* 8. FORMS & INPUTS */
/* ========================================================================== */

input,
textarea,
select {
  background-color: #ffffff;
  background-color: var(--bg-primary);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  color: #0f172a;
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-family);
  font-size: 1rem;
  font-size: var(--font-size-base);
  padding: 0.5rem 1rem;
  padding: var(--space-sm) var(--space-md);
  transition: 150ms ease-in-out;
  transition: var(--transition-fast);
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #3b82f6;
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-color: #3b82f6;
  border-color: var(--accent-primary);
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
  color: var(--text-muted);
}

label {
  color: #0f172a;
  color: var(--text-primary);
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
  margin-bottom: var(--space-xs);
}

.form-group {
  margin-bottom: 1rem;
  margin-bottom: var(--space-md);
}

/* ========================================================================== */
/* 9. BUTTONS */
/* ========================================================================== */

.btn {
  background-color: #3b82f6;
  background-color: var(--accent-primary);
  border: 1px solid #3b82f6;
  border: 1px solid var(--accent-primary);
  color: white;
  padding: 0.5rem 1rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-family);
  font-size: 1rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: 150ms ease-in-out;
  transition: var(--transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  gap: var(--space-xs);
}

.btn:hover {
  background-color: #2563eb;
  background-color: var(--accent-hover);
  border-color: #2563eb;
  border-color: var(--accent-hover);
}

.btn--secondary {
  background-color: #f8fafc;
  background-color: var(--bg-secondary);
  border-color: #e2e8f0;
  border-color: var(--border-color);
  color: #0f172a;
  color: var(--text-primary);
}

.btn--secondary:hover {
  background-color: #f1f5f9;
  background-color: var(--bg-tertiary);
  border-color: #cbd5e1;
  border-color: var(--border-hover);
}

.btn--danger {
  background-color: #ef4444;
  background-color: var(--error-color);
  border-color: #ef4444;
  border-color: var(--error-color);
  color: white;
}

.btn--success {
  background-color: #22c55e;
  background-color: var(--success-color);
  border-color: #22c55e;
  border-color: var(--success-color);
  color: white;
}

/* Focus styles with inward outlines for general buttons */
.btn:focus,
.btn--secondary:focus,
.btn--danger:focus,
.btn--success:focus {
  outline: 2px solid #3b82f6;
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px; /* Pulls outline inside the element */
}

/* ========================================================================== */
/* 10. SCROLLBAR STYLING */
/* ========================================================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
  scrollbar-color: var(--border-color) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #e2e8f0;
  background-color: var(--border-color);
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #cbd5e1;
  background-color: var(--border-hover);
}

/* ========================================================================== */
/* 10. SHARED SEARCH AND FILTER COMPONENTS */
/* ========================================================================== */

/*
  USAGE EXAMPLE:
  
  <div className="shared-search-controls">
    <div className="shared-search-filter-bar">
      <!-- Search Input -->
      <div className="shared-search-input-wrapper">
        <input
          type="text"
          className="shared-search-input"
          placeholder="Search..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        {searchTerm && (
          <button
            className="shared-search-clear-btn"
            onClick={() => setSearchTerm('')}
            title="Clear search"
          >
            ✕
          </button>
        )}
      </div>
      
      <!-- Filter Chips -->
      <div className="shared-filter-chips">
        <button
          className={`shared-filter-chip ${activeFilter === 'recent' ? 'active' : ''}`}
          onClick={() => setActiveFilter('recent')}
        >
          📅 Recent
        </button>
        <button
          className={`shared-filter-chip ${activeFilter === 'popular' ? 'active' : ''}`}
          onClick={() => setActiveFilter('popular')}
        >
          🔥 Popular
        </button>
      </div>
    </div>
  </div>
  
  Components using this system: Sessions, (ready for Groups, Dashboard, etc.)
*/

/* Search and Filter Container */
.shared-search-controls {
    margin-bottom: 1.5rem;
    margin-bottom: var(--space-lg);
    background: transparent;
}

.shared-search-filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: nowrap;
    background: transparent;
    border-radius: 16px;
    padding: 1.25rem;
    border: none;
    box-shadow: none;
    justify-content: space-between;
}

/* Search Input Component */
.shared-search-input-wrapper {
    flex: 1 1;
    min-width: 280px;
    max-width: 400px;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
}

.shared-search-input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.shared-search-input {
    flex: 1 1;
    border: none;
    outline: none !important;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 400;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    width: 0; /* Force flex to control width */
    min-width: 0; /* Allow shrinking */
    -webkit-appearance: none;
    appearance: none;
}

.shared-search-input:focus {
    outline: none !important;
}

.shared-search-input:focus-visible {
    outline: none !important;
}

.shared-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.shared-search-clear-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    margin-left: 0.5rem;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background-color 0.2s;
    flex-shrink: 0;
}

.shared-search-clear-btn:hover {
    color: #0f172a;
    color: var(--text-primary);
    background-color: #f8fafc;
    background-color: var(--bg-secondary);
}

/* Filter Chips Component */
.shared-filter-chips {
    display: flex;
    gap: 0.5rem;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
}

.shared-filter-chip {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    border-radius: var(--radius-xl);
    padding: 0.5rem 1rem;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: 150ms ease-in-out;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    gap: var(--space-xs);
    white-space: nowrap;
    outline: none;
}

.shared-filter-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shared-filter-chip.active {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.shared-filter-chip.active:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Focus styles for filter chips */
.shared-filter-chip:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: -2px; /* Pulls outline inside the element */
}

/* Search and Filter Responsive Design */
@media (max-width: 768px) {
    .shared-search-filter-bar {
        flex-direction: column;
        gap: 1rem;
        gap: var(--space-md);
        align-items: stretch;
        padding: 1rem;
        padding: var(--space-md);
        border-radius: 0.75rem;
        border-radius: var(--radius-lg);
    }
    
    .shared-search-input-wrapper {
        min-width: 0;
        min-width: initial;
        max-width: none;
        max-width: initial;
        flex: initial;
    }
    
    .shared-filter-chips {
        justify-content: center;
        gap: 0.5rem;
        gap: var(--space-sm);
    }
    
    .shared-filter-chip {
        flex: 1 1;
        justify-content: center;
        min-width: 0;
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
        padding: 0.5rem 1rem;
        padding: var(--space-sm) var(--space-md);
    }
}

/* ========================================================================== */
/* 11. RESPONSIVE DESIGN */
/* ========================================================================== */

@media (max-width: 768px) {
  .main-content,
  .app-main,
  .content-container,
  .page-content {
    padding: 1rem;
    padding: var(--space-md);
  }
  
  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    gap: var(--space-sm);
  }
  
  .nav-actions {
    flex-wrap: wrap;
  }
}

/* ========================================================================== */
/* 12. UTILITY CLASSES */
/* ========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-xs { gap: 0.25rem; gap: var(--space-xs); }
.gap-sm { gap: 0.5rem; gap: var(--space-sm); }
.gap-md { gap: 1rem; gap: var(--space-md); }
.gap-lg { gap: 1.5rem; gap: var(--space-lg); }

.mb-sm { margin-bottom: 0.5rem; margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: 1rem; margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: 1.5rem; margin-bottom: var(--space-lg); }

.p-sm { padding: 0.5rem; padding: var(--space-sm); }
.p-md { padding: 1rem; padding: var(--space-md); }
.p-lg { padding: 1.5rem; padding: var(--space-lg); }

.text-sm { font-size: 0.875rem; font-size: var(--font-size-sm); }
.text-base { font-size: 1rem; font-size: var(--font-size-base); }
.text-lg { font-size: 1.125rem; font-size: var(--font-size-lg); }
.text-xl { font-size: 1.25rem; font-size: var(--font-size-xl); }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-primary { color: #0f172a; color: var(--text-primary); }
.text-secondary { color: #64748b; color: var(--text-secondary); }
.text-muted { color: #94a3b8; color: var(--text-muted); }
.text-success { color: #22c55e; color: var(--success-color); }
.text-warning { color: #f59e0b; color: var(--warning-color); }
.text-error { color: #ef4444; color: var(--error-color); }

.bg-primary { background-color: #ffffff; background-color: var(--bg-primary); }
.bg-secondary { background-color: #f8fafc; background-color: var(--bg-secondary); }

.border { border: 1px solid #e2e8f0; border: 1px solid var(--border-color); }
.border-rounded { border-radius: 0.5rem; border-radius: var(--radius-md); }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-lg); }

/* ========================================================================== */
/* SHARED COMPONENTS - Reusable UI elements */
/* ========================================================================== */

/* Shared Back Button */
.shared-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    padding: 10px 16px;
    border-radius: 0.75rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    transition: all var(--transition-fast);
    text-decoration: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

.shared-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #000000;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
}

.shared-back-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

.shared-back-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    flex-shrink: 0;
}

.shared-back-btn span {
    font-weight: 500;
}

/* Shared Submit Button */
.shared-submit-btn {
    background: #3b82f6;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    border-radius: var(--radius-md);
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    transition: all var(--transition-fast);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.shared-submit-btn:hover:not(:disabled) {
    background: #2563eb;
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
}

.shared-submit-btn:active:not(:disabled) {
    background: #1d4ed8;
    background: var(--accent-active);
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

.shared-submit-btn:disabled {
    background: #94a3b8;
    background: var(--text-muted);
    color: white;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    opacity: 0.6;
}

.shared-submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Sort controls for sessions and projects */
.sort-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.sort-label {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.sort-buttons {
    display: flex;
    gap: 0.25rem;
    background: rgba(78, 128, 238, 0.08);
    border-radius: 12px;
    padding: 3px;
}

.sort-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
}

.sort-btn:hover {
    background: rgba(78, 128, 238, 0.1);
    color: #4e80ee;
}

.sort-btn.active {
    background: #4e80ee;
    color: white;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .shared-search-filter-bar {
        flex-wrap: wrap;
    }
    
    .shared-search-input-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .sort-controls {
        width: 100%;
        justify-content: center;
    }
}



/* Filter select dropdowns to match sort buttons */
.filter-select {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
    outline: none;
}

.filter-select:hover {
    background: rgba(78, 128, 238, 0.1);
    color: #4e80ee;
}

.filter-select:focus {
    background: rgba(78, 128, 238, 0.15);
    color: #4e80ee;
    outline: none;
}

/* Ensure sort controls don't wrap */
.shared-search-filter-bar .sort-controls {
    flex-shrink: 0;
    min-width: -webkit-fit-content;
    min-width: fit-content;
}

/* Adjust search input to not take too much space */
.shared-search-input-wrapper {
    flex: 1 1;
    max-width: 400px;
    min-width: 200px;
}


/* Component Classes - Using Unified Design System Variables */

/* Shared Tab Headlines - Consistent style across all tabs */
.tab-headline {
    margin-bottom: 24px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.tab-headline h1,
.tab-headline h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.tab-headline p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    margin: 0;
    line-height: 1.5;
}

/* Tab headline with emoji and title on separate lines */
.tab-headline h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.tab-headline .tab-emoji {
    font-size: 2.5rem;
    line-height: 1;
}

.tab-headline .tab-title {
    font-size: 1.875rem;
    line-height: 1.2;
}

/* Mobile responsive tab headlines */
@media (max-width: 768px) {
    .tab-headline h1,
    .tab-headline h2 {
        font-size: 1.75rem;
    }
    
    .tab-headline .tab-emoji {
        font-size: 2rem;
    }
    
    .tab-headline .tab-title {
        font-size: 1.5rem;
    }
    
    .tab-headline p {
        font-size: 1rem;
    }
}

/* Button System - Using unified variables */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
  padding: var(--space-sm) var(--space-md);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Button Sizes */
.btn--sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-base);
}

/* Button Variants - Using unified variables */
.btn--primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn--outline:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.btn--danger {
  background-color: var(--error-color);
  border-color: var(--error-color);
  color: white;
}

.btn--danger:hover:not(:disabled) {
  background-color: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--success {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: white;
}

.btn--success:hover:not(:disabled) {
  background-color: #16a34a;
  border-color: #16a34a;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Button Full Width */
.btn--full {
  width: 100%;
}

/* Button Loading State */
.btn--loading {
  position: relative;
  color: transparent;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  /* animation: spin 1s linear infinite; */
}

/* Spin animation moved to loading.css to avoid conflicts */

/* Card System - Using unified variables */
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card--interactive {
  cursor: pointer;
  transition: var(--transition-normal);
}

.card--interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}

.card__body {
  padding: var(--space-lg);
}

.card__footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
}

/* Container System */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--sm {
  max-width: 640px;
}

.container--md {
  max-width: 768px;
}

.container--lg {
  max-width: 1024px;
}

.container--xl {
  max-width: 1280px;
}

.container--full {
  max-width: none;
}

/* Page Container - Standard page layout with consistent styling */
.page-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  background: transparent;
  /* background: #ffffff; */
  border-radius: 12px;
  /* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); */
  position: relative;
  z-index: 1; /* Ensure content is above background layers */
}

/* Page Container Variants */
.page-container--wide {
  max-width: 1000px;
}

.page-container--narrow {
  max-width: 600px;
}

.page-container--full-width {
  max-width: none;
  margin: 0;
}

.page-container--no-shadow {
  box-shadow: none;
}

.page-container--compact {
  padding: 1rem;
}

.page-container--no-padding {
  padding: 0;
}

/* Layout System */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout__header {
  flex-shrink: 0;
}

.layout__main {
  flex: 1 1;
}

.layout__footer {
  flex-shrink: 0;
}

/* Grid System */
.grid {
  display: grid;
  grid-gap: var(--space-md);
  gap: var(--space-md);
}

.grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid--responsive {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Flex System */
.flex {
  display: flex;
}

.flex--col {
  flex-direction: column;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  justify-content: space-between;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--gap-sm { gap: var(--space-sm); }
.flex--gap-md { gap: var(--space-md); }
.flex--gap-lg { gap: var(--space-lg); }

/* Form System */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-color: var(--accent-primary);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-error {
  color: var(--error-color);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.form-hint {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

/* Alert System */
.alert {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: var(--space-md);
}

.alert--success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.alert--warning {
  background-color: #fffbeb;
  border-color: #fed7aa;
  color: #92400e;
}

.alert--error {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert--info {
  background-color: #eff6ff;
  border-color: #c7d2fe;
  color: #1e40af;
}

/* Badge System */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.badge--primary {
  background-color: var(--accent-primary);
  color: white;
}

.badge--success {
  background-color: var(--success-color);
  color: white;
}

.badge--warning {
  background-color: var(--warning-color);
  color: white;
}

.badge--error {
  background-color: var(--error-color);
  color: white;
}

/* Loading States */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

/* Loading animation styles removed - will be replaced with new system */

/* Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
  
  .grid--cols-2,
  .grid--cols-3,
  .grid--cols-4 {
    grid-template-columns: 1fr;
  }
  
  .btn--lg {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
  }
} 

/* SafeImage Component Styles */
.safe-image {
    transition: opacity 0.3s ease;
}

.safe-image-fallback,
.safe-image-loading,
.safe-image-error {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading spinner animation */
/* Spin keyframes removed - will be replaced with new system */

/* Image container for consistent sizing */
.image-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.image-container.square {
    aspect-ratio: 1;
}

.image-container.wide {
    aspect-ratio: 16/9;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

/* ========================================================================== */
/* UNIFIED TAB SYSTEM */
/* ========================================================================== */

/* Tab Container */
.shared-tabs,
.main-page-shared-tab-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
  margin-bottom: 2rem;
  background: var(--container-background);
  padding: 0.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Keep tabs on one line for larger screens */
@media (min-width: 800px) {
  .shared-tabs,
  .main-page-shared-tab-menu {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    white-space: nowrap;
  }
}

/* Individual Tab Button */
.shared-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.95rem;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow line breaks in tab labels */
.shared-tab-btn .shared-tab-label {
  white-space: normal;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.9rem;
}



/* Hover State - Lighter blue background */
.shared-tab-btn:hover {
  background: #60a5fa;
  color: white;
}

/* Active State - Light blue background */
.shared-tab-btn.active {
  background: #3b82f6;
  color: white;
}

/* Active Hover State - Slightly lighter than active */
.shared-tab-btn.active:hover {
  background: var(--accent-hover);
  color: white;
}

/* Active SVG Icon State - Lighter color for SVG icons */
.shared-tab-btn.active .shared-tab-icon svg {
  stroke: rgba(255, 255, 255, 0.7);
}

/* Active Hover SVG Icon State - Full white for SVG icons */
.shared-tab-btn.active:hover .shared-tab-icon svg {
  stroke: white;
}

/* Tab Icon Styling */
.shared-tab-icon {
  font-size: 1.2rem;
}

/* Tab Label Styling */
.shared-tab-label {
  font-weight: inherit;
}

/* Responsive Design */
@media (max-width: 768px) {
  .shared-tabs,
  .main-page-shared-tab-menu {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    margin-bottom: 1rem;
    padding: 0.25rem;
    gap: 0.25rem;
  }
  
  .shared-tab-btn {
    padding: 0.6rem 0.5rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .shared-tabs,
  .main-page-shared-tab-menu {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    padding: 0.25rem;
    gap: 0.25rem;
  }
  
  .shared-tab-btn {
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem;
    gap: 0.25rem;
  }
  
  .shared-tab-icon {
    font-size: 1rem;
  }
  
  .shared-tab-label {
    font-size: 0.75rem;
  }
}

/* Shared Navigation Action Buttons */
.nav-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: none;
    border: none;
    border-radius: 10px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    width: 40px;
    height: 40px;
}

.nav-action-btn svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
    flex-shrink: 0;
    stroke-width: 2 !important;
}

.nav-action-btn:hover {
    background-color: #334155;
    color: #6484C0;
}

.nav-action-btn.active {
    background-color: #14213F;
    border: 1px solid #6484C0;
    color: #6484C0;
}

.nav-action-btn.active svg {
    stroke: #6484C0 !important;
}

.nav-action-btn.active::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background-color: #6484C0;
    border-radius: 0 0 3px 3px;
}

/* Navigation action button variants */
.nav-action-btn.profile-variant {
    border: 1px solid #475569;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    width: auto;
    height: auto;
    min-width: 120px;
}

.nav-action-btn.profile-variant:hover {
    border-color: #6484C0;
    background-color: #334155;
}

.nav-action-btn.profile-variant.active {
    border-color: #6484C0;
    background-color: #23293A;
    color: #6484C0;
}

.nav-action-btn.profile-variant.active span {
    color: #6484C0;
}

.nav-action-btn.profile-variant.active .profile-initials-small {
    color: white;
}

/* ========================================
   SHARED PROGRESS BAR SYSTEM
   ======================================== */

/* Progress Card Container */
.progress-card {
    background: #f8fafc; /* Light gray background */
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.progress-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.progress-card--compact {
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    position: relative;
    overflow: hidden;
}

.progress-card--compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899, #f59e0b);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}

.progress-card--compact .progress-title {
    margin-bottom: 0.5rem;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-card--compact .progress-badge {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
}

.progress-card--inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

/* Progress Header */
.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem; /* 32px */
    gap: 1rem;
}

.main-header-main-pages {
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    padding: 32px;
    margin-bottom: 24px;
    border: none;
    display: grid !important;
    grid-template-columns: 100px 1fr;
    grid-gap: 32px;
    gap: 32px;
    align-items: center;
}

/* Fallback for headers without the new structure */
.main-header-main-pages:not(:has(.header-icon)) {
    display: flex !important;
    align-items: center;
    gap: 32px;
    text-align: left;
}

.main-header-main-pages .header-icon {
    width: 100px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    cursor: move;
    flex-shrink: 0;
}

.main-header-main-pages .header-icon.admin-editing {
    border: 2px dashed rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.main-header-main-pages .header-icon svg {
    width: 48px;
    height: 48px;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* More specific selector to prevent overwriting */
.main-header-main-pages > .header-content,
.main-header-main-pages .header-content:not(.override) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.page-container .main-header-main-pages h1,
.page-container .main-header-main-pages .header-content h1,
.progress .main-header-main-pages h1,
.progress .main-header-main-pages .header-content h1,
.writing-container .main-header-main-pages h1,
.analytics .main-header-main-pages h1,
.projects .main-header-main-pages h1,
.locations .main-header-main-pages h1,
.groups .main-header-main-pages h1,
.leaderboard .main-header-main-pages h1,
.discover .main-header-main-pages h1,
body:not(.admin-page) .main-header-main-pages h1,
body:not(.admin-page) .main-header-main-pages .header-content h1 {
    color: #e5e7eb;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    display: block;
    text-align: left;
    background: none;
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: border-box;
    background-clip: initial;
    -webkit-text-fill-color: #e5e7eb;
    text-fill-color: #e5e7eb;
}

/* Style h1 when no header-icon present - icon inline with text */
.main-header-main-pages:not(:has(.header-icon)) h1 {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.main-header-main-pages:not(:has(.header-icon)) h1 svg {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.page-container .main-header-main-pages h2,
.page-container .main-header-main-pages .header-content h2,
.progress .main-header-main-pages h2,
.progress .main-header-main-pages .header-content h2,
.writing-container .main-header-main-pages h2,
.analytics .main-header-main-pages h2,
.projects .main-header-main-pages h2,
.locations .main-header-main-pages h2,
.groups .main-header-main-pages h2,
.leaderboard .main-header-main-pages h2,
.discover .main-header-main-pages h2,
body:not(.admin-page) .main-header-main-pages h2,
body:not(.admin-page) .main-header-main-pages .header-content h2 {
    color: #e5e7eb;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: block;
    text-align: left;
    background: none;
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: border-box;
    background-clip: initial;
    -webkit-text-fill-color: #e5e7eb;
    text-fill-color: #e5e7eb;
}

.main-header-main-pages p {
    color: #d1d5db;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
}

/* Style p when no header-icon present */
.main-header-main-pages:not(:has(.header-icon)) p {
    text-align: left !important;
    margin: 0 !important;
}

/* Wrapper for text content in headers without icon structure */
.main-header-main-pages:not(:has(.header-icon)) > div:not(.header-icon) {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-header--simple {
    margin-bottom: 0.25rem;
}

.progress-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
}

.progress-title--sm {
    font-size: 0.875rem;
}

.progress-title--lg {
    font-size: 1.125rem;
}

.progress-icon {
    font-size: 1.2em;
    opacity: 0.8;
}

.progress-badge {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 0.375rem 1rem;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-badge--success {
    background: #dcfce7;
    color: #16a34a;
}

.progress-badge--warning {
    background: #fef3c7;
    color: #d97706;
}

.progress-badge--danger {
    background: #fee2e2;
    color: #dc2626;
}

/* Progress Stats */
.progress-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.progress-stats--sm {
    margin-bottom: 0.375rem;
}

.progress-current {
    color: #1f2937;
    font-size: 1.375rem;
    font-weight: 700;
}

.progress-separator {
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 400;
}

.progress-target {
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
}

.progress-stats--sm .progress-current {
    font-size: 1rem;
}

.progress-stats--sm .progress-separator,
.progress-stats--sm .progress-target {
    font-size: 0.875rem;
}

/* Shared Progress Bar */
.shared-progress-bar {
    width: 100%;
    height: 10px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.shared-progress-bar--sm {
    height: 6px;
    margin-bottom: 0.5rem;
}

.shared-progress-bar--lg {
    height: 14px;
    margin-bottom: 1rem;
}

.shared-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600));
    border-radius: 8px;
    transition: width 0.6s ease;
    position: relative;
    min-width: 2px;
}

/* Progress Bar Variants */
.shared-progress-fill--words {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.shared-progress-fill--time {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.shared-progress-fill--success {
    background: linear-gradient(90deg, #10b981, #059669);
}

.shared-progress-fill--warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.shared-progress-fill--danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Progress Bar with Animation */
.shared-progress-fill--animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Progress Footer */
.progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.progress-footer--center {
    justify-content: center;
}

.progress-celebration {
    color: #16a34a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .progress-card {
        padding: 1rem;
    }
    
    .progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .progress-card--inline {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .progress-stats .progress-current {
        font-size: 1.125rem;
    }
}

/* Settings gear animation for navigation action buttons */
.nav-action-btn.settings-variant svg {
    transition: transform 0.3s ease;
}

.nav-action-btn.settings-variant:hover svg {
    transform: rotate(90deg);
}

.nav-action-btn.settings-variant:active svg {
    transform: rotate(90deg) scale(0.95);
}

/* Notification badge for navigation action buttons */
.nav-action-btn .notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 16px;
    border: 2px solid #0f172a;
}

.nav-action-btn .notification-badge:empty {
    display: none;
}

/* Profile icon styling within nav action buttons - DEPRECATED, see Navigation/styles.css */
.nav-action-btn .profile-icon-small {
    /* These values are overridden in Navigation/styles.css for proper sizing */
    width: 72px;  /* Updated to match Navigation/styles.css */
    height: 72px;
    border-radius: 50%;
    border: 4px solid #403F48;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6;
    flex-shrink: 0;
}

.nav-action-btn .profile-icon-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-action-btn .profile-initials-small {
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
} 

/* Leaderboard Filter Sub-tabs */
.leaderboard-filter-tabs {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.25rem;
  border-radius: 8px;
}

/* Keep filter tabs on one line for larger screens */
@media (min-width: 800px) {
  .leaderboard-filter-tabs {
    grid-template-columns: repeat(4, 1fr);
  }
}

.leaderboard-filter-tabs .shared-tab-btn {
  font-size: 0.85rem;
  padding: 0.6rem 0.8rem;
  color: #64748b;
}

.leaderboard-filter-tabs .shared-tab-btn:hover {
  background: #e2e8f0;
  color: #374151;
}

.leaderboard-filter-tabs .shared-tab-btn.active {
  background: #3b82f6;
  color: white;
}

.leaderboard-filter-tabs .shared-tab-btn.active:hover {
  background: #2563eb;
  color: white;
}

@media (max-width: 768px) {
  /* Hide main headers for Dashboard, Progress, and Groups pages */
  .main-header-main-pages {
    display: none !important;
  }
  
  .leaderboard-filter-tabs {
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    gap: 0.2rem;
    padding: 0.2rem;
  }
  
  .leaderboard-filter-tabs .shared-tab-btn {
    padding: 0.5rem 0.3rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .leaderboard-filter-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
} 

/* Filter indicator in leaderboard header */
.filter-indicator {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
  margin-left: 0.5rem;
}

@media (max-width: 480px) {
  .filter-indicator {
    display: block;
    margin-left: 0;
    margin-top: 0.25rem;
    font-size: 0.8rem;
  }
} 

/* Override admin gradient styles for main page headers */
.page-container.progress .header-content h1,
.page-container.progress .main-header-main-pages .header-content h1,
div.progress .main-header-main-pages .header-content h1,
.writing-container .main-header-main-pages .header-content h1,
.analytics .main-header-main-pages .header-content h1,
.projects .main-header-main-pages .header-content h1 {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: border-box !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #e5e7eb !important;
    color: #e5e7eb !important;
}


/* ========================================================================== */
/* MAIN CSS ENTRY POINT - Cross-Browser Compatible Design System */
/* Ensures consistent rendering across Chrome, Firefox, Safari, Edge */
/* ========================================================================== */

/* STEP 1: Browser Normalize & Reset - Standardize default browser styles */

/* STEP 2: Cross-Browser Compatibility - REMOVED (file deleted) */
/* @import './cross-browser-compatibility.css'; */

/* STEP 3: Unified Design System - Single source of truth for styling */

/* STEP 4: Component-specific styles that extend the unified system */

/* ========================================================================== */
/* ARCHITECTURE NOTES */
/* ========================================================================== */

/*
This layered approach ensures:

1. **Browser Consistency**: normalize-reset.css eliminates browser default differences
2. **Modern Features**: cross-browser-compatibility.css uses @supports queries for graceful degradation  
3. **Design System**: unified-design-system.css provides consistent variables and components
4. **Customization**: components.css extends the system without conflicts

Key Benefits:
- ✅ Works identically in Chrome, Firefox, Safari, Edge
- ✅ Handles Chrome incognito mode correctly  
- ✅ No CSS cascade conflicts or !important wars
- ✅ Uses modern CSS features with fallbacks
- ✅ Maintainable single source of truth
- ✅ Significantly smaller bundle size

Replaced Systems:
- ❌ design-system.css (conflicts with nuclear CSS overrides)
- ❌ themes.css (merged into unified-design-system.css)
- ❌ layout.css (merged into unified-design-system.css)
- ❌ Browser-specific hacks and chrome-incognito-fix.css
- ❌ Multiple conflicting CSS variable systems

Browser Engine Support:
- Chrome/Edge (Blink): ✅ Full support with WebKit-specific optimizations
- Firefox (Gecko): ✅ Full support with Mozilla-specific optimizations  
- Safari (WebKit): ✅ Full support with Safari-specific optimizations
- Mobile browsers: ✅ Touch-optimized with proper viewport handling
*/ 
/* Mobile and Tablet Responsive Styles for Scrivia */
/* Apply mobile styles for screens up to 768px (tablets) */
/* This also helps with smaller Electron windows */

/* Only apply mobile constraints to non-landing pages */
@media (max-width: 768px) {
    /* Apply constraints ONLY when NOT on landing page */
    body:not(.landing-page-active) {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    body:not(.landing-page-active) .app {
        padding: 0;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    body:not(.landing-page-active) .main-content {
        padding: 0.5rem;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Navigation - Wrap to multiple rows on mobile */
    .navigation {
        padding: 0.5rem;
        height: auto;
        min-height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    /* First row: Logo and user actions */
    .nav-brand {
        flex: 0 0 auto;
        order: 1;
    }

    .nav-brand .logo-text {
        font-size: 1.25rem;
    }

    /* User actions (search, notifications, profile) move to top right */
    .nav-actions-working {
        flex: 0 0 auto;
        order: 2;
        margin-left: auto !important;
        display: flex;
        gap: 0.5rem;
    }

    /* Second row: Navigation links */
    .nav-links {
        flex: 1 1 100%;
        order: 3;
        display: flex;
        justify-content: space-around;
        gap: 0.25rem;
        width: 100%;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Navigation links on mobile */
    .nav-links a,
    .nav-links button {
        flex: 1 1;
        padding: 0.5rem 0.25rem;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        background: transparent;
        border: none;
        color: var(--text-primary);
        border-radius: 0.5rem;
        transition: background 0.2s;
        font-size: 0.7rem;
        text-decoration: none;
    }

    .nav-links a:hover,
    .nav-links button:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .nav-links a.active {
        background: rgba(255, 255, 255, 0.15);
    }

    /* Navigation link icons */
    .nav-links svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    /* Hide text labels on mobile navigation links */
    .nav-links span {
        font-size: 0.65rem;
        margin-top: 0.125rem;
    }

    /* Action buttons (search, notifications, messages) */
    .nav-action-btn {
        padding: 0.5rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-primary);
        border-radius: 0.5rem;
        transition: background 0.2s;
        position: relative;
    }

    .nav-action-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .nav-action-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    /* Notification badge */
    .notification-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        background: #ef4444;
        color: white;
        font-size: 0.6rem;
        padding: 0.125rem 0.25rem;
        border-radius: 9999px;
        min-width: 16px;
        text-align: center;
    }

    /* User profile button */
    .user-profile-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2rem;
        border: none;
        color: var(--text-primary);
        transition: background 0.2s;
    }

    .user-profile-btn:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .user-profile-btn img,
    .user-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Hide username on mobile */
    .user-profile-btn .username {
        display: none;
    }

    /* Admin Panel Bar */
    .admin-panel-bar {
        flex-wrap: wrap;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .admin-panel-bar button {
        flex: 1 1;
        min-width: 70px;
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    /* Writing Session Timer Bar */
    .writing-session-bar,
    .live-writing-bar {
        padding: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
        min-height: auto;
    }

    .writing-session-bar .project-info {
        font-size: 0.9rem;
        width: 100%;
        text-align: center;
    }

    .writing-session-bar .timer-display {
        font-size: 1.5rem;
    }

    .writing-session-bar .session-controls {
        width: 100%;
        justify-content: center;
        gap: 1rem;
    }

    /* Bottom Navigation Tabs */
    .bottom-navigation,
    .social-tabs {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        padding: 0.5rem;
        z-index: 100;
        display: flex;
        justify-content: space-around;
    }

    .bottom-navigation button,
    .social-tabs button {
        flex: 1 1;
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        outline: none !important;
    }
    
    .bottom-navigation button:focus,
    .bottom-navigation button:focus-visible,
    .social-tabs button:focus,
    .social-tabs button:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
    
    .bottom-navigation button.active,
    .social-tabs button.active {
        background-color: #23293A;
        color: #4E80EE;
    }

    .bottom-navigation button svg,
    .social-tabs button svg {
        font-size: 1.25rem;
    }
    
    .bottom-navigation button.active svg,
    .social-tabs button.active svg {
        color: #4E80EE;
        stroke: #4E80EE;
    }

    /* Main Content Area - Account for bottom nav */
    .main-content {
        padding-bottom: 80px; /* Space for bottom navigation */
    }

    /* Feed and Posts */
    body:not(.landing-page-active) .social-feed {
        padding: 0.5rem;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .post-card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
        max-width: 100% !important;
    }

    .post-header {
        padding: 0.75rem;
    }

    .post-content {
        padding: 0 0.75rem 0.75rem;
    }

    /* Discover Page Title */
    .page-header,
    .discover-header {
        padding: 1rem;
        text-align: center;
    }

    .page-header h1,
    .discover-header h1 {
        font-size: 1.5rem;
    }

    .page-header p,
    .discover-header p {
        font-size: 0.9rem;
    }

    /* Settings Icon Position */
    .settings-button {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1000;
        background: var(--bg-secondary);
        border-radius: 50%;
        padding: 0.5rem;
        width: 40px;
        height: 40px;
    }

    /* Modal and Overlay adjustments */
    .modal-content {
        width: 95%;
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Forms on mobile */
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
}

/* Small phones (iPhone SE, etc.) */
@media (max-width: 480px) {
    .nav-left h1 {
        font-size: 1.1rem;
    }

    .admin-panel-bar button {
        min-width: 60px;
        font-size: 0.75rem;
    }

    .writing-session-bar .timer-display {
        font-size: 1.25rem;
    }
}

/* Landscape mode adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .writing-session-bar {
        flex-direction: row;
        padding: 0.5rem;
    }

    .admin-panel-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .bottom-navigation {
        padding: 0.25rem;
    }

    .bottom-navigation button {
        padding: 0.5rem;
    }
}

/* Fix overlapping text issues */
@media (max-width: 768px) {
    /* Prevent text overflow and horizontal scrolling */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Ensure all containers respect viewport width */
    /* TEMPORARILY DISABLED - Breaking landing page transform/scale
    section, article, aside, header, footer, main, nav {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    div {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    */
    
    /* Prevent tooltips and absolute positioned elements from causing overflow */
    .streak-card {
        position: relative !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    
    /* Constrain any absolute positioned tooltips */
    [class*="tooltip"], [class*="bubble"], [class*="popover"] {
        max-width: calc(100vw - 2rem) !important;
        overflow: hidden !important;
    }
    
    /* Progress page specific fixes */
    .progress-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .streak-cards-grid {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Ensure proper text truncation */
    .truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Fix z-index stacking */
    .navigation-header {
        z-index: 1000;
    }

    .writing-session-bar {
        z-index: 999;
    }

    .admin-panel-bar {
        z-index: 998;
    }

    .main-content {
        z-index: 1;
    }

    .bottom-navigation {
        z-index: 1001;
    }
}

/* Medium screens - Tablets and smaller desktop windows */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Compact navigation for medium screens */
    .navigation {
        padding: 0.75rem;
    }
    
    .nav-brand .logo-text {
        font-size: 1.5rem;
    }
    
    .nav-links {
        gap: 0.5rem;
    }
    
    .nav-links a,
    .nav-links button {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .nav-links span {
        font-size: 0.75rem;
    }
    
    /* Admin panel adjustments */
    .admin-panel-bar {
        gap: 0.5rem;
    }
    
    .admin-panel-bar button {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Landing Page Specific Overrides - Must be at end for specificity */
@media (max-width: 768px) {
    /* Override the aggressive global styles for landing page */
    .published-landing,
    .published-landing * {
        max-width: none !important;
    }
    
    .landing-margin-container {
        max-width: none !important;
    }
    
    .landing-canvas-wrapper {
        max-width: none !important;
    }
    
    .landing-canvas {
        max-width: none !important;
    }
    
    .landing-element {
        max-width: none !important;
    }
    
    .landing-section {
        max-width: none !important;
    }
}
/* Import the unified design system - contains all styling */

/* Import mobile responsive styles */

/* Minimal root setup only - everything else handled by design system */
#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
} 
/* Mobile and Tablet Responsive Styles for Scrivia */
/* Apply mobile styles for screens up to 768px (tablets) */
/* This also helps with smaller Electron windows */

/* Only apply mobile constraints to non-landing pages */
@media (max-width: 768px) {
    /* Apply constraints ONLY when NOT on landing page */
    body:not(.landing-page-active) {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    body:not(.landing-page-active) .app {
        padding: 0;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    body:not(.landing-page-active) .main-content {
        padding: 0.5rem;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Navigation - Wrap to multiple rows on mobile */
    .navigation {
        padding: 0.5rem;
        height: auto;
        min-height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    /* First row: Logo and user actions */
    .nav-brand {
        flex: 0 0 auto;
        order: 1;
    }

    .nav-brand .logo-text {
        font-size: 1.25rem;
    }

    /* User actions (search, notifications, profile) move to top right */
    .nav-actions-working {
        flex: 0 0 auto;
        order: 2;
        margin-left: auto !important;
        display: flex;
        gap: 0.5rem;
    }

    /* Second row: Navigation links */
    .nav-links {
        flex: 1 1 100%;
        order: 3;
        display: flex;
        justify-content: space-around;
        gap: 0.25rem;
        width: 100%;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Navigation links on mobile */
    .nav-links a,
    .nav-links button {
        flex: 1 1;
        padding: 0.5rem 0.25rem;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        background: transparent;
        border: none;
        color: var(--text-primary);
        border-radius: 0.5rem;
        transition: background 0.2s;
        font-size: 0.7rem;
        text-decoration: none;
    }

    .nav-links a:hover,
    .nav-links button:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .nav-links a.active {
        background: rgba(255, 255, 255, 0.15);
    }

    /* Navigation link icons */
    .nav-links svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    /* Hide text labels on mobile navigation links */
    .nav-links span {
        font-size: 0.65rem;
        margin-top: 0.125rem;
    }

    /* Action buttons (search, notifications, messages) */
    .nav-action-btn {
        padding: 0.5rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-primary);
        border-radius: 0.5rem;
        transition: background 0.2s;
        position: relative;
    }

    .nav-action-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .nav-action-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    /* Notification badge */
    .notification-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        background: #ef4444;
        color: white;
        font-size: 0.6rem;
        padding: 0.125rem 0.25rem;
        border-radius: 9999px;
        min-width: 16px;
        text-align: center;
    }

    /* User profile button */
    .user-profile-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2rem;
        border: none;
        color: var(--text-primary);
        transition: background 0.2s;
    }

    .user-profile-btn:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .user-profile-btn img,
    .user-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Hide username on mobile */
    .user-profile-btn .username {
        display: none;
    }

    /* Admin Panel Bar */
    .admin-panel-bar {
        flex-wrap: wrap;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .admin-panel-bar button {
        flex: 1 1;
        min-width: 70px;
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    /* Writing Session Timer Bar */
    .writing-session-bar,
    .live-writing-bar {
        padding: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
        min-height: auto;
    }

    .writing-session-bar .project-info {
        font-size: 0.9rem;
        width: 100%;
        text-align: center;
    }

    .writing-session-bar .timer-display {
        font-size: 1.5rem;
    }

    .writing-session-bar .session-controls {
        width: 100%;
        justify-content: center;
        gap: 1rem;
    }

    /* Bottom Navigation Tabs */
    .bottom-navigation,
    .social-tabs {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        padding: 0.5rem;
        z-index: 100;
        display: flex;
        justify-content: space-around;
    }

    .bottom-navigation button,
    .social-tabs button {
        flex: 1 1;
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        outline: none !important;
    }
    
    .bottom-navigation button:focus,
    .bottom-navigation button:focus-visible,
    .social-tabs button:focus,
    .social-tabs button:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
    
    .bottom-navigation button.active,
    .social-tabs button.active {
        background-color: #23293A;
        color: #4E80EE;
    }

    .bottom-navigation button svg,
    .social-tabs button svg {
        font-size: 1.25rem;
    }
    
    .bottom-navigation button.active svg,
    .social-tabs button.active svg {
        color: #4E80EE;
        stroke: #4E80EE;
    }

    /* Main Content Area - Account for bottom nav */
    .main-content {
        padding-bottom: 80px; /* Space for bottom navigation */
    }

    /* Feed and Posts */
    body:not(.landing-page-active) .social-feed {
        padding: 0.5rem;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .post-card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
        max-width: 100% !important;
    }

    .post-header {
        padding: 0.75rem;
    }

    .post-content {
        padding: 0 0.75rem 0.75rem;
    }

    /* Discover Page Title */
    .page-header,
    .discover-header {
        padding: 1rem;
        text-align: center;
    }

    .page-header h1,
    .discover-header h1 {
        font-size: 1.5rem;
    }

    .page-header p,
    .discover-header p {
        font-size: 0.9rem;
    }

    /* Settings Icon Position */
    .settings-button {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1000;
        background: var(--bg-secondary);
        border-radius: 50%;
        padding: 0.5rem;
        width: 40px;
        height: 40px;
    }

    /* Modal and Overlay adjustments */
    .modal-content {
        width: 95%;
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Forms on mobile */
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
}

/* Small phones (iPhone SE, etc.) */
@media (max-width: 480px) {
    .nav-left h1 {
        font-size: 1.1rem;
    }

    .admin-panel-bar button {
        min-width: 60px;
        font-size: 0.75rem;
    }

    .writing-session-bar .timer-display {
        font-size: 1.25rem;
    }
}

/* Landscape mode adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .writing-session-bar {
        flex-direction: row;
        padding: 0.5rem;
    }

    .admin-panel-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .bottom-navigation {
        padding: 0.25rem;
    }

    .bottom-navigation button {
        padding: 0.5rem;
    }
}

/* Fix overlapping text issues */
@media (max-width: 768px) {
    /* Prevent text overflow and horizontal scrolling */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Ensure all containers respect viewport width */
    /* TEMPORARILY DISABLED - Breaking landing page transform/scale
    section, article, aside, header, footer, main, nav {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    div {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    */
    
    /* Prevent tooltips and absolute positioned elements from causing overflow */
    .streak-card {
        position: relative !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    
    /* Constrain any absolute positioned tooltips */
    [class*="tooltip"], [class*="bubble"], [class*="popover"] {
        max-width: calc(100vw - 2rem) !important;
        overflow: hidden !important;
    }
    
    /* Progress page specific fixes */
    .progress-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .streak-cards-grid {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Ensure proper text truncation */
    .truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Fix z-index stacking */
    .navigation-header {
        z-index: 1000;
    }

    .writing-session-bar {
        z-index: 999;
    }

    .admin-panel-bar {
        z-index: 998;
    }

    .main-content {
        z-index: 1;
    }

    .bottom-navigation {
        z-index: 1001;
    }
}

/* Medium screens - Tablets and smaller desktop windows */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Compact navigation for medium screens */
    .navigation {
        padding: 0.75rem;
    }
    
    .nav-brand .logo-text {
        font-size: 1.5rem;
    }
    
    .nav-links {
        gap: 0.5rem;
    }
    
    .nav-links a,
    .nav-links button {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .nav-links span {
        font-size: 0.75rem;
    }
    
    /* Admin panel adjustments */
    .admin-panel-bar {
        gap: 0.5rem;
    }
    
    .admin-panel-bar button {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Landing Page Specific Overrides - Must be at end for specificity */
@media (max-width: 768px) {
    /* Override the aggressive global styles for landing page */
    .published-landing,
    .published-landing * {
        max-width: none !important;
    }
    
    .landing-margin-container {
        max-width: none !important;
    }
    
    .landing-canvas-wrapper {
        max-width: none !important;
    }
    
    .landing-canvas {
        max-width: none !important;
    }
    
    .landing-element {
        max-width: none !important;
    }
    
    .landing-section {
        max-width: none !important;
    }
}
/* Global rule to remove all focus outlines in navigation */
.navigation * {
  outline: none !important;
  outline-width: 0 !important;
}

/* Remove focus-visible outlines specifically */
.navigation *:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
}

/* Ensure SVG icon buttons never show outlines */
.navigation .nav-btn-search:focus-visible,
.navigation .btn-settings:focus-visible,
.navigation .btn-notifications:focus-visible,
.nav-actions-working .nav-btn-search:focus-visible,
.nav-actions-working .btn-settings:focus-visible,
.nav-actions-working .btn-notifications:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove any browser default focus styles on links */
.navigation a:focus,
.navigation a:active,
.navigation a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove any browser default focus styles on buttons */
.navigation button:focus,
.navigation button:active,
.navigation button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: #1E1F26;
  background-color: var(--navbar-bg, #1E1F26);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 70px;
}

/* Navigation stays at top: 0 for both admin and non-admin */
/* The app container padding handles the space for the fixed admin bar */

.nav-brand {
  width: 200px; /* Fixed width for consistent centering */
}

.nav-brand a {
  color: #f8fafc;
  color: var(--navbar-text, #f8fafc);
  font-size: 1.625rem;
  font-weight: 600;
  text-decoration: none;
  padding-left: 2px;
  /* Ensure brand link doesn't interfere with navigation icons */
  z-index: 1;
  outline: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
}

.nav-brand a:focus,
.nav-brand a:active,
.nav-brand a:focus-visible {
  outline: none;
  background: transparent;
  box-shadow: none;
  border: none;
}

.nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  overflow: visible;
  min-width: -webkit-max-content;
  min-width: max-content;
  /* Ensure navigation links are above brand */
  z-index: 2;
}

.nav-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* Specific styles for icon-based navigation links - Updated to match Write button */
.nav-link-with-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.25rem;  /* Increased padding to match Write button */
  min-width: 85px;  /* Slightly wider to match Write button */
  text-decoration: none;
  color: #94a3b8;
  border-radius: 16px;  /* Consistent border radius across all nav buttons */
  transition: all 0.2s ease;
  visibility: visible;
  opacity: 1;
  flex-shrink: 0;
  /* Reset button-specific browser defaults */
  border: none;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Ensure all navigation icons are visible */
.nav-link-with-icon svg {
  width: 24px;
  height: 24px;
  stroke: #94a3b8;
  display: block;
  visibility: visible;
  flex-shrink: 0;
}

.nav-link-with-icon svg path,
.nav-link-with-icon svg circle,
.nav-link-with-icon svg rect,
.nav-link-with-icon svg line,
.nav-link-with-icon svg polyline {
  stroke: inherit;
}

/* Active state for nav icons */
.nav-link-with-icon.active svg {
  stroke: #4E80EE !important;
}

.nav-link-with-icon.active svg path,
.nav-link-with-icon.active svg polyline,
.nav-link-with-icon.active svg line,
.nav-link-with-icon.active svg circle,
.nav-link-with-icon.active svg rect {
  stroke: #4E80EE !important;
}

.nav-link-with-icon:hover svg {
  stroke: #3b82f6;
}

/* Ensure all navigation text is visible */
.nav-link-with-icon span {
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  visibility: visible;
}

.nav-links a:hover {
  color: #3b82f6;
  background-color: #334155;
}

.nav-links a.active {
  color: #4E80EE;
  font-weight: 500;
  background-color: #23293A;
}

.nav-links a.active svg {
  stroke: #4E80EE;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 200px; /* Fixed width to match nav-brand */
  justify-content: flex-end;
  height: 44px; /* Ensure consistent height */
}

/* Navigation actions buttons */
.nav-btn-search,
.btn-settings,
.btn-notifications {
    padding: 0.75rem;
    background: none;
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    outline: none !important;
}

.nav-btn-search:hover,
.btn-settings:hover,
.btn-notifications:hover {
    background-color: #1e293b;
    color: #3b82f6;
}

.nav-btn-search.active,
.btn-settings.active,
.btn-notifications.active {
    background-color: #23293A;
    color: #4E80EE;
    outline: none !important;
}

.nav-btn-search:focus,
.btn-settings:focus,
.btn-notifications:focus {
    outline: none !important;
}

/* Settings Gear Animation */
.btn-settings svg {
    transition: transform 0.3s ease;
}

.btn-settings:hover svg {
    transform: rotate(90deg);
}

.btn-settings:active svg {
    transform: rotate(90deg) scale(0.95);
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    border: 2px solid #1E1F26;
    z-index: 1;
}

.notification-badge:empty {
    display: none;
}

.navigation .profile-icon-small:hover,
.nav-action-btn .profile-icon-small:hover {
  transform: scale(1.05);
  outline: none !important;
}

.navigation .profile-icon-small:focus,
.navigation .profile-icon-small:active,
.nav-action-btn .profile-icon-small:focus,
.nav-action-btn .profile-icon-small:active {
  outline: none !important;
  box-shadow: none !important;
}

.navigation .profile-icon-small img,
.nav-action-btn .profile-icon-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-initials-small {
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-profile {
  padding: 0.75rem 1.25rem;
  background-color: transparent;
  color: #94a3b8;
  border: 1px solid #475569;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  outline: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.btn-profile:hover {
  background-color: #334155;
  border-color: #3b82f6;
  color: #3b82f6;
}

.btn-profile:focus,
.btn-profile:active {
  outline: none !important;
  box-shadow: none !important;
}

.btn-profile.active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* Working nav-actions container styling */
.nav-actions-working {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0 10px;
}

/* More specific selectors to remove profile button outlines */
.nav-action-btn.profile-variant,
.nav-action-btn.profile-variant:hover,
.nav-action-btn.profile-variant:focus,
.nav-action-btn.profile-variant:active,
.nav-action-btn.profile-variant:focus-visible,
a.nav-action-btn.profile-variant,
a.nav-action-btn.profile-variant:hover,
a.nav-action-btn.profile-variant:focus,
a.nav-action-btn.profile-variant:active,
a.nav-action-btn.profile-variant:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* Remove outlines from the avatar div itself but keep border */
.nav-action-btn.profile-variant .profile-icon-small,
.nav-action-btn.profile-variant .profile-icon-small:hover,
.nav-action-btn.profile-variant .profile-icon-small:focus,
.nav-action-btn.profile-variant .profile-icon-small:active,
.nav-action-btn.profile-variant .profile-icon-small:focus-visible,
.navigation .profile-icon-small,
.navigation .profile-icon-small:hover,
.navigation .profile-icon-small:focus,
.navigation .profile-icon-small:active,
.navigation .profile-icon-small:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  /* Removed border: none to allow the 4px border */
}

/* Remove outlines from the image inside avatar */
.nav-action-btn.profile-variant .profile-icon-small img,
.nav-action-btn.profile-variant .profile-icon-small img:hover,
.nav-action-btn.profile-variant .profile-icon-small img:focus,
.nav-action-btn.profile-variant .profile-icon-small img:active,
.nav-action-btn.profile-variant .profile-icon-small img:focus-visible,
.navigation .profile-icon-small img,
.navigation .profile-icon-small img:hover,
.navigation .profile-icon-small img:focus,
.navigation .profile-icon-small img:active,
.navigation .profile-icon-small img:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Nav action buttons (search, notifications, messages, settings, profile) */
.nav-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;  /* Slightly smaller than main nav buttons */
  background: transparent;
  border: none;
  outline: none;
  border-radius: 14px;  /* Rounded corners similar to nav buttons */
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
}

.nav-action-btn:hover {
  background-color: #334155;
  color: #3b82f6;
}

.nav-action-btn.active {
  background-color: #23293A;
  color: #4E80EE;
}

.nav-action-btn svg {
  width: 28px !important;
  height: 28px !important;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Profile button specific styles */
.nav-action-btn.profile-variant {
  padding: 0.5rem 0.75rem;
  min-width: -webkit-max-content;
  min-width: max-content;
  border: none;
  outline: none;
}

.nav-action-btn.profile-variant:focus {
  outline: none;
  box-shadow: none;
}

.navigation .profile-icon-small,
.nav-action-btn .profile-icon-small {
  width: 58px !important;  /* Reduced by 20% from 72px */
  height: 58px !important;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #475569;
  flex-shrink: 0;
  border: 4px solid #403F48;  /* Updated border color */
  outline: none !important;
  box-shadow: none !important;
}

.navigation .profile-icon-small img,
.nav-action-btn .profile-icon-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-initials-small {
  font-size: 1.2rem;  /* Adjusted for smaller avatar */
  color: #cbd5e1;
  font-weight: 600;
}

/* Nav action button SVG styling */
.navigation .nav-btn-search svg, 
.navigation .btn-settings svg, 
.navigation .btn-notifications svg,
.nav-actions-working .nav-btn-search svg,
.nav-actions-working .btn-settings svg,
.nav-actions-working .btn-notifications svg {
  stroke-width: 2;
  width: 28px;
  height: 28px;
  stroke: #94a3b8;
  display: block;
  visibility: visible;
  flex-shrink: 0;
}

.navigation .nav-btn-search:hover svg,
.navigation .btn-settings:hover svg,
.navigation .btn-notifications:hover svg {
  stroke: #3b82f6;
}

.navigation .nav-btn-search.active svg,
.navigation .btn-settings.active svg,
.navigation .btn-notifications.active svg,
.nav-actions-working .nav-btn-search.active svg,
.nav-actions-working .btn-settings.active svg,
.nav-actions-working .btn-notifications.active svg {
  stroke: #4E80EE !important;
}

/* Set parent element colors for Firefox compatibility */
.navigation .nav-btn-search,
.navigation .btn-settings,
.navigation .btn-notifications,
.nav-actions-working .nav-btn-search,
.nav-actions-working .btn-settings,
.nav-actions-working .btn-notifications {
  color: #94a3b8 !important;
}

/* Navigation button hover states */
.navigation .nav-btn-search:hover,
.navigation .btn-settings:hover,
.navigation .btn-notifications:hover,
.nav-actions-working .nav-btn-search:hover,
.nav-actions-working .btn-settings:hover,
.nav-actions-working .btn-notifications:hover {
  color: #3b82f6 !important;
}

/* Navigation button active states */
.navigation .nav-btn-search:active,
.navigation .btn-settings:active,
.navigation .btn-notifications:active,
.nav-actions-working .nav-btn-search:active,
.nav-actions-working .btn-settings:active,
.nav-actions-working .btn-notifications:active {
  color: white !important;
}

/* Standard Navigation Buttons (Home, Progress, Groups, Dashboard) - Similar to Write button but without glow */
.navigation .nav-links .nav-standard-button,
.navigation .nav-links a.nav-standard-button {
  position: relative;
  /* All the same properties as write-glow except animations */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.25rem;
  min-width: 85px;
  text-decoration: none;
  color: #94a3b8;
  border-radius: 16px;
  transition: all 0.2s ease;
  visibility: visible;
  opacity: 1;
  flex-shrink: 0;
  /* Reset link-specific browser defaults */
  border: none;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Standard button hover state with background */
.navigation .nav-links .nav-standard-button:hover {
  background-color: #334155;
  color: #3b82f6;
}

/* Standard button active state when on respective page */
.navigation .nav-links .nav-standard-button.active {
  color: #4E80EE;
  font-weight: 500;
  background-color: #23293A;
}

/* Standard button text styling */
.navigation .nav-links .nav-standard-button span {
  position: relative;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  visibility: visible;
  color: inherit; /* Use parent color */
}

/* Standard button SVG styling */
.navigation .nav-links .nav-standard-button svg {
  position: relative;
  width: 24px;
  height: 24px;
  stroke: #94a3b8;
  display: block;
  visibility: visible;
  flex-shrink: 0;
}

.navigation .nav-links .nav-standard-button svg path,
.navigation .nav-links .nav-standard-button svg circle,
.navigation .nav-links .nav-standard-button svg rect,
.navigation .nav-links .nav-standard-button svg line,
.navigation .nav-links .nav-standard-button svg polyline {
  stroke: inherit;
}

/* Standard button HOVER state SVG */
.navigation .nav-links .nav-standard-button:hover svg {
  stroke: #3b82f6;
}

/* Standard button ACTIVE state SVG */
.navigation .nav-links a.nav-link-with-icon.nav-standard-button.active svg {
  stroke: #4E80EE !important;
}

.navigation .nav-links a.nav-link-with-icon.nav-standard-button.active svg path,
.navigation .nav-links a.nav-link-with-icon.nav-standard-button.active svg polyline,
.navigation .nav-links a.nav-link-with-icon.nav-standard-button.active svg line,
.navigation .nav-links a.nav-link-with-icon.nav-standard-button.active svg circle,
.navigation .nav-links a.nav-link-with-icon.nav-standard-button.active svg rect {
  stroke: #4E80EE !important;
}

/* Standard button hover when also active */
.navigation .nav-links .nav-standard-button.active:hover {
  background-color: #475569;
  color: #60a5fa;
}

.navigation .nav-links .nav-standard-button.active:hover svg {
  stroke: #60a5fa;
}

/* Write Button - only add glow-specific properties, rest inherited from nav-link-with-icon */
.navigation .nav-links .write-glow,
.navigation .nav-links button.write-glow {
  position: relative;
}

/* Write button hover state with background */
.navigation .nav-links .write-glow:hover {
  background-color: #334155;
  color: #3b82f6;
}

/* Write button active state when on write page - match other active buttons */
.navigation .nav-links .write-glow.active {
  color: #4E80EE;
  font-weight: 500;
  background-color: #23293A;
}

/* Glow text styling - DEFAULT STATE */
.navigation .nav-links .write-glow span {
  position: relative;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
  visibility: visible;
  animation: gentle-glow 8s ease-in-out infinite;
  color: #94a3b8; /* Default gray color */
}

/* Write button HOVER state text */
.navigation .nav-links .write-glow:hover span {
  color: #3b82f6;
}

/* Write button ACTIVE state text - must come after default and hover */
.navigation .nav-links .write-glow.active span {
  color: #4E80EE !important;
}

/* Glow SVG styling - DEFAULT STATE */
.navigation .nav-links .write-glow svg {
  position: relative;
  width: 24px;
  height: 24px;
  stroke: #94a3b8;
  display: block;
  visibility: visible;
  flex-shrink: 0;
  animation: gentle-glow-svg 8s ease-in-out infinite;
}

.navigation .nav-links .write-glow svg path,
.navigation .nav-links .write-glow svg circle,
.navigation .nav-links .write-glow svg rect,
.navigation .nav-links .write-glow svg line,
.navigation .nav-links .write-glow svg polyline {
  stroke: inherit;
}

/* Write button HOVER state - must come after default */
.navigation .nav-links .write-glow:hover svg {
  stroke: #3b82f6;
}

/* Write button ACTIVE state - must come after default */
.navigation .nav-links button.nav-link-with-icon.write-glow.active svg {
  stroke: #4E80EE !important;
}

.navigation .nav-links button.nav-link-with-icon.write-glow.active svg path,
.navigation .nav-links button.nav-link-with-icon.write-glow.active svg polyline,
.navigation .nav-links button.nav-link-with-icon.write-glow.active svg line {
  stroke: #4E80EE !important;
}

/* Write button hover when also active - must come last */
.navigation .nav-links .write-glow.active:hover {
  background-color: #475569;
  color: #60a5fa;
}

.navigation .nav-links .write-glow.active:hover svg {
  stroke: #60a5fa;
}

/* Gentle glow animation for text */
@keyframes gentle-glow {
  0%, 70% {
    color: #94a3b8;
    text-shadow: none;
  }
  85% {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  }
  95% {
    color: #e2e8f0;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  }
  100% {
    color: #94a3b8;
    text-shadow: none;
  }
}

/* Gentle glow animation for SVG */
@keyframes gentle-glow-svg {
  0%, 70% {
    stroke: #94a3b8;
    filter: none;
  }
  85% {
    stroke: #ffffff;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
  }
  95% {
    stroke: #e2e8f0;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
  }
  100% {
    stroke: #94a3b8;
    filter: none;
  }
}


/* Firefox-specific fixes for nav-actions SVG visibility */
@supports (-moz-appearance: none) {
  .navigation .nav-btn-search svg,
  .navigation .btn-settings svg,
  .navigation .btn-notifications svg,
  .nav-actions-working .nav-btn-search svg,
  .nav-actions-working .btn-settings svg,
  .nav-actions-working .btn-notifications svg {
    stroke: #94a3b8;
    fill: none;
    display: block;
    visibility: visible;
    opacity: 1;
    width: 28px;
    height: 28px;
    stroke-width: 2;
  }
  
  .navigation .nav-btn-search,
  .navigation .btn-settings,
  .navigation .btn-notifications,
  .nav-actions-working .nav-btn-search,
  .nav-actions-working .btn-settings,
  .nav-actions-working .btn-notifications {
    -moz-appearance: none;
    overflow: visible !important;
    color: #94a3b8 !important;
  }
  
  .navigation .nav-btn-search:hover,
  .navigation .btn-settings:hover,
  .navigation .btn-notifications:hover,
  .nav-actions-working .nav-btn-search:hover,
  .nav-actions-working .btn-settings:hover,
  .nav-actions-working .btn-notifications:hover {
    color: #3b82f6 !important;
  }
  
  .navigation .nav-btn-search:active,
  .navigation .btn-settings:active,
  .navigation .btn-notifications:active,
  .nav-actions-working .nav-btn-search:active,
  .nav-actions-working .btn-settings:active,
  .nav-actions-working .btn-notifications:active {
    color: white !important;
  }
  
  .navigation .nav-btn-search.active,
  .navigation .btn-settings.active,
  .navigation .btn-notifications.active,
  .nav-actions-working .nav-btn-search.active,
  .nav-actions-working .btn-settings.active,
  .nav-actions-working .btn-notifications.active {
    background-color: #23293A !important;
    color: #4E80EE !important;
    outline: none !important;
  }
  
  .navigation .nav-btn-search.active svg,
  .navigation .btn-settings.active svg,
  .navigation .btn-notifications.active svg {
    stroke: #4E80EE !important;
  }
  
  .navigation .nav-btn-search:focus,
  .navigation .btn-settings:focus,
  .navigation .btn-notifications:focus {
    outline: none !important;
  }
}

/* Sparkle trigger container */
.logo-sparkle-trigger {
  position: relative;
  display: flex;
  align-items: center;
}

/* Logo text container for proper sparkle positioning */
.logo-text-container {
  position: relative;
  display: flex;
  align-items: center;
}

/* Logo text - stays white */
.logo-sparkle-trigger .logo-text {
  position: relative;
  z-index: 2;
  display: block;
  color: #f8fafc;
  line-height: 1;
}


/* Individual sparkle SVGs - base state, always invisible until animated */
.logo-sparkle-trigger svg.logo-sparkle {
  position: absolute;
  z-index: 3;
  width: 0.75rem;
  aspect-ratio: 1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  --delay-step: 0.15;
  top: calc(50 * 1%);
  top: calc(var(--y, 50) * 1%);
  left: calc(0 * 1%);
  left: calc(var(--x, 0) * 1%);
  transform: translate(-50%, -50%) scale(0);
}

/* Make sparkles visible only when animation is active */
.logo-sparkle-trigger.logo-sparkle-active svg.logo-sparkle {
  visibility: visible;
}

.logo-sparkle-trigger svg.logo-sparkle path {
  fill: hsl(45 100% 50% / 0.9); /* Gold color for sparkles */
}

/* Animation for sparkles when active - logo sparkles first, then text sparkles */
/* Logo image sparkles (3 stars) - start first */
.logo-sparkle-trigger.logo-sparkle-active svg.logo-image-sparkle:nth-of-type(1) {
  animation: logo-sparkle 0.75s 0s both;
}

.logo-sparkle-trigger.logo-sparkle-active svg.logo-image-sparkle:nth-of-type(2) {
  animation: logo-sparkle 0.75s 0.25s both;
}

.logo-sparkle-trigger.logo-sparkle-active svg.logo-image-sparkle:nth-of-type(3) {
  animation: logo-sparkle 0.75s 0.50s both;
}

/* Text sparkles (5 stars) - start after logo sparkles */
.logo-sparkle-trigger.logo-sparkle-active svg.logo-text-sparkle:nth-of-type(1) {
  animation: logo-sparkle 0.75s 0.75s both;
}

.logo-sparkle-trigger.logo-sparkle-active svg.logo-text-sparkle:nth-of-type(2) {
  animation: logo-sparkle 0.75s 1.00s both;
}

.logo-sparkle-trigger.logo-sparkle-active svg.logo-text-sparkle:nth-of-type(3) {
  animation: logo-sparkle 0.75s 1.25s both;
}

.logo-sparkle-trigger.logo-sparkle-active svg.logo-text-sparkle:nth-of-type(4) {
  animation: logo-sparkle 0.75s 1.50s both;
}

.logo-sparkle-trigger.logo-sparkle-active svg.logo-text-sparkle:nth-of-type(5) {
  animation: logo-sparkle 0.75s 1.75s both;
}

/* Fallback for when no logo image is present - use original CodePen positions */
.logo-sparkle-trigger:not(:has(.custom-logo)) svg.logo-sparkle:nth-of-type(1) {
  --x: 0;
  --y: 20;
  --s: 1.1;
}

.logo-sparkle-trigger:not(:has(.custom-logo)) svg.logo-sparkle:nth-of-type(2) {
  --x: 15;
  --y: 80;
  --s: 1.25;
}

.logo-sparkle-trigger:not(:has(.custom-logo)) svg.logo-sparkle:nth-of-type(3) {
  --x: 45;
  --y: 40;
  --s: 1.1;
}

.logo-sparkle-trigger:not(:has(.custom-logo)) svg.logo-sparkle:nth-of-type(4) {
  --x: 75;
  --y: 60;
  --s: 0.9;
}

.logo-sparkle-trigger:not(:has(.custom-logo)) svg.logo-sparkle:nth-of-type(5) {
  --x: 100;
  --y: 30;
  --s: 0.8;
}

/* Animation timing for when no logo is present */
.logo-sparkle-trigger:not(:has(.custom-logo)).logo-sparkle-active svg.logo-sparkle:nth-of-type(1) {
  animation: logo-sparkle 0.75s 0.25s both;
}

.logo-sparkle-trigger:not(:has(.custom-logo)).logo-sparkle-active svg.logo-sparkle:nth-of-type(2) {
  animation: logo-sparkle 0.75s 0.50s both;
}

.logo-sparkle-trigger:not(:has(.custom-logo)).logo-sparkle-active svg.logo-sparkle:nth-of-type(3) {
  animation: logo-sparkle 0.75s 0.75s both;
}

.logo-sparkle-trigger:not(:has(.custom-logo)).logo-sparkle-active svg.logo-sparkle:nth-of-type(4) {
  animation: logo-sparkle 0.75s 1.00s both;
}

.logo-sparkle-trigger:not(:has(.custom-logo)).logo-sparkle-active svg.logo-sparkle:nth-of-type(5) {
  animation: logo-sparkle 0.75s 1.25s both;
}

@keyframes logo-sparkle {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(var(--s, 1));
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Logo image sparkle positions - positioned in transparent areas of logo */
.logo-sparkle-trigger svg.logo-image-sparkle:nth-of-type(1) {
  --x: 10;  /* Within/near logo area */
  --y: 25;
  --s: 0.8;
  --d: 1;
}

.logo-sparkle-trigger svg.logo-image-sparkle:nth-of-type(2) {
  --x: 15;  /* Within/near logo area */
  --y: 75;
  --s: 0.9;
  --d: 2;
}

.logo-sparkle-trigger svg.logo-image-sparkle:nth-of-type(3) {
  --x: 20;  /* Right edge of logo */
  --y: 50;
  --s: 0.7;
  --d: 3;
}

/* Text sparkle positions - using CodePen relative positions */
/* These sparkles are positioned relative to the text container */
.logo-text-container svg.logo-text-sparkle:nth-of-type(1) {
  --x: 0;   /* Start of text */
  --y: 20;
  --s: 1.1;
  --d: 1;
}

.logo-text-container svg.logo-text-sparkle:nth-of-type(2) {
  --x: 15;  /* Near "S" */
  --y: 80;
  --s: 1.25;
  --d: 2;
}

.logo-text-container svg.logo-text-sparkle:nth-of-type(3) {
  --x: 45;  /* Middle of text */
  --y: 40;
  --s: 1.1;
  --d: 3;
}

.logo-text-container svg.logo-text-sparkle:nth-of-type(4) {
  --x: 75;  /* Near end */
  --y: 60;
  --s: 0.9;
  --d: 2;
}

.logo-text-container svg.logo-text-sparkle:nth-of-type(5) {
  --x: 100; /* After text */
  --y: 30;
  --s: 0.8;
  --d: 4;
}

/* No adjustment needed - sparkles are positioned correctly relative to their elements */

/* Custom Logo Styles */
.custom-logo {
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  vertical-align: middle;
  /* Important: Allow inline styles to control dimensions and spacing */
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
}

.custom-logo.logo-left {
  order: -1;
}

.custom-logo.logo-right {
  order: 1;
}

/* Adjust logo text when custom logo is present */
.nav-brand a:has(.custom-logo) .logo-text {
  flex-shrink: 0;
}

/* For browsers that don't support :has() */
.nav-brand a .custom-logo + .logo-text,
.nav-brand a .logo-text:has(+ .custom-logo) {
  flex-shrink: 0;
}

/* Hamburger Menu Button */
.hamburger-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  background: transparent;
  border: none;
  border-radius: 14px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.hamburger-menu-btn:hover {
  background-color: #334155;
  color: #3b82f6;
}

.hamburger-menu-btn svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Hamburger menu notification indicator */
.hamburger-menu-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background-color: #ef4444;
  border-radius: 50%;
  border: 2px solid #1E1F26;
  border: 2px solid var(--navbar-bg, #1E1F26);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Hamburger Dropdown Menu */
.hamburger-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 10px;
  background-color: #1E1F26;
  background-color: var(--navbar-bg, #1E1F26);
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  z-index: 1001;
  padding: 0.5rem;
}

.hamburger-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-align: left;
}

.hamburger-dropdown-item:hover {
  background-color: #334155;
  color: #3b82f6;
}

.hamburger-dropdown-item.active {
  background-color: #23293A;
  color: #4E80EE;
}

.hamburger-dropdown-item svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.hamburger-badge {
  margin-left: auto;
  background-color: #ef4444;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 20px;
}

/* Ensure nav action buttons have larger icons - with higher specificity */
.navigation .nav-actions-working .nav-action-btn svg,
.nav-actions-working button.nav-action-btn svg,
.nav-actions-working a.nav-action-btn svg {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}

/* Hamburger dropdown divider */
.hamburger-dropdown-divider {
  height: 1px;
  background: #374151;
  margin: 8px 0;
  opacity: 0.5;
}

/* Logout item styling */
.hamburger-dropdown-item.logout-item {
  color: #ef4444;
}

.hamburger-dropdown-item.logout-item:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Responsive Media Queries */
@media (max-width: 1600px) {
  /* Profile button becomes avatar-only below 1600px */
  .nav-action-btn.profile-variant {
    padding: 0.5rem;
    min-width: auto;
  }
  
  /* Scale down avatar to medium size */
  .navigation .profile-icon-small,
  .nav-action-btn .profile-icon-small {
    width: 48px !important;  /* Scaled down from 58px */
    height: 48px !important;
    border-width: 2px;  /* Slightly thinner border on medium screens */
  }
  
  .profile-initials-small {
    font-size: 1rem;  /* Scaled down proportionally */
  }
}

@media (max-width: 1500px) {
  .hamburger-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Hide main nav links on smaller screens if needed */
  .nav-links {
    gap: 1.5rem;
  }
  
  .nav-link-with-icon {
    padding: 0.75rem 1rem;
    min-width: 70px;
  }
  
  .nav-link-with-icon span {
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  .navigation {
    padding: 1rem;
  }
  
  .nav-brand {
    width: auto;
  }
  
  .nav-links {
    gap: 1rem;
  }
  
  .nav-link-with-icon {
    padding: 0.65rem 0.85rem;
    min-width: 60px;
  }
  
  /* Main nav buttons get smaller icons on small screens */
  .nav-link-with-icon svg {
    width: 20px;
    height: 20px;
  }
  
  /* But keep action buttons (search, notifications, etc) at 28px */
  .nav-actions-working .nav-action-btn svg {
    width: 28px !important;
    height: 28px !important;
  }
  
  .nav-link-with-icon span {
    font-size: 0.7rem;
  }
  
  /* Profile button stays as avatar-only */
  .nav-action-btn.profile-variant {
    padding: 0.5rem;
  }
  
  /* Fix hamburger dropdown to appear on top of everything on mobile */
  .hamburger-dropdown {
    position: fixed;
    top: 70px; /* Below the navigation bar */
    right: 10px;
    z-index: 10000; /* Higher z-index to ensure it's on top */
    max-width: calc(100vw - 20px); /* Prevent overflow on small screens */
    min-width: 250px; /* Slightly wider on mobile for better touch targets */
  }
  
  .navigation .profile-icon-small,
  .nav-action-btn .profile-icon-small {
    width: 42px !important;  /* Scaled down for mobile */
    height: 42px !important;
    border-width: 2px;  /* Thinner border on mobile */
  }
  
  .profile-initials-small {
    font-size: 0.9rem;  /* Scaled down for mobile */
  }
}

@media (max-width: 640px) {
  /* Further reduce navigation button sizes */
  .nav-links {
    gap: 0.5rem;
  }
  
  .nav-link-with-icon {
    padding: 0.5rem;
    min-width: 50px;
  }
  
  .nav-link-with-icon span {
    display: none;
  }
  
  .nav-link-with-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* Bottom Navigation Bar */
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #1E1F26;
  background-color: var(--navbar-bg, #1E1F26);
  border-top: 1px solid rgba(102, 126, 234, 0.3);
  padding: 8px 0;
  padding-bottom: 20px;
  z-index: 999;
  height: 72px;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  flex: 1 1;
  text-decoration: none;
  color: #94a3b8;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.bottom-nav-item:hover {
  color: #3b82f6;
}

.bottom-nav-item.active {
  color: #4E80EE;
}

.bottom-nav-item svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.bottom-nav-item span {
  font-size: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Adjust body padding when bottom nav is shown */
@media (max-width: 1000px) {
  body {
    padding-bottom: 60px;
  }
}
 
/* Electron Navigation Container */
.electron-nav-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Top Bar - Always dark blue regardless of theme */
.electron-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1000;
    -webkit-app-region: drag;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
    padding: 0 1rem;
}

/* Ensure navigation stays dark regardless of theme */
[data-theme="light"] .electron-top-bar,
[data-theme="dark"] .electron-top-bar,
[data-theme="system"] .electron-top-bar {
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    -webkit-app-region: no-drag;
    width: 200px; /* Fixed width for consistent centering */
}

.top-bar-center {
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-app-region: no-drag;
    position: relative;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    -webkit-app-region: no-drag;
    width: 200px; /* Fixed width to match left side */
    justify-content: flex-end;
}

.app-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: white !important;
    text-align: center;
    margin: 0 !important;
    padding: 0;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Profile Icon */
.profile-icon-link {
    text-decoration: none;
}

.profile-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.profile-icon:hover {
    border-color: #3b82f6;
    transform: scale(1.05);
}

.profile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-initials {
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.profile-icon-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.profile-icon-small:hover {
    border-color: #3b82f6;
    transform: scale(1.05);
}

.profile-icon-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-initials-small {
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Top Bar Icons - Updated for shared nav-action-btn compatibility */
.top-bar-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
}

/* Allow nav-action-btn to use its own sizing from components.css */
.electron-top-bar .nav-action-btn {
    border-radius: 10px;
}

.top-bar-icon:hover {
    background-color: #334155;
    color: #6484C0;
}

.top-bar-icon.active {
    background-color: #14213F;
    border: 1px solid #6484C0;
    color: #6484C0;
}

/* Top Bar Icon SVG styling */
.top-bar-icon svg {
    stroke: currentColor;
}

.top-bar-icon:hover svg {
    stroke: currentColor;
}

.top-bar-icon.active svg {
    stroke: currentColor;
}

/* Settings Gear Animation */
.settings-icon svg {
    transition: transform 0.3s ease;
}

.settings-icon:hover svg {
    transform: rotate(90deg);
}

.settings-icon:active svg {
    transform: rotate(90deg) scale(0.95);
}

/* Notification Badge - Updated for shared compatibility */
.notification-badge,
.nav-action-btn .notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    border: 2px solid #1e293b;
}

.notification-badge:empty,
.nav-action-btn .notification-badge:empty {
    display: none;
}

.content-wrapper {
    padding-top: 80px;
    padding-bottom: 100px;
}

/* Bottom Navigation - Always dark blue regardless of theme */
.electron-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: #1e293b !important;
    border-top: 1px solid #334155 !important;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 1rem;
    z-index: 1000;
}

/* Ensure bottom navigation stays dark regardless of theme */
[data-theme="light"] .electron-bottom-nav,
[data-theme="dark"] .electron-bottom-nav,
[data-theme="system"] .electron-bottom-nav {
    background-color: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

/* Navigation Items */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #94a3b8;
    min-width: 70px;
    padding: 8px 4px;
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
    flex: 1 1;
}

.nav-item:hover {
    color: #3b82f6;
    background-color: #334155;
    transform: translateY(-2px);
}

.nav-item.active {
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background-color: #3b82f6;
    border-radius: 0 0 3px 3px;
}

/* Navigation Icons */
.nav-icon {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 20px;
}

.nav-item:hover .nav-icon {
    transform: scale(1.1);
}

.nav-item.active .nav-icon {
    transform: scale(1.05);
}

/* Navigation Labels */
.nav-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    width: 100%;
    white-space: nowrap;
}

/* Focus states for accessibility */
.nav-item:focus,
.top-bar-icon:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .electron-top-bar {
        height: 56px;
        padding: 0 0.75rem;
    }
    
    .app-title {
        font-size: 1.1rem;
    }
    
    .profile-icon {
        width: 32px;
        height: 32px;
    }
    
    .top-bar-icon {
        width: 36px;
        height: 36px;
    }
    
    .electron-bottom-nav {
        height: 70px;
        padding: 0 0.25rem;
    }
    
    .nav-item {
        min-width: 60px;
        padding: 6px 2px;
    }
    
    .nav-label {
        font-size: 0.65rem;
    }
    
    .content-wrapper {
        padding-top: 66px;
        padding-bottom: 86px;
    }
}

/* Content Area Adjustments */
.electron-nav-container .main-content {
    padding: 0;
    min-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* Animation Effects */
.nav-item {
    position: relative;
    overflow: hidden;
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #3b82f6;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-item.active::after {
    width: 80%;
}

/* Smooth transitions for icons */
.nav-icon svg,
.top-bar-icon svg {
    transition: all 0.2s ease;
}

.nav-item:hover .nav-icon svg,
.top-bar-icon:hover svg {
    stroke-width: 2.5;
}

/* Loading states */
.nav-item.loading .nav-icon {
    /* animation: pulse 1.5s ease-in-out infinite; */
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* SVG icon colors for top bar icons - override inline stroke="currentColor" with high specificity */
.electron-top-bar .top-bar-icon svg,
.electron-top-bar .nav-btn-search svg,
.electron-bottom-nav .nav-item svg {
    stroke: #94a3b8 !important; /* Use navigation muted color instead of currentColor */
}

.electron-top-bar .top-bar-icon:hover svg,
.electron-top-bar .nav-btn-search:hover svg,
.electron-bottom-nav .nav-item:hover svg {
    stroke: #3b82f6 !important; /* Use navigation accent color on hover */
}

.electron-top-bar .top-bar-icon.active svg,
.electron-top-bar .nav-btn-search.active svg,
.electron-bottom-nav .nav-item.active svg {
    stroke: white !important; /* Use white for active state */
} 
/* Admin Navigation Bar - Prefixed to avoid conflicts */
.scrivia-admin-navigation-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001; /* Above main navigation */
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    height: 50px;
    display: flex;
    align-items: center;
}

.scrivia-admin-nav-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scrivia-admin-nav-brand {
    display: flex;
    align-items: center;
}

.scrivia-admin-panel-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.scrivia-admin-nav-links {
    display: flex;
    gap: 0.5rem;
}

.scrivia-admin-nav-link {
    background: none;
    border: none;
    color: #cccccc;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.scrivia-admin-nav-link:hover {
    background-color: #333333;
    color: #ffffff;
    transform: translateY(-1px);
}

.scrivia-admin-nav-link.active {
    background-color: #4a90e2;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.scrivia-admin-nav-link.active:hover {
    background-color: #357abd;
    transform: translateY(-1px);
}

/* Content Positioning Fixes - Critical for preventing cut-off */
.scrivia-admin-container {
    margin-top: 50px; /* Height of admin nav */
}

/* Global content adjustments when admin nav is present */
/* Add padding-top to the app container to account for the fixed admin bar */
.scrivia-admin-navigation-present .app {
    padding-top: 50px;
    padding-top: var(--scrivia-admin-nav-height, 50px);
}

/* Remove double offsetting - admin pages inherit from .main-content */

/* Global variable for consistent spacing */
body.scrivia-admin-navigation-present {
    --scrivia-admin-nav-height: 50px;
    --scrivia-main-nav-height: 70px;
    /* Note: We only offset by admin height since main nav is sticky, not fixed */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .scrivia-admin-navigation-bar {
        height: 45px;
        padding: 0 0.5rem;
    }
    
    .scrivia-admin-nav-content {
        padding: 0 0.5rem;
    }
    
    .scrivia-admin-panel-title {
        font-size: 1rem;
    }
    
    .scrivia-admin-nav-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .scrivia-admin-container {
        margin-top: 45px;
    }
    
    /* Mobile uses same approach - add padding to app container */
    .scrivia-admin-navigation-present .app {
        padding-top: 45px;
        padding-top: var(--scrivia-admin-nav-height, 45px);
    }
    
    /* Update CSS variables for mobile */
    body.scrivia-admin-navigation-present {
        --scrivia-admin-nav-height: 45px;
    }
}

@media (max-width: 480px) {
    .scrivia-admin-nav-content {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
    }
    
    .scrivia-admin-navigation-bar {
        height: auto;
        min-height: 45px;
        padding: 0.25rem 0;
    }
    
    .scrivia-admin-nav-links {
        gap: 0.25rem;
    }
    
    .scrivia-admin-nav-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}
.writing-notifications {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    margin: 0 10px;
    overflow: hidden;
    position: relative;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: opacity 0.3s ease-in-out;
}

/* Full bar mode - fills entire width as a separate bar */
.writing-notifications.full-bar-mode {
    width: 100%;
    height: 40px;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
    background: #242939;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    animation: slideIn 0.5s ease-out;
}

.notification-icon {
    font-size: 18px;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

.notification-text {
    flex: 1 1;
    color: #e5e5e5;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: fadeInText 0.7s ease-out 0.2s both;
}

.notification-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.stat {
    background: rgba(255, 255, 255, 0.1);
    color: #10b981;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', monospace;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Animations */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Different styles based on notification type */
.writing-notifications.milestone {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
}

.writing-notifications.full-bar-mode.milestone {
    background: #242939;
}

.writing-notifications.milestone .notification-icon {
    color: #f59e0b;
}

.writing-notifications.streak {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
}

.writing-notifications.full-bar-mode.streak {
    background: #242939;
}

.writing-notifications.streak .notification-icon {
    color: #ef4444;
}

.writing-notifications.encouragement {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%);
}

.writing-notifications.full-bar-mode.encouragement {
    background: #242939;
}

.writing-notifications.encouragement .notification-icon {
    color: #8b5cf6;
}

.writing-notifications.cheer_received {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(244, 114, 182, 0.15) 100%);
    animation: cheerPulse 1s ease-in-out;
}

.writing-notifications.full-bar-mode.cheer_received {
    background: #242939;
}

.writing-notifications.cheer_received .notification-icon {
    color: #ec4899;
    animation: heartBeat 1.5s ease-in-out infinite;
}

@keyframes cheerPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    75% { transform: scale(0.95); }
}

/* Responsive design */
@media (max-width: 768px) {
    .writing-notifications {
        height: 35px;
        padding: 0 12px;
        margin: 0 5px;
    }
    
    .notification-content {
        gap: 8px;
    }
    
    .notification-icon {
        font-size: 16px;
    }
    
    .notification-text {
        font-size: 13px;
    }
    
    .notification-stats {
        gap: 6px;
    }
    
    .stat {
        padding: 1px 4px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .writing-notifications {
        height: 32px;
        padding: 0 8px;
    }
    
    .notification-text {
        font-size: 12px;
    }
    
    .notification-stats {
        display: none; /* Hide stats on very small screens */
    }
}
.fish-preview-container {
    position: fixed;
    top: 50%;
    right: calc(420px + 20px); /* Position to the left of settings menu (420px width + 20px gap) */
    transform: translateY(-50%);
    background: #1e293b;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    width: 320px;
    z-index: 999; /* Below settings menu but above other content */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fish-preview-container.hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(-20px);
    pointer-events: none;
}

.fish-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px 12px 0 0;
}

.fish-preview-header h3 {
    margin: 0;
    color: #f1f5f9;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fish-preview-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 10px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.fish-preview-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.3);
}

.fish-preview-content {
    padding: 20px;
}

.fish-preview-svg {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #1a2332 0%, #252837 100%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.fish-preview-info {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(102, 126, 234, 0.15);
}

.fish-preview-info p {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* Minimized state */
.fish-preview-minimized {
    position: fixed;
    top: 50%;
    right: calc(420px + 20px);
    transform: translateY(-50%);
    background: #1e293b;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 10px;
    z-index: 999;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.fish-preview-minimized:hover {
    background: #243147;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-50%) translateX(-2px);
}

.fish-preview-minimized span {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Adjust for smaller screens */
@media (max-width: 1200px) {
    .fish-preview-container {
        right: 20px;
        top: auto;
        bottom: 20px;
        transform: none;
        width: 280px;
    }
    
    .fish-preview-minimized {
        right: 20px;
        top: auto;
        bottom: 20px;
        transform: none;
        writing-mode: horizontal-tb;
    }
}

/* Hide preview button in Fish Design tab since preview is persistent */
.fish-design-preview-button {
    display: none;
}
.fish-design-preview-container {
    position: fixed;
    top: 50%;
    right: calc(420px + 20px); /* Position to the left of settings menu (420px width + 20px gap) */
    transform: translateY(-50%);
    background: #1e293b;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    width: 380px;
    z-index: 999; /* Below settings menu but above other content */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fish-design-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fish-design-preview-header h3 {
    margin: 0;
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fish-design-preview-content {
    padding: 16px;
}

.fish-design-preview-svg {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #1a2332 0%, #252837 100%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.fish-design-preview-info {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(102, 126, 234, 0.15);
}

.fish-design-preview-info p {
    margin: 0;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

/* Hidden state */
.fish-design-preview-container.hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(-20px);
    pointer-events: none;
}

/* Minimized state */
.fish-design-preview-minimized {
    position: fixed;
    top: 50%;
    right: calc(420px + 20px);
    transform: translateY(-50%);
    background: #1e293b;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 10px;
    z-index: 999;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.fish-design-preview-minimized:hover {
    background: #243147;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-50%) translateX(-2px);
}

.fish-design-preview-minimized span {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Toggle button for minimizing */
.fish-design-preview-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 10px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-left: auto;
}

.fish-design-preview-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .fish-design-preview-container {
        right: 20px;
        top: auto;
        bottom: 20px;
        transform: none;
        width: 320px;
    }
    
    .fish-design-preview-minimized {
        right: 20px;
        top: auto;
        bottom: 20px;
        transform: none;
        writing-mode: horizontal-tb;
    }
    
    .fish-design-preview-svg {
        height: 150px;
    }
}
.sea-floor-settings-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    z-index: 10000;
    animation: slideIn 0.3s ease;
    pointer-events: none;
}

@keyframes slideIn {
    from { 
        transform: translateX(100%);
    }
    to { 
        transform: translateX(0);
    }
}

.sea-floor-settings-panel {
    position: absolute;
    top: 100px; /* Below the bars */
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(26, 31, 46, 0.95);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-left: 1px solid rgba(102, 126, 234, 0.3);
    border-top-left-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    pointer-events: all;
}

.sea-floor-panel-handle {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 60px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 20px 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: all 0.2s ease;
}

.sea-floor-panel-handle::before {
    content: '⋮⋮';
    color: rgba(102, 126, 234, 0.6);
    font-size: 12px;
    letter-spacing: -2px;
}

.sea-floor-panel-handle:hover {
    background: rgba(102, 126, 234, 0.3);
    left: -22px;
}

.sea-floor-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.sea-floor-settings-header h2 {
    margin: 0;
    color: #667eea;
    font-size: 24px;
}

.sea-floor-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 28px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.sea-floor-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sea-floor-tabs {
    display: flex;
    padding: 0 20px;
    background: #161922;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    overflow-x: auto;
    gap: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
}

.sea-floor-tabs::-webkit-scrollbar {
    height: 4px;
}

.sea-floor-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.sea-floor-tabs::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 2px;
}

.sea-floor-tab {
    background: none;
    border: none;
    color: #64748b;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.sea-floor-tab:hover {
    color: #94a3b8;
}

.sea-floor-tab.active {
    color: #667eea;
}

.sea-floor-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #667eea;
}

.sea-floor-settings-content {
    flex: 1 1;
    overflow-y: auto;
    padding: 20px;
}

.sea-floor-tab-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sea-floor-setting {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sea-floor-setting > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sea-floor-setting label {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
}

.sea-floor-setting input[type="range"] {
    width: 100%;
    height: 6px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.sea-floor-setting input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #667eea;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sea-floor-setting input[type="range"]::-webkit-slider-thumb:hover {
    background: #7c8ff0;
    transform: scale(1.1);
}

.sea-floor-setting input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #667eea;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sea-floor-value {
    color: #667eea;
    font-size: 14px;
    font-weight: 700;
    min-width: 50px;
    text-align: right;
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.sea-floor-seed-controls {
    display: flex;
    gap: 10px;
}

.sea-floor-seed-controls input[type="number"] {
    flex: 1 1;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 14px;
}

.sea-floor-randomize-btn {
    padding: 8px 16px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 6px;
    color: #667eea;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sea-floor-randomize-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.sea-floor-color-group h3 {
    color: #667eea;
    font-size: 16px;
    margin-bottom: 15px;
}

.sea-floor-color-setting {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
}

.sea-floor-color-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sea-floor-color-controls input[type="color"] {
    width: 50px;
    height: 35px;
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 4px;
    background: none;
    cursor: pointer;
}

.sea-floor-color-hex {
    color: #94a3b8;
    font-size: 13px;
    font-family: monospace;
    min-width: 70px;
}

.sea-floor-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sea-floor-checkbox-label:hover {
    background: rgba(102, 126, 234, 0.1);
}

.sea-floor-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
}

.sea-floor-checkbox-label input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sea-floor-checkbox-label input[type="checkbox"]:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
}

.sea-floor-color-controls input[type="range"] {
    flex: 1 1;
    max-width: 150px;
}

.sea-floor-settings-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid rgba(102, 126, 234, 0.2);
}

.sea-floor-save-defaults-btn {
    padding: 10px 20px;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 6px;
    color: #667eea;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sea-floor-save-defaults-btn:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}

.sea-floor-save-json-btn {
    padding: 10px 20px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 6px;
    color: #22c55e;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sea-floor-save-json-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
}

.sea-floor-reset-btn {
    padding: 10px 20px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sea-floor-reset-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}


/* Scrollbar styling */
.sea-floor-settings-content::-webkit-scrollbar {
    width: 8px;
}

.sea-floor-settings-content::-webkit-scrollbar-track {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 4px;
}

.sea-floor-settings-content::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.2);
    border-radius: 4px;
}

.sea-floor-settings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.3);
}

.sea-floor-hint {
    font-size: 0.85em;
    color: rgba(102, 126, 234, 0.7);
    margin-top: 5px;
    font-style: italic;
}
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.confetti-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    pointer-events: none;
    will-change: transform;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.fb-fish-bar {
    position: relative; /* Changed from fixed to relative to stack properly */
    top: 0; /* No offset needed when relative */
    left: 0;
    right: 0;
    width: 100vw; /* Full viewport width */
    height: 40px; /* Same height as NewsTicker */
    background-color: #0f1419; /* Fallback base color */
    /* box-shadow controlled dynamically via settings */
    /* border-bottom controlled dynamically via settings */
    overflow: hidden; /* Clip content that extends beyond the container */
    z-index: 999; /* Below newsticker's z-index of 1000 */
    will-change: transform; /* GPU acceleration hint */
    transform: translateZ(0); /* Force GPU layer */
    -webkit-transform: translateZ(0); /* Safari GPU layer */
    contain: layout style paint; /* Optimize repaints */
}

.fb-fish-bar-svg {
    width: 100vw; /* Full viewport width */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* Allow clicks to pass through to elements below */
}

/* Fish ticker text styles */
.fb-fish-ticker-text {
    animation: fb-tickerFadeIn 1s ease-in;
}

@keyframes fb-tickerFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Ticker cheer button - exactly matching NewsTicker styles */
.fb-ticker-cheer-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #ef4444 !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    border-radius: 4px !important;
    outline: none !important;
    pointer-events: auto !important; /* Ensure button is clickable */
    position: relative !important;
    z-index: 100 !important; /* Higher z-index to ensure it's above everything */
}

.fb-ticker-cheer-btn:focus {
    outline: none;
}

.fb-ticker-cheer-btn:focus-visible {
    outline: 2px solid rgba(239, 68, 68, 0.3);
    outline-offset: 2px;
}

.fb-ticker-cheer-btn:-moz-focusring {
    outline: none;
}

.fb-ticker-cheer-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

.fb-ticker-cheer-btn:active {
    transform: scale(0.95);
    outline: none;
}

.fb-ticker-cheer-btn svg {
    display: block !important;
    pointer-events: none !important;
}

/* Celebrating animation for confetti burst */
.fb-ticker-cheer-btn.fb-celebrating {
    animation: fb-celebrate 0.5s ease;
}

/* Base heart icon styles */
.fb-heart-icon {
    fill: none !important;
    stroke: #ef4444 !important;
    stroke-width: 2 !important;
}

/* Filled heart state */
.fb-heart-icon.cheer-heart-cheered {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

/* Heart SVG animation - gold glow to solid red */
.fb-heart-celebrating {
    animation: fb-heartGoldToRed 1.5s ease-out forwards !important;
    animation: fb-heartGoldToRed var(--heart-glow-duration, 1.5s) ease-out forwards !important;
    /* Apply glow effect to the whole SVG */
    filter: drop-shadow(0 0 20px #fbbf24) !important;
}

/* Target the path element within the celebrating SVG */
.fb-heart-celebrating path {
    animation: fb-heartPathGoldToRed 1.5s ease-out forwards !important;
    animation: fb-heartPathGoldToRed var(--heart-glow-duration, 1.5s) ease-out forwards !important;
}

@keyframes fb-heartGoldToRed {
    0% {
        filter: drop-shadow(0 0 20px #fbbf24) drop-shadow(0 0 40px #fbbf24) !important;
    }
    30% {
        filter: drop-shadow(0 0 30px #fbbf24) drop-shadow(0 0 50px rgba(251, 191, 36, 0.8)) !important;
    }
    70% {
        filter: drop-shadow(0 0 20px #ef4444) drop-shadow(0 0 40px rgba(239, 68, 68, 0.8)) !important;
    }
    100% {
        filter: drop-shadow(0 0 10px #ef4444) !important;
    }
}

@keyframes fb-heartPathGoldToRed {
    0% {
        fill: #fbbf24 !important;
        stroke: #fbbf24 !important;
        stroke-width: 2 !important;
    }
    30% {
        fill: rgba(251, 191, 36, 0.4) !important;
        stroke: #fbbf24 !important;
        stroke-width: 2 !important;
    }
    70% {
        fill: rgba(239, 68, 68, 0.7) !important;
        stroke: #ef4444 !important;
        stroke-width: 2 !important;
    }
    100% {
        fill: #ef4444 !important;
        stroke: #ef4444 !important;
        stroke-width: 2 !important;
    }
}

@keyframes fb-celebrate {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.3) rotate(-5deg);
    }
    50% {
        transform: scale(1.5) rotate(5deg);
    }
    75% {
        transform: scale(1.3) rotate(-3deg);
    }
}

/* Clickable session link styles */
.fb-ticker-session-link {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.fb-ticker-session-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Shimmer effect removed for performance optimization */

/* Text celebrating glow effect - matches NewsTicker */
.fb-ticker-text-celebrating {
    animation: fb-textCelebrationGlow 2s ease-out;
    animation: fb-textCelebrationGlow var(--text-glow-duration, 2s) ease-out;
}

@keyframes fb-textCelebrationGlow {
    0% {
        color: #f8fafc;
        text-shadow: none;
    }
    10% {
        color: rgba(255, 255, 255, 0.2);
        text-shadow: 0 0 calc(20px * 0.5) #FFD700, 
                     0 0 20px #FFD700, 
                     0 0 calc(20px * 1.5) #FFD700;
        text-shadow: 0 0 calc(var(--text-glow-intensity, 20px) * 0.5) var(--text-glow-primary, #FFD700), 
                     0 0 var(--text-glow-intensity, 20px) var(--text-glow-primary, #FFD700), 
                     0 0 calc(var(--text-glow-intensity, 20px) * 1.5) var(--text-glow-primary, #FFD700);
    }
    30% {
        color: #FFD700;
        color: var(--text-glow-primary, #FFD700);
        text-shadow: 0 0 20px #FFD700, 
                     0 0 calc(20px * 2) #FF69B4, 
                     0 0 calc(20px * 3) #00CED1;
        text-shadow: 0 0 var(--text-glow-intensity, 20px) var(--text-glow-primary, #FFD700), 
                     0 0 calc(var(--text-glow-intensity, 20px) * 2) var(--text-glow-secondary, #FF69B4), 
                     0 0 calc(var(--text-glow-intensity, 20px) * 3) var(--text-glow-tertiary, #00CED1);
    }
    50% {
        color: #ffffff;
        text-shadow: 0 0 calc(20px * 0.75) #FFD700, 
                     0 0 calc(20px * 1.5) #FF69B4, 
                     0 0 calc(20px * 2.25) #00CED1;
        text-shadow: 0 0 calc(var(--text-glow-intensity, 20px) * 0.75) var(--text-glow-primary, #FFD700), 
                     0 0 calc(var(--text-glow-intensity, 20px) * 1.5) var(--text-glow-secondary, #FF69B4), 
                     0 0 calc(var(--text-glow-intensity, 20px) * 2.25) var(--text-glow-tertiary, #00CED1);
    }
    80% {
        color: #f8fafc;
        text-shadow: 0 0 calc(20px * 0.25) rgba(255, 215, 0, 0.5);
        text-shadow: 0 0 calc(var(--text-glow-intensity, 20px) * 0.25) var(--text-glow-primary-alpha, rgba(255, 215, 0, 0.5));
    }
    100% {
        color: #f8fafc;
        text-shadow: none;
    }
}

/* Ticker content container */
.fb-fish-ticker-content {
    pointer-events: auto !important; /* Ensure content is clickable */
    z-index: 50 !important; /* Above the SVG layer */
    will-change: transform; /* GPU acceleration for smooth movement */
    transform: translateZ(0); /* Force GPU layer */
    -webkit-transform: translateZ(0); /* Safari GPU layer */
    backface-visibility: hidden; /* Prevent flicker */
    -webkit-backface-visibility: hidden; /* Safari flicker prevention */
    transition: none; /* No transition for position updates */
    contain: layout style; /* Optimize repaints */
    transform-style: preserve-3d; /* Better 3D performance */
}

/* Smooth ticker scrolling animation */
.fb-ticker-scroll {
    animation: fb-ticker-scroll 30s linear infinite;
    animation: fb-ticker-scroll var(--ticker-duration, 30s) linear infinite;
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

@keyframes fb-ticker-scroll {
    from {
        transform: translate3d(100vw, -50%, 0);
    }
    to {
        transform: translate3d(calc(-100% - 100px), -50%, 0);
    }
}

/* Pause on hover */
.fb-ticker-scroll:hover {
    animation-play-state: paused;
}
/* Cheer Animation Styles - All prefixed with cheer- to avoid conflicts */

/* Button celebrating state */
.cheer-btn-celebrating {
    animation: cheer-button-bounce 0.5s ease !important;
}

/* Heart SVG celebrating - apply to SVG element */
.cheer-heart-celebrating {
    animation: cheer-heart-glow 1.5s ease-out forwards !important;
    animation: cheer-heart-glow var(--heart-glow-duration, 1.5s) ease-out forwards !important;
    filter: drop-shadow(0 0 25px #fbbf24) !important;
}

/* Heart path animation - apply to path element */
.cheer-heart-celebrating path {
    animation: cheer-heart-fill 1.5s ease-out forwards !important;
    animation: cheer-heart-fill var(--heart-glow-duration, 1.5s) ease-out forwards !important;
    transform-origin: center !important;
    fill: #ef4444 !important; /* Ensure heart is filled */
}

/* Text celebrating state */
.cheer-text-celebrating {
    animation: cheer-text-glow 2s ease-out !important;
    animation: cheer-text-glow var(--text-glow-duration, 2s) ease-out !important;
}

/* Button bounce animation */
@keyframes cheer-button-bounce {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.3) rotate(-5deg);
    }
    50% {
        transform: scale(1.5) rotate(5deg);
    }
    75% {
        transform: scale(1.3) rotate(-3deg);
    }
}

/* Heart glow animation - for the SVG container */
@keyframes cheer-heart-glow {
    0% {
        filter: drop-shadow(0 0 15px #fbbf24) 
                drop-shadow(0 0 30px #fbbf24) 
                drop-shadow(0 0 45px rgba(251, 191, 36, 0.6)) !important;
    }
    25% {
        filter: drop-shadow(0 0 20px #fbbf24) 
                drop-shadow(0 0 40px #fbbf24) 
                drop-shadow(0 0 60px rgba(251, 191, 36, 0.8)) !important;
    }
    50% {
        filter: drop-shadow(0 0 25px #ff69b4) 
                drop-shadow(0 0 50px #ff69b4) 
                drop-shadow(0 0 75px rgba(255, 105, 180, 0.6)) !important;
    }
    75% {
        filter: drop-shadow(0 0 20px #ef4444) 
                drop-shadow(0 0 40px #ef4444) 
                drop-shadow(0 0 60px rgba(239, 68, 68, 0.6)) !important;
    }
    100% {
        filter: drop-shadow(0 0 8px #ef4444) 
                drop-shadow(0 0 16px rgba(239, 68, 68, 0.4)) !important;
    }
}

/* Heart fill animation - for the path element */
@keyframes cheer-heart-fill {
    0% {
        fill: rgba(251, 191, 36, 0.3) !important;
        stroke: #fbbf24 !important;
        stroke-width: 2px !important;
        transform: scale(1) !important;
    }
    20% {
        fill: rgba(251, 191, 36, 0.5) !important;
        stroke: #fbbf24 !important;
        stroke-width: 2.5px !important;
        transform: scale(1.1) !important;
    }
    40% {
        fill: rgba(251, 191, 36, 0.7) !important;
        stroke: #fbbf24 !important;
        stroke-width: 2px !important;
        transform: scale(1.2) !important;
    }
    60% {
        fill: rgba(251, 191, 36, 1.0) !important;
        stroke: #fbbf24 !important;
        stroke-width: 3px !important;
        transform: scale(1.15) !important;
    }
    80% {
        fill: rgba(239, 68, 68, 0.9) !important;
        stroke: #ef4444 !important;
        stroke-width: 2px !important;
        transform: scale(1.1) !important;
    }
    100% {
        fill: #ef4444 !important;
        stroke: #ef4444 !important;
        stroke-width: 2px !important;
        transform: scale(1) !important;
    }
}

/* Text glow animation */
@keyframes cheer-text-glow {
    0% {
        color: inherit;
        text-shadow: none;
    }
    10% {
        color: #fbbf24;
        text-shadow: 0 0 10px #fbbf24, 
                     0 0 20px #fbbf24, 
                     0 0 30px rgba(251, 191, 36, 0.8);
    }
    30% {
        color: #FFD700;
        text-shadow: 0 0 15px #FFD700, 
                     0 0 30px #FFD700, 
                     0 0 45px rgba(255, 215, 0, 0.8),
                     0 0 60px rgba(255, 215, 0, 0.4);
    }
    50% {
        color: #FF69B4;
        text-shadow: 0 0 15px #FF69B4, 
                     0 0 30px #FF69B4, 
                     0 0 45px rgba(255, 105, 180, 0.8),
                     0 0 60px rgba(255, 105, 180, 0.4);
    }
    70% {
        color: #00CED1;
        text-shadow: 0 0 10px #00CED1, 
                     0 0 20px #00CED1, 
                     0 0 30px rgba(0, 206, 209, 0.6);
    }
    90% {
        color: #ef4444;
        text-shadow: 0 0 5px #ef4444, 
                     0 0 10px rgba(239, 68, 68, 0.5);
    }
    100% {
        color: inherit;
        text-shadow: none;
    }
}

/* Additional animation for pulsing effect */
@keyframes cheer-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Ensure animations override any existing styles */
.cheer-active {
    animation-play-state: running !important;
}

/* Special class to ensure heart animation visibility */
.cheer-heart-visible {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Ensure cheered hearts stay filled */
.cheer-heart-cheered {
    fill: #ef4444 !important;
}

.cheer-heart-cheered path {
    fill: #ef4444 !important;
}

/* Webkit specific keyframes for Safari compatibility */
.writing-session-bar {
    width: -webkit-fit-content;
    width: fit-content; /* Size exactly to content */
    height: 100%;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    display: inline-flex; /* Inline-flex prevents stretching */
    align-items: center;
    gap: 15px; /* Same gap as between detail items */
    padding: 0 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    white-space: nowrap; /* Prevent text wrapping */
}

.writing-session-bar-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto; /* Don't force to fill space */
    min-width: 0; /* Allow content to shrink */
    overflow: hidden;
}

.writing-session-bar-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.writing-session-bar-status-indicator {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

.writing-session-bar-status-indicator.paused {
    background: #f59e0b;
    animation: pulse-dot-paused 3s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

@keyframes pulse-dot-paused {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

.writing-session-bar-status-text {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.writing-session-bar-details {
    display: flex;
    gap: 15px;
    flex-shrink: 0; /* Don't shrink details */
}

.writing-session-bar-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.writing-session-bar-detail-label {
    opacity: 0.7;
    font-size: 12px;
}

.writing-session-bar-detail-value {
    font-weight: 500;
}

.writing-session-bar-detail-value.writing-session-bar-word-count {
    color: #fbbf24;
    font-weight: 600;
}

.writing-session-bar-timer {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Don't shrink timer */
}

.writing-session-bar-timer-display {
    font-size: 20px;
    font-weight: 600;
    font-family: 'SF Mono', 'Inter', 'Inconsolata', monospace;
    letter-spacing: 1px;
}

.writing-session-bar-controls {
    display: flex;
    gap: 5px; /* Reduced gap between buttons */
    flex-shrink: 0; /* Don't shrink controls */
}

.writing-session-bar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.writing-session-bar-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.writing-session-bar-btn:active {
    transform: scale(0.95);
}

.writing-session-bar-btn svg {
    display: block;
}

.writing-session-bar-play-btn:hover {
    background: rgba(16, 185, 129, 0.2);
}

.writing-session-bar-pause-btn:hover {
    background: rgba(251, 191, 36, 0.2);
}

.writing-session-bar-end-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Mobile layout below 1000px - matching blueprint */
.writing-session-bar.mobile-layout {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 6px 12px;
    gap: 0;
    border-right: none;
    min-height: 48px;
}

/* Left side - two-line layout */
.writing-session-bar-left {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding-right: 15px;
}

.writing-session-bar-left-line1,
.writing-session-bar-left-line2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}

.writing-session-bar-left-line1 {
    margin-bottom: 2px;
}

/* Right side - single line with timer and controls */
.writing-session-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.writing-session-bar.mobile-layout .writing-session-bar-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.writing-session-bar.mobile-layout .writing-session-bar-status-indicator {
    width: 6px;
    height: 6px;
}

.writing-session-bar.mobile-layout .writing-session-bar-status-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.writing-session-bar.mobile-layout .writing-session-bar-detail-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    white-space: nowrap;
}

.writing-session-bar.mobile-layout .writing-session-bar-detail-label {
    opacity: 0.7;
    font-size: 10px;
}

.writing-session-bar.mobile-layout .writing-session-bar-detail-value {
    font-weight: 500;
    font-size: 11px;
}

.writing-session-bar.mobile-layout .writing-session-bar-detail-value.writing-session-bar-word-count {
    color: #fbbf24;
    font-weight: 600;
}

.writing-session-bar.mobile-layout .writing-session-bar-timer {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.writing-session-bar.mobile-layout .writing-session-bar-timer-display {
    font-size: 28px;
    font-weight: 600;
    font-family: 'SF Mono', 'Inter', 'Inconsolata', monospace;
    letter-spacing: 2px;
}

.writing-session-bar.mobile-layout .writing-session-bar-controls {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.writing-session-bar.mobile-layout .writing-session-bar-btn {
    width: 32px;
    height: 32px;
}

/* Small mobile layout below 768px - three-line design */
.writing-session-bar.small-mobile-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 15px;
    border-right: none;
    min-height: 64px;
    flex-wrap: nowrap;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-left-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

/* Line 1 - Status */
.writing-session-bar.small-mobile-layout .writing-session-bar-status-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-status-indicator {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-status-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Lines 2 and 3 - Info */
.writing-session-bar.small-mobile-layout .writing-session-bar-info-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    white-space: nowrap;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-info-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-label {
    opacity: 0.7;
    margin-right: 4px;
    flex-shrink: 0;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-divider {
    display: none; /* Remove dividers for cleaner look */
}

.writing-session-bar.small-mobile-layout .writing-session-bar-word-count {
    color: #fbbf24;
    font-weight: 600;
}

/* Right section - Timer and controls aligned right */
.writing-session-bar.small-mobile-layout .writing-session-bar-right-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-timer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-timer-display {
    font-size: 32px;
    font-weight: 600;
    font-family: 'SF Mono', 'Inter', 'Inconsolata', monospace;
    letter-spacing: 1px;
    white-space: nowrap;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-controls {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
}

.writing-session-bar.small-mobile-layout .writing-session-bar-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    /* Bar naturally adjusts based on content */
    
    .writing-session-bar-details {
        gap: 15px;
    }
    
    .writing-session-bar-detail {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .writing-session-bar {
        padding: 0 15px;
    }
    
    .writing-session-bar-info {
        gap: 15px;
    }
    
    .writing-session-bar-status {
        display: none;
    }
    
    .writing-session-bar-details {
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .writing-session-bar-detail {
        font-size: 12px;
    }
    
    .writing-session-bar-timer-display {
        font-size: 16px;
    }
    
    .writing-session-bar-btn {
        width: 32px;
        height: 32px;
    }
    
    /* Mobile layout specific adjustments */
    .writing-session-bar.mobile-layout .writing-session-bar-detail-value {
        font-size: 10px;
    }
    
    .writing-session-bar.mobile-layout .writing-session-bar-detail-label {
        font-size: 9px;
    }
    
    .writing-session-bar.mobile-layout .writing-session-bar-timer-display {
        font-size: 22px;
    }
    
    .writing-session-bar.mobile-layout .writing-session-bar-btn {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .writing-session-bar.small-mobile-layout {
        padding: 8px 10px;
        min-height: 60px;
    }
    
    .writing-session-bar.small-mobile-layout .writing-session-bar-status-text {
        font-size: 11px;
    }
    
    .writing-session-bar.small-mobile-layout .writing-session-bar-info-line {
        font-size: 10px;
    }
    
    .writing-session-bar.small-mobile-layout .writing-session-bar-info-item {
        font-size: 10px;
    }
    
    .writing-session-bar.small-mobile-layout .writing-session-bar-timer-display {
        font-size: 28px;
    }
    
    .writing-session-bar.small-mobile-layout .writing-session-bar-btn {
        width: 34px;
        height: 34px;
    }
}
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 14px;
    background: #f0f;
    pointer-events: none;
}

.confetti-piece.confetti-circle {
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.celebration-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px 40px;
    border-radius: 20px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.2),
        0 0 60px rgba(102, 126, 234, 0.4);
    pointer-events: none;
    z-index: 10000;
}

@media (max-width: 768px) {
    .celebration-message {
        font-size: 32px;
        padding: 15px 30px;
    }
}
.live-writing-bar {
    position: relative;
    width: 100%;
    height: 40px;
    background: #242939;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.live-writing-bar.with-session {
    display: flex;
    justify-content: space-between;
}

/* When ticker is hidden, keep session bar on the left */
.live-writing-bar.ticker-hidden.with-session {
    justify-content: flex-start;
}

.live-writing-bar.ticker-hidden .writing-session-bar {
    flex: 0 0 auto; /* Size based on content only */
    min-width: -webkit-min-content;
    min-width: min-content;
    max-width: 75%;
}

/* When writing session is active, make room for the power button */
.live-writing-bar.with-session .writing-session-bar {
    flex: 0 0 auto; /* Size based on content only */
    min-width: -webkit-min-content;
    min-width: min-content; /* Shrink to minimum content width */
    max-width: 75%; /* Maximum width */
}

.live-writing-bar.with-session .newsticker-container {
    flex: 1 1;
    margin-right: 50px; /* Leave space for power button on the right */
    min-width: 200px; /* Ensure ticker has minimum space */
}

/* News ticker without session also needs space for power button */
.live-writing-bar:not(.with-session) .newsticker-container {
    margin-right: 50px; /* Leave space for power button on the right */
}

/* Remove margin adjustments since bar is not fixed positioned */

/* Power button styles removed - now handled in admin settings */

/* Hide ticker when off */
.live-writing-bar.ticker-hidden:not(.with-session) {
    height: 40px;
    justify-content: flex-end;
}

.live-writing-bar.ticker-hidden .news-ticker,
.live-writing-bar.ticker-hidden .newsticker-container {
    display: none;
}

/* Mobile layout for screens below 1500px */
@media (max-width: 1500px) {
    .live-writing-bar.mobile-layout {
        justify-content: center;
    }
    
    .live-writing-bar.mobile-layout.with-session .writing-session-bar {
        flex: 1 1;
        max-width: 100%;
        width: 100%;
    }
    
    .live-writing-bar.mobile-layout .newsticker-container {
        display: none;
    }
    
    /* Hide the empty bar when there's no session */
    .live-writing-bar:not(.with-session) {
        display: none;
    }
}

/* Two-line session bar below 1000px */
@media (max-width: 1000px) {
    .live-writing-bar {
        height: auto;
        min-height: 80px;
    }
    
    .live-writing-bar.with-session {
        padding: 0;
    }
    
    .live-writing-bar.with-session .writing-session-bar {
        width: 100%;
        max-width: 100%;
        flex: 1 1;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .live-writing-bar {
        height: 60px;
        flex-direction: column;
    }
    
}
/* Search Component Styles */
.search-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    z-index: 99999 !important;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    animation: searchOverlayFadeIn 0.2s ease-out;
    pointer-events: all !important;
}

@keyframes searchOverlayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.search-modal {
    position: relative !important;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: searchModalSlideIn 0.2s ease-out;
    overflow: hidden;
    z-index: 100000 !important;
}

@keyframes searchModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Search Header */
.search-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.search-input-container {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s;
}

.search-input-container:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
    color: #64748b;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.search-input {
    flex: 1 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: #1e293b;
    background: transparent;
}

.search-input::placeholder {
    color: #94a3b8;
}

.search-clear {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    margin-left: 0.5rem;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background-color 0.2s;
}

.search-clear:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

.search-close {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}

.search-close:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

/* Search Results */
.search-results {
    flex: 1 1;
    overflow-y: auto;
    max-height: 60vh;
}

.search-loading {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}

.search-section {
    padding: 1rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.search-section:last-child {
    border-bottom: none;
}

.search-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 0 0 0.75rem 0;
    padding: 0 1.5rem;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.15s;
    border-left: 3px solid transparent;
}

.search-item:hover,
.search-item.selected {
    background-color: #f8fafc;
    border-left-color: #3b82f6;
}

.search-item.selected {
    background-color: #eff6ff;
}

.search-item-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-item-content {
    flex: 1 1;
    min-width: 0;
}

.search-item-title {
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 0.125rem;
    line-height: 1.4;
    word-break: break-word;
}

.search-item-meta {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
}

.search-highlight {
    background-color: #fef3c7;
    color: #d97706;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    font-weight: 500;
}

/* No Results */
.search-no-results {
    padding: 3rem 1.5rem;
    text-align: center;
}

.no-results-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-results-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.no-results-text {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Search Footer */
.search-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.search-shortcuts {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #64748b;
}

.shortcut {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.shortcut kbd {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    font-size: 0.7rem;
    font-family: inherit;
    color: #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-overlay {
        padding-top: 5vh;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .search-modal {
        width: 100%;
        max-height: 85vh;
    }

    .search-header {
        padding: 1rem;
    }

    .search-input-container {
        padding: 0.625rem 0.875rem;
    }

    .search-input {
        font-size: 0.875rem;
    }

    .search-section-title {
        padding: 0 1rem;
    }

    .search-item {
        padding: 0.625rem 1rem;
    }

    .search-footer {
        padding: 0.75rem 1rem;
    }

    .search-shortcuts {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .search-overlay {
        padding-top: 2vh;
    }

    .search-modal {
        border-radius: 8px;
    }

    .search-item-title {
        font-size: 0.875rem;
    }

    .search-item-meta {
        font-size: 0.7rem;
    }
}

/* Dark mode support - explicit dark theme */
[data-theme="dark"] .search-modal {
    background: #1e293b;
    color: #f1f5f9;
}

[data-theme="dark"] .search-header {
    background: #1E1F26;
    border-bottom-color: #334155;
}

[data-theme="dark"] .search-input-container {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

[data-theme="dark"] .search-input-container:focus-within {
    border-color: #60a5fa;
}

[data-theme="dark"] .search-input {
    color: #f1f5f9;
}

[data-theme="dark"] .search-input::placeholder {
    color: #64748b;
}

[data-theme="dark"] .search-clear:hover,
[data-theme="dark"] .search-close:hover {
    background-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .search-section {
    border-bottom-color: #334155;
}

[data-theme="dark"] .search-item:hover,
[data-theme="dark"] .search-item.selected {
    background-color: #334155;
}

[data-theme="dark"] .search-item.selected {
    background-color: #1e40af;
}

[data-theme="dark"] .search-item-title {
    color: #f1f5f9;
}

[data-theme="dark"] .search-footer {
    background: #1E1F26;
    border-top-color: #334155;
}

[data-theme="dark"] .shortcut kbd {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

[data-theme="dark"] .search-highlight {
    background-color: #fbbf24;
    color: #92400e;
}

/* System theme support - only applies when system is in dark mode */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .search-modal {
        background: #1e293b;
        color: #f1f5f9;
    }

    [data-theme="system"] .search-header {
        background: #1E1F26;
        border-bottom-color: #334155;
    }

    [data-theme="system"] .search-input-container {
        background: #334155;
        border-color: #475569;
        color: #f1f5f9;
    }

    [data-theme="system"] .search-input-container:focus-within {
        border-color: #60a5fa;
    }

    [data-theme="system"] .search-input {
        color: #f1f5f9;
    }

    [data-theme="system"] .search-input::placeholder {
        color: #64748b;
    }

    [data-theme="system"] .search-clear:hover,
    [data-theme="system"] .search-close:hover {
        background-color: #334155;
        color: #f1f5f9;
    }

    [data-theme="system"] .search-section {
        border-bottom-color: #334155;
    }

    [data-theme="system"] .search-item:hover,
    [data-theme="system"] .search-item.selected {
        background-color: #334155;
    }

    [data-theme="system"] .search-item.selected {
        background-color: #1e40af;
    }

    [data-theme="system"] .search-item-title {
        color: #f1f5f9;
    }

    [data-theme="system"] .search-footer {
        background: #1E1F26;
        border-top-color: #334155;
    }

    [data-theme="system"] .shortcut kbd {
        background: #334155;
        border-color: #475569;
        color: #f1f5f9;
    }

    [data-theme="system"] .search-highlight {
        background-color: #fbbf24;
        color: #92400e;
    }
}

/* Electron-specific adjustments - FIXED DETECTION */
.electron-app .search-overlay {
    padding-top: 15vh; /* Account for Electron title bar */
}

/* Comprehensive search input styling - override ALL possible outline sources */
/* This matches the fix applied to the group detail search bar */
.search-header .search-input-container .search-input {
    flex: 1 1;
    border: none !important;
    outline: none !important;
    font-size: 1rem;
    color: #1e293b !important;
    background: transparent !important;
    box-shadow: none !important;
    /* Remove webkit appearance */
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Remove any browser default focus ring */
    -webkit-focus-ring-color: transparent !important;
}

.search-header .search-input-container .search-input:focus,
.search-header .search-input-container .search-input:focus-visible,
.search-header .search-input-container .search-input:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    /* Remove webkit focus ring */
    -webkit-focus-ring-color: transparent !important;
    /* Remove any browser accessibility outlines */
    outline-color: transparent !important;
    outline-width: 0 !important;
    outline-style: none !important;
}

/* Ensure the container handles all the visual styling */
.search-header .search-input-container {
    flex: 1 1;
    position: relative;
    display: flex;
    align-items: center;
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s;
    outline: none !important;
    box-shadow: none !important;
}

.search-header .search-input-container:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Comprehensive dark theme search input styling */
[data-theme="dark"] .search-header .search-input-container {
    background: #334155 !important;
    border: 2px solid #475569 !important;
    color: #f1f5f9 !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .search-header .search-input-container:focus-within {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
    outline: none !important;
}

[data-theme="dark"] .search-header .search-input-container .search-input {
    color: #f1f5f9 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-focus-ring-color: transparent !important;
}

[data-theme="dark"] .search-header .search-input-container .search-input:focus,
[data-theme="dark"] .search-header .search-input-container .search-input:focus-visible,
[data-theme="dark"] .search-header .search-input-container .search-input:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-focus-ring-color: transparent !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
    outline-style: none !important;
}

/* System theme comprehensive styling */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .search-header .search-input-container {
        background: #334155 !important;
        border: 2px solid #475569 !important;
        color: #f1f5f9 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    [data-theme="system"] .search-header .search-input-container:focus-within {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
        outline: none !important;
    }

    [data-theme="system"] .search-header .search-input-container .search-input {
        color: #f1f5f9 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-focus-ring-color: transparent !important;
    }

    [data-theme="system"] .search-header .search-input-container .search-input:focus,
    [data-theme="system"] .search-header .search-input-container .search-input:focus-visible,
    [data-theme="system"] .search-header .search-input-container .search-input:active {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-focus-ring-color: transparent !important;
        outline-color: transparent !important;
        outline-width: 0 !important;
        outline-style: none !important;
    }
} 
/* Wrapper for navigation with ticker */
.navigation-with-ticker {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #1E1F26;
    background-color: var(--navbar-bg, #1E1F26);
}

/* When admin navigation is present, adjust top position */
body.scrivia-admin-navigation-present .navigation-with-ticker {
    top: 50px; /* Height of admin bar */
}

/* Navigation should not be sticky when wrapped */
.navigation-with-ticker .navigation {
    position: relative;
    top: auto;
    top: initial;
    z-index: auto;
    z-index: initial;
}

/* Electron app specific adjustments */
.electron-app .navigation-with-ticker {
    position: relative;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .navigation-with-ticker {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    
    body.scrivia-admin-navigation-present .navigation-with-ticker {
        top: 50px;
    }
}
.auth-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
  background-color: #1E1F26;
  background-image: linear-gradient(135deg, #1E1F26 0%, #1a2332 100%);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.welcome-banner {
  width: 100%;
  max-width: 400px;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.auth-header h2 {
  margin-bottom: 0.1rem;
  color: var(--text-primary);
  font-size: 1.5rem;
}

.auth-header p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.auth-card h2 {
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  text-align: center;
  font-size: 1.5rem;
}

.form-group {
  margin-bottom: 0.75rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* More specific input styles for invite request form */
.auth-form-container .form-group input,
.auth-form .form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background-color: #ffffff;
  color: #000000 !important;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.auth-form-container .form-group input::placeholder,
.auth-form .form-group input::placeholder {
  color: #9ca3af !important;
  opacity: 1;
}

.auth-form-container .form-group input:focus,
.auth-form .form-group input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background-color: #ffffff;
  color: #000000 !important;
}

/* Remember me checkbox styles */
.form-group.remember-me {
  margin-bottom: 1rem;
}

.checkbox-label {
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary);
  -webkit-user-select: none;
          user-select: none;
  width: 100%;
  min-width: 160px; /* Ensure checkbox label has adequate width */
}

.checkbox-label input[type="checkbox"] {
  display: none !important;
}

.checkmark {
  position: relative;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  margin-right: 1rem;
  border: 2px solid #ccc !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease;
  flex-shrink: 0 !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  box-sizing: border-box !important;
  vertical-align: top;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
  content: "✓";
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  display: block !important;
}

.checkbox-label:hover .checkmark {
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
}

.auth-error {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: var(--error-color);
  color: white;
  border-radius: 4px;
  font-size: 0.875rem;
}

.error-message {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: var(--error-color);
  color: white;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Auth button styles */
.auth-btn {
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.auth-btn.primary {
  background-color: #3b82f6;
  color: white;
  border: none;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.auth-btn.primary:hover:not(:disabled) {
  background-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.auth-btn:disabled {
  background-color: var(--border-color);
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

.btn-primary:disabled {
  background-color: var(--border-color);
  cursor: not-allowed;
}

/* Auth footer styles for signup links */
.auth-footer {
  margin-top: 1.25rem;
  text-align: center;
}

.auth-footer p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.auth-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.5rem; /* Add space between text and link */
}

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

.auth-links {
  margin-top: 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.auth-links a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}

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

/* Electron-specific styles */
.electron-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--bg-primary);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.electron-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--accent-color);
  color: white;
  border-radius: 4px;
  font-weight: 500;
}

.connection-status {
  font-size: 0.75rem;
  font-weight: 500;
}

.connection-status.connected {
  color: #22c55e; /* green */
}

.connection-status.error {
  color: #ef4444; /* red */
}

.connection-status.checking {
  color: var(--text-secondary);
}

.auth-btn.secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  margin-top: 0.5rem;
}

.auth-btn.secondary:hover:not(:disabled) {
  background-color: var(--bg-primary);
  border-color: var(--accent-color);
}

.debug-info {
  margin-top: 1rem;
  text-align: center;
}

.debug-info small {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

/* Welcome Screen (ws-) prefixed styles */
.ws-auth-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
  background-color: #1E1F26;
  background-image: linear-gradient(135deg, #1E1F26 0%, #1a2332 100%);
}

.ws-welcome-banner {
  width: 100%;
  max-width: 400px;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ws-banner-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.ws-auth-card {
  width: 100%;
  max-width: 400px;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ws-auth-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.ws-auth-header h2 {
  margin-bottom: 0.1rem;
  color: var(--text-primary);
  font-size: 1.5rem;
}

.ws-auth-header p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.ws-form-group {
  margin-bottom: 0.75rem;
}

.ws-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.ws-form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #f8fafc;
  color: #1e293b;
  font-size: 1rem;
  transition: all 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ws-form-group input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: 2px solid rgba(59, 130, 246, 0.2);
}

.ws-form-group input:hover {
  border-color: #9ca3af;
}

.ws-form-group.ws-remember-me {
  margin-bottom: 1rem;
}

.ws-checkbox-label {
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary);
  -webkit-user-select: none;
          user-select: none;
  width: 100%;
  min-width: 160px;
}

.ws-checkbox-label input[type="checkbox"] {
  display: none !important;
}

.ws-checkmark {
  position: relative;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  margin-right: 1rem;
  border: 2px solid #ccc !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease;
  flex-shrink: 0 !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  box-sizing: border-box !important;
  vertical-align: top;
}

.ws-checkbox-label input[type="checkbox"]:checked + .ws-checkmark {
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.ws-checkbox-label input[type="checkbox"]:checked + .ws-checkmark::after {
  content: "✓";
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  display: block !important;
}

.ws-checkbox-label:hover .ws-checkmark {
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
}

.ws-btn-primary {
  width: 100%;
  padding: 0.75rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 1rem;
}

.ws-btn-primary:hover {
  background-color: #2563eb;
}

.ws-btn-primary:disabled {
  background-color: var(--border-color);
  cursor: not-allowed;
}

.ws-auth-footer {
  margin-top: 1.25rem;
  text-align: center;
}

.ws-auth-footer p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.ws-auth-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.5rem;
}

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

/* Enhanced Authentication Styles */

/* Email Verification Notice */
.email-verification-notice {
    text-align: center;
    padding: 32px;
    background: #f8f9ff;
    border: 1px solid #e3f2fd;
    border-radius: 12px;
    margin-bottom: 24px;
}

.notice-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.email-verification-notice h3 {
    margin: 0 0 12px 0;
    color: #495057;
    font-size: 1.3rem;
}

.email-verification-notice p {
    margin: 0 0 24px 0;
    color: #6c757d;
    line-height: 1.5;
}

.btn-resend {
    padding: 12px 24px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.btn-resend:hover:not(:disabled) {
    background: #5a6fd8;
    transform: translateY(-1px);
}

.btn-resend:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
}

/* Registration Success */
.registration-success {
    text-align: center;
    padding: 32px;
}

.success-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.registration-success h2 {
    margin: 0 0 16px 0;
    color: #28a745;
    font-size: 1.8rem;
    font-weight: 600;
}

.registration-success p {
    margin: 0 0 16px 0;
    color: #495057;
    line-height: 1.5;
}

.next-steps {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 24px 0;
    text-align: left;
}

.next-steps h3 {
    margin: 0 0 12px 0;
    color: #495057;
    font-size: 1.1rem;
}

.next-steps ol {
    margin: 0;
    padding-left: 20px;
    color: #6c757d;
}

.next-steps li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.success-actions {
    margin: 32px 0 24px 0;
}

.help-text {
    margin-top: 20px;
}

.help-text p {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

/* Password Strength Indicator */
.password-strength {
    margin-top: 8px;
}

.strength-bar {
    width: 100%;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.strength-fill {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.strength-text {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
}

/* Field Hints */
.field-hint {
    font-size: 0.8rem;
    margin-top: 4px;
    color: #6c757d;
}

.field-hint.error {
    color: #dc3545;
}

/* Terms Notice */
.terms-notice {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.terms-notice p {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

.terms-notice a {
    color: #667eea;
    text-decoration: none;
}

.terms-notice a:hover {
    text-decoration: underline;
}

/* EnhancedLogin specific styles */
.auth-form-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-form-container .auth-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

.auth-form-container .auth-header h1 {
    margin-bottom: 0.1rem;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.auth-form-container .auth-header p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.auth-form {
    width: 100%;
}

.auth-form .form-group {
    margin-bottom: 0.75rem;
}

.auth-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-form .form-group input[type="email"],
.auth-form .form-group input[type="password"],
.auth-form .form-group input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #f8fafc;
    color: #1e293b !important; /* Ensure text color is dark */
    font-size: 1rem;
    transition: all 0.2s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-sizing: border-box;
}

.auth-form .form-group input[type="email"]:focus,
.auth-form .form-group input[type="password"]:focus,
.auth-form .form-group input[type="text"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: 2px solid rgba(59, 130, 246, 0.2);
}

.auth-form .form-group input[type="email"]:hover,
.auth-form .form-group input[type="password"]:hover,
.auth-form .form-group input[type="text"]:hover {
    border-color: #9ca3af;
}

.auth-submit-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

.auth-submit-btn:hover:not(:disabled) {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.auth-submit-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    transform: none;
}

.auth-switch {
    margin-top: 1.25rem;
    text-align: center;
}

.auth-switch p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.auth-switch a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    margin-left: 0.5rem;
}

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

.forgot-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}

.forgot-link:hover {
    text-decoration: underline;
}

.success-message {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    font-size: 0.875rem;
}

.checkbox-group {
    margin-bottom: 1rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    margin-top: 0.5rem;
}

.btn-link:hover {
    color: var(--accent-hover);
}

/* Invite Code Styling */
.invite-code-input {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    font-size: 0.8125rem;
}

.required {
    color: #dc3545;
    font-weight: bold;
    margin-left: 2px;
}

.field-help {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.25rem;
    font-style: italic;
}

.invite-code-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Invite-Only Mode Styles */
.invite-only-message {
    text-align: center;
    padding: 32px;
}

.invite-icon {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.8;
}

.invite-only-message h2 {
    margin: 0 0 16px 0;
    color: #495057;
    font-size: 1.8rem;
    font-weight: 600;
}

.invite-only-message > p {
    margin: 0 0 32px 0;
    color: #6c757d;
    line-height: 1.5;
    font-size: 1rem;
}

.invite-options {
    margin: 32px 0;
}

.option-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 24px;
    margin: 16px 0;
}

.option-section h3 {
    margin: 0 0 16px 0;
    color: #495057;
    font-size: 1.2rem;
    font-weight: 600;
}

.option-section p {
    margin: 0 0 16px 0;
    color: #6c757d;
    line-height: 1.5;
}

.option-section .invite-code-input {
    margin-bottom: 16px;
}

.divider {
    text-align: center;
    margin: 24px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e9ecef;
}

.divider span {
    background: white;
    padding: 0 16px;
    color: #6c757d;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.btn-secondary {
    width: 100%;
    padding: 0.75rem;
    background-color: transparent;
    color: #495057;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #f8f9fa;
    border-color: #495057;
    color: #212529;
    transform: translateY(-1px);
}

.btn-secondary:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    transform: none;
}

/* Invite Request Form Styles - More Specific */
.auth-container .auth-form-container .form-group textarea,
.auth-form-container .auth-form .form-group textarea,
.auth-form-container .form-group textarea,
.auth-form .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #ffffff !important;
    color: #000000 !important;  /* Force black text */
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-sizing: border-box;
    -webkit-text-fill-color: #000000 !important; /* For Safari/Chrome */
}

/* Ensure placeholder text is visible but lighter */
.auth-container .auth-form-container .form-group textarea::placeholder,
.auth-form-container .auth-form .form-group textarea::placeholder,
.auth-form-container .form-group textarea::placeholder,
.auth-form .form-group textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1;
    -webkit-text-fill-color: #9ca3af !important;
}

/* Ensure text stays black even when typing */
.auth-container .auth-form-container .form-group textarea:not(:placeholder-shown),
.auth-form-container .auth-form .form-group textarea:not(:placeholder-shown),
.auth-form-container .form-group textarea:not(:placeholder-shown),
.auth-form .form-group textarea:not(:placeholder-shown) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.auth-container .auth-form-container .form-group textarea:focus,
.auth-form-container .auth-form .form-group textarea:focus,
.auth-form-container .form-group textarea:focus,
.auth-form .form-group textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: 2px solid rgba(59, 130, 246, 0.2);
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.auth-container .auth-form-container .form-group textarea:hover,
.auth-form-container .auth-form .form-group textarea:hover,
.auth-form-container .form-group textarea:hover,
.auth-form .form-group textarea:hover {
    border-color: #9ca3af;
    background-color: #ffffff !important;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.form-actions .btn-secondary {
    flex: 1 1;
    width: auto;
}

.form-actions .auth-submit-btn {
    flex: 2 1;
    margin-top: 0;
}

.link-button {
    background: none;
    border: none;
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    margin: 0;
}

.link-button:hover {
    color: var(--accent-hover);
}

/* Success Actions */
.success-actions {
    display: flex;
    gap: 12px;
    margin: 32px 0 24px 0;
    flex-wrap: wrap;
}

.success-actions .btn-secondary,
.success-actions .btn-primary {
    flex: 1 1;
    min-width: 140px;
} 
/* Two-Factor Authentication Verification */
.two-factor-verify {
    max-width: 400px;
    margin: 0 auto;
    padding: 32px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.verify-header {
    text-align: center;
    margin-bottom: 32px;
}

.verify-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.verify-header h2 {
    margin: 0 0 12px 0;
    color: #495057;
    font-size: 1.5rem;
    font-weight: 600;
}

.verify-header p {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Form */
.verify-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Code Input */
.code-input-container,
.backup-code-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.verification-code-input {
    width: 200px;
    padding: 16px 20px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 8px;
    font-family: 'Courier New', monospace;
    background: #fafafa;
    transition: all 0.2s ease;
}

.verification-code-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.backup-code-input {
    width: 240px;
    padding: 16px 20px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: 4px;
    font-family: 'Courier New', monospace;
    background: #fafafa;
    transition: all 0.2s ease;
}

.backup-code-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.input-hint {
    color: #6c757d;
    font-size: 0.85rem;
    text-align: center;
    max-width: 280px;
}

/* Verify Actions */
.verify-actions {
    display: flex;
    justify-content: center;
}

.btn-verify {
    padding: 14px 32px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.btn-verify:hover:not(:disabled) {
    background: #5a6fd8;
    transform: translateY(-1px);
}

.btn-verify:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
}

/* Alternative Methods */
.alternative-methods {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.btn-link {
    background: none;
    border: none;
    color: #667eea;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
    padding: 8px;
    transition: color 0.2s ease;
}

.btn-link:hover {
    color: #5a6fd8;
}

/* Back Action */
.back-action {
    text-align: center;
    margin-top: 8px;
}

.btn-back {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-back:hover {
    background: #f8f9fa;
    color: #495057;
}

/* Resend Section */
.resend-section {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.resend-section p {
    margin: 0 0 8px 0;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Error Message */
.error-message {
    padding: 12px 16px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    color: #721c24;
    font-size: 0.9rem;
    text-align: center;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Success Animation */
.verification-code-input.success {
    border-color: #28a745;
    background: #f8fff9;
}

.backup-code-input.success {
    border-color: #28a745;
    background: #f8fff9;
}

/* Loading State */
.btn-verify:disabled.loading {
    position: relative;
    color: transparent;
}

.btn-verify:disabled.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .two-factor-verify {
        margin: 20px;
        padding: 24px;
    }
    
    .verification-code-input {
        width: 180px;
        font-size: 1.6rem;
        letter-spacing: 6px;
    }
    
    .backup-code-input {
        width: 200px;
        font-size: 1.2rem;
        letter-spacing: 2px;
    }
    
    .verify-icon {
        font-size: 40px;
    }
    
    .verify-header h2 {
        font-size: 1.3rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .two-factor-verify {
        background: #2d2d2d;
        color: #e9ecef;
    }
    
    .verify-header h2 {
        color: #e9ecef;
    }
    
    .verify-header p {
        color: #adb5bd;
    }
    
    .verification-code-input,
    .backup-code-input {
        background: #3d3d3d;
        border-color: #495057;
        color: #e9ecef;
    }
    
    .verification-code-input:focus,
    .backup-code-input:focus {
        background: #2d2d2d;
        border-color: #667eea;
    }
    
    .input-hint {
        color: #adb5bd;
    }
    
    .btn-back:hover {
        background: #3d3d3d;
        color: #e9ecef;
    }
}
/* Creative Landing Page Styles for scrivia.ink */

.creative-landing {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    overflow-x: hidden;
}

.creative-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    position: relative;
}

.creative-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"ink\" patternUnits=\"userSpaceOnUse\" width=\"20\" height=\"20\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"rgba%28255,255,255,0.1%29\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url%28%23ink%29\"/></svg>");
    opacity: 0.3;
}

.creative-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.creative-logo {
    margin-bottom: 3rem;
}

.creative-title {
    font-size: 4rem;
    font-weight: 300;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.ink-accent {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.creative-tagline {
    font-size: 1.5rem;
    margin: 1rem 0 0 0;
    opacity: 0.9;
    font-style: italic;
}

.creative-description {
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.creative-description h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.creative-description p {
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.9;
}

.creative-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    margin-bottom: 4rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
}

.feature-card p {
    opacity: 0.8;
    line-height: 1.5;
}

.creative-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-creative-primary,
.btn-creative-secondary,
.btn-creative-outline,
.btn-creative-large {
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: inline-block;
    text-align: center;
}

.btn-creative-primary {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-creative-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.btn-creative-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.btn-creative-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-creative-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-creative-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    transform: translateY(-2px);
}

.btn-creative-large {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    padding: 1.5rem 3rem;
    font-size: 1.2rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.btn-creative-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.creative-showcase {
    background: rgba(255, 255, 255, 0.05);
    padding: 5rem 2rem;
    text-align: center;
}

.creative-showcase h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    font-weight: 300;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.showcase-item {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.showcase-item:hover {
    transform: translateY(-5px);
}

.showcase-image {
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.placeholder-art {
    font-size: 3rem;
    opacity: 0.7;
}

.showcase-item h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.showcase-item p {
    opacity: 0.8;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.showcase-author {
    font-size: 0.9rem;
    opacity: 0.6;
    font-style: italic;
}

.creative-cta {
    background: rgba(0, 0, 0, 0.2);
    padding: 5rem 2rem;
    text-align: center;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 300;
}

.cta-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .creative-title {
        font-size: 2.5rem;
    }
    
    .creative-tagline {
        font-size: 1.2rem;
    }
    
    .creative-description h2 {
        font-size: 2rem;
    }
    
    .creative-features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .creative-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .creative-actions > * {
        width: 100%;
        max-width: 300px;
    }
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

/* Tab mode styling */
.add-location-tab-mode {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
}

.add-location-modal,
.edit-location-modal {
    background: var(--bg-primary);
    border-radius: 16px;
    max-width: 600px;
    max-height: 90vh;
    width: 90%;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.close-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: var(--error-color);
    color: white;
    transform: scale(1.1);
}

.modal-form {
    padding: 24px;
}

.modal-body {
    padding: 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    gap: 16px;
}

.form-group label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

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

.error-message {
    background: var(--error-color-light);
    color: var(--error-color);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--error-color);
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.cancel-btn,
.add-btn,
.save-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

.cancel-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
}

.add-btn,
.save-btn {
    background: var(--accent-color);
    color: white;
}

.add-btn:hover,
.save-btn:hover {
    background: var(--accent-color-dark);
    transform: translateY(-1px);
}

.add-btn:disabled,
.save-btn:disabled {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .add-location-modal,
    .edit-location-modal {
        width: 95%;
        margin: 20px;
        max-height: 95vh;
    }
    
    .modal-header,
    .modal-form {
        padding: 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column-reverse;
    }
    
    .cancel-btn,
    .add-btn,
    .save-btn {
        width: 100%;
    }
}

/* Full width form group */
.form-group.full-width {
    grid-column: 1 / -1;
}

/* Custom Photo Upload Styles */
.custom-photo-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s;
    cursor: pointer;
    margin-bottom: 0.75rem;
    position: relative;
}

.custom-photo-upload-area:hover {
    border-color: #4f46e5;
    background: #f0f4ff;
}

.custom-photo-upload-input {
    display: none;
}

.custom-photo-upload-label {
    cursor: pointer;
    display: block;
    color: #64748b;
    text-align: center;
}

.custom-upload-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.custom-photo-upload-label div {
    margin-bottom: 0.25rem;
    text-align: center;
}

.custom-photo-upload-label small {
    color: #94a3b8;
    font-size: 0.75rem;
    text-align: center;
}

/* Custom photo preview */
.custom-photo-preview {
    position: relative;
    width: 100%;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
}

.custom-photo-preview .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.custom-photo-preview .remove-photo-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.custom-photo-preview .remove-photo-btn:hover {
    background: rgba(0, 0, 0, 0.9);
} 
/* Shared Form Components Styles */

/* Form Container */
.shared-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.shared-form {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.shared-form h3 {
    color: #1a1a1a;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 24px 0;
    text-align: center;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: #2c3e50;
    font-family: inherit;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

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

/* Form Row for side-by-side inputs */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    gap: 16px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Form Sections */
.form-section {
    margin-top: 24px;
    margin-bottom: 32px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.form-section h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.section-description {
    color: #6c757d;
    font-size: 14px;
    margin: 0 0 15px 0;
    line-height: 1.5;
}

/* Photo Upload Section */
.photo-upload-section {
    margin-top: 24px;
    margin-bottom: 32px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.photo-upload-section h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.file-upload-area {
    min-height: 120px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.upload-label {
    display: block;
    height: 100%;
    min-height: 120px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-label:hover {
    background: #f8f9fa;
    border-color: #3498db;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    text-align: center;
    color: #6c757d;
}

.upload-placeholder.banner-placeholder {
    min-height: 120px;
}

.upload-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.upload-placeholder span:not(.upload-icon) {
    font-weight: 500;
    margin-bottom: 4px;
}

.upload-placeholder small {
    color: #adb5bd;
    font-size: 12px;
}

.image-preview {
    position: relative;
    width: 100%;
    height: 120px;
}

.image-preview.banner-preview {
    height: 120px;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.remove-image {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.remove-image:hover {
    background: #dc3545;
    transform: scale(1.1);
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

/* Error Messages */
.error-message {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Location Fields (for conditional sections) */
.location-fields {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.location-fields h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .shared-form-container {
        padding: 16px;
    }
    
    .shared-form {
        padding: 24px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .form-actions .btn {
        width: 100%;
    }
} 
.sessions-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--color-background);
    min-height: 100vh;
}

.sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.sessions-title-section h1 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.sessions-title-section p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin: 0;
}

.sessions-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.export-csv-btn {
    background: #059669;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.export-csv-btn:hover:not(:disabled) {
    background: #047857;
    transform: translateY(-1px);
}

.export-csv-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.export-csv-btn .btn-icon {
    font-size: 1rem;
}

.export-csv-btn .btn-text {
    font-weight: 500;
}

.back-to-dashboard-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.back-to-dashboard-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.error-message {
    background: #fee2e2;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.loading-state {
    text-align: center;
    padding: 4rem 2rem;
}

/* Loading spinner styles removed - using standardized LoadingSpinner component */

.sessions-controls {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1rem;
    display: block;
    position: relative;
    border: none !important;
    outline: none !important;
}

.search-filter-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

@media (min-width: 769px) {
    .search-filter-wrapper {
        grid-template-columns: 1fr auto;
        gap: 1.5rem;
        align-items: start;
    }
}

/* Search Section */
.search-section {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.search-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--color-neutral-300);
    border-color: var(--color-border-hover, var(--color-neutral-300));
}

.search-header {
    margin-bottom: 1rem;
}

.search-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sessions-search-container {
    position: relative;
    width: 100%;
}

.search-input-wrapper {
    flex: 1 1;
    min-width: 280px;
    max-width: 400px;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.search-input-sleek {
    flex: 1 1;
    border: none;
    outline: none !important;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 400;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    width: 0; /* Force flex to control width */
    min-width: 0; /* Allow shrinking */
    -webkit-appearance: none;
    appearance: none;
}

.search-input-sleek:focus {
    outline: none !important;
}

.search-input-sleek:focus-visible {
    outline: none !important;
}

.search-input-sleek::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.search-clear-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    margin-left: 0.5rem;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background-color 0.2s;
    flex-shrink: 0;
}

.search-clear-btn:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

.search-results-info {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    padding: 0.5rem 0.75rem;
    background: #f0f9ff;
    background: var(--color-background-alt, #f0f9ff);
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
    border-left: 3px solid var(--color-primary-500, #3b82f6);
}

/* Sort Section */
.sort-section {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    min-width: 280px;
}

.sort-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--color-neutral-300);
    border-color: var(--color-border-hover, var(--color-neutral-300));
}

.sort-header {
    margin-bottom: 1rem;
}

.sort-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* New Sort Controls - Matching Achievement Tabs Style */
.sessions-container .sort-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sessions-container .sort-label {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.sessions-container .sort-buttons {
    display: flex;
    gap: 0.5rem;
    background: rgba(78, 128, 238, 0.08);
    border-radius: 12px;
    padding: 4px;
    width: -webkit-fit-content;
    width: fit-content;
}

.sessions-container .sort-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sessions-container .sort-btn:hover {
    color: #4E80EE;
    background: rgba(78, 128, 238, 0.1);
}

.sessions-container .sort-btn.active {
    background: #4E80EE;
    color: #ffffff;
    font-weight: 600;
}

.sessions-container .sort-btn.active:hover {
    background: #4E80EE;
    color: #ffffff;
}

.sort-icon {
    font-size: 1rem;
}

.sort-text {
    font-weight: 500;
}

.sort-arrow {
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.sessions-content {
    background: var(--color-background);
    border-radius: 12px;
    padding: 0.5rem;
}

.sessions-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.sessions-summary p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.session-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
}

.session-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #4f46e5;
}

/* Hover tooltip for session cards */
.session-card::before {
    content: "Click to Edit Session";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.9);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}

.session-card::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(30, 41, 59, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}

.session-card:hover::before,
.session-card:hover::after {
    opacity: 1;
    visibility: visible;
}

.session-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.session-card-title {
    color: var(--color-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    flex: 1 1;
}

.session-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.session-status.completed {
    background: #dcfce7;
    color: #166534;
}

.session-status.in-progress {
    background: #fef3c7;
    color: #92400e;
}

.session-status.auto-stopped {
    background: #fee2e2;
    color: #991b1b;
}

/* Auto-stopped session card styling */
.session-card.auto-stopped {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
}

.session-card.auto-stopped:hover {
    border-color: #ef4444;
}

/* Tab badge for auto-stopped count */
.tab-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: #ef4444;
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}

.session-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.session-date,
.session-duration {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.session-words {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
}

.stat-value {
    color: #4f46e5;
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    white-space: nowrap;
}

.session-location {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.session-comment {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-style: italic;
    background: var(--color-background-alt);
    padding: 0.75rem;
    border-radius: 6px;
    border-left: 3px solid #4f46e5;
    margin-top: 1rem;
    line-height: 1.4;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-text-secondary);
}

.empty-state h3 {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.empty-state p {
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.clear-search-btn,
.start-writing-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-search-btn:hover,
.start-writing-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.items-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.items-per-page label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 0.9rem;
}

.items-per-page-select {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.items-per-page-select:hover {
    border-color: var(--color-neutral-300);
}

.items-per-page-select:focus {
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    outline: none;
}

/* Pagination Styles */
.pagination-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-border);
}

.pagination-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-btn {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--color-background-alt);
    border-color: var(--color-neutral-300);
}

.pagination-btn:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination-numbers {
    display: flex;
    gap: 0.25rem;
    margin: 0 0.5rem;
}

.pagination-number {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 2.5rem;
    text-align: center;
}

.pagination-number:hover {
    background: var(--color-background-alt);
    border-color: var(--color-neutral-300);
}

.pagination-number.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
}

.pagination-number.active:hover {
    background: #4338ca;
    border-color: #4338ca;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sessions-container {
        padding: 1rem;
    }
    
    .sessions-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .sessions-title-section h1 {
        font-size: 1.5rem;
    }
    
    .search-filter-wrapper {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .search-section,
    .sort-section {
        padding: 1rem;
        min-width: 0;
        min-width: initial;
    }
    
    .search-header h3,
    .sort-header h3 {
        font-size: 0.95rem;
    }
    
    .sessions-container .sort-buttons {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .sessions-container .sort-btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
        min-height: 2.5rem;
    }
    
    .sessions-search-input {
        padding: 0.75rem 0.875rem 0.75rem 2.5rem !important;
        font-size: 0.95rem !important;
    }
    
    .sessions-search-icon {
        left: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    .search-clear-btn {
        right: 0.625rem;
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.9rem;
    }
    
    .sessions-grid {
        grid-template-columns: 1fr;
    }
    
    .session-card {
        padding: 1rem;
    }
    
    .session-card-header {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .session-card-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    /* Mobile tooltip adjustments */
    .session-card::before {
        top: -50px;
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        max-width: 200px;
        text-align: center;
    }
    
    .session-card::after {
        top: -20px;
    }
    
    .sessions-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .pagination-container {
        gap: 0.75rem;
    }
    
    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination-numbers {
        order: 2;
        margin: 0;
    }
    
    .pagination-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .pagination-number {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        min-width: 2rem;
    }
}

/* Modern Search Controls - Light Theme Consistent */
/* Modern search and filter controls are now using shared components from unified-design-system.css */

 
/* Social Stats Container */
.social-stats-container {
    padding: 1rem;
    background: transparent;
    min-height: auto;
    width: calc(100% - 2rem);
    max-width: calc(100vw - 4rem);
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .social-stats-container {
        padding: 1.5rem;
        width: calc(100% - 3rem);
    }
}

.social-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.social-stats-container .social-stats-header h2 {
    margin: 0;
    color: #e5e7eb;
    font-size: 2rem;
    font-weight: 700;
}

.social-stats-container .social-stats-header p {
    margin: 0.5rem 0 0 0;
    color: #9ca3af;
    font-size: 1rem;
}

.social-stats-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.timeframe-selector {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: white;
    color: #4a5568;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-btn {
    padding: 0.5rem 1rem;
    background: #4299e1;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.retry-btn {
    padding: 0.75rem 1.5rem;
    background: #4299e1;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Analytics Cards */
.social-stats-container .analytics-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.5);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.full-width-card {
    width: 100%;
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.social-stats-container .analytics-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1.25rem;
    gap: 1.25rem;
    margin-top: 1.25rem;
    width: 100%;
}

@media (min-width: 992px) {
    .social-stats-container .analytics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .social-stats-container .analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Loading and Error States */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: #fed7d7;
    border: 1px solid #feb2b2;
    border-radius: 0.5rem;
    color: #c53030;
    text-align: center;
}

/* Additional Styles */
.social-stats-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.social-stats-container .social-overview-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .social-stats-container .social-overview-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1.25rem;
        gap: 1.25rem;
    }
}

@media (min-width: 1200px) {
    .social-stats-container .social-overview-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.5rem;
    }
}

.social-stats-container .engagement-stats h4,
.social-stats-container .engagement-breakdown h4 {
    margin: 0 0 1rem 0;
    color: #2d3748;
    font-size: 1.125rem;
    font-weight: 600;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 0.75rem;
    gap: 0.75rem;
    padding: 0.5rem 0;
    width: 100%;
}

@media (max-width: 480px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 0.5rem;
    gap: 0.5rem;
    padding: 0.25rem 0;
    width: 100%;
}

@media (min-width: 640px) {
    .breakdown-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .breakdown-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

.stat-item,
.breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(248, 249, 250, 0.8);
    border-radius: 0.5rem;
    border: 1px solid rgba(226, 232, 240, 0.6);
    min-width: 0;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .stat-item,
    .breakdown-item {
        gap: 0.75rem;
        padding: 0.875rem;
        border-radius: 0.75rem;
    }
}

.stat-item:hover,
.breakdown-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-icon,
.breakdown-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .stat-icon,
    .breakdown-icon {
        font-size: 1.5rem;
        width: 32px;
        height: 32px;
    }
}

.stat-info,
.breakdown-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1;
}

.stat-label,
.breakdown-label {
    font-size: 0.7rem;
    color: #64748b;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 500;
    line-height: 1;
}

.stat-value,
.breakdown-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .stat-value,
    .breakdown-value {
        font-size: 1.25rem;
    }
}

.top-posts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.post-rank {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4299e1;
    min-width: 3rem;
    text-align: center;
}

.post-content {
    flex: 1 1;
}

.post-title {
    margin: 0 0 0.25rem 0;
    color: #1a202c;
    font-size: 1rem;
    font-weight: 600;
}

.post-date {
    color: #718096;
    font-size: 0.875rem;
}

.post-metrics {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.metric {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.metric.total {
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: #e6fffa;
    border-radius: 0.25rem;
    border: 1px solid #81e6d9;
}

.metric-icon {
    font-size: 1rem;
}

.metric-label {
    font-size: 0.75rem;
    color: #718096;
}

.metric-value {
    font-weight: 600;
    color: #1a202c;
}

.hashtag-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hashtag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.hashtag-tag {
    font-weight: 600;
    color: #4299e1;
    font-size: 0.875rem;
}

.hashtag-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.hashtag-uses,
.hashtag-engagement {
    font-size: 0.75rem;
    color: #718096;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
}

.social-stats-container .community-metrics h4,
.social-stats-container .top-engagers h4,
.social-stats-container .engagement-patterns h4 {
    margin: 0 0 1rem 0;
    color: #2d3748;
    font-size: 1rem;
    font-weight: 600;
}

.metric-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.metric-label {
    color: #718096;
    font-size: 0.875rem;
}

.metric-value {
    font-weight: 600;
    color: #1a202c;
    font-size: 0.875rem;
}

.engagers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.engager-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.engager-rank {
    font-weight: 700;
    color: #4299e1;
    min-width: 2rem;
    font-size: 0.875rem;
}

.engager-username {
    flex: 1 1;
    font-weight: 600;
    color: #1a202c;
    font-size: 0.875rem;
}

.engager-interactions {
    color: #718096;
    font-size: 0.75rem;
}

.patterns-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pattern-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

.pattern-label {
    color: #718096;
    font-size: 0.875rem;
    font-weight: 500;
}

.pattern-value {
    color: #1a202c;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .social-stats-container {
        padding: 1rem;
        max-width: 100%;
    }
    
    .social-stats-container .social-stats-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .social-stats-container .social-stats-controls {
        width: 100%;
        justify-content: flex-start;
    }
    
    .social-stats-container .social-overview-grid {
        grid-template-columns: 1fr;
    }
    
    .social-stats-container .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .social-stats-container .community-grid {
        grid-template-columns: 1fr;
    }
    
    .social-stats-container .stat-grid,
    .social-stats-container .breakdown-grid {
        grid-template-columns: 1fr;
    }
    
    .post-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .post-metrics {
        width: 100%;
        justify-content: space-between;
    }
    
    .pattern-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .pattern-value {
        max-width: 100%;
        text-align: left;
    }
}

.friends-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: transparent;
    min-height: calc(100vh - 4rem);
    border-radius: 12px;
    position: relative;
}

.friends-header {
    text-align: center;
    margin-bottom: 2rem;
}

.friends-header h1 {
    color: #1f2937;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.friends-header p {
    color: #6b7280;
    font-size: 1.1rem;
}

.error-banner {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.error-banner button {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Tabs */
.friends-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab {
    flex: 1 1;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    border-radius: 8px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.tab:hover {
    background: #ffffff;
    color: #1f2937;
}

.tab.active {
    background: #667eea;
    color: white;
}

.notification-badge {
    background: #ef4444;
    color: white;
    border-radius: 50%;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    margin-left: 0.5rem;
    min-width: 1.2rem;
    text-align: center;
}

/* Content */
.friends-content {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    margin-top: 1rem;
}

/* Search Section */
.search-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.search-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-bar input {
    flex: 1 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    background: #ffffff;
    color: #1f2937;
}

.search-bar input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-btn {
    padding: 0.75rem 1rem;
    background: var(--color-neutral-400);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.search-btn:hover {
    background: var(--color-neutral-500);
    transform: translateY(-1px);
}

.search-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-filters select,
.search-filters input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 120px;
    background: #ffffff;
    color: #1f2937;
}

.search-filters select:focus,
.search-filters input:focus {
    outline: none;
    border-color: #667eea;
}

/* User Cards */
.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.user-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s;
    position: relative;
}

.user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.user-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-avatar img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avatar-placeholder:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.verification-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid #ffffff;
}

.user-info {
    margin-bottom: 1rem;
}

.username {
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.bio {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.user-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.genres {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.genre-tag {
    background: #e0e7ff;
    color: #3730a3;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.genre-more {
    color: #9ca3af;
    font-size: 0.75rem;
}

.location,
.stats {
    color: #6b7280;
    font-size: 0.8rem;
}

.user-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-follow,
.btn-unfollow,
.btn-friend-request {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-follow {
    background: #667eea;
    color: white;
}

.btn-follow:hover {
    background: #5a67d8;
}

.btn-unfollow {
    background: #f8f9fa;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.btn-unfollow:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-friend-request {
    background: #22c55e;
    color: white;
}

.btn-friend-request:hover {
    background: #16a34a;
}

.status-pending {
    color: #f59e0b;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: #fef3c7;
    border-radius: 4px;
}

/* Friends Grid */
.friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.friends-description {
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Friend Card */
.friend-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.friend-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.friend-info {
    flex: 1 1;
}

.friend-info .username {
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.friend-info .bio {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.friend-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.friend-actions {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.btn-message,
.btn-remove {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-message {
    background: #3b82f6;
    color: white;
}

.btn-message:hover {
    background: #2563eb;
}

.btn-remove {
    background: #f8f9fa;
    color: #dc2626;
    border: 1px solid #fee2e2;
}

.btn-remove:hover {
    background: #fee2e2;
    border-color: #fecaca;
}

/* Friend Request Cards */
.requests-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.friend-request-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

/* Highlight animation for navigated request */
.friend-request-card.highlight-request {
    animation: highlightPulse 1s ease-in-out 3;
    border-color: #667eea;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

@keyframes highlightPulse {
    0% {
        background-color: #ffffff;
        transform: scale(1);
    }
    50% {
        background-color: #f0f4ff;
        transform: scale(1.02);
    }
    100% {
        background-color: #ffffff;
        transform: scale(1);
    }
}

.request-info {
    flex: 1 1;
}

.message {
    font-style: italic;
    color: #6b7280;
    margin: 0.5rem 0;
}

.request-time {
    color: #9ca3af;
    font-size: 0.8rem;
    margin: 0;
}

.request-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-accept,
.btn-decline {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-accept {
    background: #22c55e;
    color: white;
}

.btn-accept:hover {
    background: #16a34a;
}

.btn-decline {
    background: #f8f9fa;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.btn-decline:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.empty-state p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.empty-state button {
    background: #667eea;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.empty-state button:hover {
    background: #5a67d8;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    font-size: 1.1rem;
}

/* Section Headers */
.search-results h2,
.suggested-users h2 {
    color: #1f2937;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.suggested-users p {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .friends-container {
        padding: 1rem;
    }
    
    .friends-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .tab {
        text-align: center;
    }
    
    .users-grid {
        grid-template-columns: 1fr;
    }
    
    .search-filters {
        flex-direction: column;
    }
    
    .search-filters select,
    .search-filters input {
        width: 100%;
    }
    
    .friend-request-card {
        flex-direction: column;
        text-align: center;
    }
    
    .request-actions {
        justify-content: center;
    }
} 
.dashboard {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
}

.dashboard-header {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 32px;
  margin-bottom: 32px;
  border: 1px solid #f0f0f0;
  text-align: center;
}

.dashboard-header h1 {
  color: #1a1a1a;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.dashboard-header p {
  color: #6b7280;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 800px;
}

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

.dashboard-card {
  background-color: var(--color-background);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-card h3 {
  color: var(--color-text-primary);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.progress-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-value {
  color: #4f46e5;
  font-size: 2rem;
  font-weight: 600;
}

.stat-label {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.streak-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.streak-days {
  color: #4f46e5;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
}

.streak-label {
  color: #64748b;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.streak-description {
  color: #64748b;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  text-align: center;
}

.quick-start-tip {
  color: #64748b;
  font-size: 0.875rem;
  margin-top: 0.75rem;
  text-align: center;
}

.dashboard .btn-primary {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--color-primary-500) !important;
  color: white !important;
  border: none !important;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dashboard .btn-primary:hover {
  background-color: var(--color-primary-600) !important;
}

.dashboard .btn-secondary {
  padding: 0.5rem 1rem;
  background-color: transparent !important;
  color: var(--color-primary-500) !important;
  border: 1px solid var(--color-primary-600) !important;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dashboard .btn-secondary:hover {
  background-color: var(--color-primary-500) !important;
  color: white !important;
}

.error-banner {
  background-color: #fee2e2;
  color: #dc2626;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: center;
}

.recent-sessions-card {
  grid-column: span 2;
  background: var(--color-background) !important;
}

.recent-sessions {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background) !important;
}

/* When Recent Sessions is in dashboard tab content, add proper padding */
.dashboard-tab-content .recent-sessions {
  padding: 0 2rem 2rem 2rem;
  min-height: auto;
}

.empty-state {
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  background: var(--color-background) !important;
}

.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.session-item:hover {
    background: var(--color-background-alt);
    border-color: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.session-main {
  flex: 1 1;
}

.session-title {
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.session-item:hover .session-title {
  color: #1e293b;
}

.session-meta {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.session-item:hover .session-meta {
  color: #64748b;
}

.session-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.session-words {
  color: #4f46e5;
  font-size: 0.75rem;
  font-weight: 500;
}

.session-item:hover .session-words {
  color: #4f46e5;
}

.session-status {
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.session-status.active {
  background-color: #dcfce7;
  color: #166534;
}

/* Virtual Pet Section */
.pet-section {
  margin-bottom: 2rem;
}

.pet-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
  border: 2px solid #f59e0b;
}

.pet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.pet-header h3 {
  color: #92400e;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.pet-level {
  background: rgba(146, 64, 14, 0.1);
  color: #92400e;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.875rem;
}

.pet-main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.pet-avatar {
  text-align: center;
}

.pet-emoji {
  font-size: 4rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pet-status {
  background: rgba(146, 64, 14, 0.1);
  color: #92400e;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: capitalize;
}

.pet-stats {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.pet-stat {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: center;
}

.pet-stat .stat-label {
  color: #92400e;
  font-weight: 600;
  font-size: 0.875rem;
  min-width: 80px;
}

.stat-bar {
  background: rgba(146, 64, 14, 0.1);
  border-radius: 10px;
  height: 12px;
  overflow: hidden;
  flex: 1 1;
}

.stat-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.stat-fill.energy {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.stat-fill.happiness {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.pet-stat .stat-value {
  color: #92400e;
  font-weight: 600;
  font-size: 0.875rem;
  min-width: 40px;
  text-align: right;
}

.pet-message {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.pet-message p {
  color: #92400e;
  font-style: italic;
  margin: 0;
  font-size: 1rem;
}

.pet-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.pet-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #f59e0b;
  color: #92400e;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.pet-btn:hover {
  background: #f59e0b;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.pet-btn:active {
  transform: translateY(0);
}

/* Daily Writing Goal Progress Bar */
.daily-goal-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #0ea5e9;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
}

.daily-goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.daily-goal-title {
  color: #0c4a6e;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.daily-goal-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.goal-progress-text {
  color: #0c4a6e;
  font-size: 1rem;
  font-weight: 600;
}

.goal-percentage {
  color: #0ea5e9;
  font-size: 1.1rem;
  font-weight: 700;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid #7dd3fc;
}

.daily-goal-progress {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  height: 12px;
  overflow: hidden;
  border: 1px solid #bae6fd;
  margin-bottom: 1rem;
  position: relative;
}

.daily-goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
  border-radius: 12px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.daily-goal-progress-fill:after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.daily-goal-remaining {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
}

.goal-completed {
  color: #059669;
  font-weight: 600;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid #34d399;
  display: inline-block;
}

.goal-remaining {
  color: #0c4a6e;
}

/* Writing Streak Section */
.writing-streak-section {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #f59e0b;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
  text-align: center;
}

.streak-header {
  margin-bottom: 1.5rem;
}

.streak-title {
  color: #92400e;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.streak-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.writing-streak-section .streak-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.writing-streak-section .streak-days {
  color: #f59e0b;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.writing-streak-section .streak-label {
  color: #92400e;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.writing-streak-section .streak-description {
  color: #92400e;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
  text-align: center;
}

/* Analytics Section Styles */
.writing-stats {
  margin-bottom: 2rem;
}

.stats-section {
  background: var(--color-background);
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.stats-section-title {
  color: #1e293b;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Fallback for browsers that don't support background-clip */
  color: #4f46e5;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  width: 100%;
}

.stat-category {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  min-width: 0; /* Prevents overflow */
}

.stat-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-category-title {
  color: #1e293b;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  word-break: break-word;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  align-items: stretch;
}

.stat-item {
  text-align: center;
  padding: 0.6rem;
  background: var(--color-background);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
  min-height: 75px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

.stat-item:hover {
  background: #f0f4ff;
  border-color: #c7d2fe;
}

.stat-item.full-width {
  grid-column: 1 / -1;
}

.stat-label {
  display: block;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value {
  display: block;
  color: #1e293b;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.1;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value.streak {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 0.9rem;
  /* Fallback color */
  color: #f59e0b;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

.stat-value.best-day {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  line-height: 1.3;
}

/* Special styling for peak performance indicators */
.stat-category:nth-child(4) .stat-category-title {
  color: #7c3aed;
}

.stat-category:nth-child(5) .stat-category-title {
  color: #059669;
}

.stat-category:nth-child(6) .stat-category-title {
  color: #dc2626;
}

/* Today's Stats Section */
.today-stats-section {
  margin-bottom: 2rem;
}

.stats-title {
  color: #1e293b;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
}

.stats-grid-simple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.stat-card {
  background: var(--color-background);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
}

.stat-card .stat-value {
  color: #4f46e5;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.stat-card .stat-label {
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Start Session Button - cloned from Writing component */
.start-session-main {
    text-align: center;
    margin: 1rem 0;
    background: var(--color-background);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.start-session-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 1.5rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 220px;
    max-width: 300px;
    width: 100%;
}

.start-session-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

.start-session-btn:active {
    transform: translateY(-1px);
}

.start-session-btn .btn-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.start-session-btn .btn-text {
    font-size: 1rem;
    font-weight: 600;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .dashboard {
    padding: 1rem;
  }
  
  .dashboard-header {
    display: none;
  }
  
  .progress-stats {
    grid-template-columns: 1fr;
  }
  
  .recent-sessions-card {
    grid-column: span 1;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .daily-goal-section {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .daily-goal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .daily-goal-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }
  
  .daily-goal-title {
    font-size: 1.1rem;
  }
  
  .goal-progress-text {
    font-size: 0.9rem;
  }
  
  .goal-percentage {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
  }
  
  .daily-goal-remaining {
    font-size: 0.85rem;
  }

  .writing-streak-section {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .streak-title {
    font-size: 1.1rem;
  }
  
  .writing-streak-section .streak-days {
    font-size: 2.5rem;
  }
  
  .writing-streak-section .streak-label {
    font-size: 0.9rem;
  }
  
  .writing-streak-section .streak-description {
    font-size: 0.85rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .stat-category {
    padding: 1.25rem;
  }
  
  .stats-section {
    padding: 1.5rem;
    margin: 0 -0.5rem;
  }
  
  .stats-section-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .stat-row {
    gap: 0.5rem;
  }
  
  .stat-value {
    font-size: 0.85rem;
  }
  
  .stat-item {
    min-height: 65px;
    padding: 0.5rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }

  .pet-main {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  
  .pet-emoji {
    font-size: 3rem;
  }
  
  .pet-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .pet-btn {
    width: 100%;
    max-width: 200px;
  }
  
  .stats-grid-simple {
    grid-template-columns: 1fr;
  }

  .start-session-btn {
    padding: 1.25rem 2rem;
    font-size: 1rem;
    min-width: 200px;
  }
  
  .start-session-btn .btn-icon {
    font-size: 1.1rem;
  }
  
  .start-session-btn .btn-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .daily-goal-section {
    padding: 1.25rem;
    border-radius: 12px;
  }
  
  .daily-goal-title {
    font-size: 1rem;
  }
  
  .goal-progress-text {
    font-size: 0.85rem;
  }
  
  .goal-percentage {
    font-size: 0.95rem;
    padding: 0.3rem 0.6rem;
  }
  
  .daily-goal-remaining {
    font-size: 0.8rem;
  }

  .writing-streak-section {
    padding: 1.25rem;
    border-radius: 12px;
  }
  
  .streak-title {
    font-size: 1rem;
  }
  
  .writing-streak-section .streak-days {
    font-size: 2rem;
  }
  
  .writing-streak-section .streak-label {
    font-size: 0.85rem;
  }
  
  .writing-streak-section .streak-description {
    font-size: 0.8rem;
  }

  .stats-section {
    padding: 1rem;
    border-radius: 12px;
  }
  
  .stat-category {
    padding: 1rem;
  }
  
  .stat-value {
    font-size: 0.8rem;
  }
  
  .stat-label {
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
  }
  
  .stat-item {
    min-height: 60px;
    padding: 0.4rem;
  }

  .start-session-btn {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    min-width: 180px;
  }
  
  .start-session-main {
    padding: 1rem;
  }
}

/* Performance indicator animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.stat-value.streak {
  /* animation: pulse 2s infinite; */
}

/* Hover effects for better interactivity */
.stat-category:hover .stat-category-title {
  color: #4f46e5;
}

.stat-category:hover .stat-value {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Goals Progress Section */
.goals-progress-section {
  margin-top: 2rem;
}

.goals-section-title {
  color: #1e293b;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

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

.goal-card {
  background: var(--color-background);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.goal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.goal-card h3 {
  color: #1e293b;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.goal-item {
  margin-bottom: 1rem;
}

.goal-item:last-child {
  margin-bottom: 0;
}

.goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.goal-label {
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
}

.goal-progress-text {
  color: #1e293b;
  font-size: 0.875rem;
  font-weight: 600;
}

.goal-percentage {
  color: #4f46e5;
  font-size: 0.875rem;
  font-weight: 700;
  background: #f0f4ff;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #c7d2fe;
}

.goal-progress-bar {
  background: #f1f5f9;
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.goal-progress-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.6s ease;
}

.goal-progress-fill.words {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.goal-progress-fill.time {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

/* Streak specific styles */
.streak-goals {
  text-align: center;
}

.streak-display {
  margin: 1rem 0;
}

.streak-number {
  color: #f59e0b;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.streak-label {
  color: #64748b;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.streak-description {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.4;
}

/* Mobile responsive adjustments for goals */
@media (max-width: 768px) {
  .goals-grid {
    grid-template-columns: 1fr;
  }
  
  .goal-card {
    padding: 1.25rem;
  }
  
  .goal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .goal-percentage {
    align-self: flex-end;
  }
  
  .streak-number {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .goals-progress-section {
    margin-top: 1.5rem;
  }
  
  .goals-section-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .goal-card {
    padding: 1rem;
  }
  
  .goal-card h3 {
    font-size: 1rem;
  }
  
  .streak-number {
    font-size: 2rem;
  }
}

/* Goals Section Header */
.goals-header {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 24px 32px;
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
    text-align: center;
}

.goals-header h2 {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.goals-header p {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
}

/* Modern Goals Grid */
.goals-grid-redesigned {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-top: 24px;
}

/* Modern Goal Cards */
.goal-card.modern {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.goal-card.modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b);
}

.goal-card.modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Goal Card Header */
.goal-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

.goal-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.goal-icon.streak {
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
}

.goal-period h3 {
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.goal-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 400;
}

/* Goal Metrics */
.goal-metrics {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.metric-item {
    position: relative;
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

.metric-item:hover {
    background: #f3f4f6;
}

.metric-item.progress-high {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: #bbf7d0;
}

.metric-item.progress-medium {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fde68a;
}

.metric-item.progress-low {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    border-color: #fca5a5;
}

/* Metric Header */
.metric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-right: 60px; /* Add space for corner percentage */
}

.metric-icon {
    font-size: 1.1rem;
    margin-right: 8px;
}

.metric-label {
    color: #374151;
    font-weight: 500;
    font-size: 0.95rem;
}

.metric-percentage {
    background: linear-gradient(135deg, #374151, #4b5563);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Metric Stats */
.metric-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.metric-stats .current {
    color: #1f2937;
    font-size: 1.5rem;
    font-weight: 700;
}

.metric-stats .separator {
    color: #9ca3af;
    font-size: 1.2rem;
    font-weight: 400;
}

.metric-stats .target {
    color: #6b7280;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Modern Progress Bar */
.progress-bar-modern {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-fill-modern {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    position: relative;
}

.progress-fill-modern.words {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.progress-fill-modern.time {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.progress-fill-modern.progress-high {
    background: linear-gradient(90deg, #10b981, #059669);
}

.progress-fill-modern.progress-medium {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.progress-fill-modern.progress-low {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Metric Status */
.metric-status {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    padding: 8px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
}

/* Streak Card Modern */
.streak-card-modern .goal-card-header {
    border-bottom-color: #fbbf24;
}

.streak-content-modern {
    text-align: center;
    padding: 20px 0;
}

.streak-number-modern {
    font-size: 3.5rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.streak-label-modern {
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    display: block;
}

.streak-message {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 16px;
    background: #fef3c7;
    border-radius: 8px;
    border: 1px solid #fbbf24;
}

.today-progress {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-icon {
    font-size: 1rem;
}

.progress-text {
    color: #374151;
    font-weight: 500;
    font-size: 0.875rem;
}

/* Goals Loading State */
.goals-loading {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .goals-grid-redesigned {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .goal-card.modern {
        padding: 20px;
    }
    
    .dashboard-header {
        padding: 24px;
    }
    
    .dashboard-header h1 {
        font-size: 2rem;
    }
    
    .today-progress {
        flex-direction: column;
        gap: 12px;
    }
    
    .progress-item {
        justify-content: center;
    }

  .progress-stats {
    grid-template-columns: 1fr;
  }
  
  .recent-sessions-card {
    grid-column: span 1;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .goals-progress-section {
    margin-top: 1.5rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .stat-category {
    padding: 1.25rem;
  }
  
  .stats-section {
    padding: 1.5rem;
    margin: 0 -0.5rem;
  }
  
  .stats-section-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .stat-row {
    gap: 0.5rem;
  }
  
  .stat-value {
    font-size: 0.85rem;
  }
  
  .stat-item {
    min-height: 65px;
    padding: 0.5rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }

  .pet-main {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  
  .pet-emoji {
    font-size: 3rem;
  }
  
  .pet-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .pet-btn {
    width: 100%;
    max-width: 200px;
  }
  
  .stats-grid-simple {
    grid-template-columns: 1fr;
  }

  .start-session-btn {
    padding: 1.25rem 2rem;
    font-size: 1rem;
    min-width: 200px;
  }
  
  .start-session-btn .btn-icon {
    font-size: 1.1rem;
  }
  
  .start-session-btn .btn-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
    .goals-grid-redesigned {
        grid-template-columns: 1fr;
    }
    
    .metric-stats .current {
        font-size: 1.25rem;
    }
    
    .streak-number-modern {
        font-size: 2.5rem;
    }
    
    .dashboard-header h1 {
        font-size: 1.75rem;
    }
    
    .dashboard-header p {
        font-size: 1rem;
    }

  .goals-progress-section {
    margin-top: 1.5rem;
  }
  
  .goals-section-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .goal-card {
    padding: 1rem;
  }
  
  .goal-card h3 {
    font-size: 1rem;
  }
  
  .streak-number {
    font-size: 2rem;
  }

  .stats-section {
    padding: 1rem;
    border-radius: 12px;
  }
  
  .stat-category {
    padding: 1rem;
  }
  
  .stat-value {
    font-size: 0.8rem;
  }
  
  .stat-label {
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
  }
  
  .stat-item {
    min-height: 60px;
    padding: 0.4rem;
  }

  .start-session-btn {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    min-width: 180px;
  }
  
  .start-session-main {
    padding: 1rem;
  }
}

/* Recent Sessions Header */
.recent-sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 2rem 2rem 0 2rem;
}

/* When Recent Sessions is in dashboard tab content, style like Projects header */
.dashboard-tab-content .recent-sessions-header {
    padding: 2rem 2rem 0 2rem;
    margin-bottom: 1.5rem;
}

.dashboard-tab-content .recent-sessions-header h3 {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.view-all-sessions-btn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.view-all-sessions-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #2563eb, #1e40af);
}

.view-all-sessions-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* Corner Percentage */
.metric-percentage-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #374151, #4b5563);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/* Removed old Dashboard tab styles - now using shared tab system */

/* Tab Content */
.dashboard-tab-content {
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    border: none;
    overflow: hidden;
}

/* Fix Projects component styling when inside Dashboard */
.dashboard-tab-content .projects-container {
    padding: 0;
    max-width: none;
    margin: 0;
}

.dashboard-tab-content .projects-header {
    padding: 2rem 2rem 0 2rem;
    margin-bottom: 1.5rem;
}

.dashboard-tab-content .projects-tabs {
    margin: 0 2rem 2rem 2rem;
}

.dashboard-tab-content .section-header {
    padding: 0 2rem;
    margin-bottom: 1.5rem;
}

.dashboard-tab-content .projects-grid {
    padding: 0 2rem 2rem 2rem;
}

.dashboard-tab-content .loading,
.dashboard-tab-content .empty-state {
    padding: 2rem;
}

/* Fix modal positioning when inside Dashboard */
.dashboard-tab-content .modal-overlay {
    position: fixed;
    z-index: 10000;
}

/* Ensure proper spacing for filters */
.dashboard-tab-content .filters {
    padding: 0;
}

/* Fix any form overlapping issues */
.dashboard-tab-content .project-card {
    position: relative;
    z-index: 1;
}

.dashboard-tab-content .modal {
    z-index: 10001;
}

/* Fix inline forms and prevent overlapping */
.dashboard-tab-content .no-target-message {
    background: var(--color-background-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin: 0.5rem 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.dashboard-tab-content .inline-target-input {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    position: relative;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 40px;
}

.dashboard-tab-content .time-input-group {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 4px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    position: relative;
    z-index: 2;
    min-height: 36px;
}

.dashboard-tab-content .time-input-field {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 2px;
}

.dashboard-tab-content .time-input {
    width: 50px !important;
    max-width: 50px !important;
    min-width: 40px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
}

.dashboard-tab-content .time-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dashboard-tab-content .time-arrow {
    width: 14px !important;
    height: 10px !important;
    font-size: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    cursor: pointer;
}

.dashboard-tab-content .time-label {
    font-size: 10px !important;
    color: #6b7280;
    font-weight: 500;
    margin: 0 2px;
    min-width: 8px;
}

.dashboard-tab-content .set-target-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    min-width: 70px !important;
    height: 32px;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

.dashboard-tab-content .set-target-btn:hover {
    background: var(--color-primary-600);
}

.dashboard-tab-content .target-input {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 60px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
}

/* Ensure project cards don't overlap forms */
.dashboard-tab-content .project-card {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.dashboard-tab-content .project-card:hover {
    z-index: 1;
    transform: translateY(-1px);
}

/* Fix progress section layout */
.dashboard-tab-content .progress-section {
    margin: 1rem 0;
    padding: 0.5rem;
    background: #fafbfc;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}

.dashboard-tab-content .progress-item {
    margin-bottom: 0.75rem;
}

.dashboard-tab-content .no-target-text {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
    text-align: center;
}

/* Ensure all form elements have proper stacking */
.dashboard-tab-content select,
.dashboard-tab-content input[type="text"],
.dashboard-tab-content input[type="number"],
.dashboard-tab-content input[type="date"],
.dashboard-tab-content textarea {
    position: relative;
    z-index: 2;
}

.dashboard-tab-content select:focus,
.dashboard-tab-content input:focus,
.dashboard-tab-content textarea:focus {
    z-index: 3;
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* Responsive tabs */
@media (max-width: 768px) {
    .dashboard-tabs {
        flex-direction: column;
        gap: 4px;
    }
    
    .dashboard-tab {
        justify-content: flex-start;
        padding: 16px 20px;
    }
}

@media (max-width: 480px) {
    .dashboard-tabs {
        padding: 4px;
    }
    
    .dashboard-tab {
        font-size: 0.9rem;
        padding: 12px 16px;
    }
}

/* Dashboard Locations Section - Matching Profile Style */
.dashboard-locations-section {
    background: transparent;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: none;
}

.dashboard-locations-section .locations-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.dashboard-locations-section .locations-header h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.dashboard-locations-section .locations-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin: 0;
}

.dashboard-locations-section .empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
}

.dashboard-locations-section .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.dashboard-locations-section .empty-state h3 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.dashboard-locations-section .empty-state p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Loading spinner styles removed - using standardized LoadingSpinner component */

/* Search Controls */
.dashboard-locations-section .locations-controls {
    background: var(--color-background-alt);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-locations-section .search-form {
    flex: 1 1;
}

.dashboard-locations-section .search-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
}

.dashboard-locations-section .search-input {
    flex: 1 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    color: #1e293b;
    transition: all 0.2s ease;
    height: 48px;
    box-sizing: border-box;
}

.dashboard-locations-section .search-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}



.dashboard-locations-section .clear-search-btn {
    padding: 8px 12px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 48px;
    box-sizing: border-box;
}

.dashboard-locations-section .clear-search-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.dashboard-locations-section .search-results-info {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #e0f2fe;
    border: 1px solid #b3e5fc;
    border-radius: 8px;
    color: #0277bd;
    font-size: 0.9rem;
    font-weight: 500;
}

.dashboard-locations-section .results-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-locations-section .clear-search-btn-large {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-locations-section .clear-search-btn-large:hover {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

/* Location Card Updates */
.dashboard-locations-section .location-name-wrapper {
    margin-bottom: 0.5rem !important;
    width: 100% !important;
}

/* Location subtitle - extra title line above main title */
.dashboard-locations-section .location-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    opacity: 0.8;
}

.dashboard-locations-section .location-name {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 0 0.75rem 0 !important; /* Added bottom margin for spacing */
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    min-width: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important; /* Additional word breaking */
    -webkit-hyphens: auto !important;
            hyphens: auto !important; /* Enable hyphenation */
    width: 100% !important; /* Take full width now that star is removed */
    min-height: 1.5rem !important; /* Ensure minimum height */
}

/* Favorite indicator CSS removed - now using favorite-star-badge in top-right corner */

.dashboard-locations-section .location-description {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    -webkit-hyphens: auto !important;
            hyphens: auto !important;
    white-space: normal !important; /* Ensure normal white space handling */
    overflow: visible !important; /* Allow content to wrap */
    text-overflow: initial !important; /* Don't truncate with ellipsis */
}

.dashboard-locations-section .location-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--color-background-alt);
    border-radius: 6px;
}

.dashboard-locations-section .address-icon {
    color: #4f46e5;
    font-size: 0.9rem;
}

.dashboard-locations-section .address-text {
    font-size: 0.9rem;
    color: #475569;
}

.dashboard-locations-section .location-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-locations-section .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.dashboard-locations-section .detail-label {
    color: #64748b;
    font-weight: 500;
}

.dashboard-locations-section .detail-value {
    color: #1e293b;
    font-weight: 600;
}

/* Dashboard Locations Grid */
.dashboard-locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-top: 1rem;
}

.dashboard-location-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 3.5rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    position: relative;
    min-height: 200px;
}

.dashboard-location-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Location Header with Action Buttons */
.dashboard-locations-section .location-header {
    margin-bottom: 1rem;
    display: block !important; /* Override any flex display from other components */
    flex-direction: column !important; /* Ensure vertical stacking if flex is still applied */
}

.dashboard-locations-section .location-title-section {
    /* No padding needed anymore */
}

.dashboard-locations-section .location-actions {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.25rem;
    z-index: 10;
}

/* Action Button Styles - Consistent with Projects */
.dashboard-locations-section .action-btn {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex-shrink: 0 !important;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-locations-section .action-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.dashboard-locations-section .edit-btn {
    background: transparent !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}

.dashboard-locations-section .edit-btn:hover {
    background: #dbeafe !important;
    border-color: #3b82f6;
}

.dashboard-locations-section .delete-btn:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

/* Navigation Tabs */
.dashboard-locations-section .locations-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2rem;
    background: white;
    padding: 1.5rem 1.5rem 0 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.dashboard-locations-section .tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: #64748b;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    font-weight: 500;
}

.dashboard-locations-section .tab-btn:hover {
    background: #f8fafc;
    color: #1e293b;
}

.dashboard-locations-section .tab-btn.active {
    background: #f8fafc;
    color: #4f46e5;
    border-bottom-color: #4f46e5;
}

.dashboard-locations-section .tab-icon {
    font-size: 1.1rem;
}

/* Category Filters */
.dashboard-locations-section .category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
}

.dashboard-locations-section .filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #64748b;
    transition: all 0.2s ease;
    font-weight: 500;
}

.dashboard-locations-section .filter-btn:hover {
    border-color: #4f46e5;
    color: #4f46e5;
    background: #f8fafc;
}

.dashboard-locations-section .filter-btn.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border-color: #4f46e5;
}

.dashboard-locations-section .category-icon {
    font-size: 1rem;
}

/* Advanced Filters */
.dashboard-locations-section .advanced-filters-section {
    margin-top: 1rem;
}

.dashboard-locations-section .advanced-filters-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #64748b;
    transition: all 0.2s ease;
    font-weight: 500;
    width: 100%;
    justify-content: center;
}

.dashboard-locations-section .advanced-filters-toggle:hover {
    border-color: #4f46e5;
    color: #4f46e5;
    background: white;
}

.dashboard-locations-section .advanced-filters-toggle.expanded {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border-color: #4f46e5;
}

.dashboard-locations-section .toggle-icon {
    font-size: 1rem;
}

.dashboard-locations-section .toggle-arrow {
    margin-left: auto;
    font-size: 1rem;
}

.dashboard-locations-section .advanced-filters-panel {
    margin-top: 1rem;
    padding: 1.5rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dashboard-locations-section .filter-group {
    margin-bottom: 1.5rem;
}

.dashboard-locations-section .filter-group:last-child {
    margin-bottom: 0;
}

.dashboard-locations-section .filter-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}

.dashboard-locations-section .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-locations-section .amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-gap: 8px;
    gap: 8px;
}

.dashboard-locations-section .filter-option-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #64748b;
    transition: all 0.2s ease;
    font-weight: 500;
}

.dashboard-locations-section .filter-option-btn:hover {
    border-color: #4f46e5;
    color: #4f46e5;
    background: #f8fafc;
}

.dashboard-locations-section .filter-option-btn.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border-color: #4f46e5;
}

.dashboard-locations-section .option-icon {
    font-size: 0.9rem;
}

.dashboard-locations-section .filter-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.dashboard-locations-section .clear-filters-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dashboard-locations-section .clear-filters-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* Add Location Button */
.dashboard-locations-section .add-location-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease;
    height: 48px;
    box-sizing: border-box;
}

.dashboard-locations-section .add-location-btn:hover {
    background: #059669;
    transform: translateY(-1px);
}

.dashboard-locations-section .btn-icon {
    font-size: 1rem;
}

/* Load More Button */
.dashboard-locations-section .load-more-section {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.dashboard-locations-section .load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.dashboard-locations-section .load-more-btn:hover {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

/* Error Message */
.dashboard-locations-section .error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-locations-section .dismiss-error {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    margin-left: 1rem;
}

.dashboard-locations-section .dismiss-error:hover {
    color: #b91c1c;
}

/* End of Dashboard styles */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-locations-section .locations-controls {
        padding: 1rem;
    }
    
    .dashboard-locations-section .search-input-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .dashboard-locations-section .search-input,
    .dashboard-locations-section .clear-search-btn {
        width: 100%;
    }
    
    .dashboard-locations-section .locations-tabs {
        padding: 1rem 1rem 0 1rem;
        flex-wrap: wrap;
    }
    
    .dashboard-locations-section .tab-btn {
        flex: 1 1;
        min-width: 120px;
        justify-content: center;
    }
    
    .dashboard-locations-section .category-filters {
        justify-content: center;
    }
    
    .dashboard-locations-section .advanced-filters-panel {
        padding: 1rem;
    }
    
    .dashboard-locations-section .amenities-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    
    .dashboard-locations-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .dashboard-location-card {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .dashboard-locations-section {
        padding: 1rem;
    }
    
    .dashboard-locations-section .locations-header h2 {
        font-size: 1.5rem;
    }
    
    .dashboard-locations-section .locations-tabs {
        padding: 0.75rem 0.75rem 0 0.75rem;
    }
    
    .dashboard-locations-section .tab-btn {
        padding: 10px 12px;
        font-size: 0.85rem;
        min-width: 100px;
    }
    
    .dashboard-locations-section .tab-label {
        display: none;
    }
    
    .dashboard-locations-section .tab-icon {
        font-size: 1.2rem;
    }
    
    .dashboard-location-card {
        padding: 1rem;
    }
    
    .dashboard-locations-section .empty-state {
        padding: 2rem 1rem;
    }
    
    .dashboard-locations-section .empty-icon {
        font-size: 2.5rem;
    }
    
    .dashboard-locations-section .category-filters {
        gap: 6px;
    }
    
    .dashboard-locations-section .filter-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
        min-width: 80px;
    }
    
    .dashboard-locations-section .amenities-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 6px;
    }
    
    .dashboard-locations-section .filter-option-btn {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
}

/* Additional high-specificity fixes for Projects tab form overlapping */
.dashboard .dashboard-tab-content .projects-container .project-card .no-target-message {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .inline-target-input {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .time-input-group {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 6px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .time-input {
    width: 45px !important;
    max-width: 45px !important;
    min-width: 35px !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
    text-align: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 3px !important;
    background: white !important;
    box-sizing: border-box !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .time-label {
    font-size: 9px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    margin: 0 1px !important;
    min-width: 6px !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .set-target-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
    min-width: 60px !important;
    height: 28px !important;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .target-input {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 50px !important;
    padding: 5px 6px !important;
    font-size: 10px !important;
    text-align: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 3px !important;
    background: white !important;
    box-sizing: border-box !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .time-arrows {
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .time-arrow {
    width: 12px !important;
    height: 8px !important;
    font-size: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #d1d5db !important;
    background: #f9fafb !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .progress-section {
    margin: 0.75rem 0 !important;
    padding: 0.75rem !important;
    background: #fafbfc !important;
    border-radius: 6px !important;
    border: 1px solid #f0f0f0 !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card:hover {
    z-index: 1 !important;
    transform: translateY(-1px) !important;
}

/* Additional containment fixes to eliminate remaining overlap */
.dashboard .dashboard-tab-content .projects-container .project-card .progress-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .time-input-field {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
    margin: 1px !important;
    flex-shrink: 0 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .no-target-text {
    font-size: 11px !important;
    color: #6b7280 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
}

/* Ensure the entire progress section is contained */
.dashboard .dashboard-tab-content .projects-container .project-card .progress-section {
    margin: 0.5rem 0 !important;
    padding: 0.5rem !important;
    background: #fafbfc !important;
    border-radius: 6px !important;
    border: 1px solid #f0f0f0 !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Adjust time inputs to reasonable size */
.dashboard .dashboard-tab-content .projects-container .project-card .time-input {
    width: 50px !important;
    max-width: 50px !important;
    min-width: 40px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    text-align: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    background: white !important;
    box-sizing: border-box !important;
}

/* Adjust arrows to reasonable size */
.dashboard .dashboard-tab-content .projects-container .project-card .time-arrow {
    width: 16px !important;
    height: 10px !important;
    font-size: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #d1d5db !important;
    background: #f9fafb !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Adjust labels to readable size */
.dashboard .dashboard-tab-content .projects-container .project-card .time-label {
    font-size: 10px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    margin: 0 2px !important;
    min-width: 8px !important;
    flex-shrink: 0 !important;
}

/* Adjust button to reasonable size */
.dashboard .dashboard-tab-content .projects-container .project-card .set-target-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    min-width: 70px !important;
    height: 32px !important;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Adjust time input group for better layout */
.dashboard .dashboard-tab-content .projects-container .project-card .time-input-group {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Adjust inline target input for better layout */
.dashboard .dashboard-tab-content .projects-container .project-card .inline-target-input {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Adjust target input to reasonable size */
.dashboard .dashboard-tab-content .projects-container .project-card .target-input {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 60px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    text-align: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    background: white !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Ensure project card has proper overflow handling for forms */
.dashboard .dashboard-tab-content .projects-container .project-card {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 300px !important;
    padding-bottom: 2rem !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card:hover {
    z-index: 1 !important;
    transform: translateY(-1px) !important;
}

/* Ensure form containers don't get cut off */
.dashboard .dashboard-tab-content .projects-container .project-card .no-target-message {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 1.5rem 0 !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    min-height: 120px !important;
}

/* Fix progress section to have adequate space */
.dashboard .dashboard-tab-content .projects-container .project-card .progress-section {
    margin: 1rem 0 2rem 0 !important;
    padding: 1rem !important;
    background: #fafbfc !important;
    border-radius: 8px !important;
    border: 1px solid #f0f0f0 !important;
    overflow: visible !important;
    min-height: 100px !important;
    box-sizing: border-box !important;
}

/* Add responsive behavior for smaller containers */
@media (max-width: 500px) {
    .dashboard .dashboard-tab-content .projects-container .project-card .time-input-group {
        gap: 3px !important;
        padding: 6px !important;
    }
    
    .dashboard .dashboard-tab-content .projects-container .project-card .time-input {
        width: 45px !important;
        max-width: 45px !important;
        font-size: 10px !important;
        padding: 4px 2px !important;
    }
    
    .dashboard .dashboard-tab-content .projects-container .project-card .set-target-btn {
        font-size: 10px !important;
        padding: 5px 10px !important;
        min-width: 60px !important;
        height: 28px !important;
    }
    
    .dashboard .dashboard-tab-content .projects-container .project-card .target-input {
        width: 70px !important;
        max-width: 70px !important;
        font-size: 10px !important;
        padding: 5px 6px !important;
    }
}

/* Update Dashboard styles for new compact target forms */
.dashboard .dashboard-tab-content .projects-container .project-card .compact-targets {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .targets-header {
    text-align: center !important;
    font-size: 14px !important;
    color: #4a5568 !important;
    font-weight: 500 !important;
    margin-bottom: 1rem !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .target-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0.75rem !important;
    padding: 8px !important;
    background: white !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 3 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .target-row:last-child {
    margin-bottom: 0 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .compact-input {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    width: 60px !important;
    text-align: center !important;
    background: white !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 4 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .compact-input.word-input {
    width: 100px !important;
    flex: 1 1 !important;
    max-width: 120px !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .compact-input:focus {
    outline: none !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1) !important;
    z-index: 5 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .compact-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    min-width: 40px !important;
    position: relative !important;
    z-index: 4 !important;
    flex-shrink: 0 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .compact-btn:hover:not(:disabled) {
    background: var(--color-primary-600) !important;
    z-index: 5 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .compact-btn:disabled {
    background: #9ca3af !important;
    cursor: not-allowed !important;
}

/* Compact single target styling for Dashboard */
.dashboard .dashboard-tab-content .projects-container .project-card .compact-single-target {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 0.75rem !important;
    margin-top: 0.5rem !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .compact-single-target .target-row {
    margin-bottom: 0 !important;
}

/* Ensure progress sections don't interfere */
.dashboard .dashboard-tab-content .projects-container .project-card .progress-section {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .progress-item {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    margin-bottom: 1rem !important;
}

/* Input labels styling */
.dashboard .dashboard-tab-content .projects-container .project-card .input-label {
    font-size: 12px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    min-width: -webkit-fit-content !important;
    min-width: fit-content !important;
    flex-shrink: 0 !important;
}

.dashboard .dashboard-tab-content .projects-container .project-card .target-icon {
    font-size: 16px !important;
    min-width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* Dashboard-specific styles for progress tracking inputs */
.dashboard-content .projects-container .progress-input {
    gap: 6px !important;
    margin-top: 6px !important;
}

.dashboard-content .projects-container .progress-track-input {
    min-width: 70px !important;
    max-width: 100px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
}

.dashboard-content .projects-container .progress-track-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-width: 50px !important;
}

/* Two-Row Dashboard Tabs */
/* Removed old Dashboard tabs container styles - now using shared tab system */

/* Mobile Responsive for Two-Row Tabs */
@media (max-width: 768px) {
    .dashboard-tabs-container {
        margin-bottom: 1.5rem;
    }
    
    .dashboard-tabs-primary {
        padding: 6px 6px 3px 6px;
    }
    
    .dashboard-tabs-secondary {
        padding: 3px 6px 6px 6px;
    }
    
    .dashboard-tabs .dashboard-tab {
        font-size: 0.9rem;
        padding: 10px 14px;
        min-width: 100px;
    }
    
    .dashboard-tabs-secondary .dashboard-tab {
        font-size: 0.85rem;
        padding: 8px 12px;
        min-width: 90px;
    }
}

@media (max-width: 480px) {
    .dashboard-tabs-primary {
        padding: 4px 4px 2px 4px;
    }
    
    .dashboard-tabs-secondary {
        padding: 2px 4px 4px 4px;
    }
    
    .dashboard-tabs .dashboard-tab {
        font-size: 0.85rem;
        padding: 8px 12px;
        min-width: 80px;
    }
    
    .dashboard-tabs-secondary .dashboard-tab {
        font-size: 0.8rem;
        padding: 6px 10px;
        min-width: 70px;
    }
}

/* Social Tab Content */
.social-tab-content {
    margin-top: 1rem;
}

.social-section {
    padding: 2rem;
}

.social-header {
    text-align: center;
    margin-bottom: 2rem;
}

.social-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.social-header h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.social-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin: 0;
}

.coming-soon {
    text-align: center;
    padding: 3rem 1rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
    margin: 2rem 0;
}

.coming-soon p {
    font-size: 1.1rem;
    color: #6b7280;
    margin: 0;
}

/* Social Stats Grid */
.social-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.stat-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.stat-content {
    flex: 1 1;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.stat-label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

/* User Lists */
.followers-list,
.following-list {
    margin: 2rem 0;
}

.followers-list h3,
.following-list h3 {
    color: #1f2937;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.followers-list h4,
.following-list h4 {
    color: #e5e7eb;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.user-list {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.user-item:last-child {
    border-bottom: none;
}

.user-item:hover {
    background: #f8fafc;
}

.user-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
    border: 2px solid #e2e8f0;
}

.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid white;
}

.user-info {
    flex: 1 1;
}

.user-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.user-username {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.user-type {
    color: #4f46e5;
    font-size: 0.8rem;
    font-weight: 500;
    background: #eef2ff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.user-meta {
    margin-right: 1rem;
}

.joined-date,
.last-active {
    color: #9ca3af;
    font-size: 0.85rem;
}

.follow-back-btn,
.unfollow-btn,
.follow-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.follow-back-btn,
.follow-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.follow-back-btn:hover,
.follow-btn:hover {
    background: #4338ca;
}

.unfollow-btn {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.unfollow-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Category Filters */
.following-categories {
    margin: 2rem 0;
}

.category-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.category-btn {
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.category-btn.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border-color: #4f46e5;
}

/* Discover Writers */
.discover-writers {
    margin: 2rem 0;
}

.discover-writers h3 {
    color: #1f2937;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.discover-writers h4 {
    color: #e5e7eb;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

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

.discover-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.2s ease;
}

.discover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.discover-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    border: 3px solid #e2e8f0;
    flex-shrink: 0;
}

.discover-info {
    flex: 1 1;
    min-width: 0;
}

.discover-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.discover-username {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.discover-type {
    color: #4f46e5;
    font-size: 0.85rem;
    font-weight: 500;
    background: #eef2ff;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.75rem;
}

.discover-followers {
    color: #6b7280;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.discover-followers::before {
    content: '✍️';
    font-size: 1rem;
}

.discover-card .follow-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.discover-card .follow-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

/* Mobile Responsive for Social Features */
@media (max-width: 768px) {
    .social-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .user-item {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .user-avatar {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .user-meta {
        margin-right: 0;
        margin-bottom: 0.5rem;
        flex-basis: 100%;
    }
    
    .category-filters {
        justify-content: center;
    }
    
    .discover-grid {
        gap: 0.75rem;
    }
    
    .discover-avatar {
        width: 56px;
        height: 56px;
        min-width: 56px;
        font-size: 1.5rem;
    }
    
    .discover-card {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .social-section {
        padding: 1rem;
    }
    
    .social-header h2 {
        font-size: 1.75rem;
    }
    
    .user-item {
        padding: 0.75rem;
    }
    
    .stat-card {
        padding: 0.75rem;
        gap: 0.75rem;
    }
}

/* Removed old Dashboard social tab styles - now using shared tab system */

/* Mobile responsive for social sub-tabs */
@media (max-width: 768px) {
    .social-tabs {
        flex-direction: column;
        gap: 6px;
    }
    
    .social-tab-btn {
        min-width: auto;
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    .social-subtab-content {
        padding: 1rem;
    }
    
    .social-subtab-content .social-header h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .social-tabs {
        padding: 6px;
    }
    
    .social-tab-btn {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
    
    .social-subtab-content {
        padding: 0.75rem;
    }
}

/* Infinite scroll styles for Dashboard */
.infinite-scroll-trigger {
    height: 20px;
    margin: 20px 0;
    visibility: hidden; /* Hide the trigger element from view */
}

.end-of-locations {
    text-align: center;
    padding: 2rem 1rem;
    margin: 2rem 0;
}

.end-of-locations p {
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}

.loading-indicator {
    text-align: center;
    padding: 2rem 1rem;
    margin: 1rem 0;
}

/* Loading indicator spinner styles removed - using standardized LoadingSpinner component */

.loading-indicator p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Mobile adjustments for infinite scroll */
@media (max-width: 768px) {
    .infinite-scroll-trigger {
        margin: 15px 0;
    }
    
    .end-of-locations {
        padding: 1.5rem 1rem;
        margin: 1.5rem 0;
    }
    
    .end-of-locations p {
        font-size: 1rem;
        padding: 0.75rem;
    }
    
    .loading-indicator {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .end-of-locations {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .end-of-locations p {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
    
    .loading-indicator {
        padding: 1rem;
    }
    
    .loading-indicator .loading-spinner {
        width: 32px;
        height: 32px;
    }
}

/* Favorite star removed - no longer displaying favorite indicators on location cards */

/* Location subtitle - extra title line above main title */
.dashboard-locations-section .location-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    opacity: 0.8;
}

.dashboard-locations-section .location-name {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 0 0.75rem 0 !important; /* Added bottom margin for spacing */
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    min-width: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important; /* Additional word breaking */
    -webkit-hyphens: auto !important;
            hyphens: auto !important; /* Enable hyphenation */
    width: 100% !important; /* Take full width now that star is removed */
    min-height: 1.5rem !important; /* Ensure minimum height */
}
/**
 * Dashboard Core Styles
 * 
 * Basic layout components, header, grid, cards, and buttons for the Dashboard component.
 * Extracted from main Dashboard styles for better organization.
 */

/* Main Dashboard Container - Now using shared page-container class */
/* The .dashboard class is kept for any custom Dashboard-specific styling that differs from the shared container */
.dashboard {
  /* Uses shared .page-container class from styles/components.css */
  /* Custom Dashboard styling can be added here if needed */
}

/* Dashboard Header */
.dashboard-header {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 32px;
  margin-bottom: 32px;
  border: 1px solid #f0f0f0;
}

.dashboard-header h1 {
  color: #1a1a1a;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-header p {
  color: #6b7280;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 800px;
}

/* Dashboard Layout Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Dashboard Cards */
.dashboard-card {
  background-color: var(--color-background);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-card h3 {
  color: var(--color-text-primary);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* Progress Stats Grid */
.progress-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

/* Stat Components */
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-value {
  color: #4f46e5;
  font-size: 2rem;
  font-weight: 600;
}

.stat-label {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Streak Info */
.streak-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.streak-days {
  color: #4f46e5;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
}

.streak-label {
  color: #64748b;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.streak-description {
  color: #64748b;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  text-align: center;
}

/* Quick Start Tip */
.quick-start-tip {
  color: #64748b;
  font-size: 0.875rem;
  margin-top: 0.75rem;
  text-align: center;
}

/* Dashboard Buttons */
.dashboard .btn-primary {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--color-primary-500) !important;
  color: white !important;
  border: none !important;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dashboard .btn-primary:hover {
  background-color: var(--color-primary-600) !important;
}

.dashboard .btn-secondary {
  padding: 0.5rem 1rem;
  background-color: transparent !important;
  color: var(--color-primary-500) !important;
  border: 1px solid var(--color-primary-600) !important;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dashboard .btn-secondary:hover {
  background-color: var(--color-primary-500) !important;
  color: white !important;
}

/* Error Banner */
.error-banner {
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  color: #dc2626;
  font-size: 0.875rem;
} 
/**
 * Recent Sessions Component Styles
 * 
 * Styles for recent sessions display including cards, lists, items, and header.
 * Extracted from main Dashboard styles for better organization.
 */

/* Recent Sessions Card Container */
.recent-sessions-card {
  grid-column: span 2;
  background: var(--color-background) !important;
}

/* Recent Sessions Main Container */
.recent-sessions {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background) !important;
}

/* When Recent Sessions is in dashboard tab content, add proper padding */
.dashboard-tab-content .recent-sessions {
  padding: 0 2rem 2rem 2rem;
  min-height: auto;
}

/* Empty State */
.empty-state {
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Sessions List */
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  background: var(--color-background) !important;
}

/* Individual Session Items */
.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.session-item:hover {
    background: var(--color-background-alt);
    border-color: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Session Content */
.session-main {
  flex: 1 1;
}

.session-title {
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.session-item:hover .session-title {
  color: #1e293b;
}

.session-meta {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.session-item:hover .session-meta {
  color: #64748b;
}

/* Session Statistics */
.session-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.session-words {
  color: #4f46e5;
  font-size: 0.75rem;
  font-weight: 500;
}

.session-item:hover .session-words {
  color: #4f46e5;
}

/* Session Status Badge */
.session-status {
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.session-status.active {
  background-color: #dcfce7;
  color: #166534;
}

/* Recent Sessions Header */
.recent-sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 2rem 2rem 0 2rem;
}

/* When Recent Sessions is in dashboard tab content, style like Projects header */
.dashboard-tab-content .recent-sessions-header {
    padding: 2rem 2rem 0 2rem;
    margin-bottom: 1.5rem;
}

.dashboard-tab-content .recent-sessions-header h3 {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* View All Sessions Button */
.view-all-sessions-btn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.view-all-sessions-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #2563eb, #1e40af);
}

.view-all-sessions-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
} 
/**
 * Dashboard Component - Main Styles Entry Point
 * 
 * This file imports all modular Dashboard CSS sections for better organization
 * and maintainability. Total original size: 4,138 lines → Now modularized.
 */

/* TEMPORARY: Import original styles while we're refactoring */

/* Core Dashboard Layout & Components */

/* Feature Modules */

/* TODO: Create these modules in Phase 3 continuation */
/* @import './PetSystem.css'; */
/* @import './DailyGoals.css'; */
/* @import './WritingStreak.css'; */
/* @import './WritingStats.css'; */
/* @import './StartSession.css'; */
/* @import './GoalProgress.css'; */
/* @import './DashboardTabs.css'; */
/* @import './LocationSection.css'; */
/* @import './SocialSection.css'; */

/* Responsive Design */
/* @import './ResponsiveDesign.css'; */ 
/* Project Selector Component */
.project-selector {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Header */
.selector-header {
    margin-bottom: 1.5rem;
}

.selector-header h4 {
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.selector-header p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

/* Quick Projects */
.quick-projects {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.quick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.quick-header span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-toggle-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.search-toggle-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    min-width: 200px;
}

.project-search-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    flex: 1 1;
    outline: none !important;
}

.project-search-input::placeholder {
    color: #9ca3af !important;
}

.search-close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.search-close-btn:hover {
    color: #6b7280;
}

.search-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #64748b;
}

.search-empty-state .empty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.search-empty-state p {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
}

.add-search-project-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-search-project-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

/* Form Actions Layout Updates */
.form-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f1f5f9 !important;
}

.form-actions-left {
    display: flex;
    gap: 0.75rem;
}

.form-actions-right {
    display: flex;
    gap: 0.75rem;
}

.delete-btn {
    background: none !important;
    color: #ef4444 !important;
    border: none !important;
    padding: 0.5rem !important;
    font-size: 1.1rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.delete-btn:hover:not(:disabled) {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    transform: translateY(-1px);
}

.delete-btn:disabled {
    color: #fca5a5 !important;
}

/* Delete Confirmation Modal */
.delete-confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.delete-confirmation-modal {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.delete-modal-header {
    margin-bottom: 1.5rem;
}

.delete-modal-header h4 {
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.delete-modal-content {
    margin-bottom: 1.5rem;
}

.delete-modal-content p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.project-to-delete {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem;
    margin: 1rem 0;
}

.project-to-delete strong {
    color: #1e293b;
    font-weight: 600;
    display: block;
}

.project-genre {
    color: #64748b;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

.delete-warning {
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 1rem 0 0 0;
}

.delete-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.cancel-delete-btn {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-delete-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.cancel-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.confirm-delete-btn {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-delete-btn:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
}

.confirm-delete-btn:disabled {
    background: #fca5a5;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    .search-input-wrapper {
        min-width: 150px;
    }

    .project-form .form-row,
    .project-form .city-state-row {
        flex-direction: column;
    }

    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions-left,
    .form-actions-right {
        width: 100%;
        justify-content: center;
    }

    .delete-confirmation-modal {
        padding: 1.5rem;
        max-width: 350px;
    }
}

@media (max-width: 480px) {
    .quick-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .header-actions {
        justify-content: center;
    }

    .search-input-wrapper {
        min-width: auto;
        width: 100%;
    }

    .form-actions-left,
    .form-actions-right {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 0.875rem;
    gap: 0.875rem;
    align-items: start;
}

.quick-project-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quick-project-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    color: #374151;
    text-align: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 64px;
}

.quick-project-btn:hover {
    background: #f0f9ff;
    border-color: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.15);
}

.quick-project-btn.selected {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #4f46e5;
    color: #1e40af;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.quick-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    line-height: 1;
}

.quick-name {
    flex: 1 1;
    font-weight: 500;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
}

.quick-count {
    background: #e2e8f0;
    color: #64748b;
    padding: 0.125rem 0.375rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 5;
}

.quick-project-btn.selected .quick-count {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    bottom: 8px;
    right: 8px;
}

.selected-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #16a34a;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 900;
    animation: fadeIn 0.3s ease;
    z-index: 25;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.edit-project-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
}

.quick-project-wrapper:hover .edit-project-btn {
    opacity: 1;
}

.edit-project-btn:hover {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    transform: scale(1.1);
}

.quick-project-btn.add-new-btn {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px dashed #4f46e5;
    color: #4f46e5;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.quick-project-btn.add-new-btn:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #4338ca;
    color: #4338ca;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.2);
}

.add-icon {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
}

.add-text {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.project-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.project-item:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-1px);
}

.project-item.current {
    border-color: #4f46e5;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.project-item.new-project {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.project-item.new-project:hover {
    border-color: #059669;
}

.project-icon {
    font-size: 1.25rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-details {
    flex: 1 1;
}

.project-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.project-genre {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.project-usage {
    font-size: 0.75rem;
    color: #9ca3af;
}

.project-rating {
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

.full-project-interface {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.interface-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.interface-header h4 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.close-interface-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: #64748b;
    font-size: 1.2rem;
}

.close-interface-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.category-filter {
    margin-bottom: 1.5rem;
}

.category-filter label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.category-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 0.875rem;
}

.category-select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.full-projects-list {
    max-height: 400px;
    overflow-y: auto;
}

.list-loading {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.project-section {
    margin-bottom: 2rem;
}

.project-section:last-child {
    margin-bottom: 0;
}

.project-section h5 {
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
    gap: 0.5rem;
}

.empty-projects {
    text-align: center;
    padding: 0.5rem 1rem;
}

.empty-icon {
    display: none;
}

.empty-projects h5 {
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.empty-projects p {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

.empty-projects .quick-project-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Loading and Empty States */
.loading-projects {
    text-align: center;
    padding: 2rem 1rem;
    color: #64748b;
    font-size: 0.875rem;
}

.empty-projects-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #64748b;
}

.empty-projects-state .empty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.empty-projects-state p {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
}

.add-project-section {
    margin-top: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.add-project-toggle {
    width: 100%;
    background: #f8fafc;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.add-project-toggle:hover {
    background: #f1f5f9;
}

.add-project-toggle.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.toggle-icon {
    background: #e2e8f0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #64748b;
    flex-shrink: 0;
}

.add-project-toggle.active .toggle-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.toggle-text {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.add-project-toggle.active .toggle-text {
    color: white;
}

.toggle-hint {
    font-size: 0.875rem;
    color: #64748b;
    margin-left: auto;
}

.add-project-toggle.active .toggle-hint {
    color: rgba(255, 255, 255, 0.8);
}

.add-project-form {
    background: #ffffff;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 1rem 0;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding: 0 1.5rem;
    }
    to {
        opacity: 1;
        max-height: 1000px;
        padding: 1.5rem;
    }
}

.form-header {
    position: relative;
    margin-bottom: 1.5rem;
    padding-right: 2rem;
}

.form-header h4 {
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.form-header p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.form-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #dc2626;
    font-size: 0.875rem;
}

.error-icon {
    flex-shrink: 0;
}

.project-form .form-group {
    margin-bottom: 1rem;
}

.project-form .form-row {
    display: flex;
    gap: 1rem;
}

.project-form .city-state-row {
    gap: 0.75rem;
}

.address-section {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.address-section .form-group:last-child {
    margin-bottom: 0;
}

/* Project Form Sections */
.project-details-section {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.project-details-section .form-group:last-child {
    margin-bottom: 0;
}

.project-metadata-section {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.project-metadata-section .form-group:last-child {
    margin-bottom: 0;
}

.project-form label {
    display: block;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.project-form input,
.project-form select,
.project-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #f1f5f9 !important;
    border-radius: 6px;
    font-size: 0.875rem;
    background: #f8fafc !important;
    color: #1e293b !important;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {
    outline: none;
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.05) !important;
}

.project-form textarea {
    resize: vertical;
}

.project-form input::placeholder,
.project-form textarea::placeholder,
.project-form select::placeholder {
    color: #64748b !important;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.form-actions .cancel-btn,
.form-actions .add-btn,
.form-actions .submit-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.form-actions .cancel-btn {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.form-actions .cancel-btn:hover {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.form-actions .add-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.form-actions .add-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.form-actions .add-btn:disabled {
    background: #a5b4fc;
    cursor: not-allowed;
    transform: none;
}

.form-actions .submit-btn {
    background: #059669;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.form-actions .submit-btn:hover:not(:disabled) {
    background: #047857;
    transform: translateY(-1px);
}

.form-actions .submit-btn:disabled {
    background: #86efac;
    cursor: not-allowed;
    transform: none;
}

/* Status Messages */
.success-message {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #059669;
    font-size: 0.875rem;
}

.success-icon {
    flex-shrink: 0;
}

.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #dc2626;
    font-size: 0.875rem;
}

.error-icon {
    flex-shrink: 0;
}

.error-dismiss {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    font-size: 1.1rem;
}

.error-dismiss:hover {
    color: #b91c1c;
}

@media (max-width: 768px) {
    .project-selector {
        padding: 1rem;
    }

    .quick-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .quick-project-btn {
        padding: 0.5rem;
        min-height: 70px;
    }

    .full-project-interface {
        padding: 1rem;
    }

    .interface-header {
        margin-bottom: 1rem;
    }

    .category-filter {
        margin-bottom: 1rem;
    }

    .full-projects-list {
        max-height: 300px;
    }

    .project-item {
        padding: 0.75rem;
    }

    .add-project-toggle {
        padding: 0.75rem 1rem;
    }

    .toggle-text {
        font-size: 0.9rem;
    }

    .toggle-hint {
        display: none;
    }

    .add-project-form {
        padding: 1rem;
    }

    .project-form .form-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions .cancel-btn,
    .form-actions .add-btn,
    .form-actions .submit-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .selector-header h4 {
        font-size: 1.1rem;
    }

    .quick-projects {
        padding: 0.75rem;
    }

    .quick-header span {
        font-size: 0.8rem;
    }

    .quick-project-btn {
        padding: 0.5rem;
        min-height: 60px;
        gap: 0.25rem;
    }

    .quick-name {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
    }

    .quick-count {
        font-size: 0.7rem;
        padding: 0.125rem 0.25rem;
    }

    .add-icon {
        font-size: 1.25rem;
    }

    .add-text {
        font-size: 0.8rem;
    }

    .quick-count {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        background: rgba(156, 163, 175, 0.8);
        color: white;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add-project-toggle {
        padding: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .toggle-icon {
        width: 24px;
        height: 24px;
        font-size: 1rem;
    }

    .toggle-text {
        font-size: 0.875rem;
    }

    .toggle-hint {
        display: none;
    }

    .form-header h4 {
        font-size: 1.1rem;
    }

    .project-form input,
    .project-form select,
    .project-form textarea {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .add-icon {
        font-size: 1.25rem;
    }

    .add-text {
        font-size: 0.8rem;
    }
}

.close-edit-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.close-edit-btn:hover {
    color: #6b7280;
}

/* ===== PHOTO UPLOAD STYLES ===== */
/* Photo Upload Section */
.photo-upload-section {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.photo-upload-section label {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: block;
}

.photo-help-text {
    color: #64748b;
    font-size: 0.8rem;
    margin: 0 0 1rem 0;
    font-style: italic;
}

.photo-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    transition: all 0.2s ease;
    background: white;
    min-height: auto !important;
    height: auto !important;
}

.photo-upload-area:hover {
    border-color: #4f46e5;
    background: #fafbfc;
}

.photo-upload-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    color: #374151;
    text-align: center;
}

.upload-icon {
    font-size: 1.5rem;
    color: #6b7280;
}

.upload-text {
    font-weight: 500;
    color: #374151;
    display: block;
    margin-bottom: 0.25rem;
}

.upload-hint {
    font-size: 0.8rem;
    color: #9ca3af;
    display: block;
}

/* Photo Previews */
.photo-previews {
    margin-top: 1rem;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    align-items: start;
}

.photo-preview {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    cursor: pointer;
    height: auto;
    max-height: 160px;
    min-height: auto;
}

.photo-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.photo-preview.main-photo {
    border: 2px solid #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.photo-preview.main-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3), 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.photo-preview img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
    display: block;
}

.photo-overlay {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0 0 0 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-preview:hover .photo-overlay {
    opacity: 1;
}

.remove-photo-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    line-height: 1;
}

.remove-photo-btn:hover {
    color: #ef4444;
}

.photo-info {
    padding: 0.25rem 0.5rem 0.45rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.photo-name {
    font-size: 0.65rem;
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.photo-size {
    font-size: 0.6rem;
    color: #9ca3af;
    line-height: 1.1;
}

/* Main Photo Indicator */
.main-photo-indicator {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #4f46e5;
    background: var(--color-primary-500, #4f46e5);
    border: 1px solid #4338ca;
    border: 1px solid var(--color-primary-600, #4338ca);
    color: white;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.checkmark {
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.main-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* Responsive Design for Photos */
@media (max-width: 768px) {
    .photo-upload-area {
        padding: 1.5rem 1rem;
    }
    
    .photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.75rem;
    }
    
    .photo-preview img {
        height: 50px;
    }
} 
/* Location Selector Component */
.location-selector {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Header */
.selector-header {
    margin-bottom: 1.5rem;
}

.selector-header h4 {
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selector-header p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

/* Quick Locations */
.quick-locations {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.quick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.quick-header span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cleanup-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.cleanup-btn:hover:not(:disabled) {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #92400e;
    transform: translateY(-1px);
}

.cleanup-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.search-toggle-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.search-toggle-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    min-width: 200px;
}

.location-search-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    flex: 1 1;
    outline: none !important;
}

.location-search-input::placeholder {
    color: #9ca3af !important;
}

.search-close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.search-close-btn:hover {
    color: #6b7280;
}

.search-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #64748b;
}

.search-empty-state .empty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.search-empty-state p {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
}

.add-search-location-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-search-location-btn:hover {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

/* Form Actions Layout Updates */
.form-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f1f5f9 !important;
}

.form-actions-left {
    display: flex;
    gap: 0.75rem;
}

.form-actions-right {
    display: flex;
    gap: 0.75rem;
}

.delete-btn {
    background: none !important;
    color: #ef4444 !important;
    border: none !important;
    padding: 0.5rem !important;
    font-size: 1.1rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.delete-btn:hover:not(:disabled) {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    transform: translateY(-1px);
}

.delete-btn:disabled {
    color: #fca5a5 !important;
    cursor: not-allowed;
    transform: none;
}

/* Delete Confirmation Modal */
.delete-confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.delete-confirmation-modal {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideInScale 0.3s ease;
}

.delete-modal-header {
    margin-bottom: 1rem;
}

.delete-modal-header h4 {
    color: #ef4444;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.delete-modal-content {
    margin-bottom: 1.5rem;
}

.delete-modal-content p {
    color: #374151;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.location-to-delete {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.75rem;
    margin: 1rem 0;
}

.location-to-delete strong {
    color: #dc2626;
    font-weight: 600;
    display: block;
}

.location-city {
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.delete-warning {
    color: #dc2626 !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
}

.delete-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.cancel-delete-btn {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-delete-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.cancel-delete-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.confirm-delete-btn {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-delete-btn:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
}

.confirm-delete-btn:disabled {
    background: #f87171;
    cursor: not-allowed;
    transform: none;
}

/* Mobile Responsive Updates */
@media (max-width: 768px) {
    .search-input-wrapper {
        min-width: 150px;
    }
    
    .location-form .form-row,
    .location-form .city-state-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .form-actions-left,
    .form-actions-right {
        justify-content: center;
    }
    
    .delete-confirmation-modal {
        margin: 1rem;
        width: calc(100% - 2rem);
    }
}

@media (max-width: 480px) {
    .quick-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .header-actions {
        justify-content: center;
    }
    
    .search-input-wrapper {
        min-width: 0;
        min-width: initial;
        width: 100%;
    }
    
    .form-actions-left,
    .form-actions-right {
        flex-direction: column;
    }
}

/* Quick Locations Grid */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 0.875rem;
    gap: 0.875rem;
    align-items: start;
}

.quick-location-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quick-location-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    color: #374151;
    text-align: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 64px;
}

.quick-location-btn:hover {
    background: #f0f9ff;
    border-color: var(--color-primary-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.15);
}

.quick-location-btn.selected {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: var(--color-primary-600);
    color: #1e40af;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.quick-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    line-height: 1;
}

.quick-name {
    flex: 1 1;
    font-weight: 500;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
}

.quick-count {
    background: #e2e8f0;
    color: #64748b;
    padding: 0.125rem 0.375rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 5;
}

.quick-location-btn.selected .quick-count {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    bottom: 8px;
    right: 8px;
}

/* Checkmark styling handled by .selected-indicator element */

.selected-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #16a34a;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 900;
    animation: fadeIn 0.3s ease;
    z-index: 25;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.edit-location-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
}

.quick-location-wrapper:hover .edit-location-btn {
    opacity: 1;
}

.edit-location-btn:hover {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    transform: scale(1.1);
}

/* Add New Location Button */
.quick-location-btn.add-new-btn {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 2px dashed #4f46e5 !important;
    color: #4f46e5 !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.375rem;
    transition: all 0.3s ease;
    min-height: 64px !important;
    padding: 0.875rem !important;
}

.quick-location-btn.add-new-btn:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: 2px dashed #4338ca !important;
    color: #4338ca !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.2) !important;
}

.add-icon {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
}

.add-text {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* Location Items */
.location-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f8fafc;
}

.location-item:hover {
    background: #f0f9ff;
    border-color: #e0f2fe;
}

.location-item.current {
    background: #dbeafe;
    border-color: #bfdbfe;
}

.location-item.new-location {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.location-item.new-location:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.location-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.location-details {
    flex: 1 1;
    min-width: 0;
}

.location-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-category {
    font-size: 0.8rem;
    color: var(--color-primary-500);
    margin-bottom: 0.125rem;
}

.location-usage {
    font-size: 0.75rem;
    color: #64748b;
}

.location-rating {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: #f59e0b;
}

/* Full Interface */
.full-location-interface {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 1rem;
    max-height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.interface-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.interface-header h4 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.close-interface-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
}

.close-interface-btn:hover {
    color: #dc2626;
    transform: scale(1.1);
}

/* Category Filter */
.category-filter {
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.category-filter label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.category-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    color: #374151;
}

.category-select:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* Full Locations List */
.full-locations-list {
    flex: 1 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.list-loading {
    text-align: center;
    color: #64748b;
    padding: 2rem;
    font-style: italic;
}

.location-section {
    margin-bottom: 2rem;
}

.location-section:last-child {
    margin-bottom: 0;
}

.location-section h5 {
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.locations-grid {
    display: grid;
    grid-gap: 0.5rem;
    gap: 0.5rem;
}

/* Empty State */
.empty-locations {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-locations h5 {
    color: #374151;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.empty-locations p {
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* Add Location Section */
.add-location-section {
    margin-top: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.add-location-toggle {
    width: 100%;
    background: #f8fafc;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.add-location-toggle:hover {
    background: #f1f5f9;
}

.add-location-toggle.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.toggle-icon {
    background: #e2e8f0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #64748b;
    flex-shrink: 0;
}

.add-location-toggle.active .toggle-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.toggle-text {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.add-location-toggle.active .toggle-text {
    color: white;
}

.toggle-hint {
    font-size: 0.875rem;
    color: #64748b;
    margin-left: auto;
}

.add-location-toggle.active .toggle-hint {
    color: rgba(255, 255, 255, 0.8);
}

.add-location-form {
    background: #ffffff;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 1rem 0;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding: 0 1.5rem;
    }
    to {
        opacity: 1;
        max-height: 1000px;
        padding: 1.5rem;
    }
}

.form-header {
    position: relative;
    margin-bottom: 1.5rem;
    padding-right: 2rem;
}

.form-header h4 {
    color: #111827;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.form-header p {
    color: #374151;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}

.form-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
}

.error-icon {
    flex-shrink: 0;
}

.duplicate-warning {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #92400e;
    font-size: 0.875rem;
}

.warning-icon {
    font-size: 1rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.warning-content {
    flex: 1 1;
}

.warning-message {
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.warning-action {
    margin-top: 0.5rem;
}

.use-existing-btn {
    background: #f59e0b;
    border: 1px solid #d97706;
    color: white;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.use-existing-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
}

.location-form .form-group {
    margin-bottom: 1.25rem;
}

.location-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.location-form .city-state-row {
    grid-template-columns: 2fr 1fr;
}

.address-section {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.address-section .form-group:last-child {
    margin-bottom: 0;
}

/* Current Location Button */
.current-location-section {
    margin: 1rem 0;
    text-align: center;
}

.current-location-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
    transition: all 0.3s ease;
    min-width: 180px;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

.current-location-btn:hover:not(:disabled) {
    background: var(--color-primary-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.current-location-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.location-icon {
    font-size: 1rem;
    /* animation: pulse 2s infinite; */
}

.current-location-btn:disabled .location-icon {
    /* animation: spin 1s linear infinite; */
}

.location-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
}

.current-location-hint {
    color: #64748b;
    font-size: 0.75rem;
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Photo Upload Section */
.photo-upload-section {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.photo-upload-section label {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: block;
}

.photo-help-text {
    color: #64748b;
    font-size: 0.8rem;
    margin: 0 0 1rem 0;
    font-style: italic;
}

.photo-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    transition: all 0.2s ease;
    background: white;
    min-height: auto !important;
    height: auto !important;
}

.photo-upload-area:hover {
    border-color: var(--color-primary-600);
    background: #fafbfc;
}

.photo-upload-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    color: #374151;
    text-align: center;
}

.upload-icon {
    font-size: 1.5rem;
    color: #6b7280;
}

.upload-text {
    font-weight: 500;
    color: #374151;
    display: block;
    margin-bottom: 0.25rem;
}

.upload-hint {
    font-size: 0.8rem;
    color: #9ca3af;
    display: block;
}

/* Photo Previews */
.photo-previews {
    margin-top: 1rem;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    align-items: start;
}

.photo-preview {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    cursor: pointer;
    height: auto;
    max-height: 160px;
    min-height: auto;
}

.photo-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.photo-preview.main-photo {
    border: 2px solid var(--color-primary-600);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.photo-preview.main-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3), 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.photo-preview img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
    display: block;
}

.photo-overlay {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0 0 0 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-preview:hover .photo-overlay {
    opacity: 1;
}

.remove-photo-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    line-height: 1;
}

.remove-photo-btn:hover {
    color: #ef4444;
}

.photo-info {
    padding: 0.25rem 0.5rem 0.45rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.photo-name {
    font-size: 0.65rem;
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.photo-size {
    font-size: 0.6rem;
    color: #9ca3af;
    line-height: 1.1;
}

/* Main Photo Indicator */
.main-photo-indicator {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #4f46e5;
    background: var(--color-primary-500, #4f46e5);
    border: 1px solid #4338ca;
    border: 1px solid var(--color-primary-600, #4338ca);
    color: white;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.checkmark {
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.main-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* Responsive Design for Photos */
@media (max-width: 768px) {
    .photo-upload-area {
        padding: 1.5rem 1rem;
    }
    
    .photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.75rem;
    }
    
    .photo-preview img {
        height: 50px;
    }
}

.location-form label {
    display: block;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.location-form input,
.location-form select,
.location-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #f1f5f9 !important;
    border-radius: 6px;
    font-size: 0.875rem;
    background: #f8fafc !important;
    color: #1e293b !important;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.location-form input:focus,
.location-form select:focus,
.location-form textarea:focus {
    outline: none;
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.05) !important;
}

.location-form textarea {
    resize: vertical;
}

.location-form input::placeholder,
.location-form textarea::placeholder,
.location-form select::placeholder {
    color: #64748b !important;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.form-actions .cancel-btn,
.form-actions .add-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-actions .cancel-btn {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.form-actions .cancel-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.form-actions .add-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.form-actions .add-btn:hover {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

.form-actions .add-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.form-actions .submit-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-actions .submit-btn:hover:not(:disabled) {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

.form-actions .submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

/* Status Messages */
.success-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: #166534;
    font-size: 0.875rem;
    margin-top: 1rem;
    padding: 0.75rem;
}

.success-icon {
    flex-shrink: 0;
}

.error-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 1rem;
    padding: 0.75rem;
}

.error-icon {
    flex-shrink: 0;
}

.error-dismiss {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: auto;
    padding: 0;
}

.error-dismiss:hover {
    color: #991b1b;
}

/* Responsive Design */
@media (max-width: 768px) {
    .location-selector {
        padding: 1rem;
    }
    
    .quick-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-location-btn {
        padding: 0.75rem;
        font-size: 0.8rem;
        min-height: 60px;
    }
    
    .full-location-interface {
        max-height: 400px;
    }
    
    .interface-header {
        padding: 0.75rem 1rem;
    }
    
    .category-filter {
        padding: 0.75rem 1rem;
    }
    
    .full-locations-list {
        padding: 0.75rem 1rem;
    }
    
    .location-item {
        padding: 0.75rem;
    }
    
    /* Add Location Form - Mobile */
    .add-location-toggle {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }
    
    .toggle-text {
        font-size: 0.9rem;
    }
    
    .toggle-hint {
        font-size: 0.8rem;
    }
    
    .add-location-form {
        padding: 1rem;
    }
    
    .location-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column-reverse;
    }
    
    .form-actions .cancel-btn,
    .form-actions .add-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .selector-header h4 {
        font-size: 1.1rem;
    }
    
    .quick-locations {
        padding: 0.75rem;
    }
    
    .quick-header span {
        font-size: 0.8rem;
    }
    
    .quick-location-btn {
        gap: 0.5rem;
        padding: 0.625rem;
        min-height: 56px;
        align-items: flex-start;
    }
    
    .quick-name {
        font-size: 0.8rem;
        line-height: 1.25;
        padding-right: 1.75rem;
        padding-bottom: 1.25rem;
    }
    
    .add-icon {
        font-size: 1.25rem;
    }
    
    .add-text {
        font-size: 0.8rem;
    }
    
    .quick-count {
        font-size: 0.7rem;
        padding: 0.1rem 0.3rem;
        bottom: 6px;
        right: 6px;
    }
    
    /* Add Location Form - Small Mobile */
    .add-location-toggle {
        padding: 0.75rem;
        gap: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .toggle-icon {
        align-self: flex-end;
    }
    
    .toggle-text {
        font-size: 0.875rem;
    }
    
    .toggle-hint {
        font-size: 0.75rem;
        margin-left: 0;
        margin-top: 0.25rem;
    }
    
    .form-header h4 {
        font-size: 1rem;
    }
    
    .location-form input,
    .location-form select,
    .location-form textarea {
        padding: 0.625rem;
        font-size: 0.875rem;
    }
    
    .add-icon {
        font-size: 1.25rem;
    }
    
    .add-text {
        font-size: 0.8rem;
    }
}

/* Edit Location Modal */
.edit-location-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 2rem;
}

.edit-location-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideInScale 0.3s ease;
}

@keyframes slideInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.edit-location-form .form-header {
    position: relative;
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.close-edit-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-edit-btn:hover {
    background: #f1f5f9;
    color: #374151;
}

.edit-location-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
    padding: 2rem;
}

.edit-location-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-location-form .form-group.full-width {
    grid-column: 1 / -1;
}

.edit-location-form label {
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.edit-location-form input,
.edit-location-form textarea,
.edit-location-form select {
    padding: 1rem;
    border: 1px solid #f1f5f9 !important;
    border-radius: 6px;
    font-size: 0.875rem;
    background: #f8fafc !important;
    color: #1e293b !important;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.edit-location-form input:focus,
.edit-location-form textarea:focus,
.edit-location-form select:focus {
    outline: none;
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.05) !important;
}

.edit-location-form .form-actions {
    padding: 1rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    border-top: 1px solid #f1f5f9;
}

.edit-location-form .submit-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-location-form .submit-btn:hover:not(:disabled) {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

.edit-location-form .submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .edit-location-overlay {
        padding: 1rem;
    }
    
    .edit-location-form .form-grid {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }
    
    .edit-location-form .form-header {
        padding: 1.5rem 1.5rem 1rem;
    }
    
    .edit-location-form .form-actions {
        padding: 1rem 1.5rem 1.5rem;
        flex-direction: column-reverse;
    }
}

/* Enhanced visibility for location editing forms */
/* Fix for form blending into white background */
.location-selector {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}
/* Quick locations section - light theme with subtle contrast */
.quick-locations {
  background: rgba(248, 250, 252, 0.98) !important;
  border: 2px solid #e2e8f0 !important;
}

/* Quick location buttons - enhanced light theme contrast */
.quick-location-btn {
  background: white !important;
  border: 2px solid #d1d5db !important;
  color: #374151 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
  
  .quick-location-btn:hover {
    background: #f8fafc !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  .quick-location-btn.selected {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
  }
  
  .quick-location-btn.add-new-btn {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 2px dashed #4f46e5 !important;
    color: #4f46e5 !important;
  }
  
  .quick-location-btn.add-new-btn:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: 2px dashed #4338ca !important;
    color: #4338ca !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.2) !important;
  }
  
  /* Search input - enhanced visibility */
  .search-input-wrapper {
    background: white !important;
    border: 1px solid var(--color-neutral-300) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  
  .search-toggle-btn {
    background: var(--color-neutral-100) !important;
    border: 1px solid var(--color-neutral-300) !important;
    color: var(--color-neutral-600) !important;
  }
  
  .search-toggle-btn:hover {
    background: var(--color-neutral-200) !important;
    color: var(--color-neutral-700) !important;
  }
  
  /* Add location form - light theme with good contrast */
  .add-location-form {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  }
  
  .location-form input,
  .location-form textarea,
  .location-form select {
    background: white !important;
    border: 2px solid #d1d5db !important;
    color: #1f2937 !important;
  }
  
  .location-form input:focus,
  .location-form textarea:focus,
  .location-form select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  }
  
  .current-location-btn {
    background: white !important;
    border: 1px solid var(--color-neutral-300) !important;
    color: var(--color-neutral-700) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  
  .current-location-btn:hover:not(:disabled) {
    background: var(--color-neutral-50) !important;
    border-color: var(--color-primary-400) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Form buttons - enhanced light theme */
  .form-actions .cancel-btn {
    background: white !important;
    border: 2px solid #9ca3af !important;
    color: #6b7280 !important;
  }
  
  .form-actions .cancel-btn:hover {
    background: #f9fafb !important;
    border-color: #6b7280 !important;
    color: #374151 !important;
  }
  
  .form-actions .submit-btn,
  .form-actions .add-btn {
    background: #2563eb !important;
    border: 2px solid #2563eb !important;
    color: white !important;
    box-shadow: 0 3px 6px rgba(59, 130, 246, 0.3) !important;
    font-weight: 600 !important;
  }
  
  .form-actions .submit-btn:hover:not(:disabled),
  .form-actions .add-btn:hover:not(:disabled) {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-1px) !important;
  }
  
  /* Full interface - light theme with enhanced contrast */
  .full-location-interface {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--color-neutral-300) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
  
  .location-item {
    background: white !important;
    border: 1px solid var(--color-neutral-200) !important;
    color: var(--color-neutral-800) !important;
  }
  
  .location-item:hover {
    background: var(--color-neutral-50) !important;
    border-color: var(--color-primary-300) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  }
  
  .location-item.current {
    background: var(--color-primary-50) !important;
    border-color: var(--color-primary-500) !important;
    color: var(--color-primary-800) !important;
  }
  
  /* Edit location modal - light theme */
  .edit-location-modal {
    background: rgba(255, 255, 255, 0.99) !important;
    border: 3px solid #cbd5e1 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  }
  
  .edit-location-form input,
  .edit-location-form textarea,
  .edit-location-form select {
    background: white !important;
    border: 2px solid #d1d5db !important;
    color: #1f2937 !important;
  }
  
  .close-edit-btn {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
  }
  
  .close-edit-btn:hover {
    background: #e5e7eb !important;
    color: #374151 !important;
  }
/* Share Confirmation New - Clean Implementation */

/* Override post-card styles to make hover effect the default */
.share-confirmation-modal-new .social-feed .post-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Overlay */
.share-confirmation-overlay-new {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647 !important; /* Maximum z-index value to ensure it's above everything */
    padding: 2rem;
    pointer-events: auto !important;
    transform: none !important; /* Ensure no transform creates new stacking context */
}

/* Modal */
.share-confirmation-modal-new {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 2147483647 !important; /* Ensure modal is also at max z-index */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
    transform: none !important; /* Prevent stacking context issues */
}

/* Header */
.confirmation-header-new {
    text-align: center;
    padding: 2rem 2rem 1rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.success-icon-new {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.confirmation-header-new h2 {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.confirmation-header-new p {
    color: #64748b;
    margin: 0;
    font-size: 1rem;
}

/* Post Preview Section */
.post-preview-section-new {
    padding: 1.5rem 2rem;
}

.post-preview-section-new h3 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

/* COPY EXACT SOCIALFEED STYLES */

/* Post Card */
.post-card-new {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* Post Header */
.post-header-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.post-author-section-new {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1;
}

.profile-photo-new {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.2s;
}

.profile-photo-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-placeholder-new {
    width: 100%;
    height: 100%;
    background: #6366f1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.user-info-new {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.username-new {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.timestamp-new {
    color: #64748b;
    font-size: 0.8rem;
}

.post-header-right-new {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.post-location-header-new {
    color: #64748b;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Post Content */
.post-content-new {
    margin-bottom: 0;
}

.project-info-new {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.project-genre-new {
    color: #4f46e5;
    font-weight: 500;
    font-size: 0.9rem;
}

.project-name-new {
    color: #1e293b;
    font-weight: 700;
    font-size: 1.8rem;
}

.post-text-new {
    margin: 1rem 0;
}

.post-text-new p {
    color: #374151;
    line-height: 1.6;
    margin: 0;
}

/* Session Stats - EXACT COPY FROM SOCIALFEED */
.session-stats-new {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
}

.stat-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    min-width: 70px;
    flex-shrink: 0;
}

.stat-value-new {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label-new {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
    text-transform: uppercase;
}

/* Tags */
.post-tags-new {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.tag-new {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: default;
}

/* Image Gallery */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.image-gallery img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Actions */
.confirmation-actions-new {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid #f1f5f9;
}

.btn-edit-session-new {
    flex: 1 1;
    padding: 1rem 1.5rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-edit-session-new:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.btn-edit-session-new .edit-icon {
    flex-shrink: 0;
}

.btn-confirm-new {
    flex: 1 1;
    padding: 1rem 1.5rem;
    border: none;
    background: #10b981;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-confirm-new:hover {
    background: #059669;
}

.btn-confirm-new .check-icon {
    flex-shrink: 0;
}

/* Close Button */
.close-btn-new {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    color: #64748b;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn-new:hover {
    background: #e2e8f0;
    color: #374151;
}

/* Time Adjustment Section */
.time-adjustment-section {
    padding: 1.5rem 2rem;
    border-top: 1px solid #f1f5f9;
}

.time-adjustment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.time-adjustment-header h3 {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.time-adjustment-subtitle {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0.25rem 0 0 0;
    font-weight: 400;
}

.time-toggle-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.time-toggle-btn:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #374151;
}

.recorded-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.time-label {
    color: #64748b;
    font-size: 0.9rem;
}

.time-value {
    color: #1e293b;
    font-weight: 600;
    font-size: 0.9rem;
}

.time-adjustment-form {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 300px;
    }
}

.time-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.time-input-group {
    flex: 1 1;
}

.time-input-group.time-only {
    flex: 1.5 1; /* Make time input larger */
}

.time-input-group.date-only {
    flex: 1 1;
}

.time-input-group label {
    display: block;
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.time-input {
    width: 100%;
    padding: 1rem;
    border: 2px solid #6366f1; /* Highlight time input */
    border-radius: 8px;
    font-size: 1.25rem; /* Larger font for time */
    font-weight: 600;
    color: #1e293b;
    background: white;
    transition: all 0.2s;
    text-align: center;
}

.date-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1e293b;
    background: white;
    transition: all 0.2s;
}

.time-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background: #f0f9ff;
}

.date-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.time-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.duration-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.duration-label {
    color: #1e40af;
    font-size: 0.9rem;
    font-weight: 500;
}

.duration-value {
    color: #1e40af;
    font-weight: 700;
    font-size: 1rem;
}

.time-adjustment-actions {
    display: flex;
    gap: 1rem;
}

.btn-save-time {
    flex: 1 1;
    padding: 0.75rem 1.5rem;
    border: none;
    background: #6366f1;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-time:hover:not(:disabled) {
    background: #4f46e5;
}

.btn-save-time:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel-time {
    flex: 1 1;
    padding: 0.75rem 1.5rem;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel-time:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.time-save-message {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.time-save-message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.time-save-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
} 
/* Social Feed Component Styles */
.social-feed {
    width: 100%;
    /* No container styles here - parent Social component handles page-container styling */
}

.feed-header {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e2e8f0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0; /* Ensure no left margin */
    margin-right: 0; /* Ensure no right margin */
}

.feed-header h2 {
    font-size: 1.5rem;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.feed-header p {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* Tag Search Header */
.tag-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.search-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.search-results-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-tag-badge {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--color-primary-200);
}

.search-count {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.clear-search-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-search-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.error-banner {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.error-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.retry-btn {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.retry-btn:hover {
    background: #b91c1c;
}

.dismiss-btn {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dismiss-btn:hover {
    background: rgba(220, 38, 38, 0.1);
}

/* Feed Tabs */
.feed-tabs {
    display: flex;
    background: white;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab {
    flex: 1 1;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    border-radius: 8px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.tab:hover {
    background: #f1f5f9;
    color: #475569;
}

.tab.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

/* Feed Content */
.feed-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

/* Post Cards - Made more specific to override Social.css */
.social-feed .post-card {
    background: #f8fafc !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important; /* Override Social.css box-shadow */
    transition: all 0.2s;
    position: relative;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important; /* Ensure no margin */
    margin-left: 0 !important; /* Match feed-header exactly */
    margin-right: 0 !important; /* Match feed-header exactly */
}

.social-feed .post-card:hover {
    transform: translateY(-1px) !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Post Header */
.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 !important;
}

.post-header-right {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-left: auto;
}

.post-author-section {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.profile-photo {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-photo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 2.2rem;
}

.user-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.username {
    color: #1e293b !important;
    font-size: 1.425rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.timestamp {
    color: #64748b !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
}

.post-location-header {
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    align-self: flex-start;
}

.post-location {
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

.post-actions-menu {
    display: flex;
    align-items: center;
}

.bookmark-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.2s;
}

.bookmark-btn:hover {
    background: #f1f5f9;
}

/* Post Content */
.post-content {
    margin: 0 !important;
}

.project-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
}

.project-genre {
    color: #4f46e5;
    font-weight: 500;
    font-size: 0.9rem;
}

.social-feed .post-card .project-info .project-name {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.social-feed .post-card .session-stats {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 1rem 0 1rem 0 !important;
    padding: 1rem 0 !important;
    border-top: 1px solid #e2e8f0 !important;
}

.social-feed .post-card .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    min-width: 70px;
    flex-shrink: 0;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.post-text {
    margin: 1rem 0;
}

.post-text p {
    color: #374151;
    line-height: 1.6;
    margin: 0;
}

.mood-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.5rem 0.75rem;
    background: #fef3c7;
    border-radius: 6px;
    width: -webkit-fit-content;
    width: fit-content;
}

.mood-label {
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 500;
}

.mood-value {
    color: #d97706;
    font-weight: 600;
}

/* Image Gallery */
.image-gallery {
    margin: 0.5rem 0 !important;
}

.single-image-gallery {
    margin: 0.5rem 0 !important;
}

.single-image-gallery img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

.main-image {
    margin-bottom: 0.5rem;
}

.main-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}

.image-thumbnails {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0;
}

.thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.thumbnail:hover {
    border-color: #4f46e5;
    transform: scale(1.05);
}

.thumbnail.active {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Post Engagement */
.post-engagement {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

.engagement-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #64748b;
}

.engagement-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.like-btn,
.comment-btn,
.share-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748b;
    font-weight: 500;
}

/* Like Button States */
.like-btn {
    color: #3b82f6; /* Blue for unliked state */
}

.like-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
    transform: translateY(-1px);
}

.like-btn.active {
    background: #fef2f2;
    border-color: #ef4444;
    color: #dc2626; /* Red for liked state */
}

/* Comment Button States */
.comment-btn {
    color: #64748b;
}

.comment-btn:hover {
    background: #f0f9ff;
    border-color: #0ea5e9;
    color: #0284c7;
    transform: translateY(-1px);
}

.comment-btn.active {
    background: #f0f9ff;
    border-color: #0ea5e9;
    color: #0284c7;
}

/* Share Button States */
.share-btn {
    color: #64748b;
}

.share-btn:hover {
    background: #f0f9ff;
    border-color: #0ea5e9;
    color: #0284c7;
    transform: translateY(-1px);
}

/* SVG Icon Styling */
.like-icon,
.comment-icon,
.share-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.like-icon.outline {
    color: #3b82f6; /* Blue outline heart */
}

.like-icon.filled {
    color: #ef4444; /* Red filled heart */
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem 0 !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid #e2e8f0;
}

.tag {
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tag:active {
    transform: translateY(0);
}

/* Tag category colors */
.tag-process {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}

.tag-process:hover {
    background: #bfdbfe;
    border-color: #60a5fa;
}

.tag-emotion {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.tag-emotion:hover {
    background: #fde68a;
    border-color: #f59e0b;
}

.tag-genre {
    background: #f3e8ff;
    color: #7c3aed;
    border-color: #c4b5fd;
}

.tag-genre:hover {
    background: #e9d5ff;
    border-color: #a78bfa;
}

.tag-location {
    background: #ecfdf5;
    color: #065f46;
    border-color: #86efac;
}

.tag-location:hover {
    background: #d1fae5;
    border-color: #4ade80;
}

/* Empty States */
.empty-feed {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-feed h2 {
    color: #1e293b;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.empty-feed p {
    color: #64748b;
    font-size: 1.1rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Loading States */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Loading spinner styles removed - using standardized LoadingSpinner component */

.loading-indicator p {
    color: #64748b;
    font-size: 1rem;
}

/* Load More */
.load-more {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.load-more-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.load-more-btn:hover {
    background: #4338ca;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Responsive styles for SocialFeed component */
    /* Container responsive padding is now handled by the shared page-container class */
    
    .feed-header {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 6px;
        margin-left: 0;
        margin-right: 0;
    }
    
    .feed-header h2 {
        font-size: 1.3rem;
    }
    
    .feed-header p {
        font-size: 0.9rem;
    }
    
    .social-feed .post-card {
        padding: 1rem !important;
        border-radius: 6px !important;
        margin: 0 !important;
    }
    
    .social-feed .post-card .session-stats {
        gap: 0.75rem;
        flex-wrap: nowrap;
    }
    
    .social-feed .post-card .stat {
        min-width: 55px;
        padding: 0.4rem 0.5rem;
    }
    
    .stat-value {
        font-size: 1.2rem;
    }
    
    .engagement-actions {
        gap: 0.25rem;
    }
    
    .like-btn,
    .comment-btn,
    .share-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .thumbnail {
        width: 60px;
        height: 60px;
    }
    
    .tag-search-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .search-results-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .clear-search-btn {
        align-self: stretch;
        text-align: center;
    }
}

/* Post Menu Positioning - using the PostMenu component which has its own styles */
.post-menu {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    flex-shrink: 0;
    z-index: 10;
}

/* Infinite scroll styles */
.infinite-scroll-trigger {
    height: 20px;
    margin: 20px 0;
    visibility: hidden; /* Hide the trigger element from view */
}

.end-of-posts {
    text-align: center;
    padding: 2rem 1rem;
    margin: 2rem 0;
}

.end-of-posts p {
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}

/* Mobile improvements for infinite scroll */
@media (max-width: 768px) {
    .infinite-scroll-trigger {
        margin: 15px 0;
    }
    
    .end-of-posts {
        padding: 1.5rem 1rem;
        margin: 1.5rem 0;
    }
    
    .end-of-posts p {
        font-size: 1rem;
        padding: 0.75rem;
    }
} 
/* Font face definition */
@font-face {
  src: url("https://fonts.cdnfonts.com/css/pp-neue-montreal") format("woff2");
  font-family: "PP Neue Montreal", sans-serif;
}

/* CSS Custom Properties for animations */
:root {
  --global--size: clamp(2rem, 4vw, 5rem);
  --anim--hover-time: 400ms;
  --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
  
  /* Glass morphism variables */
  --glass-bg: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: rgba(0, 0, 0, 0.1);
  
  /* Color variables */
  --warm-off-black: #1a1a1a;
  --warm-off-white: #f5f5f5;
}

/* ========== SIMPLIFIED GLASS TIMER ========== */

.timer-aurora {
  position: relative;
  display: block;
  width: 100%;
  z-index: 2;
}

.timer-aurora-container {
  --cut: 0.1em;
  --active: 0;
  position: relative;
  display: block;
  width: 100%;
  padding: 1.5em 2em;
  
  /* Glass morphism effect */
  background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
  
  /* Glass blur and shadows */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 8px 32px var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  
  /* Smooth transitions */
  transition: all 0.3s ease;
  
  /* Sparkle shimmer effect */
  overflow: hidden;
}

/* Sparkle SVG styling */
.timer-aurora-container .sparkle {
  position: absolute;
  z-index: 3;
  width: calc(7rem * 0.15);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0);
  animation: timer-sparkle-test 3s infinite;
}

.timer-aurora-container .sparkle path {
  fill: rgba(255, 255, 255, 0.2);
}

/* Sparkle positioning and sizing now generated dynamically in JavaScript */

/* Smooth continuous sparkle animation */
@keyframes timer-sparkle-test {
  0%, 45% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  55% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.05;
  }
  65% {
    transform: translate(-50%, -50%) scale(1.0);
    opacity: 0.15;
  }
  75% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.2;
  }
  85% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.1;
  }
  95% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.02;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}



/* Subtle animated border */
.timer-aurora-container::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(45deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.3), 
    rgba(255, 255, 255, 0.1)
  );
  border-radius: inherit;
  z-index: -1;
  animation: timer-subtle-glow 6s ease-in-out infinite;
}

@keyframes timer-subtle-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.timer-aurora .timer-aurora-container .timer-aurora-label {
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  
  /* Text rendering optimizations */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Subtle text glow */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  
  -webkit-user-select: none;
  
          user-select: none;
  position: relative;
  z-index: 2;
}

.timer-aurora .timer-aurora-container .timer-aurora-display {
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 7rem);
  line-height: 1;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  
  /* Text rendering optimizations */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Subtle text glow */
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.3),
    0 0 20px rgba(255, 255, 255, 0.1);
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  
  -webkit-user-select: none;
  
          user-select: none;
  position: relative;
  z-index: 2;
}

/* Individual digit styling */

.timer-aurora .timer-aurora-container .timer-aurora-display .timer-aurora-digit {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
}

.timer-aurora .timer-aurora-container .timer-aurora-display .timer-aurora-digit.colon {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  margin: 0 0.02em;
  padding: 0;
}

.timer-aurora .timer-aurora-container .timer-aurora-display .timer-aurora-digit.number {
  min-width: auto;
  text-align: center;
  /* animation: timer-gentle-pulse 8s ease-in-out infinite; */
  margin: 0;
  padding: 0;
}


@keyframes timer-gentle-pulse {
  0%, 70% { 
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.3),
      0 0 20px rgba(255, 255, 255, 0.1);
  }
  85% { 
    text-shadow: 
      0 0 15px rgba(255, 255, 255, 0.5),
      0 0 30px rgba(255, 255, 255, 0.2);
  }
  100% { 
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.3),
      0 0 20px rgba(255, 255, 255, 0.1);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .timer-aurora-container {
    padding: 1.2em 1.5em;
  }
  
  /* Ensure clamp function works on mobile */
  .timer-aurora .timer-aurora-container .timer-aurora-display {
    font-size: clamp(2rem, 10vw, 5.5rem) !important;
  }
}

@media (max-width: 480px) {
  .timer-aurora-container {
    padding: 1em 1.2em;
  }
  
  /* Even smaller clamp range for very small screens */
  .timer-aurora .timer-aurora-container .timer-aurora-display {
    font-size: clamp(1.8rem, 12vw, 4.5rem) !important;
  }
}

/* Auto-pause controls */
.auto-pause-controls {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.auto-pause-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auto-pause-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.auto-pause-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: background-color 0.3s ease;
  margin-right: 0.5rem;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.auto-pause-toggle input:checked + .toggle-slider {
  background-color: rgba(100, 200, 255, 0.3);
}

.auto-pause-toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background-color: rgba(100, 200, 255, 0.9);
}

.toggle-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.auto-pause-status {
  font-size: 0.8rem;
  color: rgba(100, 200, 255, 0.8);
  font-style: italic;
}

.auto-pause-settings {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: accordion-expand 0.3s ease;
  overflow: hidden;
}

@keyframes accordion-expand {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 100px;
  }
}

.auto-pause-duration {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auto-pause-duration label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.duration-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.duration-input {
  width: 60px;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.2s ease;
}

.duration-input:focus {
  outline: none;
  border-color: rgba(100, 200, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.duration-input::-webkit-inner-spin-button,
.duration-input::-webkit-outer-spin-button {
  opacity: 0.5;
}

.duration-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
/* ========================================================================== */
/* SESSION CONTROLS - Timer and Control Buttons Component */
/* Extracted from Writing.css (lines 2251-2477) for better organization */
/* ========================================================================== */

.session-controls {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 2rem;
    border: none;
    box-shadow: none;
}

/* Combined Timer Section with Status Bar */
.timer-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1.5rem;
    border: none;
    box-shadow: none;
}

.session-status-indicator {
    text-align: center;
    margin-bottom: 1.5rem;
}

.status-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.status-main {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.75px;
}

.status-time {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.25px;
    text-transform: none;
    opacity: 0.9;
}

.status-badge.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.status-badge.paused {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.control-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 110px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex: 1 1;
    max-width: 160px;
    outline: none !important;
}

.control-btn:focus {
    outline: none !important;
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.control-btn:active {
    transform: translateY(0);
}

.session-controls .control-buttons .control-btn.pause-btn {
    background: #566378 !important;
    color: white !important;
    outline: none !important;
}

.session-controls .control-buttons .control-btn.pause-btn:hover {
    background: #4a5568 !important;
    outline: none !important;
}

.session-controls .control-buttons .control-btn.resume-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.session-controls .control-buttons .control-btn.resume-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.session-controls .control-buttons .control-btn.session-cancel-btn {
    background: #853E3E !important;
    color: white !important;
    outline: none !important;
}

.session-controls .control-buttons .control-btn.session-cancel-btn:hover {
    background: #6B3232 !important;
    outline: none !important;
}

.btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.btn-text {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Responsive Design for Session Controls */
@media (max-width: 768px) {
    .session-controls {
        padding: 0;
        margin-bottom: 1.5rem;
    }
    
    .timer-section {
        padding: 0;
        margin-bottom: 1.25rem;
    }
    
    .control-buttons {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    
    .control-btn {
        width: auto;
        max-width: 300px;
        padding: 1rem 1.25rem;
        min-width: 200px;
    }
    
    .status-badge {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        width: 100%;
    }
    
    .btn-text {
        font-size: 0.8rem;
    }
    
    /* Mobile timer styles */
    .session-timer {
        padding: 1.25rem;
    }
    
    .timer-display {
        font-size: 2.8rem;
    }
    
    .timer-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .session-controls {
        padding: 0;
        margin: 0 0 1.5rem 0;
        border-radius: 0;
    }
    
    .timer-section {
        padding: 0;
        margin-bottom: 1rem;
    }
    
    .control-btn {
        padding: 0.875rem 1rem;
        font-size: 0.8rem;
    }
    
    .status-badge {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        min-width: 200px;
    }
    
    /* Small mobile timer styles */
    .session-timer {
        padding: 1rem;
    }
    
    .timer-display {
        font-size: 2.2rem;
    }
    
    .timer-label {
        font-size: 0.75rem;
    }
}

/* Auto-pause controls in SessionControls */
.session-auto-pause-controls {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.session-auto-pause-controls .auto-pause-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.session-auto-pause-controls .auto-pause-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}

.session-auto-pause-controls .auto-pause-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.session-auto-pause-controls .toggle-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    transition: background-color 0.3s ease;
    margin-right: 0.5rem;
}

.session-auto-pause-controls .toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.session-auto-pause-controls .auto-pause-toggle input:checked + .toggle-slider {
    background-color: rgba(99, 102, 241, 0.4);
}

.session-auto-pause-controls .auto-pause-toggle input:checked + .toggle-slider::before {
    transform: translateX(22px);
    background-color: #6366f1;
}

.session-auto-pause-controls .toggle-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.session-auto-pause-controls .auto-pause-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

.session-auto-pause-controls .auto-pause-status {
    font-size: 0.85rem;
    color: rgba(99, 102, 241, 0.9);
    font-style: italic;
}

.session-auto-pause-controls .countdown-time {
    color: rgba(147, 102, 241, 1);
    font-weight: 600;
}

.session-auto-pause-controls .auto-pause-description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 1.4;
    max-width: 380px;
    padding: 0 1rem;
}

.session-auto-pause-controls .auto-pause-settings {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: accordion-expand 0.3s ease;
    overflow: hidden;
}

@keyframes accordion-expand {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 100px;
    }
}

.session-auto-pause-controls .auto-pause-duration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.session-auto-pause-controls .auto-pause-duration label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.session-auto-pause-controls .duration-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-auto-pause-controls .duration-input {
    width: 70px;
    padding: 0.3rem 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.2s ease;
}

.session-auto-pause-controls .duration-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

.session-auto-pause-controls .duration-input::-webkit-inner-spin-button,
.session-auto-pause-controls .duration-input::-webkit-outer-spin-button {
    opacity: 0.6;
}

.session-auto-pause-controls .duration-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .session-auto-pause-controls {
        margin-top: 1rem;
        padding: 0.75rem;
    }
    
    .session-auto-pause-controls .toggle-label,
    .session-auto-pause-controls .auto-pause-status {
        font-size: 0.85rem;
    }
    
    .session-auto-pause-controls .auto-pause-description {
        display: none;
    }
} 
/* Wave Background Styles - Highly specific to avoid conflicts */
/* Using high specificity selectors instead of !important */
body .page-container .wave-background,
body > div .wave-background,
.wave-background.wave-background,
.wave-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; /* Changed from -1 to ensure visibility */
  /* Never intercept clicks since controls are now outside */
  /* TEMPORARILY REMOVED: pointer-events: none !important; */
  overflow: hidden;
  /* Break out of any parent container constraints */
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
}

.wave-background .waves-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 300px;
}

.wave-background #waves {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

/* Ensure content appears above waves */
.writing-container {
  position: relative;
  z-index: 1;
}

/* Wave Canvas - Specific to our custom implementation */
body .page-container .wave-background .wave-canvas,
body > div .wave-background .wave-canvas,
.wave-background.wave-background .wave-canvas,
.wave-background .wave-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* TEMPORARILY REMOVED: pointer-events: none; */ /* Canvas doesn't capture clicks */
  z-index: 0; /* Changed from -1 to ensure visibility */
  display: block;
  /* Ensure full viewport coverage */
  min-width: 100vw;
  min-height: 100vh;
  max-width: none;
  max-height: none;
}

/* Custom GUI Controls - Highly specific selectors with wsctrl prefix */
body .wsctrl-panel,
.wave-controls-container .wsctrl-panel,
.wsctrl-panel.wsctrl-panel,
.wsctrl-panel {
  position: fixed !important;
  top: 80px; /* Default position - will be overridden by JS when admin nav is present */
  right: 20px;
  width: 280px;
  max-height: calc(100vh - 120px); /* Leave space at top and bottom */
  background: rgba(31, 41, 55, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* REDUCED from 10000 to test CSS conflicts */
  pointer-events: all !important; /* Force pointer events */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent panel overflow */
}

/* Ensure all interactive elements within controls are clickable */
.wave-controls-container {
  /* TEMPORARILY REMOVED: pointer-events: none !important; */
}

.wave-controls-container .wsctrl-panel,
.wsctrl-panel.wsctrl-panel,
.wsctrl-panel *,
.wsctrl-panel input,
.wsctrl-panel button,
.wsctrl-panel label {
  pointer-events: all !important;
}

.wsctrl-panel .wsctrl-header,
.wave-controls-container .wsctrl-panel .wsctrl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(31, 41, 55, 0.5);
  border-radius: 8px 8px 0 0;
  flex-shrink: 0; /* Prevent header from shrinking */
}

.wsctrl-panel .wsctrl-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #f3f4f6;
}

.wsctrl-panel .wsctrl-toggle {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  pointer-events: all !important;
}

.wsctrl-panel .wsctrl-toggle:hover {
  color: #f3f4f6;
}

.wsctrl-panel .wsctrl-content {
  padding: 12px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  transition: max-height 0.3s ease;
  scrollbar-width: thin; /* Firefox */
  min-height: 0; /* Important for flexbox scrolling */
}

.wsctrl-panel .wsctrl-content.collapsed {
  max-height: 0;
  padding: 0 12px;
  overflow: hidden;
}

.wsctrl-panel .wsctrl-folder {
  margin-bottom: 8px;
}

.wsctrl-panel .wsctrl-folder-header {
  display: flex;
  align-items: center;
  padding: 8px;
  background: rgba(55, 65, 81, 0.5);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

/* Wave action buttons container */
.wsctrl-panel .wsctrl-wave-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Wave action buttons (copy, paste, visibility) */
.wsctrl-panel .wsctrl-wave-copy,
.wsctrl-panel .wsctrl-wave-paste,
.wsctrl-panel .wsctrl-wave-visibility {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
  pointer-events: all !important;
}

.wsctrl-panel .wsctrl-wave-visibility:hover {
  background-color: rgba(102, 126, 234, 0.2);
  color: #d1d5db;
}

.wsctrl-panel .wsctrl-eye-icon {
  width: 16px;
  height: 16px;
}

/* Style for hidden wave folders */
.wsctrl-panel .wsctrl-folder.wsctrl-wave-hidden .wsctrl-folder-header {
  opacity: 0.6;
  background: rgba(55, 65, 81, 0.3);
}

.wsctrl-panel .wsctrl-folder.wsctrl-wave-hidden .wsctrl-folder-content {
  opacity: 0.5;
}

.wsctrl-panel .wsctrl-folder-header:hover {
  background: rgba(55, 65, 81, 0.7);
}

.wsctrl-panel .wsctrl-folder-toggle {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 10px;
  margin-right: 8px;
  cursor: pointer;
  padding: 0;
  pointer-events: all !important;
}

.wsctrl-panel .wsctrl-folder-content {
  padding: 8px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  max-height: none; /* Remove max-height restriction */
  overflow: visible; /* Allow content to be visible */
}

.wsctrl-panel .wsctrl-folder-content.collapsed {
  max-height: 0;
  padding: 0 8px;
}

.wsctrl-panel .wsctrl-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(55, 65, 81, 0.3);
  border-radius: 4px;
}

.wsctrl-panel .wsctrl-item label {
  flex: 0 0 auto;
  margin-right: 12px;
  color: #d1d5db;
  font-size: 11px;
  white-space: nowrap;
  min-width: 80px;
  pointer-events: all !important;
}

.wsctrl-panel .wsctrl-slider {
  display: flex;
  align-items: center;
  flex: 1 1;
  gap: 8px;
}

/* Wave controls specific slider styling with high specificity */
.wave-controls-container .wsctrl-panel .wsctrl-slider input[type="range"],
.wsctrl-panel.wsctrl-panel .wsctrl-slider input[type="range"],
.wsctrl-panel .wsctrl-slider input[type="range"],
.wsctrl-panel input[type="range"] {
  flex: 1 1 !important;
  height: 4px !important;
  background: rgba(107, 114, 128, 0.5) !important;
  border-radius: 2px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  pointer-events: all !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1001; /* REDUCED from 10001 to test CSS conflicts */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Wave controls slider thumb with high specificity */
.wave-controls-container .wsctrl-panel .wsctrl-slider input[type="range"]::-webkit-slider-thumb,
.wsctrl-panel.wsctrl-panel .wsctrl-slider input[type="range"]::-webkit-slider-thumb,
.wsctrl-panel .wsctrl-slider input[type="range"]::-webkit-slider-thumb,
.wsctrl-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  background: #667eea !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  -webkit-transition: background 0.2s !important;
  transition: background 0.2s !important;
  border: none !important;
  box-shadow: none !important;
}

/* Wave controls slider thumb hover with high specificity */
.wave-controls-container .wsctrl-panel .wsctrl-slider input[type="range"]::-webkit-slider-thumb:hover,
.wsctrl-panel.wsctrl-panel .wsctrl-slider input[type="range"]::-webkit-slider-thumb:hover,
.wsctrl-panel .wsctrl-slider input[type="range"]::-webkit-slider-thumb:hover,
.wsctrl-panel input[type="range"]::-webkit-slider-thumb:hover {
  background: #7c8ff0 !important;
}

/* Wave controls slider Firefox thumb with high specificity */
.wave-controls-container .wsctrl-panel .wsctrl-slider input[type="range"]::-moz-range-thumb,
.wsctrl-panel.wsctrl-panel .wsctrl-slider input[type="range"]::-moz-range-thumb,
.wsctrl-panel .wsctrl-slider input[type="range"]::-moz-range-thumb,
.wsctrl-panel input[type="range"]::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  background: #667eea !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: none !important;
  -moz-transition: background 0.2s !important;
  transition: background 0.2s !important;
}

/* Wave controls slider Firefox thumb hover with high specificity */
.wave-controls-container .wsctrl-panel .wsctrl-slider input[type="range"]::-moz-range-thumb:hover,
.wsctrl-panel.wsctrl-panel .wsctrl-slider input[type="range"]::-moz-range-thumb:hover,
.wsctrl-panel .wsctrl-slider input[type="range"]::-moz-range-thumb:hover,
.wsctrl-panel input[type="range"]::-moz-range-thumb:hover {
  background: #7c8ff0 !important;
}

/* Background opacity slider now uses same styling as other sliders */

/* Dropdown styles */
.wsctrl-panel .wsctrl-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wsctrl-panel .wsctrl-dropdown select {
  flex: 1 1;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #e5e7eb;
  font-size: 11px;
  font-family: 'Inter', 'Menlo', monospace;
  outline: none;
  cursor: pointer;
  pointer-events: all;
}

.wsctrl-panel .wsctrl-dropdown select:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(102, 126, 234, 0.5);
}

.wsctrl-panel .wsctrl-dropdown select:focus {
  background: rgba(0, 0, 0, 0.5);
  border-color: #667eea;
  box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.3);
}

.wsctrl-panel .wsctrl-dropdown select option {
  background: #1f2937;
  color: #e5e7eb;
}

.wsctrl-panel .wsctrl-value {
  min-width: 45px;
  text-align: right;
  color: #9ca3af;
  font-size: 10px;
  font-family: 'Inter', 'Menlo', monospace;
}

/* Editable value displays */
.wsctrl-panel .wsctrl-value.wsctrl-editable {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color 0.2s, color 0.2s;
}

.wsctrl-panel .wsctrl-value.wsctrl-editable:hover {
  background-color: rgba(102, 126, 234, 0.2);
  color: #d1d5db;
}

/* Value input field */
.wsctrl-panel .wsctrl-value-input {
  width: 50px;
  padding: 2px 4px;
  font-size: 10px;
  font-family: 'Inter', 'Menlo', monospace;
  background: rgba(31, 41, 55, 0.95);
  color: #f3f4f6;
  border: 1px solid #667eea;
  border-radius: 3px;
  outline: none;
  text-align: right;
}

.wsctrl-panel .wsctrl-value-input:focus {
  border-color: #7c8ff0;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.wsctrl-panel .wsctrl-color {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wsctrl-panel .wsctrl-color input[type="color"] {
  width: 60px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all !important;
  padding: 2px;
}

/* Style the color picker button itself */
.wsctrl-panel .wsctrl-color input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.wsctrl-panel .wsctrl-color input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

.wsctrl-panel .wsctrl-color input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 3px;
}

.wsctrl-panel .wsctrl-color .wsctrl-value {
  font-size: 10px;
  color: #9ca3af;
}

.wsctrl-panel .wsctrl-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  pointer-events: all !important;
}

.wsctrl-panel .wsctrl-button,
.wave-controls-container .wsctrl-button {
  width: 100%;
  padding: 8px 12px;
  margin-top: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  pointer-events: all !important;
  position: relative;
  z-index: 10001;
}

.wsctrl-panel .wsctrl-button:hover {
  opacity: 0.9;
}

.wsctrl-panel .wsctrl-button:active {
  transform: scale(0.98);
}

.wsctrl-save-message,
.wave-save-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, 0.9);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10001;
  animation: wsctrlFadeIn 0.3s ease;
}

.wsctrl-save-message.fade-out,
.wave-save-message.fade-out {
  animation: wsctrlFadeOut 0.5s ease;
  opacity: 0;
}

@keyframes wsctrlFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes wsctrlFadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}

/* Scrollbar styling for the controls - specific to wave controls */
.wsctrl-panel .wsctrl-content::-webkit-scrollbar {
  width: 6px;
}

.wsctrl-panel .wsctrl-content::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.5);
  border-radius: 3px;
}

.wsctrl-panel .wsctrl-content::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.5);
  border-radius: 3px;
}

.wsctrl-panel .wsctrl-content::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.7);
}
.start-session-cta-btn {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .start-session-cta-btn {
        margin-bottom: 12px;
    }
}

/* Writing component now uses shared .page-container class from styles/components.css */
/* Component-specific styling can be added with direct class names if needed */

/* Ensure writing content appears above wave background */
.writing-container {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* Gradient Start Button */
.gradient-start-btn {
    position: relative;
    overflow: hidden;
    width: -webkit-fit-content;
    width: fit-content;
    display: flex;
    padding: 1.2em 1rem;
    cursor: pointer;
    gap: 0.4rem;
    font-weight: bold;
    border-radius: 30px;
    text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
    background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
    background-size: 300%;
    color: #fff;
    border: none;
    background-position: left center;
    box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
    transition: all .5s ease;
    transition-property: background, box-shadow;
    align-items: center;
    font-size: 1rem;
    margin: 0 auto; /* Center the button */
}

/* Shine effect - continuous animation with delay when not hovered */
@keyframes shine {
    0% {
        transform: translateX(-100%);
    }
    20% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.gradient-start-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: translateX(-100%);
    animation: shine 4s infinite; /* Total 4s: ~1s sweep + 3s delay */
    pointer-events: none; /* Ensure shine doesn't interfere with clicks */
}

.gradient-start-btn:hover {
    background-size: 320%;
    background-position: right center;
    /* Animated flicker glow effect with gradient colors */
    animation: flickerGlow 1s ease-in-out infinite;
}

/* Looping flicker glow animation - reduced to 25% opacity */
@keyframes flickerGlow {
    0%, 100% {
        box-shadow: 0 0 3.5px rgba(204, 63, 71, 0.25),
                    0 0 10.5px rgba(222, 111, 61, 0.25),
                    0 0 21px rgba(240, 159, 51, 0.25),
                    0 0 35px rgba(170, 32, 104, 0.25),
                    0 30px 10px -20px rgba(0,0,0,.05);
    }
    20% {
        box-shadow: 0 0 7px rgba(204, 63, 71, 0.25),
                    0 0 21px rgba(222, 111, 61, 0.25),
                    0 0 42px rgba(240, 159, 51, 0.25),
                    0 0 63px rgba(170, 32, 104, 0.25),
                    0 30px 10px -20px rgba(0,0,0,.05);
    }
    40% {
        box-shadow: 0 0 5.6px rgba(240, 159, 51, 0.25),
                    0 0 17.5px rgba(204, 63, 71, 0.25),
                    0 0 35px rgba(170, 32, 104, 0.25),
                    0 0 70px rgba(222, 111, 61, 0.25),
                    0 30px 10px -20px rgba(0,0,0,.05);
    }
    60% {
        box-shadow: 0 0 10.5px rgba(170, 32, 104, 0.25),
                    0 0 28px rgba(240, 159, 51, 0.25),
                    0 0 49px rgba(204, 63, 71, 0.25),
                    0 0 77px rgba(222, 111, 61, 0.25),
                    0 30px 10px -20px rgba(0,0,0,.05);
    }
    80% {
        box-shadow: 0 0 4.9px rgba(222, 111, 61, 0.25),
                    0 0 14px rgba(170, 32, 104, 0.25),
                    0 0 31.5px rgba(204, 63, 71, 0.25),
                    0 0 56px rgba(240, 159, 51, 0.25),
                    0 30px 10px -20px rgba(0,0,0,.05);
    }
}

/* Stop shine animation on hover */
.gradient-start-btn:hover::before {
    animation: none;
    transform: translateX(-100%);
}

.gradient-start-btn:hover svg {
    fill: #fff;
}

.gradient-start-btn svg {
    position: relative;
    z-index: 1;
    width: 23px;
    height: 23px;
    fill: #f09f33;
    transition: .3s ease;
}

.gradient-start-btn span {
    position: relative;
    z-index: 1;
}

.gradient-start-btn:focus {
    outline: none;
    box-shadow: 0 30px 10px -20px rgba(0,0,0,.2), 0 0 0 3px rgba(136, 0, 136, 0.3);
}

.gradient-start-btn:active {
    transform: translateY(1px);
    box-shadow: 0 20px 10px -15px rgba(0,0,0,.2);
}

/* Floating points animation - 4x speed with smooth motion */
@keyframes floatUp {
    0% {
        bottom: -5px;
        opacity: 0;
        transform: scale(0) translateX(0);
    }
    10% {
        bottom: 10px;
        opacity: 0.4; /* Reduced visibility */
        transform: scale(1) translateX(5px);
    }
    30% {
        transform: scale(1) translateX(-3px);
    }
    50% {
        transform: scale(1) translateX(3px);
    }
    70% {
        transform: scale(1) translateX(-5px);
    }
    90% {
        bottom: 90%;
        opacity: 0.4; /* Reduced visibility */
        transform: scale(1) translateX(0);
    }
    100% {
        bottom: 100%;
        opacity: 0;
        transform: scale(0) translateX(0);
    }
}

/* Floating particles container */
.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 30px;
    pointer-events: none;
}

.float-point {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.45); /* Increased transparency - less visible */
    border-radius: 50%;
    bottom: -5px;
    animation: floatUp 3.75s infinite ease-in-out; /* 4x speed with smooth easing */
    pointer-events: none;
    z-index: 0;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4); /* Subtle glow */
}

.float-point:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 3s; /* 4x speed */
}

.float-point:nth-child(2) {
    left: 20%;
    animation-delay: 0.5s; /* Quarter delay */
    animation-duration: 3.75s; /* 4x speed */
    width: 2px;
    height: 2px;
}

.float-point:nth-child(3) {
    left: 35%;
    animation-delay: 1s; /* Quarter delay */
    animation-duration: 5s; /* 4x speed */
}

.float-point:nth-child(4) {
    left: 50%;
    animation-delay: 0s;
    animation-duration: 4.5s; /* 4x speed */
    width: 4px;
    height: 4px;
}

.float-point:nth-child(5) {
    left: 65%;
    animation-delay: 0.75s; /* Quarter delay */
    animation-duration: 3.5s; /* 4x speed */
}

.float-point:nth-child(6) {
    left: 75%;
    animation-delay: 0.5s; /* Quarter delay */
    animation-duration: 4s; /* 4x speed */
    width: 2px;
    height: 2px;
}

.float-point:nth-child(7) {
    left: 90%;
    animation-delay: 0.25s; /* Quarter delay */
    animation-duration: 2.75s; /* 4x speed */
}

.float-point:nth-child(8) {
    left: 5%;
    animation-delay: 1.2s;
    animation-duration: 3.2s;
}

.float-point:nth-child(9) {
    left: 15%;
    animation-delay: 0.8s;
    animation-duration: 4.2s;
    width: 2px;
    height: 2px;
}

.float-point:nth-child(10) {
    left: 30%;
    animation-delay: 1.5s;
    animation-duration: 2.8s;
}

.float-point:nth-child(11) {
    left: 45%;
    animation-delay: 0.3s;
    animation-duration: 3.9s;
    width: 4px;
    height: 4px;
}

.float-point:nth-child(12) {
    left: 60%;
    animation-delay: 1.8s;
    animation-duration: 3.3s;
}

.float-point:nth-child(13) {
    left: 80%;
    animation-delay: 0.6s;
    animation-duration: 4.5s;
    width: 2px;
    height: 2px;
}

.float-point:nth-child(14) {
    left: 95%;
    animation-delay: 1.1s;
    animation-duration: 2.5s;
}

/* Edit Session Header */
.edit-session-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.edit-session-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.save-changes-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.save-changes-btn:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    transform: translateY(-1px);
}

.save-changes-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.save-changes-btn svg {
    flex-shrink: 0;
}

.save-changes-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.save-changes-btn:disabled:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.save-changes-btn .spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.edit-session-back-section {
    margin-bottom: 1.5rem;
    text-align: left;
}

.edit-session-header h2 {
    color: #1e293b;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support background-clip */
    color: #4f46e5;
}

.edit-session-subtitle {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .edit-session-header {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .edit-session-header-controls {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .save-changes-btn {
        width: 100%;
        justify-content: center;
        order: -1; /* Save button first on mobile */
    }
    
    .edit-session-back-section {
        margin-bottom: 1rem;
    }
    
    .edit-session-header h2 {
        font-size: 1.5rem;
    }
    
    .edit-session-subtitle {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .edit-session-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .edit-session-header h2 {
        font-size: 1.25rem;
    }
    
    .edit-session-subtitle {
        font-size: 0.85rem;
    }
}

.writing-stats {
    margin-bottom: 2rem;
}

.stats-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.stats-section-title {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    text-align: center;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support background-clip */
    color: #4f46e5;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    width: 100%;
}

.stat-category {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    min-width: 0; /* Prevents overflow */
}

.stat-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-category-title {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    word-break: break-word;
}

.stat-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.75rem;
    gap: 0.75rem;
    align-items: stretch;
}

.stat-item {
    text-align: center;
    padding: 0.6rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    min-height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

.stat-item:hover {
    background: #f0f4ff;
    border-color: #c7d2fe;
}

.stat-item.full-width {
    grid-column: 1 / -1;
}

.stat-label {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value {
    display: block;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
    word-break: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value.streak {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.9rem;
    /* Fallback color */
    color: #f59e0b;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

/* Special styling for peak performance indicators */
.stat-category:nth-child(4) .stat-category-title {
    color: #7c3aed;
}

.stat-category:nth-child(5) .stat-category-title {
    color: #059669;
}

.stat-category:nth-child(6) .stat-category-title {
    color: #dc2626;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-category {
        padding: 1.25rem;
    }
    
    .stats-section {
        padding: 1.5rem;
        margin: 0 -0.5rem;
    }
    
    .stats-section-title {
        font-size: 1.25rem;
    }
    
    .words-counter {
        font-size: 1.5rem !important;
    }
    
    .time-counter {
        font-size: 1.5rem !important;
    }
    
    .stat-row {
        gap: 0.5rem;
    }
    
    .stat-value {
        font-size: 0.85rem;
    }
    
    .stat-item {
        min-height: 65px;
        padding: 0.5rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .stats-section {
        padding: 1rem;
        margin: 0 -1rem;
    }
    
    .stat-category {
        padding: 1rem;
    }
    
    .stat-value {
        font-size: 0.8rem;
    }
    
    .stat-item {
        min-height: 65px;
        padding: 0.5rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
    
    .words-counter {
        font-size: 1.25rem !important;
        letter-spacing: 0.25px;
    }
    
    .time-counter {
        font-size: 1.25rem !important;
        letter-spacing: 0.25px;
    }
}

/* Performance indicator animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.stat-value.streak {
    animation: pulse 2s infinite;
}

/* Hover effects for better interactivity */
.stat-category:hover .stat-category-title {
    color: #4f46e5;
}

.stat-category:hover .stat-value {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.session-setup {
    margin-bottom: 1rem;
}

.start-session {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.document-input {
    flex: 1 1;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
}

.session-options {
    background: var(--color-background-alt);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.focus-mode {
    margin-bottom: 1.5rem;
}

.focus-mode label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1e293b;
    font-weight: 500;
}

.focus-duration {
    margin-left: 1rem;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: white;
}

.session-goals {
    margin-bottom: 1.5rem;
}

.session-goals h4 {
    color: #1e293b;
    margin-bottom: 1rem;
}

.goal-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
}

.goal-input {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
}

.session-tags {
    margin-bottom: 1rem;
}

.session-tags h4 {
    color: #1e293b;
    margin-bottom: 1rem;
}

.session-tags-active {
    background: var(--color-background-alt);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    margin: 1rem 0; /* Changed from margin-bottom: 1.5rem */
}

.session-tags-active h4 {
    color: #1e293b;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.tag-description {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.tag-category-section {
    margin-bottom: 1.5rem;
}

.tag-category-section:last-child {
    margin-bottom: 0;
}

.tag-category-title {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag-category-title:before {
    content: '';
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}

.tag-category-description {
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    font-style: italic;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: white;
    color: #64748b;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.tag:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.process-tag {
    border-color: #10b981;
    color: #047857;
}

.process-tag:hover {
    background: #f0fdf4;
    border-color: #059669;
}

.process-tag.selected {
    background: #10b981;
    color: white;
    border-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.content-tag {
    border-color: #8b5cf6;
    color: #7c3aed;
}

.content-tag:hover {
    background: #faf5ff;
    border-color: #7c3aed;
}

.content-tag.selected {
    background: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.emotion-tag {
    border-color: #f59e0b;
    color: #d97706;
}

.emotion-tag:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.emotion-tag.selected {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.tag.selected {
    transform: translateY(-1px);
}

.start-btn,
.end-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.start-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
}

.start-btn:hover {
    background: #4338ca;
}

.end-btn {
    background: #ef4444;
    color: white;
}

.end-btn:hover {
    background: #dc2626;
}

.active-session {
    background: var(--color-background-alt);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    margin-bottom: 2rem;
}

.session-info {
    margin-bottom: 1rem;
}

.session-info h3 {
    color: #1e293b;
    margin-bottom: 1rem;
}

.session-info p {
    color: #64748b;
    margin-bottom: 0.5rem;
}

.words-counter {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 1rem !important;
    text-align: center;
    letter-spacing: 0.5px;
}

.time-counter {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 1rem !important;
    text-align: center;
    letter-spacing: 0.5px;
}

.time-unit {
    font-weight: 400 !important;
    color: #64748b !important;
    font-size: 1.5rem !important;
}

/* Counter Layout with Divider */
.counters-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.counter-box {
    flex: 1 1;
    text-align: center;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter-box .words-counter,
.counter-box .time-counter {
    white-space: nowrap;
    width: 100%;
}

/* Removed the gray divider line between words and time */
/* .counters-row::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 60%;
    background-color: #cbd5e1;
    border-radius: 1px;
} */

.counter-box .words-counter,
.counter-box .time-counter {
    margin-bottom: 0 !important;
    color: #1e293b;
}

/* Responsive design for counters */
@media (max-width: 768px) {
    .counters-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .counters-row::after {
        display: none;
    }
    
    .counter-box {
        padding: 0;
    }
}

.focus-timer {
    margin: 1rem 0;
    padding: 1rem;
    background: #f0fdf4;
    border-radius: 6px;
    border: 1px solid #86efac;
}

.timer-progress {
    height: 4px;
    background: #dcfce7;
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.goal-progress {
    margin: 1rem 0;
}

.progress-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.error-message {
    background: #fee2e2;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 2rem;
}

.error-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(220, 38, 38, 0.2);
}

.word-count-tracker {
    margin: 2rem 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
}

.word-count-tracker h4 {
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.tracker-description {
    color: #64748b;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

/* Crop End Time Section */
.crop-end-time-section {
    margin: 2rem 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
}

.crop-end-time-section h4 {
    color: #1e293b;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.time-display-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
}

.time-display-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.time-display-item label {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.time-value {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'SF Mono', Inter, 'Cascadia Code', monospace;
}

.crop-time-input-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.crop-time-input-group label {
    color: #475569;
    font-weight: 500;
    min-width: 100px;
}

.crop-time-input {
    flex: 1 1;
    max-width: 200px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    font-family: 'SF Mono', Inter, 'Cascadia Code', monospace;
    background: white;
}

.crop-time-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.crop-time-tips {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
}

.crop-time-tips p {
    margin: 0 0 0.5rem 0;
    color: #92400e;
    font-weight: 500;
}

.crop-time-tips ul {
    margin: 0;
    padding-left: 1.5rem;
    color: #78350f;
    font-size: 0.875rem;
}

.crop-time-tips li {
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .time-display-grid {
        grid-template-columns: 1fr;
    }
    
    .crop-time-input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .crop-time-input-group label {
        min-width: auto;
    }
    
    .crop-time-input {
        max-width: 100%;
    }
}

.word-count-input-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.word-count-add-section {
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.word-count-add-section .tracker-description {
    margin-bottom: 1rem;
    font-weight: 500;
}

.word-count-add-section .word-count-input-group {
    margin-bottom: 0;
}

.word-count-input {
    flex: 1 1;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    max-width: 280px;
    min-width: 250px;
}

.word-count-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.update-count-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.875rem;
    font-weight: 500;
}

.update-count-btn:hover:not(:disabled) {
    background: #4338ca;
}

.update-count-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.word-count-tips {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-top: 2.5rem;
}

.word-count-tips .tips-section {
    margin-bottom: 1.5rem;
}

.word-count-tips .tips-header {
    color: #1e293b;
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.word-count-tips p {
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.word-count-tips ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 0 0.5rem;
}

.word-count-tips li {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}

.word-count-tips li strong {
    color: #475569;
}

.word-count-tips li:before {
    content: '→';
    color: #4f46e5;
    font-weight: bold;
    display: inline-block;
    width: 1.25em;
    margin-left: -1.25em;
}

.word-count-tips .tips-reminder {
    background: #fef3c7;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
    margin-top: 1rem;
}

.word-count-tips .tips-reminder p {
    margin: 0;
    color: #92400e;
    font-size: 0.875rem;
}

/* Auto-share notice styles */
.session-completion-info {
    margin: 1.5rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
    border-radius: 8px;
}

.auto-share-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notice-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.auto-share-notice p {
    margin: 0;
    color: #0c4a6e;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Success message styles - Between clock and buttons */
.success-message {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #166534;
    padding: 0.75rem 1rem;
    margin: 1.5rem auto;
    border-radius: 30px;
    border: 2px solid #22c55e;
    font-weight: 500;
    animation: fadeInScale 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
    text-align: center;
    font-size: 0.95rem;
    width: auto;
    max-width: 500px;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Pause notification - Between clock and buttons */
.pause-notification {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 0.75rem 1rem;
    margin: 1.5rem auto;
    text-align: center;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(146, 64, 14, 0.15);
    animation: fadeInScale 0.3s ease-out;
    border-radius: 30px;
    border: 2px solid #f59e0b;
    font-size: 0.95rem;
    width: auto;
    max-width: 500px;
}

.pause-notification.auto-pause {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #3730a3;
    border-color: #6366f1;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideDownAccordion {
    from {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        max-height: 100px;
        opacity: 1;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Large Start Session Button */
.start-session-main {
    text-align: center;
    margin: 2rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.start-session-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 2rem 3rem;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: 280px;
    max-width: 400px;
    width: 100%;
    margin-bottom: 2rem;
}

.start-session-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

.start-session-btn:active {
    transform: translateY(-1px);
}

.btn-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.btn-text {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Session Title Section */
.session-title-section {
    margin-bottom: 1.5rem;
}

.session-title-section label {
    display: block;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.session-title-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    background: #ffffff;
    transition: border-color 0.2s;
}

.session-title-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.session-title-label {
    color: #1e293b;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Active Session Header */
.session-header {
    background: var(--color-background);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
}

.session-header h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-title-edit {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.session-title-edit:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.8);
}

.session-time {
    color: #64748b;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

.session-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.session-location {
    color: #0369a1;
    font-size: 0.875rem;
    font-weight: 500;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #bae6fd;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Session Comments */
.session-comments {
    margin: 2rem 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
}

.session-comments h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-notes-description {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.session-comment-textarea {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    background: #f8fafc;
    color: #1e293b;
    transition: border-color 0.2s, background-color 0.2s;
}

.session-comment-textarea:focus {
    outline: none;
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.session-comment-textarea::placeholder {
    color: #64748b;
}

/* Photo Upload */
.session-photo {
    margin: 2rem 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
}

.session-photo h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.photo-upload-section {
    position: relative;
}

.photo-upload-input {
    display: none;
}

.photo-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s;
    cursor: pointer;
}

.photo-upload-area:hover {
    border-color: #4f46e5;
    background: #f0f4ff;
}

.photo-upload-label {
    cursor: pointer;
    display: block;
    color: #64748b;
}

.upload-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.photo-upload-label div {
    margin-bottom: 0.25rem;
    color: #1e293b;
    font-weight: 500;
}

.photo-upload-label small {
    color: #64748b;
    font-size: 0.75rem;
}

.photo-preview {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.session-photo-preview {
    max-width: 300px;
    max-height: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.remove-photo-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}

.remove-photo-btn:hover {
    background: #dc2626;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 10;
}

.loading-overlay p {
    color: #4f46e5;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Session Actions */
.session-actions-primary {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
}



.session-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.delete-btn {
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.delete-svg-past-session {
    background: transparent;
    color: #9ca3af;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delete-svg-past-session:hover {
    background: #991b1b;
    color: white;
    transform: translateY(-1px);
}


/* Confirmation Dialog */
.confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.confirmation-dialog {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    animation: dialogAppear 0.2s ease-out;
}

@keyframes dialogAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.confirmation-dialog h3 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.confirmation-dialog p {
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.confirmation-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.cancel-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-btn:hover {
    background: #e2e8f0;
}

.confirm-delete-btn {
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-delete-btn:hover {
    background: #b91c1c;
}

/* Better responsive behavior for start button */
@media (max-width: 768px) {
    .start-session-content {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .start-session-btn {
        padding: 1.5rem 2rem;
        font-size: 1.1rem;
        min-width: 250px;
        gap: 0.75rem;
    }
    
    .btn-text {
        font-size: 1rem;
    }
    
    .btn-icon {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .start-session-content {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .start-session-btn {
        padding: 1.25rem 1.5rem;
        font-size: 1rem;
        min-width: 200px;
        gap: 0.5rem;
    }
    
    .start-session-main {
        margin-bottom: 1.5rem;
        padding: 0.5rem 0;
    }
}

/* Daily Writing Goal Progress Bar */
.daily-goal-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #0ea5e9;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
}

.daily-goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.daily-goal-title {
    color: #0c4a6e;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.daily-goal-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.goal-progress-text {
    color: #0c4a6e;
    font-size: 1rem;
    font-weight: 600;
}

.goal-percentage {
    color: #0ea5e9;
    font-size: 1.1rem;
    font-weight: 700;
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #7dd3fc;
}

.daily-goal-progress {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    height: 12px;
    overflow: hidden;
    border: 1px solid #bae6fd;
    margin-bottom: 1rem;
    position: relative;
}

.daily-goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    border-radius: 12px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.daily-goal-progress-fill:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.daily-goal-remaining {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.goal-completed {
    color: #059669;
    font-weight: 600;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #34d399;
    display: inline-block;
}

.goal-remaining {
    color: #0c4a6e;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .daily-goal-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .daily-goal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .daily-goal-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }
    
    .daily-goal-title {
        font-size: 1.1rem;
    }
    
    .goal-progress-text {
        font-size: 0.9rem;
    }
    
    .goal-percentage {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
    
    .daily-goal-remaining {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .daily-goal-section {
        padding: 1.25rem;
        border-radius: 12px;
    }
    
    .daily-goal-title {
        font-size: 1rem;
    }
    
    .goal-progress-text {
        font-size: 0.85rem;
    }
    
    .goal-percentage {
        font-size: 0.95rem;
        padding: 0.3rem 0.6rem;
    }
    
    .daily-goal-remaining {
        font-size: 0.8rem;
    }
}

/* Location Toggle Styles */
.location-section {
    margin-bottom: 2rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

.location-toggle {
    text-align: center;
}

.location-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.location-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #0ea5e9;
    cursor: pointer;
}

.location-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-status {
    font-size: 0.875rem;
    font-weight: 400;
}

.location-status.success {
    color: #059669;
}

.location-status.error {
    color: #dc2626;
}

.location-description {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
    font-style: normal;
}

.location-divider {
    margin: 1.5rem 0;
    text-align: center;
    position: relative;
}

.location-divider:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #cbd5e1;
    z-index: 1;
}

.location-divider span {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #64748b;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.manual-location {
    text-align: center;
}

.manual-location-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.manual-location-input {
    margin-top: 1rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.location-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.location-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.location-input::placeholder {
    color: #94a3b8;
    font-size: 0.85rem;
}

.manual-location-hint {
    color: #64748b;
    font-size: 0.75rem;
    margin: 0.5rem 0 0 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .location-section {
        margin: 0 -0.5rem 1.5rem -0.5rem;
        padding: 1.25rem;
    }
    
    .location-label {
        font-size: 0.95rem;
        gap: 0.5rem;
    }
    
    .location-description {
        font-size: 0.8rem;
    }
    
    .manual-location-label {
        font-size: 0.95rem;
        gap: 0.5rem;
    }
    
    .location-input {
        font-size: 0.85rem;
        padding: 0.65rem 0.85rem;
    }
    
    .location-input::placeholder {
        font-size: 0.8rem;
    }
    
    .manual-location-hint {
        font-size: 0.7rem;
    }
    
    .exact-location-toggle {
        margin-top: 0.75rem;
        padding: 0.75rem;
    }
    
    .exact-location-label {
        font-size: 0.85rem;
        gap: 0.5rem;
    }
    
    .exact-location-description {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .location-label {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .location-text {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .manual-location-label {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .location-input {
        font-size: 0.8rem;
        padding: 0.6rem 0.8rem;
    }
    
    .manual-location-input {
        max-width: 100%;
        padding: 0 0.5rem;
    }
    
    .exact-location-label {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .exact-location-toggle {
        margin-top: 0.5rem;
        padding: 0.6rem;
    }
}

.exact-location-toggle {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid #d1d5db;
}

.exact-location-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.exact-location-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exact-location-description {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.location-checkbox.small {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .session-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .session-location {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    
    .session-time {
        font-size: 0.8rem;
        margin-left: 0;
    }
}

/* Location Details Input */
.location-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e5e7eb;
}

.location-details-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
}

.location-details-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    background-color: #f9fafb;
}

.location-details-input:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.location-details-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

.location-details-description {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* Zip Code Lookup Styles */
.zip-code-lookup {
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(219, 234, 254, 0.3);
    border-radius: 8px;
    border: 1px solid #bfdbfe;
}

.zip-code-label {
    display: block;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.zip-code-input-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.zip-code-input {
    flex: 1 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
    max-width: 200px;
}

.zip-code-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.zip-code-input::placeholder {
    color: #94a3b8;
    font-size: 0.85rem;
}

.zip-lookup-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 80px;
}

.zip-lookup-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.zip-lookup-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.manual-input-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Mobile responsive for zip code section */
@media (max-width: 768px) {
    .zip-code-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .zip-code-input {
        max-width: 100%;
    }
    
    .zip-lookup-btn {
        width: 100%;
        padding: 0.7rem 1rem;
    }
    
    .zip-code-lookup {
        padding: 0.75rem;
    }
    
    .zip-code-label {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .zip-code-lookup {
        margin: 0 -0.5rem 1rem -0.5rem;
        border-radius: 6px;
    }
    
    .zip-code-input {
        font-size: 0.85rem;
        padding: 0.55rem 0.7rem;
    }
    
    .zip-lookup-btn {
        font-size: 0.8rem;
        padding: 0.6rem 0.9rem;
    }
}

/* Session Location Management - Improved Structure */
.session-location-management {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.session-location-management h4 {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.location-intro {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* Current Location Card */
.current-location-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.location-card-header h5 {
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.location-status {
    font-size: 1rem;
    font-weight: 500;
}

.location-loading {
    color: #3b82f6;
}

.location-found {
    color: #059669;
}

.location-none {
    color: #6b7280;
}

/* Update Location Section */
.location-update-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.update-section-header h5,
.zip-section-header h5,
.details-section-header h5,
.privacy-section-header h5 {
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.update-section-header p,
.zip-section-header p,
.details-section-header p,
.privacy-section-header p {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.quick-location-input {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.location-input {
    flex: 1 1;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
}

.location-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.update-location-btn {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.update-location-btn:hover:not(:disabled) {
    background: #2563eb;
}

.update-location-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Location Examples */
.location-examples {
    margin-top: 0.75rem;
}

.examples-label {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.example-item {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

/* ZIP Code Lookup Section */
.zip-lookup-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.zip-input-container {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.zip-input {
    width: 120px;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    text-align: center;
}

.zip-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.zip-lookup-btn {
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.zip-lookup-btn:hover:not(:disabled) {
    background: #059669;
}

.zip-lookup-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.zip-example {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0;
}

/* Location Details Section */
.location-details-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.location-details-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.location-details-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.details-note {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0;
}

/* Privacy Settings Section */
.privacy-settings-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
}

.privacy-option-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.privacy-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.privacy-input {
    margin: 0;
    margin-top: 0.125rem;
}

.privacy-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.privacy-label {
    color: #374151;
    font-weight: 500;
    font-size: 0.95rem;
}

.privacy-description {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.privacy-explanation {
    padding: 0.75rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
}

.privacy-note {
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.privacy-note strong {
    color: #78350f;
}

/* Responsive Design for Location Management */
@media (max-width: 768px) {
    .session-location-management {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .location-input-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .update-location-btn {
        width: 100%;
    }
    
    .zip-input-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .zip-code-input {
        width: 100%;
        text-align: left;
    }
    
    .zip-lookup-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .session-location-management {
        padding: 0.75rem;
    }
    
    .session-location-management h4 {
        font-size: 1rem;
    }
    
    .location-description {
        font-size: 0.8rem;
    }
}

/* Session Control Buttons */
.session-controls {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 2rem;
    border: none;
    box-shadow: none;
}

/* Combined Timer Section with Status Bar */
.timer-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1.5rem;
    border: none;
    box-shadow: none;
}

.session-status-indicator {
    text-align: center;
    margin-bottom: 1.5rem;
}

.status-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.status-main {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.75px;
}

.status-time {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.25px;
    text-transform: none;
    opacity: 0.9;
}

.status-badge.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.status-badge.paused {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.control-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1 1;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.control-btn:active {
    transform: translateY(0);
}

.pause-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.pause-btn:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.resume-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.resume-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}



.session-cancel-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.session-cancel-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.btn-text {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Responsive Design for Session Controls */
@media (max-width: 768px) {
    .session-controls {
        padding: 0;
        margin-bottom: 1.5rem;
    }
    
    .timer-section {
        padding: 0;
        margin-bottom: 1.25rem;
    }
    
    .control-buttons {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    
    .control-btn {
        width: auto;
        max-width: 300px;
        padding: 1rem 1.25rem;
        min-width: 200px;
    }
    
    .status-badge {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        width: 100%;
    }
    
    .btn-text {
        font-size: 0.8rem;
    }
    
    /* Mobile timer styles */
    .session-timer {
        padding: 1.25rem;
    }
    
    /* Timer display now uses clamp() for responsive sizing */
    
    .timer-label {
        font-size: 0.8rem;
    }
    
    /* Word count input groups - wrap on mobile */
    .word-count-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .word-count-input {
        max-width: 100%;
        width: 100%;
    }
    
    .word-count-input-group .shared-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .session-controls {
        padding: 0;
        margin: 0 0 1.5rem 0;
        border-radius: 0;
    }
    
    .timer-section {
        padding: 0;
        margin-bottom: 1rem;
    }
    
    .control-btn {
        padding: 0.875rem 1rem;
        font-size: 0.8rem;
    }
    
    .status-badge {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        min-width: 200px;
    }
    
    /* Small mobile timer styles */
    .session-timer {
        padding: 1rem;
    }
    
    /* Timer display now uses clamp() for responsive sizing */
    
    .timer-label {
        font-size: 0.75rem;
    }
}

.update-location-description,
.details-description,
.privacy-description {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-style: italic;
}

/* Digital Clock Styles */
.session-timer {
    text-align: center;
    margin: 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 16px;
    border: 2px solid #475569;
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    width: 100%;
}

.writing-timer .timer-display,
.writing-container .timer-display {
    font-family: 'Courier New', 'Inter', monospace;
    font-size: clamp(1.5rem, 5vw, 3.5rem) !important;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 
        0 0 10px rgba(0, 255, 136, 0.5),
        0 0 20px rgba(0, 255, 136, 0.3),
        0 0 30px rgba(0, 255, 136, 0.2);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timer-label {
    font-size: 0.9rem;
    color: #94a3b8;
    text-align: center;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* Loading Session State */
.loading-session {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
}

.loading-session p {
    margin-top: 1rem;
    font-size: 1.1rem;
    color: #4a5568;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #4f46e5;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Start Session Interface */
.start-session-interface {
    /* Removed redundant container styles: padding, background, border-radius, border, box-shadow, margin */
    /* These are now handled by the shared page-container class */
}

/* Override main-header-main-pages for the writing interface to ensure proper grid layout */
.writing-container .start-session-interface .main-header-main-pages {
    display: grid !important;
    grid-template-columns: 100px 1fr !important;
    grid-gap: 32px !important;
    gap: 32px !important;
    align-items: center !important;
    margin-bottom: 32px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    -webkit-backdrop-filter: blur(10px) !important;
            backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: visible !important;
    min-height: 150px !important;
    position: relative !important;
}

.writing-container .start-session-interface .header-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100px !important;
    height: 80px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

.writing-container .start-session-interface .header-icon svg {
    width: 48px !important;
    height: 48px !important;
    color: #ffffff !important;
}

.writing-container .start-session-interface .header-content {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
}

.writing-container .start-session-interface .header-content h1 {
    margin: 0 0 8px 0 !important;
    font-size: 2.5rem !important;
    color: #ffffff !important;
    display: block !important;
    text-align: left !important;
}

.writing-container .start-session-interface .header-content p {
    margin: 0 0 24px 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.1rem !important;
    display: block !important;
}

.writing-container .start-session-interface .gradient-start-btn {
    margin: 24px 0 0 0 !important; /* Top margin only, no auto-centering */
    width: -webkit-fit-content !important;
    width: fit-content !important;
    position: relative !important;
    z-index: 1 !important;
}

.start-session-content {
    background: white;
    border-radius: 8px;
    padding: 32px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
}

.start-session-content h2 {
    color: #1e293b;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.start-session-content p {
    color: #64748b;
    font-size: 1.1rem;
    margin: 0 0 2rem 0;
    max-width: 500px;
    line-height: 1.6;
}



/* ====== SECTION STYLING FOR TWO-PART LAYOUT ====== */

/* Section Headers */
.section-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    color: #000000;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title-icon {
    flex-shrink: 0;
    color: #000000;
}

.section-description {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
    text-align: right;
}

/* Part 1: Session Tracking Section */
.session-tracking-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.session-tracking-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899, #f59e0b);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}

/* Part 2: Session Post Section */
.session-post-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.session-post-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899, #f59e0b);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}



/* Enhanced styling for components within sections */
.session-tracking-section .session-info,
.session-tracking-section .word-count-tracker,
.session-tracking-section .session-header {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.session-post-section .session-comments,
.session-post-section .session-tags-active,
.session-post-section .session-photo,
.session-post-section .session-location-management,
.session-post-section .session-header {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .session-tracking-section,
    .session-post-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }
    
    .section-header {
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .section-title {
        font-size: 1.25rem;
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .section-description {
        font-size: 0.9rem;
        text-align: center;
    }
    
    /* Ensure timer display uses clamp for dynamic sizing */
    .writing-timer .timer-display,
    .writing-container .timer-display,
    .timer-display {
        font-size: clamp(1.5rem, 5vw, 3.5rem) !important;
    }
}

@media (max-width: 480px) {
    .session-tracking-section,
    .session-post-section {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }
    
    .section-header {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }
    
    .section-title {
        font-size: 1.1rem;
        white-space: normal;
        justify-content: center;
    }
    
    .section-description {
        font-size: 0.85rem;
        text-align: center;
    }
    
    .session-tracking-section .session-info,
    .session-tracking-section .word-count-tracker,
    .session-tracking-section .session-header,
    .session-post-section .session-comments,
    .session-post-section .session-tags-active,
    .session-post-section .session-photo,
    .session-post-section .session-location-management,
    .session-post-section .session-header {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }
}

/* Favorite Locations Toggle Button */
.favorite-locations-toggle {
    margin-bottom: 1rem;
    text-align: center;
}

.toggle-favorites-btn {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0369a1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-favorites-btn:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-color: #0ea5e9;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}

.toggle-favorites-btn.active {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    color: #1d4ed8;
}

.toggle-favorites-btn.active:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    border-color: #2563eb;
}

@media (max-width: 768px) {
    .toggle-favorites-btn {
        font-size: 0.8rem;
        padding: 0.6rem 0.8rem;
    }
}

/* Simplified Location Management */
.session-location-management {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Location Status Card */
.location-status-card {
    margin-bottom: 1.5rem;
}

.status-card-header h4 {
    color: #374151;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.current-location-display {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
}

.location-loading-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #6b7280;
    font-size: 0.95rem;
}

.loading-spinner-inline {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
}

.location-found-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #374151;
    font-size: 0.95rem;
}

.location-icon-status {
    font-size: 1.1rem;
}

.location-text {
    flex: 1 1;
    font-weight: 500;
}

.location-success-badge {
    background: #10b981;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.location-none-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #6b7280;
    font-size: 0.95rem;
}

.location-hint {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-left: auto;
}

/* Advanced Options */
.location-advanced-options {
    margin-top: 1.5rem;
    border-top: 1px solid #f3f4f6;
    padding-top: 1.5rem;
}

.advanced-details {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.advanced-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    cursor: pointer;
    list-style: none;
    outline: none;
    transition: all 0.2s ease;
}

.advanced-summary:hover {
    background: #f1f5f9;
}

.summary-icon {
    font-size: 1rem;
}

.summary-text {
    flex: 1 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.summary-arrow {
    font-size: 0.8rem;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.advanced-details[open] .summary-arrow {
    transform: rotate(180deg);
}

.advanced-content {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: white;
}

.advanced-option {
    margin-bottom: 1.5rem;
}

.advanced-option:last-child {
    margin-bottom: 0;
}

.advanced-option h6 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.option-description {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

/* Compact Input Styles */
.zip-input-row {
    display: flex;
    gap: 0.5rem;
}

.zip-input-compact {
    flex: 1 1;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    color: #374151;
    transition: border-color 0.2s ease;
    max-width: 120px;
}

.zip-input-compact:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.zip-lookup-btn-compact {
    padding: 0.6rem 1rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zip-lookup-btn-compact:hover:not(:disabled) {
    background: #2563eb;
}

.zip-lookup-btn-compact:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.details-input-compact {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    color: #374151;
    transition: border-color 0.2s ease;
}

.details-input-compact:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Privacy Toggle */
.privacy-toggle-simple {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.privacy-checkbox-simple {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.privacy-checkbox-simple:checked + .toggle-slider {
    background: #3b82f6;
}

.privacy-checkbox-simple:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-label {
    flex: 1 1;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
}

.toggle-label small {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 400;
    margin-top: 0.125rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .session-location-management {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .status-card-header h4 {
        font-size: 1rem;
    }

    .current-location-display {
        padding: 0.875rem;
    }

    .advanced-summary {
        padding: 0.875rem;
    }

    .advanced-content {
        padding: 1rem;
    }

    .zip-input-row {
        flex-direction: column;
    }

    .zip-input-compact {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .session-location-management {
        padding: 0.875rem;
    }

    .location-found-display,
    .location-none-display,
    .location-loading-inline {
        font-size: 0.875rem;
    }

    .location-hint {
        font-size: 0.75rem;
        margin-top: 0.25rem;
        margin-left: 0;
        width: 100%;
    }

    .location-none-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .summary-text {
        font-size: 0.85rem;
    }

    .advanced-option h6 {
        font-size: 0.85rem;
    }

    .option-description {
        font-size: 0.75rem;
    }
}

/* Session Information Container */
.session-info-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.session-info-title {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.session-current-title {
    font-size: 1.1rem;
    color: #2563eb;
    margin: 0 0 1rem 0;
    padding: 0.5rem 0;
    text-align: center;
}

.session-current-title strong {
    font-weight: 600;
}

.session-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.75rem;
    gap: 0.75rem;
}

.session-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.session-info-label {
    color: #64748b;
    font-weight: 500;
    font-size: 0.875rem;
}

.session-info-value {
    color: #1e293b;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Responsive layout for session info */
@media (max-width: 768px) {
    .session-info-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .session-info-item {
        font-size: 0.8rem;
    }

    .session-info-label,
    .session-info-value {
        font-size: 0.8rem;
    }

    .session-info-title {
        font-size: 0.9rem;
    }

    .session-current-title {
        font-size: 1rem;
        margin: 0 0 0.75rem 0;
        padding: 0.375rem 0;
    }
}

/* Session Details Combined Section */
.session-details {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}



.session-details .section-title {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    text-align: center;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support background-clip */
    color: #4f46e5;
}



/* Session Title Heading - now directly in main container */
.session-details .session-title-heading {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

/* Session Title Input - now directly in main container */
.session-details .session-title-edit {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease;
    margin-bottom: 1.5rem;
}

.session-details .session-title-edit:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    background: #ffffff;
}

.session-photo-section,
.session-notes-section,
.session-title-section {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.session-photo-section:hover,
.session-notes-section:hover,
.session-title-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.session-photo-section h4,
.session-notes-section h4,
.session-title-section h4 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

/* Session Meta Info */
.session-details .session-meta {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.session-details .session-location,
.session-details .session-time {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.session-details .session-location {
    color: #059669;
}

/* Photo Section Enhanced Styling */
.session-photo-section .photo-upload-section {
    margin-top: 0.5rem;
}

.session-photo-section .photo-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    background: #fafbfc;
    transition: all 0.3s ease;
}

.session-photo-section .photo-upload-area:hover {
    border-color: #4f46e5;
    background: #f0f4ff;
}

.session-photo-section .upload-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.session-photo-section .photo-upload-label div {
    color: #374151;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.session-photo-section .photo-upload-label small {
    color: #6b7280;
    font-size: 0.85rem;
}

/* Session Notes Enhanced Styling */
.session-notes-section .session-notes-description {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    border-left: 3px solid #4f46e5;
}

.session-notes-section .session-comment-textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151;
    background: #ffffff;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 120px;
}

.session-notes-section .session-comment-textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    background: #fafbff;
}

.session-notes-section .session-comment-textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Session Title Enhanced Styling */
.session-title-section .session-title-description {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.session-title-section .session-title-edit {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151;
    background: #ffffff;
    transition: all 0.2s ease;
}

.session-title-section .session-title-edit:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    background: #fafbff;
}

.session-title-section .session-title-edit::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Responsive Design for Session Details */
@media (max-width: 768px) {
    .session-details {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .session-details .section-title {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .session-photo-section,
    .session-notes-section,
    .session-title-section {
        padding: 1.25rem;
    }

    .session-details .session-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .session-details {
        padding: 1rem;
        margin: 0 -0.5rem 1.5rem -0.5rem;
    }

    .session-details .section-title {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .session-photo-section,
    .session-notes-section,
    .session-title-section {
        padding: 1rem;
    }

    .session-photo-section h4,
    .session-notes-section h4,
    .session-title-section h4 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .session-details .session-title-heading {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .session-photo-section .photo-upload-area {
        padding: 1.5rem;
    }

    .session-notes-section .session-comment-textarea {
        min-height: 100px;
        font-size: 0.9rem;
    }
}







.display-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #64748b;
    -webkit-user-select: none;
            user-select: none;
}

.toggle-checkbox {
    display: none;
}

.display-toggle .toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.3s ease;
}

.display-toggle .toggle-slider:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-checkbox:checked + .display-toggle .toggle-slider {
    background: #4f46e5;
}

.toggle-checkbox:checked + .display-toggle .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-text {
    font-weight: 500;
}

.map-availability-note {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    font-style: italic;
}



.no-location-message {
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border-radius: 8px;
    border: 2px dashed #cbd5e1;
}

.no-location-message p {
    margin: 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .location-map-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .display-toggle {
        font-size: 0.85rem;
    }

    .map-placeholder {
        padding: 1.5rem 1rem;
    }

    .map-icon {
        font-size: 1.75rem;
    }
}

.map-privacy-controls {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.privacy-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.privacy-option {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.9rem;
    color: #374151;
}

.privacy-radio {
    margin: 0 0.5rem 0 0;
    accent-color: #4f46e5;
}

.privacy-option-text {
    flex: 1 1;
    line-height: 1.4;
}

.map-image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}

.map-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.map-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 1rem 0.75rem 0.5rem;
    color: white;
}

.map-overlay .map-location {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.map-overlay .map-precision {
    font-size: 0.75rem;
    opacity: 0.9;
    margin: 0;
}

.map-preview.loading .map-placeholder {
    animation: mapPulse 1.5s ease-in-out infinite;
}

.map-preview.error .map-placeholder {
    border-color: #fecaca;
    background: #fef2f2;
}

.map-preview.error .map-text {
    color: #dc2626;
}

.error-text {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-style: italic;
}

@keyframes mapPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.map-preview.coordinates .coordinates-display {
    padding: 0.75rem;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #64748b;
}

.coordinates-info {
    margin: 0;
    line-height: 1.4;
}

.coordinates-info small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

.open-map-link {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: #4f46e5;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.open-map-link:hover {
    background: #4338ca;
    text-decoration: none;
}

@media (max-width: 768px) {
    .map-privacy-controls {
        padding: 0.75rem;
    }

    .privacy-options {
        gap: 0.5rem;
    }

    .privacy-option {
        font-size: 0.85rem;
    }

    .map-image {
        height: 160px;
    }

    .map-overlay {
        padding: 0.75rem 0.5rem 0.375rem;
    }
}

@media (max-width: 480px) {
    .location-map-display-section {
        padding: 1.25rem;
    }

    .location-map-header h4 {
        font-size: 1rem;
    }

    .toggle-text {
        font-size: 0.85rem;
    }

    .map-placeholder {
        padding: 1.5rem 1rem;
    }
    
    .privacy-options {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .privacy-option {
        font-size: 0.8rem;
    }
    
    .map-image {
        height: 140px;
    }
    
    .map-overlay .map-location {
        font-size: 0.8rem;
    }
    
    .map-overlay .map-precision {
        font-size: 0.7rem;
    }
}

/* Map Attribution - Required for OpenStreetMap compliance */
.map-attribution {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    color: #666;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.map-attribution small {
    margin: 0;
    font-size: inherit;
}

/* Location Accuracy Controls */
.location-accuracy-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.location-accuracy-section h4 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.location-accuracy-note {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.location-accuracy-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accuracy-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accuracy-option {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    transition: all 0.2s ease;
}

.accuracy-option:hover {
    border-color: #c7d2fe;
    background: #f0f4ff;
}

.accuracy-option input[type="radio"] {
    margin: 0 0.75rem 0 0;
    accent-color: #4f46e5;
}

.accuracy-option input[type="radio"]:checked + .accuracy-option-text {
    color: #4f46e5;
    font-weight: 600;
}

.accuracy-option-text {
    flex: 1 1;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #374151;
}

.accuracy-option-text strong {
    font-weight: 600;
    color: #1e293b;
}

.accuracy-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.refresh-location-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.refresh-location-btn:hover:not(:disabled) {
    background: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
}

.refresh-location-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.accuracy-actions small {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .location-accuracy-section {
        padding: 1.25rem;
        margin: 0.75rem 0;
    }
    
    .accuracy-option {
        padding: 0.5rem;
    }
    
    .accuracy-option-text {
        font-size: 0.85rem;
    }
    
    .refresh-location-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .location-accuracy-section {
        padding: 1rem;
    }
    
    .accuracy-options {
        gap: 0.5rem;
    }
    
    .accuracy-option {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    .accuracy-option-text {
        font-size: 0.8rem;
    }
    
    .refresh-location-btn,
    .manual-correction-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .location-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}

/* GPS Info Section */
.gps-info-section {
    margin: 1rem 0;
}

.gps-details {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.gps-summary {
    padding: 0.75rem 1rem;
    background: #e2e8f0;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
    border: none;
    outline: none;
    -webkit-user-select: none;
            user-select: none;
}

.gps-summary:hover {
    background: #d1d5db;
}

.gps-content {
    padding: 1rem;
    background: white;
}

.coordinates-display {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.coordinates-display p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.location-verification {
    padding: 0.75rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
}

.location-verification p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.verify-location-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.5rem;
    transition: background 0.2s ease;
}

.verify-location-link:hover {
    background: #2563eb;
    color: white;
}

/* Location Buttons */
.location-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.manual-correction-btn {
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.manual-correction-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

/* Manual Location Correction */
.manual-location-correction {
    margin-top: 1rem;
    padding: 1rem;
    background: #fef7ff;
    border: 1px solid #d946ef;
    border-radius: 8px;
}

.manual-location-correction h5 {
    margin: 0 0 0.5rem 0;
    color: #7c2d12;
    font-size: 1rem;
    font-weight: 600;
}

.correction-note {
    margin: 0 0 0.75rem 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.correction-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.manual-location-input {
    flex: 1 1;
    padding: 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.manual-location-input:focus {
    border-color: #d946ef;
    box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.1);
}

.apply-correction-btn {
    background: #d946ef;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.apply-correction-btn:hover:not(:disabled) {
    background: #c026d3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(217, 70, 239, 0.3);
}

.apply-correction-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .gps-content {
        padding: 0.75rem;
    }
    
    .correction-input-group {
        flex-direction: column;
    }
    
    .apply-correction-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .map-attribution {
        font-size: 9px;
        padding: 1px 4px;
        bottom: 2px;
        right: 2px;
    }
}

/* ===== CONSISTENT SECTION SPACING RULES ===== */
/* All session sections should have consistent 1rem spacing */

/* LocationSelector and ProjectSelector - add consistent margin */
.location-selector,
.project-selector {
    margin: 1rem 0;
}

/* Project Time Chart */
.project-time-chart {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.project-time-chart h5 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.time-chart-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.time-bar {
    display: flex;
    height: 20px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.time-segment {
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.time-segment:last-child {
    border-right: none;
}

.time-segment.active {
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
    z-index: 1;
}

.time-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-text {
    color: #4b5563;
    line-height: 1.4;
}

.live-indicator {
    color: #10b981;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Dark theme for project time chart - only for system theme with dark preference or explicit dark theme */
[data-theme="dark"] .project-time-chart {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .project-time-chart h5 {
    color: #f1f5f9;
}

[data-theme="dark"] .time-bar {
    background: #334155;
}

[data-theme="dark"] .legend-text {
    color: #cbd5e1;
}

[data-theme="dark"] .live-indicator {
    color: #34d399;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .project-time-chart {
        background: #1e293b;
        border-color: #334155;
    }

    [data-theme="system"] .project-time-chart h5 {
        color: #f1f5f9;
    }

    [data-theme="system"] .time-bar {
        background: #334155;
    }

    [data-theme="system"] .legend-text {
        color: #cbd5e1;
    }

    [data-theme="system"] .live-indicator {
        color: #34d399;
    }
}

/* Post Image Management Section */
.post-image-management-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.image-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.image-manager-header h4 {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.image-manager-description {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.refresh-images-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.refresh-images-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #334155;
}

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

.image-option {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.image-option.available {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.image-option.available:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}

.image-option.unavailable {
    opacity: 0.6;
    background: #f8fafc;
}

.image-preview {
    width: 100%;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-option.available .preview-image:hover {
    transform: scale(1.05);
}

.no-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
}

.placeholder-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.placeholder-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.image-controls {
    space-y: 0.75rem;
}

.image-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.image-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.image-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.image-status.included {
    background: #dcfce7;
    color: #166534;
}

.image-status.excluded {
    background: #fef2f2;
    color: #dc2626;
}

.image-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background-color: #10b981;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.primary-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.primary-btn.active {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.primary-image-summary {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.summary-header {
    margin-bottom: 1rem;
}

.summary-header h5 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.summary-text {
    color: #64748b;
    font-size: 0.9rem;
}

.summary-text strong {
    color: #1e293b;
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .post-image-management-section {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }

    .image-manager-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .available-images-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .image-preview {
        height: 140px;
    }

    .image-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .summary-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .post-image-management-section {
        padding: 1rem;
        margin: 1rem 0;
    }

    .image-manager-header h4 {
        font-size: 1.3rem;
    }

    .image-option {
        padding: 0.75rem;
    }

    .image-preview {
        height: 120px;
    }

    .refresh-images-btn {
        width: 100%;
        text-align: center;
    }
}

/* Session Controls Footer */
.session-controls-footer {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    margin: 3rem 0 2rem 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.session-controls-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899, #f59e0b);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.footer-controls-header {
    text-align: center;
    margin-bottom: 2rem;
}

.footer-controls-header h3 {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.footer-controls-header h3::before {
    content: '⚡';
    font-size: 1.2rem;
}

.footer-controls-header p {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.footer-control-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 2rem;
}

.footer-control-btn {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-height: 80px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.footer-control-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.footer-control-btn:hover::before {
    left: 100%;
}

.footer-control-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #cbd5e1;
}

.footer-control-btn:active {
    transform: translateY(-1px);
}

.footer-control-btn .btn-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.footer-control-btn .btn-text {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Individual button colors */
.footer-control-btn.pause-btn {
    color: #f59e0b;
    border-color: #fbbf24;
}

.footer-control-btn.pause-btn:hover {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
    color: #d97706;
}

.footer-control-btn.resume-btn {
    color: #10b981;
    border-color: #34d399;
}

.footer-control-btn.resume-btn:hover {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
    color: #047857;
}

.footer-control-btn.end-btn {
    color: #3b82f6;
    border-color: #60a5fa;
}

.footer-control-btn.end-btn:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    color: #1d4ed8;
}



.footer-control-btn.cancel-btn {
    color: #ef4444;
    border-color: #f87171;
}

.footer-control-btn.cancel-btn:hover {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
    color: #dc2626;
}

/* Session Summary */
.session-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
}

.summary-stat {
    text-align: center;
    padding: 0.5rem;
}

.summary-label {
    display: block;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.summary-value {
    display: block;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.summary-value.active {
    color: #10b981;
}

.summary-value.paused {
    color: #f59e0b;
}

/* Responsive Design */
@media (max-width: 768px) {
    .session-controls-footer {
        padding: 1.5rem;
        margin: 2rem 0 1.5rem 0;
    }
    
    .footer-controls-header h3 {
        font-size: 1.25rem;
    }
    
    .footer-control-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .footer-control-btn {
        padding: 0.75rem 1rem;
        min-height: 70px;
    }
    
    .footer-control-btn .btn-icon {
        font-size: 1.25rem;
    }
    
    .footer-control-btn .btn-text {
        font-size: 0.8rem;
    }
    
    .session-summary {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .summary-value {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .session-controls-footer {
        padding: 1rem;
        margin: 1.5rem 0 1rem 0;
    }
    
    .footer-controls-header h3 {
        font-size: 1.1rem;
    }
    
    .footer-controls-header p {
        font-size: 0.9rem;
    }
    
    .footer-control-buttons {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .footer-control-btn {
        padding: 0.75rem;
        min-height: 60px;
        flex-direction: row;
        gap: 0.75rem;
    }
    
    .footer-control-btn .btn-icon {
        font-size: 1.1rem;
    }
    
    .footer-control-btn .btn-text {
        font-size: 0.85rem;
    }
    
    .session-summary {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.5rem;
    }
    
    .summary-stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .summary-stat:last-child {
        border-bottom: none;
    }
    
    .summary-label {
        margin-bottom: 0;
        text-align: left;
    }
    
    .summary-value {
        font-size: 1rem;
    }
}

/* End Session Button */
.control-btn.end-session-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: #0284c7;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.control-btn.end-session-btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-color: #0369a1;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

.control-btn.end-session-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.control-btn.end-session-btn .btn-icon {
    font-size: 1.2rem;
}

.control-btn.end-session-btn .btn-text {
    font-weight: 600;
}

/* Control Button SVG Icons */
.control-btn .btn-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: all 0.2s ease;
}

.control-btn:hover .btn-icon svg {
    transform: scale(1.1);
}

/* End Session Button */

/* Share Your Experience Section Styles */
.share-experience-section {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.share-experience-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.share-experience-section h4 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.experience-description {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.session-comment-textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fafafa;
}

.session-comment-textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    background: #ffffff;
}

.session-comment-textarea::placeholder {
    color: #94a3b8;
    font-style: italic;
}

.comment-info {
    margin-top: 0.5rem;
}

.comment-info small {
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Photo Upload in Post Images Grid */
.photo-upload-section-grid {
    margin: 0.75rem 0;
}

.photo-upload-area-grid {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s;
    cursor: pointer;
    margin-bottom: 0.75rem;
}

.photo-upload-area-grid:hover {
    border-color: #4f46e5;
    background: #f0f4ff;
}

.photo-upload-label-grid {
    cursor: pointer;
    display: block;
    color: #64748b;
}

.photo-upload-label-grid .upload-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.photo-upload-label-grid div {
    margin-bottom: 0.25rem;
}

.photo-upload-label-grid small {
    color: #94a3b8;
    font-size: 0.75rem;
}

.remove-photo-btn-grid {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.remove-photo-btn-grid:hover {
    background: #dc2626;
}

/* Session Photos Section */
.session-photos-section {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #ffffff;
}

.session-photos-header h5 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
}

.session-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-top: 1rem;
}

.session-photos-grid .image-option {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    background: #ffffff;
}

.session-photos-grid .image-option.available {
    border-color: #10b981;
}

.session-photos-grid .image-preview {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.session-photos-grid .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.session-photos-grid .image-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.session-photos-grid .image-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.session-photos-grid .image-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

.session-photos-grid .image-status {
    font-size: 0.75rem;
}

.session-photos-grid .image-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.session-photos-grid .toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.session-photos-grid .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.session-photos-grid .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.2s;
    border-radius: 24px;
}

.session-photos-grid .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
}

.session-photos-grid input:checked + .slider {
    background-color: #10b981;
}

.session-photos-grid input:checked + .slider:before {
    transform: translateX(20px);
}

.session-photos-grid .primary-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.session-photos-grid .primary-btn:hover {
    background: #4338ca;
}

.session-photos-grid .primary-btn.active {
    background: #f59e0b;
}

.session-photos-grid .primary-btn.active:hover {
    background: #d97706;
}

/* Writing Tips Section */
.writing-tips-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tips-header {
    text-align: left;
    margin-bottom: 1.5rem;
}

.tips-header h3 {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.tips-header p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 0.75rem;
    gap: 0.75rem;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.tip-bullet {
    color: #3b82f6;
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.tip-content h4 {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    text-align: left;
}

.tip-content p {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* Responsive Design */
@media (max-width: 768px) {
    .writing-tips-section {
        margin-top: 1rem;
        padding: 1rem;
    }
    
    .tips-list {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 0.5rem;
    }
    
    .tip-item {
        padding: 0.375rem 0;
    }
    
    .tips-header h3 {
        font-size: 1.125rem;
    }
    
    .tips-header p {
        font-size: 0.8rem;
    }
    
    .tips-header {
        margin-bottom: 1rem;
    }
    
    .tip-content h4 {
        font-size: 0.9rem;
    }
    
    .tip-content p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .writing-tips-section {
        margin: 0.75rem -0.5rem 0;
        padding: 0.75rem;
    }
    
    .tips-list {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .tip-item {
        padding: 0.25rem 0;
    }
    
    .tip-bullet {
        font-size: 1rem;
    }
    
    .tip-content h4 {
        font-size: 0.85rem;
    }
    
    .tip-content p {
        font-size: 0.75rem;
    }
}

/* Exit Confirmation Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.exit-confirmation-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp 0.2s ease-out;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.modal-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.modal-content p {
    margin: 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.5rem 1.5rem 1.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.modal-actions button {
    flex: 0 0 auto;
    min-width: 120px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .exit-confirmation-modal {
        width: 95%;
        margin: 1rem;
    }
    
    .modal-header {
        padding: 1rem 1rem 0 1rem;
    }
    
    .modal-content {
        padding: 0 1rem 1rem 1rem;
    }
    
    .modal-actions {
        padding: 0 1rem 1rem 1rem;
        flex-direction: column-reverse;
    }
    
    .modal-actions button {
        width: 100%;
        min-width: 0;
        min-width: initial;
    }
}
/* Two-Factor Authentication Setup Modal */
.two-factor-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

.two-factor-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0 24px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 24px;
}

.two-factor-modal .modal-header h2 {
    margin: 0;
    color: #495057;
    font-size: 1.5rem;
    font-weight: 600;
}

.two-factor-modal .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6c757d;
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.two-factor-modal .modal-close:hover {
    background: #f8f9fa;
    color: #dc3545;
}

.two-factor-modal .modal-body {
    padding: 0 24px 24px 24px;
}

/* Method Selection */
.2fa-method-selection p {
    color: #6c757d;
    margin-bottom: 24px;
    text-align: center;
}

.method-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.method-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
}

.method-option:hover {
    border-color: #667eea;
    background: #f8f9ff;
}

.method-option.selected {
    border-color: #667eea;
    background: #f0f4ff;
}

.method-option input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.method-info {
    flex: 1 1;
}

.method-info h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}

.method-info p {
    margin: 0 0 8px 0;
    color: #6c757d;
    font-size: 0.9rem;
}

.method-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #e3f2fd;
    color: #1976d2;
}

.method-badge.secure {
    background: #e8f5e8;
    color: #2e7d32;
}

/* TOTP Setup */
.totp-setup {
    text-align: center;
}

.totp-setup h3 {
    color: #495057;
    margin-bottom: 16px;
}

.totp-setup p {
    color: #6c757d;
    margin-bottom: 24px;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    padding: 20px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.qr-code-container img {
    max-width: 200px;
    height: auto;
}

.manual-entry {
    margin-bottom: 32px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.manual-entry p {
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.secret-code {
    display: inline-block;
    padding: 8px 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #495057;
    word-break: break-all;
}

/* Verification Section */
.verify-section {
    margin-bottom: 24px;
}

.verify-section label {
    display: block;
    margin-bottom: 8px;
    color: #495057;
    font-weight: 500;
}

.code-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 4px;
    font-family: 'Courier New', monospace;
    background: #fafafa;
}

.code-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Email Verification */
.email-verification {
    text-align: center;
}

.email-verification h3 {
    color: #495057;
    margin-bottom: 16px;
}

.email-verification p {
    color: #6c757d;
    margin-bottom: 32px;
}

/* Backup Codes */
.backup-codes {
    text-align: center;
}

.backup-codes h3 {
    color: #495057;
    margin-bottom: 16px;
}

.backup-codes > p {
    color: #6c757d;
    margin-bottom: 24px;
    text-align: left;
}

.backup-codes-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
    gap: 12px;
    margin-bottom: 32px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.backup-code {
    padding: 8px 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #495057;
    font-weight: 600;
}

.backup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.warning {
    padding: 12px 16px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    color: #856404;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Buttons */
.btn-primary, .btn-secondary {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: #667eea;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: #5a6fd8;
    transform: translateY(-1px);
}

.btn-primary:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.btn-secondary:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

/* Error Message */
.error-message {
    padding: 12px 16px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #721c24;
    margin-top: 16px;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .two-factor-modal {
        width: 95%;
        margin: 20px;
    }
    
    .method-options {
        gap: 12px;
    }
    
    .method-option {
        padding: 16px;
    }
    
    .backup-codes-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .backup-actions {
        flex-direction: column;
    }
    
    .qr-code-container img {
        max-width: 150px;
    }
}
/* Component Classes - Using Unified Design System Variables */

/* Shared Tab Headlines - Consistent style across all tabs */
.tab-headline {
    margin-bottom: 24px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.tab-headline h1,
.tab-headline h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.tab-headline p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    margin: 0;
    line-height: 1.5;
}

/* Tab headline with emoji and title on separate lines */
.tab-headline h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.tab-headline .tab-emoji {
    font-size: 2.5rem;
    line-height: 1;
}

.tab-headline .tab-title {
    font-size: 1.875rem;
    line-height: 1.2;
}

/* Mobile responsive tab headlines */
@media (max-width: 768px) {
    .tab-headline h1,
    .tab-headline h2 {
        font-size: 1.75rem;
    }
    
    .tab-headline .tab-emoji {
        font-size: 2rem;
    }
    
    .tab-headline .tab-title {
        font-size: 1.5rem;
    }
    
    .tab-headline p {
        font-size: 1rem;
    }
}

/* Button System - Using unified variables */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
  padding: var(--space-sm) var(--space-md);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Button Sizes */
.btn--sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-base);
}

/* Button Variants - Using unified variables */
.btn--primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn--outline:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.btn--danger {
  background-color: var(--error-color);
  border-color: var(--error-color);
  color: white;
}

.btn--danger:hover:not(:disabled) {
  background-color: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--success {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: white;
}

.btn--success:hover:not(:disabled) {
  background-color: #16a34a;
  border-color: #16a34a;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Button Full Width */
.btn--full {
  width: 100%;
}

/* Button Loading State */
.btn--loading {
  position: relative;
  color: transparent;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  /* animation: spin 1s linear infinite; */
}

/* Spin animation moved to loading.css to avoid conflicts */

/* Card System - Using unified variables */
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card--interactive {
  cursor: pointer;
  transition: var(--transition-normal);
}

.card--interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}

.card__body {
  padding: var(--space-lg);
}

.card__footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
}

/* Container System */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--sm {
  max-width: 640px;
}

.container--md {
  max-width: 768px;
}

.container--lg {
  max-width: 1024px;
}

.container--xl {
  max-width: 1280px;
}

.container--full {
  max-width: none;
}

/* Page Container - Standard page layout with consistent styling */
.page-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  background: transparent;
  /* background: #ffffff; */
  border-radius: 12px;
  /* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); */
  position: relative;
  z-index: 1; /* Ensure content is above background layers */
}

/* Page Container Variants */
.page-container--wide {
  max-width: 1000px;
}

.page-container--narrow {
  max-width: 600px;
}

.page-container--full-width {
  max-width: none;
  margin: 0;
}

.page-container--no-shadow {
  box-shadow: none;
}

.page-container--compact {
  padding: 1rem;
}

.page-container--no-padding {
  padding: 0;
}

/* Layout System */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout__header {
  flex-shrink: 0;
}

.layout__main {
  flex: 1 1;
}

.layout__footer {
  flex-shrink: 0;
}

/* Grid System */
.grid {
  display: grid;
  grid-gap: var(--space-md);
  gap: var(--space-md);
}

.grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid--responsive {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Flex System */
.flex {
  display: flex;
}

.flex--col {
  flex-direction: column;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  justify-content: space-between;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--gap-sm { gap: var(--space-sm); }
.flex--gap-md { gap: var(--space-md); }
.flex--gap-lg { gap: var(--space-lg); }

/* Form System */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-color: var(--accent-primary);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-error {
  color: var(--error-color);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.form-hint {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

/* Alert System */
.alert {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: var(--space-md);
}

.alert--success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.alert--warning {
  background-color: #fffbeb;
  border-color: #fed7aa;
  color: #92400e;
}

.alert--error {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert--info {
  background-color: #eff6ff;
  border-color: #c7d2fe;
  color: #1e40af;
}

/* Badge System */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.badge--primary {
  background-color: var(--accent-primary);
  color: white;
}

.badge--success {
  background-color: var(--success-color);
  color: white;
}

.badge--warning {
  background-color: var(--warning-color);
  color: white;
}

.badge--error {
  background-color: var(--error-color);
  color: white;
}

/* Loading States */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

/* Loading animation styles removed - will be replaced with new system */

/* Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
  
  .grid--cols-2,
  .grid--cols-3,
  .grid--cols-4 {
    grid-template-columns: 1fr;
  }
  
  .btn--lg {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
  }
} 

/* SafeImage Component Styles */
.safe-image {
    transition: opacity 0.3s ease;
}

.safe-image-fallback,
.safe-image-loading,
.safe-image-error {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading spinner animation */
/* Spin keyframes removed - will be replaced with new system */

/* Image container for consistent sizing */
.image-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.image-container.square {
    aspect-ratio: 1;
}

.image-container.wide {
    aspect-ratio: 16/9;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

/* ========================================================================== */
/* UNIFIED TAB SYSTEM */
/* ========================================================================== */

/* Tab Container */
.shared-tabs,
.main-page-shared-tab-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
  margin-bottom: 2rem;
  background: var(--container-background);
  padding: 0.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Keep tabs on one line for larger screens */
@media (min-width: 800px) {
  .shared-tabs,
  .main-page-shared-tab-menu {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    white-space: nowrap;
  }
}

/* Individual Tab Button */
.shared-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.95rem;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow line breaks in tab labels */
.shared-tab-btn .shared-tab-label {
  white-space: normal;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.9rem;
}



/* Hover State - Lighter blue background */
.shared-tab-btn:hover {
  background: #60a5fa;
  color: white;
}

/* Active State - Light blue background */
.shared-tab-btn.active {
  background: #3b82f6;
  color: white;
}

/* Active Hover State - Slightly lighter than active */
.shared-tab-btn.active:hover {
  background: var(--accent-hover);
  color: white;
}

/* Active SVG Icon State - Lighter color for SVG icons */
.shared-tab-btn.active .shared-tab-icon svg {
  stroke: rgba(255, 255, 255, 0.7);
}

/* Active Hover SVG Icon State - Full white for SVG icons */
.shared-tab-btn.active:hover .shared-tab-icon svg {
  stroke: white;
}

/* Tab Icon Styling */
.shared-tab-icon {
  font-size: 1.2rem;
}

/* Tab Label Styling */
.shared-tab-label {
  font-weight: inherit;
}

/* Responsive Design */
@media (max-width: 768px) {
  .shared-tabs,
  .main-page-shared-tab-menu {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    margin-bottom: 1rem;
    padding: 0.25rem;
    gap: 0.25rem;
  }
  
  .shared-tab-btn {
    padding: 0.6rem 0.5rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .shared-tabs,
  .main-page-shared-tab-menu {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    padding: 0.25rem;
    gap: 0.25rem;
  }
  
  .shared-tab-btn {
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem;
    gap: 0.25rem;
  }
  
  .shared-tab-icon {
    font-size: 1rem;
  }
  
  .shared-tab-label {
    font-size: 0.75rem;
  }
}

/* Shared Navigation Action Buttons */
.nav-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: none;
    border: none;
    border-radius: 10px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    width: 40px;
    height: 40px;
}

.nav-action-btn svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
    flex-shrink: 0;
    stroke-width: 2 !important;
}

.nav-action-btn:hover {
    background-color: #334155;
    color: #6484C0;
}

.nav-action-btn.active {
    background-color: #14213F;
    border: 1px solid #6484C0;
    color: #6484C0;
}

.nav-action-btn.active svg {
    stroke: #6484C0 !important;
}

.nav-action-btn.active::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background-color: #6484C0;
    border-radius: 0 0 3px 3px;
}

/* Navigation action button variants */
.nav-action-btn.profile-variant {
    border: 1px solid #475569;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    width: auto;
    height: auto;
    min-width: 120px;
}

.nav-action-btn.profile-variant:hover {
    border-color: #6484C0;
    background-color: #334155;
}

.nav-action-btn.profile-variant.active {
    border-color: #6484C0;
    background-color: #23293A;
    color: #6484C0;
}

.nav-action-btn.profile-variant.active span {
    color: #6484C0;
}

.nav-action-btn.profile-variant.active .profile-initials-small {
    color: white;
}

/* ========================================
   SHARED PROGRESS BAR SYSTEM
   ======================================== */

/* Progress Card Container */
.progress-card {
    background: #f8fafc; /* Light gray background */
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.progress-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.progress-card--compact {
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    position: relative;
    overflow: hidden;
}

.progress-card--compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899, #f59e0b);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}

.progress-card--compact .progress-title {
    margin-bottom: 0.5rem;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-card--compact .progress-badge {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
}

.progress-card--inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

/* Progress Header */
.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem; /* 32px */
    gap: 1rem;
}

.main-header-main-pages {
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    padding: 32px;
    margin-bottom: 24px;
    border: none;
    display: grid !important;
    grid-template-columns: 100px 1fr;
    grid-gap: 32px;
    gap: 32px;
    align-items: center;
}

/* Fallback for headers without the new structure */
.main-header-main-pages:not(:has(.header-icon)) {
    display: flex !important;
    align-items: center;
    gap: 32px;
    text-align: left;
}

.main-header-main-pages .header-icon {
    width: 100px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    cursor: move;
    flex-shrink: 0;
}

.main-header-main-pages .header-icon.admin-editing {
    border: 2px dashed rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.main-header-main-pages .header-icon svg {
    width: 48px;
    height: 48px;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* More specific selector to prevent overwriting */
.main-header-main-pages > .header-content,
.main-header-main-pages .header-content:not(.override) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.page-container .main-header-main-pages h1,
.page-container .main-header-main-pages .header-content h1,
.progress .main-header-main-pages h1,
.progress .main-header-main-pages .header-content h1,
.writing-container .main-header-main-pages h1,
.analytics .main-header-main-pages h1,
.projects .main-header-main-pages h1,
.locations .main-header-main-pages h1,
.groups .main-header-main-pages h1,
.leaderboard .main-header-main-pages h1,
.discover .main-header-main-pages h1,
body:not(.admin-page) .main-header-main-pages h1,
body:not(.admin-page) .main-header-main-pages .header-content h1 {
    color: #e5e7eb;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    display: block;
    text-align: left;
    background: none;
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: border-box;
    background-clip: initial;
    -webkit-text-fill-color: #e5e7eb;
    text-fill-color: #e5e7eb;
}

/* Style h1 when no header-icon present - icon inline with text */
.main-header-main-pages:not(:has(.header-icon)) h1 {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.main-header-main-pages:not(:has(.header-icon)) h1 svg {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.page-container .main-header-main-pages h2,
.page-container .main-header-main-pages .header-content h2,
.progress .main-header-main-pages h2,
.progress .main-header-main-pages .header-content h2,
.writing-container .main-header-main-pages h2,
.analytics .main-header-main-pages h2,
.projects .main-header-main-pages h2,
.locations .main-header-main-pages h2,
.groups .main-header-main-pages h2,
.leaderboard .main-header-main-pages h2,
.discover .main-header-main-pages h2,
body:not(.admin-page) .main-header-main-pages h2,
body:not(.admin-page) .main-header-main-pages .header-content h2 {
    color: #e5e7eb;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: block;
    text-align: left;
    background: none;
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: border-box;
    background-clip: initial;
    -webkit-text-fill-color: #e5e7eb;
    text-fill-color: #e5e7eb;
}

.main-header-main-pages p {
    color: #d1d5db;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
}

/* Style p when no header-icon present */
.main-header-main-pages:not(:has(.header-icon)) p {
    text-align: left !important;
    margin: 0 !important;
}

/* Wrapper for text content in headers without icon structure */
.main-header-main-pages:not(:has(.header-icon)) > div:not(.header-icon) {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-header--simple {
    margin-bottom: 0.25rem;
}

.progress-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
}

.progress-title--sm {
    font-size: 0.875rem;
}

.progress-title--lg {
    font-size: 1.125rem;
}

.progress-icon {
    font-size: 1.2em;
    opacity: 0.8;
}

.progress-badge {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 0.375rem 1rem;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-badge--success {
    background: #dcfce7;
    color: #16a34a;
}

.progress-badge--warning {
    background: #fef3c7;
    color: #d97706;
}

.progress-badge--danger {
    background: #fee2e2;
    color: #dc2626;
}

/* Progress Stats */
.progress-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.progress-stats--sm {
    margin-bottom: 0.375rem;
}

.progress-current {
    color: #1f2937;
    font-size: 1.375rem;
    font-weight: 700;
}

.progress-separator {
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 400;
}

.progress-target {
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
}

.progress-stats--sm .progress-current {
    font-size: 1rem;
}

.progress-stats--sm .progress-separator,
.progress-stats--sm .progress-target {
    font-size: 0.875rem;
}

/* Shared Progress Bar */
.shared-progress-bar {
    width: 100%;
    height: 10px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.shared-progress-bar--sm {
    height: 6px;
    margin-bottom: 0.5rem;
}

.shared-progress-bar--lg {
    height: 14px;
    margin-bottom: 1rem;
}

.shared-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600));
    border-radius: 8px;
    transition: width 0.6s ease;
    position: relative;
    min-width: 2px;
}

/* Progress Bar Variants */
.shared-progress-fill--words {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.shared-progress-fill--time {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.shared-progress-fill--success {
    background: linear-gradient(90deg, #10b981, #059669);
}

.shared-progress-fill--warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.shared-progress-fill--danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Progress Bar with Animation */
.shared-progress-fill--animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Progress Footer */
.progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.progress-footer--center {
    justify-content: center;
}

.progress-celebration {
    color: #16a34a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .progress-card {
        padding: 1rem;
    }
    
    .progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .progress-card--inline {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .progress-stats .progress-current {
        font-size: 1.125rem;
    }
}

/* Settings gear animation for navigation action buttons */
.nav-action-btn.settings-variant svg {
    transition: transform 0.3s ease;
}

.nav-action-btn.settings-variant:hover svg {
    transform: rotate(90deg);
}

.nav-action-btn.settings-variant:active svg {
    transform: rotate(90deg) scale(0.95);
}

/* Notification badge for navigation action buttons */
.nav-action-btn .notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 16px;
    border: 2px solid #0f172a;
}

.nav-action-btn .notification-badge:empty {
    display: none;
}

/* Profile icon styling within nav action buttons - DEPRECATED, see Navigation/styles.css */
.nav-action-btn .profile-icon-small {
    /* These values are overridden in Navigation/styles.css for proper sizing */
    width: 72px;  /* Updated to match Navigation/styles.css */
    height: 72px;
    border-radius: 50%;
    border: 4px solid #403F48;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6;
    flex-shrink: 0;
}

.nav-action-btn .profile-icon-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-action-btn .profile-initials-small {
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
} 

/* Leaderboard Filter Sub-tabs */
.leaderboard-filter-tabs {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.25rem;
  border-radius: 8px;
}

/* Keep filter tabs on one line for larger screens */
@media (min-width: 800px) {
  .leaderboard-filter-tabs {
    grid-template-columns: repeat(4, 1fr);
  }
}

.leaderboard-filter-tabs .shared-tab-btn {
  font-size: 0.85rem;
  padding: 0.6rem 0.8rem;
  color: #64748b;
}

.leaderboard-filter-tabs .shared-tab-btn:hover {
  background: #e2e8f0;
  color: #374151;
}

.leaderboard-filter-tabs .shared-tab-btn.active {
  background: #3b82f6;
  color: white;
}

.leaderboard-filter-tabs .shared-tab-btn.active:hover {
  background: #2563eb;
  color: white;
}

@media (max-width: 768px) {
  /* Hide main headers for Dashboard, Progress, and Groups pages */
  .main-header-main-pages {
    display: none !important;
  }
  
  .leaderboard-filter-tabs {
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    gap: 0.2rem;
    padding: 0.2rem;
  }
  
  .leaderboard-filter-tabs .shared-tab-btn {
    padding: 0.5rem 0.3rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .leaderboard-filter-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
} 

/* Filter indicator in leaderboard header */
.filter-indicator {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
  margin-left: 0.5rem;
}

@media (max-width: 480px) {
  .filter-indicator {
    display: block;
    margin-left: 0;
    margin-top: 0.25rem;
    font-size: 0.8rem;
  }
} 

/* Override admin gradient styles for main page headers */
.page-container.progress .header-content h1,
.page-container.progress .main-header-main-pages .header-content h1,
div.progress .main-header-main-pages .header-content h1,
.writing-container .main-header-main-pages .header-content h1,
.analytics .main-header-main-pages .header-content h1,
.projects .main-header-main-pages .header-content h1 {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: border-box !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #e5e7eb !important;
    color: #e5e7eb !important;
}


.settings {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Tab Navigation Styles */
.settings-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    padding-bottom: 0;
    flex-wrap: wrap;
}

.settings-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6b7280;
    color: var(--text-secondary, #6b7280);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    white-space: nowrap;
}

.settings-tab:hover {
    color: #1f2937;
    color: var(--text-primary, #1f2937);
    background: rgba(0, 0, 0, 0.02);
    background: var(--bg-hover, rgba(0, 0, 0, 0.02));
}

.settings-tab.active {
    color: #3b82f6;
    color: var(--primary-color, #3b82f6);
    border-bottom-color: #3b82f6;
    border-bottom-color: var(--primary-color, #3b82f6);
    background: transparent;
}

/* Session Settings Specific Styles */
.session-duration-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.duration-slider {
    flex: 1 1;
    max-width: 300px;
}

.duration-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.duration-number-input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    font-size: 1rem;
}

.settings h1 {
  margin-bottom: 2rem;
  color: var(--text-primary);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.settings-card {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.settings-card h2 {
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

.setting-item {
  margin-bottom: 1.5rem;
}

.setting-item label {
  display: block;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.setting-item input,
.setting-item select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.setting-item input:focus,
.setting-item select:focus {
  outline: none;
  border-color: var(--accent-primary);
}



/* Settings Container */
.settings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--color-background);
  min-height: 100vh;
  color: #1e293b;
}

/* Electron-specific overrides for full-width background - FIXED DETECTION */
.electron-app .settings-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2rem 0 !important; /* Remove horizontal padding, keep vertical */
    background: var(--color-background) !important;
    min-height: auto !important;
}

.settings-header-container {
  text-align: center;
  margin-bottom: 2rem;
  padding: 2rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.settings-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 2rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Electron-specific header padding - FIXED DETECTION */
.electron-app .settings-header-container {
    margin: 0 2rem 2rem 2rem !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.electron-app .settings-header {
    margin: 0 2rem 2rem 2rem !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.settings-header-container h1 {
  margin: 0 0 0.5rem 0;
  color: #1e293b;
  font-size: 2rem;
  font-weight: 700;
}

.settings-subheadline {
  margin: 0;
  color: #64748b;
  font-size: 1.1rem;
}

.settings-header h1 {
  margin: 0 0 0.5rem 0;
  color: #1e293b;
  font-size: 2rem;
  font-weight: 700;
}

.settings-header p {
  margin: 0;
  color: #64748b;
  font-size: 1.1rem;
}

.settings-section {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Electron-specific section padding - FIXED DETECTION */
.electron-app .settings-section {
    margin: 0 2rem 1.5rem 2rem !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.settings-section h2 {
  margin: 0 0 1rem 0;
  color: #1e293b;
  font-size: 1.25rem;
  font-weight: 600;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #64748b;
  font-weight: 500;
}

.settings-container .form-group input,
.settings-container .form-group select,
.settings-container .form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e9ecef !important;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1e293b;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.settings-container .form-group input:focus,
.settings-container .form-group select:focus,
.settings-container .form-group textarea:focus {
  outline: none;
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}



.theme-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
}

.settings-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

/* Electron-specific actions padding - FIXED DETECTION */
.electron-app .settings-actions {
    margin: 2rem 2rem 0 2rem !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #4f46e5;
  color: white;
}

.btn-primary:hover {
  background-color: #4338ca;
}

.btn-secondary {
  background-color: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.btn-secondary:hover {
  background-color: #334155;
  color: white;
  border-color: #334155;
}

.settings-message {
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  text-align: center;
}

.settings-message.success {
  background-color: #dcfce7;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.settings-message.error {
  background-color: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Account Section */
.account-section {
  border-top: 1px solid #e2e8f0;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.account-section h3 {
  color: #1e293b;
  margin-bottom: 1rem;
}

.account-info {
  background-color: #f8fafc;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.account-info p {
  margin: 0.25rem 0;
  color: #64748b;
}

.account-info strong {
  color: #1e293b;
}

.account-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Password Change Section */
.password-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.save-status {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.save-status.success {
  color: #16a34a;
  background-color: #dcfce7;
  border: 1px solid #bbf7d0;
}

.save-status.error {
  color: #dc2626;
  background-color: #fee2e2;
  border: 1px solid #fecaca;
}

/* Goals Grid Layout */
.goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    margin-top: 1rem;
    width: 100%;
}

.goal-category {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 100%;
    min-width: 0; /* Allows content to shrink */
}

.goal-category h3 {
    margin: 0 0 1rem 0;
    color: #334155;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.goal-helper {
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.85rem;
    font-style: italic;
}

/* Word Goal Inputs - Consistent with Time Goals */
.word-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.word-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #ffffff;
    color: #1e293b;
    font-size: 1rem;
    text-align: center;
    font-weight: 500;
    box-sizing: border-box;
}

.word-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.word-arrows {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    z-index: 999;
    pointer-events: auto;
}

.word-arrow {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    width: 1.5rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    color: #64748b;
    transition: all 0.2s ease;
    -webkit-user-select: none;
            user-select: none;
    line-height: 1;
    pointer-events: auto;
}

.word-arrow:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

.word-arrow:active {
    background: #cbd5e1;
    transform: scale(0.95);
}

/* Time Input Container - Consistent with Word Goals */
.time-input-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.time-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1;
    max-width: none;
    min-width: 0;
}

.time-input-wrapper {
    position: relative;
    display: block;
    flex: 1 1;
    width: 100%;
}

.time-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #ffffff;
    color: #1e293b;
    font-size: 1rem;
    text-align: center;
    font-weight: 500;
    box-sizing: border-box;
}

.time-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.time-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 600;
    min-width: 1rem;
    position: static !important;
    display: inline-block !important;
}

/* Fix for stray time-label positioning */
.settings-container .time-label {
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.time-arrows {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    z-index: 999;
    pointer-events: auto;
}

.time-arrow {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    width: 1.5rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    color: #64748b;
    transition: all 0.2s ease;
    -webkit-user-select: none;
            user-select: none;
    line-height: 1;
    pointer-events: auto;
}

.time-arrow:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

.time-arrow:active {
    background: #cbd5e1;
    transform: scale(0.95);
}

/* Better spacing for form groups */
.goal-category .form-group {
    margin-bottom: 1.25rem;
}

.goal-category .form-group:last-child {
    margin-bottom: 0;
}

.goal-category .form-group label {
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 600;
    color: #374151;
}

/* Remove old form group styling that conflicts */
.form-group:has(.time-input-container) {
    margin-bottom: 1.25rem;
}

.form-group:has(.time-input-container):last-child {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .goals-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .goal-category {
        padding: 1rem;
    }
    
    .time-input-container {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    
    .time-input-group {
        max-width: none;
        justify-content: center;
    }
}

/* 2FA Settings Styles */
.section-description {
    margin-bottom: 1.5rem;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.two-factor-setup-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.two-factor-status {
    margin-top: 1rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.status-indicator.enabled {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.status-indicator.disabled {
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.status-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.status-info {
    flex: 1 1;
}

.status-info strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
    color: #1e293b;
}

.status-info p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.two-factor-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.backup-codes-display {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.backup-codes-display h4 {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.backup-codes-warning {
    margin: 0 0 1rem 0;
    color: #dc2626;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

.backup-codes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 0.75rem;
    gap: 0.75rem;
    margin-top: 1rem;
}

.backup-code {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
    font-family: 'Inter', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.5px;
}

.two-factor-setup-options {
    margin-top: 1rem;
}

.two-factor-setup-options h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
}

.setup-methods {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.setup-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.setup-method:hover {
    border-color: #4f46e5;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1);
}

.method-info {
    flex: 1 1;
}

.method-info h5 {
    margin: 0 0 0.25rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.method-info p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

/* Limit width of 2FA setup buttons */
.setup-method button {
    max-width: 180px;
    white-space: nowrap;
}

.setup-method .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.two-factor-message {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.two-factor-message.success {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.two-factor-message.error {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Username and Email Actions */
.username-actions,
.email-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

/* Logout button styling */
.logout-btn {
    background-color: #dc2626 !important;
    color: white !important;
    border: 1px solid #dc2626 !important;
}

.logout-btn:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: white !important;
}

/* Responsive adjustments for 2FA */
@media (max-width: 768px) {
    .two-factor-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .setup-method {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .backup-codes-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.5rem;
    }
    
    .backup-code {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
}

/* =================================================================
   INVITE SYSTEM STYLES
   ================================================================= */

/* Invite Section */
.settings-section.invite-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.section-description {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Invite Statistics */
.invite-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.stat-item {
    text-align: center;
    padding: 1rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Invite Action Groups */
.invite-action-group {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.invite-action-group h3 {
    margin: 0 0 0.5rem 0;
    color: #495057;
    font-size: 1.1rem;
}

.action-description {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Invite Controls */
.invite-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.btn-generate-invite {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.95rem;
}

.btn-generate-invite:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-generate-invite:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.invite-help-text {
    color: #6c757d;
    font-size: 0.85rem;
    font-style: italic;
}

/* Generated Code Display */
.generated-code {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.generated-code label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

.code-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.code-display code {
    flex: 1 1;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    background: white;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: #495057;
}

.btn-copy {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-copy:hover {
    background: #5a6268;
}

/* Email Invite Form */
.email-invite-form {
    margin-top: 1rem;
}

.email-invite-form .form-group {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.email-invite-form input {
    flex: 1 1;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95rem;
}

.btn-send-invite {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.95rem;
    white-space: nowrap;
}

.btn-send-invite:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);
}

.btn-send-invite:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* My Codes List */
.my-codes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.code-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.code-item code {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    background: none;
    padding: 0;
}

.code-status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-status.available {
    background: #d4edda;
    color: #155724;
}

.code-status.used {
    background: #cce5ff;
    color: #004085;
}

.btn-copy-small {
    background: #6c757d;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.2s ease;
}

.btn-copy-small:hover {
    background: #5a6268;
}

.codes-note {
    color: #6c757d;
    font-size: 0.8rem;
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Invite Messages */
.invite-message {
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 1rem;
    font-weight: 500;
}

.invite-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.invite-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive Design for Invite System */
@media (max-width: 768px) {
    .invite-stats {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem;
    }
    
    .stat-item {
        padding: 0.5rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .invite-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .email-invite-form .form-group {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .code-display {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .code-display code {
        text-align: center;
    }
    
    .invite-action-group {
        padding: 1rem;
    }
    
    .settings-section.invite-section {
        padding: 1.5rem;
    }
}

/* 2FA Modal Styles - Prefixed to avoid conflicts */
.settings-2fa-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.settings-2fa-modal-overlay .settings-2fa-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
}

.settings-2fa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 12px 12px 0 0;
}

.settings-2fa-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-2fa-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.settings-2fa-modal-close:hover {
    background-color: #f1f5f9;
    color: var(--text-primary);
}

.settings-2fa-modal-body {
    padding: 2rem;
    background: #fff;
}

.settings-2fa-warning-text {
    margin: 0 0 1.5rem 0;
    padding: 1rem;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.settings-2fa-form-group {
    margin-bottom: 1.5rem;
}

.settings-2fa-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.settings-2fa-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.settings-2fa-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.settings-2fa-input::placeholder {
    color: #9ca3af;
}

.settings-2fa-help-text {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.3;
}

.settings-2fa-error-message {
    padding: 0.75rem 1rem;
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.settings-2fa-modal-footer {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 0 0 12px 12px;
    justify-content: flex-end;
}

.settings-2fa-btn-secondary,
.settings-2fa-btn-danger {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.settings-2fa-btn-secondary {
    background-color: #f1f5f9;
    color: var(--text-primary);
    border: 1px solid #e2e8f0;
}

.settings-2fa-btn-secondary:hover:not(:disabled) {
    background-color: #e2e8f0;
    border-color: var(--text-secondary);
}

.settings-2fa-btn-danger {
    background-color: #dc2626;
    color: white;
}

.settings-2fa-btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
}

.settings-2fa-btn-secondary:disabled,
.settings-2fa-btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .settings-2fa-modal {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }

    .settings-2fa-modal-header,
    .settings-2fa-modal-body,
    .settings-2fa-modal-footer {
        padding: 1rem 1.5rem;
    }

    .settings-2fa-modal-footer {
        flex-direction: column;
    }

    .settings-2fa-btn-secondary,
    .settings-2fa-btn-danger {
        width: 100%;
    }
}

/* Notification Category Styles */
.notification-category {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.notification-category h3 {
    margin: 0 0 1rem 0;
    color: #334155;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-description {
    margin-bottom: 1.5rem;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.setting-description {
    margin: 0.5rem 0 0 0;
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.4;
    padding-left: 1.5rem;
}

.notification-mode-help {
    margin: 0.75rem 0 0 0;
    padding-left: 1rem;
    color: #64748b;
    font-size: 0.9rem;
}

.notification-mode-help li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.notification-mode-help strong {
    color: #374151;
}

/* Form help text styling */
.form-help {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
} 
.header-image-manager {
    padding: 24px;
    background: #f8f9fa;
    min-height: 100vh;
}

.manager-header {
    margin-bottom: 32px;
    text-align: center;
}

.manager-header h2 {
    font-size: 2rem;
    color: #1e293b;
    margin-bottom: 8px;
}

.manager-header p {
    color: #64748b;
    font-size: 1.1rem;
}

.pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-bottom: 48px;
}

.page-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.page-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.page-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.page-header h3 {
    font-size: 1.25rem;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.page-name {
    color: #94a3b8;
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
}

.image-preview {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.custom-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.default-icon {
    text-align: center;
}

.default-icon .svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    margin-bottom: 8px;
}

.default-icon .svg-container svg {
    color: #64748b;
    width: 60px;
    height: 60px;
}

.default-icon span {
    font-size: 3rem;
    display: block;
    margin-bottom: 8px;
}

.default-icon p {
    color: #94a3b8;
    font-size: 0.875rem;
    margin: 0;
}

.actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.upload-btn,
.remove-btn {
    flex: 1 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.upload-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.remove-btn {
    background: #ef4444;
    color: white;
}

.remove-btn:hover:not(:disabled) {
    background: #dc2626;
}

.upload-btn:disabled,
.remove-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-info {
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.image-info small {
    color: #94a3b8;
    font-size: 0.75rem;
}

.manager-footer {
    max-width: 800px;
    margin: 0 auto;
}

.info-box {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.info-box h4 {
    color: #1e293b;
    margin: 0 0 16px 0;
    font-size: 1.1rem;
}

.info-box ul {
    margin: 0;
    padding-left: 24px;
    color: #64748b;
}

.info-box li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.loading {
    text-align: center;
    padding: 48px;
    color: #64748b;
    font-size: 1.1rem;
}
/* System Tab Styles */
.system-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    margin-top: 2rem;
}

.system-card {
    background: #2a2a2a;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #3a3a3a;
}

.system-card h3 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.system-description {
    color: #999;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.migration-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.migration-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}

.migration-status {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #3a3a3a;
}

.migration-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.migration-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #1a1a1a;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.migration-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.migration-badge.completed {
    background: #22c55e20;
    color: #22c55e;
}

.migration-badge.pending {
    background: #f59e0b20;
    color: #f59e0b;
}

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

.status-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: #1a1a1a;
    border-radius: 6px;
}

.status-label {
    color: #999;
    font-weight: 500;
}

.status-value {
    color: #fff;
    font-family: monospace;
}

/* Admin Dashboard Styles */
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    min-height: 100vh;
}

.admin-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
}

.admin-header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5rem;
}

.admin-header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Status Messages */
.admin-message {
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
}

.admin-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.admin-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Navigation Tabs */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
    gap: 5px;
    overflow-x: auto;
}

/* Moderation page specific admin-tabs - reduced spacing */
.admin-container .admin-tabs {
    margin-bottom: 1rem;
}

.admin-tab {
    padding: 12px 18px;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.admin-tab:hover {
    background: #f8f9fa;
}

.admin-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: #f8f9fa;
}

/* Admin Section */
.admin-section {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Users Controls */
.users-controls {
    margin-bottom: 25px;
}

.search-bar {
    display: flex;
    gap: 10px;
    max-width: 500px;
}

.search-bar input {
    flex: 1 1;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
}

.search-bar input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-bar button {
    padding: 12px 20px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease;
}

.search-bar button:hover {
    background: #5a6fd8;
}

.search-bar button:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.btn-cleanup-test-users {
    padding: 12px 20px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease;
    margin-left: 10px;
}

.btn-cleanup-test-users:hover {
    background: #c82333;
}

.btn-cleanup-test-users:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Tables */
.users-table, .logs-table {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 15px 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}

/* Prevent role column from breaking */
td:has(.role-badge) {
    min-width: 120px;
}

.role-cell {
    min-width: 180px;
    white-space: nowrap;
}

/* Email column styling */
.email-cell {
    font-size: 0.5rem;
}

/* Status column styling */
.status-cell {
    font-size: 0.6rem;
}

/* Joined date column styling */
.joined-cell {
    font-size: 0.6rem;
    color: #6c757d;
}

th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

tr:hover {
    background: #f8f9fa;
}

.banned-user {
    background: #fff5f5 !important;
}

.banned-user:hover {
    background: #fed7d7 !important;
}

/* User Info */
.user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem; /* Smaller font for user names */
}

.user-id {
    font-size: 0.7rem;
    color: #6c757d;
}

/* Role Badge */
.role-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
}

.role-badge.admin {
    background: #fff3cd;
    color: #856404;
}

.role-badge.moderator {
    background: #e2e3e5;
    color: #495057;
}

.role-badge.user {
    background: #d1ecf1;
    color: #0c5460;
}

/* Status */
.ban-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.banned {
    color: #dc3545;
    font-weight: 600;
}

.active {
    color: #28a745;
    font-weight: 600;
}

.ban-expiry, .ban-reason {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Action Buttons */
.user-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 200px; /* Prevent buttons from overflowing column */
}

.btn-ban, .btn-unban, .btn-promote, .btn-demote {
    padding: 3px 6px;
    border: none;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-ban {
    background: #dc3545;
    color: white;
}

.btn-ban:hover {
    background: #c82333;
}

.btn-unban {
    background: #28a745;
    color: white;
}

.btn-unban:hover {
    background: #218838;
}

.btn-promote {
    background: #17a2b8;
    color: white;
}

.btn-promote:hover {
    background: #138496;
}

.btn-demote {
    background: #ffc107;
    color: #212529;
}

.btn-demote:hover {
    background: #e0a800;
}

.btn-ban:disabled, .btn-unban:disabled, .btn-promote:disabled, .btn-demote:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Action Badge */
.action-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.action-badge.ban_user {
    background: #f8d7da;
    color: #721c24;
}

.action-badge.unban_user {
    background: #d4edda;
    color: #155724;
}

.action-badge.delete_post {
    background: #fff3cd;
    color: #856404;
}

/* Admin/Target Info */
.admin-info, .target-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-email, .target-email {
    font-size: 0.8rem;
    color: #6c757d;
}

.reason {
    max-width: 200px;
    word-wrap: break-word;
    font-size: 0.9rem;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ban-modal {
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
    margin: 0;
    color: #dc3545;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #dc3545;
}

.modal-body {
    padding: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #495057;
}

.form-group input[type="checkbox"] {
    margin-right: 8px;
}

.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}

.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    padding: 20px 25px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.btn-cancel, .btn-ban-confirm {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel {
    background: #6c757d;
    color: white;
}

.btn-cancel:hover {
    background: #5a6268;
}

.btn-ban-confirm {
    background: #dc3545;
    color: white;
}

.btn-ban-confirm:hover {
    background: #c82333;
}

.btn-ban-confirm:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Loading */
.admin-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e9ecef;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* No Results */
.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-size: 1.1rem;
}

/* Settings Form */
.settings-form {
    max-width: 800px;
}

.setting-group {
    margin-bottom: 40px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.setting-group h4 {
    margin: 0 0 10px 0;
    color: #495057;
    font-size: 1.2rem;
}

.setting-description {
    margin: 0 0 20px 0;
    color: #6c757d;
    font-size: 0.95rem;
}

.setting-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.setting-item label {
    min-width: 200px;
    font-weight: 500;
    color: #495057;
    margin: 0;
}

.setting-item input[type="number"] {
    width: 80px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95rem;
}

.setting-help {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 15px;
    gap: 15px;
}

.permission-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    cursor: pointer;
    transition: background 0.2s ease;
}

.permission-item:hover {
    background: #f8f9fa;
}

.permission-item input[type="checkbox"] {
    margin: 0;
}

.setting-actions {
    text-align: center;
    margin-top: 30px;
}

.btn-save-settings {
    padding: 12px 30px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-save-settings:hover {
    background: #218838;
}

.btn-save-settings:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Reports Table */
.reports-table {
    overflow-x: auto;
}

.post-preview {
    max-width: 200px;
    font-size: 0.9rem;
    color: #495057;
    word-wrap: break-word;
}

.report-reason {
    background: #fff3cd;
    color: #856404;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.report-description {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 4px;
}

.report-count {
    background: #dc3545;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.date-cell {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
}

.report-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.btn-view-reports, .btn-approve, .btn-dismiss {
    padding: 3px 6px;
    border: none;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-view-reports {
    background: #6c757d;
    color: white;
}

.btn-view-reports:hover {
    background: #5a6268;
}

.btn-approve {
    background: #28a745;
    color: white;
}

.btn-approve:hover {
    background: #218838;
}

.btn-dismiss {
    background: #dc3545;
    color: white;
}

.btn-dismiss:hover {
    background: #c82333;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-container {
        padding: 15px;
    }
    
    .admin-header h1 {
        font-size: 2rem;
    }
    
    .admin-tabs {
        flex-direction: column;
    }
    
    .admin-tab {
        padding: 12px 20px;
        text-align: center;
    }
    
    table {
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 10px 8px;
    }
    
    .search-bar {
        flex-direction: column;
    }
    
    .ban-modal {
        width: 95%;
        margin: 20px;
    }
    
    .modal-actions {
        flex-direction: column;
    }
}

/* Trashcan Styles */
.trashcan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #dc3545;
}

.trashcan-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-controls label {
    font-weight: 600;
    color: #495057;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: white;
    font-size: 14px;
}

.deleted-items-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.deleted-item-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
}

.deleted-item-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.item-type-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: #e9ecef;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.item-meta {
    display: flex;
    gap: 16px;
    color: #6c757d;
    font-size: 14px;
}

.item-content {
    margin-bottom: 16px;
}

.item-title {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    line-height: 1.4;
}

.item-author {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 8px;
}

.delete-reason {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #856404;
}

.item-actions {
    display: flex;
    gap: 12px;
}

.item-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: #218838;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #c82333;
}

.btn-success:disabled,
.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.empty-trashcan {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-trashcan .empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-trashcan h3 {
    margin: 0 0 12px 0;
    font-size: 1.5rem;
    color: #495057;
}

.empty-trashcan p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.loading-state {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    font-size: 16px;
}

@media (max-width: 768px) {
    .trashcan-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .trashcan-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .item-meta {
        flex-direction: column;
        gap: 4px;
    }
    
    .item-actions {
        flex-direction: column;
    }
}

/* Super Moderator Styles */
.btn-super {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333;
    border: 1px solid #f59e0b;
}

.btn-super:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffed4e, #fbbf24);
}

.btn-super-user {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    border: 1px solid #7c3aed;
}

.btn-super-user:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

.btn-settings {
    background: #6c757d;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-settings:hover:not(:disabled) {
    background: #5a6268;
}

.super-mod-modal {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-description {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #495057;
    font-size: 14px;
    line-height: 1.5;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-bottom: 24px;
}

.permission-group {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e9ecef;
}

.permission-group h4 {
    margin: 0 0 16px 0;
    color: #495057;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 8px;
}

.permission-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
}

.permission-item:hover {
    background: rgba(0,123,255,0.05);
}

.permission-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.permission-item span {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}

.permission-sub-item {
    margin-left: 30px;
    margin-top: 12px;
    padding: 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.permission-sub-item label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.duration-input {
    width: 100px;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.permission-sub-item small {
    display: block;
    color: #6c757d;
    font-size: 12px;
    margin-top: 4px;
}

.btn-save-permissions {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-permissions:hover:not(:disabled) {
    background: linear-gradient(135deg, #218838, #1e9e84);
    transform: translateY(-1px);
}

.btn-save-permissions:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    .super-mod-modal {
        width: 95%;
        margin: 20px;
    }
    
    .permissions-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .permission-group {
        padding: 16px;
    }
    
    .permission-item {
        padding: 8px;
    }
}

/* Sortable Table Styles */
.sortable {
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    position: relative;
    transition: all 0.2s ease;
    padding: 12px 8px;
}

.sortable:hover {
    background-color: #f8f9fa;
    color: #007bff;
}

.sortable.sorted {
    background-color: #e3f2fd;
    color: #1976d2;
    font-weight: 600;
}

.sort-indicator {
    font-size: 14px;
    margin-left: 4px;
    color: #1976d2;
    font-weight: bold;
}

.sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    font-size: 12px;
    color: #6c757d;
    transition: opacity 0.2s ease;
}

.sortable:hover::after {
    opacity: 0.5;
}

.sortable.sorted::after {
    display: none;
}

/* Enhanced table styling for better sorting UX */
.users-table table th {
    border-bottom: 2px solid #dee2e6;
    background: #f8f9fa;
}

.users-table table thead tr {
    background: #f8f9fa;
}

.users-table table tbody tr:hover {
    background-color: #f5f5f5;
}

@media (max-width: 768px) {
    .sortable {
        padding: 8px 4px;
        font-size: 12px;
    }
    
    .sort-indicator {
        font-size: 12px;
    }
    
    .sortable::after {
        font-size: 10px;
        right: 4px;
    }
}

/* =================================================================
   INVITE SYSTEM STYLES
   ================================================================= */

/* Invite Overview Stats */
.invite-overview {
    margin-bottom: 30px;
}

.overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.stat-card h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 500;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* Invite Sections */
.invite-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid #e9ecef;
}

.invite-section h4 {
    margin: 0 0 20px 0;
    color: #495057;
    font-size: 1.2rem;
    border-bottom: 2px solid #667eea;
    padding-bottom: 10px;
}

/* Bulk Generation Controls */
.bulk-generation-controls {
    display: flex;
    gap: 20px;
    align-items: end;
    flex-wrap: wrap;
}

.bulk-generation-controls .input-group {
    flex: 1 1;
    min-width: 200px;
}

.bulk-generation-controls .input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #495057;
}

.bulk-generation-controls .input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 16px;
}

.btn-generate-codes {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-generate-codes:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

.btn-generate-codes:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Generated Codes Display */
.generated-codes-display {
    margin-top: 20px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #dee2e6;
}

.generated-codes-display h5 {
    margin: 0 0 15px 0;
    color: #28a745;
    font-size: 1.1rem;
}

.codes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
    gap: 10px;
}

.code-item {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 8px 12px;
}

.code-item code {
    flex: 1 1;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #495057;
    background: none;
    padding: 0;
}

.btn-copy-code {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s ease;
}

.btn-copy-code:hover {
    background: #5a6268;
}

/* Mass Email Controls */
.mass-invite-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mass-invite-controls .input-group {
    display: flex;
    flex-direction: column;
}

.mass-invite-controls .input-group label {
    margin-bottom: 8px;
    font-weight: 500;
    color: #495057;
}

.mass-invite-controls textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.btn-mass-invite {
    align-self: flex-start;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-mass-invite:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

.btn-mass-invite:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Invite Codes Table */
.invite-codes-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.invite-codes-table table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.invite-codes-table .invite-code {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    color: #495057;
}

/* Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background: #d4edda;
    color: #155724;
}

.status-badge.used {
    background: #cce5ff;
    color: #004085;
}

.status-badge.expired {
    background: #f8d7da;
    color: #721c24;
}

.btn-revoke {
    background: #dc3545;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-revoke:hover:not(:disabled) {
    background: #c82333;
}

.btn-revoke:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Settings Form Enhancements */
.setting-group {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
}

.setting-group h4 {
    margin: 0 0 10px 0;
    color: #495057;
    font-size: 1.2rem;
    border-bottom: 2px solid #667eea;
    padding-bottom: 8px;
}

.setting-description {
    color: #6c757d;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.invite-rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 15px;
    gap: 15px;
}

.toggle-setting {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.toggle-setting input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.toggle-label {
    font-weight: 500;
    color: #495057;
    cursor: pointer;
}

/* Loading States */
.loading-state {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    font-style: italic;
}

/* Responsive Design for Invite System */
@media (max-width: 768px) {
    .overview-stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .bulk-generation-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .codes-list {
        grid-template-columns: 1fr;
    }
    
    .invite-rewards-grid {
        grid-template-columns: 1fr;
    }
    
    .invite-section {
        padding: 15px;
    }
}

/* Landing Page Editor */
.landing-editor-section {
    padding: 0 !important;
    margin: 0 !important;
    height: calc(100vh - 120px);
    overflow: hidden;
}

/* Design Tab Styles */
.design-header {
    margin-bottom: 30px;
}

.design-header h2 {
    font-size: 24px;
    color: #1f2937;
    margin-bottom: 8px;
}

.design-header p {
    color: #6b7280;
    font-size: 14px;
}

.design-content {
    padding: 20px 0;
}

.design-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.design-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: default;
}

.design-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.design-card .card-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.design-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.design-card p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 42px;
}

.design-card button {
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.design-card .btn-primary {
    background: #667eea;
    color: white;
}

.design-card .btn-primary:hover:not(:disabled) {
    background: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.design-card .btn-secondary {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #e5e7eb;
}

.design-card .btn-secondary:hover:not(:disabled) {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.design-card button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Database Migration Styles */
.migration-status {
    margin: 20px 0;
}

.migration-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
}

.spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f4f6;
    border-top: 2px solid #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.migration-info {
    padding: 15px;
    background: #f9fafb;
    border-radius: 8px;
    margin: 10px 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
}

.status-badge.success {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.warning {
    background: #fed7aa;
    color: #92400e;
}

.migration-list {
    margin: 15px 0 0 20px;
    padding: 0;
    list-style: none;
}

.migration-list li {
    padding: 8px 12px;
    margin: 5px 0;
    background: white;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
    color: #374151;
}

.migration-actions {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.btn-migration {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-migration.check {
    background: #e0e7ff;
    color: #3730a3;
}

.btn-migration.check:hover:not(:disabled) {
    background: #c7d2fe;
}

.btn-migration.run {
    background: #667eea;
    color: white;
}

.btn-migration.run:hover:not(:disabled) {
    background: #5a67d8;
}

.btn-migration:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.admin-invites-container {
    padding: 20px;
    max-width: 1200px;
    margin: 20px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: calc(100vh - 160px);
}

.admin-invites-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.admin-invites-header h1 {
    color: var(--text-primary);
    margin: 0 0 10px 0;
    font-size: 2rem;
    font-weight: 600;
}

.admin-invites-header p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1.1rem;
}

/* Statistics Section */
.invite-stats-section {
    margin-bottom: 30px;
}

.invite-stats-section h2 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 15px;
    gap: 15px;
    margin-bottom: 20px;
}

/* AdminInvites specific stat cards to avoid conflicts */
.admin-invites-container .stats-grid .stat-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e9ecef;
    color: #333;
}

.admin-invites-container .stats-grid .stat-card h3 {
    color: #6c757d;
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 500;
}

.admin-invites-container .stats-grid .stat-number {
    color: #4a90e2;
    font-size: 2rem;
    font-weight: bold;
}

/* Settings Section */
.admin-invites-container .invite-settings-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.invite-settings-section h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

/* Override general admin setting-item styles with higher specificity */
.admin-invites-container .invite-settings-section .setting-item {
    padding: 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    display: block; /* Override flex from general admin styles */
    transition: all 0.3s ease;
}

/* Special styling for admin-only invites toggle (2nd item) */
.admin-invites-container .invite-settings-section .setting-item:nth-of-type(2) {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
}

.admin-invites-container .invite-settings-section .setting-item input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-invites-container .invite-settings-section .setting-item input[type="checkbox"]:disabled ~ p {
    opacity: 0.7;
    font-style: italic;
}

/* Override general admin setting-item label styles */
.admin-invites-container .invite-settings-section .setting-item label {
    display: flex;
    align-items: center;
    color: #495057;
    font-weight: 500;
    margin-bottom: 5px;
    cursor: pointer;
    min-width: auto; /* Override general admin styles */
}

/* More specific input styles for AdminInvites */
.admin-invites-container .invite-settings-section .setting-item label input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}

.admin-invites-container .invite-settings-section .setting-item label input[type="number"] {
    margin-left: 10px;
    width: 80px;
    padding: 5px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: white;
    color: #333;
}

.admin-invites-container .invite-settings-section .setting-item p {
    color: #6c757d;
    margin: 0;
    font-size: 0.9rem;
}

/* Code Generation Section */
.admin-invites-container .code-generation-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.code-generation-section h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.code-form {
    margin-bottom: 25px;
}

.form-row {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* Removed code-input as we now generate random codes */

.admin-invites-container .expiry-select {
    padding: 10px 15px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: white;
    color: #333;
    font-size: 1rem;
    min-width: 160px;
}

/* Ensure generate button is visible and clickable */
.admin-invites-container .generate-btn {
    padding: 10px 20px;
    background: #4a90e2;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.admin-invites-container .generate-btn:hover {
    background: #357abd;
}

/* Generated Codes */
.generated-codes h3 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.codes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.code-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    flex-wrap: wrap;
    gap: 15px;
}

.code-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.code-info strong {
    color: var(--text-primary);
    font-size: 1.1rem;
}

.status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
}

.status.available {
    background: #e8f5e8;
    color: #2d5a2d;
}

.status.used {
    background: #f5e8e8;
    color: #5a2d2d;
}

.expiry {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.code-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.email-input {
    padding: 8px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: white;
    color: #333;
    width: 200px;
}

.send-btn {
    padding: 8px 15px;
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.send-btn:hover {
    background: var(--success-hover);
}

/* User Management Section */
.user-management-section {
    margin-bottom: 30px;
}

.user-management-section h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.user-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1 1;
    min-width: 250px;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: white;
    color: #333;
    font-size: 1rem;
}

.user-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Users Table */
.admin-invites-container .users-table {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.admin-invites-container .table-header {
    display: grid;
    grid-template-columns: 2.5fr 1.2fr 1fr 1.3fr 0.8fr;
    grid-gap: 20px;
    gap: 20px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
    font-weight: 700;
    color: #495057;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-invites-container .table-row {
    display: grid;
    grid-template-columns: 2.5fr 1.2fr 1fr 1.3fr 0.8fr;
    grid-gap: 20px;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    align-items: center;
    transition: all 0.2s ease;
}

.admin-invites-container .table-row:last-child {
    border-bottom: none;
}

.admin-invites-container .table-row:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-invites-container .user-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-invites-container .user-info strong {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
}

.admin-invites-container .user-info .email {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

.admin-invites-container .user-info .role {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
    align-self: flex-start;
    margin-top: 2px;
}

.admin-invites-container .role.admin {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

.admin-invites-container .role.user {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    box-shadow: 0 2px 4px rgba(78, 205, 196, 0.3);
}

/* Toggle Switch */
.admin-invites-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
}

.admin-invites-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.admin-invites-container .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: all 0.3s ease;
    border-radius: 28px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-invites-container .toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: all 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-invites-container input:checked + .toggle-slider {
    background-color: var(--accent-color);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.admin-invites-container input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.admin-invites-container .count-input {
    width: 70px;
    padding: 8px 10px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    background: white;
    color: #333;
    text-align: center;
    font-weight: 600;
    transition: border-color 0.2s ease;
}

.admin-invites-container .count-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.admin-invites-container .invite-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
}

.admin-invites-container .invite-stats span {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 2px 0;
}

.admin-invites-container .invite-stats span:first-child {
    color: #6c757d;
}

.admin-invites-container .invite-stats span:last-child {
    color: #28a745;
    font-weight: 600;
}

/* More specific selectors for user management tab */
.admin-invites-container .user-management-section .user-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    min-height: 36px; /* Ensure consistent height */
}

/* Ensure text is visible when admin-only mode shows disabled state */
.admin-invites-container .user-management-section .user-actions span {
    color: #6c757d !important;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 1 !important;
}

.admin-invites-container .user-management-section .add-invites-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, #4a90e2, #357abd); /* Use explicit blue colors instead of var */
    color: white !important; /* Force white text */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 1; /* Ensure full opacity */
}

.admin-invites-container .user-management-section .add-invites-btn:hover {
    background: linear-gradient(135deg, #357abd, #2c5aa0);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: white !important;
}

.admin-invites-container .user-management-section .add-invites-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.admin-invites-container .user-management-section .add-invites-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #ccc;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding: 20px;
}

.page-btn {
    padding: 8px 16px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.page-btn:hover:not(:disabled) {
    background: var(--accent-hover);
}

.page-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.page-info {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Loading and Messages */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.error-message {
    background: #fee;
    color: #c33;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #fcc;
}

.success-message {
    background: #efe;
    color: #3c3;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #cfc;
}

/* Tab Navigation */
.admin-tabs {
    display: flex;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 30px;
    gap: 0;
}

.tab-button {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.tab-button:hover {
    color: #495057;
    background: #f8f9fa;
}

.tab-button.active {
    color: #4a90e2;
    border-bottom-color: #4a90e2;
    background: #f8f9ff;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #4a90e2;
}

/* Invite Requests Section */
.invite-requests-section {
    margin-bottom: 30px;
}

.invite-requests-section h2 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.invite-requests-section > p {
    color: var(--text-secondary);
    margin-bottom: 25px;
    font-size: 1rem;
}

.no-requests {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.no-requests p {
    color: #6c757d;
    font-size: 1.1rem;
    margin: 0;
}

.requests-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.request-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    transition: box-shadow 0.2s ease;
}

.request-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.request-item.pending {
    border-left: 4px solid #ffc107;
}

.request-item.approved {
    border-left: 4px solid #28a745;
}

.request-item.rejected {
    border-left: 4px solid #dc3545;
}

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.request-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.request-info h3 {
    margin: 0;
    color: #495057;
    font-size: 1.2rem;
    font-weight: 600;
}

.request-email {
    color: #6c757d;
    font-size: 0.9rem;
}

.request-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 5px;
}

.request-status.pending {
    background: #fff3cd;
    color: #856404;
}

.request-status.approved {
    background: #d4edda;
    color: #155724;
}

.request-status.rejected {
    background: #f8d7da;
    color: #721c24;
}

.request-date {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.request-content {
    margin-bottom: 15px;
}

.request-field {
    margin-bottom: 15px;
}

.request-field h4 {
    margin: 0 0 8px 0;
    color: #495057;
    font-size: 1rem;
    font-weight: 600;
}

.request-field p {
    margin: 0;
    color: #6c757d;
    line-height: 1.5;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    border-left: 3px solid #e9ecef;
}

.request-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.approve-btn {
    padding: 8px 16px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.approve-btn:hover {
    background: #218838;
}

.reject-btn {
    padding: 8px 16px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.reject-btn:hover {
    background: #c82333;
}

.request-result {
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #6c757d;
}

.result-text {
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-invites-container {
        padding: 15px;
    }
    
    .admin-invites-container .table-header,
    .admin-invites-container .table-row {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .admin-invites-container .table-header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        text-align: center;
    }
    
    .admin-invites-container .table-row {
        text-align: center;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    .admin-invites-container .user-info {
        align-items: center;
        text-align: center;
    }
    
    .admin-invites-container .invite-stats {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }
    
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .code-input {
        min-width: 0;
        min-width: initial;
    }
    
    .user-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input {
        min-width: 0;
        min-width: initial;
    }
    
    .admin-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .tab-button {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .request-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .request-actions {
        flex-direction: column;
    }
    
    .approve-btn,
    .reject-btn {
        width: 100%;
        text-align: center;
    }
}

/* Toggle button styles for invite code activation/deactivation */
.toggle-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 8px;
    min-width: 80px;
    transition: all 0.2s ease;
}

.toggle-btn.deactivate {
    background: #dc3545;
    color: white;
}

.toggle-btn.deactivate:hover {
    background: #c82333;
}

.toggle-btn.activate {
    background: #28a745;
    color: white;
}

.toggle-btn.activate:hover {
    background: #218838;
}

/* Deactivated status styling */
.status.deactivated {
    background: #6c757d;
    color: white;
}

/* Adjust code actions layout to accommodate new button */
.code-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.code-actions .email-input {
    flex: 1 1;
    min-width: 180px;
}
/* Email Template Editor Styles */
.email-template-editor {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
}

/* Editor Toolbar */
.email-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
    align-items: center;
}

.email-toolbar-group {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0 0.5rem;
    border-right: 1px solid #444;
}

.email-toolbar-group:last-child {
    border-right: none;
}

.email-toolbar-btn {
    background-color: #333333;
    border: 1px solid #555;
    color: #cccccc;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.email-toolbar-btn:hover {
    background-color: #444444;
    color: #ffffff;
    transform: translateY(-1px);
}

.email-toolbar-btn.active {
    background-color: #4a90e2;
    color: #ffffff;
    border-color: #357abd;
}

.email-toolbar-btn:active {
    transform: translateY(0);
}

.email-toolbar-select {
    background-color: #333333;
    border: 1px solid #555;
    color: #cccccc;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 120px;
    height: 2.5rem;
}

.email-toolbar-select:hover {
    background-color: #444444;
    color: #ffffff;
}

.email-toolbar-select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Editor Content */
.email-editor-content {
    padding: 1rem;
    background-color: #262626;
}

.email-wysiwyg-editor {
    min-height: 400px;
    padding: 1rem;
    border: 1px solid #555;
    border-radius: 6px;
    background-color: #ffffff;
    color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.6;
    outline: none;
    overflow-y: auto;
    max-height: 600px;
}

.email-wysiwyg-editor:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.email-wysiwyg-editor h1,
.email-wysiwyg-editor h2,
.email-wysiwyg-editor h3,
.email-wysiwyg-editor h4 {
    margin: 1rem 0 0.5rem 0;
    color: #333333;
}

.email-wysiwyg-editor h1 {
    font-size: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
}

.email-wysiwyg-editor h2 {
    font-size: 1.5rem;
}

.email-wysiwyg-editor h3 {
    font-size: 1.25rem;
}

.email-wysiwyg-editor h4 {
    font-size: 1.1rem;
}

.email-wysiwyg-editor p {
    margin: 1rem 0;
}

.email-wysiwyg-editor ul,
.email-wysiwyg-editor ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.email-wysiwyg-editor li {
    margin: 0.25rem 0;
}

.email-wysiwyg-editor a {
    color: #4a90e2;
    text-decoration: underline;
}

.email-wysiwyg-editor a:hover {
    color: #357abd;
}

.email-wysiwyg-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5rem 0;
}

.email-wysiwyg-editor blockquote {
    border-left: 4px solid #4a90e2;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    font-style: italic;
}

/* HTML Editor Mode */
.email-html-editor {
    min-height: 400px;
    width: 100%;
    padding: 1rem;
    border: 1px solid #555;
    border-radius: 6px;
    background-color: #333333;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    resize: vertical;
    outline: none;
}

.email-html-editor:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Preview Section */
.email-editor-preview {
    padding: 1rem;
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

.email-editor-preview h4 {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-editor-preview h4:before {
    content: '📱';
}

.email-mobile-preview {
    max-width: 375px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    border: 1px solid #ddd;
}

.email-preview-content {
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.6;
    color: #333333;
    max-height: 400px;
    overflow-y: auto;
}

.email-preview-content h1,
.email-preview-content h2,
.email-preview-content h3,
.email-preview-content h4 {
    margin: 1rem 0 0.5rem 0;
}

.email-preview-content p {
    margin: 0.5rem 0;
}

.email-preview-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.email-preview-content a {
    color: #4a90e2;
    text-decoration: none;
}

.email-preview-content a:hover {
    text-decoration: underline;
}

/* Loading and Error States */
.email-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #cccccc;
}

.email-editor-error {
    background-color: #dc3545;
    color: white;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .email-editor-toolbar {
        padding: 0.5rem;
        gap: 0.25rem;
    }
    
    .email-toolbar-group {
        padding: 0 0.25rem;
    }
    
    .email-toolbar-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        min-width: 2rem;
        height: 2rem;
    }
    
    .email-toolbar-select {
        font-size: 0.8rem;
        min-width: 100px;
        height: 2rem;
        padding: 0.4rem;
    }
    
    .email-editor-content {
        padding: 0.5rem;
    }
    
    .email-wysiwyg-editor,
    .email-html-editor {
        min-height: 300px;
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    
    .email-mobile-preview {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .email-editor-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .email-toolbar-group {
        border-right: none;
        border-bottom: 1px solid #444;
        padding: 0.5rem 0;
        justify-content: center;
    }
    
    .email-toolbar-group:last-child {
        border-bottom: none;
    }
    
    .email-toolbar-btn {
        flex: 1 1;
        max-width: 60px;
    }
    
    .email-toolbar-select {
        width: 100%;
        max-width: 200px;
    }
}
/* Email CSS Editor Styles */
.email-css-editor {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
}

/* Header */
.email-css-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.email-css-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.email-css-modes {
    display: flex;
    gap: 0.25rem;
}

.email-css-mode-btn {
    background-color: #333333;
    border: 1px solid #555;
    color: #cccccc;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-css-mode-btn:hover {
    background-color: #444444;
    color: #ffffff;
}

.email-css-mode-btn.active {
    background-color: #4a90e2;
    color: #ffffff;
    border-color: #357abd;
}

/* Body Layout */
.email-css-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    gap: 0;
    min-height: 600px;
}

/* Editor Panel */
.email-css-panel {
    background-color: #262626;
    border-right: 1px solid #333;
    overflow-y: auto;
    max-height: 600px;
}

/* Visual Editor */
.email-visual-editor {
    padding: 1.5rem;
}

.email-visual-editor h4 {
    margin: 0 0 1.5rem 0;
    color: #ffffff;
    font-size: 1rem;
}

.email-visual-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.email-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.email-control-group label {
    color: #cccccc;
    font-size: 0.9rem;
    font-weight: 500;
}

.email-color-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.email-color-picker {
    width: 40px;
    height: 32px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
}

.email-color-text {
    flex: 1 1;
    padding: 0.5rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
}

.email-color-text:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.email-select-input {
    padding: 0.5rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.9rem;
    width: 100%;
}

.email-select-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.email-size-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.email-range-input {
    flex: 1 1;
    accent-color: #4a90e2;
}

.email-size-text {
    width: 60px;
    padding: 0.5rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    text-align: center;
}

.email-size-text:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.email-text-input {
    padding: 0.5rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.9rem;
    width: 100%;
}

.email-text-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* CSS Helpers */
.email-css-helpers {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #333;
}

.email-css-helpers h5 {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: 0.9rem;
}

.email-css-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
    gap: 0.5rem;
}

.email-css-helper-btn {
    background-color: #444444;
    border: 1px solid #555;
    color: #cccccc;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-css-helper-btn:hover {
    background-color: #555555;
    color: #ffffff;
    transform: translateY(-1px);
}

/* CSS Code Editor */
.email-css-code-editor {
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.email-css-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.email-css-editor-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
}

.email-css-actions {
    display: flex;
    gap: 0.5rem;
}

.email-css-action-btn {
    background-color: #444444;
    border: 1px solid #555;
    color: #cccccc;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-css-action-btn:hover {
    background-color: #555555;
    color: #ffffff;
}

.email-css-textarea {
    flex: 1 1;
    min-height: 400px;
    padding: 1rem;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    resize: none;
    outline: none;
}

.email-css-textarea:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* CSS Templates */
.email-css-templates {
    padding: 1.5rem;
}

.email-css-templates h4 {
    margin: 0 0 1.5rem 0;
    color: #ffffff;
    font-size: 1rem;
}

.email-template-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.email-template-card {
    background-color: #333333;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.email-template-card:hover {
    border-color: #4a90e2;
    transform: translateY(-2px);
}

.email-template-preview {
    height: 60px;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    position: relative;
}

.modern-preview {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.minimal-preview {
    background: #ffffff;
    border: 2px solid #34495e;
}

.corporate-preview {
    background: linear-gradient(to bottom, #212529 0%, #212529 30%, #ffffff 30%, #ffffff 100%);
}

.email-template-card h5 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    font-size: 0.9rem;
}

.email-template-card p {
    margin: 0 0 1rem 0;
    color: #cccccc;
    font-size: 0.8rem;
    line-height: 1.4;
}

.email-template-use-btn {
    background-color: #4a90e2;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.email-template-use-btn:hover {
    background-color: #357abd;
    transform: translateY(-1px);
}

/* Preview Panel */
.email-css-preview-panel {
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
}

.email-css-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #333;
}

.email-css-preview-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
}

.email-preview-controls {
    display: flex;
    gap: 0.25rem;
}

.email-preview-device {
    background-color: #333333;
    border: 1px solid #555;
    color: #cccccc;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-preview-device:hover {
    background-color: #444444;
    color: #ffffff;
}

.email-preview-device.active {
    background-color: #4a90e2;
    color: #ffffff;
    border-color: #357abd;
}

.email-css-preview-container {
    flex: 1 1;
    padding: 1rem;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.email-css-preview-iframe {
    width: 100%;
    height: 500px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .email-css-body {
        grid-template-columns: 1fr;
    }
    
    .email-css-panel {
        border-right: none;
        border-bottom: 1px solid #333;
        max-height: 400px;
    }
    
    .email-css-preview-iframe {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .email-css-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .email-css-modes {
        justify-content: center;
    }
    
    .email-css-mode-btn {
        flex: 1 1;
        text-align: center;
    }
    
    .email-visual-editor,
    .email-css-code-editor,
    .email-css-templates {
        padding: 1rem;
    }
    
    .email-css-buttons {
        grid-template-columns: 1fr;
    }
    
    .email-color-input-group,
    .email-size-input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .email-css-preview-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    
    .email-preview-controls {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .email-css-panel {
        max-height: 300px;
    }
    
    .email-css-preview-iframe {
        height: 250px;
    }
    
    .email-template-grid {
        gap: 0.75rem;
    }
    
    .email-template-card {
        padding: 0.75rem;
    }
}
/* Newsletter Editor Styles */
.newsletter-editor {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
}

/* Newsletter Header */
.newsletter-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.newsletter-title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.newsletter-title-section h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.newsletter-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-badge.draft {
    background-color: #6c757d;
    color: white;
}

.status-badge.scheduled {
    background-color: #fd7e14;
    color: white;
}

.status-badge.sent {
    background-color: #28a745;
    color: white;
}

.newsletter-actions {
    display: flex;
    gap: 0.5rem;
}

.newsletter-btn {
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.newsletter-btn.primary {
    background-color: #4a90e2;
    color: white;
}

.newsletter-btn.primary:hover {
    background-color: #357abd;
    transform: translateY(-1px);
}

.newsletter-btn.primary:disabled {
    background-color: #555;
    cursor: not-allowed;
    transform: none;
}

.newsletter-btn.secondary {
    background-color: #6c757d;
    color: white;
}

.newsletter-btn.secondary:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
}

.newsletter-btn.small {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

/* Status Messages */
.newsletter-message {
    padding: 1rem;
    margin: 0;
    font-size: 0.9rem;
}

.newsletter-message.error {
    background-color: #dc3545;
    color: white;
}

.newsletter-message.success {
    background-color: #28a745;
    color: white;
}

/* Newsletter Body Layout */
.newsletter-editor-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-gap: 0;
    gap: 0;
    min-height: 700px;
}

/* Main Panel */
.newsletter-main-panel {
    padding: 1.5rem;
    background-color: #262626;
    border-right: 1px solid #333;
    overflow-y: auto;
    max-height: 700px;
}

/* Template Selection */
.newsletter-template-selection {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #333;
}

.newsletter-template-selection h4 {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: 1rem;
}

.newsletter-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.newsletter-template-card {
    background-color: #333333;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.newsletter-template-card:hover {
    border-color: #4a90e2;
    transform: translateY(-2px);
}

.newsletter-template-card.selected {
    border-color: #4a90e2;
    background-color: rgba(74, 144, 226, 0.1);
}

.newsletter-template-card.blank {
    border-style: dashed;
    border-color: #666;
}

.newsletter-template-card.blank:hover {
    border-color: #888;
}

.template-thumbnail {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.template-info h5 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    font-size: 0.9rem;
}

.template-info p {
    margin: 0;
    color: #cccccc;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Newsletter Form */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.newsletter-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.newsletter-form-group label {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
}

.newsletter-subject-input {
    padding: 0.75rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ffffff;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.newsletter-subject-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Sidebar Panel */
.newsletter-sidebar-panel {
    background-color: #1a1a1a;
    padding: 1.5rem;
    overflow-y: auto;
    max-height: 700px;
}

.newsletter-sidebar-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #333;
}

.newsletter-sidebar-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.newsletter-sidebar-section h4 {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: 0.95rem;
}

/* Recipients Section */
.recipient-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.recipient-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.recipient-option:hover {
    background-color: #333333;
}

.recipient-option input[type="radio"] {
    accent-color: #4a90e2;
}

.recipient-label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #cccccc;
    font-size: 0.9rem;
}

.recipient-count {
    color: #4a90e2;
    font-weight: 500;
}

.custom-recipients {
    margin-top: 1rem;
}

.custom-recipients label {
    display: block;
    margin-bottom: 0.5rem;
    color: #cccccc;
    font-size: 0.85rem;
}

.custom-recipients-textarea {
    width: 100%;
    padding: 0.5rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.85rem;
    resize: vertical;
}

.custom-recipients-textarea:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.custom-recipients small {
    display: block;
    margin-top: 0.25rem;
    color: #999999;
    font-size: 0.8rem;
}

.recipient-summary {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #333333;
    border-radius: 4px;
    text-align: center;
}

.recipient-summary strong {
    color: #4a90e2;
    font-size: 0.9rem;
}

/* Scheduler Section */
.scheduler-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scheduler-form label {
    color: #cccccc;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.schedule-datetime-input {
    padding: 0.5rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.85rem;
}

.schedule-datetime-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.scheduler-actions {
    display: flex;
    gap: 0.5rem;
}

/* Newsletter Stats */
.newsletter-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background-color: #333333;
    border-radius: 4px;
}

.stat-label {
    color: #cccccc;
    font-size: 0.85rem;
}

.stat-value {
    color: #4a90e2;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Preview Modal */
.newsletter-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.newsletter-preview-content {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.newsletter-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.newsletter-preview-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
}

.newsletter-preview-close {
    background: none;
    border: none;
    color: #cccccc;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.newsletter-preview-close:hover {
    background-color: #333333;
    color: #ffffff;
}

.newsletter-preview-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1;
    overflow: hidden;
}

.preview-devices {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.preview-device {
    background-color: #333333;
    border: 1px solid #555;
    color: #cccccc;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preview-device:hover {
    background-color: #444444;
    color: #ffffff;
}

.preview-device.active {
    background-color: #4a90e2;
    color: #ffffff;
    border-color: #357abd;
}

.newsletter-preview-iframe-container {
    flex: 1 1;
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 1rem;
    overflow: hidden;
}

.newsletter-preview-iframe {
    width: 100%;
    height: 500px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
}

/* Loading Overlay */
.newsletter-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    color: #ffffff;
}

.newsletter-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #333333;
    border-top: 4px solid #4a90e2;
    border-radius: 50%;
    animation: newsletter-spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes newsletter-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .newsletter-editor-body {
        grid-template-columns: 1fr;
    }
    
    .newsletter-main-panel {
        border-right: none;
        border-bottom: 1px solid #333;
        max-height: 600px;
    }
    
    .newsletter-sidebar-panel {
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .newsletter-editor-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .newsletter-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .newsletter-template-grid {
        grid-template-columns: 1fr;
    }
    
    .newsletter-main-panel,
    .newsletter-sidebar-panel {
        padding: 1rem;
        max-height: none;
    }
    
    .newsletter-preview-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .newsletter-preview-iframe {
        height: 400px;
    }
    
    .scheduler-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .newsletter-template-card {
        padding: 0.75rem;
    }
    
    .template-thumbnail {
        font-size: 2rem;
    }
    
    .newsletter-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .newsletter-actions {
        gap: 0.25rem;
    }
    
    .recipient-options {
        gap: 0.5rem;
    }
    
    .stat-item {
        padding: 0.4rem;
    }
}
/* Email Scheduler Styles */
.email-scheduler {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
}

/* Scheduler Header */
.email-scheduler-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.scheduler-title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.scheduler-title-section h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.scheduler-stats {
    display: flex;
    gap: 1rem;
}

.stat-item {
    background-color: #333333;
    color: #cccccc;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.scheduler-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.scheduler-view-toggle {
    display: flex;
    gap: 0.25rem;
    background-color: #333333;
    border-radius: 6px;
    padding: 0.25rem;
}

.scheduler-view-btn {
    background: none;
    border: none;
    color: #cccccc;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scheduler-view-btn:hover {
    background-color: #444444;
    color: #ffffff;
}

.scheduler-view-btn.active {
    background-color: #4a90e2;
    color: #ffffff;
}

.scheduler-btn {
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.scheduler-btn.primary {
    background-color: #4a90e2;
    color: white;
}

.scheduler-btn.primary:hover {
    background-color: #357abd;
    transform: translateY(-1px);
}

.scheduler-btn.primary:disabled {
    background-color: #555;
    cursor: not-allowed;
    transform: none;
}

.scheduler-btn.secondary {
    background-color: #6c757d;
    color: white;
}

.scheduler-btn.secondary:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
}

/* Status Messages */
.scheduler-message {
    padding: 1rem;
    margin: 0;
    font-size: 0.9rem;
}

.scheduler-message.error {
    background-color: #dc3545;
    color: white;
}

.scheduler-message.success {
    background-color: #28a745;
    color: white;
}

/* Scheduler Body */
.email-scheduler-body {
    padding: 1.5rem;
    background-color: #262626;
    min-height: 500px;
}

/* Calendar View */
.scheduler-calendar-view {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.email-scheduler-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.email-scheduler-calendar-nav-btn {
    background-color: #333333;
    border: 1px solid #555;
    color: #cccccc;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.email-scheduler-calendar-nav-btn:hover {
    background-color: #4a90e2;
    color: #ffffff;
    transform: scale(1.1);
}

.email-scheduler-calendar-month-year {
    margin: 0;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
}

.email-scheduler-calendar-grid {
    background-color: #333333;
    border-radius: 8px;
    border: 1px solid #444;
    overflow: hidden;
}

.email-scheduler-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: #1a1a1a;
}

.email-scheduler-calendar-weekday {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: #4a90e2;
    font-size: 0.9rem;
    border-right: 1px solid #444;
}

.email-scheduler-calendar-weekday:last-child {
    border-right: none;
}

.email-scheduler-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.email-scheduler-calendar-day {
    min-height: 100px;
    padding: 0.5rem;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
    background-color: #333333;
    transition: background-color 0.2s ease;
    position: relative;
}

.email-scheduler-calendar-day:nth-child(7n) {
    border-right: none;
}

.email-scheduler-calendar-day:hover {
    background-color: #3a3a3a;
}

.email-scheduler-calendar-day.other-month {
    background-color: #2a2a2a;
    color: #666666;
}

.email-scheduler-calendar-day.today {
    background-color: rgba(74, 144, 226, 0.2);
    border: 2px solid #4a90e2;
}

.email-scheduler-calendar-day.has-emails {
    background-color: rgba(40, 167, 69, 0.1);
    border-left: 4px solid #28a745;
}

.email-scheduler-calendar-day-number {
    font-weight: 600;
    color: #cccccc;
    margin-bottom: 0.5rem;
}

.email-scheduler-calendar-day-emails {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.email-scheduler-calendar-email-dot {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    font-size: 0.7rem;
}

.email-scheduler-calendar-email-dot.newsletter {
    background-color: #4a90e2;
}

.email-scheduler-calendar-email-dot.template {
    background-color: #28a745;
}

.email-scheduler-calendar-email-more {
    font-size: 0.7rem;
    color: #4a90e2;
    font-weight: 500;
    margin-top: 0.25rem;
}

/* List View */
.scheduler-list-view {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
}

.scheduled-emails-list {
    width: 100%;
    min-width: 100%;
}

.scheduled-emails-list h4 {
    margin: 0 0 1.5rem 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.emails-table {
    background-color: #333333;
    border-radius: 8px;
    border: 1px solid #444;
    overflow: hidden;
    overflow-x: auto;
    width: 100%;
}

.emails-table-header,
.emails-table-row {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(200px, 1fr) minmax(150px, auto) minmax(150px, auto) minmax(100px, auto);
    grid-gap: 1rem;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
    min-width: 720px;
}

.emails-table-header {
    background-color: #1a1a1a;
    font-weight: 600;
    color: #4a90e2;
    font-size: 0.9rem;
    border-bottom: 1px solid #444;
}

.emails-table-row {
    border-bottom: 1px solid #444;
    transition: background-color 0.2s ease;
}

.emails-table-row:hover {
    background-color: #3a3a3a;
}

.emails-table-row:last-child {
    border-bottom: none;
}

.email-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.email-type-badge.newsletter {
    background-color: rgba(74, 144, 226, 0.2);
    color: #4a90e2;
}

.email-type-badge.template {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.recurring-badge {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.col-subject {
    min-width: 0;
}

.col-subject strong {
    color: #ffffff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
}

.col-recipients {
    color: #cccccc;
    font-size: 0.9rem;
}

.scheduled-datetime {
    color: #cccccc;
}

.scheduled-time {
    font-size: 0.8rem;
    color: #4a90e2;
    font-weight: 500;
}

.col-actions {
    display: flex;
    gap: 0.5rem;
}

.scheduler-action-btn {
    background: none;
    border: 1px solid #555;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.scheduler-action-btn.edit:hover {
    background-color: #fd7e14;
    border-color: #fd7e14;
}

.scheduler-action-btn.delete:hover {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Empty State */
.no-scheduled-emails {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.empty-state {
    text-align: center;
    color: #cccccc;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h4 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}

.empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* Modal */
.scheduler-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.scheduler-modal {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    max-width: 500px;
    width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scheduler-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.scheduler-modal-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
}

.scheduler-modal-close {
    background: none;
    border: none;
    color: #cccccc;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.scheduler-modal-close:hover {
    background-color: #333333;
    color: #ffffff;
}

.scheduler-modal-body {
    padding: 1.5rem;
    flex: 1 1;
    overflow-y: auto;
}

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

.scheduler-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scheduler-form-group label {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
}

.scheduler-input,
.scheduler-select {
    padding: 0.75rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.scheduler-input:focus,
.scheduler-select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.scheduler-datetime-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.scheduler-checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.scheduler-checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: #4a90e2;
}

.scheduler-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem;
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

/* Loading Overlay */
.scheduler-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    color: #ffffff;
}

.scheduler-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #333333;
    border-top: 4px solid #4a90e2;
    border-radius: 50%;
    animation: scheduler-spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes scheduler-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .emails-table-header,
    .emails-table-row {
        grid-template-columns: minmax(100px, auto) minmax(150px, 1fr) minmax(120px, auto) minmax(80px, auto);
        gap: 0.5rem;
        min-width: 520px;
    }
    
    .col-recipients {
        display: none;
    }
    
    .email-scheduler-calendar-day {
        min-height: 80px;
        padding: 0.25rem;
    }
}

@media (max-width: 768px) {
    .email-scheduler-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .scheduler-actions {
        justify-content: center;
    }
    
    .email-scheduler-calendar-day {
        min-height: 60px;
        font-size: 0.85rem;
    }
    
    .email-scheduler-calendar-day-number {
        font-size: 0.8rem;
    }
    
    .emails-table-header,
    .emails-table-row {
        grid-template-columns: minmax(200px, 1fr) minmax(100px, auto) minmax(60px, auto);
        gap: 0.5rem;
        padding: 0.75rem;
        min-width: 380px;
    }
    
    .col-recipients,
    .col-scheduled {
        display: none;
    }
    
    .scheduler-datetime-group {
        grid-template-columns: 1fr;
    }
    
    .scheduler-modal {
        width: 95vw;
    }
}

@media (max-width: 480px) {
    .scheduler-view-toggle {
        flex-direction: column;
        width: 100%;
    }
    
    .scheduler-view-btn {
        text-align: center;
    }
    
    .email-scheduler-calendar-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .email-scheduler-calendar-month-year {
        font-size: 1.1rem;
    }
    
    .scheduler-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .emails-table-header,
    .emails-table-row {
        grid-template-columns: minmax(180px, 1fr) minmax(60px, auto);
        gap: 0.5rem;
        min-width: 260px;
    }
    
    .col-type {
        display: none;
    }
}
/* Email Settings Manager Styles */
.email-settings-manager {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
}

/* Settings Header */
.email-settings-header {
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.email-settings-header h3 {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.settings-navigation {
    display: flex;
    gap: 0.25rem;
    background-color: #333333;
    border-radius: 6px;
    padding: 0.25rem;
}

.settings-nav-btn {
    background: none;
    border: none;
    color: #cccccc;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1 1;
    text-align: center;
}

.settings-nav-btn:hover {
    background-color: #444444;
    color: #ffffff;
}

.settings-nav-btn.active {
    background-color: #4a90e2;
    color: #ffffff;
}

/* Settings Body */
.email-settings-body {
    padding: 1.5rem;
    background-color: #262626;
    min-height: 500px;
}

/* Settings Section */
.settings-section h4 {
    margin: 0 0 2rem 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.settings-group {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #333333;
    border-radius: 8px;
    border: 1px solid #444;
}

.settings-group h5 {
    margin: 0 0 1rem 0;
    color: #4a90e2;
    font-size: 1rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.setting-item label {
    color: #cccccc;
    font-size: 0.9rem;
    font-weight: 500;
}

.settings-input {
    padding: 0.75rem;
    background-color: #1a1a1a;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.settings-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.settings-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #cccccc;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    accent-color: #4a90e2;
}

.settings-actions {
    margin-top: 2rem;
    text-align: center;
}

.settings-save-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-save-btn:hover {
    background-color: #218838;
    transform: translateY(-1px);
}

.settings-save-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
    transform: none;
}

/* Triggers Section */
.triggers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.triggers-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.trigger-add-btn {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trigger-add-btn:hover {
    background-color: #357abd;
    transform: translateY(-1px);
}

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

.trigger-card {
    background-color: #333333;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.trigger-card:hover {
    border-color: #4a90e2;
    transform: translateY(-1px);
}

.trigger-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.trigger-info h5 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    font-size: 1rem;
}

.trigger-info p {
    margin: 0 0 0.75rem 0;
    color: #cccccc;
    font-size: 0.9rem;
    line-height: 1.4;
}

.trigger-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.trigger-status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.trigger-status.enabled {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.trigger-status.disabled {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.trigger-priority {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.trigger-priority.high {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.trigger-priority.medium {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.trigger-priority.low {
    background-color: rgba(108, 117, 125, 0.2);
    color: #6c757d;
}

.trigger-actions {
    display: flex;
    gap: 0.5rem;
}

.trigger-action-btn {
    background: none;
    border: 1px solid #555;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trigger-action-btn.test:hover {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white;
}

.trigger-action-btn.edit:hover {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: white;
}

.trigger-action-btn.delete:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Trigger Logic Display */
.trigger-logic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #444;
}

.trigger-conditions,
.trigger-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trigger-conditions strong,
.trigger-actions-list strong {
    color: #4a90e2;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.condition-item,
.action-item {
    background-color: #2a2a2a;
    padding: 0.75rem;
    border-radius: 4px;
    border-left: 4px solid #4a90e2;
    font-size: 0.85rem;
    color: #cccccc;
}

.condition-params,
.action-params {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #999999;
    font-style: italic;
}

/* Empty State */
.no-triggers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.empty-state {
    text-align: center;
    color: #cccccc;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h4 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}

.empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* Recipients Placeholder */
.recipients-placeholder {
    background-color: #333333;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

.recipients-placeholder p {
    color: #cccccc;
    margin-bottom: 1rem;
}

.recipients-placeholder ul {
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
    color: #999999;
}

.recipients-placeholder li {
    margin-bottom: 0.5rem;
}

/* Trigger Modal */
.trigger-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.trigger-modal {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    max-width: 800px;
    width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trigger-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.trigger-modal-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
}

.trigger-modal-close {
    background: none;
    border: none;
    color: #cccccc;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.trigger-modal-close:hover {
    background-color: #333333;
    color: #ffffff;
}

.trigger-modal-body {
    padding: 1.5rem;
    flex: 1 1;
    overflow-y: auto;
}

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

.form-section {
    padding: 1rem;
    background-color: #333333;
    border-radius: 8px;
    border: 1px solid #444;
}

.form-section h5 {
    margin: 0 0 1rem 0;
    color: #4a90e2;
    font-size: 1rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h5 {
    margin: 0;
}

.add-condition-btn,
.add-action-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-condition-btn:hover,
.add-action-btn:hover {
    background-color: #218838;
    transform: translateY(-1px);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.form-group label {
    color: #cccccc;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.trigger-input,
.trigger-select,
.trigger-textarea {
    padding: 0.75rem;
    background-color: #1a1a1a;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.trigger-input:focus,
.trigger-select:focus,
.trigger-textarea:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.trigger-textarea {
    resize: vertical;
    min-height: 80px;
}

.checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: #4a90e2;
}

/* Condition/Action Builders */
.condition-builder,
.action-builder {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.condition-header,
.action-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.condition-type-select,
.action-type-select {
    flex: 1 1;
    padding: 0.5rem;
    background-color: #1a1a1a;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.85rem;
}

.remove-condition-btn,
.remove-action-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-condition-btn:hover,
.remove-action-btn:hover {
    background-color: #c82333;
}

.condition-parameters,
.action-parameters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.parameter-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.parameter-item label {
    color: #999999;
    font-size: 0.8rem;
}

.trigger-param-input,
.trigger-param-select {
    padding: 0.5rem;
    background-color: #1a1a1a;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.8rem;
}

.trigger-param-checkbox {
    accent-color: #4a90e2;
    width: auto;
}

.trigger-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem;
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

.trigger-btn {
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trigger-btn.primary {
    background-color: #4a90e2;
    color: white;
}

.trigger-btn.primary:hover {
    background-color: #357abd;
    transform: translateY(-1px);
}

.trigger-btn.primary:disabled {
    background-color: #555;
    cursor: not-allowed;
    transform: none;
}

.trigger-btn.secondary {
    background-color: #6c757d;
    color: white;
}

.trigger-btn.secondary:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .trigger-logic {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .condition-parameters,
    .action-parameters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .settings-navigation {
        flex-direction: column;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-checkboxes {
        grid-template-columns: 1fr;
    }
    
    .trigger-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .trigger-actions {
        justify-content: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .condition-header,
    .action-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .trigger-modal {
        width: 95vw;
    }
}

@media (max-width: 480px) {
    .email-settings-body {
        padding: 1rem;
    }
    
    .settings-group {
        padding: 1rem;
    }
    
    .triggers-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .trigger-card {
        padding: 1rem;
    }
    
    .trigger-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .trigger-modal-body {
        padding: 1rem;
    }
    
    .trigger-modal-footer {
        flex-direction: column;
    }
}
/* Email Tester Styles */
.email-tester {
    background-color: var(--email-bg-secondary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-primary);
    overflow: hidden;
}

/* Tester Header */
.email-tester-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-bottom: 1px solid var(--email-border-primary);
}

.tester-title-section h3 {
    margin: 0;
    color: var(--email-text-primary);
    font-size: 1.1rem;
}

.tester-subtitle {
    margin: var(--email-spacing-xs) 0 0 0;
    color: var(--email-text-secondary);
    font-size: 0.9rem;
}

.tester-actions {
    display: flex;
    gap: var(--email-spacing-sm);
}

/* Status Messages */
.tester-message {
    padding: var(--email-spacing-md);
    margin: 0;
    font-size: 0.9rem;
    animation: email-alert-slide-in 0.3s ease-out;
}

.tester-message.error {
    background-color: rgba(220, 53, 69, 0.1);
    border-bottom: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--email-color-danger);
}

.tester-message.success {
    background-color: rgba(40, 167, 69, 0.1);
    border-bottom: 1px solid rgba(40, 167, 69, 0.3);
    color: var(--email-color-success);
}

/* Tester Body */
.email-tester-body {
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-secondary);
}

.tester-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-gap: var(--email-spacing-lg);
    gap: var(--email-spacing-lg);
    min-height: 600px;
}

/* Configuration Panel */
.tester-config-panel {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-secondary);
    padding: var(--email-spacing-lg);
    height: -webkit-fit-content;
    height: fit-content;
}

.config-section {
    margin-bottom: var(--email-spacing-xl);
}

.config-section:last-child {
    margin-bottom: 0;
}

.config-section h4 {
    margin: 0 0 var(--email-spacing-md) 0;
    color: var(--email-text-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--email-spacing-xs);
}

.section-description {
    margin: 0 0 var(--email-spacing-lg) 0;
    color: var(--email-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Form Elements */
.tester-form-group {
    margin-bottom: var(--email-spacing-lg);
}

.tester-form-group label {
    display: block;
    margin-bottom: var(--email-spacing-sm);
    color: var(--email-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.tester-input,
.tester-textarea {
    width: 100%;
    padding: var(--email-spacing-sm);
    background-color: var(--email-bg-primary);
    border: 1px solid var(--email-border-light);
    border-radius: var(--email-radius-md);
    color: var(--email-text-primary);
    font-size: 0.9rem;
    transition: var(--email-transition);
    font-family: inherit;
}

.tester-input:focus,
.tester-textarea:focus {
    outline: none;
    border-color: var(--email-color-primary);
    box-shadow: 0 0 0 2px var(--email-color-primary-light);
}

.tester-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.tester-help-text {
    display: block;
    margin-top: var(--email-spacing-xs);
    color: var(--email-text-muted);
    font-size: 0.8rem;
}

/* Preview Data Grid */
.preview-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--email-spacing-md);
    gap: var(--email-spacing-md);
}

.preview-data-grid .tester-form-group:nth-child(odd):last-child {
    grid-column: 1 / -1;
}

/* Buttons */
.tester-btn {
    border: none;
    padding: var(--email-spacing-sm) var(--email-spacing-lg);
    border-radius: var(--email-radius-md);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--email-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--email-spacing-xs);
    white-space: nowrap;
}

.tester-btn.primary {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
}

.tester-btn.primary:hover:not(:disabled) {
    background-color: var(--email-color-primary-hover);
    transform: translateY(-1px);
}

.tester-btn.secondary {
    background-color: var(--email-color-secondary);
    color: var(--email-text-primary);
}

.tester-btn.secondary:hover:not(:disabled) {
    background-color: var(--email-color-secondary-hover);
    transform: translateY(-1px);
}

.tester-btn:disabled {
    background-color: var(--email-border-light);
    color: var(--email-text-disabled);
    cursor: not-allowed;
    transform: none;
}

.tester-send-section {
    margin-top: var(--email-spacing-lg);
    padding-top: var(--email-spacing-lg);
    border-top: 1px solid var(--email-border-secondary);
}

.tester-send-section .tester-btn {
    width: 100%;
    padding: var(--email-spacing-md);
    font-size: 1rem;
}

/* Preview Panel */
.tester-preview-panel {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-secondary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-bottom: 1px solid var(--email-border-secondary);
}

.preview-header h4 {
    margin: 0;
    color: var(--email-text-primary);
    font-size: 1rem;
}

.preview-device-toggle {
    display: flex;
    gap: var(--email-spacing-xs);
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-md);
    padding: var(--email-spacing-xs);
}

.preview-device-btn {
    background: none;
    border: none;
    color: var(--email-text-secondary);
    padding: var(--email-spacing-xs) var(--email-spacing-sm);
    border-radius: var(--email-radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--email-transition);
    white-space: nowrap;
}

.preview-device-btn:hover {
    background-color: var(--email-bg-quaternary);
    color: var(--email-text-primary);
}

.preview-device-btn.active {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
}

/* Preview Viewport */
.preview-viewport {
    flex: 1 1;
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-secondary);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 400px;
    overflow: auto;
}

.preview-frame {
    background-color: var(--email-text-primary);
    border-radius: var(--email-radius-md);
    box-shadow: var(--email-shadow-lg);
    overflow: hidden;
    transition: var(--email-transition);
}

.preview-iframe {
    width: 100%;
    height: 500px;
    border: none;
    border-radius: var(--email-radius-md);
    background-color: var(--email-text-primary);
}

/* Preview Empty State */
.preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    color: var(--email-text-muted);
    padding: var(--email-spacing-xl);
}

.preview-empty-icon {
    font-size: 4rem;
    margin-bottom: var(--email-spacing-lg);
    opacity: 0.5;
}

.preview-empty h4 {
    margin: 0 0 var(--email-spacing-sm) 0;
    color: var(--email-text-secondary);
}

.preview-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Preview Info */
.preview-info {
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-top: 1px solid var(--email-border-secondary);
}

.preview-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--email-spacing-lg);
    gap: var(--email-spacing-lg);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-xs);
}

.info-item label {
    color: var(--email-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.info-item span {
    color: var(--email-text-primary);
    font-size: 0.9rem;
}

.variable-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--email-spacing-xs);
}

.variable-tag {
    background-color: var(--email-color-primary-light);
    color: var(--email-color-primary);
    padding: var(--email-spacing-xs) var(--email-spacing-sm);
    border-radius: var(--email-radius-sm);
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

/* Loading Overlay */
.tester-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 26, 26, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}

.tester-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--email-bg-tertiary);
    border-top: 4px solid var(--email-color-primary);
    border-radius: 50%;
    animation: email-spin 1s linear infinite;
    margin-bottom: var(--email-spacing-md);
}

.tester-loading-overlay p {
    color: var(--email-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Single Column Layout for No Preview */
.tester-layout:not(:has(.tester-preview-panel)) {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
}

/* Mobile Responsiveness */
@media (max-width: 1200px) {
    .tester-layout {
        grid-template-columns: 1fr;
        gap: var(--email-spacing-lg);
    }
    
    .preview-info-grid {
        grid-template-columns: 1fr;
        gap: var(--email-spacing-md);
    }
}

@media (max-width: 768px) {
    .email-tester-header {
        flex-direction: column;
        gap: var(--email-spacing-md);
        align-items: stretch;
    }
    
    .tester-actions {
        justify-content: center;
    }
    
    .email-tester-body {
        padding: var(--email-spacing-md);
    }
    
    .tester-config-panel {
        padding: var(--email-spacing-md);
    }
    
    .preview-data-grid {
        grid-template-columns: 1fr;
    }
    
    .preview-header {
        flex-direction: column;
        gap: var(--email-spacing-md);
        align-items: stretch;
    }
    
    .preview-device-toggle {
        justify-content: center;
    }
    
    .preview-viewport {
        padding: var(--email-spacing-md);
    }
    
    .preview-frame {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .tester-config-panel,
    .preview-viewport {
        padding: var(--email-spacing-sm);
    }
    
    .preview-device-toggle {
        flex-direction: column;
        gap: var(--email-spacing-xs);
    }
    
    .preview-device-btn {
        text-align: center;
        padding: var(--email-spacing-sm);
    }
    
    .variable-tags {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* Email Analytics Styles */
.email-analytics {
    background-color: var(--email-bg-secondary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-primary);
    overflow: hidden;
}

/* Analytics Header */
.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-bottom: 1px solid var(--email-border-primary);
}

.analytics-title-section h3 {
    margin: 0;
    color: var(--email-text-primary);
    font-size: 1.1rem;
}

.analytics-title-section p {
    margin: var(--email-spacing-xs) 0 0 0;
    color: var(--email-text-secondary);
    font-size: 0.9rem;
}

.analytics-controls {
    display: flex;
    gap: var(--email-spacing-lg);
    align-items: center;
}

.time-range-selector {
    display: flex;
    align-items: center;
    gap: var(--email-spacing-sm);
}

.time-range-selector label {
    color: var(--email-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.analytics-select {
    padding: var(--email-spacing-sm);
    background-color: var(--email-bg-tertiary);
    border: 1px solid var(--email-border-light);
    border-radius: var(--email-radius-md);
    color: var(--email-text-primary);
    font-size: 0.9rem;
    transition: var(--email-transition);
}

.analytics-select:focus {
    outline: none;
    border-color: var(--email-color-primary);
    box-shadow: 0 0 0 2px var(--email-color-primary-light);
}

/* Analytics Navigation */
.analytics-nav {
    display: flex;
    gap: var(--email-spacing-xs);
    background-color: var(--email-bg-tertiary);
    padding: var(--email-spacing-xs);
    border-bottom: 1px solid var(--email-border-primary);
}

.analytics-nav-btn {
    background: none;
    border: none;
    color: var(--email-text-secondary);
    padding: var(--email-spacing-sm) var(--email-spacing-md);
    border-radius: var(--email-radius-md);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--email-transition);
    white-space: nowrap;
    flex: 1 1;
    text-align: center;
}

.analytics-nav-btn:hover {
    background-color: var(--email-bg-quaternary);
    color: var(--email-text-primary);
}

.analytics-nav-btn.active {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
}

/* Analytics Body */
.analytics-body {
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-secondary);
    min-height: 600px;
}

.analytics-section {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-xl);
}

.analytics-section h4 {
    margin: 0 0 var(--email-spacing-lg) 0;
    color: var(--email-text-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--email-spacing-xs);
}

/* Stats Grid */
.analytics-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: var(--email-spacing-lg);
    gap: var(--email-spacing-lg);
    margin-bottom: var(--email-spacing-xl);
}

.analytics-stat-card {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-lg);
    border: 1px solid var(--email-border-secondary);
    display: flex;
    align-items: center;
    gap: var(--email-spacing-md);
    transition: var(--email-transition);
}

.analytics-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--email-shadow-md);
}

.stat-icon {
    font-size: 2rem;
    opacity: 0.8;
}

.stat-content {
    flex: 1 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--email-spacing-xs);
}

.stat-label {
    color: var(--email-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Stat Card Colors */
.analytics-stat-card.primary .stat-number {
    color: var(--email-color-primary);
}

.analytics-stat-card.success .stat-number {
    color: var(--email-color-success);
}

.analytics-stat-card.info .stat-number {
    color: var(--email-color-info);
}

.analytics-stat-card.warning .stat-number {
    color: var(--email-color-warning);
}

.analytics-stat-card.danger .stat-number {
    color: var(--email-color-danger);
}

.analytics-stat-card.secondary .stat-number {
    color: var(--email-color-secondary);
}

/* Chart Section */
.analytics-chart-section {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-lg);
    border: 1px solid var(--email-border-secondary);
}

.chart-placeholder {
    height: 250px;
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-md);
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: var(--email-spacing-lg);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--email-spacing-xs);
    font-size: 0.85rem;
    color: var(--email-text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-color.sent { background-color: var(--email-color-primary); }
.legend-color.opened { background-color: var(--email-color-success); }
.legend-color.clicked { background-color: var(--email-color-warning); }

.chart-bars {
    flex: 1 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: var(--email-spacing-sm);
    padding-top: var(--email-spacing-lg);
}

.chart-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--email-spacing-xs);
    flex: 1 1;
    max-width: 60px;
}

.chart-bar {
    width: 8px;
    min-height: 4px;
    border-radius: 4px;
    transition: var(--email-transition);
}

.chart-bar.sent { background-color: var(--email-color-primary); }
.chart-bar.opened { background-color: var(--email-color-success); }
.chart-bar.clicked { background-color: var(--email-color-warning); }

.chart-label {
    font-size: 0.7rem;
    color: var(--email-text-muted);
    margin-top: var(--email-spacing-xs);
}

/* Campaigns Table */
.campaigns-table {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-secondary);
    overflow: hidden;
}

.campaigns-table-header,
.campaigns-table-row {
    display: grid;
    grid-template-columns: 2fr 100px 80px 120px 120px 120px 120px;
    grid-gap: var(--email-spacing-md);
    gap: var(--email-spacing-md);
    padding: var(--email-spacing-md);
    align-items: center;
}

.campaigns-table-header {
    background-color: var(--email-bg-primary);
    font-weight: 600;
    color: var(--email-color-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--email-border-secondary);
}

.campaigns-table-row {
    border-bottom: 1px solid var(--email-border-secondary);
    transition: var(--email-transition);
}

.campaigns-table-row:hover {
    background-color: var(--email-bg-quaternary);
}

.campaigns-table-row:last-child {
    border-bottom: none;
}

.col-name strong {
    color: var(--email-text-primary);
}

.metric-value {
    display: block;
    color: var(--email-text-primary);
    font-weight: 500;
}

.metric-rate {
    display: block;
    font-size: 0.8rem;
    color: var(--email-text-muted);
}

.metric-rate.success { color: var(--email-color-success); }
.metric-rate.warning { color: var(--email-color-warning); }
.metric-rate.danger { color: var(--email-color-danger); }

/* Performance Grid */
.performance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--email-spacing-xl);
    gap: var(--email-spacing-xl);
}

.performance-panel {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-lg);
    border: 1px solid var(--email-border-secondary);
}

.performance-panel h4 {
    margin: 0 0 var(--email-spacing-lg) 0;
    color: var(--email-text-primary);
    font-size: 1rem;
}

.top-performers-list {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-md);
}

.performer-item {
    display: flex;
    align-items: center;
    gap: var(--email-spacing-md);
    padding: var(--email-spacing-md);
    background-color: var(--email-bg-quaternary);
    border-radius: var(--email-radius-md);
    transition: var(--email-transition);
}

.performer-item:hover {
    background-color: var(--email-bg-primary);
}

.performer-rank {
    width: 32px;
    height: 32px;
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.performer-details {
    flex: 1 1;
}

.performer-name {
    color: var(--email-text-primary);
    font-weight: 500;
    margin-bottom: var(--email-spacing-xs);
}

.performer-stats {
    display: flex;
    gap: var(--email-spacing-md);
}

.stat-item {
    font-size: 0.8rem;
    color: var(--email-text-muted);
}

/* Delivery Grid */
.delivery-grid {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-lg);
    border: 1px solid var(--email-border-secondary);
}

.delivery-status-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: var(--email-spacing-lg);
    gap: var(--email-spacing-lg);
}

.delivery-status-item {
    text-align: center;
    padding: var(--email-spacing-lg);
    border-radius: var(--email-radius-md);
    transition: var(--email-transition);
}

.delivery-status-item:hover {
    transform: translateY(-2px);
}

.delivery-status-item.delivered {
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.delivery-status-item.pending {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.delivery-status-item.failed,
.delivery-status-item.bounced {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.delivery-status-item.spam {
    background-color: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.status-count {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--email-spacing-xs);
    color: var(--email-text-primary);
}

.status-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    text-transform: capitalize;
    margin-bottom: var(--email-spacing-xs);
}

.status-percentage {
    font-size: 0.8rem;
    color: var(--email-text-muted);
}

/* Audience Grid */
.audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--email-spacing-xl);
    gap: var(--email-spacing-xl);
}

.audience-panel {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-lg);
    border: 1px solid var(--email-border-secondary);
}

.audience-panel h4 {
    margin: 0 0 var(--email-spacing-lg) 0;
    color: var(--email-text-primary);
    font-size: 1rem;
}

.audience-stats {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-lg);
}

.audience-stat-item {
    text-align: center;
    padding: var(--email-spacing-md);
    background-color: var(--email-bg-quaternary);
    border-radius: var(--email-radius-md);
}

.audience-stat-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--email-text-primary);
    margin-bottom: var(--email-spacing-xs);
}

.audience-stat-label {
    font-size: 0.85rem;
    color: var(--email-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.countries-list {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-md);
}

.country-item {
    display: flex;
    align-items: center;
    gap: var(--email-spacing-md);
    padding: var(--email-spacing-md);
    background-color: var(--email-bg-quaternary);
    border-radius: var(--email-radius-md);
}

.country-details {
    flex: 1 1;
}

.country-name {
    color: var(--email-text-primary);
    font-weight: 500;
    margin-bottom: var(--email-spacing-xs);
}

.country-count {
    font-size: 0.8rem;
    color: var(--email-text-muted);
}

.country-percentage {
    font-weight: 600;
    color: var(--email-color-primary);
    min-width: 50px;
    text-align: right;
}

.country-bar {
    width: 80px;
    height: 6px;
    background-color: var(--email-bg-primary);
    border-radius: 3px;
    overflow: hidden;
}

.country-bar-fill {
    height: 100%;
    background-color: var(--email-color-primary);
    transition: var(--email-transition);
}

/* Loading State */
.analytics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--email-text-secondary);
}

.analytics-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--email-bg-tertiary);
    border-top: 4px solid var(--email-color-primary);
    border-radius: 50%;
    animation: email-spin 1s linear infinite;
    margin-bottom: var(--email-spacing-md);
}

.analytics-loading p {
    margin: 0;
    font-size: 0.9rem;
}

/* Mobile Responsiveness */
@media (max-width: 1200px) {
    .performance-grid,
    .audience-grid {
        grid-template-columns: 1fr;
    }
    
    .campaigns-table-header,
    .campaigns-table-row {
        grid-template-columns: 1fr 80px 100px 100px 100px;
        gap: var(--email-spacing-sm);
    }
    
    .col-type,
    .col-date {
        display: none;
    }
}

@media (max-width: 768px) {
    .analytics-header {
        flex-direction: column;
        gap: var(--email-spacing-md);
        align-items: stretch;
    }
    
    .analytics-nav {
        flex-wrap: wrap;
        gap: var(--email-spacing-xs);
    }
    
    .analytics-nav-btn {
        flex: 1 1;
        min-width: 120px;
    }
    
    .analytics-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--email-spacing-md);
    }
    
    .campaigns-table-header,
    .campaigns-table-row {
        grid-template-columns: 1fr 80px 80px;
        gap: var(--email-spacing-sm);
    }
    
    .col-delivered,
    .col-clicked {
        display: none;
    }
    
    .chart-bars {
        gap: var(--email-spacing-xs);
    }
    
    .delivery-status-chart {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--email-spacing-md);
    }
}

@media (max-width: 480px) {
    .analytics-body {
        padding: var(--email-spacing-md);
    }
    
    .analytics-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .analytics-stat-card {
        flex-direction: column;
        text-align: center;
        gap: var(--email-spacing-sm);
    }
    
    .stat-icon {
        font-size: 2.5rem;
    }
    
    .campaigns-table-header,
    .campaigns-table-row {
        grid-template-columns: 1fr 60px;
        gap: var(--email-spacing-xs);
    }
    
    .col-opened {
        display: none;
    }
    
    .delivery-status-chart {
        grid-template-columns: 1fr;
    }
    
    .country-item {
        flex-direction: column;
        text-align: center;
        gap: var(--email-spacing-sm);
    }
    
    .country-bar {
        width: 100%;
    }
}
/* Email List Manager Styles */
.email-list-manager {
    background-color: var(--email-bg-secondary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-primary);
    overflow: hidden;
}

/* List Manager Header */
.list-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-bottom: 1px solid var(--email-border-primary);
}

.manager-title-section h3 {
    margin: 0;
    color: var(--email-text-primary);
    font-size: 1.1rem;
}

.manager-title-section p {
    margin: var(--email-spacing-xs) 0 0 0;
    color: var(--email-text-secondary);
    font-size: 0.9rem;
}

.manager-actions {
    display: flex;
    gap: var(--email-spacing-lg);
    align-items: center;
}

.view-toggle {
    display: flex;
    gap: var(--email-spacing-xs);
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-md);
    padding: var(--email-spacing-xs);
}

.view-btn {
    background: none;
    border: none;
    color: var(--email-text-secondary);
    padding: var(--email-spacing-sm) var(--email-spacing-md);
    border-radius: var(--email-radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--email-transition);
    white-space: nowrap;
}

.view-btn:hover {
    background-color: var(--email-bg-quaternary);
    color: var(--email-text-primary);
}

.view-btn.active {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
}

/* Status Messages */
.list-message {
    padding: var(--email-spacing-md);
    margin: 0;
    font-size: 0.9rem;
    animation: email-alert-slide-in 0.3s ease-out;
}

.list-message.error {
    background-color: rgba(220, 53, 69, 0.1);
    border-bottom: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--email-color-danger);
}

.list-message.success {
    background-color: rgba(40, 167, 69, 0.1);
    border-bottom: 1px solid rgba(40, 167, 69, 0.3);
    color: var(--email-color-success);
}

/* List Manager Body */
.list-manager-body {
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-secondary);
    min-height: 600px;
}

/* Lists Grid */
.lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: var(--email-spacing-lg);
    gap: var(--email-spacing-lg);
}

.list-card {
    background-color: var(--email-bg-tertiary);
    border: 1px solid var(--email-border-secondary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-lg);
    transition: var(--email-transition);
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-md);
}

.list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--email-shadow-md);
    border-color: var(--email-color-primary);
}

.list-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--email-spacing-md);
}

.list-info {
    flex: 1 1;
}

.list-title {
    color: var(--email-text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--email-spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--email-spacing-xs);
}

.list-description {
    color: var(--email-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.list-status {
    flex-shrink: 0;
}

/* List Stats */
.list-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--email-spacing-md);
    gap: var(--email-spacing-md);
    padding: var(--email-spacing-md);
    background-color: var(--email-bg-quaternary);
    border-radius: var(--email-radius-md);
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--email-text-primary);
    margin-bottom: var(--email-spacing-xs);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--email-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* List Criteria */
.list-criteria {
    padding: var(--email-spacing-md);
    background-color: var(--email-bg-primary);
    border-radius: var(--email-radius-md);
    border-left: 4px solid var(--email-color-primary);
}

.criteria-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    margin-bottom: var(--email-spacing-sm);
}

.criteria-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--email-spacing-xs);
}

.criteria-tag {
    background-color: var(--email-color-primary-light);
    color: var(--email-color-primary);
    padding: var(--email-spacing-xs) var(--email-spacing-sm);
    border-radius: var(--email-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

/* List Actions */
.list-actions {
    display: flex;
    gap: var(--email-spacing-sm);
    justify-content: flex-end;
    padding-top: var(--email-spacing-md);
    border-top: 1px solid var(--email-border-secondary);
}

.list-action-btn {
    background: none;
    border: 1px solid var(--email-border-light);
    padding: var(--email-spacing-sm);
    border-radius: var(--email-radius-sm);
    cursor: pointer;
    transition: var(--email-transition);
    font-size: 0.8rem;
    color: var(--email-text-secondary);
}

.list-action-btn.manage:hover {
    background-color: var(--email-color-info);
    border-color: var(--email-color-info);
    color: var(--email-text-primary);
}

.list-action-btn.edit:hover {
    background-color: var(--email-color-warning);
    border-color: var(--email-color-warning);
    color: var(--email-bg-primary);
}

.list-action-btn.delete:hover {
    background-color: var(--email-color-danger);
    border-color: var(--email-color-danger);
    color: var(--email-text-primary);
}

/* Empty State */
.empty-lists {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    color: var(--email-text-secondary);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: var(--email-spacing-lg);
    opacity: 0.5;
}

.empty-lists h4 {
    margin: 0 0 var(--email-spacing-sm) 0;
    color: var(--email-text-primary);
}

.empty-lists p {
    margin: 0 0 var(--email-spacing-lg) 0;
    font-size: 0.9rem;
}

/* Segments Section */
.segments-section {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-xl);
}

.segments-info {
    text-align: center;
    padding: var(--email-spacing-xl);
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-secondary);
}

.segments-info h4 {
    margin: 0 0 var(--email-spacing-md) 0;
    color: var(--email-text-primary);
    font-size: 1.1rem;
}

.segments-info p {
    margin: 0;
    color: var(--email-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.segment-templates h5 {
    margin: 0 0 var(--email-spacing-lg) 0;
    color: var(--email-text-primary);
    font-size: 1rem;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: var(--email-spacing-lg);
    gap: var(--email-spacing-lg);
}

.template-card {
    background-color: var(--email-bg-tertiary);
    border: 1px solid var(--email-border-secondary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: var(--email-transition);
}

.template-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--email-shadow-md);
    border-color: var(--email-color-primary);
}

.template-icon {
    font-size: 2.5rem;
    margin-bottom: var(--email-spacing-md);
}

.template-name {
    color: var(--email-text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--email-spacing-sm);
}

.template-description {
    color: var(--email-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Buttons */
.list-btn {
    border: none;
    padding: var(--email-spacing-sm) var(--email-spacing-lg);
    border-radius: var(--email-radius-md);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--email-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--email-spacing-xs);
    white-space: nowrap;
}

.list-btn.primary {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
}

.list-btn.primary:hover:not(:disabled) {
    background-color: var(--email-color-primary-hover);
    transform: translateY(-1px);
}

.list-btn.secondary {
    background-color: var(--email-color-secondary);
    color: var(--email-text-primary);
}

.list-btn.secondary:hover:not(:disabled) {
    background-color: var(--email-color-secondary-hover);
    transform: translateY(-1px);
}

.list-btn:disabled {
    background-color: var(--email-border-light);
    color: var(--email-text-disabled);
    cursor: not-allowed;
    transform: none;
}

/* Modal Styles */
.list-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--email-spacing-md);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.list-modal {
    background-color: var(--email-bg-secondary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-primary);
    max-width: 600px;
    width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--email-shadow-lg);
    animation: email-modal-appear 0.2s ease-out;
}

.list-modal.large {
    max-width: 1000px;
}

.list-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-bottom: 1px solid var(--email-border-primary);
}

.list-modal-header h4 {
    margin: 0;
    color: var(--email-text-primary);
    font-size: 1rem;
}

.list-modal-close {
    background: none;
    border: none;
    color: var(--email-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--email-spacing-xs);
    border-radius: var(--email-radius-sm);
    transition: var(--email-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.list-modal-close:hover {
    background-color: var(--email-bg-tertiary);
    color: var(--email-text-primary);
}

.list-modal-body {
    padding: var(--email-spacing-lg);
    flex: 1 1;
    overflow-y: auto;
}

.list-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--email-spacing-sm);
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-top: 1px solid var(--email-border-primary);
}

/* Form Styles */
.list-form {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-xl);
}

.form-section {
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-secondary);
}

.form-section h5,
.form-section h6 {
    margin: 0 0 var(--email-spacing-lg) 0;
    color: var(--email-color-primary);
    font-size: 1rem;
}

.form-section h6 {
    font-size: 0.9rem;
    margin-bottom: var(--email-spacing-md);
}

.list-form-group {
    margin-bottom: var(--email-spacing-lg);
}

.list-form-group label {
    display: block;
    margin-bottom: var(--email-spacing-sm);
    color: var(--email-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.list-input,
.list-textarea,
.list-select {
    width: 100%;
    padding: var(--email-spacing-sm);
    background-color: var(--email-bg-primary);
    border: 1px solid var(--email-border-light);
    border-radius: var(--email-radius-md);
    color: var(--email-text-primary);
    font-size: 0.9rem;
    transition: var(--email-transition);
    font-family: inherit;
}

.list-input:focus,
.list-textarea:focus,
.list-select:focus {
    outline: none;
    border-color: var(--email-color-primary);
    box-shadow: 0 0 0 2px var(--email-color-primary-light);
}

.list-textarea {
    resize: vertical;
    min-height: 80px;
}

.list-checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: var(--email-spacing-sm);
    cursor: pointer;
}

.list-checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--email-color-primary);
}

/* Criteria and Stats Grids */
.criteria-grid,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: var(--email-spacing-md);
    gap: var(--email-spacing-md);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: var(--email-spacing-sm);
    gap: var(--email-spacing-sm);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--email-spacing-xs);
    color: var(--email-text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
}

.checkbox-item input[type="checkbox"] {
    accent-color: var(--email-color-primary);
}

.writing-stats-section {
    margin-top: var(--email-spacing-lg);
    padding-top: var(--email-spacing-lg);
    border-top: 1px solid var(--email-border-secondary);
}

/* Subscribers Section */
.subscribers-section {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-lg);
}

.subscribers-filters {
    display: flex;
    gap: var(--email-spacing-md);
}

.filter-group {
    flex: 1 1;
}

.subscribers-stats {
    display: flex;
    justify-content: center;
    gap: var(--email-spacing-lg);
    padding: var(--email-spacing-md);
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-md);
}

.subscribers-stats .stat-item {
    text-align: center;
}

.subscribers-stats .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--email-color-primary);
    margin-bottom: var(--email-spacing-xs);
}

.subscribers-stats .stat-label {
    font-size: 0.8rem;
    color: var(--email-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Subscribers Table */
.subscribers-table {
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-md);
    border: 1px solid var(--email-border-secondary);
    overflow: hidden;
}

.subscribers-header,
.subscriber-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 100px 120px 120px 80px;
    grid-gap: var(--email-spacing-md);
    gap: var(--email-spacing-md);
    padding: var(--email-spacing-md);
    align-items: center;
}

.subscribers-header {
    background-color: var(--email-bg-primary);
    font-weight: 600;
    color: var(--email-color-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--email-border-secondary);
}

.subscriber-row {
    border-bottom: 1px solid var(--email-border-secondary);
    transition: var(--email-transition);
}

.subscriber-row:hover {
    background-color: var(--email-bg-quaternary);
}

.subscriber-row:last-child {
    border-bottom: none;
}

.col-email {
    color: var(--email-text-primary);
    font-weight: 500;
}

.col-name {
    color: var(--email-text-secondary);
}

.engagement-score {
    font-weight: 600;
    color: var(--email-color-success);
    margin-bottom: var(--email-spacing-xs);
}

.activity-level {
    font-size: 0.8rem;
    color: var(--email-text-muted);
}

.col-actions {
    display: flex;
    gap: var(--email-spacing-xs);
    justify-content: center;
}

.subscriber-action-btn {
    background: none;
    border: 1px solid var(--email-border-light);
    padding: var(--email-spacing-xs);
    border-radius: var(--email-radius-sm);
    cursor: pointer;
    transition: var(--email-transition);
    font-size: 0.8rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscriber-action-btn:hover {
    background-color: var(--email-color-primary);
    border-color: var(--email-color-primary);
    color: var(--email-text-primary);
}

/* Loading Overlay */
.list-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 26, 26, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}

.list-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--email-bg-tertiary);
    border-top: 4px solid var(--email-color-primary);
    border-radius: 50%;
    animation: email-spin 1s linear infinite;
    margin-bottom: var(--email-spacing-md);
}

.list-loading-overlay p {
    color: var(--email-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 1200px) {
    .lists-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
    
    .template-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .subscribers-header,
    .subscriber-row {
        grid-template-columns: 2fr 1fr 100px 60px;
        gap: var(--email-spacing-sm);
    }
    
    .col-engagement,
    .col-joined {
        display: none;
    }
}

@media (max-width: 768px) {
    .list-manager-header {
        flex-direction: column;
        gap: var(--email-spacing-md);
        align-items: stretch;
    }
    
    .manager-actions {
        justify-content: space-between;
    }
    
    .lists-grid {
        grid-template-columns: 1fr;
    }
    
    .list-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .criteria-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .subscribers-filters {
        flex-direction: column;
    }
    
    .subscribers-header,
    .subscriber-row {
        grid-template-columns: 1fr 80px 60px;
        gap: var(--email-spacing-xs);
    }
    
    .col-name,
    .col-status {
        display: none;
    }
    
    .list-modal {
        width: 95vw;
    }
}

@media (max-width: 480px) {
    .list-manager-body {
        padding: var(--email-spacing-md);
    }
    
    .list-card {
        padding: var(--email-spacing-md);
    }
    
    .list-stats {
        grid-template-columns: 1fr;
    }
    
    .list-actions {
        flex-direction: column;
        gap: var(--email-spacing-xs);
    }
    
    .list-action-btn {
        width: 100%;
        justify-content: center;
    }
    
    .template-grid {
        grid-template-columns: 1fr;
    }
    
    .list-modal-body {
        padding: var(--email-spacing-md);
    }
    
    .form-section {
        padding: var(--email-spacing-md);
    }
    
    .list-modal-footer {
        flex-direction: column;
    }
}
/* Email Admin Styles */
.email-admin-content {
    padding: 1rem;
    width: 100%;
    background-color: #1a1a1a;
    min-height: calc(100vh - 200px);
}

/* Email Admin Specific Header - Override generic admin-header */
.email-admin-content .admin-header {
    text-align: center;
    margin-bottom: 1rem;  /* Reduced from default 30px */
    padding: 1rem;  /* Reduced from default 20px */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
}

.email-admin-content .admin-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
}

.email-admin-content .admin-header p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Global Email System Variables - Prefixed to avoid conflicts */
.email-admin-content {
    --email-color-primary: #4a90e2;
    --email-color-primary-hover: #357abd;
    --email-color-primary-light: rgba(74, 144, 226, 0.2);
    --email-color-success: #28a745;
    --email-color-success-hover: #218838;
    --email-color-warning: #ffc107;
    --email-color-danger: #dc3545;
    --email-color-danger-hover: #c82333;
    --email-color-info: #17a2b8;
    --email-color-secondary: #6c757d;
    --email-color-secondary-hover: #5a6268;
    
    --email-bg-primary: #1a1a1a;
    --email-bg-secondary: #262626;
    --email-bg-tertiary: #333333;
    --email-bg-quaternary: #2a2a2a;
    
    --email-text-primary: #ffffff;
    --email-text-secondary: #cccccc;
    --email-text-muted: #999999;
    --email-text-disabled: #666666;
    
    --email-border-primary: #333;
    --email-border-secondary: #444;
    --email-border-light: #555;
    
    --email-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --email-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --email-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    
    --email-radius-sm: 4px;
    --email-radius-md: 6px;
    --email-radius-lg: 8px;
    --email-radius-xl: 12px;
    
    --email-spacing-xs: 0.25rem;
    --email-spacing-sm: 0.5rem;
    --email-spacing-md: 1rem;
    --email-spacing-lg: 1.5rem;
    --email-spacing-xl: 2rem;
    
    --email-transition: all 0.2s ease;
}

/* Email Navigation Tabs - Two Row Layout */
.email-admin-tabs-container {
    margin: 1.5rem 0;
    border-bottom: 2px solid #333;
    padding-bottom: 0.5rem;
}

.email-admin-tabs-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.email-admin-tabs-row:last-child {
    margin-bottom: 0;
}

.email-admin-tab {
    background: none;
    border: none;
    color: #cccccc;
    padding: 0.75rem 1.5rem;
    border-radius: 8px 8px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.email-admin-tab:hover {
    background-color: #333333;
    color: #ffffff;
}

.email-admin-tab.active {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
    box-shadow: 0 2px 8px var(--email-color-primary-light);
}

/* Email Section Layout */
.email-admin-section {
    background-color: var(--email-bg-primary);
    border-radius: var(--email-radius-xl);
    padding: var(--email-spacing-xl);
    margin-top: var(--email-spacing-md);
    border: 1px solid var(--email-border-primary);
}

/* Templates Layout */
.email-templates-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    height: 800px;
}

.email-templates-sidebar {
    background-color: var(--email-bg-secondary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-primary);
    overflow: hidden;
}

.email-sidebar-header {
    padding: var(--email-spacing-md);
    border-bottom: 1px solid var(--email-border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--email-bg-primary);
}

.email-sidebar-header h3 {
    margin: 0;
    color: var(--email-text-primary);
    font-size: 1.1rem;
}

.email-templates-list {
    max-height: 700px;
    overflow-y: auto;
}

.email-template-item {
    padding: 1rem;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-template-item:hover {
    background-color: #333;
}

.email-template-item.selected {
    background-color: #4a90e2;
    border-left: 4px solid #357abd;
}

.email-template-name {
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.email-template-subject {
    font-size: 0.85rem;
    color: #cccccc;
    margin-bottom: 0.5rem;
}

.email-template-status {
    display: flex;
    justify-content: flex-end;
}

.email-status-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.email-status-badge.active {
    background-color: #28a745;
    color: white;
}

.email-status-badge.inactive {
    background-color: #6c757d;
    color: white;
}

/* Templates Editor */
.email-templates-editor {
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
}

/* Template Tabs */
.email-template-tabs {
    display: flex;
    gap: 0.25rem;
}

.email-template-tab {
    background-color: #333333;
    border: 1px solid #555;
    color: #cccccc;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-template-tab:hover {
    background-color: #444444;
    color: #ffffff;
}

.email-template-tab.active {
    background-color: #4a90e2;
    color: #ffffff;
    border-color: #357abd;
}

.email-template-basic-info {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #333;
    margin-bottom: 1.5rem;
}

.email-template-content-tab,
.email-template-css-tab {
    padding-top: 0;
}

.email-template-form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.email-form-header {
    padding: 1rem;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.email-form-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.email-form-actions {
    display: flex;
    gap: 0.5rem;
}

.email-form-content {
    padding: 1.5rem;
    flex: 1 1;
    overflow-y: auto;
}

.email-form-group {
    margin-bottom: 1.5rem;
}

.email-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-weight: 500;
}

.email-form-group input,
.email-form-group textarea,
.email-form-group select {
    width: 100%;
    padding: 0.75rem;
    background-color: #333333;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.email-form-group input:focus,
.email-form-group textarea:focus,
.email-form-group select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.email-html-editor {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.email-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.email-checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* No Selection State */
.email-no-selection {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.email-empty-state {
    text-align: center;
    color: #cccccc;
}

.email-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.email-empty-state h3 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}

.email-empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* Newsletter Editor */
.email-newsletter-editor {
    max-width: 800px;
}

.email-newsletter-content {
    min-height: 400px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.5;
}

.email-newsletter-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Settings Form */
.email-settings-form {
    max-width: 600px;
}

.email-setting-group {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #262626;
    border-radius: 8px;
    border: 1px solid #333;
}

.email-setting-group h4 {
    margin: 0 0 1rem 0;
    color: #ffffff;
}

.email-setting-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

/* Analytics */
.email-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 2rem;
}

.email-stat-card {
    background-color: #262626;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #333;
    text-align: center;
}

.email-stat-card h4 {
    margin: 0 0 0.5rem 0;
    color: #cccccc;
    font-size: 0.9rem;
    font-weight: 500;
}

.email-stat-number {
    font-size: 2rem;
    font-weight: 600;
    color: #4a90e2;
}

.email-analytics-placeholder {
    text-align: center;
    padding: 2rem;
    color: #cccccc;
}

/* Scheduler Placeholder */
.email-scheduler-content {
    text-align: center;
    padding: 2rem;
}

.email-scheduler-placeholder {
    background-color: #262626;
    padding: 3rem;
    border-radius: 8px;
    border: 1px solid #333;
}

.email-scheduler-placeholder .email-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.email-scheduler-placeholder h4 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}

.email-scheduler-placeholder p {
    margin: 0;
    color: #cccccc;
}

/* Enhanced Button System */
.email-btn-primary,
.email-btn-secondary,
.email-btn-success,
.email-btn-danger,
.email-btn-warning,
.email-btn-info {
    border: none;
    padding: var(--email-spacing-sm) var(--email-spacing-lg);
    border-radius: var(--email-radius-md);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--email-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--email-spacing-xs);
    text-decoration: none;
    box-shadow: var(--email-shadow-sm);
    white-space: nowrap;
}

.email-btn-primary {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
}

.email-btn-primary:hover:not(:disabled) {
    background-color: var(--email-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--email-shadow-md);
}

.email-btn-secondary {
    background-color: var(--email-color-secondary);
    color: var(--email-text-primary);
}

.email-btn-secondary:hover:not(:disabled) {
    background-color: var(--email-color-secondary-hover);
    transform: translateY(-1px);
    box-shadow: var(--email-shadow-md);
}

.email-btn-success {
    background-color: var(--email-color-success);
    color: var(--email-text-primary);
}

.email-btn-success:hover:not(:disabled) {
    background-color: var(--email-color-success-hover);
    transform: translateY(-1px);
    box-shadow: var(--email-shadow-md);
}

.email-btn-danger {
    background-color: var(--email-color-danger);
    color: var(--email-text-primary);
}

.email-btn-danger:hover:not(:disabled) {
    background-color: var(--email-color-danger-hover);
    transform: translateY(-1px);
    box-shadow: var(--email-shadow-md);
}

.email-btn-warning {
    background-color: var(--email-color-warning);
    color: var(--email-bg-primary);
}

.email-btn-warning:hover:not(:disabled) {
    filter: brightness(0.9);
    transform: translateY(-1px);
    box-shadow: var(--email-shadow-md);
}

.email-btn-info {
    background-color: var(--email-color-info);
    color: var(--email-text-primary);
}

.email-btn-info:hover:not(:disabled) {
    filter: brightness(0.9);
    transform: translateY(-1px);
    box-shadow: var(--email-shadow-md);
}

/* Button States */
.email-btn-primary:disabled,
.email-btn-secondary:disabled,
.email-btn-success:disabled,
.email-btn-danger:disabled,
.email-btn-warning:disabled,
.email-btn-info:disabled {
    background-color: var(--email-border-light);
    color: var(--email-text-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Button Sizes */
.email-btn-sm {
    padding: var(--email-spacing-xs) var(--email-spacing-md);
    font-size: 0.8rem;
}

.email-btn-lg {
    padding: var(--email-spacing-md) var(--email-spacing-xl);
    font-size: 1rem;
}

/* Outline Button Variants */
.email-btn-outline-primary,
.email-btn-outline-secondary,
.email-btn-outline-success,
.email-btn-outline-danger {
    background-color: transparent;
    border: 1px solid;
}

.email-btn-outline-primary {
    border-color: var(--email-color-primary);
    color: var(--email-color-primary);
}

.email-btn-outline-primary:hover:not(:disabled) {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
}

.email-btn-outline-secondary {
    border-color: var(--email-color-secondary);
    color: var(--email-color-secondary);
}

.email-btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--email-color-secondary);
    color: var(--email-text-primary);
}

.email-btn-outline-success {
    border-color: var(--email-color-success);
    color: var(--email-color-success);
}

.email-btn-outline-success:hover:not(:disabled) {
    background-color: var(--email-color-success);
    color: var(--email-text-primary);
}

.email-btn-outline-danger {
    border-color: var(--email-color-danger);
    color: var(--email-color-danger);
}

.email-btn-outline-danger:hover:not(:disabled) {
    background-color: var(--email-color-danger);
    color: var(--email-text-primary);
}

/* Enhanced Form System */
.email-form-control {
    width: 100%;
    padding: var(--email-spacing-sm);
    background-color: var(--email-bg-tertiary);
    border: 1px solid var(--email-border-light);
    border-radius: var(--email-radius-md);
    color: var(--email-text-primary);
    font-size: 0.9rem;
    transition: var(--email-transition);
    font-family: inherit;
}

.email-form-control:focus {
    outline: none;
    border-color: var(--email-color-primary);
    box-shadow: 0 0 0 2px var(--email-color-primary-light);
}

.email-form-control:disabled {
    background-color: var(--email-bg-quaternary);
    color: var(--email-text-disabled);
    cursor: not-allowed;
}

.email-form-control.error {
    border-color: var(--email-color-danger);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.email-form-control.success {
    border-color: var(--email-color-success);
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

/* Enhanced Card System */
.email-card {
    background-color: var(--email-bg-secondary);
    border: 1px solid var(--email-border-primary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-lg);
    box-shadow: var(--email-shadow-sm);
    transition: var(--email-transition);
}

.email-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--email-shadow-md);
    border-color: var(--email-border-secondary);
}

.email-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--email-spacing-lg);
    padding-bottom: var(--email-spacing-md);
    border-bottom: 1px solid var(--email-border-primary);
}

.email-card-title {
    margin: 0;
    color: var(--email-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.email-card-subtitle {
    margin: var(--email-spacing-xs) 0 0 0;
    color: var(--email-text-secondary);
    font-size: 0.9rem;
}

.email-card-body {
    color: var(--email-text-secondary);
    line-height: 1.5;
}

.email-card-footer {
    margin-top: var(--email-spacing-lg);
    padding-top: var(--email-spacing-md);
    border-top: 1px solid var(--email-border-primary);
    display: flex;
    gap: var(--email-spacing-sm);
    justify-content: flex-end;
}

/* Enhanced Badge System */
.email-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--email-spacing-xs);
    padding: var(--email-spacing-xs) var(--email-spacing-sm);
    border-radius: var(--email-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.email-badge-primary {
    background-color: var(--email-color-primary-light);
    color: var(--email-color-primary);
}

.email-badge-success {
    background-color: rgba(40, 167, 69, 0.2);
    color: var(--email-color-success);
}

.email-badge-warning {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--email-color-warning);
}

.email-badge-danger {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--email-color-danger);
}

.email-badge-info {
    background-color: rgba(23, 162, 184, 0.2);
    color: var(--email-color-info);
}

.email-badge-secondary {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--email-color-secondary);
}

/* Enhanced Loading System */
.email-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 26, 26, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}

.email-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--email-bg-tertiary);
    border-top: 4px solid var(--email-color-primary);
    border-radius: 50%;
    animation: email-spin 1s linear infinite;
    margin-bottom: var(--email-spacing-md);
}

.email-loading-text {
    color: var(--email-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

@keyframes email-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Modal System */
.email-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--email-spacing-md);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.email-modal {
    background-color: var(--email-bg-secondary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-primary);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--email-shadow-lg);
    animation: email-modal-appear 0.2s ease-out;
}

@keyframes email-modal-appear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.email-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-bottom: 1px solid var(--email-border-primary);
}

.email-modal-title {
    margin: 0;
    color: var(--email-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.email-modal-close {
    background: none;
    border: none;
    color: var(--email-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--email-spacing-xs);
    border-radius: var(--email-radius-sm);
    transition: var(--email-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.email-modal-close:hover {
    background-color: var(--email-bg-tertiary);
    color: var(--email-text-primary);
}

.email-modal-body {
    padding: var(--email-spacing-lg);
    flex: 1 1;
    overflow-y: auto;
    color: var(--email-text-secondary);
}

.email-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--email-spacing-sm);
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-primary);
    border-top: 1px solid var(--email-border-primary);
}

/* Enhanced Alert System */
.email-alert {
    padding: var(--email-spacing-md);
    border-radius: var(--email-radius-md);
    margin-bottom: var(--email-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--email-spacing-sm);
    font-size: 0.9rem;
    animation: email-alert-slide-in 0.3s ease-out;
}

@keyframes email-alert-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.email-alert-success {
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: var(--email-color-success);
}

.email-alert-error {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--email-color-danger);
}

.email-alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: var(--email-color-warning);
}

.email-alert-info {
    background-color: rgba(23, 162, 184, 0.1);
    border: 1px solid rgba(23, 162, 184, 0.3);
    color: var(--email-color-info);
}

/* Enhanced Typography */
.email-heading-1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--email-text-primary);
    margin: 0 0 var(--email-spacing-lg) 0;
    line-height: 1.2;
}

.email-heading-2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--email-text-primary);
    margin: 0 0 var(--email-spacing-md) 0;
    line-height: 1.3;
}

.email-heading-3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--email-text-primary);
    margin: 0 0 var(--email-spacing-md) 0;
    line-height: 1.4;
}

.email-heading-4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--email-text-primary);
    margin: 0 0 var(--email-spacing-sm) 0;
    line-height: 1.4;
}

.email-text-primary {
    color: var(--email-text-primary);
}

.email-text-secondary {
    color: var(--email-text-secondary);
}

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

.email-text-disabled {
    color: var(--email-text-disabled);
}

.email-text-center {
    text-align: center;
}

.email-text-left {
    text-align: left;
}

.email-text-right {
    text-align: right;
}

/* Enhanced Spacing Utilities */
.email-m-0 { margin: 0; }
.email-mt-1 { margin-top: var(--email-spacing-xs); }
.email-mt-2 { margin-top: var(--email-spacing-sm); }
.email-mt-3 { margin-top: var(--email-spacing-md); }
.email-mt-4 { margin-top: var(--email-spacing-lg); }
.email-mt-5 { margin-top: var(--email-spacing-xl); }

.email-mb-1 { margin-bottom: var(--email-spacing-xs); }
.email-mb-2 { margin-bottom: var(--email-spacing-sm); }
.email-mb-3 { margin-bottom: var(--email-spacing-md); }
.email-mb-4 { margin-bottom: var(--email-spacing-lg); }
.email-mb-5 { margin-bottom: var(--email-spacing-xl); }

.email-p-1 { padding: var(--email-spacing-xs); }
.email-p-2 { padding: var(--email-spacing-sm); }
.email-p-3 { padding: var(--email-spacing-md); }
.email-p-4 { padding: var(--email-spacing-lg); }
.email-p-5 { padding: var(--email-spacing-xl); }

/* Enhanced Display Utilities */
.email-d-flex { display: flex; }
.email-d-inline-flex { display: inline-flex; }
.email-d-block { display: block; }
.email-d-inline-block { display: inline-block; }
.email-d-none { display: none; }

.email-flex-column { flex-direction: column; }
.email-flex-row { flex-direction: row; }
.email-justify-center { justify-content: center; }
.email-justify-between { justify-content: space-between; }
.email-justify-end { justify-content: flex-end; }
.email-align-center { align-items: center; }
.email-align-start { align-items: flex-start; }
.email-align-end { align-items: flex-end; }

.email-gap-1 { gap: var(--email-spacing-xs); }
.email-gap-2 { gap: var(--email-spacing-sm); }
.email-gap-3 { gap: var(--email-spacing-md); }
.email-gap-4 { gap: var(--email-spacing-lg); }
.email-gap-5 { gap: var(--email-spacing-xl); }

/* Settings and Analytics Prefixed Classes */
.email-settings-section {
    background-color: var(--email-bg-secondary);
    border-radius: var(--email-radius-lg);
    padding: var(--email-spacing-xl);
    margin-top: var(--email-spacing-md);
    border: 1px solid var(--email-border-primary);
}

.email-settings-group {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--email-bg-tertiary);
    border-radius: var(--email-radius-md);
    border: 1px solid var(--email-border-secondary);
}

.email-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: var(--email-spacing-lg);
    gap: var(--email-spacing-lg);
    margin-top: var(--email-spacing-md);
}

.email-setting-item {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-xs);
}

.email-setting-item label {
    color: var(--email-text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.email-settings-input {
    padding: var(--email-spacing-sm);
    background-color: var(--email-bg-quaternary);
    border: 1px solid var(--email-border-light);
    border-radius: var(--email-radius-sm);
    color: var(--email-text-primary);
    font-size: 0.9rem;
    transition: var(--email-transition);
}

.email-settings-input:focus {
    outline: none;
    border-color: var(--email-color-primary);
    box-shadow: 0 0 0 2px var(--email-color-primary-light);
}

.email-settings-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--email-spacing-sm);
    margin-top: var(--email-spacing-md);
}

.email-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--email-spacing-sm);
    color: var(--email-text-secondary);
    cursor: pointer;
    padding: var(--email-spacing-xs);
    border-radius: var(--email-radius-sm);
    transition: var(--email-transition);
}

.email-checkbox-item:hover {
    background-color: var(--email-bg-quaternary);
    color: var(--email-text-primary);
}

.email-checkbox-item input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--email-color-primary);
}

.email-settings-actions {
    display: flex;
    gap: var(--email-spacing-md);
    justify-content: flex-end;
    margin-top: var(--email-spacing-xl);
    padding-top: var(--email-spacing-lg);
    border-top: 1px solid var(--email-border-primary);
}

.email-settings-save-btn {
    background-color: var(--email-color-primary);
    color: var(--email-text-primary);
    border: none;
    padding: var(--email-spacing-sm) var(--email-spacing-lg);
    border-radius: var(--email-radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: var(--email-transition);
    display: flex;
    align-items: center;
    gap: var(--email-spacing-xs);
}

.email-settings-save-btn:hover:not(:disabled) {
    background-color: var(--email-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--email-shadow-md);
}

.email-settings-save-btn:disabled {
    background-color: var(--email-border-light);
    color: var(--email-text-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.email-analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--email-spacing-xl);
    padding: var(--email-spacing-lg);
    background-color: var(--email-bg-secondary);
    border-radius: var(--email-radius-lg);
    border: 1px solid var(--email-border-primary);
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .email-templates-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .email-templates-sidebar {
        order: 2;
        max-height: 300px;
    }
    
    .email-templates-editor {
        order: 1;
        min-height: 500px;
    }
}

@media (max-width: 768px) {
    .email-admin-content {
        padding: 0.5rem;
    }
    
    .email-admin-tabs-row {
        gap: 0.25rem;
    }
    
    .email-admin-tab {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        flex: 1 1;
        min-width: 120px;
    }
    
    .email-settings-grid {
        grid-template-columns: 1fr;
    }
    
    .email-settings-actions {
        flex-direction: column;
    }
    
    .email-analytics-header {
        flex-direction: column;
        gap: var(--email-spacing-md);
        align-items: stretch;
    }
    
    .email-admin-section {
        padding: 1rem;
    }
    
    .email-form-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .email-form-actions {
        width: 100%;
        justify-content: stretch;
    }
    
    .email-form-actions button {
        flex: 1 1;
    }
    
    .email-analytics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .email-analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .email-newsletter-actions,
    .email-setting-actions {
        flex-direction: column;
    }
}
.email-inbox-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    border-radius: 20px;
    margin: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.inbox-header {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.95);
    gap: 15px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    border-radius: 20px 20px 0 0;
}

.inbox-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.inbox-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mailbox Tabs */
.mailbox-tabs {
    display: flex;
    gap: 10px;
    width: 100%;
}

.mailbox-tab {
    background: transparent;
    color: #6b7280;
    border: 1px solid #e8e5ff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.mailbox-tab:hover {
    background: #f8f7ff;
    color: #667eea;
    border-color: #667eea;
}

.mailbox-tab.active {
    background: #667eea;
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Support Email Specific Styles */
.email-list.full-width {
    flex: 1 1;
    max-width: 100%;
}

.email-item.support-email {
    border-left: 3px solid #f59e0b;
}

.email-item.support-email.has-ticket {
    border-left: 3px solid #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.ticket-badge {
    font-size: 18px;
    margin-right: 10px;
    color: #22c55e;
}

.create-ticket-btn {
    background: #f59e0b;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.create-ticket-btn:hover {
    background: #d97706;
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.4);
}

.ticket-number {
    background: #22c55e;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-left: 8px;
    font-weight: 600;
}

.inbox-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 40px;
}

.compose-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    height: 40px;
    display: flex;
    align-items: center;
}

.compose-btn:hover {
    background: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

.compose-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.setup-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 10px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.setup-btn:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
}

.setup-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.search-container {
    position: relative;
}

.search-input {
    background: white;
    border: 1px solid #e8e5ff;
    color: #333;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 250px;
    transition: all 0.3s;
    height: 40px;
    box-sizing: border-box;
}

.search-input::placeholder {
    color: #9ca3af;
}

.search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Status Messages */
.inbox-message {
    padding: 12px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.inbox-message.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(16, 185, 129, 0.95) 100%);
    color: white;
}

.inbox-message.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(236, 72, 153, 0.95) 100%);
    color: white;
}

/* Main Layout */
.inbox-layout {
    display: flex;
    flex: 1 1;
    overflow: hidden;
}

/* Sidebar */
.inbox-sidebar {
    width: 200px;
    background: rgba(255, 255, 255, 0.95);
    border-right: 1px solid #e8e5ff;
    padding: 0;
    box-shadow: 2px 0 10px rgba(102, 126, 234, 0.1);
}

.folder-list {
    padding: 0;
}

.folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s;
    font-size: 14px;
    color: #6b7280;
}

.folder-item:hover {
    background: #f8f7ff;
    color: #667eea;
}

.folder-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    font-weight: 600;
}

.unread-count {
    background: #ef4444;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}

.count {
    background: #9ca3af;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
}

/* Email List */
.email-list {
    flex: 1 1;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    border-right: 1px solid #e8e5ff;
}

.loading {
    padding: 40px;
    text-align: center;
    color: #9ca3af;
}

.empty-state {
    padding: 60px 40px;
    text-align: center;
    color: #9ca3af;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state h3 {
    margin: 0 0 10px 0;
    color: #6b7280;
}

.email-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 60px;
    background: white;
}

.email-item:hover {
    background: #faf9ff;
}

.email-item.selected {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-left: 3px solid #667eea;
}

.email-item.unread {
    background: #fbfaff;
    font-weight: 600;
}

.email-item.unread .email-subject {
    font-weight: 700;
}

.email-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 200px;
    flex-shrink: 0;
}

.star-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s;
    color: #fbbf24;
}

.star-btn:hover, .star-btn.starred {
    opacity: 1;
}

.email-from {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-item-center {
    flex: 1 1;
    min-width: 0;
    margin-right: 15px;
}

.email-subject {
    font-size: 14px;
    color: #374151;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.attachment-icon {
    font-size: 12px;
    opacity: 0.7;
    color: #9ca3af;
}

.email-preview {
    font-size: 13px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 120px;
    flex-shrink: 0;
}

.email-date {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

.email-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.email-item:hover .email-actions {
    opacity: 1;
}

.action-btn {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: background-color 0.2s;
    color: #6b7280;
}

.action-btn:hover {
    background: #f3f4f6;
    color: #667eea;
}

/* Email Detail */
.email-detail {
    width: 600px;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -2px 0 10px rgba(102, 126, 234, 0.1);
}

.email-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f3f4f6;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.email-detail-subject {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    flex: 1 1;
    margin-right: 20px;
}

.email-detail-actions {
    display: flex;
    gap: 10px;
}

.detail-action-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
}

.detail-action-btn:hover {
    background: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
}

.email-detail-meta {
    padding: 20px;
    background: #faf9ff;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

.email-detail-meta div {
    margin-bottom: 5px;
}

.email-detail-meta strong {
    color: #4b5563;
    margin-right: 0.5rem;
}

.email-detail-content {
    flex: 1 1;
    padding: 20px;
    overflow-y: auto;
    background: white;
    color: #374151;
}

.email-html-content {
    line-height: 1.6;
}

.email-html-content img {
    max-width: 100%;
    height: auto;
}

.email-text-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    margin: 0;
    color: #374151;
}

/* Compose Modal */
.compose-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.compose-modal {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.compose-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.compose-modal-header h3 {
    margin: 0;
    color: #4b5563;
    font-size: 18px;
}

.compose-close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    transition: all 0.2s;
}

.compose-close-btn:hover {
    background: #f3f4f6;
    color: #667eea;
}

.compose-form {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.compose-field {
    margin-bottom: 15px;
}

.compose-field label {
    display: block;
    margin-bottom: 5px;
    color: #6b7280;
    font-weight: 500;
    font-size: 14px;
}

.compose-field input,
.compose-field textarea {
    width: 100%;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    color: #374151;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s;
}

.compose-field input::placeholder,
.compose-field textarea::placeholder {
    color: #9ca3af;
}

.compose-field input:focus,
.compose-field textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

.compose-field textarea {
    resize: vertical;
    min-height: 200px;
}

.compose-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.compose-btn-primary {
    background: #667eea;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.compose-btn-primary:hover:not(:disabled) {
    background: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

.compose-btn-primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.compose-btn-secondary {
    background: #9ca3af;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.compose-btn-secondary:hover {
    background: #6b7280;
    transform: translateY(-1px);
}

.compose-btn-cancel {
    background: white;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.compose-btn-cancel:hover {
    background: #faf9ff;
    border-color: #667eea;
    color: #667eea;
}

/* Email Header and Footer for hello@ inbox */
.email-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.email-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.email-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .email-detail {
        width: 500px;
    }
}

@media (max-width: 768px) {
    .inbox-layout {
        flex-direction: column;
    }
    
    .inbox-sidebar {
        width: 100%;
        height: auto;
    }
    
    .folder-list {
        display: flex;
        overflow-x: auto;
    }
    
    .folder-item {
        white-space: nowrap;
        border-right: 1px solid #f3f4f6;
        border-bottom: none;
    }
    
    .email-detail {
        width: 100%;
    }
    
    .compose-modal {
        width: 95%;
        height: 95vh;
    }
    
    .inbox-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-input {
        width: 200px;
    }
}
.notification-admin-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    color: #e5e5e5;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.header-content h1 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-content p {
    color: #b0b0b0;
    font-size: 1.1rem;
    margin: 0;
}

/* Saving indicator */
.saving-indicator {
    color: #10b981;
    font-weight: 500;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-add-notification {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-add-notification:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-add-notification:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.notifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    max-width: 1400px;
}

.notification-card {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.notification-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.notification-card.disabled {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.02);
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.notification-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.type-name {
    font-weight: 600;
    text-transform: capitalize;
    color: #ffffff;
    font-size: 14px;
}

.notification-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #374151;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #10b981;
}

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.btn-edit, .btn-delete {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e5e5e5;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-edit:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

.notification-content {
    space-y: 12px;
}

.notification-message {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid #10b981;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.notification-description {
    color: #9ca3af;
    font-size: 13px;
    margin-bottom: 8px;
}

.notification-trigger {
    font-size: 12px;
    color: #6b7280;
    font-family: 'Inter', monospace;
}

.condition {
    color: #8b5cf6;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}

.modal-content {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
}

.btn-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: #e5e5e5;
    font-weight: 500;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    color: #e5e5e5;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

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

.help-text {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    font-style: italic;
}

.modal-footer {
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e5e5;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-save {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Error and Success Messages */
.error-message {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
}

.success-message {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
}

.admin-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #0f0f0f;
}

.admin-loading p {
    color: #e5e5e5;
    font-size: 1.2rem;
}

/* Global Settings Styles - Made specific to WritingNotificationAdmin */
.writing-notification-admin .global-settings {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.writing-notification-admin .global-settings h2 {
    color: #ffffff !important;
    font-size: 20px !important;
    margin-bottom: 20px !important;
    opacity: 1 !important;
}

.writing-notification-admin .settings-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-bottom: 15px;
}

.writing-notification-admin .settings-row:last-child {
    margin-bottom: 0;
}

.writing-notification-admin .setting-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.writing-notification-admin .setting-group > label:first-child,
.writing-notification-admin .global-settings .setting-group label {
    font-weight: 600 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    margin-bottom: 4px !important;
    opacity: 1 !important;
}

.writing-notification-admin .setting-hint,
.writing-notification-admin .global-settings .setting-hint {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 4px !important;
    font-style: italic !important;
    display: block !important;
    opacity: 1 !important;
}

.writing-notification-admin .setting-select,
.writing-notification-admin .setting-input,
.writing-notification-admin .global-settings select,
.writing-notification-admin .global-settings input[type="number"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
}

.writing-notification-admin .setting-select:focus,
.writing-notification-admin .setting-input:focus,
.writing-notification-admin .global-settings select:focus,
.writing-notification-admin .global-settings input[type="number"]:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.writing-notification-admin .toggle-label,
.writing-notification-admin .global-settings .toggle-label {
    margin-left: 12px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    opacity: 1 !important;
}

.writing-notification-admin .setting-group .toggle-switch {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

/* Trigger Conditions Styles */
.trigger-conditions {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.trigger-conditions h4 {
    margin: 0 0 12px 0;
    color: #a78bfa;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conditions-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 12px;
    gap: 12px;
    align-items: end;
}

.condition-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.condition-group label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.condition-input,
.condition-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 8px 10px;
    color: #e5e5e5;
    font-size: 13px;
    transition: all 0.2s ease;
    min-height: 36px;
}

.condition-input:focus,
.condition-select:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.1);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    cursor: pointer;
    padding-top: 8px;
}

.checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #a78bfa;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notification-admin-container {
        padding: 15px;
    }
    
    .admin-header {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    
    .header-content h1 {
        font-size: 2rem;
    }
    
    .notifications-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: 10px;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }
    
    .settings-row {
        grid-template-columns: 1fr;
    }
    
    .conditions-row {
        grid-template-columns: 1fr;
    }
    
    .global-settings {
        padding: 16px;
    }
    
    .trigger-conditions {
        padding: 12px;
    }
}

/* Writing Notification Admin Container */
.writing-notification-admin {
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.notification-categories {
    max-width: 1400px;
    margin: 0 auto;
}

/* Notification Category Container */
.notification-category {
    margin-bottom: 30px;
}

.notification-category h2 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notification-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.notification-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.notification-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.notification-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-name {
    font-weight: 600;
    color: #ffffff;
    font-size: 16px;
}

/* Global Writing Notification Settings - Prefixed Classes */
.writing-notification-admin .globalwritnotif-title {
    color: #374151 !important;
    font-size: 20px !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2) !important;
}

.writing-notification-admin .globalwritnotif-container {
    background: rgba(59, 130, 246, 0.05) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.writing-notification-admin .globalwritnotif-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    grid-gap: 20px !important;
    gap: 20px !important;
    margin-bottom: 15px !important;
}

.writing-notification-admin .globalwritnotif-row:last-child {
    margin-bottom: 0 !important;
}

.writing-notification-admin .globalwritnotif-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.writing-notification-admin .globalwritnotif-label {
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 15px !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.writing-notification-admin .globalwritnotif-hint {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-top: 4px !important;
    font-style: italic !important;
    display: block !important;
}

.writing-notification-admin .globalwritnotif-select,
.writing-notification-admin .globalwritnotif-input {
    background: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    color: #374151 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

.writing-notification-admin .globalwritnotif-select option {
    background: white !important;
    color: #374151 !important;
}

.writing-notification-admin .globalwritnotif-select:focus,
.writing-notification-admin .globalwritnotif-input:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    background: white !important;
}

.writing-notification-admin .globalwritnotif-toggle {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    cursor: pointer !important;
    margin-top: 8px !important;
}

.writing-notification-admin .globalwritnotif-toggle input[type="checkbox"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

.writing-notification-admin .globalwritnotif-toggle-slider {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    background-color: #9ca3af !important;
    border-radius: 24px !important;
    transition: background-color 0.3s !important;
}

.writing-notification-admin .globalwritnotif-toggle-slider:before {
    content: "" !important;
    position: absolute !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    border-radius: 50% !important;
    transition: transform 0.3s !important;
}

.writing-notification-admin .globalwritnotif-toggle input:checked + .globalwritnotif-toggle-slider {
    background-color: #3b82f6 !important;
}

.writing-notification-admin .globalwritnotif-toggle input:checked + .globalwritnotif-toggle-slider:before {
    transform: translateX(20px) !important;
}

.writing-notification-admin .globalwritnotif-toggle-label {
    margin-left: 12px !important;
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

.globalwritnotif-checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.globalwritnotif-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
    cursor: pointer;
}

.globalwritnotif-checkbox-label {
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}

.globalwritnotif-subgroup {
    margin-left: 26px;
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.globalwritnotif-col {
    flex: 1 1;
}

.globalwritnotif-save-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.globalwritnotif-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.globalwritnotif-save-btn:active {
    transform: translateY(0);
}

.globalwritnotif-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 24px 0;
}
.notification-settings-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #f8f9fa;
    min-height: 100vh;
    border-radius: 12px;
}

.notification-settings-header {
    margin-bottom: 2rem;
}

.notification-settings-header h1 {
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.notification-settings-header p {
    color: #666;
    font-size: 1rem;
}

.notification-categories {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.notification-category {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notification-category h2 {
    color: #333;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
}

.notification-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.notification-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    background: #fafafa;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.notification-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #667eea;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.notification-name {
    font-weight: 500;
    color: #333;
    font-size: 1.1rem;
}

.notification-config {
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-field label {
    font-weight: 500;
    color: #555;
    font-size: 0.9rem;
}

.config-input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    background: white;
}

.config-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.icon-input {
    width: 80px;
    text-align: center;
    font-size: 1.5rem;
}

.config-textarea {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    background: white;
    resize: vertical;
    font-family: inherit;
}

.config-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.help-text {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

.test-notification-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-notification-section h2 {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.test-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.test-select {
    flex: 1 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    background: white;
}

.test-button {
    padding: 0.75rem 1.5rem;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.test-button:hover {
    background: #5a67d8;
}

.test-preview {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.test-preview h3 {
    color: #555;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.preview-message {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.preview-message strong {
    color: #333;
    display: block;
    margin-bottom: 0.5rem;
}

.preview-message p {
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.notification-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.save-button {
    padding: 1rem 2rem;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.save-button:hover:not(:disabled) {
    background: #5a67d8;
}

.save-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.notification-settings-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    color: #666;
    font-size: 1.1rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .notification-settings-container {
        padding: 1rem;
    }

    .notification-category {
        padding: 1rem;
    }

    .test-controls {
        flex-direction: column;
    }

    .config-field label {
        font-size: 0.85rem;
    }
}

/* Tab Navigation Styles - Scoped to NotificationSettings */
.notification-settings-container .notification-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.notification-settings-container .notification-tab {
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #64748b;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-settings-container .notification-tab:hover {
    color: #334155;
    background: rgba(59, 130, 246, 0.05);
}

.notification-settings-container .notification-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    font-weight: 600;
}

.notification-settings-container .tab-content {
    animation: notificationFadeIn 0.3s ease-in;
}

@keyframes notificationFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design for tabs - Scoped */
@media (max-width: 768px) {
    .notification-settings-container .notification-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .notification-settings-container .notification-tab {
        border-bottom: none;
        border-left: 3px solid transparent;
        border-radius: 6px;
    }
    
    .notification-settings-container .notification-tab.active {
        border-left-color: #3b82f6;
        border-bottom-color: transparent;
    }
}

/* Ticker Settings Specific Styles */
.ticker-settings-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ticker-settings-section h2 {
    color: #1a1a1a;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

.ticker-settings-group {
    margin-bottom: 2rem;
}

.ticker-settings-group h3 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.ticker-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

/* Ticker Checkboxes */
.ticker-setting-item {
    margin-bottom: 1rem;
}

.ticker-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
    -webkit-user-select: none;
            user-select: none;
}

.ticker-checkbox-label input[type="checkbox"] {
    margin-right: 0.5rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.ticker-checkbox-label span {
    font-weight: 500;
    line-height: 1.2;
}

.ticker-setting-item .help-text {
    margin-left: 26px;
    margin-top: 0.25rem;
    display: block;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* Ticker Sliders */
.ticker-setting-slider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticker-setting-slider label {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ticker-slider {
    flex: 1 1;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.ticker-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.ticker-slider::-webkit-slider-thumb:hover {
    background: #5a67d8;
    transform: scale(1.1);
}

.ticker-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    border: none;
}

.ticker-slider::-moz-range-thumb:hover {
    background: #5a67d8;
    transform: scale(1.1);
}

.slider-value {
    min-width: 80px;
    text-align: right;
    font-weight: 600;
    color: #667eea;
    font-size: 0.95rem;
}

.ticker-setting-section {
    margin-top: 2rem;
}

.ticker-setting-section h4 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.section-description {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-style: italic;
}

/* Ticker Actions */
.ticker-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 768px) {
    .ticker-settings-grid {
        grid-template-columns: 1fr;
    }
    
    .ticker-setting-item .help-text {
        margin-left: 26px;
    }
}
.support-tickets-admin {
    padding: 2rem;
    background: #f5f6fa;
    min-height: 100vh;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
}

.tickets-header {
    margin-bottom: 2rem;
}

.tickets-header h2 {
    font-size: 1.75rem;
    color: #2c3e50;
    margin-bottom: 1.25rem;
}

.ticket-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0.75rem;
    gap: 0.75rem;
    margin-bottom: 2rem;
    width: 100%;
}

@media (max-width: 1024px) {
    .ticket-stats {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

.stat-card {
    background: white;
    padding: 1rem 0.75rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: #7f8c8d;
    text-transform: uppercase;
    line-height: 1.2;
    width: 100%;
    display: block;
    margin-top: 0.25rem;
}

.tickets-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-wrap: wrap;
}

.tickets-filters select,
.tickets-filters input {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background: white;
}

.tickets-filters input {
    flex: 1 1;
}

.tickets-content {
    width: 100%;
    min-height: 500px;
}

.tickets-list {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow-y: auto;
    max-height: none;
    width: 100%;
}

.ticket-row {
    padding: 1.25rem;
    border-bottom: 1px solid #ecf0f1;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-row:hover {
    background: #f8f9fa;
}

.ticket-row.selected {
    background: #e8f4fd;
    border-left: 4px solid #3498db;
    padding-left: calc(1.25rem - 4px);
}

.ticket-main {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1 1;
}

.ticket-id {
    font-size: 0.9rem;
    color: #7f8c8d;
    font-family: monospace;
    min-width: 160px;
    font-weight: 500;
}

.ticket-subject {
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
}

.ticket-subject strong {
    display: block;
    color: #2c3e50;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-user {
    font-size: 0.9rem;
    color: #7f8c8d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ticket-status {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    color: white;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}

.ticket-priority {
    font-weight: 600;
    text-transform: uppercase;
}

.ticket-time {
    color: #7f8c8d;
}

.ticket-detail {
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    flex-direction: column;
    max-height: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 600px;
        opacity: 1;
    }
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 2rem;
    background: white;
    border-bottom: 1px solid #ecf0f1;
    min-height: 0;
    flex-shrink: 0;
}

.detail-header h3 {
    margin: 0;
    color: #2c3e50;
    flex: 1 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    max-width: calc(100% - 40px);
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #95a5a6;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.close-btn:hover {
    background: #f8f9fa;
}


.detail-info {
    padding: 0.75rem 2rem;
    background: white;
    border-bottom: 1px solid #ecf0f1;
    overflow: hidden;
    flex-shrink: 0;
}

.info-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #7f8c8d;
    flex-wrap: wrap;
}

.info-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: inline-block;
}

.info-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.info-controls select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

.update-btn {
    padding: 0.5rem 1rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.update-btn:hover {
    background: #2980b9;
}


.messages-section {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.messages-list {
    flex: 1 1;
    overflow-y: auto;
    padding: 1rem 2rem;
    max-width: 100%;
    box-sizing: border-box;
    background: white;
}

.message {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.message.original {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
}

.message.admin {
    background: #e8f4fd;
    border-left: 3px solid #3498db;
}

.message.user {
    background: #fff;
    border: 1px solid #dee2e6;
}

.message.system {
    background: #e9ecef;
    border-left: 3px solid #6c757d;
}

.message.internal {
    background: #f8d7da;
    border-left: 3px solid #dc3545;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.message-header strong {
    color: #2c3e50;
}

.message-header span {
    color: #7f8c8d;
}

.message p {
    margin: 0;
    line-height: 1.6;
    color: #495057;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.reply-section {
    padding: 1.5rem 2rem;
    border-top: 1px solid #ecf0f1;
    background: white;
    flex-shrink: 0;
    border-top: 2px solid #ecf0f1;
}

.reply-section textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.reply-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.reply-controls label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #495057;
    font-size: 0.9rem;
    cursor: pointer;
}

.reply-controls label input[type="checkbox"] {
    cursor: pointer;
}

.send-btn {
    padding: 0.6rem 1.25rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

.send-btn:hover:not(:disabled) {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(52, 152, 219, 0.3);
}


.send-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.pagination button {
    padding: 0.5rem 1rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.pagination button:hover {
    background: #2980b9;
}


.pagination button:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

.loading {
    text-align: center;
    padding: 3rem;
    color: #7f8c8d;
}

.no-tickets {
    text-align: center;
    padding: 3rem;
    color: #7f8c8d;
}

/* Responsive */
@media (max-width: 1200px) {
    .ticket-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .ticket-main {
        width: 100%;
    }
    
    .ticket-meta {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .support-tickets-admin {
        padding: 1rem;
    }

    .ticket-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .tickets-filters {
        flex-wrap: wrap;
    }

    .tickets-filters select,
    .tickets-filters input {
        width: 100%;
    }

    .info-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .info-controls {
        flex-wrap: wrap;
    }
}
/* System Management Styles */
.system-sections {
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;
    margin-top: 2rem;
}

.system-card {
    background: #2a2a2a;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #3a3a3a;
}

.system-card h3 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.system-description {
    color: #999;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Migration Actions */
.migration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.migration-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
    background: #3a3a3a;
    color: #ffffff;
    border: 1px solid #4a4a4a;
}

.btn-secondary:hover:not(:disabled) {
    background: #4a4a4a;
}

.btn-warning {
    background: #f59e0b;
    color: white;
}

.btn-warning:hover:not(:disabled) {
    background: #d97706;
}

.btn-info {
    background: #3b82f6;
    color: white;
}

.btn-info:hover:not(:disabled) {
    background: #2563eb;
}

.migration-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Migration Status */
.migration-status {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.migration-status h4 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.migration-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.migration-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #2a2a2a;
}

.migration-item:last-child {
    border-bottom: none;
}

.migration-name {
    color: #cccccc;
    font-size: 0.95rem;
}

.migration-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.migration-badge.completed {
    background: #10b981;
    color: white;
}

.migration-badge.pending {
    background: #f59e0b;
    color: white;
}

/* AWS Status */
.aws-status,
.health-status {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #2a2a2a;
}

.status-item:last-child {
    border-bottom: none;
}

.status-label {
    color: #999;
    font-size: 0.95rem;
}

.status-value {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
}

/* AWS Actions */
.aws-actions,
.db-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Messages */
.admin-message {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    animation: slideIn 0.3s ease;
}

.admin-message.error {
    background: #ef4444;
    color: white;
}

.admin-message.success {
    background: #10b981;
    color: white;
}

@keyframes slideIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Admin Page Container */
.admin-page-container {
    min-height: 100vh;
    background: #1a1a1a;
    border-radius: 12px;
}

.admin-content-area {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-header {
    margin-bottom: 2rem;
}

.admin-header h1 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.admin-header p {
    color: #999;
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .system-sections {
        grid-template-columns: 1fr;
    }
    
    .migration-actions,
    .aws-actions,
    .db-actions {
        flex-direction: column;
    }
    
    .migration-btn {
        width: 100%;
    }
}
/* Override admin-header styles with main-header-main-pages styles */
.admin-design-container.page-container {
    padding: 0;
    max-width: 100%;
    margin: 0;
}

.admin-design-container .main-header-main-pages {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    text-align: left !important;
    border-radius: 0 !important;
}

.admin-design-container .main-header-main-pages h1 {
    font-size: 2rem !important;
    margin: 0 !important;
}

.admin-design-container .main-header-main-pages p {
    font-size: 1rem !important;
    opacity: 0.8 !important;
    margin: 5px 0 0 0 !important;
}

.design-sections {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}

.design-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
}

.design-section h2 {
    margin: 0 0 20px 0;
    color: #667eea;
    color: var(--primary-accent, #667eea);
    font-size: 1.5rem;
}

.design-section h3 {
    margin: 15px 0 10px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

/* Logo Upload Area */
.logo-upload-area {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.logo-preview {
    width: 200px;
    height: 100px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.no-logo {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.logo-actions {
    display: flex;
    gap: 10px;
}

.btn-upload,
.btn-remove {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-upload {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-remove {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid #ef4444;
}

.btn-remove:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Logo Positioning */
.logo-positioning {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

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

.form-group label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
}

.form-group select,
.form-group input[type="text"] {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    font-size: 14px;
}

.form-group select:focus,
.form-group input[type="text"]:focus {
    outline: none;
    border-color: #667eea;
    border-color: var(--primary-accent, #667eea);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.form-group input[type="range"] {
    width: 100%;
    margin: 5px 0;
}

.value-display {
    color: #667eea;
    color: var(--primary-accent, #667eea);
    font-weight: 600;
    font-size: 14px;
    margin-left: 10px;
}

/* Color Settings */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 30px;
    gap: 30px;
}

.color-group {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 8px;
}

.color-group h3 {
    margin-top: 0;
}

.color-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-input-wrapper input[type="color"] {
    width: 50px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}

.color-input-wrapper input[type="text"] {
    flex: 1 1;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    font-family: monospace;
}

/* Live Preview */
.preview-container {
    min-height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.preview-navbar {
    transition: all 0.3s ease;
}

.preview-content {
    transition: all 0.3s ease;
}

/* Action Buttons */
.design-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.btn-reset,
.btn-save-primary {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-reset {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-reset:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-save-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-save-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
}

.btn-save-primary:disabled,
.btn-reset:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Messages */
.admin-message {
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
    animation: slideIn 0.3s ease;
}

.admin-message.error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid #ef4444;
}

.admin-message.success {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid #22c55e;
}

@keyframes slideIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Loader Design Panel */
.loader-design-controls {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-gap: 20px;
    gap: 20px;
    margin-top: 10px;
}

.loader-css-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loader-css-editor label {
    font-weight: 500;
    color: #e5e5e5;
    font-size: 14px;
}

.loader-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loader-preview-panel label {
    font-weight: 500;
    color: #e5e5e5;
    font-size: 14px;
}

.loader-preview-container {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 1px solid #404040;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
    text-align: center;
}

.loader-preview-container p {
    margin: 0;
    color: #b0b0b0;
    font-size: 12px;
}

@media (max-width: 1024px) {
    .loader-design-controls {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .loader-preview-panel {
        order: -1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo-upload-area {
        flex-direction: column;
        align-items: stretch;
    }
    
    .logo-preview {
        width: 100%;
    }
    
    .logo-actions {
        flex-direction: column;
    }
    
    .form-grid,
    .color-grid {
        grid-template-columns: 1fr;
    }
    
    .design-actions {
        flex-direction: column;
    }
}
.saved-designs-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    color: #e5e5e5;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.admin-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.header-content h1 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-content p {
    color: #b0b0b0;
    font-size: 1.1rem;
    margin: 0;
}

.saved-designs-content {
    max-width: 1200px;
    margin: 0 auto;
}

.designs-section {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}

.designs-section h2 {
    color: #ffffff;
    font-size: 1.8rem;
    margin: 0 0 20px 0;
    font-weight: 600;
}

/* Power Button Section */
.power-button-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.power-button-section label {
    font-size: 1rem;
    font-weight: 500;
    color: #e5e5e5;
    margin: 0;
}

/* Power Button - Matching NewsTicker Style */
.power-button {
    background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
    position: relative;
    overflow: hidden;
}

.power-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.power-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
}

.power-button:hover::before {
    opacity: 1;
}

.power-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.3);
}

.power-button svg {
    width: 20px;
    height: 20px;
    z-index: 1;
    position: relative;
}

/* Placeholder Content */
.placeholder-content {
    text-align: center;
    padding: 40px 20px;
    color: #b0b0b0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.placeholder-content p {
    margin: 0 0 15px 0;
}

/* Error and Success Messages */
.error-message {
    background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
}

.success-message {
    background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
}

.admin-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #0f0f0f;
}

.admin-loading p {
    color: #e5e5e5;
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .saved-designs-container {
        padding: 15px;
    }
    
    .header-content h1 {
        font-size: 2rem;
    }
    
    .designs-section {
        padding: 20px;
    }
    
    .power-button-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
.procedural-animation-studio {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    background: #0f0f0f;
    color: #fff;
    z-index: 9999;
}

/* Prevent text selection while resizing */
.procedural-animation-studio.resizing {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Header */
.studio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.studio-header h2 {
    margin: 0;
    font-size: 20px;
    color: #fff;
}

.tab-buttons {
    display: flex;
    gap: 5px;
}

.tab-buttons button {
    padding: 8px 16px;
    background: transparent;
    color: #999;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.tab-buttons button:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #fff;
}

.tab-buttons button.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: transparent;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.playback-controls,
.view-controls,
.file-controls {
    display: flex;
    gap: 5px;
}

.playback-controls button,
.view-controls button,
.file-controls button,
.file-controls .icon-button {
    padding: 8px;
    background: #2a2a2a;
    color: #999;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.playback-controls button:hover,
.view-controls button:hover,
.file-controls button:hover,
.file-controls .icon-button:hover {
    background: #3a3a3a;
    color: #fff;
}

.close-button {
    padding: 10px !important;
    background: #e53e3e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    margin-left: 20px;
    transition: all 0.2s;
}

.close-button:hover {
    background: #c53030 !important;
    transform: scale(1.05);
}

.playback-controls button.active,
.view-controls button.active {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}

.frame-counter {
    padding: 0 10px;
    color: #999;
    font-size: 14px;
}

/* Main Studio Body */
.studio-body {
    flex: 1 1;
    display: flex;
    overflow: hidden;
}

/* Left Panel */
.procedural-animation-studio .left-panel {
    background: #1a1a1a;
    border-right: 1px solid #2a2a2a;
    overflow-y: auto;
    padding: 20px;
    flex-shrink: 0;
    position: relative;
}

/* Resize Handle */
.resize-handle {
    width: 5px;
    background: #2a2a2a;
    cursor: col-resize;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.resize-handle:hover {
    background: #667eea;
}

.resize-handle.resizing {
    background: #667eea;
}

.resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.3);
}

/* Center Canvas - PAS specific to avoid conflicts */
.procedural-animation-studio .pas-canvas-container {
    flex: 1 1 auto !important;
    position: relative !important;
    background: #0a0a0a !important;
    overflow: hidden !important;
    min-width: 0 !important; /* Allow proper flex shrinking */
    min-height: 0 !important; /* Allow proper flex shrinking */
    display: block !important; /* Changed from flex to block */
}

.animation-canvas {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    display: block;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* Right Panel */
.procedural-animation-studio .right-panel {
    width: 280px !important; /* Reduced from 350px for more canvas space */
    min-width: 280px !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    background: #1a1a1a;
    border-left: 1px solid #2a2a2a;
    overflow-y: auto;
}

/* Editor Components Common Styles */
.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2a2a2a;
}

.editor-header h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.editor-controls {
    display: flex;
    gap: 5px;
}

.editor-controls .zoom-controls {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #3a3a3a;
}

.editor-controls button {
    padding: 6px;
    background: #2a2a2a;
    color: #999;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.editor-controls button:hover {
    background: #3a3a3a;
    color: #fff;
}

.editor-controls button.active {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}

/* Curves/Chains/Paths List */
.curves-list,
.chains-list,
.paths-list {
    margin-bottom: 20px;
}

.curve-item,
.chain-item,
.path-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.curve-item:hover,
.chain-item:hover,
.path-item:hover {
    background: #3a3a3a;
    border-color: #4a4a4a;
}

.curve-item.selected,
.chain-item.selected,
.path-item.selected {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border-color: #667eea;
}

.curve-actions,
.chain-actions,
.path-actions {
    display: flex;
    gap: 5px;
}

.curve-actions button,
.chain-actions button,
.path-actions button {
    padding: 4px;
    background: transparent;
    color: #666;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.curve-actions button:hover,
.chain-actions button:hover,
.path-actions button:hover {
    color: #fff;
}

.curve-actions button:disabled,
.chain-actions button:disabled,
.path-actions button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Preview Areas */
.curve-preview,
.chain-preview,
.path-preview {
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
}

.curve-svg,
.chain-svg,
.path-svg {
    background: #111;
    border-radius: 4px;
    width: 100%;
}

.control-point,
.joint,
.target {
    cursor: move;
    transition: all 0.2s;
}

.control-point:hover,
.joint:hover,
.target:hover {
    filter: brightness(1.2);
}

.selected-curve,
.selected-path {
    filter: brightness(1.2);
}

/* Properties Sections */
.curve-properties,
.chain-properties,
.path-properties,
.keyframe-properties {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
}

.curve-properties h4,
.chain-properties h4,
.path-properties h4,
.keyframe-properties h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #fff;
}

.curve-properties .instructions {
    background: #1e1e1e;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 12px;
}

.curve-properties .instructions p {
    margin: 5px 0;
    color: #999;
}

.curve-properties .instructions strong {
    color: #667eea;
}

.property-group {
    margin-bottom: 15px;
}

.property-group label {
    display: block;
    margin-bottom: 5px;
    color: #999;
    font-size: 12px;
}

.property-group input[type="color"],
.property-group input[type="range"],
.property-group input[type="number"],
.property-group input[type="text"],
.property-group select {
    width: 100%;
    padding: 6px;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    color: #fff;
}

.property-group input[type="range"] {
    padding: 0;
}

/* Animal Presets */
.presets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
    gap: 15px;
    margin-bottom: 20px;
}

.preset-card {
    background: #2a2a2a;
    border: 2px solid #3a3a3a;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.preset-card:hover {
    background: #3a3a3a;
    border-color: #4a4a4a;
    transform: translateY(-2px);
}

.preset-card.selected {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border-color: #667eea;
}

.preset-icon {
    margin-bottom: 10px;
    color: #667eea;
}

.preset-card h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #fff;
}

.preset-card p {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #999;
}

.preset-details {
    display: flex;
    justify-content: space-around;
    font-size: 11px;
    color: #666;
}

.preset-details .detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preset-details .label {
    color: #999;
}

.preset-info {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    gap: 10px;
    margin: 15px 0;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.info-item label {
    font-size: 11px;
    color: #999;
}

.info-item span {
    font-size: 13px;
    color: #fff;
}

.apply-preset-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

.apply-preset-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Timeline Editor */
.timeline-editor {
    padding: 20px;
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.frame-display {
    padding: 0 15px;
    color: #999;
    font-size: 14px;
}

.frame-display strong {
    color: #fff;
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zoom-controls label {
    color: #999;
    font-size: 12px;
}

.zoom-controls input {
    width: 100px;
}

.zoom-controls span {
    color: #999;
    font-size: 12px;
}

.timeline-container {
    display: flex;
    margin-top: 20px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}

.properties-list {
    width: 120px;
    background: #1a1a1a;
    border-right: 1px solid #2a2a2a;
}

.property-row {
    height: 40px;
    border-bottom: 1px solid #2a2a2a;
}

.property-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 100%;
}

.property-label span {
    font-size: 12px;
    color: #999;
}

.property-label button {
    padding: 4px;
    background: transparent;
    color: #666;
    border: none;
    cursor: pointer;
}

.property-label button:hover {
    color: #fff;
}

.timeline-tracks {
    flex: 1 1;
    overflow-x: auto;
    position: relative;
}

.timeline-content {
    position: relative;
    min-height: 200px;
}

.frame-ruler {
    height: 30px;
    border-bottom: 1px solid #2a2a2a;
    position: relative;
}

.frame-marker {
    position: absolute;
    top: 0;
    height: 100%;
    border-left: 1px solid #3a3a3a;
    padding-left: 4px;
    font-size: 10px;
    color: #666;
}

.current-frame-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #f6ad55;
    pointer-events: none;
    z-index: 10;
}

.property-track {
    height: 40px;
    border-bottom: 1px solid #2a2a2a;
    position: relative;
}

.keyframe {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.keyframe-dot {
    width: 12px;
    height: 12px;
    background: #667eea;
    border: 2px solid #fff;
    border-radius: 2px;
    transform: rotate(45deg);
    transition: all 0.2s;
}

.keyframe:hover .keyframe-dot {
    background: #764ba2;
    transform: rotate(45deg) scale(1.2);
}

.keyframe.selected .keyframe-dot {
    background: #f6ad55;
    box-shadow: 0 0 0 2px rgba(246, 173, 85, 0.3);
}

.keyframe-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.keyframe-actions button {
    flex: 1 1;
    padding: 8px;
    background: #3a3a3a;
    color: #999;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
}

.keyframe-actions button:hover {
    background: #4a4a4a;
    color: #fff;
}

/* Properties Panel */
.properties-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel-header {
    padding: 15px;
    border-bottom: 1px solid #2a2a2a;
}

.panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-content {
    flex: 1 1;
    overflow-y: auto;
    padding: 15px;
}

.property-section {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.property-section h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #fff;
}

.no-selection {
    text-align: center;
    color: #666;
    padding: 20px;
}

.info-text {
    color: #999;
    font-size: 13px;
    line-height: 1.6;
}

.points-list {
    max-height: 200px;
    overflow-y: auto;
}

.point-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: #1a1a1a;
    border-radius: 4px;
    margin-bottom: 8px;
}

.point-item span {
    font-size: 12px;
    color: #999;
}

.point-coords {
    display: flex;
    gap: 5px;
}

.keyframe-count {
    padding: 10px;
    background: #1a1a1a;
    border-radius: 4px;
    text-align: center;
    color: #999;
    font-size: 13px;
    margin-bottom: 10px;
}

.keyframe-list {
    max-height: 150px;
    overflow-y: auto;
}

.keyframe-item {
    padding: 8px;
    background: #1a1a1a;
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: 12px;
    color: #999;
}

.keyframe-more {
    text-align: center;
    color: #666;
    font-size: 12px;
    padding: 5px;
}

.panel-footer {
    padding: 15px;
    border-top: 1px solid #2a2a2a;
    display: flex;
    gap: 10px;
}

.btn-apply,
.btn-save {
    flex: 1 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-apply {
    background: #3a3a3a;
    color: #fff;
}

.btn-apply:hover {
    background: #4a4a4a;
}

.btn-save {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}

.btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Footer Status Bar */
.studio-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #1a1a1a;
    border-top: 1px solid #2a2a2a;
    font-size: 12px;
    color: #999;
}

.status-left,
.status-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Scrollbar Styling */
.left-panel::-webkit-scrollbar,
.right-panel::-webkit-scrollbar,
.timeline-tracks::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.left-panel::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track,
.timeline-tracks::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.left-panel::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb,
.timeline-tracks::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
}

.left-panel::-webkit-scrollbar-thumb:hover,
.right-panel::-webkit-scrollbar-thumb:hover,
.timeline-tracks::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* Path Editor Additions */
.path-instructions {
    text-align: center;
    margin-bottom: 8px;
    color: #666;
    font-size: 11px;
}

.path-instructions small {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
.security-dashboard {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-header h2 {
    margin: 0;
    color: #1f2937;
    font-size: 28px;
}

.dashboard-updated {
    color: #6b7280;
    font-size: 14px;
}

.dashboard-loading,
.dashboard-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-left: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dashboard-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: white;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-button {
    flex: 1 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-button:hover {
    background: #f3f4f6;
    color: #374151;
}

.tab-button.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.dashboard-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Overview Tab Styles */
.security-overview {
    padding: 24px;
}

.security-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-bottom: 32px;
}

.security-metric-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}

.security-metric-card:hover {
    transform: translateY(-2px);
}

.security-metric-card.high-priority {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.metric-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.metric-icon {
    font-size: 24px;
}

.metric-title {
    font-weight: 600;
    font-size: 16px;
}

.metric-value {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
}

.metric-subtitle {
    opacity: 0.8;
    font-size: 14px;
}

.security-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
}

.security-chart-card {
    background: #f8fafc;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.security-chart-card h3 {
    margin: 0 0 20px 0;
    color: #1f2937;
    font-size: 18px;
}

.simple-chart {
    display: flex;
    align-items: end;
    gap: 12px;
    height: 120px;
}

.chart-bar-item {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.chart-bar-container {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: end;
}

.chart-bar {
    width: 100%;
    background: linear-gradient(to top, #3b82f6, #60a5fa);
    border-radius: 4px 4px 0 0;
    min-height: 8px;
}

.chart-bar-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.chart-bar-value {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

.activity-list {
    max-height: 200px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-type {
    color: #374151;
    font-weight: 500;
    text-transform: capitalize;
}

.activity-count {
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Events Tab Styles */
.security-events {
    padding: 24px;
}

.events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.events-header h3 {
    margin: 0;
    color: #1f2937;
    font-size: 20px;
}

.refresh-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.refresh-btn:hover {
    background: #2563eb;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 600px;
    overflow-y: auto;
}

.security-event-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.event-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-details {
    flex: 1 1;
}

.event-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.event-type {
    font-weight: 600;
    color: #1f2937;
    text-transform: capitalize;
}

.event-severity {
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.event-description {
    color: #4b5563;
    margin-bottom: 8px;
    line-height: 1.5;
}

.event-meta {
    display: flex;
    gap: 16px;
    color: #6b7280;
    font-size: 14px;
}

/* Threats Tab Styles */
.security-threats {
    padding: 24px;
}

.security-threats h3 {
    margin: 0 0 24px 0;
    color: #1f2937;
    font-size: 20px;
}

.threats-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.threat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}

.threat-ip {
    font-family: 'Inter', 'Menlo', monospace;
    font-weight: 600;
    color: #dc2626;
    font-size: 16px;
}

.threat-stats {
    display: flex;
    gap: 16px;
    color: #6b7280;
    font-size: 14px;
}

.threat-attempts {
    color: #dc2626;
    font-weight: 600;
}

/* Admin Tab Styles */
.admin-activity {
    padding: 24px;
}

.admin-activity h3 {
    margin: 0 0 24px 0;
    color: #1f2937;
    font-size: 20px;
}

.admin-actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-action-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f0f9ff;
    border: 1px solid #e0f2fe;
    border-radius: 8px;
}

.action-name {
    font-weight: 600;
    color: #0c4a6e;
    text-transform: capitalize;
}

.action-stats {
    display: flex;
    gap: 16px;
    color: #6b7280;
    font-size: 14px;
}

.action-count {
    color: #0369a1;
    font-weight: 600;
}

.no-data {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 40px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .security-dashboard {
        padding: 12px;
    }
    
    .security-metrics-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .security-charts-row {
        grid-template-columns: 1fr;
    }
    
    .dashboard-tabs {
        flex-wrap: wrap;
    }
    
    .tab-button {
        min-width: 120px;
    }
    
    .events-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .event-meta {
        flex-direction: column;
        gap: 4px;
    }
    
    .threat-item {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .threat-stats {
        justify-content: space-between;
    }
    
    .admin-action-item {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .action-stats {
        justify-content: space-between;
    }
}
/* Shared Component Styles for Animation System */

/* ==================== Animation Configuration Panel ==================== */
.animation-config-panel {
  margin: 20px 0;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.animation-config-panel h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.config-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-control label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.config-section-divider {
  margin: 24px 0 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.config-section-divider h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.highlight-color-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.color-preset-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.color-preset-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-container input[type="range"] {
  flex: 1 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.slider-container input[type="range"]::-webkit-slider-thumb:hover {
  background: #5a67d8;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.slider-value {
  min-width: 50px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.slider-value-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  background: white;
  text-align: center;
}

.slider-value-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.ease-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: white;
  color: #1f2937;
  cursor: pointer;
  transition: all 0.2s;
}

.ease-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.loop-control-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loop-delay-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 28px;
}

.loop-delay-input-group label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Animation button wrapper for sequence support */
.animation-btn-wrapper {
  display: flex;
  gap: 4px;
  align-items: stretch;
}

.animation-btn {
  flex: 1 1;
  position: relative;
}

.animation-btn.in-sequence {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%);
  color: white;
}

.sequence-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  color: #ffd700;
}

.add-sequence-btn {
  width: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #667eea;
  color: white;
  border: 1px solid #667eea;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.2s;
}

.add-sequence-btn:hover:not(:disabled) {
  background: #5a67d8;
  transform: scale(1.05);
}

.add-sequence-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Animation Sequence Panel */
.animation-sequence-panel {
  margin: 20px 0;
  padding: 16px;
  background: #f0f4ff;
  border: 2px solid #667eea;
  border-radius: 8px;
}

.animation-sequence-panel h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.sequence-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.sequence-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  gap: 12px;
}

.sequence-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #667eea;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

.sequence-name {
  flex: 1 1;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.sequence-controls {
  display: flex;
  gap: 4px;
}

.sequence-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.sequence-btn:hover:not(:disabled) {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.sequence-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.sequence-btn.remove {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.sequence-btn.remove:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #f87171;
}

.sequence-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

/* ==================== Text Transitions ==================== */
.text-transitions-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.text-transitions-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.text-transitions-header p {
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0 0 0;
}

.loop-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  background: #f0f4ff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-bottom: 12px;
}

.loop-checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.loop-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
}

.loop-delay-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loop-delay-group label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.loop-delay-input {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: white !important;
  color: #1f2937 !important;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s;
}

.loop-delay-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.loop-delay-input:disabled {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.passages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.passage-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}

.passage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.passage-number {
  font-size: 12px;
  font-weight: 600;
  color: #667eea;
}

.remove-passage-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.remove-passage-btn:hover {
  background: #fee2e2;
}

.passage-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.passage-text-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

.passage-text-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

.form-group label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.effect-select,
.duration-input,
.delay-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  background: white !important;
  color: #1f2937 !important;
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  cursor: pointer;
}

.effect-select {
  min-height: 32px;
  padding-right: 24px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714%27%20height%3D%278%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M7%200L0%207L14%207Z%27%20fill%3D%27%23374151%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
}

.effect-select option {
  background: white !important;
  color: #1f2937 !important;
  padding: 4px;
  font-size: 12px;
}

.effect-select option:checked,
.effect-select option:hover {
  background: #667eea !important;
  color: white !important;
}

.effect-select:focus,
.duration-input:focus,
.delay-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.add-passage-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: white;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.add-passage-btn:hover {
  border-color: #667eea;
  color: #667eea;
  background: #f0f4ff;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 8px;
}

.preview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.preview-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.preview-btn.playing {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

.apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #667eea;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.apply-btn:hover {
  background: #5a67d8;
}

.preview-indicator {
  padding: 8px;
  background: #f0f9ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1e40af;
  font-size: 12px;
  text-align: center;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ==================== Quick Animations ==================== */
.quick-animations {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.category-tab:hover {
  color: #1f2937;
  background: #f9fafb;
}

.category-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.animations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.animation-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.animation-btn:hover {
  background: #f9fafb;
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.animation-btn.applied {
  background: #eef2ff;
  border-color: #667eea;
}

.animation-icon {
  color: #667eea;
}

.animation-name {
  font-size: 11px;
  font-weight: 500;
  color: #4b5563;
}

.applied-check {
  color: #10b981;
}

.no-selection-message {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px;
  color: #9ca3af;
}

.quick-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.action-btn {
  flex: 1 1;
  padding: 8px 16px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.action-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.action-btn.primary {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.action-btn.primary:hover {
  background: #5a67d8;
  border-color: #5a67d8;
}

.beginner-tips {
  padding: 12px;
  background: #fef3c7;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
}

/* ==================== Timeline Tab ==================== */
.timeline-tab {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.timeline-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: #f9fafb;
  border-radius: 6px;
  gap: 8px;
  flex-wrap: wrap;
}

.playback-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-tab .control-btn {
  padding: 6px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  outline: none;
  min-width: 32px;
  height: 32px;
}

.timeline-tab .control-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.timeline-tab .control-btn:active {
  background: #e5e7eb;
  transform: scale(0.95);
}

.time-display {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}

.timeline-options {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.option-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #6b7280;
}

.zoom-controls input[type="range"] {
  width: 60px;
  height: 4px;
}

.timeline-area {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  max-height: 400px;
}

.timeline-ruler {
  position: relative;
  height: 24px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  min-width: 100%;
}

.ruler-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d1d5db;
}

.ruler-mark.second {
  background: #9ca3af;
}

.time-label {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 10px;
  color: #6b7280;
}

.timeline-tab .timeline-scrubber {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  cursor: ew-resize;
  z-index: 10;
  pointer-events: none;
}

.timeline-tab .scrubber-head {
  position: absolute;
  top: -4px;
  left: -5px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.timeline-tab .scrubber-line {
  position: absolute;
  top: 8px;
  bottom: -1000px;
  left: -1px;
  width: 2px;
  background: #ef4444;
  opacity: 0.5;
}

.timeline-layers {
  transform-origin: left center;
  background: #ffffff;
}

.timeline-layer {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: transparent;
  min-height: 32px;
}

.layer-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: #ffffff;
  border-bottom: none;
  min-height: 32px;
  width: 240px;
  min-width: 240px;
  flex-shrink: 0;
}

.expand-btn {
  padding: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
}

.layer-info {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
}

.layer-name {
  font-size: 12px;
  font-weight: 500;
  color: #1f2937;
}

.keyframe-count {
  font-size: 11px;
  color: #9ca3af;
}

.layer-controls {
  display: flex;
  gap: 4px;
}

.timeline-tab .layer-btn {
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.timeline-tab .layer-btn:hover {
  color: #1f2937;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.timeline-tab .layer-btn:active {
  background: #e5e7eb;
  transform: scale(0.9);
}

.layer-track {
  position: relative;
  height: 32px;
  background: #f9fafb;
  flex: 1 1;
  min-width: 600px;
  border-left: 1px solid #e5e7eb;
}

.keyframe {
  position: absolute;
  top: 8px;
  height: 24px;
  background: #667eea;
  border-radius: 4px;
  cursor: move;
  transition: background 0.2s;
}

.keyframe:hover {
  background: #5a67d8;
}

.keyframe.selected {
  background: #4c51bf;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.keyframe-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}

.keyframe-handle.start {
  left: 0;
  border-radius: 4px 0 0 4px;
}

.keyframe-handle.end {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.keyframe-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 2px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.keyframe:hover .keyframe-delete {
  opacity: 1;
}

.layer-settings {
  padding: 12px;
  background: #f9fafb;
}

.keyframe-properties h5 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
}

.property-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.property-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.property-row label {
  min-width: 60px;
  font-size: 11px;
  color: #6b7280;
}

.property-row input,
.property-row select {
  flex: 1 1;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
}

.property-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}

.timeline-tips {
  padding: 12px;
  background: #f0f9ff;
  border-radius: 6px;
  font-size: 12px;
  color: #0369a1;
}

/* ==================== SVG Tools Tab ==================== */
.svg-tools-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.svg-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f9fafb;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.section-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-content {
  padding: 16px;
}

.draw-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 16px;
}

.draw-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.draw-option:hover {
  background: #f9fafb;
  border-color: #667eea;
}

.draw-option.selected {
  background: #eef2ff;
  border-color: #667eea;
}

.draw-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.setting-row label {
  min-width: 80px;
  font-size: 12px;
  color: #6b7280;
}

.setting-row input[type="range"] {
  flex: 1 1;
}

.setting-row span {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  color: #4b5563;
}

.morph-targets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
}

.morph-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.morph-shape:hover {
  border-color: #667eea;
}

.morph-shape.selected {
  background: #eef2ff;
  border-color: #667eea;
}

.hover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.hover-effect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.hover-effect:hover {
  background: #f9fafb;
  border-color: #667eea;
}

.hover-effect.active {
  background: #eef2ff;
  border-color: #667eea;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
}

/* ==================== Effects Tab ==================== */
.effects-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-selector {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.category-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.category-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.global-controls {
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.control-row:last-child {
  margin-bottom: 0;
}

.action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.effect-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.effect-item.active {
  border-color: #667eea;
}

.effect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.effect-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
}

.effect-remove {
  padding: 4px 8px;
  background: none;
  border: none;
  color: #ef4444;
  font-size: 18px;
  cursor: pointer;
}

.effect-controls {
  padding: 12px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.value-display {
  min-width: 50px;
  text-align: right;
  font-size: 11px;
  color: #6b7280;
}

.active-effects-summary {
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.active-effects-summary h5 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
}

.effects-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.effect-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.effect-badge.filter {
  background: #dbeafe;
  color: #1e40af;
}

.effect-badge.transform {
  background: #e0e7ff;
  color: #3730a3;
}

.effect-badge.particle {
  background: #fce7f3;
  color: #9f1239;
}

.effect-badge.distortion {
  background: #f3e8ff;
  color: #6b21a8;
}

.effect-badge.blend {
  background: #ecfccb;
  color: #3f6212;
}

/* ==================== Motion Paths Tab ==================== */
.motion-paths-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.path-templates {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.path-templates h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.template-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.template-btn:hover {
  background: #f9fafb;
  border-color: #667eea;
}

.template-btn.selected {
  background: #eef2ff;
  border-color: #667eea;
}

.drawing-tools {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.drawing-tools h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.tool-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.tool-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.tool-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.file-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.file-input:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.drawing-canvas {
  width: 100%;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: crosshair;
}

.path-settings {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.path-settings h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.preview-controls {
  display: flex;
  gap: 8px;
}

.preview-btn,
.save-btn {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.preview-btn:hover,
.save-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.path-display {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.path-display h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.path-svg {
  width: 100%;
  height: 200px;
  background: #fafbfc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

/* ==================== Interactions Tab ==================== */
.interactions-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.current-interactions {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.current-interactions h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.interactions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.interaction-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.interaction-item.selected {
  border-color: #667eea;
}

.interaction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
}

.interaction-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4b5563;
}

.trigger-name {
  font-weight: 500;
  color: #1f2937;
}

.action-name {
  color: #667eea;
  font-weight: 500;
}

.interaction-controls {
  display: flex;
  gap: 4px;
}

.toggle-btn,
.delete-btn {
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s;
}

.delete-btn:hover {
  color: #ef4444;
}

.interaction-details {
  padding: 16px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.config-section {
  margin-bottom: 16px;
}

.config-section:last-child {
  margin-bottom: 0;
}

.config-section h5 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
}

.config-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.config-row:last-child {
  margin-bottom: 0;
}

.config-row label {
  min-width: 100px;
  font-size: 12px;
  color: #6b7280;
}

.config-row input,
.config-row select,
.config-row textarea {
  flex: 1 1;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
}

.config-row textarea {
  font-family: 'Inter', 'Courier New', monospace;
  resize: vertical;
}

.conditions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-condition-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.add-condition-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.trigger-selector {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.trigger-selector h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.trigger-category {
  margin-bottom: 16px;
}

.trigger-category:last-child {
  margin-bottom: 0;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

.trigger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.trigger-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.trigger-btn:hover {
  background: #f9fafb;
  border-color: #667eea;
}

.interaction-templates {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.interaction-templates h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

/* ==================== Performance Monitor ==================== */
.performance-monitor-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000; /* High z-index to ensure it's above everything */
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.monitor-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh; /* Reduced to ensure it fits with margin */
  margin: 40px auto; /* Add margin from edges */
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  position: relative; /* Ensure proper stacking context */
}

.monitor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.monitor-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-btn {
  padding: 8px;
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #e5e7eb;
  color: #1f2937;
  transform: scale(1.05);
}

.performance-score {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(to right, #f9fafb, #ffffff);
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 8px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
}

.score-value {
  font-size: 36px;
  font-weight: 700;
}

.score-label {
  font-size: 12px;
  color: #6b7280;
}

.score-details {
  flex: 1 1;
}

.performance-level {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.monitor-section {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.monitor-section:last-child {
  border-bottom: none;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-top: 16px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  text-align: center;
}

.metric-icon {
  color: #667eea;
}

.metric-value {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.metric-label {
  font-size: 12px;
  color: #6b7280;
}

.metric-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.metric-status.good {
  background: #d1fae5;
  color: #065f46;
}

.metric-status.warning {
  background: #fed7aa;
  color: #92400e;
}

.metric-status.error {
  background: #fee2e2;
  color: #991b1b;
}

.analysis-list,
.recommendations-list {
  margin-top: 16px;
}

.analysis-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
}

.analysis-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.element-type {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

.element-id {
  font-size: 11px;
  color: #9ca3af;
}

.score {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.score.good {
  background: #d1fae5;
  color: #065f46;
}

.score.warning {
  background: #fed7aa;
  color: #92400e;
}

.score.error {
  background: #fee2e2;
  color: #991b1b;
}

.issues-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.issue {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.issue.info {
  background: #dbeafe;
  color: #1e40af;
}

.issue.warning {
  background: #fed7aa;
  color: #92400e;
}

.issue.error {
  background: #fee2e2;
  color: #991b1b;
}

.no-issues,
.no-recommendations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
  color: #10b981;
}

.recommendation {
  background: white;
  border: 1px solid;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

.recommendation.critical {
  border-color: #ef4444;
  background: #fef2f2;
}

.recommendation.warning {
  border-color: #f59e0b;
  background: #fffbeb;
}

.recommendation.success {
  border-color: #10b981;
  background: #f0fdf4;
}

.rec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rec-header h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.recommendation.critical .rec-header {
  color: #dc2626;
}

.recommendation.warning .rec-header {
  color: #d97706;
}

.recommendation.success .rec-header {
  color: #059669;
}

.recommendation p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #4b5563;
}

.rec-actions {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
}

.monitor-actions {
  display: flex;
  gap: 12px;
  padding: 20px;
  background: #f9fafb;
}

.monitor-actions .action-btn {
  flex: 1 1;
  padding: 10px 16px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.monitor-actions .action-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.monitor-actions .action-btn.primary {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.monitor-actions .action-btn.primary:hover {
  background: #5a67d8;
  border-color: #5a67d8;
}

/* ==================== Animation Library ==================== */
.animation-library-modal {
  position: fixed;
  top: 60px; /* Account for navigation bar */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999; /* Below nav but above other content */
}

.library-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 900px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.library-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.library-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.search-box {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.search-box input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 13px;
}

.category-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-filter select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.library-grid {
  flex: 1 1;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  overflow-y: auto;
}

.animation-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.animation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.animation-card.selected {
  border-color: #667eea;
  background: #f5f3ff;
}

.animation-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.animation-card-header h4 {
  flex: 1 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.favorite-btn {
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #d1d5db;
  transition: color 0.2s;
}

.favorite-btn:hover {
  color: #fbbf24;
}

.favorite-btn.active {
  color: #fbbf24;
}

.animation-description {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
  line-height: 1.4;
}

.animation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.tag {
  padding: 2px 6px;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 10px;
  color: #6b7280;
}

.animation-actions {
  display: flex;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.animation-actions .action-btn {
  flex: 1 1;
  padding: 4px 8px;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.animation-actions .action-btn:hover {
  background: #f9fafb;
}

.animation-actions .action-btn.preview {
  color: #3b82f6;
}

.animation-actions .action-btn.apply {
  color: #10b981;
}

.animation-actions .action-btn.duplicate {
  color: #6b7280;
}

.animation-actions .action-btn.delete {
  color: #ef4444;
}

.preset-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  background: #667eea;
  color: white;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px;
  color: #9ca3af;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.empty-state span {
  font-size: 12px;
  color: #9ca3af;
}

.animation-details {
  padding: 20px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.animation-details h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.animation-details p {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b7280;
}

.config-preview {
  margin-bottom: 16px;
}

.config-preview h5 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
}

.config-preview pre {
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 11px;
  font-family: 'Inter', 'Courier New', monospace;
  overflow-x: auto;
}

.detail-actions {
  display: flex;
  gap: 8px;
}

.primary-btn,
.secondary-btn {
  flex: 1 1;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.primary-btn {
  background: #667eea;
  color: white;
  border: none;
}

.primary-btn:hover {
  background: #5a67d8;
}

.secondary-btn {
  background: white;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.secondary-btn:hover {
  background: #f9fafb;
}

/* ==================== Advanced Typewriter Styles ==================== */
.advanced-typewriter-container {
  padding: 20px;
}

.advanced-typewriter-header {
  margin-bottom: 20px;
}

.advanced-typewriter-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.advanced-typewriter-header p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

/* Inline Animations Section - Specific to Advanced Typewriter */
.advanced-typewriter-container .adv-typewriter-inline-animations-section {
  margin-top: 24px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.advanced-typewriter-container .adv-typewriter-inline-animations-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.advanced-typewriter-container .adv-typewriter-inline-animations-section h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.advanced-typewriter-container .adv-typewriter-inline-animations-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advanced-typewriter-container .adv-typewriter-inline-animation-item {
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.advanced-typewriter-container .adv-typewriter-animation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.advanced-typewriter-container .adv-typewriter-animation-number {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.advanced-typewriter-container .adv-typewriter-animation-tag {
  padding: 2px 8px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  border-radius: 4px;
  flex: 1 1;
}

.advanced-typewriter-container .adv-typewriter-remove-btn {
  padding: 4px;
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.advanced-typewriter-container .adv-typewriter-remove-btn:hover {
  background: #fee2e2;
}

.advanced-typewriter-container .adv-typewriter-animation-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.advanced-typewriter-container .adv-typewriter-control-row {
  display: flex;
  gap: 16px;
}

.advanced-typewriter-container .adv-typewriter-control-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.advanced-typewriter-container .adv-typewriter-control-row:first-child {
  flex-direction: row;
  gap: 12px;
}

.advanced-typewriter-container .adv-typewriter-control-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* Allow flex items to shrink */
}

.advanced-typewriter-container .adv-typewriter-control-group label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}

.advanced-typewriter-container .adv-typewriter-effect-select,
.advanced-typewriter-container .adv-typewriter-easing-select {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: white;
  color: #374151;
  cursor: pointer;
  box-sizing: border-box;
}

.advanced-typewriter-container .adv-typewriter-effect-select:focus,
.advanced-typewriter-container .adv-typewriter-easing-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.advanced-typewriter-container .adv-typewriter-slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"] {
  flex: 1 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  background: #5a67d8;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  border: none;
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"]::-moz-range-thumb:hover {
  background: #5a67d8;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.advanced-typewriter-container .adv-typewriter-slider-value {
  min-width: 60px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  background: white;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  gap: 12px;
  width: 100%;
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"] {
  flex: 1 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  min-width: 0;
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: transform 0.2s;
  transition: transform 0.2s;
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  -moz-transition: transform 0.2s;
  transition: transform 0.2s;
}

.advanced-typewriter-container .adv-typewriter-slider-container input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
}

.advanced-typewriter-container .adv-typewriter-slider-value {
  min-width: 60px;
  padding: 4px 8px;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  text-align: center;
  white-space: nowrap;
}

/* Ensure proper focus states for all inputs */
.advanced-typewriter-container input[type="range"]:focus {
  outline: none;
}

.advanced-typewriter-container select:disabled,
.advanced-typewriter-container input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Unified Animation Panel Styles */

.unified-animation-panel {
  background: white;
  border-left: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.unified-animation-panel.collapsed .tab-navigation,
.unified-animation-panel.collapsed .tab-content,
.unified-animation-panel.collapsed .migration-warning {
  display: none;
}

/* Panel Header - Match existing panels */
.unified-animation-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  min-height: 48px;
  flex-shrink: 0;
}

.unified-animation-panel .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unified-animation-panel .header-left h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 6px;
}

.unified-animation-panel .collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s;
  border-radius: 4px;
}

.unified-animation-panel .collapse-btn:hover {
  color: #1f2937;
  background: rgba(0, 0, 0, 0.05);
}

.unified-animation-panel .header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.unified-animation-panel .level-selector {
  padding: 5px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: white;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
  height: 28px;
}

.unified-animation-panel .level-selector:hover {
  border-color: #9ca3af;
}

.unified-animation-panel .level-selector:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.unified-animation-panel .icon-btn {
  padding: 5px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: #6b7280;
  width: 28px;
  height: 28px;
}

.unified-animation-panel .icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1f2937;
}

.unified-animation-panel .legacy-btn {
  padding: 5px 10px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #92400e;
  cursor: pointer;
  transition: all 0.2s;
  height: 28px;
}

.unified-animation-panel .legacy-btn:hover {
  background: #fde68a;
}

/* Migration Warning */
.unified-animation-panel .migration-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  border-bottom: 1px solid #fde68a;
  font-size: 12px;
  color: #92400e;
}

.unified-animation-panel .migration-warning button {
  margin-left: auto;
  padding: 4px 8px;
  background: white;
  border: 1px solid #fde68a;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.unified-animation-panel .migration-warning button:hover {
  background: #fef8e1;
}

/* Tab Navigation */
.unified-animation-panel .tab-navigation {
  display: flex;
  gap: 0;
  padding: 0;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f9fafb;
  flex-shrink: 0;
}

.unified-animation-panel .tab-navigation::-webkit-scrollbar {
  height: 4px;
}

.unified-animation-panel .tab-navigation::-webkit-scrollbar-track {
  background: #f9fafb;
}

.unified-animation-panel .tab-navigation::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.unified-animation-panel .tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  outline: none;
  position: relative;
}

.unified-animation-panel .tab-btn:hover {
  color: #1f2937;
  background: rgba(0, 0, 0, 0.02);
}

.unified-animation-panel .tab-btn.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
  background: white;
}

.unified-animation-panel .tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: white;
}

/* Tab Content */
.unified-animation-panel .tab-content {
  padding: 16px;
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #ffffff;
  background: white;
}

.unified-animation-panel .tab-content::-webkit-scrollbar {
  width: 6px;
}

.unified-animation-panel .tab-content::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 3px;
}

.unified-animation-panel .tab-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.unified-animation-panel .tab-content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.unified-animation-panel .no-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: #9ca3af;
  min-height: 300px;
}

.unified-animation-panel .no-selection p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.unified-animation-panel .no-selection span {
  font-size: 12px;
  color: #9ca3af;
}

/* Help Modal */
.unified-animation-panel .help-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.unified-animation-panel .help-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.unified-animation-panel .help-content h4 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.unified-animation-panel .help-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.unified-animation-panel .help-section {
  padding: 16px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.unified-animation-panel .help-section h5 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
}

.unified-animation-panel .help-section p {
  margin: 0 0 8px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

.unified-animation-panel .help-section ul {
  margin: 8px 0;
  padding-left: 20px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}

.unified-animation-panel .help-section strong {
  color: #1f2937;
  font-weight: 500;
}

.unified-animation-panel .close-help {
  margin-top: 20px;
  padding: 10px 20px;
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}

.unified-animation-panel .close-help:hover {
  background: #5558f0;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .unified-animation-panel .header-right {
    flex-wrap: wrap;
  }

  .unified-animation-panel .tab-navigation {
    padding: 0;
  }

  .unified-animation-panel .tab-btn {
    padding: 10px 12px;
    font-size: 11px;
  }

  .unified-animation-panel .help-content {
    margin: 16px;
    max-width: calc(100% - 32px);
  }
}

/* Ensure proper stacking and isolation */
.unified-animation-panel {
  position: relative;
  z-index: 1;
}

.unified-animation-panel * {
  box-sizing: border-box;
}

/* Override any conflicting global styles */
.unified-animation-panel input,
.unified-animation-panel select,
.unified-animation-panel button {
  font-family: inherit;
}

.unified-animation-panel button {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Landing Page Editor Styles */

/* SVG Morph Editor Styles */
.svg-morph-editor {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-top: 10px;
}

.svg-morph-editor h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.svg-morph-editor h5 {
  margin: 10px 0;
  color: #555;
  font-size: 13px;
  font-weight: 500;
}

.morph-settings {
  margin-bottom: 20px;
  padding: 10px;
  background: white;
  border-radius: 6px;
}

.morph-timeline {
  margin: 20px 0;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.add-keyframe-btn {
  padding: 6px 12px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
}

.add-keyframe-btn:hover {
  background: #5a67d8;
}

.keyframes-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
  background: white;
  border-radius: 6px;
  min-height: 120px;
}

.keyframe-item {
  position: relative;
  min-width: 100px;
  padding: 10px;
  background: #f8f9fa;
  border: 2px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.keyframe-item.selected {
  border-color: #667eea;
  background: #f0f4ff;
}

.keyframe-item:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.keyframe-preview {
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 4px;
}

.keyframe-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.keyframe-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #666;
}

.keyframe-time {
  font-weight: 600;
}

.delete-keyframe {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
  pointer-events: all;
}

.keyframe-item:hover .delete-keyframe {
  opacity: 1;
}

.keyframe-properties {
  margin-top: 20px;
  padding: 15px;
  background: white;
  border-radius: 6px;
}

.keyframe-properties .property-group {
  margin-bottom: 12px;
}

.preview-morph-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  transition: all 0.3s;
}

.preview-morph-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.upload-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.upload-modal .modal-content {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 400px;
  width: 90%;
}

.upload-modal h5 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
}

.upload-modal input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 2px dashed #ddd;
  border-radius: 6px;
  margin-bottom: 20px;
}

.upload-modal button {
  padding: 8px 16px;
  background: #6b7280;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

/* Canvas Settings Modal */
.canvas-settings-modal {
  width: 700px;
  max-width: 90vw;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #1f2937;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.settings-section {
  margin-bottom: 30px;
}

.settings-section h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #4b5563;
}

.settings-description {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 20px;
}

.margin-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.margin-control label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label-text {
  font-weight: 500;
  color: #374151;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.margin-slider {
  flex: 1 1;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
  -webkit-appearance: none;
}

.margin-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
}

.margin-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
  border: none;
}

.margin-input {
  width: 60px;
  padding: 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.unit {
  color: #6b7280;
  font-size: 14px;
}

.hint {
  font-size: 12px;
  color: #9ca3af;
}

.margin-preview {
  display: flex;
  gap: 20px;
  justify-content: space-around;
}

.preview-device {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.device-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.device-frame {
  width: 120px;
  height: 80px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-frame.tablet {
  width: 100px;
  height: 75px;
}

.device-frame.mobile {
  width: 60px;
  height: 100px;
}

.canvas-preview {
  background: #667eea;
  color: white;
  font-size: 10px;
  padding: 8px;
  border-radius: 4px;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.button.primary {
  background: #667eea;
  color: white;
}

.button.primary:hover {
  background: #5a67d8;
}

.button.secondary {
  background: #f3f4f6;
  color: #4b5563;
}

.button.secondary:hover {
  background: #e5e7eb;
}

/* Viewport Mode Controls */
.viewport-mode-controls {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mode-control-group {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: #f9fafb;
}

.mode-control-group h4 {
  margin: 0 0 15px 0;
  color: #374151;
  font-size: 16px;
}

.mode-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mode-option {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.mode-option:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.mode-option input[type="radio"] {
  margin-right: 12px;
  margin-top: 2px;
}

.mode-option input[type="radio"]:checked + .mode-label {
  color: #667eea;
}

.mode-option input[type="radio"]:checked ~ .mode-label .mode-name {
  font-weight: 600;
}

.mode-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
}

.mode-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.mode-description {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

/* Mode Preview */
.mode-preview-container {
  background: #f9fafb;
  border-radius: 8px;
  padding: 20px;
}

.preview-row {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.preview-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.preview-device {
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background: white;
  overflow: hidden;
  position: relative;
}

.preview-device.desktop {
  width: 160px;
  height: 90px;
}

.preview-device.tablet {
  width: 120px;
  height: 90px;
}

.preview-device.mobile {
  width: 60px;
  height: 100px;
}

.preview-canvas {
  background: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: all 0.3s;
}

.preview-canvas.fit {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  top: 8px;
  left: 8px;
  border-radius: 4px;
}

.preview-canvas.fill {
  width: 100%;
  height: 120%;
  top: -10%;
  left: 0;
}

.preview-canvas.stretch {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.preview-content {
  color: white;
  font-size: 10px;
  font-weight: 500;
}

/* Background Scale Controls */
.scale-controls {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.scale-control-group {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: #f9fafb;
}

.scale-control-group h4 {
  margin: 0 0 15px 0;
  color: #374151;
  font-size: 16px;
}

.preset-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.preset-btn {
  flex: 1 1;
  padding: 10px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.preset-btn:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.preset-btn.active {
  border-color: #667eea;
  background: #ede9fe;
}

.preset-name {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.preset-desc {
  font-size: 11px;
  color: #6b7280;
}

.scale-slider-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.slider-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zoom-slider,
.position-slider {
  flex: 1 1;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
  -webkit-appearance: none;
}

.zoom-slider::-webkit-slider-thumb,
.position-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
}

.slider-value {
  min-width: 50px;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.slider-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
  display: block;
}

.position-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

.explanation-box {
  background: #f0f9ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 15px;
}

.explanation-box p {
  margin: 0 0 10px 0;
  color: #1e40af;
  font-size: 14px;
}

.explanation-box ul {
  margin: 10px 0;
  padding-left: 20px;
}

.explanation-box li {
  color: #1e40af;
  font-size: 13px;
  margin: 5px 0;
}

.explanation-box .tip {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 10px;
  margin-top: 15px;
  color: #92400e;
}

/* Design Selector Modal */
.design-selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.design-selector-modal {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.design-selector-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.design-selector-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.close-button:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.design-selector-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1;
}

.no-designs {
  text-align: center;
  color: #6b7280;
  padding: 40px 20px;
  font-size: 16px;
}

.design-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.design-item {
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.design-item:hover {
  border-color: #667eea;
  background: #f9fafb;
}

.design-item.selected {
  border-color: #667eea;
  background: #eef2ff;
}

.design-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.design-meta {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: #6b7280;
}

.published-badge {
  background: #10b981;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.current-badge {
  background: #667eea;
  color: white;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

/* Loading Overlay */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Landing Page Editor Styles */

.landing-page-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f7;
  overflow: hidden;
  position: relative;
}

/* Aspect Ratio Lock */
.aspect-ratio-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.lock-button {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.lock-button:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.lock-button.locked {
  background: #667eea;
  border-color: #667eea;
  color: white;
}

/* Toolbar */
.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #1e1f26;
  border-bottom: 1px solid #2d2e36;
  min-height: 56px;
  z-index: 1000;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-group {
  display: flex;
  gap: 5px;
}

.toolbar-logo {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: default;
}

.toolbar-button {
  padding: 6px 12px;
  background: #2d2e36;
  color: #94a3b8;
  border: 1px solid #3d3e46;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.toolbar-button:hover:not(:disabled) {
  background: #3d3e46;
  color: #fff;
}

.toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toolbar-button.active {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
}

.toolbar-button.primary {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
}

.toolbar-button.success {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

.toolbar-separator {
  width: 1px;
  height: 24px;
  background: #3d3e46;
  margin: 0 10px;
}

/* Main Editor Layout */
.editor-main {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  height: calc(100vh - 56px); /* Account for toolbar height */
}

/* Element Library */
.element-library {
  width: 240px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  flex-shrink: 0;
  height: calc(100vh - 56px); /* Account for toolbar height */
}

.library-header {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.library-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.library-section {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.library-section h4 {
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}

.library-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.library-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: move;
  transition: all 0.2s;
}

.library-item:hover {
  background: #f3f4f6;
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.library-item.dragging {
  opacity: 0.5;
}

.library-item-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.library-item-label {
  font-size: 11px;
  color: #6b7280;
}

.upload-button {
  display: block;
  width: 100%;
  padding: 8px;
  background: #667eea;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-button:hover {
  background: #764ba2;
}

.template-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-item {
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s;
}

.template-item:hover {
  background: #f3f4f6;
  border-color: #667eea;
  color: #667eea;
}

.library-tips {
  padding: 16px;
}

.library-tips h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.library-tips ul {
  margin: 0;
  padding-left: 20px;
  font-size: 11px;
  color: #9ca3af;
}

/* Canvas */
.editor-canvas-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  background: #f5f5f7;
  overflow: hidden;
}

.canvas-scroll {
  flex: 1 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 100%;
}

.canvas-wrapper {
  position: relative;
  box-shadow: 0 0 50px rgba(0,0,0,0.1);
  background: white;
  padding: 40px;
}

.editor-canvas {
  position: relative;
  transition: all 0.3s;
  /* min-height is set dynamically via JavaScript based on element positions */
}

.editor-canvas.drag-over {
  box-shadow: 0 0 0 3px #667eea !important;
}

.editor-canvas.preview-mode {
  box-shadow: none !important;
}

.draggable-element {
  position: absolute;
  cursor: move;
  transition: box-shadow 0.2s;
}

.draggable-element:hover {
  box-shadow: 0 0 0 2px #667eea;
}

.draggable-element.selected {
  box-shadow: 0 0 0 2px #667eea !important;
}

/* Preview mode draggable styles */
.preview-mode .draggable-element {
  cursor: move;
  transition: opacity 0.2s;
}

.preview-mode .draggable-element:hover {
  opacity: 0.95;
  box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.3);
}

.element-toolbar {
  position: absolute;
  top: -32px;
  right: 0;
  display: flex;
  gap: 4px;
  background: #1e1f26;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.element-delete {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
}

.element-delete:hover {
  background: #dc2626;
}

.canvas-info {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  color: #6b7280;
}

/* Properties Panel */
.properties-panel {
  width: 100%;
  min-width: 320px;
  background: #fff;
  overflow-y: auto;
  flex-shrink: 0;
  padding-bottom: 40px; /* Add padding to ensure last items are visible */
  height: 100%;
  max-height: calc(100vh - 56px); /* Account for toolbar height */
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.element-type {
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
}

.panel-content {
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1;
  min-height: 0;
}

.property-section {
  margin-bottom: 24px;
}

.property-section h4 {
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}

.property-group {
  margin-bottom: 12px;
}

.property-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #4b5563;
}

.property-group input[type="text"],
.property-group input[type="number"],
.property-group select,
.property-group textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}

.property-group input[type="range"] {
  width: calc(100% - 50px);
  margin-right: 8px;
}

.property-group .hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}

.property-group .value {
  display: inline-block;
  min-width: 35px;
  font-size: 12px;
  color: #6366f1;
  font-weight: 600;
}

.property-group.info-box {
  background: #f0f9ff;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #3b82f6;
}

.property-group.info-box .hint {
  color: #1e40af;
  font-style: normal;
  line-height: 1.4;
}

.property-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

/* Color Picker */
.color-picker-wrapper {
  position: relative;
}

.color-preview-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.color-preview {
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
}

.color-picker-popover {
  position: absolute;
  z-index: 2000;
  top: 40px;
  left: 0;
  max-height: 500px;
  overflow-y: auto;
}

.color-picker-cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Layers Panel */
.layers-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.layer-count {
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 10px;
}

.layers-list {
  padding: 8px;
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
}

.layer-item {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 4px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.layer-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.layer-item.selected {
  background: #eef2ff;
  border-color: #667eea;
}

.layer-visibility {
  margin-right: 8px;
}

.visibility-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.visibility-toggle:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.visibility-toggle.hidden {
  opacity: 0.5;
}

.visibility-toggle.hidden:hover {
  opacity: 1;
}

.visibility-toggle svg {
  width: 16px;
  height: 16px;
}

.layer-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #6b7280;
}

.layer-name {
  flex: 1 1;
  font-size: 12px;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-preview {
  display: block;
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
}

.layer-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.layer-item:hover .layer-actions {
  opacity: 1;
}

.layer-action,
.lock-toggle {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.layer-action:hover:not(:disabled) {
  background: #e5e7eb;
}

.layer-action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.layer-action.delete:hover {
  background: #fee2e2;
  color: #ef4444;
}

.layers-empty {
  padding: 32px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  flex-shrink: 0;
}

.layers-empty .hint {
  margin-top: 8px;
  font-size: 11px;
}

/* SVG Element Styles */
.element-svg svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Events Panel */
.events-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
}

.events-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.events-panel .panel-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.events-panel .add-event-btn {
  background: #6366f1;
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.events-panel .add-event-btn:hover:not(:disabled) {
  background: #5558f0;
}

.events-panel .add-event-btn:disabled {
  background: #e5e7eb;
  cursor: not-allowed;
}

.events-panel .events-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px;
}

.events-panel .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #9ca3af;
  text-align: center;
}

.events-panel .empty-state p {
  margin: 8px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.events-panel .empty-state span {
  font-size: 12px;
}

.events-panel .event-element {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}

.events-panel .event-element.selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1;
}

.events-panel .element-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.events-panel .element-header:hover {
  background: #f9fafb;
}

.events-panel .expand-icon {
  margin-right: 8px;
  color: #6b7280;
  transition: transform 0.2s;
}

.events-panel .element-name {
  flex: 1 1;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.events-panel .animation-badges {
  display: flex;
  gap: 4px;
}

.events-panel .badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.events-panel .badge.entrance {
  background: #dbeafe;
  color: #2563eb;
}

.events-panel .badge.exit {
  background: #fee2e2;
  color: #dc2626;
}

.events-panel .badge.morph {
  background: #f3e8ff;
  color: #7c3aed;
}

.events-panel .element-events {
  padding: 12px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.events-panel .event-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
}

.events-panel .event-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.events-panel .event-index {
  background: #6366f1;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.events-panel .position-type-select {
  flex: 1 1;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 12px;
  background: white;
}

.events-panel .delete-event-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background 0.2s;
}

.events-panel .delete-event-btn:hover {
  background: #fee2e2;
}

.events-panel .event-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.events-panel .control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.events-panel .control-group label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
}

.events-panel .control-group input,
.events-panel .control-group select {
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 12px;
  background: white;
}

.events-panel .position-input {
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 12px;
  background: white;
  width: 100%;
}

.events-panel .relative-position {
  display: flex;
  align-items: center;
  gap: 4px;
}

.events-panel .operator-select {
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 12px;
  background: white;
  min-width: 80px;
}

.events-panel .position-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.events-panel .position-suffix {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  margin-left: 4px;
}

.events-panel .add-timeline-event {
  width: 100%;
  padding: 6px 12px;
  background: white;
  border: 1px dashed #e5e7eb;
  border-radius: 4px;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
}

.events-panel .add-timeline-event:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f0f9ff;
}

.events-panel .events-info {
  padding: 12px;
  background: #f0f9ff;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.events-panel .events-info h4 {
  font-size: 12px;
  font-weight: 600;
  color: #1e40af;
  margin: 0 0 8px;
}

.events-panel .events-info ul {
  margin: 0;
  padding-left: 20px;
  font-size: 11px;
  color: #3730a3;
  line-height: 1.5;
}

.events-panel .events-info li {
  margin-bottom: 4px;
}

.events-panel .events-info strong {
  color: #1e40af;
  font-weight: 600;
}

.event-count {
  background: #6366f1;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}

/* Animation Controls */
.events-panel .animation-controls {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.events-panel .control-btn {
  flex: 1 1;
  padding: 6px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.events-panel .control-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.events-panel .control-btn.play {
  color: #10b981;
}

.events-panel .control-btn.play:hover {
  background: #d1fae5;
  border-color: #10b981;
}

.events-panel .control-btn.pause {
  color: #f59e0b;
}

.events-panel .control-btn.pause:hover {
  background: #fed7aa;
  border-color: #f59e0b;
}

.events-panel .control-btn.reverse {
  color: #8b5cf6;
}

.events-panel .control-btn.reverse:hover {
  background: #ede9fe;
  border-color: #8b5cf6;
}

.events-panel .control-btn.restart {
  color: #3b82f6;
}

.events-panel .control-btn.restart:hover {
  background: #dbeafe;
  border-color: #3b82f6;
}

/* Progress Scrubber */
.events-panel .progress-scrubber {
  margin-top: 12px;
  padding: 8px;
  background: #f9fafb;
  border-radius: 4px;
}

.events-panel .progress-scrubber label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.events-panel .progress-scrubber input[type="range"] {
  width: calc(100% - 40px);
  margin-right: 8px;
}

.events-panel .progress-scrubber .value {
  font-size: 12px;
  color: #6366f1;
  font-weight: 600;
}

/* Callbacks Section */
.events-panel .callbacks-section {
  margin-top: 12px;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 4px;
  border-left: 3px solid #3b82f6;
}

.events-panel .callbacks-section h5 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1e40af;
}

.events-panel .callback-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.events-panel .callback-item input[type="checkbox"] {
  margin: 0;
}

.events-panel .callback-item label {
  font-size: 12px;
  color: #1f2937;
  cursor: pointer;
  flex-shrink: 0;
}

.events-panel .callback-input {
  flex: 1 1;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'Inter', 'Courier New', monospace;
  background: white;
}

.events-panel .control-group .value {
  display: inline-block;
  min-width: 35px;
  font-size: 12px;
  color: #6366f1;
  font-weight: 600;
  margin-left: 8px;
}

/* Sections Panel */
.sections-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.sections-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.sections-panel .panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.add-section-btn {
  padding: 4px 12px;
  background: #667eea;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.add-section-btn:hover {
  background: #764ba2;
}

.sections-list {
  padding: 8px;
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
}

.sections-empty {
  padding: 32px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  flex-shrink: 0;
}

.sections-empty .hint {
  margin-top: 8px;
  font-size: 11px;
}

.section-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 4px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.section-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.section-item.selected {
  background: #eef2ff;
  border-color: #667eea;
}

.section-visibility {
  margin-right: 8px;
}

.section-info {
  flex: 1 1;
  overflow: hidden;
}

.section-name {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-meta {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

.section-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.section-item:hover .section-actions {
  opacity: 1;
}

.section-action {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.section-action:hover:not(:disabled) {
  background: #e5e7eb;
}

.section-action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.section-action.delete:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Editor Sections (in canvas) */
.editor-section {
  transition: all 0.2s;
}

.editor-section:hover {
  outline: 1px dashed #9ca3af;
}

.editor-section.selected {
  outline: 2px solid #667eea !important;
}
/* Inline Text Editor */
.element-text {
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  overflow: visible;
}

.element-text.has-hover:not(.preview-mode):hover {
  background-color: rgba(102, 126, 234, 0.05);
  outline: 1px dashed rgba(102, 126, 234, 0.3);
}

.element-text.no-hover:hover {
  background-color: transparent;
  outline: none;
}

.element-text-editor {
  font-family: inherit;
  box-sizing: border-box;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Text selection styles */
.element-text-editor::selection {
  background-color: rgba(102, 126, 234, 0.3);
  color: inherit;
}

.element-text-editor::-moz-selection {
  background-color: rgba(102, 126, 234, 0.3);
  color: inherit;
}

/* Prevent parent dragging when editing text */
.draggable-element.text-editing {
  pointer-events: none;
}

.draggable-element.text-editing .element-text-editor {
  pointer-events: all;
}

/* Better text cursor visibility */
.element-text-editor:focus {
  cursor: text;
  caret-color: #667eea;
}

/* Text editing mode visual feedback */
.element-text.editing-mode {
  background: rgba(102, 126, 234, 0.05);
  outline: 2px solid #667eea;
  outline-offset: -2px;
}

/* Smooth transition for text editing */
.element-text {
  transition: background 0.2s, outline 0.2s;
}

/* Text selection tooltip */
.text-selection-tooltip {
  position: absolute;
  background: #1f2937;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  display: none;
}

.text-selection-tooltip.visible {
  display: block;
}

/* Text formatting toolbar */
.text-formatting-toolbar {
  position: absolute;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 4px;
  display: flex;
  gap: 2px;
  z-index: 10000;
}

.text-format-button {
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background 0.2s;
}

.text-format-button:hover {
  background: #f3f4f6;
}

.text-format-button.active {
  background: #667eea;
  color: white;
}

/* Visual feedback for editable text */
.element-text[title*="Double-click"] {
  position: relative;
}

.element-text[title*="Double-click"]:hover::after {
  content: "Double-click to edit";
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-in-out forwards;
}

@keyframes tooltipFadeIn {
  to {
    opacity: 1;
  }
}

/* Side panels container */
.side-panels-container {
  display: flex;
  flex-direction: column;
  width: 350px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  overflow: hidden;
  height: 100%;
  max-height: calc(100vh - 56px); /* Account for toolbar height */
  flex-shrink: 0;
}

/* Collapsible panel */
.collapsible-panel {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
  max-height: 60vh; /* Allow more space for content */
}

.collapsible-panel.collapsed {
  flex: 0 0 auto;
  overflow: visible;
  max-height: none;
  min-height: auto;
}

.collapsible-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  background: #f9fafb;
  transition: background 0.2s;
}

.collapsible-header:hover {
  background: #f3f4f6;
}

.collapse-icon {
  margin-right: 8px;
  font-size: 12px;
  color: #6b7280;
  transition: transform 0.2s;
}

.collapsible-panel.collapsed .collapse-icon {
  transform: rotate(0deg);
}

.collapsible-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  flex: 1 1;
}

/* Ensure panels flex properly */
.collapsible-panel:not(.collapsed) > .sections-panel,
.collapsible-panel:not(.collapsed) > .layers-panel,
.collapsible-panel:not(.collapsed) > .events-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Ensure side panels container uses available space */
.side-panels-container > .collapsible-panel:only-child:not(.collapsed),
.side-panels-container > .collapsible-panel:last-child:not(.collapsed) {
  max-height: calc(100vh - 100px); /* Use more space when only one panel is expanded */
  flex: 1 1 auto;
}

/* When properties panel is expanded, give it priority space */
.side-panels-container > .collapsible-panel:first-child:not(.collapsed) {
  flex: 2 1 auto; /* Give properties panel more flex priority */
  max-height: 70vh;
}

/* Multi-selection styles */
.draggable-element.multi-selected {
  box-shadow: 0 0 0 2px #8b5cf6 !important;
  opacity: 0.95;
}

.draggable-element.multi-selected:hover {
  opacity: 1;
  box-shadow: 0 0 0 3px #8b5cf6 !important;
}

/* Visual feedback when dragging multiple elements */
.draggable-element.multi-selected.react-draggable-dragging {
  opacity: 0.7;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3), 0 0 0 2px #8b5cf6 !important;
}

/* Other selected elements during multi-drag */
.draggable-element.multi-selected:not(.react-draggable-dragging) {
  transition: transform 0.1s ease-out;
}

/* Drag selection */
.editor-canvas.drag-selecting {
  cursor: crosshair;
  -webkit-user-select: none;
          user-select: none;
}

.drag-select-rectangle {
  animation: dashAnimation 0.5s linear infinite;
  pointer-events: none;
}

@keyframes dashAnimation {
  to {
    stroke-dashoffset: -10;
  }
}

/* Custom scrollbar styling for panels */
.element-library::-webkit-scrollbar,
.properties-panel::-webkit-scrollbar,
.sections-list::-webkit-scrollbar,
.layers-list::-webkit-scrollbar,
.panel-content::-webkit-scrollbar {
  width: 8px;
}

.element-library::-webkit-scrollbar-track,
.properties-panel::-webkit-scrollbar-track,
.sections-list::-webkit-scrollbar-track,
.layers-list::-webkit-scrollbar-track,
.panel-content::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.element-library::-webkit-scrollbar-thumb,
.properties-panel::-webkit-scrollbar-thumb,
.sections-list::-webkit-scrollbar-thumb,
.layers-list::-webkit-scrollbar-thumb,
.panel-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.element-library::-webkit-scrollbar-thumb:hover,
.properties-panel::-webkit-scrollbar-thumb:hover,
.sections-list::-webkit-scrollbar-thumb:hover,
.layers-list::-webkit-scrollbar-thumb:hover,
.panel-content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Smooth scrolling */
.element-library,
.properties-panel,
.sections-list,
.layers-list,
.panel-content {
  scroll-behavior: smooth;
}

/* Prevent text selection during drag select */
.editor-canvas.drag-selecting * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Layer item multi-selected */
.layer-item.multi-selected {
  background: #ddd6fe;
  border-color: #8b5cf6;
}

/* Group indicator */
.element-group-indicator {
  position: absolute;
  top: -20px;
  left: 0;
  background: #8b5cf6;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  z-index: 10;
}

/* Keyboard shortcuts hint */
.keyboard-shortcuts-hint {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  max-width: 300px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.keyboard-shortcuts-hint.visible {
  opacity: 1;
}

.keyboard-shortcuts-hint h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.keyboard-shortcuts-hint kbd {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 2px;
  font-family: monospace;
}

/* Cut elements visual feedback */
.draggable-element.cut-element {
  opacity: 0.4;
  border: 2px dashed #9ca3af !important;
}

.layer-item.cut-element {
  opacity: 0.4;
}

/* Clipboard indicator */
.clipboard-indicator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  animation: slideInUp 0.3s ease;
}

.clipboard-indicator.cut-mode {
  background: rgba(239, 68, 68, 0.9);
}

.clipboard-indicator.copy-mode {
  background: rgba(34, 197, 94, 0.9);
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Paste preview ghost */
.paste-preview {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  border: 2px dashed #667eea;
  background: rgba(102, 126, 234, 0.05);
  z-index: 9998;
}

/* Cascading Breakpoint Styles */
.inherited-indicator {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  vertical-align: middle;
}

.input-with-reset {
  display: flex;
  gap: 4px;
  align-items: center;
}

.input-with-reset input {
  flex: 1 1;
}

.reset-override {
  padding: 4px 8px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  color: #92400e;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

/* Timeline Editor Styles */
.timeline-editor {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.timeline-editor .timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.timeline-editor .timeline-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.timeline-controls {
  display: flex;
  gap: 8px;
}

.control-btn {
  padding: 6px 10px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.control-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.control-btn.play {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.control-btn.play:hover {
  background: #5a67d8;
}

/* Timeline Scrubber */
.timeline-scrubber {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.timeline-time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}

.current-time {
  color: #667eea;
  font-weight: 600;
}

.separator {
  color: #9ca3af;
}

.total-time {
  color: #6b7280;
}

.scrubber-track {
  position: relative;
  height: 40px;
  background: #f3f4f6;
  border-radius: 6px;
  overflow: hidden;
}

.scrubber-input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.scrubber-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 6px;
  transition: width 0.1s;
  pointer-events: none;
}

/* Timeline Settings */
.timeline-settings,
.timeline-defaults {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.settings-header,
.defaults-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.settings-grid,
.defaults-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.setting-item,
.default-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setting-item label,
.default-item label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.setting-item input,
.default-item input,
.setting-item select,
.default-item select {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}

.setting-item input[type="checkbox"] {
  width: auto;
  margin-top: 4px;
}

.setting-item .value {
  font-size: 12px;
  color: #667eea;
  font-weight: 600;
  margin-left: 8px;
}

/* Timeline Items */
.timeline-items {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.items-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.empty-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
}

.empty-timeline p {
  margin: 10px 0 5px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.empty-timeline span {
  font-size: 12px;
  color: #9ca3af;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-group {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.group-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: white;
  cursor: pointer;
  transition: background 0.2s;
}

.group-header:hover {
  background: #f3f4f6;
}

.expand-icon {
  display: flex;
  align-items: center;
  margin-right: 8px;
  color: #6b7280;
}

.element-label {
  flex: 1 1;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.add-item-btn {
  padding: 4px 8px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.2s;
}

.add-item-btn:hover {
  background: #5a67d8;
}

.group-items {
  padding: 12px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 80px 1fr 120px 30px;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.timeline-item.main-animation {
  background: #f0f4ff;
  border-color: #667eea;
}

.item-type {
  font-size: 11px;
  font-weight: 600;
  color: #667eea;
  text-transform: uppercase;
}

.item-animation {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.item-properties {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.property-badge {
  padding: 2px 6px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
}

.item-position input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
}

.item-duration {
  font-size: 12px;
  color: #6b7280;
  text-align: right;
}

.remove-item-btn {
  padding: 4px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 3px;
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.remove-item-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* Advanced Stagger Configuration */
.timeline-stagger-config {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.stagger-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.stagger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 15px;
}

.stagger-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stagger-item label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.stagger-item input[type="text"],
.stagger-item input[type="number"],
.stagger-item select {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}

.stagger-item input[type="checkbox"] {
  width: auto;
  margin-top: 4px;
}

.stagger-preview {
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.preview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.preview-description {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

/* SVG Animation Panel */
.svg-animation-panel {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar for SVG Animation Panel */
.svg-animation-panel::-webkit-scrollbar {
  width: 8px;
}

.svg-animation-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.svg-animation-panel::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.svg-animation-panel::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.animation-section {
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.toggle-switch {
  margin-left: auto;
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #667eea;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 15px;
}

.preset-button {
  padding: 10px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.preset-button:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  transform: translateY(-2px);
}

.preset-button:active {
  transform: translateY(0);
}

.preset-icon {
  font-size: 20px;
}

.preset-label {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
}

.animation-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-row label {
  flex: 0 0 120px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.control-row input[type="text"],
.control-row input[type="number"],
.control-row select,
.control-row textarea {
  flex: 1 1;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}

.control-row textarea {
  font-family: monospace;
  font-size: 12px;
  resize: vertical;
}

.control-row input[type="checkbox"] {
  width: auto;
  flex: 0 1;
}

.control-row input[type="range"] {
  flex: 1 1;
}

.range-value {
  flex: 0 0 40px;
  text-align: right;
  font-size: 12px;
  color: #667eea;
  font-weight: 600;
}

.help-text {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 8px;
}

.help-tooltip {
  display: inline-block;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: #e0e7ff;
  color: #4f46e5;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  cursor: help;
  position: relative;
}

.help-tooltip:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 11px;
  font-weight: normal;
  white-space: nowrap;
  max-width: 250px;
  border-radius: 4px;
  z-index: 1000;
  pointer-events: none;
  margin-bottom: 4px;
}

.effect-preview {
  margin-top: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.preview-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.code-preview {
  font-family: monospace;
  font-size: 11px;
  color: #6b7280;
  background: white;
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre;
}

/* Attribute animations */
.attribute-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.attribute-item {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 30px;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
}

.attribute-item select,
.attribute-item input {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
}

.remove-btn {
  padding: 4px 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #ef4444;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.remove-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.add-attribute-btn {
  padding: 8px 16px;
  background: #f0f4ff;
  border: 1px solid #667eea;
  border-radius: 6px;
  color: #667eea;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.add-attribute-btn:hover {
  background: #667eea;
  color: white;
}

/* Visual Timeline */
.visual-timeline {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow-x: auto;
}

.timeline-ruler {
  display: flex;
  height: 30px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 10px;
  position: relative;
}

.ruler-mark {
  position: relative;
  flex: 0 0 100px;
  border-left: 1px solid #d1d5db;
}

.ruler-mark span {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
}

.timeline-tracks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 600px;
}

.timeline-track {
  display: flex;
  align-items: center;
  height: 40px;
  background: #f9fafb;
  border-radius: 4px;
  overflow: hidden;
}

.track-label {
  flex: 0 0 120px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid #e5e7eb;
}

.track-bars {
  flex: 1 1;
  position: relative;
  height: 100%;
}

.animation-bar {
  position: absolute;
  height: 30px;
  top: 5px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 10px;
  color: white;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.animation-bar:hover {
  transform: scaleY(1.1);
  z-index: 1;
}

.animation-bar.entrance {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.animation-bar.exit {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.animation-bar.custom {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Breakpoint indicator in properties panel */
.breakpoint-indicator {
  padding: 8px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.breakpoint-indicator.desktop {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.breakpoint-indicator.tablet {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.breakpoint-indicator.mobile {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* Effects Panel */
.effects-panel {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.effects-panel.collapsed {
  height: auto;
}

.effects-panel .panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e5edff 100%);
  cursor: pointer;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.global-controls-btn {
  margin-left: auto;
  padding: 4px 8px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.global-controls-btn:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.effects-panel .panel-content {
  padding: 16px;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar for Effects Panel */
.effects-panel .panel-content::-webkit-scrollbar {
  width: 8px;
}

.effects-panel .panel-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.effects-panel .panel-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.effects-panel .panel-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Global Controls */
.global-controls {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.global-controls h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.global-control-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.global-control-buttons button {
  flex: 1 1;
  padding: 8px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.global-control-buttons button:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.speed-display {
  min-width: 40px;
  text-align: center;
  font-weight: 600;
  color: #667eea;
}

/* Effect Selection */
.effect-selection {
  margin-bottom: 20px;
}

.effect-selection h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.effect-card {
  padding: 12px;
  background: #f9fafb;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.effect-card:hover {
  background: #f0f4ff;
  border-color: #a5b4fc;
}

.effect-card.selected {
  background: #f0f4ff;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.effect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  background: white;
  border-radius: 6px;
  color: #667eea;
}

.effect-name {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.effect-description {
  font-size: 10px;
  color: #6b7280;
  line-height: 1.3;
}

/* Effect Configuration */
.effect-configuration {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.effect-configuration h4 {
  margin: 0 0 16px 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.config-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.config-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.config-control label {
  font-size: 11px;
  font-weight: 500;
  color: #374151;
}

.config-control.checkbox {
  flex-direction: row;
}

.config-control.checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.config-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-input-group input[type="range"] {
  flex: 1 1;
  height: 4px;
  border-radius: 2px;
  background: #e5e7eb;
  outline: none;
}

.config-input-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
}

.config-number-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
}

.config-control select {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
  background: white;
  cursor: pointer;
}

.config-control input[type="text"] {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
}

/* Effect Actions */
.effect-actions {
  display: flex;
  gap: 8px;
}

.preview-btn,
.apply-btn {
  flex: 1 1;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.preview-btn {
  background: white;
  color: #374151;
}

.preview-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.apply-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.apply-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Utility Functions */
.utility-functions {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}

.utility-functions h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.utility-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.utility-buttons button {
  padding: 6px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
}

.utility-buttons button:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* Typewriter cursor animation */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.typewriter-cursor {
  animation: blink 1s infinite;
  font-weight: bold;
  color: #667eea;
}

/* Landing Page Editor Full Screen Styles */

/* Override the global container constraints when on editor page */
body.landing-page-editor-fullscreen .app-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.landing-page-editor-fullscreen .content-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override any parent container constraints */
body.landing-page-editor-fullscreen .main-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The editor wrapper itself */
.landing-page-editor-wrapper {
    width: 100vw;
    height: calc(100vh - 60px); /* Subtract navigation height */
    position: relative;
    overflow: hidden;
}

/* Make sure the editor component is full height */
.landing-page-editor-wrapper .landing-page-editor {
    height: 100%;
}

/* Override any max-width constraints from parent components */
body.landing-page-editor-fullscreen [class*="container"] {
    max-width: 100% !important;
}

/* Ensure navigation stays on top */
body.landing-page-editor-fullscreen .navigation {
    position: relative;
    z-index: 10000;
}
.swimming-fish {
    display: inline-block;
    margin-right: 10px; /* Space between fish and first message */
    vertical-align: middle;
    pointer-events: none;
    position: relative;
    flex-shrink: 0; /* Prevent fish from shrinking */
}

.fish-svg {
    display: block;
    overflow: visible; /* Allow fish to be fully visible */
}

/* No artificial animations - all movement comes from the chain physics */

/* Responsive sizing */
@media (max-width: 768px) {
    .swimming-fish {
        transform: scale(0.8);
    }
}
.support-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.support-header {
    text-align: center;
    margin-bottom: 3rem;
}

.support-header h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.support-header p {
    color: #7f8c8d;
    font-size: 1.1rem;
}

.support-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #ecf0f1;
}

.support-tabs button {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    font-size: 1rem;
    color: #7f8c8d;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.support-tabs button:hover {
    color: #3498db;
}

.support-tabs button.active {
    color: #3498db;
    font-weight: 600;
}

.support-tabs button.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3498db;
}

/* Form Styles */
.ticket-form-container {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ticket-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #2c3e50;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
}

.submit-btn {
    background: #3498db;
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.submit-btn:hover {
    background: #2980b9;
}

.submit-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

/* Success and Error Messages */
.success-message {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border: 1px solid #c3e6cb;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border: 1px solid #f5c6cb;
}

/* My Tickets */
.my-tickets-container {
    background: white;
    border-radius: 8px;
    padding: 2rem;
}

.no-tickets {
    text-align: center;
    padding: 3rem;
    color: #7f8c8d;
}

.tickets-list {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
}

.ticket-item {
    background: white;
    border: 1px solid #ecf0f1;
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.ticket-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.ticket-number {
    font-size: 0.9rem;
    color: #7f8c8d;
    font-family: monospace;
}

.ticket-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: white;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.ticket-item h3 {
    margin: 0 0 1rem 0;
    color: #2c3e50;
}

.ticket-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #7f8c8d;
}

.ticket-priority {
    font-weight: 600;
    text-transform: uppercase;
}

/* Check Ticket */
.check-ticket-container {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.check-form {
    margin-bottom: 2rem;
}

.check-form button {
    width: 100%;
    background: #3498db;
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.check-form button:hover {
    background: #2980b9;
}

/* Ticket Details */
.ticket-details {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
}

.ticket-info {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
    color: #7f8c8d;
}

.ticket-messages {
    margin-top: 2rem;
}

.message {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.message.admin {
    background: #e8f4fd;
    border-left: 3px solid #3498db;
}

.message.system {
    background: #f8f9fa;
    border-left: 3px solid #95a5a6;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #7f8c8d;
}

.message p {
    margin: 0;
    line-height: 1.6;
}

/* Modal */
.ticket-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #ecf0f1;
}

.modal-header h2 {
    margin: 0;
}

.modal-header button {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #95a5a6;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1 1;
}

.ticket-details-full {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-row {
    display: flex;
    gap: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ecf0f1;
}

.messages-container {
    max-height: 400px;
    overflow-y: auto;
}

.original-message {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.original-message h4 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
}

.reply-form {
    border-top: 1px solid #ecf0f1;
    padding-top: 1rem;
}

.reply-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    margin-bottom: 1rem;
}

.reply-form button {
    background: #3498db;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.reply-form button:hover {
    background: #2980b9;
}

.reply-form button:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .support-container {
        padding: 1rem;
    }

    .ticket-form .form-row {
        grid-template-columns: 1fr;
    }

    .support-tabs {
        flex-wrap: wrap;
    }

    .modal-content {
        width: 95%;
        margin: 1rem;
    }
}
/* Comment System Styles - Light Theme Design */
.comment-system {
    margin-top: 1.5rem;
    margin-top: var(--space-6, 1.5rem);
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
    padding-top: var(--space-6, 1.5rem);
    background: transparent;
    color: #1e293b;
}

.comments-container {
    margin-top: 0;
    background: #ffffff !important;
    border-radius: 0.75rem;
    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    padding: var(--space-6, 1.5rem);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    color: #1e293b !important;
}

/* Comments Header */
.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    margin-bottom: var(--space-6, 1.5rem);
    padding-bottom: 1rem;
    padding-bottom: var(--space-4, 1rem);
    border-bottom: 1px solid #f1f5f9;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--space-2, 0.5rem);
}

.sort-controls label {
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    font-weight: var(--font-weight-medium, 500);
    color: #475569;
}

.sort-controls select {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.5rem 0.75rem;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
    color: #1e293b;
    cursor: pointer;
    transition: border-color 150ms ease-in-out;
    transition: border-color var(--transition-fast, 150ms ease-in-out);
}

.sort-controls select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* New Comment Form */
.new-comment-form {
    margin-bottom: 1.5rem;
    margin-bottom: var(--space-6, 1.5rem);
    background: #f8fafc;
    border-radius: 0.75rem;
    border-radius: var(--radius-lg, 0.75rem);
    padding: 1.25rem;
    padding: var(--space-5, 1.25rem);
    border: 1px solid #f1f5f9;
}

/* Comment Textarea */
.comment-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    padding: var(--space-3, 0.75rem);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    font-family: inherit;
    font-family: var(--font-family-primary, inherit);
    font-size: 1rem;
    font-size: var(--text-base, 1rem);
    color: #1e293b !important;
    background: #ffffff !important;
    resize: vertical;
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-3, 0.75rem);
    outline: none;
    transition: border-color 150ms ease-in-out, 
                box-shadow 150ms ease-in-out;
    transition: border-color var(--transition-fast, 150ms ease-in-out), 
                box-shadow var(--transition-fast, 150ms ease-in-out);
    line-height: 1.5;
    line-height: var(--line-height-normal, 1.5);
}

.comment-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    pointer-events: auto;
    -webkit-user-select: text;
            user-select: text;
}

.comment-textarea::placeholder {
    color: #64748b;
}

.submit-comment-btn {
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.75rem 1rem;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
    transition: background-color var(--transition-fast, 150ms ease-in-out);
    font-family: inherit;
    font-family: var(--font-family-primary, inherit);
}

.submit-comment-btn:hover:not(:disabled) {
    background: #1d4ed8;
}

.submit-comment-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* Comment Items */
.comment-item {
    margin-bottom: 1rem;
    padding: 1rem 2.5rem !important;
    background: #ffffff !important;
    border-radius: 0.75rem;
    border: 1px solid #f1f5f9;
    transition: box-shadow 150ms ease-in-out;
    color: #1e293b !important;
}

.comment-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}

/* Depth-based styling for nested replies */
.comment-item.depth-0 {
    margin-left: 0;
    padding: 1rem 2.5rem !important;
}

.comment-item.depth-1 {
    margin-left: 2rem;
    padding: 1rem 2.5rem !important;
    background: #f8fafc !important;
    border-left: 3px solid #bfdbfe;
}

.comment-item.depth-2 {
    margin-left: 3rem;
    padding: 1rem 2.5rem !important;
    background: #f1f5f9 !important;
    border-left: 3px solid #93c5fd;
}

.comment-item.depth-3 {
    margin-left: 4rem;
    padding: 1rem 2.5rem !important;
    background: #f8fafc !important;
    border-left: 3px solid #60a5fa;
}

/* Comment Header */
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-3, 0.75rem);
}

.comment-author-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    gap: var(--space-3, 0.75rem);
}

.comment-profile-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-radius: var(--radius-full, 50%);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #f1f5f9;
}

.comment-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-profile-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    font-weight: var(--font-weight-semibold, 600);
    color: white;
}

.comment-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    gap: var(--space-1, 0.25rem);
}

.comment-username {
    font-weight: 600;
    font-weight: var(--font-weight-semibold, 600);
    color: #1e293b;
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
}

.comment-timestamp {
    font-size: 0.75rem;
    font-size: var(--text-xs, 0.75rem);
    color: #64748b;
}

.edited-indicator {
    font-style: italic;
    color: #64748b;
}

/* Keep existing styles for backward compatibility */
.comment-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    gap: var(--space-3, 0.75rem);
}

.author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-radius: var(--radius-full, 50%);
    overflow: hidden;
    flex-shrink: 0;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    font-weight: var(--font-weight-semibold, 600);
    color: #64748b;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    gap: var(--space-1, 0.25rem);
}

.author-name {
    font-weight: 600;
    font-weight: var(--font-weight-semibold, 600);
    color: #1e293b;
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
}

.comment-time {
    font-size: 0.75rem;
    font-size: var(--text-xs, 0.75rem);
    color: #64748b;
}

.comment-actions {
    display: flex;
    gap: 0.5rem;
    gap: var(--space-2, 0.5rem);
}

.comment-action-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    padding: var(--space-1, 0.25rem);
    cursor: pointer;
    border-radius: 0.25rem;
    border-radius: var(--radius-sm, 0.25rem);
    transition: background-color 150ms ease-in-out;
    transition: background-color var(--transition-fast, 150ms ease-in-out);
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-edit-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.comment-delete-btn:hover {
    background: #fef2f2;
    color: #ef4444;
}

.comment-report-btn:hover {
    background: #fff8f0;
    color: #fd7e14;
}

/* Override for edit buttons using delete button styling */
.comment-edit-btn {
    color: #374151 !important;
}

.comment-edit-btn:hover {
    background: #f1f5f9 !important;
    color: #1f2937 !important;
}

/* Override for delete buttons to make them black instead of red */
.comment-delete-btn {
    color: #374151 !important;
}

.comment-delete-btn:hover {
    background: #f1f5f9 !important;
    color: #1f2937 !important;
}

/* Comment Content */
.comment-content {
    margin-bottom: 0.75rem;
    margin-bottom: var(--space-3, 0.75rem);
}

.comment-content p {
    margin: 0;
    line-height: 1.5;
    line-height: var(--line-height-normal, 1.5);
    color: #334155 !important;
    font-size: 1rem;
    font-size: var(--text-base, 1rem);
}

.deleted-content {
    color: #64748b;
    font-style: italic;
}

/* Edit Form */
.edit-form {
    margin: 0.5rem 0;
    margin: var(--space-2, 0.5rem) 0;
}

.edit-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem;
    padding: var(--space-2, 0.5rem);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    font-family: inherit;
    font-family: var(--font-family-primary, inherit);
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
    color: #1e293b !important;
    background: #ffffff !important;
    resize: vertical;
    margin-bottom: 0.5rem;
    margin-bottom: var(--space-2, 0.5rem);
    outline: none;
    transition: border-color 150ms ease-in-out, 
                box-shadow 150ms ease-in-out;
    transition: border-color var(--transition-fast, 150ms ease-in-out), 
                box-shadow var(--transition-fast, 150ms ease-in-out);
}

.edit-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    pointer-events: auto;
    -webkit-user-select: text;
            user-select: text;
}

.edit-actions {
    display: flex;
    gap: 0.5rem;
    gap: var(--space-2, 0.5rem);
    margin-top: 0.5rem;
    margin-top: var(--space-2, 0.5rem);
}

.save-btn,
.cancel-btn {
    padding: 0.5rem 0.75rem;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border: none;
    border-radius: 0.25rem;
    border-radius: var(--radius-sm, 0.25rem);
    font-size: 0.75rem;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
    transition: background-color var(--transition-fast, 150ms ease-in-out);
    font-family: inherit;
    font-family: var(--font-family-primary, inherit);
}

.save-btn {
    background: #22c55e;
    color: white;
}

.save-btn:hover {
    background: #15803d;
}

.cancel-btn {
    background: #e2e8f0;
    color: #475569;
}

.cancel-btn:hover {
    background: #cbd5e1;
}

/* Comment Footer */
.comment-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    gap: var(--space-4, 1rem);
    margin-top: 0.5rem;
    margin-top: var(--space-2, 0.5rem);
}

.like-btn,
.reply-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.75rem;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: 0.25rem;
    border-radius: var(--radius-sm, 0.25rem);
    transition: all 150ms ease-in-out;
    transition: all var(--transition-fast, 150ms ease-in-out);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    gap: var(--space-1, 0.25rem);
    font-family: inherit;
    font-family: var(--font-family-primary, inherit);
}

.like-btn:hover,
.reply-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.like-btn.liked {
    color: #ef4444;
}

/* Reply Form */
.reply-form {
    margin-top: 0.75rem;
    margin-top: var(--space-3, 0.75rem);
    padding: 0.75rem;
    padding: var(--space-3, 0.75rem);
    background: #f8fafc;
    border-radius: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid #f1f5f9;
}

.reply-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem;
    padding: var(--space-2, 0.5rem);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    font-family: inherit;
    font-family: var(--font-family-primary, inherit);
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
    color: #1e293b !important;
    background: #ffffff !important;
    resize: vertical;
    margin-bottom: 0.5rem;
    margin-bottom: var(--space-2, 0.5rem);
    outline: none;
    transition: border-color 150ms ease-in-out, 
                box-shadow 150ms ease-in-out;
    transition: border-color var(--transition-fast, 150ms ease-in-out), 
                box-shadow var(--transition-fast, 150ms ease-in-out);
}

.reply-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    pointer-events: auto;
    -webkit-user-select: text;
            user-select: text;
}

.reply-textarea::placeholder {
    color: #64748b;
}

.reply-actions {
    display: flex;
    gap: 0.5rem;
    gap: var(--space-2, 0.5rem);
    margin-top: 0.5rem;
    margin-top: var(--space-2, 0.5rem);
}

.submit-reply-btn,
.cancel-reply-btn {
    padding: 0.5rem 0.75rem;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border: none;
    border-radius: 0.25rem;
    border-radius: var(--radius-sm, 0.25rem);
    font-size: 0.75rem;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
    transition: background-color var(--transition-fast, 150ms ease-in-out);
    font-family: inherit;
    font-family: var(--font-family-primary, inherit);
}

.submit-reply-btn {
    background: #2563eb;
    color: white;
}

.submit-reply-btn:hover:not(:disabled) {
    background: #1d4ed8;
}

.submit-reply-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.cancel-reply-btn {
    background: #e2e8f0;
    color: #475569;
}

.cancel-reply-btn:hover {
    background: #cbd5e1;
}

/* Comment Replies */
.comment-replies {
    margin-top: 0.75rem;
    margin-top: var(--space-3, 0.75rem);
    padding-top: 0.75rem;
    padding-top: var(--space-3, 0.75rem);
    border-top: 1px solid #f1f5f9;
}

/* Loading and States */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    padding: var(--space-8, 2rem);
    color: #64748b;
}

.loading-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 0.5rem;
    margin-bottom: var(--space-2, 0.5rem);
}

.loading-dot {
    width: 8px;
    height: 8px;
    background-color: #3b82f6;
    border-radius: 50%;
    /* animation: bounce-loading 1.4s ease-in-out infinite both; */
}

.loading-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
    animation-delay: -0.16s;
}

.loading-dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes bounce-loading {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.loading-indicator p {
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
    color: #64748b;
}

.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 0.75rem;
    padding: var(--space-3, 0.75rem);
    border-radius: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    margin: 1rem 0;
    margin: var(--space-4, 1rem) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
}

.error-message button {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 1.125rem;
    font-size: var(--text-lg, 1.125rem);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.load-more-btn {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 0.75rem;
    padding: var(--space-3, 0.75rem);
    border-radius: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.875rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all 150ms ease-in-out;
    transition: all var(--transition-fast, 150ms ease-in-out);
    margin-top: 1rem;
    margin-top: var(--space-4, 1rem);
    font-family: inherit;
    font-family: var(--font-family-primary, inherit);
}

.load-more-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

.no-comments {
    text-align: center;
    padding: 2rem;
    padding: var(--space-8, 2rem);
    color: #64748b;
}

.no-comments p {
    font-size: 1rem;
    font-size: var(--text-base, 1rem);
    margin: 0;
}

/* Infinite scroll styles for comments */
.infinite-scroll-trigger {
    height: 20px;
    margin: 20px 0;
    visibility: hidden; /* Hide the trigger element from view */
}

.end-of-comments {
    text-align: center;
    padding: 1.5rem 1rem;
    margin: 1.5rem 0;
}

.end-of-comments p {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 2px dashed #e2e8f0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .comment-item {
        padding: 0.75rem 1.5rem !important;
    }

    .comment-item.depth-1 {
        margin-left: 1rem;
        margin-left: var(--space-4, 1rem);
    }

    .comment-item.depth-2 {
        margin-left: 1.5rem;
        margin-left: var(--space-6, 1.5rem);
    }

    .comment-item.depth-3 {
        margin-left: 2rem;
        margin-left: var(--space-8, 2rem);
    }

    .comment-profile-photo,
    .author-avatar {
        width: 32px;
        height: 32px;
    }

    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        gap: var(--space-2, 0.5rem);
    }

    .comment-actions {
        align-self: flex-end;
    }

    .comment-footer {
        flex-wrap: wrap;
    }

    .sort-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        gap: var(--space-1, 0.25rem);
    }
    
    /* Infinite scroll mobile adjustments */
    .infinite-scroll-trigger {
        margin: 15px 0;
    }
    
    .end-of-comments {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .end-of-comments p {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
}

/* Report Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.report-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
    margin: 0;
    color: #fd7e14;
    font-size: 1.3rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    color: #fd7e14;
    background: #fff8f0;
}

.modal-body {
    padding: 25px;
}

.report-description {
    margin: 0 0 20px 0;
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #495057;
    font-size: 0.95rem;
}

.reason-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reason-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: normal;
}

.reason-option:hover {
    border-color: #fd7e14;
    background: #fff8f0;
}

.reason-option input[type="radio"] {
    margin: 0;
}

.reason-option input[type="radio"]:checked + span {
    color: #fd7e14;
    font-weight: 500;
}

.reason-option:has(input[type="radio"]:checked) {
    border-color: #fd7e14;
    background: #fff8f0;
}

textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

textarea:focus {
    outline: none;
    border-color: #fd7e14;
    box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.1);
}

.error-message {
    padding: 12px 15px;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-top: 10px;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    padding: 20px 25px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.btn-cancel, .btn-report, .btn-super-user-flag {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.btn-cancel {
    background: #6c757d;
    color: white;
}

.btn-cancel:hover {
    background: #5a6268;
}

.btn-report {
    background: #fd7e14;
    color: white;
}

.btn-report:hover {
    background: #e96900;
}

.btn-report:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.btn-super-user-flag {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
}

.btn-super-user-flag:hover {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-super-user-flag:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Success Toast */
.report-success-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    animation: slideInRight 0.3s ease, fadeOut 0.5s ease 4.5s;
    max-width: 350px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.report-success-toast.super-user-success {
    background: linear-gradient(135deg, #e9d5ff, #ddd6fe);
    color: #6b21a8;
    border: 1px solid #c4b5fd;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

@keyframes slideInRight {
    from { 
        opacity: 0;
        transform: translateX(100%);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Comment Menu Styles */
.comment-menu {
    position: relative;
    display: inline-block;
}

.comment-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    color: #6c757d;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.comment-menu-trigger svg {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
}

.comment-menu-trigger:hover {
    background: #f8f9fa;
    color: #495057;
}

.comment-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 160px;
    overflow: hidden;
}

.comment-menu-item {
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #495057;
    transition: background 0.2s ease;
    text-align: left;
}

.comment-menu-item:hover {
    background: #f8f9fa;
}

.comment-menu-item.delete {
    color: #dc3545;
}

.comment-menu-item.delete:hover {
    background: #fff5f5;
}

.comment-menu-item.report {
    color: #fd7e14;
}

.comment-menu-item.report:hover {
    background: #fff8f0;
}

.comment-menu-item.bookmark {
    color: #28a745;
}

.comment-menu-item.bookmark:hover {
    background: #f8fff9;
}

.comment-menu-item.super-user-flag {
    color: #8b5cf6;
    border-top: 1px solid #e9ecef;
}

.comment-menu-item.super-user-flag:hover {
    background: #f3f0ff;
}

.comment-menu-item.admin-delete {
    color: #6f42c1;
    border-top: 1px solid #e9ecef;
}

.comment-menu-item.admin-delete:hover {
    background: #f8f5ff;
} 
/* Post Menu Styles */
.post-menu {
    position: relative;
    display: inline-block;
}

.post-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    color: #6c757d;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.post-menu-trigger svg {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
}

.post-menu-trigger:hover {
    background: #f8f9fa;
    color: #495057;
}

.post-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 160px;
    overflow: hidden;
}

.post-menu-item {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #495057;
    transition: background 0.2s ease;
    text-align: left;
}

.post-menu-item:hover {
    background: #f8f9fa;
}

.post-menu-item.delete {
    color: #dc3545;
}

.post-menu-item.delete:hover {
    background: #fff5f5;
}

.post-menu-item.report {
    color: #fd7e14;
}

.post-menu-item.report:hover {
    background: #fff8f0;
}

.post-menu-item.super-user-flag {
    color: #8b5cf6;
    border-top: 1px solid #e9ecef;
}

.post-menu-item.super-user-flag:hover {
    background: #f3f0ff;
}

.post-menu-item.admin-delete {
    color: #6f42c1;
    border-top: 1px solid #e9ecef;
}

.post-menu-item.admin-delete:hover {
    background: #f8f5ff;
}

/* Report Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.report-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
    margin: 0;
    color: #fd7e14;
    font-size: 1.3rem;
}

/* Super User Flag Modal Header */
.modal-header h3:has-text("⚡ Instant Flag & Hide") {
    color: #8b5cf6;
}

.modal-header:has(h3:contains("⚡")) h3 {
    color: #8b5cf6;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    color: #fd7e14;
    background: #fff8f0;
}

.modal-body {
    padding: 25px;
}

.report-description {
    margin: 0 0 20px 0;
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #495057;
    font-size: 0.95rem;
}

.reason-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reason-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: normal;
}

.reason-option:hover {
    border-color: #fd7e14;
    background: #fff8f0;
}

.reason-option input[type="radio"] {
    margin: 0;
}

.reason-option input[type="radio"]:checked + span {
    color: #fd7e14;
    font-weight: 500;
}

.reason-option:has(input[type="radio"]:checked) {
    border-color: #fd7e14;
    background: #fff8f0;
}

textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: #fd7e14;
    box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.1);
}

.error-message {
    padding: 12px 15px;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-top: 10px;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    padding: 20px 25px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.btn-cancel, .btn-report, .btn-super-user-flag {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.btn-cancel {
    background: #6c757d;
    color: white;
}

.btn-cancel:hover {
    background: #5a6268;
}

.btn-report {
    background: #fd7e14;
    color: white;
}

.btn-report:hover {
    background: #e96900;
}

.btn-report:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.btn-super-user-flag {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
}

.btn-super-user-flag:hover {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-super-user-flag:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Success Toast */
.report-success-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    animation: slideInRight 0.3s ease, fadeOut 0.5s ease 4.5s;
    max-width: 350px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.report-success-toast.super-user-success {
    background: linear-gradient(135deg, #e9d5ff, #ddd6fe);
    color: #6b21a8;
    border: 1px solid #c4b5fd;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

@keyframes slideInRight {
    from { 
        opacity: 0;
        transform: translateX(100%);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Responsive */
@media (max-width: 768px) {
    .report-modal {
        width: 95%;
        margin: 20px;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .btn-cancel, .btn-report, .btn-super-user-flag {
        width: 100%;
    }
    
    .report-success-toast {
        right: 15px;
        left: 15px;
        bottom: 15px;
        max-width: none;
    }
}
.shimmer-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #e2e8f0; /* Light text color */
}

.shimmer-text-content {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.shimmer-overlay {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    z-index: 2;
    
    /* Create the shimmer gradient effect */
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 60%
    );
    
    filter: blur(4px);
    mix-blend-mode: overlay;
}

/* For writing sessions specifically */
.writing-session-shimmer .shimmer-overlay {
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 215, 0, 0.6) 40%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 215, 0, 0.6) 60%,
        transparent 70%
    );
    filter: blur(2px);
    mix-blend-mode: screen;
}

/* Pulse effect for active sessions */
.pulse-shimmer .shimmer-text-content {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}
.live-sessions-container {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.live-sessions-header {
    margin-bottom: 2rem;
    text-align: center;
}

.header-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.live-sessions-header h2 {
    font-size: 1.75rem;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #93c5fd;
    font-size: 0.875rem;
    font-weight: 500;
    animation: fadeIn 0.3s ease;
}

.sync-dot {
    width: 6px;
    height: 6px;
    background: #3b82f6;
    border-radius: 50%;
    animation: syncPulse 1s ease-in-out infinite;
}

@keyframes syncPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.live-sessions-header p {
    color: #e2e8f0;
    font-size: 1rem;
    opacity: 0.9;
}

.live-sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.live-sessions-container .live-session-card {
    background: white !important;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.live-sessions-container .live-session-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: rgba(59, 130, 246, 0.2);
}

.live-indicator {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 12px;
    z-index: 5 !important; /* Lower than dropdown menu (z-index: 1000) */
}

.live-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.live-text {
    color: white;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.live-sessions-container .session-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.live-sessions-container .user-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-sessions-container .user-avatar:hover {
    transform: scale(1.05);
}

.live-sessions-container .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.live-sessions-container .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 1.875rem;
    font-weight: 600;
    border-radius: 50%;
    text-transform: uppercase;
}

.live-sessions-container .user-details {
    flex: 1 1;
    min-width: 0;
}

.live-sessions-container .username {
    font-size: 1.125rem;
    font-weight: 600;
    color: #000000 !important;
    margin-bottom: 0.25rem;
    cursor: pointer;
    transition: color 0.2s;
}

.live-sessions-container .username:hover {
    color: #3b82f6 !important;
}

.live-sessions-container .session-title {
    color: #64748b !important;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-sessions-container .session-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafc !important;
    border-radius: 8px;
}

.live-sessions-container .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1;
}

.live-sessions-container .stat-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    line-height: 1;
    /* Remove gradient for emojis to ensure they display */
    color: inherit;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.live-sessions-container .stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.live-sessions-container .stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b !important;
    transition: color 0.3s ease;
}

/* Animate timer updates */
.live-sessions-container .stat-item:first-child .stat-value {
    animation: subtle-pulse 1s ease-in-out;
}

@keyframes subtle-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.live-sessions-container .stat-label {
    font-size: 0.75rem;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-sessions-container .session-project {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f0f9ff !important;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

.live-sessions-container .project-label {
    color: #64748b !important;
    font-size: 0.875rem;
}

.live-sessions-container .project-name {
    color: #1e293b !important;
    font-weight: 500;
    font-size: 0.875rem;
}

.no-live-sessions {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.live-sessions-container .no-live-sessions .empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.7;
    filter: grayscale(0.3);
}

.live-sessions-container .no-live-sessions h3 {
    font-size: 1.5rem;
    color: #ffffff !important;
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.live-sessions-container .no-live-sessions p {
    color: #e2e8f0 !important;
    margin-bottom: 2rem;
    opacity: 0.9;
    font-size: 1rem;
}

/* Center the gradient button from Writing page */
.live-sessions-container .no-live-sessions .gradient-start-btn {
    margin: 0 auto;
    margin-top: 1rem;
}

.loading-spinner {
    text-align: center;
    padding: 3rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error-message {
    text-align: center;
    padding: 3rem;
    color: #ef4444;
}

.retry-btn {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.retry-btn:hover {
    background: #2563eb;
}

/* Cheer Success Message */
.cheer-success-message {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.75rem 1rem;
    margin: 1rem -1rem 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: slideDown 0.3s ease-out;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
}

.success-icon {
    font-size: 1.2rem;
    animation: bounce 0.5s ease-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Session Actions */
.session-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.action-btn:focus {
    outline: none;
}

.action-btn:-moz-focusring {
    outline: none;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.cheer-btn:hover {
    color: #ef4444;
    border-color: #ef4444;
}

.cheer-btn.cheered {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: #ef4444;
    cursor: pointer;
}

/* Firefox-specific outline removal for cheer button */
.cheer-btn {
    outline: none;
}

.cheer-btn:focus {
    outline: none;
}

.cheer-btn:-moz-focusring {
    outline: none;
}

.comment-btn:hover {
    color: #3b82f6;
    border-color: #3b82f6;
}

.action-btn svg {
    width: 20px;
    height: 20px;
}

/* Comment Modal */
.comment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.comment-modal {
    background: #2a2b36;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.comment-modal h3 {
    margin-bottom: 1rem;
    color: white;
}

.comment-modal textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 1rem;
}

.comment-modal textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(255, 255, 255, 0.08);
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-cancel {
    padding: 0.5rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-primary {
    padding: 0.5rem 1.5rem;
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled) {
    background: #2563eb;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .live-sessions-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0;
    }
    
    .live-sessions-container .live-session-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
    
    .session-stats {
        flex-direction: row;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }
    
    .stat-icon {
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 1rem;
    }
}
/* Social component wrapper - NO container styling to avoid duplication */
.social-wrapper {
    width: 100%;
    /* No container styles here - SocialFeed handles page-container styling */
}

/* Social component specific styles - using shared page-container class */
/* Container styles are now handled by the shared page-container class */

.social-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.social-header h1 {
    color: #1e293b;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.social-header p {
    color: #64748b;
    font-size: 1.1rem;
}

/* Social Tabs */
.social-tabs {
    display: flex;
    background: white;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    justify-content: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Removed old Social subtab styles - now using shared tab system */

.notification-badge {
    background: #ef4444;
    color: white;
    border-radius: 50%;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    min-width: 1.2rem;
    text-align: center;
    line-height: 1;
}

.tab.active .notification-badge {
    background: rgba(255, 255, 255, 0.3);
}



/* Responsive Design */
@media (max-width: 768px) {
    .social-wrapper {
        /* No additional responsive styles needed - SocialFeed handles page-container responsive styling */
    }
    
    /* Container responsive padding is now handled by the shared page-container class */
    
    .social-header h1 {
        font-size: 2rem;
    }
    
    .social-tabs {
        flex-direction: column;
        gap: 0.5rem;
        max-width: none;
    }
    
    /* Removed old mobile tab styles - now using shared tab system */
}

.social-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Electron-specific header padding - FIXED DETECTION */
.electron-app .social-header {
    margin: 0 2rem 1rem 2rem !important; /* Add horizontal margins */
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.electron-app .social-tabs {
    margin: 0 2rem 0.5rem 2rem !important; /* Add horizontal margins */
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Removed old Electron subtab styles - now using shared tab system */

.social-header h2 {
    color: #1e293b;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.create-post-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-color: var(--color-primary-600);
}

.create-post-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #64748b;
}

/* Elliptical Spinner */
.elliptical-spinner {
    position: relative;
    width: 200px;
    height: 100px;
    margin-bottom: 1rem;
}

.spinner-track {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid #e2e8f0;
    border-radius: 50%;
    transform: scaleY(0.5);
}

.spinner-fill {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #4f46e5;
    border-right: 3px solid #4f46e5;
    border-radius: 50%;
    transform: scaleY(0.5);
    animation: ellipticalSpin 1.5s linear infinite;
}

@keyframes ellipticalSpin {
    0% { transform: scaleY(0.5) rotate(0deg); }
    100% { transform: scaleY(0.5) rotate(360deg); }
}

.loading-spinner p {
    margin-top: 0.5rem;
    font-size: 14px;
    color: #64748b;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #4f46e5;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.post-form-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
}

/* Electron-specific post form padding - FIXED DETECTION */
.electron-app .post-form-container {
    margin: 0 2rem 2rem 2rem !important; /* Add horizontal margins */
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.post-form {
    padding: 1.5rem;
}

.post-form-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-avatar .avatar-fallback {
    font-size: 1rem;
}

.user-avatar-small .avatar-fallback {
    font-size: 0.75rem;
}

.username {
    font-weight: 600;
    color: #1e293b;
}

.post-textarea {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 1rem;
}

.post-textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.post-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-options {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-upload-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f1f5f9;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #475569;
    transition: background 0.2s;
}

.file-upload-label:hover {
    background: #e2e8f0;
}

.file-input {
    display: none;
}

.selected-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 4px;
    font-size: 0.875rem;
}

.remove-file-btn {
    background: none;
    border: none;
    color: #1e40af;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.submit-post-btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-post-btn:hover:not(:disabled) {
    background: #059669;
}

.submit-post-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.empty-feed {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Electron-specific empty feed padding - FIXED DETECTION */
.electron-app .empty-feed {
    margin: 0 2rem !important; /* Add horizontal margins */
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.empty-feed-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-feed h3 {
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.empty-feed p {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.create-first-post-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-color: var(--color-primary-600);
}

.create-first-post-btn:hover {
    background: #4338ca;
}

.posts-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Electron-specific posts feed padding - FIXED DETECTION */
.electron-app .posts-feed {
    margin: 0 2rem !important; /* Add horizontal margins */
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.post-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: visible;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* LIVE indicator for post cards */
.post-card .live-indicator {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 12px;
    z-index: 10;
}

.post-card .live-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.post-card .live-text {
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-header {
    display: flex;
    align-items: center;
    padding: 1.5rem 1.5rem 0 1.5rem;
    gap: 0.75rem;
}

.post-user-info {
    flex: 1 1;
}

.post-username {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-time {
    font-size: 0.875rem;
    color: #64748b;
}

.post-location {
    font-size: 0.875rem;
    color: #64748b;
}

.achievement-badge {
    padding: 0.5rem;
    border-radius: 50%;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.post-content {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.post-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #1e293b;
    margin-bottom: 1rem;
}

/* Enhanced styling for session summaries in post content */
.post-text br:first-of-type {
    margin-bottom: 0.5rem;
}

/* Style for session summary content (first line with session info) */
.post-text {
    white-space: pre-line;
}

.session-summary {
    display: inline-block;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    border-left: 3px solid #0ea5e9;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hashtag {
    color: var(--color-primary-500);
    font-weight: 500;
}

.mention {
    color: #10b981;
    font-weight: 500;
}

.session-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 3px solid var(--color-primary-500);
}

.session-label {
    font-size: 0.875rem;
    color: #64748b;
}

.session-name {
    color: #1e293b;
    font-weight: 500;
}

.location-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.6rem;
    background: rgba(59, 130, 246, 0.06);
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
    font-size: 0.875rem;
}

.location-label {
    color: #0369a1;
    font-size: 0.875rem;
    font-weight: 500;
}

.location-name {
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 500;
}

.project-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.6rem;
    background: rgba(139, 92, 246, 0.06);
    border-radius: 6px;
    border-left: 3px solid #8b5cf6;
    font-size: 0.875rem;
}

.project-label {
    color: #7c3aed;
    font-size: 0.875rem;
    font-weight: 500;
}

.project-name {
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 500;
}

.project-genre {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 0.25rem;
}

.stats-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-icon {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.stat-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.post-images {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

.single-image {
    width: 100%;
}

.single-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.image-grid {
    display: grid;
    grid-gap: 4px;
    gap: 4px;
    border-radius: 8px;
    overflow: hidden;
}

.grid-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid-3 .image-item:first-child {
    grid-row: 1 / 3;
}

.image-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    min-height: 150px;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.image-item:hover img {
    transform: scale(1.02);
}

.post-actions {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    gap: 1rem;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    color: #64748b;
}

.action-btn:hover {
    background: #f1f5f9;
}

.action-btn.liked {
    color: #ef4444;
}

.action-icon {
    font-size: 1.1rem;
}

.action-count {
    font-weight: 500;
}

.load-more-container {
    text-align: center;
    margin-top: 1rem;
}

/* Electron-specific load-more padding - FIXED DETECTION */
.electron-app .load-more-container {
    margin: 1rem 2rem 0 2rem !important; /* Add horizontal margins */
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.load-more-btn {
    background: white;
    color: var(--color-primary-500);
    border: 2px solid var(--color-primary-600);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.load-more-btn:hover:not(:disabled) {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.error-message {
    background: #fee2e2;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
}

/* Electron-specific error message padding - FIXED DETECTION */
.electron-app .error-message {
    margin: 0 2rem 1rem 2rem !important; /* Add horizontal margins */
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Post Tags Styles */
.post-tags {
    margin: 1rem 0;
    padding: 0.75rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border-radius: 8px;
    border: 1px solid #fbbf24;
}

.tags-label {
    display: block;
    color: #92400e;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
    transition: all 0.2s ease;
}

/* Tag Category Colors */
.process-tag {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    border: 1px solid #6ee7b7;
}

.content-tag {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338ca;
    border: 1px solid #a5b4fc;
}

.emotion-tag {
    background: linear-gradient(135deg, #fed7d7 0%, #fbb6ce 100%);
    color: #be185d;
    border: 1px solid #f9a8d4;
}

.default-tag {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    border: 1px solid #cbd5e1;
}

.tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .post-stats {
        font-size: 0.8rem;
        gap: 1rem;
    }
    
    .post-stat-item {
        font-size: 0.8rem;
    }
    
    .post-tags {
        gap: 0.4rem;
    }
    
    .post-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
}

/* Start Writing Session Button Section */
.start-session-section {
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.start-session-main {
    text-align: center;
    margin: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.start-session-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 1.5rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 220px;
    max-width: 300px;
    width: 100%;
}

.start-session-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

.start-session-btn:active {
    transform: translateY(-1px);
}

.start-session-btn .btn-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.start-session-btn .btn-text {
    font-size: 1rem;
    font-weight: 600;
}

/* Mobile responsive for start session button */
@media (max-width: 768px) {
    .start-session-section {
        padding: 0 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .start-session-main {
        padding: 1.25rem;
    }
    
    .start-session-btn {
        padding: 1.25rem 2rem;
        font-size: 1rem;
        min-width: 200px;
    }
    
    .start-session-btn .btn-icon {
        font-size: 1.1rem;
    }
    
    .start-session-btn .btn-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .start-session-section {
        padding: 0 0.25rem;
    }
    
    .start-session-main {
        padding: 1rem;
        border-radius: 12px;
    }
    
    .start-session-btn {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        min-width: 180px;
    }
    
    .start-session-btn .btn-icon {
        font-size: 1rem;
    }
    
    .start-session-btn .btn-text {
        font-size: 0.85rem;
    }
}

/* Session title styling */
.session-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    line-height: 1.3;
}

/* Post header actions */
.post-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Edit post button */
.edit-post-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.edit-post-btn:hover {
    background: #f1f5f9;
    opacity: 1;
    transform: scale(1.1);
}

/* Edit post form */
.edit-post-form {
    margin-bottom: 1rem;
}

.edit-post-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    background: white;
    color: #1e293b;
    transition: border-color 0.2s ease;
    margin-bottom: 0.75rem;
}

.edit-post-textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.edit-post-textarea:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.edit-post-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.save-edit-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.save-edit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.save-edit-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cancel-edit-btn {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cancel-edit-btn:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.cancel-edit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* File Selection Styles */
.selected-files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.selected-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.75rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 4px;
    font-size: 0.875rem;
    max-width: 250px;
}

.remove-file-btn {
    background: none;
    border: none;
    color: #1e40af;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    margin-left: 0.5rem;
}

.remove-all-files-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.remove-all-files-btn:hover {
    background: #dc2626;
}

/* Legacy post-image class for backward compatibility */
.post-image {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

.post-image img {
    width: 100%;
    height: auto;
    display: block;
} 
.crop-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.crop-modal {
    background: white;
    border-radius: 16px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
}

.crop-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.crop-header h3 {
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

.crop-header p {
    color: #64748b;
    margin: 0;
    font-size: 0.9rem;
}

.crop-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: #f8fafc;
}

.crop-controls {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
}

.zoom-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.zoom-control label {
    color: #1e293b;
    font-weight: 500;
    min-width: 50px;
}

.zoom-slider {
    flex: 1 1;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
}

.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.zoom-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.crop-actions {
    padding: 1.5rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.crop-actions .btn-cancel {
    padding: 0.75rem 1.5rem;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.crop-actions .btn-cancel:hover {
    background: #e2e8f0;
    color: #475569;
}

.crop-actions .btn-save {
    padding: 0.75rem 1.5rem;
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.crop-actions .btn-save:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .crop-modal {
        width: 95%;
        max-height: 95vh;
    }
    
    .crop-container {
        height: 300px;
    }
    
    .crop-header,
    .crop-controls,
    .crop-actions {
        padding: 1rem 1.5rem;
    }
    
    .crop-actions {
        flex-direction: column;
    }
    
    .crop-actions .btn-cancel,
    .crop-actions .btn-save {
        width: 100%;
    }
} 
/* Remove custom profile container styling - using shared page container */

.profile-header {
    text-align: center;
    margin-bottom: 2rem;
    background-color: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.profile-header h1 {
    color: #1e293b;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.profile-header p {
    color: #64748b;
    font-size: 1.1rem;
}

.loading-state {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-state h2 {
    color: #4f46e5;
    font-size: 1.5rem;
}

.error-banner {
    background-color: #fee2e2;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
}

.success-banner {
    background-color: #d1fae5;
    color: #065f46;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
    border: 1px solid #10b981;
}

.profile-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Profile Info Card */
.profile-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.profile-info {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.profile-photo-section {
    flex-shrink: 0;
    position: relative;
}

.profile-photo-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 4px solid #e2e8f0;
    transition: all 0.3s ease;
}

.profile-photo.photo-editable {
    border-color: #4f46e5;
    cursor: pointer;
}

.profile-photo.photo-editable:hover {
    border-color: #4338ca;
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.profile-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    font-weight: 600;
}

.photo-upload-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.photo-upload-input {
    display: none;
}

.photo-upload-label {
    background: #4f46e5;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 130px;
}

.photo-upload-label:hover {
    background: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.photo-remove-btn {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 130px;
}

.photo-remove-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.photo-remove-btn::before {
    content: "✕";
    font-size: 0.8rem;
    font-weight: bold;
}

/* Hover text removed since buttons are now outside the image */

.photo-upload-tips {
    margin-top: 1rem;
    text-align: center;
}

.photo-upload-tips p {
    color: #64748b;
    font-size: 0.8rem;
    margin: 0.25rem 0;
}

.photo-upload-tips p:first-child {
    color: #4f46e5;
    font-weight: 500;
}

.profile-details {
    flex: 1 1;
}

.profile-details h2 {
    color: #1e293b;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.username-section {
    margin-bottom: 0.5rem;
}

.username-input {
    width: 100%;
    max-width: 300px;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.username-input:focus {
    outline: none;
    border-color: #4f46e5;
    background: white;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.username-input::placeholder {
    color: #94a3b8;
    font-weight: normal;
}

.join-date {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.bio-section {
    margin-bottom: 1.5rem;
}

.bio-section h3 {
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.bio-text {
    color: #64748b;
    line-height: 1.6;
    font-style: italic;
}

.bio-textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    resize: vertical;
    min-height: 100px;
}

.bio-textarea:focus {
    outline: none;
    border-color: #4f46e5;
    background: white;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.profile-actions {
    margin-top: 1rem;
}

.edit-actions {
    display: flex;
    gap: 1rem;
}

/* Social Actions Styles */
.social-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.social-actions .btn {
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.verification-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
    width: -webkit-fit-content;
    width: fit-content;
}

.verification-icon {
    font-size: 1rem;
}

.social-stats {
    display: flex;
    gap: 2rem;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
}

.social-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.social-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4338ca;
    line-height: 1;
}

.social-stat-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Button styles removed - now using shared button system */

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
}

.profile-stat-card {
    background: #f8fafc !important;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.2s, transform 0.2s;
}

.profile-stat-card:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 1.75rem;
    color: #818cf8;
    margin-bottom: 0.4rem;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #4338ca;
    margin-bottom: 0.15rem;
}

.stat-label {
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Location edit inputs */
.location-edit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
    grid-gap: 0.75rem;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.location-edit input{
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    background: #ffffff;
    color: #1e293b;
}
.location-edit input:focus{
    outline:none;
    border-color:#4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}
.location-edit input::placeholder{
    color:#94a3b8;
}

/* Location display paragraph */
.location-display {
    color: #64748b; /* same as bio text */
    line-height: 1.6;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Location section heading */
.location-section h3 {
    color: #1e293b;
    margin-bottom: 0.75rem;
}

/* Social & Content Section */
.content-section {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.content-header {
    text-align: center;
    margin-bottom: 2rem;
}

.content-header h2 {
    color: #1e293b;
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
}

.content-header p {
    color: #64748b;
    font-size: 1rem;
}

/* Content tabs now use shared tab styling */

/* Content Display */
.content-display {
    min-height: 300px;
}

.content-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #64748b;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #4f46e5;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.empty-state h3 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.25rem;
}

.empty-state p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* Coming Soon States */
.coming-soon-state {
    text-align: center;
    padding: 3rem 2rem;
    background: #f0f9ff;
    border: 2px dashed #0ea5e9;
    border-radius: 12px;
    color: #0c4a6e;
}

.coming-soon-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.coming-soon-state h3 {
    color: #0c4a6e;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.coming-soon-state p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.feature-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.feature-list li:before {
    content: '✨';
    position: absolute;
    left: 0;
}

/* Posts Grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.post-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.post-header h4 {
    color: #1e293b;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.post-date {
    color: #64748b;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.post-excerpt {
    color: #475569;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.post-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #64748b;
}

/* Groups Grid */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.group-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.group-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.group-header h4 {
    color: #1e293b;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.group-role {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.group-description {
    color: #475569;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.group-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #64748b;
}

/* Locations Grid - Enhanced */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-top: 1rem;
}

.location-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.location-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.location-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.location-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    flex: 1 1;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-category-icon {
    font-size: 1rem;
}

.location-favorite {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.location-favorite.favorited {
    transform: scale(1.1);
}

.location-description {
    margin: 0 0 1rem 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.location-address {
    margin: 0 0 1rem 0;
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 500;
}

.location-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.location-category,
.location-rating,
.location-usage {
    padding: 0.25rem 0.5rem;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.location-rating {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.location-usage {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.location-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8rem;
    color: #9ca3af;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.location-privacy {
    font-weight: 500;
}

.location-last-used {
    color: #6b7280;
}

/* Friends Section */
.friends-section {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.friends-section h2 {
    color: #1e293b;
    margin-bottom: 1.5rem;
}

.friends-placeholder {
    background: #f0f9ff;
    border: 2px dashed #0ea5e9;
    border-radius: 12px;
    padding: 2rem;
    color: #0c4a6e;
}

.friends-placeholder p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.friends-placeholder ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.friends-placeholder li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.friends-placeholder li:before {
    content: '✨';
    position: absolute;
    left: 0;
}

/* Friend Requests, Followers, Following Grids */
.friends-grid,
.followers-grid,
.following-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-top: 1rem;
}

.friend-request-card,
.follower-card,
.following-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.friend-request-card:hover,
.follower-card:hover,
.following-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.user-info {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}

.user-details {
    flex: 1 1;
    min-width: 0;
}

.user-details h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.verified-badge {
    color: #3b82f6;
    font-size: 0.9rem;
}

.user-bio {
    margin: 0 0 0.5rem 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.request-date,
.follow-date {
    margin: 0;
    color: #9ca3af;
    font-size: 0.8rem;
}

.request-message {
    margin: 0.5rem 0 0 0;
    color: #4b5563;
    font-size: 0.9rem;
    font-style: italic;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

.request-actions,
.following-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.accept-btn,
.decline-btn,
.unfollow-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.accept-btn {
    background: #10b981;
    color: white;
}

.accept-btn:hover {
    background: #059669;
}

.decline-btn {
    background: #ef4444;
    color: white;
}

.decline-btn:hover {
    background: #dc2626;
}

.unfollow-btn {
    background: #6b7280;
    color: white;
}

.unfollow-btn:hover {
    background: #4b5563;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-top: 1rem;
}

.project-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.project-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    flex: 1 1;
    line-height: 1.3;
}

.project-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
}

.project-status.active {
    background: #dcfce7;
    color: #166534;
}

.project-status.completed {
    background: #dbeafe;
    color: #1e40af;
}

.project-status.paused {
    background: #fef3c7;
    color: #92400e;
}

.project-status.archived {
    background: #f3f4f6;
    color: #6b7280;
}

.project-description {
    margin: 0 0 1rem 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.project-genre,
.project-target,
.project-privacy {
    padding: 0.25rem 0.5rem;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.project-privacy.public {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.project-privacy.private {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8rem;
    color: #9ca3af;
}

.project-date {
    color: #6b7280;
}

.project-deadline {
    color: #dc2626;
    font-weight: 500;
}

/* Profile location cards styling */
.content-grid .location-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0; /* Remove padding to allow full-width photo */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden; /* Ensure photos don't overflow */
}

.content-grid .location-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #4f46e5;
}

/* Location Photo Styles */
.content-grid .location-card .location-photo {
    margin-bottom: 1rem;
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    overflow: hidden;
    background: #f8fafc;
    position: relative;
}

.content-grid .location-card .location-main-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.content-grid .location-card:hover .location-main-image {
    transform: scale(1.02);
}

.content-grid .location-card .location-photo-placeholder {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    border-radius: 8px 8px 0 0;
    margin-bottom: 1rem;
}

.content-grid .location-card .placeholder-icon {
    font-size: 2rem;
    color: white;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.content-grid .location-card .placeholder-text {
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.9;
}

/* Photo count badge */
.content-grid .location-card .photo-count-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    font-weight: 500;
}

/* Add padding back to the content area */
.content-grid .location-card .location-header,
.content-grid .location-card .location-description,
.content-grid .location-card .location-address {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.content-grid .location-card .location-header {
    padding-top: 1rem; /* Add some top padding for visual separation */
    padding-bottom: 0.5rem;
}

.content-grid .location-card .location-address {
    padding-bottom: 1.5rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .profile-header {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .profile-info {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .profile-photo {
        margin: 0 auto;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .edit-actions {
        flex-direction: column;
    }

    .profile-header h1 {
        font-size: 2rem;
    }

    /* Content tabs now use shared responsive tab styling */

    .posts-grid,
    .groups-grid,
    .locations-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .post-card,
    .group-card,
    .location-card {
        padding: 1.25rem;
    }

    .friends-grid,
    .followers-grid,
    .following-grid,
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .friend-request-card,
    .follower-card,
    .following-card,
    .project-card {
        padding: 1rem;
    }
    
    .user-info {
        gap: 0.75rem;
    }
    
    .user-avatar {
        width: 40px;
        height: 40px;
    }
    
    .avatar-placeholder {
        font-size: 1rem;
    }
    
    .request-actions,
    .following-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .accept-btn,
    .decline-btn,
    .unfollow-btn {
        width: 100%;
        padding: 0.75rem;
    }
}

/* Settings Section Styles */
.settings-content {
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.settings-section {
    margin-bottom: 2.5rem;
}

.settings-section h3 {
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}

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

.setting-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.setting-group-wide {
    grid-column: 1 / -1;
}

.setting-group label {
    font-weight: 500;
    color: #4b5563;
    font-size: 0.95rem;
}

.setting-input {
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: white;
}

.setting-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.setting-hint {
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
}

/* Toggle Switch for Settings */
.setting-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}

.setting-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.setting-toggle .toggle-slider {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    background-color: #d1d5db;
    border-radius: 24px;
    transition: background-color 0.3s ease;
    margin-right: 0.75rem;
}

.setting-toggle .toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.setting-toggle input:checked + .toggle-slider {
    background-color: #6366f1;
}

.setting-toggle input:checked + .toggle-slider::before {
    transform: translateX(24px);
}

.setting-toggle .toggle-label {
    font-weight: 500;
    color: #4b5563;
}

/* Settings Actions */
.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.settings-actions button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.settings-actions .btn-secondary {
    background: white;
    border: 1px solid #d1d5db;
    color: #6b7280;
}

.settings-actions .btn-secondary:hover:not(:disabled) {
    background: #f9fafb;
    border-color: #9ca3af;
}

.settings-actions .btn-primary {
    background: #6366f1;
    border: 1px solid #6366f1;
    color: white;
}

.settings-actions .btn-primary:hover:not(:disabled) {
    background: #4f46e5;
    border-color: #4f46e5;
}

.settings-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
    

/* Analytics Container */
.analytics-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    background: #f8fafc;
    background: var(--color-background, #f8fafc);
    min-height: 100vh;
}

/* Nested Analytics (when used inside Progress component) */
.progress-content .analytics-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    min-height: auto !important;
}

/* Electron-specific overrides for full-width background - FIXED DETECTION */
.electron-app .analytics-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2rem 0 !important;
    background: #f8fafc !important;
    background: var(--color-background, #f8fafc) !important;
    min-height: auto !important;
}

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: white;
    background: var(--color-background-alt, white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Nested Analytics Header */
.progress-content .analytics-header {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Nested Analytics Grid - Fix overflow only */
.progress-content .analytics-grid.full-width-charts {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Nested Analytics Cards - Ensure they stay within bounds */
.progress-content .analytics-card.full-width-card {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Nested Breakdown Charts - Specific overflow fixes */
.progress-content .breakdown-chart-container {
    max-width: 100% !important;
    overflow: hidden !important;
}

.progress-content .breakdown-chart-container .chart-container {
    max-width: 100% !important;
}

/* Nested Breakdown Table - Make more compact */
.progress-content .breakdown-table th,
.progress-content .breakdown-table td {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
}

.progress-content .breakdown-table .project-name {
    max-width: 120px !important;
}

.progress-content .percentage-bar {
    min-width: 60px !important;
    height: 18px !important;
}

/* Electron-specific header padding - FIXED DETECTION */
.electron-app .analytics-header {
    margin: 0 2rem 2rem 2rem !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.analytics-header h2 {
    color: #ffffff;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.analytics-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.export-buttons {
    display: flex;
    gap: 0.5rem;
}

.export-btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.export-btn:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.timeframe-select {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    background: white;
    background: var(--color-background-alt, white);
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.timeframe-select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

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

/* Electron-specific grid padding - FIXED DETECTION */
.electron-app .analytics-grid {
    margin: 0 2rem 2rem 2rem !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.analytics-card {
    background: white;
    background: var(--color-background-alt, white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
}

.analytics-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.analytics-card h3 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Streak Card */
.streak-card {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    position: relative;
}

.streak-info {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.streak-count {
    font-size: 3rem;
    font-weight: 700;
    color: #92400e;
    line-height: 1;
}

.streak-label {
    font-size: 1.125rem;
    color: #92400e;
    font-weight: 500;
}

.streak-card p {
    color: #92400e;
    margin: 0;
    font-weight: 500;
}

.streak-emoji {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    opacity: 0.7;
}

/* Goals Card */
.goals-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.goals-card h3 {
    color: #0c4a6e;
}

.goals-card .chart-container {
    height: 200px;
    position: relative;
}

.goal-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(12, 74, 110, 0.1);
}

.goal-item {
    color: #0c4a6e;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Chart Cards */
.chart-card {
    grid-column: span 2;
    min-height: 400px;
    max-height: 500px;
    overflow: hidden;
}

.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
    max-width: 100%;
    max-height: 350px;
    overflow: hidden;
    padding: 1rem 0;
    will-change: transform;
    transform: translateZ(0);
}

/* Ensure canvas elements are properly sized */
.chart-container canvas {
    max-width: 100% !important;
    max-height: 320px !important;
    height: auto !important;
    width: auto !important;
    image-rendering: optimizeSpeed !important;
    transform: translateZ(0) !important;
}

/* Metrics Card */
.metrics-card {
    grid-column: span 2;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-top: 1rem;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.metric-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #4f46e5;
}

.metric-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.75rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* Loading States */
.analytics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #475569;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #4f46e5;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error States */
.analytics-error {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #dc2626;
}

/* Electron-specific error padding - FIXED DETECTION */
.electron-app .analytics-error {
    margin: 0 2rem !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.analytics-error h3 {
    color: #dc2626;
    margin-bottom: 0.5rem;
}

.retry-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

.retry-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

/* No Data State */
.no-data-message {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    background: var(--color-background-alt, white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #475569;
    color: var(--color-text-secondary, #475569);
}

/* Electron-specific no data padding - FIXED DETECTION */
.electron-app .no-data-message {
    margin: 0 2rem !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.no-data-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.no-data-message h3 {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.no-data-message p {
    font-size: 1.125rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-card {
        grid-column: span 1;
    }
    
    .metrics-card {
        grid-column: span 1;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .analytics-container {
        padding: 1rem;
    }
    
    /* Electron-specific mobile adjustments - FIXED DETECTION */
    .electron-app .analytics-container {
        padding: 1rem 0 !important;
    }
    
    .electron-app .analytics-header,
    .electron-app .analytics-grid,
    .electron-app .analytics-error,
    .electron-app .no-data-message {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    
    .analytics-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .analytics-controls {
        flex-direction: row;
        width: 100%;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .export-buttons {
        justify-content: flex-start;
    }
    
    .export-btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    .analytics-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .chart-container {
        height: 280px;
        max-height: 280px;
        padding: 0.5rem 0;
    }
    
    .chart-container canvas {
        max-height: 250px !important;
        max-width: calc(100vw - 4rem) !important;
    }
    
    .streak-count {
        font-size: 2.5rem;
    }
    
    /* Enhanced mobile constraints for goals chart */
    .goals-vs-actual-card .chart-container {
        height: 260px;
        max-height: 260px;
    }
    
    .goals-vs-actual-card .chart-container canvas {
        max-height: 230px !important;
        max-width: calc(100vw - 4rem) !important;
    }
}

@media (max-width: 480px) {
    .analytics-container {
        padding: 0.5rem;
    }
    
    /* Electron-specific small mobile adjustments - FIXED DETECTION */
    .electron-app .analytics-container {
        padding: 0.5rem 0 !important;
    }
    
    .electron-app .analytics-header,
    .electron-app .analytics-grid,
    .electron-app .analytics-error,
    .electron-app .no-data-message {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
    
    .analytics-card {
        padding: 1rem;
    }
    
    .analytics-header {
        padding: 1rem;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .metric-item {
        padding: 0.75rem;
    }
    
    .metric-value {
        font-size: 1.5rem;
    }
    
    .chart-container {
        height: 240px;
        max-height: 240px;
    }
    
    .chart-container canvas {
        max-height: 210px !important;
        max-width: calc(100vw - 2rem) !important;
    }
    
    .streak-count {
        font-size: 2rem;
    }
    
    .export-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .goals-vs-actual-card .chart-container {
        height: 220px;
        max-height: 220px;
    }
    
    .goals-vs-actual-card .chart-container canvas {
        max-height: 190px !important;
        max-width: calc(100vw - 2rem) !important;
    }
}

/* Goals vs Actual chart specific styling */
.analytics-card:has(h3:contains("Goals vs Actual")) {
    background: linear-gradient(135deg, #f0f9ff 0%, #fef3c7 100%);
    border: 2px solid #fbbf24;
    box-shadow: 0 8px 32px rgba(251, 191, 36, 0.2);
}

.analytics-card:has(h3:contains("Goals vs Actual")):hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(251, 191, 36, 0.3);
}

.analytics-card:has(h3:contains("Goals vs Actual")) h3 {
    color: #d97706;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
}

/* Enhanced chart container for goals chart */
.analytics-card:has(h3:contains("Goals vs Actual")) .chart-container {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 20px;
    margin-top: 16px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Additional chart styling enhancements */
.chart-container canvas {
    border-radius: 12px;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast !important;
}

/* Legend styling for goals chart */
.analytics-card:has(h3:contains("Goals vs Actual")) .chart-container canvas {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

/* Chart Header with Controls */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.goals-period-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.period-select {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.2s ease-in-out;
    min-width: 120px;
}

.period-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.period-select:hover {
    border-color: var(--primary-color);
}

/* Goals vs Actual Card - Featured styling */
.goals-vs-actual-card {
    grid-column: 1 / -1; /* Full width */
    background: white;
    background: var(--color-background-alt, white);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    position: relative;
}

/* Responsive Design for Chart Header */
@media (max-width: 768px) {
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .goals-period-selector {
        width: 100%;
        justify-content: flex-end;
    }
    
    .period-select {
        min-width: 140px;
    }
    
    .goals-vs-actual-card {
        grid-column: 1; /* Single column on mobile */
    }
}

/* Goals vs Actual Chart - Specific sizing */
.goals-vs-actual-card .chart-container {
    height: 380px;
    max-height: 380px;
}

.goals-vs-actual-card .chart-container canvas {
    max-height: 350px !important;
}

/* Force canvas size limits regardless of Chart.js calculations */
canvas {
    max-width: 800px !important;
    max-height: 400px !important;
}

/* Specific overrides for Chart.js canvas elements */
.chartjs-render-monitor {
    max-width: 100% !important;
    max-height: 350px !important;
}

/* Completion Bars Styles */
.completion-bars-card {
    grid-column: span 2;
    background: white;
    background: var(--color-background-alt, white);
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
}

.completion-bars-card h3 {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    margin-bottom: 1.5rem;
}

.completion-bars {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.completion-bar {
    background: #f8fafc;
    background: var(--color-background, #f8fafc);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    padding: 1rem;
}

.bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.bar-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
}

.bar-percentage {
    font-weight: 700;
    font-size: 1.1rem;
    color: #2563eb;
    color: var(--color-primary-600, #2563eb);
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    background: var(--color-neutral-200, #e2e8f0);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s ease-in-out;
    position: relative;
}

.progress-fill.daily {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.progress-fill.weekly {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.progress-fill.monthly {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.bar-stats {
    font-size: 0.8rem;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    text-align: center;
}

/* Activity Types Chart Styles */
.activity-types-card {
    grid-column: span 1;
    background: white;
    background: var(--color-background-alt, white);
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
}

.activity-types-card h3 {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
}

.activity-timeframe-selector {
    margin-left: auto;
}

.no-activity-data {
    text-align: center;
    padding: 2rem;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
}

.no-activity-data p {
    margin: 0;
    line-height: 1.5;
}

/* Mobile responsive styles for completion bars */
@media (max-width: 768px) {
    .completion-bars-card {
        grid-column: span 1;
    }
    
    .completion-bars {
        gap: 1rem;
    }
    
    .completion-bar {
        padding: 0.75rem;
    }
    
    .bar-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .bar-percentage {
        font-size: 1rem;
    }
    
    .progress-bar {
        height: 10px;
    }
    
    .bar-stats {
        font-size: 0.75rem;
    }
    
    .activity-types-card {
        grid-column: span 1;
    }
    
    .activity-types-card .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .activity-timeframe-selector .timeframe-select {
        font-size: 0.8rem;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .completion-bars {
        gap: 0.75rem;
    }
    
    .completion-bar {
        padding: 0.5rem;
    }
    
    .bar-label {
        font-size: 0.8rem;
    }
    
    .bar-percentage {
        font-size: 0.9rem;
    }
    
    .progress-bar {
        height: 8px;
    }
    
    .bar-stats {
        font-size: 0.7rem;
    }
}

/* Goals vs Actual Chart Styles */
.goals-vs-actual-card {
    grid-column: span 2;
    background: white;
    background: var(--color-background-alt, white);
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border, #e2e8f0);
}

.goals-vs-actual-card h3 {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
}

.goals-period-selector {
    margin-left: auto;
}

.period-select {
    background: white;
    background: var(--color-background-alt, white);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border, #e2e8f0);
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
}

.period-select:focus {
    outline: none;
    border-color: #3b82f6;
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.period-select option {
    background: white;
    background: var(--color-background-alt, white);
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
}

.no-goals-data {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #475569;
}

/* Canvas size controls (enhanced) */
.chart-container canvas {
    max-width: 100% !important;
    max-height: 350px !important;
}

/* Dashboard Analytics Section Styles - Moved from Dashboard */

/* Daily Goal Section Styles */
.dashboard-goal-section {
    grid-column: span 2;
    background: white;
    background: var(--color-background-alt, white);
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
}

.daily-goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.daily-goal-title {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    flex-shrink: 0;
}

.daily-goal-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.goal-progress-text {
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    font-size: 1rem;
    font-weight: 500;
}

.goal-percentage {
    background: #dbeafe;
    background: var(--color-primary-100, #dbeafe);
    color: #1d4ed8;
    color: var(--color-primary-700, #1d4ed8);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
}

.daily-goal-progress {
    background: #e2e8f0;
    background: var(--color-neutral-200, #e2e8f0);
    border-radius: 12px;
    height: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.daily-goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    transition: width 0.8s ease;
    position: relative;
    min-width: 2px;
}

.daily-goal-progress-fill:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.daily-goal-remaining {
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.95rem;
    text-align: center;
}

.goal-completed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    font-size: 1.1rem;
    color: #10b981;
}

.goal-remaining {
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
}

/* Writing Streak Section Styles */
.dashboard-streak-section {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
    text-align: center;
    margin-bottom: 0;
}

.streak-header {
    margin-bottom: 1rem;
}

.streak-title {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.streak-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-streak-section .streak-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

.dashboard-streak-section .streak-days {
    color: white;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dashboard-streak-section .streak-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dashboard-streak-section .streak-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
    text-align: center;
}

/* Dashboard Writing Stats Styles */
.dashboard-writing-stats {
    grid-column: span 3;
    margin-bottom: 0;
}

.stats-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.stats-section-title {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    text-align: center;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #4f46e5;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    width: 100%;
}

.stat-category {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    color: #1e293b;
}

.stat-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-category-title {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    word-break: break-word;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-gap: 0.75rem;
    gap: 0.75rem;
    align-items: stretch;
}

.analytics-container .stat-item,
.writing-analytics-section .stat-item {
    text-align: center;
    padding: 0.6rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    min-height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

.analytics-container .stat-item:hover,
.writing-analytics-section .stat-item:hover {
    background: #f0f4ff;
    border-color: #c7d2fe;
}

.analytics-container .stat-item.full-width,
.writing-analytics-section .stat-item.full-width {
    grid-column: 1 / -1;
}

.analytics-container .stat-label,
.writing-analytics-section .stat-label {
    color: #64748b !important;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2;
}

.analytics-container .stat-value,
.writing-analytics-section .stat-value {
    color: #1e293b !important;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    word-break: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-container .stat-value.streak,
.writing-analytics-section .stat-value.streak {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.9rem;
    color: #f59e0b;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

.analytics-container .stat-value.best-day,
.writing-analytics-section .stat-value.best-day {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    line-height: 1.3;
}

/* Special styling for peak performance indicators */
.stat-category:nth-child(4) .stat-category-title {
    color: #7c3aed;
}

.stat-category:nth-child(5) .stat-category-title {
    color: #059669;
}

.stat-category:nth-child(6) .stat-category-title {
    color: #dc2626;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .dashboard-goal-section {
        grid-column: span 1;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .daily-goal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .daily-goal-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }
    
    .daily-goal-title {
        font-size: 1.1rem;
    }
    
    .goal-progress-text {
        font-size: 0.9rem;
    }
    
    .goal-percentage {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
    
    .daily-goal-remaining {
        font-size: 0.85rem;
    }

    .dashboard-streak-section {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .streak-title {
        font-size: 1.1rem;
    }
    
    .dashboard-streak-section .streak-days {
        font-size: 2.5rem;
    }
    
    .dashboard-streak-section .streak-label {
        font-size: 1rem;
    }
    
    .dashboard-streak-section .streak-description {
        font-size: 0.85rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-category {
        padding: 1rem;
    }
    
    .stats-section {
        padding: 1.5rem;
    }
    
    .stats-section-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .stat-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .analytics-container .stat-value,
    .writing-analytics-section .stat-value {
        font-size: 0.8rem;
    }
    
    .analytics-container .stat-item,
    .writing-analytics-section .stat-item {
        min-height: 65px;
        padding: 0.5rem;
    }
    
    .analytics-container .stat-label,
    .writing-analytics-section .stat-label {
        font-size: 0.7rem;
        white-space: normal;
        word-break: break-word;
    }

    .dashboard-writing-stats {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    .dashboard-goal-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .daily-goal-title {
        font-size: 1rem;
    }
    
    .goal-progress-text {
        font-size: 0.85rem;
    }
    
    .goal-percentage {
        font-size: 0.9rem;
        padding: 0.3rem 0.6rem;
    }
    
    .daily-goal-remaining {
        font-size: 0.8rem;
    }
    
    .dashboard-streak-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .streak-title {
        font-size: 1rem;
    }
    
    .dashboard-streak-section .streak-days {
        font-size: 2rem;
    }
    
    .dashboard-streak-section .streak-label {
        font-size: 0.9rem;
    }
    
    .dashboard-streak-section .streak-description {
        font-size: 0.8rem;
    }
    
    .stats-section {
        padding: 1rem;
    }
    
    .stat-category {
        padding: 0.75rem;
    }
    
    .analytics-container .stat-value,
    .writing-analytics-section .stat-value {
        font-size: 0.75rem;
    }
    
    .analytics-container .stat-label,
    .writing-analytics-section .stat-label {
        font-size: 0.65rem;
        white-space: normal;
        word-break: break-word;
    }
    
    .analytics-container .stat-item,
    .writing-analytics-section .stat-item {
        min-height: 55px;
        padding: 0.4rem;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.stat-value.streak {
    /* animation: pulse 2s infinite; */
}

.stat-category:hover .stat-category-title {
    color: #4f46e5;
}

.analytics-container .stat-category:hover .stat-value,
.writing-analytics-section .stat-category:hover .stat-value {
    color: #4f46e5;
}

/* Emotion Word Cloud Styles */
.emotion-cloud-card {
    grid-column: span 2;
    min-height: 420px;
}

.emotion-word-cloud-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    min-height: 300px;
    position: relative;
    padding: 40px;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
}

.emotion-word {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: 700;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.emotion-word-spaced {
    position: absolute;
    white-space: nowrap;
    -webkit-user-select: none;
            user-select: none;
    transform-origin: center center;
    will-change: transform;
    letter-spacing: 0.5px;
}

.emotion-word:hover {
    filter: brightness(1.2) saturate(1.1);
}

/* Enhanced animations for clustered word cloud */
@keyframes wordClusterFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
        filter: blur(3px);
    }
    30% {
        opacity: 0.4;
        filter: blur(1px);
    }
    60% {
        opacity: 0.8;
        filter: blur(0.5px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        transform: translate(-50%, -50%) scale(1) rotate(var(--rotation, 0deg));
        filter: blur(0px);
    }
}

@keyframes wordCloudFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        filter: blur(2px);
    }
    50% {
        opacity: 0.7;
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        transform: translate(-50%, -50%) scale(1) rotate(var(--rotation, 0deg));
        filter: blur(0px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add a subtle pattern to the word cloud background */
.emotion-word-cloud-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 25% 30%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(16, 185, 129, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.04) 0%, transparent 50%);
    border-radius: 16px;
    pointer-events: none;
}

/* Timeframe buttons for emotion cloud */
.timeframe-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.timeframe-btn {
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.timeframe-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timeframe-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-color: #6366f1;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

/* Chart info styling */
.chart-info {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.chart-info p {
    margin: 0.25rem 0;
    color: #475569;
    font-size: 0.875rem;
}

.chart-subtext {
    font-size: 0.75rem !important;
    opacity: 0.8;
}

/* Empty state styling */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
}

.empty-state p {
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.empty-subtext {
    font-size: 0.875rem !important;
    opacity: 0.7;
}

/* Mobile responsive adjustments for emotion cloud */
@media (max-width: 768px) {
    .emotion-cloud-card {
        grid-column: span 1;
        min-height: 350px;
    }
    
    .emotion-word-cloud-container {
        min-height: 250px;
        padding: 30px 20px;
    }
    
    .timeframe-buttons {
        flex-direction: column;
        gap: 0.4rem;
    }
    
    .timeframe-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        text-align: center;
    }
    
    .chart-info {
        padding: 0.75rem;
    }
    
    .chart-info p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .emotion-word-cloud-container {
        min-height: 220px;
        padding: 20px 15px;
    }
    
    .empty-state {
        padding: 2rem 1rem;
    }
    
    .empty-state p {
        font-size: 0.9rem;
    }
    
    .chart-info p {
        font-size: 0.75rem;
    }
}

/* Full-width chart layout */
.analytics-grid.full-width-charts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: none;
}

.analytics-card.full-width-card {
    width: 100%;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.analytics-card.full-width-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.analytics-card.full-width-card h3 {
    margin: 0 0 1.5rem 0;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
}

.analytics-card.full-width-card .chart-container {
    height: 400px;
    width: 100%;
    position: relative;
}

.analytics-card.full-width-card .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.analytics-card.full-width-card .chart-header h3 {
    margin: 0;
    flex: 1 1;
}

.project-timeframe-selector,
.activity-timeframe-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-timeframe-selector .timeframe-select,
.activity-timeframe-selector .timeframe-select {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

.project-timeframe-selector .timeframe-select:focus,
.activity-timeframe-selector .timeframe-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Remove colored backgrounds from existing cards */
.analytics-card {
    background: white !important;
    background: var(--color-background-alt, white) !important;
    border: 1px solid #e5e7eb;
    border: 1px solid var(--color-border, #e5e7eb);
}

.streak-card {
    background: white !important;
    background: var(--color-background-alt, white) !important;
}

.goals-card {
    background: white !important;
    background: var(--color-background-alt, white) !important;
}

.goals-card h3 {
    color: #1e293b !important;
    color: var(--color-text-primary, #1e293b) !important;
}

/* No data messages */
.no-data-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #6b7280;
    color: var(--color-text-secondary, #6b7280);
    font-style: italic;
}

.no-goals-data {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #6b7280;
    color: var(--color-text-secondary, #6b7280);
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .analytics-card.full-width-card {
        padding: 1.5rem;
    }
    
    .analytics-card.full-width-card .chart-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .analytics-card.full-width-card .chart-container {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .analytics-card.full-width-card {
        padding: 1rem;
    }
    
    .analytics-card.full-width-card .chart-container {
        height: 250px;
    }
}

/* Consistency Tracking Styles */

/* Heatmap Styles */
.heatmap-container {
    padding: 1rem 0;
}

.heatmap-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    background: var(--color-background-alt, #f8fafc);
    border-radius: 8px;
}

.heatmap-stat {
    text-align: center;
}

.heatmap-stat .stat-label {
    display: block;
    font-size: 0.75rem;
    color: #475569;
    color: var(--color-text-secondary, #475569);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.heatmap-stat .stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12px, 1fr));
    grid-gap: 2px;
    gap: 2px;
    max-width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafc;
    background: var(--color-background-alt, #f8fafc);
    border-radius: 8px;
    overflow-x: auto;
}

.heatmap-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.heatmap-cell:hover {
    transform: scale(1.2);
}

.heatmap-cell.intensity-0 {
    background-color: #f1f5f9;
}

.heatmap-cell.intensity-1 {
    background-color: #c7d2fe;
}

.heatmap-cell.intensity-2 {
    background-color: #a5b4fc;
}

.heatmap-cell.intensity-3 {
    background-color: #818cf8;
}

.heatmap-cell.intensity-4 {
    background-color: #6366f1;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #64748b;
}

.legend-scale {
    display: flex;
    gap: 2px;
}

.legend-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Writing Rhythm Styles */
.rhythm-insights {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.insight-item {
    text-align: center;
}

.insight-label {
    display: block;
    font-size: 0.75rem;
    color: #475569;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insight-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}

.rhythm-charts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    margin-top: 2rem;
    width: 100%;
    overflow: hidden;
}

.rhythm-chart {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    height: 300px;
    min-width: 0; /* Allow flex items to shrink below content size */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.rhythm-chart h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0; /* Don't let header shrink */
}

/* Chart container within rhythm-chart */
.rhythm-chart .chart-container {
    flex: 1 1;
    min-height: 0;
    position: relative;
    width: 100% !important;
    height: 100%;
}

/* Additional constraints for chart content */
.rhythm-chart .chart-container canvas,
.rhythm-chart .chart-container svg {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure any chart libraries respect container bounds */
.rhythm-chart .recharts-wrapper,
.rhythm-chart .recharts-surface {
    max-width: 100% !important;
}

/* Momentum Tracking Styles */
.momentum-overview {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 8px;
}

.momentum-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.score-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    text-align: center;
}

.momentum-score .score-circle .score-value {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    line-height: 1;
}

.momentum-overview .momentum-score .score-circle .score-label {
    font-size: 0.625rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
    color: white;
    opacity: 1;
}

.score-description {
    text-align: center;
}

.momentum-score .score-description .momentum-level {
    font-size: 0.875rem !important;
    font-weight: 300 !important;
    color: #6b7280;
    text-transform: capitalize;
    letter-spacing: 0.25px;
}

.momentum-score .score-description .momentum-level.good {
    color: #4ade80;
}

.momentum-score .score-description .momentum-level.excellent {
    color: #22c55e;
}

.momentum-score .score-description .momentum-level.fair {
    color: #facc15;
}

.momentum-score .score-description .momentum-level.needs-improvement {
    color: #ef4444;
}

.consistency-level {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.consistency-level.excellent {
    background: #dcfce7;
    color: #166534;
}

.consistency-level.good {
    background: #dbeafe;
    color: #1d4ed8;
}

.consistency-level.fair {
    background: #fef3c7;
    color: #92400e;
}

.consistency-level.needs-improvement {
    background: #fee2e2;
    color: #dc2626;
}

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

.momentum-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.momentum-stat .stat-label {
    font-size: 0.875rem;
    color: #64748b;
}

.momentum-stat .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.momentum-stats .momentum-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.velocity-chart {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    height: 300px;
    margin-top: 2rem;
}

.velocity-chart h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

/* Chart Header Styles */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.chart-header h3 {
    margin: 0;
}

.timeframe-selector {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #1e293b;
    font-size: 0.875rem;
    cursor: pointer;
}

.timeframe-selector:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .heatmap-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .rhythm-insights {
        flex-direction: column;
        gap: 1rem;
    }
    
    .rhythm-charts {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .momentum-overview {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .momentum-stats {
        width: 100%;
    }
    
    .chart-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .heatmap-grid {
        grid-template-columns: repeat(auto-fit, minmax(8px, 1fr));
    }
    
    .heatmap-cell {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 480px) {
    .heatmap-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .rhythm-insights {
        flex-direction: column;
        gap: 1rem;
    }
    
    .rhythm-charts {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .momentum-overview {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .momentum-stats {
        width: 100%;
    }
    
    .chart-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .heatmap-grid {
        grid-template-columns: repeat(auto-fit, minmax(8px, 1fr));
    }
    
    .heatmap-cell {
        width: 8px;
        height: 8px;
    }
}

/* Category Selector Styles - Two rows, no scrolling */
.category-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5rem;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.category-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
}

.category-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

.category-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.category-btn.active:hover {
    background: #2563eb;
}

.category-icon {
    font-size: 1rem;
}

.category-label {
    font-weight: 600;
}

/* Analytics Content */
.analytics-content {
    min-height: 400px;
}

/* Time of Day Patterns Styles */
.time-patterns-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    margin-top: 1rem;
}

.time-pattern-insights {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.time-insight {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease;
}

.time-insight:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.time-icon {
    font-size: 2rem;
    min-width: 3rem;
    text-align: center;
}

.time-info {
    display: flex;
    flex-direction: column;
    flex: 1 1;
}

.time-label {
    font-size: 0.75rem;
    color: #475569;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}

.time-percentage {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4f46e5;
}

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

.time-heatmap h4 {
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.hour-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 4px;
    gap: 4px;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.hour-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.hour-cell:hover {
    transform: scale(1.1);
}

.hour-cell.intensity-0 {
    background-color: #f1f5f9;
    color: #374151;
}

.hour-cell.intensity-1 {
    background-color: #c7d2fe;
    color: #1e293b;
}

.hour-cell.intensity-2 {
    background-color: #a5b4fc;
    color: white;
}

.hour-cell.intensity-3 {
    background-color: #818cf8;
    color: white;
}

.hour-cell.intensity-4 {
    background-color: #6366f1;
    color: white;
}

/* Emotion Cloud Styles */
.emotion-cloud-container {
    padding: 1rem 0;
}

.emotion-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.emotion-stat {
    text-align: center;
}

.emotion-stat .stat-label {
    display: block;
    font-size: 0.875rem;
    color: #475569;
    margin-bottom: 0.25rem;
}

.emotion-stat .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
}

.emotion-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 8px;
    min-height: 200px;
    align-items: center;
}

.emotion-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: capitalize;
}

.emotion-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.emotion-tag.size-1 {
    font-size: 0.75rem;
    opacity: 0.7;
}

.emotion-tag.size-2 {
    font-size: 0.875rem;
    opacity: 0.8;
}

.emotion-tag.size-3 {
    font-size: 1rem;
    opacity: 0.9;
}

.emotion-tag.size-4 {
    font-size: 1.125rem;
    opacity: 1;
}

.emotion-tag.size-5 {
    font-size: 1.25rem;
    opacity: 1;
    font-weight: 600;
}

/* Loading and Error States */
.analytics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #4f46e5;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.analytics-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    text-align: center;
}

.retry-button {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.retry-button:hover {
    background: #4338ca;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .category-selector {
        gap: 0.25rem;
        padding: 0.25rem;
    }
    
    .category-btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .category-label {
        display: none;
    }
    
    .category-icon {
        font-size: 1.25rem;
    }
    
    .time-patterns-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .time-pattern-insights {
        order: 2;
    }
    
    .time-heatmap {
        order: 1;
    }
    
    .hour-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .hour-cell {
        width: 35px;
        height: 35px;
        font-size: 0.7rem;
    }
    
    .emotion-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .emotion-cloud {
        padding: 1rem;
        min-height: 150px;
    }
    
    .emotion-tag {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .hour-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hour-cell {
        width: 30px;
        height: 30px;
        font-size: 0.65rem;
    }
    
    .time-insight {
        padding: 0.75rem;
    }
    
    .time-icon {
        font-size: 1.5rem;
        min-width: 2rem;
    }
}

/* Quality Analytics Styles */
.quality-overview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.quality-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 2rem;
}

.quality-metric {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.2);
    border-radius: 50%;
}

.metric-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metric-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.word-distribution-chart {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.word-distribution-chart h4 {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Goal Achievement Styles */
.goal-achievement-overview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.achievement-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.achievement-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.achievement-stat:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.3), rgba(147, 51, 234, 0.3));
    border-radius: 12px;
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.stat-detail {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.achievement-chart {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 400px;
}

.achievement-chart h4 {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Productivity Trends Styles */
.trends-overview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.trend-indicators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.trend-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.trend-indicator:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.trend-label {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

.trend-value {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: capitalize;
}

.trend-value.increasing {
    color: #10b981;
}

.trend-value.decreasing {
    color: #ef4444;
}

.trend-value.stable {
    color: #475569;
}

.productivity-chart {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 400px;
}

.productivity-chart h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Responsive Design for New Components */
@media (max-width: 768px) {
    .quality-metrics {
        grid-template-columns: 1fr;
    }
    
    .achievement-stats {
        grid-template-columns: 1fr;
    }
    
    .trend-indicators {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .category-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .category-label {
        display: none;
    }
    
    .achievement-chart,
    .productivity-chart,
    .word-distribution-chart {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .trend-indicators {
        grid-template-columns: 1fr;
    }
    
    .quality-metric,
    .achievement-stat,
    .trend-indicator {
        padding: 1rem;
    }
    
    .stat-icon,
    .metric-icon {
        width: 35px;
        height: 35px;
        font-size: 1.25rem;
    }
    
    .stat-value,
    .metric-value {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .category-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .category-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .achievement-chart,
    .productivity-chart,
    .word-distribution-chart {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .category-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem;
    }
    
    .category-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .category-icon {
        font-size: 1.2rem;
    }
    
    .category-label {
        font-size: 0.7rem;
    }
}

/* Advanced Analytics Styles */
.goal-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    margin-bottom: 2rem;
}

.current-goals, .suggested-goals {
    padding: 1.5rem;
    border-radius: 8px;
    background: #f8f9fa;
}

.current-goals h4, .suggested-goals h4 {
    margin-bottom: 1rem;
    color: #374151;
}

.goal-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.goal-label {
    font-weight: 500;
    color: #6b7280;
}

.goal-value {
    font-weight: 600;
    color: #111827;
}

.performance-insights {
    margin-bottom: 2rem;
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.insight-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #f3f4f6;
    border-radius: 6px;
}

.insight-label {
    font-weight: 500;
    color: #6b7280;
}

.insight-value {
    font-weight: 600;
    color: #111827;
}

.reasoning-section {
    margin-top: 2rem;
}

.reasoning-list {
    list-style: none;
    padding: 0;
}

.reasoning-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
    color: #475569;
}

/* Peer Comparison Styles */
.peer-info {
    font-size: 0.875rem;
    color: #6b7280;
}

.user-stats {
    margin-bottom: 2rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
}

.stat-label {
    font-weight: 500;
    color: #6b7280;
}

.stat-value {
    font-weight: 600;
    color: #111827;
}

.percentile-rankings {
    margin-bottom: 2rem;
}

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

.percentile-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.percentile-label {
    font-weight: 500;
    color: #374151;
}

.percentile-bar {
    position: relative;
    height: 24px;
    background: #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.percentile-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    transition: width 0.3s ease;
}

.percentile-value {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
}

.peer-insights {
    margin-top: 2rem;
}

.insight-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.insight-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.insight-badge.top_performer {
    background: #dcfce7;
    color: #166534;
}

.insight-badge.above_average {
    background: #dbeafe;
    color: #1e40af;
}

.insight-badge.room_for_growth {
    background: #fef3c7;
    color: #92400e;
}

.insight-badge.highly_focused {
    background: #e0e7ff;
    color: #3730a3;
}

.insight-badge.good_focus {
    background: #f0f9ff;
    color: #0369a1;
}

.insight-badge.short_sessions {
    background: #fef2f2;
    color: #991b1b;
}

/* Habit Tracking Styles */
.habit-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 2rem;
}

.habit-metric {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 8px;
}

.metric-icon {
    font-size: 2rem;
}

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-size: 0.875rem;
    color: #475569;
    margin-bottom: 0.25rem;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.habit-phase {
    margin-bottom: 2rem;
}

.phase-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.phase-name {
    font-weight: 600;
    color: #374151;
    text-transform: capitalize;
}

.phase-progress {
    flex: 1 1;
    position: relative;
    height: 20px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.phase-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.3s ease;
}

.phase-percentage {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
}

.habit-calendar {
    margin-bottom: 2rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 4px;
    gap: 4px;
    max-width: 400px;
}

.calendar-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    color: #374151;
    background: #f9fafb;
}

.calendar-day.active {
    background: #10b981;
    color: white;
}

.calendar-day.inactive {
    background: #f3f4f6;
    color: #9ca3af;
}

.day-number {
    font-size: 0.625rem;
}

.activity-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.5rem;
}

.habit-insights {
    margin-top: 2rem;
}

.insight-value.excellent {
    color: #059669;
}

.insight-value.good {
    color: #0369a1;
}

.insight-value.developing {
    color: #d97706;
}

.insight-value.needs_work {
    color: #dc2626;
}

.recommendation {
    padding: 1rem;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
    margin-top: 1rem;
}

/* Burnout Prediction Styles */
.risk-assessment {
    margin-bottom: 2rem;
}

.risk-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    background: #f9fafb;
}

.risk-level {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
}

.risk-level.low {
    background: #dcfce7;
    color: #166534;
}

.risk-level.medium {
    background: #fef3c7;
    color: #92400e;
}

.risk-level.high {
    background: #fef2f2;
    color: #991b1b;
}

.risk-score, .confidence {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.risk-factors {
    margin-bottom: 2rem;
}

.factors-list {
    list-style: none;
    padding: 0;
}

.factor-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
}

.performance-metrics {
    margin-bottom: 2rem;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
}

.metric-value.stable {
    color: #059669;
}

.metric-value.declining {
    color: #dc2626;
}

.metric-value.good {
    color: #059669;
}

.metric-value.concerning {
    color: #dc2626;
}

.recommendations {
    margin-top: 2rem;
}

.recommendations-list {
    list-style: none;
    padding: 0;
}

.recommendation-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
}

/* Session Length Analysis Styles */
.optimal-recommendation {
    margin-bottom: 2rem;
}

.recommendation-box {
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    text-align: center;
}

.optimal-range {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.recommendation-text {
    font-size: 1.125rem;
    margin: 0;
}

.session-analysis {
    margin-bottom: 2rem;
}

.analysis-table {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.table-header {
    display: contents;
}

.table-header > span {
    padding: 1rem;
    background: #374151;
    color: white;
    font-weight: 600;
    text-align: center;
}

.table-row {
    display: contents;
}

.table-row > span {
    padding: 1rem;
    background: white;
    color: #374151;
    text-align: center;
}

.table-row.optimal > span {
    background: #ecfdf5;
    color: #065f46;
    font-weight: 600;
}

.session-insights {
    margin-top: 2rem;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

/* Writing Days Prediction Styles */
.best-patterns {
    margin-bottom: 2rem;
}

.patterns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.pattern-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #f3f4f6;
    border-radius: 6px;
}

.pattern-label {
    font-weight: 500;
    color: #6b7280;
}

.pattern-value {
    font-weight: 600;
    color: #111827;
}

.weekly-predictions {
    margin-bottom: 2rem;
}

.predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.prediction-day {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prediction-day.optimal {
    background: #ecfdf5;
    border: 2px solid #10b981;
}

.prediction-day.good {
    background: #f0f9ff;
    border: 2px solid #3b82f6;
}

.day-name {
    font-weight: 600;
    color: #374151;
}

.predicted-words {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}

.confidence {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 500;
}

.confidence.high {
    color: #059669;
}

.confidence.medium {
    color: #d97706;
}

.confidence.low {
    color: #dc2626;
}

.day-analysis {
    margin-bottom: 2rem;
}

.insights-section {
    margin-top: 2rem;
}

.insights-content {
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 8px;
}

.main-recommendation {
    margin-top: 1rem;
    padding: 1rem;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
}

/* Responsive adjustments for advanced analytics */
@media (max-width: 768px) {
    .goal-comparison {
        grid-template-columns: 1fr;
    }
    
    .insight-grid,
    .stat-grid,
    .metrics-grid,
    .patterns-grid {
        grid-template-columns: 1fr;
    }
    
    .habit-metrics {
        grid-template-columns: 1fr;
    }
    
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
        max-width: 300px;
    }
    
    .predictions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .analysis-table {
        font-size: 0.875rem;
    }
    
    .table-header > span,
    .table-row > span {
        padding: 0.5rem;
    }
}

/* Trend Cards Styles */
.trend-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.trend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #10b981;
}

.trend-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
}

.trend-icon {
    font-size: 2.5rem;
    min-width: 3rem;
    text-align: center;
}

.trend-info {
    flex: 1 1;
}

.trend-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.trend-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.trend-arrow {
    font-size: 1.2rem;
}

.trend-text {
    font-weight: 600;
    color: #10b981;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.trend-description {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.4;
}

.trend-status.increasing .trend-text {
    color: #10b981;
}

.trend-status.decreasing .trend-text {
    color: #ef4444;
}

.trend-status.stable .trend-text {
    color: #6b7280;
}

@media (max-width: 768px) {
    .trend-card-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .trend-icon {
        font-size: 2rem;
    }
    
    .trend-info h3 {
        font-size: 1rem;
    }
    
    .trend-description {
        font-size: 0.8rem;
    }
}

/* Burnout Prediction Styles */
.burnout-prediction {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.burnout-risk-level {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 8px;
}

.risk-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.risk-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    color: white;
    text-align: center;
}

.risk-circle.low {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.risk-circle.medium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.risk-circle.high {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.risk-percentage {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.risk-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.risk-description {
    text-align: center;
}

.risk-level {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risk-level.low {
    background: #dcfce7;
    color: #166534;
}

.risk-level.medium {
    background: #fef3c7;
    color: #92400e;
}

.risk-level.high {
    background: #fee2e2;
    color: #dc2626;
}

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

.burnout-factor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.factor-label {
    font-size: 0.875rem;
    color: #64748b;
}

.factor-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.factor-value.high {
    color: #dc2626;
}

.factor-value.medium {
    color: #d97706;
}

.factor-value.low {
    color: #059669;
}

.burnout-recommendations {
    margin-top: 2rem;
}

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

.recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
}

.recommendation-icon {
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.recommendation-text {
    font-size: 0.875rem;
    color: #1e293b;
    line-height: 1.5;
}

/* Weekly Insights Styles */
.weekly-insights {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.insight-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.insight-icon {
    font-size: 1.25rem;
}

.insight-text {
    font-size: 0.875rem;
    color: #374151;
}

/* Consistency Metrics Styles */
.consistency-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 8px;
}

.consistency-metric {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.metric-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
}

.metric-details {
    flex: 1 1;
    text-align: left;
}

.metric-details h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.metric-details p {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
}

/* Streak Analysis Styles */
.streak-analysis {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.streak-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.streak-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: transform 0.2s ease;
}

.streak-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.streak-stat-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.streak-stat-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.streak-stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.streak-stat-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Responsive for New Components */
@media (max-width: 768px) {
    .weekly-insights {
        flex-direction: column;
        gap: 1rem;
        text-align: left;
    }
    
    .consistency-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    
    .consistency-metric {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .metric-details {
        text-align: center;
    }
    
    .streak-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .streak-stat-card {
        padding: 1rem;
    }
    
    .streak-stat-number {
        font-size: 1.5rem;
    }
    
    .burnout-risk-level {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .burnout-factors {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .streak-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .consistency-metrics {
        padding: 0.75rem;
    }
    
    .metric-circle {
        width: 60px;
        height: 60px;
        font-size: 1rem;
    }
    
    .weekly-insights {
        padding: 0.75rem;
    }
    
    .insight-text {
        font-size: 0.8rem;
    }
}

/* Comprehensive Peer Comparison Styles */
.peer-overview-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.user-stats-card {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.user-stats-card h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    color: #64748b !important;
    font-size: 0.875rem;
    font-weight: 500;
}

.stat-value {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-percentile {
    color: #4f46e5;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(79, 70, 229, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    align-self: flex-start;
}

.strengths-weaknesses {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.strength-areas, .improvement-areas {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.strength-areas h4, .improvement-areas h4 {
    color: #1e293b;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.area-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.area-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.area-badge.strength {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.area-badge.improvement {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.overall-rank {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Distribution Charts */
.distribution-chart {
    height: 300px;
    margin-top: 1rem;
}

/* Comparative Metrics */
.comparative-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    margin-top: 1.5rem;
}

.metric-category {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.metric-category h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.score-comparison {
    margin-bottom: 1rem;
}

.score-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.score-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.quality-score .score-label {
    min-width: 80px;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.score-visual {
    flex: 1 1;
    position: relative;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.score-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 12px;
    transition: width 0.3s ease;
}

.score-fill.peer-fill {
    background: linear-gradient(90deg, #64748b 0%, #94a3b8 100%);
}

.score-fill.top-fill {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.score-bar .score-value {
    position: absolute;
    right: 8px;
    color: #1e293b;
    font-size: 0.75rem;
    font-weight: 600;
}

.component-breakdown {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
    margin-top: 1rem;
}

.component-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.component-item:last-child {
    border-bottom: none;
}

.component-item span:first-child {
    color: #64748b;
    font-size: 0.875rem;
}

.component-item span:last-child {
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Time-based Comparisons */
.time-comparison-chart {
    height: 300px;
    margin-top: 1rem;
}

/* Achievements & Badges */
.achievements-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    margin-top: 1.5rem;
}

.earned-badges, .available-badges, .rare-badges {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.earned-badges h4, .available-badges h4, .rare-badges h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 0.75rem;
    gap: 0.75rem;
}

.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s ease;
}

.badge:hover {
    transform: translateY(-2px);
}

.badge.earned {
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.badge.available {
    background: rgba(59, 130, 246, 0.1);
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.badge.rare {
    background: rgba(168, 85, 247, 0.1);
    border: 2px solid rgba(168, 85, 247, 0.3);
}

.badge-icon {
    font-size: 1.5rem;
}

.badge-name {
    color: #1e293b;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.next-badge-progress {
    grid-column: 1 / -1;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.next-badge-progress h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.progress-card {
    background: #f8fafc; /* Light gray background */
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem; /* 32px */
}

.badge-target {
    color: #1e293b;
    font-weight: 600;
    text-transform: capitalize;
}

.progress-percentage {
    color: #4f46e5;
    font-weight: 700;
}

.progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748b;
}

/* Personalized Recommendations */
.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.recommendation-card {
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recommendation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recommendation-card.priority-high {
    border-left: 4px solid #ef4444;
}

.recommendation-card.priority-medium {
    border-left: 4px solid #f59e0b;
}

.recommendation-card.priority-low {
    border-left: 4px solid #10b981;
}

.recommendation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem 0.5rem;
}

.recommendation-category {
    color: #1e293b;
    font-weight: 600;
    font-size: 0.875rem;
}

.priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.priority-high {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.priority-badge.priority-medium {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.priority-badge.priority-low {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.recommendation-content {
    padding: 0.5rem 1rem 1rem;
}

.recommendation-message {
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.recommendation-impact {
    color: #64748b;
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 768px) {
    .peer-overview-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .comparative-metrics-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .achievements-section {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .recommendations-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-grid {
        grid-template-columns: 1fr;
    }
    
    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Social Engagement Analytics Styles */
.social-overview-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.engagement-stats {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.engagement-stats h4 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1.25rem 0;
    text-align: center;
}

.engagement-stats .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

@media (max-width: 900px) {
    .engagement-stats .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }
}

@media (max-width: 768px) {
    .engagement-stats .stat-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.engagement-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    min-height: 75px;
}

.engagement-stats .stat-item:hover {
    transform: translateY(-2px);
    background: #f1f5f9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.engagement-stats .stat-icon {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    border-radius: 8px;
    flex-shrink: 0;
    color: #475569;
}

.engagement-stats .stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1;
    min-width: 0;
}

.engagement-stats .stat-label {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.engagement-stats .stat-value {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* Enhanced Engagement Breakdown */
.engagement-breakdown {
    background: #f8fafc;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.engagement-breakdown h4 {
    color: #1e293b;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .breakdown-grid {
        grid-template-columns: 1fr;
    }
}

.breakdown-item {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.breakdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.breakdown-item:hover::before {
    transform: scaleX(1);
}

.breakdown-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #4f46e5;
}

.breakdown-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.breakdown-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.breakdown-label {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

.breakdown-value {
    color: #1e293b;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.engagement-stats .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
}

/* Breakdown Analytics Styles */
.breakdown-chart-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.breakdown-chart-container .chart-container {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 400px !important;
    margin: 0 auto;
}

.breakdown-table {
    overflow-x: auto;
    margin-top: 1rem;
}

.breakdown-table table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    background: var(--color-background-alt, #ffffff);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.breakdown-table th,
.breakdown-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.breakdown-table th {
    background: #f8fafc;
    background: var(--color-background, #f8fafc);
    font-weight: 600;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breakdown-table td {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    font-size: 0.875rem;
}

.breakdown-table .project-name {
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breakdown-table .general-writing {
    color: #4f46e5;
    color: var(--color-primary, #4f46e5);
    font-weight: 500;
}

.percentage-bar {
    position: relative;
    background: #f1f5f9;
    background: var(--color-background, #f1f5f9);
    border-radius: 4px;
    height: 20px;
    display: flex;
    align-items: center;
    min-width: 80px;
}

.percentage-fill {
    background: linear-gradient(90deg, #4f46e5, #6366f1);
    background: linear-gradient(90deg, var(--color-primary, #4f46e5), var(--color-primary-light, #6366f1));
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 2px;
}

.percentage-bar span {
    position: absolute;
    left: 8px;
    right: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    z-index: 1;
    text-align: left;
}

.summary-stats {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.summary-stats .stat {
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Responsive design for breakdown */
@media (max-width: 768px) {
    .breakdown-chart-container .chart-container {
        height: 350px !important;
    }
    
    .breakdown-table {
        font-size: 0.8rem;
    }
    
    .breakdown-table th,
    .breakdown-table td {
        padding: 8px 12px;
    }
    
    .summary-stats {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .percentage-bar {
        min-width: 60px;
        height: 16px;
    }
    
    .percentage-bar span {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .breakdown-table table {
        font-size: 0.7rem;
    }
    
    .breakdown-table th,
    .breakdown-table td {
        padding: 4px 6px;
    }
    
    .breakdown-table .project-name {
        max-width: 100px;
    }
    
    .percentage-bar {
        min-width: 50px !important;
        height: 16px !important;
    }
    
    .chart-container {
        height: 300px !important;
    }
}

/* Progress Container - uses shared page-container */
.progress {
    /* Container styles handled by shared page-container class */
}

.progress-header {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
    text-align: center;
    display: block !important;
    flex-direction: column !important;
}

.progress .progress-header h1 {
    color: #1a1a1a !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: left !important;
    flex-direction: row !important;
}

.progress-header p {
    color: #6b7280;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 800px;
    text-align: center !important;
    display: block !important;
}

.progress-content {
    background: transparent;
    border-radius: 12px;
    padding: 24px;
    box-shadow: none;
    border: none;
}

/* Removed old Progress tab styles - now using shared tab system */

/* Ensure shared-tabs spacing matches other main pages */
.progress .shared-tabs {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Loading States */
.loading-spinner,
.section-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #64748b;
}

/* Elliptical Spinner */
.elliptical-spinner {
    position: relative;
    width: 200px;
    height: 100px;
    margin-bottom: 1rem;
}

.spinner-track {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid #e2e8f0;
    border-radius: 50%;
    transform: scaleY(0.5);
}

.spinner-fill {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #4f46e5;
    border-right: 3px solid #4f46e5;
    border-radius: 50%;
    transform: scaleY(0.5);
    animation: ellipticalSpin 1.5s linear infinite;
}

@keyframes ellipticalSpin {
    0% { transform: scaleY(0.5) rotate(0deg); }
    100% { transform: scaleY(0.5) rotate(360deg); }
}

.loading-spinner p {
    margin-top: 0.5rem;
    font-size: 14px;
    color: #64748b;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #4f46e5;
    border-radius: 50%;
    margin-bottom: 1rem;
    flex-shrink: 0;
    aspect-ratio: 1;
}

/* Content Container */
.progress-content {
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}

/* Electron-specific overrides for content container - FIXED DETECTION */
.electron-app .progress-content {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tab Headline - matching Home page style with emoji on separate line */
.tab-headline {
    margin-bottom: 24px;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

.tab-headline h2 {
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.tab-headline .tab-emoji {
    font-size: 2.5rem;
    line-height: 1;
}

.tab-headline .tab-title {
    font-size: 1.875rem;
    line-height: 1.2;
}

.tab-headline p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Section Info - legacy for compatibility */
.section-info {
    padding: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
}

.section-info h3 {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1.75rem;
    font-weight: 600;
}

.section-info p {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
}

/* Error Message */
.error-message {
    background: #fef2f2;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
    border: 1px solid #fecaca;
}

/* ===== GOALS SECTION ===== */

.goals-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    padding: 0;
    max-width: 100%;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

/* Electron-specific overrides for goals grid - FIXED DETECTION */
.electron-app .goals-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.electron-app .goal-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    min-width: 280px !important;
}

.electron-app .goal-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    padding-right: 70px !important; /* Space for corner percentage */
    position: relative !important;
}

.electron-app .goal-header-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 1 !important;
}

.electron-app .goal-header-percentage {
    position: absolute !important;
    top: -0.25rem !important;
    right: -0.5rem !important;
    font-size: 0.8rem !important;
    padding: 0.2rem 0.6rem !important;
    min-width: 50px !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Removed old goal-card-progress-bar styles - now using metric-specific progress bars */

.electron-app .goal-icon {
    width: 35px !important;
    height: 35px !important;
    background: transparent !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
    border: 2px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.electron-app .goal-title h4 {
    margin: 0 !important;
    color: #1e293b !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.electron-app .goal-title span {
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.electron-app .goal-metrics {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.electron-app .metric {
    padding: 0.5rem !important;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9 !important;
    background: #fafafa !important;
    min-width: 250px !important;
    box-sizing: border-box !important;
}

.electron-app .metric-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
}

.electron-app .metric-header > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 1 !important;
}

.electron-app .metric-percentage {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 12px !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    text-align: center !important;
    min-width: 40px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.electron-app .metric-progress-bar {
    width: 100% !important;
    height: 6px !important;
    background: #f1f5f9 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin: 0.5rem 0 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.electron-app .metric-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600)) !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
    min-width: 1px !important;
}

.electron-app .metric-stats {
    display: flex !important;
    gap: 0.25rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    align-items: baseline !important;
}

.electron-app .metric-stats > * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.electron-app .metric-stats .current {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.electron-app .metric-stats .separator {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

.electron-app .metric-stats .target {
    color: #6b7280 !important;
    font-weight: 500 !important;
}

.electron-app .metric-stats .remaining {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

.electron-app .progress-bar {
    height: 8px !important;
    margin: 0.5rem 0 !important;
    border-radius: 4px !important;
    width: 100% !important;
    min-width: 240px !important;
    max-width: 100% !important;
    background-color: #f1f5f9 !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.electron-app .progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600)) !important;
    border-radius: 4px !important;
    transition: width 0.3s ease !important;
    min-width: 2px !important;
    position: relative !important;
}

.electron-app .metric-status {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    margin-top: 0.25rem !important;
}

.electron-app .metric-trophies {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    margin-top: 0.25rem !important;
}

/* Ensure trophy icons don't take up too much space */
.electron-app .metric .trophy {
    font-size: 0.75rem !important;
    margin-left: 0.25rem !important;
}

/* Force all text content to wrap properly */
.electron-app .goal-card * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* Goal metrics container now uses shared progress cards */
.goal-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
    margin-top: 1rem;
}

/* Responsive goal metrics */
@media (max-width: 768px) {
    .goal-metrics {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ===== STREAKS SECTION ===== */

.sc-streaks-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}

.sc-streak-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    color: #374151;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 90px;
}

.sc-streak-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: #d1d5db;
    background: #f3f4f6;
}

.sc-streak-icon-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
    flex-shrink: 0;
}

.sc-streak-icon {
    font-size: 2.25rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.sc-streak-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    line-height: 1.2;
    margin: 0;
}

.sc-streak-number-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    flex-shrink: 0;
}

.sc-streak-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
    line-height: 1;
}

.sc-streak-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.sc-streak-content {
    flex: 1 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sc-streak-message {
    background: #f3f4f6;
    color: #374151;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.3;
    flex: 1 1;
    margin: 0;
    text-align: center;
    border: 2px solid #fbbf24;
}

.sc-streak-trophies {
    background: #e5e7eb;
    color: #374151;
    padding: 0.5rem 0.875rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
    min-width: 60px;
    border: 1px solid #d1d5db;
}

/* Time-based Streak Cards - Solid Color Variations */
.streak-card.time-streak {
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.streak-card.time-streak:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.streak-card.time-streak .streak-icon {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 16px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.streak-card.time-streak .streak-content h4 {
    color: white;
    font-weight: 600;
}

.streak-card.time-streak .streak-number {
    color: #ffffff;
    font-weight: 700;
}

.streak-card.time-streak .streak-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.streak-card.time-streak .streak-message {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    margin-top: 0.5rem;
}

.streak-card.time-streak .streak-trophies {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Solid color variations for different time streaks */
.streak-card.time-streak:nth-of-type(2) {
    background: #dc2626;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.15);
}

.streak-card.time-streak:nth-of-type(2):hover {
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.25);
}

.streak-card.time-streak:nth-of-type(3) {
    background: #2563eb;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
}

.streak-card.time-streak:nth-of-type(3):hover {
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25);
}

.streak-card.time-streak:nth-of-type(4) {
    background: #059669;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.15);
}

.streak-card.time-streak:nth-of-type(4):hover {
    box-shadow: 0 8px 30px rgba(5, 150, 105, 0.25);
}

.streak-card.time-streak:nth-of-type(5) {
    background: #d97706;
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.15);
}

.streak-card.time-streak:nth-of-type(5):hover {
    box-shadow: 0 8px 30px rgba(217, 119, 6, 0.25);
}

.streak-card.time-streak:nth-of-type(6) {
    background: #7c3aed;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15);
}

.streak-card.time-streak:nth-of-type(6):hover {
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.25);
}

.streak-card.time-streak:nth-of-type(7) {
    background: #be185d;
    box-shadow: 0 4px 20px rgba(190, 24, 93, 0.15);
}

.streak-card.time-streak:nth-of-type(7):hover {
    box-shadow: 0 8px 30px rgba(190, 24, 93, 0.25);
}

/* Goal Streak Cards - Distinct Colors for Daily, Weekly, Monthly Goals */
/* Daily Writing Streak (1st card - ✍️) */
.streak-card:nth-of-type(1) {
    background: #1E1F26;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.streak-card:nth-of-type(1):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.25);
}

.streak-card:nth-of-type(1) .streak-icon {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 16px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.streak-card:nth-of-type(1) .streak-content h4 {
    color: white;
    font-weight: 600;
}

.streak-card:nth-of-type(1) .streak-number {
    color: #ffffff;
    font-weight: 700;
}

.streak-card:nth-of-type(1) .streak-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.streak-card:nth-of-type(1) .streak-message {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    margin-top: 0.5rem;
}

.streak-card:nth-of-type(1) .streak-trophies {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Daily Goal Streak (7th card - 🎯) */
.streak-card:nth-of-type(7) {
    background: #16a34a;
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.streak-card:nth-of-type(7):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(22, 163, 74, 0.25);
}

.streak-card:nth-of-type(7) .streak-icon {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 16px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.streak-card:nth-of-type(7) .streak-content h4 {
    color: white;
    font-weight: 600;
}

.streak-card:nth-of-type(7) .streak-number {
    color: #ffffff;
    font-weight: 700;
}

.streak-card:nth-of-type(7) .streak-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.streak-card:nth-of-type(7) .streak-message {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    margin-top: 0.5rem;
}

.streak-card:nth-of-type(7) .streak-trophies {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Weekly Goal Streak (8th card - 📅) */
.streak-card:nth-of-type(8) {
    background: #ea580c;
    box-shadow: 0 4px 20px rgba(234, 88, 12, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.streak-card:nth-of-type(8):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(234, 88, 12, 0.25);
}

.streak-card:nth-of-type(8) .streak-icon {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 16px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.streak-card:nth-of-type(8) .streak-content h4 {
    color: white;
    font-weight: 600;
}

.streak-card:nth-of-type(8) .streak-number {
    color: #ffffff;
    font-weight: 700;
}

.streak-card:nth-of-type(8) .streak-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.streak-card:nth-of-type(8) .streak-message {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    margin-top: 0.5rem;
}

.streak-card:nth-of-type(8) .streak-trophies {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Monthly Goal Streak (9th card - 📋) */
.streak-card:nth-of-type(9) {
    background: #9333ea;
    box-shadow: 0 4px 20px rgba(147, 51, 234, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.streak-card:nth-of-type(9):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(147, 51, 234, 0.25);
}

.streak-card:nth-of-type(9) .streak-icon {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 16px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.streak-card:nth-of-type(9) .streak-content h4 {
    color: white;
    font-weight: 600;
}

.streak-card:nth-of-type(9) .streak-number {
    color: #ffffff;
    font-weight: 700;
}

.streak-card:nth-of-type(9) .streak-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.streak-card:nth-of-type(9) .streak-message {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    margin-top: 0.5rem;
}

.streak-card:nth-of-type(9) .streak-trophies {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===== ACHIEVEMENTS SECTION ===== */

.coming-soon {
    padding: 3rem 2rem;
}

.coming-soon-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.coming-soon h4 {
    color: #1e293b;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.coming-soon p {
    color: #64748b;
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Achievement System Styles */
.achievements-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Trophies Summary */
.trophies-summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100% !important;
}

@media (min-width: 768px) {
    .trophies-summary {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 2rem;
        gap: 2rem;
        align-items: start;
    }
}

.trophy-card {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(251, 191, 36, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.trophy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(251, 191, 36, 0.4);
}

.trophy-icon {
    font-size: 3.5rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    animation: trophy-glow 2s ease-in-out infinite alternate;
    margin-bottom: 0.5rem;
}

@keyframes trophy-glow {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

.trophy-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.trophy-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.trophy-count {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1;
    margin: 0.25rem 0;
}

.trophy-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    max-width: 250px;
    line-height: 1.4;
}

/* Recent Achievements */
.recent-achievements {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
}

.recent-achievements h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recent-badges {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recent-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.recent-badge:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recent-badge-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 8px;
}

.recent-badge-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1;
}

.recent-badge-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.recent-badge-trophies {
    font-size: 0.8rem;
    color: #f59e0b;
    font-weight: 600;
}

/* Achievement Categories */
.achievement-categories {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.achievement-category h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Achievement Tabs */
.achievement-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 4px;
    width: -webkit-fit-content;
    width: fit-content;
}

.achievement-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.achievement-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.achievement-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 600;
}

/* Achievement Badges Grid */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    padding: 0;
}

.progress .achievement-badge {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem;
    min-width: 180px;
    min-height: 200px; /* Adequate height for text */
    width: auto;
    height: auto;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.progress .achievement-badge.earned {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #10b981;
}

.progress .achievement-badge.earned::before {
    content: '✓';
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #10b981;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.progress .achievement-badge.locked {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.7;
}

.progress .achievement-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.progress .achievement-badge.earned:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.progress .badge-icon {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
    display: block;
    text-align: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.progress .achievement-badge.earned .badge-icon {
    animation: badge-earned 0.6s ease-out;
}

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

.progress .badge-content h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    text-align: center;
    line-height: 1.2;
    word-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
}

.progress .badge-content p {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 0.75rem 0;
    text-align: center;
    line-height: 1.3;
    word-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
    overflow-wrap: break-word;
}

.progress .badge-trophies {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 0.5rem;
}

.progress .badge-earned {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

/* Achievement rarity styling */
.achievement-badge.rarity-common {
    border-left: 4px solid #6b7280;
}

.achievement-badge.rarity-rare {
    border-left: 4px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.achievement-badge.rarity-epic {
    border-left: 4px solid #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}

.achievement-badge.rarity-legendary {
    border-left: 4px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
    background: linear-gradient(135deg, #fef3c7 0%, #ffffff 100%);
}

/* Achievement counter styling */
.badge-counter {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    min-width: 24px;
}

.achievement-badge {
    position: relative;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
    .progress {
        padding: 1rem;
    }
    
    .progress-header {
        display: none;
    }
    
    .progress-tabs {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .tab-btn {
        padding: 0.75rem;
    }
    
    /* Streak Cards Mobile Styles */
    .sc-streaks-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .sc-streak-card {
        padding: 1rem;
        border-radius: 12px;
        position: relative;
        overflow: visible;
    }
    
    .sc-streak-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .sc-streak-message {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        line-height: 1.2;
        border-radius: 16px;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
    }
    
    .sc-streak-trophies {
        align-self: flex-start;
        font-size: 0.875rem;
    }
    
    .goal-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .streaks-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .goal-card {
        padding: 1.5rem;
    }
    
    .metric {
        padding: 1rem;
    }
    
    .streak-card {
        padding: 1.5rem;
    }
    
    .trophy-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1rem;
    }
    
    .trophy-icon {
        font-size: 3rem;
    }
    
    .trophy-count {
        font-size: 2rem;
    }
    
    .progress .achievement-badge {
        padding: 1.25rem;
        min-width: 180px;
        min-height: 200px; /* Adequate height for text */
        width: auto;
        height: auto;
    }
    
    .progress .badge-icon {
        font-size: 2.5rem;
    }
    
    .recent-badges {
        gap: 0.5rem;
    }
    
    .recent-badge {
        padding: 0.5rem;
        gap: 0.75rem;
    }
    
    .recent-badge-icon {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .progress-header h2 {
        font-size: 1.5rem;
    }
    
    .goal-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .goal-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .streak-number {
        font-size: 2.5rem;
    }
    
    .streak-icon {
        font-size: 2.5rem;
    }
    
    .achievements-content {
        gap: 1.5rem;
    }
    
    .trophies-summary {
        gap: 1rem;
    }
    
    .trophy-card {
        padding: 1rem;
    }
    
    .trophy-content h3 {
        font-size: 1.2rem;
    }
    
    .trophy-count {
        font-size: 2rem;
    }
    
    .achievement-categories {
        gap: 1.5rem;
    }
    
    .achievement-category h4 {
        font-size: 1.1rem;
    }
}

/* Force correct achievements layout - High specificity overrides */
.progress .achievements-section {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    position: relative !important;
    clear: both !important;
}

.progress .achievements-section .section-info {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: center !important;
    position: relative !important;
    clear: both !important;
}

.progress .achievements-section .achievements-content {
    display: block !important;
    width: 100% !important;
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    position: relative !important;
    clear: both !important;
}

.progress .achievements-section .trophies-summary {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    clear: both !important;
}

.progress .achievements-section .trophy-card {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto 1.5rem auto !important;
    position: relative !important;
}

.progress .achievements-section .recent-achievements {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    position: relative !important;
}

@media (min-width: 768px) {
    .progress .achievements-section .trophies-summary {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 2rem !important;
        gap: 2rem !important;
        align-items: start !important;
    }
    
    .progress .achievements-section .trophy-card,
    .progress .achievements-section .recent-achievements {
        margin: 0 !important;
        max-width: none !important;
    }
}

/* Force streak card colors - Override any global card styles */
.progress .streak-card {
    background: #1e293b !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    color: white !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.15) !important;
    border: 1px solid #334155 !important;
}

.progress .streak-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(30, 41, 59, 0.25) !important;
    border-color: #475569 !important;
}

/* Time-based Streak Cards - Force solid colors */
.progress .streak-card.time-streak {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

.progress .streak-card.time-streak:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Specific color overrides for each time streak card */
.progress .streak-card.time-streak:nth-of-type(2) {
    background: #dc2626 !important;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.15) !important;
}

.progress .streak-card.time-streak:nth-of-type(2):hover {
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.25) !important;
}

.progress .streak-card.time-streak:nth-of-type(3) {
    background: #2563eb !important;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15) !important;
}

.progress .streak-card.time-streak:nth-of-type(3):hover {
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25) !important;
}

.progress .streak-card.time-streak:nth-of-type(4) {
    background: #059669 !important;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.15) !important;
}

.progress .streak-card.time-streak:nth-of-type(4):hover {
    box-shadow: 0 8px 30px rgba(5, 150, 105, 0.25) !important;
}

.progress .streak-card.time-streak:nth-of-type(5) {
    background: #d97706 !important;
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.15) !important;
}

.progress .streak-card.time-streak:nth-of-type(5):hover {
    box-shadow: 0 8px 30px rgba(217, 119, 6, 0.25) !important;
}

.progress .streak-card.time-streak:nth-of-type(6) {
    background: #7c3aed !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15) !important;
}

.progress .streak-card.time-streak:nth-of-type(6):hover {
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.25) !important;
}

.progress .streak-card.time-streak:nth-of-type(7) {
    background: #be185d !important;
    box-shadow: 0 4px 20px rgba(190, 24, 93, 0.15) !important;
}

.progress .streak-card.time-streak:nth-of-type(7):hover {
    box-shadow: 0 8px 30px rgba(190, 24, 93, 0.25) !important;
}

/* Goal Streak Cards - Force specific colors */
.progress .streak-card:nth-of-type(1) {
    background: #1E1F26 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.progress .streak-card:nth-of-type(1):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.25) !important;
}

.progress .streak-card:nth-of-type(7) {
    background: #16a34a !important;
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.progress .streak-card:nth-of-type(7):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(22, 163, 74, 0.25) !important;
}

.progress .streak-card:nth-of-type(8) {
    background: #ea580c !important;
    box-shadow: 0 4px 20px rgba(234, 88, 12, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.progress .streak-card:nth-of-type(8):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(234, 88, 12, 0.25) !important;
}

.progress .streak-card:nth-of-type(9) {
    background: #9333ea !important;
    box-shadow: 0 4px 20px rgba(147, 51, 234, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.progress .streak-card:nth-of-type(9):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(147, 51, 234, 0.25) !important;
}

/* ===== LEADERBOARDS SECTION ===== */



/* Removed old Progress leaderboard tab styles - now using shared tab system */

/* Progress Leaderboard Content */
.progress-leaderboard-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.progress-leaderboard-info {
    text-align: center;
    margin-bottom: 1.5rem;
}

.progress-leaderboard-info h4 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}

.progress-leaderboard-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* Progress Empty Leaderboard */
.progress-empty-leaderboard {
    padding: 2rem;
    text-align: center;
}

.progress-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.progress-empty-leaderboard h4 {
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.progress-empty-leaderboard p {
    color: #64748b;
}

/* Progress Podium */
.progress-podium {
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 1.5rem 1rem;
    gap: 0.75rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.progress-podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.progress-podium-user {
    margin-bottom: 0.5rem;
}

.progress-avatar-container {
    position: relative;
    margin-bottom: 0.75rem;
}

.progress-podium-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid white;
    object-fit: cover;
}

.progress-podium-first .progress-podium-avatar {
    width: 80px;
    height: 80px;
    border: 4px solid #ffd700;
}

.progress-podium-info {
    text-align: center;
}

.progress-podium-rank {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.progress-podium-first .progress-podium-rank {
    font-size: 2rem;
}

.progress-podium-username {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.progress-podium-first .progress-podium-username {
    font-size: 1rem;
}

.progress-podium-score {
    font-size: 0.75rem;
    opacity: 0.9;
}

.progress-podium-first .progress-podium-score {
    font-size: 0.875rem;
}

.progress-podium-base {
    width: 60px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.progress-podium-base-1 {
    height: 60px;
    background: rgba(255, 215, 0, 0.3);
    width: 80px;
}

.progress-podium-base-2 {
    height: 50px;
    background: rgba(192, 192, 192, 0.3);
}

.progress-podium-base-3 {
    height: 40px;
    background: rgba(205, 127, 50, 0.3);
}

/* Progress Rankings List */
.progress-rankings-list {
    margin-top: 1.5rem;
}

.progress-rankings-list h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.progress-ranking-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
    transition: all 0.2s;
}

.progress-ranking-item:hover {
    background: #f1f5f9;
}

.progress-ranking-item.current-user {
    background: #eff6ff;
    border: 2px solid #3b82f6;
}

.progress-ranking-item.rank-gold {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.progress-ranking-item.rank-silver {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}

.progress-ranking-item.rank-bronze {
    background: linear-gradient(135deg, #fed7aa, #fdba74);
}

.progress-ranking-position {
    margin-right: 1rem;
}

.progress-rank-display {
    font-weight: bold;
    color: #1e293b;
    min-width: 2rem;
    text-align: center;
}

.progress-ranking-user {
    display: flex;
    align-items: center;
    flex: 1 1;
}

.progress-ranking-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 0.75rem;
    object-fit: cover;
}

.progress-ranking-info {
    flex: 1 1;
}

.progress-ranking-username {
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-you-badge {
    background: #3b82f6;
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
}

.progress-ranking-location {
    color: #64748b;
    font-size: 0.75rem;
}

.progress-ranking-score {
    text-align: right;
}

.progress-score-value {
    font-weight: 600;
    color: #1e293b;
}

/* Progress Your Rank Section */
.progress-your-rank-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.progress-your-rank-section h4 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

/* Progress Avatar Fallback */
.progress-avatar-fallback {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

/* Responsive Design for Progress Leaderboards */
@media (max-width: 768px) {
    .progress-leaderboard-tabs {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .progress-leaderboard-tab-btn {
        padding: 0.5rem;
    }
    
    .progress-podium {
        padding: 1rem 0.5rem;
        gap: 0.5rem;
    }
    
    .progress-podium-place {
        font-size: 0.875rem;
    }
    
    .progress-podium-avatar {
        width: 50px;
        height: 50px;
    }
    
    .progress-podium-first .progress-podium-avatar {
        width: 60px;
        height: 60px;
    }
    
    .progress-ranking-item {
        padding: 0.5rem;
    }
    
    .progress-ranking-avatar {
        width: 32px;
        height: 32px;
    }
    
    .progress-ranking-position {
        margin-right: 0.5rem;
    }
}

@media (max-width: 480px) {
    /* Removed old leaderboard tab styles - now using shared tab system */
    
    .progress-podium {
        flex-direction: column;
        align-items: center;
    }
    
    .progress-podium-place {
        margin-bottom: 1rem;
    }
}

/* Electron-specific overrides for leaderboard sections - FIXED DETECTION */
.electron-app .leaderboards-section {
    padding: 0.5rem !important;
}

.electron-app .leaderboards-section .section-info {
    padding: 0.75rem !important;
    text-align: left !important;
}

.electron-app .leaderboards-section .section-info h3 {
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.2 !important;
}

.electron-app .leaderboards-section .section-info p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
}

/* Removed old Electron leaderboard tab styles - now using shared tab system */

.electron-app .progress-leaderboard-content {
    padding: 0.75rem !important;
}

.electron-app .progress-podium {
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.electron-app .progress-podium-place {
    padding: 0.5rem !important;
}

.electron-app .progress-podium-avatar {
    width: 32px !important;
    height: 32px !important;
}

.electron-app .progress-podium-username {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

.electron-app .progress-podium-score {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

/* Progress bar styling for Electron - FIXED DETECTION */
.electron-app .goal-progress {
    height: 8px !important;
    width: 100% !important;
    min-width: 240px !important;
    background-color: #f1f5f9 !important;
    border-radius: 4px !important;
    overflow: visible !important;
    margin: 0.5rem 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.electron-app .goal-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600)) !important;
    border-radius: 4px !important;
    transition: width 0.3s ease !important;
    min-width: 2px !important;
    position: relative !important;
}

.electron-app .progress-bar {
    width: 100% !important;
    min-width: 240px !important;
    height: 8px !important;
    background-color: #f1f5f9 !important;
    border-radius: 4px !important;
    overflow: visible !important;
    margin: 0.5rem 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.electron-app .progress-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600)) !important;
    border-radius: 4px !important;
    transition: width 0.3s ease !important;
    min-width: 2px !important;
    position: relative !important;
}

/* Goal card progress container - FIXED DETECTION */
.electron-app .goal-card .progress {
    width: 100% !important;
    min-width: 240px !important;
    max-width: 100% !important;
    margin: 0.5rem 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.electron-app .goal-card .progress .progress-bar,
.electron-app .goal-card .progress .goal-progress {
    width: 100% !important;
    min-width: 240px !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.electron-app .goal-metric .progress-text {
    font-size: 0.75rem !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* Make sure progress containers don't cut off progress bars */
.metric .progress,
.metric .goal-progress-container,
.goal-card .progress {
    width: 100% !important;
    min-width: 240px !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin: 0.5rem 0 !important;
    padding: 0 !important;
}

.progress-ranking-score {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

.progress-ranking-item {
    padding: 0.5rem !important;
    border-radius: 6px !important;
}

.progress-ranking-avatar {
    width: 28px !important;
    height: 28px !important;
}

.progress-ranking-username {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

.progress-ranking-score {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}



/* Fun and Celebratory Progress Bars */
.simple-progress-bar {
    width: 100%;
    height: 14px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 12px;
    overflow: visible;
    margin: 0.75rem 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    position: relative;
}

/* Milestone markers at 25%, 50%, 75% */
.simple-progress-bar::before {
    content: '🎯';
    position: absolute;
    top: -8px;
    left: 25%;
    transform: translateX(-50%);
    font-size: 12px;
    opacity: 0.4;
    z-index: 1;
}

.simple-progress-bar::after {
    content: '🏆';
    position: absolute;
    top: -8px;
    right: 0;
    transform: translateX(50%);
    font-size: 14px;
    opacity: 0.6;
    z-index: 1;
    animation: goalBounce 2s ease-in-out infinite;
}

.simple-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #10b981, #059669, #047857);
    border-radius: 12px;
    transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-width: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    animation: progressPulse 3s ease-in-out infinite;
    overflow: hidden;
}

/* Animated shimmer effect */
.simple-progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: shimmer 2.5s infinite;
}

/* Sparkle effect for progress */
.simple-progress-fill::after {
    content: '✨';
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: 12px;
    animation: sparkle 1.5s ease-in-out infinite;
    opacity: 0.8;
}

/* Progress level based styling */
.metric.high .simple-progress-fill {
    background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
    animation: progressPulse 2s ease-in-out infinite;
}

.metric.high .simple-progress-fill::after {
    content: '🔥';
    animation: fire 1s ease-in-out infinite;
}

.metric.completed .simple-progress-bar {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
    animation: completedGlow 2s ease-in-out infinite;
}

.metric.completed .simple-progress-fill {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.6);
    animation: celebrationPulse 1.5s ease-in-out infinite;
}

.metric.completed .simple-progress-fill::after {
    content: '🎉';
    animation: celebration 1s ease-in-out infinite;
    font-size: 16px;
    right: -10px;
    top: -8px;
}

/* Celebration animations */
@keyframes progressPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.9; 
        transform: scale(1.01);
    }
}

@keyframes celebrationPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(139, 92, 246, 0.6);
    }
    50% { 
        opacity: 0.95; 
        transform: scale(1.02);
        box-shadow: 0 6px 25px rgba(139, 92, 246, 0.8);
    }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes sparkle {
    0%, 100% { 
        opacity: 0.8; 
        transform: translateY(0) scale(1);
    }
    50% { 
        opacity: 1; 
        transform: translateY(-2px) scale(1.2);
    }
}

@keyframes fire {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    25% { 
        transform: translateY(-1px) scale(1.1);
        opacity: 1;
    }
    75% { 
        transform: translateY(-2px) scale(0.9);
        opacity: 0.9;
    }
}

@keyframes celebration {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    25% { 
        transform: translateY(-3px) rotate(5deg) scale(1.2);
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-1px) rotate(-5deg) scale(1.1);
        opacity: 1;
    }
    75% { 
        transform: translateY(-2px) rotate(3deg) scale(1.15);
        opacity: 0.95;
    }
}

@keyframes goalBounce {
    0%, 100% { 
        transform: translateX(50%) translateY(0);
        opacity: 0.6;
    }
    50% { 
        transform: translateX(50%) translateY(-2px);
        opacity: 0.8;
    }
}

@keyframes completedGlow {
    0%, 100% { 
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    50% { 
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(245, 158, 11, 0.3);
    }
}

/* Progress component clickable avatar hover effects */
.progress-podium-avatar[style*="pointer"],
.progress-ranking-avatar[style*="pointer"] {
    transition: all 0.2s ease;
}

.progress-podium-avatar[style*="pointer"]:hover,
.progress-ranking-avatar[style*="pointer"]:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid #3b82f6 !important;
}

.progress-podium-first[style*="pointer"]:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.progress-avatar-fallback[style*="pointer"]:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid #3b82f6 !important;
}

/* Goal Achievement Calendar Styles for Progress Page */
.goal-achievement-calendar {
    margin: 2rem 0;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.goal-achievement-calendar h3 {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mgac-calendar-container {
    margin-bottom: 1rem;
}

.mgac-calendar-grid {
    max-width: 100%;
    margin: 0 auto;
}

.mgac-calendar-header {
    text-align: center;
    margin-bottom: 24px;
}

.mgac-calendar-header h6 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    margin: 0;
}

.mgac-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 8px;
    gap: 8px;
    margin-bottom: 20px;
}

.mgac-weekday {
    text-align: center;
    font-weight: 600;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.875rem;
    padding: 8px 4px;
}

.mgac-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 8px;
    gap: 8px;
}

.mgac-calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 45px;
}

.mgac-calendar-day.empty {
    border: none;
    background: transparent;
    cursor: default;
}

.mgac-calendar-day.no-data {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.mgac-calendar-day.missed {
    background: #fef3c7;
    border-color: #f59e0b;
}

.mgac-calendar-day.achieved {
    background: #dcfce7;
    border-color: #22c55e;
}

.mgac-calendar-day.today {
    box-shadow: 0 0 0 2px #3b82f6;
    font-weight: 700;
}

.mgac-calendar-day:hover:not(.empty) {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mgac-calendar-day .day-number {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    line-height: 1;
}

.mgac-calendar-day .day-emoji {
    font-size: 0.75rem;
    margin-top: 2px;
}

.mgac-calendar-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.mgac-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
}

.mgac-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid #e2e8f0;
}

.mgac-legend-color.achieved {
    background: #dcfce7;
    border-color: #22c55e;
}

.mgac-legend-color.missed {
    background: #fef3c7;
    border-color: #f59e0b;
}

.mgac-legend-color.no-data {
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* Goal Achievement Chart Styles for Progress Page */
.goal-achievement-chart {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.goal-achievement-chart h3 {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.goal-achievement-chart .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.goal-achievement-chart .chart-header .period-selector {
    margin: 0;
}

.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
}

.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    font-size: 1rem;
}

.no-achievement-data {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
}

.no-data-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-achievement-data p {
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* Period Selector Styles for Progress Page */
.period-selector {
    display: flex;
    gap: 8px;
    background: #f8fafc;
    background: var(--color-neutral-50, #f8fafc);
    border-radius: 8px;
    padding: 4px;
}

.period-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.period-btn.active {
    background: white;
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.period-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
}

/* Progress Page Rankings Tab Spacing Fix */
/* Reduce spacing between leaderboard tabs and filter tabs */
.shared-tabs + .shared-tabs.leaderboard-filter-tabs {
    margin-top: -1rem;
}
/* Groups Container - uses shared page-container */
.groups {
    /* Container styles handled by shared page-container class */
}

.groups-header {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid #f0f0f0;
    text-align: center;
}

.groups-header h1 {
    color: #1a1a1a;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.groups-header p {
    color: #6b7280;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 800px;
}


.groups-content {
    background: transparent;
    border-radius: 12px;
    padding: 24px;
    box-shadow: none;
    border: none;
}

.groups-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.groups-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.create-group-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

.create-group-btn:hover {
    background: #3730a3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
}

.btn-icon {
    font-size: 18px;
}

.btn-text {
    font-weight: 500;
}

/* Create Group Tab Section */
.create-group-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Ensure shared form components work in groups context */
.groups-content .shared-form-container {
    max-width: none;
    margin: 0;
    padding: 0;
}

.groups-content .shared-form {
    margin: 0;
}

.location-fields {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.location-fields h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
}

/* Photo Upload Section */
.photo-upload-section {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.photo-upload-section h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
}

.file-upload-area {
    min-height: 120px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.upload-label {
    display: block;
    height: 100%;
    min-height: 120px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-label:hover {
    background: #f8f9fa;
    border-color: #3498db;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.upload-placeholder.banner-placeholder {
    min-height: 120px;
    width: 100%;
    text-align: center;
}

.upload-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
    text-align: center;
}

.upload-placeholder span:not(.upload-icon) {
    font-weight: 500;
    margin-bottom: 4px;
    display: block;
    text-align: center;
    width: 100%;
}

.upload-placeholder small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    display: block;
    text-align: center;
    width: 100%;
}

.image-preview {
    position: relative;
    width: 100%;
    height: 120px;
}

.image-preview.banner-preview {
    height: 120px;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.remove-image {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.remove-image:hover {
    background: rgba(220, 53, 69, 0.8);
}

/* Friend Invite Section */
.invite-friends-section {
    margin-top: 20px;
    padding: 20px;
    background: transparent;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.groups-content .create-group-section .invite-friends-section h4,
.create-group-section .invite-friends-section h4 {
    margin: 0 0 8px 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.groups-content .create-group-section .section-description,
.create-group-section .section-description {
    margin: 0 0 15px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.search-container {
    position: relative;
}

.search-loading {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    /* animation: spin 1s linear infinite; */
}

@keyframes spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

.search-results {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: white;
    margin-top: 8px;
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f8f9fa;
    transition: background 0.3s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #f8f9fa;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-details .username {
    font-weight: 500;
    color: #2c3e50;
    font-size: 14px;
}

.user-details .bio {
    color: #6c757d;
    font-size: 12px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-friend-btn {
    background: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.add-friend-btn:hover {
    background: #218838;
}

.selected-friends {
    margin-top: 15px;
}

.selected-friends label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #2c3e50;
}

.selected-friends-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-friend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 6px 12px 6px 6px;
    font-size: 14px;
}

.selected-friend-item .user-avatar {
    width: 24px;
    height: 24px;
}

.selected-friend-item .username {
    font-weight: 500;
    color: #2c3e50;
}

.remove-friend-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.remove-friend-btn:hover {
    background: rgba(220, 53, 69, 0.1);
}

.create-group-form {
    max-width: none;
}

.groups-content .create-group-section .create-group-form h3,
.create-group-section h3 {
    color: #ffffff !important;
    margin-bottom: 25px !important;
    font-size: 24px !important;
    text-align: center !important;
    border-bottom: 2px solid #3498db !important;
    padding-bottom: 10px !important;
}

/* Ensure form rows in create group form have consistent alignment */
.create-group-form .form-row {
    align-items: start;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
}

.form-row.triple {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-group {
    margin-bottom: 20px;
}

.groups-content .create-group-section .form-group label,
.create-group-section .form-group label,
.groups-content .form-group label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-group input[type="text"],
.form-group input[type="number"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

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

.form-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.form-actions .btn {
    min-width: 120px;
    padding: 12px 24px; /* Slightly larger padding for better visual balance */
}

    .group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .group-type {
        align-self: flex-start;
    }
    
    .group-meta {
        gap: 8px;
    }
    
    .group-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    /* Legacy button styles removed - now using unified design system */

/* Use unified design system button styles instead of custom styling */

/* Groups Tabs */
/* Removed old tab styles - now using shared tab system */

/* Filters Container */
.groups-filters-container {
    margin-bottom: 30px;
}

/* Search Toggle Button - More specific selectors */
.groups-content .groups-filters-container .search-toggle-btn,
.discover-section .search-toggle-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background: white !important;
    color: #4a5568 !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-bottom: 0 !important;
}

.groups-content .groups-filters-container .search-toggle-btn:hover,
.discover-section .search-toggle-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    background: #f7fafc !important;
}

.search-toggle-btn .toggle-icon {
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
}

.search-toggle-btn .toggle-icon.expanded {
    transform: rotate(0deg);
}

/* Filters */
.groups-filters {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    margin-top: 15px;
    transition: all 0.3s ease;
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
}

.groups-filters.collapsed {
    max-height: 0;
    padding: 0 20px;
    margin-top: 0;
    opacity: 0;
    border-color: transparent;
}

.filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    gap: 10px;
    align-items: end;
}

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

.filter-group label {
    margin-bottom: 5px;
    font-weight: 500;
    color: #495057;
    font-size: 14px;
}

.filter-group input,
.filter-group select {
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    background: white;
}

.clear-filters-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    height: -webkit-fit-content;
    height: fit-content;
    transition: background 0.3s ease;
}

.clear-filters-btn:hover {
    background: #5a6268;
}

/* Groups Grid */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 25px;
    gap: 25px;
    margin-bottom: 30px;
}

/* Desktop: Force exactly 2 cards per row at 50% width each */
@media (min-width: 769px) {
    .groups-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.group-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensure banner doesn't overflow rounded corners */
}

.group-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #cbd5e0;
}

.group-card.clickable {
    cursor: pointer;
}

.group-card.clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    border-color: #4f46e5;
}

/* Group Card Banner */
.group-card-banner {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 12px 12px 0 0;
}

.group-card-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 100%
    );
    pointer-events: none;
}

/* Group Card Content Container */
.group-card-content {
    padding: 20px;
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.group-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1;
}

.group-card-icon {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
}

.group-card-icon-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    font-weight: 700;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
}

.group-header-info {
    flex: 1 1;
    min-width: 0; /* Allows text to truncate */
}

/* Group name styling - override theme inheritance */
.group-name {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    flex: 1 1;
    /* Force dark text for readability on light backgrounds */
    color: #1e293b;
}

/* Ensure group names are always dark for light theme readability */
.groups-container .group-card .group-name {
    color: #1e293b;
}

/* Override dark mode inheritance for better readability */
[data-theme="dark"] .groups-container .group-card .group-name {
    color: #1e293b;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .groups-container .group-card .group-name {
        color: #1e293b;
    }
}

.group-type {
    background: #3498db;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
}

.group-type.genre {
    background: #F2F5F9;
    color: #333333;
}

.group-type.location {
    background: #F2F5F9;
    color: #333333;
}

.group-type.challenge {
    background: #F2F5F9;
    color: #333333;
}

.group-type.writing_circle {
    background: #F2F5F9;
    color: #333333;
}

.group-type.critique_group {
    background: #F2F5F9;
    color: #333333;
}

.group-type.accountability {
    background: #F2F5F9;
    color: #333333;
}

.group-description {
    color: #6c757d;
    margin-bottom: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #6c757d;
}

.group-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.group-category {
    background: #e3f2fd !important;
    border-color: #bbdefb !important;
    color: #1976d2 !important;
}

.group-location {
    background: #fff3e0 !important;
    border-color: #ffcc02 !important;
    color: #f57c00 !important;
}

.group-members {
    background: #e8f5e8 !important;
    border-color: #c8e6c9 !important;
    color: #388e3c !important;
}

.group-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.group-creator {
    color: #6c757d;
    font-size: 14px;
    font-style: italic;
}

.group-actions {
    display: flex;
    gap: 10px;
}

.join-btn,
.view-btn,
.edit-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 80px;
}

.join-btn {
    background: #28a745;
    color: white;
}

.join-btn:hover {
    background: #218838;
    transform: translateY(-1px);
}

.join-btn.leave {
    background: #dc3545;
}

.join-btn.leave:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.view-btn {
    background: #6c757d;
    color: white;
}

.view-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.edit-btn {
    background: #17a2b8;
    color: white;
}

.edit-btn:hover {
    background: #138496;
    transform: translateY(-1px);
}

/* Edit Modal Styles */
.edit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.edit-modal {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.edit-modal h3 {
    color: #2c3e50;
    margin-bottom: 25px;
    font-size: 24px;
    text-align: center;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

/* Loading and Empty States */
.groups-loading {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
    font-size: 18px;
}

.no-groups {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.no-groups h3 {
    color: #495057;
    margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .groups-container {
        padding: 15px;
    }
    
    .groups-header {
        display: none;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .form-row.triple {
        grid-template-columns: 1fr;
    }
    
    .groups-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .filters-row {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Search & Filter Groups responsive styles */
    .search-toggle-btn {
        padding: 12px 16px;
        font-size: 14px;
        gap: 8px;
    }
    
    .search-toggle-btn .toggle-icon {
        width: 18px;
        height: 18px;
    }
    
    .groups-filters-container {
        margin-bottom: 20px;
    }
    
    .groups-filters {
        padding: 15px;
        border-radius: 8px;
    }
    
    .groups-filters.collapsed {
        padding: 0 15px;
    }
    
    .filter-group {
        margin-bottom: 12px;
    }
    
    .filter-group:last-child {
        margin-bottom: 0;
    }
    
    .filter-group label {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .filter-group input,
    .filter-group select {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    /* Removed old mobile tab styles - now using shared tab system */
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    /* Mobile banner styling */
    .group-card-banner {
        height: 100px;
    }
    
    .group-card-content {
        padding: 15px;
    }
    
    .group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .group-type {
        align-self: flex-start;
    }
    
    .group-meta {
        gap: 8px;
    }
    
    .group-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Group badges container */
.group-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Privacy badge */
.privacy-badge {
    background: #6b7280;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Membership badge */
.membership-badge {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
} 

/* Visibility badges */
.visibility-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.visibility-badge.private {
    background: #ef4444;
    color: white;
}

.visibility-badge.semi-public {
    background: #f59e0b;
    color: white;
}

.visibility-badge.public {
    background: #10b981;
    color: white;
}

.non-clickable-badge {
    background: #6b7280;
    color: white;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
}

/* Non-clickable card styling */
.group-card.non-clickable {
    cursor: default;
    opacity: 0.8;
    position: relative;
}

.group-card.non-clickable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    pointer-events: none;
}

.group-card.non-clickable:hover {
    transform: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Form help text */
.form-help-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
    font-style: italic;
} 
.group-detail-container {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px;
    background: #f8fafc;
    min-height: 100vh;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* Back Button Section */
.group-detail-back-section {
    margin-bottom: 16px;
}

.group-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.group-back-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.group-back-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.group-back-btn span {
    font-weight: 500;
}

/* Loading and Error States */
.group-detail-loading,
.group-detail-error {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.group-detail-error h2 {
    color: #1e293b;
    margin-bottom: 10px;
}

/* Header */
.group-detail-header {
    background: var(--surface-color);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-light);
    margin-bottom: 24px;
}

.back-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

.back-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.group-info {
    margin-bottom: 20px;
}

.group-main-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.group-title {
    color: #1e293b;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}

/* Force location group type badge to use light gray color with high specificity */
.group-detail-container .group-type-badge.location,
.group-header-content .group-type-badge.location {
    background: #F2F5F9 !important;
    color: #333333 !important;
}

.group-type-badge {
    background: #F2F5F9;
    color: #333333;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
}

.group-type-badge.genre { background: #F2F5F9; color: #333333; }
.group-type-badge.location { background: #F2F5F9; color: #333333; }
.group-type-badge.challenge { background: #F2F5F9; color: #333333; }
.group-type-badge.writing_circle { background: #F2F5F9; color: #333333; }
.group-type-badge.critique_group { background: #F2F5F9; color: #333333; }
.group-type-badge.accountability { background: #F2F5F9; color: #333333; }

.group-description {
    color: #475569;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 16px;
    margin-bottom: 4px;
}

.group-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 14px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 20px;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.group-actions {
    display: flex;
    gap: 15px;
}

.join-leave-btn,
.create-post-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.join-leave-btn.join {
    background: #28a745;
    color: white;
}

.join-leave-btn.join:hover {
    background: #218838;
    transform: translateY(-1px);
}

.join-leave-btn.leave {
    background: #dc3545;
    color: white;
}

.join-leave-btn.leave:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.create-post-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.create-post-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

/* Create Post Form */
.create-post-form {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin: 0 16px 24px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.create-post-form h3 {
    color: #1e293b;
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.create-post-form .form-group {
    margin-bottom: 15px;
}

.create-post-form input,
.create-post-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    background: white;
    box-sizing: border-box;
    font-family: inherit;
}

.create-post-form input:focus,
.create-post-form textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

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

.form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px 0 rgba(60,72,88,0.07);
    transition: all 0.2s ease;
}

.cancel-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid var(--color-primary-600);
    border-radius: 8px;
    background: var(--color-primary-500);
    color: white;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px 0 rgba(60,72,88,0.07);
    transition: all 0.2s ease;
}

.submit-btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #4338ca;
    color: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.submit-btn:disabled {
    background: #f9fafb;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transform: none;
}

/* Tabs */
.group-tabs {
    display: flex;
    gap: 0;
    margin-top: 8px;
    margin-bottom: 20px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.tab {
    background: white;
    border: none;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    color: #64748b;
    transition: all 0.3s ease;
    flex: 1 1;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tab:last-child {
    border-right: none;
}

.tab:hover {
    background: #f8fafc;
    color: #4f46e5;
}

.tab.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.tab-icon {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
}

.tab-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    display: block;
}

/* Content */
.group-content {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

/* Posts Section */
.posts-section {
    padding: 0;
}

.posts-list {
    display: flex;
    flex-direction: column;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 24px !important;
}

.post-card {
    padding: 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s ease;
}

.post-card:last-child {
    border-bottom: none;
}

.post-card:hover {
    background: #f8fafc;
}

.post-header {
    margin-bottom: 15px;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.author-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.post-date {
    color: #64748b;
    font-size: 12px;
}

.post-content {
    margin-bottom: 15px;
}

.post-title {
    color: #1e293b;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.post-body {
    color: #475569;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.post-actions {
    display: flex;
    gap: 15px;
}

.post-action-btn {
    background: none;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.post-action-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #4f46e5;
}

.no-posts {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.no-posts h3 {
    color: #1e293b;
    margin-bottom: 10px;
}

.create-first-post-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.create-first-post-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

/* Members Section */
.members-section {
    padding: 20px;
}

.members-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 15px;
    gap: 15px;
}

.member-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.member-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.member-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.member-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 16px;
}

.member-role {
    color: #4f46e5;
    font-size: 14px;
    font-weight: 500;
}

.member-joined {
    color: #64748b;
    font-size: 12px;
}

/* Admin Controls */
.admin-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.admin-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.admin-btn.settings-btn {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.admin-btn.invite-btn {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 20px;
}

.modal-content .form-group {
    margin-bottom: 16px;
}

.modal-content label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #555;
}

.modal-content input,
.modal-content textarea,
.modal-content select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus {
    outline: none;
    border-color: #667eea;
}

.form-divider {
    text-align: center;
    margin: 16px 0;
    color: #666;
    font-weight: 500;
    position: relative;
}

.form-divider::before,
.form-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #ddd;
}

.form-divider::before {
    left: 0;
}

.form-divider::after {
    right: 0;
}

/* Post Menu */
.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

/* Post Menu */
.post-menu {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    flex-shrink: 0;
    z-index: 10;
}

.menu-trigger {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-trigger:hover {
    background: #f1f5f9;
    color: #475569;
}

.menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 140px;
    overflow: hidden;
}

.menu-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}

.menu-dropdown button:last-child {
    border-bottom: none;
}

.menu-dropdown button:hover {
    background: #f8fafc;
    color: #0f172a;
}

.menu-dropdown button.delete-option {
    color: #dc2626;
}

.menu-dropdown button.delete-option:hover {
    background: #fef2f2;
    color: #b91c1c;
}

/* Edit Post Form */
.edit-post-form {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 2px solid #e1e5e9;
}

.edit-post-form .form-group {
    margin-bottom: 12px;
}

.edit-post-form input,
.edit-post-form textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.edit-post-form .form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.edit-post-form .cancel-btn,
.edit-post-form .submit-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.edit-post-form .cancel-btn {
    background: #f5f5f5;
    color: #666;
}

.edit-post-form .submit-btn {
    background: #4CAF50;
    color: white;
}

.edit-post-form .cancel-btn:hover {
    background: #e0e0e0;
}

.edit-post-form .submit-btn:hover {
    background: #45a049;
}

/* Member Actions */
.member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.member-card:hover {
    border-color: #c3c8d4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.member-actions {
    margin-left: auto;
}

.remove-member-btn {
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.remove-member-btn:hover {
    background: rgba(244, 67, 54, 0.1);
}

/* Location Settings Section */
.location-settings-section {
    margin-top: 25px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.location-settings-section h4 {
    color: #1e293b;
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-settings-section h4::before {
    content: "📍";
    font-size: 18px;
}

.location-help-text {
    color: #374151;
    font-size: 14px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.location-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    gap: 15px;
}

.location-fields .form-group:last-child {
    grid-column: 1 / -1;
}

.location-fields input {
    background: white;
    border: 2px solid #e2e8f0;
}

.location-fields input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Mobile responsive for location fields */
@media (max-width: 768px) {
    .location-fields {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .location-fields .form-group:last-child {
        margin-bottom: 0;
    }
    
    /* Mobile styles for back button */
    .group-back-btn {
        padding: 8px 14px;
        font-size: 13px;
        gap: 6px;
    }
    
    .group-back-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Mobile styles for group title section and gear button */
    .group-title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .group-icon-and-title {
        width: 100%;
        gap: 12px;
    }
    
    .group-settings-gear {
        align-self: flex-end;
        padding: 6px;
        margin-left: 0;
        margin-top: -8px;
    }
    
    .groupThe post -settings-gear svg {
        width: 18px;
        height: 18px;
    }

    .image-upload-area {
        flex-direction: column;
        gap: 10px;
    }
    
    .current-banner-preview {
        width: 100%;
        max-width: 250px;
    }
    
    .banner-placeholder {
        width: 100%;
        max-width: 250px;
    }
}

/* Group Images Settings Section */
.images-settings-section {
    margin-top: 25px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.images-settings-section h4 {
    color: #1e293b;
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.images-settings-section h4::before {
    content: "🖼️";
    font-size: 18px;
}

.images-help-text {
    color: #374151;
    font-size: 14px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.image-upload-section {
    margin-bottom: 25px;
    padding: 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.image-upload-section h5 {
    color: #1e293b;
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: 600;
}

.image-description {
    color: #374151;
    font-size: 12px;
    margin: 0 0 15px 0;
}

.image-upload-area {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.current-image {
    flex-shrink: 0;
}

.current-icon-preview {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
}

.current-banner-preview {
    width: 200px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
}

.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 2px dashed #cbd5e0;
    border-radius: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.icon-placeholder {
    width: 80px;
    height: 80px;
}

.banner-placeholder {
    width: 200px;
    height: 50px;
}

.upload-controls {
    flex: 1 1;
}

.upload-btn {
    display: inline-block;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.upload-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.preview-section {
    margin-top: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.image-preview {
    border-radius: 6px;
    margin-bottom: 10px;
    border: 2px solid #e2e8f0;
}

.icon-preview {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.banner-preview {
    width: 100%;
    max-width: 300px;
    height: 75px;
    object-fit: cover;
}

.upload-confirm-btn {
    background: #059669;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.upload-confirm-btn:hover:not(:disabled) {
    background: #047857;
}

.upload-confirm-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Updated Group Header Styles */
.group-banner-wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}

.group-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.group-header-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
    background: var(--surface-color);
    border-radius: 0 0 12px 12px;
}

.group-title-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 20px;
}

.group-icon-and-title {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1;
}

.group-icon {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.group-icon-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: 700;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.group-title-info {
    flex: 1 1;
}

.group-badges {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

.privacy-badge {
    background: #ffffff;
    background: var(--surface-color, #ffffff);
    color: #6b7280;
    border: 1px solid #d1d5db;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.privacy-badge svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
}

/* When there's no banner, use full border radius */
.group-detail-container > .group-detail-header:first-child {
    border-radius: 12px;
}

/* When there's no banner, use full border radius for content */
.group-detail-container > .group-detail-header:first-child .group-header-content {
    border-radius: 12px;
}

/* Dark theme adjustments for group header */
[data-theme="dark"] .group-header-content {
    background: var(--surface-color);
    color: var(--text-color);
}

[data-theme="dark"] .privacy-badge {
    background: #374151;
    background: var(--surface-color, #374151);
    color: #9ca3af;
    border-color: #4b5563;
}

/* Dark theme styles for back button */
[data-theme="dark"] .group-back-btn {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .group-back-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
    color: var(--text-color);
}

/* Goals Section Styles */
.goals-section {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.goals-header {
    text-align: center;
    margin-bottom: 32px;
}

.goals-header h3 {
    color: var(--color-primary-600);
    margin-bottom: 8px;
    font-size: 1.5rem;
}

.goals-header p {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.current-goals {
    background: var(--color-background-alt);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.goals-status {
    margin-bottom: 24px;
    text-align: center;
}

.status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.status-badge.enabled {
    background: var(--color-success-50);
    color: var(--color-success-700);
}

.status-badge.disabled {
    background: var(--color-warning-50);
    color: var(--color-warning-700);
}

.goals-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
    margin-bottom: 24px;
}

.goal-category h4 {
    color: var(--color-text-primary);
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.goal-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.goal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-neutral-50);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.goal-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.goal-value {
    color: var(--color-text-primary);
    font-weight: 600;
}

.goals-actions {
    text-align: center;
}

.edit-goals-btn,
.create-goals-btn {
    background: var(--color-primary-600);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-goals-btn:hover,
.create-goals-btn:hover {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.no-goals {
    text-align: center;
    padding: 48px 24px;
}

.no-goals h4 {
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.no-goals p {
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

/* Goals Modal Styles */
.goals-modal {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.goals-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section h4 {
    color: var(--color-text-primary);
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.checkbox-group {
    margin-bottom: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.checkbox-text {
    color: var(--color-text-primary);
}

.goal-inputs {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    gap: 16px;
}

.goal-inputs .form-group {
    margin-bottom: 0;
}

/* Leaderboard Section Styles */
.leaderboard-section {
    padding: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.leaderboard-header h3 {
    color: var(--color-primary-600);
    font-size: 1.5rem;
    margin: 0;
}

.period-selector {
    display: flex;
    gap: 8px;
    background: var(--color-neutral-50);
    border-radius: 8px;
    padding: 4px;
}

.period-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.period-btn.active {
    background: var(--color-primary-600);
    color: white;
}

.period-btn:hover:not(.active) {
    background: var(--color-neutral-100);
    color: var(--color-text-primary);
}

.period-goals {
    background: var(--color-background-alt);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--color-border);
}

.goal-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.goal-info .goal-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.goal-values {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.goal-info .goal-value {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    padding: 4px 12px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.9rem;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.leaderboard-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: #f1f3f4;
}

.leaderboard-item.current-user {
    border-color: var(--color-primary-600);
    background: #e3f2fd;
}

.leaderboard-item.top-three {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.leaderboard-item .rank {
    font-size: 2.5rem;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
    color: var(--color-text-primary);
    line-height: 1;
}

.leaderboard-item .member-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1;
}

/* Avatar positioning between rank and member info */
.leaderboard-item .member-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.leaderboard-item .member-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.leaderboard-item .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leaderboard-item .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-primary-600);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.member-details {
    flex: 1 1;
    min-width: 0; /* Allows text to wrap properly */
}

.member-stats .stat.primary-stat {
    font-weight: 600;
    color: var(--color-primary-600);
    font-size: 1.05rem;
}

.member-stats .stat {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.member-name {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.you-badge {
    color: var(--color-primary-600);
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 8px;
}

.member-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.member-stats .stat {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.progress-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.progress-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    min-width: 60px;
}

.progress-track {
    flex: 1 1;
    height: 6px;
    background: var(--color-neutral-200);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-600) 0%, var(--color-primary-500) 100%);
    transition: width 0.3s ease;
}

.progress-fill.words {
    background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
}

.progress-fill.time {
    background: linear-gradient(90deg, var(--color-success-400), var(--color-success-600));
}

.progress-text {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    min-width: 35px;
    text-align: right;
}

.no-leaderboard {
    text-align: center;
    padding: 48px 24px;
}

.no-leaderboard h4 {
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.no-leaderboard p {
    color: var(--color-text-secondary);
}

/* Dark Theme Overrides for Goals and Leaderboard */
[data-theme="dark"] .goal-item {
    background: var(--color-neutral-800);
}

[data-theme="dark"] .period-selector {
    background: var(--color-neutral-800);
}

[data-theme="dark"] .period-btn:hover:not(.active) {
    background: var(--color-neutral-700);
}

[data-theme="dark"] .progress-track {
    background: var(--color-neutral-700);
}

[data-theme="dark"] .leaderboard-item.top-three {
    background: linear-gradient(135deg, var(--color-neutral-800) 0%, var(--color-neutral-700) 100%);
}

[data-theme="dark"] .leaderboard-item.current-user {
    background: rgba(59, 130, 246, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .goals-display {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .leaderboard-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .period-selector {
        justify-content: center;
    }
    
    .leaderboard-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .leaderboard-item .member-info {
        justify-content: center;
    }
    
    .progress-info {
        min-width: auto;
    }
    
    .member-stats {
        justify-content: center;
    }
    
    .goal-inputs {
        gap: 12px;
    }
}

/* Group Feed Styles */
.group-feed-section {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.feed-header {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
}

.feed-header h3 {
    color: var(--color-primary-600);
    margin-bottom: 8px;
    font-size: 1.5rem;
}

.feed-header p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin-bottom: 16px;
}

.refresh-feed-btn {
    background: var(--color-primary-600);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.refresh-feed-btn:hover:not(:disabled) {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.refresh-feed-btn:disabled {
    background: var(--color-neutral-400);
    cursor: not-allowed;
    transform: none;
}

.feed-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-neutral-200);
    border-top: 3px solid var(--color-primary-600);
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
    margin-bottom: 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.feed-loading p {
    color: var(--color-text-secondary);
    margin: 0;
}

/* Group feed now uses .feed-content from SocialFeed.css for consistency */

.feed-post {
    background: var(--color-background-alt);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.feed-post:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.feed-post .post-header {
    margin-bottom: 16px;
}

.feed-post .author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feed-post .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.feed-post .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-post .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-primary-600);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.feed-post .author-details {
    flex: 1 1;
}

.feed-post .author-name {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    font-size: 1rem;
}

.feed-post .post-date {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.feed-post .post-content {
    margin-bottom: 16px;
}

.feed-post .post-text {
    color: var(--color-text-primary);
    line-height: 1.6;
    margin: 0 0 16px 0;
    font-size: 1rem;
}

.session-info {
    background: var(--color-neutral-50);
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    border-left: 4px solid var(--color-primary-600);
}

.session-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.session-stat {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.location-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.location-icon {
    font-size: 1rem;
}

.post-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.post-tag {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.post-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 12px;
    gap: 12px;
    margin: 16px 0;
}

.post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.feed-post .post-actions {
    display: flex;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.feed-post .post-action-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.feed-post .post-action-btn:hover {
    background: var(--color-neutral-100);
    color: var(--color-text-primary);
}

.no-feed-posts {
    text-align: center;
    padding: 48px 24px;
    background: var(--color-background-alt);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.no-feed-posts h4 {
    color: var(--color-text-primary);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.no-feed-posts p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* Dark Theme Overrides for Group Feed */
[data-theme="dark"] .session-info {
    background: var(--color-neutral-800);
    border-left-color: var(--color-primary-500);
}

[data-theme="dark"] .post-tag {
    background: var(--color-primary-900);
    color: var(--color-primary-300);
}

[data-theme="dark"] .feed-post .post-action-btn:hover {
    background: var(--color-neutral-700);
}

[data-theme="dark"] .loading-spinner {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%2360a5fa\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"/></svg>");
}

/* Responsive Design for Group Feed */
@media (max-width: 768px) {
    .group-feed-section {
        padding: 16px;
    }
    
    .feed-post {
        padding: 16px;
    }
    
    .session-details {
        gap: 12px;
    }
    
    .post-images {
        grid-template-columns: 1fr;
    }
    
    .feed-post .post-actions {
        gap: 12px;
    }
    
    .feed-post .author-avatar {
        width: 40px;
        height: 40px;
    }
    
    .feed-post .avatar-placeholder {
        font-size: 1rem;
    }
}

/* Goals Toggle Switch Styles */
.goals-toggle-section {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--color-background-alt);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
}

.toggle-text {
    color: var(--color-text-primary);
    font-size: 1rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-neutral-300);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary-500);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.6;
    cursor: not-allowed;
}

.toggle-status {
    display: flex;
    align-items: center;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge.enabled {
    background: var(--color-success-100);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-200);
}

.status-badge.disabled {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    border: 1px solid var(--color-neutral-200);
}

/* Goals configuration modal */
.goals-config-modal {
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-description {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 24px 0;
    padding: 12px 16px;
    background: var(--color-background-alt);
    border-radius: 8px;
    border-left: 3px solid var(--color-primary-500);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}



/* Responsive design for goals config modal */
@media (max-width: 768px) {
    .goals-config-modal {
        width: 95%;
        max-height: 95vh;
        margin: 2.5vh auto;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions button {
        width: 100%;
    }
}

/* Goals Settings Section */
.goals-settings-section {
    margin-top: 25px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.goals-settings-section h4 {
    color: #1e293b;
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.goals-help-text {
    color: #374151;
    font-size: 14px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.goals-edit-form p {
    color: #374151;
    font-size: 14px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Goals Configuration Styles */
.goals-configuration {
    margin-top: 24px;
}

/* Goal Accordion Styles */
.goal-accordion {
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-background);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-background);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.accordion-header:hover {
    background: var(--color-background-alt);
}

.accordion-header.expanded {
    background: var(--color-primary-50);
    border-bottom-color: var(--color-primary-200);
}

.accordion-header h4 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.accordion-arrow {
    color: var(--color-text-secondary);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.accordion-content {
    padding: 20px;
    background: var(--color-background-alt);
}

.goal-inputs {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
}

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

.form-group label {
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.save-goals-btn {
    background: var(--color-primary-600);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.save-goals-btn:hover {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.save-goals-btn:disabled {
    background: var(--color-neutral-300);
    cursor: not-allowed;
    transform: none;
}

/* Goals Toggle Styles */
.goals-toggle-section {
    margin-bottom: 24px;
}

.toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--color-background-alt);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.toggle-text {
    color: var(--color-text-primary);
    font-weight: 500;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-neutral-300);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--color-primary-500);
}

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid;
}

.status-badge.enabled {
    background: var(--color-success-50);
    color: var(--color-success-700);
    border-color: var(--color-success-200);
}

.status-badge.disabled {
    background: var(--color-neutral-50);
    color: var(--color-neutral-700);
    border-color: var(--color-neutral-200);
}

/* Settings link button in goals header */
.goals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.settings-link-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-link-btn:hover {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

/* Enable goals button in disabled state */
.enable-goals-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.enable-goals-btn:hover {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

/* No goals message styling */
.no-goals-message {
    text-align: center;
    padding: 48px 24px;
    background: var(--color-background-alt);
    border-radius: 12px;
    border: 2px dashed var(--color-border);
}

.no-goals-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.no-goals-message h4 {
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
    font-size: 1.25rem;
}

.no-goals-message p {
    color: var(--color-text-secondary);
    margin: 0 0 16px 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* Goals summary styling */
.goals-summary {
    background: var(--color-background-alt);
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
}

.goals-summary h4 {
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.goal-inputs {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
}

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

.form-group label {
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.goals-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.cancel-goals-btn {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    border: 1px solid var(--color-neutral-300);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-goals-btn:hover {
    background: var(--color-neutral-200);
}

.save-goals-btn {
    background: var(--color-primary-600);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.save-goals-btn:hover {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.save-goals-btn:disabled {
    background: var(--color-neutral-300);
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .toggle-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .goal-items {
        grid-template-columns: 1fr;
    }
    
    .goal-inputs {
        grid-template-columns: 1fr;
    }
    
    .goals-form-actions {
        flex-direction: column;
    }
    
    .goal-inputs {
        gap: 12px;
    }
}

/* Group Progress Section Styles */
.group-progress-section {
    margin-top: 24px;
    padding: 20px;
    background: var(--color-background-alt);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.progress-header h4 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-loading {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-style: italic;
}

.progress-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.progress-period {
    background: var(--color-background);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--color-border);
}

.progress-period h5 {
    margin: 0 0 16px 0;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.progress-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-label span:first-child {
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.progress-numbers {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-neutral-200);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-fill.words {
    background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
}

.progress-fill.time {
    background: linear-gradient(90deg, var(--color-success-400), var(--color-success-600));
}

/* Streaks Section Styles */
.streaks-section {
    background: var(--color-background);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--color-border);
}

.streaks-section h5 {
    margin: 0 0 16px 0;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.streaks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    max-width: 100%;
    width: 100%;
}

.streak-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.streak-item:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Goal Achievement Calendar */
.goal-achievement-calendar {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.goal-achievement-calendar h5 {
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.mgac-calendar-container {
    margin-bottom: 16px;
}

.mgac-calendar-grid {
    max-width: 500px;
    margin: 0 auto;
}

.mgac-calendar-header {
    text-align: center;
    margin-bottom: 24px;
}

.mgac-calendar-header h6 {
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.mgac-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 8px;
    gap: 8px;
    margin-bottom: 20px;
}

.mgac-weekday {
    padding: 8px 4px;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: #6b7280;
    background: #f8fafc;
    border-radius: 4px;
}

.mgac-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 2px;
    gap: 2px;
}

.mgac-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: default;
    transition: all 0.2s ease;
    position: relative;
}

.mgac-calendar-day.empty {
    visibility: hidden;
}

.mgac-calendar-day.no-data {
    background: #f3f4f6;
    color: #9ca3af;
}

.mgac-calendar-day.missed {
    background: #ef4444;
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.mgac-calendar-day.achieved {
    background: #10b981;
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.mgac-calendar-day.today {
    border: 2px solid #3b82f6;
    font-weight: 700;
}

.mgac-calendar-day.achieved.today {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px #3b82f6, 0 2px 4px rgba(16, 185, 129, 0.3);
}

.mgac-calendar-day.missed.today {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px #3b82f6, 0 2px 4px rgba(239, 68, 68, 0.3);
}

.mgac-calendar-day:hover:not(.empty) {
    transform: scale(1.1);
    z-index: 10;
}

.mgac-calendar-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.mgac-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #374151;
}

.mgac-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.mgac-legend-color.achieved {
    background: #10b981;
}

.mgac-legend-color.missed {
    background: #ef4444;
}

.mgac-legend-color.no-data {
    background: #f3f4f6;
}

.mgac-no-calendar-data {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 40px 20px;
}

/* Responsive Calendar */
@media (max-width: 768px) {
    .goal-achievement-calendar {
        padding: 16px;
    }
    
    .mgac-calendar-grid {
        max-width: 100%;
    }
    
    .mgac-calendar-day {
        font-size: 0.75rem;
    }
    
    .mgac-weekday {
        font-size: 0.75rem;
        padding: 6px 2px;
    }
    
    .mgac-calendar-legend {
        gap: 12px;
    }
    
    .legend-item {
        font-size: 0.75rem;
    }
}

.streak-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-primary-50);
    border-radius: 50%;
}

.streak-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.streak-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
}

.streak-value {
    color: var(--color-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
}

/* Responsive Design for Progress Section */
@media (max-width: 768px) {
    .group-progress-section {
        margin-top: 16px;
        padding: 16px;
    }
    
    .progress-content {
        gap: 16px;
    }
    
    .progress-period {
        padding: 12px;
    }
    
    .progress-bars {
        gap: 12px;
    }
    
    .streaks-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }
    
    .streak-item {
        padding: 10px;
        gap: 10px;
    }
    
    .streak-icon {
        width: 35px;
        height: 35px;
        font-size: 1.3rem;
    }
    
    .streak-value {
        font-size: 1rem;
    }
}

/* Settings Gear Icon */
.group-settings-gear {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-settings-gear:hover {
    background-color: #f1f5f9;
    color: #3b82f6;
    transform: rotate(90deg);
}

.group-settings-gear:active {
    transform: rotate(90deg) scale(0.95);
}

.group-settings-gear svg {
    transition: inherit;
}

/* Header Actions Container */
.group-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Invite Button */
.group-invite-btn {
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

.group-invite-btn:hover {
    background-color: #f1f5f9;
    color: #3b82f6;
}

.group-invite-btn:active {
    transform: scale(0.95);
}

.group-invite-btn svg {
    transition: inherit;
}

.group-invite-btn span {
    font-size: 14px;
}

/* Leave Group Icon */
.group-leave-icon {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-leave-icon:hover {
    background-color: #fee2e2;
    color: #dc2626;
    transform: translateX(2px);
}

.group-leave-icon:active {
    transform: translateX(2px) scale(0.95);
}

.group-leave-icon svg {
    transition: inherit;
}

/* Dark theme support */
[data-theme="dark"] .group-invite-btn {
    color: #94a3b8;
}

[data-theme="dark"] .group-invite-btn:hover {
    background-color: #334155;
    color: #60a5fa;
}

[data-theme="dark"] .group-leave-icon {
    color: #94a3b8;
}

[data-theme="dark"] .group-leave-icon:hover {
    background-color: #450a0a;
    color: #f87171;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .group-header-actions {
        gap: 6px;
    }
    
    .group-invite-btn {
        padding: 6px 10px;
        font-size: 13px;
        gap: 4px;
    }
    
    .group-invite-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .group-settings-gear {
        padding: 6px;
    }
    
    .group-settings-gear svg {
        width: 18px;
        height: 18px;
    }
    
    .group-leave-icon {
        padding: 6px;
    }
    
    .group-leave-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* Message Board Header */
.message-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

/* Search Container */
.search-container {
    flex: 1 1;
    max-width: 300px;
    min-width: 200px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff !important;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

.search-input:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: none !important;
}

.search-input::placeholder {
    color: #9ca3af;
}

.search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: #6b7280;
    z-index: 1;
}

.clear-search-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    transition: all 0.2s ease;
}

.clear-search-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.clear-search-btn-standalone {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.2s ease;
}

.clear-search-btn-standalone:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Search Results Info */
.search-results-info {
    background: #f8fafc;
    color: #64748b;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
    border-left: 3px solid #3b82f6;
}

/* Sort Container */
.sort-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sort-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sort-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}

.sort-buttons {
    display: flex;
    gap: 2px;
    background: #f8fafc;
    border-radius: 6px;
    padding: 2px;
    border: 1px solid #e2e8f0;
}

.sort-btn {
    background: transparent;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2px;
}

.sort-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

.sort-btn.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.sort-btn.active:hover {
    background: #2563eb;
}

.message-board-header .create-post-btn {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 180px;
    justify-content: center;
}

.message-board-header .create-post-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.message-board-header .create-post-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark theme support for message board header */
.dark-theme .message-board-header {
    border-bottom-color: #374151;
}

.dark-theme .search-container .search-input-wrapper .search-input {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

.dark-theme .search-container .search-input-wrapper .search-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: none !important;
}

.dark-theme .search-input::placeholder {
    color: #9ca3af;
}

.dark-theme .search-icon {
    color: #9ca3af;
}

.dark-theme .clear-search-btn:hover {
    background: #4b5563;
    color: #e5e7eb;
}

.dark-theme .search-results-info {
    background: #374151;
    color: #d1d5db;
    border-left-color: #3b82f6;
}

.dark-theme .clear-search-btn-standalone {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

.dark-theme .clear-search-btn-standalone:hover {
    background: #4b5563;
    border-color: #6b7280;
}

/* Dark theme support for the button */
[data-theme="dark"] .message-board-header .create-post-btn {
    background: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .message-board-header .create-post-btn:hover {
    background: #64748b;
}

/* Mobile responsive for message board header */
@media (max-width: 768px) {
    .message-board-header {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .search-container {
        max-width: 100%;
        order: 1;
        min-width: auto;
    }
    
    .sort-container {
        order: 2;
        width: 100%;
        justify-content: center;
    }
    
    .sort-dropdown {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: auto;
    }
    
    .sort-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .sort-btn {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .message-board-header .create-post-btn {
        padding: 12px 16px;
        font-size: 14px;
        order: 3;
        align-self: stretch;
        justify-content: center;
        width: 100%;
        min-width: auto;
    }
    
    .search-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

.dark-theme .clear-search-btn-standalone:hover {
    background: #4b5563;
    border-color: #6b7280;
}

/* Dark theme support for sort dropdown */
.dark-theme .sort-label {
    color: #9ca3af;
}

.dark-theme .sort-buttons {
    background: #374151;
    border-color: #4b5563;
}

.dark-theme .sort-btn {
    color: #d1d5db;
}

.dark-theme .sort-btn:hover {
    background: #4b5563;
    color: #e5e7eb;
}

.dark-theme .sort-btn.active {
    background: #3b82f6;
    color: white;
}

.dark-theme .sort-btn.active:hover {
    background: #2563eb;
}

/* Dark theme support for the button */
[data-theme="dark"] .message-board-header .create-post-btn {
    background: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .message-board-header .create-post-btn:hover {
    background: #64748b;
}

/* Mobile responsive for message board header */
@media (max-width: 768px) {
    .posts-list {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 16px !important;
    }
    
    /* Group feed now uses .feed-content from SocialFeed.css for consistency */
}

.search-container .search-input-wrapper .search-input:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: none !important;
}

/* Comprehensive search input styling - override ALL possible outline sources */
.message-board-header .search-container .search-input-wrapper .search-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff !important;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

.message-board-header .search-container .search-input-wrapper .search-input:focus,
.message-board-header .search-container .search-input-wrapper .search-input:focus-visible,
.message-board-header .search-container .search-input-wrapper .search-input:active {
    outline: none !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: none !important;
    /* Remove webkit focus ring */
    -webkit-focus-ring-color: transparent !important;
    /* Remove any browser accessibility outlines */
    outline-color: transparent !important;
    outline-width: 0 !important;
    outline-style: none !important;
}

/* Also target the wrapper to prevent any inherited outlines */
.message-board-header .search-container .search-input-wrapper {
    position: relative;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.message-board-header .search-container .search-input-wrapper:focus-within {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Comprehensive dark theme search input styling */
.dark-theme .message-board-header .search-container .search-input-wrapper .search-input {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #e5e7eb !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-focus-ring-color: transparent !important;
}

.dark-theme .message-board-header .search-container .search-input-wrapper .search-input:focus,
.dark-theme .message-board-header .search-container .search-input-wrapper .search-input:focus-visible,
.dark-theme .message-board-header .search-container .search-input-wrapper .search-input:active {
    border: 1px solid #3b82f6 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-focus-ring-color: transparent !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
    outline-style: none !important;
}

.dark-theme .message-board-header .search-container .search-input-wrapper .search-input:focus,
.dark-theme .message-board-header .search-container .search-input-wrapper .search-input:focus-within {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Notification Badge */
.notification-badge {
    background: #dc3545;
    color: white;
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 4px;
    min-width: 16px;
    text-align: center;
    display: inline-block;
}

/* Membership Management Section */
.membership-section {
    padding: 24px;
    background: #f8fafc;
    border-radius: 12px;
    margin: 16px;
}

.membership-header {
    margin-bottom: 24px;
}

.membership-header h3 {
    color: #1e293b;
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 600;
}

.membership-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    background: white;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    text-transform: capitalize;
}

/* Pending Applications */
.pending-applications {
    margin-bottom: 32px;
}

.pending-applications h4 {
    color: #1e293b;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
}

.applications-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.application-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.application-header {
    margin-bottom: 16px;
}

.applicant-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.applicant-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.applicant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.applicant-details h5 {
    color: #1e293b;
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.apply-date {
    color: #64748b;
    font-size: 12px;
    margin: 0 0 8px 0;
}

.applicant-bio {
    color: #475569;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.application-message {
    background: #f1f5f9;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 4px solid #3b82f6;
}

.application-message h6 {
    color: #1e293b;
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
}

.application-message p {
    color: #475569;
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}

.application-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.approve-btn,
.reject-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.approve-btn {
    background: #10b981;
    color: white;
}

.approve-btn:hover {
    background: #059669;
    transform: translateY(-1px);
}

.reject-btn {
    background: #ef4444;
    color: white;
}

.reject-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.no-applications {
    text-align: center;
    padding: 32px;
    color: #64748b;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.loading-message {
    text-align: center;
    padding: 32px;
    color: #64748b;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Invite Section */
.invite-section {
    margin-bottom: 32px;
}

.invite-section h4 {
    color: #1e293b;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}

.invite-section p {
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

.invite-form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.invite-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    gap: 16px;
    margin-bottom: 16px;
}

.invite-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.invite-form label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.invite-form input {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.invite-form input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.invite-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invite-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

/* Membership Settings */
.membership-settings {
    margin-bottom: 16px;
}

.membership-settings h4 {
    color: #1e293b;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}

.membership-settings p {
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

.settings-btn {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .membership-info {
        flex-direction: column;
        gap: 12px;
    }
    
    .application-actions {
        flex-direction: column;
    }
    
    .approve-btn,
    .reject-btn {
        width: 100%;
    }
    
    .invite-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* Form help text */
.form-help-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
    font-style: italic;
    line-height: 1.4;
}

/* Semi-public notice */
.semi-public-notice {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.semi-public-notice p {
    margin: 0;
    color: #92400e;
    font-size: 0.9rem;
    font-weight: 500;
}
.visibility-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.visibility-description {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.3;
}

/* Visibility info in membership tab */
.visibility-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.visibility-description {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.3;
}

/* Group feed now uses .feed-content from SocialFeed.css for consistency */

/* Group Feed PostCard specific styling to match main feed */
.group-feed-section .post-card {
    background: #f8fafc !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    transition: all 0.2s;
    position: relative;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.group-feed-section .post-card:hover {
    transform: translateY(-1px) !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.group-feed-section .post-card .project-info .project-name {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.group-feed-section .post-card .session-stats {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 1rem 0 1rem 0 !important;
    padding: 1rem 0 !important;
    border-top: 1px solid #e2e8f0 !important;
}

.group-feed-section .post-card .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    min-width: 70px;
    flex-shrink: 0;
}

/* Mobile responsive for group feed */
@media (max-width: 768px) {
    .group-feed-section .post-card {
        padding: 1rem !important;
        border-radius: 6px !important;
        margin: 0 !important;
    }
    
    .group-feed-section .post-card .session-stats {
        gap: 0.75rem;
        flex-wrap: nowrap;
    }
    
    .group-feed-section .post-card .stat {
        min-width: 55px;
        padding: 0.4rem 0.5rem;
    }
}

/* Goal Achievement Chart Styles */
.goal-achievement-chart {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.goal-achievement-chart h5 {
    color: #1e293b;
    color: var(--color-text-primary, #1e293b);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.goal-achievement-chart .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.goal-achievement-chart .chart-header .period-selector {
    margin: 0;
}

.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
}

.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    font-size: 1rem;
}

.no-achievement-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    text-align: center;
    color: #64748b;
    color: var(--color-text-secondary, #64748b);
    padding: 2rem;
}

.no-data-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.no-achievement-data p {
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* Group Goals Progress Bars */
.group-progress-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.progress-header h4 {
    color: #1e293b;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.progress-loading {
    color: #6b7280;
    font-size: 0.875rem;
    font-style: italic;
}

.progress-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.progress-period {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

.progress-period h5 {
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.progress-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.progress-label span:first-child {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.progress-numbers {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
}

.progress-bar {
    background: #e5e7eb;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
    width: 100%;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    height: 100%;
    border-radius: 6px;
    position: relative;
    transition: width 0.6s ease-in-out;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-fill.words {
    background: linear-gradient(90deg, #10b981, #059669);
}

.progress-fill.time {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

/* Responsive Progress Bars */
@media (max-width: 768px) {
    .progress-content {
        gap: 16px;
    }
    
    .progress-period {
        padding: 12px;
    }
    
    .progress-bars {
        gap: 12px;
    }
    
    .progress-bar {
        height: 8px;
    }
}


/* Events Container - Scoped to avoid global conflicts */
.events-container {
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Events Header - Scoped */
.events-container .events-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.events-container .events-title h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.events-container .events-title p {
    color: #64748b;
    margin: 0;
    font-size: 0.95rem;
}

.events-container .create-event-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #4f46e5;
    background: var(--color-primary-500, #4f46e5);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.events-container .create-event-btn:hover {
    background: #4338ca;
    background: var(--color-primary-600, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.events-container .create-event-btn:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

.events-container .create-event-btn .icon {
    font-size: 1.1rem;
}

/* Events View Toggle - Scoped */
.events-container .events-view-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 8px;
    width: -webkit-fit-content;
    width: fit-content;
}

.events-container .view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.events-container .view-btn:hover {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.5);
}

.events-container .view-btn.active {
    background: white;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.events-container .view-btn .icon {
    font-size: 1rem;
}

/* Loading States - Scoped */
.events-container .events-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #64748b;
}

.events-container .loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #4f46e5;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
    margin-right: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Events List - Scoped */
.events-container .events-list {
    margin-top: 20px;
}

.events-container .no-events {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.events-container .no-events-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    display: block;
    opacity: 0.6;
}

.events-container .no-events h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.events-container .no-events p {
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.events-container .create-first-event-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #4f46e5;
    background: var(--color-primary-500, #4f46e5);
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.events-container .create-first-event-btn:hover {
    background: #4338ca;
    background: var(--color-primary-600, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Events Grid - Scoped */
.events-container .events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-top: 20px;
}

.events-container .event-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

.events-container .event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.events-container .event-card.past-event {
    opacity: 0.7;
}

.events-container .recurring-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.events-container .event-photo {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 3rem;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.events-container .event-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events-container .event-content {
    padding: 20px;
}

.events-container .event-header {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.events-container .event-type-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 2px;
}

.events-container .event-meta {
    flex: 1 1;
}

.events-container .event-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.events-container .event-time {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.9rem;
}

.events-container .event-date {
    font-weight: 500;
}

.events-container .event-time-str {
    opacity: 0.8;
}

.events-container .event-relative {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: auto;
}

.events-container .event-details {
    margin: 16px 0;
}

.events-container .event-description {
    color: #475569;
    line-height: 1.5;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.events-container .event-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.events-container .info-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

.events-container .info-tag.location {
    border-color: #e0e7ff;
    background: #f0f9ff;
    color: #3730a3;
}

.events-container .info-tag.video {
    border-color: #dcfce7;
    background: #f0fdf4;
    color: #166534;
}

.events-container .info-tag .icon {
    font-size: 0.9rem;
}

.events-container .attendance-tag {
    font-size: 0.8rem;
    font-weight: 500;
}

.events-container .recurring-tag {
    color: #059669;
    font-weight: 500;
}

.events-container .event-participants {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.events-container .participant-count {
    color: #475569;
    font-size: 0.9rem;
}

.events-container .participant-count .number {
    font-weight: 600;
    color: #1e293b;
}

.events-container .event-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.events-container .video-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.events-container .video-link-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
    background: linear-gradient(135deg, #047857, #065f46);
}

.events-container .video-link-btn .icon {
    font-size: 1rem;
}

.events-container .rsvp-buttons {
    display: flex;
    gap: 6px;
}

.events-container .rsvp-btn {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.events-container .rsvp-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.events-container .rsvp-btn.attending {
    background: #dcfce7;
    border-color: #16a34a;
    color: #15803d;
}

.events-container .rsvp-btn.maybe {
    background: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}

.events-container .rsvp-btn.declined {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
}

.events-container .rsvp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Design - Scoped */
@media (max-width: 768px) {
    .events-container {
        padding: 16px;
        margin-bottom: 16px;
    }

    .events-container .events-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .events-container .create-event-btn {
        justify-content: center;
    }

    .events-container .events-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .events-container .event-card {
        margin: 0;
    }

    .events-container .event-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .events-container .video-link-btn {
        justify-content: center;
    }
}

/* Event Modal - Scoped to prevent global conflicts */
.event-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.event-modal .event-form {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.events-modal .event-form .form-grid {
    display: grid;
    grid-gap: 24px;
    gap: 24px;
    flex: 1 1;
    padding: 0;
}

.events-modal .event-form .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.events-modal .event-form .form-group label {
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 0.9rem !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.events-modal .event-form .form-group input,
.events-modal .event-form .form-group textarea,
.events-modal .event-form .form-group select {
    padding: 12px 16px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s ease !important;
    background: white !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.events-modal .event-form .form-group input:focus,
.events-modal .event-form .form-group textarea:focus,
.events-modal .event-form .form-group select:focus {
    outline: none !important;
    border-color: #4f46e5 !important;
    border-color: var(--color-primary-500, #4f46e5) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

.events-modal .event-form .form-group textarea {
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}

.events-modal .event-form .form-group.required label::after {
    content: ' *' !important;
    color: #dc2626 !important;
}

.events-modal .file-input {
    /* Styles handled by ImageUpload component */
    margin-top: 4px;
}

.events-modal .photo-preview {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    margin-top: 8px;
}

.events-modal .remove-photo {
    background: #ef4444;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s ease;
}

.events-modal .remove-photo:hover {
    background: #dc2626;
}

.events-modal .recurring-section {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-top: 12px;
    background: #f9fafb;
}

.events-modal .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}

.events-modal .checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.events-modal .recurring-options {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

/* Modal Overlay - Using unique class names to avoid ALL conflicts */
.skryva-event-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    padding: 20px !important;
}

.skryva-event-modal-content {
    background: white !important;
    border-radius: 12px !important;
    padding: 24px !important;
    max-width: 600px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.skryva-event-modal-content h3 {
    margin: 0 0 20px 0 !important;
    color: #333 !important;
    font-size: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.skryva-event-modal-close {
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
}

.skryva-event-modal-close:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.skryva-event-form-group {
    margin-bottom: 16px !important;
}

.skryva-event-form-group label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 500 !important;
    color: #555 !important;
}

.skryva-event-form-group input,
.skryva-event-form-group textarea,
.skryva-event-form-group select {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #e1e5e9 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.skryva-event-form-group input:focus,
.skryva-event-form-group textarea:focus,
.skryva-event-form-group select:focus {
    outline: none !important;
    border-color: #667eea !important;
}

.skryva-event-form-group textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

.skryva-event-modal-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e1e5e9 !important;
}

.skryva-event-modal-actions .cancel-btn {
    padding: 12px 24px !important;
    border: 1px solid #d1d5db !important;
    background: white !important;
    color: #374151 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.skryva-event-modal-actions .cancel-btn:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}

.skryva-event-modal-actions .submit-btn {
    padding: 12px 24px !important;
    background: #4f46e5 !important;
    background: var(--color-primary-500, #4f46e5) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.skryva-event-modal-actions .submit-btn:hover:not(:disabled) {
    background: #4338ca !important;
    background: var(--color-primary-600, #4338ca) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.skryva-event-modal-actions .submit-btn:disabled {
    background: #9ca3af !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.skryva-event-modal-actions .submit-btn .loading-spinner {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid transparent !important;
    border-top: 2px solid currentColor !important;
    border-radius: 50% !important;
    /* animation: spin 1s linear infinite !important; */
}

/* Recurring section styling */
.skryva-event-form-group.recurring-section {
    border: 1px solid #e1e5e9 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-top: 8px !important;
    background: #f8f9fa !important;
}

.skryva-event-form-group .checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    margin-bottom: 12px !important;
}

.skryva-event-form-group .checkbox-label input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
}

.skryva-event-form-group .recurring-options {
    display: grid !important;
    grid-gap: 16px !important;
    gap: 16px !important;
    grid-template-columns: 1fr 1fr !important;
    margin-top: 12px !important;
}

/* Clock Time Picker Styles - Scoped to Events */
.events-container .clock-time-picker {
    position: relative;
}

.events-container .time-input-container {
    display: flex;
    align-items: center;
    position: relative;
}

.events-container .time-input-native {
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
    flex: 1 1;
    padding-right: 50px;
}

.events-container .time-input-native:focus {
    outline: none;
    border-color: #4f46e5;
    border-color: var(--color-primary-500, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.events-container .clock-picker-trigger {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 1;
}

.events-container .clock-picker-trigger:hover {
    color: #4f46e5;
    color: var(--color-primary-500, #4f46e5);
    background: rgba(79, 70, 229, 0.1);
}

.events-container .clock-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.events-container .clock-picker-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.events-container .clock-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.events-container .clock-picker-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.events-container .close-picker {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.events-container .close-picker:hover {
    background: #f3f4f6;
    color: #374151;
}

.events-container .clock-picker-content {
    padding: 24px;
}

.events-container .time-display {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #4f46e5;
    color: var(--color-primary-500, #4f46e5);
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(79, 70, 229, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(79, 70, 229, 0.1);
}

.events-container .time-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
}

.events-container .time-section {
    text-align: center;
}

.events-container .time-section > label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.events-container .time-wheel {
    display: grid;
    grid-gap: 8px;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f9fafb;
}

.events-container .time-option {
    padding: 8px 16px;
    border: none;
    background: white;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.events-container .time-option:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.events-container .time-option.active {
    background: #4f46e5;
    background: var(--color-primary-500, #4f46e5);
    color: white;
    border-color: #4338ca;
    border-color: var(--color-primary-600, #4338ca);
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

.events-container .clock-picker-actions {
    padding: 20px 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.events-container .clock-picker-actions .btn-primary {
    background: #4f46e5;
    background: var(--color-primary-500, #4f46e5);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.events-container .clock-picker-actions .btn-primary:hover {
    background: #4338ca;
    background: var(--color-primary-600, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Responsive Clock Picker */
@media (max-width: 640px) {
    .events-container .clock-picker-modal {
        margin: 0;
        border-radius: 12px 12px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 70vh;
    }

    .events-container .time-display {
        font-size: 1.5rem;
        margin-bottom: 16px;
        padding: 12px;
    }

    .events-container .time-controls {
        gap: 12px;
    }

    .events-container .time-wheel {
        max-height: 120px;
        padding: 4px;
    }

    .events-container .time-option {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
} 
/* Edit Event Button */
.events-container .event-edit-container {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
}

.events-container .edit-event-btn {
    background: #4f46e5;
    background: var(--color-primary-500, #4f46e5);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 4px;
}

.events-container .edit-event-btn:hover {
    background: #4338ca;
    background: var(--color-primary-600, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
}

/* Clickable Attendance Count */
.events-container .participant-count.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.events-container .participant-count.clickable:hover {
    background-color: #f8fafc;
    color: #4f46e5;
    color: var(--color-primary-500, #4f46e5);
    text-decoration: underline;
}

/* RSVP Button States */
.events-container .rsvp-btn.inactive {
    opacity: 0.5;
    background-color: #f5f5f5;
    color: #666;
    border-color: #ddd;
}

.events-container .rsvp-btn.inactive:hover {
    opacity: 0.7;
    transform: none;
}

.events-container .rsvp-btn.active {
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Attendees Modal */
.events-container .attendees-modal {
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
}

.events-container .attendees-content {
    padding: 20px 0;
}

.events-container .attendees-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.events-container .attendee-group {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
}

.events-container .attendee-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.events-container .attendee-group-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1e293b;
}

.events-container .attendee-users {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.events-container .attendee-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.events-container .attendee-user:hover {
    background-color: #f8fafc;
}

.events-container .attendee-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.events-container .attendee-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.events-container .attendee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.events-container .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: #4f46e5;
    background: var(--color-primary-500, #4f46e5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.events-container .attendee-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1;
}

.events-container .attendee-name {
    font-weight: 500;
    color: #1e293b;
}

.events-container .attendee-role {
    font-size: 12px;
    color: #4f46e5;
    color: var(--color-primary-500, #4f46e5);
    text-transform: capitalize;
    font-weight: 500;
}

.events-container .attendee-notes {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

.events-container .no-attendees {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 40px 20px;
}

.events-container .loading-spinner {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

/* Event access info (location/platform details for attendees) */
.event-access-info {
    margin-top: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #10b981;
}

.event-location-details,
.event-platform-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.access-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.access-value {
    color: #1f2937;
    font-size: 0.95rem;
    word-break: break-word;
}

/* Center photo upload in forms */
.skryva-event-form-group.full-width {
    text-align: center;
}

.skryva-event-form-group.full-width label {
    text-align: center;
    width: 100%;
}

/* WORKING SOLUTION: Copy the pattern from Writing.css that actually works */
/* Override FormComponents with direct container approach */

.skryva-event-form-group.full-width .file-upload-area {
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.skryva-event-form-group.full-width .upload-label {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

.skryva-event-form-group.full-width .upload-placeholder {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.skryva-event-form-group.full-width .upload-placeholder * {
    text-align: center !important;
}

.skryva-event-form-group.full-width .upload-icon {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Alternative: Direct override of any conflicting styles */
.skryva-event-modal .upload-placeholder,
.skryva-event-modal .upload-placeholder *,
.skryva-event-modal .upload-label,
.skryva-event-modal .upload-icon {
    text-align: center !important;
}

/* Custom Photo Upload - Mimicking the working Writing.css pattern exactly */
.custom-photo-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s;
    cursor: pointer;
    margin-bottom: 0.75rem;
    position: relative;
}

.custom-photo-upload-area:hover {
    border-color: #4f46e5;
    background: #f0f4ff;
}

.custom-photo-upload-input {
    display: none;
}

.custom-photo-upload-label {
    cursor: pointer;
    display: block;
    color: #64748b;
    text-align: center;
}

.custom-upload-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.custom-photo-upload-label div {
    margin-bottom: 0.25rem;
    text-align: center;
}

.custom-photo-upload-label small {
    color: #94a3b8;
    font-size: 0.75rem;
    text-align: center;
}

/* Custom photo preview */
.custom-photo-preview {
    position: relative;
    width: 100%;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
}

.custom-photo-preview .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.custom-photo-preview .remove-photo-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.custom-photo-preview .remove-photo-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Event photo preview styling */

/* The .page-container class from unified design system handles layout */
.page-container.notifications {
    /* Any notifications-specific styles can go here */
}

.notifications-header-container {
    margin-bottom: 2rem;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.header-content {
    flex: 1 1;
}

.notifications-header h1 {
    color: #1e293b;
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.header-subline {
    color: #64748b;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.5;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 0.25rem;
}

.mark-all-read-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mark-all-read-btn:hover {
    background: #4338ca;
}

.error-banner {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.error-banner button {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Filters - Using shared tab system */
.notifications-filters {
    display: flex;
    background: white;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.filter-btn {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.95rem;
    white-space: nowrap;
    position: relative;
}

.filter-btn:hover {
    background: #60a5fa;
    color: white;
}

.filter-btn.active {
    background: #3b82f6;
    color: white;
}

.count-badge {
    background: #ef4444;
    color: white;
    border-radius: 50%;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    min-width: 1.2rem;
    text-align: center;
    line-height: 1;
}

.filter-btn.active .count-badge {
    background: rgba(255, 255, 255, 0.3);
}

/* Content */
.notifications-content {
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Notification Cards */
.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 8px;
    margin-bottom: 16px;
}

.notification-card:last-child {
    margin-bottom: 0;
}

.notification-card:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.notification-card.unread {
    background: #f0f9ff;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.notification-card.unread:hover {
    background: #dbeafe;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
    border-color: #93c5fd;
}

.notification-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-content {
    flex: 1 1;
    min-width: 0;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.notification-header h4 {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.notification-title {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.notification-card:hover .notification-title,
.notification-card:hover .notification-header h4 {
    color: #3b82f6;
}

.notification-time {
    color: #94a3b8;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Add extra margin for unread notifications to avoid overlap with indicator */
.notification-card.unread .notification-time {
    margin-right: 2rem;
}

.notification-message {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}

.notification-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-avatar {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.user-avatar:hover {
    transform: scale(1.1);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}

.username {
    color: #4f46e5;
    font-size: 0.85rem;
    font-weight: 500;
}

.unread-indicator {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
}

/* Empty State */
.empty-notifications {
    text-align: center;
    padding: 4rem 2rem;
    color: #64748b;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-notifications h2 {
    color: #1e293b;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.empty-notifications p {
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Loading State - Now using modern LoadingSpinner component */

/* Notification Type Specific Styles */
.notification-card[data-type="follow"] .notification-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.notification-card[data-type="friend_request"] .notification-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.notification-card[data-type="friend_request_accepted"] .notification-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.notification-card[data-type="goal_milestone"] .notification-icon {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.notification-card[data-type="post_reaction"] .notification-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.notification-card[data-type="comment"] .notification-icon {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-container.notifications {
        /* Mobile-specific notifications styles can go here */
    }
    
    .notifications-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .notifications-header h1 {
        font-size: 2rem;
    }
    
    .header-subline {
        font-size: 1rem;
    }
    
    .notifications-filters {
        padding: 0.25rem;
    }
    
    .filter-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .notification-card {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .notification-icon {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
    
    .notification-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .notification-time {
        font-size: 0.75rem;
    }
    
    .unread-indicator {
        top: 1rem;
        right: 1rem;
    }
    
    .empty-notifications {
        padding: 2rem 1rem;
    }
    
    .empty-icon {
        font-size: 3rem;
    }
}

.notification-action-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mark-read-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: auto;
}

.mark-read-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.notification-card .notification-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
} 
/* Messages Container */
.messages-container {
    display: flex;
    height: calc(100vh - 200px);
    background: #1a1d2e;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-top: 24px;
}

/* Sidebar */
.messages-sidebar {
    width: 350px;
    background: #2d3142;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.messages-header {
    padding: 20px;
    background: #2d3142;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.messages-header h2 {
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0;
}

.new-message-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.new-message-btn:hover {
    transform: scale(1.1);
}

/* Tabs */
.messages-tabs {
    display: flex;
    padding: 12px;
    gap: 8px;
    background: #252837;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.messages-tabs .tab {
    flex: 1 1;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.messages-tabs .tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

.messages-tabs .tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* Search */
.messages-search {
    padding: 12px;
    background: #252837;
}

.messages-search input {
    width: 100%;
    padding: 10px 15px;
    background: #1a1d2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
}

.messages-search input::placeholder {
    color: #6b7280;
}

.messages-search input:focus {
    outline: none;
    border-color: #667eea;
}

/* New Conversation Section */
.new-conversation-section {
    padding: 12px;
    background: #1a1d2e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 8px;
}

.new-conversation-section select {
    flex: 1 1;
    padding: 8px 12px;
    background: #2d3142;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
}

.start-chat-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s;
}

.start-chat-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Conversations List */
.conversations-list {
    flex: 1 1;
    overflow-y: auto;
    background: #1a1d2e;
}

.conversation-item {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.conversation-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.conversation-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left: 3px solid #667eea;
}

.conversation-item.unread {
    background: rgba(102, 126, 234, 0.05);
}

.conversation-avatar {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    flex-shrink: 0;
}

.conversation-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.default-avatar,
.system-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.default-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.system-avatar {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.conversation-info {
    flex: 1 1;
    min-width: 0;
}

.conversation-name {
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.unread-badge {
    background: #ef4444;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}

.conversation-preview {
    color: #9ca3af;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time {
    color: #6b7280;
    font-size: 12px;
    margin-left: 8px;
}

/* Main Messages Area */
.messages-main {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    background: #1a1d2e;
}

.messages-header {
    padding: 20px;
    background: #2d3142;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-info h3 {
    color: #ffffff;
    margin: 0 0 4px 0;
}

.header-info p {
    color: #9ca3af;
    font-size: 14px;
    margin: 0;
}

/* Messages List */
.messages-list {
    flex: 1 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    display: flex;
    gap: 12px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.own {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.message-default-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.message-content {
    max-width: 70%;
}

.message-bubble {
    background: #2d3142;
    padding: 12px 16px;
    border-radius: 18px;
    color: #ffffff;
    word-wrap: break-word;
}

.message.own .message-bubble {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.message-time {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    padding: 0 8px;
}

.message.own .message-time {
    text-align: right;
}

/* Message Input */
.message-input-container {
    padding: 20px;
    background: #2d3142;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.message-input-form {
    display: flex;
    gap: 12px;
}

.message-input-form input {
    flex: 1 1;
    padding: 12px 16px;
    background: #1a1d2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    color: #ffffff;
    font-size: 14px;
}

.message-input-form input::placeholder {
    color: #6b7280;
}

.message-input-form input:focus {
    outline: none;
    border-color: #667eea;
}

.send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.send-btn:hover:not(:disabled) {
    transform: scale(1.1);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty States */
.loading,
.no-conversations,
.no-conversation-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    text-align: center;
    padding: 40px;
}

.no-conversation-selected svg {
    width: 80px;
    height: 80px;
    color: #6b7280;
    margin-bottom: 20px;
}

.no-conversation-selected h3 {
    color: #ffffff;
    margin: 16px 0 8px 0;
}

.hint {
    color: #6b7280;
    font-size: 14px;
    margin-top: 8px;
}

/* Scrollbar Styling */
.conversations-list::-webkit-scrollbar,
.messages-list::-webkit-scrollbar {
    width: 8px;
}

.conversations-list::-webkit-scrollbar-track,
.messages-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.conversations-list::-webkit-scrollbar-thumb,
.messages-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.conversations-list::-webkit-scrollbar-thumb:hover,
.messages-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .messages-container {
        flex-direction: column;
    }
    
    .messages-sidebar {
        width: 100%;
        height: 40%;
    }
    
    .message-content {
        max-width: 85%;
    }
}
.post-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: var(--bg-color);
    min-height: 100vh;
}

/* Highlighted comment effect */
.highlighted-comment {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-left: 4px solid #3b82f6 !important;
    /* animation: highlight-pulse 0.5s ease-in-out; */
    transition: all 0.3s ease;
}

@keyframes highlight-pulse {
    0% { 
        background-color: rgba(59, 130, 246, 0.3);
        transform: scale(1.02);
    }
    100% { 
        background-color: rgba(59, 130, 246, 0.1);
        transform: scale(1);
    }
}

.post-page-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.post-page-header h2 {
    flex: 1 1;
    color: #94a3b8; /* Lighter color for "Post by username" text */
    font-weight: 400; /* Make it less bold */
    font-size: 1.25rem; /* Slightly smaller */
}

.post-page-header .post-menu {
    margin-left: auto;
}

.back-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
}

.post-page h2 {
    margin: 0;
    color: #64748b; /* Light gray color for better readability */
    font-size: 24px;
    font-weight: 500; /* Slightly lighter font weight too */
}

.post-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.individual-post {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.individual-post .post-header {
    margin-bottom: 15px;
}

.individual-post .post-content {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: var(--text-color);
}

.individual-post .session-stats {
    display: flex;
    gap: 20px;
    margin: 15px 0;
    padding: 12px;
    background: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.individual-post .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.individual-post .stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-color);
}

.individual-post .stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.individual-post .project-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--bg-light);
    border-radius: 6px;
    border: 1px solid var(--border-light);
    color: var(--text-color);
}

.individual-post .project-name {
    font-weight: 500;
}

.individual-post .project-genre {
    color: var(--text-muted);
    font-size: 14px;
}

.individual-post .location-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
    color: var(--text-muted);
    font-size: 14px;
}

.individual-post .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 15px 0;
}

.individual-post .post-actions {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-light);
}

.individual-post .post-actions button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: var(--text-color);
}

.individual-post .post-actions button:hover {
    background: var(--bg-light);
    border-color: var(--accent-color);
}

.individual-post .like-btn.liked {
    background: var(--like-bg);
    border-color: var(--like-color);
    color: var(--like-color);
}

.individual-post .comment-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.comments-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 18px;
    color: var(--text-muted);
}

.error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-message h2 {
    margin: 0;
    color: var(--text-color);
    font-size: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .post-page {
        padding: 15px;
    }
    
    .post-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .post-page h2 {
        font-size: 20px;
    }
    
    .individual-post {
        padding: 15px;
    }
    
    .individual-post .session-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .individual-post .post-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .individual-post .post-actions button {
        justify-content: center;
        width: 100%;
    }
    
    .comments-section {
        padding: 15px;
    }
}

/* Session Information Container */
.session-info-container {
    margin-top: 2rem;
}

.session-info-title {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.session-current-title {
    background: #f1f5f9;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    color: #334155;
}

.session-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.session-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.session-info-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.session-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

/* Project Breakdown Container */
.project-breakdown-container {
    margin-top: 2rem;
}

.project-breakdown-title {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.chart-container {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments for new containers */
@media (max-width: 768px) {
    .session-info-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .session-info-container,
    .project-breakdown-container {
        margin-top: 1.5rem;
    }
    
    .chart-container {
        height: 250px;
    }
} 
/* Session Page Specific Styles */

/* Page header layout */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

/* Back button styling */
.back-button {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.back-button:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.back-arrow {
    font-size: 1rem;
}

.back-text {
    font-size: 0.875rem;
}

/* Page header title styling - lighter color */
.page-title {
    color: #94a3b8; /* Lighter gray color */
    font-weight: 400; /* Less bold */
    font-size: 1.25rem; /* Slightly smaller */
    flex: 1 1;
    margin: 0;
    text-align: left;
}

/* Post menu button (three dots) */
.post-menu {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.post-menu:hover {
    color: #64748b;
}

/* Live indicator specifically for the SessionPage header */
.session-page-content .post-header .live-indicator {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    animation: pulse 2s infinite;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10;
    vertical-align: middle;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: blink 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.9;
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.session-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.session-stats {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    justify-content: flex-start !important;
}

/* Override PostPage.css which might be centering the stats */
.session-page-content .session-stats,
.session-page-content .individual-post .session-stats,
.individual-post.session-page-content .session-stats {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.location-info {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.session-info-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
}

.session-info-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.session-info-content h4 {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    text-align: center;
}

.session-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
}

.session-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.session-info-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.session-info-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Comments Section */
.comments-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: block !important;
}

.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.comments-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-controls label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sort-controls select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: white;
}

.comment-form,
.new-comment-form {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #f1f5f9;
}

.session-page-content .comments-section .comment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 1.5rem 1.5rem 1.5rem !important;
    padding: 1.25rem !important;
    border-bottom: none;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid #f1f5f9;
}

.comment-input {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem;
    color: #1e293b !important;
    background: #ffffff !important;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.comment-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comment-input::placeholder {
    color: #64748b;
}

/* Also apply same styles to comment-textarea */
.comment-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem;
    color: #1e293b !important;
    background: #ffffff !important;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.comment-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comment-textarea::placeholder {
    color: #64748b;
}

.comment-submit,
.submit-comment-btn {
    display: inline-block !important;
    padding: 0.75rem 1rem;
    background: #2563eb !important;
    color: white !important;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.comment-submit:hover:not(:disabled),
.submit-comment-btn:hover:not(:disabled) {
    background: #1d4ed8 !important;
}

.comment-submit:disabled,
.submit-comment-btn:disabled {
    background: #cbd5e1 !important;
    cursor: not-allowed;
}

.login-prompt {
    text-align: center;
    padding: 2rem;
}

.login-prompt button {
    padding: 0.75rem 2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
}

.session-page-content .comments-list {
    margin-top: 1.5rem;
    padding: 0 1.5rem !important;
}

.session-page-content .comments-section .session-comment {
    padding: 1.5rem 2.5rem !important;
    border-bottom: 1px solid var(--border-light);
    margin: 0;
}

.comments-section .session-comment:last-child {
    border-bottom: none;
}

.comments-section .session-comment:first-child {
    border-top: 1px solid var(--border-light);
}

.no-comments {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-style: italic;
}

.comment-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.comments-section .comment-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comment-author-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comment-profile-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.comment-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-profile-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.comment-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.comment-username {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9375rem;
}

.comment-timestamp {
    font-size: 0.8125rem;
    color: #64748b;
}

.comment-menu-btn {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: background-color 150ms;
    border-radius: 0.375rem;
}

.comment-menu-btn:hover {
    background: #f1f5f9;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.comment-username {
    font-weight: 600;
    color: var(--text-primary);
}

.comment-time {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin-left: auto;
}

.comments-section .comment-content,
.comment-content {
    margin-left: 52px;
    color: #475569;
    line-height: 1.6;
    padding-right: 1rem;
    font-size: 0.9375rem;
}

.comment-actions {
    margin-left: 52px;
    margin-top: 0.75rem;
    display: flex;
    gap: 1rem;
}

.comment-like-btn,
.comment-reply-btn {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 150ms;
}

.comment-like-btn:hover,
.comment-reply-btn:hover {
    color: #3b82f6;
}

.comment-like-btn.liked {
    color: #ef4444;
}

.comment-like-btn.liked svg {
    fill: #ef4444;
}

/* Override PostPage.css padding for comments section */
.session-page-content .comments-section {
    padding: 20px !important;
}

@media (max-width: 768px) {
    .session-page-content .comments-section {
        padding: 15px !important;
    }
}

/* Icon styling for engagement buttons */
.like-icon,
.comment-icon,
.share-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.like-icon.filled {
    color: #ef4444;
}

.like-icon.outline {
    color: var(--text-secondary);
}

.like-btn.active .like-icon.filled {
    animation: like-bounce 0.3s ease;
}

@keyframes like-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .session-info-card,
    .comments-section {
        background: var(--bg-primary);
    }
    
    .comment-input {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-dark);
    }
}
.project-outline-map-svg-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.outline-svg-wrapper {
    flex: 1 1;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 600px;
    background: white;
}

.project-outline-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Reuse toolbar styles from the original CSS */
.outline-toolbar {
    padding: 4px 20px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

.toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar-section {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-section.slide-title-section {
    flex: 1 1 auto;
    min-width: 200px;
}

.toolbar-section.tool-buttons {
    flex: 0 0 auto;
    margin-left: auto;
    order: 2;
}

.toolbar-section.node-buttons {
    flex: 0 0 auto;
    order: 3;
}

.toolbar-section.right-section {
    flex: 0 0 auto;
}

.toolbar-divider {
    order: 2;
    align-self: stretch;
}

.slide-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.slide-title:hover {
    background: rgba(0, 0, 0, 0.05);
}

.slide-title-input {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    padding: 4px 8px;
    border: 2px solid #667eea;
    border-radius: 4px;
    background: white;
    outline: none;
    min-width: 200px;
}

.slide-title-input:focus {
    border-color: #5a67d8;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

@media (max-width: 768px) {
    .toolbar-row {
        justify-content: center;
    }
    
    .toolbar-section {
        justify-content: center;
        width: 100%;
    }
    
    .toolbar-btn {
        flex: 0 1 auto;
        min-width: 100px;
    }
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 5px;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
}

.toolbar-btn.icon-only {
    padding: 8px;
    min-width: auto;
    background: white;
    border: 2px solid #e0e0e0;
    color: #333;
}

.toolbar-btn.icon-only:hover:not(:disabled) {
    border-color: #333;
    background: #f5f5f5;
}

.toolbar-btn.icon-only svg {
    width: 18px;
    height: 18px;
}

/* Tool buttons specific styling */
.toolbar-btn.tool-btn {
    position: relative;
    transition: all 0.2s ease;
}

.toolbar-btn.tool-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

.toolbar-btn.tool-btn.active:hover {
    background: #5a67d8;
    border-color: #5a67d8;
}

.toolbar-btn.tool-btn svg {
    transition: all 0.2s ease;
}

.toolbar-btn.tool-btn.active svg {
    color: white;
}

.toolbar-btn.history-btn {
    background: white;
    border: 2px solid #e0e0e0;
    color: #333;
}

.toolbar-btn.history-btn:hover:not(:disabled) {
    border-color: #333;
    background: #f5f5f5;
}

.toolbar-btn.history-btn .btn-text {
    font-size: 14px;
    font-weight: 600;
}

.toolbar-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.toolbar-btn .btn-icon {
    font-size: 16px;
}

.toolbar-btn.concept {
    background: linear-gradient(135deg, #667eea, #5a67d8);
}

.toolbar-btn.concept:hover {
    background: linear-gradient(135deg, #5a67d8, #4c51bf);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.25);
}

.toolbar-btn.chapter {
    background: linear-gradient(135deg, #48bb78, #38a169);
}

.toolbar-btn.chapter:hover {
    background: linear-gradient(135deg, #38a169, #2f855a);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(72, 187, 120, 0.25);
}

.toolbar-btn.scene {
    background: linear-gradient(135deg, #ed8936, #dd6b20);
}

.toolbar-btn.scene:hover {
    background: linear-gradient(135deg, #dd6b20, #c05621);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(237, 137, 54, 0.25);
}

.toolbar-btn.character {
    background: linear-gradient(135deg, #9f7aea, #805ad5);
}

.toolbar-btn.character:hover {
    background: linear-gradient(135deg, #805ad5, #6b46c1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(159, 122, 234, 0.25);
}

.toolbar-btn.note {
    background: linear-gradient(135deg, #f6e05e, #ecc94b);
    color: #744210;
}

.toolbar-btn.note:hover {
    background: linear-gradient(135deg, #ecc94b, #d69e2e);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(246, 224, 94, 0.25);
}

.toolbar-btn.task {
    background: linear-gradient(135deg, #4299e1, #3182ce);
}

.toolbar-btn.task:hover {
    background: linear-gradient(135deg, #3182ce, #2c5282);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(66, 153, 225, 0.25);
}

.toolbar-btn.save {
    background: linear-gradient(135deg, #4a5568, #2d3748);
}

.toolbar-btn.save:hover {
    background: linear-gradient(135deg, #2d3748, #1a202c);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(74, 85, 104, 0.25);
}

.toolbar-btn.export {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.toolbar-btn.export:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
}

.mode-indicator {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.toolbar-btn.selected {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

/* Sub-toolbar for node placement */
.sub-toolbar {
    padding: 8px 20px;
    background: linear-gradient(to bottom, #f8fafc, #f0f4f8);
    border-bottom: 1px solid #e2e8f0;
    animation: slideDown 0.3s ease;
    overflow: hidden;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        max-height: 200px;
        opacity: 1;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

.sub-toolbar-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
}

.sub-toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid #cbd5e0;
    border-radius: 6px;
    background: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    color: #4a5568;
}

.sub-toolbar-btn:hover {
    border-color: #667eea;
    background: #f7fafc;
    transform: translateY(-1px);
}

.sub-toolbar-btn.active {
    border-color: #667eea;
    background: #667eea;
    color: white;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.25);
}

.sub-toolbar-divider {
    width: 1px;
    height: 24px;
    background: #cbd5e0;
    flex-shrink: 0;
}

.existing-nodes-list {
    display: flex;
    gap: 8px;
    flex: 1 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
}

.existing-node-btn {
    padding: 6px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    color: #2d3748;
}

.existing-node-btn:hover {
    border-color: #48bb78;
    background: #f0fff4;
    transform: translateY(-1px);
}

.existing-node-btn.active {
    border-color: #48bb78;
    background: #48bb78;
    color: white;
    box-shadow: 0 2px 4px rgba(72, 187, 120, 0.25);
}

.no-items-message {
    padding: 6px 12px;
    font-size: 12px;
    color: #a0aec0;
    font-style: italic;
}

.outline-instructions {
    padding: 10px 20px;
    background: #f0f4f8;
    color: #4a5568;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

/* Context Menu */
.outline-context-menu {
    position: fixed;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 160px;
    z-index: 1000;
}

.context-menu-item {
    padding: 10px 16px;
    font-size: 14px;
    color: #2d3748;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.context-menu-item:hover {
    background-color: #f7fafc;
}

.context-menu-item.delete {
    color: #e53e3e;
}

.context-menu-item.delete:hover {
    background-color: #fff5f5;
}

.context-menu-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}

/* Edit Modal */
.outline-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.edit-modal-content {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    min-width: 400px;
}

.edit-modal-content h3 {
    margin: 0 0 16px 0;
    color: #2d3748;
    font-size: 18px;
}

.edit-modal-content input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 20px;
    transition: border-color 0.15s ease;
}

.edit-modal-content input:focus {
    outline: none;
    border-color: #667eea;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-buttons button:first-child {
    background: #667eea;
    color: white;
}

.modal-buttons button:first-child:hover {
    background: #5a67d8;
}

.modal-buttons button:last-child {
    background: #e2e8f0;
    color: #4a5568;
}

.modal-buttons button:last-child:hover {
    background: #cbd5e0;
}

/* SVG-specific animations - removed transform to prevent jittering */
.svg-node {
    pointer-events: all;
}

.svg-node rect {
    transition: filter 0.2s ease, stroke-width 0.2s ease;
}

.svg-node:hover rect {
    filter: brightness(1.1);
}

/* Arrow Properties Panel */
.arrow-properties-panel {
    position: absolute;
    top: 80px;
    right: 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 100;
}

.arrow-properties-panel h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.arrow-properties-panel .property-group {
    margin-bottom: 12px;
}

.arrow-properties-panel label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 4px;
}

.arrow-properties-panel select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}

.arrow-properties-panel select:focus {
    outline: none;
    border-color: #667eea;
}

.delete-arrow-btn {
    width: 100%;
    padding: 8px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.delete-arrow-btn:hover {
    background: #dc2626;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .outline-toolbar {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    .toolbar-section {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .toolbar-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .outline-instructions {
        font-size: 11px;
        padding: 8px 10px;
    }
    
    .edit-modal-content {
        min-width: 90%;
        margin: 0 20px;
    }
}
.project-detail-container {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px 20px 60px 20px;
    background: #f8fafc;
    min-height: 100vh;
    border-radius: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    position: relative; /* Ensure absolute positioning works for deadline */
}

/* Back Button Section */
.project-detail-back-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.back-section-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-section-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.project-back-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.project-detail-title {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.project-detail-title .title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.project-detail-title h1 {
    margin: 0;
    color: #1e293b;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.project-detail-title .project-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.action-btn:hover {
    background: #e2e8f0;
    color: #475569;
    transform: translateY(-1px);
}

.action-btn.edit-btn:hover {
    background: #dbeafe;
    color: #3b82f6;
}

.action-btn.delete-btn:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Responsive layout for back section */
@media (max-width: 640px) {
    .project-detail-back-section {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .back-section-right {
        width: 100%;
        justify-content: flex-start;
    }
}

.project-meta {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.project-status {
    background: #dbeafe;
    color: #1e40af;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.project-genre {
    background: #f3e8ff;
    color: #7c3aed;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.project-description {
    background: white;
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.project-description p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

/* Loading and Error States */
.project-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.project-detail-error {
    text-align: center;
    padding: 3rem;
}

.project-detail-error h2 {
    color: #dc2626;
    margin-bottom: 1rem;
}

/* Tab Content Container */
.project-tab-content {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Overview Tab */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    margin-bottom: 2rem;
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.progress-section,
.project-info-section,
.consistency-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-section h3,
.project-info-section h3,
.consistency-section h3 {
    margin: 0 0 1.5rem 0;
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 600;
}

.progress-item {
    margin-bottom: 1.5rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem; /* 32px */
    font-size: 0.9rem;
    color: #475569;
}

.project-progress-bar {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.project-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    transition: width 0.3s ease;
}

.project-progress-percentage {
    text-align: center;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.info-grid {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 600;
}

.info-value {
    color: #0f172a;
    font-weight: 600;
}

.consistency-score {
    text-align: center;
}

.score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.score-number {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.score-description {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

/* Sessions Tab */
.map-content {
    min-height: 600px;
    height: 70vh;
    max-height: 800px;
    width: 100%;
    position: relative;
}

.map-controls {
    padding: 15px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}

.controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.mode-toggle-btn,
.version-history-btn,
.undo-btn,
.redo-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea, #5a67d8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.undo-btn,
.redo-btn {
    padding: 10px 16px;
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.mode-toggle-btn:hover,
.version-history-btn:hover {
    background: linear-gradient(135deg, #5a67d8, #4c51bf);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.25);
}

.undo-btn:hover:not(:disabled),
.redo-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #64748b, #475569);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(100, 116, 139, 0.25);
}

.undo-btn:disabled,
.redo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Responsive breakpoint for smaller screens */
@media (max-width: 768px) {
    .controls-row {
        justify-content: center;
    }
    
    .map-controls button {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: calc(50% - 5px);
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .map-controls button {
        flex: 1 1 100%;
    }
}

/* Version History Panel */
.version-history-panel {
    position: absolute;
    top: 100%;
    right: 15px;
    width: 350px;
    max-height: 400px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.version-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.version-history-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.version-history-header button {
    background: none;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.version-history-header button:hover {
    color: #475569;
}

.version-history-list {
    flex: 1 1;
    overflow-y: auto;
    padding: 10px;
}

.version-item {
    padding: 12px;
    margin-bottom: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.version-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateX(2px);
}

.version-item:last-child {
    margin-bottom: 0;
}

.version-date {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.version-changes {
    display: block;
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.no-versions {
    text-align: center;
    color: #94a3b8;
    padding: 20px;
    font-size: 14px;
}

/* Content tabs styling */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

.content-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.5rem;
}

.content-list {
    display: grid;
    grid-gap: 20px;
    gap: 20px;
}

.content-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.content-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.content-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.content-card-header h4 {
    margin: 0;
    color: #374151;
    font-size: 1.125rem;
}

.content-status {
    padding: 4px 12px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.content-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    color: #6b7280;
    font-size: 0.875rem;
}

.map-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #eef2ff;
    color: #6366f1;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.importance-badge {
    padding: 4px 12px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.chapter-badge {
    padding: 4px 12px;
    background: linear-gradient(135deg, #34d399, #10b981);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.role-badge {
    padding: 4px 12px;
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.scene-details {
    display: flex;
    gap: 15px;
    margin-top: 12px;
    flex-wrap: wrap;
    color: #6b7280;
    font-size: 0.875rem;
}

.scene-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.character-traits {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f3f4f6;
}

.trait {
    margin-bottom: 8px;
    color: #4b5563;
    font-size: 0.875rem;
}

.trait strong {
    color: #374151;
    margin-right: 8px;
}

/* Archive Tab Styling */
.archive-content {
    padding: 20px;
}

.archive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

.archive-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.5rem;
}

.archive-filters {
    display: flex;
    gap: 10px;
}

.archive-filter-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.archive-filter-select:hover {
    border-color: #cbd5e1;
}

.archive-filter-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.archive-list {
    display: grid;
    grid-gap: 15px;
    gap: 15px;
}

.archive-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.archive-item:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.archive-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.archive-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.archive-item-type {
    padding: 4px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
}

.archive-item-info h4 {
    margin: 0;
    color: #374151;
    font-size: 1.125rem;
}

.archive-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.archive-reason {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.archive-reason.completed {
    background: #d1fae5;
    color: #065f46;
}

.archive-reason.deleted {
    background: #fee2e2;
    color: #991b1b;
}

.archive-reason.manual {
    background: #e0e7ff;
    color: #3730a3;
}

.archive-date {
    color: #9ca3af;
    font-size: 13px;
}

.archive-item-description {
    margin: 12px 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.archive-item-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.archive-restore-btn,
.archive-delete-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-restore-btn {
    background: #10b981;
    color: white;
}

.archive-restore-btn:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.archive-delete-btn {
    background: #ef4444;
    color: white;
}

.archive-delete-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.sessions-content h3 {
    margin-bottom: 2rem;
    color: #1e293b;
}

.sessions-list {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
}

.session-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.session-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.session-header h4 {
    margin: 0;
    color: #1e293b;
    font-size: 1.1rem;
}

.session-date {
    color: #64748b;
    font-size: 0.9rem;
}

.session-stats {
    display: flex;
    gap: 2rem;
}



/* Notes Tab */
.notes-header {
    margin-bottom: 2rem;
}

.notes-header h3 {
    margin-bottom: 1rem;
    color: #1e293b;
}

.add-note-form {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.add-note-form input,
.add-note-form textarea {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

.notes-list {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
}

.note-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.note-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.note-header h4 {
    margin: 0;
    color: #1e293b;
    font-size: 1.1rem;
}

.note-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.note-date {
    color: #64748b;
    font-size: 0.8rem;
}

.note-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #64748b;
    transition: color 0.2s ease;
}

.note-delete-btn:hover {
    color: #dc2626;
}

.note-content p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

/* Tasks Tab - Clean Implementation */
.tasks-content {
    /* Clean container with no conflicting styles */
}

.tasks-header {
    margin-bottom: 2rem;
}

.tasks-header h3 {
    margin-bottom: 1rem;
    color: #1e293b;
}

.task-form {
    display: flex;
    gap: 1rem;
    align-items: end;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.task-form input {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
}

.task-form input[type="text"] {
    flex: 1 1;
}

.task-form input[type="date"] {
    flex: 0 0 150px;
}

.tasks-list {
    display: grid;
    grid-gap: 0.75rem;
    gap: 0.75rem;
}

.task-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.task-item:hover {
    background: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.task-item.completed {
    opacity: 0.6;
}

.task-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    text-align: left;
}

.task-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.task-details {
    flex: 1 1;
    text-align: left;
    min-width: 0;
}

.task-title {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    text-align: left;
}

.task-item.completed .task-title {
    text-decoration: line-through;
}

.task-due-date {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    text-align: left;
}

.task-delete-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #64748b;
    transition: color 0.2s ease;
    border-radius: 4px;
}

.task-delete-btn:hover {
    color: #dc2626;
    background: #fef2f2;
}

.task-delete-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Analytics Tab */
.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    margin-bottom: 2rem;
}

.analytics-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics-card.recent-activity {
    grid-column: 1 / -1;
}

.analytics-card h4 {
    margin: 0 0 1.5rem 0;
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.project-stat-item {
    text-align: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    min-width: 0; /* Allow shrinking */
}

.consistency-chart {
    text-align: center;
}

.consistency-bar {
    width: 100%;
    height: 12px;
    background: #f1f5f9;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.consistency-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.3s ease;
}

.activity-list {
    display: grid;
    grid-gap: 0.75rem;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 0.9rem;
}

.activity-date {
    color: #64748b;
}

.activity-words {
    color: #059669;
    font-weight: 500;
}

.activity-time {
    color: #3b82f6;
    font-weight: 500;
}

/* Common Styles */
.project-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.project-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.project-btn--primary {
    background: #3b82f6;
}

.project-btn--primary:hover {
    background: #2563eb;
}

.project-empty-state {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.project-empty-state p {
    margin: 0.5rem 0;
}

.project-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    /* animation: spin 1s linear infinite; */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
    
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .project-detail {
        padding: 1rem;
    }
    
    .project-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .add-task-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .add-task-form input[type="date"] {
        flex: 1 1;
    }
    
    .session-stats {
        gap: 1rem;
    }
    
    .activity-item {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
} 

/* Project deadline countdown - top right corner */
.project-deadline-countdown {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 1rem;
    font-weight: 600;
    z-index: 10;
}

.project-deadline-countdown svg {
    flex-shrink: 0;
}

.deadline-text.urgent {
    font-weight: 600;
}

/* Project genre with SVG icon */
.project-detail-title .project-genre {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.project-detail-title .project-genre svg {
    flex-shrink: 0;
} 

.project-stat {
    text-align: center;
}

.project-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}

.project-stat-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.4rem;
    line-height: 1.2;
    word-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
} 

/* Project Information Tab Dark Text Override */
.project-info-section .info-item {
    color: #1e293b;
}

.project-info-section .info-item .info-label {
    color: #374151;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.project-info-section .info-item .info-value {
    color: #0f172a;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Ensure emoji and text are both visible */
.project-info-section .info-item span {
    color: inherit;
}

/* Status and genre badges in info section */
.project-info-section .project-status,
.project-info-section .project-genre {
    color: #1e40af;
    font-weight: 600;
}

/* Outline button special styling */
.shared-tab-btn.outline-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.shared-tab-btn.outline-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.shared-tab-btn.outline-btn .shared-tab-icon {
    filter: brightness(1.2);
}

/* Project Actions Top - positioned below deadline countdown */
.project-actions-top {
    position: absolute;
    top: 70px; /* Below the deadline countdown */
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.project-actions-top .action-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0;
}

.project-actions-top .action-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.project-actions-top .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.project-actions-top .edit-btn {
    color: #3b82f6;
}

.project-actions-top .edit-btn:hover {
    background: #eff6ff;
    border-color: #3b82f6;
}

.project-actions-top .delete-btn {
    color: #ef4444;
}

.project-actions-top .delete-btn:hover {
    background: #fef2f2;
    border-color: #ef4444;
}


/* Dialog Overlay */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Dialog Container */
.create-element-dialog {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dialog Header */
.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
    color: white;
}

.dialog-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.dialog-icon {
    font-size: 28px;
}

.close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Dialog Form */
.dialog-form {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    overflow: hidden;
}

.form-content {
    flex: 1 1;
    overflow-y: auto;
    padding: 24px;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #f9f9f9;
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
}

/* Dialog Actions */
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
    border-radius: 0 0 16px 16px;
}

.cancel-action-btn,
.create-action-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.cancel-action-btn {
    background: white;
    color: #666;
    border: 2px solid #e0e0e0;
}

.cancel-action-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #ccc;
}

.create-action-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.create-action-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.cancel-action-btn:disabled,
.create-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Scrollbar Styling */
.form-content::-webkit-scrollbar {
    width: 8px;
}

.form-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.form-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.form-content::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Responsive */
@media (max-width: 768px) {
    .create-element-dialog {
        width: 95%;
        max-height: 90vh;
    }

    .dialog-header {
        padding: 20px;
    }

    .dialog-header h2 {
        font-size: 18px;
    }

    .form-content {
        padding: 20px;
    }

    .dialog-actions {
        padding: 16px 20px;
    }
}

/* Project Outline Studio Styles */

.project-outline {
    position: fixed;
    /* top is set dynamically via inline style in component */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
    z-index: 100;
    margin: 0 !important;
    max-width: none !important;
}

/* Fullscreen mode */
.project-outline.fullscreen {
    z-index: 9999;
    top: 0 !important;
}

/* Header - Reduced spacing */
.project-outline .outline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.project-outline .outline-header-content {
    flex: 1 1;
    text-align: center;
    margin: 0 20px;
}

.project-outline .outline-header-content h1 {
    margin: 0 0 4px 0;
    font-size: 20px;
    color: #2d3748;
}

.project-outline .outline-helper-text {
    font-size: 11px;
    color: #718096;
    margin: 0;
    line-height: 1.3;
}

.project-outline .po-back-button {
    padding: 8px 16px;
    background: #4a5568;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.project-outline .po-back-button:hover {
    background: #2d3748;
    transform: translateX(-5px);
}

/* Fullscreen button */
.project-outline .fullscreen-button {
    padding: 8px;
    background: white;
    color: #4a5568;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    flex-shrink: 0;
}

.project-outline .fullscreen-button:hover {
    background: #f7fafc;
    border-color: #667eea;
    color: #667eea;
    transform: scale(1.05);
}

.project-outline .fullscreen-button svg {
    display: block;
}

.project-outline .outline-header h1 {
    flex: 1 1;
    text-align: center;
    margin: 0;
    font-size: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.project-outline .header-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.project-outline .control-buttons-stack {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.project-outline .control-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #333;
    min-width: 80px;
}

.project-outline .control-btn.icon-only {
    min-width: auto;
    padding: 6px;
}

.project-outline .control-btn:hover:not(:disabled) {
    border-color: #4a5568;
    background: #f5f5f5;
}

.project-outline .control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.project-outline .control-btn svg {
    width: 18px;
    height: 18px;
}

.project-outline .view-toggle {
    display: flex;
    gap: 10px;
}

.project-outline .view-btn {
    padding: 10px 20px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
}

.project-outline .view-btn.active {
    background: #4a5568;
    color: white;
    border-color: #4a5568;
}

.project-outline .view-btn:hover:not(.active) {
    border-color: #4a5568;
    background: #f7fafc;
}

/* Body Layout */
.project-outline .outline-body {
    display: flex;
    flex: 1 1;
    overflow: hidden;
}

.project-outline .outline-main {
    flex: 1 1;
    background: rgba(255, 255, 255, 0.95);
    overflow: auto;
    padding: 10px;
}

/* Map View */
.project-outline .outline-map-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}

/* Slide Navigator */
.project-outline .slide-navigator {
    width: 100px;
    background: #2d3748;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow-y: auto;
    flex-shrink: 0;
}

.project-outline .slide-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-outline .slide-thumbnail {
    width: 80px;
    height: 60px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 3px solid transparent;
    position: relative;
}

/* Remove hover effect as requested */
.project-outline .slide-thumbnail:hover {
    /* No hover effect */
}

/* Better click feedback for active slide */
.project-outline .slide-thumbnail.active {
    border-color: #667eea;
    background: #f0f4ff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4),
                0 4px 12px rgba(102, 126, 234, 0.3);
    transform: scale(1.02);
}

/* Click animation feedback */
.project-outline .slide-thumbnail:active:not(.add-slide) {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

.project-outline .slide-thumbnail.add-slide {
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
}

.project-outline .slide-thumbnail.add-slide:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.project-outline .slide-number {
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
}

.project-outline .slide-thumbnail.add-slide .slide-number {
    color: rgba(255, 255, 255, 0.7);
    font-size: 32px;
}

/* Map Content */
.project-outline .outline-map-content {
    flex: 1 1;
    display: flex;
    flex-direction: column;
}

/* Map Controls - Highly Specific Selectors */
.project-outline .outline-map-wrapper .outline-map-controls {
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.project-outline .outline-map-wrapper .outline-map-controls .controls-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.project-outline .outline-map-wrapper .outline-map-controls .outline-map-controls-btn {
    padding: 10px 12px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-outline .outline-map-wrapper .outline-map-controls .outline-map-controls-btn:hover:not(:disabled) {
    border-color: #333;
    background: #f5f5f5;
}

.project-outline .outline-map-wrapper .outline-map-controls .outline-map-controls-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.project-outline .outline-map-wrapper .outline-map-controls .outline-map-controls-btn svg {
    width: 20px;
    height: 20px;
}

.project-outline .outline-map-wrapper .outline-map-controls .outline-btn-text {
    font-size: 14px;
    font-weight: 600;
}

/* Export Menu - Positioned from toolbar */
.project-outline .outline-map-wrapper .outline-toolbar-export-menu {
    position: absolute;
    top: 70px;
    right: 180px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    animation: slideDown 0.2s ease;
}

/* Export Dropdown - More Specific */
.project-outline .outline-map-wrapper .outline-export-dropdown {
    position: relative;
}

.project-outline .outline-map-wrapper .outline-export-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-outline .outline-map-wrapper .outline-export-menu-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    color: #333;
}

.project-outline .outline-map-wrapper .outline-export-menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.project-outline .outline-map-wrapper .outline-export-menu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.project-outline .outline-map-wrapper .outline-export-menu-item:hover {
    background: #f5f5f5;
    color: #333;
}

/* Version History Panel */
/* Version History Panel - More specific selectors */
.project-outline .outline-map-wrapper .version-history-panel {
    margin-top: 15px;
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.project-outline .outline-map-wrapper .version-history-panel .version-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.project-outline .outline-map-wrapper .version-history-panel .version-history-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.project-outline .outline-map-wrapper .version-history-panel .version-history-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-outline .outline-map-wrapper .version-history-panel .save-version-btn {
    padding: 8px 12px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.project-outline .outline-map-wrapper .version-history-panel .save-version-btn:hover {
    background: #218838;
}

.project-outline .outline-map-wrapper .version-history-panel .close-panel-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 24px;
    height: 24px;
}

.project-outline .outline-map-wrapper .version-history-panel .close-panel-btn:hover {
    color: #333;
}

.project-outline .outline-map-wrapper .version-history-panel .version-history-list {
    max-height: 200px;
    overflow-y: auto;
}

.project-outline .outline-map-wrapper .version-history-panel .version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.project-outline .outline-map-wrapper .version-history-panel .version-item:hover {
    background: #e9ecef;
}

.project-outline .outline-map-wrapper .version-history-panel .version-info {
    flex: 1 1;
}

.project-outline .outline-map-wrapper .version-history-panel .version-name {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.project-outline .outline-map-wrapper .version-history-panel .version-date {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.project-outline .outline-map-wrapper .version-history-panel .version-description {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.project-outline .outline-map-wrapper .version-history-panel .restore-version-btn {
    padding: 6px 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.project-outline .outline-map-wrapper .version-history-panel .restore-version-btn:hover {
    background: #0056b3;
}

.project-outline .save-version-dialog {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.project-outline .no-versions {
    text-align: center;
    color: #999;
    padding: 20px;
    margin: 0;
}

.project-outline .outline-map-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-outline .outline-map-container-integrated {
    flex: 1 1;
    position: relative;
    background: white;
    overflow: hidden;
}

.project-outline .outline-map-svg {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 800px;
}

.project-outline .map-element {
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-outline .chapter-element {
    fill: #667eea;
    stroke: #fff;
    stroke-width: 2;
}

.project-outline .chapter-element:hover {
    fill: #764ba2;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.project-outline .character-element {
    fill: #4ecdc4;
    stroke: #fff;
    stroke-width: 2;
}

.project-outline .character-element:hover {
    fill: #44a3a0;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.project-outline .scene-element {
    fill: #ff6b6b;
    stroke: #fff;
    stroke-width: 2;
}

.project-outline .scene-element:hover {
    fill: #ee5a52;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.project-outline .concept-element {
    fill: #ffd93d;
    stroke: #fff;
    stroke-width: 2;
}

.project-outline .concept-element:hover {
    fill: #ffc107;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.project-outline .map-element-text {
    font-size: 14px;
    font-weight: 600;
    fill: white;
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
}

.project-outline .map-element-subtitle {
    font-size: 11px;
    fill: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

/* List View */
.project-outline .outline-list-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.project-outline .list-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.project-outline .search-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-outline .search-input {
    flex: 1 1;
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.project-outline .search-input:focus {
    outline: none;
    border-color: #667eea;
}

.project-outline .filter-select {
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.project-outline .filter-select:focus {
    outline: none;
    border-color: #667eea;
}

.project-outline .clear-filters-btn {
    padding: 10px 15px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.project-outline .clear-filters-btn:hover {
    background: #c0392b;
}

.project-outline .sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-outline .filter-results-count {
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.project-outline .sort-controls label {
    font-weight: 600;
    color: #333;
}

.project-outline .sort-controls select {
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
}

.project-outline .sort-order-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s ease;
}

.project-outline .sort-order-btn:hover {
    background: #764ba2;
}

/* List Categories */
.project-outline .list-categories {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.project-outline .category-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.project-outline .category-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}

.project-outline .category-header:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.project-outline .category-header-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.project-outline .category-header-left {
    display: flex;
    align-items: center;
    flex: 1 1;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}

.project-outline .category-header-left:hover {
    opacity: 0.9;
}

.project-outline .add-element-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-outline .add-element-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.project-outline .category-icon {
    font-size: 24px;
    margin-right: 10px;
}

.project-outline .category-title {
    flex: 1 1;
    font-weight: 600;
    font-size: 16px;
}

.project-outline .expand-icon {
    font-size: 14px;
}

.project-outline .category-items {
    max-height: 400px;
    overflow-y: auto;
}

.project-outline .list-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.project-outline .list-item:hover {
    background: rgba(102, 126, 234, 0.1);
}

.project-outline .list-item:last-child {
    border-bottom: none;
}

/* Drag and Drop Styles */
.project-outline .list-item.draggable {
    cursor: move;
}

.project-outline .list-item.dragging {
    opacity: 0.5;
    background: rgba(102, 126, 234, 0.2);
}

.project-outline .list-item.drag-over {
    border-top: 3px solid #667eea;
    background: rgba(102, 126, 234, 0.15);
}

.project-outline .drag-handle {
    margin-right: 12px;
    color: #999;
    font-size: 16px;
    cursor: grab;
    -webkit-user-select: none;
            user-select: none;
}

.project-outline .drag-handle:active {
    cursor: grabbing;
}

.item-number,
.project-outline .item-name {
    font-weight: 600;
    color: #333;
    margin-right: 15px;
}

.item-title,
.item-role,
.item-location,
.project-outline .item-type {
    flex: 1 1;
    color: #666;
}

.project-outline .item-word-count {
    color: #999;
    font-size: 14px;
}

.project-outline .empty-category {
    padding: 30px 20px;
    text-align: center;
    color: #999;
}

.project-outline .empty-category p {
    margin: 0;
    font-size: 14px;
}

/* Detail Panel */
.project-outline .detail-panel {
    width: 400px;
    background: white;
    border-left: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.project-outline .detail-panel.empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-outline .empty-state {
    text-align: center;
    color: #999;
    padding: 40px;
}

.project-outline .detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #4a5568;
    color: white;
}

.project-outline .detail-header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-outline .detail-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

/* Note header text color */
.project-outline .detail-header[style*="background: rgb(236, 201, 75)"] h2,
.project-outline .detail-header[style*="background: #ecc94b"] h2 {
    color: #744210;
}

/* Settings header with gray background */
.project-outline .settings-header-bar {
    background: #6b7280;
    color: white;
}

.project-outline .settings-header-bar h2 {
    color: white;
}

.project-outline .save-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    animation: fadeIn 0.3s ease;
}

.project-outline .save-status.saving {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.project-outline .save-status.saved {
    background: rgba(72, 187, 120, 0.15);
    color: #2d7a4f;
    font-weight: 500;
}

.project-outline .save-status.error {
    background: rgba(231, 76, 60, 0.2);
    color: #ff6b6b;
}

.project-outline .detail-actions {
    display: flex;
    gap: 10px;
}

.edit-btn,
.save-btn,
.cancel-btn,
.project-outline .delete-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-outline .edit-btn {
    background: white;
    color: #4a5568;
    border: none;
    padding: 8px 24px;
    min-width: 80px;
}

.project-outline .edit-btn:hover {
    background: rgba(255, 255, 255, 0.95);
}

.project-outline .save-btn {
    background: #48bb78;
    color: white;
}

.project-outline .save-btn:hover:not(:disabled) {
    background: #38a169;
}

.save-btn:disabled,
.project-outline .cancel-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.project-outline .cancel-btn {
    background: white;
    color: #744210;
    border: 2px solid rgba(116, 66, 16, 0.3);
}

.project-outline .cancel-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(116, 66, 16, 0.5);
}

.project-outline .delete-btn {
    background: #e74c3c;
    color: white;
}

.project-outline .delete-btn:hover {
    background: #c0392b;
}

.project-outline .delete-btn.icon-only {
    padding: 8px;
    min-width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #ddd;
}

.project-outline .delete-btn.icon-only:hover {
    background: #f5f5f5;
    border-color: #999;
}

.project-outline .delete-btn.icon-only svg {
    width: 20px;
    height: 20px;
    color: #000;
}

/* Detail Content */
.project-outline .detail-content {
    flex: 1 1;
    overflow-y: auto;
    padding: 20px;
}

.project-outline .detail-section {
    margin-bottom: 20px;
}

.project-outline .detail-section label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-outline .detail-section p {
    margin: 0;
    color: #666;
    line-height: 1.6;
}

.detail-section input,
.project-outline .detail-section textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.detail-section input:focus,
.project-outline .detail-section textarea:focus {
    outline: none;
    border-color: #667eea;
}

.project-outline .detail-section textarea {
    resize: vertical;
    min-height: 60px;
}

/* Loading State */
.project-outline .outline-loading {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 100;
}

.project-outline .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.project-outline .outline-loading p {
    color: white;
    margin-top: 20px;
    font-size: 18px;
}

/* Keyboard Shortcuts Help Panel */
.project-outline .keyboard-help-panel {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.project-outline .help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px 16px 0 0;
}

.project-outline .help-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.project-outline .help-content {
    padding: 30px;
    overflow-y: auto;
}

.project-outline .shortcut-section {
    margin-bottom: 30px;
}

.project-outline .shortcut-section:last-child {
    margin-bottom: 0;
}

.project-outline .shortcut-section h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #667eea;
    font-weight: 600;
}

.project-outline .shortcut-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.project-outline .shortcut-item:last-child {
    border-bottom: none;
}

.project-outline .shortcut-item kbd {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.project-outline .shortcut-item span {
    flex: 1 1;
    color: #333;
    font-size: 15px;
}

.project-outline .tips-list {
    margin: 0;
    padding-left: 20px;
    color: #666;
}

.project-outline .tips-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.project-outline .tips-list li:last-child {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .detail-panel {
        width: 350px;
    }
}

@media (max-width: 768px) {
    .outline-body {
        flex-direction: column;
    }

    .detail-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid #e0e0e0;
        max-height: 50vh;
    }

    .outline-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .outline-header h1 {
        width: 100%;
        order: -1;
    }
}

/* Zoom Controls */
.project-outline .zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.project-outline .zoom-dropdown {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    min-width: 80px;
    transition: all 0.2s ease;
}

.project-outline .zoom-dropdown:hover {
    border-color: #333;
}

.project-outline .zoom-dropdown:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.project-outline .zoom-btn {
    padding: 6px !important;
    min-width: auto !important;
}

.project-outline .zoom-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Footer */
.project-outline .outline-footer {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 11px;
    color: #718096;
    flex-shrink: 0;
}
.projects-container {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.projects-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.projects-title-section h1 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.projects-title-section p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin: 0;
}

/* Projects tabs now use shared tab system from unified-design-system.css */

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.section-header::after,
.section-header::before {
    display: none !important;
}

.filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filters select,
.filters input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    min-width: 120px;
    flex: 1 1;
}

.filters input {
    min-width: 140px;
    flex: 1.2 1;
}

.filters select:focus,
.filters input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.add-project-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-project-btn::after,
.add-project-btn::before {
    display: none !important;
}

.add-project-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.add-project-btn:focus {
    background: #4338ca;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
    outline: none;
}

/* Project sections */
.my-projects-section,
.public-projects-section {
    background: transparent;
}

/* Ensure no lines appear after section-header */
.my-projects-section .section-header + * {
    border-top: none !important;
    margin-top: 0 !important;
}

.public-projects-section .section-header + * {
    border-top: none !important;
    margin-top: 0 !important;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

/* Project Card */
.project-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 3.5rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
    min-height: 200px;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #4f46e5;
}

.project-header {
    margin-bottom: 1rem;
}

.project-title-section {
    padding-right: 5rem; /* Space for action buttons */
}

.project-title {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.project-status,
.project-genre {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.project-genre {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.project-genre svg {
    flex-shrink: 0;
}

.project-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.25rem !important;
    z-index: 10;
}

/* Force tight spacing on dashboard projects - Cache Buster v2 */
.dashboard-tab-content .project-actions,
.dashboard .project-actions,
.projects-grid .project-card .project-actions,
.projects-container .project-actions,
div.projects-container .projects-grid .project-card .project-header .project-actions {
    gap: 0.25rem !important;
    column-gap: 0.25rem !important;
    /* Force browser cache refresh */
}

/* Override Social.css action-btn gap that's interfering */
.project-actions .action-btn {
    gap: 0 !important;
    padding: 0.5rem !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex-shrink: 0 !important;
    background: rgba(248, 250, 252, 0.95) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* Alternative approach using margin for spacing */
.project-actions .action-btn + .action-btn {
    margin-left: 0.25rem !important;
}

.project-actions .action-btn:first-child {
    margin-left: 0 !important;
}

.action-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.edit-btn {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}

/* More specific selector for dashboard context */
.dashboard-tab-content .edit-btn,
.dashboard .edit-btn,
.dashboard-tab-content .project-actions .edit-btn,
.dashboard .project-actions .edit-btn,
.project-actions .action-btn.edit-btn {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Force proper background for edit buttons everywhere */
button.action-btn.edit-btn,
.project-card .action-btn.edit-btn,
.projects-grid .project-card .action-btn.edit-btn {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Make both edit and delete SVGs black by default */
.edit-btn svg,
.delete-btn svg {
    stroke: #000000;
}

.edit-btn:hover {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
}

.edit-btn:hover svg {
    stroke: #000000;
}

.delete-btn:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

.delete-btn:hover svg {
    stroke: #000000;
}

/* Project Photo Styles */
.project-photo {
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.project-main-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.project-card:hover .project-main-image {
    transform: scale(1.02);
}

.project-photo-placeholder {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.placeholder-icon {
    font-size: 2rem;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}

.placeholder-text {
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Project Description Styles */
.project-description-section {
    margin-bottom: 1rem;
}

.project-description-text {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-description-placeholder {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
}

.project-description-placeholder .placeholder-text {
    color: #94a3b8;
    font-size: 0.875rem;
    font-style: italic;
}

/* Project Stats */
.project-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.project-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.project-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-stat-value {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    line-height: 1.4;
}

.progress-item .project-stat-value {
    font-size: 12px;
    color: #4b5563;
    font-weight: 400;
}

.project-stat-value.urgent {
    font-weight: 600;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 10px;
    background: linear-gradient(45deg, #f9fafb 25%, transparent 25%), 
                linear-gradient(-45deg, #f9fafb 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f9fafb 75%), 
                linear-gradient(-45deg, transparent 75%, #f9fafb 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
    margin: 6px 0;
    border: 1px solid #e5e7eb;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 5px;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 3s infinite;
    opacity: 0.7;
}

.progress-fill.time-progress {
    background: linear-gradient(90deg, #10b981, #059669);
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Project Footer */
.project-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.project-author {
    font-size: 0.75rem;
    color: #64748b;
}

.featured-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: #f59e0b;
    background: #fef3c7;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* Loading and Empty States */
.loading {
    text-align: center;
    padding: 3rem;
    color: #64748b;
    font-size: 1rem;
}

.project-empty-state {
    text-align: center;
    padding: 3rem;
    color: #64748b;
    grid-column: 1 / -1; /* Span full width of grid */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.project-empty-state p {
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.project-btn-secondary {
    background: transparent;
    color: #4f46e5;
    border: 1px solid #4f46e5;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-btn-secondary:hover {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

/* Modal */
.project-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.project-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.project-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 0 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 1.5rem;
}

.project-modal-header h3 {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.close-btn:hover {
    color: #374151;
}

.project-modal-body {
    padding: 0 1.5rem;
}

.project-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 1.5rem;
}

/* Form Styles */
.project-form-group {
    margin-bottom: 1rem;
}

.project-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
}

.project-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.project-form-group input,
.project-form-group select,
.project-form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.project-form-group input:focus,
.project-form-group select:focus,
.project-form-group textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.project-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.project-btn-primary {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-btn-primary:hover:not(:disabled) {
    background: #4338ca;
}

.project-btn-primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .projects-container {
        padding: 1rem;
    }
    
    /* Projects tabs responsive styles now handled by shared tab system */
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filters {
        flex-direction: column;
    }
    
    .filters select,
    .filters input {
        min-width: auto;
        width: 100%;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .project-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .project-actions {
        align-self: flex-end;
    }
    
    .project-form-row {
        grid-template-columns: 1fr;
    }
    
    .project-modal {
        margin: 1rem;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .projects-header h1 {
        font-size: 1.5rem;
    }
    
    .project-card {
        padding: 1rem;
    }
    
    .project-title {
        font-size: 1.1rem;
    }
    
    .project-modal-header,
    .project-modal-body,
    .project-modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Photo Upload Styles */
.photo-upload-section {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: transparent;
}

.photo-upload-section label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 5px;
    display: block;
}

.add-project-form .photo-upload-section label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.photo-help-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 15px;
}

.photo-upload-area {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.photo-upload-area:hover {
    border-color: rgba(79, 70, 229, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.photo-upload-area.drag-over {
    border-color: rgba(79, 70, 229, 0.8);
    background: rgba(79, 70, 229, 0.1);
}

.photo-upload-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
}

.upload-icon {
    font-size: 32px;
    opacity: 0.7;
}

.upload-text {
    font-size: 16px;
    font-weight: 500;
    color: rgba(79, 70, 229, 1);
}

.upload-hint {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.photo-previews {
    margin-top: 20px;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 15px;
    gap: 15px;
    margin-top: 15px;
}

.photo-preview {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.photo-preview:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.15);
}

.photo-preview.main-photo {
    border-color: #28a745;
    box-shadow: 0 2px 8px rgba(40,167,69,0.2);
}

.photo-preview img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.photo-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-preview:hover .photo-overlay {
    opacity: 1;
}

.remove-photo-btn {
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.remove-photo-btn:hover {
    background: #dc3545;
}

.main-photo-indicator {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(40, 167, 69, 0.9);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.checkmark {
    font-size: 10px;
}

.main-label {
    font-size: 10px;
    font-weight: 500;
}

.photo-info {
    padding: 8px;
    background: white;
    border-top: 1px solid #e0e0e0;
}

.photo-name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.photo-size {
    display: block;
    font-size: 11px;
    color: #666;
}





.other-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.other-stats .project-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1;
    min-width: 120px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .progress-section {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .other-stats {
        flex-direction: column;
        gap: 10px;
    }
}



.save-project-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.update-project-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Toast Notification */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease-out;
    max-width: 400px;
    min-width: 300px;
}

.toast-success {
    background: #10b981;
    color: white;
}

.toast-error {
    background: #ef4444;
    color: white;
}

.toast-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    gap: 1rem;
}

.toast-message {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    flex: 1 1;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Add Project Section */
.add-project-section {
    background: transparent;
    border: none;
    outline: none;
    border-radius: 12px;
    padding: 2rem;
    margin: 1rem auto 0;
    box-shadow: none;
    width: 100%;
}

.add-project-section .section-header {
    text-align: center;
    margin-bottom: 2rem;
    border: none !important;
    box-shadow: none !important;
}

.add-project-section .section-header h2 {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.add-project-section .section-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin: 0;
}

.add-project-form {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
}

.add-project-form .project-form-group {
    margin-bottom: 1.5rem;
}

.add-project-form .project-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.add-project-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
}

.add-project-form input,
.add-project-form textarea,
.add-project-form select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #374151;
    background: white;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.add-project-form input:focus,
.add-project-form textarea:focus,
.add-project-form select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.add-project-form textarea {
    resize: vertical;
    min-height: 100px;
}

.project-form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.create-project-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.create-project-btn:hover:not(:disabled) {
    background: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.create-project-btn:disabled {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cancel-btn {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.cancel-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Dashboard-specific styling for add project form */
.dashboard-tab-content .add-project-section {
    margin: 1rem 2rem 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-tab-content .add-project-form {
    max-width: none;
    width: 100%;
    margin: 0;
}

@media (max-width: 768px) {
    .add-project-form .project-form-row {
        grid-template-columns: 1fr;
    }
    
    .project-form-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .create-project-btn,
    .cancel-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .dashboard-tab-content .add-project-section {
        margin: 1rem 1rem 2rem;
    }
} 
.location-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.location-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.back-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.back-btn:hover {
    border-color: var(--accent-color);
    background: var(--accent-color-light);
}

.location-title-section {
    flex: 1 1;
    min-width: 300px;
}

.location-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.category-icon {
    font-size: 2rem;
}

.location-address {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
}

.location-actions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.start-writing-btn.primary {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.start-writing-btn.primary:hover {
    background: var(--accent-color-dark);
    transform: translateY(-1px);
}

.favorite-btn,
.edit-btn,
.delete-btn {
    width: 44px;
    height: 44px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-btn:hover {
    border-color: #ffd700;
    background: #ffd700;
    color: white;
}

.favorite-btn.favorited {
    border-color: #ffd700;
    background: #ffd700;
    color: white;
}

.edit-btn:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: white;
}

.delete-btn:hover {
    border-color: var(--error-color);
    background: var(--error-color);
    color: white;
}

.main-photo-section {
    margin-bottom: 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.main-photo {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.quick-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    margin-bottom: 30px;
}

.info-card {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 2px solid var(--border-color);
    transition: all 0.2s ease;
}

.info-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.info-icon {
    font-size: 1.5rem;
}

.info-content {
    flex: 1 1;
}

.info-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.info-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.description-section,
.tips-section {
    margin-bottom: 30px;
}

.description-section h3,
.tips-section h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.description-text,
.tips-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.detail-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
}

.tab-btn {
    padding: 12px 20px;
    background: none;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

.tab-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--bg-secondary);
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.tab-content {
    min-height: 300px;
}

.overview-tab {
    padding: 20px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.stat-card {
    background: var(--bg-secondary);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid var(--border-color);
}

.stat-card h4 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
}

.confirmation-modal {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 30px;
    max-width: 400px;
    margin: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.confirmation-modal h3 {
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.confirmation-modal p {
    margin: 0 0 24px 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.confirmation-actions .cancel-btn,
.confirmation-actions .delete-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.confirmation-actions .cancel-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

.confirmation-actions .delete-btn {
    background: var(--error-color);
    color: white;
}

.confirmation-actions .delete-btn:hover {
    background: var(--error-color-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
    .location-detail {
        padding: 16px;
    }
    
    .location-detail-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .location-title {
        font-size: 2rem;
    }
    
    .location-actions {
        justify-content: stretch;
    }
    
    .start-writing-btn.primary {
        flex: 1 1;
        justify-content: center;
    }
    
    .main-photo {
        height: 300px;
    }
    
    .quick-info-cards {
        grid-template-columns: 1fr;
    }
    
    .detail-tabs {
        flex-wrap: wrap;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    .location-title {
        font-size: 1.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .main-photo {
        height: 250px;
    }
    
    .info-card {
        padding: 16px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
} 
.location-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    position: relative;
}

.location-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: #4f46e5;
}

/* Location Photo */
.location-photo {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.location-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.location-card:hover .location-image {
    transform: scale(1.05);
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    font-size: 3rem;
    opacity: 0.8;
    color: white;
}

/* Photo badges */
.photo-count-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.privacy-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

/* Location Info */
.location-info {
    padding: 20px;
}

.location-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.location-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    flex: 1 1;
}

.category-icon {
    font-size: 1.1rem;
}

.location-name {
    flex: 1 1;
}

.favorite-indicator {
    font-size: 1.2rem;
    color: #ffd700;
}

/* Address */
.location-address {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Category */
.location-category {
    color: #4f46e5;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Description */
.location-description {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Stats */
.location-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.stat {
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Tips */
.location-tips {
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #64748b;
    border-left: 3px solid #4f46e5;
    margin-bottom: 16px;
}

/* Action Buttons */
.location-actions {
    display: flex;
    gap: 8px;
}

.start-writing-btn,
.view-details-btn {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.start-writing-btn {
    background: var(--color-primary-500);
    border-color: var(--color-primary-600);
    color: white;
}

.start-writing-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.view-details-btn {
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

.view-details-btn:hover {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.05);
    color: #4f46e5;
}

.btn-icon {
    font-size: 1rem;
}

.btn-text {
    font-size: 0.9rem;
}

/* Phase 4: Compact Card Variant */
.location-card.compact {
    max-width: 280px;
}

.location-card.compact .location-photo {
    height: 160px;
}

.location-card.compact .location-info {
    padding: 16px;
}

.location-card.compact .location-title {
    font-size: 1.1rem;
}

.location-card.compact .location-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.location-card.compact .location-tips {
    display: none; /* Hide tips in compact view */
}

.location-card.compact .location-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.location-card.compact .stat {
    font-size: 0.8rem;
}

.location-card.compact .location-actions {
    gap: 6px;
}

.location-card.compact .start-writing-btn,
.location-card.compact .view-details-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.location-card.compact .btn-text {
    display: none; /* Show only icons in compact view */
}

.location-card.compact .btn-icon {
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .location-card {
        border-radius: 12px;
    }
    
    .location-photo {
        height: 180px;
    }
    
    .location-info {
        padding: 16px;
    }
    
    .location-title {
        font-size: 1.1rem;
    }
    
    .location-actions {
        flex-direction: column;
    }
    
    .start-writing-btn,
    .view-details-btn {
        flex: none;
    }
}

@media (max-width: 480px) {
    .location-photo {
        height: 160px;
    }
    
    .location-info {
        padding: 14px;
    }
    
    .location-title {
        font-size: 1rem;
    }
    
    .location-stats {
        gap: 8px;
    }
    
    .start-writing-btn,
    .view-details-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
} 
/* Locations Page Styles */
.page-container.locations {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
}

/* Header */
.locations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.header-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.header-content p {
    color: #64748b;
    font-size: 1.1rem;
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 1rem;
}

.add-location-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-location-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Search Section */
.locations-search {
    margin-bottom: 1.5rem;
}

.search-input {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Discover Section with Collapsible Search & Filters */
.discover-section {
    margin-bottom: 2rem;
}

.search-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.search-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #f7fafc;
}

.search-toggle-btn .toggle-icon {
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
}

.search-toggle-btn .toggle-icon.expanded {
    transform: rotate(0deg);
}

/* Discover Filters Container */
.discover-filters {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    max-height: 500px;
    overflow: visible;
    opacity: 1;
    margin-bottom: 1.5rem;
}

.discover-filters.collapsed {
    max-height: 0;
    padding: 0 20px;
    margin-bottom: 0;
    opacity: 0;
    border-color: transparent;
    overflow: hidden;
}

/* Search and Filters Layout */
.discover-search-section {
    margin-bottom: 1.5rem;
}

.discover-search-input {
    width: 100%;
    padding: 14px 20px;
    padding-left: 44px;
    font-size: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
}

.discover-search-wrapper {
    position: relative;
}

.discover-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.discover-search-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Category Pills */
.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.category-pill {
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-pill:hover {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.05);
}

.category-pill.selected {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: white;
    border-color: transparent;
}

.category-pill.all-selected {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: transparent;
}

/* Advanced Filters */
.advanced-filters-section {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
}

.advanced-filters-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Locations Grid */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.empty-state p {
    color: #64748b;
    font-size: 1rem;
    margin: 0 0 1.5rem 0;
}

/* No locations to discover - light text */
.empty-state.discover-empty p {
    color: #94a3b8;
    opacity: 0.8;
}

.add-first-location-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-first-location-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Loading State */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #e2e8f0;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-state p {
    color: #64748b;
    font-size: 1rem;
}

/* Error Banner */
.error-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    margin-bottom: 1rem;
}

.error-banner button {
    background: none;
    border: none;
    color: #991b1b;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .locations-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .page-container.locations {
        padding: 1rem;
    }
    
    .locations-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-content h1 {
        font-size: 2rem;
    }
    
    .header-actions {
        width: 100%;
    }
    
    .add-location-btn {
        width: 100%;
        justify-content: center;
    }
    
    .locations-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .filter-options {
        grid-template-columns: 1fr;
    }
    
    .category-pills {
        gap: 8px;
    }
    
    .category-pill {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    .search-toggle-btn {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    .discover-filters {
        padding: 15px;
    }
    
    .discover-filters.collapsed {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .header-content h1 {
        font-size: 1.75rem;
    }
    
    .header-content p {
        font-size: 1rem;
    }
    
    .empty-icon {
        font-size: 3rem;
    }
    
    .empty-state h2 {
        font-size: 1.25rem;
    }
}
.privacy-policy-container {
    min-height: 100vh;
    background: var(--background-primary);
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.privacy-policy-content {
    max-width: 800px;
    margin: 0 auto;
    background: var(--card-background);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.privacy-policy-header {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
    padding: 40px 30px;
    text-align: center;
    color: white;
}

.privacy-policy-header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.last-updated {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 300;
}

.privacy-policy-body {
    padding: 40px 30px;
    line-height: 1.7;
    color: var(--text-primary);
}

.policy-section {
    margin-bottom: 40px;
}

.policy-section:last-child {
    margin-bottom: 20px;
}

.policy-section h2 {
    color: var(--accent-color);
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.policy-section h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 25px 0 15px 0;
}

.policy-section h4 {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 20px 0 10px 0;
}

.policy-section p {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.policy-section ul {
    margin: 15px 0;
    padding-left: 20px;
}

.policy-section li {
    margin: 8px 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.policy-section li strong {
    color: var(--accent-color);
    font-weight: 600;
}

/* Contact Information Styling */
.contact-info {
    background: var(--background-secondary);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
    margin: 20px 0;
}

.contact-info p {
    margin: 8px 0;
    font-size: 1rem;
}

.contact-info strong {
    color: var(--accent-color);
    font-weight: 600;
}

/* Effective Date Section */
.effective-date {
    background: var(--background-secondary);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.effective-date h2 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

/* Footer */
.privacy-policy-footer {
    background: var(--background-secondary);
    padding: 30px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.privacy-policy-footer p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .privacy-policy-container {
        padding: 10px;
    }
    
    .privacy-policy-header {
        padding: 30px 20px;
    }
    
    .privacy-policy-header h1 {
        font-size: 2rem;
    }
    
    .privacy-policy-body {
        padding: 30px 20px;
    }
    
    .policy-section h2 {
        font-size: 1.5rem;
    }
    
    .policy-section h3 {
        font-size: 1.2rem;
    }
    
    .privacy-policy-footer {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .privacy-policy-header h1 {
        font-size: 1.8rem;
    }
    
    .privacy-policy-body {
        padding: 20px 15px;
    }
    
    .contact-info {
        padding: 15px;
    }
    
    .effective-date {
        padding: 20px;
    }
}

/* Print Styles */
@media print {
    .privacy-policy-container {
        background: white;
        padding: 0;
    }
    
    .privacy-policy-content {
        box-shadow: none;
        border-radius: 0;
    }
    
    .privacy-policy-header {
        background: none !important;
        color: black !important;
        text-shadow: none !important;
    }
    
    .policy-section h2 {
        color: black !important;
        border-bottom: 1px solid #ccc;
    }
    
    .contact-info {
        background: #f5f5f5 !important;
        border-left: 2px solid #666;
    }
    
    .effective-date {
        background: #f9f9f9 !important;
        border: 1px solid #ccc;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .privacy-policy-container {
        background: #1a1a1a;
        background: var(--background-primary, #1a1a1a);
    }
    
    .privacy-policy-content {
        background: #2d2d2d;
        background: var(--card-background, #2d2d2d);
        color: #ffffff;
        color: var(--text-primary, #ffffff);
    }
    
    .policy-section h2 {
        color: #4ecdc4;
        color: var(--accent-color, #4ecdc4);
        border-bottom-color: #444;
        border-bottom-color: var(--border-color, #444);
    }
    
    .contact-info {
        background: #333;
        background: var(--background-secondary, #333);
    }
    
    .effective-date {
        background: #333;
        background: var(--background-secondary, #333);
        border-color: #444;
        border-color: var(--border-color, #444);
    }
    
    .privacy-policy-footer {
        background: #333;
        background: var(--background-secondary, #333);
        border-top-color: #444;
        border-top-color: var(--border-color, #444);
    }
}

/* Accessibility Improvements */
.policy-section h2:focus,
.policy-section h3:focus,
.policy-section h4:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Smooth Scroll for Internal Links */
html {
    scroll-behavior: smooth;
}

/* Table of Contents Styling (if needed) */
.toc {
    background: var(--background-secondary);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid var(--border-color);
}

.toc h3 {
    margin-top: 0;
    color: var(--accent-color);
}

.toc ul {
    list-style: none;
    padding-left: 0;
}

.toc li {
    margin: 5px 0;
}

.toc a {
    color: var(--text-primary);
    text-decoration: none;
    padding: 5px 0;
    display: block;
    border-radius: 4px;
    padding-left: 10px;
    transition: background-color 0.2s;
}

.toc a:hover {
    background: var(--accent-color);
    color: white;
}
/* Higher specificity to override any global styles */
body.landing-page-active .published-landing {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #f5f5f7;
    overflow-x: hidden !important;
    overflow-y: auto;
    padding: 0;
}

/* Fallback for when body class might not be set yet */
.published-landing {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #f5f5f7;
    overflow-x: hidden !important;
    overflow-y: auto;
    padding: 0;
}

/* Force proper mobile layout on production - MAXIMUM SPECIFICITY */
@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body.landing-page-active {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    body.landing-page-active .published-landing {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    body.landing-page-active .landing-margin-container {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    body.landing-page-active .landing-canvas-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    body.landing-page-active .landing-canvas {
        /* Canvas itself is scaled, don't constrain its width */
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        transform-origin: 0 0 !important;
        box-sizing: border-box !important;
    }
}

.landing-margin-container {
    position: relative;
    /* Background color set inline from design settings */
}

.landing-canvas-wrapper {
    position: relative;
    background: #fff0;
    /* Position set inline for margins */
}

.landing-canvas {
    position: relative;
    /* Prevent sub-pixel rendering gaps */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.landing-section {
    width: 100%;
    position: relative;
    border: none;
    outline: none;
}

.landing-element {
    position: absolute;
}

.landing-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f5f5f7;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.landing-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f5f5f7;
    gap: 20px;
}

.landing-error h2 {
    color: #4b5563;
    font-size: 24px;
    margin: 0;
}

.landing-error button {
    padding: 12px 24px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.landing-error button:hover {
    background: #764ba2;
}

/*# sourceMappingURL=main.2351cd17.css.map*/