/*! lulu 日历页大卡片：宽度继承 .page（与排班表一致），内分「登录区 / 日历区」两部分 */
#viewCalendar{position:relative;z-index:1;max-width:100%;margin:0 auto;padding:0 0 28px}
#viewCalendar[hidden]{display:none}
.page[data-page-view="calendar"] > :not(#viewCalendar){display:none !important}

.hl-card{border-radius:18px;border:1px solid var(--line);background:var(--card);
  box-shadow:0 24px 70px rgba(0,0,0,.34);padding:18px 20px 22px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---- 第一部分：登录 / 账户区 ---- */
.hl-account{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:2px 2px 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.hl-account-brand{display:flex;align-items:center;gap:10px;min-width:190px}
.hl-account-logo{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-size:18px;color:var(--btn-ink);background:var(--accent)}
.hl-account-brand b{display:block;font-size:15px;color:var(--ink)}
.hl-account-brand span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
#hlLoginForm{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
#hlLoginForm label{font-size:10.5px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
#hlLoginForm input{font:12.5px system-ui,sans-serif;color:var(--ink);background:var(--card-2,var(--card));
  border:1px solid var(--line);border-radius:7px;padding:8px 10px;outline:none;width:160px}
#hlLoginForm input:focus{border-color:var(--accent)}
.hl-btn-primary{font:600 12.5px system-ui,sans-serif;padding:9px 18px;border:0;border-radius:7px;
  background:var(--accent);color:var(--btn-ink);cursor:pointer}
.hl-btn-primary:hover{filter:brightness(1.1)}
.hl-btn-primary:disabled{opacity:.6;cursor:default}
.hl-login-err{font-size:11.5px;color:var(--danger,#ff8a8f)}
.hl-account-user{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.hl-account-user b{color:var(--ink)}
.hl-ghost{font:600 11.5px system-ui,sans-serif;padding:7px 12px;border-radius:7px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);text-decoration:none;cursor:pointer}
.hl-ghost:hover{border-color:var(--accent);color:var(--ink)}

/* ---- 第二部分：Astraga 日历 ---- */
#hlScope{position:relative;z-index:1}
#hlScope .view{display:block}
#hlScope .section{padding:0;max-width:100%;margin:0}

:root[data-theme="star"] .hl-card{background:rgba(7,18,42,.90);border-color:rgba(126,170,250,.20)}
:root[data-theme="star"] #hlLoginForm input{background:rgba(10,26,58,.8)}
:root[data-theme="dark"] .hl-card{background:rgba(17,26,40,.95)}
:root[data-theme="light"] .hl-card{background:rgba(255,255,255,.94);box-shadow:0 20px 55px rgba(20,40,80,.14)}
:root[data-theme="light"] #hlLoginForm input{background:#fff;color:#16233a}

@media (max-width:900px){
  .hl-account{flex-direction:column;align-items:flex-start}
  #hlLoginForm input{width:140px}
}