/* Production EJS interface. Reference mockups keep their separate stylesheets. */
:root {
  --green:#087f62;
  --ink:#173c35;
  --line:#dfe8e3;
  --surface:#fff;
  --muted:#60766e
}

body {
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:#f3f7f5;
  color:var(--ink)
}

h1 {
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.25;
  letter-spacing:-.7px
}

h2 {
  font-size:20px
}

p {
  color:var(--muted)
}

a {
  color:var(--green);
  overflow-wrap:anywhere
}

img {
  max-width:100%
}

button,.button {
  min-height:44px;
  border-radius:10px;
  background:var(--green);
  font-weight:600;
  font-size:15px;
  line-height:1.4;
  text-align:center
}

button:hover,.button:hover {
  filter:brightness(.95)
}

button.secondary,.button.secondary {
  background:#fff;
  border-color:var(--line)
}

input,select,textarea {
  font-size:16px;
  min-height:46px;
  background:#fff;
  border-color:#cbd9d1;
  border-radius:10px;
  line-height:1.5
}

input[type=checkbox],input[type=radio] {
  min-height:20px;
  width:20px;
  height:20px;
  flex-shrink:0
}

textarea {
  min-height:120px
}

label {
  font-weight:600
}

small,.help,.muted,.small {
  font-size:13px
}

.icon {
  width:21px;
  height:21px
}

*:focus-visible {
  outline:3px solid #e0b24e;
  outline-offset:3px
}

.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:100;
  background:white;
  padding:12px;
  border-radius:8px
}

.skip-link:focus {
  top:12px
}

.shell {
  display:flex;
  min-height:100vh
}

.sidebar {
  width:244px;
  flex-shrink:0;
  background:white;
  border-right:1px solid var(--line);
  padding:28px 16px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column
}

.brandrow {
  padding:0 12px 32px
}

.logo {
  display:block;
  font-size:40px;
  font-weight:800;
  text-decoration:none;
  line-height:1
}

.logo small {
  display:block;
  font-size:14px;
  letter-spacing:0;
  margin-top:8px
}

.sidebar nav {
  display:grid;
  gap:8px
}

.sidebar nav a,.mobile-menu nav a {
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:10px;
  text-decoration:none;
  color:#52665e;
  min-height:48px
}

.sidebar nav a.active {
  background:#e3f3ea;
  color:var(--green);
  font-weight:700
}

.sidebar nav a:hover,.mobile-menu nav a:hover {
  background:#eef6f1
}

.sidebar .foot {
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--line)
}

.sidebar .foot button {
  background:#f0f5f2;
  color:var(--ink);
  width:100%
}

.workspace {
  flex:1;
  min-width:0
}

.app-topbar {
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
  min-height:76px;
  padding:16px 32px;
  background:#ffffffed;
  border-bottom:1px solid var(--line)
}

.app-brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:28px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap
}

.app-brand span {
  font-size:15px;
  font-weight:600;
  color:var(--ink)
}

.workspace-label {
  font-size:13px;
  color:var(--muted)
}

.mobile-menu {
  display:none
}

.main {
  max-width:1440px;
  margin:auto;
  padding:32px;
  min-width:0
}

.page-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}

.page-head p {
  margin-top:8px;
  max-width:720px
}

.page-head .button {
  flex-shrink:0
}

.card,.program-fields,.other-settings,.program-summary {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow:0 3px 14px #173c3503
}

.card {
  margin-top:20px
}

.card h2 {
  margin-bottom:12px
}

.tabs {
  gap:6px;
  overflow-x:auto;
  max-width:100%;
  margin:20px 0;
  border:0;
  padding-bottom:4px
}

.tabs .tab {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  color:var(--muted);
  min-height:44px
}

.tabs .tab.active {
  background:#dff1e7;
  color:var(--green);
  font-weight:700
}

.toolbar {
  flex-wrap:wrap;
  gap:12px
}

.search-input {
  background:white;
  border-radius:10px;
  min-height:48px;
  flex:1 1 230px
}

.search-input input {
  font-size:16px
}

.filter-menu {
  display:flex;
  align-items:center;
  gap:12px
}

.filter-menu label {
  font-size:13px
}

.filter-menu select {
  width:180px;
  margin:0
}

.tablewrap,.people-table,.prize-table {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden
}

table {
  table-layout:auto
}

th {
  background:#eef4f0;
  color:#52665e;
  font-size:13px;
  white-space:nowrap
}

td {
  font-size:14px;
  padding:18px 14px
}

th {
  padding:14px
}

td:first-child {
  width:48px
}

td:last-child {
  width:110px
}

.table-title {
  font-weight:650;
  min-height:44px;
  display:flex;
  align-items:center;
  line-height:1.4
}

.table-date {
  white-space:normal;
  font-size:13px
}

.row-menu {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  padding:6px
}

.tag {
  font-size:12px;
  border-radius:6px;
  padding:6px 9px;
  font-weight:600
}

.pagination {
  flex-wrap:wrap;
  font-size:13px;
  margin:24px 0
}

.page-size {
  margin:0;
  width:auto
}

.current-page {
  min-height:44px
}

.prize-icon {
  height:40px;
  width:auto;
  object-fit:contain
}

.prize-table td:last-child {
  min-width:160px
}

.prize-table td:last-child .button,.prize-table td:last-child button {
  padding:10px;
  margin:2px
}

.prize-totals {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:20px
}

.prize-totals>span {
  display:flex;
  justify-content:space-between;
  background:white;
  border:1px solid var(--line);
  padding:18px;
  border-radius:12px
}

.prize-totals strong {
  color:var(--green)
}

.prize-toolbar {
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px
}

.people-scope {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}

.people-scope select {
  max-width:70%;
  margin:0
}

.export-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  white-space:nowrap
}

.program-fields h2,.other-settings h2 {
  margin-bottom:20px
}

.create-content,.inline-question-editor {
  max-width:960px;
  margin:auto
}

.program-types {
  border:0;
  padding:0;
  margin:0 0 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.program-types legend {
  margin-bottom:12px;
  font-weight:600
}

.type-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px;
  cursor:pointer
}

.type-card:has(:checked) {
  background:#eef8f1;
  border-color:var(--green);
  box-shadow:0 0 0 1px var(--green)
}

.type-card input {
  position:absolute;
  right:16px;
  top:20px
}

.type-symbol {
  color:var(--green)
}

.type-symbol .icon {
  width:32px;
  height:32px
}

.type-card small {
  color:var(--muted);
  font-weight:400
}

.description-count,.character-count {
  display:block;
  text-align:right;
  font-size:12px;
  color:var(--muted);
  margin:6px 0 18px
}

.other-settings {
  margin-top:20px
}

.publish-setting {
  display:flex;
  align-items:center;
  gap:14px
}

.publish-setting>div {
  flex:1
}

.publish-setting small {
  display:block;
  font-weight:400;
  color:var(--muted)
}

.switch {
  appearance:none;
  position:relative;
  width:48px!important;
  height:28px!important;
  min-height:28px!important;
  border:0;
  border-radius:20px;
  background:#a7bcb2;
  margin:0;
  cursor:pointer
}

.switch:after {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  left:4px;
  top:4px
}

.switch:checked {
  background:var(--green)
}

.switch:checked:after {
  left:24px
}

.form-actions,.editor-actions {
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
  position:static
}

.inline-question-editor.modal {
  max-width:960px;
  padding:0;
  background:none;
  max-height:none;
  overflow:visible
}

.editor-card {
  margin:0
}

.editor-advanced {
  margin-top:24px;
  border-top:1px solid var(--line);
  padding-top:16px
}

.editor-advanced summary {
  cursor:pointer;
  min-height:44px;
  font-weight:600
}

.option-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0
}

.option-row input:not([type=radio]) {
  margin:0;
  flex:1;
  width:0
}

.option-row label {
  min-width:16px
}

.delete-option {
  background:#fff1ed;
  color:#b83e32;
  padding:10px;
  flex-shrink:0
}

.add-option {
  background:#e6f4ec;
  color:var(--green)
}

.question-image {
  margin:20px 0
}

.question-image input {
  margin:8px 0
}

.upload-placeholder {
  border:1px dashed #a5bdae;
  background:#f2f7f4;
  padding:20px;
  border-radius:12px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px
}

.question-image-preview {
  max-height:200px;
  object-fit:contain
}

.program-summary {
  display:flex;
  gap:20px;
  align-items:center;
  margin:20px 0
}

.summary-body {
  min-width:0;
  flex:1
}

.summary-body h2 {
  overflow-wrap:anywhere
}

.summary-body h2 .tag {
  margin-left:10px
}

.summary-body p,.summary-body small {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px
}

.program-emblem {
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#e5f3eb;
  color:var(--green);
  flex-shrink:0
}

.program-emblem .icon {
  width:32px;
  height:32px
}

.question-card {
  position:relative
}

.question-body {
  min-width:0
}

.question-card .actions {
  flex-shrink:0
}

.person-head {
  display:flex;
  gap:16px;
  align-items:center
}

.person-avatar,.avatar {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:#e3f3ea;
  color:var(--green);
  border-radius:50%;
  font-weight:700
}

.person-columns {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:20px
}

.participation-info dl {
  display:grid;
  grid-template-columns:minmax(100px,1fr) minmax(0,1.2fr);
  gap:16px;
  font-size:14px
}

.participation-info dt {
  color:var(--muted)
}

.participation-info dd {
  margin:0;
  overflow-wrap:anywhere
}

.detail-answer {
  display:flex;
  gap:12px;
  margin:20px 0;
  padding-top:16px;
  border-top:1px solid var(--line)
}

.detail-answer>div {
  min-width:0
}

.detail-answer p {
  margin-top:8px;
  overflow-wrap:anywhere
}

.qr-image {
  width:224px;
  height:224px;
  display:block;
  margin:16px auto;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px
}

.share-qr h2 {
  margin-top:16px
}

.copy-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px
}

.copy-row input {
  margin:0;
  flex:1
}

.copy-row button {
  flex-shrink:0
}

.share-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:24px
}

.empty {
  background:#fff;
  border:1px dashed #c6d8cd;
  border-radius:16px;
  margin:20px 0;
  padding:48px 20px
}

.error {
  font-size:14px
}

.notice {
  line-height:1.6
}

.dashboard-head .admin-welcome {
  display:none
}

.dashboard-date {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:20px
}

.dashboard-date span {
  display:flex;
  align-items:center;
  gap:6px
}

.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}

.dashboard-metric {
  margin:0;
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px
}

.metric-icon {
  width:48px;
  height:48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#e3f3ea;
  color:var(--green);
  flex-shrink:0
}

.metric-icon.blue {
  background:#e7f0fc;
  color:#3678ba
}

.metric-icon.gold {
  background:#fff2d9;
  color:#966300
}

.dashboard-metric strong {
  display:block;
  font-size:30px
}

.dashboard-metric small {
  display:block;
  color:var(--muted)
}

.daily-card {
  padding:24px
}

.daily-card>.row {
  margin-bottom:24px;
  flex-wrap:wrap
}

.chart-legend {
  display:flex;
  gap:16px;
  font-size:13px
}

.quiz-key:before,.spin-key:before {
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:3px;
  background:var(--green);
  margin-right:8px
}

.spin-key:before {
  background:#eab54b
}

.daily-plot {
  display:flex;
  height:220px;
  gap:12px
}

.chart-axis {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-bottom:28px;
  font-size:11px;
  width:32px;
  text-align:right
}

.daily-chart {
  display:flex;
  flex:1;
  min-width:0;
  gap:4px;
  border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(to top,transparent 0 47px,#eef3ef 48px 49px)
}

.daily-column {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end
}

.daily-bars {
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:192px
}

.daily-bars span {
  width:50%;
  background:var(--green);
  border-radius:3px 3px 0 0
}

.daily-bars span+span {
  background:#eab54b
}

.daily-column small {
  font-size:10px;
  height:28px;
  white-space:nowrap;
  line-height:28px
}

.daily-column:last-child small {
  align-self:flex-end
}

.dashboard-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

.donut-row {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}

.donut {
  width:150px;
  height:150px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0
}

.donut span {
  width:104px;
  height:104px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  font-size:30px;
  font-weight:700
}

.donut-row .chart-legend {
  display:block
}

.donut-row .chart-legend p {
  margin:12px 0
}

.donut-row small {
  display:block;
  margin-left:18px
}

.device-row {
  display:flex;
  gap:12px;
  margin:24px 0;
  align-items:center
}

.device-row>div {
  flex:1
}

.device-bar {
  height:8px;
  border-radius:4px;
  background:#eaf0ec;
  margin-top:10px;
  overflow:hidden
}

.device-bar span {
  height:100%;
  display:block;
  background:var(--green)
}

.device-unavailable {
  font-size:12px;
  color:var(--muted)
}

.public-body {
  padding:24px;
  min-height:100vh;
  background:radial-gradient(ellipse at top left,#dceee3,transparent 65%)
}

.mobile {
  max-width:760px;
  margin:0 auto
}

.mobile>header {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:64px;
  margin-bottom:20px
}

.public-back {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
  flex-shrink:0
}

.mobile>main {
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px;
  box-shadow:0 16px 48px #173c3508
}

.program-context {
  font-size:13px;
  font-weight:600;
  color:var(--green);
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
  margin-bottom:24px;
  overflow-wrap:anywhere
}

.mobile h1 {
  font-size:clamp(24px,3vw,32px);
  line-height:1.4;
  overflow-wrap:anywhere
}

.mobile h1+p {
  margin-top:10px
}

.mobile[data-screen=landing] {
  max-width:1100px
}

.mobile[data-screen=landing]>main {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:32px;
  padding:40px
}

.hero {
  grid-column:2;
  grid-row:1;
  background:#edf6ef;
  border-radius:20px;
  overflow:hidden
}

.landing-art {
  display:block;
  width:100%;
  max-height:400px;
  object-fit:contain
}

.landing-card {
  grid-column:1;
  grid-row:1
}

.landing-card p {
  font-size:16px;
  line-height:1.7;
  margin:16px 0
}

.question-count {
  display:flex;
  align-items:center;
  gap:8px;
  margin:24px 0;
  color:var(--green);
  font-weight:600
}

.gold-button {
  background:#087f62;
  color:#fff;
  min-height:52px;
  font-size:16px
}

.registration-intro {
  margin:8px 0 24px
}

.registration-field {
  margin-top:20px
}

.registration-field>span:first-child {
  display:block;
  margin-bottom:8px
}

.registration-field em {
  color:#b83e32;
  font-style:normal
}

.input-with-icon,.login-input {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  border:1px solid #cbd9d1;
  border-radius:10px;
  background:#fff
}

.input-with-icon:focus-within,.login-input:focus-within {
  outline:2px solid var(--green)
}

.input-with-icon input,.login-input input {
  border:0;
  margin:0;
  padding:14px 0;
  background:transparent;
  outline:none
}

.consent {
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:24px 0;
  font-size:14px;
  line-height:1.6;
  font-weight:400
}

.consent input {
  margin-top:3px
}

.quiz-progress {
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:24px
}

.progress {
  flex:1;
  height:8px;
  border-radius:10px;
  background:#e9f1eb;
  overflow:hidden
}

.progress span {
  display:block;
  height:100%;
  background:var(--green)
}

.quiz-progress strong {
  white-space:nowrap;
  font-size:14px
}

.gold-divider {
  display:none
}

#quiz-input {
  display:grid;
  gap:12px;
  margin-top:24px
}

.choice {
  width:100%;
  background:#fff;
  border:1px solid #ceddd3;
  color:var(--ink);
  text-align:left;
  justify-content:flex-start;
  min-height:68px;
  padding:14px;
  gap:14px
}

.choice .letter {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:#edf4ef;
  border-radius:9px;
  flex-shrink:0
}

.choice .choice-label {
  flex:1
}

.choice.selected,.choice[aria-pressed=true] {
  background:#e8f6ed;
  border:2px solid var(--green);
  padding:13px
}

.choice .radio {
  margin-left:auto;
  width:20px;
  height:20px;
  border:1px solid #a8bfb1;
  border-radius:50%;
  flex-shrink:0
}

.choice[aria-pressed=true] .radio {
  background:var(--green);
  box-shadow:inset 0 0 0 4px white
}

.quiz-actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:28px
}

.quiz-actions>button {
  flex:1
}

.quiz-question-image {
  display:block;
  max-height:300px;
  object-fit:contain;
  margin:24px auto
}

.text-response {
  display:flex;
  align-items:center;
  gap:12px
}

.text-response input {
  margin:0
}

.quiz-notice {
  display:flex;
  align-items:center;
  gap:12px;
  background:#f0f6f2;
  padding:16px;
  border-radius:12px;
  margin-top:24px
}

.review-button {
  margin-top:16px;
  background:#edf5ef;
  color:var(--green)
}

.review-item {
  gap:16px;
  padding:20px 0
}

.review-item .number {
  width:36px;
  height:36px
}

.review-answer {
  min-width:0
}

.review-answer strong,.review-answer p {
  overflow-wrap:anywhere
}

.review-item .link {
  min-height:44px;
  display:flex;
  align-items:center;
  flex-shrink:0
}

#submit-quiz {
  margin-top:24px
}

.result-layout {
  text-align:center
}

.result-symbol {
  width:88px;
  height:88px;
  background:#e5f4ea;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  color:var(--green)
}

.result-symbol .icon {
  width:40px;
  height:40px
}

.result-symbol.gold {
  background:#fff2d7;
  color:#9e6b10
}

.result-panel {
  margin-top:28px;
  border:1px solid var(--line);
  background:#f6faf7;
  border-radius:16px;
  padding:24px
}

.result-score {
  font-size:56px;
  font-weight:800;
  color:var(--green);
  margin:8px 0 24px;
  line-height:1.2
}

.result-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:28px
}

.result-metrics>div {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px
}

.result-metrics small {
  font-size:12px
}

.winner-info {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  text-align:left
}

.winner-info small {
  display:block;
  margin-bottom:6px
}

.winner-info strong {
  overflow-wrap:anywhere
}

.winner-notice {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  margin:24px 0!important;
  font-size:14px
}

.spin-content {
  text-align:center
}

.spin-content>p {
  margin:8px 0 32px
}

.wheel-wrap {
  position:relative;
  width:min(360px,100%);
  aspect-ratio:1;
  margin:24px auto 32px
}

.wheel-disc {
  position:absolute;
  inset:0;
  border:8px solid #e4b655;
  border-radius:50%;
  box-shadow:0 0 0 3px #f7d88b;
  overflow:hidden;
  transition:transform 3.8s cubic-bezier(.12,.72,.12,1)
}

.wheel-label {
  position:absolute;
  transform:translate(-50%,-50%);
  width:calc(24% * var(--spin-cell-scale,1));
  font-size:calc(12px * var(--spin-cell-scale,1));
  line-height:1.2;
  text-align:center;
  overflow-wrap:anywhere
}

.wheel-label b {
  display:block;
  margin-bottom:6px
}

.wheel-label .prize-icon {
  height:calc(28px * var(--spin-cell-scale,1))
}

.wheel-center {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:66px;
  height:66px;
  border:4px solid #ebc267;
  background:var(--green);
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:800
}

.pointer {
  position:absolute;
  left:50%;
  top:-16px;
  transform:translateX(-50%);
  z-index:2;
  width:28px;
  height:40px;
  background:#e95e32;
  clip-path:polygon(0 0,100% 0,50% 100%)
}

.wheel-art {
  width:100%;
  height:100%;
  object-fit:contain
}

.art-wheel {
  border:0;
  box-shadow:none
}

.spin-content #spin-button {
  width:min(360px,100%);
  min-height:56px
}

.prize-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:24px
}

.prize-list>span {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  background:#f1f7f3;
  border-radius:12px;
  padding:16px;
  overflow-wrap:anywhere
}

.prize-list .prize-icon {
  height:32px
}

.closed-content {
  text-align:center
}

.closed-art {
  max-height:180px;
  object-fit:contain;
  margin:0 auto 24px
}

.closed-content>p {
  margin:16px 0 24px
}

.not-found-panel {
  background:#f0f6f2;
  border-radius:12px;
  padding:20px;
  margin-top:24px
}

.not-found-panel p {
  margin-top:8px
}

.mobile[data-screen=policy] p {
  margin:20px 0
}

.public-home {
  max-width:1160px;
  margin:40px auto;
  padding:24px
}

.public-home>.brandrow {
  padding:0 0 32px
}

.public-home .logo {
  font-size:32px
}

.public-home h1+p {
  margin:12px 0 32px
}

.program-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px
}

.program-grid .card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  margin:0;
  padding:28px
}

.program-grid .button {
  margin-top:auto;
  width:100%
}

.program-grid h2 {
  margin:0
}

.login-page {
  max-width:1100px;
  margin:8vh auto;
  padding:24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0
}

.login-brand {
  background:#0b624e;
  color:white;
  border-radius:24px 0 0 24px;
  padding:64px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.login-brand strong {
  font-size:72px;
  line-height:1.1
}

.login-brand strong span {
  color:#e3bb62;
  font-size:40px;
  margin-left:12px
}

.login-brand b {
  font-size:26px;
  margin:12px 0 32px
}

.login-brand p {
  color:#cce5d9;
  line-height:1.8
}

.login-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:0 24px 24px 0;
  padding:48px
}

.login-form h1 {
  font-size:28px
}

.login-form>p {
  margin:12px 0 32px
}

.login-input {
  margin-bottom:20px
}

.login-input .reveal-password {
  background:transparent;
  color:var(--muted);
  padding:8px;
  flex-shrink:0
}

.login-options {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
  font-size:13px
}

.login-options label {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:400
}

.login-options button {
  background:transparent;
  color:var(--green);
  padding:0;
  font-size:13px
}

.login-copyright {
  grid-column:1/-1;
  text-align:center;
  margin-top:24px;
  color:var(--muted)
}

@media(min-width:1100px) {
  .mobile[data-screen=register] {
    max-width:680px
  }

  .mobile[data-screen=spin] {
    max-width:880px
  }

}

@media(max-width:1100px) {
  .dashboard-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .sidebar {
    width:220px
  }

  .main {
    padding:24px
  }

  .dashboard-metric {
    padding:16px
  }

}

@media(max-width:900px) {
  .shell {
    display:block
  }

  .sidebar {
    display:none
  }

  .app-topbar {
    padding:12px 20px;
    min-height:68px;
    position:relative;
    z-index:20
  }

  .workspace-label {
    display:none
  }

  .mobile-menu {
    display:block
  }

  .mobile-menu summary {
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 14px;
    min-height:44px;
    cursor:pointer;
    background:white;
    font-weight:600
  }

  .mobile-menu summary::-webkit-details-marker {
    display:none
  }

  .mobile-menu nav {
    position:absolute;
    right:16px;
    top:calc(100% + 4px);
    width:min(320px,calc(100vw - 32px));
    padding:12px;
    background:white;
    box-shadow:0 16px 40px #173c3526;
    border:1px solid var(--line);
    border-radius:14px;
    max-height:calc(100dvh - 100px);
    overflow:auto
  }

  .mobile-menu nav button {
    margin-top:12px;
    width:100%;
    background:#edf4ef;
    color:var(--ink)
  }

  .main {
    padding:24px 20px
  }

  .page-head {
    flex-wrap:wrap
  }

  .page-head .button {
    white-space:normal
  }

  .tablewrap,.people-table,.prize-table {
    border:0;
    background:none;
    overflow:visible
  }

  table,tbody {
    display:block;
    width:100%;
    min-width:0
  }

  thead {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
  }

  tbody tr {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
    margin-bottom:16px
  }

  td,td:first-child,td:last-child {
    display:block;
    width:auto!important;
    min-width:0!important;
    border:0;
    padding:0;
    font-size:14px;
    text-align:left;
    overflow-wrap:anywhere
  }

  td:first-child {
    display:none
  }

  td:before {
    content:attr(data-label);
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:5px
  }

  td:last-child {
    grid-column:1/-1;
    border-top:1px solid var(--line);
    padding-top:12px
  }

  td:last-child:before {
    display:none
  }

  .programs-table td:nth-child(2),.people-table td:nth-child(3),.prize-table td:nth-child(2) {
    grid-column:1/-1;
    font-size:18px;
    font-weight:700;
    order:-1
  }

  .table-title {
    font-size:18px;
    min-height:0
  }

  .programs-table td:nth-child(2):before,.people-table td:nth-child(3):before,.prize-table td:nth-child(2):before {
    display:none
  }

  .people-table td small {
    font-size:13px;
    font-weight:400;
    margin-top:6px
  }

  .row-menu {
    width:100%;
    justify-content:center;
    background:#e8f4ed;
    border-radius:10px
  }

  .people-table td:last-child .button {
    width:100%
  }

  .prize-table td:last-child {
    display:flex;
    gap:10px
  }

  .prize-table td:last-child>* {
    flex:1
  }

  .person-columns {
    grid-template-columns:1fr
  }

  .login-page {
    max-width:800px
  }

  .login-brand {
    padding:40px 28px
  }

  .login-panel {
    padding:32px
  }

  .mobile[data-screen=landing]>main {
    padding:28px;
    gap:24px
  }

}

@media(max-width:600px) {
  .main {
    padding:24px 16px
  }

  .app-topbar {
    padding:12px 16px
  }

  .page-head {
    gap:16px;
    margin-bottom:24px
  }

  .page-head>.button {
    width:100%
  }

  .page-head .actions {
    width:100%
  }

  .page-head p {
    font-size:14px
  }

  .grid,.two,.program-types,.dashboard-bottom,.prize-totals {
    grid-template-columns:1fr
  }

  .dashboard-grid {
    gap:10px
  }

  .dashboard-metric {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:16px
  }

  .dashboard-metric strong {
    font-size:28px
  }

  .dashboard-metric small {
    font-size:12px
  }

  .daily-card {
    padding:16px
  }

  .daily-plot {
    gap:6px
  }

  .daily-chart {
    gap:2px
  }

  .daily-column small {
    font-size:8px
  }

  .chart-legend {
    font-size:12px
  }

  .card,.program-fields,.other-settings,.program-summary {
    padding:20px
  }

  .tabs {
    gap:2px
  }

  .tabs .tab {
    padding:12px;
    font-size:14px
  }

  .toolbar {
    align-items:stretch
  }

  .toolbar .search-input {
    flex-basis:100%
  }

  .filter-menu {
    flex:1;
    min-width:0
  }

  .filter-menu label,.filter-menu select {
    width:100%
  }

  .toolbar>button {
    align-self:flex-end
  }

  .pagination>span {
    order:3;
    width:100%
  }

  .people-scope {
    flex-wrap:wrap
  }

  .people-scope select {
    max-width:100%;
    width:100%
  }

  .question-card {
    flex-wrap:wrap;
    gap:12px
  }

  .question-card .number {
    width:32px;
    height:32px
  }

  .question-card .actions {
    width:100%;
    justify-content:flex-end
  }

  .question-card .question-body {
    flex-basis:calc(100% - 48px)
  }

  .program-summary {
    gap:12px;
    align-items:flex-start
  }

  .program-emblem {
    width:44px;
    height:44px
  }

  .program-emblem .icon {
    width:24px;
    height:24px
  }

  .summary-body h2 {
    font-size:18px
  }

  .form-actions>* {
    flex:1
  }

  .editor-actions>* {
    flex:1
  }

  .option-row {
    gap:6px
  }

  .option-row input:not([type=radio]) {
    padding:10px 8px
  }

  .option-row .delete-option {
    padding:8px
  }

  .share-actions {
    flex-direction:column
  }

  .copy-row {
    flex-wrap:wrap
  }

  .copy-row>input {
    flex-basis:calc(100% - 40px)
  }

  .copy-row button {
    width:100%
  }

  .participation-info dl {
    grid-template-columns:1fr;
    gap:6px
  }

  .participation-info dd {
    margin-bottom:14px
  }

  .public-body {
    padding:12px 16px 32px
  }

  .mobile>header {
    margin-bottom:12px;
    min-height:56px
  }

  .mobile>main {
    padding:24px 20px;
    border-radius:18px
  }

  .mobile[data-screen=landing]>main {
    display:flex;
    flex-direction:column;
    padding:24px 20px;
    gap:20px
  }

  .landing-card {
    order:-1;
    width:100%
  }

  .landing-card p {
    font-size:15px;
    margin:12px 0
  }

  .landing-card h1 {
    font-size:28px
  }

  .question-count {
    margin:20px 0
  }

  .hero {
    width:100%
  }

  .landing-art {
    max-height:220px
  }

  .mobile h1 {
    font-size:24px
  }

  .program-context {
    margin-bottom:20px
  }

  .quiz-actions {
    gap:8px
  }

  .quiz-actions button {
    padding:12px 8px;
    font-size:14px
  }

  .choice {
    padding:12px;
    gap:10px
  }

  .choice.selected,.choice[aria-pressed=true] {
    padding:11px
  }

  .result-panel {
    padding:20px 12px
  }

  .result-score {
    font-size:48px
  }

  .result-metrics strong {
    font-size:14px
  }

  .result-metrics small {
    font-size:11px
  }

  .winner-info {
    grid-template-columns:1fr;
    gap:16px
  }

  .review-item {
    gap:10px;
    align-items:flex-start
  }

  .review-item .number {
    width:28px;
    height:28px
  }

  .prize-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }

  .prize-list>span {
    padding:12px;
    font-size:13px
  }

  .wheel-label {
    font-size:calc(10px * var(--spin-cell-scale,1))
  }

  .wheel-label .prize-icon {
    height:calc(22px * var(--spin-cell-scale,1))
  }

  .wheel-disc {
    border-width:6px
  }

  .wheel-center {
    width:52px;
    height:52px;
    font-size:20px
  }

  .closed-art {
    max-height:140px
  }

  .public-home {
    margin:12px auto;
    padding:20px 16px
  }

  .public-home h1 {
    font-size:28px
  }

  .program-grid {
    grid-template-columns:1fr
  }

  .login-page {
    display:block;
    margin:0 auto;
    padding:16px;
    max-width:540px
  }

  .login-brand {
    padding:28px;
    border-radius:18px 18px 0 0
  }

  .login-brand strong {
    font-size:40px
  }

  .login-brand strong span {
    font-size:24px
  }

  .login-brand b {
    font-size:18px;
    margin:6px 0 12px
  }

  .login-brand p {
    font-size:14px
  }

  .login-panel {
    padding:28px 20px;
    border-radius:0 0 18px 18px
  }

  .login-form h1 {
    font-size:24px
  }

  .login-copyright {
    display:block
  }

  .error {
    font-size:14px
  }

  .hint-banner {
    align-items:flex-start;
    padding:16px
  }

  .statline {
    flex-wrap:wrap
  }

  .statline>* {
    overflow-wrap:anywhere;
    min-width:0
  }

}

.spin-cell-preview { min-width:0; padding:12px; border:1px solid #e2eae4; border-radius:12px; background:white; }
.spin-preview-title { display:block; color:var(--muted); font-size:12px; font-weight:700; text-align:center; }
.spin-cell-preview .wheel-wrap { width:min(220px,100%); margin:8px auto 0; }
.spin-cell-preview .wheel-center { width:42px; height:42px; font-size:15px; }
.spin-cell-preview .wheel-label { line-height:1.1; }
.prize-cell-preview { margin:12px 0; }
.spin-preview-help { display:block; color:var(--muted); font-size:12px; line-height:1.45; text-align:center; }
.prize-size-control { min-width:120px; }
.prize-size-control label { display:flex; align-items:center; gap:8px; }
.prize-size-control input[type=range] { min-width:90px; min-height:18px; height:18px; margin:0; padding:0; accent-color:var(--green); }
.prize-size-control output { min-width:38px; color:var(--green); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.prize-size-control small { display:block; min-height:14px; color:var(--muted); font-size:10px; }
.prize-size-control small:not(:empty) { line-height:1.3; }
@media(max-width:700px) { .prize-cell-preview .wheel-wrap { width:min(200px,100%); } .prize-size-control { min-width:0; } }

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

}

.participation-steps {
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:0 0 28px;
  padding:0
}

.participation-steps li {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
  color:#698174
}

.participation-steps li>span {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#edf3ef;
  flex-shrink:0;
  font-weight:700
}

.participation-steps .current {
  color:var(--green);
  font-weight:700
}

.participation-steps .current>span {
  background:var(--green);
  color:#fff
}

.participation-steps .done>span {
  background:#dff1e7;
  color:var(--green)
}

.review-summary {
  margin-top:20px;
  font-weight:700;
  color:var(--green)
}

.choice>span:nth-child(2) {
  flex:1;
  overflow-wrap:anywhere
}

.choice-radio {
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid #a8bfb1;
  flex-shrink:0
}

.choice[aria-pressed=true] .choice-radio {
  background:var(--green);
  box-shadow:inset 0 0 0 4px #fff
}

@media(max-width:600px) {
  .participation-steps {
    gap:6px
  }

  .participation-steps li {
    font-size:11px;
    flex-direction:column;
    text-align:center;
    gap:6px
  }

  .participation-steps li>span {
    width:26px;
    height:26px
  }

}

.daily-column {
  max-width:48px
}

.daily-chart {
  justify-content:space-around
}

.sidebar nav a[aria-current="page"],.mobile-menu nav a[aria-current="page"]{background:#e3f3ea;color:var(--green);font-weight:700}.mobile-menu nav a[aria-current="page"]{box-shadow:inset 3px 0 var(--green)}

.program-actions{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap}.program-actions .row-menu{width:auto}.program-actions .danger{min-height:44px;padding:9px 12px;background:#fff1ed;color:#ad382c;border:1px solid #f0d1ca;border-radius:9px}.program-actions .danger:hover{background:#ffe5df}
.program-wizard-backdrop{z-index:60;padding:16px}
.program-wizard{max-width:780px;padding:24px;max-height:calc(100dvh - 32px);display:flex;flex-direction:column}
.program-wizard>header{margin-bottom:14px}
.program-wizard>header h2{margin:0;font-size:21px}
.program-wizard>header p{margin:3px 0 0;font-size:13px}
.program-wizard form{min-height:0;display:flex;flex-direction:column}
.program-wizard .wizard-step{overflow:auto;padding:2px 3px 4px}
.program-wizard .wizard-step>label{display:block;margin:0 0 12px}
.program-wizard .program-types{margin:0 0 12px;gap:10px}
.program-wizard .program-types legend{margin-bottom:7px}
.program-wizard .type-card{padding:10px 14px;gap:2px;border-radius:9px}
.program-wizard .type-symbol .icon{width:22px;height:22px}
.program-wizard .type-card input{top:12px;right:12px}
.program-wizard .type-card small{font-size:12px}
.program-wizard .two{gap:12px}
.program-wizard .two label{min-width:0}
.program-wizard input:not([type=radio]):not([type=checkbox]),.program-wizard select{width:100%;min-height:40px;padding:8px 10px;margin-top:4px}
.program-wizard textarea{width:100%;min-height:58px;padding:8px 10px;margin-top:4px;resize:vertical}
.program-wizard .publish-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 2px}
.program-wizard .publish-setting small{display:block;color:var(--muted);font-weight:400}
.wizard-content-heading,.wizard-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wizard-content-heading{margin:0 0 10px}
.wizard-content-heading strong,.wizard-content-heading small{display:block}
.wizard-content-heading small{font-size:12px;color:var(--muted)}
.wizard-content-heading .button{min-height:38px;padding:7px 11px;white-space:nowrap}
.wizard-item{position:relative;margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:1fr;gap:8px}
.wizard-item legend{font-weight:700;padding:0 4px}
.wizard-item>label{display:block;margin:0}
.wizard-item label{font-size:13px}
.wizard-item label small{font-weight:400;color:var(--muted)}
.wizard-item [data-question-choice]{display:grid;grid-template-columns:1fr 150px;gap:10px;align-items:end}
.wizard-question-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wizard-item textarea{min-height:54px}
.wizard-item .wizard-remove{position:absolute;right:8px;top:2px;min-height:30px;width:30px;padding:0;border:0;background:transparent;color:#8b4038;font-size:21px}
.wizard-footer{border-top:1px solid var(--line);margin-top:10px;padding-top:12px;flex-shrink:0}
.wizard-step-indicator{display:flex;gap:5px}
.wizard-step-indicator i{width:22px;height:5px;border-radius:5px;background:#dce6e1}
.wizard-step-indicator i.active{background:var(--green)}
.wizard-footer .actions{margin:0;gap:8px}
.wizard-footer button{min-height:40px;padding:8px 14px}
.wizard-footer .error{margin:0}
body.wizard-open{overflow:hidden}
@media(max-width:600px){.program-wizard{padding:18px 14px}.program-wizard .two{grid-template-columns:1fr 1fr}.wizard-item [data-question-choice]{grid-template-columns:1fr}.wizard-footer{align-items:flex-start}.wizard-footer .actions{flex-wrap:wrap;justify-content:flex-end}.wizard-step-indicator{padding-top:17px}}
@media(max-width:900px){.program-actions{width:100%}.program-actions .row-menu,.program-actions .danger{flex:1}}
.draw-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}.draw-controls{text-align:center}.draw-controls>label,.draw-controls>select,.draw-controls>#draw-source-help{display:block;text-align:left}.draw-controls select{margin-top:8px}.draw-controls>#draw-source-help{font-size:14px}.draw-visual{position:relative;width:min(300px,75vw);aspect-ratio:1;margin:32px auto}.draw-disc{width:100%;height:100%;border:12px solid #e9bd5b;border-radius:50%;background:repeating-conic-gradient(#087f62 0 30deg,#e5b449 30deg 60deg);display:grid;place-items:center;box-shadow:0 0 0 5px #f8e4aa,inset 0 0 0 5px #fff6d9}.draw-disc span{display:grid;place-items:center;width:76px;height:76px;border:5px solid #edc660;border-radius:50%;background:#fff;color:#087f62;font-size:28px;font-weight:800}.draw-pointer{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;height:48px;background:#c34e2d;clip-path:polygon(0 0,100% 0,50% 100%)}.draw-disc.is-spinning{animation:draw-spin 2.2s cubic-bezier(.12,.72,.12,1) both}.draw-result{padding:18px;background:#eaf6ed;border:1px solid #b7ddc4;border-radius:14px;margin:20px 0;text-align:center}.draw-result span,.draw-result small{display:block;color:#536c60}.draw-result strong{display:block;font-size:clamp(24px,4vw,36px);color:#087f62;overflow-wrap:anywhere;margin:8px 0}.manual-entry-card h2{margin-bottom:8px}.manual-entry-card>p{margin-bottom:18px}.manual-entry-card form small{color:var(--muted)}.manual-entry-card form button{margin-top:14px}.manual-entry-list{margin-top:28px}.manual-entry-list h3{font-size:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}.manual-entry-list h3 span{color:var(--muted);font-weight:500}.manual-entry-list ul{list-style:none;padding:0;margin:0;max-height:420px;overflow:auto}.manual-entry-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.manual-entry-list li>span{overflow-wrap:anywhere}.manual-entry-list li .danger{min-height:40px;padding:8px 12px;background:#fff1ed;color:#ad382c;border:1px solid #f0d1ca;border-radius:9px}.empty-copy{padding:18px 0}.draw-controls button:disabled{opacity:.55}@keyframes draw-spin{to{transform:rotate(1800deg)}}@media(max-width:900px){.draw-layout{grid-template-columns:1fr}.draw-visual{width:min(280px,65vw)}}@media(prefers-reduced-motion:reduce){.draw-disc.is-spinning{animation-duration:1ms}}

/* Compact, illustrated registration page */
.mobile[data-screen=register] { max-width:980px; }
.mobile[data-screen=register] > main { padding:24px 30px 26px; }
.mobile[data-screen=register] .program-context { margin-bottom:14px; padding-bottom:10px; }
.mobile[data-screen=register] .participation-steps { margin:0 0 16px; }
.registration-hero { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:20px; align-items:center; padding:22px 24px; border-radius:20px; background:linear-gradient(115deg,#eff8f0,#f8f3df); overflow:hidden; }
.registration-kicker { display:inline-flex; align-items:center; gap:7px; color:#087f62; font-size:11px; font-weight:800; letter-spacing:.09em; }
.registration-kicker .icon { width:17px; height:17px; }
.registration-copy h1 { margin:7px 0 4px; font-size:clamp(22px,3vw,30px); line-height:1.15; }
.registration-copy>p { margin:0; color:#66776e; font-size:13px; line-height:1.45; }
.registration-meta { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; color:#53695d; font-size:11px; }
.registration-meta span { display:inline-flex; align-items:center; gap:5px; }
.registration-meta .icon { width:15px; height:15px; color:#087f62; }
.registration-art { position:relative; min-height:124px; display:flex; justify-content:center; align-items:center; }
.registration-art img { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 10px 12px #174c3322); }
.registration-art span { position:absolute; right:0; bottom:0; padding:7px 10px; border-radius:12px; color:#fff; background:#087f62; font-size:10px; line-height:1.15; transform:rotate(-4deg); box-shadow:0 4px 12px #174c3325; }
.registration-art strong { font-size:12px; }
.registration-form-panel { margin-top:16px; }
.registration-form-heading { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:8px; }
.registration-form-heading h2 { margin:0; font-size:18px; }
.registration-form-heading p { margin:3px 0 0; color:#75847a; font-size:12px; }
.required-note { font-size:11px; color:#718077; }
.required-note em { color:#ba473d; font-style:normal; }
.registration-fields { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.registration-field { margin-top:10px; }
.registration-field>span:first-child { margin-bottom:5px; font-size:12px; }
.registration-field small { color:#89958e; font-weight:400; }
.registration-field .input-with-icon { min-height:43px; border-radius:10px; }
.registration-field .input-with-icon .icon { width:17px; height:17px; }
.registration-field .input-with-icon input { padding:10px 0; font-size:13px; }
.registration-form-panel .consent { margin:14px 0 10px; font-size:11px; line-height:1.45; }
.registration-form-panel .gold-button { min-height:46px; font-size:14px; }
@media(max-width:620px) {
  .mobile[data-screen=register] { max-width:480px; }
  .mobile[data-screen=register] > main { padding:14px 15px 17px; border-radius:18px; }
  .registration-hero { grid-template-columns:minmax(0,1fr) 100px; gap:8px; padding:14px; border-radius:15px; }
  .registration-art { min-height:90px; }
  .registration-art img { width:100px; height:100px; }
  .registration-art span { right:-2px; bottom:-2px; padding:5px 7px; font-size:8px; }
  .registration-art strong { font-size:9px; }
  .registration-meta { gap:6px 10px; font-size:10px; margin-top:8px; }
  .registration-copy h1 { font-size:20px; }
  .registration-copy>p { font-size:11px; }
  .registration-form-panel { margin-top:12px; }
  .registration-field { margin-top:8px; }
  .registration-field>span:first-child { font-size:11px; }
  .registration-field .input-with-icon { gap:8px; padding:0 9px; min-height:40px; }
  .registration-field .input-with-icon input { font-size:12px; }
  .registration-form-panel .consent { margin:11px 0 9px; }
}

/* Names on the admin draw wheel */
.draw-source-badge { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; text-align:left; border-radius:12px; background:#f1f7f2; }
.draw-source-badge span { color:#718077; font-size:12px; }
.draw-source-badge strong { color:#087f62; font-size:14px; }
.draw-source-badge small { color:#718077; font-size:12px; }
.draw-wheel-note { margin:10px 0 0; color:#718077; font-size:12px; line-height:1.45; text-align:left; }
.draw-visual { width:min(360px,78vw); margin:28px auto; }
.draw-disc { position:relative; overflow:hidden; background:repeating-conic-gradient(from -5.625deg,#087f62 0deg 11.25deg,#e5b449 11.25deg 22.5deg); }
.draw-wheel-names { position:absolute; inset:0; border-radius:50%; }
.draw-wheel-names span { position:absolute; top:50%; left:50%; display:block; width:43%; height:auto; padding:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border:0; border-radius:0; background:transparent; transform:rotate(calc(var(--wheel-index) * 22.5deg)) translateY(-90px) rotate(calc(var(--wheel-index) * -22.5deg)); transform-origin:center; color:#fff; font-size:clamp(8px,1.2vw,11px); font-weight:800; text-align:right; text-shadow:0 1px 2px #123; }
.draw-wheel-names .wheel-empty { top:50%; left:50%; width:48%; transform:translate(-50%,-50%); text-align:center; white-space:normal; color:#52655b; text-shadow:none; }
.draw-wheel-hub { position:absolute; z-index:2; top:50%; left:50%; display:grid; place-items:center; width:64px; height:64px; transform:translate(-50%,-50%); border:5px solid #edc660; border-radius:50%; background:white; color:#087f62; font-size:22px; font-weight:900; }
.draw-controls .draw-result { margin-top:14px; }
@media(max-width:900px) { .draw-wheel-names span { transform:rotate(calc(var(--wheel-index) * 22.5deg)) translateY(-72px) rotate(calc(var(--wheel-index) * -22.5deg)); } }
.mobile[data-screen=registered] { max-width:700px; }
.draw-registration-success { max-width:560px; margin:0 auto; padding:14px 8px 6px; text-align:center; }
.draw-registration-icon { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 16px; border:1px solid #b9dfc8; border-radius:50%; background:#e8f6ec; color:#087f62; }
.draw-registration-icon .icon { width:30px; height:30px; stroke-width:2.4; }
.draw-registration-success h1 { margin:10px 0; font-size:clamp(24px,4vw,32px); line-height:1.2; }
.draw-registration-success>p { margin:0 auto 20px; max-width:460px; color:#64746a; font-size:14px; line-height:1.6; }
.draw-registration-person { margin:0 0 20px; padding:15px; border-radius:13px; background:#f3f8f3; }
.draw-registration-person small,.draw-registration-person strong { display:block; }
.draw-registration-person small { margin-bottom:5px; color:#75847a; font-size:12px; }
.draw-registration-person strong { color:#087f62; font-size:18px; }

/* Public system home */
.public-home { width:min(1160px,calc(100% - 48px)); margin:0 auto; padding:30px 0 24px; }
.home-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.home-brand { display:inline-flex; align-items:center; min-height:48px; }
.home-brand img { display:block; width:149px; height:61px; object-fit:contain; }
.home-login { min-height:44px; padding:10px 16px; border-radius:999px; font-size:14px; }
.home-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.92fr); align-items:center; gap:48px; min-height:460px; margin-top:24px; padding:54px 64px; overflow:hidden; border:1px solid #dfebe3; border-radius:30px; background:linear-gradient(120deg,#fff 0%,#f4faf5 100%); }
.home-copy { max-width:520px; }
.home-eyebrow { display:inline-block; color:#087f62; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.home-copy h1 { margin:16px 0; color:#173c35; font-size:clamp(36px,5vw,58px); line-height:1.1; letter-spacing:-1.7px; }
.home-copy>p { max-width:490px; font-size:17px; line-height:1.7; }
.home-primary { margin-top:28px; padding:14px 20px; border-radius:12px; }
.home-primary span { font-size:19px; }
.home-visual { position:relative; display:grid; place-items:center; min-height:300px; border-radius:24px; background:radial-gradient(ellipse at center,#e5f3e6 0%,#eef7ef 57%,#f7faf5 100%); }
.home-visual img { display:block; width:min(100%,420px); height:auto; }
.home-sparkle { position:absolute; color:#d3a43a; }
.home-sparkle-one { top:24px; right:34px; font-size:32px; }
.home-sparkle-two { bottom:32px; left:28px; font-size:38px; }
.home-experiences { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:22px; }
.home-experience { display:flex; align-items:flex-start; gap:18px; min-height:140px; padding:26px; border:1px solid #e2eae4; border-radius:20px; background:#fff; }
.home-experience h2 { margin:2px 0 8px; font-size:19px; }
.home-experience p { max-width:410px; font-size:14px; line-height:1.65; }
.home-icon { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:15px; font-size:25px; font-weight:800; }
.home-icon-quiz { color:#087f62; background:#e5f4e9; }
.home-icon-spin { color:#a36d05; background:#fff3d4; }
.home-join { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:22px; padding:28px 32px; border-radius:20px; background:#eaf4ec; }
.home-join h2 { margin:7px 0 5px; font-size:22px; }
.home-join p { font-size:14px; }
.home-join-mark { color:#087f62; font-size:32px; }
.home-footer { display:flex; justify-content:space-between; gap:16px; margin-top:26px; padding:18px 2px 0; border-top:1px solid #dfe8e3; color:#718078; font-size:13px; }
.home-footer a { color:#087f62; text-decoration:none; font-weight:600; }
@media(max-width:760px) {
  .public-home { width:min(100% - 32px,560px); padding-top:16px; }
  .home-brand img { width:126px; height:auto; }
  .home-login { min-height:40px; padding:8px 12px; font-size:12px; }
  .home-hero { grid-template-columns:1fr; gap:24px; min-height:0; margin-top:18px; padding:30px 24px 24px; border-radius:24px; }
  .home-copy h1 { max-width:500px; margin:12px 0; font-size:clamp(34px,9vw,46px); }
  .home-copy>p { font-size:15px; }
  .home-primary { margin-top:20px; }
  .home-visual { min-height:0; aspect-ratio:1.5; }
  .home-visual img { width:min(100%,360px); }
  .home-experiences { grid-template-columns:1fr; gap:12px; margin-top:14px; }
  .home-experience { min-height:0; padding:20px; }
  .home-join { margin-top:14px; padding:22px 20px; }
  .home-join p { max-width:420px; }
  .home-footer { margin-top:20px; font-size:12px; }
}
@media(max-width:420px) {
  .home-header { gap:8px; }
  .home-brand img { width:108px; }
  .home-login { padding-inline:10px; }
  .home-hero { padding:25px 19px 19px; }
  .home-eyebrow { font-size:11px; }
  .home-copy h1 { font-size:34px; }
  .home-join { align-items:flex-start; }
}

/* JC Global visual system: warm ivory, wine red and muted gold */
:root {
  --green:#641629;
  --ink:#35131e;
  --line:#e8d9bb;
  --surface:#fffaf0;
  --muted:#75656a;
  --wine:#450c1b;
  --ruby:#8c2940;
  --gold:#c89438;
  --cream:#fff8e8;
  --soft-gold:#f4e8cb;
}
body { color:var(--ink); background:#f5efdf; }
.shell { background:#f5efdf; }
.sidebar { color:var(--cream); background:linear-gradient(165deg,#3e0a19 0%,#641629 64%,#791d32 100%); border-right:1px solid #a77c3d; }
.sidebar .logo,.sidebar .logo small { color:var(--cream); }
.sidebar nav a { color:#f2e6d3; }
.sidebar nav a:hover { background:rgba(255,248,232,.12); color:#fff; }
.sidebar nav a.active { color:#42101c; background:linear-gradient(120deg,#e8c675,#c89438); box-shadow:0 5px 16px #2608124a; }
.sidebar .foot { border-color:#94606c; }
.sidebar .foot button { color:#fff4e4; }
.app-topbar { background:#fffaf0; border-bottom:1px solid var(--line); }
.app-topbar .app-brand,.app-brand { color:var(--wine); }
.workspace-label { color:#8a7371; }
.main { color:var(--ink); }
.card,.tablewrap,.editor-card,.login-panel,.modal-card { background:var(--surface); border-color:var(--line); box-shadow:0 10px 30px rgba(77,29,35,.06); }
.page-head h1,.card h2,.table-title { color:var(--wine); }
.page-head p,.card p,.help,.muted { color:var(--muted); }
.button,button,.gold-button { color:#fff8e8; border-color:#9a6430; background:linear-gradient(135deg,#84233b,#4b0e20); box-shadow:0 4px 12px rgba(78,14,31,.13); }
.button:hover,button:hover,.gold-button:hover { background:linear-gradient(135deg,#9b3047,#641629); }
.button.secondary,.secondary,.row-menu { color:var(--wine); border-color:#d8bd85; background:#fff8e8; box-shadow:none; }
.button.secondary:hover,.secondary:hover { background:#f5e9cc; }
.danger { color:#8f2435; border-color:#e5bbc0; background:#fff2f0; box-shadow:none; }
input,select,textarea { color:var(--ink); border-color:#d9c69e; background:#fffdf8; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px #c8943828; }
.tabs { border-color:var(--line); }
.tab { color:#78686b; }
.tab.active { color:var(--wine); border-color:var(--gold); }
table th { color:#6a4b3e; background:#f7efdD; border-color:#e9d9b8; }
table td { border-color:#eee3ce; }
.tag,.program-emblem,.number { color:var(--wine); background:#f4e8cb; }
.hint-banner { color:var(--wine); border-color:#e5d2a9; background:#fff6df; }
.hint-banner .number { color:#a36d17; }
.login-page { background:radial-gradient(ellipse at 20% 15%,#fff9e9,transparent 50%),linear-gradient(140deg,#f7efdc,#ead8b6); }
.login-brand { color:#fff8e8; background:linear-gradient(145deg,#762039,#3d0a19); border:1px solid #c49b52; box-shadow:0 18px 50px #4b10222b; }
.login-brand strong { color:#f1d58f; }
.login-brand strong .icon { width:24px; height:24px; vertical-align:middle; }
.login-panel { border:1px solid #e4d2ad; }
.login-form h1 { color:var(--wine); }
.mobile-menu summary { color:var(--wine); }
.mobile-menu summary .icon { width:21px; height:21px; vertical-align:middle; }
.mobile-menu nav { background:#fffaf0; border-color:var(--line); box-shadow:0 12px 30px #35131e1a; }
.icon { width:18px; height:18px; flex:0 0 auto; vertical-align:middle; }
.pagination .icon,.row-menu .icon { width:16px; height:16px; }
.home-hero { border-color:#e4d2ad; background:linear-gradient(120deg,#fffaf0 0%,#f4e8cb 100%); box-shadow:0 20px 55px rgba(76,25,35,.08); }
.home-eyebrow { color:#8c2940; }
.home-copy h1 { color:#4c1223; }
.home-visual { background:radial-gradient(ellipse at center,#f5e4bb 0%,#fff7e5 62%,#fbf7ed 100%); }
.home-sparkle .icon { width:34px; height:34px; stroke:#bd8d35; }
.home-icon { border:1px solid #e7d6b3; }
.home-icon .icon { width:25px; height:25px; }
.home-icon-quiz { color:#641629; background:#f3e5d6; }
.home-icon-spin { color:#98651b; background:#fbf0d8; }
.home-experience { border-color:#e8dcc5; background:#fffaf0; box-shadow:0 8px 25px #4d1d2310; }
.home-join { color:var(--ink); background:#f2e4c4; }
.home-join-mark .icon,.home-footer a .icon { width:20px; height:20px; }
.home-footer { color:#7d6a6d; border-color:#e3d5bb; }
.home-footer a { color:var(--wine); }
.public-body { background:radial-gradient(ellipse at 50% 0%,#fff9e8 0%,#f4ead5 58%,#eee3cc 100%); }
.mobile>main { background:#fffaf0; border-color:#e6d5b2; box-shadow:0 16px 45px rgba(72,23,33,.1); }
.app-brand { color:var(--wine); }
.app-brand span { color:#8d6a56; }
.program-context { color:#6b2438; }
.participation-steps li.current { color:var(--wine); }
.participation-steps li.current span,.participation-steps li.done span { color:#fff8e8; background:linear-gradient(140deg,#a33d4c,#641629); border-color:#d0a34e; }
.participation-steps li.done span .icon { width:14px; height:14px; }
.registration-hero { border-color:#e2ca91; background:linear-gradient(125deg,#fff7e3,#f5e7c9 65%,#edd9ad); box-shadow:0 10px 28px rgba(97,46,29,.08); }
.registration-copy h1,.draw-registration-success h1 { color:var(--wine); }
.registration-copy>p,.draw-registration-success>p { color:#74656a; }
.registration-art { background:radial-gradient(circle at 50% 55%,#f8e6b9,#fff8e8 68%); }
.registration-art span { color:#fff8e8; background:#6a1b31; }
.registration-meta { color:#785d50; }
.registration-meta .icon { color:#9e7229; }
/* .registration-form-panel,.draw-registration-person { border:1px solid #eadcbc; background:#fffdf8; } */
.registration-field .input-with-icon { border-color:#e1d0ae; background:#fff; }
.registration-field .input-with-icon>.icon { color:#9a7131; }
.registration-form-panel .consent { color:#73666a; }
.draw-registration-icon { color:#641629; border-color:#e2cc99; background:#f8edcf; }
.draw-registration-person { background:#fbf5e8; }
.draw-registration-person strong { color:var(--wine); }
.quiz-stage-heading,.public-stage-heading { color:var(--wine); }
.quiz-stage-heading { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.quiz-stage-heading img { width:76px; height:76px; object-fit:contain; padding:6px; border:1px solid #ead8b2; border-radius:18px; background:#fff4db; }
.quiz-stage-heading h1 { margin:0; font-size:21px; line-height:1.25; }
.quiz-stage-heading .icon { display:block; margin-bottom:5px; color:#a77925; }
.public-stage-heading { display:flex; align-items:center; justify-content:center; gap:14px; margin:2px 0 8px; }
.public-stage-heading img { width:110px; height:100px; object-fit:contain; }
.public-stage-heading h1 { margin:0; color:var(--wine); }
.review-illustration { display:grid; place-items:center; margin:10px auto 14px; }
.review-illustration img,.result-illustration { display:block; width:min(190px,60%); max-height:155px; margin:0 auto; object-fit:contain; }
.closed-art { display:block; width:150px; height:150px; margin:0 auto 14px; object-fit:contain; }
.draw-source-badge { background:#f8efd9; border:1px solid #e7d5ad; }
.draw-source-badge span,.draw-wheel-note { color:#796b67; }
.draw-source-badge strong { color:var(--wine); }
.draw-disc { border:6px solid #c89438; box-shadow:0 12px 28px rgba(73,17,31,.18); background:repeating-conic-gradient(from -5.625deg,#6a1930 0deg 11.25deg,#c89438 11.25deg 22.5deg); }
.draw-wheel-names span { color:#fff8e8; text-shadow:0 1px 3px #2c0a14; }
.draw-wheel-hub { border-color:#d3aa54; background:#fff6df; color:var(--wine); }
.draw-registration-success .button { margin-top:4px; }
.registered-illustration { display:block; width:150px; height:120px; margin:0 auto 4px; object-fit:contain; }
.draw-wheel-names span { width:43%; transform:rotate(var(--wheel-angle)) translateY(var(--wheel-distance)) rotate(var(--wheel-counter-angle)); }
@media(max-width:900px) { .draw-wheel-names span { transform:rotate(var(--wheel-angle)) translateY(var(--wheel-distance)) rotate(var(--wheel-counter-angle)); } }
.quiz-actions .icon { width:17px; height:17px; }
.question-card .icon { width:15px; height:15px; color:#8e6a21; vertical-align:middle; }
.wizard-dialog,.wizard-card { background:#fffaf0; }
.close .icon,.wizard-remove .icon { width:17px; height:17px; }
.sidebar .logo { display:flex; align-items:center; gap:11px; color:var(--cream); font-size:20px; letter-spacing:-.4px; }
.sidebar .logo img { width:46px; height:36px; padding:2px; border-radius:7px; background:#fff8e8; object-fit:contain; }
.app-brand img { display:block; width:38px; height:32px; padding:1px; border-radius:5px; background:#fff8e8; object-fit:contain; }
.home-brand { gap:9px; color:var(--wine); font-size:22px; font-weight:800; letter-spacing:-.5px; text-decoration:none; }
.home-brand img { width:48px; height:34px; padding:1px; border-radius:5px; background:#fff8e8; }
.login-brand>img { display:block; width:150px; height:100px; padding:10px; margin-bottom:14px; border:1px solid #d7b963; border-radius:20px; background:#fff8e8; object-fit:contain; }
.login-brand>b { color:#f7e6bd; }
@media(max-width:700px) {
  .public-stage-heading { gap:8px; }
  .public-stage-heading img { width:82px; height:76px; }
  .quiz-stage-heading img { width:60px; height:60px; }
}

/* Compact admin workspace density */


.shell { height:100dvh; min-height:100dvh; }
.shell .sidebar { width:216px; height:100dvh; padding:18px 12px; }
.shell .brandrow { padding:0 8px 20px; }
.shell .sidebar nav { gap:4px; }
.shell .sidebar nav a { min-height:40px; padding:9px 10px; gap:10px; border-radius:8px; font-size:13px; }
.shell .sidebar nav a .icon { width:18px; height:18px; }
.shell .sidebar .foot { padding-top:14px; }
.shell .workspace { display:flex; flex-direction:column; height:100dvh; min-height:0; }
.shell .app-topbar { flex:0 0 auto; min-height:56px; padding:8px 22px; }
.shell .app-brand { gap:8px; font-size:20px; }
.shell .app-brand span { font-size:14px; }
.shell .app-brand img { width:34px; height:28px; }
.shell .main { width:100%; max-width:1440px; flex:1 1 auto; min-height:0; overflow:auto; padding:16px 22px 22px; }
.shell .main h1 { font-size:clamp(22px,2vw,28px); line-height:1.18; letter-spacing:-.45px; }
.shell .main h2 { font-size:17px; line-height:1.25; }
.shell .page-head { align-items:center; gap:12px; margin-bottom:12px; }
.shell .page-head p { margin-top:4px; font-size:13px; }
.shell .page-head .button { min-height:36px; }
.shell .tabs { gap:4px; margin:10px 0; padding-bottom:2px; }
.shell .tabs .tab { min-height:34px; padding:7px 11px; border-radius:8px; font-size:13px; }
.shell .card, .shell .program-fields, .shell .other-settings, .shell .program-summary { padding:15px 16px; border-radius:12px; }
.shell .card { margin-top:12px; }
.shell .card h2 { margin-bottom:8px; }
.shell .grid, .shell .two, .shell .dashboard-bottom, .shell .person-columns { gap:12px; }
.shell .actions, .shell .program-actions { gap:7px; }
.shell .button, .shell button { min-height:36px; padding:8px 12px; border-radius:8px; font-size:13px; }
.shell .icon { width:17px; height:17px; }
.shell input, .shell select, .shell textarea { min-height:38px; margin:4px 0 10px; padding:8px 10px; border-radius:8px; font-size:14px; }
.shell textarea { min-height:76px; }
.shell input[type=checkbox], .shell input[type=radio] { min-height:18px; width:18px; height:18px; }
.shell .toolbar { gap:8px; margin:8px 0 12px; }
.shell .toolbar input, .shell .toolbar select { margin:0; }
.shell .search-input { min-height:40px; }
.shell .search-input input { min-height:38px; font-size:14px; }
.shell .filter-menu { gap:8px; }
.shell .filter-menu select { width:160px; }
.shell .tablewrap, .shell .people-table, .shell .prize-table { border-radius:12px; }
.shell th { padding:9px 10px; font-size:12px; }
.shell td { padding:10px; font-size:13px; }
.shell .table-title, .shell .row-menu { min-height:34px; font-size:13px; }
.shell .tag { padding:5px 8px; font-size:11px; }
.shell .program-actions .danger { min-height:34px; padding:7px 10px; font-size:12px; }
.shell .pagination { gap:8px; margin:12px 0; }
.shell .page-buttons .button, .shell .current-page { min-height:34px; }
.shell .empty { margin:12px 0; padding:28px 16px; }
.shell .hint-banner { gap:10px; padding:12px 14px; margin-bottom:12px; }
.shell .dashboard-date { margin-bottom:10px; }
.shell .dashboard-grid { gap:10px; }
.shell .dashboard-metric { gap:11px; padding:12px; }
.shell .metric-icon { width:40px; height:40px; border-radius:10px; }
.shell .dashboard-metric strong { font-size:24px; line-height:1.1; }
.shell .dashboard-metric small { font-size:11px; }
.shell .daily-card { padding:15px 16px; }
.shell .daily-card>.row { margin-bottom:12px; }
.shell .daily-plot { height:156px; }
.shell .daily-bars { height:130px; }
.shell .dashboard-bottom { gap:12px; }
.shell .dashboard-bottom>.card { margin-top:12px; }
.shell .donut-row { gap:14px; }
.shell .donut { width:112px; height:112px; }
.shell .donut span { width:78px; height:78px; font-size:24px; }
.shell .device-row { gap:9px; margin:14px 0; }
.shell .device-bar { margin-top:6px; }
.shell .program-summary { gap:12px; margin:10px 0; }
.shell .program-emblem { width:48px; height:48px; border-radius:11px; }
.shell .program-emblem .icon { width:25px; height:25px; }
.shell .summary-body p, .shell .summary-body small { gap:6px; margin-top:5px; font-size:12px; }
.shell .program-fields h2, .shell .other-settings h2 { margin-bottom:10px; }
.shell .program-types { gap:10px; margin:0 0 12px; }
.shell .program-types legend { margin-bottom:6px; }
.shell .type-card { gap:4px; padding:12px; border-radius:10px; }
.shell .type-card .type-symbol .icon { width:25px; height:25px; }
.shell .type-card input { right:10px; top:11px; }
.shell .description-count, .shell .character-count { margin:2px 0 8px; }
.shell .other-settings { margin-top:12px; }
.shell .publish-setting { gap:9px; }
.shell .form-actions, .shell .editor-actions { gap:8px; margin-top:12px; }
.shell .editor-card { padding:15px 16px; }
.shell .editor-advanced { margin-top:12px; padding-top:10px; }
.shell .editor-advanced summary { min-height:36px; }
.shell .option-row { gap:7px; margin:7px 0; }
.shell .question-image { margin:12px 0; }
.shell .upload-placeholder { padding:12px; gap:6px; }
.shell .question-image-preview { max-height:140px; }
.shell .question-card { gap:12px; }
.shell .question-body p { margin-top:6px; }
.shell .program-actions .row-menu { min-height:34px; }
.shell .people-scope { gap:10px; margin-bottom:8px; }
.shell .people-scope select { min-height:38px; }
.shell .export-link { min-height:36px; font-size:13px; }
.shell .prize-icon { height:30px; }
.shell .prize-totals { gap:10px; margin-top:12px; }
.shell .prize-totals>span { padding:12px; }
.shell .copy-row { gap:8px; margin-top:12px; }
.shell .share-actions { gap:8px; margin-top:12px; }
.shell .qr-image { width:180px; height:180px; margin:10px auto; padding:8px; }
.shell .share-qr h2 { margin-top:10px; }
.shell .person-head { gap:12px; }
.shell .person-avatar, .shell .avatar { width:40px; height:40px; }
.shell .participation-info dl { gap:9px; font-size:13px; }
.shell .detail-answer { gap:9px; margin:12px 0; padding-top:10px; }
.shell .detail-answer p { margin-top:5px; }
.shell .draw-layout { gap:12px; }
.shell .draw-controls { padding:14px; }
.shell .draw-visual { width:min(248px,60vw); margin:17px auto; }
.shell .draw-disc { border-width:8px; }
.shell .draw-result { padding:12px; margin:12px 0; }
.shell .draw-result strong { font-size:24px; margin:5px 0; }
.shell .manual-entry-list { margin-top:16px; }
.shell .manual-entry-list h3 { padding-bottom:8px; }
.shell .manual-entry-list ul { max-height:220px; }
.shell .manual-entry-list li { gap:8px; padding:7px 0; }
.shell .manual-entry-list li .danger { min-height:32px; padding:6px 9px; }
.shell .create-content { max-width:1040px; }
.shell .create-content form#program-form { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:12px; align-items:start; }
.shell .create-content form#program-form>.form-actions { grid-column:1/-1; margin-top:0; }
.login-page { margin:4vh auto; padding:16px; max-height:92dvh; }
.login-brand { padding:28px 30px; }
.login-brand>img { width:112px; height:76px; padding:7px; margin-bottom:8px; border-radius:14px; }
.login-brand>b { margin:5px 0 14px; font-size:22px; }
.login-brand p { font-size:13px; line-height:1.5; }
.login-panel { padding:26px; }
.login-form>p { margin:7px 0 18px; }
.login-input { margin-bottom:12px; }
.login-options { margin-bottom:14px; }
.login-copyright { margin-top:10px; }
@media(max-width:1100px) and (min-width:901px) {
  .shell .main { padding:14px 16px 18px; }
  .shell .sidebar { width:194px; }
  .shell .create-content form#program-form { grid-template-columns:minmax(0,1fr) minmax(260px,.9fr); }
}
@media(max-width:900px) {
  .shell { height:100dvh; min-height:100dvh; }
  .shell .workspace { height:100dvh; }
  .shell .app-topbar { min-height:52px; padding:7px 16px; }
  .shell .main { padding:14px 16px 18px; }
  .shell .page-head { margin-bottom:10px; }
  .shell .create-content form#program-form { grid-template-columns:1fr; }
  .shell .create-content form#program-form>.form-actions { grid-column:auto; }
}
@media(max-width:600px) {
  .shell .main { padding:12px 12px 16px; }
  .shell .page-head { gap:8px; }
  .shell .card, .shell .program-fields, .shell .other-settings, .shell .program-summary { padding:12px; }
  .shell .dashboard-metric { flex-direction:row; align-items:center; }
  .shell .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shell .type-card { padding:10px; }
  .login-page { margin:0 auto; padding:12px; max-height:none; }
  .login-brand { padding:18px; }
  .login-panel { padding:18px; }
}
.shell .icon-actions { flex-wrap:nowrap; gap:5px; }
.shell .icon-action { display:inline-grid; place-items:center; flex:0 0 34px; width:34px; min-width:34px; height:34px; min-height:34px; padding:0; border:1px solid #d8bd85; border-radius:8px; color:var(--wine); background:#fff8e8; text-decoration:none; }
.shell .icon-action .icon { width:17px; height:17px; }
.shell .icon-action:hover { background:#f4e8cb; filter:none; }
.shell .icon-action.danger { color:#8f2435; border-color:#e5bbc0; background:#fff2f0; }
.shell .draw-row-action { color:#fff8e8; border-color:#9a6430; background:linear-gradient(135deg,#84233b,#4b0e20); }
.shell .draw-row-action:hover { background:linear-gradient(135deg,#9b3047,#641629); }
.table-draw-backdrop { z-index:65; padding:16px; }
.table-draw-modal { max-width:510px; padding:20px; border:1px solid #e4d2ad; border-radius:16px; background:#fffaf0; }
.table-draw-modal>header { margin-bottom:8px; }
.table-draw-modal>header h2 { margin:0; color:var(--wine); font-size:20px; }
.table-draw-modal>header p { margin-top:3px; font-size:13px; }
.table-draw-modal .draw-wheel-note { margin:0; text-align:left; }
.table-draw-modal .draw-visual { width:min(320px,70vw); margin:12px auto; }
.table-draw-modal .draw-result { margin:8px 0; padding:10px; }
.table-draw-modal .draw-result strong { font-size:24px; }
.table-draw-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.table-draw-actions .icon { width:16px; height:16px; }
@media(max-width:600px) {
  .table-draw-modal { padding:16px 14px; }
  .table-draw-modal .draw-visual { width:min(270px,68vw); margin:8px auto; }
}