/* ===== 开发者申请页（frontend/dev/）=====
   依赖上级目录的 style_new.css（MD3 主题变量与表单/按钮组件）。
   本文件只补充页面布局，颜色全部使用 MD3 变量，保持与主站一致。 */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--md-sys-font-family, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif);
    background: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    min-height: 100vh;
    line-height: 1.6;
}

/* ===== 顶栏 ===== */
.da-header {
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding: var(--md-sys-spacing-md) var(--md-sys-spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}
.da-header .da-brand {
    font-size: var(--md-sys-typescale-title-medium);
    font-weight: 700;
    color: var(--md-sys-color-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-sm);
}
.da-header .da-back {
    font-size: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}
.da-header .da-back:hover { color: var(--md-sys-color-primary); }

/* ===== 容器 ===== */
.da-container {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--md-sys-spacing-xl) var(--md-sys-spacing-lg) 64px;
}

/* ===== 选择页卡片 ===== */
.da-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--md-sys-spacing-lg);
    margin-top: var(--md-sys-spacing-xl);
}
.da-choose-card {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    padding: var(--md-sys-spacing-xl);
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-shadow-1);
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
    display: block;
}
.da-choose-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--md-sys-shadow-3);
    border-color: var(--md-sys-color-primary);
}
.da-choose-card .da-choose-icon {
    width: 52px; height: 52px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-primary-container);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: var(--md-sys-spacing-md);
}
.da-choose-card h3 { font-size: var(--md-sys-typescale-title-large); margin-bottom: 4px; }
.da-choose-card p { font-size: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }

/* ===== 标题区 ===== */
.da-title {
    font-size: var(--md-sys-typescale-display-small);
    font-weight: 700;
    margin-bottom: var(--md-sys-spacing-xs);
    letter-spacing: -0.02em;
    color: var(--md-sys-color-on-surface);
}
.da-sub { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-medium); margin-bottom: var(--md-sys-spacing-xl); }

/* ===== 卡片（与 info-card 一致的 MD3 卡面） ===== */
.da-card {
    background: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-large);
    padding: var(--md-sys-spacing-xl);
    margin-bottom: var(--md-sys-spacing-lg);
    box-shadow: var(--md-sys-shadow-1);
}
.da-section-title {
    font-size: var(--md-sys-typescale-label-medium);
    font-weight: 600;
    color: var(--md-sys-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--md-sys-spacing-md);
}

/* ===== 字段（配合 style_new 的 form-input / form-textarea / form-hint） ===== */
.da-field { margin-bottom: var(--md-sys-spacing-lg); }
.da-field:last-child { margin-bottom: 0; }
.da-label {
    display: block;
    font-size: var(--md-sys-typescale-label-medium);
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin-bottom: var(--md-sys-spacing-sm);
}
.da-label .da-num {
    color: var(--md-sys-color-primary);
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
}
.da-label .da-optional {
    font-weight: 400;
    font-size: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-surface-variant);
    margin-left: 6px;
}
.da-hint { font-size: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); margin: 4px 0 8px; }

/* textarea：style_new 未单独定义，补齐为 form-input 同款 */
textarea.form-textarea {
    width: 100%;
    padding: var(--md-sys-spacing-md);
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    font-size: var(--md-sys-typescale-body-large);
    font-family: inherit;
    color: var(--md-sys-color-on-surface);
    outline: none;
    border-radius: var(--md-sys-shape-corner-medium);
    resize: vertical;
    min-height: 84px;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
textarea.form-textarea:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.16);
}

/* ===== 多选社交平台（胶囊） ===== */
.da-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.da-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: var(--md-sys-typescale-body-medium);
    cursor: pointer;
    user-select: none;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
.da-check:hover { border-color: var(--md-sys-color-primary); }
.da-check input { display: none; }
.da-check::before {
    content: '';
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    flex-shrink: 0;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.da-check.checked {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
    font-weight: 600;
}
.da-check.checked::before {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 2.5px var(--md-sys-color-surface);
}

/* ===== 协议 ===== */
.da-agreement-box {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface);
    max-height: 260px;
    overflow-y: auto;
    padding: var(--md-sys-spacing-md) var(--md-sys-spacing-lg);
    font-size: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.8;
    margin-bottom: var(--md-sys-spacing-md);
}
.da-agreement-box h4 { color: var(--md-sys-color-on-surface); margin: 14px 0 4px; font-size: var(--md-sys-typescale-body-medium); }
.da-agreement-box h4:first-child { margin-top: 0; }
.da-agreement-box p { margin: 0 0 6px; }

/* ===== 协议单选 ===== */
.da-radios { display: flex; gap: var(--md-sys-spacing-md); }
.da-radio {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 11px;
    font-size: var(--md-sys-typescale-body-large);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
.da-radio input { accent-color: var(--md-sys-color-primary); margin: 0; }
.da-radio:hover { border-color: var(--md-sys-color-primary); }
.da-radio.checked {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    font-weight: 600;
}
.da-radio.checked.no {
    border-color: var(--md-sys-color-error);
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

/* ===== 提交区 ===== */
.da-actions { display: flex; gap: var(--md-sys-spacing-md); align-items: center; }

.da-err {
    color: var(--md-sys-color-error);
    font-size: var(--md-sys-typescale-body-medium);
    min-height: 20px;
    margin-top: var(--md-sys-spacing-md);
}

/* ===== 成功态 ===== */
.da-success { text-align: center; padding: 60px 20px; }
.da-success .da-ok-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    font-size: 32px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--md-sys-spacing-lg);
}
.da-success h2 { margin-bottom: var(--md-sys-spacing-sm); color: var(--md-sys-color-on-surface); }
.da-success p { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-medium); margin-bottom: var(--md-sys-spacing-xl); }

/* ===== Toast ===== */
.da-toast {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface);
    padding: 11px 22px;
    border-radius: var(--md-sys-shape-corner-medium);
    font-size: var(--md-sys-typescale-body-medium);
    opacity: 0;
    pointer-events: none;
    transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
    z-index: 3000;
    max-width: 86vw;
}
.da-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.da-toast.error { background: var(--md-sys-color-error); color: #fff; }

@media (max-width: 640px) {
    .da-choose-grid { grid-template-columns: 1fr; }
    .da-card { padding: var(--md-sys-spacing-lg); }
}