/* ❀ Le Doyle's ❀ — styles partagés */


  :root{
    --bg-0:#140d09;
    --bg-1:#20140d;
    --wood-1:#3b2416;
    --wood-2:#4a2e1c;
    --leather:#5c3a24;
    --parchment:#ecdcb0;
    --parchment-dark:#dcc593;
    --gold:#c9a463;
    --gold-bright:#e0bb7c;
    --red:#7a2620;
    --red-bright:#9c332b;
    --ink:#2a1c12;
    --cream:#f4e8cf;
    --muted:#b79c78;
    --shadow:rgba(0,0,0,.55);
    --radius:6px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(201,164,99,.12), transparent 60%),
      repeating-linear-gradient(115deg, var(--bg-0) 0px, var(--bg-1) 3px, var(--bg-0) 6px),
      var(--bg-0);
    color:var(--cream);
    font-family:'Bitter', serif;
    line-height:1.5;
  }

  h1,h2,h3,.display{
    font-family:'Rye', serif;
    font-weight:400;
    letter-spacing:.5px;
  }

  .mono{ font-family:'Courier Prime', monospace; }

  button{ font-family:inherit; cursor:pointer; }
  input{ font-family:inherit; }

  :focus-visible{
    outline:3px solid var(--gold-bright);
    outline-offset:2px;
  }

  /* ---------- TOPBAR ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    padding:16px 28px;
    background:
      linear-gradient(180deg, var(--wood-2), var(--wood-1));
    border-bottom:4px double var(--gold);
    box-shadow:0 6px 18px var(--shadow);
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-badge{
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, #8a6b3b 100%);
    color:var(--ink); font-size:22px; font-weight:700;
    box-shadow:0 2px 4px var(--shadow), inset 0 0 0 2px rgba(0,0,0,.25);
    flex:none;
  }
  .brand-text h1{
    margin:0; font-size:26px; color:var(--gold-bright);
    text-shadow:2px 2px 0 rgba(0,0,0,.5);
  }
  .brand-text p{
    margin:0; font-size:12px; letter-spacing:3px; text-transform:uppercase;
    color:var(--muted);
  }

  .tabs{ display:flex; gap:8px; flex-wrap:wrap; }
  .tab-btn{
    background:transparent;
    border:2px solid var(--gold);
    color:var(--parchment);
    padding:10px 18px;
    border-radius:var(--radius);
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;
    transition:background .15s, color .15s, transform .1s;
  }
  .tab-btn:hover{ background:rgba(201,164,99,.15); }
  .tab-btn.active{
    background:var(--gold);
    color:var(--ink);
    box-shadow:0 3px 0 #8a6b3b;
  }
  .tab-btn.active:hover{ transform:translateY(1px); box-shadow:0 2px 0 #8a6b3b; }

  .compta-link{
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    color:var(--ink); text-decoration:none;
    border:2px solid #7a5f34; padding:9px 16px; border-radius:30px;
    font-size:13px; font-weight:700; letter-spacing:.5px;
    box-shadow:0 3px 0 #7a5f34;
    transition:transform .08s, filter .15s;
  }
  .compta-link:hover{ filter:brightness(1.06); }
  .compta-link:active{ transform:translateY(2px); box-shadow:0 1px 0 #7a5f34; }

  main{ max-width:1100px; margin:0 auto; padding:28px 20px 80px; }

  .view{ display:none; animation:fadeIn .35s ease; }
  .view.active{ display:block; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  /* ---------- TOOLBAR ---------- */
  .toolbar{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:2px dashed rgba(201,164,99,.35);
  }
  .stat{ font-size:15px; color:var(--muted); }
  .stat span{ color:var(--gold-bright); font-weight:700; font-family:'Courier Prime', monospace; }
  .actions{ display:flex; gap:10px; flex-wrap:wrap; }

  .btn{
    border-radius:var(--radius);
    padding:10px 16px;
    font-size:14px;
    font-weight:700;
    border:2px solid transparent;
    transition:transform .1s, filter .15s, box-shadow .15s;
  }
  .btn:active{ transform:translateY(1px); }
  .btn:disabled{ opacity:.4; cursor:not-allowed; filter:none; transform:none; }

  .btn-primary{
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    color:var(--ink);
    box-shadow:0 3px 0 #7a5f34;
  }
  .btn-primary:hover:not(:disabled){ filter:brightness(1.06); }

  .btn-outline{
    background:transparent; border-color:var(--muted); color:var(--parchment);
  }
  .btn-outline:hover:not(:disabled){ background:rgba(236,220,176,.08); }

  /* Les modales ont un fond clair : il faut du texte foncé sur leurs boutons outline */
  .modal .btn-outline{ color:var(--ink); border-color:#8a6b3b; }
  .modal .btn-outline:hover:not(:disabled){ background:rgba(42,28,18,.08); }
  .bilan24-card .btn-outline{ color:var(--ink); border-color:#8a6b3b; }
  .bilan24-card .btn-outline:hover:not(:disabled){ background:rgba(42,28,18,.08); }

  .btn-outline-red{
    background:transparent; border-color:var(--red-bright); color:#e5a9a3;
  }
  .btn-outline-red:hover:not(:disabled){ background:rgba(122,38,32,.18); }

  .btn-ghost{
    background:transparent; color:var(--muted); border-color:transparent;
    text-decoration:underline; text-underline-offset:3px;
  }
  .btn-ghost:hover:not(:disabled){ color:var(--gold-bright); }

  /* ---------- EMPTY STATE ---------- */
  .empty-state{
    display:none;
    text-align:center;
    padding:60px 20px;
    color:var(--muted);
    border:2px dashed rgba(201,164,99,.3);
    border-radius:10px;
    background:rgba(0,0,0,.15);
  }
  .empty-state.show{ display:block; }
  .empty-state .icon{ font-size:40px; display:block; margin-bottom:10px; }
  .empty-state h3{ margin:0 0 6px; color:var(--parchment); font-size:20px; }

  /* ---------- GRID / WANTED CARDS ---------- */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:20px;
  }

  .card{
    position:relative;
    background:
      radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,.05), transparent 40%),
      var(--parchment);
    color:var(--ink);
    border-radius:2px;
    padding:22px 16px 18px;
    text-align:center;
    box-shadow:0 8px 16px var(--shadow), inset 0 0 0 1px rgba(0,0,0,.15);
    transform:rotate(var(--tilt, 0deg));
    transition:transform .15s;
    border:1px solid rgba(0,0,0,.2);
  }
  .card:nth-child(3n){ --tilt:-1.2deg; }
  .card:nth-child(3n+1){ --tilt:.8deg; }
  .card:nth-child(3n+2){ --tilt:-.4deg; }
  .card:hover{ transform:rotate(0deg) translateY(-3px); }

  .card::before{
    content:"";
    position:absolute; top:8px; left:50%; translate:-50% 0;
    width:16px; height:16px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #6b6b6b, #2a2a2a);
    box-shadow:0 1px 2px rgba(0,0,0,.5);
  }

  .card-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin:14px auto 8px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 60%, #8a6b3b 100%);
    color:var(--ink); font-weight:700; font-family:'Courier Prime', monospace; font-size:14px;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);
  }

  .card h3{
    margin:4px 0 2px; font-size:20px; line-height:1.15; color:var(--ink);
  }
  .card-actions{
    display:flex; justify-content:center; gap:8px; margin-top:14px;
  }
  .icon-btn{
    background:transparent; border:1px solid rgba(0,0,0,.25);
    border-radius:5px; padding:6px 10px; font-size:13px; color:var(--ink);
  }
  .icon-btn:hover{ background:rgba(0,0,0,.08); }
  .icon-btn.danger{ border-color:var(--red-bright); color:var(--red-bright); }
  .icon-btn.danger:hover{ background:rgba(122,38,32,.1); }

  /* ---------- MODALS ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:50;
    background:rgba(10,6,3,.75);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .modal-overlay.hidden{ display:none; }
  .modal{
    background:var(--parchment);
    color:var(--ink);
    width:100%; max-width:400px;
    border-radius:6px;
    padding:26px;
    box-shadow:0 20px 50px rgba(0,0,0,.6);
    border:2px solid var(--gold);
  }
  .modal.small{ max-width:340px; text-align:center; }
  .modal h3{ margin:0 0 18px; font-size:22px; }
  .modal label{
    display:block; margin-bottom:14px; font-size:13px; font-weight:600; color:#4a3520;
  }
  .modal input{
    width:100%; margin-top:6px; padding:10px 12px;
    border:1px solid #b79c78; border-radius:5px;
    font-size:15px; background:#fffaf0; color:var(--ink);
  }
  .field-error{ color:var(--red-bright); font-size:12px; margin-top:4px; display:none; }
  .field-error.show{ display:block; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
  .modal.small .modal-actions{ justify-content:center; }

  /* ---------- CONSO MULTI-SELECT ---------- */
  .conso-label{ font-size:13px; font-weight:600; color:#4a3520; margin-bottom:6px; }
  .conso-field{
    border:1px solid #b79c78; border-radius:5px;
    background:#fffaf0; padding:8px;
  }
  .conso-chips{
    display:flex; flex-direction:column; gap:6px;
    margin-bottom:6px;
  }
  .conso-chips:empty{ display:none; margin:0; }
  .conso-chip{
    display:flex; align-items:center; gap:8px;
    background:var(--red); color:var(--cream);
    padding:6px 8px 6px 12px;
    border-radius:8px; font-size:13px;
  }
  .conso-chip .chip-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .conso-chip .chip-price{ font-size:11px; opacity:.85; font-family:'Courier Prime', monospace; white-space:nowrap; }
  .qty-stepper{ display:flex; align-items:center; gap:0; flex:none; }
  .qty-stepper button{
    background:rgba(255,255,255,.18); border:none; color:var(--cream);
    width:20px; height:20px; font-size:14px; line-height:1;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .qty-stepper button:first-child{ border-radius:5px 0 0 5px; }
  .qty-stepper button:last-child{ border-radius:0 5px 5px 0; }
  .qty-stepper button:hover{ background:rgba(255,255,255,.35); }
  .qty-stepper .qty-value{
    width:22px; text-align:center; font-size:12px; font-weight:700;
    font-family:'Courier Prime', monospace;
  }
  .conso-chip button.chip-remove{
    background:rgba(255,255,255,.18); border:none; color:var(--cream);
    width:18px; height:18px; border-radius:50%; font-size:12px; line-height:1; flex:none;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .conso-chip button.chip-remove:hover{ background:rgba(255,255,255,.35); }

  #consoSearch{ margin-top:0 !important; }

  .conso-list{
    margin-top:8px;
    max-height:190px; overflow-y:auto;
    border:1px solid #d8c6a0; border-radius:5px;
    background:#fffdf6;
  }
  .conso-group-title{
    position:sticky; top:0;
    background:#eadfc0;
    color:#5c4425;
    font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:5px 10px;
  }
  .conso-item{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px;
    padding:7px 10px;
    font-size:14px; font-weight:400;
    cursor:pointer;
    border-bottom:1px solid #f0e6cc;
    margin:0;
  }
  .conso-item:hover{ background:#f6ecd2; }
  .conso-item-left{ display:flex; align-items:center; gap:8px; min-width:0; }
  .conso-item-left input{ width:auto; margin:0; flex:none; }
  .conso-price{ color:#8a6b3b; font-size:12px; font-family:'Courier Prime', monospace; flex:none; white-space:nowrap; }
  .conso-empty{ padding:14px; text-align:center; color:#8a7455; font-size:13px; }
  .conso-total{
    margin-top:8px; text-align:right;
    font-size:13px; font-weight:700; color:var(--red);
  }

  .card .conso-tags{
    display:flex; flex-wrap:wrap; gap:5px; justify-content:center;
    margin-top:6px;
  }
  .card .conso{
    display:inline-block;
    padding:3px 10px;
    background:var(--red);
    color:var(--cream);
    border-radius:20px;
    font-size:11px;
    letter-spacing:.3px;
  }
  .card .conso-cost{
    display:block; margin-top:8px; font-size:12px; color:#8a6b3b; font-family:'Courier Prime', monospace;
  }

  /* ---------- TIRAGE ---------- */
  .stage{
    display:flex; flex-direction:column; align-items:center; gap:26px;
    padding:20px 0 10px;
  }
  .reel-frame{
    width:100%; max-width:520px;
    padding:6px;
    background:linear-gradient(180deg, var(--wood-2), var(--wood-1));
    border-radius:10px;
    box-shadow:0 10px 30px var(--shadow), inset 0 0 0 2px var(--gold);
  }
  .reel{
    background:var(--ink);
    color:var(--gold-bright);
    font-family:'Courier Prime', monospace;
    font-size:clamp(16px, 4vw, 22px);
    font-weight:700;
    text-align:center;
    padding:32px 14px;
    border-radius:6px;
    letter-spacing:.5px;
    box-shadow:inset 0 0 20px rgba(0,0,0,.7);
    min-height:28px;
  }
  .reel.spinning{ color:var(--parchment); }

  .lever-btn{
    background:linear-gradient(180deg, var(--red-bright), var(--red));
    color:var(--cream);
    border:2px solid #3a1310;
    padding:16px 40px;
    font-size:18px; font-weight:700; letter-spacing:1px;
    border-radius:40px;
    box-shadow:0 5px 0 #3a1310, 0 10px 20px var(--shadow);
    transition:transform .08s;
  }
  .lever-btn:hover:not(:disabled){ filter:brightness(1.08); }
  .lever-btn:active:not(:disabled){ transform:translateY(4px); box-shadow:0 1px 0 #3a1310; }
  .lever-btn:disabled{ opacity:.45; cursor:not-allowed; }

  .winner-panel{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:18px;
    width:100%;
  }
  .winner-panel.hidden{ display:none; }

  .stamp{
    position:absolute; top:-18px; right:calc(50% - 150px);
    color:var(--red-bright);
    border:4px solid var(--red-bright);
    padding:4px 14px;
    font-family:'Rye', serif;
    font-size:20px;
    transform:rotate(-14deg);
    opacity:.9;
    border-radius:6px;
    animation:stampIn .4s ease;
  }
  @keyframes stampIn{
    from{ opacity:0; transform:rotate(-14deg) scale(2.4); }
    to{ opacity:.9; transform:rotate(-14deg) scale(1); }
  }

  .winner-card{
    background:var(--parchment);
    color:var(--ink);
    padding:30px 40px;
    text-align:center;
    border-radius:4px;
    box-shadow:0 14px 30px var(--shadow), inset 0 0 0 1px rgba(0,0,0,.15);
    max-width:360px;
    animation:cardPop .4s ease;
  }
  @keyframes cardPop{
    from{ opacity:0; transform:translateY(14px) scale(.95); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .winner-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:52px; height:52px; margin-bottom:10px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 60%, #8a6b3b 100%);
    font-family:'Courier Prime', monospace; font-weight:700; font-size:16px;
  }
  .winner-card h2{ margin:6px 0 4px; font-size:28px; }
  .winner-card p{ margin:0; color:var(--red); font-weight:700; }

  .winner-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

  .winners-history{
    width:100%; max-width:520px;
    margin-top:10px;
  }
  .winners-history h4{
    color:var(--muted); font-size:13px; letter-spacing:2px; text-transform:uppercase;
    border-bottom:1px dashed rgba(201,164,99,.3); padding-bottom:8px; margin-bottom:10px;
    font-family:'Bitter', serif; font-weight:700;
  }
  .winner-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; margin-bottom:6px;
    background:rgba(236,220,176,.06);
    border-radius:5px; font-size:13px;
  }
  .winner-row .num{ color:var(--gold-bright); font-family:'Courier Prime', monospace; margin-right:8px; }

  /* ---------- TOASTS ---------- */
  #toast-container{
    position:fixed; top:16px; right:16px; z-index:100;
    display:flex; flex-direction:column; gap:10px;
    max-width:320px;
  }
  .toast{
    background:var(--wood-2);
    border:1px solid var(--gold);
    color:var(--parchment);
    padding:12px 16px;
    border-radius:6px;
    font-size:14px;
    box-shadow:0 8px 20px var(--shadow);
    animation:toastIn .25s ease, toastOut .3s ease 2.7s forwards;
  }
  @keyframes toastIn{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }
  @keyframes toastOut{ to{opacity:0; transform:translateX(20px);} }

  @media (max-width:640px){
    .topbar{ flex-direction:column; align-items:flex-start; }
    .toolbar{ flex-direction:column; align-items:flex-start; }
    .actions{ width:100%; }
    .stamp{ right:calc(50% - 90px); font-size:16px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }


  :root{
    --bg-0:#140d09;
    --bg-1:#20140d;
    --wood-1:#3b2416;
    --wood-2:#4a2e1c;
    --leather:#5c3a24;
    --parchment:#ecdcb0;
    --parchment-dark:#dcc593;
    --gold:#c9a463;
    --gold-bright:#e0bb7c;
    --red:#7a2620;
    --red-bright:#9c332b;
    --green:#3f6b3f;
    --green-bright:#5c8f5c;
    --ink:#2a1c12;
    --cream:#f4e8cf;
    --muted:#b79c78;
    --shadow:rgba(0,0,0,.55);
    --radius:6px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(201,164,99,.12), transparent 60%),
      repeating-linear-gradient(115deg, var(--bg-0) 0px, var(--bg-1) 3px, var(--bg-0) 6px),
      var(--bg-0);
    color:var(--cream);
    font-family:'Bitter', serif;
    line-height:1.5;
  }

  h1,h2,h3,.display{ font-family:'Rye', serif; font-weight:400; letter-spacing:.5px; }
  .mono{ font-family:'Courier Prime', monospace; }
  button{ font-family:inherit; cursor:pointer; }
  input, select{ font-family:inherit; }
  :focus-visible{ outline:3px solid var(--gold-bright); outline-offset:2px; }

  /* ---------- TOPBAR ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    padding:14px 24px;
    background:linear-gradient(180deg, var(--wood-2), var(--wood-1));
    border-bottom:4px double var(--gold);
    box-shadow:0 6px 18px var(--shadow);
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-badge{
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, #8a6b3b 100%);
    color:var(--ink); font-size:20px; font-weight:700;
    box-shadow:0 2px 4px var(--shadow), inset 0 0 0 2px rgba(0,0,0,.25);
    flex:none;
  }
  .brand-text h1{ margin:0; font-size:22px; color:var(--gold-bright); text-shadow:2px 2px 0 rgba(0,0,0,.5); }
  .brand-text p{ margin:0; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }

  .tabs{ display:flex; gap:6px; flex-wrap:wrap; }
  .tab-btn{
    background:transparent; border:2px solid var(--gold); color:var(--parchment);
    padding:8px 14px; border-radius:var(--radius); font-size:13px; font-weight:600;
    transition:background .15s, color .15s, transform .1s; white-space:nowrap;
  }
  .tab-btn:hover{ background:rgba(201,164,99,.15); }
  .tab-btn.active{ background:var(--gold); color:var(--ink); box-shadow:0 3px 0 #8a6b3b; }
  .tab-btn.active:hover{ transform:translateY(1px); box-shadow:0 2px 0 #8a6b3b; }

  .tombola-link{
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(180deg, var(--red-bright), var(--red));
    color:var(--cream); text-decoration:none;
    border:2px solid #3a1310; padding:9px 16px; border-radius:30px;
    font-size:13px; font-weight:700; letter-spacing:.5px;
    box-shadow:0 3px 0 #3a1310;
    transition:transform .08s, filter .15s;
  }
  .tombola-link:hover{ filter:brightness(1.08); }
  .tombola-link:active{ transform:translateY(2px); box-shadow:0 1px 0 #3a1310; }

  main{ max-width:1200px; margin:0 auto; padding:26px 20px 90px; }
  .view{ display:none; animation:fadeIn .3s ease; }
  .view.active{ display:block; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  .section-title{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
  .section-title h2{ margin:0; font-size:22px; color:var(--gold-bright); }
  .section-sub{ color:var(--muted); font-size:13px; margin:-10px 0 18px; }

  /* ---------- BUTTONS ---------- */
  .btn{ border-radius:var(--radius); padding:9px 15px; font-size:13px; font-weight:700; border:2px solid transparent; transition:transform .1s, filter .15s; }
  .btn:active{ transform:translateY(1px); }
  .btn:disabled{ opacity:.4; cursor:not-allowed; }
  .btn-primary{ background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:var(--ink); box-shadow:0 3px 0 #7a5f34; }
  .btn-primary:hover:not(:disabled){ filter:brightness(1.06); }
  .btn-outline{ background:transparent; border-color:var(--muted); color:var(--parchment); }
  .btn-outline:hover:not(:disabled){ background:rgba(236,220,176,.08); }
  .modal .btn-outline{ color:var(--ink); border-color:#8a6b3b; }
  .modal .btn-outline:hover:not(:disabled){ background:rgba(42,28,18,.08); }
  .btn-outline-red{ background:transparent; border-color:var(--red-bright); color:#e5a9a3; }
  .btn-outline-red:hover:not(:disabled){ background:rgba(122,38,32,.18); }

  .icon-btn{ background:transparent; border:1px solid rgba(0,0,0,.25); border-radius:5px; padding:5px 8px; font-size:13px; color:var(--ink); }
  .icon-btn:hover{ background:rgba(0,0,0,.08); }
  .icon-btn.danger{ border-color:var(--red-bright); color:var(--red-bright); }
  .icon-btn.danger:hover{ background:rgba(122,38,32,.1); }

  /* ---------- DASHBOARD ---------- */
  .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px; margin-bottom:26px; }
  .stat-card{ background:var(--parchment); color:var(--ink); border-radius:8px; padding:16px 14px; text-align:center; box-shadow:0 8px 16px var(--shadow), inset 0 0 0 1px rgba(0,0,0,.1); }
  .stat-card .label{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#7a5f34; margin-bottom:6px; font-weight:700; }
  .stat-card .value{ font-family:'Courier Prime', monospace; font-size:24px; font-weight:700; }
  .stat-card.accent{ background:linear-gradient(160deg, var(--gold-bright), var(--gold)); }
  .stat-card.accent .label{ color:#5c4425; }

  .ledger{ background:var(--parchment); color:var(--ink); border-radius:8px; padding:6px 18px; box-shadow:0 8px 16px var(--shadow); }
  .ledger-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.1); font-size:14px; }
  .ledger-row:last-child{ border-bottom:none; }
  .ledger-row .l-label{ font-weight:600; }
  .ledger-row.total{ font-size:16px; font-weight:700; }
  .ledger-row.total .l-label{ font-family:'Rye', serif; font-weight:400; font-size:17px; }

  .money{ font-family:'Courier Prime', monospace; font-weight:700; }
  .money-pos{ color:var(--green); }
  .money-neg{ color:var(--red-bright); }

  /* ---------- TOOLBAR ---------- */
  .toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }

  /* ---------- TABLES ---------- */
  .table-wrap{ overflow-x:auto; border-radius:8px; box-shadow:0 8px 16px var(--shadow); margin-bottom:26px; }
  table{ width:100%; border-collapse:collapse; background:var(--parchment); color:var(--ink); font-size:13px; min-width:640px; }
  thead th{ background:var(--wood-2); color:var(--parchment); text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
  tbody td{ padding:9px 12px; border-bottom:1px solid #e8dcc0; white-space:nowrap; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:rgba(122,38,32,.05); }
  .table-actions{ display:flex; gap:6px; }
  .table-empty{ padding:24px; text-align:center; color:#8a7455; font-style:italic; }

  input[type="checkbox"].tbl-check{ width:18px; height:18px; accent-color:var(--red); }

  /* ---------- MODALS ---------- */
  .modal-overlay{ position:fixed; inset:0; z-index:50; background:rgba(10,6,3,.75); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
  .modal-overlay.hidden{ display:none; }
  .modal{ background:var(--parchment); color:var(--ink); width:100%; max-width:420px; border-radius:6px; padding:26px; box-shadow:0 20px 50px rgba(0,0,0,.6); border:2px solid var(--gold); max-height:90vh; overflow-y:auto; }
  .modal.small{ max-width:340px; text-align:center; }
  .modal h3{ margin:0 0 18px; font-size:20px; }
  .modal label{ display:block; margin-bottom:14px; font-size:13px; font-weight:600; color:#4a3520; }
  .modal input, .modal select{ width:100%; margin-top:6px; padding:9px 12px; border:1px solid #b79c78; border-radius:5px; font-size:14px; background:#fffaf0; color:var(--ink); }
  .modal .checkbox-row{ display:flex; align-items:center; gap:8px; }
  .modal .checkbox-row input{ width:auto; margin:0; }
  .field-error{ color:var(--red-bright); font-size:12px; margin-top:4px; display:none; }
  .field-error.show{ display:block; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
  .modal.small .modal-actions{ justify-content:center; }

  .conso-label{ font-size:13px; font-weight:600; color:#4a3520; margin-bottom:6px; }
  .conso-field{ border:1px solid #b79c78; border-radius:5px; background:#fffaf0; padding:8px; }
  .conso-chips{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
  .conso-chips:empty{ display:none; margin:0; }
  .conso-chip{ display:flex; align-items:center; gap:8px; background:var(--red); color:var(--cream); padding:6px 8px 6px 12px; border-radius:8px; font-size:13px; }
  .conso-chip .chip-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .conso-chip .chip-price{ font-size:11px; opacity:.85; font-family:'Courier Prime', monospace; white-space:nowrap; }
  .qty-stepper{ display:flex; align-items:center; gap:0; flex:none; }
  .qty-stepper button{ background:rgba(255,255,255,.18); border:none; color:var(--cream); width:20px; height:20px; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; }
  .qty-stepper button:first-child{ border-radius:5px 0 0 5px; }
  .qty-stepper button:last-child{ border-radius:0 5px 5px 0; }
  .qty-stepper button:hover{ background:rgba(255,255,255,.35); }
  .qty-stepper .qty-value{ width:22px; text-align:center; font-size:12px; font-weight:700; font-family:'Courier Prime', monospace; }
  .conso-chip button.chip-remove{ background:rgba(255,255,255,.18); border:none; color:var(--cream); width:18px; height:18px; border-radius:50%; font-size:12px; line-height:1; flex:none; display:flex; align-items:center; justify-content:center; padding:0; }
  .conso-chip button.chip-remove:hover{ background:rgba(255,255,255,.35); }
  #consoSearch{ margin-top:0 !important; width:100%; padding:9px 12px; border:1px solid #b79c78; border-radius:5px; font-size:14px; background:#fffaf0; color:var(--ink); }
  .conso-list{ margin-top:8px; max-height:180px; overflow-y:auto; border:1px solid #d8c6a0; border-radius:5px; background:#fffdf6; }
  .conso-group-title{ position:sticky; top:0; background:#eadfc0; color:#5c4425; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 10px; }
  .conso-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; font-size:13px; cursor:pointer; border-bottom:1px solid #f0e6cc; margin:0; }
  .conso-item:hover{ background:#f6ecd2; }
  .conso-item-left{ display:flex; align-items:center; gap:8px; min-width:0; }
  .conso-item-left input{ width:auto; margin:0; flex:none; }
  .conso-price{ color:#8a6b3b; font-size:12px; font-family:'Courier Prime', monospace; flex:none; white-space:nowrap; }
  .conso-total{ margin-top:8px; text-align:right; font-size:13px; font-weight:700; color:var(--red); }

  .info-note{ background:rgba(201,164,99,.1); border:1px dashed rgba(201,164,99,.4); border-radius:8px; padding:12px 16px; font-size:13px; color:var(--muted); margin-bottom:18px; }
  .info-note strong{ color:var(--gold-bright); }

  .empty-state{ text-align:center; padding:50px 20px; color:var(--muted); border:2px dashed rgba(201,164,99,.3); border-radius:10px; background:rgba(0,0,0,.15); }
  .empty-state .icon{ font-size:36px; display:block; margin-bottom:10px; }

  #toast-container{ position:fixed; top:16px; right:16px; z-index:100; display:flex; flex-direction:column; gap:10px; max-width:320px; }
  .toast{ background:var(--wood-2); border:1px solid var(--gold); color:var(--parchment); padding:12px 16px; border-radius:6px; font-size:14px; box-shadow:0 8px 20px var(--shadow); animation:toastIn .25s ease, toastOut .3s ease 2.7s forwards; }
  @keyframes toastIn{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }
  @keyframes toastOut{ to{opacity:0; transform:translateX(20px);} }

  @media (max-width:640px){
    .topbar{ flex-direction:column; align-items:flex-start; }
    .toolbar{ flex-direction:column; align-items:flex-start; }
  }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }


  /* ---------- POINTEUSE ---------- */
  .pointeuse-card{
    display:flex; flex-direction:column; align-items:center; gap:16px;
    background:linear-gradient(180deg, var(--wood-2), var(--wood-1));
    border-radius:12px; padding:32px 20px;
    box-shadow:0 10px 24px var(--shadow), inset 0 0 0 2px var(--gold);
  }
  .pointeuse-status{
    font-family:'Courier Prime', monospace; font-size:14px; color:var(--parchment);
    letter-spacing:.5px;
  }
  .pointer-btn{ min-width:260px; }
  .pointer-btn.en-service{
    background:linear-gradient(180deg, var(--green-bright), var(--green));
    border-color:#1f3a1f; box-shadow:0 5px 0 #1f3a1f, 0 10px 20px var(--shadow);
  }

  .site-topbar{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    padding:14px 24px;
    background:linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-bottom:4px double var(--gold);
    box-shadow:0 6px 18px var(--shadow);
  }
  .site-brand{ display:flex; align-items:center; gap:10px; }
  .site-brand .badge{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, #8a6b3b 100%);
    color:var(--ink); font-size:18px; font-weight:700;
    box-shadow:0 2px 4px var(--shadow), inset 0 0 0 2px rgba(0,0,0,.25);
  }
  .site-brand h1{ margin:0; font-size:20px; color:var(--gold-bright); text-shadow:2px 2px 0 rgba(0,0,0,.5); }
  .app-nav{ display:flex; gap:8px; flex-wrap:wrap; }
  .app-nav-btn{
    background:transparent; border:2px solid var(--gold); color:var(--parchment);
    padding:9px 16px; border-radius:24px; font-size:13px; font-weight:700;
    transition:background .15s, color .15s, transform .1s;
  }
  .app-nav-btn:hover{ background:rgba(201,164,99,.15); }
  .app-nav-btn.active{ background:var(--gold); color:var(--ink); box-shadow:0 3px 0 #8a6b3b; }

  .app-view{ display:none; }
  .app-view.active{ display:block; }
  /* La nav globale est déjà collante : les sous-nav de chaque appli restent en flux normal */
  .app-view .topbar{ position:relative; top:auto; }

  /* ---------- PAGE D'ACCUEIL ---------- */
  .home-hero{ text-align:center; padding:56px 20px 30px; }
  .home-hero .home-badge{ font-size:40px; }
  .home-hero h1{ font-size:38px; color:var(--gold-bright); margin:10px 0; text-shadow:3px 3px 0 rgba(0,0,0,.5); }
  .home-hero p{ color:var(--muted); font-size:15px; margin:0; }
  .home-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px;
    max-width:900px; margin:0 auto; padding:10px 20px 70px;
  }
  .home-card{
    background:var(--parchment); color:var(--ink); border:none; border-radius:12px;
    padding:30px 26px; text-align:left; cursor:pointer; font-family:inherit;
    box-shadow:0 10px 24px var(--shadow); transition:transform .15s, box-shadow .15s;
  }
  .home-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px var(--shadow); }
  .home-card:active{ transform:translateY(-1px); }
  .home-card-icon{ font-size:36px; margin-bottom:10px; }
  .home-card h2{ margin:0 0 8px; font-size:24px; }
  .home-card p{ margin:0 0 16px; font-size:14px; color:#5c4425; }
  .home-card-stat{ font-family:'Courier Prime', monospace; font-weight:700; font-size:14px; color:var(--red); margin-bottom:16px; }
  .home-card-cta{
    font-weight:700; color:var(--gold-bright); background:var(--wood-2);
    padding:8px 14px; border-radius:20px; display:inline-block; font-size:13px;
  }
  @media (max-width:640px){
    .site-topbar{ flex-direction:column; align-items:flex-start; }
  }


/* ===== PAGES MULTI-FICHIERS ===== */
main{ max-width:1200px; margin:0 auto; padding:26px 20px 90px; }
body{ padding-top:0; }

.site-topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:12px 20px;
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-bottom:4px double var(--gold);
  box-shadow:0 6px 18px var(--shadow);
}
.site-brand{ display:flex; align-items:center; gap:10px; }
.site-brand .badge{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, #8a6b3b 100%);
  color:var(--ink); font-size:17px; font-weight:700;
  box-shadow:0 2px 4px var(--shadow), inset 0 0 0 2px rgba(0,0,0,.25);
}
.site-brand h1{ margin:0; font-size:18px; color:var(--gold-bright); text-shadow:2px 2px 0 rgba(0,0,0,.5); font-family:'Rye',serif; }
.app-nav{ display:flex; gap:6px; flex-wrap:wrap; }
.app-nav-btn{
  background:transparent; border:2px solid var(--gold); color:var(--parchment);
  padding:7px 12px; border-radius:20px; font-size:12px; font-weight:700;
  text-decoration:none; transition:background .15s, color .15s; white-space:nowrap;
  font-family:'Bitter',serif;
}
.app-nav-btn:hover{ background:rgba(201,164,99,.15); }
.app-nav-btn.active{ background:var(--gold); color:var(--ink); box-shadow:0 3px 0 #8a6b3b; }

.home-hero{ text-align:center; padding:50px 20px 26px; }
.home-badge{ font-size:38px; }
.home-hero h1{ font-size:36px; color:var(--gold-bright); margin:10px 0; text-shadow:3px 3px 0 rgba(0,0,0,.5); font-family:'Rye',serif; }
.home-hero p{ color:var(--muted); font-size:15px; margin:0; }
.home-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px;
  max-width:900px; margin:0 auto; padding:10px 20px 70px;
}
.home-card{
  background:var(--parchment); color:var(--ink); border:none; border-radius:12px;
  padding:28px 24px; text-align:left; cursor:pointer; font-family:'Bitter',serif;
  box-shadow:0 10px 24px var(--shadow); transition:transform .15s, box-shadow .15s;
  display:block; text-decoration:none;
}
.home-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px var(--shadow); }
.home-card-icon{ font-size:34px; margin-bottom:10px; }
.home-card h2{ margin:0 0 8px; font-size:22px; font-family:'Rye',serif; font-weight:400; }
.home-card p{ margin:0 0 14px; font-size:14px; color:#5c4425; }
.home-card-stat{ font-family:'Courier Prime',monospace; font-weight:700; font-size:13px; color:var(--red); margin-bottom:14px; }
.home-card-cta{
  font-weight:700; color:var(--gold-bright); background:var(--wood-2);
  padding:7px 13px; border-radius:18px; display:inline-block; font-size:13px;
}
@media (max-width:700px){
  .site-topbar{ flex-direction:column; align-items:flex-start; }
  .app-nav{ gap:4px; }
  .app-nav-btn{ padding:6px 9px; font-size:11px; }
}

/* ===== AMELIORATIONS DESIGN ===== */

/* Variables CSS pour les thèmes */
:root {
  --bg-0:#140d09; --bg-1:#20140d; --wood-1:#3b2416; --wood-2:#4a2e1c;
  --gold:#c9a463; --gold-bright:#e0bb7c; --red:#7a2620; --red-bright:#9c332b;
  --green:#3f6b3f; --green-bright:#5c8f5c; --parchment:#ecdcb0; --ink:#2a1c12;
  --cream:#f4e8cf; --muted:#b79c78; --accent:#c9a463;
  --shadow:rgba(0,0,0,.5); --green-bright:#5c8f5c;
}

/* Topbar améliorée */
.site-topbar{
  background:linear-gradient(180deg,var(--wood-1),var(--bg-1));
  border-bottom:3px double var(--gold);
  box-shadow:0 4px 20px var(--shadow);
}

/* Boutons améliorés */
.btn-primary{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  box-shadow:0 4px 0 #7a5f34,0 6px 12px rgba(0,0,0,.3);
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:active{ transform:translateY(3px); box-shadow:0 1px 0 #7a5f34; }
.btn-outline-red{
  background:transparent; border:2px solid var(--red-bright);
  color:var(--red-bright); box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.btn-outline-red:hover{ background:rgba(122,38,32,.15); }

/* Cartes stat améliorées */
.stat-card{
  box-shadow:0 8px 24px var(--shadow);
  border-left:4px solid var(--gold);
  transition:transform .15s,box-shadow .15s;
}
.stat-card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px var(--shadow); }
.stat-card.accent{ border-left-color:var(--red-bright); background:rgba(201,164,99,.06); }

/* Tables améliorées */
.table-wrap{ border-radius:10px; overflow:hidden; box-shadow:0 8px 24px var(--shadow); }
table { border-collapse:separate; border-spacing:0; }
thead tr{ background:linear-gradient(180deg,var(--wood-2),var(--wood-1)); }
tbody tr:nth-child(even) td{ background:rgba(255,255,255,.02); }

/* Toast amélioré */
.toast{
  background:linear-gradient(135deg,var(--wood-2),var(--wood-1));
  border:1px solid var(--gold);
  border-left:4px solid var(--gold-bright);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  border-radius:8px; padding:12px 18px;
  font-size:14px; color:var(--cream);
  animation:toast-in .3s ease;
}
#toast-container{ position:fixed; bottom:24px; right:24px; z-index:1000; display:flex; flex-direction:column; gap:8px; }
@keyframes toast-in{ from{transform:translateX(120%);opacity:0;} to{transform:translateX(0);opacity:1;} }

/* Modal améliorée */
.modal-overlay{ backdrop-filter:blur(4px); }
.modal{
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  border:1px solid rgba(201,164,99,.3);
  border-top:3px solid var(--gold);
}

/* Section title améliorée */
.section-title h2{ font-family:'Rye',serif; font-size:22px; color:var(--gold-bright); }
.section-sub{ color:var(--muted); font-size:13px; font-style:italic; margin:-12px 0 18px; }

/* Ledger amélioré */
.ledger{ background:var(--parchment); border-radius:10px; overflow:hidden; box-shadow:0 8px 24px var(--shadow); color:var(--ink); }
.ledger-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 18px; border-bottom:1px solid rgba(0,0,0,.06); }
.ledger-row:last-child{ border-bottom:none; }
.ledger-row.total{ background:rgba(201,164,99,.12); font-weight:700; font-size:15px; }
.l-label{ font-size:13px; }
.money{ font-family:'Courier Prime',monospace; font-weight:700; }

/* Info note */
.info-note{
  background:rgba(201,164,99,.1); border:1px solid rgba(201,164,99,.3);
  border-left:4px solid var(--gold); padding:10px 16px; border-radius:6px;
  font-size:13px; color:var(--muted); margin-bottom:16px;
}

/* Scrollbar custom */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:var(--bg-0); }
::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-bright); }

/* Sélecteur unifié */
select{
  padding:8px 12px; border:1px solid var(--gold); border-radius:6px;
  background:var(--wood-1); color:var(--cream); font-family:inherit; cursor:pointer;
}

/* Mode nuit dans la nav */
.app-nav-btn{ transition:background .15s,color .15s,transform .08s; }
.app-nav-btn:active{ transform:scale(.96); }

/* Bouton de déconnexion (topbar) */
.logout-btn{
  background:rgba(156,51,43,.12); border:1px solid var(--red-bright);
  color:var(--red-bright); padding:6px 13px; border-radius:10px;
  font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:5px; transition:background .15s, color .15s, transform .08s;
}
.logout-btn:hover{ background:var(--red-bright); color:#fff; }
.logout-btn:active{ transform:scale(.96); }

/* Bandeau d'annonce (Patron/Co-patron), défile en haut de toutes les pages */
.announcement-banner{
  position:relative; overflow:hidden; white-space:nowrap;
  background:linear-gradient(90deg,var(--red),var(--red-bright));
  border-bottom:2px solid var(--gold);
  padding:8px 0;
}
.announcement-banner .announcement-track{
  display:inline-block; padding-left:100%;
  color:#fff; font-weight:700; font-size:13px; letter-spacing:.3px;
  animation-name:announcement-scroll; animation-timing-function:linear; animation-iteration-count:infinite;
}
/* Changer animation-duration au survol ferait sauter le texte (la position se recalcule en %
   de la nouvelle durée) : on met en pause à la place, ce qui permet de le lire sans glitch. */
.announcement-banner:hover .announcement-track{ animation-play-state:paused; }
@keyframes announcement-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}

/* Barre d'outils de mise en forme des messages (gras/italique/souligné/police/émoji/gif) */
.msg-toolbar{ position:relative; display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.msg-toolbar button[data-fmt], .msg-toolbar .msg-emoji-btn, .msg-toolbar .msg-gif-btn{
  background:rgba(201,164,99,.15); border:1px solid var(--gold); color:inherit;
  border-radius:5px; padding:4px 9px; font-size:12px; cursor:pointer; font-family:inherit;
}
.msg-toolbar button[data-fmt]:hover, .msg-toolbar .msg-emoji-btn:hover, .msg-toolbar .msg-gif-btn:hover{ background:rgba(201,164,99,.3); }
.msg-toolbar select.msg-font-select{ padding:4px 8px; font-size:12px; border-radius:5px; }
.msg-emoji-panel, .msg-gif-panel{
  position:absolute; top:100%; left:0; z-index:20; margin-top:4px;
  background:var(--parchment); color:var(--ink); border:1px solid #b79c78; border-radius:8px;
  padding:8px; box-shadow:0 8px 20px var(--shadow);
  max-height:min(300px, 60vh); overflow-y:auto;
}
/* Variante qui ouvre vers le HAUT : pour une barre d'outils collée en bas d'une fenêtre à hauteur
   fixe (messages.html) — un panneau qui s'ouvrirait vers le bas n'aurait nulle part où aller et se
   ferait couper par le overflow:hidden du cadre. */
.msg-toolbar-up .msg-emoji-panel, .msg-toolbar-up .msg-gif-panel{ top:auto; bottom:100%; margin-top:0; margin-bottom:4px; }
.msg-emoji-panel.hidden, .msg-gif-panel.hidden{ display:none; }
.msg-emoji-panel{ display:grid; grid-template-columns:repeat(8,1fr); gap:4px; width:240px; }
.msg-emoji-opt{ cursor:pointer; text-align:center; padding:4px; border-radius:4px; font-size:16px; }
.msg-emoji-opt:hover{ background:rgba(0,0,0,.08); }
.msg-gif-panel{ width:320px; }
.msg-gif-panel .msg-gif-search{ width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid #b79c78; border-radius:5px; font-size:12px; background:#fffaf0; color:var(--ink); }
.msg-gif-results{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; max-height:260px; overflow-y:auto; }
.msg-gif-result{ width:100%; height:70px; object-fit:cover; border-radius:6px; cursor:pointer; display:block; }
.msg-gif-result:hover{ outline:2px solid var(--gold); }
.msg-gif-status{ grid-column:1/-1; font-size:12px; color:#8a7455; font-style:italic; text-align:center; padding:10px 0; }
.msg-deleted{ font-style:italic; opacity:.6; }