:root {
  --ink:#071827;
  --ink-soft:#183247;
  --muted:#536879;
  --canvas:#f2f6f8;
  --paper:#ffffff;
  --line:#cfdae1;
  --line-strong:#9fb4c1;
  --cyan:#00a7b5;
  --blue:#2269e8;
  --blue-deep:#113f8f;
  --aqua:#dff7f7;
  --amber:#d98924;
  --red:#b83a4a;
  --green:#18795f;
  --font-sans:"Microsoft YaHei UI","PingFang SC","Noto Sans SC","Source Han Sans SC",Arial,sans-serif;
  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",Georgia,serif;
  --radius:12px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--canvas); color:var(--ink); }
body { margin:0; min-height:100vh; font-family:var(--font-sans); line-height:1.6; background:var(--canvas); color:var(--ink); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.signal-line { height:3px; background:linear-gradient(90deg,var(--cyan),var(--blue) 48%,#7258d8); }

.site-header,.app-header { width:min(1180px,calc(100% - 48px)); margin:auto; min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--ink); color:var(--ink); font-family:var(--font-serif); font-weight:700; letter-spacing:-.04em; }
.brand span:last-child { display:grid; gap:2px; }
.brand strong { font-family:var(--font-serif); font-size:17px; letter-spacing:.03em; }
.brand small { color:var(--muted); font-family:Georgia,serif; font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.compact-brand .brand-mark { width:36px; height:36px; }
.compact-brand strong { white-space:nowrap; }

.button,.icon-button,.close-button,.tab { border:0; border-radius:7px; padding:10px 15px; font-weight:700; transition:transform .2s var(--ease-out),background .2s,color .2s,border-color .2s,opacity .2s; }
.button:hover,.icon-button:hover { transform:translateY(-1px); }
.button:active,.icon-button:active { transform:translateY(1px) scale(.985); }
.button-primary { color:white; background:var(--blue); }
.button-primary:hover { background:#1459cf; }
.button-accent { color:#031c25; background:#48dbe0; }
.button-accent:hover { background:#66e6e8; }
.button-secondary { color:var(--ink); background:#e5edf1; }
.button-ghost { padding-inline:4px; color:var(--blue-deep); background:transparent; text-decoration:underline; text-underline-offset:4px; }
.button-danger { color:var(--red); background:#fae9ec; }
.button-warning { color:#704006; background:#fff0d8; border:1px solid #e8bf7c; }
.button-warning:hover { background:#ffe4ba; }
.button-small { padding:6px 9px; font-size:12px; }
.button:disabled { cursor:not-allowed; opacity:.5; transform:none; }
.button[aria-busy="true"]:disabled { cursor:wait; opacity:.78; }
.button[aria-busy="true"]::after { content:""; display:inline-block; width:.72em; height:.72em; margin-left:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-.07em; animation:button-spin .65s linear infinite; }
@keyframes button-spin { to { transform:rotate(360deg); } }

.public-screen,.app-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:44px 0 72px; }
.public-heading { min-height:270px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; border-top:1px solid var(--line-strong); padding:38px 0 32px; }
.public-heading h1 { margin:10px 0 0; font-size:clamp(40px,5vw,66px); line-height:1.04; letter-spacing:-.045em; font-weight:700; }
.public-heading h1,.section-title-row h2,.member-hero h1,.admin-hero h1,.dialog-title h2,.calendar-header h2,.public-status-grid strong,.member-summary strong { font-family:var(--font-serif); }
.kicker { margin:0; color:var(--blue-deep); font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; }
.live-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 5px rgba(0,167,181,.12); animation:pulse 2.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 9px rgba(0,167,181,0); } }
.public-meta { max-width:330px; text-align:right; color:var(--muted); line-height:1.75; }
.public-meta p { color:var(--ink-soft); font-weight:700; }
.public-meta span { font-size:13px; }
.public-status-grid { display:grid; grid-template-columns:1.35fr .65fr 1fr; border:1px solid var(--line); background:var(--paper); }
.public-status-grid article { min-height:130px; padding:22px 24px; display:grid; align-content:space-between; border-right:1px solid var(--line); }
.public-status-grid article:last-child { border-right:0; }
.public-status-grid span,.member-summary span,.admin-summary span { color:var(--muted); font-size:12px; }
.public-status-grid strong { display:block; font-size:24px; line-height:1.2; }
.public-status-grid small { color:var(--muted); }

.public-queue-section { margin-top:64px; }
.section-title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.section-title-row h2 { margin:6px 0 0; font-size:28px; letter-spacing:-.025em; }
.section-title-row > p { max-width:470px; margin:0; color:var(--muted); font-size:13px; text-align:right; line-height:1.7; }
.public-queue-list { border-top:1px solid var(--ink); }
.public-queue-item { display:grid; grid-template-columns:72px minmax(160px,.8fr) minmax(200px,1.15fr) minmax(230px,auto) 70px; align-items:center; gap:18px; min-height:96px; border-bottom:1px solid var(--line); animation:row-in .5s var(--ease-out) both; }
.public-order { font-family:var(--font-serif); font-size:29px; color:var(--blue); }
.public-person { display:flex; align-items:center; gap:8px; min-width:0; }
.public-experiment { display:grid; gap:5px; min-width:0; }
.public-person strong,.public-experiment strong { font-family:var(--font-serif); font-size:17px; }
.public-person small,.public-experiment small,.public-date small { color:var(--muted); }
.public-date { display:grid; gap:4px; }
.public-date strong { white-space:nowrap; }
.public-duration { color:var(--blue-deep); font-weight:700; text-align:right; }
.status-pill { width:max-content; padding:4px 8px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-soft); font-size:11px; font-weight:700; }
.status-pill.active { color:#006c76; border-color:#74ccd2; background:var(--aqua); }
.status-pill.pending { color:#89520c; border-color:#e9c58c; background:#fff6e7; }
.status-pill.disabled { color:var(--red); border-color:#e4aab3; background:#fff0f2; }
.empty-panel { margin:0; padding:44px 20px; color:var(--muted); text-align:center; border:1px dashed var(--line-strong); background:rgba(255,255,255,.55); }
@keyframes row-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.app-shell { animation:shell-in .55s var(--ease-out) both; }
@keyframes shell-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
.app-header { width:100%; min-height:72px; padding-bottom:24px; border-bottom:1px solid var(--line-strong); }
.account-controls { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
#currentUserLabel { color:var(--ink-soft); font-weight:700; }
.member-hero,.admin-hero { margin-top:34px; padding:34px 38px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; color:white; background:var(--ink); border-left:5px solid var(--cyan); }
.member-hero h1,.admin-hero h1 { margin:8px 0; font-size:36px; letter-spacing:-.03em; }
.member-hero p:last-child,.admin-hero p:last-child { margin:0; color:#bdd0dc; }
.member-hero .kicker,.admin-hero .kicker { color:#62e6e6; }
.member-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.member-summary article { min-height:116px; padding:20px 22px; display:grid; align-content:space-between; background:var(--paper); border:1px solid var(--line); }
.member-summary strong { font-size:21px; }
.member-summary small { color:var(--muted); }
.admin-summary { display:grid; grid-template-columns:repeat(4,1fr); margin-top:14px; border:1px solid var(--line); background:var(--paper); }
.admin-summary article { padding:18px 20px; border-right:1px solid var(--line); }
.admin-summary article:last-child { border-right:0; }
.admin-summary strong { display:block; margin-top:8px; font-family:var(--font-serif); font-size:27px; color:var(--blue-deep); }
.email-settings { margin-top:14px; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--blue); }
.email-settings h2 { margin:5px 0 4px; font-family:var(--font-serif); font-size:22px; }
.email-settings p { margin:0; color:var(--muted); font-size:13px; }
.email-settings-actions { display:flex; align-items:center; flex:none; gap:10px; }

.tabs { display:flex; gap:28px; margin:48px 0 28px; border-bottom:1px solid var(--line); overflow:auto; }
.tab { position:relative; flex:none; padding:12px 0; color:var(--muted); background:transparent; border-radius:0; }
.tab::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); }
.tab.active { color:var(--ink); }
.tab.active::after { transform:scaleX(1); }
.view-panel { animation:view-in .36s var(--ease-out) both; }
@keyframes view-in { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }

.queue-list,.history-list,.review-list { display:grid; gap:10px; }
.queue-card { display:grid; grid-template-columns:24px 42px minmax(100px,.55fr) minmax(120px,.9fr) 220px 55px minmax(300px,auto); align-items:center; gap:14px; padding:16px 18px; background:var(--paper); border:1px solid var(--line); border-left:3px solid transparent; animation:row-in .42s var(--ease-out) both; transition:border-color .2s,transform .2s var(--ease-out),background .2s; }
.queue-card.active { border-left-color:var(--cyan); background:#f5ffff; }
.queue-card.dragging { opacity:.42; transform:scale(.985); }
.queue-card.drop-target { border-color:var(--blue); background:#edf4ff; }
.drag-handle { color:#617485; font-family:Arial,sans-serif; letter-spacing:-2px; cursor:grab; user-select:none; }
.queue-card:not([draggable="true"]) .drag-handle { cursor:default; opacity:.45; }
.order-number { font-family:var(--font-serif); font-size:24px; color:var(--blue); }
.queue-person { display:flex; align-items:center; gap:8px; min-width:0; }
.queue-experiment,.queue-schedule,.queue-duration { display:grid; gap:4px; min-width:0; }
.queue-person strong,.queue-experiment strong { overflow:hidden; font-family:var(--font-serif); text-overflow:ellipsis; white-space:nowrap; }
.queue-person small,.queue-experiment small,.queue-schedule span,.queue-duration span { color:var(--muted); font-size:12px; }
.queue-experiment strong { color:var(--blue-deep); }
.queue-schedule strong { white-space:nowrap; }
.queue-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
.hero-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.approval-panel { margin-top:58px; padding-top:34px; border-top:1px solid var(--line-strong); }
.approval-panel h3 { margin:22px 0 10px; font-size:15px; }
.review-card { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 18px; background:var(--paper); border:1px solid var(--line); border-left:3px solid #e8bf7c; }
.review-card p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.review-actions { display:flex; flex:none; gap:7px; }

.calendar-header { display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:22px; text-align:center; }
.calendar-header h2 { margin:5px 0 0; }
.icon-button { color:var(--blue-deep); background:#e1eaf0; }
.weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.weekdays span { padding:8px; color:var(--muted); font-size:12px; text-align:center; }
.calendar-grid { border-top:1px solid var(--line); border-left:1px solid var(--line); }
.day { min-height:104px; padding:7px; background:rgba(255,255,255,.78); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.day.muted { color:#a8b5bd; background:#edf2f4; }
.day.today { background:#e9f9fa; }
.day-number { font-family:var(--font-serif); font-weight:700; }
.calendar-event { margin-top:5px; padding:4px 5px; overflow:hidden; color:#154b7d; font-size:11px; white-space:nowrap; text-overflow:ellipsis; background:#e8f1ff; border-left:2px solid var(--blue); }
.calendar-event.active { color:#00616a; background:var(--aqua); border-color:var(--cyan); }
.history-card { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; background:var(--paper); border-bottom:1px solid var(--line); }
.history-card span { color:var(--muted); font-size:13px; }

.members-heading { align-items:center; }
.member-tools { display:flex; align-items:flex-end; gap:10px; }
.search-field { display:grid; gap:4px; color:var(--muted); font-size:11px; }
.search-field input { width:250px; }
.table-shell { overflow:auto; border:1px solid var(--line); background:var(--paper); }
.member-table { width:100%; border-collapse:collapse; }
.member-table th,.member-table td { padding:14px 15px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.member-table th { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:#edf3f6; }
.member-table tr:last-child td { border-bottom:0; }
.member-actions { display:flex; gap:5px; }
.members-card-list { display:none; }

input,select,textarea { width:100%; padding:11px 12px; color:var(--ink); background:#fbfdfe; border:1px solid var(--line-strong); border-radius:6px; outline:none; transition:border-color .2s,box-shadow .2s; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(34,105,232,.11); }
textarea { min-height:78px; resize:vertical; }

.modal { width:min(520px,calc(100% - 28px)); padding:0; color:var(--ink); background:var(--paper); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 28px 80px rgba(4,24,40,.28); }
.modal[open] { animation:modal-in .46s var(--ease-out) both; }
.modal.is-closing { animation:modal-out .22s cubic-bezier(.55,.06,.68,.19) both; }
.modal::backdrop { background:rgba(3,19,32,.58); backdrop-filter:blur(3px); animation:backdrop-in .34s ease both; }
.modal.is-closing::backdrop { animation:backdrop-out .22s ease both; }
.modal form { padding:26px; }
.modal label { display:grid; gap:6px; margin-top:14px; font-weight:700; }
.field-help { color:var(--muted); font-size:12px; font-weight:400; }
.dialog-title,.dialog-actions,.dialog-actions > div { display:flex; align-items:center; }
.dialog-title { justify-content:space-between; gap:20px; }
.dialog-title h2 { margin:6px 0 0; font-size:25px; }
.close-button { padding:0 7px; color:var(--muted); background:transparent; font-family:var(--font-serif); font-size:28px; }
.dialog-copy { margin:15px 0 20px; color:var(--muted); line-height:1.7; }
.dialog-actions { justify-content:flex-end; gap:8px; margin-top:23px; }
.dialog-actions.spread { justify-content:space-between; }
.dialog-actions > div { gap:8px; }
.important-notice { padding:10px 12px; color:#a52737; font-size:13px; font-weight:700; background:#fff0f2; border-left:3px solid var(--red); }
.form-error { margin:9px 0 0; color:var(--red); font-size:13px; }
@keyframes modal-in { from { opacity:0; transform:translateY(28px) scale(.94); } 60% { transform:translateY(-3px) scale(1.006); } to { opacity:1; transform:none; } }
@keyframes modal-out { to { opacity:0; transform:translateY(16px) scale(.97); } }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes backdrop-out { to { opacity:0; } }

.toast { position:fixed; right:24px; bottom:24px; z-index:50; max-width:min(380px,calc(100% - 48px)); padding:13px 16px; color:white; background:var(--ink); border-left:4px solid var(--cyan); box-shadow:0 14px 40px rgba(4,24,40,.2); animation:toast-in .4s var(--ease-out) both; }
.toast.error { border-color:var(--red); }
@keyframes toast-in { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }

.confetti-layer { position:fixed; inset:0; z-index:1000; overflow:hidden; pointer-events:none; contain:strict; }
.confetti-piece { position:absolute; top:-24px; left:var(--x); width:var(--w); height:var(--h); opacity:0; background:var(--color); border-radius:var(--radius); box-shadow:0 1px 1px rgba(4,24,40,.12); animation:confetti-fall var(--duration) var(--delay) cubic-bezier(.17,.67,.27,1) forwards; will-change:transform,opacity; }
@keyframes confetti-fall {
  0% { opacity:0; transform:translate3d(0,-8vh,0) rotate(0deg); }
  8% { opacity:1; }
  82% { opacity:1; }
  100% { opacity:0; transform:translate3d(var(--drift),112vh,0) rotate(var(--spin)); }
}

@media (max-width:900px) {
  .public-heading { min-height:230px; }
  .public-queue-item { grid-template-columns:54px 1fr 1.2fr; padding:15px 0; }
  .public-date,.public-duration { grid-column:2 / -1; }
  .public-duration { text-align:left; }
  .queue-card { grid-template-columns:32px 44px 1fr auto; }
  .queue-experiment,.queue-schedule,.queue-duration { grid-column:3 / -1; }
  .queue-actions { grid-column:3 / -1; justify-content:flex-start; }
  .admin-summary { grid-template-columns:1fr 1fr; }
  .admin-summary article:nth-child(2) { border-right:0; }
  .admin-summary article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .member-table { display:none; }
  .table-shell { display:none; }
  .members-card-list { display:grid; gap:10px; }
  .member-card { padding:17px; background:var(--paper); border:1px solid var(--line); }
  .member-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .member-card dl { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:14px 0; }
  .member-card dt { color:var(--muted); font-size:12px; }
  .member-card dd { margin:0; }
}

@media (max-width:640px) {
  .site-header,.app-header,.public-screen,.app-shell { width:min(100% - 28px,1180px); }
  .site-header { min-height:78px; }
  .brand small { display:none; }
  .public-screen,.app-shell { padding-top:24px; }
  .public-heading { min-height:230px; display:block; }
  .public-heading h1 { font-size:40px; }
  .public-meta { margin-top:30px; text-align:left; }
  .public-status-grid { grid-template-columns:1fr 1fr; }
  .public-status-grid article { min-height:112px; border-bottom:1px solid var(--line); }
  .public-status-grid article:first-child { grid-column:1 / -1; border-right:0; }
  .public-status-grid article:nth-child(2) { border-bottom:0; }
  .public-status-grid article:last-child { border-bottom:0; }
  .public-queue-section { margin-top:46px; }
  .section-title-row { display:block; }
  .section-title-row > p { margin-top:10px; text-align:left; }
  .public-queue-item { grid-template-columns:44px 1fr; gap:8px 12px; }
  .public-experiment,.public-date,.public-duration { grid-column:2; }
  .app-header { align-items:flex-start; gap:12px; }
  .compact-brand { flex-shrink:0; }
  .account-controls { flex-wrap:wrap; gap:8px; }
  #currentUserLabel { width:100%; text-align:right; }
  .member-hero,.admin-hero { padding:26px 22px; display:block; }
  .member-hero .button,.admin-hero .button { margin-top:22px; }
  .member-hero h1,.admin-hero h1 { font-size:30px; }
  .member-summary { grid-template-columns:1fr; }
  .email-settings { align-items:flex-start; flex-direction:column; }
  .tabs { gap:22px; margin-top:36px; }
  .queue-card { grid-template-columns:28px 38px 1fr; }
  .status-pill { grid-column:3; }
  .queue-experiment,.queue-schedule,.queue-duration,.queue-actions { grid-column:3; }
  .review-card,.history-card { align-items:flex-start; flex-direction:column; }
  .calendar-grid { overflow:auto; grid-template-columns:repeat(7,minmax(74px,1fr)); }
  .weekdays { grid-template-columns:repeat(7,minmax(42px,1fr)); }
  .day { min-height:88px; }
  .members-heading,.member-tools { display:block; }
  .member-tools { margin-top:16px; }
  .search-field input { width:100%; }
  #exportMembers { margin-top:9px; }
  .dialog-actions.spread { align-items:flex-start; flex-direction:column; }
  .dialog-actions.spread > div { width:100%; justify-content:flex-end; }
  .modal form { padding:22px; }
}

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