/* Match the points ledger's heading, surface, spacing and borderless rows. */
body.pc-app[data-page=records] .workspace { background:linear-gradient(120deg,var(--hero-blue),var(--white) 58%,var(--hero-violet)); }
.records-heading { text-align:left; margin-bottom:calc(var(--space-xxl)*1.5); }
.records-heading h1 { margin-bottom:var(--space-md); }
.records-board { background:var(--white); border-radius:var(--radius-xl); overflow:hidden; }
.records-board-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-lg); padding:var(--space-xl) var(--space-xxl); }
.records-board-header p { font-size:var(--font-sm); color:var(--muted); margin:0; }
.records-board-header strong { color:var(--text); font-weight:500; }
.records-columns,.records-row { display:grid; grid-template-columns:minmax(0,1fr) calc(var(--space-xxl)*3) calc(var(--space-xxl)*2.5) calc(var(--space-xxl)*4.5) calc(var(--space-xxl)*2.5); align-items:center; gap:var(--space-xl); padding:var(--space-lg) var(--space-xxl); font-variant-numeric:tabular-nums; }
.records-columns { background:var(--hover); color:var(--muted); font-size:var(--font-sm); }
.records-columns>span:not(:first-child) { text-align:right; }
.records-row:hover { background:var(--hover); }
.records-file { display:flex; align-items:center; gap:var(--space-lg); min-width:0; }
.records-file-preview { position:relative; overflow:hidden; width:calc(var(--space-xl)*2); height:calc(var(--space-xl)*2); border:0; padding:0; border-radius:var(--radius-md); flex-shrink:0; background:var(--primary-light); }
button.records-file-preview { cursor:zoom-in; }
button.records-file-preview:hover { box-shadow:0 0 0 var(--space-xs) var(--primary-light); }
#popup.record-media-dialog { width:min(var(--layout-width),calc(100vw - var(--space-xxl))); max-height:90dvh; }
.record-media-dialog .dialog-body { padding:var(--space-lg); }
.record-media-preview { text-align:center; }
.record-media-preview img,.record-media-preview video { display:block; width:100%; max-height:65dvh; object-fit:contain; margin:auto; border-radius:var(--radius-md); }
.record-media-preview p { margin:var(--space-lg) 0; }
.records-file-fallback { display:grid; place-items:center; height:100%; color:var(--primary); }
.records-file-fallback svg { width:var(--space-xl); height:var(--space-xl); }
.records-thumbnail { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--hover); }
.records-file-info { min-width:0; }
.records-file-info h3 { font-size:var(--font-base); font-weight:500; letter-spacing:0; margin:0 0 var(--space-xs); overflow-wrap:anywhere; }
.records-file-info p { margin:0; font-size:var(--font-sm); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.records-status { display:inline-flex; align-items:center; gap:var(--space-sm); padding:var(--space-xs) var(--space-md); border-radius:var(--radius-md); color:var(--muted); background:var(--hover); font-size:var(--font-sm); white-space:nowrap; }
.records-status::before { content:""; width:var(--space-xs); height:var(--space-xs); border-radius:50%; background:currentColor; }
.records-status--completed { color:var(--success); background:color-mix(in srgb,var(--success) 8%,var(--white)); }
.records-status--processing { color:var(--primary); background:var(--primary-light); }
.records-row-status,.records-row-points,.records-row-time { text-align:right; }
.records-row-points { font-size:var(--font-sm); }
.records-row-points strong { font-size:var(--font-base); font-weight:500; }
.records-row-points span { color:var(--muted); }
.records-row-time { font-size:var(--font-sm); color:var(--muted); }
.records-detail-button { display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--space-xs); border:0; background:transparent; padding:var(--space-sm) 0; font-size:var(--font-sm); color:var(--primary); white-space:nowrap; }
.records-detail-button img { width:var(--font-sm); height:var(--font-sm); }
.records-detail-button:hover { text-decoration:underline; }
.records-blank { text-align:center; padding:calc(var(--space-xxl)*3) var(--space-xl); }
.records-empty-icon { display:block; width:calc(var(--space-xxl)*3); height:calc(var(--space-xxl)*3); object-fit:contain; margin:0 auto var(--space-xl); opacity:.6; }
.records-blank h3 { margin-bottom:var(--space-sm); }
.records-blank p,.records-login p { color:var(--muted); }
.records-blank .button { margin-top:var(--space-lg); }
.records-login { text-align:center; padding:calc(var(--space-xxl)*2) var(--space-xl); }
.records-tools-link { display:flex; justify-content:center; align-items:center; margin-top:var(--space-xl); font-size:var(--font-base); font-weight:500; }
.records-tools-link:hover { text-decoration:underline; text-underline-offset:var(--space-xs); }
@media(max-width:1100px) {
    .records-columns,.records-row { gap:var(--space-lg); grid-template-columns:minmax(0,1fr) calc(var(--space-xxl)*3) calc(var(--space-xxl)*2) calc(var(--space-xxl)*4) calc(var(--space-xxl)*2.5); }
}
@media(max-width:800px) {
    .records-columns { display:none; }
    .records-row { grid-template-columns:minmax(0,1fr) auto; gap:var(--space-md) var(--space-lg); }
    .records-file { grid-column:1; grid-row:1 / span 2; }
    .records-row-status { justify-self:end; grid-column:2; grid-row:1; }
    .records-row-points { justify-self:end; grid-column:2; grid-row:2; }
    .records-row-time { grid-column:1; text-align:left; }
    .records-detail-button { grid-column:2; }
}
@media(max-width:768px) {
    .records-board-header { padding:var(--space-xl); }
    .records-columns,.records-row { padding:var(--space-lg) var(--space-xl); }
    .records-heading { margin-bottom:var(--space-xxl); }
    .records-file { gap:var(--space-md); }
    .records-status { padding-inline:var(--space-sm); }
}
/* Match desktop Popup (wide) and ResultView, using the base uni.scss palette from pc.css. */
#popup.record-dialog { --radius-btn:var(--radius-md); width:min(calc(var(--space-xxl)*24),calc(100vw - var(--space-xxl))); max-height:calc(100dvh - var(--space-xl)*2); padding:var(--space-xl); overflow:hidden; border:calc(var(--space-xs)/4) solid var(--border); border-radius:var(--radius-md); font:var(--font-md)/1.5 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; box-shadow:0 calc(var(--space-sm) + var(--space-xs)/2) calc(var(--space-lg) - var(--space-xs)/4) calc(var(--space-xs)*-.75) color-mix(in srgb,var(--mask) 20%,transparent),0 var(--space-xs) calc(var(--space-xs)*1.5) calc(var(--space-xs)*-1) color-mix(in srgb,var(--mask) 20%,transparent); }
#popup.record-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr); gap:var(--space-lg); }
#popup.record-dialog>header { padding:0 var(--space-xl) 0 0; border:0; }
#popup.record-dialog>header h2 { margin:0; font-size:var(--font-lg); font-weight:600; letter-spacing:-.025em; line-height:1; overflow-wrap:anywhere; }
#popup.record-dialog #popup-close { position:absolute; top:var(--space-lg); right:var(--space-lg); width:var(--space-lg); height:var(--space-lg); padding:0; border-radius:calc(var(--radius-sm)/2); opacity:.7; }
#popup.record-dialog #popup-close:hover { background:transparent; opacity:1; }
#popup.record-dialog svg { width:var(--space-lg); height:var(--space-lg); stroke-width:2; }
.record-dialog .dialog-body { min-height:0; padding:0; overflow-y:auto; font-size:var(--font-base); line-height:calc(10 / 7); }
.record-result-view { --record-preview-height:clamp(calc(var(--space-sm)*25),calc(100dvh - var(--space-xxl)*15),calc(var(--space-xxl)*20)); }
.record-view-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); }
.record-view-heading h2 { font-size:var(--font-base); font-weight:600; line-height:inherit; letter-spacing:normal; }
.record-view-tabs { display:flex; flex-shrink:0; gap:var(--space-xs); padding:var(--space-xs); border-radius:var(--radius-md); background:var(--hover); }
.record-view-tabs button { border:0; padding:calc(var(--space-xs)*1.5) var(--font-base); border-radius:calc(var(--radius-sm)*1.5); background:transparent; color:var(--muted); font-size:var(--font-sm); line-height:calc(10 / 7); }
.record-view-tabs button[aria-pressed=true] { color:var(--text); background:var(--white); box-shadow:0 calc(var(--space-xs)/4) calc(var(--space-xs)*.75) var(--border); }
.record-preview { display:flex; align-items:center; justify-content:center; min-width:0; height:calc(var(--record-preview-height) + var(--space-xxl)); padding:var(--space-lg); border-radius:var(--radius-xl); background:var(--page); }
.record-preview video,.record-preview .result-image { display:block; max-width:100%; max-height:var(--record-preview-height); object-fit:contain; margin:0; border-radius:var(--radius-md); }
.record-preview audio { display:block; width:100%; }
.record-result-view .text-result { display:inline-block; min-height:var(--record-preview-height); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-md); font-size:var(--font-base); line-height:inherit; vertical-align:baseline; }
.record-dialog .empty { display:flex; min-height:calc(var(--space-xxl)*7); flex-direction:column; align-items:center; justify-content:center; gap:var(--space-lg); margin:0; padding:var(--space-xxl); color:var(--muted); }
.record-dialog .empty p,.record-dialog .empty h3,.record-dialog .spinner { margin:0; }
.record-result-view>:not(:last-child) { margin-bottom:calc(var(--space-lg) + var(--space-xs)); }
.record-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-md); }
.record-actions .button { min-height:calc(var(--space-sm)*5); padding:var(--space-sm) var(--space-lg); border:0; border-radius:var(--radius-btn); font-size:var(--font-base); font-weight:500; line-height:calc(10 / 7); white-space:nowrap; }
.record-actions .button:hover { background:color-mix(in srgb,var(--primary) 90%,transparent); box-shadow:none; filter:none; }
.record-actions .button.secondary { border:calc(var(--space-xs)/4) solid var(--border); background:var(--page); color:var(--text); }
.record-actions .button.secondary:hover { background:var(--primary-light); }
.records-tabs { display:flex; gap:var(--space-xs); padding:var(--space-xs); background:var(--hover); border-radius:var(--radius-btn); }
.records-tab { color:var(--muted); padding:var(--space-sm) var(--space-xl); border-radius:var(--radius-md); font-weight:500; }
.records-tab:hover { color:var(--primary); }
.records-tab.selected { color:var(--primary); background:var(--primary-light); }
@media(max-width:768px) { .records-tab { padding:var(--space-sm) var(--space-lg); } }