:root{
  /* New Color Palette (Fender-inspired) */
  --panel-bg: #f5f5f5; /* Light, slightly off-white panel background */
  --surface: #ffffff; /* Fretboard itself remains clean white */
  --text-main: #212529; /* Deep text for good contrast */
  --muted: #6a6a6a; /* Slightly warmer gray for muted text */
  --accent: #004d99; /* Deep, classic blue for primary accent */
  --root: #b80c0c; /* Rich, classic red for the Root note */
  --marker: #343a40; /* Darker marker for better definition */
  --structure-color: #007bff; /* Secondary structure color (lighter blue) */
  --line: rgba(0,0,0,0.1); /* Slightly more defined lines */
}

/* Base Styles */
.panel{
    background:var(--panel-bg);
    border-radius:8px; /* Slightly softer corners */
    padding:16px;
    border:1px solid var(--line); /* More visible border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Soft, professional shadow */
}
h1.h-title{
    font-size:1.4rem; /* Slightly larger title */
    font-weight: 500;
    margin-bottom:8px;
    color: var(--text-main);
}
.small-muted{
    font-size:0.8rem;
    color:var(--muted);
}

/* SVG Fretboard Container */
.fretboard-wrap{
    background:var(--surface);
    border-radius:8px;
    padding:10px;
    border:1px solid var(--line);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
svg#fretboard{
    width:100%;
    height:320px;
    border-radius:4px;
}

/* Panel Headings (H2) */
.panel h2.h6 {
    font-size:0.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--accent); /* Accent color for headings */
    margin-bottom:12px;
}

/* Icons inside Headings */
.panel h2.h6 i {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 0.35rem;
}

/* Input Labels */
.form-label {
    font-size:0.75rem;
    font-weight: 600; /* Bolder label text */
    color:var(--text-main);
    margin-bottom: 2px;
}

/* Form Controls (Selects, Inputs) */
.panel .form-control, 
.panel .form-select { 
    height: 38px !important; /* Consistent height */
    padding: 0.375rem 0.75rem; 
    min-height: 38px;
    border: 1px solid var(--line); /* Clear input border */
    background-color: #fff; /* White background for inputs */
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.panel .form-control:focus, 
.panel .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(0, 77, 153, 0.1); /* Light shadow on focus */
}

/* Toggle Switch Styling */
.form-check-label {
    font-size:0.9rem;
}

/* Fretboard Note Colors */
.note { fill: var(--marker); }
.note.root { fill: var(--root); } /* Rich Red Root Note */
.note.structure { fill: var(--structure-color); }

/* Buttons */
.btn {
    font-size:0.8rem;
    font-weight: 600;
    letter-spacing:0.03em;
    text-transform:none; /* Keep buttons standard case for professionalism */
    border-radius: 4px;
    /* Ensure height consistency for all buttons */
    padding: 0.375rem 0.75rem;
    line-height: 1.5; 
}
.btn-outline-secondary {
    color: var(--marker);
    border-color: var(--line);
    background-color: transparent;
}
.btn-success {
    background-color: var(--accent);
    border-color: var(--accent);
}
.btn-success:hover {
    background-color: #003366; /* Darker blue on hover */
    border-color: #003366;
}


/* Box Mode Styles - Simplified and Clean */
#toggleBoxMode.active {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 77, 153, 0.2); 
}
.box-controls-container .form-control {
    padding: 0.25rem 0.5rem !important; 
    height: 38px !important; /* Match adjacent button height */
    font-size: 0.8rem;
    line-height: 1.5; 
    border-radius: 0; /* Box controls look connected */
}
.box-controls-container .btn {
    /* Adjust button height in group to match new form-control height */
    height: 38px; 
    line-height: 1.5;
    padding: 0.375rem 0.5rem;
}
.box-controls-container .btn-outline-secondary:first-child {
    border-radius: 4px 0 0 4px;
}
.box-controls-container .btn-outline-secondary:last-child {
    border-radius: 0 4px 4px 0;
}

/* Other adjustments */
.form-control-color {
    width: 40px; 
    height: 38px !important; 
    padding: 0.25rem 0.25rem !important; 
}
.fret-input{width:70px}

/* responsive */
@media (max-width:768px){
  svg#fretboard{height:240px}
}