/* ============================================================
   flash.css —— FLASH 工具页专属样式
   橙色强调：底 #fff7ed 字 #c2680a 框 #fed7aa；
   hover 底 #ffedd5 字 #92400e；
   响应式 768px 断点。
   ============================================================ */

.page-flash .container > .card { margin-bottom: 18px; }

/* 软件界面预览：截图走本站路径（CSP img-src 'self'），窄屏等比缩放不溢出。 */
.page-flash .flash-preview .card-body { text-align: center; }
.page-flash .flash-preview-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mw-card-border);
    border-radius: var(--mw-radius-sm);
    background: var(--mw-card-bg);
}
.page-flash .flash-preview-caption {
    margin: 10px 0 0;
    color: var(--mw-muted);
    font-size: .82em;
    line-height: 1.6;
}

.page-flash .flash-tool-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-flash .flash-file { flex: 1; min-width: 200px; }
.page-flash .flash-file-name { color: var(--mw-heading); font-weight: 500; font-size: 1em; word-break: break-all; }
.page-flash .flash-file-size { color: var(--mw-muted); font-size: .82em; margin-top: 4px; }

.page-flash .btn-orange {
    background: var(--mw-accent-orange-bg);
    color: var(--mw-accent-orange-fg);
    border: 1px solid var(--mw-accent-orange-border);
    padding: 9px 22px;
    border-radius: var(--mw-radius-sm);
    font-size: .95em;
    cursor: pointer;
    display: inline-block;
    transition: all .15s;
    text-decoration: none;
}
.page-flash .btn-orange:hover {
    background: var(--mw-accent-orange-bg-hover);
    color: var(--mw-accent-orange-fg-hover);
    border-color: #fdba74;
}

.page-flash .flash-empty {
    padding: 22px 12px;
    text-align: center;
    color: var(--mw-empty);
    background: var(--mw-accent-orange-bg);
    border: 1px dashed var(--mw-accent-orange-border);
    border-radius: var(--mw-radius-sm);
    flex: 1;
    width: 100%;
    font-size: .95em;
}
.page-flash .flash-empty-sm { padding: 12px; font-size: .9em; }
.page-flash .flash-empty-hint { text-align: center; color: var(--mw-muted); font-size: .85em; margin-top: 8px; }

.page-flash .flash-buy .card-header { color: var(--mw-accent-orange-fg); }
.page-flash .flash-buy-desc { color: var(--mw-text); margin-bottom: 12px; line-height: 1.75; font-size: .95em; }

.page-flash .flash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .page-flash .flash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .page-flash .flash-grid { grid-template-columns: 1fr; } }

.page-flash .flash-tile {
    background: var(--mw-accent-orange-bg);
    border: 1px solid var(--mw-accent-orange-border);
    border-radius: var(--mw-radius-sm);
    padding: 16px 14px;
    text-align: center;
    transition: all .18s ease;
}
.page-flash .flash-tile:hover {
    background: var(--mw-accent-orange-bg-hover);
    border-color: #fdba74;
    transform: translateY(-1px);
}
.page-flash .flash-tile-icon { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.page-flash .flash-tile-title { color: var(--mw-accent-orange-fg); font-weight: 600; margin-bottom: 4px; font-size: .95em; }
.page-flash .flash-tile:hover .flash-tile-title { color: var(--mw-accent-orange-fg-hover); }
.page-flash .flash-tile-desc { color: var(--mw-muted); font-size: .82em; line-height: 1.55; }

.page-flash .flash-steps {
    list-style: decimal;
    padding-left: 22px;
    color: var(--mw-text);
    line-height: 1.9;
    font-size: .95em;
}
.page-flash .flash-steps li { margin-bottom: 4px; }
.page-flash .flash-steps li::marker { color: var(--mw-accent-orange-fg); font-weight: 600; }

/* ============================================================
   用积分购买授权码（#buy 区块，积分消耗制）
   走品牌蓝而不是橙色：橙色归「购买使用时长」外链那一类，
   这里是站内积分扣费，必须与站内其它积分元素同一口径。
   ============================================================ */
.page-flash .flash-points .card-header { color: var(--mw-primary); }

.page-flash .flash-buy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.page-flash .flash-buy-label { color: var(--mw-muted); font-size: .85em; }
.page-flash .flash-buy-select {
    padding: 9px 12px;
    border: 1px solid var(--mw-search-border);
    border-radius: var(--mw-radius-sm);
    background: #fff;
    color: var(--mw-text);
    font-size: 14px;
    font-family: inherit;
    max-width: 100%;
}
.page-flash .flash-buy-select:focus {
    outline: none;
    border-color: var(--mw-primary);
    box-shadow: 0 0 0 3px rgba(42, 109, 217, .10);
}
.page-flash .flash-buy-balance { color: var(--mw-muted); font-size: .9em; margin: 0 0 12px; }
.page-flash .flash-buy-balance strong { color: var(--mw-primary); font-variant-numeric: tabular-nums; }
.page-flash .flash-buy-tip { color: var(--mw-muted); font-size: .85em; line-height: 1.6; }

.page-flash .flash-buy-error {
    color: var(--mw-danger);
    font-size: 13px;
    min-height: 18px;
    margin: 8px 0 2px;
    line-height: 1.6;
    word-break: break-all;
}

.page-flash .flash-buy-result {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--mw-primary-soft-bg);
    border: 1px solid var(--mw-download-border);
    border-radius: var(--mw-radius);
}
/* 幂等重放（本次没有重复扣分，只是找回上次那张码）不是「新一次成功」：
   面板降为中性提示态（任务 #26 缺陷4）。只复用既有中性变量，不引入新配色，
   尺寸与换行规则不变，375px 窄屏不会因此破版。 */
.page-flash .flash-buy-result.is-neutral {
    background: var(--mw-card-header-bg);
    border-color: var(--mw-card-border);
}
.page-flash .flash-buy-result.is-neutral .flash-buy-code { color: var(--mw-menu-fg); }
.page-flash .flash-buy-result-cap { color: var(--mw-muted); font-size: .8em; margin-bottom: 6px; }
.page-flash .flash-buy-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 1.05em;
    color: var(--mw-heading);
    word-break: break-all;
}
.page-flash .flash-buy-copy {
    padding: 4px 12px;
    border-radius: var(--mw-radius-xs);
    border: 1px solid var(--mw-download-border);
    background: #fff;
    color: var(--mw-primary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.page-flash .flash-buy-copy:hover { background: var(--mw-primary-soft-bg-hover); }
.page-flash .flash-buy-copy:disabled { color: #9db6de; background: #f1f5fb; border-color: #e2e9f4; cursor: not-allowed; }

.page-flash .flash-buy-meta { margin-top: 10px; color: var(--mw-muted); font-size: .85em; line-height: 1.7; }
.page-flash .flash-buy-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}
.page-flash .flash-buy-again {
    padding: 7px 14px;
    border-radius: var(--mw-radius-sm);
    border: 1px solid var(--mw-download-border);
    background: #fff;
    color: var(--mw-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.page-flash .flash-buy-again:hover { background: var(--mw-primary-soft-bg-hover); }
.page-flash .flash-buy-account { font-size: 13px; }
.page-flash .flash-buy-alt { margin-top: 12px; color: var(--mw-muted); font-size: .85em; line-height: 1.7; }

@media (max-width: 520px) {
    .page-flash .flash-buy-row { flex-direction: column; align-items: flex-start; }
    .page-flash .flash-buy-select { width: 100%; }
    .page-flash .flash-buy-code { font-size: .98em; }
}
