/* ============================================================
 * page-dark-theme.css — 规则平台子页面共享暗色主题
 * 覆盖 announcement / bangzhu / gonggao / xuexi 四个页面
 * 版本: dark-theme-20260913
 * ============================================================ */

/* ===== 设计令牌 ===== */
:root {
    --dt-gold: #D4AF37;
    --dt-gold-dark: #B8860B;
    --dt-gold-glow: rgba(212, 175, 55, 0.4);
    --dt-bg-deep: #0A1628;
    --dt-bg-dark: #0F1B2D;
    --dt-bg-mid: #15263D;
    --dt-bg-card: rgba(20, 35, 55, 0.7);
    --dt-bg-card-solid: #142340;
    --dt-bg-hover: rgba(30, 50, 80, 0.5);
    --dt-border: rgba(255, 255, 255, 0.08);
    --dt-border-strong: rgba(255, 255, 255, 0.15);
    --dt-border-gold: rgba(212, 175, 55, 0.3);
    --dt-text-primary: #E8ECF1;
    --dt-text-secondary: #A8B5C6;
    --dt-text-tertiary: #6B7A8F;
    --dt-text-gold: #D4AF37;
    --dt-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --dt-shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.4);
    --dt-glass-blur: blur(12px);
    --dt-radius: 14px;
    --dt-radius-lg: 16px;
    --dt-danger: #EF4444;
    --dt-danger-bg: rgba(239, 68, 68, 0.12);
    --dt-success: #10B981;
    --dt-success-bg: rgba(16, 185, 129, 0.12);
}

/* ===== 全局重置（覆盖浅色变量） ===== */
body {
    position: relative;
    min-height: 100vh;
    background-color: #050607 !important;
    background-image:
        linear-gradient(180deg, rgba(5, 6, 7, 0.1) 0%, rgba(5, 6, 7, 0.56) 52%, rgba(5, 6, 7, 0.9) 100%),
        url("assets/hero-xinjiang-tech-replica.webp") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--dt-text-primary) !important;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: .01em;
}

/* ===== 导航栏 ===== */
.navbar {
    background: rgba(4, 5, 7, 0.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--dt-border);
    padding: 0 !important;
}
.navbar .container {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    height: 58px !important;
}
.navbar .logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    color: var(--dt-gold) !important;
    font-size: 16px !important;
    text-shadow: 0 0 12px var(--dt-gold-glow);
}
.navbar .logo img {
    width: 34px !important;
    height: 34px !important;
    filter: drop-shadow(0 0 8px var(--dt-gold-glow));
}
.navbar a {
    color: var(--dt-text-secondary) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color .2s;
}
.navbar a:hover {
    color: var(--dt-gold) !important;
}
.navbar a.active {
    color: var(--dt-gold) !important;
    font-weight: 600 !important;
}

/* ===== 页头 hero ===== */
.page-hero {
    background: linear-gradient(180deg, rgba(5, 6, 7, 0.10) 0%, rgba(5, 6, 7, 0.26) 100%) !important;
    border-bottom: 1px solid var(--dt-border);
    padding: 46px 0 40px !important;
    text-align: center !important;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 200px;
    background: radial-gradient(ellipse, var(--dt-gold-glow), transparent 70%);
    opacity: 0.3;
    pointer-events: none;
}
.page-hero h1 {
    font-size: 28px !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    color: var(--dt-gold) !important;
    text-shadow: 0 0 20px var(--dt-gold-glow);
    position: relative;
}
.page-hero p {
    color: var(--dt-text-secondary) !important;
    font-size: 14px !important;
    position: relative;
}

/* ===== 容器 ===== */
.container {
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
}

/* ===== 通用卡片 / 面板（玻璃拟态） ===== */
.panel,
.record-card,
.task-card,
.info-card,
.ann-card,
.cat-nav,
.faq-panel,
.card-detail,
.toolbar {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
    border-radius: var(--dt-radius) !important;
    box-shadow: var(--dt-shadow) !important;
}

/* ===== panel 标题条 ===== */
.panel-title {
    background: linear-gradient(135deg, #0A1628, #15263D) !important;
    border-bottom: 1px solid var(--dt-border) !important;
}
.panel-title .p-text {
    color: var(--dt-gold) !important;
    text-shadow: 0 0 8px var(--dt-gold-glow);
}
.panel-title .p-sub {
    color: var(--dt-text-tertiary) !important;
}
.panel-title .p-icon svg {
    stroke: var(--dt-gold) !important;
}

/* ===== panel body ===== */
.panel-body {
    color: var(--dt-text-primary) !important;
}

/* ===== 公告提示条 ===== */
.ann-tip {
    border-bottom: 1px solid var(--dt-border) !important;
    color: var(--dt-text-tertiary) !important;
}
.ann-tip .t-icon {
    color: var(--dt-gold) !important;
}

/* ===== 公告列表 ===== */
.ann-list li {
    border-bottom: 1px dashed var(--dt-border) !important;
}
.ann-list li:last-child {
    border-bottom: none !important;
}
.ann-list li a {
    transition: all .2s;
}
.ann-list li a:hover {
    padding-left: 10px;
    background: var(--dt-bg-hover);
}
.ann-list .a-name {
    color: var(--dt-text-primary) !important;
}
.ann-list .a-name .dot {
    background: var(--dt-gold) !important;
    box-shadow: 0 0 6px var(--dt-gold-glow);
}
.ann-list .a-meta {
    color: var(--dt-text-tertiary) !important;
}
.ann-empty {
    color: var(--dt-text-tertiary) !important;
}
.ann-empty .e-icon {
    opacity: .5;
}
.ann-error {
    color: var(--dt-danger) !important;
}

/* ===== 详情视图 ===== */
.btn-back {
    background: linear-gradient(135deg, #0A1628, #15263D) !important;
    color: var(--dt-text-primary) !important;
    border: 1px solid var(--dt-border-strong) !important;
    transition: all .2s;
}
.btn-back:hover {
    border-color: var(--dt-gold) !important;
    color: var(--dt-gold) !important;
}
.card-detail {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
    box-shadow: var(--dt-shadow) !important;
}
.doc-head {
    border-bottom: 1px solid var(--dt-border) !important;
}
.doc-head h2 {
    color: var(--dt-text-primary) !important;
}
.doc-head .meta {
    color: var(--dt-text-tertiary) !important;
}
.doc-body pre {
    background: #0A1628 !important;
    color: var(--dt-text-secondary) !important;
    border: 1px solid var(--dt-border);
}
.doc-body img {
    background: var(--dt-bg-card-solid) !important;
    border-radius: 8px;
}
.doc-body iframe,
.doc-body embed {
    background: var(--dt-bg-card-solid) !important;
    border-radius: 8px;
}

/* ===== 按钮 ===== */
.btn-gold {
    background: linear-gradient(135deg, var(--dt-gold), var(--dt-gold-dark)) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px var(--dt-gold-glow);
    transition: all .2s;
}
.btn-gold:hover {
    opacity: .9;
    box-shadow: 0 6px 20px var(--dt-gold-glow);
}
.btn-plain {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dt-text-secondary) !important;
    border: 1px solid var(--dt-border) !important;
}
.btn-plain:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--dt-text-primary) !important;
}
.btn-back:hover {
    opacity: 1;
}

/* ===== 空态 / 加载 ===== */
.empty-state {
    color: var(--dt-text-tertiary) !important;
}
.empty-state .icon {
    opacity: .5;
}
.loading {
    color: var(--dt-text-tertiary) !important;
}

/* ===== Toast ===== */
.toast {
    background: var(--dt-bg-dark) !important;
    color: #fff !important;
    border: 1px solid var(--dt-border-strong);
    backdrop-filter: blur(8px);
    box-shadow: var(--dt-shadow-strong) !important;
}
.toast.err {
    background: var(--dt-danger) !important;
}
.toast.ok {
    background: var(--dt-success) !important;
}

/* ===== Footer（与主页一致：三列链接 + LOGO + 版权信息） ===== */
.footer {
    margin-top: 12px !important;
    padding: 14px 0 8px !important;
    background: rgba(5, 6, 7, 0.72) !important;
    border-top: 0 !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--dt-text-secondary) !important;
}
.footer .container {
    display: block !important;
}
.footer-links-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-evenly !important;
    gap: 24px !important;
    padding: 4px 48px 20px !important;
    border-bottom: 1px solid var(--dt-border) !important;
    margin-bottom: 18px !important;
}
.footer-links-row > div {
    flex: 1 !important;
    min-width: 0 !important;
}
.footer-links-row h4 {
    color: var(--dt-gold) !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    font-size: 15px !important;
}
.footer-links-row > div > a {
    display: block !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 2 !important;
    transition: color .2s ease, padding-left .2s ease !important;
}
.footer-links-row > div > a:hover {
    color: var(--dt-gold) !important;
    padding-left: 4px !important;
}
.footer-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
}
.footer-logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
.footer-logo img {
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 0 8px var(--dt-gold-glow)) !important;
}
.footer-logo strong {
    color: var(--dt-gold) !important;
    font-size: 18px !important;
    text-shadow: 0 0 12px var(--dt-gold-glow) !important;
}
.footer-content p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}
.footer-content p a {
    color: #818CF8 !important;
    text-decoration: underline !important;
    transition: color .2s ease !important;
}
.footer-content p a:hover {
    color: #A5B4FC !important;
}

@media (max-width: 768px) {
    .footer-links-row {
        flex-direction: column !important;
        padding: 4px 12px 20px !important;
    }
    .footer-content {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
}

/* ============================================================
 * bangzhu.html 专属
 * ============================================================ */

/* 搜索框 */
.hero-search input {
    background: rgba(20, 35, 55, 0.8) !important;
    backdrop-filter: blur(8px);
    color: var(--dt-text-primary) !important;
    border: 1px solid var(--dt-border-strong) !important;
    box-shadow: var(--dt-shadow) !important;
}
.hero-search input::placeholder {
    color: var(--dt-text-tertiary) !important;
}
.hero-search input:focus {
    border-color: var(--dt-gold) !important;
    box-shadow: 0 0 0 3px var(--dt-gold-glow) !important;
}
.hero-search .s-icon {
    color: var(--dt-text-tertiary) !important;
}
.hero-search .s-clear {
    color: var(--dt-text-tertiary) !important;
}

/* 左侧分类导航 */
.cat-nav {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
}
.cat-nav h3 {
    color: var(--dt-text-tertiary) !important;
}
.cat-nav button {
    color: var(--dt-text-secondary) !important;
    transition: all .2s;
}
.cat-nav button:hover {
    background: var(--dt-bg-hover) !important;
    color: var(--dt-gold) !important;
}
.cat-nav button.on {
    background: linear-gradient(135deg, #0A1628, #15263D) !important;
    color: var(--dt-gold) !important;
}
.cat-nav button .c-count {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dt-text-tertiary) !important;
}
.cat-nav button.on .c-count {
    background: rgba(212, 175, 55, 0.2) !important;
    color: var(--dt-gold) !important;
}

/* FAQ 列表 */
.faq-panel {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
}
.faq-head {
    border-bottom: 1px solid var(--dt-border) !important;
}
.faq-head h2 {
    color: var(--dt-text-primary) !important;
}
.faq-head .stat {
    color: var(--dt-text-tertiary) !important;
}
.faq-head .stat b {
    color: var(--dt-gold) !important;
}
.faq-list > li {
    border-bottom: 1px solid var(--dt-border) !important;
}
.faq-q {
    transition: background .2s;
}
.faq-q:hover {
    background: var(--dt-bg-hover) !important;
}
.faq-q .q-ico {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--dt-gold) !important;
}
.faq-q .q-text {
    color: var(--dt-text-primary) !important;
}
.faq-q .q-arrow {
    color: var(--dt-text-tertiary) !important;
}
.faq-item.open .faq-q {
    background: var(--dt-bg-hover) !important;
}
.faq-item.open .faq-q .q-ico {
    background: linear-gradient(135deg, #0A1628, #15263D) !important;
    color: var(--dt-gold) !important;
}
.faq-item.open .q-arrow {
    color: var(--dt-gold) !important;
}
.faq-a-inner {
    color: var(--dt-text-secondary) !important;
}
.faq-a-inner a {
    color: var(--dt-gold) !important;
}

/* 联系客服卡片 */
.contact-card {
    background: linear-gradient(135deg, #0A1628, #15263D) !important;
    border: 1px solid var(--dt-border-gold) !important;
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.1);
}
.contact-card h3 {
    color: var(--dt-gold) !important;
    text-shadow: 0 0 10px var(--dt-gold-glow);
}
.contact-card p {
    color: var(--dt-text-secondary) !important;
}
.contact-channels .ch .lbl {
    color: var(--dt-text-tertiary) !important;
}
.contact-channels .ch .val {
    color: var(--dt-text-primary) !important;
}
.contact-channels .ch .val.gold {
    color: var(--dt-gold) !important;
}

/* ============================================================
 * gonggao.html 专属
 * ============================================================ */

/* 工具栏 */
.toolbar {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
}
.toolbar .search input {
    background: rgba(10, 22, 40, 0.6) !important;
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text-primary) !important;
    transition: border-color .2s;
}
.toolbar .search input::placeholder {
    color: var(--dt-text-tertiary) !important;
}
.toolbar .search input:focus {
    border-color: var(--dt-gold) !important;
    box-shadow: 0 0 0 3px var(--dt-gold-glow) !important;
}
.toolbar .search .s-icon {
    color: var(--dt-text-tertiary) !important;
}
.toolbar .filter button {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text-secondary) !important;
    transition: all .2s;
}
.toolbar .filter button:hover {
    border-color: var(--dt-gold) !important;
    color: var(--dt-gold) !important;
}
.toolbar .filter button.on {
    background: linear-gradient(135deg, #0A1628, #15263D) !important;
    color: var(--dt-gold) !important;
    border-color: var(--dt-border-gold) !important;
}

/* 结果统计 */
.result-meta {
    color: var(--dt-text-tertiary) !important;
}
.result-meta b {
    color: var(--dt-gold) !important;
}

/* 公告列表卡片 */
.ann-card {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
}
.ann-full-list li {
    border-bottom: 1px dashed var(--dt-border) !important;
}
.ann-full-list li:last-child {
    border-bottom: none !important;
}
.ann-full-list li a {
    transition: all .2s;
}
.ann-full-list li a:hover {
    background: var(--dt-bg-hover) !important;
    padding-left: 28px;
}
.ann-full-list .a-title {
    color: var(--dt-text-primary) !important;
}
.ann-full-list .a-title .tag {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--dt-gold) !important;
}
.ann-full-list .a-title .tag.new {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--dt-danger) !important;
}
.ann-full-list .a-meta {
    color: var(--dt-text-tertiary) !important;
}
.ann-full-list .a-arrow {
    color: var(--dt-text-tertiary) !important;
}
.ann-full-list li a:hover .a-arrow {
    color: var(--dt-gold) !important;
}

/* 加载更多按钮 */
.btn-load-more {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text-secondary) !important;
    transition: all .2s;
}
.btn-load-more:hover:not(:disabled) {
    border-color: var(--dt-gold) !important;
    color: var(--dt-gold) !important;
}

/* 详情弹层 */
.modal-mask {
    background: rgba(5, 12, 25, 0.7) !important;
    backdrop-filter: blur(4px);
}
.modal {
    background: var(--dt-bg-card-solid) !important;
    border: 1px solid var(--dt-border-strong) !important;
    box-shadow: var(--dt-shadow-strong) !important;
}
.modal-head {
    border-bottom: 1px solid var(--dt-border) !important;
}
.modal-head h2 {
    color: var(--dt-text-primary) !important;
}
.modal-head .meta {
    color: var(--dt-text-tertiary) !important;
}
.modal-close {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dt-text-secondary) !important;
    transition: all .2s;
}
.modal-close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--dt-text-primary) !important;
}
.modal-body {
    color: var(--dt-text-secondary) !important;
}
.modal-body pre {
    background: #0A1628 !important;
    color: var(--dt-text-secondary) !important;
    border: 1px solid var(--dt-border);
}
.modal-foot {
    border-top: 1px solid var(--dt-border) !important;
}

/* ============================================================
 * xuexi.html 专属
 * ============================================================ */

/* 扣分警示条 */
.penalty-banner {
    background: var(--dt-danger-bg) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: var(--dt-radius) !important;
}
.penalty-banner .pb-ico {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--dt-danger) !important;
}
.penalty-banner .pb-main h3 {
    color: var(--dt-danger) !important;
}
.penalty-banner .pb-main p {
    color: var(--dt-text-secondary) !important;
}
.penalty-banner .pb-score .num {
    color: var(--dt-danger) !important;
}
.penalty-banner .pb-score .lbl {
    color: var(--dt-text-tertiary) !important;
}

/* 违规记录表 */
.record-card {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
}
.record-card .rc-head {
    border-bottom: 1px solid var(--dt-border) !important;
}
.record-card .rc-head h2 {
    color: var(--dt-text-primary) !important;
}
.record-card .rc-head .rc-stat {
    color: var(--dt-text-tertiary) !important;
}
.record-card .rc-head .rc-stat b {
    color: var(--dt-danger) !important;
}
.record-table th {
    background: rgba(10, 22, 40, 0.5) !important;
    color: var(--dt-text-secondary) !important;
    border-bottom: 1px solid var(--dt-border) !important;
}
.record-table td {
    border-bottom: 1px solid var(--dt-border) !important;
    color: var(--dt-text-primary) !important;
}
.record-table .r-rule {
    color: var(--dt-text-primary) !important;
}
.record-table .r-score {
    color: var(--dt-danger) !important;
}
.record-table .r-status {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #F59E0B !important;
}
.record-table .r-status.done {
    background: var(--dt-success-bg) !important;
    color: var(--dt-success) !important;
}

/* 学习任务卡 */
.task-card {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
    border-left: 4px solid var(--dt-gold) !important;
}
.task-card.done {
    border-left-color: var(--dt-success) !important;
}
.task-card.locked {
    border-left-color: rgba(255, 255, 255, 0.2) !important;
    opacity: .85;
}
.task-head .th-ico {
    background: linear-gradient(135deg, #0A1628, #15263D) !important;
    color: var(--dt-gold) !important;
}
.task-card.done .th-ico {
    background: var(--dt-success) !important;
    color: #fff !important;
}
.task-card.locked .th-ico {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--dt-text-tertiary) !important;
}
.task-head .th-title {
    color: var(--dt-text-primary) !important;
}
.task-head .th-desc {
    color: var(--dt-text-secondary) !important;
}
.task-head .th-tags .tag {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--dt-gold) !important;
}
.task-head .th-tags .tag.danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--dt-danger) !important;
}
.task-head .th-tags .tag.ok {
    background: var(--dt-success-bg) !important;
    color: var(--dt-success) !important;
}
.task-head .th-score .num {
    color: var(--dt-gold) !important;
}
.task-head .th-score .lbl {
    color: var(--dt-text-tertiary) !important;
}

/* 课时列表 */
.task-lessons {
    border-top: 1px solid var(--dt-border) !important;
    background: rgba(10, 22, 40, 0.3) !important;
}
.task-lessons .tl-item {
    border-bottom: 1px dashed var(--dt-border) !important;
}
.task-lessons .tl-no {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dt-text-secondary) !important;
}
.task-lessons .tl-item.done .tl-no {
    background: var(--dt-success-bg) !important;
    color: var(--dt-success) !important;
}
.task-lessons .tl-title {
    color: var(--dt-text-primary) !important;
}
.task-lessons .tl-dur {
    color: var(--dt-text-tertiary) !important;
}
.task-lessons .tl-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text-secondary) !important;
    transition: all .2s;
}
.task-lessons .tl-btn:hover:not(:disabled) {
    border-color: var(--dt-gold) !important;
    color: var(--dt-gold) !important;
}
.task-lessons .tl-btn.done {
    background: var(--dt-success-bg) !important;
    color: var(--dt-success) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* 任务底部操作栏 */
.task-foot {
    border-top: 1px solid var(--dt-border) !important;
}
.task-foot .tf-progress .bar {
    background: rgba(255, 255, 255, 0.06) !important;
}
.task-foot .tf-progress .bar i {
    background: linear-gradient(90deg, var(--dt-gold), var(--dt-gold-dark)) !important;
}
.task-card.done .tf-progress .bar i {
    background: var(--dt-success) !important;
}
.task-foot .tf-progress .txt {
    color: var(--dt-text-tertiary) !important;
}
.task-foot .tf-progress .txt b {
    color: var(--dt-gold) !important;
}
.task-card.done .tf-progress .txt b {
    color: var(--dt-success) !important;
}

/* 学习任务标题 */
.task-section-title h2 {
    color: var(--dt-text-primary) !important;
}
.task-section-title .ts-count {
    color: var(--dt-text-tertiary) !important;
}
.task-section-title .ts-count b {
    color: var(--dt-gold) !important;
}

/* 说明卡 */
.info-card {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
}
.info-card h3 {
    color: var(--dt-text-primary) !important;
}
.info-card h3 .ico {
    color: var(--dt-gold) !important;
}
.info-card li {
    color: var(--dt-text-secondary) !important;
}
.info-card li::before {
    color: var(--dt-gold) !important;
}

/* 课时弹层 */
.modal-head {
    background: linear-gradient(135deg, #0A1628, #15263D) !important;
}
.modal-head .mh-badge {
    background: rgba(212, 175, 55, 0.9) !important;
    color: #0A1628 !important;
}
.modal-head h2 {
    color: var(--dt-gold) !important;
}
.modal-head .mh-sub {
    color: var(--dt-text-secondary) !important;
}
.modal-close {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}
.modal-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}
.modal-body {
    color: var(--dt-text-secondary) !important;
}
.modal-foot {
    border-top: 1px solid var(--dt-border) !important;
}
.modal-foot .mf-tip {
    color: var(--dt-text-tertiary) !important;
}

/* 测验 */
.quiz-progress {
    color: var(--dt-text-tertiary) !important;
}
.quiz-progress .bar {
    background: rgba(255, 255, 255, 0.06) !important;
}
.quiz-progress .bar i {
    background: linear-gradient(90deg, var(--dt-gold), var(--dt-gold-dark)) !important;
}
.quiz-q {
    color: var(--dt-text-primary) !important;
}
.quiz-opts li {
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text-primary) !important;
    background: rgba(255, 255, 255, 0.02);
    transition: all .2s;
}
.quiz-opts li:hover {
    border-color: var(--dt-gold) !important;
    background: rgba(212, 175, 55, 0.08) !important;
}
.quiz-opts li .opt-key {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dt-text-secondary) !important;
}
.quiz-opts li.correct {
    border-color: var(--dt-success) !important;
    background: var(--dt-success-bg) !important;
}
.quiz-opts li.correct .opt-key {
    background: var(--dt-success) !important;
    color: #fff !important;
}
.quiz-opts li.wrong {
    border-color: var(--dt-danger) !important;
    background: var(--dt-danger-bg) !important;
}
.quiz-opts li.wrong .opt-key {
    background: var(--dt-danger) !important;
    color: #fff !important;
}
.quiz-result .qr-score.pass {
    color: var(--dt-success) !important;
}
.quiz-result .qr-score.fail {
    color: var(--dt-danger) !important;
}
.quiz-result .qr-txt {
    color: var(--dt-text-secondary) !important;
}
.quiz-result .qr-txt b {
    color: var(--dt-gold) !important;
}

/* ===== 按钮（xuexi 通用） ===== */
.btn-success {
    background: var(--dt-success) !important;
    color: #fff !important;
}
.btn-danger {
    background: var(--dt-danger) !important;
    color: #fff !important;
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(10, 22, 40, 0.5);
}
::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
}

/* ===== 入场动画 ===== */
@keyframes dt-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.panel, .record-card, .task-card, .info-card, .ann-card,
.toolbar, .contact-card, .cat-nav, .faq-panel, .penalty-banner {
    animation: dt-fade-up .5s ease both;
}
.panel:nth-child(2), .record-card:nth-child(2),
.task-card:nth-child(2), .ann-card:nth-child(2) {
    animation-delay: .08s;
}
.panel:nth-child(3), .record-card:nth-child(3),
.task-card:nth-child(3), .ann-card:nth-child(3) {
    animation-delay: .16s;
}

/* ===== focus-visible ===== */
*:focus-visible {
    outline: 2px solid var(--dt-gold);
    outline-offset: 2px;
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* ============================================================
 * announcement(1).html 专属 — 规则平台汇总页
 * ============================================================ */

/* 2x2 四分区网格 */
.grid-2x2 {
    gap: 22px !important;
}

/* 汇总页 panel — 水平布局（标题左侧 + 内容右侧） */
.grid-2x2 .panel {
    background: var(--dt-bg-card) !important;
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border) !important;
    box-shadow: var(--dt-shadow) !important;
    min-height: 240px !important;
}

/* 汇总页 panel-title — 垂直布局（图标+文字上下排列） */
.grid-2x2 .panel-title {
    background: linear-gradient(180deg, #0A1628, #15263D) !important;
    border-right: 1px solid var(--dt-border) !important;
}
.grid-2x2 .panel-title .p-icon svg {
    stroke: var(--dt-gold) !important;
}
.grid-2x2 .panel-title .p-text {
    color: var(--dt-gold) !important;
    text-shadow: 0 0 8px var(--dt-gold-glow);
}
.grid-2x2 .panel-title .p-sub {
    color: var(--dt-text-tertiary) !important;
}

/* 汇总页 panel-body */
.grid-2x2 .panel-body {
    color: var(--dt-text-primary) !important;
}

/* p-list 列表（平台规则 / 雇主帮助 / 服务商学习） */
.p-list li {
    border-bottom: 1px dashed var(--dt-border) !important;
}
.p-list li:last-child {
    border-bottom: none !important;
}
.p-list li a {
    color: var(--dt-text-secondary) !important;
    transition: all .2s;
}
.p-list li a:hover {
    color: var(--dt-gold) !important;
    padding-left: 10px;
    background: var(--dt-bg-hover);
}
.p-list li a .dot {
    background: var(--dt-gold) !important;
    box-shadow: 0 0 6px var(--dt-gold-glow);
}
.p-list li a .more {
    color: var(--dt-text-tertiary) !important;
}
.p-list li a:hover .more {
    color: var(--dt-gold) !important;
}

/* 汇总页 panel 入场动画（4个分区依次出现） */
.grid-2x2 .panel:nth-child(1) { animation-delay: 0s; }
.grid-2x2 .panel:nth-child(2) { animation-delay: .08s; }
.grid-2x2 .panel:nth-child(3) { animation-delay: .16s; }
.grid-2x2 .panel:nth-child(4) { animation-delay: .24s; }
/* ============================================================
 * announcement(1).html 高级视觉优化层 — Linear Aesthetic
 * ============================================================ */


/* 页头标题：金色流光 + 底部装饰分隔线 */
.page-hero h1 {
    position: relative;
    display: inline-block;
    background: linear-gradient(180deg, #F5DF8A 0%, #D4AF37 55%, #B8860B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-hero h1::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dt-gold), transparent);
    opacity: .85;
}

/* 四分区卡片：悬浮抬起 + 顶部光带 + 金色描边发光 */
.grid-2x2 .panel {
    position: relative;
    overflow: hidden;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s, border-color .38s;
}
.grid-2x2 .panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, .9) 50%, transparent 100%);
    opacity: 0;
    transition: opacity .38s;
    z-index: 2;
}
.grid-2x2 .panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(320px 180px at 20% 0%, rgba(212, 175, 55, 0.10), transparent 70%);
    opacity: 0;
    transition: opacity .38s;
    pointer-events: none;
    z-index: 1;
}
.grid-2x2 .panel:hover {
    transform: translateY(-6px);
    border-color: var(--dt-border-gold) !important;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(212, 175, 55, 0.18),
        0 0 36px rgba(212, 175, 55, 0.10) !important;
}
.grid-2x2 .panel:hover::before,
.grid-2x2 .panel:hover::after {
    opacity: 1;
}

/* 标题栏图标：发光容器 + 悬浮缩放 */
.grid-2x2 .panel-title .p-icon {
    position: relative;
    z-index: 1;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.16), transparent 72%);
    border-radius: 13px;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.grid-2x2 .panel:hover .panel-title .p-icon {
    transform: scale(1.1);
}

/* p-list 列表项：滑动 + 呼吸圆点 + 精致 more 标签 */
.p-list li a {
    position: relative;
    z-index: 1;
    border-radius: 9px;
    transition: all .25s;
}
.p-list li a:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.10), transparent 78%);
    padding-left: 14px;
}
.p-list li a .dot {
    transition: all .25s;
}
.p-list li a:hover .dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14), 0 0 10px var(--dt-gold-glow);
}
.p-list li a .more {
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--dt-border);
    transition: all .25s;
}
.p-list li a:hover .more {
    background: rgba(212, 175, 55, 0.14);
    border-color: var(--dt-border-gold);
    color: var(--dt-gold) !important;
}

/* 最新公告列表项 hover 增强 */
.grid-2x2 .ann-list li a {
    border-radius: 9px;
    transition: all .25s;
}
.grid-2x2 .ann-list li a:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent 78%);
}
.grid-2x2 .ann-list .a-name .dot {
    transition: all .25s;
}
.grid-2x2 .ann-list li a:hover .a-name .dot {
    transform: scale(1.3);
    box-shadow: 0 0 8px var(--dt-gold-glow);
}
.grid-2x2 .ann-list li a:hover .a-name {
    color: var(--dt-gold) !important;
}

/* 分区卡片入场动画（浮入 + 位移） */
@keyframes dt-panel-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}
.grid-2x2 .panel {
    animation: dt-panel-in .55s cubic-bezier(.2, .8, .2, 1) both;
}

/* 呼吸光动画（标题栏图标） */
@keyframes dt-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.0); }
    50% { box-shadow: 0 0 18px 2px rgba(212, 175, 55, 0.18); }
}
.grid-2x2 .panel-title .p-icon {
    animation: dt-breathe 3.4s ease-in-out infinite;
}
/* ============================================================
 * gonggao.html 左侧规则树导航（玻璃拟态）
 * ============================================================ */

/* 左右布局：树导航 + 内容 */
.content-layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 24px 0 8px;
}
.rule-tree {
    flex: 0 0 250px;
    width: 250px;
    position: sticky;
    top: 70px;
    background: var(--dt-bg-card);
    backdrop-filter: var(--dt-glass-blur);
    -webkit-backdrop-filter: var(--dt-glass-blur);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-lg);
    box-shadow: var(--dt-shadow);
    padding: 18px 14px;
    align-self: flex-start;
}
.rule-tree-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dt-gold);
    letter-spacing: 1px;
    padding: 0 10px 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--dt-border);
    text-shadow: 0 0 12px var(--dt-gold-glow);
}

/* 树列表 */
.rule-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rule-tree-list .tree-node {
    margin: 0;
    padding: 0;
}

/* 可展开/收起节点按钮 */
.tree-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--dt-text-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all .2s;
}
.tree-toggle:hover {
    background: var(--dt-bg-hover);
    color: var(--dt-gold);
}
.tree-arrow {
    font-size: 11px;
    color: var(--dt-text-tertiary);
    transition: transform .22s ease;
    flex-shrink: 0;
    line-height: 1;
}
.tree-toggle:hover .tree-arrow {
    color: var(--dt-gold);
}
/* 收起态：箭头指向右侧 */
.tree-toggle[aria-expanded="false"] .tree-arrow {
    transform: rotate(-90deg);
}
/* 收起态：隐藏紧随其后的子列表 */
.tree-toggle[aria-expanded="false"] + .tree-children {
    display: none;
}

/* 子节点列表 */
.tree-children {
    list-style: none;
    margin: 2px 0 8px;
    padding: 0 0 0 18px;
    border-left: 1px dashed var(--dt-border-strong);
    margin-left: 14px;
}
.tree-children .tree-node {
    margin: 0;
    padding: 0;
}
.tree-link {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--dt-text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: all .2s;
    position: relative;
}
.tree-link:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), transparent 80%);
    color: var(--dt-gold);
    padding-left: 16px;
}
.tree-link.on {
    color: var(--dt-gold);
    background: rgba(212, 175, 55, 0.10);
    font-weight: 600;
}

/* 右侧内容区占满剩余宽度 */
.content-main {
    flex: 1;
    min-width: 0;
}

/* 响应式：窄屏上下堆叠 */
@media (max-width: 860px) {
    .content-layout {
        flex-direction: column;
    }
    .rule-tree {
        flex: none;
        width: 100%;
        position: static;
    }
}