/* ============================================================
   赤月工具后台 — 清爽干净风格
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: block;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
h1, h2, h3 { line-height: 1.3; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* ---------- Topbar ---------- */
.admin-topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 24px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.topbar-brand a {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: .5px;
}
.topbar-brand a:hover { color: var(--primary); text-decoration: none; }
.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.topbar-home-btn {
    font-size: 18px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .15s;
}
.topbar-home-btn:hover { background: var(--bg-2); text-decoration: none; }

/* User Dropdown */
.user-menu { position: relative; }
.user-trigger {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: #f9fafb;
    border: 1px solid var(--border);
    user-select: none;
    transition: background .15s;
}
.user-trigger:hover { background: var(--bg-2); }
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown { display: block; }
.user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    top: 100%;
    padding-top: 6px;
    min-width: 180px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
    z-index: 200;
    overflow: hidden;
}
.dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    transition: background .15s;
}
.dropdown-item:hover { background: #f9fafb; text-decoration: none; }
.user-dropdown hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}
.dropdown-logout {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    font-size: 14px;
    color: #dc2626;
    background: none;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.dropdown-logout:hover { background: #fef2f2; }

/* ---------- Layout: sidebar + main ---------- */
.admin-wrap {
    min-height: calc(100vh - 56px);
}

/* 顶部导航（鼠标悬停展开下拉） */
.topnav {
    position: sticky; top: 56px; z-index: 90;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.topnav-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; list-style: none; margin: 0; padding: 0; gap: 2px; }
.topnav-item { position: relative; }
.topnav-label {
    display: flex; align-items: center; gap: 4px;
    padding: 13px 16px; font-size: 13.5px; font-weight: 600;
    color: var(--text); cursor: pointer; white-space: nowrap; user-select: none;
}
.topnav-label:hover, .topnav-item.open > .topnav-label { background: var(--bg-2); color: var(--text); }
.topnav-dropdown {
    position: absolute; top: 100%; left: 0;
    min-width: 220px; background: var(--card);
    border: 1px solid var(--border); border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    display: none; z-index: 1000; padding: 6px 0;
}
.topnav-item:hover > .topnav-dropdown { display: block; }
.topnav-link { display: block; padding: 10px 18px; font-size: 13.5px; color: var(--text); text-decoration: none; white-space: nowrap; }
.topnav-link:hover { background: var(--primary-soft); color: var(--primary); }
.topnav-link.active { background: var(--primary); color: #fff; font-weight: 600; }
.topnav-single { padding: 13px 16px; }
.topnav-link.external-link { color: #059669; }
.topnav-link.external-link:hover { background: #ecfdf5; color: #059669; }
.topnav-link.external-link.active { background: #059669; color: #fff; }

/* Main */
main {
    flex: 1;
    min-width: 0;
    padding: 28px 32px;
    overflow-y: auto;
}
.page-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
}

/* ---------- Flash / Alert ---------- */
.flash-msg {
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    border-left: 4px solid;
}
.flash-msg.success { background: #ecfdf5; color: #065f46; border-color: #10b981; }
.flash-msg.error   { background: #fef2f2; color: #991b1b; border-color: #ef4444; }
.flash-msg.warning { background: #fffbeb; color: #92400e; border-color: #f59e0b; }
.flash-msg.info    { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); }

/* ---------- Card ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    overflow-x: auto;
}
.card h2 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg-2);
}

/* ---------- Stats Grid ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.stats .card {
    margin-bottom: 0;
    padding: 18px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stats .card strong {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
}
.stats .card span {
    font-size: 13px;
    color: #6b7280;
}

/* ---------- KPI Grid (dashboard) ---------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
}
.kpi-card .kpi-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}
.kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
}
.kpi-card .kpi-sub {
    font-size: 12px;
    margin-top: 4px;
}
.kpi-card .kpi-name {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
}

/* ---------- Chart Row (dashboard) ---------- */
.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}
.chart-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #374151;
}
.chart-card canvas {
    max-height: 280px;
}
.chart-wrap {
    position: relative;
    height: 280px;
    width: 100%;
}

/* ---------- Latest Grid (dashboard) ---------- */
.latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.latest-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
}
.latest-col h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #374151;
}
.latest-item {
    padding: 8px 0;
    border-bottom: 1px solid #f9fafb;
    font-size: 13px;
    line-height: 1.5;
}
.latest-item:last-child { border-bottom: none; }
.latest-item .time {
    font-size: 11px;
    color: #9ca3af;
}
.nick-cell {
    font-weight: 600;
    color: #111827;
}

/* ---------- 最新注册表格（邮箱/昵称列自适应，防止挤压） ---------- */
table.mini-table {
    table-layout: fixed;
}
.mini-table thead th.col-email { width: 34%; }
.mini-table thead th.col-nick  { width: 30%; }
.mini-table thead th.col-status{ width: 16%; }
.mini-table thead th.col-time  { width: 20%; }
.mini-table tbody td.col-email,
.mini-table tbody td.col-nick {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-table tbody td.col-email { font-size: 12px; color: #6b7280; }
.mini-table tbody td.col-nick  { font-weight: 600; color: #111827; }
.mini-table tbody td.col-status{ white-space: nowrap; }
.mini-table tbody td.col-time  { font-size: 12px; color: #9ca3af; white-space: nowrap; }

/* ---------- Quick Links (dashboard) ---------- */
.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.quick-link-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #f0f2f5;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    transition: all .15s;
    text-decoration: none;
}
.quick-link-btn:hover {
    background: var(--primary);
    color: #fff;
    text-decoration: none;
}

/* ---------- License Tabs ---------- */
.license-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}
.license-tabs a {
    display: inline-block;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    text-decoration: none;
    transition: all .2s;
    margin-bottom: -2px;
}
.license-tabs a:hover {
    color: var(--primary-dark);
    background: var(--primary-soft);
}
.license-tabs a.active {
    color: var(--primary-dark);
    background: var(--card);
    border-color: var(--border);
    border-bottom: 2px solid #fff;
    font-weight: 600;
}

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
thead th {
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--bg-2);
    vertical-align: middle;
}
tbody tr:hover { background: #f9fafb; }
.row-inactive { opacity: .5; }
.row-inactive:hover { opacity: .7; }
.td-actions {
    white-space: nowrap;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ---------- Ads Table ---------- */
.ads-table thead th { font-size: 12px; }
.ads-table tbody td { padding: 10px 12px; vertical-align: middle; }

/* ---------- Pagination（授权中心等多页列表） ---------- */
.pagination { margin: 14px 0; font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pagination a { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; background: var(--card); transition: all .15s; }
.pagination a:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }

/* ---------- Form Elements ---------- */
label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 2px;
}
label small {
    display: block;
    font-weight: 400;
    color: #9ca3af;
    font-size: 11px;
    margin-top: 2px;
}
input, select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    background: var(--card);
    transition: border-color .15s, box-shadow .15s;
}
input[type="checkbox"] { width: auto; margin-right: 6px; }
textarea { resize: vertical; min-height: 60px; }
select { cursor: pointer; }

/* ---------- Form Helpers ---------- */
.grid-form2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.grid-form2 label { margin-bottom: 0; }

/* 通用表单：两列紧凑排布，避免每个输入框占满一整行 */
.grid-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.grid-form > label { margin-bottom: 0; }
.grid-form > .form-row,
.grid-form > button,
.grid-form > .form-actions {
    grid-column: 1 / -1;
}
.grid-form > button { width: auto; justify-self: start; }
.checkbox-line {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.form-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.form-group legend {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    padding: 0 6px;
}
.form-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.form-tip {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 8px;
}

/* ---------- Tools Form Tabs（基本信息 / 运行配置 / 下载配置） ---------- */
.tools-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 10px;
    flex-wrap: wrap;
}
.tools-tab {
    padding: 8px 20px;
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    background: var(--bg-2);
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    border-bottom: none;
}
.tools-tab:hover {
    background: var(--primary-soft);
    color: var(--primary);
}
.tools-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.tools-tab-panel {
    display: none;
}
.tools-tab-panel.active {
    display: block;
    animation: tabFadeIn .18s ease;
}
/* 下载配置：当前已上传安装包状态条 */
.pkg-status {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
}
.pkg-status small { color: #6b7280; font-size: 12px; }
.pkg-status.empty { background: #f8fafc; border-color: #e5e7eb; color: #6b7280; }
/* 轮播图：当前图片预览块 */
.img-current {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
}
.img-current img {
    max-width: 220px;
    max-height: 90px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
}
.img-current-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #6b7280; }
.img-current-meta strong { font-size: 13px; color: #111827; }
.img-current-meta code { background: #eef2f7; border-radius: 4px; padding: 1px 6px; word-break: break-all; color: #4b5563; }
.img-current.empty { color: #6b7280; font-size: 13px; gap: 8px; }
.img-current.empty strong { color: #111827; }
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}
.form-row {
    margin-bottom: 14px;
}
.form-row label { margin-bottom: 4px; }

/* ---------- 紧凑配置表单：字段两列并排，短字段更窄 ---------- */
.form-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 22px;
}
.form-compact .form-row {
    margin-bottom: 12px;
    min-width: 0;
}
.form-compact .form-row-full {
    grid-column: 1 / -1;
}
.form-compact .form-row-submit {
    grid-column: 1 / -1;
    margin-top: 6px;
}
.form-compact .field-narrow {
    max-width: 160px;
}
.form-compact .field-short {
    max-width: 260px;
}
.form-compact .field-wide {
    max-width: 480px;
}
.form-compact input[type="number"],
.form-compact input.field-narrow {
    width: 100%;
}
.form-compact .form-hint {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .form-compact { grid-template-columns: 1fr; }
}

/* ---------- Login ---------- */
.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding: 24px;
}
.login-box {
    width: 100%;
    max-width: 360px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.login-box form label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}
.login-box form input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    margin-bottom: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.login-box form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.login-box form button {
    width: 100%;
    padding: 11px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.login-box form button:hover { background: var(--primary-dark); }
.login-box .alert {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ---------- Buttons ---------- */
button, .btn-primary, a.btn-cancel {
    display: inline-block;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.4;
}
button, .btn-primary {
    background: var(--primary);
    color: #fff;
}
button:hover, .btn-primary:hover {
    background: var(--primary-dark);
    text-decoration: none;
}
button:active { transform: scale(.98); }

.btn-cancel {
    background: var(--bg-2);
    color: #374151;
    text-decoration: none;
}
.btn-cancel:hover { background: var(--border); text-decoration: none; }

/* Button colors */
.btn-warn { background: #f59e0b; color: #fff; }
.btn-warn:hover { background: #d97706; }
.btn-ok { background: #10b981; color: #fff; }
.btn-ok:hover { background: #059669; }
.btn-edit { background: var(--primary); color: #fff; }
.btn-edit:hover { background: var(--primary-dark); color: #fff; }
.btn-del { background: #ef4444; color: #fff; }
.btn-del:hover { background: #dc2626; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    background: var(--bg-2);
    color: #6b7280;
    margin-right: 4px;
}
.badge-ok { background: #d1fae5; color: #065f46; }
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-info { background: var(--primary-soft); color: var(--primary-dark); }
.badge-danger { background: #fee2e2; color: #991b1b; }
/* 别名：停用 / 封禁 / 过期 / 错误 等状态徽标（与 badge-danger 同款红色） */
.badge-err { background: #fee2e2; color: #991b1b; }

/* ---------- Trend indicators ---------- */
.trend-up { color: #059669; font-weight: 600; }
.trend-down { color: #dc2626; font-weight: 600; }

/* ---------- Users Table ---------- */
.users-table td { white-space: nowrap; }

/* ---------- Generic CRUD Table (ellipsis for long text) ---------- */
.table-wrap table td {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Misc ---------- */
.inline { display: inline; }
.no-grid .stats { display: flex; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .chart-row { grid-template-columns: 1fr; }
    .latest-grid { grid-template-columns: 1fr; }
    .grid-form2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .topnav-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .topnav-label { padding: 11px 13px; font-size: 13px; }
    main {
        padding: 20px 16px;
    }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .admin-topbar { padding: 0 12px; }
    .topbar-brand a { font-size: 15px; }
    .kpi-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr; }
}

/* 广告管理：顶部「展示位置」分类 Tab —— 靠左、白底深色字、清晰醒目 */
.ads-tabs { margin: 0 0 20px 0; }
.ads-tab {
    display: inline-block; vertical-align: middle;
    margin-right: 10px; margin-bottom: 6px;
    padding: 7px 18px; border-radius: 20px;
    font-size: 13px; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--text-2);
    background: var(--card); color: var(--text); font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: all .15s;
}
.ads-tab:hover { border-color: var(--text-2); box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.ads-tab.active { background: var(--primary); border-color: var(--primary); color: #ffffff; font-weight: 700; }

/* 广告图片字段的「上传图片」按钮 */
.img-upload-btn { margin-left: 8px; padding: 4px 10px; font-size: 12px; background: #1e293b; color: var(--text-2); border: 1px solid #2c3a52; border-radius: 6px; cursor: pointer; vertical-align: middle; }
.img-upload-btn:hover { background: #273549; color: #fff; }

/* 图片字段即时预览缩略图 */
.img-preview { margin-top: 6px; max-width: 280px; min-height: 4px; }
.img-preview img { max-width: 280px; max-height: 160px; border-radius: 6px; border: 1px solid var(--border); display: block; }

/* 横幅图片「复制首图到其他档位」 */
.banner-copy-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; flex-wrap: wrap; }
.btn-copy-imgs { padding: 5px 12px; font-size: 12px; background: #f59e0b; color: #1f2937; border: 1px solid #d97706; border-radius: 6px; cursor: pointer; }
.btn-copy-imgs:hover { background: #fbbf24; }

/* 广告列表内的曝光/点击统计 */
.ads-stats { margin-top: 4px; font-size: 12px; color: var(--text-2); }

/* 广告新增表单：默认折叠，点标题栏展开（让 Tab 过滤效果一目了然） */
.ads-form-card { margin-bottom: 18px; }
.ads-form-card[open] .ads-form-icon { content: '–'; }
.ads-form-toggle {
    display: flex; align-items: center; padding: 12px 16px;
    font-size: 14px; font-weight: 600; color: var(--primary);
    cursor: pointer; user-select: none; list-style: none;
    border-radius: 8px; transition: background .15s;
}
.ads-form-toggle::-webkit-details-marker { display: none; }
.ads-form-toggle:hover { background: var(--primary-soft); }
.ads-form-toggle .ads-form-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 8px;
    border-radius: 6px; background: var(--primary-soft); color: var(--primary-dark);
    font-size: 15px; font-weight: 700; line-height: 1;
    transition: transform .2s, background .2s;
}
.ads-form-card[open] .ads-form-toggle .ads-form-icon { transform: rotate(45deg); background: #bfdbfe; }
.ads-form-body { padding: 0 16px 16px; border-top: 1px solid var(--border); margin-top: 0; }

/* 广告列表：标题作为名称下方的副行显示 */
.ads-table .ads-title { margin-top: 3px; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.ads-table .td-actions { white-space: nowrap; }
.ads-table .td-actions > * { margin-right: 4px; }

/* ===== 用户详情弹窗（Modal） ===== */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.modal-box {
    background: var(--card); border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: modalIn .2s ease-out;
}
@keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:none} }
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-header button {
    background: none; border: none; font-size: 24px; cursor: pointer;
    color: var(--text-2); line-height: 1; padding: 0 4px;
}
.modal-header button:hover { color: var(--danger); }
.detail-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px 16px; font-size: 13px;
}
.detail-grid strong { color: var(--text-2); font-size: 12px; }
.detail-grid div { padding: 6px 0; }

/* 横幅图片独立区块高亮（一眼看出和其他广告类型隔离） */
.banner-img-group {
    border: 1px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(245,158,11,.15);
}
.banner-img-group > legend {
    color: #b45309;
    font-weight: 700;
    font-size: 13px;
}

/* ---------- 页面说明框 ---------- */
.page-help {
    background: var(--bg-2); border: 1px solid var(--border); border-left: 4px solid var(--primary);
    border-radius: 8px; margin: 0 0 18px; padding: 0; font-size: 13px;
}
.page-help > summary {
    cursor: pointer; padding: 10px 16px; font-weight: 600; color: var(--primary-dark);
    list-style: none; user-select: none;
}
.page-help > summary::-webkit-details-marker { display: none; }
.page-help > summary::before { content: "▾"; margin-right: 6px; color: var(--primary); }
.page-help[open] > summary::before { content: "▾"; }
.page-help-body { padding: 0 16px 14px; color: var(--text-2); line-height: 1.7; }
.page-help .help-usage { margin: 0 0 8px; }
.page-help .help-how { margin: 0 0 4px; color: var(--text); }
.page-help .help-how-body { color: var(--text-2); white-space: pre-wrap; }

/* ---------- 发布同步中心 ---------- */
.publish-center { max-width: 980px; }
.publish-center .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.publish-center h2 { font-size: 16px; margin: 0 0 12px; color: #111827; }
.publish-center .help-block { background: var(--bg-2); border-left: 4px solid var(--primary); }
.publish-center .muted, .muted { color: #6b7280; font-size: 13px; line-height: 1.7; }
.token-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.token-box code { background: var(--bg-2); padding: 8px 12px; border-radius: 8px; font-size: 14px; word-break: break-all; }
.inline-form { display: inline; }
.code-block { position: relative; background: #0f172a; color: #e2e8f0; padding: 16px 18px; border-radius: 10px; overflow: auto; font-size: 13px; line-height: 1.6; white-space: pre; }
.code-block .copy-btn { position: absolute; top: 8px; right: 8px; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; padding: 4px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.code-block .copy-btn:hover { background: #475569; }
.kv { margin: 0; padding-left: 18px; line-height: 1.9; color: #475569; }
.kv code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; }

/* ============================================================
   工具类（抽自 admin.php 内联样式，统一调色板，支持换肤）
   ============================================================ */
/* 文本尺寸 */
.u-fs-11{font-size:11px}.u-fs-12{font-size:12px}.u-fs-13{font-size:13px}
.u-fs-14{font-size:14px}.u-fs-24{font-size:24px}.u-fs-28{font-size:28px}.u-fs-32{font-size:32px}
/* 文本颜色（统一调色板：灰阶统一到 --text-2，主色/状态色统一） */
.u-muted{color:var(--text-2)}
.u-primary{color:var(--primary)}
.u-ok{color:#059669}.u-warn{color:#d97706}.u-danger{color:var(--danger)}
.u-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.u-mono-primary{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--primary)}
/* 间距 */
.u-mb-0{margin-bottom:0}.u-mb-8{margin-bottom:8px}.u-mb-14{margin-bottom:14px}
.u-mb-16{margin-bottom:16px}.u-mb-20{margin-bottom:20px}.u-mb-24{margin-bottom:24px}.u-mb-26{margin-bottom:26px}
.u-mt-0{margin-top:0}.u-mt-6{margin-top:6px}.u-mt-20{margin-top:20px}
.u-ml-6{margin-left:6px}
/* 布局 */
.u-inline{display:inline}.u-hidden{display:none}
.u-flex{display:flex}.u-flex-wrap{flex-wrap:wrap}.u-align-center{align-items:center}
.u-flex-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.u-flex-row{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.u-col-full{grid-column:1/-1}
.u-ta-center{text-align:center}
.u-rel{position:relative}
/* 宽度 */
.u-w-50{width:50px}.u-w-55{width:55px}.u-w-60{width:60px}.u-w-70{width:70px}
.u-w-100{width:100px}.u-w-120{width:120px}.u-w-130{width:130px}.u-w-150{width:150px}.u-w-160{width:160px}
/* 内边距 */
.u-pad-0{padding:0}.u-pad-6-8{padding:6px 8px}.u-pad-8{padding:8px}
.u-pad-14-18{padding:14px 18px}.u-pad-16{padding:16px}
/* 背景/软区 */
.u-bg-soft{background:var(--primary-soft)}
/* 组件 */
.u-stat-card{flex:1;min-width:150px;padding:16px 20px;display:flex;align-items:center;gap:12px}
.u-stat-card-lg{flex:1;min-width:180px;padding:16px 20px;display:flex;align-items:center;gap:12px}
.u-stat-num{font-size:28px;font-weight:700}
.u-empty{text-align:center;padding:30px;color:var(--text-2)}
.u-empty-sm{text-align:center;padding:20px;color:var(--text-2)}
.u-box-warn{background:#fff3cd;border:1px solid #ffc107;color:#856404;padding:24px;border-radius:8px}
.u-box-info{background:var(--primary-soft);border:1px solid var(--primary);color:var(--primary-dark);padding:24px;border-radius:8px}
.u-block-btn{display:block;margin:0 auto;padding:14px 64px;font-size:16px;border-radius:10px}
.u-narrow{max-width:720px;margin:0 auto;padding:44px 56px}

/* 二轮：重复模式抽类 */
.u-form-label{display:block;font-size:14px;color:#555;margin-bottom:8px;font-weight:500}
.u-input-lg{width:100%;padding:14px 48px 14px 16px;border:1px solid #d1d5db;border-radius:10px;font-size:15px;box-sizing:border-box}
.u-input-clear{position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:19px;opacity:.55;user-select:none}
.u-sub{margin-top:6px;font-size:13px}
.u-lead{font-size:13px;color:var(--text-2);margin:0 0 10px}
.u-title-center{font-size:24px;text-align:center;margin:0 0 16px}
.u-desc-center{font-size:14px;line-height:1.8;margin:0 0 26px;text-align:center;color:var(--text-2)}
.u-narrow-sm{max-width:480px;margin:0 auto}
.u-foot-hint{font-size:13px;color:var(--text-2);margin:20px 0 0;text-align:center}
.u-hidden-panel{display:none;background:var(--bg-2)}
.u-mono-12{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.u-nowrap-12{font-size:12px;white-space:nowrap}
.u-w-auto-mr8{width:auto;margin-right:8px}
.u-btn-fill{background:var(--primary);color:#fff;border:none;padding:10px 24px;border-radius:6px;font-size:14px;cursor:pointer}
.u-empty-lg{text-align:center;padding:60px 20px}
.u-empty-xl{text-align:center;padding:50px 20px}
.u-empty-icon{font-size:48px;margin-bottom:12px}
.u-banner-info{background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:10px 16px;margin-bottom:20px;font-size:13px;color:#0369a1}
.u-banner-warn{background:#fff3cd;border:1px solid #ffc107;border-radius:6px;padding:10px 14px;margin-bottom:8px;font-size:12px;color:#856404}
.u-table-sm{width:100%;font-size:12px;margin-bottom:16px;border-collapse:collapse}
.u-thumb{max-width:120px;max-height:120px;border-radius:6px;border:1px solid #e5e7eb}
.u-faint{color:#cbd5e1}
.u-warn-strong{color:#b45309}
.u-text{color:var(--text)}
.u-fs-10{font-size:10px}.u-fs-40{font-size:40px}
.u-minw-200{min-width:200px}.u-minw-230{min-width:230px}
.u-pad-12-16{padding:12px 16px}.u-pad-24{padding:24px}
.u-mb-12{margin-bottom:12px}
.u-sub-title{margin:0 0 8px}

/* 服务器云管理页精修：解锁条 / 工具栏 / 按钮态 / 链接态 */
.u-m-0{margin:0}
.u-ml-10{margin-left:10px}
.u-pad-9-14{padding:9px 14px}
.u-unlock-bar{display:flex;align-items:center;gap:12px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:8px 14px;margin-bottom:16px;font-size:13px;color:#047857}
.u-btn-outline-ok{background:#fff;border:1px solid #34d399;color:#047857;border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer}
.u-btn-danger-soft{background:#fee2e2;border:1px solid #fca5a5;color:#b91c1c;border-radius:6px;padding:6px 14px;font-size:12px;cursor:pointer}
.u-divider-top{margin-top:16px;border-top:1px dashed #e5e7eb;padding-top:14px}
.u-toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.u-toolbar-lg{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.u-input-search{flex:1;min-width:240px;padding:9px 12px;border:1px solid #d1d5db;border-radius:6px}
.u-select-sm{padding:9px 12px;border:1px solid #d1d5db;border-radius:6px}
.u-link-muted{color:var(--text-2);text-decoration:none}
.u-link-danger{color:var(--danger);text-decoration:none}
.u-pager{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}