/* =========================================================
   Duolingo Super 激活页样式
   主色 #58CC02（Duolingo 绿）
   遵循 Web Interface Guidelines:
     - 最小可点击区域 44×44
     - WCAG AA 对比度
     - focus-visible（非 outline:none）
     - 防 layout shift（提前预留 spinner 尺寸）
     - 暗色模式（按系统偏好自动）
========================================================= */

/* 强制 light 主题（白卡）+ Duolingo 深蓝底，全设备/全系统主题统一。
   不再使用 @media (prefers-color-scheme: dark)。 */
:root {
    --dl-green:        #58CC02;
    --dl-green-dark:   #46A302;
    --dl-green-ink:    #1F7A00;
    --dl-green-soft:   #E9F8DC;
    --dl-blue:         #1CB0F6;
    --dl-blue-soft:    #E0F4FE;
    --dl-yellow:       #FFC800;
    --dl-yellow-soft:  #FFF5CC;
    --dl-fg:           #1F1F1F;
    --dl-fg-muted:     #6B7280;
    --dl-bg:           #010435;   /* 1csz.com 深蓝（整页背景）*/
    --dl-bg-ink:       #0A0E5C;   /* 渐变高光中间色 */
    --dl-on-bg:        rgba(255,255,255,.78);
    --dl-on-bg-muted:  rgba(255,255,255,.55);
    --dl-card-bg:      #FFFFFF;
    --dl-surface-soft: #F2F4F8;   /* 白卡内的浅灰二级容器（dl-kv / code 标签等）*/
    --dl-border:       #E5E7EB;
    --dl-danger:       #DC2626;
    --dl-danger-bg:    #FEE2E2;
    --dl-radius:       20px;
    --dl-radius-sm:    14px;
    --dl-shadow:       0 1px 2px rgba(0,0,0,.10), 0 12px 36px rgba(0,0,0,.22);
    --dl-shadow-card:  0 2px 4px rgba(0,0,0,.12), 0 24px 56px rgba(0,0,0,.32);
    --dl-focus:        0 0 0 3px rgba(88, 204, 2, .45);
    color-scheme: light;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--dl-bg);
    color: var(--dl-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hero 渐变背景：深蓝主底 + 顶部紫红光斑 + 右上 Duolingo 绿光斑（1csz.com 风格） */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 1000px 500px at 50% -10%, rgba(120, 90, 220, .35), transparent 65%),
        radial-gradient(ellipse 700px 400px at 95% 15%, rgba(28, 176, 246, .18), transparent 70%),
        radial-gradient(ellipse 700px 400px at 5% 90%, rgba(88, 204, 2, .12), transparent 70%),
        var(--dl-bg);
    pointer-events: none;
}

.dl-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: max(env(safe-area-inset-top), 40px) 16px max(env(safe-area-inset-bottom), 24px);
    gap: 20px;
}

.dl-card {
    width: 100%;
    max-width: 440px;
    background: var(--dl-card-bg);
    border-radius: var(--dl-radius);
    box-shadow: var(--dl-shadow-card);
    padding: 36px 30px;
    border: 1px solid rgba(0,0,0,.03);
}
/* ===== Hero（卡片外，深蓝底上）===== */
.dl-hero {
    width: 100%;
    max-width: 440px;
    text-align: center;
    margin-bottom: 4px;
    padding: 8px 0 4px;
}
.dl-hero__logo {
    width: 220px;
    height: auto;
    max-width: 70vw;
    display: block;
    margin: 0 auto 12px;
    filter: drop-shadow(0 6px 24px rgba(38, 138, 255, .35));
}
.dl-hero__sub {
    margin: 0;
    color: var(--dl-on-bg);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .85;
}

/* ===== Card Head（卡片内的标题区）===== */
.dl-card__head { text-align: center; margin-bottom: 24px; }
.dl-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--dl-fg); letter-spacing: -.01em; }
.dl-sub   { font-size: 14px; color: var(--dl-fg-muted); margin: 0; line-height: 1.5; }

/* ===== Form ===== */
.dl-form { display: flex; flex-direction: column; gap: 18px; }
.dl-field { display: flex; flex-direction: column; }
.dl-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dl-fg);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.dl-field input {
    appearance: none;
    width: 100%;
    min-height: 48px;                /* WIG: 触摸目标 ≥44 */
    padding: 12px 14px;
    font-size: 16px;                 /* iOS 防自动放大 */
    font-family: inherit;
    color: var(--dl-fg);
    background: var(--dl-card-bg);
    border: 2px solid var(--dl-border);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dl-field input::placeholder { color: var(--dl-fg-muted); opacity: .6; }
.dl-field input:hover { border-color: #CBD5E1; }
.dl-field input:focus-visible {
    outline: none;
    border-color: var(--dl-green);
    box-shadow: var(--dl-focus);
}
.dl-field input[aria-invalid="true"] {
    border-color: var(--dl-danger);
    background: var(--dl-danger-bg);
}
.dl-field input#code {
    letter-spacing: .12em;
    font-feature-settings: "tnum";
    text-transform: uppercase;
}

.dl-err {
    margin: 6px 0 0;
    color: var(--dl-danger);
    font-size: 13px;
    font-weight: 500;
}
.dl-hint { margin: 6px 0 0; color: var(--dl-fg-muted); font-size: 12px; }

/* ===== Button ===== */
.dl-btn {
    appearance: none;
    width: 100%;
    min-height: 54px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: .02em;
}
.dl-btn:focus-visible { outline: none; box-shadow: var(--dl-focus); }
.dl-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none !important; }

/* Duolingo 招牌 3D 按钮：底部色块 + 按下时下沉 */
.dl-btn--primary {
    background: var(--dl-green);
    color: #FFF;
    box-shadow: 0 5px 0 var(--dl-green-dark), 0 8px 18px rgba(70, 163, 2, .25);
}
.dl-btn--primary:hover:not(:disabled) {
    background: #62D606;
    transform: translateY(-1px);
    box-shadow: 0 6px 0 var(--dl-green-dark), 0 10px 24px rgba(70, 163, 2, .3);
}
.dl-btn--primary:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--dl-green-dark);
}

.dl-btn--ghost {
    background: transparent;
    color: var(--dl-green-ink);
    border: 2px solid var(--dl-border);
    margin-top: 16px;
}
.dl-btn--ghost:hover { border-color: var(--dl-green); color: var(--dl-green-ink); }
.dl-foot {
    margin: 18px 0 0;
    color: var(--dl-fg-muted);
    font-size: 12px;
    text-align: center;
}

/* ===== Spinner ===== */
.dl-spinner {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.35);
    border-top-color: #FFF;
    animation: dl-spin .85s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}
.dl-spinner--lg {
    width: 48px; height: 48px;
    border-width: 5px;
    border-color: rgba(88, 204, 2, .2);
    border-top-color: var(--dl-green);
    margin: 0 auto 18px;
}
@keyframes dl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .dl-spinner { animation-duration: 2s; }
}

/* ===== Progress 中间态 ===== */
.dl-progress {
    text-align: center;
    padding: 28px 8px 16px;
}
.dl-stage { font-size: 18px; font-weight: 700; margin: 4px 0 8px; }
.dl-tip   { color: var(--dl-fg-muted); font-size: 13px; margin: 0; }

/* ===== Success ===== */
.dl-success { text-align: center; padding: 8px 0; }
.dl-success__badge {
    width: 76px; height: 76px;
    background: var(--dl-green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 0 var(--dl-green-dark);
    animation: dl-pop .3s ease-out;
}
.dl-success__badge svg { width: 44px; height: 44px; }
.dl-success h2 {
    color: var(--dl-green-ink);
    font-size: 22px;
    margin: 0 0 16px;
    font-weight: 800;
}
@keyframes dl-pop {
    0%   { transform: scale(.7); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.dl-kv {
    text-align: left;
    background: var(--dl-surface-soft);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 12px 0 14px;
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr;
    gap: 8px 18px;
    font-size: 14px;
}
.dl-kv dt { color: var(--dl-fg-muted); font-weight: 500; }
.dl-kv dd { color: var(--dl-fg); margin: 0; word-break: break-all; font-weight: 600; }
.dl-kv code { font-size: 13px; }

/* ===== Failed ===== */
.dl-failed { text-align: center; padding: 8px 0; }
.dl-failed__badge {
    width: 76px; height: 76px;
    background: var(--dl-danger);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    animation: dl-pop .3s ease-out;
}
.dl-failed__badge svg { width: 44px; height: 44px; }
.dl-failed h2 {
    color: var(--dl-danger);
    font-size: 20px;
    margin: 0 0 8px;
    font-weight: 800;
}
.dl-failed__msg {
    color: var(--dl-fg);
    font-size: 15px;
    margin: 0 0 6px;
}

/* ===== 教程链接 + Modal ===== */
.dl-helper-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dl-blue);
    background: var(--dl-blue-soft);
    border: 1px solid rgba(28, 176, 246, .25);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    line-height: 1.4;
    transition: background .15s, transform .08s, box-shadow .15s;
}
.dl-helper-link:hover {
    background: rgba(28, 176, 246, .18);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(28, 176, 246, .15);
}
.dl-helper-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(28, 176, 246, .35);
}

/* FAQ 里嵌入教程图（可点击放大触发 modal）*/
.dl-faq__img-wrap {
    display: block;
    position: relative;
    margin: 10px auto 12px;
    max-width: 280px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    cursor: zoom-in;
    transition: transform .15s, box-shadow .15s;
}
.dl-faq__img-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.dl-faq__img {
    display: block;
    width: 100%;
    height: auto;
}
.dl-faq__img-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, .65);
    color: #FFF;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    pointer-events: none;
}
.dl-faq__list {
    margin: 12px 0 0;
    padding-left: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.8;
}
.dl-faq__list li { color: var(--dl-fg); }
.dl-faq__list code {
    background: var(--dl-surface-soft);
    color: var(--dl-fg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Modal 容器 */
.dl-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 4, 53, .88);
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}
.dl-modal__body {
    position: relative;
    background: var(--dl-card-bg);
    border-radius: var(--dl-radius);
    padding: 28px 24px 24px;
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 56px rgba(0,0,0,.4);
    text-align: center;
    color: var(--dl-fg);
}
.dl-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.05);
    color: var(--dl-fg-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .08s;
}
.dl-modal__close:hover { background: rgba(0,0,0,.1); color: var(--dl-fg); transform: rotate(90deg); }
.dl-modal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dl-blue-soft); }

.dl-modal__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: var(--dl-fg);
    padding-right: 28px;
    text-align: left;
}
.dl-modal__intro {
    margin: 0 0 14px;
    color: var(--dl-fg-muted);
    font-size: 14px;
    text-align: left;
}
.dl-modal__img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 16px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.dl-modal__list {
    margin: 0 0 18px;
    padding-left: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.9;
    text-align: left;
}
.dl-modal__list li {
    padding: 6px 10px;
    border-radius: 8px;
}
.dl-modal__list li:nth-child(1) { background: var(--dl-green-soft); }
.dl-modal__list li:nth-child(2) { background: var(--dl-blue-soft); }
.dl-modal__list li:nth-child(3) { background: var(--dl-danger-bg); color: var(--dl-fg); }
.dl-modal__list code {
    background: rgba(255,255,255,.7);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.dl-modal__tip {
    margin: 0 0 18px;
    padding: 10px 12px;
    background: var(--dl-yellow-soft);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--dl-fg);
    text-align: left;
}
.dl-modal__cta {
    margin-top: 4px;
}

/* Modal 小屏适配 */
@media (max-width: 380px) {
    .dl-modal { padding: 12px; }
    .dl-modal__body { padding: 22px 18px 18px; }
    .dl-modal__title { font-size: 16px; padding-right: 24px; }
    .dl-modal__img { max-width: 260px; }
    .dl-modal__list { font-size: 12.5px; line-height: 1.75; }
}

/* ===== Footer（在深蓝底上需要浅色文字）===== */
.dl-page-foot {
    margin-top: 12px;
    padding: 12px 0 8px;
    text-align: center;
    color: var(--dl-on-bg-muted);
    font-size: 12px;
    max-width: 440px;
}
.dl-page-foot p { margin: 0; }

/* ===== Tabs（家庭组 / 账号密码 / 手机号） ===== */
.dl-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 18px;
    padding: 4px;
    background: #f0f3f5;
    border-radius: 12px;
}
.dl-tab {
    flex: 1;
    padding: 9px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    border: 0;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}
.dl-tab:hover { color: #1F1F1F; }
.dl-tab.is-active {
    background: #fff;
    color: #1F1F1F;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* SMS 输入行：输入框 + 获取按钮并排 */
.dl-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.dl-input-row > input {
    flex: 1;
    min-width: 0;
}

/* 手机号输入：左侧固定显示 +86 前缀（不可编辑），用户只输入 11 位数字
   外层 .dl-phone-input 承担统一边框/圆角/focus 态；内部 input 去掉自己边框 */
.dl-phone-input {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    min-height: 48px;
    background: var(--dl-card-bg);
    border: 2px solid var(--dl-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.dl-phone-input:hover {
    border-color: #CBD5E1;
}
.dl-phone-input:focus-within {
    border-color: var(--dl-green);
    box-shadow: var(--dl-focus);
}
.dl-phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dl-fg);
    background: rgba(0, 0, 0, .04);
    border-right: 1px solid var(--dl-border);
    user-select: none;
    white-space: nowrap;
    letter-spacing: .02em;
}
.dl-phone-input > input,
.dl-phone-input > input:hover,
.dl-phone-input > input:focus,
.dl-phone-input > input:focus-visible {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 12px 14px;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.dl-btn--small {
    flex-shrink: 0;
    width: auto;            /* 覆盖 .dl-btn 的 width:100%；否则在 flex row 里会把 input 挤到 32px */
    min-height: 48px;       /* 跟 input 同高 */
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    background: #58CC02;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.dl-btn--small:disabled {
    background: #cbd2d6;
    cursor: not-allowed;
}

/* 套餐徽标（直充模式下显示当前 card_type 套餐名称） */
.dl-hint--badge {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(88, 204, 2, 0.08);
    border-left: 3px solid #58CC02;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   底部信息区：使用步骤 / 服务承诺 / 常见问题
========================================================= */
.dl-info {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

/* ----- 常见问题（折叠列表） ----- */
.dl-faq {
    background: var(--dl-card-bg);
    border-radius: var(--dl-radius);
    padding: 18px 20px;
    box-shadow: var(--dl-shadow);
    border: 1px solid rgba(0,0,0,.03);
}
.dl-faq__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: var(--dl-fg);
    text-align: center;
    letter-spacing: .02em;
}
.dl-faq details {
    border-bottom: 1px solid var(--dl-border);
    padding: 10px 0;
}
.dl-faq details:last-of-type { border-bottom: 0; padding-bottom: 0; }
.dl-faq details:first-of-type { padding-top: 0; }

.dl-faq summary {
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--dl-fg);
    padding: 4px 24px 4px 0;
    position: relative;
    transition: color .15s;
    line-height: 1.4;
}
.dl-faq summary::-webkit-details-marker { display: none; }
.dl-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--dl-green-soft);
    color: var(--dl-green-ink);
    font-weight: 800;
    font-size: 16px;
    transition: transform .2s ease;
}
.dl-faq details[open] summary { color: var(--dl-green-ink); }
.dl-faq details[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.dl-faq summary:focus-visible {
    outline: none;
    color: var(--dl-green-ink);
}
.dl-faq__body {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--dl-fg-muted);
    line-height: 1.65;
}

/* =========================================================
   移动端适配（手机用户优先）
   断点策略：
     ≤768px  普通手机（含 iPhone 12-15、华为/小米常见竖屏）
     ≤480px  小屏手机（含 iPhone SE 第二代，Android 5.0 折叠手机外屏等）
     ≤360px  极小屏（很小 Android 老机型）
========================================================= */

/* ----- 通用：≤768px（所有手机 + 小平板竖屏）----- */
@media (max-width: 768px) {
    .dl-shell {
        padding-top: max(env(safe-area-inset-top), 24px);
        padding-left: 12px;
        padding-right: 12px;
        gap: 16px;
    }
    .dl-hero { padding: 4px 0 0; }
    .dl-hero__logo { width: 180px; max-width: 60vw; }
    .dl-hero__sub { font-size: 12.5px; padding: 0 8px; }

    .dl-card { padding: 28px 22px; }
    .dl-title { font-size: 21px; }
    .dl-sub   { font-size: 13.5px; }

    /* 表单字段间距收紧（手机屏幕窄，垂直空间宝贵）*/
    .dl-form { gap: 16px; }
    .dl-field label { font-size: 13px; }
    /* iOS 输入框 16px 防止聚焦时缩放 —— 不能再缩小 */
    .dl-field input { font-size: 16px; min-height: 50px; }
    .dl-hint { font-size: 12px; }

    /* Tab 切换 —— 三 tab 平分，确保每个 ≥44px 触摸目标 */
    .dl-tabs { gap: 3px; padding: 3px; }
    .dl-tab { padding: 10px 4px; font-size: 12.5px; min-height: 40px; }

    /* 主激活按钮：手机上变大变粗 */
    .dl-btn { min-height: 56px; font-size: 17px; border-radius: 16px; }

    /* 教程链接按钮：手机更显眼 */
    .dl-helper-link {
        width: 100%;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
        margin-top: 10px;
    }

    /* 激活成功 / 失败 后的 dl-kv：手机改成竖排（dt 在上 dd 在下）*/
    .dl-kv {
        grid-template-columns: 1fr;
        gap: 4px 0;
        padding: 14px 14px 12px;
        font-size: 13.5px;
    }
    .dl-kv dt {
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-top: 6px;
    }
    .dl-kv dt:first-child { margin-top: 0; }
    .dl-kv dd { padding-bottom: 4px; border-bottom: 1px dashed var(--dl-border); font-size: 14px; }
    .dl-kv dd:last-child { border-bottom: 0; }

    /* FAQ：手机上 padding 略缩，summary 字号略大便于点击 */
    .dl-faq { padding: 16px 16px; }
    .dl-faq summary { font-size: 14px; padding: 8px 28px 8px 0; }
    .dl-faq summary::after { right: 0; }
    .dl-faq__img-wrap { max-width: 100%; }
    .dl-faq__list { font-size: 13px; }

    /* Modal：手机上铺满 + 关闭按钮加大易按 */
    .dl-modal { padding: 12px; align-items: flex-start; padding-top: max(env(safe-area-inset-top), 24px); }
    .dl-modal__body {
        padding: 24px 18px 20px;
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
    }
    .dl-modal__title { font-size: 17px; padding-right: 36px; }
    .dl-modal__intro { font-size: 13.5px; }
    .dl-modal__close {
        top: 8px; right: 8px;
        width: 38px; height: 38px;   /* 44 边界向下取，hover 区够大 */
        font-size: 24px;
    }
    .dl-modal__img { max-width: 100%; }
    .dl-modal__list { font-size: 13px; }
    .dl-modal__tip { font-size: 12.5px; }

    /* footer */
    .dl-page-foot { padding: 8px 12px 4px; font-size: 11.5px; }
}

/* ----- 普通手机：≤480px ----- */
@media (max-width: 480px) {
    .dl-shell { padding-left: 10px; padding-right: 10px; gap: 14px; }
    .dl-hero__logo { width: 160px; }
    .dl-hero__sub { font-size: 12px; }

    .dl-card { padding: 26px 18px; border-radius: 18px; }
    .dl-title { font-size: 20px; }

    .dl-tab { font-size: 12px; padding: 9px 2px; }

    /* SMS 输入行：太挤时让"获取验证码"按钮换行 */
    .dl-input-row { flex-wrap: wrap; }
    .dl-input-row > .dl-phone-input { flex: 1 1 100%; }
    .dl-input-row > .dl-btn--small { flex: 1 1 100%; width: 100%; min-height: 44px; }

    .dl-faq { padding: 14px 14px; border-radius: 18px; }
    .dl-faq__title { font-size: 13.5px; }

    .dl-modal__body { padding: 22px 16px 18px; border-radius: 18px; }
}

/* ----- 极小屏（≤360px）----- */
@media (max-width: 360px) {
    .dl-hero__logo { width: 140px; }
    .dl-card { padding: 22px 14px; }
    .dl-title { font-size: 18px; }
    .dl-sub { font-size: 12.5px; }
    .dl-tab { font-size: 11px; padding: 8px 2px; }
    .dl-btn { min-height: 52px; font-size: 16px; }
    .dl-faq summary { font-size: 13px; }
    .dl-faq__list { font-size: 12.5px; }
}

/* ----- 横屏 + 短高度：避免 viewport 不够时挤压 ----- */
@media (max-height: 600px) and (orientation: landscape) {
    .dl-shell { padding-top: 12px; gap: 12px; }
    .dl-hero__logo { width: 140px; }
    .dl-hero__sub { display: none; }
}