@charset "UTF-8";
:root{--bg:#f8f8f5;--ink:#272635;--muted:#898894;--purple:#7a64d9;--purple-dark:#6953c5;--lavender:#f1edfc;--line:#eeedf1;--green:#3f9b7e;--font:Inter,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif}
#app:focus{outline:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 var(--font);min-width:1000px}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button,a,input,textarea{outline-offset:4px}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b4a3f2}button{transition:background .18s,transform .18s,box-shadow .18s}button:active{transform:translateY(1px)}button svg{vertical-align:middle}svg{display:block}button{color:inherit}.header{height:94px;max-width:1320px;margin:auto;padding:0 46px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;font-weight:750;font-size:21px;letter-spacing:1px}.brand-mark{width:34px;height:36px;display:grid;place-items:center;background:var(--purple);color:white;border-radius:12px 12px 14px 8px;font-size:24px;transform:rotate(-8deg)}.brand-divider{height:18px;width:1px;background:#dcdbe1;margin:0 3px 0 10px}.brand-sub{font-size:13px;font-weight:400;letter-spacing:0;color:#777583}.header-right{display:flex;align-items:center;gap:28px}.prototype-label{font-size:12px;color:#8b859d;display:flex;gap:7px;align-items:center}.prototype-label i{width:6px;height:6px;border-radius:50%;background:#b5a5e8}.help-button{border:none;background:none;color:#767280;font-size:13px;display:flex;align-items:center;gap:7px}.help-button span{border:1.5px solid #96909f;border-radius:50%;width:17px;height:17px;display:grid;place-items:center;font-size:11px;line-height:1}.page{width:1100px;margin:40px auto 0;min-height:640px}.login-layout{display:grid;grid-template-columns:1fr 488px;gap:85px;align-items:center;padding:20px 30px 25px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:2.4px;color:var(--purple)}.welcome h1{font-size:43px;line-height:1.45;letter-spacing:-1.5px;margin:20px 0 15px;font-weight:750}.welcome h1 em{font-style:normal;color:var(--purple);position:relative}.welcome h1 em:after{content:"";position:absolute;bottom:-9px;left:0;width:96%;height:6px;border-top:2px solid #cec2f5;border-radius:50%}.intro{font-size:15px;color:#8b8895;line-height:1.95;margin-top:23px}.hero-art{width:330px;height:218px;margin:25px 0 12px;position:relative}.hero-art svg{width:100%;height:100%}.welcome-bottom{display:flex;gap:22px;color:#9994a4;font-size:12px}.welcome-bottom span{display:flex;align-items:center;gap:7px}.tiny-check{background:#e7f0ea;border-radius:50%;width:16px;height:16px;display:inline-grid;place-items:center;color:#68a086;font-size:10px}.card{background:#fff;border:1px solid #eeedf0;box-shadow:0 10px 36px #30254a04;border-radius:24px}.login-card{padding:38px 40px 32px;position:relative}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.icon-box{width:46px;height:46px;border-radius:15px;background:var(--lavender);display:grid;place-items:center;color:var(--purple)}.icon-box svg{width:25px;height:25px}.micro-badge{background:#f8f7fa;padding:5px 10px;border-radius:20px;color:#96909f;font-size:11px}.login-card h2{font-size:25px;margin:0 0 10px;letter-spacing:-.7px}.subtext{color:var(--muted);font-size:13px;line-height:1.9;margin:0 0 30px}.field-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;margin-bottom:10px}.required{color:var(--purple);background:var(--lavender);border-radius:5px;padding:1px 6px;font-size:10px;font-weight:400}.optional{color:#699481;background:#edf6f0;border-radius:5px;padding:1px 6px;font-size:10px;font-weight:400}input,textarea{width:100%;border:1px solid #e3e0ea;border-radius:10px;background:#fdfcfe;padding:15px 16px;color:var(--ink);transition:border .2s,box-shadow .2s}input:hover,textarea:hover{border-color:#b6a8de}input:focus,textarea:focus{border-color:var(--purple);outline:0;box-shadow:0 0 0 3px #7a64d914}input::placeholder,textarea::placeholder{color:#b5b0c0}textarea{min-height:158px;resize:vertical;line-height:1.85}.input-wrap{position:relative}.input-wrap input{padding-left:44px}.input-wrap svg{position:absolute;left:15px;top:18px;width:18px;height:18px;color:#9b90b7}.error{min-height:25px;font-size:12px;color:#c45c65;padding-top:5px}.has-error{border-color:#c45c65}.primary{border:0;border-radius:10px;background:var(--purple);color:white;padding:14px 22px;font-size:14px;font-weight:550;display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:49px}.primary:hover{background:var(--purple-dark);box-shadow:0 4px 13px #7a64d925}.primary .arrow{font-size:20px;line-height:1;font-weight:300}.full{width:100%}.login-tip{display:flex;gap:7px;align-items:center;justify-content:center;color:#aaa4b4;font-size:11px;margin:16px 0 28px}.login-divider{height:1px;background:var(--line);margin-bottom:21px}.demo-hint{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#a5a0ae}.sample-key{border:none;background:#f5f3fa;border-radius:6px;padding:5px 8px;font-size:11px;color:#8b7cb0;font-family:Consolas,monospace}.sample-key:hover{background:#ece7f8}.footer{max-width:1100px;margin:18px auto 92px;border-top:1px solid #eae9ed;padding-top:22px;display:flex;justify-content:space-between;font-size:11px;color:#a6a2ac}.demo-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:7px;padding:11px max(30px,calc((100vw - 1100px)/2));background:#ffffffed;border-top:1px solid #e9e7ed;backdrop-filter:blur(12px);z-index:4;white-space:nowrap}.demo-title{font-size:11px;color:#a09ba9;margin-right:14px}.demo-bar button{border:1px solid #eae7f1;background:#fff;border-radius:6px;font-size:11px;padding:5px 11px;color:#938b9f}.demo-bar button:hover,.demo-bar button.active{border-color:#cbbdee;background:var(--lavender);color:var(--purple)}.demo-spacer{flex:1}.demo-bar .reset-button{border-color:transparent;color:#aaa4b2}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.breadcrumb{font-size:12px;color:#a29caa;display:flex;align-items:center;gap:12px}.breadcrumb b{font-weight:500;color:#696270}.text-button{border:0;background:none;color:#948b9f;padding:3px 0;font-size:12px}.text-button:hover{color:var(--purple)}.session-chip{font-size:11px;color:#9d94aa;display:flex;gap:14px;align-items:center}.session-chip .dot{width:5px;height:5px;background:#88bea6;border-radius:50%}.work-layout{display:grid;grid-template-columns:275px 1fr;gap:32px;align-items:start}.sidebar{padding:20px 15px 20px 2px}.sidebar h1{font-size:25px;margin:9px 0 8px;letter-spacing:-.6px}.sidebar>p{font-size:12px;color:#9a92a2;line-height:1.9;margin:0}.steps{margin:34px 0 38px}.step{display:flex;gap:14px;position:relative;min-height:84px}.step:not(:last-child):before{content:"";position:absolute;left:16px;top:36px;height:44px;width:1px;background:#e3dfea}.step .number{width:34px;height:34px;border:1px solid #e5e0ec;background:#f9f8fb;border-radius:50%;display:grid;place-items:center;color:#aba2b8;font-size:12px;flex-shrink:0}.step.current .number{color:white;background:var(--purple);border-color:var(--purple);box-shadow:0 0 0 5px #efeaf9}.step.done .number{background:#ece7f9;border-color:#ece7f9;color:var(--purple)}.step-title{font-size:13px;color:#a59bac;padding-top:3px}.step.current .step-title{color:var(--purple);font-weight:600}.step.done .step-title{color:#7b7189}.step-detail{font-size:11px;color:#b5adbe;margin-top:3px}.side-note{border:1px solid #e7e3ec;border-radius:12px;padding:16px;color:#9b93a6;font-size:11px;line-height:1.9}.side-note b{font-weight:500;color:#83798e;display:block;margin-bottom:4px}.form-card{padding:35px 40px;min-height:478px}.form-card .card-top{margin-bottom:20px}.step-count{font-size:11px;letter-spacing:1px;color:#b4acbf}.form-card h2{font-size:25px;margin:0 0 9px;letter-spacing:-.6px}.form-card .subtext{margin-bottom:27px}.field-foot{display:flex;justify-content:space-between;gap:15px;color:#aaa2b4;font-size:11px;margin-top:8px}.field-foot .error{padding:0;min-height:20px}.actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:25px;padding-top:24px;border-top:1px solid var(--line)}.action-group{display:flex;gap:12px;align-items:center}.secondary{border:1px solid #e0dbe9;background:white;border-radius:10px;padding:13px 19px;color:#897e99;font-size:13px;min-height:49px}.secondary:hover{background:#f9f7fc;border-color:#c4b5e1}.skip{border:0;background:none;color:#a096ad;font-size:12px;padding:12px}.skip:hover{color:var(--purple)}.review-box{background:#f8f6fd;border:1px solid #eae4f7;border-radius:12px;padding:23px;margin:20px 0;color:#675b7b}.review-box .review-label{font-size:11px;color:#a095b3;display:block;margin-bottom:9px}.user-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;max-height:230px;overflow:auto;font-size:15px}.confirmation-tip{font-size:12px;color:#a299af;display:flex;gap:8px;align-items:center}.summary-row{padding:18px 0;border-bottom:1px solid var(--line)}.summary-row:first-of-type{padding-top:0}.summary-row:last-of-type{border:none}.summary-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#a398b1;margin-bottom:7px}.summary-row .user-content{font-size:13px;max-height:130px}.empty-value{color:#b4acbf}.status-card{padding:35px 42px}.status-header{display:flex;align-items:center;gap:18px;padding-bottom:26px;border-bottom:1px solid var(--line)}.status-symbol{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:28px;flex-shrink:0;background:#f2ecfb;color:var(--purple)}.status-symbol.success{background:#e9f7ef;color:#4caa82}.status-symbol.warning{background:#fff4df;color:#c39138}.status-symbol.failed{background:#fceff0;color:#bf7580}.status-header h2{font-size:24px;margin:0 0 6px}.status-header p{font-size:12px;margin:0;color:#a096ab}.status-pill{display:inline-flex;background:#f4effc;color:#9982c3;padding:4px 11px;border-radius:20px;font-size:11px;margin-left:auto;white-space:nowrap}.status-pill.success{background:#e9f7ef;color:#4caa82}.status-pill.warning{background:#fff4df;color:#ba8c37}.status-pill.failed{background:#fceff0;color:#bf7580}.timeline{padding:28px 0 6px 10px}.timeline-row{display:flex;gap:18px;position:relative;min-height:83px}.timeline-row:not(:last-child):before{content:"";position:absolute;left:8px;top:22px;width:1px;height:56px;background:#ebe6f0}.timeline-dot{margin-top:5px;flex-shrink:0;width:17px;height:17px;border-radius:50%;border:1px solid #e2dce9;color:#b8adbf;display:grid;place-items:center;font-size:10px}.timeline-row.done .timeline-dot{background:#eae4f9;color:var(--purple);border-color:#eae4f9}.timeline-row.current .timeline-dot{background:var(--purple);border:4px solid #eee8fa;box-shadow:0 0 0 1px #eee8fa}.timeline-row h3{font-size:13px;font-weight:500;color:#b2a8be;margin:0 0 5px}.timeline-row.done h3,.timeline-row.current h3{color:#776987}.timeline-row p{font-size:11px;color:#b1a7bd;margin:0}.notice{padding:15px 18px;background:#f9f7fc;border:1px solid #eee9f5;border-radius:10px;font-size:12px;color:#9a8aa9;line-height:1.9;margin-top:7px}.notice.warning{background:#fffaf0;border-color:#f4e8cd;color:#b29661}.record-details{margin-top:20px;font-size:12px;color:#9789a4}.record-details summary{cursor:pointer;padding:8px 0}.record-details .summary-row{padding:12px 0}.status-sidebar-icon{margin:32px 0 24px;width:112px;height:112px;background:#eeebf7;border-radius:35px;display:grid;place-items:center;color:#b4a4d9;transform:rotate(-6deg)}.status-sidebar-icon svg{width:51px;height:51px}.side-small{font-size:11px!important;line-height:1.9!important}.summary-tip{color:#a59aaf;font-size:11px;margin-top:20px}#toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#383044;color:#fff;padding:12px 22px;border-radius:10px;font-size:12px;z-index:20;transition:.2s;max-width:650px}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #e8e2f0;border-radius:22px;padding:38px;width:460px;box-shadow:0 24px 80px #281c4226;color:var(--ink)}dialog::backdrop{background:#2b23434a;backdrop-filter:blur(3px)}dialog h2{font-size:24px;margin:14px 0}dialog p{font-size:13px;color:#92859d;line-height:1.9}.help-note{padding:16px;background:#f6f2fc;border-radius:10px;font-size:12px;color:#9985ac;line-height:1.9;margin:22px 0}.close-dialog{position:absolute;right:20px;top:12px;border:0;background:none;font-size:26px;color:#a99cb5}.fade-in{animation:appear .25s ease-out}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){.page{margin-top:64px;min-height:660px}}@media(max-width:1150px){.page,.footer{width:940px}.login-layout{grid-template-columns:1fr 450px;gap:35px;padding:20px 0}.work-layout{grid-template-columns:240px 1fr;gap:24px}.welcome h1{font-size:38px}.form-card,.status-card{padding:30px}.header{padding:0 30px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Desktop readability and review hierarchy */
body { font-size:16px; }
:root { --muted:#706c7d; }
.subtext, .intro { font-size:16px; color:#706c7d; }
.field-label { font-size:15px; }
input, textarea { font-size:16px; }
.primary, .secondary { font-size:16px; }
.text-button, .skip { font-size:14px; color:#756a87; }
.form-card h2, .login-card h2 { font-size:28px; }
.sidebar h1 { font-size:28px; }
.sidebar > p { font-size:15px; color:#797181; }
.step-title { font-size:16px; color:#776b87; }
.step-detail { font-size:14px; color:#847a92; }
.step .number { font-size:14px; color:#80748e; }
.step { min-height:96px; }
.step:not(:last-child):before { height:56px; }
.step-count { font-size:13px; color:#82758f; }
.field-foot, .error { font-size:14px; }
.field-foot { color:#7b7287; }
.error { min-height:28px; }
.required, .optional { font-size:12px; }
.breadcrumb { font-size:14px; }
.page-head { gap:20px; }
.session-chip {
  gap:14px; padding:12px 16px; border:1px solid #e4dcf5;
  border-radius:14px; background:#f0ebfa; color:#5c4a7d; flex-shrink:0;
}
.session-icon { color:#8066bf; }
.session-icon svg { width:22px; height:22px; }
.session-info { display:flex; flex-direction:column; gap:1px; }
.session-label { font-size:12px; color:#7a6c90; }
.session-key { font-size:16px; font-weight:650; letter-spacing:.6px; }
.verified-badge {
  border-radius:7px; padding:4px 8px; background:#e1f0e8;
  color:#367357; font-size:12px; font-weight:550; white-space:nowrap;
}
.session-switch { border-left:1px solid #d8cde9; padding-left:14px; margin-left:2px; color:#6a528e; }
.review-box { padding:28px 30px; margin:24px 0; background:#f5f1fd; border-color:#ddd2f2; border-left:4px solid #b5a0e5; }
.review-box .review-label { font-size:14px; color:#77658f; margin-bottom:14px; }
.review-box .user-content { font-size:20px; line-height:1.85; color:#30283f; max-height:none; overflow:visible; }
.review-box .email-value { font-size:26px; font-weight:650; line-height:1.65; }
.confirmation-tip { font-size:15px; color:#7e728e; }
.work-layout > *, .review-box, .summary-row, .status-header > div { min-width:0; }
.summary-blocks { display:grid; gap:14px; }
.summary-blocks .summary-row { padding:20px 24px; background:#f7f4fc; border:1px solid #e4dbf2; border-radius:12px; }
.summary-blocks .summary-label { margin-bottom:12px; font-size:14px; color:#79688d; }
.summary-blocks .summary-label .text-button { padding:4px 10px; border-radius:6px; background:#ede6f8; color:#70529e; }
.summary-blocks .user-content { font-size:19px; line-height:1.85; color:#30283f; max-height:none; overflow:visible; }
.summary-blocks .email-value { font-size:24px; font-weight:600; }
.summary-blocks .is-empty { background:#faf9fb; border-color:#ebe7ef; }
.summary-blocks .empty-value { color:#817989; font-size:16px; }
.summary-tip { font-size:13px; color:#817789; }
.record-details { font-size:15px; color:#786a88; }
.record-details .summary-label { font-size:14px; color:#81738f; }
.record-details .user-content { font-size:16px; color:#44374f; max-height:none; overflow:visible; }
.record-details .empty-value { color:#817989; }
.status-header { flex-wrap:wrap; }
.status-header > div { flex:1; }
.status-header h2 { font-size:26px; }
.status-header p { font-size:15px; color:#7c7089; }
.status-pill { font-size:13px; }
.timeline-row { min-height:94px; }
.timeline-row:not(:last-child):before { height:67px; }
.timeline-row h3 { font-size:16px; color:#897d95; }
.timeline-row p { font-size:14px; color:#81748d; }
.notice { font-size:15px; color:#786389; }
.side-small { font-size:14px!important; }
.login-tip { font-size:13px; color:#82788f; }
.demo-hint, .sample-key { font-size:13px; color:#80728f; }
.welcome-bottom { font-size:14px; color:#81738e; }
.help-button { font-size:14px; }
.micro-badge { font-size:12px; color:#80758d; }
.footer { font-size:12px; color:#857c8d; gap:25px; }
dialog p { font-size:16px; color:#706477; }
.help-note { font-size:14px; color:#78618e; }
@media(max-width:1150px) {
  .session-chip { gap:10px; padding:10px 12px; }
  .session-switch { padding-left:10px; }
  .actions { flex-wrap:wrap; }
}

/* Fit the desktop workflow to the available viewport; keep actions outside scroll regions. */
body { height:100dvh; min-height:600px; display:grid; grid-template-rows:76px minmax(0,1fr) 30px 46px; }
.header { width:min(1240px,calc(100% - 64px)); height:100%; padding:0; }
.header-right { gap:20px; }
#header-session:empty { display:none; }
.header .session-chip { padding:7px 12px; gap:11px; border-radius:12px; }
.header .session-info { flex-direction:row; align-items:center; gap:10px; }
#app { min-height:0; }
.page { width:min(1100px,calc(100% - 64px)); height:100%; min-height:0; margin:0 auto; padding:8px 0 12px; display:flex; flex-direction:column; }
.page-head { min-height:28px; margin-bottom:10px; flex-shrink:0; }
.work-layout { flex:1; min-height:0; align-items:stretch; grid-template-columns:250px minmax(0,1fr); gap:30px; }
.sidebar { padding:20px 12px 0 2px; }
.steps { margin:26px 0 0; }
.step { min-height:86px; }
.step:not(:last-child):before { height:46px; }
.form-card, .status-card { position:relative; padding:24px 30px; min-height:0; display:flex; flex-direction:column; }
.form-card > .card-top { position:absolute; right:30px; top:29px; margin:0; }
.form-card > .card-top .icon-box { display:none; }
.form-card h2 { margin:0 110px 8px 0; flex-shrink:0; }
.form-card .subtext { margin:0 0 16px; flex-shrink:0; line-height:1.65; }
#field-form { display:flex; flex-direction:column; flex:1; min-height:0; }
.field-label { margin-bottom:8px; }
#field-form textarea { flex:1; min-height:80px; max-height:240px; resize:none; }
.field-foot { margin-top:6px; }
.actions { flex-shrink:0; margin-top:auto; padding-top:16px; gap:10px; flex-wrap:nowrap; }
#field-form .actions { margin-top:auto; }
.primary, .secondary { min-height:46px; padding:10px 18px; }
.review-box { flex:1; min-height:0; display:flex; flex-direction:column; padding:20px 24px; margin:0 0 10px; }
.review-box .review-label { flex-shrink:0; margin-bottom:10px; }
.review-box .user-content { min-height:0; overflow:auto; max-height:none; }
.confirmation-tip { margin:0 0 12px; flex-shrink:0; }
.summary-blocks { flex:1; min-height:0; gap:10px; grid-template-rows:repeat(3,minmax(0,1fr)); }
.summary-blocks .summary-row { display:flex; flex-direction:column; min-height:0; padding:12px 18px; }
.summary-blocks .summary-label { flex-shrink:0; margin-bottom:6px; }
.summary-blocks .summary-label .text-button { padding:2px 8px; }
.summary-blocks .user-content { min-height:0; overflow:auto; line-height:1.6; }
.summary-tip { margin:10px 0; line-height:1.5; flex-shrink:0; }
.content-scroll-hint { font-size:12px; line-height:18px; color:#72539e; padding-top:3px; flex-shrink:0; }
.content-scroll-hint[hidden] { display:none; }
.user-content, .record-body { scrollbar-width:thin; scrollbar-color:#b4a0d8 #eee8f6; overscroll-behavior:contain; }
.user-content.is-scrollable { padding-right:8px; }
.status-header { padding-bottom:14px; flex-shrink:0; }
.status-header h2 { font-size:26px; }
.status-symbol { width:48px; height:48px; border-radius:15px; }
.timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:20px 0 10px; flex-shrink:0; }
.timeline-row { display:flex; flex-direction:column; gap:9px; min-height:100px; }
.timeline-row:not(:last-child):before { left:24px; top:13px; width:calc(100% - 12px); height:1px; }
.timeline-dot { position:relative; z-index:1; background:white; }
.timeline-row h3 { margin-bottom:3px; }
.notice { margin-top:0; padding:10px 14px; flex-shrink:0; }
.record-details { margin:10px 0 12px; min-height:0; }
.record-details[open] { display:flex; flex-direction:column; flex:1; }
.record-details summary { flex-shrink:0; padding:5px 0; }
.record-body { min-height:0; overflow:auto; }
.record-details[open]::details-content { display:flex; flex-direction:column; min-height:0; flex:1; }
.record-details .summary-row { padding:8px 0; }
.record-details .summary-label { margin-bottom:3px; }
.footer { width:min(1100px,calc(100% - 64px)); max-width:none; margin:0 auto; padding:4px 0 0; align-items:center; }
.demo-bar { position:static; padding:7px max(32px,calc((100vw - 1100px)/2)); }
.login-layout { display:grid; grid-template-columns:1fr 488px; gap:70px; align-items:center; padding:10px 24px; }
.login-card { padding:26px 32px; }
.login-card .card-top { margin-bottom:18px; }
.login-card .subtext { margin-bottom:18px; }
.login-tip { margin:12px 0 18px; }
.login-divider { margin-bottom:16px; }
.hero-art { height:180px; margin:14px 0 8px; }
.welcome h1 { margin-top:14px; }
@media(max-height:800px) {
  body { grid-template-rows:68px minmax(0,1fr) 28px 42px; }
  .form-card, .status-card { padding:18px 24px; }
  .form-card > .card-top { top:24px; right:24px; }
  .form-card h2 { margin-bottom:5px; }
  .form-card .subtext { margin-bottom:12px; }
  .summary-blocks .summary-row { display:grid; grid-template-columns:106px minmax(0,1fr) 56px; grid-template-rows:minmax(0,1fr) auto; gap:0 12px; align-items:center; padding:10px 14px; }
  .summary-blocks .summary-label { display:contents; }
  .summary-blocks .summary-label > span { grid-column:1; grid-row:1; }
  .summary-blocks .summary-label > button { grid-column:3; grid-row:1; }
  .summary-blocks .user-content { grid-column:2; grid-row:1; max-height:100%; }
  .summary-blocks .email-value { font-size:24px; }
  .summary-blocks .content-scroll-hint { grid-column:2 / 4; grid-row:2; }
  .summary-blocks .summary-label > span { font-size:14px; }
  .summary-tip { margin:8px 0; }
  .actions { padding-top:12px; }
  .timeline { padding-top:14px; gap:14px; }
  .timeline-row { min-height:90px; }
  .status-header { gap:12px; }
  .status-header h2 { font-size:24px; }
  .status-header p { font-size:15px; }
  .hero-art { height:140px; margin:8px 0; }
  .welcome h1 { font-size:38px; margin:10px 0; }
  .welcome .intro { margin:16px 0 0; }
  .login-card { padding:20px 28px; }
  .login-card .card-top { margin-bottom:12px; }
  .login-card .subtext { margin-bottom:14px; }
}
@media(max-width:1150px) {
  .header { width:calc(100% - 48px); }
  .header-right { gap:14px; }
  .header .prototype-label { display:none; }
  .work-layout { grid-template-columns:220px minmax(0,1fr); gap:22px; }
  .login-layout { grid-template-columns:1fr 450px; gap:30px; padding-left:0; padding-right:0; }
}
.work-layout { grid-template-rows:minmax(0,1fr); }
.sidebar { min-height:0; }
.summary-label .text-button { white-space:nowrap; }
@media(max-height:800px) {
  .summary-blocks .summary-row { grid-template-columns:106px minmax(0,1fr) 64px; }
}
@media(max-height:700px) {
  .sidebar { padding-top:10px; }
  .sidebar h1 { white-space:nowrap; letter-spacing:-1px; }
  .steps { margin-top:20px; }
  .step { min-height:76px; }
  .step:not(:last-child):before { height:36px; }
  .status-sidebar-icon { margin:20px 0; width:90px; height:90px; }
}
@media(max-height:800px) {
  .status-card:has(.record-details[open]) .timeline { display:none; }
}
.summary-card > .actions { margin-top:12px; }

/* Compact form content is centered in the available stage, without stretching cards. */
.work-layout:has(.form-card:not(.summary-card)) > .sidebar {
  align-self:center;
  padding-top:0;
  padding-bottom:0;
}
.form-card:not(.summary-card) {
  align-self:center;
  height:auto;
  max-height:min(100%,620px);
}
.form-card:not(.summary-card) #field-form { flex:0 1 auto; }
.form-card:not(.summary-card) #field-form textarea {
  flex:0 1 172px;
  height:172px;
  max-height:172px;
}
.form-card:not(.summary-card) .actions,
.form-card:not(.summary-card) #field-form .actions { margin-top:18px; }
.form-card:not(.summary-card) .review-box {
  flex:0 1 auto;
  max-height:300px;
  margin:4px 0 16px;
}
.form-card:not(.summary-card) .confirmation-tip { margin-bottom:0; }
@media(min-height:801px) {
  .form-card:not(.summary-card) { padding:30px 36px; }
  .form-card:not(.summary-card) > .card-top {
    position:static;
    margin:0 0 20px;
    flex-shrink:0;
  }
  .form-card:not(.summary-card) > .card-top .icon-box { display:grid; }
  .form-card:not(.summary-card) h2 { margin-right:0; }
  .form-card:not(.summary-card) .subtext { margin-bottom:22px; }
  .form-card:not(.summary-card) .actions { margin-top:22px; padding-top:20px; }
}

/* A stable frame across all three entry and confirmation steps. */
.form-card:not(.summary-card) { height:432px; max-height:100%; }
.form-card:not(.summary-card) #field-form { flex:1; }
.form-card:not(.summary-card) #field-form input,
.form-card:not(.summary-card) #field-form textarea {
  height:58px; min-height:58px; max-height:58px; line-height:1.6; flex:0 0 58px;
}
.form-card:not(.summary-card) .actions,
.form-card:not(.summary-card) #field-form .actions { margin-top:auto; }
.form-card:not(.summary-card) .review-box {
  flex:1; display:grid; grid-template-columns:100px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto; align-items:center; column-gap:16px;
  padding:10px 18px; margin:0 0 10px; max-height:none;
}
.review-box .review-label { grid-column:1; grid-row:1; margin-bottom:0; }
.review-box .user-content { grid-column:2; grid-row:1; max-height:100%; }
.review-box .content-scroll-hint { grid-column:2; grid-row:2; }
.form-card:not(.summary-card) .confirmation-tip { margin-bottom:12px; }
@media(max-height:800px) {
  .form-card:not(.summary-card) { height:322px; }
}
/* Submitted information is always visible, with the same layout for every outcome. */
.work-layout:has(.status-card) > .sidebar { align-self:center; padding-top:0; padding-bottom:0; }
.status-card { align-self:center; height:650px; max-height:100%; }
.status-card .status-header { flex-wrap:nowrap; }
.status-card .timeline { padding:14px 0 10px; }
.status-card .timeline-row { min-height:86px; }
.status-card .notice.warning { margin-bottom:12px; }
.status-records { min-height:0; flex:1; display:flex; flex-direction:column; }
.records-heading { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; margin-bottom:10px; }
.records-heading h3 { font-size:15px; font-weight:600; color:#564765; margin:0; }
.records-heading > span { font-size:12px; color:#90839b; }
.records-grid { display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:10px; flex:1; min-height:0; }
.status-records .summary-row { display:grid; grid-template-columns:116px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; column-gap:14px; align-items:center; padding:12px 16px; border:1px solid #eae4f2; border-radius:10px; background:#faf8fd; min-height:0; }
.status-records .summary-label { margin:0; grid-column:1; grid-row:1; font-size:14px; color:#82718f; }
.status-records .user-content { grid-column:2; grid-row:1; font-size:18px; line-height:1.6; color:#3d304b; min-height:0; max-height:100%; overflow:auto; }
.status-records .email-value { font-size:20px; font-weight:600; }
.status-records .empty-value { font-size:15px; color:#8c8296; }
.status-records .content-scroll-hint { grid-column:2; grid-row:2; }
.status-card > .actions { margin-top:16px; }
@media(max-height:800px) {
  .status-card .status-header { padding-bottom:10px; }
  .status-card .timeline { padding:10px 0 4px; }
  .status-card .timeline-row { min-height:76px; gap:5px; }
  .status-card .timeline-row p { font-size:12px; }
  .status-card .records-heading { margin-bottom:6px; }
  .status-card .records-grid { gap:6px; }
  .status-records .summary-row { padding:7px 12px; grid-template-columns:104px minmax(0,1fr); }
  .status-card > .actions { margin-top:10px; }
}
@media(max-height:740px) {
  .status-card:has(.notice.warning) .timeline { display:none; }
  .status-card:has(.notice.warning) .notice { margin-top:10px; }
}
.status-records .user-content { grid-row:1 / 3; }
.status-records .content-scroll-hint { grid-column:1; grid-row:2; font-size:11px; white-space:nowrap; }
@media(max-height:740px) {
  .status-card .timeline-row { min-height:42px; }
  .status-card .timeline-row p { display:none; }
  .status-card .records-heading > span { font-size:11px; }
}


/* 兑换流程：等候提示、验证码倒计时与本地演示操作。 */
body { grid-template-rows:76px minmax(0,1fr) 30px 78px; }
.demo-bar { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:4px; padding-top:5px; padding-bottom:5px; }
.demo-group { display:flex; align-items:center; gap:7px; min-height:28px; }
.demo-title { width:62px; margin-right:0; flex-shrink:0; }
.demo-flow-note { font-size:11px; color:#80728f; margin-left:auto; }
.demo-bar button:disabled { cursor:default; opacity:.4; }
.submission-reminder { flex-shrink:0; padding:10px 14px; margin:12px 0 0; border-radius:10px; background:#fff9ed; color:#85632c; font-size:13px; line-height:1.7; }
.submission-reminder b { display:block; }
.waiting-reminder { margin:12px 0 0; padding:9px 13px; border-radius:9px; background:#f6f2fc; color:#77618e; font-size:13px; flex-shrink:0; }
.verification-panel { flex-shrink:0; padding:16px 18px 8px; margin-top:14px; background:#fffaf1; border:1px solid #efd9ad; border-radius:14px; }
.verification-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.verification-heading h3 { margin:0; font-size:17px; color:#735524; }
.countdown-label { font-size:13px; color:#8a6e3c; white-space:nowrap; }
#code-countdown { display:inline-block; min-width:72px; margin-left:6px; padding:2px 8px; border-radius:7px; background:#f6e9ca; color:#805a1c; font-size:24px; line-height:1.4; font-variant-numeric:tabular-nums; text-align:center; }
#code-countdown.urgent { color:#b63f4c; background:#fbe8e8; }
.verification-panel > p { margin:6px 0 10px; font-size:13px; color:#8a7552; }
.verification-panel .field-label { font-size:13px; margin-bottom:6px; }
.code-controls { display:flex; align-items:stretch; gap:10px; }
.code-controls input { min-width:0; flex:1; height:46px; padding:10px 12px; }
.code-controls button { flex-shrink:0; }
.verification-panel .error { min-height:24px; padding-top:3px; font-size:12px; }
.status-card:has(.verification-panel) .timeline { display:none; }
.status-card:has(.verification-panel) .status-records { margin-top:14px; }
.status-card .status-header h2 { font-size:24px; }
.status-card .status-header p { font-size:14px; }
.status-card .status-symbol { width:52px; height:52px; border-radius:16px; }
.auto-update { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#80728f; }
.auto-update i { width:6px; height:6px; border-radius:50%; background:#8e7dc4; }
#waiting-dialog { width:min(460px,calc(100vw - 40px)); }
#waiting-dialog .icon-box { font-size:27px; }
#waiting-dialog h2 { font-size:25px; }
#waiting-dialog strong { color:#7754b5; }
@media(max-width:1150px) {
 .demo-flow-note { display:none; }
 .status-card .status-header { gap:10px; }
 .status-card .status-header h2 { font-size:21px; }
}
@media(max-height:800px) {
 body { grid-template-rows:68px minmax(0,1fr) 28px 78px; }
 .status-card { padding:16px 24px; }
 .status-card .status-header { padding-bottom:8px; }
 .status-card .timeline-row { min-height:48px; }
 .status-card .timeline-row p { display:none; }
 .verification-panel { margin-top:10px; padding:10px 14px 4px; }
 .verification-panel > p { margin:4px 0 6px; }
 .status-card:has(.verification-panel) .status-records { margin-top:10px; }
 .status-records .summary-row { padding:6px 10px; }
 .status-records .user-content { font-size:16px; }
 .status-records .email-value { font-size:18px; }
 .submission-reminder { margin-top:8px; padding:7px 12px; }
 .summary-card > .actions { margin-top:8px; }
 .status-card > .actions { margin-top:8px; padding-top:10px; }
}
@media(max-height:680px) {
 .status-card { padding-top:12px; padding-bottom:12px; }
 .waiting-reminder { margin-top:8px; }
 .login-card .card-top { display:none; }
 .summary-card { padding:14px 24px; }
 .summary-card h2 { font-size:24px; margin-bottom:4px; }
 .summary-card .subtext { font-size:14px; margin-bottom:8px; }
 .summary-card .submission-reminder { font-size:12px; line-height:1.6; }
 .summary-card .submission-reminder b { display:inline; }
 .summary-card .summary-blocks { gap:6px; }
 .summary-card .summary-row { padding:3px 12px; }
 .summary-card .summary-label > span { font-size:12px; }
 .summary-card .summary-blocks .user-content { font-size:16px; }
 .status-card .timeline { padding:8px 0 4px; }
 .status-card .timeline-row { min-height:32px; }
 .status-card .status-header p { font-size:12px; }
 .status-card .status-header h2 { font-size:20px; }
 .status-card .records-heading > span { display:none; }
 .status-card .records-heading h3 { font-size:13px; }
 .status-card .records-heading { margin-bottom:4px; }
 .status-card .records-grid { gap:4px; }
 .status-card .status-records .summary-row { padding:2px 10px; }
 .status-card .status-records .summary-label { font-size:12px; }
 .status-card .status-records .user-content { font-size:14px; }
 .status-card .status-records .content-scroll-hint { font-size:10px; line-height:12px; padding-top:0; }
 .verification-panel > p { display:none; }
 .verification-panel .field-label { margin:4px 0; }
 .verification-panel .verification-heading h3 { font-size:15px; }
 #code-countdown { font-size:20px; }
}
@media(max-height:740px) {
 .status-card:has(.verification-panel) .records-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); gap:8px; }
 .status-card:has(.verification-panel) .summary-row { display:flex; flex-direction:column; align-items:stretch; padding:7px 10px; }
 .status-card:has(.verification-panel) .summary-label { flex-shrink:0; margin-bottom:3px; }
 .status-card:has(.verification-panel) .user-content { flex:1; }
 .status-card:has(.verification-panel) .content-scroll-hint { line-height:14px; padding-top:0; }
 .verification-panel .field-label { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); }
 .verification-panel #code-form { margin-top:6px; }
 .status-card:has(.verification-panel) .status-symbol { width:40px; height:40px; border-radius:12px; font-size:24px; }
 .status-card:has(.verification-panel) .status-header h2 { font-size:20px; margin-bottom:3px; }
}


/* 验证码弹窗及完整卡密。 */
.header .session-key { overflow-wrap:anywhere; white-space:normal; max-width:270px; }
.header .session-switch { flex-shrink:0; }
.code-reminder { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 18px; margin:14px 0 0; border:1px solid #efd9ad; border-radius:12px; background:#fffaf1; flex-shrink:0; }
.code-reminder > div { display:flex; flex-direction:column; gap:3px; }
.code-reminder strong { font-size:16px; color:#735524; }
.code-reminder span { font-size:13px; color:#8a6e3c; }
.code-reminder [data-code-timer] { font-variant-numeric:tabular-nums; }
.code-reminder .primary { flex-shrink:0; }
[data-code-timer].urgent { color:#b63f4c; }
.status-card:has(.code-reminder) .timeline { display:none; }
.status-card:has(.code-reminder) .status-records { margin-top:14px; }
#code-dialog { width:min(480px,calc(100vw - 40px)); max-height:calc(100dvh - 32px); overflow:auto; padding:30px 32px 24px; }
.code-dialog-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:#bd8732; background:#fff3de; font-size:27px; font-weight:600; }
#code-dialog h2 { margin:16px 0 8px; font-size:27px; }
#code-dialog > p { margin:0 0 18px; font-size:14px; }
.dialog-countdown { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; margin-bottom:20px; border:1px solid #efd9ad; border-radius:12px; background:#fffaf1; color:#8a6e3c; font-size:14px; }
.dialog-countdown[hidden] { display:none; }
#code-dialog #code-countdown { font-size:28px; }
#code-dialog input { height:52px; }
#code-dialog .error { min-height:30px; }
#code-dialog .code-dialog-note { font-size:12px; line-height:1.8; margin:16px 0 0; color:#8b8095; }
@media(max-height:680px) {
 .code-reminder { margin-top:8px; padding:9px 12px; }
 .status-card:has(.code-reminder) .status-records { margin-top:8px; }
 #code-dialog { padding:22px 28px 18px; }
 #code-dialog h2 { margin-top:10px; }
 .dialog-countdown { margin-bottom:14px; }
}