@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:#f5f2ed;color:#1a1a1a}
input,select,button,textarea{font-family:'DM Sans',sans-serif}
button{cursor:pointer}

/* ── VARIABLES ── */
:root{
  --gold:#c9a96e;--gold-dk:#9a7a45;
  --green:#1a6b3c;--green-lt:#e6f4ec;
  --red:#c0392b;--red-lt:#fdecea;
  --blue:#1a4a7a;--blue-lt:#e8f0fa;
  --border:#e0d8cc;--warm:#f5f2ed;
  --r:10px;--mono:'DM Mono',monospace;
}

/* ── OFFLINE BANNER ── */
#offline-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:9999;padding:8px;text-align:center;font-size:12px;font-weight:600;background:var(--red);color:#fff}

/* ── TOPBAR ── */
.topbar{height:50px;background:#0a0a0a;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(201,169,110,.2);position:sticky;top:0;z-index:100}
.topbar-logo{font-size:16px;font-weight:700;color:var(--gold);font-family:Georgia,serif;letter-spacing:.06em;cursor:pointer}
.chip{font-size:10px;padding:3px 10px;border-radius:99px;font-weight:500}
.chip-gold{background:rgba(201,169,110,.15);border:1px solid rgba(201,169,110,.3);color:var(--gold)}
.chip-red{background:var(--red-lt);border:1px solid #f0c4c0;color:var(--red)}

/* ── MAIN CONTAINER ── */
#app{min-height:calc(100vh - 50px)}

/* ── LOGIN ── */
.login-wrap{min-height:100vh;background:linear-gradient(135deg,rgba(10,10,10,.85),rgba(20,15,8,.7)),url('https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=1200&q=70') center/cover;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo h1{font-size:32px;color:var(--gold);font-family:Georgia,serif;letter-spacing:.08em}
.login-logo p{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
.glass{background:rgba(255,255,255,.08);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:28px;width:100%;max-width:380px}
.gl{display:block;font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px;margin-top:12px}
.gl:first-child{margin-top:0}
.gi{width:100%;padding:11px 14px;font-size:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;-webkit-appearance:none;outline:none}
.gi:focus{border-color:var(--gold)}
.gi::placeholder{color:rgba(255,255,255,.3)}
.gs{width:100%;padding:11px 14px;font-size:14px;background:rgba(20,15,8,.7);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;-webkit-appearance:none;outline:none}
.gs option{background:#1a1208}
.btn-gold{width:100%;padding:13px;font-size:14px;font-weight:600;background:var(--gold);color:#0a0a0a;border:none;border-radius:8px;margin-top:18px}
.err-msg{color:#ff9a9a;font-size:12px;margin-top:8px;display:none}
.back-link{color:rgba(255,255,255,.35);font-size:12px;cursor:pointer;margin-bottom:16px;display:inline-block}
.admin-link{display:block;text-align:center;color:rgba(255,255,255,.25);font-size:11px;cursor:pointer;text-decoration:underline;margin-top:14px}

/* ── HOME ── */
.home-wrap{min-height:calc(100vh - 50px);background:linear-gradient(135deg,rgba(10,10,10,.88),rgba(20,15,8,.75)),url('https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=1200&q=70') center/cover no-repeat;padding:24px 18px}
.home-greeting h2{font-size:20px;font-weight:700;color:#fff;font-family:Georgia,serif}
.home-greeting p{font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}
.stat-box{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 6px;text-align:center}
.stat-val{font-size:26px;font-weight:700;color:#fff;line-height:1}
.stat-lbl{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.07em;margin-top:4px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:22px 14px 18px;text-align:center;cursor:pointer;transition:.15s}
.tile:active{transform:scale(.96);background:rgba(201,169,110,.15)}
.tile-icon{font-size:30px;display:block;margin-bottom:10px;line-height:1}
.tile-title{font-size:14px;font-weight:600;color:#fff}
.tile-sub{font-size:11px;color:rgba(255,255,255,.42);margin-top:3px}
.tile-gold{border-color:rgba(201,169,110,.5);background:rgba(201,169,110,.1)}
.tile-gold .tile-title{color:var(--gold)}

/* ── MODULE PAGES ── */
.module-wrap{background:var(--warm);min-height:calc(100vh - 50px)}
.mod-header{display:flex;align-items:center;gap:10px;padding:14px 14px 0;margin-bottom:2px}
.mod-title{font-size:15px;font-weight:700}
.mod-body{padding:14px}

/* ── CARDS ── */
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px}
.card-title{font-size:10px;font-weight:600;color:#7a7060;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}

/* ── BUTTONS ── */
.btn{padding:9px 16px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:transparent;color:#1a1a1a;font-weight:500}
.btn-primary{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.btn-danger{border-color:#f0c4c0;color:var(--red)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}
.btn-full{width:100%;padding:13px;font-size:14px;font-weight:600}

/* ── FORMS ── */
.field{margin-bottom:12px}
.field label{display:block;font-size:11px;color:#7a7060;font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;font-size:14px;border:1px solid var(--border);border-radius:8px;background:#fff;color:#1a1a1a;-webkit-appearance:none;outline:none}
.field input:focus,.field select:focus{border-color:var(--gold)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ── BADGES ── */
.badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:99px;font-weight:500}
.b-info{background:var(--blue-lt);color:var(--blue)}
.b-ok{background:var(--green-lt);color:var(--green)}
.b-warn{background:#fef3e2;color:#a0620a}
.b-danger{background:var(--red-lt);color:var(--red)}

/* ── ALERTS ── */
.alert{padding:11px 14px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.alert-ok{background:var(--green-lt);border:1px solid #b8dfc9;color:var(--green)}
.alert-warn{background:#fef3e2;border:1px solid #f5d49a;color:#7a4a0a}
.alert-info{background:var(--blue-lt);border:1px solid #b8cfe8;color:var(--blue)}

/* ── SCAN ── */
.scan-box{border:2px dashed var(--border);border-radius:14px;position:relative;min-height:88px;cursor:pointer;transition:.2s;overflow:hidden}
.scan-box.active{border-color:var(--gold);background:rgba(201,169,110,.04)}
.scan-box.blocked{border-color:var(--red);background:rgba(192,57,43,.04)}
.scan-hidden{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;font-size:16px}
.scan-inner{padding:16px;text-align:center;pointer-events:none}
.scan-inner p{font-size:13px;color:#7a7060;margin-top:6px}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);animation:p 1.2s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.2}}
.meuble-tag{background:var(--green-lt);border:1px solid #b8dfc9;border-radius:8px;padding:9px 12px;font-size:13px;color:var(--green);display:flex;align-items:center;gap:8px;margin-bottom:10px}

/* ── EAN LIST ── */
.ean-list{border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:300px;overflow-y:auto}
.ean-row{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;border-bottom:1px solid #f5f2ed}
.ean-row:last-child{border-bottom:none}
.ean-code{font-family:var(--mono);font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ean-del{font-size:11px;color:var(--red);cursor:pointer;padding:3px 8px;border:1px solid #f5c0bc;border-radius:6px;flex-shrink:0}
.qty-ctrl{display:flex;align-items:center;gap:4px;flex-shrink:0}
.qty-btn{width:24px;height:24px;border:1px solid var(--border);border-radius:5px;background:transparent;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1}
.qty-input{width:42px;text-align:center;padding:2px 3px;font-size:13px;font-weight:600;border:1px solid var(--gold);border-radius:5px;font-family:var(--mono)}

/* ── ÉTIQUETTES ── */
.et-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.et-label{border-radius:6px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:3px}
.et-num{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em}
.et-mag{font-size:8px;font-family:var(--mono);opacity:.8}

/* ── ADMIN TABS ── */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.admin-tab{padding:6px 14px;font-size:12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:#7a7060;font-weight:500}
.admin-tab.on{background:#0a0a0a;color:#fff;border-color:#0a0a0a}

/* ── TABLES ── */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{text-align:left;padding:7px 10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#7a7060;background:var(--warm);border-bottom:1px solid var(--border)}
.tbl td{padding:8px 10px;border-bottom:1px solid #f5f2ed;vertical-align:middle}
.ptag{font-size:10px;padding:2px 7px;border-radius:99px;border:1px solid var(--border);color:#7a7060;cursor:pointer;display:inline-block;margin:2px;transition:.1s}
.ptag.on{background:#0a0a0a;color:#fff;border-color:#0a0a0a}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;backdrop-filter:blur(4px)}
.modal{background:#fff;border-radius:16px;padding:22px;max-width:460px;width:100%;max-height:90vh;overflow-y:auto}
.modal h3{font-size:16px;font-weight:600;margin-bottom:4px}
.modal p{font-size:12px;color:#7a7060;margin-bottom:18px}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* ── CONFIRM ── */
.cfm-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px}
.cfm{background:#fff;border-radius:16px;padding:28px 22px;max-width:340px;width:100%;text-align:center}
.cfm-icon{font-size:36px;margin-bottom:12px}
.cfm-title{font-size:17px;font-weight:600;margin-bottom:6px}
.cfm-sub{font-size:13px;color:#7a7060;margin-bottom:20px;white-space:pre-line}
.cfm-btns{display:flex;gap:8px;justify-content:center}

/* ── SUIVI ── */
.progress-bar{background:var(--warm);border-radius:99px;height:10px;overflow:hidden;margin-bottom:5px}
.progress-fill{height:100%;border-radius:99px;transition:.4s}

/* ── MISC ── */
.empty{padding:24px;text-align:center;font-size:13px;color:#7a7060}
.sep{height:1px;background:var(--border);margin:12px 0}
.drop-zone{border:2px dashed var(--border);border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:.2s}
.drop-zone:hover{border-color:var(--gold);background:rgba(201,169,110,.04)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.sync-badge{display:none;position:fixed;bottom:14px;right:14px;background:var(--blue);color:#fff;border-radius:99px;padding:7px 14px;font-size:12px;z-index:500;box-shadow:0 4px 16px rgba(0,0,0,.2)}