#ros-gsm-panel{
  position:fixed; top:60px; right:22px; z-index:99999;
  width:360px; background:#fff; border:1px solid #ccc;
  padding:16px 18px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.18);
  font-size:14px; line-height:1.35;
}
#ros-gsm-panel select{width:100%;height:260px}
#ros-gsm-actions{clear:both;margin:12px 0 8px;display:flex;gap:8px}
#ros-gsm-status{margin:6px 0 4px;font-style:italic}


/* ══════════ Fancy Progress ══════════ */
#ros-gsm-progress{
  -webkit-appearance:none;
  appearance:none;
  width:100%; height:10px;
  border-radius:6px; overflow:hidden;
  background:#ececec;
}
#ros-gsm-progress::-webkit-progress-bar{
  background:#ececec;
}
#ros-gsm-progress::-webkit-progress-value{
  background:var(--primary-color,#4A90E2);
  transition:width .25s;
}
#ros-gsm-progress::-moz-progress-bar{
  background:var(--primary-color,#4A90E2);
  transition:width .25s;
}


.finished #ros-gsm-status{
  opacity:1;                 /* sichtbar lassen */
  color:#28a745;             /* sanftes Grün */
  font-weight:600;
}


#ros-gsm-panel{
  position:fixed; top:80px; right:22px; z-index:99999;
  width:400px; max-height:90vh;
  background:#fff; border:1px solid #d3d3d3;
  padding:20px 22px 24px;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.4;
  overflow:auto;           /* falls Fenster klein */
}


#ros-gsm-panel select{
  width:100%; height:280px;
  border:1px solid #ccc;
  border-radius:8px;
  padding:6px 8px;
  font-size:13px;
  background:#fafafa;
}
#ros-gsm-panel option{padding:2px 4px}


#ros-gsm-actions .button{
  flex:1 1 auto;
  border:none;
  border-radius:7px;
  padding:8px 14px;
  font-weight:600;
}
#ros-gsm-start{background:var(--primary-color,#4A90E2);color:#fff}
#ros-gsm-stop {background:#fbbc05;color:#000}
#ros-gsm-clear{background:#e0e0e0;color:#333}
#ros-gsm-actions .button:disabled{opacity:.45 !important;cursor:not-allowed}


/* ═══════════════════════════════════════════════
   MODERNES ADMIN-POPUP (GSM-Arena-Importer)
   ═══════════════════════════════════════════════*/

/* — Container — */
#ros-gsm-panel{
  position:fixed; top:70px; right:30px; z-index:99999;
  width:590px; max-height:92vh;
  background:#fff;
  border-radius:14px;
  border:1px solid #d0d0d0;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  padding:26px 28px 30px;
  display:flex; flex-direction:column;
  gap:22px;
  overflow:auto;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* — Headline — */
#ros-gsm-panel h3{
  margin:0 0 6px;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:.02em;
  text-align:left;
}

/* — Spaltenbereich — */
#ros-gsm-panel .ros-gsm-col{
  flex:1 1 0;
  display:flex; flex-direction:column;
  gap:6px;
}
#ros-gsm-panel .ros-gsm-col strong{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#555;
}

/* — Selects — */
#ros-gsm-panel select{
  flex:1 1 auto;
  min-height:260px;
  padding:6px 8px;
  border:1px solid #c7c7c7;
  border-radius:8px;
  background:#fafafa;
  font-size:.9rem;
  line-height:1.25;
  resize:vertical;
}

/* — Flex-Layout für die beiden Select-Spalten — */
#ros-gsm-panel .ros-gsm-col-wrap{
  display:flex; gap:18px;        /* Abstand zwischen den Selects */
}

/* — Aktionen — */
#ros-gsm-actions{
  display:flex; gap:10px;
}
#ros-gsm-actions .button{
  flex:1 1 0;
  padding:9px 0;
  font-size:.88rem;
  font-weight:600;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:.15s;
}
#ros-gsm-start{background:var(--primary-color,#4A90E2);color:#fff;}
#ros-gsm-stop {background:#ffcc4d;color:#000;}
#ros-gsm-clear{background:#e0e0e0;color:#333;}
#ros-gsm-actions .button:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
#ros-gsm-actions .button:disabled{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
}

/* — Progress-Bar (breiter & progress-stripe) — */
#ros-gsm-progress{
  -webkit-appearance:none; appearance:none;
  width:100%; height:12px;
  border-radius:6px; overflow:hidden;
  background:#eaeaea;            /* Track */
}
#ros-gsm-progress::-webkit-progress-value,
#ros-gsm-progress::-moz-progress-bar{
  background:linear-gradient(
      135deg,
      rgba(255,255,255,.35) 25%,
      transparent 25%,transparent 50%,
      rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,
      transparent 75%,transparent
  );
  background-size:32px 32px;
  animation:rosStripe 1.2s linear infinite;
}
@keyframes rosStripe{to{background-position:32px 0;}}

/* — Status-Text — */
#ros-gsm-status{
  margin:4px 0 0;
  font-size:.9rem;
  font-style:italic;
  color:#555;
}

/* — kleines Flair für den Trigger-Button oben rechts — */
#ros-gsm-btn{
  background:var(--primary-color,#4A90E2);
  color:#fff;
  border:none;
  border-radius:50px;
  padding:6px 14px 6px 12px;
  font-weight:600;
  display:flex; align-items:center; gap:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  transition:.2s;
}
#ros-gsm-btn:hover{transform:translateY(-1px);}
#ros-gsm-btn .dashicons{font-size:18px;}

/* Flex-Layout für Select-Spalten */
.ros-gsm-col-wrap{
  display:flex;
  gap:18px;                 /* Abstand zwischen den Spalten */
}
.ros-gsm-col{                 /* Spalten nehmen gleiche Breite ein */
  flex:1 1 0;
  display:flex;
  flex-direction:column;
}

/* ───────── GSM-Importer-Buttons ───────── */

/* gemeinsamer Grundstil */
#ros-gsm-start,
#ros-gsm-stop,
#ros-gsm-del,
#ros-gsm-clear{
    display:inline-block;
    border:none !important;          /* WP-Admin-Rahmen killen   */
    border-radius:9px !important;    /* schöne Rundung           */
    padding:10px 8px !important;
    font:600 11px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
    color:#fff !important;           /* helle Schrift            */
    cursor:pointer;
    transition:transform .15s, box-shadow .15s;
    text-shadow:none !important;
}

/* individuelle Farben */
#ros-gsm-start{ background:#2E7BE6; }   /* kräftiges Blau          */
#ros-gsm-stop { background:#FBC02D; color:#000 !important; }  /* Gelb */
#ros-gsm-clear{ background:#A6A6A6; }   /* neutrales Grau          */

/* Hover-Effekt */
#ros-gsm-start:hover:not(:disabled),
#ros-gsm-stop:hover:not(:disabled),
#ros-gsm-clear:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* Deaktiviert-Look */
#ros-gsm-start:disabled,
#ros-gsm-stop:disabled,
#ros-gsm-clear:disabled{
    opacity:.45 !important;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* ───────── Alle-löschen-Button farbig ───────── */

/* Grundfarbe – sattes Rot-Orange statt Grau */
#ros-gsm-clear{
  background:#FF5C35;          /* wähle z. B. #FF5C35 (Orange-Rot) */
  color:#fff !important;       /* helle Schrift                   */
}

/* Hover-Effekt beibehalten */
#ros-gsm-clear:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}


#ros-gsm-del{
  background:#FF5C35;   /* kräftiges Orange-Rot */
  color:#fff;
}

/* 200 px ≅ 30 % kürzer als 280 px */
#ros-gsm-imported{
  height:200px !important;
  min-height:200px !important;
}



/* ───────────────────────────────────────────────
   1) Schon-importiert-Select auf fixe Höhe
   ───────────────────────────────────────────────*/
   #ros-gsm-imported{                 /* <select id="ros-gsm-imported"> */
    /* Höhe 150 px (≈-30 %) */
    height:150px !important;
    min-height:150px !important;

    /* darf sich im Flex-Column NICHT strecken */
    flex:0 0 auto !important;
}

/* ───────────────────────────────────────────────
   2) Einheitlicher Button-Look für ALLE Actions
   ───────────────────────────────────────────────*/
#ros-gsm-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;                /* „Ausgewählte löschen“ kann unten stehen */
}

/* Basis für alle vier Buttons */
#ros-gsm-actions .button{
    flex:1 1 0;                    /* gleiche Breite */
    padding:10px 0 !important;
    font:600 14px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
    border:none !important;
    border-radius:9px !important;
    cursor:pointer;
    transition:.15s;
    text-shadow:none !important;
    color:#fff !important;
}

/* individuelle Farben */
#ros-gsm-start{ background:#2E7BE6; }   /* Blau   */
#ros-gsm-stop { background:#FBC02D; color:#000 !important; } /* Gelb  */
#ros-gsm-clear,
#ros-gsm-del { background:#FF5C35; }    /* Orange-Rot */

/* Hover-Effekt für ALLE */
#ros-gsm-actions .button:not(:disabled):hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* Disabled */
#ros-gsm-actions .button:disabled{
    opacity:.45 !important;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* ─────────────────────────────────────────────────────
   B)   Hover-Effekt – stärkerer Selektor, alle vier Buttons
   ───────────────────────────────────────────────────── */
   #ros-gsm-start:hover:not(:disabled),
   #ros-gsm-stop:hover:not(:disabled),
   #ros-gsm-clear:hover:not(:disabled),
   #ros-gsm-del:hover:not(:disabled){
       transform:translateY(-2px);
       box-shadow:0 4px 12px rgba(0,0,0,.18);
   }

   /* ───────── Individuelle Farbe für #ros-gsm-del ───────── */
#ros-gsm-del{
  background:#6c757d !important;   /* Grundfarbe   → z. B. Graublau             */
  color:#fff        !important;    /* weiße Schrift                             */
}

/* Hover-Farbe nur für diesen Button */
#ros-gsm-del:hover:not(:disabled){
  background:#545d63 !important;   /* etwas dunkler für Hover                   */
  transform:translateY(-2px);      /* gleicher “Lift” wie die anderen Buttons   */
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}





/* ═════ Spinner während .loading ═════ */
#ros-gsm-panel.loading #ros-gsm-models{
  position:relative;
  color:transparent;              /* Text ausblenden */
}
#ros-gsm-panel.loading #ros-gsm-models::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:26px; height:26px;
  margin:-13px 0 0 -13px;
  border:3px solid #ccc;
  border-top-color:var(--primary-color,#4A90E2);
  border-radius:50%;
  animation:ros-spin .8s linear infinite;
}
@keyframes ros-spin{to{transform:rotate(360deg)}}



/* ═══ sanftes Einblenden neuer Optionen ═══ */
#ros-gsm-models.fade-in option{
  opacity:0;
  animation:rosFade .35s ease forwards;
}
@keyframes rosFade{to{opacity:1}}



#ros-gsm-percent{
  transition:transform .25s ease;
}
#ros-gsm-percent.bump{
  transform:scale(1.1);
}

/* Select auf 1 Zeile einklappen, wenn nichts sichtbar */
#ros-gsm-models option:not(:visible) + option:visible {
  /* erste sichtbare Option erhält oberen Rand → Optik */
  margin-top:4px;
}

/* Suchfeld im Modelle-Panel */
#ros-model-filter{
  width:100%;              /* volle Spaltenbreite */
  box-sizing:border-box;   /* Border & Padding einrechnen ⇒ exakt wie <select> */
  display:block;           /* kein Inline-Gap */
}


/* ═══ enger in der HÖHE (Breite bleibt) ═══ */

/* 1) Panel-Padding oben/unten verkleinern */
#ros-gsm-panel{
  padding-top:10px;        /* vorher 26px */
  padding-bottom:14px;     /* vorher 30px */
}

/* 2) Headline dichter zum Inhalt */
#ros-gsm-panel h3{
  margin-bottom:4px;       /* vorher 6px */
}

/* 3) Spalten-Titel näher an den Selects */
.ros-gsm-col strong{
  margin-bottom:2px;       /* vorher 6px */
}

/* 4) Suchfeld dichter über dem Modelle-Select */
#ros-model-filter{
  margin-bottom:4px;       /* vorher 6px */
}

/* 5) Schon-importiert-Headline & Select ohne Extra-Luft */
#ros-gsm-imported{
  margin-top:4px;          /* statt default gap */
}

/* 6) Aktionen-Leiste weniger Abstand & geringere Button-Höhe */
#ros-gsm-actions{
  margin:8px 0 6px;        /* vorher 12 / 8 */
  gap:6px;                 /* engeres Spaltengap */
}
#ros-gsm-actions .button{
  padding:7px 0 !important;/* vorher 9–10 px */
  font-size:.8rem !important;
}

/* 7) Progress-Bar + Prozent + Status dichter beieinander */
#ros-gsm-progress{ margin-top:2px }
#ros-gsm-percent { margin-top:2px; font-size:.8rem }
#ros-gsm-status  { margin:2px 0 0; font-size:.8rem }