/* Cream stationery and warm gold, matching the wedding competition reference. */
.comp-view{ --comp-gold:#95651e; --comp-ink:#4e371d; color:var(--comp-ink); }
.comp-back{ border:0; background:none; color:#765329; padding:8px 0; margin-bottom:14px; font:inherit; font-size:13px; }
.comp-heading{ text-align:center; margin:8px 0 22px; }
.comp-heading > span:not(.comp-badge){ font-size:32px; color:#a07533; }
.comp-heading h1{ font:500 32px/1.12 'Cormorant Garamond',Georgia,serif; margin:9px 0; }
.comp-heading p{ font-size:13px; line-height:1.6; margin:8px auto; max-width:420px; }
.comp-list{ display:grid; gap:12px; }
.comp-filters{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }
.comp-filters button{ flex:1; min-width:64px; min-height:40px; border:1px solid #e1ceb0; border-radius:8px; background:#fff9ed; color:#725632; font-size:12px; padding:8px; }
.comp-filters button[aria-pressed="true"]{ background:#8e6327; color:#fff; border-color:#8e6327; }
.comp-card{ display:grid; grid-template-columns:65px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px; border:1px solid #e6d6bd; border-radius:12px; background:rgba(255,250,240,.94); }
.comp-thumb,.comp-placeholder{ width:65px; height:72px; object-fit:contain; border-radius:8px; background:#f1e2c9; }
.comp-photo-button{position:relative;display:block;padding:0;border:0;background:#f7efe4;border-radius:8px;cursor:zoom-in;min-width:0;max-width:100%;}
.comp-photo-button:focus-visible{outline:3px solid #a7752c;outline-offset:3px;}
.comp-photo-button img{display:block;}
.comp-photo-button--cover{width:100%;margin:10px 0;}
.comp-photo-button:not([data-photo-state="ready"]) img{opacity:0;}
.comp-photo-button--cover:not([data-photo-state="ready"]){min-height:200px;}
.comp-photo-button[data-photo-state="error"]{min-height:72px;cursor:pointer;}
.comp-photo-feedback{position:absolute;inset:0;display:grid;place-items:center;padding:5px;color:#765e39;font-size:11px;text-align:center;overflow-wrap:anywhere;}
.comp-photo-button[data-photo-state="ready"] .comp-photo-feedback{display:none;}
.comp-placeholder{ display:grid; place-items:center; color:#ac8140; font-size:27px; }
.comp-card h2{ font:600 20px/1.15 'Cormorant Garamond',Georgia,serif; margin:0 0 7px; overflow-wrap:anywhere; }
.comp-card small{ display:block; line-height:1.5; font-size:11px; color:#7c674e; margin-top:5px; }
.comp-badge{ display:inline-block; padding:3px 7px; border-radius:12px; background:#eee0c6; font-size:11px; text-transform:capitalize; }
.comp-badge--active{ background:#337550; color:#fff; }
.comp-badge--closed{ background:#756957; color:#fff; }
.comp-badge--paused{ background:#a97b20; color:#fff; }
.comp-btn{ min-height:44px; border:1px solid #d9c39e; border-radius:9px; padding:10px 14px; background:#fff8ed; color:#694923; font:inherit; font-size:13px; cursor:pointer; }
.comp-card .comp-btn{ padding:8px 10px; font-size:12px; }
.comp-btn--gold{ background:linear-gradient(135deg,#b18439,#845716); border-color:#916421; color:#fffaf1; }
.comp-btn--danger{ color:#a13c35; }
.comp-btn:disabled{ opacity:.55; cursor:wait; }
.comp-wide{ width:100%; }
.comp-panel{ margin:16px 0; padding:18px; border:1px solid #e0ceb1; border-radius:14px; background:rgba(255,250,240,.95); }
.comp-panel h2,.comp-panel h3{ font:600 24px/1.2 'Cormorant Garamond',Georgia,serif; margin:0 0 14px; overflow-wrap:anywhere; }
.comp-panel p{ font-size:13px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
.comp-cover{ width:100%; height:auto; max-height:75dvh; object-fit:contain; border-radius:12px; }
.comp-choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.comp-choice{ display:flex; flex-direction:column; gap:7px; padding:8px; border:1px solid #dfceb0; border-radius:11px; background:#fffaf1; cursor:pointer; min-width:0; }
.comp-choice:has(input:checked){ border:2px solid #a7752c; padding:7px; background:#f8ecd4; }
.comp-choice img{ width:100%; height:auto; object-fit:contain; border-radius:7px; }
.comp-choice-vote{ display:flex; align-items:center; gap:7px; font-size:14px; overflow-wrap:anywhere; line-height:1.4; cursor:pointer; }
.comp-choice input{ flex-shrink:0; accent-color:#9b6c28; width:18px; height:18px; }
.comp-countdown{grid-column:1/-1;padding:12px;margin:10px 0;border:1px solid #dfceb0;border-radius:12px;background:#faf1df;text-align:center;min-width:0;}
.comp-countdown>strong{display:block;font-size:14px;color:#765328;}
.comp-countdown>small{display:block;font-size:11px;line-height:1.5;margin-top:6px;overflow-wrap:anywhere;}
.comp-clock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px auto;max-width:420px;}
.comp-clock[hidden]{display:none;}
.comp-clock span{display:grid;gap:3px;min-width:0;}
.comp-clock b{font-size:24px;color:#765328;font-variant-numeric:tabular-nums;}
.comp-clock small{font-size:10px;text-transform:uppercase;}
.comp-field{ display:flex; flex-direction:column; min-width:0; gap:6px; margin:14px 0; font-size:13px; }
.comp-field :is(input,textarea,select){ width:100%; min-width:0; padding:12px; min-height:46px; border:1px solid #dac8a8; border-radius:8px; background:#fffdf9; font:inherit; font-size:16px; color:#493722; box-sizing:border-box; }
.comp-field textarea{ resize:vertical; }
.comp-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.comp-actions{ display:flex; flex-wrap:wrap; gap:9px; margin:16px 0; }
.comp-actions > button{ flex:1; }
.comp-status{ font-size:13px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
.comp-status:empty{ display:none; }
.comp-notice{ padding:13px; border-radius:10px; border:1px solid #e2cfae; background:#f8eedc; font-size:13px; line-height:1.6; margin:14px 0; }
.comp-result{ display:grid; grid-template-columns:26px 42px minmax(0,1fr) auto; align-items:center; gap:10px; margin:18px 0; }
.comp-result img{ width:42px; height:42px; border-radius:7px; object-fit:contain; }
.comp-result .comp-mini-placeholder{ width:42px; height:42px; border-radius:50%; background:#eddfc3; display:grid; place-items:center; }
.comp-result strong{ font-size:13px; display:block; overflow-wrap:anywhere; }
.comp-result b{ font-size:14px; }
.comp-result small{ display:block; font-size:11px; margin-top:5px; color:#7a6345; }
.comp-bar{ height:8px; overflow:hidden; border-radius:10px; background:#eddfc6; margin-top:7px; }
.comp-bar i{ display:block; height:100%; background:linear-gradient(90deg,#ba8e43,#94611a); }
.comp-totals{ display:grid; grid-template-columns:1fr 1fr; text-align:center; gap:12px; padding:16px 0 4px; border-top:1px solid #e5d4b8; font-size:12px; }
.comp-totals b{ display:block; margin-top:5px; font:600 26px 'Cormorant Garamond',Georgia,serif; }
.comp-check{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; margin:14px 0; }
.comp-check input{ accent-color:#95651e; width:18px; height:18px; margin:1px 0; flex-shrink:0; }
.comp-contestant{ border:1px solid #e6d5b8; background:#fffaf1; padding:13px; border-radius:10px; margin:12px 0; }
.comp-contestant .comp-field{ margin-top:0; }
.comp-photo-control{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; }
.comp-photo-control img{ width:70px; height:70px; object-fit:contain; border-radius:7px; }
.comp-photo-control label{ cursor:pointer; }
.comp-groups{ max-height:230px; overflow:auto; border:1px solid #e4d4b6; padding:0 12px; border-radius:9px; }
.comp-success{ text-align:center; padding:22px; background:#f7ecd8; border:1px solid #d9bf90; border-radius:12px; margin:16px 0; }
.comp-success > b{ display:block; font-size:36px; color:#95702e; }
.comp-success h2{ font:600 29px 'Cormorant Garamond',Georgia,serif; margin:10px 0; }
.comp-comment{ border-top:1px solid #e7d6b9; padding:12px 0; }
.comp-comment p{ margin:7px 0; }
.comp-voter{ padding:14px 0; border-bottom:1px solid #e5d3b6; overflow-wrap:anywhere; }
.comp-voter small{ display:block; line-height:1.6; font-size:12px; margin-top:5px; }
.comp-view :is(button,input,select,textarea,a):focus-visible{ outline:2px solid #94661c; outline-offset:3px; }
.competition-toast{ pointer-events:auto; border-radius:14px; align-items:flex-start; position:relative; padding:14px 36px 14px 12px; }
.activity-toast .competition-toast-icon{ font-size:26px; line-height:1; margin-top:3px; flex:none; }
.competition-toast-copy{ min-width:0; }
.competition-toast p{ margin:6px 0; font-size:13px; line-height:1.4; color:#614821; overflow-wrap:anywhere; }
.competition-toast .competition-toast-sub{ font-size:12px; color:#826844; }
.competition-toast-open{ border:0; border-radius:8px; background:linear-gradient(135deg,#b18439,#845716); color:#fff; min-height:40px; padding:9px 14px; font:inherit; font-size:13px; margin-top:4px; }
.competition-toast-close{ position:absolute; right:5px; top:5px; min-width:32px; min-height:32px; border:0; background:none; color:#765329; font-size:24px; }
.competition-toast button:focus-visible{ outline:2px solid #94661c; outline-offset:3px; }
@media(max-width:360px){
  .comp-panel{ padding:13px; }
  .comp-card{ grid-template-columns:50px minmax(0,1fr); }
  .comp-thumb,.comp-card .comp-placeholder{ width:50px; height:60px; }
  .comp-card > button{ grid-column:1/-1; }
  .comp-fields{ grid-template-columns:1fr; gap:0; }
}