:root{
  --bg:#0E0A16; --bg2:#161021; --glass:rgba(255,255,255,0.05);
  --glass-brd:rgba(255,255,255,0.12); --txt:#EFE8F5; --muted:#9C8FB0;
  --pink:#FF6FAE; --purple:#9B7BE0; --mint:#5FCB98; --gold:#FFD86B; --blue:#6FB7E0;
  --grad:linear-gradient(135deg,#FF6FAE,#9B7BE0);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
  background:radial-gradient(1200px 700px at 70% -10%,rgba(155,123,224,.20),transparent 60%),
             radial-gradient(900px 600px at 10% 110%,rgba(255,111,174,.16),transparent 55%),
             var(--bg);
  color:var(--txt); min-height:100vh; padding-bottom:60px;
  overflow-x:hidden; -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto}
button,select,input,textarea{font-family:inherit; -webkit-tap-highlight-color:transparent}
.modal{overflow-y:auto}
.view{max-width:1120px; margin:0 auto; padding:0 20px}
.muted{color:var(--muted); font-size:12px; font-weight:400}

/* 导航 */
.navbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; backdrop-filter:blur(18px); background:rgba(14,10,22,.66);
  border-bottom:1px solid var(--glass-brd)}
.nav-brand{font-size:19px; font-weight:800; letter-spacing:.5px; cursor:pointer}
.brand-star{color:var(--gold); text-shadow:0 0 12px var(--gold)}
.nav-right{display:flex; align-items:center; gap:12px}
.coin-chip{background:var(--glass); border:1px solid var(--glass-brd); padding:6px 12px; border-radius:20px; font-size:14px}
.coin-chip b{color:var(--gold)}
.nav-btn{background:var(--grad); border:none; color:#fff; padding:9px 16px; border-radius:22px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 20px rgba(255,111,174,.35)}

/* 按钮 */
.btn-primary{background:var(--grad); border:none; color:#fff; padding:11px 20px; border-radius:24px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 24px rgba(155,123,224,.35); transition:transform .15s}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--glass); border:1px solid var(--glass-brd); color:var(--txt); padding:11px 18px; border-radius:24px; cursor:pointer; font-weight:600; transition:.15s}
.btn-ghost:hover{border-color:var(--purple); background:rgba(155,123,224,.14)}
.btn-danger{background:rgba(255,90,90,.15); border:1px solid rgba(255,90,90,.4); color:#FF9B9B; padding:9px 14px; border-radius:22px; cursor:pointer; font-weight:600}
.sm{padding:8px 14px; font-size:13px}

/* 首页 hero */
.hero{display:flex; gap:24px; align-items:center; padding:40px 0 28px; flex-wrap:wrap}
.hero-txt{flex:1; min-width:320px}
.hero-txt h1{font-size:38px; font-weight:900; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px}
.hero-txt p{color:var(--muted); line-height:1.7; max-width:520px; margin-bottom:20px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.stat{background:var(--glass); border:1px solid var(--glass-brd); border-radius:18px; padding:16px 20px; text-align:center; backdrop-filter:blur(10px)}
.stat-n{display:block; font-size:30px; font-weight:900; color:var(--gold); text-shadow:0 0 16px rgba(255,216,107,.4)}
.stat-l{font-size:12px; color:var(--muted)}

/* 每日灵感 */
.daily-card{background:linear-gradient(135deg,rgba(155,123,224,.18),rgba(255,111,174,.10)); border:1px solid var(--glass-brd);
  border-radius:20px; padding:20px 22px; margin-bottom:24px; backdrop-filter:blur(10px)}
.daily-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.daily-title{font-weight:800; font-size:16px}
.daily-reward{font-size:12px; color:var(--gold)}
.daily-prompt{color:var(--txt); line-height:1.6; margin-bottom:12px; font-size:14px}
.daily-input{width:100%; min-height:64px; background:rgba(0,0,0,.25); border:1px solid var(--glass-brd); border-radius:12px;
  color:var(--txt); padding:10px 12px; font-family:inherit; resize:vertical; margin-bottom:12px}

/* 成就墙 */
.block-title{font-size:18px; font-weight:800; margin:18px 0 12px; display:flex; align-items:baseline; gap:10px}
.block-title.sm{font-size:15px; margin:14px 0 8px}
.ach-wall{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.ach{display:flex; flex-direction:column; align-items:center; gap:4px; width:96px; padding:12px 6px; border-radius:14px;
  background:var(--glass); border:1px solid var(--glass-brd); opacity:.5; transition:.2s}
.ach.done{opacity:1; border-color:var(--gold); box-shadow:0 0 16px rgba(255,216,107,.25); background:rgba(255,216,107,.08)}
.ach-ic{font-size:22px}
.ach-nm{font-size:11px; text-align:center; color:var(--muted)}
.ach.done .ach-nm{color:var(--gold)}

/* 列表头 + 筛选 */
.list-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px}
.filters{display:flex; gap:8px}
.filter-tab{background:var(--glass); border:1px solid var(--glass-brd); color:var(--muted); padding:7px 14px; border-radius:18px; cursor:pointer; font-size:13px; font-weight:600}
.filter-tab.sel{background:var(--grad); color:#fff; border:none}

/* OC 卡片网格 */
.oc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin-top:14px}
.oc-card{background:var(--glass); border:1px solid var(--glass-brd); border-radius:20px; overflow:hidden; cursor:pointer;
  transition:transform .18s, border-color .18s, box-shadow .18s; backdrop-filter:blur(10px)}
.oc-card:hover{transform:translateY(-4px); border-color:var(--purple); box-shadow:0 12px 30px rgba(155,123,224,.3)}
.oc-avatar{position:relative; background:radial-gradient(circle at 50% 35%,rgba(155,123,224,.25),transparent 70%); display:flex; justify-content:center; padding:10px 0 4px}
.oc-avatar svg,.oc-avatar img{border-radius:14px}
.oc-fav{position:absolute; top:12px; right:12px; font-size:18px; color:#5a4f6e; filter:grayscale(1)}
.oc-fav.on{color:#FF6FAE; filter:none; text-shadow:0 0 10px rgba(255,111,174,.6)}
.oc-body{padding:12px 14px 16px}
.oc-row1{display:flex; justify-content:space-between; align-items:center; gap:6px}
.oc-name{font-weight:800; font-size:16px}
.oc-race{font-size:10px; padding:3px 8px; border-radius:10px; color:var(--c,#fff); border:1px solid var(--c,#fff); opacity:.85; white-space:nowrap}
.oc-tags{display:flex; gap:5px; flex-wrap:wrap; margin:8px 0}
.oc-tags i{font-style:normal; font-size:11px; background:rgba(255,255,255,.08); padding:2px 8px; border-radius:9px; color:var(--muted)}
.oc-tags i.el{color:var(--e); border:1px solid var(--e)}
.oc-bars{display:flex; flex-direction:column; gap:5px; margin:8px 0}
.mini-bar{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted)}
.mini-bar>span{width:14px}
.mb-track{flex:1; height:6px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden}
.mb-fill{height:100%; border-radius:4px; transition:width .3s}
.oc-foot{font-size:11px; color:var(--muted); margin-top:6px}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:50px 0}

/* 创作台 */
.ed-bar{display:flex; align-items:center; gap:14px; padding:20px 0 14px}
.ed-back{background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer}
.ed-back:hover{color:var(--txt)}
.ed-title{font-size:20px; font-weight:800; flex:1}
.ed-bar-r{display:flex; gap:8px}
.ed-main{display:grid; grid-template-columns:300px 1fr; gap:24px; align-items:start}
.ed-left{position:sticky; top:80px}
.ed-preview{background:radial-gradient(circle at 50% 40%,rgba(155,123,224,.3),transparent 70%); border:1px solid var(--glass-brd); border-radius:20px; padding:14px; display:flex; justify-content:center; min-height:320px; align-items:center}
.preview-loading{color:var(--muted); font-size:14px; text-align:center; padding:40px 20px; animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.ed-warehouse-box{margin-top:14px; background:var(--glass); border:1px solid var(--glass-brd); border-radius:16px; padding:12px}
.warehouse{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.wh-empty{font-size:12px; color:var(--muted); padding:8px 0}
.wh-item{background:rgba(255,255,255,.06); border:1px solid var(--glass-brd); color:var(--txt); padding:6px 10px; border-radius:12px; cursor:pointer; font-size:12px; display:flex; align-items:center; gap:5px}
.wh-item i{font-style:normal; color:var(--mint); font-weight:700}
.wh-item.on{border-color:var(--mint); background:rgba(95,203,152,.14)}
.ed-right{background:var(--glass); border:1px solid var(--glass-brd); border-radius:20px; padding:20px; backdrop-filter:blur(10px)}
.ed-tabs{display:flex; gap:8px; margin-bottom:18px}
.ed-tab{background:rgba(255,255,255,.05); border:1px solid var(--glass-brd); color:var(--muted); padding:8px 16px; border-radius:14px; cursor:pointer; font-weight:600}
.ed-tab.sel{background:var(--grad); color:#fff; border:none}
.fld{display:flex; flex-direction:column; gap:6px; margin-bottom:16px; font-size:13px; color:var(--muted)}
.fld.row{flex-direction:row; align-items:center; gap:10px}
.fld.col span{margin-bottom:2px}
.fld input[type=text],.fld input:not([type=range]):not([type=checkbox]),.fld select,.fld textarea{
  background:rgba(0,0,0,.28); border:1px solid var(--glass-brd); border-radius:10px; color:var(--txt); padding:10px 12px; font-family:inherit; font-size:14px; width:100%}
.fld textarea{min-height:120px; resize:vertical; line-height:1.6}
.ranges{display:flex; flex-direction:column; gap:10px}
.range{display:flex; align-items:center; gap:10px; font-size:13px}
.range span{width:34px; color:var(--muted)}
.range input[type=range]{flex:1; accent-color:var(--purple)}
.range b{width:28px; text-align:right; color:var(--gold)}
.clr{width:46px; height:34px; background:none; border:1px solid var(--glass-brd); border-radius:8px; cursor:pointer}
.pick-group{margin-bottom:16px}
.pick-label{display:block; font-size:13px; color:var(--muted); margin-bottom:7px}
.pick{display:flex; flex-wrap:wrap; gap:7px}
.opt{background:rgba(255,255,255,.05); border:1px solid var(--glass-brd); color:var(--txt); padding:7px 13px; border-radius:12px; cursor:pointer; font-size:13px; font-weight:600; transition:.15s}
.opt:hover{border-color:var(--purple)}
.opt.sel{background:var(--grad); border:none; color:#fff; box-shadow:0 4px 14px rgba(155,123,224,.3)}
.opt[style*="--c"]{border-color:var(--c)}
.opt[style*="--c"].sel{background:var(--c); color:#1a1426}
.pm-opt{background:rgba(255,255,255,.05); border:1px solid var(--glass-brd); color:var(--txt); padding:7px 13px; border-radius:12px; cursor:pointer; font-size:13px; font-weight:600; transition:.15s}
.pm-opt:hover{border-color:var(--purple)}
.pm-opt.sel{background:var(--grad); border:none; color:#fff; box-shadow:0 4px 14px rgba(155,123,224,.3)}
.hint{font-size:12px; color:var(--muted); line-height:1.6; background:rgba(255,216,107,.06); border-left:3px solid var(--gold); padding:8px 12px; border-radius:6px}

/* ===== 装扮合成层（3D 底图 + 配色/背景/相框/滤镜） ===== */
.av{position:relative; overflow:visible; border-radius:18px; flex:none; transition:transform .18s ease}
.av-bg{position:absolute; inset:0; border-radius:18px; overflow:hidden; z-index:0; box-shadow:inset 0 0 60px rgba(255,255,255,.12)}
.av-tint{position:absolute; inset:0; border-radius:18px; z-index:2; pointer-events:none}
.av-tint::before{content:''; position:absolute; inset:0; border-radius:18px; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),transparent 55%); pointer-events:none}
.av-img{display:block; width:100%; height:100%; object-fit:cover; border-radius:18px; position:relative; z-index:1; transition:filter .3s ease}
.av svg{display:block}
.av-frame{position:absolute; inset:0; border-radius:18px; z-index:4; pointer-events:none; transition:box-shadow .25s ease,border-color .25s ease}
.av-frame.f-classic{border:8px solid #FFD86B; box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 0 24px rgba(255,216,107,.55),0 6px 20px rgba(0,0,0,.3)}
.av-frame.f-neon{border:5px solid #9B7BE0; box-shadow:0 0 26px #9B7BE0,inset 0 0 18px rgba(155,123,224,.75)}
.av-frame.f-heart{border:6px solid #FF6FAE; border-radius:26px; box-shadow:0 0 22px rgba(255,111,174,.65)}
.av-frame.f-film{border:9px dashed rgba(255,255,255,.6); box-shadow:0 0 18px rgba(255,255,255,.15)}
/* 已应用装扮清单（创作台 preview 专用） */
.av-tags{position:absolute; bottom:8px; left:8px; right:8px; z-index:5; display:flex; flex-wrap:wrap; gap:5px; justify-content:center; pointer-events:none}
.av-tags span{font-size:10px; color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2); padding:3px 8px; border-radius:10px; backdrop-filter:blur(4px)}
.ed-preview .av-tags{display:flex}
.det-img .av-tags,.oc-avatar .av-tags,.sc-avatar .av-tags,.bt-av .av-tags{display:none}
/* 点击装扮后的闪光反馈 */
.av-flash{animation:avFlash .26s ease}
@keyframes avFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.02);filter:brightness(1.25)}100%{transform:scale(1);filter:brightness(1)}}
/* 装扮分隔与标签 */
.dress-sep{display:flex; align-items:baseline; gap:8px; margin:18px 0 4px; padding-top:14px; border-top:1px dashed var(--glass-brd)}
.dress-sep span{font-weight:800; font-size:15px; color:var(--gold)}
.dress-sep em{font-style:normal; font-size:11px; color:var(--muted)}
.dress-actions{display:flex; gap:10px; margin:12px 0 2px}
.btn-dress{flex:1; min-height:44px; background:var(--grad); border:none; color:#fff; padding:12px 14px; border-radius:14px; cursor:pointer; font-size:13.5px; font-weight:800; box-shadow:0 6px 18px rgba(155,123,224,.34); transition:.15s}
.btn-dress:hover{transform:translateY(-1px); box-shadow:0 9px 22px rgba(155,123,224,.46)}
.btn-dress:active{transform:scale(.97)}
.btn-dress.ghost{background:var(--glass); border:1px solid var(--glass-brd); color:var(--txt); box-shadow:none}
.btn-dress.ghost:hover{border-color:var(--purple); background:rgba(155,123,224,.14); transform:none; box-shadow:none}
/* 卡片/详情/分享/对战里的头像居中 */
.oc-avatar .av,.sc-avatar .av,.bt-av .av,.det-img .av{margin:0 auto}

/* 详情 */
.det-main{display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:start; padding-top:20px}
.det-left{position:sticky; top:80px}
.det-img{position:relative; background:radial-gradient(circle at 50% 40%,rgba(155,123,224,.3),transparent 70%); border:1px solid var(--glass-brd); border-radius:20px; padding:14px; display:flex; justify-content:center; min-height:340px; align-items:center}
.det-fav{position:absolute; bottom:14px; left:14px; background:rgba(255,111,174,.2); border:1px solid var(--pink); color:#FFB3D4; padding:4px 12px; border-radius:14px; font-size:12px}
.bond-list{display:flex; flex-direction:column; gap:8px}
.bond{background:var(--glass); border:1px solid var(--glass-brd); border-radius:12px; padding:10px 12px}
.bond-tag{font-size:10px; padding:2px 8px; border-radius:8px; margin-right:6px}
.bond-tag.mate{background:rgba(95,203,152,.2); color:var(--mint)}
.bond-tag.cp{background:rgba(255,111,174,.2); color:var(--pink)}
.bond-tag.rival{background:rgba(155,123,224,.2); color:var(--purple)}
.bond b{font-size:14px}
.bond p{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.5}
.det-right{}
.det-sub{font-size:13px; color:var(--muted); margin-bottom:14px}
.det-bars{background:var(--glass); border:1px solid var(--glass-brd); border-radius:16px; padding:16px; margin-bottom:16px; display:flex; flex-direction:column; gap:8px}
.radar-total{font-size:13px; color:var(--muted); margin-top:4px}
.radar-total b{font-size:22px; color:var(--gold)}
.detail-info{display:flex; flex-direction:column; gap:14px}
.info-card{background:var(--glass); border:1px solid var(--glass-brd); border-radius:16px; padding:16px}
.info-card h4{font-size:14px; margin-bottom:10px; color:var(--txt)}
.info-row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px}
.info-row span{color:var(--muted)}
.info-row b{font-weight:700}
.tag-cloud{display:flex; flex-wrap:wrap; gap:6px}
.tag-cloud i{font-style:normal; font-size:12px; background:rgba(255,255,255,.08); padding:3px 10px; border-radius:10px}
.story{font-size:14px; line-height:1.8; color:var(--txt)}

/* 模态 */
.modal{position:fixed; inset:0; background:rgba(8,5,14,.72); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px}
.modal.open{display:flex}
.modal-box{background:linear-gradient(160deg,#1c1530,#140e22); border:1px solid var(--glass-brd); border-radius:22px; padding:28px; max-width:440px; width:100%; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-box h3{margin-bottom:16px; font-size:18px}
.modal-x{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--muted); font-size:24px; cursor:pointer; line-height:1}
.gacha-pop{text-align:center; padding:14px 0}
.gp-name{color:var(--gold); font-weight:800; margin-bottom:10px}
.gp-item{font-size:26px; font-weight:900; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px}
.gp-tip{font-size:13px; color:var(--muted)}
.bt-card{display:flex; align-items:center; justify-content:center; gap:14px; margin:10px 0}
.bt-side{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px; border-radius:16px; border:1px solid var(--glass-brd); opacity:.7}
.bt-side.win{border-color:var(--gold); opacity:1; box-shadow:0 0 20px rgba(255,216,107,.3); background:rgba(255,216,107,.08)}
.bt-side b{font-size:14px}
.bt-side span{font-size:12px; color:var(--gold)}
.bt-vs{font-weight:900; font-size:20px; color:var(--muted)}
.bt-verdict{text-align:center; font-weight:800; margin-top:10px; font-size:15px}
.share-card{border-radius:18px; overflow:hidden; border:1px solid var(--glass-brd)}
.sc-head{padding:18px; color:#1a1426; display:flex; flex-direction:column; gap:2px}
.sc-name{font-size:24px; font-weight:900}
.sc-sub{font-size:13px; font-weight:600; opacity:.85}
.sc-body{display:flex; gap:14px; padding:16px; background:rgba(0,0,0,.25)}
.sc-meta{flex:1}
.sc-line{font-size:13px; margin-bottom:6px; color:var(--muted)}
.sc-line span{display:inline-block; width:42px; color:var(--txt); font-weight:700}
.sc-stats{margin-top:8px; display:flex; flex-direction:column; gap:4px}
.sc-foot{text-align:center; font-size:11px; color:var(--muted); padding:10px; background:rgba(0,0,0,.3)}

/* Toast */
#toast{position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(28,21,48,.95);
  border:1px solid var(--glass-brd); color:var(--txt); padding:12px 22px; border-radius:24px; font-size:14px; font-weight:600;
  opacity:0; pointer-events:none; transition:.25s; z-index:200}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0); box-shadow:0 8px 24px rgba(155,123,224,.4)}

/* ===== 响应式：平板 / 手机 / iPad ===== */
/* 平板 & iPad 竖屏：保留双栏，但收紧避免横向溢出 */
@media(max-width:1024px) and (min-width:761px){
  .view{max-width:980px}
  .ed-main,.det-main{grid-template-columns:280px 1fr; gap:18px}
  .ed-left,.det-left{position:static; top:auto}
  .ed-preview,.det-img{min-height:300px}
  .ed-preview img,.det-img img{width:240px; max-width:100%}
}
/* 手机：全面单列 + 大触控区（≥44px） */
@media(max-width:760px){
  body{padding-bottom:84px}
  .view{padding:0 14px}
  .navbar{padding:12px 14px; gap:8px; flex-wrap:wrap}
  .nav-brand{font-size:17px}
  .nav-right{gap:8px}
  .nav-btn{padding:9px 13px; font-size:13px; min-height:40px}
  .coin-chip{font-size:13px; padding:5px 10px}
  .hero{padding:24px 0 18px; gap:18px}
  .hero-txt{min-width:0; width:100%}
  .hero-txt h1{font-size:27px}
  .hero-txt p{font-size:13px; line-height:1.6}
  .hero-cta{flex-direction:column; gap:10px}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{width:100%; text-align:center; padding:13px; min-height:46px}
  .hero-stats{grid-template-columns:repeat(2,1fr); gap:10px; width:100%}
  .stat{padding:12px 10px; border-radius:14px}
  .stat-n{font-size:23px}
  .ed-main,.det-main{grid-template-columns:1fr; gap:16px}
  .ed-left,.det-left{position:static}
  .ed-preview,.det-img{min-height:280px; padding:10px}
  .ed-preview img,.det-img img{width:190px; max-width:100%}
  .ed-right{padding:16px}
  .ed-bar{flex-wrap:wrap; gap:10px; padding:14px 0 10px}
  .ed-title{font-size:17px; flex:1 1 100%}
  .ed-bar-r{width:100%; flex-wrap:wrap; gap:8px}
  .ed-bar-r .btn-primary,.ed-bar-r .btn-ghost{flex:1; min-height:44px}
  .ed-tabs{flex-wrap:wrap}
  .ed-tab{flex:1; text-align:center; padding:11px 8px; min-height:44px; font-size:13px}
  .fld input[type=text],.fld input:not([type=range]):not([type=checkbox]),.fld select,.fld textarea,
  .daily-input{font-size:16px}
  .ranges .range input[type=range]{height:30px}
  .opt,.pm-opt{padding:11px 14px; min-height:42px}
  .filter-tab{padding:9px 14px; min-height:40px}
  .oc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .list-head{flex-direction:column; align-items:flex-start; gap:8px}
  .filters{flex-wrap:wrap}
  .modal{align-items:flex-start; padding:14px 12px}
  .modal-box{max-width:100%; padding:22px 16px; max-height:88vh; overflow-y:auto}
  .modal-box h3{font-size:16px}
  .btn-primary,.btn-ghost,.btn-danger{min-height:44px; font-size:14px}
  .share-card .sc-body{flex-direction:column}
  .bt-card{flex-direction:column; gap:10px}
  .bt-vs{transform:rotate(90deg)}
  .daily-card{padding:16px}
}
/* 超窄屏（<380px）：卡片单列 */
@media(max-width:380px){
  .oc-grid{grid-template-columns:1fr}
  .hero-txt h1{font-size:24px}
}