* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 1.8rem;
    color: #2c3e50;
}

.subtitle {
    color: #666;
    font-size: 0.95rem;
}

/* Paper info */
.paper-info {
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-row label {
    font-weight: 500;
    color: #666;
    white-space: nowrap;
    min-width: 90px;
}

.info-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.info-row input:focus {
    outline: none;
    border-color: #2c3e50;
}

.info-row-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 700px) {
    .info-row-group {
        grid-template-columns: 1fr;
    }
}

/* Toolbar */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.toolbar-left {
    display: flex;
    gap: 8px;
}

.toolbar-left button {
    padding: 8px 16px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.toolbar-left button:hover {
    background: #34495e;
}

#btn-new {
    background: #e74c3c;
}

#btn-new:hover {
    background: #c0392b;
}

#btn-calibrate {
    background: #8e44ad;
}

#btn-calibrate:hover {
    background: #7d3c98;
}

.save-status {
    font-size: 0.85rem;
    color: #999;
}

.save-status.saved {
    color: #27ae60;
}

/* Main content */
.main-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

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

.form-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Section titles */
.section-title {
    font-size: 1.2rem;
    color: #2c3e50;
    padding: 10px 0 5px;
    border-bottom: 2px solid #2c3e50;
    margin-top: 10px;
}

.section-note {
    font-size: 0.85rem;
    font-weight: normal;
    color: #666;
}

/* Percentile explainer banner */
.percentile-explainer {
    background: #eaf2f8;
    border-left: 4px solid #3498db;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    color: #2c3e50;
    line-height: 1.6;
    margin-bottom: 15px;
}

.percentile-explainer a {
    color: #2980b9;
}

/* CI tooltip */
.ci-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #ddd;
    color: #555;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: 4px;
}

.ci-info-icon .ci-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    width: 300px;
    white-space: normal;
    z-index: 100;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.ci-info-icon .ci-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2c3e50;
}

.ci-info-icon:hover .ci-tooltip {
    display: block;
}

/* Metric cards */
.metric-card,
.tier-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    border-left: 4px solid #ddd;
    transition: border-color 0.3s;
}

.metric-card.partial {
    border-left-color: #f39c12;
}

.metric-card.complete,
.tier-card.complete {
    border-left-color: #27ae60;
}

.tier-card.partial {
    border-left-color: #f39c12;
}

.metric-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.metric-header h3 {
    flex: 1;
    font-size: 1rem;
    color: #2c3e50;
}

.metric-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #2c3e50;
    color: white;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

.completion-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    flex-shrink: 0;
    transition: background 0.3s;
}

.completion-dot.partial {
    background: #f39c12;
}

.completion-dot.complete {
    background: #27ae60;
}

/* Expandable hints */
.metric-hint {
    margin-bottom: 15px;
}

.metric-hint summary {
    cursor: pointer;
    color: #3498db;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 4px 0;
    user-select: none;
}

.metric-hint summary:hover {
    color: #2980b9;
}

.hint-content {
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 6px;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.7;
}

.hint-content ul {
    margin: 8px 0;
    padding-left: 20px;
}

.hint-content li {
    margin-bottom: 4px;
}

.hint-content p {
    margin-bottom: 8px;
}

.hint-content p:last-child {
    margin-bottom: 0;
}

.hint-benchmark {
    font-style: italic;
    color: #888;
}

.hint-note {
    font-style: italic;
    color: #888;
    font-size: 0.85rem;
}

/* Rating row */
.rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.rating-row label {
    font-weight: 500;
    color: #666;
    min-width: 70px;
    font-size: 0.9rem;
}

.metric-slider,
.tier-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.metric-slider.active,
.tier-slider.active {
    opacity: 1;
}

.metric-slider::-webkit-slider-thumb,
.tier-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
}

.metric-slider::-moz-range-thumb,
.tier-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    border: none;
}

.metric-number-input,
.tier-number-input {
    width: 65px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    text-align: center;
}

.metric-number-input:focus,
.tier-number-input:focus {
    outline: none;
    border-color: #2c3e50;
}

/* Tier labels */
.tier-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #999;
    padding: 0 70px 10px 82px;
}

/* Credible interval row */
.ci-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ci-row label {
    font-weight: 500;
    color: #666;
    min-width: 70px;
    font-size: 0.9rem;
}

.ci-input {
    width: 75px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
}

.ci-input:focus {
    outline: none;
    border-color: #2c3e50;
}

.ci-dash {
    color: #999;
    font-weight: bold;
}

/* Guidelines links */
.guidelines-link {
    margin-top: 5px;
}

.guidelines-link a,
.guidelines-section-link {
    color: #3498db;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: normal;
}

.guidelines-link a:hover,
.guidelines-section-link:hover {
    text-decoration: underline;
}

.guidelines-section-link {
    margin-left: 8px;
}

/* Section cards */
.section-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 5px;
}

.section-description {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.section-note {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
}

/* COI section */
.coi-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.coi-conditions {
    margin: 10px 0 15px 20px;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

.coi-conditions li {
    margin-bottom: 4px;
}

.coi-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 12px;
    margin-bottom: 8px;
}

.coi-section h3 {
    font-size: 1rem;
    color: #2c3e50;
    margin-bottom: 8px;
}

/* Report tabs */
.report-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
}

.report-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    transition: all 0.2s;
}

.report-tab:hover {
    color: #2c3e50;
}

.report-tab.active {
    color: #2c3e50;
    border-bottom-color: #2c3e50;
    font-weight: 500;
}

.report-tab-content {
    display: none;
}

.report-tab-content.active {
    display: block;
}

#full-report {
    width: 100%;
    min-height: 300px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    line-height: 1.6;
}

#full-report:focus {
    outline: none;
    border-color: #2c3e50;
}

/* Upload area */
.upload-area {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.upload-area:hover {
    border-color: #2c3e50;
    background: #f8f9fa;
}

.upload-area p {
    color: #666;
    margin-bottom: 5px;
}

.uploaded-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #e8f5e9;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 0.9rem;
}

.remove-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #e74c3c;
    padding: 0 4px;
}

/* Claim identification */
.claim-entry {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 12px;
    border-left: 3px solid #3498db;
}

.claim-row {
    margin-bottom: 10px;
}

.claim-row:last-child {
    margin-bottom: 0;
}

.claim-row label {
    display: block;
    font-weight: 500;
    color: #555;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.claim-text,
.claim-notes {
    width: 100%;
    min-height: 100px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.claim-additional,
.claim-implication {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.claim-text:focus,
.claim-notes:focus,
.claim-additional:focus,
.claim-implication:focus {
    outline: none;
    border-color: #2c3e50;
}

.claim-row-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.claim-strength,
.claim-relevance {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
}

.secondary-btn {
    padding: 8px 16px;
    background: white;
    color: #2c3e50;
    border: 2px solid #2c3e50;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    margin-top: 8px;
}

.secondary-btn:hover {
    background: #2c3e50;
    color: white;
}

/* Survey section */
.survey-group-title {
    font-size: 0.9rem;
    color: #2c3e50;
    margin: 15px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.survey-group-title:first-of-type {
    margin-top: 0;
}

.survey-question {
    margin-bottom: 12px;
}

.survey-question label {
    display: block;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
}

.survey-question select {
    width: 100%;
    max-width: 300px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
}

.survey-question textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.survey-question textarea:focus,
.survey-question select:focus {
    outline: none;
    border-color: #2c3e50;
}

/* Three-dot CI visual track */
.ci-visual {
    position: relative;
    margin: 12px 0 14px;
    padding: 0 12px;
    user-select: none;
}

.ci-track {
    position: relative;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    margin-top: 14px;
}

.ci-track-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(52, 152, 219, 0.35);
    border-radius: 2px;
    transition: left 0.1s, width 0.1s;
}

.ci-dot {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: box-shadow 0.15s;
    z-index: 2;
}

.ci-dot:active {
    cursor: grabbing;
    box-shadow: 0 0 0 6px rgba(44, 62, 80, 0.15);
}

.ci-dot-lower,
.ci-dot-upper {
    background: white;
    border: 3px solid #2c3e50;
    z-index: 2;
}

.ci-dot-mid {
    background: #2c3e50;
    border: 3px solid #2c3e50;
    z-index: 3;
    width: 22px;
    height: 22px;
}

.ci-dot-lower:hover,
.ci-dot-upper:hover {
    box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.1);
}

.ci-dot-mid:hover {
    box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.15);
}

.ci-dot.hidden {
    display: none;
}

.ci-value-label {
    position: absolute;
    top: 16px;
    transform: translateX(-50%);
    font-size: 0.78rem;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    text-align: center;
}

.ci-value-label.label-lower,
.ci-value-label.label-upper {
    color: #555;
    font-weight: 500;
}

.ci-label-name {
    display: none;
}

.ci-label-val {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: inherit;
}

.ci-value-label.label-mid .ci-label-val {
    color: #2c3e50;
}

.ci-hint {
    font-size: 0.75rem;
    color: #999;
    margin-top: 4px;
    font-style: italic;
}

.ci-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    font-size: 0.72rem;
    color: #aaa;
    padding: 0;
}

/* Comment row */
.comment-row {
    margin-top: 5px;
}

.metric-comment {
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    line-height: 1.5;
}

.metric-comment:focus {
    outline: none;
    border-color: #2c3e50;
}

/* Summary card */
.summary-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
}

.summary-card textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    line-height: 1.6;
}

.summary-card textarea:focus {
    outline: none;
    border-color: #2c3e50;
}

.word-count {
    text-align: right;
    font-size: 0.8rem;
    color: #999;
    margin-top: 5px;
}

/* Sidebar */
.sidebar-panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    position: sticky;
    top: 20px;
}

.sidebar-panel h3 {
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: #2c3e50;
    border-bottom: 2px solid #eee;
    padding-bottom: 6px;
}

/* Progress bar */
.progress-bar-container {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #27ae60;
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s;
}

.progress-text {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
    text-align: center;
}

/* Ratings overview */
.ratings-overview {
    margin-bottom: 20px;
}

.overview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
}

.overview-item:last-child {
    border-bottom: none;
}

.overview-label {
    color: #666;
}

.overview-value {
    font-weight: 600;
    color: #2c3e50;
}

.overview-value.empty {
    color: #ccc;
    font-weight: normal;
}

.overview-ci {
    font-size: 0.75rem;
    color: #999;
    margin-left: 4px;
}

/* Navigation links */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.nav-links a {
    color: #3498db;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.nav-links a:hover {
    background: #f0f0f0;
}

.nav-links a.active {
    background: #eaf2f8;
    font-weight: 500;
}

/* Keyboard help */
.keyboard-help {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
}

.keyboard-help h4 {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 8px;
}

.keyboard-help ul {
    list-style: none;
    font-size: 0.8rem;
    color: #666;
}

.keyboard-help kbd {
    display: inline-block;
    padding: 2px 6px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85rem;
}

/* Empty message */
.empty-message {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 15px;
    font-size: 0.85rem;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-wide {
    max-width: 700px;
}

.modal-content h2 {
    margin-bottom: 15px;
    color: #2c3e50;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}

/* Export options */
.export-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.export-options button {
    padding: 12px;
    border: 2px solid #2c3e50;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.export-options button:hover {
    background: #2c3e50;
    color: white;
}

/* Primary button */
.primary-btn {
    padding: 10px 20px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.primary-btn:hover {
    background: #34495e;
}

/* Calibration */
.calibration-intro {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.calibration-paper {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.calibration-paper h3 {
    color: #2c3e50;
    margin-bottom: 8px;
}

.cal-field {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 10px;
}

.cal-abstract {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
}

/* Calibration rating */
.calibration-rate {
    margin-bottom: 15px;
}

.cal-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

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

.cal-metric-label {
    min-width: 180px;
    font-size: 0.85rem;
    color: #555;
}

.cal-metric-row input[type="range"] {
    flex: 1;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
}

.cal-metric-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8e44ad;
    cursor: pointer;
}

.cal-metric-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8e44ad;
    cursor: pointer;
    border: none;
}

.cal-metric-value {
    width: 40px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c3e50;
}

/* Calibration results */
.calibration-results h3 {
    margin-bottom: 12px;
    color: #2c3e50;
}

.cal-comparison {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

.cal-compare-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.cal-compare-label {
    min-width: 160px;
    color: #555;
}

.cal-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cal-bar {
    height: 10px;
    border-radius: 3px;
    position: relative;
    min-width: 2px;
}

.cal-bar.user {
    background: #8e44ad;
}

.cal-bar.expert {
    background: #27ae60;
}

.cal-bar-label {
    position: absolute;
    right: -30px;
    top: -2px;
    font-size: 0.75rem;
    font-weight: 600;
}

.cal-legend {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 12px;
}

.cal-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cal-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.cal-legend-swatch.user {
    background: #8e44ad;
}

.cal-legend-swatch.expert {
    background: #27ae60;
}

.cal-nav {
    text-align: center;
}

.cal-progress {
    text-align: center;
    font-size: 0.85rem;
    color: #999;
    margin-top: 15px;
}

.cal-paper-link {
    margin-bottom: 10px;
}

.cal-paper-link a {
    color: #3498db;
    text-decoration: none;
    font-size: 0.9rem;
}

.cal-paper-link a:hover {
    text-decoration: underline;
}

.cal-evaluation-links {
    background: #f0faf0;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 0.85rem;
}

.cal-evaluation-links a {
    color: #27ae60;
    text-decoration: none;
}

.cal-evaluation-links a:hover {
    text-decoration: underline;
}

.cal-coming-soon {
    background: #fef9e7;
    border: 1px dashed #f39c12;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 20px;
    font-size: 0.85rem;
    color: #7d6608;
}

.cal-coming-soon strong {
    display: block;
    margin-bottom: 4px;
    color: #b7950b;
}

.cal-field-filter {
    margin-bottom: 12px;
}

.cal-field-filter label {
    font-size: 0.85rem;
    color: #666;
    margin-right: 8px;
}

.cal-field-filter select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    background: white;
}

/* Calibration header */
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.cal-header h2 { margin: 0; }
.cal-header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}
.cal-fullscreen-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
}
.cal-fullscreen-btn:hover { background: #f0f0f0; color: #333; }

/* Fullscreen mode */
.modal-content.cal-fullscreen {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
}

/* Learn more collapsible */
.cal-learn-more {
    margin-top: 10px;
    font-size: 0.85rem;
}
.cal-learn-more summary {
    cursor: pointer;
    color: #3498db;
    font-weight: 500;
}
.cal-learn-more summary:hover { text-decoration: underline; }
.cal-learn-more ul {
    margin: 8px 0;
    padding-left: 20px;
}
.cal-learn-more li { margin-bottom: 4px; }

/* Metric tooltips */
.cal-metric-label[data-tooltip] {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted #aaa;
}
.cal-metric-label[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #2c3e50;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    white-space: normal;
    width: 220px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
    line-height: 1.4;
    font-weight: normal;
    font-style: normal;
}
.cal-metric-label[data-tooltip]:hover::after {
    opacity: 1;
}

/* Stats section */
.cal-stats {
    border-top: 1px solid #eee;
    padding-top: 16px;
    margin-top: 20px;
}
.cal-stats h3 {
    color: #2c3e50;
    margin-bottom: 6px;
    font-size: 1rem;
}
.cal-stats-info {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 10px;
}
.cal-stats canvas {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 0 auto;
}
.cal-stats-summary {
    display: flex;
    gap: 24px;
    font-size: 0.85rem;
    color: #555;
    margin-top: 10px;
    justify-content: center;
}
.cal-stats-note {
    font-size: 0.82rem;
    color: #b7950b;
    background: #fef9e7;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 10px;
}

/* Custom papers section */
.cal-custom-section {
    border-top: 1px solid #eee;
    padding-top: 16px;
    margin-top: 20px;
}
.cal-custom-section summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
}
.cal-custom-section summary:hover { color: #333; }

.cal-custom-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #eee;
    margin: 12px 0;
}
.cal-custom-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.cal-custom-tab.active {
    color: #2c3e50;
    border-bottom-color: #8e44ad;
    font-weight: 600;
}
.cal-custom-tab:hover { color: #555; }

.cal-custom-panel {
    padding: 12px 0;
}
.cal-custom-panel input[type="text"],
.cal-custom-panel textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-bottom: 8px;
    font-family: inherit;
}
.cal-custom-panel textarea { resize: vertical; }

.cal-custom-doi-row {
    display: flex;
    gap: 8px;
}
.cal-custom-doi-row input { flex: 1; margin-bottom: 0; }
.cal-custom-or {
    text-align: center;
    font-size: 0.8rem;
    color: #aaa;
    margin: 8px 0;
}
.cal-custom-status {
    font-size: 0.82rem;
    margin-top: 6px;
}
.cal-custom-status.success { color: #27ae60; }
.cal-custom-status.error { color: #e74c3c; }

.cal-import-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Zotero */
.cal-zotero-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cal-zotero-fields input {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0 !important;
}
.cal-zotero-help {
    font-size: 0.78rem;
    color: #888;
    margin-top: 6px;
}
.cal-zotero-help a { color: #3498db; }
.cal-zotero-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 10px 0;
    border: 1px solid #eee;
    border-radius: 4px;
}
.cal-zotero-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.82rem;
}
.cal-zotero-item:last-child { border-bottom: none; }
.cal-zotero-item label { flex: 1; cursor: pointer; }

/* Custom papers list */
.cal-custom-list {
    margin-top: 16px;
    border-top: 1px solid #eee;
    padding-top: 12px;
}
.cal-custom-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.cal-custom-list-header h4 { margin: 0; font-size: 0.9rem; color: #2c3e50; }
.cal-custom-clear {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 0.78rem;
    cursor: pointer;
}
.cal-custom-clear:hover { text-decoration: underline; }
.cal-custom-paper-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.82rem;
}
.cal-custom-paper-title { flex: 1; color: #333; }
.cal-custom-paper-source {
    font-size: 0.72rem;
    color: #aaa;
    text-transform: uppercase;
}
.cal-custom-remove {
    background: none;
    border: none;
    color: #ccc;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
}
.cal-custom-remove:hover { color: #e74c3c; }

/* Inline evaluation tools section */
.tools-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

.tools-toggle {
    cursor: pointer;
    padding: 12px 20px;
    margin: 0;
    border-bottom: none;
    list-style: none;
}

.tools-toggle::-webkit-details-marker {
    display: none;
}

.tools-toggle::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 8px;
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.tools-section[open] .tools-toggle::before {
    transform: rotate(90deg);
}

.tools-grid-inline {
    padding: 0 20px 20px;
}

.ai-policy-banner {
    background: #fff8e1;
    border-left: 4px solid #f39c12;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 4px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #5a4e00;
}
.ai-policy-banner a {
    color: #c77d00;
    font-weight: 600;
    text-decoration: none;
}
.ai-policy-banner a:hover {
    text-decoration: underline;
}

.policy-link-inline {
    color: #c0392b !important;
    font-weight: 600;
    text-decoration: none;
}
.policy-link-inline:hover {
    text-decoration: underline !important;
}

.tools-grid-inline .section-description {
    margin-bottom: 12px;
}

.tool-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.88rem;
    flex-wrap: wrap;
}

.tool-item:last-child {
    border-bottom: none;
}

.tool-item strong {
    color: #2c3e50;
    min-width: 160px;
    flex-shrink: 0;
}

.tool-desc {
    color: #666;
    flex: 1;
    min-width: 200px;
}

.tool-link-inline {
    color: #3498db;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.tool-link-inline:hover {
    text-decoration: underline;
}

/* Tier scale in hints */
.tier-scale {
    margin: 10px 0;
}

.tier-level {
    padding: 3px 0;
    font-size: 0.85rem;
}

/* AI disclosure checkboxes */
.ai-tools-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
}

.ai-tools-checkboxes .checkbox-label {
    font-size: 0.85rem;
}

/* --- Submit button & modal --- */
.btn-submit {
    background: #27ae60 !important;
    color: #fff !important;
    font-weight: 600;
}
.btn-submit:hover {
    background: #219a52 !important;
}

.submit-section { margin: 10px 0; }

.submit-checklist {
    margin: 12px 0;
    font-size: 0.9rem;
}
.check-item {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.check-icon { font-size: 1.1rem; width: 20px; text-align: center; }
.check-ok .check-icon { color: #27ae60; }
.check-warn .check-icon { color: #f39c12; }
.check-fail .check-icon { color: #e74c3c; }
.check-skip .check-icon { color: #bbb; }

.submit-errors {
    background: #fdf0f0;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    padding: 10px 14px;
    color: #c0392b;
    font-size: 0.85rem;
    margin: 10px 0;
}

.submit-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.btn-submit-confirm {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-submit-confirm:hover { background: #219a52; }
.btn-submit-confirm:disabled {
    background: #bbb;
    cursor: not-allowed;
}

.submit-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #eee;
    border-top-color: #27ae60;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.result-success {
    font-size: 2.5rem;
    color: #27ae60;
    text-align: center;
    display: block;
    margin: 10px 0;
}
.result-error {
    font-size: 2.5rem;
    color: #e74c3c;
    text-align: center;
    display: block;
    margin: 10px 0;
}