/* 登入畫面（人員作業系統／公司內部工作台／系統總後臺共用）
   登入畫面是蓋在整個頁面上的全螢幕版面，不受舊版 .login-card／.login-box 樣式影響。 */
:is(#loginView,#siteChooser).auth{
  --a-ink:#1D0D0C;--a-brown:#5F403B;--a-rust:#A44528;--a-rust-dark:#7E331D;--a-cream:#FCFAF1;--a-sand:#E8DCD5;--a-line:#E2D3CC;--a-muted:#7A5F58;--a-accent:var(--a-rust);
  position:fixed;inset:0;z-index:2000;overflow:auto;
  display:grid!important;grid-template-columns:minmax(380px,44%) 1fr;
  background:var(--a-cream);color:var(--a-ink);
  font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC',-apple-system,sans-serif;
  margin:0!important;padding:0!important;max-width:none!important;width:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
:is(#loginView,#siteChooser).auth[style*="display: none"],:is(#loginView,#siteChooser).auth[style*="display:none"]{display:none!important}
/* 登入前不顯示頂部列（登入畫面自己有品牌區） */
body:not(.is-authenticated) .topbar{visibility:hidden}
:is(#loginView,#siteChooser).auth.auth--company{--a-accent:#5F403B}
:is(#loginView,#siteChooser).auth.auth--admin{--a-accent:#1D0D0C}

/* ---------- 左側品牌區 ---------- */
:is(#loginView,#siteChooser) .auth-brand{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  padding:56px 56px 40px;color:var(--a-cream);
  background:
    radial-gradient(circle at 82% 18%,rgba(164,69,40,.55) 0,rgba(164,69,40,0) 34%),
    radial-gradient(circle at 10% 110%,rgba(201,176,168,.18) 0,rgba(201,176,168,0) 45%),
    linear-gradient(160deg,#2A1412 0%,#1D0D0C 55%,#140908 100%);
}
:is(#loginView,#siteChooser) .auth-brand::before,:is(#loginView,#siteChooser) .auth-brand::after{
  content:'';position:absolute;border-radius:50%;border:1px solid rgba(252,250,241,.08);pointer-events:none;
}
:is(#loginView,#siteChooser) .auth-brand::before{width:560px;height:560px;right:-220px;top:-180px}
:is(#loginView,#siteChooser) .auth-brand::after{width:820px;height:820px;right:-350px;top:-310px}
:is(#loginView,#siteChooser) .auth-logo{display:flex;align-items:center;gap:14px;position:relative}
:is(#loginView,#siteChooser) .auth-mark{width:56px;height:56px;flex:0 0 56px;display:block;object-fit:contain}
:is(#loginView,#siteChooser) .auth-logo-text{font-family:'Iansui','Noto Sans TC',sans-serif;font-size:1.45rem;letter-spacing:.06em;line-height:1.2}
:is(#loginView,#siteChooser) .auth-logo-text small{display:block;font-family:'Inter','Noto Sans TC',sans-serif;font-size:.68rem;letter-spacing:.32em;color:rgba(252,250,241,.55);margin-top:3px}
:is(#loginView,#siteChooser) .auth-hero{position:relative;max-width:460px}
:is(#loginView,#siteChooser) .auth-hero h1{font-family:'Iansui','Noto Sans TC',sans-serif;font-weight:400;font-size:clamp(2rem,3.2vw,2.75rem);line-height:1.35;letter-spacing:.04em;margin:0 0 18px;color:var(--a-cream)}
:is(#loginView,#siteChooser) .auth-hero h1 em{font-style:normal;color:#E9A58C}
:is(#loginView,#siteChooser) .auth-hero p{margin:0 0 30px;color:rgba(252,250,241,.72);font-size:1rem;line-height:1.8}
:is(#loginView,#siteChooser) .auth-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
:is(#loginView,#siteChooser) .auth-points li{display:flex;gap:12px;align-items:flex-start;color:rgba(252,250,241,.88);font-size:.95rem;line-height:1.6}
:is(#loginView,#siteChooser) .auth-points li::before{content:'';flex:0 0 8px;height:8px;margin-top:.55em;border-radius:50%;background:#E9A58C;box-shadow:0 0 0 4px rgba(233,165,140,.15)}
:is(#loginView,#siteChooser) .auth-foot{position:relative;font-size:.78rem;color:rgba(252,250,241,.5);letter-spacing:.04em;line-height:1.7}
:is(#loginView,#siteChooser) .auth-foot span{display:block;color:rgba(252,250,241,.32)}
:is(#loginView,#siteChooser) .auth-legal{display:none;margin:28px 0 0;font-size:.76rem;color:#A8948D;text-align:center;letter-spacing:.03em}

/* ---------- 右側登入表單 ---------- */
:is(#loginView,#siteChooser) .auth-main{display:flex;align-items:center;justify-content:center;padding:48px 32px}
:is(#loginView,#siteChooser) .auth-card{width:100%;max-width:420px;position:static}
:is(#loginView,#siteChooser) .auth-mobile-brand{display:none}
:is(#loginView,#siteChooser) .auth-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#F3E7E1;color:var(--a-accent);font-size:.82rem;font-weight:700;letter-spacing:.04em;margin-bottom:18px}
:is(#loginView,#siteChooser) .auth-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--a-accent)}
:is(#loginView,#siteChooser).auth--admin .auth-pill{background:#ECE6E3}
:is(#loginView,#siteChooser) .auth-card h2{font-family:'Noto Sans TC',sans-serif!important;font-size:1.9rem!important;font-weight:700!important;line-height:1.3!important;margin:0 0 8px!important;color:var(--a-ink)!important;letter-spacing:.02em}
:is(#loginView,#siteChooser) .auth-hint{margin:0 0 28px!important;color:var(--a-muted)!important;font-size:.95rem!important;line-height:1.7!important}
:is(#loginView,#siteChooser) .auth-card .msg{margin:0 0 16px;font-size:.9rem}
:is(#loginView,#siteChooser) .auth-card form{display:block!important;margin:0}
:is(#loginView,#siteChooser) .auth-field{margin:0 0 18px!important;display:block}
:is(#loginView,#siteChooser) .auth-field label{display:block!important;font-size:.88rem!important;font-weight:700!important;color:var(--a-brown)!important;margin:0 0 8px!important;font-family:inherit!important}
:is(#loginView,#siteChooser) .auth-field input{
  display:block!important;width:100%!important;box-sizing:border-box!important;height:52px!important;min-height:52px!important;margin:0!important;
  padding:0 16px!important;border:1.5px solid var(--a-line)!important;border-radius:12px!important;background:#fff!important;
  font:inherit!important;font-size:1rem!important;color:var(--a-ink)!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s;
}
:is(#loginView,#siteChooser) .auth-field input:hover{border-color:#CDB8AF!important}
:is(#loginView,#siteChooser) .auth-field input:focus{outline:none!important;border-color:var(--a-accent)!important;box-shadow:0 0 0 4px rgba(164,69,40,.12)!important}
:is(#loginView,#siteChooser) .auth-pw{position:relative}
:is(#loginView,#siteChooser) .auth-pw input{padding-right:64px!important}
:is(#loginView,#siteChooser) .auth-pw .auth-pw-toggle{position:absolute!important;right:8px;top:50%;transform:translateY(-50%);height:36px!important;min-height:0!important;width:auto!important;padding:0 10px!important;margin:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--a-muted)!important;font-size:.82rem!important;font-weight:700!important;box-shadow:none!important}
:is(#loginView,#siteChooser) .auth-pw .auth-pw-toggle:hover{background:#F3E7E1!important;color:var(--a-ink)!important}
:is(#loginView,#siteChooser) .auth-submit{
  display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%!important;height:54px!important;min-height:54px!important;margin:8px 0 0!important;padding:0 20px!important;
  border:0!important;border-radius:12px!important;background:var(--a-accent)!important;color:#fff!important;font-size:1.05rem!important;font-weight:700!important;letter-spacing:.06em;
  box-shadow:0 10px 24px -12px rgba(29,13,12,.55)!important;cursor:pointer;transition:transform .12s,filter .15s;
}
:is(#loginView,#siteChooser) .auth-submit:hover{filter:brightness(1.08)}
:is(#loginView,#siteChooser) .auth-submit:active{transform:translateY(1px)}
:is(#loginView,#siteChooser) .auth-submit::after{content:'→';font-weight:400}
:is(#loginView,#siteChooser) .auth-help{margin:16px 0 0;font-size:.85rem;color:var(--a-muted)}
:is(#loginView,#siteChooser) .auth-alt{margin-top:32px;padding-top:22px;border-top:1px solid var(--a-line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem;color:var(--a-muted)}
:is(#loginView,#siteChooser) .auth-alt a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1.5px solid var(--a-line);border-radius:10px;color:var(--a-ink);font-weight:700;text-decoration:none;background:#fff}
:is(#loginView,#siteChooser) .auth-alt a:hover{border-color:var(--a-accent);color:var(--a-accent)}

/* ---------- 平板／手機 ---------- */
@media (max-width:900px){
  :is(#loginView,#siteChooser).auth{display:block!important}
  :is(#loginView,#siteChooser).auth[style*="display: none"],:is(#loginView,#siteChooser).auth[style*="display:none"]{display:none!important}
  :is(#loginView,#siteChooser) .auth-brand{padding:28px 24px 30px;gap:22px}
  :is(#loginView,#siteChooser) .auth-brand::before{width:320px;height:320px;right:-120px;top:-140px}
  :is(#loginView,#siteChooser) .auth-brand::after{display:none}
  :is(#loginView,#siteChooser) .auth-hero h1{font-size:1.7rem;margin-bottom:8px}
  :is(#loginView,#siteChooser) .auth-hero p{margin:0;font-size:.92rem}
  :is(#loginView,#siteChooser) .auth-points,:is(#loginView,#siteChooser) .auth-foot{display:none}
  :is(#loginView,#siteChooser) .auth-legal{display:block}
  :is(#loginView,#siteChooser) .auth-main{align-items:flex-start;padding:30px 18px 48px}
}
@media (max-width:480px){
  :is(#loginView,#siteChooser) .auth-mark{width:42px;height:42px;flex-basis:42px}
  :is(#loginView,#siteChooser) .auth-logo-text{font-size:1.2rem}
  :is(#loginView,#siteChooser) .auth-hero h1{font-size:1.45rem}
  :is(#loginView,#siteChooser) .auth-card h2{font-size:1.55rem!important}
  :is(#loginView,#siteChooser) .auth-alt{flex-direction:column;align-items:stretch}
  :is(#loginView,#siteChooser) .auth-alt a{justify-content:center}
}
@media (prefers-reduced-motion:reduce){:is(#loginView,#siteChooser) *{transition:none!important}}

/* 選擇社區（同時服務多個社區的人員，登入後） */
#siteChooser .site-list{display:grid;gap:12px;margin:6px 0 4px}
#siteChooser .site-btn{display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%!important;min-height:54px!important;margin:0!important;padding:10px 18px!important;border:1.8px solid var(--a-accent)!important;border-radius:999px!important;background:#fff!important;color:var(--a-accent)!important;font-size:1.05rem!important;font-weight:700!important;letter-spacing:.04em;box-shadow:none!important;cursor:pointer;transition:background .15s,color .15s,transform .1s}
#siteChooser .site-btn:hover{background:var(--a-accent)!important;color:#fff!important}
#siteChooser .site-btn:active{transform:translateY(1px)}
#siteChooser .site-btn.on{background:#F3E7E1!important}
#siteChooser .site-btn small{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--a-accent);color:#fff}
#siteChooser .site-btn.busy{opacity:.6}
#siteChooser .site-alt{justify-content:space-between}
#siteChooser .site-link{background:none!important;border:0!important;box-shadow:none!important;color:var(--a-accent)!important;text-decoration:underline;font-weight:700!important;padding:6px 4px!important;min-height:0!important;margin:0!important;width:auto!important;cursor:pointer}
#siteChooser{display:grid}
@media (max-width:900px){#siteChooser{display:block}#siteChooser .auth-hero p{display:none}}