:root { --px-blue: #4a8ee0; --px-purple: #8b6dd4; --px-bg-start: #CCE2FF; --px-bg-end: #E7D4F5; --px-primary: #99b0ec; --px-text: #3a4670; --px-dark: #2c2c2c; --px-muted: #6470a0; --px-light: #9daac6; --px-card: rgba(255, 255, 255, .72); --px-card-border: rgba(255, 255, 255, .86); --px-shadow-card: 0 28px 70px rgba(88, 120, 210, .50); --gradient-purple: #999dfd; --gradient-purple-rgb: rgb(153, 157, 253); --gradient-purple-rgba: rgb(153, 157, 253, 1); --gradient-purple-rgba-4: rgb(153, 157, 253, .4); --gradient-purple-1: #8e8bf5; --gradient-purple-1-rgba-4: rgb(142, 139, 245, .4); --gradient-purple-1-rgba-2: rgb(142, 139, 245, .2); --gradient-purple-1-rgba-1: rgb(142, 139, 245, .1); --gradient-blue: #80e2ff; --gradient-blue-rgba: rgba(128, 226, 255, 1); --gradient-blue-rgba-4: rgba(128, 226, 255, .4); --gradient-blue-1: #5ed7fe; --gradient-blue-1-rgba: rgba(94, 215, 254, 1); --gradient-blue-1-rgba-4: rgba(94, 215, 254, .4); --gradient-blue-1-rgba-2: rgba(94, 215, 254, .2); --blue: #0072ff; --blue-rgba-4: rgba(0, 114, 255, .4); --blue-rgba-2: rgba(0, 114, 255, .2); --gradient-pink: #ffb7f6; --gradient-pink-rgba: rgba(255, 183, 246, 1); --gradient-pink-rgba-4: rgba(255, 183, 246, .4); --gradient-pink-1: #ff93f2; --gradient-pink-1-rgba: rgba(255, 147, 242, 1); --gradient-pink-1-rgba-4: rgba(255, 147, 242, .4); --gradient-pink-1-rgba-2: rgba(255, 147, 242, .2); --pink: #ff56ea; --pink-rgba-1: rgba(255, 86, 234, .1); --pink-1: #ff92f2; --border-width: .3rem; --gradient-blue2-rgba: rgba(137, 148, 253, 1); --gradient-pink2-rgba: rgba(128, 193, 254, 1); --gradient-purple-rgba: rgba(180, 156, 251, 1); } /* 项目渐变色 淡 */ .px-soft-bg { background: linear-gradient(135deg, #f6f4fb 0%, #e9f5fb 100%) } /* 项目主要按钮 */ .px-btn {border: 0; border-radius: 6px; background: linear-gradient(135deg, var(--px-primary), #92a4ff); color: #fff !important;} .px-btn:hover:not(:disabled) { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(136, 167, 247, .42); } .px-btn:disabled { opacity: .72; } .px-btn-dark { font-size: 14px; border: 0; border-radius: 8px; color: #fff !important; background: linear-gradient(135deg, #4a4f5c, #2f3440); box-shadow: 0 4px 14px rgba(47, 52, 64, .28); } .px-btn-dark:hover:not(:disabled) { color: #fff !important; background: linear-gradient(135deg, #565c6b, #3a404d); transform: translateY(-1px); } .px-btn-dark:disabled { opacity: .65; } .px-btn-soft { font-size: 14px; border-radius: 8px; border: 1px solid rgba(224, 230, 242, .85); color: var(--px-muted); background: rgba(245, 247, 252, .92); transition: border-color .15s ease, color .15s ease, background .15s ease; } .px-btn-soft:hover:not(:disabled) { border-color: rgba(153, 176, 236, .5); color: var(--px-text); background: rgba(236, 241, 252, .96); } .px-btn-soft:disabled, .px-btn-soft.disabled { color: var(--px-light); background: rgba(248, 249, 252, .88); border-color: rgba(232, 236, 244, .75); opacity: 1; cursor: not-allowed; } .px-btn-white { font-size: 14px; border-radius: 8px; border: 1px solid #d8dde8; color: #3a4258; background: #fff; transition: border-color .15s ease, color .15s ease, background .15s ease; } .px-btn-white:hover:not(:disabled) { border-color: #aab4cc; color: #2c3344; background: #fafbfd; } .px-btn-white:disabled, .px-btn-white.disabled { color: var(--px-light); background: #fff; border-color: #eceff5; opacity: 1; cursor: not-allowed; } /* 双按钮行*/ .px-btn-pair {display: flex;gap: 12px;margin-top: 20px;} .px-btn-pair .btn {flex: 1;} /*bootstrap样式覆盖*/ .btn {padding: 0.275rem 0.75rem} .form-select {font-size: 14px !important;} tbody, td, tfoot, th, thead, tr { font-size: 12px;} .btn.disabled, .btn:disabled, fieldset:disabled .btn {border-color: rgba(232, 236, 244, .75) !important;} .border-primary { border-color:#6F8FF1 !important;} .form-check-input:checked { background-color: #6F8FF1 !important; border-color: #6F8FF1 !important;} /* 标题区域 */ .title-wrap { height: 48px; font-size: 16px; color: #40528e; margin-bottom: 12px; border-radius: 8px; padding: 10px 20px; background: linear-gradient(135deg, #ebe8f7 0%, #d8edf8 100%);} @media (max-width: 768px) { .title-wrap {height: auto; min-height: 48px; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px;} .title-wrap:has(> .d-flex) {align-items: center;} .title-wrap:has(> .d-flex) > span {flex: 1 1 auto; min-width: 0; width: auto; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .title-wrap:has(> .d-flex) > .d-flex {flex: 0 1 auto; width: auto; justify-content: flex-end; gap: 8px; flex-wrap: wrap;} .title-wrap > .d-flex .btn {white-space: nowrap; margin: 0;} .title-wrap:not(:has(> .d-flex)) > span {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .title-wrap:not(:has(> .d-flex)) > a.btn, .title-wrap:not(:has(> .d-flex)) > button.btn {flex-shrink: 0;} } /* ---------- 功能区域 ---------- */ .form-select:focus {font-size: 12px;} #uploadForm .form-control {font-size: 0.8rem;} /* 上传图片尺寸 */ .upload_img {max-width: 300px; margin-top: 10px; border-radius: 10px;} .px-btn-pick { font-size: 14px; border-radius: 8px; border: 1px solid rgba(61, 143, 92, .32); color: #2d8f52; background: linear-gradient(135deg, #eefaf3, #dff5e8); transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; } .px-btn-pick:hover:not(:disabled) { border-color: rgba(48, 180, 91, .45); color: #248a47; background: linear-gradient(135deg, #e4f7ec, #d0f0dc); box-shadow: 0 4px 12px rgba(48, 180, 91, .18); } .btn.px-btn-pick.btn-sm { font-size: 12px; padding: 0.14rem 0.48rem; border-radius: 6px; } .btn.px-btn-pick.btn-sm .iconfont { font-size: 12px; } .px-upload-file-chip {display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 8px; background: linear-gradient(135deg, #e8f8ee, #d4f0dc); border: 1px solid rgba(61, 143, 92, .18);} .px-hw-attach-list {display: flex; flex-direction: column; gap: 4px;} .px-hw-attach-row .px-upload-file-chip {max-width: 100%;} .px-hw-editor-toggle-icon {display: inline-block; font-size: 12px; color: var(--px-muted, #6470a0); transition: transform .22s ease;} .js-hw-toggle-editor[aria-expanded="true"] .px-hw-editor-toggle-icon {transform: rotate(180deg);} .px-hw-material-body {line-height: 1.7; word-break: break-word;} .px-hw-material-body img {max-width: 100%; height: auto;} .wrap_content { padding: 20px; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, .1); border: 1px solid #e5e5e5;} .search_wrap { border-radius: 10px; border: 1px solid #e5e5e5; background: #f3f3f3; padding: 6px 12px;} .px-search-btn { background: #fff; border-color: #ced4da; color: #6c757d; font-size: 13px; border-radius: 6px; white-space: nowrap; } .px-search-btn:hover { background: #f8f9fa; border-color: #adb5bd; color: #495057; } @media (max-width: 575.98px) { .js-learn-search-keyword { max-width: 140px; } .search_wrap .form-select { max-width: 100px !important; } } /* 信息div表格 */ .list-grid {--cols: 72px minmax(200px, 2fr) minmax(110px, 1fr) minmax(150px, 1fr) 100px 130px;margin-top: 10px;} .list-head, .list-row {display: grid;grid-template-columns: var(--cols);align-items: center;column-gap: 12px;padding: 10px 14px;} .list-head {font-size: 12px; font-weight: 400; color: var(--px-light);border-bottom: 1px solid rgba(180, 200, 235, 0.45);} .list-body .list-row {border-bottom: 1px solid rgba(200, 212, 235, 0.55);transition: background 0.18s;} .list-body .list-row:hover {background: rgba(232, 238, 255, 0.28);} .list-body .list-row:last-child {border-bottom: none;} .cell {min-width: 0;font-size: 13px;color: #97a0b3;} .cell-id {display: inline-flex;align-items: center;justify-content: center;width: 32px;height: 32px;border-radius: 8px;background: linear-gradient(135deg, #e8eeff, #ddf1fb);font-size: 12px;font-weight: 600;color: var(--px-muted);} .cell-title {font-size: 14px; color: var(--px-text);line-height: 1.5;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .cell-sub {font-size: 12px;color: var(--px-muted);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .token-cell-main {min-width: 0;max-width: 180px;} .token-cell-main .cell-title {font-size: 13px;line-height: 1.35;} .token-cell-main .cell-sub {margin-top: 2px;line-height: 1.3;} .cell-pill {display: inline-block;max-width: 100%;} .cell-pair {display: flex;gap: 10px;font-size: 12px;color:#717c94;} .cell-pair strong {color: var(--px-muted);font-weight: 600;} .cell-actions {display: flex;gap: 6px;} /* 信息列表（下方纯文字） */ .px-list { display: grid; gap: 16px; } .px-list-item { padding: 16px 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(244, 248, 255, .88)); border-bottom: 1px solid #ececec } .px-list-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .px-list-main { flex: 1 1 620px; min-width: 0; } .px-list-text { min-width: 0; } .px-list-title { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--px-text); } .px-list-meta { margin-top: 6px; display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; font-size: 13px; color: var(--px-muted); } .px-list-meta-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .px-list-meta-label { color: var(--px-light); white-space: nowrap; } .px-list-meta-value { color: var(--px-muted); white-space: nowrap; } .px-list-meta-year { color: #b56d22; font-weight: 600; } .px-list-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .px-list-status-text { font-size: 12px; color: var(--px-muted); } .px-list-status-text.status-0 { color: #b57b24; } .px-list-status-text.status-1 { color: #34639c; } .px-list-status-text.status-2 { color: #6f7994; } .px-list-rich { gap: 12px; } .px-list-rich .px-list-item { padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 248, 255, .9)); box-shadow: 0 4px 18px rgba(100, 120, 200, .06); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .px-list-rich .px-list-item:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(100, 120, 200, .12); border-color: rgba(136, 167, 247, .35); } .px-list-rich .px-list-top { align-items: center; } .px-list-leading { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; font-size: 22px; } .px-list-leading.tone-blue { background: linear-gradient(135deg, #e8eeff, #d4e8fb); color: #4a6aad; } .px-list-leading.tone-violet { background: linear-gradient(135deg, #f0e8ff, #e4d4f8); color: #6848a8; } .px-list-id { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--px-light); } .px-list-meta-chips { margin-top: 10px; gap: 8px; } .px-meta-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.3; border: 1px solid transparent; } .px-meta-chip .iconfont { font-size: 14px; opacity: .88; } .px-meta-chip-label { font-weight: 500; opacity: .78; } .px-meta-chip-value { font-weight: 600; } .px-meta-chip.tone-amber { background: linear-gradient(135deg, rgba(255, 243, 220, .96), rgba(255, 230, 190, .9)); border-color: rgba(230, 180, 100, .28); color: #a06820; } .px-meta-chip.tone-green { background: linear-gradient(135deg, rgba(232, 248, 238, .96), rgba(212, 240, 220, .9)); border-color: rgba(100, 180, 130, .24); color: #2f7a52; } .px-meta-chip.tone-violet { background: linear-gradient(135deg, rgba(240, 232, 255, .96), rgba(228, 212, 248, .9)); border-color: rgba(150, 120, 200, .24); color: #6848a8; } .px-meta-chip.tone-blue { background: linear-gradient(135deg, rgba(232, 238, 255, .96), rgba(212, 232, 251, .9)); border-color: rgba(100, 140, 210, .24); color: #3d5f9c; } .px-list-rich .px-list-actions .btn .iconfont { margin-right: 4px; font-size: 14px; } .px-empty-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(232, 238, 255, .95), rgba(228, 212, 248, .88)); color: #6848a8; } .px-empty-icon .iconfont { font-size: 30px; opacity: .82; } /* 页面内 Tab（全长普通底线，激活高亮段与之垂直居中） */ .px-nav-tabs { position: relative; border-bottom: 0; gap: 2px; --px-nav-tab-line: rgba(100, 112, 160, .2); } .px-nav-tabs::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--px-nav-tab-line); pointer-events: none; } .px-nav-tabs .nav-item { margin-bottom: 0; } .px-nav-tabs .nav-link { position: relative; z-index: 1; border: 0; border-radius: 0; margin-bottom: 0; padding: 12px 22px 14px; color: var(--px-light); font-size: 15px; font-weight: 500; background: transparent; transition: color .2s ease; } .px-nav-tabs .nav-link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px; background: transparent; transition: background .2s ease, box-shadow .2s ease; } .px-nav-tabs .nav-link:hover { color: var(--px-muted); border-color: transparent; isolation: isolate; } .px-nav-tabs .nav-link.active { color: var(--px-text); font-weight: 600; background: transparent; border-color: transparent; } .px-nav-tabs .nav-link.active::after { background: linear-gradient(90deg, var(--px-primary), #beaefa); box-shadow: 0 2px 10px rgba(153, 157, 253, .42); } @media (max-width: 640px) { .list-grid {margin-top: 8px; border-bottom: 1px solid #ececec} .list-head {display: none;} .list-row {grid-template-columns:1fr;gap: 6px;padding: 12px 10px;background: rgba(255, 255, 255, .84);} .cell {display: flex;gap: 6px;font-size: 12px;line-height: 1.45;} .cell::before {content: attr(data-title);flex: 0 0 56px;color: var(--px-light);} .cell-id-wrap::before, .cell-actions::before {display: none;} .cell-main {display: block;} .cell-main::before {content: attr(data-title);display: none;margin-bottom: 2px;color: var(--px-light);} .cell-title, .cell-sub {white-space: normal;overflow: visible;text-overflow: clip;} .cell-title {font-size: 14px;} .cell-pair {flex-wrap: wrap;} .cell-actions {flex-wrap: wrap;} .cell-actions .btn {min-width: 60px;font-size: 14px;} } .sort-list { display: flex; flex-direction: column; gap: 12px;} .sort-handle { cursor: grab;} .sort-handle:active { cursor: grabbing;} /* 内容区域 */ .news_content {width: 100%;margin: 0 auto 20px auto; overflow: hidden;font-size: 18px;line-height: 32px; padding-top: 10px;} .news_content p {margin: 10px 0;font-size: 14px; line-height: 32px; } .news_content p > img {display: block; text-align: center; max-width: 800px; margin: 20px auto; border-radius: 6px;} .news_content td > p { text-indent: 0; font-size: 14px; line-height: 30px; margin-bottom: 10px;} .news_content br { margin-bottom: 20px} .news_content > table { border-collapse: collapse !important; width: 100% !important;border-radius: 5px !important; } .news_content > table, .news_content > th, .news_content > td { border: 1px solid #CCCCCC !important; padding: 2px 5px !important; font-size: 16px; line-height: 28px !important; } .news_content > table thead th { background: #D5E3F4 !important; } .news_content > table tr:nth-of-type(1) { background: #D5E3F4 !important;} .news_content > table tr:nth-of-type(1) td {white-space: nowrap;} .news_content > video {width: 100%; max-width: 100%; height: auto;} .news_content > video.vertical {width: 50%; max-width: 50%; display: block; margin: 0 auto;} /* 成功与失败弹窗 */ .px-modal .modal-content { border: 1px solid rgba(220, 228, 240, .75); border-radius: 22px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); box-shadow: 0 24px 72px rgba(80, 100, 180, .14), inset 0 1px 0 rgba(255, 255, 255, .98); } .px-modal-icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid #8aacde; display: flex; align-items: center; justify-content: center; color: #8aacde; font-size: 26px; margin: 0 auto 16px; } .px-modal-icon .iconfont { font-size: 22px; } .px-modal-icon.success { border-color: #34c074; color: #34c074; } .px-modal-icon.error { border-color: #e8504a; color: #e8504a; } .px-modal-icon.warning { border-color: #f5a623; color: #f5a623; } .px-modal-title { font-size: 14px; font-weight: 600; color: #1a1a2e; margin-bottom: 6px; line-height: 1.5; } .px-modal-text { font-size: 14px; color: #555; margin-bottom: 4px; line-height: 1.6; } .px-modal-countdown { font-size: 12px; color: #999; margin-top: 2px; margin-bottom: 2px; } .px-modal-ok { font-weight: 400 !important; font-size: 14px !important; letter-spacing: .02em; padding: 7px 30px !important; border-radius: 20px !important; margin-top: 14px; } .px-reset-pwd-result { font-size: 14px; color: var(--px-text, #3a4670); line-height: 1.6; } .px-reset-pwd-plain { font-size: 1.125em; font-weight: 700; color: #198754; } .modal-backdrop { -webkit-backdrop-filter: blur(3px) saturate(1.5); backdrop-filter: blur(3px) saturate(1.5); background-color: rgba(80, 100, 180, .28) !important; opacity: 1 !important; } #pxConfirmModal { --bs-modal-zindex: 2110; } .px-toast-layer { position: fixed; inset: 0; z-index: 2080; display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .px-toast-layer.show { opacity: 1; visibility: visible; } .px-toast-card { position: relative; min-width: 200px; max-width: min(360px, 86vw); padding: 18px 28px 16px; text-align: center; color: var(--px-text, #3a4670); font-size: 15px; font-weight: 500; line-height: 1.5; background: #fff; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(80, 100, 180, .28), 0 4px 14px rgba(80, 100, 180, .12); transform: translateY(8px) scale(.94); transition: transform .26s cubic-bezier(.22, 1, .36, 1); } .px-toast-layer.show .px-toast-card { transform: translateY(0) scale(1); } .px-toast-card::before { content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: 16px; background: linear-gradient(135deg, rgba(136, 167, 247, .85), rgba(190, 174, 250, .85)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .px-toast-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; font-size: 16px; line-height: 1; color: #88A7F7; background: linear-gradient(135deg, rgba(204, 226, 255, .85), rgba(231, 212, 245, .85)); box-shadow: inset 0 0 0 1.5px rgba(136, 167, 247, .35); } .px-toast-card-icon .iconfont { font-size: 16px; line-height: 1; } .px-toast-card-text { color: var(--px-text, #3a4670); font-size: 15px; font-weight: 500; letter-spacing: .02em; } .px-toast-card.is-success::before { background: linear-gradient(135deg, rgba(52, 192, 116, .85), rgba(126, 217, 167, .85)); } .px-toast-card.is-success .px-toast-card-icon { color: #2faa5f; background: linear-gradient(135deg, rgba(214, 245, 227, .95), rgba(228, 250, 235, .95)); box-shadow: inset 0 0 0 1.5px rgba(52, 192, 116, .35); } .px-toast-card.is-error::before { background: linear-gradient(135deg, rgba(232, 80, 74, .9), rgba(244, 137, 132, .9)); } .px-toast-card.is-error .px-toast-card-icon { color: #d83a35; background: linear-gradient(135deg, rgba(253, 232, 232, .95), rgba(254, 240, 240, .95)); box-shadow: inset 0 0 0 1.5px rgba(232, 80, 74, .35); } .px-toast-card.is-warning::before { background: linear-gradient(135deg, rgba(245, 166, 35, .9), rgba(252, 200, 80, .9)); } .px-toast-card.is-warning .px-toast-card-icon { color: #d68a0a; background: linear-gradient(135deg, rgba(255, 246, 220, .95), rgba(255, 251, 230, .95)); box-shadow: inset 0 0 0 1.5px rgba(245, 166, 35, .35); } .token-error-popover { max-width: min(420px, 90vw); } .token-error-popover .popover-body { white-space: pre-wrap; word-break: break-word; color: var(--px-text, #3a4670); } .token-status-fail { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } /* ---------- 通用内容容器（页面主体白色卡片）---------- */ .content-wrap { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(229, 236, 248, .85); box-shadow: 0 8px 28px rgba(120, 140, 200, .08); margin-top: 10px; } .content-wrap-white { background: #fff;} .filter-bar { padding: 12px 14px; background: #f6f9ff; border: 1px solid #e7eefb; border-radius: 10px; margin-bottom: 14px; } .empty-state { padding: 60px 0; text-align: center; color: #8893b8; } .empty-state .iconfont { font-size: 42px; opacity: .4; margin-bottom: 10px; } /* ---------- 通用卡片组件 ---------- */ .card { border-radius: 8px; overflow: hidden; box-shadow: 0 6px 20px rgba(120, 140, 200, .18);} .card-cover { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #e8edfa; } .card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 1.4; margin-bottom: 10px; } .card-mark { margin-top: 4px; font-size: 12px; color: #c08a3a; } .card-desc { font-size: 12px; color: var(--px-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; margin-bottom: 12px; } .card-cover-badge { font-size: 11px; color: var(--px-text) !important; background: rgba(255, 255, 255, .88) !important; border: 1px solid rgba(255, 255, 255, .95) !important; backdrop-filter: blur(8px); } .card-empty { padding: 60px 0; text-align: center; color: #8893b8; } .card-empty .iconfont { font-size: 48px; opacity: .4; display: block; margin-bottom: 8px; } /*课程表单*/ .course-form .form-label { font-weight: 600; color: #40528e; } .course-form .required::before { content: '*'; color: #e8504a; margin-right: 4px; } .course-form .form-control, .course-form .form-select { border-radius: 8px; } .form-control::placeholder, .form-select::placeholder, .course-form .form-control::placeholder, .course-form .form-select::placeholder, .course-form textarea::placeholder, .search_wrap .form-control::placeholder {color: var(--px-light); opacity: 1;} .teacher-checkbox-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; background: #f8faff; border: 1px solid #e5ecf8; border-radius: 8px; max-height: 220px; overflow-y: auto; } .teacher-checkbox-list label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #fff; border: 1px solid #dfe5f4; border-radius: 20px; cursor: pointer; font-size: 13px; color: #40528e; } .teacher-checkbox-list input[type=checkbox]:checked + span { color: var(--px-primary); font-weight: 600; } .teacher-checkbox-list .empty-tip { color: #8893b8; font-size: 13px; padding: 6px; } .teacher-checkbox-list label.is-disabled { opacity: .58; cursor: not-allowed; background: #eef1f8; border-color: #e2e8f4; color: #9daac6; } .teacher-checkbox-list label.is-disabled input[type=checkbox] { pointer-events: none; } .px-publish-class-panel {padding: 12px 14px; border-radius: 10px; background: rgba(248, 250, 255, .92); border: 1px solid rgba(226, 235, 248, .95);} .px-search-select { position: relative; min-width: 160px; } .px-search-select-toggle { display: block; width: 100%; text-align: left; cursor: pointer; background-color: #fff; border: 1px solid #ced4da; border-radius: var(--bs-border-radius-sm, 0.25rem); padding: 0.25rem 2rem 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--bs-body-color, #212529); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 16px 12px; } .px-search-select-toggle:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.2rem rgba(136, 167, 247, .25); } .px-search-select-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1050; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; box-shadow: 0 8px 24px rgba(80, 100, 180, .12); overflow: hidden; } .px-search-select.open .px-search-select-menu { display: block; } .px-search-select-search { padding: 8px; border-bottom: 1px solid #eef2fb; } .px-search-select-search .form-control { border-radius: 6px; } .px-search-select-list { max-height: 220px; overflow-y: auto; padding: 4px 0; } .px-search-select-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 12px; font-size: 13px; color: var(--px-text, #3a4670); cursor: pointer; } .px-search-select-item:hover, .px-search-select-item.active { background: #f3f7ff; color: var(--blue, #88A7F7); } .px-search-select-empty { display: none; padding: 10px 12px; font-size: 12px; color: #8893b8; text-align: center; } .px-search-select-form .px-search-select { max-width: 420px; } .course-sort-list { display: grid; gap: 10px; } .course-sort-item { display: grid; grid-template-columns: 56px 1fr 120px 120px; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #e7eefb; border-radius: 8px; background: #fff; } .course-sort-handle { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #40528e; background: #f3f7ff; } .chapter-table-title { min-width: 240px; } .px-sort-dd .dd-list { display: grid; gap: 10px; } .px-sort-dd .dd-item { line-height: normal; } .px-sort-dd .dd-handle { height: auto; margin: 0; padding: 0; border: 0; background: transparent; } .px-sort-dd .dd-handle:hover { background: transparent; } .px-sort-dd .course-sort-item { cursor: move; box-shadow: 0 6px 20px rgba(120, 140, 200, .08); } .px-sort-dd .dd-placeholder { min-height: 64px; border: 1px dashed rgba(136, 167, 247, .7); border-radius: 8px; background: rgba(204, 226, 255, .24); } .px-sort-dd .dd-dragel > .dd-item > .dd-handle { box-shadow: 0 16px 32px rgba(80, 100, 180, .18); } /* 上传图预览 */ .upload_img { max-width: 100%; border-radius: 8px; border: 1px solid #eef2fb; padding: 4px; background: #fff; } /* --------------------屏幕兼容-------------------*/ /* 手机端 */ @media (max-width: 768px) { .content-wrap { padding: 0; border: 0; background-color: unset !important; box-shadow: none; } .news_content > video.vertical {width: 65%; max-width: 65%;} .px-list-item { padding: 18px 16px; } .px-list-top { align-items: flex-start; } .px-list-title { font-size: 16px; } .px-list-meta { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; } .px-list-meta-item { width: 100%; } .px-list-meta-value { white-space: normal; } .px-list-actions { width: 100%; justify-content: flex-start; } .px-list-rich .px-list-top { align-items: flex-start; } .px-list-leading { width: 40px; height: 40px; font-size: 19px; border-radius: 10px; } .px-list-meta-chips { gap: 6px; } } /* --------------------教师首页横幅-------------------*/ .teacher-index-banner { width: 90%; margin: 0 auto 22px auto; animation: pxFadeUp .5s ease both .04s; } .teacher-index-banner img { display: block; width: 100%; border-radius: 10px; } .pagination {margin-bottom: 0; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap;} .pagination li {margin: 0;} .pagination li a:link, .pagination li a:visited {min-width: 38px; padding: .45rem .75rem; text-align: center; border: 1px solid rgba(136, 167, 247, .28); border-radius: 10px; color: var(--px-text, #3a4670); background: rgba(255, 255, 255, .72); box-shadow: 0 1px 2px rgba(58, 70, 112, .06); transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;} .pagination li a:hover {box-shadow: 0 3px 10px rgba(88, 139, 235, .25); background: #ebe8f7!important;} .pagination .active {padding: 0 !important; background: transparent !important; color: var(--px-text, #3a4670) !important;} .pagination .active span {display: block; min-width: 38px; padding: .45rem .75rem !important; text-align: center; color: var(--px-text, #3a4670) !important; font-weight: 600; background: linear-gradient(135deg, #ebe8f7 0%, #d8edf8 100%) !important; border: 1px solid rgba(136, 167, 247, .38); border-radius: 10px; box-shadow: 0 2px 10px rgba(136, 167, 247, .18);} .pagination .disabled span {min-width: 38px; padding: .45rem .75rem !important; text-align: center; border: 1px solid rgba(136, 167, 247, .2); border-radius: 10px;} @media (max-width: 576px) { .pagination li a:link, .pagination li a:visited, .pagination .active span, .pagination .disabled span {min-width: 34px; padding: .4rem .55rem !important; font-size: 13px;} } .profile-avatar-wrap {display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px dashed rgba(180, 190, 210, .65); border-radius: 10px; background: rgba(248, 249, 252, .92);} .profile-avatar-preview {flex-shrink: 0;} .profile-avatar-img {width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(80, 100, 180, .15);} .profile-avatar-text {width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #88A7F7, #b89af5); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(80, 100, 180, .15);} .profile-avatar-actions {display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; min-width: 0;} .profile-avatar-pill {display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 148px; padding: 6px 16px; border: 1px solid rgba(190, 198, 218, .85); border-radius: 999px; background: #fff; color: #8a94ad; font-size: 13px; line-height: 1.4; cursor: pointer; transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;} button.profile-avatar-pill {font-family: inherit; font-weight: 400; outline: none;} button.profile-avatar-pill:focus-visible {box-shadow: 0 0 0 2px rgba(136, 167, 247, .28);} .profile-avatar-pill .iconfont {font-size: 14px; color: #9aa3b8;} .profile-avatar-pill:hover {border-color: rgba(136, 167, 247, .55); color: #6b7a9e; box-shadow: 0 2px 8px rgba(136, 167, 247, .12);} .profile-avatar-pill:hover .iconfont {color: #88A7F7;} .profile-avatar-wrap .profile-crop-tip {color: var(--px-light);} .profile-crop-box {width: 100%; max-width: 360px; min-height: 320px; margin: 0 auto;} .profile-crop-box .croppie-container {width: 100%;} .profile-crop-box .croppie-container .cr-boundary {margin: 0 auto;} .profile-crop-box .croppie-container .cr-overlay {cursor: grab;} .profile-crop-box .croppie-container .cr-overlay:active {cursor: grabbing;} .profile-crop-box .croppie-container .cr-viewport.cr-vp-circle {pointer-events: none; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);} .profile-crop-box .croppie-container .cr-slider-wrap {width: 88%; max-width: 300px; margin-top: 12px;} .profile-crop-tip {font-size: 12px; color: var(--px-light);} /* 课程首页（教师/学员通用） */ .course-home {padding-top: 4px;} .course-img-preview-thumb {display: block; width: 100%; max-width: 320px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px;} .course-img-preview-banner {display: block; width: 100%; max-width: 640px; aspect-ratio: 6 / 1; object-fit: cover; border-radius: 8px;} .course-home-banner-preview {width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 0;} .course-edit-home-style {max-width: 720px; padding: 12px 14px; border-radius: 10px; background: rgba(248, 250, 255, .65); border: 1px solid rgba(200, 212, 235, .4);} .course-edit-home-style-label {min-width: 96px;} .course-crop-box {width: 100%; max-width: 620px; min-height: 240px; margin: 0 auto;} .course-crop-box .croppie-container {width: 100%;} .course-crop-box .croppie-container .cr-boundary {margin: 0 auto;} .course-crop-box .croppie-container .cr-overlay {cursor: grab;} .course-crop-box .croppie-container .cr-overlay:active {cursor: grabbing;} .course-crop-box .croppie-container .cr-viewport {pointer-events: none; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);} .course-crop-box .croppie-container .cr-slider-wrap {width: 88%; max-width: 420px; margin-top: 12px;} .course-home-banner {position: relative; width: 80%; aspect-ratio: 6 / 1; min-height: fit-content; margin: 0 auto; margin-bottom: 16px; padding: clamp(14px, 2.5vw, 28px); border-radius: 16px; overflow: hidden; display: flex; align-items: center; background: linear-gradient(120deg, #9ec5ff 0%, #b8a8f5 48%, #d4c4f8 100%); background-size: cover; background-position: center; container-type: inline-size; container-name: course-banner;} .course-home-banner.has-image::before {content: ""; position: absolute; inset: 0; z-index: 1;} .course-home-banner-deco {position: absolute; right: 6%; top: 50%; transform: translateY(-50%); z-index: 0; width: clamp(80px, 28cqi, 180px); height: clamp(80px, 28cqi, 180px); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .55); font-size: clamp(64px, 22cqi, 140px); line-height: 1; pointer-events: none;} .course-home-banner.has-image .course-home-banner-deco {opacity: .35;} .course-home-banner-card {position: relative; z-index: 2; width: min(620px, 100%); max-width: 100%; padding: clamp(10px, 2.2cqi, 22px) clamp(12px, 2.5cqi, 24px); border-radius: clamp(10px, 1.5cqi, 14px); background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .32); box-shadow: 0 12px 36px rgba(88, 120, 200, .14);} .course-home-title {margin: 0 0 clamp(6px, 1.2cqi, 12px); font-size: clamp(16px, 4.2cqi, 26px); font-weight: 700; color: var(--px-dark, #2c2c2c); line-height: 1.35;} .course-home-meta {display: flex; flex-wrap: wrap; gap: 14px 20px; margin-bottom: 16px; font-size: 13px; color: var(--px-muted);} .course-home-meta--below {width: 80%; margin: -4px auto 12px; padding: 0 2px;} .course-home-meta-item {display: inline-flex; align-items: center; gap: 6px;} .course-home-meta-item .iconfont {font-size: 15px; color: var(--px-primary);} .course-home-stats {display: flex; flex-wrap: wrap; gap: 10px;} .course-home-stat {display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; padding: clamp(6px, 1.2cqi, 10px) clamp(8px, 1.5cqi, 14px); border-radius: clamp(8px, 1.2cqi, 10px); text-align: center; white-space: nowrap; background: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(100, 120, 200, .08);} .course-home-stat-num {font-size: clamp(14px, 3.2cqi, 20px); font-weight: 700; color: var(--px-dark); line-height: 1;} .course-home-stat-label {font-size: clamp(10px, 1.8cqi, 12px); color: var(--px-dark); line-height: 1;} .course-home-stat-suffix {font-size: clamp(10px, 1.8cqi, 12px); color: var(--px-dark); line-height: 1; margin-left: 4px;} .course-home-nav {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .82); border: 1px solid #ececec; box-shadow: 3px 8px 24px rgba(100, 120, 200, .1);} .course-home-nav-item {display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 14px; color: var(--px-muted); text-decoration: none; transition: color .2s ease, background .2s ease, box-shadow .2s ease;} .course-home-nav-item .iconfont {font-size: 16px;} .course-home-nav-item:hover {color: var(--px-text); background: rgba(232, 238, 255, .65);} .course-home-nav-item.is-active {color: #fff; background: linear-gradient(120deg, #9ec5ff 0%, #b8a8f5 48%, #d4c4f8 100%); } .course-home-nav-item.is-disabled {color: var(--px-light); background: rgba(255, 255, 255, .42); cursor: not-allowed; box-shadow: none; opacity: .78;} .course-home-nav-item.is-disabled:hover {color: var(--px-light); background: rgba(255, 255, 255, .42); box-shadow: none;} .course-home-panel {height: 100%; border-radius: 14px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 10px 28px rgba(100, 120, 200, .1);} .course-home-panel-head {display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgba(136, 167, 247, .16); font-size: 15px; font-weight: 700; color: var(--px-text);} .course-home-panel-head .iconfont {font-size: 18px; color: #6a92f0;} .course-home-panel-body {padding: 16px 18px 18px;} .course-home-intro {font-size: 14px; line-height: 1.75; color: var(--px-text); white-space: pre-wrap; word-break: break-word;} .course-home-chapters {margin: 0; padding: 0; list-style: none;} .course-home-chapters li + li {margin-top: 8px;} .course-home-chapter-link {display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--px-text); background: rgba(248, 250, 255, .9); border: 1px solid rgba(200, 212, 235, .45); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;} .course-home-chapter-link:hover {border-color: rgba(136, 167, 247, .45); background: rgba(232, 238, 255, .75); box-shadow: 0 4px 12px rgba(136, 167, 247, .12);} .course-home-chapter-no {flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; color: #5a7fd6; background: linear-gradient(135deg, #e8eeff, #ddf1fb);} .course-home-chapter-title {flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .px-master-progress-card.px-progress-card {padding: 10px 12px; border-radius: 12px;} .px-master-progress-layout {display: flex; align-items: center; gap: 12px; min-width: 0;} .px-master-progress-main {display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-right: 12px; border-right: 1px solid rgba(136, 167, 247, .16);} .px-master-main-ring {position: relative; width: 48px; height: 48px; flex-shrink: 0;} .px-master-main-ring-svg {position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible;} .px-master-main-ring-track {fill: none; stroke: rgba(157, 170, 198, .22); stroke-width: 4;} .px-master-main-ring-fill {fill: none; stroke: url(#pxMasterRingGrad); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 144.51; stroke-dashoffset: calc(144.51 * (1 - var(--ring-pct, 0) / 100)); transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1);} .px-master-main-ring-pct {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--px-text); font-variant-numeric: tabular-nums; pointer-events: none; line-height: 1;} .px-master-main-info {min-width: 0;} .px-master-main-title {font-size: 12px; font-weight: 700; color: var(--px-text); line-height: 1.2; white-space: nowrap;} .px-master-main-meta {margin-top: 2px; font-size: 11px; color: var(--px-muted); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums;} .px-master-progress-card.is-complete .px-master-main-ring-fill {stroke: #6dce8a;} .px-master-track-grid {display: flex; align-items: stretch; gap: 6px; flex: 1; min-width: 0;} .px-master-track-item {display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; padding: 5px 7px; border-radius: 8px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);} .px-master-track-icon {flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #5d76b8; background: linear-gradient(135deg, rgba(204, 226, 255, .7), rgba(232, 220, 250, .65));} .px-master-track-name {flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--px-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .px-master-track-ring {position: relative; width: 28px; height: 28px; flex-shrink: 0;} .px-master-track-ring-svg {position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible;} .px-master-track-ring-track {fill: none; stroke: rgba(157, 170, 198, .22); stroke-width: 3;} .px-master-track-ring-fill {fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 * (1 - var(--ring-pct, 0) / 100)); transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1);} .px-master-track-pct {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: var(--px-text); font-variant-numeric: tabular-nums; pointer-events: none; line-height: 1;} .px-master-track-stat {flex-shrink: 0; font-size: 10px; color: var(--px-muted); font-variant-numeric: tabular-nums; white-space: nowrap;} .px-master-track-empty {flex-shrink: 0; font-size: 10px; color: var(--px-light);} .px-master-track-item.track-learn .px-master-track-ring-fill {stroke: url(#pxMasterRingGrad);} .px-master-track-item.track-homework .px-master-track-ring-fill {stroke: #beaefa;} .px-master-track-item.track-exam .px-master-track-ring-fill {stroke: #7ec8e8;} .px-master-track-item.is-done {border-color: rgba(109, 206, 138, .32); background: rgba(255, 255, 255, .68);} .px-master-track-item.is-done .px-master-track-ring-fill {stroke: #6dce8a;} .px-master-track-item.is-done .px-master-track-icon {color: #3d8f5c; background: linear-gradient(135deg, rgba(185, 232, 197, .75), rgba(199, 235, 210, .7));} .px-master-track-item.is-empty {opacity: .78;} @media (max-width: 768px) { .px-master-progress-layout {flex-wrap: wrap; gap: 8px;} .px-master-progress-main {width: 100%; padding-right: 0; padding-bottom: 8px; border-right: 0; border-bottom: 1px solid rgba(136, 167, 247, .14);} .px-master-track-grid {width: 100%; flex-wrap: wrap;} .px-master-track-item {flex: 1 1 calc(50% - 3px); min-width: calc(50% - 3px);} } @media (max-width: 420px) { .px-master-track-item {flex: 1 1 100%; min-width: 100%;} } @container course-banner (max-width: 480px) { .course-home-banner-deco {display: none;} .course-home-stats {gap: 6px; width: 100%;} } @media (max-width: 992px) { .course-home-banner {aspect-ratio: auto; width: 100%; min-height: max(fit-content, clamp(120px, 28vw, 180px)); padding: clamp(12px, 3vw, 20px);} .course-home-meta--below {width: 100%;} } @media (max-width: 576px) { .course-home-nav {gap: 6px; padding: 8px;} .course-home-nav-item {padding: 7px 3px; font-size: 13px;} .course-home-stats {width: 100%; gap: 6px;} .course-home-stat {flex: 1; min-width: 0;} .course-home-banner-deco {display: none;} } .setting-preview-row {display: flex; align-items: center; gap: 16px; flex-wrap: wrap;} .setting-logo-preview {width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(136, 167, 247, .18); background: rgba(255, 255, 255, .72);} .setting-banner-preview {width: 100%; max-width: 720px; aspect-ratio: 6 / 1; overflow: hidden; border-radius: 8px; border: 1px solid rgba(136, 167, 247, .18); background: rgba(255, 255, 255, .72);} .setting-banner-preview img {display: block; width: 100%; height: 100%; object-fit: cover;} .px-setting-section-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;} .px-setting-section-title {font-size: 15px; font-weight: 600; color: var(--px-text); line-height: 1.4;} .px-setting-section-desc {font-size: 13px; color: var(--px-muted); margin-top: 4px; max-width: 680px; line-height: 1.55;} .px-homework-ratio-bars {display: grid; gap: 8px; margin-top: 4px;} .px-homework-ratio-row {display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--px-muted);} .px-homework-ratio-label {width: 88px; flex-shrink: 0; white-space: nowrap;} .px-homework-ratio-track {flex: 1; height: 7px; border-radius: 999px; background: rgba(136, 167, 247, .14); overflow: hidden;} .px-homework-ratio-fill {display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #88A7F7, #b8a0e8);} .px-homework-ratio-fill.fill-ideology {background: linear-gradient(90deg, #9eb8f5, #c4a8eb);} .px-homework-ratio-fill.fill-attitude {background: linear-gradient(90deg, #a8c4f0, #d4bce8);} .px-homework-ratio-pct {width: 38px; flex-shrink: 0; text-align: right; font-weight: 600; color: var(--px-text);} .px-homework-modal-sum {font-size: 13px; font-weight: 600; color: var(--px-muted);} .px-homework-modal-sum.is-invalid {color: #b57b24;} .px-act-page {display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 118px); overflow-x: hidden; padding-bottom: 20px; box-sizing: border-box;} .px-act-pane {flex: 1 1 0; min-width: 0; min-height: 0; overflow-x: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(248, 250, 255, .76)); border: 1px solid rgba(214, 226, 248, .8); border-radius: 8px; padding: 12px; box-shadow: 0 8px 26px rgba(100, 120, 200, .08), inset 0 1px 0 rgba(255, 255, 255, .9);} .px-act-pane-timeline {flex: none; width: 100%; overflow: visible;} .px-act-pane-head {font-weight: 600; color: #3a4670; font-size: 14px; margin-bottom: 10px;} .px-act-pane-head-soft {padding: 10px 12px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, rgba(204, 226, 255, .42), rgba(231, 212, 245, .4)); border: 1px solid rgba(187, 201, 238, .36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);} .px-act-layout {display: flex; gap: 12px; align-items: stretch; flex: 1 1 auto; min-height: 420px; max-width: 100%; overflow-x: hidden; font-size: 14px;} .px-act-pane-video {flex: 5 1 0; display: flex; flex-direction: column;} .px-act-pane-records {flex: 2 1 0; display: flex; flex-direction: column; max-width: 220px;} .px-act-editor-column {flex: 5 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px;} .px-act-editor-column .px-learn-activity-panel {flex: 1 1 0; min-height: 0;} .px-learn-activity-panel {flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(187, 201, 238, .36); background: rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(115, 133, 194, .08); font-size: 14px;} .px-learn-activity-head.px-act-pane-head-soft {margin-bottom: 0; border-radius: 0; border: 0; border-bottom: 1px solid rgba(187, 201, 238, .36); box-shadow: none;} .px-learn-activity-title {font-weight: 600; font-size: 14px; color: #3a4670;} .px-learn-activity-body-wrap {position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: rgba(255, 255, 255, .58); overflow: hidden;} .px-learn-activity-body-wrap .px-act-editor-tabs {flex-shrink: 0; align-self: flex-start; max-width: calc(100% - 24px); margin: 8px 12px 6px;} .px-learn-activity-body-wrap .px-act-editor-body {flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 10px 12px; box-sizing: border-box;} .px-learn-activity-panel .course-form, .px-learn-activity-panel .course-form .form-control, .px-learn-activity-panel .course-form .form-select, .px-learn-activity-panel .course-form textarea, .px-learn-activity-panel .course-form .col-form-label, .px-learn-activity-panel .course-form .form-text, .px-learn-activity-panel .course-form .btn, .px-learn-activity-panel .px-act-question, .px-learn-activity-panel .px-act-question .form-control, .px-learn-activity-panel .px-act-question .form-select, .px-learn-activity-panel .empty-state, .px-learn-activity-panel .px-act-time-display {font-size: 14px;} .px-act-timeline-wrap {min-width: 0; background: linear-gradient(160deg, #6981af 0%, #38455c 60%, #0d1d3a 100%); border-radius: 8px; padding: 12px 14px; overflow: visible;} .px-act-timeline-track {flex: 1; padding: 4px 0 2px; overflow: visible; min-width: 0; position: relative;} .px-act-timeline-ruler {position: relative; height: 22px; margin-bottom: 4px; pointer-events: none; background: rgba(13, 29, 58, .9); border-radius: 6px; padding: 3px 10px 0; box-sizing: border-box;} .px-act-timeline-markers {position: absolute; left: 0; right: 0; top: 4px; height: 22px; z-index: 5; pointer-events: none;} .px-act-ruler-tick {position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;} .px-act-ruler-tick::before {content: ''; width: 1px; height: 5px; background: rgba(100, 155, 255, .45);} .px-act-ruler-tick.is-first {transform: translateX(0); align-items: flex-start;} .px-act-ruler-tick.is-last {transform: translateX(-100%); align-items: flex-end;} .px-act-ruler-tick.is-first .px-act-ruler-label {padding-left: 2px;} .px-act-ruler-tick.is-last .px-act-ruler-label {padding-right: 2px;} .px-act-ruler-label {font-size: 10px; line-height: 1; color: rgba(155, 198, 255, .72); margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap;} .px-act-timeline {position: relative; height: 64px; min-height: 64px; cursor: pointer; overflow: visible;} .px-act-timeline-thumbs {position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; z-index: 1; border-radius: 6px; overflow: hidden; pointer-events: none;} .px-act-thumb-cell {flex-shrink: 0; height: 100%; background-color: rgba(9, 21, 56, .9); background-size: cover; background-position: center; background-repeat: no-repeat; border-right: 1px solid rgba(40, 80, 170, .18);} .px-act-thumb-cell:last-child {border-right: 0;} .px-act-thumb-cell.is-loading {background-color: rgba(9, 21, 56, .9); background-image: linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 100%);} .px-act-thumb-cell.is-placeholder {background-color: rgba(15, 30, 70, .72); background-image: linear-gradient(180deg, rgba(40, 80, 170, .08) 0%, rgba(15, 30, 70, .55) 100%);} .px-act-timeline-rail {position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(6, 14, 40, .94) 0%, rgba(9, 21, 56, .9) 100%); border-radius: 6px; border: 1px solid rgba(40, 80, 170, .3); box-shadow: inset 0 2px 8px rgba(0, 4, 22, .55);} .px-act-timeline-segments {position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; border-radius: 6px; overflow: hidden;} .px-act-seg {position: absolute; top: 0; bottom: 0; cursor: pointer; opacity: .45; transition: opacity .15s ease;} .px-act-seg:hover {opacity: .85;} .px-act-seg.is-current {opacity: .88;} .px-act-seg.is-active {opacity: .96; box-shadow: inset 0 0 0 2px rgba(80, 140, 255, .6);} .px-act-seg.seg-c0 {background: rgba(90, 150, 255, .52);} .px-act-seg.seg-c1 {background: rgba(170, 130, 255, .48);} .px-act-seg.seg-c2 {background: rgba(255, 215, 65, .45);} .px-act-seg.seg-c3 {background: rgba(65, 215, 135, .45);} .px-act-seg.seg-c4 {background: rgba(255, 155, 110, .48);} .px-act-seg.seg-c5 {background: rgba(65, 205, 255, .48);} .px-act-timeline-progress {position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(60, 120, 255, .52) 0%, rgba(85, 155, 255, .42) 100%); border-radius: 6px 0 0 6px; pointer-events: none; z-index: 3;} .px-act-timeline-markers-legacy {display: none;} .px-act-timeline-marker {position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: grab; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 22px; min-height: 22px; padding: 0; z-index: 4; transition: transform .18s ease; touch-action: none;} .px-act-marker-pin {width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, rgba(140, 190, 255, .9), rgba(100, 160, 240, .82)); border: 2px solid rgba(255, 255, 255, .88); box-shadow: 0 0 0 2px rgba(60, 120, 240, .28), 0 2px 8px rgba(40, 90, 210, .32); transition: width .18s ease, height .18s ease, box-shadow .18s ease;} .px-act-timeline-marker.type-tip .px-act-marker-pin {background: linear-gradient(135deg, rgba(120, 180, 255, .95), rgba(70, 140, 235, .82));} .px-act-timeline-marker.type-quiz .px-act-marker-pin {background: linear-gradient(135deg, rgba(210, 175, 255, .96), rgba(168, 100, 230, .82));} .px-act-timeline-marker.type-ai_chat .px-act-marker-pin {background: linear-gradient(135deg, rgba(255, 228, 90, .98), rgba(235, 180, 50, .85));} .px-act-timeline-marker.type-article_rec .px-act-marker-pin {background: linear-gradient(135deg, rgba(100, 235, 155, .96), rgba(50, 190, 110, .82));} .px-act-timeline-marker .px-act-drag-time {position: absolute; top: -22px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.2; color: #ff6655; background: rgba(8, 18, 50, .92); border: 1px solid rgba(255, 100, 80, .35); box-shadow: 0 1px 6px rgba(0, 0, 20, .4); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease;} .px-act-timeline-marker.is-dragging .px-act-drag-time {opacity: 1;} .px-act-timeline-marker:hover {transform: translate(-50%, -50%) scale(1.18); z-index: 6;} .px-act-timeline-marker:hover .px-act-marker-pin {width: 16px; height: 16px; box-shadow: 0 0 0 3px rgba(100, 160, 255, .25), 0 6px 14px rgba(60, 120, 230, .38);} .px-act-timeline-marker.is-active .px-act-marker-pin {outline: 2px solid rgba(90, 155, 255, .75); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(90, 155, 255, .22), 0 4px 12px rgba(60, 120, 240, .38);} .px-act-timeline-marker.is-group {min-width: 22px; min-height: 22px;} .px-act-marker-pin-group {width: 18px; height: 18px; border-radius: 50%; background: rgba(25, 50, 110, .92); border: 2px solid rgba(120, 175, 255, .5); box-shadow: 0 0 0 2px rgba(60, 120, 240, .28), 0 2px 8px rgba(40, 90, 210, .32); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 2px; padding: 2px; box-sizing: border-box; transition: width .18s ease, height .18s ease, box-shadow .18s ease;} .px-act-marker-seg {width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 3px rgba(40, 90, 200, .3);} .px-act-marker-seg.type-tip {background: linear-gradient(135deg, rgba(120, 185, 255, .98), rgba(70, 140, 240, .88));} .px-act-marker-seg.type-quiz {background: linear-gradient(135deg, rgba(215, 178, 255, .98), rgba(168, 100, 235, .88));} .px-act-marker-seg.type-ai_chat {background: linear-gradient(135deg, rgba(255, 228, 90, 1), rgba(235, 180, 50, .9));} .px-act-marker-seg.type-article_rec {background: linear-gradient(135deg, rgba(100, 238, 158, .98), rgba(50, 192, 112, .9));} .px-act-timeline-marker.is-group:hover .px-act-marker-pin-group {width: 22px; height: 22px; box-shadow: 0 0 0 3px rgba(100, 160, 255, .25), 0 6px 14px rgba(60, 120, 230, .38);} .px-act-timeline-marker.is-group:hover .px-act-marker-seg {width: 8px; height: 8px;} .px-act-timeline-marker.is-group.is-active .px-act-marker-pin-group {outline: 2px solid rgba(90, 155, 255, .75); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(90, 155, 255, .22), 0 4px 12px rgba(60, 120, 240, .38);} .px-act-timeline-marker.is-type-inactive {opacity: .32; cursor: default; pointer-events: none;} .px-act-timeline-marker.is-type-inactive:hover {transform: translate(-50%, -50%); z-index: 4;} .px-act-timeline-marker.is-type-inactive:hover .px-act-marker-pin {width: 12px; height: 12px; box-shadow: 0 2px 8px rgba(60, 120, 230, .28);} .px-act-marker-seg.is-type-active {transform: scale(1.28); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 3px rgba(90, 155, 255, .55); z-index: 2;} .px-act-timeline-marker.is-group:not(.is-type-inactive):hover .px-act-marker-seg.is-type-active {width: 9px; height: 9px;} .px-act-timeline-cursor {position: absolute; left: 0; top: -12px; width: 1px; height: calc(22px + 4px + 64px + 24px); background: linear-gradient(180deg, #ff8a7a 0%, #ff5c52 18%, #ff4444 50%, #ff5c52 82%, #ff8a7a 100%); border-radius: 1px; cursor: grab; transform: translateX(-0.5px); z-index: 10; box-shadow: 0 0 6px rgba(255, 80, 70, .35); pointer-events: auto; touch-action: none;} .px-act-timeline-cursor::before {content: ''; position: absolute; top: 0; left: 50%; width: 11px; height: 14px; margin-left: -5.5px; background: linear-gradient(180deg, #ff8f80, #ff4d45); border-radius: 4px; border: 1px solid rgba(255, 255, 255, .92); box-shadow: 0 1px 6px rgba(255, 60, 50, .45);} .px-act-timeline-cursor.is-dragging {cursor: grabbing;} .px-act-timeline-cursor .px-act-drag-time {display: none;} .px-act-drag-time {position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.2; color: #ff4444; background: rgba(8, 18, 50, .92); border: 1px solid rgba(255, 70, 70, .3); box-shadow: 0 1px 6px rgba(0, 0, 20, .4); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease;} .px-act-play-btn {width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(90, 150, 255, .45); background: linear-gradient(145deg, rgba(22, 60, 140, .72), rgba(14, 40, 105, .58)); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s, border-color .2s, box-shadow .2s; padding: 0; outline: none; box-shadow: 0 2px 12px rgba(8, 24, 120, .42), inset 0 1px 0 rgba(100, 165, 255, .18);} .px-act-play-btn:hover {background: linear-gradient(145deg, rgba(40, 90, 185, .8), rgba(25, 60, 150, .68)); border-color: rgba(120, 180, 255, .62); box-shadow: 0 4px 18px rgba(30, 80, 220, .48), inset 0 1px 0 rgba(140, 200, 255, .22);} .px-act-play-btn:active {transform: scale(.92);} .px-act-play-btn-sm {width: 28px; height: 28px; border-width: 1px; box-shadow: 0 1px 8px rgba(8, 24, 120, .28), inset 0 1px 0 rgba(100, 165, 255, .14);} .px-act-play-btn-sm .px-act-play-icon {border-width: 5px 0 5px 9px; margin-left: 2px;} .px-act-play-btn-sm.is-playing .px-act-play-icon {width: 9px; height: 10px;} .px-act-play-icon {display: block; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 13px; border-color: transparent transparent transparent rgba(205, 228, 255, .96); margin-left: 3px;} .px-act-play-btn.is-playing .px-act-play-icon {width: 12px; height: 14px; border-style: none; background: linear-gradient(to right, rgba(205, 228, 255, .96) 35%, transparent 35% 65%, rgba(205, 228, 255, .96) 65%); margin-left: 0;} body.px-act-dragging {user-select: none; cursor: grabbing;} body.px-act-dragging * {user-select: none;} .px-act-seg-panel {margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .86); box-shadow: 0 6px 18px rgba(88, 120, 208, .12);} .px-act-seg-panel-head {display: flex; align-items: center; gap: 10px; margin-bottom: 10px;} .px-act-seg-panel-time {font-size: 13px; color: #6470a0; font-weight: 600;} .px-act-seg-panel-title {font-size: 14px; color: #3a4670; font-weight: 600;} .px-act-seg-panel-body {display: flex; flex-direction: column; gap: 8px;} .px-act-seg-block {display: flex; gap: 10px;} .px-act-seg-label {flex: 0 0 56px; font-size: 12px; color: #88A7F7; font-weight: 600;} .px-act-seg-text {flex: 1; font-size: 13px; color: #3a4670; line-height: 1.6;} .px-act-timeline-legend {font-size: 12px; color: #6470a0;} .px-act-legend-item {display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 3px 10px; border-radius: 999px; font-size: 12px; color: #6470a0; cursor: pointer; line-height: 1.4; transition: color .15s ease, background .15s ease, box-shadow .15s ease;} .px-act-legend-item:hover:not(:disabled):not(.is-disabled) {color: #3a4670;} .px-act-legend-item.is-disabled, .px-act-legend-item:disabled {color: #b8c0d4; cursor: default; pointer-events: none; box-shadow: none;} .px-act-legend-item.is-disabled .px-act-legend-dot, .px-act-legend-item:disabled .px-act-legend-dot {background: #d0d6e4 !important;} .px-act-legend-item.is-active {font-weight: 600; color: #3a4670; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 2px 8px rgba(120, 140, 200, .14);} .px-act-legend-item.type-tip.is-active {background: linear-gradient(135deg, rgba(204, 226, 255, .92), rgba(237, 245, 255, .96)); color: #3557a8; box-shadow: inset 0 0 0 1px rgba(136, 167, 247, .42), 0 2px 8px rgba(93, 130, 222, .18);} .px-act-legend-item.type-quiz.is-active {background: linear-gradient(135deg, rgba(231, 212, 245, .92), rgba(246, 239, 252, .96)); color: #7b3fa8; box-shadow: inset 0 0 0 1px rgba(187, 107, 217, .42), 0 2px 8px rgba(151, 80, 198, .18);} .px-act-legend-item.type-ai_chat.is-active {background: linear-gradient(135deg, rgba(255, 246, 210, .94), rgba(255, 252, 237, .98)); color: #9a6f10; box-shadow: inset 0 0 0 1px rgba(242, 201, 76, .48), 0 2px 8px rgba(200, 150, 30, .18);} .px-act-legend-item.type-article_rec.is-active {background: linear-gradient(135deg, rgba(220, 246, 230, .94), rgba(241, 252, 246, .98)); color: #1f7a4d; box-shadow: inset 0 0 0 1px rgba(111, 207, 151, .42), 0 2px 8px rgba(61, 156, 105, .18);} .px-act-legend-dot {display: inline-block; width: 8px; height: 8px; border-radius: 2px;} .px-act-legend-dot.type-tip {background: #88A7F7;} .px-act-legend-dot.type-quiz {background: #BB6BD9;} .px-act-legend-dot.type-ai_chat {background: #F2C94C;} .px-act-legend-dot.type-article_rec {background: #6FCF97;} .px-act-video {flex-shrink: 0;} .px-act-video video {width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; display: block;} .px-act-video-intro {background: rgba(248, 250, 255, .85); border: 1px dashed rgba(136, 167, 247, .2); border-radius: 8px; padding: 12px;} .px-act-video-intro-title {font-weight: 600; color: #3a4670; margin-bottom: 6px; font-size: 14px;} .px-act-video-intro-body {color: #6470a0; font-size: 14px;} .px-act-records-body {flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;} .px-act-record-group {display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 0; border-bottom: 1px dashed rgba(136, 167, 247, .12);} .px-act-record-group:last-child {border-bottom: 0;} .px-act-record-time {background: none; border: 0; padding: 0; font-weight: 600; color: #3f4658; font-size: 13px; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(63, 70, 88, .26); text-underline-offset: 3px;} .px-act-record-time:hover {color: #222938; text-decoration-color: rgba(34, 41, 56, .36);} .px-act-record-time.is-active {color: #ff7a45; text-decoration-color: rgba(255, 122, 69, .34);} .px-act-record-type {background: none; border: 0; padding: 2px 0; font-size: 13px; color: #5d6476; cursor: pointer;} .px-act-record-type:hover {color: #303746;} .px-act-record-group.is-active .px-act-record-type {color: #ff7a45;} .px-act-record-group.is-active .px-act-record-type:hover {color: #ff6333;} .px-act-record-type.is-active {color: #ff6333; font-weight: 600;} .px-act-record-type.type-tip.is-active {color: #ff6333;} .px-act-record-type.type-quiz.is-active {color: #ff6333;} .px-learn-activity-panel .course-form {max-width: 100%; box-sizing: border-box;} .px-learn-activity-panel .course-form .row {margin-right: 0; max-width: 100%; flex-direction: column; align-items: stretch;} .px-learn-activity-panel .course-form .col-form-label, .px-learn-activity-panel .course-form .col-md-3, .px-learn-activity-panel .course-form .col-md-9 {flex: 0 0 auto; width: 100%; max-width: 100%; padding-right: 0;} .px-learn-activity-panel .course-form .col-form-label {display: block; text-align: start !important; min-height: 0; margin-bottom: 6px; padding-top: 0; padding-bottom: 0; font-weight: 600;} .px-learn-activity-panel .course-form .offset-md-3 {margin-left: 0 !important;} .px-learn-activity-panel .course-form textarea {min-height: 120px; resize: vertical;} .px-learn-activity-panel .px-act-form-tip textarea[name=content] {min-height: 160px;} .px-learn-activity-panel .px-act-form-quiz textarea[name=content] {min-height: 100px;} .px-learn-activity-panel .px-act-tip-meta {line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .px-learn-activity-head .px-act-time-display {min-height: 0; padding: 4px 10px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;} .px-learn-activity-panel .px-act-option-row {min-width: 0; flex-wrap: wrap; min-height: 32px; padding: 2px 0;} .px-learn-activity-panel .px-act-option-row .js-option-text {flex: 1 1 0; min-width: 0; max-width: 100%; padding: 4px 0; font-size: 13px; color: #2f3858; background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0; box-shadow: none; transition: border-color .15s ease;} .px-learn-activity-body-wrap .empty-state {min-height: 120px; display: flex; align-items: center; justify-content: center; color: #97a3c2; font-size: 13px;} .px-act-editor-tabs {display: inline-flex; align-items: center; gap: 3px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: 999px; background: #E2EBFA; border: 0; box-shadow: inset 0 0 0 1px rgba(200, 215, 240, .4);} .px-act-editor-tabs:empty {display: none;} .px-act-editor-tabs::-webkit-scrollbar {height: 0; width: 0;} .px-act-editor-tab {flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0; padding: 5px 12px; background: transparent; cursor: pointer; font-size: 13px; color: var(--px-muted, #6470a0); white-space: nowrap; border: 0; border-radius: 999px; font-weight: 500; line-height: 1.25; box-shadow: none; transition: color .15s ease, background .15s ease, box-shadow .15s ease;} .px-act-tab-label {line-height: 1.25;} .px-act-tab-close {display: inline-flex; align-items: center; justify-content: center; width: 0; min-width: 0; height: 16px; margin-left: 0; padding: 0; border-radius: 50%; color: var(--px-light, #9daac6); font-size: 10px; line-height: 1; opacity: 0; overflow: hidden; flex-shrink: 0; pointer-events: none; transition: width .15s ease, margin-left .15s ease, opacity .15s ease, color .15s ease, background .15s ease;} .px-act-editor-tab.is-close-ready .px-act-tab-close {width: 16px; margin-left: 4px; opacity: 1; pointer-events: auto;} .px-act-tab-close:hover {color: var(--px-text, #3a4670); background: rgba(58, 70, 112, .08);} .px-act-tab-close .iconfont {font-size: 10px; line-height: 1;} .px-act-editor-tab:hover {color: var(--px-text, #3a4670);} .px-act-editor-tab.is-active {color: var(--px-text, #3a4670); background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(58, 70, 112, .1);} .px-act-time-display {display: inline-flex; align-items: center; font-weight: 600; font-variant-numeric: tabular-nums;} .px-act-option-row.is-correct .js-option-text {color: #1f9d55; font-weight: 500;} .px-act-option-key {display: inline-block; width: 18px; text-align: center; font-weight: 600; font-size: 12px; color: #5d6476; flex-shrink: 0;} .px-act-desc-toggle {color: #6470a0;} .px-learn-activity-panel .px-act-quiz-panel {padding: 0;} .px-learn-activity-panel .px-act-question-list {display: flex; flex-direction: column; counter-reset: px-act-q;} .px-learn-activity-panel .px-act-question {padding: 16px 0; border-top: 1px solid #B7CAFB; background: transparent; border-radius: 0; counter-increment: px-act-q;} .px-learn-activity-panel .px-act-question:first-child {border-top: 0; padding-top: 0;} .px-learn-activity-panel .px-act-question-head {display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px;} .px-learn-activity-panel .px-act-question-head .js-q-type {width: auto; min-width: 72px; max-width: 88px; padding: 3px 24px 3px 0; font-size: 12px; font-weight: 500; color: #5d6476; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235d6476' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 2px center; border: 0; border-radius: 0; box-shadow: none;} .px-learn-activity-panel .px-act-question-head .js-q-type:focus {box-shadow: none; color: #3a4670;} .px-learn-activity-panel .px-act-question-title-row {display: flex; align-items: center; gap: 10px; margin-bottom: 12px;} .px-learn-activity-panel .px-act-question-no {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; color: #666666; background: linear-gradient(135deg, #dbe5ff 0%, #fffedd 100%); box-shadow: inset 0 0 0 1px rgba(136, 167, 247, .35);} .px-learn-activity-panel .px-act-question-no::before {content: counter(px-act-q);} .px-learn-activity-panel .px-act-question-title {flex: 1; min-width: 0; margin-bottom: 0; padding: 6px 0; font-size: 14px; font-weight: 500; color: #2f3858; background: transparent; border: 0; border-bottom: 1px solid rgba(58, 70, 112, .16); border-radius: 0; box-shadow: none;} .px-learn-activity-panel .px-act-question-title:focus {border-bottom-color: rgba(136, 167, 247, .65); box-shadow: none;} .px-learn-activity-panel .px-act-question-title::placeholder {color: #8a96b8; font-weight: 400;} .px-learn-activity-panel .px-act-option-list {display: flex; flex-direction: column; gap: 6px;} .px-learn-activity-panel .px-act-option-row .form-check-input {width: 14px; height: 14px; margin: 0; flex-shrink: 0; cursor: pointer;} .px-learn-activity-panel .px-act-option-row .js-option-text:focus {border-bottom-color: rgba(58, 70, 112, .22); box-shadow: none;} .px-learn-activity-panel .px-act-option-row .js-option-text::placeholder {color: #8a96b8;} .px-learn-activity-panel .px-act-option-row .js-remove-option {padding: 2px 8px; font-size: 12px; color: #6470a0; opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease, color .15s ease;} .px-learn-activity-panel .px-act-option-row:hover .js-remove-option, .px-learn-activity-panel .px-act-option-row:focus-within .js-remove-option {opacity: 1; visibility: visible;} .px-learn-activity-panel .px-act-option-row.is-correct .px-act-option-key {color: #1a8a4a;} .px-learn-activity-panel .px-act-question-foot {margin-top: 8px;} .px-learn-activity-panel .px-act-add-option-btn {display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(58, 70, 112, .2); border-radius: 50%; background: rgba(248, 250, 255, .95); color: #4a5678; line-height: 1; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;} .px-learn-activity-panel .px-act-add-option-btn .iconfont {font-size: 12px; line-height: 1;} .px-learn-activity-panel .px-act-add-option-btn:hover {color: #2f3858; border-color: rgba(136, 167, 247, .45); background: rgba(236, 241, 252, .96);} .px-learn-activity-panel .px-act-quiz-actions {margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(58, 70, 112, .1);} .px-modal#modalChooseType .modal-dialog {max-width: 980px;} .px-act-type-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;} .px-act-type-option {display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; min-height: 98px; padding: 12px; text-align: left; border: 1px solid rgba(188, 201, 232, .72); border-radius: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(245, 248, 255, .88)); color: #3a4670; box-shadow: 0 8px 22px rgba(120, 140, 200, .08); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;} .px-act-type-option[data-type="tip"] {background: linear-gradient(135deg, rgba(204, 226, 255, .9), rgba(237, 245, 255, .96)); border-color: rgba(136, 167, 247, .38);} .px-act-type-option[data-type="quiz"] {background: linear-gradient(135deg, rgba(220, 246, 230, .94), rgba(241, 252, 246, .98)); border-color: rgba(96, 184, 132, .38);} .px-act-type-option[data-type="ai_chat"] {background: linear-gradient(135deg, rgba(255, 246, 210, .94), rgba(255, 252, 237, .98)); border-color: rgba(229, 190, 92, .42);} .px-act-type-option[data-type="article_rec"] {background: linear-gradient(135deg, rgba(231, 212, 245, .9), rgba(246, 239, 252, .96)); border-color: rgba(183, 143, 223, .42);} .px-act-type-option:hover {transform: translateY(-1px); border-color: rgba(136, 167, 247, .6); box-shadow: 0 12px 26px rgba(136, 167, 247, .16);} .px-act-type-option.is-active {border: 2px solid rgba(136, 167, 247, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 14px 28px rgba(136, 167, 247, .22);} .px-act-type-option[data-type="tip"].is-active {border-color: rgba(93, 130, 222, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 14px 28px rgba(93, 130, 222, .26);} .px-act-type-option[data-type="quiz"].is-active {border-color: rgba(61, 156, 105, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 14px 28px rgba(61, 156, 105, .26);} .px-act-type-option[data-type="ai_chat"].is-active {border-color: rgba(200, 150, 30, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 14px 28px rgba(200, 150, 30, .28);} .px-act-type-option[data-type="article_rec"].is-active {border-color: rgba(151, 80, 198, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 14px 28px rgba(151, 80, 198, .26);} .px-act-type-option.is-disabled {opacity: .55; box-shadow: none; cursor: not-allowed;} .px-modal .btn.px-btn {font-size: 14px;} .px-modal .btn.px-btn-soft {font-size: 14px;} .px-modal .px-act-type-option {font-size: 14px;} .px-act-type-option-head {display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%;} .px-act-type-option-tag {display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; background: rgba(236, 241, 252, .9); color: #5d6f9f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 2px 6px rgba(120, 140, 200, .08); position: relative;} .px-act-type-option-tag::before {content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); pointer-events: none;} .px-act-type-option-tag.type-tip {background: linear-gradient(135deg, rgba(204, 226, 255, .95), rgba(168, 198, 248, .88)); color: #3557a8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 3px 10px rgba(93, 130, 222, .22);} .px-act-type-option-tag.type-tip > * {position: relative;} .px-act-type-option-tag.type-quiz {background: linear-gradient(135deg, rgba(220, 246, 230, .96), rgba(170, 226, 192, .9)); color: #1f7a4d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 3px 10px rgba(61, 156, 105, .22);} .px-act-type-option-tag.type-quiz > * {position: relative;} .px-act-type-option-tag.type-ai_chat {background: linear-gradient(135deg, rgba(255, 246, 210, .96), rgba(248, 220, 140, .9)); color: #846008; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 3px 10px rgba(178, 138, 31, .22);} .px-act-type-option-tag.type-ai_chat > * {position: relative;} .px-act-type-option-tag.type-article_rec {background: linear-gradient(135deg, rgba(231, 212, 245, .95), rgba(204, 173, 232, .88)); color: #6f2c9b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 3px 10px rgba(151, 80, 198, .22);} .px-act-type-option-tag.type-article_rec > * {position: relative;} .px-act-type-option-title {font-size: 13px; font-weight: 700; color: #3a4670; line-height: 1.45; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;} .px-act-type-option-desc {font-size: 12px; line-height: 1.5; color: #5c6894;} .px-act-mini-tag {display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: rgba(236, 241, 252, .6); color: #5d6f9f; font-size: 12px; font-weight: 600; line-height: 1.55; box-shadow: inset 0 0 0 1px rgba(188, 201, 232, .55);} .px-act-type-option[data-type="tip"] .px-act-mini-tag {background: rgba(204, 226, 255, .55); color: #3557a8; box-shadow: inset 0 0 0 1px rgba(136, 167, 247, .35);} .px-act-type-option[data-type="quiz"] .px-act-mini-tag {background: rgba(220, 246, 230, .55); color: #1f7a4d; box-shadow: inset 0 0 0 1px rgba(96, 184, 132, .35);} .px-act-type-option[data-type="ai_chat"] .px-act-mini-tag {background: rgba(255, 246, 210, .55); color: #846008; box-shadow: inset 0 0 0 1px rgba(229, 190, 92, .4);} .px-act-type-option[data-type="article_rec"] .px-act-mini-tag {background: rgba(231, 212, 245, .55); color: #6f2c9b; box-shadow: inset 0 0 0 1px rgba(183, 143, 223, .35);} .px-difficulty-highlight-body {min-height: 150px; color: #6470a0; line-height: 1.7; white-space: pre-wrap;} .px-ai-difficulty-sheet {display: flex; flex-direction: column; gap: 16px;} .px-ai-difficulty-resource {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(204, 226, 255, .68), rgba(231, 212, 245, .62)); border: 1px solid rgba(183, 198, 236, .68); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);} .px-ai-difficulty-resource-main {flex: 1; min-width: 0;} .px-ai-difficulty-resource-meta {color: #31406a; font-size: 14px; font-weight: 600; line-height: 1.5; word-break: break-word;} .px-ai-difficulty-resource-meta span {display: inline;} .px-ai-difficulty-resource-tip {margin-top: 8px; color: #5f6f99; font-size: 13px; line-height: 1.7;} .px-ai-difficulty-resource-actions {flex-shrink: 0;} .px-ai-difficulty-layout {display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.18fr); gap: 16px;} .px-ai-difficulty-panel {display: flex; flex-direction: column; min-height: 0; border-radius: 14px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(214, 226, 248, .9); overflow: hidden; box-shadow: 0 10px 28px rgba(115, 133, 194, .08);} .px-ai-difficulty-panel-head {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-size: 14px; font-weight: 700; color: #3a4670; background: linear-gradient(180deg, rgba(248, 250, 255, .98), rgba(241, 245, 255, .9)); border-bottom: 1px solid rgba(218, 228, 248, .9);} .px-ai-difficulty-tip {color: #8a96b8; font-size: 12px; font-weight: 500;} .px-ai-difficulty-log {padding: 16px; min-height: 280px; max-height: 360px; overflow-y: auto; font-size: 14px;} .px-ai-difficulty-log-item {display: flex; align-items: flex-start; gap: 8px;} .px-ai-difficulty-log-item + .px-ai-difficulty-log-item {margin-top: 8px;} .px-ai-difficulty-log-dot {flex-shrink: 0; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: #b8c2d8;} .px-ai-difficulty-log-content {flex: 1; min-width: 0;} .px-ai-difficulty-log-title {color: #3a4670; font-size: 12px; font-weight: 600; line-height: 1.5;} .px-ai-difficulty-log-text {margin-top: 2px; color: #8a96b8; font-size: 12px; line-height: 1.6; word-break: break-word;} .px-ai-difficulty-result {min-height: 280px; max-height: 360px; overflow-y: auto; border-radius: 0; border: 0; font-size: 14px;} .px-ai-difficulty-result.is-empty {color: #97a3c2;} .px-ai-difficulty-foot {padding: 12px 14px; border-radius: 12px; color: #6c789f; font-size: 12px; line-height: 1.8; background: rgba(247, 249, 255, .88); border: 1px dashed rgba(197, 209, 239, .82);} .px-ai-extract-tag {display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #4a5f96; background: linear-gradient(135deg, rgba(204, 226, 255, .72), rgba(231, 212, 245, .68)); border: 1px solid rgba(183, 198, 236, .62);} .px-ai-difficulty-editor {min-height: 280px; max-height: 360px; resize: vertical; font-size: 14px; line-height: 1.75; color: #3a4670; border-color: rgba(214, 226, 248, .95);} .px-ai-difficulty-created-banner {margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #3d8f5c; background: linear-gradient(135deg, rgba(232, 248, 238, .92), rgba(212, 240, 220, .88)); border: 1px solid rgba(125, 186, 148, .45);} .px-learn-difficulty-panel {flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(187, 201, 238, .36); background: rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(115, 133, 194, .08);} .px-learn-difficulty-head.px-act-pane-head-soft {margin-bottom: 0; border-radius: 0; border: 0; border-bottom: 1px solid rgba(187, 201, 238, .36); box-shadow: none;} .px-learn-difficulty-title {font-weight: 600; font-size: 14px; color: #3a4670;} .px-learn-difficulty-head-actions {margin-left: 8px;} .px-learn-difficulty-head-btn {width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(187, 201, 238, .56); background: rgba(255, 255, 255, .92); color: #6470a0; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: 0 1px 6px rgba(115, 133, 194, .08); transition: box-shadow .22s ease, border-color .22s ease, color .22s ease;} .px-learn-difficulty-head-btn:hover {border-color: rgba(136, 167, 247, .45); color: #3a4670; box-shadow: 0 2px 10px rgba(115, 133, 194, .14);} .px-learn-difficulty-head-btn .iconfont {font-size: 12px; line-height: 1;} .px-learn-difficulty-head-collapse-icon {display: inline-block; transform: rotate(180deg);} .px-learn-difficulty-head-btn.d-none {display: none !important;} .px-learn-difficulty-panel.is-closed .px-learn-difficulty-toolbar, .px-learn-difficulty-panel.is-closed .px-learn-difficulty-body-wrap {display: none;} .px-learn-difficulty-toolbar {padding: 8px 12px; border-bottom: 1px solid rgba(187, 201, 238, .36); background: rgba(255, 255, 255, .46);} .px-learn-difficulty-body-wrap {position: relative; background: rgba(255, 255, 255, .58); --px-learn-difficulty-h: 80px; --px-learn-difficulty-expanded-max-h: 300px; --px-learn-difficulty-fade-bg: #fff; min-height: var(--px-learn-difficulty-h);} .px-learn-difficulty-body-wrap.is-empty {display: flex; flex-direction: column;} .px-learn-difficulty-body-wrap.is-empty .px-learn-difficulty-body {flex: 1 1 0; min-height: 0; padding-bottom: 0; display: flex; flex-direction: column;} .px-learn-difficulty-body-wrap.is-expanded {display: flex; flex-direction: column; min-height: var(--px-learn-difficulty-h); max-height: var(--px-learn-difficulty-expanded-max-h); height: auto; padding-bottom: 0; overflow: hidden;} .px-learn-difficulty-body-wrap.is-collapsed {height: var(--px-learn-difficulty-h); min-height: var(--px-learn-difficulty-h);} .px-learn-difficulty-body {padding: 8px 16px 0; color: #4a5680; font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; box-sizing: border-box;} .px-learn-difficulty-body-wrap.is-collapsed .px-learn-difficulty-body {height: 100%; overflow: hidden;} .px-learn-difficulty-body-wrap.is-expanded .px-learn-difficulty-body {flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px;} .px-learn-difficulty-body-wrap.is-expanded .px-learn-difficulty-fade {display: none !important; opacity: 0 !important;} .px-learn-difficulty-body-wrap.is-expanded .px-learn-difficulty-actions {display: block; position: static; flex-shrink: 0; padding: 2px 0 8px;} .px-learn-difficulty-fade {display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 22%, rgba(255, 255, 255, .58) 52%, rgba(255, 255, 255, .9) 78%, var(--px-learn-difficulty-fade-bg) 100%); pointer-events: none; z-index: 1; opacity: 0; transition: opacity .28s ease;} .px-learn-difficulty-body-wrap.is-collapsed.is-overflow .px-learn-difficulty-fade {display: block; opacity: 1;} .px-learn-difficulty-actions {display: none; position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; padding: 0; text-align: center; pointer-events: none;} .px-learn-difficulty-body-wrap.is-overflow .px-learn-difficulty-actions {display: block;} .px-learn-difficulty-expand-btn {width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(187, 201, 238, .56); background: rgba(255, 255, 255, .96); color: #6470a0; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(115, 133, 194, .1); transition: box-shadow .22s ease, border-color .22s ease; pointer-events: auto;} .px-learn-difficulty-expand-btn:hover {border-color: rgba(136, 167, 247, .45); box-shadow: 0 4px 12px rgba(115, 133, 194, .16);} .px-learn-difficulty-expand-icon {display: inline-block; font-size: 12px; line-height: 1; transition: transform .22s ease;} .px-learn-difficulty-body-wrap.is-expanded .px-learn-difficulty-expand-icon {transform: rotate(180deg);} .px-learn-difficulty-empty {flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; color: #97a3c2; font-size: 13px;} .px-show-right .px-learn-difficulty-panel {margin: 0; flex-shrink: 0;} .px-doc-act-right .px-learn-difficulty-panel, .px-doc-act-right .px-learn-activity-panel {margin: 0;} .px-doc-act-right .px-show-card.px-show-head, .px-show-right .px-show-card.px-show-head {margin: 0; flex-shrink: 0;} .px-doc-act-right .px-learn-activity-panel {flex: 1 1 0; min-height: 0;} .px-show-right .px-learn-activity-panel {flex: 1 1 0; min-height: 0; margin: 0;} .px-modal-note { color: #333; font-size:12px; } .px-modal-note p{margin-bottom: 2px;} @media (max-width: 1200px) { .px-modal#modalChooseType .modal-dialog {max-width: 860px;} .px-act-type-grid {grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (max-width: 992px) { .px-act-layout {flex-direction: column;} .px-act-pane-records {max-width: none;} .px-act-type-grid {grid-template-columns: 1fr;} .px-ai-difficulty-resource {flex-direction: column; align-items: flex-start;} .px-ai-difficulty-resource-actions {width: 100%;} .px-ai-difficulty-layout {grid-template-columns: 1fr;} } .px-learn-edit-tabs {border-bottom-color: rgba(187, 201, 238, .5);} .px-learn-edit-tabs .nav-link {color: #6470a0; font-size: 14px; padding: 10px 16px;} .px-learn-edit-tabs .nav-link.active {color: #5878d0; font-weight: 600; border-color: #9aaff8 #9aaff8 #fff;} #px-content:has(> .title-wrap + .px-doc-act-page) {display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; padding-bottom: 20px;} #px-content:has(> .title-wrap + .px-doc-act-page) > .title-wrap {flex-shrink: 0;} .title-wrap + .px-doc-act-page {flex: 1 1 0; min-height: 0; height: 0; overflow: hidden;} .px-doc-act-layout {display: grid; grid-template-columns:minmax(240px, var(--px-show-left-pct, 64%)) 10px minmax(280px, 1fr); gap: 0; height: 100%; min-height: 0; align-items: stretch;} .px-doc-act-left {min-width: 0; min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--px-card, rgba(255, 255, 255, .72)); border: 1px solid var(--px-card-border, rgba(255, 255, 255, .86)); border-radius: 12px; box-shadow: 0 4px 20px rgba(100, 120, 200, .08), inset 0 1px 0 rgba(255, 255, 255, .85);} .px-doc-act-right {min-width: 0; min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 8px;} .px-doc-act-left .px-preview-area {flex: 1 1 0; min-height: 0; height: 0; border-radius: 12px; overflow: auto;} .px-doc-act-left .px-preview-area.is-article {display: flex; flex-direction: column; overflow: hidden;} .px-doc-act-left .px-preview-area.is-article .px-article-preview {flex: 1 1 0; min-height: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;} .px-doc-act-left .px-preview-fallback {flex-shrink: 0; padding: 12px;} .px-doc-act-right .px-preview-actions {flex-shrink: 0; margin-bottom: 0;} .px-doc-act-right .px-learn-activity-panel .course-form {min-width: 0;} .px-doc-act-right .px-learn-activity-body-wrap .px-act-editor-body {padding-right: 14px;} @media (max-width: 992px) { #px-content:has(> .title-wrap + .px-doc-act-page) {display: block; overflow: visible; padding-bottom: 12px;} .title-wrap + .px-doc-act-page {height: auto; min-height: auto; overflow: visible;} .px-doc-act-layout {display: block; height: auto; min-height: 0;} .px-doc-act-layout .px-show-split {display: none;} .px-doc-act-left {height: auto; min-height: 50vh; overflow: visible; margin-bottom: 12px;} .px-doc-act-right {height: auto; overflow: visible;} .px-doc-act-left .px-preview-area {height: auto; min-height: 50vh; flex: none;} .px-doc-act-left .px-preview-area.is-article {display: flex; flex-direction: column; overflow: hidden; min-height: 50vh;} .px-doc-act-left .px-preview-area.is-article .px-article-preview {flex: 1 1 0; min-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;} .px-doc-act-right .px-learn-activity-panel {min-height: 360px; max-height: none; overflow: visible;} .px-doc-act-right .px-learn-activity-body-wrap, .px-doc-act-right .px-learn-activity-body-wrap .px-act-editor-body {overflow: visible;} } .ai-func-badge {width: auto; min-width: 32px; height: 26px; padding: 0 10px; font-size: 11px; font-weight: 500; white-space: nowrap;} input[type="date"].form-control, input[type="datetime-local"].form-control, input[type="time"].form-control, input[type="month"].form-control {position: relative; cursor: pointer;} input[type="date"].form-control:not(.px-date-has-value), input[type="datetime-local"].form-control:not(.px-date-has-value), input[type="time"].form-control:not(.px-date-has-value), input[type="month"].form-control:not(.px-date-has-value) {color: var(--px-light);} input[type="date"].form-control.form-control-sm:not(.px-date-has-value), input[type="datetime-local"].form-control.form-control-sm:not(.px-date-has-value), input[type="time"].form-control.form-control-sm:not(.px-date-has-value), input[type="month"].form-control.form-control-sm:not(.px-date-has-value) {font-size: 0.8125rem;} input[type="date"].form-control:not(.form-control-sm):not(.px-date-has-value), input[type="datetime-local"].form-control:not(.form-control-sm):not(.px-date-has-value), input[type="time"].form-control:not(.form-control-sm):not(.px-date-has-value), input[type="month"].form-control:not(.form-control-sm):not(.px-date-has-value) {font-size: 0.875rem;} input[type="date"].form-control.px-date-has-value, input[type="datetime-local"].form-control.px-date-has-value, input[type="time"].form-control.px-date-has-value, input[type="month"].form-control.px-date-has-value {color: var(--px-text);} input[type="date"].form-control:not(.px-date-has-value)::-webkit-datetime-edit, input[type="datetime-local"].form-control:not(.px-date-has-value)::-webkit-datetime-edit, input[type="time"].form-control:not(.px-date-has-value)::-webkit-datetime-edit, input[type="month"].form-control:not(.px-date-has-value)::-webkit-datetime-edit {color: var(--px-light);} input[type="date"].form-control.form-control-sm:not(.px-date-has-value)::-webkit-datetime-edit, input[type="datetime-local"].form-control.form-control-sm:not(.px-date-has-value)::-webkit-datetime-edit, input[type="time"].form-control.form-control-sm:not(.px-date-has-value)::-webkit-datetime-edit, input[type="month"].form-control.form-control-sm:not(.px-date-has-value)::-webkit-datetime-edit {font-size: 0.8125rem;} input[type="date"].form-control:not(.form-control-sm):not(.px-date-has-value)::-webkit-datetime-edit, input[type="datetime-local"].form-control:not(.form-control-sm):not(.px-date-has-value)::-webkit-datetime-edit, input[type="time"].form-control:not(.form-control-sm):not(.px-date-has-value)::-webkit-datetime-edit, input[type="month"].form-control:not(.form-control-sm):not(.px-date-has-value)::-webkit-datetime-edit {font-size: 0.875rem;} input[type="date"].form-control.px-date-has-value::-webkit-datetime-edit, input[type="datetime-local"].form-control.px-date-has-value::-webkit-datetime-edit, input[type="time"].form-control.px-date-has-value::-webkit-datetime-edit, input[type="month"].form-control.px-date-has-value::-webkit-datetime-edit {color: var(--px-text);} input[type="date"].form-control::-webkit-calendar-picker-indicator, input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator, input[type="time"].form-control::-webkit-calendar-picker-indicator, input[type="month"].form-control::-webkit-calendar-picker-indicator {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; background: transparent;} input[type="date"].form-control::-moz-calendar-picker-indicator, input[type="datetime-local"].form-control::-moz-calendar-picker-indicator, input[type="time"].form-control::-moz-calendar-picker-indicator, input[type="month"].form-control::-moz-calendar-picker-indicator {opacity: 0;} .px-date-input-wrap {position: relative; display: block; width: 100%;} .px-date-input-wrap > input.form-control {width: 100%; padding-right: 2.25rem;} .px-date-input-wrap.px-date-input-wrap-sm > input.form-control {padding-right: 0.5rem;} .px-date-input-wrap .px-date-input-icon {position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--px-muted); pointer-events: none; line-height: 1; z-index: 1;} .px-date-input-wrap.px-date-input-wrap-sm .px-date-input-icon {right: 0.5rem; font-size: 0.875rem;} .px-datetime-picker-field {max-width: 280px;} .px-datetime-picker-panel {position: fixed; z-index: 1080; width: 300px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(226, 235, 248, .95); box-shadow: 0 16px 40px rgba(88, 120, 200, .18);} .px-dtp-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 6px 4px; border-radius: 8px; background: #E2EBF8;} .px-dtp-title {font-size: 14px; font-weight: 600; color: var(--px-text);} .px-dtp-nav {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; font-size: 18px; line-height: 1; color: var(--px-muted); background: transparent; cursor: pointer; transition: background .15s, color .15s;} .px-dtp-nav:hover {color: var(--px-text); background: rgba(136, 167, 247, .22);} .px-dtp-weekdays {display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; text-align: center; font-size: 12px; font-weight: 600; color: var(--px-muted);} .px-dtp-days {display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;} .px-dtp-day {display: inline-flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; font-size: 13px; color: var(--px-text); background: transparent; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;} .px-dtp-day.is-muted {color: var(--px-light);} .px-dtp-day.is-today:not(.is-selected) {box-shadow: inset 0 0 0 1.5px #88A7F7; color: #5878d0; font-weight: 600;} .px-dtp-day:hover:not(.is-selected) {color: #40528e; background: #E2EBF8;} .px-dtp-day.is-selected {color: #fff; font-weight: 600; background: linear-gradient(135deg, #88A7F7, #beaefa); box-shadow: 0 4px 12px rgba(136, 167, 247, .35);} .px-dtp-day.is-selected:hover {color: #fff; background: linear-gradient(135deg, #7a9af5, #b39ef8);} .px-dtp-time {display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #E2EBF8;} .px-dtp-time-label {flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--px-muted);} .px-dtp-time .form-select {flex: 1 1 0; min-width: 0; border-color: rgba(136, 167, 247, .35); background: #fff;} .px-dtp-time .form-select:focus {border-color: #88A7F7; box-shadow: 0 0 0 .2rem rgba(136, 167, 247, .2);} .px-dtp-time-sep {font-weight: 600; color: var(--px-muted);} .px-dtp-foot {display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(226, 235, 248, .9);} #categoryModal .modal-title {font-size: 14px; font-weight: 600;} #categoryModal .modal-body {padding-top: 12px; padding-bottom: 12px;} #categoryModal #categoryForm.course-form, #categoryModal #categoryForm.course-form .form-control, #categoryModal #categoryForm.course-form textarea, #categoryModal #categoryForm.course-form .col-form-label, #categoryModal #categoryForm.course-form .form-text, #categoryModal #categoryForm.course-form .form-check-label, #categoryModal .modal-footer .btn {font-size: 14px;} #categoryModal #categoryForm.course-form .col-form-label {padding-top: 0; padding-bottom: 0;} #categoryModal #categoryForm.course-form .form-control, #categoryModal #categoryForm.course-form textarea {padding-top: 0.3rem; padding-bottom: 0.3rem;} #categoryModal #categoryForm.course-form .form-text {margin-top: 2px;} .px-kb-doc-table .px-kb-col-id {width: 56px;} .px-kb-doc-table .px-kb-col-size {width: 90px;} .px-kb-doc-table .px-kb-col-status {width: min(280px, 36vw);} .px-kb-doc-table .px-kb-col-time {width: 120px; white-space: nowrap;} .px-kb-doc-table .px-kb-col-actions {width: 88px;} .px-kb-doc-table .cell-title {max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .px-kb-doc-table .cell-sub {max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .px-kb-btn-refresh {padding: 0.2rem 0.45rem; line-height: 1;} .px-kb-btn-refresh .iconfont {font-size: 14px; line-height: 1;} .px-kb-status-cell .d-flex {min-width: 0;} .px-kb-status-cell .px-kb-status-badge {white-space: nowrap;} .px-kb-info-box {padding: 14px 18px; border-radius: 10px; font-size: 14px; line-height: 1.7; color: #6470a0; background: rgba(244, 246, 252, .92); border: 1px solid rgba(220, 228, 246, .82);} .px-kb-status-badge {font-size: 11px; font-weight: 500; border: 0; background: #eef1f8; color: #6470a0;} .px-kb-parse-success, .px-kb-index-completed {background: #d6f5e3; color: #1f7a4d;} .px-kb-parse-pending, .px-kb-index-pending {background: #dbeafe; color: #2563a8;} .px-kb-parse-parsing, .px-kb-index-indexing {background: #fff3d6; color: #9a6b00;} .px-kb-parse-failed, .px-kb-index-failed {background: #fde8e8; color: #b42318;} .px-ai-chat {display: flex; flex-direction: column; height: min(72vh, 720px); min-height: 520px;} .px-ai-chat-body {flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 8px 4px 18px;} .px-ai-empty {height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #9daac6; font-size: 14px;} .px-ai-empty .iconfont {font-size: 40px; color: #88A7F7;} .px-ai-message {display: flex; margin-bottom: 18px;} .px-ai-message-user {justify-content: flex-end;} .px-ai-message-assistant {justify-content: flex-start;} .px-ai-bubble {max-width: 76%; padding: 16px 22px; border-radius: 10px; font-size: 17px; line-height: 1.7; color: #3a4670; background: rgba(234, 234, 255, .82);} .px-ai-answer {width: 100%; color: #3a4670; font-size: 16px; line-height: 1.85;} .px-ai-process-tip {margin: 0 0 12px; font-size: 17px; color: #40528e;} .px-ai-tool {margin-bottom: 16px; padding: 14px 18px; border-radius: 10px; background: rgba(244, 246, 252, .9); border: 1px solid rgba(220, 228, 246, .82);} .px-ai-tool-head {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 16px; font-weight: 600; color: #3a4670;} .px-ai-tool-head .iconfont {margin-right: 8px; font-weight: 400;} .px-ai-tool-status {font-size: 12px; font-weight: 500; color: #6470a0;} .px-ai-tool-section {padding-left: 28px; margin-top: 10px;} .px-ai-tool-label {font-size: 14px; font-weight: 600; color: #7b84a8; margin-bottom: 4px;} .px-ai-tool-text {font-size: 14px; color: #6470a0;} .px-ai-source-item {display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 12px; margin-bottom: 8px; border-radius: 8px; background: rgba(255, 255, 255, .62); color: #6470a0;} .px-ai-source-no {flex: 0 0 auto; min-width: 28px; color: #7b84a8; text-align: center;} .px-ai-source-title {flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .px-ai-source-title a {color: #40528e; text-decoration: none;} .px-ai-source-title a:hover {color: #5878d0; text-decoration: underline;} .px-ai-source-score {flex: 0 0 auto; color: #5969ff; font-weight: 600;} .px-ai-source-empty {padding: 10px 12px; border-radius: 8px; color: #7b84a8; background: rgba(255, 255, 255, .62);} .px-ai-answer-text {margin-top: 10px; font-size: 17px; line-height: 1.9; color: #3a4670;} .px-ai-answer-text strong {font-weight: 700;} .px-ai-answer-text sup {margin-left: 2px; color: #5878d0;} .px-ai-sources {margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(200, 212, 235, .7);} .px-ai-sources-title {margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #6470a0;} .px-ai-input-form {flex: 0 0 auto;} .px-ai-input-box {position: relative; min-height: 126px; border: 1px solid rgba(220, 228, 246, .9); border-radius: 10px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 36px rgba(120, 140, 200, .14);} .px-ai-input-box textarea.form-control {height: 126px; min-height: 126px; resize: none; border: 0; box-shadow: none; padding: 16px 66px 42px 18px; color: #3a4670; background: transparent;} .px-ai-input-box textarea.form-control:focus {box-shadow: none;} .px-ai-send {position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #88A7F7, #beaefa);} .px-ai-send:hover:not(:disabled) {color: #fff; box-shadow: 0 10px 24px rgba(136, 167, 247, .36);} .px-ai-send:disabled {opacity: .62;} .px-ai-send .iconfont {font-size: 20px; line-height: 1;} .px-ai-note {padding-top: 10px; text-align: center; font-size: 14px; color: #9daac6;} .px-ai-loading {display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 10px; color: #6470a0; background: rgba(244, 246, 252, .9);} .px-ai-loading span {width: 7px; height: 7px; border-radius: 50%; background: #88A7F7; animation: pxAiDot 1.2s infinite ease-in-out;} .px-ai-loading span:nth-child(2) {animation-delay: .16s;} .px-ai-loading span:nth-child(3) {animation-delay: .32s;} .px-ai-loading em {font-style: normal; margin-left: 4px;} .px-ai-error {padding: 12px 16px; border-radius: 10px; color: #9a6b00; background: #fff3d6;} @keyframes pxAiDot {0%, 80%, 100% {opacity: .35; transform: translateY(0);} 40% {opacity: 1; transform: translateY(-3px);}} @media (max-width: 768px) { .px-ai-chat {height: 72vh; min-height: 440px;} .px-ai-bubble {max-width: 88%; font-size: 15px;} .px-ai-answer, .px-ai-answer-text {font-size: 15px;} .px-ai-tool-section {padding-left: 0;} .px-ai-tool-head {align-items: flex-start; flex-direction: column;} .px-ai-source-item {align-items: flex-start; flex-direction: column; gap: 4px;} .px-ai-source-title {white-space: normal; overflow: visible; text-overflow: clip;} .px-show-left .px-preview-area.is-docx {} } .px-multi-input-list {width: 100%;} .px-multi-input-row .form-control {flex: 1 1 auto;} .px-multi-input-row .js-remove-category-id {flex: 0 0 auto; min-width: 38px; padding-left: 0; padding-right: 0;} .px-multi-input-row .js-add-category-id {flex: 0 0 auto; min-width: 38px; padding-left: 0; padding-right: 0;} .px-modal-text-pre {white-space: pre-line;} .is-spinning {display: inline-block; animation: pxSpin 0.8s linear infinite;} @keyframes pxSpin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}} /* ---------- 学习跟踪详情 摘要条 ---------- */ .tracking-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(244, 248, 255, .78), rgba(238, 232, 250, .72)); border: 1px solid rgba(220, 228, 248, .85); box-shadow: 0 8px 20px rgba(120, 140, 200, .08); } .tracking-summary-main { display: flex; align-items: center; gap: 14px; flex: 1 1 480px; min-width: 0; } .tracking-summary-side { display: flex; flex-direction: row; gap: 10px; flex: 0 1 auto; min-width: 0; } .tracking-avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 12px rgba(120, 140, 200, .22), inset 0 0 0 2px rgba(255, 255, 255, .92); } .tracking-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; } .tracking-avatar-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 20px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #88A7F7, #beaefa); letter-spacing: 0; } .tracking-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .tracking-info-name { font-size: 16px; font-weight: 600; color: var(--px-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tracking-info-meta { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; font-size: 12px; } .tracking-info-meta-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .tracking-info-meta-label { color: var(--px-light); } .tracking-info-meta-value { color: var(--px-muted); font-weight: 500; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tracking-ring { position: relative; flex: 0 0 auto; width: 72px; height: 72px; margin-left: auto; } .tracking-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .tracking-ring-track { fill: none; stroke: rgba(136, 167, 247, .16); stroke-width: 7; } .tracking-ring-bar { fill: none; stroke: #ADD09F; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); } .tracking-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .tracking-ring-num { font-size: 16px; font-weight: 700; color: var(--px-text); } .tracking-ring-unit { font-size: 11px; font-weight: 600; margin-left: 1px; color: var(--px-muted); } .tracking-ring-cap { margin-top: 2px; font-size: 10px; color: var(--px-light); letter-spacing: .04em; } .tracking-ring-sub { position: absolute; right: -8px; bottom: -6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; color: #fff; background: linear-gradient(135deg, #88A7F7, #beaefa); box-shadow: 0 3px 8px rgba(136, 167, 247, .35); white-space: nowrap; } .tracking-stat-card { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(244, 248, 255, .6)); border: 1px solid rgba(220, 228, 248, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 3px 10px rgba(120, 140, 200, .06); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); flex: 0 0 auto; } .tracking-stat-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #5d76b8; background: linear-gradient(135deg, rgba(204, 226, 255, .65), rgba(232, 220, 250, .65)); } .tracking-stat-icon .iconfont { font-size: 14px; line-height: 1; } .tracking-stat-body { min-width: 0; display: flex; align-items: baseline; gap: 6px; } .tracking-stat-label { font-size: 12px; color: var(--px-light); line-height: 1.2; white-space: nowrap; } .tracking-stat-value { font-size: 15px; font-weight: 600; color: var(--px-text); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 900px) { .tracking-summary-side { flex: 1 1 100%; } } @media (max-width: 640px) { .tracking-summary { padding: 12px; } .tracking-summary-main { flex-wrap: wrap; } .tracking-avatar { width: 44px; height: 44px; } .tracking-info-name { font-size: 15px; } .tracking-ring { width: 64px; height: 64px; } .tracking-ring-num { font-size: 15px; } .tracking-stat-card { flex: 1 1 0; } } .tracking-progress { position: relative; width: 80px; height: 18px; border-radius: 999px; background: linear-gradient(90deg, rgba(230, 236, 246, .72), rgba(238, 242, 250, .72)); border: 1px solid rgba(190, 202, 226, .55); box-shadow: inset 0 1px 2px rgba(120, 140, 200, .08); overflow: hidden; flex: 0 0 auto; } .tracking-progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #b9e8c5 0%, #c7ebd2 55%, #90d2af 100%); border-right: 1px solid rgba(60, 170, 110, .35); transition: width .6s cubic-bezier(.4, 0, .2, 1); } .tracking-progress-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; color: var(--px-text); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); } .tracking-progress.is-done .tracking-progress-text { color: #fff; text-shadow: 0 1px 2px rgba(40, 120, 80, .35); } .cert-canvas {position: relative; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(58,70,112,.12); user-select: none; touch-action: none; margin: 32px 0 8px;} .cert-canvas-inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; transform-origin: top left;} .cert-layer {position: absolute; cursor: move; box-sizing: border-box; transform-origin: center center; z-index: 1;} .cert-layer-inner {position: relative; width: 100%; height: 100%; white-space: pre-wrap; line-height: inherit; padding: 0; box-sizing: border-box;} .cert-layer:hover {outline: 1px dashed var(--px-primary); outline-offset: 0;} .cert-layer-active {outline: 2px dashed var(--px-primary); outline-offset: 0; z-index: 3;} .cert-layer-active:hover {outline: 2px dashed var(--px-primary);} .cert-canvas.is-inline-editing {user-select: text; touch-action: auto;} .cert-layer-editing {cursor: text; z-index: 4;} .cert-layer-editing .cert-layer-inner {cursor: text; user-select: text; min-height: 1.4em;} .cert-layer-editing .cert-handle {display: none !important;} .cert-layer-seal .cert-layer-inner {background-size: contain; background-repeat: no-repeat; background-position: center; white-space: normal; min-height: 40px; aspect-ratio: 1; padding: 0;} .cert-handle {position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--px-primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(58,70,112,.35); z-index: 5; display: none; pointer-events: auto; touch-action: none;} .cert-layer-active .cert-handle {display: block;} .cert-handle-corner {width: 10px; height: 10px;} .cert-handle-nw {top: -5px; left: -5px; cursor: nwse-resize;} .cert-handle-ne {top: -5px; right: -5px; cursor: nesw-resize;} .cert-handle-sw {bottom: -5px; left: -5px; cursor: nesw-resize;} .cert-handle-se {bottom: -5px; right: -5px; cursor: nwse-resize;} .cert-handle-rotate {top: -28px; left: 50%; width: 12px; height: 12px; margin-left: -6px; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a6a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E") 12 12, grab;} .cert-layer.is-rotating .cert-handle-rotate {cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a6a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E") 12 12, grabbing;} .cert-layer.is-resizing .cert-handle-corner {opacity: 1;} .cert-layer-rotate-snap {outline-color: var(--px-primary) !important;} .cert-layer-rotate-snap .cert-handle-rotate {background: #5a8af7; box-shadow: 0 0 0 3px rgba(136,167,247,.35);} .cert-align-btns .btn {width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;} .cert-align-btns .btn svg {display: block;} .cert-upload-preview {display: block; max-width: 120px; margin-top: 10px; border-radius: 6px;} .cert-upload-preview-seal {max-width: 60px;} .cert-upload-preview.is-empty {display: none;} .cert-display {position: relative; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(58,70,112,.12); background: #f4f6fb;} .cert-display-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block;} .cert-display-detail {max-width: 820px; margin-left: auto; margin-right: auto;} .px-stat-grid > [class*="col"]:nth-child(1) .px-stat-card {animation-delay: 0ms;} .px-stat-grid > [class*="col"]:nth-child(2) .px-stat-card {animation-delay: 45ms;} .px-stat-grid > [class*="col"]:nth-child(3) .px-stat-card {animation-delay: 90ms;} .px-stat-grid > [class*="col"]:nth-child(4) .px-stat-card {animation-delay: 135ms;} .px-stat-grid > [class*="col"]:nth-child(5) .px-stat-card {animation-delay: 180ms;} .px-stat-grid > [class*="col"]:nth-child(6) .px-stat-card {animation-delay: 225ms;} .px-stat-grid > [class*="col"]:nth-child(7) .px-stat-card {animation-delay: 270ms;} .px-stat-grid > [class*="col"]:nth-child(8) .px-stat-card {animation-delay: 315ms;} .px-stat-card {position: relative; display: flex; align-items: center; gap: 14px; height: 100%; min-height: 70px; padding: 10px 18px 10px; border-radius: 16px; background: linear-gradient(150deg, rgba(255, 255, 255, .82) 0%, rgba(250, 252, 255, .62) 50%, rgba(244, 248, 255, .5) 100%); border: 1px solid transparent; box-shadow: 0 6px 18px var(--px-stat-shadow, rgba(136, 167, 247, .08)), 0 1px 4px rgba(114, 136, 217, .04), inset 0 1px 0 rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); overflow: hidden; isolation: isolate; transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s cubic-bezier(.4, 0, .2, 1); animation: pxStatFadeUp .55s cubic-bezier(.4, 0, .2, 1) both;} .px-stat-card::before {content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--px-stat-border-start, rgba(204, 226, 255, .72)) 0%, var(--px-stat-border-end, rgba(231, 212, 245, .52)) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0;} .px-stat-card::after {content: ''; position: absolute; right: -32px; top: -32px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at center, var(--px-stat-glow, rgba(136, 167, 247, .18)) 0%, rgba(255, 255, 255, 0) 68%); opacity: .85; pointer-events: none; z-index: 0; transition: opacity .28s ease, transform .28s ease;} .px-stat-card:hover {transform: translateY(-2px); box-shadow: 0 10px 26px var(--px-stat-shadow-hover, rgba(136, 167, 247, .14)), 0 2px 6px rgba(114, 136, 217, .05), inset 0 1px 0 rgba(255, 255, 255, .98);} .px-stat-card:hover::after {opacity: 1; transform: scale(1.08);} .px-stat-card-icon {position: relative; z-index: 1; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--px-stat-icon-bg-start, rgba(204, 226, 255, .58)) 0%, var(--px-stat-icon-bg-end, rgba(231, 212, 245, .36)) 100%); border: 1px solid rgba(255, 255, 255, .82); box-shadow: 0 2px 6px var(--px-stat-icon-shadow, rgba(136, 167, 247, .12)), inset 0 1px 0 rgba(255, 255, 255, .9);} .px-stat-card-icon .iconfont {font-size: 19px; line-height: 1; color: var(--px-stat-icon-color, #6f8ff1); filter: drop-shadow(0 1px 1px var(--px-stat-icon-shadow, rgba(136, 167, 247, .18)));} .px-stat-card-body {position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;} .px-stat-card-label {display: flex; align-items: center; font-size: 11.5px; font-weight: 500; color: var(--px-muted); letter-spacing: .04em; line-height: 1.3; text-transform: none;} .px-stat-card-value {font-size: 25px; font-weight: 600; color: var(--px-text); line-height: 1.05; letter-spacing: -.015em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 2px;} .px-stat-card-unit {margin-left: 3px; font-size: 12px; font-weight: 500; color: var(--px-muted); letter-spacing: .01em; font-variant-numeric: tabular-nums;} .px-stat-card-meta {font-size: 11px; color: var(--px-light); letter-spacing: .02em; line-height: 1.3; display: flex; align-items: center; gap: 4px; min-height: 14px;} .px-stat-card-meta:empty {display: none;} .px-stat-card-tone-user {--px-stat-border-start: rgba(204, 226, 255, .82); --px-stat-border-end: rgba(196, 184, 240, .56); --px-stat-shadow: rgba(136, 167, 247, .1); --px-stat-shadow-hover: rgba(136, 167, 247, .16); --px-stat-glow: rgba(136, 167, 247, .22); --px-stat-icon-bg-start: rgba(204, 226, 255, .62); --px-stat-icon-bg-end: rgba(231, 212, 245, .36); --px-stat-icon-color: #6f8ff1; --px-stat-icon-shadow: rgba(111, 143, 241, .22); --px-stat-label-bar-start: #88A7F7; --px-stat-label-bar-end: rgba(196, 184, 240, .6);} .px-stat-card-tone-login {--px-stat-border-start: rgba(210, 238, 230, .8); --px-stat-border-end: rgba(186, 224, 212, .54); --px-stat-shadow: rgba(126, 196, 184, .1); --px-stat-shadow-hover: rgba(126, 196, 184, .16); --px-stat-glow: rgba(126, 196, 184, .22); --px-stat-icon-bg-start: rgba(224, 244, 238, .66); --px-stat-icon-bg-end: rgba(200, 232, 222, .36); --px-stat-icon-color: #4a9a88; --px-stat-icon-shadow: rgba(74, 154, 136, .22); --px-stat-label-bar-start: #4a9a88; --px-stat-label-bar-end: rgba(186, 224, 212, .6);} .px-stat-card-tone-sms {--px-stat-border-start: rgba(228, 216, 248, .8); --px-stat-border-end: rgba(210, 192, 240, .56); --px-stat-shadow: rgba(184, 164, 232, .1); --px-stat-shadow-hover: rgba(184, 164, 232, .16); --px-stat-glow: rgba(184, 164, 232, .22); --px-stat-icon-bg-start: rgba(237, 226, 252, .64); --px-stat-icon-bg-end: rgba(220, 204, 245, .36); --px-stat-icon-color: #8b6fd4; --px-stat-icon-shadow: rgba(139, 111, 212, .22); --px-stat-label-bar-start: #8b6fd4; --px-stat-label-bar-end: rgba(210, 192, 240, .6);} .px-stat-card-tone-learn {--px-stat-border-start: rgba(214, 226, 250, .8); --px-stat-border-end: rgba(192, 210, 244, .56); --px-stat-shadow: rgba(138, 168, 232, .1); --px-stat-shadow-hover: rgba(138, 168, 232, .16); --px-stat-glow: rgba(138, 168, 232, .22); --px-stat-icon-bg-start: rgba(224, 234, 252, .62); --px-stat-icon-bg-end: rgba(204, 220, 248, .36); --px-stat-icon-color: #5a7fd4; --px-stat-icon-shadow: rgba(90, 127, 212, .22); --px-stat-label-bar-start: #5a7fd4; --px-stat-label-bar-end: rgba(192, 210, 244, .6);} .px-stat-card-tone-time {--px-stat-border-start: rgba(208, 232, 248, .8); --px-stat-border-end: rgba(184, 216, 238, .56); --px-stat-shadow: rgba(126, 184, 220, .1); --px-stat-shadow-hover: rgba(126, 184, 220, .16); --px-stat-glow: rgba(126, 184, 220, .22); --px-stat-icon-bg-start: rgba(220, 238, 252, .62); --px-stat-icon-bg-end: rgba(196, 224, 244, .36); --px-stat-icon-color: #4a8ab8; --px-stat-icon-shadow: rgba(74, 138, 184, .22); --px-stat-label-bar-start: #4a8ab8; --px-stat-label-bar-end: rgba(184, 216, 238, .6);} .px-stat-card-tone-rate {--px-stat-border-start: rgba(214, 238, 222, .8); --px-stat-border-end: rgba(190, 224, 202, .56); --px-stat-shadow: rgba(140, 196, 160, .1); --px-stat-shadow-hover: rgba(140, 196, 160, .16); --px-stat-glow: rgba(140, 196, 160, .22); --px-stat-icon-bg-start: rgba(228, 244, 232, .64); --px-stat-icon-bg-end: rgba(204, 232, 210, .36); --px-stat-icon-color: #4a9a68; --px-stat-icon-shadow: rgba(74, 154, 104, .22); --px-stat-label-bar-start: #4a9a68; --px-stat-label-bar-end: rgba(190, 224, 202, .6);} .px-stat-card-tone-article {--px-stat-border-start: rgba(252, 226, 200, .82); --px-stat-border-end: rgba(244, 206, 184, .56); --px-stat-shadow: rgba(224, 168, 116, .1); --px-stat-shadow-hover: rgba(224, 168, 116, .16); --px-stat-glow: rgba(232, 158, 110, .24); --px-stat-icon-bg-start: rgba(254, 236, 218, .7); --px-stat-icon-bg-end: rgba(244, 216, 196, .38); --px-stat-icon-color: #d68a4a; --px-stat-icon-shadow: rgba(214, 138, 74, .22); --px-stat-label-bar-start: #d68a4a; --px-stat-label-bar-end: rgba(244, 206, 184, .6);} .px-stat-card-tone-video {--px-stat-border-start: rgba(252, 216, 232, .82); --px-stat-border-end: rgba(244, 196, 218, .56); --px-stat-shadow: rgba(224, 134, 178, .1); --px-stat-shadow-hover: rgba(224, 134, 178, .16); --px-stat-glow: rgba(232, 130, 174, .22); --px-stat-icon-bg-start: rgba(254, 226, 240, .68); --px-stat-icon-bg-end: rgba(244, 208, 226, .38); --px-stat-icon-color: #d96aa6; --px-stat-icon-shadow: rgba(217, 106, 166, .22); --px-stat-label-bar-start: #d96aa6; --px-stat-label-bar-end: rgba(244, 196, 218, .6);} .px-stat-card-tone-ai {--px-stat-border-start: rgba(204, 232, 240, .82); --px-stat-border-end: rgba(174, 218, 232, .56); --px-stat-shadow: rgba(106, 188, 212, .1); --px-stat-shadow-hover: rgba(106, 188, 212, .16); --px-stat-glow: rgba(106, 188, 212, .22); --px-stat-icon-bg-start: rgba(220, 244, 248, .68); --px-stat-icon-bg-end: rgba(192, 230, 240, .36); --px-stat-icon-color: #38a4c4; --px-stat-icon-shadow: rgba(56, 164, 196, .22); --px-stat-label-bar-start: #38a4c4; --px-stat-label-bar-end: rgba(174, 218, 232, .6);} .px-stat-card-tone-primary {--px-stat-border-start: rgba(204, 218, 252, .82); --px-stat-border-end: rgba(184, 198, 248, .56); --px-stat-shadow: rgba(108, 134, 222, .12); --px-stat-shadow-hover: rgba(108, 134, 222, .18); --px-stat-glow: rgba(108, 134, 222, .26); --px-stat-icon-bg-start: rgba(218, 228, 254, .72); --px-stat-icon-bg-end: rgba(196, 210, 252, .42); --px-stat-icon-color: #5e7ad8; --px-stat-icon-shadow: rgba(94, 122, 216, .26); --px-stat-label-bar-start: #5e7ad8; --px-stat-label-bar-end: rgba(184, 198, 248, .6);} .px-stat-card-tone-cert {--px-stat-border-start: rgba(248, 232, 200, .84); --px-stat-border-end: rgba(240, 216, 168, .58); --px-stat-shadow: rgba(216, 174, 80, .12); --px-stat-shadow-hover: rgba(216, 174, 80, .18); --px-stat-glow: rgba(232, 178, 88, .26); --px-stat-icon-bg-start: rgba(252, 244, 222, .72); --px-stat-icon-bg-end: rgba(248, 232, 196, .42); --px-stat-icon-color: #c89432; --px-stat-icon-shadow: rgba(200, 148, 50, .24); --px-stat-label-bar-start: #c89432; --px-stat-label-bar-end: rgba(240, 216, 168, .6);} .px-stat-card-tone-active {--px-stat-border-start: rgba(232, 220, 252, .82); --px-stat-border-end: rgba(216, 200, 244, .56); --px-stat-shadow: rgba(166, 130, 218, .1); --px-stat-shadow-hover: rgba(166, 130, 218, .16); --px-stat-glow: rgba(166, 130, 218, .22); --px-stat-icon-bg-start: rgba(240, 228, 254, .68); --px-stat-icon-bg-end: rgba(224, 208, 248, .38); --px-stat-icon-color: #9466d4; --px-stat-icon-shadow: rgba(148, 102, 212, .22); --px-stat-label-bar-start: #9466d4; --px-stat-label-bar-end: rgba(216, 200, 244, .6);} .px-stat-card-tone-teacher {--px-stat-border-start: rgba(220, 234, 224, .82); --px-stat-border-end: rgba(196, 220, 204, .56); --px-stat-shadow: rgba(108, 168, 130, .1); --px-stat-shadow-hover: rgba(108, 168, 130, .16); --px-stat-glow: rgba(108, 168, 130, .22); --px-stat-icon-bg-start: rgba(232, 246, 234, .68); --px-stat-icon-bg-end: rgba(208, 232, 214, .38); --px-stat-icon-color: #4f8e6a; --px-stat-icon-shadow: rgba(79, 142, 106, .22); --px-stat-label-bar-start: #4f8e6a; --px-stat-label-bar-end: rgba(196, 220, 204, .6);} .px-stat-footnote {display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .58) 0%, rgba(246, 249, 255, .4) 100%); border: 1px solid rgba(255, 255, 255, .78); box-shadow: 0 2px 10px rgba(114, 136, 217, .04), inset 0 1px 0 rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);} .px-stat-footnote-title {font-size: 12px; font-weight: 600; color: var(--px-muted); letter-spacing: .02em; margin-right: 2px;} .px-stat-footnote-chip {display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .52); border: 1px solid rgba(218, 228, 248, .65);} .px-stat-footnote-label {font-size: 11px; color: var(--px-light);} .px-stat-footnote-value {font-size: 13px; font-weight: 600; color: var(--px-text); font-variant-numeric: tabular-nums;} @keyframes pxStatFadeUp {from {opacity: 0; transform: translateY(8px);} to {opacity: 1; transform: translateY(0);}} @media (max-width: 576px) {.px-stat-card {min-height: 88px; padding: 14px 14px 13px; gap: 12px; border-radius: 13px;} .px-stat-card-icon {flex-basis: 40px; width: 40px; height: 40px; border-radius: 11px;} .px-stat-card-icon .iconfont {font-size: 17px;} .px-stat-card-value {font-size: 22px;} .px-stat-card-label {font-size: 11px;} .px-stat-card-body {gap: 5px;} .px-stat-footnote-chip {padding: 3px 8px;}} .stat-chart-wrap {background: var(--px-card); border: 1px solid var(--px-card-border); border-radius: 12px; padding: 12px;} .stat-metric-tags {display: flex; flex-wrap: wrap; gap: 8px;} .stat-metric-tag {border: 1px solid rgba(136, 167, 247, .42); border-radius:8px; padding: 5px 14px; font-size: 13px; line-height: 1.4; color: var(--px-muted); background: rgba(255, 255, 255, .55); cursor: pointer; transition: border-color .15s, color .15s, background .15s;} .stat-metric-tag:hover {border-color: var(--px-primary); color: var(--px-text);} .stat-metric-tag.active {border-color: var(--px-primary); color: var(--px-text); background: rgba(136, 167, 247, .16); font-weight: 600;} .stat-chart {width: 100%; height: 360px;} .stat-sort {color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px;} .stat-sort.is-active {color: var(--px-primary);} .stat-arrow {display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .3;} .stat-arrow-up {border-bottom: 5px solid currentColor;} .stat-arrow-down {border-top: 5px solid currentColor;} .stat-arrow.on {opacity: 1; color: var(--px-primary);} @media (max-width: 576px) {.stat-chart {height: 320px;}} .ai-type-badge {display:inline-flex; align-items:center; padding:0 4px; border-radius:50%; line-height:18px; background:rgba(245,178,60,.22); color:#b87800; margin-left:4px;} .ai-type-badge .iconfont {font-size:18px; line-height:1; color:inherit;} .ai-type-tts {background:rgba(124,196,178,.18); color:#3f8f7c;} .ai-type-vision {background:rgba(247,179,136,.18); color:#b87a3f;} .ai-type-ocr {background:rgba(180,160,230,.18); color:#7a5fb8;} .px-act-chat-bubble-live {position: relative;} .px-act-chat-speaker {display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(157, 170, 198, .35); border-radius: 6px; background: rgba(255, 255, 255, .55); color: var(--px-light, #9daac6); flex-shrink: 0; cursor: pointer; transition: color .15s, border-color .15s, background .15s;} .px-act-chat-speaker:hover {color: var(--px-primary, #88A7F7); border-color: rgba(136, 167, 247, .45);} .px-act-chat-speaker-icon {display: inline-block; pointer-events: none; font-size: 14px; line-height: 1;} .px-act-chat-row.is-teacher .px-act-chat-speaker {color: #9eb0e0;} .px-act-chat-row.is-student .px-act-chat-speaker {color: #b0a0dc;} .px-act-chat-row.is-user .px-act-chat-speaker {color: #c0a0d8;} .px-act-chat-speaker.is-playing {color: var(--px-primary, #88A7F7); border-color: rgba(136, 167, 247, .72); background: rgba(136, 167, 247, .14); box-shadow: 0 0 0 2px rgba(136, 167, 247, .16);} .px-act-chat-speaker.is-playing .px-act-chat-speaker-icon {animation: px-chat-speaker-pulse .8s ease-in-out infinite;} @keyframes px-chat-speaker-pulse {0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.14);opacity:.72;}} .btn.px-btn-soft.btn-sm.js-tts-preview-select {border: 1px solid rgba(136, 167, 247, .48); background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);} .btn.px-btn-soft.btn-sm.js-tts-preview-select:hover {border-color: rgba(136, 167, 247, .68); color: var(--px-primary); background: rgba(236, 241, 252, .96);} .btn.px-btn-soft.btn-sm.js-tts-preview-select.is-playing {color: var(--px-primary); border-color: rgba(136, 167, 247, .78); background: rgba(136, 167, 247, .14); box-shadow: 0 0 0 2px rgba(136, 167, 247, .18);} .btn.px-btn-soft.btn-sm.js-tts-preview-select.is-playing .iconfont {display: inline-block; animation: px-chat-speaker-pulse .8s ease-in-out infinite;} .px-auto-chat-voice-panel {border-radius: 12px; padding: 14px 16px; border: 1px solid transparent;} .px-auto-chat-voice-panel.is-teacher {background: rgba(136, 167, 247, .14); border-color: rgba(136, 167, 247, .28);} .px-auto-chat-voice-panel.is-student {background: rgba(124, 196, 178, .14); border-color: rgba(124, 196, 178, .28);} .px-auto-chat-voice-panel-title {font-size: 13px; font-weight: 600; color: var(--px-muted); margin-bottom: 10px;} .px-auto-chat-voice-list {display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px;} .px-auto-chat-voice-item {display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid transparent; background: rgba(255, 255, 255, .72); cursor: pointer; transition: border-color .15s, box-shadow .15s;} .px-auto-chat-voice-item:has(.px-auto-chat-voice-radio:checked) {border-color: rgba(136, 167, 247, .45); box-shadow: 0 2px 8px rgba(136, 167, 247, .12);} .px-auto-chat-voice-panel.is-student .px-auto-chat-voice-item:has(.px-auto-chat-voice-radio:checked) {border-color: rgba(124, 196, 178, .5); box-shadow: 0 2px 8px rgba(124, 196, 178, .12);} .px-auto-chat-voice-item.is-custom {background: rgba(255, 244, 220, .55); border-style: dashed;} .px-auto-chat-voice-radio {margin: 0; flex-shrink: 0; width: 14px; height: 14px;} .px-auto-chat-voice-tag {display: inline-block; flex-shrink: 0; max-width: 132px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .px-auto-chat-voice-tag.is-violet {color: #6b4fa8; background: rgba(168, 140, 230, .22);} .px-auto-chat-voice-tag.is-rose {color: #b04a78; background: rgba(232, 140, 180, .22);} .px-auto-chat-voice-tag.is-sky {color: #3a6ea8; background: rgba(120, 180, 240, .22);} .px-auto-chat-voice-tag.is-teal {color: #2a7a6a; background: rgba(100, 200, 180, .22);} .px-auto-chat-voice-tag.is-amber {color: #a07020; background: rgba(240, 190, 90, .24);} .px-auto-chat-voice-tag.is-indigo {color: #4a50a0; background: rgba(140, 150, 230, .22);} .px-auto-chat-voice-tag.is-emerald {color: #2a8058; background: rgba(100, 210, 150, .22);} .px-auto-chat-voice-tag.is-orange {color: #b05828; background: rgba(240, 160, 100, .24);} .px-auto-chat-voice-sample {flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--px-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .px-auto-chat-voice-play {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--px-light); flex-shrink: 0; cursor: pointer; transition: color .15s, transform .15s;} .px-auto-chat-voice-play .iconfont {font-size: 20px; line-height: 1;} .px-auto-chat-voice-play:hover {color: var(--px-primary);} .px-ai-extract-preview {border-radius: 12px; border: 1px solid rgba(187, 201, 238, .46); background: rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(115, 133, 194, .08); overflow: hidden;} .px-ai-extract-preview-toggle {display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: 0; background: linear-gradient(180deg, rgba(248, 250, 255, .98), rgba(241, 245, 255, .9)); color: var(--px-text, #3a4670); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background .2s ease;} .px-ai-extract-preview-toggle:hover {background: linear-gradient(180deg, rgba(241, 245, 255, .98), rgba(233, 240, 255, .92));} .px-ai-extract-preview-icon {display: inline-block; font-size: 12px; color: var(--px-muted, #6470a0); transition: transform .22s ease;} .px-ai-extract-preview-toggle[aria-expanded="true"] .px-ai-extract-preview-icon {transform: rotate(180deg);} .px-ai-extract-preview-toggle-text {flex: 0 0 auto;} .px-ai-extract-preview-meta {margin-left: auto; font-weight: 500;} .px-ai-extract-preview-body-wrap {position: relative; --px-ai-extract-preview-h: 120px; --px-ai-extract-preview-fade-bg: #fff; background: rgba(255, 255, 255, .58);} .px-ai-extract-preview-body-wrap.is-collapsed {height: var(--px-ai-extract-preview-h); min-height: var(--px-ai-extract-preview-h); overflow: hidden;} .px-ai-extract-preview-body-wrap.is-expanded {height: auto; max-height: 360px; overflow-y: auto; overflow-x: hidden;} .px-ai-extract-preview-body {padding: 10px 16px 14px; color: #4a5680; font-size: 13px; line-height: 1.85; white-space: pre-wrap; word-break: break-word;} .px-ai-extract-preview-body-wrap.is-collapsed .px-ai-extract-preview-body {height: 100%; overflow: hidden;} .px-ai-extract-preview-fade {display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 24%, rgba(255, 255, 255, .58) 56%, rgba(255, 255, 255, .92) 80%, var(--px-ai-extract-preview-fade-bg) 100%); pointer-events: none; z-index: 1; opacity: 0; transition: opacity .28s ease;} .px-ai-extract-preview-body-wrap.is-collapsed.is-overflow .px-ai-extract-preview-fade {display: block; opacity: 1;} .px-ai-extract-preview-body-wrap.is-expanded .px-ai-extract-preview-fade {display: none; opacity: 0;} /* CKEditor 4 外观统一：与 .px-ai-extract-preview 外壳一致（圆角/边框/渐变工具栏） */ .cke_chrome {border-radius: 12px; border: 1px solid rgba(187, 201, 238, .46) !important; background: rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(115, 133, 194, .08); overflow: hidden;} .cke_chrome .cke_top {background: linear-gradient(180deg, rgba(248, 250, 255, .98), rgba(241, 245, 255, .9)); border-bottom: 1px solid rgba(187, 201, 238, .46) !important; padding: 6px 8px;} .cke_chrome .cke_top .cke_toolgroup {background: transparent; border: 0; box-shadow: none; margin: 0 4px 0 0; border-radius: 8px;} .cke_chrome .cke_top .cke_button {border-radius: 6px; padding: 2px 4px;} .cke_chrome .cke_top .cke_button:hover, .cke_chrome .cke_top .cke_button.cke_on {background: rgba(136, 167, 247, .14);} .cke_chrome .cke_top .cke_button .cke_icon {opacity: .9;} .cke_chrome .cke_top .cke_combo {border-radius: 6px;} .cke_chrome .cke_contents {background: rgba(255, 255, 255, .92); box-shadow: none; border: 0;} .cke_chrome .cke_contents iframe {background: transparent;} .cke_chrome .cke_inner {background: transparent;} .cke_chrome .cke_bottom {background: rgba(241, 245, 255, .7); border-top: 1px solid rgba(187, 201, 238, .46) !important; box-shadow: none;} .cke_chrome .cke_resizer {border: 0; background: transparent;} .cke_1 .cke_bottom {border-top-color: rgba(187, 201, 238, .46) !important; } .px-log-viewer-wrap {border: 1px solid rgba(187, 201, 238, .55); border-radius: 12px; background: rgba(255, 255, 255, .58); padding: 16px;} .px-log-viewer-meta .fw-semibold {color: var(--px-text);} .px-log-viewer-body {max-height: calc(100vh - 280px); min-height: 360px; overflow-y: auto; border-radius: 8px; background: #1e1e2e; border: 1px solid rgba(30, 30, 46, .18);} .px-log-viewer-pre {font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 1.65; margin: 0; padding: 16px; color: #cdd6f4; white-space: pre-wrap; word-break: break-all;} .exam-option-list .js-opt-check.is-checked {background: linear-gradient(135deg, #3d8f5c, #2d7a4a); color: #fff; border-color: transparent;} .exam-option-key {min-width: 20px; font-weight: 600; color: var(--px-muted);} .exam-subjective .js-submit-type.is-active {background: var(--px-primary); color: #fff;} /* ---------- 有机自然 / 柔和 通用组件 ---------- */ :root { --px-lawn: #b9d8a4; --px-lawn-deep: #6fa56a; --px-moss: #5f8d6c; --px-sand: #efe3c8; --px-cream: #faf5ea; --px-dawn: #ffd9c2; --px-mist: #d8e1ec; --px-bark: #8a7a68; --px-leaf-dark: #4a7a55; } .px-aurora-section { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 18% 12%, rgba(204, 226, 255, .55) 0%, rgba(204, 226, 255, 0) 60%), radial-gradient(ellipse 60% 50% at 88% 22%, rgba(255, 217, 194, .42) 0%, rgba(255, 217, 194, 0) 65%), radial-gradient(ellipse 80% 60% at 50% 95%, rgba(228, 244, 220, .5) 0%, rgba(228, 244, 220, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(247, 250, 244, .6) 100%); } .px-aurora-section::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 30% 40%, rgba(136, 167, 247, .08) 0, transparent 40%), radial-gradient(circle at 70% 60%, rgba(190, 174, 250, .08) 0, transparent 45%); pointer-events: none; } .px-grain-soft { position: relative; isolation: isolate; } .px-grain-soft::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 160px 160px; } .px-blob { position: absolute; border-radius: 48% 52% 60% 40% / 50% 45% 55% 50%; filter: blur(28px); opacity: .55; pointer-events: none; animation: pxBlobMorph 16s ease-in-out infinite; } .px-blob--a { width: 280px; height: 260px; background: radial-gradient(circle at 30% 30%, rgba(204, 226, 255, .9), rgba(231, 212, 245, .55)); } .px-blob--b { width: 220px; height: 240px; background: radial-gradient(circle at 60% 40%, rgba(255, 217, 194, .85), rgba(255, 230, 200, .4)); animation-duration: 19s; animation-delay: -3s; } .px-blob--c { width: 320px; height: 200px; background: radial-gradient(circle at 50% 50%, rgba(212, 232, 220, .85), rgba(228, 244, 220, .35)); animation-duration: 22s; animation-delay: -7s; } @keyframes pxBlobMorph { 0%, 100% { border-radius: 48% 52% 60% 40% / 50% 45% 55% 50%; transform: translate(0, 0) rotate(0deg); } 33% { border-radius: 60% 40% 50% 50% / 45% 55% 45% 55%; transform: translate(8px, -10px) rotate(6deg); } 66% { border-radius: 42% 58% 55% 45% / 55% 45% 50% 50%; transform: translate(-6px, 6px) rotate(-5deg); } } .px-floating-leaf { position: absolute; pointer-events: none; opacity: .35; } .px-floating-leaf svg { display: block; } .px-leaf-card { position: relative; padding: 22px 22px 22px 26px; border-radius: 8px 26px 26px 26px; background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(248, 252, 244, .86)); border: 1px solid rgba(190, 220, 195, .35); box-shadow: 0 10px 30px rgba(120, 160, 130, .1), inset 0 1px 0 rgba(255, 255, 255, .9); transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease, border-color .28s ease; } .px-leaf-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(120, 160, 130, .18), inset 0 1px 0 rgba(255, 255, 255, .9); border-color: rgba(150, 200, 160, .55); } .px-leaf-card::before { content: ''; position: absolute; top: -2px; left: -2px; width: 28px; height: 28px; background: radial-gradient(circle at 100% 100%, transparent 50%, rgba(255, 255, 255, .92) 51%); border-radius: 50%; box-shadow: 4px 4px 0 0 rgba(190, 220, 195, .35); } .px-leaf-card::after { content: ''; position: absolute; top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; background: linear-gradient(135deg, rgba(150, 200, 160, .6), rgba(111, 165, 106, .3)); transform: rotate(-45deg); opacity: .7; } .px-pebble-stat { position: relative; padding: 18px 20px; border-radius: 30px; background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(247, 252, 248, .88)); border: 1px solid rgba(190, 220, 195, .4); box-shadow: 0 6px 22px rgba(111, 165, 106, .12), inset 0 1px 0 rgba(255, 255, 255, .95); overflow: hidden; } .px-pebble-stat::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(204, 226, 255, .35) 0%, rgba(204, 226, 255, 0) 70%); pointer-events: none; } .px-pebble-stat-num { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--px-text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .px-pebble-stat-num small { font-size: 13px; font-weight: 500; color: var(--px-muted); margin-left: 4px; } .px-pebble-stat-label { font-size: 13px; color: var(--px-muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; } .px-pebble-stat-label i { font-style: normal; color: var(--px-lawn-deep); } .px-pebble-stat-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(232, 248, 238, .92); color: var(--px-leaf-dark); border: 1px solid rgba(111, 165, 106, .28); margin-top: 8px; } .px-pebble-stat-delta.is-down { background: rgba(255, 232, 230, .92); color: #b85a4a; border-color: rgba(220, 130, 120, .32); } .px-pod-card { display: flex; align-items: stretch; gap: 14px; padding: 14px 16px; border-radius: 999px; background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(244, 252, 246, .82)); border: 1px solid rgba(190, 220, 195, .4); box-shadow: 0 6px 20px rgba(111, 165, 106, .1), inset 0 1px 0 rgba(255, 255, 255, .92); transition: box-shadow .25s ease, transform .25s ease; } .px-pod-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(111, 165, 106, .18); } .px-pod-card-avatar { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 600; background: linear-gradient(135deg, var(--px-lawn-deep), var(--px-moss)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 12px rgba(95, 141, 108, .3); } .px-pod-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .px-pod-card-title { font-size: 14px; font-weight: 600; color: var(--px-text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .px-pod-card-sub { font-size: 12px; color: var(--px-muted); line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .px-pod-card-actions { flex-shrink: 0; display: flex; align-items: center; gap: 6px; } .px-sprout-dot { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.3; background: rgba(232, 248, 238, .88); color: var(--px-leaf-dark); border: 1px solid rgba(111, 165, 106, .28); } .px-sprout-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; background: currentColor; transform: rotate(-45deg); opacity: .85; } .px-sprout-dot.is-pending { background: rgba(255, 246, 220, .92); color: #a06820; border-color: rgba(230, 180, 100, .32); } .px-sprout-dot.is-done { background: rgba(232, 238, 255, .92); color: #3d5f9c; border-color: rgba(136, 167, 247, .32); } .px-sprout-dot.is-paused { background: rgba(248, 240, 240, .92); color: #8a6470; border-color: rgba(180, 140, 150, .28); } .px-petal-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(247, 250, 255, .92)); border: 1px solid rgba(190, 220, 195, .4); color: var(--px-text); box-shadow: 0 2px 8px rgba(120, 160, 130, .1); } .px-petal-pill.tone-lawn { background: linear-gradient(135deg, #eaf6e0, #d8ecc8); color: #4f7a3a; border-color: rgba(140, 190, 110, .42); } .px-petal-pill.tone-forest { background: linear-gradient(135deg, #dde9df, #c2d8c8); color: var(--px-leaf-dark); border-color: rgba(95, 141, 108, .42); } .px-petal-pill.tone-sand { background: linear-gradient(135deg, #f7ecd2, #efdebc); color: #8a5f24; border-color: rgba(220, 180, 110, .42); } .px-petal-pill.tone-dawn { background: linear-gradient(135deg, #ffe1d0, #ffcdb4); color: #a44a30; border-color: rgba(230, 140, 110, .42); } .px-petal-pill.tone-mist { background: linear-gradient(135deg, #e4ecf4, #d2dde9); color: #4a6480; border-color: rgba(140, 170, 200, .42); } .px-petal-pill.tone-iris { background: linear-gradient(135deg, #ece2f6, #ddcef0); color: #6848a8; border-color: rgba(160, 130, 210, .42); } .px-petal-pill.outline { background: transparent; border-style: dashed; box-shadow: none; } .px-petal-pill .iconfont { font-size: 13px; opacity: .9; } .px-meadow-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; } .px-meadow-chip.tone-lawn { background: rgba(212, 232, 200, .85); color: #4a6f30; } .px-meadow-chip.tone-forest { background: rgba(190, 215, 200, .85); color: var(--px-leaf-dark); } .px-meadow-chip.tone-sand { background: rgba(240, 222, 188, .9); color: #8a5f24; } .px-meadow-chip.tone-moss { background: rgba(195, 215, 195, .85); color: #4f6a4a; } .px-meadow-chip.tone-dusk { background: rgba(220, 200, 220, .85); color: #6a4a70; } .px-meadow-chip .iconfont { font-size: 12px; opacity: .85; } .px-btn-pebble { position: relative; border: 0; border-radius: 999px; padding: 8px 22px; font-size: 14px; font-weight: 500; color: var(--px-leaf-dark); background: linear-gradient(135deg, #eaf6e0 0%, #d2e8c0 100%); box-shadow: 0 4px 14px rgba(111, 165, 106, .25), inset 0 1px 0 rgba(255, 255, 255, .8); transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease, background .22s ease; overflow: hidden; } .px-btn-pebble:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(111, 165, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .9); background: linear-gradient(135deg, #d8ecc8 0%, #b9d8a4 100%); } .px-btn-pebble:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(111, 165, 106, .3); } .px-btn-pebble:disabled { opacity: .55; cursor: not-allowed; } .px-btn-pebble::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: translate(-50%, -50%); transition: width .5s ease, height .5s ease, opacity .5s ease; opacity: 0; } .px-btn-pebble:active::after { width: 200px; height: 200px; opacity: 1; transition: width 0s, height 0s, opacity 0s; } .px-btn-pebble .iconfont { font-size: 14px; margin-right: 4px; } .px-btn-ghost { position: relative; border: 1px solid rgba(190, 220, 195, .55); border-radius: 999px; padding: 7px 18px; font-size: 13px; font-weight: 500; color: var(--px-moss); background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .22s ease, color .22s ease, border-color .22s ease; } .px-btn-ghost:hover:not(:disabled) { background: rgba(232, 248, 238, .7); color: var(--px-leaf-dark); border-color: rgba(111, 165, 106, .55); } .px-btn-ghost .iconfont { font-size: 13px; margin-right: 4px; } .px-cloud-input { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 24px; background: rgba(255, 255, 255, .86); border: 1.5px solid rgba(190, 220, 195, .45); box-shadow: 0 4px 18px rgba(111, 165, 106, .08), inset 0 1px 0 rgba(255, 255, 255, .9); transition: border-color .25s ease, box-shadow .25s ease; } .px-cloud-input:focus-within { border-color: rgba(111, 165, 106, .7); box-shadow: 0 6px 24px rgba(111, 165, 106, .18), inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 4px rgba(111, 165, 106, .08); } .px-cloud-input .iconfont { font-size: 16px; color: var(--px-lawn-deep); flex-shrink: 0; } .px-cloud-input input, .px-cloud-input textarea { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 14px; color: var(--px-text); padding: 0; line-height: 1.5; resize: none; font-family: inherit; } .px-cloud-input input::placeholder, .px-cloud-input textarea::placeholder { color: var(--px-light); } .px-soft-input { display: block; width: 100%; padding: 12px 18px; font-size: 14px; line-height: 1.5; color: var(--px-text); background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 252, 248, .88)); border: 1.5px solid rgba(190, 220, 195, .4); border-radius: 16px; outline: none; box-shadow: inset 0 2px 6px rgba(111, 165, 106, .05); transition: border-color .22s ease, box-shadow .22s ease; } .px-soft-input:focus { border-color: rgba(111, 165, 106, .65); box-shadow: inset 0 2px 6px rgba(111, 165, 106, .06), 0 0 0 4px rgba(111, 165, 106, .1); } .px-soft-input::placeholder { color: var(--px-light); } .px-vine-progress { position: relative; height: 28px; padding: 8px 0; } .px-vine-progress-track { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(190, 220, 195, .4), rgba(204, 226, 255, .4)); overflow: visible; box-shadow: inset 0 1px 2px rgba(111, 165, 106, .15); } .px-vine-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--px-lawn-deep), var(--px-moss), #88a7f7); box-shadow: 0 2px 8px rgba(95, 141, 108, .35); transition: width .8s cubic-bezier(.4, 0, .2, 1); } .px-vine-progress-fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #d8ecc8, #b9d8a4); box-shadow: 0 2px 8px rgba(111, 165, 106, .4), inset 0 1px 0 rgba(255, 255, 255, .6); border: 2px solid #fff; } .px-vine-progress-label { position: absolute; right: 0; top: -22px; font-size: 12px; font-weight: 600; color: var(--px-leaf-dark); } .px-water-progress { position: relative; height: 24px; border-radius: 999px; background: rgba(204, 226, 255, .25); border: 1px solid rgba(136, 167, 247, .25); overflow: hidden; } .px-water-progress-wave { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(136, 167, 247, .55), rgba(111, 165, 106, .6)); width: var(--water-pct, 50%); border-radius: 999px 0 0 999px; transition: width .8s cubic-bezier(.4, 0, .2, 1); overflow: hidden; } .px-water-progress-wave::before, .px-water-progress-wave::after { content: ''; position: absolute; left: -10px; right: -10px; height: 8px; background: rgba(255, 255, 255, .55); border-radius: 50%; } .px-water-progress-wave::before { top: 2px; animation: pxWaterFlow 4s linear infinite; } .px-water-progress-wave::after { top: 12px; animation: pxWaterFlow 4s linear infinite -1.5s; opacity: .65; } @keyframes pxWaterFlow { from { transform: translateX(-12px); } to { transform: translateX(12px); } } .px-water-progress-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--px-text); mix-blend-mode: luminosity; letter-spacing: .02em; } .px-wave-divider { position: relative; height: 56px; margin: 24px -20px; pointer-events: none; } .px-wave-divider svg { display: block; width: calc(100% + 40px); height: 100%; margin: 0 -20px; } .px-wave-divider--top svg { transform: scaleY(-1); transform-origin: center; } .px-mist-divider { position: relative; height: 1px; margin: 28px 0; background: linear-gradient(90deg, transparent 0%, rgba(190, 220, 195, .4) 25%, rgba(204, 226, 255, .55) 50%, rgba(255, 217, 194, .4) 75%, transparent 100%); } .px-mist-divider::before { content: ''; position: absolute; left: 50%; top: -3px; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--px-lawn), var(--px-lawn-deep)); box-shadow: 0 0 0 4px rgba(212, 232, 200, .35); } .px-breath { animation: pxBreath 3.2s ease-in-out infinite; } .px-sway { animation: pxSway 4.5s ease-in-out infinite; transform-origin: bottom center; } .px-rise { animation: pxRise .7s cubic-bezier(.22, 1, .36, 1) both; } .px-flow { animation: pxFlow 6s ease-in-out infinite; } .px-float { animation: pxFloat 5s ease-in-out infinite; } @keyframes pxBreath { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 165, 106, .35); } 50% { box-shadow: 0 0 0 14px rgba(111, 165, 106, 0); } } @keyframes pxSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @keyframes pxRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes pxFlow { 0%, 100% { transform: translateX(0) translateY(0); } 33% { transform: translateX(8px) translateY(-6px); } 66% { transform: translateX(-6px) translateY(4px); } } @keyframes pxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .px-component-section { padding: 28px 26px; margin-bottom: 22px; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(247, 252, 248, .84)); border: 1px solid rgba(190, 220, 195, .4); box-shadow: 0 8px 30px rgba(111, 165, 106, .08), inset 0 1px 0 rgba(255, 255, 255, .92); position: relative; overflow: hidden; } .px-component-section::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 217, 194, .25) 0%, transparent 70%); pointer-events: none; } .px-component-section-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--px-text); margin-bottom: 4px; letter-spacing: -.01em; } .px-component-section-title .iconfont { font-size: 22px; color: var(--px-lawn-deep); } .px-component-section-desc { font-size: 13px; color: var(--px-muted); margin-bottom: 22px; } .px-component-section-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(247, 252, 248, .55); border: 1px dashed rgba(111, 165, 106, .22); } .px-component-section-row + .px-component-section-row { margin-top: 14px; } .px-component-section-label { flex-shrink: 0; width: 120px; font-size: 12px; color: var(--px-muted); font-weight: 500; } .px-component-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .px-component-section-code { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(30, 30, 46, .92); color: #cdd6f4; font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 1.7; overflow-x: auto; white-space: pre; } .px-component-section-code .tag { color: #f5c2e7; } .px-component-section-code .attr { color: #89b4fa; } .px-component-section-code .val { color: #a6e3a1; } .px-component-section-code .com { color: #6c7086; font-style: italic; } @media (max-width: 768px) { .px-component-section { padding: 20px 18px; border-radius: 16px; } .px-component-section-title { font-size: 16px; } .px-component-section-row { flex-direction: column; align-items: flex-start; } .px-component-section-label { width: auto; } }