/* ============================================================
   veena.css — Saraswati Veena — Light Warm Theme
   Cream + Saffron + Deep Purple + Gold
   tools.dotiam.com
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --bg:       #fdf6ff;
    --surf:     #f8f0ff;
    --card:     #ffffff;
    --card2:    #f3e8ff;
    --bdr:      #ddd0f0;
    --bdr2:     #c4a8e8;
    --purple:   #7c3aed;
    --purple2:  #6d28d9;
    --purple3:  #a78bfa;
    --gold:     #b45309;
    --gold2:    #92400e;
    --amber:    #d97706;
    --wood:     #92400e;
    --wood2:    #78350f;
    --white-str:#6d28d9;
    --komal-str:#db2777;
    --teevra-str:#b45309;
    --txt:      #1e1030;
    --txt2:     #3b1f6e;
    --muted:    #7c6a9e;
    --green:    #059669;
    --red:      #dc2626;
    --blue:     #2563eb;
    --shadow:   rgba(109,40,217,.10);
}

/* ═══════ WRAP ═══════ */
.vn-wrap {
    background: var(--bg);
    border-radius: 16px;
    overflow: hidden;
    max-width: 1150px;
    margin: 0 auto;
    box-shadow:
        0 0 0 1.5px var(--bdr),
        0 8px 40px var(--shadow);
}

/* ═══════ HEADER ═══════ */
.vn-header {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%);
    border-bottom: 2px solid var(--gold);
    padding: 0 16px;
    display: flex; align-items: center; gap: 10px;
    height: 54px;
    border-radius: 16px 16px 0 0;
    position: relative; overflow: hidden;
}
.vn-header::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), #f59e0b, var(--gold));
}
.vn-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vn-logo-icon { font-size: 1.5rem; }
.vn-logo-text {
    font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.65);
}
.vn-logo-text b { color: #fde68a; }

.vn-tabs { display: flex; gap: 3px; margin-left: auto; flex-shrink: 0; }
.tab-btn {
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
    padding: 5px 11px; font-size: .72rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: all .15s;
    -webkit-tap-highlight-color: transparent; min-height: 34px;
}
.tab-btn.active { background: #fde68a; color: #4c1d95; border-color: #fde68a; }
.tab-btn:not(.active):hover { background: rgba(255,255,255,.22); color: #fff; }

/* ═══════ TOOLBAR ═══════ */
.vn-toolbar {
    background: var(--surf);
    border-bottom: 1.5px solid var(--bdr);
    padding: 6px 14px; display: flex; align-items: center;
    gap: 10px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none;
}
.vn-toolbar::-webkit-scrollbar { display: none; }
.v-ctrl { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.v-ctrl label { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.v-ctrl input[type="range"] { width: 80px; accent-color: var(--purple); }
#volNum { font-size: .78rem; color: var(--purple); font-weight: 700; }
.v-sep { width: 1px; height: 20px; background: var(--bdr); flex-shrink: 0; }

/* Gamaka toggle */
.vn-gamaka-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vn-gamaka-label { font-size: .7rem; color: var(--muted); }
.vn-gamaka-toggle {
    appearance: none; -webkit-appearance: none;
    width: 34px; height: 18px;
    background: var(--bdr); border-radius: 9px;
    position: relative; cursor: pointer; transition: background .2s;
}
.vn-gamaka-toggle:checked { background: var(--purple); }
.vn-gamaka-toggle::after {
    content: ''; position: absolute;
    width: 14px; height: 14px;
    background: white; border-radius: 50%;
    top: 2px; left: 2px; transition: left .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.vn-gamaka-toggle:checked::after { left: 18px; }

.vn-active-display {
    margin-left: auto; flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
}
#activeNote {
    font-size: 1.1rem; font-weight: 800;
    color: var(--purple); min-width: 36px;
    font-family: 'Georgia', serif;
}
#activeNoteHi {
    font-size: .9rem; color: var(--amber);
    font-weight: 700; min-width: 28px;
}

/* ═══════ TAB PANES ═══════ */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ═══════ RAAG TAB ═══════ */
.raag-pane { padding: 14px; background: var(--bg); }
.raag-top { margin-bottom: 12px; }
.raag-top h3 { font-size: .95rem; color: var(--txt); margin: 0 0 3px; }
.raag-top p  { font-size: .76rem; color: var(--muted); margin: 0; }
.raag-controls {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.raag-controls label { font-size: .76rem; color: var(--muted); }
.raag-controls select {
    background: var(--card); color: var(--txt);
    border: 1.5px solid var(--bdr); border-radius: 7px;
    padding: 5px 8px; font-size: .78rem; outline: none;
}
.raag-now { font-size: .82rem; color: var(--purple); font-weight: 700; margin-left: auto; }
.vn-raag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 8px;
}
.vn-raag-btn {
    background: var(--card); border: 1.5px solid var(--bdr); border-radius: 10px;
    padding: 10px 12px; cursor: pointer; transition: all .16s; text-align: left;
    display: flex; flex-direction: column; gap: 2px;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 4px var(--shadow);
}
.vn-raag-btn:hover { border-color: var(--purple); background: var(--card2); }
.vn-raag-btn.active {
    border-color: var(--purple); background: var(--card2);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.vn-raag-icon    { font-size: 1.3rem; line-height: 1; }
.vn-raag-name    { font-size: .8rem; font-weight: 700; color: var(--txt); }
.vn-raag-name-hi { font-size: .68rem; color: var(--purple3); font-weight: 600; }
.vn-raag-time    { font-size: .64rem; color: var(--amber); font-weight: 600; }
.vn-raag-mood    { font-size: .62rem; color: var(--muted); }

/* ═══════ RECORD TAB ═══════ */
.rec-pane { padding: 14px; background: var(--bg); }
.rec-status-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 1.5px solid var(--bdr);
    border-radius: 9px; padding: 9px 12px; margin-bottom: 9px;
    box-shadow: 0 1px 4px var(--shadow);
}
#recDot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bdr); flex-shrink: 0; transition: all .3s;
}
#recDot.blink {
    background: var(--red);
    box-shadow: 0 0 8px rgba(220,38,38,.4);
    animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
#recStatusTxt { font-size: .8rem; color: var(--txt); }
#recTimer { margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--purple); font-variant-numeric: tabular-nums; }
.rec-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.rec-info { font-size: .72rem; color: var(--muted); text-align: center; margin: 0; }

/* ═══════ BUTTONS ═══════ */
.v-btn {
    background: var(--card); color: var(--txt2);
    border: 1.5px solid var(--bdr); border-radius: 7px;
    padding: 6px 13px; font-size: .76rem; font-weight: 600;
    cursor: pointer; transition: all .15s; white-space: nowrap; min-height: 34px;
    -webkit-tap-highlight-color: transparent;
}
.v-btn:hover:not(:disabled) { border-color: var(--purple); color: var(--purple); }
.v-btn:disabled { opacity: .35; cursor: not-allowed; }
.v-btn.green { background: rgba(5,150,105,.08); color: var(--green); border-color: var(--green); }
.v-btn.green:hover:not(:disabled) { background: var(--green); color: #fff; }
.v-btn.red   { background: rgba(220,38,38,.08); color: var(--red); border-color: var(--red); }
.v-btn.red:hover:not(:disabled)   { background: var(--red); color: #fff; }
.v-btn.blue  { background: rgba(37,99,235,.08); color: var(--blue); border-color: var(--blue); }
.v-btn.blue:hover:not(:disabled)  { background: var(--blue); color: #fff; }

/* ═══════ OCTAVE SWITCHER ═══════ */
.vn-oct-switcher {
    display: flex; gap: 8px;
    padding: 12px 14px;
    background: var(--surf);
    border-bottom: 1.5px solid var(--bdr);
    flex-wrap: wrap;
}
.vn-oct-btn {
    flex: 1; min-width: 120px;
    background: var(--card);
    border: 1.5px solid var(--bdr);
    border-radius: 10px; padding: 8px 14px;
    cursor: pointer; transition: all .15s; text-align: center;
    -webkit-tap-highlight-color: transparent;
    display: flex; flex-direction: column; gap: 2px; align-items: center;
    box-shadow: 0 1px 4px var(--shadow);
}
.vn-oct-btn span  { font-size: .78rem; font-weight: 700; color: var(--muted); }
.vn-oct-btn small { font-size: .64rem; color: var(--muted); opacity: .7; }
.vn-oct-btn:hover { border-color: var(--oct-color, var(--purple)); }
.vn-oct-btn:hover span { color: var(--oct-color, var(--purple)); }
.vn-oct-btn.active {
    border-color: var(--oct-color, var(--purple));
    background: var(--card2);
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.vn-oct-btn.active span { color: var(--oct-color, var(--purple)); font-weight: 800; }

/* ═══════ VEENA BODY ═══════ */
.vn-body {
    position: relative;
    background: linear-gradient(160deg, #f8f0ff 0%, #fdf6ff 50%, #fff8f0 100%);
    padding: 22px 14px 18px;
    overflow: visible;
    min-height: 280px;
    border-top: 1px solid var(--bdr);
}
/* Subtle pattern */
.vn-body::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        92deg,
        transparent 0px,
        rgba(124,58,237,.025) 1px,
        transparent 2px,
        transparent 18px
    );
    pointer-events: none;
}

/* ═══════ STRINGS LAYOUT ═══════ */
.vn-strings-wrap { position: relative; max-width: 100%; }

.vn-oct-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1.5px solid var(--bdr);
}
.vn-oct-name    { font-size: .84rem; font-weight: 800; }
.vn-oct-name-hi { font-size: .76rem; color: var(--purple3); font-weight: 600; }
.vn-oct-desc    { font-size: .68rem; color: var(--muted); margin-left: auto; }

.vn-strings-row {
    display: flex;
    align-items: flex-end;
    gap: 0;
    padding: 0 4px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.vn-strings-row::-webkit-scrollbar { display: none; }

/* Individual string */
.vn-string {
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; padding: 4px 3px 2px;
    transition: all .1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0; min-width: 58px;
    position: relative; border-radius: 8px;
}
.vn-string:hover { background: rgba(124,58,237,.07); }
.vn-string:active { background: rgba(124,58,237,.14); transform: scale(.97); }

/* String line */
.vn-string-line {
    width: 2.5px; border-radius: 2px;
    transition: all .08s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    flex-shrink: 0;
}
.vn-white  .vn-string-line { background: linear-gradient(180deg, #7c3aed 0%, #a78bfa 100%); }
.vn-komal  .vn-string-line { background: linear-gradient(180deg, #db2777 0%, #f472b6 100%); }
.vn-teevra .vn-string-line { background: linear-gradient(180deg, #b45309 0%, #d97706 100%); }

/* Vibrating */
.vn-string-line.vibrating {
    background: var(--purple) !important;
    box-shadow: 0 0 10px rgba(124,58,237,.6) !important;
    animation: veenaVibrate .6s ease;
}
@keyframes veenaVibrate {
    0%   { transform: scaleX(1); }
    15%  { transform: scaleX(4); }
    30%  { transform: scaleX(0.5); }
    50%  { transform: scaleX(3.5); }
    70%  { transform: scaleX(0.8); }
    100% { transform: scaleX(1); }
}

/* Fret */
.vn-string-fret {
    width: 16px; height: 3px;
    background: linear-gradient(90deg, var(--wood2), var(--wood), var(--wood2));
    border-radius: 2px; margin: 5px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Labels */
.vn-string-label {
    display: flex; flex-direction: column;
    align-items: center; gap: 1px; margin-top: 3px;
}
.vn-swara {
    font-size: .72rem; font-weight: 700;
    color: var(--txt2); font-family: 'Georgia', serif; line-height: 1;
}
.vn-hindi  { font-size: .68rem; color: var(--purple); font-weight: 600; line-height: 1; }
.vn-key {
    font-size: .55rem; color: rgba(124,58,237,.5);
    background: rgba(124,58,237,.08);
    border: 1px solid rgba(124,58,237,.2);
    border-radius: 3px; padding: 1px 4px;
    font-weight: 700; margin-top: 2px;
}

.vn-white  .vn-swara { color: var(--purple2); }
.vn-komal  .vn-swara { color: #be185d; }
.vn-teevra .vn-swara { color: var(--gold); }

.vn-string:hover .vn-string-line { box-shadow: 0 0 10px rgba(124,58,237,.5) !important; }
.vn-string:hover .vn-swara { color: var(--purple); }

/* ═══════ VEENA BODY DECO ═══════ */
.vn-body-deco {
    margin-top: 16px; display: flex; align-items: center; gap: 14px;
    padding: 10px 4px; border-top: 1.5px solid var(--bdr);
}
.vn-bridge {
    height: 5px; flex: 1;
    background: linear-gradient(90deg, transparent, var(--wood), var(--wood2), var(--wood), transparent);
    border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.vn-resonator {
    background: linear-gradient(135deg, var(--card2), var(--surf));
    border: 1.5px solid var(--bdr2);
    border-radius: 50%; width: 62px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--shadow), inset 0 1px 0 rgba(255,255,255,.8);
}
.vn-resonator-label { font-size: .58rem; color: var(--muted); text-align: center; line-height: 1.3; }

/* ═══════ PARTICLES ═══════ */
.vn-particles { position: absolute; inset: 0; pointer-events: none; z-index: 10; }

/* ═══════ INFO BAR ═══════ */
.vn-info-bar {
    background: var(--surf); border-top: 1.5px solid var(--bdr);
    padding: 8px 16px; display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 8px;
    font-size: .68rem; color: var(--muted);
}
.vn-info-bar b { color: var(--purple2); }

/* Legend */
.vn-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.vn-legend-item { display: flex; align-items: center; gap: 5px; font-size: .66rem; color: var(--txt2); }
.vn-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.vn-legend-dot.white  { background: var(--purple3); }
.vn-legend-dot.komal  { background: #f472b6; }
.vn-legend-dot.teevra { background: var(--amber); }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 599px) {
    .vn-logo-text { display: none; }
    .tab-btn { padding: 5px 7px; font-size: .64rem; }
    .vn-raag-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }
    .vn-key { display: none; }
    .vn-hindi { display: none; } /* save space */
    .vn-body { padding: 14px 6px; }
    .vn-oct-btn { min-width: 90px; }
    .vn-wrap { margin: 0 8px; border-radius: 12px; }
    /* All strings visible on mobile */
    .vn-string { min-width: 0; flex: 1; padding: 3px 1px 2px; }
    .vn-strings-row { gap: 0; padding: 0 2px 6px; overflow-x: visible; }
    .vn-swara { font-size: .6rem; }
    .vn-string-fret { width: 10px; height: 2px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
    .vn-wrap { margin: 0 16px; }
    .vn-raag-grid { grid-template-columns: repeat(3,1fr); }
}