:root {
    --ui-bg: #f3efe8;
    --ui-bg-2: #e8dbc9;
    --ui-bg-3: #c9d7d2;
    --ui-paper: rgba(255, 255, 255, 0.82);
    --ui-paper-solid: #fffaf1;
    --ui-ink: #2d2a25;
    --ui-muted: #665d51;
    --ui-line: rgba(92, 83, 69, 0.16);
    --ui-primary: #2f7d46;
    --ui-primary-2: #5f8d56;
    --ui-blue: #245a96;
    --ui-orange: #b86a16;
    --ui-danger: #b94432;
    --ui-shadow: 0 18px 42px rgba(60, 52, 39, 0.12);
    --ui-radius: 14px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.ui-atmosphere {
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.68), transparent 28%),
        linear-gradient(135deg, var(--ui-bg) 0%, var(--ui-bg-2) 48%, var(--ui-bg-3) 100%) !important;
    color: var(--ui-ink);
}

.ui-feedback-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(45, 42, 37, 0.36);
}

.ui-feedback-dialog {
    width: min(420px, 100%);
    border-radius: 18px;
    background: #fffaf1;
    box-shadow: 0 24px 70px rgba(45, 42, 37, 0.28);
    border: 1px solid rgba(92, 83, 69, 0.16);
    padding: 22px;
    color: var(--ui-ink);
}

.ui-feedback-dialog h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.ui-feedback-dialog p {
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.7;
}

.ui-feedback-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.ui-feedback-actions button {
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
}

.ui-feedback-cancel {
    background: #eee5d6;
    color: #5f5143;
}

.ui-feedback-confirm {
    background: var(--ui-primary);
    color: white;
}

.ui-feedback-loading {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 3500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(45, 42, 37, 0.94);
    color: white;
    box-shadow: 0 18px 42px rgba(45, 42, 37, 0.22);
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.ui-feedback-loading.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ui-feedback-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 999px;
    animation: uiSpin 800ms linear infinite;
}

@keyframes uiSpin {
    to { transform: rotate(360deg); }
}

.ui-card {
    background: var(--ui-paper);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}

.ui-lift {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ui-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 54px rgba(60, 52, 39, 0.16);
    border-color: rgba(47, 125, 70, 0.25);
}

.ui-button {
    border-radius: 9px !important;
    border: 0;
    box-shadow: 0 10px 22px rgba(47, 125, 70, 0.14);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.ui-button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(0.98);
    box-shadow: 0 14px 28px rgba(47, 125, 70, 0.18);
}

.ui-button:focus-visible,
.ui-focus:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(47, 125, 70, 0.22);
    outline-offset: 2px;
}

.ui-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

.ui-table th {
    background: #f7f2eb !important;
    color: var(--ui-ink) !important;
}

.ui-table tbody tr {
    transition: background 160ms ease;
}

.ui-table tbody tr:hover td {
    background: #f6fbf6 !important;
}

.ui-toast {
    position: fixed;
    right: 22px;
    top: 22px;
    z-index: 3000;
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(45, 42, 37, 0.94);
    color: white;
    box-shadow: 0 18px 42px rgba(45, 42, 37, 0.28);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.ui-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.ui-toast.success {
    background: #245d36;
}

.ui-toast.error {
    background: #8f2d22;
}

.ui-toast.info {
    background: #245a96;
}

.ui-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.ui-status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* 学情分析主站：与工具窗推广页一致的白底极简风格 */
.study-home,
.study-ui {
    --study-bg: #ffffff;
    --study-soft: #fafafa;
    --study-soft-green: #f4fbf7;
    --study-ink: #111111;
    --study-muted: #626262;
    --study-light: #8a8a8a;
    --study-line: #ececec;
    --study-line-strong: #dadada;
    --study-green: #00a85a;
    --study-green-dark: #16824d;
    --study-green-soft: #e7f7ee;
    --study-red: #b94432;
    --study-red-soft: #fff1ef;
    --study-blue: #2467a7;
    --study-blue-soft: #eef6ff;
    --study-shadow: 0 16px 42px rgba(17, 17, 17, 0.07);
    background: var(--study-bg) !important;
    color: var(--study-ink) !important;
    font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif !important;
}

.study-home * ,
.study-ui * {
    box-sizing: border-box;
}

.study-home a,
.study-ui a {
    color: inherit;
    text-decoration: none;
}

.study-home {
    min-height: 100vh;
    display: grid !important;
    place-items: center;
    padding: 32px;
}

.study-home .container {
    width: min(960px, 100%);
    padding: 48px !important;
    border: 1px solid var(--study-line) !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: left !important;
}

.study-home h1 {
    margin: 0 0 34px !important;
    color: var(--study-ink) !important;
    font-size: clamp(34px, 7vw, 72px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.07em;
}

.study-home h1::after {
    content: "让课前数据、真实问题与课堂设计连接起来。";
    display: block;
    max-width: 560px;
    margin-top: 18px;
    color: var(--study-muted);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0;
}

.study-home .btn-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px !important;
}

.study-home .btn {
    min-height: 148px;
    display: flex !important;
    align-items: flex-end;
    justify-content: flex-start !important;
    padding: 22px !important;
    border: 1px solid var(--study-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    color: var(--study-ink) !important;
    box-shadow: none !important;
    font-size: 21px !important;
    font-weight: 800;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease !important;
}

.study-home .btn:hover {
    border-color: #92d9b4 !important;
    color: var(--study-green) !important;
    box-shadow: var(--study-shadow) !important;
    transform: translateY(-2px) !important;
}

.study-ui.study-login {
    min-height: 100vh;
    display: grid !important;
    place-items: center;
    padding: 28px;
}

.study-ui .login-container {
    width: min(430px, 100%) !important;
    padding: 38px !important;
    border: 1px solid var(--study-line) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: var(--study-shadow) !important;
}

.study-ui .login-container h1 {
    margin-bottom: 30px !important;
    color: var(--study-ink) !important;
    font-size: 28px !important;
    letter-spacing: -0.04em;
}

.study-ui label {
    color: var(--study-muted) !important;
    font-weight: 700;
}

.study-ui input[type="text"],
.study-ui input[type="password"],
.study-ui input[type="number"],
.study-ui input[type="file"],
.study-ui select,
.study-ui textarea,
.study-ui .short-answer {
    border: 1px solid var(--study-line-strong) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--study-ink) !important;
    box-shadow: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.study-ui input:focus,
.study-ui select:focus,
.study-ui textarea:focus,
.study-ui .short-answer:focus {
    outline: none !important;
    border-color: var(--study-green) !important;
    box-shadow: 0 0 0 4px rgba(0, 168, 90, 0.1) !important;
}

.study-ui .btn-login,
.study-ui .btn,
.study-ui button,
.study-ui .btn-enter {
    border-radius: 999px !important;
    font-weight: 800;
    box-shadow: none !important;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease !important;
}

.study-ui .btn-login,
.study-ui .btn-primary,
.study-ui .btn-green,
.study-ui .btn-enter {
    background: var(--study-green) !important;
    color: #fff !important;
    border: 1px solid var(--study-green) !important;
}

.study-ui .btn-login:hover,
.study-ui .btn-primary:hover,
.study-ui .btn-green:hover,
.study-ui .btn-enter:hover {
    background: var(--study-green-dark) !important;
    border-color: var(--study-green-dark) !important;
    transform: translateY(-1px) !important;
}

.study-ui .btn-ai {
    background: var(--study-green-soft) !important;
    color: var(--study-green-dark) !important;
    border: 1px solid #bfe7d2 !important;
}

.study-ui .btn-ai:hover {
    background: #dff3e8 !important;
    color: var(--study-green-dark) !important;
}

.study-ui .btn-danger,
.study-ui .btn-red {
    background: var(--study-red) !important;
    color: #fff !important;
    border: 1px solid var(--study-red) !important;
}

.study-ui .btn-export,
.study-ui .btn-secondary {
    background: #fff !important;
    color: var(--study-green-dark) !important;
    border: 1px solid #bfe7d2 !important;
}

.study-ui .btn:disabled,
.study-ui button:disabled,
.study-ui .btn-enter:disabled {
    background: #eeeeee !important;
    color: #9a9a9a !important;
    border-color: #eeeeee !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.study-ui .header {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--study-ink) !important;
    border-bottom: 1px solid var(--study-line);
    box-shadow: none !important;
    padding: 22px 28px !important;
}

.study-ui .header h1 {
    color: var(--study-ink) !important;
    font-size: 24px !important;
    letter-spacing: -0.04em;
}

.study-ui .header a,
.study-ui .back-link {
    color: var(--study-green-dark) !important;
    background: #fff !important;
    border: 1px solid #bfe7d2 !important;
    border-radius: 999px !important;
    font-weight: 800;
}

.study-ui .nav {
    background: #fff !important;
    color: var(--study-ink) !important;
    border-bottom: 1px solid var(--study-line);
    padding: 0 28px !important;
    justify-content: center;
    gap: 0 !important;
    box-shadow: none !important;
}

.study-ui .nav a {
    color: #333 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 18px 14px !important;
    border-bottom: 3px solid transparent;
    font-weight: 800;
}

.study-ui .nav a:hover,
.study-ui .nav a.active {
    color: var(--study-green) !important;
    background: transparent !important;
    border-bottom-color: var(--study-green);
}

.study-ui .container {
    width: min(1120px, 100%) !important;
    max-width: 1120px !important;
    margin: 30px auto 72px !important;
    padding: 0 24px !important;
}

.study-ui .card {
    border: 1px solid var(--study-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 24px !important;
}

.study-ui .card:hover {
    border-color: #e1e1e1 !important;
}

.study-ui .card h2 {
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    color: var(--study-ink) !important;
    border-bottom: 1px solid var(--study-line) !important;
    font-size: 21px !important;
    letter-spacing: -0.03em;
}

.study-ui .form-group,
.study-ui .form-row,
.study-ui .profile {
    gap: 12px !important;
}

.study-ui table {
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

.study-ui th,
.study-ui td {
    border-bottom: 1px solid var(--study-line) !important;
}

.study-ui th {
    background: var(--study-soft) !important;
    color: var(--study-muted) !important;
    font-size: 13px;
    font-weight: 800;
}

.study-ui tr:hover td {
    background: var(--study-soft-green) !important;
}

.study-ui .empty,
.study-ui .loading {
    color: var(--study-light) !important;
    background: var(--study-soft) !important;
    border: 1px dashed var(--study-line-strong);
    border-radius: 14px;
}

.study-ui .message-success,
.study-ui .logout-msg {
    background: var(--study-green-soft) !important;
    color: var(--study-green-dark) !important;
    border: 1px solid #bfe7d2 !important;
}

.study-ui .message-error,
.study-ui .error-msg {
    background: var(--study-red-soft) !important;
    color: var(--study-red) !important;
    border: 1px solid #f1c7c0 !important;
}

.study-ui .switch-msg,
.study-ui .tag-fallback {
    background: #fff8e8 !important;
    color: #8a5a00 !important;
    border: 1px solid #f0dba9 !important;
}

.study-ui .stat,
.study-ui .stats {
    gap: 14px !important;
}

.study-ui .stat-item,
.study-ui .stat,
.study-ui .info-card {
    border: 1px solid var(--study-line) !important;
    background: var(--study-soft) !important;
    border-radius: 16px !important;
}

.study-ui .stat-item .number,
.study-ui .number {
    color: var(--study-green-dark) !important;
}

.study-ui .type-badge,
.study-ui .phase-badge,
.study-ui .badge,
.study-ui .tag,
.study-ui .game-tag {
    border-radius: 999px !important;
    background: var(--study-green-soft) !important;
    color: var(--study-green-dark) !important;
    border: 1px solid #bfe7d2;
    font-weight: 800;
}

.study-ui .type-video,
.study-ui .phase-after {
    background: #fff8e8 !important;
    color: #8a5a00 !important;
    border-color: #f0dba9;
}

.study-ui .type-image,
.study-ui .tag-ai {
    background: var(--study-blue-soft) !important;
    color: var(--study-blue) !important;
    border-color: #c8dff7;
}

.study-ui .type-document,
.study-ui .badge-type {
    background: #f1f1f1 !important;
    color: #555 !important;
    border-color: #dddddd;
}

.study-ui .ai-box,
.study-ui .polish-box,
.study-ui .feedback-box,
.study-ui .game-box,
.study-ui .game-published,
.study-ui .game-preview,
.study-ui .quiz-result {
    background: var(--study-soft-green) !important;
    border: 1px solid #cbe9d8 !important;
    border-radius: 16px !important;
    color: var(--study-ink) !important;
}

.study-ui .file-upload {
    border: 1px dashed #bfe7d2 !important;
    background: var(--study-soft-green) !important;
    border-radius: 16px !important;
}

.study-ui .file-upload label {
    background: #fff !important;
    color: var(--study-green-dark) !important;
    border: 1px solid #bfe7d2;
    border-radius: 999px !important;
    font-weight: 800;
}

.study-ui.study-student .book-grid {
    gap: 14px !important;
}

.study-ui.study-student .book-item,
.study-ui.study-student .lesson-item,
.study-ui.study-student .material-item,
.study-ui.study-student .task-item,
.study-ui.study-student .quiz-item,
.study-ui .preview-item,
.study-ui .class-item,
.study-ui .game-item,
.study-ui .game-option,
.study-ui .quiz-options label {
    border: 1px solid var(--study-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.study-ui.study-student .book-item:hover,
.study-ui.study-student .lesson-item:hover,
.study-ui .game-option:hover,
.study-ui .quiz-options label:hover {
    border-color: #92d9b4 !important;
    background: var(--study-soft-green) !important;
}

.study-ui.study-student .book-item.selected,
.study-ui.study-student .lesson-item.selected,
.study-ui .game-option.selected,
.study-ui .tab-btn.active {
    border-color: var(--study-green) !important;
    background: var(--study-green) !important;
    color: #fff !important;
}

.study-ui .guide-line {
    background: linear-gradient(90deg, var(--study-green), #bfe7d2) !important;
}

.study-ui .tab-bar {
    border: 1px solid var(--study-line) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.study-ui .tab-btn {
    background: var(--study-soft) !important;
    color: var(--study-muted) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
}

.study-ui .section-note,
.study-ui .muted,
.study-ui .review-note,
.study-ui .file-info,
.study-ui .source-hint,
.study-ui .preview-item .time {
    color: var(--study-muted) !important;
}

@media (max-width: 820px) {
    .study-home {
        padding: 18px;
    }

    .study-home .container {
        padding: 30px 22px !important;
    }

    .study-home .btn-group {
        grid-template-columns: 1fr;
    }

    .study-home .btn {
        min-height: 96px;
    }

    .study-ui .header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 14px;
    }

    .study-ui .nav {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding: 0 18px !important;
    }

    .study-ui .nav a {
        white-space: nowrap;
    }

    .study-ui .container {
        margin-top: 22px !important;
        padding: 0 16px !important;
    }

    .study-ui .card {
        padding: 18px !important;
    }

    .study-ui .form-group,
    .study-ui .form-row,
    .study-ui .profile,
    .study-ui .question-actions,
    .study-ui .game-actions,
    .study-ui .actions {
        flex-direction: column;
        align-items: stretch !important;
    }

    .study-ui table {
        min-width: 720px;
    }

    .study-ui .card:has(table) {
        overflow-x: auto;
    }
}