:root{
    --paper:#EDEFE7;
    --surface:#FFFFFF;
    --ink:#1B2430;
    --ink-soft:#5B6472;
    --line:#D9DACC;
    --line-strong:#B9BBA9;
    --ok:#1F7A5C;
    --ok-bg:#E7F1EB;
    --warn:#B8752E;
    --warn-bg:#F6ECDD;
    --bad:#A73B34;
    --bad-bg:#F5E7E5;
    --accent:#2C3A5E;
    --accent-soft:#3E4F7A;
    --radius:3px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:14.5px;
    line-height:1.5;
    padding:0 0 64px;
  }
  .wrap{max-width:1100px;margin:0 auto;padding:0 28px;}

  /* ---- Masthead ---- */
  .masthead{
    padding:36px 0 18px;
    border-bottom:3px double var(--line-strong);
    margin-bottom:28px;
  }
  .masthead .kicker{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--ink-soft);
    letter-spacing:.02em;
  }
  .masthead h1{
    font-family:'Zilla Slab',serif;
    font-weight:700;
    font-size:32px;
    margin:4px 0 6px;
    color:var(--ink);
  }
  .masthead p{
    margin:0;
    color:var(--ink-soft);
    max-width:640px;
  }

  /* ---- Section ---- */
  .section{margin-bottom:34px;}
  .section-title{
    font-family:'Zilla Slab',serif;
    font-weight:600;
    font-size:18px;
    margin:0 0 12px;
    color:var(--ink);
  }

  /* ---- Upload tray ---- */
  .tray{
    border:2px dashed var(--line-strong);
    border-radius:var(--radius);
    background:rgba(255,255,255,.45);
    padding:26px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .tray.dragover{border-color:var(--accent); background:rgba(255,255,255,.8);}
  .tray p{margin:0 0 4px; color:var(--ink);}
  .tray .hint{color:var(--ink-soft); font-size:13px;}
  .tray input{display:none;}
  .tray-btn{
    display:inline-block;
    margin-top:12px;
    background:var(--accent);
    color:#fff;
    border:none;
    padding:9px 18px;
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:13.5px;
    cursor:pointer;
  }
  .tray-btn:hover{background:var(--accent-soft);}

  /* ---- File chips ---- */
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
  .chip{
    display:flex; align-items:center; gap:8px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:7px 10px;
    font-size:13px;
  }
  .chip .tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    font-weight:600;
    padding:2px 6px;
    border-radius:2px;
    color:#fff;
    letter-spacing:.02em;
  }
  .chip .fname{color:var(--ink-soft); max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .chip .count{color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:12px;}
  .chip .remove{
    margin-left:2px; cursor:pointer; color:var(--ink-soft); font-size:15px; line-height:1;
    border:none; background:none; padding:0 2px;
  }
  .chip .remove:hover{color:var(--bad);}
  .chip.unknown{border-color:var(--bad); background:var(--bad-bg);}
  .tag.PAYM{background:var(--accent);}
  .tag.KASHPAW{background:#6B4A9E;}
  .tag.MONCASH{background:#C7302B;}
  .tag.NATCASH{background:#0B6E4F;}
  .tag.INCONNU{background:var(--bad);}

  .actions-row{display:flex; gap:10px; align-items:center; margin-top:18px;}
  .btn-primary{
    background:var(--ink);
    color:#fff;
    border:none;
    padding:11px 22px;
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
  }
  .btn-primary:disabled{background:#9199A8; cursor:not-allowed;}
  .btn-primary:not(:disabled):hover{background:#000;}
  .btn-ghost{
    background:none;
    border:1px solid var(--line-strong);
    color:var(--ink-soft);
    padding:10px 16px;
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    cursor:pointer;
  }
  .btn-ghost:hover{border-color:var(--ink); color:var(--ink);}

  .error-box{
    background:var(--bad-bg); border:1px solid var(--bad); color:var(--bad);
    padding:10px 14px; border-radius:var(--radius); font-size:13px; margin-top:14px;
  }

  /* ---- Results ---- */
  #results{display:none;}

  .verdict-banner{
    display:flex; align-items:center; gap:14px;
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    margin-bottom:22px;
  }
  .verdict-banner.ok{border-color:var(--ok); background:var(--ok-bg);}
  .verdict-banner.bad{border-color:var(--bad); background:var(--bad-bg);}
  .verdict-banner .stamp-mini{flex-shrink:0;}
  .verdict-banner .msg{font-size:14.5px;}
  .verdict-banner .msg b{display:block; font-family:'Zilla Slab',serif; font-size:17px; margin-bottom:2px;}

  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:26px;}
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 18px 20px;
  }
  .card .op-name{
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    color:var(--ink-soft);
    letter-spacing:.03em;
    margin-bottom:10px;
  }
  .card .op-count{
    font-family:'Zilla Slab',serif;
    font-size:30px;
    font-weight:700;
    line-height:1;
    margin-bottom:14px;
  }
  .card .op-count small{font-family:'Inter',sans-serif; font-weight:500; font-size:13px; color:var(--ink-soft);}

  .stamp{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:2px solid;
    border-radius:4px;
    padding:5px 11px;
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:.04em;
    transform:rotate(-3deg);
  }
  .stamp.ok{color:var(--ok); border-color:var(--ok);}
  .stamp.warn{color:var(--warn); border-color:var(--warn);}
  .stamp.bad{color:var(--bad); border-color:var(--bad);}
  .stamp.small{padding:2px 7px; font-size:10.5px; border-width:1.5px; transform:rotate(-3deg);}

  /* ---- Filter bar ---- */
  .filter-bar{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    margin-bottom:14px;
  }
  .filter-bar select, .filter-bar input[type=text]{
    font-family:'Inter',sans-serif;
    font-size:13px;
    padding:8px 10px;
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--ink);
  }
  .filter-bar input[type=text]{flex:1; min-width:180px;}
  .filter-bar .result-count{color:var(--ink-soft); font-size:13px; margin-left:auto;}

  /* ---- Table ---- */
  .table-wrap{
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--surface);
  }
  table{width:100%; border-collapse:collapse; font-size:13px;}
  thead th{
    text-align:left;
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:11.5px;
    color:var(--ink-soft);
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    background:#F7F7F2;
    white-space:nowrap;
  }
  tbody td{
    padding:9px 12px;
    border-bottom:1px solid var(--line);
    vertical-align:middle;
  }
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#F9F9F4;}
  .mono{font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
  .num{font-family:'IBM Plex Mono',monospace; text-align:right; white-space:nowrap;}
  .muted{color:var(--ink-soft);}
  .empty-state{padding:40px 20px; text-align:center; color:var(--ink-soft);}

  footer.note{margin-top:30px; font-size:12.5px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:14px;}

/* ---- Ajouts : nav, login, historique ---- */
.topnav{
  display:flex; align-items:center; gap:22px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
}
.topnav .brand{
  font-family:'Zilla Slab',serif; font-weight:700; font-size:17px; color:var(--ink);
  text-decoration:none;
}
.topnav a{
  color:var(--ink-soft); text-decoration:none; font-size:13.5px;
}
.topnav a:hover{color:var(--ink);}
.topnav .spacer{flex:1;}
.topnav .whoami{color:var(--ink-soft); font-size:13px; font-family:'IBM Plex Mono',monospace;}

.auth-shell{
  max-width:380px; margin:80px auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px;
}
.auth-shell h1{font-family:'Zilla Slab',serif; font-size:22px; margin:0 0 4px;}
.auth-shell p.sub{color:var(--ink-soft); margin:0 0 20px; font-size:13.5px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:5px;}
.field input{
  width:100%; padding:10px 11px; border:1px solid var(--line-strong); border-radius:var(--radius);
  font-family:'Inter',sans-serif; font-size:14px; background:#fff; color:var(--ink);
}
.field input:focus{outline:2px solid var(--accent); outline-offset:1px;}
.btn-full{width:100%; margin-top:6px;}
.form-error{background:var(--bad-bg); border:1px solid var(--bad); color:var(--bad); padding:9px 12px; border-radius:var(--radius); font-size:13px; margin-bottom:14px;}
.form-success{background:var(--ok-bg); border:1px solid var(--ok); color:var(--ok); padding:9px 12px; border-radius:var(--radius); font-size:13px; margin-bottom:14px;}
.setup-warning{background:var(--warn-bg); border:1px solid var(--warn); color:var(--warn); padding:9px 12px; border-radius:var(--radius); font-size:12.5px; margin-bottom:18px;}

.history-table td, .history-table th{padding:10px 12px;}
.link-btn{background:none;border:none;color:var(--accent);text-decoration:underline;cursor:pointer;font-size:13px;padding:0;font-family:'Inter',sans-serif;}