.ss-modal{position:fixed;inset:0;z-index:9999;display:none}
  .ss-modal.show{display:block}

  .ss-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}

  .ss-sheet{
    position:absolute;
    left:0; right:0; bottom:0;
    background:#fff;
    border-top:1px solid #e5e7eb;
    border-radius:20px 20px 0 0;
    height:92vh; max-height:92vh;
    display:flex; flex-direction:column;
    --ssDrag: 0px;
    transform: translateY(var(--ssDrag));
    transition: transform 180ms ease;
    /* Allow list scrolling; drag is handled only from the grab area/header */
    touch-action: auto;
  }

  /* Drag zones (mobile only) */
  .ss-grab-wrap,
  .ss-head{ touch-action: none; }

  /* Ensure the options list can scroll smoothly on mobile */
  .ss-list{ touch-action: pan-y; }

  /* Desktop dialog (kept for mobile only; desktop uses dropdowns in-page) */
  html.ss-desktop .ss-sheet{
    left:50%; top:50%; right:auto; bottom:auto;
    width:min(520px, calc(100vw - 28px));
    height:auto; max-height:min(640px, calc(100vh - 70px));
    border-radius:20px;
    border:1px solid #e5e7eb;
    transform: translate(-50%, -50%);
    touch-action: auto;
  }

  /* Desktop dropdown (inline) */
  .ss-wrap{position:relative}
  .ss-dd{
    position:absolute;
    top:calc(100% + 8px);
    left:0; right:0;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow: 0 18px 34px rgba(2,6,23,.14);
    z-index:9999;
    display:none;
    overflow:hidden;
  }
  .ss-dd.show{display:block}
  .ss-dd-head{padding:10px;border-bottom:1px solid #eef2f7}
  .ss-dd-search{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:14px;font-weight:800;outline:none}
  .ss-dd-search:focus{border-color:rgba(37,188,207,.6);box-shadow:0 0 0 4px rgba(37,188,207,.12)}
  .ss-dd-list{max-height:320px;overflow:auto;padding:8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .ss-dd-item{padding:12px;border-radius:14px;cursor:pointer;font-weight:900}
  .ss-dd-item:hover{background:#f8fafc}
  .ss-dd-item.muted{opacity:.6;font-weight:800}
  .ss-dd-item.active{background:rgba(37,188,207,.10)}

  .ss-grab-wrap{padding:10px 0 0 0;display:flex;justify-content:center}
  .ss-grab{width:52px;height:5px;border-radius:999px;background:#e5e7eb}
  html.ss-desktop .ss-grab-wrap{display:none}

  .ss-head{padding:12px;border-bottom:1px solid #eef2f7;display:flex;align-items:center;gap:10px;justify-content:space-between}
  .ss-title{font-weight:900}
  .ss-close{padding:10px 12px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;font-weight:900;cursor:pointer}

  .ss-search-wrap{padding:10px 12px}
  .ss-search{padding:12px;border:1px solid #e5e7eb;border-radius:14px;font-weight:800;width:100%}

  .ss-list{overflow:auto;padding:8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .ss-item{padding:12px;border-radius:14px;cursor:pointer;font-weight:900}
  .ss-item:hover{background:#f8fafc}
  .ss-item.muted{opacity:.6;font-weight:800}

  /* Trigger button (reuses select classes for consistent look) */
  .ss-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
  }
  .ss-btn .v{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:900;
  }
  .ss-btn .chev{opacity:.6;flex:0 0 auto}

  /* Make wrapper take full width */
  .ss-wrap{width:100%;max-width:100%;min-width:0}