/* Panel Owner — même famille que rush-staff / rush-team : sombre, « application » sur mobile,
   espace de gestion sur grand écran. Accent violet (owner). */
:root {
  --bg: #07080b;
  --bg-2: #0c0e13;
  --card: #111319;
  --card-2: #161922;
  --line: rgb(255 255 255 / 6.5%);
  --line-2: rgb(255 255 255 / 11%);
  --text: #f5f7fb;
  --muted: #9aa3b2;
  --dim: #6b7381;
  --green: #34d399;
  --red: #f87171;
  --yellow: #fbbf24;
  --accent: #8b5cf6;
  --accent-2: #b9a2ff;
  --accent-deep: #6d28d9;
  --accent-rgb: 139 92 246;
  --gold: #f5c542;
  --radius: 20px;
  --rail: 272px;
  --tabbar: 66px;
  --px: 16px;
  --ease: cubic-bezier(.3, .8, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { color: var(--text); font: 500 15px/1.5 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, .brand b, .tile b, .stat b, .num-val { font-family: "Sora", "Inter", sans-serif; font-variant-numeric: tabular-nums; }
a { color: var(--accent-2); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgb(var(--accent-rgb) / 35%); }
svg.i { width: 20px; height: 20px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boot { display: grid; place-items: center; min-height: 100svh; }
.boot img { width: 72px; animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; transform: scale(.92); } }
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } }
.muted { color: var(--muted); } .dim { color: var(--dim); }
.view { animation: viewin .25s var(--ease); }

/* ---------- Coquille ---------- */
.shell { position: relative; min-height: 100svh; background:
  radial-gradient(1000px 520px at 80% -12%, rgb(var(--accent-rgb) / 15%), transparent 62%),
  radial-gradient(760px 420px at -10% 110%, rgb(var(--accent-rgb) / 7%), transparent 60%), var(--bg); }
.shell::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .6;
  background-image: linear-gradient(rgb(255 255 255 / 2.4%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2.4%) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 55% at 60% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 55% at 60% 0%, #000 20%, transparent 75%); }
.rail { display: none; }
.main { position: relative; min-width: 0; padding: 0 var(--px) calc(var(--tabbar) + env(safe-area-inset-bottom) + 34px); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 0 calc(-1 * var(--px)); padding: calc(env(safe-area-inset-top) + 10px) var(--px) 10px;
  border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.topbar.scrolled { border-bottom-color: var(--line); background-color: rgb(7 8 11 / 80%); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.topbar .back { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 6px; border-radius: 12px; color: var(--accent-2); font-weight: 600; background: rgb(var(--accent-rgb) / 10%); white-space: nowrap; }
.topbar .title-sm { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 16px; opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar.scrolled .title-sm { opacity: 1; }
.topbar .spacer { flex: 1; }
.top-logo { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 12px rgb(var(--accent-rgb) / 40%)); }
.avatar-btn { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid rgb(var(--accent-rgb) / 50%); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 12%); flex: 0 0 auto; }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.live-dot { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--red); background: rgb(248 113 113 / 11%); white-space: nowrap; }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live-dot.on { color: var(--green); background: rgb(52 211 153 / 11%); }
.live-dot.on i { animation: live 2s ease-in-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgb(52 211 153 / 50%); } 70%, 100% { box-shadow: 0 0 0 6px rgb(52 211 153 / 0%); } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 2px 0 18px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.large-title { margin: 6px 0 4px; font-size: clamp(30px, 6vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; overflow-wrap: anywhere; }
.large-title em { font-style: normal; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { margin: 0; color: var(--muted); max-width: 70ch; }

/* Barre d'onglets mobile flottante */
.tabbar { position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
  height: var(--tabbar); padding: 7px; border-radius: 24px; border: 1px solid var(--line-2);
  background: rgb(20 22 30 / 84%); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 18px 44px rgb(0 0 0 / 55%); }
.tab { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; color: var(--dim); font-size: 10.5px; font-weight: 700; border-radius: 17px; transition: color .15s, background-color .2s; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--text); background: rgb(var(--accent-rgb) / 15%); }
.tab.active svg { color: var(--accent); filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / 60%)); }

@media (min-width: 900px) {
  :root { --px: max(36px, calc((100vw - var(--rail) - 1280px) / 2)); }
  .shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
  .rail { position: sticky; top: 0; z-index: 35; display: flex; flex-direction: column; height: 100svh; padding: 22px 14px 14px; border-right: 1px solid var(--line); background: rgb(12 14 19 / 72%); backdrop-filter: blur(14px); }
  .brand { display: flex; align-items: center; gap: 12px; padding: 2px 10px 18px; }
  .brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 14px rgb(var(--accent-rgb) / 35%)); }
  .brand b { display: block; font-size: 17px; letter-spacing: .01em; }
  .brand small { color: var(--dim); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
  .rail-nav { display: grid; gap: 2px; }
  .rail-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 8px -6px 0; padding: 0 6px 8px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 10%) transparent; }
  .rail-label { padding: 14px 14px 5px; color: var(--dim); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .rail .tab { position: relative; display: flex; justify-content: flex-start; gap: 12px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--muted); border-radius: 13px; }
  .rail .tab svg { width: 20px; height: 20px; }
  .rail .tab:hover { background: rgb(255 255 255 / 4%); color: var(--text); }
  .rail .tab.active { background: linear-gradient(90deg, rgb(var(--accent-rgb) / 17%), rgb(var(--accent-rgb) / 3%)); color: var(--text); }
  .rail .tab.active::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
  .rail .gl { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; border-radius: 11px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-align: left; }
  .rail .gl:hover { background: rgb(255 255 255 / 4%); color: var(--text); }
  .rail .gl.active { color: var(--text); background: rgb(var(--accent-rgb) / 13%); }
  .rail .gl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail .gl i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgb(52 211 153 / 60%); flex: 0 0 auto; }
  .rail .gl i.off { background: var(--red); box-shadow: none; }
  .rail .gl i.none { background: var(--dim); box-shadow: none; opacity: .5; }
  .rail-foot { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
  .me-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); text-align: left; }
  .me-card:hover { border-color: var(--line-2); }
  .me-card img { width: 36px; height: 36px; border-radius: 50%; }
  .me-card div { min-width: 0; flex: 1; }
  .me-card b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .me-card small { color: var(--accent-2); font-size: 11.5px; font-weight: 600; }
  .tabbar, .top-logo, .topbar .m-only { display: none; }
  .main { padding-bottom: 56px; }
  .topbar { padding-top: 16px; padding-bottom: 12px; min-height: 68px; }
  .topbar .title-sm { text-align: left; }
}
@media (min-width: 2000px) {
  :root { --rail: 300px; --px: max(48px, calc((100vw - var(--rail) - 1640px) / 2)); }
  body { font-size: 16px; }
}

/* ---------- Éléments ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, var(--card-2), var(--card)); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 4px 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.section-title:first-child { margin-top: 4px; }
.section-title small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--dim); }
.group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(170deg, var(--card-2), var(--card) 60%); }
.row { display: flex; align-items: center; gap: 13px; min-height: 60px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--text); }
.row:last-child { border-bottom: 0; }
.row.tap { cursor: pointer; transition: background-color .12s; width: 100%; text-align: left; }
.row.tap:hover, .row.tap:active { background-color: rgb(255 255 255 / 3.5%); }
.row.is-off .row-main b { color: var(--muted); }
.row-main { flex: 1; min-width: 0; }
.row-main b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.row-main small { display: block; color: var(--dim); font-size: 12.5px; overflow-wrap: anywhere; }
.row-main code { font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dim); }
.chev { color: var(--dim); width: 18px; height: 18px; }
.ico { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; color: var(--accent-2); background: rgb(var(--accent-rgb) / 12%); }
.ico svg { width: 19px; height: 19px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 14px; font-weight: 700; font-size: 14.5px; white-space: nowrap;
  color: #fff; background: linear-gradient(135deg, var(--accent-2) -40%, var(--accent) 35%, var(--accent-deep)); box-shadow: 0 8px 24px rgb(var(--accent-rgb) / 28%), inset 0 1px rgb(255 255 255 / 22%); transition: transform .12s, filter .12s, box-shadow .2s; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.ghost { color: var(--text); background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover:not(:disabled) { background: rgb(255 255 255 / 8%); }
.btn.danger { background: linear-gradient(135deg, #fca5a5 -40%, #ef4444 35%, #b91c1c); box-shadow: 0 8px 24px rgb(239 68 68 / 25%), inset 0 1px rgb(255 255 255 / 20%); }
.btn.danger-ghost { color: var(--red); background: rgb(248 113 113 / 8%); box-shadow: inset 0 0 0 1px rgb(248 113 113 / 22%); }
.btn.sm { min-height: 36px; padding: 0 14px; border-radius: 11px; font-size: 13px; }
.btn.block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--muted); background: rgb(255 255 255 / 5%); flex: 0 0 auto; }
.icon-btn:hover:not(:disabled) { color: var(--text); background: rgb(255 255 255 / 9%); }
.input { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 13px; background: rgb(0 0 0 / 28%); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s; }
select.input { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
select.input option { background: var(--card-2); }
.input:hover:not(:disabled) { border-color: rgb(255 255 255 / 17%); }
.input:focus { border-color: rgb(var(--accent-rgb) / 70%); background-color: rgb(0 0 0 / 38%); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 14%); }
.input.bad { border-color: rgb(248 113 113 / 70%); box-shadow: 0 0 0 4px rgb(248 113 113 / 12%); }
.input::placeholder { color: var(--dim); }
.input:disabled { opacity: .55; }
textarea.input { min-height: 110px; resize: vertical; font: 500 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); background: rgb(255 255 255 / 6%); white-space: nowrap; }
.chip.on { color: var(--green); background: rgb(52 211 153 / 12%); }
.chip.off { color: var(--red); background: rgb(248 113 113 / 11%); }
.chip.accent { color: var(--accent-2); background: rgb(var(--accent-rgb) / 14%); }
.chip.warn { color: var(--yellow); background: rgb(251 191 36 / 12%); }
.empty { display: grid; justify-items: center; gap: 10px; padding: 44px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--dim); text-align: center; }
.empty svg { width: 40px; height: 40px; padding: 10px; box-sizing: content-box; border-radius: 18px; color: var(--accent-2); background: rgb(var(--accent-rgb) / 10%); }
.empty b { color: var(--text); font-size: 16px; }
.banner { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 13px 16px; border-radius: 16px; border: 1px solid rgb(251 191 36 / 30%); background: rgb(251 191 36 / 8%); color: #fde68a; font-size: 14px; }
.banner svg { color: var(--yellow); margin-top: 1px; }
.banner.err { border-color: rgb(248 113 113 / 30%); background: rgb(248 113 113 / 8%); color: #fecaca; }
.banner.err svg { color: var(--red); }
.banner.ok { border-color: rgb(52 211 153 / 25%); background: rgb(52 211 153 / 7%); color: #a7f3d0; }
.banner.ok svg { color: var(--green); }
.skeleton { height: 64px; border-radius: 16px; background: linear-gradient(90deg, var(--card), var(--card-2), var(--card)); background-size: 200% 100%; animation: sk 1.2s linear infinite; margin-bottom: 10px; }
@keyframes sk { to { background-position: -200% 0; } }

/* Interrupteur iOS */
.sw { position: relative; flex: 0 0 auto; width: 52px; height: 31px; border-radius: 99px; background: rgb(255 255 255 / 12%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%); transition: background-color .22s var(--ease), box-shadow .22s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / 35%); transition: transform .22s var(--ease); }
.sw.on { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 0 16px rgb(var(--accent-rgb) / 35%); }
.sw.on::after { transform: translateX(21px); }
.sw.busy::after { animation: pulse .8s ease-in-out infinite; }

/* ---------- Accueil ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 18px; padding: 24px 20px; border-radius: 28px; border: 1px solid rgb(var(--accent-rgb) / 25%);
  background: radial-gradient(120% 90% at 0% 0%, rgb(var(--accent-rgb) / 26%), transparent 62%), linear-gradient(170deg, var(--card-2), var(--card)); box-shadow: 0 24px 60px rgb(0 0 0 / 35%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7; background-image: radial-gradient(rgb(255 255 255 / 10%) 1px, transparent 1.4px); background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 70% 90% at 0% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 90% at 0% 0%, #000, transparent 70%); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; top: -180px; right: -100px; border-radius: 50%; background: rgb(var(--accent-rgb) / 22%); filter: blur(70px); }
.hero-top { display: flex; align-items: center; gap: 16px; }
.hero-top img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 8px 22px rgb(var(--accent-rgb) / 45%)); }
.hero h1 { margin: 2px 0 0; font-size: clamp(24px, 5vw, 34px); letter-spacing: -.025em; line-height: 1.1; }
.hero p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; overflow: hidden; display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: rgb(12 14 19 / 70%); text-align: left; }
.tile svg.i { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; padding: 7px; border-radius: 11px; color: var(--accent-2); background: rgb(var(--accent-rgb) / 12%); }
.tile b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.tile small { color: var(--dim); font-size: 12px; font-weight: 600; }
.tile.ok svg.i { color: var(--green); background: rgb(52 211 153 / 12%); }
.tile.bad svg.i { color: var(--red); background: rgb(248 113 113 / 12%); }

.sys-grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 2000px) { .sys-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sys { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 18px; text-align: left;
  background: radial-gradient(120% 90% at 0% 0%, rgb(var(--accent-rgb) / 8%), transparent 55%), linear-gradient(160deg, var(--card-2), var(--card)); transition: border-color .18s, transform .18s var(--ease), box-shadow .18s; }
.sys:hover { border-color: rgb(var(--accent-rgb) / 38%); transform: translateY(-2px); box-shadow: 0 14px 34px rgb(0 0 0 / 30%); }
.sys.is-off { background: linear-gradient(160deg, var(--card-2), var(--card)); }
.sys.is-off .ico { color: var(--dim); background: rgb(255 255 255 / 5%); }
.sys .row-main b { font-size: 15px; }
.sys .row-main small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sys-open { position: absolute; inset: 0; border-radius: inherit; }
.sys .sw { position: relative; z-index: 1; }

/* ---------- Page d'un système ---------- */
.ghead { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.ghead .ico { width: 54px; height: 54px; border-radius: 17px; }
.ghead .ico svg { width: 26px; height: 26px; }
.ghead h1 { margin: 0; font-size: clamp(26px, 5vw, 36px); letter-spacing: -.025em; line-height: 1.1; }
.ghead p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.master { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 18px; border-radius: 20px; border: 1px solid rgb(var(--accent-rgb) / 30%);
  background: linear-gradient(120deg, rgb(var(--accent-rgb) / 18%), rgb(var(--accent-rgb) / 4%)); }
.master.is-off { border-color: rgb(248 113 113 / 28%); background: linear-gradient(120deg, rgb(248 113 113 / 12%), rgb(248 113 113 / 2%)); }
.master .row-main b { font-size: 16px; }
.seg { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--px)) 14px; padding: 2px var(--px) 4px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--muted); background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px var(--line); }
.seg a em { font-style: normal; color: var(--dim); font-weight: 600; }
.seg a.active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 6px 18px rgb(var(--accent-rgb) / 30%); }
.seg a.active em { color: rgb(255 255 255 / 70%); }
@media (min-width: 900px) { .seg { margin: 0 0 16px; padding: 2px 0 4px; flex-wrap: wrap; } }

.cols { display: grid; gap: 0 22px; }
@media (min-width: 1500px) { .cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* Ligne de réglage */
.set { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); transition: background-color .5s; }
.set:last-child { border-bottom: 0; }
.set.flash { background-color: rgb(var(--accent-rgb) / 12%); transition: none; }
.set .row-main b { font-size: 14.5px; }
.set .ctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.set.wide .ctl { grid-column: 1 / -1; justify-content: stretch; }
.set.wide .ctl > :first-child { flex: 1; }
.mod { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); vertical-align: 2px; }
.reset { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--accent-2); background: rgb(var(--accent-rgb) / 10%); flex: 0 0 auto; }
.reset:hover { background: rgb(var(--accent-rgb) / 18%); }
.reset svg { width: 16px; height: 16px; }
.reset[hidden] { display: none; }
.num { display: flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: 13px; background: rgb(0 0 0 / 28%); overflow: hidden; }
.num:focus-within { border-color: rgb(var(--accent-rgb) / 70%); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 14%); }
.num.bad { border-color: rgb(248 113 113 / 70%); }
.num button { display: grid; place-items: center; width: 38px; height: 42px; color: var(--muted); font-size: 18px; font-weight: 600; }
.num button:hover:not(:disabled) { color: var(--text); background: rgb(255 255 255 / 6%); }
.num input { width: 84px; height: 42px; border: 0; outline: none; background: none; text-align: center; font: 700 15px/1 "Sora", "Inter", sans-serif; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.range-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 11.5px; font-weight: 600; }
.range-line input { flex: 1; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent-deep), var(--accent-2)) 0 / var(--p, 0%) 100% no-repeat, rgb(255 255 255 / 9%); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 40%), 0 0 0 4px rgb(var(--accent-rgb) / 30%); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 40%), 0 0 0 4px rgb(var(--accent-rgb) / 30%); cursor: pointer; }
input[type="range"]:disabled { opacity: .5; }
.multi { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.multi button { min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px var(--line-2); }
.multi button.on { color: #fff; background: rgb(var(--accent-rgb) / 30%); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 60%); }
.set select.input { min-width: 170px; max-width: 280px; }
.set input.text { min-width: 200px; }
@media (max-width: 560px) {
  .set { grid-template-columns: minmax(0, 1fr) auto; }
  .set.has-range { grid-template-areas: "main main" "range ctl"; }
  .set.has-range .row-main { grid-area: main; }
  .set.has-range .ctl { grid-area: ctl; }
  .set.has-range .range-line { grid-area: range; grid-column: auto; }
  .num input { width: 64px; }
  .num button { width: 34px; }
  .set.stack .ctl { grid-column: 1 / -1; justify-content: space-between; }
  .set select.input, .set input.text { max-width: none; flex: 1; min-width: 0; }
  .multi { justify-content: flex-start; }
}

/* Listes */
.listbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.listbar .search { flex: 1; margin: 0; max-width: 420px; }
.search { position: relative; display: block; margin-bottom: 14px; }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--dim); width: 18px; height: 18px; pointer-events: none; }
.search .input { padding-left: 44px; min-height: 48px; border-radius: 15px; background: rgb(255 255 255 / 4%); border-color: var(--line); }
.coords { font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dim); }

/* Formulaire d'un élément */
.form { display: grid; gap: 14px; padding: 18px; }
@media (min-width: 760px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.field { display: grid; gap: 7px; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field > span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.field > small { color: var(--dim); font-size: 12px; }
.field .sw-line { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px 0 13px; border: 1px solid var(--line-2); border-radius: 13px; background: rgb(0 0 0 / 20%); color: var(--muted); font-size: 13.5px; }
.savebar { position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 20px); z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 12px; border-radius: 18px; border: 1px solid var(--line-2);
  background: rgb(20 22 30 / 86%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 14px 40px rgb(0 0 0 / 45%); }
.savebar .grow { flex: 1; }
.savebar .err { color: var(--red); font-size: 13px; font-weight: 600; }
.savebar .err:empty { min-width: 0; }
@media (min-width: 900px) { .savebar { bottom: 18px; } }

/* Classements */
.lb { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, var(--card-2), var(--card)); text-align: left; transition: border-color .15s, background-color .15s; }
.lb + .lb { margin-top: 10px; }
.lb.on { border-color: rgb(248 113 113 / 45%); background: linear-gradient(120deg, rgb(248 113 113 / 12%), var(--card)); }
.check { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--line-2); color: transparent; }
.lb.on .check { color: #fff; background: #ef4444; box-shadow: none; }
.check svg { width: 16px; height: 16px; stroke-width: 3; }
.confirm { display: grid; gap: 12px; margin-top: 16px; padding: 18px; border-radius: 20px; border: 1px solid rgb(248 113 113 / 30%); background: rgb(248 113 113 / 6%); }
.confirm b { color: #fecaca; }

/* Journal */
.log { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.log:last-child { border-bottom: 0; }
.log img { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.log .row-main b { font-weight: 600; font-size: 14px; }
.log .row-main span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.st { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.st.done { color: var(--green); } .st.failed, .st.expired { color: var(--red); } .st.waiting { color: var(--yellow); }

/* Connexion */
.login { display: grid; place-items: center; min-height: 100svh; padding: 24px 16px; background:
  radial-gradient(900px 520px at 50% -10%, rgb(var(--accent-rgb) / 22%), transparent 65%), var(--bg); }
.login-card { width: min(420px, 100%); display: grid; gap: 16px; padding: 30px 24px 24px; border-radius: 28px; border: 1px solid var(--line-2); background: linear-gradient(170deg, var(--card-2), var(--card)); box-shadow: 0 30px 80px rgb(0 0 0 / 55%); text-align: center; animation: viewin .35s var(--ease); }
.login-card img.logo { width: 76px; justify-self: center; filter: drop-shadow(0 10px 28px rgb(var(--accent-rgb) / 50%)); }
.login-card h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.login-card p { margin: 0; color: var(--muted); font-size: 14px; }
.login-card form { display: grid; gap: 12px; text-align: left; }
.login-card .who { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--muted); font-size: 14px; }
.login-card .who img { width: 28px; height: 28px; border-radius: 50%; }
.code-input { text-align: center; letter-spacing: .5em; font: 700 24px/1 "Sora", "Inter", sans-serif !important; min-height: 56px !important; }
.login-foot { color: var(--dim); font-size: 12px; }

/* Notifications */
#toasts { position: fixed; z-index: 100; left: 50%; top: calc(env(safe-area-inset-top) + 12px); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 15px; border: 1px solid var(--line-2); background: rgb(22 25 34 / 94%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 38px rgb(0 0 0 / 50%); font-size: 14px; font-weight: 600; animation: viewin .25s var(--ease); }
.toast svg { color: var(--green); }
.toast.err svg { color: var(--red); }
.toast.out { opacity: 0; transform: translateY(-6px); transition: .25s; }
@media (min-width: 900px) { #toasts { left: auto; right: 22px; transform: none; top: 18px; } }

@media (max-width: 560px) {
  .set.has-range .range-line { margin-right: 4px; }
  .savebar { flex-wrap: nowrap; }
  .savebar [data-save] { flex: 1; }
  .savebar .grow { flex: 0 0 0; }
  .savebar .lbl { display: none; }
  .savebar .err:not(:empty) { position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px); padding: 8px 12px; border-radius: 12px; background: rgb(40 20 22 / 95%); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }