/* ============================================================
   千影瞬成 Kinsnap 官网 · 视觉系统 v3（脱离原型独立演进）
   1440 版心 · header 全宽 · footer 全屏底 · 手机自适应
   ============================================================ */
:root{
  --bg:#0b0f17; --bg2:#0d1320; --panel:#141b28; --panel2:#1a2332;
  --txt:#eaeff7; --mut:#96a3b8; --dim:#5f6d83;
  --gold:#3fd99a; --gold2:#8df5c8;
  --blue:#58a6ff; --violet:#a371f7; --pink:#f472b6;
  --ok:#3fb950; --warn:#d29922; --err:#f85149;
  --gold-soft:rgba(63,217,154,.13);
  --grad-gold:linear-gradient(120deg,#8df5c8,#3fd99a 48%,#17b47c);
  --grad-hero:radial-gradient(1300px 640px at 72% -12%,rgba(63,217,154,.15),transparent 60%),
              radial-gradient(900px 520px at 6% 8%,rgba(88,166,255,.10),transparent 55%),
              linear-gradient(180deg,#0d1422 0%,var(--bg) 72%);
  --r-lg:10px; --r:8px; --r-sm:6px;
  --sh1:0 10px 34px rgba(2,5,10,.42);
  --sh2:0 18px 52px rgba(2,5,10,.55);
  --sh-gold:0 6px 20px rgba(4,24,16,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.62;font-size:15px;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(63,217,154,.028) 1px,transparent 1px);
  background-size:30px 30px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(63,217,154,.35)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#232d3f;border-radius:6px}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- 容器（逻辑属性，避免与 .section 的 padding 覆盖冲突） ----------
   版心最宽 1440 居中；header 不套 .container（内容通栏全宽）；footer 背景全屏、内容走 .container */
.container{width:100%;max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4vw,64px)}

/* ---------- 顶部导航 ---------- */
.topbar{position:sticky;top:0;z-index:100;background:rgba(10,14,21,.86);backdrop-filter:blur(16px);box-shadow:0 6px 30px rgba(2,5,10,.45)}
.topbar .row{display:flex;align-items:center;gap:28px;height:64px;padding-inline:clamp(16px,3vw,40px)}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px;
  background:rgba(255,255,255,.06);color:var(--txt);cursor:pointer;border:none;font-size:18px;flex:none}
.nav-toggle:hover{background:rgba(255,255,255,.12)}
.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:700;letter-spacing:.5px}
.brand img{width:34px;height:34px;border-radius:6px}
.brand small{font-size:11px;color:var(--dim);font-weight:400;display:block;line-height:1.1;letter-spacing:2.2px}
.nav{display:flex;gap:6px;flex:1}
.nav a{padding:7px 15px;border-radius:6px;color:var(--mut);font-size:14.5px;transition:.15s}
.nav a:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.nav a.on{color:var(--gold);background:var(--gold-soft);font-weight:600}
.topbar .acts{display:flex;align-items:center;gap:12px}
.avatar-chip{display:flex;align-items:center;gap:9px;padding:5px 13px 5px 6px;border-radius:99px;background:rgba(255,255,255,.06);cursor:pointer;transition:.15s}
.avatar-chip:hover{background:rgba(255,255,255,.11)}
.avatar-chip img{width:28px;height:28px;border-radius:50%}
.avatar-chip span{font-size:13.5px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 按钮（无边框） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:7px;
  font-size:14.5px;font-weight:600;border:none;cursor:pointer;transition:.18s;user-select:none;position:relative;overflow:hidden}
.btn-gold{background:var(--grad-gold);color:#062519;box-shadow:var(--sh-gold)}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.07);color:var(--txt);box-shadow:0 4px 18px rgba(2,5,10,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.btn-blue{background:linear-gradient(120deg,#58a6ff,#3f7fe0);color:#07131f;font-weight:700;box-shadow:0 8px 26px rgba(88,166,255,.3)}
.btn-blue:hover{filter:brightness(1.1)}
.btn-sm{padding:6px 15px;font-size:13px;border-radius:6px}
.btn-lg{padding:14px 36px;font-size:16.5px;border-radius:8px}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- 通用区块 ---------- */
.page{min-height:calc(100vh - 64px)}
.section{padding-block:64px}
.section-head{margin-bottom:30px}
.section-head .kicker{color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:4px;text-transform:uppercase;opacity:.9}
.section-head h2{font-size:clamp(22px,2.4vw,31px);margin-top:8px;letter-spacing:.6px}
.section-head p{color:var(--mut);margin-top:10px;max-width:860px}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{background:
    radial-gradient(340px 200px at 88% -20%,rgba(63,217,154,.17),transparent 62%),
    radial-gradient(300px 180px at -10% 110%,rgba(88,166,255,.13),transparent 58%),
    linear-gradient(180deg,#18202f,#131a27);border-radius:var(--r-lg);overflow:hidden;transition:.2s;box-shadow:var(--sh1)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh2);filter:brightness(1.07)}
.card .pad{padding:20px}
.tag{display:inline-block;padding:3px 11px;border-radius:99px;font-size:11.5px;color:var(--mut);background:rgba(255,255,255,.07)}
.tag.gold{color:var(--gold);background:var(--gold-soft)}
.tag.blue{color:var(--blue);background:rgba(88,166,255,.12)}
.tag.ok{color:var(--ok);background:rgba(63,185,80,.13)}
.muted{color:var(--mut)} .dim{color:var(--dim)} .gold{color:var(--gold)}
.hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);margin:22px 0}

/* ---------- Hero ---------- */
.hero{background:var(--grad-hero);box-shadow:0 20px 60px rgba(2,5,10,.35) inset;padding:96px 0 84px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.hero .slogan{font-size:15px;color:var(--gold);letter-spacing:7px;font-weight:600;margin-bottom:20px;transition:opacity .45s ease,transform .45s ease;min-height:1.6em}
.hero h1{font-size:clamp(34px,4.6vw,64px);line-height:1.15;letter-spacing:1px;font-weight:800}
.hero h1 .g{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--mut);font-size:clamp(15px,1.3vw,18.5px);margin:24px 0 36px;max-width:860px}
.hero .acts{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .stats{display:flex;gap:clamp(32px,4vw,76px);margin-top:56px;flex-wrap:wrap}
.hero .stats b{font-size:clamp(22px,2vw,28px);display:block;font-weight:800}
.hero .stats b i{font-style:normal;color:var(--gold);font-size:.72em;font-weight:600;margin-left:2px}
.hero .stats span{color:var(--dim);font-size:13px}
.hero .float{position:absolute;border-radius:50%;filter:blur(76px);opacity:.5;pointer-events:none;animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}

/* ---------- 功能特性 ---------- */
.feat{display:flex;gap:16px}
.feat .ico{width:48px;height:48px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--gold-soft);font-size:22px;box-shadow:inset 0 0 0 1px rgba(63,217,154,.14)}
.feat h3{font-size:16.5px;margin-bottom:6px}
.feat p{color:var(--mut);font-size:13.5px}

/* 全站卡片撞色：hero 同款撞色光晕背景，所有卡片逐卡轮换四种配色（1 号配色为各卡片基样式，此处轮换 2/3/4 号） */
.card:nth-child(4n+2), .price-card:nth-child(4n+2), .me-card:nth-child(4n+2), .alist .row:nth-child(4n+2){
  background:
    radial-gradient(340px 200px at 88% -20%,rgba(88,166,255,.16),transparent 62%),
    radial-gradient(300px 180px at -10% 110%,rgba(163,113,247,.12),transparent 58%),
    linear-gradient(180deg,#18202f,#131a27);
}
.card:nth-child(4n+3), .price-card:nth-child(4n+3), .me-card:nth-child(4n+3), .alist .row:nth-child(4n+3){
  background:
    radial-gradient(340px 200px at 88% -20%,rgba(163,113,247,.16),transparent 62%),
    radial-gradient(300px 180px at -10% 110%,rgba(244,114,182,.11),transparent 58%),
    linear-gradient(180deg,#18202f,#131a27);
}
.card:nth-child(4n), .price-card:nth-child(4n), .me-card:nth-child(4n), .alist .row:nth-child(4n){
  background:
    radial-gradient(340px 200px at 88% -20%,rgba(244,114,182,.15),transparent 62%),
    radial-gradient(300px 180px at -10% 110%,rgba(141,245,200,.10),transparent 58%),
    linear-gradient(180deg,#18202f,#131a27);
}
/* 图标底色跟随卡片撞色（含 .feat-card，其本身带 .card 类） */
.card:nth-child(4n+2) .feat .ico{background:rgba(88,166,255,.13);box-shadow:inset 0 0 0 1px rgba(88,166,255,.18)}
.card:nth-child(4n+3) .feat .ico{background:rgba(163,113,247,.13);box-shadow:inset 0 0 0 1px rgba(163,113,247,.18)}
.card:nth-child(4n) .feat .ico{background:rgba(244,114,182,.13);box-shadow:inset 0 0 0 1px rgba(244,114,182,.18)}

/* ---------- 视频卡片 ---------- */
.vcard{cursor:pointer}
.vcover{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1c2536,#111724);overflow:hidden}
.vcover img{width:100%;height:100%;object-fit:cover;transition:.35s}
.vcard:hover .vcover img{transform:scale(1.06)}
.vcover .dur{position:absolute;right:9px;bottom:9px;background:rgba(5,8,13,.75);padding:2px 8px;border-radius:7px;font-size:11.5px}
.vcover .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;background:rgba(6,9,14,.38)}
.vcard:hover .play{opacity:1}
.vcover .play span{width:54px;height:54px;border-radius:50%;background:var(--grad-gold);display:flex;align-items:center;justify-content:center;color:#062519;font-size:21px}
.vmeta{display:flex;gap:8px;align-items:center;padding:13px 15px 0}
.vmeta img{width:26px;height:26px;border-radius:50%}
.vmeta .who{font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtitle{padding:8px 15px 15px;font-size:14.5px;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vfoot{display:flex;gap:16px;padding:0 15px 16px;color:var(--dim);font-size:12.5px}
.vfoot b{color:var(--mut);font-weight:600}

/* ---------- 文章/灵感卡片 ---------- */
.acover{aspect-ratio:16/9;object-fit:cover;width:100%;background:#1c2536}
.acard h3{font-size:15.5px;padding:15px 17px 6px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard .sum{padding:0 17px 9px;color:var(--mut);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard .meta{padding:0 17px 17px;display:flex;gap:10px;color:var(--dim);font-size:12px;align-items:center}
.alist{display:flex;flex-direction:column;gap:16px}
.alist .row{display:flex;gap:18px;background:
    radial-gradient(340px 200px at 88% -20%,rgba(63,217,154,.17),transparent 62%),
    radial-gradient(300px 180px at -10% 110%,rgba(88,166,255,.13),transparent 58%),
    linear-gradient(180deg,#18202f,#131a27);border-radius:var(--r-lg);overflow:hidden;transition:.2s;box-shadow:var(--sh1)}
.alist .row:hover{transform:translateX(6px);box-shadow:var(--sh2);filter:brightness(1.07)}
.alist .row img{width:clamp(200px,24vw,300px);aspect-ratio:16/9;object-fit:cover;flex-shrink:0}
.alist .row .info{padding:20px 22px 20px 6px}
.alist .row h3{font-size:clamp(15.5px,1.4vw,18px);margin-bottom:9px}
.alist .row p{color:var(--mut);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.alist .row .meta{color:var(--dim);font-size:12.5px;margin-top:13px;display:flex;gap:14px}

/* ---------- 文章详情：全屏两栏 ---------- */
.article-full{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,22vw,380px);gap:clamp(24px,3vw,48px);align-items:start}
.article-main{max-width:1060px}
.article .back{color:var(--mut);font-size:13.5px;margin-bottom:20px;display:inline-block}
.article .back:hover{color:var(--gold)}
.article h1{font-size:clamp(24px,2.7vw,35px);line-height:1.3;margin:10px 0 14px}
.article .byline{color:var(--dim);font-size:13px;display:flex;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.article .body{font-size:15.5px;color:#ccd6e4}
.article .body h2{font-size:22px;margin:30px 0 12px;color:var(--gold2)}
.article .body h3{font-size:18px;margin:24px 0 10px;color:var(--txt)}
.article .body p{margin:12px 0}
.article .body ul,.article .body ol{margin:12px 0 12px 22px}
.article .body li{margin:6px 0}
.article .body code{background:rgba(255,255,255,.08);padding:1px 8px;border-radius:6px;font-size:13.5px;color:var(--gold2)}
.article .body blockquote{background:var(--gold-soft);padding:11px 16px;border-radius:8px;margin:14px 0;color:var(--gold2)}
.article .body strong{color:var(--txt)}

/* ---------- 表单（无边框） ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.form label{font-size:13.5px;color:var(--mut);display:block;margin-bottom:7px}
.form .ctl{width:100%;background:rgba(255,255,255,.05);color:var(--txt);
  padding:11px 14px;font-size:14.5px;font-family:inherit;transition:.15s;outline:none;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.form .ctl:focus{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(63,217,154,.5),0 0 0 4px rgba(63,217,154,.1)}
.form textarea.ctl{min-height:96px;resize:vertical}
.form .hint{font-size:12px;color:var(--dim);margin-top:5px}
.dropzone{background:rgba(255,255,255,.04);border-radius:var(--r-lg);padding:34px;text-align:center;color:var(--mut);cursor:pointer;transition:.15s}
.dropzone:hover{background:rgba(63,217,154,.07);color:var(--gold2)}
.dropzone .big{font-size:30px;margin-bottom:8px}
.form .switch{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut);cursor:pointer}
.form .switch input{accent-color:var(--gold);width:16px;height:16px}

/* ---------- 定价（无边框） ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:stretch}
.price-card{background:
    radial-gradient(340px 200px at 88% -20%,rgba(63,217,154,.17),transparent 62%),
    radial-gradient(300px 180px at -10% 110%,rgba(88,166,255,.13),transparent 58%),
    linear-gradient(180deg,#18202f,#121926);border-radius:10px;padding:32px 28px;position:relative;display:flex;flex-direction:column;transition:.2s;box-shadow:var(--sh1)}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--sh2);filter:brightness(1.07)}
.price-card.hot{background:
    radial-gradient(420px 250px at 88% -20%,rgba(63,217,154,.26),transparent 62%),
    radial-gradient(340px 210px at -10% 110%,rgba(88,166,255,.20),transparent 58%),
    linear-gradient(180deg,rgba(63,217,154,.10),#18202f 45%);box-shadow:var(--sh2)}
.price-card .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-gold);color:#062519;
  font-size:12px;font-weight:700;padding:3px 17px;border-radius:99px;letter-spacing:1px}
.price-card h3{font-size:18px}
.price-card .price{font-size:42px;font-weight:800;margin:14px 0 4px}
.price-card .price small{font-size:14px;color:var(--dim);font-weight:400}
.price-card .per{color:var(--dim);font-size:13px;margin-bottom:18px}
.price-card ul{list-style:none;margin:0 0 24px;flex:1}
.price-card li{padding:7px 0;color:var(--mut);font-size:14px;display:flex;gap:9px;align-items:baseline}
.price-card li::before{content:"✓";color:var(--gold);font-weight:700}
.recharge-row{display:flex;gap:14px;flex-wrap:wrap}
.recharge-opt{background:rgba(255,255,255,.05);border-radius:8px;padding:17px 30px;text-align:center;cursor:pointer;transition:.15s}
.recharge-opt:hover{background:rgba(255,255,255,.09)}
.recharge-opt.on{background:var(--gold-soft)}
.recharge-opt b{font-size:23px;display:block}
.recharge-opt span{color:var(--dim);font-size:12.5px}

/* ---------- 弹窗（无边框） ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(4,7,11,.74);backdrop-filter:blur(7px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-mask.show{display:flex}
.modal{background:linear-gradient(180deg,#1a2332,#141b28);border-radius:10px;max-width:460px;width:100%;padding:30px;box-shadow:var(--sh2);animation:pop .18s ease-out}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{font-size:19px;margin-bottom:6px}
.modal .sub{color:var(--mut);font-size:13.5px;margin-bottom:20px}

/* ---------- 二维码 ---------- */
.qr-box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0}
.wxqr-dark{display:flex;justify-content:center;border-radius:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:6px;box-shadow:0 4px 18px rgba(0,0,0,.25);overflow:hidden}
.qr-frame{width:216px;height:216px;background:#fff;border-radius:10px;padding:12px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.qr-frame canvas{width:100%;height:100%;image-rendering:pixelated}
.qr-frame .fake{width:100%;height:100%;background:
  repeating-linear-gradient(0deg,#111 0 7px,#fff 7px 14px),
  repeating-linear-gradient(90deg,#111 0 7px,#fff 7px 14px);
  background-blend-mode:difference;border-radius:8px;position:relative}
.qr-frame .fake::after{content:"";position:absolute;inset:38%;background:#fff;padding:5px;border-radius:9px;box-shadow:0 0 0 6px #111}
.qr-state{display:flex;align-items:center;gap:9px;color:var(--mut);font-size:13.5px}
.spin{width:15px;height:15px;box-shadow:0 0 0 2px rgba(255,255,255,.15);border-top-color:var(--gold);border-radius:50%;animation:rot .9s linear infinite;background:transparent}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- 个人中心 ---------- */
.me-grid{display:grid;grid-template-columns:clamp(280px,26vw,360px) 1fr;gap:24px;align-items:start}
.me-card{background:
    radial-gradient(340px 200px at 88% -20%,rgba(63,217,154,.17),transparent 62%),
    radial-gradient(300px 180px at -10% 110%,rgba(88,166,255,.13),transparent 58%),
    linear-gradient(180deg,#18202f,#131a27);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh1)}
.me-card h3{font-size:16px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.me-id{display:flex;gap:14px;align-items:center}
.me-id img{width:56px;height:56px;border-radius:50%}
.me-id b{font-size:17px;display:block}
.me-id span{color:var(--dim);font-size:12.5px}
.kv{display:flex;justify-content:space-between;padding:9px 0;background-image:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.08));background-size:100% 1px;background-repeat:no-repeat;background-position:bottom;font-size:13.5px;gap:14px}
.kv:last-child{background-image:none}
.kv .k{color:var(--dim)}
.proj-item{display:flex;gap:12px;align-items:center;padding:11px 0;background-image:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.08));background-size:100% 1px;background-repeat:no-repeat;background-position:bottom}
.proj-item:last-child{background-image:none}
.proj-item .ico{width:38px;height:38px;border-radius:7px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.proj-item b{font-size:14px;display:block}
.proj-item span{color:var(--dim);font-size:12px}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{color:var(--dim);text-align:left;font-weight:600;padding:10px 12px;background-image:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.12));background-size:100% 1px;background-repeat:no-repeat;background-position:bottom}
.tbl td{padding:11px 12px;background-image:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.06));background-size:100% 1px;background-repeat:no-repeat;background-position:bottom}
.tbl tr:last-child td{background-image:none}

/* ---------- 步骤条（无边框圆点） ---------- */
.steps{display:flex;gap:0;counter-reset:st;margin:8px 0 34px}
.step{flex:1;text-align:center;position:relative;color:var(--dim);font-size:13px}
.step::before{counter-increment:st;content:counter(st);display:inline-flex;width:36px;height:36px;border-radius:50%;
  align-items:center;justify-content:center;margin-bottom:8px;font-size:14px;background:rgba(255,255,255,.07)}
.step.on{color:var(--gold)}
.step.on::before{color:#062519;background:var(--grad-gold);font-weight:700}
.step:not(:last-child)::after{content:"";position:absolute;top:18px;left:calc(50% + 27px);width:calc(100% - 54px);height:2px;background:rgba(255,255,255,.08);border-radius:2px}

/* ---------- 播放页 ---------- */
.player{background:#000;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh2)}
.player video{width:100%;aspect-ratio:16/9;display:block}
.video-side .row{display:flex;justify-content:space-between;padding:9px 0;font-size:13.5px}
.video-side .row:last-child{padding-bottom:0}
.like-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);padding:8px 22px;border-radius:8px;cursor:pointer;transition:.15s;font-size:14px}
.like-btn:hover{background:rgba(244,114,182,.12);color:var(--pink)}
.like-btn.on{background:rgba(244,114,182,.14);color:var(--pink)}

/* ---------- 提示条（无边框） ---------- */
.notice{background:rgba(88,166,255,.1);color:#9ecbff;padding:11px 17px;border-radius:8px;font-size:13.5px;margin-bottom:22px}
.notice.warn{background:rgba(210,153,34,.1);color:#e3c368}
.toast{position:fixed;left:50%;bottom:38px;transform:translateX(-50%) translateY(20px);background:#1e2839;
  color:var(--gold2);padding:11px 26px;border-radius:99px;font-size:14px;z-index:300;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--sh2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 页脚（无边框） ---------- */
footer{padding:48px 0 38px;margin-top:72px;border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1100px 520px at 18% 125%,rgba(63,217,154,.13),transparent 60%),
    radial-gradient(820px 440px at 85% 120%,rgba(88,166,255,.09),transparent 55%),
    linear-gradient(180deg,#0d1422 0%,#0b0f17 72%)}
footer .cols{display:flex;gap:60px;flex-wrap:wrap;justify-content:space-between}
footer .col h4{font-size:14px;color:var(--txt);margin-bottom:12px}
footer .col a{display:block;color:var(--dim);font-size:13px;padding:4px 0}
footer .col a:hover{color:var(--gold)}
footer .copy{margin-top:36px;color:var(--dim);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- 空状态 ---------- */
.empty{text-align:center;padding:60px 20px;color:var(--dim)}
.empty .big{font-size:40px;margin-bottom:12px;opacity:.6}

/* ---------- 登录页分屏（1440 版心，超宽屏两侧留底色） ---------- */
.login-split{display:grid;grid-template-columns:1.15fr 1fr;min-height:calc(100vh - 64px);max-width:1440px;margin:0 auto}
.login-brand{background:var(--grad-hero);display:flex;align-items:center;padding:8vh 5vw;position:relative;overflow:hidden;box-shadow:24px 0 70px rgba(2,5,10,.3) inset}
.login-brand h2{font-size:clamp(26px,2.6vw,40px);margin:16px 0 14px;line-height:1.25}
.login-brand .pts{margin-top:36px;display:flex;flex-direction:column;gap:15px}
.login-brand .pt{display:flex;gap:12px;align-items:baseline;color:var(--mut);font-size:14.5px}
.login-brand .pt b{color:var(--txt)}
.login-brand .pt .ico{color:var(--gold);font-size:16px}
.login-panel{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.login-panel .card{max-width:470px;width:100%}

/* ---------- 周期胶囊切换器 ---------- */
.seg{display:inline-flex;gap:4px;background:rgba(255,255,255,.06);padding:4px;border-radius:99px}
.seg .seg-btn{padding:8px 24px;border-radius:99px;cursor:pointer;color:var(--mut);font-size:14px;transition:.15s;user-select:none}
.seg .seg-btn:hover{color:var(--txt)}
.seg .seg-btn.on{background:var(--grad-gold);color:#062519;font-weight:700}

/* ---------- 视频广场：左分类栏 + 右网格 ---------- */
.plaza{display:grid;grid-template-columns:clamp(210px,17vw,250px) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.plaza-side{padding:16px 6px;position:sticky;top:80px}
.side-group{font-size:11.5px;color:var(--dim);letter-spacing:2.5px;margin:20px 10px 9px;font-weight:700;
  padding-top:18px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 60%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top}
.side-group:first-child{margin-top:2px;padding-top:0;background-image:none}
.side-item{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;border-radius:7px;cursor:pointer;color:var(--mut);font-size:13.5px;transition:.13s;user-select:none}
.side-item:hover{color:var(--txt)}
.side-item.on{color:var(--gold)}
.side-item .cnt{font-size:11px;color:var(--dim)}
.plaza-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;min-height:34px}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);padding:4px 8px 4px 12px;border-radius:7px;font-size:12.5px;color:var(--mut);cursor:pointer}
.chip:hover{color:var(--err)}
.chip b{color:var(--txt);font-weight:600}
.plaza-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
/* 占位卡：虚位以待 */
.vcard.ghost .vcover{display:flex;align-items:center;justify-content:center;background:
  radial-gradient(340px 160px at 50% 40%,rgba(63,217,154,.09),transparent 70%),linear-gradient(150deg,#182031,#10151f)}
.vcard.ghost .vcover .ph-ico{font-size:34px;opacity:.5}
.vcard.ghost .vtitle{color:var(--dim);text-align:center}
.vcard.ghost .vfoot{justify-content:center}
@media(max-width:900px){.plaza{grid-template-columns:1fr}.plaza-side{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 18px}}

/* ---------- 动画 ---------- */
.fade{animation:fade .45s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Vue 挂载前防闪（v-cloak：编译完成自动移除） ---------- */
[v-cloak]{display:none!important}

/* ---------- lucide 图标基线 ---------- */
/* 与文字同行同色（stroke 继承 currentColor），1em 随字号缩放 */
svg.lucide{width:1.05em;height:1.05em;vertical-align:-0.16em;flex:none}
i[data-lucide]{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.16em}

/* ---------- 响应式 ---------- */
@media(max-width:900px){.me-grid{grid-template-columns:1fr}}
@media(max-width:980px){.article-full{grid-template-columns:1fr}}
@media(max-width:920px){.login-split{grid-template-columns:1fr}.login-brand{display:none}}
/* 手机（≤760px）：抽屉导航 + 单列布局 */
@media(max-width:760px){
  body{font-size:14.5px}
  .topbar .row{height:56px;gap:14px}
  .brand{font-size:16.5px}
  .brand small{display:none}
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;top:56px;left:0;right:0;z-index:99;flex-direction:column;gap:2px;
    background:rgba(11,15,23,.97);backdrop-filter:blur(18px);padding:12px 18px 20px;
    border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px rgba(2,5,10,.5);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:.22s}
  body.nav-open .nav{opacity:1;visibility:visible;transform:none}
  .nav a{padding:12px 14px;font-size:15px;border-radius:8px}
  .topbar .acts{gap:8px;margin-left:auto}
  .avatar-chip span{max-width:64px;font-size:12.5px}
  .section{padding-block:40px}
  .hero{padding:56px 0 48px}
  .hero .slogan{letter-spacing:4px;margin-bottom:12px}
  .hero .acts{flex-direction:column;align-items:stretch}
  .hero .acts .btn{width:100%}
  .hero .stats{margin-top:34px;gap:20px 32px}
  .alist .row{flex-direction:column}
  .alist .row img{width:100%;aspect-ratio:16/9}
  .alist .row .info{padding:16px 16px 18px}
  .steps{flex-wrap:wrap;gap:14px 8px}
  .step{flex:1 1 44%}
  .step:not(:last-child)::after{display:none}
  .me-card{padding:18px}
  .kv{font-size:13px}
  .tbl{display:block;overflow-x:auto;font-size:12.5px;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .price-card{padding:24px 18px}
  .price-card .price{font-size:34px}
  .recharge-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .recharge-opt{padding:13px 8px}
  .recharge-opt b{font-size:19px}
  .seg .seg-btn{padding:7px 16px;font-size:13px}
  .modal{padding:20px 16px}
  .plaza-side{gap:0 8px}
  .plaza-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  footer{padding:36px 0 30px;margin-top:48px}
  footer .cols{gap:26px}
  footer .copy{flex-direction:column}
  .login-panel{padding:28px 16px}
  .toast{bottom:20px;max-width:86vw}
}

/* 小屏手机（≤420px） */
@media(max-width:420px){
  .section{padding-block:32px}
  .hero h1{font-size:30px}
  .plaza-grid{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr}
  .btn-lg{padding:12px 22px;font-size:15px}
}