.yiq-learning-root {
  --yiq-bg: #f3f5f7;
  --yiq-surface: #ffffff;
  --yiq-surface-soft: #f7faf8;
  --yiq-ink: #18252d;
  --yiq-muted: #697782;
  --yiq-line: rgba(30, 62, 53, .11);
  --yiq-accent: #11755f;
  --yiq-accent-deep: #234b40;
  --yiq-accent-soft: #e9f3ef;
  --yiq-danger: #bd3f50;
  --yiq-shadow: 0 12px 38px rgba(23, 45, 37, .07);
  min-height: 100vh;
  color: var(--yiq-ink);
  background: radial-gradient(circle at 82% 3%, rgba(98, 166, 137, .16), transparent 28rem), var(--yiq-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.yiq-learning-root * { box-sizing: border-box; }
.yiq-learning-root a { color: inherit; }
.yiq-learning-root button, .yiq-learning-root input, .yiq-learning-root select { font: inherit; }
.yiq-learning-root :focus-visible { outline: 3px solid color-mix(in srgb, var(--yiq-accent) 35%, transparent); outline-offset: 2px; }
.yiq-source-meibanjia, .yiq-workspace-meibanjia { --yiq-bg: #f3f5f7; --yiq-ink: #18252d; --yiq-muted: #697782; --yiq-line: rgba(30, 62, 53, .11); --yiq-accent: #11755f; --yiq-accent-deep: #234b40; --yiq-accent-soft: #e9f3ef; --yiq-shadow: 0 12px 38px rgba(23, 45, 37, .07); background: radial-gradient(circle at 82% 3%, rgba(98, 166, 137, .16), transparent 28rem), var(--yiq-bg); }
.yiq-source-private, .yiq-workspace-private { --yiq-bg: #f4f7fc; --yiq-surface-soft: #f7f9fd; --yiq-ink: #17243a; --yiq-muted: #68768a; --yiq-line: rgba(45, 82, 139, .12); --yiq-accent: #3e75de; --yiq-accent-deep: #214f9f; --yiq-accent-soft: #edf2ff; --yiq-shadow: 0 12px 38px rgba(42, 81, 149, .08); background: radial-gradient(circle at 82% 3%, rgba(94, 132, 214, .18), transparent 28rem), var(--yiq-bg); }
.yiq-icon { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.yiq-eyebrow { margin: 0 0 8px; color: var(--yiq-muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; }
.yiq-muted { color: var(--yiq-muted); }

/* Authentication */
.yiq-brand-mark, .yiq-brand-dot { display: inline-grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--yiq-accent), var(--yiq-accent-deep)); font-weight: 900; box-shadow: 0 14px 34px rgba(30, 67, 51, .2); }
.yiq-brand-mark { width: 58px; height: 58px; margin-bottom: 22px; border-radius: 19px; }
.yiq-brand-dot { width: 36px; height: 36px; border-radius: 12px; font-size: 12px; }
.yiq-auth-page { min-height: calc(100vh - 44px); padding: 92px 18px 60px; display: grid; place-items: start center; background: radial-gradient(circle at 50% 0%, rgba(113, 159, 135, .2), transparent 34rem); }
.yiq-auth-card { width: min(100%, 470px); padding: 34px 28px; border: 1px solid var(--yiq-line); border-radius: 32px; background: rgba(255, 255, 255, .94); box-shadow: 0 30px 90px rgba(24, 51, 41, .12); backdrop-filter: blur(18px); }
.yiq-auth-card-wide { width: min(100%, 640px); }
.yiq-auth-card h1 { margin: 0 0 12px; font-size: clamp(32px, 8vw, 48px); line-height: 1; letter-spacing: -.045em; }
.yiq-auth-intro { margin: 0 0 28px; color: var(--yiq-muted); line-height: 1.7; }
.yiq-form { display: grid; gap: 16px; }
.yiq-form label { display: grid; gap: 8px; color: #34413c; font-size: 13px; font-weight: 750; }
.yiq-form input, .yiq-form select { width: 100%; height: 50px; padding: 0 14px; color: var(--yiq-ink); border: 1px solid var(--yiq-line); border-radius: 14px; outline: none; background: #fbfcfb; }
.yiq-form input:focus, .yiq-form select:focus { border-color: var(--yiq-accent); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--yiq-accent) 11%, transparent); }
.yiq-form small { color: var(--yiq-muted); font-weight: 500; line-height: 1.45; }
.yiq-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yiq-check { display: flex !important; align-items: center; gap: 8px !important; font-weight: 500 !important; }
.yiq-check input { width: 18px; height: 18px; }
.yiq-primary-button, .yiq-secondary-button, .yiq-danger-button { min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.yiq-primary-button { color: var(--yiq-primary-button-text, #fff); background: linear-gradient(135deg, var(--yiq-accent), var(--yiq-accent-deep)); box-shadow: 0 12px 26px color-mix(in srgb, var(--yiq-accent) 22%, transparent); }
.yiq-learning-root button.yiq-primary-button, .yiq-learning-root a.yiq-primary-button,
.yiq-learning-root .yiq-admin-tools .yiq-secondary-button.is-active,
.yiq-learning-root .yiq-calendar-grid button.is-today,
.yiq-learning-root .yiq-learning-id-card button:not(.is-copied) { color: var(--yiq-primary-button-text, #fff) !important; -webkit-text-fill-color: var(--yiq-primary-button-text, #fff); }
.yiq-secondary-button { color: var(--yiq-accent-deep); background: var(--yiq-accent-soft); }
.yiq-secondary-button[disabled] { opacity: .55; cursor: not-allowed; }
.yiq-danger-button { color: var(--yiq-danger); background: #fff0f2; }
.yiq-auth-switch { margin: 22px 0 0; text-align: center; font-size: 14px; }
.yiq-auth-switch a { color: var(--yiq-accent); font-weight: 800; text-decoration: none; }
.yiq-auth-footnote { margin: 20px 0 0; padding-top: 18px; color: var(--yiq-muted); border-top: 1px solid var(--yiq-line); font-size: 12px; line-height: 1.65; }
.yiq-notice { margin: 0 0 18px; padding: 13px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid color-mix(in srgb, var(--yiq-accent) 18%, transparent); border-radius: 14px; background: var(--yiq-accent-soft); font-size: 13px; }
.yiq-notice button { color: var(--yiq-muted); border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }

/* Student application shell */
.yiq-app-shell { min-height: 100vh; background: transparent; }
.yiq-sidebar { display: none; }
.yiq-app-main { width: 100%; max-width: 1440px; padding: 68px 16px 108px; }
.yiq-app-topbar { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.yiq-topbar-copy { min-width: 0; }
.yiq-app-topbar h1 { margin: 0; font-size: clamp(30px, 7.5vw, 50px); line-height: 1.02; letter-spacing: -.05em; }
.yiq-topbar-subtitle { max-width: 620px; margin: 11px 0 0; color: var(--yiq-muted); font-size: 13px; }
.yiq-mobile-brand { margin-bottom: 20px; display: flex; align-items: center; gap: 8px; color: var(--yiq-accent-deep); font-size: 12px; font-weight: 850; }
.yiq-mobile-source-logo { width: 31px; height: 31px; object-fit: contain; }
.yiq-greeting-row { display: flex; align-items: center; gap: 12px; }
.yiq-greeting-avatar { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: var(--yiq-accent-soft); text-decoration: none; box-shadow: 0 10px 28px rgba(25, 50, 40, .12); }
.yiq-top-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.yiq-top-action, .yiq-avatar { position: relative; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; color: #34413c; border: 1px solid var(--yiq-line); border-radius: 14px; background: rgba(255, 255, 255, .9); text-decoration: none; box-shadow: 0 8px 22px rgba(24, 50, 40, .06); }
.yiq-avatar { border-radius: 50%; font-weight: 900; }
.yiq-avatar-media { width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; object-fit: cover; font-weight: 900; }
.yiq-learning-id-banner { margin-bottom: 20px; padding: 22px; color: #fff; border-radius: 24px; background: linear-gradient(135deg, var(--yiq-accent-deep), var(--yiq-accent)); box-shadow: var(--yiq-shadow); }
.yiq-learning-id-banner .yiq-eyebrow { color: rgba(255, 255, 255, .58); }
.yiq-learning-id-banner strong { display: block; margin-bottom: 5px; font-size: 28px; letter-spacing: .08em; }
.yiq-learning-id-banner p:last-child { margin: 0; color: rgba(255, 255, 255, .72); font-size: 13px; }

.yiq-welcome-card, .yiq-source-meibanjia .yiq-welcome-card { position: relative; min-height: 228px; margin-bottom: 16px; padding: 28px 24px; display: flex; align-items: center; overflow: hidden; color: #f7fbf8; border-radius: 30px; background: linear-gradient(135deg, #203a35 0%, #234b40 55%, #3c6f5f 100%); box-shadow: 0 22px 52px rgba(25, 65, 53, .19); }
.yiq-source-private .yiq-welcome-card { background: linear-gradient(135deg, #214f9f 0%, #3e75de 58%, #7398e8 100%); box-shadow: 0 22px 52px rgba(43, 82, 155, .20); }
.yiq-source-meibanjia .yiq-live-badge i, .yiq-source-meibanjia .yiq-module-status i { background: #7ed3b2; box-shadow: 0 0 0 4px rgba(126, 211, 178, .14); }
.yiq-source-private .yiq-live-badge i, .yiq-source-private .yiq-module-status i { background: #9cb9f1; box-shadow: 0 0 0 4px rgba(156, 185, 241, .14); }
.yiq-welcome-card > div:first-child { position: relative; z-index: 2; max-width: 680px; }
.yiq-welcome-card h2 { max-width: 560px; margin: 17px 0 10px; font-size: clamp(28px, 7vw, 48px); line-height: 1.03; letter-spacing: -.045em; }
.yiq-welcome-card p { max-width: 620px; margin: 0; color: rgba(255, 255, 255, .72); line-height: 1.65; }
.yiq-live-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.yiq-live-badge i, .yiq-workspace-badge i, .yiq-module-status i, .yiq-class-card .yiq-pill i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #9ee5bd; box-shadow: 0 0 0 4px rgba(158, 229, 189, .12); }
.yiq-welcome-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 18px; color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 700; }
.yiq-welcome-meta span { display: inline-flex; align-items: center; gap: 7px; }
.yiq-welcome-meta .yiq-icon { width: 16px; height: 16px; }
.yiq-orbit { position: absolute; width: 230px; height: 230px; right: -70px; bottom: -70px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; }
.yiq-orbit:before, .yiq-orbit:after { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.yiq-orbit:after { inset: 64px; background: rgba(255, 255, 255, .08); }
.yiq-orbit span, .yiq-orbit i, .yiq-orbit b { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.yiq-orbit span { top: 40px; left: 30px; opacity: .8; }
.yiq-orbit i { top: 90px; right: 14px; opacity: .5; }
.yiq-orbit b { bottom: 32px; left: 70px; opacity: .3; }

.yiq-kpi-grid { margin-bottom: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yiq-kpi { min-width: 0; min-height: 124px; padding: 16px; border: 1px solid var(--yiq-line); border-radius: 20px; background: rgba(255, 255, 255, .88); box-shadow: 0 10px 28px rgba(26, 51, 41, .035); }
.yiq-kpi > span { display: block; color: var(--yiq-muted); font-size: 11px; font-weight: 750; }
.yiq-kpi > div { margin-top: 11px; display: flex; align-items: baseline; }
.yiq-kpi strong { font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.yiq-kpi small { margin-left: 4px; color: var(--yiq-muted); font-size: 11px; }
.yiq-kpi p { margin: 10px 0 0; color: #8b9490; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yiq-section { margin: 0 0 30px; }
.yiq-section-heading { margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.yiq-section-heading h2, .yiq-page-heading h2 { margin: 0; font-size: clamp(25px, 5vw, 34px); line-height: 1.08; letter-spacing: -.04em; }
.yiq-section-heading a, .yiq-text-link { display: inline-flex; align-items: center; gap: 5px; color: var(--yiq-accent); font-size: 12px; font-weight: 800; text-decoration: none; }
.yiq-text-link .yiq-icon { width: 16px; height: 16px; }
.yiq-page-heading { max-width: 800px; margin: 0 0 24px; }
.yiq-page-heading p:last-child { margin: 11px 0 0; color: var(--yiq-muted); line-height: 1.65; }
.yiq-page-heading-split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.yiq-count-chip { flex: 0 0 auto; min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; color: var(--yiq-accent-deep); border-radius: 999px; background: var(--yiq-accent-soft); font-size: 11px; font-weight: 800; }

.yiq-module-grid { display: grid; gap: 12px; }
.yiq-module-card { position: relative; min-width: 0; padding: 20px; overflow: hidden; border: 1px solid var(--yiq-line); border-radius: 26px; background: var(--yiq-surface); box-shadow: var(--yiq-shadow); }
.yiq-module-card:before { content: ""; position: absolute; top: -54px; right: -55px; width: 150px; height: 150px; border-radius: 50%; background: var(--module-glow, rgba(75, 132, 102, .14)); }
.yiq-token-junior { --module-color: #2f7596; --module-soft: #e3f3f8; --module-glow: rgba(67, 147, 182, .17); }
.yiq-token-senior { --module-color: #6656a6; --module-soft: #eeebfa; --module-glow: rgba(108, 88, 176, .17); }
.yiq-token-cet4 { --module-color: #337c65; --module-soft: #e6f3ee; }
.yiq-token-toefl { --module-color: #a66434; --module-soft: #faeee4; }
.yiq-module-art { position: absolute; top: 20px; right: 20px; z-index: 1; width: 60px; height: 60px; display: grid; place-items: center; align-content: center; color: var(--module-color); border: 1px solid rgba(255, 255, 255, .65); border-radius: 19px; background: var(--module-soft); transform: rotate(3deg); }
.yiq-module-art span { font-family: Georgia, serif; font-size: 27px; font-weight: 700; line-height: .9; }
.yiq-module-art small { margin-top: 4px; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.yiq-module-card-top, .yiq-class-card-head, .yiq-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.yiq-module-card-top { padding-right: 68px; }
.yiq-module-badge, .yiq-module-status, .yiq-pill { position: relative; z-index: 1; min-height: 26px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; color: #6d7773; border-radius: 999px; background: #f1f4f2; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.yiq-module-status { padding: 0; color: #5e6d66; background: transparent; text-transform: none; letter-spacing: 0; }
.yiq-module-status i { width: 6px; height: 6px; background: #5fb080; box-shadow: none; }
.yiq-module-card h3 { position: relative; margin: 31px 0 8px; padding-right: 46px; font-size: 22px; letter-spacing: -.035em; }
.yiq-module-description { min-height: 45px; margin: 0 0 18px; color: var(--yiq-muted); font-size: 12px; line-height: 1.55; }
.yiq-module-stats { margin: 0 0 18px; padding: 14px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--yiq-line); border-bottom: 1px solid var(--yiq-line); }
.yiq-module-stats span { min-width: 0; display: grid; gap: 3px; }
.yiq-module-stats strong { font-size: 17px; }
.yiq-module-stats small { color: var(--yiq-muted); font-size: 8px; white-space: nowrap; }
.yiq-module-action { min-height: 42px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; color: var(--module-color); border: 0; border-radius: 13px; background: var(--module-soft); font-size: 12px; font-weight: 850; text-decoration: none; }
.yiq-module-action .yiq-icon { width: 16px; height: 16px; }
.yiq-module-action[disabled] { opacity: .55; }

.yiq-dashboard-grid, .yiq-supervisor-grid, .yiq-review-layout, .yiq-calendar-layout { margin-bottom: 30px; display: grid; gap: 12px; }
.yiq-panel, .yiq-profile-card, .yiq-calendar, .yiq-empty-state, .yiq-secret-reveal, .yiq-mail-shell, .yiq-timeline-shell { padding: 20px; border: 1px solid var(--yiq-line); border-radius: 26px; background: rgba(255, 255, 255, .9); box-shadow: var(--yiq-shadow); }
.yiq-panel h2, .yiq-panel h3 { margin: 0; letter-spacing: -.025em; }
.yiq-panel h3 { font-size: 21px; }
.yiq-panel > p { color: var(--yiq-muted); font-size: 13px; line-height: 1.65; }
.yiq-review-panel { color: #f8fbf9; border: 0; background: linear-gradient(145deg, var(--yiq-accent-deep), var(--yiq-accent)); }
.yiq-review-panel .yiq-eyebrow, .yiq-review-panel > p { color: rgba(255, 255, 255, .62); }
.yiq-review-panel .yiq-pill { color: #eefaf3; background: rgba(255, 255, 255, .1); }
.yiq-review-panel .yiq-text-link { color: rgba(255, 255, 255, .78); }
.yiq-review-visual { height: 68px; margin: 22px 0 10px; display: flex; align-items: center; }
.yiq-review-visual span { width: 58px; height: 58px; margin-right: -12px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .08); font-family: Georgia, serif; font-size: 17px; transform: rotate(-5deg); }
.yiq-review-visual span:nth-child(2) { background: rgba(255, 255, 255, .12); transform: translateY(-6px) rotate(2deg); }
.yiq-review-visual span:nth-child(3) { background: rgba(255, 255, 255, .16); transform: rotate(7deg); }
.yiq-icon-link { width: 38px; height: 38px; display: grid; place-items: center; color: var(--yiq-accent); border-radius: 12px; background: var(--yiq-accent-soft); text-decoration: none; }
.yiq-rhythm-panel { min-width: 0; overflow: hidden; }
.yiq-week-dots { width: 100%; max-width: 100%; margin: 26px 0 15px; padding-bottom: 5px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; }
.yiq-week-day { min-width: 0; display: grid; align-content: start; gap: 8px; }
.yiq-week-marker { display: grid; place-items: center; gap: 8px; }
.yiq-week-marker i { width: 12px; height: 12px; border: 3px solid #e9eeeb; border-radius: 50%; background: #fff; }
.yiq-week-marker.has-event i { border-color: var(--yiq-accent); background: var(--yiq-accent); }
.yiq-week-marker small { color: var(--yiq-muted); font-size: 9px; }
.yiq-week-exercises { display: grid; gap: 5px; }
.yiq-week-exercise { min-width: 0; padding: 6px; display: block; color: var(--yiq-accent-deep); border: 1px solid var(--yiq-line); border-radius: 8px; background: var(--yiq-accent-soft); font-size: 9px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.yiq-empty-line, .yiq-empty-card { padding: 18px; color: var(--yiq-muted); border: 1px dashed rgba(38, 70, 58, .18); border-radius: 18px; background: rgba(255, 255, 255, .55); font-size: 12px; }
.yiq-empty-card strong { margin-bottom: 6px; display: block; color: var(--yiq-ink); font-size: 15px; }
.yiq-empty-card p { margin: 0; line-height: 1.55; }
.yiq-empty-state { padding: 58px 24px; text-align: center; }
.yiq-empty-icon { width: 58px; height: 58px; margin: 0 auto 18px; display: grid; place-items: center; color: var(--yiq-accent); border-radius: 18px; background: var(--yiq-accent-soft); font-size: 22px; font-weight: 900; }
.yiq-empty-icon .yiq-icon { width: 25px; height: 25px; }
.yiq-empty-state h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.025em; }
.yiq-empty-state p { max-width: 500px; margin: 0 auto; color: var(--yiq-muted); line-height: 1.65; }
.yiq-review-empty { display: grid; align-content: center; }
.yiq-empty-orbit { position: relative; width: 96px; height: 96px; margin: 0 auto 22px; display: grid; place-items: center; border: 1px solid var(--yiq-line); border-radius: 50%; }
.yiq-empty-orbit:before, .yiq-empty-orbit:after { content: ""; position: absolute; border: 1px dashed var(--yiq-line); border-radius: 50%; }
.yiq-empty-orbit:before { inset: 11px; }
.yiq-empty-orbit:after { inset: 24px; }
.yiq-empty-orbit span { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--yiq-accent); font-weight: 900; }
.yiq-preview-stack ol { margin: 24px 0 0; padding: 0; display: grid; gap: 17px; list-style: none; }
.yiq-preview-stack li { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; }
.yiq-preview-stack li > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--yiq-accent); border-radius: 11px; background: var(--yiq-accent-soft); font-size: 11px; font-weight: 900; }
.yiq-preview-stack li div { display: grid; gap: 2px; }
.yiq-preview-stack li strong { font-size: 13px; }
.yiq-preview-stack li small { color: var(--yiq-muted); font-size: 10px; }
.yiq-timeline-shell { position: relative; min-height: 430px; overflow: hidden; }
.yiq-timeline-track { position: absolute; inset: 40px auto 40px 42px; width: 1px; background: linear-gradient(var(--yiq-line), transparent); }
.yiq-timeline-track i { position: absolute; left: -5px; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: #cad6d0; box-shadow: 0 0 0 1px var(--yiq-line); }
.yiq-timeline-track i:nth-child(2) { top: 38%; }
.yiq-timeline-track i:nth-child(3) { top: 76%; }
.yiq-timeline-shell .yiq-empty-state { min-height: 385px; display: grid; align-content: center; border: 0; background: transparent; box-shadow: none; }
.yiq-mail-shell { padding: 0; overflow: hidden; }
.yiq-mail-toolbar { min-height: 66px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--yiq-line); font-weight: 800; }
.yiq-mail-shell .yiq-empty-state { border: 0; background: transparent; box-shadow: none; }

.yiq-calendar { padding: 20px 16px; }
.yiq-calendar header { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yiq-calendar header strong { font-size: 20px; }
.yiq-calendar-week, .yiq-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.yiq-calendar-week span { padding: 8px 0; color: var(--yiq-muted); text-align: center; font-size: 9px; }
.yiq-calendar-grid button, .yiq-calendar-grid .is-blank { min-width: 0; aspect-ratio: 1; padding: 0; display: grid; place-items: center; position: relative; color: var(--yiq-ink); border: 0; border-radius: 11px; background: transparent; }
.yiq-calendar-grid button > span { font-size: 16px; font-weight: 600; line-height: 1; }
.yiq-calendar-grid button:hover { background: var(--yiq-surface-soft); }
.yiq-calendar-grid button.is-today { color: var(--yiq-ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--yiq-accent); }
.yiq-calendar-grid button i { position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.yiq-calendar-aside { display: grid; align-content: center; text-align: center; }
.yiq-calendar-aside .yiq-empty-icon { margin-bottom: 22px; }
.yiq-calendar-aside .yiq-text-link { margin-top: 8px; justify-content: center; }
.yiq-calendar-aside .yiq-calendar-events { max-height: min(44vh, 420px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 900px) {
  .yiq-week-dots { grid-template-columns: repeat(7, minmax(92px, 1fr)); }
}

.yiq-learning-id-card { margin-bottom: 14px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff; border-radius: 24px; background: linear-gradient(135deg, var(--yiq-accent-deep), var(--yiq-accent)); box-shadow: var(--yiq-shadow); }
.yiq-learning-id-card strong { display: block; font-size: clamp(25px, 8vw, 35px); letter-spacing: .08em; }
.yiq-learning-id-card span { color: rgba(255, 255, 255, .68); font-size: 11px; }
.yiq-learning-id-card .yiq-eyebrow { color: rgba(255, 255, 255, .58); }
.yiq-learning-id-card button { min-height: 40px; padding: 0 13px; flex: 0 0 auto; color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 11px; font-weight: 800; cursor: pointer; }
.yiq-learning-id-card button.is-copied { color: var(--yiq-accent-deep); background: #fff; }
.yiq-profile-card-title { margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--yiq-line); }
.yiq-profile-card-title h3 { margin: 0; }
.yiq-profile-row { padding: 15px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--yiq-line); }
.yiq-profile-row:last-child { border-bottom: 0; }
.yiq-profile-row span { color: var(--yiq-muted); font-size: 12px; }
.yiq-profile-row strong { max-width: 68%; text-align: right; font-size: 13px; }
.yiq-logout-form { margin-top: 16px; }
.yiq-mobile-dock { position: fixed; z-index: 1000; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; height: 66px; padding: 6px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(27, 51, 42, .12); border-radius: 23px; background: rgba(255, 255, 255, .92); box-shadow: 0 20px 55px rgba(24, 47, 39, .18); backdrop-filter: blur(20px); }
.yiq-mobile-dock a { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--yiq-muted); border-radius: 16px; font-size: 9px; font-weight: 750; text-decoration: none; }
.yiq-mobile-dock .yiq-icon { width: 18px; height: 18px; }
.yiq-mobile-dock a.is-active { color: var(--yiq-accent-deep); background: var(--yiq-accent-soft); }

/* Supervisor workspace */
.yiq-supervisor { width: min(100%, 1480px); margin: 0 auto; padding: 28px 16px 70px; }
.yiq-supervisor-nav { min-height: 62px; margin-bottom: 38px; padding: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--yiq-line); border-radius: 19px; background: rgba(255, 255, 255, .82); box-shadow: 0 10px 30px rgba(24, 50, 40, .04); backdrop-filter: blur(18px); }
.yiq-supervisor-wordmark { display: flex; align-items: center; gap: 9px; font-size: 12px; text-decoration: none; }
.yiq-supervisor-wordmark > span { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 11px; background: var(--yiq-accent-deep); font-size: 10px; font-weight: 900; }
.yiq-supervisor-nav > div { display: flex; gap: 3px; }
.yiq-supervisor-nav > div a { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; color: var(--yiq-muted); border-radius: 12px; font-size: 11px; font-weight: 800; text-decoration: none; }
.yiq-supervisor-nav > div a.is-active { color: var(--yiq-accent-deep); background: var(--yiq-accent-soft); }
.yiq-view-site { color: var(--yiq-muted) !important; font-size: 10px; font-weight: 750; text-decoration: none; }
.yiq-supervisor-head { margin-bottom: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.yiq-supervisor-head > div:first-child { max-width: 780px; }
.yiq-supervisor-head h1 { margin: 0; font-size: clamp(34px, 7vw, 58px); line-height: .98; letter-spacing: -.055em; }
.yiq-supervisor-head p:last-child { margin: 13px 0 0; color: var(--yiq-muted); }
.yiq-workspace-badge { min-height: 28px; margin-bottom: 18px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; color: var(--yiq-accent-deep); border-radius: 999px; background: var(--yiq-accent-soft); font-size: 10px; font-weight: 850; }
.yiq-workspace-badge i { width: 6px; height: 6px; background: var(--yiq-accent); box-shadow: none; }
.yiq-admin-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.yiq-admin-tools .yiq-secondary-button.is-active { color: #fff; background: var(--yiq-accent-deep); }
.yiq-supervisor-kpis, .yiq-access-summary { margin-bottom: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yiq-supervisor-kpis article, .yiq-access-summary article { min-width: 0; padding: 18px; position: relative; border: 1px solid var(--yiq-line); border-radius: 20px; background: #fff; }
.yiq-supervisor-kpis span, .yiq-access-summary span { display: block; color: var(--yiq-muted); font-size: 10px; font-weight: 750; }
.yiq-supervisor-kpis strong, .yiq-access-summary strong { display: block; margin-top: 11px; font-size: 28px; line-height: 1; letter-spacing: -.04em; }
.yiq-supervisor-kpis small, .yiq-access-summary small { margin-top: 8px; display: block; color: #8a948f; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yiq-kpi-icon, .yiq-panel-icon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--yiq-accent); border-radius: 11px; background: var(--yiq-accent-soft); }
.yiq-kpi-icon .yiq-icon, .yiq-panel-icon .yiq-icon { width: 17px; height: 17px; }
.yiq-panel-icon { position: static; flex: 0 0 auto; }
.yiq-panel-intro { margin: -2px 0 20px !important; }
.yiq-form fieldset { margin: 0; padding: 0; border: 0; }
.yiq-form legend { margin-bottom: 10px; font-size: 12px; font-weight: 850; }
.yiq-fixed-source { min-height: 50px; padding: 0 14px; display: flex; align-items: center; gap: 9px; color: var(--yiq-accent-deep); border: 1px solid var(--yiq-line); border-radius: 14px; background: var(--yiq-accent-soft); }
.yiq-fixed-source i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--yiq-accent); }
.yiq-fixed-source small { margin-left: auto; color: var(--yiq-muted); font-size: 10px; font-weight: 650; }
.yiq-module-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.yiq-module-checks label { padding: 8px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--yiq-line); border-radius: 12px; background: #fafcfb; font-size: 11px; font-weight: 750; }
.yiq-module-checks label.is-disabled { opacity: .48; }
.yiq-module-checks input { width: 16px; height: 16px; margin: 0; }
.yiq-student-list { display: grid; gap: 4px; }
.yiq-student-row { min-width: 0; padding: 11px 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--yiq-line); }
.yiq-student-row:last-child { border-bottom: 0; }
.yiq-avatar.small { width: 38px; height: 38px; border-radius: 12px; background: var(--yiq-accent-soft); box-shadow: none; }
.yiq-student-row strong, .yiq-student-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yiq-student-row small { margin-top: 3px; color: var(--yiq-muted); font-size: 9px; }
.yiq-class-grid { display: grid; gap: 12px; }
.yiq-class-card { padding: 19px; border: 1px solid var(--yiq-line); border-radius: 23px; background: #fff; box-shadow: 0 10px 30px rgba(24, 50, 40, .035); }
.yiq-class-card h3 { margin: 10px 0 3px; font-size: 18px; letter-spacing: -.025em; }
.yiq-class-card-head > div { min-width: 0; }
.yiq-class-card-head > div > p { margin: 0; color: var(--yiq-muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yiq-class-card-head > strong { display: grid; justify-items: end; font-size: 25px; line-height: 1; }
.yiq-class-card-head > strong small { margin-top: 5px; color: var(--yiq-muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.yiq-class-card .yiq-pill i { width: 5px; height: 5px; background: var(--yiq-accent); box-shadow: none; }
.yiq-inline-form { margin-top: 15px; padding-top: 14px; display: grid; gap: 10px; border-top: 1px solid var(--yiq-line); }
.yiq-text-button { padding: 4px 0; color: var(--yiq-accent); border: 0; background: transparent; text-align: left; font-size: 11px; font-weight: 850; cursor: pointer; }
.yiq-secret-reveal { margin-bottom: 20px; border-color: #eadb9f; background: #fff8dd; }
.yiq-secret-reveal h2 { margin: 0 0 12px; }
.yiq-secret-reveal code { width: max-content; max-width: 100%; padding: 10px 14px; display: block; color: #fff; border-radius: 12px; background: #201f24; font-size: 18px; letter-spacing: .05em; }
.yiq-secret-reveal p:last-child { color: #766b3b; font-size: 12px; }
.yiq-supervisor-foot { margin-top: 34px; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; color: var(--yiq-muted); border-top: 1px solid var(--yiq-line); font-size: 9px; }
.yiq-access-summary { grid-template-columns: repeat(3, 1fr); }
.yiq-status-dot { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; background: #51a577; }
.yiq-staff-directory { padding: 20px; border: 1px solid var(--yiq-line); border-radius: 26px; background: #fff; box-shadow: var(--yiq-shadow); }
.yiq-people-page .yiq-student-row form { margin: 0; padding: 0; border: 0; }

@media (max-width: 520px) {
  .yiq-form-grid { grid-template-columns: 1fr; }
  .yiq-auth-card { padding: 28px 20px; }
  .yiq-top-actions .yiq-top-action:first-child, .yiq-top-actions .yiq-avatar { display: none; }
  .yiq-page-heading-split { align-items: flex-start; }
  .yiq-learning-id-card { align-items: flex-start; flex-direction: column; }
  .yiq-learning-id-card button { width: 100%; }
  .yiq-supervisor-nav { margin-bottom: 28px; }
  .yiq-supervisor-wordmark strong, .yiq-view-site { display: none; }
  .yiq-supervisor-nav > div { margin-left: auto; }
  .yiq-supervisor-nav > div a { padding: 0 9px; }
  .yiq-admin-tools { width: 100%; justify-content: flex-start; }
  .yiq-admin-tools .yiq-secondary-button { flex: 1 1 0; padding: 0 10px; }
  .yiq-access-summary { grid-template-columns: 1fr; }
  .yiq-supervisor-foot { flex-direction: column; }
}
@media (min-width: 768px) {
  .yiq-app-shell { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
  .yiq-sidebar, .yiq-source-meibanjia .yiq-sidebar { position: sticky; top: 0; height: 100vh; padding: 20px 12px; display: flex; flex-direction: column; overflow: hidden; color: rgba(255, 255, 255, .68); background: #173b31; border-right: 1px solid rgba(255, 255, 255, .06); }
  .yiq-source-private .yiq-sidebar { background: #17386e; }
  .yiq-source-meibanjia .yiq-sidebar nav a.is-active { background: rgba(126, 211, 178, .18); }
  .yiq-source-private .yiq-sidebar nav a.is-active { background: rgba(156, 185, 241, .20); }
  .yiq-sidebar-brand { margin-bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
  .yiq-source-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; background: #fff; }
  .yiq-sidebar-brand > span { min-width: 0; display: grid; gap: 2px; }
  .yiq-sidebar-brand strong { font-size: 8px; line-height: 1.2; }
  .yiq-sidebar-brand small { color: rgba(255, 255, 255, .38); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
  .yiq-sidebar nav { display: grid; gap: 5px; }
  .yiq-sidebar nav a { min-height: 58px; padding: 7px 3px; display: grid; place-items: center; align-content: center; gap: 4px; color: rgba(255, 255, 255, .48); border-radius: 16px; font-size: 8px; font-weight: 700; text-align: center; text-decoration: none; }
  .yiq-sidebar nav a .yiq-icon { width: 19px; height: 19px; }
  .yiq-sidebar nav a.is-active { color: #fff; background: rgba(255, 255, 255, .1); }
  .yiq-sidebar-student { margin-top: auto; padding: 8px; display: flex; justify-content: center; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: rgba(255, 255, 255, .06); text-decoration: none; }
  .yiq-sidebar-student > .yiq-avatar-media { width: 38px; height: 38px; flex: 0 0 38px; color: #fff; background: rgba(255, 255, 255, .1); }
  .yiq-sidebar-student > span:last-child { display: none; }
  .yiq-app-main { padding: 42px 28px 72px; }
  .yiq-mobile-brand { display: none; }
  .yiq-mobile-dock { display: none; }
  .yiq-welcome-card { min-height: 250px; padding: 36px; }
  .yiq-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yiq-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yiq-dashboard-grid, .yiq-supervisor-grid, .yiq-review-layout, .yiq-calendar-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yiq-review-layout { grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr); }
  .yiq-calendar-layout { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .7fr); }
  .yiq-calendar { padding: 25px; }
  .yiq-calendar-grid button, .yiq-calendar-grid .is-blank { aspect-ratio: 1.25; }
  .yiq-supervisor { padding: 30px 28px 72px; }
  .yiq-supervisor-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .yiq-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .yiq-app-shell { grid-template-columns: 252px minmax(0, 1fr); }
  .yiq-sidebar { padding: 26px 18px; }
  .yiq-sidebar-brand { flex-direction: row; justify-content: flex-start; text-align: left; }
  .yiq-source-logo { width: 48px; height: 48px; }
  .yiq-sidebar-brand strong { font-size: 12px; }
  .yiq-sidebar-brand small { font-size: 8px; }
  .yiq-sidebar nav a { min-height: 47px; padding: 0 13px; display: flex; justify-content: flex-start; gap: 11px; font-size: 12px; text-align: left; }
  .yiq-sidebar nav a .yiq-icon { width: 18px; height: 18px; }
  .yiq-sidebar-student { justify-content: flex-start; gap: 10px; padding: 11px; }
  .yiq-sidebar-student > .yiq-avatar-media { width: 40px; height: 40px; flex-basis: 40px; }
  .yiq-sidebar-student > span:last-child { min-width: 0; display: grid; gap: 2px; }
  .yiq-sidebar-student strong, .yiq-sidebar-student small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .yiq-sidebar-student strong { color: #fff; font-size: 11px; }
  .yiq-sidebar-student small { color: rgba(255, 255, 255, .42); font-size: 8px; }
  .yiq-app-main { padding: 48px 42px 76px; }
  .yiq-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yiq-module-grid-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yiq-class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yiq-supervisor { padding-right: 42px; padding-left: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .yiq-learning-root *, .yiq-learning-root *::before, .yiq-learning-root *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}