/* ============================================================
   泉州华光职业学院 · 教务系统登录页样式
   三套主题：steel 冷色（默认）/ warm 暖色 / dark 黑暗
   结构：取景器登录卡 + 静态光圈装饰 · 无闪烁效果
   ============================================================ */

/* ---------------- 主题变量 ---------------- */
:root,
:root[data-theme="steel"]{
  color-scheme:light;
  --paper:#f4f6f8;
  --panel:#ffffff;
  --panel-grad:linear-gradient(165deg,#ffffff,#f4f8fb);
  --ink:#2a3642; --ink-strong:#1b2836; --dim:#54677a; --faint:#93a3b1;
  --line:rgba(43,84,120,.26); --line-soft:rgba(27,40,54,.12);
  --accent:#2c5f8a; --accent-hi:#1f4a6e; --accent-deep:#16354f;
  --green:#0f9d76; --red:#b8443c;
  --input-bg:#fff; --input-focus-bg:#fdfeff; --placeholder:#a5b3bf;
  --btn-grad:linear-gradient(135deg,#4a76a3,#2c5f8a 55%,#1f4a6e);
  --btn-color:#f5f9fc; --btn-ring:rgba(255,255,255,.9); --switch-text:#f5f9fc;
  --btn-shadow:0 12px 28px rgba(44,95,138,.38), inset 0 1px 0 rgba(255,255,255,.25);
  --btn-shadow-hover:0 16px 36px rgba(44,95,138,.48), inset 0 1px 0 rgba(255,255,255,.3);
  --card-shadow:0 30px 70px rgba(38,60,84,.16), 0 4px 14px rgba(38,60,84,.07), inset 0 1px 0 #fff;
  --panel-shadow:0 10px 28px rgba(38,60,84,.10);
  --toast-bg:rgba(255,255,255,.97); --toast-shadow:0 16px 40px rgba(38,60,84,.2);
  --bg-layers:
    radial-gradient(1300px 850px at 82% -12%, rgba(44,95,138,.14), transparent 62%),
    radial-gradient(1000px 750px at -8% 108%, rgba(21,74,104,.08), transparent 60%),
    radial-gradient(1700px 1150px at 50% 42%, #fbfdfe 0%, #f4f6f8 70%);
  --rays:rgba(44,95,138,.05); --grain-op:.4; --vignette:rgba(96,116,134,.14);
  --glow-halo:radial-gradient(closest-side, rgba(44,95,138,.28), transparent 74%);
  --selection-bg:rgba(44,95,138,.32);
  --focus-ring:0 0 0 3px rgba(44,95,138,.15); --focus-border:rgba(44,95,138,.55);
  --af-glow:0 0 8px rgba(15,157,118,.45);
  --rec-glow:0 0 8px rgba(184,68,60,.45);
  --today-text:#ffffff; --today-glow:0 0 12px rgba(44,95,138,.45);
  --check-mark:#ffffff; --out:#c3cdd6;
  --refresh-bg:rgba(244,246,248,.75); --roll-mark:rgba(31,74,110,.3);
  --brand-stroke:#1f4a6e; --brand-fill:rgba(44,95,138,.16); --brand-core:#2c5f8a;
  --ap-stroke:rgba(31,74,110,.30); --ap-stroke-soft:rgba(31,74,110,.13);
  --ap-tick:rgba(31,74,110,.75); --ap-fill:rgba(44,95,138,.08);
  --ap-blade:#35688f; --ap-inner:rgba(31,74,110,.32);
  --ap-text:rgba(31,74,110,.6); --ap-text2:rgba(84,103,122,.55);
  --captcha-grad-a:#f0f4f8; --captcha-grad-b:#e4ebf2;
  --captcha-stroke:31,74,110; --captcha-noise:42,54,66;
  --captcha-ink-1:#16354f; --captcha-ink-2:#1d6a64; --captcha-ink-3:#2a3642;
}
:root[data-theme="warm"]{
  color-scheme:light;
  --paper:#faf5ea;
  --panel:#fffdf6;
  --panel-grad:linear-gradient(165deg,#fffef9,#fbf6ea);
  --ink:#22333c; --ink-strong:#15242c; --dim:#5d6f76; --faint:#97a5a9;
  --line:rgba(185,127,36,.25); --line-soft:rgba(34,51,60,.13);
  --accent:#e9a83c; --accent-hi:#c98a1e; --accent-deep:#a86f1a;
  --green:#0f9d76; --red:#d95c4f;
  --input-bg:#fff; --input-focus-bg:#fffefb; --placeholder:#a9b6ba;
  --btn-grad:linear-gradient(135deg,#ffce74,#e9a83c 55%,#cf8f22);
  --btn-color:#2a1c06; --btn-ring:rgba(42,28,6,.85); --switch-text:#2a1c06;
  --btn-shadow:0 12px 28px rgba(233,168,60,.45), inset 0 1px 0 rgba(255,255,255,.6);
  --btn-shadow-hover:0 16px 36px rgba(233,168,60,.55), inset 0 1px 0 rgba(255,255,255,.65);
  --card-shadow:0 30px 70px rgba(150,110,40,.18), 0 4px 14px rgba(150,110,40,.08), inset 0 1px 0 #fff;
  --panel-shadow:0 10px 28px rgba(150,110,40,.10);
  --toast-bg:rgba(255,253,246,.97); --toast-shadow:0 16px 40px rgba(150,110,40,.22);
  --bg-layers:
    radial-gradient(1300px 850px at 82% -12%, rgba(233,168,60,.20), transparent 62%),
    radial-gradient(1000px 750px at -8% 108%, rgba(14,111,102,.10), transparent 60%),
    radial-gradient(1700px 1150px at 50% 42%, #fdfaf2 0%, #faf5ea 70%);
  --rays:rgba(217,148,38,.055); --grain-op:.4; --vignette:rgba(196,158,88,.16);
  --glow-halo:radial-gradient(closest-side, rgba(233,168,60,.38), transparent 74%);
  --selection-bg:rgba(233,168,60,.4);
  --focus-ring:0 0 0 3px rgba(233,168,60,.18); --focus-border:rgba(233,168,60,.6);
  --af-glow:0 0 8px rgba(15,157,118,.55);
  --rec-glow:0 0 8px rgba(217,92,79,.55);
  --today-text:#2a1c06; --today-glow:0 0 12px rgba(233,168,60,.55);
  --check-mark:#2a1c06; --out:#c2ccd0;
  --refresh-bg:rgba(250,245,234,.72); --roll-mark:rgba(168,111,26,.35);
  --brand-stroke:#c98a1e; --brand-fill:rgba(233,168,60,.18); --brand-core:#e9a83c;
  --ap-stroke:rgba(168,111,26,.32); --ap-stroke-soft:rgba(168,111,26,.14);
  --ap-tick:rgba(168,111,26,.8); --ap-fill:rgba(233,168,60,.10);
  --ap-blade:#cf8f22; --ap-inner:rgba(168,111,26,.35);
  --ap-text:rgba(168,111,26,.65); --ap-text2:rgba(93,111,118,.55);
  --captcha-grad-a:#fdf8ec; --captcha-grad-b:#f4ecd6;
  --captcha-stroke:168,111,26; --captcha-noise:34,51,60;
  --captcha-ink-1:#a86f1a; --captcha-ink-2:#0e6f66; --captcha-ink-3:#22333c;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0a1013;
  --panel:rgba(255,255,255,.03);
  --panel-grad:linear-gradient(168deg,#14222b,#0c151b);
  --ink:#f3ecdd; --ink-strong:#f7f1e3; --dim:#93a5ad; --faint:#5c6d75;
  --line:rgba(233,168,60,.28); --line-soft:rgba(255,255,255,.09);
  --accent:#e9a83c; --accent-hi:#f5c766; --accent-deep:#b97f22;
  --green:#35c9a6; --red:#ff6b5e;
  --input-bg:rgba(255,255,255,.05); --input-focus-bg:rgba(255,255,255,.08); --placeholder:#5d707a;
  --btn-grad:linear-gradient(135deg,#ffce74,#e9a83c 55%,#cf8f22);
  --btn-color:#2a1c06; --btn-ring:rgba(42,28,6,.85); --switch-text:#2a1c06;
  --btn-shadow:0 12px 28px rgba(233,168,60,.30), inset 0 1px 0 rgba(255,255,255,.18);
  --btn-shadow-hover:0 16px 36px rgba(233,168,60,.40), inset 0 1px 0 rgba(255,255,255,.22);
  --card-shadow:0 34px 80px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  --panel-shadow:0 10px 28px rgba(0,0,0,.4);
  --toast-bg:rgba(20,32,40,.97); --toast-shadow:0 16px 40px rgba(0,0,0,.5);
  --bg-layers:
    radial-gradient(1200px 800px at 75% -10%, rgba(233,168,60,.10), transparent 60%),
    radial-gradient(1000px 700px at 85% 110%, rgba(67,179,161,.07), transparent 55%),
    #0a1013;
  --rays:rgba(233,168,60,.045); --grain-op:.5; --vignette:rgba(5,8,10,.6);
  --glow-halo:radial-gradient(closest-side, rgba(233,168,60,.30), transparent 74%);
  --selection-bg:rgba(233,168,60,.35);
  --focus-ring:0 0 0 3px rgba(233,168,60,.20); --focus-border:rgba(233,168,60,.65);
  --af-glow:0 0 8px rgba(53,201,166,.5);
  --rec-glow:0 0 8px rgba(255,107,94,.5);
  --today-text:#2a1c06; --today-glow:0 0 12px rgba(233,168,60,.45);
  --check-mark:#2a1c06; --out:#3f4f57;
  --refresh-bg:rgba(10,16,20,.72); --roll-mark:rgba(233,168,60,.22);
  --brand-stroke:#e9a83c; --brand-fill:rgba(233,168,60,.12); --brand-core:#f5c766;
  --ap-stroke:rgba(233,168,60,.28); --ap-stroke-soft:rgba(233,168,60,.14);
  --ap-tick:rgba(233,168,60,.6); --ap-fill:rgba(233,168,60,.06);
  --ap-blade:#e9a83c; --ap-inner:rgba(233,168,60,.30);
  --ap-text:rgba(233,168,60,.55); --ap-text2:rgba(147,165,173,.45);
  --captcha-grad-a:#17242d; --captcha-grad-b:#0f1a21;
  --captcha-stroke:233,168,60; --captcha-noise:243,236,221;
  --captcha-ink-1:#e9a83c; --captcha-ink-2:#43b3a1; --captcha-ink-3:#f3ecdd;
}

/* ---------------- 基础 ---------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font-body,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif);
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
  --font-display:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Courier New",monospace;
  --radius:14px;
  transition:background .35s, color .35s;
}
::selection{background:var(--selection-bg);color:var(--ink-strong)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------------- 背景氛围 ---------------- */
.bg{position:fixed;inset:0;z-index:-3;background:var(--bg-layers);transition:background .35s}
.bg-rays{position:fixed;inset:-20%;z-index:-2;pointer-events:none;opacity:.6;
  background:repeating-conic-gradient(from 210deg at 84% -10%,
    var(--rays) 0deg 3deg, transparent 3deg 14deg);
  animation:rayShift 90s linear infinite alternate;}
@keyframes rayShift{from{transform:rotate(0deg)}to{transform:rotate(6deg)}}
.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 160px var(--vignette);}

/* ---------------- 页面骨架 ---------------- */
.page{max-width:1280px;margin:0 auto;padding:0 40px;position:relative;z-index:1}

/* ---------------- 顶栏 ---------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0 18px;border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand svg{flex:none}
.logo .l-ring,.logo .l-tri,.logo .l-cross{fill:none;stroke:var(--brand-stroke)}
.logo .l-tri{fill:var(--brand-fill)}
.logo .l-core{fill:var(--brand-core)}
.brand-name{font-family:var(--font-display);font-weight:900;font-size:17px;letter-spacing:.06em;white-space:nowrap;color:var(--ink-strong)}
.brand-sub{font-family:var(--font-mono);font-size:10px;color:var(--dim);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.top-right{display:flex;align-items:center;gap:18px;font-family:var(--font-mono);font-size:12px;color:var(--dim)}

/* 主题切换器 */
.theme-switch{display:flex;gap:2px;border:1px solid var(--line-soft);border-radius:8px;
  padding:3px;background:var(--panel);box-shadow:var(--panel-shadow)}
.theme-switch button{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  padding:5px 12px;border-radius:6px;color:var(--dim);transition:all .2s}
.theme-switch button:hover{color:var(--accent-hi)}
.theme-switch button.active{background:var(--accent);color:var(--switch-text)}

.datemark{display:flex;align-items:center;gap:10px;letter-spacing:.12em}
.datemark .rec{width:8px;height:8px;border-radius:50%;background:var(--red);
  box-shadow:var(--rec-glow)}
.top-link{color:var(--dim);transition:color .2s;border-bottom:1px dotted transparent}
.top-link:hover{color:var(--accent-hi);border-bottom-color:var(--accent)}

/* ---------------- 主区 ---------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px;align-items:center;padding:56px 0 48px;min-height:560px}

/* 左：校训与光圈 */
.hero-left{position:relative}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.34em;color:var(--accent-hi);
  text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent)}
.hero-title{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,4.2vw,54px);
  line-height:1.3;letter-spacing:.02em;color:var(--ink-strong);
  -webkit-text-stroke:.9px currentColor}
.hero-title .sep{font-size:.65em;margin-inline:.04em;vertical-align:.06em}
.hero-title .glow{position:relative;z-index:1;color:var(--accent-hi)}
.hero-title .glow::before{content:"";position:absolute;inset:-10px -14px;z-index:-1;border-radius:50%;
  background:var(--glow-halo)}
.hero-source{margin-top:14px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.3em;color:var(--faint)}
.hero-tag{margin-top:18px;font-size:15.5px;color:var(--dim);max-width:46ch}
.hero-tag em{font-style:normal;color:var(--accent-hi);border-bottom:1px solid var(--line)}
.hero-hud{margin-top:30px;display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-soft);
  border-radius:10px;overflow:hidden;max-width:520px;background:var(--panel);
  box-shadow:var(--panel-shadow)}
.hud-cell{flex:1 1 auto;padding:12px 18px;border-right:1px solid var(--line-soft);min-width:130px}
.hud-cell:last-child{border-right:none}
.hud-k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
.hud-v{margin-top:4px;font-size:14px;font-weight:500;color:var(--ink-strong);white-space:nowrap}
.hud-v .accent{color:var(--accent-hi);font-family:var(--font-mono)}

/* 光圈装置（静态装饰） */
.aperture-wrap{position:absolute;right:-30px;top:-40px;width:340px;height:340px;pointer-events:none;
  opacity:.95;z-index:-1}
@media(max-width:1080px){.aperture-wrap{right:-60px;top:-90px;opacity:.3}}
#aperture{width:100%;height:100%;overflow:visible}
.a-o{fill:none;stroke:var(--ap-stroke)}
.a-dash{fill:none;stroke:var(--ap-stroke-soft);stroke-dasharray:2 6}
.a-ticks line{stroke:var(--ap-stroke);stroke-width:1.6}
.a-ticks line.long{stroke:var(--ap-tick)}
.a-txt{fill:var(--ap-text);font-size:9px;letter-spacing:4px;font-family:var(--font-mono);text-anchor:middle}
.a-txt2{fill:var(--ap-text2);font-size:9px;letter-spacing:6px;font-family:var(--font-mono);text-anchor:middle}
.a-fill{fill:var(--ap-fill);stroke:var(--ap-stroke-soft);stroke-width:1}
.a-blades line{stroke:var(--ap-blade);stroke-width:2;stroke-linecap:round;opacity:.85}
.a-inner line{stroke:var(--ap-inner);stroke-width:1;stroke-linecap:round}

/* ---------------- 右：取景器登录卡 ---------------- */
.login-col{display:flex;justify-content:flex-end}
.viewfinder{position:relative;width:min(420px,100%);
  background:var(--panel-grad);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:22px 34px 18px;
  box-shadow:var(--card-shadow);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .3s;
  animation:cardIn .8s cubic-bezier(.2,.9,.3,1) .15s both}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.viewfinder.focusing{transform:scale(.985);border-color:var(--focus-border)}
/* 取景框四角 */
.vf-corner{position:absolute;width:26px;height:26px;pointer-events:none;
  transition:all .35s cubic-bezier(.2,.8,.3,1)}
.vf-corner::before{content:"";position:absolute;inset:0;border:2px solid var(--accent);opacity:.95}
.vf-corner.tl{top:-7px;left:-7px}.vf-corner.tl::before{border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.vf-corner.tr{top:-7px;right:-7px}.vf-corner.tr::before{border-left:none;border-bottom:none;border-radius:0 6px 0 0}
.vf-corner.bl{bottom:-7px;left:-7px}.vf-corner.bl::before{border-right:none;border-top:none;border-radius:0 0 0 6px}
.vf-corner.br{bottom:-7px;right:-7px}.vf-corner.br::before{border-left:none;border-top:none;border-radius:0 0 6px 0}
.viewfinder.focusing .vf-corner.tl{top:-2px;left:-2px}
.viewfinder.focusing .vf-corner.tr{top:-2px;right:-2px}
.viewfinder.focusing .vf-corner.bl{bottom:-2px;left:-2px}
.viewfinder.focusing .vf-corner.br{bottom:-2px;right:-2px}

.vf-hud{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;
  padding-bottom:12px;border-bottom:1px dashed var(--line);margin-bottom:10px}
.vf-hud .af{display:flex;align-items:center;gap:7px}
.af-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);transition:all .25s}
.viewfinder.focusing .af-dot{background:var(--green);box-shadow:var(--af-glow)}
.viewfinder.focusing .af-label{color:var(--green)}

.vf-title{font-family:var(--font-display);font-weight:900;font-size:24px;letter-spacing:.14em;color:var(--ink-strong)}
.vf-title small{display:block;font-family:var(--font-mono);font-weight:400;font-size:9.5px;
  letter-spacing:.4em;color:var(--faint);margin-top:4px;text-transform:uppercase}

/* ---------------- 表单 ---------------- */
.field{position:relative;margin-top:31px}
.field label{position:absolute;left:0;top:-21px;font-size:11.5px;line-height:1.5;color:var(--dim);
  letter-spacing:.28em;display:flex;align-items:center;gap:8px;pointer-events:none;background:transparent}
.field label svg{opacity:.75}
.field input{width:100%;background:var(--input-bg);border:1px solid var(--line-soft);
  border-radius:9px;color:var(--ink-strong);font-size:15px;padding:11px 16px 11px 42px;
  letter-spacing:.04em;transition:border-color .25s, background .25s, box-shadow .25s}
.field input::placeholder{color:var(--placeholder)}
.field input:hover{border-color:var(--line)}
.field input:focus{outline:none;border-color:var(--accent);background:var(--input-focus-bg);
  box-shadow:var(--focus-ring)}
.field .ficon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.field input:focus ~ .ficon{color:var(--accent-hi)}
.pwd-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--faint);padding:4px;border-radius:6px;transition:color .2s}
.pwd-toggle:hover{color:var(--accent-hi)}

/* 验证码 */
.captcha-row{display:flex;gap:10px}
.captcha-row .field{flex:1}
.captcha-box{flex:none;width:118px;height:45px;margin-top:31px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line-soft);position:relative;cursor:pointer;transition:border-color .25s;background:var(--input-bg)}
.captcha-box:hover{border-color:var(--accent)}
.captcha-box canvas{display:block;width:100%;height:100%}
.captcha-box .refresh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--refresh-bg);opacity:0;transition:opacity .2s;color:var(--accent-hi);font-size:11px;
  font-family:var(--font-mono);letter-spacing:.1em}
.captcha-box:hover .refresh{opacity:1}

/* 记住我 / 忘记密码 */
.form-meta{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:13px}
.remember{display:flex;align-items:center;gap:8px;color:var(--dim);cursor:pointer;user-select:none}
.remember input{appearance:none;width:15px;height:15px;border:1px solid var(--line);border-radius:4px;
  background:var(--input-bg);cursor:pointer;position:relative;transition:all .2s}
.remember input:checked{background:var(--accent);border-color:var(--accent)}
.remember input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--check-mark);border-width:0 2px 2px 0;transform:rotate(42deg)}
.forgot{color:var(--dim);transition:color .2s}
.forgot:hover{color:var(--accent-hi)}

/* 快门登录键（无流光） */
.shutter-btn{position:relative;width:100%;margin-top:15px;height:48px;border-radius:11px;
  font-size:16px;font-weight:700;letter-spacing:.5em;text-indent:.5em;color:var(--btn-color);
  background:var(--btn-grad);
  box-shadow:var(--btn-shadow);
  transition:transform .15s, box-shadow .25s, filter .25s;
  display:flex;align-items:center;justify-content:center;gap:12px}
.shutter-btn:hover{filter:brightness(1.06);box-shadow:var(--btn-shadow-hover)}
.shutter-btn:active{transform:scale(.975)}
.shutter-btn .ring{width:15px;height:15px;border-radius:50%;border:2.5px solid var(--btn-ring);flex:none}
.demo-note{margin-top:9px;font-size:11.5px;color:var(--faint);text-align:center;font-family:var(--font-mono);letter-spacing:.06em}

/* 统一身份认证：与本地登录并列的次要入口 */
.sso-divider{display:flex;align-items:center;gap:12px;margin:3px 0 8px;color:var(--faint);font-size:11px;letter-spacing:.08em}
.sso-divider::before,.sso-divider::after{content:"";height:1px;flex:1;background:var(--line-soft)}
.sso-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;width:100%;border:1px solid var(--line);border-radius:11px;background:var(--input-bg);color:var(--accent-hi);font-size:14px;font-weight:700;letter-spacing:.08em;transition:border-color .2s,background .2s,transform .15s}
.sso-btn:hover{border-color:var(--accent);background:var(--input-focus-bg)}
.sso-btn:active{transform:translateY(1px)}
.sso-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------------- 底部信息带 ---------------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:8px 0 44px}
.info-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:22px 24px;position:relative;overflow:hidden;
  box-shadow:var(--panel-shadow);
  transition:border-color .3s, transform .3s, box-shadow .3s}
.info-card:hover{border-color:var(--line);transform:translateY(-3px)}
.info-card::before{content:"HG-EDU · ROLL 2026";position:absolute;top:8px;right:14px;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.3em;color:var(--roll-mark)}
.info-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.info-head .bar{width:3px;height:16px;background:var(--accent);border-radius:2px}
.info-head h3{font-family:var(--font-display);font-size:15.5px;font-weight:700;letter-spacing:.12em;color:var(--ink-strong)}
.info-head span{font-family:var(--font-mono);font-size:9px;color:var(--faint);letter-spacing:.2em;margin-left:auto;text-transform:uppercase}

/* 通知（空态） */
.empty{padding:18px 4px 8px;text-align:center;color:var(--dim)}
.empty .ea{margin:0 auto 10px;width:38px;height:38px;border-radius:50%;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent-hi)}
.empty p{font-size:13px}
.empty small{display:block;margin-top:4px;font-size:11px;color:var(--faint);font-family:var(--font-mono);letter-spacing:.14em}

/* 校历 */
.cal{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.cal caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:10.5px;
  color:var(--accent-hi);letter-spacing:.18em;padding-bottom:10px}
.cal th{font-weight:500;color:var(--faint);padding:4px 0;font-size:11px}
.cal td{text-align:center;padding:5px 0;color:var(--dim);font-variant-numeric:tabular-nums}
.cal td.out{color:var(--out)}
.cal .wk{font-family:var(--font-mono);font-size:10px;color:var(--accent-hi);text-align:right;padding-right:8px}
.cal td.today{position:relative}
.cal td.today::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;
  transform:translate(-50%,-50%);background:var(--accent);border-radius:50%;z-index:0;
  box-shadow:var(--today-glow)}
.cal td.today .d{position:relative;z-index:1;color:var(--today-text);font-weight:700}

/* 课表速查 */
.links{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
.links a{display:flex;align-items:center;gap:10px;padding:7px 6px;font-size:13.5px;color:var(--dim);
  border-radius:7px;transition:all .2s;position:relative}
.links a .idx{font-family:var(--font-mono);font-size:10px;color:var(--accent-hi);flex:none;width:18px}
.links a::after{content:"";position:absolute;left:0;bottom:3px;width:0;height:1px;
  background:var(--accent);transition:width .25s}
.links a:hover{color:var(--ink-strong);transform:translateX(3px)}
.links a:hover::after{width:calc(100% - 30px)}

/* 页脚 */
.footer{border-top:1px solid var(--line-soft);padding:20px 0 30px;display:flex;flex-wrap:wrap;
  gap:10px 28px;align-items:center;justify-content:space-between;font-size:12px;color:var(--dim)}
.footer .mono{font-family:var(--font-mono);letter-spacing:.08em}
.footer a:hover{color:var(--accent-hi)}

/* 提示条 */
.toast{position:fixed;left:50%;bottom:38px;transform:translate(-50%,20px);opacity:0;z-index:100;
  background:var(--toast-bg);border:1px solid var(--line);color:var(--ink-strong);
  padding:12px 22px;border-radius:10px;font-size:13.5px;
  box-shadow:var(--toast-shadow);transition:all .35s cubic-bezier(.2,.9,.3,1);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--accent-hi);font-weight:500}

/* ---------------- 响应式 ---------------- */
@media(max-width:1080px){
  .hero{grid-template-columns:1fr;gap:40px;padding:44px 0 36px;min-height:0}
  .login-col{justify-content:center}
  .strip{grid-template-columns:1fr}
  .page{padding:0 22px}
}
@media(max-width:520px){
  .viewfinder{padding:22px 20px 18px}
  .hero-title{font-size:clamp(28px,7vw,38px)}
  .topbar{flex-wrap:wrap}
  .top-right{width:100%;justify-content:flex-start}
  .links{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* ============================================================
   ↓↓↓ 系统适配层（对接青果 Kingosoft 原系统，请勿删除）↓↓↓
   以上是你自己的设计样式，以下是为了让原系统逻辑能在本页上跑通
   而追加的补丁。   改动前请先看清楚每条的用途。
   ============================================================ */

/* [0] ★核心字体本地化★
   设计稿原本靠 Google Fonts 在线加载（Noto Serif SC / Noto Sans SC / JetBrains Mono）。
   校园网内 fonts.googleapis.com 通常不可达 → --font-display 逐级回落到
   Songti SC → STSong → SimSun，Windows 上最终落到「宋体」。
   而宋体没有 900 字重，浏览器只能做合成加粗(faux bold)，校训和标题会明显发虚走形。
   这里把标题体与等宽体子集化后随页面自托管，彻底摆脱外网依赖。
   · 子集范围 = 页面全部固定文案用字 + 教务高频备字（改文案缺字时重跑
     gen-font-subset.py 即可，无需联外网）
   · 正文体 --font-body 保持系统栈：校历/公告是动态内容，用字不可预知。
   · 两份文件都是「可变字体」，一个文件覆盖全部字重，故用范围声明。 */
@font-face{font-family:'HG Serif';font-style:normal;font-weight:200 900;font-display:swap;
  src:url('fonts/hg-serif-var.woff2?v=20261015') format('woff2')}
@font-face{font-family:'HG Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('fonts/hg-mono-var.woff2?v=20261015') format('woff2')}

/* 自托管字体插到栈最前。本块出现在设计稿 body 变量定义之后，
   同特异性下后者胜出 —— 因此无需改动设计稿任何一行。 */
body{
  --font-display:"HG Serif","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --font-mono:"HG Mono","JetBrains Mono","SFMono-Regular",Consolas,"Courier New",monospace;
}

/* [1] 验证码：真实接口返回的是 70x30 JPEG 的 <img id="randpic">，
       不是设计稿里那个 canvas，需要让它铺满取景框（118x48）。 */
.captcha-box img{display:block;width:100%;height:100%;object-fit:fill}
.div_random{width:100%;height:100%}

/* [2] LoginExt.js 在鼠标悬停时会给这些元素写内联 style（color:#003399 / #000000），
       内联样式优先级高于类选择器，必须用 !important 压住，否则一碰鼠标配色就变黑。 */
.links a{color:var(--dim)!important}
.links a:hover{color:var(--ink-strong)!important}
.links a .idx{color:var(--accent-hi)!important}
.info-head span.more{margin-left:8px;color:var(--accent-hi)!important;cursor:pointer;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em}
.info-head span.more:hover{text-decoration:underline}

/* [3] 登录按钮禁用态：提交中系统会给 #login 加 disabled。 */
.shutter-btn:disabled{opacity:.62;cursor:not-allowed;filter:grayscale(.12)}

/* [4] 校历：真实数据由服务端返回一张固定 width='274' 的表格，
       要覆盖成撑满卡片，并接管“今天”的高亮底色。 */
.cal-tools{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:var(--font-mono);font-size:10.5px}
.cal-tools .cal-xq{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--accent-hi);letter-spacing:.06em}
.cal-tools select{font-family:var(--font-mono);font-size:10.5px;color:var(--dim);
  background:var(--input-bg);border:1px solid var(--line-soft);border-radius:6px;padding:2px 5px;cursor:pointer}
.cal-tools select:hover{border-color:var(--line)}
.cal .rm{font-size:9.5px}
#xlshow table{width:100%!important;table-layout:fixed;border-collapse:collapse}
#xlshow td{font-size:11.5px;padding:4px 0;font-variant-numeric:tabular-nums}
/* 服务端用内联 background:#B6FEAA 标记“今天”，换成主题色 */
#xlshow td[style*="B6FEAA"]{background:var(--accent)!important;color:var(--today-text)!important;font-weight:700}

/* [5] 通知公告：注入的内容带 .datalist 结构，统一到卡片风格。 */
#desk_notice .datalist{font-size:13px}
#desk_notice .datalist a{color:var(--accent-hi)!important}
#desk_notice .datalist tr td{border-bottom:1px dashed var(--line-soft)!important;color:var(--dim)}
#desk_notice .notice-dot{background-color:var(--red)}

/* [6] 登录状态行（系统会往 #msg 里写“正在登录……”）预留高度，避免布局跳动。 */
.demo-note{min-height:17px}
.demo-note.err{color:var(--red)}

/* [7] 顶栏校徽：由设计稿的内联 SVG 换成学校真实校徽位图
       （custom/login/hg-logo.png，108x108 透明 PNG = 显示 36px 的 3x）。
       校徽属学校标识，三主题下均保持原色，不做主题变色。 */
.brand img.logo{flex:none;display:block;width:36px;height:36px}