/* ==========================================================================
   视觉基座：完整复刻「四方用户端」内联样式（inline_styles.css）
   仅把不可用的外部图标字体替换为内联 SVG（零外部依赖：无任何外链 CSS/JS/字体）。
   ========================================================================== */

:root {
    --app-sidebar: 272px;
    --app-header: 76px;
    --app-tabs: 48px;
    --app-bg: #07111f;
    --app-bg-soft: #0b1727;
    --app-panel: rgba(14, 29, 48, .94);
    --app-panel-soft: rgba(17, 37, 60, .78);
    --app-border: rgba(148, 188, 226, .14);
    --app-text: #edf7ff;
    --app-muted: #86a0b8;
    --app-primary: #39a7ff;
    --app-primary-2: #6e5cff;
    --app-success: #2ad6a0;
    --app-danger: #ff647c;
    --app-radius: 16px;
    --app-shadow: 0 18px 45px rgba(0, 0, 0, .28);
    --app-warn: #ffd36a;
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    color: var(--app-text);
    font-family: "Microsoft JhengHei", "PingFang TC", "Microsoft YaHei", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 88% 0%, rgba(57, 167, 255, .10), transparent 28rem),
        var(--app-bg);
}

a { transition: color .18s ease, background .18s ease, transform .18s ease; }

svg { display: block; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9;
       stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 布局骨架 ---------- */

.main-layout {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

.main-layout-side {
    position: fixed !important;
    z-index: 1002 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--app-sidebar) !important;
    height: 100vh !important;
    overflow: hidden;
    border-right: 1px solid var(--app-border);
    background:
        radial-gradient(circle at 0 0, rgba(57, 167, 255, .15), transparent 20rem),
        linear-gradient(180deg, #0d1c2f 0%, #091522 100%) !important;
    box-shadow: 14px 0 40px rgba(0, 0, 0, .20);
    transition: width .25s ease, transform .25s ease !important;
}

.sidebar-brand {
    display: flex;
    height: var(--app-header);
    padding: 0 22px;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--app-border);
}

.sidebar-brand-mark {
    position: relative;
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px;
    background: linear-gradient(145deg, var(--app-primary), var(--app-primary-2));
    box-shadow: 0 8px 24px rgba(57, 167, 255, .24);
    place-items: center;
}

.sidebar-brand-text {
    position: relative;
    z-index: 2;
    line-height: 1;
    letter-spacing: -1px;
}

.sidebar-brand-mark::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 28px;
    height: 8px;
    right: -8px;
    bottom: 5px;
    opacity: .7;
    border-radius: 999px;
    background: #78e7ff;
    transform: rotate(-45deg);
}

.sidebar-brand-copy {
    min-width: 0;
    line-height: 1.2;
}

.sidebar-brand-copy strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand-copy small {
    display: block;
    margin-top: 6px;
    color: #6f8ba5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* ---------- 侧栏导航（等价于 layui-nav-tree） ---------- */

.layui-nav,
.layui-nav-tree {
    width: 100% !important;
    height: calc(100vh - var(--app-header));
    margin: 0;
    padding: 15px 12px 32px !important;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    border-radius: 0;
    background: transparent !important;
    scrollbar-color: rgba(126, 163, 195, .25) transparent;
    scrollbar-width: thin;
}

.layui-nav-tree::-webkit-scrollbar { width: 5px; }
.layui-nav-tree::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(126, 163, 195, .25);
}

.layui-nav-tree hr { display: none; border: 0; }

.layui-nav-tree .hidden-folded {
    height: auto;
    min-height: 0;
    padding: 15px 12px 8px !important;
    margin: 0 !important;
    line-height: 1.2;
    list-style: none;
}

.layui-nav-tree .hidden-folded span {
    color: #607d96 !important;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.layui-nav-item {
    margin: 3px 0;
    list-style: none;
    border-radius: 12px;
}

.layui-nav-item > a {
    display: flex;
    min-height: 44px;
    padding: 0 13px !important;
    color: #a8bfd3 !important;
    font-size: 14px;
    font-weight: 650;
    line-height: 44px !important;
    border-radius: 11px;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

.layui-nav-item > a:hover,
.layui-nav-itemed > a,
.layui-nav-item.layui-this > a {
    color: #fff !important;
    background: rgba(57, 167, 255, .10) !important;
}

.layui-nav-item.layui-this > a {
    box-shadow: inset 3px 0 0 var(--app-primary);
}

.layui-nav-item > a > i {
    display: flex;
    width: 24px;
    color: #55b6ff;
    font-size: 15px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.layui-nav-item > a > i .ico { width: 16px; height: 16px; }
.layui-nav-item > a > span { flex: 1; min-width: 0; overflow: hidden;
                             text-overflow: ellipsis; white-space: nowrap; }

.layui-nav-more {
    display: flex;
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: #58738d;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, color .2s ease;
}

.layui-nav-more .ico { width: 12px; height: 12px; stroke-width: 2.4; }

.layui-nav-itemed > a .layui-nav-more {
    color: #8ccfff;
    transform: rotate(90deg);
}

.layui-nav-child {
    display: none;
    padding: 5px 0 7px 22px !important;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    list-style: none;
}

.layui-nav-itemed > .layui-nav-child { display: block; }

.layui-nav-child dd,
.layui-nav-child li { margin: 2px 0; list-style: none; }

.layui-nav-child a {
    display: block;
    min-height: 36px;
    padding: 0 12px !important;
    color: #7895ae !important;
    font-size: 13px;
    line-height: 36px !important;
    border-radius: 9px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layui-nav-child a:hover,
.layui-nav-child .layui-this a {
    color: #dff3ff !important;
    background: rgba(255, 255, 255, .045) !important;
}

.layui-nav-child .layui-this a { color: #fff !important; }

/* ---------- 容器 / 顶栏 ---------- */

.main-layout-container {
    position: relative !important;
    left: 0 !important;
    width: auto !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 0 0 var(--app-sidebar) !important;
    background: transparent !important;
    transition: margin-left .25s ease !important;
}

.main-layout-header {
    position: absolute !important;
    z-index: 1000;
    top: 0 !important;
    right: 0;
    left: 0 !important;
    display: flex !important;
    width: auto !important;
    height: var(--app-header) !important;
    padding: 0 18px !important;
    gap: 14px;
    color: #eaf4ff;
    border-bottom: 1px solid rgba(129, 183, 233, 0.13);
    background: rgba(7, 17, 31, 0.94) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-sizing: border-box;
    align-items: center;
}

.menu-btn {
    position: static !important;
    display: flex;
    float: none !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border: 0;
    background: transparent !important;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle-button {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    overflow: hidden;
    color: #94a3b8 !important;
    text-decoration: none !important;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(30, 50, 76, 0.82), rgba(13, 29, 49, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
                box-shadow 0.2s ease, transform 0.15s ease;
}

.sidebar-toggle-button::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 0, rgba(70, 168, 255, 0.25), transparent 72%);
    transition: opacity 0.2s ease;
}

.sidebar-toggle-button:hover {
    color: #ffffff !important;
    border-color: rgba(70, 168, 255, 0.45);
    background: linear-gradient(145deg, rgba(32, 67, 103, 0.96), rgba(14, 35, 60, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(14, 93, 170, 0.24);
    transform: translateY(-1px);
}

.sidebar-toggle-button:hover::before { opacity: 1; }
.sidebar-toggle-button:active { transform: scale(0.94); }
.sidebar-toggle-button:focus-visible { outline: 2px solid rgba(96, 165, 250, 0.85); outline-offset: 3px; }

.sidebar-toggle-icon { position: relative; z-index: 1; width: 23px; height: 23px; }

.sidebar-icon-frame,
.sidebar-icon-divider,
.sidebar-icon-arrow {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-icon-frame { stroke-width: 1.5; opacity: 0.72; }
.sidebar-icon-divider { stroke: #60a5fa; stroke-width: 1.6; }
.sidebar-icon-arrow { fill: none; stroke: currentColor; stroke-width: 1.9; transition: stroke 0.2s ease; }

.modern-menu-btn.is-collapsed .sidebar-toggle-button {
    color: #7dd3fc !important;
    border-color: rgba(70, 168, 255, 0.34);
    background: linear-gradient(145deg, rgba(30, 73, 112, 0.88), rgba(14, 35, 60, 0.98));
}

.modern-topbar-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: #91a9c1;
    font-size: 13px;
}

.modern-topbar-copy::before {
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    content: "";
    border-radius: 50%;
    background: #20d4a2;
    box-shadow: 0 0 0 5px rgba(32, 212, 162, 0.1);
}

.modern-topbar-copy strong {
    overflow: hidden;
    color: #f4f8ff;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-topbar-actions {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.balance-chip {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: max-content;
    height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 14px;
    color: #a9bed3;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 13px;
    background: rgba(30, 55, 82, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    font-size: 13px;
    white-space: nowrap;
}

.balance-chip > i { display: flex; color: #60a5fa; font-size: 13px; }
.balance-chip > i .ico { width: 13px; height: 13px; }

.balance-chip > strong {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
}

.balance-chip #lbl_MyBalance {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto;
    min-width: 1ch;
    color: #7dd3fc !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.balance-refresh {
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    color: #7f98b3 !important;
    text-decoration: none !important;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.balance-refresh .ico { width: 13px; height: 13px; }
.balance-refresh:hover { color: #7dd3fc !important; background: rgba(96, 165, 250, 0.13); transform: rotate(25deg); }
.balance-refresh.is-loading { color: #60a5fa !important; pointer-events: none; }
.balance-refresh.is-loading .ico { animation: balance-refresh-spin 0.7s linear infinite; }

@keyframes balance-refresh-spin { to { transform: rotate(360deg); } }

.user-chip {
    display: inline-flex;
    height: 40px;
    align-items: center;
    gap: 9px;
    padding: 0 13px 0 6px;
    color: #dcecff;
    border: 1px solid rgba(148, 180, 224, 0.14);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.user-chip-avatar {
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 9px;
    background: linear-gradient(135deg, #46a8ff, #625cff);
    box-shadow: 0 7px 16px rgba(70, 168, 255, 0.2);
    font-size: 12px;
}

.user-chip-avatar .ico { width: 14px; height: 14px; }

.modern-logout-form { display: flex; margin: 0; padding: 0; }

.modern-logout {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #a8b9ca;
    cursor: pointer;
    border: 1px solid rgba(255, 117, 139, 0.16);
    border-radius: 13px;
    outline: none;
    background: rgba(255, 117, 139, 0.055);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
                box-shadow 0.2s ease, transform 0.15s ease;
}

.modern-logout .ico { width: 15px; height: 15px; }
.modern-logout:hover {
    color: #ff9aaa;
    border-color: rgba(255, 117, 139, 0.38);
    background: rgba(255, 117, 139, 0.12);
    box-shadow: 0 8px 20px rgba(255, 80, 110, 0.12);
    transform: translateY(-1px);
}
.modern-logout:active { transform: scale(0.94); }

/* ---------- 主体 / 标签页 ---------- */

.main-layout-body {
    position: absolute !important;
    top: var(--app-header) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 100% 0, rgba(110, 92, 255, .08), transparent 30rem),
        #081322 !important;
}

.layui-tab {
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.layui-tab > .layui-tab-title {
    display: flex;
    height: var(--app-tabs) !important;
    padding: 7px 16px 0 !important;
    margin: 0;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    background: rgba(10, 23, 39, .94) !important;
    align-items: flex-end;
    gap: 6px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.layui-tab > .layui-tab-title::-webkit-scrollbar { height: 0; }

.layui-tab > .layui-tab-title li {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    height: 34px !important;
    padding: 0 15px !important;
    color: #7792aa;
    font-size: 13px;
    font-weight: 700;
    line-height: 34px !important;
    border: 0 !important;
    border-radius: 10px 10px 0 0;
    background: transparent;
    cursor: pointer;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.layui-tab > .layui-tab-title li:hover { color: #dceeff; background: rgba(255, 255, 255, .035); }

.layui-tab > .layui-tab-title .layui-this {
    color: #fff !important;
    background: rgba(57, 167, 255, .10) !important;
}

.layui-tab > .layui-tab-title .layui-this::after {
    content: "";
    position: absolute;
    top: auto;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-primary-2));
}

.layui-tab > .layui-tab-content {
    height: calc(100% - var(--app-tabs)) !important;
    min-height: 0;
    padding: 0 !important;
    margin: 0;
    background: #081322 !important;
    list-style: none;
}

.layui-tab-item { display: none; height: 100% !important; background: #081322 !important; }
.layui-tab-item.layui-show { display: block; }

.main-mask {
    position: fixed !important;
    z-index: 1001 !important;
    inset: 0 !important;
    display: none;
    background: rgba(1, 8, 16, .68) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ---------- 侧栏收起 ---------- */

.modern-nav-collapsed .main-layout-side { width: 78px !important; }
.modern-nav-collapsed .main-layout-container { margin-left: 78px !important; }
.modern-nav-collapsed .sidebar-brand { padding: 0 18px; }

.modern-nav-collapsed .sidebar-brand-copy,
.modern-nav-collapsed .hidden-folded,
.modern-nav-collapsed .layui-nav-more,
.modern-nav-collapsed .layui-nav-child { display: none !important; }

.modern-nav-collapsed .layui-nav-item > a {
    overflow: hidden;
    padding: 0 13px !important;
    font-size: 0;
    white-space: nowrap;
    justify-content: center;
}

.modern-nav-collapsed .layui-nav-item > a > i { width: 24px; margin: 0; font-size: 17px; }
.modern-nav-collapsed .layui-nav-item > a > i .ico { width: 17px; height: 17px; }
.modern-nav-collapsed .layui-nav-item > a > span { display: none; }
.modern-nav-collapsed .sidebar-brand-mark { flex: 0 0 42px; }

@media (max-width: 860px) {
    .main-layout-side {
        width: min(86vw, var(--app-sidebar)) !important;
        transform: translateX(-102%);
    }
    .main-layout-container,
    .modern-nav-collapsed .main-layout-container { margin-left: 0 !important; }
    .modern-mobile-open .main-layout-side { transform: translateX(0); }
    .modern-mobile-open .main-mask { display: block !important; }
    .main-layout-header { padding: 0 14px !important; }
    .modern-topbar-copy small { display: none; }
    .modern-topbar-copy strong { font-size: 14px; }
    .balance-chip > span { display: none; }
    .balance-chip { padding: 0 9px; }
    .user-chip { display: none; }
}

@media (max-width: 600px) {
    .main-layout-header .sidebar-toggle-button,
    .modern-logout,
    .user-chip { width: 38px; height: 38px; border-radius: 11px; }
    .sidebar-toggle-icon { width: 21px; height: 21px; }
    .balance-chip { flex: 0 0 auto; min-width: max-content; height: 38px; padding: 0 6px 0 9px; gap: 5px; }
    .balance-chip > span { display: none; }
    .balance-chip > strong,
    .balance-chip #lbl_MyBalance { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
    .balance-refresh { width: 27px; height: 27px; }
}

@media (max-width: 520px) {
    :root { --app-header: 66px; --app-tabs: 44px; }
    .main-layout-header { gap: 0; }
    .menu-btn { width: 38px !important; height: 38px !important; }
    .modern-topbar-actions { gap: 7px; }
    .balance-chip { height: 38px; font-size: 12px; }
    .modern-logout { width: 38px; height: 38px; }
    .layui-tab > .layui-tab-title { padding-left: 10px !important; }
}

@media (max-width: 430px) {
    .main-layout-header { gap: 6px; padding: 0 8px !important; }
    .modern-topbar-actions { gap: 6px; }
    .user-chip { display: none; }
    .balance-chip { font-size: 12px; }
    .balance-chip > i { display: none; }
}

@media (max-width: 360px) {
    .main-layout-header .sidebar-toggle-button,
    .modern-logout { width: 36px; height: 36px; }
    .balance-chip { height: 36px; padding: 0 5px 0 8px; gap: 4px; }
    .balance-refresh { width: 25px; height: 25px; }
}

/* ==========================================================================
   内容区（四方内部 iframe 页面被替换为本机原生页面，配色/圆角/阴影保持一致）
   ========================================================================== */

.view {
    height: 100%;
    padding: 22px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: rgba(126, 163, 195, .25) transparent;
    scrollbar-width: thin;
}

.view::-webkit-scrollbar { width: 8px; height: 8px; }
.view::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(126, 163, 195, .22); }
.view::-webkit-scrollbar-track { background: transparent; }

.page-head { margin: 0 0 18px; }
.page-head h2 {
    margin: 0 0 7px;
    color: #f4f9ff;
    font-size: 20px;
    font-weight: 850;
    letter-spacing: .02em;
}
.page-head p { margin: 0; color: #7894ac; font-size: 13px; line-height: 1.7; }

.card {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

.card-head {
    display: flex;
    margin: -2px 0 16px;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card-head h3 {
    margin: 0;
    color: #eaf4ff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
}

.card-head h3::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 13px;
    margin-right: 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--app-primary), var(--app-primary-2));
    vertical-align: -1px;
}

.card-head .spacer { flex: 1; }

.card-foot {
    display: flex;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(148, 188, 226, .13);
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- 网格 ---------- */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2-1 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }

@media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .grid-2-1, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px)  { .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 信息行 ---------- */

.info-list { display: grid; gap: 0; }

.info-row {
    display: flex;
    padding: 14px 2px;
    border-bottom: 1px dashed rgba(148, 188, 226, .12);
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.info-row:last-child { border-bottom: 0; }

.info-row > .k {
    flex: 0 0 150px;
    color: #7894ac;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .02em;
}

.info-row > .v {
    flex: 1;
    min-width: 0;
    color: #e9f5ff;
    font-size: 14px;
    font-weight: 650;
    word-break: break-all;
}

.stat-tile {
    padding: 18px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-panel-soft);
}

.stat-tile .lab {
    display: block;
    margin-bottom: 9px;
    color: #607d96;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.stat-tile .num {
    display: block;
    color: #fff;
    font-size: 24px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.stat-tile .num small { margin-left: 4px; color: #86a0b8; font-size: 12px; font-weight: 700; }
.stat-tile .sub { display: block; margin-top: 7px; color: #7894ac; font-size: 12px; }
.stat-tile.is-primary { border-color: rgba(57, 167, 255, .30); background: rgba(57, 167, 255, .07); }
.stat-tile.is-primary .num { color: #9ed6ff; }
.stat-tile.is-success { border-color: rgba(42, 214, 160, .26); background: rgba(42, 214, 160, .06); }
.stat-tile.is-success .num { color: #7cf0c8; }
.stat-tile.is-danger { border-color: rgba(255, 100, 124, .26); background: rgba(255, 100, 124, .06); }
.stat-tile.is-danger .num { color: #ffa5b6; }
.stat-tile.is-warn { border-color: rgba(255, 211, 106, .24); background: rgba(255, 211, 106, .06); }
.stat-tile.is-warn .num { color: #ffdf9b; }

/* ---------- 表格 ---------- */

.table-wrap {
    border: 1px solid rgba(148, 188, 226, .11);
    border-radius: 13px;
    background: rgba(8, 19, 34, .55);
    overflow: hidden;
}

.table-scroll { width: 100%; overflow-x: auto; }

table.dt {
    width: 100%;
    min-width: 620px;
    border-spacing: 0;
    border-collapse: separate;
    font-size: 13px;
}

table.dt thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 14px;
    color: #6f8ba5;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .11em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--app-border);
    background: rgba(10, 23, 39, .97);
}

table.dt tbody td {
    padding: 12px 14px;
    color: #c9dced;
    border-bottom: 1px solid rgba(148, 188, 226, .07);
    vertical-align: middle;
}

table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt tbody tr:hover td { background: rgba(57, 167, 255, .05); }
table.dt tbody tr.is-active-row td { background: rgba(57, 167, 255, .09); }

table.dt .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.dt .mono { font-family: Consolas, "Courier New", monospace; letter-spacing: .02em; }
table.dt .nowrap { white-space: nowrap; }
table.dt .dim { color: #6f8ba5; }
table.dt .strong { color: #f2f9ff; font-weight: 750; }

.money-in { color: #6ff0c4; font-weight: 750; }
.money-out { color: #ff9dad; font-weight: 750; }

.empty {
    padding: 34px 18px;
    color: #607d96;
    font-size: 13px;
    text-align: center;
}

.empty .ico { width: 26px; height: 26px; margin: 0 auto 10px; color: #334c66; stroke-width: 1.5; }

/* ---------- 徽标 ---------- */

.badge {
    display: inline-flex;
    height: 24px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 750;
    line-height: 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 5px;
}

.badge.t-pending  { color: #ffd36a; border-color: rgba(255, 211, 106, .30); background: rgba(255, 211, 106, .10); }
.badge.t-waiting  { color: #7cc4ff; border-color: rgba(57, 167, 255, .32); background: rgba(57, 167, 255, .11); }
.badge.t-received { color: #56e8b4; border-color: rgba(42, 214, 160, .34); background: rgba(42, 214, 160, .11); }
.badge.t-released { color: #a6bdd2; border-color: rgba(148, 188, 226, .22); background: rgba(148, 188, 226, .09); }
.badge.t-expired  { color: #ff8b9f; border-color: rgba(255, 100, 124, .32); background: rgba(255, 100, 124, .10); }
.badge.t-failed   { color: #ff647c; border-color: rgba(255, 100, 124, .38); background: rgba(255, 100, 124, .14); }
.badge.t-canceled { color: #93a7bb; border-color: rgba(148, 163, 184, .22); background: rgba(148, 163, 184, .10); }
.badge.t-role     { color: #b0a3ff; border-color: rgba(110, 92, 255, .34); background: rgba(110, 92, 255, .12); }
.badge.t-soft     { color: #8fb0c9; border-color: rgba(148, 188, 226, .18); background: rgba(148, 188, 226, .07); }

/* ---------- 表单 ---------- */

.form-grid { display: grid; gap: 15px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .form-grid.cols-2 { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.field > label {
    color: #8aa4bc;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .05em;
}

.field .hint { color: #607d96; font-size: 12px; line-height: 1.6; }

.input,
.select,
textarea.input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    color: #eaf5ff;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid rgba(148, 188, 226, .17);
    border-radius: 12px;
    outline: none;
    background: rgba(9, 21, 36, .92);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea.input { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.7; resize: vertical; }

.input::placeholder,
textarea.input::placeholder { color: #4d6479; }

.input:hover, .select:hover, textarea.input:hover { border-color: rgba(57, 167, 255, .30); }

.input:focus, .select:focus, textarea.input:focus {
    border-color: rgba(57, 167, 255, .62);
    background: rgba(9, 21, 36, 1);
    box-shadow: 0 0 0 4px rgba(57, 167, 255, .12);
}

.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #6f8ba5 50%),
        linear-gradient(135deg, #6f8ba5 50%, transparent 50%);
    background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.select option { color: #0d1c2f; background: #f2f7fb; }

.input-group { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.input-group > .input, .input-group > .select { flex: 1; min-width: 0; width: auto; }
@media (max-width: 640px) { .input-group { flex-direction: column; } .input-group > * { width: 100%; } }

/* ---------- 按钮 ---------- */

.btn {
    display: inline-flex;
    height: 42px;
    padding: 0 19px;
    color: #d9e9f8;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 750;
    letter-spacing: .02em;
    border: 1px solid rgba(148, 188, 226, .19);
    border-radius: 12px;
    outline: none;
    background: rgba(255, 255, 255, .045);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background .18s ease,
                box-shadow .18s ease, transform .14s ease;
}

.btn .ico { width: 15px; height: 15px; }
.btn:hover { color: #fff; border-color: rgba(57, 167, 255, .45); background: rgba(57, 167, 255, .11); }
.btn:active { transform: scale(.975); }
.btn:focus-visible { outline: 2px solid rgba(96, 165, 250, .8); outline-offset: 2px; }
.btn:disabled, .btn.is-busy { opacity: .58; cursor: not-allowed; transform: none; }

.btn-primary {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
    box-shadow: 0 10px 26px rgba(57, 167, 255, .24);
}
.btn-primary:hover {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #4fb2ff, #7d6cff);
    box-shadow: 0 12px 30px rgba(57, 167, 255, .32);
}

.btn-success {
    color: #072019;
    border-color: transparent;
    background: linear-gradient(135deg, #2ad6a0, #17b98a);
    box-shadow: 0 10px 24px rgba(42, 214, 160, .22);
}
.btn-success:hover { color: #04140f; border-color: transparent; background: linear-gradient(135deg, #3ce4ae, #1cc796); }

.btn-danger {
    color: #ffdbe2;
    border-color: rgba(255, 100, 124, .30);
    background: rgba(255, 100, 124, .10);
}
.btn-danger:hover { color: #fff; border-color: rgba(255, 100, 124, .55); background: rgba(255, 100, 124, .20); }

.btn-ghost { color: #a3bacd; background: transparent; }
.btn-ghost:hover { color: #fff; }

.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.btn-sm .ico { width: 13px; height: 13px; }
.btn-lg { height: 50px; padding: 0 28px; font-size: 15px; border-radius: 14px; }
.btn-lg .ico { width: 18px; height: 18px; }

.btn .spin {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid rgba(255, 255, 255, .30);
    border-top-color: #fff;
    border-radius: 50%;
    animation: query-loading-spin .7s linear infinite;
}

@keyframes query-loading-spin { to { transform: rotate(360deg); } }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- 取码面板 ---------- */

.phone-panel {
    display: grid;
    padding: 24px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background:
        radial-gradient(circle at 100% 0, rgba(57, 167, 255, .10), transparent 22rem),
        var(--app-panel);
    box-shadow: var(--app-shadow);
    gap: 16px;
}

.phone-panel.is-live {
    border-color: rgba(57, 167, 255, .34);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28), 0 0 0 1px rgba(57, 167, 255, .10);
}

.phone-panel.is-hit {
    border-color: rgba(42, 214, 160, .48);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28), 0 0 0 3px rgba(42, 214, 160, .14);
}

.pp-label {
    display: flex;
    color: #607d96;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
    align-items: center;
    gap: 9px;
}

.pp-phone {
    display: flex;
    padding: 2px 0;
    color: #f6fbff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .03em;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    word-break: break-all;
}

.pp-phone.is-empty { color: #48607a; font-size: 22px; font-weight: 700; }

.code-box {
    display: flex;
    min-height: 96px;
    padding: 16px 20px;
    border: 1px dashed rgba(148, 188, 226, .22);
    border-radius: 14px;
    background: rgba(8, 19, 34, .62);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.code-box.is-hit {
    border-style: solid;
    border-color: rgba(42, 214, 160, .55);
    background: rgba(42, 214, 160, .09);
    box-shadow: inset 0 0 0 1px rgba(42, 214, 160, .16);
}

.code-value {
    color: #48607a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 34px;
    font-weight: 850;
    letter-spacing: .16em;
    word-break: break-all;
    line-height: 1.1;
}

.code-box.is-hit .code-value {
    color: #6ff0c4;
    text-shadow: 0 0 26px rgba(42, 214, 160, .40);
}

.code-hint { color: #6f8ba5; font-size: 12.5px; line-height: 1.7; }

.sms-text {
    padding: 13px 15px;
    color: #a9c2d7;
    font-size: 13px;
    line-height: 1.8;
    border: 1px solid rgba(148, 188, 226, .12);
    border-radius: 12px;
    background: rgba(8, 19, 34, .5);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 170px;
    overflow-y: auto;
}

.pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ad6a0;
    box-shadow: 0 0 0 4px rgba(42, 214, 160, .14);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.pulse-dot.is-idle { background: #58738d; box-shadow: 0 0 0 4px rgba(88, 115, 141, .12); animation: none; }
.pulse-dot.is-warn { background: #ffd36a; box-shadow: 0 0 0 4px rgba(255, 211, 106, .14); }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.82); }
}

.kv-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kv-pill {
    display: inline-flex;
    height: 30px;
    padding: 0 12px;
    color: #a9c2d7;
    font-size: 12.5px;
    border: 1px solid rgba(148, 188, 226, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    align-items: center;
    gap: 7px;
}

.kv-pill b { color: #eaf5ff; font-weight: 750; font-variant-numeric: tabular-nums; }

.progress-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 188, 226, .12);
}

.progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-primary-2));
    transition: width .9s linear;
}

/* ---------- 分页（四方式 page_div） ---------- */

.pg-div {
    display: flex;
    margin-top: 14px;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #9fb6cc;
    font-size: 13px;
}

.pg-div a {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    color: #9fb6cc;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.pg-div a:hover { color: #eaf5ff; border-color: #3b6d96; }
.pg-div a.is-disabled { opacity: .42; cursor: default; }
.pg-div a.is-disabled:hover { color: #9fb6cc; border-color: var(--app-border); }
.pg-div a.current { background: var(--app-primary); border-color: var(--app-primary); color: #06121f; font-weight: 700; cursor: default; }
.pg-div span.totalPages, .pg-div span.totalSize { margin-left: 6px; }

.pg-div select.pg-size {
    margin: 0 2px;
    padding: 3px 8px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-panel-soft);
    color: #eaf5ff;
    font-size: 13px;
    font-family: inherit;
}
/* ---------- 消息提示 / 弹窗 ---------- */

.toast-host {
    position: fixed;
    z-index: 3000;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: min(92vw, 380px);
}

.toast {
    display: flex;
    padding: 13px 16px;
    color: #e8f4ff;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.55;
    border: 1px solid rgba(148, 188, 226, .20);
    border-radius: 13px;
    background: rgba(15, 23, 42, .97);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: flex-start;
    gap: 10px;
    pointer-events: auto;
    animation: toast-in .22s ease;
}

.toast > svg { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 20px; }
.toast.t-ok    { color: #d8fff1; border-color: rgba(42, 214, 160, .38); }
.toast.t-ok > svg { color: #2ad6a0; }
.toast.t-err   { color: #ffe3e8; border-color: rgba(255, 100, 124, .40); }
.toast.t-err > svg { color: #ff647c; }
.toast.t-warn  { color: #fff4da; border-color: rgba(255, 211, 106, .36); }
.toast.t-warn > svg { color: #ffd36a; }
.toast.t-info > svg  { color: #60a5fa; }
.toast.is-out { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }

@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.modal-host {
    position: fixed;
    z-index: 3100;
    inset: 0;
    display: none;
    padding: 20px;
    background: rgba(1, 8, 16, .70);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.modal-host.is-open { display: flex; }

.modal {
    width: min(94vw, 460px);
    padding: 24px;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 18px;
    background: rgba(12, 24, 40, .98);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .48);
    animation: modal-in .2s ease;
}

@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.modal h3 {
    display: flex;
    margin: 0 0 12px;
    color: #f2f9ff;
    font-size: 16.5px;
    font-weight: 850;
    align-items: center;
    gap: 10px;
}

.modal h3 .ico { width: 19px; height: 19px; color: #60a5fa; flex: 0 0 19px; }
.modal.modal-danger h3 .ico { color: #ff647c; }

.modal .modal-body {
    color: #a9c2d7;
    font-size: 13.5px;
    line-height: 1.85;
}

.modal .modal-body .hl { color: #fff; font-weight: 750; }
.modal .modal-body .warn { color: #ffd36a; font-weight: 750; }
.modal .modal-body .danger-txt { color: #ff9dad; font-weight: 750; }
.modal .modal-body .ok-txt { color: #6ff0c4; font-weight: 750; }

.modal .modal-body .kv {
    display: flex;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(148, 188, 226, .12);
    gap: 12px;
    align-items: center;
}
.modal .modal-body .kv:last-child { border-bottom: 0; }
.modal .modal-body .kv .k { flex: 0 0 96px; color: #7894ac; font-size: 12.5px; }
.modal .modal-body .kv .v { flex: 1; min-width: 0; color: #eaf5ff; font-weight: 700; word-break: break-all; }

.modal-actions { display: flex; margin-top: 22px; gap: 10px; justify-content: flex-end; }

/* ---------- 加载条 ---------- */

.top-loading {
    position: absolute;
    z-index: 1200;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.top-loading.is-on { opacity: 1; }

.top-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--app-primary), var(--app-primary-2), transparent);
    animation: top-loading-run 1.05s ease-in-out infinite;
}

@keyframes top-loading-run {
    0% { transform: translateX(-45%); }
    100% { transform: translateX(255%); }
}

/* ---------- 登录 / 注册（沿用侧栏深色调，视觉同源） ---------- */

.auth-shell {
    position: fixed;
    inset: 0;
    display: grid;
    padding: 24px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 12% 0%, rgba(57, 167, 255, .18), transparent 32rem),
        radial-gradient(circle at 100% 100%, rgba(110, 92, 255, .14), transparent 34rem),
        var(--app-bg);
    place-items: center;
}

.auth-card {
    width: min(94vw, 430px);
    padding: 30px 30px 26px;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    background: var(--app-panel);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .44);
}

.auth-brand {
    display: flex;
    margin-bottom: 22px;
    align-items: center;
    gap: 14px;
}

.auth-mark {
    position: relative;
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    background: linear-gradient(145deg, var(--app-primary), var(--app-primary-2));
    box-shadow: 0 10px 28px rgba(57, 167, 255, .26);
    place-items: center;
}

.auth-mark span { position: relative; z-index: 2; line-height: 1; letter-spacing: -1px; }

.auth-mark::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 32px;
    height: 9px;
    right: -9px;
    bottom: 5px;
    opacity: .7;
    border-radius: 999px;
    background: #78e7ff;
    transform: rotate(-45deg);
}

.auth-brand-copy { min-width: 0; line-height: 1.2; }
.auth-brand-copy strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 19px;
    font-weight: 850;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auth-brand-copy small {
    display: block;
    margin-top: 7px;
    color: #6f8ba5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.auth-tabs {
    display: flex;
    padding: 4px;
    margin-bottom: 20px;
    border: 1px solid rgba(148, 188, 226, .12);
    border-radius: 13px;
    background: rgba(8, 19, 34, .62);
    gap: 4px;
}

.auth-tabs button {
    flex: 1;
    height: 38px;
    color: #7792aa;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 750;
    border: 0;
    border-radius: 10px;
    outline: none;
    background: transparent;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}

.auth-tabs button:hover { color: #dceeff; background: rgba(255, 255, 255, .04); }

.auth-tabs button.is-on {
    color: #fff;
    background: linear-gradient(135deg, rgba(57, 167, 255, .90), rgba(110, 92, 255, .90));
    box-shadow: 0 8px 22px rgba(57, 167, 255, .24);
}

.auth-form { display: grid; gap: 15px; }
.auth-form .btn { width: 100%; margin-top: 4px; }

.notice-strip {
    display: flex;
    padding: 12px 14px;
    margin-top: 18px;
    color: #a9c2d7;
    font-size: 12.5px;
    line-height: 1.75;
    border: 1px solid rgba(255, 211, 106, .22);
    border-radius: 12px;
    background: rgba(255, 211, 106, .06);
    align-items: flex-start;
    gap: 9px;
}

.notice-strip .ico { width: 15px; height: 15px; margin-top: 2px; flex: 0 0 15px; color: #ffd36a; }

.auth-foot {
    padding-top: 16px;
    margin-top: 18px;
    color: #4f687f;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
    border-top: 1px solid rgba(148, 188, 226, .10);
}

.auth-foot a { color: #7fb6e0; text-decoration: none; }
.auth-foot a:hover { color: #a8d8ff; }

/* ---------- 工具 ---------- */

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.muted { color: #6f8ba5; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: Consolas, "Courier New", monospace; }
.hidden { display: none !important; }
.ta-r { text-align: right; }

/* ==================================================================
 * 收码业务页：国家卡片 + 项目列表（对齐四方的「先选国家」结构）
 * 以及放大版提示弹窗
 * ================================================================== */

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

.country-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--app-border);
  border-radius: 13px;
  background: var(--app-panel-soft);
  color: var(--app-text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}

.country-chip:hover {
  border-color: rgba(57, 167, 255, .55);
  background: rgba(57, 167, 255, .10);
  transform: translateY(-1px);
}

.country-chip.is-on {
  border-color: var(--app-primary);
  background: linear-gradient(135deg, rgba(57, 167, 255, .22), rgba(110, 92, 255, .18));
  box-shadow: 0 0 0 1px var(--app-primary) inset, 0 8px 22px rgba(57, 167, 255, .22);
}

.country-chip .cc-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
}

.country-chip .cc-meta {
  font-size: 11.5px;
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}

.country-chip.is-on .cc-meta { color: #bcd9f5; }

/* ---------------- 项目列表 ---------------- */

.project-list {
  max-height: 540px;
  overflow-y: auto;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background: rgba(8, 20, 35, .55);
}

.project-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(148, 188, 226, .08);
  transition: background .14s ease;
}

.project-row:last-child { border-bottom: 0; }
.project-row:hover { background: rgba(57, 167, 255, .07); }

.project-row .pr-main { flex: 1; min-width: 0; }

.project-row .pr-name {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--app-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row .pr-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: #5d7b96;
  font-variant-numeric: tabular-nums;
}

.project-row .pr-price {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  color: #7dd3fc;
  font-variant-numeric: tabular-nums;
  min-width: 78px;
  text-align: right;
}

.project-row.is-dead { opacity: .48; }
.project-row.is-dead:hover { background: transparent; }
.project-row.is-dead .pr-name { text-decoration: line-through; text-decoration-color: rgba(134, 160, 184, .5); }
.project-row.is-dead .pr-price { color: var(--app-muted); }