:root {
  color-scheme: dark;
  --bg: #070a11;
  --panel: rgba(15, 20, 32, .86);
  --panel-solid: #101622;
  --panel-2: #151c2a;
  --border: rgba(155, 169, 198, .14);
  --border-strong: rgba(155, 169, 198, .24);
  --text: #f4f7ff;
  --muted: #929db2;
  --muted-2: #6c768b;
  --accent: #8b5cf6;
  --accent-2: #6d4aff;
  --accent-soft: rgba(139, 92, 246, .15);
  --green: #39d98a;
  --green-soft: rgba(57, 217, 138, .13);
  --yellow: #ffc857;
  --yellow-soft: rgba(255, 200, 87, .13);
  --red: #ff647c;
  --red-soft: rgba(255, 100, 124, .13);
  --shadow: 0 24px 80px rgba(0,0,0,.38);
  --radius: 18px;
  --radius-sm: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background:
  radial-gradient(circle at 12% 15%, rgba(109,74,255,.11), transparent 32%),
  radial-gradient(circle at 88% 82%, rgba(32,139,255,.07), transparent 35%),
  var(--bg); overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.ambient { position: fixed; width: 460px; height: 460px; filter: blur(115px); opacity: .12; pointer-events: none; z-index: -1; }
.ambient-one { background: #7049ff; top: -210px; left: -150px; }
.ambient-two { background: #1e7ff5; bottom: -230px; right: -170px; }
.panel { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(420px, 100%); padding: 34px; border-radius: 24px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-centered { justify-content: center; margin-bottom: 34px; }
.brand-mark { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #a778ff, #5b38e8); color: white; font-size: 14px; font-weight: 900; letter-spacing: -.06em; box-shadow: 0 10px 35px rgba(112,73,255,.32), inset 0 1px rgba(255,255,255,.25); }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.brand-subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }

.stack { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 12px; font-weight: 700; color: #b7c0d2; }
.field input, .field textarea, .field select, .search-wrap input, .section-toolbar select, .compact-search input {
  width: 100%; border: 1px solid var(--border-strong); background: rgba(5,8,14,.66); color: var(--text); border-radius: 11px; padding: 12px 13px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field textarea:focus, .field select:focus, .search-wrap input:focus, .section-toolbar select:focus, .compact-search input:focus { border-color: rgba(139,92,246,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.12); background: rgba(7,11,19,.88); }
.field textarea { resize: vertical; min-height: 92px; }
.form-error { min-height: 20px; margin: -4px 0 0; color: var(--red); font-size: 13px; text-align: center; }

.button { border: 1px solid transparent; border-radius: 11px; padding: 10px 15px; color: var(--text); font-weight: 750; font-size: 13px; transition: transform .15s, border-color .2s, background .2s, opacity .2s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.button-primary { background: linear-gradient(145deg, #9566ff, #6944ec); box-shadow: 0 8px 24px rgba(112,73,255,.22); }
.button-primary:hover { background: linear-gradient(145deg, #a173ff, #7551f1); }
.button-secondary { border-color: var(--border-strong); background: rgba(255,255,255,.045); }
.button-secondary:hover, .button-ghost:hover { background: rgba(255,255,255,.075); }
.button-ghost { background: transparent; border-color: var(--border); color: #bac3d4; }
.button-danger { background: var(--red-soft); color: #ff8da0; border-color: rgba(255,100,124,.25); }
.button-block { width: 100%; }
.button-sm { padding: 8px 11px; font-size: 12px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; gap: 18px; padding: 18px; }
.sidebar { position: sticky; top: 18px; height: calc(100vh - 36px); border-radius: var(--radius); padding: 20px 15px; display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 8px 22px; border-bottom: 1px solid var(--border); }
.nav-list { display: grid; gap: 7px; margin-top: 22px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; border: 1px solid transparent; background: transparent; color: #9aa5b8; border-radius: 11px; padding: 11px 12px; text-align: left; font-weight: 700; }
.nav-item:hover { color: #dbe1ed; background: rgba(255,255,255,.035); }
.nav-item.active { color: #fff; background: var(--accent-soft); border-color: rgba(139,92,246,.18); }
.nav-icon { width: 20px; display: inline-grid; place-items: center; font-size: 18px; }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.workspace { min-width: 0; display: grid; align-content: start; gap: 18px; }
.topbar { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-radius: var(--radius); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: 23px; letter-spacing: -.035em; }
h2 { margin-bottom: 5px; font-size: 18px; letter-spacing: -.025em; }
.topbar p, .table-header p, .modal-header p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; gap: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { border-radius: var(--radius); padding: 18px; display: grid; gap: 6px; min-height: 126px; align-content: center; }
.stat-label { color: #a8b2c4; font-size: 12px; font-weight: 700; }
.stat-value { font-size: 29px; letter-spacing: -.05em; }
.stat-note { color: var(--muted-2); font-size: 11px; }

.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: var(--radius); margin-bottom: 14px; }
.search-wrap { position: relative; flex: 1; max-width: 620px; }
.search-wrap input { padding-left: 40px; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.section-toolbar select { width: auto; min-width: 170px; }
.cards-list { display: grid; gap: 12px; }
.license-card { border-radius: var(--radius); padding: 17px; display: grid; grid-template-columns: minmax(230px, 1.2fr) minmax(190px, .8fr) minmax(180px, .8fr) auto; gap: 18px; align-items: center; }
.license-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 8px; }
.license-title { font-size: 15px; font-weight: 820; }
.key-prefix { color: #c0c9d8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: rgba(255,255,255,.045); border: 1px solid var(--border); padding: 5px 8px; border-radius: 8px; }
.license-notes { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.meta-list { display: grid; gap: 7px; }
.meta-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.meta-row span:first-child { color: var(--muted); }
.meta-row strong { font-weight: 750; text-align: right; }
.status-group { display: grid; gap: 8px; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c6cedc; }
.status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted-2); box-shadow: 0 0 0 4px rgba(108,118,139,.1); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 300px; }
.badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.badge-green { color: #69e6a7; background: var(--green-soft); border: 1px solid rgba(57,217,138,.19); }
.badge-red { color: #ff91a3; background: var(--red-soft); border: 1px solid rgba(255,100,124,.2); }
.badge-yellow { color: #ffd375; background: var(--yellow-soft); border: 1px solid rgba(255,200,87,.2); }
.badge-purple { color: #bb9cff; background: var(--accent-soft); border: 1px solid rgba(139,92,246,.2); }
.badge-muted { color: #a9b2c2; background: rgba(169,178,194,.08); border: 1px solid var(--border); }

.table-panel { border-radius: var(--radius); overflow: hidden; }
.table-header { padding: 19px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }
.compact-search { display: flex; align-items: center; gap: 9px; min-width: 260px; color: var(--muted); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid rgba(155,169,198,.09); font-size: 12px; }
th { color: #8792a7; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; background: rgba(255,255,255,.018); }
td { color: #c7cfdd; }
tbody tr:hover { background: rgba(255,255,255,.02); }
.empty-state { padding: 42px 20px; text-align: center; color: var(--muted); border-radius: var(--radius); }
.bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.bot-card { border-radius: var(--radius); padding: 18px; }
.bot-card-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.bot-name { font-size: 16px; font-weight: 820; margin-bottom: 4px; }
.bot-sub { color: var(--muted); font-size: 12px; }
.bot-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bot-detail { display: grid; gap: 4px; }
.bot-detail span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.bot-detail strong { font-size: 12px; overflow-wrap: anywhere; }
.remote-controls { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(380px, calc(100vw - 44px)); padding: 12px 15px; border-radius: 12px; background: #171e2c; border: 1px solid var(--border-strong); box-shadow: var(--shadow); color: var(--text); font-size: 13px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255,100,124,.35); color: #ff9bac; }

.modal { border: 0; padding: 0; background: transparent; color: var(--text); width: min(650px, calc(100vw - 28px)); max-height: calc(100vh - 28px); }
.modal::backdrop { background: rgba(2,4,8,.78); backdrop-filter: blur(7px); }
.modal-card { border-radius: 20px; padding: 22px; width: 100%; }
.modal-small { max-width: 470px; margin-inline: auto; }
.modal-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 22px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field-wide { grid-column: 1 / -1; }
.toggle-row { display: flex; align-items: center; gap: 10px; align-self: end; min-height: 43px; color: #bdc6d5; font-size: 12px; font-weight: 700; }
.toggle-row input { position: absolute; opacity: 0; }
.toggle { width: 38px; height: 22px; padding: 3px; border-radius: 999px; background: #343d4d; transition: background .2s; }
.toggle::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .2s; }
.toggle-row input:checked + .toggle { background: var(--accent); }
.toggle-row input:checked + .toggle::after { transform: translateX(16px); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.key-result-card { max-width: 540px; margin-inline: auto; text-align: center; }
.success-ring { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; background: var(--green-soft); color: var(--green); border: 1px solid rgba(57,217,138,.25); font-size: 26px; font-weight: 900; }
.key-result-card p { color: var(--muted); font-size: 13px; }
.generated-key { display: grid; gap: 10px; margin: 20px 0 14px; }
.generated-key code { display: block; padding: 15px; border-radius: 12px; background: rgba(0,0,0,.32); border: 1px solid var(--border-strong); overflow-wrap: anywhere; color: #d7c9ff; font-size: 14px; }

@media (max-width: 1120px) {
  .license-card { grid-template-columns: 1fr 1fr; }
  .actions { justify-content: flex-start; max-width: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .app-shell { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .sidebar { position: static; height: auto; padding: 11px; flex-direction: row; align-items: center; gap: 10px; overflow-x: auto; }
  .sidebar .brand { border: 0; padding: 0; min-width: max-content; }
  .brand-subtitle { display: none; }
  .nav-list { display: flex; margin: 0; gap: 5px; }
  .nav-item { width: auto; padding: 9px 10px; }
  .nav-item span:last-child { display: none; }
  .sidebar-footer { border: 0; padding: 0; margin: 0 0 0 auto; min-width: max-content; }
  .sidebar-footer .button { width: auto; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; }
  .topbar-actions .button { flex: 1; }
  .section-toolbar { align-items: stretch; flex-direction: column; }
  .search-wrap { max-width: none; }
  .section-toolbar select { width: 100%; }
  .license-card { grid-template-columns: 1fr; gap: 13px; }
  .table-header { align-items: stretch; flex-direction: column; }
  .compact-search { min-width: 0; }
}
@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { min-height: 108px; padding: 14px; }
  .stat-value { font-size: 25px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .button { width: 100%; }
  .auth-card { padding: 26px 20px; }
}

.key-display {
  color: #d7c9ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.2);
  padding: 6px 9px; border-radius: 8px; overflow-wrap: anywhere; user-select: all;
}
.key-display.key-missing { color: #a9b2c2; background: rgba(169,178,194,.06); border-color: var(--border); }
.icon-copy { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: #cfc3ff; }
.icon-copy:hover { background: var(--accent-soft); border-color: rgba(139,92,246,.3); }
.form-help { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 12px 0 0; }
.compensation-preview { margin-top: 18px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.2); border-radius: 14px; padding: 15px; max-height: 310px; overflow: auto; }
.preview-summary { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 12px; }
.preview-summary span { color: #cfc3ff; }
.compensation-preview ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; color: #c7cfdd; font-size: 11px; }
.compensation-preview p { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

.nav-link{text-decoration:none;position:relative}.nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#7c3aed;color:#fff;display:inline-grid;place-items:center;font-size:11px}.support-shell{display:grid;grid-template-columns:360px 1fr;gap:16px;height:calc(100vh - 36px);padding:18px}.support-sidebar,.support-chat{padding:18px;overflow:hidden}.support-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.support-list{overflow:auto;height:calc(100% - 70px)}.support-thread{padding:13px;border-bottom:1px solid var(--border);cursor:pointer}.support-thread.active{background:rgba(124,58,237,.18)}.support-thread-title{font-weight:800}.support-thread-meta{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}.support-messages{height:calc(100% - 160px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:10px 0}.support-message{max-width:82%;padding:10px 12px;border-radius:12px;background:rgba(148,163,184,.12)}.support-message.admin{align-self:flex-end;background:rgba(124,58,237,.24)}.support-message.user{align-self:flex-start}.support-compose textarea{min-height:90px}.support-attachment{color:#c4b5fd;text-decoration:underline;cursor:pointer;display:block;margin-top:6px}@media(max-width:900px){.support-shell{grid-template-columns:1fr;height:auto}.support-list{max-height:320px}.support-messages{height:450px}}

/* v0.11.04 — historique et états */
.history-timeline{display:grid;gap:12px;max-height:60vh;overflow:auto;padding-right:6px}.history-entry{padding:14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}.history-entry time{font-size:.78rem;color:#9aa5b8}.history-entry h3{margin:5px 0;font-size:1rem}.history-entry p{margin:0;color:#bdc5d4;line-height:1.5}.badge-muted{background:rgba(130,136,150,.18)!important;color:#aeb5c2!important;border-color:rgba(150,155,170,.25)!important}