/* Reset Button */
.reset-filters {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all .2s;
  color: #6b7280;
  white-space: nowrap;
  min-height: 32px;
}
.reset-filters:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.reset-filters:active {
  transform: scale(0.98);
}
/* SML Toolkit Pro 1.5.7 */
.sml-explorer{font-family:system-ui;background:#f9fafb;color:#111;padding:4px;}
.controls{display:grid;gap:10px;margin:8px 0 10px;}

.pillgroup{margin:10px 0;}
.pillgroup{background:#fff;border-radius:12px;padding:14px 16px;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,0.04);}

/* 1. Header Layout (Title only) */
.sml-header h2 {
    font-size:15px;
    color:#111;
    margin:0 0 10px 0;
    font-weight:700;
}

/* 2. Toolbar Layout (Controls) */
.sml-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    gap: 12px;
    margin-bottom: 12px;
    background: #f9fafb;
    border-radius: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
}

.sml-toolbar .label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-right: 4px;
}

/* Actions group pushed to right */
.toolbar-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Dropdown Styling */
.sort-select, .filter-select {
  cursor: pointer;
  outline: none;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  min-height: 32px;
  min-width: 140px; 
  transition: all .2s;
}
.sort-select:hover, .filter-select:hover {
  border-color: #9ca3af;
  color: #111;
}

/* Buttons */

/* Grid & Cards */
.platform{margin:14px 0;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #eef0f3;}
.platform-header {
  background: var(--clr, #333333);
  color: var(--txt, #ffffff);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8em;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  min-height: 34px;
}
.platform-title {
  margin: 0;
  font-size: 1.4em;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: inherit;
}
.platform-count {
  font-size: 1.2em;
  font-weight: 600;
  background: rgba(255,255,255,0.18);
  padding: 0.3em 0.9em;
  border-radius: 1em;
  cursor: help;
  color: inherit;
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:10px;}
[data-card]{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;transition:transform .15s, box-shadow .15s;opacity:1;position:relative;}
[data-card]:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.06);}
[data-card].is-hidden{display:none;}

/* Card internals */
.head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.head .t{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.head .t strong{font-size:15px;color:#111;}
.badge{background:#f3f4f6;border-radius:6px;padding:3px 8px;font-size:12px;color:#374151;}
.badge:first-letter { text-transform: capitalize; }
.meta{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;justify-content:space-between;margin-top:6px;}
.meta .badges-wrapper{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.sml-explorer [data-card] .visit{text-decoration:none;border:0;background:var(--clr,#111);color:var(--txt,#fff);font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:6px;transition:transform .12s, box-shadow .12s, background .12s;white-space:nowrap;}
.sml-explorer [data-card] .visit:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,0.14);opacity:0.95;}
.sml-explorer [data-card] .visit .visicon{margin-left:4px;font-size:1.1em;display:inline-block;line-height:1;}
.code-req{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;color:#334155;background:#e2e8f0;border-radius:6px;padding:2px 6px;}
.desc{color:#4b5563;font-size:13px;margin:8px 0 4px;line-height:1.5;transition:max-height .3s ease;overflow:hidden;}

/* Mobile Responsiveness */
@media (max-width: 640px){
  .controls{display:block}
  .pillgroup{margin-bottom:10px}
  .pillbar{display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .pill{flex:0 0 auto;white-space:nowrap}
  
  /* Stack controls on mobile for easier touch */
  .sml-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar-actions {
    margin-left: 0;
    justify-content: space-between;
    margin-top: 8px;
  }
  .filter-select, .sort-select {
    width: 100%; 
  }
}