/* app.css — espace de gestion du raccourcisseur SIS (thème sombre). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0d1117; --surface:#161b22; --surface-2:#1c222b; --border:#30363d;
  --text:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --accent-soft:rgba(88,166,255,.14);
  --green:#3fb950; --red:#f85149; --amber:#d29922; --t:.15s ease;
}
body { background:var(--bg); color:var(--text); line-height:1.5; min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; }
a { color:var(--accent); text-decoration:none; }
code,.mono { font-family:'SFMono-Regular',Consolas,Menlo,monospace; }

header { padding:20px; border-bottom:1px solid var(--border); display:flex;
  align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
header h1 { font-size:1.25rem; }
.header-meta { display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--muted); flex-wrap:wrap; }
.badge { border:1px solid var(--border); border-radius:20px; padding:3px 11px; white-space:nowrap; }
.badge.role { color:var(--green); border-color:var(--green); }
.linkbtn { background:none; border:none; color:var(--muted); cursor:pointer; text-decoration:underline; font-size:.78rem; padding:0; }
.linkbtn:hover { color:var(--text); }

main { max-width:980px; margin:0 auto; padding:24px 16px 80px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; }
.panel h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:14px; }

label { display:block; font-size:.82rem; color:var(--muted); margin:12px 0 5px; }
input[type=text],input[type=url],input[type=password],textarea {
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:.95rem; padding:10px 12px; outline:none; font-family:inherit;
  transition:border-color var(--t),box-shadow var(--t); }
textarea { resize:vertical; min-height:60px; font-family:'SFMono-Regular',Consolas,Menlo,monospace; font-size:.85rem; }
input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none;
  border-radius:8px; font-size:.88rem; font-weight:600; padding:10px 16px; cursor:pointer;
  transition:opacity var(--t),transform var(--t); font-family:inherit; }
.btn-primary { background:var(--accent); color:#04121f; }
.btn-ghost { background:var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-danger { background:none; color:var(--red); border:1px solid transparent; }
.btn-danger:hover { border-color:var(--red); }
.btn:hover { transform:translateY(-1px); } .btn-primary:hover { opacity:.9; }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }

.gate { max-width:480px; margin:10vh auto; }
.gate h2 { font-size:1.3rem; margin-bottom:6px; text-transform:none; letter-spacing:0; color:var(--text); }
.gate p { color:var(--muted); font-size:.88rem; margin-bottom:8px; }
.gate .sep { text-align:center; color:var(--muted); font-size:.78rem; margin:18px 0 6px; }

.create-row { display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:8px; }
@media(min-width:720px){ .create-row{ grid-template-columns:2fr 1fr 1fr auto; align-items:end; } }
.form-msg { font-size:.82rem; margin-top:8px; min-height:1.2em; }
.form-msg.err { color:var(--red); } .form-msg.ok { color:var(--green); }

.links { display:flex; flex-direction:column; gap:10px; }
.lcard { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px;
  display:grid; gap:10px; grid-template-columns:1fr auto; align-items:center; }
.lcard.off { opacity:.55; }
.l-main { min-width:0; }
.l-short { display:flex; align-items:center; gap:8px; font-weight:600; }
.l-short .copy { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.85rem; }
.l-short .copy:hover { color:var(--accent); }
.l-title { font-size:.85rem; }
.l-url { color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.l-url a { color:var(--muted); }
.l-meta { font-size:.72rem; color:#6e7681; margin-top:2px; }
.l-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.clicks { display:inline-flex; flex-direction:column; align-items:center; background:var(--bg);
  border:1px solid var(--border); border-radius:8px; padding:5px 12px; min-width:58px; }
.clicks b { font-size:1.1rem; } .clicks span { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.iconbtn { background:var(--bg); border:1px solid var(--border); border-radius:7px; color:var(--text);
  cursor:pointer; font-size:.82rem; padding:6px 10px; transition:all var(--t); }
.iconbtn:hover { border-color:var(--accent); }
.toggle { font-size:.72rem; display:inline-flex; align-items:center; gap:5px; color:var(--muted); cursor:pointer; user-select:none; }
.empty { text-align:center; color:var(--muted); padding:40px; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:16px; z-index:200; }
.overlay.show { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:14px; max-width:560px; width:100%; max-height:88vh; overflow:auto; padding:22px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head h3 { font-size:1.05rem; }
.close { background:none; border:none; color:var(--muted); font-size:1.3rem; cursor:pointer; }
.close:hover { color:var(--text); }
.qr-wrap { text-align:center; }
.qr-box { background:#fff; display:inline-block; padding:14px; border-radius:10px; margin-bottom:14px; }
.qr-box canvas { display:block; image-rendering:pixelated; }
.qr-actions { display:flex; gap:8px; justify-content:center; }

.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.stat-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.stat-card b { font-size:1.5rem; display:block; } .stat-card span { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.bars { margin:6px 0 16px; } .bars h4 { font-size:.74rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:8px; }
.bar { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:.8rem; }
.bar .lbl { width:96px; flex-shrink:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar .track { flex:1; background:var(--bg); border-radius:5px; height:16px; overflow:hidden; }
.bar .fill { height:100%; background:var(--accent); border-radius:5px; }
.bar .n { width:34px; text-align:right; color:var(--muted); }
.daybars { display:flex; align-items:flex-end; gap:2px; height:60px; margin-bottom:4px; }
.daybars .d { flex:1; background:var(--accent); border-radius:2px 2px 0 0; min-height:2px; }
.day-axis { display:flex; justify-content:space-between; font-size:.65rem; color:#6e7681; }
.recent { font-size:.74rem; border-collapse:collapse; width:100%; }
.recent th,.recent td { text-align:left; padding:4px 6px; border-bottom:1px solid var(--border); white-space:nowrap; }
.recent th { color:var(--muted); font-weight:600; text-transform:uppercase; font-size:.62rem; letter-spacing:.4px; }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--accent); color:#04121f; font-weight:600; font-size:.85rem; padding:10px 18px;
  border-radius:999px; opacity:0; pointer-events:none; transition:.2s; z-index:300; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--red); color:#fff; }