:root{ --bg:#0f1115; --surface:#171a21; --surface2:#1e222b; --border:#2a2f3a; --text:#e7e9ee; --muted:#9aa1ac; --accent:#5b8cff; --accent2:#7c5cff; --ok:#2fbf71; --warn:#f0b429; --danger:#ef4a5b; --radius:12px; /* Fonds des flashs (surchargés en thème clair) */ --flash-ok-bg:#0f2e1e; --flash-ok-br:#1c5638; --flash-ok-tx:#7ee2ac; --flash-err-bg:#2e1013; --flash-err-br:#5e2027; --flash-err-tx:#ffb3ba; --flash-info-bg:#101f2e; --flash-info-br:#1c3d56; --flash-info-tx:#9cd0ff; --badge-on-bg:#0f2e1e; --badge-on-tx:#7ee2ac; --badge-off-bg:#2e1013; --badge-off-tx:#ffb3ba; color-scheme:dark; } /* Thème clair : appliqué quand */ :root[data-theme="light"]{ --bg:#f4f6fb; --surface:#ffffff; --surface2:#eef1f7; --border:#d8dde7; --text:#1a1f2b; --muted:#5c6472; --accent:#3366ff; --accent2:#7c5cff; --ok:#1a9e5a; --warn:#b5820a; --danger:#d63447; --flash-ok-bg:#e7f6ee; --flash-ok-br:#a7dcc0; --flash-ok-tx:#116b3c; --flash-err-bg:#fdeaec; --flash-err-br:#f2b8bf; --flash-err-tx:#a01827; --flash-info-bg:#e8f0fd; --flash-info-br:#b6cdf5; --flash-info-tx:#1a4b9c; --badge-on-bg:#e7f6ee; --badge-on-tx:#116b3c; --badge-off-bg:#fdeaec; --badge-off-tx:#a01827; color-scheme:light; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} /* Topbar */ .topbar{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.5rem; background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap} .brand{font-weight:700;font-size:1.15rem;color:var(--text)} .nav{display:flex;gap:1rem;margin-left:.5rem} .nav a{color:var(--muted);padding:.25rem 0} .nav a.active,.nav a:hover{color:var(--text);text-decoration:none} .user{margin-left:auto;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap} .user-name{color:var(--muted);font-size:.9rem} .imp-badge{background:#3a2d0d;color:var(--warn);border:1px solid #5a4611; padding:.15rem .5rem;border-radius:8px;font-size:.8rem} .imp-badge a{color:var(--warn);text-decoration:underline} /* Layout */ .wrap{max-width:1000px;margin:0 auto;padding:2rem 1.5rem} .foot{text-align:center;color:var(--muted);font-size:.8rem;padding:2rem 0} h1{font-size:1.6rem;letter-spacing:-.02em;margin:0 0 1.25rem} h2{font-size:1.2rem;margin:0 0 1rem} .muted{color:var(--muted)} /* Cards & grid */ .card{background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:1.25rem} .grid{display:grid;gap:1rem} @media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer; background:var(--accent);color:#fff;border:none;border-radius:9px; padding:.55rem .9rem;font-size:.9rem;font-weight:600} .btn:hover{filter:brightness(1.08);text-decoration:none} .btn--ghost{background:transparent;border:1px solid var(--border);color:var(--text)} .btn--danger{background:var(--danger)} .btn--sm{padding:.35rem .6rem;font-size:.82rem} .btn--block{width:100%;justify-content:center} /* Forms */ label{display:block;font-size:.85rem;color:var(--muted);margin:0 0 .3rem} .field{margin-bottom:1rem} input[type=text],input[type=email],input[type=url],input[type=password],input[type=number],input[type=search],input[type=tel],select,textarea{ width:100%;background:var(--surface2);border:1px solid var(--border); color:var(--text);border-radius:9px;padding:.6rem .7rem;font-size:.95rem;font-family:inherit} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent} .hint{font-size:.78rem;color:var(--muted);margin-top:.3rem} /* Flash */ .flash{padding:.7rem 1rem;border-radius:9px;margin-bottom:1rem;font-size:.9rem} .flash--ok{background:var(--flash-ok-bg);border:1px solid var(--flash-ok-br);color:var(--flash-ok-tx)} .flash--error{background:var(--flash-err-bg);border:1px solid var(--flash-err-br);color:var(--flash-err-tx)} .flash--info{background:var(--flash-info-bg);border:1px solid var(--flash-info-br);color:var(--flash-info-tx)} /* Table / list */ .qr-list{display:grid;gap:.75rem} .qr-row{display:flex;align-items:center;gap:1rem;background:var(--surface); border:1px solid var(--border);border-radius:var(--radius);padding:1rem;flex-wrap:wrap} .qr-row .qr-main{flex:1;min-width:200px} .qr-row .qr-name{font-weight:600} .qr-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--muted); word-break:break-all} .qr-target{font-size:.85rem;color:var(--muted);margin-top:.2rem;word-break:break-all} .badge{font-size:.72rem;padding:.15rem .5rem;border-radius:6px;font-weight:600} .badge--on{background:var(--badge-on-bg);color:var(--badge-on-tx)} .badge--off{background:var(--badge-off-bg);color:var(--badge-off-tx)} .actions{display:flex;gap:.4rem;flex-wrap:wrap} /* Auth screens */ .theme-fab{position:fixed;top:1rem;right:1rem;z-index:10} .auth{max-width:400px;margin:8vh auto;padding:0 1rem} .auth .brand{display:block;text-align:center;font-size:1.6rem;margin-bottom:1.5rem} /* Copy box (invite link) */ .copybox{display:flex;gap:.5rem;margin-top:.5rem} .copybox input{font-family:ui-monospace,monospace;font-size:.8rem} /* Editor */ .editor{display:grid;gap:1.5rem} @media(min-width:820px){.editor{grid-template-columns:340px 1fr}} .preview-pane{display:flex;flex-direction:column;align-items:center;gap:1rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.5rem;position:sticky;top:1rem;align-self:start} #qr-preview{background:#fff;border-radius:8px;padding:8px;min-height:260px; display:flex;align-items:center;justify-content:center} .controls .row{display:flex;gap:.75rem} .controls .row>*{flex:1} .swatch{display:flex;align-items:center;gap:.5rem} input[type=color]{width:44px;height:38px;padding:2px;border-radius:8px;background:var(--surface2);border:1px solid var(--border)} .preset-thumb{width:64px;height:64px;flex-shrink:0;background:#fff;border-radius:8px;padding:3px; display:flex;align-items:center;justify-content:center} .preset-thumb canvas,.preset-thumb svg{max-width:100%;height:auto}