/* Dark modern select */
.select-dark{
    --bg:#111;
    --bg-hover:#161616;
    --bg-active:#0f0f0f;
    --fg:#e8e8e8;
    --muted:#9aa0a6;
    --border:#2a2a2a;
    --ring:#4f46e5; /* indigo focus */
    --radius:4px;
    --pad-x:.5rem; /* leave space for chevron */
    --pad-y:.5rem;
    --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px rgba(0,0,0,.35);
  
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
  
    font-family: sans-serif;
    width:200px;
    color:var(--fg);
    background:
      /* chevron */
      url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23c9c9c9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') 
      no-repeat right .9rem center / 18px 18px,
      linear-gradient(var(--bg),var(--bg));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:var(--pad-y) var(--pad-x) var(--pad-y) 1rem;
    box-shadow:var(--shadow);
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    cursor:pointer;
    line-height:1.2;

    font-size: 0.9rem;
    font-weight: 600;
  }
  
  .select-dark:hover{ background-color:var(--bg-hover); }
  .select-dark:active{ background-color:var(--bg-active); }
  
  /* Focus ring */
  .select-dark:focus{
    outline:none;
    border-color:color-mix(in oklab, var(--ring) 70%, white 0%);
    box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 28%, transparent),
               var(--shadow);
  }
  
  /* Disabled */
  .select-dark:disabled{
    color:var(--muted);
    background-color:#0c0c0c;
    cursor:not-allowed;
    opacity:.75;
  }
  
  /* Remove old IE arrow (safe no-op elsewhere) */
  .select-dark::-ms-expand{ display:none; }
  
  /* High-contrast fallback if color-mix unsupported */
  @supports not (color-mix(in oklab, black 50%, white 50%)){
    .select-dark:focus{ box-shadow:0 0 0 3px rgba(79,70,229,.28), var(--shadow); }
  }
  
  /* Optional: compact size variant */
  .select-dark.is-sm{
    --pad-y:.45rem;
    --radius:10px;
    font-size:.925rem;
  }
  
  /* Optional: full-width container helper */
  .select-row{ max-width:420px; }