.sgts-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#e5e7eb; }
.sgts-form { display:flex; gap:8px; margin-bottom:12px; align-items:center; }
.sgts-form input, .sgts-form select { padding:6px 8px; border-radius:6px; border:1px solid #394150; background:#111217; color:#e5e7eb; }
.sgts-form input { flex:1; }
.sgts-form .sgts-inline-label { display:flex; align-items:center; gap:6px; font-size:.9rem; opacity:.85; }
.sgts-form button { padding:6px 12px; border:none; border-radius:6px; background:#9146FF; color:#fff; cursor:pointer; }
.sgts-card { background:#111217; border:1px solid #1f2430; border-radius:10px; padding:12px; display:flex; gap:12px; align-items:center; transition: box-shadow .2s ease; }
.sgts-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.sgts-card a.cardlink { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; width:100%; }
.sgts-card img { border-radius:50%; }
.sgts-stats { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; }
.sgts-stat { background:#0f1117; padding:6px 10px; border-radius:8px; border:1px solid #1f2430; }
.sgts-flag { font-size:1.2em; }
.sgts-chart { margin-top:12px; background:#0f1015; border-radius:8px; padding:8px; position:relative; }
.sgts-chart svg { width:100%; height:160px; display:block; }
.sgts-chart .axis { fill:#c6c6c6; font-size:12px; }
.sgts-chart .line { fill:none; stroke-width:2; }
.sgts-chart .line.followers{ stroke:#8B5CF6; }
.sgts-chart .line.hours{ stroke:#22D3EE; }
.sgts-chart .grid{ stroke:rgba(255,255,255,.08); }
.sgts-chip{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 10px;font-size:.85rem;cursor:pointer;user-select:none;opacity:.85;}
.sgts-chip.active{background:#9146FF;border-color:#9146FF;opacity:1;}
.sgts-chip.disabled{ opacity:.4; cursor:not-allowed; }

/* Clips */
.sgts-clips { margin-top:14px; }
.sgts-clips h4 { margin:6px 0 8px; font-size:1rem; }
.sgts-clipgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:10px; }
.sgts-clip { background:#14151b; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.sgts-clip a { color:inherit; text-decoration:none; display:block; }
.sgts-clip img { width:100%; display:block; }
.sgts-clip .meta { padding:8px; font-size:.9rem; }
.sgts-clip .title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sgts-clip .views { opacity:.8; font-size:.8rem; }

/* Tracker-style stat bar */
.sgts-statsbar{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:12px 0;}
.sgts-scard{background:#0f1117;border-radius:8px;border:1px solid rgba(255,255,255,.08);padding:10px 12px;position:relative;overflow:hidden;}
.sgts-scard:before{content:'';position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,#6EE7F9,#8B5CF6);opacity:.9;}
.sgts-scard .value{font-size:1.6rem;font-weight:700;line-height:1.2;}
.sgts-scard .label{font-size:.85rem;opacity:.85;margin-top:2px;}
.sgts-scard.s1:before{background:#60A5FA;}
.sgts-scard.s2:before{background:#F87171;}
.sgts-scard.s3:before{background:#34D399;}
.sgts-scard.s4:before{background:#FBBF24;}
.sgts-scard.s5:before{background:#A78BFA;}
.sgts-scard.s6:before{background:#F472B6;}

/* Followers specific layout */
.sgts-scard .value-row{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;}
.sgts-scard .delta{font-size:.85rem;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);line-height:1;white-space:nowrap;}
.sgts-scard .delta.pos{color:#34D399;background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.25);}
.sgts-scard .delta.neg{color:#F87171;background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.25);}

/* Chart Tooltip */
.sgts-tt{ position:absolute; pointer-events:none; background:#111; color:#fff; border:1px solid rgba(255,255,255,.18); padding:6px 8px; border-radius:6px; font-size:.85rem; transform:translate(-50%,-100%); white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.35); opacity:.95; }
.sgts-tt .m{opacity:.8; font-size:.75rem;}
.sgts-vline{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.22); pointer-events:none;}
@media (min-width: 1280px){
  .sgts-clipgrid{ grid-template-columns: repeat(6, 1fr); }
}


/* v1.8.1 – spacing polish for series chips line */
.sgts-chartbar{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;row-gap:6px;padding:6px 0;margin:8px 0 8px;}
.sgts-chartbar > span:first-child{opacity:.75;margin-right:2px;}
.sgts-chip{padding:5px 12px;line-height:1;border-radius:999px;}
.sgts-chart{margin-top:6px;}


/* v1.8.2 – meta pills inside header card */
.sgts-card { display:flex; gap:12px; align-items:flex-start; }
.sgts-card .info { display:flex; flex-direction:column; gap:4px; }
.sgts-meta{margin-top:4px; display:flex; gap:8px; flex-wrap:wrap;}
.sgts-pill{background:#151823;border:1px solid #232839;border-radius:999px;padding:4px 10px;font-size:.85rem;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.sgts-pill b{opacity:.9}
.sgts-pill.live{border-color:rgba(16,185,129,.45); background:rgba(16,185,129,.08); color:#d1fae5;}
.sgts-pill.off{opacity:.85;}
.sgts-pill .flag-wrap{display:inline-flex;align-items:center;gap:6px;}


/* Games table */
.sgts-games{margin-top:14px;}
.sgts-games h4{margin:6px 0 8px;font-size:1rem;}
.sgts-gtab{width:100%;border-collapse:separate;border-spacing:0 8px;}
.sgts-gtab th{font-weight:600;font-size:.9rem;opacity:.85;text-align:left;padding:0 10px;}
.sgts-gtab td{background:#0f1117;border:1px solid rgba(255,255,255,.08);padding:10px;border-left:none;border-right:none;}
.sgts-gtab tr{border-radius:10px;overflow:hidden}
.sgts-gcell{display:flex;align-items:center;gap:10px;}
.sgts-gcell img{width:36px;height:48px;object-fit:cover;border-radius:6px;}
.sgts-bar{height:8px;background:#1f2430;border-radius:999px;overflow:hidden}
.sgts-bar > span{display:block;height:100%;background:#8B5CF6}
.sgts-gtab td.pct{min-width:120px;}
.sgts-gtab td.hours, .sgts-gtab td.last{white-space:nowrap;}
@media (max-width:680px){
  .sgts-gtab thead{display:none}
  .sgts-gtab tr{display:grid;grid-template-columns:1fr;row-gap:6px}
  .sgts-gtab td{border-radius:8px}
}


/* v1.8.5 – games table extra columns */
.sgts-gtab th.avg, .sgts-gtab th.max { text-align:right; }
.sgts-gtab td.avg, .sgts-gtab td.max { text-align:right; white-space:nowrap; }
@media (max-width:680px){
  .sgts-gtab td.avg, .sgts-gtab td.max{ display:inline-block; }
}

.sgts-badge{display:inline-block;font-size:.72rem;padding:2px 6px;border-radius:999px;background:#444;color:#ddd;margin-left:.35rem;vertical-align:middle}


/* --- KPI single-line & equal height fix (2025-09-02) --- */
.sgts-scard{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:72px; /* equal height for all KPI cards */
}
.sgts-scard .label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis; /* prevent wrapping to 2 lines */
}



/* --- KPI BAR: force single horizontal row with optional scroll (2025-09-02) --- */
.sgts-statsbar{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.sgts-statsbar .sgts-scard{
  flex:0 0 160px; /* base width per card; prevents wrap */
}

/* On wide desktops, distribute exactly 7 cols without scroll */
@media (min-width:1280px){
  .sgts-statsbar .sgts-scard{
    flex: 0 0 calc((100% - 6 * 10px) / 7); /* 7 cards, 6 gaps of 10px */
  }
}


/* Colores de las nuevas series */
.sgts-chart .line.gained{ stroke:#10B981; }       /* verde */
.sgts-chart .line.rate{ stroke:#FBBF24; }         /* ámbar */
.sgts-chart .line.active{ stroke:#60A5FA; }       /* azul */


/* Default cards grid */
.sgts-default{ margin-top:12px; display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.sgts-default .sgts-mini{ display:flex; gap:10px; padding:10px; border:1px solid #e5e7eb; border-radius:12px; text-decoration:none; color:inherit; background:#fff; }
.sgts-default .sgts-mini:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); }
.sgts-default .sgts-mini .av{ width:48px; height:48px; border-radius:999px; object-fit:cover; background:#f3f4f6; }
.sgts-default .sgts-mini .av.av-ph{ display:block; }
.sgts-default .sgts-mini .meta{ display:flex; flex-direction:column; gap:2px; }
.sgts-default .sgts-mini .name{ font-weight:600; line-height:1.2; }
.sgts-default .sgts-mini .line{ font-size:.92rem; color:#374151; }
.sgts-default .sgts-mini .lab{ color:#6b7280; margin-right:4px; }
@media (prefers-color-scheme: dark){
  .sgts-default .sgts-mini{ background:#0b0c0f; border-color:#1f2937; color:#e5e7eb; }
  .sgts-default .sgts-mini .line{ color:#cbd5e1; }
  .sgts-default .sgts-mini .lab{ color:#9ca3af; }
}


/* Compact default cards: single-line rows with ellipsis */
.sgts-default .sgts-mini .line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.sgts-default .sgts-mini .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sgts-default{display:block;margin-top:12px}
.sgts-card{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,0.04);backdrop-filter:blur(6px);cursor:pointer}
.sgts-card .avatar{width:44px;height:44px;border-radius:8px;object-fit:cover}
.sgts-card .meta .name{font-weight:600;line-height:1.2}
.sgts-card .live{font-size:12px;opacity:0.85}
.sgts-card:hover{outline:1px solid rgba(255,255,255,0.1)}


/* === SGTS default-cards responsive grid (5->1 cols) === */
.sgts-default{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:12px}
@media (max-width:1400px){.sgts-default{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1120px){.sgts-default{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.sgts-default{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sgts-default{grid-template-columns:1fr}}
.sgts-default .sgts-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,0.04);backdrop-filter:blur(6px);cursor:pointer;border:1px solid rgba(255,255,255,0.06)}
.sgts-default .sgts-card .avatar{width:44px;height:44px;border-radius:8px;object-fit:cover}
.sgts-default .sgts-card .meta .name{font-weight:600;line-height:1.2}
.sgts-default .sgts-card .live{font-size:12px;opacity:0.85}
.sgts-default .sgts-card:hover{border-color:rgba(255,255,255,0.18)}
/* Ensure search results list keeps its full-width stack */
.sgts-result .sgts-card{width:100%}