/* ============================================================
   提交记录页（/solution/index，导航里叫「记录」）
   风格：清爽学术风 —— 与 theme.css / problem.css / news.css 共用变量，
        无渐变、无大投影、hover 只改颜色不位移
   作用域：所有规则限定在 .rec-page 内，不污染全站
   ============================================================ */
/* ---------------------------------------------------------------- 页面骨架 */
.rec-page {
    padding: 22px 0 40px;
}

/* site.css 里 .solution-index 可能有老边距，统一收掉 */
.rec-page .breadcrumb {
    margin-bottom: 14px;
    font-size: 12px;
    background: transparent;
    padding: 0;
}

/* ---------------------------------------------------------------- 页头 */
.rec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.rec-title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: 0.2px;
}

.rec-sub {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.rec-sub b {
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.rec-sub .sep {
    margin: 0 6px;
    color: var(--line);
}

/* ---------------------------------------------------------------- 筛选条 */
.rec-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.rec-filter .fld {
    position: relative;
    flex: 0 0 auto;
    width: 128px;
}

/* 题号 / 作者 / 学校：稍宽一些 */
.rec-filter .fld-wide {
    width: 150px;
}

.rec-filter .fld input, .rec-filter .fld select {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 30px;
    font-size: 13px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease;
}

.rec-filter .fld select {
    padding-right: 24px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.6L6 7.6 9 4.6' fill='none' stroke='%238A9490' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 12px;
}

.rec-filter .fld input:focus, .rec-filter .fld select:focus {
    border-color: var(--brand);
    outline: 0;
    box-shadow: 0 0 0 2px var(--brand-soft);
}

.rec-filter .fld input::placeholder {
    color: var(--muted);
}

/* 输入框左侧图标：内联 SVG 当背景，不引图标字体 */
.rec-filter .fld::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    opacity: 0.55;
    pointer-events: none;
}

.rec-filter .fld-problem::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.2' y='2.6' width='11.6' height='10.8' rx='1.3' fill='none' stroke='%235C6A66' stroke-width='1.2'/%3E%3Cpath d='M4.6 6h6.8M4.6 8.6h6.8M4.6 11.2h3.6' stroke='%235C6A66' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.rec-filter .fld-user::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.4' r='2.5' fill='none' stroke='%235C6A66' stroke-width='1.2'/%3E%3Cpath d='M3.2 13.2c.5-2.4 2.5-3.8 4.8-3.8s4.3 1.4 4.8 3.8' fill='none' stroke='%235C6A66' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.rec-filter .fld-school::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4l5.4 2.6L8 7.6 2.6 5 8 2.4z' fill='none' stroke='%235C6A66' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M4.6 6.6v3.2c0 1.2 1.6 2 3.4 2s3.4-.8 3.4-2V6.6' fill='none' stroke='%235C6A66' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 下拉框（结果 / 语言）前缀标签，不用图标，用文字更省空间也更清楚 */
.rec-filter .fld-select {
    position: relative;
    width: 148px;
}

.rec-filter .fld-select .lbl {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11.5px;
    color: var(--muted);
    pointer-events: none;
    z-index: 1;
}

.rec-filter .fld-select select {
    padding-left: 44px;
}

.rec-filter .fld-verdict .lbl {
    width: 30px;
}

.rec-filter .fld-verdict select {
    padding-left: 44px;
}

.rec-filter .fld-lang .lbl {
    width: 24px;
}

.rec-filter .fld-lang select {
    padding-left: 38px;
}

.rec-filter .fld-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.rec-filter .btn {
    height: 32px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 30px;
    border-radius: 3px;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

.rec-filter .btn-primary:hover, .rec-filter .btn-primary:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.rec-filter .btn-default {
    color: var(--ink-3);
    background: var(--paper);
    border-color: var(--line);
}

.rec-filter .btn-default:hover, .rec-filter .btn-default:focus {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand-soft);
}

/* 「只看我的」这类快捷入口，做成文字链更轻 */
.rec-filter .quick {
    font-size: 12.5px;
    color: var(--ink-3);
    text-decoration: none;
    padding: 0 4px;
    white-space: nowrap;
}

.rec-filter .quick:hover, .rec-filter .quick:focus {
    color: var(--brand);
    text-decoration: none;
}

/* ---------------------------------------------------------------- 表格容器 */
.rec-table-wrap {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 细滚动条 */
.rec-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.rec-table-wrap::-webkit-scrollbar-thumb {
    background: #D3D8D4;
    border-radius: 4px;
}

.rec-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #BAC1BC;
}

.rec-table-wrap::-webkit-scrollbar-track {
    background: var(--line-soft);
}

/* 右侧渐隐：提示还能往右拖。只在真正溢出时由 JS 加 .is-scrollable */
.rec-table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 8px;
    width: 28px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.rec-table-wrap.is-scrollable::after {
    opacity: 1;
}

/* ---------------------------------------------------------------- 表格 */
/* site.css 第 335 行有一条 .solution-index table, .solution-index table th{text-align:center}，
   而本页 body 的类名正好是 solution-index（布局按 controller-action 打的），
   会把所有单元格强制居中。这里用更高特异性拉回左对齐 */
body.solution-index .rec-page .rec-table > thead > tr > th {
    text-align: left;
}

body.solution-index .rec-page .rec-table > tbody > tr > td {
    text-align: left;
}

body.solution-index .rec-page .rec-table > thead > tr > th.col-score, body.solution-index .rec-page .rec-table > thead > tr > th.col-time, body.solution-index .rec-page .rec-table > thead > tr > th.col-mem, body.solution-index .rec-page .rec-table > thead > tr > th.col-len, body.solution-index .rec-page .rec-table > thead > tr > th.col-when, body.solution-index .rec-page .rec-table > tbody > tr > td.col-score, body.solution-index .rec-page .rec-table > tbody > tr > td.col-time, body.solution-index .rec-page .rec-table > tbody > tr > td.col-mem, body.solution-index .rec-page .rec-table > tbody > tr > td.col-len, body.solution-index .rec-page .rec-table > tbody > tr > td.col-when {
    text-align: right;
}

.rec-table {
    width: 100%;
    min-width: 1024px;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.rec-table > thead > tr > th {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    text-align: left;
    white-space: nowrap;
    background: #FAFBFA;
    border-bottom: 1px solid var(--line);
}

.rec-table > tbody > tr > td {
    padding: 0 12px;
    height: 44px;
    font-size: 13px;
    color: var(--ink-2);
    vertical-align: middle;
    border-top: 1px solid var(--line-soft);
}

.rec-table > tbody > tr:first-child > td {
    border-top: 0;
}

.rec-table > tbody > tr:hover > td {
    background: #FAFCFB;
}

/* 取消 bootstrap 条纹与斑马线，靠 hover 表达层级 */
.rec-table > tbody > tr:nth-of-type(odd) > td {
    background: transparent;
}

.rec-table > tbody > tr:nth-of-type(odd):hover > td {
    background: #FAFCFB;
}

/* 横向滚动时固定「运行 ID」列，滚到右边仍知道自己在看哪一条。
   必须给单元格上不透明底色，否则会透出下面滚动的列 */
.rec-table > thead > tr > th.col-rid, .rec-table > tbody > tr > td.col-rid {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--paper);
}

.rec-table > thead > tr > th.col-rid {
    z-index: 3;
    background: #FAFBFA;
}

.rec-table > tbody > tr:hover > td.col-rid {
    background: #FAFCFB;
}

/* 固定列右侧的软边界，提示这一列是钉住的 */
.rec-table > thead > tr > th.col-rid::after, .rec-table > tbody > tr > td.col-rid::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.rec-table a {
    color: var(--brand);
    text-decoration: none;
}

.rec-table a:hover, .rec-table a:focus {
    color: var(--brand-dark);
    text-decoration: underline;
}

/* ---------------------------------------------------------------- 各列 */
.rec-table .col-rid {
    width: 78px;
}

.rec-table .col-user {
    width: 116px;
}

.rec-table .col-prob {
    width: auto;
}

.rec-table .col-diff {
    width: 68px;
}

.rec-table .col-verdict {
    width: 128px;
}

.rec-table .col-score {
    width: 60px;
    text-align: right;
}

.rec-table .col-time {
    width: 84px;
    text-align: right;
}

.rec-table .col-mem {
    width: 88px;
    text-align: right;
}

.rec-table .col-lang {
    width: 74px;
}

.rec-table .col-len {
    width: 84px;
    text-align: right;
}

.rec-table .col-when {
    width: 100px;
    text-align: right;
}

.rec-table th.col-score, .rec-table th.col-time, .rec-table th.col-mem, .rec-table th.col-len, .rec-table th.col-when {
    text-align: right;
}

/* 运行 ID：等宽数字、弱化色 */
.rec-table .rid {
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

.rec-table .rid a {
    color: var(--muted);
}

.rec-table .rid a:hover {
    color: var(--brand);
}

/* 作者：限宽省略 */
.rec-table .who {
    display: block;
    max-width: 92px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 题目：题号弱化 + 标题正常，整体省略 */
.rec-table .prob {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.rec-table .prob .pid {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.rec-table .prob a {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 数值列：等宽数字，弱化单位 */
.rec-table .num {
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

.rec-table .num .unit {
    margin-left: 2px;
    font-size: 11px;
    color: var(--muted);
}

.rec-table .cell-empty {
    color: var(--line);
}

/* 难度胶囊：与问题列表 .diff 完全一致的 8 档实心色阶 */
.rec-table .diff {
    display: inline-block;
    min-width: 34px;
    padding: 1px 7px;
    font-size: 11.5px;
    line-height: 17px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

.rec-table .diff-0 {
    background: #777777;
}

.rec-table .diff-1 {
    background: #D01938;
}

.rec-table .diff-2 {
    background: #FFA500;
}

.rec-table .diff-3 {
    background: #FFC116; color: #3A2A00;
}

.rec-table .diff-4 {
    background: #52C41A;
}

.rec-table .diff-5 {
    background: #5ABFC1; color: #08383A;
}

.rec-table .diff-6 {
    background: #3498DB;
}

.rec-table .diff-7 {
    background: #9D3DCF;
}

.rec-table .diff-8 {
    background: #0E1D69;
}

/* ---------------------------------------------------------------- 状态胶囊 */
.rec-table .vd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 9px 2px 8px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rec-table .vd-dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* 等待类：灰蓝 + 呼吸点（与新闻页新条目同一种语言） */
.rec-table .vd-wait {
    color: #5B6B78;
    background: #EEF2F5;
}

.rec-table .vd-wait .vd-dot {
    position: relative;
    color: #5B6B78;
    animation: rec-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes rec-dot-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.35); }
}

/* 通过：绿 */
.rec-table .vd-ok {
    color: var(--ok, #2E6B3E);
    background: #EDF5EF;
}

/* 需注意（超时/超内存/格式/运行/编译错误）：琥珀 */
.rec-table .vd-warn {
    color: var(--warn, #A85B00);
    background: #FBF3E8;
}

/* 失败（答案错误/系统错误/无测试数据）：红 */
.rec-table .vd-err {
    color: var(--danger, #A32D2D);
    background: #FBEEEE;
}

/* 可点击的状态（能看错误信息时）。
   元素改成了 span —— 不再有 href，所以 cursor 和键盘焦点要自己补上 */
.rec-table .vd.is-clickable {
    cursor: pointer;
}

.rec-table .vd.is-clickable:hover,
.rec-table .vd.is-clickable:focus {
    filter: brightness(0.94);
    outline: none;
}

.rec-table .vd.is-clickable:focus-visible {
    outline: 2px solid var(--brand-soft, #EAF1F0);
    outline-offset: 1px;
}

.rec-table .vd-ok.is-clickable:hover {
    background: #E2EFE5;
}

.rec-table .vd-warn.is-clickable:hover {
    background: #F7EAD9;
}

.rec-table .vd-err.is-clickable:hover {
    background: #F7E2E2;
}

.rec-table .vd-wait.is-clickable:hover {
    background: #E5EBEF;
}

/* 语言列：点开源码弹窗 */
.rec-table .lang-link {
    font-size: 12.5px;
    color: var(--ink-3);
}

.rec-table .lang-link.is-clickable {
    cursor: pointer;
    text-decoration: none;
}

.rec-table .lang-link:hover,
.rec-table .lang-link.is-clickable:focus {
    color: var(--brand);
}

.rec-table .lang-link.is-clickable:focus-visible {
    outline: 2px solid var(--brand-soft, #EAF1F0);
    outline-offset: 2px;
}

/* 分数：强调一点，让它比旁边数字更醒目 */
.rec-table .score {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.rec-table .score.is-full {
    color: var(--ok, #2E6B3E);
}

/* 提交时间：相对时间，title 里有绝对时间 */
.rec-table .when {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- 空状态 */
.rec-empty {
    padding: 56px 20px 60px;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.rec-empty .ico {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    color: #C6CDC8;
}

.rec-empty .ico svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rec-empty .t1 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
}

.rec-empty .t2 {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--muted);
}

.rec-empty .t2 a {
    color: var(--brand);
    text-decoration: none;
}

.rec-empty .t2 a:hover {
    text-decoration: underline;
}

.rec-empty .acts {
    margin-top: 16px;
}

.rec-empty .btn {
    height: 32px;
    padding: 0 18px;
    font-size: 13px;
    line-height: 30px;
    border-radius: 3px;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* bootstrap 的 .btn-primary 是蓝色 #337ab7，空状态里要换成本站品牌青 */
.rec-empty .btn-primary {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.rec-empty .btn-primary:hover, .rec-empty .btn-primary:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.rec-empty .btn-default {
    color: var(--ink-3);
    background: var(--paper);
    border-color: var(--line);
}

.rec-empty .btn-default:hover, .rec-empty .btn-default:focus {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand-soft);
}

/* ---------------------------------------------------------------- 分页 */
.rec-pager {
    margin-top: 18px;
    text-align: center;
}

.rec-pager .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0;
}

.rec-pager .pagination > li {
    display: block;
}

.rec-pager .pagination > li > a, .rec-pager .pagination > li > span {
    float: none;
    display: block;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    font-size: 12.5px;
    line-height: 30px;
    text-align: center;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
}

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

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

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

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1199px) {
.rec-filter .fld {
        width: 120px;
    }

.rec-filter .fld-select {
        width: 140px;
    }
}

@media (max-width: 991px) {
.rec-page {
        padding-top: 16px;
    }

.rec-title {
        font-size: 19px;
    }

/* 筛选条在平板上一行放不下，动作区不再右浮动，跟着换行 */
    .rec-filter .fld-actions {
        margin-left: 0;
        width: 100%;
        padding-top: 2px;
    }
}

@media (max-width: 767px) {
.rec-filter {
        padding: 10px;
    }

/* 手机上两列排布，避免每个控件都占满一行 */
    .rec-filter .fld, .rec-filter .fld-wide, .rec-filter .fld-select {
        width: calc(50% - 4px);
    }

/* 5 个筛选控件是奇数，最后一个占满整行，右侧不留半格空白 */
    .rec-filter .fld-lang {
        width: 100%;
    }

.rec-filter .fld-actions {
        width: 100%;
        flex-wrap: wrap;
    }

.rec-filter .fld-actions .btn {
        flex: 1 1 0;
    }

/* 「只看我的」单独一行居中，不然会和两个按钮挤在同一行把按钮压窄 */
    .rec-filter .fld-actions .quick {
        width: 100%;
        padding-top: 2px;
        text-align: center;
    }

.rec-table > thead > tr > th, .rec-table > tbody > tr > td {
        padding-left: 9px;
        padding-right: 9px;
    }

.rec-empty {
        padding: 40px 16px 44px;
    }
}

/* 尊重系统的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
.rec-table .vd-wait .vd-dot {
        animation: none;
        opacity: 0.8;
    }
}