/* ==========================================================================
   一键时约 · 预约平台后台 样式
   深蓝科技风（对齐用户给的参考大屏截图）
   ========================================================================== */
:root{
  --bg:#071022; --bg2:#0A1A30; --panel:#0E2444; --panel2:#0B1B33;
  --line:#16365C; --line2:#1F4B7A;
  --txt:#E6F0FF; --txt2:#93AECE; --txt3:#5F7EA6;
  --blue:#2E8BFF; --blued:#1F5FA8; --cyan:#22D3EE;
  --green:#2FCB7B; --orange:#FFB020; --red:#FF5F6D; --gold:#FFD166;
  --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.6 "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
input,select,button,textarea{font-family:inherit;font-size:14px}
button{cursor:pointer}
b{font-weight:600}
em{font-style:normal}
[hidden]{display:none !important}

/* ---------------- 登录 ---------------- */
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 620px at 50% 12%,#123055 0%,#071022 62%)}
.login-box{width:378px;padding:40px 38px 30px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,#0F2646,#0A1A30);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.login-logo{font-size:27px;font-weight:800;letter-spacing:3px;
  background:linear-gradient(90deg,#5FB5FF,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-sub{color:var(--txt3);font-size:13px;letter-spacing:1px;margin:6px 0 26px}
.login-field{margin-bottom:16px}
.login-field label{display:block;color:var(--txt2);font-size:12.5px;margin-bottom:7px}
.login-field input{width:100%;height:46px;padding:0 14px;border-radius:var(--r);
  border:1px solid var(--line2);background:#08182E;color:var(--txt);outline:none;transition:.2s}
.login-field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,139,255,.16)}
.btn-lg{width:100%;height:48px;margin-top:8px;font-size:16px;letter-spacing:4px}
.login-tip{margin-top:18px;text-align:center;color:var(--txt3);font-size:12.5px}
.login-tip b{color:var(--blue)}

/* ---------------- 按钮 ---------------- */
.btn-main,.btn-ghost,.btn-warn,.btn-red{
  height:38px;padding:0 18px;border-radius:var(--r);border:1px solid transparent;
  color:#fff;transition:.16s;font-weight:500
}
.btn-main{background:linear-gradient(180deg,#3A96FF,#2472D8);border-color:#4AA2FF}
.btn-main:hover{filter:brightness(1.12)}
.btn-ghost{background:#102646;border-color:var(--line2);color:var(--txt2)}
.btn-ghost:hover{color:#fff;border-color:#3A78B8}
.btn-warn{background:linear-gradient(180deg,#FFC24D,#E79A0B);border-color:#FFCE72;color:#3A2600}
.btn-red{background:#2A1620;border-color:#7A2B39;color:#FF8794}
.btn-red:hover{background:#3A1C28}
.btn-s{padding:0 12px;height:30px;font-size:13px;border-radius:6px}
.btn-main:disabled,.btn-ghost:disabled{opacity:.5;cursor:not-allowed}

/* ---------------- 布局 ---------------- */
.app{display:flex;height:100vh;overflow:hidden}
.side{width:210px;flex:0 0 210px;background:#091731;border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 0 16px}
.side-brand{padding:2px 20px 20px;border-bottom:1px solid #12294A;margin-bottom:14px}
.side-brand-t{font-size:16px;font-weight:700;letter-spacing:1px}
.side-brand-s{font-size:11.5px;color:var(--txt3);letter-spacing:.5px;margin-top:3px}
.side-nav{flex:1;overflow:auto}
.side-nav a{position:relative;display:flex;align-items:center;gap:10px;height:46px;padding:0 20px;
  color:var(--txt2);text-decoration:none;cursor:pointer;font-size:14px;transition:.16s}
.side-nav a i{font-style:normal;width:16px;text-align:center;opacity:.75;font-size:13px}
.side-nav a:hover{background:#0D2140;color:#DCE9FF}
.side-nav a.on{background:linear-gradient(90deg,rgba(46,139,255,.22),rgba(46,139,255,0));color:#63B4FF;font-weight:600}
.side-nav a.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;background:var(--blue);border-radius:0 3px 3px 0}
.side-nav .dot{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--orange);
  color:#3A2600;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.side-exit{margin:14px 16px 0;height:40px;border-radius:var(--r);border:1px solid var(--line2);
  background:#0C1F3C;color:var(--txt2);transition:.16s}
.side-exit:hover{color:#fff;border-color:#3A78B8;background:#123055}

.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;border-bottom:1px solid var(--line);background:#081530}
.topbar h1{font-size:16px;margin:0;font-weight:600;letter-spacing:.5px}
.topbar-r{display:flex;align-items:center;gap:16px;color:var(--txt3);font-size:12.5px}
.live{color:var(--green)}
.who{color:var(--txt2)}
.page{display:none;flex:1;overflow:auto;padding:20px 26px 40px}
.page.on{display:block}

/* ---------------- 通用盒子 ---------------- */
.box{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.box-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;color:var(--txt2);margin-bottom:12px}
.box-h span{color:#CFE1FA;font-weight:600;font-size:14px;position:relative;padding-left:10px}
.box-h span::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--blue)}
.box-h em{color:var(--txt3);font-size:12px}
.grow{flex:1;min-height:0;display:flex;flex-direction:column}

/* ---------------- 大屏 ---------------- */
.screen-title{text-align:center;font-size:23px;font-weight:800;letter-spacing:6px;margin:2px 0 16px;
  background:linear-gradient(90deg,#7FC4FF,#22D3EE 60%,#7FC4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.screen-grid{display:grid;grid-template-columns:1fr 296px;gap:16px;height:calc(100vh - 250px);min-height:470px}
.map-wrap{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#0C2040,#08182F);
  border:1px solid var(--line);border-radius:10px;padding:14px 16px 8px;overflow:hidden}
#chinaMap{flex:1;min-height:0;width:100%}
.map-legend{display:flex;gap:20px;justify-content:center;padding:6px 0 4px;color:var(--txt3);font-size:12px}
.map-legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.screen-side{display:flex;flex-direction:column;gap:14px;overflow:auto}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:76px;height:34px;border-radius:6px;border:1px solid var(--line2);
  background:#0C1F3C;color:var(--txt2);transition:.16s;font-size:13px}
.seg button:hover{color:#fff;border-color:#3A78B8}
.seg button.on{background:linear-gradient(180deg,#2B7FE0,#1C5CAE);border-color:#4AA2FF;color:#fff;font-weight:600}
.ov{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:8px;overflow:hidden}
.ov div{background:#0B1D38;padding:11px 12px}
.ov p{margin:0;color:var(--txt3);font-size:12px}
.ov b{display:block;font-size:21px;font-weight:700;color:#5FB5FF;margin-top:3px;font-variant-numeric:tabular-nums}
.ov b.or{color:var(--orange)}.ov b.gn{color:var(--green)}.ov b.gd{color:var(--gold)}
.todo a{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;
  background:#0B1D38;color:var(--txt2);text-decoration:none;margin-bottom:7px;font-size:13px;cursor:pointer;transition:.16s}
.todo a:hover{background:#122E52;color:#fff}
.todo a b{color:var(--orange);font-size:15px}
.todo a:last-child{margin-bottom:0}
.screen-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.mini-chart{height:150px}
.rank div,.feed div{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 0;color:var(--txt2);
  border-bottom:1px dashed #12294A}
.rank div:last-child,.feed div:last-child{border-bottom:0}
.rank i{width:18px;height:18px;flex:0 0 18px;border-radius:4px;background:#12294A;color:#8FB8E6;
  font-size:11px;display:flex;align-items:center;justify-content:center;font-style:normal}
.rank i.t1{background:#B8860B;color:#FFF6DC}.rank i.t2{background:#5C7EA8;color:#fff}.rank i.t3{background:#8A5A32;color:#FFF0E0}
.rank span:nth-child(2),.feed span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank b{color:#5FB5FF}
.feed .ft{flex:0 0 34px;color:var(--txt3);font-size:11.5px}
.feed .type{flex:0 0 auto;padding:1px 6px;border-radius:4px;font-size:11px;background:#12294A;color:#8FB8E6}
.feed .type.verify{background:#2A1E08;color:#FFC24D}
.feed .type.member{background:#0C2B1E;color:#57D69A}
.feed .type.withdraw{background:#2B1220;color:#FF87A0}
.feed .type.user{background:#12294A;color:#8FB8E6}

/* ---------------- 筛选 / 标签页 ---------------- */
.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:0}
.tabs button{position:relative;height:40px;padding:0 18px;background:none;border:0;color:var(--txt2);
  font-size:14px;transition:.16s;display:flex;align-items:center;gap:7px}
.tabs button:hover{color:#fff}
.tabs button.on{color:#63B4FF;font-weight:600}
.tabs button.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--blue);border-radius:2px}
.pill{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--orange);color:#3A2600;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pill.zero{background:#1B3B66;color:var(--txt3)}
.filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filter input,.filter select{height:38px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line2);
  background:#0B1D38;color:var(--txt);outline:none;transition:.16s;min-width:130px}
.filter input{min-width:250px}
.filter input::placeholder{color:var(--txt3)}
.filter input:focus,.filter select:focus{border-color:var(--blue)}
.filter-tip{color:var(--txt3);font-size:12.5px}
.filter-os{margin-left:auto;color:var(--txt2);font-size:13px}
.filter-os b{color:var(--orange);font-size:16px}

/* ---------------- 表格 ---------------- */
.table-wrap{border:1px solid var(--line);border-radius:10px;overflow:auto;background:linear-gradient(180deg,var(--panel),var(--panel2))}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{position:sticky;top:0;background:#0D2140;color:var(--txt2);font-weight:600;text-align:left;
  padding:12px 14px;white-space:nowrap;border-bottom:1px solid var(--line);z-index:1}
tbody td{padding:12px 14px;border-bottom:1px solid #10264A;color:var(--txt);vertical-align:middle}
tbody tr:hover{background:#0E2545}
tbody tr:last-child td{border-bottom:0}
.t-name{font-weight:600}
.t-sub{color:var(--txt3);font-size:12px;margin-top:2px}
.t-act{display:flex;gap:8px;flex-wrap:wrap}
.empty{padding:44px;text-align:center;color:var(--txt3)}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px;color:var(--txt2);font-size:13px}
.pager button{height:32px;min-width:32px;padding:0 10px;border-radius:6px;border:1px solid var(--line2);
  background:#0C1F3C;color:var(--txt2)}
.pager button.on{background:var(--blue);border-color:#4AA2FF;color:#fff;font-weight:600}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* ---------------- 徽标 ---------------- */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:5px;
  font-size:12px;font-weight:600;white-space:nowrap}
.b-ok{background:#0C2B1E;color:#57D69A;border:1px solid #1C5A3C}
.b-wait{background:#2A1E08;color:#FFC24D;border:1px solid #6B4A11}
.b-no{background:#2B1220;color:#FF87A0;border:1px solid #6E2634}
.b-none{background:#12294A;color:#8FB8E6;border:1px solid #1F4B7A}
.b-blue{background:#0E2B4E;color:#63B4FF;border:1px solid #2A5E96}
.b-gold{background:#2C2408;color:#FFD166;border:1px solid #6B5411}

/* ---------------- 套餐 / 达人卡片 ---------------- */
.pkg-grid,.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.pkg-card,.pt-card{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:12px;padding:20px}
.pkg-card.hot{border-color:#4AA2FF;box-shadow:0 0 0 1px rgba(46,139,255,.3),0 12px 30px rgba(20,80,160,.25)}
.pkg-card .hot-tag{position:absolute;right:14px;top:-1px;background:linear-gradient(180deg,#FFC24D,#E79A0B);
  color:#3A2600;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:0 0 7px 7px}
.pkg-card h3,.pt-card h3{margin:0 0 5px;font-size:17px}
.pkg-card .price{font-size:30px;font-weight:800;color:#5FB5FF;margin:10px 0 2px;font-variant-numeric:tabular-nums}
.pkg-card .price small{font-size:14px;color:var(--txt3);font-weight:400;margin-left:4px}
.pkg-card .desc{color:var(--txt2);font-size:12.5px;min-height:38px;margin-bottom:10px}
.pkg-card ul,.pt-card ul{list-style:none;margin:0 0 16px;padding:0;color:var(--txt2);font-size:12.5px}
.pkg-card li,.pt-card li{padding:5px 0;border-top:1px dashed #12294A}
.pkg-card li::before{content:"· ";color:var(--blue);font-weight:700}
.pt-card .pt-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pt-card .ava{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:linear-gradient(135deg,#2E8BFF,#22D3EE);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:#04121F}
.pt-card .code{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--gold);font-size:13.5px;letter-spacing:1px}
.pt-stat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.pt-stat div{background:#0B1D38;border-radius:7px;padding:8px 10px}
.pt-stat p{margin:0;color:var(--txt3);font-size:11.5px}
.pt-stat b{color:#5FB5FF;font-size:16px}
.pt-stat b.gd{color:var(--gold)}

/* ---------------- 抽屉 ---------------- */
.drawer-mask{position:fixed;inset:0;background:rgba(3,10,22,.62);z-index:40;animation:fade .18s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:600px;max-width:94vw;z-index:41;
  background:#0A1A30;border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(0,0,0,.5);
  animation:slide .22s ease-out}
.drawer-in{height:100%;overflow:auto;padding:0 0 40px}
@keyframes slide{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dw-h{position:sticky;top:0;background:#0D2140;border-bottom:1px solid var(--line);padding:16px 22px;
  display:flex;align-items:center;justify-content:space-between;z-index:2}
.dw-h h2{margin:0;font-size:16px}
.dw-h .x{background:none;border:0;color:var(--txt3);font-size:20px;line-height:1}
.dw-h .x:hover{color:#fff}
.dw-sec{padding:18px 22px 4px}
.dw-sec h4{margin:0 0 10px;font-size:13.5px;color:#CFE1FA;padding-left:10px;position:relative}
.dw-sec h4::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--blue)}
.kv{display:grid;grid-template-columns:112px 1fr;gap:0}
.kv dt,.kv dd{margin:0;padding:9px 0;border-bottom:1px dashed #12294A;font-size:13.5px}
.kv dt{color:var(--txt3)}
.kv dd{color:var(--txt)}
.ph-row{display:flex;gap:10px;flex-wrap:wrap}
.ph{width:104px;height:104px;border-radius:8px;border:1px solid var(--line2);overflow:hidden;background:#08182E;
  display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:11.5px;text-align:center;cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.blank{border-style:dashed}

/* ---------------- 弹窗 ---------------- */
.modal-mask{position:fixed;inset:0;background:rgba(3,10,22,.66);z-index:60;display:flex;align-items:center;justify-content:center;animation:fade .16s}
.modal{width:520px;max-width:94vw;max-height:88vh;overflow:auto;background:linear-gradient(180deg,#0F2646,#0A1A30);
  border:1px solid var(--line2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.modal-h{padding:18px 22px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
.modal-b{padding:20px 22px}
.modal-f{padding:0 22px 20px;display:flex;gap:10px;justify-content:flex-end}
.modal-f button{min-width:96px}
.mf{margin-bottom:14px}
.mf label{display:block;color:var(--txt2);font-size:12.5px;margin-bottom:7px}
.mf input,.mf select,.mf textarea{width:100%;height:42px;padding:0 13px;border-radius:var(--r);
  border:1px solid var(--line2);background:#08182E;color:var(--txt);outline:none;transition:.16s}
.mf textarea{height:88px;padding:10px 13px;resize:vertical;line-height:1.6}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,139,255,.14)}
.mf .hint{color:var(--txt3);font-size:11.5px;margin-top:6px}
.mf .err{color:var(--red);font-size:11.5px;margin-top:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line2);background:#0C1F3C;color:var(--txt2)}
.chips button.on{background:var(--blue);border-color:#4AA2FF;color:#fff;font-weight:600}

/* ---------------- Toast ---------------- */
.toasts{position:fixed;left:50%;bottom:46px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{padding:12px 22px;border-radius:10px;background:#0F2A4C;border:1px solid #2A5E96;color:#DCEAFF;
  font-size:14px;box-shadow:0 14px 40px rgba(0,0,0,.45);animation:up .2s}
.toast.ok{border-color:#1C5A3C;background:#0B2A1E;color:#8FF0BF}
.toast.err{border-color:#6E2634;background:#2A1018;color:#FFA3B0}
@keyframes up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

@media (max-width:1180px){
  .screen-grid{grid-template-columns:1fr;height:auto}
  #chinaMap{height:440px}
  .screen-row{grid-template-columns:1fr 1fr}
}