/* ===========================================================================
   项目下载 / 结算页（/downcode/{id}）
   ---------------------------------------------------------------------------
   这一段原来整段写在 Views/Download/Download.cshtml 的 <style> 里。搬出来的三个
   理由跟登录页那次一样，而且这一页刚刚**声明了窄屏**（ViewBag.Responsive），
   第三个尤其要命：

     · 行内那份进不了 asp-append-version 的内容哈希 —— 改了样式，来过的人还是旧的；
     · 每次请求跟着 HTML 重发一遍；
     · **扫 CSS 的守护用例看不见它** —— 下面那两档窄屏规则如果留在行内，
       ResponsiveMobileTest 里关于这一页的每一条都会变成假绿。

   命名空间是 dl-，自给自足，不依赖任何老样式。别跟 Content/style/download.css
   搞混：那是老「下载汇总」页的，两份没有关系（而且线上那一份走的是
   img.51aspx.com 上的同名文件，仓库里这份根本不生效）。
   =========================================================================== */

.dl-wrap { padding: 24px 0 60px; }
.dl-crumb { font-size: 12px; color: #999; margin-bottom: 16px; }
.dl-crumb a { color: #999; }
.dl-crumb a:hover { color: #40c641; }
.dl-crumb span { color: #666; }

.dl-grid { display: flex; align-items: flex-start; gap: 20px; }
.dl-main { flex: 1 1 auto; min-width: 0; }
.dl-side { flex: 0 0 360px; width: 360px; }

.dl-card { background: #fff; border: 1px solid #e6e8eb; border-radius: 4px; margin-bottom: 16px; }
.dl-card-hd { padding: 14px 20px; border-bottom: 1px solid #f0f2f4; font-size: 15px; color: #333; font-weight: 700; }
.dl-card-bd { padding: 20px; }

.dl-code { display: flex; gap: 20px; }
.dl-code-cover { flex: 0 0 200px; }
.dl-code-cover img { width: 200px; height: 150px; object-fit: cover; border-radius: 3px; background: #f5f6f8; }
.dl-code-info { flex: 1 1 auto; min-width: 0; }
.dl-code-title { font-size: 20px; line-height: 1.4; margin: 0 0 10px; font-weight: 700; }
.dl-code-title a { color: #222; }
.dl-code-title a:hover { color: #40c641; }
.dl-tag { display: inline-block; vertical-align: 3px; margin-left: 8px; padding: 1px 8px; border-radius: 2px;
          font-size: 12px; font-weight: 400; color: #fff; }
.dl-tag-free { background: #40c641; }
.dl-tag-share { background: #3ba3f5; }
.dl-tag-biz { background: #fb760a; }
.dl-meta { list-style: none; padding: 0; margin: 0; color: #888; font-size: 13px; }
.dl-meta li { padding: 4px 0; }
.dl-meta span { color: #555; }

.dl-who { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #eceef0; color: #666; font-size: 13px; }
.dl-who img.dl-avatar { width: 28px; height: 28px; border-radius: 50%; vertical-align: -9px; margin-right: 6px; }
.dl-who img.dl-badge { width: 22px; height: 22px; vertical-align: -6px; margin: 0 4px 0 10px; }

.dl-bill { list-style: none; padding: 0; margin: 0; }
.dl-bill li { display: flex; justify-content: space-between; align-items: baseline;
              padding: 9px 0; font-size: 14px; color: #555; border-bottom: 1px dashed #f0f2f4; }
.dl-bill li:last-child { border-bottom: 0; }
.dl-bill .dl-num { color: #333; font-family: Arial, sans-serif; }
.dl-bill .dl-note { color: #999; font-size: 12px; font-weight: 400; }
.dl-bill li.dl-sum { border-top: 1px solid #e6e8eb; border-bottom: 0; margin-top: 6px; padding-top: 14px; }
.dl-bill li.dl-sum .dl-label { font-size: 15px; color: #333; font-weight: 700; }
.dl-bill li.dl-sum .dl-num { font-size: 24px; color: #fb760a; font-weight: 700; }
.dl-bill li.dl-cut .dl-num { color: #40c641; }
.dl-strike { text-decoration: line-through; color: #bbb; }

.dl-hint { margin: 14px 0 0; padding: 10px 14px; border-radius: 3px; background: #f6f8fa;
           color: #666; font-size: 13px; line-height: 1.7; }
.dl-hint a { color: #1684fc; }
.dl-hint strong { color: #fb760a; }

.dl-terms { list-style: none; padding: 0; margin: 0; color: #777; font-size: 13px; line-height: 2; }
.dl-terms a { color: #40c641; }

/* 结算面板 */
.dl-side .dl-card { position: sticky; top: 16px; }
.dl-pay-head { padding: 18px 20px; background: #fafbfc; border-bottom: 1px solid #f0f2f4; }
.dl-pay-head .dl-due-label { font-size: 13px; color: #888; }
.dl-pay-head .dl-due { font-size: 30px; font-weight: 700; color: #fb760a; font-family: Arial, sans-serif; }
.dl-pay-head .dl-due-unit { font-size: 14px; color: #fb760a; margin-left: 2px; }
.dl-pay-bd { padding: 18px 20px; }
.dl-pay-line { font-size: 13px; color: #777; padding: 3px 0; }
.dl-pay-line b { color: #333; font-weight: 400; }

.dl-ways { list-style: none; padding: 0; margin: 14px 0 0; }
.dl-ways li { margin-bottom: 8px; }
.dl-ways label { display: block; margin: 0; padding: 11px 14px; border: 1px solid #e2e5e8; border-radius: 3px;
                 cursor: pointer; font-weight: 400; color: #444; font-size: 14px; transition: border-color .15s; }
.dl-ways label:hover { border-color: #b9d9bf; }
.dl-ways input { margin-right: 8px; vertical-align: -2px; }
.dl-ways input:checked + span { color: #222; font-weight: 700; }
.dl-ways .dl-way-sub { display: block; margin: 3px 0 0 22px; font-size: 12px; color: #999; font-weight: 400; }

.dl-field { margin-top: 10px; }
.dl-field .form-control { height: 38px; }
.dl-field-sms { display: flex; gap: 8px; }
.dl-field-sms .form-control { flex: 1 1 auto; }
.dl-sms-btn { flex: 0 0 auto; padding: 0 12px; height: 38px; border: 1px solid #e2e5e8; background: #fff;
              color: #40c641; border-radius: 3px; font-size: 13px; cursor: pointer; }
.dl-sms-btn[disabled] { color: #aaa; cursor: default; }

.dl-agree { margin: 16px 0 0; font-size: 13px; color: #777; }
.dl-agree label { font-weight: 400; margin: 0; }
.dl-agree a { color: #40c641; }

.dl-go { display: block; width: 100%; margin-top: 14px; padding: 12px 0; border: 0; border-radius: 3px;
         background: #40c641; color: #fff; font-size: 16px; text-align: center; cursor: pointer; }
.dl-go:hover { background: #37b158; color: #fff; }
.dl-go[disabled] { background: #cfd4d8; cursor: default; }
.dl-sub-go { display: block; width: 100%; margin-top: 8px; padding: 9px 0; border: 1px solid #e2e5e8;
             border-radius: 3px; background: #fff; color: #666; font-size: 13px; text-align: center; cursor: pointer; }
.dl-sub-go:hover { color: #40c641; border-color: #b9d9bf; }
.dl-foot-note { margin: 12px 0 0; font-size: 12px; color: #aaa; line-height: 1.8; text-align: center; }
.dl-foot-note a { color: #999; text-decoration: underline; }

label.form_error { display: block; margin: 10px 0 0; }

/* ===========================================================================
   窄屏
   ---------------------------------------------------------------------------
   拆单栏这一档是一笔账，不是一个好看的整数：
     右栏（结算面板）写死 360（.dl-side 是 flex: 0 0 360px）
     + 两栏之间 gap 20
     + 左栏至少 480（「项目授权 …… 1800.00 RMB」这种两端对齐的行，再窄就折行）
     = 860，容器左右各留 12（common5/login 那一档），
   反推出「窗口窄于 884 就必须拆单栏」。

   这里写 992 是**留了余量**：两栏其实还排得下的时候就已经拆了。
   往宽了拆没有风险，往窄了拆才会挤。改 .dl-side 的宽度或 gap，这笔账要重算，
   ResponsiveMobileTest 会替你算（下载页那一条）。
   =========================================================================== */
@media (max-width: 992px) {
    .dl-grid { display: block; }
    .dl-side { width: auto; }
    .dl-side .dl-card { position: static; }
    .dl-code { display: block; }
    .dl-code-cover { margin-bottom: 14px; }
    .dl-code-cover img { width: 100%; height: auto; }
}

/* 手机竖屏。跟 login.css / responsive.css 用同一个 760，别另起一个数 ——
   同一部手机上三套页面在不同的宽度上换版式，用起来是错乱的。 */
@media (max-width: 760px) {

    /* 卡片左右各 20 的内边距是给 820 宽的左栏留的。390 上卡片只有 366，
       光内边距就吃掉 40（11%），「余额不足的 1800.00 RMB，可以用微信或
       支付宝支付」这句话会多折一行，最后一行只剩两个字。
       收到 14 —— 跟登录页窄屏那一档（.form_con 24px 16px）是同一个量级。 */
    .dl-card-hd { padding: 12px 14px; }
    .dl-card-bd { padding: 14px; }
    .dl-pay-head { padding: 14px; }
    .dl-pay-bd { padding: 14px; }

    /* 20px 的标题在 338 宽的一行里要折三行 */
    .dl-code-title { font-size: 18px; }

    /* 上下留白同样是按桌面留的 */
    .dl-wrap { padding: 14px 0 30px; }
}