/* ============================================================
   pages/app.css · 登录页（.lg-*）与角色工作台（.hm-*）
   ============================================================ */

/* —— 登录 —— */
.lgn { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; background: var(--surface); }
.lg-side { position: relative; overflow: hidden; background: var(--deck); color: var(--on-deck); padding: 36px 48px; display: flex; flex-direction: column; }
.lg-side::after { content: ""; position: absolute; width: 720px; height: 720px; right: -260px; bottom: -300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 144, 213, .35), transparent 70%); pointer-events: none; }
.lg-grid { position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: linear-gradient(var(--deck-line) 1px, transparent 1px), linear-gradient(90deg, var(--deck-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 30% 40%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 10%, transparent 75%); }
.lg-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; }
.lg-brand img { width: 34px; }
.lg-brand b { display: block; font-size: 16px; } .lg-brand i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--on-deck-3); }
.lg-copy { position: relative; z-index: 1; margin: auto 0; max-width: 520px; }
.lg-copy h1 { font-size: 40px; line-height: 1.25; margin: 14px 0 16px; letter-spacing: -.02em; }
.lg-copy p { color: var(--on-deck-2); font-size: 15px; line-height: 1.8; }
.lg-points { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; color: var(--on-deck-2); font-size: 13.5px; }
.lg-points li { display: flex; gap: 10px; align-items: center; } .lg-points .ico { color: var(--amber); }
.lg-main { display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; background: var(--bg); }
.lg-box { width: min(440px, 100%); margin: 0 auto; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2); }
.lg-box h2 { font-size: 22px; }
.lg-roles { display: flex; flex-direction: column; gap: 8px; }
.lg-role { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); transition: all .15s; }
.lg-role b { display: block; font-size: 14px; } .lg-role .small { display: block; }
.lg-role > .ico { color: var(--ink-4); transition: transform .15s, color .15s; }
.lg-role:hover { border-color: var(--primary); box-shadow: var(--shadow-1); } .lg-role:hover > .ico { color: var(--primary); transform: translateX(3px); }
.lg-role.is-active { border-color: var(--amber); background: var(--amber-soft); }
.lg-role-ico { width: 40px; height: 40px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--surface-3); color: var(--primary); flex: 0 0 auto; }
.lg-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--ink-3); font-size: 12px; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 900px) { .lgn { grid-template-columns: 1fr; } .lg-side { display: none; } }

/* —— 工作台 —— */
.hm-q { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink); }
.hm-q b { display: block; font-size: 14px; } .hm-q > .ico { color: var(--ink-4); }
.hm-q-ico { width: 42px; height: 42px; border-radius: var(--r-m); display: grid; place-items: center; flex: 0 0 auto; color: var(--qc); background: color-mix(in srgb, var(--qc) 12%, transparent); }
.hm-continue { display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: visible; }
.hm-continue-vis { background: var(--deck); border-radius: var(--r-m) 0 0 var(--r-m); overflow: hidden; min-height: 190px; }
.hm-continue-vis img { width: 100%; height: 100%; object-fit: cover; }
.hm-continue-body { padding: 20px 22px; }
.hm-todo { padding: 8px 0; font-size: 13.5px; } .hm-todo:hover { color: var(--primary); }
.hm-ai { display: block; padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-2); }
.hm-ai:hover { border-color: var(--primary); } .hm-ai b { display: block; font-size: 13.5px; }
@media (max-width: 760px) { .hm-continue { grid-template-columns: 1fr; } .hm-continue-vis { border-radius: var(--r-m) var(--r-m) 0 0; } }