/* ===== YunMsg download page — premium cloud theme ===== */
:root{
  --bg:#0b1220; --bg2:#0f1830; --panel:rgba(255,255,255,.04); --panel-brd:rgba(255,255,255,.09);
  --txt:#e8edf7; --muted:#9aa7c7; --accent:#38bdf8; --accent2:#7dd3fc; --grad:linear-gradient(135deg,#7dd3fc,#38bdf8);
  --shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
[data-theme="light"]{
  --bg:#f5f8ff; --bg2:#eaf1ff; --panel:rgba(255,255,255,.7); --panel-brd:rgba(15,30,60,.1);
  --txt:#0f1830; --muted:#5b6886; --accent:#0ea5e9; --accent2:#38bdf8; --shadow:0 24px 50px -24px rgba(20,40,90,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);line-height:1.6;overflow-x:hidden;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
code{background:rgba(125,211,252,.14);padding:.1em .4em;border-radius:6px;font-family:"SF Mono",Consolas,monospace;font-size:.9em}

/* background orbs */
.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:float 16s ease-in-out infinite}
.orb-1{width:480px;height:480px;background:#1e6fff;top:-120px;left:-80px}
.orb-2{width:380px;height:380px;background:#38bdf8;bottom:-100px;right:-60px;animation-delay:-5s}
.orb-3{width:300px;height:300px;background:#7c3aed;top:40%;left:55%;animation-delay:-9s}
[data-theme="light"] .orb{opacity:.28}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 6vw;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid var(--panel-brd)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem}
.brand-logo{filter:drop-shadow(0 6px 14px rgba(56,189,248,.4))}
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-name small{font-size:.6rem;color:var(--muted);font-weight:500;letter-spacing:.2em}
.nav-links{display:flex;gap:2px}
.nav-links a{color:var(--muted);font-size:.95rem;transition:color .2s;display:inline-flex;align-items:center;min-height:44px;padding:8px 12px}
.nav-links a:hover{color:var(--txt)}
.theme-toggle{background:var(--panel);border:1px solid var(--panel-brd);color:var(--txt);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.05rem;transition:transform .3s}
.theme-toggle:hover{transform:rotate(25deg) scale(1.05)}
[data-theme="dark"] .ico-sun{display:none}
[data-theme="light"] .ico-moon{display:none}

/* hero */
.hero{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:80px 6vw 70px;max-width:1280px;margin:0 auto}
.pill{display:inline-block;padding:6px 14px;border:1px solid var(--panel-brd);border-radius:999px;background:var(--panel);font-size:.82rem;color:var(--accent2);margin-bottom:22px}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:1.08rem;max-width:560px;margin:22px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{padding:14px 28px;border-radius:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s}
.btn-primary{background:var(--grad);color:#04121f;box-shadow:0 14px 30px -10px rgba(56,189,248,.55)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(56,189,248,.7)}
.btn-ghost{background:var(--panel);border-color:var(--panel-brd);color:var(--txt)}
.btn-ghost:hover{transform:translateY(-3px)}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;color:var(--muted);font-size:.9rem}

/* phone mock */
.hero-visual{display:flex;justify-content:center}
.phone{width:300px;height:620px;border-radius:44px;background:linear-gradient(160deg,#101a33,#0a1124);border:1px solid var(--panel-brd);box-shadow:var(--shadow);padding:14px;position:relative;animation:rise 6s ease-in-out infinite}
[data-theme="light"] .phone{background:linear-gradient(160deg,#dce8ff,#c9d8f5)}
@keyframes rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.phone-notch{width:120px;height:22px;background:#050a16;border-radius:0 0 16px 16px;margin:0 auto}
[data-theme="light"] .phone-notch{background:#9fb3da}
.screen{background:#0a1326;border-radius:30px;height:calc(100% - 36px);overflow:hidden;display:flex;flex-direction:column}
[data-theme="light"] .screen{background:#eef4ff}
.chat-top{padding:10px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--panel-brd);color:var(--accent2)}
.chat-msgs{flex:1;overflow-y:auto;padding:8px 0}
.c-row{display:flex;gap:8px;padding:4px 12px;align-items:flex-start}
.c-row.right{flex-direction:row-reverse}
.c-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;margin-top:2px}
.c-body{max-width:70%}
.c-name{font-size:10px;color:var(--muted);margin-bottom:3px}
.c-row.right .c-name{text-align:right}
.c-bub{padding:7px 10px;border-radius:12px;font-size:12px;line-height:1.5;word-break:break-word}
.c-bub.in{background:#16243f;border-bottom-left-radius:3px}
[data-theme="light"] .c-bub.in{background:#fff}
.c-bub.out{background:var(--grad);color:#04121f;border-bottom-right-radius:3px}
.c-bub.bot{background:#1a2c4d;border-bottom-left-radius:3px}
[data-theme="light"] .c-bub.bot{background:#e3edff}
.c-bub.pic{padding:2px;overflow:hidden}
.pic-box{padding:18px 14px;text-align:center;font-size:24px;background:rgba(255,255,255,.04);border-radius:10px;color:var(--muted)}
.bot-tag{display:inline-block;background:#38bdf8;color:#04121f;font-size:8px;padding:1px 5px;border-radius:4px;margin-right:4px;font-weight:700;vertical-align:middle}
.c-sys{text-align:center;font-size:12px;color:var(--muted);padding:6px 0}
.composer{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-top:1px solid var(--panel-brd);color:var(--muted);font-size:11px}
.send{color:var(--accent)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* sections */
.section{position:relative;z-index:1;padding:80px 6vw;max-width:1280px;margin:0 auto}
.alt{max-width:none;background:var(--bg2)}
.sec-title{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:800;letter-spacing:-.01em;text-align:center}
.sec-sub{color:var(--muted);text-align:center;margin-top:10px;margin-bottom:46px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--panel);border:1px solid var(--panel-brd);border-radius:20px;padding:30px;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-ico{font-size:1.8rem;margin-bottom:14px}
.card h3{font-size:1.15rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.95rem}

/* download */
.dl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.dl-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 18px;background:var(--panel);border:1px solid var(--panel-brd);border-radius:20px;text-align:center;transition:transform .3s,box-shadow .3s,border-color .3s}
.dl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--accent)}
.dl-ico{font-size:2.4rem}
.dl-info h3{font-size:1.05rem}
.dl-info small{color:var(--muted);font-size:.78rem}
.dl-go{margin-top:6px;padding:8px 18px;border-radius:10px;background:var(--grad);color:#04121f;font-weight:600;font-size:.85rem}
.dl-note{text-align:center;color:var(--muted);margin-top:26px;font-size:.92rem}

/* bot */
.bot-wrap{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;max-width:1280px;margin:0 auto;padding:0 6vw}
.feat-list{list-style:none;margin-top:20px}
.feat-list li{padding:10px 0;color:var(--muted)}
.feat-list b{color:var(--txt)}
.code{background:#0a1124;border:1px solid var(--panel-brd);border-radius:16px;padding:24px;overflow:auto;font-size:.85rem;color:#cfe3ff;line-height:1.7}
[data-theme="light"] .code{background:#0f1830;color:#dbe7ff}

/* faq */
.faq{max-width:780px;margin:0 auto}
.faq details{background:var(--panel);border:1px solid var(--panel-brd);border-radius:14px;padding:18px 22px;margin-bottom:14px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--muted);margin-top:10px;font-size:.95rem}

/* footer */
.footer{position:relative;z-index:1;border-top:1px solid var(--panel-brd);padding:46px 6vw;text-align:center;color:var(--muted)}
.foot-brand{font-weight:700;color:var(--txt);margin-bottom:12px}
.foot-links{display:flex;gap:22px;justify-content:center;margin-bottom:12px}
.foot-links a:hover{color:var(--accent)}
.foot-copy{font-size:.85rem}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-cta,.hero-meta{justify-content:center}
  .lead{margin-left:auto;margin-right:auto}
  .cards{grid-template-columns:1fr 1fr}
  .dl-grid{grid-template-columns:1fr 1fr}
  .bot-wrap{grid-template-columns:1fr}
  .nav-links{display:flex;gap:0;flex-wrap:wrap;justify-content:center;font-size:13px}
}
@media(max-width:560px){
  .cards{grid-template-columns:1fr}
  .dl-grid{grid-template-columns:1fr 1fr}
  .hero{padding-top:50px}
}

/* Auth modal */
.modal-overlay{display:none !important;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.show{display:flex !important}
.modal-card{background:var(--bg);border:1px solid var(--panel-brd);border-radius:16px;padding:28px;width:360px;max-width:90vw;position:relative;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.modal-x{position:absolute;top:10px;right:14px;font-size:20px;color:var(--muted);cursor:pointer}
.modal-card .auth-tabs{display:flex;gap:0;margin-bottom:20px}
.modal-card .auth-tab{flex:1;padding:10px 0;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-size:15px;cursor:pointer;transition:.2s}
.modal-card .auth-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.modal-card input{width:100%;padding:10px 14px;margin-bottom:12px;border:1px solid var(--panel-brd);border-radius:8px;background:var(--bg);color:var(--txt);font-size:14px;box-sizing:border-box}
.modal-card input:focus{outline:none;border-color:var(--accent)}
.modal-card .remember{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:16px}
.modal-card .remember input{width:auto;margin:0}
.modal-card .remember a{color:var(--accent)}
.modal-card .auth-msg{font-size:13px;color:#f87171;margin-top:8px;text-align:center}
/* legacy auth-box styles kept for compatibility */
.auth-box{max-width:380px;margin:0 auto;padding:28px;background:var(--panel);border:1px solid var(--panel-brd);border-radius:16px}
.auth-box input{width:100%;padding:10px 14px;margin-bottom:12px;border:1px solid var(--panel-brd);border-radius:8px;background:var(--bg);color:var(--txt);font-size:14px;box-sizing:border-box}
.auth-box input:focus{outline:none;border-color:var(--accent)}
.auth-box .remember{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:16px}
.auth-box .remember input{width:auto;margin:0}
.auth-box .remember a{color:var(--accent)}
.auth-msg{font-size:13px;color:#f87171;margin-top:8px;text-align:center}
#logout-btn{display:block;margin:16px auto}
.nav-user{font-size:13px;color:var(--accent);margin-left:12px}
/* ===== Android APK Install Guide Modal ===== */
.install-guide-card { width: 440px; max-width: 92vw; padding: 32px 28px 24px; }
.install-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.install-icon { font-size: 2rem; }
.install-header h3 { font-size: 1.2rem; font-weight: 700; color: var(--txt); }
.install-sub { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }
.install-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.install-steps li { display: flex; gap: 14px; align-items: flex-start; }
.step-num { 
  width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  background: var(--grad); color: #04121f; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(56,189,248,.3);
}
.step-body { display: flex; flex-direction: column; gap: 2px; }
.step-body strong { font-size: .92rem; color: var(--txt); }
.step-body span { font-size: .82rem; color: var(--muted); }
.step-body code { font-size: .8rem; }
.install-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.install-actions .btn { flex: 1; min-width: 140px; text-align: center; }
.install-tip { 
  font-size: .8rem; color: var(--accent2); text-align: center;
  padding: 10px 14px; background: rgba(125,211,252,.08);
  border-radius: 10px; border: 1px solid rgba(125,211,252,.15);
}
/* mobile tweaks */
@media(max-width:480px) {
  .install-guide-card { padding: 24px 16px 20px; }
  .install-steps li { gap: 10px; }
  .step-num { width: 28px; height: 28px; min-width: 28px; font-size: .78rem; }
  .install-actions { flex-direction: column; }
}

/* dl-grid-center：4 张卡在桌面端居中，左右留白相等 */
@media(min-width:981px){.dl-grid{grid-template-columns:repeat(4,minmax(0,246px));justify-content:center}}

/* P4 mobile-fix: 大标题窄屏收敛 + 直链/FAQ 触达尺寸 */
.dl-direct a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px}
@media(max-width:414px){
  .hero h1{font-size:30px;line-height:1.15}
}