/* ------------------------------------------------------------
* 1. 设计令牌（Design Tokens）
*    所有变量收敛到根节点，方便主题切换
* ------------------------------------------------------------ */
.cci-root {
    --cci-cell-size: 45px;
    --cci-line: #dedede;
    --cci-line-light: #eceff3;
    --cci-text: #282828;
    --cci-text-muted: #61666c;
    --cci-text-soft: #6b7480;
    --cci-blue: #0086d2;
    --cci-red: #e81b27;
    --cci-green: #52c41a;
    --cci-amber: #faad14;
    --cci-yellow: #ffde08;
    --cci-surface: #ffffff;
    --cci-surface-soft: #f7f9fc;
    --cci-shell-width: min(1117px, calc(100vw - 48px));

    width: 100%;
    height: 100vh;
    min-width: 0;
    min-height: 0;
    color: var(--cci-text);
    background: radial-gradient(circle at 18% 8%, #ffde082e, #0000 28%),
    linear-gradient(#fffdf2, #eef6ff 42%, #f5f8fb);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
 * 2. 布局骨架
 * ------------------------------------------------------------ */
.cci-practice {
    width: var(--cci-shell-width);
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 10px 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ------------------------------------------------------------
 * 3. 练习舞台
 * ------------------------------------------------------------ */
.cci-stage {
    flex: 1;
    width: 100%;
    min-height: 0;
    padding: 12px;
    background: var(--cci-surface);
    border: 1px solid rgba(222, 222, 222, .72);
    border-radius: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding: 16px;
    scrollbar-width: none;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.cci-stage::-webkit-scrollbar {
    display: none;
}

/* 段落块 */
.cci-block + .cci-block {
    margin-top: 8px;
}

.cci-block.is-future {
    opacity: .58;
}

.cci-block.is-past {
    opacity: .86;
}

/* 行 */
.cci-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--cci-cell-size));
    justify-content: start;
}

.cci-row--typed {
    margin-top: -1px;
}

/* ------------------------------------------------------------
 * 4. 单元格（田字格模式）
 * ------------------------------------------------------------ */
.cci-cell {
    width: var(--cci-cell-size);
    height: var(--cci-cell-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 25px;
    line-height: 1;
    color: var(--cci-text);
    background: var(--cci-surface);
    border-top: 1px solid var(--cci-line);
    border-left: 1px solid var(--cci-line);
}

.cci-cell:last-child {
    border-right: 1px solid var(--cci-line);
}

.cci-row--typed .cci-cell {
    border-bottom: 1px solid var(--cci-line);
}

/* 田字格虚线导引 */
.cci-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cci-guide::before,
.cci-guide::after {
    content: "";
    position: absolute;
}

.cci-guide::before {
    border-left: 1px dashed var(--cci-line);
    top: 0;
    bottom: 0;
    left: 50%;
}

.cci-guide::after {
    border-top: 1px dashed var(--cci-line);
    top: 50%;
    left: 0;
    right: 0;
}

.cci-char {
    position: relative;
    z-index: 1;
}

/* 输入结果着色 */
.cci-cell.is-right {
    color: var(--cci-blue);
}

.cci-cell.is-error {
    color: var(--cci-red);
}

/* 光标（田字格模式：底部短横线） */
.cci-root.cci-focused .cci-cell.is-active::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 13px;
    right: 13px;
    bottom: 6px;
    height: 3px;
    background: var(--cci-blue);
    border-radius: 99px;
    animation: cci-caret 1.1s steps(2, start) infinite;
}

.cci-root.cci-composing .cci-cell.is-active::after {
    animation: none;
    opacity: .35;
}

/* ------------------------------------------------------------
 * 5. 横线模式
 *    覆盖田字格的格子与导引，字符落在一条共用底线上
 * ------------------------------------------------------------ */
.cci-root.cci-mode-line {
    --cci-cell-size: 44px;
}

.cci-root.cci-mode-line .cci-row--typed {
    margin-top: 0;
}

.cci-root.cci-mode-line .cci-cell {
    background: transparent;
    border: 0;
    height: var(--cci-cell-size);
    font-size: 26px;
    padding: 0 0 4px;
}

.cci-root.cci-mode-line .cci-row--target .cci-cell {
    height: 30px;
    padding-bottom: 0;
    font-size: 22px;
    color: var(--cci-text-soft);
}

.cci-root.cci-mode-line .cci-row--typed .cci-cell {
    border-bottom: 1px solid var(--cci-line);
}

.cci-root.cci-mode-line .cci-guide {
    display: none;
}

/* 光标（横线模式：竖线） */
.cci-root.cci-mode-line.cci-focused .cci-cell.is-active::after {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: 2px;
    height: 26px;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    animation: cci-caret 1.1s steps(2, start) infinite;
}

/* ------------------------------------------------------------
 * 6. 隐藏的 IME 输入源
 *    由 JS 动态定位到真实单元格坐标
 * ------------------------------------------------------------ */
.cci-ime-source {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    resize: none;
    opacity: .01;
    overflow: hidden;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    pointer-events: none;
    z-index: 1;
    font-size: 24px;
    transform: none;
}

/* ------------------------------------------------------------
 * 7. IME 组合提示气泡
 * ------------------------------------------------------------ */
.cci-composition {
    position: fixed;
    z-index: 120;
    display: none;
    min-width: 44px;
    width: max-content;
    padding: 3px 6px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: #1a1c1c;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-100%);
    box-shadow: 0 4px 14px rgba(26, 28, 28, .20);
}

/* ------------------------------------------------------------
 * 8. 状态栏
 * ------------------------------------------------------------ */
.cci-status {
    width: 100%;
    min-height: 76px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .96);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    font-size: 14px;
    color: var(--cci-text-muted);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

/* 进度条 */
.cci-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 8px 8px 0 0;
    background: #e7e7e7;
    overflow: hidden;
}

.cci-progress-bar {
    width: 100%;
    height: 100%;
    background: var(--cci-yellow);
    transform: scaleX(0);
    transform-origin: 0;
    transition: transform .18s ease-out;
}

.cci-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

/* 统计区 */
.cci-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.cci-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 0;
    font-size: 13px;
    white-space: nowrap;
}

.cci-stat strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--cci-text);
    font-variant-numeric: tabular-nums;
}

.cci-stat.is-urgent,
.cci-stat.is-urgent strong {
    color: var(--cci-red);
}

.cci-stat.is-good,
.cci-stat.is-good strong {
    color: var(--cci-green);
}

/* 控制区 */
.cci-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* 通用按钮（状态栏内） */
.cci-controls > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    font-size: 14px;
    color: #1a1c1c;
    background: var(--cci-yellow);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.cci-controls > button:hover {
    filter: brightness(.95);
}

.cci-controls > button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* 分段控件（模式切换） */
.cci-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--cci-surface);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
}

.cci-segmented button {
    min-width: 52px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    color: var(--cci-text-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.cci-segmented button.is-selected {
    color: var(--cci-text);
    background: var(--cci-yellow);
    font-weight: 600;
}

/* 开关 */
.cci-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: normal;
    color: var(--cci-text-muted);
    background: var(--cci-surface);
    border: 1px solid var(--cci-line);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    margin: 0;
}

.cci-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cci-blue);
}

/* 提示 */
.cci-tip {
    margin-top: 6px;
    font-size: 13px;
    color: var(--cci-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ------------------------------------------------------------
 * 9. 状态修饰类（挂在根节点）
 * ------------------------------------------------------------ */
.cci-root.cci-paused .cci-stage {
    opacity: .92;
}

/* ------------------------------------------------------------
 * 10. 动画
 * ------------------------------------------------------------ */
@keyframes cci-caret {
    50% {
        opacity: 0;
    }
}

/* ------------------------------------------------------------
 * 11. 结果面板（独立作用域，可被宿主页面复用）
 * ------------------------------------------------------------ */
.cci-result-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 22, 32, .5);

    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}

.cci-result-overlay.is-open {
    display: flex;
    opacity: 1;
    visibility: visible;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity .24s ease, visibility .24s ease,
    -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}

/* 出场快速淡出 */
.cci-result-overlay.is-closing {
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}

.cci-result-overlay.is-open .cci-result-grade {
    animation: cci-badge-pop .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: 80ms;
}
@keyframes cci-badge-pop {
    0%   { opacity: 0; transform: scale(.5); }
    60%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

/* 优秀等级加一道光扫过 */
.cci-result-grade.is-excellent { position: relative; overflow: hidden; }
.cci-result-grade.is-excellent::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(
            100deg,
            transparent 0%,
            rgba(255, 255, 255, .55) 50%,
            transparent 100%
    );
    transform: skewX(-18deg);
    opacity: 0;
}
.cci-result-overlay.is-open .cci-result-grade.is-excellent::after {
    animation: cci-shine 1.1s ease 620ms;
}
@keyframes cci-shine {
    0%   { left: -60%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

/* 失败等级轻微抖动，暗示需要重来 */
.cci-result-overlay.is-open .cci-result-grade.is-fail {
    animation: cci-badge-pop .5s cubic-bezier(.34, 1.56, .64, 1) forwards,
    cci-shake .5s ease 560ms;
}
@keyframes cci-shake {
    0%, 100% { transform: translateX(0) scale(1); }
    20%      { transform: translateX(-4px) scale(1); }
    40%      { transform: translateX(4px) scale(1); }
    60%      { transform: translateX(-3px) scale(1); }
    80%      { transform: translateX(3px) scale(1); }
}

/* L4 指标卡片：内部数字滚动时的容器保护 */
.cci-metric-value {
    font-variant-numeric: tabular-nums; /* 防止数字变化时抖动 */
}

/* 高亮指标轻微脉动，突出达成项 */
.cci-result-overlay.is-open .cci-metric.is-highlight {
    position: relative;
}
.cci-result-overlay.is-open .cci-metric.is-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 0 rgba(255, 222, 8, .55);
    animation: cci-pulse 1.6s ease 900ms;
    pointer-events: none;
}
@keyframes cci-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 222, 8, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 222, 8, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 222, 8, 0); }
}

/* L6 按钮 hover 微交互 */
.cci-result-actions .btn {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cci-result-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.cci-result-actions .btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 关闭按钮旋转反馈 */
.cci-result-close {
    transition: background-color .18s ease, transform .24s ease;
}
.cci-result-close:hover {
    transform: rotate(90deg);
}

/* 减弱动效偏好：全部直接到位 */
@media (prefers-reduced-motion: reduce) {
    .cci-result-overlay,
    .cci-result-card,
    .cci-anim,
    .cci-result-grade {
        animation: none !important;
        transition: opacity .12s ease !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .cci-result-grade.is-excellent::after { display: none; }
}

.cci-result-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    padding: 26px 28px 22px;
    background: #fff;
    border-radius: 14px;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    animation: cci-result-in .28s cubic-bezier(.22, .61, .36, 1);

    opacity: 0;
    transform: translateY(20px) scale(.94);
    transition: opacity .3s ease, transform .34s cubic-bezier(.34, 1.56, .64, 1);
}

.cci-result-overlay.is-open .cci-result-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 通用分层元素：初始隐藏，指定 delay 后上浮 */
.cci-anim {
    opacity: 0;
    transform: translateY(14px);
}
.cci-result-overlay.is-open .cci-anim {
    animation: cci-layer-in .42s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: var(--cci-delay, 0ms);
}
@keyframes cci-layer-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cci-result-in {
    from {
        transform: translateY(16px) scale(.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.cci-result-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--cci-text-soft, #6b7480);
    background: #f2f4f7;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.cci-result-close:hover {
    background: #e7ebf0;
}

.cci-result-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.cci-result-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 28px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #ff4d4f;
    border-radius: 999px;

    transform-origin: center;
    opacity: 0;
    transform: scale(.5);
}

.cci-result-grade.is-excellent {
    background: #52c41a;
}

.cci-result-grade.is-good {
    background: #1890ff;
}

.cci-result-grade.is-pass {
    background: #faad14;
}

.cci-result-grade.is-fail {
    background: #ff4d4f;
}

.cci-result-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #282828;
}

.cci-result-subtitle {
    margin: 0;
    font-size: 13px;
    color: #6b7480;
    text-align: center;
}

.cci-result-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.cci-metric {
    padding: 12px 10px;
    background: #f7f9fc;
    border-radius: 10px;
    text-align: center;
}

.cci-metric.is-highlight {
    background: #fff8db;
}

.cci-metric-label {
    margin-bottom: 4px;
    font-size: 12px;
    color: #6b7480;
}

.cci-metric-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #1f2733;
    font-variant-numeric: tabular-nums;
}

.cci-metric-value small {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7480;
}

.cci-result-suggestions {
    padding: 14px 16px;
    margin-bottom: 18px;
    background: #f7f9fc;
    border-radius: 10px;
}

.cci-result-suggestions h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2733;
}

.cci-result-suggestions ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: #4a5361;
}

.cci-result-suggestions li + li {
    margin-top: 4px;
}

.cci-result-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cci-result-actions .btn {
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
}

/* ------------------------------------------------------------
 * 12. 响应式
 * ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .cci-root {
        --cci-cell-size: 40px;
    }
}

@media (max-width: 760px) {
    .cci-root {
        --cci-cell-size: 42px;
        --cci-shell-width: calc(100vw - 24px);
        min-height: 420px;
    }

    .cci-practice {
        gap: 10px;
        padding: 12px 0;
    }

    .cci-stage {
        padding: 10px;
    }

    .cci-cell {
        font-size: 21px;
    }

    .cci-status {
        padding: 14px;
    }

    .cci-status-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cci-stats {
        gap: 12px;
    }

    .cci-stat {
        font-size: 12px;
    }

    .cci-stat strong {
        font-size: 16px;
    }

    .cci-controls {
        justify-content: space-between;
    }

    .cci-controls > button,
    .cci-toggle,
    .cci-segmented button {
        min-height: 40px;
    }

    .cci-tip {
        display: none;
    }

    .cci-result-card {
        padding: 22px 18px 18px;
    }

    .cci-result-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .cci-metric-value {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cci-block,
    .cci-cell.is-active::after,
    .cci-result-card {
        scroll-behavior: auto;
        animation: none;
    }
}