/* ===== MODERN DESIGN SYSTEM ===== */
/* CSS Custom Properties for consistent theming */
:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --accent-math: #4facfe;
    --accent-chem: #7bd389;
    --accent-phys: #ffd36e;
    --accent-ml: #b77cff;
    --accent-stats: #ff7a7a;
  --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);

  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --bg-primary: #0f0f23;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #16213e;

  --border-radius: 16px;
  --border-radius-sm: 8px;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3);

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Keyframes for animations */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

/* Global reset and base styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(-45deg, #0f0f23, #1a1a2e, #16213e, #2a1b3d);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== ENHANCED HEADER DESIGN ===== */
.site-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(15, 15, 35, 0.7); /* More transparent for glass effect */
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  position: sticky; /* Make header sticky */
  top: 0;
  padding: 0.8rem clamp(16px, 3vw, 24px);
  gap: 16px;
  box-sizing: border-box;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  z-index: 9999;
  transition: padding 0.3s ease, background 0.3s ease;
}

.site-header:hover {
    background: rgba(15, 15, 35, 0.85);
}

.header-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex: 1;
  position: relative;
  z-index: 20;
  justify-content: space-between;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  padding: 12px 16px;
  background: var(--glass-bg);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-title:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(79,172,254, 0.5);
    border-color: var(--accent-math);
}

/*
Main body styling: sets the font, background color, and layout padding for the entire app.
Prevents horizontal scrolling and ensures a visually distinct background for the workspace.
All page content inherits these base styles for a consistent look.
*/
/* Removed earlier oversized body margins to prevent mobile layout break; main body styles defined later */

/*
Header styling: styles the top navigation bar and title area.
Ensures the header stands out with a dark background and centered text.
Provides padding for visual separation from the rest of the page.
*/
header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

/*
Main content area: uses flex layout for main content and sidebar.
Sets a max width and centers the main app area on the page.
Applies a subtle background for content separation.
*/
main {
    display: flex;
    padding: 0.5em 1em;
    max-width: 1400px;
    margin: 0 auto;
    background: grey(255, 255, 255, 0.95);
}

/*
Sidebar styling: vertical navigation and dropdowns.
Defines width, layout, and button appearance for sidebar controls.
Ensures sidebar remains visually distinct and functional.
*/
.sidebar {
    width: 0px;
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/*
Signal section: main area for signal controls and forms.
Allows the section to grow and align with the main content.
Removes left margin for flush alignment with the sidebar.
*/
#signal-section {
    flex-grow:1;
    margin-left: 0px;
    width: 100%;
}

/*
Form styling: sets spacing, border, and appearance for all form elements.
Ensures consistent look for labels, inputs, selects, and buttons.
Improves usability and visual clarity for user input areas.
*/
form {
    margin: 1em 0;
}

form label {
    display: inline-block;
    width: 100px;
}

form input, form select {
    margin: 10px 0;
    padding: 0px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

form button {
    margin: 5px;
    padding: 8px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.2s;
}

form button:hover, form button:focus {
    background-color: #0056b3;
    outline: none;
}

/*
Canvas container and canvas styling: wraps and styles all <canvas> elements.
Ensures canvases are block-level, have a border, and fill their container.
Adds hover/focus effects for better user feedback during interactions.
*/
.canvas-container {
    position: relative;
    
    
}

canvas {
    display: block;
    border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    background: #fff;
    cursor: crosshair; /* Better for zoom rectangle drawing */
    

}

canvas:hover, canvas:focus {
    border-color: #007bff;
    outline: none;
}

.animation-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    max-height: 120px !important;
}

.animation-wrapper.active {
    opacity: 1;
    display: block !important;
    max-height: 120px !important;
}

#galaxy-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: #101020;
    border-radius: 10px;
    position: relative;
    z-index: 5;
}

@media (max-width: 1400px) { #animations-container { width:170px; height:102px; } }
@media (max-width: 1200px) { #animations-container { width:160px; height:96px; margin-left:8px; } }
@media (max-width: 1050px) { #animations-container { width:150px; height:90px; } }
/* Adjust animation sizing on mid-range screens */
@media (max-width: 1000px) { 
    #animations-container { width: 130px; height: 80px; margin-left:6px; }
}

#animations-container[hidden] {
    display: none !important;
}

@media (max-width: 1024px) {
    #animations-container {
        display: none !important;
    }
}

#rwanda-flag {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-width: 320px;
    transition: box-shadow 0.3s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* Hide decorative animations on small screens to preserve layout/performance.
   NOTE: Previous block had malformed braces causing rules not to apply and
   accidentally nesting unrelated .controls-sidebar styles inside. We split concerns:
   1) Always keep sidebar styles below (already defined later) separate.
   2) Clean media query only hides the decorative elements.
*/
@media (max-width: 900px) {
    #galaxy-sidebar,
    #rwanda-canvas-container { display:none !important; }
}

/* Global opt-out: if we decide animations should be off everywhere by default, uncomment below */
/* #galaxy-sidebar, #rwanda-canvas-container { display:none !important; } */

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    #rwanda-flag {
        transition: none !important;
        transform: translate(-50%, -50%) !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    canvas {
        animation: none !important;
    }
}

/* Header and navigation layout */
.site-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--primary-gradient);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    position: relative;
    padding: 1rem clamp(16px, 3vw, 24px);
    gap: 16px;
    box-sizing: border-box;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 9999;
}

.header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    position: relative;
    z-index: 20;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-right: auto;
}

.site-logo img {
    display: block;
    height: 36px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.site-logo:hover img {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

.site-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
    padding: 12px 16px;
    background: var(--glass-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    order: 1;
}

.nav-toggle:hover,
.nav-toggle:focus {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

#animations-container {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 180px;
    height: 100px;
    opacity: 1;
    pointer-events: none;
    max-height: 120px !important;
    z-index: 10;
}

#animations-container:hover {
    opacity: 1;
}

.header-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px; /* Increased gap */
    flex-wrap: wrap;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.header-nav .header-btn {
    background: rgba(255, 255, 255, 0.05); /* Slightly more transparent */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    padding: 8px 14px; /* Slightly larger padding */
    border-radius: 12px; /* More rounded */
    text-decoration: none;
    font-weight: 600; /* Bolder text */
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

/* Small icon inside nav buttons */
.header-nav .nav-icon {
  width: 18px; /* Slightly larger icons */
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
  transition: transform 0.3s ease;
}.header-nav .header-btn .nav-label { vertical-align: middle; }

/* Per-module accents applied to header buttons */
.header-nav .header-btn.math { --btn-accent: var(--accent-math); }
.header-nav .header-btn.chemistry { --btn-accent: var(--accent-chem); }
.header-nav .header-btn.physics { --btn-accent: var(--accent-phys); }
.header-nav .header-btn.ml { --btn-accent: var(--accent-ml); }
.header-nav .header-btn.matrices { --btn-accent: linear-gradient(90deg,#6dd5ed,#2193b0); }
.header-nav .header-btn.stats { --btn-accent: var(--accent-stats); }
.header-nav .header-btn.circuits { --btn-accent: linear-gradient(90deg,#ffd36e,#ff9a9e); }
.header-nav .header-btn.signals { --btn-accent: linear-gradient(90deg,#7f7fd5,#86a8e7); }

/* Use the accent for the hover bar behind buttons when present */
.header-nav .header-btn::before {
        background: var(--btn-accent, var(--accent-gradient));
}

.header-nav .header-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--btn-accent, var(--accent-gradient));
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: -1;
    opacity: 0;
    transform: scale(0.95);
    border-radius: 12px;
}

.header-nav .header-btn:hover,
.header-nav .header-btn:focus {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 15px var(--btn-accent, rgba(79, 172, 254, 0.4));
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.header-nav .header-btn:hover::before {
    opacity: 1;
    transform: scale(1);
}

.header-nav .header-btn:hover .nav-icon {
    transform: scale(1.2) rotate(-5deg);
}

.header-nav .header-btn:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Welcome banner orientation strip */
.welcome-banner {
    display: none;
    align-items: center;
    gap: 18px;
    max-width: min(1100px, calc(100% - 32px));
    margin: 20px auto 0;
    padding: 16px 24px;
    background: rgba(30, 35, 60, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 4px solid var(--accent-math);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px);
    color: var(--text-secondary);
    position: relative;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    z-index: 9000;
}

.welcome-banner.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.welcome-copy {
    flex: 1 1 auto;
}

.welcome-copy p {
    margin: 0;
    font-size: 0.95rem;
}

.welcome-banner a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

.welcome-banner a:hover,
.welcome-banner a:focus {
    text-decoration-color: rgba(255, 255, 255, 0.7);
}

.welcome-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.welcome-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.welcome-link:hover,
.welcome-link:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    outline: none;
}

.welcome-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}

.welcome-dismiss {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.welcome-dismiss:hover,
.welcome-dismiss:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
    transform: scale(1.1);
    outline: none;
}

.welcome-dismiss:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

@media (max-width: 820px) {
    .welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: 12px clamp(12px, 5vw, 24px) 0;
        padding: 12px 14px 16px;
    }
    .welcome-quick-links {
        width: 100%;
    }
    .welcome-link {
        width: 100%;
        justify-content: flex-start;
    }
    .welcome-dismiss {
        top: 8px;
        right: 10px;
    }
}

.header-nav .header-btn:hover,
.header-nav .header-btn:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(12, 16, 48, 0.35);
    outline: none;
}

.header-nav .header-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(12, 16, 48, 0.3);
}

@media (min-width: 821px) {
    .site-header-top {
        padding-top: 20px;
        padding-bottom: 18px;
    }
    .nav-toggle {
        display: none;
    }
    .header-nav {
        max-height: none;
        opacity: 1;
        transform: none;
        padding-bottom: 26px;
    }
    .header-nav.nav-open {
        max-height: none;
        opacity: 1;
        transform: none;
    }
    .header-nav .header-btn {
        justify-content: center;
    }
}

/* Mobile navigation */
@media (max-width: 820px) {
    .site-header-top {
        flex-wrap: wrap;
        align-items: center;
        padding: 14px clamp(14px, 7vw, 28px) 10px;
    }
    .nav-toggle {
        display: inline-flex;
    }
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .header-brand {
        justify-content: center;
    }
    .user-controls {
        justify-content: center;
    }
    .site-title {
        order: 2;
        width: 100%;
        text-align: center;
        font-size: clamp(1.5rem, 5vw, 2.1rem);
    }
    #animations-container {
        order: 3;
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
        height: auto;
    }
    .header-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 clamp(14px, 7vw, 32px);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-12px);
        transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease, padding 0.25s ease;
        flex: 0 0 auto;
        width: 100%;
    }
    .header-nav.nav-open {
        max-height: 540px;
        opacity: 1;
        transform: translateY(0);
        padding: 8px clamp(14px, 7vw, 32px) 18px;
    }
    .header-nav .header-btn {
        width: 100%;
        justify-content: flex-start;
        font-size: 1rem;
        padding: 10px 12px;
    }
}

/* Small-screen warning styles */
.small-screen-warning {
    position: fixed;
    top: 10px;
    left: 12px;
    right: 12px;
    margin: 0;
    background: #fff3cd;
    color: #856404;
    border: 2px solid #ffeeba;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    z-index: 10000;
    max-width: calc(100vw - 24px);
    width: auto;
    text-align: center;
    box-sizing: border-box;
}
.small-screen-warning .warning-inner { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    align-items: center; 
    width: 100%; 
    min-width: 0; 
    box-sizing: border-box; 
}
.small-screen-warning .warning-text { 
    font-size: 0.7rem; 
    font-weight: 500; 
    line-height: 1.3; 
    width: 100%;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    hyphens: auto;
    box-sizing: border-box; 
}
.small-screen-warning .warning-dismiss {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 12px;
    transition: background-color 0.2s ease;
    min-width: 50px;
}
.small-screen-warning .warning-dismiss:hover {
    background: #c82333;
}

@media (min-width: 821px) {
    .small-screen-warning { display:none !important; }
}

/* Ensure decorative galaxy canvas does not obstruct header content */
@media (max-width: 1240px) {
    #galaxy-sidebar { top: 72px; transform: scale(.9); left: 6px; }
}
@media (max-width: 1100px) {
    #galaxy-sidebar { top: 80px; transform: scale(.85); }
}
@media (max-width: 1000px) {
    #galaxy-sidebar { display: none !important; }
    .site-title { font-size: 1.4rem; }
}

.main-app {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
    gap: 16px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}

@media (max-width: 820px) {
    .main-app {
    padding: 12px 8px; /* Comfortable padding */
    gap: 12px; /* Reasonable gap */
    width: 100% !important;
    max-width: 100% !important;
    }
    .plot-and-controls-row { 
        flex-direction: column !important; 
        gap: 12px !important; 
        width:100% !important; 
        align-items: stretch !important;
    }
    .plot-and-controls-row #controlsSidebar { width:100% !important; }
    .plot-and-controls-row .plot-container { width:100% !important; }
}

/* Admin Dashboard Actions */
.admin-actions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-actions-wrapper .action-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.admin-actions-wrapper form {
    margin: 0;
}
.admin-actions-wrapper .btn {
    white-space: nowrap;
}
.admin-actions-wrapper .form-control {
    margin: 0;
}

.controls-sidebar { 
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;  /* Smooth transitions */
}

/* Docked variant pinned to far left */
.controls-sidebar-docked {
        position: fixed;
        top: 140px; /* below header */
        left: 12px;
        width: 210px !important;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        z-index: 500;
        backdrop-filter: blur(4px);
        background: rgba(40,40,60,0.55);
}

/* Inline header mini controls */
.controls-sidebar-inline {
    position: relative;
    width: 200px !important;
    padding: 6px 8px;
    background: rgba(40,40,60,0.45);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
}
.top-utility-bar {
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
    gap:14px;
    max-width:1000px;
    width:90%;
    margin:4px auto 10px;
    min-height:0;
}
.top-utility-bar .controls-sidebar-inline { margin-left:auto; }
.controls-sidebar-inline #controls-signal-form.mini label { color:#fff; font-size:12px; font-weight:500; }
.controls-sidebar-inline #controls-signal-form.mini input,
.controls-sidebar-inline #controls-signal-form.mini select { width:70px; padding:4px 6px; font-size:12px; }
.controls-sidebar-inline label { color:#fff; font-size:12px; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:4px; }
.controls-sidebar-inline input,
.controls-sidebar-inline select { width:70px; padding:4px 6px; font-size:12px; border-radius:4px; border:1px solid #888; }
.controls-sidebar-inline .processing-btn.small { padding:4px 6px; font-size:12px; border-radius:6px; }
.controls-sidebar-inline button { font-size:11px; padding:4px 6px; }
@media (max-width: 1050px) {
    .controls-sidebar-inline { display:none; }
}

/* Control Cluster (pill panel) */
.control-cluster {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: var(--glass-bg);
    padding: 12px;
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    position: relative;
    flex: 0 0 auto;
    margin-left: 0;
}

.control-cluster-bar {
    display: flex;
    justify-content: flex-start;
    max-width: 1000px;
    width: 90%;
    margin: 6px auto 6px;
    position: relative;
    z-index: 350;
}

.control-cluster .cc-group {
    position: relative;
}

.cc-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
    backdrop-filter: blur(5px);
    min-width: 60px;
}

.cc-btn:hover,
.cc-btn:focus {
    background: var(--accent-gradient);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.cc-btn[aria-expanded="true"] {
    background: var(--success-gradient);
    box-shadow: var(--shadow-md);
}
.cc-btn:hover, .cc-btn:focus { background:linear-gradient(135deg,#6c74f0,#9448c9); outline:none; }
.cc-btn[aria-expanded="true"] { background:linear-gradient(135deg,#805ce4,#b24ed8); }
.cc-menu { 
    position:absolute;
    top: calc(100% + 6px);
    right:0;
    min-width:200px;
    background:rgba(25,25,45,0.95);
    border:1px solid rgba(255,255,255,0.15);
    padding:10px 12px;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,0.35);
    display:none;
    z-index:1200; /* above plots */
    animation: ccFade .18s ease;
    backdrop-filter: blur(8px);
    will-change: transform;
}
@keyframes ccFade { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }
.cc-group.open > .cc-menu { display:block; }
.cc-menu label { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#fff; margin-bottom:6px; gap:6px; }
.cc-menu input, .cc-menu select { flex:1 1 auto; font-size:11px; padding:4px 6px; border-radius:6px; border:1px solid #666; background:#121226; color:#fff; }
.cc-menu button { width:auto; min-width:70px; margin:4px 0; background:#3940a8; border:none; color:#fff; padding:6px 8px; font-size:11px; border-radius:8px; cursor:pointer; display:inline-block; }
.cc-menu button:hover { background:#4c55d4; }
.cc-actions { display:flex; gap:6px; }
.cc-actions button { flex:1 1 0; }

@media (max-width: 1000px) {
    .control-cluster { gap:4px; padding:5px 8px; }
    .cc-btn { padding:5px 10px; font-size:11px; }
    .cc-menu { min-width:180px; }
}
@media (max-width: 820px) {
    .control-cluster { border-radius:16px; }
    .cc-btn { font-size:0; padding:6px 8px; width:38px; }
    .cc-btn::after { font-size:11px; display:block; }
    #cc-signal-btn::after { content:"Sig"; }
    #cc-filter-btn::after { content:"Flt"; }
    #cc-analyze-btn::after { content:"FFT"; }
    #cc-ops-btn::after { content:"Ops"; }
}
@media (max-width: 600px) {
    .control-cluster { 
         position: relative !important; 
         top: auto !important;
         right: auto !important;
         margin: 0 auto !important; 
    }
    .control-cluster .cc-menu { 
         position: absolute !important; 
         left: 50% !important; 
         transform: translateX(-50%) translateY(8px) !important;
         right: auto !important; 
         margin-right: 0 !important; 
    }
}

/* Floating variant: sits to the right of header (after nav + animation) */
.controls-sidebar-float {
        position: fixed;
        top: 120px; /* adjust relative to header height */
        right: 14px;
        width: 220px !important;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        background: rgba(40,40,60,0.55);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,0.12);
        z-index: 520;
}

/* Compact the main controls toggle button */
#controlsToggle.controls-toggle { padding:8px 10px; font-size:14px; }

@media (max-width: 1100px) {
    .controls-sidebar-float { top: 128px; width:200px !important; }
}
@media (max-width: 880px) {
    .controls-sidebar-float { position: static; width:100% !important; max-height:none; backdrop-filter:none; border:none; top:auto; right:auto; }
}

/* Shift main plot content right to accommodate docked sidebar */
.plot-and-controls-row { margin-left: 0; width: 100%; }

@media (max-width: 880px) {
    .controls-sidebar-docked { position: static; width:100% !important; max-height:none; backdrop-filter:none; }
    .plot-and-controls-row { margin-left: 0; }
}

/* Controls sidebar states */
.controls-sidebar.open {
    max-height: 100vh;
    opacity: 1;
    margin-bottom: 16px;
}

.controls-sidebar.collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}.controls-toggle {
    display: none;  /* Hidden by default (desktop) */
    width: 100%;
    margin: 0 0 8px;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
}
.controls-toggle[aria-expanded="false"]::after { content:''; }
@media (max-width: 820px) {
    .controls-toggle { display:inline-block; }
    /* Collapsible controls sidebar: collapsed via max-height, expanded scrollable */
    .controls-sidebar { width:100%; transition:max-height .35s ease, opacity .25s ease, padding .25s ease; max-height:0; overflow:hidden; opacity:0; padding:0 12px; }
    .controls-sidebar.open { max-height:1400px; /* sufficiently large */ overflow-y:auto; opacity:1; padding:12px; pointer-events:auto; }
    .controls-sidebar.collapsed { max-height:0; overflow:hidden; opacity:0; padding:0 12px; pointer-events:none; }
    
    /* Mobile-specific plot styles */
    .plot-container {
        width: 100% !important; /* Full width of parent */
        margin: 0 !important; /* Remove all margins */
        padding: 8px !important; /* Minimal padding for glass effect */
        height: 60vh !important; /* Occupy reasonable viewport height */
        min-height: 350px; /* Reasonable minimum */
        max-height: none !important;
        border-radius: var(--border-radius-sm); /* Keep small radius */
        box-shadow: none; /* Remove shadow on mobile */
    }
    
    /* Force the plot to expand fully */
    .plot-container .js-plotly-plot,
    .plot-container .plot-container.plotly,
    .plot-container .svg-container,
    .plot-container .main-svg {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }
    
    /* Ensure no overflow */
    .plot-container > div {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure parent flex container lets plot span full width */
    .main-app, .main-app > div { width:100% !important; }

    /* (Removed older mobile bottom-controls block; unified style defined later) */
}
.plot-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 160px) !important;
    min-height: 520px !important;
    max-height: 1200px !important;
    box-sizing: border-box;
    padding: 1.5rem;
    margin: 1rem 0;
    background: var(--glass-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    flex-shrink: 0 !important;
    transition: var(--transition);
}

.plot-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Hero section styles */
.hero-section {
    margin-bottom: 1.25rem;
}
.hero-inner {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 1.25rem;
    border-radius: 16px;
    backdrop-filter: blur(6px);
}
.hero-copy h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.6rem;
    line-height: 1.05;
}
.hero-sub {
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
}
.hero-ctas { display:flex; gap:10px; }
.hero-art { flex: 0 0 auto; }
.hero-svg { border-radius: 12px; box-shadow: var(--shadow-sm); }

#plot { 
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

@media (max-width: 820px) {
    .plot-container { 
        height: 60vh;  /* Slightly smaller on mobile */
        min-height: 350px;
        margin: 12px 0;
        padding: 12px;
    }
}

/* Unified bottom controls styling (desktop + mobile) - modern glass design */
.bottom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin: 1rem 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}
.bottom-left {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative; /* anchor inline popups like contact panel */
}
.bottom-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bottom-controls .file-dropdown { position:relative; }
.bottom-controls button, .bottom-controls .file-button { 
    background:#2a3241; 
    border:1px solid rgba(255,255,255,0.2); 
    border-radius:4px; 
    font-size:12px; 
    padding:5px 10px; 
    line-height:1.2; 
    font-weight:500; 
    letter-spacing:.3px; 
    color:#ffffff; 
    cursor:pointer; 
    flex:0 0 auto; 
    min-width:64px; 
    white-space:nowrap; 
    text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.bottom-controls button:hover, .bottom-controls .file-button:hover { 
    background:#3a4457; 
    border-color:rgba(255,255,255,0.3);
}
@media (min-width:900px) { .bottom-controls { margin:8px 0 4px; } }
@media (max-width:820px) { .bottom-controls { margin:6px auto 2px; } }

/* When control cluster is inside bottom-controls, make it inline and compact */
.bottom-controls .control-cluster {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    margin: 0;
    flex-shrink: 0;
}

/* Ensure cc-menu opens upward when in the bottom controls to avoid clipping below */
.bottom-controls .cc-group { 
    position: relative; 
}
.bottom-controls .cc-menu {
    position: fixed;
    top: auto;
    bottom: 80px;
    z-index: 9999;
    pointer-events: auto;
    /* Fixed positioning completely removes it from document flow */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Slightly smaller cc-btns when in bottom controls */
.bottom-controls .cc-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 18px;
}

/* Mobile-first responsive rules */
@media (max-width: 1050px) {

/* Show controls toggle only on mobile */
@media (max-width: 820px) {
    .controls-toggle {
        display: block;  /* Show on mobile only */
    }
    
    /* Auto-collapse controls on mobile */
    .controls-sidebar:not(.open) {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        padding: 0;
    }
}

    .controls-sidebar .dropdown-content {
        position: static;  /* Keep dropdowns in flow */
        width: 100%;
        box-shadow: none;
        border: 1px solid rgba(0,0,0,0.1);
        margin: 4px 0;
    }

    .controls-sidebar button {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        margin: 4px 0;
    }

    .plot-container { 
        order: 2;
        border: 1px solid rgba(0,0,0,0.1);  /* Light border for visibility */
    }

    .bottom-controls { 
        flex-direction: column; 
        gap: 10px;
        background: rgba(255,255,255,0.98);  /* Match controls background */
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }
}
@media (min-width: 1200px) {
    .plot-container { 
        min-height: 720px;
        flex-grow: 1; /* Allow plot to take remaining space */
    }
    
    /* Desktop layout */
    .main-app {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }
    
    .controls-sidebar {
        width: 220px; /* Narrower width on desktop */
        flex-shrink: 0; /* Prevent shrinking */
        align-self: flex-start; /* Stick to top */
    }

    /* Make desktop control buttons more compact */
    .controls-sidebar button {
        padding: 6px 12px;
        font-size: 14px;
        width: auto; /* Don't force full width on desktop */
        min-width: 120px; /* Minimum width for buttons */
        max-width: 200px; /* Maximum width for buttons */
    }

    .controls-sidebar .dropdown-content {
        min-width: 180px; /* Narrower dropdowns on desktop */
        max-width: 220px;
    }
}

/* Remove floating toggle on mobile (simplified UX) */
.mobile-controls-toggle { display:none !important; }

/* When open on mobile, show controls as a full-width slide-up panel */
/* Overlay mode disabled */
/* (Removed empty overlay override) */

/* Backdrop shown behind the mobile controls panel */
.mobile-controls-backdrop { display:none !important; }

@media (max-width: 1100px) {
        .mobile-controls-toggle { display: block; }
}

/* Hint bar removed (controls always visible) */
.controls-hint-bar { display:none !important; }

/*
Zoom instructions and fallback: styles for zoom help text and fallback messages.
Improves accessibility and user guidance for interactive canvas features.
*/
.zoom-instructions {
    font-size: 12px;
    color: #555;
    margin-top: 5px;
}

.canvas-fallback {
    display: none;
    color: red;
    margin-top: 5px;
}

canvas:not(:supported) + .canvas-fallback {
    display: block;
}

/*
File dropdown styling: styles for the file import/export dropdown.
Positions the dropdown and its button, and ensures the menu is easy to use.
Provides hover effects for better usability.
*/
.file-dropdown {
    position: static;
    z-index: 201;
    width: 80px;
    /* Removed absolute positioning for flex alignment */
}

.file-dropdown .file-button {
    width: 100%;
    text-align: left;
    background-color:white
}

.file-dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #2a2a2a;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 202;
    flex-direction: column;
    padding: 6px 0;
}

.file-dropdown-content button {
    background: none;
    border: none;
    color: #ffffff;
    padding: 10px 18px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-size: 15px;
}

.file-dropdown-content button:hover {
    background-color: #3a3a3a;
}

.file-dropdown.show .file-dropdown-content {
    display: flex;
}

/*
Button stack and plot control buttons: positions and styles clear/undo buttons.
Ensures these controls are always visible and easy to access.
Adds hover/focus effects for better feedback.
*/
.button-stack {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.plot-clear-btn, .plot-undo-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: background 0.2s;
    width: 80px;
}

.plot-clear-btn:hover, .plot-clear-btn:focus,
.plot-undo-btn:hover, .plot-undo-btn:focus {
    background-color: #0056b3;
}

/*
Custom legend styling: styles for the custom legend area below plots.
Ensures legend items are visually grouped, easy to read, and interactive.
Adds color-coded lines and remove buttons for each legend entry.
*/
#custom-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
    margin-bottom: 8px;
    min-height: 36px;
    position: relative;
    z-index: 10;
    background: rgba(255,255,255,0.95);
    padding: 4px 8px 4px 4px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #e0e0e0;
    max-width: 900px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.legend-line {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}
.legend-line-black {
    background: #000;
}
.legend-line-red {
    background: #d62728;
}

/* Custom legend entry for JS-generated legend */
.legend-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 10px 2px 8px;
    margin-right: 4px;
    font-size: 15px;
    min-width: 90px;
    min-height: 28px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.legend-remove {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 16px;
    cursor: pointer;
    margin-left: 6px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.legend-remove:hover {
    background: #c0392b;
}

/*
Multi-warning styling: styles the warning message for multi-signal issues.
Ensures the warning is visually distinct and easy to notice.
Adds padding, border, and shadow for emphasis.
*/
#multi-warning {
    display: none;
    background: #fff3cd;
    color: #856404;
    border: 1.5px solid #ffeeba;
    border-radius: 5px;
    padding: 12px 18px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    max-width: 900px;
}

/*
Galaxy sidebar: fixed-position animated sidebar for visual flair.
Ensures the galaxy canvas is always visible and styled appropriately.
Prevents the sidebar from blocking UI interactions.
*/
#galaxy-sidebar {
    position: fixed;
    left: 0; /* or -10px for slightly off-screen */
    top: 80px;
    width: 60px;
    height: 60px;
    z-index: 1000;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: right;
    pointer-events: none; /* So it doesn't block UI */
}
#galaxy-canvas {
    width: 100%;
    height: 100%;
    background: #101020;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

/*
Circuit section and controls: styles for the RC circuit simulation area.
Aligns form elements, buttons, and section layout for clarity and usability.
Adds gradients and hover effects for interactive controls.
*/
#circuit-section {
    position: absolute;
    left: 0;
    top: 200px; /* Moved up by 50px from previous 440px */
    transform: translateY(0); /* No upward shift, start at X axis */
    max-width: 160px;
    width: 160px;
    padding-left: 0;
    z-index: 20;
}
#circuit-section .form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 10px;
    padding: 0;
    gap: 2px;
}
#circuit-section label {
    font-weight: 500;
    text-align: right;
    min-width: 90px;
    margin-bottom: 2px;
}
#circuit-section input,
#circuit-section select {
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #bbb;
    font-size: 13px;
    width: 90px;
    margin-bottom: 0;
    box-sizing: border-box;
}
#circuitSimBtn {
    margin-top: 8px;
    padding: 6px 10px;
    width: 90px;
    min-width: 90px;
    max-width: 100px;
    font-size: 14px;
    border-radius: 5px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    display: block;
    margin-left:450px;
    margin-right: auto;
}
#circuitSimBtn:hover, #circuitSimBtn:focus {
    background: linear-gradient(90deg, #5a67d8 0%, #6b47b6 100%);
}

/* Differentiator and Integrator Buttons */
#differentiatorBtn, #integratorBtn {
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 5px;
    background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
#differentiatorBtn:hover, #integratorBtn:hover,
#differentiatorBtn:focus, #integratorBtn:focus {
    background: linear-gradient(90deg, #185a9d 0%, #43cea2 100%);
    transform: translateY(-2px) scale(1.04);
}

/* Style for new dropdown options (Differentiator/Integrator) */
#circuitType option[value="differentiator"],
#circuitType option[value="integrator"] {
    font-weight: bold;
    color: #185a9d;
    background: #e6f2ff;
}

#circuitType {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background: #f8faff;
    border: 1.5px solid #43cea2;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 4px;
    transition: border 0.2s;
}
#circuitType:focus {
    border: 1.5px solid #185a9d;
    outline: none;
}

/*
Main plot container: sets the size, position, and background for the main Plotly plot.
Ensures the plot is sized and positioned consistently with the app layout.
Background color helps the plot stand out from the rest of the UI.
*/
#plot {
    width: 100%;
    min-height: 360px; /* Adjusted for Android responsiveness */
    height: auto; /* Allow dynamic height */
    position: relative;
    background-color: #f8f9fa;
}

/* ===== ADDITIONAL STYLES FROM HTML ===== */

/* Override body styles for the main index page */
body {
    margin: 0;
    padding-top: 0;
    background: linear-gradient(135deg, #66cbea 0%, #764ba2 100%);
    color: #fff;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto;
    position: relative;
}

/* Rwanda flag container hover effect */
#rwanda-canvas-container:hover {
    background:rgba(0,0,0,0.2);
}

/* Shared button styling (header + reusable actions) */
.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    padding: 10px 16px;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    backdrop-filter: blur(5px);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.header-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--accent-gradient);
    transition: left 0.3s ease;
    z-index: -1;
}

.header-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 255, 255, 0.4);
}

.header-btn:hover::before {
    left: 0;
}

.header-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.header-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Processing sidebar button styling - gray theme */
.processing-btn {
    background: linear-gradient(135deg, #808080 0%, #606060 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Processing button hover animation */
.processing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #606060 0%, #808080 100%);
}

/* Processing button active state */
.processing-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Canvas button styling - gray theme */
.canvas-btn {
    background: linear-gradient(135deg, #808080 0%, #606060 100%);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Canvas button hover animation */
.canvas-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #606060 0%, #808080 100%);
}

/* Canvas button active state */
.canvas-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Plot management button styling - matches header-btn for consistency */
.plot-undo-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Plot button hover animation - matches header-btn behavior */
.plot-undo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Plot button active state */
.plot-undo-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Specific styles for base.html header buttons */
.header-btn.premium-btn {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #222;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 210, 0, 0.4);
}

.header-btn.premium-btn:hover {
    background: linear-gradient(135deg, #ffd200 0%, #f7971e 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 210, 0, 0.6);
}

.header-btn.profile-btn {
    background: linear-gradient(135deg, #007bff 0%, #00c6ff 100%);
    color: white;
    border: none;
}

.header-btn.profile-btn:hover {
    background: linear-gradient(135deg, #00c6ff 0%, #007bff 100%);
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.6);
}

.header-btn.logout-btn {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: white;
    border: none;
}

.header-btn.logout-btn:hover {
    background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
    box-shadow: 0 0 15px rgba(255, 75, 43, 0.6);
}