/* ============================================================
   比赛（/contest/*）
   ------------------------------------------------------------
   风格：清爽学术风 —— 变量全部取自 theme.css，
        白底 + 1px 细线 + 单一品牌青，无渐变、无投影，hover 只改颜色
   作用域：全部规则限定在 .cs-page 内（列表页除外，它自带同名根节点）
   结构：比赛页头（状态/标题/时间/倒计时/进度）→ 二级标签栏 → 内容卡片
   说明：比赛子站原来有一份独立 HTML 骨架，没引 theme.css，
        所以一直是 bootstrap 原始外观；v1.0 起挂到主站布局下。
   ============================================================ */

.cs-page {
    padding: 22px 0 10px;
}

/* ================================================================ 比赛页头 */
.cs-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    padding: 20px 22px;
    margin-bottom: 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.cs-head-main {
    min-width: 0;
}

.cs-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}

/* 状态药丸：三态配色沿用全站的 ok / warn / muted 三色，
   不用 bootstrap 的 label-success/danger，那套饱和度过高 */
.cs-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .2px;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cs-status.is-running {
    color: var(--ok);
    background: #F1F7EF;
    border-color: #D8E7D2;
}

.cs-status.is-pending {
    color: var(--warn);
    background: #FBF4E8;
    border-color: #EEDFC4;
}

.cs-status.is-ended {
    color: var(--ink-3);
    background: #F2F4F2;
    border-color: var(--line);
}

.cs-type {
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: .2px;
}

.cs-back {
    font-size: 12px;
    color: var(--ink-3);
}

.cs-back:hover {
    color: var(--brand);
}

.cs-title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .2px;
    color: var(--ink);
    word-break: break-word;
}

.cs-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 9px;
    font-size: 12.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.cs-meta i {
    margin-right: 5px;
    font-style: normal;
    font-size: 11.5px;
    color: var(--muted);
}

.cs-meta-sep {
    color: var(--line);
}

/* ------------------------------------------------------------ 右侧倒计时 */
.cs-head-side {
    flex: 0 0 232px;
    text-align: right;
}

.cs-remain-box {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 7px;
}

.cs-remain-label {
    font-size: 11.5px;
    color: var(--muted);
}

.cs-remain {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--brand);
    letter-spacing: .4px;
    /* 等宽字形：否则每秒刷新时整块会左右抖 */
    font-variant-numeric: tabular-nums;
}

.cs-bar {
    height: 4px;
    margin: 10px 0 8px;
    background: var(--line-soft);
    border-radius: 2px;
    overflow: hidden;
}

.cs-bar-fill {
    display: block;
    height: 100%;
    background: var(--brand);
    border-radius: 2px;
    transition: width .4s linear;
}

.cs-now {
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ============================================================== 二级标签栏 */
.cs-tabs {
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.cs-tabs .nav-tabs {
    border-bottom: 0;
}

.cs-tabs .nav-tabs > li {
    margin-bottom: 0;
}

.cs-tabs .nav-tabs > li > a {
    margin: 0;
    padding: 9px 16px 10px;
    font-size: 13px;
    color: var(--ink-3);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    line-height: 1.5;
    transition: color .15s ease, border-color .15s ease;
}

.cs-tabs .nav-tabs > li > a:hover,
.cs-tabs .nav-tabs > li > a:focus {
    color: var(--brand);
    background: transparent;
    border-bottom-color: var(--brand);
}

.cs-tabs .nav-tabs > li.active > a,
.cs-tabs .nav-tabs > li.active > a:hover,
.cs-tabs .nav-tabs > li.active > a:focus {
    color: var(--brand);
    font-weight: 600;
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--brand);
}

/* ================================================================ 通用卡片 */
.cs-card {
    padding: 18px 22px 20px;
    margin-bottom: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.cs-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 11px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.cs-sec-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink);
}

.cs-sec-note {
    font-size: 11.5px;
    color: var(--muted);
}

.cs-empty {
    padding: 26px 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.cs-hint {
    padding: 9px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid #CFE0DE;
    border-radius: 3px;
}

.cs-hint b {
    font-weight: 600;
}

.cs-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--muted);
}

/* ============================================================== 概览四格 */
.cs-overview {
    margin-bottom: 16px;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.cs-grid-item {
    padding: 13px 18px 14px;
    border-right: 1px solid var(--line);
}

.cs-grid-item:last-child {
    border-right: 0;
}

.cs-grid-lab {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    color: var(--muted);
}

.cs-grid-val {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* ================================================================ 比赛描述 */
.cs-desc {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ink-2);
}

.cs-desc > :first-child {
    margin-top: 0;
}

.cs-desc > :last-child {
    margin-bottom: 0;
}

.cs-desc h1, .cs-desc h2, .cs-desc h3 {
    margin: 18px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.cs-desc p {
    margin: 0 0 9px;
}

.cs-desc ul, .cs-desc ol {
    margin: 0 0 9px;
    padding-left: 22px;
}

.cs-desc li {
    margin-bottom: 3px;
}

.cs-desc code {
    padding: 1px 5px;
    font-size: 12.5px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 2px;
}

.cs-desc pre {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.7;
    background: #F7F8F7;
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: auto;
}

.cs-desc pre code {
    padding: 0;
    color: var(--ink-2);
    background: transparent;
}

.cs-desc blockquote {
    margin: 0 0 10px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--ink-3);
    border-left: 2px solid var(--line);
}

/* ================================================================== 表格 */
.cs-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}

.cs-table > thead > tr > th {
    padding: 9px 12px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

.cs-table > tbody > tr > td {
    padding: 11px 12px;
    font-size: 13.5px;
    color: var(--ink-2);
    vertical-align: middle;
    border-bottom: 1px solid var(--line-soft);
}

.cs-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.cs-table > tbody > tr:hover > td {
    background: #FAFBFA;
}

.cs-table .c-idx {
    width: 60px;
}

.cs-table .c-pid {
    width: 84px;
}

.cs-table .c-stat {
    width: 120px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cs-table .c-me {
    width: 104px;
    white-space: nowrap;
}

.cs-table .c-title a {
    color: var(--ink);
}

.cs-table .c-title a:hover {
    color: var(--brand);
}

/* 题目字母：小方块，和题库列表的题号保持一致 */
.cs-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(15, 92, 107, .18);
    border-radius: 3px;
}

.cs-letter:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.cs-num-ok {
    color: var(--ok);
    font-weight: 600;
}

.cs-num-sep {
    margin: 0 4px;
    color: var(--muted);
}

.cs-num-muted {
    color: var(--muted);
}

/* 我的解答状态 */
.cs-res {
    font-size: 12px;
    white-space: nowrap;
}

.cs-res.is-ok {
    color: var(--ok);
    font-weight: 600;
}

.cs-res.is-no {
    color: var(--danger);
}

.cs-res.is-wait {
    color: var(--warn);
}

.cs-res.is-none {
    color: var(--muted);
}

/* ================================================================== 公告 */
.cs-ann {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-ann-item {
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
}

.cs-ann-item:last-child {
    border-bottom: 0;
}

.cs-ann-time {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cs-ann-body {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ink-2);
}

.cs-ann-body > :last-child {
    margin-bottom: 0;
}

.cs-ann-body pre {
    padding: 10px 12px;
    background: #F7F8F7;
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: auto;
}

/* ============================================================ 比赛列表页 */
.cs-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.cs-list-title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .2px;
}

.cs-list-sub {
    max-width: 680px;
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--ink-3);
}

.cs-list-sub b {
    font-weight: 600;
    color: var(--ink-2);
}

.cs-list-stat {
    flex: 0 0 auto;
    text-align: right;
    line-height: 1.2;
}

.cs-list-stat-num {
    display: block;
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cs-list-stat-lab {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--muted);
}

.cs-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.cs-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line-soft);
    transition: background .15s ease;
}

.cs-item:last-child {
    border-bottom: 0;
}

.cs-item:hover {
    background: #FAFBFA;
}

.cs-item-date {
    /* 58px 装不下 15px 字号的「10-28」，会折成两行；66px 才刚好留出两侧余量 */
    flex: 0 0 66px;
    text-align: center;
    padding-right: 18px;
    border-right: 1px solid var(--line);
    line-height: 1.25;
}

.cs-item-md {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cs-item-y {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cs-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-item-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cs-item-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.cs-item-title:hover {
    color: var(--brand);
}

.cs-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.cs-item-meta a {
    color: var(--ink-3);
}

.cs-item-meta a:hover {
    color: var(--brand);
}

.cs-item-dot {
    color: var(--line);
}

.cs-item-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ================================================================== 按钮 */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 13px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.cs-btn:hover,
.cs-btn:focus {
    color: var(--brand);
    border-color: var(--brand);
    text-decoration: none;
}

.cs-btn-primary {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.cs-btn-primary:hover,
.cs-btn-primary:focus {
    color: #fff;
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.cs-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cs-tag.is-joined {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: #CFE0DE;
}

/* ============================================================ 榜单工具条 */
.cs-standing {
    margin-bottom: 8px;
}

.cs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.cs-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cs-toolbar-note {
    font-size: 12px;
    color: var(--muted);
}

.cs-toggle {
    margin: 0;
}

.cs-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ink-2);
    cursor: pointer;
}

.cs-check input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.cs-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.cs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
}

.cs-legend-item .legend-status {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
}

/* site.css 里 .table-legend .legend-status 把尺寸写成了 23px（那是老图例的方砖），
   这里要做小方块，必须命中更具体的选择器 */
.cs-legend .legend-status {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.cs-standing-wrap {
    padding: 4px 16px 8px;
    margin-bottom: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

/* ============================================ 比赛内其余页面（题目/提交/答疑）
   problem.php / status.php / clarify.php 仍然用 bootstrap 的 table + GridView，
   这里统一把它们的线条和字号拉到主题体系里，避免每个文件都重写一遍 */
.cs-page .table {
    margin-bottom: 0;
    font-size: 13px;
    color: var(--ink-2);
}

.cs-page .table > thead > tr > th {
    padding: 9px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border-color: var(--line);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.cs-page .table > tbody > tr > td,
.cs-page .table > tbody > tr > th {
    padding: 9px 10px;
    border-color: var(--line-soft);
    vertical-align: middle;
    font-weight: 400;
}

.cs-page .table-bordered {
    border-color: var(--line);
}

.cs-page .table-bordered > thead > tr > th,
.cs-page .table-bordered > tbody > tr > th,
.cs-page .table-bordered > tbody > tr > td {
    border-color: var(--line-soft);
}

.cs-page .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #FAFBFA;
}

/* 榜单表格：单元格里大量是 <th>（行首名次/昵称），要放开加粗 */
.cs-page .table-rank > thead > tr > th,
.cs-page .table-rank > tbody > tr > th {
    text-align: center;
    font-weight: 500;
    color: var(--ink-2);
}

.cs-page .table-rank > tbody > tr > th:first-child {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cs-page .table-rank > tbody > tr > td {
    text-align: center;
}

/* 比赛题目页的正文块 */
.cs-page .problem-view h1 {
    margin: 4px 0 16px;
    font-size: 20px;
    font-weight: 600;
}

.cs-page .problem-view h3 {
    margin: 22px 0 8px;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    border-bottom: 1px solid var(--line);
}

.cs-page .problem-view .content-wrapper {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ink-2);
}

.cs-page .problem-view .sample-test {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cs-page .problem-view .sample-test > div {
    flex: 1 1 260px;
    min-width: 0;
}

.cs-page .problem-view .sample-test h4 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.cs-page .problem-view pre {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.7;
    background: #F7F8F7;
    border: 1px solid var(--line);
    border-radius: 3px;
}

/* ================================================================== 分页 */
.cs-pager {
    margin-top: 16px;
    text-align: center;
}

.cs-pager .pagination {
    margin: 0;
}

.cs-pager .pagination > li > a,
.cs-pager .pagination > li > span {
    padding: 5px 11px;
    margin: 0 2px;
    font-size: 12.5px;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

.cs-pager .pagination > li > a:hover,
.cs-pager .pagination > li > a:focus {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand);
}

.cs-pager .pagination > .active > a,
.cs-pager .pagination > .active > a:hover,
.cs-pager .pagination > .active > span {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.cs-pager .pagination > .disabled > span,
.cs-pager .pagination > .disabled > a {
    color: var(--muted);
    background: var(--paper);
    border-color: var(--line);
}

/* ================================================================ 响应式 */
@media (max-width: 991px) {
    .cs-head {
        flex-wrap: wrap;
        gap: 16px;
    }

    .cs-head-side {
        flex: 1 1 100%;
        text-align: left;
    }

    .cs-remain-box {
        justify-content: flex-start;
    }

    .cs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-grid-item:nth-child(2n) {
        border-right: 0;
    }

    .cs-grid-item:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 767px) {
    .cs-page {
        padding: 16px 0 6px;
    }

    .cs-head {
        padding: 16px;
    }

    .cs-title {
        font-size: 18px;
    }

    .cs-remain {
        font-size: 20px;
    }

    .cs-card {
        padding: 14px 15px 16px;
    }

    .cs-list-head {
        flex-wrap: wrap;
        gap: 12px;
    }

    .cs-list-stat {
        text-align: left;
    }

    .cs-item {
        flex-wrap: wrap;
        gap: 10px;
        padding: 13px 15px;
    }

    .cs-item-date {
        flex: 0 0 46px;
        padding-right: 12px;
        text-align: left;
    }

    .cs-item-body {
        flex: 1 1 60%;
    }

    .cs-item-action {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    /* 窄屏列表列太多，只留题目与状态 */
    .cs-table .c-stat,
    .cs-table .c-pid {
        display: none;
    }

    .cs-table .c-idx {
        width: 44px;
    }

    .cs-table > thead > tr > th,
    .cs-table > tbody > tr > td {
        padding: 9px 6px;
    }

    .cs-toolbar {
        padding: 10px 12px;
    }

    .cs-legend {
        gap: 4px 12px;
    }
}