/* ============================================================
   友情链接页 — 123ONE 标准组件库设计令牌
   使用 --dsd-* 变量体系，蓝色主题 #4F6EF7
   ============================================================ */

:root, .friendlinks-page, #dsd-fl-modal, #dsd-fl-rules-modal{
  --dsd-bg:#f6f7fb; --dsd-panel:#ffffff; --dsd-panel-2:#fbfbfe;
  --dsd-line:#e7e8ec; --dsd-line-strong:#dadce2;
  --dsd-ink:#1f2430; --dsd-ink-600:#454b57; --dsd-ink-400:#8a909c; --dsd-ink-200:#bcc0c8;
  --dsd-accent:#4F6EF7; --dsd-accent-2:#3a56d4; --dsd-accent-soft:#eef0ff;
  --dsd-ok:#0f9d58; --dsd-ok-bg:#ecfdf5;
  --dsd-bad:#e23b5a; --dsd-bad-bg:#fff5f5;
  --dsd-paid:#f59e0b; --dsd-paid-bg:#fff6e8;
  --dsd-radius-3:8px; --dsd-radius-4:10px; --dsd-radius-5:12px; --dsd-radius-6:14px; --dsd-radius-full:999px;
  --dsd-shadow-sm:0 2px 8px rgba(20,24,40,.04);
  --dsd-shadow-md:0 10px 30px rgba(20,24,40,.08);
  --dsd-shadow-xl:0 28px 60px rgba(20,24,40,.20);
  --dsd-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
  --dsd-fs-xs:11px; --dsd-fs-sm:13px; --dsd-fs-md:14px; --dsd-fs-lg:15px;
  --dsd-fs-xl:16px; --dsd-fs-2xl:19px; --dsd-fs-3xl:24px; --dsd-fs-4xl:32px;
  --dsd-fw-semi:600; --dsd-fw-bold:700; --dsd-fw-xbold:800;
  --dsd-t-fast:.12s; --dsd-t-normal:.15s;
}
.friendlinks-page{
  padding:48px 0 64px; font-family:var(--dsd-font-sans); color:var(--dsd-ink);
}
.friendlinks-page .wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---- 页面标题 ---- */
.fl-page-header{text-align:center;margin-bottom:48px}
.fl-page-header h1{font-size:36px;font-weight:var(--dsd-fw-xbold);color:var(--dsd-ink);margin:0 0 12px;letter-spacing:-.02em}
.fl-page-header p{font-size:var(--dsd-fs-lg);color:var(--dsd-ink-400);margin:0}

/* ---- 申请入口 ---- */
.fl-apply-section{text-align:center;margin-bottom:56px}
.fl-apply-btn{
  display:inline-flex; align-items:center; gap:8px; font-size:var(--dsd-fs-lg); font-weight:var(--dsd-fw-bold);
  font-family:var(--dsd-font-sans); padding:14px 44px; border-radius:var(--dsd-radius-full); border:0;
  background:linear-gradient(135deg,var(--dsd-accent),var(--dsd-accent-2)); color:#fff; cursor:pointer;
  transition:filter var(--dsd-t-normal),transform var(--dsd-t-fast); text-decoration:none;
}
.fl-apply-btn:hover{filter:brightness(1.08)}
.fl-apply-btn:active{transform:scale(.98)}

/* ---- 友链卡片网格 ---- */
.fl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:56px}
.fl-card{
  display:flex; align-items:center; gap:16px; padding:20px; border:1px solid var(--dsd-line);
  border-radius:var(--dsd-radius-5); background:var(--dsd-panel); text-decoration:none; color:inherit;
  transition:border-color var(--dsd-t-fast),box-shadow var(--dsd-t-fast);
}
.fl-card:hover{border-color:var(--dsd-accent);box-shadow:var(--dsd-shadow-sm)}
.fl-card--premium{border-color:var(--dsd-accent-soft);background:linear-gradient(135deg,var(--dsd-accent-soft),var(--dsd-panel) 60%)}
.fl-card--premium:hover{border-color:var(--dsd-accent);box-shadow:var(--dsd-shadow-md)}
.fl-card-icon{
  width:48px; height:48px; border-radius:var(--dsd-radius-3); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--dsd-accent-soft); color:var(--dsd-accent);
}
.fl-card-body{flex:1;min-width:0}
.fl-card-name{font-size:var(--dsd-fs-md);font-weight:var(--dsd-fw-bold);color:var(--dsd-ink);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-card-desc{font-size:var(--dsd-fs-sm);color:var(--dsd-ink-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-tier-badge{
  font-size:var(--dsd-fs-xs); font-weight:var(--dsd-fw-semi); padding:2px 10px; border-radius:var(--dsd-radius-1);
  white-space:nowrap; flex:0 0 auto;
}
.fl-tier-badge--basic{background:var(--dsd-panel-2);color:var(--dsd-ink-400)}
.fl-tier-badge--premium{background:linear-gradient(135deg,var(--dsd-accent),var(--dsd-accent-2));color:#fff}

/* ---- 空状态 ---- */
.fl-empty{text-align:center;padding:64px 20px;color:var(--dsd-ink-400)}
.fl-empty svg{margin-bottom:16px;opacity:.3}
.fl-empty p{font-size:var(--dsd-fs-xl);margin:0 0 8px;font-weight:var(--dsd-fw-semi)}

/* ---- 申请规则 ---- */
.fl-rules{max-width:640px;margin:0 auto 56px;padding:28px;background:var(--dsd-panel-2);border:1px solid var(--dsd-line);border-radius:var(--dsd-radius-5)}
.fl-rules h3{font-size:var(--dsd-fs-2xl);font-weight:var(--dsd-fw-bold);color:var(--dsd-ink);margin:0 0 16px}
.fl-rules ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.fl-rules li{font-size:var(--dsd-fs-md);color:var(--dsd-ink-600);line-height:1.65;display:flex;align-items:flex-start;gap:10px}
.fl-rules li::before{content:'';flex:0 0 6px;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--dsd-accent)}

/* ============================================================
   弹窗系统（友链页用 display 控制，非 hidden 属性）
   ============================================================ */
#dsd-fl-modal{
  position:fixed; inset:0; z-index:99999; background:rgba(20,24,40,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto;
}
#dsd-fl-modal[style*="flex"]{display:flex!important}
.fl-modal-box{
  background:var(--dsd-panel); border:none; border-radius:var(--dsd-radius-6); max-width:640px; width:100%;
  box-shadow:var(--dsd-shadow-xl); overflow:hidden; position:relative;
}
.fl-modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:var(--dsd-radius-3); border:none;
  background:var(--dsd-panel-2); font-size:20px; line-height:34px; cursor:pointer; color:var(--dsd-ink-400); z-index:1;
  transition:background var(--dsd-t-fast),color var(--dsd-t-fast);
}
.fl-modal-close:hover{background:var(--dsd-line);color:var(--dsd-ink)}

/* 表单步骤 */
.fl-step{padding:36px 32px 28px;background:var(--dsd-panel);position:relative;z-index:1}
.fl-step h2{font-size:22px;font-weight:var(--dsd-fw-xbold);margin:0 0 8px;text-align:center;color:var(--dsd-ink);letter-spacing:-.01em}
.fl-step-sub{text-align:center;color:var(--dsd-ink-400);margin:0 0 24px;font-size:var(--dsd-fs-md)}
.fl-field{margin-bottom:16px}
.fl-field label{display:block;font-weight:var(--dsd-fw-semi);margin-bottom:6px;font-size:var(--dsd-fs-md);color:var(--dsd-ink-600)}
.fl-field label .req{color:var(--dsd-bad)}
.fl-field input,
.fl-field select,
.fl-field textarea{
  width:100%; padding:11px 16px; border:1.5px solid var(--dsd-line-strong); border-radius:var(--dsd-radius-3);
  font-size:var(--dsd-fs-lg); font-family:var(--dsd-font-sans); color:var(--dsd-ink); background:var(--dsd-panel); outline:none;
  transition:border-color var(--dsd-t-fast),box-shadow var(--dsd-t-fast); line-height:1.5;
}
.fl-field input:focus,
.fl-field select:focus,
.fl-field textarea:focus{border-color:var(--dsd-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsd-accent) 15%,transparent)}
.fl-field textarea{resize:vertical}

/* 价格汇总 */
.fl-total-bar{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding:16px 20px;
  background:var(--dsd-panel-2); border-radius:var(--dsd-radius-3);
}
.fl-total-label{font-weight:var(--dsd-fw-semi);font-size:var(--dsd-fs-lg);color:var(--dsd-ink)}
.fl-total-price{font-size:24px;font-weight:var(--dsd-fw-xbold);color:var(--dsd-accent)}

/* 按钮 */
.fl-btn-row{display:flex;gap:12px}
.fl-btn{
  flex:1; padding:13px; border-radius:var(--dsd-radius-3); font-size:var(--dsd-fs-lg); font-weight:var(--dsd-fw-bold);
  font-family:var(--dsd-font-sans); cursor:pointer; transition:filter var(--dsd-t-normal); border:0;
}
.fl-btn--primary{background:linear-gradient(135deg,var(--dsd-accent),var(--dsd-accent-2));color:#fff}
.fl-btn--primary:hover{filter:brightness(1.08)}
.fl-btn--outline{background:transparent;color:var(--dsd-ink);border:1.5px solid var(--dsd-line-strong)}
.fl-btn--outline:hover{background:var(--dsd-panel-2)}
.fl-btn--ghost{background:transparent;color:var(--dsd-ink-400);border:none;font-weight:var(--dsd-fw-semi);font-size:var(--dsd-fs-md)}
.fl-btn--ghost:hover{color:var(--dsd-ink)}
.fl-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;filter:none}

/* 支付完成步骤 */
.fl-pay-success-icon{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  background:var(--dsd-accent-soft); display:flex; align-items:center; justify-content:center;
}
.fl-order-info{background:var(--dsd-panel-2);border-radius:var(--dsd-radius-3);padding:20px;margin-bottom:24px}
.fl-order-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.fl-order-row:last-child{margin-bottom:0;padding-top:12px;border-top:1px dashed var(--dsd-line)}
.fl-order-label{color:var(--dsd-ink-400);font-size:var(--dsd-fs-md)}
.fl-order-value{font-size:var(--dsd-fs-md);font-weight:var(--dsd-fw-semi);color:var(--dsd-ink)}
.fl-order-amount{font-size:26px;font-weight:var(--dsd-fw-xbold);color:var(--dsd-accent)}
.fl-status-hint{text-align:center;font-size:var(--dsd-fs-sm);color:var(--dsd-ink-400);margin-bottom:16px;min-height:18px}
.fl-pay-actions{display:flex;flex-direction:column;gap:10px}

/* 规则确认弹窗 */
#dsd-fl-rules-modal{
  position:fixed; inset:0; z-index:999999; background:rgba(20,24,40,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
#dsd-fl-rules-modal[style*="flex"]{display:flex!important}
.fl-rules-modal-box{
  background:var(--dsd-panel); border:none; border-radius:var(--dsd-radius-6); max-width:500px; width:100%;
  padding:32px; box-shadow:var(--dsd-shadow-xl);
}
.fl-rules-modal-box h3{font-size:var(--dsd-fs-2xl);font-weight:var(--dsd-fw-xbold);margin:0 0 16px;color:var(--dsd-ink)}
.fl-rules-modal-box .rules-text{font-size:var(--dsd-fs-md);color:var(--dsd-ink-600);line-height:2;margin-bottom:24px;white-space:pre-line}

/* ---- 响应式 ---- */
@media(max-width:640px){
  .friendlinks-page .wrap{padding:0 16px}
  .fl-page-header h1{font-size:28px}
  .fl-grid{grid-template-columns:1fr}
  .fl-step{padding:28px 20px 24px}
  .fl-btn-row{flex-direction:column}
}