/* ============================================
   官混剧本评价工具 - 页面专属样式
   ============================================ */


/* 上传容器：仅作纵向排布，无边框（虚线边框移到 .sij-drop） */
.upload-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* 拖拽区：对齐图生JSON页 .sij-drop 范式（点击 / 拖入） */
.sij-drop {
    background: var(--bg-paper);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.sij-drop:hover {
    border-color: var(--primary-light);
    background: var(--primary-tint);
}
.sij-drop.dragover {            /* JS 切换，契约不可改名 */
    border-color: var(--accent);
    background: var(--primary-tint);
}
.sij-drop-main {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
}

/* URL 输入框：对齐全站输入框（清晰边框 --input-border） */
.sij-url-row {
    display: flex;
}
.sij-url-row input {
    width: 100%;
    padding: 10px 14px;
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--bg-paper);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
}
.sij-url-row input::placeholder {
    color: var(--text-muted);
}
.sij-url-row input:focus {
    outline: none;
    border-color: var(--primary-light);
}

/* 按钮行：对齐图生JSON页 .sij-actions（底部、左对齐、可换行） */
.sij-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* 工具类：隐藏（压过同特异性规则） */
.sij-hidden {
    display: none !important;
}

.upload-box input[type="file"] {
    display: none;
}

.upload-box .hint {
    color: var(--text-muted);
    margin-top: 0;
    font-size: var(--fs-sm);
}

.file-info {
    display: none;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    justify-content: space-between;
    align-items: center;
}

.file-info.show {
    display: flex;
}

.file-info .file-name {
    color: var(--text);
    font-weight: bold;
}

.file-info .file-size {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-left: 8px;
}

.file-info .btn-clear {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--fs-sm);
}

.file-info .btn-clear:hover {
    background: var(--bg-card-hover);
    border-color: var(--danger);
    color: var(--danger);
}

.loading-indicator {
    display: none;
    text-align: center;
    padding: var(--space-5);
}

.loading-indicator.show {
    display: block;
}

.loading-indicator .spinner,
.jt-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-indicator .loading-text {
    color: var(--text-muted);
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
}


/* 大区域：评分结果 + 扣分明细 同处一个卡片，分小区显示 */
.score-area {
    margin-bottom: 0;
}

/* 大区域内的两个小区：去掉各自外层卡片样式，仅作为分区 */
.result-summary {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 16px;
    box-shadow: none;
}

/* 扣分明细已并入 .result-summary 内部渲染（见下方 .deductions 区块） */

.result-summary h2 {
    color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.result-summary .total-score {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--danger);
}

.result-summary .total-score.excellent {
    color: var(--success);
}

.result-summary .total-score.qualified {
    color: var(--accent);
}

.result-summary .total-score.poor {
    color: var(--danger);
}

/* 非官方角色过多（>5）：分数/等级不可信，显示「无 / 未知」 */
.result-summary .total-score.unknown {
    color: var(--text-muted);
}

.score-bar-wrap {
    margin: var(--space-4) 0;
    height: 12px;
    background: var(--bg-paper);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.score-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
    background: linear-gradient(90deg, var(--danger), var(--accent), var(--success));
}

/* 得分条上的合格/优秀阈值刻度线 */
.score-bar-wrap .score-threshold {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--threshold-line);
    transform: translateX(-1px);
}

/* 得分条下方的刻度文字（0 / 60·合格 / 80·优秀 / 100） */
.score-bar-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

/* 评级文字（优秀/合格/欠佳），颜色随评级变化 */
.score-rating {
    display: inline-block;
    margin-top: 2px;
    font-size: var(--fs-md);
    font-weight: bold;
}

.score-rating.excellent {
    color: var(--success);
}

.score-rating.qualified {
    color: var(--accent);
}

.score-rating.poor {
    color: var(--danger);
}

.score-rating.unknown {
    color: var(--text-muted);
}

.result-summary .role-list {
    margin-top: var(--space-3);
    max-height: 200px;
    overflow-y: auto;
}

.result-summary .role-list .role-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 3px;
    border-radius: 10px;
    font-size: var(--fs-xs);
    border: none;
    background: rgba(124, 92, 255, 0.16);
    color: var(--text-muted);
}

/* 扣分明细（并入“评分结果”统一渲染，卡片式，参考“剧本查重”列表样式） */
.deductions {
    margin-top: var(--space-4);
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.deductions-title {
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 700;
    margin-bottom: 12px;
}

.deduction-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deduction-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-3);
    background: var(--bg-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: box-shadow 0.2s, transform 0.1s;
}

.deduction-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

.deduction-rank {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: bold;
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.deduction-main {
    flex: 1 1 auto;
    min-width: 0;
}

.deduction-name {
    font-weight: bold;
    color: var(--text);
    margin-bottom: 4px;
}

/* 原因类型徽标：参考“剧本查重”中 similar-source 来源标签样式 */
.deduction-badge {
    margin-left: 8px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--accent);
    background: var(--primary-tint);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.deduction-meta {
    font-size: var(--fs-s);
    color: var(--text-muted);
    margin-bottom: 8px;
}

.deduction-meta .ded-pair {
    margin: 3px 0;
    line-height: 1.6;
}

/* 角色对中的单个角色：以 chip 形式呈现（参考角色列表 role-tag 风格） */
.deduction-meta .ded-chip {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: 10px;
    background: var(--primary-tint);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--fs-md);
}

.deduction-meta .ded-ch {
    color: var(--text-muted);
    font-weight: bold;
    margin: 0 var(--space-1);
}

/* 扣分进度条：参考“剧本查重”相似度条，用危险色渐变表示扣分占比 */
.deduction-bar-wrap {
    height: 8px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
}

.deduction-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    background: linear-gradient(90deg, var(--danger), rgba(224, 168, 0, 0.9));
}

.deduction-points {
    flex: 0 0 auto;
    width: 66px;
    text-align: right;
    font-weight: bold;
    font-size: var(--fs-lg);
    color: var(--danger);
    white-space: nowrap;
}

.deduction-points.muted {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* 仅本页：收紧页脚与上方内容的间距（其余页面保持原 40px） */
#site-footer {
    margin-top: var(--space-4);
}

/* 非官方角色提示（X>0 时显示） */
.nonofficial-tip {
    margin: 12px 0 0;
    font-size: var(--fs-sm);
    color: #5c4500;
    background: rgba(224, 168, 0, 0.22);
    border: 1px solid rgba(224, 168, 0, 0.65);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-weight: 600;
}

/* 角色列表中的非官方角色标签（与 getRoleTagStyle 内联样式呼应） */
.role-tag.nonofficial {
    background: rgba(224, 168, 0, 0.18);
    color: #5c4500;
    border-color: rgba(224, 168, 0, 0.6);
}

/* ============================================
   相似剧本匹配区（展示在得分区域下方）
   ============================================ */
.similar-block {
    margin-top: var(--space-5);
}

.similar-block h3 {
    color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.similar-sub {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-muted);
}

.similar-uploadinfo {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.similar-uploadinfo strong {
    color: var(--text);
}

.similar-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.similar-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-3);
    background: var(--bg-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: box-shadow 0.2s, transform 0.1s;
}

.similar-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

.similar-rank {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: bold;
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.similar-main {
    flex: 1 1 auto;
    min-width: 0;
}

.similar-name {
    font-weight: bold;
    color: var(--text);
    margin-bottom: 4px;
}

.similar-source {
    margin-left: 8px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--accent);
    background: var(--primary-tint);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
}

.similar-meta {
    font-size: var(--fs-s);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.similar-bar-wrap {
    height: 8px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
}

.similar-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    background: linear-gradient(90deg, var(--accent), var(--success));
}

.similar-pct {
    flex: 0 0 auto;
    width: 64px;
    text-align: right;
    font-weight: bold;
    font-size: var(--fs-lg);
    color: var(--success);
}

/* 查重结果：被测 / 结果剧本各自独有角色清单 */
.similar-only {
    margin-top: 6px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-muted);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.similar-only::before {
    content: "";
}
.similar-none {
    color: var(--dim);
    font-style: italic;
}

/* 剧本查重「更多」按钮：与全站主按钮 .search-btn（如「🔍 搜索符合条件的角色」）同款深紫风格。
   ⚠️ .search-btn 仅定义在 find-edition.css（本页未加载），故此处在 score-calculator.css 内
   复刻其配色 / 圆角 / 字号 / 字重 / 动效，仅额外做「居中 + 最小宽度」的布局差异。 */
.similar-more {
    display: block;
    margin: var(--space-4) auto 0;
    min-width: 300px;
    padding: var(--space-4);
    font-size: clamp(1rem, 3.5vw, 1.125rem);
    font-weight: 600;
    line-height: 1.2;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
}

.similar-more:hover,
.similar-more:active {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* 与 theme.css 中 .search-btn:focus-visible 一致的可聚焦样式 */
.similar-more:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.similar-empty {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: var(--space-3) 0;
}

/* 暗色主题下：金色非官方提示需改用浅金文字 + 更深金底，否则在深底上不可读 */
[data-theme="dark"] .nonofficial-tip {
    color: #f0c850;
    background: rgba(224, 168, 0, 0.14);
    border-color: rgba(224, 168, 0, 0.5);
}
[data-theme="dark"] .role-tag.nonofficial {
    background: rgba(224, 168, 0, 0.14);
    color: #f0c850;
    border-color: rgba(224, 168, 0, 0.5);
}

/* ============================================
   P0-1 补丁：评分页响应式断点（2026-08-24）
   原文件无任何 @media，360px 下大数字/扣分明细易溢出。
   768/480 两档，与全站断点体系一致；仅末尾追加。
   ============================================ */
@media (max-width: 768px) {
    .sij-drop {
        padding: var(--space-5) var(--space-4);
    }
    /* 窄屏：更多按钮撑满容器，避免极小宽度下溢出 */
    .similar-more {
        width: 100%;
        min-width: 0;
    }
    .result-summary .total-score {
        font-size: 2.1rem;
    }
    /* 扣分/相似条目：窄屏下标题主体换行独占一行，序号与分值两端对齐 */
    .deduction-item,
    .similar-item {
        flex-wrap: wrap;
        gap: 8px 12px;
    }
    .deduction-main,
    .similar-main {
        flex-basis: 100%;
        order: 3;
    }
    .deduction-points,
    .similar-pct {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .sij-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .sij-actions .violet-button {
        width: 100%;
    }
    .sij-url-row input {
        font-size: 16px;          /* 防 iOS 聚焦缩放 */
    }
    .upload-box .hint {
        font-size: var(--fs-sm);
    }
    .deduction-meta {
        font-size: var(--fs-xs);
    }
    .deduction-badge {
        display: inline-block;
        margin: 2px 0 0;
    }
    .similar-source {
        margin-left: 0;
    }
    .score-bar-scale {
        font-size: var(--fs-2xs);
    }
}