/* =========================================================
   hi开放平台 — 商家控制台（在 console.css 的壳子上加的部分）
   含开店引导的聚光灯与步骤卡
   ========================================================= */

/* ---------- 侧栏里的站点身份 ---------- */
.side-site{
  display:flex;align-items:center;gap:10px;
  margin:12px 12px 4px;padding:11px 12px;
  background:rgba(0,113,227,.07);border-radius:var(--r-m);
}
.site-ava{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(148deg,#1a8bf5,var(--blue-dk));
  color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:600;
}
.site-n{font-size:13px;font-weight:600;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;}
.site-d{font-size:11px;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;}

/* ---------- 欢迎语 ---------- */
.welcome{margin-bottom:20px;}
.welcome h2{font-size:22px;letter-spacing:-.026em;}
.welcome p{font-size:13.5px;color:var(--mute);margin-top:7px;}

/* ---------- 工具条小标题 ---------- */
.tbar-t{font-size:13.5px;font-weight:500;color:var(--ink);padding:0 12px;}

/* ---------- 引导进度 ---------- */
.gprog{
  height:4px;border-radius:2px;background:rgba(0,0,0,.07);
  margin:16px 22px 0;overflow:hidden;
}
.gprog i{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#0071e3,#40c8f4);
  transition:width .6s var(--ease);
}
.gsteps{padding:8px 22px 18px;}
.gsteps li{
  display:flex;align-items:flex-start;gap:14px;
  padding:15px 0;border-bottom:1px solid var(--line-soft);
}
.gsteps li:last-child{border-bottom:0;}
.gs-n{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;margin-top:1px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.06);color:var(--mute);
  font-size:12px;font-weight:600;
  transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.gs-n.done{background:var(--ok);color:#fff;}
.gs-n.now{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(0,113,227,.32);}
.gs-n svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;}
.gs-t{font-size:14px;font-weight:500;letter-spacing:-.015em;}
.gs-d{font-size:12.5px;color:var(--mute);margin-top:5px;line-height:1.65;}
.gsteps li.done .gs-t{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--line);}
.gs-go{margin-left:auto;flex:0 0 auto;align-self:center;}

/* ---------- 空状态 ---------- */
.empty2{padding:56px 24px 60px;text-align:center;}
.empty2 .e-ico{
  width:56px;height:56px;border-radius:18px;margin:0 auto 18px;
  display:grid;place-items:center;
  background:rgba(0,113,227,.08);color:var(--blue);
}
.empty2 .e-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.empty2 h4{font-size:15.5px;letter-spacing:-.02em;}
.empty2 p{font-size:13px;color:var(--mute);margin:9px auto 20px;max-width:386px;line-height:1.72;}

/* ---------- 倍率输入 ---------- */
.price-box{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;color:var(--mute);
}
.price-box em{font-style:normal;font-size:11.5px;color:var(--mute-2);white-space:nowrap;}
.rate-in{
  width:74px;height:32px;padding:0 9px;border-radius:9px;text-align:right;
  border:1px solid var(--line);background:#fff;outline:0;font-size:13.5px;
  font-variant-numeric:tabular-nums;font-family:inherit;
  transition:border-color .26s var(--ease-2),box-shadow .26s var(--ease-2);
}
.rate-in:focus{border-color:rgba(0,113,227,.5);box-shadow:0 0 0 3px rgba(0,113,227,.12);}
.model-chip{
  display:inline-block;font-size:12.5px;background:rgba(0,0,0,.045);
  border-radius:7px;padding:4px 9px;margin:2px 4px 2px 0;
}

/* =========================================================
   我的官网：模板选择 / 文案编辑 / 模型广场
   ========================================================= */

/* ---------- 模板卡 ---------- */
.tpls{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding:20px 22px 24px;
}
.tpl{
  text-align:left;padding:10px;border-radius:var(--r-m);
  border:1px solid var(--line);background:#fff;
  transition:border-color .26s var(--ease-2),box-shadow .26s var(--ease-2),transform .3s var(--ease);
}
.tpl:hover{transform:translateY(-2px);border-color:#b9b9c0;}
.tpl.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.11);}
.tpl-shot{
  aspect-ratio:16/10;border-radius:9px;overflow:hidden;
  background:#f2f2f5;padding:7px;
  display:flex;flex-direction:column;gap:5px;
}
.tpl-shot i,.tpl-shot b{display:block;border-radius:3px;background:rgba(0,0,0,.09);}
.s-dark{height:34%;background:linear-gradient(150deg,#0b1c33,#123f78) !important;}
.s-row{height:5px;width:78%;}
.s-row.short{width:52%;}
.s-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:4px;flex:1;background:none !important;}
.s-grid b{background:rgba(0,113,227,.18);}

.tpl-shot-light{background:#fff;border:1px solid var(--line-soft);}
.s-line{height:7px;width:62%;background:rgba(0,0,0,.26) !important;}
.s-line.short{height:4px;width:40%;background:rgba(0,0,0,.11) !important;}
.s-list{display:flex !important;flex-direction:column;gap:4px;flex:1;background:none !important;}
.s-list b{flex:1;background:rgba(0,0,0,.05);border-radius:4px;}

.tpl-shot-vivid{background:linear-gradient(160deg,#eef7ff,#effbf5);}
.s-band{height:30%;background:linear-gradient(96deg,#4aa8ff,#7ee0c8) !important;}
.s-grid.tight{grid-template-columns:repeat(2,1fr);}

.tpl-shot-dash{align-items:center;justify-content:center;background:#f2f2f5;}
.s-plus{
  width:26px !important;height:26px !important;border-radius:8px !important;
  background:rgba(0,0,0,.08) !important;position:relative;
}
.s-plus::before,.s-plus::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--mute);border-radius:2px;
}
.s-plus::before{width:11px;height:1.6px;}
.s-plus::after{width:1.6px;height:11px;}

.tpl-n{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.02em;margin-top:11px;}
.tpl-d{display:block;font-size:11.5px;color:var(--mute);margin-top:3px;}

/* ---------- 文案表单 ---------- */
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:20px 22px 24px;
}
.field-wide{grid-column:1 / -1;}
.field label{display:block;font-size:12.5px;color:var(--mute);margin-bottom:7px;}
.field input[type=text]{
  width:100%;height:40px;padding:0 13px;border-radius:var(--r-m);
  border:1px solid var(--line);background:#fff;outline:0;font-size:14px;font-family:inherit;
  transition:border-color .26s var(--ease-2),box-shadow .26s var(--ease-2);
}
.field input[type=text]:focus{border-color:rgba(0,113,227,.5);box-shadow:0 0 0 3px rgba(0,113,227,.12);}
.field input::placeholder{color:var(--mute-2);}

/* ---------- 模型自动识别 ---------- */
.detect{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.detect-s{font-size:12.5px;color:var(--mute);line-height:1.5;}
.detect-s b{color:var(--ink);font-weight:600;}
.detect-s b.no{color:#c93838;}
.mchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.mchip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:var(--pill);
  padding:6px 12px;font-size:12.5px;color:var(--ink-2);background:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  transition:border-color .22s var(--ease-2),background .22s var(--ease-2),color .22s var(--ease-2);
}
.mchip:hover{border-color:#b9b9c0;}
.mchip.on{border-color:var(--blue);background:rgba(0,113,227,.07);color:var(--ink);}
.mchip.on i{font-style:normal;opacity:.55;}
.mchip-sep{width:1px;height:16px;background:var(--line);margin:0 4px;}
#chManual{margin-top:12px;}
.modal-b textarea{
  width:100%;border-radius:var(--r-m);border:1px solid var(--line);
  padding:11px 13px;font-size:13px;outline:0;resize:vertical;line-height:1.65;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  transition:border-color .26s var(--ease-2),box-shadow .26s var(--ease-2);
}
.modal-b textarea:focus{border-color:rgba(0,113,227,.5);box-shadow:0 0 0 3px rgba(0,113,227,.12);}
.fhint2{font-size:12px;color:var(--mute-2);margin-top:8px;}

/* ---------- 表格里的小开关 ---------- */
.switch.sm{width:38px;height:22px;}
.switch.sm::after{width:18px;height:18px;top:2px;left:2px;}
.switch.sm.on::after{transform:translateX(16px);}

@media(max-width:1100px){
  .tpls{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
  .tpls{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}

/* =========================================================
   VIP 状态与开通
   ========================================================= */

/* ---------- 状态条 ---------- */
.policy{
  display:flex;align-items:center;gap:14px;
  border-radius:var(--r-m);padding:15px 18px;margin-bottom:18px;
  border:1px solid transparent;
}
.policy[hidden]{display:none;}
.policy p{flex:1;font-size:13.5px;line-height:1.6;}
.policy b{font-weight:600;}
.policy.warn{background:rgba(199,119,0,.08);border-color:rgba(199,119,0,.22);color:#8a5600;}
.policy.warn b{color:#6d4400;}
.policy.bad{background:rgba(214,58,58,.07);border-color:rgba(214,58,58,.22);color:#a82f2f;}
.policy.bad b{color:#8a2525;}
.pdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:currentColor;position:relative;}
.pdot::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:currentColor;opacity:.35;animation:pulseDot 2s var(--ease-2) infinite;
}
@keyframes pulseDot{0%{transform:scale(.6);opacity:.4}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}

/* ---------- VIP 档位 ---------- */
.vplans{display:flex;flex-direction:column;gap:9px;}
.vpl{
  text-align:left;position:relative;
  border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 16px;background:#fff;
  transition:border-color .26s var(--ease-2),box-shadow .26s var(--ease-2);
}
.vpl:hover{border-color:#b9b9c0;}
.vpl.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.11);}
.vpl-n{display:block;font-size:14px;font-weight:600;letter-spacing:-.02em;}
.vpl-p{display:block;font-size:19px;font-weight:600;letter-spacing:-.035em;margin-top:5px;font-variant-numeric:tabular-nums;}
.vpl-p em{font-style:normal;font-size:.55em;font-weight:400;color:var(--mute-2);margin-left:5px;}
.vpl-c{display:block;font-size:12px;color:var(--mute);margin-top:6px;}

/* ---------- 收款 ---------- */
.pay{
  display:flex;gap:16px;align-items:center;margin-top:18px;
  background:#f5f5f7;border-radius:var(--r-m);padding:16px;
}
.pay-qr{
  width:96px;height:96px;flex:0 0 auto;border-radius:12px;
  background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--mute-2);font-size:11px;
}
.pay-qr svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.pay-info{flex:1;}
.pay-t{font-size:12.5px;color:var(--mute);}
.pay-no{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:.06em;margin-top:6px;}
.pay-s{font-size:11.5px;color:var(--mute-2);margin-top:8px;line-height:1.55;}

/* ---------- 登录闸门 ---------- */
.gate{
  min-height:100vh;display:grid;place-items:center;padding:32px 20px;
  background:
    radial-gradient(ellipse 80% 46% at 50% -6%,rgba(0,113,227,.1),transparent 62%),
    var(--bg);
}
.gate-box{
  width:100%;max-width:404px;background:#fff;border-radius:var(--r-l);
  padding:32px 30px 26px;box-shadow:var(--sh-3);
}
.gate-box .brand{margin-bottom:24px;}
.gate-box h1{font-size:22px;letter-spacing:-.026em;}
.gate-s{font-size:13.5px;color:var(--mute);margin-top:10px;line-height:1.65;}
.gate-box .field{margin-top:18px;}
.gate-box .field label{display:block;font-size:12.5px;color:var(--mute);margin-bottom:7px;}
.gate-box .field input{
  width:100%;height:42px;padding:0 13px;border-radius:var(--r-m);
  border:1px solid var(--line);background:#fff;outline:0;font-size:14.5px;font-family:inherit;
  transition:border-color .26s var(--ease-2),box-shadow .26s var(--ease-2);
}
.gate-box .field input:focus{border-color:rgba(0,113,227,.5);box-shadow:0 0 0 3px rgba(0,113,227,.12);}
.gate-btn{width:100%;margin-top:22px;padding:13px;font-size:15.5px;}
.gate-alt{text-align:center;font-size:13px;color:var(--mute);margin-top:16px;}
.gate-alt a{
  color:var(--ink);font-weight:500;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;
}

/* ---------- 密钥列表 ---------- */
.keys{margin-top:16px;border-top:1px solid var(--line-soft);}
.keyrow{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.keyrow:last-child{border-bottom:0;}
.keyrow > div:first-child{flex:1;min-width:0;}
.keyname{font-size:13.5px;font-weight:500;}
.keyval{
  font-size:12.5px;color:var(--ink-2);margin-top:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
}
.keymeta{font-size:11.5px;color:var(--mute-2);margin-top:4px;}
.keyops{display:flex;gap:6px;flex:0 0 auto;}

/* 失败提示条 */
.toast.bad{background:rgba(168,47,47,.95);}
.toast.bad .ico{color:#ffd9d9;}

/* ---------- 模型多选 ---------- */
.pick{display:flex;flex-wrap:wrap;gap:8px;}.pick-i{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:var(--pill);
  padding:7px 14px;font-size:13px;cursor:pointer;
  transition:border-color .26s var(--ease-2),background .26s var(--ease-2),color .26s var(--ease-2);
}
.pick-i:hover{border-color:#b9b9c0;}
.pick-i:has(input:checked){border-color:var(--blue);background:rgba(0,113,227,.06);color:var(--ink);font-weight:500;}
.pick-i input{accent-color:var(--blue);width:15px;height:15px;margin:0;}

/* =========================================================
   开店引导
   ========================================================= */

/* 聚光灯：用一个超大扩散阴影把别处压暗，只留一个亮洞 */
.spot{
  position:absolute;z-index:150;pointer-events:none;
  border-radius:14px;opacity:0;
  box-shadow:
    0 0 0 9999px rgba(10,16,28,.58),
    0 0 0 2px rgba(255,255,255,.92),
    0 10px 34px rgba(0,0,0,.26);
  transition:top .5s var(--ease),left .5s var(--ease),
             width .5s var(--ease),height .5s var(--ease),opacity .32s var(--ease-2);
}
.spot.on{opacity:1;}
.spot::after{
  content:"";position:absolute;inset:-4px;border-radius:18px;
  box-shadow:0 0 0 2px rgba(64,168,255,.9);
  animation:spotPulse 1.9s var(--ease-2) infinite;
}
@keyframes spotPulse{
  0%{opacity:.85;transform:scale(1)}
  70%{opacity:0;transform:scale(1.07)}
  100%{opacity:0}
}

/* 引导卡 */
.gpanel{
  position:fixed;z-index:160;
  left:50%;bottom:22px;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:560px;
  background:rgba(26,26,28,.975);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  color:#fff;border-radius:18px;
  padding:17px 20px 15px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:gpIn .5s var(--ease) both;
}
@keyframes gpIn{from{opacity:0;transform:translateX(-50%) translateY(18px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.gpanel[hidden]{display:none;}
.gp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.gp-step{
  font-size:11.5px;font-weight:500;letter-spacing:.04em;
  color:#7fb8ff;background:rgba(64,168,255,.14);
  border-radius:var(--pill);padding:4px 11px;
}
.gp-x{
  width:28px;height:28px;border-radius:8px;margin-right:-4px;
  display:grid;place-items:center;color:rgba(255,255,255,.5);
  transition:background .22s var(--ease-2),color .22s var(--ease-2);
}
.gp-x:hover{background:rgba(255,255,255,.1);color:#fff;}
.gpanel h4{font-size:16px;letter-spacing:-.02em;margin-top:11px;color:#fff;}
.gpanel p{font-size:13.5px;color:#a1a1a6;margin-top:7px;line-height:1.68;}
.gp-dots{display:flex;gap:6px;margin-top:14px;}
.gp-dots i{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:width .4s var(--ease),background .4s var(--ease-2);
}
.gp-dots i.on{width:18px;border-radius:3px;background:#4aa8ff;}
.gp-dots i.done{background:#1d9c5c;}
.gp-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:15px;}
.gpanel .btn-quiet{
  background:rgba(255,255,255,.12);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.gpanel .btn-quiet:hover{background:rgba(255,255,255,.2);}
.gpanel .btn-quiet[disabled]{opacity:.38;pointer-events:none;}

/* 动作完成时给引导卡一个正反馈 */
.gpanel.ping{animation:gpPing .6s var(--ease);}
@keyframes gpPing{
  0%{box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 0 rgba(29,156,92,.6)}
  60%{box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 14px rgba(29,156,92,0)}
  100%{box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 0 rgba(29,156,92,0)}
}

/* 引导进行中时，被指到的元素要能点到 */
.spot.on ~ * { }
body.guiding .main{position:relative;z-index:1;}

@media(max-width:640px){
  .gpanel{bottom:14px;padding:15px 16px 13px;}
  .gsteps{padding:6px 16px 14px;}
  .gprog{margin:14px 16px 0;}
  .empty2{padding:44px 18px 48px;}
}