:root {
  color-scheme: light;
  --navy: #122f50;
  --navy-light: #1c456f;
  --blue: #1769aa;
  --blue-dark: #0f568f;
  --blue-soft: #eaf4fc;
  --red: #b42318;
  --red-dark: #8f1b13;
  --green: #137a49;
  --text: #182433;
  --muted: #637184;
  --line: #d8e0e8;
  --line-strong: #bdc9d5;
  --surface: #fff;
  --surface-soft: #f6f8fa;
  --background: #edf1f5;
  --shadow: 0 10px 34px rgba(18, 47, 80, .1);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input { font-family: inherit; }
.page-shell { width: min(calc(100% - 48px), 1040px); margin: 36px auto; }
.app-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.app-header { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 20px 32px; color: #fff; background: linear-gradient(110deg, var(--navy), var(--navy-light)); }
.brand-block { flex: 0 0 auto; }
.eyebrow { margin: 0 0 1px; font-size: 11px; font-weight: 800; letter-spacing: .18em; opacity: .72; }
h1 { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: .01em; }
.header-actions { display: flex; align-items: center; gap: 22px; }
.login-context { display: grid; padding-right: 22px; border-right: 1px solid rgba(255, 255, 255, .25); line-height: 1.4; text-align: right; }
.login-context span { font-size: 11px; opacity: .7; }
.login-context strong { font-size: 14px; }
.logout-button { min-height: 38px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 6px; color: #fff; background: rgba(255,255,255,.06); font-size: 13px; font-weight: 700; cursor: pointer; }
.logout-button:hover { background: rgba(255,255,255,.15); }
.content { padding: 32px; }
.page-heading { margin-bottom: 24px; }
.reset-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.heading-kicker { margin: 0 0 2px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
h2 { margin: 0 0 5px; font-size: 23px; line-height: 1.45; }
.lead { margin: 0; color: var(--muted); font-size: 14px; }
.steps { flex: 0 0 auto; display: flex; align-items: center; gap: 0; margin: 0 0 2px; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 7px; color: #8a96a5; font-size: 12px; font-weight: 700; white-space: nowrap; }
.steps li:not(:last-child)::after { width: 32px; height: 1px; margin: 0 10px; content: ""; background: var(--line-strong); }
.steps span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; font-size: 11px; }
.steps .active { color: var(--blue-dark); }
.steps .active span { border-color: var(--blue); color: #fff; background: var(--blue); }
.steps .done { color: var(--green); }
.steps .done span { border-color: var(--green); color: #fff; background: var(--green); }
.form-stack { display: grid; gap: 14px; }
.search-panel { padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.search-form { grid-template-columns: minmax(280px, 520px) 120px; align-items: end; }
.search-form label { min-width: 0; }
label { display: grid; gap: 6px; color: #29384a; font-size: 13px; font-weight: 750; }
input[type="text"], input[type="password"] { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #aab7c5; border-radius: 7px; background: #fff; color: var(--text); font-size: 16px; transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #9aa5b1; }
input:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px rgba(23, 105, 170, .14); }
.primary-button, .secondary-button, .danger-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 10px 22px; border: 1px solid transparent; border-radius: 7px; font-size: 14px; font-weight: 750; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.primary-button { color: #fff; background: var(--blue); box-shadow: 0 3px 8px rgba(23, 105, 170, .18); }
.primary-button:hover { background: var(--blue-dark); }
.secondary-button { border-color: #9eacbb; color: #263648; background: #fff; }
.secondary-button:hover { border-color: #77889a; background: #f8fafb; }
.danger-button { color: #fff; background: var(--red); box-shadow: 0 3px 8px rgba(180, 35, 24, .16); }
.danger-button:hover { background: var(--red-dark); }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(23, 105, 170, .22); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: wait; }
.wide-button { width: 100%; }
.link-button { text-decoration: none; }
.message { margin: 18px 0 0; padding: 13px 16px; border-radius: 7px; font-size: 14px; }
.message.error { border: 1px solid #e9aaa4; color: #8f1b13; background: #fff1f0; }
.flush-message { margin: 18px 0 0; }
.field-error { grid-column: 1 / -1; margin: -8px 0 0; color: var(--red); font-size: 13px; }
.help-text { margin: -8px 0 0; color: var(--muted); font-size: 12px; }
.operation-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; margin-top: 22px; }
.employee-card, .password-panel { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.password-panel { border-top: 3px solid var(--blue); padding-top: 20px; }
.panel-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.panel-number { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); font-size: 12px; font-weight: 800; }
.section-label { margin: 0; color: #29384a; font-size: 14px; font-weight: 800; }
.panel-caption { margin: 0; color: var(--muted); font-size: 11px; }
.employee-name { margin: 22px 0 14px; font-size: 24px; font-weight: 800; letter-spacing: .02em; }
dl { margin: 0; }
dl > div { display: grid; grid-template-columns: 105px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
dt { color: var(--muted); font-size: 13px; }
dd { margin: 0; font-size: 14px; font-weight: 700; }
.password-form { margin-top: 20px; }
.confirm-card { margin-top: 8px; padding: 0; overflow: hidden; background: var(--surface-soft); }
.confirm-panel-heading { padding: 18px 22px; background: #fff; }
.confirm-card dl { padding: 8px 22px; }
.confirm-card dl > div { grid-template-columns: 170px 1fr; padding: 13px 0; }
.confirm-card .employee-name { margin: 0; font-size: 15px; }
.password-value { color: #0d4677; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; overflow-wrap: anywhere; }
.confirm-notice { margin: 18px 0; padding: 12px 15px; border-left: 4px solid #d19a24; color: #604814; background: #fff8e7; font-size: 13px; }
.button-row { display: flex; justify-content: flex-end; gap: 12px; }
.button-row form { display: flex; }
.button-row .secondary-button { margin-right: auto; }
.processing { margin-top: 20px; padding: 22px; border: 1px solid #c7dced; border-radius: 10px; color: var(--text); background: #f7fbff; }
.processing-heading { display: flex; align-items: center; gap: 13px; padding-bottom: 17px; border-bottom: 1px solid #d6e4ef; }
.processing-heading strong { display: block; color: var(--blue-dark); font-size: 16px; }
.processing-heading p { margin: 1px 0 0; color: var(--muted); font-size: 13px; }
.spinner { display: inline-block; flex: 0 0 24px; width: 24px; height: 24px; border: 3px solid #b9d1e9; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.progress-list { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; }
.progress-list li { display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: center; min-height: 58px; padding: 8px 10px; border-radius: 7px; color: #7c8896; }
.progress-list li.active { color: var(--blue-dark); background: var(--blue-soft); }
.progress-list li.done { color: var(--green); }
.progress-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #b9c5d1; border-radius: 50%; background: #fff; font-size: 12px; font-weight: 800; }
.progress-list li.active .progress-mark { border-color: var(--blue); color: #fff; background: var(--blue); }
.progress-list li.done .progress-mark { border-color: var(--green); color: #fff; background: var(--green); }
.progress-list strong, .progress-list small { display: block; }
.progress-list strong { font-size: 13px; }
.progress-list small { color: var(--muted); font-size: 11px; font-weight: 500; }
.processing-note { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid #d6e4ef; color: var(--muted); font-size: 12px; text-align: center; }
.processing .message { margin-top: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { display: flex; align-items: center; justify-content: center; gap: 15px; min-height: 170px; margin-top: 22px; border: 1px dashed #c5d0da; border-radius: 10px; color: var(--muted); background: #fbfcfd; }
.empty-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; color: var(--blue-dark); background: var(--blue-soft); font-size: 12px; font-weight: 800; }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { color: #3b4a5c; font-size: 14px; }
.empty-state span { font-size: 12px; }
.master-update { display: flex; justify-content: flex-end; gap: 10px; margin: 24px -32px -32px; padding: 13px 32px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface-soft); font-size: 12px; }
.master-update strong { color: #354558; }
.result-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.error-kicker { color: var(--red); }
.result-panel { display: flex; align-items: center; gap: 22px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.result-panel.success-view { border-left: 5px solid var(--green); background: #f2faf6; }
.result-panel.error-view { border-left: 5px solid var(--red); background: #fff7f6; }
.result-icon { display: grid; flex: 0 0 58px; width: 58px; height: 58px; place-items: center; border-radius: 50%; color: #fff; font-size: 29px; font-weight: 800; }
.success-view .result-icon { background: var(--green); }
.error-view .result-icon { background: var(--red); }
.result-content { min-width: 0; }
.result-label { margin: 0 0 1px; color: var(--muted); font-size: 12px; font-weight: 750; }
.result-content h3 { margin: 0; color: var(--text); font-size: 22px; line-height: 1.5; }
.result-content p:last-child { margin: 4px 0 0; color: #4d5d70; font-size: 14px; }
.result-next-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.result-next-action strong, .result-next-action span { display: block; }
.result-next-action strong { font-size: 14px; }
.result-next-action span { color: var(--muted); font-size: 12px; }
.result-next-action .primary-button { flex: 0 0 auto; }
.result-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.login-page .page-shell { max-width: 520px; margin-top: 64px; }
.login-page .app-header { justify-content: center; text-align: center; }
.login-heading { text-align: center; }
.login-form { max-width: 390px; margin: 24px auto 10px; }

@media (max-width: 800px) {
  .page-shell { width: min(calc(100% - 28px), 680px); margin: 20px auto; }
  .content { padding: 24px; }
  .reset-heading { display: block; }
  .result-heading { display: block; }
  .steps { margin-top: 18px; }
  .operation-grid { grid-template-columns: 1fr; }
  .master-update { margin: 24px -24px -24px; padding: 13px 24px; }
}

@media (max-width: 520px) {
  .page-shell, .login-page .page-shell { width: 100%; margin: 0; }
  .app-card { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .app-header { min-height: 82px; padding: 16px 20px; }
  .content { padding: 20px; }
  h1 { font-size: 18px; }
  .header-actions { gap: 10px; }
  .login-context { display: none; }
  .logout-button { padding: 6px 10px; }
  .steps { width: 100%; justify-content: space-between; }
  .steps li { gap: 4px; font-size: 10px; }
  .steps li:not(:last-child)::after { width: 12px; margin: 0 5px; }
  .search-panel { padding: 16px; }
  .search-form { grid-template-columns: 1fr; }
  .search-button { width: 100%; }
  .empty-state { min-height: 145px; padding: 20px; }
  dl > div, .confirm-card dl > div { grid-template-columns: 100px 1fr; }
  .button-row { flex-direction: column-reverse; }
  .button-row > *, .button-row form, .button-row button { width: 100%; }
  .master-update { justify-content: space-between; margin: 24px -20px -20px; padding: 13px 20px; }
  .result-panel { align-items: flex-start; padding: 20px; }
  .result-icon { flex-basis: 44px; width: 44px; height: 44px; font-size: 22px; }
  .result-content h3 { font-size: 18px; }
  .result-next-action { align-items: stretch; flex-direction: column; }
  .result-next-action .primary-button, .result-actions .secondary-button { width: 100%; }
}