:root {
  color-scheme: light;
  --paper: #fbf6ea;
  --paper-deep: #e9ddc7;
  --ink: #173f3a;
  --ink-soft: #4d5b54;
  --orange: #e9653e;
  --orange-deep: #c94f31;
  --line: rgba(51, 64, 55, .26);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.82) 0 1px, transparent 1.8px) 0 0 / 8px 8px,
    radial-gradient(circle at 72% 42%, rgba(89,69,46,.08) 0 1px, transparent 1.4px) 0 0 / 12px 12px,
    #f7f1e4;
}

button, input { font: inherit; }
button { cursor: pointer; }

.login-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 56px 32px;
}

.film-case {
  position: relative;
  width: min(100%, 1010px);
  min-height: 920px;
  padding: 54px 110px 64px;
  filter: drop-shadow(0 22px 18px rgba(44, 42, 31, .2));
}

.film-case::before {
  content: "";
  position: absolute;
  inset: 16px 5px 0 0;
  z-index: -3;
  border-radius: 26px 35px 36px 24px;
  background: linear-gradient(146deg, #173e3b 0 52%, #315664 78%, #1e3d3b 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), inset -16px -16px 28px rgba(5,29,29,.32);
}

.file-back {
  position: absolute;
  z-index: -2;
  inset: 36px 65px 45px 93px;
  border-radius: 15px 15px 8px 8px;
  background: linear-gradient(120deg, #eddfc3, #e9d5b5 47%, #f5ead6);
  transform: rotate(-1.15deg);
  box-shadow: 0 5px 0 rgba(59, 68, 58, .25), inset 0 0 26px rgba(96,76,48,.12);
}

.film-strip {
  position: absolute;
  z-index: -1;
  top: 56px;
  bottom: 80px;
  left: 15px;
  width: 52px;
  padding: 20px 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  background: linear-gradient(90deg, #113633, #30504b 48%, #102d2a);
  box-shadow: inset 1px 0 rgba(255,255,255,.15), 6px 0 10px rgba(13,27,25,.28);
}

.film-strip span {
  height: 29px;
  border-radius: 4px;
  background: linear-gradient(135deg, #efe6d2, #c7b99f);
  box-shadow: inset 1px 1px rgba(255,255,255,.7), 0 0 4px rgba(0,0,0,.25);
}

.film-edge {
  position: absolute;
  bottom: 4px;
  left: 116px;
  width: 550px;
  height: 20px;
  opacity: .7;
  border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(90deg, #eee6d6 0 13px, transparent 13px 23px);
}

.paper-form {
  position: relative;
  min-height: 778px;
  padding: 107px 90px 78px;
  border: 1px solid rgba(151,129,95,.16);
  border-radius: 22px 16px 18px 22px;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(255,255,255,.55), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(174,145,101,.12), transparent 25%),
    repeating-linear-gradient(0deg, rgba(99,78,52,.03) 0 1px, transparent 1px 4px),
    var(--paper);
  box-shadow: 0 3px 0 #fdfaf1, 12px 16px 24px rgba(58,49,34,.18), inset 0 0 0 1px rgba(255,255,255,.65);
  transform: rotate(.35deg);
}

.paper-form::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -36px;
  width: 190px;
  height: 88px;
  opacity: .6;
  transform: rotate(-42deg);
  background: repeating-linear-gradient(135deg, rgba(196,165,111,.38) 0 1px, rgba(245,230,199,.75) 1px 7px);
}

.paper-clip {
  position: absolute;
  top: -54px;
  left: 110px;
  width: 50px;
  height: 145px;
  border: 6px solid #5a5d59;
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  transform: rotate(-23deg);
  filter: drop-shadow(2px 3px 1px rgba(0,0,0,.2));
}

.paper-clip::after {
  content: "";
  position: absolute;
  inset: 17px 8px -54px;
  border: 4px solid #5a5d59;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}

.paper-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, transparent 50%, #eaddc7 50%);
  filter: drop-shadow(-1px 2px 1px rgba(124,98,60,.16));
}

.login-header h1 {
  max-width: 630px;
  margin: 0;
  color: #173f3a;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.18;
}

.system-mark { display: flex; gap: 7px; margin: 0 0 16px; }
.system-mark i { display: block; width: 18px; height: 8px; transform: skewX(-26deg); background: var(--orange); }
.system-mark i:nth-child(2) { opacity: .82; }
.system-mark i:nth-child(3) { opacity: .62; }
.title-rule { height: 2px; margin-top: 35px; background: rgba(72,74,62,.23); }

.login-form { margin-top: 62px; }
.login-field { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 18px; margin-bottom: 30px; }
.field-label { display: inline-flex; align-items: center; gap: 20px; color: #3e4942; font-size: 18px; font-weight: 600; white-space: nowrap; }
.icon { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; color: #143e39; font-style: normal; }
.user-icon::before { content: ""; position: absolute; top: 1px; width: 15px; height: 15px; border-radius: 50%; background: currentColor; }
.user-icon::after { content: ""; position: absolute; bottom: 0; width: 29px; height: 16px; border-radius: 17px 17px 5px 5px; background: currentColor; }
.lock-icon::before { content: ""; position: absolute; z-index: 1; top: 1px; left: 8px; width: 18px; height: 18px; border: 4px solid currentColor; border-bottom: 0; border-radius: 11px 11px 0 0; }
.lock-icon::after { content: ""; position: absolute; left: 3px; bottom: 1px; width: 28px; height: 22px; border-radius: 4px; background: radial-gradient(circle at 50% 9px, #fbf6ea 0 2px, transparent 2.5px), linear-gradient(#fbf6ea, #fbf6ea) center 11px / 3px 7px no-repeat, currentColor; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lock-icon { overflow: visible; }
.shield-icon { font-size: 24px; }

.login-field input {
  width: 100%;
  height: 68px;
  padding: 0 22px;
  border: 1px solid #d8cdb9;
  border-radius: 10px;
  outline: none;
  color: #26423d;
  font-size: 16px;
  background: rgba(255,255,255,.25);
  box-shadow: inset 0 1px 3px rgba(101,79,47,.04);
}
.login-field input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(233,101,62,.14); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 58px; }
.password-wrap em { position: absolute; right: 22px; top: 18px; color: #aaa293; font-size: 28px; font-style: normal; transform: rotate(22deg); }

.login-options { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 34px; padding-left: 0; }
.remember { display: inline-flex; align-items: center; gap: 13px; color: #4d554f; font-size: 16px; font-weight: 600; cursor: pointer; }
.remember input { position: absolute; opacity: 0; }
.remember span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; color: #fffaf0; font-size: 20px; line-height: 1; background: #1c4d47; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.login-options a { color: var(--orange-deep); font-size: 16px; font-weight: 700; text-decoration: none; }
.login-options a:hover { text-decoration: underline; }
.dash-rule { border-top: 2px dashed rgba(77,86,77,.46); }
.login-button { width: 100%; height: 76px; margin-top: 38px; border: 1px solid #ce4b2f; border-radius: 12px; color: #fff9ed; font-size: 21px; font-weight: 700; letter-spacing: 1px; background: linear-gradient(135deg, #de5937, #ee6d45); box-shadow: 0 4px 0 rgba(153,61,38,.16), inset 0 1px rgba(255,255,255,.28); }
.login-button:hover { transform: translateY(-1px); filter: saturate(1.1) brightness(1.03); }
.login-button:active { transform: translateY(1px); }

.label-tab { position: absolute; z-index: 4; top: 113px; right: -30px; width: 142px; padding: 25px 16px 18px; color: #495049; font-size: 17px; line-height: 1.85; background: #e8ddc6; transform: rotate(-1deg); box-shadow: 2px 3px 6px rgba(65,52,33,.2); }
.label-tab::before { content: ""; position: absolute; top: 21px; right: 13px; width: 38px; border-top: 3px solid #183e3a; }
.label-tab::after { content: ""; position: absolute; top: 17px; right: 11px; border: 7px solid transparent; border-left-color: #183e3a; }
.label-tab strong, .label-tab span { display: block; }
.label-tab span { border-top: 1px dashed #bf7e65; }
.vertical-tab { position: absolute; z-index: 3; top: 276px; right: -9px; padding: 16px 10px 14px; color: #fff9eb; font-size: 17px; font-weight: 700; letter-spacing: 2px; text-align: center; writing-mode: vertical-rl; border-radius: 7px; background: linear-gradient(#d75b35, #e96b40); box-shadow: 2px 3px 5px rgba(71,43,30,.24); }
.vertical-tab b { margin-top: 11px; font-size: 20px; }
.time-note { position: absolute; z-index: 4; left: -95px; bottom: 283px; width: 205px; padding: 22px 21px 18px; color: #e1623e; transform: rotate(-.5deg); background: linear-gradient(145deg, #e8dac2, #f4e8d1); clip-path: polygon(0 4%, 96% 0, 100% 89%, 94% 100%, 8% 97%, 0 91%); box-shadow: 2px 5px 8px rgba(58,45,29,.18); }
.time-note b { display: block; margin-bottom: 7px; font-size: 19px; }
.time-note strong { display: block; padding: 4px 7px; border: 2px solid var(--orange); border-radius: 5px; font-family: Consolas, monospace; font-size: 20px; letter-spacing: 1px; }
.time-note span { display: block; margin-top: 13px; border-top: 2px dashed #d88a70; }
.tape { position: absolute; z-index: 3; opacity: .55; background: repeating-linear-gradient(135deg, rgba(178,146,96,.35) 0 1px, rgba(251,234,199,.72) 1px 8px); }
.tape-bottom { right: -20px; bottom: 43px; width: 175px; height: 60px; transform: rotate(-42deg); }
.tape-side { top: 51px; right: -56px; width: 115px; height: 38px; transform: rotate(18deg); }
.perforation { position: absolute; right: -7px; bottom: 164px; width: 13px; height: 196px; border-radius: 6px; background: repeating-linear-gradient(to bottom, rgba(14,38,36,.63) 0 18px, transparent 18px 29px); }

@media (max-width: 840px) {
  .login-stage { padding: 28px 18px; }
  .film-case { width: min(100%, 690px); min-height: auto; padding: 37px 48px 54px; }
  .paper-form { min-height: 0; padding: 90px 44px 58px; }
  .film-strip { left: 5px; width: 40px; }
  .film-edge, .time-note, .vertical-tab { display: none; }
  .label-tab { top: 74px; right: -15px; transform: scale(.82) rotate(-1deg); transform-origin: top right; }
  .login-field { grid-template-columns: 160px minmax(0, 1fr); }
  .captcha-row { grid-template-columns: 160px minmax(0, 1fr); }
  .refresh-captcha { grid-column: 2; }
}

@media (max-width: 590px) {
  .film-case { padding: 20px 15px 28px 34px; }
  .file-back { inset: 25px 18px 24px 45px; }
  .paper-form { padding: 74px 24px 45px; border-radius: 14px; }
  .paper-clip { left: 70px; transform: scale(.76) rotate(-23deg); transform-origin: top left; }
  .label-tab { display: none; }
  .login-header h1 { max-width: 290px; font-size: 30px; line-height: 1.32; }
  .login-form { margin-top: 42px; }
  .login-field { display: block; margin-bottom: 22px; }
  .field-label { margin-bottom: 10px; font-size: 16px; }
  .login-field input { height: 58px; font-size: 16px; }
  .captcha-box { width: 100%; height: 58px; }
  .refresh-captcha { margin-top: 8px; }
  .login-button { height: 64px; margin-top: 28px; font-size: 18px; }
}
.slider-captcha-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  background: rgba(22, 42, 38, .43);
  backdrop-filter: blur(4px);
}

.slider-captcha-mask.is-open { opacity: 1; visibility: visible; }

.slider-captcha-dialog {
  width: min(100%, 490px);
  padding: 23px;
  border: 1px solid rgba(117, 93, 61, .2);
  border-radius: 16px;
  color: #24433e;
  background: linear-gradient(145deg, #fffaf0, #f1e5cf);
  box-shadow: 0 24px 54px rgba(15, 35, 31, .34), inset 0 0 0 1px rgba(255,255,255,.7);
  transform: translateY(12px) scale(.98);
  transition: transform .2s ease;
}

.slider-captcha-mask.is-open .slider-captcha-dialog { transform: translateY(0) scale(1); }
.slider-captcha-header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 16px; }
.slider-captcha-header span { display: block; color: #d15b38; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.slider-captcha-header h2 { margin: 5px 0 0; font-size: 20px; line-height: 1.3; }
.slider-close-btn { width: 34px; height: 34px; border: 1px solid #d9c9b1; border-radius: 50%; color: #59645d; font-size: 25px; line-height: 28px; background: rgba(255,255,255,.42); }
.slider-close-btn:hover { color: #fff; border-color: #d65c39; background: #dd633e; }

.slider-stage {
  position: relative;
  width: 420px;
  max-width: 100%;
  height: 220px;
  overflow: hidden;
  border: 1px solid #d5c5ac;
  border-radius: 10px;
  background: #d7c6ad center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}

.slider-hole, .slider-piece {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 7px;
  clip-path: polygon(0 0, 37% 0, 48% 11%, 59% 0, 100% 0, 100% 37%, 89% 48%, 100% 59%, 100% 100%, 59% 100%, 48% 89%, 37% 100%, 0 100%, 0 59%, 11% 48%, 0 37%);
}

.slider-hole { z-index: 1; border: 1px solid rgba(255,255,255,.72); background: rgba(30,48,43,.5); box-shadow: inset 0 0 12px rgba(0,0,0,.45); }
.slider-piece { z-index: 2; border: 1px solid rgba(255,255,255,.85); box-shadow: 0 2px 7px rgba(21,39,35,.42); }
.slider-captcha-mask.is-success .slider-piece { border-color: #68ad83; box-shadow: 0 0 0 3px rgba(91,161,118,.28); }
.slider-captcha-mask.is-failed .slider-stage { animation: slider-shake .35s ease; }

.slider-track {
  position: relative;
  height: 52px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #d9c7ad;
  border-radius: 7px;
  background: #ede1cd;
}

.slider-progress { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(75,125,108,.18); }
.slider-range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; }
.slider-range:active { cursor: grabbing; }
.slider-handle { position: absolute; z-index: 3; top: 3px; left: 4px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 5px; color: #fffdf5; font-size: 31px; font-weight: 700; line-height: 1; background: #1d4b45; box-shadow: 1px 2px 4px rgba(33,59,52,.22); transition: background .16s ease; }
.slider-track-copy { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 48px; color: #6f7169; font-size: 14px; pointer-events: none; }
.slider-captcha-mask.is-success .slider-handle { background: #4e946d; }
.slider-captcha-mask.is-failed .slider-handle { background: #ce6247; }
.slider-captcha-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 15px; }
.slider-notice { color: #687068; font-size: 14px; line-height: 1.5; }
.slider-captcha-footer button { border: 0; color: #cc5936; font-size: 14px; font-weight: 700; white-space: nowrap; background: transparent; }
.slider-captcha-footer button:hover { text-decoration: underline; }

.login-toast { position: fixed; z-index: 60; left: 50%; bottom: 30px; max-width: calc(100vw - 40px); padding: 14px 20px; border-radius: 8px; color: #fdf8ee; font-size: 16px; line-height: 1.45; opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: opacity .2s ease, transform .2s ease; background: #224940; box-shadow: 0 8px 24px rgba(17,40,35,.25); }
.login-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.login-toast.is-error { background: #b84e39; }
.login-toast.is-success { background: #397458; }

@keyframes slider-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

@media (max-width: 590px) {

  .slider-captcha-mask { padding: 14px; }
  .slider-captcha-dialog { padding: 17px; }
  .slider-stage { height: 188px; }
  .slider-captcha-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
}