:root {
    --bg:#0f0f10; --fg:#e8e8ea; --muted:#a9adb7; --card:#15161a; --border:#2b2f36;
    --accent:#4c8df6; --good:#42b883; --danger:#e66; --warn:#f4b400;
    --header-h:50px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;background:var(--bg);color:var(--fg);
    font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
    display:flex;flex-direction:column;overflow:hidden;
  }

  header{
    display:flex;gap:8px;align-items:center;padding:10px;border-bottom:1px solid var(--border);
    position:sticky;top:0;background:var(--bg);z-index:5;
  }
  input,select,button,textarea{
    background:var(--card);color:var(--fg);border:1px solid var(--border);
    border-radius:8px;padding:8px 10px;outline:none;
  }
  button{cursor:pointer}
  button.primary{background:var(--accent);border-color:var(--accent)}
  button.ghost{background:transparent}
  button.good{background:var(--good);border-color:var(--good)}
  button.danger{background:var(--danger);border-color:var(--danger)}
  button:disabled{opacity:.6;cursor:not-allowed}
  .pill{padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px}
  .hint{font-size:12px;color:var(--muted)}
  .badge{font-size:12px;color:#ccc}
  .hr{height:1px;background:var(--border);margin:8px 0}

  #wrap{
    --side-w:280px;
    height:calc(100dvh - var(--header-h));
    display:grid;
    grid-template-columns:var(--side-w) 1fr;
    min-height:0;
  }

  #side{
    position:relative;
    border-right:1px solid var(--border);
    padding:12px;
    display:flex;flex-direction:column;gap:10px;
    width:var(--side-w);
    overflow-y:auto;
  }
  .panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px}

  #main{display:flex;flex-direction:column;min-height:0}
  #main-header{flex:0 0 auto;position:sticky;top:0;z-index:1;background:var(--bg);border-bottom:1px solid var(--border);padding:12px}
  #main-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:12px}
  #lesson-meta.panel{margin-bottom:12px}
  #lm-fullwave.panel{margin-bottom:12px}
  #editor::after{content:"";display:block;height:max(16vh,120px)}
  #main-scroll{overscroll-behavior:contain;scroll-behavior:smooth}

  .paragraph{margin-bottom:14px}
  .row{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:10px}
  .row:hover{background:rgba(255,255,255,.03)}
  .ts{display:flex;align-items:center;gap:6px;min-width:230px}
  .ts input[type=number]{width:5.5em}
  .text{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
  .text textarea{min-height:36px;resize:vertical}
  .tools{display:flex;gap:6px;align-items:center}
  .muted{color:var(--muted)}
  .play{width:38px}
  .kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;padding:2px 6px;border-radius:6px;background:#202228;border:1px solid #2e3340;color:#cad0db}
    /* RTL helpers */
    .text textarea[dir="rtl"]{ direction: rtl; text-align: right; }

    /* Make meta inputs respect RTL too */
    #lesson-meta input[dir="rtl"],
    #lesson-meta textarea[dir="rtl"]{ direction: rtl; text-align: right; }

  /* Waveform */
  #fw-canvas{width:100%;height:clamp(52px,10vh,84px);image-rendering:crisp-edges;border-radius:8px}

  /* Desktop collapse */
  @media (min-width:901px){
    #side-toggle{
      position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:999px;
      background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;
    }
    #wrap.collapsed{--side-w:48px}
    #wrap.collapsed #side > *:not(#side-toggle){display:none}
  }
  

  /* Mobile drawer */
  @media (max-width:900px){
    #wrap{grid-template-columns:1fr}
    #side{
      position:fixed;left:0;top:var(--header-h);bottom:0;width:min(86vw,360px);
      transform:translateX(-100%);transition:transform .2s ease;
      box-shadow:0 10px 24px rgba(0,0,0,.4);z-index:4;
    }
    body.sidebar-open #side{transform:translateX(0)}
    #backdrop{
      position:fixed;inset:var(--header-h) 0 0 0;background:rgba(0,0,0,.4);
      opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:3;
    }
    body.sidebar-open #backdrop{opacity:1;pointer-events:auto}
    #open-side{
      display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:6px;
      border-radius:999px;background:var(--card);border:1px solid var(--border);
    }
    header{flex-wrap:wrap;gap:6px 8px}
    header .pill{display:none}
    header input,header select,header button{flex:1 1 auto;min-width:0;width:auto !important}
    #in-lesson{flex-basis:100%}
  }

  @media (max-width:1000px){
    .row{flex-wrap:wrap;gap:6px;align-items:stretch}
    .text{order:1;flex:1 1 100%}
    .ts{order:2;flex:1 1 100%;min-width:0}
    .play{order:3}
    .tools{order:4;flex-wrap:wrap}
    .ts input[type=number]{width:4.8em}
  }
    /* Only hide the app when there's no lesson AND we're not actively loading */
    body[data-has-lesson="false"]:not([data-loading="true"]) #wrap { display: none; }
    body[data-has-lesson="false"]:not([data-loading="true"]) #open-side,
    body[data-has-lesson="false"]:not([data-loading="true"]) #backdrop { display: none !important; }

    /* Loading overlay */
    #loading{
    position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
    display:none; align-items:center; justify-content:center;
    background:rgba(15,15,16,.45); z-index:6;  /* above header (z=5) */
    }
    #loading .spinner{
    width:22px; height:22px; border-radius:50%;
    border:2px solid var(--border); border-top-color:var(--fg);
    animation:spin .8s linear infinite;
    }
    #loading .label{ margin-top:8px; font-size:12px; color:var(--muted); text-align:center; }
    body[data-loading="true"] #loading{ display:flex; }

    @keyframes spin{ to{ transform:rotate(360deg) } }

    /* Sidebar overflow guards */
    #side .panel .meta-grid {
    /* allow the control column to actually shrink */
    grid-template-columns: 140px minmax(0, 1fr);
    }
    #side .panel .meta-grid > :nth-child(2n) { min-width: 0; }

    /* make controls fill but never exceed panel */
    #side .panel input,
    #side .panel select,
    #side .panel textarea { width: 100%; max-width: 100%; }

    /* translation row safety */
    #sel-tr-lang { min-width: 0; }

    /* course picker row can wrap on narrow sidebars */
    #lesson-meta .meta-grid .course-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
    #lesson-meta .meta-grid .course-row > * { min-width:0; }

    /* inputs + selects fill the space */
    #lesson-meta input,
    #lesson-meta select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    }

    /* Lesson Meta: stacked fields in sidebar */
    #lesson-meta .meta-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
    }
    #lesson-meta .field{
    display:flex;
    flex-direction:column;
    gap:6px;
    }
    #lesson-meta .field > *{ min-width:0; }
    #lesson-meta input,
    #lesson-meta select,
    #lesson-meta textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    }

    /* Softer intent buttons (success / danger) */
    :root{
    /* keep base hues (used for tints/borders) */
    --good:#42b883;      /* was solid green */
    --danger:#ee6666;    /* was solid red */

    /* gentle surfaces derived from the base hues */
    --good-bg:   rgba(66,184,131,.14);
    --good-bd:   rgba(66,184,131,.38);
    --danger-bg: rgba(238,102,102,.14);
    --danger-bd: rgba(238,102,102,.40);
    }

    button.good{
    background:var(--good-bg);
    border-color:var(--good-bd);
    color:var(--fg);
    }
    button.good:hover{ background:rgba(66,184,131,.22); }

    button.danger{
    background:var(--danger-bg);
    border-color:var(--danger-bd);
    color:var(--fg);
    }
    button.danger:hover{ background:rgba(238,102,102,.22); }

    /* optional: align disabled feel with other buttons */
    button.good:disabled,
    button.danger:disabled{ opacity:.55; }

    @supports (background: color-mix(in srgb, red 10%, transparent)) {
        button.good{
            background: color-mix(in srgb, var(--good) 18%, transparent);
            border-color: color-mix(in srgb, var(--good) 42%, var(--border));
        }
        button.good:hover{
            background: color-mix(in srgb, var(--good) 26%, transparent);
        }
        button.danger{
            background: color-mix(in srgb, var(--danger) 18%, transparent);
            border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
        }
        button.danger:hover{
            background: color-mix(in srgb, var(--danger) 26%, transparent);
        }
    }

    /* Softer primary (blue) */
    :root{
    /* keep your base hue */
    --accent:#4c8df6;

    /* gentle surface + border derived from the hue */
    --accent-bg: rgba(76,141,246,.16);
    --accent-bd: rgba(76,141,246,.45);
    }

    button.primary{
    background: var(--accent-bg);
    border-color: var(--accent-bd);
    color: var(--fg);
    }
    button.primary:hover{ background: rgba(76,141,246,.24); }
    button.primary:active{ background: rgba(76,141,246,.30); }

    button.primary:focus-visible{
    outline: 0;
    /* subtle focus ring */
    box-shadow: 0 0 0 2px rgba(76,141,246,.35);
    }

    /* keep disabled consistent */
    button.primary:disabled{ opacity:.55; cursor:not-allowed; }

    /* Progressive enhancement with color-mix() */
    @supports (background: color-mix(in srgb, red 10%, transparent)) {
    button.primary{
        background: color-mix(in srgb, var(--accent) 18%, transparent);
        border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    }
    button.primary:hover{
        background: color-mix(in srgb, var(--accent) 26%, transparent);
    }
    button.primary:active{
        background: color-mix(in srgb, var(--accent) 32%, transparent);
    }
    button.primary:focus-visible{
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
    }
    }