/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
   --font-primary: 'Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
   --aqua-light: #00e5ff;
   --aqua-mid: #00a0dc;
   --aqua-dark: #005f87;
   --eco-green: #4ade80
   --glass-base: rgba(255, 255, 255, 0.45);
   --glass-border: rgba(255, 255, 255, 0.7);
   --text-dark: #0f2537
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  font-family: var(--font-primary);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  background: radial-gradient(circle at 80% 20%, rgba(74, 222, 128, 0.5) 0%, transparent 40%),
    linear-gradient(135deg, #00c6ff 0%, #0072ff 50%, #0bf 100%);
  background-attachment: fixed;
}

.bubble-environment {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -100px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 70%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50px;
  box-shadow: inset -5px -5px 15px rgba(0, 160, 220, 0.3), 0 10px 20px rgba(0,0,0,0.05);
    animation: floatUpwards 15s infinite linear;
}

.b1 { width: 60px; height: 60px; left: 10%; animation-duration: 18s;}
.b2 { width: 40px; height: 40px; left: 25%; animation-duration: 12s; animation-delay: 2s;}
.b3 { width: 90px; height: 90px; left: 50%; animation-duration: 22s; animation-delay: 5s;}
.b4 { width: 30px; height: 30px; left: 75%; animation-duration: 14s;}
.b5 { width: 70px; height: 70px; left: 85%; animation-duration: 20s; animation-delay: 1s;}

@keyframes floatUpwards {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(120vh) rotate(360deg); opacity: 0;}
}

.aero-nav {
  position: sticky;
  top: 15px;
  z-index: 1000;
  max-width: 1100px;
  margin: 15px auto;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 50, 100, 0.15);
  padding: 10px 30px;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 50, 120, 0.5);
}

.logo span { color: var(--eco-green); }

.nav-links a {
  font-family: var(--font-heading);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  margin-left: 20px;
  padding: 6px 16px;
  border-radius: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.nav-links a:hover, .nav-links a.active {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);
  color: var(--text-dark);
  text-shadow: none;
}

.app-workspace {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 30px;
}

@media (max-width: 768px) {
  .app-workspace { grid-template-columns: 1fr; }
}

.aero-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-base);
  backdrop-filter: blur(15px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 10px 40px rgba(0, 70, 140, 0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}

.card-glass-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.card-header h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: #054870;
  margin-bottom: 5px;
}

.meta-tag {
  display: inline-block;
  font-size: 0.85rem
  font-weight: 600;
  background: var(--aqua-mid);
  color: white;
  padding: 2px 10px;
  border-radius: 10px;
  margin-bottom: 2.7rem;
}

button.jelly-btn {
  appearance:none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  padding: 12px 36px;
  margin-top: 1.5rem;
  border-radius: 25px;
  border: 1px solid #10599f;
  background: linear-gradient(to bottom, #72c5ff 0%, #3ca2f4 49%, #0076dc 50%, #005da3 100%);
  box-shadow: 0 4px 15px rgba(0, 90, 180, 0.35),
  inset 0 1px 0 rgba(255,255,255,0.7), inset 0 10px 12px rgba(255,255,255,0.3);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

button.jelly-btn:hover {
  transform: translateY(-2px);
  filter: saturate(120%) brightness(105%);
  box-shadow: 0 8px 25px rgba(0, 90, 180, 0.5), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 12px 14px rgba(255,255,255,0.4);
}

button.jelly-btn:active {
  transform: translateY(1px);
  background: linear-gradient(to bottom, #005da3 0%, #0076dc 100%);
  box-shadow: 0 2px 5px rgba(0, 90, 180, 0.4);
}

.mini-card {
  padding: 1.5rem;
  margin-bottom 20px;
}

.mini-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: #054870
  margin-bottom: 12px;
  border-bottom: 1px solid
  rgba(255,255,255,0.4);
  padding-bottom: 6px;
}

.status-indicator-container {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.status-pulse {
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulseCore 2s infinite;
}

@keyframes pulseCore {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);}
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);}
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);}
}

.sidebar-links { list-style: none; }
.sidebar-links li { margin: 8px 0; }
.sidebar-links a {
  color: #0a5680;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}

.sidebar-links a:hover { color: #0093cc; text-decoration: underline; }

.system-footer {
  text-align: center;
  padding: 3rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}