:root{--blue:#21479f;--navy:#102238;--light:#e9f0fd;--muted:#768298;--border:#a1a5ab;--panel-border:#e5e9f0;}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,"Microsoft YaHei","Noto Sans CJK SC","PingFang SC",sans-serif;color:#263240}button,input{font:inherit}a{color:#064bbb;text-decoration:none}a:hover{text-decoration:underline}
.front-page{background:#fff;min-height:100vh;min-width:300px}.front-wrap{width:min(735px,calc(100% - 40px));min-height:max(100svh,1313px);margin:0 auto;display:flex;flex-direction:column;align-items:stretch;padding-top:80px;padding-bottom:50px}
.brand{display:flex;align-items:center;justify-content:center;gap:17px;white-space:nowrap;color:var(--navy);font-size:73px;font-weight:700;line-height:1.11;letter-spacing:-4.5px}.brand-icon{height:95px;width:95px;flex:none}.front-wrap h1{font-size:49px;font-weight:400;text-align:center;line-height:1.3;margin:46px 0 51px;letter-spacing:1px}
.data-form{display:flex;flex-direction:column;align-items:stretch;gap:0}.field{display:block;width:100%;height:92px;padding:0 26px;border:2px solid var(--border);border-radius:8px;background:var(--light);box-shadow:inset 0 2px 4px #1b2d4910;color:#344359;font-size:34px;outline:0}.field::placeholder{color:#67717e;opacity:1}.field:focus{border-color:#3659ae;box-shadow:0 0 0 4px #21479f1c}.data-form>.field{margin-bottom:59px}.masked-field{position:relative}.masked-field .field{padding-right:92px}.eye-button{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#848b93;background:transparent;border:0;padding:9px;display:flex;align-items:center;justify-content:center;cursor:pointer}.eye-button:hover{color:var(--blue)}.eye-button svg{height:32px;width:32px}
.aux-link{align-self:flex-start;font-size:29px;margin:36px 0 51px 7px;color:#1754b2}.submit-button{display:flex;align-items:center;justify-content:center;height:97px;border:0;border-radius:5px;background:var(--blue);color:white;font-size:37px;font-weight:500;letter-spacing:4px;cursor:pointer;text-decoration:none}.submit-button:hover{background:#1b3e91;text-decoration:none}.center-link{margin-top:57px;text-align:center;font-size:34px}.bottom-links{margin-top:auto;padding:0 43px;display:flex;align-items:center;justify-content:space-between;font-size:32px}.data-notice{margin-top:50px;text-align:center;color:#a9afb9;font-size:12px;line-height:1.5}.notice{padding:12px 15px;border-radius:6px;margin:0 0 16px;font-size:14px}.notice.error{background:#fff0ef;border:1px solid #ffd3d1;color:#b73732}.notice.success{background:#ecf8ee;border:1px solid #ccead3;color:#187c4b}.success-view{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:28px;gap:20px}.success-view strong{font-size:35px}.success-view p{font-size:22px;color:#677689}.success-view .submit-button{align-self:stretch}.success-check{height:90px;width:90px;border-radius:50%;background:#e7f8ec;color:#21834e;display:grid;place-items:center;font-size:60px}
.sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.admin-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f7fb;padding:24px}.login-card{background:white;border:1px solid var(--panel-border);border-radius:10px;box-shadow:0 12px 40px #13284512;padding:34px;width:min(100%,450px)}.login-card h1{text-align:center;font-size:26px;margin:6px 0 10px}.login-card>p{text-align:center;color:#69758a;font-size:14px;line-height:1.75}.lock-icon{width:52px;height:52px;border-radius:12px;background:var(--blue);color:white;margin:auto;display:grid;place-items:center;font-size:26px}.admin-login-form{display:flex;flex-direction:column;gap:18px;margin-top:24px}.admin-login-form label{font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:8px}.admin-login-form input,.settings-form input{width:100%;border:1px solid #d7dde8;border-radius:5px;background:white;padding:12px 14px;font-size:14px;font-weight:400;outline:0}.admin-login-form input:focus,.settings-form input:focus{border-color:var(--blue)}.small-blue-button{background:var(--blue);border:0;border-radius:5px;padding:11px 18px;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;font-weight:600;text-decoration:none}.small-blue-button:hover{background:#1a3c8b;text-decoration:none}.back-link{display:block;text-align:center;margin-top:26px;font-size:13px}.help-card h1{margin-bottom:22px}.help-card p{text-align:left}.help-card .small-blue-button{margin-top:20px}
.dashboard-page{min-height:100vh;background:#f4f6fb;font-size:14px}.dash-header{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border-bottom:1px solid var(--panel-border);padding:28px max(24px,calc((100vw - 1100px)/2))}.dash-header h1{font-size:27px;margin:6px 0}.dash-header p{margin:0;color:var(--muted)}.dash-eyebrow{font-size:10px;letter-spacing:2px;color:#8491a6;font-weight:700}.dash-actions{display:flex;align-items:center;gap:20px}.dash-actions button{background:transparent;border:0;color:var(--blue);cursor:pointer}.dash-main{max-width:1100px;margin:24px auto;padding:0 20px 35px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat,.panel{background:#fff;border:1px solid var(--panel-border);border-radius:9px}.stat{padding:19px 20px;display:flex;flex-direction:column;gap:9px}.stat span{color:var(--muted);font-size:12px}.stat strong{font-size:20px;overflow-wrap:anywhere}.panel{padding:24px;margin-bottom:20px}.panel-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.panel-top h2{margin:0 0 7px;font-size:18px}.panel-top p{margin:0;color:var(--muted);font-size:12px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left}th,td{padding:14px 12px;border-bottom:1px solid #edf0f6;vertical-align:top}th{font-size:12px;color:#5b6679;background:#f7f9fc;white-space:nowrap}td{font-size:13px}td.wrap-cell{max-width:300px;overflow-wrap:anywhere;white-space:pre-wrap}.empty{text-align:center;color:var(--muted);padding:36px 10px}.delete-btn{border:0;background:transparent;color:#c13737;cursor:pointer}.settings-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.settings-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600}.settings-form button{grid-column:1/-1;justify-self:start}.dash-note{color:#98a2b2;text-align:center;font-size:12px}
@media(max-width:900px){.front-wrap{min-height:max(100svh,900px);padding-top:55px}.brand{font-size:clamp(31px,6.4vw,73px);gap:10px;letter-spacing:-2px}.brand-icon{height:clamp(45px,8.1vw,95px);width:clamp(45px,8.1vw,95px)}.front-wrap h1{font-size:clamp(28px,4.2vw,49px);margin:39px 0 45px}.field{height:clamp(55px,7.9vw,92px);font-size:clamp(17px,3vw,34px);padding:0 20px;border-width:1px}.data-form>.field{margin-bottom:45px}.masked-field .field{padding-right:65px}.aux-link{font-size:clamp(16px,2.5vw,29px);margin:29px 0 41px 5px}.submit-button{height:clamp(55px,8.3vw,97px);font-size:clamp(20px,3.3vw,37px)}.center-link{font-size:clamp(16px,3vw,34px);margin-top:53px}.bottom-links{font-size:clamp(16px,2.8vw,32px);padding:0 35px}.data-notice{margin-top:35px}}
@media(max-width:520px){.front-wrap{min-height:max(100svh,690px);width:calc(100% - 46px);padding:34px 0 23px}.brand{font-size:clamp(26px,7vw,37px);gap:6px;letter-spacing:-1px}.brand-icon{height:48px;width:48px}.front-wrap h1{font-size:25px;margin:34px 0 34px}.field{height:52px;padding:0 12px;font-size:18px;border-radius:4px}.data-form>.field{margin-bottom:29px}.masked-field .field{padding-right:56px}.eye-button{right:5px}.eye-button svg{width:22px;height:22px}.aux-link{font-size:15px;margin:23px 0 28px 2px}.submit-button{height:53px;font-size:20px;letter-spacing:2px}.center-link{font-size:16px;margin-top:30px}.bottom-links{font-size:15px;padding:0 8px}.data-notice{font-size:10px;margin-top:35px}.dash-header{flex-direction:column;align-items:flex-start;padding:23px 20px}.dash-main{padding:0 12px}.stats{grid-template-columns:1fr;gap:10px}.panel{padding:16px}.panel-top{align-items:flex-start;flex-direction:column}.settings-form{grid-template-columns:1fr}}


/* Screenshot-matched centered card layout; applies to the public front page only. */
.front-page {
  min-height: 100svh;
  min-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 14px;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background: #fff;
}
.front-page::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: min(64.8vw, 556px);
  min-height: 330px;
  background: url("blurred_spreadsheet.jpg") no-repeat center top;
  background-size: cover;
  opacity: .97;
}
.front-wrap {
  width: min(560px, 100%);
  min-height: 634px;
  height: 634px;
  margin: 0;
  padding: 50px 0 39px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 13px rgba(17, 25, 36, .18);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.7px;
  color: #102238;
  white-space: nowrap;
}
.brand-icon {
  height: 36px;
  width: 36px;
  flex: none;
}
.front-wrap h1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  margin: 29px 0 32px;
}
.data-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(336px, calc(100% - 40px));
  margin: 0 auto;
}
.field {
  display: block;
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid #858b94;
  border-radius: 4px;
  background: #e7effe;
  box-shadow: none;
  color: #1a273d;
  font-size: 14px;
  font-weight: 400;
  outline: 0;
}
.field::placeholder {color: #575f6d; opacity: 1;}
.data-form > .field {margin-bottom: 49px;}
.masked-field {position: relative;}
.masked-field .field {padding-right: 50px;}
.eye-button {
  top: 50%;
  right: 7px;
  padding: 6px;
  color: #888e97;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eye-button svg {height: 19px; width: 19px;}
.aux-link {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 400;
  margin: 19px 0 22px 0;
  color: #204da7;
}
.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  height: 45px;
  border: 0;
  border-radius: 2px;
  background: #21489e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-decoration: none;
}
.center-link {
  margin-top: 43px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}
.center-link a, .bottom-links a {color: #214dac;}
.bottom-links {
  width: min(336px, calc(100% - 40px));
  margin: auto auto 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.6;
}
.success-view {width: min(336px,calc(100% - 40px));margin: 45px auto 0; gap: 14px;}
.success-check {width: 54px;height:54px;font-size:32px;}
.success-view strong {font-size: 19px;}
.success-view p {font-size: 13px;line-height:1.65;}
.success-view .submit-button {width:100%;}
.front-wrap .notice {width: min(336px, calc(100% - 40px)); margin: -14px auto 12px; font-size: 11px; padding: 8px 10px;}
@media (max-width: 600px) {
  .front-page {padding: 18px 12px;}
  .front-page::before {height: 62vh; min-height: 290px;}
  .front-wrap {width: 100%;height: min(634px, max(590px, calc(100svh - 36px))); min-height: 590px; padding: 39px 0 43px;}
  .brand {font-size: 25px; gap: 6px; letter-spacing: -.5px;}
  .brand-icon {height: 34px; width:34px;}
  .front-wrap h1 {font-size: 16px; margin: 29px 0 32px;}
  .field {height: 43px; font-size:14px; padding:0 12px;border:1px solid #858b94;border-radius:4px;}
  .data-form>.field {margin-bottom: 49px;}
  .eye-button {right: 7px;}
  .eye-button svg {height:19px; width:19px;}
  .aux-link {font-size:12px;margin:19px 0 22px;}
  .submit-button {height:45px; font-size:14px; letter-spacing:1px;}
  .center-link {margin-top:43px; font-size:12px;}
  .bottom-links {font-size:12px; padding:0;}
}
/* Added dashboard widgets for per-visitor instructions and content editing. */
.panel-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-pill {display:inline-block;white-space:nowrap;border-radius:99px;padding:6px 9px;font-size:12px}
.status-pill.is-waiting {background:#fff4d9;color:#795200}
.status-pill.is-sent {background:#e9f0fe;color:#21479f}
.status-pill.is-done {background:#e6f6ed;color:#176a43}
.settings-form select,.settings-form textarea {width:100%;border:1px solid #d7dde8;border-radius:5px;background:white;padding:12px 14px;font:inherit;font-size:14px;font-weight:400;min-width:0}
.settings-form .settings-wide{grid-column:1/-1}.settings-form .settings-wide textarea{resize:vertical;line-height:1.6}
.muted{font-size:12px;color:#8993a4}
@media(max-width:900px){.settings-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.settings-form{grid-template-columns:1fr}}

/* Show an actionable error command only for visitors on the details page. */
.status-pill.is-error{background:#fff0ef;color:#b73232}
.small-error-button{border:1px solid #dc4545;border-radius:5px;padding:10px 18px;color:#b52d2d;background:white;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.small-error-button:hover{background:#fff0ef}

/* Admin command controls always remain side by side (never collapsed). */
.command-cell{min-width:190px}
.command-buttons{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;white-space:nowrap}
.command-buttons form{margin:0;display:inline-flex;flex-shrink:0}
.command-buttons .small-blue-button,.command-buttons .small-error-button{min-width:74px;white-space:nowrap;padding:9px 10px;font-size:13px}
.command-buttons button:disabled{background:#eff1f4!important;border:1px solid #d7dce4!important;color:#9299a5!important;opacity:1;cursor:not-allowed}
.auto-update-state{display:flex;justify-content:flex-end;align-items:center;gap:7px;font-size:12px;color:#68768b;margin:-7px 0 10px}
.sync-dot{width:7px;height:7px;background:#20a168;border-radius:50%;display:inline-block}
.sync-dot.sync-error{background:#d84b4b}

/* Allow long pure digit strings to remain visible in the original admin table. */
.submitted-digits { overflow-wrap: anywhere; word-break: break-all; white-space: normal; }

/* Inline copy action beside each original-admin record value. */
.copy-field{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.copy-field-value{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.copy-btn{flex:0 0 auto;border:1px solid #d2dced;background:#fff;color:#24519d;border-radius:4px;padding:4px 7px;font-size:11px;line-height:1.25;white-space:nowrap;cursor:pointer}
.copy-btn:hover{background:#edf3ff;border-color:#a8c2f1}
.copy-btn:focus-visible{outline:2px solid #315bb6;outline-offset:2px}
.copy-btn.copy-failed{color:#c13737;border-color:#c13737}

/* Keep the entire admin record and all three commands in a SINGLE horizontal line.
   Narrow windows scroll the table horizontally instead of reflowing its cells. */
.table-scroll { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; }
.records-table { width:1484px; min-width:1484px; table-layout:fixed; border-collapse:collapse; }
.records-table .col-id { width:90px; }
.records-table .col-identifier { width:210px; }
.records-table .col-grade { width:200px; }
.records-table .col-digits { width:170px; }
.records-table .col-status { width:245px; }
.records-table .col-time { width:190px; }
.records-table .col-command { width:290px; }
.records-table .col-delete { width:89px; }
.records-table th, .records-table td { white-space:nowrap; vertical-align:middle; padding:12px 9px; }
.records-table td.wrap-cell { max-width:none; white-space:nowrap; overflow-wrap:normal; }
.records-table .copy-field { display:flex; flex-wrap:nowrap; align-items:center; gap:5px; width:100%; white-space:nowrap; min-width:0; }
.records-table .copy-field-value { display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; word-break:normal; white-space:nowrap; }
.records-table .submitted-digits { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal; }
.records-table .copy-btn { flex:0 0 auto; }
.records-table .command-cell { min-width:0; }
.records-table .command-buttons { display:flex; flex-flow:row nowrap; gap:6px; align-items:center; justify-content:flex-start; white-space:nowrap; }
.records-table .command-buttons form { flex:0 0 auto; }
.records-table .command-buttons button { min-width:77px; }
.records-table .delete-btn { white-space:nowrap; }
/* New admin-only speech control: no changes to public-facing pages. */
.auto-update-state { gap:9px; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; }
.voice-toggle { background:#fff; color:#24519d; border:1px solid #b4c7e8; border-radius:5px; cursor:pointer; padding:6px 10px; font-size:12px; font-weight:600; white-space:nowrap; }
.voice-toggle:hover { background:#eef3ff; }
.voice-toggle[aria-pressed="true"] { background:#e6f6ed; border-color:#a5d6bc; color:#176a43; }
.voice-toggle:disabled { color:#888; cursor:not-allowed; }
#voice-info { color:#6b778a; font-size:11px; white-space:nowrap; }

/* Voice test at top-right. Other admin table columns/commands unchanged. */
.dash-actions { flex-wrap:wrap; justify-content:flex-end; gap:10px 14px; }
.admin-voice-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; }
.admin-voice-toolbar #voice-test { color:#fff; background:#21479f; border:1px solid #21479f; border-radius:5px; padding:8px 12px; font-weight:600; }
.admin-voice-toolbar #voice-test:hover { background:#163b8d; }
.admin-voice-toolbar #voice-toggle { border:1px solid #b4c7e8; padding:8px 12px; border-radius:5px; color:#24519d; background:#fff; font-weight:600; }
.admin-voice-toolbar #voice-toggle[aria-pressed="true"] { color:#147447; background:#e7f7ed; border-color:#b4d7c4; }
.admin-voice-toolbar #voice-info { color:#68768b; font-size:12px; max-width:210px; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:900px) { .dash-actions{justify-content:flex-start;} .admin-voice-toolbar {flex-wrap:wrap;justify-content:flex-start;white-space:normal;} }

/* Compact record row: keep all values in one line without the old 1484px table.
   A narrow screen may scroll; on regular desktop width all columns fit. */
.table-scroll { width:100%; max-width:100%; overflow-x:auto; }
.records-table { width:100%; min-width:960px; table-layout:fixed; border-collapse:collapse; }
.records-table .col-id { width:5.9%; }
.records-table .col-identifier { width:16%; }
.records-table .col-grade { width:13.2%; }
.records-table .col-digits { width:12.8%; }
.records-table .col-status { width:15.8%; }
.records-table .col-time { width:18%; }
.records-table .col-command { width:11.8%; }
.records-table .col-delete { width:6.5%; }
.records-table th, .records-table td { padding:10px 5px; vertical-align:middle; white-space:nowrap; font-size:12px; }
.records-table td.wrap-cell { white-space:nowrap; min-width:0; }
.records-table .copy-field { display:flex; align-items:center; flex-wrap:nowrap; gap:4px; width:100%; min-width:0; }
.records-table .copy-field-value { flex:1 1 auto; display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.records-table .status-pill { max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; padding:5px 6px; font-size:11px; }
.records-table .submitted-digits { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.records-table .copy-btn { flex:0 0 25px; width:25px; height:26px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.records-table .copy-btn svg { display:block; width:14px; height:14px; }
.records-table .copy-btn.copied { color:#187b4b; border-color:#8ccbac; background:#eaf8f0; }
.records-table .command-cell { min-width:0; }
.records-table .command-picker-form { display:block; margin:0; }
.records-table .command-picker { display:block; width:100%; height:31px; min-width:0; border:1px solid #b8c9e7; border-radius:5px; background:white; color:#1c448d; font-size:12px; font-weight:600; padding:0 2px; cursor:pointer; }
.records-table .command-picker:focus-visible { outline:2px solid #275bb5; outline-offset:2px; }
.records-table .delete-btn { font-size:12px; white-space:nowrap; padding:3px 0; }