:root{ /* the invite palette — see js/admin-content.js's ADMIN_THEME */
    --sage:#496E5E; --sage-dark:#22352D; --ivory:#f8f4e9; --paper:#fbf8f2;
    --ink:#2a1e0a; --muted:#5a4a2a; --line:#e2d8bd; --gold:#c8a84f;
  }
  *{box-sizing:border-box;}
  body{margin:0; font-family:'Cormorant Garamond',Georgia,serif; background:var(--ivory); color:var(--ink);}
  /* typed fields stay in a plain, small-size-legible face — this is where
     prices and names get entered, not read; buttons and headings keep the
     display serif */
  input, select, textarea{ font-family:-apple-system,'Segoe UI',Arial,sans-serif; }
  header{ text-align:center; padding:40px 20px 24px; border-bottom:1px solid var(--line); }
  header h1{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:2rem; margin:0 0 6px; font-weight:400; color:var(--sage-dark); }
  header a{ color:var(--muted); font-size:0.85rem; }

  .bar{
    max-width:1000px; margin:20px auto; padding:0 20px; display:flex; gap:12px;
    flex-wrap:wrap; align-items:center; justify-content:space-between;
  }
  .bar label{ font-size:0.85rem; color:var(--muted); }
  .bar input[type=number]{ width:80px; padding:4px 6px; }
  .rate-box{ display:flex; align-items:center; gap:6px; font-size:0.85rem; }
  .actions-mini button{
    background:none; border:1px solid var(--line); color:var(--sage-dark);
    padding:6px 12px; border-radius:20px; cursor:pointer; font-size:0.85rem;
  }
  #addBtn{
    display:block; margin:0 auto 30px; background:var(--sage); color:#fff; border:none;
    padding:12px 28px; border-radius:30px; font-size:1rem; cursor:pointer;
  }
  #addBtn:hover{ background:var(--sage-dark); }

  .grid{
    max-width:1100px; margin:0 auto; padding:0 20px 60px;
    display:flex; flex-direction:column; gap:26px;
  }

  /* ---- sections ---- */
  .group{ border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.4); }
  .group-head{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:12px 16px; border-bottom:1px solid var(--line);
  }
  .group-head h2{
    margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.15rem; font-weight:600; color:var(--sage-dark);
    flex:1; min-width:120px;
  }
  .group.loose .group-head h2{ color:var(--muted); font-style:italic; font-weight:400; }
  .group-head .count{ font-size:0.78rem; color:var(--muted); }
  .group-head button{
    background:none; border:1px solid var(--line); color:var(--muted); border-radius:6px;
    padding:3px 9px; font-size:0.75rem; cursor:pointer; line-height:1.6;
  }
  .group-head button:hover:not(:disabled){ border-color:var(--sage); color:var(--sage-dark); }
  .group-head button:disabled{ opacity:.35; cursor:default; }
  .drop{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px;
    padding:18px 16px; min-height:120px; border-radius:0 0 10px 10px;
  }
  .drop.over{ background:color-mix(in srgb, var(--gold) 16%, var(--paper)); outline:2px dashed var(--sage); outline-offset:-8px; }
  .drop .hint{
    grid-column:1/-1; text-align:center; color:var(--muted); font-size:0.85rem;
    font-style:italic; align-self:center; padding:14px 0;
  }
  .card[draggable=true]{ cursor:grab; }
  .card.dragging{ opacity:.4; }
  .card.before{ box-shadow:-4px 0 0 var(--sage), 0 2px 10px rgba(34,53,45,0.08); }
  .drag-handle{
    position:absolute; top:8px; left:8px; z-index:1; background:rgba(255,255,255,.9);
    border-radius:5px; padding:2px 7px; font-size:0.8rem; color:var(--muted);
    border:1px solid var(--line); letter-spacing:1px; line-height:1.4;
  }
  #addSectionBtn{
    display:block; margin:0 auto 26px; background:none; border:1px solid var(--line);
    color:var(--sage-dark); padding:9px 20px; border-radius:22px; cursor:pointer;
    font-size:0.88rem;
  }
  #addSectionBtn:hover{ border-color:var(--sage); }
  .admin-total{
    max-width:1100px; margin:0 auto 6px; padding:0 20px; text-align:center;
    font-size:0.95rem; color:var(--sage-dark);
  }
  .admin-total .n{ font-weight:bold; }
  .dnd-tip{
    max-width:1100px; margin:0 auto 18px; padding:0 20px; text-align:center;
    font-size:0.8rem; color:var(--muted);
  }
  .card{
    background:var(--paper); border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(34,53,45,0.08);
    display:flex; flex-direction:column; position:relative;
  }
  .card img, .card .noimg{ width:100%; height:180px; object-fit:cover; background:var(--line); display:block; }
  .card .noimg{ display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:0.9rem; }
  .card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .card-body h3{ margin:0; font-size:1.05rem; font-weight:600; }
  .price{ color:var(--gold); font-weight:bold; font-size:0.95rem; }
  .note{ font-size:0.82rem; color:var(--muted); }
  .row{ display:flex; gap:8px; margin-top:auto; padding-top:8px; flex-wrap:wrap; }
  .row button{
    flex:1; border:none; padding:7px 8px; border-radius:6px; cursor:pointer; font-size:0.8rem;
  }
  .btn-edit{ background:var(--line); color:var(--ink); }
  .btn-del{ background:#f2e2e2; color:#a04a4a; } /* red stays red: a destructive action, not a brand colour */
  .empty{ text-align:center; color:var(--muted); padding:60px 20px; font-style:italic; }

  dialog{ border:none; border-radius:12px; padding:0; width:min(480px,92vw); }
  dialog::backdrop{ background:rgba(34,53,45,0.35); }
  .dialog-body{ padding:26px 26px 20px; background:var(--paper); }
  .dialog-body h2{ margin-top:0; font-family:'Cormorant Garamond',Georgia,serif; color:var(--sage-dark); font-weight:400; font-style:italic; }
  .dialog-body label{ display:block; font-size:0.82rem; color:var(--muted); margin:12px 0 4px; }
  .dialog-body input, .dialog-body textarea, .dialog-body select{
    width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-size:0.95rem;
  }
  .price-row{ display:flex; gap:8px; }
  .price-row input{ flex:2; } .price-row select{ flex:1; }
  .dialog-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }
  .dialog-actions button{ padding:9px 20px; border-radius:20px; border:none; cursor:pointer; }
  .btn-cancel{ background:var(--line); color:var(--ink); }
  .btn-save{ background:var(--sage); color:#fff; }
  #imgPreview{ width:100%; height:140px; object-fit:cover; border-radius:6px; margin-top:8px; display:none; background:var(--line); }

  /* ---- login screen ---- */
  [hidden]{ display:none !important; }        /* #login is a flex box, so hidden needs a win */
  #login{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--ivory); }
  .login-card{
    width:min(380px,100%); background:var(--paper); border-radius:14px; padding:32px 28px;
    box-shadow:0 6px 26px rgba(34,53,45,.14);
  }
  .login-card h1{ margin:0 0 4px; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.7rem; font-weight:400; font-style:italic; color:var(--sage-dark); }
  .login-sub{ margin:0 0 22px; font-size:0.88rem; color:var(--muted); }
  .login-card label{ display:block; font-size:0.82rem; color:var(--muted); margin-bottom:6px; }
  .login-card input{
    width:100%; padding:12px; border:1px solid var(--line); border-radius:8px;
    font-size:1rem;   /* 1rem: anything smaller and iOS zooms in */
  }
  .login-card input:focus{ outline:2px solid var(--sage); outline-offset:1px; border-color:var(--sage); }
  .login-error{ margin:10px 0 0; font-size:0.85rem; color:#a04a4a; }
  #loginBtn{
    width:100%; margin-top:18px; background:var(--sage); color:#fff; border:none;
    padding:13px; border-radius:26px; font-size:1rem; cursor:pointer;
  }
  #loginBtn:hover{ background:var(--sage-dark); }
  #loginBtn:disabled{ opacity:0.6; cursor:default; }
  .login-back{ display:block; margin-top:16px; text-align:center; font-size:0.82rem; color:var(--muted); }
  #signOutBtn{
    margin-left:14px; background:none; border:1px solid var(--line); border-radius:20px;
    padding:5px 14px; color:var(--muted); cursor:pointer; font-size:0.85rem;
  }