:root {
    --bg: #f3f6fb;
    --panel: #ffffff;
    --ink: #102033;
    --muted: #607086;
    --line: #d9e1ec;
    --line-strong: #c4d0df;
    --blue: #2f66df;
    --navy: #17345f;
    --green: #159864;
    --orange: #b86616;
    --red: #c83232;
    --amber: #d9961b;
    --soft-blue: #edf3ff;
    --soft-amber: #fff7e8;
}

[hidden] {
    display: none !important;
}

.notification-center {
    position: relative;
    z-index: 1200;
}

/* Menünün sağ kenara milimetrik olarak yaslanmasını garanti altına al */
.notification-center .dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

.notification-popover {
    width: 360px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(620px, calc(100vh - 120px));
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.notification-popover:not(.show) {
    display: none !important;
}

.notification-popover.show {
    display: grid;
}

/* Bildirim listesindeki yatay kaydırma çubuğunu yok et */
.notification-popover__items {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 380px;
}

/* Bildirim metinlerinin taşmasını önle */
.notification-popover__item .text-truncate {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-popover__item.unread {
    border-left: 4px solid var(--bs-primary, var(--color-primary));
    background: color-mix(in srgb, var(--bs-primary, var(--color-primary)) 8%, transparent);
}

.steam-admin-table-wrap {
    overflow: visible !important;
}

.steam-admin-table-wrap .dropdown-menu {
    z-index: 9999 !important;
    min-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
}

@media (max-width: 575.98px) {
    .notification-popover {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

.suggestion-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.suggestion-count-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-soft);
    color: var(--color-muted);
    font-weight: 900;
}

.button-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
    font-size: 12px;
    font-weight: 900;
}

.bulk-suggestion-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
}

a {
    color: var(--blue);
    text-decoration: none;
}

.shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.brand {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px;
}

.nav a,
.button,
button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    padding: 11px 16px;
    min-height: 42px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.icon-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 999px;
    font-size: 20px;
    line-height: 1;
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.nav a.active,
.button.primary,
button.primary {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.nav a:hover,
.button:hover,
button:hover {
    border-color: var(--line-strong);
    box-shadow: 0 1px 5px rgba(16, 32, 51, .08);
}

.button.danger,
button.danger {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.button.success,
button.success {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.button.warning-action,
button.warning-action {
    background: #fff7e8;
    border-color: #efb85f;
    color: #7a4308;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 8px 20px rgba(24, 50, 85, .04);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.grid.two-col,
.detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

label {
    color: var(--muted);
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #bfc9d7;
    background: #fff;
    color: var(--ink);
    padding: 10px 12px;
    font: inherit;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.table-wrap.no-scroll {
    overflow-x: visible;
}

.fit-table {
    table-layout: fixed;
}

.fit-table th,
.fit-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.lines-table th:first-child,
.lines-table td:first-child {
    width: 120px;
}

.lines-table th:last-child,
.lines-table td:last-child {
    width: 220px;
}

.lines-table td:last-child .button {
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 9px 10px;
    vertical-align: top;
}

th {
    text-align: left;
    color: var(--muted);
    font-size: 13px;
}

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

.flash {
    border-left: 4px solid var(--blue);
    background: #edf3ff;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.flash.error {
    border-color: var(--red);
    background: #fff0f0;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.badge.translated {
    background: #def7eb;
    color: var(--green);
}

.quiet-badge {
    background: #eef4f1;
    color: #47635a;
}

.badge.empty,
.badge.needs_review {
    background: #fff0de;
    color: var(--orange);
}

.danger-badge,
.line-status-needs_update,
.readiness-blocked {
    background: #fff0f0;
    color: var(--red);
}

.line-status-approved,
.line-status-translated,
.line-status-locked,
.readiness-ready {
    background: #def7eb;
    color: var(--green);
}

.line-status-reviewed,
.line-status-new,
.readiness-warning {
    background: #fff0de;
    color: var(--orange);
}

.line-status-removed {
    background: #eef2f7;
    color: var(--muted);
}

.line-status-skipped {
    background: #eef2f7;
    color: #475569;
}

.mono {
    font-family: Consolas, "Courier New", monospace;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.app-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(16, 32, 51, .28);
}

.app-dialog::backdrop {
    background: rgba(15, 23, 34, .58);
}

.app-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--color-surface-soft, #edf4f8) 62%, transparent);
}

.app-dialog__head h2 {
    margin: 0;
}

.app-dialog__body {
    padding: 18px;
}

.app-dialog form {
    display: grid;
    gap: 14px;
}

.modal-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.inline-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 600;
}

.inline-check input {
    width: auto;
}

.suggestion-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.suggestion-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.truncate {
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat {
    margin: 0;
}

.stat strong {
    display: block;
    margin-top: 6px;
    font-size: 26px;
}

.action-field {
    justify-content: end;
}

.progress-line {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 220px;
}

.progress-wide {
    grid-template-columns: minmax(220px, 1fr) auto;
}

.progress-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6edf6;
}

.progress-bar span {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--blue);
}

.progress-block {
    display: grid;
    gap: 6px;
}

.progress-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 800;
}

.progress-head strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
}

.progress-native {
    width: 100%;
    height: 16px;
    accent-color: var(--blue);
}

.progress-success {
    accent-color: var(--green);
}

.progress-warning {
    accent-color: var(--amber);
}

.hero-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hero-panel h1 {
    margin: 0 0 6px;
    font-size: 30px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.metric-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.metric-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 14px;
}

.metric-card span {
    display: block;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
}

.metric-card strong {
    display: block;
    margin-top: 6px;
    font-size: 26px;
}

.metric-card.warning {
    border-color: #f0ca77;
}

.metric-card.danger {
    border-color: #f1a5a5;
}

.metric-card.success {
    border-color: #85d9b5;
}

.metric-card.neutral {
    border-color: var(--line);
    background: #fbfdff;
}

.project-list,
.export-list {
    display: grid;
    gap: 12px;
}

.project-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.project-row h3 {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0;
}

.project-main {
    display: grid;
    gap: 12px;
    font-size: 16px;
}

.project-row:hover {
    border-color: var(--line-strong);
    box-shadow: 0 12px 26px rgba(24, 50, 85, .08);
    transform: translateY(-1px);
}

.project-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.readiness-list {
    margin: 12px 0 0;
    color: var(--muted);
}

.export-card {
    display: grid;
    gap: 14px;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.pill {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
}

.pill.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0.1rem 0.45rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
}

.pill.active .pill-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.filter-help {
    margin: 0.75rem 0 0;
    font-size: 0.92rem;
}

.badge-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.row-needs-update {
    background: #fffaf1;
}

.row-pending-suggestion {
    background: #f8fbff;
}

.row-skipped,
.row-muted {
    background: #f8fafc;
    color: var(--muted);
}

.warning-panel {
    border-color: #f0ca77;
    background: #fffaf1;
}

.progress-note {
    margin: -2px 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.approval-state {
    display: grid;
    gap: 6px;
}

.approval-empty-bar {
    width: 100%;
    height: 16px;
    border-radius: 999px;
    border: 1px solid #d1dbe8;
    background: repeating-linear-gradient(
        135deg,
        #f4f7fb,
        #f4f7fb 8px,
        #e9eef6 8px,
        #e9eef6 16px
    );
}

.suggestion-meta {
    margin-top: 6px;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
}

.suggestion-meta.pending {
    color: var(--orange);
}

.table-summary,
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--muted);
    font-weight: 700;
}

.pagination {
    justify-content: center;
    margin: 16px 0 0;
}

.pagination .button {
    min-width: 42px;
    padding-inline: 12px;
}

.button.disabled,
.button.disabled:hover {
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none;
}

.pagination-gap {
    color: var(--muted);
    padding: 0 4px;
    font-weight: 800;
}

.flag-form input {
    max-width: 420px;
}

.metric-explain {
    margin: -6px 0 16px;
}

.notification-panel {
    border-color: #c6d7ff;
}

.panel h2 {
    font-size: 24px;
    font-weight: 900;
}

.empty-state {
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 14px;
    color: var(--muted);
    background: #fbfdff;
}

.empty-state.inline {
    display: inline-flex;
}

.meta-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.meta-list div {
    display: grid;
    gap: 3px;
}

.meta-list span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.status-completed {
    background: #def7eb;
    color: var(--green);
}

.status-failed,
.status-cancelled {
    background: #fff0f0;
    color: var(--red);
}

.status-running,
.status-retrying {
    background: #fff0de;
    color: var(--orange);
}

.user-badge {
    display: flex;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    padding: 7px 10px;
    color: var(--muted);
}

.user-badge strong {
    color: var(--navy);
}

.user-badge__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    background: var(--color-surface-soft);
}

.auth-panel {
    max-width: 460px;
}

.context-main {
    color: var(--ink);
    font-weight: 800;
}

.health-ok,
.log-info {
    background: #def7eb;
    color: var(--green);
}

.health-warning,
.log-warning {
    background: #fff0de;
    color: var(--orange);
}

.health-error,
.log-error {
    background: #fff0f0;
    color: var(--red);
}

.split-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.pre-wrap {
    max-height: 420px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f7f9fd;
    border: 1px solid var(--line);
    padding: 12px;
}

.error-panel {
    border-color: #f1b3b3;
}

.toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1600;
    max-width: min(420px, calc(100vw - 36px));
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--green);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(16, 32, 51, .16);
    padding: 13px 14px;
    font-weight: 700;
}

.toast-error {
    border-left-color: var(--red);
}

.toast-close {
    min-height: 28px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
}

.notification-list {
    display: grid;
    gap: 8px;
}

.notification-item {
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    color: var(--ink);
}

.notification-item.unread {
    border-color: var(--blue);
    background: var(--soft-blue);
}

.notification-item small {
    color: var(--muted);
}

.review-form {
    display: grid;
    gap: 8px;
    min-width: 220px;
}

.quick-edit-dialog {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(16, 32, 51, .28);
    padding: 0;
}

.quick-edit-dialog::backdrop {
    background: rgba(15, 23, 34, .62);
}

.quick-edit-form {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.quick-edit-form textarea {
    min-height: 92px;
}

.quick-edit-form textarea[name="text"] {
    min-height: 150px;
}

.search-field {
    min-width: min(420px, 100%);
}

.line-filter-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    align-items: end;
}

.line-filter-grid .search-field {
    grid-column: 1 / 4;
    grid-row: 2;
}

.line-filter-grid .action-field {
    grid-column: 4;
    grid-row: 2;
}

.line-filter-grid .action-field button {
    width: 100%;
}

.notification-panel {
    padding: 14px;
}

.notification-panel .split-head {
    align-items: center;
}

.notification-panel .split-head h2 {
    margin: 0;
}

.notification-panel .split-head p {
    display: none;
}

.notification-panel .notification-list {
    gap: 6px;
}

.notification-panel .notification-item {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 2fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
}

.notification-panel .notification-item strong,
.notification-panel .notification-item span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-shell {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr) minmax(300px, 360px);
    gap: 16px;
    align-items: start;
}

.workspace-left,
.workspace-right {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow: auto;
}

.workspace-search {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.workspace-list {
    display: grid;
    gap: 8px;
}

.workspace-row {
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    color: var(--ink);
    text-decoration: none;
}

.workspace-row.active {
    border-color: var(--blue);
    background: var(--soft-blue);
}

.workspace-row span:last-child {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-form textarea[name="text"],
.workspace-center textarea {
    min-height: 160px;
}

.workspace-right section {
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 14px;
}

.tm-apply {
    display: grid;
    gap: 5px;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
}

.diff-box {
    border: 1px solid var(--amber);
    border-radius: 8px;
    background: var(--soft-amber);
    padding: 14px;
}

.diff-render {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 12px;
    margin: 10px 0;
    white-space: pre-wrap;
    line-height: 1.8;
}

.diff-remove {
    background: rgba(239, 68, 68, .18);
    color: var(--red);
    text-decoration: line-through;
    padding: 2px 3px;
    border-radius: 4px;
}

.diff-add {
    background: rgba(22, 163, 74, .18);
    color: var(--green);
    text-decoration: none;
    padding: 2px 3px;
    border-radius: 4px;
}

.qa-list,
.glossary-list,
.comment-list {
    display: grid;
    gap: 8px;
}

.qa-item,
.glossary-card,
.comment-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: var(--panel);
}

.qa-item {
    display: grid;
    gap: 4px;
    border-left-width: 5px;
}

.qa-error {
    border-left-color: var(--red);
}

.qa-warning {
    border-left-color: var(--amber);
}

.qa-info {
    border-left-color: var(--blue);
}

.workspace-perf-panel {
    margin: 10px 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-soft);
}

.workspace-perf-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 800;
}

.workspace-perf-panel summary strong {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    color: var(--color-primary);
}

.workspace-perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}

.workspace-perf-item {
    display: grid;
    gap: 3px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.workspace-perf-item span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.workspace-perf-item strong {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 15px;
}

.workspace-perf-item--client {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

.workspace-perf-panel p {
    margin: 0;
    padding: 0 12px 12px;
}

.workspace-live-qa {
    display: grid;
    gap: 8px;
    margin: -4px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-surface-soft);
}

.workspace-live-qa.has-error {
    border-left-color: var(--color-danger);
}

.workspace-live-qa.has-warning {
    border-left-color: var(--color-warning);
}

.workspace-live-qa.is-clean {
    border-left-color: var(--color-success);
}

.workspace-live-qa__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.workspace-live-qa__head strong {
    font-size: 14px;
}

.workspace-live-qa__head span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.workspace-live-qa__tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.workspace-live-qa__tokens span {
    padding: 3px 7px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    background: var(--color-surface);
}

.workspace-live-qa__tokens .is-ok {
    border-color: color-mix(in srgb, var(--color-success) 48%, var(--color-border));
    color: var(--color-success);
}

.workspace-live-qa__tokens .is-missing {
    border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-border));
    color: var(--color-danger);
}

.workspace-live-qa__issues {
    display: grid;
    gap: 6px;
}

.live-qa-issue {
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 13px;
}

.comment-item {
    display: grid;
    gap: 4px;
}

.comment-item small {
    color: var(--muted);
}

.comment-form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.compact-meta {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 1180px) {
    .workspace-shell {
        grid-template-columns: 1fr;
    }

    .workspace-left,
    .workspace-right {
        position: static;
        max-height: none;
    }
}

.notification-panel .notification-item small {
    white-space: nowrap;
}

.progress-native {
    appearance: none;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #e6edf6;
}

.progress-native::-webkit-progress-bar {
    background: #e6edf6;
    border-radius: 999px;
}

.progress-native::-webkit-progress-value {
    background: linear-gradient(90deg, var(--blue), #5c8cff);
    border-radius: 999px;
}

.progress-native::-moz-progress-bar {
    background: linear-gradient(90deg, var(--blue), #5c8cff);
    border-radius: 999px;
}

.progress-success::-webkit-progress-value {
    background: linear-gradient(90deg, var(--green), #42c993);
}

.progress-success::-moz-progress-bar {
    background: linear-gradient(90deg, var(--green), #42c993);
}

.progress-warning::-webkit-progress-value {
    background: linear-gradient(90deg, var(--amber), #f3bf4f);
}

.progress-warning::-moz-progress-bar {
    background: linear-gradient(90deg, var(--amber), #f3bf4f);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1722;
        --panel: #172234;
        --ink: #e8eef8;
        --muted: #a5b4c8;
        --line: #2d3b51;
        --line-strong: #40516b;
        --blue: #6b96ff;
        --navy: #2f66df;
        --green: #43c78f;
        --orange: #f2ae4f;
        --red: #ff6b6b;
        --amber: #f0bd48;
        --soft-blue: #162844;
        --soft-amber: #2a2516;
    }

    body,
    table,
    input,
    select,
    textarea,
    .metric-card,
    .project-row,
    .notification-item,
    .qa-item,
    .glossary-card,
    .comment-item,
    .diff-render,
    .workspace-row,
    .pill,
    .nav,
    .user-badge,
    .empty-state,
    .pre-wrap {
        background-color: var(--panel);
        color: var(--ink);
    }

    input,
    select,
    textarea {
        border-color: var(--line-strong);
    }

    .nav a,
    .button,
    button {
        background: #1c2a40;
        color: var(--ink);
        border-color: var(--line);
    }

    .button.warning-action,
    button.warning-action {
        background: #3a2a16;
        border-color: #7c5522;
        color: #ffd18b;
    }

    .flash,
    .warning-panel,
    .row-needs-update {
        background: #2a2516;
        color: var(--ink);
    }

    .flash.error,
    .danger-badge,
    .line-status-needs_update,
    .readiness-blocked {
        background: #3a2025;
        color: #ffb4b4;
    }

    .toast {
        background: #172234;
        color: var(--ink);
        border-color: var(--line-strong);
        box-shadow: 0 18px 36px rgba(0, 0, 0, .35);
    }

    .toast-error {
        background: #2a1720;
    }

    .badge {
        background: #25344a;
        color: #c9d6e8;
    }

    .badge.translated,
    .line-status-approved,
    .line-status-translated,
    .line-status-locked,
    .readiness-ready,
    .health-ok,
    .log-info,
    .status-completed {
        background: #163b2e;
        color: #86efbd;
    }

    .quiet-badge,
    .line-status-removed,
    .line-status-skipped {
        background: #243246;
        color: #cbd5e1;
    }

    .badge.empty,
    .badge.needs_review,
    .line-status-reviewed,
    .line-status-new,
    .readiness-warning,
    .health-warning,
    .log-warning,
    .status-running,
    .status-retrying {
        background: #3a2a16;
        color: #ffd18b;
    }

    .metric-card.warning,
    .metric-card.danger,
    .metric-card.success {
        background: #172234;
    }

    .project-row:hover {
        box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
    }

    .approval-empty-bar,
    .progress-native::-webkit-progress-bar {
        background-color: #233148;
    }
}

@media (max-width: 760px) {
    .shell {
        padding: 14px;
    }

    .topbar,
    .hero-panel,
    .split-head {
        flex-direction: column;
        align-items: stretch;
    }

    .grid.two-col,
    .detail-grid,
    .project-row {
        grid-template-columns: 1fr;
    }

    .project-side {
        width: 100%;
    }

    .progress-head {
        flex-direction: column;
        gap: 2px;
    }

    .line-filter-grid {
        grid-template-columns: 1fr;
    }

    .line-filter-grid .search-field,
    .line-filter-grid .action-field {
        grid-column: auto;
        grid-row: auto;
    }

    .notification-panel .notification-item {
        grid-template-columns: 1fr;
    }
}

/* Final UI polish: explicit theme system and workspace/beta refinements. */
:root,
:root[data-theme="light"] {
    color-scheme: light;
    --color-bg: #eef4f8;
    --color-surface: #f8fbfd;
    --color-surface-strong: #ffffff;
    --color-surface-soft: #edf4f8;
    --color-text: #0f2137;
    --color-muted: #617086;
    --color-border: #d3deea;
    --color-border-strong: #b6c7d8;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-accent: #0891b2;
    --color-accent-soft: #e5f6fb;
    --color-success: #12966b;
    --color-success-soft: #e7f8f1;
    --color-warning: #c47a12;
    --color-warning-soft: #fff5df;
    --color-danger: #cf3f55;
    --color-amber-soft: #fff5df;
    --color-blue-soft: #e7f0ff;
    --color-purple-soft: #f1edff;
    --metric-success-bg: #eefbf5;
    --metric-warning-bg: #fff7e7;
    --metric-danger-bg: #fff0f3;
    --shadow-soft: 0 16px 40px rgba(32, 68, 108, .10);
    --shadow-tiny: 0 1px 2px rgba(16, 32, 51, .06);
    --shadow-lift: 0 18px 38px rgba(28, 70, 125, .14);
    --bg: var(--color-bg);
    --panel: var(--color-surface-strong);
    --ink: var(--color-text);
    --muted: var(--color-muted);
    --line: var(--color-border);
    --line-strong: var(--color-border-strong);
    --blue: var(--color-primary);
    --navy: #17345f;
    --green: var(--color-success);
    --orange: #b96b19;
    --red: var(--color-danger);
    --amber: var(--color-warning);
    --soft-blue: var(--color-blue-soft);
    --soft-amber: var(--color-amber-soft);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0d1422;
    --color-surface: #151f30;
    --color-surface-strong: #1b2638;
    --color-surface-soft: #101827;
    --color-text: #e7edf6;
    --color-muted: #9aa8bb;
    --color-border: #2d3b50;
    --color-border-strong: #43546c;
    --color-primary: #69a8ff;
    --color-primary-hover: #3f83f8;
    --color-accent: #38bdf8;
    --color-accent-soft: #102c3d;
    --color-success: #5ee0a8;
    --color-success-soft: #103428;
    --color-warning: #f0b84b;
    --color-warning-soft: #2b2113;
    --color-danger: #fb7185;
    --color-amber-soft: #2b2113;
    --color-blue-soft: #132844;
    --color-purple-soft: #221b3d;
    --metric-success-bg: #103428;
    --metric-warning-bg: #2b2113;
    --metric-danger-bg: #321923;
    --shadow-soft: 0 20px 46px rgba(0, 0, 0, .34);
    --shadow-tiny: 0 1px 2px rgba(0, 0, 0, .28);
    --shadow-lift: 0 20px 42px rgba(0, 0, 0, .38);
    --bg: var(--color-bg);
    --panel: var(--color-surface-strong);
    --ink: var(--color-text);
    --muted: var(--color-muted);
    --line: var(--color-border);
    --line-strong: var(--color-border-strong);
    --blue: var(--color-primary);
    --navy: var(--color-primary-hover);
    --green: var(--color-success);
    --orange: var(--color-warning);
    --red: var(--color-danger);
    --amber: var(--color-warning);
    --soft-blue: var(--color-blue-soft);
    --soft-amber: var(--color-amber-soft);
}

html {
    scrollbar-color: var(--color-border-strong) var(--color-bg);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

.shell {
    max-width: 1440px;
}

.topbar {
    align-items: flex-start;
}

.brand {
    color: var(--color-text);
}

.topbar-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

.theme-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
    color: var(--color-muted);
    box-shadow: var(--shadow-tiny);
}

.theme-picker span {
    font-size: 12px;
    font-weight: 900;
}

.theme-picker select {
    width: auto;
    min-height: 30px;
    padding: 4px 26px 4px 8px;
    border-radius: 999px;
    border-color: transparent;
    background: var(--color-surface-soft);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 800;
}

.nav {
    background: color-mix(in srgb, var(--color-surface-strong) 86%, transparent);
    border-color: var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-tiny);
}

.nav a,
.button,
button {
    min-height: 40px;
    border-radius: 9px;
    background: var(--color-surface-strong);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-tiny);
}

.nav a.active,
.button.primary,
button.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.nav a:hover,
.button:hover,
button:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .14);
}

.button.primary:hover,
button.primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.panel,
.hero-panel {
    background: var(--color-surface-strong);
    border-color: var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}

input,
select,
textarea,
table,
.metric-card,
.project-row,
.notification-item,
.qa-item,
.glossary-card,
.comment-item,
.diff-render,
.workspace-row,
.pill,
.user-badge,
.empty-state,
.pre-wrap,
.quick-edit-dialog {
    background: var(--color-surface-strong);
    color: var(--color-text);
    border-color: var(--color-border);
}

input,
select {
    min-height: 42px;
    border-radius: 9px;
}

textarea {
    border-radius: 10px;
    line-height: 1.6;
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--color-muted) 78%, transparent);
}

th,
td {
    border-color: var(--color-border);
}

.badge {
    background: var(--color-surface-soft);
    color: var(--color-muted);
}

.badge.translated,
.line-status-approved,
.line-status-translated,
.line-status-locked,
.readiness-ready,
.health-ok,
.log-info,
.status-completed,
.check-status-passed {
    background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface-strong));
    color: var(--color-success);
}

.badge.empty,
.badge.needs_review,
.line-status-reviewed,
.line-status-new,
.readiness-warning,
.health-warning,
.log-warning,
.status-running,
.status-retrying,
.check-status-skipped,
.check-status-pending {
    background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface-strong));
    color: var(--color-warning);
}

.danger-badge,
.line-status-needs_update,
.readiness-blocked,
.health-error,
.log-error,
.status-failed,
.status-cancelled,
.check-status-failed {
    background: color-mix(in srgb, var(--color-danger) 18%, var(--color-surface-strong));
    color: var(--color-danger);
}

.quiet-badge,
.line-status-removed,
.line-status-skipped {
    background: var(--color-surface-soft);
    color: var(--color-muted);
}

.flash,
.notification-item.unread,
.workspace-row.active {
    background: var(--color-blue-soft);
}

.warning-panel,
.diff-box,
.row-needs-update {
    background: var(--color-amber-soft);
}

.progress-bar,
.progress-native,
.progress-native::-webkit-progress-bar,
.approval-empty-bar {
    background-color: var(--color-surface-soft);
}

.workspace-shell {
    grid-template-columns: minmax(250px, 310px) minmax(460px, 1fr) minmax(300px, 350px);
}

.workspace-main-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.workspace-title-block {
    min-width: 0;
}

.workspace-title-block h1 {
    margin: 0 0 5px;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.15;
}

.workspace-line-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.line-key {
    color: var(--color-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.workspace-nav-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

.workspace-nav-actions .button {
    min-width: 86px;
    white-space: nowrap;
}

.workspace-nav-actions .button.is-loading {
    opacity: .68;
    pointer-events: none;
}

.workspace-left,
.workspace-right {
    scrollbar-color: var(--color-border-strong) var(--color-surface-soft);
}

.workspace-row {
    background: var(--color-surface);
}

.workspace-row strong {
    overflow-wrap: anywhere;
}

.workspace-helper-list {
    display: grid;
    gap: 10px;
}

.workspace-helper {
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
    overflow: hidden;
}

.workspace-helper summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    font-weight: 900;
}

.workspace-helper summary::-webkit-details-marker {
    display: none;
}

.workspace-helper summary::after {
    content: "+";
    color: var(--color-muted);
    font-weight: 900;
}

.workspace-helper[open] summary::after {
    content: "−";
}

.workspace-helper-body {
    border-top: 1px solid var(--color-border);
    padding: 12px;
}

.context-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.context-gallery img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--color-border);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.context-image-panel {
    display: grid;
    gap: 16px;
}

.context-image-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.context-image-header h2,
.context-upload-head h3 {
    margin: 0;
}

.context-image-header p,
.context-upload-head p {
    margin: 6px 0 0;
}

.context-upload-open {
    flex-shrink: 0;
    background: linear-gradient(135deg, #167a55, #229b68);
    border-color: #167a55;
}

.context-image-gallery-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.context-image-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    background: var(--color-surface);
    padding: 10px;
    box-shadow: var(--shadow-tiny);
}

.context-image-thumb {
    display: block;
    overflow: hidden;
    border-radius: 11px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-soft);
}

.context-image-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.context-image-info {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.context-image-info strong,
.context-image-info span {
    overflow-wrap: anywhere;
}

.context-image-info span {
    color: var(--color-muted);
    font-size: 13px;
}

.context-image-delete {
    justify-self: start;
}

.context-empty-drop {
    width: 100%;
    min-height: 116px;
    display: grid;
    gap: 7px;
    place-items: center;
    padding: 22px;
    border: 1px dashed #43b178;
    border-radius: 14px;
    background: color-mix(in srgb, #eaf8f1 82%, var(--color-surface-strong));
    color: var(--color-text);
    text-align: center;
    box-shadow: none;
}

.context-empty-drop span {
    color: var(--color-muted);
    font-weight: 700;
}

.context-empty-drop.is-readonly {
    cursor: default;
}

.context-upload-dialog {
    width: min(620px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 18px;
    background: var(--color-surface-strong);
    color: var(--color-text);
    box-shadow: 0 26px 70px rgba(15, 23, 42, .32);
}

.context-upload-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}

.context-upload-dialog form {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.context-upload-head {
    margin: -22px -22px 2px;
    padding: 22px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: #fff;
    background: linear-gradient(135deg, #17764f, #279d68);
}

.context-upload-head p {
    color: rgba(255, 255, 255, .82);
}

.context-upload-close {
    width: 38px;
    min-height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 24px;
    box-shadow: none;
}

.context-dropzone {
    display: grid;
    gap: 7px;
    place-items: center;
    min-height: 190px;
    padding: 28px;
    border: 2px dashed #43b178;
    border-radius: 16px;
    background: color-mix(in srgb, #ecf9f2 78%, var(--color-surface-strong));
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.context-dropzone:hover,
.context-dropzone.is-dragover {
    border-color: #18885b;
    background: color-mix(in srgb, #dff5ea 84%, var(--color-surface-strong));
    transform: translateY(-1px);
}

.context-drop-title {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 900;
}

.context-drop-help,
.context-drop-allowed,
.context-file-name {
    color: var(--color-muted);
    font-weight: 800;
}

.context-file-name {
    margin-top: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.context-upload-progress {
    display: grid;
    gap: 8px;
}

.context-upload-progress[hidden] {
    display: none;
}

.context-upload-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--color-muted);
    font-weight: 900;
}

.context-upload-progress-track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
}

.context-upload-progress-track span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width .12s ease;
}

[data-theme="dark"] .context-upload-open {
    color: #ecfdf5;
}

[data-theme="dark"] .context-empty-drop,
[data-theme="dark"] .context-dropzone {
    background: color-mix(in srgb, #052e24 58%, var(--color-surface-strong));
}

[data-theme="dark"] .context-upload-dialog::backdrop {
    background: rgba(2, 6, 23, .75);
}

.line-filter-panel {
    display: grid;
    gap: 14px;
}

.line-filter-grid {
    align-items: end;
}

.lines-table {
    border-spacing: 0;
}

.lines-table tr:not(:first-child):hover {
    background: color-mix(in srgb, var(--color-blue-soft) 55%, transparent);
}

.lines-table .truncate {
    max-width: none;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.small-text {
    font-size: 13px;
}

.error-actions {
    margin-top: 14px;
}

/* Visual refresh: calmer live colors and denser product surfaces. */
body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-blue-soft) 72%, var(--color-bg)) 0, var(--color-bg) 360px),
        var(--color-bg);
}

.shell {
    padding-top: 18px;
}

.topbar {
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--color-surface-strong) 88%, transparent);
    box-shadow: var(--shadow-tiny);
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1100;
    overflow: visible;
}

.brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(22px, 2vw, 29px);
}

.brand::before {
    content: "";
    width: 12px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 10px 20px color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.nav {
    gap: 6px;
    padding: 7px;
    margin-bottom: 18px;
    border-radius: 18px;
}

.nav a {
    min-height: 38px;
    padding: 9px 12px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--color-muted);
}

.nav a.active {
    background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface-strong));
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    color: var(--color-primary);
    box-shadow: var(--shadow-tiny);
}

.nav a:hover {
    background: color-mix(in srgb, var(--color-blue-soft) 68%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    color: var(--color-primary);
    box-shadow: none;
}

.theme-picker,
.user-badge {
    min-height: 38px;
}

.button,
button {
    gap: 7px;
    border-radius: 10px;
}

.button.primary,
button.primary {
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, var(--color-accent)));
    border-color: transparent;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.button.primary:hover,
button.primary:hover {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary));
    transform: translateY(-1px);
}

.button.success,
button.success {
    background: color-mix(in srgb, var(--color-success) 90%, #052e16);
    border-color: transparent;
}

.button.danger,
button.danger {
    background: color-mix(in srgb, var(--color-danger) 88%, #7f1d1d);
    border-color: transparent;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    padding: 24px;
    border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-success));
}

.hero-panel h1 {
    font-size: clamp(25px, 2.5vw, 38px);
    line-height: 1.08;
    letter-spacing: 0;
}

.panel {
    border-radius: 16px;
}

.panel h2 {
    margin-top: 0;
    letter-spacing: 0;
}

.metric-grid {
    gap: 14px;
}

.metric-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    padding: 16px 16px 15px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 88%, var(--color-blue-soft)), var(--color-surface-strong));
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.maintenance-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.maintenance-action {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-soft);
}

.maintenance-action h3 {
    margin: 0;
}

.maintenance-action.danger-zone {
    border-color: color-mix(in srgb, var(--color-danger) 32%, var(--color-border));
    background: color-mix(in srgb, var(--metric-danger-bg) 58%, var(--color-surface));
}

.maintenance-inline-action {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

@media (max-width: 760px) {
    .maintenance-inline-action {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color-primary);
}

.metric-card.success::before {
    background: var(--color-success);
}

.metric-card.warning::before {
    background: var(--color-warning);
}

.metric-card.danger::before {
    background: var(--color-danger);
}

.metric-card.neutral::before {
    background: var(--color-border-strong);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.metric-card span {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
}

.metric-card strong {
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.05;
}

.metric-card.success,
.metric-card.warning,
.metric-card.danger {
    color: var(--color-text);
}

.metric-card.success {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 72%, var(--metric-success-bg)), var(--color-surface-strong));
}

.metric-card.warning {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 72%, var(--metric-warning-bg)), var(--color-surface-strong));
}

.metric-card.danger {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 72%, var(--metric-danger-bg)), var(--color-surface-strong));
}

.metric-card.success {
    border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border));
}

.metric-card.warning {
    border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
}

.metric-card.danger {
    border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}

.metric-card.success span,
.metric-card.warning span,
.metric-card.danger span {
    color: var(--color-muted);
}

.metric-card.success strong,
.metric-card.warning strong,
.metric-card.danger strong {
    color: var(--color-text);
}

.project-list {
    gap: 14px;
}

.project-row {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    border-radius: 16px;
    padding: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 92%, var(--color-blue-soft)), var(--color-surface-strong));
}

.project-row:hover {
    border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border));
    box-shadow: var(--shadow-lift);
}

.project-row h3 {
    color: var(--color-text);
}

.project-side {
    align-items: stretch;
}

.project-side .button,
.project-side .badge {
    justify-content: center;
}

.progress-block,
.approval-state {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--color-surface) 74%, var(--color-surface-strong));
}

.progress-native {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
}

.progress-native::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--color-surface-soft);
}

.progress-native::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.progress-success::-webkit-progress-value {
    background: linear-gradient(90deg, var(--color-success), #22c55e);
}

.progress-warning::-webkit-progress-value {
    background: linear-gradient(90deg, var(--color-warning), #f59e0b);
}

.badge {
    min-height: 25px;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.line-filter-panel {
    border-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
}

.line-filter-grid {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.line-filter-grid .search-field {
    grid-column: span 2;
}

.filter-pills {
    padding-top: 2px;
}

.pill {
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface-strong) 78%, var(--color-surface-soft));
    transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}

.pill:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
}

.pill.active {
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-accent)));
    border-color: transparent;
}

.line-list-panel {
    padding: 0;
    overflow: hidden;
}

.bulk-actions-panel,
.table-summary {
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}

.table-wrap.no-scroll {
    padding: 0;
}

.lines-table {
    background: var(--color-surface-strong);
}

.lines-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface-soft);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .035em;
    font-size: 11px;
}

.lines-table td {
    padding-block: 12px;
}

.lines-table tr:not(:first-child) {
    transition: background-color .12s ease;
}

.lines-table tr:not(:first-child):hover {
    background: color-mix(in srgb, var(--color-blue-soft) 72%, transparent);
}

.lines-table .mono {
    font-size: 13px;
}

.context-main {
    color: var(--color-text);
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.workspace-shell {
    gap: 14px;
}

.workspace-left,
.workspace-center,
.workspace-right {
    border-radius: 18px;
}

.workspace-left,
.workspace-right {
    background: color-mix(in srgb, var(--color-surface-strong) 88%, var(--color-surface));
}

.workspace-search {
    display: grid;
    gap: 8px;
}

.workspace-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.workspace-row {
    display: grid;
    gap: 6px;
    padding: 11px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    color: var(--color-text);
    transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}

.workspace-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
}

.workspace-row.active {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
    box-shadow: inset 4px 0 0 var(--color-primary), var(--shadow-tiny);
}

.workspace-row span:not(.badge) {
    color: var(--color-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workspace-center textarea[readonly] {
    min-height: 150px;
    background: color-mix(in srgb, var(--color-blue-soft) 42%, var(--color-surface-strong));
    font-size: 17px;
}

.workspace-form textarea[name="text"] {
    min-height: 210px;
    font-size: 17px;
}

.workspace-main-header {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-surface) 68%, var(--color-surface-strong));
}

.workspace-title-block h1 {
    color: var(--color-text);
}

.workspace-nav-actions .button {
    border-radius: 11px;
}

.workspace-helper {
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-surface) 82%, var(--color-surface-strong));
}

.workspace-helper summary {
    padding: 12px 14px;
}

.workspace-helper[open] summary {
    color: var(--color-primary);
}

.workspace-helper-body {
    background: color-mix(in srgb, var(--color-surface-strong) 72%, transparent);
}

.quick-edit-dialog,
.context-upload-dialog {
    border-radius: 20px;
}

[data-theme="dark"] body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-blue-soft) 70%, var(--color-bg)) 0, var(--color-bg) 360px),
        var(--color-bg);
}

[data-theme="dark"] .nav a.active {
    color: #dbeafe;
}

[data-theme="dark"] .metric-card,
[data-theme="dark"] .project-row {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 86%, var(--color-blue-soft)), var(--color-surface-strong));
}

[data-theme="dark"] .workspace-center textarea[readonly] {
    background: color-mix(in srgb, var(--color-blue-soft) 45%, var(--color-surface-strong));
}

[data-theme="dark"] .button.danger,
[data-theme="dark"] button.danger {
    color: #fee2e2;
}

[data-theme="dark"] .button.success,
[data-theme="dark"] button.success {
    color: #052e16;
}

[data-theme="dark"] .quick-edit-dialog::backdrop {
    background: rgba(2, 6, 23, .72);
}

/* Final UI polish: compact settings, public dashboard and report surfaces */
.hero-panel--compact {
    padding-block: 24px;
}

.settings-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.settings-card {
    display: grid;
    gap: 16px;
    min-width: 0;
    grid-column: span 6;
}

.settings-card--wide {
    grid-column: 1 / -1;
}

.settings-card[id="settings-context"],
.settings-card[id="settings-workflow"],
.settings-card[id="settings-export"],
.settings-card[id="settings-mt"],
.settings-card[id="settings-ai"],
.settings-card[id="settings-tm"] {
    grid-column: span 4;
}

.settings-card[id="settings-system"],
.settings-card[id="settings-audit"] {
    grid-column: 1 / -1;
}

.settings-compact-grid {
    grid-column: 1 / -1;
    columns: 3 320px;
    column-gap: 12px;
}

.settings-compact-grid .settings-card {
    width: 100%;
    display: inline-grid;
    grid-column: auto;
    break-inside: avoid;
    margin: 0 0 12px;
}

.settings-card--compact {
    padding: 12px;
    gap: 10px;
}

.settings-card--compact .settings-card__head {
    align-items: center;
    gap: 8px;
}

.settings-card--compact .settings-card__head h2 {
    font-size: 18px;
    margin: 0;
}

.settings-card--compact .settings-card__head p,
.settings-card--compact .field-hint,
.settings-card--compact .help-box {
    display: none;
}

.settings-card--compact .settings-form {
    gap: 9px;
}

.settings-card--compact .form-grid,
.settings-card--compact .toggle-grid,
.settings-card--compact .settings-subgrid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.settings-card--compact .settings-fieldset {
    padding: 0;
    border: 0;
    border-radius: 10px;
}

.settings-card--compact .switch-line {
    min-height: 36px;
    padding: 8px 10px;
}

.settings-card--compact .switch-line small {
    display: none;
}

.settings-card--compact .mode-explain {
    display: none;
}

.settings-card--compact button,
.settings-card--compact .button {
    min-height: 38px;
    padding: 9px 12px;
}

.settings-card__head,
.project-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.settings-card__head h2,
.project-card-head h3 {
    margin-bottom: 4px;
}

.settings-form {
    display: grid;
    gap: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-grid--drive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field--secret {
    min-width: 0;
}

.secret-state {
    display: grid;
    gap: 4px;
    color: var(--color-muted);
    font-size: 14px;
    margin-bottom: 8px;
}

.toggle-grid,
.settings-subgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.switch-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface-soft) 72%, transparent);
    font-weight: 700;
}

.switch-line input {
    width: 17px;
    height: 17px;
    accent-color: var(--color-primary);
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-actions--wrap {
    flex-wrap: wrap;
}

.settings-actions form {
    margin: 0;
}

.notice {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-blue-soft) 55%, var(--color-surface));
}

.notice-warning {
    border-color: color-mix(in srgb, var(--color-warning) 34%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning-soft) 55%, var(--color-surface));
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    background: var(--color-surface-soft);
    font-weight: 800;
    white-space: nowrap;
}

.status-pill.is-good {
    color: color-mix(in srgb, var(--color-success) 70%, var(--color-text));
    border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-success-soft) 70%, var(--color-surface));
}

.status-pill.is-muted {
    color: var(--color-muted);
}

.status-stack {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.forum-preview-box {
    margin-top: 12px;
}

.forum-preview-box textarea {
    width: 100%;
    min-height: 320px;
    margin-top: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: pre;
}

.system-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.system-grid > div {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface-soft) 72%, transparent);
}

.system-grid span {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.system-grid strong {
    display: block;
    margin-top: 4px;
    word-break: break-word;
}

.responsive-table {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

.responsive-table table,
.table-wrap table {
    min-width: 760px;
}

.public-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 14px;
}

.public-project-card,
.join-admin-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 90%, var(--color-blue-soft)), var(--color-surface-strong));
    box-shadow: var(--shadow-tiny);
}

.project-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.join-request-box {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 10px 12px;
    background: var(--color-surface);
}

.join-request-box summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--color-primary);
}

.join-admin-list {
    display: grid;
    gap: 14px;
}

.join-admin-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.join-admin-body > div {
    padding: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface-soft) 70%, transparent);
}

.identity-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.inline-form input,
.inline-form select {
    width: auto;
    min-width: 180px;
}

.auth-shell {
    min-height: min(620px, calc(100vh - 220px));
    display: grid;
    place-items: center;
}

.auth-oauth {
    width: 100%;
    justify-content: center;
}

[data-theme="dark"] .notice,
[data-theme="dark"] .public-project-card,
[data-theme="dark"] .join-admin-card {
    background: color-mix(in srgb, var(--color-surface-strong) 82%, var(--color-blue-soft));
}

/* Manual light choice must win over system dark-mode component rules. */
[data-theme="light"] body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-blue-soft) 72%, var(--color-bg)) 0, var(--color-bg) 360px),
        var(--color-bg);
    color: var(--color-text);
}

[data-theme="light"] table,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .panel,
[data-theme="light"] .settings-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .project-row,
[data-theme="light"] .notification-item,
[data-theme="light"] .qa-item,
[data-theme="light"] .glossary-card,
[data-theme="light"] .comment-item,
[data-theme="light"] .workspace-row,
[data-theme="light"] .pill,
[data-theme="light"] .nav,
[data-theme="light"] .user-badge,
[data-theme="light"] .empty-state,
[data-theme="light"] .pre-wrap,
[data-theme="light"] .notice,
[data-theme="light"] .public-project-card,
[data-theme="light"] .join-admin-card {
    background-color: var(--color-surface-strong);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="light"] .metric-card.success {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 72%, var(--metric-success-bg)), var(--color-surface-strong));
}

[data-theme="light"] .metric-card.warning {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 72%, var(--metric-warning-bg)), var(--color-surface-strong));
}

[data-theme="light"] .metric-card.danger {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-strong) 72%, var(--metric-danger-bg)), var(--color-surface-strong));
}

[data-theme="light"] .toast {
    background: var(--color-surface-strong);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: 0 18px 36px rgba(32, 68, 108, .16);
}

[data-theme="light"] .toast-error {
    background: #fff0f3;
    color: #7f1d2d;
    border-color: #fecdd8;
}

.project-list--dense {
    gap: 10px;
}

.project-row--compact {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    gap: 14px;
    padding: 12px 14px;
}

.project-row--compact h3 {
    margin-bottom: 4px;
    font-size: 18px;
}

.project-row--compact .progress-card,
.project-row--compact .approval-progress {
    padding: 10px 12px;
}

.project-row--compact .progress-note {
    margin-block: 6px;
    font-size: 13px;
}

.project-row--compact .project-side {
    gap: 6px;
}

.dense-table th,
.dense-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

.truncate-cell {
    display: block;
    max-width: min(420px, 36vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-risk {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 2px 4px 2px 0;
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    background: var(--color-surface-soft);
    font-size: 12px;
    font-weight: 700;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.button-compact {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
}

.nav--grouped {
    align-items: center;
}

.nav-group-label {
    align-self: center;
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0 6px;
}

.nav-more {
    position: relative;
}

.nav-more summary {
    list-style: none;
    min-height: 38px;
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--color-muted);
    font-weight: 800;
    cursor: pointer;
}

.nav-more summary::-webkit-details-marker {
    display: none;
}

.nav-more summary:hover {
    background: color-mix(in srgb, var(--color-blue-soft) 68%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    color: var(--color-primary);
}

.nav-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 900;
    width: min(360px, calc(100vw - 32px));
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.nav-more-menu a {
    justify-content: flex-start;
    width: 100%;
}

.mini-button {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 7px;
}

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

.button-row--compact {
    gap: 6px;
}

.action-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: end;
}

.workspace-helper-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workspace-helper--qa { order: 1; }
.workspace-helper--glossary { order: 2; }
.workspace-helper--memory { order: 3; }
.workspace-helper--context { order: 4; }
.workspace-helper--hotspot { order: 5; }
.workspace-helper--discussion { order: 6; }
.workspace-helper--machine { order: 7; }
.workspace-helper--comments { order: 8; }
.workspace-helper--length { order: 9; }

.dashboard-hero {
    border-top: 4px solid color-mix(in srgb, var(--color-primary, var(--blue)) 80%, var(--color-success, var(--green)));
}

.dashboard-admin-overview {
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.15fr);
    gap: 14px;
    align-items: stretch;
}

.dashboard-summary-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 14px;
}

.dashboard-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-section-head h2 {
    margin: 0 0 4px;
}

.dashboard-section-head p {
    margin: 0;
}

.dashboard-metrics {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.dashboard-metrics--calm {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-metrics--risk {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-summary-panel .metric-card {
    min-height: 96px;
    padding: 14px;
    text-decoration: none;
}

.dashboard-summary-panel .metric-card span {
    font-size: 12px;
}

.dashboard-summary-panel .metric-card strong {
    font-size: clamp(25px, 2.4vw, 36px);
}

.metric-link {
    color: inherit;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.metric-link:hover,
.metric-link:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
    box-shadow: var(--shadow-lift);
}

.dashboard-risk-panel {
    border-color: color-mix(in srgb, var(--color-warning) 22%, var(--color-border));
}

.project-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
}

.dashboard-project-panel {
    padding: 14px;
    border-radius: 14px;
}

.dashboard-project-list {
    grid-template-columns: 1fr;
    gap: 10px;
}

.project-grid-compact--three {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.project-card-compact {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 14px;
    background: var(--color-surface-strong, var(--panel));
    box-shadow: var(--shadow-tiny, 0 8px 20px rgba(24, 50, 85, .04));
}

.project-card-compact h3 {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.25;
}

.dashboard-project-card {
    grid-template-columns: minmax(230px, .85fr) minmax(340px, 1.25fr) minmax(210px, .65fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.dashboard-project-card .project-card-head {
    min-width: 0;
}

.dashboard-project-card .project-card-head > div {
    min-width: 0;
}

.dashboard-project-card .project-card-head h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-project-card .progress-block,
.dashboard-project-card .approval-progress,
.dashboard-project-card .progress-card {
    padding: 8px 10px;
}

.dashboard-project-card .progress-note {
    display: none;
}

.dashboard-project-card .compact-project-meta {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-content: center;
}

.dashboard-project-card .team-strip {
    grid-column: 1;
    grid-row: 2;
}

.dashboard-project-card .project-card-actions {
    grid-column: 3;
    grid-row: 3;
    justify-content: stretch;
}

.dashboard-project-card .project-card-actions .button {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
}

.project-card-compact--list {
    min-height: 100%;
}

.project-card-compact--list .project-card-actions {
    margin-top: auto;
}

.project-card-compact .progress-block,
.project-card-compact .approval-progress,
.project-card-compact .progress-card {
    padding: 10px 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface-soft, #f7f9fd) 70%, transparent);
}

.compact-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.compact-project-meta span,
.role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 999px;
    background: var(--color-surface-soft, #f7f9fd);
    color: var(--color-muted, var(--muted));
    font-size: 12px;
    font-weight: 800;
}

.dashboard-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 14px;
}

.dashboard-system-panel,
.dashboard-diff-panel {
    padding: 14px;
    border-radius: 14px;
}

.dashboard-system-list {
    gap: 7px;
}

.dashboard-system-list .system-event-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 9px 10px;
    border-radius: 10px;
}

.dashboard-system-list .system-event-item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-diff-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-diff-metrics .metric-card {
    min-height: 86px;
    padding: 12px;
}

.version-maintenance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.version-maintenance-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 14px;
    background: var(--color-surface-strong, var(--panel));
    box-shadow: var(--shadow-tiny, 0 8px 20px rgba(24, 50, 85, .04));
}

.version-maintenance-card h4 {
    margin: 0 0 6px;
    font-size: 18px;
}

.version-maintenance-action {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 12px;
    background: var(--color-surface-soft, #f7f9fd);
}

.version-maintenance-action.danger-zone {
    border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
    background: color-mix(in srgb, var(--metric-danger-bg) 55%, var(--color-surface));
}

.join-requests-table {
    min-width: 1120px;
}

.join-requests-table th,
.join-requests-table td {
    padding: 8px 10px;
}

.identity-row--compact {
    gap: 8px;
}

.identity-row--compact .avatar {
    width: 30px;
    height: 30px;
}

.join-request-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 520px;
}

.join-request-actions .inline-form {
    display: grid;
    grid-template-columns: minmax(115px, .8fr) minmax(130px, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.join-admin-panel {
    padding: 16px;
}

.join-admin-list {
    display: grid;
    gap: 10px;
}

.join-admin-row {
    display: grid;
    grid-template-columns: minmax(190px, .7fr) minmax(280px, 1.35fr) minmax(430px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 14px;
    background: var(--color-surface-strong, #fff);
}

.join-admin-user,
.join-admin-summary,
.join-admin-actions {
    min-width: 0;
}

.join-admin-user .small-text {
    display: block;
    margin-top: 2px;
}

.join-admin-summary {
    display: grid;
    gap: 6px;
}

.join-admin-note {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.join-admin-note span,
.join-admin-meta {
    color: var(--color-muted, var(--muted));
    font-size: 12px;
    font-weight: 800;
}

.join-admin-note strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.join-admin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.join-admin-actions {
    display: grid;
    gap: 8px;
}

.join-admin-action-form {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) minmax(130px, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.join-admin-action-form--reject {
    grid-template-columns: minmax(0, 1fr) auto;
}

.join-admin-action-form input,
.join-admin-action-form select {
    min-width: 0;
    width: 100%;
}

.team-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
}

.avatar-stack {
    display: flex;
    align-items: center;
    min-width: 0;
}

.avatar-chip {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    border: 2px solid var(--color-surface-strong, #fff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary, var(--blue)) 16%, var(--color-surface-soft, #eef2f7));
    color: var(--color-primary, var(--blue));
    font-size: 11px;
    font-weight: 900;
    overflow: hidden;
}

.avatar-chip:first-child {
    margin-left: 0;
}

.avatar-chip img,
.avatar--initials img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-chip.more {
    background: var(--color-surface-soft, #eef2f7);
    color: var(--color-muted, var(--muted));
}

.avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 900;
    color: var(--color-primary, var(--blue));
    background: color-mix(in srgb, var(--color-primary, var(--blue)) 14%, var(--color-surface-soft, #eef2f7));
}

.system-event-list,
.suggestion-group-list {
    display: grid;
    gap: 10px;
}

.system-event-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 12px;
    color: var(--color-text, var(--ink));
    background: var(--color-surface-soft, #f7f9fd);
}

.system-event-item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-level--error,
.event-level--security {
    background: color-mix(in srgb, var(--color-danger, var(--red)) 14%, var(--color-surface, #fff));
    color: var(--color-danger, var(--red));
}

.event-level--warning {
    background: color-mix(in srgb, var(--color-warning, var(--amber)) 16%, var(--color-surface, #fff));
    color: var(--color-warning, var(--amber));
}

.event-level--info {
    background: color-mix(in srgb, var(--color-primary, var(--blue)) 12%, var(--color-surface, #fff));
    color: var(--color-primary, var(--blue));
}

.line-actor-strip,
.presence-warning {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 12px;
    background: var(--color-surface-soft, #f7f9fd);
    color: var(--color-muted, var(--muted));
}

.presence-warning {
    border-color: color-mix(in srgb, var(--color-warning, var(--amber)) 42%, var(--color-border, var(--line)));
    background: color-mix(in srgb, var(--color-warning-soft, #fff7e8) 72%, var(--color-surface, #fff));
}

.suggestion-line-group {
    display: grid;
    gap: 14px;
}

.suggestion-line-head,
.suggestion-card-head,
.suggestion-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.suggestion-line-head h2 {
    margin-bottom: 2px;
}

.suggestion-line-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.suggestion-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.compare-text,
.suggestion-text {
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 12px;
    background: var(--color-surface-soft, #f7f9fd);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.suggestion-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.suggestion-review-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 14px;
    background: var(--color-surface-strong, #fff);
}

.suggestion-review-card.is-pending {
    border-color: color-mix(in srgb, var(--color-warning, var(--amber)) 34%, var(--color-border, var(--line)));
}

.suggestion-meta-row {
    justify-content: flex-start;
    color: var(--color-muted, var(--muted));
    font-size: 12px;
    font-weight: 700;
}

.badge-stack-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.suggestion-review-actions {
    display: grid;
    gap: 8px;
}

.event-context {
    max-width: 520px;
    max-height: 180px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .workspace-shell {
        grid-template-columns: minmax(240px, .8fr) minmax(420px, 1.2fr);
    }

    .workspace-right {
        grid-column: 1 / -1;
    }

    .line-filter-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .line-filter-grid .search-field {
        grid-column: span 2;
    }

    .join-admin-row {
        grid-template-columns: minmax(180px, .7fr) minmax(260px, 1fr);
    }

    .join-admin-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-card,
    .settings-compact-grid,
    .settings-card[id="settings-context"],
    .settings-card[id="settings-workflow"],
    .settings-card[id="settings-export"],
    .settings-card[id="settings-mt"],
    .settings-card[id="settings-ai"],
    .settings-card[id="settings-tm"],
    .settings-card[id="settings-system"],
    .settings-card[id="settings-audit"] {
        grid-column: 1 / -1;
    }

    .settings-compact-grid {
        columns: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .settings-compact-grid .settings-card {
        display: grid;
        margin: 0;
    }

    .form-grid,
    .form-grid--drive,
    .toggle-grid,
    .settings-subgrid,
    .system-grid,
    .join-admin-body {
        grid-template-columns: 1fr;
    }

    .workspace-shell {
        grid-template-columns: 1fr;
    }

    .workspace-left,
    .workspace-right {
        position: static;
        max-height: none;
    }

    .project-row {
        grid-template-columns: 1fr;
    }

    .join-admin-row {
        grid-template-columns: 1fr;
    }

    .project-side {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .line-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .line-filter-grid .search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .settings-card__head,
    .project-card-head,
    .settings-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .inline-form input,
    .inline-form select,
    .inline-form button {
        width: 100%;
    }

    .topbar-controls,
    .context-image-header,
    .workspace-main-header,
    .workspace-nav-actions {
        width: 100%;
    }

    .context-image-header {
        flex-direction: column;
    }

    .topbar,
    .hero-panel {
        flex-direction: column;
    }

    .topbar-controls,
    .project-side,
    .hero-panel .actions {
        justify-content: stretch;
    }

    .nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 9px;
    }

    .nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .line-filter-grid {
        grid-template-columns: 1fr;
    }

    .line-filter-grid .search-field {
        grid-column: auto;
    }

    .table-wrap.no-scroll {
        overflow-x: auto;
    }

    .context-upload-open {
        width: 100%;
    }

    .join-admin-action-form,
    .join-admin-action-form--reject,
    .join-admin-note {
        grid-template-columns: 1fr;
    }

    .context-dropzone {
        min-height: 160px;
        padding: 22px 14px;
    }

    .context-drop-title {
        font-size: 24px;
    }

    .workspace-main-header {
        flex-direction: column;
    }

    .workspace-nav-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .workspace-nav-actions .button {
        min-width: 0;
        padding-inline: 8px;
    }

    .project-grid-compact,
    .suggestion-card-grid,
    .suggestion-compare-grid {
        grid-template-columns: 1fr;
    }

    .system-event-item {
        grid-template-columns: 1fr;
    }

    .team-strip {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Product UX pass: clearer settings, help text, cards and responsive tables. */
.eyebrow {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.settings-hero .actions {
    flex: 0 0 auto;
}

.settings-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-surface-strong) 82%, transparent);
    box-shadow: var(--shadow-tiny);
}

.settings-anchor-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--color-muted);
    font-weight: 800;
}

.settings-anchor-nav a:hover,
.settings-anchor-nav a:focus-visible {
    background: color-mix(in srgb, var(--color-blue-soft) 76%, transparent);
    color: var(--color-primary);
}

a:focus-visible,
button:focus-visible,
.button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    outline-offset: 2px;
}

.field-hint {
    margin: -2px 0 2px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
}

.settings-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-fieldset legend {
    margin: 0 0 9px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 900;
}

.switch-line {
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
}

.switch-line span {
    color: var(--color-text);
}

.switch-line small {
    flex-basis: 100%;
    margin-left: 27px;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.4;
}

.settings-card {
    scroll-margin-top: 18px;
}

.settings-card > h2:first-child {
    margin-bottom: 0;
}

.settings-card__head h2 {
    margin-top: 0;
}

.settings-actions--between {
    justify-content: space-between;
}

.settings-actions .primary,
.settings-form > .primary {
    min-width: 220px;
}

.help-box {
    padding: 13px 15px;
    border: 1px solid var(--color-border);
    border-left-width: 5px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-surface-soft) 58%, var(--color-surface-strong));
    color: var(--color-muted);
    line-height: 1.55;
}

.help-box strong {
    color: var(--color-text);
}

.help-box--warning {
    border-left-color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning-soft) 70%, var(--color-surface-strong));
}

.help-box--info {
    border-left-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-blue-soft) 68%, var(--color-surface-strong));
}

.help-box--success {
    border-left-color: var(--color-success);
    background: color-mix(in srgb, var(--color-success-soft) 72%, var(--color-surface-strong));
}

.status-pill.is-warning {
    color: color-mix(in srgb, var(--color-warning) 72%, var(--color-text));
    border-color: color-mix(in srgb, var(--color-warning) 36%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning-soft) 72%, var(--color-surface));
}

.status-pill.is-danger {
    color: color-mix(in srgb, var(--color-danger) 74%, var(--color-text));
    border-color: color-mix(in srgb, var(--color-danger) 36%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
}

.status-pill.is-info {
    color: color-mix(in srgb, var(--color-primary) 74%, var(--color-text));
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    background: color-mix(in srgb, var(--color-blue-soft) 72%, var(--color-surface));
}

.settings-details {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-surface-soft) 64%, transparent);
    overflow: hidden;
}

.settings-details summary {
    cursor: pointer;
    padding: 13px 15px;
    color: var(--color-text);
    font-weight: 900;
}

.settings-details > :not(summary) {
    margin-left: 15px;
    margin-right: 15px;
}

.settings-details .form-grid {
    margin-bottom: 15px;
}

.mode-explain {
    display: grid;
    gap: 8px;
}

.mode-explain > div {
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-surface-soft) 58%, transparent);
}

.mode-explain > div.active {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-blue-soft) 72%, var(--color-surface-strong));
}

.system-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.system-status-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-surface-soft) 68%, transparent);
}

.system-status-card span:first-child {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.system-status-card strong {
    display: block;
    margin: 4px 0 3px;
    word-break: break-word;
}

.system-status-card small {
    color: var(--color-muted);
    line-height: 1.4;
}

.audit-key-label,
.audit-key-raw {
    display: block;
}

.audit-key-label {
    color: var(--color-text);
    font-weight: 900;
}

.audit-key-raw {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 12px;
}

.empty-state--rich {
    display: grid;
    gap: 5px;
    text-align: center;
}

.empty-state--rich strong {
    color: var(--color-text);
}

.empty-state--rich span {
    color: var(--color-muted);
}

.responsive-table--cards td {
    max-width: 360px;
    overflow-wrap: anywhere;
}

.panel .empty-state {
    line-height: 1.5;
}

.context-image-panel .context-empty-drop,
.context-upload-open {
    box-shadow: var(--shadow-tiny);
}

.workspace-helper summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.workspace-helper summary::after {
    content: "Aç/Kapat";
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
}

.summary-hint {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.hotspot-image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.hotspot-image-wrap img {
    display: block;
}

.hotspot-box {
    position: absolute;
    border: 2px solid var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 22%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 18%, transparent);
    pointer-events: none;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.badge-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-soft);
}

.badge-card small,
.badge-card span {
    color: var(--color-muted);
}

@media (max-width: 760px) {
    .settings-anchor-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .settings-anchor-nav a {
        flex: 0 0 auto;
    }

    .settings-actions--between {
        align-items: stretch;
    }

    .settings-actions .primary,
    .settings-form > .primary {
        width: 100%;
        min-width: 0;
    }

    .system-status-card {
        flex-direction: column;
    }

    .responsive-table--cards {
        border: 0;
        overflow: visible;
    }

    .responsive-table--cards table,
    .responsive-table--cards thead,
    .responsive-table--cards tbody,
    .responsive-table--cards tr,
    .responsive-table--cards th,
    .responsive-table--cards td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .responsive-table--cards thead {
        display: none;
    }

    .responsive-table--cards tr {
        margin-bottom: 10px;
        border: 1px solid var(--color-border);
        border-radius: 14px;
        background: var(--color-surface-strong);
        overflow: hidden;
    }

    .responsive-table--cards td {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
        border-bottom: 1px solid var(--color-border);
    }

    .responsive-table--cards td::before {
        content: attr(data-label);
        color: var(--color-muted);
        font-weight: 900;
    }
}

/* Translator workspace refinement: denser reading, faster save flow and prioritized helpers. */
.soft-primary {
    background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface-strong)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)) !important;
    color: var(--color-primary) !important;
}

.field-title-row,
.workspace-helper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.workspace-shell {
    grid-template-columns: minmax(230px, 285px) minmax(540px, 1fr) minmax(285px, 335px);
    gap: 12px;
}

.workspace-left,
.workspace-center,
.workspace-right {
    border-radius: 14px;
}

.workspace-left,
.workspace-right {
    padding: 14px;
}

.workspace-center {
    padding: 16px 18px;
}

.workspace-left .split-head {
    gap: 10px;
    margin-bottom: 10px;
}

.workspace-left h2,
.workspace-right h2 {
    margin-bottom: 2px;
    font-size: 20px;
}

.workspace-search {
    gap: 6px;
    margin-bottom: 10px;
}

.workspace-search input,
.workspace-search select,
.workspace-search button {
    min-height: 38px;
    padding-block: 8px;
}

.workspace-list {
    gap: 6px;
    margin-top: 8px;
}

.workspace-row {
    gap: 4px;
    padding: 8px 10px;
    border-radius: 10px;
}

.workspace-row .badge {
    min-height: 20px;
    width: fit-content;
    padding: 2px 8px;
    font-size: 11px;
}

.workspace-row strong {
    font-size: 13px;
    line-height: 1.25;
}

.workspace-row span:not(.badge) {
    -webkit-line-clamp: 1;
    font-size: 13px;
}

.workspace-main-header {
    align-items: center;
    margin-bottom: 10px;
    padding: 11px 12px;
    border-radius: 12px;
}

.workspace-title-block h1 {
    max-width: 520px;
    margin-bottom: 4px;
    font-size: clamp(20px, 1.7vw, 26px);
}

.workspace-line-meta {
    gap: 6px;
}

.line-key {
    margin: 6px 0 0;
    font-size: 13px;
}

.workspace-nav-actions {
    gap: 6px;
}

.workspace-nav-actions .button,
.workspace-save-actions .button,
.workspace-save-actions button {
    min-height: 38px;
    min-width: 0;
    padding: 8px 12px;
}

.line-actor-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-surface-soft) 68%, transparent);
    color: var(--color-muted);
    font-size: 13px;
}

.workspace-center .field {
    gap: 5px;
}

.workspace-center label {
    font-size: 13px;
}

.workspace-center textarea[readonly] {
    min-height: 118px;
    font-size: 16px;
    line-height: 1.55;
}

.workspace-form textarea[name="text"] {
    min-height: 185px;
    font-size: 16px;
    line-height: 1.55;
}

.workspace-save-actions {
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.workspace-helper-head {
    margin-bottom: 10px;
}

.workspace-helper-head .muted {
    font-size: 12px;
    font-weight: 800;
}

.workspace-helper-list {
    gap: 7px;
}

.workspace-helper {
    border-radius: 10px;
}

.workspace-helper summary {
    min-height: 42px;
    padding: 9px 11px;
    font-size: 14px;
}

.workspace-helper summary > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-helper summary::after {
    margin-left: 2px;
}

.helper-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface-soft) 70%, transparent);
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.helper-count.has-count {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-strong));
    color: var(--color-primary);
}

.workspace-helper-body {
    padding: 10px;
}

.workspace-helper-body .empty-state {
    padding: 12px;
    font-size: 13px;
}

.workspace-helper-body textarea {
    min-height: 80px;
}

.tm-apply {
    margin-bottom: 6px;
    padding: 9px 10px;
    border-radius: 10px;
}

.tm-apply strong {
    font-size: 13px;
    line-height: 1.35;
}

.tm-apply span {
    font-size: 12px;
}

.context-gallery {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.context-gallery img {
    max-height: 118px;
    border-radius: 8px;
}

/* Compact line detail: admin depth without oversized reading surfaces. */
.line-detail-page {
    --detail-gap: 12px;
}

.line-detail-page .hero-panel,
.line-detail-page .panel {
    margin-bottom: var(--detail-gap);
}

.line-detail-hero {
    align-items: center;
    padding: 16px 18px;
}

.line-detail-hero h1 {
    font-size: clamp(22px, 2vw, 30px);
}

.line-detail-page .panel {
    padding: 14px;
    border-radius: 12px;
}

.line-detail-page .panel h2 {
    margin-bottom: 8px;
    font-size: 18px;
}

.line-detail-page .detail-grid {
    gap: var(--detail-gap);
    margin-bottom: var(--detail-gap);
}

.line-detail-page textarea {
    min-height: 96px;
    line-height: 1.5;
}

.line-detail-page form textarea[name="text"] {
    min-height: 150px;
}

.line-detail-page .meta-list {
    gap: 7px;
}

.line-detail-page .meta-list > div {
    padding: 8px 10px;
    border-radius: 10px;
}

.line-detail-page .table-wrap {
    border-radius: 12px;
}

.line-detail-page table th,
.line-detail-page table td {
    padding: 9px 10px;
    vertical-align: top;
}

.line-detail-page .context-image-panel {
    gap: 12px;
}

.line-detail-page .context-image-gallery-detail {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.line-detail-page .context-image-card {
    border-radius: 12px;
}

.line-detail-page .context-image-thumb img {
    max-height: 170px;
}

/* Settings density pass: fixed category strip and shorter cards. */
.settings-anchor-nav {
    position: sticky;
    top: 8px;
    z-index: 20;
    gap: 6px;
    padding: 7px;
    border-radius: 12px;
}

.settings-anchor-nav a {
    min-height: 31px;
    padding: 6px 10px;
    font-size: 13px;
}

.settings-layout {
    gap: 12px;
}

.settings-card {
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
}

.settings-card__head {
    gap: 10px;
}

.settings-card__head h2 {
    font-size: 19px;
}

.settings-card__head p {
    margin-bottom: 0;
}

.settings-form {
    gap: 11px;
}

.form-grid,
.form-grid--drive {
    gap: 10px;
}

.toggle-grid,
.settings-subgrid {
    gap: 8px;
}

.switch-line {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
}

.switch-line small {
    margin-left: 25px;
}

.help-box,
.notice {
    padding: 10px 12px;
    border-radius: 10px;
}

.status-pill {
    min-height: 27px;
    padding: 4px 9px;
    font-size: 12px;
}

.settings-actions {
    gap: 8px;
}

@media (max-width: 1180px) {
    .dashboard-admin-overview,
    .dashboard-lower-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-project-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-project-card .compact-project-meta,
    .dashboard-project-card .team-strip,
    .dashboard-project-card .project-card-actions {
        grid-column: auto;
        grid-row: auto;
    }

    .workspace-shell {
        grid-template-columns: minmax(210px, 270px) minmax(440px, 1fr);
    }

    .workspace-right {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
    }

    .workspace-helper-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard-metrics--calm,
    .dashboard-metrics--risk,
    .dashboard-diff-metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-section-head {
        flex-direction: column;
    }

    .workspace-shell,
    .workspace-helper-list,
    .line-detail-page .detail-grid {
        grid-template-columns: 1fr;
    }

    .workspace-left,
    .workspace-right {
        position: static;
        max-height: none;
    }

    .workspace-main-header,
    .line-detail-hero,
    .field-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .workspace-nav-actions,
    .workspace-save-actions,
    .line-detail-hero .actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .workspace-save-actions button,
    .workspace-save-actions .button {
        flex: 1 1 160px;
    }
}

/* Lines list triage UI: grouped filters and denser review table. */
.line-filter-panel {
    padding: 14px;
    border-radius: 14px;
}

.line-filter-panel .filter-help {
    margin-top: 8px;
    font-size: 13px;
}

.filter-groups {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.filter-group {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.filter-group-label {
    padding-top: 8px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.filter-group .filter-pills {
    margin-top: 0;
    padding-top: 0;
    gap: 6px;
}

.filter-group .pill {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.pill-attention {
    border-color: color-mix(in srgb, var(--color-warning) 34%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning-soft) 54%, var(--color-surface-strong));
}

.pill-attention.active {
    background: linear-gradient(135deg, var(--color-warning), color-mix(in srgb, var(--color-warning) 68%, var(--color-primary)));
    color: #111827;
}

.pill-attention.active .pill-count {
    background: rgba(17, 24, 39, .14);
    color: #111827;
}

.active-filter-note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-blue-soft) 56%, var(--color-surface-strong));
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
}

.active-filter-note strong {
    color: var(--color-text);
}

.line-list-panel {
    border-radius: 14px;
}

.bulk-replace-panel,
.bulk-actions-panel {
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
}

.bulk-actions-panel select,
.bulk-actions-panel button {
    min-height: 36px;
    padding-block: 7px;
}

.bulk-replace-panel {
    display: grid;
    gap: 10px;
    background: color-mix(in srgb, var(--color-surface-soft) 62%, var(--color-surface-strong));
}

.bulk-tool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bulk-tool-head strong {
    display: block;
    color: var(--color-text);
    font-size: 14px;
}

.bulk-tool-head span,
.bulk-replace-rules {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.45;
}

.bulk-replace-fields {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto auto;
    align-items: end;
    gap: 10px;
}

.bulk-replace-fields .field {
    margin: 0;
}

.bulk-replace-check {
    min-height: 38px;
    align-items: center;
}

.bulk-replace-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 10px 0 0;
}

.bulk-replace-table th:nth-child(1) {
    width: 18%;
}

.bulk-replace-table th:nth-child(2),
.bulk-replace-table th:nth-child(3),
.bulk-replace-table th:nth-child(4) {
    width: 23%;
}

.bulk-replace-text {
    max-height: 130px;
    overflow: auto;
    white-space: pre-wrap;
    line-height: 1.45;
}

.bulk-replace-text.old {
    color: var(--color-muted);
}

.bulk-replace-text.new {
    color: var(--color-text);
    font-weight: 700;
}

.table-summary {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--color-surface-soft) 56%, transparent);
    color: var(--color-muted);
    font-size: 13px;
}

.table-summary strong {
    color: var(--color-text);
}

.lines-table {
    table-layout: fixed;
}

.lines-table th,
.lines-table td {
    padding: 9px 10px;
}

.lines-table--bulk th:first-child,
.lines-table--bulk td:first-child {
    width: 52px;
}

.lines-table--bulk th:nth-child(2),
.lines-table--bulk td:nth-child(2),
.lines-table--simple th:first-child,
.lines-table--simple td:first-child {
    width: 145px;
}

.lines-table--bulk th:nth-child(3),
.lines-table--bulk td:nth-child(3),
.lines-table--simple th:nth-child(2),
.lines-table--simple td:nth-child(2) {
    width: 230px;
}

.lines-table--bulk th:nth-last-child(2),
.lines-table--bulk td:nth-last-child(2),
.lines-table--simple th:nth-last-child(2),
.lines-table--simple td:nth-last-child(2) {
    width: 145px;
}

.lines-table--bulk th:last-child,
.lines-table--bulk td:last-child,
.lines-table--simple th:last-child,
.lines-table--simple td:last-child {
    width: 126px;
}

.lines-table--simple th:first-child {
    word-break: normal;
}

.lines-table td:first-child .badge-stack {
    align-items: flex-start;
}

.lines-table td:first-child .badge,
.lines-table td:nth-child(2) .badge {
    max-width: 100%;
    white-space: nowrap;
}

.lines-table--simple td:first-child .badge,
.lines-table--bulk td:nth-child(2) .badge {
    width: fit-content;
}

.lines-table .truncate {
    max-height: 3.2em;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lines-table .badge {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 11px;
}

.lines-table .badge-stack {
    gap: 4px;
    margin-top: 5px;
}

.lines-table td:last-child .button {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    justify-content: center;
    white-space: normal;
    line-height: 1.2;
    overflow-wrap: normal;
}

.suggestion-meta {
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.suggestion-meta.pending {
    color: color-mix(in srgb, var(--color-warning) 68%, var(--color-text));
}

@media (max-width: 980px) {
    .filter-group {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .filter-group-label {
        padding-top: 0;
    }

    .bulk-replace-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lines-table {
        table-layout: auto;
    }
}

.pretranslation-hero {
    border-top: 4px solid color-mix(in srgb, var(--color-primary) 62%, var(--color-success));
}

.pretranslation-form {
    grid-template-columns: minmax(240px, 1.3fr) minmax(260px, 1.4fr) minmax(180px, .8fr) minmax(220px, 1fr) minmax(140px, .6fr) auto;
    align-items: end;
}

.pretranslation-safety {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}

.pretranslation-safety > div {
    min-height: 82px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface-soft) 72%, transparent);
}

.pretranslation-safety strong,
.pretranslation-safety span {
    display: block;
}

.pretranslation-safety strong {
    margin-bottom: 5px;
    color: var(--color-text);
}

.pretranslation-safety span {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.4;
}

.pretranslation-metrics .metric-card strong {
    font-size: 24px;
}

.pretranslation-preview-table {
    table-layout: fixed;
}

.pretranslation-preview-table th:first-child,
.pretranslation-preview-table td:first-child {
    width: 26%;
}

.pretranslation-preview-table th:nth-child(2),
.pretranslation-preview-table td:nth-child(2),
.pretranslation-preview-table th:nth-child(3),
.pretranslation-preview-table td:nth-child(3) {
    width: 27%;
}

.pretranslation-preview-table th:last-child,
.pretranslation-preview-table td:last-child {
    width: 20%;
}

.pretranslation-preview-table .truncate {
    max-width: 100%;
}

.permission-loader {
    margin-bottom: 16px;
}

.permission-editor {
    position: relative;
}

.permission-group[hidden] {
    display: none;
}

.permission-toolbar,
.permission-savebar {
    gap: 12px;
}

.permission-category {
    margin-top: 14px;
}

.permission-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.permission-switch small {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    opacity: .72;
}

.permission-switch.is-disabled {
    opacity: .72;
}

.pretranslation-row--ready {
    background: color-mix(in srgb, var(--metric-success-bg) 22%, transparent);
}

.pretranslation-row--skip {
    background: color-mix(in srgb, var(--metric-warning-bg) 20%, transparent);
}

.pretranslation-confirm-form {
    align-items: center;
}

@media (max-width: 1180px) {
    .pretranslation-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bulk-replace-fields {
        grid-template-columns: 1fr;
    }

    .pretranslation-form,
    .pretranslation-safety {
        grid-template-columns: 1fr;
    }

    .pretranslation-preview-table th:first-child,
    .pretranslation-preview-table td:first-child,
    .pretranslation-preview-table th:nth-child(2),
    .pretranslation-preview-table td:nth-child(2),
    .pretranslation-preview-table th:nth-child(3),
    .pretranslation-preview-table td:nth-child(3),
    .pretranslation-preview-table th:last-child,
    .pretranslation-preview-table td:last-child {
        width: auto;
    }

    .pretranslation-confirm-form {
        align-items: stretch;
    }
}

/* ============================================================
   Steam Türkçe Yama İstekleri
   ============================================================ */

.steam-request-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}

.steam-request-form label {
    grid-column: 1 / -1;
    font-weight: 600;
    color: var(--color-text-muted, var(--muted));
}

.steam-request-form input[type="text"] {
    padding: 10px 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 10px;
    background: var(--color-surface, var(--panel));
    font-size: 15px;
    min-width: 0;
}

.steam-request-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.steam-request-filters input[type="search"] {
    flex: 1 1 220px;
    padding: 9px 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 10px;
    background: var(--color-surface, var(--panel));
    min-width: 0;
}

.steam-request-filters select {
    padding: 9px 12px;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 10px;
    background: var(--color-surface, var(--panel));
}

.steam-request-card {
    overflow: hidden;
    padding: 0;
}

.steam-request-card > :not(.steam-request-card__media) {
    padding-left: 14px;
    padding-right: 14px;
}

.steam-request-card > :not(.steam-request-card__media):last-child {
    padding-bottom: 14px;
}

.steam-request-card__media {
    position: relative;
    aspect-ratio: 460 / 215;
    background: #0b1726;
    overflow: hidden;
}

.steam-request-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.steam-request-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
}

.steam-request-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.steam-request-card__meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 13px;
}

.steam-request-card__stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px dashed var(--color-border, var(--line));
}

.steam-request-card__stats > div {
    display: flex;
    flex-direction: column;
}

.steam-request-card__stats strong {
    font-size: 18px;
    line-height: 1.1;
}

.steam-request-card__stats .muted {
    font-size: 12px;
}

.steam-request-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.steam-request-card__actions form {
    margin: 0;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px 0 4px;
}

.pagination a {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border, var(--line));
    text-decoration: none;
}

.steam-dashboard-card {
    border-left: 4px solid #66c0f4;
}

.steam-dashboard-card__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.steam-dashboard-card__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 12px;
    background: var(--color-surface, var(--panel));
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.steam-dashboard-card__item:hover {
    border-color: #66c0f4;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(102, 192, 244, .18);
}

.steam-dashboard-card__item-media {
    width: 100%;
    aspect-ratio: 460 / 215;
    background: #0b1726;
    overflow: hidden;
}

.steam-dashboard-card__item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.steam-dashboard-card__item-body {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.steam-dashboard-card__item strong {
    display: block;
    font-size: 15px;
    line-height: 1.25;
}

.steam-dashboard-card__item .muted {
    font-size: 12px;
}

@media (max-width: 720px) {
    .steam-request-form {
        grid-template-columns: 1fr;
    }
    .steam-request-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .steam-request-filters input[type="search"],
    .steam-request-filters select {
        width: 100%;
    }
}