/* =============================================================================
   qbeats_panel.css — כל הכללים ממוסגרים תחת .nx-qbeats-scope
   -----------------------------------------------------------------------------
   אותה תבנית כמו .nx-vita-scope ב-static/vita_view.css (D-247).
   בשלב 6 (השתלבות ב-PNO) די יהיה להחליף את בלוק המשתנים למטה בערכי
   שפת העיצוב של PNO (--accent:#3c8a82 וכו') — בלי לגעת ב-276 הכללים.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   בלוק המשתנים — שפת העיצוב של PNO (שלב 6)
   -----------------------------------------------------------------------------
   ⚠ הקובץ הזה **נבנה אוטומטית** מ-panel/qbeats_panel.css.
     אין לערוך אותו ידנית — לערוך את המקור ולהריץ את build_css.py מחדש.

   הוחלט: **בהיר**, בטורקיז של PNO, עם **אזור המוניטור בלבד כהה** — כי
   אוסילוסקופ ומדי-רמה נקראים הרבה יותר טוב על רקע כהה, וזו הקונבנציה
   בתוכנות אודיו.

   כל ערך כאן שולט בכללים שמתחת. הערכים הכהים המקוריים נמצאים במקור.
   -------------------------------------------------------------------------- */
.nx-qbeats-scope{
    /* --- משטחים בהירים, תואם .nx-panel של PNO --- */
    --bg:#f4f8f7;
    --bg-2:#eaf2f0;
    --silver-gleam: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
    --panel:rgba(255,255,255,.72);
    --panel-2:rgba(255,255,255,.55);
    --stroke:rgba(125,155,145,.28);
    --soft:#b3c7c1;
    --txt:#2c4a46;            /* --ink של PNO */
    --muted:#55706a;   /* מוכהה: ב-#6c8880 הניגודיות הייתה 3.84:1, מתחת לסף */
    --accent:#3c8a82;         /* *** הטורקיז של PNO *** */
    --accent-2:#62c0b1;
    --hot:#c2553b;            /* --danger של PNO */
    --good:#3c8a82;
    --mid:#a98a4e;            /* --gold של PNO */
    --bad:#c2553b;
    --chip:rgba(216,233,228,.55);
    --glass: rgba(60,138,130,.06);
    --glass-2: rgba(98,192,177,.10);
    --shadow:0 8px 26px rgba(60,100,90,.10);
    --radius:14px;

    /* --- מה שהיה מקודד קשיח: שדות, כפתורים, כותרות, מדים --- */
    --input-bg:#ffffff;       /* *** רקע שדות הקלט — היה שחור *** */
    --btn-1:#ffffff;          /* כפתור — עליון */
    --btn-2:#e8f1ee;          /* כפתור — תחתון */
    --btn-txt:#2c4a46;
    --title:#2c4a46;
    --card-1:rgba(255,255,255,.78);
    --card-2:rgba(240,247,245,.78);
    --track:#dbe8e4;
    --thumb-1:#8fd8cb;        /* ידית סליידר — בטורקיז */
    --thumb-2:#3c8a82;
    --thumb-3:#2c6a63;        /* --deep של PNO */
    --thumb-ring:#2c6a63;
    --readout:#2c6a63;
    --banner-txt:#2c4a46;
    --gen-1:#ffffff;
    --gen-2:#e8f1ee;
    --gen-txt:#2c4a46;
    --off-txt:#8c3a28;

    /* --- אזור המוניטור: נשאר כהה בכוונה --- */
    --mon-bg:#0e1621;
    --mon-txt:#e9f2fb;
    --mon-muted:#b4c2d3;
    --mon-accent:#43C6AC;
    --mon-stroke:#2b3a4b;

    font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#tgaly-kol-editor-container *{
    box-sizing: border-box;
}

#tgaly-kol-editor-container{ 
    color: var(--txt); 
    background-color: var(--bg); /* Fallback אטום למקרה שהגרדיאנטים נדרסים על ידי התבנית */
    background-image: 
        radial-gradient(1200px 600px at 70% -10%, rgba(122,92,255,.08), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(67,198,172,.08), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg-2) 45%, var(--bg)), 
        var(--silver-gleam);
    padding: 18px; 
    border: 1px solid var(--stroke); 
    border-radius: var(--radius); 
    box-shadow: var(--shadow);
    font-family: system-ui, -apple-system, sans-serif;
    text-align: right;
}

.nx-qbeats-scope h2{ margin:0 0 14px; font-weight:600; color:var(--title); display:flex; align-items:center; gap:10px; }
.nx-qbeats-scope .brand-chip{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--glass),var(--glass-2));
    padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; font-size:.92rem; color:var(--muted); }
.nx-qbeats-scope .toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 16px; }

.nx-qbeats-scope .btn{ 
    background: linear-gradient(180deg,var(--btn-1),var(--btn-2)); 
    border: 1px solid var(--soft); 
    color: var(--txt);
    padding: 8px 14px; 
    border-radius: 10px; 
    cursor: pointer; 
    transition: .15s; 
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); 
    font-family: inherit;
}
.nx-qbeats-scope .btn:hover{ filter: brightness(1.1) } 
.nx-qbeats-scope .btn-primary{ background: linear-gradient(180deg, rgba(122,92,255,.18), rgba(122,92,255,.10)); border-color:#5b4bcf; }
.nx-qbeats-scope .btn-danger{ background: linear-gradient(180deg, rgba(255,91,91,.18), rgba(255,91,91,.10)); border-color:#b74a4a; }

.nx-qbeats-scope .panel{ 
    background-color: var(--panel-2);
    background-image: linear-gradient(180deg, rgba(67,198,172,.06), rgba(122,92,255,.06)); 
    border: 1px solid var(--stroke);
    border-radius: var(--radius); 
    padding: 14px; 
    margin-bottom: 16px; 
}
.nx-qbeats-scope .panel h3{ margin:0 0 8px; font-weight:600; color:var(--title); display:flex; align-items:center; gap:8px; }

.nx-qbeats-scope .grid-2{ display:grid; grid-template-columns: repeat(2,minmax(260px,1fr)); gap:14px; }
.nx-qbeats-scope .grid-preset{ grid-template-columns: 1fr 1fr !important; gap: 20px; }
.nx-qbeats-scope .grid-3{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.nx-qbeats-scope .grid-auto{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
@media (max-width:980px){ .grid-2,.grid-3{ grid-template-columns:1fr; } .grid-preset { grid-template-columns: 1fr !important; } }

.nx-qbeats-scope .field{ background:var(--panel); border:1px solid var(--stroke); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.nx-qbeats-scope .field label{ font-size:.92rem; color:var(--muted); margin-bottom: 2px; }
.nx-qbeats-scope .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.nx-qbeats-scope /* הגנה אגרסיבית על שדות קלט למניעת ירושת צבעים מתבנית וורדפרס */
.field input[type="number"], .nx-qbeats-scope .field input[type="text"], .nx-qbeats-scope .field select{ 
    background-color: var(--input-bg) !important; 
    color: var(--txt) !important; 
    border: 1px solid var(--soft) !important; 
    border-radius: 10px; 
    height: 36px; 
    padding: 0 10px; 
    min-width: 0; 
    width: 100%; 
    box-shadow: none !important;
}

.nx-qbeats-scope .field input[type="range"]{ 
    -webkit-appearance:none; 
    width:100%; 
    height:8px; 
    background:linear-gradient(90deg, rgba(67,198,172,.35), rgba(122,92,255,.35)); 
    border:1px solid var(--soft); 
    border-radius:999px; 
}
.nx-qbeats-scope .field input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none; 
    width:18px; 
    height:18px; 
    border-radius:50%;
    background: radial-gradient( circle at 30% 30%, var(--thumb-1), var(--thumb-2) 55%, var(--thumb-3)); 
    border:1px solid var(--thumb-ring); 
    box-shadow:0 0 0 3px rgba(122,92,255,.22); 
    cursor: pointer;
}

.nx-qbeats-scope .toggle{ display:inline-flex; align-items:center; gap:8px; user-select:none; }
.nx-qbeats-scope .switch{ 
    --w:54px; --h:30px; --p:3px; 
    position:relative; width:var(--w); height:var(--h); 
    border-radius:999px; border:1px solid var(--soft);
    background:linear-gradient(180deg,var(--btn-1),var(--btn-2)); 
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); 
}
.nx-qbeats-scope .switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2; width: 100%; height: 100%; margin: 0; }
.nx-qbeats-scope .knob{ 
    position:absolute; top:var(--p); left:var(--p); 
    width:calc(var(--h) - var(--p)*2); height:calc(var(--h) - var(--p)*2); 
    border-radius:50%;
    background: radial-gradient( circle at 30% 30%, var(--thumb-1), var(--thumb-2) 55%, var(--thumb-3)); 
    box-shadow:0 4px 12px rgba(122,92,255,.45), inset 0 0 0 1px rgba(255,255,255,.25); 
    transition:.18s; 
}
.nx-qbeats-scope .switch input:checked + .knob{ 
    left:calc(var(--w) - var(--h) + var(--p)); 
    background: radial-gradient( circle at 30% 30%, #b6f2e3, #43C6AC 55%, #2b7f72); 
    box-shadow:0 4px 12px rgba(67,198,172,.45), inset 0 0 0 1px rgba(255,255,255,.25); 
}
.nx-qbeats-scope .switch:has(input:checked), .nx-qbeats-scope .switch.on{ background: linear-gradient(180deg, rgba(67,198,172,.18), rgba(67,198,172,.10)); border-color:#2d8e7c; }

.nx-qbeats-scope .meters{ display:grid; grid-template-columns: repeat(2,minmax(260px,1fr)); gap:12px; }
.nx-qbeats-scope .card{ background:linear-gradient(180deg,var(--card-1),var(--card-2)); border:1px solid var(--stroke); border-radius:14px; padding:12px; }
.nx-qbeats-scope .spark{ width:14px; height:14px; border-radius:3px; background: conic-gradient(from 0deg, #43C6AC, #7a5cff, #43C6AC); opacity:.9; display:inline-block; }
.nx-qbeats-scope .bar-wrap{ position:relative; width:100%; height:14px; border-radius:999px; overflow:hidden; border:1px solid var(--soft); background:var(--track); }
.nx-qbeats-scope .bar{ position:absolute; left:0; top:0; height:100%; width:0%; background: linear-gradient(90deg, #43C6AC 0%, #7a5cff 50%, #43C6AC 100%); transition:width .08s linear; }
.nx-qbeats-scope .bar.post{ background: linear-gradient(90deg, #7a5cff 0%, #43C6AC 50%, #7a5cff 100%); }
.nx-qbeats-scope .chip{ background:var(--chip); border:1px solid var(--stroke); border-radius:999px; padding:2px 8px; color:var(--muted); font-size:.85rem; }
.nx-qbeats-scope .warn{ color:var(--hot); font-weight:700; }

.nx-qbeats-scope .columns{ display:grid; grid-template-columns: repeat(2,minmax(320px,1fr)); gap:14px; margin-top: 16px; }
@media (max-width:1100px){ .columns { grid-template-columns:1fr; } }

.nx-qbeats-scope .gen-block{ background:var(--panel); border:1px solid var(--stroke); border-radius:12px; padding:12px; }
.nx-qbeats-scope .gen-block h3{ margin:0 0 8px; color:var(--title); font-weight:600; }
.nx-qbeats-scope .active-btn{ 
    padding:6px 12px; border-radius:10px; border:1px solid var(--soft);
    background:linear-gradient(180deg,var(--gen-1),var(--gen-2)); color:var(--gen-txt); cursor:pointer; font-weight: 500;
}
.nx-qbeats-scope .active-true{ box-shadow: inset 0 0 0 1px rgba(67,198,172,.35); border-color: #43C6AC; }
.nx-qbeats-scope .active-false{ background:linear-gradient(180deg,rgba(255,91,91,.15),rgba(255,91,91,.07)); border-color:var(--bad); color:var(--off-txt); }

.nx-qbeats-scope .led{ width:12px; height:12px; border-radius:50%; border:1px solid var(--soft); display:inline-block; }
.nx-qbeats-scope .led.good{ background:#0fbf8a; box-shadow: 0 0 6px rgba(15,191,138,0.5); } 
.nx-qbeats-scope .led.mid{ background:#ffc857; box-shadow: 0 0 6px rgba(255,200,87,0.5); } 
.nx-qbeats-scope .led.bad{ background:#ff5b5b; box-shadow: 0 0 6px rgba(255,91,91,0.5); }

.nx-qbeats-scope .stack{ display:flex; flex-direction:column; gap:8px; }
.nx-qbeats-scope #enableSinesBtn{ align-self:flex-start; }
.nx-qbeats-scope #envPresetName{ min-width: 0; width: 100%; font-size: 1rem; }
.nx-qbeats-scope .preset-actions-row{ display:flex; gap:10px; flex-wrap:wrap; }

.nx-qbeats-scope /* Special Buttons override */
.btn#enableSinesBtn{ background: #16a34a !important; background-image: none !important; color: #fff !important; border-color: #16a34a !important; }
.nx-qbeats-scope .btn#stopAllSinesBtn{ background: #dc2626 !important; background-image: none !important; color: #fff !important; border-color: #dc2626 !important; }
.nx-qbeats-scope .btn#startEverythingBtn{ background: #a78bfa !important; background-image: none !important; color: #fff !important; border-color: #a78bfa !important; }
.nx-qbeats-scope .btn#stopEverythingBtn{ background: #e5e7eb !important; background-image: none !important; color: #111 !important; border-color: #e5e7eb !important; }
.nx-qbeats-scope .btn#startNoiseBtn{ background: #7dd3fc !important; background-image: none !important; color: #111 !important; border-color: #7dd3fc !important; }
.nx-qbeats-scope .btn#stopNoiseBtn{ background: #f9a8d4 !important; background-image: none !important; color: #111 !important; border-color: #f9a8d4 !important; }

.nx-qbeats-scope /* ======== FLOATING MONITOR (Draggable) ======== */
.floating-monitor{
    position: fixed;
    bottom: 20px;
    left: 20px; 
    width: 320px;
    background: #0b1016;
    border: 2px solid #43C6AC;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 2px 10px rgba(255,255,255,0.05);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: ltr; 
}
.nx-qbeats-scope .fm-header{
    background: linear-gradient(90deg, #16202b, #1a2330);
    padding: 8px 15px;
    cursor: grab;
    color: #43C6AC;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 1px solid #334455;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nx-qbeats-scope .fm-header:active{ cursor: grabbing; }
.nx-qbeats-scope .fm-body{ padding: 12px; }

.nx-qbeats-scope .timer-wrap{ 
    position: relative; 
    width: 100%; 
    height: 25px; 
    border-radius: 6px; 
    overflow: hidden; 
    background: #1a2330; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
    margin-top: 10px;
}
.nx-qbeats-scope .timer-bar{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 0%; 
    background: linear-gradient(90deg, #ff5b5b 0%, #ffc857 50%, #43C6AC 100%); 
    transition: width 0.05s linear; 
}
.nx-qbeats-scope .timer-text{ 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    font-size: 1rem; 
    line-height: 25px; 
    color: #ffffff; 
    text-shadow: 1px 1px 4px #000; 
    z-index: 2; 
    font-weight: 700;
    font-family: monospace;
}
.nx-qbeats-scope canvas#oscilloscope{ 
    width: 100%; 
    height: 80px; 
    border-radius: 8px; 
    background: #04080f; 
    border: 1px solid #2b3a4b; 
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8); 
}

.nx-qbeats-scope /* Floating Monitor Buttons */
.fm-controls{
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: space-between;
}
.nx-qbeats-scope .fm-btn{
    flex: 1;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: .15s;
    border: none;
}
.nx-qbeats-scope .fm-btn:hover{ filter: brightness(1.1); transform: translateY(-1px); }
.nx-qbeats-scope .fm-btn:active{ transform: translateY(1px); }

.nx-qbeats-scope #fmStartEverythingBtn{ background: #a78bfa; color: #fff; }
.nx-qbeats-scope #fmEnableSinesBtn{ background: #16a34a; color: #fff; }
.nx-qbeats-scope #fmStopEverythingBtn{ background: #e5e7eb; color: #111; }
.nx-qbeats-scope /* ======== תוספות ה-rewrite (שלב 2, .nx-qbeats-scope standalone) ======== */
body{ margin:0; padding:16px; background:#0b1016; }
.nx-qbeats-scope .qb-banner{ background:linear-gradient(135deg, rgba(67,198,172,.14), rgba(122,92,255,.14));
  border:1px solid #43C6AC; border-radius:12px; padding:10px 14px; margin-bottom:14px; color:var(--banner-txt); font-size:.92rem; }
.nx-qbeats-scope .qb-banner b{ color:#43C6AC; }
.nx-qbeats-scope .gen-block.inactive{ opacity:.55; }
.nx-qbeats-scope .freq-readout{ font-family:monospace; color:var(--readout); }
.nx-qbeats-scope .field input[type="range"]:disabled{ opacity:.4; }
.nx-qbeats-scope .note{ font-size:.82rem; color:var(--muted); }
.nx-qbeats-scope .deprecated{ opacity:.5; }


/* ==========================================================================
   קריאות על רקע בהיר — תיקונים שנדרשו אחרי החלפת הפלטה
   ==========================================================================
   שדות הקלט וכפתורי הפעולה קיבלו רקע לבן; הגבול והצל מוסיפים את ההפרדה
   שהרקע הכהה נתן קודם. בלי זה השדות "נמסים" לתוך הפאנל.
   ========================================================================== */
.nx-qbeats-scope .field input[type="number"],
.nx-qbeats-scope .field input[type="text"],
.nx-qbeats-scope .field select{
    border: 1px solid rgba(125,155,145,.45) !important;
    box-shadow: inset 0 1px 2px rgba(60,100,90,.06) !important;
}
.nx-qbeats-scope .field input[type="number"]:focus,
.nx-qbeats-scope .field input[type="text"]:focus,
.nx-qbeats-scope .field select:focus{
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(60,138,130,.15) !important;
}
.nx-qbeats-scope .btn{
    background-color: var(--btn-2);
    color: var(--btn-txt);
    border-color: rgba(125,155,145,.40);
    box-shadow: 0 1px 2px rgba(60,100,90,.08);
}
.nx-qbeats-scope .btn:hover{ filter: none; background-color:#dfece8; background-image: linear-gradient(180deg,#f2f8f6,#dfece8); }
.nx-qbeats-scope .btn-primary{
    /* background-color אטום *לפני* הגרדיאנט: גרדיאנט לבדו משאיר את
       background-color שקוף, ואז הטקסט הלבן יושב על מה שמאחור. */
    background-color:#2c6a63;   /* --deep של PNO. ב---accent (#3c8a82) לבן
       נותן 4.08:1 — מתחת לסף 4.5 לטקסט רגיל. */
    background-image: linear-gradient(180deg,#3c8a82,#2c6a63);
    border-color:#245852; color:#fff;
}
.nx-qbeats-scope .btn-primary:hover{ background-color:#357c74; background-image: linear-gradient(180deg,#47968d,#357c74); }
.nx-qbeats-scope .btn-danger{
    background-color:#c2553b;
    background-image: linear-gradient(180deg,#d06a51,#c2553b);
    border-color:#a4462f; color:#fff;
}
.nx-qbeats-scope .brand-chip{ color: var(--txt); }
/* טקסט ההצלחה/כשל של הפריסטים — היה בירוק נאון על כהה */
.nx-qbeats-scope #profileMsg,
.nx-qbeats-scope #envPresetMsg{ color: var(--accent) !important; }

/* ==========================================================================
   אזור המוניטור — כהה בתוך טאב בהיר (החלטת עיצוב)
   ========================================================================== */
.nx-qbeats-scope .floating-monitor{
    background: var(--mon-bg);
    color: var(--mon-txt);
    border: 1px solid var(--mon-stroke);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(20,40,36,.28);
    /* עיגון: במסך העצמאי הוא מרחף מעל כל הדף; בתוך PNO זה היה מרחף
       גם מעל טאבים אחרים. */
    position: static !important;
    inset: auto !important;
    margin: 0 0 16px 0;
    width: auto !important;
    max-width: 100%;
    cursor: default !important;
}
.nx-qbeats-scope .floating-monitor .note,
.nx-qbeats-scope .floating-monitor label,
.nx-qbeats-scope .floating-monitor small{ color: var(--mon-muted); }
.nx-qbeats-scope .floating-monitor .chip{
    background: rgba(255,255,255,.06);
    color: var(--mon-txt);
    border-color: var(--mon-stroke);
}

/* ==========================================================================
   מסך משתמש-הקצה — היה בבלוק <style> בתוך qbeats_user.html.
   ב-PNO ה-<head> אינו מועתק, ולכן הכללים חיים כאן.
   ========================================================================== */
.nx-qbeats-scope .uc-wrap { max-width: 720px; margin: 0 auto; }
.nx-qbeats-scope .uc-big { width: 100%; padding: 18px; font-size: 1.15rem; font-weight: 700; margin-top: 6px; }
.nx-qbeats-scope .uc-step { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.nx-qbeats-scope .uc-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  color: #fff; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; flex: none; font-size: .9rem;
}
.nx-qbeats-scope #ucProgress { height: 8px; }
.nx-qbeats-scope .uc-err {
  background: rgba(194,85,59,.10); border: 1px solid var(--bad);
  border-radius: 10px; padding: 12px; color: #8c3a28; margin-top: 10px;
}
.nx-qbeats-scope .uc-ok {
  background: rgba(60,138,130,.10); border: 1px solid var(--accent);
  border-radius: 10px; padding: 12px; color: #2c6a63; margin-top: 10px;
}