/* ============================================================
   pro-santoor.css — Real Santoor Look
   Trapezoidal wooden body, horizontal strings, golden theme
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --bg:      #0f0a04;
    --surf:    #1a1206;
    --card:    #231808;
    --card2:   #2e2010;
    --bdr:     #4a3218;
    --bdr2:    #6a4828;
    --gold:    #f5c842;
    --gold2:   #d4a420;
    --orange:  #f07820;
    --brown:   #8b4513;
    --wood:    #c8863c;
    --string:  #e8d88a;
    --txt:     #f0e8d0;
    --muted:   #7a6040;
    --green:   #4caf78;
    --red:     #e05050;
    --blue:    #5090e0;
}

/* ═══════ WRAP ═══════ */
.santoor-wrap {
    background: var(--bg);
    border-radius: 16px;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--bdr), 0 20px 80px rgba(0,0,0,.7);
    position: relative;
}

/* ═══════ HEADER ═══════ */
.santoor-header {
    background: linear-gradient(135deg, #2a1a08 0%, #1a1004 100%);
    border-bottom: 2px solid var(--gold2);
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
}
.santoor-logo {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.santoor-logo-icon { font-size: 1.5rem; }
.santoor-logo-text {
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: var(--muted);
}
.santoor-logo-text b { color: var(--gold); }

.santoor-tabs {
    display: flex; gap: 3px; margin-left: auto; flex-shrink: 0;
}
.tab-btn {
    background: transparent; color: var(--muted);
    border: 1px solid var(--bdr); 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: var(--gold); color: #1a0a00; border-color: var(--gold); }
.tab-btn:not(.active):hover { border-color: var(--gold); color: var(--gold); }

/* ═══════ TOOLBAR ═══════ */
.santoor-toolbar {
    background: var(--surf); border-bottom: 1px solid var(--bdr);
    padding: 6px 14px; display: flex; align-items: center;
    gap: 10px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.santoor-toolbar::-webkit-scrollbar { display: none; }
.s-ctrl { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.s-ctrl label { font-size: .7rem; color: var(--muted); }
.s-ctrl input[type="range"] { width: 80px; accent-color: var(--gold); }
#volNum { font-size: .78rem; color: var(--gold); font-weight: 700; }
.s-sep { width: 1px; height: 20px; background: var(--bdr); flex-shrink: 0; }
.active-note-display {
    margin-left: auto; font-size: .82rem;
    color: var(--gold); font-weight: 700;
}
#activeNote { min-width: 60px; }

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

/* ═══════ RAAG TAB ═══════ */
.raag-pane { padding: 14px; }
.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: 1px solid var(--bdr);
    border-radius: 7px; padding: 5px 8px; font-size: .78rem; outline: none;
}
.raag-now { font-size: .82rem; color: var(--gold); font-weight: 700; margin-left: auto; }
.raag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
    gap: 8px;
}
.raag-btn {
    background: var(--card); border: 1px 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;
}
.raag-btn:hover { border-color: var(--gold); background: var(--card2); }
.raag-btn.active { border-color: var(--gold); background: rgba(245,200,66,.08);
    box-shadow: 0 0 16px rgba(245,200,66,.2); }
.raag-icon { font-size: 1.3rem; line-height: 1; }
.raag-name { font-size: .8rem; font-weight: 700; color: var(--txt); }
.raag-time { font-size: .64rem; color: var(--gold); }
.raag-desc { font-size: .64rem; color: var(--muted); }

/* ═══════ RECORD TAB ═══════ */
.rec-pane { padding: 14px; }
.rec-status-row { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--bdr); border-radius:9px; padding:9px 12px; margin-bottom:9px; }
#recDot { width:11px; height:11px; border-radius:50%; background:var(--bdr); flex-shrink:0; transition:all .3s; }
#recDot.blink { background:var(--red); box-shadow:0 0 8px rgba(224,80,80,.6); 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(--gold); 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 ═══════ */
.s-btn {
    background: var(--card2); color: var(--txt); border: 1px 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;
}
.s-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.s-btn:disabled { opacity: .35; cursor: not-allowed; }
.s-btn.green { background:rgba(76,175,120,.1); color:var(--green); border-color:var(--green); }
.s-btn.green:hover:not(:disabled) { background:var(--green); color:#fff; }
.s-btn.red   { background:rgba(224,80,80,.1); color:var(--red); border-color:var(--red); }
.s-btn.red:hover:not(:disabled)   { background:var(--red); color:#fff; }
.s-btn.blue  { background:rgba(80,144,224,.1); color:var(--blue); border-color:var(--blue); }
.s-btn.blue:hover:not(:disabled)  { background:var(--blue); color:#fff; }

/* ═══════ SANTOOR BODY ═══════ */
.santoor-body {
    position: relative;
    background: linear-gradient(135deg,
        #2a1a08 0%, #3d2510 20%,
        #2e1c0a 50%, #3a2210 80%,
        #241408 100%);
    padding: 20px 16px 16px;
    overflow: hidden;
}

/* Wood grain overlay */
.santoor-body::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        92deg,
        transparent 0px,
        rgba(255,200,100,.025) 1px,
        transparent 2px,
        transparent 8px
    );
    pointer-events: none;
}

/* Trapezoid frame */
.santoor-frame {
    position: relative;
    background: linear-gradient(180deg, #1a0e04 0%, #2a1a08 100%);
    border-top: 3px solid var(--wood);
    border-bottom: 3px solid var(--wood);
    border-left: 6px solid var(--wood);
    border-right: 4px solid var(--wood); /* narrower right = trapezoid */
    border-radius: 4px 2px 2px 4px;
    padding: 12px 8px 8px;
    box-shadow: inset 0 0 30px rgba(0,0,0,.5),
                0 4px 20px rgba(0,0,0,.4);
    /* Trapezoid shape */
    clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%);
}

/* Section label */
.ss-section-label {
    font-size: .62rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 4px 8px;
    font-weight: 600;
}

/* String section */
.ss-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 6px;
}

/* Individual string */
.ss-string {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 2px 0;
    transition: all .1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
}
.ss-string:hover .ss-str-line { background: var(--gold); box-shadow: 0 0 8px rgba(245,200,66,.6); }
.ss-string:hover .ss-devanagari { color: var(--gold); }
.ss-string.vibrating .ss-str-line {
    background: var(--gold) !important;
    box-shadow: 0 0 16px rgba(245,200,66,.8) !important;
    animation: vibrate .25s ease;
}
@keyframes vibrate {
    0%   { transform: scaleY(1); }
    25%  { transform: scaleY(2.5); }
    50%  { transform: scaleY(0.5); }
    75%  { transform: scaleY(2.0); }
    100% { transform: scaleY(1); }
}

/* The actual string line */
.ss-str-line {
    height: 2px;
    width: var(--str-len, 80%);
    background: linear-gradient(90deg,
        hsl(calc(50 - var(--str-hue, 0deg)), 70%, 70%) 0%,
        hsl(calc(50 - var(--str-hue, 0deg)), 80%, 80%) 50%,
        hsl(calc(50 - var(--str-hue, 0deg)), 70%, 70%) 100%
    );
    border-radius: 1px;
    flex-shrink: 0;
    transition: all .08s;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Bridge markers between sections */
.ss-bridge {
    width: 6px;
    background: var(--wood);
    border-radius: 3px;
    flex-shrink: 0;
    margin: 0 4px;
}

/* String labels */
.ss-str-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    flex-shrink: 0;
}
.ss-devanagari {
    font-size: .72rem;
    color: var(--string);
    font-weight: 600;
    min-width: 22px;
    transition: color .1s;
}
.ss-sargam {
    font-size: .6rem;
    color: var(--muted);
    min-width: 28px;
}
.ss-key {
    font-size: .58rem;
    color: rgba(245,200,66,.4);
    background: rgba(245,200,66,.06);
    border: 1px solid rgba(245,200,66,.15);
    border-radius: 3px;
    padding: 1px 4px;
    font-weight: 700;
}

/* Section divider */
.ss-divider {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--wood), transparent);
    margin: 6px 0;
    border-radius: 2px;
}

/* Particles */
.santoor-particles {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 10;
}

/* Info bar */
.santoor-info-bar {
    background: var(--surf); border-top: 1px solid var(--bdr);
    padding: 6px 16px; display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 6px;
    font-size: .7rem; color: var(--muted);
}
.santoor-info-bar b { color: #9a8060; }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 599px) {
    .santoor-logo-text { display: none; }
    .tab-btn { padding: 5px 7px; font-size: .64rem; }
    .raag-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }
    .ss-key   { display: none; }
    .ss-sargam{ display: none; }
    .ss-devanagari { font-size: .64rem; }
}
@media (min-width: 600px) and (max-width: 900px) {
    .raag-grid { grid-template-columns: repeat(3,1fr); }
}