.evvp-app {
  --wine: #5b1a28;
  --gold: #c08829;
  --parchment: #f3ead9;
  --vine: #5c7a52;
  --ink: #2b2420;
  --paper: #fbf7ee;
  --line: rgba(43, 36, 32, 0.16);
  max-width: 1220px;
  margin: 24px auto 60px;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.evvp-app *, .evvp-app *::before, .evvp-app *::after { box-sizing: border-box; }
.evvp-header { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); padding: 0 0 18px; margin-bottom: 24px; }
.evvp-header h1 { color: var(--ink); font-family: Georgia, serif; font-size: clamp(28px, 4vw, 42px); line-height: 1.05; margin: 0; }
.evvp-header h1 em { color: var(--wine); font-weight: 500; }
.evvp-header p { margin: 8px 0 0; opacity: .65; }
.evvp-status { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 12px; }
.evvp-status span { background: var(--vine); border-radius: 50%; height: 8px; width: 8px; }
.evvp-panel { background: var(--parchment); border: 1px solid var(--line); border-radius: 5px; margin-bottom: 22px; padding: 22px 24px; }
.evvp-panel-title small { color: var(--wine); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.evvp-panel-title h2 { color: var(--ink); font-family: Georgia, serif; font-size: 21px; margin: 3px 0 15px; }
.evvp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.evvp-grow { flex: 1; min-width: min(100%, 300px); }
.evvp-field { display: flex; flex-direction: column; gap: 5px; }
.evvp-field > span, .evvp-config-row label { font-size: 11px; font-weight: 600; letter-spacing: .05em; opacity: .68; text-transform: uppercase; }
.evvp-field input, .evvp-field select, .evvp-config-row input { background: var(--paper); border: 1px solid var(--ink); border-radius: 3px; color: var(--ink); font: inherit; font-size: 14px; min-height: 42px; padding: 8px 11px; width: 100%; }
.evvp-field input:focus, .evvp-field select:focus, .evvp-config-row input:focus { outline: 3px solid rgba(192, 136, 41, .35); outline-offset: 1px; }
.evvp-form-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.evvp-button { background: var(--ink); border: 1px solid var(--ink); border-radius: 3px; color: var(--paper) !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; font-weight: 650; min-height: 40px; padding: 8px 16px; text-decoration: none !important; }
.evvp-button:hover { opacity: .86; }
.evvp-button:disabled { cursor: wait; opacity: .5; }
.evvp-secondary { background: transparent; color: var(--ink) !important; }
.evvp-danger { background: #8d2331; border-color: #8d2331; }
.evvp-notice { border-left: 4px solid var(--vine); background: #eef5eb; margin: 0 0 18px; padding: 12px 15px; }
.evvp-notice.error { background: #f9e7e9; border-color: #a22a39; }
.evvp-help { font-size: 12px; margin: 6px 0; opacity: .56; }
.evvp-search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; }
.evvp-search-result { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); display: flex; flex-direction: column; overflow: hidden; text-align: left; }
.evvp-search-result.arrived { border-color: rgba(92, 122, 82, .65); }
.evvp-search-result:hover { border-color: var(--gold); }
.evvp-search-main { background: transparent; border: 0; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; padding: 12px 14px 9px; text-align: left; width: 100%; }
.evvp-search-main strong { font-size: 14px; }
.evvp-search-main small { font-size: 11px; margin-top: 2px; opacity: .62; overflow-wrap: anywhere; }
.evvp-search-main > span { color: var(--wine); font-family: Georgia, serif; font-size: 18px; margin-top: 7px; }
.evvp-search-actions { align-items: center; background: rgba(43, 36, 32, .035); display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 12px; }
.evvp-suggestion { background: var(--paper); border-left: 4px solid var(--gold); margin-top: 16px; padding: 15px 17px; }
.evvp-suggestion > p { font-size: 11px; margin: 0; opacity: .58; text-transform: uppercase; }
.evvp-suggestion > h3 { color: var(--wine); font-family: Georgia, serif; font-size: 25px; margin: 2px 0; }
.evvp-suggestion > small { display: block; margin-bottom: 13px; opacity: .65; }
.evvp-alternatives { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.evvp-alternatives > span { flex-basis: 100%; font-size: 11px; opacity: .55; }
.evvp-alt { background: transparent; border: 1px dashed var(--ink); border-radius: 999px; color: var(--ink); cursor: pointer; font-size: 11px; padding: 6px 10px; }
.evvp-tables-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: end; }
.evvp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.evvp-table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 15px; }
.evvp-table-card { background: var(--paper); border: 1px solid var(--ink); border-radius: 5px; overflow: hidden; padding: 16px; transition: outline .15s; }
.evvp-table-card.full { opacity: .58; }
.evvp-table-card.highlight { outline: 5px solid var(--gold); outline-offset: 3px; }
.evvp-table-name { align-items: baseline; display: flex; justify-content: space-between; gap: 10px; }
.evvp-table-name h3 { color: var(--ink); font-family: Georgia, serif; font-size: 18px; margin: 0; }
.evvp-table-name span { font-size: 12px; opacity: .56; }
.evvp-grapes { display: flex; flex-wrap: wrap; gap: 6px; min-height: 18px; margin: 12px 0; }
.evvp-grape { border-radius: 50%; display: inline-block; height: 16px; width: 16px; }
.evvp-grape.empty { background: var(--line); }
.evvp-grape.pending { opacity: .42; }
.evvp-grape.arrived { box-shadow: 0 0 0 2px rgba(92, 122, 82, .22); }
.evvp-people { border-top: 1px dashed var(--line); padding-top: 8px; }
.evvp-person-row { align-items: flex-start; border-bottom: 1px solid rgba(43, 36, 32, .06); display: flex; gap: 8px; justify-content: space-between; padding: 7px 0; }
.evvp-person-row:last-child { border-bottom: 0; }
.evvp-person-row.pending { opacity: .82; }
.evvp-person-data { min-width: 0; }
.evvp-person-title { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.evvp-person-row strong, .evvp-person-row small { display: block; }
.evvp-person-row strong { font-size: 12px; }
.evvp-person-row small { font-size: 10.5px; margin-top: 1px; opacity: .56; overflow-wrap: anywhere; }
.evvp-person-actions { align-items: flex-end; display: flex; flex-direction: column; flex-shrink: 0; gap: 3px; }
.evvp-attendance-badge { border-radius: 999px; display: inline-flex; font-size: 9px; font-weight: 750; letter-spacing: .04em; padding: 3px 7px; text-transform: uppercase; }
.evvp-attendance-badge.pending { background: #efe2c9; color: #6a4b18; }
.evvp-attendance-badge.arrived { background: #dfeadb; color: #355331; }
.evvp-attendance-toggle, .evvp-edit, .evvp-remove { background: none; border: 0; color: var(--wine); cursor: pointer; font-size: 10px; padding: 2px; }
.evvp-attendance-toggle { font-weight: 700; }
.evvp-attendance-toggle.arrived { color: #52614d; font-weight: 500; }
.evvp-attendance-toggle:hover, .evvp-edit:hover, .evvp-remove:hover { text-decoration: underline; }
.evvp-empty-table { font-size: 12px; font-style: italic; margin: 3px 0; opacity: .45; }
.evvp-config { background: #fff; border: 1px solid var(--line); margin-top: 22px; padding: 14px; }
.evvp-config summary { color: var(--wine); cursor: pointer; font-weight: 650; }
.evvp-config-row { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.evvp-config-row label { display: flex; flex-direction: column; gap: 5px; }
.evvp-config-row input { width: 120px; }
.evvp-access-message { background: #f9e7e9; border-left: 4px solid #8d2331; padding: 14px; }
.evvp-modal[hidden] { display: none; }
.evvp-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 100000; }
.evvp-modal-backdrop { background: rgba(25, 18, 17, .72); inset: 0; position: absolute; }
.evvp-modal-dialog { background: var(--paper); border-radius: 6px; box-shadow: 0 24px 80px rgba(0, 0, 0, .35); max-height: calc(100vh - 40px); max-width: 760px; overflow: auto; padding: 22px; position: relative; width: 100%; z-index: 1; }
.evvp-modal-heading { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; }
.evvp-modal-heading small { color: var(--wine); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.evvp-modal-heading h2 { font-family: Georgia, serif; font-size: 23px; margin: 2px 0 0; }
.evvp-modal-close { background: none; border: 0; color: var(--ink); cursor: pointer; font-size: 28px; line-height: 1; }
.evvp-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; }
.evvp-edit-grid .evvp-field:last-child { grid-column: 1 / -1; }
.evvp-modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }
body.evvp-modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .evvp-form-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 560px) {
  .evvp-app { margin-top: 12px; }
  .evvp-panel { padding: 18px 15px; }
  .evvp-form-grid { grid-template-columns: 1fr; }
  .evvp-edit-grid { grid-template-columns: 1fr; }
  .evvp-edit-grid .evvp-field:last-child { grid-column: auto; }
  .evvp-row > *, .evvp-actions > *, .evvp-config-row > * { width: 100%; }
  .evvp-table-grid { grid-template-columns: 1fr; }
}