/* Prism Engine Packages - Styles de base */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --bg: #f5f6f8;
  --bg-alt: #ffffff;
  --bg-accent: #eef1f5;
  --border: #d8dde4;
  --border-strong: #b8c0cc;
  --text: #1d2430;
  --text-soft: #4b5563;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --danger: #dc2626;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-round: 1000px;
  --focus-ring: 0 0 0 3px rgba(99,102,241,.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -1px rgba(0,0,0,.06);
  --transition: .18s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg: #0f1115;
  --bg-alt: #161a21;
  --bg-accent: #1f2630;
  --border: #27303c;
  --border-strong: #394452;
  --text: #edf2f7;
  --text-soft: #a0aec0;
  --primary: #818cf8;
  --primary-hover: #6366f1;
  --danger: #f87171;
  --focus-ring: 0 0 0 3px rgba(129,140,248,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 10px -2px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.app-header {
  position: sticky; top:0; z-index: 50;
  display: grid; grid-template-columns: max-content 1fr max-content; gap: 1.5rem; align-items: center;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--border);
  background: var(--bg-alt); backdrop-filter: blur(10px);
}
.app-title { font-size: clamp(1.15rem, 1.1rem + .6vw, 1.9rem); margin:0; letter-spacing: .5px; }

.header-center { display:flex; flex-direction: column; align-items: stretch; gap: .5rem; }

.search-wrapper { position: relative; display:flex; align-items:center; }
.search-wrapper input {
  width: min(750px, 100%);
  font: 500 1rem var(--font-sans);
  padding: .65rem .95rem; padding-right: 2.3rem;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-m);
  transition: var(--transition);
  outline: none;
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.search-wrapper input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.clear-search { position:absolute; right:.35rem; background:none; border:none; cursor:pointer; font-size:.9rem; width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius: var(--radius-round); color: var(--text-soft); }
.clear-search:hover { background: var(--bg-accent); color: var(--text); }
.clear-search:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tag-summary { font-size: .8rem; color: var(--text-soft); min-height: 1.1rem; }

.header-actions { display:flex; gap:.75rem; }
.round-btn {
  --size: 3rem;
  width: var(--size); height: var(--size);
  display:grid; place-items:center;
  border-radius: var(--radius-round);
  background: var(--bg);
  color: var(--text);
  text-decoration:none; font-weight:600;
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  font-size:.9rem;
}
.round-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.round-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }

.mini-btn {
  --pad-x:.65rem; --pad-y:.35rem;
  font: 500 .75rem var(--font-sans);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius-round);
  border:1px solid var(--border);
  background: var(--bg-accent);
  color: var(--text-soft);
  cursor:pointer; display:inline-flex; align-items:center; gap:.35rem;
  letter-spacing:.3px;
  transition: var(--transition);
}
.mini-btn:hover { color: var(--text); background: var(--bg); }
.mini-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }

.app-main { padding: 1.25rem clamp(.75rem, 2vw, 2.5rem) 3rem; display:grid; gap: 2rem; }

.tag-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem; }
.tags {
  display:flex; flex-wrap: wrap; gap: .5rem; align-items:flex-start;
  padding: .75rem; background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-m);
  min-height:3.5rem; box-shadow: var(--shadow-sm);
}
.tag {
  font: 500 .72rem var(--font-sans);
  padding: .45rem .7rem; border-radius: var(--radius-round);
  background: var(--bg-accent);
  border:1px solid var(--border);
  cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:.4rem; color: var(--text-soft);
  transition: var(--transition);
  position:relative;
}
.tag[data-active="true"] { background: var(--primary); color:#fff; border-color: var(--primary); }
.tag:hover { background: var(--primary-hover); color:#fff; border-color: var(--primary-hover); }
.tag:focus-visible { outline:none; box-shadow: var(--focus-ring); }
.tag .count { opacity:.6; font-weight:600; }

.grid-section { display:flex; flex-direction:column; gap:1rem; }
.package-grid {
  --min-tile: 210px;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--min-tile), 1fr));
  gap: 1.25rem; align-items:stretch;
}

.package-card {
  position:relative; display:flex; flex-direction:column; gap:.6rem;
  background: var(--bg-alt);
  border:1px solid var(--border);
  border-radius: var(--radius-m);
  padding: .9rem .9rem 1.05rem;
  box-shadow: var(--shadow-sm);
  min-height: 170px;
  transition: var(--transition);
  overflow:hidden;
}
.package-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.package-card:focus-within { box-shadow: var(--focus-ring); }

.package-card h3 { font-size: .95rem; margin:0 0 .35rem; line-height:1.2; letter-spacing:.3px; }
.package-card p.desc { margin:0; font-size:.72rem; line-height:1.35; color: var(--text-soft); flex-grow:1; }

.package-meta { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.badge { font-size:.6rem; font-weight:600; letter-spacing:.5px; padding:.25rem .45rem; background: var(--bg-accent); border-radius: var(--radius-round); border:1px solid var(--border); color: var(--text-soft); }
.package-footer { display:flex; justify-content:space-between; align-items:center; margin-top:.65rem; }
.package-footer a.more { font-size:.7rem; text-decoration:none; font-weight:600; color: var(--primary); letter-spacing:.3px; }
.package-footer a.more:hover { text-decoration:underline; }

.empty-state { text-align:center; font-size:.9rem; color: var(--text-soft); margin:2rem 0; }

.app-footer { margin-top:2rem; padding:1.5rem clamp(.75rem, 2vw, 2.5rem); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:.7rem; background: var(--bg-alt); }
.app-footer a { color: var(--primary); text-decoration:none; }
.app-footer a:hover { text-decoration:underline; }

/* Theme toggle icon state */
[data-theme="dark"] #toggleTheme { background: var(--primary); color:#fff; }

/* Responsive tweaks */
@media (max-width: 880px) {
  .app-header { grid-template-columns: 1fr; gap:.75rem; }
  .header-center { order:3; }
  .header-actions { order:2; }
  .app-title { order:1; }
  .round-btn { --size:2.75rem; }
  .app-main { padding-top: .75rem; }
}
@media (max-width: 520px) {
  .tags { padding:.55rem; }
  .tag { padding:.4rem .6rem; }
  .package-card { padding:.75rem .75rem .9rem; }
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width:12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:6px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }