:root { --bg:#0f0f10; --fg:#e8e8ea; --muted:#a9adb7; --card:#15161a; --border:#2b2f36; --accent:#4c8df6; --good:#42b883; --danger:#e66; --warn:#f4b400; --header-h:54px; }
    *{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{ 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: rgba(76,141,246,.16); border-color: rgba(76,141,246,.45) }
    button.primary:hover{ background: rgba(76,141,246,.24) }
    button.good{ background: rgba(66,184,131,.14); border-color: rgba(66,184,131,.38) }
    button.danger{ background: rgba(238,102,102,.14); border-color: rgba(238,102,102,.40) }
    button:disabled{ opacity:.6;cursor:not-allowed }
    .pill{padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px}
    .badge{font-size:12px;color:#ccc}
    .hint{font-size:12px;color:var(--muted)}
    .hr{height:1px;background:var(--border);margin:8px 0}

    #wrap{ --side-w:320px; 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:auto;padding:12px}

    .toolrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px }
    .iconbtn{ width:28px;height:28px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--fg); padding:0; }
    .iconbtn svg{ width:16px;height:16px }

    table.lm{ width:100%; border-collapse:separate; border-spacing:0; }
    table.lm thead th{ text-align:left; font-weight:600; padding:8px; border-bottom:1px solid var(--border); }
    table.lm tbody td{ padding:8px; border-bottom:1px solid var(--border); vertical-align:middle; }
    table.lm.compact tbody td{ padding:6px }
    .thumb50{ width:50px; height:50px; object-fit:cover; border-radius:8px; border:1px solid var(--border); background:#000; }
    .row-tools{ display:flex; gap:6px; align-items:center; justify-content:flex-start }

    #page-nav{ display:flex; gap:6px; align-items:center }
    #page-indicator{ margin-left:6px }

    @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:6 }
      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:5 }
      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}
    }

    /* mobile table labels */
    @media (max-width:900px){
      table.lm thead{ display:none }
      table.lm tbody tr{ display:grid; grid-template-columns: 1fr 1fr; gap:4px 10px; padding:8px; border:1px solid var(--border); border-radius:12px; margin-bottom:10px }
      table.lm tbody td{ border:none; padding:0 }
      table.lm tbody td[data-label]::before{ content: attr(data-label) ": "; display:inline-block; color:var(--muted); font-size:12px; margin-right:6px }
    }

    /* ===== Controls sizing (standard) ===== */
    input, select {
    font-size: 14px;
    line-height: 1.2;
    height: 34px;           /* standard control height */
    padding: 6px 10px;      /* balanced padding */
    }

    button {
    font-size: 14px;
    line-height: 1.2;
    padding: 6px 10px;      /* balanced padding */
    }

    /* Sidebar filter fields fill width and don't look cramped */
    #side .field select,
    #side .field input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 6px 10px;
    }

    /* ===== Mobile hamburger fix ===== */
    /* Inline style adds display:none. Override it on mobile. */
    @media (max-width:900px){
    #open-side{
        display:inline-flex !important;
        align-items:center; justify-content:center;
        width:28px; height:28px;
        margin-right:6px;
        border-radius:999px;
        background:var(--card);
        border:1px solid var(--border);
    }
    #side-toggle {
        display:none !important;
    }
    }
    /* And keep it gone on desktop */
    @media (min-width:901px){
    #open-side{ display:none !important; }
    }

    /* ===== Desktop: collapsible sidebar (match Lessons page behavior) ===== */
    @media (min-width:901px){
    /* animate rail width */
    #side{ transition: width .18s ease; }

    /* collapsed state */
    #wrap.collapsed{ --side-w:56px; }
    #wrap.collapsed #side{
        width:56px; overflow:hidden;
    }
    /* keep only the toggle visible when collapsed */
    #wrap.collapsed #side > *:not(#side-toggle){ display:none; }

    /* make sure the toggle itself stays small */
    #side #side-toggle{
        position:absolute; top:8px; right:8px;
        width:28px; height:28px;
        display:flex; align-items:center; justify-content:center;
        border-radius:999px; background:var(--card); border:1px solid var(--border);
        cursor:pointer; z-index:2;
    }
    }

    /* Hide Apply entirely */
    #btn-apply { display:none !important; }

    /* Make the action row a single full-width column when Apply is hidden */
    #btn-reset { width:100%; }
    #side .panel .field:has(#btn-reset){ 
    display:grid !important; 
    grid-template-columns: 1fr; 
    gap:8px;
    }

    /* Fallback if :has() unsupported — JS below also enforces layout */
    @supports not(selector(:has(*))){
    #btn-reset { display:block; width:100%; }
    }

   #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;
    }
    #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) } }

    /* Difficulty stars */
    .level-stars { display:inline-flex; gap:2px; align-items:center; }
    .level-stars .s { opacity:.28; }
    .level-stars .s.on { opacity:1; color: var(--warn); }   /* uses your golden accent */
    .level-stars.none { opacity:.7; color: var(--muted); }
    .tags { display:flex; flex-wrap:wrap; gap:6px; }