/* components.css v7 — boutons dégradés, glow, badges gradient */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--rs);font-weight:600;transition:.2s}
/* .btn-gold = nom historique du bouton PRIMAIRE (maintenant dégradé violet) */
.btn-gold,.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.btn-gold:hover,.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line);color:var(--muted)}
.btn-ghost:hover{color:var(--text);border-color:var(--violet);box-shadow:var(--glow)}
.btn-danger{background:#4c1d95;color:#ede9fe}
.btn-sm{padding:6px 12px;font-size:.85rem}

.field{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);padding:10px 12px;color:var(--text);width:100%}
.field:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 3px rgba(139,92,246,.22)}
select.field option{background:var(--surface)}

.badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#fff}
.badge.type-manhwa{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.badge.type-manga{background:linear-gradient(135deg,#4338ca,#6366f1)}
.badge.type-novel{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.badge.type-manhua{background:linear-gradient(135deg,#0369a1,#38bdf8)}
.badge.type-webtoon{background:linear-gradient(135deg,#be185d,#ec4899)}
.badge.staff{background:var(--grad)}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-4px);border-color:var(--violet);
  box-shadow:0 0 0 1px rgba(139,92,246,.4), 0 12px 34px rgba(124,58,237,.28)}
.card-cover{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--surface2)}
.card-cover img{width:100%;height:100%;object-fit:cover;transition:.3s}
.card:hover .card-cover img{transform:scale(1.05)}
.cover-fallback{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-size:2.4rem;
  background:var(--grad-soft);color:var(--violet2)}
.card-cover .badge{position:absolute;top:8px;left:8px}
.card-body{padding:10px 12px}
.card-title{display:block;font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{color:var(--muted);font-size:.75rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(10,7,20,.6);color:#7d75a0;font-size:1rem}
.fav-btn.is-fav{color:var(--pink);text-shadow:0 0 10px var(--pink)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-size:.83rem;font-weight:500;transition:.2s}
.chip:hover,.chip.active{border-color:var(--violet);color:#e9d5ff;background:var(--grad-soft);box-shadow:var(--glow)}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{padding:8px 16px;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-weight:600}
.tab.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--glow)}

.stat{background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r);padding:14px 22px;text-align:center;backdrop-filter:blur(6px)}
.stat b{display:block;font-family:var(--display);font-size:1.5rem;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.6px}
.stats-bar{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.hrow{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.hchip{flex:0 0 auto;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);padding:8px 12px}
.hchip:hover{border-color:var(--violet);box-shadow:var(--glow)}
.hchip img{width:40px;height:52px;object-fit:cover;border-radius:6px}
.hchip small{color:var(--muted)}

.maj-list{display:grid;gap:12px}
.maj-item{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.maj-item:hover{border-color:var(--violet)}
.maj-item img{width:64px;height:86px;object-fit:cover;border-radius:8px}
.maj-title{font-weight:700}
.maj-title:hover{color:var(--violet2)}
.chap-line{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:5px 10px;margin-top:5px;border-radius:8px;background:var(--surface2);font-size:.85rem;color:var(--muted)}
.chap-line:hover{color:#e9d5ff;background:var(--grad-soft)}

.empty{padding:50px 20px;text-align:center;color:var(--muted);background:var(--grad-soft);border:1px dashed var(--line);border-radius:var(--r)}

.modal-backdrop{position:fixed;inset:0;background:rgba(5,0,20,.75);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:100}
.modal{width:min(440px,92vw);max-height:88vh;overflow:auto;background:var(--bg2);border:1px solid var(--violet);border-radius:var(--r);padding:22px;box-shadow:var(--glow)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal .stack{display:grid;gap:10px}
.warn-box{background:#2e1065;border:1px solid var(--violet);border-radius:var(--rs);padding:10px 12px;font-size:.82rem;color:#ddd6fe}
.ok-box{background:#052e2b;border:1px solid var(--ok);border-radius:var(--rs);padding:10px 12px;font-size:.85rem;color:#a7f3d0}
.help-steps{font-size:.8rem;color:var(--muted);display:grid;gap:6px}
.help-steps code{color:var(--violet2);word-break:break-all}

#toast-root{position:fixed;bottom:18px;right:18px;display:grid;gap:8px;z-index:200}
.toast{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--violet);border-radius:var(--rs);padding:10px 16px;box-shadow:var(--glow)}
.toast.err{border-left-color:var(--err)} .toast.ok{border-left-color:var(--ok)}

.skeleton{position:relative;overflow:hidden;background:var(--surface)!important}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(167,139,250,.12),transparent);animation:sh 1.2s infinite}
@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th,.table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line)}
.table th{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}
.table-wrap{overflow-x:auto}

.menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg2);border:1px solid var(--violet);border-radius:var(--rs);min-width:190px;display:grid;padding:6px;z-index:60;box-shadow:var(--glow)}
.menu a,.menu button{padding:9px 12px;border-radius:8px;text-align:left;color:var(--muted)}
.menu a:hover,.menu button:hover{background:var(--surface2);color:var(--text)}

/* v8 — icônes + titres de section sans emoji */
.icon{flex:none;vertical-align:-3px}
.row-head h2,.page-head h1{display:flex;align-items:center;gap:10px}
.row-head h2::before{content:"";width:4px;height:1.05em;border-radius:2px;background:var(--grad);box-shadow:var(--glow)}
.tab{display:inline-flex;align-items:center;gap:7px}
.fav-btn{display:grid;place-items:center}
.fav-btn.is-fav svg *{fill:currentColor}
.btn svg{vertical-align:-2px}