/* =========================================================
   Page « Mon bot » — refonte
   ========================================================= */

/* ---------- En-tête ---------- */
.hero2 { position: relative; border-radius: 26px; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--edge);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 60%);
  backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px -30px rgba(0,0,0,.8); }
.hero2-banner { position: relative; display: block; height: 200px; margin: 0; cursor: pointer; overflow: hidden; }
.hero2-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .8s var(--ease), filter .4s; }
.hero2-banner:hover img { transform: scale(1.05); filter: brightness(.75); }
.hero2-mesh { position: absolute; inset: 0;
  background:
    radial-gradient(60% 120% at 10% 10%, rgba(var(--accent-rgb), .75), transparent 60%),
    radial-gradient(50% 120% at 90% 0%, color-mix(in srgb, var(--accent2) 80%, transparent), transparent 60%),
    radial-gradient(70% 100% at 60% 120%, color-mix(in srgb, var(--b4) 70%, transparent), transparent 60%),
    linear-gradient(120deg, #0d1320, #151028);
  background-size: 140% 140%; animation: mesh 16s ease-in-out infinite alternate; }
.hero2-banner img[src] ~ .hero2-mesh { opacity: 0; }
.hero2-banner::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(8,10,16,.85)); }
.hero2-banner .hover-cta { z-index: 3; top: 14px; bottom: auto; }
@keyframes mesh { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

.hero2-body { position: relative; z-index: 4; display: flex; align-items: flex-end; gap: 22px; padding: 0 26px 24px; margin-top: -64px; flex-wrap: wrap; }
.hero2-avatar { width: 128px; height: 128px; flex: none; }
.hero2-avatar .avatar { position: relative; z-index: 1; width: 128px; height: 128px; border: 5px solid #0c0f17; display: block; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.avatar-ring { position: absolute; inset: -5px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, var(--accent), var(--accent2), transparent 55%, var(--accent));
  animation: spin 6s linear infinite; filter: blur(.5px); opacity: .9; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero2-avatar .avatar-cta { inset: 5px; z-index: 2; }
.hero2-avatar .dot { z-index: 3; right: 8px; bottom: 8px; width: 24px; height: 24px; border-width: 5px; border-color: #0c0f17; }
.hero2-id { flex: 1; min-width: 240px; padding-bottom: 4px; }
.hero2-id .bot-name { font-size: 34px; line-height: 1.1; letter-spacing: -.03em;
  background: linear-gradient(100deg, #fff 30%, color-mix(in srgb, var(--accent) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2-id .name-input { font-size: 22px; width: 280px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: rgba(255,255,255,.07); border: 1px solid var(--edge); backdrop-filter: blur(10px); }
.pill i[data-icon] { width: 13px; height: 13px; color: var(--muted); }
.pill.copy { cursor: pointer; font-family: ui-monospace, monospace; font-weight: 500; transition: border-color .2s, background .2s; }
.pill.copy:hover { border-color: var(--edge-hi); background: rgba(255,255,255,.12); }
.pill.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.pill.state.on { color: var(--ok); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.1); }
.pill.state.off { color: var(--danger); border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.1); }
.pill-sub { color: var(--muted); font-weight: 500; }
.pill.licence.expired { color: var(--danger); border-color: rgba(251,113,133,.35); }
.pill-btn { margin-left: 4px; padding: 2px 9px; border-radius: 999px; border: 0; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--accent-ink); }
.hero2-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 4px; }
.hero-ctl { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--edge); backdrop-filter: blur(12px); }
.hero-ctl .btn { border: 0; background: transparent; border-radius: 10px; padding: 7px 13px; backdrop-filter: none; }
.hero-ctl .btn:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.hero-ctl .btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--accent-ink); }
.hero-ctl .btn.stop:hover:not(:disabled) { background: rgba(251,113,133,.15); color: var(--danger); }

/* ---------- Bento de statistiques ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(132px, auto); gap: 14px; margin-bottom: 18px; }
.stat { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 22px; text-align: left; color: inherit; font: inherit; overflow: hidden; cursor: pointer;
  background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  border: 1px solid var(--edge); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 20px 40px -24px rgba(0,0,0,.7);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; transform-style: preserve-3d; }
div.stat { cursor: default; }
.stat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.11), transparent 45%); }
.stat:hover::before { opacity: 1; }
.stat:hover { border-color: var(--edge-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 28px 50px -24px rgba(var(--accent-rgb), .45); }
.stat.sel { border-color: rgba(var(--accent-rgb), .6); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(var(--accent-rgb), .3), 0 26px 50px -26px rgba(var(--accent-rgb), .8); }
.stat.sel .stat-top .label { color: var(--accent); }
.stat-big { grid-column: span 2; grid-row: span 2; }
.stat-top { display: flex; align-items: center; gap: 10px; }
.stat-top .label { flex: 1; }
.stat-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; transform: translateZ(25px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px currentColor; transition: transform .4s var(--ease); }
.stat-ico i { width: 18px; height: 18px; }
.stat:hover .stat-ico { transform: translateZ(35px) rotate(-8deg) scale(1.08); }
.c1 { background: linear-gradient(135deg, #34d399, #0ea5e9); color: #34d399; }
.c2 { background: linear-gradient(135deg, #818cf8, #c084fc); color: #818cf8; }
.c3 { background: linear-gradient(135deg, #fbbf24, #f97316); color: #fbbf24; }
.c4 { background: linear-gradient(135deg, #22d3ee, #6366f1); color: #22d3ee; }
.c5 { background: linear-gradient(135deg, #f472b6, #e11d48); color: #f472b6; }
.stat-ico i, .qa-ico i { color: #fff; }
.stat-num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; transform: translateZ(18px); }
.stat-num.xl { font-size: 56px; margin-top: 8px; background: linear-gradient(180deg, #fff, rgba(255,255,255,.65)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .spark { margin-top: auto; height: 38px; }
.stat .spark.big { height: 110px; margin-top: auto; }
.delta { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.delta.up { color: var(--ok); background: rgba(52,211,153,.12); }
.delta.down { color: var(--danger); background: rgba(251,113,133,.12); }
.ring-row { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.ring { width: 64px; height: 64px; transform: rotate(-90deg); flex: none; }
.ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.ring-bg { stroke: rgba(255,255,255,.08); }
.ring-fg { stroke: var(--accent); stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset 1s var(--ease), stroke .4s; filter: drop-shadow(0 0 5px currentColor); }
#ring-latency.good { stroke: var(--ok); color: var(--ok); }
#ring-latency.mid { stroke: #fbbf24; color: #fbbf24; }
#ring-latency.bad { stroke: var(--danger); color: var(--danger); }
#ring-ram { stroke: #22d3ee; color: #22d3ee; }

/* ---------- Graphique + activité ---------- */
.dash-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.dash-row .card { margin: 0; border-radius: 22px; }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid var(--edge); }
.seg-btn { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 9px; cursor: pointer; transition: all .25s var(--ease); }
.seg-btn:hover { color: var(--text); }
.seg-btn.sel { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb), .8); }
.mini-feed-card { display: flex; flex-direction: column; }
.see-all { font-size: 12px; text-decoration: none; opacity: .85; }
.see-all:hover { opacity: 1; }
.mini-feed { display: grid; gap: 2px; margin-top: 6px; }
.mf-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; animation: pop .35s var(--ease) backwards; transition: background .2s; }
.mf-item:hover { background: rgba(255,255,255,.04); }
.mf-item .avatar { width: 30px; height: 30px; }
.mf-item .mf-t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.mf-item .mf-t div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-item code { color: var(--accent); border: 0; background: rgba(var(--accent-rgb), .1); }
.mini-feed .empty { padding: 26px 6px; }

/* ---------- Actions rapides ---------- */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qa { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px; border-radius: 20px; text-decoration: none; color: var(--text); overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--edge); backdrop-filter: blur(18px);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.qa:hover { transform: translateY(-4px); border-color: var(--edge-hi); box-shadow: 0 22px 40px -22px rgba(var(--accent-rgb), .7); }
.qa-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: transform .4s var(--ease); }
.qa:hover .qa-ico { transform: rotate(-8deg) scale(1.1); }
.qa-ico i { width: 20px; height: 20px; }
.qa b { font-size: 14px; }
.qa span:not(.qa-ico) { font-size: 12px; color: var(--muted); }
.qa::after { content: "→"; position: absolute; right: 16px; top: 50%; transform: translate(-6px, -50%); opacity: 0; color: var(--accent); font-weight: 700; transition: all .3s var(--ease); }
.qa:hover::after { opacity: 1; transform: translate(0, -50%); }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bento, .quick { grid-template-columns: 1fr; }
  .stat-big { grid-column: auto; grid-row: auto; }
  .hero2-body { margin-top: -50px; }
  .hero2-actions { align-items: flex-start; }
}