/* =========================================================
   company-deregistration-cost · 公司注销费用与流程计算器
   设计语言：印章红灰（石板灰 #3A4550 / 印章朱红 #C0392B / 宣纸灰 #F6F5F2）
   ========================================================= */
.cdc-page {
    --cdc-ink: #232C34;
    --cdc-ink-2: #4C5A66;
    --cdc-ink-3: #7E8C99;
    --cdc-slate: #3A4550;
    --cdc-slate-deep: #262E37;
    --cdc-red: #C0392B;
    --cdc-red-deep: #A93226;
    --cdc-green: #2E7D4F;
    --cdc-bg: #F6F5F2;
    --cdc-surface: #FFFFFF;
    --cdc-surface-2: #FAF9F7;
    --cdc-surface-3: #EFEEE9;
    --cdc-line: #E0DED7;
    --cdc-shadow: 0 10px 30px rgba(58, 69, 80, .1);
    --cdc-radius: 16px;

    margin: 0 auto 64px;
    max-width: 1200px;
    padding: 8px 4px 0;
    color: var(--cdc-ink);
    line-height: 1.65;
}
:root[data-theme="dark"] .cdc-page {
    --cdc-ink: #E8EAED;
    --cdc-ink-2: #A8B2BC;
    --cdc-ink-3: #7A8794;
    --cdc-slate: #46525E;
    --cdc-slate-deep: #2C3640;
    --cdc-red: #E5715F;
    --cdc-red-deep: #D45C4C;
    --cdc-green: #4CAF7D;
    --cdc-bg: #101418;
    --cdc-surface: #181E24;
    --cdc-surface-2: #1D242B;
    --cdc-surface-3: #232C34;
    --cdc-line: #2C3640;
    --cdc-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}

/* ---------- 首屏 ---------- */
.cdc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 26px;
    align-items: stretch;
    background:
        radial-gradient(900px 380px at 110% 110%, rgba(192, 57, 43, .25), transparent 60%),
        linear-gradient(135deg, var(--cdc-slate) 0%, var(--cdc-slate-deep) 100%);
    border-radius: 22px;
    padding: 34px 38px 30px;
    color: #EEF0F2;
    box-shadow: var(--cdc-shadow);
    position: relative;
    overflow: hidden;
}
.cdc-hero::after {
    content: '注销';
    position: absolute;
    right: 26px;
    top: 18px;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(192, 57, 43, .5);
    border-radius: 12px;
    color: rgba(192, 57, 43, .55);
    font-size: 30px;
    font-weight: 800;
    transform: rotate(-12deg);
    letter-spacing: .2em;
    pointer-events: none;
}
.cdc-hero-copy { position: relative; z-index: 1; }
.cdc-kicker {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(192, 57, 43, .16);
    border: 1px solid rgba(192, 57, 43, .5);
    font-size: 12.5px;
    letter-spacing: .1em;
    color: #F0B2A8;
}
.cdc-hero h1 { margin: 14px 0 10px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; }
.cdc-hero-sub { margin: 0 0 16px; max-width: 620px; font-size: 15.5px; line-height: 1.8; color: rgba(238, 240, 242, .85); }
.cdc-hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.cdc-hero-chips li {
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 12.5px;
}
.cdc-hero-readout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(192, 57, 43, .45);
    border-radius: var(--cdc-radius);
    padding: 22px 24px;
}
.cdc-readout-label { font-size: 12.5px; letter-spacing: .08em; color: #F0B2A8; }
.cdc-readout-num { font-size: clamp(30px, 3.8vw, 42px); font-weight: 800; color: #F3B7AC; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cdc-readout-sub { font-size: 13.5px; color: rgba(238, 240, 242, .88); }
.cdc-readout-meta { font-size: 12.5px; color: rgba(238, 240, 242, .6); }
.cdc-readout-tip {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, .18);
    font-size: 11.5px;
    color: rgba(238, 240, 242, .55);
}

/* ---------- 主区 ---------- */
.cdc-main {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}
.cdc-panel {
    background: var(--cdc-surface);
    border: 1px solid var(--cdc-line);
    border-radius: var(--cdc-radius);
    padding: 20px 22px;
    box-shadow: var(--cdc-shadow);
}
.cdc-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cdc-step {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--cdc-slate);
    color: #E5E9ED;
    font-size: 12px;
    font-weight: 700;
}
.cdc-panel-head h2 { margin: 0; font-size: 16.5px; }

.cdc-type-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cdc-type {
    padding: 11px 8px;
    border: 1.5px solid var(--cdc-line);
    border-radius: 11px;
    background: var(--cdc-surface-2);
    color: var(--cdc-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.cdc-type:hover { border-color: var(--cdc-red); }
.cdc-type.is-active {
    border-color: var(--cdc-red);
    background: rgba(192, 57, 43, .07);
    color: var(--cdc-ink);
    box-shadow: inset 0 0 0 1px rgba(192, 57, 43, .3);
}
.cdc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.cdc-field label { display: block; font-size: 13px; font-weight: 600; color: var(--cdc-ink-2); margin-bottom: 6px; }
.cdc-field select, .cdc-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--cdc-line);
    border-radius: 10px;
    background: var(--cdc-surface);
    color: var(--cdc-ink);
    font-size: 14px;
    outline: none;
}
.cdc-field select:focus, .cdc-field input:focus { border-color: var(--cdc-red); }

.cdc-state { margin-top: 14px; display: grid; gap: 7px; }
.cdc-state-label { font-size: 13px; font-weight: 600; color: var(--cdc-ink-2); margin-bottom: 2px; }
.cdc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cdc-ink); cursor: pointer; padding: 7px 11px; border-radius: 9px; background: var(--cdc-surface-2); border: 1px solid var(--cdc-line); }
.cdc-check input { width: 15px; height: 15px; accent-color: var(--cdc-red); }
.cdc-check:has(input:checked) { border-color: var(--cdc-red); background: rgba(192, 57, 43, .06); }

.cdc-actions { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.cdc-btn {
    flex: 1;
    min-width: 88px;
    padding: 11px 8px;
    border: 1.5px solid var(--cdc-line);
    border-radius: 12px;
    background: var(--cdc-surface);
    color: var(--cdc-ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s, border-color .15s;
}
.cdc-btn:hover { transform: translateY(-1px); border-color: var(--cdc-red); }
.cdc-btn--primary { flex: 1.4; border: none; background: linear-gradient(135deg, var(--cdc-red), var(--cdc-red-deep)); color: #FFF; }

/* ---------- 结果 ---------- */
.cdc-result {
    background: linear-gradient(160deg, var(--cdc-surface) 0%, var(--cdc-surface-2) 100%);
    border: 1.5px solid var(--cdc-red);
    border-radius: var(--cdc-radius);
    padding: 20px 22px;
    box-shadow: var(--cdc-shadow);
}
.cdc-result-head { display: flex; justify-content: space-between; align-items: center; }
.cdc-result-head h2 { margin: 0; font-size: 17px; }
.cdc-path-tag { padding: 4px 12px; border-radius: 999px; background: var(--cdc-slate); color: #E5E9ED; font-size: 12px; font-weight: 600; }
.cdc-cost { margin-top: 14px; text-align: center; padding: 14px 0 12px; border-radius: 12px; background: var(--cdc-surface-3); }
.cdc-cost-label { display: block; font-size: 12.5px; color: var(--cdc-ink-3); }
.cdc-cost b { display: block; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; color: var(--cdc-red); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cdc-cost-sub { font-size: 12.5px; color: var(--cdc-ink-3); }

.cdc-fees { margin-top: 14px; display: grid; gap: 6px; }
.cdc-fee-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--cdc-surface-2);
    border: 1px solid var(--cdc-line);
    font-size: 13px;
    color: var(--cdc-ink-2);
}
.cdc-fee-row b { margin-left: auto; color: var(--cdc-ink); font-variant-numeric: tabular-nums; }
.cdc-fee-row.cdc-fee-row--total { background: var(--cdc-surface-3); border-color: var(--cdc-red); font-weight: 700; }
.cdc-fee-row.cdc-fee-row--total b { color: var(--cdc-red); font-size: 15px; }

.cdc-warn {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(192, 57, 43, .4);
    background: rgba(192, 57, 43, .07);
    color: var(--cdc-red);
    font-size: 13px;
    line-height: 1.75;
}

.cdc-timeline-panel {
    margin-top: 16px;
    background: var(--cdc-surface);
    border: 1px solid var(--cdc-line);
    border-radius: var(--cdc-radius);
    padding: 18px 20px;
    box-shadow: var(--cdc-shadow);
}
.cdc-timeline-panel h2 { margin: 0 0 14px; font-size: 16px; }
.cdc-timeline { display: grid; gap: 12px; }
.cdc-tl-path { border-left: 3px solid var(--cdc-line); padding-left: 16px; }
.cdc-tl-path--simple { border-color: var(--cdc-green); }
.cdc-tl-path--normal { border-color: var(--cdc-red); }
.cdc-tl-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cdc-tl-head b { font-size: 14px; color: var(--cdc-ink); }
.cdc-tl-head span { font-size: 12px; color: var(--cdc-ink-3); }
.cdc-tl-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.cdc-tl-step {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--cdc-surface-3);
    font-size: 12px;
    color: var(--cdc-ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cdc-tl-step i { font-style: normal; color: var(--cdc-ink-3); font-size: 11px; }

/* ---------- 后果 ---------- */
.cdc-risk { margin-top: 26px; }
.cdc-risk h2, .cdc-guide h2 { margin-bottom: 14px; font-size: 19px; }
.cdc-risk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cdc-risk-card {
    background: var(--cdc-surface);
    border: 1px solid var(--cdc-line);
    border-top: 3px solid var(--cdc-red);
    border-radius: var(--cdc-radius);
    padding: 16px 19px;
    box-shadow: var(--cdc-shadow);
}
.cdc-risk-card h3 { margin: 0 0 7px; font-size: 14.5px; }
.cdc-risk-card p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--cdc-ink-2); }

/* ---------- 说明 ---------- */
.cdc-guide { margin-top: 26px; }
.cdc-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cdc-guide-card { background: var(--cdc-surface-2); border: 1px solid var(--cdc-line); border-radius: var(--cdc-radius); padding: 16px 19px; }
.cdc-guide-card h3 { margin: 0 0 7px; font-size: 14.5px; }
.cdc-guide-card p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--cdc-ink-2); }

/* ---------- 打印 ---------- */
.cdc-print-area { display: none; }
@media print {
    body * { visibility: hidden; }
    .cdc-print-area, .cdc-print-area * { visibility: visible; }
    .cdc-print-area { display: block; position: absolute; inset: 0; padding: 30px; color: #000; }
    .cdc-print-area h1 { font-size: 22px; border-bottom: 2px solid #333; padding-bottom: 8px; }
    .cdc-print-area table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
    .cdc-print-area th, .cdc-print-area td { border: 1px solid #999; padding: 7px 10px; text-align: left; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    .cdc-hero { grid-template-columns: minmax(0, 1fr); }
    .cdc-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .cdc-hero { padding: 24px 20px; }
    .cdc-type-row { grid-template-columns: minmax(0, 1fr); }
    .cdc-grid { grid-template-columns: minmax(0, 1fr); }
    .cdc-risk-grid, .cdc-guide-grid { grid-template-columns: minmax(0, 1fr); }
    .cdc-panel, .cdc-result { padding: 16px; }
}