/* ==========================================================================
   数字遗产联系人清单 · 独立设计「遗产交接工作台」
   --------------------------------------------------------------------------
   设计概念：左侧是一条常驻「档案栏」（安全评级 + 自检 + 交接方式），
   右侧是「登记 → 指定 → 导出」三段表单，像一份会呼吸的遗产台账。
   配色：暖纸白 + 墨紫 + 陈金 + 墨绿，安静、庄重、不惊悚。
   所有规则限定在 .tsk.dlc 作用域内。
   ========================================================================== */

.tsk.dlc {
    --bg: #f5f2ec;
    --bg-2: #ece7dd;
    --card: #fffdf9;
    --card-2: #f7f3ea;
    --ink: #241f2b;
    --ink-2: #5b5468;
    --faint: #948ca0;
    --line: #e2dace;
    --line-2: #efe9dd;
    --line-3: #cec2b1;

    --pri: #5b3a8e;
    --pri-2: #8a4f9e;
    --pri-soft: #efe8f8;
    --pri-ink: #472b73;

    --gold: #9d6d18;
    --gold-soft: #f8eed8;
    --ok: #2c6b4d;
    --ok-soft: #e2f0e7;
    --danger: #a72f2f;
    --danger-soft: #f9e6e4;
    --info: #2a6a86;
    --info-soft: #e2eff4;

    --shadow-sm: 0 1px 2px rgba(36, 31, 43, .05), 0 6px 16px rgba(36, 31, 43, .05);
    --shadow: 0 2px 6px rgba(36, 31, 43, .07), 0 20px 46px rgba(36, 31, 43, .10);
    --r: 16px;
    --r-sm: 10px;
    --num: "Bahnschrift", "Segoe UI Variable Text", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    background:
        radial-gradient(820px 380px at 8% -6%, rgba(91, 58, 142, .10), transparent 60%),
        radial-gradient(700px 360px at 100% 2%, rgba(157, 109, 24, .08), transparent 58%),
        var(--bg);
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.85;
    overflow-x: clip;
}
:root[data-theme="dark"] .tsk.dlc {
    --bg: #0f0d15;
    --bg-2: #151220;
    --card: #191624;
    --card-2: #201c2e;
    --ink: #ece8f5;
    --ink-2: #b0a8c2;
    --faint: #7d7590;
    --line: #2b2540;
    --line-2: #221d33;
    --line-3: #3d3557;

    --pri: #b592ec;
    --pri-2: #e089c8;
    --pri-soft: rgba(181, 146, 236, .14);
    --pri-ink: #c8adf5;

    --gold: #e0b25e;
    --gold-soft: rgba(224, 178, 94, .13);
    --ok: #63cf9b;
    --ok-soft: rgba(99, 207, 155, .13);
    --danger: #f08d84;
    --danger-soft: rgba(240, 141, 132, .13);
    --info: #6cc0dd;
    --info-soft: rgba(108, 192, 221, .13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .3);
    --shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 20px 46px rgba(0, 0, 0, .38);
}

.dlc-wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px 70px; }
.dlc-wrap * { box-sizing: border-box; }
.dlc-wrap p { margin: 0; }
.dlc-wrap b, .dlc-wrap strong { color: var(--ink); font-weight: 750; }

/* ---------------- 首屏 ---------------- */
.dlc-hero {
    padding: 30px 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 30px;
    align-items: end;
}
.dlc-kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font: 700 11.5px/1 var(--num);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}
.dlc-kicker::before {
    content: "";
    width: 30px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.dlc-hero h1 {
    margin: 12px 0 0;
    font-size: clamp(27px, 4.1vw, 41px);
    line-height: 1.24;
    font-weight: 800;
    letter-spacing: -.015em;
    max-width: 720px;
}
.dlc-hero h1 em { font-style: normal; color: var(--pri-ink); }
.dlc-lead {
    margin-top: 13px;
    font-size: 16px;
    line-height: 1.95;
    color: var(--ink-2);
    max-width: 680px;
}
.dlc-lead b { color: var(--pri-ink); }
.dlc-hero-side { display: flex; flex-direction: column; gap: 8px; }
.dlc-hero-side .row {
    display: flex; gap: 11px; align-items: baseline;
    padding: 11px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}
.dlc-hero-side .row .n {
    flex: none;
    font: 800 11.5px/1 var(--num);
    color: var(--gold);
    letter-spacing: .1em;
}
.dlc-hero-side .row .t { display: block; font-size: 14px; font-weight: 750; }
.dlc-hero-side .row .d { display: block; font-size: 12.5px; color: var(--faint); line-height: 1.7; }

/* ---------------- 工作台外壳：左档案栏 + 右主区 ---------------- */
.dlc-shell {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-top: 8px;
}
.dlc-rail { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 16px; }
.dlc-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.dlc-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.dlc-panel > header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: var(--card-2);
    border-bottom: 1px solid var(--line-2);
    flex-wrap: wrap;
}
.dlc-panel > header h2, .dlc-panel > header h3 { margin: 0; font-size: 15px; font-weight: 800; }
.dlc-panel > header .en {
    margin-left: auto;
    font: 700 10.5px/1 var(--num);
    letter-spacing: .18em;
    color: var(--faint);
    text-transform: uppercase;
}
.dlc-panel > header .note { font-size: 12.5px; color: var(--faint); }
.dlc-panel .body { padding: 18px; }

/* ---------------- 安全评级 ---------------- */
.dlc-score { display: flex; align-items: center; gap: 15px; }
.dlc-score-ring {
    --p: 0;
    position: relative;
    width: 78px; height: 78px; flex: none;
    border-radius: 50%;
    background: conic-gradient(var(--pri) calc(var(--p) * 1%), var(--line-2) 0);
    display: grid; place-items: center;
}
.dlc-score-ring::before {
    content: ""; position: absolute; inset: 8px;
    border-radius: 50%; background: var(--card);
}
.dlc-score-ring span {
    position: relative;
    font: 800 20px/1 var(--num);
    color: var(--pri-ink);
    font-variant-numeric: tabular-nums;
}
.dlc-score-txt strong { display: block; font-size: 15px; font-weight: 800; }
.dlc-score-txt p { font-size: 12.5px; color: var(--ink-2); line-height: 1.75; margin-top: 3px; }
.dlc-grade {
    display: inline-block;
    border-radius: 999px;
    padding: 3px 11px;
    font: 800 11.5px/1.6 inherit;
    margin-bottom: 5px;
}
.dlc-grade.good { background: var(--ok-soft); color: var(--ok); }
.dlc-grade.mid { background: var(--gold-soft); color: var(--gold); }
.dlc-grade.bad { background: var(--danger-soft); color: var(--danger); }

/* ---------------- 自检项 ---------------- */
.dlc-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dlc-check {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card-2);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink-2);
}
.dlc-check .mark { flex: none; font-size: 13px; line-height: 1.6; }
.dlc-check.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.dlc-check.no { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.dlc-check b { display: block; font-size: 13px; }

/* ---------------- 交接方式 ---------------- */
.dlc-methods { display: flex; flex-direction: column; gap: 8px; }
.dlc-method {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card-2);
    cursor: pointer;
    transition: .16s;
}
.dlc-method:hover { border-color: var(--line-3); }
.dlc-method input { flex: none; margin-top: 3px; accent-color: var(--pri); width: 16px; height: 16px; }
.dlc-method .t { font-size: 13.5px; font-weight: 750; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dlc-method .d { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.dlc-method .lv {
    font: 700 10.5px/1 var(--num);
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--ok-soft);
    color: var(--ok);
}
.dlc-method .lv.mid { background: var(--gold-soft); color: var(--gold); }
.dlc-method:has(input:checked) { border-color: var(--pri); background: var(--pri-soft); }

/* ---------------- 表单 ---------------- */
.dlc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; }
.dlc-f { display: block; }
.dlc-f > label {
    display: block;
    font-size: 12.5px;
    font-weight: 750;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.dlc-f > label .opt { color: var(--faint); font-weight: 600; }
.dlc-f input, .dlc-f select, .dlc-f textarea {
    width: 100%;
    border: 1.5px solid var(--line-3);
    border-radius: var(--r-sm);
    background: var(--card-2);
    color: var(--ink);
    font: 500 14.5px/1.6 inherit;
    padding: 10px 12px;
    outline: none;
    transition: .15s;
}
.dlc-f textarea { resize: vertical; min-height: 68px; }
.dlc-f input:focus, .dlc-f select:focus, .dlc-f textarea:focus {
    border-color: var(--pri);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--pri-soft);
}
.dlc-f input::placeholder, .dlc-f textarea::placeholder { color: var(--faint); }
.dlc-f.wide { grid-column: 1 / -1; }

/* ---------------- 按钮 ---------------- */
.dlc-btn {
    border: 1.5px solid var(--line-3);
    background: var(--card-2);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    padding: 10px 18px;
    font: 700 13.5px/1.4 inherit;
    cursor: pointer;
    transition: .16s;
    display: inline-flex; align-items: center; gap: 7px;
}
.dlc-btn:hover { border-color: var(--pri); color: var(--pri-ink); }
.dlc-btn:focus-visible { outline: 3px solid var(--pri-soft); outline-offset: 2px; }
.dlc-btn.pri {
    background: linear-gradient(135deg, var(--pri), var(--pri-2));
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px rgba(91, 58, 142, .26);
}
.dlc-btn.pri:hover { color: #fff; filter: brightness(1.07); }
:root[data-theme="dark"] .dlc-btn.pri { color: #0f0d15; }
:root[data-theme="dark"] .dlc-btn.pri:hover { color: #0f0d15; }
.dlc-btn.gold { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.dlc-btn.sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.dlc-btn:disabled { opacity: .45; cursor: not-allowed; }
.dlc-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

/* ---------------- 资产列表 ---------------- */
.dlc-assets { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dlc-asset {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--pri);
    border-radius: var(--r-sm);
    background: var(--card-2);
    transition: .16s;
}
.dlc-asset.sens { border-left-color: var(--danger); }
.dlc-asset .ic {
    flex: none;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-size: 17px;
    background: var(--pri-soft);
}
.dlc-asset.sens .ic { background: var(--danger-soft); }
.dlc-asset .bd { flex: 1; min-width: 0; }
.dlc-asset .tt { font-size: 14.5px; font-weight: 750; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dlc-asset .tt .tag {
    font: 700 10.5px/1 var(--num);
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--info-soft);
    color: var(--info);
}
.dlc-asset .tt .tag.hot { background: var(--danger-soft); color: var(--danger); }
.dlc-asset .dd { font-size: 12.5px; color: var(--ink-2); line-height: 1.75; margin-top: 3px; word-break: break-word; }
.dlc-asset .del {
    flex: none;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--faint);
    width: 28px; height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.dlc-asset .del:hover { border-color: var(--danger); color: var(--danger); }
.dlc-empty {
    text-align: center;
    padding: 30px 14px;
    color: var(--faint);
    font-size: 13.5px;
    border: 1px dashed var(--line-3);
    border-radius: var(--r-sm);
}
.dlc-empty .ic { font-size: 28px; display: block; margin-bottom: 7px; }

/* ---------------- 提示条 ---------------- */
.dlc-tip {
    margin-top: 14px;
    padding: 12px 15px;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.8;
    background: var(--gold-soft);
    color: var(--gold);
    border-left: 3px solid var(--gold);
}
.dlc-tip.info { background: var(--info-soft); color: var(--info); border-left-color: var(--info); }
.dlc-tip.ok { background: var(--ok-soft); color: var(--ok); border-left-color: var(--ok); }
.dlc-out {
    margin-top: 14px;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ink-2);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 340px;
    overflow: auto;
    font-family: var(--num);
}
.dlc-foot { margin-top: 26px; font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.9; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
    .dlc-hero { grid-template-columns: 1fr; align-items: start; }
    .dlc-shell { grid-template-columns: 1fr; }
    .dlc-rail { position: static; }
}
@media (max-width: 700px) {
    .dlc-wrap { padding: 0 16px 52px; }
    .dlc-fields { grid-template-columns: 1fr; }
    .dlc-hero-side .row .d { display: none; }
}