:root{
  --ice-primary: rgba(135,206,250,0.8); /* Soft sky blue */
  --ice-secondary: rgba(144,238,144,0.8); /* Soft light green */
  --ice-dark: #2c3e50; /* Soft dark blue-gray */
  --ice-light: rgba(240,248,255,0.9); /* Very soft blue-white */
  --ice-glow: rgba(135,206,250,0.2);
  --text: #2c3e50; /* Soft dark blue-gray */
  --muted: #7f8c8d; /* Soft gray */
  --border: rgba(189,195,199,0.3); /* Very soft border */
  --white: rgba(255,255,255,0.95);
  
  /* Zen Design Variables */
  --zen-breath-duration: 4s;
  --zen-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --zen-spacing: 1.618rem; /* Golden ratio spacing */
  --zen-radius: 16px;
  --zen-shadow: 0 8px 32px rgba(135,206,250,0.1);
  --zen-glow: 0 0 40px rgba(135,206,250,0.15);
}
body{
  background:linear-gradient(135deg, rgba(240,248,255,0.9) 0%, rgba(230,245,255,0.8) 50%, rgba(220,240,255,0.7) 100%);
  color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6; min-height:100vh; overflow-x:hidden;
  /* animation: zenBreath var(--zen-breath-duration) var(--zen-ease) infinite; */
}

/* Zen Breathing Animation */
@keyframes zenBreath {
  0%, 100% { 
    background: linear-gradient(135deg, rgba(240,248,255,0.9) 0%, rgba(230,245,255,0.8) 50%, rgba(220,240,255,0.7) 100%);
  }
  50% { 
    background: linear-gradient(135deg, rgba(235,245,255,0.95) 0%, rgba(225,240,255,0.85) 50%, rgba(215,235,255,0.75) 100%);
  }
}
.header{background:rgba(255,255,255,.95); backdrop-filter:blur(20px);
  box-shadow:0 1px 2px rgba(0,0,0,.05); padding:1rem 0; margin-bottom:2rem;
  position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.2);}
.header::before{content:""; position:absolute; inset:0; left:-100%;
  background:linear-gradient(90deg,transparent,var(--ice-glow),transparent);
  /* animation:headerShine 3s ease-in-out infinite; */}
@keyframes headerShine{0%{left:-100%}50%{left:100%}100%{left:100%}}
.header h1{
  font-size:2.2rem;font-weight:300;letter-spacing:0.05em;text-align:center;position:relative;
  text-shadow:0 0 10px var(--ice-glow); /* animation:titleGlow 3s ease-in-out infinite alternate; */
  margin: var(--zen-spacing) 0; line-height: 1.2;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@keyframes titleGlow{from{ text-shadow:0 0 5px var(--ice-glow);} to{ text-shadow:0 0 20px var(--ice-primary);} }
.header h1::after{content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  width:0; height:3px; background:linear-gradient(90deg,var(--ice-primary),var(--ice-secondary));
  /* animation:titleUnderline 4s ease-in-out infinite; */}
@keyframes titleUnderline{0%,100%{width:0}50%{width:100px}}
.subtitle{text-align:center;color:var(--muted);font-size:0.9rem;/* animation:subtitleFloat 3s ease-in-out infinite; */}
@keyframes subtitleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.container{max-width:1200px;padding-bottom:80px}
.panel{
  background:rgba(255,255,255,.9); backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.4); border-radius:16px; padding:1.25rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
/* Accordion Sections */
.accordion .card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(52, 152, 219, 0.2);
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.accordion .card-header {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), rgba(41, 128, 185, 0.05));
  border: none;
  padding: 0;
}
.accordion .card-header .btn-link {
  padding: 20px 25px;
  transition: all 0.3s ease;
}
.accordion .card-header .btn-link:hover {
  background: rgba(52, 152, 219, 0.1);
  text-decoration: none;
}
.accordion .card-header .btn-link:focus {
  text-decoration: none;
  box-shadow: none;
}
.accordion .card-body {
  padding: 25px;
  background: rgba(255, 255, 255, 0.98);
}

.tool-card{background:rgba(255,255,255,.9); backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.3); border-radius:var(--zen-radius); padding:calc(var(--zen-spacing) * 0.75); margin-bottom:var(--zen-spacing);
  text-decoration:none; color:var(--text); display:block; transition:all .5s var(--zen-ease);
  box-shadow:var(--zen-shadow); position:relative; overflow:hidden; 
  animation:cardFloat 8s ease-in-out infinite; /* zenCardBreath var(--zen-breath-duration) var(--zen-ease) infinite; */}
.tool-card:nth-child(odd){animation-delay:0s} .tool-card:nth-child(even){animation-delay:3s}
@keyframes cardFloat{0%,100%{transform:translateY(0) rotate(0)}25%{translate:0 -5px; rotate:.5deg}
  50%{translate:0 -2px; rotate:-.5deg}75%{translate:0 -8px; rotate:.3deg}}

/* Zen Card Breathing Animation */
@keyframes zenCardBreath {
  0%, 100% { 
    box-shadow: var(--zen-shadow);
  }
  50% { 
    box-shadow: 0 6px 25px rgba(0,0,0,0.12), var(--zen-glow);
  }
}
.tool-card:hover{
  transform:translateY(-12px) scale(1.03); 
  box-shadow:0 15px 35px rgba(0,0,0,.15), var(--zen-glow);
  border-color:var(--ice-primary); 
  background:rgba(255,255,255,.98);
  animation-play-state: paused;
}
.tool-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--ice-primary),var(--ice-secondary),var(--ice-glow)); transform:scaleX(0);
  transition:transform .4s ease}
.tool-card:hover::before{transform:scaleX(1)}
.tool-card::after{content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--ice-glow) 0%, transparent 50%);
  opacity:0; transition:opacity .3s ease}
.tool-card:hover::after{opacity:1}
.tool-card .card-icon{font-size:2.2rem; margin-bottom:var(--zen-spacing); color:var(--ice-primary);
  animation:iconPulse 3s ease-in-out infinite; /* zenIconBreath var(--zen-breath-duration) var(--zen-ease) infinite; */ 
  filter: drop-shadow(0 0 10px var(--ice-glow));
  transition: all 0.3s var(--zen-ease);}
@keyframes iconPulse{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.08) rotate(2deg)}
  50%{transform:scale(1.05) rotate(-1deg)}75%{transform:scale(1.03) rotate(1deg)}}

/* Zen Icon Breathing Animation */
@keyframes zenIconBreath {
  0%, 100% { 
    filter: drop-shadow(0 0 10px var(--ice-glow));
    opacity: 0.9;
  }
  50% { 
    filter: drop-shadow(0 0 20px var(--ice-primary));
    opacity: 1;
  }
}
.tool-card:hover .card-icon{transform:scale(1.25) rotate(8deg)}
.tool-card h3{
  font-weight:400;margin-bottom:calc(var(--zen-spacing) * 0.5);
  font-size:1.4rem;letter-spacing:0.02em;
  transition: all 0.3s var(--zen-ease);
}
.tool-card p{
  color:var(--muted); margin-bottom:0;
  font-size:0.95rem;line-height:1.5;
  transition: all 0.3s var(--zen-ease);
}
.tool-card .card-meta{
  margin-top:var(--zen-spacing);padding-top:calc(var(--zen-spacing) * 0.5);
  border-top:1px solid var(--border); color:var(--muted);
  font-size:0.85rem;font-weight:300;
  transition: all 0.3s var(--zen-ease);
}
.tool-card:hover h3{color:var(--ice-primary)} .tool-card:hover p{color:var(--text)}
.tool-card:hover .card-meta{color:var(--ice-primary); border-top-color:var(--ice-primary)}

/* Zen Footer - No Scrolling, Pure Zen */
.footer {
  background: linear-gradient(135deg, #2c3e50, #34495e, #2c3e50);
  border-top: 1px solid rgba(52, 152, 219, 0.2);
  padding: 1.5rem 0;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  transition: all 0.8s ease;
  margin-top: 2rem;
}

.footer:hover {
  background: linear-gradient(135deg, #34495e, #2c3e50, #34495e);
  box-shadow: 0 -4px 25px rgba(52, 152, 219, 0.2);
}

.footer-content {
  color: #bdc3c7;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  /* animation: zenBreath 8s ease-in-out infinite; */
  position: relative;
  line-height: 1.6;
}

/* Zen breathing animation for the content */
@keyframes zenBreath {
  0%, 100% { 
    opacity: 0.8;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.02);
  }
}

/* Individual element animations */
.footer-content .zen-element {
  display: inline-block;
  margin: 0 0.5rem;
  /* animation: zenFloat 6s ease-in-out infinite; */
  transition: all 0.5s ease;
}

.footer-content .zen-element:nth-child(1) { animation-delay: 0s; }
.footer-content .zen-element:nth-child(2) { animation-delay: 1s; }
.footer-content .zen-element:nth-child(3) { animation-delay: 2s; }
.footer-content .zen-element:nth-child(4) { animation-delay: 3s; }
.footer-content .zen-element:nth-child(5) { animation-delay: 4s; }

@keyframes zenFloat {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    opacity: 0.7;
  }
  25% { 
    transform: translateY(-2px) rotate(1deg);
    opacity: 0.9;
  }
  50% { 
    transform: translateY(-1px) rotate(0deg);
    opacity: 1;
  }
  75% { 
    transform: translateY(-3px) rotate(-1deg);
    opacity: 0.8;
  }
}

/* Zen separator dots */
.footer-content .zen-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: rgba(52, 152, 219, 0.6);
  border-radius: 50%;
  margin: 0 0.8rem;
  /* animation: zenPulse 4s ease-in-out infinite; */
}

@keyframes zenPulse {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Hippie Quote Styling */
.footer-quote {
  color: #e8f4f8;
  font-size: 0.9rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
  /* animation: zenFloat 8s ease-in-out infinite; */
  text-shadow: 0 0 10px rgba(135, 206, 250, 0.3);
  position: relative;
}

.footer-quote:hover {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(135, 206, 250, 0.5);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* Main content spacing */
main.container {
  padding-bottom: 2rem;
  margin-bottom: 1rem;
}

/* Accordion spacing fix */
.accordion {
  margin-bottom: 2rem !important;
}

.accordion .card {
  margin-bottom: 1rem;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.accordion .card-header {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border: none;
  border-radius: 12px 12px 0 0;
  padding: 0;
}

.accordion .card-header button {
  width: 100%;
  text-align: left;
  padding: 1rem 1.5rem;
  border: none;
  background: transparent;
  color: #2c3e50;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border-radius: 12px 12px 0 0;
}

.accordion .card-header button:hover {
  background: rgba(52, 152, 219, 0.1);
  color: #3498db;
  transform: translateY(-1px);
}

.accordion .card-header button:focus {
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  outline: none;
}

.accordion .card-header button[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.accordion .card-body {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 0 0 12px 12px;
}

.voice-help{position:fixed; top:2rem; right:2rem; background:#fff; border-radius:12px;
  padding:1.25rem; box-shadow:0 10px 15px rgba(0,0,0,.1); max-width:320px; z-index:1000;
  transform:translateX(110%); opacity:0; visibility:hidden; transition:all .3s ease;}
.voice-help.show{transform:translateX(0); opacity:1; visibility:visible;}

.particles{position:fixed; inset:0; pointer-events:none; z-index:-1}
.particles::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, var(--ice-glow) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(52,152,219,.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(46,204,113,.08) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(147,51,234,.05) 0%, transparent 50%);
  /* animation:backgroundFloat 25s ease-in-out infinite */}
@keyframes backgroundFloat{0%,100%{transform:translate(0,0) scale(1) rotate(0)}
  25%{transform:translate(-15px,-15px) scale(1.08) rotate(1deg)}
  50%{transform:translate(15px,-8px) scale(.92) rotate(-1deg)}
  75%{transform:translate(-8px,15px) scale(1.05) rotate(.5deg)}}
.fade-in{animation:fadeIn .8s ease-out}
@keyframes fadeIn{from{opacity:0; transform:translateY(30px) scale(.9)} to{opacity:1; transform:translateY(0) scale(1)}}

.meta{color:var(--muted)}

/* Audio Player Specific Styles */
.btn-ice {
  background: linear-gradient(135deg, var(--ice-primary), var(--ice-secondary));
  border: none;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-ice:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-ice:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
}

.btn-success:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* File select styling */
#fileSelect:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* VU Meter canvas */
#vu {
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

/* Enhanced navbar */
.navbar {
  padding: 1rem 0 !important;
  margin-bottom: 2rem;
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(20px);
  border-radius: 0 0 20px 20px;
  z-index: 1030 !important;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}

.dropdown-menu {
  z-index: 1040 !important;
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(20px);
}

.navbar-brand {
  font-size: 1.4rem !important;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--ice-primary) !important;
  text-shadow: 0 0 10px var(--ice-glow);
  transition: all 0.3s ease;
}

.navbar-brand:hover {
  transform: scale(1.05);
  text-shadow: 0 0 15px var(--ice-primary);
}

.nav-link {
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text) !important;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin: 0 0.25rem;
}

.nav-link:hover {
  color: var(--ice-primary) !important;
  background: rgba(52, 152, 219, 0.1);
  transform: translateY(-2px);
}