/*
 * TracePilot Settings Test – Layout v3
 * ------------------------------------
 * Isolierter Design-Prototyp. Keine bestehende Settings-Funktion wird
 * überschrieben. Alle Regeln bleiben unter .sf-settings-test-* namespaced.
 */

/* Hidden muss immer gewinnen – auch bei Panels, die sonst display:flex/grid nutzen. */
.sf-settings-test-view[hidden],
.sf-settings-test-view [hidden],
.sf-settings-test-panel-placeholder[hidden],
[data-settings-test-panel][hidden]{display:none!important}

.sf-settings-test-view{
  min-height:100%;
  color:#f3f6fb;
  padding:24px 28px 28px;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 86% 0%,rgba(73,66,150,.055),transparent 30%),
    linear-gradient(180deg,rgba(7,13,26,.10),rgba(7,13,26,0));
  overflow:visible;
  scrollbar-gutter:auto;
}
.sf-settings-test-shell{width:100%;max-width:none;margin:0 auto}

/* Kopf */
.sf-settings-test-head{
  padding:5px 2px 16px;
  border-bottom:1px solid rgba(123,144,182,.12);
}
.sf-settings-test-head h1{
  margin:0;
  color:#f7f9fd;
  font-size:22px;
  line-height:1.2;
  font-weight:780;
  letter-spacing:-.45px;
}
.sf-settings-test-head p{
  margin:8px 0 0;
  color:#91a0b7;
  font-size:13px;
  line-height:1.45;
}

/* Tabs */
.sf-settings-test-tabs{
  display:flex;
  align-items:center;
  gap:28px;
  min-height:60px;
  padding:0 2px;
  border-bottom:1px solid rgba(123,144,182,.11);
  overflow-x:auto;
  scrollbar-width:none;
}
.sf-settings-test-tabs::-webkit-scrollbar{display:none}
.sf-settings-test-tab{
  height:60px;
  padding:2px 2px 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:0;
  background:transparent;
  color:#909cb2;
  font:700 11px/1 inherit;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
}
.sf-settings-test-tab:hover{color:#d9e0ee}
.sf-settings-test-tab.is-active{color:#9c79ff}
.sf-settings-test-tab.is-active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#7747ed,#a578ff);
  box-shadow:0 0 12px rgba(124,58,237,.28);
}

.sf-settings-test-overview{margin-top:20px}

/* Website-Übersicht */
.sf-settings-test-hero{
  display:grid;
  grid-template-columns:minmax(330px,2.35fr) repeat(3,minmax(150px,.82fr)) minmax(150px,.78fr);
  gap:12px;
  padding:18px 19px;
  border:1px solid #202c43;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(16,26,44,.98),rgba(11,20,35,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015),0 10px 35px rgba(0,0,0,.12);
}
.sf-settings-test-hero-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:0 7px;
}
.sf-settings-test-eyebrow{
  color:#7f8ca2;
  font-size:9px;
  font-weight:760;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.sf-settings-test-domain{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  color:#f4f7fb;
  font-size:20px;
  font-weight:760;
  letter-spacing:-.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sf-settings-test-domain svg{width:14px;height:14px;color:#8492ab;flex:0 0 auto}
.sf-settings-test-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.sf-settings-test-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:22px;
  padding:0 8px;
  border:1px solid rgba(135,148,174,.16);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#cbd3e1;
  font-size:9px;
  font-weight:650;
}
.sf-settings-test-badge i{width:5px;height:5px;border-radius:50%;background:#79869d}
.sf-settings-test-badge.is-green{border-color:rgba(32,207,115,.15);background:rgba(32,207,115,.06);color:#58dd92}
.sf-settings-test-badge.is-green i{background:#25d67a}
.sf-settings-test-stat{
  min-height:94px;
  padding:14px 15px;
  border:1px solid rgba(112,132,167,.09);
  border-radius:9px;
  background:rgba(8,16,30,.38);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sf-settings-test-stat strong{display:flex;align-items:center;gap:7px;margin-top:8px;color:#eef2f8;font-size:14px}
.sf-settings-test-stat strong.is-green{color:#31d77c}
.sf-settings-test-stat .sf-settings-test-pulse{width:7px;height:7px;border-radius:50%;background:#2bd77d;box-shadow:0 0 10px rgba(43,215,125,.42)}
.sf-settings-test-stat p{margin:5px 0 0;color:#8e9baf;font-size:10px;line-height:1.35}
.sf-settings-test-switch-site{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:94px;
  padding:12px;
  border:1px solid rgba(112,132,167,.09);
  border-radius:9px;
  background:rgba(8,16,30,.38);
  color:#d8dfeb;
  font-size:10px;
  font-weight:720;
  cursor:pointer;
}
.sf-settings-test-switch-site:hover{border-color:#31425f;background:rgba(14,25,44,.7)}
.sf-settings-test-switch-icon{width:36px;height:36px;border-radius:8px;border:1px solid #263650;background:#121d32;display:grid;place-items:center}
.sf-settings-test-switch-icon svg{width:19px;height:19px;color:#b6c0d2}

/* Karten */
.sf-settings-test-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.sf-settings-test-card{
  min-height:276px;
  border:1px solid #202c43;
  border-radius:11px;
  background:linear-gradient(145deg,#0e182a,#0b1424);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012),0 12px 28px rgba(0,0,0,.09);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sf-settings-test-card-inner{
  padding:16px 18px 14px;
  display:flex;
  flex:1;
  flex-direction:column;
  min-height:0;
}
.sf-settings-test-card-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(120,139,170,.11);
}
.sf-settings-test-card-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:rgba(124,58,237,.15);
  color:#8957ff;
  box-shadow:inset 0 0 0 1px rgba(133,89,255,.09),0 0 18px rgba(124,58,237,.06);
}
.sf-settings-test-card-icon.is-blue{background:rgba(36,132,255,.13);color:#43a0ff}
.sf-settings-test-card-icon svg{width:20px;height:20px}
.sf-settings-test-card-title h2{margin:2px 0 0;color:#f2f5fa;font-size:15px;font-weight:760}
.sf-settings-test-card-title p{margin:5px 0 0;color:#7f8ba0;font-size:10px;line-height:1.4}
.sf-settings-test-rows{margin-top:7px;display:flex;flex-direction:column}
.sf-settings-test-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-height:31px;
  border-bottom:1px solid rgba(120,139,170,.075);
  font-size:10.5px;
}
.sf-settings-test-row:last-child{border-bottom:0}
.sf-settings-test-row span:first-child{color:#c8d0df}
.sf-settings-test-row strong{color:#e8edf6;font-size:10.5px;font-weight:680;text-align:right;white-space:nowrap}
.sf-settings-test-row strong.is-green{color:#36d982}
.sf-settings-test-row strong.is-muted{color:#95a1b5;font-weight:600}
.sf-settings-test-row .sf-settings-test-status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#2bd77d;margin-right:5px;vertical-align:1px}
.sf-settings-test-card-action{margin-top:auto;padding-top:11px}
.sf-settings-test-action{
  width:100%;
  height:36px;
  border:1px solid #273752;
  border-radius:7px;
  background:#111c30;
  color:#e6ebf5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:10.5px;
  font-weight:720;
  cursor:pointer;
}
.sf-settings-test-action:hover{border-color:#3a4b69;background:#142139}
.sf-settings-test-action svg{width:12px;height:12px;color:#a9b5c9}

/* Systemstatus */
.sf-settings-test-system{
  display:grid;
  grid-template-columns:1.15fr repeat(5,.75fr) 1.15fr;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:13px 17px;
  border:1px solid #202c43;
  border-radius:10px;
  background:linear-gradient(135deg,#0e182a,#0b1424);
}
.sf-settings-test-system-title{display:flex;align-items:center;gap:10px;color:#e9edf6;font-size:11px;font-weight:730}
.sf-settings-test-info-icon{width:27px;height:27px;border:1px solid #7655d4;border-radius:50%;display:grid;place-items:center;color:#9b77ff;font-size:14px}
.sf-settings-test-system-item{display:flex;flex-direction:column;gap:5px}
.sf-settings-test-system-item span{color:#77849b;font-size:9px}
.sf-settings-test-system-item strong{display:flex;align-items:center;gap:5px;color:#d9e0ec;font-size:9.5px}
.sf-settings-test-system-item i{width:5px;height:5px;border-radius:50%;background:#28d778;box-shadow:0 0 7px rgba(40,215,120,.3)}
.sf-settings-test-diagnose{
  height:36px;
  border:1px solid #273752;
  border-radius:7px;
  background:#111c30;
  color:#dfe5ef;
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}
.sf-settings-test-diagnose:hover{border-color:#3a4b69;background:#142139}

/* Noch nicht integrierte Tabs */
.sf-settings-test-panel-placeholder{
  margin-top:18px;
  border:1px dashed #2a3a57;
  border-radius:12px;
  background:rgba(13,23,40,.65);
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
}
.sf-settings-test-panel-placeholder h2{margin:0;color:#eef2f8;font-size:18px}
.sf-settings-test-panel-placeholder p{margin:9px auto 0;max-width:520px;color:#8190a8;font-size:12px;line-height:1.6}

.sf-settings-test-toggle.sf-active{
  background:linear-gradient(90deg,rgba(72,82,169,.28),rgba(56,65,136,.22));
  border-color:#425499;
  color:#f0f3ff;
}

/* v3: Der äußere Dashboard-Canvas ist der einzige vertikale Scrollbereich.
   Dadurch bleiben Kopf und Tabs Bestandteil des normalen Dokumentflusses und
   werden beim Öffnen zuverlässig sichtbar. */
.sf-canvas > .sf-settings-test-view{overflow:visible}
.sf-settings-test-head,.sf-settings-test-tabs{scroll-margin-top:0}

@media(max-width:1320px){
  .sf-settings-test-view{padding-left:22px;padding-right:22px}
  .sf-settings-test-tabs{gap:22px}
  .sf-settings-test-hero{grid-template-columns:2fr repeat(2,1fr)}
  .sf-settings-test-switch-site{grid-column:4}
  .sf-settings-test-stat:nth-of-type(4){display:none}
  .sf-settings-test-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-settings-test-system{grid-template-columns:1.2fr repeat(3,.8fr) 1fr}
  .sf-settings-test-system-item:nth-of-type(5),.sf-settings-test-system-item:nth-of-type(6){display:none}
}
@media(max-width:900px){
  .sf-settings-test-view{padding:18px 14px 24px}
  .sf-settings-test-head h1{font-size:22px}
  .sf-settings-test-hero{grid-template-columns:1fr 1fr}
  .sf-settings-test-hero-main{grid-column:1/-1}
  .sf-settings-test-switch-site{grid-column:auto}
  .sf-settings-test-grid{grid-template-columns:1fr}
  .sf-settings-test-tabs{gap:18px}
  .sf-settings-test-system{grid-template-columns:1fr 1fr}
  .sf-settings-test-system-title,.sf-settings-test-diagnose{grid-column:1/-1}
}

/* ========================================================================== 
   TracePilot Settings Test – Layout v4 visual tuning
   Ziel: Proportionen der freigegebenen Soll-Referenz. Nur Testbereich.
   ========================================================================== */

.sf-settings-test-view{
  padding:30px 30px 34px;
}
.sf-settings-test-shell{
  width:100%;
  max-width:1480px;
  margin:0 auto;
}

/* Mehr visuelle Hierarchie im Kopf, ohne die funktionierende Scrolllogik anzufassen. */
.sf-settings-test-head{
  padding:8px 0 18px;
}
.sf-settings-test-head h1{
  font-size:24px;
  line-height:1.18;
  font-weight:780;
  letter-spacing:-.5px;
}
.sf-settings-test-head p{
  margin-top:9px;
  font-size:13px;
  line-height:1.5;
}
.sf-settings-test-tabs{
  min-height:64px;
  height:64px;
  gap:38px;
  padding:0;
}
.sf-settings-test-tab{
  height:64px;
  font-size:11.5px;
  letter-spacing:.04em;
}
.sf-settings-test-overview{margin-top:20px}

/* Website-Zusammenfassung: höher und klarer segmentiert wie in der Referenz. */
.sf-settings-test-hero{
  grid-template-columns:minmax(360px,2.25fr) repeat(3,minmax(170px,.82fr)) minmax(175px,.78fr);
  gap:12px;
  padding:18px 20px;
  min-height:132px;
  border-radius:12px;
}
.sf-settings-test-hero-main{padding:2px 7px}
.sf-settings-test-eyebrow{font-size:9.5px}
.sf-settings-test-domain{
  margin-top:9px;
  font-size:20px;
  line-height:1.2;
}
.sf-settings-test-badges{margin-top:11px;gap:7px}
.sf-settings-test-badge{
  height:23px;
  padding:0 9px;
  font-size:9.5px;
}
.sf-settings-test-stat,
.sf-settings-test-switch-site{
  min-height:98px;
}
.sf-settings-test-stat{padding:15px 16px}
.sf-settings-test-stat strong{
  margin-top:9px;
  font-size:14px;
}
.sf-settings-test-stat p{font-size:10.5px}
.sf-settings-test-switch-site{font-size:10.5px}

/* Karten erhalten die kompakte, aber weniger flache Referenz-Proportion. */
.sf-settings-test-grid{
  gap:14px;
  margin-top:14px;
}
.sf-settings-test-card{
  min-height:302px;
  border-radius:11px;
}
.sf-settings-test-card-inner{
  padding:17px 18px 15px;
}
.sf-settings-test-card-head{
  gap:12px;
  padding-bottom:14px;
}
.sf-settings-test-card-icon{
  width:38px;
  height:38px;
}
.sf-settings-test-card-icon svg{width:21px;height:21px}
.sf-settings-test-card-title h2{
  margin-top:2px;
  font-size:15.5px;
}
.sf-settings-test-card-title p{
  margin-top:5px;
  font-size:10.5px;
  line-height:1.45;
}
.sf-settings-test-rows{margin-top:8px}
.sf-settings-test-row{
  min-height:33px;
  font-size:10.75px;
}
.sf-settings-test-row strong{font-size:10.75px}
.sf-settings-test-card-action{padding-top:12px}
.sf-settings-test-action{
  height:38px;
  font-size:10.75px;
}

/* Systemstatus als klarer Abschlussblock. */
.sf-settings-test-system{
  grid-template-columns:1.2fr repeat(5,.75fr) 1.25fr;
  gap:10px;
  margin-top:18px;
  padding:15px 18px;
  min-height:68px;
}
.sf-settings-test-system-title{font-size:11.5px}
.sf-settings-test-info-icon{width:29px;height:29px;font-size:14px}
.sf-settings-test-system-item span{font-size:9.5px}
.sf-settings-test-system-item strong{font-size:10px}
.sf-settings-test-diagnose{height:38px;font-size:10.25px}

/* Bei kleineren Arbeitsflächen weiterhin flüssig, ohne die Desktop-Proportionen zu zerstören. */
@media(max-width:1580px){
  .sf-settings-test-shell{max-width:100%}
  .sf-settings-test-view{padding-left:24px;padding-right:24px}
  .sf-settings-test-tabs{gap:30px}
  .sf-settings-test-hero{grid-template-columns:minmax(330px,2.1fr) repeat(3,minmax(155px,.82fr)) minmax(155px,.78fr)}
}


/* ========================================================================== 
   TracePilot Settings Test – Layout v7
   Echte Desktop-Skalierung: breite Karten + kompaktere vertikale Geometrie.
   Ziel: Übersicht passt bei 864–1080px hohen Desktopfenstern deutlich besser
   in den sichtbaren Bereich, ohne die größere Typografie wieder zu verkleinern.
   ========================================================================== */
@media (min-width:1321px){
  .sf-settings-test-view{
    padding:16px 12px 22px;
  }
  .sf-settings-test-shell{
    width:100%;
    max-width:none;
    margin:0;
  }

  .sf-settings-test-head{
    padding:4px 4px 14px;
  }
  .sf-settings-test-head h1{
    font-size:28px;
    line-height:1.12;
    letter-spacing:-.65px;
  }
  .sf-settings-test-head p{
    margin-top:8px;
    font-size:15px;
    line-height:1.4;
  }

  .sf-settings-test-tabs{
    height:54px;
    min-height:54px;
    gap:clamp(26px,2.15vw,40px);
    padding:0 4px;
  }
  .sf-settings-test-tab{
    height:54px;
    font-size:13px;
    letter-spacing:.035em;
  }
  .sf-settings-test-overview{margin-top:14px}

  .sf-settings-test-hero{
    width:100%;
    grid-template-columns:minmax(390px,2.25fr) repeat(3,minmax(175px,.82fr)) minmax(180px,.8fr);
    gap:10px;
    padding:14px 16px;
    min-height:116px;
    border-radius:12px;
  }
  .sf-settings-test-hero-main{padding:0 10px}
  .sf-settings-test-eyebrow{font-size:10.5px}
  .sf-settings-test-domain{margin-top:8px;font-size:23px;gap:9px}
  .sf-settings-test-domain svg{width:15px;height:15px}
  .sf-settings-test-badges{margin-top:9px;gap:8px}
  .sf-settings-test-badge{height:24px;padding:0 9px;font-size:10.5px}
  .sf-settings-test-stat,.sf-settings-test-switch-site{min-height:88px}
  .sf-settings-test-stat{padding:12px 14px}
  .sf-settings-test-stat strong{margin-top:7px;font-size:16px}
  .sf-settings-test-stat p{margin-top:4px;font-size:11.5px}
  .sf-settings-test-switch-site{gap:10px;font-size:11.5px;padding:10px}
  .sf-settings-test-switch-icon{width:38px;height:38px}
  .sf-settings-test-switch-icon svg{width:20px;height:20px}

  .sf-settings-test-grid{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
  }
  .sf-settings-test-card{
    min-width:0;
    min-height:0;
    height:auto;
    border-radius:12px;
  }
  .sf-settings-test-card-inner{padding:14px 16px 12px}
  .sf-settings-test-card-head{gap:13px;padding-bottom:10px}
  .sf-settings-test-card-icon{width:40px;height:40px}
  .sf-settings-test-card-icon svg{width:22px;height:22px}
  .sf-settings-test-card-title h2{font-size:17px;line-height:1.2}
  .sf-settings-test-card-title p{margin-top:4px;font-size:11.5px;line-height:1.35}
  .sf-settings-test-rows{margin-top:5px}
  .sf-settings-test-row{min-height:27px;gap:16px;font-size:12px}
  .sf-settings-test-row strong{font-size:12px}
  .sf-settings-test-row .sf-settings-test-status-dot{width:6px;height:6px;margin-right:6px}
  .sf-settings-test-card-action{padding-top:9px}
  .sf-settings-test-action{height:38px;font-size:12px;gap:9px}
  .sf-settings-test-action svg{width:13px;height:13px}

  .sf-settings-test-system{
    width:100%;
    grid-template-columns:minmax(180px,1.2fr) repeat(5,minmax(88px,.7fr)) minmax(190px,1.2fr);
    gap:9px;
    margin-top:10px;
    padding:11px 16px;
    min-height:58px;
    border-radius:10px;
  }
  .sf-settings-test-system-title{gap:10px;font-size:13px}
  .sf-settings-test-info-icon{width:30px;height:30px;font-size:15px}
  .sf-settings-test-system-item{gap:4px}
  .sf-settings-test-system-item span{font-size:10.5px}
  .sf-settings-test-system-item strong{font-size:11.5px}
  .sf-settings-test-system-item i{width:6px;height:6px}
  .sf-settings-test-diagnose{height:38px;font-size:11.5px}
}

/* Bei typischen 864/900px hohen Browserfenstern nochmals vertikal verdichten,
   ohne die Lesbarkeit zu reduzieren. */
@media (min-width:1321px) and (max-height:920px){
  .sf-settings-test-view{padding-top:12px;padding-bottom:16px}
  .sf-settings-test-head{padding-bottom:11px}
  .sf-settings-test-head p{margin-top:6px}
  .sf-settings-test-tabs,.sf-settings-test-tab{height:48px;min-height:48px}
  .sf-settings-test-overview{margin-top:10px}
  .sf-settings-test-hero{min-height:104px;padding:11px 14px}
  .sf-settings-test-stat,.sf-settings-test-switch-site{min-height:78px}
  .sf-settings-test-stat{padding:9px 12px}
  .sf-settings-test-badges{margin-top:7px}
  .sf-settings-test-grid{gap:9px;margin-top:9px}
  .sf-settings-test-card-inner{padding:12px 15px 10px}
  .sf-settings-test-card-head{padding-bottom:8px}
  .sf-settings-test-row{min-height:25px}
  .sf-settings-test-card-action{padding-top:7px}
  .sf-settings-test-action{height:35px}
  .sf-settings-test-system{margin-top:9px;min-height:54px;padding:9px 15px}
  .sf-settings-test-diagnose{height:35px}
}


/* =========================================================
   SETTINGS TEST v10 — echte Dashboard-Geometrie
   Verwendet die tatsächlich vorhandenen Klassen.
   ========================================================= */
@media (min-width: 1321px) {

  /* .sf-canvas besitzt bereits 14px Padding wie das Dashboard.
     Deshalb hier KEIN zweites horizontales Innenpadding. */
  .sf-settings-test-view {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .sf-settings-test-shell,
  .sf-settings-test-head,
  .sf-settings-test-tabs,
  .sf-settings-test-overview,
  [data-settings-test-panel="overview"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* obere Website-Kachel über die komplette Dashboard-Breite */
  .sf-settings-test-hero {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns:
      minmax(400px, 2.55fr)
      minmax(180px, 1fr)
      minmax(180px, 1fr)
      minmax(180px, 1fr)
      minmax(190px, 1fr) !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  /* exakt drei gleich breite Fenster wie im normalen Dashboard */
  .sf-settings-test-grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .sf-settings-test-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Systemstatus ebenfalls exakt bis zu den Dashboard-Außenkanten */
  .sf-settings-test-system {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns:
      minmax(200px, 1.35fr)
      repeat(5, minmax(100px, 1fr))
      minmax(230px, 1.45fr) !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================
   SETTINGS TEST v11 — System Status bündig zum Dashboard
   ========================================================= */
@media (min-width: 1100px) {
  .sf-settings-test-view,
  .sf-settings-test-shell,
  .sf-settings-test-overview,
  [data-settings-test-panel="overview"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .sf-settings-test-system {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .sf-settings-test-system:last-child {
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   SETTINGS TEST v12 — Integrationen Layout Dummy
   ========================================================= */
.sf-settings-test-integrations{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}
.sf-settings-test-section-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:4px 2px 2px;
}
.sf-settings-test-section-intro h2{
  margin:0 0 5px;
  font-size:22px;
  line-height:1.2;
  color:#f5f7ff;
}
.sf-settings-test-section-intro p{
  margin:0;
  font-size:13px;
  color:#8ea4c8;
}
.sf-settings-test-integration-featured,
.sf-settings-test-integration-card{
  border:1px solid #253653;
  background:linear-gradient(180deg,#0d192b 0%,#0b1627 100%);
  border-radius:12px;
  box-sizing:border-box;
}
.sf-settings-test-integration-featured{padding:18px;}
.sf-settings-test-integration-card{
  padding:17px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.sf-settings-test-integration-head{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.sf-settings-test-integration-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(112,80,255,.25);
  color:#8d66ff;
  background:#20164e;
}
.sf-settings-test-integration-icon.wordpress{
  color:#3da6ff;
  background:#0c2c50;
  border-color:#174b7a;
  font-size:18px;
}
.sf-settings-test-integration-icon.commerce{
  color:#9b72ff;
  font-size:11px;
}
.sf-settings-test-integration-icon.api{
  color:#68c6ff;
  background:#0b2940;
  border-color:#164662;
}
.sf-settings-test-integration-title{
  min-width:0;
  flex:1;
}
.sf-settings-test-integration-title h3{
  margin:0 0 4px;
  font-size:16px;
  color:#f7f9ff;
}
.sf-settings-test-integration-title p{
  margin:0;
  color:#8ca3c7;
  font-size:11px;
  line-height:1.4;
}
.sf-settings-test-status-pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  border:1px solid #34415d;
}
.sf-settings-test-status-pill.is-online{
  color:#2fe39a;
  background:rgba(16,117,82,.15);
  border-color:rgba(47,227,154,.22);
}
.sf-settings-test-status-pill.is-planned{
  color:#aab7cf;
  background:#111b2d;
}
.sf-settings-test-integration-domain{
  margin-top:16px;
  padding:13px 14px;
  border:1px solid #1e2d47;
  background:#0a1525;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.sf-settings-test-integration-domain span{
  color:#6f86aa;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
}
.sf-settings-test-integration-domain strong{
  color:#fff;
  font-size:16px;
}
.sf-settings-test-integration-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin-top:14px;
  border:1px solid #1e2d47;
  border-radius:9px;
  overflow:hidden;
}
.sf-settings-test-integration-stats>div{
  padding:12px 13px;
  min-width:0;
  border-right:1px solid #1e2d47;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sf-settings-test-integration-stats>div:last-child{border-right:0;}
.sf-settings-test-integration-stats span,
.sf-settings-test-integration-rows span{
  color:#8ca3c7;
  font-size:10px;
}
.sf-settings-test-integration-stats strong{
  color:#f5f7ff;
  font-size:11px;
  overflow-wrap:anywhere;
}
.sf-settings-test-integrations .is-green{color:#2fe39a!important;}
.sf-settings-test-integration-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}
.sf-settings-test-integration-actions button,
.sf-settings-test-integration-button{
  min-height:36px;
  border:1px solid #30415f;
  background:#111e32;
  color:#f5f7ff;
  border-radius:7px;
  padding:0 18px;
  font-size:11px;
  font-weight:700;
  cursor:default;
}
.sf-settings-test-integration-actions button span,
.sf-settings-test-integration-button span{margin-left:8px;color:#8ea4c8;}
.sf-settings-test-integrations-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.sf-settings-test-integration-rows{
  margin-top:15px;
  border-top:1px solid #1d2b43;
}
.sf-settings-test-integration-rows>div{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid #18263d;
}
.sf-settings-test-integration-rows strong{
  color:#f5f7ff;
  font-size:11px;
  text-align:right;
}
.sf-settings-test-integration-button{
  width:100%;
  margin-top:auto;
  position:relative;
  top:12px;
}
@media (max-width:1100px){
  .sf-settings-test-integration-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sf-settings-test-integration-stats>div{border-bottom:1px solid #1e2d47;}
  .sf-settings-test-integrations-grid{grid-template-columns:1fr;}
}


/* =========================================================
   SETTINGS TEST v14 — customer-facing integrations only
   API & Webhooks removed; WooCommerce uses full row.
   ========================================================= */
.sf-settings-test-integrations-grid {
  grid-template-columns: 1fr !important;
}

.sf-settings-test-integrations-grid .sf-settings-test-integration-card {
  width: 100% !important;
  max-width: none !important;
}


/* =========================================================
   SETTINGS TEST v17 — Full integration catalog
   ========================================================= */
.sf-settings-test-more-integrations{
  margin-top:2px;
  border:1px solid #253653;
  background:linear-gradient(180deg,#0d192b 0%,#0b1627 100%);
  border-radius:12px;
  padding:17px;
}
.sf-settings-test-more-integrations-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:14px;
}
.sf-settings-test-more-integrations-head h3{
  margin:0 0 4px;
  font-size:16px;
  color:#f7f9ff;
}
.sf-settings-test-more-integrations-head p{
  margin:0;
  color:#8ca3c7;
  font-size:11px;
}
.sf-settings-test-platform-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.sf-settings-test-platform-card{
  min-width:0;
  min-height:100px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  border:1px solid #1f304b;
  background:#0a1525;
  border-radius:9px;
  padding:13px;
  box-sizing:border-box;
}
.sf-settings-test-platform-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#171c3a;
  border:1px solid #33415f;
  color:#9c82ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:-.02em;
}
.sf-settings-test-platform-icon.shopify{color:#6fdc8c;background:#102b24;border-color:#1f5546;}
.sf-settings-test-platform-icon.shopware{color:#48b7ff;background:#0d2942;border-color:#1b4e76;}
.sf-settings-test-platform-icon.magento{color:#ff8a5b;background:#321b17;border-color:#603225;}
.sf-settings-test-platform-icon.prestashop{color:#58d9dd;background:#102a31;border-color:#24545c;}
.sf-settings-test-platform-icon.webflow{color:#7aa6ff;background:#121f3d;border-color:#2b4271;}
.sf-settings-test-platform-icon.wix{color:#d7e1ff;background:#1a2337;border-color:#35415b;}
.sf-settings-test-platform-icon.squarespace{color:#e8ecf5;background:#1b1d25;border-color:#3a3e4c;}
.sf-settings-test-platform-icon.typo3{color:#ff9f52;background:#302116;border-color:#5b3b20;}
.sf-settings-test-platform-icon.gtm{color:#7fc5ff;background:#10273b;border-color:#23506c;font-size:9px;}
.sf-settings-test-platform-icon.bigcommerce{color:#9b8cff;background:#1d1a3a;border-color:#3f376c;}
.sf-settings-test-platform-icon.opencart{color:#5ad0ff;background:#102b38;border-color:#23596d;}
.sf-settings-test-platform-content{
  min-width:0;
}
.sf-settings-test-platform-content h4{
  margin:0 0 5px;
  font-size:13px;
  color:#f5f7ff;
}
.sf-settings-test-platform-content p{
  margin:0;
  font-size:10px;
  line-height:1.45;
  color:#8198bd;
}
.sf-settings-test-platform-card .sf-settings-test-status-pill{
  align-self:start;
  margin-top:1px;
}
@media(max-width:1300px){
  .sf-settings-test-platform-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:850px){
  .sf-settings-test-platform-grid{grid-template-columns:1fr;}
}


/* =========================================================
   SETTINGS TEST v18 — auswählbarer Integrations-Katalog
   ========================================================= */
.sf-settings-test-platform-card{
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}

.sf-settings-test-platform-card:hover{
  border-color:#3a4d70;
  background:#0c1829;
}

.sf-settings-test-platform-setup{
  align-self:start;
  border:1px solid #33415d;
  background:#111b2d;
  color:#dce6f8;
  border-radius:999px;
  min-height:30px;
  padding:0 11px;
  font-size:10px;
  font-weight:700;
  cursor:default;
  white-space:nowrap;
}

.sf-settings-test-platform-setup span{
  margin-left:5px;
  color:#8ea4c8;
}

.sf-settings-test-more-integrations-head p{
  max-width:620px;
}

/* SETTINGS TEST v19 — local platform logos */
.sf-settings-test-platform-icon{
  overflow:hidden;
  padding:0 !important;
}
.sf-settings-test-platform-icon svg{
  width:30px;
  height:30px;
  display:block;
}
.sf-settings-test-platform-icon.shopify,
.sf-settings-test-platform-icon.shopware,
.sf-settings-test-platform-icon.magento,
.sf-settings-test-platform-icon.prestashop,
.sf-settings-test-platform-icon.webflow,
.sf-settings-test-platform-icon.wix,
.sf-settings-test-platform-icon.squarespace,
.sf-settings-test-platform-icon.typo3,
.sf-settings-test-platform-icon.gtm,
.sf-settings-test-platform-icon.bigcommerce,
.sf-settings-test-platform-icon.opencart{
  background:transparent;
  border-color:#2b3b56;
}