/* ==========================================================================
   数字礼品订阅赠送 · 独立设计「礼物选品台」
   --------------------------------------------------------------------------
   设计概念：像在礼物店里挑商品——左边是收礼人画像（关系 / 用途 / 预算），
   右边是匹配度排序的礼物卡，每张卡都写清「为什么合适」与「什么时候不合适」。
   配色：玫瑰粉 + 奶白 + 香槟金，温柔但不甜腻。
   所有规则限定在 .tsk.dgs 作用域内。
   ========================================================================== */

.tsk.dgs {
    --bg: #faf6f6;
    --bg-2: #f2eaea;
    --card: #ffffff;
    --card-2: #fbf7f7;
    --ink: #2a1a20;
    --ink-2: #6a5560;
    --faint: #a08e99;
    --line: #ebdfe0;
    --line-2: #f4ecec;
    --line-3: #d9c6c9;

    --pri: #c33d63;
    --pri-2: #e0678c;
    --pri-soft: #fbe7ec;
    --pri-ink: #a32e4e;

    --gold: #a67c22;
    --gold-soft: #f7eed7;
    --ok: #1f7455;
    --ok-soft: #e1f1e9;
    --amber: #ab6a0d;
    --amber-soft: #fbeeda;
    --danger: #b32a30;
    --danger-soft: #f9e4e5;
    --info: #1e6789;
    --info-soft: #e0eef5;
    --violet: #6a46ac;
    --violet-soft: #ece7fa;

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

    background:
        radial-gradient(880px 400px at 96% -8%, rgba(195, 61, 99, .10), transparent 62%),
        radial-gradient(700px 380px at 2% 4%, rgba(166, 124, 34, .07), transparent 58%),
        var(--bg);
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.85;
    overflow-x: clip;
}
:root[data-theme="dark"] .tsk.dgs {
    --bg: #110b0e;
    --bg-2: #170f13;
    --card: #1a1216;
    --card-2: #211820;
    --ink: #f3eaee;
    --ink-2: #bfa8b2;
    --faint: #8b7480;
    --line: #2f2228;
    --line-2: #261b20;
    --line-3: #44313a;

    --pri: #f48aa8;
    --pri-2: #e9a06a;
    --pri-soft: rgba(244, 138, 168, .13);
    --pri-ink: #f7a7bd;

    --gold: #e0be72;
    --gold-soft: rgba(224, 190, 114, .13);
    --ok: #5bd39b;
    --ok-soft: rgba(91, 211, 155, .13);
    --amber: #efac60;
    --amber-soft: rgba(239, 172, 96, .13);
    --danger: #f08b8f;
    --danger-soft: rgba(240, 139, 143, .13);
    --info: #63bcdd;
    --info-soft: rgba(99, 188, 221, .13);
    --violet: #b89cf0;
    --violet-soft: rgba(184, 156, 240, .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);
}

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

/* ---------------- 首屏 ---------------- */
.dgs-hero {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    gap: 26px;
    align-items: start;
    padding: 28px 0 20px;
}
.dgs-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--line-3);
    border-radius: 999px; padding: 7px 16px;
    box-shadow: var(--shadow-sm);
    font: 700 11.5px/1 var(--num); letter-spacing: .16em;
    text-transform: uppercase; color: var(--pri-ink);
}
.dgs-kicker i {
    width: 24px; height: 24px; border-radius: 7px;
    background: linear-gradient(135deg, var(--pri), var(--gold));
    display: inline-block;
}
.dgs-hero h1 {
    margin: 15px 0 0;
    font-size: clamp(26px, 3.9vw, 39px);
    line-height: 1.24; font-weight: 800; letter-spacing: -.015em;
}
.dgs-hero h1 em { font-style: normal; color: var(--pri-ink); }
.dgs-lead { margin-top: 13px; font-size: 16px; line-height: 1.95; color: var(--ink-2); max-width: 620px; }
.dgs-lead b { color: var(--pri-ink); }

/* 画像表单 */
.dgs-profile {
    margin-top: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px 20px;
}
.dgs-profile > header { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.dgs-profile > header h2 { margin: 0; font-size: 15px; font-weight: 800; }
.dgs-profile > header .en {
    margin-left: auto;
    font: 700 10.5px/1 var(--num); letter-spacing: .18em;
    color: var(--faint); text-transform: uppercase;
}
.dgs-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.dgs-f { display: block; }
.dgs-f.wide { grid-column: 1 / -1; }
.dgs-f > label { display: block; font-size: 12.5px; font-weight: 750; color: var(--ink-2); margin-bottom: 5px; }
.dgs-f input, .dgs-f select {
    width: 100%;
    border: 1.5px solid var(--line-3);
    border-radius: var(--r-sm);
    background: var(--card-2); color: var(--ink);
    font: 600 14px/1.6 inherit;
    padding: 9px 12px; outline: none;
    transition: .15s;
}
.dgs-f input:focus, .dgs-f select:focus {
    border-color: var(--pri); background: var(--card);
    box-shadow: 0 0 0 3px var(--pri-soft);
}
.dgs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dgs-chip {
    border: 1.5px solid var(--line);
    background: var(--card-2);
    border-radius: 999px;
    padding: 7px 14px;
    font: 700 12.5px/1.4 inherit;
    color: var(--ink-2);
    cursor: pointer;
    transition: .16s;
}
.dgs-chip:hover { border-color: var(--pri); color: var(--pri-ink); }
.dgs-chip.on { background: var(--pri); border-color: var(--pri); color: #fff; }
:root[data-theme="dark"] .dgs-chip.on { color: #110b0e; }

/* ---------------- 推荐卡片 ---------------- */
.dgs-board {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 20px 22px 22px;
}
.dgs-board > header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.dgs-board > header h2 { margin: 0; font-size: 15.5px; font-weight: 800; }
.dgs-board > header .en {
    margin-left: auto;
    font: 700 10.5px/1 var(--num); letter-spacing: .18em;
    color: var(--faint); text-transform: uppercase;
}
.dgs-gifts { display: flex; flex-direction: column; gap: 11px; }
.dgs-gift {
    border: 1px solid var(--line);
    border-left: 4px solid var(--pri);
    border-radius: var(--r-sm);
    background: var(--card-2);
    padding: 14px 16px;
    transition: .16s;
}
.dgs-gift:hover { border-color: var(--pri); }
.dgs-gift.top { border-left-color: var(--gold); background: var(--gold-soft); }
.dgs-gift-hd { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.dgs-gift-hd .ic {
    width: 40px; height: 40px; flex: none;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 20px;
    background: var(--pri-soft);
}
.dgs-gift.top .dgs-gift-hd .ic { background: var(--gold-soft); }
.dgs-gift-hd .nm { font-size: 15.5px; font-weight: 800; }
.dgs-gift-hd .nm small { display: block; font-size: 11.5px; color: var(--faint); font-weight: 600; }
.dgs-gift-hd .price {
    margin-left: auto;
    font: 800 17px/1 var(--num);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.dgs-gift-hd .price small { display: block; font: 600 11px/1.5 var(--num); color: var(--faint); }
.dgs-match { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dgs-match .bar { flex: 1; height: 7px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.dgs-match .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pri), var(--gold)); transition: width .3s; }
.dgs-match .vv { flex: none; font: 800 12px/1 var(--num); color: var(--pri-ink); }
.dgs-why { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; margin-top: 8px; }
.dgs-why b { color: var(--ink); }
.dgs-catch {
    margin-top: 7px;
    font-size: 12px;
    color: var(--amber);
    background: var(--amber-soft);
    border-radius: 7px;
    padding: 6px 9px;
}
.dgs-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);
}
.dgs-empty .ic { font-size: 30px; display: block; margin-bottom: 7px; }

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

/* ---------------- 避坑清单 ---------------- */
.dgs-panel {
    margin-top: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.dgs-panel > header {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 20px;
    background: var(--card-2);
    border-bottom: 1px solid var(--line-2);
    flex-wrap: wrap;
}
.dgs-panel > header h2 { margin: 0; font-size: 15.5px; font-weight: 800; }
.dgs-panel > header .en {
    margin-left: auto;
    font: 700 10.5px/1 var(--num); letter-spacing: .18em;
    color: var(--faint); text-transform: uppercase;
}
.dgs-panel > header .note { font-size: 12.5px; color: var(--faint); }
.dgs-panel .body { padding: 18px 20px 20px; }
.dgs-pits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.dgs-pit {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card-2);
}
.dgs-pit .ic { flex: none; font-size: 16px; line-height: 1.5; }
.dgs-pit .t { display: block; font-size: 13.5px; font-weight: 750; }
.dgs-pit .d { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.75; }

/* 祝福语 */
.dgs-wishes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 11px; }
.dgs-wish {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card-2);
    padding: 15px 16px;
    position: relative;
}
.dgs-wish .txt { font-size: 14px; line-height: 1.9; color: var(--ink); }
.dgs-wish .copy {
    margin-top: 11px;
    border: 1px solid var(--line-3);
    background: var(--card);
    color: var(--ink-2);
    border-radius: 8px;
    padding: 5px 12px;
    font: 700 12px/1.5 inherit;
    cursor: pointer;
}
.dgs-wish .copy:hover { border-color: var(--pri); color: var(--pri-ink); }
.dgs-note {
    margin-top: 14px; font-size: 13px; line-height: 1.8;
    background: var(--pri-soft); color: var(--pri-ink);
    border-left: 3px solid var(--pri);
    border-radius: var(--r-sm); padding: 11px 14px;
}
.dgs-note.warn { background: var(--amber-soft); color: var(--amber); border-left-color: var(--amber); }
.dgs-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);
}
.dgs-foot { margin-top: 26px; font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.9; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1040px) {
    .dgs-hero { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .dgs-wrap { padding: 0 16px 52px; }
    .dgs-fields { grid-template-columns: 1fr; }
    .dgs-board > header .en, .dgs-panel > header .en { display: none; }
}