/* =============================================
   ALL THEMES ENHANCED - PART 2
   Frosted, Cosmos, Molten, Prism, Soft Light
============================================= */

/* =============================================
   FROSTED THEME - Winter Ice
============================================= */
html[data-theme="frosted"],
:root[data-theme="frosted"] {
    --color-background: #e8f4f8;
    --theme-radius-md: 16px;
    --theme-radius-lg: 20px;
}

html[data-theme="frosted"] body {
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f2 100%);
    background-attachment: fixed;
}

html[data-theme="frosted"] .glass-card,
html[data-theme="frosted"] .card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px) brightness(1.1);
    -webkit-backdrop-filter: blur(15px) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    position: relative;
}

html[data-theme="frosted"] .glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: left 0.5s ease;
}

html[data-theme="frosted"] .glass-card:hover::before {
  left: 100%;
}

html[data-theme="frosted"] .glass-card:hover {
 background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 48px rgba(59, 130, 246, 0.15);
    transform: translateY(-4px);
}

html[data-theme="frosted"] .btn,
html[data-theme="frosted"] .btn-primary,
html[data-theme="frosted"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card) {
    background: rgba(59, 130, 246, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #2563eb;
    border-radius: 16px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
    transition: all 0.3s ease;
}

html[data-theme="frosted"] .btn:hover {
    background: rgba(59, 130, 246, 0.25);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
    transform: translateY(-2px);
}

html[data-theme="frosted"] .pill-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

html[data-theme="frosted"] .pill-nav__item.active {
    background: rgba(59, 130, 246, 0.2);
    color: #2563eb;
    box-shadow: inset 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* =============================================
   COSMOS THEME - Deep Space
============================================= */
html[data-theme="cosmos"],
:root[data-theme="cosmos"] {
 --color-background: #0b0d21;
    --color-surface: #151830;
    --text-primary: #e0e7ff;
    --google-blue: #818cf8;
    --theme-radius-md: 12px;
}

html[data-theme="cosmos"] body {
    background: radial-gradient(ellipse at top, #1e1b4b 0%, #0b0d21 100%);
    background-attachment: fixed;
    position: relative;
}

html[data-theme="cosmos"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
  radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
      radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent);
  background-size: 
        200% 200%,
  200% 200%,
        200% 200%,
200% 200%,
        200% 200%,
        200% 200%;
    background-position: 
        0% 0%,
        40% 60%,
        130% 0%,
     70% 100%,
        20% 80%,
        90% 30%;
    animation: stars 200s linear infinite;
    pointer-events: none;
    opacity: 0.5;
}

@keyframes stars {
    from { background-position: 0% 0%, 40% 60%, 130% 0%, 70% 100%, 20% 80%, 90% 30%; }
    to { background-position: -200% -200%, -160% -140%, -70% -200%, -130% -100%, -180% -120%, -110% -170%; }
}

html[data-theme="cosmos"] .glass-card,
html[data-theme="cosmos"] .card {
    background: rgba(21, 24, 48, 0.8);
    border: 1px solid rgba(129, 140, 248, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
      0 0 40px rgba(129, 140, 248, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

html[data-theme="cosmos"] .glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
 background: radial-gradient(circle at 50% 0%, rgba(129, 140, 248, 0.1), transparent 50%);
  opacity: 0;
    transition: opacity 0.3s ease;
}

html[data-theme="cosmos"] .glass-card:hover::before {
    opacity: 1;
}

html[data-theme="cosmos"] .glass-card:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6),
       0 0 60px rgba(129, 140, 248, 0.2);
    transform: translateY(-4px);
}

html[data-theme="cosmos"] .btn,
html[data-theme="cosmos"] .btn-primary,
html[data-theme="cosmos"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card) {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    border: none;
  color: white;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 20px rgba(129, 140, 248, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

html[data-theme="cosmos"] .btn::before {
    content: '';
    position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

html[data-theme="cosmos"] .btn:hover::before {
    transform: translateX(100%);
}

html[data-theme="cosmos"] .btn:hover {
    box-shadow: 0 8px 32px rgba(129, 140, 248, 0.4),
    0 0 30px rgba(129, 140, 248, 0.3);
    transform: translateY(-2px);
}

html[data-theme="cosmos"] .pill-nav {
    background: rgba(21, 24, 48, 0.9);
    border: 1px solid rgba(129, 140, 248, 0.3);
    box-shadow: 0 4px 20px rgba(129, 140, 248, 0.2);
}

html[data-theme="cosmos"] .pill-nav__item.active {
    background: linear-gradient(135deg, #818cf8, #6366f1);
    color: white;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.5);
}

/* =============================================
   MOLTEN THEME - Lava Flow
============================================= */
html[data-theme="molten"],
:root[data-theme="molten"] {
    --color-background: #1a0000;
    --color-surface: #2d0a0a;
    --text-primary: #ffebe6;
    --google-blue: #ff4500;
    --theme-radius-md: 12px;
}

html[data-theme="molten"] body {
    background: radial-gradient(ellipse at center, #4a0000 0%, #1a0000 100%);
    background-attachment: fixed;
}

html[data-theme="molten"] .glass-card,
html[data-theme="molten"] .card {
    background: linear-gradient(135deg, rgba(45, 10, 10, 0.9) 0%, rgba(26, 0, 0, 0.8) 100%);
    border: 1px solid rgba(255, 69, 0, 0.3);
    box-shadow: 0 8px 32px rgba(255, 69, 0, 0.2),
         inset 0 1px 0 rgba(255, 69, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
 overflow: hidden;
}

html[data-theme="molten"] .glass-card::before {
    content: '';
  position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
  background: linear-gradient(90deg, 
      transparent,
        rgba(255, 69, 0, 0.8),
  rgba(255, 140, 0, 0.8),
        rgba(255, 69, 0, 0.8),
    transparent);
    background-size: 200% 100%;
    animation: moltenFlow 3s linear infinite;
}

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

html[data-theme="molten"] .glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
background: radial-gradient(
        circle at 30% 40%,
        rgba(255, 69, 0, 0.08) 0%,
  transparent 50%
    );
    animation: moltenPulse 4s ease-in-out infinite;
}

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

html[data-theme="molten"] .glass-card:hover {
    border-color: rgba(255, 69, 0, 0.5);
 box-shadow: 0 12px 48px rgba(255, 69, 0, 0.3),
        inset 0 1px 0 rgba(255, 69, 0, 0.2);
transform: translateY(-4px);
}

html[data-theme="molten"] .btn,
html[data-theme="molten"] .btn-primary,
html[data-theme="molten"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card) {
    background: linear-gradient(135deg, #ff4500 0%, #ff8c00 100%);
    border: none;
    color: white;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 20px rgba(255, 69, 0, 0.4),
     inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

html[data-theme="molten"] .btn:hover {
    background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
    box-shadow: 0 8px 32px rgba(255, 69, 0, 0.6),
                0 0 40px rgba(255, 140, 0, 0.4);
    transform: translateY(-2px);
}

html[data-theme="molten"] .pill-nav {
    background: rgba(45, 10, 10, 0.9);
    border: 1px solid rgba(255, 69, 0, 0.3);
box-shadow: 0 4px 20px rgba(255, 69, 0, 0.2);
}

html[data-theme="molten"] .pill-nav__item.active {
    background: linear-gradient(135deg, #ff4500, #ff8c00);
    color: white;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
}

/* =============================================
   PRISM THEME - Rainbow Refraction
============================================= */
html[data-theme="prism"],
:root[data-theme="prism"] {
    --color-background: #0f1117;
    --theme-radius-md: 12px;
}

html[data-theme="prism"] body {
    background: #0f1117;
}

html[data-theme="prism"] .glass-card,
html[data-theme="prism"] .card {
background: linear-gradient(135deg, rgba(15, 17, 23, 0.9) 0%, rgba(20, 23, 35, 0.9) 100%);
    border: 1px solid transparent;
    background-image: 
        linear-gradient(135deg, rgba(15, 17, 23, 0.9), rgba(20, 23, 35, 0.9)),
        linear-gradient(135deg, 
rgba(167, 139, 250, 0.5),
            rgba(52, 211, 153, 0.5),
         rgba(251, 191, 36, 0.5),
       rgba(248, 113, 113, 0.5),
            rgba(56, 189, 248, 0.5));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    position: relative;
}

html[data-theme="prism"] .glass-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg,
        rgba(167, 139, 250, 0.3),
    rgba(52, 211, 153, 0.3),
      rgba(251, 191, 36, 0.3),
        rgba(248, 113, 113, 0.3),
        rgba(56, 189, 248, 0.3));
    background-size: 400% 400%;
    animation: prismShift 8s ease-in-out infinite;
    border-radius: inherit;
    z-index: -1;
  opacity: 0;
    transition: opacity 0.3s ease;
}

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

html[data-theme="prism"] .glass-card:hover::before {
    opacity: 1;
}

html[data-theme="prism"] .glass-card:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(167, 139, 250, 0.2);
    transform: translateY(-4px);
}

html[data-theme="prism"] .btn,
html[data-theme="prism"] .btn-primary,
html[data-theme="prism"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card) {
    background: linear-gradient(135deg,
        rgba(167, 139, 250, 0.3),
      rgba(56, 189, 248, 0.3));
    border: 1px solid rgba(167, 139, 250, 0.5);
    color: #c4b5fd;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3);
    transition: all 0.3s ease;
}

html[data-theme="prism"] .btn:hover {
    background: linear-gradient(135deg,
        rgba(167, 139, 250, 0.5),
        rgba(56, 189, 248, 0.5));
    box-shadow: 0 8px 32px rgba(167, 139, 250, 0.4),
   0 0 30px rgba(56, 189, 248, 0.3);
    transform: translateY(-2px);
}

html[data-theme="prism"] .pill-nav {
    background: rgba(15, 17, 23, 0.9);
    border: 1px solid rgba(167, 139, 250, 0.3);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.2);
}

html[data-theme="prism"] .pill-nav__item.active {
    background: linear-gradient(135deg,
        rgba(167, 139, 250, 0.4),
        rgba(56, 189, 248, 0.4));
    color: #c4b5fd;
    box-shadow: 0 0 15px rgba(167, 139, 250, 0.4);
}

/* =============================================
   SOFT LIGHT THEME - Gentle Pastels
============================================= */
html[data-theme="softlight"],
:root[data-theme="softlight"] {
    --color-background: #fef3f0;
    --theme-radius-md: 16px;
}

html[data-theme="softlight"] body {
    background: linear-gradient(135deg, #fef3f0 0%, #fce8e3 100%);
    background-attachment: fixed;
}

html[data-theme="softlight"] .glass-card,
html[data-theme="softlight"] .card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(251, 146, 60, 0.15);
    box-shadow: 0 8px 32px rgba(251, 146, 60, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="softlight"] .glass-card:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 48px rgba(251, 146, 60, 0.12);
    transform: translateY(-4px) scale(1.01);
}

html[data-theme="softlight"] .btn,
html[data-theme="softlight"] .btn-primary,
html[data-theme="softlight"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card) {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    border: none;
    color: white;
    border-radius: 16px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 16px rgba(251, 146, 60, 0.25);
    transition: all 0.3s ease;
}

html[data-theme="softlight"] .btn:hover {
    box-shadow: 0 8px 24px rgba(251, 146, 60, 0.35);
    transform: translateY(-2px) scale(1.02);
}

html[data-theme="softlight"] .pill-nav {
  background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(251, 146, 60, 0.15);
}

html[data-theme="softlight"] .pill-nav__item.active {
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: white;
}