:root {
  --blue: #0c6df0;
  --blue2: #157fff;
  --purple: #4b29d9;
  --dark: #111827;
  --text: #182235;
  --muted: #6b7895;
  --line: #e6edf8;
  --card: rgba(255, 255, 255, .94);
  --bg: #f4f8ff;
  --shadow: 0 22px 50px rgba(36, 83, 145, .12);
  --soft-shadow: 0 10px 26px rgba(33, 78, 145, .11);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
body { background: radial-gradient(circle at top, #fff 0, #f5f9ff 48%, #edf4ff 100%); }

.login-page { display: grid; place-items: center; padding: 24px; min-height: 100vh; }
.login-shell { width: min(100%, 520px); }
.login-card { padding: 42px 34px 34px; border-radius: 28px; background: var(--card); box-shadow: 0 28px 80px rgba(23, 95, 205, .16); border: 1px solid rgba(210, 222, 242, .9); text-align: center; }
.logo-badge { margin: 0 auto 18px; width: 70px; height: 70px; display:grid; place-items:center; border-radius: 22px; background: linear-gradient(135deg, var(--blue2), var(--purple)); color: #fff; font-weight: 900; font-size: 26px; box-shadow: 0 12px 24px rgba(66, 59, 221, .28); }
.login-card h1 { margin: 0; font-size: 30px; }
.login-subtitle { color: #687894; margin: 12px 0 28px; }
.login-form { text-align: left; display: grid; gap: 16px; }
.login-form label span { display: block; font-weight: 800; margin: 0 0 8px; }
.login-form input { width: 100%; height: 56px; border: 1px solid #d4e0f2; border-radius: 16px; padding: 0 18px; outline: none; transition: .18s; background: #fff; }
.login-form input:focus { border-color: var(--blue2); box-shadow: 0 0 0 4px rgba(23,105,255,.10); }
.primary-btn { height: 58px; border: 0; border-radius: 16px; background: linear-gradient(120deg, #1686ff, #5b2be8); color: #fff; font-weight: 900; font-size: 18px; box-shadow: 0 14px 28px rgba(56, 88, 215, .22); }
.error-msg { min-height: 24px; color: #ff3b30; text-align: center; }
.login-tip { margin: 18px 0 0; color: #8a95ad; font-size: 13px; line-height: 1.7; }

.dashboard-page { min-height: 100vh; }
.topbar { height: 58px; padding: 0 24px; display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; background: rgba(255,255,255,.72); border-bottom: 1px solid #e6edf8; backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; }
.icon-close, .icon-more { border: 0; background: transparent; color: #121827; }
.icon-close { font-size: 38px; line-height: 1; }
.icon-more { font-size: 24px; letter-spacing: 2px; }
.title-block { text-align: center; }
.title-block h1 { margin: 0; font-size: 22px; line-height: 1.1; font-weight: 900; }
.title-block span { display: block; color: #7a849a; font-size: 12px; margin-top: 4px; }

.dashboard-shell { width: min(96vw, 1460px); margin: 0 auto; padding: 22px 0 46px; }
.filter-card, .stat-panel, .table-section { background: rgba(255,255,255,.88); border: 1px solid rgba(220,228,241,.9); box-shadow: var(--shadow); border-radius: 24px; }
.filter-card { padding: 18px; }
.filter-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr 1.55fr; gap: 14px; align-items: end; }
.filter-item { display: grid; gap: 8px; min-width: 0; }
.filter-item span { font-weight: 900; color: #172033; font-size: 15px; }
.filter-item input, .filter-item select, .filter-stat select { width: 100%; height: 46px; border: 0; outline: 0; border-radius: 14px; background: #f4f7fd; color: #1d2637; padding: 0 14px; box-shadow: inset 0 0 0 1px #dfe8f6, 0 8px 18px rgba(35,78,135,.06); }
.filter-item input:focus, .filter-item select:focus, .filter-stat select:focus { box-shadow: inset 0 0 0 2px rgba(21,127,255,.5), 0 8px 18px rgba(35,78,135,.08); }
.button-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 18px; }
.gradient-btn { border: 0; min-height: 58px; border-radius: 16px; color: #fff; font-weight: 900; font-size: 17px; background: linear-gradient(120deg, #0d82f4 0%, #2454df 56%, #542bd8 100%); box-shadow: 0 14px 24px rgba(40, 77, 186, .20); display:flex; align-items:center; justify-content:center; gap: 10px; white-space: nowrap; transition: transform .16s, filter .16s; }
.gradient-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.gradient-btn span { font-size: 22px; }
.danger-action { background: linear-gradient(120deg, #2074e9, #4f2bd6); }

.stat-panel { margin-top: 20px; padding: 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.stat-card { min-height: 132px; border-radius: 20px; border: 1px solid #e1e9f7; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: var(--soft-shadow); padding: 18px; display: flex; align-items: center; gap: 14px; min-width: 0; }
.stat-icon { width: 48px; height: 48px; flex: 0 0 auto; display:grid; place-items:center; border-radius: 16px; background: #f0f4fc; font-size: 24px; }
.stat-card p { margin: 0 0 8px; color: #263249; font-weight: 900; font-size: 15px; }
.stat-card strong { display:block; color: #095bd9; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-stat { display: grid; gap: 8px; align-content: center; }
.filter-stat label { font-weight: 900; color: #263249; }
.filter-stat select { height: 36px; padding: 0 12px; }
.filter-stat strong { text-align: center; }

.table-section { margin-top: 24px; overflow: hidden; }
.table-toolbar { padding: 18px 20px; display:flex; justify-content:space-between; align-items:center; gap: 14px; border-bottom: 1px solid #edf2fb; }
.table-toolbar h2 { margin: 0; font-size: 22px; }
.table-toolbar p { margin: 6px 0 0; color: #6c7894; font-size: 13px; }
.outline-btn { border: 1px solid #bfd2ef; background: #fff; color: #095bd9; border-radius: 12px; padding: 10px 16px; font-weight: 900; white-space: nowrap; }
.outline-btn:disabled { opacity: .45; cursor: not-allowed; }
.table-scroll { width: 100%; overflow: auto; }
.data-table { width: 100%; min-width: 1360px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.data-table th { height: 66px; background: linear-gradient(110deg, #075ee0 0%, #155ee5 50%, #512bd6 100%); color: #fff; font-weight: 900; font-size: 15px; text-align: center; padding: 0 10px; border-right: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.data-table th span { font-size: 13px; opacity: .85; }
.data-table th:nth-child(1) { width: 154px; }
.data-table th:nth-child(2) { width: 116px; }
.data-table th:nth-child(3) { width: 190px; }
.data-table th:nth-child(4) { width: 112px; }
.data-table th:nth-child(5) { width: 116px; }
.data-table th:nth-child(6) { width: 108px; }
.data-table th:nth-child(7) { width: 124px; }
.data-table th:nth-child(8) { width: 108px; }
.data-table th:nth-child(9) { width: 108px; }
.data-table th:nth-child(10) { width: 118px; }
.data-table th:nth-child(11) { width: 98px; }
.data-table th:nth-child(12) { width: 116px; }
.data-table th:nth-child(13) { width: 108px; }
.data-table td { height: 58px; border-bottom: 1px solid #e8eef8; text-align: center; padding: 8px 10px; font-size: 14px; color: #1d2637; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table tbody tr:nth-child(even) td { background: #fbfdff; }
.revenue-pill { display:inline-grid; place-items:center; min-width: 92px; height: 34px; padding: 0 10px; border-radius: 9px; font-weight: 900; box-shadow: inset 0 -1px 0 rgba(0,0,0,.05); }
.revenue-zero { color:#fff; background: linear-gradient(180deg, #7c3aed, #5b21b6); }
.revenue-low { color:#263249; background: transparent; box-shadow: none; }
.revenue-mid { color:#fff; background: linear-gradient(180deg, #22c55e, #16a34a); }
.revenue-high { color:#fff; background: linear-gradient(180deg, #ff6b23, #ff4b12); }
.user-id-chip { width: 100%; max-width: 170px; display: inline-block; border: 0; background: transparent; color: #1d2637; padding: 3px 6px; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; cursor: pointer; }
.user-id-chip:hover { background: #edf4ff; color: #0b64da; }

.app-pill, .source-pill, .status-pill, .status-bad { display:inline-flex; align-items:center; justify-content:center; min-width: 74px; height: 28px; padding: 0 10px; border-radius: 999px; font-weight: 900; }
.app-pill { background: #eef4ff; color: #0b64da; }
.app-lite { background: #fff2e6; color: #e66a00; }
.source-pill { background: #f2f5fb; color: #435069; }
.status-pill { background: #eaf9ef; color: #0ca44b; }
.status-bad { background: #fff0f0; color: #de2f35; }
.pager-row { padding: 14px 18px; display:flex; justify-content:space-between; align-items:center; color:#66738e; font-size: 14px; }
.pager-buttons { display:flex; gap: 10px; }
.small { padding: 8px 12px; border-radius: 10px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); padding: 12px 18px; border-radius: 999px; background: rgba(20, 31, 54, .92); color: #fff; opacity: 0; pointer-events: none; transition: .18s; z-index: 20; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1360px) {
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
  .openid-filter { grid-column: span 1; }
  .button-row { grid-template-columns: repeat(3, 1fr); }
  .stat-panel { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  body { background: #f6f9ff; }
  .topbar { height: 56px; padding: 0 12px; grid-template-columns: 42px 1fr 42px; }
  .title-block h1 { font-size: 18px; }
  .title-block span { font-size: 12px; }
  .icon-close { font-size: 34px; }
  .icon-more { font-size: 19px; }
  .dashboard-shell { width: 100%; padding: 12px 12px 28px; }
  .filter-card { padding: 14px; border-radius: 20px; }
  .filter-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .openid-filter { grid-column: span 2; }
  .filter-item span { font-size: 13px; }
  .filter-item input, .filter-item select { height: 46px; border-radius: 13px; font-size: 14px; padding: 0 12px; }
  .button-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gradient-btn { min-height: 58px; border-radius: 16px; font-size: 16px; }
  .stat-panel { margin-top: 16px; padding: 14px; border-radius: 20px; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { min-height: 104px; border-radius: 18px; padding: 14px; gap: 10px; }
  .stat-icon { width: 40px; height: 40px; border-radius: 14px; font-size: 20px; }
  .stat-card p { font-size: 13px; }
  .stat-card strong { font-size: 26px; }
  .table-section { margin-top: 18px; border-radius: 18px; }
  .table-toolbar { padding: 14px; align-items:flex-start; }
  .table-toolbar h2 { font-size: 18px; }
  .table-toolbar p { font-size: 12px; line-height: 1.5; }
  .outline-btn { padding: 8px 12px; }
  .data-table { min-width: 1360px; }
  .data-table th { height: 62px; font-size: 14px; }
  .data-table td { height: 54px; font-size: 13px; }
  .pager-row { padding: 12px 14px; }
  .login-card { padding: 34px 22px 26px; border-radius: 24px; }
  .login-card h1 { font-size: 24px; }
}

@media (max-width: 480px) {
  .filter-grid { grid-template-columns: 1fr; }
  .openid-filter { grid-column: span 1; }
  .button-row { grid-template-columns: 1fr 1fr; }
  .gradient-btn { min-height: 54px; font-size: 15px; }
  .stat-panel { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 96px; padding: 12px; }
  .stat-card strong { font-size: 24px; }
}

/* 异常IP详情面板 */
.abnormal-card { cursor: pointer; position: relative; }
.abnormal-card:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(32,70,130,.13); }
.mini-link { margin-top: 6px; border: 0; background: #edf4ff; color: #095bd9; border-radius: 999px; padding: 5px 10px; font-weight: 900; cursor: pointer; }
.abnormal-panel { margin-top: 18px; padding: 18px; background: rgba(255,255,255,.92); border: 1px solid rgba(220,228,241,.9); box-shadow: var(--shadow); border-radius: 24px; }
.abnormal-panel.hidden { display: none; }
.panel-head { display:flex; justify-content:space-between; gap: 16px; align-items:flex-start; }
.panel-head h2 { margin: 0 0 6px; font-size: 20px; }
.panel-head p { margin:0; color:#6c7894; font-size: 13px; line-height: 1.7; }
.rule-row { display:flex; flex-wrap:wrap; gap: 10px; margin: 14px 0; }
.rule-row span { background:#f1f6ff; color:#0b64da; border:1px solid #d7e6ff; border-radius:999px; padding:7px 12px; font-weight:900; font-size:13px; }
.abnormal-list { display:grid; gap: 10px; }
.abnormal-item { display:grid; grid-template-columns: 1.1fr .75fr .9fr 1fr 2.1fr; gap: 10px; align-items:center; padding: 12px; border:1px solid #e2ebf8; border-radius: 14px; background:#fbfdff; color:#1d2637; }
.abnormal-item strong { color:#5b21b6; }
.abnormal-item em { font-style:normal; color:#de2f35; font-weight:900; }
.empty-abnormal { padding: 18px; text-align:center; color:#8a94a8; border:1px dashed #d4e0f2; border-radius:14px; }
@media (max-width: 820px) {
  .abnormal-item { grid-template-columns: 1fr 1fr; }
  .abnormal-item em { grid-column: 1 / -1; }
}


/* 本版新增：收益排序按钮 */
.revenue-sort-btn {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  line-height: 1.35;
}
.revenue-sort-btn span { display:block; font-size: 12px; opacity: .88; margin-top: 3px; }
.revenue-sort-btn.active span { opacity: 1; color: #fff6b5; }

/* 本版新增：分配游戏总收益面板 */
.summary-panel { margin-top: 18px; padding: 18px; background: rgba(255,255,255,.94); border: 1px solid rgba(220,228,241,.9); box-shadow: var(--shadow); border-radius: 24px; }
.summary-panel.hidden { display:none; }
.summary-total-row { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.summary-total-row div { border:1px solid #e2ebf8; background: linear-gradient(180deg, #fff, #fbfdff); border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 22px rgba(32,70,130,.07); }
.summary-total-row span { display:block; color:#66738e; font-weight:900; font-size:13px; margin-bottom:6px; }
.summary-total-row strong { color:#095bd9; font-size:24px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.summary-table-wrap { width:100%; overflow:auto; border:1px solid #e4edf9; border-radius:16px; }
.summary-table { width:100%; min-width:760px; border-collapse:collapse; table-layout:fixed; }
.summary-table th { background: linear-gradient(110deg, #075ee0 0%, #155ee5 50%, #512bd6 100%); color:#fff; height:48px; padding: 0 12px; font-weight:900; }
.summary-table td { height:54px; padding:8px 12px; text-align:center; border-bottom:1px solid #e8eef8; background:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.summary-table tbody tr:nth-child(even) td { background:#fbfdff; }

/* 空字段：抓不到就保留空白，不显示未知/默认标签 */
.data-table td:empty::after { content: ''; }

@media (max-width: 1500px) {
  .button-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .summary-total-row { grid-template-columns: repeat(2, 1fr); }
  .button-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .summary-total-row { grid-template-columns: 1fr 1fr; }
}

/* 总后台 / 客户后台增强版 */
.hidden { display: none !important; }
.permission-disabled { opacity: .58; cursor: not-allowed; }
.button-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.admin-panel { margin-top: 18px; padding: 18px; background: rgba(255,255,255,.94); border: 1px solid rgba(220,228,241,.9); box-shadow: var(--shadow); border-radius: 24px; }
.admin-layout { display: grid; grid-template-columns: 1.35fr .85fr; gap: 16px; margin-top: 16px; }
.admin-card { background: linear-gradient(180deg, #fff, #fbfdff); border: 1px solid #e2ebf8; border-radius: 18px; padding: 16px; box-shadow: 0 12px 28px rgba(32,70,130,.08); }
.admin-card h3 { margin: 0 0 14px; font-size: 18px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.admin-form-grid label, .admin-card label { display: grid; gap: 7px; min-width: 0; }
.admin-form-grid span { font-weight: 900; color: #263249; }
.admin-form-grid input, .admin-form-grid select, .add-game-row input { width: 100%; height: 44px; border: 0; outline: 0; border-radius: 12px; background: #f4f7fd; color: #1d2637; padding: 0 12px; box-shadow: inset 0 0 0 1px #dfe8f6; }
.admin-subtitle { margin: 16px 0 10px; font-weight: 900; color: #172033; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.check-grid label { display:flex; align-items:center; gap: 8px; padding: 10px 12px; border: 1px solid #e1e9f7; border-radius: 12px; background:#fbfdff; font-weight: 800; color:#263249; }
.check-grid input { width: 16px; height:16px; }
.permission-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.admin-form-actions { margin-top: 16px; display:flex; gap: 12px; align-items:center; }
.admin-save { min-height: 46px; padding: 0 18px; }
.add-game-row { display:flex; gap:10px; }
.add-game-row input { flex:1; }
.game-list { display:grid; gap: 9px; margin-top: 12px; max-height: 320px; overflow:auto; }
.game-list-item { display:grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items:center; padding: 10px 12px; border:1px solid #e2ebf8; border-radius:12px; background:#fff; }
.game-list-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-list-item span { color:#66738e; font-size:13px; }
.game-list-item em { font-style: normal; color:#8a94a8; font-size:13px; }
.muted-note { margin: 12px 0 0; color:#6c7894; font-size:13px; line-height:1.6; }
.account-list-card { margin-top: 16px; }
.admin-list-head { display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; }
.admin-list-head h3 { margin:0; }
.admin-list-head p { margin: 4px 0 0; color:#6c7894; font-size:13px; }
.admin-table-wrap { width:100%; overflow:auto; border:1px solid #e4edf9; border-radius:16px; margin-top: 12px; }
.admin-table { width:100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
.admin-table th { background: linear-gradient(110deg, #075ee0 0%, #155ee5 50%, #512bd6 100%); color:#fff; height:46px; padding:0 10px; font-weight:900; text-align:center; }
.admin-table td { height:56px; padding:8px 10px; text-align:center; border-bottom:1px solid #e8eef8; background:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-table tbody tr:nth-child(even) td { background:#fbfdff; }
.admin-table td:last-child { display:flex; justify-content:center; gap:8px; align-items:center; }
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-actions { flex-direction: column; align-items: stretch; }
  .add-game-row { flex-direction: column; }
}

/* v2：客户后台只保留客户可用入口；总后台游戏库支持 AppID/AppKey/上报密钥 */
.partner-mode .admin-only { display: none !important; }
.game-meta-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.game-meta-form label { display: grid; gap: 7px; }
.game-meta-form label span { font-weight: 900; color: #263249; }
.game-meta-form input { width: 100%; height: 44px; border: 0; outline: 0; border-radius: 12px; background: #f4f7fd; color: #1d2637; padding: 0 12px; box-shadow: inset 0 0 0 1px #dfe8f6; }
.game-meta-form .game-remark { grid-column: 1 / -1; }
.game-meta-form #addGameBtn { min-height: 44px; }
.check-grid label span { display: grid; gap: 2px; min-width: 0; }
.check-grid label small { display: block; font-size: 11px; color: #66738e; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-meta-item { grid-template-columns: minmax(220px, 1fr) auto auto auto; }
.game-main { display: grid; gap: 3px; min-width: 0; }
.game-main strong, .game-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-main small { color: #66738e; font-size: 12px; }
@media (max-width: 820px) {
  .game-meta-form { grid-template-columns: 1fr; }
  .game-meta-form .game-remark { grid-column: auto; }
  .game-meta-item { grid-template-columns: 1fr; align-items: stretch; }
}

/* =========================================================
   V3 科技感安全登录页
   ========================================================= */
.tech-login-page {
  --tech-bg: #050915;
  --tech-panel: rgba(8, 17, 39, .76);
  --tech-line: rgba(91, 147, 255, .24);
  --tech-cyan: #39ddff;
  --tech-blue: #287cff;
  --tech-purple: #7654ff;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  color: #eef5ff;
  background:
    radial-gradient(circle at 10% 12%, rgba(42, 104, 255, .18), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(111, 65, 255, .16), transparent 28%),
    linear-gradient(145deg, #030611 0%, #081126 52%, #050815 100%);
}
.tech-login-page::selection { background: rgba(57, 221, 255, .28); color: #fff; }
.tech-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tech-grid {
  position: absolute; inset: -25%; opacity: .36;
  background-image:
    linear-gradient(rgba(69, 132, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 132, 255, .13) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(700px) rotateX(62deg) translateY(28%);
  transform-origin: center bottom;
  mask-image: linear-gradient(to bottom, transparent 4%, #000 48%, transparent 96%);
  animation: gridDrift 16s linear infinite;
}
.tech-orb { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .7; }
.tech-orb-a { width: 380px; height: 380px; left: -150px; top: 12%; background: radial-gradient(circle, rgba(21,126,255,.32), transparent 70%); animation: orbFloat 11s ease-in-out infinite; }
.tech-orb-b { width: 460px; height: 460px; right: -190px; top: 4%; background: radial-gradient(circle, rgba(112,71,255,.27), transparent 70%); animation: orbFloat 13s ease-in-out infinite reverse; }
.tech-orb-c { width: 330px; height: 330px; left: 42%; bottom: -220px; background: radial-gradient(circle, rgba(31,223,255,.18), transparent 70%); animation: orbFloat 15s ease-in-out infinite; }
.tech-scanline { position:absolute; left:0; right:0; height:1px; top:-5%; background: linear-gradient(90deg, transparent, rgba(62,218,255,.6), transparent); box-shadow: 0 0 24px rgba(62,218,255,.45); animation: scanLine 9s linear infinite; opacity:.5; }
.tech-stars i { position:absolute; width:3px; height:3px; border-radius:50%; background:#8feaff; box-shadow:0 0 12px #54cfff; animation: starPulse 3s ease-in-out infinite; }
.tech-stars i:nth-child(1){left:8%;top:18%;}.tech-stars i:nth-child(2){left:18%;top:72%;animation-delay:.8s}.tech-stars i:nth-child(3){left:31%;top:12%;animation-delay:1.4s}.tech-stars i:nth-child(4){left:45%;top:82%;animation-delay:2s}.tech-stars i:nth-child(5){left:55%;top:22%;animation-delay:.4s}.tech-stars i:nth-child(6){left:68%;top:68%;animation-delay:1.1s}.tech-stars i:nth-child(7){left:79%;top:14%;animation-delay:1.7s}.tech-stars i:nth-child(8){left:90%;top:58%;animation-delay:2.4s}.tech-stars i:nth-child(9){left:72%;top:40%;animation-delay:.6s}.tech-stars i:nth-child(10){left:25%;top:45%;animation-delay:2.1s}

.tech-login-shell {
  position: relative; z-index: 2;
  width: min(1180px, calc(100% - 40px));
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: center;
  padding: 48px 0 66px;
}
.tech-brand-panel { padding: clamp(10px, 3vw, 38px); min-width: 0; }
.brand-kicker { display:flex; align-items:center; gap:10px; color:#78bfff; font-size:12px; font-weight:800; letter-spacing:.2em; }
.brand-kicker span { width:38px; height:1px; background:linear-gradient(90deg,#42dcff,transparent); box-shadow:0 0 10px #42dcff; }
.brand-logo-wrap { position:relative; width:112px; height:112px; margin:38px 0 28px; display:grid; place-items:center; }
.brand-logo-core { position:relative; z-index:3; width:68px; height:68px; border-radius:22px; display:grid; place-items:center; color:#fff; font-size:34px; font-weight:1000; background:linear-gradient(145deg,#16a8ff,#4b53ff 55%,#7b43ff); box-shadow:0 0 30px rgba(47,139,255,.55), inset 0 1px 1px rgba(255,255,255,.5); }
.brand-logo-ring { position:absolute; inset:0; border:1px solid rgba(73,194,255,.34); border-radius:34px; transform:rotate(45deg); }
.brand-logo-ring::before,.brand-logo-ring::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#4de4ff; box-shadow:0 0 14px #4de4ff; }
.brand-logo-ring::before{left:-4px;top:50%;}.brand-logo-ring::after{right:-4px;top:30%;}
.ring-one { animation:ringSpin 12s linear infinite; }
.ring-two { inset:12px; opacity:.7; animation:ringSpin 8s linear infinite reverse; }
.tech-brand-panel h1 { margin:0; max-width:700px; font-size:clamp(38px,5vw,66px); line-height:1.08; letter-spacing:-.04em; color:#fff; text-shadow:0 8px 32px rgba(25,110,255,.25); }
.tech-brand-panel > p { max-width:690px; margin:24px 0 30px; color:#94a9cb; font-size:clamp(15px,1.4vw,18px); line-height:1.9; }
.brand-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:720px; }
.brand-features div { border:1px solid rgba(82,145,255,.18); background:linear-gradient(145deg,rgba(17,36,75,.46),rgba(8,18,42,.38)); border-radius:14px; padding:14px 15px; backdrop-filter:blur(10px); }
.brand-features b { display:block; color:#3adfff; font-size:12px; margin-bottom:7px; letter-spacing:.12em; }
.brand-features span { color:#d8e6ff; font-size:14px; font-weight:700; white-space:nowrap; }
.brand-line { width:min(520px,85%); height:1px; margin-top:34px; background:linear-gradient(90deg,rgba(47,151,255,.7),rgba(109,73,255,.35),transparent); position:relative; }
.brand-line span { position:absolute; width:84px; height:1px; left:0; background:#64e8ff; box-shadow:0 0 12px #46dfff; animation:lineTravel 4s ease-in-out infinite; }

.tech-login-card {
  position:relative; overflow:hidden;
  padding:34px 34px 26px;
  border-radius:26px;
  border:1px solid rgba(103,161,255,.25);
  background:linear-gradient(155deg,rgba(14,28,58,.89),rgba(6,13,31,.88));
  box-shadow:0 34px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(94,153,255,.06) inset;
  backdrop-filter:blur(22px);
}
.tech-login-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(79,210,255,.65),transparent 28%,transparent 68%,rgba(116,77,255,.55)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.card-glow { position:absolute; width:240px; height:240px; right:-130px; top:-140px; border-radius:50%; background:radial-gradient(circle,rgba(87,75,255,.3),transparent 70%); }
.login-card-head { position:relative; display:flex; align-items:center; gap:15px; }
.login-mini-logo { width:52px; height:52px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center; color:#fff; font-weight:950; background:linear-gradient(135deg,#168dff,#6337f4); box-shadow:0 10px 30px rgba(52,95,255,.35); }
.login-eyebrow { margin:0 0 5px; color:#49d9ff; font-size:11px; letter-spacing:.18em; font-weight:850; }
.login-card-head h2 { margin:0; font-size:26px; color:#fff; }
.login-welcome { position:relative; margin:24px 0 23px; color:#8298bb; font-size:14px; line-height:1.75; }
.tech-login-form { position:relative; display:grid; gap:16px; }
.tech-field { display:grid; gap:8px; }
.field-label { color:#b9c9e4; font-size:13px; font-weight:800; }
.field-control { height:56px; display:flex; align-items:center; gap:12px; padding:0 15px; border-radius:14px; border:1px solid rgba(102,153,238,.22); background:rgba(3,10,25,.64); transition:border-color .2s,box-shadow .2s,transform .2s; }
.field-control:focus-within { border-color:rgba(68,211,255,.72); box-shadow:0 0 0 3px rgba(47,177,255,.10),0 0 26px rgba(50,120,255,.12); transform:translateY(-1px); }
.field-control > svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:#6ea7ff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.field-control input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#f7fbff; font-size:16px; letter-spacing:.02em; }
.field-control input::placeholder { color:#536785; }
.field-control input:-webkit-autofill { -webkit-text-fill-color:#f7fbff; transition:background-color 9999s ease-out; }
.password-toggle { width:34px; height:34px; border:0; border-radius:9px; display:grid; place-items:center; background:transparent; color:#6985aa; }
.password-toggle:hover { background:rgba(70,128,221,.12); color:#8edfff; }
.password-toggle svg { grid-area:1/1; width:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.password-toggle .eye-close,.password-toggle.showing .eye-open{display:none}.password-toggle.showing .eye-close{display:block}
.login-hints { min-height:18px; display:flex; justify-content:space-between; gap:10px; color:#63799a; font-size:12px; }
.caps-hint { color:#ffbf67; }
.safe-hint::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#35d99a; box-shadow:0 0 8px #35d99a; vertical-align:1px; }
.tech-login-btn { position:relative; overflow:hidden; height:58px; border:0; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-size:17px; font-weight:900; background:linear-gradient(105deg,#128dff 0%,#3157ff 48%,#7442f5 100%); box-shadow:0 14px 34px rgba(44,83,255,.34); transition:transform .18s,filter .18s,box-shadow .18s; }
.tech-login-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 18px 42px rgba(44,83,255,.42)}
.tech-login-btn:active:not(:disabled){transform:translateY(0)}
.tech-login-btn:disabled{cursor:wait;opacity:.82}
.tech-login-btn > svg { width:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.tech-login-btn:hover > svg{transform:translateX(3px)}
.btn-shine { position:absolute; top:-120%; left:-35%; width:28%; height:340%; transform:rotate(24deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:btnShine 4.2s ease-in-out infinite; }
.btn-loading { display:none; align-items:center; gap:9px; }
.btn-loading i { width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite; }
.tech-login-btn.loading .btn-text,.tech-login-btn.loading > svg{display:none}.tech-login-btn.loading .btn-loading{display:flex}
.tech-login-btn.success { background:linear-gradient(105deg,#10b981,#20c997); }
.tech-error { min-height:20px; margin-top:-2px; color:#ff7787; font-size:13px; text-align:center; opacity:0; transform:translateY(-3px); transition:.18s; }
.tech-error.show { opacity:1; transform:none; }
.login-card-footer { position:relative; margin-top:17px; padding-top:17px; border-top:1px solid rgba(104,145,210,.14); display:flex; justify-content:space-between; align-items:center; gap:12px; color:#5e7496; font-size:12px; }
.system-status { display:flex; align-items:center; gap:8px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#f5b942; box-shadow:0 0 10px currentColor; }
.status-dot.online{background:#37d89a}.status-dot.offline{background:#ff5d6c}.status-dot.checking{animation:starPulse 1.3s ease-in-out infinite}
.tech-page-footer { position:fixed; z-index:2; left:0; right:0; bottom:18px; text-align:center; color:#405371; font-size:11px; letter-spacing:.05em; pointer-events:none; }

@keyframes gridDrift{to{transform:perspective(700px) rotateX(62deg) translateY(28%) translateX(62px)}}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(22px,-22px,0)}}
@keyframes scanLine{0%{top:-4%}100%{top:104%}}
@keyframes starPulse{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.35)}}
@keyframes ringSpin{to{transform:rotate(405deg)}}
@keyframes lineTravel{0%,100%{left:0;opacity:.5}50%{left:calc(100% - 84px);opacity:1}}
@keyframes btnShine{0%,72%{left:-35%;opacity:0}78%{opacity:1}100%{left:125%;opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width: 940px) {
  .tech-login-shell { width:min(680px,calc(100% - 32px)); grid-template-columns:1fr; gap:22px; padding-top:34px; padding-bottom:72px; }
  .tech-brand-panel { text-align:center; padding:8px 12px; }
  .brand-kicker,.brand-logo-wrap{justify-content:center;margin-left:auto;margin-right:auto}.brand-kicker span{display:none}
  .tech-brand-panel h1{font-size:clamp(32px,8vw,48px)}
  .tech-brand-panel > p{margin-left:auto;margin-right:auto}.brand-features{margin:0 auto}.brand-line{margin-left:auto;margin-right:auto}
}
@media (max-width: 560px) {
  .tech-login-shell { width:calc(100% - 24px); padding-top:24px; }
  .tech-brand-panel { padding:0 4px; }
  .brand-kicker { font-size:10px; }
  .brand-logo-wrap { width:82px; height:82px; margin:22px auto 18px; }
  .brand-logo-core { width:54px; height:54px; border-radius:17px; font-size:27px; }
  .tech-brand-panel h1 { font-size:31px; }
  .tech-brand-panel > p { margin:15px auto 18px; font-size:13px; line-height:1.7; }
  .brand-features { grid-template-columns:1fr; gap:8px; }
  .brand-features div { display:flex; align-items:center; gap:12px; padding:10px 13px; text-align:left; }
  .brand-features b { margin:0; }
  .brand-line { display:none; }
  .tech-login-card { padding:25px 20px 21px; border-radius:22px; }
  .login-card-head h2 { font-size:22px; }
  .login-welcome { margin:19px 0; font-size:13px; }
  .field-control { height:53px; }
  .tech-page-footer { position:relative; bottom:auto; padding:0 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-grid,.tech-orb,.tech-scanline,.tech-stars i,.brand-logo-ring,.brand-line span,.btn-shine,.status-dot{animation:none!important}
  *{scroll-behavior:auto!important}
}
.safe-hint.insecure { color:#ffb25f; }
.safe-hint.insecure::before { background:#ff9f43; box-shadow:0 0 8px #ff9f43; }