/* 飞牛AI · 科技风主题（暗色玻璃 + 青紫渐变）
   加载顺序：style.css → style-extra.css → style-tech.css（本文件最后，统一覆盖）
   目标：手机端为主，桌面端兼容 */

/* ===== 主题变量 ===== */
:root{
  --bg:#05070D;
  --surface:rgba(19,26,42,.74);
  --surface-2:rgba(255,255,255,.035);
  --border:rgba(148,163,184,.16);
  --text:#E9EFFB;
  --text-2:#9CAEC9;
  --muted:#66799A;
  --primary:#22D3EE;
  --primary-d:#0EA5C6;
  --primary-soft:rgba(34,211,238,.12);
  --ok:#34D399;
  --warn:#FBBF24;
  --err:#FB7185;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 20px 50px rgba(2,6,16,.55);
  --shadow-sm:0 6px 18px rgba(2,6,16,.35);
  --tech-grad:linear-gradient(135deg,#22D3EE 0%,#6366F1 100%);
  --tech-glow:0 10px 28px rgba(34,211,238,.28);
}

/* ===== 背景：深空 + 光晕 + 网格 ===== */
html{background:#05070D;}
body{
  background:var(--bg);
  color:var(--text);
  font-size:14.5px;
  letter-spacing:.1px;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(99,102,241,.24), transparent 62%),
    radial-gradient(760px 460px at -12% 6%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(700px 620px at 50% 112%, rgba(56,189,248,.10), transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}
#appShell{position:relative;z-index:1;}
.tabbar{z-index:41;}
.auth-modal,.modal,.img-modal{z-index:200;}

/* ===== 顶栏 ===== */
.topbar{
  background:rgba(6,10,19,.78);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(148,163,184,.12);
  height:54px;
}
.brand-logo{
  background:var(--tech-grad);
  box-shadow:0 6px 18px rgba(34,211,238,.35);
  color:#04121A;
  font-weight:900;
}
.brand-name{color:#F3F7FF;font-weight:800;letter-spacing:.6px;}
.brand-sub{color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;font-size:9.5px;}
.console-btn{
  background:rgba(255,255,255,.045);border-color:rgba(148,163,184,.2);color:var(--text-2);
}
.console-btn:hover{background:var(--primary-soft);border-color:rgba(34,211,238,.5);color:var(--primary);}
.console-btn b{color:var(--primary);text-shadow:0 0 18px rgba(34,211,238,.45);}
.icon-btn{
  background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.18);color:var(--text-2);
}
.icon-btn:hover{background:var(--primary-soft);border-color:rgba(34,211,238,.5);color:var(--primary);}
.top-guest-tip{color:var(--muted);}
.top-user{color:var(--text-2);}

/* 右侧悬浮客服（只在「额度与充值」页显示） */
.wx-float-wrap{
  position:fixed;right:0;top:27%;transform:translateY(-50%);z-index:45;
  display:flex;align-items:center;
}
.wx-float{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:50px;padding:11px 0 12px;cursor:pointer;
  border:1px solid rgba(7,193,96,.45);border-right:none;
  border-radius:15px 0 0 15px;
  background:rgba(8,26,20,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:#3EE08F;box-shadow:-8px 0 26px rgba(2,6,16,.55),0 0 22px rgba(7,193,96,.12);
  transition:.16s;
}
.wx-float svg{width:21px;height:21px;filter:drop-shadow(0 0 7px rgba(7,193,96,.55));}
.wx-float-txt{font-size:11px;font-weight:800;letter-spacing:.5px;line-height:1.2;}
.wx-float:hover{background:rgba(7,193,96,.22);border-color:rgba(7,193,96,.75);color:#5BEBA4;width:54px;}
.wx-float:active{transform:scale(.97);}
.wx-pop{
  position:absolute;top:50%;left:auto;right:calc(100% + 12px);z-index:60;
  transform:translateY(-50%);
  min-width:196px;padding:12px 14px;border-radius:14px;
  background:rgba(13,20,33,.97);
  border:1px solid rgba(7,193,96,.38);
  box-shadow:0 18px 40px rgba(2,6,16,.66),0 0 24px rgba(7,193,96,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:wxPopIn .16s ease-out;
}
@keyframes wxPopIn{from{opacity:0;transform:translate(8px,-50%);}to{opacity:1;transform:translate(0,-50%);}}
.wx-pop::before{
  content:"";position:absolute;top:50%;right:-6px;margin-top:-5px;width:10px;height:10px;
  background:rgba(13,20,33,.97);border-right:1px solid rgba(7,193,96,.38);
  border-bottom:1px solid rgba(7,193,96,.38);transform:rotate(-45deg);
}
.wx-pop-lbl{font-size:11px;color:var(--muted);letter-spacing:.4px;}
.wx-pop-id{
  margin:3px 0 6px;font-size:19px;font-weight:900;letter-spacing:1.6px;
  color:#5BEBA4;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.wx-pop-tip{font-size:11.5px;color:var(--text-2);white-space:nowrap;}
.wx-pop-tip.ok{color:#5BEBA4;}
.wx-pop-tip.fail{color:var(--warn);}

/* ===== 侧栏（桌面） ===== */
.sidebar-foot,.sidebar-foot .muted{color:var(--muted);}
.nav-group-title{color:var(--text);}
.nav-item{color:var(--text-2);}
.nav-item:hover{background:rgba(255,255,255,.05);}
.nav-item.active{
  background:linear-gradient(90deg, rgba(34,211,238,.16), rgba(99,102,241,.10));
  color:var(--primary);
  box-shadow:inset 2px 0 0 var(--primary);
}
.nav-sub{border-left-color:rgba(148,163,184,.18);}
.nav-tag{background:rgba(255,255,255,.06);color:var(--text-2);}
.nav-tag2{color:var(--muted);}
.side-account{background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.16);}
.sa-avatar{background:var(--primary-soft);}

/* ===== 标题与卡片 ===== */
.feature-head h1{
  font-size:21px;letter-spacing:.4px;color:#F4F8FF;
}
.feature-head h1 .badge{
  background:rgba(34,211,238,.12);color:var(--primary);
  border:1px solid rgba(34,211,238,.28);
  letter-spacing:1px;font-size:10px;
}
.feature-desc{color:var(--text-2);font-size:13px;line-height:1.75;}
.card{
  background:var(--surface);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05);
}
.card-title{color:#F1F6FF;letter-spacing:.3px;font-size:14.5px;position:relative;padding-left:11px;}
.card-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:14px;border-radius:2px;background:var(--tech-grad);
  box-shadow:0 0 10px rgba(34,211,238,.6);
}
.hint-box{
  background:rgba(255,255,255,.03);
  border-color:rgba(148,163,184,.16);
  color:var(--text-2);
}
.hint-box b{color:var(--primary);}
.cost-line{
  background:rgba(34,211,238,.07);
  border:1px solid rgba(34,211,238,.16);
  color:var(--text-2);
}
.cost-line b{color:var(--primary);text-shadow:0 0 16px rgba(34,211,238,.4);}

/* ===== 表单控件 ===== */
.input,.select,.textarea{
  background-color:rgba(6,11,21,.72);
  border-color:rgba(148,163,184,.22);
  color:var(--text);
}
.input::placeholder,.textarea::placeholder{color:#5B6C8A;}
.textarea:focus,.input:focus,.select:focus{
  border-color:rgba(34,211,238,.65);
  box-shadow:0 0 0 3px rgba(34,211,238,.16), 0 0 22px rgba(34,211,238,.12);
}
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239CAEC9' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px;
}
.field-label{color:#CBD8EC;}
.field-label .hint,.field-label .req{color:var(--muted);}
.field-label .req{color:var(--err);}

/* 拖拽区 */
.dropzone{
  background:rgba(8,14,26,.6);
  border-color:rgba(34,211,238,.28);
}
.dropzone:hover,.dropzone:focus,.dropzone.drag{
  background:rgba(34,211,238,.06);
  border-color:rgba(34,211,238,.7);
  box-shadow:0 0 0 3px rgba(34,211,238,.1), 0 0 30px rgba(34,211,238,.12) inset;
}
.dz-text{color:var(--text);}
.dz-sub{color:var(--muted);}
.thumb{border-color:rgba(148,163,184,.2);background:rgba(255,255,255,.03);}
.thumb .idx{background:var(--tech-grad);color:#04121A;font-weight:800;}

/* ===== 按钮 ===== */
.btn-primary{
  background:var(--tech-grad);
  color:#03121B;
  font-weight:800;
  letter-spacing:.5px;
  box-shadow:var(--tech-glow);
}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 12px 34px rgba(34,211,238,.4);}
.btn-primary:disabled{opacity:.45;box-shadow:none;filter:none;}
.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(148,163,184,.22);
  color:var(--text-2);
}
.btn-ghost:hover{border-color:rgba(34,211,238,.55);color:var(--primary);background:rgba(34,211,238,.07);}
.btn-mini{
  background:rgba(255,255,255,.04);
  border-color:rgba(148,163,184,.2);
  color:var(--text-2);
}
.btn-mini:hover{border-color:rgba(34,211,238,.55);color:var(--primary);}
.btn-danger{color:#FB7185;border-color:rgba(251,113,133,.35);}
.btn-danger:hover{background:rgba(251,113,133,.1);color:#FB7185;border-color:#FB7185;}

/* ===== 结果队列 ===== */
.pill{background:rgba(255,255,255,.06);color:var(--text-2);}
.pill-idle{background:rgba(255,255,255,.05);color:var(--muted);}
.pill-running{background:rgba(251,191,36,.12);color:#FBBF24;}
.pill-done{background:rgba(52,211,153,.12);color:var(--ok);}
.pill-error{background:rgba(251,113,133,.12);color:var(--err);}
.slot{
  background:rgba(255,255,255,.028);
  border-color:rgba(148,163,184,.2);
}
.slot.idle{border-style:dashed;}
.slot.running{
  border-color:rgba(34,211,238,.75);
  background:rgba(34,211,238,.06);
  box-shadow:0 0 0 3px rgba(34,211,238,.08), 0 0 26px rgba(34,211,238,.18);
  animation:pulse 2s ease-in-out infinite;
}
.slot.done{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.05);}
.slot.error{border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.05);}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(34,211,238,.06),0 0 18px rgba(34,211,238,.12);}50%{box-shadow:0 0 0 4px rgba(34,211,238,.12),0 0 34px rgba(34,211,238,.26);}}
.slot-text{color:var(--text-2);}
.slot-text.dim{color:var(--muted);}
.err-text{color:var(--err);}
.slot-meta{color:var(--muted);}
.slot-dot{box-shadow:0 0 0 5px rgba(255,255,255,.04), 0 0 14px currentColor;}
.spinner{border-color:rgba(148,163,184,.2);border-top-color:var(--primary);}

/* ===== 历史记录 ===== */
.rh-sub{color:var(--muted);}
.result-hist{border-top-color:rgba(148,163,184,.18);}
.rh-head span{color:#EAF1FC;}
.rh-more{color:var(--primary);}
.rh-thumb{border-color:rgba(148,163,184,.2);background:rgba(255,255,255,.03);}
.rh-thumb-mark{background:rgba(3,8,16,.7);}
.rh-empty{color:var(--muted);grid-column:1/-1;}
.hist-card{background:rgba(255,255,255,.03);border-color:rgba(148,163,184,.18);}
.hist-card:hover{box-shadow:0 8px 26px rgba(2,6,16,.5);border-color:rgba(34,211,238,.35);}
.hist-card .hc-prompt{color:#DCE6F5;}
.hist-card .hc-meta{color:var(--muted);}
.hist-nopic{background:rgba(255,255,255,.03);color:var(--muted);}

/* ===== 表格 ===== */
.table-wrap{border-color:rgba(148,163,184,.16);}
.data-table th{
  background:rgba(9,15,27,.9);
  color:#A9BBD4;
  border-bottom-color:rgba(148,163,184,.16);
  font-weight:700;
  letter-spacing:.3px;
}
.data-table td{border-bottom-color:rgba(148,163,184,.1);color:#D8E2F1;}
.data-table tr:last-child td{border-bottom:none;}
.pos{color:var(--ok);}
.neg{color:var(--err);}

/* ===== 个人中心 / 额度 ===== */
.pb-num{color:var(--primary);text-shadow:0 0 30px rgba(34,211,238,.35);}
.kv{border-bottom-color:rgba(148,163,184,.14);}
.kv span{color:var(--text-2);}
.redeem-row .input{height:46px;}
.pkg-info{border-top-color:rgba(148,163,184,.16);}
.pkg-info-title{color:#DCE6F5;}
.captcha-img{background:#0B1220;border-color:rgba(148,163,184,.22);}

/* ===== 弹窗 / 灯箱 ===== */
.auth-backdrop{background:rgba(2,5,12,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.auth-card{
  background:linear-gradient(180deg, rgba(22,30,48,.96), rgba(11,17,30,.98));
  border:1px solid rgba(148,163,184,.2);
  box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
}
.auth-brand b{color:#F4F8FF;}
.auth-sub{color:var(--text-2);}
.auth-tabs{border-bottom-color:rgba(148,163,184,.16);}
.auth-tab{color:var(--text-2);}
.auth-tab.active{color:var(--primary);border-bottom-color:var(--primary);text-shadow:0 0 18px rgba(34,211,238,.5);}
.auth-err{background:rgba(251,113,133,.1);color:#FFB3BF;border:1px solid rgba(251,113,133,.25);}
.auth-close{background:rgba(255,255,255,.06);color:var(--text-2);}
.auth-foot-tip{color:var(--muted);}
.modal-mask{background:rgba(2,5,12,.7);}
.modal-card,.img-modal-card{
  background:linear-gradient(180deg, rgba(22,30,48,.97), rgba(11,17,30,.99));
  border:1px solid rgba(148,163,184,.2);
}
.modal-head{border-bottom-color:rgba(148,163,184,.16);}
.img-modal-backdrop{background:rgba(2,5,12,.88);}
.img-modal-close{background:rgba(255,255,255,.1);color:#E9EFFB;}
.toast{
  background:rgba(10,17,30,.94);
  border:1px solid rgba(34,211,238,.35);
  color:#EAF3FF;
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 24px rgba(34,211,238,.15);
}

/* ===== 底部 Tab（手机） ===== */
.tabbar{
  background:rgba(7,11,20,.86) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-top:1px solid rgba(148,163,184,.14);
  box-shadow:0 -10px 30px rgba(0,0,0,.45);
}
.tab{color:var(--muted);transition:.15s;}
.tab svg{
  width:21px;height:21px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:.15s;
}
.tab.active{color:var(--primary);font-weight:700;}
.tab.active svg{opacity:1;filter:drop-shadow(0 0 7px rgba(34,211,238,.75));}
.tab.active::after{
  content:"";display:block;width:18px;height:3px;border-radius:3px;margin-top:3px;
  background:var(--tech-grad);box-shadow:0 0 10px rgba(34,211,238,.7);
}

/* ===== 手机适配（重点） ===== */
@media (max-width:860px){
  body{font-size:14px;}
  .topbar{height:52px;padding:0 12px;}
  .brand-logo{width:30px;height:30px;border-radius:9px;font-size:16px;}
  .brand-name{font-size:15px;}
  .brand-sub{font-size:9px;letter-spacing:1px;}
  .console-btn{padding:6px 10px;font-size:11.5px;}
  .console-btn b{font-size:12.5px;}
  .icon-btn{width:34px;height:34px;border-radius:9px;}
  .wx-float{width:46px;padding:10px 0 11px;gap:4px;}
  .wx-float svg{width:19px;height:19px;}
  .wx-float-txt{font-size:10px;}
  .wx-pop{min-width:180px;padding:10px 12px;}
  .wx-pop-id{font-size:17px;}
  .main{padding:14px 12px 96px;}
  .feature-head{margin-bottom:12px;}
  .feature-head h1{font-size:19px;gap:8px;}
  .feature-desc{font-size:12.5px;line-height:1.7;}
  .card{padding:14px;border-radius:16px;}
  .card-title{font-size:14px;margin-bottom:10px;}
  .grid{gap:12px;}
  .field{margin-bottom:14px;}
  .field-label{font-size:12.5px;margin-bottom:6px;}
  .input,.select,.textarea{font-size:14px;padding:10px 11px;}
  .btn-primary{padding:13px;font-size:15px;border-radius:13px;}
  .cost-line{font-size:12px;padding:8px 10px;}
  .task-grid{gap:10px;}
  .slot,.slot-inner{min-height:148px;}
  .slot-img{max-height:170px;}
  .result-head{margin-bottom:10px;}
  .rh-title h2{font-size:15px;}
  .rh-sub{font-size:11px;}
  .rh-actions .btn-ghost{padding:6px 10px;font-size:11.5px;}
  .pill{font-size:11px;padding:4px 10px;}
  .result-hist{margin-top:12px;padding-top:12px;}
  .hist-grid{gap:10px;}
  .hist-card img{height:104px;}
  .hist-card .hc-body{padding:7px 9px;}
  .hist-card .hc-prompt{font-size:11.5px;}
  .hist-toolbar{margin-bottom:12px;}
  .table-wrap{border-radius:12px;-webkit-overflow-scrolling:touch;}
  .data-table{min-width:0;font-size:11.5px;}
  .data-table th,.data-table td{padding:7px 8px;}
  .data-table th{font-size:11px;}
  .pkg-info{margin-top:14px;padding-top:12px;}
  .pkg-info-title{font-size:12.5px;}
  .redeem-row{gap:8px;}
  .redeem-row .input{min-width:0;height:46px;font-size:13.5px;}
  .redeem-row .btn-primary{height:46px;padding:0 20px;font-size:14px;}
  .captcha-row .input{height:44px;}
  .captcha-img{width:104px;height:44px;}
  .auth-modal{padding:14px;}
  .auth-card{padding:22px 18px;border-radius:18px;}
  .auth-brand{font-size:17px;}
  .auth-brand .brand-logo{width:30px;height:30px;font-size:16px;}
  .tabbar{padding:6px 0 calc(7px + env(safe-area-inset-bottom));}
  .tab span{font-size:19px;}
  .tab em{font-size:10.5px;}
  .toast{bottom:92px;font-size:12.5px;}
  .img-modal-card{padding:10px;border-radius:16px;}
  .img-modal-card img{max-height:70vh;}
  .dropzone{padding:18px 10px;}
}
@media (max-width:380px){
  .wx-float{width:42px;}
  .wx-pop{min-width:170px;}
  .feature-head h1{font-size:18px;}  .data-table{font-size:11px;}
  .data-table th,.data-table td{padding:6px 6px;}
  .redeem-row .btn-primary{padding:0 16px;}
}