body.has-account-modal { overflow: hidden; }
.account-modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 22px; color: #eaf8ff; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
.account-modal[hidden], .account-view[hidden], .account-form [hidden], .account-wechat-entry[hidden], .account-wechat-bind[hidden], [data-admin-course][hidden] { display: none !important; }
.account-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(2, 7, 13, .86); backdrop-filter: blur(14px); cursor: default; }
.account-panel { position: relative; z-index: 2; width: min(100%, 560px); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid rgba(72, 230, 255, .28); border-radius: 18px; background: linear-gradient(145deg, rgba(10, 24, 39, .995), rgba(5, 13, 23, .998)); box-shadow: 0 36px 120px rgba(0,0,0,.7), 0 0 70px rgba(72,230,255,.07); }
.account-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: linear-gradient(rgba(72,230,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(72,230,255,.025) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.account-panel button, .account-panel input { font: inherit; }
.account-panel__heading { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px 20px; border-bottom: 1px solid rgba(139, 178, 207, .13); }
.account-panel__heading span { color: #48e6ff; font: 600 9px Consolas, monospace; letter-spacing: .17em; }
.account-panel__heading h2 { margin: 7px 0 0; color: #f4fbff; font-size: 25px; line-height: 1.2; }
.account-panel__close { flex: none; width: 38px; height: 38px; border: 1px solid rgba(139,178,207,.2); border-radius: 9px; color: #8da4b8; background: rgba(8,18,30,.76); font-size: 24px; cursor: pointer; }
.account-panel__close:hover { border-color: rgba(72,230,255,.45); color: #48e6ff; }
.account-view { position: relative; z-index: 2; padding: 24px 28px 29px; }
.account-view--loading, .account-view--error { min-height: 310px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.account-view--loading strong, .account-view--error h3 { margin-top: 17px; font-size: 19px; }
.account-view--loading p, .account-view--error p { margin: 8px 0 0; color: #7890a4; font-size: 13px; line-height: 1.7; }
.account-loader { width: 35px; height: 35px; border: 2px solid rgba(72,230,255,.16); border-top-color: #48e6ff; border-radius: 50%; animation: account-spin .8s linear infinite; }
.account-mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px; border: 1px solid rgba(139,178,207,.13); border-radius: 11px; background: rgba(139,178,207,.035); }
.account-mode-tabs button { min-height: 38px; border: 0; border-radius: 7px; color: #7991a4; background: transparent; font-size: 12px; cursor: pointer; }
.account-mode-tabs button.is-active { color: #dffbff; background: rgba(72,230,255,.12); box-shadow: inset 0 0 0 1px rgba(72,230,255,.2); }
.account-wechat-entry { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 13px; margin-top: 18px; padding: 14px; border: 1px solid rgba(74, 222, 128, .2); border-radius: 12px; background: rgba(74,222,128,.05); }
.account-wechat-mark { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 12px; color: #062918; background: #6de19a; font-size: 17px; font-weight: 800; box-shadow: 0 0 22px rgba(74,222,128,.18); }
.account-wechat-entry strong { color: #effff5; font-size: 14px; }
.account-wechat-entry p { margin: 5px 0 0; color: #86a095; font-size: 10px; line-height: 1.55; }
.account-wechat-entry button { min-height: 36px; padding: 0 13px; border: 1px solid rgba(109,225,154,.35); border-radius: 8px; color: #a9f5c6; background: rgba(109,225,154,.1); font-size: 11px; cursor: pointer; }
.account-divider { position: relative; margin: 19px 0 15px; color: #637a8d; font-size: 10px; text-align: center; }
.account-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(139,178,207,.12); }
.account-divider span { position: relative; padding: 0 11px; background: #081827; }
.account-form { display: grid; gap: 13px; }
.account-form label { display: grid; gap: 7px; }
.account-form label > span { color: #8da4b7; font-size: 11px; }
.account-form input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 13px; border: 1px solid rgba(139,178,207,.19); border-radius: 9px; outline: none; color: #ecfaff; background: rgba(2,9,17,.62); font-size: 13px; }
.account-form input:focus { border-color: rgba(72,230,255,.58); box-shadow: 0 0 0 3px rgba(72,230,255,.07); }
.account-form input::placeholder { color: #52687a; }
.account-verification { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: end; }
.account-verification button { min-height: 44px; border: 1px solid rgba(72,230,255,.25); border-radius: 9px; color: #91eaf6; background: rgba(72,230,255,.07); font-size: 11px; cursor: pointer; }
.account-verification button:disabled { cursor: wait; opacity: .6; }
.account-form-message { min-height: 17px; margin: 0; color: #738da0; font-size: 11px; line-height: 1.55; }
.account-form-message[data-state="error"] { color: #ff9a9a; }
.account-form-message[data-state="success"] { color: #76e6ad; }
.account-form-message[data-state="pending"] { color: #7edfee; }
.account-primary-button, .account-logout-button, .account-wechat-bind { width: 100%; min-height: 44px; border-radius: 9px; cursor: pointer; }
.account-primary-button { border: 1px solid rgba(72,230,255,.42); color: #d9fbff; background: linear-gradient(110deg, rgba(37,177,207,.23), rgba(76,207,159,.18)); font-weight: 700; }
.account-primary-button:disabled { opacity: .55; cursor: wait; }
.account-auth-note { margin: 13px 0 0; color: #698093; font-size: 10px; line-height: 1.65; text-align: center; }
.account-avatar { width: 74px; height: 74px; display: grid; place-items: center; margin: 2px auto 14px; border: 1px solid rgba(72,230,255,.45); border-radius: 20px; color: #48e6ff; background: rgba(72,230,255,.08); font: 700 16px Consolas, monospace; box-shadow: inset 0 0 22px rgba(72,230,255,.05), 0 0 24px rgba(72,230,255,.08); }
.account-connected { display: flex; align-items: center; justify-content: center; gap: 7px; color: #76e6ad; font-size: 11px; }
.account-connected i { width: 7px; height: 7px; border-radius: 50%; background: #76e6ad; box-shadow: 0 0 10px #76e6ad; }
.account-view--profile h3 { margin: 9px 0 0; text-align: center; font-size: 25px; }
.account-view--profile > p { margin: 7px auto 0; color: #7f94a6; font-size: 12px; line-height: 1.7; text-align: center; }
.account-source-list { display: flex; justify-content: center; gap: 7px; margin-top: 15px; }
.account-source-list span { padding: 5px 9px; border: 1px solid rgba(139,178,207,.13); border-radius: 999px; color: #596f81; font-size: 9px; }
.account-source-list span.is-active { border-color: rgba(118,230,173,.28); color: #8fe4b7; background: rgba(118,230,173,.06); }
.account-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 19px 0 0; }
.account-profile-grid div { padding: 15px 8px; border: 1px solid rgba(139,178,207,.13); border-radius: 10px; background: rgba(139,178,207,.035); text-align: center; }
.account-profile-grid dt { color: #eaf8ff; font: 700 24px Consolas, monospace; }
.account-profile-grid dd { margin: 6px 0 0; color: #758b9e; font-size: 10px; }
.account-id-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(139,178,207,.1); border-radius: 9px; color: #748a9d; font-size: 11px; }
.account-id-row code { color: #77ddeb; font: 600 12px Consolas, monospace; letter-spacing: .08em; }
.account-view--profile .account-sync-note { margin-top: 14px; padding: 11px; border: 1px solid rgba(118,230,173,.13); border-radius: 9px; color: #89a39a; background: rgba(118,230,173,.035); }
.account-wechat-bind { margin-top: 14px; border: 1px solid rgba(74,222,128,.28); color: #9bebba; background: rgba(74,222,128,.08); }
.account-wechat-bind:disabled { color: #677a71; cursor: not-allowed; }
.account-logout-button { margin-top: 10px; border: 1px solid rgba(255,123,123,.2); color: #d99696; background: rgba(255,123,123,.04); }
.account-delete-open { width: 100%; margin-top: 8px; border: 0; color: #7b8b98; background: transparent; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-delete-confirm { margin-top: 12px; padding: 14px; border: 1px solid rgba(255,123,123,.28); border-radius: 10px; background: rgba(255,123,123,.055); }
.account-delete-confirm > strong { color: #ffb0b0; font-size: 13px; }
.account-delete-confirm > p { margin: 7px 0 0; color: #9e8588; font-size: 10px; line-height: 1.65; text-align: left; }
.account-delete-confirm label { display: grid; gap: 6px; margin-top: 11px; color: #b6989b; font-size: 10px; }
.account-delete-confirm input { width: 100%; min-height: 39px; padding: 0 11px; border: 1px solid rgba(255,123,123,.28); border-radius: 8px; outline: none; color: #ffecec; background: rgba(4,8,15,.62); }
.account-delete-confirm input:focus { border-color: rgba(255,123,123,.58); box-shadow: 0 0 0 3px rgba(255,123,123,.07); }
.account-delete-confirm > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.account-delete-confirm > div button { min-height: 38px; border: 1px solid rgba(139,178,207,.16); border-radius: 8px; color: #8da2b3; background: rgba(139,178,207,.04); cursor: pointer; }
.account-delete-confirm > div button:last-child { border-color: rgba(255,123,123,.32); color: #ffb0b0; background: rgba(255,123,123,.08); }
.account-delete-confirm > div button:disabled { opacity: .55; cursor: wait; }
.account-delete-confirm > a { display: inline-block; margin-top: 10px; color: #8fa5b5; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.account-view--profile [data-profile-message] { margin-top: 10px; text-align: center; }
.account-error-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,123,123,.32); border-radius: 50%; color: #ff9090; background: rgba(255,123,123,.06); font: 700 22px Consolas, monospace; }
.account-view--error .account-primary-button { width: min(100%, 230px); margin-top: 18px; }
[data-account-button].is-authenticated { color: #76e6ad !important; }
@keyframes account-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .account-modal { padding: 10px; }
  .account-panel { max-height: calc(100vh - 20px); border-radius: 14px; }
  .account-panel__heading { padding: 18px 18px 15px; }
  .account-panel__heading h2 { font-size: 22px; }
  .account-view { padding: 19px 18px 22px; }
  .account-wechat-entry { grid-template-columns: 42px 1fr; }
  .account-wechat-entry button { grid-column: 1 / -1; }
  .account-verification { grid-template-columns: 1fr 116px; }
}
@media (prefers-reduced-motion: reduce) { .account-loader { animation: none; } }