Spaces:
Sleeping
Sleeping
| /* ===== Admin/Annotator Dashboard Styles ===== */ | |
| .admin-main { | |
| margin-top: var(--header-h); | |
| padding: 24px 32px; | |
| max-width: 1200px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| min-height: calc(100vh - var(--header-h)); | |
| overflow-y: auto; | |
| } | |
| /* User badge in header */ | |
| .user-badge { | |
| padding: 4px 12px; | |
| background: rgba(88,166,255,.1); | |
| border: 1px solid rgba(88,166,255,.25); | |
| border-radius: 20px; | |
| font-size: .78rem; | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .logout-btn { | |
| display: flex; align-items: center; gap: 6px; | |
| padding: 6px 14px; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| font-size: .8rem; | |
| cursor: pointer; | |
| transition: all .2s; | |
| } | |
| .logout-btn:hover { border-color: #f87171; color: #f87171; } | |
| /* Tab Navigation */ | |
| .tab-nav { | |
| display: flex; | |
| gap: 4px; | |
| margin-bottom: 24px; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 0; | |
| overflow-x: auto; | |
| } | |
| .tab-btn { | |
| padding: 10px 20px; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| color: var(--text-muted); | |
| font-size: .85rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all .2s; | |
| font-family: inherit; | |
| white-space: nowrap; | |
| } | |
| .tab-btn:hover { color: var(--text-primary); } | |
| .tab-btn.active { | |
| color: var(--accent); | |
| border-bottom-color: var(--accent); | |
| } | |
| /* Tab Content */ | |
| .tab-content { display: none; } | |
| .tab-content.active { display: block; } | |
| /* Section Header */ | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| } | |
| .section-header h2 { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| } | |
| .section-header p { | |
| font-size: .8rem; | |
| color: var(--text-muted); | |
| margin-left: 12px; | |
| } | |
| .section-header p code { | |
| background: var(--bg-card); | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: .75rem; | |
| color: var(--accent); | |
| } | |
| /* Buttons */ | |
| .primary-btn { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 8px 16px; | |
| background: linear-gradient(135deg, var(--accent), #388bfd); | |
| color: #fff; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| font-size: .82rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: opacity .2s; | |
| font-family: inherit; | |
| } | |
| .primary-btn:hover { opacity: .85; } | |
| .ghost-btn { | |
| padding: 8px 16px; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| font-size: .82rem; | |
| cursor: pointer; | |
| transition: all .2s; | |
| font-family: inherit; | |
| } | |
| .ghost-btn:hover { border-color: var(--text-muted); } | |
| .danger-btn { | |
| padding: 4px 10px; | |
| background: rgba(248,113,113,.1); | |
| border: 1px solid rgba(248,113,113,.25); | |
| border-radius: var(--radius-sm); | |
| color: #f87171; | |
| font-size: .75rem; | |
| cursor: pointer; | |
| transition: all .2s; | |
| font-family: inherit; | |
| } | |
| .danger-btn:hover { background: rgba(248,113,113,.2); } | |
| /* Create Forms */ | |
| .create-form { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 14px 18px; | |
| margin-bottom: 20px; | |
| } | |
| .form-row { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .form-row input, .form-row select { | |
| padding: 8px 12px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| font-size: .85rem; | |
| outline: none; | |
| min-width: 140px; | |
| font-family: inherit; | |
| } | |
| .form-row input:focus, .form-row select:focus { border-color: var(--accent); } | |
| .form-error { | |
| color: #f87171; | |
| font-size: .78rem; | |
| margin-top: 8px; | |
| min-height: 1em; | |
| } | |
| /* Data Table */ | |
| .table-container { overflow-x: auto; } | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: .85rem; | |
| } | |
| .data-table th { | |
| text-align: left; | |
| padding: 10px 14px; | |
| background: var(--bg-card); | |
| color: var(--text-muted); | |
| font-size: .72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .06em; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .data-table td { | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--border-light); | |
| color: var(--text-secondary); | |
| } | |
| .data-table tbody tr:hover { background: var(--bg-hover); } | |
| .role-badge { | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| font-size: .72rem; | |
| font-weight: 600; | |
| } | |
| .role-admin { background: rgba(167,139,250,.12); color: #a78bfa; } | |
| .role-annotator { background: rgba(52,211,153,.12); color: #34d399; } | |
| /* File Cards */ | |
| .card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 14px; | |
| } | |
| .file-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 18px; | |
| cursor: pointer; | |
| transition: all .2s; | |
| } | |
| .file-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } | |
| .file-card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 12px; | |
| } | |
| .file-card-name { | |
| font-weight: 600; | |
| font-size: .85rem; | |
| word-break: break-all; | |
| } | |
| .file-card-stats { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: .78rem; | |
| color: var(--text-muted); | |
| margin-bottom: 8px; | |
| } | |
| .file-card > .ghost-btn { margin-top: 6px; } | |
| .data-table td .ghost-btn { padding: 4px 8px; margin-right: 5px; } | |
| .progress-bar { | |
| height: 5px; | |
| background: var(--border); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| margin-bottom: 10px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| transition: width .4s ease; | |
| } | |
| .completed-badge { | |
| font-size: .75rem; | |
| color: #34d399; | |
| font-weight: 600; | |
| text-align: center; | |
| } | |
| .continue-badge { | |
| font-size: .75rem; | |
| color: var(--accent); | |
| font-weight: 600; | |
| text-align: center; | |
| } | |
| /* Empty State */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: var(--text-muted); | |
| } | |
| /* Progress in table */ | |
| .progress-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .progress-cell .progress-bar { | |
| width: 80px; | |
| margin-bottom: 0; | |
| } | |
| .progress-text { | |
| font-size: .75rem; | |
| font-variant-numeric: tabular-nums; | |
| min-width: 60px; | |
| } | |
| /* Review controls on review page */ | |
| .review-card { border-color: rgba(88,166,255,.3); } | |
| .review-help { margin: 0 0 10px; color: var(--text-muted); font-size: .76rem; line-height: 1.55; } | |
| .submit-review-btn { | |
| width: 100%; | |
| padding: 10px; | |
| background: linear-gradient(135deg, var(--accent), #388bfd); | |
| color: #fff; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| font-weight: 600; | |
| font-size: .85rem; | |
| cursor: pointer; | |
| transition: opacity .2s; | |
| font-family: inherit; | |
| } | |
| .submit-review-btn:hover { opacity: .85; } | |
| .submit-review-btn:disabled { opacity: .4; cursor: not-allowed; } | |
| .review-status-badge { | |
| margin-left: auto; | |
| padding: 2px 10px; | |
| border-radius: 10px; | |
| font-size: .72rem; | |
| font-weight: 700; | |
| } | |
| .review-status-complete { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); } | |
| .review-status-pending { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); } | |
| /* Sample list review status dots */ | |
| .sample-review-dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-left: 4px; | |
| } | |
| .dot-complete { background: #34d399; } | |
| .dot-pending { background: var(--border); } | |
| /* ===== Edit Mode Styles ===== */ | |
| .edit-toggle-btn { | |
| margin-left: auto; | |
| padding: 3px 10px; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| font-size: .72rem; | |
| cursor: pointer; | |
| transition: all .15s; | |
| font-family: inherit; | |
| display: flex; align-items: center; gap: 4px; | |
| } | |
| .edit-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .edit-toggle-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.1); } | |
| .edit-toggle-btn:disabled { opacity: .45; cursor: not-allowed; } | |
| .edit-cancel-btn { | |
| padding: 3px 9px; | |
| border: 1px solid rgba(248,113,113,.4); | |
| border-radius: var(--radius-sm); | |
| background: rgba(248,113,113,.08); | |
| color: #f87171; | |
| font-size: .72rem; | |
| font-family: inherit; | |
| cursor: pointer; | |
| } | |
| .edit-cancel-btn:hover { background: rgba(248,113,113,.18); } | |
| .edit-cancel-btn[hidden], .restore-field-btn[hidden] { display: none; } | |
| /* ===== Annotation History ===== */ | |
| .field-history-modal { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1200; | |
| display: grid; | |
| place-items: center; | |
| padding: 20px; | |
| background: rgba(5, 8, 13, .76); | |
| backdrop-filter: blur(3px); | |
| } | |
| .field-history-modal[hidden] { display: none; } | |
| .field-history-dialog { | |
| width: min(620px, 100%); | |
| max-height: min(650px, 78vh); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius); | |
| background: var(--bg-card); | |
| box-shadow: 0 18px 60px rgba(0, 0, 0, .55); | |
| } | |
| .field-history-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 14px 18px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .field-history-header h2 { margin: 0; font-size: .95rem; } | |
| .field-history-header p { margin: 4px 0 0; color: var(--text-muted); font-size: .72rem; } | |
| .field-history-close { | |
| flex-shrink: 0; | |
| width: 30px; | |
| height: 30px; | |
| border: 1px solid var(--border); | |
| border-radius: 50%; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-size: 1.25rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| } | |
| .field-history-close:hover { color: var(--text-primary); border-color: var(--accent); } | |
| .field-history-content { overflow-y: auto; padding: 16px 18px 20px; } | |
| [data-history-card][aria-expanded="true"] { | |
| color: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .history-empty, .history-loading { | |
| padding: 14px 4px; | |
| color: var(--text-muted); | |
| font-size: .76rem; | |
| } | |
| .history-entry { | |
| position: relative; | |
| margin-left: 4px; | |
| padding: 0 0 16px 17px; | |
| border-left: 1px solid var(--border-light); | |
| } | |
| .history-entry:last-child { padding-bottom: 0; } | |
| .history-entry::before { | |
| content: ''; | |
| position: absolute; | |
| top: 4px; | |
| left: -5px; | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| box-shadow: 0 0 0 4px var(--bg-card); | |
| } | |
| .history-entry-head { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| gap: 4px 8px; | |
| margin-bottom: 7px; | |
| } | |
| .history-version { color: var(--accent); font-size: .8rem; font-weight: 700; } | |
| .history-meta { color: var(--text-muted); font-size: .7rem; } | |
| .history-summary { | |
| padding: 9px 10px; | |
| background: rgba(255, 255, 255, .025); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| font-size: .76rem; | |
| line-height: 1.55; | |
| } | |
| .history-change-count { margin-bottom: 10px; color: #fbbf24; font-size: .76rem; font-weight: 700; } | |
| .history-change { padding: 9px 0; border-top: 1px solid var(--border); } | |
| .history-change-label { margin-bottom: 6px; color: var(--text-primary); font-size: .76rem; font-weight: 700; } | |
| .history-change-values { display: grid; grid-template-columns: 1fr; gap: 6px; } | |
| .history-before, .history-after { | |
| min-width: 0; | |
| padding: 8px 9px; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| background: var(--bg-primary); | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| } | |
| .history-before > span, .history-after > span { | |
| display: block; | |
| margin-bottom: 4px; | |
| color: var(--text-muted); | |
| font-size: .63rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .history-before del { color: #fda4af; background: rgba(248,113,113,.2); } | |
| .history-after ins { color: #a7f3d0; background: rgba(52,211,153,.2); text-decoration: none; } | |
| .history-no-change { color: var(--text-muted); font-style: italic; } | |
| @media (max-width: 640px) { | |
| .field-history-modal { padding: 10px; } | |
| .field-history-dialog { max-height: 90vh; } | |
| .field-history-content { padding: 14px; } | |
| } | |
| .edited-badge { | |
| padding: 2px 8px; | |
| background: rgba(251,191,36,.12); | |
| border: 1px solid rgba(251,191,36,.3); | |
| border-radius: 10px; | |
| font-size: .65rem; | |
| font-weight: 700; | |
| color: #fbbf24; | |
| } | |
| /* Inline edit inputs */ | |
| .edit-field { | |
| width: 100%; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| font-size: .82rem; | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color .15s; | |
| } | |
| .edit-field:focus { border-color: var(--accent); } | |
| input.edit-field { padding: 5px 9px; } | |
| textarea.edit-field { padding: 6px 9px; resize: vertical; } | |
| select.edit-field { padding: 5px 9px; } | |
| .restore-field-btn, .clear-field-btn { | |
| padding: 3px 6px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: .67rem; | |
| font-family: inherit; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| .restore-field-btn { margin-top: 4px; } | |
| .edit-row .restore-field-btn { margin-top: 0; } | |
| .clear-field-btn { color: #fbbf24; border-color: rgba(251,191,36,.3); } | |
| .restore-field-btn:hover, .clear-field-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .edit-row .edit-field { min-width: 0; } | |
| .review-note-input { margin-top: 2px; } | |
| .review-summary-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } | |
| .edit-row { | |
| display: flex; align-items: center; gap: 6px; | |
| margin-bottom: 6px; | |
| } | |
| .edit-label { | |
| font-size: .68rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: .06em; | |
| font-weight: 600; | |
| margin-bottom: 3px; | |
| } | |
| .edit-group { margin-bottom: 8px; } | |
| .edit-group:last-child { margin-bottom: 0; } | |
| /* Evidence select mode */ | |
| .select-evidence-btn { | |
| padding: 4px 10px; | |
| background: rgba(251,191,36,.1); | |
| border: 1px solid rgba(251,191,36,.3); | |
| border-radius: var(--radius-sm); | |
| color: #fbbf24; | |
| font-size: .72rem; | |
| cursor: pointer; | |
| font-family: inherit; | |
| white-space: nowrap; | |
| transition: all .15s; | |
| flex-shrink: 0; | |
| } | |
| .select-evidence-btn:hover { background: rgba(251,191,36,.2); } | |
| .select-evidence-btn.selecting { background: rgba(251,191,36,.25); border-color: #fbbf24; animation: pulse-border .8s infinite; } | |
| @keyframes pulse-border { 0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,.4); } 50% { box-shadow: 0 0 0 4px rgba(251,191,36,0); } } | |
| /* Conversation selection mode overlay */ | |
| .conversation-panel.selecting-mode .conversation-view { | |
| cursor: text; | |
| outline: 2px dashed rgba(251,191,36,.5); | |
| outline-offset: -4px; | |
| } | |
| .selection-hint { | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| background: rgba(251,191,36,.15); | |
| border: 1px solid rgba(251,191,36,.4); | |
| border-radius: var(--radius-sm); | |
| padding: 6px 12px; | |
| font-size: .78rem; | |
| color: #fbbf24; | |
| text-align: center; | |
| margin-bottom: 8px; | |
| display: none; | |
| } | |
| .selection-hint.visible { display: block; } | |
| /* Distortion edit item */ | |
| .distortion-item.editing { | |
| border-color: var(--distortion-color); | |
| background: var(--distortion-bg); | |
| } | |
| .empathy-item.editing { | |
| border-color: rgba(52,211,153,.5); | |
| background: rgba(52,211,153,.08); | |
| } | |
| /* Score slider */ | |
| .score-slider { width: 100%; accent-color: var(--empathy-color); } | |
| .score-display { font-weight: 700; font-size: .85rem; min-width: 20px; } | |
| /* Add/remove item buttons */ | |
| .add-item-btn { | |
| width: 100%; padding: 7px; | |
| background: transparent; | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| font-size: .78rem; | |
| cursor: pointer; font-family: inherit; | |
| transition: all .15s; | |
| margin-top: 6px; | |
| } | |
| .add-item-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .remove-item-btn { | |
| padding: 2px 7px; | |
| background: rgba(248,113,113,.08); | |
| border: 1px solid rgba(248,113,113,.2); | |
| border-radius: 4px; | |
| color: #f87171; | |
| font-size: .7rem; | |
| cursor: pointer; font-family: inherit; | |
| flex-shrink: 0; | |
| } | |
| /* Save annotation button */ | |
| .save-anno-btn { | |
| width: 100%; padding: 8px; | |
| background: linear-gradient(135deg,#fbbf24,#f59e0b); | |
| color: #1a1200; | |
| border: none; border-radius: var(--radius-sm); | |
| font-weight: 700; font-size: .82rem; | |
| cursor: pointer; font-family: inherit; | |
| margin-top: 8px; transition: opacity .15s; | |
| } | |
| .save-anno-btn:hover { opacity: .9; } | |
| .save-anno-btn.saved { background: linear-gradient(135deg,#34d399,#059669); color: #fff; } | |
| .reset-anno-btn { | |
| width: 100%; padding: 6px; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| font-size: .75rem; cursor: pointer; font-family: inherit; | |
| margin-top: 4px; transition: all .15s; | |
| } | |
| .reset-anno-btn:hover { border-color: #f87171; color: #f87171; } | |
| /* ===== Admin review audit ===== */ | |
| .section-header .audit-intro { margin: 5px 0 0; max-width: 720px; line-height: 1.5; } | |
| .audit-toolbar { | |
| display: grid; | |
| grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(160px, 1fr); | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .audit-toolbar label { display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); font-size: .72rem; font-weight: 600; } | |
| .audit-toolbar select { | |
| width: 100%; min-width: 0; padding: 9px 10px; | |
| border: 1px solid var(--border); border-radius: var(--radius-sm); | |
| background: var(--bg-card); color: var(--text-primary); font-size: .8rem; font-family: inherit; | |
| } | |
| .audit-toolbar select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } | |
| .audit-status { margin-bottom: 12px; color: var(--text-muted); font-size: .78rem; } | |
| .audit-status:empty { display: none; } | |
| .audit-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; margin-bottom: 18px; } | |
| .audit-metric { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); } | |
| .audit-metric strong { display: block; color: var(--text-primary); font-size: 1.15rem; font-variant-numeric: tabular-nums; } | |
| .audit-metric span { display: block; margin-top: 4px; color: var(--text-muted); font-size: .72rem; line-height: 1.4; } | |
| .audit-metric.is-warning strong { color: #fbbf24; } | |
| .audit-table { min-width: 1080px; } | |
| .audit-table th, .audit-table td { padding: 9px 10px; vertical-align: middle; } | |
| .audit-empty-row { text-align: center; color: var(--text-muted); } | |
| .audit-sample-id { display: block; color: var(--text-muted); font: .66rem 'JetBrains Mono', monospace; white-space: nowrap; } | |
| .audit-chip { | |
| display: inline-block; padding: 3px 7px; border-radius: 6px; | |
| font-size: .68rem; font-weight: 700; white-space: nowrap; | |
| } | |
| .audit-chip.is-complete, .audit-chip.is-kept { background: rgba(52,211,153,.12); color: #34d399; } | |
| .audit-chip.is-edited { background: rgba(96,165,250,.14); color: #93c5fd; } | |
| .audit-chip.is-draft { background: rgba(251,191,36,.14); color: #fbbf24; } | |
| .audit-chip.is-none { background: rgba(148,163,184,.1); color: var(--text-muted); } | |
| .audit-check { color: #fbbf24; font-size: .72rem; font-weight: 700; white-space: nowrap; } | |
| .audit-check.is-clear { color: var(--text-muted); font-weight: 400; } | |
| .audit-inspect-btn { white-space: nowrap; } | |
| .audit-modal { | |
| position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; | |
| padding: 20px; background: rgba(5,8,13,.78); backdrop-filter: blur(3px); | |
| } | |
| .audit-modal[hidden] { display: none; } | |
| .audit-dialog { | |
| width: min(960px, 100%); max-height: min(850px, 92vh); | |
| display: flex; flex-direction: column; overflow: hidden; | |
| border: 1px solid var(--border-light); border-radius: var(--radius); | |
| background: var(--bg-card); box-shadow: 0 18px 60px rgba(0,0,0,.55); | |
| } | |
| .audit-modal-header { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } | |
| .audit-modal-header h2 { margin: 0; font-size: 1rem; } | |
| .audit-modal-header p { margin: 4px 0 0; color: var(--text-muted); font-size: .76rem; } | |
| .audit-modal-close { | |
| flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--border); | |
| border-radius: 50%; background: transparent; color: var(--text-secondary); | |
| font-size: 1.25rem; cursor: pointer; | |
| } | |
| .audit-modal-close:hover { color: var(--text-primary); border-color: var(--accent); } | |
| .audit-modal-content { overflow-y: auto; padding: 18px 20px 22px; } | |
| .audit-modal-content h3 { margin: 0 0 10px; font-size: .86rem; } | |
| .audit-conversation { margin-bottom: 18px; } | |
| .audit-conversation pre, .audit-json { | |
| max-height: 220px; overflow: auto; margin: 0; padding: 10px; | |
| border: 1px solid var(--border); border-radius: var(--radius-sm); | |
| background: var(--bg-primary); color: var(--text-secondary); | |
| font: .72rem/1.55 'JetBrains Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; | |
| } | |
| .audit-section { margin-top: 12px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); } | |
| .audit-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } | |
| .audit-section-head h3 { margin: 0; } | |
| .audit-comment { margin: 8px 0; padding: 9px 10px; border-left: 3px solid var(--accent); background: rgba(88,166,255,.06); color: var(--text-secondary); font-size: .76rem; white-space: pre-wrap; } | |
| .audit-warning { color: #fbbf24; font-size: .76rem; font-weight: 700; } | |
| .audit-field-change { padding: 8px 0; border-top: 1px solid var(--border); } | |
| .audit-field-change > strong { display: block; margin-bottom: 6px; color: var(--text-primary); font-size: .73rem; } | |
| .audit-diff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } | |
| .audit-diff-grid > div { min-width: 0; padding: 8px; border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-secondary); font-size: .72rem; white-space: pre-wrap; overflow-wrap: anywhere; } | |
| .audit-diff-grid span { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: .65rem; font-weight: 700; text-transform: uppercase; } | |
| .audit-section details { margin-top: 10px; } | |
| .audit-section summary { color: var(--accent); cursor: pointer; font-size: .73rem; } | |
| .audit-inspect-footer { display: flex; justify-content: flex-end; margin-top: 16px; } | |
| @media (max-width: 760px) { | |
| .audit-toolbar { grid-template-columns: 1fr; } | |
| .audit-modal { padding: 8px; } | |
| .audit-dialog { max-height: 94vh; } | |
| .audit-modal-content { padding: 14px; } | |
| .audit-diff-grid { grid-template-columns: 1fr; } | |
| } | |