:root {
  color-scheme: light;
  --ink: #2c2622;
  --muted: #83786f;
  --paper: #fbf9f5;
  --cream: #f3ede3;
  --line: #e8dfd3;
  --coffee: #684231;
  --coffee-dark: #4d3026;
  --copper: #bd8259;
  --sage: #536d57;
  --red: #a34b42;
  --shadow: 0 18px 55px rgba(67, 46, 33, .08);
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #f7f3ec;
  background-image: radial-gradient(ellipse at 10% 10%, rgba(209, 178, 145, .18), transparent 32%), radial-gradient(ellipse at 95% 85%, rgba(146, 113, 83, .11), transparent 28%);
  line-height: 1.6;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; pointer-events: none; z-index: -1; border-radius: 50%; filter: blur(1px); }
.ambient-one { width: 220px; height: 220px; top: 190px; left: -155px; border: 1px solid rgba(104, 66, 49, .08); box-shadow: 0 0 0 26px rgba(104, 66, 49, .025), 0 0 0 52px rgba(104, 66, 49, .018); }
.ambient-two { width: 300px; height: 300px; right: -225px; bottom: 70px; border: 1px solid rgba(104, 66, 49, .08); box-shadow: 0 0 0 32px rgba(104, 66, 49, .025); }
.topbar { width: min(1160px, calc(100% - 48px)); height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 15px 15px 15px 5px; color: #fffaf4; background: var(--coffee); font-family: Georgia, serif; font-size: 23px; box-shadow: 0 7px 16px rgba(104, 66, 49, .22); }
.brand strong { display: block; font-size: 17px; letter-spacing: .02em; }
.brand small { display: block; margin-top: -2px; color: var(--muted); font-size: 11px; }
.privacy-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #e5dacc; border-radius: 999px; color: #76675b; background: rgba(255, 253, 249, .7); font-size: 12px; }
.lock-icon { width: 11px; height: 9px; position: relative; display: inline-block; border: 1.5px solid #887260; border-radius: 2px; margin-top: 4px; }
.lock-icon::before { content: ""; position: absolute; width: 6px; height: 6px; right: 1px; top: -7px; border: 1.5px solid #887260; border-bottom: 0; border-radius: 6px 6px 0 0; }
.app-shell { width: min(1000px, calc(100% - 48px)); margin: 28px auto 80px; }
.loading-state { min-height: 280px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.spinner { width: 17px; height: 17px; border: 2px solid #dfd1c1; border-top-color: var(--coffee); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-wrap { width: min(460px, 100%); margin: 48px auto; }
.auth-intro { text-align: center; margin-bottom: 25px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #9a7258; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.eyebrow::before { content: ""; width: 20px; height: 1px; background: #bd9678; }
h1, h2, h3, p { margin-top: 0; }
.auth-intro h1 { margin: 9px 0 7px; font-family: Georgia, Tahoma, serif; font-size: clamp(28px, 6vw, 39px); font-weight: 500; letter-spacing: -.04em; line-height: 1.3; }
.auth-intro p { margin: 0 auto; max-width: 355px; color: var(--muted); font-size: 14px; }
.card { border: 1px solid rgba(222, 211, 197, .9); border-radius: 20px; background: rgba(255, 253, 249, .9); box-shadow: var(--shadow); }
.auth-card { padding: 28px; }
.form-stack { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field-label { color: #51463e; font-size: 13px; font-weight: 700; }
.field-hint { color: #978a7d; font-size: 11px; font-weight: 400; }
.text-input, .text-area { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #e5dbcf; border-radius: 11px; outline: none; color: var(--ink); background: #fffdfa; transition: border-color .18s, box-shadow .18s; }
.text-area { min-height: 78px; resize: vertical; }
.text-input:focus, .text-area:focus { border-color: #a6795b; box-shadow: 0 0 0 3px rgba(166, 121, 91, .12); }
.text-input::placeholder, .text-area::placeholder { color: #b1a69b; }
.primary-button, .secondary-button, .danger-button, .quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 17px; border-radius: 11px; font-weight: 700; transition: transform .15s, background .15s, box-shadow .15s; }
.primary-button { border: 1px solid var(--coffee); color: #fffaf6; background: var(--coffee); box-shadow: 0 8px 18px rgba(104, 66, 49, .16); }
.primary-button:hover { background: var(--coffee-dark); transform: translateY(-1px); }
.secondary-button { border: 1px solid #dfd0c1; color: var(--coffee); background: #fffdfa; }
.secondary-button:hover { border-color: #bc9577; background: #faf4ed; }
.danger-button { border: 1px solid #e6ceca; color: var(--red); background: #fff9f7; }
.danger-button:hover { background: #fff1ee; }
.quiet-button { min-height: 35px; padding: 6px 10px; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.quiet-button:hover { color: var(--red); background: #fff3f0; }
.judge-entry-link { margin-top: 18px; text-decoration: none; }
.full-width { width: 100%; }
.auth-switch { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.text-button { padding: 0; border: 0; color: var(--coffee); background: transparent; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.private-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; color: #7c6c5e; background: #f7f1e8; font-size: 12px; }
.private-note .note-icon { color: #a47b5c; font-size: 16px; line-height: 1.3; }
.workspace { display: grid; gap: 20px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 4px 0 2px; }
.page-heading h1 { margin: 7px 0 3px; font-family: Georgia, Tahoma, serif; font-size: clamp(26px, 5vw, 37px); font-weight: 500; letter-spacing: -.04em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.heading-actions { display: flex; align-items: center; gap: 10px; }
.user-chip { display: inline-flex; align-items: center; gap: 9px; color: #645a51; font-size: 13px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #e3d4c4; border-radius: 50%; color: var(--coffee); background: #f3e8dc; font-size: 13px; font-weight: 700; }
.status-panel { overflow: hidden; position: relative; padding: 23px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(112deg, #4d3026, #76513d); color: #fff9f3; box-shadow: 0 15px 35px rgba(77, 48, 38, .16); }
.status-panel::after { content: ""; position: absolute; width: 180px; height: 180px; left: 10%; top: -110px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 19px rgba(255,255,255,.035), 0 0 0 40px rgba(255,255,255,.025); }
.status-copy { position: relative; z-index: 1; }
.status-copy .eyebrow { color: #e1c2a5; }
.status-copy .eyebrow::before { background: #d0a987; }
.status-copy h2 { margin: 7px 0 2px; font-size: 20px; }
.status-copy p { max-width: 550px; margin: 0; color: rgba(255, 249, 243, .72); font-size: 13px; }
.status-action { position: relative; z-index: 1; flex-shrink: 0; border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.1); }
.status-action:hover { background: rgba(255,255,255,.18); }
.status-action:disabled { opacity: .45; cursor: not-allowed; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.metric { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,249,.78); }
.metric-icon { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 13px; color: #986944; background: #f4e9db; font-size: 17px; }
.metric strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; }
.metric span:last-child { color: var(--muted); font-size: 12px; }
.panel { padding: 22px 24px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.panel-heading h2 { margin: 0 0 3px; font-size: 18px; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.section-label { color: #a07659; font-size: 11px; font-weight: 700; }
.entry-form { display: grid; grid-template-columns: 1fr 1.5fr auto; align-items: end; gap: 12px; }
.entry-list { display: grid; gap: 9px; margin-top: 18px; }
.entry-row { display: flex; align-items: center; gap: 13px; padding: 12px 13px; border: 1px solid #eee6dc; border-radius: 13px; background: #fffdfa; }
.entry-number { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 12px; color: var(--coffee); background: #f2e7da; font-size: 13px; font-weight: 800; }
.entry-meta { min-width: 0; flex: 1; }
.entry-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.entry-meta small { display: block; color: var(--muted); font-size: 11px; }
.result-average { min-width: 72px; color: var(--coffee); text-align: center; font-family: Georgia, serif; font-size: 24px; }
.result-average small { display: block; color: var(--muted); font-family: Tahoma, sans-serif; font-size: 10px; }
.invite-box { padding: 16px; border: 1px dashed #d5b99f; border-radius: 14px; background: #fbf6ef; }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.invite-row p { margin: 0; color: #74665a; font-size: 13px; }
.invite-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; color: #573c2e; background: #fffdfa; direction: ltr; font-family: Consolas, monospace; letter-spacing: .1em; font-weight: 700; }
.invite-code[hidden] { display: none; }
.invite-caption { margin: 10px 0 0; color: #998978; font-size: 11px; }
.table-wrap { overflow-x: auto; border: 1px solid #ede5db; border-radius: 13px; }
table { width: 100%; border-collapse: collapse; text-align: right; }
th, td { padding: 12px 14px; border-bottom: 1px solid #eee7de; white-space: nowrap; }
th { color: #8b7a6b; background: #faf6f0; font-size: 11px; font-weight: 700; }
td { font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
.rank { width: 31px; height: 31px; display: inline-grid; place-items: center; border: 1px solid #eee1d2; border-radius: 10px; color: #79563e; background: #fbf4eb; font-weight: 700; }
.empty-state { padding: 22px 15px; border: 1px dashed #e7dccf; border-radius: 13px; color: #94877b; background: #fdfbf8; text-align: center; font-size: 13px; }
.judge-intro { padding: 25px; border: 1px solid #e4d9cd; border-radius: 19px; background: linear-gradient(120deg, #fffdf9, #f3eade); }
.judge-intro h2 { margin: 7px 0 3px; font-size: 20px; }
.judge-intro p { max-width: 610px; margin: 0; color: var(--muted); font-size: 13px; }
.judge-list { display: grid; gap: 12px; }
.judge-card { padding: 19px 21px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,249,.92); box-shadow: 0 9px 27px rgba(67, 46, 33, .04); }
.judge-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.judge-entry-label { display: flex; align-items: center; gap: 12px; }
.judge-entry-label .entry-number { width: 43px; height: 43px; flex-basis: 43px; border-radius: 14px; font-size: 15px; }
.judge-entry-label strong { display: block; font-size: 15px; }
.judge-entry-label small { color: var(--muted); font-size: 11px; }
.saved-badge { color: var(--sage); font-size: 11px; font-weight: 700; }
.score-control { display: grid; grid-template-columns: 1fr 70px; align-items: center; gap: 16px; margin-top: 16px; }
.score-range { width: 100%; accent-color: var(--coffee); direction: ltr; }
.score-value { text-align: center; color: var(--coffee); font-family: Georgia, serif; font-size: 24px; }
.score-value small { color: #9a897a; font-family: Tahoma, sans-serif; font-size: 11px; }
.judge-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.judge-card-actions p { margin: 0; color: #9b8c7f; font-size: 11px; }
.info-strip { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid #e9dfd2; border-radius: 13px; color: #786a5d; background: rgba(255,253,249,.72); font-size: 12px; }
.info-strip strong { color: var(--coffee); }
.toast { position: fixed; z-index: 10; right: 50%; bottom: 22px; max-width: calc(100% - 32px); padding: 11px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: white; background: #382a24; box-shadow: 0 10px 30px rgba(45,34,29,.22); opacity: 0; transform: translate(50%, 12px); pointer-events: none; transition: opacity .2s, transform .2s; font-size: 13px; }
.toast.visible { opacity: 1; transform: translate(50%, 0); }
.toast.error { background: #873e36; }
.muted { color: var(--muted); }
.small-text { font-size: 12px; }
.divider { height: 1px; margin: 18px 0; background: #eee6dd; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  .topbar { width: calc(100% - 30px); height: 74px; }
  .app-shell { width: calc(100% - 30px); margin-top: 18px; }
  .auth-wrap { margin: 25px auto; }
  .auth-card { padding: 22px 18px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; justify-content: space-between; }
  .status-panel { align-items: flex-start; flex-direction: column; padding: 20px; }
  .status-action { width: 100%; }
  .metric-grid { grid-template-columns: 1fr; gap: 9px; }
  .metric { padding: 12px 14px; }
  .panel { padding: 18px 15px; }
  .entry-form { grid-template-columns: 1fr; }
  .entry-form .primary-button { width: 100%; }
  .invite-row { align-items: flex-start; flex-direction: column; }
  .invite-row .secondary-button, .invite-row .danger-button { width: 100%; }
  .judge-card { padding: 16px 14px; }
  .judge-card-actions { align-items: flex-start; flex-direction: column; }
  .judge-card-actions .primary-button { width: 100%; }
  .score-control { grid-template-columns: 1fr 58px; gap: 10px; }
  th, td { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}