/* ============================================================
   WINDQI 导航页 — 干净蓝调风格（基于 ds-test）
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

:root {
    --bg:            #f5f7fb;
    --surface:       #ffffff;
    --surface-hover: #f0f2f8;
    --border:        #e2e6ef;
    --border-strong: #c5cde0;
    --text:          #0f1629;
    --text-muted:    #5a6580;
    --text-dim:      #8892a8;
    --accent:        #4d6bfe;
    --accent-hover:  #3b54e0;
    --accent-light:  #edf0ff;
    --accent-strong: #1a2b4a;
    --radius:        14px;
    --radius-sm:     10px;
    --shadow:        0 1px 3px rgba(15,22,41,.06),0 4px 12px rgba(15,22,41,.06);
    --shadow-lg:      0 4px 16px rgba(15,22,41,.10),0 12px 40px rgba(15,22,41,.08);
    --maxw:          880px;
    --font:          -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
    --mono:          "SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:var(--font);line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

.wrap{
    width:min(100% - 32px,var(--maxw));
    margin:0 auto;
    padding:32px 0 48px;
}

/* ============================================================
   头部
   ============================================================ */
.page-header{
    text-align:center;
    padding:32px 0 24px;
}
.visit-counter{
    font-size:0.74rem;color:var(--text-dim);
    margin-bottom:8px;letter-spacing:.02em;
}
.visit-counter #busuanzi_value_site_pv{color:var(--text-muted);font-weight:600}

.title-section{display:flex;flex-direction:column;align-items:center;gap:6px}

.title-section h1{
    font-size:clamp(1.6rem,4vw,2.2rem);
    font-weight:800;letter-spacing:-.04em;
    color:var(--accent-strong);margin:0;
}
.title-section h1 .highlight{
    color:var(--accent);font-weight:800;
}
.friend-link{
    font-size:0.85rem;color:var(--text-muted);margin-top:0;
}
.friend-link-a{
    color:var(--accent);font-weight:500;
    border-bottom:1px solid transparent;
    transition:border-color .15s;
}
.friend-link-a:hover{border-bottom-color:var(--accent)}

.section-divider{
    width:48px;height:2px;background:var(--border);
    border:none;margin:14px auto;
}
.promo-line a:hover{border-bottom-color:var(--accent)}

.announcement{
    font-size:0.82rem;color:var(--text-muted);line-height:1.6;
    max-width:520px;margin:10px auto 0;padding:10px 16px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-sm);
}
.announcement+.announcement{margin-top:6px}
.announcement a{
    color:var(--accent);font-weight:500;
    border-bottom:1px solid transparent;transition:border-color .15s;
}
.announcement a:hover{border-bottom-color:var(--accent)}

/* ============================================================
   社交按钮
   ============================================================ */
.social-section{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}

.social-btn{
    width:48px;height:48px;border-radius:50%;
    background:var(--surface);border:1px solid var(--border);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    outline:none;-webkit-tap-highlight-color:transparent;
    box-shadow:var(--shadow);
    transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;
}
.social-btn:hover{background:var(--surface-hover);border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.social-btn:active{transform:scale(.96)}
.social-btn svg{width:20px;height:20px;fill:none;stroke:var(--text-muted);stroke-width:1.6;transition:stroke .15s}
.social-btn:hover svg{stroke:var(--accent)}
.social-btn.qq-btn svg{fill:rgba(77,107,254,.08);stroke:var(--text-muted)}
.social-btn.brand-fill svg{fill:var(--text-muted);stroke:none}
.social-btn.brand-fill:hover svg{fill:var(--accent)}

/* ============================================================
   项目区
   ============================================================ */
.projects-section{margin-top:24px}
.section-head{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.section-num{color:var(--accent);font-weight:700;font-size:0.78rem;letter-spacing:.08em;text-transform:uppercase}
.section-head h2{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.03em;color:var(--accent-strong)}
.section-head p{margin:0;color:var(--text-muted);font-size:0.95rem}

.cards-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.project-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);
    padding:20px;display:flex;flex-direction:column;gap:10px;
    transition:transform .15s,box-shadow .15s,border-color .15s;
    position:relative;
}
.project-card:hover{
    transform:translateY(-2px);border-color:var(--accent);
    box-shadow:var(--shadow-lg);
}
.project-card .card-title{
    font-size:1.05rem;font-weight:700;color:var(--text);
    letter-spacing:-.01em;line-height:1.3;
}
.project-card .card-desc{
    font-size:0.88rem;color:var(--text-muted);line-height:1.6;
    flex-grow:1;
}
.project-card .card-btn{
    display:inline-flex;align-self:flex-start;
    padding:8px 16px;background:var(--accent);color:#fff;
    border-radius:var(--radius-sm);font-size:0.85rem;font-weight:600;
    transition:background .15s,transform .1s;
}
.project-card .card-btn:hover{background:var(--accent-hover)}
.project-card .card-btn:active{transform:scale(.97)}

/* ============================================================
   弹窗（联系 / 更新日志 / 用户协议）
   ============================================================ */
.modal-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(15,22,41,.45);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal-dialog{
    background:var(--surface);border-radius:var(--radius);
    box-shadow:var(--shadow-lg);width:100%;max-width:560px;
    max-height:85vh;display:flex;flex-direction:column;
    overflow:hidden;
    transform:translateY(8px) scale(.98);
    transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.modal-overlay.active .modal-dialog{transform:translateY(0) scale(1)}

.modal-platform-icon{
    width:44px;height:44px;margin:0 auto 12px;
    border-radius:50%;background:var(--accent-light);
    display:flex;align-items:center;justify-content:center;
}
.modal-platform-icon svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6}
.modal-platform-icon.brand-icon svg{fill:var(--accent);stroke:none}
.modal-dialog .modal-contact-label{
    font-size:0.78rem;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.08em;text-align:center;
}
.modal-dialog .modal-contact-info{
    font-size:1.15rem;font-weight:600;color:var(--text);
    letter-spacing:-.01em;margin:6px 0 0;text-align:center;word-break:break-all;
}

.modal-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.modal-header-title{font-size:0.95rem;font-weight:600;color:var(--text)}
.modal-close-btn{
    width:32px;height:32px;border-radius:50%;
    background:transparent;border:1px solid transparent;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .15s,border-color .15s;color:var(--text-muted);
}
.modal-close-btn:hover{background:var(--surface-hover);border-color:var(--border);color:var(--text)}
.modal-close-btn svg{width:14px;height:14px;stroke-width:2}

.modal-content{padding:20px;overflow-y:auto;flex:1;min-height:0}

.changelog-dialog{max-width:560px}

/* 一次性提示弹窗 */
.welcome-dialog{
    max-width:380px;
    padding:36px 28px 24px;
    text-align:center;
}
.welcome-header:empty{display:none}
.welcome-body:empty{display:none}
.welcome-header{
    font-size:1.1rem;font-weight:700;color:var(--text);
    margin-bottom:10px;letter-spacing:-.01em;
}
.welcome-body{
    font-size:0.9rem;color:var(--text-muted);line-height:1.6;
    margin-bottom:18px;
}
.welcome-actions{display:flex;justify-content:center;gap:8px}
.welcome-dismiss{
    font-family:inherit;font-size:0.85rem;
    background:var(--bg);color:var(--text-muted);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:8px 18px;cursor:pointer;
    transition:background .15s,border-color .15s,color .15s;
}
.welcome-dismiss:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}

/* ============================================================
   页脚
   ============================================================ */
.footer-section{
    margin-top:32px;
    padding-top:24px;border-top:1px solid var(--border);
    text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.footer-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.footer-trigger{
    font-size:0.8rem;color:var(--text-dim);
    background:var(--surface);border:1px solid var(--border);
    border-radius:999px;padding:6px 14px;cursor:pointer;
    font-family:inherit;transition:background .15s,border-color .15s,color .15s;
}
.footer-trigger:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}

/* ============================================================
   用户协议
   ============================================================ */
.agreement-section{font-size:0.95rem;font-weight:700;color:var(--accent-strong);margin:18px 0 8px;letter-spacing:-.01em}
.agreement-section:first-child{margin-top:0}
.agreement-line{font-size:0.88rem;color:var(--text-muted);line-height:1.7;margin-bottom:6px}
.agreement-list{font-size:0.88rem;color:var(--text-muted);line-height:1.7;padding-left:14px;margin-bottom:4px}
.agreement-label{color:var(--text);font-weight:500}
.agreement-line a{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .15s}
.agreement-line a:hover{border-bottom-color:var(--accent)}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:768px){
    .wrap{width:min(100% - 24px,var(--maxw))}
    .cards-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:560px){
    .cards-grid{grid-template-columns:1fr;gap:12px}
    .page-header{padding:20px 0 16px}
    .title-section h1{font-size:1.6rem}
}