.application-flow{position:relative;margin:16px 0;padding:20px 24px;border:1px solid #f0dfe4;border-radius:16px;background:linear-gradient(110deg,#fff 65%,#fff8fa);overflow:hidden}.application-flow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.application-flow-head h2{margin:0;font-size:17px;color:#2b2f35}.application-flow-status{align-self:flex-start;padding:7px 15px 7px 18px;border-radius:0 0 0 16px;position:absolute;right:0;top:0;font-size:12px;font-weight:700;color:#dc1933;background:#fff0f3;border-left:1px solid #f8dce2;border-bottom:1px solid #f8dce2}.application-flow-status.is-current{color:#168152;background:#eaf8f0;border-color:#d2ecde}.application-flow-status.is-ended,.application-flow-status.is-unknown{color:#7e8a9b;background:#f1f3f7;border-color:#e4e8ef}.application-flow-list{list-style:none;margin:0;padding:0}.application-flow-step{position:relative;display:flex;align-items:baseline;gap:16px;padding:8px 0 8px 23px;line-height:1.65;font-size:14px;min-width:0}.application-flow-step:not(:last-child):after{content:"";position:absolute;left:5px;top:21px;bottom:-13px;width:1px;background:#f0cbd3}.application-flow-dot{position:absolute;left:0;top:16px;width:11px;height:11px;border:2px solid #e893a3;border-radius:50%;background:#fff;z-index:1}.application-flow-label{flex:0 0 64px;width:64px;color:#66768a;font-weight:600;white-space:nowrap}.application-flow-time{min-width:0;color:#394657;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.application-flow-step.is-current .application-flow-dot{border-color:#e60012;background:#e60012;box-shadow:0 0 0 4px #ffe8ee}.application-flow-step.is-current .application-flow-label{color:#e60012}.application-flow-step.is-ended .application-flow-dot{border-color:#bcc4cf}.application-flow-step.is-ended:after{background:#dce1e8}.application-flow-step.is-ended>.application-flow-label,.application-flow-step.is-ended>.application-flow-time{color:#929cab}.application-flow-written{flex:1;min-width:0}.application-flow-written summary{display:flex;align-items:baseline;gap:16px;list-style:none;cursor:pointer}.application-flow-written summary::-webkit-details-marker{display:none}.application-flow-written summary:focus-visible{outline:2px solid #e60012;outline-offset:4px;border-radius:3px}.application-flow-written .application-flow-time{flex:1}.application-flow-toggle{display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;color:#e60012}.application-flow-toggle i{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}.application-flow-written .when-open{display:none}.application-flow-written[open] .when-open{display:inline}.application-flow-written[open] .when-closed{display:none}.application-flow-written[open] .application-flow-toggle i{transform:rotate(225deg)}.application-flow-sessions{margin:13px 0 0 80px;padding:14px 16px;border:1px solid #eceff4;border-radius:10px;background:#fff}.application-flow-day+.application-flow-day{margin-top:16px;padding-top:14px;border-top:1px dashed #e4e8ef}.application-flow-day h3{margin:0 0 9px;font-size:14px;color:#455366}.application-flow-day small{margin-left:10px;color:#8994a5;font-size:12px;font-weight:400}.application-flow-session{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 14px;padding:6px 0;font-size:13px}.application-flow-session time{color:#7b889a;font-variant-numeric:tabular-nums}.application-flow-session strong{color:#384659;font-weight:600}.application-flow-session>span{color:#8490a1}.application-flow-session p{flex-basis:100%;margin:0;color:#7c889a;line-height:1.65}.application-flow-empty{margin:0;color:#8591a3;font-size:13px}.application-flow.is-ended{border-color:#e4e8ee;background:#f7f8fa}.application-flow.is-ended .application-flow-head h2,.application-flow.is-ended .application-flow-label,.application-flow.is-ended .application-flow-time{color:#929baa}.application-flow.is-ended .application-flow-dot{border-color:#b8c1ce;background:#f7f8fa}.application-flow.is-ended .application-flow-step:after{background:#dce1e8}
body.mobile .application-flow{margin:12px 0;padding:17px 16px;border-radius:15px;background:#fff}body.mobile .application-flow-head{margin-bottom:12px}body.mobile .application-flow-head h2{font-size:15px}body.mobile .application-flow-step{gap:10px;padding:8px 0 8px 19px;font-size:12px;line-height:1.7}body.mobile .application-flow-label{flex-basis:56px;width:56px;font-size:13px}body.mobile .application-flow-written summary{gap:10px;flex-wrap:wrap}body.mobile .application-flow-written summary>.application-flow-time{flex:1;min-width:130px}body.mobile .application-flow-toggle{margin-left:auto;font-size:11px}body.mobile .application-flow-sessions{margin:12px 0 0;padding:12px}body.mobile .application-flow-status{font-size:11px;padding:6px 12px 6px 15px}body.mobile .application-flow.is-ended{background:#f7f8fa}

.application-flow-written-range{display:block}.application-flow-written summary{align-items:flex-start}.application-flow-toggle{padding-top:3px}

/* Compact mobile flow, retaining a readable four-character label column. */
body.mobile .application-flow{padding:14px 14px 12px;border-color:#f0e2e6;background:linear-gradient(135deg,#fff 82%,#fff7f9);border-radius:15px}
body.mobile .application-flow-head{margin-bottom:8px;padding-bottom:9px;border-bottom:1px solid #f4e9ed}
body.mobile .application-flow-head h2{font-size:15px;font-weight:700;padding-left:8px;border-left:3px solid #e60012;line-height:1.2}
body.mobile .application-flow-status{padding:5px 11px 5px 14px;font-size:11px;border-bottom-left-radius:14px}
body.mobile .application-flow-step{padding:6px 0 6px 17px;gap:8px;font-size:12px;line-height:1.6;align-items:flex-start}
body.mobile .application-flow-label{flex:0 0 54px;width:54px;font-size:13px;line-height:1.5;font-weight:600}
body.mobile .application-flow-dot{width:8px;height:8px;top:12px;left:1px;border-width:2px}
body.mobile .application-flow-step:not(:last-child):after{left:4px;top:18px;bottom:-12px}
body.mobile .application-flow-step.is-current .application-flow-dot{box-shadow:0 0 0 3px #ffe8ee}
body.mobile .application-flow-written summary{display:grid;grid-template-columns:54px minmax(0,1fr) 32px;gap:8px;align-items:start}
body.mobile .application-flow-written summary>.application-flow-time{min-width:0}
body.mobile .application-flow-toggle{gap:3px;padding-top:2px;font-size:10px}
body.mobile .application-flow-sessions{margin-top:8px;padding:10px 11px;border-radius:9px;background:#fafbfc}
body.mobile .application-flow-day h3{margin-bottom:5px;font-size:13px}
body.mobile .application-flow-day+.application-flow-day{margin-top:10px;padding-top:9px}
body.mobile .application-flow-session{padding:4px 0;gap:3px 8px;font-size:12px}
body.mobile .application-flow.is-ended{background:#f7f8fa;border-color:#e4e8ee}
body.mobile .application-flow.is-ended .application-flow-head{border-bottom-color:#e7ebf0}
body.mobile .application-flow.is-ended .application-flow-head h2{border-left-color:#aab4c1}

.application-flow-time .flow-time-point{display:inline-block;white-space:nowrap;margin-right:4px}.application-flow-written-range+.application-flow-written-range{margin-top:3px}

/* Tighter mobile timeline rhythm. */
body.mobile .application-flow-step{padding-top:4px;padding-bottom:4px}
body.mobile .application-flow-dot{top:10px}
body.mobile .application-flow-step:not(:last-child):after{top:16px;bottom:-10px}

/* Written sessions use corner labels instead of loose period text. */
.application-flow-session{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:8px;padding:11px 12px;border:1px solid #e8edf3;border-radius:10px;background:#fff}
.application-flow-session>strong{grid-row:1;padding-right:48px;line-height:1.6}
.application-flow-session>time{grid-row:2;line-height:1.6}
.application-flow-session>p{grid-column:1;margin:0;line-height:1.65}
.application-flow-session>.application-flow-session-badge{position:absolute;top:-1px;right:-1px;padding:4px 10px;border:1px solid #d8e8fc;border-radius:0 10px 0 10px;background:#eef6ff;color:#3574ba;font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap}
.application-flow-session>.application-flow-session-badge[data-period="下午"]{border-color:#f6e2c5;background:#fff5e7;color:#bd7a1a}
.application-flow-session>.application-flow-session-badge[data-period="晚上"]{border-color:#d4ecdf;background:#edf9f2;color:#248559}
body.mobile .application-flow-session{padding:9px 10px;gap:3px;margin-top:6px}
body.mobile .application-flow-session>strong{font-size:13px;padding-right:44px}
body.mobile .application-flow-session>.application-flow-session-badge{padding:3px 9px;font-size:10px}


/* Project registration badge and a ribbon link to the associated recruitment series. */
.application-flow-exam-head{min-height:30px;padding-right:118px}
.application-flow-title{display:flex;align-items:center;flex-wrap:wrap;gap:9px;min-width:0}
.application-flow-title h2{white-space:nowrap}
.application-registration-status{display:inline-flex;align-items:center;flex-shrink:0;padding:6px 11px;border:1px solid #ffd5df;border-radius:13px 4px;background:#fff0f4;color:#d9193b;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
.application-registration-status.is-ongoing{background:#e9f8f1;color:#168253;border-color:#c9ebdc}
.application-registration-status.is-not-started{background:#fff6e7;color:#ad6c19;border-color:#f2dfbb}
.application-registration-status.is-ended,.application-registration-status.is-unknown{background:#eef1f5;color:#7c8796;border-color:#dde3eb}
.application-flow-analysis{position:absolute;z-index:1;right:0;top:0;display:flex;align-items:center;gap:8px;min-height:45px;padding:10px 20px 10px 27px;border-radius:0 15px 0 22px;background:linear-gradient(115deg,#ee2046,#d9002c);box-shadow:0 3px 9px #d9002c18;color:#fff;font-size:14px;font-weight:700;text-decoration:none;line-height:1.4}
.application-flow-analysis:before{content:"";position:absolute;left:-11px;top:0;width:24px;height:100%;background:inherit;transform:skewX(24deg);border-radius:0 0 0 10px;z-index:-1}
.application-flow-analysis span{font-size:21px;line-height:1}
.application-flow-analysis:hover{background:linear-gradient(115deg,#e9163d,#bf0028);color:#fff}
.application-flow-analysis:focus-visible{outline:2px solid #d9002c;outline-offset:-4px}
body.mobile .application-flow-exam-head{padding-right:88px;min-height:30px}
body.mobile .application-flow-title{gap:6px}
body.mobile .application-flow-title h2{padding-left:0;border-left:0}
body.mobile .application-registration-status{font-size:10px;padding:5px 7px;border-radius:11px 3px}
body.mobile .application-flow-analysis{font-size:12px;min-height:39px;padding:9px 10px 9px 16px;gap:4px;border-radius:0 14px 0 16px}