:root{color-scheme:light;--bg:#fff8ee;--surface:#fff;--text:#2d2118;--muted:#6f6258;--border:#eadcc9;--accent:#a9420d;--fill:#f47b20;--fill-text:#251309;--hover:#fff1dc}
[data-theme=dark]{color-scheme:dark;--bg:#0a1128;--surface:#111c3a;--text:#edf3fc;--muted:#b1c0d6;--border:#375072;--accent:#72e1f2;--fill:#ffb000;--fill-text:#231500;--hover:#192c52}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 "Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}a{color:var(--accent);text-underline-offset:.23em}nav{border-bottom:1px solid var(--border);background:var(--surface)}.nav-inner,main,footer{width:min(1000px,calc(100% - 28px));margin-inline:auto}.nav-inner,footer,.actions{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}.nav-inner{min-height:60px;padding-block:6px}.brand{font-weight:800;margin-right:auto;color:var(--text);text-decoration:none}.nav-inner a,.button,button,summary{min-height:44px}.nav-inner a,.button,button{display:inline-flex;justify-content:center;align-items:center}main{margin-top:16px}.compact{max-width:580px}.panel{border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:clamp(16px,4vw,36px);margin-block:14px}.hero{padding-block:clamp(16px,4vw,40px)}.hero img{display:block;width:100%;height:auto;border-radius:16px;margin-top:20px}.eyebrow{color:var(--accent);font-weight:800;font-size:.86rem;margin-bottom:5px}h1,h2,h3,p{margin:0 0 8px}h1{font-size:clamp(1.85rem,5vw,3.75rem);line-height:1.17}h2{font-size:1.3rem}.lead,.muted,footer{color:var(--muted)}.actions{margin-top:13px}.button,button{background:var(--surface);color:var(--accent);border:1px solid var(--border);border-radius:12px;padding:8px 14px;font:inherit;font-weight:750;text-decoration:none;cursor:pointer;touch-action:manipulation}.primary{background:var(--fill);color:var(--fill-text);border-color:transparent}button:disabled{opacity:.65;cursor:default}form>label,.field{display:grid;gap:5px;margin:12px 0;font-weight:700}input,textarea,select{font:inherit;color:var(--text);border:1px solid var(--border);background:var(--bg);border-radius:11px;padding:10px;width:100%;min-height:46px}textarea{resize:vertical}summary{padding:8px 0;cursor:pointer;color:var(--accent);font-weight:750}details{border-top:1px solid var(--border);padding-top:4px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.form-grid label{display:grid;gap:4px}.span{grid-column:1/-1}.full{width:100%;margin-top:14px}.status{margin-top:10px}.status:empty{display:none}.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));padding:0;list-style:none}.grid li{background:var(--hover);border-radius:14px;padding:14px}.item{border-bottom:1px solid var(--border);overflow-wrap:anywhere;padding-bottom:8px}.item p{white-space:pre-wrap}.item time{color:var(--muted);font-size:.9rem}.selected{color:var(--accent);font-weight:750}footer{justify-content:space-between;margin-block:20px}dialog{max-width:min(430px,calc(100% - 24px));background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:20px}dialog::backdrop{background:#0009}.button,button,input,textarea,select,summary{transition:background-color .16s,border-color .16s,transform .16s}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.button:active,button:not(:disabled):active{transform:scale(.985)}@media(hover:hover){.button:not(.primary):hover,button:not(:disabled):not(.primary):hover,summary:hover{background:var(--hover)}.primary:hover{filter:brightness(1.08)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;transform:none!important}}@media(max-width:350px){.form-grid{grid-template-columns:1fr}}

/* Shared event styling for the audience form and instructor inbox. */
.expo {
  --bg:#101448;
  --surface:#11194c;
  --text:#f8fbff;
  --muted:#d1dcff;
  --border:#7483be;
  --accent:#a8f2ff;
  --fill:#fff45e;
  --fill-text:#161148;
  --hover:#253271;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 12% 8%, #86f9ff99 0, transparent 26%),
    linear-gradient(142deg, transparent 54%, #81c6ff24 54% 63%, transparent 63%),
    linear-gradient(30deg, transparent 63%, #83eaff24 63% 76%, transparent 76%),
    linear-gradient(180deg, #00bafa 60px, #0064d3 300px, #321095 670px, #181044);
}
[data-theme=light] .expo {
  --bg:#f2f6ff;
  --surface:#fff;
  --text:#152254;
  --muted:#3f507d;
  --border:#a1afd0;
  --accent:#263c91;
  --hover:#e8efff;
  background-color:#e8efff;
  background-image:linear-gradient(180deg, #04b6f6 60px, #1954be 290px, #e8efff 640px);
}
.expo nav {
  --surface:#131313;
  --border:#666;
  --accent:#fff;
  --hover:#303030;
  color:#fff;
}
.expo .nav-inner, .expo main, .expo-banner {
  width:min(1160px, calc(100% - 28px));
  margin-inline:auto;
}
.expo .nav-inner {gap:6px 18px}
.expo .nav-inner a {text-decoration:none;font-weight:750}
.expo .brand img {display:block;width:176px;height:auto}
.expo nav button {border-radius:4px}
.expo-banner {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:clamp(16px, 4vw, 50px);
  padding-block:clamp(20px, 5vw, 55px);
  color:#fff;
}
.expo-banner::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 22%, #fff 0 1px, #73f9ff 2px, transparent 10px),
    radial-gradient(circle at 88% 72%, #fff 0 1px, #73f9ff 2px, transparent 11px),
    linear-gradient(155deg, transparent 37%, #a6f3ff55 37.2%, transparent 37.5%),
    linear-gradient(26deg, transparent 64%, #a6f3ff55 64.2%, transparent 64.5%);
}
.expo-mark {
  flex:0 0 auto;
  display:grid;
  justify-items:center;
  gap:1px;
  padding:6px 14px 10px;
  border:2px solid #fff;
  font-weight:800;
  font-size:clamp(.9rem, 2.3vw, 1.4rem);
  letter-spacing:.12em;
  line-height:1.18;
}
.expo-mark strong {
  font:900 clamp(1.6rem, 4.6vw, 3.1rem)/1.1 Inter, Arial, sans-serif;
  letter-spacing:0;
}
.expo-event p {
  margin-bottom:4px;
  color:#fff;
  font-size:clamp(.9rem, 2vw, 1.15rem);
  font-weight:750;
}
.expo-event h1 {
  color:#fff;
  margin-bottom:0;
  font-size:clamp(1.95rem, 5vw, 3.75rem);
  text-shadow:0 2px 12px #10234d;
}
.expo main {margin-top:0;padding-bottom:24px}
.expo .panel {
  margin-top:0;
  border-radius:6px;
  border-top:3px solid #65eaff;
  box-shadow:0 12px 28px #0c0a4633;
}
.expo .panel h2 {font-size:clamp(1.45rem, 3vw, 2.1rem);line-height:1.25}
.expo .wish-qr h2 {font-size:1.3rem}
.expo .button, .expo button, .expo input, .expo textarea, .expo select {border-radius:5px}
@media (max-width:600px) {
  .expo-banner {align-items:flex-start;flex-direction:column}
  .expo .nav-inner {gap:4px 10px}
  .expo .brand img {width:124px}
}

.wish-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.inbox-layout .wish-qr {grid-row:1}
.wish-qr {
  padding:18px;
  text-align:center;
}
.wish-qr img {
  display:block;
  width:min(100%,272px);
  height:auto;
  margin-inline:auto;
  background:white;
  border-radius:10px;
}
@media (min-width:800px) {
  .wish-layout {grid-template-columns:minmax(0,1fr) 312px}
  .wish-layout .wish-qr {
    grid-row:auto;
    position:sticky;
    top:14px;
  }
}

.expo .wish-form-layout {max-width:660px}
@media (min-width:1100px) {
  .expo .wish-form-layout {
    display:grid;
    width:min(1312px, calc(100% - 28px));
    max-width:none;
    grid-template-columns:minmax(0,1fr) 660px minmax(0,1fr);
    gap:14px;
    align-items:start;
  }
  .wish-form-layout > section {grid-column:2}
  .wish-form-layout .wish-qr {
    position:sticky;
    top:14px;
  }
}